diff --git a/package-lock.json b/package-lock.json
index 9c20216..ae3fae1 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,9 @@
       "name": "if-salas-web",
       "version": "0.1.0",
       "dependencies": {
+        "@emotion/react": "^11.9.0",
+        "@emotion/styled": "^11.8.1",
+        "@mui/material": "^5.8.2",
         "@testing-library/jest-dom": "^5.16.4",
         "@testing-library/react": "^13.2.0",
         "@testing-library/user-event": "^13.5.0",
@@ -2156,6 +2159,174 @@
         "postcss-selector-parser": "^6.0.10"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
+      "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/babel-plugin-macros": {
+      "version": "2.8.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+      "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+      "dependencies": {
+        "@babel/runtime": "^7.7.2",
+        "cosmiconfig": "^6.0.0",
+        "resolve": "^1.12.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/cosmiconfig": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+      "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.1.0",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.7.2"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w=",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.7.1",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.7.1.tgz",
+      "integrity": "sha512-r65Zy4Iljb8oyjtLeCuBH8Qjiy107dOYC6SJq7g7GV5UCQWMObY4SJDPGFjiiVpPrOJ2hmJOoBiYTC7hwx9E2A==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.1.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "4.0.13"
+      }
+    },
+    "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/@emotion/is-prop-valid": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
+      "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
+      "dependencies": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz",
+      "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.3",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz",
+      "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==",
+      "dependencies": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@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=="
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz",
+      "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/is-prop-valid": "^1.1.2",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.1.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0",
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@babel/core": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+      "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "node_modules/@eslint/eslintrc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -2587,6 +2758,212 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "node_modules/@mui/base": {
+      "version": "5.0.0-alpha.83",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.83.tgz",
+      "integrity": "sha512-/bFcjiI36R2Epf2Y3BkZOIdxrz5uMLqOU4cRai4igJ8DHTRMZDeKbOff0SdvwJNwg8r6oPUyoeOpsWkaOOX9/g==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@emotion/is-prop-valid": "^1.1.2",
+        "@mui/types": "^7.1.3",
+        "@mui/utils": "^5.8.0",
+        "@popperjs/core": "^2.11.5",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^17.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.8.2.tgz",
+      "integrity": "sha512-w/A1KG9Czf42uTyJOiRU5U1VullOz1R3xcsBvv3BtKCCWdVP+D6v/Yb8v0tJpIixMEbjeWzWGjotQBU0nd+yNA==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/base": "5.0.0-alpha.83",
+        "@mui/system": "^5.8.2",
+        "@mui/types": "^7.1.3",
+        "@mui/utils": "^5.8.0",
+        "@types/react-transition-group": "^4.4.4",
+        "clsx": "^1.1.1",
+        "csstype": "^3.1.0",
+        "hoist-non-react-statics": "^3.3.2",
+        "prop-types": "^15.8.1",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.8.0.tgz",
+      "integrity": "sha512-MjRAneTmCKLR9u2S4jtjLUe6gpHxlbb4g2bqpDJ2PdwlvwsWIUzbc/gVB4dvccljXeWxr5G2M/Co2blXisvFIw==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/utils": "^5.8.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.8.0.tgz",
+      "integrity": "sha512-Q3spibB8/EgeMYHc+/o3RRTnAYkSl7ROCLhXJ830W8HZ2/iDiyYp16UcxKPurkXvLhUaILyofPVrP3Su2uKsAw==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@emotion/cache": "^11.7.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.8.2.tgz",
+      "integrity": "sha512-N74gDNKM+MnWvKTMmCPvCVLH4f0ZzakP1bcMDaPctrHwcyxNcEmtTGNpIiVk0Iu7vtThZAFL3DjHpINPGF7+cg==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/private-theming": "^5.8.0",
+        "@mui/styled-engine": "^5.8.0",
+        "@mui/types": "^7.1.3",
+        "@mui/utils": "^5.8.0",
+        "clsx": "^1.1.1",
+        "csstype": "^3.1.0",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0",
+        "react": "^17.0.0 || ^18.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.3.tgz",
+      "integrity": "sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA==",
+      "peerDependencies": {
+        "@types/react": "*"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.8.0.tgz",
+      "integrity": "sha512-7LgUtCvz78676iC0wpTH7HizMdCrTphhBmRWimIMFrp5Ph6JbDFVuKS1CwYnWWxRyYKL0QzXrDL0lptAU90EXg==",
+      "dependencies": {
+        "@babel/runtime": "^7.17.2",
+        "@types/prop-types": "^15.7.5",
+        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "prop-types": "^15.8.1",
+        "react-is": "^17.0.2"
+      },
+      "engines": {
+        "node": ">=12.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui"
+      },
+      "peerDependencies": {
+        "react": "^17.0.0 || ^18.0.0"
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -2676,6 +3053,15 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -3332,6 +3718,22 @@
         "@types/react": "*"
       }
     },
+    "node_modules/@types/react-is": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
+    "node_modules/@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==",
+      "dependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -4826,6 +5228,14 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "node_modules/clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -5811,6 +6221,15 @@
         "utila": "~0.4"
       }
     },
