diff --git a/.vscode/settings.json b/.vscode/settings.json
index 6ab3a54..0e0b17f 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -3,5 +3,8 @@
     "source.fixAll.eslint": true
   },
   "editor.formatOnSave": true,
-  "editor.defaultFormatter": "esbenp.prettier-vscode"
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "[javascriptreact]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
 }
diff --git a/components/Footer.js b/components/Footer.js
index 81dbfa7..c099be2 100644
--- a/components/Footer.js
+++ b/components/Footer.js
@@ -1,7 +1,140 @@
-import FacebookIcon from '@material-ui/icons/Facebook'
-import InstagramIcon from '@material-ui/icons/Instagram'
-import LinkedInIcon from '@material-ui/icons/LinkedIn'
-import RedditIcon from '@material-ui/icons/Reddit'
-import TwitterIcon from '@material-ui/icons/Twitter'
+import * as React from 'react'
+import AppBar from '@mui/material/AppBar'
+import Box from '@mui/material/Box'
+import Toolbar from '@mui/material/Toolbar'
+import Typography from '@mui/material/Typography'
+import Button from '@mui/material/Button'
 import Link from 'next/link'
-import Button from 'react-bootstrap/Button'
+import YouTubeIcon from '@mui/icons-material/YouTube'
+import InstagramIcon from '@mui/icons-material/Instagram'
+import TwitterIcon from '@mui/icons-material/Twitter'
+import NotificationsIcon from '@mui/icons-material/Notifications'
+import FacebookIcon from '@mui/icons-material/Facebook'
+import LinkedInIcon from '@mui/icons-material/LinkedIn'
+import useCheckMobileScreen from '../utils/useCheckMobileScreen'
+import { makeStyles } from '@mui/styles'
+
+const useStyles = makeStyles({
+  footer_mobile: {
+    backgroundColor: '#080d26',
+    padding: '20px',
+  },
+  typo: {
+    color: 'white',
+    marginRight: '32px',
+    '&:hover': {
+      textDecoration: 'none',
+      color: 'white',
+      cursor: 'pointer',
+    },
+  },
+  div: {
+    flexGrow: 1,
+  },
+  icon: {
+    marginRight: '4px',
+    color: 'white',
+    '&:hover': {
+      cursor: 'pointer',
+      color: 'white',
+    },
+  },
+  iconContainer: {
+    marginRight: '32px',
+  },
+  footer: {
+    backgroundColor: '#080d26',
+  },
+})
+
+export default function Footer() {
+  const classes = useStyles()
+  const isMobile = useCheckMobileScreen()
+
+  const iconContainer = (
+    <div className={classes.iconContainer}>
+      <a href="https://www.facebook.com/OrcasoundApp/" className={classes.icon}>
+        <FacebookIcon fontSize="large" />
+      </a>
+      <a
+        href="https://www.linkedin.com/company/75491849/admin/"
+        className={classes.icon}
+      >
+        <LinkedInIcon fontSize="large" />
+      </a>
+      <a
+        href="https://www.youtube.com/channel/UC7b3tOVQg8_fzaZBj4NoAEg"
+        className={classes.icon}
+      >
+        <YouTubeIcon fontSize="large" />
+      </a>
+      <a href="https://twitter.com/OrcasoundApp" className={classes.icon}>
+        <TwitterIcon fontSize="large" />
+      </a>
+      <a
+        href="https://www.instagram.com/orcasoundapp/"
+        className={classes.icon}
+      >
+        <InstagramIcon fontSize="large" />
+      </a>
+    </div>
+  )
+
+  const sendFeedbackLink = (
+    <Link href="/">
+      <Typography variant="h6" component="a" className={classes.typo}>
+        Send Feedback
+      </Typography>
+    </Link>
+  )
+
+  const blogLink = (
+    <Link href="/">
+      <Typography variant="h6" component="a" className={classes.typo}>
+        Blog
+      </Typography>
+    </Link>
+  )
+
+  if (isMobile)
+    return (
+      <Box sx={{ flexGrow: 1 }}>
+        <AppBar position="static" className={classes.footer_mobile}>
+          <div>{sendFeedbackLink}</div>
+          <div>{blogLink}</div>
+          <div>
+            <Link href="/">
+              <Typography variant="h6" component="a" className={classes.typo}>
+                Donate
+              </Typography>
+            </Link>
+          </div>
+          {iconContainer}
+        </AppBar>
+      </Box>
+    )
+  return (
+    <Box sx={{ flexGrow: 1 }}>
+      <AppBar position="static" className={classes.footer}>
+        <Toolbar>
+          <div className={classes.div}></div>
+          {sendFeedbackLink}
+          {blogLink}
+          {iconContainer}
+          <Button
+            variant="contained"
+            sx={{
+              color: 'black',
+              backgroundColor: 'white',
+              borderRadius: '100px',
+              '&:hover': { color: 'black', backgroundColor: 'white' },
+            }}
+            startIcon={<NotificationsIcon sx={{ color: '#F79234' }} />}
+          >
+            Donate
+          </Button>
+        </Toolbar>
+      </AppBar>
+    </Box>
+  )
+}
diff --git a/components/Layout.js b/components/Layout.js
index e07c6dd..d348c99 100644
--- a/components/Layout.js
+++ b/components/Layout.js
@@ -2,6 +2,7 @@ import Navbar from 'react-bootstrap/Navbar'
 
 import styles from '../styles/Layout.module.css'
 import Nav from './Nav'
