diff --git a/package-lock.json b/package-lock.json
index 3599fe5..f3fc379 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,8 +10,6 @@
       "dependencies": {
         "@emotion/react": "^11.10.4",
         "@emotion/styled": "^11.10.4",
-        "@material-ui/core": "^4.12.4",
-        "@material-ui/styles": "^4.11.5",
         "@mui/icons-material": "^5.10.3",
         "@mui/material": "^5.10.3",
         "@mui/styled-engine-sc": "^5.10.3",
@@ -3170,172 +3168,6 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
-    "node_modules/@material-ui/core": {
-      "version": "4.12.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz",
-      "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.5",
-        "@material-ui/system": "^4.12.2",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "@types/react-transition-group": "^4.2.0",
-        "clsx": "^1.0.4",
-        "hoist-non-react-statics": "^3.3.2",
-        "popper.js": "1.16.1-lts",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0",
-        "react-transition-group": "^4.4.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/core/node_modules/@material-ui/system": {
-      "version": "4.12.2",
-      "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
-      "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/utils": "^4.11.3",
-        "csstype": "^2.5.2",
-        "prop-types": "^15.7.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/core/node_modules/@material-ui/utils": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
-      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      }
-    },
-    "node_modules/@material-ui/core/node_modules/csstype": {
-      "version": "2.6.20",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
-    },
-    "node_modules/@material-ui/styles": {
-      "version": "4.11.5",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
-      "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "clsx": "^1.0.4",
-        "csstype": "^2.5.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.5.1",
-        "jss-plugin-camel-case": "^10.5.1",
-        "jss-plugin-default-unit": "^10.5.1",
-        "jss-plugin-global": "^10.5.1",
-        "jss-plugin-nested": "^10.5.1",
-        "jss-plugin-props-sort": "^10.5.1",
-        "jss-plugin-rule-value-function": "^10.5.1",
-        "jss-plugin-vendor-prefixer": "^10.5.1",
-        "prop-types": "^15.7.2"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/material-ui"
-      },
-      "peerDependencies": {
-        "@types/react": "^16.8.6 || ^17.0.0",
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
-    "node_modules/@material-ui/styles/node_modules/@emotion/hash": {
-      "version": "0.8.0",
-      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
-    },
-    "node_modules/@material-ui/styles/node_modules/@material-ui/utils": {
-      "version": "4.11.3",
-      "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
-      "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
-      "dependencies": {
-        "@babel/runtime": "^7.4.4",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0"
-      },
-      "engines": {
-        "node": ">=8.0.0"
-      },
-      "peerDependencies": {
-        "react": "^16.8.0 || ^17.0.0",
-        "react-dom": "^16.8.0 || ^17.0.0"
-      }
-    },
-    "node_modules/@material-ui/styles/node_modules/csstype": {
-      "version": "2.6.20",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-      "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
-    },
-    "node_modules/@material-ui/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
-      "peerDependencies": {
-        "@types/react": "*"
-      },
-      "peerDependenciesMeta": {
-        "@types/react": {
-          "optional": true
-        }
-      }
-    },
     "node_modules/@mui/base": {
       "version": "5.0.0-alpha.95",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.95.tgz",
@@ -6602,15 +6434,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/css-vendor": {
-      "version": "2.0.8",
-      "resolved": "https://registry.npmjs.org/css-vendor/-/css-vendor-2.0.8.tgz",
-      "integrity": "sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==",
-      "dependencies": {
-        "@babel/runtime": "^7.8.3",
-        "is-in-browser": "^1.0.2"
-      }
-    },
     "node_modules/css-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -9226,11 +9049,6 @@
         "node": ">=10.17.0"
       }
     },
-    "node_modules/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=="
-    },
     "node_modules/iconv-lite": {
       "version": "0.6.3",
       "resolved": "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.6.3.tgz",
@@ -9510,11 +9328,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/is-in-browser": {
-      "version": "1.1.3",
-      "resolved": "https://registry.npmjs.org/is-in-browser/-/is-in-browser-1.1.3.tgz",
-      "integrity": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
-    },
     "node_modules/is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -11872,88 +11685,6 @@
         "node": ">=0.10.0"
       }
     },