+    "node_modules/dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -7066,6 +7485,11 @@
         "url": "https://github.com/avajs/find-cache-dir?sponsor=1"
       }
     },
+    "node_modules/find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -7592,6 +8016,19 @@
         "he": "bin/he"
       }
     },
+    "node_modules/hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "dependencies": {
+        "react-is": "^16.7.0"
+      }
+    },
+    "node_modules/hoist-non-react-statics/node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
     "node_modules/hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -11885,6 +12322,21 @@
         }
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "dependencies": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      },
+      "peerDependencies": {
+        "react": ">=16.6.0",
+        "react-dom": ">=16.6.0"
+      }
+    },
     "node_modules/readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -12953,6 +13405,11 @@
         "postcss": "^8.2.15"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -16013,6 +16470,142 @@
       "integrity": "sha512-RkYG5KiGNX0fJ5YoI0f4Wfq2Yo74D25Hru4fxTOioYdQvHBxcrrtTTyT5Ozzh2ejcNrhFy7IEts2WyEY7yi5yw==",
       "requires": {}
     },
+    "@emotion/babel-plugin": {
+      "version": "11.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.9.2.tgz",
+      "integrity": "sha512-Pr/7HGH6H6yKgnVFNEj2MVlreu3ADqftqjqwUvDy/OJzKFgxKeTQ+eeUf20FOTuHVkDON2iNa25rAXVYtWJCjw==",
+      "requires": {
+        "@babel/helper-module-imports": "^7.12.13",
+        "@babel/plugin-syntax-jsx": "^7.12.13",
+        "@babel/runtime": "^7.13.10",
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.5",
+        "@emotion/serialize": "^1.0.2",
+        "babel-plugin-macros": "^2.6.1",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.0.13"
+      },
+      "dependencies": {
+        "babel-plugin-macros": {
+          "version": "2.8.0",
+          "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
+          "integrity": "sha512-SEP5kJpfGYqYKpBrj5XU3ahw5p5GOHJ0U5ssOSQ/WBVdwkD2Dzlce95exQTs3jOVWPPKLBN2rlEWkCK7dSmLvg==",
+          "requires": {
+            "@babel/runtime": "^7.7.2",
+            "cosmiconfig": "^6.0.0",
+            "resolve": "^1.12.0"
+          }
+        },
+        "cosmiconfig": {
+          "version": "6.0.0",
+          "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-6.0.0.tgz",
+          "integrity": "sha512-xb3ZL6+L8b9JLLCx3ZdoZy4+2ECphCMo2PwqgP1tlfVq6M6YReyzBJtvWWtbDSpNr9hn96pkCiZqUcFEc+54Qg==",
+          "requires": {
+            "@types/parse-json": "^4.0.0",
+            "import-fresh": "^3.1.0",
+            "parse-json": "^5.0.0",
+            "path-type": "^4.0.0",
+            "yaml": "^1.7.2"
+          }
+        },
+        "source-map": {
+          "version": "0.5.7",
+          "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+          "integrity": "sha1-igOdLRAh0i0eoUyA2OpGi6LvP8w="
+        }
+      }
+    },
+    "@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/hash": {
+      "version": "0.8.0",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.8.0.tgz",
+      "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
+    },
+    "@emotion/is-prop-valid": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.1.2.tgz",
+      "integrity": "sha512-3QnhqeL+WW88YjYbQL5gUIkthuMw7a0NGbZ7wfFVk2kg/CK5w8w5FFa0RzWjyY1+sujN0NWbtSHH6OJmWHtJpQ==",
+      "requires": {
+        "@emotion/memoize": "^0.7.4"
+      }
+    },
+    "@emotion/memoize": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.5.tgz",
+      "integrity": "sha512-igX9a37DR2ZPGYtV6suZ6whr8pTFtyHL3K/oLUotxpSVO2ASaprmAe2Dkq7tBo7CRY7MMDrAa9nuQP9/YG8FxQ=="
+    },
+    "@emotion/react": {
+      "version": "11.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.9.0.tgz",
+      "integrity": "sha512-lBVSF5d0ceKtfKCDQJveNAtkC7ayxpVlgOohLgXqRwqWr9bOf4TZAFFyIcNngnV6xK6X4x2ZeXq7vliHkoVkxQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/cache": "^11.7.1",
+        "@emotion/serialize": "^1.0.3",
+        "@emotion/utils": "^1.1.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      }
+    },
+    "@emotion/serialize": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.3.tgz",
+      "integrity": "sha512-2mSSvgLfyV3q+iVh3YWgNlUc2a9ZlDU7DjuP5MjK3AXRR0dYigCrP99aeFtaB2L/hjfEZdSThn5dsZ0ufqbvsA==",
+      "requires": {
+        "@emotion/hash": "^0.8.0",
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/unitless": "^0.7.5",
+        "@emotion/utils": "^1.0.0",
+        "csstype": "^3.0.2"
+      }
+    },
+    "@emotion/sheet": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.1.0.tgz",
+      "integrity": "sha512-u0AX4aSo25sMAygCuQTzS+HsImZFuS8llY8O7b9MDRzbJM0kVJlAz6KNDqcG7pOuQZJmj/8X/rAW+66kMnMW+g=="
+    },
+    "@emotion/styled": {
+      "version": "11.8.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.8.1.tgz",
+      "integrity": "sha512-OghEVAYBZMpEquHZwuelXcRjRJQOVayvbmNR0zr174NHdmMgrNkLC6TljKC5h9lZLkN5WGrdUcrKlOJ4phhoTQ==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/babel-plugin": "^11.7.1",
+        "@emotion/is-prop-valid": "^1.1.2",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/utils": "^1.1.0"
+      }
+    },
+    "@emotion/unitless": {
+      "version": "0.7.5",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.7.5.tgz",
+      "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
+    },
+    "@emotion/utils": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.1.0.tgz",
+      "integrity": "sha512-iRLa/Y4Rs5H/f2nimczYmS5kFJEbpiVvgN3XVfZ022IYhuNA1IRSHEizcof88LtCTXtl9S2Cxt32KgaXEu72JQ=="
+    },
+    "@emotion/weak-memoize": {
+      "version": "0.2.5",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz",
+      "integrity": "sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA=="
+    },
     "@eslint/eslintrc": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.3.0.tgz",