+import Footer from './Footer'
 
 const Layout = ({ children }) => {
   return (
@@ -11,6 +12,7 @@ const Layout = ({ children }) => {
       <div className={styles.container}>
         <main className={styles.main}>{children}</main>
       </div>
+      <Footer />
     </>
   )
 }
diff --git a/components/Nav.js b/components/Nav.js
index 666f538..f4eaf83 100644
--- a/components/Nav.js
+++ b/components/Nav.js
@@ -1,120 +1,176 @@
-import 'bootstrap/dist/css/bootstrap.min.css'
-
+import * as React from 'react'
+import AppBar from '@mui/material/AppBar'
+import Box from '@mui/material/Box'
+import Toolbar from '@mui/material/Toolbar'
+import IconButton from '@mui/material/IconButton'
+import Typography from '@mui/material/Typography'
+import Menu from '@mui/material/Menu'
+import MenuIcon from '@mui/icons-material/Menu'
+import Container from '@mui/material/Container'
+import Button from '@mui/material/Button'
+import MenuItem from '@mui/material/MenuItem'
+import { makeStyles } from '@mui/styles'
 import Image from 'next/image'
 import Link from 'next/link'
-import { useState } from 'react'
-import Button from 'react-bootstrap/Button'
-
 import orcasoundlogo from '../images/orcasoundlogo.png'
-import navStyles from '../styles/Nav.module.css'
+import NotificationsIcon from '@mui/icons-material/Notifications'
+
+const navLinks = [
+  {
+    name: 'About Us',
+    url: '/about',
+    icon: '',
+  },
+  {
+    name: 'Listen',
+    url: '/listen',
+    icon: '',
+  },
+  {
+    name: 'Learn',
+    url: '/learn',
+    icon: '',
+  },
+  {
+    name: 'Get Involved',
+    url: '/getinvolved',
+    icon: '',
+  },
+]
+
+const useStyles = makeStyles({
+  nav: {
+    backgroundColor: '#080d26',
+  },
+  navLogoUrl: {
+    width: '60px',
+    height: '44px',
+    top: '20px',
+    left: '15px',
+    borderRadius: '100px',
+    position: 'absolute',
+  },
+  logo: { flexGrow: 1 },
+  logoContainer: {
+    backgroundColor: 'white',
+    width: '69px',
+    height: '66px',
+    margin: '10px',
+    borderRadius: '100px',
+  },
+  link: {
+    color: 'white',
+    '&:hover': {
+      textDecoration: 'none',
+      color: 'white',
+    },
+  },
+})
+
+const Nav = () => {
+  const [anchorElNav, setAnchorElNav] = React.useState(null)
+  const classes = useStyles()
+
+  const handleOpenNavMenu = (event) => {
+    setAnchorElNav(event.currentTarget)
+  }
+
+  const handleCloseNavMenu = () => {
+    setAnchorElNav(null)
+  }
 
-export default function Nav({ children }) {
-  const [isOpen, setIsOpen] = useState(false)
-  const openMenu = () => setIsOpen(!isOpen)
   return (
-    <>
-      <header className={navStyles.header}>
-        <nav className={navStyles.navbar}>
-          <Link href="/">
-            <a className={navStyles.navlogo}>
-              <Image src={orcasoundlogo} width={90} height={70} />
-            </a>
-          </Link>
-          <ul
-            className={
-              isOpen === false
-                ? navStyles.navmenu
-                : navStyles.navmenu + ' ' + navStyles.active
-            }
-          >
-            <li className={navStyles.navitem}>
-              <Link href="/about">
-                <a
-                  className={
-                    isOpen === false
-                      ? navStyles.navlink
-                      : navStyles.navlink + ' ' + navStyles.active
-                  }
-                  onClick={openMenu}
-                >
-                  About
-                </a>
-              </Link>
-            </li>
-            <li className={navStyles.navitem}>
-              <Link href="/learn">
-                <a
-                  className={
-                    isOpen === false
-                      ? navStyles.navlink
-                      : navStyles.navlink + ' ' + navStyles.active
-                  }
-                  onClick={openMenu}
-                >
-                  learn
+    <AppBar position="static" className={classes.nav}>
+      <Container maxWidth="xl">
+        <Toolbar disableGutters>
+          <div className={classes.logo}>
+            <div className={classes.logoContainer}>
+              <Link href="/">
+                <a className={classes.navLogoUrl}>
+                  <Image src={orcasoundlogo} width={90} height={70} />
                 </a>
               </Link>
-            </li>
+            </div>
+          </div>
 
-            <li className={navStyles.navitem}>
-              <Link href="/getinvolved">
-                <a
-                  className={
-                    isOpen === false
-                      ? navStyles.navlink
-                      : navStyles.navlink + ' ' + navStyles.active
-                  }
-                  onClick={openMenu}
-                >
-                  get involved
-                </a>
-              </Link>
-            </li>
+          <Box sx={{ display: { xs: 'none', md: 'flex' }, flexGrow: 0.1 }}>
+            {navLinks.map((navLink) => (
+              <Button
+                key={navLink.name}
+                onClick={handleCloseNavMenu}
+                sx={{
+                  m: 2,
+                  color: 'white',
+                  display: 'block',
+                  textTransform: 'none',
+                }}
+              >
+                <Link href={navLink.url}>
+                  <Typography
+                    variant="h6"
+                    component="a"
+                    className={classes.link}
+                  >
+                    {navLink.name}
+                  </Typography>
+                </Link>
+              </Button>
+            ))}
+          </Box>
 
-            <li className={navStyles.navitem}>
-              <Link href="/https://live.orcasound.net/">
-                <a
-                  className={
-                    isOpen === false
-                      ? navStyles.navlink
-                      : navStyles.navlink + ' ' + navStyles.active
-                  }
-                  onClick={openMenu}
-                >
-                  Listen
-                </a>
-              </Link>
-            </li>
-            <li className={navStyles.navitem}>
-              <Link href="/">
-                <Button
-                  className={
-                    isOpen === false
-                      ? navStyles.navlink
-                      : navStyles.navlink + ' ' + navStyles.active
-                  }
-                  onClick={openMenu}
-                >
-                  {' '}
-                  Notify me{' '}
-                </Button>
-              </Link>
-            </li>
-          </ul>
-          <button
-            className={
-              isOpen === false
-                ? navStyles.hamburger
-                : navStyles.hamburger + ' ' + navStyles.active
-            }
-            onClick={openMenu}
+          <Box sx={{ display: { xs: 'flex', md: 'none' } }}>
+            <IconButton
+              size="large"
+              aria-label="account of current user"
+              aria-controls="menu-appbar"
+              aria-haspopup="true"
+              onClick={handleOpenNavMenu}
+              color="inherit"
+            >
+              <MenuIcon />
+            </IconButton>
+            <Menu
+              id="menu-appbar"
+              anchorEl={anchorElNav}
+              anchorOrigin={{
+                vertical: 'bottom',
+                horizontal: 'left',
+              }}
+              keepMounted
+              transformOrigin={{
+                vertical: 'top',
+                horizontal: 'left',
+              }}
+              open={Boolean(anchorElNav)}
+              onClose={handleCloseNavMenu}
+              sx={{
+                display: { xs: 'block', md: 'none' },
+              }}
+            >
+              {navLinks.map((navLink) => (
+                <MenuItem key={navLink.name} onClick={handleCloseNavMenu}>
+                  <Typography textAlign="center">{navLink.name}</Typography>
+                </MenuItem>
+              ))}
+            </Menu>
+          </Box>
+
+          <Button
+            variant="contained"
+            sx={{
+              color: 'black',
+              backgroundColor: 'white',
+              borderRadius: '100px',
+              '&:hover': { color: 'black', backgroundColor: 'white' },
+              display: { xs: 'none', md: 'flex' },
+            }}
+            startIcon={<NotificationsIcon sx={{ color: '#F79234' }} />}
           >
-            <span className={navStyles.bar}></span>
-            <span className={navStyles.bar}></span>
-            <span className={navStyles.bar}></span>
-          </button>
-        </nav>
-      </header>
-    </>
+            Notify Me
+          </Button>
+        </Toolbar>
+      </Container>
+    </AppBar>
   )
 }
+export default Nav
diff --git a/next b/next
new file mode 100644
index 0000000..e69de29
diff --git a/orcahome@0.1.0 b/orcahome@0.1.0
new file mode 100644
index 0000000..e69de29
diff --git a/package-lock.json b/package-lock.json
index 1e0da90..9d68676 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -13,28 +13,33 @@
       }
     },
     "@babel/helper-module-imports": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.14.5.tgz",