-    "node_modules/jss": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.2.tgz",
-      "integrity": "sha512-b8G6rWpYLR4teTUbGd4I4EsnWjg7MN0Q5bSsjKhVkJVjhQDy2KzkbD2AW3TuT0RYZVmZZHKIrXDn6kjU14qkUg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "csstype": "^3.0.2",
-        "is-in-browser": "^1.1.3",
-        "tiny-warning": "^1.0.2"
-      },
-      "funding": {
-        "type": "opencollective",
-        "url": "https://opencollective.com/jss"
-      }
-    },
-    "node_modules/jss-plugin-camel-case": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.2.tgz",
-      "integrity": "sha512-wgBPlL3WS0WDJ1lPJcgjux/SHnDuu7opmgQKSraKs4z8dCCyYMx9IDPFKBXQ8Q5dVYij1FFV0WdxyhuOOAXuTg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.9.2"
-      }
-    },
-    "node_modules/jss-plugin-default-unit": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.2.tgz",
-      "integrity": "sha512-pYg0QX3bBEFtTnmeSI3l7ad1vtHU42YEEpgW7pmIh+9pkWNWb5dwS/4onSfAaI0kq+dOZHzz4dWe+8vWnanoSg==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2"
-      }
-    },
-    "node_modules/jss-plugin-global": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.2.tgz",
-      "integrity": "sha512-GcX0aE8Ef6AtlasVrafg1DItlL/tWHoC4cGir4r3gegbWwF5ZOBYhx04gurPvWHC8F873aEGqge7C17xpwmp2g==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2"
-      }
-    },
-    "node_modules/jss-plugin-nested": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.2.tgz",
-      "integrity": "sha512-VgiOWIC6bvgDaAL97XCxGD0BxOKM0K0zeB/ECyNaVF6FqvdGB9KBBWRdy2STYAss4VVA7i5TbxFZN+WSX1kfQA==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-props-sort": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.2.tgz",
-      "integrity": "sha512-AP1AyUTbi2szylgr+O0OB7gkIxEGzySLITZ2GpsaoX72YMCGI2jYAc+WUhPfvUnZYiauF4zTnN4V4TGuvFjJlw==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2"
-      }
-    },
-    "node_modules/jss-plugin-rule-value-function": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.2.tgz",
-      "integrity": "sha512-vf5ms8zvLFMub6swbNxvzsurHfUZ5Shy5aJB2gIpY6WNA3uLinEcxYyraQXItRHi5ivXGqYciFDRM2ZoVoRZ4Q==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "node_modules/jss-plugin-vendor-prefixer": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.2.tgz",
-      "integrity": "sha512-SxcEoH+Rttf9fEv6KkiPzLdXRmI6waOTcMkbbEFgdZLDYNIP9UKNHFy6thhbRKqv0XMQZdrEsbDyV464zE/dUA==",
-      "dependencies": {
-        "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.8",
-        "jss": "10.9.2"
-      }
-    },
     "node_modules/jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -13024,11 +12755,6 @@
         "node": ">=4"
       }
     },
-    "node_modules/popper.js": {
-      "version": "1.16.1-lts",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
-      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
-    },
     "node_modules/postcss": {
       "version": "8.4.16",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
@@ -16162,11 +15888,6 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
-    "node_modules/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=="
-    },
     "node_modules/tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