@@ -16349,6 +16942,93 @@
       "resolved": "https://registry.npmjs.org/@leichtgewicht/ip-codec/-/ip-codec-2.0.4.tgz",
       "integrity": "sha512-Hcv+nVC0kZnQ3tD9GVu5xSMR4VVYOteQIr/hwFPVEvPdlXqgGEuRjiheChHgdM+JyqdgNcmzZOX/tnl0JOiI7A=="
     },
+    "@mui/base": {
+      "version": "5.0.0-alpha.83",
+      "resolved": "https://registry.npmjs.org/@mui/base/-/base-5.0.0-alpha.83.tgz",
+      "integrity": "sha512-/bFcjiI36R2Epf2Y3BkZOIdxrz5uMLqOU4cRai4igJ8DHTRMZDeKbOff0SdvwJNwg8r6oPUyoeOpsWkaOOX9/g==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@emotion/is-prop-valid": "^1.1.2",
+        "@mui/types": "^7.1.3",
+        "@mui/utils": "^5.8.0",
+        "@popperjs/core": "^2.11.5",
+        "clsx": "^1.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^17.0.2"
+      }
+    },
+    "@mui/material": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-5.8.2.tgz",
+      "integrity": "sha512-w/A1KG9Czf42uTyJOiRU5U1VullOz1R3xcsBvv3BtKCCWdVP+D6v/Yb8v0tJpIixMEbjeWzWGjotQBU0nd+yNA==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/base": "5.0.0-alpha.83",
+        "@mui/system": "^5.8.2",
+        "@mui/types": "^7.1.3",
+        "@mui/utils": "^5.8.0",
+        "@types/react-transition-group": "^4.4.4",
+        "clsx": "^1.1.1",
+        "csstype": "^3.1.0",
+        "hoist-non-react-statics": "^3.3.2",
+        "prop-types": "^15.8.1",
+        "react-is": "^17.0.2",
+        "react-transition-group": "^4.4.2"
+      }
+    },
+    "@mui/private-theming": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-5.8.0.tgz",
+      "integrity": "sha512-MjRAneTmCKLR9u2S4jtjLUe6gpHxlbb4g2bqpDJ2PdwlvwsWIUzbc/gVB4dvccljXeWxr5G2M/Co2blXisvFIw==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/utils": "^5.8.0",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/styled-engine": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-5.8.0.tgz",
+      "integrity": "sha512-Q3spibB8/EgeMYHc+/o3RRTnAYkSl7ROCLhXJ830W8HZ2/iDiyYp16UcxKPurkXvLhUaILyofPVrP3Su2uKsAw==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@emotion/cache": "^11.7.1",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/system": {
+      "version": "5.8.2",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-5.8.2.tgz",
+      "integrity": "sha512-N74gDNKM+MnWvKTMmCPvCVLH4f0ZzakP1bcMDaPctrHwcyxNcEmtTGNpIiVk0Iu7vtThZAFL3DjHpINPGF7+cg==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@mui/private-theming": "^5.8.0",
+        "@mui/styled-engine": "^5.8.0",
+        "@mui/types": "^7.1.3",
+        "@mui/utils": "^5.8.0",
+        "clsx": "^1.1.1",
+        "csstype": "^3.1.0",
+        "prop-types": "^15.8.1"
+      }
+    },
+    "@mui/types": {
+      "version": "7.1.3",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.1.3.tgz",
+      "integrity": "sha512-DDF0UhMBo4Uezlk+6QxrlDbchF79XG6Zs0zIewlR4c0Dt6GKVFfUtzPtHCH1tTbcSlq/L2bGEdiaoHBJ9Y1gSA==",
+      "requires": {}
+    },
+    "@mui/utils": {
+      "version": "5.8.0",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-5.8.0.tgz",
+      "integrity": "sha512-7LgUtCvz78676iC0wpTH7HizMdCrTphhBmRWimIMFrp5Ph6JbDFVuKS1CwYnWWxRyYKL0QzXrDL0lptAU90EXg==",
+      "requires": {
+        "@babel/runtime": "^7.17.2",
+        "@types/prop-types": "^15.7.5",
+        "@types/react-is": "^16.7.1 || ^17.0.0",
+        "prop-types": "^15.8.1",
+        "react-is": "^17.0.2"
+      }
+    },
     "@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -16395,6 +17075,11 @@
         }
       }
     },
