diff --git a/frontend/.babelrc.js b/frontend/.babelrc.js
index fddc1e97e..4849bcad3 100644
--- a/frontend/.babelrc.js
+++ b/frontend/.babelrc.js
@@ -8,6 +8,7 @@ module.exports = {
     },
     plugins: [
         "relay",
+        "@emotion",
         "@babel/plugin-proposal-nullish-coalescing-operator",
     ],
     presets: [
@@ -25,6 +26,5 @@ module.exports = {
                 "importSource": "@emotion/react",
             },
         ],
-        "@emotion/babel-preset-css-prop",
     ],
 };
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 63d387557..56d9ac161 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -13,8 +13,7 @@
         "@babel/preset-env": "^7.14.2",
         "@babel/preset-react": "^7.13.13",
         "@babel/preset-typescript": "^7.13.0",
-        "@emotion/babel-preset-css-prop": "^10.2.1",
-        "@emotion/core": "^10.1.1",
+        "@emotion/react": "^11.4.0",
         "@fortawesome/fontawesome-svg-core": "^1.2.35",
         "@fortawesome/free-regular-svg-icons": "^5.15.3",
         "@fortawesome/free-solid-svg-icons": "^5.15.3",
@@ -45,6 +44,7 @@
         "yaml-loader": "^0.6.0"
       },
       "devDependencies": {
+        "@emotion/babel-plugin": "^11.3.0",
         "@types/react": "^17.0.6",
         "@types/react-dom": "^17.0.5",
         "@types/react-relay": "^11.0.1",
@@ -53,7 +53,7 @@
         "@typescript-eslint/parser": "^4.24.0",
         "eslint": "^7.26.0",
         "eslint-plugin-react": "^7.23.2",
-        "typescript": "^4.0.2"
+        "typescript": "^4.2.4"
       }
     },
     "node_modules/@babel/code-frame": {
@@ -1498,64 +1498,39 @@
         "to-fast-properties": "^2.0.0"
       }
     },
-    "node_modules/@emotion/babel-plugin-jsx-pragmatic": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz",
-      "integrity": "sha512-y+3AJ0SItMDaAgGPVkQBC/S/BaqaPACkQ6MyCI2CUlrjTxKttTVfD3TMtcs7vLEcLxqzZ1xiG0vzwCXjhopawQ==",
-      "dependencies": {
-        "@babel/plugin-syntax-jsx": "^7.2.0"
-      }
-    },
-    "node_modules/@emotion/babel-preset-css-prop": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.2.1.tgz",
-      "integrity": "sha512-4hudLJCfIrbpJZek5n69cwzu7GgCamza/whh/RgqXaI5ZWT8pFj1rR2KjQntzFFzTU7l9o+jdVPSpgCbrVG+VQ==",
+    "node_modules/@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==",
+      "dev": true,
       "dependencies": {
-        "@babel/plugin-transform-react-jsx": "^7.12.1",
-        "@babel/plugin-transform-react-jsx-development": "^7.12.1",
-        "@babel/runtime": "^7.5.5",
-        "@emotion/babel-plugin-jsx-pragmatic": "^0.1.5",
-        "babel-plugin-emotion": "^10.0.27"
+        "@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.3"
       },
       "peerDependencies": {
         "@babel/core": "^7.0.0"
       }
     },
-    "node_modules/@emotion/cache": {
-      "version": "10.0.29",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
-      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
-      "dependencies": {
-        "@emotion/sheet": "0.9.4",
-        "@emotion/stylis": "0.8.5",
-        "@emotion/utils": "0.11.3",
-        "@emotion/weak-memoize": "0.2.5"
-      }
-    },
-    "node_modules/@emotion/core": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz",
-      "integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==",
-      "dependencies": {
-        "@babel/runtime": "^7.5.5",
-        "@emotion/cache": "^10.0.27",
-        "@emotion/css": "^10.0.27",
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/sheet": "0.9.4",
-        "@emotion/utils": "0.11.3"
+    "node_modules/@emotion/babel-plugin/node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "engines": {
+        "node": ">=10"
       },