-      "integrity": "sha512-SwrNHu5QWS84XlHwGYPDtCxcA0hrSlL2yhWYLgeOc0w7ccOl2qv4s/nARI0aYZW+bSwAL5CukeXA47B/1NKcnQ==",
+      "version": "7.16.0",
+      "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.16.0.tgz",
+      "integrity": "sha512-kkH7sWzKPq0xt3H1n+ghb4xEMP8k0U7XV3kkB+ZGy69kDk2ySFW1qPi06sjKzFY3t1j6XbJSqr4mF9L7CYVyhg==",
       "requires": {
-        "@babel/types": "^7.14.5"
+        "@babel/types": "^7.16.0"
       },
       "dependencies": {
+        "@babel/helper-validator-identifier": {
+          "version": "7.15.7",
+          "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.15.7.tgz",
+          "integrity": "sha512-K4JvCtQqad9OY2+yTU8w+E82ywk/fe+ELNlt1G8z3bVGlZfn/hOcQQsUhGhW/N+tb3fxK800wLtKOE/aM0m72w=="
+        },
         "@babel/types": {
-          "version": "7.14.5",
-          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.14.5.tgz",
-          "integrity": "sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg==",
+          "version": "7.16.0",
+          "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.16.0.tgz",
+          "integrity": "sha512-PJgg/k3SdLsGb3hhisFvtLOw5ts113klrpLuIPtCJIU+BB24fqq6lf8RWqKJEjzqXR9AEH1rIb5XTqwBHB+kQg==",
           "requires": {
-            "@babel/helper-validator-identifier": "^7.14.5",
+            "@babel/helper-validator-identifier": "^7.15.7",
             "to-fast-properties": "^2.0.0"
           }
         }
       }
     },
     "@babel/helper-plugin-utils": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz",
-      "integrity": "sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ=="
+      "version": "7.16.5",
+      "resolved": "https://registry.npmjs.org/@babel/helper-plugin-utils/-/helper-plugin-utils-7.16.5.tgz",
+      "integrity": "sha512-59KHWHXxVA9K4HNF4sbHCf+eJeFe0Te/ZFGqBT4OjXhrwvA04sGfaEGsVTdsjoszq0YTP49RC9UKe5g8uN2RwQ=="
     },
     "@babel/helper-validator-identifier": {
       "version": "7.14.5",
@@ -52,11 +57,11 @@
       }
     },
     "@babel/plugin-syntax-jsx": {
-      "version": "7.14.5",
-      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz",
-      "integrity": "sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==",
+      "version": "7.16.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.16.5.tgz",
+      "integrity": "sha512-42OGssv9NPk4QHKVgIHlzeLgPOW5rGgfV5jzG90AhcXXIv6hu/eqj63w4VgvRxdvZY3AlYeDgPiSJ3BqAd1Y6Q==",
       "requires": {
-        "@babel/helper-plugin-utils": "^7.14.5"
+        "@babel/helper-plugin-utils": "^7.16.5"
       }
     },
     "@babel/runtime": {
@@ -88,9 +93,9 @@
       }
     },
     "@emotion/babel-plugin": {
-      "version": "11.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.3.0.tgz",
-      "integrity": "sha512-UZKwBV2rADuhRp+ZOGgNWg2eYgbzKzQXfQPtJbu/PLy8onurxlNCLvxMQEvlr1/GudguPI5IU9qIY1+2z1M5bA==",
+      "version": "11.7.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz",
+      "integrity": "sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==",
       "requires": {
         "@babel/helper-module-imports": "^7.12.13",
         "@babel/plugin-syntax-jsx": "^7.12.13",
@@ -103,13 +108,13 @@
         "escape-string-regexp": "^4.0.0",
         "find-root": "^1.1.0",
         "source-map": "^0.5.7",
-        "stylis": "^4.0.3"
+        "stylis": "4.0.13"
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+          "version": "7.16.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz",
+          "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==",
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
@@ -125,9 +130,9 @@
           "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
         },
         "stylis": {
-          "version": "4.0.10",
-          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
-          "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+          "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
         }
       }
     },
@@ -156,9 +161,9 @@
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
     "@emotion/is-prop-valid": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.0.tgz",