+    "@popperjs/core": {
+      "version": "2.11.5",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.5.tgz",
+      "integrity": "sha512-9X2obfABZuDVLCgPK9aX0a/x4jaOEweTTWE2+9sr0Qqqevj2Uv5XorvusThmc9XGYpS9yI+fhh8RTafBtGposw=="
+    },
     "@rollup/plugin-babel": {
       "version": "5.3.1",
       "resolved": "https://registry.npmjs.org/@rollup/plugin-babel/-/plugin-babel-5.3.1.tgz",
@@ -16898,6 +17583,22 @@
         "@types/react": "*"
       }
     },
+    "@types/react-is": {
+      "version": "17.0.3",
+      "resolved": "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz",
+      "integrity": "sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==",
+      "requires": {
+        "@types/react": "*"
+      }
+    },
+    "@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": "*"
+      }
+    },
     "@types/resolve": {
       "version": "1.17.1",
       "resolved": "https://registry.npmjs.org/@types/resolve/-/resolve-1.17.1.tgz",
@@ -17999,6 +18700,11 @@
         "wrap-ansi": "^7.0.0"
       }
     },
+    "clsx": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz",
+      "integrity": "sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA=="
+    },
     "co": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz",
@@ -18710,6 +19416,15 @@
         "utila": "~0.4"
       }
     },
+    "dom-helpers": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/dom-helpers/-/dom-helpers-5.2.1.tgz",
+      "integrity": "sha512-nRCa7CK3VTrM2NmGkIy4cbK7IZlgBE/PYMn55rrXefr5xXDP0LdtfPnblFDoVdcAfslJ7or6iqAUnx0CCGIWQA==",
+      "requires": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "dom-serializer": {
       "version": "1.4.1",
       "resolved": "https://registry.npmjs.org/dom-serializer/-/dom-serializer-1.4.1.tgz",
@@ -19650,6 +20365,11 @@
         "pkg-dir": "^4.1.0"
       }
     },
+    "find-root": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+    },
     "find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -20001,6 +20721,21 @@
       "resolved": "https://registry.npmjs.org/he/-/he-1.2.0.tgz",
       "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw=="
     },
+    "hoist-non-react-statics": {
+      "version": "3.3.2",
+      "resolved": "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz",
+      "integrity": "sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==",
+      "requires": {
+        "react-is": "^16.7.0"
+      },
+      "dependencies": {
+        "react-is": {
+          "version": "16.13.1",
+          "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+          "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+        }
+      }
+    },
     "hoopy": {
       "version": "0.1.4",
       "resolved": "https://registry.npmjs.org/hoopy/-/hoopy-0.1.4.tgz",
@@ -22986,6 +23721,17 @@
         "workbox-webpack-plugin": "^6.4.1"
       }
     },