@@ -19598,104 +19319,6 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
-    "@material-ui/core": {
-      "version": "4.12.4",
-      "resolved": "https://registry.npmjs.org/@material-ui/core/-/core-4.12.4.tgz",
-      "integrity": "sha512-tr7xekNlM9LjA6pagJmL8QCgZXaubWUwkJnoYcMKd4gw/t4XiyvnTkjdGrUVicyB2BsdaAv1tvow45bPM4sSwQ==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@material-ui/styles": "^4.11.5",
-        "@material-ui/system": "^4.12.2",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "@types/react-transition-group": "^4.2.0",
-        "clsx": "^1.0.4",
-        "hoist-non-react-statics": "^3.3.2",
-        "popper.js": "1.16.1-lts",
-        "prop-types": "^15.7.2",
-        "react-is": "^16.8.0 || ^17.0.0",
-        "react-transition-group": "^4.4.0"
-      },
-      "dependencies": {
-        "@material-ui/system": {
-          "version": "4.12.2",
-          "resolved": "https://registry.npmjs.org/@material-ui/system/-/system-4.12.2.tgz",
-          "integrity": "sha512-6CSKu2MtmiJgcCGf6nBQpM8fLkuB9F55EKfbdTC80NND5wpTmKzwdhLYLH3zL4cLlK0gVaaltW7/wMuyTnN0Lw==",
-          "requires": {
-            "@babel/runtime": "^7.4.4",
-            "@material-ui/utils": "^4.11.3",
-            "csstype": "^2.5.2",
-            "prop-types": "^15.7.2"
-          }
-        },
-        "@material-ui/utils": {
-          "version": "4.11.3",
-          "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
-          "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
-          "requires": {
-            "@babel/runtime": "^7.4.4",
-            "prop-types": "^15.7.2",
-            "react-is": "^16.8.0 || ^17.0.0"
-          }
-        },
-        "csstype": {
-          "version": "2.6.20",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-          "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
-        }
-      }
-    },
-    "@material-ui/styles": {
-      "version": "4.11.5",
-      "resolved": "https://registry.npmjs.org/@material-ui/styles/-/styles-4.11.5.tgz",
-      "integrity": "sha512-o/41ot5JJiUsIETME9wVLAJrmIWL3j0R0Bj2kCOLbSfqEkKf0fmaPt+5vtblUh5eXr2S+J/8J3DaCb10+CzPGA==",
-      "requires": {
-        "@babel/runtime": "^7.4.4",
-        "@emotion/hash": "^0.8.0",
-        "@material-ui/types": "5.1.0",
-        "@material-ui/utils": "^4.11.3",
-        "clsx": "^1.0.4",
-        "csstype": "^2.5.2",
-        "hoist-non-react-statics": "^3.3.2",
-        "jss": "^10.5.1",
-        "jss-plugin-camel-case": "^10.5.1",
-        "jss-plugin-default-unit": "^10.5.1",
-        "jss-plugin-global": "^10.5.1",
-        "jss-plugin-nested": "^10.5.1",
-        "jss-plugin-props-sort": "^10.5.1",
-        "jss-plugin-rule-value-function": "^10.5.1",
-        "jss-plugin-vendor-prefixer": "^10.5.1",
-        "prop-types": "^15.7.2"
-      },
-      "dependencies": {
-        "@emotion/hash": {
-          "version": "0.8.0",
-          "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
-          "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
-        },
-        "@material-ui/utils": {
-          "version": "4.11.3",
-          "resolved": "https://registry.npmjs.org/@material-ui/utils/-/utils-4.11.3.tgz",
-          "integrity": "sha512-ZuQPV4rBK/V1j2dIkSSEcH5uT6AaHuKWFfotADHsC0wVL1NLd2WkFCm4ZZbX33iO4ydl6V0GPngKm8HZQ2oujg==",
-          "requires": {
-            "@babel/runtime": "^7.4.4",
-            "prop-types": "^15.7.2",
-            "react-is": "^16.8.0 || ^17.0.0"
-          }
-        },
-        "csstype": {
-          "version": "2.6.20",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.20.tgz",
-          "integrity": "sha512-/WwNkdXfckNgw6S5R125rrW8ez139lBHWouiBvX8dfMFtcn6V81REDqnH7+CRpRipfYlyU1CmOnOxrmGcFOjeA=="
-        }
-      }
-    },
-    "@material-ui/types": {
-      "version": "5.1.0",
-      "resolved": "https://registry.npmjs.org/@material-ui/types/-/types-5.1.0.tgz",
-      "integrity": "sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==",
-      "requires": {}
-    },
     "@mui/base": {
       "version": "5.0.0-alpha.95",
       "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.95.tgz",
@@ -22015,15 +21638,6 @@
         }
       }
     },
