diff --git a/.babelrc b/.babelrc
index 189f09ac0..e67b47447 100644
--- a/.babelrc
+++ b/.babelrc
@@ -1,13 +1,4 @@
 {
-    "presets": ["next/babel"],
-    "plugins": [
-        [
-            "styled-components",
-            {
-                "ssr": true,
-                "displayName": true,
-                "preprocess": false
-            }
-        ]
-    ]
+    "presets": [["next/babel"]],
+    "plugins": ["@emotion/babel-plugin"]
 }
diff --git a/package.json b/package.json
index 5f5256267..ac11cc47b 100644
--- a/package.json
+++ b/package.json
@@ -13,11 +13,13 @@
     "prepare": "husky install"
   },
   "dependencies": {
+    "@emotion/cache": "^11.9.3",
+    "@emotion/react": "^11.9.3",
+    "@emotion/server": "^11.4.0",
+    "@emotion/styled": "^11.9.3",
     "@ente-io/next-with-workbox": "^1.0.3",
     "@mui/icons-material": "^5.6.2",
-    "@mui/material": "^5.6.2",
-    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest",
-    "@mui/styled-engine-sc": "^5.6.1",
+    "@mui/material": "^5.8.3",
     "@sentry/nextjs": "^6.7.1",
     "@stripe/stripe-js": "^1.13.2",
     "@typescript-eslint/eslint-plugin": "^4.25.0",
@@ -59,7 +61,6 @@
     "react-window": "^1.8.6",
     "react-window-infinite-loader": "^1.0.5",
     "scrypt-js": "^3.0.1",
-    "styled-components": "^5.3.5",
     "workbox-precaching": "^6.1.5",
     "workbox-recipes": "^6.1.5",
     "workbox-routing": "^6.1.5",
@@ -69,6 +70,7 @@
     "yup": "^0.29.3"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.9.2",
     "@next/bundle-analyzer": "^9.5.3",
     "@types/debounce-promise": "^3.1.3",
     "@types/libsodium-wrappers": "^0.7.8",
@@ -80,9 +82,7 @@
     "@types/react-select": "^4.0.15",
     "@types/react-window": "^1.8.2",
     "@types/react-window-infinite-loader": "^1.0.3",
-    "@types/styled-components": "^5.1.25",
     "@types/yup": "^0.29.7",
-    "babel-plugin-styled-components": "^1.11.1",
     "eslint": "^7.27.0",
     "eslint-config-google": "^0.14.0",
     "eslint-config-prettier": "^8.3.0",
@@ -101,8 +101,5 @@
       "eslint --fix",
       "prettier --write --ignore-unknown"
     ]
-  },
-  "resolutions": {
-    "@mui/styled-engine": "npm:@mui/styled-engine-sc@latest"
   }
 }
diff --git a/src/components/AddToCollectionBtn.tsx b/src/components/AddToCollectionBtn.tsx
index 07f0f0597..5316923f9 100644
--- a/src/components/AddToCollectionBtn.tsx
+++ b/src/components/AddToCollectionBtn.tsx
@@ -1,7 +1,7 @@
+import { styled } from '@mui/material';
 import React from 'react';
-import styled from 'styled-components';
 
-const Wrapper = styled.button`
+const Wrapper = styled('button')`
     border: none;
     background-color: #51cd7c;
     position: fixed;
diff --git a/src/components/CodeBlock/styledComponents.tsx b/src/components/CodeBlock/styledComponents.tsx
index 5ad154d6f..8783dac3d 100644
--- a/src/components/CodeBlock/styledComponents.tsx
+++ b/src/components/CodeBlock/styledComponents.tsx
@@ -1,7 +1,6 @@
 import { IconButton } from '@mui/material';
 import { CenteredFlex } from 'components/Container';
-import styled from 'styled-components';
-
+import { styled } from '@mui/material';
 export const Wrapper = styled(CenteredFlex)`
     position: relative;
     background: ${({ theme }) => theme.palette.accent.dark};
@@ -15,7 +14,7 @@ export const CopyButtonWrapper = styled(IconButton)`
     margin: ${({ theme }) => theme.spacing(1)};
 `;
 
-export const CodeWrapper = styled.div`
+export const CodeWrapper = styled('div')`
     padding: 36px 36px 16px 16px;
     border-radius: ${({ theme }) => theme.shape.borderRadius}px;
 `;
diff --git a/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx b/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
index 795358711..32b859211 100644
--- a/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
+++ b/src/components/Collections/AllCollections/CollectionSort/optionCreator.tsx
@@ -19,12 +19,7 @@ const SortByOptionCreator =
             <MenuItem onClick={handleClick} style={{ paddingLeft: '5px' }}>
                 <ListItemIcon style={{ minWidth: '25px' }}>
                     {activeSortBy === props.sortBy && (
-                        <TickIcon
-                            css={`
-                                height: 16px;
-                                width: 16px;
-                            `}
-                        />
+                        <TickIcon sx={{ fontSize: 16 }} />
                     )}
                 </ListItemIcon>
                 <ListItemText>{props.children}</ListItemText>
diff --git a/src/components/Collections/CollectionBar/ScrollButton.tsx b/src/components/Collections/CollectionBar/ScrollButton.tsx
index c5244e933..20aed9d0e 100644
--- a/src/components/Collections/CollectionBar/ScrollButton.tsx
+++ b/src/components/Collections/CollectionBar/ScrollButton.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import styled, { css } from 'styled-components';
 import NavigateNextIcon from '@mui/icons-material/NavigateNext';
 import { SCROLL_DIRECTION } from 'hooks/useComponentScroll';
+import { css, styled } from '@mui/material';
 
-const Wrapper = styled.button<{ direction: SCROLL_DIRECTION }>`
+const Wrapper = styled('button')<{ direction: SCROLL_DIRECTION }>`
     position: absolute;
     z-index: 2;
     top: 7px;