+    "react-transition-group": {
+      "version": "4.4.2",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.2.tgz",
+      "integrity": "sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==",
+      "requires": {
+        "@babel/runtime": "^7.5.5",
+        "dom-helpers": "^5.0.1",
+        "loose-envify": "^1.4.0",
+        "prop-types": "^15.6.2"
+      }
+    },
     "readable-stream": {
       "version": "3.6.0",
       "resolved": "https://registry.npmjs.org/readable-stream/-/readable-stream-3.6.0.tgz",
@@ -23775,6 +24521,11 @@
         "postcss-selector-parser": "^6.0.4"
       }
     },
+    "stylis": {
+      "version": "4.0.13",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.13.tgz",
+      "integrity": "sha512-xGPXiFVl4YED9Jh7Euv2V220mriG9u4B2TA6Ybjc1catrstKD2PpIdU3U0RKpkVBC2EhmL/F0sPCr9vrFTNRag=="
+    },
     "supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
diff --git a/package.json b/package.json
index b950856..842711e 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,9 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.9.0",
+    "@emotion/styled": "^11.8.1",
+    "@mui/material": "^5.8.2",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^13.2.0",
     "@testing-library/user-event": "^13.5.0",
diff --git a/public/index.html b/public/index.html
index cd1f74b..99bb4a1 100644
--- a/public/index.html
+++ b/public/index.html
@@ -3,6 +3,10 @@
   <head>
     <meta charset="utf-8" />
 
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Fira+Code:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+
     <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
     <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
     <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
diff --git a/src/UnauthenticatedApp.js b/src/UnauthenticatedApp.js
index 2bfab1c..557499c 100644
--- a/src/UnauthenticatedApp.js
+++ b/src/UnauthenticatedApp.js
@@ -1,14 +1,12 @@
-import { useAuthState } from './context/auth';
+import { Fragment } from 'react';
+
+import Login from './screens/Login';
 
 function UnauthenticatedApp() {
-  const { login, isPending } = useAuthState();
-
   return (
-    <div>
-      <h2>Please, log in!</h2>
-      <button onClick={login}>Log in</button>
-      {isPending && <h1>Loading...</h1>}
-    </div>
+    <Fragment>
+      <Login />
+    </Fragment>
   );
 }
 