-      "integrity": "sha512-9RkilvXAufQHsSsjQ3PIzSns+pxuX4EW8EbGeSPjZMHuMx6z/MOzb9LpqNieQX4F3mre3NWS2+X3JNRHTQztUQ==",
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.1.tgz",
+      "integrity": "sha512-bW1Tos67CZkOURLc0OalnfxtSXQJMrAMV0jZTVGJUPSOd4qgjF3+tTD5CwJM13PHA8cltGW1WGbbvV9NpvUZPw==",
       "requires": {
         "@emotion/memoize": "^0.7.4"
       }
@@ -169,26 +174,48 @@
       "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
     },
     "@emotion/react": {
-      "version": "11.4.0",
-      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.0.tgz",
-      "integrity": "sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==",
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.7.1.tgz",
+      "integrity": "sha512-DV2Xe3yhkF1yT4uAUoJcYL1AmrnO5SVsdfvu+fBuS7IbByDeTVx9+wFmvx9Idzv7/78+9Mgx2Hcmr7Fex3tIyw==",
       "requires": {
         "@babel/runtime": "^7.13.10",
-        "@emotion/cache": "^11.4.0",
+        "@emotion/cache": "^11.7.1",
         "@emotion/serialize": "^1.0.2",
-        "@emotion/sheet": "^1.0.1",
+        "@emotion/sheet": "^1.1.0",
         "@emotion/utils": "^1.0.0",
         "@emotion/weak-memoize": "^0.2.5",
         "hoist-non-react-statics": "^3.3.1"
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+          "version": "7.16.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz",
+          "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==",
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
+        },
+        "@emotion/cache": {
+          "version": "11.7.1",
+          "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+          "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+          "requires": {
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/sheet": "^1.1.0",
+            "@emotion/utils": "^1.0.0",
+            "@emotion/weak-memoize": "^0.2.5",
+            "stylis": "4.0.13"
+          }
+        },
+        "@emotion/sheet": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+          "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+        },
+        "stylis": {
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+          "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
         }
       }
     },
@@ -204,27 +231,38 @@
         "csstype": "^3.0.2"
       }
     },
+    "@emotion/server": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/server/-/server-11.4.0.tgz",
+      "integrity": "sha512-IHovdWA3V0DokzxLtUNDx4+hQI82zUXqQFcVz/om2t44O0YSc+NHB+qifnyAOoQwt3SXcBTgaSntobwUI9gnfA==",
+      "requires": {
+        "@emotion/utils": "^1.0.0",
+        "html-tokenize": "^2.0.0",
+        "multipipe": "^1.0.2",
+        "through": "^2.3.8"
+      }
+    },
     "@emotion/sheet": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz",
       "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g=="
     },
     "@emotion/styled": {
-      "version": "11.3.0",
-      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.3.0.tgz",
-      "integrity": "sha512-fUoLcN3BfMiLlRhJ8CuPUMEyKkLEoM+n+UyAbnqGEsCd5IzKQ7VQFLtzpJOaCD2/VR2+1hXQTnSZXVJeiTNltA==",
+      "version": "11.6.0",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.6.0.tgz",
+      "integrity": "sha512-mxVtVyIOTmCAkFbwIp+nCjTXJNgcz4VWkOYQro87jE2QBTydnkiYusMrRGFtzuruiGK4dDaNORk4gH049iiQuw==",
       "requires": {
         "@babel/runtime": "^7.13.10",
         "@emotion/babel-plugin": "^11.3.0",
-        "@emotion/is-prop-valid": "^1.1.0",
+        "@emotion/is-prop-valid": "^1.1.1",
         "@emotion/serialize": "^1.0.2",
         "@emotion/utils": "^1.0.0"
       },
       "dependencies": {
         "@babel/runtime": {
-          "version": "7.14.6",
-          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.14.6.tgz",
-          "integrity": "sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==",
+          "version": "7.16.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz",
+          "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==",
           "requires": {
             "regenerator-runtime": "^0.13.4"
           }
@@ -356,6 +394,14 @@
         "react-transition-group": "^4.4.0"
       }
     },
+    "@material-ui/icons": {
+      "version": "4.11.2",
+      "resolved": "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz",
+      "integrity": "sha512-fQNsKX2TxBmqIGJCSi3tGTO/gZ+eJgWmMJkgDiOfyNaunNaxcklJQFaFogYcFl0qFuaEz1qaXYXboa/bUXVSOQ==",
+      "requires": {
+        "@babel/runtime": "^7.4.4"
+      }
+    },
     "@material-ui/private-theming": {
       "version": "5.0.0-beta.0",
       "resolved": "https://registry.npmjs.org/@material-ui/private-theming/-/private-theming-5.0.0-beta.0.tgz",
@@ -376,6 +422,51 @@
         "prop-types": "^15.7.2"
       }
     },
+    "@material-ui/styles": {
+      "version": "4.11.4",
+      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.4.tgz",
+      "integrity": "sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==",
+      "requires": {
+        "@babel/runtime": "^7.4.4",
+        "@emotion/hash": "^0.8.0",
+        "@material-ui/types": "5.1.0",
+        "@material-ui/utils": "^4.11.2",
+        "clsx": "^1.0.4",
+        "csstype": "^2.5.2",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.5.1",
+        "jss-plugin-camel-case": "^10.5.1",
+        "jss-plugin-default-unit": "^10.5.1",
+        "jss-plugin-global": "^10.5.1",
+        "jss-plugin-nested": "^10.5.1",
+        "jss-plugin-props-sort": "^10.5.1",
+        "jss-plugin-rule-value-function": "^10.5.1",
+        "jss-plugin-vendor-prefixer": "^10.5.1",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "@material-ui/types": {
+          "version": "5.1.0",
+          "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
+          "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A=="
+        },
+        "@material-ui/utils": {
+          "version": "4.11.2",
+          "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.2.tgz",
+          "integrity": "sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==",
+          "requires": {
+            "@babel/runtime": "^7.4.4",
+            "prop-types": "^15.7.2",
+            "react-is": "^16.8.0 || ^17.0.0"
+          }
+        },
+        "csstype": {
+          "version": "2.6.19",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.19.tgz",
+          "integrity": "sha512-ZVxXaNy28/k3kJg0Fou5MiYpp88j7H9hLZp8PDC3jV0WFjfH5E9xHb56L0W59cPbKbcHXeP4qyT8PrHp8t6LcQ=="
+        }
+      }
+    },
     "@material-ui/system": {
       "version": "5.0.0-beta.0",
       "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-5.0.0-beta.0.tgz",
@@ -420,6 +511,253 @@
         "react-is": "^17.0.0"
       }
     },
