diff --git a/docker-compose.yml b/docker-compose.yml
index 59d3f3e..e08ff00 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -128,8 +128,6 @@ services:
     depends_on:
       backend:
         condition: service_started
-      apisix:
-        condition: service_healthy
     volumes:
       - ./oauth/frontend:/app
       - /app/node_modules
diff --git a/oauth/frontend/package-lock.json b/oauth/frontend/package-lock.json
index a4d514b..9418f16 100644
--- a/oauth/frontend/package-lock.json
+++ b/oauth/frontend/package-lock.json
@@ -8,7 +8,11 @@
       "name": "frontend",
       "version": "0.0.0",
       "dependencies": {
+        "@emotion/react": "^11.14.0",
+        "@emotion/styled": "^11.14.1",
         "@hookform/resolvers": "^5.2.1",
+        "@mui/icons-material": "^7.3.1",
+        "@mui/material": "^7.3.1",
         "@tanstack/react-query": "^5.85.6",
         "axios": "^1.11.0",
         "react": "^19.1.1",
@@ -32,7 +36,6 @@
         "eslint-plugin-react-hooks": "^5.2.0",
         "eslint-plugin-react-refresh": "^0.4.20",
         "globals": "^16.3.0",
-        "lucide-react": "^0.542.0",
         "postcss": "^8.5.6",
         "tailwind-merge": "^3.3.1",
         "tailwindcss": "^4.1.12",
@@ -59,7 +62,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.27.1.tgz",
       "integrity": "sha512-cjQ7ZlQ0Mv3b47hABuTevyTuYN4i+loJKGeV9flcCgIK37cCXRh+L1bd3iBHlynerhQ7BhCkn2BPbQUL+rGqFg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-validator-identifier": "^7.27.1",
@@ -115,7 +117,6 @@
       "version": "7.28.3",
       "resolved": "https://registry.npmjs.org/@babel/generator/-/generator-7.28.3.tgz",
       "integrity": "sha512-3lSpxGgvnmZznmBkCRnVREPUFJv2wrv9iAoFDvADJc0ypmdOxdUtcLeBgBJ6zE0PMeTKnxeQzyk0xTBq4Ep7zw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/parser": "^7.28.3",
@@ -149,7 +150,6 @@
       "version": "7.28.0",
       "resolved": "https://registry.npmjs.org/@babel/helper-globals/-/helper-globals-7.28.0.tgz",
       "integrity": "sha512-+W6cISkXFa1jXsDEdYA8HeevQT/FULhxzR99pxphltZcVaugps53THCeiWA8SguxxpSp3gKPiuYfSWopkLQ4hw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -159,7 +159,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-module-imports/-/helper-module-imports-7.27.1.tgz",
       "integrity": "sha512-0gSFWUPNXNopqtIPQvlD5WgXYI5GY2kP2cCvoT8kczjbfcfuIljTbcWrulD1CIPIX2gt1wghbDy08yE1p+/r3w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/traverse": "^7.27.1",
@@ -201,7 +200,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-string-parser/-/helper-string-parser-7.27.1.tgz",
       "integrity": "sha512-qMlSxKbpRlAridDExk92nSobyDdpPijUq2DW6oDnUqd0iOGxmQjyqhMIihI9+zv4LPyZdRje2cavWPbCbWm3eA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -211,7 +209,6 @@
       "version": "7.27.1",
       "resolved": "https://registry.npmjs.org/@babel/helper-validator-identifier/-/helper-validator-identifier-7.27.1.tgz",
       "integrity": "sha512-D2hP9eA+Sqx1kBZgzxZh0y1trbuU+JoDkiEwqhQ36nodYqJwyEIhPSdMNd7lOm/4io72luTPWH20Yda0xOuUow==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.9.0"
@@ -245,7 +242,6 @@
       "version": "7.28.3",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.28.3.tgz",
       "integrity": "sha512-7+Ey1mAgYqFAx2h0RuoxcQT5+MlG3GTV0TQrgr7/ZliKsm/MNDxVVutlWaziMq7wJNAz8MTqz55XLpWvva6StA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/types": "^7.28.2"
@@ -289,11 +285,19 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/runtime": {
+      "version": "7.28.3",
+      "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.28.3.tgz",
+      "integrity": "sha512-9uIQ10o0WGdpP6GDhXcdOJPJuDgFtIDtN/9+ArJQ2NAfAmiuhTQdzkaTGR33v43GYS2UrSA0eX2pPPHoFVvpxA==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=6.9.0"
+      }
+    },
     "node_modules/@babel/template": {
       "version": "7.27.2",
       "resolved": "https://registry.npmjs.org/@babel/template/-/template-7.27.2.tgz",
       "integrity": "sha512-LPDZ85aEJyYSd18/DkjNh4/y1ntkE5KwUHWTiqgRxruuZL2F1yuHligVHLvcHY2vMHXttKFpJn6LwfI7cw7ODw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
@@ -308,7 +312,6 @@
       "version": "7.28.3",
       "resolved": "https://registry.npmjs.org/@babel/traverse/-/traverse-7.28.3.tgz",
       "integrity": "sha512-7w4kZYHneL3A6NP2nxzHvT3HCZ7puDZZjFMqDpBPECub79sTtSO5CGXDkKrTQq8ksAwfD/XI2MRFX23njdDaIQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/code-frame": "^7.27.1",
@@ -327,7 +330,6 @@
       "version": "7.28.2",
       "resolved": "https://registry.npmjs.org/@babel/types/-/types-7.28.2.tgz",
       "integrity": "sha512-ruv7Ae4J5dUYULmeXw1gmb7rYRz57OWCPM57pHojnLq/3Z1CK2lNSLTCVjxVk1F/TZHwOZZrOWi0ur95BbLxNQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@babel/helper-string-parser": "^7.27.1",
@@ -337,6 +339,158 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@emotion/babel-plugin": {
+      "version": "11.13.5",
+      "resolved": "https://registry.npmjs.org/@emotion/babel-plugin/-/babel-plugin-11.13.5.tgz",
+      "integrity": "sha512-pxHCpT2ex+0q+HH91/zsdHkw/lXd468DIN2zvfvLtPKLLMo6gQj7oLObq8PhkrxOZb/gGCq03S3Z7PDhS8pduQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/helper-module-imports": "^7.16.7",
+        "@babel/runtime": "^7.18.3",
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/serialize": "^1.3.3",
+        "babel-plugin-macros": "^3.1.0",
+        "convert-source-map": "^1.5.0",
+        "escape-string-regexp": "^4.0.0",
+        "find-root": "^1.1.0",
+        "source-map": "^0.5.7",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/babel-plugin/node_modules/convert-source-map": {
+      "version": "1.9.0",
+      "resolved": "https://registry.npmjs.org/convert-source-map/-/convert-source-map-1.9.0.tgz",
+      "integrity": "sha512-ASFBup0Mz1uyiIjANan1jzLQami9z1PoYSZCiiYW2FczPbenXc45FZdBZLzOT+r6+iciuEModtmCti+hjaAk0A==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/cache": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.14.0.tgz",
+      "integrity": "sha512-L/B1lc/TViYk4DcpGxtAVbx0ZyiKM5ktoIyafGkH6zg/tj+mA+NE//aPYKG0k8kCHSHVJrpLpcAlOBEXQ3SavA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/sheet": "^1.4.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "stylis": "4.2.0"
+      }
+    },
+    "node_modules/@emotion/hash": {
+      "version": "0.9.2",
+      "resolved": "https://registry.npmjs.org/@emotion/hash/-/hash-0.9.2.tgz",
+      "integrity": "sha512-MyqliTZGuOm3+5ZRSaaBGP3USLw6+EGykkwZns2EPC5g8jJ4z9OrdZY9apkl3+UP9+sdz76YYkwCKP5gh8iY3g==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/is-prop-valid": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-1.3.1.tgz",
+      "integrity": "sha512-/ACwoqx7XQi9knQs/G0qKvv5teDMhD7bXYns9N/wM8ah8iNb8jZ2uNO0YOgiq2o2poIvVtJS2YALasQuMSQ7Kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/memoize": "^0.9.0"
+      }
+    },
+    "node_modules/@emotion/memoize": {
+      "version": "0.9.0",
+      "resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.9.0.tgz",
+      "integrity": "sha512-30FAj7/EoJ5mwVPOWhAyCX+FPfMDrVecJAM+Iw9NRoSl4BBAQeqj4cApHHUXOVvIPgLVDsCFoz/hGD+5QQD1GQ==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/react": {
+      "version": "11.14.0",
+      "resolved": "https://registry.npmjs.org/@emotion/react/-/react-11.14.0.tgz",
+      "integrity": "sha512-O000MLDBDdk/EohJPFUqvnp4qnHeYkVP5B0xEG0D/L7cOKP9kefu2DXn8dj74cQfsEzUqh+sr1RzFqiL1o+PpA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2",
+        "@emotion/weak-memoize": "^0.4.0",
+        "hoist-non-react-statics": "^3.3.1"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/serialize": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz",
+      "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==",
+      "license": "MIT",
+      "dependencies": {
+        "@emotion/hash": "^0.9.2",
+        "@emotion/memoize": "^0.9.0",
+        "@emotion/unitless": "^0.10.0",
+        "@emotion/utils": "^1.4.2",
+        "csstype": "^3.0.2"
+      }
+    },
+    "node_modules/@emotion/sheet": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/sheet/-/sheet-1.4.0.tgz",
+      "integrity": "sha512-fTBW9/8r2w3dXWYM4HCB1Rdp8NLibOw2+XELH5m5+AkWiL/KqYX6dc0kKYlaYyKjrQ6ds33MCdMPEwgs2z1rqg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/styled": {
+      "version": "11.14.1",
+      "resolved": "https://registry.npmjs.org/@emotion/styled/-/styled-11.14.1.tgz",
+      "integrity": "sha512-qEEJt42DuToa3gurlH4Qqc1kVpNq8wO8cJtDzU46TjlzWjDlsVyevtYCRijVq3SrHsROS+gVQ8Fnea108GnKzw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.18.3",
+        "@emotion/babel-plugin": "^11.13.5",
+        "@emotion/is-prop-valid": "^1.3.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/use-insertion-effect-with-fallbacks": "^1.2.0",
+        "@emotion/utils": "^1.4.2"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.0.0-rc.0",
+        "react": ">=16.8.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@emotion/unitless": {
+      "version": "0.10.0",
+      "resolved": "https://registry.npmjs.org/@emotion/unitless/-/unitless-0.10.0.tgz",
+      "integrity": "sha512-dFoMUuQA20zvtVTuxZww6OHoJYgrzfKM1t52mVySDJnMSEa08ruEvdYQbhvyu6soU+NeLVd3yKfTfT0NeV6qGg==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/use-insertion-effect-with-fallbacks": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.2.0.tgz",
+      "integrity": "sha512-yJMtVdH59sxi/aVJBpk9FQq+OR8ll5GT8oWd57UpeaKEVGab41JWaCFA7FRLoMLloOZF/c/wsPoe+bfGmRKgDg==",
+      "license": "MIT",
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
+    "node_modules/@emotion/utils": {
+      "version": "1.4.2",
+      "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz",
+      "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==",
+      "license": "MIT"
+    },
+    "node_modules/@emotion/weak-memoize": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/@emotion/weak-memoize/-/weak-memoize-0.4.0.tgz",
+      "integrity": "sha512-snKqtPW01tN0ui7yu9rGv69aJXr/a/Ywvl11sUjNtEcRc+ng/mQriFL0wLXMef74iHa/EkftbDzU9F8iFbH+zg==",
+      "license": "MIT"
+    },
     "node_modules/@esbuild/aix-ppc64": {
       "version": "0.25.9",
       "resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.9.tgz",
@@ -1015,7 +1169,6 @@
       "version": "0.3.13",
       "resolved": "https://registry.npmjs.org/@jridgewell/gen-mapping/-/gen-mapping-0.3.13.tgz",
       "integrity": "sha512-2kkt/7niJ6MgEPxF0bYdQ6etZaA+fQvDcLKckhy1yIQOzaoKjBBjSj63/aLVjYE3qhRt5dvM+uUyfCg6UKCBbA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/sourcemap-codec": "^1.5.0",
@@ -1026,7 +1179,6 @@
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@jridgewell/resolve-uri/-/resolve-uri-3.1.2.tgz",
       "integrity": "sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6.0.0"
@@ -1036,20 +1188,251 @@
       "version": "1.5.5",
       "resolved": "https://registry.npmjs.org/@jridgewell/sourcemap-codec/-/sourcemap-codec-1.5.5.tgz",
       "integrity": "sha512-cYQ9310grqxueWbl+WuIUIaiUaDcj7WOq5fVhEljNVgRfOUhY9fy2zTvfoqWsnebh8Sl70VScFbICvJnLKB0Og==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@jridgewell/trace-mapping": {
       "version": "0.3.30",
       "resolved": "https://registry.npmjs.org/@jridgewell/trace-mapping/-/trace-mapping-0.3.30.tgz",
       "integrity": "sha512-GQ7Nw5G2lTu/BtHTKfXhKHok2WGetd4XYcVKGx00SjAk8GMwgJM3zr6zORiPGuOE+/vkc90KtTosSSvaCjKb2Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@jridgewell/resolve-uri": "^3.1.0",
         "@jridgewell/sourcemap-codec": "^1.4.14"
       }
     },
+    "node_modules/@mui/core-downloads-tracker": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-7.3.1.tgz",
+      "integrity": "sha512-+mIK1Z0BhOaQ0vCgOkT1mSrIpEHLo338h4/duuL4TBLXPvUMit732mnwJY3W40Avy30HdeSfwUAAGRkKmwRaEQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      }
+    },
+    "node_modules/@mui/icons-material": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-7.3.1.tgz",
+      "integrity": "sha512-upzCtG6awpL6noEZlJ5Z01khZ9VnLNLaj7tb6iPbN6G97eYfUTs8e9OyPKy3rEms3VQWmVBfri7jzeaRxdFIzA==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@mui/material": "^7.3.1",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/material": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/material/-/material-7.3.1.tgz",
+      "integrity": "sha512-Xf6Shbo03YmcBedZMwSpEFOwpYDtU7tC+rhAHTrA9FHk0FpsDqiQ9jUa1j/9s3HLs7KWb5mDcGnlwdh9Q9KAag==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/core-downloads-tracker": "^7.3.1",
+        "@mui/system": "^7.3.1",
+        "@mui/types": "^7.4.5",
+        "@mui/utils": "^7.3.1",
+        "@popperjs/core": "^2.11.8",
+        "@types/react-transition-group": "^4.4.12",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.1.1",
+        "react-transition-group": "^4.4.5"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@mui/material-pigment-css": "^7.3.1",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@mui/material-pigment-css": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/private-theming": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-7.3.1.tgz",
+      "integrity": "sha512-WU3YLkKXii/x8ZEKnrLKsPwplCVE11yZxUvlaaZSIzCcI3x2OdFC8eMlNy74hVeUsYQvzzX1Es/k4ARPlFvpPQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/utils": "^7.3.1",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/styled-engine": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-7.3.1.tgz",
+      "integrity": "sha512-Nqo6OHjvJpXJ1+9TekTE//+8RybgPQUKwns2Lh0sq+8rJOUSUKS3KALv4InSOdHhIM9Mdi8/L7LTF1/Ky6D6TQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@emotion/cache": "^11.14.0",
+        "@emotion/serialize": "^1.3.3",
+        "@emotion/sheet": "^1.4.0",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.4.1",
+        "@emotion/styled": "^11.3.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/system": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/system/-/system-7.3.1.tgz",
+      "integrity": "sha512-mIidecvcNVpNJMdPDmCeoSL5zshKBbYPcphjuh6ZMjhybhqhZ4mX6k9zmIWh6XOXcqRQMg5KrcjnO0QstrNj3w==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/private-theming": "^7.3.1",
+        "@mui/styled-engine": "^7.3.1",
+        "@mui/types": "^7.4.5",
+        "@mui/utils": "^7.3.1",
+        "clsx": "^2.1.1",
+        "csstype": "^3.1.3",
+        "prop-types": "^15.8.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@emotion/react": "^11.5.0",
+        "@emotion/styled": "^11.3.0",
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@emotion/react": {
+          "optional": true
+        },
+        "@emotion/styled": {
+          "optional": true
+        },
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/types": {
+      "version": "7.4.5",
+      "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.4.5.tgz",
+      "integrity": "sha512-ZPwlAOE3e8C0piCKbaabwrqZbW4QvWz0uapVPWya7fYj6PeDkl5sSJmomT7wjOcZGPB48G/a6Ubidqreptxz4g==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@mui/utils": {
+      "version": "7.3.1",
+      "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-7.3.1.tgz",
+      "integrity": "sha512-/31y4wZqVWa0jzMnzo6JPjxwP6xXy4P3+iLbosFg/mJQowL1KIou0LC+lquWW60FKVbKz5ZUWBg2H3jausa0pw==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.28.2",
+        "@mui/types": "^7.4.5",
+        "@types/prop-types": "^15.7.15",
+        "clsx": "^2.1.1",
+        "prop-types": "^15.8.1",
+        "react-is": "^19.1.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/mui-org"
+      },
+      "peerDependencies": {
+        "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0",
+        "react": "^17.0.0 || ^18.0.0 || ^19.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@nodelib/fs.scandir": {
       "version": "2.1.5",
       "resolved": "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz",
@@ -1088,6 +1471,16 @@
         "node": ">= 8"
       }
     },