-      "peerDependencies": {
-        "react": ">=16.3.0"
-      }
-    },
-    "node_modules/@emotion/css": {
-      "version": "10.0.27",
-      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
-      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
-      "dependencies": {
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/utils": "0.11.3",
-        "babel-plugin-emotion": "^10.0.27"
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
       }
     },
     "node_modules/@emotion/hash": {
@@ -1564,36 +1539,64 @@
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
     "node_modules/@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+      "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.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.0.tgz",
+      "integrity": "sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==",
+      "dependencies": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.0.1",
+        "@emotion/utils": "^1.0.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": "0.11.16",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+    "node_modules/@emotion/react/node_modules/@emotion/cache": {
+      "version": "11.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz",
+      "integrity": "sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==",
       "dependencies": {
-        "@emotion/hash": "0.8.0",
-        "@emotion/memoize": "0.7.4",
-        "@emotion/unitless": "0.7.5",
-        "@emotion/utils": "0.11.3",
-        "csstype": "^2.5.7"
+        "@emotion/memoize": "^0.7.4",
+        "@emotion/sheet": "^1.0.0",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "stylis": "^4.0.3"
       }
     },
-    "node_modules/@emotion/serialize/node_modules/csstype": {
-      "version": "2.6.13",
-      "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz",
-      "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A=="
-    },
-    "node_modules/@emotion/sheet": {
-      "version": "0.9.4",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
-      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
+    "node_modules/@emotion/react/node_modules/@emotion/sheet": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.0.1.tgz",
+      "integrity": "sha512-GbIvVMe4U+Zc+929N1V7nW6YYJtidj31lidSmdYcWozwoBIObXBnaJkKNDjZrLm9Nc0BR+ZyHNaRZxqNZbof5g=="
     },
-    "node_modules/@emotion/stylis": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
+    "node_modules/@emotion/serialize": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
+      "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/unitless": {
       "version": "0.7.5",
@@ -1601,9 +1604,9 @@
       "integrity": "sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg=="
     },
     "node_modules/@emotion/utils": {
-      "version": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
     },
     "node_modules/@emotion/weak-memoize": {
       "version": "0.2.5",
@@ -3152,23 +3155,6 @@
         "object.assign": "^4.1.0"
       }
     },
-    "node_modules/babel-plugin-emotion": {
-      "version": "10.0.33",
-      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
-      "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
-      "dependencies": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@emotion/hash": "0.8.0",
-        "@emotion/memoize": "0.7.4",
-        "@emotion/serialize": "^0.11.16",
-        "babel-plugin-macros": "^2.0.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^1.0.5",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7"
-      }
-    },
     "node_modules/babel-plugin-macros": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
@@ -3263,11 +3249,6 @@
         "graphql": "^15.0.0"
       }
     },
-    "node_modules/babel-plugin-syntax-jsx": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
-    },
     "node_modules/babel-plugin-syntax-trailing-function-commas": {
       "version": "7.0.0-beta.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz",
@@ -5798,7 +5779,8 @@
     "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=="
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true
     },
     "node_modules/find-up": {
       "version": "3.0.0",
@@ -9624,6 +9606,11 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
+      "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
+    },
     "node_modules/supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
@@ -12038,58 +12025,32 @@
         "to-fast-properties": "^2.0.0"
       }
     },