+    "@mui/base": {
+      "version": "5.0.0-alpha.62",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.62.tgz",
+      "integrity": "sha512-ItmdSZwHKQbLbAsS3sWguR7OHqYqh2cYWahoVmHb13Kc6bMdmVUTY4x57IlDSU712B0yuA0Q/gPTq7xADKnFow==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@emotion/is-prop-valid": "^1.1.1",
+        "@mui/utils": "^5.2.3",
+        "@popperjs/core": "^2.4.4",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz",
+          "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
+    "@mui/icons-material": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-5.2.1.tgz",
+      "integrity": "sha512-AFOn0bbaGd1dw8oYE40dv3I+QnfS5xP5HSUiUGsvb1ntP0cM1kW4VqQp7BtL7DbOpEsw1ZTbw67tDqSCH7utNg==",
+      "requires": {
+        "@babel/runtime": "^7.16.3"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.3",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
+          "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
+    "@mui/material": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.2.6.tgz",
+      "integrity": "sha512-yF2bRqyJMo6bYXT7TPA9IU/XLaXHi47Xvmj8duQa5ha3bCpFMXLfGoZcAUl6ZDjjGEz1nCFS+c1qx219xD/aeQ==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@mui/base": "5.0.0-alpha.62",
+        "@mui/system": "^5.2.6",
+        "@mui/types": "^7.1.0",
+        "@mui/utils": "^5.2.3",
+        "@types/react-transition-group": "^4.4.4",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.10",
+        "hoist-non-react-statics": "^3.3.2",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz",
+          "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "@types/react-transition-group": {
+          "version": "4.4.4",
+          "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.4.tgz",
+          "integrity": "sha512-7gAPz7anVK5xzbeQW9wFBDg7G++aPLAFY0QaSMOou9rJZpbuI58WAuJrgu+qR92l61grlnCUe7AFX8KGahAgug==",
+          "requires": {
+            "@types/react": "*"
+          }
+        },
+        "csstype": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+        }
+      }
+    },
+    "@mui/private-theming": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.2.3.tgz",
+      "integrity": "sha512-Lc1Cmu8lSsYZiXADi9PBb17Ho82ZbseHQujUFAcp6bCJ5x/d+87JYCIpCBMagPu/isRlFCwbziuXPmz7WOzJPQ==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@mui/utils": "^5.2.3",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.3",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
+          "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        }
+      }
+    },
+    "@mui/styled-engine": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.2.6.tgz",
+      "integrity": "sha512-bqAhli8eGS6v2qxivy2/4K0Ag8o//jsu1G2G6QcieFiT6y7oIF/nd/6Tvw6OSm3roOTifVQWNKwkt1yFWhGS+w==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@emotion/cache": "^11.7.1",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz",
+          "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "@emotion/cache": {
+          "version": "11.7.1",
+          "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+          "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+          "requires": {
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/sheet": "^1.1.0",
+            "@emotion/utils": "^1.0.0",
+            "@emotion/weak-memoize": "^0.2.5",
+            "stylis": "4.0.13"
+          }
+        },
+        "@emotion/sheet": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+          "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+        },
+        "stylis": {
+          "version": "4.0.13",
+          "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+          "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+        }
+      }
+    },
+    "@mui/styles": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@mui/styles/-/styles-5.2.3.tgz",
+      "integrity": "sha512-Art4qjlEI9H2h34mLL8s+CE9nWZWZbuJLbNpievaIM6DGuayz3DYkJHcH5mXJYFPhTNoe9IQYbpyKofjE0YVag==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@emotion/hash": "^0.8.0",
+        "@mui/private-theming": "^5.2.3",
+        "@mui/types": "^7.1.0",
+        "@mui/utils": "^5.2.3",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.10",
+        "hoist-non-react-statics": "^3.3.2",
+        "jss": "^10.8.2",
+        "jss-plugin-camel-case": "^10.8.2",
+        "jss-plugin-default-unit": "^10.8.2",
+        "jss-plugin-global": "^10.8.2",
+        "jss-plugin-nested": "^10.8.2",
+        "jss-plugin-props-sort": "^10.8.2",
+        "jss-plugin-rule-value-function": "^10.8.2",
+        "jss-plugin-vendor-prefixer": "^10.8.2",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz",
+          "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "csstype": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+        }
+      }
+    },
+    "@mui/system": {
+      "version": "5.2.6",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.2.6.tgz",
+      "integrity": "sha512-PZ7bmpWOLikWgqn2zWv9/Xa7lxnRBOmfjoMH7c/IVYJs78W3971brXJ3xV9MEWWQcoqiYQeXzUJaNf4rFbKCBA==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@mui/private-theming": "^5.2.3",
+        "@mui/styled-engine": "^5.2.6",
+        "@mui/types": "^7.1.0",
+        "@mui/utils": "^5.2.3",
+        "clsx": "^1.1.1",
+        "csstype": "^3.0.10",
+        "prop-types": "^15.7.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.5",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.5.tgz",
+          "integrity": "sha512-TXWihFIS3Pyv5hzR7j6ihmeLkZfrXGxAr5UfSl8CHf+6q/wpiYDkUau0czckpYG8QmnCIuPpdLtuA9VmuGGyMA==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "csstype": {
+          "version": "3.0.10",
+          "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.0.10.tgz",
+          "integrity": "sha512-2u44ZG2OcNUO9HDp/Jl8C07x6pU/eTR3ncV91SiK3dhG9TWvRVsCoJw14Ckx5DgWkzGA3waZWO3d7pgqpUI/XA=="
+        }
+      }
+    },
+    "@mui/types": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.0.tgz",
+      "integrity": "sha512-Hh7ALdq/GjfIwLvqH3XftuY3bcKhupktTm+S6qRIDGOtPtRuq2L21VWzOK4p7kblirK0XgGVH5BLwa6u8z/6QQ=="
+    },
+    "@mui/utils": {
+      "version": "5.2.3",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.2.3.tgz",
+      "integrity": "sha512-sQujlajIS0zQKcGIS6tZR0L1R+ib26B6UtuEn+cZqwKHsPo3feuS+SkdscYBdcCdMbrZs4gj8WIJHl2z6tbSzQ==",
+      "requires": {
+        "@babel/runtime": "^7.16.3",
+        "@types/prop-types": "^15.7.4",
+        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "prop-types": "^15.7.2",
+        "react-is": "^17.0.2"
+      },
+      "dependencies": {
+        "@babel/runtime": {
+          "version": "7.16.3",
+          "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.16.3.tgz",
+          "integrity": "sha512-WBwekcqacdY2e9AF/Q7WLFUWmdJGJTkbjqTjoMDgXkVZ3ZRUvOPsLb5KdwISoQVsbP+DQzVZW4Zhci0DvpbNTQ==",
+          "requires": {
+            "regenerator-runtime": "^0.13.4"
+          }
+        },
+        "@types/prop-types": {
+          "version": "15.7.4",
+          "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz",
+          "integrity": "sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ=="
+        }
+      }
+    },
     "@next/env": {
       "version": "11.0.1",
       "resolved": "https://registry.npmjs.org/@next/env/-/env-11.0.1.tgz",
@@ -1502,6 +1840,15 @@
         "randomfill": "^1.0.3"
       }
     },