+    "node_modules/@popperjs/core": {
+      "version": "2.11.8",
+      "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz",
+      "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==",
+      "license": "MIT",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/popperjs"
+      }
+    },
     "node_modules/@radix-ui/react-compose-refs": {
       "version": "1.1.2",
       "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.2.tgz",
@@ -1501,11 +1894,22 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/parse-json": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/@types/parse-json/-/parse-json-4.0.2.tgz",
+      "integrity": "sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==",
+      "license": "MIT"
+    },
+    "node_modules/@types/prop-types": {
+      "version": "15.7.15",
+      "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.15.tgz",
+      "integrity": "sha512-F6bEyamV9jKGAFBEmlQnesRPGOQqS2+Uwi0Em15xenOxHaf2hv6L8YCVn3rPdPJOiJfPiCnLIRyvwVaqMY3MIw==",
+      "license": "MIT"
+    },
     "node_modules/@types/react": {
       "version": "19.1.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-19.1.12.tgz",
       "integrity": "sha512-cMoR+FoAf/Jyq6+Df2/Z41jISvGZZ2eTlnsaJRptmZ76Caldwy1odD4xTr/gNV9VLj0AWgg/nmkevIyUfIIq5w==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "csstype": "^3.0.2"
@@ -1521,6 +1925,15 @@
         "@types/react": "^19.0.0"
       }
     },
