diff --git a/.babelrc b/.babelrc
new file mode 100644
index 0000000..a98beab
--- /dev/null
+++ b/.babelrc
@@ -0,0 +1,15 @@
+// https://emotion.sh/docs/css-prop##babel-preset
+{
+  "presets": [
+    [
+      "next/babel",
+      {
+        "preset-react": {
+          "runtime": "automatic",
+          "importSource": "@emotion/react"
+        }
+      }
+    ]
+  ],
+  "plugins": [["@emotion/babel-plugin"]]
+}
diff --git a/package.json b/package.json
index 91604fe..7993b45 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "react-dom": "17.0.2"
   },
   "devDependencies": {
+    "@emotion/babel-plugin": "^11.7.2",
     "@types/node": "^16.11.45",
     "@types/react": "17.0.41",
     "@typescript-eslint/eslint-plugin": "^5.15.0",
diff --git a/src/types/emotion.ts b/src/types/emotion.ts
new file mode 100644
index 0000000..0af2376
--- /dev/null
+++ b/src/types/emotion.ts
@@ -0,0 +1,6 @@
+import { Theme as MuiTheme } from "@mui/material/styles";
+
+declare module "@emotion/react" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends MuiTheme {}
+}
diff --git a/tsconfig.json b/tsconfig.json
index e626cf5..8ecff74 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -17,7 +17,8 @@
     "baseUrl": ".",
     "paths": {
       "@/*": ["src/*"]
-    }
+    },
+    "jsxImportSource": "@emotion/react"
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules"]
diff --git a/yarn.lock b/yarn.lock
index 739599e..f6af6e2 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -65,7 +65,7 @@
     "@babel/helper-validator-identifier" "^7.16.7"
     to-fast-properties "^2.0.0"
 
-"@emotion/babel-plugin@^11.7.1":
+"@emotion/babel-plugin@^11.7.1", "@emotion/babel-plugin@^11.7.2":
   version "11.7.2"
   resolved "https://registry.yarnpkg.com/@emotion/babel-plugin/-/babel-plugin-11.7.2.tgz#fec75f38a6ab5b304b0601c74e2a5e77c95e5fa0"
   integrity sha512-6mGSCWi9UzXut/ZAN6lGFu33wGR3SJisNl3c0tvlmb8XChH1b2SUvxvnOh7hvLpqyRdHHU9AiazV3Cwbk5SXKQ==