+    "css-vendor": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
+      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
+      "requires": {
+        "@babel/runtime": "^7.8.3",
+        "is-in-browser": "^1.0.2"
+      }
+    },
     "css.escape": {
       "version": "1.5.1",
       "resolved": "https://registry.npmjs.org/css.escape/-/css.escape-1.5.1.tgz",
@@ -1629,6 +1976,43 @@
       "resolved": "https://registry.npmjs.org/domain-browser/-/domain-browser-4.19.0.tgz",
       "integrity": "sha512-fRA+BaAWOR/yr/t7T9E9GJztHPeFjj8U35ajyAjCDtAAnTn1Rc1f6W6VGPJrO1tkQv9zWu+JRof7z6oQtiYVFQ=="
     },
+    "duplexer2": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/duplexer2/-/duplexer2-0.1.4.tgz",
+      "integrity": "sha1-ixLauHjA1p4+eJEFFmKjL8a93ME=",
+      "requires": {
+        "readable-stream": "^2.0.2"
+      },
+      "dependencies": {
+        "readable-stream": {
+          "version": "2.3.7",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-2.3.7.tgz",
+          "integrity": "sha512-Ebho8K4jIbHAxnuxi7o42OrZgF/ZTNcsZj6nRKyUmkhLFq8CHItp/fy6hQZuZmP/n3yZ9VBUbp4zz/mX8hmYPw==",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.3",
+            "isarray": "~1.0.0",
+            "process-nextick-args": "~2.0.0",
+            "safe-buffer": "~5.1.1",
+            "string_decoder": "~1.1.1",
+            "util-deprecate": "~1.0.1"
+          }
+        },
+        "safe-buffer": {
+          "version": "5.1.2",
+          "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",
+          "integrity": "sha512-Gd2UZBJDkXlY7GbJxfsE8/nvKkUEU1G38c1siN6QP6a9PT9MmHB8GnpscSmMJSoF8LOIrt8ud/wPtojys4G6+g=="
+        },
+        "string_decoder": {
+          "version": "1.1.1",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-1.1.1.tgz",
+          "integrity": "sha512-n/ShnvDi6FHbbVfviro+WojiFzv+s8MPMHBczVePfUpDJLwoLT0ht1l4YwBCbi8pJAveEEdnkHyPyTP/mzRfwg==",
+          "requires": {
+            "safe-buffer": "~5.1.0"
+          }
+        }
+      }
+    },
     "electron-to-chromium": {
       "version": "1.3.802",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.802.tgz",
@@ -2673,6 +3057,46 @@
       "integrity": "sha512-mxIDAb9Lsm6DoOJ7xH+5+X4y1LU/4Hi50L9C5sIswK3JzULS4bwk1FvjdBgvYR4bzT4tuUQiC15FE2f5HbLvYw==",
       "dev": true
     },
+    "html-tokenize": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/html-tokenize/-/html-tokenize-2.0.1.tgz",
+      "integrity": "sha512-QY6S+hZ0f5m1WT8WffYN+Hg+xm/w5I8XeUcAq/ZYP5wVC8xbKi4Whhru3FtrAebD5EhBW8rmFzkDI6eCAuFe2w==",
+      "requires": {
+        "buffer-from": "~0.1.1",
+        "inherits": "~2.0.1",
+        "minimist": "~1.2.5",
+        "readable-stream": "~1.0.27-1",
+        "through2": "~0.4.1"
+      },
+      "dependencies": {
+        "buffer-from": {
+          "version": "0.1.2",
+          "resolved": "https://registry.npmjs.org/buffer-from/-/buffer-from-0.1.2.tgz",
+          "integrity": "sha512-RiWIenusJsmI2KcvqQABB83tLxCByE3upSP8QU3rJDMVFGPWLvPQJt/O1Su9moRWeH7d+Q2HYb68f6+v+tw2vg=="
+        },
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        }
+      }
+    },
     "http-errors": {
       "version": "1.7.3",
       "resolved": "https://registry.npmjs.org/http-errors/-/http-errors-1.7.3.tgz",
@@ -2690,6 +3114,11 @@
       "resolved": "https://registry.npmjs.org/https-browserify/-/https-browserify-1.0.0.tgz",
       "integrity": "sha1-7AbBDgo0wPL68Zn3/X/Hj//QPHM="
     },
