diff --git a/.eslintrc.js b/.eslintrc.js
deleted file mode 100644
index a035fe09..00000000
--- a/.eslintrc.js
+++ /dev/null
@@ -1,16 +0,0 @@
-module.exports = {
-  extends: ["prettier"],
-  plugins: ["chakra-ui"],
-  parser: "@typescript-eslint/parser",
-  parserOptions: {
-    project: true,
-    tsconfigRootDir: __dirname,
-  },
-  rules: {
-    "sort-imports": "error",
-    "chakra-ui/props-order": "error",
-    "chakra-ui/props-shorthand": "error",
-    "chakra-ui/require-specific-component": "error",
-  },
-  ignorePatterns: [".eslintrc.js"],
-};
diff --git a/bun.lockb b/bun.lockb
index 9a8447e6..f11055d5 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/eslint.config.mjs b/eslint.config.mjs
new file mode 100644
index 00000000..a0125eef
--- /dev/null
+++ b/eslint.config.mjs
@@ -0,0 +1,29 @@
+import globals from "globals";
+import pluginJs from "@eslint/js";
+import pluginReact from "eslint-plugin-react";
+import tseslint from "typescript-eslint";
+
+export default [
+  {
+    files: ["**/*.{js,mjs,cjs,ts,jsx,tsx}"],
+  },
+  {
+    ignores: ["build/", "public/", ".cache/", "styled-system/"],
+  },
+  { languageOptions: { globals: { ...globals.browser, ...globals.node } } },
+  pluginJs.configs.recommended,
+  ...tseslint.configs.recommended,
+  pluginReact.configs.flat.recommended,
+  {
+    settings: {
+      react: {
+        version: "detect",
+      },
+      formComponents: ["Form"],
+      linkComponents: [
+        { name: "Link", linkAttribute: "to" },
+        { name: "NavLink", linkAttribute: "to" },
+      ],
+    },
+  },
+];
diff --git a/package.json b/package.json
index 2d321b7f..e212431f 100644
--- a/package.json
+++ b/package.json
@@ -45,16 +45,19 @@
     "yaml": "^2.3.4"
   },
   "devDependencies": {
+    "@eslint/js": "^9.9.1",
     "@types/markdown-it": "^14.0.0",
     "@types/node": "^22.0.0",
     "@types/react": "^18.2.21",
     "@types/react-test-renderer": "^18.0.7",
     "@typescript-eslint/parser": "^8.0.0",
     "@vitejs/plugin-react": "^4.2.1",
-    "eslint": "8.57.0",
     "eslint-config-next": "14.2.7",
+    "eslint": "^9.9.1",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-chakra-ui": "^0.11.0",
+    "eslint-plugin-react": "^7.35.0",
+    "globals": "^15.9.0",
     "husky": "^9.0.11",
     "jsdom": "^25.0.0",
     "lint-staged": "^15.0.0",
@@ -70,6 +73,7 @@
     "stylelint-config-sass-guidelines": "^12.0.0",
     "ts-node": "^10.9.2",
     "typescript": "5.5.4",
+    "typescript-eslint": "^8.3.0",
     "vitest": "^2.0.0"
   },
   "packageManager": "bun@1.0.35"
diff --git a/src/components/date.test.tsx b/src/components/date.test.tsx
index e3e717ac..7951e9cb 100644
--- a/src/components/date.test.tsx
+++ b/src/components/date.test.tsx
@@ -1,5 +1,6 @@
 import { expect, it } from "vitest";
 import { DateString } from "./date";
+import React from "react";
 import { render } from "../../utils/react-test";
 
 it("renders correctly", () => {
diff --git a/src/components/footer.test.tsx b/src/components/footer.test.tsx
index 701bcd04..d9139a95 100644
--- a/src/components/footer.test.tsx
+++ b/src/components/footer.test.tsx
@@ -1,5 +1,6 @@
 import { expect, it } from "vitest";
 import { Footer } from "./footer";
+import React from "react";
 import { render } from "../../utils/react-test";
 
 it("renders correctly", () => {
diff --git a/src/components/header.test.tsx b/src/components/header.test.tsx
index 5ef6f16d..7254fb99 100644
--- a/src/components/header.test.tsx
+++ b/src/components/header.test.tsx
@@ -1,5 +1,6 @@
 import { expect, it } from "vitest";
 import { Header } from "./header";
+import React from "react";
 import { render } from "../../utils/react-test";
 
 it("renders correctly", () => {
diff --git a/src/components/navigation.test.tsx b/src/components/navigation.test.tsx
index 89a59d42..5143f3f7 100644
--- a/src/components/navigation.test.tsx
+++ b/src/components/navigation.test.tsx
@@ -1,5 +1,6 @@
 import { expect, it } from "vitest";
 import { Navigation } from "./navigation";
+import React from "react";
 import { render } from "../../utils/react-test";
 
 it("renders correctly", () => {
diff --git a/src/components/prev-next-link.test.tsx b/src/components/prev-next-link.test.tsx
index 60d4c990..97e339a7 100644
--- a/src/components/prev-next-link.test.tsx
+++ b/src/components/prev-next-link.test.tsx
@@ -1,5 +1,6 @@
 import { expect, it } from "vitest";
 import { PrevNextLink } from "./prev-next-link";
+import React from "react";
 import { render } from "../../utils/react-test";
 
 it("renders both prev and next correctly", () => {
diff --git a/src/components/questions.test.tsx b/src/components/questions.test.tsx
index dcf1790d..1f5dc46a 100644
--- a/src/components/questions.test.tsx
+++ b/src/components/questions.test.tsx
@@ -1,5 +1,6 @@
 import { expect, it } from "vitest";
 import { Questions } from "./questions";
+import React from "react";
 import { render } from "../../utils/react-test";
 
 it("renders correctly", () => {
diff --git a/src/components/sns-link.test.tsx b/src/components/sns-link.test.tsx
index ec8b9491..68650d4e 100644
--- a/src/components/sns-link.test.tsx
+++ b/src/components/sns-link.test.tsx
@@ -1,4 +1,5 @@
 import { expect, it } from "vitest";
+import React from "react";
 import { SNSLink } from "./sns-link";
 import { render } from "../../utils/react-test";
 
diff --git a/src/components/title.test.tsx b/src/components/title.test.tsx
index 7a759cba..7305ef57 100644
--- a/src/components/title.test.tsx
+++ b/src/components/title.test.tsx
@@ -1,5 +1,6 @@
 import { Subtitle, Title } from "./title";
 import { expect, it } from "vitest";
+import React from "react";
 import { render } from "../../utils/react-test";
 
 it("renders title correctly", () => {