diff --git a/src/assets/if-salas-logo.png b/src/assets/if-salas-logo.png
new file mode 100644
index 0000000..3f811af
Binary files /dev/null and b/src/assets/if-salas-logo.png differ
diff --git a/src/assets/if-salas-logo.svg b/src/assets/if-salas-logo.svg
new file mode 100644
index 0000000..8a1106c
--- /dev/null
+++ b/src/assets/if-salas-logo.svg
@@ -0,0 +1,39 @@
+<svg width="79" height="116" viewBox="0 0 79 116" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_169_80)">
+<rect x="9.88892" y="20.7936" width="18.7143" height="18.7143" rx="0.5" fill="#32A041"/>
+<path d="M9.88892 42.0873C9.88892 41.8111 10.1128 41.5873 10.3889 41.5873H28.1032C28.3793 41.5873 28.6032 41.8111 28.6032 42.0873V59.8016C28.6032 60.0777 28.3793 60.3016 28.1032 60.3016H10.3889C10.1128 60.3016 9.88892 60.0777 9.88892 59.8016V42.0873Z" fill="#32A041"/>
+<path d="M9.88892 62.8809C9.88892 62.6048 10.1128 62.3809 10.3889 62.3809H28.1032C28.3793 62.3809 28.6032 62.6048 28.6032 62.8809V80.5952C28.6032 80.8713 28.3793 81.0952 28.1032 81.0952H10.3889C10.1128 81.0952 9.88892 80.8713 9.88892 80.5952V62.8809Z" fill="#32A041"/>
+<path d="M30.6826 21.2936C30.6826 21.0175 30.9065 20.7936 31.1826 20.7936H48.8969C49.173 20.7936 49.3969 21.0175 49.3969 21.2936V39.0079C49.3969 39.2841 49.173 39.5079 48.8969 39.5079H31.1826C30.9065 39.5079 30.6826 39.2841 30.6826 39.0079V21.2936Z" fill="#32A041"/>
+<rect x="30.6826" width="18.7143" height="18.7143" rx="0.5" fill="#32A041"/>
+<rect x="51.4763" width="18.7143" height="18.7143" rx="0.5" fill="#32A041"/>
+<rect x="30.6826" y="41.5873" width="18.7143" height="18.7143" rx="0.5" fill="#32A041"/>
+<rect x="51.4763" y="41.5873" width="18.7143" height="18.7143" rx="0.5" fill="#32A041"/>
+<rect x="30.6826" y="62.3809" width="18.7143" height="18.7143" rx="0.5" fill="#32A041"/>
+<circle cx="19.2461" cy="9.35714" r="9.35714" fill="#C9181E"/>
+<g filter="url(#filter1_d_169_80)">
+<path d="M17.632 102.473C17.632 103.505 17.36 104.417 16.816 105.209C16.28 106.001 15.508 106.621 14.5 107.069C13.492 107.517 12.28 107.741 10.864 107.741C9.296 107.741 7.98 107.513 6.916 107.057C5.86 106.593 4.984 106.021 4.288 105.341L6.28 103.133C6.896 103.669 7.576 104.085 8.32 104.381C9.064 104.669 9.88 104.813 10.768 104.813C11.32 104.813 11.804 104.733 12.22 104.573C12.636 104.413 12.96 104.181 13.192 103.877C13.424 103.573 13.54 103.205 13.54 102.773C13.54 102.365 13.448 102.021 13.264 101.741C13.08 101.461 12.768 101.209 12.328 100.985C11.896 100.761 11.292 100.533 10.516 100.301C9.22 99.9014 8.176 99.4614 7.384 98.9814C6.6 98.5014 6.028 97.9454 5.668 97.3134C5.316 96.6814 5.14 95.9454 5.14 95.1054C5.14 94.0894 5.42 93.2214 5.98 92.5014C6.548 91.7814 7.308 91.2334 8.26 90.8574C9.212 90.4734 10.26 90.2814 11.404 90.2814C12.692 90.2814 13.828 90.4694 14.812 90.8454C15.796 91.2134 16.648 91.7414 17.368 92.4294L15.508 94.5654C14.948 94.0934 14.344 93.7454 13.696 93.5214C13.048 93.2894 12.388 93.1734 11.716 93.1734C11.22 93.1734 10.784 93.2374 10.408 93.3654C10.032 93.4854 9.74 93.6654 9.532 93.9054C9.324 94.1454 9.22 94.4454 9.22 94.8054C9.22 95.1574 9.32 95.4534 9.52 95.6934C9.72 95.9334 10.068 96.1614 10.564 96.3774C11.06 96.5854 11.748 96.8294 12.628 97.1094C13.676 97.4294 14.572 97.8134 15.316 98.2614C16.068 98.7014 16.64 99.2574 17.032 99.9294C17.432 100.601 17.632 101.449 17.632 102.473ZM30.7986 103.661C30.7986 104.141 30.8626 104.489 30.9906 104.705C31.1266 104.921 31.3426 105.085 31.6386 105.197L30.8586 107.693C30.1066 107.621 29.4706 107.457 28.9506 107.201C28.4386 106.937 28.0346 106.541 27.7386 106.013C27.2506 106.597 26.6266 107.033 25.8666 107.321C25.1066 107.601 24.3306 107.741 23.5386 107.741C22.2266 107.741 21.1786 107.369 20.3946 106.625C19.6186 105.873 19.2306 104.909 19.2306 103.733C19.2306 102.349 19.7706 101.281 20.8506 100.529C21.9386 99.7774 23.4666 99.4014 25.4346 99.4014H27.1506V98.9214C27.1506 98.2574 26.9346 97.7654 26.5026 97.4454C26.0786 97.1254 25.4546 96.9654 24.6306 96.9654C24.2226 96.9654 23.6986 97.0254 23.0586 97.1454C22.4186 97.2574 21.7786 97.4214 21.1386 97.6374L20.2626 95.1174C21.0866 94.8054 21.9426 94.5694 22.8306 94.4094C23.7266 94.2494 24.5266 94.1694 25.2306 94.1694C27.1266 94.1694 28.5266 94.5574 29.4306 95.3334C30.3426 96.1014 30.7986 97.2134 30.7986 98.6694V103.661ZM24.8466 105.029C25.2546 105.029 25.6826 104.909 26.1306 104.669C26.5786 104.421 26.9186 104.073 27.1506 103.625V101.561H26.2146C25.1586 101.561 24.3826 101.725 23.8866 102.053C23.3906 102.373 23.1426 102.845 23.1426 103.469C23.1426 103.957 23.2906 104.341 23.5866 104.621C23.8906 104.893 24.3106 105.029 24.8466 105.029ZM41.1093 89.5254V103.325C41.1093 103.837 41.2533 104.205 41.5413 104.429C41.8373 104.645 42.2413 104.753 42.7533 104.753C43.0813 104.753 43.3973 104.717 43.7013 104.645C44.0053 104.565 44.2893 104.473 44.5533 104.369L45.4653 106.901C45.0333 107.125 44.5133 107.321 43.9053 107.489C43.2973 107.657 42.5893 107.741 41.7813 107.741C40.2453 107.741 39.1173 107.301 38.3973 106.421C37.6773 105.533 37.3173 104.345 37.3173 102.857V92.1174H33.5613V89.5254H41.1093ZM59.5799 103.661C59.5799 104.141 59.6439 104.489 59.7719 104.705C59.9079 104.921 60.1239 105.085 60.4199 105.197L59.6399 107.693C58.8879 107.621 58.2519 107.457 57.7319 107.201C57.2199 106.937 56.8159 106.541 56.5199 106.013C56.0319 106.597 55.4079 107.033 54.6479 107.321C53.8879 107.601 53.1119 107.741 52.3199 107.741C51.0079 107.741 49.9599 107.369 49.1759 106.625C48.3999 105.873 48.0119 104.909 48.0119 103.733C48.0119 102.349 48.5519 101.281 49.6319 100.529C50.7199 99.7774 52.2479 99.4014 54.2159 99.4014H55.9319V98.9214C55.9319 98.2574 55.7159 97.7654 55.2839 97.4454C54.8599 97.1254 54.2359 96.9654 53.4119 96.9654C53.0039 96.9654 52.4799 97.0254 51.8399 97.1454C51.1999 97.2574 50.5599 97.4214 49.9199 97.6374L49.0439 95.1174C49.8679 94.8054 50.7239 94.5694 51.6119 94.4094C52.5079 94.2494 53.3079 94.1694 54.0119 94.1694C55.9079 94.1694 57.3079 94.5574 58.2119 95.3334C59.1239 96.1014 59.5799 97.2134 59.5799 98.6694V103.661ZM53.6279 105.029C54.0359 105.029 54.4639 104.909 54.9119 104.669C55.3599 104.421 55.6999 104.073 55.9319 103.625V101.561H54.9959C53.9399 101.561 53.1639 101.725 52.6679 102.053C52.1719 102.373 51.9239 102.845 51.9239 103.469C51.9239 103.957 52.0719 104.341 52.3679 104.621C52.6719 104.893 53.0919 105.029 53.6279 105.029ZM68.3545 105.029C68.9865 105.029 69.4945 104.929 69.8785 104.729C70.2705 104.529 70.4665 104.229 70.4665 103.829C70.4665 103.557 70.3905 103.329 70.2385 103.145C70.0865 102.961 69.7945 102.785 69.3625 102.617C68.9305 102.449 68.2905 102.249 67.4425 102.017C66.6665 101.809 65.9785 101.545 65.3785 101.225C64.7865 100.905 64.3225 100.493 63.9865 99.9894C63.6585 99.4854 63.4945 98.8574 63.4945 98.1054C63.4945 97.3454 63.7065 96.6694 64.1305 96.0774C64.5545 95.4854 65.1785 95.0214 66.0025 94.6854C66.8265 94.3414 67.8345 94.1694 69.0265 94.1694C70.1625 94.1694 71.1505 94.3174 71.9905 94.6134C72.8385 94.9014 73.5705 95.2694 74.1865 95.7174L72.6745 97.9494C72.1465 97.6214 71.5785 97.3614 70.9705 97.1694C70.3625 96.9694 69.7505 96.8694 69.1345 96.8694C68.5185 96.8694 68.0585 96.9534 67.7545 97.1214C67.4585 97.2814 67.3105 97.5254 67.3105 97.8534C67.3105 98.0694 67.3865 98.2574 67.5385 98.4174C67.6985 98.5694 67.9945 98.7294 68.4265 98.8974C68.8585 99.0574 69.4905 99.2574 70.3225 99.4974C71.1465 99.7294 71.8625 99.9974 72.4705 100.301C73.0865 100.605 73.5625 101.013 73.8985 101.525C74.2345 102.029 74.4025 102.697 74.4025 103.529C74.4025 104.457 74.1265 105.237 73.5745 105.869C73.0225 106.493 72.2905 106.961 71.3785 107.273C70.4665 107.585 69.4665 107.741 68.3785 107.741C67.1465 107.741 66.0585 107.565 65.1145 107.213C64.1705 106.861 63.3665 106.397 62.7025 105.821L64.6105 103.685C65.1065 104.069 65.6665 104.389 66.2905 104.645C66.9225 104.901 67.6105 105.029 68.3545 105.029Z" fill="white"/>
+</g>
+</g>
+<defs>
+<filter id="filter0_d_169_80" x="0.288086" y="0" width="78.1145" height="115.741" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_169_80"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_169_80" result="shape"/>
+</filter>
+<filter id="filter1_d_169_80" x="0.288086" y="89.5254" width="78.1145" height="26.216" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="2"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_169_80"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_169_80" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/src/components/LoadingIndicator.js b/src/components/LoadingIndicator.js
new file mode 100644
index 0000000..33053a3
--- /dev/null
+++ b/src/components/LoadingIndicator.js
@@ -0,0 +1,21 @@
+import { Box, LinearProgress } from '@mui/material';
+
+function LoadingIndicator() {
+  return (
+    <Box sx={box}>
+      <LinearProgress sx={linearProgress} />
+    </Box>
+  );
+}
+
+const box = {
+  width: '100%',
+  position: 'absolute',
+  top: 0,
+};
+
+const linearProgress = {
+  height: '7px',
+};
+
+export default LoadingIndicator;
diff --git a/src/index.css b/src/index.css
index ec2585e..20c8d70 100644
--- a/src/index.css
+++ b/src/index.css
@@ -1,8 +1,6 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
+  font-family: 'Fira Code', monospace;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }
diff --git a/src/index.js b/src/index.js
index fa6639d..742d56d 100644
--- a/src/index.js
+++ b/src/index.js
@@ -1,16 +1,36 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
-import './index.css';
 import App from './App';
 import reportWebVitals from './reportWebVitals';
 import AppProviders from './context';