-    "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-what": {
       "version": "6.1.0",
       "resolved": "https://registry.npmjs.org/css-what/-/css-what-6.1.0.tgz",
@@ -23932,11 +23546,6 @@
       "resolved": "https://registry.npmjs.org/human-signals/-/human-signals-2.1.0.tgz",
       "integrity": "sha512-B4FFZ6q/T2jhhksgkbEW3HBvWIfDW85snkQgawt07S7J5QXTk6BkNV+0yAeZrM5QpMAdYlocGoljn0sJ/WQkFw=="
     },
-    "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",
@@ -24122,11 +23731,6 @@
         "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": "sha512-FeXIBgG/CPGd/WUxuEyvgGTEfwiG9Z4EKGxjNMRqviiIIfsmgrpnHLffEDdwUHqNva1VEW91o3xBT/m8Elgl9g=="
-    },
     "is-module": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz",
@@ -25838,84 +25442,6 @@
       "resolved": "https://registry.npmjs.org/jsonpointer/-/jsonpointer-5.0.1.tgz",
       "integrity": "sha512-p/nXbhSEcu3pZRdkW1OfJhpsVtW1gd4Wa1fnQc9YLiTfAjn0312eMKimbdIQzuZl9aa9xUGaRlP9T/CJE/ditQ=="
     },
-    "jss": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss/-/jss-10.9.2.tgz",
-      "integrity": "sha512-b8G6rWpYLR4teTUbGd4I4EsnWjg7MN0Q5bSsjKhVkJVjhQDy2KzkbD2AW3TuT0RYZVmZZHKIrXDn6kjU14qkUg==",
-      "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.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-camel-case/-/jss-plugin-camel-case-10.9.2.tgz",
-      "integrity": "sha512-wgBPlL3WS0WDJ1lPJcgjux/SHnDuu7opmgQKSraKs4z8dCCyYMx9IDPFKBXQ8Q5dVYij1FFV0WdxyhuOOAXuTg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "hyphenate-style-name": "^1.0.3",
-        "jss": "10.9.2"
-      }
-    },
-    "jss-plugin-default-unit": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-default-unit/-/jss-plugin-default-unit-10.9.2.tgz",
-      "integrity": "sha512-pYg0QX3bBEFtTnmeSI3l7ad1vtHU42YEEpgW7pmIh+9pkWNWb5dwS/4onSfAaI0kq+dOZHzz4dWe+8vWnanoSg==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2"
-      }
-    },
-    "jss-plugin-global": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-global/-/jss-plugin-global-10.9.2.tgz",
-      "integrity": "sha512-GcX0aE8Ef6AtlasVrafg1DItlL/tWHoC4cGir4r3gegbWwF5ZOBYhx04gurPvWHC8F873aEGqge7C17xpwmp2g==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2"
-      }
-    },
-    "jss-plugin-nested": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-nested/-/jss-plugin-nested-10.9.2.tgz",
-      "integrity": "sha512-VgiOWIC6bvgDaAL97XCxGD0BxOKM0K0zeB/ECyNaVF6FqvdGB9KBBWRdy2STYAss4VVA7i5TbxFZN+WSX1kfQA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-props-sort": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-props-sort/-/jss-plugin-props-sort-10.9.2.tgz",
-      "integrity": "sha512-AP1AyUTbi2szylgr+O0OB7gkIxEGzySLITZ2GpsaoX72YMCGI2jYAc+WUhPfvUnZYiauF4zTnN4V4TGuvFjJlw==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2"
-      }
-    },
-    "jss-plugin-rule-value-function": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.9.2.tgz",
-      "integrity": "sha512-vf5ms8zvLFMub6swbNxvzsurHfUZ5Shy5aJB2gIpY6WNA3uLinEcxYyraQXItRHi5ivXGqYciFDRM2ZoVoRZ4Q==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "jss": "10.9.2",
-        "tiny-warning": "^1.0.2"
-      }
-    },
-    "jss-plugin-vendor-prefixer": {
-      "version": "10.9.2",
-      "resolved": "https://registry.npmjs.org/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.9.2.tgz",
-      "integrity": "sha512-SxcEoH+Rttf9fEv6KkiPzLdXRmI6waOTcMkbbEFgdZLDYNIP9UKNHFy6thhbRKqv0XMQZdrEsbDyV464zE/dUA==",
-      "requires": {
-        "@babel/runtime": "^7.3.1",
-        "css-vendor": "^2.0.8",
-        "jss": "10.9.2"
-      }
-    },
     "jsx-ast-utils": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.3.tgz",