-    "@emotion/babel-plugin-jsx-pragmatic": {
-      "version": "0.1.5",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin-jsx-pragmatic/-/babel-plugin-jsx-pragmatic-0.1.5.tgz",
-      "integrity": "sha512-y+3AJ0SItMDaAgGPVkQBC/S/BaqaPACkQ6MyCI2CUlrjTxKttTVfD3TMtcs7vLEcLxqzZ1xiG0vzwCXjhopawQ==",
-      "requires": {
-        "@babel/plugin-syntax-jsx": "^7.2.0"
-      }
-    },
-    "@emotion/babel-preset-css-prop": {
-      "version": "10.2.1",
-      "resolved": "https://registry.npmjs.org/@emotion/babel-preset-css-prop/-/babel-preset-css-prop-10.2.1.tgz",
-      "integrity": "sha512-4hudLJCfIrbpJZek5n69cwzu7GgCamza/whh/RgqXaI5ZWT8pFj1rR2KjQntzFFzTU7l9o+jdVPSpgCbrVG+VQ==",
-      "requires": {
-        "@babel/plugin-transform-react-jsx": "^7.12.1",
-        "@babel/plugin-transform-react-jsx-development": "^7.12.1",
-        "@babel/runtime": "^7.5.5",
-        "@emotion/babel-plugin-jsx-pragmatic": "^0.1.5",
-        "babel-plugin-emotion": "^10.0.27"
-      }
-    },
-    "@emotion/cache": {
-      "version": "10.0.29",
-      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-10.0.29.tgz",
-      "integrity": "sha512-fU2VtSVlHiF27empSbxi1O2JFdNWZO+2NFHfwO0pxgTep6Xa3uGb+3pVKfLww2l/IBGLNEZl5Xf/++A4wAYDYQ==",
-      "requires": {
-        "@emotion/sheet": "0.9.4",
-        "@emotion/stylis": "0.8.5",
-        "@emotion/utils": "0.11.3",
-        "@emotion/weak-memoize": "0.2.5"
-      }
-    },
-    "@emotion/core": {
-      "version": "10.1.1",
-      "resolved": "https://registry.npmjs.org/@emotion/core/-/core-10.1.1.tgz",
-      "integrity": "sha512-ZMLG6qpXR8x031NXD8HJqugy/AZSkAuMxxqB46pmAR7ze47MhNJ56cdoX243QPZdGctrdfo+s08yZTiwaUcRKA==",
-      "requires": {
-        "@babel/runtime": "^7.5.5",
-        "@emotion/cache": "^10.0.27",
-        "@emotion/css": "^10.0.27",
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/sheet": "0.9.4",
-        "@emotion/utils": "0.11.3"
-      }
-    },
-    "@emotion/css": {
-      "version": "10.0.27",
-      "resolved": "https://registry.npmjs.org/@emotion/css/-/css-10.0.27.tgz",
-      "integrity": "sha512-6wZjsvYeBhyZQYNrGoR5yPMYbMBNEnanDrqmsqS1mzDm1cOTu12shvl2j4QHNS36UaTE0USIJawCH9C8oW34Zw==",
+    "@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==",
+      "dev": true,
       "requires": {
-        "@emotion/serialize": "^0.11.15",
-        "@emotion/utils": "0.11.3",
-        "babel-plugin-emotion": "^10.0.27"
+        "@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.3"
+      },
+      "dependencies": {
+        "escape-string-regexp": {
+          "version": "4.0.0",
+          "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+          "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+          "dev": true
+        }
       }
     },
     "@emotion/hash": {
@@ -12098,48 +12059,64 @@
       "integrity": "sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow=="
     },
     "@emotion/memoize": {
-      "version": "0.7.4",
-      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
-      "integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw=="
+      "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.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.4.0.tgz",
+      "integrity": "sha512-4XklWsl9BdtatLoJpSjusXhpKv9YVteYKh9hPKP1Sxl+mswEFoUe0WtmtWjxEjkA51DQ2QRMCNOvKcSlCQ7ivg==",
+      "requires": {
+        "@babel/runtime": "^7.13.10",
+        "@emotion/cache": "^11.4.0",
+        "@emotion/serialize": "^1.0.2",
+        "@emotion/sheet": "^1.0.1",
+        "@emotion/utils": "^1.0.0",
+        "@emotion/weak-memoize": "^0.2.5",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "dependencies": {
+        "@emotion/cache": {
+          "version": "11.4.0",
+          "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.4.0.tgz",
+          "integrity": "sha512-Zx70bjE7LErRO9OaZrhf22Qye1y4F7iDl+ITjet0J+i+B88PrAOBkKvaAWhxsZf72tDLajwCgfCjJ2dvH77C3g==",
+          "requires": {
+            "@emotion/memoize": "^0.7.4",
+            "@emotion/sheet": "^1.0.0",
+            "@emotion/utils": "^1.0.0",
+            "@emotion/weak-memoize": "^0.2.5",
+            "stylis": "^4.0.3"
+          }
+        },
+        "@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/serialize": {
-      "version": "0.11.16",
-      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-0.11.16.tgz",
-      "integrity": "sha512-G3J4o8by0VRrO+PFeSc3js2myYNOXVJ3Ya+RGVxnshRYgsvErfAOglKAiy1Eo1vhzxqtUvjCyS5gtewzkmvSSg==",
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.0.2.tgz",
+      "integrity": "sha512-95MgNJ9+/ajxU7QIAruiOAdYNjxZX7G2mhgrtDWswA21VviYIRP1R5QilZ/bDY42xiKsaktP4egJb3QdYQZi1A==",
       "requires": {
-        "@emotion/hash": "0.8.0",
-        "@emotion/memoize": "0.7.4",
-        "@emotion/unitless": "0.7.5",
-        "@emotion/utils": "0.11.3",
-        "csstype": "^2.5.7"
-      },
-      "dependencies": {
-        "csstype": {
-          "version": "2.6.13",
-          "resolved": "https://registry.npmjs.org/csstype/-/csstype-2.6.13.tgz",
-          "integrity": "sha512-ul26pfSQTZW8dcOnD2iiJssfXw0gdNVX9IJDH/X3K5DGPfj+fUYe3kB+swUY6BF3oZDxaID3AJt+9/ojSAE05A=="
-        }
+        "@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": "0.9.4",
-      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-0.9.4.tgz",
-      "integrity": "sha512-zM9PFmgVSqBw4zL101Q0HrBVTGmpAxFZH/pYx/cjJT5advXguvcgjHFTCaIO3enL/xr89vK2bh0Mfyj9aa0ANA=="
-    },
-    "@emotion/stylis": {
-      "version": "0.8.5",
-      "resolved": "https://registry.npmjs.org/@emotion/stylis/-/stylis-0.8.5.tgz",
-      "integrity": "sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ=="
-    },
     "@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": "0.11.3",
-      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-0.11.3.tgz",
-      "integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw=="
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.0.0.tgz",
+      "integrity": "sha512-mQC2b3XLDs6QCW+pDQDiyO/EdGZYOygE8s5N5rrzjSI4M3IejPE/JPndCBwRT9z982aqQNi6beWs1UeayrQxxA=="
     },
     "@emotion/weak-memoize": {
       "version": "0.2.5",
@@ -13297,23 +13274,6 @@
         "object.assign": "^4.1.0"
       }
     },
-    "babel-plugin-emotion": {
-      "version": "10.0.33",
-      "resolved": "https://registry.npmjs.org/babel-plugin-emotion/-/babel-plugin-emotion-10.0.33.tgz",
-      "integrity": "sha512-bxZbTTGz0AJQDHm8k6Rf3RQJ8tX2scsfsRyKVgAbiUPUNIRtlK+7JxP+TAd1kRLABFxe0CFm2VdK4ePkoA9FxQ==",
-      "requires": {
-        "@babel/helper-module-imports": "^7.0.0",
-        "@emotion/hash": "0.8.0",
-        "@emotion/memoize": "0.7.4",
-        "@emotion/serialize": "^0.11.16",
-        "babel-plugin-macros": "^2.0.0",
-        "babel-plugin-syntax-jsx": "^6.18.0",
-        "convert-source-map": "^1.5.0",
-        "escape-string-regexp": "^1.0.5",
-        "find-root": "^1.1.0",
-        "source-map": "^0.5.7"
-      }
-    },
     "babel-plugin-macros": {
       "version": "2.8.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz",
@@ -13391,11 +13351,6 @@
         "babel-plugin-macros": "^2.0.0"
       }
     },
-    "babel-plugin-syntax-jsx": {
-      "version": "6.18.0",
-      "resolved": "https://registry.npmjs.org/babel-plugin-syntax-jsx/-/babel-plugin-syntax-jsx-6.18.0.tgz",
-      "integrity": "sha1-CvMqmm4Tyno/1QaeYtew9Y0NiUY="
-    },
     "babel-plugin-syntax-trailing-function-commas": {
       "version": "7.0.0-beta.0",
       "resolved": "https://registry.npmjs.org/babel-plugin-syntax-trailing-function-commas/-/babel-plugin-syntax-trailing-function-commas-7.0.0-beta.0.tgz",
@@ -15474,7 +15429,8 @@
     "find-root": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/find-root/-/find-root-1.1.0.tgz",
-      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng=="
+      "integrity": "sha512-NKfW6bec6GfKc0SGx1e07QZY9PE99u0Bft/0rzSD5k3sO/vwkVUpDUKVm5Gpp5Ue3YfShPFTX2070tDs5kB9Ng==",
+      "dev": true
     },
     "find-up": {
       "version": "3.0.0",
@@ -18536,6 +18492,11 @@
         "inline-style-parser": "0.1.1"
       }
     },