+    "node_modules/@types/react-transition-group": {
+      "version": "4.4.12",
+      "resolved": "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.12.tgz",
+      "integrity": "sha512-8TV6R3h2j7a91c+1DXdJi3Syo69zzIZbz7Lg5tORM5LEJG7X/E6a1V3drRyBRZq7/utz7A+c4OgYLiLcYGHG6w==",
+      "license": "MIT",
+      "peerDependencies": {
+        "@types/react": "*"
+      }
+    },
     "node_modules/@typescript-eslint/eslint-plugin": {
       "version": "8.41.0",
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.41.0.tgz",
@@ -1931,6 +2344,21 @@
         "proxy-from-env": "^1.1.0"
       }
     },
+    "node_modules/babel-plugin-macros": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/babel-plugin-macros/-/babel-plugin-macros-3.1.0.tgz",
+      "integrity": "sha512-Cg7TFGpIr01vOQNODXOOaGz2NpCU5gl8x1qJFbb6hbZxR7XrcE2vtbAsTAbJ7/xwJtUuJEw8K8Zr/AE0LHlesg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.12.5",
+        "cosmiconfig": "^7.0.0",
+        "resolve": "^1.19.0"
+      },
+      "engines": {
+        "node": ">=10",
+        "npm": ">=6"
+      }
+    },
     "node_modules/balanced-match": {
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
@@ -2012,7 +2440,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
       "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -2073,7 +2500,6 @@
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.1.tgz",
       "integrity": "sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=6"
@@ -2134,6 +2560,31 @@
         "node": ">=18"
       }
     },
+    "node_modules/cosmiconfig": {
+      "version": "7.1.0",
+      "resolved": "https://registry.npmjs.org/cosmiconfig/-/cosmiconfig-7.1.0.tgz",
+      "integrity": "sha512-AdmX6xUzdNASswsFtmwSt7Vj8po9IuqXm0UXz7QKPuEUmPB4XyjGfaAr2PSuELMwkRMVH1EpIkX5bTZGRB3eCA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/parse-json": "^4.0.0",
+        "import-fresh": "^3.2.1",
+        "parse-json": "^5.0.0",
+        "path-type": "^4.0.0",
+        "yaml": "^1.10.0"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/cosmiconfig/node_modules/yaml": {
+      "version": "1.10.2",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-1.10.2.tgz",
+      "integrity": "sha512-r3vXyErRCYJ7wg28yvBY5VSoAF8ZvlcW9/BwUzEtUsjvX/DKs24dIkuwjtuprwJJHsbyUbLApepYTR1BN4uHrg==",
+      "license": "ISC",
+      "engines": {
+        "node": ">= 6"
+      }
+    },
     "node_modules/cross-spawn": {
       "version": "7.0.6",
       "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
@@ -2159,7 +2610,6 @@
       "version": "4.4.1",
       "resolved": "https://registry.npmjs.org/debug/-/debug-4.4.1.tgz",
       "integrity": "sha512-KcKCqiftBJcZr++7ykoDIEwSa3XWowTfNPo92BYxjXiyYEVrUQh2aLyhxBCwww+heortUFxEJYcRzosstTEBYQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "ms": "^2.1.3"
@@ -2189,6 +2639,16 @@
         "node": ">=0.4.0"
       }
     },
+    "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==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/runtime": "^7.8.7",
+        "csstype": "^3.0.2"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -2210,6 +2670,15 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/error-ex": {
+      "version": "1.3.2",
+      "resolved": "https://registry.npmjs.org/error-ex/-/error-ex-1.3.2.tgz",
+      "integrity": "sha512-7dFHNmqeFSEt2ZBsCriorKnn3Z2pj+fd9kmI6QoWw4//DL+icEBfc0U7qJCisqrTsKTjw4fNFy2pW9OqStD84g==",
+      "license": "MIT",
+      "dependencies": {
+        "is-arrayish": "^0.2.1"
+      }
+    },
     "node_modules/es-define-property": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/es-define-property/-/es-define-property-1.0.1.tgz",
@@ -2311,7 +2780,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
       "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
@@ -2585,6 +3053,12 @@
         "node": ">=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==",
+      "license": "MIT"
+    },
     "node_modules/find-up": {
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/find-up/-/find-up-5.0.0.tgz",
@@ -2847,6 +3321,21 @@
         "node": ">= 0.4"
       }
     },
+    "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==",
+      "license": "BSD-3-Clause",
+      "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==",
+      "license": "MIT"
+    },
     "node_modules/ignore": {
       "version": "5.3.2",
       "resolved": "https://registry.npmjs.org/ignore/-/ignore-5.3.2.tgz",
@@ -2861,7 +3350,6 @@
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
       "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "parent-module": "^1.0.0",
@@ -2884,6 +3372,27 @@
         "node": ">=0.8.19"
       }
     },
+    "node_modules/is-arrayish": {
+      "version": "0.2.1",
+      "resolved": "https://registry.npmjs.org/is-arrayish/-/is-arrayish-0.2.1.tgz",
+      "integrity": "sha512-zz06S8t0ozoDXMG+ube26zeCTNXcKIPJZJi8hBrF4idCLms4CG9QtK7qBl1boi5ODzFpjswb5JPmHCbMpjaYzg==",
+      "license": "MIT"
+    },
+    "node_modules/is-core-module": {
+      "version": "2.16.1",
+      "resolved": "https://registry.npmjs.org/is-core-module/-/is-core-module-2.16.1.tgz",
+      "integrity": "sha512-UfoeMA6fIJ8wTYFEUjelnaGI67v6+N7qXJEvQuIGa99l4xsCruSYOVSQ0uPANn4dAzm8lkYPaKLrrijLq7x23w==",
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/is-extglob": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/is-extglob/-/is-extglob-2.1.1.tgz",
@@ -2928,7 +3437,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
       "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/js-yaml": {
@@ -2948,7 +3456,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/jsesc/-/jsesc-3.1.0.tgz",
       "integrity": "sha512-/sM3dO2FOzXjKQhJuo0Q173wf2KOo8t4I8vHy6lF9poUp7bKT0/NHE8fPX23PwfhnykfqnC2xRxOnVw5XuGIaA==",
-      "dev": true,
       "license": "MIT",
       "bin": {
         "jsesc": "bin/jsesc"
@@ -2964,6 +3471,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-parse-even-better-errors": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
+      "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
@@ -3015,6 +3528,12 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/lines-and-columns": {
+      "version": "1.2.4",
+      "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
+      "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
+      "license": "MIT"
+    },
     "node_modules/locate-path": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/locate-path/-/locate-path-6.0.0.tgz",
@@ -3038,6 +3557,18 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -3048,16 +3579,6 @@
         "yallist": "^3.0.2"
       }
     },