@@ -26691,11 +26217,6 @@
         }
       }
     },
-    "popper.js": {
-      "version": "1.16.1-lts",
-      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1-lts.tgz",
-      "integrity": "sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA=="
-    },
     "postcss": {
       "version": "8.4.16",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.16.tgz",
@@ -28808,11 +28329,6 @@
       "resolved": "https://registry.npmjs.org/thunky/-/thunky-1.1.0.tgz",
       "integrity": "sha512-eHY7nBftgThBqOyHGVN+l8gF0BucP09fMo0oO/Lb0w1OF80dJv+lDVpXG60WMQvkcxAkNybKsrEIE3ZtKGmPrA=="
     },
-    "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=="
-    },
     "tmpl": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/tmpl/-/tmpl-1.0.5.tgz",
diff --git a/package.json b/package.json
index 417e17f..ba6ccf6 100644
--- a/package.json
+++ b/package.json
@@ -5,8 +5,6 @@
   "dependencies": {
     "@emotion/react": "^11.10.4",
     "@emotion/styled": "^11.10.4",
-    "@material-ui/core": "^4.12.4",
-    "@material-ui/styles": "^4.11.5",
     "@mui/icons-material": "^5.10.3",
     "@mui/material": "^5.10.3",
     "@mui/styled-engine-sc": "^5.10.3",
diff --git a/src/Components/Authorization/index.tsx b/src/Components/Authorization/index.tsx
index b358b7e..3521f6d 100644
--- a/src/Components/Authorization/index.tsx
+++ b/src/Components/Authorization/index.tsx
@@ -1,5 +1,5 @@
 import * as React from "react";
-import { CssBaseline, Box, Typography, TextField } from "@mui/material";
+import { CssBaseline, Box, Typography, TextField, Checkbox, Button } from "@mui/material";
 import EmailOutlinedIcon from "@mui/icons-material/EmailOutlined";
 import LockOutlinedIcon from "@mui/icons-material/LockOutlined";
 import theme from "../../theme";
@@ -25,39 +25,44 @@ const Authorization: React.FC = () =>  {
           display: "flex",
           flexDirection: "column",
           justifyContent: "space-between",
-          alignItems: "center",
-          border: "1px dashed gray"
+          alignItems: "center"
         }}>
 
           <Box sx={{
-            display: "flex",
-            border: "1px dashed red"
+            display: "flex"
           }}>
-            <Typography variant="subtitle1">
+            <Typography 
+              variant="subtitle1" 
+              sx={{ 
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center"
+            }}>
               PENA
             </Typography>
-            <Typography variant="subtitle2">
+            <Typography 
+              variant = "subtitle2"
+              sx = {{
+                color: theme.palette.primary.main,
+                backgroundColor: theme.palette.info.dark,
+                borderRadius: "5px",
+                margin: theme.spacing(0.5)
+              }}
+            >
               HUB
             </Typography>
           </Box>
 
           <Box sx={{
-            width: "100%",
-            border: "1px solid purple",
-            display: "flex",
-            justifyContent: "right",
+            width: "100%"
           }}>
