diff --git a/frontend/cypress/integration/feature/feature.spec.ts b/frontend/cypress/integration/feature/feature.spec.ts
index 080cd8dffb..f58e403cab 100644
--- a/frontend/cypress/integration/feature/feature.spec.ts
+++ b/frontend/cypress/integration/feature/feature.spec.ts
@@ -106,16 +106,8 @@ describe('feature', () => {
             `/projects/default/features/${featureToggleName}/strategies/create?environmentId=development&strategyName=flexibleRollout`
         );
 
-        cy.wait(1000);
-        cy.get('[data-testid=ROLLOUT_SLIDER_ID')
-            .click()
-            .type('{leftarrow}'.repeat(20));
-
         if (ENTERPRISE) {
             cy.get('[data-testid=ADD_CONSTRAINT_ID]').click();
-            cy.get('[data-testid=CONSTRAINT_AUTOCOMPLETE_ID]')
-                .type('{downArrow}'.repeat(1))
-                .type('{enter}');
             cy.get('[data-testid=DIALOGUE_CONFIRM_ID]').click();
         }
 
@@ -126,7 +118,7 @@ describe('feature', () => {
                 expect(req.body.name).to.equal('flexibleRollout');
                 expect(req.body.parameters.groupId).to.equal(featureToggleName);
                 expect(req.body.parameters.stickiness).to.equal('default');
-                expect(req.body.parameters.rollout).to.equal('30');
+                expect(req.body.parameters.rollout).to.equal(100);
 
                 if (ENTERPRISE) {
                     expect(req.body.constraints.length).to.equal(1);
@@ -149,11 +141,6 @@ describe('feature', () => {
             `/projects/default/features/${featureToggleName}/strategies/edit?environmentId=development&strategyId=${strategyId}`
         );
 
-        cy.wait(1000);
-        cy.get('[data-testid=ROLLOUT_SLIDER_ID')
-            .click()
-            .type('{rightArrow}'.repeat(10));
-
         cy.get('[data-testid=FLEXIBLE_STRATEGY_STICKINESS_ID]')
             .first()
             .click()
@@ -172,7 +159,7 @@ describe('feature', () => {
             req => {
                 expect(req.body.parameters.groupId).to.equal('new-group-id');
                 expect(req.body.parameters.stickiness).to.equal('sessionId');
-                expect(req.body.parameters.rollout).to.equal('60');
+                expect(req.body.parameters.rollout).to.equal(100);
 
                 if (ENTERPRISE) {
                     expect(req.body.constraints.length).to.equal(1);
@@ -301,10 +288,7 @@ describe('feature', () => {
             .children()
             .find('input')
             .should('have.attr', 'disabled');
-        cy.get('[data-testid=VARIANT_WEIGHT_TYPE]')
-            .children()
-            .find('input')
-            .check();
+        cy.get('[data-testid=VARIANT_WEIGHT_CHECK]').find('input').check();
         cy.get('[data-testid=VARIANT_WEIGHT_INPUT]').clear().type('15');
 
         cy.intercept(
diff --git a/frontend/package.json b/frontend/package.json
index 9c4f9a6e52..0c67555997 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -37,9 +37,11 @@
     "e2e:heroku": "yarn run cypress open --config baseUrl='http://localhost:3000' --env AUTH_USER=example@example.com"
   },
   "devDependencies": {
-    "@material-ui/core": "4.12.4",
-    "@material-ui/icons": "4.11.3",
-    "@material-ui/lab": "4.0.0-alpha.61",
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/icons-material": "^5.6.2",
+    "@mui/lab": "^5.0.0-alpha.79",
+    "@mui/material": "^5.6.3",
     "@openapitools/openapi-generator-cli": "2.5.1",
     "@testing-library/dom": "8.13.0",
     "@testing-library/jest-dom": "5.16.4",
@@ -70,6 +72,7 @@
     "immer": "^9.0.12",
     "lodash.clonedeep": "4.5.0",
     "msw": "^0.39.2",
+    "pkginfo": "^0.4.1",
     "prettier": "2.6.2",
     "prop-types": "15.8.1",
     "react": "17.0.2",
@@ -85,6 +88,7 @@
     "sass": "1.51.0",
     "semver": "7.3.7",
     "swr": "1.3.0",
+    "tss-react": "^3.6.2",
     "typescript": "4.6.4"
   },
   "jest": {
@@ -119,8 +123,5 @@
     "ignorePatterns": [
       "cypress"
     ]
-  },
-  "dependencies": {
-    "pkginfo": "^0.4.1"
   }
 }
diff --git a/frontend/src/component/Reporting/ReportCard/ReportCard.tsx b/frontend/src/component/Reporting/ReportCard/ReportCard.tsx
index db3251126f..04e73f5372 100644
--- a/frontend/src/component/Reporting/ReportCard/ReportCard.tsx
+++ b/frontend/src/component/Reporting/ReportCard/ReportCard.tsx
@@ -1,7 +1,7 @@
 import classnames from 'classnames';
-import { Paper } from '@material-ui/core';
-import CheckIcon from '@material-ui/icons/Check';
-import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
+import { Paper } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import styles from './ReportCard.module.scss';
 import ReactTimeAgo from 'react-timeago';
diff --git a/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.styles.ts b/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.styles.ts
index 2707be78ab..dc7aea6442 100644
--- a/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.styles.ts
+++ b/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     reportToggleList: {
         width: '100%',
         margin: 'var(--card-margin-y) 0',
@@ -11,11 +11,9 @@ export const useStyles = makeStyles(theme => ({
         backgroundColor: '#f2f2f2',
         fontSize: 'var(--p-size)',
     },
-
     sortIcon: {
         marginLeft: 8,
     },
-
     reportToggleListHeader: {
         display: 'flex',
         justifyContent: 'space-between',
@@ -23,22 +21,18 @@ export const useStyles = makeStyles(theme => ({
         borderBottom: '1px solid #f1f1f1',
         padding: '1rem var(--card-padding-x)',
     },
-
     reportToggleListInnerContainer: {
         padding: 'var(--card-padding)',
     },
-
     reportToggleListHeading: {
         fontSize: 'var(--h1-size)',
         margin: 0,
         fontWeight: 'bold',
     },
-
     reportIcon: {
         fontsize: '1.5rem',
         marginRight: 5,
     },
-
     reportingToggleTable: {
         width: ' 100%',
         borderSpacing: '0 0.8rem',
@@ -50,20 +44,16 @@ export const useStyles = makeStyles(theme => ({
     expired: {
         color: 'var(--danger)',
     },
-
     active: {
         color: 'var(--success)',
     },
-
     stale: {
         color: 'var(--danger)',
     },
-
     reportStatus: {
         display: 'flex',
         alignItems: 'center',
     },
-
     tableRow: {
         '&:hover': {
             backgroundColor: '#eeeeee',
@@ -73,30 +63,28 @@ export const useStyles = makeStyles(theme => ({
         margin: 0,
         padding: 0,
     },
-
     link: {
         color: theme.palette.primary.main,
         textDecoration: 'none',
         fontWeight: theme.fontWeight.bold,
     },
-
-    [theme.breakpoints.down(800)]: {
-        hideColumn: {
+    hideColumn: {
+        [theme.breakpoints.down(800)]: {
             display: 'none',
         },
-        th: {
+    },
+    th: {
+        [theme.breakpoints.down(800)]: {
             minWidth: '120px',
         },
     },
-
-    [theme.breakpoints.down(550)]: {
-        hideColumnStatus: {
+    hideColumnStatus: {
+        [theme.breakpoints.down(550)]: {
             display: 'none',
         },
     },
-
-    [theme.breakpoints.down(425)]: {
-        hideColumnLastSeen: {
+    hideColumnLastSeen: {
+        [theme.breakpoints.down(425)]: {
             display: 'none',
         },
     },
diff --git a/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.tsx b/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.tsx
index b14cfa9885..b0dac53df4 100644
--- a/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.tsx
+++ b/frontend/src/component/Reporting/ReportToggleList/ReportToggleList.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect, VFC } from 'react';
-import { Paper, MenuItem } from '@material-ui/core';
+import { Paper, MenuItem } from '@mui/material';
 import { useFeaturesSort } from 'hooks/useFeaturesSort';
 import { IFeatureToggleListItem } from 'interfaces/featureToggle';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -25,7 +25,7 @@ export const ReportToggleList: VFC<IReportToggleListProps> = ({
     features,
     selectedProject,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [checkAll, setCheckAll] = useState(false);
     const [localFeatures, setFeatures] = useState<IFeatureToggleListItem[]>([]);
     // @ts-expect-error
diff --git a/frontend/src/component/Reporting/ReportToggleList/ReportToggleListHeader/ReportToggleListHeader.tsx b/frontend/src/component/Reporting/ReportToggleList/ReportToggleListHeader/ReportToggleListHeader.tsx
index d799b81bbe..bcb8bbe97e 100644
--- a/frontend/src/component/Reporting/ReportToggleList/ReportToggleListHeader/ReportToggleListHeader.tsx
+++ b/frontend/src/component/Reporting/ReportToggleList/ReportToggleListHeader/ReportToggleListHeader.tsx
@@ -1,6 +1,6 @@
 import { Dispatch, SetStateAction, VFC } from 'react';
-import { Checkbox } from '@material-ui/core';
-import UnfoldMoreOutlinedIcon from '@material-ui/icons/UnfoldMoreOutlined';
+import { Checkbox } from '@mui/material';
+import UnfoldMoreOutlinedIcon from '@mui/icons-material/UnfoldMoreOutlined';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ReportingSortType } from 'component/Reporting/constants';
 import { useStyles } from '../ReportToggleList.styles';
@@ -20,7 +20,7 @@ export const ReportToggleListHeader: VFC<IReportToggleListHeaderProps> = ({
     setSort,
     bulkActionsOn,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const handleSort = (type: ReportingSortType) => {
         setSort(prev => ({
             type,
diff --git a/frontend/src/component/Reporting/ReportToggleList/ReportToggleListItem/ReportToggleListItem.tsx b/frontend/src/component/Reporting/ReportToggleList/ReportToggleListItem/ReportToggleListItem.tsx
index 5fe410225f..bfe97a1ea2 100644
--- a/frontend/src/component/Reporting/ReportToggleList/ReportToggleListItem/ReportToggleListItem.tsx
+++ b/frontend/src/component/Reporting/ReportToggleList/ReportToggleListItem/ReportToggleListItem.tsx
@@ -1,9 +1,9 @@
 import { memo, ReactNode } from 'react';
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';
-import { Checkbox } from '@material-ui/core';
-import CheckIcon from '@material-ui/icons/Check';
-import ReportProblemOutlinedIcon from '@material-ui/icons/ReportProblemOutlined';
+import { Checkbox } from '@mui/material';
+import CheckIcon from '@mui/icons-material/Check';
+import ReportProblemOutlinedIcon from '@mui/icons-material/ReportProblemOutlined';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import FeatureStatus from 'component/feature/FeatureView/FeatureStatus/FeatureStatus';
 import {
@@ -41,7 +41,7 @@ export const ReportToggleListItem = memo<IReportToggleListItemProps>(
         bulkActionsOn,
         setFeatures,
     }) => {
-        const styles = useStyles();
+        const { classes: styles } = useStyles();
         const nameMatches = (feature: { name: string }) =>
             feature.name === name;
 
diff --git a/frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx b/frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx
index e483b9bc5f..39e737a3dc 100644
--- a/frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx
+++ b/frontend/src/component/addons/AddonForm/AddonEvents/AddonEvents.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
-import { Grid, FormControlLabel, Checkbox } from '@material-ui/core';
+import { Grid, FormControlLabel, Checkbox } from '@mui/material';
 
-import { styles as commonStyles } from 'component/common';
+import { styles as themeStyles } from 'component/common';
 import { IAddonProvider } from 'interfaces/addons';
 
 interface IAddonProps {
@@ -24,7 +24,7 @@ export const AddonEvents = ({
     return (
         <React.Fragment>
             <h4>Events</h4>
-            <span className={commonStyles.error}>{error}</span>
+            <span className={themeStyles.error}>{error}</span>
             <Grid container spacing={0}>
                 {provider.events.map(e => (
                     <Grid item xs={4} key={e}>
diff --git a/frontend/src/component/addons/AddonForm/AddonForm.tsx b/frontend/src/component/addons/AddonForm/AddonForm.tsx
index 2b86332cae..10ba48b855 100644
--- a/frontend/src/component/addons/AddonForm/AddonForm.tsx
+++ b/frontend/src/component/addons/AddonForm/AddonForm.tsx
@@ -7,9 +7,9 @@ import {
     FormEventHandler,
     MouseEventHandler,
 } from 'react';
-import { TextField, FormControlLabel, Switch, Button } from '@material-ui/core';
+import { TextField, FormControlLabel, Switch, Button } from '@mui/material';
 import produce from 'immer';
-import { styles as commonStyles } from 'component/common';
+import { styles as themeStyles } from 'component/common';
 import { trim } from 'component/common/util';
 import { IAddon, IAddonProvider } from 'interfaces/addons';
 import { AddonParameters } from './AddonParameters/AddonParameters';
@@ -19,10 +19,10 @@ import PageContent from 'component/common/PageContent/PageContent';
 import { useHistory } from 'react-router-dom';
 import useAddonsApi from 'hooks/api/actions/useAddonsApi/useAddonsApi';
 import useToast from 'hooks/useToast';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 import { formatUnknownError } from 'utils/formatUnknownError';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
     nameInput: {
         marginRight: '1.5rem',
     },
@@ -51,7 +51,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
     const { createAddon, updateAddon } = useAddonsApi();
     const { setToastData, setToastApiError } = useToast();
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const [formValues, setFormValues] = useState(initialValues);
     const [errors, setErrors] = useState<{
@@ -190,7 +190,7 @@ export const AddonForm: VFC<IAddonFormProps> = ({
                 <a href={documentationUrl} target="_blank" rel="noreferrer">
                     Read more
                 </a>
-                <p className={commonStyles.error}>{errors.general}</p>
+                <p className={themeStyles.error}>{errors.general}</p>
             </section>
             <form onSubmit={onSubmit}>
                 <section className={styles.formSection}>
diff --git a/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx b/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx
index a33fb1a76b..a994709bf8 100644
--- a/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx
+++ b/frontend/src/component/addons/AddonForm/AddonParameters/AddonParameter/AddonParameter.tsx
@@ -1,4 +1,4 @@
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 import { IAddonConfig, IAddonProviderParams } from 'interfaces/addons';
 import { ChangeEventHandler } from 'react';
 
diff --git a/frontend/src/component/addons/AddonList/AddonList.tsx b/frontend/src/component/addons/AddonList/AddonList.tsx
index 1407d3f2a0..4f448204bc 100644
--- a/frontend/src/component/addons/AddonList/AddonList.tsx
+++ b/frontend/src/component/addons/AddonList/AddonList.tsx
@@ -1,8 +1,8 @@
 import React, { ReactElement } from 'react';
 import { ConfiguredAddons } from './ConfiguredAddons/ConfiguredAddons';
 import { AvailableAddons } from './AvailableAddons/AvailableAddons';
-import { Avatar } from '@material-ui/core';
-import { DeviceHub } from '@material-ui/icons';
+import { Avatar } from '@mui/material';
+import { DeviceHub } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import slackIcon from 'assets/icons/slack.svg';
 import jiraIcon from 'assets/icons/jira.svg';
diff --git a/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx b/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx
index 4a1e27ace1..4307c92ee9 100644
--- a/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx
+++ b/frontend/src/component/addons/AddonList/AvailableAddons/AvailableAddons.tsx
@@ -6,7 +6,7 @@ import {
     ListItemAvatar,
     ListItemSecondaryAction,
     ListItemText,
-} from '@material-ui/core';
+} from '@mui/material';
 import { CREATE_ADDON } from 'component/providers/AccessProvider/permissions';
 import { useHistory } from 'react-router-dom';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
diff --git a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
index 41887a8071..f507c398a3 100644
--- a/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
+++ b/frontend/src/component/addons/AddonList/ConfiguredAddons/ConfiguredAddons.tsx
@@ -4,8 +4,8 @@ import {
     ListItemAvatar,
     ListItemSecondaryAction,
     ListItemText,
-} from '@material-ui/core';
-import { Delete, Edit, Visibility, VisibilityOff } from '@material-ui/icons';
+} from '@mui/material';
+import { Delete, Edit, Visibility, VisibilityOff } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import {
     DELETE_ADDON,
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.ts b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.ts
index d771e686ac..7677b5a830 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.ts
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '400px',
     },
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx
index cbbd279f50..6b14065814 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/ApiTokenForm.tsx
@@ -1,5 +1,5 @@
-import { Button } from '@material-ui/core';
-import { KeyboardArrowDownOutlined } from '@material-ui/icons';
+import { Button } from '@mui/material';
+import { KeyboardArrowDownOutlined } from '@mui/icons-material';
 import React from 'react';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
@@ -40,7 +40,7 @@ const ApiTokenForm: React.FC<IApiTokenFormProps> = ({
     clearErrors,
 }) => {
     const TYPE_ADMIN = 'ADMIN';
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { environments } = useEnvironments();
     const { projects: availableProjects } = useProjects();
 
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.styles.ts b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.styles.ts
index 06424e9dfe..5c1e706282 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.styles.ts
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     selectOptionsLink: {
         cursor: 'pointer',
         fontSize: theme.fontSizes.bodySize,
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.tsx
index 70ea7879ef..10d8165223 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectAllButton/SelectAllButton.tsx
@@ -1,5 +1,5 @@
 import React, { FC } from 'react';
-import { Box, Link } from '@material-ui/core';
+import { Box, Link } from '@mui/material';
 import { useStyles } from './SelectAllButton.styles';
 
 type SelectAllButtonProps = {
@@ -11,7 +11,7 @@ export const SelectAllButton: FC<SelectAllButtonProps> = ({
     isAllSelected,
     onClick,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <Box sx={{ ml: 3.5, my: 0.5 }}>
@@ -19,6 +19,7 @@ export const SelectAllButton: FC<SelectAllButtonProps> = ({
                 onClick={onClick}
                 className={styles.selectOptionsLink}
                 component="button"
+                underline="hover"
             >
                 {isAllSelected ? 'Deselect all' : 'Select all'}
             </Link>
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.styles.ts b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.styles.ts
index 5e5fc582ef..7c29c9bd3c 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.styles.ts
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     selectOptionCheckbox: {
         marginRight: '0.2rem',
     },
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.test.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.test.tsx
index 7c97626fcc..c27528824e 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.test.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.test.tsx
@@ -36,7 +36,7 @@ describe('SelectProjectInput', () => {
         expect(checkbox).toBeChecked();
 
         const selectInputContainer = screen.getByTestId('select-input');
-        const input = within(selectInputContainer).getByRole('textbox');
+        const input = within(selectInputContainer).getByRole('combobox');
         expect(input).toBeDisabled();
     });
 
@@ -72,7 +72,7 @@ describe('SelectProjectInput', () => {
         expect(checkbox).not.toBeChecked();
 
         const selectInputContainer = screen.getByTestId('select-input');
-        const input = within(selectInputContainer).getByRole('textbox');
+        const input = within(selectInputContainer).getByRole('combobox');
         expect(input).toBeEnabled();
     });
 
@@ -138,7 +138,7 @@ describe('SelectProjectInput', () => {
             />
         );
         const input = await screen.findByLabelText('Projects');
-        user.type(input, 'alp');
+        await user.type(input, 'alp');
 
         await waitFor(() => {
             expect(screen.getByText('Alpha')).toBeVisible();
@@ -153,8 +153,8 @@ describe('SelectProjectInput', () => {
             expect(screen.getByText('Alpaca')).toBeVisible();
         });
 
-        user.clear(input);
-        user.type(input, 'bravo');
+        await user.clear(input);
+        await user.type(input, 'bravo');
         await waitFor(() => {
             expect(screen.getByText('Bravo')).toBeVisible();
         });
diff --git a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.tsx b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.tsx
index 58cadb6161..37e2c3c4ca 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenForm/SelectProjectInput/SelectProjectInput.tsx
@@ -5,15 +5,17 @@ import {
     TextField,
     Box,
     Paper,
-} from '@material-ui/core';
+} from '@mui/material';
+import { Autocomplete } from '@mui/material';
+
 import {
-    Autocomplete,
     AutocompleteRenderGroupParams,
     AutocompleteRenderInputParams,
     AutocompleteRenderOptionState,
-} from '@material-ui/lab';
-import CheckBoxOutlineBlankIcon from '@material-ui/icons/CheckBoxOutlineBlank';
-import CheckBoxIcon from '@material-ui/icons/CheckBox';
+} from '@mui/material/Autocomplete';
+
+import CheckBoxOutlineBlankIcon from '@mui/icons-material/CheckBoxOutlineBlank';
+import CheckBoxIcon from '@mui/icons-material/CheckBox';
 import { IAutocompleteBoxOption } from 'component/common/AutocompleteBox/AutocompleteBox';
 import { useStyles } from '../ApiTokenForm.styles';
 import { SelectAllButton } from './SelectAllButton/SelectAllButton';
@@ -41,7 +43,7 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
     error,
     onFocus,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [projects, setProjects] = useState<string[]>(
         typeof defaultValue === 'string' ? [defaultValue] : defaultValue
     );
@@ -75,10 +77,11 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
     };
 
     const renderOption = (
+        props: object,
         option: IAutocompleteBoxOption,
         { selected }: AutocompleteRenderOptionState
     ) => (
-        <>
+        <li {...props}>
             <Checkbox
                 icon={<CheckBoxOutlineBlankIcon fontSize="small" />}
                 checkedIcon={<CheckBoxIcon fontSize="small" />}
@@ -86,7 +89,7 @@ export const SelectProjectInput: VFC<ISelectProjectInputProps> = ({
                 className={styles.selectOptionCheckbox}
             />
             {option.label}
-        </>
+        </li>
     );
 
     const renderGroup = ({ key, children }: AutocompleteRenderGroupParams) => (
diff --git a/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.styles.ts b/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.styles.ts
index d89dda8837..4b86ac8b9d 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.styles.ts
+++ b/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     tableRow: {
         '&:hover': {
             backgroundColor: theme.palette.grey[200],
@@ -9,7 +9,7 @@ export const useStyles = makeStyles(theme => ({
     container: {
         display: 'flex',
         flexWrap: 'wrap',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             justifyContent: 'center',
         },
     },
@@ -22,17 +22,17 @@ export const useStyles = makeStyles(theme => ({
         flexWrap: 'nowrap',
     },
     hideSM: {
-        [theme.breakpoints.down('sm')]: {
-            display: 'none',
-        },
-    },
-    hideMD: {
         [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
+    hideMD: {
+        [theme.breakpoints.down('lg')]: {
+            display: 'none',
+        },
+    },
     hideXS: {
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
     },
diff --git a/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx b/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
index 255fde0fc3..0b7acfef66 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenList/ApiTokenList.tsx
@@ -8,7 +8,7 @@ import {
     TableHead,
     TableRow,
     Tooltip,
-} from '@material-ui/core';
+} from '@mui/material';
 import AccessContext from 'contexts/AccessContext';
 import useToast from 'hooks/useToast';
 import useLoading from 'hooks/useLoading';
@@ -18,7 +18,7 @@ import useApiTokensApi from 'hooks/api/actions/useApiTokensApi/useApiTokensApi';
 import ApiError from 'component/common/ApiError/ApiError';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { DELETE_API_TOKEN } from 'component/providers/AccessProvider/permissions';
-import { Delete, FileCopy } from '@material-ui/icons';
+import { Delete, FileCopy } from '@mui/icons-material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import copy from 'copy-to-clipboard';
 import { useLocationSettings } from 'hooks/useLocationSettings';
@@ -37,7 +37,7 @@ interface IApiToken {
 }
 
 export const ApiTokenList = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { hasAccess } = useContext(AccessContext);
     const { uiConfig } = useUiConfig();
     const [showDelete, setShowDelete] = useState(false);
@@ -196,6 +196,7 @@ export const ApiTokenList = () => {
                                             onClick={() => {
                                                 copyToken(item.secret);
                                             }}
+                                            size="large"
                                         >
                                             <FileCopy />
                                         </IconButton>
@@ -209,6 +210,7 @@ export const ApiTokenList = () => {
                                                         setDeleteToken(item);
                                                         setShowDelete(true);
                                                     }}
+                                                    size="large"
                                                 >
                                                     <Delete />
                                                 </IconButton>
diff --git a/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.styles.ts b/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.styles.ts
index 16dd3dc13e..eb0c802bc2 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.styles.ts
+++ b/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     infoBoxContainer: {
         marginBottom: 40,
     },
diff --git a/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx b/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx
index 5bda1724f8..15fbdb05ec 100644
--- a/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx
+++ b/frontend/src/component/admin/apiToken/ApiTokenPage/ApiTokenPage.tsx
@@ -1,6 +1,6 @@
 import { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import AccessContext from 'contexts/AccessContext';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import PageContent from 'component/common/PageContent';
@@ -12,12 +12,12 @@ import {
 } from 'component/providers/AccessProvider/permissions';
 import { useStyles } from './ApiTokenPage.styles';
 import { CREATE_API_TOKEN_BUTTON } from 'utils/testIds';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import { ApiTokenList } from 'component/admin/apiToken/ApiTokenList/ApiTokenList';
 import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
 
 export const ApiTokenPage = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { hasAccess } = useContext(AccessContext);
     const { uiConfig } = useUiConfig();
     const history = useHistory();
diff --git a/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx b/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx
index ea592c9a8f..7526b9dffc 100644
--- a/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx
+++ b/frontend/src/component/admin/apiToken/ConfirmToken/ConfirmToken.tsx
@@ -1,5 +1,5 @@
-import { Typography } from '@material-ui/core';
-import { useCommonStyles } from 'themes/commonStyles';
+import { Typography } from '@mui/material';
+import { useThemeStyles } from 'themes/themeStyles';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { UserToken } from './UserToken/UserToken';
 
@@ -14,7 +14,8 @@ export const ConfirmToken = ({
     closeConfirm,
     token,
 }: IConfirmUserLink) => {
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
+
     return (
         <Dialogue
             open={open}
@@ -22,7 +23,7 @@ export const ConfirmToken = ({
             primaryButtonText="Close"
             title="New token created"
         >
-            <div className={commonStyles.contentSpacingYLarge}>
+            <div className={themeStyles.contentSpacingYLarge}>
                 <Typography variant="body1">
                     Your new token has been created successfully.
                 </Typography>
diff --git a/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx b/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
index f434c27b97..530fdecf4b 100644
--- a/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
+++ b/frontend/src/component/admin/apiToken/ConfirmToken/UserToken/UserToken.tsx
@@ -1,5 +1,5 @@
-import { IconButton, Tooltip } from '@material-ui/core';
-import CopyIcon from '@material-ui/icons/FileCopy';
+import { IconButton, Tooltip } from '@mui/material';
+import CopyIcon from '@mui/icons-material/FileCopy';
 import copy from 'copy-to-clipboard';
 import useToast from 'hooks/useToast';
 
@@ -38,7 +38,7 @@ export const UserToken = ({ token }: IUserTokenProps) => {
         >
             {token}
             <Tooltip title="Copy token">
-                <IconButton onClick={copyToken}>
+                <IconButton onClick={copyToken} size="large">
                     <CopyIcon />
                 </IconButton>
             </Tooltip>
diff --git a/frontend/src/component/admin/auth/AuthSettings.tsx b/frontend/src/component/admin/auth/AuthSettings.tsx
index ed3fbf36e0..1391d42956 100644
--- a/frontend/src/component/admin/auth/AuthSettings.tsx
+++ b/frontend/src/component/admin/auth/AuthSettings.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import AdminMenu from '../menu/AdminMenu';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import PageContent from 'component/common/PageContent/PageContent';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
diff --git a/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx b/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx
index 94ca9fc9e6..bc89340ad6 100644
--- a/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx
+++ b/frontend/src/component/admin/auth/AutoCreateForm/AutoCreateForm.tsx
@@ -8,7 +8,8 @@ import {
     Select,
     Switch,
     TextField,
-} from '@material-ui/core';
+    SelectChangeEvent,
+} from '@mui/material';
 
 interface IAutoCreateFormProps {
     data?: {
@@ -28,10 +29,8 @@ export const AutoCreateForm = ({
         setValue('autoCreate', !data.autoCreate);
     };
 
-    const updateDefaultRootRole = (
-        evt: ChangeEvent<{ name?: string; value: unknown }>
-    ) => {
-        setValue('defaultRootRole', evt.target.value as string);
+    const updateDefaultRootRole = (evt: SelectChangeEvent) => {
+        setValue('defaultRootRole', evt.target.value);
     };
 
     const updateField = (e: ChangeEvent<HTMLInputElement>) => {
@@ -40,7 +39,7 @@ export const AutoCreateForm = ({
 
     return (
         <Fragment>
-            <Grid container spacing={3}>
+            <Grid container spacing={3} mb={2}>
                 <Grid item md={5}>
                     <strong>Auto-create users</strong>
                     <p>
@@ -61,7 +60,7 @@ export const AutoCreateForm = ({
                     />
                 </Grid>
             </Grid>
-            <Grid container spacing={3}>
+            <Grid container spacing={3} mb={2}>
                 <Grid item md={5}>
                     <strong>Default Root Role</strong>
                     <p>
@@ -75,6 +74,7 @@ export const AutoCreateForm = ({
                             Default Role
                         </InputLabel>
                         <Select
+                            label="Default Role"
                             labelId="defaultRootRole-label"
                             id="defaultRootRole"
                             name="defaultRootRole"
@@ -90,7 +90,7 @@ export const AutoCreateForm = ({
                     </FormControl>
                 </Grid>
             </Grid>
-            <Grid container spacing={3}>
+            <Grid container spacing={3} mb={2}>
                 <Grid item md={5}>
                     <strong>Email domains</strong>
                     <p>
diff --git a/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx b/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx
index 7492e2c1f1..8d7d98b9bd 100644
--- a/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx
+++ b/frontend/src/component/admin/auth/GoogleAuth/GoogleAuth.tsx
@@ -5,8 +5,8 @@ import {
     Grid,
     Switch,
     TextField,
-} from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+} from '@mui/material';
+import { Alert } from '@mui/material';
 import PageContent from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
@@ -93,7 +93,7 @@ export const GoogleAuth = () => {
                 </Grid>
             </Grid>
             <form onSubmit={onSubmit}>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item xs={5}>
                         <strong>Enable</strong>
                         <p>
@@ -115,7 +115,7 @@ export const GoogleAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item xs={5}>
                         <strong>Client ID</strong>
                         <p>
@@ -137,7 +137,7 @@ export const GoogleAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Client Secret</strong>
                         <p>
@@ -159,7 +159,7 @@ export const GoogleAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Unleash hostname</strong>
                         <p>
@@ -186,7 +186,7 @@ export const GoogleAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Auto-create users</strong>
                         <p>
@@ -202,7 +202,7 @@ export const GoogleAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Email domains</strong>
                         <p>
diff --git a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
index 7212fc5bd6..056cfc5776 100644
--- a/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
+++ b/frontend/src/component/admin/auth/OidcAuth/OidcAuth.tsx
@@ -5,8 +5,8 @@ import {
     Grid,
     Switch,
     TextField,
-} from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+} from '@mui/material';
+import { Alert } from '@mui/material';
 import PageContent from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
@@ -105,7 +105,7 @@ export const OidcAuth = () => {
                 </Grid>
             </Grid>
             <form onSubmit={onSubmit}>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Enable</strong>
                         <p>Enable Open Id Connect Authentication.</p>
@@ -124,7 +124,7 @@ export const OidcAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Discover URL</strong>
                         <p>(Required) Issuer discover metadata URL</p>
@@ -142,7 +142,7 @@ export const OidcAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Client ID</strong>
                         <p>(Required) Client ID of your OpenID application</p>
@@ -161,7 +161,7 @@ export const OidcAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={4}>
                     <Grid item md={5}>
                         <strong>Client secret</strong>
                         <p>
@@ -183,7 +183,7 @@ export const OidcAuth = () => {
                     </Grid>
                 </Grid>
                 <h3>Optional Configuration</h3>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Enable Single Sign-Out</strong>
                         <p>
@@ -210,7 +210,7 @@ export const OidcAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>ACR Values</strong>
                         <p>
diff --git a/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx b/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx
index f655ca2e76..f2897e7de2 100644
--- a/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx
+++ b/frontend/src/component/admin/auth/PasswordAuth/PasswordAuth.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useEffect, useState } from 'react';
-import { Button, FormControlLabel, Grid, Switch } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import { Button, FormControlLabel, Grid, Switch } from '@mui/material';
+import { Alert } from '@mui/material';
 import PageContent from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
@@ -59,7 +59,7 @@ export const PasswordAuth = () => {
     return (
         <PageContent headerContent="">
             <form onSubmit={onSubmit}>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Password based login</strong>
                         <p>Allow users to login with username & password</p>
diff --git a/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx b/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
index dc3b2f2605..e424543f7b 100644
--- a/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
+++ b/frontend/src/component/admin/auth/SamlAuth/SamlAuth.tsx
@@ -5,8 +5,8 @@ import {
     Grid,
     Switch,
     TextField,
-} from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+} from '@mui/material';
+import { Alert } from '@mui/material';
 import PageContent from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
@@ -102,7 +102,7 @@ export const SamlAuth = () => {
             </Grid>
             <form onSubmit={onSubmit}>
                 <Grid container spacing={3}>
-                    <Grid item md={5}>
+                    <Grid item md={5} mb={2}>
                         <strong>Enable</strong>
                         <p>Enable SAML 2.0 Authentication.</p>
                     </Grid>
@@ -120,7 +120,7 @@ export const SamlAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Entity ID</strong>
                         <p>(Required) The Entity Identity provider issuer.</p>
@@ -139,7 +139,7 @@ export const SamlAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Single Sign-On URL</strong>
                         <p>
@@ -161,7 +161,7 @@ export const SamlAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={4}>
                     <Grid item md={5}>
                         <strong>X.509 Certificate</strong>
                         <p>
@@ -185,7 +185,7 @@ export const SamlAuth = () => {
                             }}
                             multiline
                             rows={14}
-                            rowsMax={14}
+                            maxRows={14}
                             variant="outlined"
                             size="small"
                             required
@@ -193,7 +193,7 @@ export const SamlAuth = () => {
                     </Grid>
                 </Grid>
                 <h3>Optional Configuration</h3>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Single Sign-out URL</strong>
                         <p>
@@ -214,7 +214,7 @@ export const SamlAuth = () => {
                         />
                     </Grid>
                 </Grid>
-                <Grid container spacing={3}>
+                <Grid container spacing={3} mb={2}>
                     <Grid item md={5}>
                         <strong>Service Provider X.509 Certificate</strong>
                         <p>
@@ -240,7 +240,7 @@ export const SamlAuth = () => {
                             }}
                             multiline
                             rows={14}
-                            rowsMax={14}
+                            maxRows={14}
                             variant="outlined"
                             size="small"
                         />
diff --git a/frontend/src/component/admin/invoice/InvoiceAdminPage.tsx b/frontend/src/component/admin/invoice/InvoiceAdminPage.tsx
index f7b2f17859..f9197c0df6 100644
--- a/frontend/src/component/admin/invoice/InvoiceAdminPage.tsx
+++ b/frontend/src/component/admin/invoice/InvoiceAdminPage.tsx
@@ -3,7 +3,7 @@ import InvoiceList from './InvoiceList';
 import AccessContext from 'contexts/AccessContext';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 
 const InvoiceAdminPage = () => {
     const { hasAccess } = useContext(AccessContext);
diff --git a/frontend/src/component/admin/invoice/InvoiceList.tsx b/frontend/src/component/admin/invoice/InvoiceList.tsx
index a6c6030c51..8b63c0341a 100644
--- a/frontend/src/component/admin/invoice/InvoiceList.tsx
+++ b/frontend/src/component/admin/invoice/InvoiceList.tsx
@@ -6,8 +6,8 @@ import {
     TableRow,
     TableCell,
     Button,
-} from '@material-ui/core';
-import OpenInNew from '@material-ui/icons/OpenInNew';
+} from '@mui/material';
+import OpenInNew from '@mui/icons-material/OpenInNew';
 import PageContent from 'component/common/PageContent';
 import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
diff --git a/frontend/src/component/admin/menu/AdminMenu.tsx b/frontend/src/component/admin/menu/AdminMenu.tsx
index 8f1614209b..b23999a9c2 100644
--- a/frontend/src/component/admin/menu/AdminMenu.tsx
+++ b/frontend/src/component/admin/menu/AdminMenu.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { NavLink, useLocation } from 'react-router-dom';
-import { Paper, Tab, Tabs } from '@material-ui/core';
+import { Paper, Tab, Tabs } from '@mui/material';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 
 const navLinkStyle = {
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.styles.ts b/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.styles.ts
index ccc0efa8a2..679d4b9d46 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.styles.ts
+++ b/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     environmentPermissionContainer: {
         marginBottom: '1.25rem',
     },
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx b/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx
index 9a497a3d78..95f715952b 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoleForm/EnvironmentPermissionAccordion/EnvironmentPermissionAccordion.tsx
@@ -4,8 +4,8 @@ import {
     AccordionSummary,
     Checkbox,
     FormControlLabel,
-} from '@material-ui/core';
-import { ExpandMore } from '@material-ui/icons';
+} from '@mui/material';
+import { ExpandMore } from '@mui/icons-material';
 import { useEffect, useState } from 'react';
 import {
     IPermission,
@@ -34,7 +34,7 @@ const EnvironmentPermissionAccordion = ({
 }: IEnvironmentPermissionAccordionProps) => {
     const [permissionMap, setPermissionMap] = useState<PermissionMap>({});
     const [permissionCount, setPermissionCount] = useState(0);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     useEffect(() => {
         const permissionMap = environment?.permissions?.reduce(
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.styles.ts b/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.styles.ts
index e6420e5a47..55eca794a7 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.styles.ts
+++ b/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '400px',
     },
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx b/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx
index 32bcc2f98e..c1244c38fa 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoleForm/ProjectRoleForm.tsx
@@ -1,11 +1,6 @@
 import Input from 'component/common/Input/Input';
 import EnvironmentPermissionAccordion from './EnvironmentPermissionAccordion/EnvironmentPermissionAccordion';
-import {
-    Button,
-    Checkbox,
-    FormControlLabel,
-    TextField,
-} from '@material-ui/core';
+import { Button, Checkbox, FormControlLabel, TextField } from '@mui/material';
 import useProjectRolePermissions from 'hooks/api/getters/useProjectRolePermissions/useProjectRolePermissions';
 
 import { useStyles } from './ProjectRoleForm.styles';
@@ -54,7 +49,7 @@ const ProjectRoleForm: React.FC<IProjectRoleForm> = ({
     clearErrors,
     getRoleKey,
 }: IProjectRoleForm) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { permissions } = useProjectRolePermissions({
         revalidateIfStale: false,
         revalidateOnReconnect: false,
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts
index 572dbc27f0..7937593eb6 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     deleteParagraph: {
         marginTop: '2rem',
     },
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx
index 802aa9be02..ed719e68f0 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleDeleteConfirm/ProjectRoleDeleteConfirm.tsx
@@ -1,4 +1,4 @@
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import React from 'react';
 import { IProjectRole } from 'interfaces/role';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
@@ -22,7 +22,7 @@ const ProjectRoleDeleteConfirm = ({
     confirmName,
     setConfirmName,
 }: IProjectRoleDeleteConfirmProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
         setConfirmName(e.currentTarget.value);
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx
index 0e6d411621..7960909abe 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleList.tsx
@@ -5,7 +5,7 @@ import {
     TableCell,
     TableHead,
     TableRow,
-} from '@material-ui/core';
+} from '@mui/material';
 import AccessContext from 'contexts/AccessContext';
 import usePagination from 'hooks/usePagination';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
@@ -24,7 +24,7 @@ const ROOTROLE = 'root';
 const ProjectRoleList = () => {
     const { hasAccess } = useContext(AccessContext);
     const { roles } = useProjectRoles();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const paginationFilter = (role: IRole) => role?.type !== ROOTROLE;
 
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.styles.ts b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.styles.ts
index 86fc731a35..c6afc58a38 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.styles.ts
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     tableRow: {
         '&:hover': {
             backgroundColor: theme.palette.grey[200],
@@ -16,17 +16,17 @@ export const useStyles = makeStyles(theme => ({
     description: {
         textAlign: 'left',
         maxWidth: '300px',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
     hideSM: {
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
     hideXS: {
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
     },
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
index 4f1f973b82..19454a743f 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoleList/ProjectRoleListItem/ProjectRoleListItem.tsx
@@ -1,8 +1,8 @@
 import { useStyles } from './ProjectRoleListItem.styles';
-import { TableCell, TableRow, Typography } from '@material-ui/core';
-import { Delete, Edit } from '@material-ui/icons';
+import { TableCell, TableRow, Typography } from '@mui/material';
+import { Delete, Edit } from '@mui/icons-material';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
-import SupervisedUserCircleIcon from '@material-ui/icons/SupervisedUserCircle';
+import SupervisedUserCircleIcon from '@mui/icons-material/SupervisedUserCircle';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { IProjectRole } from 'interfaces/role';
 import { useHistory } from 'react-router-dom';
@@ -28,7 +28,7 @@ const RoleListItem = ({
     setDelDialog,
 }: IRoleListItemProps) => {
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <>
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.styles.ts b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.styles.ts
index 7c4ce07f86..9086c8b07c 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.styles.ts
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     rolesListBody: {
         paddingBottom: '4rem',
         minHeight: '50vh',
diff --git a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx
index c41ba47f6b..90822b4f92 100644
--- a/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx
+++ b/frontend/src/component/admin/projectRoles/ProjectRoles/ProjectRoles.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import { useContext } from 'react';
 import { useHistory } from 'react-router-dom';
 import AccessContext from 'contexts/AccessContext';
@@ -13,7 +13,7 @@ import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
 
 const ProjectRoles = () => {
     const { hasAccess } = useContext(AccessContext);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const history = useHistory();
 
     return (
diff --git a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.styles.ts b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.styles.ts
index 9eb137338b..5245049494 100644
--- a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.styles.ts
+++ b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles({
+export const useStyles = makeStyles()({
     iconContainer: {
         width: '100%',
         textAlign: 'center',
diff --git a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.tsx b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.tsx
index 78571202f7..0bae5c0514 100644
--- a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.tsx
+++ b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserEmail/ConfirmUserEmail.tsx
@@ -1,4 +1,4 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 
 import { ReactComponent as EmailIcon } from 'assets/icons/email.svg';
@@ -16,7 +16,7 @@ const ConfirmUserEmail = ({
     closeConfirm,
     inviteLink,
 }: IConfirmUserEmailProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <Dialogue
             open={open}
diff --git a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx
index 3e8589ff8f..7471d056a9 100644
--- a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx
+++ b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/ConfirmUserLink.tsx
@@ -1,6 +1,6 @@
-import { Typography } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
-import { useCommonStyles } from 'themes/commonStyles';
+import { Typography } from '@mui/material';
+import { Alert } from '@mui/material';
+import { useThemeStyles } from 'themes/themeStyles';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import UserInviteLink from './UserInviteLink/UserInviteLink';
 
@@ -15,7 +15,7 @@ const ConfirmUserLink = ({
     closeConfirm,
     inviteLink,
 }: IConfirmUserLink) => {
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
     return (
         <Dialogue
             open={open}
@@ -23,7 +23,7 @@ const ConfirmUserLink = ({
             primaryButtonText="Close"
             title="Team member added"
         >
-            <div className={commonStyles.contentSpacingYLarge}>
+            <div className={themeStyles.contentSpacingYLarge}>
                 <Typography variant="body1">
                     A new team member has been added. Please provide them with
                     the following link to get started:
diff --git a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
index 81cd25f6fe..bc7a32ffd1 100644
--- a/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
+++ b/frontend/src/component/admin/users/ConfirmUserAdded/ConfirmUserLink/UserInviteLink/UserInviteLink.tsx
@@ -1,5 +1,5 @@
-import { IconButton, Tooltip } from '@material-ui/core';
-import CopyIcon from '@material-ui/icons/FileCopy';
+import { IconButton, Tooltip } from '@mui/material';
+import CopyIcon from '@mui/icons-material/FileCopy';
 import useToast from 'hooks/useToast';
 
 interface IInviteLinkProps {
@@ -48,7 +48,7 @@ const UserInviteLink = ({ inviteLink }: IInviteLinkProps) => {
         >
             {inviteLink}
             <Tooltip title="Copy link">
-                <IconButton onClick={handleCopy}>
+                <IconButton onClick={handleCopy} size="large">
                     <CopyIcon />
                 </IconButton>
             </Tooltip>
diff --git a/frontend/src/component/admin/users/UserAdmin.styles.ts b/frontend/src/component/admin/users/UserAdmin.styles.ts
index 9bc46de2d6..e6da4dca58 100644
--- a/frontend/src/component/admin/users/UserAdmin.styles.ts
+++ b/frontend/src/component/admin/users/UserAdmin.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(() => ({
+export const useStyles = makeStyles()(() => ({
     userListBody: {
         paddingBottom: '4rem',
         minHeight: '50vh',
diff --git a/frontend/src/component/admin/users/UserForm/UserForm.styles.ts b/frontend/src/component/admin/users/UserForm/UserForm.styles.ts
index 068ce842bd..2b4106a89d 100644
--- a/frontend/src/component/admin/users/UserForm/UserForm.styles.ts
+++ b/frontend/src/component/admin/users/UserForm/UserForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '400px',
     },
diff --git a/frontend/src/component/admin/users/UserForm/UserForm.tsx b/frontend/src/component/admin/users/UserForm/UserForm.tsx
index 9af8ca3c3a..b5bdf0b278 100644
--- a/frontend/src/component/admin/users/UserForm/UserForm.tsx
+++ b/frontend/src/component/admin/users/UserForm/UserForm.tsx
@@ -7,7 +7,7 @@ import {
     Typography,
     Radio,
     Switch,
-} from '@material-ui/core';
+} from '@mui/material';
 import { useStyles } from './UserForm.styles';
 import React from 'react';
 import useUsers from 'hooks/api/getters/useUsers/useUsers';
@@ -47,7 +47,7 @@ const UserForm: React.FC<IUserForm> = ({
     clearErrors,
     mode,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { roles } = useUsers();
     const { bootstrap } = useUiBootstrap();
 
diff --git a/frontend/src/component/admin/users/UsersAdmin.tsx b/frontend/src/component/admin/users/UsersAdmin.tsx
index 1e0a15e4e4..acef1e87bd 100644
--- a/frontend/src/component/admin/users/UsersAdmin.tsx
+++ b/frontend/src/component/admin/users/UsersAdmin.tsx
@@ -5,9 +5,9 @@ import PageContent from 'component/common/PageContent/PageContent';
 import AccessContext from 'contexts/AccessContext';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import { Button } from '@mui/material';
 import { TableActions } from 'component/common/Table/TableActions/TableActions';
 import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
-import { Button } from '@material-ui/core';
 import { useStyles } from './UserAdmin.styles';
 import { useHistory } from 'react-router-dom';
 import { AdminAlert } from 'component/common/AdminAlert/AdminAlert';
@@ -16,7 +16,7 @@ const UsersAdmin = () => {
     const [search, setSearch] = useState('');
     const { hasAccess } = useContext(AccessContext);
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div>
diff --git a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
index c3fce6bcf5..70ef6f1ec2 100644
--- a/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
+++ b/frontend/src/component/admin/users/UsersList/ChangePassword/ChangePassword.tsx
@@ -1,14 +1,14 @@
 import { useState } from 'react';
 import classnames from 'classnames';
-import { Avatar, TextField, Typography } from '@material-ui/core';
+import { Avatar, TextField, Typography } from '@mui/material';
 import { trim } from 'component/common/util';
 import { modalStyles } from 'component/admin/users/util';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import PasswordChecker from 'component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import PasswordMatcher from 'component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import { IUser } from 'interfaces/user';
 
 interface IChangePasswordProps {
@@ -27,7 +27,7 @@ const ChangePassword = ({
     const [data, setData] = useState({});
     const [error, setError] = useState<Record<string, string>>({});
     const [validPassword, setValidPassword] = useState(false);
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
 
     // @ts-expect-error
     const updateField = e => {
@@ -90,8 +90,8 @@ const ChangePassword = ({
             <form
                 onSubmit={submit}
                 className={classnames(
-                    commonStyles.contentSpacingY,
-                    commonStyles.flexColumn
+                    themeStyles.contentSpacingY,
+                    themeStyles.flexColumn
                 )}
             >
                 <ConditionallyRender
@@ -101,7 +101,7 @@ const ChangePassword = ({
                 <Typography variant="subtitle1">
                     Changing password for user
                 </Typography>
-                <div className={commonStyles.flexRow}>
+                <div className={themeStyles.flexRow}>
                     <Avatar
                         variant="rounded"
                         alt="Gravatar"
diff --git a/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx b/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx
index 407249f1f8..0b673c3e2c 100644
--- a/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx
+++ b/frontend/src/component/admin/users/UsersList/DeleteUser/DeleteUser.tsx
@@ -2,10 +2,10 @@ import React from 'react';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { REMOVE_USER_ERROR } from 'hooks/api/actions/useAdminUsersApi/useAdminUsersApi';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import useLoading from 'hooks/useLoading';
-import { Avatar, Typography } from '@material-ui/core';
-import { useCommonStyles } from 'themes/commonStyles';
+import { Avatar, Typography } from '@mui/material';
+import { useThemeStyles } from 'themes/themeStyles';
 import { IUser } from 'interfaces/user';
 
 interface IDeleteUserProps {
@@ -26,7 +26,7 @@ const DeleteUser = ({
     userApiErrors,
 }: IDeleteUserProps) => {
     const ref = useLoading(userLoading);
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
 
     return (
         <Dialogue
@@ -50,7 +50,7 @@ const DeleteUser = ({
                         </Alert>
                     }
                 />
-                <div data-loading className={commonStyles.flexRow}>
+                <div data-loading className={themeStyles.flexRow}>
                     <Avatar
                         variant="rounded"
                         alt="Gravatar"
diff --git a/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.styles.ts b/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.styles.ts
index 77951d1be3..8ee4138972 100644
--- a/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.styles.ts
+++ b/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.styles.ts
@@ -1,18 +1,19 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
+import { unleashGrey } from 'themes/themeColors';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     tableRow: {
         '& > td': {
             padding: '4px 16px',
-            borderColor: theme.v2.palette.grey[30],
+            borderColor: unleashGrey[300],
         },
         '&:hover': {
-            backgroundColor: theme.v2.palette.grey[10],
+            backgroundColor: unleashGrey[100],
         },
     },
     tableCellHeader: {
         '& > th': {
-            backgroundColor: theme.v2.palette.grey[20],
+            backgroundColor: unleashGrey[200],
             fontWeight: 'normal',
             border: 0,
             '&:first-child': {
@@ -42,24 +43,24 @@ export const useStyles = makeStyles(theme => ({
         margin: 'auto',
     },
     firstColumnSM: {
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             borderTopLeftRadius: '8px',
             borderBottomLeftRadius: '8px',
         },
     },
     firstColumnXS: {
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             borderTopLeftRadius: '8px',
             borderBottomLeftRadius: '8px',
         },
     },
     hideSM: {
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
     hideXS: {
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
     },
diff --git a/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx b/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
index bfae6664e2..be1b03e3d1 100644
--- a/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
+++ b/frontend/src/component/admin/users/UsersList/UserListItem/UserListItem.tsx
@@ -5,9 +5,9 @@ import {
     TableRow,
     Tooltip,
     Typography,
-} from '@material-ui/core';
+} from '@mui/material';
 import classnames from 'classnames';
-import { Delete, Edit, Lock } from '@material-ui/icons';
+import { Delete, Edit, Lock } from '@mui/icons-material';
 import { SyntheticEvent, useContext } from 'react';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -38,7 +38,7 @@ const UserListItem = ({
 }: IUserListItemProps) => {
     const { hasAccess } = useContext(AccessContext);
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <TableRow key={user.id} className={styles.tableRow}>
@@ -90,6 +90,7 @@ const UserListItem = ({
                                 onClick={() =>
                                     history.push(`/admin/users/${user.id}/edit`)
                                 }
+                                size="large"
                             >
                                 <Edit />
                             </IconButton>
@@ -98,6 +99,7 @@ const UserListItem = ({
                             <IconButton
                                 data-loading
                                 onClick={openPwDialog(user)}
+                                size="large"
                             >
                                 <Lock />
                             </IconButton>
@@ -106,6 +108,7 @@ const UserListItem = ({
                             <IconButton
                                 data-loading
                                 onClick={openDelDialog(user)}
+                                size="large"
                             >
                                 <Delete />
                             </IconButton>
diff --git a/frontend/src/component/admin/users/UsersList/UsersList.tsx b/frontend/src/component/admin/users/UsersList/UsersList.tsx
index 794dcf5450..df3fddec97 100644
--- a/frontend/src/component/admin/users/UsersList/UsersList.tsx
+++ b/frontend/src/component/admin/users/UsersList/UsersList.tsx
@@ -6,7 +6,7 @@ import {
     TableCell,
     TableHead,
     TableRow,
-} from '@material-ui/core';
+} from '@mui/material';
 import classnames from 'classnames';
 import ChangePassword from './ChangePassword/ChangePassword';
 import DeleteUser from './DeleteUser/DeleteUser';
@@ -36,7 +36,7 @@ interface IUsersListProps {
 }
 
 const UsersList = ({ search }: IUsersListProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { users, roles, refetch, loading } = useUsers();
     const { setToastData, setToastApiError } = useToast();
     const {
diff --git a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.test.jsx b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.test.jsx
index 8cb0be696c..b49217eabb 100644
--- a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.test.jsx
+++ b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.test.jsx
@@ -1,17 +1,16 @@
-import { ThemeProvider } from '@material-ui/core';
 import { ApplicationEdit } from './ApplicationEdit';
 import renderer from 'react-test-renderer';
 import { MemoryRouter } from 'react-router-dom';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
-import theme from 'themes/mainTheme';
-import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
 import UIProvider from 'component/providers/UIProvider/UIProvider';
+import { ThemeProvider } from 'themes/ThemeProvider';
+import { AccessProviderMock } from 'component/providers/AccessProvider/AccessProviderMock';
 
 test('renders correctly if no application', () => {
     const tree = renderer
         .create(
-            <AccessProvider permissions={[{ permission: ADMIN }]}>
-                <ThemeProvider theme={theme}>
+            <AccessProviderMock permissions={[{ permission: ADMIN }]}>
+                <ThemeProvider>
                     <UIProvider>
                         <MemoryRouter initialEntries={['/test']}>
                             <ApplicationEdit
@@ -23,7 +22,7 @@ test('renders correctly if no application', () => {
                         </MemoryRouter>
                     </UIProvider>
                 </ThemeProvider>
-            </AccessProvider>
+            </AccessProviderMock>
         )
         .toJSON();
 
@@ -34,9 +33,11 @@ test('renders correctly without permission', () => {
     const tree = renderer
         .create(
             <MemoryRouter>
-                <ThemeProvider theme={theme}>
+                <ThemeProvider>
                     <UIProvider>
-                        <AccessProvider permissions={[{ permission: ADMIN }]}>
+                        <AccessProviderMock
+                            permissions={[{ permission: ADMIN }]}
+                        >
                             <ApplicationEdit
                                 fetchApplication={() => Promise.resolve({})}
                                 storeApplicationMetaData={jest.fn()}
@@ -82,7 +83,7 @@ test('renders correctly without permission', () => {
                                 }}
                                 locationSettings={{ locale: 'en-GB' }}
                             />
-                        </AccessProvider>
+                        </AccessProviderMock>
                     </UIProvider>
                 </ThemeProvider>
             </MemoryRouter>
@@ -96,9 +97,11 @@ test('renders correctly with permissions', () => {
     const tree = renderer
         .create(
             <MemoryRouter>
-                <ThemeProvider theme={theme}>
+                <ThemeProvider>
                     <UIProvider>
-                        <AccessProvider permissions={[{ permission: ADMIN }]}>
+                        <AccessProviderMock
+                            permissions={[{ permission: ADMIN }]}
+                        >
                             <ApplicationEdit
                                 fetchApplication={() => Promise.resolve({})}
                                 storeApplicationMetaData={jest.fn()}
@@ -144,7 +147,7 @@ test('renders correctly with permissions', () => {
                                 }}
                                 locationSettings={{ locale: 'en-GB' }}
                             />
-                        </AccessProvider>
+                        </AccessProviderMock>
                     </UIProvider>
                 </ThemeProvider>
             </MemoryRouter>
diff --git a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
index 53af486e7f..8600eb1f23 100644
--- a/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
+++ b/frontend/src/component/application/ApplicationEdit/ApplicationEdit.tsx
@@ -7,8 +7,8 @@ import {
     LinearProgress,
     Link,
     Typography,
-} from '@material-ui/core';
-import { Link as LinkIcon } from '@material-ui/icons';
+} from '@mui/material';
+import { Link as LinkIcon } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { UPDATE_APPLICATION } from 'component/providers/AccessProvider/permissions';
 import { ApplicationView } from '../ApplicationView/ApplicationView';
@@ -112,7 +112,11 @@ export const ApplicationEdit = () => {
                             <ConditionallyRender
                                 condition={Boolean(url)}
                                 show={
-                                    <IconButton component={Link} href={url}>
+                                    <IconButton
+                                        component={Link}
+                                        href={url}
+                                        size="large"
+                                    >
                                         <LinkIcon titleAccess={url} />
                                     </IconButton>
                                 }
diff --git a/frontend/src/component/application/ApplicationEdit/__snapshots__/ApplicationEdit.test.jsx.snap b/frontend/src/component/application/ApplicationEdit/__snapshots__/ApplicationEdit.test.jsx.snap
index 55a4015dff..185ad56475 100644
--- a/frontend/src/component/application/ApplicationEdit/__snapshots__/ApplicationEdit.test.jsx.snap
+++ b/frontend/src/component/application/ApplicationEdit/__snapshots__/ApplicationEdit.test.jsx.snap
@@ -5,19 +5,19 @@ exports[`renders correctly if no application 1`] = `
   <p>
     Loading...
   </p>
-  <div
-    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate"
+  <span
+    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate mui-130qhmc-MuiLinearProgress-root"
     role="progressbar"
   >
-    <div
-      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate"
+    <span
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate mui-yt7v2r-MuiLinearProgress-bar1"
       style={Object {}}
     />
-    <div
-      className="MuiLinearProgress-bar MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary"
+    <span
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate mui-1wjhhwq-MuiLinearProgress-bar2"
       style={Object {}}
     />
-  </div>
+  </span>
 </div>
 `;
 
@@ -26,19 +26,19 @@ exports[`renders correctly with permissions 1`] = `
   <p>
     Loading...
   </p>
-  <div
-    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate"
+  <span
+    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate mui-130qhmc-MuiLinearProgress-root"
     role="progressbar"
   >
-    <div
-      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate"
+    <span
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate mui-yt7v2r-MuiLinearProgress-bar1"
       style={Object {}}
     />
-    <div
-      className="MuiLinearProgress-bar MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary"
+    <span
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate mui-1wjhhwq-MuiLinearProgress-bar2"
       style={Object {}}
     />
-  </div>
+  </span>
 </div>
 `;
 
@@ -47,18 +47,18 @@ exports[`renders correctly without permission 1`] = `
   <p>
     Loading...
   </p>
-  <div
-    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate"
+  <span
+    className="MuiLinearProgress-root MuiLinearProgress-colorPrimary MuiLinearProgress-indeterminate mui-130qhmc-MuiLinearProgress-root"
     role="progressbar"
   >
-    <div
-      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate"
+    <span
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar1Indeterminate mui-yt7v2r-MuiLinearProgress-bar1"
       style={Object {}}
     />
-    <div
-      className="MuiLinearProgress-bar MuiLinearProgress-bar2Indeterminate MuiLinearProgress-barColorPrimary"
+    <span
+      className="MuiLinearProgress-bar MuiLinearProgress-barColorPrimary MuiLinearProgress-bar2Indeterminate mui-1wjhhwq-MuiLinearProgress-bar2"
       style={Object {}}
     />
-  </div>
+  </span>
 </div>
 `;
diff --git a/frontend/src/component/application/ApplicationList/ApplicationList.tsx b/frontend/src/component/application/ApplicationList/ApplicationList.tsx
index b8aaa2468d..6bd2ccfad4 100644
--- a/frontend/src/component/application/ApplicationList/ApplicationList.tsx
+++ b/frontend/src/component/application/ApplicationList/ApplicationList.tsx
@@ -1,7 +1,7 @@
 import { useMemo, useState } from 'react';
-import { CircularProgress } from '@material-ui/core';
-import { Warning } from '@material-ui/icons';
-import { AppsLinkList, styles as commonStyles } from 'component/common';
+import { CircularProgress } from '@mui/material';
+import { Warning } from '@mui/icons-material';
+import { AppsLinkList, styles as themeStyles } from 'component/common';
 import { SearchField } from 'component/common/SearchField/SearchField';
 import PageContent from 'component/common/PageContent/PageContent';
 import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
@@ -44,11 +44,11 @@ export const ApplicationList = () => {
 
     return (
         <>
-            <div className={commonStyles.searchField}>
+            <div className={themeStyles.searchField}>
                 <SearchField initialValue={filter} updateValue={setFilter} />
             </div>
             <PageContent headerContent={<HeaderTitle title="Applications" />}>
-                <div className={commonStyles.fullwidth}>
+                <div className={themeStyles.fullwidth}>
                     <ConditionallyRender
                         condition={filteredApplications.length > 0}
                         show={<AppsLinkList apps={filteredApplications} />}
diff --git a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx
index a62cfd61c9..da4793dbc9 100644
--- a/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx
+++ b/frontend/src/component/application/ApplicationUpdate/ApplicationUpdate.tsx
@@ -1,6 +1,6 @@
 import { ChangeEvent, useState } from 'react';
-import { Grid, TextField } from '@material-ui/core';
-import { useCommonStyles } from 'themes/commonStyles';
+import { Grid, TextField } from '@mui/material';
+import { useThemeStyles } from 'themes/themeStyles';
 import icons from 'component/application/iconNames';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import useApplicationsApi from 'hooks/api/actions/useApplicationsApi/useApplicationsApi';
@@ -20,7 +20,7 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => {
     const [localUrl, setLocalUrl] = useState(url || '');
     const [localDescription, setLocalDescription] = useState(description || '');
     const { setToastData, setToastApiError } = useToast();
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
 
     const onChange = async (
         field: string,
@@ -43,7 +43,7 @@ export const ApplicationUpdate = ({ application }: IApplicationUpdateProps) => {
 
     return (
         <Grid container style={{ marginTop: '1rem' }}>
-            <Grid item sm={12} xs={12} className={commonStyles.contentSpacingY}>
+            <Grid item sm={12} xs={12} className={themeStyles.contentSpacingY}>
                 <Grid item>
                     <GeneralSelect
                         name="iconSelect"
diff --git a/frontend/src/component/application/ApplicationView/ApplicationView.tsx b/frontend/src/component/application/ApplicationView/ApplicationView.tsx
index 58cf144998..44a709d340 100644
--- a/frontend/src/component/application/ApplicationView/ApplicationView.tsx
+++ b/frontend/src/component/application/ApplicationView/ApplicationView.tsx
@@ -7,14 +7,14 @@ import {
     ListItemAvatar,
     ListItemText,
     Typography,
-} from '@material-ui/core';
+} from '@mui/material';
 import {
     Extension,
     FlagRounded,
     Report,
     SvgIconComponent,
     Timeline,
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 import {
     CREATE_FEATURE,
     CREATE_STRATEGY,
diff --git a/frontend/src/component/common/AdminAlert/AdminAlert.tsx b/frontend/src/component/common/AdminAlert/AdminAlert.tsx
index 3352482cc7..71a5b84253 100644
--- a/frontend/src/component/common/AdminAlert/AdminAlert.tsx
+++ b/frontend/src/component/common/AdminAlert/AdminAlert.tsx
@@ -1,4 +1,4 @@
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 
 export const AdminAlert = () => {
     return (
diff --git a/frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.styles.ts b/frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.styles.ts
index e1faef2878..e25e85834c 100644
--- a/frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.styles.ts
+++ b/frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles({
+export const useStyles = makeStyles()({
     container: {
         clip: 'rect(0 0 0 0)',
         clipPath: 'inset(50%)',
diff --git a/frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.tsx b/frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.tsx
index 2c2dbe4440..b58321b075 100644
--- a/frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.tsx
+++ b/frontend/src/component/common/Announcer/AnnouncerElement/AnnouncerElement.tsx
@@ -9,7 +9,7 @@ interface IAnnouncerElementProps {
 export const AnnouncerElement = ({
     announcement,
 }: IAnnouncerElementProps): ReactElement => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div
diff --git a/frontend/src/component/common/ApiError/ApiError.tsx b/frontend/src/component/common/ApiError/ApiError.tsx
index 3d5ae22d00..379b0172d6 100644
--- a/frontend/src/component/common/ApiError/ApiError.tsx
+++ b/frontend/src/component/common/ApiError/ApiError.tsx
@@ -1,5 +1,5 @@
-import { Button } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import { Button } from '@mui/material';
+import { Alert } from '@mui/material';
 import React from 'react';
 
 interface IApiErrorProps {
diff --git a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts
index 235b26f8eb..ae6946169d 100644
--- a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts
+++ b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         alignItems: 'center',
@@ -8,14 +8,14 @@ export const useStyles = makeStyles(theme => ({
     },
     icon: {
         background: theme.palette.primary.main,
-        height: 56,
+        height: 40,
         display: 'flex',
         alignItems: 'center',
-        width: 56,
+        width: 40,
         justifyContent: 'center',
         paddingLeft: 6,
-        borderTopLeftRadius: 50,
-        borderBottomLeftRadius: 50,
+        borderTopLeftRadius: 40,
+        borderBottomLeftRadius: 40,
         color: '#fff',
     },
     iconDisabled: {
@@ -30,8 +30,11 @@ export const useStyles = makeStyles(theme => ({
         borderTopRightRadius: 50,
         borderBottomRightRadius: 50,
         '& fieldset': {
-            borderColor: theme.palette,
+            borderColor: theme.palette.grey[300],
             borderLeftColor: 'transparent',
         },
+        '&.Mui-focused .MuiOutlinedInput-notchedOutline': {
+            borderWidth: 1,
+        },
     },
 }));
diff --git a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
index 2e629c5d5a..e43e4123a4 100644
--- a/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
+++ b/frontend/src/component/common/AutocompleteBox/AutocompleteBox.tsx
@@ -1,7 +1,8 @@
 import { useStyles } from 'component/common/AutocompleteBox/AutocompleteBox.styles';
-import { Search, ArrowDropDown } from '@material-ui/icons';
-import { Autocomplete, AutocompleteRenderInputParams } from '@material-ui/lab';
-import { TextField } from '@material-ui/core';
+import { Search, ArrowDropDown } from '@mui/icons-material';
+import { Autocomplete } from '@mui/material';
+import { AutocompleteRenderInputParams } from '@mui/material/Autocomplete';
+import { TextField } from '@mui/material';
 import classNames from 'classnames';
 
 interface IAutocompleteBoxProps {
@@ -24,7 +25,7 @@ export const AutocompleteBox = ({
     onChange,
     disabled,
 }: IAutocompleteBoxProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const renderInput = (params: AutocompleteRenderInputParams) => {
         return <TextField {...params} variant="outlined" label={label} />;
@@ -51,6 +52,7 @@ export const AutocompleteBox = ({
                 renderInput={renderInput}
                 getOptionLabel={value => value.label}
                 disabled={disabled}
+                size="small"
                 multiple
             />
         </div>
diff --git a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.styles.ts b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.styles.ts
index e85e409925..9706b056fd 100644
--- a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.styles.ts
+++ b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     breadcrumbNav: {
         position: 'absolute',
         top: '4px',
diff --git a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
index e1c3214d4b..1df9e5d554 100644
--- a/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
+++ b/frontend/src/component/common/BreadcrumbNav/BreadcrumbNav.tsx
@@ -1,4 +1,4 @@
-import Breadcrumbs from '@material-ui/core/Breadcrumbs';
+import Breadcrumbs from '@mui/material/Breadcrumbs';
 import { Link, useLocation } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useStyles } from './BreadcrumbNav.styles';
@@ -8,7 +8,7 @@ import StringTruncator from '../StringTruncator/StringTruncator';
 
 const BreadcrumbNav = () => {
     const { isAdmin } = useContext(AccessContext);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const location = useLocation();
 
     const paths = location.pathname
diff --git a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts
index 252d7e4482..325565cb38 100644
--- a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts
+++ b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     badge: {
         backgroundColor: theme.palette.primary.main,
         width: '75px',
@@ -9,7 +9,7 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         justifyContent: 'center',
         alignItems: 'center',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             width: '50px',
             height: '50px',
         },
diff --git a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx
index 7b8673d84d..deb6c7dc1d 100644
--- a/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx
+++ b/frontend/src/component/common/CheckmarkBadge/CheckMarkBadge.tsx
@@ -1,4 +1,4 @@
-import { Check, Close } from '@material-ui/icons';
+import { Check, Close } from '@mui/icons-material';
 import { useStyles } from './CheckMarkBadge.styles';
 import classnames from 'classnames';
 
@@ -8,7 +8,7 @@ interface ICheckMarkBadgeProps {
 }
 
 const CheckMarkBadge = ({ type, className }: ICheckMarkBadgeProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <div className={classnames(styles.badge, className)}>
             {type === 'error' ? (
diff --git a/frontend/src/component/common/Codebox/Codebox.styles.ts b/frontend/src/component/common/Codebox/Codebox.styles.ts
index 2fff263419..2f782c674d 100644
--- a/frontend/src/component/common/Codebox/Codebox.styles.ts
+++ b/frontend/src/component/common/Codebox/Codebox.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         backgroundColor: theme.palette.primary.main,
         padding: '1rem',
diff --git a/frontend/src/component/common/Codebox/Codebox.tsx b/frontend/src/component/common/Codebox/Codebox.tsx
index 4b68916b01..76257cfb0e 100644
--- a/frontend/src/component/common/Codebox/Codebox.tsx
+++ b/frontend/src/component/common/Codebox/Codebox.tsx
@@ -5,7 +5,7 @@ interface ICodeboxProps {
 }
 
 const Codebox = ({ text }: ICodeboxProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div className={styles.container}>
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
index 1beb9b449c..a175c69052 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordion.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     constraintIconContainer: {
         backgroundColor: theme.palette.primary.main,
         height: '28px',
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx
index 9217289c35..0f7051ae2f 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEdit.tsx
@@ -4,11 +4,7 @@ import { IConstraint } from 'interfaces/strategy';
 import { useStyles } from '../ConstraintAccordion.styles';
 import { ConstraintAccordionEditBody } from './ConstraintAccordionEditBody/ConstraintAccordionEditBody';
 import { ConstraintAccordionEditHeader } from './ConstraintAccordionEditHeader/ConstraintAccordionEditHeader';
-import {
-    Accordion,
-    AccordionDetails,
-    AccordionSummary,
-} from '@material-ui/core';
+import { Accordion, AccordionDetails, AccordionSummary } from '@mui/material';
 import { cleanConstraint } from 'utils/cleanConstraint';
 import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
@@ -64,7 +60,7 @@ export const ConstraintAccordionEdit = ({
     const { validateConstraint } = useFeatureApi();
     const [expanded, setExpanded] = useState(false);
     const [action, setAction] = useState('');
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     useEffect(() => {
         // Setting expanded to true on mount will cause the accordion
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/CaseInsensitive/CaseInsensitive.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/CaseInsensitive/CaseInsensitive.tsx
index b575597532..f0c2a71711 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/CaseInsensitive/CaseInsensitive.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/CaseInsensitive/CaseInsensitive.tsx
@@ -1,4 +1,4 @@
-import { FormControlLabel, Switch } from '@material-ui/core';
+import { FormControlLabel, Switch } from '@mui/material';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
 
 interface ICaseInsensitiveProps {
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts
index cf35d67e20..017450106d 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     inputContainer: {
         padding: '1rem',
     },
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx
index 93c9ecc0b6..b2a3a5a197 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintAccordionEditBody.tsx
@@ -1,4 +1,4 @@
-import { Button, FormControlLabel, Switch } from '@material-ui/core';
+import { Button, FormControlLabel, Switch } from '@mui/material';
 import { IConstraint } from 'interfaces/strategy';
 import { CANCEL } from '../ConstraintAccordionEdit';
 
@@ -31,7 +31,7 @@ export const ConstraintAccordionEditBody: React.FC<
     setAction,
     onSubmit,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <>
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx
index d6c5b8f10c..be2ab9b64c 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/ConstraintFormHeader/ConstraintFormHeader.tsx
@@ -1,7 +1,7 @@
-import { makeStyles } from '@material-ui/core';
+import { makeStyles } from 'tss-react/mui';
 import React from 'react';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
     header: {
         fontSize: theme.fontSizes.bodySize,
         fontWeight: 'normal',
@@ -13,7 +13,7 @@ const useStyles = makeStyles(theme => ({
 export const ConstraintFormHeader: React.FC<
     React.HTMLAttributes<HTMLDivElement>
 > = ({ children, ...rest }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <h3 {...rest} className={styles.header}>
             {children}
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx
index 1ebf6cfa0b..4b1098dd94 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/FreeTextInput/FreeTextInput.tsx
@@ -1,4 +1,5 @@
-import { Button, Chip, makeStyles } from '@material-ui/core';
+import { Button, Chip } from '@mui/material';
+import { makeStyles } from 'tss-react/mui';
 import Input from 'component/common/Input/Input';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import React, { useState } from 'react';
@@ -13,7 +14,7 @@ interface IFreeTextInputProps {
     setError: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
     valueChip: {
         margin: '0 0.5rem 0.5rem 0',
     },
@@ -58,7 +59,7 @@ export const FreeTextInput = ({
     setError,
 }: IFreeTextInputProps) => {
     const [inputValues, setInputValues] = useState('');
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const onKeyPress = (event: React.KeyboardEvent<HTMLInputElement>) => {
         if (event.key === ENTER) {
@@ -137,7 +138,7 @@ const ConstraintValueChips = ({
     values,
     removeValue,
 }: IConstraintValueChipsProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <>
             {values.map((value, index) => {
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
index 4aec2ffb92..890e09c7b2 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'inline-block',
         wordBreak: 'break-word',
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
index 258ea59394..0c637119a8 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/LegalValueLabel/LegalValueLabel.tsx
@@ -1,7 +1,7 @@
 import { ILegalValue } from 'interfaces/context';
 import { useStyles } from './LegalValueLabel.styles';
 import React from 'react';
-import { FormControlLabel } from '@material-ui/core';
+import { FormControlLabel } from '@mui/material';
 
 interface ILegalValueTextProps {
     legal: ILegalValue;
@@ -9,7 +9,7 @@ interface ILegalValueTextProps {
 }
 
 export const LegalValueLabel = ({ legal, control }: ILegalValueTextProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div className={styles.container}>
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
index ab13d4abe0..f269a3c171 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/RestrictiveLegalValues/RestrictiveLegalValues.tsx
@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Checkbox } from '@material-ui/core';
-import { useCommonStyles } from 'themes/commonStyles';
+import { Checkbox } from '@mui/material';
+import { useThemeStyles } from 'themes/themeStyles';
 import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
 import { ILegalValue } from 'interfaces/context';
@@ -44,7 +44,7 @@ export const RestrictiveLegalValues = ({
 
     // Lazily initialise the values because there might be a lot of them.
     const [valuesMap, setValuesMap] = useState(() => createValuesMap(values));
-    const styles = useCommonStyles();
+    const { classes: styles } = useThemeStyles();
 
     useEffect(() => {
         setValuesMap(createValuesMap(values));
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
index 52d53e47ba..158cd221af 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleLegalValue/SingleLegalValue.tsx
@@ -1,9 +1,9 @@
 import React, { useState } from 'react';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
-import { FormControl, RadioGroup, Radio } from '@material-ui/core';
+import { FormControl, RadioGroup, Radio } from '@mui/material';
 import { ConstraintValueSearch } from 'component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { ILegalValue } from 'interfaces/context';
 import {
     LegalValueLabel,
@@ -28,7 +28,7 @@ export const SingleLegalValue = ({
     setError,
 }: ISingleLegalValueProps) => {
     const [filter, setFilter] = useState('');
-    const styles = useCommonStyles();
+    const { classes: styles } = useThemeStyles();
     const filteredValues = filterLegalValues(legalValues, filter);
 
     return (
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleValue/SingleValue.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleValue/SingleValue.tsx
index 1878f040ff..38573b7dd5 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleValue/SingleValue.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditBody/SingleValue/SingleValue.tsx
@@ -1,5 +1,5 @@
 import Input from 'component/common/Input/Input';
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 import { ConstraintFormHeader } from '../ConstraintFormHeader/ConstraintFormHeader';
 
 interface ISingleValueProps {
@@ -10,7 +10,7 @@ interface ISingleValueProps {
     setError: React.Dispatch<React.SetStateAction<string>>;
 }
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
     singleValueContainer: { maxWidth: '300px', marginTop: '-1rem' },
     singleValueInput: {
         width: '100%',
@@ -25,7 +25,7 @@ export const SingleValue = ({
     error,
     setError,
 }: ISingleValueProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <>
             <ConstraintFormHeader>
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
index 81b5eaca4e..3ba8b83911 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionEdit/ConstraintAccordionEditHeader/ConstraintAccordionEditHeader.tsx
@@ -4,7 +4,7 @@ import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccord
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
-import { Help } from '@material-ui/icons';
+import { Help } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { dateOperators, DATE_AFTER, IN } from 'constants/operators';
 import { SAVE } from '../ConstraintAccordionEdit';
@@ -17,7 +17,7 @@ import {
     operatorsForContext,
     CURRENT_TIME_CONTEXT_FIELD,
 } from 'utils/operatorsForContext';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 
 interface IConstraintAccordionViewHeader {
     localConstraint: IConstraint;
@@ -36,7 +36,7 @@ export const ConstraintAccordionEditHeader = ({
     setOperator,
     action,
 }: IConstraintAccordionViewHeader) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { context } = useUnleashContext();
     const { contextName, operator } = localConstraint;
 
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts
index 4793cb0452..a881661a9c 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'grid',
         gap: '1rem',
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
index a2a5f61045..2f33d8563b 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList.tsx
@@ -7,8 +7,8 @@ import { useWeakMap } from 'hooks/useWeakMap';
 import { objectId } from 'utils/objectId';
 import { useStyles } from './ConstraintAccordionList.styles';
 import { createEmptyConstraint } from 'component/common/ConstraintAccordion/ConstraintAccordionList/createEmptyConstraint';
-import { Button } from '@material-ui/core';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { Button } from '@mui/material';
 
 interface IConstraintAccordionListProps {
     constraints: IConstraint[];
@@ -37,7 +37,7 @@ export const ConstraintAccordionList = forwardRef<
 >(({ constraints, setConstraints, showCreateButton }, ref) => {
     const state = useWeakMap<IConstraint, IConstraintAccordionListItemState>();
     const { context } = useUnleashContext();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const addConstraint =
         setConstraints &&
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
index 996ba6cc12..a56da12348 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionView.tsx
@@ -1,9 +1,5 @@
-import {
-    Accordion,
-    AccordionSummary,
-    AccordionDetails,
-} from '@material-ui/core';
-import { ExpandMore } from '@material-ui/icons';
+import { Accordion, AccordionSummary, AccordionDetails } from '@mui/material';
+import { ExpandMore } from '@mui/icons-material';
 import { IConstraint } from 'interfaces/strategy';
 
 import { ConstraintAccordionViewBody } from './ConstraintAccordionViewBody/ConstraintAccordionViewBody';
@@ -29,7 +25,7 @@ export const ConstraintAccordionView = ({
     onEdit,
     onDelete,
 }: IConstraintAccordionViewProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const singleValue = oneOf(
         [...semVerOperators, ...numOperators, ...dateOperators],
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
index df0d960f2d..edc99c06a4 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewBody/ConstraintAccordionViewBody.tsx
@@ -1,5 +1,5 @@
-import { Chip } from '@material-ui/core';
-import { ImportExportOutlined, TextFormatOutlined } from '@material-ui/icons';
+import { Chip } from '@mui/material';
+import { ImportExportOutlined, TextFormatOutlined } from '@mui/icons-material';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { useState } from 'react';
 import { stringOperators } from 'constants/operators';
@@ -18,7 +18,7 @@ interface IConstraintAccordionViewBodyProps {
 export const ConstraintAccordionViewBody = ({
     constraint,
 }: IConstraintAccordionViewBodyProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { locationSettings } = useLocationSettings();
 
     return (
@@ -63,7 +63,7 @@ interface ISingleValueProps {
 }
 
 const SingleValue = ({ value, operator }: ISingleValueProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     if (!value) return null;
 
     return (
@@ -89,7 +89,7 @@ interface IMultipleValuesProps {
 
 const MultipleValues = ({ values }: IMultipleValuesProps) => {
     const [filter, setFilter] = useState('');
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     if (!values || values.length === 0) return null;
 
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
index 53c4f6080e..1a9e481282 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintAccordionView/ConstraintAccordionViewHeader/ConstraintAccordionViewHeader.tsx
@@ -1,7 +1,7 @@
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
-import { Chip, useMediaQuery, IconButton } from '@material-ui/core';
+import { Chip, useMediaQuery, IconButton } from '@mui/material';
 import { ConstraintIcon } from 'component/common/ConstraintAccordion/ConstraintIcon';
-import { Delete, Edit } from '@material-ui/icons';
+import { Delete, Edit } from '@mui/icons-material';
 import { IConstraint } from 'interfaces/strategy';
 
 import { useStyles } from 'component/common/ConstraintAccordion/ConstraintAccordion.styles';
@@ -26,7 +26,7 @@ export const ConstraintAccordionViewHeader = ({
     onDelete,
     singleValue,
 }: IConstraintAccordionViewHeaderProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { locationSettings } = useLocationSettings();
     const smallScreen = useMediaQuery(`(max-width:${790}px)`);
 
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx
index a558a047eb..08d0db19f8 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintIcon.tsx
@@ -1,8 +1,8 @@
 import { useStyles } from './ConstraintAccordion.styles';
-import { TrackChanges } from '@material-ui/icons';
+import { TrackChanges } from '@mui/icons-material';
 
 export const ConstraintIcon = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div className={styles.constraintIconContainer}>
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts
index 80b60a30ec..6adcf28e4b 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.styles.ts
@@ -1,9 +1,9 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         padding: '0.5rem 0.75rem',
-        borderRadius: theme.borders.radius.main,
+        borderRadius: theme.borderRadius.main,
         backgroundColor: theme.palette.grey[200],
         lineHeight: 1.25,
     },
@@ -21,7 +21,7 @@ export const useStyles = makeStyles(theme => ({
         '& > span': {
             display: 'inline-block',
             padding: '0 0.25rem',
-            borderRadius: theme.borders.radius.main,
+            borderRadius: theme.borderRadius.main,
             fontSize: theme.fontSizes.smallerBody,
             backgroundColor: theme.palette.primary.light,
             color: 'white',
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
index d76030518e..9cd3a5cf61 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperator/ConstraintOperator.tsx
@@ -9,7 +9,7 @@ interface IConstraintOperatorProps {
 export const ConstraintOperator = ({
     constraint,
 }: IConstraintOperatorProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const operatorName = constraint.operator;
     const operatorText = formatOperatorDescription(constraint.operator);
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts
index 4de9fb2a64..8a1eff392f 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles.ts
@@ -1,9 +1,9 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     valueContainer: {
         lineHeight: 1.1,
-        marginTop: -5,
+        marginTop: -2,
         marginBottom: -10,
     },
     optionContainer: {
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx
index 9c38f2d8f5..e1a8b0c092 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.tsx
@@ -1,4 +1,10 @@
-import { Select, MenuItem, FormControl, InputLabel } from '@material-ui/core';
+import {
+    Select,
+    MenuItem,
+    FormControl,
+    InputLabel,
+    SelectChangeEvent,
+} from '@mui/material';
 import {
     Operator,
     stringOperators,
@@ -7,7 +13,7 @@ import {
     numOperators,
     inOperators,
 } from 'constants/operators';
-import React, { useState, ChangeEvent } from 'react';
+import React, { useState } from 'react';
 import { formatOperatorDescription } from 'component/common/ConstraintAccordion/ConstraintOperator/formatOperatorDescription';
 import { useStyles } from 'component/common/ConstraintAccordion/ConstraintOperatorSelect/ConstraintOperatorSelect.styles';
 import classNames from 'classnames';
@@ -23,12 +29,10 @@ export const ConstraintOperatorSelect = ({
     value,
     onChange,
 }: IConstraintOperatorSelectProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [open, setOpen] = useState(false);
 
-    const onSelectChange = (
-        event: ChangeEvent<{ name?: string; value: unknown }>
-    ) => {
+    const onSelectChange = (event: SelectChangeEvent) => {
         onChange(event.target.value as Operator);
     };
 
diff --git a/frontend/src/component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx b/frontend/src/component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx
index d9a8e671ca..22f153cb6a 100644
--- a/frontend/src/component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx
+++ b/frontend/src/component/common/ConstraintAccordion/ConstraintValueSearch/ConstraintValueSearch.tsx
@@ -1,5 +1,5 @@
-import { TextField, InputAdornment, Chip } from '@material-ui/core';
-import { Search } from '@material-ui/icons';
+import { TextField, InputAdornment, Chip } from '@mui/material';
+import { Search } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 interface IConstraintValueSearchProps {
diff --git a/frontend/src/component/common/Dialogue/Dialogue.styles.ts b/frontend/src/component/common/Dialogue/Dialogue.styles.ts
index 4a6376afd4..7bd66152b0 100644
--- a/frontend/src/component/common/Dialogue/Dialogue.styles.ts
+++ b/frontend/src/component/common/Dialogue/Dialogue.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     dialogTitle: {
         backgroundColor: theme.palette.primary.main,
         color: '#fff',
diff --git a/frontend/src/component/common/Dialogue/Dialogue.tsx b/frontend/src/component/common/Dialogue/Dialogue.tsx
index b9e5391410..1b681061e5 100644
--- a/frontend/src/component/common/Dialogue/Dialogue.tsx
+++ b/frontend/src/component/common/Dialogue/Dialogue.tsx
@@ -5,7 +5,7 @@ import {
     DialogActions,
     DialogContent,
     DialogTitle,
-} from '@material-ui/core';
+} from '@mui/material';
 
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useStyles } from './Dialogue.styles';
@@ -40,7 +40,7 @@ export const Dialogue: React.FC<IDialogue> = ({
     formId,
     permissionButton,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const handleClick = formId
         ? (e: React.SyntheticEvent) => {
               e.preventDefault();
diff --git a/frontend/src/component/common/DisabledIndicator/DisabledIndicator.styles.ts b/frontend/src/component/common/DisabledIndicator/DisabledIndicator.styles.ts
index 844b84e620..60919949c4 100644
--- a/frontend/src/component/common/DisabledIndicator/DisabledIndicator.styles.ts
+++ b/frontend/src/component/common/DisabledIndicator/DisabledIndicator.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     indicator: {
         padding: '0.2rem',
         borderRadius: '5px',
diff --git a/frontend/src/component/common/DisabledIndicator/DisabledIndicator.tsx b/frontend/src/component/common/DisabledIndicator/DisabledIndicator.tsx
index 1de3b301bd..3064c3cd3c 100644
--- a/frontend/src/component/common/DisabledIndicator/DisabledIndicator.tsx
+++ b/frontend/src/component/common/DisabledIndicator/DisabledIndicator.tsx
@@ -5,7 +5,7 @@ interface IDisabledIndicator {
 }
 
 const DisabledIndicator = ({ className }: IDisabledIndicator) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <span className={classnames(styles.indicator, className)}>
             disabled
diff --git a/frontend/src/component/common/DividerText/DividerText.styles.ts b/frontend/src/component/common/DividerText/DividerText.styles.ts
index 23787a42fa..77a25bb664 100644
--- a/frontend/src/component/common/DividerText/DividerText.styles.ts
+++ b/frontend/src/component/common/DividerText/DividerText.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         alignItems: 'center',
@@ -10,9 +10,8 @@ export const useStyles = makeStyles(theme => ({
     wing: {
         width: '80px',
         height: '3px',
-        // @ts-expect-error
         backgroundColor: theme.palette.division.main,
-        borderRadius: theme.borders.radius.main,
+        borderRadius: theme.borderRadius.main,
     },
     text: {
         textAlign: 'center',
diff --git a/frontend/src/component/common/DividerText/DividerText.tsx b/frontend/src/component/common/DividerText/DividerText.tsx
index 5cc33aa885..13eda22945 100644
--- a/frontend/src/component/common/DividerText/DividerText.tsx
+++ b/frontend/src/component/common/DividerText/DividerText.tsx
@@ -1,4 +1,4 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import { useStyles } from 'component/common/DividerText/DividerText.styles';
 
 interface IDividerTextProps {
@@ -6,7 +6,7 @@ interface IDividerTextProps {
 }
 
 const DividerText = ({ text, ...rest }: IDividerTextProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div className={styles.container} {...rest}>
diff --git a/frontend/src/component/common/DropdownMenu/DropdownButton/DropdownButton.tsx b/frontend/src/component/common/DropdownMenu/DropdownButton/DropdownButton.tsx
index b9584df0f0..a492668899 100644
--- a/frontend/src/component/common/DropdownMenu/DropdownButton/DropdownButton.tsx
+++ b/frontend/src/component/common/DropdownMenu/DropdownButton/DropdownButton.tsx
@@ -1,5 +1,5 @@
 import { ReactNode, VFC } from 'react';
-import { Button, ButtonProps, Icon } from '@material-ui/core';
+import { Button, ButtonProps, Icon } from '@mui/material';
 
 interface IDropdownButtonProps {
     label: string;
diff --git a/frontend/src/component/common/DropdownMenu/DropdownMenu.tsx b/frontend/src/component/common/DropdownMenu/DropdownMenu.tsx
index c803f56994..d9fe383015 100644
--- a/frontend/src/component/common/DropdownMenu/DropdownMenu.tsx
+++ b/frontend/src/component/common/DropdownMenu/DropdownMenu.tsx
@@ -5,8 +5,8 @@ import {
     useState,
     VFC,
 } from 'react';
-import { Menu } from '@material-ui/core';
-import { ArrowDropDown } from '@material-ui/icons';
+import { Menu } from '@mui/material';
+import { ArrowDropDown } from '@mui/icons-material';
 import { DropdownButton } from './DropdownButton/DropdownButton';
 
 export interface IDropdownMenuProps {
diff --git a/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx b/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx
index a22a9c2cac..486e2b1ad6 100644
--- a/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx
+++ b/frontend/src/component/common/EnvironmentIcon/EnvironmentIcon.tsx
@@ -1,5 +1,5 @@
-import { useTheme } from '@material-ui/core/styles';
-import { Cloud } from '@material-ui/icons';
+import { useTheme } from '@mui/material/styles';
+import { Cloud } from '@mui/icons-material';
 
 interface IEnvironmentIcon {
     enabled: boolean;
diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts
index 5c846a051b..7de67a83af 100644
--- a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts
+++ b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     infoText: {
         marginBottom: '10px',
         fontSize: theme.fontSizes.bodySize,
diff --git a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx
index a0c02e2f93..63db51df8c 100644
--- a/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx
+++ b/frontend/src/component/common/EnvironmentStrategiesDialog/EnvironmentStrategyDialog.tsx
@@ -19,7 +19,7 @@ const EnvironmentStrategyDialog = ({
     projectId,
     onClose,
 }: IEnvironmentStrategyDialogProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const history = useHistory();
 
     const createStrategyPath = formatCreateStrategyPath(
diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts b/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts
index 8500120ddc..35b38457af 100644
--- a/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts
+++ b/frontend/src/component/common/FormTemplate/FormTemplate.styles.ts
@@ -1,8 +1,8 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
 export const formTemplateSidebarWidth = '27.5rem';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         minHeight: '80vh',
         width: '100%',
@@ -42,7 +42,8 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
-        fontWeight: 'normal',
+        fontWeight: theme.fontWeight.bold,
+        fontSize: theme.fontSizes.subHeader,
     },
     description: {
         color: '#fff',
diff --git a/frontend/src/component/common/FormTemplate/FormTemplate.tsx b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
index 0e8a3a0046..2e667dc6fe 100644
--- a/frontend/src/component/common/FormTemplate/FormTemplate.tsx
+++ b/frontend/src/component/common/FormTemplate/FormTemplate.tsx
@@ -1,13 +1,8 @@
 import { useStyles } from './FormTemplate.styles';
-import MenuBookIcon from '@material-ui/icons/MenuBook';
+import MenuBookIcon from '@mui/icons-material/MenuBook';
 import Codebox from '../Codebox/Codebox';
-import {
-    Collapse,
-    IconButton,
-    useMediaQuery,
-    Tooltip,
-} from '@material-ui/core';
-import { FileCopy, Info } from '@material-ui/icons';
+import { Collapse, IconButton, useMediaQuery, Tooltip } from '@mui/material';
+import { FileCopy, Info } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import Loader from '../Loader/Loader';
 import copy from 'copy-to-clipboard';
@@ -15,7 +10,7 @@ import useToast from 'hooks/useToast';
 import React, { useState } from 'react';
 import classNames from 'classnames';
 import { ReactComponent as MobileGuidanceBG } from 'assets/img/mobileGuidanceBg.svg';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 
 interface ICreateProps {
     title: string;
@@ -38,8 +33,8 @@ const FormTemplate: React.FC<ICreateProps> = ({
     formatApiCode,
 }) => {
     const { setToastData } = useToast();
-    const styles = useStyles();
-    const commonStyles = useCommonStyles();
+    const { classes: styles } = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
     const smallScreen = useMediaQuery(`(max-width:${1099}px)`);
 
     const copyCommand = () => {
@@ -69,7 +64,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
             <ConditionallyRender
                 condition={smallScreen}
                 show={
-                    <div className={commonStyles.relative}>
+                    <div className={themeStyles.relative}>
                         <MobileGuidance
                             description={description}
                             documentationLink={documentationLink}
@@ -101,7 +96,7 @@ const FormTemplate: React.FC<ICreateProps> = ({
                         <h2 className={styles.subtitle}>
                             API Command{' '}
                             <Tooltip title="Copy command">
-                                <IconButton onClick={copyCommand}>
+                                <IconButton onClick={copyCommand} size="large">
                                     <FileCopy className={styles.icon} />
                                 </IconButton>
                             </Tooltip>
@@ -126,7 +121,7 @@ const MobileGuidance = ({
     documentationLinkLabel,
 }: IMobileGuidance) => {
     const [open, setOpen] = useState(false);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <>
@@ -137,6 +132,7 @@ const MobileGuidance = ({
                 <IconButton
                     className={styles.mobileGuidanceButton}
                     onClick={() => setOpen(prev => !prev)}
+                    size="large"
                 >
                     <Info className={styles.infoIcon} />
                 </IconButton>
@@ -164,7 +160,7 @@ const Guidance: React.FC<IGuidanceProps> = ({
     documentationLink,
     documentationLinkLabel = 'Learn more',
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <aside className={styles.sidebar}>
diff --git a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx
index 41d691af36..90dca9cc59 100644
--- a/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx
+++ b/frontend/src/component/common/GeneralSelect/GeneralSelect.tsx
@@ -5,10 +5,10 @@ import {
     MenuItem,
     Select,
     SelectProps,
-} from '@material-ui/core';
+    SelectChangeEvent,
+} from '@mui/material';
 import { SELECT_ITEM_ID } from 'utils/testIds';
-import { KeyboardArrowDownOutlined } from '@material-ui/icons';
-import { SelectInputProps } from '@material-ui/core/Select/SelectInput';
+import { KeyboardArrowDownOutlined } from '@mui/icons-material';
 
 export interface ISelectOption {
     key: string;
@@ -55,7 +55,7 @@ const GeneralSelect: React.FC<IGeneralSelectProps> = ({
             </MenuItem>
         ));
 
-    const onSelectChange: SelectInputProps['onChange'] = event => {
+    const onSelectChange = (event: SelectChangeEvent) => {
         event.preventDefault();
         onChange(String(event.target.value));
     };
diff --git a/frontend/src/component/common/HeaderTitle/HeaderTitle.tsx b/frontend/src/component/common/HeaderTitle/HeaderTitle.tsx
index 878b12572f..e397bb395f 100644
--- a/frontend/src/component/common/HeaderTitle/HeaderTitle.tsx
+++ b/frontend/src/component/common/HeaderTitle/HeaderTitle.tsx
@@ -1,8 +1,7 @@
 import { ReactNode, VFC } from 'react';
 import classnames from 'classnames';
 
-import { Typography } from '@material-ui/core';
-import { Variant } from '@material-ui/core/styles/createTypography';
+import { Typography, TypographyProps } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 import { useStyles } from './styles';
@@ -12,7 +11,7 @@ interface IHeaderTitleProps {
     title: string;
     titleElement?: ReactNode;
     subtitle?: string;
-    variant?: 'inherit' | Variant;
+    variant?: TypographyProps['variant'];
     loading?: boolean;
     actions?: ReactNode;
     className?: string;
@@ -27,7 +26,7 @@ export const HeaderTitle: VFC<IHeaderTitleProps> = ({
     loading,
     className = '',
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const headerClasses = classnames({ skeleton: loading });
 
     usePageTitle(title);
diff --git a/frontend/src/component/common/HeaderTitle/styles.ts b/frontend/src/component/common/HeaderTitle/styles.ts
index dfa0a01ae8..9f692e1617 100644
--- a/frontend/src/component/common/HeaderTitle/styles.ts
+++ b/frontend/src/component/common/HeaderTitle/styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     headerTitleContainer: {
         display: 'flex',
         justifyContent: 'space-between',
diff --git a/frontend/src/component/common/HelpIcon/HelpIcon.styles.ts b/frontend/src/component/common/HelpIcon/HelpIcon.styles.ts
index d405802eee..a322a05907 100644
--- a/frontend/src/component/common/HelpIcon/HelpIcon.styles.ts
+++ b/frontend/src/component/common/HelpIcon/HelpIcon.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'inline-grid',
         alignItems: 'center',
diff --git a/frontend/src/component/common/HelpIcon/HelpIcon.tsx b/frontend/src/component/common/HelpIcon/HelpIcon.tsx
index 198bc710b5..a3da995f80 100644
--- a/frontend/src/component/common/HelpIcon/HelpIcon.tsx
+++ b/frontend/src/component/common/HelpIcon/HelpIcon.tsx
@@ -1,5 +1,5 @@
-import { Tooltip } from '@material-ui/core';
-import { Info } from '@material-ui/icons';
+import { Tooltip } from '@mui/material';
+import { Info } from '@mui/icons-material';
 import { useStyles } from 'component/common/HelpIcon/HelpIcon.styles';
 import React from 'react';
 
@@ -9,7 +9,7 @@ interface IHelpIconProps {
 }
 
 export const HelpIcon = ({ tooltip, style }: IHelpIconProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <Tooltip title={tooltip} arrow>
diff --git a/frontend/src/component/common/Input/Input.styles.ts b/frontend/src/component/common/Input/Input.styles.ts
index fcf9ce8131..12295699d6 100644
--- a/frontend/src/component/common/Input/Input.styles.ts
+++ b/frontend/src/component/common/Input/Input.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     helperText: {
         position: 'absolute',
         top: '35px',
diff --git a/frontend/src/component/common/Input/Input.tsx b/frontend/src/component/common/Input/Input.tsx
index df3165b980..59ccf9cfc2 100644
--- a/frontend/src/component/common/Input/Input.tsx
+++ b/frontend/src/component/common/Input/Input.tsx
@@ -1,9 +1,9 @@
-import { InputLabelProps, InputProps, TextField } from '@material-ui/core';
 import { INPUT_ERROR_TEXT } from 'utils/testIds';
 import { useStyles } from './Input.styles';
 import React from 'react';
+import { TextField, OutlinedTextFieldProps } from '@mui/material';
 
-interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
+interface IInputProps extends Omit<OutlinedTextFieldProps, 'variant'> {
     label: string;
     error?: boolean;
     errorText?: string;
@@ -15,8 +15,6 @@ interface IInputProps extends React.InputHTMLAttributes<HTMLInputElement> {
     onBlur?: (e: any) => any;
     multiline?: boolean;
     rows?: number;
-    InputProps?: Partial<InputProps>;
-    InputLabelProps?: Partial<InputLabelProps>;
 }
 
 const Input = ({
@@ -31,11 +29,10 @@ const Input = ({
     InputProps,
     ...rest
 }: IInputProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <div className={styles.inputContainer} data-loading>
             <TextField
-                // @ts-expect-error
                 size="small"
                 variant="outlined"
                 label={label}
@@ -47,7 +44,6 @@ const Input = ({
                 value={value}
                 onChange={onChange}
                 FormHelperTextProps={{
-                    // @ts-expect-error
                     ['data-testid']: INPUT_ERROR_TEXT,
                     classes: {
                         root: styles.helperText,
diff --git a/frontend/src/component/common/InputListField/InputListField.tsx b/frontend/src/component/common/InputListField/InputListField.tsx
index 44134ca574..4d4a95dce2 100644
--- a/frontend/src/component/common/InputListField/InputListField.tsx
+++ b/frontend/src/component/common/InputListField/InputListField.tsx
@@ -1,5 +1,5 @@
 import { VFC } from 'react';
-import { TextField, TextFieldProps } from '@material-ui/core';
+import { TextField, TextFieldProps } from '@mui/material';
 
 interface IInputListFieldProps {
     label: string;
diff --git a/frontend/src/component/common/ListPlaceholder/ListPlaceholder.styles.ts b/frontend/src/component/common/ListPlaceholder/ListPlaceholder.styles.ts
index 33509e8453..ab3feae978 100644
--- a/frontend/src/component/common/ListPlaceholder/ListPlaceholder.styles.ts
+++ b/frontend/src/component/common/ListPlaceholder/ListPlaceholder.styles.ts
@@ -1,9 +1,8 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     emptyStateListItem: {
-        // @ts-expect-error
-        border: `2px dashed ${theme.palette.borders.main}`,
+        border: `2px dashed ${theme.palette.grey[100]}`,
         padding: '0.8rem',
         textAlign: 'center',
         display: 'flex',
diff --git a/frontend/src/component/common/ListPlaceholder/ListPlaceholder.tsx b/frontend/src/component/common/ListPlaceholder/ListPlaceholder.tsx
index b2fdf3d181..4a8ab62063 100644
--- a/frontend/src/component/common/ListPlaceholder/ListPlaceholder.tsx
+++ b/frontend/src/component/common/ListPlaceholder/ListPlaceholder.tsx
@@ -1,4 +1,4 @@
-import { ListItem } from '@material-ui/core';
+import { ListItem } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useStyles } from 'component/common/ListPlaceholder/ListPlaceholder.styles';
@@ -10,7 +10,7 @@ interface IListPlaceholderProps {
 }
 
 const ListPlaceholder = ({ text, link, linkText }: IListPlaceholderProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <ListItem className={styles.emptyStateListItem}>
diff --git a/frontend/src/component/common/Loader/Loader.styles.ts b/frontend/src/component/common/Loader/Loader.styles.ts
index 7617ffdbee..9bec27db0c 100644
--- a/frontend/src/component/common/Loader/Loader.styles.ts
+++ b/frontend/src/component/common/Loader/Loader.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     loader: {
         display: 'flex',
         justifyContent: 'center',
diff --git a/frontend/src/component/common/Loader/Loader.tsx b/frontend/src/component/common/Loader/Loader.tsx
index 76d468dc1c..73a8bf2d17 100644
--- a/frontend/src/component/common/Loader/Loader.tsx
+++ b/frontend/src/component/common/Loader/Loader.tsx
@@ -3,7 +3,7 @@ import { formatAssetPath } from 'utils/formatPath';
 import { useStyles } from './Loader.styles';
 
 const Loader = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div className={styles.loader} role="alert" aria-label="Loading">
diff --git a/frontend/src/component/common/NoItems/NoItems.styles.ts b/frontend/src/component/common/NoItems/NoItems.styles.ts
index 1d94b04d05..bc041bf0cf 100644
--- a/frontend/src/component/common/NoItems/NoItems.styles.ts
+++ b/frontend/src/component/common/NoItems/NoItems.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         width: '80%',
diff --git a/frontend/src/component/common/NoItems/NoItems.tsx b/frontend/src/component/common/NoItems/NoItems.tsx
index e6fc1c858b..77d547e3b5 100644
--- a/frontend/src/component/common/NoItems/NoItems.tsx
+++ b/frontend/src/component/common/NoItems/NoItems.tsx
@@ -3,7 +3,7 @@ import { useStyles } from './NoItems.styles';
 import React from 'react';
 
 const NoItems: React.FC = ({ children }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <div className={styles.container}>
             <div className={styles.textContainer}>{children}</div>
diff --git a/frontend/src/component/common/NotFound/NotFound.styles.ts b/frontend/src/component/common/NotFound/NotFound.styles.ts
index 2ec0f93f69..d95a5eebd4 100644
--- a/frontend/src/component/common/NotFound/NotFound.styles.ts
+++ b/frontend/src/component/common/NotFound/NotFound.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles({
+export const useStyles = makeStyles()({
     container: {
         display: 'flex',
         justifyContent: 'center',
diff --git a/frontend/src/component/common/NotFound/NotFound.tsx b/frontend/src/component/common/NotFound/NotFound.tsx
index f37ef9550c..017812ddda 100644
--- a/frontend/src/component/common/NotFound/NotFound.tsx
+++ b/frontend/src/component/common/NotFound/NotFound.tsx
@@ -1,4 +1,4 @@
-import { Button, Typography } from '@material-ui/core';
+import { Button, Typography } from '@mui/material';
 import { useHistory } from 'react-router';
 
 import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg';
@@ -7,7 +7,7 @@ import { useStyles } from './NotFound.styles';
 
 const NotFound = () => {
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const onClickHome = () => {
         history.push('/');
diff --git a/frontend/src/component/common/OperatorUpgradeAlert/OperatorUpgradeAlert.tsx b/frontend/src/component/common/OperatorUpgradeAlert/OperatorUpgradeAlert.tsx
index 8be54f080b..2927f4a04a 100644
--- a/frontend/src/component/common/OperatorUpgradeAlert/OperatorUpgradeAlert.tsx
+++ b/frontend/src/component/common/OperatorUpgradeAlert/OperatorUpgradeAlert.tsx
@@ -1,4 +1,4 @@
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 
 export const OperatorUpgradeAlert = () => {
     return (
diff --git a/frontend/src/component/common/PageContent/PageContent.jsx b/frontend/src/component/common/PageContent/PageContent.jsx
index a4e46eac78..e6ec4e2635 100644
--- a/frontend/src/component/common/PageContent/PageContent.jsx
+++ b/frontend/src/component/common/PageContent/PageContent.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 
 import classnames from 'classnames';
 import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
-import { Paper } from '@material-ui/core';
+import { Paper } from '@mui/material';
 import { useStyles } from './styles';
 
 const PageContent = ({
@@ -14,7 +14,7 @@ const PageContent = ({
     bodyClass = '',
     ...rest
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const headerClasses = classnames(styles.headerContainer, {
         [styles.paddingDisabled]: disablePadding,
diff --git a/frontend/src/component/common/PageContent/styles.ts b/frontend/src/component/common/PageContent/styles.ts
index 402b62fd84..f416769226 100644
--- a/frontend/src/component/common/PageContent/styles.ts
+++ b/frontend/src/component/common/PageContent/styles.ts
@@ -1,16 +1,16 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     headerContainer: {
-        padding: theme.padding.pageContent.header,
-        borderBottom: theme.borders.default,
-        [theme.breakpoints.down('sm')]: {
+        padding: '1.8rem 2rem',
+        borderBottom: `1px solid ${theme.palette.grey[100]}`,
+        [theme.breakpoints.down('md')]: {
             padding: '1.5rem 1rem',
         },
     },
     bodyContainer: {
-        padding: theme.padding.pageContent.body,
-        [theme.breakpoints.down('sm')]: {
+        padding: '2rem',
+        [theme.breakpoints.down('md')]: {
             padding: '1rem',
         },
     },
diff --git a/frontend/src/component/common/PaginateUI/PaginateUI.tsx b/frontend/src/component/common/PaginateUI/PaginateUI.tsx
index 0d7eadb4a6..204006f2f5 100644
--- a/frontend/src/component/common/PaginateUI/PaginateUI.tsx
+++ b/frontend/src/component/common/PaginateUI/PaginateUI.tsx
@@ -3,11 +3,11 @@ import { ConditionallyRender } from 'component/common/ConditionallyRender/Condit
 import classnames from 'classnames';
 import { useStyles } from './PaginationUI.styles';
 
-import ArrowBackIosIcon from '@material-ui/icons/ArrowBackIos';
-import ArrowForwardIosIcon from '@material-ui/icons/ArrowForwardIos';
+import ArrowBackIosIcon from '@mui/icons-material/ArrowBackIos';
+import ArrowForwardIosIcon from '@mui/icons-material/ArrowForwardIos';
 
-import DoubleArrowIcon from '@material-ui/icons/DoubleArrow';
-import { useMediaQuery, useTheme } from '@material-ui/core';
+import DoubleArrowIcon from '@mui/icons-material/DoubleArrow';
+import { useMediaQuery, useTheme } from '@mui/material';
 
 interface IPaginateUIProps {
     pages: any[];
@@ -28,10 +28,10 @@ const PaginateUI = ({
 }: IPaginateUIProps) => {
     const STARTLIMIT = 6;
     const theme = useTheme();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [limit, setLimit] = useState(STARTLIMIT);
     const [start, setStart] = useState(0);
-    const matches = useMediaQuery(theme.breakpoints.down('sm'));
+    const matches = useMediaQuery(theme.breakpoints.down('md'));
 
     useEffect(() => {
         if (matches) {
diff --git a/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts b/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts
index 13360b5bd2..b37dcb7374 100644
--- a/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts
+++ b/frontend/src/component/common/PaginateUI/PaginationUI.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     pagination: {
         margin: '1rem 0 0 0',
         display: 'flex',
diff --git a/frontend/src/component/common/PasswordField/PasswordField.tsx b/frontend/src/component/common/PasswordField/PasswordField.tsx
index 8027829194..49b7df5a12 100644
--- a/frontend/src/component/common/PasswordField/PasswordField.tsx
+++ b/frontend/src/component/common/PasswordField/PasswordField.tsx
@@ -3,8 +3,8 @@ import {
     InputAdornment,
     TextField,
     TextFieldProps,
-} from '@material-ui/core';
-import { Visibility, VisibilityOff } from '@material-ui/icons';
+} from '@mui/material';
+import { Visibility, VisibilityOff } from '@mui/icons-material';
 import React, { useState, VFC } from 'react';
 
 const PasswordField: VFC<TextFieldProps> = ({ ...rest }) => {
@@ -37,6 +37,7 @@ const PasswordField: VFC<TextFieldProps> = ({ ...rest }) => {
                         <IconButton
                             onClick={handleClickShowPassword}
                             onMouseDown={handleMouseDownPassword}
+                            size="large"
                         >
                             <IconComponent titleAccess={iconTitle} />
                         </IconButton>
diff --git a/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx b/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
index d3e5af849c..7a204dd1d8 100644
--- a/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
+++ b/frontend/src/component/common/PercentageCircle/PercentageCircle.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from '@material-ui/core';
+import { useTheme } from '@mui/material';
 
 interface IPercentageCircleProps {
     styles?: object;
diff --git a/frontend/src/component/common/PermissionButton/PermissionButton.tsx b/frontend/src/component/common/PermissionButton/PermissionButton.tsx
index a544f0805b..7772d7a9c9 100644
--- a/frontend/src/component/common/PermissionButton/PermissionButton.tsx
+++ b/frontend/src/component/common/PermissionButton/PermissionButton.tsx
@@ -1,5 +1,5 @@
-import { Button, ButtonProps } from '@material-ui/core';
-import { Lock } from '@material-ui/icons';
+import { Button, ButtonProps } from '@mui/material';
+import { Lock } from '@mui/icons-material';
 import AccessContext from 'contexts/AccessContext';
 import React, { useContext } from 'react';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
diff --git a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
index 2a8a97246c..9c00e3ff73 100644
--- a/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
+++ b/frontend/src/component/common/PermissionIconButton/PermissionIconButton.tsx
@@ -1,4 +1,4 @@
-import { IconButton, IconButtonProps } from '@material-ui/core';
+import { IconButton, IconButtonProps } from '@mui/material';
 import React, { useContext, ReactNode } from 'react';
 import AccessContext from 'contexts/AccessContext';
 import { Link } from 'react-router-dom';
@@ -51,7 +51,12 @@ const PermissionIconButton = ({
     return (
         <TooltipResolver title={formatAccessText(access, tooltip)}>
             <span id={id}>
-                <IconButton {...rest} disabled={!access} aria-labelledby={id}>
+                <IconButton
+                    {...rest}
+                    disabled={!access}
+                    aria-labelledby={id}
+                    size="large"
+                >
                     {children}
                 </IconButton>
             </span>
diff --git a/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx b/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx
index d66ba04e18..3d99a7af94 100644
--- a/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx
+++ b/frontend/src/component/common/PermissionSwitch/PermissionSwitch.tsx
@@ -1,4 +1,4 @@
-import { Switch, SwitchProps } from '@material-ui/core';
+import { Switch, SwitchProps } from '@mui/material';
 import AccessContext from 'contexts/AccessContext';
 import React, { useContext } from 'react';
 import { formatAccessText } from 'utils/formatAccessText';
diff --git a/frontend/src/component/common/Proclamation/Proclamation.styles.ts b/frontend/src/component/common/Proclamation/Proclamation.styles.ts
index 5ecb76cdc1..3997888d0c 100644
--- a/frontend/src/component/common/Proclamation/Proclamation.styles.ts
+++ b/frontend/src/component/common/Proclamation/Proclamation.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles({
+export const useStyles = makeStyles()({
     proclamation: {
         marginBottom: '1rem',
     },
diff --git a/frontend/src/component/common/Proclamation/Proclamation.tsx b/frontend/src/component/common/Proclamation/Proclamation.tsx
index 911e7cd55d..df0fe67ee1 100644
--- a/frontend/src/component/common/Proclamation/Proclamation.tsx
+++ b/frontend/src/component/common/Proclamation/Proclamation.tsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import { useStyles } from './Proclamation.styles';
 import { IProclamationToast } from 'interfaces/uiConfig';
 
@@ -22,7 +22,7 @@ const renderProclamation = (id: string) => {
 
 const Proclamation = ({ toast }: IProclamationProps) => {
     const [show, setShow] = useState(false);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     useEffect(() => {
         setShow(renderProclamation(toast?.id || ''));
diff --git a/frontend/src/component/common/ProjectSelect/ProjectSelect.tsx b/frontend/src/component/common/ProjectSelect/ProjectSelect.tsx
index 642d1e2f32..9f8daeab7a 100644
--- a/frontend/src/component/common/ProjectSelect/ProjectSelect.tsx
+++ b/frontend/src/component/common/ProjectSelect/ProjectSelect.tsx
@@ -1,5 +1,5 @@
 import React, { MouseEventHandler, useMemo, VFC } from 'react';
-import { MenuItem, Typography } from '@material-ui/core';
+import { MenuItem, Typography } from '@mui/material';
 import DropdownMenu, { IDropdownMenuProps } from '../DropdownMenu/DropdownMenu';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import { IProjectCard } from 'interfaces/project';
diff --git a/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx b/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx
index 515f77eed2..128c60ddaf 100644
--- a/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx
+++ b/frontend/src/component/common/ResponsiveButton/ResponsiveButton.tsx
@@ -1,4 +1,4 @@
-import { useMediaQuery } from '@material-ui/core';
+import { useMediaQuery } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import PermissionButton from '../PermissionButton/PermissionButton';
 import PermissionIconButton from '../PermissionIconButton/PermissionIconButton';
diff --git a/frontend/src/component/common/RolloutIcon/RolloutIcon.styles.ts b/frontend/src/component/common/RolloutIcon/RolloutIcon.styles.ts
index d6798c6f98..7602632ea2 100644
--- a/frontend/src/component/common/RolloutIcon/RolloutIcon.styles.ts
+++ b/frontend/src/component/common/RolloutIcon/RolloutIcon.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         alignItems: 'center',
diff --git a/frontend/src/component/common/RolloutIcon/RolloutIcon.tsx b/frontend/src/component/common/RolloutIcon/RolloutIcon.tsx
index 3f117da9ba..90fa661fa4 100644
--- a/frontend/src/component/common/RolloutIcon/RolloutIcon.tsx
+++ b/frontend/src/component/common/RolloutIcon/RolloutIcon.tsx
@@ -1,5 +1,5 @@
-import FiberManualRecordIcon from '@material-ui/icons/FiberManualRecord';
-import Remove from '@material-ui/icons/Remove';
+import FiberManualRecordIcon from '@mui/icons-material/FiberManualRecord';
+import Remove from '@mui/icons-material/Remove';
 import { useStyles } from './RolloutIcon.styles';
 import classnames from 'classnames';
 
@@ -8,7 +8,7 @@ interface IRolloutIconProps {
 }
 
 const RolloutIcon = ({ className }: IRolloutIconProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <div className={styles.container}>
             <Remove
diff --git a/frontend/src/component/common/SearchField/SearchField.tsx b/frontend/src/component/common/SearchField/SearchField.tsx
index 2d78dfd5ef..5b99d99f77 100644
--- a/frontend/src/component/common/SearchField/SearchField.tsx
+++ b/frontend/src/component/common/SearchField/SearchField.tsx
@@ -1,8 +1,8 @@
 import React, { useState, VFC } from 'react';
 import classnames from 'classnames';
 import { debounce } from 'debounce';
-import { InputBase, Chip } from '@material-ui/core';
-import SearchIcon from '@material-ui/icons/Search';
+import { InputBase, Chip } from '@mui/material';
+import SearchIcon from '@mui/icons-material/Search';
 import { useStyles } from 'component/common/SearchField/styles';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
@@ -19,7 +19,7 @@ export const SearchField: VFC<ISearchFieldProps> = ({
     className = '',
     showValueChip,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [localValue, setLocalValue] = useState(initialValue);
     const debounceUpdateValue = debounce(updateValue, 500);
 
diff --git a/frontend/src/component/common/SearchField/styles.ts b/frontend/src/component/common/SearchField/styles.ts
index db5b95de03..b6c5b4590c 100644
--- a/frontend/src/component/common/SearchField/styles.ts
+++ b/frontend/src/component/common/SearchField/styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         alignItems: 'center',
@@ -10,12 +10,11 @@ export const useStyles = makeStyles(theme => ({
     search: {
         display: 'flex',
         alignItems: 'center',
-        // @ts-expect-error
         backgroundColor: theme.palette.searchField.main,
         borderRadius: '25px',
         padding: '0.25rem 0.5rem',
         maxWidth: '450px',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             width: '100%',
         },
     },
diff --git a/frontend/src/component/common/SidebarModal/SidebarModal.styles.ts b/frontend/src/component/common/SidebarModal/SidebarModal.styles.ts
index cc2a1fc4a0..fe484c11c4 100644
--- a/frontend/src/component/common/SidebarModal/SidebarModal.styles.ts
+++ b/frontend/src/component/common/SidebarModal/SidebarModal.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(() => ({
+export const useStyles = makeStyles()(() => ({
     modal: {
         position: 'absolute',
         top: 0,
diff --git a/frontend/src/component/common/SidebarModal/SidebarModal.tsx b/frontend/src/component/common/SidebarModal/SidebarModal.tsx
index 113fff69d3..8c27e629d4 100644
--- a/frontend/src/component/common/SidebarModal/SidebarModal.tsx
+++ b/frontend/src/component/common/SidebarModal/SidebarModal.tsx
@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
-import { Modal, Backdrop } from '@material-ui/core';
-import Fade from '@material-ui/core/Fade';
+import { Modal, Backdrop } from '@mui/material';
+import Fade from '@mui/material/Fade';
 import { useStyles } from 'component/common/SidebarModal/SidebarModal.styles';
 import { SIDEBAR_MODAL_ID } from 'utils/testIds';
 
@@ -19,7 +19,7 @@ export const SidebarModal = ({
     label,
     children,
 }: ISidebarModalProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <Modal
diff --git a/frontend/src/component/common/SkipNav/SkipNavLink.styles.ts b/frontend/src/component/common/SkipNav/SkipNavLink.styles.ts
index 41cb554534..38b1ab89d3 100644
--- a/frontend/src/component/common/SkipNav/SkipNavLink.styles.ts
+++ b/frontend/src/component/common/SkipNav/SkipNavLink.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     link: {
         position: 'fixed',
         overflow: 'hidden',
@@ -12,7 +12,7 @@ export const useStyles = makeStyles(theme => ({
         textDecoration: 'none',
         background: theme.palette.primary.dark,
         color: theme.palette.primary.contrastText,
-        borderRadius: theme.borders.radius.main,
+        borderRadius: theme.borderRadius.main,
         fontSize: theme.fontSizes.smallBody,
 
         [theme.breakpoints.down(960)]: {
diff --git a/frontend/src/component/common/SkipNav/SkipNavLink.tsx b/frontend/src/component/common/SkipNav/SkipNavLink.tsx
index 2c8df0c237..635dbbb352 100644
--- a/frontend/src/component/common/SkipNav/SkipNavLink.tsx
+++ b/frontend/src/component/common/SkipNav/SkipNavLink.tsx
@@ -2,7 +2,7 @@ import { SKIP_NAV_TARGET_ID } from 'component/common/SkipNav/SkipNavTarget';
 import { useStyles } from 'component/common/SkipNav/SkipNavLink.styles';
 
 export const SkipNavLink = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <a href={`#${SKIP_NAV_TARGET_ID}`} className={styles.link}>
diff --git a/frontend/src/component/common/StatusChip/StatusChip.styles.ts b/frontend/src/component/common/StatusChip/StatusChip.styles.ts
index 7131512843..d939efd67f 100644
--- a/frontend/src/component/common/StatusChip/StatusChip.styles.ts
+++ b/frontend/src/component/common/StatusChip/StatusChip.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     chip: {
         background: 'transparent',
         border: `1px solid ${theme.palette.primary.main}`,
diff --git a/frontend/src/component/common/StatusChip/StatusChip.tsx b/frontend/src/component/common/StatusChip/StatusChip.tsx
index 92379d8364..7e30c3f0ca 100644
--- a/frontend/src/component/common/StatusChip/StatusChip.tsx
+++ b/frontend/src/component/common/StatusChip/StatusChip.tsx
@@ -1,4 +1,4 @@
-import { Chip } from '@material-ui/core';
+import { Chip } from '@mui/material';
 import { useStyles } from './StatusChip.styles';
 
 interface IStatusChip {
@@ -7,7 +7,7 @@ interface IStatusChip {
 }
 
 const StatusChip = ({ stale, showActive = true }: IStatusChip) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     if (!stale && !showActive) {
         return null;
diff --git a/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx b/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx
index 6a44068fcd..1a56ea9be0 100644
--- a/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx
+++ b/frontend/src/component/common/StrategySeparator/StrategySeparator.tsx
@@ -1,4 +1,4 @@
-import { useTheme } from '@material-ui/core';
+import { useTheme } from '@mui/material';
 
 interface IStrategySeparatorProps {
     text: string;
diff --git a/frontend/src/component/common/StringTruncator/StringTruncator.tsx b/frontend/src/component/common/StringTruncator/StringTruncator.tsx
index 8125668d2c..a797c743ca 100644
--- a/frontend/src/component/common/StringTruncator/StringTruncator.tsx
+++ b/frontend/src/component/common/StringTruncator/StringTruncator.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 interface IStringTruncatorProps {
diff --git a/frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts b/frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts
index e828f60aca..a6b1213ebf 100644
--- a/frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts
+++ b/frontend/src/component/common/TabNav/TabNav/TabNav.styles.ts
@@ -1,8 +1,12 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     tabNav: {
-        // @ts-expect-error
         backgroundColor: theme.palette.tabs.main,
     },
+    tab: {
+        [theme.breakpoints.up('lg')]: {
+            minWidth: 160,
+        },
+    },
 }));
diff --git a/frontend/src/component/common/TabNav/TabNav/TabNav.tsx b/frontend/src/component/common/TabNav/TabNav/TabNav.tsx
index be3ce4e14c..e9854ee8a3 100644
--- a/frontend/src/component/common/TabNav/TabNav/TabNav.tsx
+++ b/frontend/src/component/common/TabNav/TabNav/TabNav.tsx
@@ -1,6 +1,6 @@
 import React, { useState, ReactNode } from 'react';
 import classnames from 'classnames';
-import { Tabs, Tab, Paper } from '@material-ui/core';
+import { Tabs, Tab, Paper } from '@mui/material';
 import { useStyles } from 'component/common/TabNav/TabNav/TabNav.styles';
 import { TabPanel } from 'component/common/TabNav/TabPanel/TabPanel';
 
@@ -22,7 +22,7 @@ export const TabNav = ({
     navClass = '',
     startingTab = 0,
 }: ITabNavProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [activeTab, setActiveTab] = useState(startingTab);
 
     const renderTabs = () =>
@@ -32,6 +32,7 @@ export const TabNav = ({
                 label={tab.label}
                 id={`tab-${index}`}
                 aria-controls={`tabpanel-${index}`}
+                className={styles.tab}
             />
         ));
 
diff --git a/frontend/src/component/common/Table/TableActions/TableActions.styles.ts b/frontend/src/component/common/Table/TableActions/TableActions.styles.ts
index 8909630bc6..3952cff0f8 100644
--- a/frontend/src/component/common/Table/TableActions/TableActions.styles.ts
+++ b/frontend/src/component/common/Table/TableActions/TableActions.styles.ts
@@ -1,6 +1,7 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
+import { unleashGrey } from 'themes/themeColors';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     fieldWidth: {
         width: '49px',
         '& .search-icon': {
@@ -52,7 +53,7 @@ export const useStyles = makeStyles(theme => ({
     },
     verticalSeparator: {
         height: '100%',
-        backgroundColor: theme.v2.palette.grey[50],
+        backgroundColor: unleashGrey[500],
         width: '1px',
         display: 'inline-block',
         marginLeft: '16px',
diff --git a/frontend/src/component/common/Table/TableActions/TableActions.tsx b/frontend/src/component/common/Table/TableActions/TableActions.tsx
index e59f2caa2a..05994fe36c 100644
--- a/frontend/src/component/common/Table/TableActions/TableActions.tsx
+++ b/frontend/src/component/common/Table/TableActions/TableActions.tsx
@@ -1,6 +1,6 @@
 import { useState } from 'react';
-import { IconButton, Tooltip } from '@material-ui/core';
-import { Search } from '@material-ui/icons';
+import { IconButton, Tooltip } from '@mui/material';
+import { Search } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import AnimateOnMount from 'component/common/AnimateOnMount/AnimateOnMount';
 import { TableSearchField } from 'component/common/Table/TableActions/TableSearchField/TableSearchField';
@@ -15,7 +15,7 @@ export const TableActions = ({ search, onSearch }: ITableActionsProps) => {
     const [searchExpanded, setSearchExpanded] = useState(false);
     const [animating, setAnimating] = useState(false);
 
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const onBlur = (clear = false) => {
         if (!search || clear) {
@@ -47,6 +47,7 @@ export const TableActions = ({ search, onSearch }: ITableActionsProps) => {
                         <IconButton
                             aria-label="Search users"
                             onClick={() => setSearchExpanded(true)}
+                            size="large"
                         >
                             <Search />
                         </IconButton>
diff --git a/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.styles.ts b/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.styles.ts
index 3d3274b1fb..55e39d23fe 100644
--- a/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.styles.ts
+++ b/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         alignItems: 'center',
@@ -15,12 +15,12 @@ export const useStyles = makeStyles(theme => ({
         borderRadius: '25px',
         padding: '3px 5px 3px 12px',
         maxWidth: '450px',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             width: '100%',
         },
         '&.search-container:focus-within': {
             borderColor: theme.palette.primary.light,
-            boxShadow: theme.v2.boxShadows.primary,
+            boxShadow: theme.boxShadows.main,
         },
     },
     searchIcon: {
diff --git a/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.tsx b/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.tsx
index b726dad709..3ad5ba308c 100644
--- a/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.tsx
+++ b/frontend/src/component/common/Table/TableActions/TableSearchField/TableSearchField.tsx
@@ -1,5 +1,5 @@
-import { IconButton, InputBase, Tooltip } from '@material-ui/core';
-import { Search, Close } from '@material-ui/icons';
+import { IconButton, InputBase, Tooltip } from '@mui/material';
+import { Search, Close } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useStyles } from 'component/common/Table/TableActions/TableSearchField/TableSearchField.styles';
 import classnames from 'classnames';
@@ -19,7 +19,7 @@ export const TableSearchField = ({
     placeholder,
     onBlur,
 }: ITableSearchFieldProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const placeholderText = placeholder ?? 'Search...';
 
     return (
diff --git a/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.styles.ts b/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.styles.ts
index c9ee0f1777..789bd48e69 100644
--- a/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.styles.ts
+++ b/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.styles.ts
@@ -1,21 +1,21 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
+import { unleashGrey } from 'themes/themeColors';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     tableCellHeaderSortable: {
         padding: 0,
         position: 'relative',
         cursor: 'pointer',
-        overflow: 'hidden',
         '& > svg': {
-            fontSize: theme.v2.fontSizes.headerIcon,
+            fontSize: 18,
             verticalAlign: 'middle',
-            color: theme.v2.palette.grey[70],
+            color: unleashGrey[700],
             marginLeft: '4px',
         },
         '&.sorted': {
             fontWeight: 'bold',
             '& > svg': {
-                color: theme.v2.palette.grey[90],
+                color: unleashGrey[900],
             },
         },
     },
@@ -29,14 +29,14 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         alignItems: 'center',
         '&:hover': {
-            backgroundColor: theme.v2.palette.grey[40],
+            backgroundColor: unleashGrey[400],
             '& > svg': {
-                color: theme.v2.palette.grey[90],
+                color: unleashGrey[900],
             },
         },
     },
     icon: {
         marginLeft: theme.spacing(0.5),
-        fontSize: theme.v2.fontSizes.headerIcon,
+        fontSize: 18,
     },
 }));
diff --git a/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.tsx b/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.tsx
index 33450ea2a1..8a9c7bb4ee 100644
--- a/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.tsx
+++ b/frontend/src/component/common/Table/TableCellSortable/TableCellSortable.tsx
@@ -1,11 +1,11 @@
 import React, { ReactNode, useContext } from 'react';
-import { TableCell } from '@material-ui/core';
+import { TableCell } from '@mui/material';
 import classnames from 'classnames';
 import {
     UnfoldMoreOutlined,
     KeyboardArrowDown,
     KeyboardArrowUp,
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 import { IUsersSort, UsersSortType } from 'hooks/useUsersSort';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useStyles } from 'component/common/Table/TableCellSortable/TableCellSortable.styles';
@@ -31,7 +31,7 @@ export const TableCellSortable = ({
     children,
 }: ITableCellSortableProps) => {
     const { setAnnouncement } = useContext(AnnouncerContext);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const ariaSort =
         sort.type === name
diff --git a/frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts b/frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts
index f4c8e620fe..8baa5480de 100644
--- a/frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts
+++ b/frontend/src/component/common/ToastRenderer/Toast/Toast.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '450px',
         background: '#fff',
@@ -49,7 +49,7 @@ export const useStyles = makeStyles(theme => ({
     buttonStyle: {
         position: 'absolute',
         top: '-33px',
-        right: '-29px',
+        right: '-33px',
     },
     '@keyframes drop': {
         '0%': {
diff --git a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
index fe328fdd49..2b7ab77fd0 100644
--- a/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
+++ b/frontend/src/component/common/ToastRenderer/Toast/Toast.tsx
@@ -1,17 +1,17 @@
 import { useStyles } from './Toast.styles';
 import classnames from 'classnames';
 import { useContext } from 'react';
-import { IconButton, Tooltip } from '@material-ui/core';
+import { IconButton, Tooltip } from '@mui/material';
 import CheckMarkBadge from 'component/common/CheckmarkBadge/CheckMarkBadge';
 import UIContext from 'contexts/UIContext';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import Close from '@material-ui/icons/Close';
+import Close from '@mui/icons-material/Close';
 import { IToast } from 'interfaces/toast';
 
 const Toast = ({ title, text, type, confetti }: IToast) => {
     const { setToast } = useContext(UIContext);
 
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const confettiColors = ['#d13447', '#ffbf00', '#263672'];
     const confettiAmount = 200;
 
@@ -78,9 +78,9 @@ const Toast = ({ title, text, type, confetti }: IToast) => {
                         </div>
                         <Tooltip title="Close">
                             <IconButton
-                                color="primary"
                                 onClick={hide}
                                 className={styles.buttonStyle}
+                                size="large"
                             >
                                 <Close />
                             </IconButton>
diff --git a/frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts b/frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts
index 74debb6b8c..6e3bf1e15f 100644
--- a/frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts
+++ b/frontend/src/component/common/ToastRenderer/ToastRenderer.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     toastWrapper: {
         right: 0,
         left: 0,
diff --git a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx
index 9ea73a9e1e..345ffc6b0f 100644
--- a/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx
+++ b/frontend/src/component/common/ToastRenderer/ToastRenderer.tsx
@@ -1,6 +1,6 @@
-import { Portal } from '@material-ui/core';
+import { Portal } from '@mui/material';
 import { useContext, useEffect } from 'react';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import UIContext from 'contexts/UIContext';
 import { useStyles } from './ToastRenderer.styles';
 import AnimateOnMount from '../AnimateOnMount/AnimateOnMount';
@@ -9,8 +9,8 @@ import { IToast } from 'interfaces/toast';
 
 const ToastRenderer = () => {
     const { toastData, setToast } = useContext(UIContext);
-    const commonStyles = useCommonStyles();
-    const styles = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
+    const { classes: styles } = useStyles();
 
     const hide = () => {
         setToast((prev: IToast) => ({ ...prev, show: false }));
@@ -32,9 +32,9 @@ const ToastRenderer = () => {
         <Portal>
             <AnimateOnMount
                 mounted={Boolean(toastData?.show)}
-                start={commonStyles.fadeInBottomStartWithoutFixed}
-                enter={commonStyles.fadeInBottomEnter}
-                leave={commonStyles.fadeInBottomLeave}
+                start={themeStyles.fadeInBottomStartWithoutFixed}
+                enter={themeStyles.fadeInBottomEnter}
+                leave={themeStyles.fadeInBottomLeave}
                 container={styles.toastWrapper}
             >
                 <Toast {...toastData} />
diff --git a/frontend/src/component/common/TooltipResolver/TooltipResolver.tsx b/frontend/src/component/common/TooltipResolver/TooltipResolver.tsx
index 60cebf2725..f9d9822759 100644
--- a/frontend/src/component/common/TooltipResolver/TooltipResolver.tsx
+++ b/frontend/src/component/common/TooltipResolver/TooltipResolver.tsx
@@ -1,4 +1,4 @@
-import { Tooltip, TooltipProps } from '@material-ui/core';
+import { Tooltip, TooltipProps } from '@mui/material';
 
 interface ITooltipResolverProps extends Omit<TooltipProps, 'title'> {
     title: string | undefined;
diff --git a/frontend/src/component/common/index.js b/frontend/src/component/common/index.js
index 1f596945dc..900a0231de 100644
--- a/frontend/src/component/common/index.js
+++ b/frontend/src/component/common/index.js
@@ -11,8 +11,8 @@ import {
     Button,
     Avatar,
     Typography,
-} from '@material-ui/core';
-import { Apps } from '@material-ui/icons';
+} from '@mui/material';
+import { Apps } from '@mui/icons-material';
 
 import styles from './common.module.scss';
 import { ConditionallyRender } from './ConditionallyRender/ConditionallyRender';
diff --git a/frontend/src/component/common/select.tsx b/frontend/src/component/common/select.tsx
index fa429ea696..053ad4fdc6 100644
--- a/frontend/src/component/common/select.tsx
+++ b/frontend/src/component/common/select.tsx
@@ -1,5 +1,11 @@
 import React from 'react';
-import { FormControl, InputLabel, MenuItem, Select } from '@material-ui/core';
+import {
+    FormControl,
+    InputLabel,
+    MenuItem,
+    Select,
+    SelectChangeEvent,
+} from '@mui/material';
 import { SELECT_ITEM_ID } from 'utils/testIds';
 
 export interface ISelectOption {
@@ -14,10 +20,7 @@ export interface ISelectMenuProps {
     label?: string;
     options: ISelectOption[];
     style?: object;
-    onChange?: (
-        event: React.ChangeEvent<{ name?: string; value: unknown }>,
-        child: React.ReactNode
-    ) => void;
+    onChange?: (event: SelectChangeEvent, child: React.ReactNode) => void;
     disabled?: boolean;
     className?: string;
     classes?: any;
diff --git a/frontend/src/component/context/ContectFormChip/ContextFormChip.styles.ts b/frontend/src/component/context/ContectFormChip/ContextFormChip.styles.ts
index 8ec196ef4f..7ab3e6c3cb 100644
--- a/frontend/src/component/context/ContectFormChip/ContextFormChip.styles.ts
+++ b/frontend/src/component/context/ContectFormChip/ContextFormChip.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'grid',
         lineHeight: 1.25,
@@ -10,7 +10,7 @@ export const useStyles = makeStyles(theme => ({
         gap: '0.5rem',
         padding: '0.5rem',
         background: theme.palette.grey[200],
-        borderRadius: theme.borders.radius.main,
+        borderRadius: theme.borderRadius.main,
         wordBreak: 'break-word',
     },
     label: {
diff --git a/frontend/src/component/context/ContectFormChip/ContextFormChip.tsx b/frontend/src/component/context/ContectFormChip/ContextFormChip.tsx
index b201ef582e..778e294cb0 100644
--- a/frontend/src/component/context/ContectFormChip/ContextFormChip.tsx
+++ b/frontend/src/component/context/ContectFormChip/ContextFormChip.tsx
@@ -1,5 +1,5 @@
 import { useStyles } from 'component/context/ContectFormChip/ContextFormChip.styles';
-import { Cancel } from '@material-ui/icons';
+import { Cancel } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 interface IContextFormChipProps {
@@ -13,7 +13,7 @@ export const ContextFormChip = ({
     description,
     onRemove,
 }: IContextFormChipProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <li className={styles.container}>
diff --git a/frontend/src/component/context/ContectFormChip/ContextFormChipList.styles.ts b/frontend/src/component/context/ContectFormChip/ContextFormChipList.styles.ts
index afba30d196..00ca3b6eb7 100644
--- a/frontend/src/component/context/ContectFormChip/ContextFormChipList.styles.ts
+++ b/frontend/src/component/context/ContectFormChip/ContextFormChipList.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         listStyleType: 'none',
         display: 'flex',
diff --git a/frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx b/frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx
index 2a310f2cce..639a5f45ae 100644
--- a/frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx
+++ b/frontend/src/component/context/ContectFormChip/ContextFormChipList.tsx
@@ -2,7 +2,7 @@ import { useStyles } from 'component/context/ContectFormChip/ContextFormChipList
 import React from 'react';
 
 export const ContextFormChipList: React.FC = ({ children }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return <ul className={styles.container}>{children}</ul>;
 };
diff --git a/frontend/src/component/context/ContextForm/ContextForm.styles.ts b/frontend/src/component/context/ContextForm/ContextForm.styles.ts
index eafb8b5f87..c731b59f8b 100644
--- a/frontend/src/component/context/ContextForm/ContextForm.styles.ts
+++ b/frontend/src/component/context/ContextForm/ContextForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '470px',
     },
diff --git a/frontend/src/component/context/ContextForm/ContextForm.tsx b/frontend/src/component/context/ContextForm/ContextForm.tsx
index 0bb41baeb5..d489028f99 100644
--- a/frontend/src/component/context/ContextForm/ContextForm.tsx
+++ b/frontend/src/component/context/ContextForm/ContextForm.tsx
@@ -1,8 +1,8 @@
 import Input from 'component/common/Input/Input';
-import { TextField, Button, Switch, Typography } from '@material-ui/core';
+import { TextField, Button, Switch, Typography } from '@mui/material';
 import { useStyles } from './ContextForm.styles';
 import React, { useState, useEffect } from 'react';
-import { Add } from '@material-ui/icons';
+import { Add } from '@mui/icons-material';
 import { ILegalValue } from 'interfaces/context';
 import { ContextFormChip } from 'component/context/ContectFormChip/ContextFormChip';
 import { ContextFormChipList } from 'component/context/ContectFormChip/ContextFormChipList';
@@ -45,7 +45,7 @@ export const ContextForm: React.FC<IContextForm> = ({
     setErrors,
     clearErrors,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [value, setValue] = useState('');
     const [valueDesc, setValueDesc] = useState('');
     const [valueFocused, setValueFocused] = useState(false);
diff --git a/frontend/src/component/context/ContextList/ContextList.tsx b/frontend/src/component/context/ContextList/ContextList.tsx
index f0d9f02d85..bce904009e 100644
--- a/frontend/src/component/context/ContextList/ContextList.tsx
+++ b/frontend/src/component/context/ContextList/ContextList.tsx
@@ -1,5 +1,5 @@
 import { useContext, useState, VFC } from 'react';
-import { Add, Album, Delete, Edit } from '@material-ui/icons';
+import { Add, Album, Delete, Edit } from '@mui/icons-material';
 import { Link, useHistory } from 'react-router-dom';
 import {
     Button,
@@ -10,7 +10,7 @@ import {
     ListItemText,
     Tooltip,
     useMediaQuery,
-} from '@material-ui/core';
+} from '@mui/material';
 import PageContent from 'component/common/PageContent/PageContent';
 import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -36,7 +36,7 @@ const ContextList: VFC = () => {
     const { removeContext } = useContextsApi();
     const { setToastData, setToastApiError } = useToast();
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const onDeleteContext = async () => {
         try {
@@ -85,6 +85,7 @@ const ContextList: VFC = () => {
                                 onClick={() =>
                                     history.push(`/context/edit/${field.name}`)
                                 }
+                                size="large"
                             >
                                 <Edit />
                             </IconButton>
@@ -101,6 +102,7 @@ const ContextList: VFC = () => {
                                     setName(field.name);
                                     setShowDelDialogue(true);
                                 }}
+                                size="large"
                             >
                                 <Delete />
                             </IconButton>
@@ -119,6 +121,7 @@ const ContextList: VFC = () => {
                         <Tooltip title="Add context type">
                             <IconButton
                                 onClick={() => history.push('/context/create')}
+                                size="large"
                             >
                                 <Add />
                             </IconButton>
diff --git a/frontend/src/component/context/ContextList/styles.ts b/frontend/src/component/context/ContextList/styles.ts
index b05619ccd2..9e9dd5d826 100644
--- a/frontend/src/component/context/ContextList/styles.ts
+++ b/frontend/src/component/context/ContextList/styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles({
+export const useStyles = makeStyles()({
     listItem: {
         padding: 0,
         '& a': {
diff --git a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
index d979918fee..391b8d5d19 100644
--- a/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
+++ b/frontend/src/component/environments/CreateEnvironment/CreateEnvironment.tsx
@@ -2,8 +2,8 @@ import { useHistory } from 'react-router-dom';
 import useEnvironmentForm from '../hooks/useEnvironmentForm';
 import EnvironmentForm from '../EnvironmentForm/EnvironmentForm';
 import FormTemplate from 'component/common/FormTemplate/FormTemplate';
-import { Alert } from '@material-ui/lab';
-import { Button } from '@material-ui/core';
+import { Alert } from '@mui/material';
+import { Button } from '@mui/material';
 import { CreateButton } from 'component/common/CreateButton/CreateButton';
 import useEnvironmentApi from 'hooks/api/actions/useEnvironmentApi/useEnvironmentApi';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
diff --git a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.styles.ts b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.styles.ts
index 6cd7210b25..e3f65cb555 100644
--- a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.styles.ts
+++ b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '440px',
     },
diff --git a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx
index 984e8b2d4d..5de5557e35 100644
--- a/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx
+++ b/frontend/src/component/environments/EnvironmentForm/EnvironmentForm.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import { useStyles } from './EnvironmentForm.styles';
 import React from 'react';
 import Input from 'component/common/Input/Input';
@@ -31,7 +31,7 @@ const EnvironmentForm: React.FC<IEnvironmentForm> = ({
     mode,
     clearErrors,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <form onSubmit={handleSubmit} className={styles.form}>
diff --git a/frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.styles.ts b/frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.styles.ts
index 11aabd3422..d34580f22a 100644
--- a/frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.styles.ts
+++ b/frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     radioGroup: {
         flexDirection: 'row',
     },
diff --git a/frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.tsx b/frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.tsx
index feae4d692a..3206ca450e 100644
--- a/frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.tsx
+++ b/frontend/src/component/environments/EnvironmentForm/EnvironmentTypeSelector/EnvironmentTypeSelector.tsx
@@ -3,7 +3,7 @@ import {
     FormControlLabel,
     Radio,
     RadioGroup,
-} from '@material-ui/core';
+} from '@mui/material';
 import { useStyles } from './EnvironmentTypeSelector.styles';
 import React from 'react';
 
@@ -16,7 +16,7 @@ const EnvironmentTypeSelector = ({
     onChange,
     value,
 }: IEnvironmentTypeSelectorProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <FormControl component="fieldset">
             <RadioGroup
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.styles.ts b/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.styles.ts
index fd691d7d46..fe6e43a54a 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.styles.ts
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         flexDirection: 'column',
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.tsx
index 5804384f52..8a455a04a6 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentCard/EnvironmentCard.tsx
@@ -1,4 +1,4 @@
-import { CloudCircle } from '@material-ui/icons';
+import { CloudCircle } from '@mui/icons-material';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
 import { useStyles } from './EnvironmentCard.styles';
 
@@ -8,7 +8,7 @@ interface IEnvironmentProps {
 }
 
 const EnvironmentCard = ({ name, type }: IEnvironmentProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <div className={styles.container}>
             <div className={styles.header}>
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.styles.ts b/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.styles.ts
index bd3b321fc4..75e0fdb3ea 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.styles.ts
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     deleteParagraph: {
         marginTop: '2rem',
     },
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx
index 6538c3bf9b..994dc62e5d 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentDeleteConfirm/EnvironmentDeleteConfirm.tsx
@@ -1,4 +1,4 @@
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import React from 'react';
 import { IEnvironment } from 'interfaces/environments';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
@@ -24,7 +24,7 @@ const EnvironmentDeleteConfirm = ({
     confirmName,
     setConfirmName,
 }: IEnviromentDeleteConfirmProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
         setConfirmName(e.currentTarget.value);
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx
index ee0e27e8b2..b44f66219d 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentList.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
-import { List } from '@material-ui/core';
-import { Add } from '@material-ui/icons';
+import { List } from '@mui/material';
+import { Add } from '@mui/icons-material';
 import useToast from 'hooks/useToast';
 import { IEnvironment, ISortOrderPayload } from 'interfaces/environments';
 import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
index f8487a2fbb..4915409b58 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentListItem/EnvironmentListItem.tsx
@@ -4,14 +4,14 @@ import {
     ListItemText,
     Tooltip,
     IconButton,
-} from '@material-ui/core';
+} from '@mui/material';
 import {
     CloudCircle,
     Delete,
     DragIndicator,
     Edit,
     OfflineBolt,
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 import { IEnvironment } from 'interfaces/environments';
@@ -57,7 +57,7 @@ const EnvironmentListItem = ({
     setToggleDialog,
 }: IEnvironmentListItemProps) => {
     const history = useHistory();
-    const ref = useRef<HTMLDivElement>(null);
+    const ref = useRef<HTMLLIElement>(null);
     const ACCEPT_TYPE = 'LIST_ITEM';
     const [{ isDragging }, drag] = useDrag({
         type: ACCEPT_TYPE,
@@ -126,7 +126,6 @@ const EnvironmentListItem = ({
     }
 
     return (
-        // @ts-expect-error
         <ListItem
             style={{ position: 'relative', opacity }}
             ref={ref}
@@ -155,7 +154,7 @@ const EnvironmentListItem = ({
             <ConditionallyRender
                 condition={updatePermission}
                 show={
-                    <IconButton>
+                    <IconButton size="large">
                         <DragIndicator titleAccess="Drag" cursor="grab" />
                     </IconButton>
                 }
@@ -169,6 +168,7 @@ const EnvironmentListItem = ({
                                 setSelectedEnv(env);
                                 setToggleDialog(prev => !prev);
                             }}
+                            size="large"
                         >
                             <OfflineBolt />
                         </IconButton>
@@ -184,6 +184,7 @@ const EnvironmentListItem = ({
                             onClick={() => {
                                 history.push(`/environments/${env.name}`);
                             }}
+                            size="large"
                         >
                             <Edit />
                         </IconButton>
@@ -200,6 +201,7 @@ const EnvironmentListItem = ({
                                 setDeldialogue(true);
                                 setSelectedEnv(env);
                             }}
+                            size="large"
                         >
                             <Delete />
                         </IconButton>
diff --git a/frontend/src/component/environments/EnvironmentList/EnvironmentToggleConfirm/EnvironmentToggleConfirm.tsx b/frontend/src/component/environments/EnvironmentList/EnvironmentToggleConfirm/EnvironmentToggleConfirm.tsx
index 675422cc9c..66480d1efe 100644
--- a/frontend/src/component/environments/EnvironmentList/EnvironmentToggleConfirm/EnvironmentToggleConfirm.tsx
+++ b/frontend/src/component/environments/EnvironmentList/EnvironmentToggleConfirm/EnvironmentToggleConfirm.tsx
@@ -1,5 +1,5 @@
-import { capitalize } from '@material-ui/core';
-import { Alert } from '@material-ui/lab';
+import { capitalize } from '@mui/material';
+import { Alert } from '@mui/material';
 import React from 'react';
 import { IEnvironment } from 'interfaces/environments';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
diff --git a/frontend/src/component/feature/CopyFeature/CopyFeature.tsx b/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
index 988863c1dc..2fa464b9da 100644
--- a/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
+++ b/frontend/src/component/feature/CopyFeature/CopyFeature.tsx
@@ -12,14 +12,14 @@ import {
     Switch,
     Paper,
     FormControlLabel,
-} from '@material-ui/core';
-import { FileCopy } from '@material-ui/icons';
-import { styles as commonStyles } from 'component/common';
+} from '@mui/material';
+import { FileCopy } from '@mui/icons-material';
+import { styles as themeStyles } from 'component/common';
 import { formatUnknownError } from 'utils/formatUnknownError';
 import styles from './CopyFeature.module.scss';
 import { trim } from 'component/common/util';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import { getTogglePath } from 'utils/routePathHelpers';
 import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
@@ -83,7 +83,7 @@ export const CopyFeatureToggle = () => {
 
     return (
         <Paper
-            className={commonStyles.fullwidth}
+            className={themeStyles.fullwidth}
             style={{ overflow: 'visible' }}
         >
             <div className={styles.header}>
diff --git a/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx b/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
index c73a93cbc4..82f5ce2fd0 100644
--- a/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
+++ b/frontend/src/component/feature/CreateFeatureButton/CreateFeatureButton.tsx
@@ -1,8 +1,8 @@
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';
-import { Button, IconButton, Tooltip } from '@material-ui/core';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { Add } from '@material-ui/icons';
+import { Button, IconButton, Tooltip } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { Add } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { NAVIGATE_TO_CREATE_FEATURE } from 'utils/testIds';
 import { IFeaturesFilter } from 'hooks/useFeaturesFilter';
@@ -34,6 +34,7 @@ export const CreateFeatureButton = ({
                         to={createFeature.path}
                         data-testid={NAVIGATE_TO_CREATE_FEATURE}
                         disabled={!createFeature.access}
+                        size="large"
                     >
                         <Add />
                     </IconButton>
diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts b/frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts
index 2dadac70a1..c613d096ce 100644
--- a/frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts
+++ b/frontend/src/component/feature/FeatureForm/FeatureForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '400px',
     },
diff --git a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
index 84fa898597..5ae4999a22 100644
--- a/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
+++ b/frontend/src/component/feature/FeatureForm/FeatureForm.tsx
@@ -4,12 +4,12 @@ import {
     FormControlLabel,
     Switch,
     Typography,
-} from '@material-ui/core';
+} from '@mui/material';
 import { useStyles } from './FeatureForm.styles';
 import FeatureTypeSelect from '../FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureTypeSelect/FeatureTypeSelect';
 import { CF_DESC_ID, CF_NAME_ID, CF_TYPE_ID } from 'utils/testIds';
 import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
-import { KeyboardArrowDownOutlined } from '@material-ui/icons';
+import { KeyboardArrowDownOutlined } from '@mui/icons-material';
 import { projectFilterGenerator } from 'utils/projectFilterGenerator';
 import FeatureProjectSelect from '../FeatureView/FeatureSettings/FeatureSettingsProject/FeatureProjectSelect/FeatureProjectSelect';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -58,7 +58,7 @@ const FeatureForm: React.FC<IFeatureToggleForm> = ({
     mode,
     clearErrors,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { featureTypes } = useFeatureTypes();
     const history = useHistory();
     const { permissions } = useAuthPermissions();
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts
index 91348b66e9..6ed1f21480 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     noItemsParagraph: {
         margin: '1rem 0',
     },
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
index f432ef58b8..e943aefd83 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEmpty/FeatureStrategyEmpty.tsx
@@ -14,7 +14,7 @@ export const FeatureStrategyEmpty = ({
     featureId,
     environmentId,
 }: IFeatureStrategyEmptyProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <NoItems>
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
index 02bf18ffd1..fbfd976336 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyEnabled/FeatureStrategyEnabled.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import { IFeatureToggle } from 'interfaces/featureToggle';
 import { formatFeaturePath } from '../FeatureStrategyEdit/FeatureStrategyEdit';
 
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.styles.ts b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.styles.ts
index e8d60f758d..3d7a8b8654 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.styles.ts
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     form: {
         display: 'grid',
         gap: '1rem',
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
index 670c9af2d8..c5ff111ba2 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyForm/FeatureStrategyForm.tsx
@@ -3,7 +3,7 @@ import { IFeatureStrategy } from 'interfaces/strategy';
 import { FeatureStrategyType } from '../FeatureStrategyType/FeatureStrategyType';
 import { FeatureStrategyEnabled } from '../FeatureStrategyEnabled/FeatureStrategyEnabled';
 import { FeatureStrategyConstraints } from '../FeatureStrategyConstraints/FeatureStrategyConstraints';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import {
     FeatureStrategyProdGuard,
     useFeatureStrategyProdGuard,
@@ -46,7 +46,7 @@ export const FeatureStrategyForm = ({
     segments,
     setSegments,
 }: IFeatureStrategyFormProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [showProdGuard, setShowProdGuard] = useState(false);
     const hasValidConstraints = useConstraintsValidation(strategy.constraints);
     const enableProdGuard = useFeatureStrategyProdGuard(feature, environmentId);
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
index 0616ca7446..754e17ffb7 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenu.tsx
@@ -3,7 +3,7 @@ import PermissionButton, {
 } from 'component/common/PermissionButton/PermissionButton';
 import React, { useState } from 'react';
 import { CREATE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
-import { Popover } from '@material-ui/core';
+import { Popover } from '@mui/material';
 import { FeatureStrategyMenuCards } from './FeatureStrategyMenuCards/FeatureStrategyMenuCards';
 
 interface IFeatureStrategyMenuProps {
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.styles.ts b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.styles.ts
index 88b650c6b9..aaf4e3c187 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.styles.ts
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     card: {
         display: 'grid',
         gridTemplateColumns: '3rem 1fr',
@@ -8,6 +8,7 @@ export const useStyles = makeStyles(theme => ({
         padding: '1rem',
         color: 'inherit',
         textDecoration: 'inherit',
+        lineHeight: 1.25,
         borderWidth: 1,
         borderStyle: 'solid',
         borderColor: theme.palette.grey[400],
@@ -32,10 +33,8 @@ export const useStyles = makeStyles(theme => ({
     },
     name: {
         fontWeight: theme.fontWeight.bold,
-        color: theme.palette.grey[700],
     },
     description: {
         fontSize: theme.fontSizes.smallBody,
-        lineHeight: 1.25,
     },
 }));
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
index 276c360079..8bfbe95be1 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCard/FeatureStrategyMenuCard.tsx
@@ -21,7 +21,7 @@ export const FeatureStrategyMenuCard = ({
     environmentId,
     strategy,
 }: IFeatureStrategyMenuCardProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const StrategyIcon = getFeatureStrategyIcon(strategy.name);
     const strategyName = formatStrategyName(strategy.name);
 
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
index b9ab69a14b..e58fc6d838 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyMenu/FeatureStrategyMenuCards/FeatureStrategyMenuCards.tsx
@@ -1,5 +1,5 @@
 import { useMemo } from 'react';
-import { List, ListItem } from '@material-ui/core';
+import { List, ListItem } from '@mui/material';
 import { useStrategies } from 'hooks/api/getters/useStrategies/useStrategies';
 import { FeatureStrategyMenuCard } from '../FeatureStrategyMenuCard/FeatureStrategyMenuCard';
 
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard.tsx
index 21135785fa..96131364ee 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyProdGuard/FeatureStrategyProdGuard.tsx
@@ -1,6 +1,6 @@
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import { Alert } from '@material-ui/lab';
-import { Checkbox, FormControlLabel } from '@material-ui/core';
+import { Alert } from '@mui/material';
+import { Checkbox, FormControlLabel } from '@mui/material';
 import { PRODUCTION } from 'constants/environmentTypes';
 import { IFeatureToggle } from 'interfaces/featureToggle';
 import { createPersistentGlobalStateHook } from 'hooks/usePersistentGlobalState';
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
index 1deb3dca87..829175a1e0 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategyRemove/FeatureStrategyRemove.tsx
@@ -5,14 +5,14 @@ import { useHistory } from 'react-router-dom';
 import useToast from 'hooks/useToast';
 import { formatFeaturePath } from '../FeatureStrategyEdit/FeatureStrategyEdit';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
 import { DELETE_FEATURE_STRATEGY } from 'component/providers/AccessProvider/permissions';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import { STRATEGY_FORM_REMOVE_ID } from 'utils/testIds';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
-import { Delete } from '@material-ui/icons';
+import { Delete } from '@mui/icons-material';
 
 interface IFeatureStrategyRemoveProps {
     projectId: string;
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.styles.ts b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.styles.ts
index 36ec497ba5..e2b37273d8 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.styles.ts
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     title: {
         margin: 0,
         fontSize: theme.fontSizes.bodySize,
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx
index 7f35a70305..6a8f2ebfd0 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegment.tsx
@@ -21,7 +21,7 @@ export const FeatureStrategySegment = ({
 }: IFeatureStrategySegmentProps) => {
     const atSegmentsLimit = selectedSegments.length >= STRATEGY_SEGMENTS_LIMIT;
     const { segments: allSegments } = useSegments();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     if (!allSegments || allSegments.length === 0) {
         return null;
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.styles.ts b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.styles.ts
index 133bcdf689..ba07b2c002 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.styles.ts
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     chip: {
         display: 'flex',
         alignItems: 'center',
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx
index 7278be4ed3..e9a59277ea 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentChip.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Link } from 'react-router-dom';
 import { ISegment } from 'interfaces/segment';
-import { Clear, VisibilityOff, Visibility } from '@material-ui/icons';
+import { Clear, VisibilityOff, Visibility } from '@mui/icons-material';
 import { useStyles } from './FeatureStrategySegmentChip.styles';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { constraintAccordionListId } from 'component/common/ConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 
 interface IFeatureStrategySegmentListProps {
     segment: ISegment;
@@ -20,7 +20,7 @@ export const FeatureStrategySegmentChip = ({
     preview,
     setPreview,
 }: IFeatureStrategySegmentListProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const onRemove = () => {
         setSegments(prev => {
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.styles.ts b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.styles.ts
index 9f3a670600..bb7d9da1d5 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.styles.ts
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     title: {
         margin: 0,
         fontSize: theme.fontSizes.bodySize,
@@ -20,6 +20,6 @@ export const useStyles = makeStyles(theme => ({
         marginBlock: '0.2rem',
         display: 'grid',
         alignItems: 'center',
-        borderRadius: theme.borders.radius.main,
+        borderRadius: theme.borderRadius.main,
     },
 }));
diff --git a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx
index a4f4bb42a0..06a2a8e9ea 100644
--- a/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx
+++ b/frontend/src/component/feature/FeatureStrategy/FeatureStrategySegment/FeatureStrategySegmentList.tsx
@@ -14,7 +14,7 @@ export const FeatureStrategySegmentList = ({
     segments,
     setSegments,
 }: IFeatureStrategySegmentListProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [preview, setPreview] = useState<ISegment>();
     const lastSegmentIndex = segments.length - 1;
 
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.tsx
index 7babfee543..8112ebd44c 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleList.tsx
@@ -1,8 +1,8 @@
 import { Dispatch, SetStateAction, useContext, VFC } from 'react';
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';
-import { List, ListItem } from '@material-ui/core';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+import { List, ListItem } from '@mui/material';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import { IFlags } from 'interfaces/uiConfig';
 import { SearchField } from 'component/common/SearchField/SearchField';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -62,7 +62,7 @@ export const FeatureToggleList: VFC<IFeatureToggleListProps> = ({
 }) => {
     const { hasAccess } = useContext(AccessContext);
     const createFeature = useCreateFeaturePath(filter);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const smallScreen = useMediaQuery('(max-width:800px)');
     const mobileView = useMediaQuery('(max-width:600px)');
 
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx
index 4235e13f4a..4294c70aa6 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/FeatureToggleListActions.tsx
@@ -1,5 +1,5 @@
 import { Dispatch, MouseEventHandler, SetStateAction, VFC } from 'react';
-import { MenuItem, Typography } from '@material-ui/core';
+import { MenuItem, Typography } from '@mui/material';
 import DropdownMenu from 'component/common/DropdownMenu/DropdownMenu';
 import ProjectSelect from 'component/common/ProjectSelect/ProjectSelect';
 import useLoading from 'hooks/useLoading';
@@ -30,7 +30,7 @@ export const FeatureToggleListActions: VFC<IFeatureToggleListActionsProps> = ({
     setSort,
     loading = false,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { uiConfig } = useUiConfig();
     const ref = useLoading(loading);
 
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.ts b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.ts
index 4e033e99d5..c61a280123 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.ts
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListActions/styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles({
+export const useStyles = makeStyles()({
     actions: {
         '& > *': {
             margin: '0 0.25rem',
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.tsx b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.tsx
index 97cab9af70..a82834f7ff 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.tsx
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/FeatureToggleListItem.tsx
@@ -1,8 +1,8 @@
 import { memo } from 'react';
 import classnames from 'classnames';
 import { Link } from 'react-router-dom';
-import { Chip, ListItem, Tooltip } from '@material-ui/core';
-import { Undo } from '@material-ui/icons';
+import { Chip, ListItem, Tooltip } from '@mui/material';
+import { Undo } from '@mui/icons-material';
 import TimeAgo from 'react-timeago';
 import { IAccessContext } from 'contexts/AccessContext';
 import StatusChip from 'component/common/StatusChip/StatusChip';
@@ -14,9 +14,9 @@ import FeatureStatus from 'component/feature/FeatureView/FeatureStatus/FeatureSt
 import FeatureType from 'component/feature/FeatureView/FeatureType/FeatureType';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
-import { styles as commonStyles } from 'component/common'; // FIXME: remove
 import { FeatureSchema } from 'openapi';
-import { useStyles } from './styles'; // FIXME: cleanup
+import { styles as themeStyles } from 'component/common';
+import { useStyles } from './styles';
 
 interface IFeatureToggleListItemProps {
     feature: FeatureSchema;
@@ -28,7 +28,7 @@ interface IFeatureToggleListItemProps {
 
 export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
     ({ feature, onRevive, hasAccess, flags = {}, className, ...rest }) => {
-        const styles = useStyles();
+        const { classes: styles } = useStyles();
 
         const { projects } = useProjects();
         const isArchive = Boolean(onRevive);
@@ -76,7 +76,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
                 <span
                     className={classnames(
                         styles.listItemType,
-                        commonStyles.hideLt600
+                        themeStyles.hideLt600
                     )}
                 >
                     <FeatureType type={type as string} />
@@ -88,12 +88,12 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
                             <Link
                                 to={getTogglePath(feature.project, name)}
                                 className={classnames(
-                                    commonStyles.listLink,
-                                    commonStyles.truncate
+                                    themeStyles.listLink,
+                                    themeStyles.truncate
                                 )}
                             >
                                 <Tooltip title={description || ''}>
-                                    <span className={commonStyles.toggleName}>
+                                    <span className={themeStyles.toggleName}>
                                         {name}&nbsp;
                                     </span>
                                 </Tooltip>
@@ -111,7 +111,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
                                     />
                                 </small>
                                 <div>
-                                    <span className={commonStyles.truncate}>
+                                    <span className={themeStyles.truncate}>
                                         <small>{description}</small>
                                     </span>
                                 </div>
@@ -120,7 +120,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
                         elseShow={
                             <>
                                 <Tooltip title={description || ''}>
-                                    <span className={commonStyles.toggleName}>
+                                    <span className={themeStyles.toggleName}>
                                         {name}&nbsp;{' '}
                                     </span>
                                 </Tooltip>
@@ -138,7 +138,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
                                     />
                                 </small>
                                 <div>
-                                    <span className={commonStyles.truncate}>
+                                    <span className={themeStyles.truncate}>
                                         <small>{description}</small>
                                     </span>
                                 </div>
@@ -149,7 +149,7 @@ export const FeatureToggleListItem = memo<IFeatureToggleListItemProps>(
                 <span
                     className={classnames(
                         styles.listItemStrategies,
-                        commonStyles.hideLt920
+                        themeStyles.hideLt920
                     )}
                 >
                     <StatusChip stale={Boolean(stale)} showActive={false} />
diff --git a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.ts b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.ts
index e186101ba2..25015eee0f 100644
--- a/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.ts
+++ b/frontend/src/component/feature/FeatureToggleList/FeatureToggleListItem/styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     listItem: {
         padding: '0',
         margin: '1rem 0',
@@ -20,8 +20,7 @@ export const useStyles = makeStyles(theme => ({
         flexShrink: 0,
     },
     listItemSvg: {
-        // @ts-expect-error
-        fill: theme.palette.icons.lightGrey,
+        fill: theme.palette.grey[300],
     },
     listItemLink: {
         marginLeft: '0.25rem',
diff --git a/frontend/src/component/feature/FeatureToggleList/styles.ts b/frontend/src/component/feature/FeatureToggleList/styles.ts
index 560f82aee1..2964dea3da 100644
--- a/frontend/src/component/feature/FeatureToggleList/styles.ts
+++ b/frontend/src/component/feature/FeatureToggleList/styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     actionsContainer: {
         display: 'flex',
         alignItems: 'center',
@@ -14,19 +14,18 @@ export const useStyles = makeStyles(theme => ({
         gap: '1rem',
         justifyContent: 'space-between',
         alignItems: 'center',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'block',
         },
     },
     searchBar: {
         minWidth: '450px',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             minWidth: '100%',
         },
     },
     emptyStateListItem: {
-        // @ts-expect-error
-        border: `2px dashed ${theme.palette.borders.main}`,
+        border: `2px dashed ${theme.palette.grey[100]}`,
         padding: '0.8rem',
         textAlign: 'center',
         display: 'flex',
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
index 13e54b05c0..c6c737bf23 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     tableRow: {
         '&:hover': {
             backgroundColor: theme.palette.grey[200],
@@ -27,12 +27,12 @@ export const useStyles = makeStyles(theme => ({
     },
     tableCellEnv: {
         width: '90px',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
     tableCellCreated: {
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
index 741e1999e2..431c9ae6b5 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNew.tsx
@@ -5,7 +5,7 @@ import {
     TableCell,
     TableHead,
     TableRow,
-} from '@material-ui/core';
+} from '@mui/material';
 import classnames from 'classnames';
 import { useStyles } from './FeatureToggleListNew.styles';
 import FeatureToggleListNewItem from './FeatureToggleListNewItem/FeatureToggleListNewItem';
@@ -83,7 +83,7 @@ const FeatureToggleListNew = ({
     loading,
     projectId,
 }: IFeatureToggleListNewProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { setAnnouncement } = useContext(AnnouncerContext);
     const [sortOpt, setSortOpt] = useFeatureToggLeProjectSort();
     const [sortedFeatures, setSortedFeatures] = useState(
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx
index 088d406b48..0bfca1dd1c 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/CreatedAt.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { formatDateYMD, formatDateYMDHMS } from 'utils/formatDate';
 
diff --git a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
index fbbd292d90..52492e093b 100644
--- a/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
+++ b/frontend/src/component/feature/FeatureToggleListNew/FeatureToggleListNewItem/FeatureToggleListNewItem.tsx
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from 'react';
-import { TableCell, TableRow } from '@material-ui/core';
+import { TableCell, TableRow } from '@mui/material';
 import { useStyles } from '../FeatureToggleListNew.styles';
 import useToggleFeatureByEnv from 'hooks/api/actions/useToggleFeatureByEnv/useToggleFeatureByEnv';
 import { IEnvironments } from 'interfaces/featureToggle';
@@ -40,7 +40,7 @@ const FeatureToggleListNewItem = ({
     );
 
     const { refetch } = useProject(projectId);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const ref = useRef<HTMLButtonElement>(null);
     const [showInfoBox, setShowInfoBox] = useState(false);
     const [environmentName, setEnvironmentName] = useState('');
diff --git a/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.styles.ts b/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.styles.ts
index 10dae26fef..fd3ed38125 100644
--- a/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         borderRadius: '12.5px',
         backgroundColor: '#fff',
diff --git a/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx b/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx
index 1e3e13843e..2249df7770 100644
--- a/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureLog/FeatureLog.tsx
@@ -5,7 +5,7 @@ import { IFeatureViewParams } from 'interfaces/params';
 import { FeatureEventHistory } from 'component/history/FeatureEventHistory/FeatureEventHistory';
 
 const FeatureLog = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const { feature } = useFeature(projectId, featureId);
 
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.styles.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.styles.ts
index 7cf500ae00..3ee30c8b52 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.styles.ts
@@ -1,8 +1,8 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     mobileMarginTop: {
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             marginTop: theme.spacing(2),
         },
     },
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
index 52cf790cf1..4fee8ca586 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetrics.tsx
@@ -8,7 +8,7 @@ import {
     FeatureMetricsHours,
 } from './FeatureMetricsHours/FeatureMetricsHours';
 import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
-import { Grid } from '@material-ui/core';
+import { Grid } from '@mui/material';
 import { FeatureMetricsContent } from './FeatureMetricsContent/FeatureMetricsContent';
 import { useQueryStringNumberState } from 'hooks/useQueryStringNumberState';
 import { useQueryStringState } from 'hooks/useQueryStringState';
@@ -22,7 +22,7 @@ export const FeatureMetrics = () => {
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const environments = useFeatureMetricsEnvironments(projectId, featureId);
     const applications = useFeatureMetricsApplications(featureId);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     usePageTitle('Metrics');
 
     const [hoursBack = FEATURE_METRIC_HOURS_BACK_MAX, setHoursBack] =
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts
index 6a0af528bb..2c3a5873cf 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartData.ts
@@ -1,7 +1,7 @@
 import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
 import { ChartData } from 'chart.js';
 import { ILocationSettings } from 'hooks/useLocationSettings';
-import theme from 'themes/mainTheme';
+import theme from 'themes/theme';
 import 'chartjs-adapter-date-fns';
 
 interface IPoint {
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts
index d5e786c884..abc1e00a4c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChart/createChartOptions.ts
@@ -2,7 +2,7 @@ import { ILocationSettings } from 'hooks/useLocationSettings';
 import 'chartjs-adapter-date-fns';
 import { ChartOptions, defaults } from 'chart.js';
 import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
-import theme from 'themes/mainTheme';
+import theme from 'themes/theme';
 import { formatDateHM } from 'utils/formatDate';
 
 export const createChartOptions = (
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.styles.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.styles.ts
index ac0b38a72f..0117295b7c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     title: {
         margin: 0,
         marginBottom: '.5rem',
@@ -21,12 +21,5 @@ export const useStyles = makeStyles(theme => ({
             backgroundColor: theme.palette.primary.main,
             color: theme.palette.primary.contrastText,
         },
-        '& > :is(:focus-visible, :active)': {
-            outline: 0,
-            outlineStyle: 'solid',
-            outlineWidth: 2,
-            outlineOffset: 2,
-            outlineColor: theme.palette.primary.main,
-        },
     },
 }));
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
index 6fb36bf102..ff7721c003 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsChips/FeatureMetricsChips.tsx
@@ -1,6 +1,7 @@
-import { Chip } from '@material-ui/core';
+import { Chip } from '@mui/material';
 import { useMemo } from 'react';
 import { useStyles } from './FeatureMetricsChips.styles';
+import { useThemeStyles } from 'themes/themeStyles';
 
 interface IFeatureMetricsChipsProps {
     title: string;
@@ -15,7 +16,8 @@ export const FeatureMetricsChips = ({
     value,
     setValue,
 }: IFeatureMetricsChipsProps) => {
-    const styles = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
+    const { classes: styles } = useStyles();
 
     const onClick = (value: string) => () => {
         if (values.has(value)) {
@@ -39,6 +41,7 @@ export const FeatureMetricsChips = ({
                             label={val}
                             onClick={onClick(val)}
                             aria-pressed={val === value}
+                            className={themeStyles.focusable}
                         />
                     </li>
                 ))}
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
index c53748d453..7cf8295e6d 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsContent/FeatureMetricsContent.tsx
@@ -3,8 +3,8 @@ import { IFeatureMetricsRaw } from 'interfaces/featureToggle';
 import { FeatureMetricsStatsRaw } from '../FeatureMetricsStats/FeatureMetricsStatsRaw';
 import { FeatureMetricsChart } from '../FeatureMetricsChart/FeatureMetricsChart';
 import { FeatureMetricsEmpty } from '../FeatureMetricsEmpty/FeatureMetricsEmpty';
-import { Box } from '@material-ui/core';
-import theme from 'themes/mainTheme';
+import { Box } from '@mui/material';
+import theme from 'themes/theme';
 
 interface IFeatureMetricsContentProps {
     metrics: IFeatureMetricsRaw[];
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsEmpty/FeatureMetricsEmpty.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsEmpty/FeatureMetricsEmpty.tsx
index ab083c7864..031abba6a3 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsEmpty/FeatureMetricsEmpty.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsEmpty/FeatureMetricsEmpty.tsx
@@ -1,4 +1,4 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 
 export const FeatureMetricsEmpty = () => {
     return (
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.styles.ts b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.styles.ts
index 979fef8bc0..6a835e1480 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     item: {
         padding: theme.spacing(2),
         background: theme.palette.grey[100],
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx
index 8aa8a16385..4aa57f9f0b 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsStats/FeatureMetricsStats.tsx
@@ -1,6 +1,6 @@
 import { calculatePercentage } from 'utils/calculatePercentage';
 import { useStyles } from './FeatureMetricsStats.styles';
-import { Grid } from '@material-ui/core';
+import { Grid } from '@mui/material';
 
 interface IFeatureMetricsStatsProps {
     totalYes: number;
@@ -15,7 +15,7 @@ export const FeatureMetricsStats = ({
     totalNo,
     hoursBack,
 }: IFeatureMetricsStatsProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const hoursSuffix =
         hoursBack === 1 ? 'in the last hour' : `in the last ${hoursBack} hours`;
diff --git a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
index ebcd36ac84..8f7e9e5170 100644
--- a/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureMetrics/FeatureMetricsTable/FeatureMetricsTable.tsx
@@ -7,7 +7,7 @@ import {
     TableRow,
     useMediaQuery,
     useTheme,
-} from '@material-ui/core';
+} from '@mui/material';
 import { useLocationSettings } from 'hooks/useLocationSettings';
 import { useMemo } from 'react';
 import { formatDateYMDHMS } from 'utils/formatDate';
@@ -20,7 +20,7 @@ interface IFeatureMetricsTableProps {
 
 export const FeatureMetricsTable = ({ metrics }: IFeatureMetricsTableProps) => {
     const theme = useTheme();
-    const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+    const smallScreen = useMediaQuery(theme.breakpoints.down('md'));
     const { locationSettings } = useLocationSettings();
 
     const sortedMetrics = useMemo(() => {
diff --git a/frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.styles.ts b/frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.styles.ts
index a7cee2c317..990694cc8c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     featureId: {
         wordBreak: 'break-all',
     },
diff --git a/frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.tsx b/frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.tsx
index 6779ae358c..55442ac625 100644
--- a/frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureNotFound/FeatureNotFound.tsx
@@ -9,7 +9,7 @@ import { useFeaturesArchive } from 'hooks/api/getters/useFeaturesArchive/useFeat
 export const FeatureNotFound = () => {
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const { archivedFeatures } = useFeaturesArchive();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { uiConfig } = useUiConfig();
 
     const createFeatureTogglePath = getCreateTogglePath(
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.styles.ts
index c1db02e757..c125eab8e1 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     dialogFormContent: {
         ['& > *']: {
             margin: '0.5rem 0',
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx
index 14debab9f3..f949b003c7 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/AddTagDialog/AddTagDialog.tsx
@@ -1,4 +1,4 @@
-import { DialogContentText } from '@material-ui/core';
+import { DialogContentText } from '@mui/material';
 import { useParams } from 'react-router';
 import React, { useState } from 'react';
 import { IFeatureViewParams } from 'interfaces/params';
@@ -26,7 +26,7 @@ interface IDefaultTag {
 
 const AddTagDialog = ({ open, setOpen }: IAddTagDialogProps) => {
     const DEFAULT_TAG: IDefaultTag = { type: 'simple', value: '' };
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { featureId } = useParams<IFeatureViewParams>();
     const { addTagToFeature, loading } = useFeatureApi();
     const { refetch } = useTags(featureId);
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.styles.ts
index 1c283586a9..863a55d8d1 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.styles.ts
@@ -1,26 +1,26 @@
-import { makeStyles } from '@material-ui/core/styles';
-
-export const useStyles = makeStyles(theme => ({
-    container: { display: 'flex', width: '100%' },
+import { makeStyles } from 'tss-react/mui';
 
+export const useStyles = makeStyles()(theme => ({
+    container: {
+        display: 'flex',
+        width: '100%',
+        [theme.breakpoints.down(1000)]: {
+            flexDirection: 'column',
+        },
+    },
     mainContent: {
         display: 'flex',
         flexDirection: 'column',
         width: `calc(100% - (350px + 1rem))`,
+        [theme.breakpoints.down(1000)]: {
+            width: '100%',
+        },
     },
     trafficContainer: {
         display: 'flex',
         flexWrap: 'wrap',
-    },
-    [theme.breakpoints.down(1000)]: {
-        container: {
-            flexDirection: 'column',
-        },
-        trafficContainer: {
+        [theme.breakpoints.down(1000)]: {
             marginTop: '1rem',
         },
-        mainContent: {
-            width: '100%',
-        },
     },
 }));
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
index 13c43bc569..d1239be38c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverview.tsx
@@ -13,7 +13,7 @@ import { useRequiredPathParam } from 'hooks/useRequiredPathParam';
 import { usePageTitle } from 'hooks/usePageTitle';
 
 const FeatureOverview = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { push } = useHistory();
     const projectId = useRequiredPathParam('projectId');
     const featureId = useRequiredPathParam('featureId');
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.styles.ts
index d2c974c006..8c92b9067c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     label: {
         display: 'inline-flex',
         alignItems: 'center',
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
index e63fe2206d..60d8012e5c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitch/FeatureOverviewEnvSwitch.tsx
@@ -30,7 +30,7 @@ const FeatureOverviewEnvSwitch = ({
         useFeatureApi();
     const { refetchFeature } = useFeature(projectId, featureId);
     const { setToastData, setToastApiError } = useToast();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const handleToggleEnvironmentOn = async () => {
         try {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.styles.ts
index fe9b2e2a13..b8e2b7ed31 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         borderRadius: '10px',
         backgroundColor: '#fff',
@@ -11,20 +11,17 @@ export const useStyles = makeStyles(theme => ({
         minWidth: '350px',
         marginRight: '1rem',
         marginTop: '1rem',
-    },
-
-    header: {
-        fontSize: theme.fontSizes.subHeader,
-        fontWeight: 'normal',
-        margin: 0,
-        marginBottom: '0.5rem',
-    },
-    [theme.breakpoints.down(1000)]: {
-        container: {
+        [theme.breakpoints.down(1000)]: {
             marginBottom: '1rem',
             width: '100%',
             maxWidth: 'none',
             minWidth: 'auto',
         },
     },
+    header: {
+        fontSize: theme.fontSizes.subHeader,
+        fontWeight: 'normal',
+        margin: 0,
+        marginBottom: '0.5rem',
+    },
 }));
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
index de5685186d..d37c299b30 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvSwitches/FeatureOverviewEnvSwitches.tsx
@@ -1,4 +1,4 @@
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { useState } from 'react';
 import { useParams } from 'react-router';
 import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
@@ -9,7 +9,7 @@ import FeatureOverviewEnvSwitch from './FeatureOverviewEnvSwitch/FeatureOverview
 import { useStyles } from './FeatureOverviewEnvSwitches.styles';
 
 const FeatureOverviewEnvSwitches = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { featureId, projectId } = useParams<IFeatureViewParams>();
     useFeatureApi();
     const { feature } = useFeature(projectId, featureId);
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
index 15dc63e2e7..cee5317601 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     featureOverviewEnvironment: {
         borderRadius: '12.5px',
         padding: '0.2rem',
@@ -13,6 +13,14 @@ export const useStyles = makeStyles(theme => ({
     accordionHeader: {
         boxShadow: 'none',
         padding: '1rem 2rem',
+        [theme.breakpoints.down(400)]: {
+            padding: '0.5rem 1rem',
+        },
+    },
+    accordionBodyInnerContainer: {
+        [theme.breakpoints.down(400)]: {
+            padding: '0.5rem',
+        },
     },
     accordionBody: {
         width: '100%',
@@ -28,11 +36,23 @@ export const useStyles = makeStyles(theme => ({
     headerTitle: {
         display: 'flex',
         alignItems: 'center',
+        [theme.breakpoints.down(560)]: {
+            flexDirection: 'column',
+            textAlign: 'center',
+        },
+    },
+    headerIcon: {
+        [theme.breakpoints.down(560)]: {
+            marginBottom: '0.5rem',
+        },
     },
     disabledIndicatorPos: {
         position: 'absolute',
         top: '15px',
         left: '20px',
+        [theme.breakpoints.down(560)]: {
+            top: '13px',
+        },
     },
     iconContainer: {
         backgroundColor: theme.palette.primary.light,
@@ -90,28 +110,10 @@ export const useStyles = makeStyles(theme => ({
             top: '5px',
         },
     },
-    [theme.breakpoints.down(560)]: {
-        disabledIndicatorPos: {
-            top: '13px',
-        },
-        headerTitle: {
-            flexDirection: 'column',
+    truncator: {
+        [theme.breakpoints.down(560)]: {
             textAlign: 'center',
         },
-        headerIcon: {
-            marginBottom: '0.5rem',
-        },
-        truncator: {
-            textAlign: 'center',
-        },
-    },
-    [theme.breakpoints.down(400)]: {
-        accordionHeader: {
-            padding: '0.5rem 1rem',
-        },
-        accordionBodyInnerContainer: {
-            padding: '0.5rem',
-        },
     },
     strategyIcon: {
         fill: theme.palette.grey[600],
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
index bf5113fe6c..1572a3e31e 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironment.tsx
@@ -3,8 +3,8 @@ import {
     AccordionDetails,
     AccordionSummary,
     Tooltip,
-} from '@material-ui/core';
-import { ExpandMore } from '@material-ui/icons';
+} from '@mui/material';
+import { ExpandMore } from '@mui/icons-material';
 import React from 'react';
 import { useParams } from 'react-router';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
@@ -40,7 +40,7 @@ interface IFeatureOverviewEnvironmentProps {
 const FeatureOverviewEnvironment = ({
     env,
 }: IFeatureOverviewEnvironmentProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const { metrics } = useFeatureMetrics(projectId, featureId);
     const { feature } = useFeature(projectId, featureId);
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody.tsx
index 821c70344f..de2ec0165c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentBody/FeatureOverviewEnvironmentBody.tsx
@@ -16,7 +16,7 @@ const FeatureOverviewEnvironmentBody = ({
     getOverviewText,
 }: IFeatureOverviewEnvironmentBodyProps) => {
     const { projectId, featureId } = useParams<IFeatureViewParams>();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     if (!featureEnvironment) {
         return null;
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx
index 67de3d8ff4..56ef5df658 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentFooter/FeatureOverviewEnvironmentFooter.tsx
@@ -9,7 +9,7 @@ interface IFeatureOverviewEnvironmentFooterProps {
 const FeatureOverviewEnvironmentFooter = ({
     environmentMetric,
 }: IFeatureOverviewEnvironmentFooterProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     if (!environmentMetric) {
         return null;
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts
index 7d384805a7..7a1c3e54c1 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         marginLeft: 'auto',
         display: 'flex',
@@ -15,11 +15,17 @@ export const useStyles = makeStyles(theme => ({
         fill: theme.palette.grey[300],
         height: '75px',
         width: '75px',
+        [theme.breakpoints.down(500)]: {
+            display: 'none',
+        },
     },
     infoParagraph: {
         maxWidth: '215px',
         marginTop: '0.25rem',
         fontSize: theme.fontSizes.smallBody,
+        [theme.breakpoints.down(700)]: {
+            display: 'none',
+        },
     },
     percentage: {
         color: theme.palette.primary.light,
@@ -28,17 +34,7 @@ export const useStyles = makeStyles(theme => ({
     },
     percentageCircle: {
         transform: 'scale(0.85)',
-    },
-    [theme.breakpoints.down(700)]: {
-        infoParagraph: {
-            display: 'none',
-        },
-    },
-    [theme.breakpoints.down(500)]: {
-        icon: {
-            display: 'none',
-        },
-        percentageCircle: {
+        [theme.breakpoints.down(500)]: {
             display: 'none',
         },
     },
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
index bac79fbf3b..3776b22ce2 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentMetrics/FeatureOverviewEnvironmentMetrics.tsx
@@ -1,4 +1,4 @@
-import { FiberManualRecord } from '@material-ui/icons';
+import { FiberManualRecord } from '@mui/icons-material';
 import { IFeatureEnvironmentMetrics } from 'interfaces/featureToggle';
 import { calculatePercentage } from 'utils/calculatePercentage';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
@@ -11,7 +11,7 @@ interface IFeatureOverviewEnvironmentMetrics {
 const FeatureOverviewEnvironmentMetrics = ({
     environmentMetric,
 }: IFeatureOverviewEnvironmentMetrics) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     if (!environmentMetric) return null;
 
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.styles.ts
index bb20aa0a33..b0905b0beb 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.styles.ts
@@ -1,8 +1,8 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
-        borderRadius: theme.borders.radius.main,
+        borderRadius: theme.borderRadius.main,
         border: `1px solid ${theme.palette.grey[300]}`,
         '& + &': {
             marginTop: '1rem',
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
index 487348827d..ef484ee6f5 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewEnvironments/FeatureOverviewEnvironment/FeatureOverviewEnvironmentStrategies/FeatureOverviewEnvironmentStrategy/FeatureOverviewEnvironmentStrategy.tsx
@@ -1,5 +1,5 @@
-import { Edit } from '@material-ui/icons';
-import { useTheme } from '@material-ui/core/styles';
+import { Edit } from '@mui/icons-material';
+import { useTheme } from '@mui/material/styles';
 import { Link, useParams } from 'react-router-dom';
 import { IFeatureViewParams } from 'interfaces/params';
 import { IFeatureStrategy } from 'interfaces/strategy';
@@ -26,7 +26,7 @@ const FeatureOverviewEnvironmentStrategy = ({
 }: IFeatureOverviewEnvironmentStrategyProps) => {
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const theme = useTheme();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const Icon = getFeatureStrategyIcon(strategy.name);
     const { parameters, constraints } = strategy;
 
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles.ts
index e8cd9b1c93..779b243dbd 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     valueContainer: {
         display: 'flex',
         alignItems: 'center',
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
index ba851d1d46..3097001575 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecution.tsx
@@ -23,7 +23,7 @@ const FeatureOverviewExecution = ({
     constraints = [],
     strategy,
 }: IFeatureOverviewExecutionProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { strategies } = useStrategies();
     const { uiConfig } = useUiConfig();
 
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.styles.ts
index e02d725753..d4dea9b4f4 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: { textAlign: 'center' },
     chip: {
         margin: '0.25rem',
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx
index 0e91cc71f2..42168f0688 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewExecution/FeatureOverviewExecutionChips/FeatureOverviewExecutionChips.tsx
@@ -1,4 +1,4 @@
-import { Chip } from '@material-ui/core';
+import { Chip } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useStyles } from './FeatureOverviewExecutionChips.styles';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
@@ -12,7 +12,7 @@ const FeatureOverviewExecutionChips = ({
     value,
     text,
 }: IFeatureOverviewExecutionChipsProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <div className={styles.container}>
             <ConditionallyRender
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
index 039f6717da..f7c0eda63b 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetaData.tsx
@@ -1,4 +1,4 @@
-import { capitalize } from '@material-ui/core';
+import { capitalize } from '@mui/material';
 import classnames from 'classnames';
 import { useParams } from 'react-router-dom';
 import { Link } from 'react-router-dom';
@@ -7,7 +7,7 @@ import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useStyles } from './FeatureOverviewMetadata.styles';
 
-import { Edit } from '@material-ui/icons';
+import { Edit } from '@mui/icons-material';
 import { IFeatureViewParams } from 'interfaces/params';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import { UPDATE_FEATURE } from 'component/providers/AccessProvider/permissions';
@@ -15,7 +15,7 @@ import useTags from 'hooks/api/getters/useTags/useTags';
 import FeatureOverviewTags from './FeatureOverviewTags/FeatureOverviewTags';
 
 const FeatureOverviewMetaData = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const { tags } = useTags(featureId);
 
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts
index 5ceb483fae..bf1c67f1f9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewMetadata.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         borderRadius: '10px',
         color: '#fff',
@@ -10,6 +10,11 @@ export const useStyles = makeStyles(theme => ({
         maxWidth: '350px',
         minWidth: '350px',
         marginRight: '1rem',
+        [theme.breakpoints.down(1000)]: {
+            width: '100%',
+            maxWidth: 'none',
+            minWidth: 'auto',
+        },
     },
     paddingContainerTop: {
         padding: '1.5rem 1.5rem 0 1.5rem',
@@ -50,11 +55,4 @@ export const useStyles = makeStyles(theme => ({
     editIcon: {
         color: '#fff',
     },
-    [theme.breakpoints.down(1000)]: {
-        container: {
-            width: '100%',
-            maxWidth: 'none',
-            minWidth: 'auto',
-        },
-    },
 }));
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts
index ba8d2b5312..f126b830c3 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         borderRadius: '10px',
         backgroundColor: theme.palette.primary.light,
@@ -8,9 +8,7 @@ export const useStyles = makeStyles(theme => ({
         flexDirection: 'column',
         marginRight: '1rem',
         marginTop: '1rem',
-    },
-    [theme.breakpoints.down(800)]: {
-        container: {
+        [theme.breakpoints.down(800)]: {
             width: '100%',
             maxWidth: 'none',
         },
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
index 5b2b023249..16f30a1c2c 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewMetaData/FeatureOverviewTags/FeatureOverviewTags.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useState } from 'react';
-import { Chip } from '@material-ui/core';
-import { Close, Label } from '@material-ui/icons';
+import { Chip } from '@mui/material';
+import { Close, Label } from '@mui/icons-material';
 import { useParams } from 'react-router-dom';
 import useTags from 'hooks/api/getters/useTags/useTags';
 import { IFeatureViewParams } from 'interfaces/params';
@@ -32,7 +32,7 @@ const FeatureOverviewTags: React.FC<IFeatureOverviewTagsProps> = ({
         value: '',
         type: '',
     });
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { featureId } = useParams<IFeatureViewParams>();
     const { tags, refetch } = useTags(featureId);
     const { tagTypes } = useTagTypes();
@@ -138,7 +138,7 @@ const FeatureOverviewTags: React.FC<IFeatureOverviewTagsProps> = ({
                     title="Are you sure you want to delete this tag?"
                 />
 
-                <div className={styles.tagContent}>
+                <div>
                     <ConditionallyRender
                         condition={tags.length > 0}
                         show={tags.map(renderTag)}
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts
index 24f1ce2b05..9c80cb3bf1 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         width: '100%',
         padding: '1rem',
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx
index 821b18ef96..abed942c7d 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/FeatureOverviewSegment/FeatureOverviewSegment.tsx
@@ -11,7 +11,7 @@ interface IFeatureOverviewSegmentProps {
 export const FeatureOverviewSegment = ({
     strategyId,
 }: IFeatureOverviewSegmentProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { segments } = useSegments(strategyId);
 
     if (!segments || segments.length === 0) {
diff --git a/frontend/src/component/feature/FeatureView/FeatureOverview/StaleDialog/StaleDialog.tsx b/frontend/src/component/feature/FeatureView/FeatureOverview/StaleDialog/StaleDialog.tsx
index db25ff16fc..ef3f8c9f22 100644
--- a/frontend/src/component/feature/FeatureView/FeatureOverview/StaleDialog/StaleDialog.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureOverview/StaleDialog/StaleDialog.tsx
@@ -1,7 +1,7 @@
 import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import { useParams } from 'react-router-dom';
 import { IFeatureViewParams } from 'interfaces/params';
-import { DialogContentText } from '@material-ui/core';
+import { DialogContentText } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts
index 6c98fb1c26..6413100062 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     innerContainer: {
         display: 'flex',
     },
@@ -11,7 +11,7 @@ export const useStyles = makeStyles(theme => ({
         width: '20%',
         borderRight: `1px solid ${theme.palette.grey[300]}`,
         padding: '1rem 0',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             width: '35%',
         },
     },
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx
index caa6cf9fa8..f0b1caba9b 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettings.tsx
@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import PageContent from 'component/common/PageContent';
 import { useStyles } from './FeatureSettings.styles';
-import { List, ListItem } from '@material-ui/core';
+import { List, ListItem } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import FeatureSettingsProject from './FeatureSettingsProject/FeatureSettingsProject';
 import { useParams } from 'react-router-dom';
@@ -12,7 +12,7 @@ const METADATA = 'metadata';
 const PROJECT = 'project';
 
 export const FeatureSettings = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const [settings, setSettings] = useState(METADATA);
 
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts
index 100682cc8a..3b2247ce0d 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.style.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         alignItems: 'center',
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
index 4103e857d1..8ad007caca 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsInformation/FeatureSettingsInformation.tsx
@@ -1,5 +1,5 @@
-import { Typography } from '@material-ui/core';
-import { Edit } from '@material-ui/icons';
+import { Typography } from '@mui/material';
+import { Edit } from '@mui/icons-material';
 import { useHistory } from 'react-router-dom';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
@@ -15,7 +15,7 @@ export const FeatureSettingsInformation = ({
     projectId,
     featureId,
 }: IFeatureSettingsInformationProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { feature } = useFeature(projectId, featureId);
     const history = useHistory();
 
@@ -45,7 +45,7 @@ export const FeatureSettingsInformation = ({
             <Typography>
                 Description:{' '}
                 <strong>
-                    {feature.description.length === 0
+                    {!feature.description?.length
                         ? 'no description'
                         : feature.description}
                 </strong>
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureSettingsMetadata.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureSettingsMetadata.tsx
index c07bb0cf82..b2ffa6859a 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureSettingsMetadata.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsMetadata/FeatureSettingsMetadata.tsx
@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 import * as jsonpatch from 'fast-json-patch';
-import { TextField } from '@material-ui/core';
+import { TextField } from '@mui/material';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
 import FeatureTypeSelect from './FeatureTypeSelect/FeatureTypeSelect';
 import { useParams } from 'react-router';
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts
index 521a39c3c9..24d24e3ba9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     compatability: {
         padding: '1rem',
         border: `1px solid ${theme.palette.grey[300]}`,
diff --git a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx
index 807ec510a3..867d3d34e1 100644
--- a/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureSettings/FeatureSettingsProject/FeatureSettingsProjectConfirm/FeatureSettingsProjectConfirm.tsx
@@ -1,5 +1,5 @@
-import { List, ListItem } from '@material-ui/core';
-import { Check, Error, Cloud } from '@material-ui/icons';
+import { List, ListItem } from '@mui/material';
+import { Check, Error, Cloud } from '@mui/icons-material';
 import { useState, useEffect } from 'react';
 import useProject from 'hooks/api/getters/useProject/useProject';
 import { IFeatureEnvironment, IFeatureToggle } from 'interfaces/featureToggle';
@@ -24,7 +24,7 @@ const FeatureSettingsProjectConfirm = ({
 }: IFeatureSettingsProjectConfirm) => {
     const { project } = useProject(projectId);
     const [incompatibleEnvs, setIncompatibleEnvs] = useState([]);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     useEffect(() => {
         calculateCompatability();
diff --git a/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.styles.ts b/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.styles.ts
index c6a3a4a6af..a10d9d5385 100644
--- a/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         width: '42px',
         height: '42px',
diff --git a/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx b/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx
index 894726be3a..e65bde3627 100644
--- a/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureStatus/FeatureStatus.tsx
@@ -1,7 +1,7 @@
 import { useStyles } from './FeatureStatus.styles';
 import TimeAgo from 'react-timeago';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Tooltip, TooltipProps } from '@material-ui/core';
+import { Tooltip, TooltipProps } from '@mui/material';
 import React from 'react';
 
 function generateUnit(unit?: string): string {
@@ -55,7 +55,7 @@ const FeatureStatus = ({
     lastSeenAt,
     tooltipPlacement,
 }: IFeatureStatusProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const Wrapper = (
         props: React.PropsWithChildren<{ color: string; toolTip: string }>
diff --git a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.styles.ts b/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.styles.ts
index ebd7158147..68cada78df 100644
--- a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     icon: {
         color: theme.palette.grey[600],
     },
diff --git a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx b/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx
index ed0b03eadd..eba3f3ceca 100644
--- a/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureType/FeatureType.tsx
@@ -1,5 +1,5 @@
 import { useStyles } from './FeatureType.styles';
-import { Tooltip } from '@material-ui/core';
+import { Tooltip } from '@mui/material';
 import { getFeatureTypeIcons } from 'utils/getFeatureTypeIcons';
 import useFeatureTypes from 'hooks/api/getters/useFeatureTypes/useFeatureTypes';
 
@@ -8,13 +8,12 @@ interface IFeatureTypeProps {
 }
 
 const FeatureStatus = ({ type }: IFeatureTypeProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { featureTypes } = useFeatureTypes();
     const IconComponent = getFeatureTypeIcons(type);
 
     const typeName = featureTypes.filter(t => t.id === type).map(t => t.name);
-
-    const title = `This is a "${typeName || type}" toggle`;
+    const title = `"${typeName || type}" toggle`;
 
     return (
         <Tooltip arrow placement="right" title={title}>
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariants.styles.ts b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariants.styles.ts
index 10dae26fef..fd3ed38125 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariants.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariants.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         borderRadius: '12.5px',
         backgroundColor: '#fff',
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariants.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariants.tsx
index 97cce2b3a4..488783ccb9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariants.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariants.tsx
@@ -3,9 +3,10 @@ import FeatureOverviewVariants from './FeatureVariantsList/FeatureVariantsList';
 import { usePageTitle } from 'hooks/usePageTitle';
 
 const FeatureVariants = () => {
-    const styles = useStyles();
     usePageTitle('Variants');
 
+    const { classes: styles } = useStyles();
+
     return (
         <div className={styles.container}>
             <FeatureOverviewVariants />
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts
index 11a02a30d5..c02a3587c2 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     error: {
         color: theme.palette.error.main,
         fontSize: theme.fontSizes.smallBody,
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
index b7d450d7c0..8a4e9c8e65 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/AddFeatureVariant.tsx
@@ -5,11 +5,11 @@ import {
     FormControlLabel,
     Grid,
     InputAdornment,
-} from '@material-ui/core';
+} from '@mui/material';
 import { weightTypes } from './enums';
 import { OverrideConfig } from './OverrideConfig/OverrideConfig';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import { modalStyles, trim } from 'component/common/util';
 import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch';
@@ -56,12 +56,12 @@ export const AddVariant = ({
     title,
     editing,
 }: IAddVariantProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [data, setData] = useState<Record<string, string>>({});
     const [payload, setPayload] = useState(EMPTY_PAYLOAD);
     const [overrides, overridesDispatch] = useOverrides([]);
     const [error, setError] = useState<Record<string, string>>({});
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
     const { projectId, featureId } = useParams<IFeatureViewParams>();
     const { feature } = useFeature(projectId, featureId);
     const [variants, setVariants] = useState<IFeatureVariant[]>([]);
@@ -230,7 +230,7 @@ export const AddVariant = ({
             <form
                 id={formId}
                 onSubmit={submit}
-                className={commonStyles.contentSpacingY}
+                className={themeStyles.contentSpacingY}
             >
                 <p className={styles.error}>{error.general}</p>
                 <Input
@@ -269,7 +269,7 @@ export const AddVariant = ({
                                                 name="weightType"
                                                 checked={isFixWeight}
                                                 data-testid={
-                                                    'VARIANT_WEIGHT_TYPE'
+                                                    'VARIANT_WEIGHT_CHECK'
                                                 }
                                                 onChange={setVariantWeightType}
                                             />
@@ -336,7 +336,7 @@ export const AddVariant = ({
                             name="variant-payload-value"
                             id="variant-payload-value"
                             label="Value"
-                            className={commonStyles.fullWidth}
+                            className={themeStyles.fullWidth}
                             value={payload.value}
                             onChange={e => onPayload('value')(e.target.value)}
                             data-testid={'VARIANT_PAYLOAD_VALUE'}
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.ts b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.ts
index 089faf0116..7c0281c5db 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     contextFieldSelect: {
         marginRight: '8px',
     },
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx
index 28cf1d5c6e..4144dac7d9 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/AddFeatureVariant/OverrideConfig/OverrideConfig.tsx
@@ -1,11 +1,11 @@
 import { ChangeEvent, VFC } from 'react';
 import classnames from 'classnames';
-import { Grid, IconButton, TextField, Tooltip } from '@material-ui/core';
-import { Delete } from '@material-ui/icons';
+import { Grid, IconButton, TextField, Tooltip } from '@mui/material';
+import { Delete } from '@mui/icons-material';
 import { useStyles } from './OverrideConfig.styles';
-import { Autocomplete } from '@material-ui/lab';
+import { Autocomplete } from '@mui/material';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { InputListField } from 'component/common/InputListField/InputListField';
 import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
@@ -21,8 +21,8 @@ export const OverrideConfig: VFC<IOverrideConfigProps> = ({
     overrides,
     overridesDispatch,
 }) => {
-    const styles = useStyles();
-    const commonStyles = useCommonStyles();
+    const { classes: styles } = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
 
     const { context } = useUnleashContext();
     const contextNames = context.map(({ name }) => ({
@@ -77,7 +77,7 @@ export const OverrideConfig: VFC<IOverrideConfigProps> = ({
                                 value={override.contextName}
                                 options={contextNames}
                                 classes={{
-                                    root: classnames(commonStyles.fullWidth),
+                                    root: classnames(themeStyles.fullWidth),
                                 }}
                                 onChange={(value: string) => {
                                     overridesDispatch({
@@ -96,7 +96,10 @@ export const OverrideConfig: VFC<IOverrideConfigProps> = ({
                                     <Autocomplete
                                         multiple
                                         id={`override-select-${index}`}
-                                        getOptionSelected={(option, value) => {
+                                        isOptionEqualToValue={(
+                                            option,
+                                            value
+                                        ) => {
                                             return option === value;
                                         }}
                                         options={legalValues}
@@ -138,6 +141,7 @@ export const OverrideConfig: VFC<IOverrideConfigProps> = ({
                                             payload: index,
                                         });
                                     }}
+                                    size="large"
                                 >
                                     <Delete />
                                 </IconButton>
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx
index 6efcc5163e..6f7cb3846f 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsList.tsx
@@ -9,7 +9,7 @@ import {
     TableHead,
     TableRow,
     Typography,
-} from '@material-ui/core';
+} from '@mui/material';
 import { AddVariant } from './AddFeatureVariant/AddFeatureVariant';
 
 import { useContext, useEffect, useState } from 'react';
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
index c4d3d48f75..e28ded2b63 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/FeatureVariantsListItem.tsx
@@ -1,11 +1,5 @@
-import {
-    Chip,
-    IconButton,
-    TableCell,
-    TableRow,
-    Tooltip,
-} from '@material-ui/core';
-import { Delete, Edit } from '@material-ui/icons';
+import { Chip, IconButton, TableCell, TableRow, Tooltip } from '@mui/material';
+import { Delete, Edit } from '@mui/icons-material';
 
 import styles from '../variants.module.scss';
 import { IFeatureVariant } from 'interfaces/featureToggle';
@@ -64,6 +58,7 @@ const FeatureVariantListItem = ({
                                 <IconButton
                                     data-testid={'VARIANT_EDIT_BUTTON'}
                                     onClick={() => editVariant(variant.name)}
+                                    size="large"
                                 >
                                     <Edit />
                                 </IconButton>
@@ -78,6 +73,7 @@ const FeatureVariantListItem = ({
                                             name: variant.name,
                                         });
                                     }}
+                                    size="large"
                                 >
                                     <Delete />
                                 </IconButton>
diff --git a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/useDeleteVariantMarkup.tsx b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/useDeleteVariantMarkup.tsx
index f6be6f956d..294546285d 100644
--- a/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/useDeleteVariantMarkup.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureVariants/FeatureVariantsList/FeatureVariantsListItem/useDeleteVariantMarkup.tsx
@@ -1,4 +1,4 @@
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 
 interface IUseDeleteVariantMarkupProps {
diff --git a/frontend/src/component/feature/FeatureView/FeatureView.styles.ts b/frontend/src/component/feature/FeatureView/FeatureView.styles.ts
index 3b59a9fd91..80e0beb266 100644
--- a/frontend/src/component/feature/FeatureView/FeatureView.styles.ts
+++ b/frontend/src/component/feature/FeatureView/FeatureView.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: { borderRadius: '10px', boxShadow: 'none', display: 'flex' },
     header: {
         backgroundColor: '#fff',
@@ -16,6 +16,9 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         justifyContent: 'space-between',
         alignItems: 'center',
+        [theme.breakpoints.down(500)]: {
+            flexDirection: 'column',
+        },
     },
     separator: {
         width: '100%',
@@ -29,6 +32,10 @@ export const useStyles = makeStyles(theme => ({
         textTransform: 'none',
         width: 'auto',
         fontSize: '1rem',
+        padding: '0 !important',
+        [theme.breakpoints.up('md')]: {
+            minWidth: 160,
+        },
     },
     featureViewHeader: {
         fontSize: theme.fontSizes.mainHeader,
@@ -39,9 +46,4 @@ export const useStyles = makeStyles(theme => ({
     statusContainer: {
         marginLeft: '0.5rem',
     },
-    [theme.breakpoints.down(500)]: {
-        innerContainer: {
-            flexDirection: 'column',
-        },
-    },
 }));
diff --git a/frontend/src/component/feature/FeatureView/FeatureView.tsx b/frontend/src/component/feature/FeatureView/FeatureView.tsx
index 476ed3bf85..39585aca34 100644
--- a/frontend/src/component/feature/FeatureView/FeatureView.tsx
+++ b/frontend/src/component/feature/FeatureView/FeatureView.tsx
@@ -1,6 +1,6 @@
-import { Tab, Tabs, useMediaQuery } from '@material-ui/core';
+import { Tab, Tabs, useMediaQuery } from '@mui/material';
 import React, { useState } from 'react';
-import { Archive, FileCopy, Label, WatchLater } from '@material-ui/icons';
+import { Archive, FileCopy, Label, WatchLater } from '@mui/icons-material';
 import { Link, Route, useHistory, useParams, Switch } from 'react-router-dom';
 import useFeatureApi from 'hooks/api/actions/useFeatureApi/useFeatureApi';
 import { useFeature } from 'hooks/api/getters/useFeature/useFeature';
@@ -43,7 +43,7 @@ export const FeatureView = () => {
         featureId
     );
 
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const history = useHistory();
     const ref = useLoading(loading);
 
@@ -131,7 +131,7 @@ export const FeatureView = () => {
                                 />
                             </div>
 
-                            <div className={styles.actions}>
+                            <div>
                                 <PermissionIconButton
                                     permission={CREATE_FEATURE}
                                     projectId={projectId}
@@ -177,7 +177,6 @@ export const FeatureView = () => {
                                 value={activeTab.path}
                                 indicatorColor="primary"
                                 textColor="primary"
-                                className={styles.tabNavigation}
                             >
                                 {renderTabs()}
                             </Tabs>
diff --git a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
index 5efefd91da..82b39f8c7b 100644
--- a/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
+++ b/frontend/src/component/feature/StrategyTypes/FlexibleStrategy/FlexibleStrategy.tsx
@@ -1,4 +1,4 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import { IParameter } from 'interfaces/strategy';
 import RolloutSlider from '../RolloutSlider/RolloutSlider';
 import Select from 'component/common/select';
@@ -30,19 +30,11 @@ const FlexibleStrategy = ({
     context,
     editable = true,
 }: IFlexibleStrategyProps) => {
-    const onUpdate =
-        (field: string) =>
-        (
-            e: React.ChangeEvent<{ name?: string; value: unknown }>,
-            newValue: number
-        ) => {
-            updateParameter(field, newValue);
-        };
+    const onUpdate = (field: string) => (newValue: string) => {
+        updateParameter(field, newValue);
+    };
 
-    const updateRollout = (
-        e: React.ChangeEvent<{}>,
-        value: number | number[]
-    ) => {
+    const updateRollout = (e: Event, value: number | number[]) => {
         updateParameter('rollout', value.toString());
     };
 
@@ -97,9 +89,7 @@ const FlexibleStrategy = ({
                     value={stickiness}
                     disabled={!editable}
                     data-testid={FLEXIBLE_STRATEGY_STICKINESS_ID}
-                    onChange={e =>
-                        onUpdate('stickiness')(e, e.target.value as number)
-                    }
+                    onChange={e => onUpdate('stickiness')(e.target.value)}
                 />
                 &nbsp;
                 <br />
@@ -121,7 +111,7 @@ const FlexibleStrategy = ({
                     id="groupId-input"
                     value={groupId || ''}
                     disabled={!editable}
-                    onChange={e => onUpdate('groupId')(e, e.target.value)}
+                    onChange={e => onUpdate('groupId')(e.target.value)}
                     data-testid={FLEXIBLE_STRATEGY_GROUP_ID}
                 />
             </div>
diff --git a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.styles.ts b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.styles.ts
index 51225ad6c0..8693a7b480 100644
--- a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.styles.ts
+++ b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     helpText: {
         color: 'rgba(0, 0, 0, 0.54)',
         fontSize: theme.fontSizes.smallerBody,
diff --git a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
index 145c7b208e..8972020fe0 100644
--- a/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
+++ b/frontend/src/component/feature/StrategyTypes/GeneralStrategy/GeneralStrategy.tsx
@@ -1,10 +1,5 @@
 import React from 'react';
-import {
-    FormControlLabel,
-    Switch,
-    TextField,
-    Tooltip,
-} from '@material-ui/core';
+import { FormControlLabel, Switch, TextField, Tooltip } from '@mui/material';
 import StrategyInputList from '../StrategyInputList/StrategyInputList';
 import RolloutSlider from '../RolloutSlider/RolloutSlider';
 import { IParameter, IStrategy } from 'interfaces/strategy';
@@ -23,7 +18,7 @@ const GeneralStrategy = ({
     updateParameter,
     editable,
 }: IGeneralStrategyProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const onChangeTextField = (
         field: string,
         evt: React.ChangeEvent<HTMLInputElement>
@@ -34,11 +29,7 @@ const GeneralStrategy = ({
         updateParameter(field, value);
     };
 
-    const onChangePercentage = (
-        field: string,
-        evt: React.ChangeEvent<{}>,
-        newValue: any
-    ) => {
+    const onChangePercentage = (field: string, evt: Event, newValue: any) => {
         evt.preventDefault();
         updateParameter(field, newValue);
     };
diff --git a/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx b/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
index 3ec255a42f..d71d7164b2 100644
--- a/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
+++ b/frontend/src/component/feature/StrategyTypes/RolloutSlider/RolloutSlider.tsx
@@ -1,9 +1,9 @@
-import { makeStyles, withStyles } from '@material-ui/core/styles';
-import { Slider, Typography } from '@material-ui/core';
+import { makeStyles, withStyles } from 'tss-react/mui';
+import { Slider, Typography } from '@mui/material';
 import { ROLLOUT_SLIDER_ID } from 'utils/testIds';
 import React from 'react';
 
-const StyledSlider = withStyles({
+const StyledSlider = withStyles(Slider, theme => ({
     root: {
         height: 8,
     },
@@ -12,13 +12,9 @@ const StyledSlider = withStyles({
         width: 24,
         backgroundColor: '#fff',
         border: '2px solid currentColor',
-        marginTop: -8,
-        marginLeft: -12,
     },
     active: {},
-    valueLabel: {
-        left: 'calc(-50% + 4px)',
-    },
+    valueLabel: {},
     track: {
         height: 8,
         borderRadius: 4,
@@ -27,9 +23,9 @@ const StyledSlider = withStyles({
         height: 8,
         borderRadius: 4,
     },
-})(Slider);
+}));
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
     slider: {
         width: '100%',
         maxWidth: '100%',
@@ -67,7 +63,7 @@ interface IRolloutSliderProps {
     minLabel?: string;
     maxLabel?: string;
     value: number;
-    onChange: (e: React.ChangeEvent<{}>, newValue: number | number[]) => void;
+    onChange: (e: Event, newValue: number | number[]) => void;
     disabled?: boolean;
 }
 
@@ -77,7 +73,7 @@ const RolloutSlider = ({
     onChange,
     disabled = false,
 }: IRolloutSliderProps) => {
-    const classes = useStyles();
+    const { classes } = useStyles();
 
     const valuetext = (value: number) => `${value}%`;
 
diff --git a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
index 3492c782d5..27aa56b41e 100644
--- a/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
+++ b/frontend/src/component/feature/StrategyTypes/StrategyInputList/StrategyInputList.tsx
@@ -1,6 +1,6 @@
 import React, { ChangeEvent, useState } from 'react';
-import { Button, Chip, TextField, Typography } from '@material-ui/core';
-import { Add } from '@material-ui/icons';
+import { Button, Chip, TextField, Typography } from '@mui/material';
+import { Add } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { ADD_TO_STRATEGY_INPUT_LIST, STRATEGY_INPUT_LIST } from 'utils/testIds';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCES.styles.ts b/frontend/src/component/feedback/FeedbackCES/FeedbackCES.styles.ts
index d8921675f3..fe7670afbc 100644
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCES.styles.ts
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCES.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     overlay: {
         pointerEvents: 'none',
         display: 'grid',
@@ -18,7 +18,7 @@ export const useStyles = makeStyles(theme => ({
         background: 'white',
         boxShadow: '0 0 1rem rgba(0, 0, 0, 0.25)',
         borderRadius: '1rem',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             padding: '2rem',
         },
     },
diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx b/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx
index b3a1eeb237..0410d50892 100644
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCES.tsx
@@ -1,4 +1,4 @@
-import { Modal } from '@material-ui/core';
+import { Modal } from '@mui/material';
 import React, { useContext } from 'react';
 import {
     feedbackCESContext,
@@ -6,7 +6,7 @@ import {
 } from 'component/feedback/FeedbackCESContext/FeedbackCESContext';
 import { FeedbackCESForm } from 'component/feedback/FeedbackCES/FeedbackCESForm';
 import { useStyles } from 'component/feedback/FeedbackCES/FeedbackCES.styles';
-import { CloseOutlined } from '@material-ui/icons';
+import { CloseOutlined } from '@mui/icons-material';
 
 export interface IFeedbackCESProps {
     state?: IFeedbackCESState;
@@ -14,7 +14,7 @@ export interface IFeedbackCESProps {
 
 export const FeedbackCES = ({ state }: IFeedbackCESProps) => {
     const { hideFeedbackCES } = useContext(feedbackCESContext);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const closeButton = (
         <button className={styles.close} onClick={hideFeedbackCES}>
diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.styles.ts b/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.styles.ts
index 0e10906fcf..6f0092d04a 100644
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.styles.ts
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         fontWeight: theme.fontWeight.thin,
     },
diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.test.tsx b/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.test.tsx
index 551d359d89..145ed250f2 100644
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.test.tsx
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.test.tsx
@@ -1,15 +1,14 @@
-import { ThemeProvider } from '@material-ui/core';
-import renderer from 'react-test-renderer';
 import { FeedbackCESForm } from './FeedbackCESForm';
-import mainTheme from 'themes/mainTheme';
+import { ThemeProvider } from 'themes/ThemeProvider';
+import { render } from 'utils/testRenderer';
 
 test('FeedbackCESForm', () => {
     const onClose = () => {
         throw new Error('Unexpected onClose call.');
     };
 
-    const tree = renderer.create(
-        <ThemeProvider theme={mainTheme}>
+    render(
+        <ThemeProvider>
             <FeedbackCESForm
                 onClose={onClose}
                 state={{ title: 'a', text: 'b', path: '/c' }}
@@ -17,5 +16,5 @@ test('FeedbackCESForm', () => {
         </ThemeProvider>
     );
 
-    expect(tree).toMatchSnapshot();
+    expect(document.body).toMatchSnapshot();
 });
diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.tsx b/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.tsx
index e647f90901..3422428111 100644
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.tsx
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCESForm.tsx
@@ -1,5 +1,5 @@
 import { useStyles } from 'component/feedback/FeedbackCES/FeedbackCESForm.styles';
-import { Button, TextField } from '@material-ui/core';
+import { Button, TextField } from '@mui/material';
 import React, { useState } from 'react';
 import produce from 'immer';
 import useToast from 'hooks/useToast';
@@ -21,7 +21,7 @@ export interface IFeedbackCESForm {
 export const FeedbackCESForm = ({ state, onClose }: IFeedbackCESFormProps) => {
     const [loading, setLoading] = useState(false);
     const { setToastData } = useToast();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const [form, setForm] = useState<Partial<IFeedbackCESForm>>({
         path: state.path,
diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.styles.ts b/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.styles.ts
index fb431e95b0..5b7e64970c 100644
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.styles.ts
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     scoreInput: {
         display: 'flex',
         gap: '1rem',
@@ -11,10 +11,10 @@ export const useStyles = makeStyles(theme => ({
         width: '8rem',
         whiteSpace: 'nowrap',
         color: theme.palette.grey[600],
-        '&:first-child': {
+        '&:first-of-type': {
             textAlign: 'right',
         },
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
     },
diff --git a/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx b/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx
index 57e6ac078d..029be6c28a 100644
--- a/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx
+++ b/frontend/src/component/feedback/FeedbackCES/FeedbackCESScore.tsx
@@ -9,7 +9,7 @@ interface IFeedbackCESScoreProps {
 }
 
 export const FeedbackCESScore = ({ form, setForm }: IFeedbackCESScoreProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const onScoreChange = (event: React.ChangeEvent<HTMLInputElement>) => {
         setForm(
diff --git a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
index 8be1647ba3..2e4373017a 100644
--- a/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
+++ b/frontend/src/component/feedback/FeedbackCES/__snapshots__/FeedbackCESForm.test.tsx.snap
@@ -1,222 +1,191 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`FeedbackCESForm 1`] = `
-<div
-  className="makeStyles-container-1"
->
-  <h1
-    className="makeStyles-title-3"
-  >
-    Please help us improve
-  </h1>
-  <form
-    aria-live="polite"
-    className="makeStyles-form-2"
-    onSubmit={[Function]}
-  >
-    <p
-      className="makeStyles-subtitle-4"
-    >
-      a
-    </p>
+<body>
+  <div>
     <div
-      className="makeStyles-scoreInput-8"
+      class="tss-fdcp7c-container"
     >
-      <span
-        className="makeStyles-scoreHelp-9"
+      <h1
+        class="tss-16bfuiy-title"
       >
-        Very difficult
-      </span>
-      <label
-        className="makeStyles-scoreValue-10"
-      >
-        <input
-          checked={false}
-          name="score"
-          onChange={[Function]}
-          type="radio"
-          value={1}
-        />
-        <span>
-          1
-        </span>
-      </label>
-      <label
-        className="makeStyles-scoreValue-10"
-      >
-        <input
-          checked={false}
-          name="score"
-          onChange={[Function]}
-          type="radio"
-          value={2}
-        />
-        <span>
-          2
-        </span>
-      </label>
-      <label
-        className="makeStyles-scoreValue-10"
-      >
-        <input
-          checked={false}
-          name="score"
-          onChange={[Function]}
-          type="radio"
-          value={3}
-        />
-        <span>
-          3
-        </span>
-      </label>
-      <label
-        className="makeStyles-scoreValue-10"
-      >
-        <input
-          checked={false}
-          name="score"
-          onChange={[Function]}
-          type="radio"
-          value={4}
-        />
-        <span>
-          4
-        </span>
-      </label>
-      <label
-        className="makeStyles-scoreValue-10"
-      >
-        <input
-          checked={false}
-          name="score"
-          onChange={[Function]}
-          type="radio"
-          value={5}
-        />
-        <span>
-          5
-        </span>
-      </label>
-      <label
-        className="makeStyles-scoreValue-10"
-      >
-        <input
-          checked={false}
-          name="score"
-          onChange={[Function]}
-          type="radio"
-          value={6}
-        />
-        <span>
-          6
-        </span>
-      </label>
-      <label
-        className="makeStyles-scoreValue-10"
-      >
-        <input
-          checked={false}
-          name="score"
-          onChange={[Function]}
-          type="radio"
-          value={7}
-        />
-        <span>
-          7
-        </span>
-      </label>
-      <span
-        className="makeStyles-scoreHelp-9"
-      >
-        Very easy
-      </span>
-    </div>
-    <div
-      hidden={true}
-    >
-      <label
-        className="makeStyles-textLabel-5"
-        htmlFor="comment"
-      >
-        b
-      </label>
-      <div
-        className="MuiFormControl-root MuiTextField-root MuiFormControl-fullWidth"
+        Please help us improve
+      </h1>
+      <form
+        aria-live="polite"
+        class="tss-1rgjoiw-form"
       >
+        <p
+          class="tss-mhztvj-subtitle"
+        >
+          a
+        </p>
         <div
-          className="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline MuiOutlinedInput-multiline"
-          onClick={[Function]}
+          class="tss-io6e1g-scoreInput"
         >
-          <textarea
-            aria-invalid={false}
-            autoFocus={false}
-            className="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputMultiline MuiOutlinedInput-inputMultiline"
-            disabled={false}
-            onAnimationStart={[Function]}
-            onBlur={[Function]}
-            onChange={[Function]}
-            onFocus={[Function]}
-            required={false}
-            rows={3}
-            value=""
-          />
-          <fieldset
-            aria-hidden={true}
-            className="PrivateNotchedOutline-root-11 MuiOutlinedInput-notchedOutline"
-            style={
-              Object {
-                "paddingLeft": 8,
-              }
-            }
+          <span
+            class="tss-lys30y-scoreHelp"
           >
-            <legend
-              className="PrivateNotchedOutline-legend-12"
-              style={
-                Object {
-                  "width": 0.01,
-                }
-              }
-            >
-              <span
-                dangerouslySetInnerHTML={
-                  Object {
-                    "__html": "&#8203;",
-                  }
-                }
-              />
-            </legend>
-          </fieldset>
+            Very difficult
+          </span>
+          <label
+            class="tss-mulaxt-scoreValue"
+          >
+            <input
+              name="score"
+              type="radio"
+              value="1"
+            />
+            <span>
+              1
+            </span>
+          </label>
+          <label
+            class="tss-mulaxt-scoreValue"
+          >
+            <input
+              name="score"
+              type="radio"
+              value="2"
+            />
+            <span>
+              2
+            </span>
+          </label>
+          <label
+            class="tss-mulaxt-scoreValue"
+          >
+            <input
+              name="score"
+              type="radio"
+              value="3"
+            />
+            <span>
+              3
+            </span>
+          </label>
+          <label
+            class="tss-mulaxt-scoreValue"
+          >
+            <input
+              name="score"
+              type="radio"
+              value="4"
+            />
+            <span>
+              4
+            </span>
+          </label>
+          <label
+            class="tss-mulaxt-scoreValue"
+          >
+            <input
+              name="score"
+              type="radio"
+              value="5"
+            />
+            <span>
+              5
+            </span>
+          </label>
+          <label
+            class="tss-mulaxt-scoreValue"
+          >
+            <input
+              name="score"
+              type="radio"
+              value="6"
+            />
+            <span>
+              6
+            </span>
+          </label>
+          <label
+            class="tss-mulaxt-scoreValue"
+          >
+            <input
+              name="score"
+              type="radio"
+              value="7"
+            />
+            <span>
+              7
+            </span>
+          </label>
+          <span
+            class="tss-lys30y-scoreHelp"
+          >
+            Very easy
+          </span>
         </div>
-      </div>
+        <div
+          hidden=""
+        >
+          <label
+            class="tss-13obo9p-textLabel"
+            for="comment"
+          >
+            b
+          </label>
+          <div
+            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root mui-wb57ya-MuiFormControl-root-MuiTextField-root"
+          >
+            <div
+              class="MuiOutlinedInput-root MuiInputBase-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-multiline mui-opjsp0-MuiInputBase-root-MuiOutlinedInput-root"
+            >
+              <textarea
+                aria-invalid="false"
+                class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputMultiline mui-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input"
+                id="mui-1"
+                rows="3"
+                style="height: 0px; overflow: hidden;"
+              />
+              <textarea
+                aria-hidden="true"
+                class="MuiOutlinedInput-input MuiInputBase-input MuiInputBase-inputMultiline mui-1sqnrkk-MuiInputBase-input-MuiOutlinedInput-input"
+                readonly=""
+                style="visibility: hidden; position: absolute; overflow: hidden; height: 0px; top: 0px; left: 0px; transform: translateZ(0); padding: 0px; width: 100%;"
+                tabindex="-1"
+              />
+              <fieldset
+                aria-hidden="true"
+                class="MuiOutlinedInput-notchedOutline mui-1d3z3hw-MuiOutlinedInput-notchedOutline"
+              >
+                <legend
+                  class="mui-hdw1oc"
+                >
+                  <span
+                    class="notranslate"
+                  >
+                    ​
+                  </span>
+                </legend>
+              </fieldset>
+            </div>
+          </div>
+        </div>
+        <div
+          class="tss-n2ggaa-buttons"
+          hidden=""
+        >
+          <button
+            class="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root Mui-disabled tss-1t8daf-button mui-16l97z4-MuiButtonBase-root-MuiButton-root"
+            disabled=""
+            tabindex="-1"
+            type="submit"
+          >
+            Send feedback
+          </button>
+        </div>
+      </form>
     </div>
     <div
-      className="makeStyles-buttons-6"
-      hidden={true}
-    >
-      <button
-        className="MuiButtonBase-root MuiButton-root MuiButton-contained makeStyles-button-7 MuiButton-containedPrimary Mui-disabled Mui-disabled"
-        disabled={true}
-        onBlur={[Function]}
-        onDragLeave={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        onMouseDown={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        onTouchEnd={[Function]}
-        onTouchMove={[Function]}
-        onTouchStart={[Function]}
-        tabIndex={-1}
-        type="submit"
-      >
-        <span
-          className="MuiButton-label"
-        >
-          Send feedback
-        </span>
-      </button>
-    </div>
-  </form>
-</div>
+      aria-atomic="true"
+      aria-live="polite"
+      class="tss-1cl4o05-container"
+      data-testid="ANNOUNCER_ELEMENT_TEST_ID"
+      role="status"
+    />
+  </div>
+</body>
 `;
diff --git a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts
index 354146029a..06f471c52f 100644
--- a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts
+++ b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     feedback: {
         borderRadius: '12.5px',
         backgroundColor: '#fff',
diff --git a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx
index 80e5cad51b..54e86cf8a9 100644
--- a/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx
+++ b/frontend/src/component/feedback/FeedbackNPS/FeedbackNPS.tsx
@@ -1,12 +1,12 @@
 import { useContext, useState } from 'react';
-import { Button, IconButton, Tooltip } from '@material-ui/core';
+import { Button, IconButton, Tooltip } from '@mui/material';
 import classnames from 'classnames';
-import CloseIcon from '@material-ui/icons/Close';
+import CloseIcon from '@mui/icons-material/Close';
 import { ReactComponent as Logo } from 'assets/icons/logoPlain.svg';
 import { useStyles } from 'component/feedback/FeedbackNPS/FeedbackNPS.styles';
 import AnimateOnMount from 'component/common/AnimateOnMount/AnimateOnMount';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import UIContext from 'contexts/UIContext';
 import {
     PNPS_FEEDBACK_ID,
@@ -24,8 +24,8 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => {
     const { createFeedback, updateFeedback } = useAuthFeedbackApi();
     const { feedback } = useAuthFeedback();
     const [answeredNotNow, setAnsweredNotNow] = useState(false);
-    const styles = useStyles();
-    const commonStyles = useCommonStyles();
+    const { classes: styles } = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
     const feedbackId = PNPS_FEEDBACK_ID;
 
     const onConfirm = async () => {
@@ -61,22 +61,23 @@ export const FeedbackNPS = ({ openUrl }: IFeedbackNPSProps) => {
     return (
         <AnimateOnMount
             mounted={showFeedback}
-            start={commonStyles.fadeInTopStart}
-            enter={commonStyles.fadeInTopEnter}
-            leave={commonStyles.fadeInTopLeave}
+            start={themeStyles.fadeInTopStart}
+            enter={themeStyles.fadeInTopEnter}
+            leave={themeStyles.fadeInTopLeave}
             container={styles.animateContainer}
         >
             <div className={styles.feedback}>
                 <div
                     className={classnames(
                         styles.container,
-                        commonStyles.contentSpacingY
+                        themeStyles.contentSpacingY
                     )}
                 >
                     <Tooltip title="Close">
                         <IconButton
                             className={styles.close}
                             onClick={() => setShowFeedback(false)}
+                            size="large"
                         >
                             <CloseIcon />
                         </IconButton>
diff --git a/frontend/src/component/history/EventLog/EventCard/EventCard.jsx b/frontend/src/component/history/EventLog/EventCard/EventCard.jsx
index 57b0a9c8b7..9a573b33fa 100644
--- a/frontend/src/component/history/EventLog/EventCard/EventCard.jsx
+++ b/frontend/src/component/history/EventLog/EventCard/EventCard.jsx
@@ -4,7 +4,7 @@ import { useStyles } from './EventCard.styles';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 const EventCard = ({ entry, timeFormatted }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div>
diff --git a/frontend/src/component/history/EventLog/EventCard/EventCard.styles.ts b/frontend/src/component/history/EventLog/EventCard/EventCard.styles.ts
index 21f0dbfafc..1ab5974ae0 100644
--- a/frontend/src/component/history/EventLog/EventCard/EventCard.styles.ts
+++ b/frontend/src/component/history/EventLog/EventCard/EventCard.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles({
+export const useStyles = makeStyles()({
     eventLogHeader: {
         minWidth: '110px',
     },
diff --git a/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx b/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx
index 15dcb714a3..185d247efb 100644
--- a/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx
+++ b/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.jsx
@@ -11,7 +11,7 @@ const DIFF_PREFIXES = {
 };
 
 const EventDiff = ({ entry }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const KLASSES = {
         A: styles.blue, // array edited
diff --git a/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.ts b/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.ts
index 4c3faddf83..e4a6ff2dba 100644
--- a/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.ts
+++ b/frontend/src/component/history/EventLog/EventCard/EventDiff/EventDiff.styles.ts
@@ -1,16 +1,13 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     blue: {
-        // @ts-expect-error
-        color: theme.palette.code.edited,
+        color: theme.code.edited,
     },
     negative: {
-        // @ts-expect-error
-        color: theme.palette.code.diffSub,
+        color: theme.code.diffSub,
     },
     positive: {
-        // @ts-expect-error
-        color: theme.palette.code.diffAdd,
+        color: theme.code.diffAdd,
     },
 }));
diff --git a/frontend/src/component/history/EventLog/EventJson/EventJson.jsx b/frontend/src/component/history/EventLog/EventJson/EventJson.jsx
index 27b40b57b8..c545f89c51 100644
--- a/frontend/src/component/history/EventLog/EventJson/EventJson.jsx
+++ b/frontend/src/component/history/EventLog/EventJson/EventJson.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useStyles } from './EventJson.styles';
 
 const EventJson = ({ entry }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const localEventData = JSON.parse(JSON.stringify(entry));
     delete localEventData.description;
diff --git a/frontend/src/component/history/EventLog/EventJson/EventJson.styles.ts b/frontend/src/component/history/EventLog/EventJson/EventJson.styles.ts
index 34c01ea791..a2dd576372 100644
--- a/frontend/src/component/history/EventLog/EventJson/EventJson.styles.ts
+++ b/frontend/src/component/history/EventLog/EventJson/EventJson.styles.ts
@@ -1,11 +1,10 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     historyItem: {
         padding: '5px',
         '&:nth-child(odd)': {
-            // @ts-expect-error
-            backgroundColor: theme.palette.code.background,
+            backgroundColor: theme.code.background,
         },
     },
 }));
diff --git a/frontend/src/component/history/EventLog/EventLog.jsx b/frontend/src/component/history/EventLog/EventLog.jsx
index efe2bd0eff..4a1df97adc 100644
--- a/frontend/src/component/history/EventLog/EventLog.jsx
+++ b/frontend/src/component/history/EventLog/EventLog.jsx
@@ -1,4 +1,4 @@
-import { List, Switch, FormControlLabel } from '@material-ui/core';
+import { List, Switch, FormControlLabel } from '@mui/material';
 import PropTypes from 'prop-types';
 import EventJson from './EventJson/EventJson';
 import PageContent from 'component/common/PageContent/PageContent';
@@ -15,7 +15,7 @@ const EventLog = ({
     locationSettings,
     displayInline,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const toggleShowDiff = () => {
         setEventSettings({ showData: !eventSettings.showData });
     };
diff --git a/frontend/src/component/history/EventLog/EventLog.styles.ts b/frontend/src/component/history/EventLog/EventLog.styles.ts
index 76f2fc82ec..6386eb6a64 100644
--- a/frontend/src/component/history/EventLog/EventLog.styles.ts
+++ b/frontend/src/component/history/EventLog/EventLog.styles.ts
@@ -1,11 +1,11 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     eventEntry: {
-        border: theme.borders.default,
+        border: `1px solid ${theme.palette.grey[100]}`,
         padding: '1rem',
         margin: '1rem 0',
-        borderRadius: theme.borders.radius.main,
+        borderRadius: theme.borderRadius.main,
     },
     history: {
         '& code': {
@@ -13,20 +13,16 @@ export const useStyles = makeStyles(theme => ({
             whiteSpace: 'pre',
             fontFamily: 'monospace',
             lineHeight: '100%',
-            // @ts-expect-error
-            color: theme.palette.code.main,
+            color: theme.code.main,
         },
         '& code > .diff-N': {
-            // @ts-expect-error
-            color: theme.palette.code.diffAdd,
+            color: theme.code.diffAdd,
         },
         '& code > .diff-D': {
-            // @ts-expect-error
-            color: theme.palette.code.diffSub,
+            color: theme.code.diffSub,
         },
         '& code > .diff-A, .diff-E': {
-            // @ts-expect-error
-            color: theme.palette.code.diffNeutral,
+            color: theme.code.diffNeutral,
         },
         '& dl': {
             padding: '0',
diff --git a/frontend/src/component/layout/MainLayout/MainLayout.tsx b/frontend/src/component/layout/MainLayout/MainLayout.tsx
index 73e51b117f..4f78c90970 100644
--- a/frontend/src/component/layout/MainLayout/MainLayout.tsx
+++ b/frontend/src/component/layout/MainLayout/MainLayout.tsx
@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 import classnames from 'classnames';
-import { makeStyles } from '@material-ui/core/styles';
-import { Grid } from '@material-ui/core';
+import { makeStyles } from 'tss-react/mui';
+import { Grid } from '@mui/material';
 import styles from 'component/styles.module.scss';
 import Header from 'component/menu/Header/Header';
 import Footer from 'component/menu/Footer/Footer';
@@ -12,7 +12,7 @@ import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { SkipNavLink } from 'component/common/SkipNav/SkipNavLink';
 import { SkipNavTarget } from 'component/common/SkipNav/SkipNavTarget';
 
-const useStyles = makeStyles(theme => ({
+const useStyles = makeStyles()(theme => ({
     container: {
         height: '100%',
         justifyContent: 'space-between',
@@ -21,7 +21,7 @@ const useStyles = makeStyles(theme => ({
         height: '100%',
         padding: '3.25rem 0',
         position: 'relative',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             padding: '3.25rem 0.75rem',
         },
     },
@@ -32,7 +32,7 @@ interface IMainLayoutProps {
 }
 
 export const MainLayout = ({ children }: IMainLayoutProps) => {
-    const muiStyles = useStyles();
+    const { classes } = useStyles();
     const { uiConfig } = useUiConfig();
 
     return (
@@ -40,11 +40,11 @@ export const MainLayout = ({ children }: IMainLayoutProps) => {
             <SkipNavLink />
             <Header />
             <SkipNavTarget />
-            <Grid container className={muiStyles.container}>
+            <Grid container className={classes.container}>
                 <main className={classnames(styles.contentWrapper)}>
                     <Grid item className={styles.content} xs={12} sm={12}>
                         <div
-                            className={muiStyles.contentContainer}
+                            className={classes.contentContainer}
                             style={{ zIndex: 200 }}
                         >
                             <BreadcrumbNav />
diff --git a/frontend/src/component/menu/Footer/ApiDetails/__snapshots__/ApiDetails.test.tsx.snap b/frontend/src/component/menu/Footer/ApiDetails/__snapshots__/ApiDetails.test.tsx.snap
index 545211aad7..c4c3d28956 100644
--- a/frontend/src/component/menu/Footer/ApiDetails/__snapshots__/ApiDetails.test.tsx.snap
+++ b/frontend/src/component/menu/Footer/ApiDetails/__snapshots__/ApiDetails.test.tsx.snap
@@ -7,7 +7,7 @@ exports[`renders correctly with empty version 1`] = `
       title="API details"
     >
       <h2
-        class="makeStyles-title-1"
+        class="tss-cxwipi-title"
       >
         Unleash 
          
@@ -26,7 +26,7 @@ exports[`renders correctly with empty version 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      class="makeStyles-container-2"
+      class="tss-1cl4o05-container"
       data-testid="ANNOUNCER_ELEMENT_TEST_ID"
       role="status"
     />
@@ -41,7 +41,7 @@ exports[`renders correctly with ui-config 1`] = `
       title="API details"
     >
       <h2
-        class="makeStyles-title-3"
+        class="tss-cxwipi-title"
       >
         Unleash 1.1.0
          
@@ -60,7 +60,7 @@ exports[`renders correctly with ui-config 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      class="makeStyles-container-4"
+      class="tss-1cl4o05-container"
       data-testid="ANNOUNCER_ELEMENT_TEST_ID"
       role="status"
     />
@@ -75,7 +75,7 @@ exports[`renders correctly with versionInfo 1`] = `
       title="API details"
     >
       <h2
-        class="makeStyles-title-7"
+        class="tss-cxwipi-title"
       >
         Unleash 1.2.3
          
@@ -94,7 +94,7 @@ exports[`renders correctly with versionInfo 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      class="makeStyles-container-8"
+      class="tss-1cl4o05-container"
       data-testid="ANNOUNCER_ELEMENT_TEST_ID"
       role="status"
     />
@@ -109,7 +109,7 @@ exports[`renders correctly without uiConfig 1`] = `
       title="API details"
     >
       <h2
-        class="makeStyles-title-5"
+        class="tss-cxwipi-title"
       >
         Unleash 1.1.0
          
@@ -121,7 +121,7 @@ exports[`renders correctly without uiConfig 1`] = `
     <div
       aria-atomic="true"
       aria-live="polite"
-      class="makeStyles-container-6"
+      class="tss-1cl4o05-container"
       data-testid="ANNOUNCER_ELEMENT_TEST_ID"
       role="status"
     />
diff --git a/frontend/src/component/menu/Footer/Footer.styles.ts b/frontend/src/component/menu/Footer/Footer.styles.ts
index c67ee3ac8a..a77511ef13 100644
--- a/frontend/src/component/menu/Footer/Footer.styles.ts
+++ b/frontend/src/component/menu/Footer/Footer.styles.ts
@@ -1,9 +1,8 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     footer: {
-        // @ts-expect-error
-        background: theme.palette.footer.background,
+        background: 'white',
         padding: '2rem 4rem',
         width: '100%',
         flexGrow: 1,
@@ -18,7 +17,6 @@ export const useStyles = makeStyles(theme => ({
         margin: 0,
         '& a': {
             textDecoration: 'none',
-            // @ts-expect-error
             color: theme.palette.footer.main,
         },
     },
diff --git a/frontend/src/component/menu/Footer/Footer.test.tsx b/frontend/src/component/menu/Footer/Footer.test.tsx
index 87e0bc4b1a..f42b0d494b 100644
--- a/frontend/src/component/menu/Footer/Footer.test.tsx
+++ b/frontend/src/component/menu/Footer/Footer.test.tsx
@@ -1,14 +1,12 @@
 import React from 'react';
 import renderer from 'react-test-renderer';
 import { MemoryRouter } from 'react-router-dom';
-import { ThemeProvider } from '@material-ui/core';
-
 import Footer from './Footer';
-import theme from 'themes/mainTheme';
+import { ThemeProvider } from 'themes/ThemeProvider';
 
 test('should render DrawerMenu', () => {
     const tree = renderer.create(
-        <ThemeProvider theme={theme}>
+        <ThemeProvider>
             <MemoryRouter>
                 <Footer />
             </MemoryRouter>
@@ -20,7 +18,7 @@ test('should render DrawerMenu', () => {
 
 test('should render DrawerMenu with "features" selected', () => {
     const tree = renderer.create(
-        <ThemeProvider theme={theme}>
+        <ThemeProvider>
             <MemoryRouter initialEntries={['/features']}>
                 <Footer />
             </MemoryRouter>
diff --git a/frontend/src/component/menu/Footer/Footer.tsx b/frontend/src/component/menu/Footer/Footer.tsx
index 8c7f849230..2fed152523 100644
--- a/frontend/src/component/menu/Footer/Footer.tsx
+++ b/frontend/src/component/menu/Footer/Footer.tsx
@@ -1,14 +1,14 @@
 /* eslint-disable react/jsx-no-target-blank */
 
 import { VFC } from 'react';
-import { List, ListItem, ListItemText, Grid } from '@material-ui/core';
+import { List, ListItem, ListItemText, Grid } from '@mui/material';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { ApiDetails } from './ApiDetails/ApiDetails';
 import { useStyles } from './Footer.styles';
 import { FooterTitle } from './FooterTitle';
 
 export const Footer: VFC = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { uiConfig } = useUiConfig();
 
     return (
diff --git a/frontend/src/component/menu/Footer/FooterTitle.styles.ts b/frontend/src/component/menu/Footer/FooterTitle.styles.ts
index 7cf14bad6e..b67cf10a2a 100644
--- a/frontend/src/component/menu/Footer/FooterTitle.styles.ts
+++ b/frontend/src/component/menu/Footer/FooterTitle.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     title: {
         all: 'unset',
         display: 'block',
diff --git a/frontend/src/component/menu/Footer/FooterTitle.tsx b/frontend/src/component/menu/Footer/FooterTitle.tsx
index d82ebfe843..c8b25f9ac1 100644
--- a/frontend/src/component/menu/Footer/FooterTitle.tsx
+++ b/frontend/src/component/menu/Footer/FooterTitle.tsx
@@ -6,7 +6,7 @@ interface IFooterTitleProps {
 }
 
 export const FooterTitle = ({ children }: IFooterTitleProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return <h2 className={styles.title}>{children}</h2>;
 };
diff --git a/frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap b/frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap
index 35ccdc4e26..5257c59ee1 100644
--- a/frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap
+++ b/frontend/src/component/menu/Footer/__snapshots__/Footer.test.tsx.snap
@@ -2,10 +2,10 @@
 
 exports[`should render DrawerMenu 1`] = `
 <footer
-  className="makeStyles-footer-1"
+  className="tss-1bvpe5r-footer"
 >
   <div
-    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10 MuiGrid-justify-content-xs-center"
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10 mui-16chest-MuiGrid-root"
     style={
       Object {
         "marginBottom": 0,
@@ -13,13 +13,13 @@ exports[`should render DrawerMenu 1`] = `
     }
   >
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 mui-1lj5egr-MuiGrid-root"
     >
       <section
         title="API details"
       >
         <h2
-          className="makeStyles-title-4"
+          className="tss-cxwipi-title"
         >
           Unleash 3.x
            
@@ -32,34 +32,34 @@ exports[`should render DrawerMenu 1`] = `
       </section>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto mui-lvo4zz-MuiGrid-root"
     >
       <div
-        className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-7"
+        className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-7 mui-3f6ufr-MuiGrid-root"
       >
         <div
-          className="MuiGrid-root MuiGrid-item"
+          className="MuiGrid-root MuiGrid-item mui-13i4rnv-MuiGrid-root"
         >
           <section
             title="Unleash SDK"
           >
             <h2
-              className="makeStyles-title-4"
+              className="tss-cxwipi-title"
             >
               Server SDKs
             </h2>
             <ul
-              className="MuiList-root makeStyles-list-2 MuiList-dense MuiList-padding"
+              className="MuiList-root MuiList-padding MuiList-dense tss-11htu0j-list mui-h4y409-MuiList-root"
             >
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/node_sdk"
@@ -71,14 +71,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/java_sdk"
@@ -90,14 +90,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/go_sdk"
@@ -110,14 +110,14 @@ exports[`should render DrawerMenu 1`] = `
               </li>
                
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/ruby_sdk"
@@ -130,14 +130,14 @@ exports[`should render DrawerMenu 1`] = `
               </li>
                
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/python_sdk"
@@ -149,14 +149,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/dot_net_sdk"
@@ -168,14 +168,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/php_sdk"
@@ -187,14 +187,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks"
@@ -209,28 +209,28 @@ exports[`should render DrawerMenu 1`] = `
           </section>
         </div>
         <div
-          className="MuiGrid-root MuiGrid-item"
+          className="MuiGrid-root MuiGrid-item mui-13i4rnv-MuiGrid-root"
         >
           <section
             title="Unleash SDK"
           >
             <h2
-              className="makeStyles-title-4"
+              className="tss-cxwipi-title"
             >
               Frontend SDKs
             </h2>
             <ul
-              className="MuiList-root makeStyles-list-2 MuiList-dense MuiList-padding"
+              className="MuiList-root MuiList-padding MuiList-dense tss-11htu0j-list mui-h4y409-MuiList-root"
             >
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/unleash-proxy"
@@ -242,14 +242,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/proxy-javascript"
@@ -261,14 +261,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/proxy-react"
@@ -280,14 +280,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/proxy-ios"
@@ -299,14 +299,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/android_proxy_sdk"
@@ -321,26 +321,26 @@ exports[`should render DrawerMenu 1`] = `
           </section>
         </div>
         <div
-          className="MuiGrid-root MuiGrid-item"
+          className="MuiGrid-root MuiGrid-item mui-13i4rnv-MuiGrid-root"
         >
           <section>
             <h2
-              className="makeStyles-title-4"
+              className="tss-cxwipi-title"
             >
               About
             </h2>
             <ul
-              className="MuiList-root makeStyles-list-2 MuiList-dense MuiList-padding"
+              className="MuiList-root MuiList-padding MuiList-dense tss-11htu0j-list mui-h4y409-MuiList-root"
             >
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://www.getunleash.io/"
@@ -352,14 +352,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://twitter.com/getunleash"
@@ -371,14 +371,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://www.linkedin.com/company/getunleash"
@@ -390,14 +390,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://github.com/Unleash/unleash"
@@ -409,14 +409,14 @@ exports[`should render DrawerMenu 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://slack.unleash.run"
@@ -438,10 +438,10 @@ exports[`should render DrawerMenu 1`] = `
 
 exports[`should render DrawerMenu with "features" selected 1`] = `
 <footer
-  className="makeStyles-footer-1"
+  className="tss-1bvpe5r-footer"
 >
   <div
-    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10 MuiGrid-justify-content-xs-center"
+    className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-10 mui-16chest-MuiGrid-root"
     style={
       Object {
         "marginBottom": 0,
@@ -449,13 +449,13 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
     }
   >
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-4 mui-1lj5egr-MuiGrid-root"
     >
       <section
         title="API details"
       >
         <h2
-          className="makeStyles-title-4"
+          className="tss-cxwipi-title"
         >
           Unleash 3.x
            
@@ -468,34 +468,34 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
       </section>
     </div>
     <div
-      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto"
+      className="MuiGrid-root MuiGrid-item MuiGrid-grid-xs-12 MuiGrid-grid-md-auto mui-lvo4zz-MuiGrid-root"
     >
       <div
-        className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-7"
+        className="MuiGrid-root MuiGrid-container MuiGrid-spacing-xs-7 mui-3f6ufr-MuiGrid-root"
       >
         <div
-          className="MuiGrid-root MuiGrid-item"
+          className="MuiGrid-root MuiGrid-item mui-13i4rnv-MuiGrid-root"
         >
           <section
             title="Unleash SDK"
           >
             <h2
-              className="makeStyles-title-4"
+              className="tss-cxwipi-title"
             >
               Server SDKs
             </h2>
             <ul
-              className="MuiList-root makeStyles-list-2 MuiList-dense MuiList-padding"
+              className="MuiList-root MuiList-padding MuiList-dense tss-11htu0j-list mui-h4y409-MuiList-root"
             >
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/node_sdk"
@@ -507,14 +507,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/java_sdk"
@@ -526,14 +526,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/go_sdk"
@@ -546,14 +546,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
               </li>
                
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/ruby_sdk"
@@ -566,14 +566,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
               </li>
                
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/python_sdk"
@@ -585,14 +585,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/dot_net_sdk"
@@ -604,14 +604,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/php_sdk"
@@ -623,14 +623,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks"
@@ -645,28 +645,28 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
           </section>
         </div>
         <div
-          className="MuiGrid-root MuiGrid-item"
+          className="MuiGrid-root MuiGrid-item mui-13i4rnv-MuiGrid-root"
         >
           <section
             title="Unleash SDK"
           >
             <h2
-              className="makeStyles-title-4"
+              className="tss-cxwipi-title"
             >
               Frontend SDKs
             </h2>
             <ul
-              className="MuiList-root makeStyles-list-2 MuiList-dense MuiList-padding"
+              className="MuiList-root MuiList-padding MuiList-dense tss-11htu0j-list mui-h4y409-MuiList-root"
             >
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/unleash-proxy"
@@ -678,14 +678,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/proxy-javascript"
@@ -697,14 +697,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/proxy-react"
@@ -716,14 +716,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/proxy-ios"
@@ -735,14 +735,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://docs.getunleash.io/sdks/android_proxy_sdk"
@@ -757,26 +757,26 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
           </section>
         </div>
         <div
-          className="MuiGrid-root MuiGrid-item"
+          className="MuiGrid-root MuiGrid-item mui-13i4rnv-MuiGrid-root"
         >
           <section>
             <h2
-              className="makeStyles-title-4"
+              className="tss-cxwipi-title"
             >
               About
             </h2>
             <ul
-              className="MuiList-root makeStyles-list-2 MuiList-dense MuiList-padding"
+              className="MuiList-root MuiList-padding MuiList-dense tss-11htu0j-list mui-h4y409-MuiList-root"
             >
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://www.getunleash.io/"
@@ -788,14 +788,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://twitter.com/getunleash"
@@ -807,14 +807,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://www.linkedin.com/company/getunleash"
@@ -826,14 +826,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://github.com/Unleash/unleash"
@@ -845,14 +845,14 @@ exports[`should render DrawerMenu with "features" selected 1`] = `
                 </div>
               </li>
               <li
-                className="MuiListItem-root makeStyles-listItem-3 MuiListItem-dense MuiListItem-gutters"
+                className="MuiListItem-root MuiListItem-dense MuiListItem-gutters MuiListItem-padding tss-1xj02bu-listItem mui-1vgy6yu-MuiListItem-root"
                 disabled={false}
               >
                 <div
-                  className="MuiListItemText-root MuiListItemText-dense"
+                  className="MuiListItemText-root MuiListItemText-dense mui-tlelie-MuiListItemText-root"
                 >
                   <span
-                    className="MuiTypography-root MuiListItemText-primary MuiTypography-body2 MuiTypography-displayBlock"
+                    className="MuiTypography-root MuiTypography-body2 MuiListItemText-primary mui-1nhzl8d-MuiTypography-root"
                   >
                     <a
                       href="https://slack.unleash.run"
diff --git a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx
index e5d0f620dc..581a4c9721 100644
--- a/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx
+++ b/frontend/src/component/menu/Header/DrawerMenu/DrawerMenu.tsx
@@ -1,9 +1,9 @@
 import React, { ReactNode, VFC } from 'react';
 import { Link } from 'react-router-dom';
-import { Divider, Drawer, List } from '@material-ui/core';
-import GitHubIcon from '@material-ui/icons/GitHub';
-import LibraryBooksIcon from '@material-ui/icons/LibraryBooks';
-import ExitToApp from '@material-ui/icons/ExitToApp';
+import { Divider, Drawer, List } from '@mui/material';
+import GitHubIcon from '@mui/icons-material/GitHub';
+import LibraryBooksIcon from '@mui/icons-material/LibraryBooks';
+import ExitToApp from '@mui/icons-material/ExitToApp';
 import { ReactComponent as LogoIcon } from 'assets/icons/logoBg.svg';
 import NavigationLink from '../NavigationLink/NavigationLink';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
diff --git a/frontend/src/component/menu/Header/Header.styles.ts b/frontend/src/component/menu/Header/Header.styles.ts
index 4959b6453c..2a1be28604 100644
--- a/frontend/src/component/menu/Header/Header.styles.ts
+++ b/frontend/src/component/menu/Header/Header.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     header: {
         backgroundColor: '#fff',
         color: '#000',
@@ -24,7 +24,8 @@ export const useStyles = makeStyles(theme => ({
     container: {
         display: 'flex',
         alignItems: 'center',
-        [theme.breakpoints.down('sm')]: {
+        maxWidth: 1280,
+        [theme.breakpoints.down('md')]: {
             padding: '0',
         },
     },
diff --git a/frontend/src/component/menu/Header/Header.tsx b/frontend/src/component/menu/Header/Header.tsx
index 29de2364d8..ae54800d79 100644
--- a/frontend/src/component/menu/Header/Header.tsx
+++ b/frontend/src/component/menu/Header/Header.tsx
@@ -1,26 +1,27 @@
 import { useEffect, useState, VFC } from 'react';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
-import { useTheme } from '@material-ui/core/styles';
+import useMediaQuery from '@mui/material/useMediaQuery';
+import { useTheme } from '@mui/material/styles';
 import { Link } from 'react-router-dom';
-import { AppBar, Container, IconButton, Tooltip } from '@material-ui/core';
-import MenuIcon from '@material-ui/icons/Menu';
-import SettingsIcon from '@material-ui/icons/Settings';
+import { AppBar, Container, IconButton, Tooltip } from '@mui/material';
+import MenuIcon from '@mui/icons-material/Menu';
+import SettingsIcon from '@mui/icons-material/Settings';
 import UserProfile from 'component/user/UserProfile';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import MenuBookIcon from '@material-ui/icons/MenuBook';
+import MenuBookIcon from '@mui/icons-material/MenuBook';
 import { ReactComponent as UnleashLogo } from 'assets/img/logoDarkWithText.svg';
 
 import { DrawerMenu } from './DrawerMenu/DrawerMenu';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import { IPermission } from 'interfaces/user';
 import { NavigationMenu } from './NavigationMenu/NavigationMenu';
 import { getRoutes } from 'component/menu/routes';
-import { KeyboardArrowDown } from '@material-ui/icons';
+import { KeyboardArrowDown } from '@mui/icons-material';
 import { filterByFlags } from 'component/common/util';
 import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions';
 import { useStyles } from './Header.styles';
+import classNames from 'classnames';
 
 const Header: VFC = () => {
     const theme = useTheme();
@@ -30,12 +31,12 @@ const Header: VFC = () => {
 
     const [admin, setAdmin] = useState(false);
     const { permissions } = useAuthPermissions();
-    const commonStyles = useCommonStyles();
     const {
         uiConfig: { links, name, flags },
     } = useUiConfig();
-    const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
-    const styles = useStyles();
+    const smallScreen = useMediaQuery(theme.breakpoints.down('md'));
+    const { classes: styles } = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
     const [openDrawer, setOpenDrawer] = useState(false);
 
     const toggleDrawer = () => setOpenDrawer(prev => !prev);
@@ -70,6 +71,7 @@ const Header: VFC = () => {
                             onClick={toggleDrawer}
                             aria-controls="header-drawer"
                             aria-expanded={openDrawer}
+                            size="large"
                         >
                             <MenuIcon />
                         </IconButton>
@@ -94,7 +96,14 @@ const Header: VFC = () => {
     return (
         <AppBar className={styles.header} position="static">
             <Container className={styles.container}>
-                <Link to="/" className={commonStyles.flexRow} aria-label="Home">
+                <Link
+                    to="/"
+                    className={classNames(
+                        themeStyles.flexRow,
+                        themeStyles.focusable
+                    )}
+                    aria-label="Home"
+                >
                     <UnleashLogo
                         className={styles.logo}
                         aria-label="Unleash logo"
@@ -102,9 +111,12 @@ const Header: VFC = () => {
                 </Link>
                 <nav className={styles.nav}>
                     <div className={styles.links}>
-                        <Link to="/projects">Projects</Link>
-                        <Link to="/features">Feature toggles</Link>
-
+                        <Link to="/projects" className={themeStyles.focusable}>
+                            Projects
+                        </Link>
+                        <Link to="/features" className={themeStyles.focusable}>
+                            Feature toggles
+                        </Link>
                         <button
                             className={styles.advancedNavButton}
                             onClick={e => setAnchorElAdvanced(e.currentTarget)}
@@ -117,7 +129,7 @@ const Header: VFC = () => {
                             options={filteredMainRoutes.mainNavRoutes}
                             anchorEl={anchorElAdvanced}
                             handleClose={handleCloseAdvanced}
-                            style={{ top: '30px', left: '-55px' }}
+                            style={{ top: 10 }}
                         />
                     </div>
                     <div className={styles.userContainer}>
@@ -126,6 +138,9 @@ const Header: VFC = () => {
                                 href="https://docs.getunleash.io/"
                                 target="_blank"
                                 rel="noopener noreferrer"
+                                size="large"
+                                disableRipple
+                                className={themeStyles.focusable}
                             >
                                 <MenuBookIcon className={styles.icon} />
                             </IconButton>
@@ -138,7 +153,12 @@ const Header: VFC = () => {
                                         onClick={e =>
                                             setAnchorEl(e.currentTarget)
                                         }
-                                        className={styles.wideButton}
+                                        className={classNames(
+                                            styles.wideButton,
+                                            themeStyles.focusable
+                                        )}
+                                        size="large"
+                                        disableRipple
                                     >
                                         <SettingsIcon />
                                         <KeyboardArrowDown
@@ -153,7 +173,7 @@ const Header: VFC = () => {
                             options={filteredMainRoutes.adminRoutes}
                             anchorEl={anchorEl}
                             handleClose={handleClose}
-                            style={{ top: '40px', left: '-125px' }}
+                            style={{ top: 5, left: -100 }}
                         />{' '}
                         <UserProfile />
                     </div>
diff --git a/frontend/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts b/frontend/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts
index 180d5651be..6a2e9b2caf 100644
--- a/frontend/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts
+++ b/frontend/src/component/menu/Header/NavigationLink/NavigationLink.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     menuItem: {
         minWidth: '150px',
         height: '100%',
diff --git a/frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx b/frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx
index 52435c475b..c9ed93d55b 100644
--- a/frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx
+++ b/frontend/src/component/menu/Header/NavigationLink/NavigationLink.tsx
@@ -1,4 +1,4 @@
-import { ListItem, Link } from '@material-ui/core';
+import { ListItem, Link } from '@mui/material';
 import { Link as RouterLink } from 'react-router-dom';
 
 import { useStyles } from './NavigationLink.styles';
@@ -10,7 +10,7 @@ interface INavigationLinkProps {
 }
 
 const NavigationLink = ({ path, text, handleClose }: INavigationLinkProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <ListItem
@@ -24,6 +24,7 @@ const NavigationLink = ({ path, text, handleClose }: INavigationLinkProps) => {
                 component={RouterLink}
                 className={styles.navMenuLink}
                 to={path}
+                underline="hover"
             >
                 <span className={styles.menuItemBox} />
                 {text}
diff --git a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx b/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx
index 1abb7f867b..2c3080e958 100644
--- a/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx
+++ b/frontend/src/component/menu/Header/NavigationMenu/NavigationMenu.tsx
@@ -1,4 +1,4 @@
-import { Menu, MenuItem } from '@material-ui/core';
+import { Menu, MenuItem } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { useStyles } from '../NavigationLink/NavigationLink.styles';
 
@@ -17,7 +17,7 @@ export const NavigationMenu = ({
     anchorEl,
     style,
 }: INavigationMenuProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <Menu
diff --git a/frontend/src/component/project/Project/Project.styles.ts b/frontend/src/component/project/Project/Project.styles.ts
index 70b3461a19..53fb05068e 100644
--- a/frontend/src/component/project/Project/Project.styles.ts
+++ b/frontend/src/component/project/Project/Project.styles.ts
@@ -1,10 +1,10 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     containerStyles: {
         marginTop: '1.5rem',
         display: 'flex',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             flexDirection: 'column',
         },
     },
@@ -31,6 +31,9 @@ export const useStyles = makeStyles(theme => ({
         textTransform: 'none',
         width: 'auto',
         fontSize: '1rem',
+        [theme.breakpoints.up('md')]: {
+            minWidth: 160,
+        },
     },
     title: {
         fontSize: theme.fontSizes.mainHeader,
diff --git a/frontend/src/component/project/Project/Project.tsx b/frontend/src/component/project/Project/Project.tsx
index 31d5b4571a..dd4f4c2c27 100644
--- a/frontend/src/component/project/Project/Project.tsx
+++ b/frontend/src/component/project/Project/Project.tsx
@@ -4,8 +4,8 @@ import useLoading from 'hooks/useLoading';
 import ApiError from 'component/common/ApiError/ApiError';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useStyles } from './Project.styles';
-import { Tab, Tabs } from '@material-ui/core';
-import { Edit } from '@material-ui/icons';
+import { Tab, Tabs } from '@mui/material';
+import { Edit } from '@mui/icons-material';
 import useToast from 'hooks/useToast';
 import useQueryParams from 'hooks/useQueryParams';
 import { useEffect } from 'react';
@@ -23,7 +23,7 @@ const Project = () => {
     const { project, error, loading, refetch } = useProject(id);
     const ref = useLoading(loading);
     const { setToastData } = useToast();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const history = useHistory();
 
     const basePath = `/projects/${id}`;
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
index 76b6c30ac7..ddc9e84ae7 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         boxShadow: 'none',
         marginLeft: '1rem',
@@ -8,7 +8,7 @@ export const useStyles = makeStyles(theme => ({
         width: 'calc(100% - 1rem)',
         position: 'relative',
         paddingBottom: '4rem',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             marginLeft: '0',
             paddingBottom: '4rem',
             width: 'inherit',
diff --git a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
index fe80ae3d79..3a84b279a6 100644
--- a/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
+++ b/frontend/src/component/project/Project/ProjectFeatureToggles/ProjectFeatureToggles.tsx
@@ -1,7 +1,7 @@
 import { useContext, useMemo, useState } from 'react';
-import { IconButton } from '@material-ui/core';
-import { Add } from '@material-ui/icons';
-import FilterListIcon from '@material-ui/icons/FilterList';
+import { IconButton } from '@mui/material';
+import { Add } from '@mui/icons-material';
+import FilterListIcon from '@mui/icons-material/FilterList';
 import { useParams } from 'react-router';
 import { Link, useHistory } from 'react-router-dom';
 import AccessContext from 'contexts/AccessContext';
@@ -28,7 +28,7 @@ export const ProjectFeatureToggles = ({
     features,
     loading,
 }: IProjectFeatureTogglesProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { id } = useParams<{ id: string }>();
     const history = useHistory();
     const { hasAccess } = useContext(AccessContext);
@@ -65,6 +65,7 @@ export const ProjectFeatureToggles = ({
                                     <IconButton
                                         className={styles.iconButton}
                                         data-loading
+                                        size="large"
                                     >
                                         <FilterListIcon
                                             className={styles.icon}
diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts b/frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts
index 900fb2f9f1..841f8b071b 100644
--- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts
+++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     form: {
         display: 'flex',
         flexDirection: 'column',
diff --git a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
index e347196427..08ed486360 100644
--- a/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
+++ b/frontend/src/component/project/Project/ProjectForm/ProjectForm.tsx
@@ -1,5 +1,5 @@
 import Input from 'component/common/Input/Input';
-import { TextField, Button } from '@material-ui/core';
+import { TextField, Button } from '@mui/material';
 import { useStyles } from './ProjectForm.styles';
 import React from 'react';
 import { trim } from 'component/common/util';
@@ -34,7 +34,7 @@ const ProjectForm: React.FC<IProjectForm> = ({
     validateProjectId,
     clearErrors,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <form onSubmit={handleSubmit} className={styles.form}>
diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts
index bddcd25af5..39ad64fc98 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts
+++ b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.styles.ts
@@ -1,13 +1,13 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     projectInfo: {
         width: '225px',
         display: 'flex',
         flexDirection: 'column',
         alignItems: 'center',
         boxShadow: 'none',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             flexDirection: 'row',
             alignItems: 'stretch',
             width: '100%',
@@ -34,7 +34,7 @@ export const useStyles = makeStyles(theme => ({
     },
     projectIcon: {
         margin: '2rem 0',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             margin: '0 0 0.25rem 0',
             width: '53px',
         },
@@ -45,7 +45,7 @@ export const useStyles = makeStyles(theme => ({
     emphazisedText: {
         fontSize: '1.5rem',
         marginBottom: '1rem',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             fontSize: '1rem',
             marginBottom: '2rem',
         },
@@ -58,7 +58,7 @@ export const useStyles = makeStyles(theme => ({
         borderRadius: '10px',
         width: '100%',
         padding: '1.5rem 1rem 1.5rem 1rem',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             margin: '0 0.25rem',
             display: 'flex',
             flexDirection: 'column',
@@ -85,7 +85,7 @@ export const useStyles = makeStyles(theme => ({
     infoLink: {
         textDecoration: 'none',
         color: '#635dc5',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             position: 'absolute',
             bottom: '5px',
         },
@@ -100,7 +100,7 @@ export const useStyles = makeStyles(theme => ({
         justifyContent: 'flex-start',
     },
     linkText: {
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
diff --git a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
index 92491f750d..7cb0f935dd 100644
--- a/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
+++ b/frontend/src/component/project/Project/ProjectInfo/ProjectInfo.tsx
@@ -1,10 +1,10 @@
 import { useStyles } from './ProjectInfo.styles';
 import { Link } from 'react-router-dom';
-import ArrowForwardIcon from '@material-ui/icons/ArrowForward';
+import ArrowForwardIcon from '@mui/icons-material/ArrowForward';
 import classnames from 'classnames';
-import { Edit, ExpandMore } from '@material-ui/icons';
+import { Edit, ExpandMore } from '@mui/icons-material';
 
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import PercentageCircle from 'component/common/PercentageCircle/PercentageCircle';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
@@ -14,7 +14,7 @@ import {
     AccordionActions,
     AccordionDetails,
     AccordionSummary,
-} from '@material-ui/core';
+} from '@mui/material';
 import { UPDATE_PROJECT } from 'component/providers/AccessProvider/permissions';
 
 interface IProjectInfoProps {
@@ -31,8 +31,8 @@ const ProjectInfo = ({
     health,
     description,
 }: IProjectInfoProps) => {
-    const commonStyles = useCommonStyles();
-    const styles = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
+    const { classes: styles } = useStyles();
     const { uiConfig } = useUiConfig();
 
     let link = `/admin/users`;
@@ -138,8 +138,8 @@ const ProjectInfo = ({
                     <Link
                         data-loading
                         className={classnames(
-                            commonStyles.flexRow,
-                            commonStyles.justifyCenter,
+                            themeStyles.flexRow,
+                            themeStyles.justifyCenter,
                             styles.infoLink
                         )}
                         to={`/projects/${id}/health`}
@@ -167,8 +167,8 @@ const ProjectInfo = ({
                     <Link
                         data-loading
                         className={classnames(
-                            commonStyles.flexRow,
-                            commonStyles.justifyCenter,
+                            themeStyles.flexRow,
+                            themeStyles.justifyCenter,
                             styles.infoLink
                         )}
                         to={link}
diff --git a/frontend/src/component/project/Project/ProjectOverview.tsx b/frontend/src/component/project/Project/ProjectOverview.tsx
index 386a73205b..bf60d4b5ed 100644
--- a/frontend/src/component/project/Project/ProjectOverview.tsx
+++ b/frontend/src/component/project/Project/ProjectOverview.tsx
@@ -12,7 +12,7 @@ const ProjectOverview = ({ projectId }: IProjectOverviewProps) => {
         refreshInterval: 10000,
     });
     const { members, features, health, description } = project;
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div>
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccess.styles.ts b/frontend/src/component/project/ProjectAccess/ProjectAccess.styles.ts
index d34ce9b1d1..138514e7eb 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccess.styles.ts
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccess.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     pageContent: {
         minHeight: '200px',
     },
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
index fc6a1bc907..511df7d703 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccess.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable react/jsx-no-target-blank */
 import React, { useState } from 'react';
-import { Alert } from '@material-ui/lab';
+import { Alert, SelectChangeEvent } from '@mui/material';
 import { ProjectAccessAddUser } from './ProjectAccessAddUser/ProjectAccessAddUser';
 import PageContent from 'component/common/PageContent';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
@@ -20,7 +20,7 @@ import { ProjectAccessList } from './ProjectAccessList/ProjectAccessList';
 
 export const ProjectAccess = () => {
     const { id: projectId } = useParams<IProjectViewParams>();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { access, refetchProjectAccess } = useProjectAccess(projectId);
     const { setToastData } = useToast();
     const { isOss } = useUiConfig();
@@ -46,13 +46,7 @@ export const ProjectAccess = () => {
     }
 
     const handleRoleChange =
-        (userId: number) =>
-        async (
-            evt: React.ChangeEvent<{
-                name?: string;
-                value: unknown;
-            }>
-        ) => {
+        (userId: number) => async (evt: SelectChangeEvent) => {
             const roleId = Number(evt.target.value);
             try {
                 await changeUserRole(projectId, roleId, userId);
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessAddUser/ProjectAccessAddUser.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessAddUser/ProjectAccessAddUser.tsx
index 9882d30e72..d491217f48 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessAddUser/ProjectAccessAddUser.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessAddUser/ProjectAccessAddUser.tsx
@@ -5,10 +5,11 @@ import {
     Grid,
     Button,
     InputAdornment,
-} from '@material-ui/core';
-import { Search } from '@material-ui/icons';
-import Autocomplete from '@material-ui/lab/Autocomplete';
-import { Alert } from '@material-ui/lab';
+    SelectChangeEvent,
+} from '@mui/material';
+import { Search } from '@mui/icons-material';
+import Autocomplete from '@mui/material/Autocomplete';
+import { Alert } from '@mui/material';
 import { ProjectRoleSelect } from '../ProjectRoleSelect/ProjectRoleSelect';
 import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
 import { useParams } from 'react-router-dom';
@@ -27,7 +28,7 @@ export const ProjectAccessAddUser = ({ roles }: IProjectAccessAddUserProps) => {
     const { id } = useParams<{ id: string }>();
     const [user, setUser] = useState<IProjectAccessUser | undefined>();
     const [role, setRole] = useState<IProjectRole | undefined>();
-    const [options, setOptions] = useState([]);
+    const [options, setOptions] = useState<IProjectAccessUser[]>([]);
     const [loading, setLoading] = useState(false);
     const { setToastData } = useToast();
     const { refetchProjectAccess, access } = useProjectAccess(id);
@@ -93,12 +94,7 @@ export const ProjectAccessAddUser = ({ roles }: IProjectAccessAddUserProps) => {
         }
     };
 
-    const handleRoleChange = (
-        evt: React.ChangeEvent<{
-            name?: string | undefined;
-            value: unknown;
-        }>
-    ) => {
+    const handleRoleChange = (evt: SelectChangeEvent) => {
         const roleId = Number(evt.target.value);
         const role = roles.find(role => role.id === roleId);
         if (role) {
@@ -146,8 +142,8 @@ export const ProjectAccessAddUser = ({ roles }: IProjectAccessAddUserProps) => {
         }
     };
 
-    const getOptionLabel = (option: IProjectAccessUser) => {
-        if (option) {
+    const getOptionLabel = (option: IProjectAccessUser | string) => {
+        if (option && typeof option !== 'string') {
             return `${option.name || option.username || '(Empty name)'} <${
                 option.email || option.username
             }>`;
@@ -170,7 +166,7 @@ export const ProjectAccessAddUser = ({ roles }: IProjectAccessAddUserProps) => {
                         onBlur={() => handleBlur()}
                         value={user || ''}
                         freeSolo
-                        getOptionSelected={() => true}
+                        isOptionEqualToValue={() => true}
                         filterOptions={o => o}
                         getOptionLabel={getOptionLabel}
                         options={options}
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessList.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessList.tsx
index a28eed95be..4153e7bef9 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessList.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessList.tsx
@@ -1,4 +1,4 @@
-import { List } from '@material-ui/core';
+import { List, SelectChangeEvent } from '@mui/material';
 import {
     IProjectAccessOutput,
     IProjectAccessUser,
@@ -8,12 +8,7 @@ import React from 'react';
 
 interface IProjectAccesListProps {
     page: IProjectAccessUser[];
-    handleRoleChange: (userId: number) => (
-        evt: React.ChangeEvent<{
-            name?: string;
-            value: unknown;
-        }>
-    ) => void;
+    handleRoleChange: (userId: number) => (evt: SelectChangeEvent) => void;
     handleRemoveAccess: (user: IProjectAccessUser) => void;
     access: IProjectAccessOutput;
 }
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.styles.ts b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.styles.ts
index 72f94047e0..1019bf6807 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.styles.ts
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(() => ({
+export const useStyles = makeStyles()(() => ({
     iconButton: {
         marginLeft: '0.5rem',
     },
diff --git a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
index 571a67c3db..a8a5a6608c 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectAccessList/ProjectAccessListItem/ProjectAccessListItem.tsx
@@ -5,8 +5,9 @@ import {
     ListItemSecondaryAction,
     ListItemText,
     MenuItem,
-} from '@material-ui/core';
-import { Delete } from '@material-ui/icons';
+    SelectChangeEvent,
+} from '@mui/material';
+import { Delete } from '@mui/icons-material';
 import { useParams } from 'react-router-dom';
 import {
     IProjectAccessOutput,
@@ -21,12 +22,7 @@ import React from 'react';
 
 interface IProjectAccessListItemProps {
     user: IProjectAccessUser;
-    handleRoleChange: (userId: number) => (
-        evt: React.ChangeEvent<{
-            name?: string;
-            value: unknown;
-        }>
-    ) => void;
+    handleRoleChange: (userId: number) => (evt: SelectChangeEvent) => void;
     handleRemoveAccess: (user: IProjectAccessUser) => void;
     access: IProjectAccessOutput;
 }
@@ -38,7 +34,7 @@ export const ProjectAccessListItem = ({
     handleRemoveAccess,
 }: IProjectAccessListItemProps) => {
     const { id: projectId } = useParams<IProjectViewParams>();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const labelId = `checkbox-list-secondary-label-${user.id}`;
 
diff --git a/frontend/src/component/project/ProjectAccess/ProjectRoleSelect/ProjectRoleSelect.tsx b/frontend/src/component/project/ProjectAccess/ProjectRoleSelect/ProjectRoleSelect.tsx
index ba091df875..a974c05942 100644
--- a/frontend/src/component/project/ProjectAccess/ProjectRoleSelect/ProjectRoleSelect.tsx
+++ b/frontend/src/component/project/ProjectAccess/ProjectRoleSelect/ProjectRoleSelect.tsx
@@ -1,4 +1,10 @@
-import { FormControl, InputLabel, Select, MenuItem } from '@material-ui/core';
+import {
+    FormControl,
+    InputLabel,
+    Select,
+    MenuItem,
+    SelectChangeEvent,
+} from '@mui/material';
 import React from 'react';
 import { IProjectRole } from 'interfaces/role';
 
@@ -9,12 +15,7 @@ interface IProjectRoleSelect {
     labelId: string;
     id: string;
     placeholder?: string;
-    onChange: (
-        evt: React.ChangeEvent<{
-            name?: string | undefined;
-            value: unknown;
-        }>
-    ) => void;
+    onChange: (evt: SelectChangeEvent) => void;
     value: any;
 }
 
@@ -27,7 +28,7 @@ export const ProjectRoleSelect: React.FC<IProjectRoleSelect> = ({
     placeholder,
     children,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <FormControl variant="outlined" size="small">
             <InputLabel
@@ -39,13 +40,13 @@ export const ProjectRoleSelect: React.FC<IProjectRoleSelect> = ({
             <Select
                 labelId={labelId}
                 id={id}
-                classes={{ root: styles.projectRoleSelect }}
+                classes={{ select: styles.projectRoleSelect }}
                 placeholder={placeholder}
                 value={value || ''}
                 onChange={onChange}
                 renderValue={roleId => {
                     const role = roles?.find(role => {
-                        return role.id === roleId;
+                        return String(role.id) === String(roleId);
                     });
                     return role?.name || '';
                 }}
diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts b/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
index e99f586024..dfa0cb67ce 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
+++ b/frontend/src/component/project/ProjectCard/ProjectCard.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     projectCard: {
         padding: '1rem',
         width: '220px',
@@ -11,7 +11,7 @@ export const useStyles = makeStyles(theme => ({
         margin: '0.5rem',
         boxShadow: 'none',
         border: '1px solid #efefef',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             justifyContent: 'center',
         },
     },
diff --git a/frontend/src/component/project/ProjectCard/ProjectCard.tsx b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
index b2e258b4db..066848863d 100644
--- a/frontend/src/component/project/ProjectCard/ProjectCard.tsx
+++ b/frontend/src/component/project/ProjectCard/ProjectCard.tsx
@@ -1,13 +1,13 @@
-import { Card, Menu, MenuItem } from '@material-ui/core';
+import { Card, Menu, MenuItem } from '@mui/material';
 import { useStyles } from './ProjectCard.styles';
-import MoreVertIcon from '@material-ui/icons/MoreVert';
+import MoreVertIcon from '@mui/icons-material/MoreVert';
 import { ReactComponent as ProjectIcon } from 'assets/icons/projectIcon.svg';
 import { useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
 import useProjects from 'hooks/api/getters/useProjects/useProjects';
-import { Delete, Edit } from '@material-ui/icons';
+import { Delete, Edit } from '@mui/icons-material';
 import { getProjectEditPath } from 'utils/routePathHelpers';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
 import useToast from 'hooks/useToast';
@@ -31,7 +31,7 @@ export const ProjectCard = ({
     onHover,
     id,
 }: IProjectCardProps) => {
-    const styles = useStyles();
+    const { classes } = useStyles();
     const { refetch: refetchProjectOverview } = useProjects();
     const [anchorEl, setAnchorEl] = useState(null);
     const [showDelDialog, setShowDelDialog] = useState(false);
@@ -63,14 +63,14 @@ export const ProjectCard = ({
     };
 
     return (
-        <Card className={styles.projectCard} onMouseEnter={onHover}>
-            <div className={styles.header} data-loading>
-                <h2 className={styles.title}>{name}</h2>
+        <Card className={classes.projectCard} onMouseEnter={onHover}>
+            <div className={classes.header} data-loading>
+                <h2 className={classes.title}>{name}</h2>
 
                 <PermissionIconButton
                     permission={UPDATE_PROJECT}
                     projectId={id}
-                    className={styles.actionsBtn}
+                    className={classes.actionsBtn}
                     data-loading
                     onClick={handleClick}
                     tooltip="Options"
@@ -95,7 +95,7 @@ export const ProjectCard = ({
                             history.push(getProjectEditPath(id));
                         }}
                     >
-                        <Edit className={styles.icon} />
+                        <Edit className={classes.icon} />
                         Edit project
                     </MenuItem>
                     <MenuItem
@@ -104,30 +104,30 @@ export const ProjectCard = ({
                             setShowDelDialog(true);
                         }}
                     >
-                        <Delete className={styles.icon} />
+                        <Delete className={classes.icon} />
                         Delete project
                     </MenuItem>
                 </Menu>
             </div>
             <div data-loading>
-                <ProjectIcon className={styles.projectIcon} />
+                <ProjectIcon className={classes.projectIcon} />
             </div>
-            <div className={styles.info}>
-                <div className={styles.infoBox}>
-                    <p className={styles.infoStats} data-loading>
+            <div className={classes.info}>
+                <div className={classes.infoBox}>
+                    <p className={classes.infoStats} data-loading>
                         {featureCount}
                     </p>
                     <p data-loading>toggles</p>
                 </div>
-                <div className={styles.infoBox}>
-                    <p className={styles.infoStats} data-loading>
+                <div className={classes.infoBox}>
+                    <p className={classes.infoStats} data-loading>
                         {health}%
                     </p>
                     <p data-loading>health</p>
                 </div>
 
-                <div className={styles.infoBox}>
-                    <p className={styles.infoStats} data-loading>
+                <div className={classes.infoBox}>
+                    <p className={classes.infoStats} data-loading>
                         {memberCount}
                     </p>
                     <p data-loading>members</p>
diff --git a/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.styles.ts b/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.styles.ts
index bd3b321fc4..75e0fdb3ea 100644
--- a/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.styles.ts
+++ b/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     deleteParagraph: {
         marginTop: '2rem',
     },
diff --git a/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx b/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx
index 400973e9fe..d8ff18cc50 100644
--- a/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx
+++ b/frontend/src/component/project/ProjectEnvironment/EnvironmentDisableConfirm/EnvironmentDisableConfirm.tsx
@@ -1,4 +1,4 @@
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import React from 'react';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
 import Input from 'component/common/Input/Input';
@@ -22,7 +22,7 @@ const EnvironmentDisableConfirm = ({
     confirmName,
     setConfirmName,
 }: IEnvironmentDisableConfirmProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
         setConfirmName(e.currentTarget.value);
diff --git a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.styles.ts b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.styles.ts
index 2b3bfb963e..f57a5da674 100644
--- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.styles.ts
+++ b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.styles.ts
@@ -1,10 +1,10 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         flexWrap: 'wrap',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             justifyContent: 'center',
         },
     },
diff --git a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
index 021a4a54d1..3a2ef41727 100644
--- a/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
+++ b/frontend/src/component/project/ProjectEnvironment/ProjectEnvironment.tsx
@@ -12,16 +12,16 @@ import useToast from 'hooks/useToast';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { useEnvironments } from 'hooks/api/getters/useEnvironments/useEnvironments';
 import useProject from 'hooks/api/getters/useProject/useProject';
-import { FormControlLabel, FormGroup } from '@material-ui/core';
+import { FormControlLabel, FormGroup } from '@mui/material';
 import useProjectApi from 'hooks/api/actions/useProjectApi/useProjectApi';
 import EnvironmentDisableConfirm from './EnvironmentDisableConfirm/EnvironmentDisableConfirm';
 import { Link } from 'react-router-dom';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import PermissionSwitch from 'component/common/PermissionSwitch/PermissionSwitch';
 import { IProjectEnvironment } from 'interfaces/environments';
 import { getEnabledEnvs } from './helpers';
 import StringTruncator from 'component/common/StringTruncator/StringTruncator';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 
 interface IProjectEnvironmentListProps {
     projectId: string;
@@ -39,13 +39,13 @@ const ProjectEnvironmentList = ({
     const { project, refetch: refetchProject } = useProject(projectId);
     const { removeEnvironmentFromProject, addEnvironmentToProject } =
         useProjectApi();
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
 
     // local state
     const [selectedEnv, setSelectedEnv] = useState<IProjectEnvironment>();
     const [confirmName, setConfirmName] = useState('');
     const ref = useLoading(loading);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     useEffect(() => {
         const envs = environments.map(e => ({
@@ -130,7 +130,7 @@ const ProjectEnvironmentList = ({
     };
 
     const genLabel = (env: IProjectEnvironment) => (
-        <div className={commonStyles.flexRow}>
+        <div className={themeStyles.flexRow}>
             <code>
                 <StringTruncator
                     text={env.name}
diff --git a/frontend/src/component/project/ProjectList/ProjectList.styles.ts b/frontend/src/component/project/ProjectList/ProjectList.styles.ts
index 686abb360e..8a2fe5370c 100644
--- a/frontend/src/component/project/ProjectList/ProjectList.styles.ts
+++ b/frontend/src/component/project/ProjectList/ProjectList.styles.ts
@@ -1,10 +1,10 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         flexWrap: 'wrap',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             justifyContent: 'center',
         },
     },
@@ -27,13 +27,13 @@ export const useStyles = makeStyles(theme => ({
         gap: '1rem',
         justifyContent: 'space-between',
         alignItems: 'center',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'block',
         },
     },
     searchBar: {
         minWidth: 450,
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             minWidth: '100%',
         },
     },
diff --git a/frontend/src/component/project/ProjectList/ProjectList.tsx b/frontend/src/component/project/ProjectList/ProjectList.tsx
index 63183f386e..0d0ec3e33a 100644
--- a/frontend/src/component/project/ProjectList/ProjectList.tsx
+++ b/frontend/src/component/project/ProjectList/ProjectList.tsx
@@ -14,7 +14,7 @@ import AccessContext from 'contexts/AccessContext';
 import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
 import ResponsiveButton from 'component/common/ResponsiveButton/ResponsiveButton';
 import { CREATE_PROJECT } from 'component/providers/AccessProvider/permissions';
-import { Add } from '@material-ui/icons';
+import { Add } from '@mui/icons-material';
 import ApiError from 'component/common/ApiError/ApiError';
 import useUiConfig from 'hooks/api/getters/useUiConfig/useUiConfig';
 import { SearchField } from 'component/common/SearchField/SearchField';
@@ -46,7 +46,7 @@ function resolveCreateButtonData(isOss: boolean, hasAccess: boolean) {
 export const ProjectListNew = () => {
     const { hasAccess } = useContext(AccessContext);
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { projects, loading, error, refetch } = useProjects();
     const [fetchedProjects, setFetchedProjects] = useState<projectMap>({});
     const ref = useLoading(loading);
diff --git a/frontend/src/component/providers/AccessProvider/AccessProvider.tsx b/frontend/src/component/providers/AccessProvider/AccessProvider.tsx
index 28b27c7ae4..ea1649e285 100644
--- a/frontend/src/component/providers/AccessProvider/AccessProvider.tsx
+++ b/frontend/src/component/providers/AccessProvider/AccessProvider.tsx
@@ -1,4 +1,4 @@
-import { ReactElement, ReactNode, useCallback, useMemo } from 'react';
+import { ReactElement, ReactNode, useMemo } from 'react';
 import AccessContext, { IAccessContext } from 'contexts/AccessContext';
 import { ADMIN } from './permissions';
 import { IPermission } from 'interfaces/user';
@@ -6,46 +6,29 @@ import { useAuthPermissions } from 'hooks/api/getters/useAuth/useAuthPermissions
 
 interface IAccessProviderProps {
     children: ReactNode;
-    permissions?: IPermission[];
 }
 
-// TODO(olav): Mock useAuth instead of using props.permissions in tests.
-const AccessProvider = (props: IAccessProviderProps): ReactElement => {
-    const auth = useAuthPermissions();
-    const permissions = props.permissions ?? auth.permissions;
-
-    const isAdmin: boolean = useMemo(() => {
-        return checkAdmin(permissions);
-    }, [permissions]);
-
-    const hasAccess = useCallback(
-        (permission: string, project?: string, environment?: string) => {
-            return checkPermissions(
-                permissions,
-                permission,
-                project,
-                environment
-            );
-        },
-        [permissions]
-    );
+export const AccessProvider = ({
+    children,
+}: IAccessProviderProps): ReactElement => {
+    const { permissions } = useAuthPermissions();
 
     const value: IAccessContext = useMemo(
         () => ({
-            isAdmin,
-            hasAccess,
+            isAdmin: checkAdmin(permissions),
+            hasAccess: hasAccess.bind(null, permissions),
         }),
-        [isAdmin, hasAccess]
+        [permissions]
     );
 
     return (
         <AccessContext.Provider value={value}>
-            {props.children}
+            {children}
         </AccessContext.Provider>
     );
 };
 
-const checkAdmin = (permissions: IPermission[] | undefined): boolean => {
+export const checkAdmin = (permissions: IPermission[] | undefined): boolean => {
     if (!permissions) {
         return false;
     }
@@ -55,7 +38,7 @@ const checkAdmin = (permissions: IPermission[] | undefined): boolean => {
     });
 };
 
-const checkPermissions = (
+export const hasAccess = (
     permissions: IPermission[] | undefined,
     permission: string,
     project?: string,
@@ -107,5 +90,3 @@ const checkPermission = (
         p.environment === null
     );
 };
-
-export default AccessProvider;
diff --git a/frontend/src/component/providers/AccessProvider/AccessProviderMock.tsx b/frontend/src/component/providers/AccessProvider/AccessProviderMock.tsx
new file mode 100644
index 0000000000..a639ffe6c2
--- /dev/null
+++ b/frontend/src/component/providers/AccessProvider/AccessProviderMock.tsx
@@ -0,0 +1,31 @@
+import { ReactElement, ReactNode, useMemo } from 'react';
+import AccessContext, { IAccessContext } from 'contexts/AccessContext';
+import { IPermission } from 'interfaces/user';
+import {
+    checkAdmin,
+    hasAccess,
+} from 'component/providers/AccessProvider/AccessProvider';
+
+interface IAccessProviderProps {
+    permissions: IPermission[];
+    children: ReactNode;
+}
+
+export const AccessProviderMock = ({
+    permissions,
+    children,
+}: IAccessProviderProps): ReactElement => {
+    const value: IAccessContext = useMemo(
+        () => ({
+            isAdmin: checkAdmin(permissions),
+            hasAccess: hasAccess.bind(null, permissions),
+        }),
+        [permissions]
+    );
+
+    return (
+        <AccessContext.Provider value={value}>
+            {children}
+        </AccessContext.Provider>
+    );
+};
diff --git a/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.styles.ts b/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.styles.ts
index 3faefca510..42049c7b5b 100644
--- a/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.styles.ts
+++ b/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     deleteParagraph: {
         marginTop: '2rem',
     },
diff --git a/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx b/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx
index eaa29f7af0..d05d54fcc1 100644
--- a/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx
+++ b/frontend/src/component/segments/SegmentDelete/SegmentDeleteConfirm/SegmentDeleteConfirm.tsx
@@ -18,7 +18,7 @@ export const SegmentDeleteConfirm = ({
     setDeldialogue,
     handleDeleteSegment,
 }: ISegmentDeleteConfirmProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [confirmName, setConfirmName] = useState('');
 
     const handleChange = (e: React.ChangeEvent<HTMLInputElement>) =>
diff --git a/frontend/src/component/segments/SegmentDelete/SegmentDeleteUsedSegment/SegmentDeleteUsedSegment.tsx b/frontend/src/component/segments/SegmentDelete/SegmentDeleteUsedSegment/SegmentDeleteUsedSegment.tsx
index af14cbfafd..354ec5a298 100644
--- a/frontend/src/component/segments/SegmentDelete/SegmentDeleteUsedSegment/SegmentDeleteUsedSegment.tsx
+++ b/frontend/src/component/segments/SegmentDelete/SegmentDeleteUsedSegment/SegmentDeleteUsedSegment.tsx
@@ -20,7 +20,7 @@ export const SegmentDeleteUsedSegment = ({
     setDeldialogue,
     strategies,
 }: ISegmentDeleteUsedSegmentProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const handleCancel = () => {
         setDeldialogue(false);
diff --git a/frontend/src/component/segments/SegmentDocs/SegmentDocs.styles.ts b/frontend/src/component/segments/SegmentDocs/SegmentDocs.styles.ts
index 931eee86b6..866b65d299 100644
--- a/frontend/src/component/segments/SegmentDocs/SegmentDocs.styles.ts
+++ b/frontend/src/component/segments/SegmentDocs/SegmentDocs.styles.ts
@@ -1,8 +1,8 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     paragraph: {
-        [theme.breakpoints.down('md')]: {
+        [theme.breakpoints.down('lg')]: {
             display: 'inline',
             '&:after': {
                 content: '" "',
diff --git a/frontend/src/component/segments/SegmentDocs/SegmentDocs.tsx b/frontend/src/component/segments/SegmentDocs/SegmentDocs.tsx
index de281e000d..211a301907 100644
--- a/frontend/src/component/segments/SegmentDocs/SegmentDocs.tsx
+++ b/frontend/src/component/segments/SegmentDocs/SegmentDocs.tsx
@@ -1,4 +1,4 @@
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import { useStyles } from 'component/segments/SegmentDocs/SegmentDocs.styles';
 import {
     STRATEGY_SEGMENTS_LIMIT,
@@ -6,7 +6,7 @@ import {
 } from 'utils/segmentLimits';
 
 export const SegmentDocsWarning = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <Alert severity="warning">
diff --git a/frontend/src/component/segments/SegmentForm/SegmentForm.styles.ts b/frontend/src/component/segments/SegmentForm/SegmentForm.styles.ts
index 9d9a66a241..36079cbe81 100644
--- a/frontend/src/component/segments/SegmentForm/SegmentForm.styles.ts
+++ b/frontend/src/component/segments/SegmentForm/SegmentForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '400px',
     },
diff --git a/frontend/src/component/segments/SegmentForm/SegmentForm.tsx b/frontend/src/component/segments/SegmentForm/SegmentForm.tsx
index 97e5090203..d3f32d6122 100644
--- a/frontend/src/component/segments/SegmentForm/SegmentForm.tsx
+++ b/frontend/src/component/segments/SegmentForm/SegmentForm.tsx
@@ -35,7 +35,7 @@ export const SegmentForm: React.FC<ISegmentProps> = ({
     clearErrors,
     mode,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const totalSteps = 2;
     const [currentStep, setCurrentStep] = useState<SegmentFormStep>(1);
 
diff --git a/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.styles.ts b/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.styles.ts
index d31272e625..aec450382d 100644
--- a/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.styles.ts
+++ b/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.styles.ts
@@ -1,7 +1,7 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 import { formTemplateSidebarWidth } from 'component/common/FormTemplate/FormTemplate.styles';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         position: 'absolute',
diff --git a/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.tsx b/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.tsx
index 7c416be4af..0a2c13b84e 100644
--- a/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.tsx
+++ b/frontend/src/component/segments/SegmentFormStepList/SegmentFormStepList.tsx
@@ -1,4 +1,4 @@
-import { FiberManualRecord } from '@material-ui/icons';
+import { FiberManualRecord } from '@mui/icons-material';
 import { useStyles } from './SegmentFormStepList.styles';
 import React from 'react';
 import classNames from 'classnames';
@@ -12,7 +12,7 @@ export const SegmentFormStepList: React.FC<ISegmentFormStepListProps> = ({
     total,
     current,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     // Create a list with all the step numbers, e.g. [1, 2, 3].
     const steps: number[] = Array.from({ length: total }).map((_, i) => {
diff --git a/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.styles.ts b/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.styles.ts
index 33f994c199..f401325737 100644
--- a/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.styles.ts
+++ b/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '400px',
     },
diff --git a/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.tsx b/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.tsx
index d82811aa66..be83ebe4ea 100644
--- a/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.tsx
+++ b/frontend/src/component/segments/SegmentFormStepOne/SegmentFormStepOne.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import Input from 'component/common/Input/Input';
 import React from 'react';
 import { useHistory } from 'react-router-dom';
@@ -31,7 +31,7 @@ export const SegmentFormStepOne: React.FC<ISegmentFormPartOneProps> = ({
     setCurrentStep,
 }) => {
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div className={styles.form}>
diff --git a/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.styles.ts b/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.styles.ts
index 5bd19d7e9a..b9a95d6d7b 100644
--- a/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.styles.ts
+++ b/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     warning: {
         marginBottom: '1.5rem',
     },
diff --git a/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.tsx b/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.tsx
index 4c72a59a7b..5861693ffd 100644
--- a/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.tsx
+++ b/frontend/src/component/segments/SegmentFormStepTwo/SegmentFormStepTwo.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useState, useContext } from 'react';
-import { Button } from '@material-ui/core';
-import { Add } from '@material-ui/icons';
+import { Button } from '@mui/material';
+import { Add } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import PermissionButton from 'component/common/PermissionButton/PermissionButton';
 import { SidebarModal } from 'component/common/SidebarModal/SidebarModal';
@@ -47,8 +47,8 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
 }) => {
     const constraintsAccordionListRef = useRef<IConstraintAccordionListRef>();
     const history = useHistory();
-    const styles = useStyles();
     const { hasAccess } = useContext(AccessContext);
+    const { classes: styles } = useStyles();
     const { context = [] } = useUnleashContext();
     const [open, setOpen] = useState(false);
     const segmentValuesCount = useSegmentValuesCount(constraints);
diff --git a/frontend/src/component/segments/SegmentList/SegmentList.styles.ts b/frontend/src/component/segments/SegmentList/SegmentList.styles.ts
index f2d69b45bb..c8c50e2644 100644
--- a/frontend/src/component/segments/SegmentList/SegmentList.styles.ts
+++ b/frontend/src/component/segments/SegmentList/SegmentList.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     docs: {
         marginBottom: '2rem',
     },
@@ -43,12 +43,12 @@ export const useStyles = makeStyles(theme => ({
         borderBottomRightRadius: '5px',
     },
     hideSM: {
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
     hideXS: {
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
     },
diff --git a/frontend/src/component/segments/SegmentList/SegmentList.tsx b/frontend/src/component/segments/SegmentList/SegmentList.tsx
index 30d43ce9be..8305cca8b7 100644
--- a/frontend/src/component/segments/SegmentList/SegmentList.tsx
+++ b/frontend/src/component/segments/SegmentList/SegmentList.tsx
@@ -6,7 +6,7 @@ import {
     TableHead,
     TableRow,
     Typography,
-} from '@material-ui/core';
+} from '@mui/material';
 import usePagination from 'hooks/usePagination';
 import { CREATE_SEGMENT } from 'component/providers/AccessProvider/permissions';
 import PaginateUI from 'component/common/PaginateUI/PaginateUI';
@@ -36,7 +36,7 @@ export const SegmentsList = () => {
     const [delDialog, setDelDialog] = useState(false);
     const { setToastData, setToastApiError } = useToast();
 
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const onDeleteSegment = async () => {
         if (!currentSegment?.id) return;
diff --git a/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.styles.ts b/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.styles.ts
index 50f25da905..8cf6a214f6 100644
--- a/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.styles.ts
+++ b/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     tableRow: {
         '&:hover': {
             backgroundColor: theme.palette.grey[200],
@@ -16,12 +16,12 @@ export const useStyles = makeStyles(theme => ({
     descriptionCell: {
         textAlign: 'left',
         maxWidth: '300px',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
     createdAtCell: {
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
         textAlign: 'left',
diff --git a/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx b/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx
index ee71808fe3..b983ba2dce 100644
--- a/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx
+++ b/frontend/src/component/segments/SegmentList/SegmentListItem/SegmentListItem.tsx
@@ -1,6 +1,6 @@
 import { useStyles } from './SegmentListItem.styles';
-import { TableCell, TableRow, Typography } from '@material-ui/core';
-import { Delete, Edit } from '@material-ui/icons';
+import { TableCell, TableRow, Typography } from '@mui/material';
+import { Delete, Edit } from '@mui/icons-material';
 import {
     UPDATE_SEGMENT,
     DELETE_SEGMENT,
@@ -33,7 +33,7 @@ export const SegmentListItem = ({
     setCurrentSegment,
     setDelDialog,
 }: ISegmentListItemProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { push } = useHistory();
 
     return (
diff --git a/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironments.styles.ts b/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironments.styles.ts
index da806c0f01..f433839995 100644
--- a/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironments.styles.ts
+++ b/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironments.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     splashContainer: {
         position: 'fixed',
     },
@@ -8,7 +8,7 @@ export const useStyles = makeStyles(theme => ({
         textAlign: 'center',
         marginBottom: '20px',
         lineHeight: '1.3',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             marginTop: '1rem',
         },
     },
@@ -16,7 +16,7 @@ export const useStyles = makeStyles(theme => ({
         padding: '0px 40px',
         marginBottom: '15px',
         fontSize: '17px',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             padding: '0 20px',
         },
     },
@@ -24,7 +24,7 @@ export const useStyles = makeStyles(theme => ({
         padding: '0px 20px',
         fontSize: '17px',
         marginTop: '15px',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             padding: '0 20px',
         },
     },
@@ -32,7 +32,7 @@ export const useStyles = makeStyles(theme => ({
         fontSize: '150px',
         display: 'block',
         margin: 'auto',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             fontSize: '90px',
         },
     },
@@ -42,7 +42,7 @@ export const useStyles = makeStyles(theme => ({
         display: 'block',
         margin: 'auto',
         marginTop: '2rem',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             width: '80%',
             height: '80%',
             marginTop: '0rem',
diff --git a/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironments.tsx b/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironments.tsx
index 552cbdaff3..4a05fccb92 100644
--- a/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironments.tsx
+++ b/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironments.tsx
@@ -1,13 +1,13 @@
 import { SplashPageEnvironmentsContent } from 'component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent';
 import { SplashPageEnvironmentsContainer } from 'component/splash/SplashPageEnvironments/SplashPageEnvironmentsContainer/SplashPageEnvironmentsContainer';
-import { VpnKey, CloudCircle } from '@material-ui/icons';
+import { VpnKey, CloudCircle } from '@mui/icons-material';
 import { useStyles } from 'component/splash/SplashPageEnvironments/SplashPageEnvironments.styles';
 import { ReactComponent as Logo1 } from 'assets/img/splashEnv1.svg';
 import { ReactComponent as Logo2 } from 'assets/img/splashEnv2.svg';
 import { useHistory } from 'react-router-dom';
 
 export const SplashPageEnvironments = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { push } = useHistory();
 
     const onFinish = () => {
diff --git a/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.styles.ts b/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.styles.ts
index 539536cc30..28a6f953a2 100644
--- a/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.styles.ts
+++ b/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     splashMainContainer: {
         backgroundColor: theme.palette.primary.light,
         width: '100%',
@@ -9,7 +9,7 @@ export const useStyles = makeStyles(theme => ({
         justifyContent: 'center',
         alignItems: 'center',
         padding: '3rem 0',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             padding: '0',
         },
     },
@@ -24,7 +24,7 @@ export const useStyles = makeStyles(theme => ({
         display: 'flex',
         overflowX: 'hidden',
         flexDirection: 'column',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             top: '0px',
             left: '0px',
             right: '0px',
diff --git a/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.tsx b/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.tsx
index a7cc0cb118..548ba78d06 100644
--- a/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.tsx
+++ b/frontend/src/component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.tsx
@@ -1,11 +1,11 @@
 import React, { Fragment, useState } from 'react';
-import { Button, IconButton } from '@material-ui/core';
+import { Button, IconButton } from '@mui/material';
 import { useStyles } from 'component/splash/SplashPageEnvironments/SplashPageEnvironmentsContent/SplashPageEnvironmentsContent.styles';
 import {
     CloseOutlined,
     FiberManualRecord,
     FiberManualRecordOutlined,
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { CLOSE_SPLASH } from 'utils/testIds';
 
@@ -17,7 +17,7 @@ interface ISplashPageEnvironmentsContentProps {
 export const SplashPageEnvironmentsContent: React.FC<
     ISplashPageEnvironmentsContentProps
 > = ({ components, onFinish }: ISplashPageEnvironmentsContentProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [counter, setCounter] = useState(0);
 
     const onNext = () => {
@@ -74,6 +74,7 @@ export const SplashPageEnvironmentsContent: React.FC<
                         className={styles.closeButton}
                         onClick={onClose}
                         data-testid={CLOSE_SPLASH}
+                        size="large"
                     >
                         <CloseOutlined titleAccess="Close" />
                     </IconButton>
diff --git a/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.styles.tsx b/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.styles.tsx
index 404b6a858d..a73dc9fe75 100644
--- a/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.styles.tsx
+++ b/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.styles.tsx
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         backgroundColor: theme.palette.primary.light,
         minHeight: '100vh',
diff --git a/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.tsx b/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.tsx
index 67492ce004..7fe7bf253e 100644
--- a/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.tsx
+++ b/frontend/src/component/splash/SplashPageOperators/SplashPageOperators.tsx
@@ -1,12 +1,12 @@
 import { useStyles } from 'component/splash/SplashPageOperators/SplashPageOperators.styles';
 import { Link, useHistory } from 'react-router-dom';
-import { Button, IconButton } from '@material-ui/core';
-import { CloseOutlined } from '@material-ui/icons';
+import { Button, IconButton } from '@mui/material';
+import { CloseOutlined } from '@mui/icons-material';
 import { OperatorUpgradeAlert } from 'component/common/OperatorUpgradeAlert/OperatorUpgradeAlert';
 
 export const SplashPageOperators = () => {
     const { push } = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <section className={styles.container}>
@@ -16,6 +16,7 @@ export const SplashPageOperators = () => {
                     <IconButton
                         className={styles.close}
                         onClick={() => push('/')}
+                        size="large"
                     >
                         <CloseOutlined titleAccess="Close" />
                     </IconButton>
diff --git a/frontend/src/component/strategies/StrategiesList/StrategiesList.styles.ts b/frontend/src/component/strategies/StrategiesList/StrategiesList.styles.ts
index ff1df27574..e0f73a17e4 100644
--- a/frontend/src/component/strategies/StrategiesList/StrategiesList.styles.ts
+++ b/frontend/src/component/strategies/StrategiesList/StrategiesList.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     listItem: {
         padding: '0',
         ['& a']: {
diff --git a/frontend/src/component/strategies/StrategiesList/StrategiesList.test.tsx b/frontend/src/component/strategies/StrategiesList/StrategiesList.test.tsx
new file mode 100644
index 0000000000..093a0e6437
--- /dev/null
+++ b/frontend/src/component/strategies/StrategiesList/StrategiesList.test.tsx
@@ -0,0 +1,28 @@
+import { MemoryRouter } from 'react-router-dom';
+import { StrategiesList } from './StrategiesList';
+import renderer from 'react-test-renderer';
+import { ADMIN } from 'component/providers/AccessProvider/permissions';
+import UIProvider from 'component/providers/UIProvider/UIProvider';
+import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
+import { ThemeProvider } from 'themes/ThemeProvider';
+import { AccessProviderMock } from 'component/providers/AccessProvider/AccessProviderMock';
+
+test('renders correctly', () => {
+    const tree = renderer.create(
+        <MemoryRouter>
+            <ThemeProvider>
+                <AnnouncerProvider>
+                    <UIProvider>
+                        <AccessProviderMock
+                            permissions={[{ permission: ADMIN }]}
+                        >
+                            <StrategiesList />
+                        </AccessProviderMock>
+                    </UIProvider>
+                </AnnouncerProvider>
+            </ThemeProvider>
+        </MemoryRouter>
+    );
+
+    expect(tree).toMatchSnapshot();
+});
diff --git a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
index 8bfdaf35a3..650da08e5c 100644
--- a/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
+++ b/frontend/src/component/strategies/StrategiesList/StrategiesList.tsx
@@ -1,6 +1,6 @@
 import { useContext, useState } from 'react';
 import { Link, useHistory } from 'react-router-dom';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import {
     IconButton,
     List,
@@ -8,7 +8,7 @@ import {
     ListItemAvatar,
     ListItemText,
     Tooltip,
-} from '@material-ui/core';
+} from '@mui/material';
 import {
     Add,
     Delete,
@@ -16,7 +16,7 @@ import {
     Extension,
     Visibility,
     VisibilityOff,
-} from '@material-ui/icons';
+} from '@mui/icons-material';
 import {
     CREATE_STRATEGY,
     DELETE_STRATEGY,
@@ -46,7 +46,7 @@ interface IDialogueMetaData {
 
 export const StrategiesList = () => {
     const history = useHistory();
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const smallScreen = useMediaQuery('(max-width:700px)');
     const { hasAccess } = useContext(AccessContext);
     const [dialogueMetaData, setDialogueMetaData] = useState<IDialogueMetaData>(
@@ -178,7 +178,7 @@ export const StrategiesList = () => {
             show={
                 <Tooltip title="You cannot deprecate the default strategy">
                     <div>
-                        <IconButton disabled>
+                        <IconButton disabled size="large">
                             <Visibility titleAccess="Deprecate strategy" />
                         </IconButton>
                     </div>
@@ -215,7 +215,7 @@ export const StrategiesList = () => {
             elseShow={
                 <Tooltip title="You cannot delete a built-in strategy">
                     <div>
-                        <IconButton disabled>
+                        <IconButton disabled size="large">
                             <Edit titleAccess="Edit strategy" />
                         </IconButton>
                     </div>
@@ -239,7 +239,7 @@ export const StrategiesList = () => {
             elseShow={
                 <Tooltip title="You cannot delete a built-in strategy">
                     <div>
-                        <IconButton disabled>
+                        <IconButton disabled size="large">
                             <Delete titleAccess="Delete strategy" />
                         </IconButton>
                     </div>
diff --git a/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap b/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap
new file mode 100644
index 0000000000..e57f64bb83
--- /dev/null
+++ b/frontend/src/component/strategies/StrategiesList/__snapshots__/StrategiesList.test.tsx.snap
@@ -0,0 +1,277 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders correctly 1`] = `
+Array [
+  <div
+    className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-1ps6pg7-MuiPaper-root"
+    style={
+      Object {
+        "borderRadius": "10px",
+        "boxShadow": "none",
+      }
+    }
+  >
+    <div
+      className="tss-16iyfoa-headerContainer"
+    >
+      <div
+        className="tss-14s7qul-headerTitleContainer"
+      >
+        <div
+          className=""
+          data-loading={true}
+        >
+          <h1
+            className="MuiTypography-root MuiTypography-h1 tss-whbfmi-headerTitle mui-1inkmva-MuiTypography-root"
+          >
+            Strategies
+          </h1>
+        </div>
+        <div
+          className="tss-ap2nhp-headerActions"
+        >
+          <span
+            id="useId-0"
+          >
+            <button
+              aria-describedby="useId-0"
+              className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-16l97z4-MuiButtonBase-root-MuiButton-root"
+              data-testid="ADD_NEW_STRATEGY_ID"
+              disabled={false}
+              onBlur={[Function]}
+              onClick={[Function]}
+              onContextMenu={[Function]}
+              onDragLeave={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
+              tabIndex={0}
+              type="button"
+            >
+              New strategy
+              <span
+                className="MuiButton-endIcon MuiButton-iconSizeMedium mui-9tj150-MuiButton-endIcon"
+              />
+              <span
+                className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
+              />
+            </button>
+          </span>
+        </div>
+      </div>
+    </div>
+    <div
+      className="tss-kiw3z8-bodyContainer"
+    >
+      <ul
+        className="MuiList-root MuiList-padding mui-h4y409-MuiList-root"
+      >
+        <li
+          className="MuiListItem-root MuiListItem-gutters MuiListItem-padding tss-18csf3q-listItem mui-uz8enf-MuiListItem-root"
+          disabled={false}
+        >
+          <div
+            className="MuiListItemAvatar-root mui-1e9lk82-MuiListItemAvatar-root"
+          >
+            <svg
+              aria-hidden={true}
+              className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
+              data-testid="ExtensionIcon"
+              focusable="false"
+              style={
+                Object {
+                  "color": "#0000008a",
+                }
+              }
+              viewBox="0 0 24 24"
+            >
+              <path
+                d="M20.5 11H19V7c0-1.1-.9-2-2-2h-4V3.5C13 2.12 11.88 1 10.5 1S8 2.12 8 3.5V5H4c-1.1 0-1.99.9-1.99 2v3.8H3.5c1.49 0 2.7 1.21 2.7 2.7s-1.21 2.7-2.7 2.7H2V20c0 1.1.9 2 2 2h3.8v-1.5c0-1.49 1.21-2.7 2.7-2.7 1.49 0 2.7 1.21 2.7 2.7V22H17c1.1 0 2-.9 2-2v-4h1.5c1.38 0 2.5-1.12 2.5-2.5S21.88 11 20.5 11z"
+              />
+            </svg>
+          </div>
+          <div
+            className="MuiListItemText-root MuiListItemText-multiline mui-konndc-MuiListItemText-root"
+          >
+            <span
+              className="MuiTypography-root MuiTypography-body1 MuiListItemText-primary mui-1k7ov6f-MuiTypography-root"
+            >
+              <a
+                href="/strategies/flexibleRollout"
+                onClick={[Function]}
+              >
+                <strong>
+                  Gradual rollout
+                </strong>
+              </a>
+            </span>
+            <p
+              className="MuiTypography-root MuiTypography-body2 MuiListItemText-secondary mui-1yab20-MuiTypography-root"
+            >
+              Roll out to a percentage of your userbase, and ensure that the experience is the same for the user on each visit.
+            </p>
+          </div>
+          <div>
+            <span
+              aria-label="Deprecate strategy"
+              aria-labelledby={null}
+              className=""
+              data-mui-internal-clone-element={true}
+              id="useId-1"
+              onBlur={[Function]}
+              onFocus={[Function]}
+              onMouseLeave={[Function]}
+              onMouseOver={[Function]}
+              onTouchEnd={[Function]}
+              onTouchStart={[Function]}
+            >
+              <button
+                aria-labelledby="useId-1"
+                className="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+                disabled={false}
+                onBlur={[Function]}
+                onClick={[Function]}
+                onContextMenu={[Function]}
+                onDragLeave={[Function]}
+                onFocus={[Function]}
+                onKeyDown={[Function]}
+                onKeyUp={[Function]}
+                onMouseDown={[Function]}
+                onMouseLeave={[Function]}
+                onMouseUp={[Function]}
+                onTouchEnd={[Function]}
+                onTouchMove={[Function]}
+                onTouchStart={[Function]}
+                tabIndex={0}
+                type="button"
+              >
+                <svg
+                  aria-hidden={true}
+                  className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
+                  data-testid="VisibilityIcon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <path
+                    d="M12 4.5C7 4.5 2.73 7.61 1 12c1.73 4.39 6 7.5 11 7.5s9.27-3.11 11-7.5c-1.73-4.39-6-7.5-11-7.5zM12 17c-2.76 0-5-2.24-5-5s2.24-5 5-5 5 2.24 5 5-2.24 5-5 5zm0-8c-1.66 0-3 1.34-3 3s1.34 3 3 3 3-1.34 3-3-1.34-3-3-3z"
+                  />
+                </svg>
+                <span
+                  className="MuiTouchRipple-root mui-8je8zh-MuiTouchRipple-root"
+                />
+              </button>
+            </span>
+          </div>
+          <div
+            aria-label="You cannot delete a built-in strategy"
+            aria-labelledby={null}
+            className=""
+            data-mui-internal-clone-element={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+          >
+            <button
+              className="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+              disabled={true}
+              onBlur={[Function]}
+              onContextMenu={[Function]}
+              onDragLeave={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
+              tabIndex={-1}
+              type="button"
+            >
+              <svg
+                className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
+                data-testid="EditIcon"
+                focusable="false"
+                role="img"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M3 17.25V21h3.75L17.81 9.94l-3.75-3.75L3 17.25zM20.71 7.04c.39-.39.39-1.02 0-1.41l-2.34-2.34a.9959.9959 0 0 0-1.41 0l-1.83 1.83 3.75 3.75 1.83-1.83z"
+                />
+                <title>
+                  Edit strategy
+                </title>
+              </svg>
+            </button>
+          </div>
+          <div
+            aria-label="You cannot delete a built-in strategy"
+            aria-labelledby={null}
+            className=""
+            data-mui-internal-clone-element={true}
+            onBlur={[Function]}
+            onFocus={[Function]}
+            onMouseLeave={[Function]}
+            onMouseOver={[Function]}
+            onTouchEnd={[Function]}
+            onTouchStart={[Function]}
+          >
+            <button
+              className="MuiButtonBase-root Mui-disabled MuiIconButton-root Mui-disabled MuiIconButton-sizeLarge mui-mf1cb5-MuiButtonBase-root-MuiIconButton-root"
+              disabled={true}
+              onBlur={[Function]}
+              onContextMenu={[Function]}
+              onDragLeave={[Function]}
+              onFocus={[Function]}
+              onKeyDown={[Function]}
+              onKeyUp={[Function]}
+              onMouseDown={[Function]}
+              onMouseLeave={[Function]}
+              onMouseUp={[Function]}
+              onTouchEnd={[Function]}
+              onTouchMove={[Function]}
+              onTouchStart={[Function]}
+              tabIndex={-1}
+              type="button"
+            >
+              <svg
+                className="MuiSvgIcon-root MuiSvgIcon-fontSizeMedium mui-i4bv87-MuiSvgIcon-root"
+                data-testid="DeleteIcon"
+                focusable="false"
+                role="img"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"
+                />
+                <title>
+                  Delete strategy
+                </title>
+              </svg>
+            </button>
+          </div>
+        </li>
+      </ul>
+    </div>
+  </div>,
+  <div
+    aria-atomic={true}
+    aria-live="polite"
+    className="tss-1cl4o05-container"
+    data-testid="ANNOUNCER_ELEMENT_TEST_ID"
+    role="status"
+  >
+    Navigated to Strategies
+  </div>,
+]
+`;
diff --git a/frontend/src/component/strategies/StrategyForm/StrategyForm.styles.ts b/frontend/src/component/strategies/StrategyForm/StrategyForm.styles.ts
index 0988c327bb..981cdf483c 100644
--- a/frontend/src/component/strategies/StrategyForm/StrategyForm.styles.ts
+++ b/frontend/src/component/strategies/StrategyForm/StrategyForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: 400,
     },
diff --git a/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx b/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx
index 057d988126..f05f9fd922 100644
--- a/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx
+++ b/frontend/src/component/strategies/StrategyForm/StrategyForm.tsx
@@ -1,7 +1,7 @@
 import Input from 'component/common/Input/Input';
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import { useStyles } from './StrategyForm.styles';
-import { Add } from '@material-ui/icons';
+import { Add } from '@mui/icons-material';
 import { trim } from 'component/common/util';
 import { StrategyParameters } from './StrategyParameters/StrategyParameters';
 import { ICustomStrategyParameter } from 'interfaces/strategy';
@@ -36,7 +36,7 @@ export const StrategyForm: React.FC<IStrategyFormProps> = ({
     mode,
     clearErrors,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const updateParameter = (index: number, updated: object) => {
         let item = { ...params[index] };
         params[index] = Object.assign({}, item, updated);
diff --git a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.styles.ts b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.styles.ts
index 92f6a1a7b7..39af96747d 100644
--- a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.styles.ts
+++ b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     paramsContainer: {
         maxWidth: '400px',
     },
diff --git a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
index 7b4ff98ec6..9e5948b7fa 100644
--- a/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
+++ b/frontend/src/component/strategies/StrategyForm/StrategyParameters/StrategyParameter/StrategyParameter.tsx
@@ -1,10 +1,5 @@
-import {
-    Checkbox,
-    FormControlLabel,
-    IconButton,
-    Tooltip,
-} from '@material-ui/core';
-import { Delete } from '@material-ui/icons';
+import { Checkbox, FormControlLabel, IconButton, Tooltip } from '@mui/material';
+import { Delete } from '@mui/icons-material';
 import { useStyles } from './StrategyParameter.styles';
 import GeneralSelect from 'component/common/GeneralSelect/GeneralSelect';
 import Input from 'component/common/Input/Input';
@@ -61,7 +56,7 @@ export const StrategyParameter = ({
     setParams,
     errors,
 }: IStrategyParameterProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const onTypeChange = (type: string) => {
         set({ type });
@@ -98,6 +93,7 @@ export const StrategyParameter = ({
                         onClick={() => {
                             setParams(params.filter((e, i) => i !== index));
                         }}
+                        size="large"
                     >
                         <Delete />
                     </IconButton>
diff --git a/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx b/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
index 028aeaaae1..adaf77c05a 100644
--- a/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
+++ b/frontend/src/component/strategies/StrategyView/StrategyDetails/StrategyDetails.tsx
@@ -5,8 +5,8 @@ import {
     ListItemAvatar,
     ListItemText,
     Tooltip,
-} from '@material-ui/core';
-import { Add, RadioButtonChecked } from '@material-ui/icons';
+} from '@mui/material';
+import { Add, RadioButtonChecked } from '@mui/icons-material';
 import { AppsLinkList } from 'component/common';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import styles from '../../strategies.module.scss';
diff --git a/frontend/src/component/strategies/StrategyView/StrategyView.tsx b/frontend/src/component/strategies/StrategyView/StrategyView.tsx
index d5cebe280c..f9fa032f0c 100644
--- a/frontend/src/component/strategies/StrategyView/StrategyView.tsx
+++ b/frontend/src/component/strategies/StrategyView/StrategyView.tsx
@@ -1,4 +1,4 @@
-import { Grid } from '@material-ui/core';
+import { Grid } from '@mui/material';
 import { useParams, useHistory } from 'react-router-dom';
 import { UPDATE_STRATEGY } from 'component/providers/AccessProvider/permissions';
 import PageContent from 'component/common/PageContent/PageContent';
@@ -8,7 +8,7 @@ import useApplications from 'hooks/api/getters/useApplications/useApplications';
 import { StrategyDetails } from './StrategyDetails/StrategyDetails';
 import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
 import PermissionIconButton from 'component/common/PermissionIconButton/PermissionIconButton';
-import { Edit } from '@material-ui/icons';
+import { Edit } from '@mui/icons-material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 
 export const StrategyView = () => {
diff --git a/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx b/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
index ad902c71fd..e1f1acb859 100644
--- a/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
+++ b/frontend/src/component/strategies/TogglesLinkList/TogglesLinkList.tsx
@@ -4,8 +4,8 @@ import {
     ListItemAvatar,
     ListItemText,
     Tooltip,
-} from '@material-ui/core';
-import { Pause, PlayArrow } from '@material-ui/icons';
+} from '@mui/material';
+import { Pause, PlayArrow } from '@mui/icons-material';
 import styles from 'component/common/common.module.scss';
 import { Link } from 'react-router-dom';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
diff --git a/frontend/src/component/tags/TagTypeForm/TagTypeForm.styles.ts b/frontend/src/component/tags/TagTypeForm/TagTypeForm.styles.ts
index 83cefb326b..53581f0b84 100644
--- a/frontend/src/component/tags/TagTypeForm/TagTypeForm.styles.ts
+++ b/frontend/src/component/tags/TagTypeForm/TagTypeForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         maxWidth: '400px',
     },
diff --git a/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx b/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx
index 3e434f0f4c..6c72345d9c 100644
--- a/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx
+++ b/frontend/src/component/tags/TagTypeForm/TagTypeForm.tsx
@@ -1,5 +1,5 @@
 import Input from 'component/common/Input/Input';
-import { TextField, Button } from '@material-ui/core';
+import { TextField, Button } from '@mui/material';
 
 import { useStyles } from './TagTypeForm.styles';
 import React from 'react';
@@ -32,7 +32,7 @@ const TagTypeForm: React.FC<ITagTypeForm> = ({
     validateNameUniqueness,
     clearErrors,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <form onSubmit={handleSubmit} className={styles.form}>
diff --git a/frontend/src/component/tags/TagTypeList/TagTypeList.tsx b/frontend/src/component/tags/TagTypeList/TagTypeList.tsx
index 4094551bbb..26e6d8f4b7 100644
--- a/frontend/src/component/tags/TagTypeList/TagTypeList.tsx
+++ b/frontend/src/component/tags/TagTypeList/TagTypeList.tsx
@@ -8,8 +8,8 @@ import {
     ListItemIcon,
     ListItemText,
     Tooltip,
-} from '@material-ui/core';
-import { Add, Delete, Edit, Label } from '@material-ui/icons';
+} from '@mui/material';
+import { Add, Delete, Edit, Label } from '@mui/icons-material';
 import { HeaderTitle } from 'component/common/HeaderTitle/HeaderTitle';
 import PageContent from 'component/common/PageContent/PageContent';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
@@ -18,7 +18,7 @@ import {
     UPDATE_TAG_TYPE,
 } from 'component/providers/AccessProvider/permissions';
 import { Dialogue } from 'component/common/Dialogue/Dialogue';
-import useMediaQuery from '@material-ui/core/useMediaQuery';
+import useMediaQuery from '@mui/material/useMediaQuery';
 import styles from './TagTypeList.module.scss';
 import AccessContext from 'contexts/AccessContext';
 import useTagTypesApi from 'hooks/api/actions/useTagTypesApi/useTagTypesApi';
@@ -72,6 +72,7 @@ export const TagTypeList = () => {
                                         onClick={() =>
                                             history.push('/tag-types/create')
                                         }
+                                        size="large"
                                     >
                                         <Add />
                                     </IconButton>
@@ -110,6 +111,7 @@ export const TagTypeList = () => {
                             name: tagType.name,
                         })
                     }
+                    size="large"
                 >
                     <Delete />
                 </IconButton>
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/TagTypeList.test.tsx b/frontend/src/component/tags/TagTypeList/__tests__/TagTypeList.test.tsx
index b31913f9f5..99986332ba 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/TagTypeList.test.tsx
+++ b/frontend/src/component/tags/TagTypeList/__tests__/TagTypeList.test.tsx
@@ -2,20 +2,19 @@ import React from 'react';
 import { TagTypeList } from 'component/tags/TagTypeList/TagTypeList';
 import renderer from 'react-test-renderer';
 import { MemoryRouter } from 'react-router-dom';
-import { ThemeProvider } from '@material-ui/styles';
-import theme from 'themes/mainTheme';
-import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
 import { ADMIN } from 'component/providers/AccessProvider/permissions';
 import UIProvider from 'component/providers/UIProvider/UIProvider';
+import { ThemeProvider } from 'themes/ThemeProvider';
+import { AccessProviderMock } from 'component/providers/AccessProvider/AccessProviderMock';
 
 test('renders an empty list correctly', () => {
     const tree = renderer.create(
         <MemoryRouter>
-            <ThemeProvider theme={theme}>
+            <ThemeProvider>
                 <UIProvider>
-                    <AccessProvider permissions={[{ permission: ADMIN }]}>
+                    <AccessProviderMock permissions={[{ permission: ADMIN }]}>
                         <TagTypeList />
-                    </AccessProvider>
+                    </AccessProviderMock>
                 </UIProvider>
             </ThemeProvider>
         </MemoryRouter>
diff --git a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
index 154a94d021..e355a44bd0 100644
--- a/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
+++ b/frontend/src/component/tags/TagTypeList/__tests__/__snapshots__/TagTypeList.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`renders an empty list correctly 1`] = `
 <div
-  className="MuiPaper-root MuiPaper-elevation1 MuiPaper-rounded"
+  className="MuiPaper-root MuiPaper-elevation MuiPaper-rounded MuiPaper-elevation1 mui-1ps6pg7-MuiPaper-root"
   style={
     Object {
       "borderRadius": "10px",
@@ -11,29 +11,30 @@ exports[`renders an empty list correctly 1`] = `
   }
 >
   <div
-    className="makeStyles-headerContainer-1"
+    className="tss-16iyfoa-headerContainer"
   >
     <div
-      className="makeStyles-headerTitleContainer-5"
+      className="tss-14s7qul-headerTitleContainer"
     >
       <div
         className=""
         data-loading={true}
       >
         <h1
-          className="MuiTypography-root makeStyles-headerTitle-6 MuiTypography-h1"
+          className="MuiTypography-root MuiTypography-h1 tss-whbfmi-headerTitle mui-1inkmva-MuiTypography-root"
         >
           Tag Types
         </h1>
       </div>
       <div
-        className="makeStyles-headerActions-7"
+        className="tss-ap2nhp-headerActions"
       >
         <button
-          className="MuiButtonBase-root MuiButton-root MuiButton-contained MuiButton-containedPrimary"
+          className="MuiButton-root MuiButton-contained MuiButton-containedPrimary MuiButton-sizeMedium MuiButton-containedSizeMedium MuiButtonBase-root  mui-16l97z4-MuiButtonBase-root-MuiButton-root"
           disabled={false}
           onBlur={[Function]}
           onClick={[Function]}
+          onContextMenu={[Function]}
           onDragLeave={[Function]}
           onFocus={[Function]}
           onKeyDown={[Function]}
@@ -47,23 +48,19 @@ exports[`renders an empty list correctly 1`] = `
           tabIndex={0}
           type="button"
         >
-          <span
-            className="MuiButton-label"
-          >
-            New tag type
-          </span>
+          New tag type
         </button>
       </div>
     </div>
   </div>
   <div
-    className="makeStyles-bodyContainer-2"
+    className="tss-kiw3z8-bodyContainer"
   >
     <ul
-      className="MuiList-root MuiList-padding"
+      className="MuiList-root MuiList-padding mui-h4y409-MuiList-root"
     >
       <li
-        className="MuiListItem-root MuiListItem-gutters"
+        className="MuiListItem-root MuiListItem-gutters MuiListItem-padding mui-uz8enf-MuiListItem-root"
         disabled={false}
       >
         No entries
diff --git a/frontend/src/component/user/Authentication/Authentication.tsx b/frontend/src/component/user/Authentication/Authentication.tsx
index 8f9ea343f3..96eaa2536e 100644
--- a/frontend/src/component/user/Authentication/Authentication.tsx
+++ b/frontend/src/component/user/Authentication/Authentication.tsx
@@ -12,7 +12,7 @@ import {
 import SecondaryLoginActions from '../common/SecondaryLoginActions/SecondaryLoginActions';
 import useQueryParams from 'hooks/useQueryParams';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import { useAuthDetails } from 'hooks/api/getters/useAuth/useAuthDetails';
 import { AUTH_PAGE_ID } from 'utils/testIds';
 
diff --git a/frontend/src/component/user/AuthenticationCustomComponent.tsx b/frontend/src/component/user/AuthenticationCustomComponent.tsx
index 5117bc3c77..f3915edb25 100644
--- a/frontend/src/component/user/AuthenticationCustomComponent.tsx
+++ b/frontend/src/component/user/AuthenticationCustomComponent.tsx
@@ -1,5 +1,5 @@
 import { VFC } from 'react';
-import { CardActions, Button } from '@material-ui/core';
+import { CardActions, Button } from '@mui/material';
 import { IAuthEndpointDetailsResponse } from 'hooks/api/getters/useAuth/useAuthEndpoint';
 
 interface IAuthenticationCustomComponentProps {
diff --git a/frontend/src/component/user/DemoAuth/DemoAuth.tsx b/frontend/src/component/user/DemoAuth/DemoAuth.tsx
index 90eb8d5fbc..bc623212eb 100644
--- a/frontend/src/component/user/DemoAuth/DemoAuth.tsx
+++ b/frontend/src/component/user/DemoAuth/DemoAuth.tsx
@@ -1,5 +1,5 @@
 import { ChangeEventHandler, FormEventHandler, useState, VFC } from 'react';
-import { Button, TextField } from '@material-ui/core';
+import { Button, TextField } from '@mui/material';
 import styles from './DemoAuth.module.scss';
 import { ReactComponent as Logo } from 'assets/img/logo.svg';
 import { LOGIN_BUTTON, LOGIN_EMAIL_ID } from 'utils/testIds';
diff --git a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.styles.ts b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.styles.ts
index 5898b17f75..a02e912a86 100644
--- a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.styles.ts
+++ b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.styles.ts
@@ -1,9 +1,9 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     forgottenPassword: {
         width: '350px',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             width: '100%',
         },
     },
diff --git a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
index f99da31597..5cd8ca54af 100644
--- a/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
+++ b/frontend/src/component/user/ForgottenPassword/ForgottenPassword.tsx
@@ -1,9 +1,9 @@
-import { Button, TextField, Typography } from '@material-ui/core';
-import { AlertTitle, Alert } from '@material-ui/lab';
+import { Button, TextField, Typography } from '@mui/material';
+import { AlertTitle, Alert } from '@mui/material';
 import classnames from 'classnames';
 import { SyntheticEvent, useState } from 'react';
 import { Link } from 'react-router-dom';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import useLoading from 'hooks/useLoading';
 import { FORGOTTEN_PASSWORD_FIELD } from 'utils/testIds';
 import { formatApiPath } from 'utils/formatPath';
@@ -17,8 +17,8 @@ const ForgottenPassword = () => {
     const [attempted, setAttempted] = useState(false);
     const [loading, setLoading] = useState(false);
     const [attemptedEmail, setAttemptedEmail] = useState('');
-    const commonStyles = useCommonStyles();
-    const styles = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
+    const { classes: styles } = useStyles();
     const ref = useLoading(loading);
 
     const onClick = async (e: SyntheticEvent) => {
@@ -43,16 +43,16 @@ const ForgottenPassword = () => {
         <StandaloneLayout>
             <div
                 className={classnames(
-                    commonStyles.contentSpacingY,
-                    commonStyles.flexColumn,
+                    themeStyles.contentSpacingY,
+                    themeStyles.flexColumn,
                     styles.forgottenPassword
                 )}
                 ref={ref}
             >
                 <h2
                     className={classnames(
-                        commonStyles.title,
-                        commonStyles.textCenter
+                        themeStyles.title,
+                        themeStyles.textCenter
                     )}
                     data-loading
                 >
@@ -77,14 +77,14 @@ const ForgottenPassword = () => {
                 <form
                     onSubmit={onClick}
                     className={classnames(
-                        commonStyles.contentSpacingY,
-                        commonStyles.flexColumn
+                        themeStyles.contentSpacingY,
+                        themeStyles.flexColumn
                     )}
                 >
                     <Typography
                         variant="body1"
                         data-loading
-                        className={commonStyles.textCenter}
+                        className={themeStyles.textCenter}
                     >
                         Please provide your email address. If it exists in the
                         system we'll send a new reset link.
diff --git a/frontend/src/component/user/HostedAuth/HostedAuth.styles.ts b/frontend/src/component/user/HostedAuth/HostedAuth.styles.ts
index d92b51b676..bbd0b07dd5 100644
--- a/frontend/src/component/user/HostedAuth/HostedAuth.styles.ts
+++ b/frontend/src/component/user/HostedAuth/HostedAuth.styles.ts
@@ -1,9 +1,9 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     loginContainer: {
         minWidth: '350px',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             width: '100%',
             minWidth: 'auto',
         },
diff --git a/frontend/src/component/user/HostedAuth/HostedAuth.tsx b/frontend/src/component/user/HostedAuth/HostedAuth.tsx
index d048dbaac3..d95e9d74a7 100644
--- a/frontend/src/component/user/HostedAuth/HostedAuth.tsx
+++ b/frontend/src/component/user/HostedAuth/HostedAuth.tsx
@@ -1,8 +1,8 @@
 import { FormEventHandler, useState, VFC } from 'react';
 import classnames from 'classnames';
-import { Button, Grid, TextField, Typography } from '@material-ui/core';
+import { Button, Grid, TextField, Typography } from '@mui/material';
 import { useHistory } from 'react-router';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { useStyles } from './HostedAuth.styles';
 import useQueryParams from 'hooks/useQueryParams';
 import AuthOptions from '../common/AuthOptions/AuthOptions';
@@ -21,8 +21,8 @@ interface IHostedAuthProps {
 }
 
 const HostedAuth: VFC<IHostedAuthProps> = ({ authDetails, redirect }) => {
-    const commonStyles = useCommonStyles();
-    const styles = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
+    const { classes: styles } = useStyles();
     const { refetchUser } = useAuthUser();
     const history = useHistory();
     const params = useQueryParams();
@@ -106,7 +106,7 @@ const HostedAuth: VFC<IHostedAuthProps> = ({ authDetails, redirect }) => {
                         <div
                             className={classnames(
                                 styles.contentContainer,
-                                commonStyles.contentSpacingY
+                                themeStyles.contentSpacingY
                             )}
                         >
                             <TextField
diff --git a/frontend/src/component/user/Login/Login.styles.ts b/frontend/src/component/user/Login/Login.styles.ts
index 907203b2cf..dcdab27259 100644
--- a/frontend/src/component/user/Login/Login.styles.ts
+++ b/frontend/src/component/user/Login/Login.styles.ts
@@ -1,10 +1,10 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     login: {
         width: '350px',
         maxWidth: '350px',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             width: '100%',
         },
     },
@@ -21,17 +21,11 @@ export const useStyles = makeStyles(theme => ({
         width: '50%',
         padding: '4rem 3rem',
         minHeight: '100vh',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             width: '100%',
             minHeight: 'auto',
         },
     },
-    gradient: {
-        // @ts-expect-error
-        background: `linear-gradient(${theme.palette.login.gradient.top}, ${theme.palette.login.gradient.bottom})`,
-        // @ts-expect-error
-        color: theme.palette.login.main,
-    },
     title: {
         fontSize: theme.fontSizes.mainHeader,
         marginBottom: '1rem',
diff --git a/frontend/src/component/user/Login/Login.tsx b/frontend/src/component/user/Login/Login.tsx
index abf1b98b22..08ab2e6904 100644
--- a/frontend/src/component/user/Login/Login.tsx
+++ b/frontend/src/component/user/Login/Login.tsx
@@ -11,7 +11,7 @@ import { Redirect } from 'react-router-dom';
 import { parseRedirectParam } from 'component/user/Login/parseRedirectParam';
 
 const Login = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { authDetails } = useAuthDetails();
     const { user } = useAuthUser();
     const query = useQueryParams();
diff --git a/frontend/src/component/user/NewUser/NewUser.styles.ts b/frontend/src/component/user/NewUser/NewUser.styles.ts
index 91617a1ded..54f20f2409 100644
--- a/frontend/src/component/user/NewUser/NewUser.styles.ts
+++ b/frontend/src/component/user/NewUser/NewUser.styles.ts
@@ -1,9 +1,9 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     newUser: {
         width: '350px',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             width: '100%',
         },
     },
@@ -42,7 +42,7 @@ export const useStyles = makeStyles(theme => ({
     emailField: {
         minWidth: '300px',
         width: '100%',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             minWidth: '100%',
         },
     },
diff --git a/frontend/src/component/user/NewUser/NewUser.tsx b/frontend/src/component/user/NewUser/NewUser.tsx
index 2334a26949..57ddd3090b 100644
--- a/frontend/src/component/user/NewUser/NewUser.tsx
+++ b/frontend/src/component/user/NewUser/NewUser.tsx
@@ -1,5 +1,5 @@
 import useLoading from 'hooks/useLoading';
-import { TextField, Typography } from '@material-ui/core';
+import { TextField, Typography } from '@mui/material';
 import StandaloneBanner from '../StandaloneBanner/StandaloneBanner';
 import ResetPasswordDetails from '../common/ResetPasswordDetails/ResetPasswordDetails';
 import { useStyles } from './NewUser.styles';
@@ -16,7 +16,7 @@ export const NewUser = () => {
     const { token, data, loading, setLoading, invalidToken } =
         useResetPassword();
     const ref = useLoading(loading);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     return (
         <div ref={ref}>
diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.styles.ts b/frontend/src/component/user/PasswordAuth/PasswordAuth.styles.ts
index 6b99f0cecd..ffc5e83714 100644
--- a/frontend/src/component/user/PasswordAuth/PasswordAuth.styles.ts
+++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.styles.ts
@@ -1,9 +1,9 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     loginContainer: {
         minWidth: '350px',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             width: '100%',
             minWidth: 'auto',
         },
diff --git a/frontend/src/component/user/PasswordAuth/PasswordAuth.tsx b/frontend/src/component/user/PasswordAuth/PasswordAuth.tsx
index 7ef05e4e37..c2de7303d4 100644
--- a/frontend/src/component/user/PasswordAuth/PasswordAuth.tsx
+++ b/frontend/src/component/user/PasswordAuth/PasswordAuth.tsx
@@ -1,14 +1,14 @@
 import { FormEventHandler, useState, VFC } from 'react';
 import classnames from 'classnames';
-import { Button, TextField } from '@material-ui/core';
+import { Button, TextField } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { useHistory } from 'react-router';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { useStyles } from './PasswordAuth.styles';
 import useQueryParams from 'hooks/useQueryParams';
 import AuthOptions from '../common/AuthOptions/AuthOptions';
 import DividerText from 'component/common/DividerText/DividerText';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import { LOGIN_BUTTON, LOGIN_EMAIL_ID, LOGIN_PASSWORD_ID } from 'utils/testIds';
 import PasswordField from 'component/common/PasswordField/PasswordField';
 import { useAuthApi } from 'hooks/api/actions/useAuthApi/useAuthApi';
@@ -26,8 +26,8 @@ interface IPasswordAuthProps {
 }
 
 const PasswordAuth: VFC<IPasswordAuthProps> = ({ authDetails, redirect }) => {
-    const commonStyles = useCommonStyles();
-    const styles = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
+    const { classes: styles } = useStyles();
     const history = useHistory();
     const { refetchUser } = useAuthUser();
     const params = useQueryParams();
@@ -110,7 +110,7 @@ const PasswordAuth: VFC<IPasswordAuthProps> = ({ authDetails, redirect }) => {
                         <div
                             className={classnames(
                                 styles.contentContainer,
-                                commonStyles.contentSpacingY
+                                themeStyles.contentSpacingY
                             )}
                         >
                             <TextField
diff --git a/frontend/src/component/user/ResetPassword/ResetPassword.styles.ts b/frontend/src/component/user/ResetPassword/ResetPassword.styles.ts
index d2c926b107..2722d953e2 100644
--- a/frontend/src/component/user/ResetPassword/ResetPassword.styles.ts
+++ b/frontend/src/component/user/ResetPassword/ResetPassword.styles.ts
@@ -1,10 +1,10 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     resetPassword: {
         width: '350px',
         maxWidth: '350px',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             width: '100%',
         },
     },
diff --git a/frontend/src/component/user/ResetPassword/ResetPassword.test.tsx b/frontend/src/component/user/ResetPassword/ResetPassword.test.tsx
index fea67c3de8..9e46b64402 100644
--- a/frontend/src/component/user/ResetPassword/ResetPassword.test.tsx
+++ b/frontend/src/component/user/ResetPassword/ResetPassword.test.tsx
@@ -9,6 +9,7 @@ import { render } from 'utils/testRenderer';
 const server = testServerSetup();
 
 test('should render password auth', async () => {
+    testServerRoute(server, '/api/admin/user', {});
     testServerRoute(server, '/auth/reset/validate', {
         name: INVALID_TOKEN_ERROR,
     });
diff --git a/frontend/src/component/user/ResetPassword/ResetPassword.tsx b/frontend/src/component/user/ResetPassword/ResetPassword.tsx
index 95948ee7f0..e43f8db40f 100644
--- a/frontend/src/component/user/ResetPassword/ResetPassword.tsx
+++ b/frontend/src/component/user/ResetPassword/ResetPassword.tsx
@@ -3,14 +3,14 @@ import useLoading from 'hooks/useLoading';
 import ResetPasswordDetails from '../common/ResetPasswordDetails/ResetPasswordDetails';
 
 import { useStyles } from './ResetPassword.styles';
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import InvalidToken from '../common/InvalidToken/InvalidToken';
 import useResetPassword from 'hooks/api/getters/useResetPassword/useResetPassword';
 import StandaloneLayout from '../common/StandaloneLayout/StandaloneLayout';
 
 const ResetPassword = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const { token, loading, setLoading, invalidToken } = useResetPassword();
     const ref = useLoading(loading);
 
diff --git a/frontend/src/component/user/SimpleAuth/SimpleAuth.tsx b/frontend/src/component/user/SimpleAuth/SimpleAuth.tsx
index 321b37d1a1..4cf17c97ed 100644
--- a/frontend/src/component/user/SimpleAuth/SimpleAuth.tsx
+++ b/frontend/src/component/user/SimpleAuth/SimpleAuth.tsx
@@ -1,5 +1,5 @@
 import { ChangeEventHandler, FormEventHandler, useState, VFC } from 'react';
-import { Button, TextField } from '@material-ui/core';
+import { Button, TextField } from '@mui/material';
 import styles from './SimpleAuth.module.scss';
 import { useHistory } from 'react-router-dom';
 import { useAuthApi } from 'hooks/api/actions/useAuthApi/useAuthApi';
diff --git a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts
index 523035e69c..2eafb0265f 100644
--- a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts
+++ b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     gradient: {
         display: 'flex',
         justifyContent: 'center',
@@ -14,7 +14,7 @@ export const useStyles = makeStyles(theme => ({
         marginBottom: '1rem',
         fontSize: '2rem',
         marginTop: '5rem',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
     },
@@ -25,18 +25,18 @@ export const useStyles = makeStyles(theme => ({
         borderTopLeftRadius: '3px',
         borderBottomLeftRadius: '3px',
         textAlign: 'right',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             padding: '3rem 2rem',
         },
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             padding: '3rem 1rem',
         },
     },
     bannerSubtitle: {
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             display: 'none',
         },
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             display: 'none',
         },
         fontSize: '2rem',
diff --git a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
index 067a391a41..f80246af5c 100644
--- a/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
+++ b/frontend/src/component/user/StandaloneBanner/StandaloneBanner.tsx
@@ -1,5 +1,5 @@
 import { FC } from 'react';
-import { Typography, useTheme, useMediaQuery } from '@material-ui/core';
+import { Typography, useTheme, useMediaQuery } from '@mui/material';
 import Gradient from 'component/common/Gradient/Gradient';
 import { ReactComponent as Logo } from 'assets/icons/logoWhiteBg.svg';
 import { ReactComponent as LogoWithText } from 'assets/img/logoWhiteTransparentHorizontal.svg';
@@ -12,14 +12,13 @@ interface IStandaloneBannerProps {
 
 const StandaloneBanner: FC<IStandaloneBannerProps> = ({ title, children }) => {
     const theme = useTheme();
-    const styles = useStyles();
-    const smallScreen = useMediaQuery(theme.breakpoints.down('sm'));
+    const { classes: styles } = useStyles();
+    const smallScreen = useMediaQuery(theme.breakpoints.down('md'));
 
     return (
         <Gradient
             from={theme.palette.primary.main}
-            // @ts-expect-error
-            to={theme.palette.login.gradient.bottom}
+            to="#173341"
             className={styles.gradient}
         >
             <div className={styles.container}>
diff --git a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.styles.ts b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.styles.ts
index 36c094961f..031dc5d217 100644
--- a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.styles.ts
+++ b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         width: '100%',
         transform: 'translateY(-30px)',
@@ -17,7 +17,7 @@ export const useStyles = makeStyles(theme => ({
     button: {
         width: '150px',
         marginTop: '1.15rem',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             width: '100px',
         },
     },
diff --git a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
index d9271821b7..edce53a5f0 100644
--- a/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
+++ b/frontend/src/component/user/UserProfile/EditProfile/EditProfile.tsx
@@ -1,11 +1,11 @@
 import React, { SyntheticEvent, useState } from 'react';
-import { Button, Typography } from '@material-ui/core';
+import { Button, Typography } from '@mui/material';
 import classnames from 'classnames';
 import { useStyles } from './EditProfile.styles';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import PasswordChecker from 'component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker';
 import PasswordMatcher from 'component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher';
-import { Alert } from '@material-ui/lab';
+import { Alert } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import useLoading from 'hooks/useLoading';
 import {
@@ -27,8 +27,8 @@ const EditProfile = ({
     setEditingProfile,
     setUpdatedPassword,
 }: IEditProfileProps) => {
-    const styles = useStyles();
-    const commonStyles = useCommonStyles();
+    const { classes: styles } = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
     const [loading, setLoading] = useState(false);
     const [validPassword, setValidPassword] = useState(false);
     const [error, setError] = useState('');
@@ -103,10 +103,7 @@ const EditProfile = ({
                 }
             />
             <form
-                className={classnames(
-                    styles.form,
-                    commonStyles.contentSpacingY
-                )}
+                className={classnames(styles.form, themeStyles.contentSpacingY)}
             >
                 <PasswordChecker
                     password={password}
diff --git a/frontend/src/component/user/UserProfile/UserProfile.styles.ts b/frontend/src/component/user/UserProfile/UserProfile.styles.ts
index 3bb8d8d7a8..3ba4a47cd0 100644
--- a/frontend/src/component/user/UserProfile/UserProfile.styles.ts
+++ b/frontend/src/component/user/UserProfile/UserProfile.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     userProfileMenu: {
         display: 'flex',
     },
@@ -10,6 +10,9 @@ export const useStyles = makeStyles(theme => ({
     button: {
         color: 'inherit',
         padding: '0.2rem 1rem',
+        '&:hover': {
+            backgroundColor: 'transparent',
+        },
     },
     icon: {
         color: theme.palette.grey[600],
diff --git a/frontend/src/component/user/UserProfile/UserProfile.tsx b/frontend/src/component/user/UserProfile/UserProfile.tsx
index d801e85809..f2b945415a 100644
--- a/frontend/src/component/user/UserProfile/UserProfile.tsx
+++ b/frontend/src/component/user/UserProfile/UserProfile.tsx
@@ -1,9 +1,9 @@
 import React, { useEffect, useState } from 'react';
 import classnames from 'classnames';
-import { Avatar, Button, ClickAwayListener } from '@material-ui/core';
-import KeyboardArrowDownIcon from '@material-ui/icons/KeyboardArrowDown';
+import { Avatar, Button, ClickAwayListener } from '@mui/material';
+import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
 import { useStyles } from 'component/user/UserProfile/UserProfile.styles';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import UserProfileContent from './UserProfileContent/UserProfileContent';
 import { IUser } from 'interfaces/user';
 import { ILocationSettings } from 'hooks/useLocationSettings';
@@ -26,8 +26,8 @@ const UserProfile = ({
     const [showProfile, setShowProfile] = useState(false);
     const [currentLocale, setCurrentLocale] = useState<string>();
 
-    const styles = useStyles();
-    const commonStyles = useCommonStyles();
+    const { classes: styles } = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
 
     const [possibleLocales, setPossibleLocales] = useState([
         'en-US',
@@ -61,12 +61,13 @@ const UserProfile = ({
             <div className={styles.profileContainer}>
                 <Button
                     className={classnames(
-                        commonStyles.flexRow,
-                        commonStyles.itemsCenter,
+                        themeStyles.flexRow,
+                        themeStyles.itemsCenter,
+                        themeStyles.focusable,
                         styles.button
                     )}
                     onClick={() => setShowProfile(prev => !prev)}
-                    role="button"
+                    color="secondary"
                     disableRipple
                 >
                     <Avatar
diff --git a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.ts b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.ts
index 791e2ee568..545dafd8f8 100644
--- a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.ts
+++ b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.styles.ts
@@ -1,13 +1,13 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     profile: {
         position: 'absolute',
         zIndex: 5000,
         minWidth: '300px',
         right: 0,
         padding: '1.5rem',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             width: '100%',
             padding: '1rem',
         },
diff --git a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
index 16f4c20b40..bae7a91789 100644
--- a/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
+++ b/frontend/src/component/user/UserProfile/UserProfileContent/UserProfileContent.tsx
@@ -8,11 +8,12 @@ import {
     Paper,
     Select,
     Typography,
-} from '@material-ui/core';
+    SelectChangeEvent,
+} from '@mui/material';
 import classnames from 'classnames';
 import { useStyles } from 'component/user/UserProfile/UserProfileContent/UserProfileContent.styles';
-import { useCommonStyles } from 'themes/commonStyles';
-import { Alert } from '@material-ui/lab';
+import { useThemeStyles } from 'themes/themeStyles';
+import { Alert } from '@mui/material';
 import EditProfile from '../EditProfile/EditProfile';
 import legacyStyles from '../../user.module.scss';
 import { getBasePath } from 'utils/formatPath';
@@ -41,11 +42,11 @@ const UserProfileContent = ({
     setCurrentLocale,
     setLocationSettings,
 }: IUserProfileContentProps) => {
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
     const { uiConfig } = useUiConfig();
     const [updatedPassword, setUpdatedPassword] = useState(false);
     const [editingProfile, setEditingProfile] = useState(false);
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     const profileAvatarClasses = classnames(styles.avatar, {
         [styles.editingAvatar]: editingProfile,
@@ -55,8 +56,8 @@ const UserProfileContent = ({
         [styles.editingEmail]: editingProfile,
     });
 
-    const handleChange = (e: React.ChangeEvent<{ value: unknown }>) => {
-        const locale = e.target.value as string;
+    const handleChange = (e: SelectChangeEvent) => {
+        const locale = e.target.value;
         setCurrentLocale(locale);
         setLocationSettings({ locale });
     };
@@ -68,9 +69,9 @@ const UserProfileContent = ({
                 <Paper
                     className={classnames(
                         styles.profile,
-                        commonStyles.flexColumn,
-                        commonStyles.itemsCenter,
-                        commonStyles.contentSpacingY
+                        themeStyles.flexColumn,
+                        themeStyles.itemsCenter,
+                        themeStyles.contentSpacingY
                     )}
                 >
                     <Avatar
@@ -97,7 +98,6 @@ const UserProfileContent = ({
                                     condition={!uiConfig.disablePasswordAuth}
                                     show={
                                         <Button
-                                            variant="contained"
                                             onClick={() =>
                                                 setEditingProfile(true)
                                             }
@@ -106,7 +106,7 @@ const UserProfileContent = ({
                                         </Button>
                                     }
                                 />
-                                <div className={commonStyles.divider} />
+                                <div className={themeStyles.divider} />
                                 <div className={legacyStyles.showUserSettings}>
                                     <FormControl
                                         variant="outlined"
@@ -146,7 +146,7 @@ const UserProfileContent = ({
                                         </Select>
                                     </FormControl>
                                 </div>
-                                <div className={commonStyles.divider} />
+                                <div className={themeStyles.divider} />
                                 <a
                                     className={styles.link}
                                     href="https://www.getunleash.io/privacy-policy"
@@ -155,7 +155,7 @@ const UserProfileContent = ({
                                 >
                                     Privacy policy
                                 </a>
-                                <div className={commonStyles.divider} />
+                                <div className={themeStyles.divider} />
 
                                 <Button
                                     variant="contained"
diff --git a/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx b/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx
index 3aae12e3ea..6d5a5e4dc9 100644
--- a/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx
+++ b/frontend/src/component/user/common/AuthOptions/AuthOptions.tsx
@@ -1,8 +1,8 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import classnames from 'classnames';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { ReactComponent as GoogleSvg } from 'assets/icons/google.svg';
-import LockRounded from '@material-ui/icons/LockRounded';
+import LockRounded from '@mui/icons-material/LockRounded';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import { IAuthOptions } from 'hooks/api/getters/useAuth/useAuthEndpoint';
 import { SSO_LOGIN_BUTTON } from 'utils/testIds';
@@ -12,15 +12,15 @@ interface IAuthOptionProps {
 }
 
 const AuthOptions = ({ options }: IAuthOptionProps) => {
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
     return (
         <>
             {options?.map(o => (
                 <div
                     key={o.type}
                     className={classnames(
-                        commonStyles.flexColumn,
-                        commonStyles.contentSpacingY
+                        themeStyles.flexColumn,
+                        themeStyles.contentSpacingY
                     )}
                 >
                     <Button
diff --git a/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx b/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx
index 665ff64fea..462f3e73dd 100644
--- a/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx
+++ b/frontend/src/component/user/common/InvalidToken/InvalidToken.tsx
@@ -1,20 +1,20 @@
-import { Button, Typography } from '@material-ui/core';
+import { Button, Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { INVALID_TOKEN_BUTTON } from 'utils/testIds';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import classnames from 'classnames';
 
 const InvalidToken = () => {
-    const commonStyles = useCommonStyles();
+    const { classes: themeStyles } = useThemeStyles();
     return (
         <div
             className={classnames(
-                commonStyles.contentSpacingY,
-                commonStyles.flexColumn,
-                commonStyles.itemsCenter
+                themeStyles.contentSpacingY,
+                themeStyles.flexColumn,
+                themeStyles.itemsCenter
             )}
         >
-            <Typography variant="h2" className={commonStyles.title}>
+            <Typography variant="h2" className={themeStyles.title}>
                 Invalid token
             </Typography>
             <Typography variant="subtitle1">
diff --git a/frontend/src/component/user/common/ResetPasswordError/ResetPasswordError.tsx b/frontend/src/component/user/common/ResetPasswordError/ResetPasswordError.tsx
index 876498f242..2252305066 100644
--- a/frontend/src/component/user/common/ResetPasswordError/ResetPasswordError.tsx
+++ b/frontend/src/component/user/common/ResetPasswordError/ResetPasswordError.tsx
@@ -1,4 +1,4 @@
-import { Alert, AlertTitle } from '@material-ui/lab';
+import { Alert, AlertTitle } from '@mui/material';
 
 const ResetPasswordError = () => {
     return (
diff --git a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.styles.ts b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.styles.ts
index 8d4edd864c..f0367d2553 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.styles.ts
+++ b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         border: '1px solid #f1f1f1',
         borderRadius: '3px',
@@ -10,8 +10,7 @@ export const useStyles = makeStyles(theme => ({
     },
     headerContainer: { display: 'flex', padding: '0.5rem' },
     divider: {
-        // @ts-expect-error
-        backgroundColor: theme.palette.borders?.main,
+        backgroundColor: theme.palette.grey[100],
         height: '1px',
         width: '100%',
     },
diff --git a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx
index dc467302f6..d2edbfa190 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/PasswordChecker/PasswordChecker.tsx
@@ -1,13 +1,13 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import classnames from 'classnames';
 import { Dispatch, SetStateAction, useEffect, useState } from 'react';
 import { BAD_REQUEST, OK } from 'constants/statusCodes';
 import { useStyles } from './PasswordChecker.styles';
 import { useCallback } from 'react';
 import { formatApiPath } from 'utils/formatPath';
-import { Alert } from '@material-ui/lab';
-import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
+import { Alert } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
+import { HelpIcon } from 'component/common/HelpIcon/HelpIcon';
 
 interface IPasswordCheckerProps {
     password: string;
@@ -41,7 +41,7 @@ const PasswordChecker = ({
     callback,
     style = {},
 }: IPasswordCheckerProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     const [casingError, setCasingError] = useState(true);
     const [numberError, setNumberError] = useState(true);
     const [symbolError, setSymbolError] = useState(true);
diff --git a/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.styles.ts b/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.styles.ts
index 0b112d46dd..2f0c1db36c 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.styles.ts
+++ b/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     matcherContainer: {
         position: 'relative',
     },
diff --git a/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.tsx b/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.tsx
index b3d5d61e9f..e21f08280e 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/PasswordMatcher/PasswordMatcher.tsx
@@ -1,7 +1,7 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import classnames from 'classnames';
-import CheckIcon from '@material-ui/icons/Check';
+import CheckIcon from '@mui/icons-material/Check';
 
 import { useStyles } from './PasswordMatcher.styles';
 
@@ -14,7 +14,7 @@ const PasswordMatcher = ({
     started,
     matchingPasswords,
 }: IPasswordMatcherProps) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <div className={styles.matcherContainer}>
             <ConditionallyRender
diff --git a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.styles.ts b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.styles.ts
index d427e9c007..b3e17342c9 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.styles.ts
+++ b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.styles.ts
@@ -1,6 +1,6 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         display: 'flex',
         flexDirection: 'column',
diff --git a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
index 513512b667..a6e51b7e90 100644
--- a/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
+++ b/frontend/src/component/user/common/ResetPasswordForm/ResetPasswordForm.tsx
@@ -1,4 +1,4 @@
-import { Button } from '@material-ui/core';
+import { Button } from '@mui/material';
 import classnames from 'classnames';
 import React, {
     Dispatch,
@@ -9,7 +9,7 @@ import React, {
     useState,
 } from 'react';
 import { useHistory } from 'react-router';
-import { useCommonStyles } from 'themes/commonStyles';
+import { useThemeStyles } from 'themes/themeStyles';
 import { OK } from 'constants/statusCodes';
 import { ConditionallyRender } from 'component/common/ConditionallyRender/ConditionallyRender';
 import ResetPasswordError from '../ResetPasswordError/ResetPasswordError';
@@ -25,8 +25,8 @@ interface IResetPasswordProps {
 }
 
 const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
-    const styles = useStyles();
-    const commonStyles = useCommonStyles();
+    const { classes: styles } = useStyles();
+    const { classes: themeStyles } = useThemeStyles();
     const [apiError, setApiError] = useState(false);
     const [password, setPassword] = useState('');
     const [showPasswordChecker, setShowPasswordChecker] = useState(false);
@@ -104,7 +104,7 @@ const ResetPasswordForm = ({ token, setLoading }: IResetPasswordProps) => {
             <form
                 onSubmit={handleSubmit}
                 className={classnames(
-                    commonStyles.contentSpacingY,
+                    themeStyles.contentSpacingY,
                     styles.container
                 )}
             >
diff --git a/frontend/src/component/user/common/ResetPasswordSuccess/ResetPasswordSuccess.tsx b/frontend/src/component/user/common/ResetPasswordSuccess/ResetPasswordSuccess.tsx
index 0202b8c8c0..8cdb25c580 100644
--- a/frontend/src/component/user/common/ResetPasswordSuccess/ResetPasswordSuccess.tsx
+++ b/frontend/src/component/user/common/ResetPasswordSuccess/ResetPasswordSuccess.tsx
@@ -1,4 +1,4 @@
-import { Alert, AlertTitle } from '@material-ui/lab';
+import { Alert, AlertTitle } from '@mui/material';
 
 const ResetPasswordSuccess = () => {
     return (
diff --git a/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.styles.ts b/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.styles.ts
index 01ea460dc9..b6f4a86faf 100644
--- a/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.styles.ts
+++ b/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.styles.ts
@@ -1,10 +1,10 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         margin: 'auto auto 0 auto',
         width: '230px',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             marginTop: '1rem',
         },
     },
diff --git a/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.tsx b/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.tsx
index 5ea6b9c43e..d54e0e72c6 100644
--- a/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.tsx
+++ b/frontend/src/component/user/common/SecondaryLoginActions/SecondaryLoginActions.tsx
@@ -1,9 +1,9 @@
-import { Typography } from '@material-ui/core';
+import { Typography } from '@mui/material';
 import { Link } from 'react-router-dom';
 import { useStyles } from './SecondaryLoginActions.styles';
 
 const SecondaryLoginActions = () => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
     return (
         <div className={styles.container}>
             <Link to="/forgotten-password" className={styles.link}>
diff --git a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts b/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts
index c869faaca9..0dcadc1bd4 100644
--- a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts
+++ b/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.styles.ts
@@ -1,14 +1,14 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useStyles = makeStyles(theme => ({
+export const useStyles = makeStyles()(theme => ({
     container: {
         padding: '5.5rem',
         background: '#EFF2F2',
         display: 'flex',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             flexDirection: 'column',
         },
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             padding: '0',
         },
         minHeight: '100vh',
@@ -16,7 +16,7 @@ export const useStyles = makeStyles(theme => ({
     leftContainer: {
         width: '40%',
         borderRadius: '3px',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             borderRadius: '0',
             width: '100%',
             minHeight: 'auto',
@@ -29,7 +29,7 @@ export const useStyles = makeStyles(theme => ({
         borderBottomRightRadius: '3px',
         backgroundColor: '#fff',
         position: 'relative',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             borderRadius: '0',
             width: '100%',
             position: 'static',
@@ -46,10 +46,10 @@ export const useStyles = makeStyles(theme => ({
         justifyContent: 'center',
         height: '100%',
         padding: '6rem 3rem',
-        [theme.breakpoints.down('sm')]: {
+        [theme.breakpoints.down('md')]: {
             padding: '2rem 2rem',
         },
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             padding: '2rem 1rem',
         },
     },
diff --git a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx b/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx
index c8156ae756..cbe37a7a6c 100644
--- a/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx
+++ b/frontend/src/component/user/common/StandaloneLayout/StandaloneLayout.tsx
@@ -11,7 +11,7 @@ const StandaloneLayout: FC<IStandaloneLayout> = ({
     children,
     BannerComponent,
 }) => {
-    const styles = useStyles();
+    const { classes: styles } = useStyles();
 
     let banner = <StandaloneBanner title="Unleash" />;
 
diff --git a/frontend/src/hooks/api/getters/useUiConfig/defaultValue.ts b/frontend/src/hooks/api/getters/useUiConfig/defaultValue.ts
index a89da3f230..18c2c65ecb 100644
--- a/frontend/src/hooks/api/getters/useUiConfig/defaultValue.ts
+++ b/frontend/src/hooks/api/getters/useUiConfig/defaultValue.ts
@@ -1,4 +1,4 @@
-import { LibraryBooks } from '@material-ui/icons';
+import { LibraryBooks } from '@mui/icons-material';
 
 export const defaultValue = {
     name: 'Unleash',
diff --git a/frontend/src/index.tsx b/frontend/src/index.tsx
index 932e1a7187..8ff21b4200 100644
--- a/frontend/src/index.tsx
+++ b/frontend/src/index.tsx
@@ -5,10 +5,10 @@ import ReactDOM from 'react-dom';
 import { Route, BrowserRouter as Router } from 'react-router-dom';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
-import { MainThemeProvider } from 'themes/MainThemeProvider';
+import { ThemeProvider } from 'themes/ThemeProvider';
 import { App } from 'component/App';
 import { ScrollTop } from 'component/common/ScrollTop/ScrollTop';
-import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
+import { AccessProvider } from 'component/providers/AccessProvider/AccessProvider';
 import { getBasePath } from 'utils/formatPath';
 import { FeedbackCESProvider } from 'component/feedback/FeedbackCESContext/FeedbackCESProvider';
 import UIProvider from 'component/providers/UIProvider/UIProvider';
@@ -19,14 +19,14 @@ ReactDOM.render(
         <UIProvider>
             <AccessProvider>
                 <Router basename={`${getBasePath()}`}>
-                    <MainThemeProvider>
+                    <ThemeProvider>
                         <AnnouncerProvider>
                             <FeedbackCESProvider>
                                 <ScrollTop />
                                 <Route path="/" component={App} />
                             </FeedbackCESProvider>
                         </AnnouncerProvider>
-                    </MainThemeProvider>
+                    </ThemeProvider>
                 </Router>
             </AccessProvider>
         </UIProvider>
diff --git a/frontend/src/interfaces/featureToggle.ts b/frontend/src/interfaces/featureToggle.ts
index 7e3c2c723a..bad2de00d7 100644
--- a/frontend/src/interfaces/featureToggle.ts
+++ b/frontend/src/interfaces/featureToggle.ts
@@ -28,7 +28,7 @@ export interface IFeatureToggle {
     enabled?: boolean;
     createdAt: string;
     lastSeenAt?: string;
-    description: string;
+    description?: string;
     environments: IFeatureEnvironment[];
     name: string;
     project: string;
diff --git a/frontend/src/interfaces/palette.d.ts b/frontend/src/interfaces/palette.d.ts
deleted file mode 100644
index d18640f8bb..0000000000
--- a/frontend/src/interfaces/palette.d.ts
+++ /dev/null
@@ -1,19 +0,0 @@
-declare module '@material-ui/core/styles/createPalette' {
-    interface PaletteOptions {
-        borders?: PaletteColorOptions;
-        login?: ILoginPaletteOptions;
-    }
-    interface Palette {
-        borders?: PaletteColor;
-    }
-}
-
-interface ILoginPaletteOptions {
-    gradient?: IGradientPaletteOptions;
-    main?: string;
-}
-
-interface IGradientPaletteOptions {
-    top: string;
-    bottom: string;
-}
diff --git a/frontend/src/openapi/runtime.ts b/frontend/src/openapi/runtime.ts
index a72c6462fb..c0322b92a4 100644
--- a/frontend/src/openapi/runtime.ts
+++ b/frontend/src/openapi/runtime.ts
@@ -80,21 +80,21 @@ export class BaseAPI {
         let fetchParams = { url, init };
         for (const middleware of this.middleware) {
             if (middleware.pre) {
-                fetchParams = await middleware.pre({
+                fetchParams = (await middleware.pre({
                     fetch: this.fetchApi,
                     ...fetchParams,
-                }) || fetchParams;
+                })) || fetchParams;
             }
         }
         let response = await (this.configuration.fetchApi || fetch)(fetchParams.url, fetchParams.init);
         for (const middleware of this.middleware) {
             if (middleware.post) {
-                response = await middleware.post({
+                response = (await middleware.post({
                     fetch: this.fetchApi,
                     url: fetchParams.url,
                     init: fetchParams.init,
                     response: response.clone(),
-                }) || response;
+                })) || response;
             }
         }
         return response;
diff --git a/frontend/src/themes/MainThemeProvider.tsx b/frontend/src/themes/MainThemeProvider.tsx
deleted file mode 100644
index c23e4763e5..0000000000
--- a/frontend/src/themes/MainThemeProvider.tsx
+++ /dev/null
@@ -1,12 +0,0 @@
-import React, { FC } from 'react';
-import { CssBaseline, StylesProvider, ThemeProvider } from '@material-ui/core';
-import mainTheme from './mainTheme';
-
-export const MainThemeProvider: FC = ({ children }) => (
-    <ThemeProvider theme={mainTheme}>
-        <StylesProvider injectFirst>
-            <CssBaseline />
-            {children}
-        </StylesProvider>
-    </ThemeProvider>
-);
diff --git a/frontend/src/themes/ThemeProvider.tsx b/frontend/src/themes/ThemeProvider.tsx
new file mode 100644
index 0000000000..3a44706ba3
--- /dev/null
+++ b/frontend/src/themes/ThemeProvider.tsx
@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { CssBaseline, ThemeProvider as MuiThemeProvider } from '@mui/material';
+import mainTheme from 'themes/theme';
+import createCache from '@emotion/cache';
+import { CacheProvider } from '@emotion/react';
+
+export const muiCache = createCache({
+    key: 'mui',
+    prepend: true,
+});
+
+export const ThemeProvider: FC = ({ children }) => (
+    <CacheProvider value={muiCache}>
+        <MuiThemeProvider theme={mainTheme}>
+            <CssBaseline />
+            {children}
+        </MuiThemeProvider>
+    </CacheProvider>
+);
diff --git a/frontend/src/themes/app.css b/frontend/src/themes/app.css
index f493986334..d2682db389 100644
--- a/frontend/src/themes/app.css
+++ b/frontend/src/themes/app.css
@@ -154,3 +154,10 @@ a {
         --drawer-padding: 0.75rem 1.25rem;
     }
 }
+
+input.hide-clear[type='search']::-webkit-search-decoration,
+input.hide-clear[type='search']::-webkit-search-cancel-button,
+input.hide-clear[type='search']::-webkit-search-results-button,
+input.hide-clear[type='search']::-webkit-search-results-decoration {
+    display: none;
+}
diff --git a/frontend/src/themes/mainTheme.ts b/frontend/src/themes/mainTheme.ts
deleted file mode 100644
index 98bdff31fd..0000000000
--- a/frontend/src/themes/mainTheme.ts
+++ /dev/null
@@ -1,156 +0,0 @@
-import { createTheme, Theme } from '@material-ui/core/styles';
-
-type MainTheme = typeof mainTheme;
-
-declare module '@material-ui/core/styles/createTheme' {
-    interface Theme extends MainTheme {}
-}
-
-declare module '@material-ui/core/styles/makeStyles' {
-    interface Theme extends MainTheme {}
-}
-
-declare module '@material-ui/core/styles/useTheme' {
-    interface Theme extends MainTheme {}
-}
-
-const mainTheme = {
-    typography: {
-        fontFamily: ['Sen', 'Roboto, sans-serif'],
-        fontWeightBold: '700',
-        fontWeightMedium: '700',
-    },
-    palette: {
-        primary: {
-            main: '#635DC5',
-            light: '#817AFE',
-            dark: '#635DC5',
-        },
-        secondary: {
-            main: '#635DC5',
-            light: '#817AFE',
-            dark: '#635DC5',
-        },
-        grey: {
-            main: '#6C6C6C',
-            light: '#F6F6FA',
-        },
-        neutral: {
-            main: '#18243e',
-        },
-        icons: {
-            lightGrey: '#e0e0e0',
-        },
-        chips: {
-            main: '#b0bec5',
-        },
-        searchField: {
-            main: '#fff',
-        },
-        iconButtons: {
-            main: '#fff',
-        },
-        tabs: {
-            main: '#efefef',
-        },
-        links: {
-            deprecated: '#1d1818',
-        },
-        borders: {
-            main: '#f1f1f1',
-        },
-        error: {
-            main: '#d95e5e',
-        },
-        success: {
-            main: '#3bd86e',
-        },
-        division: {
-            main: '#f1f1f1',
-        },
-        footer: {
-            main: '#000',
-            background: '#fff',
-        },
-        code: {
-            main: '#0b8c8f',
-            diffAdd: 'green',
-            diffSub: 'red',
-            diffNeutral: 'black',
-            edited: 'blue',
-            background: '#efefef',
-        },
-        cards: {
-            gradient: {
-                top: '#265f6d',
-                bottom: '#1A4049',
-            },
-            container: {
-                bg: '#f1f1f1',
-            },
-        },
-        login: {
-            gradient: {
-                top: '#607D8B',
-                bottom: '#173341',
-            },
-            main: '#fff',
-        },
-        dialogue: {
-            title: {
-                main: '#fff',
-            },
-        },
-    },
-    padding: {
-        pageContent: {
-            header: '1.8rem 2rem',
-            body: '2rem',
-        },
-    },
-    borders: {
-        default: '1px solid #f1f1f1',
-        radius: { main: '3px' },
-    },
-    fontSizes: {
-        mainHeader: '1.2rem',
-        subHeader: '1.1rem',
-        bodySize: '1rem',
-        smallBody: '0.9rem',
-        smallerBody: '0.8rem',
-    },
-    boxShadows: {
-        chip: {
-            main: `0 2px 2px 0 rgba(0, 0, 0, 0.14),
-        0 3px 1px -2px rgba(0, 0, 0, 0.2), 0 1px 5px 0 rgba(0, 0, 0, 0.12)`,
-        },
-    },
-    fontWeight: {
-        thin: 300,
-        medium: 400,
-        semi: 700,
-        bold: 700,
-    },
-    v2: {
-        palette: {
-            primary: '',
-            grey: {
-                '10': '#F7F7FA',
-                '20': '#F2F2F5',
-                '30': '#EAEAED',
-                '40': '#E1E1E3',
-                '50': '#BDBDBF',
-                '70': '#78787A',
-                '90': '#202021',
-            },
-        },
-        fontSizes: {
-            headerIcon: '18px',
-        },
-        boxShadows: {
-            primary: '0px 2px 4px rgba(129, 122, 254, 0.2)',
-        },
-    },
-};
-
-export default createTheme(mainTheme as unknown as Theme);
diff --git a/frontend/src/themes/theme.ts b/frontend/src/themes/theme.ts
new file mode 100644
index 0000000000..57f39dc714
--- /dev/null
+++ b/frontend/src/themes/theme.ts
@@ -0,0 +1,77 @@
+import { createTheme } from '@mui/material/styles';
+
+export default createTheme({
+    borderRadius: {
+        main: '3px',
+    },
+    boxShadows: {
+        main: '0px 2px 4px rgba(129, 122, 254, 0.2)',
+    },
+    typography: {
+        fontFamily: 'Sen, Roboto, sans-serif',
+        fontWeightBold: '700',
+        fontWeightMedium: '700',
+        allVariants: { lineHeight: 1.4 },
+        button: { lineHeight: 1.75 },
+    },
+    fontSizes: {
+        mainHeader: '1.2rem',
+        subHeader: '1.1rem',
+        bodySize: '1rem',
+        smallBody: '0.9rem',
+        smallerBody: '0.8rem',
+    },
+    fontWeight: {
+        thin: 300,
+        medium: 400,
+        semi: 700,
+        bold: 700,
+    },
+    code: {
+        main: '#0b8c8f',
+        diffAdd: 'green',
+        diffSub: 'red',
+        diffNeutral: 'black',
+        edited: 'blue',
+        background: '#efefef',
+    },
+    palette: {
+        primary: {
+            main: '#635DC5',
+            light: '#817AFE',
+            dark: '#635DC5',
+        },
+        secondary: {
+            main: '#635DC5',
+            light: '#817AFE',
+            dark: '#635DC5',
+        },
+        neutral: {
+            main: '#18243e',
+        },
+        chips: {
+            main: '#b0bec5',
+        },
+        searchField: {
+            main: '#fff',
+        },
+        iconButtons: {
+            main: '#fff',
+        },
+        tabs: {
+            main: '#efefef',
+        },
+        error: {
+            main: '#d95e5e',
+        },
+        success: {
+            main: '#3bd86e',
+        },
+        division: {
+            main: '#f1f1f1',
+        },
+        footer: {
+            main: '#000',
+        },
+    },
+});
diff --git a/frontend/src/themes/themeColors.ts b/frontend/src/themes/themeColors.ts
new file mode 100644
index 0000000000..82baf8ea7c
--- /dev/null
+++ b/frontend/src/themes/themeColors.ts
@@ -0,0 +1,9 @@
+export const unleashGrey = {
+    '100': '#f7f7fa',
+    '200': '#f2f2f5',
+    '300': '#eaeaed',
+    '400': '#e1e1e3',
+    '500': '#bdbdbf',
+    '700': '#78787a',
+    '900': '#202021',
+};
diff --git a/frontend/src/themes/commonStyles.ts b/frontend/src/themes/themeStyles.ts
similarity index 89%
rename from frontend/src/themes/commonStyles.ts
rename to frontend/src/themes/themeStyles.ts
index 74fb10bdd5..cb13cb0881 100644
--- a/frontend/src/themes/commonStyles.ts
+++ b/frontend/src/themes/themeStyles.ts
@@ -1,6 +1,15 @@
-import { makeStyles } from '@material-ui/core/styles';
+import { makeStyles } from 'tss-react/mui';
 
-export const useCommonStyles = makeStyles(theme => ({
+export const useThemeStyles = makeStyles()(theme => ({
+    focusable: {
+        '&:focus-visible': {
+            outline: 0,
+            outlineStyle: 'solid',
+            outlineWidth: 2,
+            outlineOffset: 2,
+            outlineColor: theme.palette.primary.main,
+        },
+    },
     contentSpacingY: {
         '& > *': {
             marginTop: '0.5rem !important',
@@ -24,14 +33,12 @@ export const useCommonStyles = makeStyles(theme => ({
     },
     divider: {
         margin: '1rem 0',
-        // @ts-expect-error
         backgroundColor: theme.palette.division.main,
         height: '3px',
         width: '100%',
     },
     largeDivider: {
         margin: '2rem 0',
-        // @ts-expect-error
         backgroundColor: theme.palette.division.main,
         height: '3px',
         width: '100%',
@@ -114,7 +121,7 @@ export const useCommonStyles = makeStyles(theme => ({
         right: '40px',
         top: '40px',
         transform: 'translateY(-400px)',
-        [theme.breakpoints.down('xs')]: {
+        [theme.breakpoints.down('sm')]: {
             right: 20,
             left: 10,
             top: 40,
diff --git a/frontend/src/themes/themeTypes.ts b/frontend/src/themes/themeTypes.ts
new file mode 100644
index 0000000000..5d830781ef
--- /dev/null
+++ b/frontend/src/themes/themeTypes.ts
@@ -0,0 +1,49 @@
+import { SimplePaletteColorOptions } from '@mui/material';
+
+declare module '@mui/material/styles' {
+    interface CustomTheme {
+        fontSizes: {
+            mainHeader: string;
+            subHeader: string;
+            bodySize: string;
+            smallBody: string;
+            smallerBody: string;
+        };
+        fontWeight: {
+            thin: number;
+            medium: number;
+            semi: number;
+            bold: number;
+        };
+        code: {
+            main: string;
+            diffAdd: string;
+            diffSub: string;
+            diffNeutral: string;
+            edited: string;
+            background: string;
+        };
+        borderRadius: {
+            main: string;
+        };
+        boxShadows: {
+            main: string;
+        };
+    }
+
+    interface CustomPalette {
+        neutral: SimplePaletteColorOptions;
+        chips: SimplePaletteColorOptions;
+        searchField: SimplePaletteColorOptions;
+        iconButtons: SimplePaletteColorOptions;
+        tabs: SimplePaletteColorOptions;
+        division: SimplePaletteColorOptions;
+        footer: SimplePaletteColorOptions;
+    }
+
+    interface Theme extends CustomTheme {}
+    interface ThemeOptions extends CustomTheme {}
+
+    interface Palette extends CustomPalette {}
+    interface PaletteOptions extends CustomPalette {}
+}
diff --git a/frontend/src/utils/getFeatureTypeIcons.ts b/frontend/src/utils/getFeatureTypeIcons.ts
index d9a1888ba0..e8565a1fdc 100644
--- a/frontend/src/utils/getFeatureTypeIcons.ts
+++ b/frontend/src/utils/getFeatureTypeIcons.ts
@@ -6,11 +6,11 @@ import {
     PERMISSION,
 } from '../constants/featureToggleTypes';
 
-import LoopIcon from '@material-ui/icons/Loop';
-import TimelineIcon from '@material-ui/icons/Timeline';
-import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
-import PanToolIcon from '@material-ui/icons/PanTool';
-import BuildIcon from '@material-ui/icons/Build';
+import LoopIcon from '@mui/icons-material/Loop';
+import TimelineIcon from '@mui/icons-material/Timeline';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
+import PanToolIcon from '@mui/icons-material/PanTool';
+import BuildIcon from '@mui/icons-material/Build';
 
 export const getFeatureTypeIcons = (type: string) => {
     switch (type) {
diff --git a/frontend/src/utils/strategyNames.ts b/frontend/src/utils/strategyNames.ts
index ac9c1d985e..608790298a 100644
--- a/frontend/src/utils/strategyNames.ts
+++ b/frontend/src/utils/strategyNames.ts
@@ -1,7 +1,7 @@
-import LocationOnIcon from '@material-ui/icons/LocationOn';
-import PeopleIcon from '@material-ui/icons/People';
-import LanguageIcon from '@material-ui/icons/Language';
-import PowerSettingsNewIcon from '@material-ui/icons/PowerSettingsNew';
+import LocationOnIcon from '@mui/icons-material/LocationOn';
+import PeopleIcon from '@mui/icons-material/People';
+import LanguageIcon from '@mui/icons-material/Language';
+import PowerSettingsNewIcon from '@mui/icons-material/PowerSettingsNew';
 import RolloutIcon from 'component/common/RolloutIcon/RolloutIcon';
 import { ElementType } from 'react';
 
diff --git a/frontend/src/utils/testRenderer.tsx b/frontend/src/utils/testRenderer.tsx
index fe1771e3b9..9383ff4803 100644
--- a/frontend/src/utils/testRenderer.tsx
+++ b/frontend/src/utils/testRenderer.tsx
@@ -2,10 +2,10 @@ import React, { FC } from 'react';
 import { BrowserRouter as Router } from 'react-router-dom';
 import { render as rtlRender, RenderOptions } from '@testing-library/react';
 import { SWRConfig } from 'swr';
-import { MainThemeProvider } from 'themes/MainThemeProvider';
-import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
+import { ThemeProvider } from 'themes/ThemeProvider';
 import { IPermission } from 'interfaces/user';
-import AccessProvider from 'component/providers/AccessProvider/AccessProvider';
+import { AnnouncerProvider } from 'component/common/Announcer/AnnouncerProvider/AnnouncerProvider';
+import { AccessProviderMock } from 'component/providers/AccessProvider/AccessProviderMock';
 
 export const render = (
     ui: JSX.Element,
@@ -22,13 +22,13 @@ export const render = (
 
     const Wrapper: FC = ({ children }) => (
         <SWRConfig value={{ provider: () => new Map() }}>
-            <AccessProvider permissions={permissions}>
-                <AnnouncerProvider>
-                    <MainThemeProvider>
+            <AccessProviderMock permissions={permissions}>
+                <ThemeProvider>
+                    <AnnouncerProvider>
                         <Router>{children}</Router>
-                    </MainThemeProvider>
-                </AnnouncerProvider>
-            </AccessProvider>
+                    </AnnouncerProvider>
+                </ThemeProvider>
+            </AccessProviderMock>
         </SWRConfig>
     );
 
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 2383ed8974..569e88eacf 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -3,11 +3,12 @@
 
 
 "@ampproject/remapping@^2.1.0":
-  version "2.1.2"
-  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.1.2.tgz#4edca94973ded9630d20101cd8559cedb8d8bd34"
-  integrity sha512-hoyByceqwKirw7w3Z7gnIIZC3Wx3J484Y3L/cMpXFbr7d9ZQj2mODrirNzcJa+SM3UlpWXYvKV4RlRpFXlWgXg==
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/@ampproject/remapping/-/remapping-2.2.0.tgz#56c133824780de3174aed5ab6834f3026790154d"
+  integrity sha512-qRmjj8nj9qmLTQXXmaR1cck3UXSRMPrbsLJAasZpF+t3riI71BXed5ebIOYwQntykeZuhjsdweEc9BxH5Jc26w==
   dependencies:
-    "@jridgewell/trace-mapping" "^0.3.0"
+    "@jridgewell/gen-mapping" "^0.1.0"
+    "@jridgewell/trace-mapping" "^0.3.9"
 
 "@apideck/better-ajv-errors@^0.3.1":
   version "0.3.3"
@@ -508,7 +509,7 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
-"@babel/plugin-syntax-jsx@^7.16.7":
+"@babel/plugin-syntax-jsx@^7.12.13", "@babel/plugin-syntax-jsx@^7.16.7":
   version "7.16.7"
   resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.7.tgz#50b6571d13f764266a113d77c82b4a6508bbe665"
   integrity sha512-Esxmk7YjA8QysKeT3VhTXvF6y77f/a91SIs4pWb4H2eWGQkCKFgQaG6hdoEVZtGsrAcb2K5BW66XsOErD4WU3Q==
@@ -1017,7 +1018,7 @@
     core-js-pure "^3.20.2"
     regenerator-runtime "^0.13.4"
 
-"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.1.2", "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.13.10", "@babel/runtime@^7.16.3", "@babel/runtime@^7.17.2", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7", "@babel/runtime@^7.9.2":
   version "7.17.9"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.17.9.tgz#d19fbf802d01a8cb6cf053a64e472d42c434ba72"
   integrity sha512-lSiBBvodq29uShpWGNbgFdKYNiFDo5/HIYsaCEY9ff4sb10x9jizo2+pRrSyF4jKZCXqgzuqBOQKbUm90gQwJg==
@@ -1062,12 +1063,17 @@
   resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
   integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==
 
+"@colors/colors@1.5.0":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/@colors/colors/-/colors-1.5.0.tgz#bb504579c1cae923e6576a4f5da43d25f97bdbd9"
+  integrity sha512-ooWCrlZP11i8GImSjTHYHLkvFDP48nS4+204nGb1RiX/WXYHmJA2III9/e2DWVabCESdW7hBAEzHRqUn9OUVvQ==
+
 "@csstools/normalize.css@*":
   version "12.0.0"
   resolved "https://registry.yarnpkg.com/@csstools/normalize.css/-/normalize.css-12.0.0.tgz#a9583a75c3f150667771f30b60d9f059473e62c4"
   integrity sha512-M0qqxAcwCsIVfpFQSlGN5XjXWu8l5JDZN+fPt1LeW5SZexQTgnaEvgXAY+CeygRw0EeppWHi12JxESWiWrB0Sg==
 
-"@csstools/postcss-color-function@^1.0.3":
+"@csstools/postcss-color-function@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-color-function/-/postcss-color-function-1.1.0.tgz#229966327747f58fbe586de35daa139db3ce1e5d"
   integrity sha512-5D5ND/mZWcQoSfYnSPsXtuiFxhzmhxt6pcjrFLJyldj+p0ZN2vvRpYNX+lahFTtMhAYOa2WmkdGINr0yP0CvGA==
@@ -1097,7 +1103,7 @@
     "@csstools/postcss-progressive-custom-properties" "^1.1.0"
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-is-pseudo-class@^2.0.1":
+"@csstools/postcss-is-pseudo-class@^2.0.2":
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-is-pseudo-class/-/postcss-is-pseudo-class-2.0.2.tgz#a834ca11a43d6ed9bc9e3ff53c80d490a4b1aaad"
   integrity sha512-L9h1yxXMj7KpgNzlMrw3isvHJYkikZgZE4ASwssTnGEH8tm50L6QsM9QQT5wR4/eO5mU0rN5axH7UzNxEYg5CA==
@@ -1111,7 +1117,7 @@
   dependencies:
     postcss-value-parser "^4.2.0"
 
-"@csstools/postcss-oklab-function@^1.0.2":
+"@csstools/postcss-oklab-function@^1.1.0":
   version "1.1.0"
   resolved "https://registry.yarnpkg.com/@csstools/postcss-oklab-function/-/postcss-oklab-function-1.1.0.tgz#e9a269487a292e0930760948e923e1d46b638ee6"
   integrity sha512-e/Q5HopQzmnQgqimG9v3w2IG4VRABsBq3itOcn4bnm+j4enTgQZ0nWsaH/m9GV2otWGQ0nwccYL5vmLKyvP1ww==
@@ -1158,15 +1164,144 @@
     debug "^3.1.0"
     lodash.once "^4.1.1"
 
+"@date-io/core@^2.13.1":
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/@date-io/core/-/core-2.13.1.tgz#f041765aff5c55fbc7e37fdd75fc1792733426d6"
+  integrity sha512-pVI9nfkf2qClb2Cxdq0Q4zJhdawMG4ybWZUVGifT78FDwzRMX2SwXBb55s5NRJk0HcIicDuxktmCtemZqMH1Zg==
+
+"@date-io/date-fns@^2.11.0":
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/@date-io/date-fns/-/date-fns-2.13.1.tgz#19d8a245dab61c03c95ba492d679d98d2b0b4af5"
+  integrity sha512-8fmfwjiLMpFLD+t4NBwDx0eblWnNcgt4NgfT/uiiQTGI81fnPu9tpBMYdAcuWxaV7LLpXgzLBx1SYWAMDVUDQQ==
+  dependencies:
+    "@date-io/core" "^2.13.1"
+
+"@date-io/dayjs@^2.11.0":
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/@date-io/dayjs/-/dayjs-2.13.1.tgz#98461d22ee98179b9f2dca3b36f1b618704ae593"
+  integrity sha512-5bL4WWWmlI4uGZVScANhHJV7Mjp93ec2gNeUHDqqLaMZhp51S0NgD25oqj/k0LqBn1cdU2MvzNpk/ObMmVv5cQ==
+  dependencies:
+    "@date-io/core" "^2.13.1"
+
+"@date-io/luxon@^2.11.1":
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/@date-io/luxon/-/luxon-2.13.1.tgz#3701b3cabfffda5102af302979aa6e58acfda91a"
+  integrity sha512-yG+uM7lXfwLyKKEwjvP8oZ7qblpmfl9gxQYae55ifbwiTs0CoCTkYkxEaQHGkYtTqGTzLqcb0O9Pzx6vgWg+yg==
+  dependencies:
+    "@date-io/core" "^2.13.1"
+
+"@date-io/moment@^2.11.0":
+  version "2.13.1"
+  resolved "https://registry.yarnpkg.com/@date-io/moment/-/moment-2.13.1.tgz#122a51e4bdedf71ff3babb264427737dc022c1e6"
+  integrity sha512-XX1X/Tlvl3TdqQy2j0ZUtEJV6Rl8tOyc5WOS3ki52He28Uzme4Ro/JuPWTMBDH63weSWIZDlbR7zBgp3ZA2y1A==
+  dependencies:
+    "@date-io/core" "^2.13.1"
+
+"@emotion/babel-plugin@^11.7.1":
+  version "11.9.2"
+  resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz#723b6d394c89fb2ef782229d92ba95a740576e95"
+  integrity sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==
+  dependencies:
+    "@babel/helper-module-imports" "^7.12.13"
+    "@babel/plugin-syntax-jsx" "^7.12.13"
+    "@babel/runtime" "^7.13.10"
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.5"
+    "@emotion/serialize" "^1.0.2"
+    babel-plugin-macros "^2.6.1"
+    convert-source-map "^1.5.0"
+    escape-string-regexp "^4.0.0"
+    find-root "^1.1.0"
+    source-map "^0.5.7"
+    stylis "4.0.13"
+
+"@emotion/cache@*", "@emotion/cache@^11.7.1":
+  version "11.7.1"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.7.1.tgz#08d080e396a42e0037848214e8aa7bf879065539"
+  integrity sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.0"
+    "@emotion/utils" "^1.0.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    stylis "4.0.13"
+
 "@emotion/hash@^0.8.0":
   version "0.8.0"
   resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@eslint/eslintrc@^1.2.1":
-  version "1.2.1"
-  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.1.tgz#8b5e1c49f4077235516bc9ec7d41378c0f69b8c6"
-  integrity sha512-bxvbYnBPN1Gibwyp6NrpnFzA3YtRL3BBAyEAFVIpNTm2Rn4Vy87GA5M4aSn3InRrlsbX5N0GW7XIx+U4SAEKdQ==
+"@emotion/is-prop-valid@^1.1.2":
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz#34ad6e98e871aa6f7a20469b602911b8b11b3a95"
+  integrity sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/memoize/-/memoize-0.7.5.tgz#2c40f81449a4e554e9fc6396910ed4843ec2be50"
+  integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
+
+"@emotion/react@^11.9.0":
+  version "11.9.0"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.0.tgz#b6d42b1db3bd7511e7a7c4151dc8bc82e14593b8"
+  integrity sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/cache" "^11.7.1"
+    "@emotion/serialize" "^1.0.3"
+    "@emotion/utils" "^1.1.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
+"@emotion/serialize@*", "@emotion/serialize@^1.0.2", "@emotion/serialize@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.3.tgz#99e2060c26c6292469fb30db41f4690e1c8fea63"
+  integrity sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==
+  dependencies:
+    "@emotion/hash" "^0.8.0"
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/unitless" "^0.7.5"
+    "@emotion/utils" "^1.0.0"
+    csstype "^3.0.2"
+
+"@emotion/sheet@^1.1.0":
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.0.tgz#56d99c41f0a1cda2726a05aa6a20afd4c63e58d2"
+  integrity sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g==
+
+"@emotion/styled@^11.8.1":
+  version "11.8.1"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.8.1.tgz#856f6f63aceef0eb783985fa2322e2bf66d04e17"
+  integrity sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/is-prop-valid" "^1.1.2"
+    "@emotion/serialize" "^1.0.2"
+    "@emotion/utils" "^1.1.0"
+
+"@emotion/unitless@^0.7.5":
+  version "0.7.5"
+  resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed"
+  integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
+
+"@emotion/utils@*", "@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"
+  integrity sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ==
+
+"@emotion/weak-memoize@^0.2.5":
+  version "0.2.5"
+  resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46"
+  integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA==
+
+"@eslint/eslintrc@^1.2.2":
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/@eslint/eslintrc/-/eslintrc-1.2.2.tgz#4989b9e8c0216747ee7cca314ae73791bb281aae"
+  integrity sha512-lTVWHs7O2hjBFZunXTZYnYqtB9GakA1lnxIf+gKq2nY5gxkkNi/lQvveW6t8gFdOHTg6nG50Xs95PrLqVpcaLg==
   dependencies:
     ajv "^6.12.4"
     debug "^4.3.2"
@@ -1220,6 +1355,18 @@
     jest-util "^27.5.1"
     slash "^3.0.0"
 
+"@jest/console@^28.0.2":
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/@jest/console/-/console-28.0.2.tgz#d11e8b43ae431ae9b3112656848417ae4008fcad"
+  integrity sha512-tiRpnMeeyQuuzgL5UNSeiqMwF8UOWPbAE5rzcu/1zyq4oPG2Ox6xm4YCOruwbp10F8odWc+XwVxTyGzMSLMqxA==
+  dependencies:
+    "@jest/types" "^28.0.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    jest-message-util "^28.0.2"
+    jest-util "^28.0.2"
+    slash "^3.0.0"
+
 "@jest/core@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.5.1.tgz#267ac5f704e09dc52de2922cbf3af9edcd64b626"
@@ -1316,6 +1463,13 @@
     terminal-link "^2.0.0"
     v8-to-istanbul "^8.1.0"
 
+"@jest/schemas@^28.0.2":
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/@jest/schemas/-/schemas-28.0.2.tgz#08c30df6a8d07eafea0aef9fb222c5e26d72e613"
+  integrity sha512-YVDJZjd4izeTDkij00vHHAymNXQ6WWsdChFRK86qck6Jpr3DCL5W3Is3vslviRlP+bLuMYRLbdp98amMvqudhA==
+  dependencies:
+    "@sinclair/typebox" "^0.23.3"
+
 "@jest/source-map@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.5.1.tgz#6608391e465add4205eae073b55e7f279e04e8cf"
@@ -1335,6 +1489,16 @@
     "@types/istanbul-lib-coverage" "^2.0.0"
     collect-v8-coverage "^1.0.0"
 
+"@jest/test-result@^28.0.2":
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-28.0.2.tgz#bc8e15a95347e3c2149572ae06a5a6fed939c522"
+  integrity sha512-4EUqgjq9VzyUiVTvZfI9IRJD6t3NYBNP4f+Eq8Zr93+hkJ0RrGU4OBTw8tfNzidKX+bmuYzn8FxqpxOPIGGCMA==
+  dependencies:
+    "@jest/console" "^28.0.2"
+    "@jest/types" "^28.0.2"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    collect-v8-coverage "^1.0.0"
+
 "@jest/test-sequencer@^27.5.1":
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.5.1.tgz#4057e0e9cea4439e544c6353c6affe58d095745b"
@@ -1377,20 +1541,45 @@
     "@types/yargs" "^16.0.0"
     chalk "^4.0.0"
 
+"@jest/types@^28.0.2":
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/@jest/types/-/types-28.0.2.tgz#70b9538c1863fb060b2f438ca008b5563d00c5b4"
+  integrity sha512-hi3jUdm9iht7I2yrV5C4s3ucCJHUP8Eh3W6rQ1s4n/Qw9rQgsda4eqCt+r3BKRi7klVmZfQlMx1nGlzNMP2d8A==
+  dependencies:
+    "@jest/schemas" "^28.0.2"
+    "@types/istanbul-lib-coverage" "^2.0.0"
+    "@types/istanbul-reports" "^3.0.0"
+    "@types/node" "*"
+    "@types/yargs" "^17.0.8"
+    chalk "^4.0.0"
+
+"@jridgewell/gen-mapping@^0.1.0":
+  version "0.1.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/gen-mapping/-/gen-mapping-0.1.0.tgz#b30fd66b5426bb7f44bb6043ab127b20ee404063"
+  integrity sha512-YH+BnkvuCiPR+MUOY6JIArdTIGrRtsxnLaIxPRy4CpGJ/V6OO6Gq/1J+FJEc4j5e5h6Bcy3/K7prlMrm93BJoA==
+  dependencies:
+    "@jridgewell/set-array" "1.0.0"
+    "@jridgewell/sourcemap-codec" "^1.4.10"
+
 "@jridgewell/resolve-uri@^3.0.3":
-  version "3.0.5"
-  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.5.tgz#68eb521368db76d040a6315cdb24bf2483037b9c"
-  integrity sha512-VPeQ7+wH0itvQxnG+lIzWgkysKIr3L9sslimFW55rHMdGu/qCQ5z5h9zq4gI8uBtqkpHhsF4Z/OwExufUCThew==
+  version "3.0.6"
+  resolved "https://registry.yarnpkg.com/@jridgewell/resolve-uri/-/resolve-uri-3.0.6.tgz#4ac237f4dabc8dd93330386907b97591801f7352"
+  integrity sha512-R7xHtBSNm+9SyvpJkdQl+qrM3Hm2fea3Ef197M3mUug+v+yR+Rhfbs7PBtcBUVnIWJ4JcAdjvij+c8hXS9p5aw==
+
+"@jridgewell/set-array@1.0.0":
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/@jridgewell/set-array/-/set-array-1.0.0.tgz#6a8e62049ab198c5f7daf8047e71947ef46c11c8"
+  integrity sha512-LcqVnHCjOAj8BTCtjpwYZCMTn4yArusbdObCVRUYvBHhrR5fVLVyENG+UVWM4T4H/ufv7NiBLdprllxWs/5PaQ==
 
 "@jridgewell/sourcemap-codec@^1.4.10":
   version "1.4.11"
   resolved "https://registry.yarnpkg.com/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.4.11.tgz#771a1d8d744eeb71b6adb35808e1a6c7b9b8c8ec"
   integrity sha512-Fg32GrJo61m+VqYSdRSjRXMjQ06j8YIYfcTqndLYVAaHmroZHLJZCydsWBOTDqXS2v+mjxohBWEMfg97GXmYQg==
 
-"@jridgewell/trace-mapping@^0.3.0":
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.4.tgz#f6a0832dffd5b8a6aaa633b7d9f8e8e94c83a0c3"
-  integrity sha512-vFv9ttIedivx0ux3QSjhgtCVjPZd5l46ZOMDSCwnH1yUO2e964gO8LZGyv2QkqcgR6TnBU1v+1IFqmeoG+0UJQ==
+"@jridgewell/trace-mapping@^0.3.9":
+  version "0.3.9"
+  resolved "https://registry.yarnpkg.com/@jridgewell/trace-mapping/-/trace-mapping-0.3.9.tgz#6534fd5933a53ba7cbf3a17615e273a0d1273ff9"
+  integrity sha512-3Belt6tdc8bPgAtbcmdtNJlirVoTmEb5e2gC94PnkwEW9jI6CAHUeoG85tjWP5WquqfavoMtMwiG4P926ZKKuQ==
   dependencies:
     "@jridgewell/resolve-uri" "^3.0.3"
     "@jridgewell/sourcemap-codec" "^1.4.10"
@@ -1400,88 +1589,6 @@
   resolved "https://registry.yarnpkg.com/@leichtgewicht/ip-codec/-/ip-codec-2.0.3.tgz#0300943770e04231041a51bd39f0439b5c7ab4f0"
   integrity sha512-nkalE/f1RvRGChwBnEIoBfSEYOXnCRdleKuv6+lePbMDrMZXeDQnqak5XDOeBgrPPyPfAdcCu/B5z+v3VhplGg==
 
-"@material-ui/core@4.12.4":
-  version "4.12.4"
-  resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.4.tgz#4ac17488e8fcaf55eb6a7f5efb2a131e10138a73"
-  integrity sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/styles" "^4.11.5"
-    "@material-ui/system" "^4.12.2"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.3"
-    "@types/react-transition-group" "^4.2.0"
-    clsx "^1.0.4"
-    hoist-non-react-statics "^3.3.2"
-    popper.js "1.16.1-lts"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-    react-transition-group "^4.4.0"
-
-"@material-ui/icons@4.11.3":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/icons/-/icons-4.11.3.tgz#b0693709f9b161ce9ccde276a770d968484ecff1"
-  integrity sha512-IKHlyx6LDh8n19vzwH5RtHIOHl9Tu90aAAxcbWME6kp4dmvODM3UvOHJeMIDzUbd4muuJKHmlNoBN+mDY4XkBA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-
-"@material-ui/lab@4.0.0-alpha.61":
-  version "4.0.0-alpha.61"
-  resolved "https://registry.yarnpkg.com/@material-ui/lab/-/lab-4.0.0-alpha.61.tgz#9bf8eb389c0c26c15e40933cc114d4ad85e3d978"
-  integrity sha512-rSzm+XKiNUjKegj8bzt5+pygZeckNLOr+IjykH8sYdVk7dE9y2ZuUSofiMV2bJk3qU+JHwexmw+q0RyNZB9ugg==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.3"
-    clsx "^1.0.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-
-"@material-ui/styles@^4.11.5":
-  version "4.11.5"
-  resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.5.tgz#19f84457df3aafd956ac863dbe156b1d88e2bbfb"
-  integrity sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@emotion/hash" "^0.8.0"
-    "@material-ui/types" "5.1.0"
-    "@material-ui/utils" "^4.11.3"
-    clsx "^1.0.4"
-    csstype "^2.5.2"
-    hoist-non-react-statics "^3.3.2"
-    jss "^10.5.1"
-    jss-plugin-camel-case "^10.5.1"
-    jss-plugin-default-unit "^10.5.1"
-    jss-plugin-global "^10.5.1"
-    jss-plugin-nested "^10.5.1"
-    jss-plugin-props-sort "^10.5.1"
-    jss-plugin-rule-value-function "^10.5.1"
-    jss-plugin-vendor-prefixer "^10.5.1"
-    prop-types "^15.7.2"
-
-"@material-ui/system@^4.12.2":
-  version "4.12.2"
-  resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.2.tgz#f5c389adf3fce4146edd489bf4082d461d86aa8b"
-  integrity sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    "@material-ui/utils" "^4.11.3"
-    csstype "^2.5.2"
-    prop-types "^15.7.2"
-
-"@material-ui/types@5.1.0":
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
-  integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
-
-"@material-ui/utils@^4.11.3":
-  version "4.11.3"
-  resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.3.tgz#232bd86c4ea81dab714f21edad70b7fdf0253942"
-  integrity sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==
-  dependencies:
-    "@babel/runtime" "^7.4.4"
-    prop-types "^15.7.2"
-    react-is "^16.8.0 || ^17.0.0"
-
 "@mswjs/cookies@^0.2.0":
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/@mswjs/cookies/-/cookies-0.2.0.tgz#7ef2b5d7e444498bb27cf57720e61f76a4ce9f23"
@@ -1502,6 +1609,124 @@
     outvariant "^1.2.1"
     strict-event-emitter "^0.2.0"
 
+"@mui/base@5.0.0-alpha.78":
+  version "5.0.0-alpha.78"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.78.tgz#9d0ee8c913969f60cd7072a6082e3c0652be0b74"
+  integrity sha512-5L+GNe2M9/tFjQpjK2r837+kzRg/l6D5R9SQbG1wmSWejw5Ei8P+KXIgS/NLNi9g7dUT8bnCyzz9AZKQX1Jsfg==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@emotion/is-prop-valid" "^1.1.2"
+    "@mui/types" "^7.1.3"
+    "@mui/utils" "^5.6.1"
+    "@popperjs/core" "^2.11.5"
+    clsx "^1.1.1"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
+"@mui/icons-material@^5.6.2":
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/@mui/icons-material/-/icons-material-5.6.2.tgz#239c40fc5841dc7c6af7d00e4e988550de170fcd"
+  integrity sha512-9QdI7axKuBAyaGz4mtdi7Uy1j73/thqFmEuxpJHxNC7O8ADEK1Da3t2veK2tgmsXsUlAHcAG63gg+GvWWeQNqQ==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+
+"@mui/lab@^5.0.0-alpha.79":
+  version "5.0.0-alpha.79"
+  resolved "https://registry.yarnpkg.com/@mui/lab/-/lab-5.0.0-alpha.79.tgz#9e706cca861497f2f00a9255ecd16c609730dc20"
+  integrity sha512-128+sKDQ3Z+jGBIbpH4QGrPyproDV7eAwuCHXE8XS8xoVhsJg1/E5NKs82Uvqmfbvv6sfhmPAfSfqztr/9RWiw==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/base" "5.0.0-alpha.78"
+    "@mui/system" "^5.6.3"
+    "@mui/utils" "^5.6.1"
+    "@mui/x-date-pickers" "5.0.0-alpha.0"
+    clsx "^1.1.1"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+    react-transition-group "^4.4.2"
+    rifm "^0.12.1"
+
+"@mui/material@^5.6.3":
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.6.3.tgz#a5b6cd1b0417fca67a65172530ff5573ab7bc453"
+  integrity sha512-2VovFsbCEhic29NYoBF7zFrpH2sEOlKXXDhGjzxmWiI9OnC3SX63hapWunjaVsiRINVnjuMHuW1MOs4UtV8Gfg==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/base" "5.0.0-alpha.78"
+    "@mui/system" "^5.6.3"
+    "@mui/types" "^7.1.3"
+    "@mui/utils" "^5.6.1"
+    "@types/react-transition-group" "^4.4.4"
+    clsx "^1.1.1"
+    csstype "^3.0.11"
+    hoist-non-react-statics "^3.3.2"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+    react-transition-group "^4.4.2"
+
+"@mui/private-theming@^5.6.2":
+  version "5.6.2"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.6.2.tgz#c42da32f8b9481ba12885176c0168a355727c189"
+  integrity sha512-IbrSfFXfiZdyhRMC2bgGTFtb16RBQ5mccmjeh3MtAERWuepiCK7gkW5D9WhEsfTu6iez+TEjeUKSgmMHlsM2mg==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/utils" "^5.6.1"
+    prop-types "^15.7.2"
+
+"@mui/styled-engine@^5.6.1":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.6.1.tgz#e2c859a4dbdd65af89e77703a0725285aef471fd"
+  integrity sha512-jEhH6TBY8jc9S8yVncXmoTYTbATjEu44RMFXj6sIYfKr5NArVwTwRo3JexLL0t3BOAiYM4xsFLgfKEIvB9SAeQ==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@emotion/cache" "^11.7.1"
+    prop-types "^15.7.2"
+
+"@mui/system@^5.6.3":
+  version "5.6.3"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.6.3.tgz#a03ad6d61b0b7d304a8af60374e27e71e7818ef7"
+  integrity sha512-4SRi52a4ttZ2S4EHEDE8arVNuKqyQLTYUTF80WAZ0tQwnG20qwlBtzcrywCGItmVAMl7RUaYopyWOx3yVPvrmQ==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/private-theming" "^5.6.2"
+    "@mui/styled-engine" "^5.6.1"
+    "@mui/types" "^7.1.3"
+    "@mui/utils" "^5.6.1"
+    clsx "^1.1.1"
+    csstype "^3.0.11"
+    prop-types "^15.7.2"
+
+"@mui/types@^7.1.3":
+  version "7.1.3"
+  resolved "https://registry.yarnpkg.com/@mui/types/-/types-7.1.3.tgz#d7636f3046110bcccc63e6acfd100e2ad9ca712a"
+  integrity sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA==
+
+"@mui/utils@^5.2.3", "@mui/utils@^5.6.1":
+  version "5.6.1"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.6.1.tgz#4ab79a21bd481555d9a588f4b18061b3c28ea5db"
+  integrity sha512-CPrzrkiBusCZBLWu0Sg5MJvR3fKJyK3gKecLVX012LULyqg2U64Oz04BKhfkbtBrPBbSQxM+DWW9B1c9hmV9nQ==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@types/prop-types" "^15.7.4"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
+"@mui/x-date-pickers@5.0.0-alpha.0":
+  version "5.0.0-alpha.0"
+  resolved "https://registry.yarnpkg.com/@mui/x-date-pickers/-/x-date-pickers-5.0.0-alpha.0.tgz#a62ffbab453d3c2dcd4ec20bd4f3f6338ad2ed3f"
+  integrity sha512-JTzTaNSWbxNi8KDUJjHCH6im0YlIEv88gPoKhGm7s6xCGT1q6FtMp/oQ40nhfwrJ73nkM5G1JXRIzI/yfsHXQQ==
+  dependencies:
+    "@date-io/date-fns" "^2.11.0"
+    "@date-io/dayjs" "^2.11.0"
+    "@date-io/luxon" "^2.11.1"
+    "@date-io/moment" "^2.11.0"
+    "@mui/utils" "^5.2.3"
+    clsx "^1.1.1"
+    prop-types "^15.7.2"
+    react-transition-group "^4.4.2"
+    rifm "^0.12.1"
+
 "@nestjs/common@8.4.4":
   version "8.4.4"
   resolved "https://registry.yarnpkg.com/@nestjs/common/-/common-8.4.4.tgz#0914c6c0540b5a344c7c8fd6072faa1a49af1158"
@@ -1596,6 +1821,11 @@
     schema-utils "^3.0.0"
     source-map "^0.7.3"
 
+"@popperjs/core@^2.11.5":
+  version "2.11.5"
+  resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.11.5.tgz#db5a11bf66bdab39569719555b0f76e138d7bd64"
+  integrity sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==
+
 "@react-dnd/asap@4.0.1":
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/@react-dnd/asap/-/asap-4.0.1.tgz#5291850a6b58ce6f2da25352a64f1b0674871aab"
@@ -1649,9 +1879,14 @@
     picomatch "^2.2.2"
 
 "@rushstack/eslint-patch@^1.1.0":
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.1.tgz#782fa5da44c4f38ae9fd38e9184b54e451936118"
-  integrity sha512-BUyKJGdDWqvWC5GEhyOiUrGNi9iJUr4CU0O2WxJL6QJhHeeA/NVBalH+FeK0r/x/W0rPymXt5s78TDS7d6lCwg==
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.1.3.tgz#6801033be7ff87a6b7cadaf5b337c9f366a3c4b0"
+  integrity sha512-WiBSI6JBIhC6LRIsB2Kwh8DsGTlbBU+mLRxJmAe3LjHTdkDpwIbEOZgoXBbZilk/vlfjK8i6nKRAvIRn1XaIMw==
+
+"@sinclair/typebox@^0.23.3":
+  version "0.23.4"
+  resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.23.4.tgz#6ff93fd2585ce44f7481c9ff6af610fbb5de98a4"
+  integrity sha512-0/WqSvpVbCBAV1yPeko7eAczKbs78dNVAaX14quVlwOb2wxfKuXCx91h4NrEfkYK9zEnyVSW4JVI/trP3iS+Qg==
 
 "@sinonjs/commons@^1.7.0":
   version "1.8.3"
@@ -1876,9 +2111,9 @@
     "@babel/types" "^7.0.0"
 
 "@types/babel__traverse@*", "@types/babel__traverse@^7.0.4", "@types/babel__traverse@^7.0.6":
-  version "7.14.2"
-  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.14.2.tgz#ffcd470bbb3f8bf30481678fb5502278ca833a43"
-  integrity sha512-K2waXdXBi2302XUdcHcR1jCeU0LL4TD9HRs/gk0N2Xvrht+G/BfJa4QObBQZfhMdxiCpV3COl5Nfq4uKTeTnJA==
+  version "7.17.1"
+  resolved "https://registry.yarnpkg.com/@types/babel__traverse/-/babel__traverse-7.17.1.tgz#1a0e73e8c28c7e832656db372b779bfd2ef37314"
+  integrity sha512-kVzjari1s2YVi77D3w1yuvohV2idweYXMCDzqBiVNN63TcDWrIlTVOYpqVrvbbyOE/IyzBoTKF0fdnLPEORFxA==
   dependencies:
     "@babel/types" "^7.3.0"
 
@@ -2054,9 +2289,9 @@
     "@types/lodash" "*"
 
 "@types/lodash@*":
-  version "4.14.181"
-  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.181.tgz#d1d3740c379fda17ab175165ba04e2d03389385d"
-  integrity sha512-n3tyKthHJbkiWhDZs3DkhkCzt2MexYHXlX0td5iMplyfwketaOeKboEVBqzceH7juqvEg3q5oUoBFxSLu7zFag==
+  version "4.14.182"
+  resolved "https://registry.yarnpkg.com/@types/lodash/-/lodash-4.14.182.tgz#05301a4d5e62963227eaafe0ce04dd77c54ea5c2"
+  integrity sha512-/THyiqyQAP9AfARo4pF+aCGcyiQ94tX/Is2I7HofNRqoYLgN1PBoOWu2/zTA5zMxzP5EFutMtWtGAFRKUe961Q==
 
 "@types/mime@^1":
   version "1.3.2"
@@ -2064,9 +2299,9 @@
   integrity sha512-YATxVxgRqNH6nHEIsvg6k2Boc1JHI9ZbH5iWFFv/MTkchz3b1ieGDa5T0a9RznNdI0KhVbdbWSN+KWWrQZRxTw==
 
 "@types/node@*":
-  version "17.0.23"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.23.tgz#3b41a6e643589ac6442bdbd7a4a3ded62f33f7da"
-  integrity sha512-UxDxWn7dl97rKVeVS61vErvw086aCYhDLyvRQZ5Rk65rZKepaFdm53GeqXaKBuOhED4e9uWq34IC3TdSdJJ2Gw==
+  version "17.0.29"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-17.0.29.tgz#7f2e1159231d4a077bb660edab0fde373e375a3d"
+  integrity sha512-tx5jMmMFwx7wBwq/V7OohKDVb/JwJU5qCVkeLMh1//xycAJ/ESuw9aJ9SEtlCZDYi2pBfe4JkisSoAtbOsBNAA==
 
 "@types/node@17.0.18":
   version "17.0.18"
@@ -2074,9 +2309,9 @@
   integrity sha512-eKj4f/BsN/qcculZiRSujogjvp5O/k4lOW5m35NopjZM/QwLOR075a8pJW5hD+Rtdm2DaCVPENS6KtSQnUD6BA==
 
 "@types/node@^14.14.31":
-  version "14.18.12"
-  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.12.tgz#0d4557fd3b94497d793efd4e7d92df2f83b4ef24"
-  integrity sha512-q4jlIR71hUpWTnGhXWcakgkZeHa3CCjcQcnuzU8M891BAWA2jHiziiWEPEkdS5pFsz7H9HJiy8BrK7tBRNrY7A==
+  version "14.18.16"
+  resolved "https://registry.yarnpkg.com/@types/node/-/node-14.18.16.tgz#878f670ba3f00482bf859b6550b6010610fc54b5"
+  integrity sha512-X3bUMdK/VmvrWdoTkz+VCn6nwKwrKCFTHtqwBIaQJNx4RUIBBUFXM00bqPz/DsDd+Icjmzm6/tyYZzeGVqb6/Q==
 
 "@types/parse-json@^4.0.0":
   version "4.0.0"
@@ -2084,14 +2319,14 @@
   integrity sha512-//oorEZjL6sbPcKUaCdIGlIUeH26mgzimjBB77G6XRgnDl/L5wOnpyBGRe/Mmf5CVW3PwEBE1NjiMZ/ssFh4wA==
 
 "@types/prettier@^2.1.5":
-  version "2.4.4"
-  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.4.4.tgz#5d9b63132df54d8909fce1c3f8ca260fdd693e17"
-  integrity sha512-ReVR2rLTV1kvtlWFyuot+d1pkpG2Fw/XKE3PDAdj57rbM97ttSp9JZ2UsP+2EHTylra9cUf6JA7tGwW1INzUrA==
+  version "2.6.0"
+  resolved "https://registry.yarnpkg.com/@types/prettier/-/prettier-2.6.0.tgz#efcbd41937f9ae7434c714ab698604822d890759"
+  integrity sha512-G/AdOadiZhnJp0jXCaBQU449W2h716OW/EoXeYkCytxKL06X1WCXB4DZpp8TpZ8eyIJVS1cw4lrlkkSYU21cDw==
 
-"@types/prop-types@*":
-  version "15.7.4"
-  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
-  integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
+"@types/prop-types@*", "@types/prop-types@^15.7.4":
+  version "15.7.5"
+  resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.5.tgz#5f19d2b85a98e9558036f6a3cacc8819420f05cf"
+  integrity sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==
 
 "@types/q@^1.5.1":
   version "1.5.5"
@@ -2108,24 +2343,24 @@
   resolved "https://registry.yarnpkg.com/@types/range-parser/-/range-parser-1.2.4.tgz#cd667bcfdd025213aafb7ca5915a932590acdcdc"
   integrity sha512-EEhsLsD6UsDM1yFhAvy0Cjr6VwmpMWqFBCb9w07wVugF7w9nfajxLuVmngTIpgS6svCnm6Vaw+MZhoDCKnOfsw==
 
-"@types/react-dom@17.0.16":
+"@types/react-dom@17.0.16", "@types/react-dom@<18.0.0":
   version "17.0.16"
   resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.16.tgz#7caba93cf2806c51e64d620d8dff4bae57e06cc4"
   integrity sha512-DWcXf8EbMrO/gWnQU7Z88Ws/p16qxGpPyjTKTpmBSFKeE+HveVubqGO1CVK7FrwlWD5MuOcvh8gtd0/XO38NdQ==
   dependencies:
     "@types/react" "^17"
 
-"@types/react-dom@<18.0.0":
-  version "17.0.15"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.15.tgz#f2c8efde11521a4b7991e076cb9c70ba3bb0d156"
-  integrity sha512-Tr9VU9DvNoHDWlmecmcsE5ZZiUkYx+nKBzum4Oxe1K0yJVyBlfbq7H3eXjxXqJczBKqPGq3EgfTru4MgKb9+Yw==
-  dependencies:
-    "@types/react" "^17"
-
 "@types/react-dom@>=16.9.0":
-  version "17.0.14"
-  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-17.0.14.tgz#c8f917156b652ddf807711f5becbd2ab018dea9f"
-  integrity sha512-H03xwEP1oXmSfl3iobtmQ/2dHF5aBHr8aUMwyGZya6OW45G+xtdzmq6HkncefiBt5JU8DVyaWl/nWZbjZCnzAQ==
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-dom/-/react-dom-18.0.0.tgz#b13f8d098e4b0c45df4f1ed123833143b0c71141"
+  integrity sha512-49897Y0UiCGmxZqpC8Blrf6meL8QUla6eb+BBhn69dTXlmuOlzkfr7HHY/O8J25e1lTUMs+YYxSlVDAaGHCOLg==
+  dependencies:
+    "@types/react" "*"
+
+"@types/react-is@^16.7.1 || ^17.0.0":
+  version "17.0.3"
+  resolved "https://registry.yarnpkg.com/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
+  integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
   dependencies:
     "@types/react" "*"
 
@@ -2154,9 +2389,9 @@
     "@types/react" "^17"
 
 "@types/react-test-renderer@>=16.9.0":
-  version "17.0.1"
-  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-17.0.1.tgz#3120f7d1c157fba9df0118dae20cb0297ee0e06b"
-  integrity sha512-3Fi2O6Zzq/f3QR9dRnlnHso9bMl7weKCviFmfF6B4LS1Uat6Hkm15k0ZAQuDz+UBq6B3+g+NM6IT2nr5QgPzCw==
+  version "18.0.0"
+  resolved "https://registry.yarnpkg.com/@types/react-test-renderer/-/react-test-renderer-18.0.0.tgz#7b7f69ca98821ea5501b21ba24ea7b6139da2243"
+  integrity sha512-C7/5FBJ3g3sqUahguGi03O79b8afNeSD6T8/GU50oQrJCU0bVCCGQHaGKUbg2Ce8VQEEqTw8/HiS6lXHHdgkdQ==
   dependencies:
     "@types/react" "*"
 
@@ -2167,23 +2402,14 @@
   dependencies:
     "@types/react" "*"
 
-"@types/react-transition-group@^4.2.0":
+"@types/react-transition-group@^4.4.4":
   version "4.4.4"
   resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.4.tgz#acd4cceaa2be6b757db61ed7b432e103242d163e"
   integrity sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==
   dependencies:
     "@types/react" "*"
 
-"@types/react@*", "@types/react@>=16.9.0":
-  version "17.0.43"
-  resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.43.tgz#4adc142887dd4a2601ce730bc56c3436fdb07a55"
-  integrity sha512-8Q+LNpdxf057brvPu1lMtC5Vn7J119xrP1aq4qiaefNioQUYANF/CYeK4NsKorSZyUGJ66g0IM+4bbjwx45o2A==
-  dependencies:
-    "@types/prop-types" "*"
-    "@types/scheduler" "*"
-    csstype "^3.0.2"
-
-"@types/react@17.0.44", "@types/react@^17":
+"@types/react@*", "@types/react@17.0.44", "@types/react@>=16.9.0", "@types/react@^17":
   version "17.0.44"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.44.tgz#c3714bd34dd551ab20b8015d9d0dbec812a51ec7"
   integrity sha512-Ye0nlw09GeMp2Suh8qoOv0odfgCoowfM/9MG6WeRD60Gq9wS90bdkdRtYbRkNhXOpG4H+YXGvj4wOWhAC0LJ1g==
@@ -2199,10 +2425,10 @@
   dependencies:
     "@types/node" "*"
 
-"@types/retry@^0.12.0":
-  version "0.12.1"
-  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.1.tgz#d8f1c0d0dc23afad6dc16a9e993a0865774b4065"
-  integrity sha512-xoDlM2S4ortawSWORYqsdU+2rxdh4LRW9ytc3zmT37RIKQh6IHyKwwtKhKis9ah8ol07DCkZxPt8BBvPjC6v4g==
+"@types/retry@0.12.0":
+  version "0.12.0"
+  resolved "https://registry.yarnpkg.com/@types/retry/-/retry-0.12.0.tgz#2b35eccfcee7d38cd72ad99232fbd58bffb3c84d"
+  integrity sha512-wWKOClTTiizcZhXnPY4wikVAwmdYHp8q6DmC+EJUzAMsycb7HB32Kh9RN4+0gExjmPmZSAQjgURXIGATPegAvA==
 
 "@types/scheduler@*":
   version "0.16.2"
@@ -2289,21 +2515,28 @@
   dependencies:
     "@types/yargs-parser" "*"
 
+"@types/yargs@^17.0.8":
+  version "17.0.10"
+  resolved "https://registry.yarnpkg.com/@types/yargs/-/yargs-17.0.10.tgz#591522fce85d8739bca7b8bb90d048e4478d186a"
+  integrity sha512-gmEaFwpj/7f/ROdtIlci1R1VYU1J4j95m8T+Tj3iBgiBFKg1foE/PSl93bBd5T9LDXNPo8UlNN6W0qwD8O5OaA==
+  dependencies:
+    "@types/yargs-parser" "*"
+
 "@types/yauzl@^2.9.1":
-  version "2.9.2"
-  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.9.2.tgz#c48e5d56aff1444409e39fa164b0b4d4552a7b7a"
-  integrity sha512-8uALY5LTvSuHgloDVUvWP3pIauILm+8/0pDMokuDYIoNsOkSwd5AiHBTSEJjKTDcZr5z8UpgOWZkxBF4iJftoA==
+  version "2.10.0"
+  resolved "https://registry.yarnpkg.com/@types/yauzl/-/yauzl-2.10.0.tgz#b3248295276cf8c6f153ebe6a9aba0c988cb2599"
+  integrity sha512-Cn6WYCm0tXv8p6k+A8PvbDG763EDpBoTzHdA+Q/MF6H3sapGjCm9NzoaJncJS9tUKSuCoDs9XHxYYsQDgxR6kw==
   dependencies:
     "@types/node" "*"
 
 "@typescript-eslint/eslint-plugin@^5.5.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.18.0.tgz#950df411cec65f90d75d6320a03b2c98f6c3af7d"
-  integrity sha512-tzrmdGMJI/uii9/V6lurMo4/o+dMTKDH82LkNjhJ3adCW22YQydoRs5MwTiqxGF9CSYxPxQ7EYb4jLNlIs+E+A==
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.21.0.tgz#bfc22e0191e6404ab1192973b3b4ea0461c1e878"
+  integrity sha512-fTU85q8v5ZLpoZEyn/u1S2qrFOhi33Edo2CZ0+q1gDaWWm0JuPh3bgOyU8lM0edIEYgKLDkPFiZX2MOupgjlyg==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.18.0"
-    "@typescript-eslint/type-utils" "5.18.0"
-    "@typescript-eslint/utils" "5.18.0"
+    "@typescript-eslint/scope-manager" "5.21.0"
+    "@typescript-eslint/type-utils" "5.21.0"
+    "@typescript-eslint/utils" "5.21.0"
     debug "^4.3.2"
     functional-red-black-tree "^1.0.1"
     ignore "^5.1.8"
@@ -2312,75 +2545,75 @@
     tsutils "^3.21.0"
 
 "@typescript-eslint/experimental-utils@^5.0.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.18.0.tgz#a6b5662e6b0452cb0e75a13662ce3b33cd1be59d"
-  integrity sha512-hypiw5N0aM2aH91/uMmG7RpyUH3PN/iOhilMwkMFZIbm/Bn/G3ZnbaYdSoAN4PG/XHQjdhBYLi0ZoRZsRYT4hA==
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/experimental-utils/-/experimental-utils-5.21.0.tgz#489275ca792f5de7e0d1f4be1f15576ea56b6ca2"
+  integrity sha512-mzF6ert/6iQoESV0z9v5/mEaJRKL4fv68rHoZ6exM38xjxkw4MNx54B7ferrnMTM/GIRKLDaJ3JPRi+Dxa5Hlg==
   dependencies:
-    "@typescript-eslint/utils" "5.18.0"
+    "@typescript-eslint/utils" "5.21.0"
 
 "@typescript-eslint/parser@^5.5.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.18.0.tgz#2bcd4ff21df33621df33e942ccb21cb897f004c6"
-  integrity sha512-+08nYfurBzSSPndngnHvFw/fniWYJ5ymOrn/63oMIbgomVQOvIDhBoJmYZ9lwQOCnQV9xHGvf88ze3jFGUYooQ==
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/parser/-/parser-5.21.0.tgz#6cb72673dbf3e1905b9c432175a3c86cdaf2071f"
+  integrity sha512-8RUwTO77hstXUr3pZoWZbRQUxXcSXafZ8/5gpnQCfXvgmP9gpNlRGlWzvfbEQ14TLjmtU8eGnONkff8U2ui2Eg==
   dependencies:
-    "@typescript-eslint/scope-manager" "5.18.0"
-    "@typescript-eslint/types" "5.18.0"
-    "@typescript-eslint/typescript-estree" "5.18.0"
+    "@typescript-eslint/scope-manager" "5.21.0"
+    "@typescript-eslint/types" "5.21.0"
+    "@typescript-eslint/typescript-estree" "5.21.0"
     debug "^4.3.2"
 
-"@typescript-eslint/scope-manager@5.18.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.18.0.tgz#a7d7b49b973ba8cebf2a3710eefd457ef2fb5505"
-  integrity sha512-C0CZML6NyRDj+ZbMqh9FnPscg2PrzSaVQg3IpTmpe0NURMVBXlghGZgMYqBw07YW73i0MCqSDqv2SbywnCS8jQ==
+"@typescript-eslint/scope-manager@5.21.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.21.0.tgz#a4b7ed1618f09f95e3d17d1c0ff7a341dac7862e"
+  integrity sha512-XTX0g0IhvzcH/e3393SvjRCfYQxgxtYzL3UREteUneo72EFlt7UNoiYnikUtmGVobTbhUDByhJ4xRBNe+34kOQ==
   dependencies:
-    "@typescript-eslint/types" "5.18.0"
-    "@typescript-eslint/visitor-keys" "5.18.0"
+    "@typescript-eslint/types" "5.21.0"
+    "@typescript-eslint/visitor-keys" "5.21.0"
 
-"@typescript-eslint/type-utils@5.18.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.18.0.tgz#62dbfc8478abf36ba94a90ddf10be3cc8e471c74"
-  integrity sha512-vcn9/6J5D6jtHxpEJrgK8FhaM8r6J1/ZiNu70ZUJN554Y3D9t3iovi6u7JF8l/e7FcBIxeuTEidZDR70UuCIfA==
+"@typescript-eslint/type-utils@5.21.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/type-utils/-/type-utils-5.21.0.tgz#ff89668786ad596d904c21b215e5285da1b6262e"
+  integrity sha512-MxmLZj0tkGlkcZCSE17ORaHl8Th3JQwBzyXL/uvC6sNmu128LsgjTX0NIzy+wdH2J7Pd02GN8FaoudJntFvSOw==
   dependencies:
-    "@typescript-eslint/utils" "5.18.0"
+    "@typescript-eslint/utils" "5.21.0"
     debug "^4.3.2"
     tsutils "^3.21.0"
 
-"@typescript-eslint/types@5.18.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.18.0.tgz#4f0425d85fdb863071680983853c59a62ce9566e"
-  integrity sha512-bhV1+XjM+9bHMTmXi46p1Led5NP6iqQcsOxgx7fvk6gGiV48c6IynY0apQb7693twJDsXiVzNXTflhplmaiJaw==
+"@typescript-eslint/types@5.21.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.21.0.tgz#8cdb9253c0dfce3f2ab655b9d36c03f72e684017"
+  integrity sha512-XnOOo5Wc2cBlq8Lh5WNvAgHzpjnEzxn4CJBwGkcau7b/tZ556qrWXQz4DJyChYg8JZAD06kczrdgFPpEQZfDsA==
 
-"@typescript-eslint/typescript-estree@5.18.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.18.0.tgz#6498e5ee69a32e82b6e18689e2f72e4060986474"
-  integrity sha512-wa+2VAhOPpZs1bVij9e5gyVu60ReMi/KuOx4LKjGx2Y3XTNUDJgQ+5f77D49pHtqef/klglf+mibuHs9TrPxdQ==
+"@typescript-eslint/typescript-estree@5.21.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.21.0.tgz#9f0c233e28be2540eaed3df050f0d54fb5aa52de"
+  integrity sha512-Y8Y2T2FNvm08qlcoSMoNchh9y2Uj3QmjtwNMdRQkcFG7Muz//wfJBGBxh8R7HAGQFpgYpdHqUpEoPQk+q9Kjfg==
   dependencies:
-    "@typescript-eslint/types" "5.18.0"
-    "@typescript-eslint/visitor-keys" "5.18.0"
+    "@typescript-eslint/types" "5.21.0"
+    "@typescript-eslint/visitor-keys" "5.21.0"
     debug "^4.3.2"
     globby "^11.0.4"
     is-glob "^4.0.3"
     semver "^7.3.5"
     tsutils "^3.21.0"
 
-"@typescript-eslint/utils@5.18.0", "@typescript-eslint/utils@^5.13.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.18.0.tgz#27fc84cf95c1a96def0aae31684cb43a37e76855"
-  integrity sha512-+hFGWUMMri7OFY26TsOlGa+zgjEy1ssEipxpLjtl4wSll8zy85x0GrUSju/FHdKfVorZPYJLkF3I4XPtnCTewA==
+"@typescript-eslint/utils@5.21.0", "@typescript-eslint/utils@^5.13.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.21.0.tgz#51d7886a6f0575e23706e5548c7e87bce42d7c18"
+  integrity sha512-q/emogbND9wry7zxy7VYri+7ydawo2HDZhRZ5k6yggIvXa7PvBbAAZ4PFH/oZLem72ezC4Pr63rJvDK/sTlL8Q==
   dependencies:
     "@types/json-schema" "^7.0.9"
-    "@typescript-eslint/scope-manager" "5.18.0"
-    "@typescript-eslint/types" "5.18.0"
-    "@typescript-eslint/typescript-estree" "5.18.0"
+    "@typescript-eslint/scope-manager" "5.21.0"
+    "@typescript-eslint/types" "5.21.0"
+    "@typescript-eslint/typescript-estree" "5.21.0"
     eslint-scope "^5.1.1"
     eslint-utils "^3.0.0"
 
-"@typescript-eslint/visitor-keys@5.18.0":
-  version "5.18.0"
-  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.18.0.tgz#c7c07709823804171d569017f3b031ced7253e60"
-  integrity sha512-Hf+t+dJsjAKpKSkg3EHvbtEpFFb/1CiOHnvI8bjHgOD4/wAw3gKrA0i94LrbekypiZVanJu3McWJg7rWDMzRTg==
+"@typescript-eslint/visitor-keys@5.21.0":
+  version "5.21.0"
+  resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.21.0.tgz#453fb3662409abaf2f8b1f65d515699c888dd8ae"
+  integrity sha512-SX8jNN+iHqAF0riZQMkm7e8+POXa/fXw5cxL+gjpyP+FI+JVNhii53EmQgDAfDcBpFekYSlO0fGytMQwRiMQCA==
   dependencies:
-    "@typescript-eslint/types" "5.18.0"
+    "@typescript-eslint/types" "5.21.0"
     eslint-visitor-keys "^3.0.0"
 
 "@webassemblyjs/ast@1.11.1":
@@ -2520,9 +2753,9 @@
   integrity sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==
 
 abab@^2.0.3, abab@^2.0.5:
-  version "2.0.5"
-  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.5.tgz#c0b678fb32d60fc1219c784d6a826fe385aeb79a"
-  integrity sha512-9IK9EadsbHo6jLWIpxpR6pL0sazTXV6+SQv25ZB+F7Bj9mJNaOc4nCRabwd5M/JwmUa8idz6Eci6eKfJryPs6Q==
+  version "2.0.6"
+  resolved "https://registry.yarnpkg.com/abab/-/abab-2.0.6.tgz#41b80f2c871d19686216b82309231cfd3cb3d291"
+  integrity sha512-j2afSsaIENvHZN2B8GOpF566vZ5WVk5opAiMTvWgaQT8DkbOqsTfvNAvHoRGU2zzP8cPoqys+xHTRDWW8L+/BA==
 
 accepts@~1.3.4, accepts@~1.3.5, accepts@~1.3.8:
   version "1.3.8"
@@ -2570,9 +2803,9 @@ acorn@^7.0.0, acorn@^7.1.1:
   integrity sha512-nQyp0o1/mNdbTO1PO6kHkwSrmgZ0MT/jCCpNiwbUjGoRN4dlBhqJtoQuCnEOKzgTVwg0ZWiCoQy6SxMebQVh8A==
 
 acorn@^8.2.4, acorn@^8.4.1, acorn@^8.5.0, acorn@^8.7.0:
-  version "8.7.0"
-  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.0.tgz#90951fde0f8f09df93549481e5fc141445b791cf"
-  integrity sha512-V/LGr1APy+PXIwKebEWrkZPwoeoF+w1jiOBUmuxuiUIaOHtob8Qc9BTrYo7VuI5fR8tqsy+buA2WFooR5olqvQ==
+  version "8.7.1"
+  resolved "https://registry.yarnpkg.com/acorn/-/acorn-8.7.1.tgz#0197122c843d1bf6d0a5e83220a788f278f63c30"
+  integrity sha512-Xx54uLJQZ19lKygFXOWsscKUbsBZW0CPykPhVQdhIeIwrbPmJzqeASDInc8nKBnp/JT6igTs82qPXz069H8I/A==
 
 address@^1.0.1, address@^1.1.2:
   version "1.1.2"
@@ -2757,22 +2990,24 @@ array-union@^2.1.0:
   integrity sha512-HGyxoOTYUyCM6stUe6EJgnd4EoewAI7zMdfqO+kGjnlZmBDz/cR5pf8r/cR4Wq60sL/p0IkcjUEEPwS3GFrIyw==
 
 array.prototype.flat@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.2.5.tgz#07e0975d84bbc7c48cd1879d609e682598d33e13"
-  integrity sha512-KaYU+S+ndVqyUnignHftkwc58o3uVU1jzczILJ1tN2YaIZpFIKBiP/x/j97E5MVPsaCloPbqWLB/8qCTVvT2qg==
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.flat/-/array.prototype.flat-1.3.0.tgz#0b0c1567bf57b38b56b4c97b8aa72ab45e4adc7b"
+  integrity sha512-12IUEkHsAhA4DY5s0FPgNXIdc8VRSqD9Zp78a5au9abH/SOBrsp082JOWFNTjkMozh8mqcdiKuaLGhPeYztxSw==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.19.0"
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
 
 array.prototype.flatmap@^1.2.5:
-  version "1.2.5"
-  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.2.5.tgz#908dc82d8a406930fdf38598d51e7411d18d4446"
-  integrity sha512-08u6rVyi1Lj7oqWbS9nUxliETrtIROT4XGTA4D/LWGten6E3ocm7cy9SIrmNHOL5XVbVuckUp3X6Xyg8/zpvHA==
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/array.prototype.flatmap/-/array.prototype.flatmap-1.3.0.tgz#a7e8ed4225f4788a70cd910abcf0791e76a5534f"
+  integrity sha512-PZC9/8TKAIxcWKdyeb77EzULHPrIX/tIZebLJUQOMR1OwYosT8yggdfWScfTBCDj5utONvOuPQQumYsU2ULbkg==
   dependencies:
-    call-bind "^1.0.0"
+    call-bind "^1.0.2"
     define-properties "^1.1.3"
-    es-abstract "^1.19.0"
+    es-abstract "^1.19.2"
+    es-shim-unscopables "^1.0.0"
 
 asap@~2.0.6:
   version "2.0.6"
@@ -2801,19 +3036,14 @@ astral-regex@^2.0.0:
   resolved "https://registry.yarnpkg.com/astral-regex/-/astral-regex-2.0.0.tgz#483143c567aeed4785759c0865786dc77d7d2e31"
   integrity sha512-Z7tMw1ytTXt5jqMcOP+OQteU1VuNK9Y02uuJtKQ1Sv69jXQKKg5cibLwGJow8yzZP+eAc18EmLGPal0bp36rvQ==
 
-async@0.9.x:
-  version "0.9.2"
-  resolved "https://registry.yarnpkg.com/async/-/async-0.9.2.tgz#aea74d5e61c1f899613bf64bda66d4c78f2fd17d"
-  integrity sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=
-
 async@^2.6.2:
-  version "2.6.3"
-  resolved "https://registry.yarnpkg.com/async/-/async-2.6.3.tgz#d72625e2344a3656e3a3ad4fa749fa83299d82ff"
-  integrity sha512-zflvls11DCy+dQWzTW2dzuilv8Z5X/pjfmZOWba6TNIVDm+2UDaJmXSOXlasHKfNBs8oo3M0aT50fDEWfKZjXg==
+  version "2.6.4"
+  resolved "https://registry.yarnpkg.com/async/-/async-2.6.4.tgz#706b7ff6084664cd7eae713f6f965433b5504221"
+  integrity sha512-mzo5dfJYwAn29PeiJ0zvwTo04zj8HDJj0Mn8TD7sno7q12prdbnasKJHhkm2c1LgrhlJ0teaea8860oxi51mGA==
   dependencies:
     lodash "^4.17.14"
 
-async@^3.2.0:
+async@^3.2.0, async@^3.2.3:
   version "3.2.3"
   resolved "https://registry.yarnpkg.com/async/-/async-3.2.3.tgz#ac53dafd3f4720ee9e8a160628f18ea91df196c9"
   integrity sha512-spZRyzKL5l5BZQrr/6m/SqFdBN0q3OCI0f9rjfBzCMBIP4p75P620rR3gTmaksNOhmzgdxcaxdNfMy6anrbM0g==
@@ -2833,13 +3063,13 @@ atob@^2.1.2:
   resolved "https://registry.yarnpkg.com/atob/-/atob-2.1.2.tgz#6d9517eb9e030d2436666651e86bd9f6f13533c9"
   integrity sha512-Wm6ukoaOGJi/73p/cl2GvLjTI5JM1k/O14isD73YML8StrH/7/lRFgmg8nICZgD3bZZvjwCGxtMOD3wWNAu8cg==
 
-autoprefixer@^10.4.4:
-  version "10.4.4"
-  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.4.tgz#3e85a245b32da876a893d3ac2ea19f01e7ea5a1e"
-  integrity sha512-Tm8JxsB286VweiZ5F0anmbyGiNI3v3wGv3mz9W+cxEDYB/6jbnj6GM9H9mK3wIL8ftgl+C07Lcwb8PG5PCCPzA==
+autoprefixer@^10.4.5:
+  version "10.4.5"
+  resolved "https://registry.yarnpkg.com/autoprefixer/-/autoprefixer-10.4.5.tgz#662193c744094b53d3637f39be477e07bd904998"
+  integrity sha512-Fvd8yCoA7lNX/OUllvS+aS1I7WRBclGXsepbvT8ZaPgrH24rgXpZzF0/6Hh3ZEkwg+0AES/Osd196VZmYoEFtw==
   dependencies:
     browserslist "^4.20.2"
-    caniuse-lite "^1.0.30001317"
+    caniuse-lite "^1.0.30001332"
     fraction.js "^4.2.0"
     normalize-range "^0.1.2"
     picocolors "^1.0.0"
@@ -2887,9 +3117,9 @@ babel-jest@^27.4.2, babel-jest@^27.5.1:
     slash "^3.0.0"
 
 babel-loader@^8.2.3:
-  version "8.2.4"
-  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.4.tgz#95f5023c791b2e9e2ca6f67b0984f39c82ff384b"
-  integrity sha512-8dytA3gcvPPPv4Grjhnt8b5IIiTcq/zeXOPk4iTYI0SVXcsmuGg7JtBRDp8S9X+gJfhQ8ektjXZlDu1Bb33U8A==
+  version "8.2.5"
+  resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.5.tgz#d45f585e654d5a5d90f5350a779d7647c5ed512e"
+  integrity sha512-OSiFfH89LrEMiWd4pLNqGz4CwJDtbs2ZVc+iGu2HrkRfPxId9F2anQj38IxWpmRfsUY0aBZYi1EFcd3mhtRMLQ==
   dependencies:
     find-cache-dir "^3.3.1"
     loader-utils "^2.0.0"
@@ -2924,6 +3154,15 @@ babel-plugin-jest-hoist@^27.5.1:
     "@types/babel__core" "^7.0.0"
     "@types/babel__traverse" "^7.0.6"
 
+babel-plugin-macros@^2.6.1:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138"
+  integrity sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==
+  dependencies:
+    "@babel/runtime" "^7.7.2"
+    cosmiconfig "^6.0.0"
+    resolve "^1.12.0"
+
 babel-plugin-macros@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz#9ef6dc74deb934b4db344dc973ee851d148c50c1"
@@ -3076,26 +3315,28 @@ bluebird@^3.5.5, bluebird@^3.7.2:
   resolved "https://registry.yarnpkg.com/bluebird/-/bluebird-3.7.2.tgz#9f229c15be272454ffa973ace0dbee79a1b0c36f"
   integrity sha512-XpNj6GDQzdfW+r2Wnn7xiSAd7TM3jzkxGXBGTtWKuSXv1xUV+azxAm8jdWZN06QTQk+2N2XB9jRDkvbmQmcRtg==
 
-body-parser@1.19.2:
-  version "1.19.2"
-  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.19.2.tgz#4714ccd9c157d44797b8b5607d72c0b89952f26e"
-  integrity sha512-SAAwOxgoCKMGs9uUAUFHygfLAyaniaoun6I8mFY9pRAJL9+Kec34aU+oIjDhTycub1jozEfEwx1W1IuOYxVSFw==
+body-parser@1.20.0:
+  version "1.20.0"
+  resolved "https://registry.yarnpkg.com/body-parser/-/body-parser-1.20.0.tgz#3de69bd89011c11573d7bfee6a64f11b6bd27cc5"
+  integrity sha512-DfJ+q6EPcGKZD1QWUjSpqp+Q7bDQTsQIF4zfUAtZ6qk+H/3/QRhg9CEp39ss+/T2vw0+HaidC0ecJj/DRLIaKg==
   dependencies:
     bytes "3.1.2"
     content-type "~1.0.4"
     debug "2.6.9"
-    depd "~1.1.2"
-    http-errors "1.8.1"
+    depd "2.0.0"
+    destroy "1.2.0"
+    http-errors "2.0.0"
     iconv-lite "0.4.24"
-    on-finished "~2.3.0"
-    qs "6.9.7"
-    raw-body "2.4.3"
+    on-finished "2.4.1"
+    qs "6.10.3"
+    raw-body "2.5.1"
     type-is "~1.6.18"
+    unpipe "1.0.0"
 
 bonjour-service@^1.0.11:
-  version "1.0.11"
-  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.0.11.tgz#5418e5c1ac91c89a406f853a942e7892829c0d89"
-  integrity sha512-drMprzr2rDTCtgEE3VgdA9uUFaUHF+jXduwYSThHJnKMYM+FhI9Z3ph+TX3xy0LtgYHae6CHYPJ/2UnK8nQHcA==
+  version "1.0.12"
+  resolved "https://registry.yarnpkg.com/bonjour-service/-/bonjour-service-1.0.12.tgz#28fbd4683f5f2e36feedb833e24ba661cac960c3"
+  integrity sha512-pMmguXYCu63Ug37DluMKEHdxc+aaIf/ay4YbF8Gxtba+9d3u+rmEWy61VK3Z3hp8Rskok3BunHYnG0dUHAsblw==
   dependencies:
     array-flatten "^2.1.2"
     dns-equal "^1.0.0"
@@ -3115,6 +3356,13 @@ brace-expansion@^1.1.7:
     balanced-match "^1.0.0"
     concat-map "0.0.1"
 
+brace-expansion@^2.0.1:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/brace-expansion/-/brace-expansion-2.0.1.tgz#1edc459e0f0c548486ecf9fc99f2221364b9a0ae"
+  integrity sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==
+  dependencies:
+    balanced-match "^1.0.0"
+
 braces@^3.0.2, braces@~3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/braces/-/braces-3.0.2.tgz#3454e1a462ee8d599e236df336cd9ea4f8afe107"
@@ -3127,15 +3375,15 @@ browser-process-hrtime@^1.0.0:
   resolved "https://registry.yarnpkg.com/browser-process-hrtime/-/browser-process-hrtime-1.0.0.tgz#3c9b4b7d782c8121e56f10106d84c0d0ffc94626"
   integrity sha512-9o5UecI3GhkpM6DrXr69PblIuWxPKk9Y0jHBRhdocZ2y7YECBFCsHm79Pr3OyR2AvjhDkabFJaDJMYRazHgsow==
 
-browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.17.5, browserslist@^4.18.1, browserslist@^4.19.1, browserslist@^4.20.2:
-  version "4.20.2"
-  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.2.tgz#567b41508757ecd904dab4d1c646c612cd3d4f88"
-  integrity sha512-CQOBCqp/9pDvDbx3xfMi+86pr4KXIf2FDkTTdeuYw8OxS9t898LA1Khq57gtufFILXpfgsSx5woNgsBgvGjpsA==
+browserslist@^4.0.0, browserslist@^4.14.5, browserslist@^4.16.6, browserslist@^4.17.5, browserslist@^4.18.1, browserslist@^4.20.2, browserslist@^4.20.3:
+  version "4.20.3"
+  resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.20.3.tgz#eb7572f49ec430e054f56d52ff0ebe9be915f8bf"
+  integrity sha512-NBhymBQl1zM0Y5dQT/O+xiLP9/rzOIQdKM/eMJBAq7yBgaB6krIYLGejrwVYnSHZdqjscB1SPuAjHwxjvN6Wdg==
   dependencies:
-    caniuse-lite "^1.0.30001317"
-    electron-to-chromium "^1.4.84"
+    caniuse-lite "^1.0.30001332"
+    electron-to-chromium "^1.4.118"
     escalade "^3.1.1"
-    node-releases "^2.0.2"
+    node-releases "^2.0.3"
     picocolors "^1.0.0"
 
 bser@2.1.1:
@@ -3229,10 +3477,10 @@ caniuse-api@^3.0.0:
     lodash.memoize "^4.1.2"
     lodash.uniq "^4.5.0"
 
-caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001317:
-  version "1.0.30001325"
-  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001325.tgz#2b4ad19b77aa36f61f2eaf72e636d7481d55e606"
-  integrity sha512-sB1bZHjseSjDtijV1Hb7PB2Zd58Kyx+n/9EotvZ4Qcz2K3d0lWB8dB4nb8wN/TsOGFq3UuAm0zQZNQ4SoR7TrQ==
+caniuse-lite@^1.0.0, caniuse-lite@^1.0.30001332:
+  version "1.0.30001332"
+  resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001332.tgz#39476d3aa8d83ea76359c70302eafdd4a1d727dd"
+  integrity sha512-10T30NYOEQtN6C11YGg411yebhvpnC6Z102+B95eAsN0oB6KUs01ivE8u+G6FMIRtIrVlYXhL+LUwQ3/hXwDWw==
 
 case-sensitive-paths-webpack-plugin@^2.4.0:
   version "2.4.0"
@@ -3252,7 +3500,7 @@ chalk@4.1.1:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@4.1.2, chalk@^4.0.2, chalk@^4.1.1, chalk@^4.1.2:
+chalk@4.1.2, chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2:
   version "4.1.2"
   resolved "https://registry.yarnpkg.com/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01"
   integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA==
@@ -3277,14 +3525,6 @@ chalk@^3.0.0:
     ansi-styles "^4.1.0"
     supports-color "^7.1.0"
 
-chalk@^4.0.0, chalk@^4.1.0:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.0.tgz"
-  integrity sha512-qwx12AxXe2Q5xQ43Ac//I6v5aXTipYrSESdOgzrN+9XjgEpyjpKuvSGaN4qE93f7TQTlerQQ8S+EQ0EyDoVL1A==
-  dependencies:
-    ansi-styles "^4.1.0"
-    supports-color "^7.1.0"
-
 char-regex@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/char-regex/-/char-regex-1.0.2.tgz#d744358226217f981ed58f479b1d6bcc29545dcf"
@@ -3385,13 +3625,13 @@ cli-spinners@^2.5.0:
   integrity sha512-x/5fWmGMnbKQAaNwN+UZlV79qBLM9JFnJuJ03gIi5whrob0xV0ofNVHy9DhwGdsMJQc2OKv0oGmLzvaqvAVv+g==
 
 cli-table3@~0.6.1:
-  version "0.6.1"
-  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.1.tgz#36ce9b7af4847f288d3cdd081fbd09bf7bd237b8"
-  integrity sha512-w0q/enDHhPLq44ovMGdQeeDLvwxwavsJX7oQGYt/LrBlYsyaxyDnp6z3QzFut/6kLLKnlcUVJLrpB7KBfgG/RA==
+  version "0.6.2"
+  resolved "https://registry.yarnpkg.com/cli-table3/-/cli-table3-0.6.2.tgz#aaf5df9d8b5bf12634dc8b3040806a0c07120d2a"
+  integrity sha512-QyavHCaIC80cMivimWu4aWHilIpiDpfm3hGmqAmXVL1UsnbLuBSMd21hTX6VY4ZSDSM73ESLeF8TOYId3rBTbw==
   dependencies:
     string-width "^4.2.0"
   optionalDependencies:
-    colors "1.4.0"
+    "@colors/colors" "1.5.0"
 
 cli-truncate@^2.1.0:
   version "2.1.0"
@@ -3420,7 +3660,7 @@ clone@^1.0.2:
   resolved "https://registry.yarnpkg.com/clone/-/clone-1.0.4.tgz#da309cc263df15994c688ca902179ca3c7cd7c7e"
   integrity sha1-2jCcwmPfFZlMaIypAheco8fNfH4=
 
-clsx@^1.0.4:
+clsx@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
   integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
@@ -3478,11 +3718,6 @@ colorette@^2.0.10, colorette@^2.0.16:
   resolved "https://registry.yarnpkg.com/colorette/-/colorette-2.0.16.tgz#713b9af84fdb000139f04546bd4a93f62a5085da"
   integrity sha512-hUewv7oMjCp+wkBv5Rm0v87eJhq4woh5rSR+42YSQJKecCqgIqNkZ6lAlQms/BwHPJA5NKMRlpxPRv0n8HQW6g==
 
-colors@1.4.0:
-  version "1.4.0"
-  resolved "https://registry.yarnpkg.com/colors/-/colors-1.4.0.tgz#c50491479d4c1bdaed2c9ced32cf7c7dc2360f78"
-  integrity sha512-a+UqTh4kgZg/SlGvfbzDHpgRu7AAQOmmqRHJnxhRZICKFUT91brVhNNt58CMWU9PsBbv3PDCZUHbVxuDiH2mtA==
-
 combined-stream@^1.0.6, combined-stream@^1.0.8, combined-stream@~1.0.6:
   version "1.0.8"
   resolved "https://registry.yarnpkg.com/combined-stream/-/combined-stream-1.0.8.tgz#c3d45a8b34fd730631a110a8a2520682b31d5a7f"
@@ -3603,7 +3838,7 @@ content-type@~1.0.4:
   resolved "https://registry.yarnpkg.com/content-type/-/content-type-1.0.4.tgz#e138cc75e040c727b1966fe5e5f8c9aee256fe3b"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@^1.4.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
+convert-source-map@^1.4.0, convert-source-map@^1.5.0, convert-source-map@^1.6.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.yarnpkg.com/convert-source-map/-/convert-source-map-1.8.0.tgz#f3373c32d21b4d780dd8004514684fb791ca4369"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -3615,7 +3850,12 @@ cookie-signature@1.0.6:
   resolved "https://registry.yarnpkg.com/cookie-signature/-/cookie-signature-1.0.6.tgz#e303a882b342cc3ee8ca513a79999734dab3ae2c"
   integrity sha1-4wOogrNCzD7oylE6eZmXNNqzriw=
 
-cookie@0.4.2, cookie@^0.4.2:
+cookie@0.5.0:
+  version "0.5.0"
+  resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.5.0.tgz#d1f5d71adec6558c58f389987c366aa47e994f8b"
+  integrity sha512-YZ3GUyn/o8gfKJlnlX7g7xq4gyO6OSuhGPKaaGssGB2qgDUS0gPgtTvoyZLTt9Ab6dC4hfc9dV5arkvc/OCmrw==
+
+cookie@^0.4.2:
   version "0.4.2"
   resolved "https://registry.yarnpkg.com/cookie/-/cookie-0.4.2.tgz#0e41f24de5ecf317947c82fc789e06a884824432"
   integrity sha512-aSWTXFzaKWkvHO1Ny/s+ePFpvKsPnjc551iI41v3ny/ow6tBG5Vd+FuqGNhh1LxOmVzOlGUriIlOaokOvhaStA==
@@ -3628,22 +3868,22 @@ copy-to-clipboard@3.3.1:
     toggle-selection "^1.0.6"
 
 core-js-compat@^3.20.2, core-js-compat@^3.21.0:
-  version "3.21.1"
-  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.21.1.tgz#cac369f67c8d134ff8f9bd1623e3bc2c42068c82"
-  integrity sha512-gbgX5AUvMb8gwxC7FLVWYT7Kkgu/y7+h/h1X43yJkNqhlK2fuYyQimqvKGNZFAY6CKii/GFKJ2cp/1/42TN36g==
+  version "3.22.2"
+  resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.22.2.tgz#eec621eb276518efcf718d0a6d9d042c3d0cad48"
+  integrity sha512-Fns9lU06ZJ07pdfmPMu7OnkIKGPKDzXKIiuGlSvHHapwqMUF2QnnsWwtueFZtSyZEilP0o6iUeHQwpn7LxtLUw==
   dependencies:
-    browserslist "^4.19.1"
+    browserslist "^4.20.2"
     semver "7.0.0"
 
 core-js-pure@^3.20.2, core-js-pure@^3.8.1:
-  version "3.21.1"
-  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.21.1.tgz#8c4d1e78839f5f46208de7230cebfb72bc3bdb51"
-  integrity sha512-12VZfFIu+wyVbBebyHmRTuEE/tZrB4tJToWcwAMcsp3h4+sHR+fMJWbKpYiCRWlhFBq+KNyO8rIV9rTkeVmznQ==
+  version "3.22.2"
+  resolved "https://registry.yarnpkg.com/core-js-pure/-/core-js-pure-3.22.2.tgz#c10bffdc3028d25c2aae505819a05543db61544f"
+  integrity sha512-Lb+/XT4WC4PaCWWtZpNPaXmjiNDUe5CJuUtbkMrIM1kb1T/jJoAIp+bkVP/r5lHzMr+ZAAF8XHp7+my6Ol0ysQ==
 
 core-js@^3.19.2:
-  version "3.21.1"
-  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.21.1.tgz#f2e0ddc1fc43da6f904706e8e955bc19d06a0d94"
-  integrity sha512-FRq5b/VMrWlrmCzwRrpDYNxyHP9BcAZC+xHJaqTgIE5091ZV1NTmyh0sGOg5XqpnHvR0svdy0sv1gWA1zmhxig==
+  version "3.22.2"
+  resolved "https://registry.yarnpkg.com/core-js/-/core-js-3.22.2.tgz#3ea0a245b0895fa39d1faa15fe75d91ade504a01"
+  integrity sha512-Z5I2vzDnEIqO2YhELVMFcL1An2CIsFe9Q7byZhs8c/QxummxZlAHw33TUHbIte987LkisOgL0LwQ1P9D6VISnA==
 
 core-util-is@1.0.2:
   version "1.0.2"
@@ -3666,7 +3906,7 @@ cosmiconfig@^6.0.0:
     path-type "^4.0.0"
     yaml "^1.7.2"
 
-cosmiconfig@^7.0.0, cosmiconfig@^7.0.1:
+cosmiconfig@^7.0.0:
   version "7.0.1"
   resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-7.0.1.tgz#714d756522cace867867ccb4474c5d01bbae5d6d"
   integrity sha512-a1YWNUV2HwGimB7dU2s1wUMurNKjpx60HxBB6xUM8Re+2s1g1IIfJvFR0/iCF+XHdE0GMTKTuLR32UQff4TEyQ==
@@ -3783,14 +4023,6 @@ css-tree@^1.1.2, css-tree@^1.1.3:
     mdn-data "2.0.14"
     source-map "^0.6.1"
 
-css-vendor@^2.0.8:
-  version "2.0.8"
-  resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
-  integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
-  dependencies:
-    "@babel/runtime" "^7.8.3"
-    is-in-browser "^1.0.2"
-
 css-what@^3.2.1:
   version "3.4.2"
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.4.2.tgz#ea7026fcb01777edbde52124e21f327e7ae950e4"
@@ -3898,12 +4130,7 @@ cssstyle@^2.3.0:
   dependencies:
     cssom "~0.3.6"
 
-csstype@^2.5.2:
-  version "2.6.20"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.20.tgz#9229c65ea0b260cf4d3d997cb06288e36a8d6dda"
-  integrity sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA==
-
-csstype@^3.0.2:
+csstype@^3.0.11, csstype@^3.0.2:
   version "3.0.11"
   resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
   integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
@@ -3983,9 +4210,9 @@ date-fns@2.28.0, date-fns@^2.16.1:
   integrity sha512-8d35hViGYx/QH0icHYCeLmsLmMUheMmTyV9Fcm6gvNwdw31yXXH+O85sOBJ+OLnLQMKZowvpKb6FgMIQjcpvQw==
 
 dayjs@^1.10.4:
-  version "1.11.0"
-  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.0.tgz#009bf7ef2e2ea2d5db2e6583d2d39a4b5061e805"
-  integrity sha512-JLC809s6Y948/FuCZPm5IX8rRhQwOiyMb2TfVVQEixG7P8Lm/gt5S7yoQZmC8x1UehI9Pb7sksEt4xx14m+7Ug==
+  version "1.11.1"
+  resolved "https://registry.yarnpkg.com/dayjs/-/dayjs-1.11.1.tgz#90b33a3dda3417258d48ad2771b415def6545eb0"
+  integrity sha512-ER7EjqVAMkRRsxNCC5YqJ9d9VQYuWdGt7aiH2qA5R5wt8ZmWaP2dLUSIK6y/kVzLMlmh1Tvu5xUf4M/wdGJ5KA==
 
 debounce@1.2.1:
   version "1.2.1"
@@ -4063,11 +4290,12 @@ define-lazy-prop@^2.0.0:
   integrity sha512-Ds09qNh8yw3khSjiJjiUInaGX9xlqZDY7JVryGxdxV7NPeuqQfplOpQ66yJFZut3jLa5zOwkXw1g9EI2uKh4Og==
 
 define-properties@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.3.tgz#cf88da6cbee26fe6db7094f61d870cbd84cee9f1"
-  integrity sha512-3MqfYKj2lLzdMSf8ZIZE/V+Zuy+BgD6f164e8K2w7dgnpKArBDerGYpM46IYYcjnkdPNMjPk9A6VFB8+3SKlXQ==
+  version "1.1.4"
+  resolved "https://registry.yarnpkg.com/define-properties/-/define-properties-1.1.4.tgz#0b14d7bd7fbeb2f3572c3a7eda80ea5d57fb05b1"
+  integrity sha512-uckOqKcfaVvtBdsVkdPv3XjveQJsNQqmhXgRi8uhvWWuPYZCNlzT8qAyblUgNoXdHdjMTzAqeGjAoli8f+bzPA==
   dependencies:
-    object-keys "^1.0.12"
+    has-property-descriptors "^1.0.0"
+    object-keys "^1.1.1"
 
 defined@^1.0.0:
   version "1.0.0"
@@ -4079,15 +4307,20 @@ delayed-stream@~1.0.0:
   resolved "https://registry.yarnpkg.com/delayed-stream/-/delayed-stream-1.0.0.tgz#df3ae199acadfb7d440aaae0b29e2272b24ec619"
   integrity sha1-3zrhmayt+31ECqrgsp4icrJOxhk=
 
+depd@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/depd/-/depd-2.0.0.tgz#b696163cc757560d09cf22cc8fad1571b79e76df"
+  integrity sha512-g7nH6P6dyDioJogAAGprGpCtVImJhpPk/roCzdb3fIh61/s/nPsfR6onyMwkCAR/OlC3yBC0lESvUoQEAssIrw==
+
 depd@~1.1.2:
   version "1.1.2"
   resolved "https://registry.yarnpkg.com/depd/-/depd-1.1.2.tgz#9bcd52e14c097763e749b274c4346ed2e560b5a9"
   integrity sha1-m81S4UwJd2PnSbJ0xDRu0uVgtak=
 
-destroy@~1.0.4:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.0.4.tgz#978857442c44749e4206613e37946205826abd80"
-  integrity sha1-l4hXRCxEdJ5CBmE+N5RiBYJqvYA=
+destroy@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/destroy/-/destroy-1.2.0.tgz#4803735509ad8be552934c67df614f94e66fa015"
+  integrity sha512-2sJGJTaXIIaR1w4iJSNoN0hnMY7Gpc/n8D4qSCJw8QqFWXf7cuAgnEHxBpweaVcPevC2l3KpjYCx3NypQQgaJg==
 
 detect-newline@^3.0.0:
   version "3.1.0"
@@ -4174,9 +4407,9 @@ doctrine@^3.0.0:
     esutils "^2.0.2"
 
 dom-accessibility-api@^0.5.6, dom-accessibility-api@^0.5.9:
-  version "0.5.13"
-  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.13.tgz#102ee5f25eacce09bdf1cfa5a298f86da473be4b"
-  integrity sha512-R305kwb5CcMDIpSHUnLyIAp7SrSPBx6F0VfQFB3M75xVMHhXJJIdePYgbPPh1o57vCHNu5QztokWUPsLjWzFqw==
+  version "0.5.14"
+  resolved "https://registry.yarnpkg.com/dom-accessibility-api/-/dom-accessibility-api-0.5.14.tgz#56082f71b1dc7aac69d83c4285eef39c15d93f56"
+  integrity sha512-NMt+m9zFMPZe0JcY9gN224Qvk6qLIdqex29clBvc/y75ZBX9YA9wNK3frsYvu2DI1xcCIwxwnX+TlsJ2DSOADg==
 
 dom-converter@^0.2.0:
   version "0.2.0"
@@ -4202,9 +4435,9 @@ dom-serializer@0:
     entities "^2.0.0"
 
 dom-serializer@^1.0.1:
-  version "1.3.2"
-  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
-  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.4.1.tgz#de5d41b1aea290215dc45a6dae8adcf1d32e2d30"
+  integrity sha512-VHwB3KfrcOOkelEG2ZOfxqLZdfkil8PtJi4P8N2MMXucZq2yLp75ClViUlOVwyoHEDjYU433Aq+5zWP61+RGag==
   dependencies:
     domelementtype "^2.0.1"
     domhandler "^4.2.0"
@@ -4216,9 +4449,9 @@ domelementtype@1:
   integrity sha512-BSKB+TSpMpFI/HOxCNr1O8aMOTZ8hT3pM3GQ0w/mWRmkhEDSFJkkyzz4XQsBV44BChwGkrDfMyjVD0eA2aFV3w==
 
 domelementtype@^2.0.1, domelementtype@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
-  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.3.0.tgz#5c45e8e869952626331d7aab326d01daf65d589d"
+  integrity sha512-OLETBj6w0OsagBwdXnPdN0cnMfF9opN69co+7ZrbfPGrdpPVNBUj02spi6B1N7wChLQiPn4CSH/zJvXw56gmHw==
 
 domexception@^2.0.1:
   version "2.0.1"
@@ -4295,16 +4528,21 @@ ee-first@1.1.1:
   integrity sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=
 
 ejs@^3.1.6:
-  version "3.1.6"
-  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.6.tgz#5bfd0a0689743bb5268b3550cceeebbc1702822a"
-  integrity sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==
+  version "3.1.7"
+  resolved "https://registry.yarnpkg.com/ejs/-/ejs-3.1.7.tgz#c544d9c7f715783dd92f0bddcf73a59e6962d006"
+  integrity sha512-BIar7R6abbUxDA3bfXrO4DSgwo8I+fB5/1zgujl3HLLjwd6+9iOnrT+t3grn2qbk9vOgBubXOFwX2m9axoFaGw==
   dependencies:
-    jake "^10.6.1"
+    jake "^10.8.5"
 
-electron-to-chromium@^1.4.84:
-  version "1.4.105"
-  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.105.tgz#30de5e4ba020140b698539b2d366cd9c3a337ec7"
-  integrity sha512-6w2bmoQBSUgCQjbSjiVv9IS1lXwW2aQABlUJ1vlE8Vci/sVXxUNQrHLQa5N1ioc82Py+a36DlUA5KvrAlHMMeA==
+electron-to-chromium@^1.4.118:
+  version "1.4.123"
+  resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.4.123.tgz#de88ea7fd29d7c868e63c88f129e91494bcf3266"
+  integrity sha512-0pHGE53WkYoFbsgwYcVKEpWa6jbzlvkohIEA2CUoZ9b5KC+w/zlMiQHvW/4IBcOh7YoEFqRNavgTk02TBoUTUw==
+
+emittery@^0.10.2:
+  version "0.10.2"
+  resolved "https://registry.yarnpkg.com/emittery/-/emittery-0.10.2.tgz#902eec8aedb8c41938c46e9385e9db7e03182933"
+  integrity sha512-aITqOwnLanpHLNXZJENbOgjUBeHocD+xsSJmNrjovKBW5HbSpW3d1pEls7GFQPUWXiwG9+0P4GtHfEqC/4M0Iw==
 
 emittery@^0.8.1:
   version "0.8.1"
@@ -4339,9 +4577,9 @@ end-of-stream@^1.1.0:
     once "^1.4.0"
 
 enhanced-resolve@^5.9.2:
-  version "5.9.2"
-  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.2.tgz#0224dcd6a43389ebfb2d55efee517e5466772dd9"
-  integrity sha512-GIm3fQfwLJ8YZx2smuHpBKkXC1yOk+OBEmKckVyL0i/ea8mqDEykK3ld5dgH1QYPNyT/lIllxV2LULnxCHaHkA==
+  version "5.9.3"
+  resolved "https://registry.yarnpkg.com/enhanced-resolve/-/enhanced-resolve-5.9.3.tgz#44a342c012cbc473254af5cc6ae20ebd0aae5d88"
+  integrity sha512-Bq9VSor+kjvW3f9/MiiR4eE3XYgOl7/rS8lnSxbRbF3kS0B2r+Y9w5krBWxZgDxASVZbdYrn5wT4j/Wb0J9qow==
   dependencies:
     graceful-fs "^4.2.4"
     tapable "^2.2.0"
@@ -4372,10 +4610,10 @@ error-stack-parser@^2.0.6:
   dependencies:
     stackframe "^1.1.1"
 
-es-abstract@^1.17.2, es-abstract@^1.19.0, es-abstract@^1.19.1:
-  version "1.19.2"
-  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.2.tgz#8f7b696d8f15b167ae3640b4060670f3d054143f"
-  integrity sha512-gfSBJoZdlL2xRiOCy0g8gLMryhoe1TlimjzU99L/31Z8QEGIhVQI+EWwt5lT+AuU9SnorVupXFqqOGqGfsyO6w==
+es-abstract@^1.17.2, es-abstract@^1.19.1, es-abstract@^1.19.2:
+  version "1.19.5"
+  resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.19.5.tgz#a2cb01eb87f724e815b278b0dd0d00f36ca9a7f1"
+  integrity sha512-Aa2G2+Rd3b6kxEUKTF4TaW67czBLyAv3z7VOhYRU50YBx+bbsYZ9xQP4lMNazePuFlybXI0V4MruPos7qUo5fA==
   dependencies:
     call-bind "^1.0.2"
     es-to-primitive "^1.2.1"
@@ -4388,7 +4626,7 @@ es-abstract@^1.17.2, es-abstract@^1.19.0, es-abstract@^1.19.1:
     is-callable "^1.2.4"
     is-negative-zero "^2.0.2"
     is-regex "^1.1.4"
-    is-shared-array-buffer "^1.0.1"
+    is-shared-array-buffer "^1.0.2"
     is-string "^1.0.7"
     is-weakref "^1.0.2"
     object-inspect "^1.12.0"
@@ -4403,6 +4641,13 @@ es-module-lexer@^0.9.0:
   resolved "https://registry.yarnpkg.com/es-module-lexer/-/es-module-lexer-0.9.3.tgz#6f13db00cc38417137daf74366f535c8eb438f19"
   integrity sha512-1HQ2M2sPtxwnvOvT1ZClHyQDiggdNjURWpY2we6aMKCQiUVxTmVs2UYPLIrD84sS+kMdUwfBSylbJPwNnBrnHQ==
 
+es-shim-unscopables@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/es-shim-unscopables/-/es-shim-unscopables-1.0.0.tgz#702e632193201e3edf8713635d083d378e510241"
+  integrity sha512-Jm6GPcCdC30eMLbZ2x8z2WuRwAws3zTBBKuusffYVUrNj/GVSUAZ+xKMaUpfNDR5IbyNA5LJbaecoUVbmUcB1w==
+  dependencies:
+    has "^1.0.3"
+
 es-to-primitive@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/es-to-primitive/-/es-to-primitive-1.2.1.tgz#e55cd4c9cdc188bcefb03b366c736323fc5c898a"
@@ -4538,9 +4783,9 @@ eslint-plugin-jsx-a11y@^6.5.1:
     minimatch "^3.0.4"
 
 eslint-plugin-react-hooks@^4.3.0:
-  version "4.4.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.4.0.tgz#71c39e528764c848d8253e1aa2c7024ed505f6c4"
-  integrity sha512-U3RVIfdzJaeKDQKEJbz5p3NW8/L80PCATJAfuojwbaEL+gBjfGdhUcGde+WGUW46Q5sr/NgxevsIiDtNXrvZaQ==
+  version "4.5.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.5.0.tgz#5f762dfedf8b2cf431c689f533c9d3fa5dcf25ad"
+  integrity sha512-8k1gRt7D7h03kd+SAAlzXkQwWK22BnK6GKZG+FJA6BAGy22CFvl8kCIXKpVux0cCxMWDQUPqSok0LKaZ0aOcCw==
 
 eslint-plugin-react@^7.27.1:
   version "7.29.4"
@@ -4563,9 +4808,9 @@ eslint-plugin-react@^7.27.1:
     string.prototype.matchall "^4.0.6"
 
 eslint-plugin-testing-library@^5.0.1:
-  version "5.2.1"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.2.1.tgz#3f89cd28ade81329a11584e0bbea129bede01619"
-  integrity sha512-88qJv6uzYALtiYJDzhelP3ov0Px/GLgnu+UekjjDxL2nMyvgdTyboKqcDBsvFPmAeizlCoSWOjeBN4DxO0BxaA==
+  version "5.3.1"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-testing-library/-/eslint-plugin-testing-library-5.3.1.tgz#7638ee79cc86fd8bb57d671af35a1cbaa77e9548"
+  integrity sha512-OfF4dlG/q6ck6DL3P8Z0FPdK0dU5K57gsBu7eUcaVbwYKaNzjgejnXiM9CCUevppORkvfek+9D3Uj/9ZZ8Vz8g==
   dependencies:
     "@typescript-eslint/utils" "^5.13.0"
 
@@ -4614,11 +4859,11 @@ eslint-webpack-plugin@^3.1.1:
     schema-utils "^3.1.1"
 
 eslint@^8.3.0:
-  version "8.12.0"
-  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.12.0.tgz#c7a5bd1cfa09079aae64c9076c07eada66a46e8e"
-  integrity sha512-it1oBL9alZg1S8UycLm5YDMAkIhtH6FtAzuZs6YvoGVldWjbS08BkAdb/ymP9LlAyq8koANu32U7Ib/w+UNh8Q==
+  version "8.14.0"
+  resolved "https://registry.yarnpkg.com/eslint/-/eslint-8.14.0.tgz#62741f159d9eb4a79695b28ec4989fcdec623239"
+  integrity sha512-3/CE4aJX7LNEiE3i6FeodHmI/38GZtWCsAtsymScmzYapx8q1nVVb+eLcLSzATmCPXw5pT4TqVs1E0OmxAd9tw==
   dependencies:
-    "@eslint/eslintrc" "^1.2.1"
+    "@eslint/eslintrc" "^1.2.2"
     "@humanwhocodes/config-array" "^0.9.2"
     ajv "^6.10.0"
     chalk "^4.0.0"
@@ -4775,37 +5020,38 @@ expect@^27.5.1:
     jest-message-util "^27.5.1"
 
 express@^4.17.3:
-  version "4.17.3"
-  resolved "https://registry.yarnpkg.com/express/-/express-4.17.3.tgz#f6c7302194a4fb54271b73a1fe7a06478c8f85a1"
-  integrity sha512-yuSQpz5I+Ch7gFrPCk4/c+dIBKlQUxtgwqzph132bsT6qhuzss6I8cLJQz7B3rFblzd6wtcI0ZbGltH/C4LjUg==
+  version "4.18.0"
+  resolved "https://registry.yarnpkg.com/express/-/express-4.18.0.tgz#7a426773325d0dd5406395220614c0db10b6e8e2"
+  integrity sha512-EJEXxiTQJS3lIPrU1AE2vRuT7X7E+0KBbpm5GSoK524yl0K8X+er8zS2P14E64eqsVNoWbMCT7MpmQ+ErAhgRg==
   dependencies:
     accepts "~1.3.8"
     array-flatten "1.1.1"
-    body-parser "1.19.2"
+    body-parser "1.20.0"
     content-disposition "0.5.4"
     content-type "~1.0.4"
-    cookie "0.4.2"
+    cookie "0.5.0"
     cookie-signature "1.0.6"
     debug "2.6.9"
-    depd "~1.1.2"
+    depd "2.0.0"
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
     etag "~1.8.1"
-    finalhandler "~1.1.2"
+    finalhandler "1.2.0"
     fresh "0.5.2"
+    http-errors "2.0.0"
     merge-descriptors "1.0.1"
     methods "~1.1.2"
-    on-finished "~2.3.0"
+    on-finished "2.4.1"
     parseurl "~1.3.3"
     path-to-regexp "0.1.7"
     proxy-addr "~2.0.7"
-    qs "6.9.7"
+    qs "6.10.3"
     range-parser "~1.2.1"
     safe-buffer "5.2.1"
-    send "0.17.2"
-    serve-static "1.14.2"
+    send "0.18.0"
+    serve-static "1.15.0"
     setprototypeof "1.2.0"
-    statuses "~1.5.0"
+    statuses "2.0.1"
     type-is "~1.6.18"
     utils-merge "1.0.1"
     vary "~1.1.2"
@@ -4932,11 +5178,11 @@ file-loader@^6.2.0:
     schema-utils "^3.0.0"
 
 filelist@^1.0.1:
-  version "1.0.2"
-  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.2.tgz#80202f21462d4d1c2e214119b1807c1bc0380e5b"
-  integrity sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/filelist/-/filelist-1.0.3.tgz#448607750376484932f67ef1b9ff07386b036c83"
+  integrity sha512-LwjCsruLWQULGYKy7TX0OPtrL9kLpojOFKc5VCTxdFTV7w5zbsgqVKfnkKG7Qgjtq50gKfO56hJv88OfcGb70Q==
   dependencies:
-    minimatch "^3.0.4"
+    minimatch "^5.0.1"
 
 filesize@^8.0.6:
   version "8.0.7"
@@ -4950,17 +5196,17 @@ fill-range@^7.0.1:
   dependencies:
     to-regex-range "^5.0.1"
 
-finalhandler@~1.1.2:
-  version "1.1.2"
-  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.1.2.tgz#b7e7d000ffd11938d0fdb053506f6ebabe9f587d"
-  integrity sha512-aAWcW57uxVNrQZqFXjITpW3sIUQmHGG3qSb9mUah9MgMC4NeWhNOlNjXEYq3HjRAvL6arUviZGGJsBg6z0zsWA==
+finalhandler@1.2.0:
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/finalhandler/-/finalhandler-1.2.0.tgz#7d23fe5731b207b4640e4fcd00aec1f9207a7b32"
+  integrity sha512-5uXcUVftlQMFnWC9qu/svkWv3GTd2PfUhK/3PLkYNAe7FbqJMt3515HaxE6eRL74GdsriiwujiawdaB1BpEISg==
   dependencies:
     debug "2.6.9"
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
-    on-finished "~2.3.0"
+    on-finished "2.4.1"
     parseurl "~1.3.3"
-    statuses "~1.5.0"
+    statuses "2.0.1"
     unpipe "~1.0.0"
 
 find-cache-dir@^3.3.1:
@@ -4972,6 +5218,11 @@ find-cache-dir@^3.3.1:
     make-dir "^3.0.2"
     pkg-dir "^4.1.0"
 
+find-root@^1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4"
+  integrity sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==
+
 find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/find-up/-/find-up-2.1.0.tgz#45d1b7e506c717ddd482775a2b77920a3c0c57a7"
@@ -5026,9 +5277,9 @@ forever-agent@~0.6.1:
   integrity sha1-+8cfDEGt6zf5bFd60e1C2P2sypE=
 
 fork-ts-checker-webpack-plugin@^6.5.0:
-  version "6.5.1"
-  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.1.tgz#fd689e2d9de6ac76abb620909eea56438cd0f232"
-  integrity sha512-x1wumpHOEf4gDROmKTaB6i4/Q6H3LwmjVO7fIX47vBwlZbtPjU33hgoMuD/Q/y6SU8bnuYSoN6ZQOLshGp0T/g==
+  version "6.5.2"
+  resolved "https://registry.yarnpkg.com/fork-ts-checker-webpack-plugin/-/fork-ts-checker-webpack-plugin-6.5.2.tgz#4f67183f2f9eb8ba7df7177ce3cf3e75cdafb340"
+  integrity sha512-m5cUmF30xkZ7h4tWUgTAcEaKmUW7tfyUyTqNNOz7OxWJ0v1VWKTcOvH8FWHUwSjlW/356Ijc9vi3XfcPstpQKA==
   dependencies:
     "@babel/code-frame" "^7.8.3"
     "@types/json-schema" "^7.0.5"
@@ -5077,7 +5328,7 @@ fresh@0.5.2:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
-fs-extra@10.0.1, fs-extra@^10.0.0:
+fs-extra@10.0.1:
   version "10.0.1"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.0.1.tgz#27de43b4320e833f6867cc044bfce29fdf0ef3b8"
   integrity sha512-NbdoVMZso2Lsrn/QwLXOy6rm0ufY2zEOKCDzJR/0kBsb0E6qed0P3iYK+Ath3BfvXEeu4JhEtXLgILx5psUfag==
@@ -5086,6 +5337,15 @@ fs-extra@10.0.1, fs-extra@^10.0.0:
     jsonfile "^6.0.1"
     universalify "^2.0.0"
 
+fs-extra@^10.0.0:
+  version "10.1.0"
+  resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-10.1.0.tgz#02873cfbc4084dde127eaa5f9905eef2325d1abf"
+  integrity sha512-oRXApq54ETRj4eMiFzGnHWGy+zo5raudjuxN0b8H7s/RU2oW0Wvsx9O0ACRN/kRq9E8Vu/ReskGB5o3ji+FzHQ==
+  dependencies:
+    graceful-fs "^4.2.0"
+    jsonfile "^6.0.1"
+    universalify "^2.0.0"
+
 fs-extra@^9.0.0, fs-extra@^9.0.1, fs-extra@^9.1.0:
   version "9.1.0"
   resolved "https://registry.yarnpkg.com/fs-extra/-/fs-extra-9.1.0.tgz#5954460c764a8da2094ba3554bf839e6b9a7c86d"
@@ -5121,6 +5381,11 @@ functional-red-black-tree@^1.0.1:
   resolved "https://registry.yarnpkg.com/functional-red-black-tree/-/functional-red-black-tree-1.0.1.tgz#1b0ab3bd553b2a0d6399d29c0e3ea0b252078327"
   integrity sha1-GwqzvVU7Kg1jmdKcDj6gslIHgyc=
 
+functions-have-names@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/functions-have-names/-/functions-have-names-1.2.3.tgz#0404fe4ee2ba2f607f0e0ec3c80bae994133b834"
+  integrity sha512-xckBUXyTIqT97tq2x2AMb+g163b5JFysYk0x4qxNFwbfQkmNZoiRHb6sPzI9/QV33WeuvVYBUIiD4NzNIyqaRQ==
+
 gensync@^1.0.0-beta.2:
   version "1.0.0-beta.2"
   resolved "https://registry.yarnpkg.com/gensync/-/gensync-1.0.0-beta.2.tgz#32a6ee76c3d7f52d46b2b1ae5d93fea8580a25e0"
@@ -5203,9 +5468,9 @@ glob-to-regexp@^0.4.1:
   resolved "https://registry.yarnpkg.com/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz#c75297087c851b9a578bd217dd59a92f59fe546e"
   integrity sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==
 
-glob@7.1.6, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+glob@7.1.6:
   version "7.1.6"
-  resolved "https://registry.npmjs.org/glob/-/glob-7.1.6.tgz"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.1.6.tgz#141f33b81a7c2492e125594307480c46679278a6"
   integrity sha512-LwaxwyZ72Lk7vZINtNNrywX0ZuLyStrdDtabefZKAY5ZGJhVtgdznluResxNmPitE0SAO+O26sWTHeKSI2wMBA==
   dependencies:
     fs.realpath "^1.0.0"
@@ -5215,6 +5480,18 @@ glob@7.1.6, glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
     once "^1.3.0"
     path-is-absolute "^1.0.0"
 
+glob@^7.1.1, glob@^7.1.2, glob@^7.1.3, glob@^7.1.4, glob@^7.1.6:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/glob/-/glob-7.2.0.tgz#d15535af7732e02e948f4c41628bd910293f6023"
+  integrity sha512-lmLf6gtyrPq8tTjSmrO94wBeQbFR3HbLHbuyD69wuyQkImp2hWqMGB47OX65FBkPffO641IP9jWa1z4ivqG26Q==
+  dependencies:
+    fs.realpath "^1.0.0"
+    inflight "^1.0.4"
+    inherits "2"
+    minimatch "^3.0.4"
+    once "^1.3.0"
+    path-is-absolute "^1.0.0"
+
 global-dirs@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/global-dirs/-/global-dirs-3.0.0.tgz#70a76fe84ea315ab37b1f5576cbde7d48ef72686"
@@ -5268,9 +5545,9 @@ graceful-fs@^4.1.2, graceful-fs@^4.1.6, graceful-fs@^4.2.0, graceful-fs@^4.2.4,
   integrity sha512-9ByhssR2fPVsNZj478qUUbKfmL0+t5BDVyjShtyZZLiK7ZDAArFFfopyOTj0M05wE2tJPisA4iTnnXl2YoPvOA==
 
 graphql@^16.3.0:
-  version "16.3.0"
-  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.3.0.tgz#a91e24d10babf9e60c706919bb182b53ccdffc05"
-  integrity sha512-xm+ANmA16BzCT5pLjuXySbQVFwH3oJctUVdy81w1sV0vBU0KgDdBGtxQOUd5zqOBk/JayAFeG8Dlmeq74rjm/A==
+  version "16.4.0"
+  resolved "https://registry.yarnpkg.com/graphql/-/graphql-16.4.0.tgz#bb10b1b4683045dedcb67000eb4ad134a36c59e6"
+  integrity sha512-tYDNcRvKCcfHREZYje3v33NSrSD/ZpbWWdPtBtUUuXx9NCo/2QDxYzNqCnMvfsrnbwRpEHMovVrPu/ERoLrIRg==
 
 gzip-size@^6.0.0:
   version "6.0.0"
@@ -5289,10 +5566,10 @@ harmony-reflect@^1.4.6:
   resolved "https://registry.yarnpkg.com/harmony-reflect/-/harmony-reflect-1.6.2.tgz#31ecbd32e648a34d030d86adb67d4d47547fe710"
   integrity sha512-HIp/n38R9kQjDEziXyDTuW3vvoxxyxjxFzXLrBr18uB47GnSt+G9D29fqrpM5ZkspMcPICud3XsBJQ4Y2URg8g==
 
-has-bigints@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.1.tgz#64fe6acb020673e3b78db035a5af69aa9d07b113"
-  integrity sha512-LSBS2LjbNBTf6287JEbEzvJgftkF5qFkmCo9hDRpAzKhUOlJ+hx8dd4USs00SgsUNwc4617J9ki5YtEClM2ffA==
+has-bigints@^1.0.1, has-bigints@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/has-bigints/-/has-bigints-1.0.2.tgz#0871bd3e3d51626f6ca0966668ba35d5602d6eaa"
+  integrity sha512-tSvCKtBr9lkF0Ex0aQiP9N+OpV4zi2r/Nee5VkRDbaqv35RLYMzbwQfFSZZH0kR+Rd6302UJZ2p/bJCEoR3VoQ==
 
 has-flag@^3.0.0:
   version "3.0.0"
@@ -5304,6 +5581,13 @@ has-flag@^4.0.0:
   resolved "https://registry.yarnpkg.com/has-flag/-/has-flag-4.0.0.tgz#944771fd9c81c81265c4d6941860da06bb59479b"
   integrity sha512-EykJT/Q1KjTWctppgIAgfSO0tKVuZUjhgMr17kqTumMl6Afv3EISleU7qZUzoXDFTAHTDC4NOoG/ZxU3EvlMPQ==
 
+has-property-descriptors@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/has-property-descriptors/-/has-property-descriptors-1.0.0.tgz#610708600606d36961ed04c196193b6a607fa861"
+  integrity sha512-62DVLZGoiEBDHQyqG4w9xCuZ7eJEwNmJRWw2VY84Oedb7WFcA27fiEVe8oUQx9hAUJ4ekurquucTGwsyO1XGdQ==
+  dependencies:
+    get-intrinsic "^1.1.1"
+
 has-symbols@^1.0.1, has-symbols@^1.0.2, has-symbols@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/has-symbols/-/has-symbols-1.0.3.tgz#bb7b2c4349251dce87b125f7bdf874aa7c8b39f8"
@@ -5345,7 +5629,7 @@ history@^4.9.0:
     tiny-warning "^1.0.0"
     value-equal "^1.0.1"
 
-hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -5374,16 +5658,11 @@ html-encoding-sniffer@^2.0.1:
   dependencies:
     whatwg-encoding "^1.0.5"
 
-html-entities@^2.1.0:
+html-entities@^2.1.0, html-entities@^2.3.2:
   version "2.3.3"
   resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.3.tgz#117d7626bece327fc8baace8868fa6f5ef856e46"
   integrity sha512-DV5Ln36z34NNTDgnz0EWGBLZENelNAtkiFA4kyNOG2tDI6Mz1uSWiq1wAKdyjnJwyDiDO7Fa2SO1CTxPXL8VxA==
 
-html-entities@^2.3.2:
-  version "2.3.2"
-  resolved "https://registry.yarnpkg.com/html-entities/-/html-entities-2.3.2.tgz#760b404685cb1d794e4f4b744332e3b00dcfe488"
-  integrity sha512-c3Ab/url5ksaT0WyleslpBEthOzWhrjQbg75y7XUsfSzi3Dgzt0l8w5e7DylRn15MTlMMD58dTfzddNS2kcAjQ==
-
 html-escaper@^2.0.0:
   version "2.0.2"
   resolved "https://registry.yarnpkg.com/html-escaper/-/html-escaper-2.0.2.tgz#dfd60027da36a36dfcbe236262c00a5822681453"
@@ -5428,15 +5707,15 @@ http-deceiver@^1.2.7:
   resolved "https://registry.yarnpkg.com/http-deceiver/-/http-deceiver-1.2.7.tgz#fa7168944ab9a519d337cb0bec7284dc3e723d87"
   integrity sha1-+nFolEq5pRnTN8sL7HKE3D5yPYc=
 
-http-errors@1.8.1:
-  version "1.8.1"
-  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-1.8.1.tgz#7c3f28577cbc8a207388455dbd62295ed07bd68c"
-  integrity sha512-Kpk9Sm7NmI+RHhnj6OIWDI1d6fIoFAtFt9RLaTMRlg/8w49juAStsrBgp0Dp4OdxdVbRIeKhtCUvoi/RuAhO4g==
+http-errors@2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/http-errors/-/http-errors-2.0.0.tgz#b7774a1486ef73cf7667ac9ae0858c012c57b9d3"
+  integrity sha512-FtwrG/euBzaEjYeRqOgly7G0qviiXoJWnvEH2Z1plBdXgbyjv34pHTSb9zoeHMyDy33+DWy5Wt9Wo+TURtOYSQ==
   dependencies:
-    depd "~1.1.2"
+    depd "2.0.0"
     inherits "2.0.4"
     setprototypeof "1.2.0"
-    statuses ">= 1.5.0 < 2"
+    statuses "2.0.1"
     toidentifier "1.0.1"
 
 http-errors@~1.6.2:
@@ -5463,7 +5742,7 @@ http-proxy-agent@^4.0.1:
     agent-base "6"
     debug "4"
 
-http-proxy-middleware@2.0.6:
+http-proxy-middleware@2.0.6, http-proxy-middleware@^2.0.3:
   version "2.0.6"
   resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.6.tgz#e1a4dd6979572c7ab5a4e4b55095d1f32a74963f"
   integrity sha512-ya/UeJ6HVBYxrgYotAZo1KvPWlgB48kUJLDePFeneHsVujFaW5WNj2NgWCAE//B1Dl02BIfYlpNgBy8Kf8Rjmw==
@@ -5474,17 +5753,6 @@ http-proxy-middleware@2.0.6:
     is-plain-obj "^3.0.0"
     micromatch "^4.0.2"
 
-http-proxy-middleware@^2.0.3:
-  version "2.0.4"
-  resolved "https://registry.yarnpkg.com/http-proxy-middleware/-/http-proxy-middleware-2.0.4.tgz#03af0f4676d172ae775cb5c33f592f40e1a4e07a"
-  integrity sha512-m/4FxX17SUvz4lJ5WPXOHDUuCwIqXLfLHs1s0uZ3oYjhoXlx9csYxaOa0ElDEJ+h8Q4iJ1s+lTMbiCa4EXIJqg==
-  dependencies:
-    "@types/http-proxy" "^1.17.8"
-    http-proxy "^1.18.1"
-    is-glob "^4.0.1"
-    is-plain-obj "^3.0.0"
-    micromatch "^4.0.2"
-
 http-proxy@^1.18.1:
   version "1.18.1"
   resolved "https://registry.yarnpkg.com/http-proxy/-/http-proxy-1.18.1.tgz#401541f0534884bbf95260334e72f88ee3976549"
@@ -5504,9 +5772,9 @@ http-signature@~1.3.6:
     sshpk "^1.14.1"
 
 https-proxy-agent@^5.0.0:
-  version "5.0.0"
-  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.0.tgz#e2a90542abb68a762e0a0850f6c9edadfd8506b2"
-  integrity sha512-EkYm5BcKUGiduxzSt3Eppko+PiNWNEpa4ySk9vTC6wDsQJW9rHSa+UhGNJoRYp7bz6Ht1eaRIa6QaJqO5rCFbA==
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/https-proxy-agent/-/https-proxy-agent-5.0.1.tgz#c59ef224a04fe8b754f3db0063a25ea30d0005d6"
+  integrity sha512-dFcAjpTQFgoLMzC2VwU+C/CbS7uRL0lWmxDITmqm7C+7F0Odmj6s9l6alZc6AELXhrnggM2CeWSXHGOdX2YtwA==
   dependencies:
     agent-base "6"
     debug "4"
@@ -5521,11 +5789,6 @@ human-signals@^2.1.0:
   resolved "https://registry.yarnpkg.com/human-signals/-/human-signals-2.1.0.tgz#dc91fcba42e4d06e4abaed33b3e7a3c02f514ea0"
   integrity sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw==
 
-hyphenate-style-name@^1.0.3:
-  version "1.0.4"
-  resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
-  integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
-
 iconv-lite@0.4.24, iconv-lite@^0.4.24:
   version "0.4.24"
   resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
@@ -5631,7 +5894,7 @@ ini@^1.3.5:
   resolved "https://registry.yarnpkg.com/ini/-/ini-1.3.8.tgz#a29da425b48806f34767a4efce397269af28432c"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
-inquirer@8.2.2, inquirer@^8.2.0:
+inquirer@8.2.2:
   version "8.2.2"
   resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-8.2.2.tgz#1310517a87a0814d25336c78a20b44c3d9b7629d"
   integrity sha512-pG7I/si6K/0X7p1qU+rfWnpTE1UIkTONN1wxtzh0d+dHXtT/JG6qBgLxoyHVsQa8cFABxAPh0pD6uUUHiAoaow==
@@ -5651,6 +5914,27 @@ inquirer@8.2.2, inquirer@^8.2.0:
     strip-ansi "^6.0.0"
     through "^2.3.6"
 
+inquirer@^8.2.0:
+  version "8.2.3"
+  resolved "https://registry.yarnpkg.com/inquirer/-/inquirer-8.2.3.tgz#9c0b8a3fda91fdb00590557ec8530160e908c6e7"
+  integrity sha512-jmoBlmWUChXgVi1wGDZsD7pWCaibJKmL+8+E2jaiWiRj8OlJLwQdQQS2CIjgvdg8UUHX+oyagQKicVVcqwxi9Q==
+  dependencies:
+    ansi-escapes "^4.2.1"
+    chalk "^4.1.1"
+    cli-cursor "^3.1.0"
+    cli-width "^3.0.0"
+    external-editor "^3.0.3"
+    figures "^3.0.0"
+    lodash "^4.17.21"
+    mute-stream "0.0.8"
+    ora "^5.4.1"
+    run-async "^2.4.0"
+    rxjs "^7.5.5"
+    string-width "^4.1.0"
+    strip-ansi "^6.0.0"
+    through "^2.3.6"
+    wrap-ansi "^7.0.0"
+
 internal-slot@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/internal-slot/-/internal-slot-1.0.3.tgz#7347e307deeea2faac2ac6205d4bc7d34967f59c"
@@ -5710,9 +5994,9 @@ is-ci@^3.0.0:
     ci-info "^3.2.0"
 
 is-core-module@^2.2.0, is-core-module@^2.8.1:
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.8.1.tgz#f59fdfca701d5879d0a6b100a40aa1560ce27211"
-  integrity sha512-SdNCUs284hr40hFTFP6l0IfZ/RSrMXF3qgoRHd3/79unUTvrFO/JoXwkGm+5J/Oe3E/b5GsnG330uUNgRpu1PA==
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/is-core-module/-/is-core-module-2.9.0.tgz#e1c34429cd51c6dd9e09e0799e396e27b19a9c69"
+  integrity sha512-+5FPy5PnwmO3lvfMb0AsoPaBG+5KHUI0wYFXOtYPnVVVspTFUuMZNfNaNVRt3FZadstu2c8x23vykRW/NBoU6A==
   dependencies:
     has "^1.0.3"
 
@@ -5750,11 +6034,6 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@^4.0.3, is-glob@~4.0.1:
   dependencies:
     is-extglob "^2.1.1"
 
-is-in-browser@^1.0.2, is-in-browser@^1.1.3:
-  version "1.1.3"
-  resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
-  integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
-
 is-installed-globally@~0.4.0:
   version "0.4.0"
   resolved "https://registry.yarnpkg.com/is-installed-globally/-/is-installed-globally-0.4.0.tgz#9a0fd407949c30f86eb6959ef1b7994ed0b7b520"
@@ -5833,7 +6112,7 @@ is-root@^2.1.0:
   resolved "https://registry.yarnpkg.com/is-root/-/is-root-2.1.0.tgz#809e18129cf1129644302a4f8544035d51984a9c"
   integrity sha512-AGOriNp96vNBd3HtU+RzFEc75FfR5ymiYv8E553I71SCeXBiMsVDUtdio1OEFvrPyLIQ9tVR5RxXIFe5PUFjMg==
 
-is-shared-array-buffer@^1.0.1:
+is-shared-array-buffer@^1.0.2:
   version "1.0.2"
   resolved "https://registry.yarnpkg.com/is-shared-array-buffer/-/is-shared-array-buffer-1.0.2.tgz#8f259c573b60b6a32d4058a1a07430c0a7344c79"
   integrity sha512-sqN2UDu1/0y6uvXyStCOzyhAjCSlHceFoMKJW8W9EU9cvic/QdsZ0kEU93HEy3IUEFZIiH/3w+AH/UQbPHNdhA==
@@ -5909,9 +6188,9 @@ istanbul-lib-coverage@^3.0.0, istanbul-lib-coverage@^3.2.0:
   integrity sha512-eOeJ5BHCmHYvQK7xt9GkdHuzuCGS1Y6g9Gvnx3Ym33fz/HpLRYxiS0wHNr+m/MBC8B647Xt608vCDEvhl9c6Mw==
 
 istanbul-lib-instrument@^5.0.4, istanbul-lib-instrument@^5.1.0:
-  version "5.1.0"
-  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.1.0.tgz#7b49198b657b27a730b8e9cb601f1e1bff24c59a"
-  integrity sha512-czwUz525rkOFDJxfKK6mYfIs9zBKILyrZQxjz3ABhjQXhbhFsSbo1HW/BFcsDnfJYJWA6thRR5/TUY2qs5W99Q==
+  version "5.2.0"
+  resolved "https://registry.yarnpkg.com/istanbul-lib-instrument/-/istanbul-lib-instrument-5.2.0.tgz#31d18bdd127f825dd02ea7bfdfd906f8ab840e9f"
+  integrity sha512-6Lthe1hqXHBNsqvgDzGO6l03XNeu3CrG4RqQ1KM9+l5+jNGpEJfIELx1NS3SEHmJQA8np/u+E4EPRKRiu6m19A==
   dependencies:
     "@babel/core" "^7.12.3"
     "@babel/parser" "^7.14.7"
@@ -5950,12 +6229,12 @@ iterare@1.2.1:
   resolved "https://registry.yarnpkg.com/iterare/-/iterare-1.2.1.tgz#139c400ff7363690e33abffa33cbba8920f00042"
   integrity sha512-RKYVTCjAnRthyJes037NX/IiqeidgN1xc3j1RjFfECFp28A1GVwK9nA+i0rJPaHqSZwygLzRnFlzUuHFoWWy+Q==
 
-jake@^10.6.1:
-  version "10.8.4"
-  resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.4.tgz#f6a8b7bf90c6306f768aa82bb7b98bf4ca15e84a"
-  integrity sha512-MtWeTkl1qGsWUtbl/Jsca/8xSoK3x0UmS82sNbjqxxG/de/M/3b1DntdjHgPMC50enlTNwXOCRqPXLLt5cCfZA==
+jake@^10.8.5:
+  version "10.8.5"
+  resolved "https://registry.yarnpkg.com/jake/-/jake-10.8.5.tgz#f2183d2c59382cb274226034543b9c03b8164c46"
+  integrity sha512-sVpxYeuAhWt0OTWITwT98oyV0GsXyMlXCF+3L1SuafBVUIr/uILGRB+NqwkzhgXKvoJpDIpQvqkUALgdmQsQxw==
   dependencies:
-    async "0.9.x"
+    async "^3.2.3"
     chalk "^4.0.2"
     filelist "^1.0.1"
     minimatch "^3.0.4"
@@ -6176,6 +6455,21 @@ jest-message-util@^27.5.1:
     slash "^3.0.0"
     stack-utils "^2.0.3"
 
+jest-message-util@^28.0.2:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-28.0.2.tgz#f3cf36be72be4c4c4058cb34bd6673996d26dee3"
+  integrity sha512-knK7XyojvwYh1XiF2wmVdskgM/uN11KsjcEWWHfnMZNEdwXCrqB4sCBO94F4cfiAwCS8WFV6CDixDwPlMh/wdA==
+  dependencies:
+    "@babel/code-frame" "^7.12.13"
+    "@jest/types" "^28.0.2"
+    "@types/stack-utils" "^2.0.0"
+    chalk "^4.0.0"
+    graceful-fs "^4.2.9"
+    micromatch "^4.0.4"
+    pretty-format "^28.0.2"
+    slash "^3.0.0"
+    stack-utils "^2.0.3"
+
 jest-mock@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.5.1.tgz#19948336d49ef4d9c52021d34ac7b5f36ff967d6"
@@ -6189,11 +6483,16 @@ jest-pnp-resolver@^1.2.2:
   resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c"
   integrity sha512-olV41bKSMm8BdnuMsewT4jqlZ8+3TCARAXjZGT9jcoSnrfUnRCqnMoF9XEeoWjbzObpqF9dRhHQj0Xb9QdF6/w==
 
-jest-regex-util@^27.0.0, jest-regex-util@^27.5.1:
+jest-regex-util@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.5.1.tgz#4da143f7e9fd1e542d4aa69617b38e4a78365b95"
   integrity sha512-4bfKq2zie+x16okqDXjXn9ql2B0dScQu+vcwe4TvFVhkVyuWLqpZrZtXxLLWoXYgn0E87I6r6GRYHF7wFZBUvg==
 
+jest-regex-util@^28.0.0:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-28.0.2.tgz#afdc377a3b25fb6e80825adcf76c854e5bf47ead"
+  integrity sha512-4s0IgyNIy0y9FK+cjoVYoxamT7Zeo7MhzqRGx7YDYmaQn1wucY9rotiGkBzzcMXTtjrCAP/f7f+E0F7+fxPNdw==
+
 jest-resolve-dependencies@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.5.1.tgz#d811ecc8305e731cc86dd79741ee98fed06f1da8"
@@ -6322,6 +6621,18 @@ jest-util@^27.5.1:
     graceful-fs "^4.2.9"
     picomatch "^2.2.3"
 
+jest-util@^28.0.2:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-28.0.2.tgz#8e22cdd6e0549e0a393055f0e2da7eacc334b143"
+  integrity sha512-EVdpIRCC8lzqhp9A0u0aAKlsFIzufK6xKxNK7awsnebTdOP4hpyQW5o6Ox2qPl8gbeUKYF+POLyItaND53kpGA==
+  dependencies:
+    "@jest/types" "^28.0.2"
+    "@types/node" "*"
+    chalk "^4.0.0"
+    ci-info "^3.2.0"
+    graceful-fs "^4.2.9"
+    picomatch "^2.2.3"
+
 jest-validate@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.5.1.tgz#9197d54dc0bdb52260b8db40b46ae668e04df067"
@@ -6335,19 +6646,19 @@ jest-validate@^27.5.1:
     pretty-format "^27.5.1"
 
 jest-watch-typeahead@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-1.0.0.tgz#4de2ca1eb596acb1889752afbab84b74fcd99173"
-  integrity sha512-jxoszalAb394WElmiJTFBMzie/RDCF+W7Q29n5LzOPtcoQoHWfdUtHFkbhgf5NwWe8uMOxvKb/g7ea7CshfkTw==
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/jest-watch-typeahead/-/jest-watch-typeahead-1.1.0.tgz#b4a6826dfb9c9420da2f7bc900de59dad11266a9"
+  integrity sha512-Va5nLSJTN7YFtC2jd+7wsoe1pNe5K4ShLux/E5iHEwlB9AxaxmggY7to9KUqKojhaJw3aXqt5WAb4jGPOolpEw==
   dependencies:
     ansi-escapes "^4.3.1"
     chalk "^4.0.0"
-    jest-regex-util "^27.0.0"
-    jest-watcher "^27.0.0"
+    jest-regex-util "^28.0.0"
+    jest-watcher "^28.0.0"
     slash "^4.0.0"
     string-length "^5.0.1"
     strip-ansi "^7.0.1"
 
-jest-watcher@^27.0.0, jest-watcher@^27.5.1:
+jest-watcher@^27.5.1:
   version "27.5.1"
   resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.5.1.tgz#71bd85fb9bde3a2c2ec4dc353437971c43c642a2"
   integrity sha512-z676SuD6Z8o8qbmEGhoEUFOM1+jfEiL3DXHK/xgEiG2EyNYfFG60jluWcupY6dATjfEsKQuibReS1djInQnoVw==
@@ -6360,6 +6671,20 @@ jest-watcher@^27.0.0, jest-watcher@^27.5.1:
     jest-util "^27.5.1"
     string-length "^4.0.1"
 
+jest-watcher@^28.0.0:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-28.0.2.tgz#649fa24df531d4071be5784b6274d494d788c88b"
+  integrity sha512-uIVJLpQ/5VTGQWBiBatHsi7jrCqHjHl0e0dFHMWzwuIfUbdW/muk0DtSr0fteY2T7QTFylv+7a5Rm8sBKrE12Q==
+  dependencies:
+    "@jest/test-result" "^28.0.2"
+    "@jest/types" "^28.0.2"
+    "@types/node" "*"
+    ansi-escapes "^4.2.1"
+    chalk "^4.0.0"
+    emittery "^0.10.2"
+    jest-util "^28.0.2"
+    string-length "^4.0.1"
+
 jest-worker@^26.2.1:
   version "26.6.2"
   resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-26.6.2.tgz#7f72cbc4d643c365e27b9fd775f9d0eaa9c7a8ed"
@@ -6531,76 +6856,6 @@ jsprim@^2.0.2:
     json-schema "0.4.0"
     verror "1.10.0"
 
-jss-plugin-camel-case@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz#4921b568b38d893f39736ee8c4c5f1c64670aaf7"
-  integrity sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    hyphenate-style-name "^1.0.3"
-    jss "10.9.0"
-
-jss-plugin-default-unit@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz#bb23a48f075bc0ce852b4b4d3f7582bc002df991"
-  integrity sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.9.0"
-
-jss-plugin-global@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz#fc07a0086ac97aca174e37edb480b69277f3931f"
-  integrity sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.9.0"
-
-jss-plugin-nested@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz#cc1c7d63ad542c3ccc6e2c66c8328c6b6b00f4b3"
-  integrity sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.9.0"
-    tiny-warning "^1.0.2"
-
-jss-plugin-props-sort@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz#30e9567ef9479043feb6e5e59db09b4de687c47d"
-  integrity sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.9.0"
-
-jss-plugin-rule-value-function@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz#379fd2732c0746fe45168011fe25544c1a295d67"
-  integrity sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    jss "10.9.0"
-    tiny-warning "^1.0.2"
-
-jss-plugin-vendor-prefixer@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz#aa9df98abfb3f75f7ed59a3ec50a5452461a206a"
-  integrity sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    css-vendor "^2.0.8"
-    jss "10.9.0"
-
-jss@10.9.0, jss@^10.5.1:
-  version "10.9.0"
-  resolved "https://registry.yarnpkg.com/jss/-/jss-10.9.0.tgz#7583ee2cdc904a83c872ba695d1baab4b59c141b"
-  integrity sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==
-  dependencies:
-    "@babel/runtime" "^7.3.1"
-    csstype "^3.0.2"
-    is-in-browser "^1.1.3"
-    tiny-warning "^1.0.2"
-
 "jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.2.1:
   version "3.2.2"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-3.2.2.tgz#6ab1e52c71dfc0c0707008a91729a9491fe9f76c"
@@ -6687,9 +6942,9 @@ listr2@^3.8.3:
     wrap-ansi "^7.0.0"
 
 loader-runner@^4.2.0:
-  version "4.2.0"
-  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.2.0.tgz#d7022380d66d14c5fb1d496b89864ebcfd478384"
-  integrity sha512-92+huvxMvYlMzMt0iIOukcwYBFpkYJdpl2xsZ7LrlayO7E8SOv+JJUEK17B/dJIHAOLMfh2dZZ/Y18WgmGtYNw==
+  version "4.3.0"
+  resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-4.3.0.tgz#c1b4a163b99f614830353b16755e7149ac2314e1"
+  integrity sha512-3R/1M+yS3j5ou80Me59j7F9IMs4PXs3VqRrm0TU3AbKPxlmpoY1TNscJV/oGJXo8qCatFGTfDbY6W6ipGOYXfg==
 
 loader-utils@^2.0.0:
   version "2.0.2"
@@ -6814,11 +7069,6 @@ lru-cache@^6.0.0:
   dependencies:
     yallist "^4.0.0"
 
-lru-cache@^7.4.0:
-  version "7.7.3"
-  resolved "https://registry.yarnpkg.com/lru-cache/-/lru-cache-7.7.3.tgz#98cd19eef89ce6a4a3c4502c17c833888677c252"
-  integrity sha512-WY9wjJNQt9+PZilnLbuFKM+SwDull9+6IAguOrarOMoOHTcJ9GnXSO11+Gw6c7xtDkBkthR57OZMtZKYr+1CEw==
-
 lz-string@^1.4.4:
   version "1.4.4"
   resolved "https://registry.yarnpkg.com/lz-string/-/lz-string-1.4.4.tgz#c0d8eaf36059f705796e1e344811cf4c498d3a26"
@@ -6956,6 +7206,13 @@ minimatch@^3.0.4, minimatch@^3.1.2:
   dependencies:
     brace-expansion "^1.1.7"
 
+minimatch@^5.0.1:
+  version "5.0.1"
+  resolved "https://registry.yarnpkg.com/minimatch/-/minimatch-5.0.1.tgz#fb9022f7528125187c92bd9e9b6366be1cf3415b"
+  integrity sha512-nLDxIFRyhDblz3qMuq+SoRZED4+miJ/G+tdDrjkkkRnjAsBexeGpgjLEQ0blJy7rHhR2b93rhQY4SvyWu9v03g==
+  dependencies:
+    brace-expansion "^2.0.1"
+
 minimist@^1.1.1, minimist@^1.2.0, minimist@^1.2.6:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
@@ -7022,9 +7279,9 @@ mute-stream@0.0.8:
   integrity sha512-nnbWWOkoWyUsTjKrhgD0dcz22mdkSnpYqbEjIm2nhwhuxlSkpywJmBo8h0ZqJdkp73mb90SssHkN4rsRaBAfAA==
 
 nanoid@^3.3.1:
-  version "3.3.2"
-  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.2.tgz#c89622fafb4381cd221421c69ec58547a1eec557"
-  integrity sha512-CuHBogktKwpm5g2sRgv83jEy2ijFzBwMoYA60orPDR7ynsLijJDqgsi4RDGj3OJpy3Ieb+LYwiRmIOGyytgITA==
+  version "3.3.3"
+  resolved "https://registry.yarnpkg.com/nanoid/-/nanoid-3.3.3.tgz#fd8e8b7aa761fe807dba2d1b98fb7241bb724a25"
+  integrity sha512-p1sjXuopFs0xg+fPASzQ28agW1oHD7xDsd9Xkf3T15H3c/cifrFHVwrh74PdoklAPi+i7MdRsE47vm2r6JoB+w==
 
 natural-compare@^1.4.0:
   version "1.4.0"
@@ -7066,10 +7323,10 @@ node-int64@^0.4.0:
   resolved "https://registry.yarnpkg.com/node-int64/-/node-int64-0.4.0.tgz#87a9065cdb355d3182d8f94ce11188b825c68a3b"
   integrity sha1-h6kGXNs1XTGC2PlM4RGIuCXGijs=
 
-node-releases@^2.0.2:
-  version "2.0.2"
-  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.2.tgz#7139fe71e2f4f11b47d4d2986aaf8c48699e0c01"
-  integrity sha512-XxYDdcQ6eKqp/YjI+tb2C5WM2LgjnZrfYg4vgQt49EK268b6gYCHsBLrK2qvJo4FmCtqmKezb0WZFK4fkrZNsg==
+node-releases@^2.0.3:
+  version "2.0.3"
+  resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-2.0.3.tgz#225ee7488e4a5e636da8da52854844f9d716ca96"
+  integrity sha512-maHFz6OLqYxz+VQyCAtA3PTX4UP/53pa05fyDNc9CwjvJ0yEh6+xBwKsgCxMNhS8taUKBFYxfuiaD9U/55iFaw==
 
 normalize-path@^3.0.0, normalize-path@~3.0.0:
   version "3.0.0"
@@ -7117,22 +7374,17 @@ object-assign@^4.1.1:
   resolved "https://registry.yarnpkg.com/object-assign/-/object-assign-4.1.1.tgz#2109adc7965887cfc05cbbd442cac8bfbb360863"
   integrity sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM=
 
-object-hash@3.0.0:
+object-hash@3.0.0, object-hash@^3.0.0:
   version "3.0.0"
   resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-3.0.0.tgz#73f97f753e7baffc0e2cc9d6e079079744ac82e9"
   integrity sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==
 
-object-hash@^2.2.0:
-  version "2.2.0"
-  resolved "https://registry.yarnpkg.com/object-hash/-/object-hash-2.2.0.tgz#5ad518581eefc443bd763472b8ff2e9c2c0d54a5"
-  integrity sha512-gScRMn0bS5fH+IuwyIFgnh9zBdo4DV+6GhygmWM9HyNJSgS0hScp1f5vjtm7oIIOiT9trXrShAkLFSc2IqKNgw==
-
 object-inspect@^1.12.0, object-inspect@^1.9.0:
   version "1.12.0"
   resolved "https://registry.yarnpkg.com/object-inspect/-/object-inspect-1.12.0.tgz#6e2c120e868fd1fd18cb4f18c31741d0d6e776f0"
   integrity sha512-Ho2z80bVIvJloH+YzRmpZVQe87+qASmBUKZDWgx9cu+KDrX2ZDH/3tMy+gXbZETVGs2M8YdxObOh7XAtim9Y0g==
 
-object-keys@^1.0.12, object-keys@^1.1.1:
+object-keys@^1.1.1:
   version "1.1.1"
   resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-1.1.1.tgz#1c47f272df277f3b1daf061677d9c82e2322c60e"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
@@ -7196,10 +7448,10 @@ obuf@^1.0.0, obuf@^1.1.2:
   resolved "https://registry.yarnpkg.com/obuf/-/obuf-1.1.2.tgz#09bea3343d41859ebd446292d11c9d4db619084e"
   integrity sha512-PX1wu0AmAdPqOL1mWhqmlOd8kOIZQwGZw6rh7uby9fTc5lhaOWFLX3I6R1hrF9k3zUY40e6igsLGkDXK92LJNg==
 
-on-finished@~2.3.0:
-  version "2.3.0"
-  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.3.0.tgz#20f1336481b083cd75337992a16971aa2d906947"
-  integrity sha1-IPEzZIGwg811M3mSoWlxqi2QaUc=
+on-finished@2.4.1:
+  version "2.4.1"
+  resolved "https://registry.yarnpkg.com/on-finished/-/on-finished-2.4.1.tgz#58c8c44116e54845ad57f14ab10b03533184ac3f"
+  integrity sha512-oVlzkg3ENAhCk2zdv7IJwd/QUD4z2RxRwpkcGY8psCVcCYZNq4wYnVWALHM+brtuJjePWiYF/ClmuDr8Ch5+kg==
   dependencies:
     ee-first "1.1.1"
 
@@ -7342,11 +7594,11 @@ p-map@^4.0.0:
     aggregate-error "^3.0.0"
 
 p-retry@^4.5.0:
-  version "4.6.1"
-  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.1.tgz#8fcddd5cdf7a67a0911a9cf2ef0e5df7f602316c"
-  integrity sha512-e2xXGNhZOZ0lfgR9kL34iGlU8N/KO0xZnQxVEwdeOvpqNDQfdnxIYizvWtK8RglUa3bGqI8g0R/BdfzLMxRkiA==
+  version "4.6.2"
+  resolved "https://registry.yarnpkg.com/p-retry/-/p-retry-4.6.2.tgz#9baae7184057edd4e17231cee04264106e092a16"
+  integrity sha512-312Id396EbJdvRONlngUx0NydfrIQ5lsYu0znKVUzVvArzEIt08V1qhtyESbGVd1FGX7UKtiFp5uwKZdM8wIuQ==
   dependencies:
-    "@types/retry" "^0.12.0"
+    "@types/retry" "0.12.0"
     retry "^0.13.1"
 
 p-try@^1.0.0:
@@ -7508,11 +7760,6 @@ pkginfo@^0.4.1:
   resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.4.1.tgz#b5418ef0439de5425fc4995042dced14fb2a84ff"
   integrity sha1-tUGO8EOd5UJfxJlQQtztFPsqhP8=
 
-popper.js@1.16.1-lts:
-  version "1.16.1-lts"
-  resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
-  integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
-
 portfinder@^1.0.28:
   version "1.0.28"
   resolved "https://registry.yarnpkg.com/portfinder/-/portfinder-1.0.28.tgz#67c4622852bd5374dd1dd900f779f53462fac778"
@@ -7592,10 +7839,10 @@ postcss-custom-media@^8.0.0:
   resolved "https://registry.yarnpkg.com/postcss-custom-media/-/postcss-custom-media-8.0.0.tgz#1be6aff8be7dc9bf1fe014bde3b71b92bb4552f1"
   integrity sha512-FvO2GzMUaTN0t1fBULDeIvxr5IvbDXcIatt6pnJghc736nqNgsGao5NT+5+WVLAQiTt6Cb3YUms0jiPaXhL//g==
 
-postcss-custom-properties@^12.1.5:
-  version "12.1.6"
-  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-12.1.6.tgz#345b5b64c9520bb66390393646e8d5fbb7f10b58"
-  integrity sha512-QEnQkDkb+J+j2bfJisJJpTAFL+lUFl66rUNvnjPBIvRbZACLG4Eu5bmBCIY4FJCqhwsfbBpmJUyb3FcR/31lAg==
+postcss-custom-properties@^12.1.7:
+  version "12.1.7"
+  resolved "https://registry.yarnpkg.com/postcss-custom-properties/-/postcss-custom-properties-12.1.7.tgz#ca470fd4bbac5a87fd868636dafc084bc2a78b41"
+  integrity sha512-N/hYP5gSoFhaqxi2DPCmvto/ZcRDVjE3T1LiAMzc/bg53hvhcHOLpXOHb526LzBBp5ZlAUhkuot/bfpmpgStJg==
   dependencies:
     postcss-value-parser "^4.2.0"
 
@@ -7696,7 +7943,7 @@ postcss-js@^4.0.0:
   dependencies:
     camelcase-css "^2.0.1"
 
-postcss-lab-function@^4.1.2:
+postcss-lab-function@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/postcss-lab-function/-/postcss-lab-function-4.2.0.tgz#e054e662c6480202f5760887ec1ae0d153357123"
   integrity sha512-Zb1EO9DGYfa3CP8LhINHCcTTCTLI+R3t7AX2mKsDzdgVQ/GkCpHOTgOr6HBHslP7XDdVbqgHW5vvRPMdVANQ8w==
@@ -7704,7 +7951,7 @@ postcss-lab-function@^4.1.2:
     "@csstools/postcss-progressive-custom-properties" "^1.1.0"
     postcss-value-parser "^4.2.0"
 
-postcss-load-config@^3.1.0:
+postcss-load-config@^3.1.4:
   version "3.1.4"
   resolved "https://registry.yarnpkg.com/postcss-load-config/-/postcss-load-config-3.1.4.tgz#1ab2571faf84bb078877e1d07905eabe9ebda855"
   integrity sha512-6DiM4E7v4coTE4uzA8U//WhtPwyhiim3eyjEMFCnUpzbrkK9wJHgKDT2mR+HbtSrd/NubVaYTOpSpjUl8NQeRg==
@@ -7816,7 +8063,7 @@ postcss-nested@5.0.6:
   dependencies:
     postcss-selector-parser "^6.0.6"
 
-postcss-nesting@^10.1.3:
+postcss-nesting@^10.1.4:
   version "10.1.4"
   resolved "https://registry.yarnpkg.com/postcss-nesting/-/postcss-nesting-10.1.4.tgz#80de9d1c2717bc44df918dd7f118929300192a7a"
   integrity sha512-2ixdQ59ik/Gt1+oPHiI1kHdwEI8lLKEmui9B1nl6163ANLC+GewQn7fXMxJF2JSb4i2MKL96GU8fIiQztK4TTA==
@@ -7926,20 +8173,20 @@ postcss-place@^7.0.4:
     postcss-value-parser "^4.2.0"
 
 postcss-preset-env@^7.0.1:
-  version "7.4.3"
-  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.4.3.tgz#fb1c8b4cb405da042da0ddb8c5eda7842c08a449"
-  integrity sha512-dlPA65g9KuGv7YsmGyCKtFkZKCPLkoVMUE3omOl6yM+qrynVHxFvf0tMuippIrXB/sB/MyhL1FgTIbrO+qMERg==
+  version "7.4.4"
+  resolved "https://registry.yarnpkg.com/postcss-preset-env/-/postcss-preset-env-7.4.4.tgz#069e34e31e2a7345154da7936b9fc1fcbdbd6d43"
+  integrity sha512-MqzSEx/QsvOk562iV9mLTgIvLFEOq1os9QBQfkgnq8TW6yKhVFPGh0gdXSK5ZlmjuNQEga6/x833e86XZF/lug==
   dependencies:
-    "@csstools/postcss-color-function" "^1.0.3"
+    "@csstools/postcss-color-function" "^1.1.0"
     "@csstools/postcss-font-format-keywords" "^1.0.0"
     "@csstools/postcss-hwb-function" "^1.0.0"
     "@csstools/postcss-ic-unit" "^1.0.0"
-    "@csstools/postcss-is-pseudo-class" "^2.0.1"
+    "@csstools/postcss-is-pseudo-class" "^2.0.2"
     "@csstools/postcss-normalize-display-values" "^1.0.0"
-    "@csstools/postcss-oklab-function" "^1.0.2"
+    "@csstools/postcss-oklab-function" "^1.1.0"
     "@csstools/postcss-progressive-custom-properties" "^1.3.0"
-    autoprefixer "^10.4.4"
-    browserslist "^4.20.2"
+    autoprefixer "^10.4.5"
+    browserslist "^4.20.3"
     css-blank-pseudo "^3.0.3"
     css-has-pseudo "^3.0.4"
     css-prefers-color-scheme "^6.0.3"
@@ -7950,7 +8197,7 @@ postcss-preset-env@^7.0.1:
     postcss-color-hex-alpha "^8.0.3"
     postcss-color-rebeccapurple "^7.0.2"
     postcss-custom-media "^8.0.0"
-    postcss-custom-properties "^12.1.5"
+    postcss-custom-properties "^12.1.7"
     postcss-custom-selectors "^6.0.0"
     postcss-dir-pseudo-class "^6.0.4"
     postcss-double-position-gradients "^3.1.1"
@@ -7961,20 +8208,20 @@ postcss-preset-env@^7.0.1:
     postcss-gap-properties "^3.0.3"
     postcss-image-set-function "^4.0.6"
     postcss-initial "^4.0.1"
-    postcss-lab-function "^4.1.2"
+    postcss-lab-function "^4.2.0"
     postcss-logical "^5.0.4"
     postcss-media-minmax "^5.0.0"
-    postcss-nesting "^10.1.3"
+    postcss-nesting "^10.1.4"
     postcss-opacity-percentage "^1.1.2"
     postcss-overflow-shorthand "^3.0.3"
     postcss-page-break "^3.0.4"
     postcss-place "^7.0.4"
-    postcss-pseudo-class-any-link "^7.1.1"
+    postcss-pseudo-class-any-link "^7.1.2"
     postcss-replace-overflow-wrap "^4.0.0"
     postcss-selector-not "^5.0.0"
     postcss-value-parser "^4.2.0"
 
-postcss-pseudo-class-any-link@^7.1.1:
+postcss-pseudo-class-any-link@^7.1.2:
   version "7.1.2"
   resolved "https://registry.yarnpkg.com/postcss-pseudo-class-any-link/-/postcss-pseudo-class-any-link-7.1.2.tgz#81ec491aa43f97f9015e998b7a14263b4630bdf0"
   integrity sha512-76XzEQv3g+Vgnz3tmqh3pqQyRojkcJ+pjaePsyhcyf164p9aZsu3t+NWxkZYbcHLK1ju5Qmalti2jPI5IWCe5w==
@@ -8044,7 +8291,7 @@ postcss@^7.0.35:
     picocolors "^0.2.1"
     source-map "^0.6.1"
 
-postcss@^8.3.5, postcss@^8.4.4, postcss@^8.4.6, postcss@^8.4.7:
+postcss@^8.3.5, postcss@^8.4.12, postcss@^8.4.4, postcss@^8.4.7:
   version "8.4.12"
   resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.4.12.tgz#1e7de78733b28970fa4743f7da6f3763648b1905"
   integrity sha512-lg6eITwYe9v6Hr5CncVbK70SoioNQIq81nsaG86ev5hAidQvmOeETBqs7jm43K2F5/Ley3ytDtriImV6TpNiSg==
@@ -8090,6 +8337,16 @@ pretty-format@^27.0.0, pretty-format@^27.0.2, pretty-format@^27.5.1:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
+pretty-format@^28.0.2:
+  version "28.0.2"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-28.0.2.tgz#6a24d71cbb61a5e5794ba7513fe22101675481bc"
+  integrity sha512-UmGZ1IERwS3yY35LDMTaBUYI1w4udZDdJGGT/DqQeKG9ZLDn7/K2Jf/JtYSRiHCCKMHvUA+zsEGSmHdpaVp1yw==
+  dependencies:
+    "@jest/schemas" "^28.0.2"
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^18.0.0"
+
 process-nextick-args@~2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/process-nextick-args/-/process-nextick-args-2.0.1.tgz#7820d9b16120cc55ca9ae7792680ae7dba6d7fe2"
@@ -8155,10 +8412,12 @@ q@^1.1.2:
   resolved "https://registry.yarnpkg.com/q/-/q-1.5.1.tgz#7e32f75b41381291d04611f1bf14109ac00651d7"
   integrity sha1-fjL3W0E4EpHQRhHxvxQQmsAGUdc=
 
-qs@6.9.7:
-  version "6.9.7"
-  resolved "https://registry.yarnpkg.com/qs/-/qs-6.9.7.tgz#4610846871485e1e048f44ae3b94033f0e675afe"
-  integrity sha512-IhMFgUmuNpyRfxA90umL7ByLlgRXu6tIfKPpF5TmcfRLlLCckfP/g3IQmju6jjpu+Hh8rA+2p6A27ZSPOOHdKw==
+qs@6.10.3:
+  version "6.10.3"
+  resolved "https://registry.yarnpkg.com/qs/-/qs-6.10.3.tgz#d6cde1b2ffca87b5aa57889816c5f81535e22e8e"
+  integrity sha512-wr7M2E0OFRfIfJZjKGieI8lBKb7fRCH4Fv5KNPEs7gJ8jadvotdsS08PzOKR7opXhZ/Xkjtt3WF9g38drmyRqQ==
+  dependencies:
+    side-channel "^1.0.4"
 
 qs@~6.5.2:
   version "6.5.3"
@@ -8194,13 +8453,13 @@ range-parser@^1.2.1, range-parser@~1.2.1:
   resolved "https://registry.yarnpkg.com/range-parser/-/range-parser-1.2.1.tgz#3cf37023d199e1c24d1a55b84800c2f3e6468031"
   integrity sha512-Hrgsx+orqoygnmhFbKaHE6c296J+HTAQXoxEF6gNupROmmGJRoyzfG3ccAveqCBrwr/2yxQ5BVd/GTl5agOwSg==
 
-raw-body@2.4.3:
-  version "2.4.3"
-  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.4.3.tgz#8f80305d11c2a0a545c2d9d89d7a0286fcead43c"
-  integrity sha512-UlTNLIcu0uzb4D2f4WltY6cVjLi+/jEN4lgEUj3E04tpMDpUlkBo/eSn6zou9hum2VMNpCCUone0O0WeJim07g==
+raw-body@2.5.1:
+  version "2.5.1"
+  resolved "https://registry.yarnpkg.com/raw-body/-/raw-body-2.5.1.tgz#fe1b1628b181b700215e5fd42389f98b71392857"
+  integrity sha512-qqJBtEyVgS0ZmPGdCFPWJ3FreoqvG4MVQln/kCgF7Olq95IbOp0/BWyMwbdtn4VTvkM8Y7khCQ2Xgk/tcrCXig==
   dependencies:
     bytes "3.1.2"
-    http-errors "1.8.1"
+    http-errors "2.0.0"
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
@@ -8295,17 +8554,17 @@ react-hooks-global-state@1.0.2:
   resolved "https://registry.yarnpkg.com/react-hooks-global-state/-/react-hooks-global-state-1.0.2.tgz#37bbc3203a0be9f3ac0658abfd28dd7ce7ee166c"
   integrity sha512-UcWz+VjcUUCQ7bXGmOhanGII3j22zyPSjwJnQWeycxFYj/etBxIbz9xziEm4sv5+OqGuS7bzvpx24XkCxgJ7Bg==
 
-"react-is@^16.12.0 || ^17.0.0 || ^18.0.0":
-  version "18.0.0"
-  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.0.0.tgz#026f6c4a27dbe33bf4a35655b9e1327c4e55e3f5"
-  integrity sha512-yUcBYdBBbo3QiPsgYDcfQcIkGZHfxOaoE6HLSnr1sPzMhdyxusbfKOSUbSd/ocGi32dxcj366PsTj+5oggeKKw==
+"react-is@^16.12.0 || ^17.0.0 || ^18.0.0", react-is@^18.0.0:
+  version "18.1.0"
+  resolved "https://registry.yarnpkg.com/react-is/-/react-is-18.1.0.tgz#61aaed3096d30eacf2a2127118b5b41387d32a67"
+  integrity sha512-Fl7FuabXsJnV5Q1qIOQwx/sagGF18kogb4gpfcG4gjLBWO0WDiiz1ko/ExayuxE7InyQkBLkxRFG5oxY6Uu3Kg==
 
 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"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
 
-"react-is@^16.8.0 || ^17.0.0", react-is@^17.0.1, react-is@^17.0.2:
+react-is@^17.0.1, react-is@^17.0.2:
   version "17.0.2"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
   integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
@@ -8422,7 +8681,7 @@ react-timeago@6.2.1:
   resolved "https://registry.yarnpkg.com/react-timeago/-/react-timeago-6.2.1.tgz#f19716811156617ceb9c9f9a44315d85197c7fba"
   integrity sha512-b9EObWO8wy4qwfOzj+g/RQZRrPvtMv1Pz12FCdAWKWCXbDGt0rZLyiyTGEr0Lh1O8w5xa48CtRpl3LI+CtGCyw==
 
-react-transition-group@^4.4.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"
   integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
@@ -8485,9 +8744,9 @@ redent@^3.0.0:
     strip-indent "^3.0.0"
 
 redux@^4.1.2:
-  version "4.1.2"
-  resolved "https://registry.yarnpkg.com/redux/-/redux-4.1.2.tgz#140f35426d99bb4729af760afcf79eaaac407104"
-  integrity sha512-SH8PglcebESbd/shgf6mii6EIoRM0zrQyjcuQ+ojmfxjTtE0z9Y8pa62iA/OJ58qjP6j27uyW4kUF4jl/jd6sw==
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/redux/-/redux-4.2.0.tgz#46f10d6e29b6666df758780437651eeb2b969f13"
+  integrity sha512-oSBmcKKIuIR4ME29/AeNUnl5L+hvBq7OaJWzaptTQJAntaPvxIJqfnjbaEiCzzaIz+XmVILfqAM3Ob0aXLPfjA==
   dependencies:
     "@babel/runtime" "^7.9.2"
 
@@ -8526,12 +8785,13 @@ regex-parser@^2.2.11:
   integrity sha512-jbD/FT0+9MBU2XAZluI7w2OBs1RBi6p9M83nkoZayQXXU9e8Robt69FcZc7wU4eJD/YFTjn1JdCk3rbMJajz8Q==
 
 regexp.prototype.flags@^1.4.1:
-  version "1.4.1"
-  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.1.tgz#b3f4c0059af9e47eca9f3f660e51d81307e72307"
-  integrity sha512-pMR7hBVUUGI7PMA37m2ofIdQCsomVnas+Jn5UPGAHQ+/LlwKm/aTLJHdasmHRzlfeZwHiAOaRSo2rbBDm3nNUQ==
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/regexp.prototype.flags/-/regexp.prototype.flags-1.4.3.tgz#87cab30f80f66660181a3bb7bf5981a872b367ac"
+  integrity sha512-fjggEOO3slI6Wvgjwflkc4NFRCTZAu5CnNfBd5qOMYhWdn67nJBBu34/TkD++eeFmd8C9r9jfXJ27+nSiRkSUA==
   dependencies:
     call-bind "^1.0.2"
     define-properties "^1.1.3"
+    functions-have-names "^1.2.2"
 
 regexpp@^3.2.0:
   version "3.2.0"
@@ -8638,7 +8898,7 @@ resolve.exports@^1.1.0:
   resolved "https://registry.yarnpkg.com/resolve.exports/-/resolve.exports-1.1.0.tgz#5ce842b94b05146c0e03076985d1d0e7e48c90c9"
   integrity sha512-J1l+Zxxp4XK3LUDZ9m60LRJF/mAe4z6a4xyabPHk7pvK5t35dACV32iIjJDFeWZFfZlO29w6SZ67knR0tHzJtQ==
 
-resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
+resolve@^1.12.0, resolve@^1.14.2, resolve@^1.19.0, resolve@^1.20.0, resolve@^1.22.0:
   version "1.22.0"
   resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
   integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
@@ -8678,6 +8938,11 @@ rfdc@^1.3.0:
   resolved "https://registry.yarnpkg.com/rfdc/-/rfdc-1.3.0.tgz#d0b7c441ab2720d05dc4cf26e01c89631d9da08b"
   integrity sha512-V2hovdzFbOi77/WajaSMXk2OLm+xNIeQdMMuB7icj7bk6zi2F8GGAxigcnDFpJHbNyNcgyJDiP+8nOrY5cZGrA==
 
+rifm@^0.12.1:
+  version "0.12.1"
+  resolved "https://registry.yarnpkg.com/rifm/-/rifm-0.12.1.tgz#8fa77f45b7f1cda2a0068787ac821f0593967ac4"
+  integrity sha512-OGA1Bitg/dSJtI/c4dh90svzaUPt228kzFsUkJbtA2c964IqEAwWXeL9ZJi86xWv3j5SMqRvGULl7bA6cK0Bvg==
+
 rimraf@^3.0.0, rimraf@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/rimraf/-/rimraf-3.0.2.tgz#f1a5402ba6220ad52cc1282bac1ae3aa49fd061a"
@@ -8696,9 +8961,9 @@ rollup-plugin-terser@^7.0.0:
     terser "^5.0.0"
 
 rollup@^2.43.1:
-  version "2.70.1"
-  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.1.tgz#824b1f1f879ea396db30b0fc3ae8d2fead93523e"
-  integrity sha512-CRYsI5EuzLbXdxC6RnYhOuRdtz4bhejPMSWjsFLfVM/7w/85n2szZv6yExqUXsBdz5KT8eoubeyDUDjhLHEslA==
+  version "2.70.2"
+  resolved "https://registry.yarnpkg.com/rollup/-/rollup-2.70.2.tgz#808d206a8851628a065097b7ba2053bd83ba0c0d"
+  integrity sha512-EitogNZnfku65I1DD5Mxe8JYRUCy0hkK5X84IlDtUs+O6JRMpRciXTzyCUuX11b5L5pvjH+OmFXiQ3XjabcXgg==
   optionalDependencies:
     fsevents "~2.3.2"
 
@@ -8723,7 +8988,7 @@ rxjs@7.5.5, rxjs@^7.5.1, rxjs@^7.5.5:
 
 rxjs@^6.6.3:
   version "6.6.7"
-  resolved "https://registry.npmjs.org/rxjs/-/rxjs-6.6.7.tgz"
+  resolved "https://registry.yarnpkg.com/rxjs/-/rxjs-6.6.7.tgz#90ac018acabf491bf65044235d5863c4dab804c9"
   integrity sha512-hTdwr+7yYNIT5n4AMYp85KA6yw2Va0FLa3Rguvbpa4W3I5xynaBZo41cM3XM+4Q6fRMj3sBYIR1VAmZMXYJvRQ==
   dependencies:
     tslib "^1.9.0"
@@ -8839,7 +9104,7 @@ semver@7.0.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.0.0.tgz#5f3ca35761e47e05b206c6daff2cf814f0316b8e"
   integrity sha512-+GB6zVA9LWh6zovYQLALHwv5rb2PHGlJi3lfiqIHxR0uuwCgefcOJc59v9fv1w8GbStwxuuqqAjI9NMAOOgq1A==
 
-semver@7.3.7:
+semver@7.3.7, semver@^7.3.2, semver@^7.3.5:
   version "7.3.7"
   resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.7.tgz#12c5b649afdbf9049707796e22a4028814ce523f"
   integrity sha512-QlYTucUYOews+WeEujDoEGziz4K6c47V/Bd+LjSSYcA94p+DmINdf7ncaUinThfvZyu13lN9OY1XDxt8C0Tw0g==
@@ -8851,31 +9116,24 @@ semver@^6.0.0, semver@^6.1.1, semver@^6.1.2, semver@^6.3.0:
   resolved "https://registry.yarnpkg.com/semver/-/semver-6.3.0.tgz#ee0a64c8af5e8ceea67687b133761e1becbd1d3d"
   integrity sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==
 
-semver@^7.3.2, semver@^7.3.5:
-  version "7.3.6"
-  resolved "https://registry.yarnpkg.com/semver/-/semver-7.3.6.tgz#5d73886fb9c0c6602e79440b97165c29581cbb2b"
-  integrity sha512-HZWqcgwLsjaX1HBD31msI/rXktuIhS+lWvdE4kN9z+8IVT4Itc7vqU2WvYsyD6/sjYCt4dEKH/m1M3dwI9CC5w==
-  dependencies:
-    lru-cache "^7.4.0"
-
-send@0.17.2:
-  version "0.17.2"
-  resolved "https://registry.yarnpkg.com/send/-/send-0.17.2.tgz#926622f76601c41808012c8bf1688fe3906f7820"
-  integrity sha512-UJYB6wFSJE3G00nEivR5rgWp8c2xXvJ3OPWPhmuteU0IKj8nKbG3DrjiOmLwpnHGYWAVwA69zmTm++YG0Hmwww==
+send@0.18.0:
+  version "0.18.0"
+  resolved "https://registry.yarnpkg.com/send/-/send-0.18.0.tgz#670167cc654b05f5aa4a767f9113bb371bc706be"
+  integrity sha512-qqWzuOjSFOuqPjFe4NOsMLafToQQwBSOEpS+FwEt3A2V3vKubTquT3vmLTQpFgMXp8AlFWFuP1qKaJZOtPpVXg==
   dependencies:
     debug "2.6.9"
-    depd "~1.1.2"
-    destroy "~1.0.4"
+    depd "2.0.0"
+    destroy "1.2.0"
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
     etag "~1.8.1"
     fresh "0.5.2"
-    http-errors "1.8.1"
+    http-errors "2.0.0"
     mime "1.6.0"
     ms "2.1.3"
-    on-finished "~2.3.0"
+    on-finished "2.4.1"
     range-parser "~1.2.1"
-    statuses "~1.5.0"
+    statuses "2.0.1"
 
 serialize-javascript@^4.0.0:
   version "4.0.0"
@@ -8904,15 +9162,15 @@ serve-index@^1.9.1:
     mime-types "~2.1.17"
     parseurl "~1.3.2"
 
-serve-static@1.14.2:
-  version "1.14.2"
-  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.14.2.tgz#722d6294b1d62626d41b43a013ece4598d292bfa"
-  integrity sha512-+TMNA9AFxUEGuC0z2mevogSnn9MXKb4fa7ngeRMJaaGv8vTwnIEkKi+QGvPt33HSnf8pRS+WGM0EbMtCJLKMBQ==
+serve-static@1.15.0:
+  version "1.15.0"
+  resolved "https://registry.yarnpkg.com/serve-static/-/serve-static-1.15.0.tgz#faaef08cffe0a1a62f60cad0c4e513cff0ac9540"
+  integrity sha512-XGuRDNjXUijsUL0vl6nSD7cwURuzEgglbOaFuZM9g3kwDXOWVTck0jLzjPzGD+TazWbboZYu52/9/XPdUgne9g==
   dependencies:
     encodeurl "~1.0.2"
     escape-html "~1.0.3"
     parseurl "~1.3.3"
-    send "0.17.2"
+    send "0.18.0"
 
 set-cookie-parser@^2.4.6:
   version "2.4.8"
@@ -9042,17 +9300,17 @@ source-map@0.6.1, source-map@^0.6.0, source-map@^0.6.1, source-map@~0.6.0, sourc
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.6.1.tgz#74722af32e9614e9c287a8d0bbde48b5e2f1a263"
   integrity sha512-UjgapumWlbMhkBgzT7Ykc5YXUT46F0iKu8SGXq0bcwP5dz/h0Plj6enJqjz1Zbq2l5WaqYnrVbwWOWMyF3F47g==
 
-source-map@^0.5.0:
+source-map@^0.5.0, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.5.7.tgz#8a039d2d1021d22d1ea14c80d8ea468ba2ef3fcc"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
 
-source-map@^0.7.3, source-map@~0.7.2:
+source-map@^0.7.3:
   version "0.7.3"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.7.3.tgz#5302f8169031735226544092e64981f751750383"
   integrity sha512-CkCj6giN3S+n9qrYiBTX5gystlENnRW5jZeNLHpe6aue+SrHcG5VYwujhW9s4dY31mEGsxBDrHR6oI69fTXsaQ==
 
-source-map@^0.8.0-beta.0:
+source-map@^0.8.0-beta.0, source-map@~0.8.0-beta.0:
   version "0.8.0-beta.0"
   resolved "https://registry.yarnpkg.com/source-map/-/source-map-0.8.0-beta.0.tgz#d4c1bb42c3f7ee925f005927ba10709e0d1d1f11"
   integrity sha512-2ymg6oRBpebeZi9UUNsgQ89bhx01TcTkmNTGnNO88imTmbSgy4nfujrgVEFKWpMTEGA11EDkTt7mqObTPdigIA==
@@ -9129,16 +9387,16 @@ stackframe@^1.1.1:
   resolved "https://registry.yarnpkg.com/stackframe/-/stackframe-1.2.1.tgz#1033a3473ee67f08e2f2fc8eba6aef4f845124e1"
   integrity sha512-h88QkzREN/hy8eRdyNhhsO7RSJ5oyTqxxmmn0dzBIMUclZsjpfmrsg81vp8mjjAs2vAZ72nyWxRUwSwmh0e4xg==
 
-"statuses@>= 1.4.0 < 2", "statuses@>= 1.5.0 < 2", statuses@~1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
-  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
-
-statuses@^2.0.0:
+statuses@2.0.1, statuses@^2.0.0:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/statuses/-/statuses-2.0.1.tgz#55cb000ccf1d48728bd23c685a063998cf1a1b63"
   integrity sha512-RwNA9Z/7PrK06rYLIzFMlaF+l73iwpzsqRIFgbMLbTcLD6cOao82TaWefPXQvB2fOC4AjuYSEndS7N/mTCbkdQ==
 
+"statuses@>= 1.4.0 < 2":
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/statuses/-/statuses-1.5.0.tgz#161c7dac177659fd9811f43771fa99381478628c"
+  integrity sha1-Fhx9rBd2Wf2YEfQ3cfqZOBR4Yow=
+
 strict-event-emitter@^0.2.0:
   version "0.2.4"
   resolved "https://registry.yarnpkg.com/strict-event-emitter/-/strict-event-emitter-0.2.4.tgz#365714f0c95f059db31064ca745d5b33e5b30f6e"
@@ -9288,6 +9546,11 @@ stylehacks@^5.1.0:
     browserslist "^4.16.6"
     postcss-selector-parser "^6.0.4"
 
+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
 supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.yarnpkg.com/supports-color/-/supports-color-5.5.0.tgz#e2e69a44ac8772f78a1ec0b35b689df6530efc8f"
@@ -9370,28 +9633,28 @@ symbol-tree@^3.2.4:
   integrity sha512-9QNk5KwDF+Bvz+PyObkmSYjI5ksVUYtjW7AU22r2NKcfLJcXp96hkDWU3+XndOsUb+AQ9QhfzfCT2O+CNWT5Tw==
 
 tailwindcss@^3.0.2:
-  version "3.0.23"
-  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.23.tgz#c620521d53a289650872a66adfcb4129d2200d10"
-  integrity sha512-+OZOV9ubyQ6oI2BXEhzw4HrqvgcARY38xv3zKcjnWtMIZstEsXdI9xftd1iB7+RbOnj2HOEzkA0OyB5BaSxPQA==
+  version "3.0.24"
+  resolved "https://registry.yarnpkg.com/tailwindcss/-/tailwindcss-3.0.24.tgz#22e31e801a44a78a1d9a81ecc52e13b69d85704d"
+  integrity sha512-H3uMmZNWzG6aqmg9q07ZIRNIawoiEcNFKDfL+YzOPuPsXuDXxJxB9icqzLgdzKNwjG3SAro2h9SYav8ewXNgig==
   dependencies:
     arg "^5.0.1"
-    chalk "^4.1.2"
     chokidar "^3.5.3"
     color-name "^1.1.4"
-    cosmiconfig "^7.0.1"
     detective "^5.2.0"
     didyoumean "^1.2.2"
     dlv "^1.1.3"
     fast-glob "^3.2.11"
     glob-parent "^6.0.2"
     is-glob "^4.0.3"
+    lilconfig "^2.0.5"
     normalize-path "^3.0.0"
-    object-hash "^2.2.0"
-    postcss "^8.4.6"
+    object-hash "^3.0.0"
+    picocolors "^1.0.0"
+    postcss "^8.4.12"
     postcss-js "^4.0.0"
-    postcss-load-config "^3.1.0"
+    postcss-load-config "^3.1.4"
     postcss-nested "5.0.6"
-    postcss-selector-parser "^6.0.9"
+    postcss-selector-parser "^6.0.10"
     postcss-value-parser "^4.2.0"
     quick-lru "^5.1.1"
     resolve "^1.22.0"
@@ -9441,13 +9704,13 @@ terser-webpack-plugin@^5.1.3, terser-webpack-plugin@^5.2.5:
     terser "^5.7.2"
 
 terser@^5.0.0, terser@^5.10.0, terser@^5.7.2:
-  version "5.12.1"
-  resolved "https://registry.yarnpkg.com/terser/-/terser-5.12.1.tgz#4cf2ebed1f5bceef5c83b9f60104ac4a78b49e9c"
-  integrity sha512-NXbs+7nisos5E+yXwAD+y7zrcTkMqb0dEJxIGtSKPdCBzopf7ni4odPul2aechpV7EXNvOudYOX2bb5tln1jbQ==
+  version "5.13.0"
+  resolved "https://registry.yarnpkg.com/terser/-/terser-5.13.0.tgz#d43fd71861df1b4df743980caa257c6fa03acc44"
+  integrity sha512-sgQ99P+fRBM1jAYzN9RTnD/xEWx/7LZgYTCRgmYriSq1wxxqiQPJgXkkLBBuwySDWJ2PP0PnVQyuf4xLUuH4Ng==
   dependencies:
     acorn "^8.5.0"
     commander "^2.20.0"
-    source-map "~0.7.2"
+    source-map "~0.8.0-beta.0"
     source-map-support "~0.5.20"
 
 test-exclude@^6.0.0:
@@ -9489,7 +9752,7 @@ 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-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
+tiny-warning@^1.0.0, tiny-warning@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/tiny-warning/-/tiny-warning-1.0.3.tgz#94a30db453df4c643d0fd566060d60a875d84754"
   integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==
@@ -9596,7 +9859,7 @@ tslib@2.0.3:
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.0.3.tgz#8e0741ac45fc0c226e58a17bfc3e64b9bc6ca61c"
   integrity sha512-uZtkfKblCEQtZKBF6EBXVZeQNl82yqtDQdv+eck8u7tdPxjLu2/lp5/uPW+um2tpuxINHWy3GhiccY7QgEaVHQ==
 
-tslib@2.3.1, tslib@^2.0.3, tslib@^2.1.0:
+tslib@2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.3.1.tgz#e8a335add5ceae51aa261d32a490158ef042ef01"
   integrity sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw==
@@ -9606,6 +9869,20 @@ tslib@^1.8.1, tslib@^1.9.0:
   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:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
+tss-react@^3.6.2:
+  version "3.6.2"
+  resolved "https://registry.yarnpkg.com/tss-react/-/tss-react-3.6.2.tgz#5e995d8b82ca730ba04a21203ae68f1c5372a85e"
+  integrity sha512-+ecQIqCNFVlVJVk3NiCWZY2+5DhVKMVUVxIbEwv9nYsTRQA/KxyKCU8g+KMj5ByqFv9LW76+TUYzbWck/IHkfA==
+  dependencies:
+    "@emotion/cache" "*"
+    "@emotion/serialize" "*"
+    "@emotion/utils" "*"
+
 tsutils@^3.21.0:
   version "3.21.0"
   resolved "https://registry.yarnpkg.com/tsutils/-/tsutils-3.21.0.tgz#b48717d394cea6c1e096983eed58e9d61715b623"
@@ -9685,13 +9962,13 @@ typescript@4.6.4:
   integrity sha512-9ia/jWHIEbo49HfjrLGfKbZSuWo9iTMwXO+Ca3pRsSpbsMbc7/IU8NKdCZVRRBafVPGnoJeFL76ZOAA84I9fEg==
 
 unbox-primitive@^1.0.1:
-  version "1.0.1"
-  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.1.tgz#085e215625ec3162574dc8859abee78a59b14471"
-  integrity sha512-tZU/3NqK3dA5gpE1KtyiJUrEB0lxnGkMFHptJ7q6ewdZ8s12QrODwNbhIJStmJkd1QDXa1NRA8aF2A1zk/Ypyw==
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/unbox-primitive/-/unbox-primitive-1.0.2.tgz#29032021057d5e6cdbd08c5129c226dff8ed6f9e"
+  integrity sha512-61pPlCD9h51VoreyJ0BReideM3MDKMKnh6+V9L08331ipq6Q8OFXZYiqP6n/tbHx4s5I9uRhcye6BrbkizkBDw==
   dependencies:
-    function-bind "^1.1.1"
-    has-bigints "^1.0.1"
-    has-symbols "^1.0.2"
+    call-bind "^1.0.2"
+    has-bigints "^1.0.2"
+    has-symbols "^1.0.3"
     which-boxed-primitive "^1.0.2"
 
 unicode-canonical-property-names-ecmascript@^2.0.0:
@@ -9788,7 +10065,7 @@ utils-merge@1.0.1:
 
 uuid@8.3.2, uuid@^8.3.2:
   version "8.3.2"
-  resolved "https://registry.npmjs.org/uuid/-/uuid-8.3.2.tgz"
+  resolved "https://registry.yarnpkg.com/uuid/-/uuid-8.3.2.tgz#80d5b5ced271bb9af6c445f21a1a04c606cefbe2"
   integrity sha512-+NYs2QeMWy+GWFOEm9xnn6HCDp0l7QBD7ml8zLUmJ+93Q5NF0NocErnwkTkXVFNiX3/fpC6afS8Dhb/gz7R7eg==
 
 v8-compile-cache@^2.0.3:
@@ -9963,9 +10240,9 @@ webpack-sources@^3.2.3:
   integrity sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==
 
 webpack@^5.64.4:
-  version "5.71.0"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.71.0.tgz#b01fcf379570b8c5ee06ca06c829ca168c951884"
-  integrity sha512-g4dFT7CFG8LY0iU5G8nBL6VlkT21Z7dcYDpJAEJV5Q1WLb9UwnFbrem1k7K52ILqEmomN7pnzWFxxE6SlDY56A==
+  version "5.72.0"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-5.72.0.tgz#f8bc40d9c6bb489a4b7a8a685101d6022b8b6e28"
+  integrity sha512-qmSmbspI0Qo5ld49htys8GY9XhS9CGqFoHTsOVAnjBdg0Zn79y135R+k4IR4rKK6+eKaabMhJwiVB7xw0SJu5w==
   dependencies:
     "@types/eslint-scope" "^3.7.3"
     "@types/estree" "^0.0.51"
@@ -10079,25 +10356,25 @@ word-wrap@^1.2.3, word-wrap@~1.2.3:
   resolved "https://registry.yarnpkg.com/word-wrap/-/word-wrap-1.2.3.tgz#610636f6b1f703891bd34771ccb17fb93b47079c"
   integrity sha512-Hz/mrNwitNRh/HUAtM/VT/5VH+ygD6DV7mYKZAtHOrbs8U7lvPS6xf7EJKMF0uW1KJCl0H701g3ZGus+muE5vQ==
 
-workbox-background-sync@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.2.tgz#28be9bf89b8e4e0379d45903280c7c12f4df836f"
-  integrity sha512-EjG37LSMDJ1TFlFg56wx6YXbH4/NkG09B9OHvyxx+cGl2gP5OuOzsCY3rOPJSpbcz6jpuA40VIC3HzSD4OvE1g==
+workbox-background-sync@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-background-sync/-/workbox-background-sync-6.5.3.tgz#7c66c1836aeca6f3762dc48d17a1852a33b3168c"
+  integrity sha512-0DD/V05FAcek6tWv9XYj2w5T/plxhDSpclIcAGjA/b7t/6PdaRkQ7ZgtAX6Q/L7kV7wZ8uYRJUoH11VjNipMZw==
   dependencies:
     idb "^6.1.4"
-    workbox-core "6.5.2"
+    workbox-core "6.5.3"
 
-workbox-broadcast-update@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.5.2.tgz#b1f32bb40a9dcb5b05ca27e09fb7c01a0a126182"
-  integrity sha512-DjJYraYnprTZE/AQNoeogaxI1dPuYmbw+ZJeeP8uXBSbg9SNv5wLYofQgywXeRepv4yr/vglMo9yaHUmBMc+4Q==
+workbox-broadcast-update@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-broadcast-update/-/workbox-broadcast-update-6.5.3.tgz#fc2ad79cf507e22950cda9baf1e9a0ccc43f31bc"
+  integrity sha512-4AwCIA5DiDrYhlN+Miv/fp5T3/whNmSL+KqhTwRBTZIL6pvTgE4lVuRzAt1JltmqyMcQ3SEfCdfxczuI4kwFQg==
   dependencies:
-    workbox-core "6.5.2"
+    workbox-core "6.5.3"
 
-workbox-build@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.2.tgz#774faafd84b1dc94b74739ceb5d8ff367748523b"
-  integrity sha512-TVi4Otf6fgwikBeMpXF9n0awHfZTMNu/nwlMIT9W+c13yvxkmDFMPb7vHYK6RUmbcxwPnz4I/R+uL76+JxG4JQ==
+workbox-build@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-build/-/workbox-build-6.5.3.tgz#38e3f286d63d2745bff4d1478bb3a6ab5c8b1170"
+  integrity sha512-8JNHHS7u13nhwIYCDea9MNXBNPHXCs5KDZPKI/ZNTr3f4sMGoD7hgFGecbyjX1gw4z6e9bMpMsOEJNyH5htA/w==
   dependencies:
     "@apideck/better-ajv-errors" "^0.3.1"
     "@babel/core" "^7.11.1"
@@ -10121,132 +10398,132 @@ workbox-build@6.5.2:
     strip-comments "^2.0.1"
     tempy "^0.6.0"
     upath "^1.2.0"
-    workbox-background-sync "6.5.2"
-    workbox-broadcast-update "6.5.2"
-    workbox-cacheable-response "6.5.2"
-    workbox-core "6.5.2"
-    workbox-expiration "6.5.2"
-    workbox-google-analytics "6.5.2"
-    workbox-navigation-preload "6.5.2"
-    workbox-precaching "6.5.2"
-    workbox-range-requests "6.5.2"
-    workbox-recipes "6.5.2"
-    workbox-routing "6.5.2"
-    workbox-strategies "6.5.2"
-    workbox-streams "6.5.2"
-    workbox-sw "6.5.2"
-    workbox-window "6.5.2"
+    workbox-background-sync "6.5.3"
+    workbox-broadcast-update "6.5.3"
+    workbox-cacheable-response "6.5.3"
+    workbox-core "6.5.3"
+    workbox-expiration "6.5.3"
+    workbox-google-analytics "6.5.3"
+    workbox-navigation-preload "6.5.3"
+    workbox-precaching "6.5.3"
+    workbox-range-requests "6.5.3"
+    workbox-recipes "6.5.3"
+    workbox-routing "6.5.3"
+    workbox-strategies "6.5.3"
+    workbox-streams "6.5.3"
+    workbox-sw "6.5.3"
+    workbox-window "6.5.3"
 
-workbox-cacheable-response@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.5.2.tgz#d9252eb99f0d0fceb70f63866172f4eaac56a3e8"
-  integrity sha512-UnHGih6xqloV808T7ve1iNKZMbpML0jGLqkkmyXkJbZc5j16+HRSV61Qrh+tiq3E3yLvFMGJ3AUBODOPNLWpTg==
+workbox-cacheable-response@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-cacheable-response/-/workbox-cacheable-response-6.5.3.tgz#b1f8c2bc599a7be8f7e3c262535629c558738e47"
+  integrity sha512-6JE/Zm05hNasHzzAGKDkqqgYtZZL2H06ic2GxuRLStA4S/rHUfm2mnLFFXuHAaGR1XuuYyVCEey1M6H3PdZ7SQ==
   dependencies:
-    workbox-core "6.5.2"
+    workbox-core "6.5.3"
 
-workbox-core@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.5.2.tgz#f5e06a22c6cb4651d3e13107443d972fdbd47364"
-  integrity sha512-IlxLGQf+wJHCR+NM0UWqDh4xe/Gu6sg2i4tfZk6WIij34IVk9BdOQgi6WvqSHd879jbQIUgL2fBdJUJyAP5ypQ==
+workbox-core@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-core/-/workbox-core-6.5.3.tgz#bca038a9ef0d7a634a6db2a60f45313ed22ac249"
+  integrity sha512-Bb9ey5n/M9x+l3fBTlLpHt9ASTzgSGj6vxni7pY72ilB/Pb3XtN+cZ9yueboVhD5+9cNQrC9n/E1fSrqWsUz7Q==
 
-workbox-expiration@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.5.2.tgz#ee6ed755a220a0b375d67831f9237e4dcbccb59c"
-  integrity sha512-5Hfp0uxTZJrgTiy9W7AjIIec+9uTOtnxY/tRBm4DbqcWKaWbVTa+izrKzzOT4MXRJJIJUmvRhWw4oo8tpmMouw==
+workbox-expiration@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-expiration/-/workbox-expiration-6.5.3.tgz#efc0811f371a2ede1052b9de1c4f072b71d50503"
+  integrity sha512-jzYopYR1zD04ZMdlbn/R2Ik6ixiXbi15c9iX5H8CTi6RPDz7uhvMLZPKEndZTpfgmUk8mdmT9Vx/AhbuCl5Sqw==
   dependencies:
     idb "^6.1.4"
-    workbox-core "6.5.2"
+    workbox-core "6.5.3"
 
-workbox-google-analytics@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.5.2.tgz#a79fa7a40824873baaa333dcd72d1fdf1c53adf5"
-  integrity sha512-8SMar+N0xIreP5/2we3dwtN1FUmTMScoopL86aKdXBpio8vXc8Oqb5fCJG32ialjN8BAOzDqx/FnGeCtkIlyvw==
+workbox-google-analytics@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-google-analytics/-/workbox-google-analytics-6.5.3.tgz#cc8c3a61f449131660a4ed2f5362d9a3599b18fe"
+  integrity sha512-3GLCHotz5umoRSb4aNQeTbILETcrTVEozSfLhHSBaegHs1PnqCmN0zbIy2TjTpph2AGXiNwDrWGF0AN+UgDNTw==
   dependencies:
-    workbox-background-sync "6.5.2"
-    workbox-core "6.5.2"
-    workbox-routing "6.5.2"
-    workbox-strategies "6.5.2"
+    workbox-background-sync "6.5.3"
+    workbox-core "6.5.3"
+    workbox-routing "6.5.3"
+    workbox-strategies "6.5.3"
 
-workbox-navigation-preload@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.5.2.tgz#ffb3d9d5cdb881a3824851707da221dbb0bb3f23"
-  integrity sha512-iqDNWWMswjCsZuvGFDpcX1Z8InBVAlVBELJ28xShsWWntALzbtr0PXMnm2WHkXCc56JimmGldZi1N5yDPiTPOg==
+workbox-navigation-preload@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-navigation-preload/-/workbox-navigation-preload-6.5.3.tgz#81b74f598b11aa07e2cf1c21af7a826a4f0f70b3"
+  integrity sha512-bK1gDFTc5iu6lH3UQ07QVo+0ovErhRNGvJJO/1ngknT0UQ702nmOUhoN9qE5mhuQSrnK+cqu7O7xeaJ+Rd9Tmg==
   dependencies:
-    workbox-core "6.5.2"
+    workbox-core "6.5.3"
 
-workbox-precaching@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.5.2.tgz#a3117b4d3eb61ce8d01b9dfc063c48155bd7f9d3"
-  integrity sha512-OZAlQ8AAT20KugGKKuJMHdQ8X1IyNQaLv+mPTHj+8Dmv8peBq5uWNzs4g/1OSFmXsbXZ6a1CBC6YtQWVPhJQ9w==
+workbox-precaching@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-precaching/-/workbox-precaching-6.5.3.tgz#c870312b2ef901d790ab9e48da084e776c62af47"
+  integrity sha512-sjNfgNLSsRX5zcc63H/ar/hCf+T19fRtTqvWh795gdpghWb5xsfEkecXEvZ8biEi1QD7X/ljtHphdaPvXDygMQ==
   dependencies:
-    workbox-core "6.5.2"
-    workbox-routing "6.5.2"
-    workbox-strategies "6.5.2"
+    workbox-core "6.5.3"
+    workbox-routing "6.5.3"
+    workbox-strategies "6.5.3"
 
-workbox-range-requests@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.5.2.tgz#b8b7e5b5830fecc22f0a1d8815457921df2e5bf9"
-  integrity sha512-zi5VqF1mWqfCyJLTMXn1EuH/E6nisqWDK1VmOJ+TnjxGttaQrseOhMn+BMvULFHeF8AvrQ0ogfQ6bSv0rcfAlg==
+workbox-range-requests@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-range-requests/-/workbox-range-requests-6.5.3.tgz#e624ac82ff266a5e4f236d055797def07949d941"
+  integrity sha512-pGCP80Bpn/0Q0MQsfETSfmtXsQcu3M2QCJwSFuJ6cDp8s2XmbUXkzbuQhCUzKR86ZH2Vex/VUjb2UaZBGamijA==
   dependencies:
-    workbox-core "6.5.2"
+    workbox-core "6.5.3"
 
-workbox-recipes@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.5.2.tgz#19f47ec25a8788c65d0cc8d217cbebc0bbbb5c63"
-  integrity sha512-2lcUKMYDiJKvuvRotOxLjH2z9K7jhj8GNUaHxHNkJYbTCUN3LsX1cWrsgeJFDZ/LgI565t3fntpbG9J415ZBXA==
+workbox-recipes@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-recipes/-/workbox-recipes-6.5.3.tgz#15beac9d8ae7a3a1c100218094a824b4dd3fd59a"
+  integrity sha512-IcgiKYmbGiDvvf3PMSEtmwqxwfQ5zwI7OZPio3GWu4PfehA8jI8JHI3KZj+PCfRiUPZhjQHJ3v1HbNs+SiSkig==
   dependencies:
-    workbox-cacheable-response "6.5.2"
-    workbox-core "6.5.2"
-    workbox-expiration "6.5.2"
-    workbox-precaching "6.5.2"
-    workbox-routing "6.5.2"
-    workbox-strategies "6.5.2"
+    workbox-cacheable-response "6.5.3"
+    workbox-core "6.5.3"
+    workbox-expiration "6.5.3"
+    workbox-precaching "6.5.3"
+    workbox-routing "6.5.3"
+    workbox-strategies "6.5.3"
 
-workbox-routing@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.5.2.tgz#e0ad46246ba51224fd57eff0dd46891b3220cb9a"
-  integrity sha512-nR1w5PjF6IVwo0SX3oE88LhmGFmTnqqU7zpGJQQPZiKJfEKgDENQIM9mh3L1ksdFd9Y3CZVkusopHfxQvit/BA==
+workbox-routing@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-routing/-/workbox-routing-6.5.3.tgz#a0a699d8cc90b5692bd3df24679acbbda3913777"
+  integrity sha512-DFjxcuRAJjjt4T34RbMm3MCn+xnd36UT/2RfPRfa8VWJGItGJIn7tG+GwVTdHmvE54i/QmVTJepyAGWtoLPTmg==
   dependencies:
-    workbox-core "6.5.2"
+    workbox-core "6.5.3"
 
-workbox-strategies@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.5.2.tgz#56b02e6959c6391351011fc2e5b0829aff1ed859"
-  integrity sha512-fgbwaUMxbG39BHjJIs2y2X21C0bmf1Oq3vMQxJ1hr6y5JMJIm8rvKCcf1EIdAr+PjKdSk4ddmgyBQ4oO8be4Uw==
+workbox-strategies@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-strategies/-/workbox-strategies-6.5.3.tgz#4bea9a48fee16cf43766e0d8138296773c8a9783"
+  integrity sha512-MgmGRrDVXs7rtSCcetZgkSZyMpRGw8HqL2aguszOc3nUmzGZsT238z/NN9ZouCxSzDu3PQ3ZSKmovAacaIhu1w==
   dependencies:
-    workbox-core "6.5.2"
+    workbox-core "6.5.3"
 
-workbox-streams@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.5.2.tgz#2fb6ba307f7d2cbda63f64522a197be868b4ea25"
-  integrity sha512-ovD0P4UrgPtZ2Lfc/8E8teb1RqNOSZr+1ZPqLR6sGRZnKZviqKbQC3zVvvkhmOIwhWbpL7bQlWveLVONHjxd5w==
+workbox-streams@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-streams/-/workbox-streams-6.5.3.tgz#b6860290031caa7d0e46ad7142315c94359c780b"
+  integrity sha512-vN4Qi8o+b7zj1FDVNZ+PlmAcy1sBoV7SC956uhqYvZ9Sg1fViSbOpydULOssVJ4tOyKRifH/eoi6h99d+sJ33w==
   dependencies:
-    workbox-core "6.5.2"
-    workbox-routing "6.5.2"
+    workbox-core "6.5.3"
+    workbox-routing "6.5.3"
 
-workbox-sw@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.5.2.tgz#2f5dca0e96c61a450fccf0405095ddf1b6f43bc7"
-  integrity sha512-2KhlYqtkoqlnPdllj2ujXUKRuEFsRDIp6rdE4l1PsxiFHRAFaRTisRQpGvRem5yxgXEr+fcEKiuZUW2r70KZaw==
+workbox-sw@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-sw/-/workbox-sw-6.5.3.tgz#cd2f0c086f4496acd25774ed02c48504189bebdd"
+  integrity sha512-BQBzm092w+NqdIEF2yhl32dERt9j9MDGUTa2Eaa+o3YKL4Qqw55W9yQC6f44FdAHdAJrJvp0t+HVrfh8AiGj8A==
 
 workbox-webpack-plugin@^6.4.1:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.2.tgz#0cf6e1d23d5107a88fd8502fd4f534215e1dd298"
-  integrity sha512-StrJ7wKp5tZuGVcoKLVjFWlhDy+KT7ZWsKnNcD6F08wA9Cpt6JN+PLIrplcsTHbQpoAV8+xg6RvcG0oc9z+RpQ==
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-webpack-plugin/-/workbox-webpack-plugin-6.5.3.tgz#c37bb323be4952311565c07db51054fe59c87d73"
+  integrity sha512-Es8Xr02Gi6Kc3zaUwR691ZLy61hz3vhhs5GztcklQ7kl5k2qAusPh0s6LF3wEtlpfs9ZDErnmy5SErwoll7jBA==
   dependencies:
     fast-json-stable-stringify "^2.1.0"
     pretty-bytes "^5.4.1"
     upath "^1.2.0"
     webpack-sources "^1.4.3"
-    workbox-build "6.5.2"
+    workbox-build "6.5.3"
 
-workbox-window@6.5.2:
-  version "6.5.2"
-  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.2.tgz#46d6412cd57039bdf3d5dd914ad21fb3f98fe980"
-  integrity sha512-2kZH37r9Wx8swjEOL4B8uGM53lakMxsKkQ7mOKzGA/QAn/DQTEZGrdHWtypk2tbhKY5S0jvPS+sYDnb2Z3378A==
+workbox-window@6.5.3:
+  version "6.5.3"
+  resolved "https://registry.yarnpkg.com/workbox-window/-/workbox-window-6.5.3.tgz#4ade70056cb73477ef1cd8fea7cfd0ecbd825c7f"
+  integrity sha512-GnJbx1kcKXDtoJBVZs/P7ddP0Yt52NNy4nocjBpYPiRhMqTpJCNrSL+fGHZ/i/oP6p/vhE8II0sA6AZGKGnssw==
   dependencies:
     "@types/trusted-types" "^2.0.2"
-    workbox-core "6.5.2"
+    workbox-core "6.5.3"
 
 wrap-ansi@^6.2.0:
   version "6.2.0"
@@ -10345,9 +10622,9 @@ yargs@^16.2.0:
     yargs-parser "^20.2.2"
 
 yargs@^17.3.1:
-  version "17.4.0"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.4.0.tgz#9fc9efc96bd3aa2c1240446af28499f0e7593d00"
-  integrity sha512-WJudfrk81yWFSOkZYpAZx4Nt7V4xp7S/uJkX0CnxovMCt1wCE8LNftPpNuF9X/u9gN5nsD7ycYtRcDf2pL3UiA==
+  version "17.4.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.4.1.tgz#ebe23284207bb75cee7c408c33e722bfb27b5284"
+  integrity sha512-WSZD9jgobAg3ZKuCQZSa3g9QOJeCCqLoLAykiWgmXnDo9EPnn4RPf5qVTtzgOx66o6/oqhcA5tHtJXpG8pMt3g==
   dependencies:
     cliui "^7.0.2"
     escalade "^3.1.1"