+import { createTheme } from '@mui/material';
+import { ThemeProvider } from '@mui/system';
+import './index.css';
+
+const theme = createTheme({
+  palette: {
+    primary: {
+      main: '#32A041',
+      black: '#1C1C1C',
+      lightGray: '#8C8C8C',
+    },
+    secondary: {
+      main: '#00420C',
+    },
+  },
+  typography: {
+    fontFamily: ['Fira Code'].join(','),
+  },
+});
 
 const root = ReactDOM.createRoot(document.getElementById('root'));
 root.render(
   <React.StrictMode>
-    <AppProviders>
-      <App />
-    </AppProviders>
+    <ThemeProvider theme={theme}>
+      <AppProviders>
+        <App />
+      </AppProviders>
+    </ThemeProvider>
   </React.StrictMode>
 );
 
diff --git a/src/screens/Login.js b/src/screens/Login.js
new file mode 100644
index 0000000..a09e4b8
--- /dev/null
+++ b/src/screens/Login.js
@@ -0,0 +1,100 @@
+import { Fragment } from 'react';
+import {
+  Box,
+  Button,
+  Container,
+  Link,
+  Paper,
+  Stack,
+  TextField,
+} from '@mui/material';
+import { useAuthState } from '../context/auth';
+import LoadingIndicator from '../components/LoadingIndicator';
+import logoImage from '../assets/if-salas-logo.svg';
+
+function Login() {
+  const { login, isPending } = useAuthState();
+
+  return (
+    <Fragment>
+      <Paper sx={paper} elevation={4} variant="elevation">
+        <Box sx={boxLogo}>
+          <Container>
+            <img src={logoImage} width="100" alt="Logotipo" />
+            <p>A plataforma de ensino de código aberto.</p>
+          </Container>
+        </Box>
+        <Box sx={boxForm}>
+          <h1>Login</h1>
+          <p>Bem-vindo de volta. Faça o login digitando os dados abaixo.</p>
+          <Stack spacing={4} sx={stack} component="form">
+            <TextField
+              id="email"
+              label="E-mail"
+              variant="standard"
+              type="email"
+            />
+            <TextField
+              id="password"
+              label="Senha"
+              variant="standard"
+              type="password"
+            />
+            <Button onClick={login} variant="contained">
+              Entrar
+            </Button>
+            <Link href="#">Esqueci minha senha</Link>
+            <Link href="#">Cadastre-se</Link>
+          </Stack>
+        </Box>
+      </Paper>
+      {isPending && <LoadingIndicator />}
+    </Fragment>
+  );
+}
+
+const paper = {
+  width: '900px',
+  height: '500px',
+  display: 'flex',
+  justifyContent: 'center',
+  margin: '0 auto',
+  marginTop: '20vh',
+  color: 'white',
+  textAlign: 'center',
+};
+
+const baseBox = {
+  width: '100%',
+  height: '100%',
+  display: 'flex',
+  justifyContent: 'center',
+  flexDirection: 'column',
+};
+
+const boxLogo = {
+  ...baseBox,
+  backgroundColor: 'secondary.main',
+};
+
+const boxForm = {
+  ...baseBox,
+  '> h1, p ': {
+    paddingLeft: '70px',
+    paddingRight: '70px',
+    textAlign: 'initial',
+  },
+  '> h1': {
+    color: 'primary.black',
+    margin: 0,
+  },
+  '> p': {
+    color: 'primary.lightGray',
+  },
+};
+
+const stack = {
+  padding: '0 70px',
+};
+
+export default Login;