+    "hyphenate-style-name": {
+      "version": "1.0.4",
+      "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz",
+      "integrity": "sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ=="
+    },
     "iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -2849,6 +3278,11 @@
         "is-extglob": "^2.1.1"
       }
     },
+    "is-in-browser": {
+      "version": "1.1.3",
+      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
+      "integrity": "sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU="
+    },
     "is-nan": {
       "version": "1.3.2",
       "resolved": "https://registry.npmjs.org/is-nan/-/is-nan-1.3.2.tgz",
@@ -2995,6 +3429,84 @@
         "minimist": "^1.2.0"
       }
     },
+    "jss": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.0.tgz",
+      "integrity": "sha512-YpzpreB6kUunQBbrlArlsMpXYyndt9JATbt95tajx0t4MTJJcCJdd4hdNpHmOIDiUJrF/oX5wtVFrS3uofWfGw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "csstype": "^3.0.2",
+        "is-in-browser": "^1.1.3",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-camel-case": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.0.tgz",
+      "integrity": "sha512-UH6uPpnDk413/r/2Olmw4+y54yEF2lRIV8XIZyuYpgPYTITLlPOsq6XB9qeqv+75SQSg3KLocq5jUBXW8qWWww==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "hyphenate-style-name": "^1.0.3",
+        "jss": "10.9.0"
+      }
+    },
+    "jss-plugin-default-unit": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.0.tgz",
+      "integrity": "sha512-7Ju4Q9wJ/MZPsxfu4T84mzdn7pLHWeqoGd/D8O3eDNNJ93Xc8PxnLmV8s8ZPNRYkLdxZqKtm1nPQ0BM4JRlq2w==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0"
+      }
+    },
+    "jss-plugin-global": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.0.tgz",
+      "integrity": "sha512-4G8PHNJ0x6nwAFsEzcuVDiBlyMsj2y3VjmFAx/uHk/R/gzJV+yRHICjT4MKGGu1cJq2hfowFWCyrr/Gg37FbgQ==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0"
+      }
+    },
+    "jss-plugin-nested": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.0.tgz",
+      "integrity": "sha512-2UJnDrfCZpMYcpPYR16oZB7VAC6b/1QLsRiAutOt7wJaaqwCBvNsosLEu/fUyKNQNGdvg2PPJFDO5AX7dwxtoA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-props-sort": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.0.tgz",
+      "integrity": "sha512-7A76HI8bzwqrsMOJTWKx/uD5v+U8piLnp5bvru7g/3ZEQOu1+PjHvv7bFdNO3DwNPC9oM0a//KwIJsIcDCjDzw==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0"
+      }
+    },
+    "jss-plugin-rule-value-function": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.0.tgz",
+      "integrity": "sha512-IHJv6YrEf8pRzkY207cPmdbBstBaE+z8pazhPShfz0tZSDtRdQua5jjg6NMz3IbTasVx9FdnmptxPqSWL5tyJg==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "jss": "10.9.0",
+        "tiny-warning": "^1.0.2"
+      }
+    },
+    "jss-plugin-vendor-prefixer": {
+      "version": "10.9.0",
+      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.0.tgz",
+      "integrity": "sha512-MbvsaXP7iiVdYVSEoi+blrW+AYnTDvHTW6I6zqi7JcwXdc6I9Kbm234nEblayhF38EftoenbM+5218pidmC5gA==",
+      "requires": {
+        "@babel/runtime": "^7.3.1",
+        "css-vendor": "^2.0.8",
+        "jss": "10.9.0"
+      }
+    },
     "jsx-ast-utils": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz",
@@ -3031,9 +3543,9 @@
       }
     },
     "lines-and-columns": {
-      "version": "1.1.6",
-      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.1.6.tgz",
-      "integrity": "sha1-HADHQ7QzzQpOgHWPe2SldEDZ/wA="
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
     "load-json-file": {
       "version": "4.0.0",
@@ -3215,6 +3727,15 @@
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.0.0.tgz",
       "integrity": "sha1-VgiurfwAvmwpAd9fmGF4jeDVl8g="
     },
+    "multipipe": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/multipipe/-/multipipe-1.0.2.tgz",
+      "integrity": "sha1-zBPv2DPJzamfIk+GhGG44aP9k50=",
+      "requires": {
+        "duplexer2": "^0.1.2",
+        "object-assign": "^4.1.0"
+      }
+    },
     "nanoid": {
       "version": "3.1.23",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.1.23.tgz",
@@ -4724,6 +5245,56 @@
       "integrity": "sha1-f17oI66AUgfACvLfSoTsP8+lcLQ=",
       "dev": true
     },
+    "through": {
+      "version": "2.3.8",
+      "resolved": "https://registry.npmjs.org/through/-/through-2.3.8.tgz",
+      "integrity": "sha1-DdTJ/6q8NXlgsbckEV1+Doai4fU="
+    },
+    "through2": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/through2/-/through2-0.4.2.tgz",
+      "integrity": "sha1-2/WGYDEVHsg1K7bE22SiKSqEC5s=",
+      "requires": {
+        "readable-stream": "~1.0.17",
+        "xtend": "~2.1.1"
+      },
+      "dependencies": {
+        "isarray": {
+          "version": "0.0.1",
+          "resolved": "https://registry.npmjs.org/isarray/-/isarray-0.0.1.tgz",
+          "integrity": "sha1-ihis/Kmo9Bd+Cav8YDiTmwXR7t8="
+        },
+        "object-keys": {
+          "version": "0.4.0",
+          "resolved": "https://registry.npmjs.org/object-keys/-/object-keys-0.4.0.tgz",
+          "integrity": "sha1-KKaq50KN0sOpLz2V8hM13SBOAzY="
+        },
+        "readable-stream": {
+          "version": "1.0.34",
+          "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-1.0.34.tgz",
+          "integrity": "sha1-Elgg40vIQtLyqq+v5MKRbuMsFXw=",
+          "requires": {
+            "core-util-is": "~1.0.0",
+            "inherits": "~2.0.1",
+            "isarray": "0.0.1",
+            "string_decoder": "~0.10.x"
+          }
+        },
+        "string_decoder": {
+          "version": "0.10.31",
+          "resolved": "https://registry.npmjs.org/string_decoder/-/string_decoder-0.10.31.tgz",
+          "integrity": "sha1-YuIDvEF2bGwoyfyEMB2rHFMQ+pQ="
+        },
+        "xtend": {
+          "version": "2.1.2",
+          "resolved": "https://registry.npmjs.org/xtend/-/xtend-2.1.2.tgz",
+          "integrity": "sha1-bv7MKk2tjmlixJAbM3znuoe10os=",
+          "requires": {
+            "object-keys": "~0.4.0"
+          }
+        }
+      }
+    },
     "timers-browserify": {
       "version": "2.0.12",
       "resolved": "https://registry.npmjs.org/timers-browserify/-/timers-browserify-2.0.12.tgz",
@@ -4732,6 +5303,11 @@
         "setimmediate": "^1.0.4"
       }
     },