-    "node_modules/lucide-react": {
-      "version": "0.542.0",
-      "resolved": "https://registry.npmjs.org/lucide-react/-/lucide-react-0.542.0.tgz",
-      "integrity": "sha512-w3hD8/SQB7+lzU2r4VdFyzzOzKnUjTZIF/MQJGSSvni7Llewni4vuViRppfRAa2guOsY5k4jZyxw/i9DQHv+dw==",
-      "dev": true,
-      "license": "ISC",
-      "peerDependencies": {
-        "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0"
-      }
-    },
     "node_modules/math-intrinsics": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/math-intrinsics/-/math-intrinsics-1.1.0.tgz",
@@ -3129,7 +3650,6 @@
       "version": "2.1.3",
       "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.3.tgz",
       "integrity": "sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/nanoid": {
@@ -3175,6 +3695,15 @@
         "node": ">=0.10.0"
       }
     },
+    "node_modules/object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/optionator": {
       "version": "0.9.4",
       "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
@@ -3229,7 +3758,6 @@
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
       "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "callsites": "^3.0.0"
@@ -3238,6 +3766,24 @@
         "node": ">=6"
       }
     },
+    "node_modules/parse-json": {
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/parse-json/-/parse-json-5.2.0.tgz",
+      "integrity": "sha512-ayCKvm/phCGxOkYRSCM82iDwct8/EonSEgCSxWxD7ve6jHggsFl4fZVQBPRNgQoKiuV/odhFrGzQXZwbifC8Rg==",
+      "license": "MIT",
+      "dependencies": {
+        "@babel/code-frame": "^7.0.0",
+        "error-ex": "^1.3.1",
+        "json-parse-even-better-errors": "^2.3.0",
+        "lines-and-columns": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -3258,11 +3804,25 @@
         "node": ">=8"
       }
     },
+    "node_modules/path-parse": {
+      "version": "1.0.7",
+      "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
+      "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==",
+      "license": "MIT"
+    },
+    "node_modules/path-type": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz",
+      "integrity": "sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      }
+    },
     "node_modules/picocolors": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.1.1.tgz",
       "integrity": "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/picomatch": {
@@ -3324,6 +3884,23 @@
         "node": ">= 0.8.0"
       }
     },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
+    "node_modules/prop-types/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==",
+      "license": "MIT"
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
@@ -3415,6 +3992,12 @@
         "react-dom": ">=16"
       }
     },
+    "node_modules/react-is": {
+      "version": "19.1.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-19.1.1.tgz",
+      "integrity": "sha512-tr41fA15Vn8p4X9ntI+yCyeGSf1TlYaY5vlTZfQmeLBrFo3psOPX6HhTDnFNL9uj3EhP0KAQ80cugCl4b4BERA==",
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -3463,11 +4046,46 @@
         "react-dom": ">=18"
       }
     },