+    "stylis": {
+      "version": "4.0.10",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.0.10.tgz",
+      "integrity": "sha512-m3k+dk7QeJw660eIKRRn3xPF6uuvHs/FFzjX3HQ5ove0qYsiygoAhwn5a3IYKaZPo5LrYD0rfVmtv1gNY1uYwg=="
+    },
     "supports-color": {
       "version": "5.5.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 00dc396da..b2549c9bf 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -28,8 +28,7 @@
     "@babel/preset-env": "^7.14.2",
     "@babel/preset-react": "^7.13.13",
     "@babel/preset-typescript": "^7.13.0",
-    "@emotion/babel-preset-css-prop": "^10.2.1",
-    "@emotion/core": "^10.1.1",
+    "@emotion/react": "^11.4.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.35",
     "@fortawesome/free-regular-svg-icons": "^5.15.3",
     "@fortawesome/free-solid-svg-icons": "^5.15.3",
@@ -60,6 +59,7 @@
     "yaml-loader": "^0.6.0"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.3.0",
     "@types/react": "^17.0.6",
     "@types/react-dom": "^17.0.5",
     "@types/react-relay": "^11.0.1",
diff --git a/frontend/src/GlobalStyle.tsx b/frontend/src/GlobalStyle.tsx
index 025a0a4c0..c7d80bb39 100644
--- a/frontend/src/GlobalStyle.tsx
+++ b/frontend/src/GlobalStyle.tsx
@@ -1,4 +1,4 @@
-import { css, Global } from "@emotion/core";
+import { css, Global } from "@emotion/react";
 import React from "react";
 
 
diff --git a/frontend/src/ui/Player.tsx b/frontend/src/ui/Player.tsx
index d942837b7..61ea7161e 100644
--- a/frontend/src/ui/Player.tsx
+++ b/frontend/src/ui/Player.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import Plyr from "plyr-react";
 import plyrCss from "plyr/dist/plyr.css";
-import { Global } from "@emotion/core";
+import { Global } from "@emotion/react";
 
 import CONFIG from "../config";
 import { MAIN_PADDING } from "../layout/Root";
diff --git a/frontend/tsconfig.json b/frontend/tsconfig.json
index 4a0094851..51847075a 100644
--- a/frontend/tsconfig.json
+++ b/frontend/tsconfig.json
@@ -1,6 +1,7 @@
 {
   "compilerOptions": {
-    "jsx": "preserve",
+    "jsx": "react-jsx",
+    "jsxImportSource": "@emotion/react",
     "noEmit": true,
     "incremental": true,