+    "tiny-warning": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz",
+      "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA=="
+    },
     "to-arraybuffer": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/to-arraybuffer/-/to-arraybuffer-1.0.1.tgz",
diff --git a/package.json b/package.json
index ee92ea6..e855808 100644
--- a/package.json
+++ b/package.json
@@ -11,9 +11,15 @@
     "format": "prettier . --write"
   },
   "dependencies": {
-    "@emotion/react": "^11.4.0",
-    "@emotion/styled": "^11.3.0",
+    "@emotion/react": "^11.7.1",
+    "@emotion/server": "^11.4.0",
+    "@emotion/styled": "^11.6.0",
     "@material-ui/core": "^5.0.0-beta.0",
+    "@material-ui/icons": "^4.11.2",
+    "@material-ui/styles": "^4.11.4",
+    "@mui/icons-material": "^5.2.1",
+    "@mui/material": "^5.2.6",
+    "@mui/styles": "^5.2.3",
     "bootstrap": "^4.6.0",
     "next": "11.0.1",
     "react": "17.0.2",
diff --git a/pages/_app.js b/pages/_app.js
index 2b0567a..c8f5cf1 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,12 +1,40 @@
+import React from 'react'
 import '../styles/globals.css'
-
 import Layout from '../components/Layout'
+import Head from 'next/head'
+import { ThemeProvider } from '@mui/material/styles'
+import CssBaseline from '@mui/material/CssBaseline'
+import { CacheProvider } from '@emotion/react'
+import theme from '../src/theme'
+import createEmotionCache from '../src/createEmotionCache'
+
+// Client-side cache, shared for the whole session of the user in the browser.
+const clientSideEmotionCache = createEmotionCache()
+
+function MyApp(props) {
+  const { Component, emotionCache = clientSideEmotionCache, pageProps } = props
+
+  // React.useEffect(() => {
+  //   // Remove the server-side injected CSS.
+  //   const jssStyles = document.querySelector('#jss-server-side')
+  //   if (jssStyles) {
+  //     jssStyles.parentElement.removeChild(jssStyles)
+  //   }
+  // }, [])
 
-function MyApp({ Component, pageProps }) {
   return (
-    <Layout>
-      <Component {...pageProps} />
-    </Layout>
+    <CacheProvider value={emotionCache}>
+      <Head>
+        <meta name="viewport" content="initial-scale=1, width=device-width" />
+      </Head>
+      <ThemeProvider theme={theme}>
+        {/* CssBaseline kickstart an elegant, consistent, and simple baseline to build upon. */}
+        <CssBaseline />
+        <Layout>
+          <Component {...pageProps} />
+        </Layout>
+      </ThemeProvider>
+    </CacheProvider>
   )
 }
 
diff --git a/pages/_document.js b/pages/_document.js
new file mode 100644
index 0000000..f609d7f
--- /dev/null
+++ b/pages/_document.js
@@ -0,0 +1,88 @@
+import * as React from 'react'
+import Document, { Html, Head, Main, NextScript } from 'next/document'
+import createEmotionServer from '@emotion/server/create-instance'
+import theme from '../src/theme'
+import createEmotionCache from '../src/createEmotionCache'
+
+export default class MyDocument extends Document {
+  render() {
+    return (
+      <Html lang="en">
+        <Head>
+          {/* PWA primary color */}
+          <meta name="theme-color" content={theme.palette.primary.main} />
+          <link rel="shortcut icon" href="/static/favicon.ico" />
+          <link
+            rel="stylesheet"
+            href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700&display=swap"
+          />
+          {/* Inject MUI styles first to match with the prepend: true configuration. */}
+          {this.props.emotionStyleTags}
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    )
+  }
+}
+
+// `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) =>
+        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-org/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/createEmotionCache.js b/src/createEmotionCache.js
new file mode 100644
index 0000000..a907ea1
--- /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/theme.js b/src/theme.js
new file mode 100644
index 0000000..f9b08f7
--- /dev/null
+++ b/src/theme.js
@@ -0,0 +1,19 @@
+import { createTheme } from '@mui/material/styles'
+import { red } from '@mui/material/colors'
+
+// Create a theme instance.
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#556cd6',
+    },
+    secondary: {
+      main: '#19857b',
+    },
+    error: {
+      main: red.A400,
+    },
+  },
+})
+
+export default theme
diff --git a/utils/useCheckMobileScreen.js b/utils/useCheckMobileScreen.js
new file mode 100644
index 0000000..2d329dd
--- /dev/null
+++ b/utils/useCheckMobileScreen.js
@@ -0,0 +1,20 @@
+import React, { useEffect, useState } from 'react'
+
+const useCheckMobileScreen = () => {
+  const [width, setWidth] = useState(0)
+  const handleWindowSizeChange = () => {
+    setWidth(window.innerWidth)
+  }
+
+  useEffect(() => {
+    handleWindowSizeChange()
+    window.addEventListener('resize', handleWindowSizeChange)
+    return () => {
+      window.removeEventListener('resize', handleWindowSizeChange)
+    }
+  }, [])
+
+  return width <= 700
+}
+
+export default useCheckMobileScreen