-            <Box sx={{
-              width: "340px",
-              border: "1px solid red"
-            }}>
               <Typography variant="h5">
                 Добро пожаловать
               </Typography>
               <Typography variant="h6">
                 Мы рады что вы выбрали нас!
               </Typography>
-            </Box>
           </Box>
 
           <Box sx={{
@@ -66,31 +71,35 @@ const Authorization: React.FC = () =>  {
             display: "flex",
             flexDirection: "column",
             justifyContent: "space-between",
-            alignItems: "center",
-            border: "1px solid purple",
+            alignItems: "center"
           }}>
             <Box sx={{
               display: "flex",
               width: "100%",
-              height: "65px",
+              height: "65px"
             }}>
               
               <Box sx={{ 
-                width: "60px",
+                width: "50px",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "left"
+              }}>
+                <EmailOutlinedIcon color="info" fontSize="large" />
+              </Box>
+              <Box sx={{
                 display: "flex",
                 flexDirection: "column",
                 justifyContent: "center",
                 alignItems: "center"
               }}>
-                <EmailOutlinedIcon color="info" fontSize="large" />
-              </Box>
-              <Box>
                 <TextField
                   id = "standard-basic"
                   label = "Эл. почта"
                   variant = "filled"
                   color = "secondary"
-                  sx = {{ width: "285px" }}
+                  sx = {{ width: "295px" }}
                   InputProps={{
                     style: {
                       backgroundColor: theme.palette.primary.light,
@@ -111,22 +120,27 @@ const Authorization: React.FC = () =>  {
             }}>
               
               <Box sx={{ 
-                width: "60px",
+                width: "50px",
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "left"
+              }}>
+                <LockOutlinedIcon color="info" fontSize="large" />
+              </Box>
+              <Box sx={{
                 display: "flex",
                 flexDirection: "column",
                 justifyContent: "center",
                 alignItems: "center"
               }}>
-                <LockOutlinedIcon color="info" fontSize="large" />
-              </Box>
-              <Box>
                 <TextField
                   id = "outlined-password-input"
                   label = "Пароль"
                   type = "password"
                   variant = "filled"
                   color = "secondary"
-                  sx = {{ width: "285px" }}
+                  sx = {{ width: "295px" }}
                   InputProps={{
                     style: {
                       backgroundColor: theme.palette.primary.light,
@@ -140,7 +154,102 @@ const Authorization: React.FC = () =>  {
               </Box>
 
             </Box>
+            
           </Box>
+
+        
+          <Box sx={{
+            width: "100%",
+            height: "75px"
+          }}>
+            <Box sx={{
+              display: "flex",
+              width: "100%"
+            }}>
+              
+              <Box sx={{ 
+                width: "50px",
+                height: "46px"
+              }}>
+                <Checkbox sx={{ 
+                  color: theme.palette.secondary.main,
+                  transform: "scale(1.5)",
+                  '&.Mui-checked': {
+                    color: theme.palette.secondary.main,
+                  },
+                }} />
+              </Box>
+              <Box sx={{ 
+                display: "flex",
+                flexDirection: "column",
+                justifyContent: "center",
+                alignItems: "center",
+                fontWeight: "600"
+              }}>
+                Запомнить этот компьютер
+              </Box>
+              
+            </Box>
+            <Box sx={{
+              display: "flex",
+              width: "100%"
+            }}>
+
+              <Typography
+                variant = "h4"
+                sx={{
+                  color: theme.palette.info.main,
+                  cursor: "pointer",
+                  "&:hover": {
+                    color: theme.palette.info.dark
+                  }
+                }}>
+                Забыли пароль?
+              </Typography>
+
+            </Box>
+            
+          </Box>
+
+
+          <Button 
+            variant = "contained"
+            sx={{
+              backgroundColor: theme.palette.primary.light,
+              width: "100%",
+              height: "82px",
+              "&:hover": {
+                backgroundColor: theme.palette.primary.dark
+              }
+            }}>
+              ВОЙТИ
+          </Button>
+
+
+          <Box sx={{
+            width: "100%",
+            display: "flex",
+            justifyContent: "space-between",
+            alignItems: "center",
+          }}>
+            <Typography 
+              variant = "h4">
+                У вас нет аккаунта?
+            </Typography>
+            <Typography
+              variant = "h4"
+              sx={{
+                color: theme.palette.info.main,
+                borderBottom: `1px solid ${theme.palette.info.main}`,
+                cursor: "pointer",
+                "&:hover": {
+                  color: theme.palette.info.dark
+                }
+              }}>
+                Зарегистрируйтесь
+            </Typography>
+          </Box>
+
             
         </Box>
       </Box>
diff --git a/src/index.tsx b/src/index.tsx
index 5594105..4edea89 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,15 +1,25 @@
 import * as React from "react";
-import * as ReactDOM from "react-dom";
+// import * as ReactDOM from "react-dom";
 import Authorization from "./Components/Authorization";
 import { ThemeProvider } from "@mui/material";
 import theme from "./theme";
+import { createRoot } from 'react-dom/client';
 
+const container = document.getElementById('root');
+const root = createRoot(container!);
+root.render(
+    <React.StrictMode>
+        <ThemeProvider theme={theme}>
+            <Authorization />
+        </ThemeProvider>
+    </React.StrictMode>
+);
 
-ReactDOM.render(
-  <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <Authorization />
-    </ThemeProvider>
-  </React.StrictMode>,
-  document.getElementById("root")
-);
\ No newline at end of file
+// ReactDOM.render(
+//   <React.StrictMode>
+//     <ThemeProvider theme={theme}>
+//       <Authorization />
+//     </ThemeProvider>
+//   </React.StrictMode>,
+//   document.getElementById("root")
+// );
\ No newline at end of file
diff --git a/src/theme.ts b/src/theme.ts
index a17d606..a384cc1 100644
--- a/src/theme.ts
+++ b/src/theme.ts
@@ -8,13 +8,15 @@ const theme = createTheme({
   palette: {
     primary: {
       light: "#26272c",
-      main: "#111217"
+      main: "#111217",
+      dark: "#2f3339"
     },
     secondary: {
       main: "#ffffff"
     },
     info: {
-      main: "#eaba5b"
+      main: "#eaba5b",
+      dark: "#fe9903"
     }
   },
 
@@ -25,28 +27,37 @@ const theme = createTheme({
     subtitle1: {
       fontFamily: fontFamily,
       fontWeight: fontWeight,
-      fontSize: 21,
+      fontSize: 25
     },
     subtitle2: {
       fontFamily: fontFamily,
-      fontSize: 21,
-      lineHeight: "37.5px"
+      fontSize: 25
     },
     caption: {
       fontFamily: fontFamily,
       fontWeight: fontWeight,
-      fontSize: 21,
+      fontSize: 21
     },
     h5: {
       fontFamily: fontFamily,
       fontWeight: fontWeight,
-      fontSize: 33,
+      fontSize: 35
     },
     h6: {
       fontFamily: fontFamily,
       fontWeight: fontWeight,
-      fontSize: 17,
+      fontSize: 18
     },
+    button: {
+      fontFamily: fontFamily,
+      fontWeight: fontWeight,
+      fontSize: 22
+    },
+    h4: {
+      fontFamily: fontFamily,
+      fontWeight: fontWeight,
+      fontSize: 16
+    }
   },
 });
 
@@ -57,9 +68,14 @@ declare module '@mui/material/styles' {
       primary: {
         light: string;
         main: string;
+        dark: string;
       },
       secondary: {
         main: string;
+      },
+      info: {
+        main: string;
+        dark: string;
       }
     }
   }
@@ -71,6 +87,7 @@ declare module '@mui/material/styles' {
     caption: React.CSSProperties;
     h5: React.CSSProperties;
     h6: React.CSSProperties;
+    button: React.CSSProperties;
   }
 }