diff --git a/src/components/Collections/CollectionShare/publicShare/switch.tsx b/src/components/Collections/CollectionShare/publicShare/switch.tsx
index e8f30f7ab..1f4daa2bb 100644
--- a/src/components/Collections/CollectionShare/publicShare/switch.tsx
+++ b/src/components/Collections/CollectionShare/publicShare/switch.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { SwitchProps, Switch } from '@mui/material';
-import styled from 'styled-components';
-
+import { styled } from '@mui/material';
 const PublicShareSwitch = styled((props: SwitchProps) => (
     <Switch
         focusVisibleClassName=".Mui-focusVisible"
diff --git a/src/components/Collections/CollectionShare/styledComponents.tsx b/src/components/Collections/CollectionShare/styledComponents.tsx
index 82d257049..014f35570 100644
--- a/src/components/Collections/CollectionShare/styledComponents.tsx
+++ b/src/components/Collections/CollectionShare/styledComponents.tsx
@@ -1,13 +1,12 @@
-import styled from 'styled-components';
-
-export const ManageSectionLabel = styled.summary(
+import { styled } from '@mui/material';
+export const ManageSectionLabel = styled('summary')(
     ({ theme }) => `
     text-align: center;
     margin-bottom:${theme.spacing(1)};
 `
 );
 
-export const ManageSectionOptions = styled.section(
+export const ManageSectionOptions = styled('section')(
     ({ theme }) => `
     margin-bottom:${theme.spacing(4)};
 `
diff --git a/src/components/Collections/styledComponents.ts b/src/components/Collections/styledComponents.ts
index c02df7cd4..82d34105a 100644
--- a/src/components/Collections/styledComponents.ts
+++ b/src/components/Collections/styledComponents.ts
@@ -1,7 +1,6 @@
 import { Box } from '@mui/material';
 import { PaddedContainer } from 'components/Container';
-import styled from 'styled-components';
-
+import { styled } from '@mui/material';
 export const CollectionListWrapper = styled(Box)`
     position: relative;
     overflow: hidden;
@@ -19,7 +18,7 @@ export const CollectionInfoBarWrapper = styled(Box)`
     margin-bottom: 24px;
 `;
 
-export const ScrollContainer = styled.div`
+export const ScrollContainer = styled('div')`
     width: 100%;
     height: 100px;
     overflow: auto;
@@ -27,34 +26,33 @@ export const ScrollContainer = styled.div`
     display: flex;
 `;
 
-export const CollectionTile = styled.div`
+export const CollectionTile = styled('div')`
     display: flex;
     position: relative;
     border-radius: 4px;
     user-select: none;
     cursor: pointer;
-    background-size: cover;
     & > img {
         object-fit: cover;
-        max-width: 100%;
-        min-height: 100%;
+        width: 100%;
+        height: 100%;
         flex: 1;
         pointer-events: none;
     }
 `;
 
-export const CollectionTileWrapper = styled.div`
+export const CollectionTileWrapper = styled('div')`
     margin-right: 4px;
 `;
 
-export const ActiveIndicator = styled.div`
+export const ActiveIndicator = styled('div')`
     height: 3px;
     background-color: ${({ theme }) => theme.palette.text.primary};
     margin-top: 18px;
     border-radius: 2px;
 `;
 
-export const Hider = styled.div<{ hide: boolean }>`
+export const Hider = styled('div')<{ hide: boolean }>`
     display: ${(props) => (props.hide ? 'none' : 'block')};
 `;
 
@@ -86,7 +84,7 @@ export const ResultPreviewTile = styled(AllCollectionTile)`
     border-radius: 4px;
 `;
 
-export const CollectionTileTextOverlay = styled.div`
+export const CollectionTileTextOverlay = styled('div')`
     height: 100%;
     width: 100%;
     position: absolute;
diff --git a/src/components/Container.ts b/src/components/Container.ts
index aeea70b92..3af2b1b27 100644
--- a/src/components/Container.ts
+++ b/src/components/Container.ts
@@ -1,5 +1,5 @@
 import { Box } from '@mui/material';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { default as MuiStyled } from '@mui/styled-engine';
 import { IMAGE_CONTAINER_MAX_WIDTH } from 'constants/gallery';
 
@@ -15,13 +15,13 @@ const VerticallyCentered = MuiStyled(Box)`
 
 export default VerticallyCentered;
 
-export const DisclaimerContainer = styled.div`
+export const DisclaimerContainer = styled('div')`
     margin: 16px 0;
     color: rgb(158, 150, 137);
     font-size: 14px;
 `;
 
-export const IconButton = styled.button`
+export const IconButton = styled('button')`
     background: none;
     border: none;
     border-radius: 50%;
@@ -38,18 +38,18 @@ export const IconButton = styled.button`
     }
 `;
 
-export const Row = styled.div`
+export const Row = styled('div')`
     display: flex;
     align-items: center;
     margin-bottom: ${({ theme }) => theme.spacing(2)};
     flex: 1;
 `;
 
-export const Label = styled.div<{ width?: string }>`
+export const Label = styled('div')<{ width?: string }>`
     width: ${(props) => props.width ?? '70%'};
     color: ${(props) => props.theme.palette.text.secondary};
 `;
-export const Value = styled.div<{ width?: string }>`
+export const Value = styled('div')<{ width?: string }>`
     display: flex;
     justify-content: flex-start;
     align-items: center;
@@ -62,7 +62,7 @@ export const FlexWrapper = styled(Box)`
     align-items: center;
 `;
 
-export const FreeFlowText = styled.div`
+export const FreeFlowText = styled('div')`
     word-break: break-word;
     min-width: 30%;
     text-align: left;
diff --git a/src/components/DeleteBtn.tsx b/src/components/DeleteBtn.tsx
index 7753e3e14..df4511cdd 100644
--- a/src/components/DeleteBtn.tsx
+++ b/src/components/DeleteBtn.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import constants from 'utils/strings/constants';
 import { IconWithMessage } from './IconWithMessage';
 
-const Wrapper = styled.button`
+const Wrapper = styled('button')`
     border: none;
     background-color: #ff6666;
     position: fixed;
diff --git a/src/components/EmptyScreen.tsx b/src/components/EmptyScreen.tsx
index 717a36e9c..bb1113843 100644
--- a/src/components/EmptyScreen.tsx
+++ b/src/components/EmptyScreen.tsx
@@ -1,10 +1,10 @@
 import React, { useContext } from 'react';
 import { Button } from 'react-bootstrap';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import constants from 'utils/strings/constants';
 import { DeduplicateContext } from 'pages/deduplicate';
 
-const Wrapper = styled.div`
+const Wrapper = styled('div')`
     display: flex;
     justify-content: center;
     align-items: center;
diff --git a/src/components/EnteLogo.tsx b/src/components/EnteLogo.tsx
index 83eb7fd7e..b7978af6e 100644
--- a/src/components/EnteLogo.tsx
+++ b/src/components/EnteLogo.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
-
-const LogoImage = styled.img`
+import { styled } from '@mui/material';
+const LogoImage = styled('img')`
     height: 18px;
     padding: 0 3px;
 `;
diff --git a/src/components/ExportInProgress.tsx b/src/components/ExportInProgress.tsx
index 6f508a545..0e87bc290 100644
--- a/src/components/ExportInProgress.tsx
+++ b/src/components/ExportInProgress.tsx
@@ -1,11 +1,11 @@
 import React from 'react';
 import { Button, ProgressBar } from 'react-bootstrap';
 import { ExportProgress } from 'types/export';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import constants from 'utils/strings/constants';
 import { ExportStage } from 'constants/export';
 
-export const ComfySpan = styled.span`
+export const ComfySpan = styled('span')`
     word-spacing: 1rem;
     color: #ddd;
 `;
diff --git a/src/components/ExportModal.tsx b/src/components/ExportModal.tsx
index d9d176e89..b715e2ba3 100644
--- a/src/components/ExportModal.tsx
+++ b/src/components/ExportModal.tsx
@@ -5,7 +5,7 @@ import exportService from 'services/exportService';
 import { ExportProgress, ExportStats } from 'types/export';
 import { getLocalFiles } from 'services/fileService';
 import { User } from 'types/user';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { sleep } from 'utils/common';
 import { getExportRecordFileUID } from 'utils/export';
 import { logError } from 'utils/sentry';
@@ -20,7 +20,7 @@ import InProgressIcon from './icons/InProgressIcon';
 import DialogBox from './DialogBox';
 import { ExportStage, ExportType } from 'constants/export';
 
-const FolderIconWrapper = styled.div`
+const FolderIconWrapper = styled('div')`
     width: 15%;
     margin-left: 10px;
     cursor: pointer;
@@ -32,7 +32,7 @@ const FolderIconWrapper = styled.div`
     }
 `;
 
-const ExportFolderPathContainer = styled.span`
+const ExportFolderPathContainer = styled('span')`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/components/FavButton.tsx b/src/components/FavButton.tsx
index 32a988e8b..896174c97 100644
--- a/src/components/FavButton.tsx
+++ b/src/components/FavButton.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
-
-const HeartUI = styled.button<{
+import { styled } from '@mui/material';
+const HeartUI = styled('button')<{
     isClick: boolean;
     size: number;
 }>`
diff --git a/src/components/FullScreenDropZone.tsx b/src/components/FullScreenDropZone.tsx
index 0cae1fa1e..d51ad0fcf 100644
--- a/src/components/FullScreenDropZone.tsx
+++ b/src/components/FullScreenDropZone.tsx
@@ -1,20 +1,20 @@
 import React, { useEffect, useState } from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import constants from 'utils/strings/constants';
 import CloseIcon from '@mui/icons-material/Close';
 
-const CloseButtonWrapper = styled.div`
+const CloseButtonWrapper = styled('div')`
     position: absolute;
     top: 10px;
     right: 10px;
     cursor: pointer;
 `;
-const DropDiv = styled.div`
+const DropDiv = styled('div')`
     flex: 1;
     display: flex;
     flex-direction: column;
 `;
-const Overlay = styled.div`
+const Overlay = styled('div')`
     border-width: 8px;
     left: 0;
     top: 0;
diff --git a/src/components/LoadingOverlay.tsx b/src/components/LoadingOverlay.tsx
index 7eedd1750..3d75a1848 100644
--- a/src/components/LoadingOverlay.tsx
+++ b/src/components/LoadingOverlay.tsx
@@ -1,6 +1,5 @@
-import styled from 'styled-components';
-
-export const LoadingOverlay = styled.div`
+import { styled } from '@mui/material';
+export const LoadingOverlay = styled('div')`
     left: 0;
     top: 0;
     outline: none;
diff --git a/src/components/LogoImg.tsx b/src/components/LogoImg.tsx
index 539979720..2acf5aee8 100644
--- a/src/components/LogoImg.tsx
+++ b/src/components/LogoImg.tsx
@@ -1,6 +1,5 @@
-import styled from 'styled-components';
-
-export default styled.img`
+import { styled } from '@mui/material';
+export default styled('img')`
     height: 25px;
     vertical-align: bottom;
     padding-right: 15px;
diff --git a/src/components/Navbar/SelectionBar.tsx b/src/components/Navbar/SelectionBar.tsx
index edeb56e23..6a20cba99 100644
--- a/src/components/Navbar/SelectionBar.tsx
+++ b/src/components/Navbar/SelectionBar.tsx
@@ -1,6 +1,5 @@
 import NavbarBase from 'components/Navbar/base';
-import styled from 'styled-components';
-
+import { styled } from '@mui/material';
 export const SelectionBar = styled(NavbarBase)`
     position: fixed;
     z-index: 2;
diff --git a/src/components/Navbar/base.tsx b/src/components/Navbar/base.tsx
index f799ee676..42825c964 100644
--- a/src/components/Navbar/base.tsx
+++ b/src/components/Navbar/base.tsx
@@ -1,6 +1,5 @@
 import { FlexWrapper } from 'components/Container';
-import styled from 'styled-components';
-
+import { styled } from '@mui/material';
 const NavbarBase = styled(FlexWrapper)`
     padding: 0 20px;
     min-height: 64px;
diff --git a/src/components/Notification.tsx b/src/components/Notification.tsx
index 405ba85cf..f415466a6 100644
--- a/src/components/Notification.tsx
+++ b/src/components/Notification.tsx
@@ -45,11 +45,11 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
                 component={Button}
                 color={attributes.variant}
                 onClick={handleClick}
-                css={`
-                    width: 320px;
-                    padding: 12px 16px;
-                `}
-                sx={{ textAlign: 'left' }}>
+                sx={{
+                    textAlign: 'left',
+                    width: '320px',
+                    padding: '12px 16px',
+                }}>
                 <Stack
                     flex={'1'}
                     spacing={2}
@@ -68,11 +68,8 @@ export default function Notification({ open, onClose, attributes }: Iprops) {
                         {attributes?.action && (
                             <Typography
                                 mb={0.5}
-                                css={`
-                                    font-size: 16px;
-                                    font-weight: 600;
-                                    line-height: 19px;
-                                `}>
+                                variant="button"
+                                fontWeight={'bold'}>
                                 {attributes?.action.text}
                             </Typography>
                         )}
diff --git a/src/components/PhotoFrame.tsx b/src/components/PhotoFrame.tsx
index 4cb323a04..0cfab6e99 100644
--- a/src/components/PhotoFrame.tsx
+++ b/src/components/PhotoFrame.tsx
@@ -2,7 +2,7 @@ import { GalleryContext } from 'pages/gallery';
 import PreviewCard from './pages/gallery/PreviewCard';
 import React, { useContext, useEffect, useRef, useState } from 'react';
 import { EnteFile } from 'types/file';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import DownloadManager from 'services/downloadManager';
 import constants from 'utils/strings/constants';
 import AutoSizer from 'react-virtualized-auto-sizer';
@@ -30,7 +30,7 @@ import { Search } from 'types/search';
 import { logError } from 'utils/sentry';
 import { CustomError } from 'utils/error';
 
-const Container = styled.div`
+const Container = styled('div')`
     display: block;
     flex: 1;
     width: 100%;
diff --git a/src/components/PhotoList.tsx b/src/components/PhotoList.tsx
index 22c887eb7..99f534deb 100644
--- a/src/components/PhotoList.tsx
+++ b/src/components/PhotoList.tsx
@@ -1,6 +1,6 @@
 import React, { useRef, useEffect, useContext } from 'react';
 import { VariableSizeList as List } from 'react-window';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { EnteFile } from 'types/file';
 import {
     IMAGE_CONTAINER_MAX_WIDTH,
@@ -49,7 +49,7 @@ export interface TimeStampListItem {
     fileCount?: number;
 }
 
-const ListItem = styled.div`
+const ListItem = styled('div')`
     display: flex;
     justify-content: center;
 `;
diff --git a/src/components/PhotoSwipe/styledComponents/Legend.tsx b/src/components/PhotoSwipe/styledComponents/Legend.tsx
index 8acc293ff..a9508a9d6 100644
--- a/src/components/PhotoSwipe/styledComponents/Legend.tsx
+++ b/src/components/PhotoSwipe/styledComponents/Legend.tsx
@@ -1,6 +1,5 @@
-import styled from 'styled-components';
-
-export const Legend = styled.span`
+import { styled } from '@mui/material';
+export const Legend = styled('span')`
     font-size: 20px;
     color: #ddd;
     display: inline;
diff --git a/src/components/PhotoSwipe/styledComponents/LegendContainer.tsx b/src/components/PhotoSwipe/styledComponents/LegendContainer.tsx
index af1910869..d1af121f8 100644
--- a/src/components/PhotoSwipe/styledComponents/LegendContainer.tsx
+++ b/src/components/PhotoSwipe/styledComponents/LegendContainer.tsx
@@ -1,6 +1,5 @@
-import styled from 'styled-components';
-
-export const LegendContainer = styled.div`
+import { styled } from '@mui/material';
+export const LegendContainer = styled('div')`
     display: flex;
     justify-content: space-between;
 `;
diff --git a/src/components/PhotoSwipe/styledComponents/LivePhotoBtn.tsx b/src/components/PhotoSwipe/styledComponents/LivePhotoBtn.tsx
index da9de73ba..31aa6bf3b 100644
--- a/src/components/PhotoSwipe/styledComponents/LivePhotoBtn.tsx
+++ b/src/components/PhotoSwipe/styledComponents/LivePhotoBtn.tsx
@@ -1,6 +1,5 @@
-import styled from 'styled-components';
-
-export const LivePhotoBtn = styled.button`
+import { styled } from '@mui/material';
+export const LivePhotoBtn = styled('button')`
     position: absolute;
     bottom: 6vh;
     right: 6vh;
diff --git a/src/components/PhotoSwipe/styledComponents/Pre.tsx b/src/components/PhotoSwipe/styledComponents/Pre.tsx
index 977d1bc3d..4e744fe05 100644
--- a/src/components/PhotoSwipe/styledComponents/Pre.tsx
+++ b/src/components/PhotoSwipe/styledComponents/Pre.tsx
@@ -1,6 +1,5 @@
-import styled from 'styled-components';
-
-export const Pre = styled.pre`
+import { styled } from '@mui/material';
+export const Pre = styled('p')`
     color: #aaa;
     padding: 7px 15px;
 `;
diff --git a/src/components/Search/SearchStatsContainer.tsx b/src/components/Search/SearchStatsContainer.tsx
index 9e490a10d..131191cc2 100644
--- a/src/components/Search/SearchStatsContainer.tsx
+++ b/src/components/Search/SearchStatsContainer.tsx
@@ -1,6 +1,5 @@
-import styled from 'styled-components';
-
-const SearchStatsContainer = styled.div(
+import { styled } from '@mui/material';
+const SearchStatsContainer = styled('div')(
     ({ theme }) => `
     display: flex;
     justify-content: center;
diff --git a/src/components/Search/optionWithInfo.tsx b/src/components/Search/optionWithInfo.tsx
index 6955a1c15..f19a3e1cf 100644
--- a/src/components/Search/optionWithInfo.tsx
+++ b/src/components/Search/optionWithInfo.tsx
@@ -18,12 +18,7 @@ export const OptionWithInfo = (props) => (
 const LabelWithInfo = ({ data }: { data: SearchOption }) => (
     <>
         <Box className="main" px={2} py={1}>
-            <Typography
-                css={`
-                    font-size: 12px;
-                    line-height: 16px;
-                `}
-                mb={1}>
+            <Typography variant="caption" mb={1}>
                 {constants.SEARCH_TYPE(data.type)}
             </Typography>
             <SpaceBetweenFlex>
diff --git a/src/components/Search/styledComponents.tsx b/src/components/Search/styledComponents.tsx
index 794b2b335..beace6777 100644
--- a/src/components/Search/styledComponents.tsx
+++ b/src/components/Search/styledComponents.tsx
@@ -3,7 +3,7 @@ import {
     FlexWrapper,
     FluidContainer,
 } from 'components/Container';
-import styled, { css } from 'styled-components';
+import { styled, css } from '@mui/material';
 
 export const SearchBarWrapper = styled(CenteredFlex)<{ isOpen: boolean }>`
     ${(props) =>
diff --git a/src/components/Sidebar/styledComponents.tsx b/src/components/Sidebar/styledComponents.tsx
index 852c4c22f..fda3f4d0a 100644
--- a/src/components/Sidebar/styledComponents.tsx
+++ b/src/components/Sidebar/styledComponents.tsx
@@ -1,8 +1,7 @@
 import { Drawer, Divider, styled } from '@mui/material';
-import { default as MuiStyled } from '@mui/styled-engine';
 import CircleIcon from '@mui/icons-material/Circle';
 
-export const DrawerSidebar = MuiStyled(Drawer)(({ theme }) => ({
+export const DrawerSidebar = styled(Drawer)(({ theme }) => ({
     '& .MuiPaper-root': {
         width: '320px',
         padding: theme.spacing(2, 1, 4, 1),
@@ -11,7 +10,7 @@ export const DrawerSidebar = MuiStyled(Drawer)(({ theme }) => ({
 
 DrawerSidebar.defaultProps = { anchor: 'left' };
 
-export const PaddedDivider = MuiStyled(Divider)<{
+export const PaddedDivider = styled(Divider)<{
     invisible?: boolean;
     spaced?: boolean;
 }>(({ theme, invisible, spaced }) => ({
diff --git a/src/components/TruncateText.tsx b/src/components/TruncateText.tsx
index 4840d8e61..8b51834f1 100644
--- a/src/components/TruncateText.tsx
+++ b/src/components/TruncateText.tsx
@@ -1,8 +1,7 @@
 import Tooltip from '@mui/material/Tooltip';
 import React from 'react';
-import styled from 'styled-components';
-
-export const EllipseText = styled.div`
+import { styled } from '@mui/material';
+export const EllipseText = styled('div')`
     white-space: nowrap;
     overflow: hidden;
     text-overflow: ellipsis;
diff --git a/src/components/TwoFactor/styledComponents.ts b/src/components/TwoFactor/styledComponents.ts
index eab05601f..662b20672 100644
--- a/src/components/TwoFactor/styledComponents.ts
+++ b/src/components/TwoFactor/styledComponents.ts
@@ -1,7 +1,6 @@
 import VerticallyCentered from 'components/Container';
-import styled from 'styled-components';
-
-export const QRCode = styled.img(
+import { styled } from '@mui/material';
+export const QRCode = styled('img')(
     ({ theme }) => `
     height: 200px;
     width: 200px;
diff --git a/src/components/UploadProgress/styledComponents.tsx b/src/components/UploadProgress/styledComponents.tsx
index 97087c8a6..8d3034be4 100644
--- a/src/components/UploadProgress/styledComponents.tsx
+++ b/src/components/UploadProgress/styledComponents.tsx
@@ -1,6 +1,5 @@
-import styled from 'styled-components';
-
-export const NotUploadSectionHeader = styled.div(
+import { styled } from '@mui/material';
+export const NotUploadSectionHeader = styled('div')(
     ({ theme }) => `
     text-align: center;
     color: ${theme.palette.danger.main};
@@ -9,7 +8,7 @@ export const NotUploadSectionHeader = styled.div(
 `
 );
 
-export const InProgressItemContainer = styled.div`
+export const InProgressItemContainer = styled('div')`
     display: inline-block;
     & > span {
         display: inline-block;
@@ -27,7 +26,7 @@ export const InProgressItemContainer = styled.div`
     }
 `;
 
-export const ResultItemContainer = styled.div`
+export const ResultItemContainer = styled('div')`
     position: relative;
     top: 5px;
     display: inline-block;
diff --git a/src/components/UploadProgress/title.tsx b/src/components/UploadProgress/title.tsx
index fffeb0ca2..a390022ec 100644
--- a/src/components/UploadProgress/title.tsx
+++ b/src/components/UploadProgress/title.tsx
@@ -20,16 +20,7 @@ const IconButtonWithBG = styled(IconButton)(({ theme }) => ({
 }));
 
 const UploadProgressTitleText = ({ expanded }) => (
-    <Typography
-        {...(expanded ? { variant: 'title' } : {})}
-        css={
-            !expanded &&
-            `
-font-size: 24px;
-font-weight: 600;
-line-height: 36px;
-`
-        }>
+    <Typography variant={expanded ? 'title' : 'subtitle'}>
         {constants.FILE_UPLOAD}
     </Typography>
 );
diff --git a/src/components/icons/InProgressIcon.tsx b/src/components/icons/InProgressIcon.tsx
index f23bcd809..da0ad8ece 100644
--- a/src/components/icons/InProgressIcon.tsx
+++ b/src/components/icons/InProgressIcon.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
-
-const Rotate = styled.div<{ disabled }>`
+import { styled } from '@mui/material';
+const Rotate = styled('div')<{ disabled }>`
     width: 24px;
     height: 27px;
     ${(props) =>
diff --git a/src/components/icons/LivePhotoIndicatorOverlay.tsx b/src/components/icons/LivePhotoIndicatorOverlay.tsx
index 9d5e26ea8..253a0883f 100644
--- a/src/components/icons/LivePhotoIndicatorOverlay.tsx
+++ b/src/components/icons/LivePhotoIndicatorOverlay.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
-
-const Wrapper = styled.div`
+import { styled } from '@mui/material';
+const Wrapper = styled('div')`
     font-size: 10px;
     position: absolute;
     padding: 2px;
diff --git a/src/components/pages/dedupe/SelectedFileOptions.tsx b/src/components/pages/dedupe/SelectedFileOptions.tsx
index 1c2e89e38..dd36afe62 100644
--- a/src/components/pages/dedupe/SelectedFileOptions.tsx
+++ b/src/components/pages/dedupe/SelectedFileOptions.tsx
@@ -3,14 +3,14 @@ import { SelectionBar } from '../../Navbar/SelectionBar';
 import constants from 'utils/strings/constants';
 import DeleteIcon from 'components/icons/DeleteIcon';
 import React, { useContext } from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { DeduplicateContext } from 'pages/deduplicate';
 import { IconWithMessage } from 'components/IconWithMessage';
 import { AppContext } from 'pages/_app';
 import CloseIcon from '@mui/icons-material/Close';
 import BackButton from '@mui/icons-material/ArrowBackOutlined';
 
-const VerticalLine = styled.div`
+const VerticalLine = styled('div')`
     position: absolute;
     width: 1px;
     top: 0;
@@ -18,7 +18,7 @@ const VerticalLine = styled.div`
     background: #303030;
 `;
 
-const CheckboxText = styled.div`
+const CheckboxText = styled('div')`
     margin-left: 0.5em;
     font-size: 16px;
     margin-right: 0.8em;
diff --git a/src/components/pages/gallery/AddCollectionButton.tsx b/src/components/pages/gallery/AddCollectionButton.tsx
index 3e204d8ff..6cfa704b7 100644
--- a/src/components/pages/gallery/AddCollectionButton.tsx
+++ b/src/components/pages/gallery/AddCollectionButton.tsx
@@ -2,10 +2,10 @@ import { Typography } from '@mui/material';
 import CollectionCard from 'components/Collections/CollectionCard';
 import { CollectionSelectorTile } from 'components/Collections/styledComponents';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import constants from 'utils/strings/constants';
 
-const ImageContainer = styled.div`
+const ImageContainer = styled('div')`
     position: absolute;
     width: 100%;
     height: 100%;
@@ -25,12 +25,7 @@ export default function AddCollectionButton({
             collectionTile={CollectionSelectorTile}
             onClick={() => showNextModal()}
             latestFile={null}>
-            <Typography
-                css={`
-                    font-size: 14px;
-                    font-weight: 600;
-                    line-height: 20px;
-                `}>
+            <Typography variant="body2" fontWeight={'bold'}>
                 {constants.CREATE_COLLECTION}
             </Typography>
             <ImageContainer>+</ImageContainer>
diff --git a/src/components/pages/gallery/AlertBanner.tsx b/src/components/pages/gallery/AlertBanner.tsx
index fa14b6de5..8b786ebc9 100644
--- a/src/components/pages/gallery/AlertBanner.tsx
+++ b/src/components/pages/gallery/AlertBanner.tsx
@@ -1,14 +1,14 @@
 import { FlexWrapper } from 'components/Container';
 import WarningIcon from 'components/icons/WarningIcon';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { ButtonVariant, getVariantColor } from './LinkButton';
 
 interface Props {
     bannerMessage?: any;
     variant?: string;
 }
-const Banner = styled.div`
+const Banner = styled('div')`
     border: 1px solid ${getVariantColor(ButtonVariant.warning)};
     border-radius: 8px;
     padding: 16px 28px;
diff --git a/src/components/pages/gallery/OptionIcon.tsx b/src/components/pages/gallery/OptionIcon.tsx
index c71241bd1..4269d0963 100644
--- a/src/components/pages/gallery/OptionIcon.tsx
+++ b/src/components/pages/gallery/OptionIcon.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
-import styled from 'styled-components';
-
-export const OptionIconWrapper = styled.div`
+import { styled } from '@mui/material';
+export const OptionIconWrapper = styled('div')`
     display: inline-block;
     opacity: 0;
     font-weight: bold;
diff --git a/src/components/pages/gallery/PlanSelector/plans/planTile.tsx b/src/components/pages/gallery/PlanSelector/plans/planTile.tsx
index ba42cbe16..d9d245d00 100644
--- a/src/components/pages/gallery/PlanSelector/plans/planTile.tsx
+++ b/src/components/pages/gallery/PlanSelector/plans/planTile.tsx
@@ -1,6 +1,6 @@
-import styled, { css } from 'styled-components';
+import { css, styled } from '@mui/material';
 
-export const PlanTile = styled.div<{ currentlySubscribed: boolean }>`
+export const PlanTile = styled('div')<{ currentlySubscribed: boolean }>`
     border-radius: 20px;
     width: 220px;
     border: 2px solid #333;
diff --git a/src/components/pages/gallery/PreviewCard.tsx b/src/components/pages/gallery/PreviewCard.tsx
index 3a6e3c9c5..e8505ede1 100644
--- a/src/components/pages/gallery/PreviewCard.tsx
+++ b/src/components/pages/gallery/PreviewCard.tsx
@@ -1,6 +1,6 @@
 import React, { useContext, useLayoutEffect, useRef, useState } from 'react';
 import { EnteFile } from 'types/file';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import PlayCircleOutlineOutlinedIcon from '@mui/icons-material/PlayCircleOutlineOutlined';
 import DownloadManager from 'services/downloadManager';
 import useLongPress from 'utils/common/useLongPress';
@@ -28,7 +28,7 @@ interface IProps {
     isInsSelectRange?: boolean;
 }
 
-const Check = styled.input<{ active: boolean }>`
+const Check = styled('input')<{ active: boolean }>`
     appearance: none;
     position: absolute;
     z-index: 10;
@@ -87,7 +87,7 @@ const Check = styled.input<{ active: boolean }>`
     }
 `;
 
-export const HoverOverlay = styled.div<{ checked: boolean }>`
+export const HoverOverlay = styled('div')<{ checked: boolean }>`
     opacity: 0;
     left: 0;
     top: 0;
@@ -100,7 +100,7 @@ export const HoverOverlay = styled.div<{ checked: boolean }>`
         'background:linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0))'};
 `;
 
-export const InSelectRangeOverLay = styled.div<{ active: boolean }>`
+export const InSelectRangeOverLay = styled('div')<{ active: boolean }>`
     opacity: ${(props) => (!props.active ? 0 : 1)};
     left: 0;
     top: 0;
@@ -111,7 +111,7 @@ export const InSelectRangeOverLay = styled.div<{ active: boolean }>`
     ${(props) => props.active && 'background:rgba(81, 205, 124, 0.25)'};
 `;
 
-export const FileAndCollectionNameOverlay = styled.div`
+export const FileAndCollectionNameOverlay = styled('div')`
     width: 100%;
     bottom: 0;
     left: 0;
@@ -135,7 +135,7 @@ export const FileAndCollectionNameOverlay = styled.div`
     position: absolute;
 `;
 
-export const SelectedOverlay = styled.div<{ selected: boolean }>`
+export const SelectedOverlay = styled('div')<{ selected: boolean }>`
     z-index: 5;
     position: absolute;
     left: 0;
@@ -146,7 +146,7 @@ export const SelectedOverlay = styled.div<{ selected: boolean }>`
     border-radius: 4px;
 `;
 
-const Cont = styled.div<{ disabled: boolean }>`
+const Cont = styled('div')<{ disabled: boolean }>`
     background: #222;
     display: flex;
     width: fit-content;
diff --git a/src/components/pages/gallery/UploadButton.tsx b/src/components/pages/gallery/UploadButton.tsx
index eeeec54bd..b40b4cdf3 100644
--- a/src/components/pages/gallery/UploadButton.tsx
+++ b/src/components/pages/gallery/UploadButton.tsx
@@ -1,10 +1,10 @@
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import FileUploadOutlinedIcon from '@mui/icons-material/FileUploadOutlined';
 import { Button } from '@mui/material';
 import constants from 'utils/strings/constants';
 
-const Wrapper = styled.div<{ isDisabled: boolean }>`
+const Wrapper = styled('div')<{ isDisabled: boolean }>`
     display: flex;
     align-items: center;
     justify-content: center;
diff --git a/src/components/pages/gallery/UploadStrategyChoiceModal.tsx b/src/components/pages/gallery/UploadStrategyChoiceModal.tsx
index 8731869c6..794ad861d 100644
--- a/src/components/pages/gallery/UploadStrategyChoiceModal.tsx
+++ b/src/components/pages/gallery/UploadStrategyChoiceModal.tsx
@@ -34,7 +34,7 @@ function UploadStrategyChoiceModal({
                 </CenteredFlex>
                 <SpaceBetweenFlex>
                     <Button
-                        size="large"
+                        size="medium"
                         color="accent"
                         onClick={() => {
                             props.onClose();
@@ -46,7 +46,7 @@ function UploadStrategyChoiceModal({
                     <strong>{constants.OR}</strong>
 
                     <Button
-                        size="large"
+                        size="medium"
                         color="accent"
                         onClick={() => {
                             props.onClose();
diff --git a/src/components/pages/sharedAlbum/AbuseReportForm.tsx b/src/components/pages/sharedAlbum/AbuseReportForm.tsx
index 485e9fd21..f1b166b70 100644
--- a/src/components/pages/sharedAlbum/AbuseReportForm.tsx
+++ b/src/components/pages/sharedAlbum/AbuseReportForm.tsx
@@ -8,7 +8,7 @@ import { Col, Form, FormControl, Row } from 'react-bootstrap';
 import { reportAbuse } from 'services/publicCollectionService';
 import constants from 'utils/strings/constants';
 import * as Yup from 'yup';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { AbuseReportDetails, AbuseReportRequest } from 'types/publicCollection';
 import { AppContext } from 'pages/_app';
 
@@ -52,7 +52,7 @@ const defaultInitialValues: FormValues = {
     },
 };
 
-const Wrapper = styled.div`
+const Wrapper = styled('div')`
     padding: 5px 20px;
 `;
 
diff --git a/src/components/pages/sharedAlbum/GoToEnte.tsx b/src/components/pages/sharedAlbum/GoToEnte.tsx
index 7fefe8308..1afe26c02 100644
--- a/src/components/pages/sharedAlbum/GoToEnte.tsx
+++ b/src/components/pages/sharedAlbum/GoToEnte.tsx
@@ -1,16 +1,16 @@
 import { ENTE_WEBSITE_LINK } from 'constants/urls';
 import React, { useEffect, useState } from 'react';
 import { Button } from 'react-bootstrap';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import GetDeviceOS, { OS } from 'utils/common/deviceDetection';
 import constants from 'utils/strings/constants';
 
-const Wrapper = styled.div`
+const Wrapper = styled('div')`
     position: fixed;
     right: 20px;
 `;
 
-const NoStyleAnchor = styled.a`
+const NoStyleAnchor = styled('a')`
     color: inherit;
     text-decoration: none !important;
     &:hover {
diff --git a/src/components/pages/sharedAlbum/ReportAbuse.tsx b/src/components/pages/sharedAlbum/ReportAbuse.tsx
index 505c1bca8..a428da0ca 100644
--- a/src/components/pages/sharedAlbum/ReportAbuse.tsx
+++ b/src/components/pages/sharedAlbum/ReportAbuse.tsx
@@ -1,8 +1,7 @@
 import React from 'react';
 import { Button } from 'react-bootstrap';
-import styled from 'styled-components';
-
-const Container = styled.div`
+import { styled } from '@mui/material';
+const Container = styled('div')`
     position: fixed;
     bottom: 7%;
     right: 2%;
diff --git a/src/createEmotionCache.js b/src/createEmotionCache.js
new file mode 100644
index 000000000..138a43cc4
--- /dev/null
+++ b/src/createEmotionCache.js
@@ -0,0 +1,7 @@
+import createCache from '@emotion/cache';
+
+// prepend: true moves MUI styles to the top of the <head> so they're loaded first.
+// It allows developers to easily override MUI styles with other styling solutions, like CSS modules.
+export default function createEmotionCache() {
+    return createCache({ key: 'css', prepend: true });
+}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index 91344a91d..09e35b5ad 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -1,5 +1,4 @@
 import React, { createContext, useEffect, useRef, useState } from 'react';
-import styled, { ThemeProvider as SThemeProvider } from 'styled-components';
 import AppNavbar from 'components/Navbar/app';
 import constants from 'utils/strings/constants';
 import { useRouter } from 'next/router';
@@ -17,19 +16,21 @@ import Head from 'next/head';
 import { logUploadInfo } from 'utils/upload';
 import LoadingBar from 'react-top-loading-bar';
 import DialogBox from 'components/DialogBox';
-import { ThemeProvider as MThemeProvider } from '@mui/material/styles';
+import { styled, ThemeProvider } from '@mui/material/styles';
+import { CacheProvider, EmotionCache } from '@emotion/react';
+import createEmotionCache from '../createEmotionCache';
 import darkThemeOptions from 'themes/darkThemeOptions';
 import { CssBaseline } from '@mui/material';
-// eslint-disable-next-line @typescript-eslint/no-unused-vars
-import * as types from 'styled-components/cssprop'; // need to css prop on styled component
 import { SetDialogBoxAttributes, DialogBoxAttributes } from 'types/dialogBox';
 import {
     getFamilyPortalRedirectURL,
     getRoadmapRedirectURL,
 } from 'services/userService';
 import { CustomError } from 'utils/error';
+import PropTypes from 'prop-types';
+import { AppProps } from 'next/app';
 
-export const MessageContainer = styled.div`
+export const MessageContainer = styled('div')`
     background-color: #111;
     padding: 0;
     font-size: 14px;
@@ -72,7 +73,19 @@ const redirectMap = new Map([
     ['families', getFamilyPortalRedirectURL],
 ]);
 
-export default function App({ Component, err }) {
+// Client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = createEmotionCache();
+
+interface MyAppProps extends AppProps {
+    emotionCache?: EmotionCache;
+}
+
+export default function MyApp(props: MyAppProps) {
+    const {
+        Component,
+        emotionCache = clientSideEmotionCache,
+        pageProps,
+    } = props;
     const router = useRouter();
     const [loading, setLoading] = useState(false);
     const [offline, setOffline] = useState(
@@ -223,7 +236,7 @@ export default function App({ Component, err }) {
     const closeMessageDialog = () => setMessageDialogView(false);
 
     return (
-        <>
+        <CacheProvider value={emotionCache}>
             <Head>
                 <title>{constants.TITLE}</title>
                 <meta
@@ -232,66 +245,68 @@ export default function App({ Component, err }) {
                 />
             </Head>
 
-            <MThemeProvider theme={darkThemeOptions}>
-                <SThemeProvider theme={darkThemeOptions}>
-                    <CssBaseline />
-                    {showNavbar && <AppNavbar />}
-                    <MessageContainer>
-                        {offline && constants.OFFLINE_MSG}
-                    </MessageContainer>
-                    {sharedFiles &&
-                        (router.pathname === '/gallery' ? (
-                            <MessageContainer>
-                                {constants.FILES_TO_BE_UPLOADED(
-                                    sharedFiles.length
-                                )}
-                            </MessageContainer>
-                        ) : (
-                            <MessageContainer>
-                                {constants.LOGIN_TO_UPLOAD_FILES(
-                                    sharedFiles.length
-                                )}
-                            </MessageContainer>
-                        ))}
-                    {flashMessage && (
-                        <FlashMessageBar
-                            flashMessage={flashMessage}
-                            onClose={() => setFlashMessage(null)}
-                        />
-                    )}
-                    <LoadingBar color="#51cd7c" ref={loadingBar} />
-
-                    <DialogBox
-                        open={messageDialogView}
-                        onClose={closeMessageDialog}
-                        attributes={dialogMessage}
+            <ThemeProvider theme={darkThemeOptions}>
+                <CssBaseline />
+                {showNavbar && <AppNavbar />}
+                <MessageContainer>
+                    {offline && constants.OFFLINE_MSG}
+                </MessageContainer>
+                {sharedFiles &&
+                    (router.pathname === '/gallery' ? (
+                        <MessageContainer>
+                            {constants.FILES_TO_BE_UPLOADED(sharedFiles.length)}
+                        </MessageContainer>
+                    ) : (
+                        <MessageContainer>
+                            {constants.LOGIN_TO_UPLOAD_FILES(
+                                sharedFiles.length
+                            )}
+                        </MessageContainer>
+                    ))}
+                {flashMessage && (
+                    <FlashMessageBar
+                        flashMessage={flashMessage}
+                        onClose={() => setFlashMessage(null)}
                     />
+                )}
+                <LoadingBar color="#51cd7c" ref={loadingBar} />
 
-                    <AppContext.Provider
-                        value={{
-                            showNavBar,
-                            sharedFiles,
-                            resetSharedFiles,
-                            setDisappearingFlashMessage,
-                            redirectURL,
-                            setRedirectURL,
-                            startLoading,
-                            finishLoading,
-                            closeMessageDialog,
-                            setDialogMessage,
-                        }}>
-                        {loading ? (
-                            <VerticallyCentered>
-                                <EnteSpinner>
-                                    <span className="sr-only">Loading...</span>
-                                </EnteSpinner>
-                            </VerticallyCentered>
-                        ) : (
-                            <Component err={err} setLoading={setLoading} />
-                        )}
-                    </AppContext.Provider>
-                </SThemeProvider>
-            </MThemeProvider>
-        </>
+                <DialogBox
+                    open={messageDialogView}
+                    onClose={closeMessageDialog}
+                    attributes={dialogMessage}
+                />
+
+                <AppContext.Provider
+                    value={{
+                        showNavBar,
+                        sharedFiles,
+                        resetSharedFiles,
+                        setDisappearingFlashMessage,
+                        redirectURL,
+                        setRedirectURL,
+                        startLoading,
+                        finishLoading,
+                        closeMessageDialog,
+                        setDialogMessage,
+                    }}>
+                    {loading ? (
+                        <VerticallyCentered>
+                            <EnteSpinner>
+                                <span className="sr-only">Loading...</span>
+                            </EnteSpinner>
+                        </VerticallyCentered>
+                    ) : (
+                        <Component {...pageProps} />
+                    )}
+                </AppContext.Provider>
+            </ThemeProvider>
+        </CacheProvider>
     );
 }
+
+MyApp.propTypes = {
+    Component: PropTypes.elementType.isRequired,
+    emotionCache: PropTypes.object,
+    pageProps: PropTypes.object.isRequired,
+};
diff --git a/src/pages/_document.tsx b/src/pages/_document.tsx
index 44773354b..c087cf9a1 100644
--- a/src/pages/_document.tsx
+++ b/src/pages/_document.tsx
@@ -1,38 +1,19 @@
 import React from 'react';
 import Document, { Html, Head, Main, NextScript } from 'next/document';
-import { ServerStyleSheet } from 'styled-components';
+
+import createEmotionServer from '@emotion/server/create-instance';
+import theme from '../themes/darkThemeOptions';
+import createEmotionCache from '../createEmotionCache';
 
 export default class MyDocument extends Document {
-    static async getInitialProps(ctx) {
-        const sheet = new ServerStyleSheet();
-        const originalRenderPage = ctx.renderPage;
-
-        try {
-            ctx.renderPage = () =>
-                originalRenderPage({
-                    enhanceApp: (App) => (props) =>
-                        sheet.collectStyles(<App {...props} />),
-                });
-
-            const initialProps = await Document.getInitialProps(ctx);
-            return {
-                ...initialProps,
-                styles: (
-                    <>
-                        {initialProps.styles}
-                        {sheet.getStyleElement()}
-                    </>
-                ),
-            };
-        } finally {
-            sheet.seal();
-        }
-    }
-
     render() {
         return (
             <Html lang="en">
                 <Head>
+                    <meta
+                        name="theme-color"
+                        content={theme.palette.primary.main}
+                    />
                     <meta
                         name="description"
                         content="ente is a privacy focussed photo storage service that offers end-to-end encryption."
@@ -55,6 +36,8 @@ export default class MyDocument extends Document {
                         name="apple-mobile-web-app-status-bar-style"
                         content="black"
                     />
+                    {/* Inject MUI styles first to match with the prepend: true configuration. */}
+                    {(this.props as any).emotionStyleTags}
                 </Head>
                 <body>
                     <Main />
@@ -64,3 +47,62 @@ export default class MyDocument extends Document {
         );
     }
 }
+
+// `getInitialProps` belongs to `_document` (instead of `_app`),
+// it's compatible with static-site generation (SSG).
+MyDocument.getInitialProps = async (ctx) => {
+    // Resolution order
+    //
+    // On the server:
+    // 1. app.getInitialProps
+    // 2. page.getInitialProps
+    // 3. document.getInitialProps
+    // 4. app.render
+    // 5. page.render
+    // 6. document.render
+    //
+    // On the server with error:
+    // 1. document.getInitialProps
+    // 2. app.render
+    // 3. page.render
+    // 4. document.render
+    //
+    // On the client
+    // 1. app.getInitialProps
+    // 2. page.getInitialProps
+    // 3. app.render
+    // 4. page.render
+
+    const originalRenderPage = ctx.renderPage;
+
+    // You can consider sharing the same Emotion cache between all the SSR requests to speed up performance.
+    // However, be aware that it can have global side effects.
+    const cache = createEmotionCache();
+    const { extractCriticalToChunks } = createEmotionServer(cache);
+
+    ctx.renderPage = () =>
+        originalRenderPage({
+            enhanceApp: (App: any) =>
+                function EnhanceApp(props) {
+                    return <App emotionCache={cache} {...props} />;
+                },
+        });
+
+    const initialProps = await Document.getInitialProps(ctx);
+    // This is important. It prevents Emotion to render invalid HTML.
+    // See https://github.com/mui/material-ui/issues/26561#issuecomment-855286153
+    const emotionStyles = extractCriticalToChunks(initialProps.html);
+    const emotionStyleTags = emotionStyles.styles.map((style) => (
+        <style
+            data-emotion={`${style.key} ${style.ids.join(' ')}`}
+            key={style.key}
+            // eslint-disable-next-line react/no-danger
+            dangerouslySetInnerHTML={{ __html: style.css }}
+        />
+    ));
+
+    return {
+        ...initialProps,
+        emotionStyleTags,
+    };
+};
diff --git a/src/pages/deduplicate/index.tsx b/src/pages/deduplicate/index.tsx
index 78baafdbe..67c76bac6 100644
--- a/src/pages/deduplicate/index.tsx
+++ b/src/pages/deduplicate/index.tsx
@@ -22,13 +22,13 @@ import DeduplicateOptions from 'components/pages/dedupe/SelectedFileOptions';
 import { PAGES } from 'constants/pages';
 import router from 'next/router';
 import { getKey, SESSION_KEYS } from 'utils/storage/sessionStorage';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { syncCollections } from 'services/collectionService';
 
 export const DeduplicateContext = createContext<DeduplicateContextType>(
     DefaultDeduplicateContext
 );
-export const Info = styled.div`
+export const Info = styled('div')`
     padding: 24px;
     font-size: 18px;
 `;
diff --git a/src/pages/gallery/index.tsx b/src/pages/gallery/index.tsx
index da6c6646d..a60102e5e 100644
--- a/src/pages/gallery/index.tsx
+++ b/src/pages/gallery/index.tsx
@@ -14,7 +14,7 @@ import {
     trashFiles,
     deleteFromTrash,
 } from 'services/fileService';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import {
     syncCollections,
     getFavItemIds,
@@ -104,7 +104,7 @@ import SearchResultInfo from 'components/Search/SearchResultInfo';
 import { NotificationAttributes } from 'types/Notification';
 import { ITEM_TYPE, TimeStampListItem } from 'components/PhotoList';
 
-export const DeadCenter = styled.div`
+export const DeadCenter = styled('div')`
     flex: 1;
     display: flex;
     justify-content: center;
@@ -112,7 +112,7 @@ export const DeadCenter = styled.div`
     text-align: center;
     flex-direction: column;
 `;
-const AlertContainer = styled.div`
+const AlertContainer = styled('div')`
     background-color: #111;
     padding: 5px 0;
     font-size: 14px;
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index e88dd4903..fae272675 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -1,7 +1,7 @@
 import React, { useContext, useEffect, useState } from 'react';
 import Carousel from 'react-bootstrap/Carousel';
 import Button from 'react-bootstrap/Button';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { AppContext } from './_app';
 import Login from 'components/Login';
 import { useRouter } from 'next/router';
@@ -13,7 +13,7 @@ import localForage from 'utils/storage/localForage';
 import { logError } from 'utils/sentry';
 import { getAlbumSiteHost, PAGES } from 'constants/pages';
 
-const Container = styled.div`
+const Container = styled('div')`
     display: flex;
     flex: 1;
     align-items: center;
@@ -25,7 +25,7 @@ const Container = styled.div`
     }
 `;
 
-const SlideContainer = styled.div`
+const SlideContainer = styled('div')`
     flex: 1;
     display: flex;
     flex-direction: column;
@@ -38,7 +38,7 @@ const SlideContainer = styled.div`
     }
 `;
 
-const DesktopBox = styled.div`
+const DesktopBox = styled('div')`
     flex: 1;
     height: 100%;
     padding: 10px;
@@ -52,7 +52,7 @@ const DesktopBox = styled.div`
     }
 `;
 
-const MobileBox = styled.div`
+const MobileBox = styled('div')`
     display: none;
 
     @media (max-width: 1024px) {
@@ -62,13 +62,13 @@ const MobileBox = styled.div`
     }
 `;
 
-const SideBox = styled.div`
+const SideBox = styled('div')`
     display: flex;
     flex-direction: column;
     min-width: 320px;
 `;
 
-const TextContainer = styled.div`
+const TextContainer = styled('div')`
     padding: 20px;
     max-width: 300px;
     margin: 0 auto;
@@ -80,14 +80,14 @@ const UpperText = styled(TextContainer)`
     margin-bottom: 20px;
 `;
 
-const FeatureText = styled.div`
+const FeatureText = styled('div')`
     color: #51cd7c;
     font-weight: bold;
     padding-top: 20px;
     font-size: 24px;
 `;
 
-const Img = styled.img`
+const Img = styled('img')`
     height: 250px;
     object-fit: contain;
 
diff --git a/src/types/theme/styled.d.ts b/src/types/theme/styled.d.ts
deleted file mode 100644
index fed182962..000000000
--- a/src/types/theme/styled.d.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-// styled.d.ts
-import 'styled-components';
-import { Theme } from '@mui/material';
-
-declare module 'styled-components' {
-    export interface DefaultTheme extends Theme {}
-}
diff --git a/src/utils/strings/englishConstants.tsx b/src/utils/strings/englishConstants.tsx
index 479260012..9773df850 100644
--- a/src/utils/strings/englishConstants.tsx
+++ b/src/utils/strings/englishConstants.tsx
@@ -2,7 +2,7 @@ import { Box, Typography } from '@mui/material';
 import Link from '@mui/material/Link';
 import LinkButton from 'components/pages/gallery/LinkButton';
 import React from 'react';
-import styled from 'styled-components';
+import { styled } from '@mui/material';
 import { SuggestionType } from 'types/search';
 import { formatNumberWithCommas } from '.';
 
@@ -18,11 +18,11 @@ const dateString = function (date) {
     });
 };
 
-const Strong = styled.strong`
+const Strong = styled('strong')`
     color: #ddd;
 `;
 
-const Logo = styled.img`
+const Logo = styled('img')`
     height: 18px;
     vertical-align: middle;
     margin-top: -3px;
diff --git a/yarn.lock b/yarn.lock
index 96099ee78..9191e5d55 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -51,7 +51,7 @@
     jsesc "^2.5.1"
     source-map "^0.5.0"
 
-"@babel/helper-annotate-as-pure@^7.0.0", "@babel/helper-annotate-as-pure@^7.14.5", "@babel/helper-annotate-as-pure@^7.15.4":
+"@babel/helper-annotate-as-pure@^7.14.5", "@babel/helper-annotate-as-pure@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.15.4.tgz"
   integrity sha512-QwrtdNvUNsPCj2lfNQacsGSQvGX8ee1ttrBrcozUP2Sv/jylewBP/8QFe6ZkBsC8T/GYWonNAWJV4aRR9AL2DA==
@@ -185,6 +185,11 @@
   resolved "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.7.tgz"
   integrity sha512-Qg3Nk7ZxpgMrsox6HreY1ZNKdBq7K72tDSliA6dCl5f007jR4ne8iD5UzuNnCJH2xBf2BEEVGr+/OL6Gdp7RxA==
 
+"@babel/helper-plugin-utils@^7.17.12":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.17.12.tgz#86c2347da5acbf5583ba0a10aed4c9bf9da9cf96"
+  integrity sha512-JDkf04mqtN3y4iAbO1hv9U2ARpPyPL1zqyWs/2WG1pgSq9llHFjStX5jdxb84himgJm+8Ng+x0oiWF/nw/XQKA==
+
 "@babel/helper-remap-async-to-generator@^7.14.5", "@babel/helper-remap-async-to-generator@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/helper-remap-async-to-generator/-/helper-remap-async-to-generator-7.15.4.tgz"
@@ -456,6 +461,13 @@
   dependencies:
     "@babel/helper-plugin-utils" "^7.8.0"
 
+"@babel/plugin-syntax-jsx@^7.12.13":
+  version "7.17.12"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.17.12.tgz#834035b45061983a491f60096f61a2e7c5674a47"
+  integrity sha512-spyY3E3AURfxh/RHtjx5j6hs8am5NbUBGfcZ2vB3uShSpZdQyXSf5rR5Mk76vbtlAZOelyVQ71Fg0x9SG4fsog==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.17.12"
+
 "@babel/plugin-syntax-logical-assignment-operators@^7.10.4":
   version "7.10.4"
   resolved "https://registry.npmjs.org/@babel/plugin-syntax-logical-assignment-operators/-/plugin-syntax-logical-assignment-operators-7.10.4.tgz"
@@ -872,6 +884,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@^7.7.2":
+  version "7.18.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.18.3.tgz#c7b654b57f6f63cf7f8b418ac9ca04408c4579f4"
+  integrity sha512-38Y8f7YUhce/K7RMwTp7m0uCumpv9hZkitCbBClqQIow1qSbCvGkcegKOXpEWCQLfWmevgRiWokZ1GkpfhbZug==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/template@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/template/-/template-7.15.4.tgz"
@@ -881,7 +900,7 @@
     "@babel/parser" "^7.15.4"
     "@babel/types" "^7.15.4"
 
-"@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4", "@babel/traverse@^7.4.5":
+"@babel/traverse@^7.13.0", "@babel/traverse@^7.15.4":
   version "7.15.4"
   resolved "https://registry.npmjs.org/@babel/traverse/-/traverse-7.15.4.tgz"
   integrity sha512-W6lQD8l4rUbQR/vYgSuCAE75ADyyQvOpFVsvPPdkhf6lATXAsQIG9YdtOcu8BB1dZ0LKu+Zo3c1wEcbKeuhdlA==
@@ -904,6 +923,24 @@
     "@babel/helper-validator-identifier" "^7.14.9"
     to-fast-properties "^2.0.0"
 
+"@emotion/babel-plugin@^11.7.1", "@emotion/babel-plugin@^11.9.2":
+  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@^11.4.0":
   version "11.4.0"
   resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz"
@@ -915,19 +952,37 @@
     "@emotion/weak-memoize" "^0.2.5"
     stylis "^4.0.3"
 
+"@emotion/cache@^11.7.1", "@emotion/cache@^11.9.3":
+  version "11.9.3"
+  resolved "https://registry.yarnpkg.com/@emotion/cache/-/cache-11.9.3.tgz#96638449f6929fd18062cfe04d79b29b44c0d6cb"
+  integrity sha512-0dgkI/JKlCXa+lEXviaMtGBL0ynpx4osh7rjOXE71q9bIF8G+XhJgvi+wDu0B0IdCVx37BffiwXlN9I3UuzFvg==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+    "@emotion/sheet" "^1.1.1"
+    "@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.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz"
   integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
 
-"@emotion/is-prop-valid@^1.1.0", "@emotion/is-prop-valid@^1.1.2":
+"@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/is-prop-valid@^1.1.3":
+  version "1.1.3"
+  resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-1.1.3.tgz#f0907a416368cf8df9e410117068e20fe87c0a3a"
+  integrity sha512-RFg04p6C+1uO19uG8N+vqanzKqiM9eeV1LDOG3bmkYmuOj7NbKNlFC/4EZq5gnwAIlcC/jOT24f8Td0iax2SXA==
+  dependencies:
+    "@emotion/memoize" "^0.7.4"
+
+"@emotion/memoize@^0.7.4", "@emotion/memoize@^0.7.5":
   version "0.7.5"
   resolved "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz"
   integrity sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ==
@@ -945,6 +1000,19 @@
     "@emotion/weak-memoize" "^0.2.5"
     hoist-non-react-statics "^3.3.1"
 
+"@emotion/react@^11.9.3":
+  version "11.9.3"
+  resolved "https://registry.yarnpkg.com/@emotion/react/-/react-11.9.3.tgz#f4f4f34444f6654a2e550f5dab4f2d360c101df9"
+  integrity sha512-g9Q1GcTOlzOEjqwuLF/Zd9LC+4FljjPjDfxSM7KmEakm+hsHXk+bYZ2q+/hTJzr0OUNkujo72pXLQvXj6H+GJQ==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/cache" "^11.9.3"
+    "@emotion/serialize" "^1.0.4"
+    "@emotion/utils" "^1.1.0"
+    "@emotion/weak-memoize" "^0.2.5"
+    hoist-non-react-statics "^3.3.1"
+
 "@emotion/serialize@^1.0.0", "@emotion/serialize@^1.0.2":
   version "1.0.2"
   resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz"
@@ -956,17 +1024,49 @@
     "@emotion/utils" "^1.0.0"
     csstype "^3.0.2"
 
+"@emotion/serialize@^1.0.4":
+  version "1.0.4"
+  resolved "https://registry.yarnpkg.com/@emotion/serialize/-/serialize-1.0.4.tgz#ff31fd11bb07999611199c2229e152faadc21a3c"
+  integrity sha512-1JHamSpH8PIfFwAMryO2bNka+y8+KA5yga5Ocf2d7ZEiJjb7xlLW7aknBGZqJLajuLOvJ+72vN+IBSwPlXD1Pg==
+  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/server@^11.4.0":
+  version "11.4.0"
+  resolved "https://registry.yarnpkg.com/@emotion/server/-/server-11.4.0.tgz#3ae1d74cb31c7d013c3c76e88c0c4439076e9f66"
+  integrity sha512-IHovdWA3V0DokzxLtUNDx4+hQI82zUXqQFcVz/om2t44O0YSc+NHB+qifnyAOoQwt3SXcBTgaSntobwUI9gnfA==
+  dependencies:
+    "@emotion/utils" "^1.0.0"
+    html-tokenize "^2.0.0"
+    multipipe "^1.0.2"
+    through "^2.3.8"
+
 "@emotion/sheet@^1.0.0", "@emotion/sheet@^1.0.2":
   version "1.0.2"
   resolved "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.2.tgz"
   integrity sha512-QQPB1B70JEVUHuNtzjHftMGv6eC3Y9wqavyarj4x4lg47RACkeSfNo5pxIOKizwS9AEFLohsqoaxGQj4p0vSIw==
 
-"@emotion/stylis@^0.8.4":
-  version "0.8.5"
-  resolved "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz"
-  integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ==
+"@emotion/sheet@^1.1.1":
+  version "1.1.1"
+  resolved "https://registry.yarnpkg.com/@emotion/sheet/-/sheet-1.1.1.tgz#015756e2a9a3c7c5f11d8ec22966a8dbfbfac787"
+  integrity sha512-J3YPccVRMiTZxYAY0IOq3kd+hUP8idY8Kz6B/Cyo+JuXq52Ek+zbPbSQUrVQp95aJ+lsAW7DPL1P2Z+U1jGkKA==
 
-"@emotion/unitless@^0.7.4", "@emotion/unitless@^0.7.5":
+"@emotion/styled@^11.9.3":
+  version "11.9.3"
+  resolved "https://registry.yarnpkg.com/@emotion/styled/-/styled-11.9.3.tgz#47f0c71137fec7c57035bf3659b52fb536792340"
+  integrity sha512-o3sBNwbtoVz9v7WB1/Y/AmXl69YHmei2mrVnK7JgyBJ//Rst5yqPZCecEJlMlJrFeWHp+ki/54uN265V2pEcXA==
+  dependencies:
+    "@babel/runtime" "^7.13.10"
+    "@emotion/babel-plugin" "^11.7.1"
+    "@emotion/is-prop-valid" "^1.1.3"
+    "@emotion/serialize" "^1.0.4"
+    "@emotion/utils" "^1.1.0"
+
+"@emotion/unitless@^0.7.5":
   version "0.7.5"
   resolved "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz"
   integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg==
@@ -976,6 +1076,11 @@
   resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz"
   integrity sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA==
 
+"@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.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz"
@@ -1051,18 +1156,18 @@
   resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.0.tgz"
   integrity sha512-wdppn25U8z/2yiaT6YGquE6X8sSv7hNMWSXYSSU1jGv/yd6XqjXgTDJ8KP4NgjTXfJ3GbRjeeb8RTV7a/VpM+w==
 
-"@mui/base@5.0.0-alpha.77":
-  version "5.0.0-alpha.77"
-  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.77.tgz#a88985597708c354520579e4f76e617b29f8f593"
-  integrity sha512-Zqm3qlczGViD3lJSYo8ZnQLHJ3PwGYftbDfVuh2Rq5OD88F7H6oDILlqknzty59NDkeSVO2qlymYmHOY1nLodg==
+"@mui/base@5.0.0-alpha.84":
+  version "5.0.0-alpha.84"
+  resolved "https://registry.yarnpkg.com/@mui/base/-/base-5.0.0-alpha.84.tgz#83c580c9b04b4e4efe3fb39572720470b0d7cc29"
+  integrity sha512-uDx+wGVytS+ZHiWHyzUyijY83GSIXJpzSJ0PGc/8/s+8nBzeHvaPKrAyJz15ASLr52hYRA6PQGqn0eRAsB7syQ==
   dependencies:
     "@babel/runtime" "^7.17.2"
     "@emotion/is-prop-valid" "^1.1.2"
     "@mui/types" "^7.1.3"
-    "@mui/utils" "^5.6.1"
+    "@mui/utils" "^5.8.0"
     "@popperjs/core" "^2.11.5"
     clsx "^1.1.1"
-    prop-types "^15.7.2"
+    prop-types "^15.8.1"
     react-is "^17.0.2"
 
 "@mui/icons-material@^5.6.2":
@@ -1072,69 +1177,70 @@
   dependencies:
     "@babel/runtime" "^7.17.2"
 
-"@mui/material@^5.6.2":
-  version "5.6.2"
-  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.6.2.tgz#bcd0ecdb265aca1bfee11773f6561aeedaa25b45"
-  integrity sha512-bwMvroBrMgUTwUh/BcjhtcJwEw9uH4chV3+ZSj6RckOJtMj8U4yEeD7S4NgHE8Ioj5eObKFzHpih/cTD1sDRpg==
+"@mui/material@^5.8.3":
+  version "5.8.3"
+  resolved "https://registry.yarnpkg.com/@mui/material/-/material-5.8.3.tgz#86681d14c1a119d1d9b6b981c864736d075d095f"
+  integrity sha512-8UecY/W9SMtEZm5PMCUcMbujajVP6fobu0BgBPiIWwwWRblZVEzqprY6v1P2me7qCyrve4L4V/rqAKPKhVHOSg==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/base" "5.0.0-alpha.77"
-    "@mui/system" "^5.6.2"
+    "@mui/base" "5.0.0-alpha.84"
+    "@mui/system" "^5.8.3"
     "@mui/types" "^7.1.3"
-    "@mui/utils" "^5.6.1"
+    "@mui/utils" "^5.8.0"
     "@types/react-transition-group" "^4.4.4"
     clsx "^1.1.1"
-    csstype "^3.0.11"
+    csstype "^3.1.0"
     hoist-non-react-statics "^3.3.2"
-    prop-types "^15.7.2"
+    prop-types "^15.8.1"
     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==
+"@mui/private-theming@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@mui/private-theming/-/private-theming-5.8.0.tgz#7d927e7e12616dc10b0dcbe665df2c00ed859796"
+  integrity sha512-MjRAneTmCKLR9u2S4jtjLUe6gpHxlbb4g2bqpDJ2PdwlvwsWIUzbc/gVB4dvccljXeWxr5G2M/Co2blXisvFIw==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/utils" "^5.6.1"
-    prop-types "^15.7.2"
+    "@mui/utils" "^5.8.0"
+    prop-types "^15.8.1"
 
-"@mui/styled-engine-sc@^5.6.1", "@mui/styled-engine@^5.6.1", "@mui/styled-engine@npm:@mui/styled-engine-sc@latest":
-  name "@mui/styled-engine"
-  version "5.6.1"
-  resolved "https://registry.yarnpkg.com/@mui/styled-engine-sc/-/styled-engine-sc-5.6.1.tgz#d9505c005eeefa5c7d7ef9c03e63324db889ee09"
-  integrity sha512-BMY5Pb8YgOxvvwg9s6mPeDgzha4244/KgRmHvTVPBmvqypbiLPApR6SNyYON+1/3kLHt3TpmxrlRY3jPiZF2QQ==
-  dependencies:
-    prop-types "^15.7.2"
-
-"@mui/system@^5.6.2":
-  version "5.6.2"
-  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.6.2.tgz#04687d60d6a1f0f9df2c9d817b4942dac6b44aac"
-  integrity sha512-Wg9TRbvavSwEYk6UdpnoDx+CqJfaAN7AzlmwEx7DtGmx0snFVBST8FVb1Ev1vXosxEnq6/fe7ZDRobFVewvEPQ==
+"@mui/styled-engine@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@mui/styled-engine/-/styled-engine-5.8.0.tgz#89ed42efe7c8749e5a60af035bc5d3a6bea362bf"
+  integrity sha512-Q3spibB8/EgeMYHc+/o3RRTnAYkSl7ROCLhXJ830W8HZ2/iDiyYp16UcxKPurkXvLhUaILyofPVrP3Su2uKsAw==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@mui/private-theming" "^5.6.2"
-    "@mui/styled-engine" "^5.6.1"
+    "@emotion/cache" "^11.7.1"
+    prop-types "^15.8.1"
+
+"@mui/system@^5.8.3":
+  version "5.8.3"
+  resolved "https://registry.yarnpkg.com/@mui/system/-/system-5.8.3.tgz#66db174f1b5c244eb73dbc48527509782a22ec0a"
+  integrity sha512-/tyGQcYqZT0nl98qV9XnGiedTO+V7VHc28k4POfhMJNedB1CRrwWRm767DeEdc5f/8CU2See3WD16ikP6pYiOA==
+  dependencies:
+    "@babel/runtime" "^7.17.2"
+    "@mui/private-theming" "^5.8.0"
+    "@mui/styled-engine" "^5.8.0"
     "@mui/types" "^7.1.3"
-    "@mui/utils" "^5.6.1"
+    "@mui/utils" "^5.8.0"
     clsx "^1.1.1"
-    csstype "^3.0.11"
-    prop-types "^15.7.2"
+    csstype "^3.1.0"
+    prop-types "^15.8.1"
 
 "@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.6.1":
-  version "5.6.1"
-  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.6.1.tgz#4ab79a21bd481555d9a588f4b18061b3c28ea5db"
-  integrity sha512-CPrzrkiBusCZBLWu0Sg5MJvR3fKJyK3gKecLVX012LULyqg2U64Oz04BKhfkbtBrPBbSQxM+DWW9B1c9hmV9nQ==
+"@mui/utils@^5.8.0":
+  version "5.8.0"
+  resolved "https://registry.yarnpkg.com/@mui/utils/-/utils-5.8.0.tgz#4b1d19cbcf70773283375e763b7b3552b84cb58f"
+  integrity sha512-7LgUtCvz78676iC0wpTH7HizMdCrTphhBmRWimIMFrp5Ph6JbDFVuKS1CwYnWWxRyYKL0QzXrDL0lptAU90EXg==
   dependencies:
     "@babel/runtime" "^7.17.2"
-    "@types/prop-types" "^15.7.4"
+    "@types/prop-types" "^15.7.5"
     "@types/react-is" "^16.7.1 || ^17.0.0"
-    prop-types "^15.7.2"
+    prop-types "^15.8.1"
     react-is "^17.0.2"
 
 "@next/bundle-analyzer@^9.5.3":
@@ -1454,14 +1560,6 @@
     "@types/minimatch" "*"
     "@types/node" "*"
 
-"@types/hoist-non-react-statics@*":
-  version "3.3.1"
-  resolved "https://registry.npmjs.org/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz"
-  integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA==
-  dependencies:
-    "@types/react" "*"
-    hoist-non-react-statics "^3.3.0"
-
 "@types/http-proxy@^1.17.5":
   version "1.17.7"
   resolved "https://registry.npmjs.org/@types/http-proxy/-/http-proxy-1.17.7.tgz"
@@ -1524,7 +1622,7 @@
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
 
-"@types/prop-types@^15.7.4":
+"@types/prop-types@^15.7.5":
   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==
@@ -1634,15 +1732,6 @@
   resolved "https://registry.npmjs.org/@types/source-list-map/-/source-list-map-0.1.2.tgz"
   integrity sha512-K5K+yml8LTo9bWJI/rECfIPrGgxdpeNbj+d53lwN4QjW1MCwlkhUms+gtdzigTeUyBr09+u8BwOIY3MXvHdcsA==
 
-"@types/styled-components@^5.1.25":
-  version "5.1.25"
-  resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.25.tgz#0177c4ab5fa7c6ed0565d36f597393dae3f380ad"
-  integrity sha512-fgwl+0Pa8pdkwXRoVPP9JbqF0Ivo9llnmsm+7TCI330kbPIFd9qv1Lrhr37shf4tnxCOSu+/IgqM7uJXLWZZNQ==
-  dependencies:
-    "@types/hoist-non-react-statics" "*"
-    "@types/react" "*"
-    csstype "^3.0.2"
-
 "@types/tapable@^1":
   version "1.0.8"
   resolved "https://registry.npmjs.org/@types/tapable/-/tapable-1.0.8.tgz"
@@ -1998,6 +2087,15 @@ babel-plugin-dynamic-import-node@^2.3.3:
   dependencies:
     object.assign "^4.1.0"
 
+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-polyfill-corejs2@^0.2.2:
   version "0.2.2"
   resolved "https://registry.npmjs.org/babel-plugin-polyfill-corejs2/-/babel-plugin-polyfill-corejs2-0.2.2.tgz"
@@ -2022,21 +2120,6 @@ babel-plugin-polyfill-regenerator@^0.2.2:
   dependencies:
     "@babel/helper-define-polyfill-provider" "^0.2.2"
 
-"babel-plugin-styled-components@>= 1.12.0", babel-plugin-styled-components@^1.11.1:
-  version "1.13.2"
-  resolved "https://registry.npmjs.org/babel-plugin-styled-components/-/babel-plugin-styled-components-1.13.2.tgz"
-  integrity sha512-Vb1R3d4g+MUfPQPVDMCGjm3cDocJEUTR7Xq7QS95JWWeksN1wdFRYpD2kulDgI3Huuaf1CZd+NK4KQmqUFh5dA==
-  dependencies:
-    "@babel/helper-annotate-as-pure" "^7.0.0"
-    "@babel/helper-module-imports" "^7.0.0"
-    babel-plugin-syntax-jsx "^6.18.0"
-    lodash "^4.17.11"
-
-babel-plugin-syntax-jsx@^6.18.0:
-  version "6.18.0"
-  resolved "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz"
-  integrity sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY=
-
 babel-plugin-syntax-object-rest-spread@^6.8.0:
   version "6.13.0"
   resolved "https://registry.npmjs.org/babel-plugin-syntax-object-rest-spread/-/babel-plugin-syntax-object-rest-spread-6.13.0.tgz"
@@ -2159,6 +2242,11 @@ buffer-from@^1.0.0:
   resolved "https://registry.npmjs.org/buffer-from/-/buffer-from-1.1.2.tgz"
   integrity sha512-E+XQCRwSbaaiChtv6k6Dwgc+bx+Bs6vuKJHHl5kox/BaKbhiXzqQOwK4cO22yElGp2OCmjwVhT3HmxgyPGnJfQ==
 
+buffer-from@~0.1.1:
+  version "0.1.2"
+  resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-0.1.2.tgz#15f4b9bcef012044df31142c14333caf6e0260d0"
+  integrity sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg==
+
 builtin-modules@^3.1.0:
   version "3.2.0"
   resolved "https://registry.npmjs.org/builtin-modules/-/builtin-modules-3.2.0.tgz"
@@ -2182,11 +2270,6 @@ callsites@^3.0.0:
   resolved "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz"
   integrity sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==
 
-camelize@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/camelize/-/camelize-1.0.0.tgz"
-  integrity sha1-FkpUg+Yw+kMh5a8HAg5TGDGyYJs=
-
 caniuse-lite@^1.0.30001254:
   version "1.0.30001255"
   resolved "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001255.tgz"
@@ -2353,7 +2436,7 @@ content-type@~1.0.4:
   resolved "https://registry.npmjs.org/content-type/-/content-type-1.0.4.tgz"
   integrity sha512-hIP3EEPs8tB9AT1L+NUqtwOAps4mk2Zob89MWXMHjHWg9milF/j4osnnQLXBCBFBk/tvIG/tUc9mOUJiPBhPXA==
 
-convert-source-map@^1.7.0:
+convert-source-map@^1.5.0, convert-source-map@^1.7.0:
   version "1.8.0"
   resolved "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.8.0.tgz"
   integrity sha512-+OQdjP49zViI/6i7nIJpA8rAl4sV/JdPfU9nZs3VqOwGIgizICvuN2ru6fMd+4llL0tar18UYJXfZ/TWtmhUjA==
@@ -2398,6 +2481,17 @@ core-util-is@~1.0.0:
   resolved "https://registry.npmjs.org/core-util-is/-/core-util-is-1.0.3.tgz"
   integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ==
 
+cosmiconfig@^6.0.0:
+  version "6.0.0"
+  resolved "https://registry.yarnpkg.com/cosmiconfig/-/cosmiconfig-6.0.0.tgz#da4fee853c52f6b1e6935f41c1a2fc50bd4a9982"
+  integrity sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==
+  dependencies:
+    "@types/parse-json" "^4.0.0"
+    import-fresh "^3.1.0"
+    parse-json "^5.0.0"
+    path-type "^4.0.0"
+    yaml "^1.7.2"
+
 cosmiconfig@^7.0.0:
   version "7.0.1"
   resolved "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.0.1.tgz"
@@ -2446,30 +2540,16 @@ crypto-random-string@^1.0.0:
   resolved "https://registry.npmjs.org/crypto-random-string/-/crypto-random-string-1.0.0.tgz"
   integrity sha1-ojD2T1aDEOFJgAmUB5DsmVRbyn4=
 
-css-color-keywords@^1.0.0:
-  version "1.0.0"
-  resolved "https://registry.npmjs.org/css-color-keywords/-/css-color-keywords-1.0.0.tgz"
-  integrity sha1-/qJhbcZ2spYmhrOvjb2+GAskTgU=
-
-css-to-react-native@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.npmjs.org/css-to-react-native/-/css-to-react-native-3.0.0.tgz"
-  integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ==
-  dependencies:
-    camelize "^1.0.0"
-    css-color-keywords "^1.0.0"
-    postcss-value-parser "^4.0.2"
-
-csstype@^3.0.11:
-  version "3.0.11"
-  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.11.tgz#d66700c5eacfac1940deb4e3ee5642792d85cd33"
-  integrity sha512-sa6P2wJ+CAbgyy4KFssIb/JNMLxFvKF1pCYCSXS8ZMuqZnMsrxqI2E5sPyoTpxoPU/gVZMzr2zjOfg8GIZOMsw==
-
 csstype@^3.0.2:
   version "3.0.8"
   resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.8.tgz"
   integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw==
 
+csstype@^3.1.0:
+  version "3.1.0"
+  resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.1.0.tgz#4ddcac3718d787cf9df0d1b7d15033925c8f29f2"
+  integrity sha512-uX1KG+x9h5hIJsaKR9xHUeUraxf8IODOwq9JLNPq6BwB04a/xgpq3rcx47l5BZu5zBPlgD342tdke3Hom/nJRA==
+
 damerau-levenshtein@^1.0.6:
   version "1.0.7"
   resolved "https://registry.npmjs.org/damerau-levenshtein/-/damerau-levenshtein-1.0.7.tgz"
@@ -2590,6 +2670,13 @@ dom-helpers@^5.0.1, dom-helpers@^5.2.0, dom-helpers@^5.2.1:
     "@babel/runtime" "^7.8.7"
     csstype "^3.0.2"
 
+duplexer2@^0.1.2:
+  version "0.1.4"
+  resolved "https://registry.yarnpkg.com/duplexer2/-/duplexer2-0.1.4.tgz#8b12dab878c0d69e3e7891051662a32fc6bddcc1"
+  integrity sha512-asLFVfWWtJ90ZyOUHMqk7/S2w2guQKxUI2itj3d92ADHhxUSbCMGi1f1cBcJ7xM1To+pE/Khbwo1yuNbMEPKeA==
+  dependencies:
+    readable-stream "^2.0.2"
+
 duplexer@^0.1.1:
   version "0.1.2"
   resolved "https://registry.npmjs.org/duplexer/-/duplexer-0.1.2.tgz"
@@ -3093,6 +3180,11 @@ finalhandler@~1.1.2:
     statuses "~1.5.0"
     unpipe "~1.0.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.0.0, find-up@^2.1.0:
   version "2.1.0"
   resolved "https://registry.npmjs.org/find-up/-/find-up-2.1.0.tgz"
@@ -3352,7 +3444,7 @@ heic-decode@^1.1.2:
   dependencies:
     libheif-js "^1.10.0"
 
-hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
+hoist-non-react-statics@^3.3.0, hoist-non-react-statics@^3.3.1, hoist-non-react-statics@^3.3.2:
   version "3.3.2"
   resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
   integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -3369,6 +3461,17 @@ hosted-git-info@^2.1.4:
   resolved "https://registry.npmjs.org/hosted-git-info/-/hosted-git-info-2.8.9.tgz"
   integrity sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==
 
+html-tokenize@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/html-tokenize/-/html-tokenize-2.0.1.tgz#c3b2ea6e2837d4f8c06693393e9d2a12c960be5f"
+  integrity sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==
+  dependencies:
+    buffer-from "~0.1.1"
+    inherits "~2.0.1"
+    minimist "~1.2.5"
+    readable-stream "~1.0.27-1"
+    through2 "~0.4.1"
+
 http-errors@1.7.2:
   version "1.7.2"
   resolved "https://registry.npmjs.org/http-errors/-/http-errors-1.7.2.tgz"
@@ -3461,7 +3564,7 @@ immediate@~3.0.5:
   resolved "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz"
   integrity sha1-nbHb0Pr43m++D13V5Wu2BigN5ps=
 
-import-fresh@^3.0.0, import-fresh@^3.2.1:
+import-fresh@^3.0.0, import-fresh@^3.1.0, import-fresh@^3.2.1:
   version "3.3.0"
   resolved "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.0.tgz"
   integrity sha512-veYYhQa+D1QBKznvhUHxb8faxlrwUnxseDAbAp457E0wLNio2bOSKnjYDhMj+YiAq61xrMGhQk9iXVk5FzgQMw==
@@ -3487,7 +3590,7 @@ inflight@^1.0.4:
     once "^1.3.0"
     wrappy "1"
 
-inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.3:
+inherits@2, inherits@2.0.4, inherits@^2.0.1, inherits@^2.0.3, inherits@^2.0.4, inherits@~2.0.1, inherits@~2.0.3:
   version "2.0.4"
   resolved "https://registry.npmjs.org/inherits/-/inherits-2.0.4.tgz"
   integrity sha512-k/vGaX4/Yla3WzyMCvTQOXYeIHvqOKtnqBduzTHpzpQZzAskKMhZ2K+EnBiSM9zGSoIFeMpXKxa4dYeZIQqewQ==
@@ -3550,6 +3653,13 @@ is-core-module@^2.2.0, is-core-module@^2.6.0:
   dependencies:
     has "^1.0.3"
 
+is-core-module@^2.8.1:
+  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"
+
 is-date-object@^1.0.1:
   version "1.0.5"
   resolved "https://registry.npmjs.org/is-date-object/-/is-date-object-1.0.5.tgz"
@@ -3703,6 +3813,11 @@ is-weakref@^1.0.1:
   dependencies:
     call-bind "^1.0.2"
 
+isarray@0.0.1:
+  version "0.0.1"
+  resolved "https://registry.yarnpkg.com/isarray/-/isarray-0.0.1.tgz#8a18acfca9a8f4177e09abfc6038939b05d1eedf"
+  integrity sha512-D2S+3GLxWH+uhrNEcoh/fnmYeP8E8/zHl644d/jdA0g2uyXvy3sb0qxotE+ne0LtccHknQzWwZEzhak7oJ0COQ==
+
 isarray@~1.0.0:
   version "1.0.0"
   resolved "https://registry.npmjs.org/isarray/-/isarray-1.0.0.tgz"
@@ -3972,7 +4087,7 @@ lodash.truncate@^4.4.2:
   resolved "https://registry.npmjs.org/lodash.truncate/-/lodash.truncate-4.4.2.tgz"
   integrity sha1-WjUNoLERO4N+z//VgSy+WNbq4ZM=
 
-lodash@^4.17.11, lodash@^4.17.15, lodash@^4.17.21:
+lodash@^4.17.15, lodash@^4.17.21:
   version "4.17.21"
   resolved "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz"
   integrity sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==
@@ -4097,7 +4212,7 @@ minimatch@^3.0.4:
   dependencies:
     brace-expansion "^1.1.7"
 
-minimist@^1.2.0, minimist@^1.2.5:
+minimist@^1.2.0, minimist@^1.2.5, minimist@~1.2.5:
   version "1.2.6"
   resolved "https://registry.yarnpkg.com/minimist/-/minimist-1.2.6.tgz#8637a5b759ea0d6e98702cfb3a9283323c93af44"
   integrity sha512-Jsjnk4bw3YJqYzbdyBiNsPWHPfO++UGG749Cxs6peCu5Xg4nrena6OVxOYxrQTqww0Jmwt+Ref8rggumkTLz9Q==
@@ -4124,6 +4239,14 @@ ms@2.1.2, ms@^2.1.1:
   resolved "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz"
   integrity sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==
 
+multipipe@^1.0.2:
+  version "1.0.2"
+  resolved "https://registry.yarnpkg.com/multipipe/-/multipipe-1.0.2.tgz#cc13efd833c9cda99f224f868461b8e1a3fd939d"
+  integrity sha512-6uiC9OvY71vzSGX8lZvSqscE7ft9nPupJ8fMjrCNRAUy2LREUW42UL+V/NTrogr6rFgRydUrCX4ZitfpSNkSCQ==
+  dependencies:
+    duplexer2 "^0.1.2"
+    object-assign "^4.1.0"
+
 nanoid@^3.1.30:
   version "3.3.1"
   resolved "https://registry.npmjs.org/nanoid/-/nanoid-3.3.1.tgz"
@@ -4239,6 +4362,11 @@ object-keys@^1.0.12, object-keys@^1.1.1:
   resolved "https://registry.npmjs.org/object-keys/-/object-keys-1.1.1.tgz"
   integrity sha512-NuAESUOUMrlIXOfHKzD6bpPu3tYt3xvjNdRIQ+FeT0lNb4K8WR70CaDxhuNguS2XG+GjkyMwOzsN5ZktImfhLA==
 
+object-keys@~0.4.0:
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/object-keys/-/object-keys-0.4.0.tgz#28a6aae7428dd2c3a92f3d95f21335dd204e0336"
+  integrity sha512-ncrLw+X55z7bkl5PnUvHwFK9FcGuFYo9gtjws2XtSzL+aZ8tm830P60WJ0dSmFVaSalWieW5MD7kEdnXda9yJw==
+
 object.assign@^4.1.0, object.assign@^4.1.2:
   version "4.1.2"
   resolved "https://registry.npmjs.org/object.assign/-/object.assign-4.1.2.tgz"
@@ -4401,7 +4529,7 @@ path-key@^3.0.0, path-key@^3.1.0:
   resolved "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz"
   integrity sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==
 
-path-parse@^1.0.6:
+path-parse@^1.0.6, path-parse@^1.0.7:
   version "1.0.7"
   resolved "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz"
   integrity sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==
@@ -4515,11 +4643,6 @@ pngjs@^3.4.0:
   resolved "https://registry.npmjs.org/pngjs/-/pngjs-3.4.0.tgz"
   integrity sha512-NCrCHhWmnQklfH4MtJMRjZ2a8c80qXeMlQMv2uVp9ISJMTt562SbGd6n2oq0PaPgKm7Z6pL9E2UlLIhC+SHL3w==
 
-postcss-value-parser@^4.0.2:
-  version "4.1.0"
-  resolved "https://registry.npmjs.org/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz"
-  integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ==
-
 postcss@8.4.5:
   version "8.4.5"
   resolved "https://registry.npmjs.org/postcss/-/postcss-8.4.5.tgz"
@@ -4571,6 +4694,15 @@ prop-types@^15.5.8, prop-types@^15.6.0, prop-types@^15.6.2, prop-types@^15.7.2:
     object-assign "^4.1.1"
     react-is "^16.8.1"
 
+prop-types@^15.8.1:
+  version "15.8.1"
+  resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
+  integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
+  dependencies:
+    loose-envify "^1.4.0"
+    object-assign "^4.1.1"
+    react-is "^16.13.1"
+
 property-expr@^2.0.2:
   version "2.0.4"
   resolved "https://registry.npmjs.org/property-expr/-/property-expr-2.0.4.tgz"
@@ -4701,7 +4833,7 @@ react-input-autosize@^3.0.0:
   dependencies:
     prop-types "^15.5.8"
 
-react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1:
+react-is@^16.13.1, react-is@^16.3.2, react-is@^16.7.0, react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
@@ -4819,7 +4951,7 @@ read-pkg@^3.0.0:
     normalize-package-data "^2.3.2"
     path-type "^3.0.0"
 
-readable-stream@^2.0.6, readable-stream@~2.3.6:
+readable-stream@^2.0.2, readable-stream@^2.0.6, readable-stream@~2.3.6:
   version "2.3.7"
   resolved "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz"
   integrity sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==
@@ -4841,6 +4973,16 @@ readable-stream@^3.6.0:
     string_decoder "^1.1.1"
     util-deprecate "^1.0.1"
 
+readable-stream@~1.0.17, readable-stream@~1.0.27-1:
+  version "1.0.34"
+  resolved "https://registry.yarnpkg.com/readable-stream/-/readable-stream-1.0.34.tgz#125820e34bc842d2f2aaafafe4c2916ee32c157c"
+  integrity sha512-ok1qVCJuRkNmvebYikljxJA/UEsKwLl2nI1OmaqAu4/UE+h0wKCHok4XkL/gvi39OacXvw59RJUOFUkDib2rHg==
+  dependencies:
+    core-util-is "~1.0.0"
+    inherits "~2.0.1"
+    isarray "0.0.1"
+    string_decoder "~0.10.x"
+
 readable-web-to-node-stream@^3.0.0:
   version "3.0.2"
   resolved "https://registry.npmjs.org/readable-web-to-node-stream/-/readable-web-to-node-stream-3.0.2.tgz"
@@ -4937,6 +5079,15 @@ resolve@^1.10.0, resolve@^1.14.2, resolve@^1.20.0:
     is-core-module "^2.2.0"
     path-parse "^1.0.6"
 
+resolve@^1.12.0:
+  version "1.22.0"
+  resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.22.0.tgz#5e0b8c67c15df57a89bdbabe603a002f21731198"
+  integrity sha512-Hhtrw0nLeSrFQ7phPp4OOcVjLPIeMnRlr5mcnVuMe7M/7eBn98A3hmFRLoFo3DLZkivSYwhRUJTyPyWAk56WLw==
+  dependencies:
+    is-core-module "^2.8.1"
+    path-parse "^1.0.7"
+    supports-preserve-symlinks-flag "^1.0.0"
+
 resolve@^2.0.0-next.3:
   version "2.0.0-next.3"
   resolved "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.3.tgz"
@@ -5148,11 +5299,6 @@ sha.js@^2.4.0, sha.js@^2.4.8:
     inherits "^2.0.1"
     safe-buffer "^5.0.1"
 
-shallowequal@^1.1.0:
-  version "1.1.0"
-  resolved "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz"
-  integrity sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==
-
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz"
@@ -5225,7 +5371,7 @@ source-map-url@^0.4.0:
   resolved "https://registry.npmjs.org/source-map-url/-/source-map-url-0.4.1.tgz"
   integrity sha512-cPiFOTLUKvJFIg4SKVScy4ilPPW6rFgMgfuZJPNoDuMs3nC1HbMUycBoJw77xFIp6z1UJQJOfx6C9GMH80DiTw==
 
-source-map@^0.5.0:
+source-map@^0.5.0, source-map@^0.5.7:
   version "0.5.7"
   resolved "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz"
   integrity sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=
@@ -5349,6 +5495,11 @@ string_decoder@^1.1.1:
   dependencies:
     safe-buffer "~5.2.0"
 
+string_decoder@~0.10.x:
+  version "0.10.31"
+  resolved "https://registry.yarnpkg.com/string_decoder/-/string_decoder-0.10.31.tgz#62e203bc41766c6c28c9fc84301dab1c5310fa94"
+  integrity sha512-ev2QzSzWPYmy9GuqfIVildA4OdcGLeFZQrq5ys6RtiuF+RQQiZWr8TZNyAcuVXyQRYfEO+MsoB/1BuQVhOJuoQ==
+
 string_decoder@~1.1.1:
   version "1.1.1"
   resolved "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz"
@@ -5417,33 +5568,22 @@ strtok3@^6.2.4:
     "@tokenizer/token" "^0.3.0"
     peek-readable "^4.0.1"
 
-styled-components@^5.3.5:
-  version "5.3.5"
-  resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.3.5.tgz#a750a398d01f1ca73af16a241dec3da6deae5ec4"
-  integrity sha512-ndETJ9RKaaL6q41B69WudeqLzOpY1A/ET/glXkNZ2T7dPjPqpPCXXQjDFYZWwNnE5co0wX+gTCqx9mfxTmSIPg==
-  dependencies:
-    "@babel/helper-module-imports" "^7.0.0"
-    "@babel/traverse" "^7.4.5"
-    "@emotion/is-prop-valid" "^1.1.0"
-    "@emotion/stylis" "^0.8.4"
-    "@emotion/unitless" "^0.7.4"
-    babel-plugin-styled-components ">= 1.12.0"
-    css-to-react-native "^3.0.0"
-    hoist-non-react-statics "^3.0.0"
-    shallowequal "^1.1.0"
-    supports-color "^5.5.0"
-
 styled-jsx@5.0.0:
   version "5.0.0"
   resolved "https://registry.npmjs.org/styled-jsx/-/styled-jsx-5.0.0.tgz"
   integrity sha512-qUqsWoBquEdERe10EW8vLp3jT25s/ssG1/qX5gZ4wu15OZpmSMFI2v+fWlRhLfykA5rFtlJ1ME8A8pm/peV4WA==
 
+stylis@4.0.13:
+  version "4.0.13"
+  resolved "https://registry.yarnpkg.com/stylis/-/stylis-4.0.13.tgz#f5db332e376d13cc84ecfe5dace9a2a51d954c91"
+  integrity sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag==
+
 stylis@^4.0.3:
   version "4.0.10"
   resolved "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz"
   integrity sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg==
 
-supports-color@^5.3.0, supports-color@^5.5.0:
+supports-color@^5.3.0:
   version "5.5.0"
   resolved "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz"
   integrity sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==
@@ -5464,6 +5604,11 @@ supports-color@^7.1.0:
   dependencies:
     has-flag "^4.0.0"
 
+supports-preserve-symlinks-flag@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz#6eda4bd344a3c94aea376d4cc31bc77311039e09"
+  integrity sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==
+
 synchronous-promise@^2.0.13:
   version "2.0.15"
   resolved "https://registry.npmjs.org/synchronous-promise/-/synchronous-promise-2.0.15.tgz"
@@ -5514,6 +5659,14 @@ text-table@^0.2.0:
   resolved "https://registry.npmjs.org/text-table/-/text-table-0.2.0.tgz"
   integrity sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=
 
+through2@~0.4.1:
+  version "0.4.2"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-0.4.2.tgz#dbf5866031151ec8352bb6c4db64a2292a840b9b"
+  integrity sha512-45Llu+EwHKtAZYTPPVn3XZHBgakWMN3rokhEv5hu596XP+cNgplMg+Gj+1nmAvj+L0K7+N49zBKx5rah5u0QIQ==
+  dependencies:
+    readable-stream "~1.0.17"
+    xtend "~2.1.1"
+
 through@^2.3.8:
   version "2.3.8"
   resolved "https://registry.npmjs.org/through/-/through-2.3.8.tgz"
@@ -6063,12 +6216,19 @@ xml-js@^1.6.11:
   dependencies:
     sax "^1.2.4"
 
+xtend@~2.1.1:
+  version "2.1.2"
+  resolved "https://registry.yarnpkg.com/xtend/-/xtend-2.1.2.tgz#6efecc2a4dad8e6962c4901b337ce7ba87b5d28b"
+  integrity sha512-vMNKzr2rHP9Dp/e1NQFnLQlwlhp9L/LfvnsVdHxN1f+uggyVI3i08uD14GPvCToPkdsRfyPqIyYGmIk58V98ZQ==
+  dependencies:
+    object-keys "~0.4.0"
+
 yallist@^4.0.0:
   version "4.0.0"
   resolved "https://registry.npmjs.org/yallist/-/yallist-4.0.0.tgz"
   integrity sha512-3wdGidZyq5PB084XLES5TpOSRA3wjXAlIWMhum2kRcv/41Sn2emQ0dycQW4uZXLejwKvg6EsvbdlVL+FYEct7A==
 
-yaml@^1.10.0:
+yaml@^1.10.0, yaml@^1.7.2:
   version "1.10.2"
   resolved "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz"
   integrity sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==