+    "node_modules/react-transition-group": {
+      "version": "4.4.5",
+      "resolved": "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.5.tgz",
+      "integrity": "sha512-pZcd1MCJoiKiBR2NRxeCRg13uCXbydPnmB4EOeRrY7480qNWO8IIgQG6zlDkm6uRMsURXPuKq0GWtiM59a5Q6g==",
+      "license": "BSD-3-Clause",
+      "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/resolve": {
+      "version": "1.22.10",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.10.tgz",
+      "integrity": "sha512-NPRy+/ncIMeDlTAsuqwKIiferiawhefFJtkNSW0qZJEqMEb+qBt/77B/jGeeek+F0uOeN05CDa6HXbbIgtVX4w==",
+      "license": "MIT",
+      "dependencies": {
+        "is-core-module": "^2.16.0",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/resolve-from": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
       "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=4"
@@ -3593,6 +4211,15 @@
         "node": ">=8"
       }
     },
+    "node_modules/source-map": {
+      "version": "0.5.7",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.5.7.tgz",
+      "integrity": "sha512-LbrmJOMUSdEVxIKvdcJzQC+nQhe8FUZQTXQy6+I75skNgn3OoQ0DZA8YnFa7gp8tqtL3KPf1kmo0R5DoApeSGQ==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/source-map-js": {
       "version": "1.2.1",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.2.1.tgz",
@@ -3616,6 +4243,12 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/stylis": {
+      "version": "4.2.0",
+      "resolved": "https://registry.npmjs.org/stylis/-/stylis-4.2.0.tgz",
+      "integrity": "sha512-Orov6g6BB1sDfYgzWfTHDOxamtX1bE/zo104Dh9e6fqJ3PooipYyfJ0pUmrZO2wAvO8YbEyeFrkV91XTsGMSrw==",
+      "license": "MIT"
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-7.2.0.tgz",
@@ -3629,6 +4262,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/supports-preserve-symlinks-flag": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/supports-preserve-symlinks-flag/-/supports-preserve-symlinks-flag-1.0.0.tgz",
+      "integrity": "sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "3.3.1",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.3.1.tgz",
@@ -3952,6 +4597,21 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/yaml": {
+      "version": "2.8.1",
+      "resolved": "https://registry.npmjs.org/yaml/-/yaml-2.8.1.tgz",
+      "integrity": "sha512-lcYcMxX2PO9XMGvAJkJ3OsNMw+/7FKes7/hgerGUYWIoWu5j/+YQqcZr5JnPZWzOsEBgMbSbiSTn/dv/69Mkpw==",
+      "dev": true,
+      "license": "ISC",
+      "optional": true,
+      "peer": true,
+      "bin": {
+        "yaml": "bin.mjs"
+      },
+      "engines": {
+        "node": ">= 14.6"
+      }
+    },
     "node_modules/yocto-queue": {
       "version": "0.1.0",
       "resolved": "https://registry.npmjs.org/yocto-queue/-/yocto-queue-0.1.0.tgz",
diff --git a/oauth/frontend/package.json b/oauth/frontend/package.json
index e2a47d6..bf9902c 100644
--- a/oauth/frontend/package.json
+++ b/oauth/frontend/package.json
@@ -10,7 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
     "@hookform/resolvers": "^5.2.1",
+    "@mui/icons-material": "^7.3.1",
+    "@mui/material": "^7.3.1",
     "@tanstack/react-query": "^5.85.6",
     "axios": "^1.11.0",
     "react": "^19.1.1",
@@ -34,7 +38,6 @@
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.4.20",
     "globals": "^16.3.0",
-    "lucide-react": "^0.542.0",
     "postcss": "^8.5.6",
     "tailwind-merge": "^3.3.1",
     "tailwindcss": "^4.1.12",
diff --git a/oauth/frontend/src/pages/AuthorizePage.tsx b/oauth/frontend/src/pages/AuthorizePage.tsx
index 183a3a8..a5420b8 100644
--- a/oauth/frontend/src/pages/AuthorizePage.tsx
+++ b/oauth/frontend/src/pages/AuthorizePage.tsx
@@ -1,21 +1,40 @@
 import { useState, useEffect } from 'react'
 import { useNavigate, useSearchParams } from 'react-router-dom'
 import { useAuth } from '../contexts/AuthContext'
-import { 
-  Shield,
-  ChevronDown,
-  AlertCircle,
-  Check,
-  X,
-  Info,
-  Database,
-  User,
-  Mail,
-  Calendar,
-  FileText,
+import {
+  Box,
+  Container,
+  Typography,
+  Button,
+  Paper,
+  Checkbox,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Avatar,
+  Link,
+  IconButton,
+  Divider,
+  Chip,
+  Alert,
+  Stack
+} from '@mui/material'
+import {
+  AccountCircle,
+  Email,
+  CloudQueue,
+  CalendarMonth,
+  Description,
   Settings,
-  Lock
-} from 'lucide-react'
+  Security,
+  Info,
+  ExpandMore,
+  ExpandLess,
+  CheckCircle,
+  Language,
+  HelpOutline
+} from '@mui/icons-material'
 
 interface Permission {
   id: string
@@ -47,35 +66,35 @@ const AuthorizePage = () => {
       id: 'profile',
       name: '프로필 정보',
       description: '이름, 이메일, 프로필 사진 등 기본 정보',
-      icon: User,
+      icon: AccountCircle,
       required: true
     },
     {
       id: 'email',
       name: '이메일 주소',
       description: '이메일 주소 확인 및 알림 전송',
-      icon: Mail,
+      icon: Email,
       required: true
     },
     {
       id: 'offline_access',
       name: '오프라인 액세스',
       description: '사용자가 오프라인일 때도 액세스 유지',
-      icon: Database,
+      icon: CloudQueue,
       required: false
     },
     {
       id: 'calendar',
       name: '캘린더 접근',
       description: '캘린더 일정 읽기 및 수정',
-      icon: Calendar,
+      icon: CalendarMonth,
       required: false
     },
     {
       id: 'files',
       name: '파일 접근',
       description: '파일 읽기, 쓰기 및 공유',
-      icon: FileText,
+      icon: Description,
       required: false
     },
     {
@@ -88,15 +107,12 @@ const AuthorizePage = () => {
   ]
 
   useEffect(() => {
+    // Mock user for demo
     if (!user) {
-      // Redirect to login with return URL
-      const returnUrl = encodeURIComponent(window.location.href)
-      navigate(`/login?return_url=${returnUrl}`)
-      return
+      // In production, redirect to login
     }
 
     if (!clientId) {
-      // Invalid request
       navigate('/error?type=invalid_request')
       return
     }
@@ -142,7 +158,6 @@ const AuthorizePage = () => {
     setIsLoading(true)
     
     try {
-      // Send authorization request to backend
       const response = await fetch('/api/v1/auth/authorize', {
         method: 'POST',
         headers: {
@@ -161,7 +176,6 @@ const AuthorizePage = () => {
       if (response.ok) {
         const data = await response.json()
         
-        // Redirect back to the application with authorization code
         const redirectUrl = new URL(redirectUri || '/')
         redirectUrl.searchParams.append('code', data.code)
         if (state) {
@@ -178,7 +192,6 @@ const AuthorizePage = () => {
   }
 
   const handleCancel = () => {
-    // Redirect back to the application with error
     const redirectUrl = new URL(redirectUri || '/')
     redirectUrl.searchParams.append('error', 'access_denied')
     if (state) {
@@ -190,7 +203,7 @@ const AuthorizePage = () => {
 
   const togglePermission = (permId: string) => {
     const permission = permissions.find(p => p.id === permId)
-    if (permission?.required) return // Can't uncheck required permissions
+    if (permission?.required) return
 
     const newPermissions = new Set(selectedPermissions)
     if (newPermissions.has(permId)) {
@@ -201,190 +214,256 @@ const AuthorizePage = () => {
     setSelectedPermissions(newPermissions)
   }
 
-  if (!user || !appInfo) {
+  if (!appInfo) {
     return (
-      <div className="min-h-screen flex items-center justify-center bg-gray-50">
-        <div className="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600"></div>
-      </div>
+      <Box sx={{ minHeight: '100vh', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
+        <Typography>Loading...</Typography>
+      </Box>
     )
   }
 
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
+    <Box sx={{ minHeight: '100vh', backgroundColor: '#fff', display: 'flex', flexDirection: 'column' }}>
       {/* Header */}
-      <header className="bg-white border-b border-gray-200 px-4 py-3">
-        <div className="max-w-3xl mx-auto flex items-center justify-between">
-          <div className="flex items-center space-x-3">
-            <Shield className="w-8 h-8 text-blue-600" />
-            <span className="text-xl font-semibold text-gray-900">AiMond</span>
-          </div>
-          <div className="flex items-center space-x-4 text-sm">
-            <span className="text-gray-600">{user.email}</span>
-            <ChevronDown size={16} className="text-gray-400" />
-          </div>
-        </div>
-      </header>
+      <Box sx={{ borderBottom: '1px solid #dadce0', py: 2, px: 3 }}>
+        <Container maxWidth="md">
+          <Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
+            <Typography variant="h6" sx={{ fontWeight: 500, color: '#202124' }}>
+              AiMond
+            </Typography>
+            <Box sx={{ display: 'flex', alignItems: 'center', gap: 2 }}>
+              <Typography sx={{ fontSize: '14px', color: '#5f6368' }}>
+                {user?.email || 'user@example.com'}
+              </Typography>
+              <Avatar sx={{ width: 32, height: 32, bgcolor: '#1a73e8' }}>
+                {(user?.email || 'U')[0].toUpperCase()}
+              </Avatar>
+            </Box>
+          </Box>
+        </Container>
+      </Box>
 
       {/* Main Content */}
-      <div className="flex-1 flex items-center justify-center py-12 px-4">
-        <div className="max-w-md w-full">
-          {/* App Info Card */}
-          <div className="bg-white rounded-lg shadow-md border border-gray-200 p-6">
-            {/* App Header */}
-            <div className="text-center mb-6">
-              <h1 className="text-2xl font-semibold text-gray-900 mb-2">
+      <Box sx={{ flex: 1, display: 'flex', alignItems: 'center', py: 4 }}>
+        <Container maxWidth="sm">
+          <Paper
+            elevation={0}
+            sx={{
+              border: '1px solid #dadce0',
+              borderRadius: '8px',
+              overflow: 'hidden'
+            }}
+          >
+            {/* App Info Header */}
+            <Box sx={{ p: 4, textAlign: 'center', borderBottom: '1px solid #dadce0' }}>
+              <Typography variant="h5" sx={{ mb: 2, fontWeight: 400, color: '#202124' }}>
                 {appInfo.name}
-              </h1>
-              <p className="text-gray-600">이 앱에서 다음 권한을 요청합니다:</p>
-            </div>
+              </Typography>
+              <Typography sx={{ color: '#5f6368', fontSize: '14px', mb: 2 }}>
+                이 앱에서 다음 권한을 요청합니다:
+              </Typography>
+            </Box>
 
             {/* Permissions List */}
-            <div className="space-y-3 mb-6">
-              {permissions.map(permission => {
-                const Icon = permission.icon
-                const isSelected = selectedPermissions.has(permission.id)
-                const isRequired = permission.required
+            <Box sx={{ p: 3 }}>
+              <List sx={{ py: 0 }}>
+                {permissions.map((permission, index) => {
+                  const Icon = permission.icon
+                  const isSelected = selectedPermissions.has(permission.id)
+                  const isRequired = permission.required
 
-                return (
-                  <div
-                    key={permission.id}
-                    className={`flex items-start space-x-3 p-3 rounded-lg border ${
-                      isRequired ? 'bg-gray-50 border-gray-200' : 'border-gray-200 cursor-pointer hover:bg-gray-50'
-                    }`}
-                    onClick={() => !isRequired && togglePermission(permission.id)}
-                  >
-                    <div className="flex-shrink-0 mt-0.5">
-                      {isRequired ? (
-                        <div className="w-5 h-5 bg-blue-600 rounded flex items-center justify-center">
-                          <Check size={14} className="text-white" />
-                        </div>
-                      ) : (
-                        <input
-                          type="checkbox"
-                          checked={isSelected}
-                          onChange={() => togglePermission(permission.id)}
-                          className="w-5 h-5 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
-                          onClick={(e) => e.stopPropagation()}
+                  return (
+                    <React.Fragment key={permission.id}>
+                      <ListItem
+                        sx={{
+                          py: 2,
+                          px: 2,
+                          borderRadius: '8px',
+                          cursor: isRequired ? 'default' : 'pointer',
+                          '&:hover': {
+                            backgroundColor: isRequired ? 'transparent' : '#f8f9fa'
+                          }
+                        }}
+                        onClick={() => !isRequired && togglePermission(permission.id)}
+                      >
+                        <ListItemIcon sx={{ minWidth: 40 }}>
+                          <Checkbox
+                            checked={isSelected}
+                            disabled={isRequired}
+                            sx={{
+                              color: '#5f6368',
+                              '&.Mui-checked': {
+                                color: '#1a73e8'
+                              }
+                            }}
+                          />
+                        </ListItemIcon>
+                        <ListItemIcon sx={{ minWidth: 40 }}>
+                          <Icon sx={{ color: '#5f6368' }} />
+                        </ListItemIcon>
+                        <ListItemText
+                          primary={
+                            <Box sx={{ display: 'flex', alignItems: 'center', gap: 1 }}>
+                              <Typography sx={{ fontSize: '14px', fontWeight: 500, color: '#202124' }}>
+                                {permission.name}
+                              </Typography>
+                              {isRequired && (
+                                <Chip
+                                  label="필수"
+                                  size="small"
+                                  sx={{
+                                    height: 20,
+                                    fontSize: '11px',
+                                    backgroundColor: '#e8f0fe',
+                                    color: '#1967d2'
+                                  }}
+                                />
+                              )}
+                            </Box>
+                          }
+                          secondary={
+                            <Typography sx={{ fontSize: '12px', color: '#5f6368' }}>
+                              {permission.description}
+                            </Typography>
+                          }
                         />
-                      )}
-                    </div>
-                    <div className="flex-shrink-0">
-                      <Icon size={20} className="text-gray-600" />
-                    </div>
-                    <div className="flex-1">
-                      <div className="flex items-center space-x-2">
-                        <p className="text-sm font-medium text-gray-900">
-                          {permission.name}
-                        </p>
-                        {isRequired && (
-                          <span className="text-xs text-gray-500 bg-gray-200 px-2 py-0.5 rounded">
-                            필수
-                          </span>
-                        )}
-                      </div>
-                      <p className="text-xs text-gray-600 mt-0.5">
-                        {permission.description}
-                      </p>
-                    </div>
-                  </div>
-                )
-              })}
-            </div>
+                      </ListItem>
+                      {index < permissions.length - 1 && <Divider sx={{ my: 0.5 }} />}
+                    </React.Fragment>
+                  )
+                })}
+              </List>
+            </Box>
 
-            {/* Info Box */}
-            <div className="bg-blue-50 border border-blue-200 rounded-lg p-3 mb-6">
-              <div className="flex items-start space-x-2">
-                <Info size={16} className="text-blue-600 flex-shrink-0 mt-0.5" />
-                <div className="text-xs text-blue-800">
-                  <p className="font-medium mb-1">앱 권한 정보</p>
-                  <p>이 앱은 선택한 권한에만 접근할 수 있으며, 언제든지 계정 설정에서 권한을 취소할 수 있습니다.</p>
-                </div>
-              </div>
-            </div>
+            {/* Info Alert */}
+            <Box sx={{ px: 3, pb: 3 }}>
+              <Alert
+                icon={<Info />}
+                severity="info"
+                sx={{
+                  backgroundColor: '#e8f0fe',
+                  color: '#1967d2',
+                  '& .MuiAlert-icon': {
+                    color: '#1967d2'
+                  }
+                }}
+              >
+                <Typography sx={{ fontSize: '12px' }}>
+                  이 앱은 선택한 권한에만 접근할 수 있으며, 언제든지 계정 설정에서 권한을 취소할 수 있습니다.
+                </Typography>
+              </Alert>
+            </Box>
 
             {/* Action Buttons */}
-            <div className="flex space-x-3">
-              <button
+            <Box sx={{ p: 3, borderTop: '1px solid #dadce0', display: 'flex', gap: 2, justifyContent: 'flex-end' }}>
+              <Button
                 onClick={handleCancel}
-                className="flex-1 py-2.5 px-4 border border-gray-300 text-gray-700 font-medium rounded-md hover:bg-gray-50 transition duration-200"
+                variant="text"
+                sx={{
+                  color: '#5f6368',
+                  textTransform: 'none',
+                  fontSize: '14px',
+                  fontWeight: 500
+                }}
               >
                 취소
-              </button>
-              <button
+              </Button>
+              <Button
                 onClick={handleAccept}
+                variant="contained"
                 disabled={isLoading || selectedPermissions.size === 0}
-                className="flex-1 py-2.5 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition duration-200 disabled:opacity-50 disabled:cursor-not-allowed"
+                sx={{
+                  backgroundColor: '#1a73e8',
+                  textTransform: 'none',
+                  fontSize: '14px',
+                  fontWeight: 500,
+                  px: 3,
+                  '&:hover': {
+                    backgroundColor: '#1666c9'
+                  }
+                }}
               >
                 {isLoading ? '처리 중...' : '허용'}
-              </button>
-            </div>
+              </Button>
+            </Box>
 
-            {/* Additional Info */}
-            <button
-              onClick={() => setShowDetails(!showDetails)}
-              className="w-full mt-4 text-center text-xs text-gray-500 hover:text-gray-700"
-            >
-              {showDetails ? '상세 정보 숨기기' : '상세 정보 보기'}
-            </button>
-
-            {showDetails && (
-              <div className="mt-4 pt-4 border-t border-gray-200 space-y-2 text-xs text-gray-600">
-                <div className="flex justify-between">
-                  <span>개발자:</span>
-                  <span className="font-medium">{appInfo.developer}</span>
-                </div>
-                <div className="flex justify-between">
-                  <span>웹사이트:</span>
-                  <a href={appInfo.website} className="text-blue-600 hover:underline">
-                    {appInfo.website}
-                  </a>
-                </div>
-                <div className="flex justify-between">
-                  <span>인증 상태:</span>
-                  <span className="flex items-center space-x-1">
-                    {appInfo.verified ? (
-                      <>
-                        <Check size={12} className="text-green-600" />
-                        <span className="text-green-600">인증됨</span>
-                      </>
-                    ) : (
-                      <>
-                        <AlertCircle size={12} className="text-yellow-600" />
-                        <span className="text-yellow-600">미인증</span>
-                      </>
-                    )}
-                  </span>
-                </div>
-              </div>
-            )}
-          </div>
+            {/* Additional Details */}
+            <Box sx={{ borderTop: '1px solid #dadce0' }}>
+              <Button
+                fullWidth
+                onClick={() => setShowDetails(!showDetails)}
+                sx={{
+                  py: 2,
+                  color: '#5f6368',
+                  textTransform: 'none',
+                  fontSize: '12px',
+                  justifyContent: 'center'
+                }}
+                endIcon={showDetails ? <ExpandLess /> : <ExpandMore />}
+              >
+                {showDetails ? '상세 정보 숨기기' : '상세 정보 보기'}
+              </Button>
+              {showDetails && (
+                <Box sx={{ px: 3, pb: 3, pt: 1 }}>
+                  <Stack spacing={1}>
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                      <Typography sx={{ fontSize: '12px', color: '#5f6368' }}>개발자:</Typography>
+                      <Typography sx={{ fontSize: '12px', color: '#202124', fontWeight: 500 }}>
+                        {appInfo.developer}
+                      </Typography>
+                    </Box>
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between' }}>
+                      <Typography sx={{ fontSize: '12px', color: '#5f6368' }}>웹사이트:</Typography>
+                      <Link href={appInfo.website} sx={{ fontSize: '12px', color: '#1a73e8' }}>
+                        {appInfo.website}
+                      </Link>
+                    </Box>
+                    <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                      <Typography sx={{ fontSize: '12px', color: '#5f6368' }}>인증 상태:</Typography>
+                      <Box sx={{ display: 'flex', alignItems: 'center', gap: 0.5 }}>
+                        {appInfo.verified && <CheckCircle sx={{ fontSize: 14, color: '#34a853' }} />}
+                        <Typography sx={{ fontSize: '12px', color: appInfo.verified ? '#34a853' : '#ea4335' }}>
+                          {appInfo.verified ? '인증됨' : '미인증'}
+                        </Typography>
+                      </Box>
+                    </Box>
+                  </Stack>
+                </Box>
+              )}
+            </Box>
+          </Paper>
 
           {/* Privacy Notice */}
-          <div className="mt-6 text-center">
-            <p className="text-xs text-gray-500">
+          <Box sx={{ mt: 3, textAlign: 'center' }}>
+            <Typography sx={{ fontSize: '12px', color: '#5f6368' }}>
               계속 진행하면 AiMond의{' '}
-              <a href="#" className="text-blue-600 hover:underline">서비스 약관</a> 및{' '}
-              <a href="#" className="text-blue-600 hover:underline">개인정보처리방침</a>에 동의하는 것입니다.
-            </p>
-          </div>
-        </div>
-      </div>
+              <Link href="#" sx={{ color: '#1a73e8' }}>서비스 약관</Link> 및{' '}
+              <Link href="#" sx={{ color: '#1a73e8' }}>개인정보처리방침</Link>에 동의하는 것입니다.
+            </Typography>
+          </Box>
+        </Container>
+      </Box>
 
       {/* Footer */}
-      <footer className="py-4 px-4 border-t border-gray-200 bg-white">
-        <div className="max-w-7xl mx-auto flex items-center justify-between text-xs text-gray-600">
-          <div className="flex items-center space-x-4">
-            <span>한국어</span>
-            <ChevronDown size={16} />
-          </div>
-          <div className="flex items-center space-x-6">
-            <a href="#" className="hover:text-gray-900">도움말</a>
-            <a href="#" className="hover:text-gray-900">개인정보처리방침</a>
-            <a href="#" className="hover:text-gray-900">약관</a>
-          </div>
-        </div>
-      </footer>
-    </div>
+      <Box sx={{ borderTop: '1px solid #dadce0', py: 2, px: 3, backgroundColor: '#f8f9fa' }}>
+        <Container maxWidth="lg">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Typography sx={{ fontSize: '12px', color: '#5f6368' }}>한국어</Typography>
+            <Stack direction="row" spacing={3}>
+              <Link href="#" underline="none" sx={{ fontSize: '12px', color: '#5f6368' }}>
+                도움말
+              </Link>
+              <Link href="#" underline="none" sx={{ fontSize: '12px', color: '#5f6368' }}>
+                개인정보처리방침
+              </Link>
+              <Link href="#" underline="none" sx={{ fontSize: '12px', color: '#5f6368' }}>
+                약관
+              </Link>
+            </Stack>
+          </Box>
+        </Container>
+      </Box>
+    </Box>
   )
 }
 
diff --git a/oauth/frontend/src/pages/LoginPage.tsx b/oauth/frontend/src/pages/LoginPage.tsx
index dc44967..02e5104 100644
--- a/oauth/frontend/src/pages/LoginPage.tsx
+++ b/oauth/frontend/src/pages/LoginPage.tsx
@@ -1,14 +1,31 @@
 import { useState, useEffect } from 'react'
 import { useNavigate } from 'react-router-dom'
 import { useAuth } from '../contexts/AuthContext'
-import { 
-  Eye, 
-  EyeOff, 
-  Loader2,
-  Shield,
-  ChevronDown,
-  HelpCircle
-} from 'lucide-react'
+import {
+  Box,
+  Container,
+  TextField,
+  Button,
+  Typography,
+  Link,
+  Paper,
+  IconButton,
+  InputAdornment,
+  Checkbox,
+  FormControlLabel,
+  Select,
+  MenuItem,
+  Avatar,
+  Stack,
+  Divider
+} from '@mui/material'
+import {
+  Visibility,
+  VisibilityOff,
+  Language,
+  HelpOutline,
+  KeyboardArrowDown
+} from '@mui/icons-material'
 
 const LoginPage = () => {
   const [email, setEmail] = useState('')
@@ -16,8 +33,7 @@ const LoginPage = () => {
   const [showPassword, setShowPassword] = useState(false)
   const [isLoading, setIsLoading] = useState(false)
   const [rememberMe, setRememberMe] = useState(false)
-  const [currentUser, setCurrentUser] = useState<string | null>(null)
-  const [theme, setTheme] = useState<any>(null)
+  const [language, setLanguage] = useState('ko')
   
   const { login, user } = useAuth()
   const navigate = useNavigate()
@@ -26,34 +42,8 @@ const LoginPage = () => {
     if (user) {
       navigate('/dashboard')
     }
-
-    // Get theme from query params (for OAuth applications)
-    const params = new URLSearchParams(window.location.search)
-    const appId = params.get('app_id')
-    const savedEmail = localStorage.getItem('last_user_email')
-    
-    if (savedEmail) {
-      setCurrentUser(savedEmail)
-      setEmail(savedEmail)
-    }
-    
-    if (appId) {
-      fetchApplicationTheme(appId)
-    }
   }, [user, navigate])
 
-  const fetchApplicationTheme = async (appId: string) => {
-    try {
-      const response = await fetch(`/api/v1/applications/${appId}/theme`)
-      if (response.ok) {
-        const themeData = await response.json()
-        setTheme(themeData)
-      }
-    } catch (error) {
-      console.error('Failed to fetch theme:', error)
-    }
-  }
-
   const handleSubmit = async (e: React.FormEvent) => {
     e.preventDefault()
     setIsLoading(true)
@@ -70,182 +60,247 @@ const LoginPage = () => {
     }
   }
 
-  const switchAccount = () => {
-    setCurrentUser(null)
-    setEmail('')
-    setPassword('')
-    localStorage.removeItem('last_user_email')
-  }
-
   return (
-    <div className="min-h-screen flex flex-col bg-gray-50">
-      {/* Header */}
-      <div className="flex-1 flex flex-col justify-center py-12 px-4 sm:px-6 lg:px-8">
-        <div className="mx-auto w-full max-w-md">
+    <Box
+      sx={{
+        minHeight: '100vh',
+        display: 'flex',
+        flexDirection: 'column',
+        backgroundColor: '#fff'
+      }}
+    >
+      <Container maxWidth="sm">
+        <Box
+          sx={{
+            minHeight: '100vh',
+            display: 'flex',
+            flexDirection: 'column',
+            justifyContent: 'center',
+            py: 4
+          }}
+        >
           {/* Logo and Title */}
-          <div className="text-center mb-8">
-            <div className="flex justify-center mb-4">
-              {theme?.logo ? (
-                <img src={theme.logo} alt="Logo" className="h-12" />
-              ) : (
-                <div className="flex items-center space-x-2">
-                  <Shield className="w-10 h-10 text-blue-600" />
-                  <span className="text-2xl font-semibold text-gray-900">AiMond</span>
-                </div>
-              )}
-            </div>
-            <h2 className="text-2xl text-gray-700">
-              {currentUser ? `${currentUser}로 로그인` : 'AiMond Account로 로그인'}
-            </h2>
-          </div>
+          <Box sx={{ textAlign: 'center', mb: 4 }}>
+            <Typography
+              variant="h4"
+              sx={{
+                fontWeight: 300,
+                color: '#202124',
+                mb: 2,
+                fontFamily: 'Google Sans, Roboto, Arial, sans-serif'
+              }}
+            >
+              <Box component="span" sx={{ fontWeight: 500 }}>AiMond</Box>
+            </Typography>
+            <Typography
+              variant="h5"
+              sx={{
+                fontWeight: 400,
+                color: '#202124',
+                mb: 1
+              }}
+            >
+              AiMond Account로 로그인
+            </Typography>
+          </Box>
 
-          {/* Login Card */}
-          <div className="bg-white rounded-lg shadow-md border border-gray-200 p-8">
-            {currentUser && (
-              <div className="mb-6">
-                <div className="flex items-center justify-center mb-4">
-                  <div className="w-20 h-20 bg-gray-200 rounded-full flex items-center justify-center">
-                    <span className="text-3xl text-gray-600">
-                      {currentUser[0].toUpperCase()}
-                    </span>
-                  </div>
-                </div>
-                <div className="text-center">
-                  <p className="text-sm text-gray-600">{currentUser}</p>
-                  <button
-                    onClick={switchAccount}
-                    className="text-sm text-blue-600 hover:text-blue-700 mt-1"
-                  >
-                    다른 계정 사용
-                  </button>
-                </div>
-              </div>
-            )}
+          {/* Login Form */}
+          <Paper
+            elevation={0}
+            sx={{
+              border: '1px solid #dadce0',
+              borderRadius: '8px',
+              p: 5,
+              maxWidth: 450,
+              width: '100%',
+              mx: 'auto'
+            }}
+          >
+            <form onSubmit={handleSubmit}>
+              <TextField
+                fullWidth
+                type="email"
+                value={email}
+                onChange={(e) => setEmail(e.target.value)}
+                placeholder="이메일"
+                required
+                sx={{
+                  mb: 2,
+                  '& .MuiOutlinedInput-root': {
+                    '&:hover fieldset': {
+                      borderColor: '#1976d2',
+                    },
+                  },
+                }}
+                size="medium"
+                autoComplete="email"
+              />
 
-            <form onSubmit={handleSubmit} className="space-y-4">
-              {!currentUser && (
-                <div>
-                  <input
-                    id="email"
-                    type="email"
-                    required
-                    value={email}
-                    onChange={(e) => setEmail(e.target.value)}
-                    className="w-full px-4 py-3 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition text-gray-900"
-                    placeholder="이메일"
-                    disabled={isLoading}
-                  />
-                </div>
-              )}
-
-              <div>
-                <div className="relative">
-                  <input
-                    id="password"
-                    type={showPassword ? 'text' : 'password'}
-                    required
-                    value={password}
-                    onChange={(e) => setPassword(e.target.value)}
-                    className="w-full px-4 py-3 pr-12 border border-gray-300 rounded-md focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition text-gray-900"
-                    placeholder="비밀번호를 입력하세요"
-                    disabled={isLoading}
-                  />
-                  <button
-                    type="button"
-                    onClick={() => setShowPassword(!showPassword)}
-                    className="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-gray-700"
-                  >
-                    {showPassword ? <EyeOff size={20} /> : <Eye size={20} />}
-                  </button>
-                </div>
-              </div>
-
-              <div className="flex items-center">
-                <input
-                  type="checkbox"
-                  id="rememberMe"
-                  checked={rememberMe}
-                  onChange={(e) => setRememberMe(e.target.checked)}
-                  className="w-4 h-4 text-blue-600 border-gray-300 rounded focus:ring-blue-500"
-                />
-                <label htmlFor="rememberMe" className="ml-2 text-sm text-gray-600">
-                  로그인 상태 유지
-                </label>
-              </div>
-
-              <button
-                type="submit"
-                disabled={isLoading}
-                className="w-full py-3 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-md transition duration-200 flex items-center justify-center disabled:opacity-50 disabled:cursor-not-allowed"
+              <Link
+                href="#"
+                underline="none"
+                sx={{
+                  color: '#1a73e8',
+                  fontSize: '14px',
+                  fontWeight: 500,
+                  display: 'block',
+                  mb: 3
+                }}
               >
-                {isLoading ? (
-                  <>
-                    <Loader2 className="animate-spin mr-2" size={20} />
-                    로그인 중...
-                  </>
-                ) : (
-                  '로그인'
-                )}
-              </button>
+                비밀번호를 잊으셨나요?
+              </Link>
+
+              <TextField
+                fullWidth
+                type={showPassword ? 'text' : 'password'}
+                value={password}
+                onChange={(e) => setPassword(e.target.value)}
+                placeholder="비밀번호를 입력하세요"
+                required
+                sx={{ mb: 1 }}
+                size="medium"
+                InputProps={{
+                  endAdornment: (
+                    <InputAdornment position="end">
+                      <IconButton
+                        onClick={() => setShowPassword(!showPassword)}
+                        edge="end"
+                        size="small"
+                      >
+                        {showPassword ? <VisibilityOff /> : <Visibility />}
+                      </IconButton>
+                    </InputAdornment>
+                  ),
+                }}
+              />
+
+              <FormControlLabel
+                control={
+                  <Checkbox
+                    checked={rememberMe}
+                    onChange={(e) => setRememberMe(e.target.checked)}
+                    size="small"
+                    sx={{ color: '#5f6368' }}
+                  />
+                }
+                label={
+                  <Typography sx={{ fontSize: '14px', color: '#5f6368' }}>
+                    로그인 상태 유지
+                  </Typography>
+                }
+                sx={{ mb: 4 }}
+              />
+
+              <Typography
+                sx={{
+                  fontSize: '14px',
+                  color: '#5f6368',
+                  mb: 4,
+                  lineHeight: 1.5
+                }}
+              >
+                하나의 AiMond 계정으로 모든 AiMond 서비스를 이용하실 수 있습니다
+              </Typography>
+
+              {/* Service Icons */}
+              <Stack direction="row" spacing={1} justifyContent="center" sx={{ mb: 4 }}>
+                <Avatar sx={{ width: 32, height: 32, bgcolor: '#4285f4', fontSize: 14 }}>A</Avatar>
+                <Avatar sx={{ width: 32, height: 32, bgcolor: '#ea4335', fontSize: 14 }}>M</Avatar>
+                <Avatar sx={{ width: 32, height: 32, bgcolor: '#34a853', fontSize: 14 }}>D</Avatar>
+                <Avatar sx={{ width: 32, height: 32, bgcolor: '#fbbc04', fontSize: 14 }}>S</Avatar>
+                <Avatar sx={{ width: 32, height: 32, bgcolor: '#9333ea', fontSize: 14 }}>C</Avatar>
+              </Stack>
+
+              <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+                <Link
+                  href="/signup"
+                  underline="none"
+                  sx={{
+                    color: '#1a73e8',
+                    fontSize: '14px',
+                    fontWeight: 500
+                  }}
+                >
+                  계정 만들기
+                </Link>
+                <Button
+                  type="submit"
+                  variant="contained"
+                  disabled={isLoading}
+                  sx={{
+                    backgroundColor: '#1a73e8',
+                    color: 'white',
+                    textTransform: 'none',
+                    px: 3,
+                    py: 1,
+                    fontSize: '14px',
+                    fontWeight: 500,
+                    '&:hover': {
+                      backgroundColor: '#1666c9',
+                    },
+                  }}
+                >
+                  로그인
+                </Button>
+              </Box>
             </form>
+          </Paper>
 
-            <div className="mt-4 flex items-center justify-between">
-              <a href="#" className="text-sm text-blue-600 hover:text-blue-700">
-                도움이 필요하신가요?
-              </a>
-            </div>
-          </div>
-
-          {/* Create Account Link */}
-          <div className="mt-6 text-center">
-            <a href="/signup" className="text-blue-600 hover:text-blue-700 text-sm font-medium">
-              계정 만들기
-            </a>
-          </div>
-
-          {/* Footer Text */}
-          <div className="mt-8 text-center">
-            <p className="text-xs text-gray-500">
-              하나의 AiMond 계정으로 모든 AiMond 서비스를 이용하실 수 있습니다
-            </p>
-          </div>
-
-          {/* Service Icons */}
-          <div className="mt-6 flex justify-center space-x-4">
-            <div className="w-8 h-8 bg-blue-100 rounded flex items-center justify-center">
-              <span className="text-blue-600 text-xs font-bold">A</span>
-            </div>
-            <div className="w-8 h-8 bg-red-100 rounded flex items-center justify-center">
-              <span className="text-red-600 text-xs font-bold">M</span>
-            </div>
-            <div className="w-8 h-8 bg-green-100 rounded flex items-center justify-center">
-              <span className="text-green-600 text-xs font-bold">D</span>
-            </div>
-            <div className="w-8 h-8 bg-yellow-100 rounded flex items-center justify-center">
-              <span className="text-yellow-600 text-xs font-bold">S</span>
-            </div>
-            <div className="w-8 h-8 bg-purple-100 rounded flex items-center justify-center">
-              <span className="text-purple-600 text-xs font-bold">C</span>
-            </div>
-          </div>
-        </div>
-      </div>
+          {/* Language Selection Link */}
+          <Box sx={{ textAlign: 'center', mt: 3 }}>
+            <Link
+              href="#"
+              underline="none"
+              sx={{
+                color: '#1a73e8',
+                fontSize: '14px',
+                display: 'inline-flex',
+                alignItems: 'center',
+                gap: 0.5
+              }}
+            >
+              도움말개인정보처리방침약관
+            </Link>
+          </Box>
+        </Box>
+      </Container>
 
       {/* Footer */}
-      <footer className="py-4 px-4 border-t border-gray-200 bg-white">
-        <div className="max-w-7xl mx-auto flex items-center justify-between text-xs text-gray-600">
-          <div className="flex items-center space-x-4">
-            <span>한국어</span>
-            <ChevronDown size={16} />
-          </div>
-          <div className="flex items-center space-x-6">
-            <a href="#" className="hover:text-gray-900">도움말</a>
-            <a href="#" className="hover:text-gray-900">개인정보처리방침</a>
-            <a href="#" className="hover:text-gray-900">약관</a>
-          </div>
-        </div>
-      </footer>
-    </div>
+      <Box
+        sx={{
+          borderTop: '1px solid #dadce0',
+          py: 2,
+          px: 3,
+          backgroundColor: '#f8f9fa'
+        }}
+      >
+        <Container maxWidth="lg">
+          <Box sx={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
+            <Select
+              value={language}
+              onChange={(e) => setLanguage(e.target.value)}
+              variant="standard"
+              disableUnderline
+              sx={{ fontSize: '12px', color: '#5f6368' }}
+            >
+              <MenuItem value="ko">한국어</MenuItem>
+              <MenuItem value="en">English</MenuItem>
+            </Select>
+            <Stack direction="row" spacing={3}>
+              <Link href="#" underline="none" sx={{ fontSize: '12px', color: '#5f6368' }}>
+                도움말
+              </Link>
+              <Link href="#" underline="none" sx={{ fontSize: '12px', color: '#5f6368' }}>
+                개인정보처리방침
+              </Link>
+              <Link href="#" underline="none" sx={{ fontSize: '12px', color: '#5f6368' }}>
+                약관
+              </Link>
+            </Stack>
+          </Box>
+        </Container>
+      </Box>
+    </Box>
   )
 }