diff --git a/.eslintrc.json b/.eslintrc.json
new file mode 100644
index 0000000..f298005
--- /dev/null
+++ b/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": ["react-app", "react-app/jest"]
+}
diff --git a/package-lock.json b/package-lock.json
index 8808421..631eb7d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -37,23 +37,35 @@
         "web-vitals": "^2.1.4"
       },
       "devDependencies": {
+        "@babel/eslint-parser": "^7.28.4",
         "@babel/preset-env": "^7.28.0",
         "@babel/preset-react": "^7.27.1",
         "@rsbuild/core": "^1.5.2",
         "@rsbuild/plugin-react": "^1.3.3",
+        "@rsbuild/plugin-stylus": "^1.2.0",
         "@rsbuild/plugin-svgr": "^1.2.0",
         "@testing-library/dom": "^10.4.0",
         "@testing-library/jest-dom": "^6.6.3",
         "@testing-library/react": "^16.3.0",
         "@testing-library/user-event": "^13.5.0",
         "@types/jest": "^30.0.0",
+        "@typescript-eslint/eslint-plugin": "^8.44.1",
+        "@typescript-eslint/parser": "^8.44.1",
         "babel-jest": "^30.0.4",
         "eslint": "^8.57.1",
+        "eslint-config-prettier": "^10.1.8",
         "eslint-config-react-app": "^7.0.1",
+        "eslint-plugin-import": "^2.32.0",
+        "eslint-plugin-jest": "^29.0.1",
+        "eslint-plugin-promise": "^7.2.1",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^5.2.0",
+        "history": "^5.3.0",
         "i18next-resources-for-ts": "1.4.0",
         "jest": "^30.0.4",
         "jest-environment-jsdom": "^30.0.4",
         "jest-preview": "^0.3.1",
+        "prettier": "^3.6.2",
         "ts-jest": "^29.4.0",
         "typescript": "^4.9.5"
       },
@@ -150,7 +162,9 @@
       "license": "MIT"
     },
     "node_modules/@babel/eslint-parser": {
-      "version": "7.28.0",
+      "version": "7.28.4",
+      "resolved": "https://registry.npmjs.org/@babel/eslint-parser/-/eslint-parser-7.28.4.tgz",
+      "integrity": "sha512-Aa+yDiH87980jR6zvRfFuCR1+dLb00vBydhTL+zI992Rz/wQhSvuxjmOOuJOgO3XmakO6RykRGD2S1mq1AtgHA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -3443,6 +3457,22 @@
         "@rsbuild/core": "1.x"
       }
     },
+    "node_modules/@rsbuild/plugin-stylus": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/@rsbuild/plugin-stylus/-/plugin-stylus-1.2.0.tgz",
+      "integrity": "sha512-OvBrM1I8kRZvr4DExm+OKfKVXRLoVGTadM9Mxc86yJUaVkQi5aa8sFPLOAxuXHc4bpTG6uY3Rh7Wf4lHOFia6A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deepmerge": "^4.3.1",
+        "reduce-configs": "^1.1.1",
+        "stylus": "0.64.0",
+        "stylus-loader": "8.1.2"
+      },
+      "peerDependencies": {
+        "@rsbuild/core": "1.x"
+      }
+    },
     "node_modules/@rsbuild/plugin-svgr": {
       "version": "1.2.1",
       "dev": true,
@@ -4275,40 +4305,191 @@
       "license": "MIT"
     },
     "node_modules/@typescript-eslint/eslint-plugin": {
-      "version": "5.62.0",
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.44.1.tgz",
+      "integrity": "sha512-molgphGqOBT7t4YKCSkbasmu1tb1MgrZ2szGzHbclF7PNmOkSTQVHy+2jXOSnxvR3+Xe1yySHFZoqMpz3TfQsw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@eslint-community/regexpp": "^4.4.0",
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/type-utils": "5.62.0",
-        "@typescript-eslint/utils": "5.62.0",
-        "debug": "^4.3.4",
+        "@eslint-community/regexpp": "^4.10.0",
+        "@typescript-eslint/scope-manager": "8.44.1",
+        "@typescript-eslint/type-utils": "8.44.1",
+        "@typescript-eslint/utils": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1",
         "graphemer": "^1.4.0",
-        "ignore": "^5.2.0",
-        "natural-compare-lite": "^1.4.0",
-        "semver": "^7.3.7",
-        "tsutils": "^3.21.0"
+        "ignore": "^7.0.0",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.1.0"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "@typescript-eslint/parser": "^5.0.0",
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "@typescript-eslint/parser": "^8.44.1",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.44.1.tgz",
+      "integrity": "sha512-NdhWHgmynpSvyhchGLXh+w12OMT308Gm25JoRIyTZqEbApiBiQHD/8xgb6LqCWCFcxFtWwaVdFsLPQI3jvhywg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1"
       },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/types": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.44.1.tgz",
+      "integrity": "sha512-Lk7uj7y9uQUOEguiDIDLYLJOrYHQa7oBiURYVFqIpGxclAFQ78f6VUOM8lI2XEuNOKNB7XuvM2+2cMXAoq4ALQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.44.1.tgz",
+      "integrity": "sha512-qnQJ+mVa7szevdEyvfItbO5Vo+GfZ4/GZWWDRRLjrxYPkhM+6zYB2vRYwCsoJLzqFCdZT4mEqyJoyzkunsZ96A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.44.1",
+        "@typescript-eslint/tsconfig-utils": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/utils": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.44.1.tgz",
+      "integrity": "sha512-DpX5Fp6edTlocMCwA+mHY8Mra+pPjRZ0TfHkXI8QFelIKcbADQz1LUPNtzOFUriBB2UYqw4Pi9+xV4w9ZczHFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/typescript-estree": "8.44.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.44.1.tgz",
+      "integrity": "sha512-576+u0QD+Jp3tZzvfRfxon0EA2lzcDt3lhUbsC6Lgzy9x2VR4E+JUiNyGHi5T8vk0TV+fpJ5GLG1JsJuWCaKhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/ignore": {
+      "version": "7.0.5",
+      "resolved": "https://registry.npmjs.org/ignore/-/ignore-7.0.5.tgz",
+      "integrity": "sha512-Hs59xBNfUIunMFgWAbGX5cq6893IbWg4KnrjbYwX3tx0ztorVgTDA6B2sxf8ejHJ4wz8BqGUMYlnzNBer5NvGg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 4"
+      }
+    },
+    "node_modules/@typescript-eslint/eslint-plugin/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
       }
     },
     "node_modules/@typescript-eslint/eslint-plugin/node_modules/semver": {
       "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
       "dev": true,
       "license": "ISC",
       "bin": {
@@ -4320,6 +4501,8 @@
     },
     "node_modules/@typescript-eslint/experimental-utils": {
       "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/experimental-utils/-/experimental-utils-5.62.0.tgz",
+      "integrity": "sha512-RTXpeB3eMkpoclG3ZHft6vG/Z30azNHuqY6wKPBHlVMZFuEvrtlEDe8gMqDb+SO+9hjC/pLekeSCryf9vMZlCw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -4337,29 +4520,195 @@
       }
     },
     "node_modules/@typescript-eslint/parser": {
-      "version": "5.62.0",
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.44.1.tgz",
+      "integrity": "sha512-EHrrEsyhOhxYt8MTg4zTF+DJMuNBzWwgvvOYNj/zm1vnaD/IC5zCXFehZv94Piqa2cRFfXrTFxIvO95L7Qc/cw==",
       "dev": true,
-      "license": "BSD-2-Clause",
+      "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/scope-manager": "5.62.0",
-        "@typescript-eslint/types": "5.62.0",
-        "@typescript-eslint/typescript-estree": "5.62.0",
+        "@typescript-eslint/scope-manager": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/typescript-estree": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1",
         "debug": "^4.3.4"
       },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.44.1.tgz",
+      "integrity": "sha512-NdhWHgmynpSvyhchGLXh+w12OMT308Gm25JoRIyTZqEbApiBiQHD/8xgb6LqCWCFcxFtWwaVdFsLPQI3jvhywg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1"
       },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/types": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.44.1.tgz",
+      "integrity": "sha512-Lk7uj7y9uQUOEguiDIDLYLJOrYHQa7oBiURYVFqIpGxclAFQ78f6VUOM8lI2XEuNOKNB7XuvM2+2cMXAoq4ALQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.44.1.tgz",
+      "integrity": "sha512-qnQJ+mVa7szevdEyvfItbO5Vo+GfZ4/GZWWDRRLjrxYPkhM+6zYB2vRYwCsoJLzqFCdZT4mEqyJoyzkunsZ96A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.44.1",
+        "@typescript-eslint/tsconfig-utils": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.44.1.tgz",
+      "integrity": "sha512-576+u0QD+Jp3tZzvfRfxon0EA2lzcDt3lhUbsC6Lgzy9x2VR4E+JUiNyGHi5T8vk0TV+fpJ5GLG1JsJuWCaKhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/parser/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.44.1.tgz",
+      "integrity": "sha512-ycSa60eGg8GWAkVsKV4E6Nz33h+HjTXbsDT4FILyL8Obk5/mx4tbvCNsLf9zret3ipSumAOG89UcCs/KRaKYrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.44.1",
+        "@typescript-eslint/types": "^8.44.1",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service/node_modules/@typescript-eslint/types": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.44.1.tgz",
+      "integrity": "sha512-Lk7uj7y9uQUOEguiDIDLYLJOrYHQa7oBiURYVFqIpGxclAFQ78f6VUOM8lI2XEuNOKNB7XuvM2+2cMXAoq4ALQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
       }
     },
     "node_modules/@typescript-eslint/scope-manager": {
@@ -4378,30 +4727,201 @@
         "url": "https://opencollective.com/typescript-eslint"
       }
     },
-    "node_modules/@typescript-eslint/type-utils": {
-      "version": "5.62.0",
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.44.1.tgz",
+      "integrity": "sha512-B5OyACouEjuIvof3o86lRMvyDsFwZm+4fBOqFHccIctYgBjqR3qT39FBYGN87khcgf0ExpdCBeGKpKRhSFTjKQ==",
       "dev": true,
       "license": "MIT",
-      "dependencies": {
-        "@typescript-eslint/typescript-estree": "5.62.0",
-        "@typescript-eslint/utils": "5.62.0",
-        "debug": "^4.3.4",
-        "tsutils": "^3.21.0"
-      },
       "engines": {
-        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
       },
       "funding": {
         "type": "opencollective",
         "url": "https://opencollective.com/typescript-eslint"
       },
       "peerDependencies": {
-        "eslint": "*"
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.44.1.tgz",
+      "integrity": "sha512-KdEerZqHWXsRNKjF9NYswNISnFzXfXNDfPxoTh7tqohU/PRIbwTmsjGK6V9/RTYWau7NZvfo52lgVk+sJh0K3g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/typescript-estree": "8.44.1",
+        "@typescript-eslint/utils": "8.44.1",
+        "debug": "^4.3.4",
+        "ts-api-utils": "^2.1.0"
       },
-      "peerDependenciesMeta": {
-        "typescript": {
-          "optional": true
-        }
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.44.1.tgz",
+      "integrity": "sha512-NdhWHgmynpSvyhchGLXh+w12OMT308Gm25JoRIyTZqEbApiBiQHD/8xgb6LqCWCFcxFtWwaVdFsLPQI3jvhywg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/types": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.44.1.tgz",
+      "integrity": "sha512-Lk7uj7y9uQUOEguiDIDLYLJOrYHQa7oBiURYVFqIpGxclAFQ78f6VUOM8lI2XEuNOKNB7XuvM2+2cMXAoq4ALQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.44.1.tgz",
+      "integrity": "sha512-qnQJ+mVa7szevdEyvfItbO5Vo+GfZ4/GZWWDRRLjrxYPkhM+6zYB2vRYwCsoJLzqFCdZT4mEqyJoyzkunsZ96A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.44.1",
+        "@typescript-eslint/tsconfig-utils": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/utils": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.44.1.tgz",
+      "integrity": "sha512-DpX5Fp6edTlocMCwA+mHY8Mra+pPjRZ0TfHkXI8QFelIKcbADQz1LUPNtzOFUriBB2UYqw4Pi9+xV4w9ZczHFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/typescript-estree": "8.44.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.44.1.tgz",
+      "integrity": "sha512-576+u0QD+Jp3tZzvfRfxon0EA2lzcDt3lhUbsC6Lgzy9x2VR4E+JUiNyGHi5T8vk0TV+fpJ5GLG1JsJuWCaKhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/@typescript-eslint/type-utils/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
       }
     },
     "node_modules/@typescript-eslint/types": {
@@ -6376,6 +6896,22 @@
         "url": "https://opencollective.com/eslint"
       }
     },
+    "node_modules/eslint-config-prettier": {
+      "version": "10.1.8",
+      "resolved": "https://registry.npmjs.org/eslint-config-prettier/-/eslint-config-prettier-10.1.8.tgz",
+      "integrity": "sha512-82GZUjRS0p/jganf6q1rEO25VSoHH0hKPCTrgillPjdI/3bgBhAE1QzHrHTizjpRvy6pGAvKjDJtk2pF9NDq8w==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "eslint-config-prettier": "bin/cli.js"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-config-prettier"
+      },
+      "peerDependencies": {
+        "eslint": ">=7.0.0"
+      }
+    },
     "node_modules/eslint-config-react-app": {
       "version": "7.0.1",
       "dev": true,
@@ -6403,6 +6939,148 @@
         "eslint": "^8.0.0"
       }
     },
+    "node_modules/eslint-config-react-app/node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
+      "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.4.0",
+        "@typescript-eslint/scope-manager": "5.62.0",
+        "@typescript-eslint/type-utils": "5.62.0",
+        "@typescript-eslint/utils": "5.62.0",
+        "debug": "^4.3.4",
+        "graphemer": "^1.4.0",
+        "ignore": "^5.2.0",
+        "natural-compare-lite": "^1.4.0",
+        "semver": "^7.3.7",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-react-app/node_modules/@typescript-eslint/parser": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
+      "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "5.62.0",
+        "@typescript-eslint/types": "5.62.0",
+        "@typescript-eslint/typescript-estree": "5.62.0",
+        "debug": "^4.3.4"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-react-app/node_modules/@typescript-eslint/type-utils": {
+      "version": "5.62.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-5.62.0.tgz",
+      "integrity": "sha512-xsSQreu+VnfbqQpW5vnCJdq1Z3Q0U31qiWmRhr98ONQmcp/yhiPJFPq8MXiJVLiksmOKSjIldZzkebzHuCGzew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/typescript-estree": "5.62.0",
+        "@typescript-eslint/utils": "5.62.0",
+        "debug": "^4.3.4",
+        "tsutils": "^3.21.0"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "*"
+      },
+      "peerDependenciesMeta": {
+        "typescript": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-react-app/node_modules/eslint-plugin-jest": {
+      "version": "25.7.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-25.7.0.tgz",
+      "integrity": "sha512-PWLUEXeeF7C9QGKqvdSbzLOiLTx+bno7/HC9eefePfEb257QFHg7ye3dh80AZVkaa/RQsBB1Q/ORQvg2X7F0NQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/experimental-utils": "^5.0.0"
+      },
+      "engines": {
+        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/eslint-plugin": "^4.0.0 || ^5.0.0",
+        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@typescript-eslint/eslint-plugin": {
+          "optional": true
+        },
+        "jest": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/eslint-config-react-app/node_modules/eslint-plugin-react-hooks": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-4.6.2.tgz",
+      "integrity": "sha512-QzliNJq4GinDBcD8gPB5v0wh6g8q3SUi6EFF0x8N/BL9PoVs0atuGc47ozMRyOWAKdwaZ5OnbOEa3WR+dSGKuQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "peerDependencies": {
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+      }
+    },
+    "node_modules/eslint-config-react-app/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/eslint-import-resolver-node": {
       "version": "0.3.9",
       "dev": true,
@@ -6464,6 +7142,8 @@
     },
     "node_modules/eslint-plugin-import": {
       "version": "2.32.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-import/-/eslint-plugin-import-2.32.0.tgz",
+      "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6514,18 +7194,21 @@
       }
     },
     "node_modules/eslint-plugin-jest": {
-      "version": "25.7.0",
+      "version": "29.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-jest/-/eslint-plugin-jest-29.0.1.tgz",
+      "integrity": "sha512-EE44T0OSMCeXhDrrdsbKAhprobKkPtJTbQz5yEktysNpHeDZTAL1SfDTNKmcFfJkY6yrQLtTKZALrD3j/Gpmiw==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
-        "@typescript-eslint/experimental-utils": "^5.0.0"
+        "@typescript-eslint/utils": "^8.0.0"
       },
       "engines": {
-        "node": "^12.13.0 || ^14.15.0 || >=16.0.0"
+        "node": "^20.12.0 || ^22.0.0 || >=24.0.0"
       },
       "peerDependencies": {
-        "@typescript-eslint/eslint-plugin": "^4.0.0 || ^5.0.0",
-        "eslint": "^6.0.0 || ^7.0.0 || ^8.0.0"
+        "@typescript-eslint/eslint-plugin": "^8.0.0",
+        "eslint": "^8.57.0 || ^9.0.0",
+        "jest": "*"
       },
       "peerDependenciesMeta": {
         "@typescript-eslint/eslint-plugin": {
@@ -6536,6 +7219,161 @@
         }
       }
     },
+    "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/scope-manager": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.44.1.tgz",
+      "integrity": "sha512-NdhWHgmynpSvyhchGLXh+w12OMT308Gm25JoRIyTZqEbApiBiQHD/8xgb6LqCWCFcxFtWwaVdFsLPQI3jvhywg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/types": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.44.1.tgz",
+      "integrity": "sha512-Lk7uj7y9uQUOEguiDIDLYLJOrYHQa7oBiURYVFqIpGxclAFQ78f6VUOM8lI2XEuNOKNB7XuvM2+2cMXAoq4ALQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/typescript-estree": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.44.1.tgz",
+      "integrity": "sha512-qnQJ+mVa7szevdEyvfItbO5Vo+GfZ4/GZWWDRRLjrxYPkhM+6zYB2vRYwCsoJLzqFCdZT4mEqyJoyzkunsZ96A==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.44.1",
+        "@typescript-eslint/tsconfig-utils": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/visitor-keys": "8.44.1",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.3.2",
+        "is-glob": "^4.0.3",
+        "minimatch": "^9.0.4",
+        "semver": "^7.6.0",
+        "ts-api-utils": "^2.1.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/utils": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.44.1.tgz",
+      "integrity": "sha512-DpX5Fp6edTlocMCwA+mHY8Mra+pPjRZ0TfHkXI8QFelIKcbADQz1LUPNtzOFUriBB2UYqw4Pi9+xV4w9ZczHFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.7.0",
+        "@typescript-eslint/scope-manager": "8.44.1",
+        "@typescript-eslint/types": "8.44.1",
+        "@typescript-eslint/typescript-estree": "8.44.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^8.57.0 || ^9.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-jest/node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.44.1",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.44.1.tgz",
+      "integrity": "sha512-576+u0QD+Jp3tZzvfRfxon0EA2lzcDt3lhUbsC6Lgzy9x2VR4E+JUiNyGHi5T8vk0TV+fpJ5GLG1JsJuWCaKhw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.44.1",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/eslint-plugin-jest/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/eslint-plugin-jest/node_modules/eslint-visitor-keys": {
+      "version": "4.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-4.2.1.tgz",
+      "integrity": "sha512-Uhdk5sfqcee/9H/rCOJikYz67o0a2Tw2hGRPOG2Y1R2dg7brRe1uG0yaNQDHu+TO/uQPF/5eCapvYSmHUjt7JQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-plugin-jest/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/eslint-plugin-jest/node_modules/semver": {
+      "version": "7.7.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.2.tgz",
+      "integrity": "sha512-RF0Fw+rO5AMf9MAyaRXI4AV0Ulj5lMHqVxxdSgiVbixSCXoEmmX/jk0CuJw4+3SqroYO9VoUh+HcuJivvtJemA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
     "node_modules/eslint-plugin-jsx-a11y": {
       "version": "6.10.2",
       "dev": true,
@@ -6572,8 +7410,29 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/eslint-plugin-promise": {
+      "version": "7.2.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-promise/-/eslint-plugin-promise-7.2.1.tgz",
+      "integrity": "sha512-SWKjd+EuvWkYaS+uN2csvj0KoP43YTu7+phKQ5v+xw6+A0gutVX2yqCeCkC3uLCJFiPfR2dD8Es5L7yUsmvEaA==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^7.0.0 || ^8.0.0 || ^9.0.0"
+      }
+    },
     "node_modules/eslint-plugin-react": {
       "version": "7.37.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react/-/eslint-plugin-react-7.37.5.tgz",
+      "integrity": "sha512-Qteup0SqU15kdocexFNAJMvCJEfa2xUKNV4CC1xsVMrIIqEy3SQ/rqyxCWNzfrd3/ldy6HMlD2e0JDVpDg2qIA==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -6604,14 +7463,16 @@
       }
     },
     "node_modules/eslint-plugin-react-hooks": {
-      "version": "4.6.2",
+      "version": "5.2.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-5.2.0.tgz",
+      "integrity": "sha512-+f15FfK64YQwZdJNELETdn5ibXEUQmW1DZL6KXhNnc2heoy/sg9VJJeT7n8TlMWouzWqSWavFkIhHyIbIAEapg==",
       "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=10"
       },
       "peerDependencies": {
-        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0"
+        "eslint": "^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 || ^9.0.0"
       }
     },
     "node_modules/eslint-plugin-react/node_modules/doctrine": {
@@ -7514,8 +8375,9 @@
     },
     "node_modules/history": {
       "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/history/-/history-5.3.0.tgz",
+      "integrity": "sha512-ZqaKwjjrAYUYfLG+htGaIIZ4nioX2L70ZUMIFysS3xvBsSG4x/n1V6TXV3N8ZYNuFGlDirFg32T7B6WOUPDYcQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/runtime": "^7.7.6"
       }
@@ -9940,6 +10802,8 @@
     },
     "node_modules/nanoid": {
       "version": "3.3.11",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.11.tgz",
+      "integrity": "sha512-N8SpfPUnUp1bK+PMYW8qSWdl9U+wwNWI4QKxOYDy9JAro3WMX7p2OeVRF9v+347pnakNevPmiHhNmZ2HbFA76w==",
       "dev": true,
       "funding": [
         {
@@ -9977,6 +10841,8 @@
     },
     "node_modules/natural-compare-lite": {
       "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare-lite/-/natural-compare-lite-1.4.0.tgz",
+      "integrity": "sha512-Tj+HTDSJJKaZnfiuw+iaF9skdPpTo2GtEly5JHnWV/hfv2Qj/9RKsGISQtLh2ox3l5EAGw487hnBee0sIJ6v2g==",
       "dev": true,
       "license": "MIT"
     },
@@ -10529,6 +11395,8 @@
     },
     "node_modules/postcss": {
       "version": "8.5.6",
+      "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.5.6.tgz",
+      "integrity": "sha512-3Ybi1tAuwAP9s0r1UQ2J4n5Y0G05bJkpUIO0/bI9MhwmD70S5aTWbXGBwxHrelT+XM1k6dM0pk+SwNkpTRN7Pg==",
       "dev": true,
       "funding": [
         {
@@ -10634,6 +11502,22 @@
         "node": ">=4"
       }
     },
+    "node_modules/prettier": {
+      "version": "3.6.2",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.6.2.tgz",
+      "integrity": "sha512-I7AIg5boAr5R0FFtJ6rCfD+LFsWHp81dolrFD8S79U9tb8Az2nGrJncnMSnys+bpQJfRUzqs9hnA81OAA3hCuQ==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
     "node_modules/pretty-format": {
       "version": "27.5.1",
       "dev": true,
@@ -10926,6 +11810,13 @@
         "node": ">=8"
       }
     },
+    "node_modules/reduce-configs": {
+      "version": "1.1.1",
+      "resolved": "https://registry.npmjs.org/reduce-configs/-/reduce-configs-1.1.1.tgz",
+      "integrity": "sha512-EYtsVGAQarE8daT54cnaY1PIknF2VB78ug6Zre2rs36EsJfC40EG6hmTU2A2P1ZuXnKAt2KI0fzOGHcX7wzdPw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/redux": {
       "version": "5.0.1",
       "license": "MIT"
@@ -11246,6 +12137,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/sax": {
+      "version": "1.4.1",
+      "resolved": "https://registry.npmjs.org/sax/-/sax-1.4.1.tgz",
+      "integrity": "sha512-+aWOz7yVScEGoKNd4PA10LZ8sk0A/z5+nXQG5giUO5rprX9jgYsTdov9qCchZiPIZezbZH+jRut8nPodFAX4Jg==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/saxes": {
       "version": "6.0.0",
       "dev": true,
@@ -11751,6 +12649,124 @@
       "version": "4.2.0",
       "license": "MIT"
     },
+    "node_modules/stylus": {
+      "version": "0.64.0",
+      "resolved": "https://registry.npmjs.org/stylus/-/stylus-0.64.0.tgz",
+      "integrity": "sha512-ZIdT8eUv8tegmqy1tTIdJv9We2DumkNZFdCF5mz/Kpq3OcTaxSuCAYZge6HKK2CmNC02G1eJig2RV7XTw5hQrA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@adobe/css-tools": "~4.3.3",
+        "debug": "^4.3.2",
+        "glob": "^10.4.5",
+        "sax": "~1.4.1",
+        "source-map": "^0.7.3"
+      },
+      "bin": {
+        "stylus": "bin/stylus"
+      },
+      "engines": {
+        "node": ">=16"
+      },
+      "funding": {
+        "url": "https://opencollective.com/stylus"
+      }
+    },
+    "node_modules/stylus-loader": {
+      "version": "8.1.2",
+      "resolved": "https://registry.npmjs.org/stylus-loader/-/stylus-loader-8.1.2.tgz",
+      "integrity": "sha512-zr4ae9vIDs4zslsMtsCAoN3CLkhtUEikwNwL+AyGGtwlo+oRaX2su/6MVy/TbaSND/WIGx5hSTK23G58T8zVyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "^3.3.2",
+        "normalize-path": "^3.0.0"
+      },
+      "engines": {
+        "node": ">= 18.12.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/webpack"
+      },
+      "peerDependencies": {
+        "@rspack/core": "0.x || 1.x",
+        "stylus": ">=0.52.4",
+        "webpack": "^5.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@rspack/core": {
+          "optional": true
+        },
+        "webpack": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/stylus/node_modules/@adobe/css-tools": {
+      "version": "4.3.3",
+      "resolved": "https://registry.npmjs.org/@adobe/css-tools/-/css-tools-4.3.3.tgz",
+      "integrity": "sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/stylus/node_modules/brace-expansion": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-2.0.2.tgz",
+      "integrity": "sha512-Jt0vHyM+jmUBqojB7E1NIYadt0vI0Qxjxd2TErW94wDz+E2LAm5vKMXXwg6ZZBTHPuUlDgQHKXvjGBdfcF1ZDQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0"
+      }
+    },
+    "node_modules/stylus/node_modules/glob": {
+      "version": "10.4.5",
+      "resolved": "https://registry.npmjs.org/glob/-/glob-10.4.5.tgz",
+      "integrity": "sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "foreground-child": "^3.1.0",
+        "jackspeak": "^3.1.2",
+        "minimatch": "^9.0.4",
+        "minipass": "^7.1.2",
+        "package-json-from-dist": "^1.0.0",
+        "path-scurry": "^1.11.1"
+      },
+      "bin": {
+        "glob": "dist/esm/bin.mjs"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/stylus/node_modules/minimatch": {
+      "version": "9.0.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-9.0.5.tgz",
+      "integrity": "sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=16 || 14 >=14.17"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
+    "node_modules/stylus/node_modules/source-map": {
+      "version": "0.7.6",
+      "resolved": "https://registry.npmjs.org/source-map/-/source-map-0.7.6.tgz",
+      "integrity": "sha512-i5uvt8C3ikiWeNZSVZNWcfZPItFQOsYTUAOkcUPGd8DqDy1uOUikjt5dG+uRlwyvR108Fb9DOd4GvXfT0N2/uQ==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/supports-color": {
       "version": "7.2.0",
       "dev": true,
@@ -11916,6 +12932,19 @@
         "node": ">=18"
       }
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.1.0.tgz",
+      "integrity": "sha512-CUgTZL1irw8u29bzrOD/nH85jqyc74D6SshFgujOIA7osm2Rz7dYH77agkx7H4FBNxDq7Cjf+IjaX/8zwFW+ZQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
     "node_modules/ts-jest": {
       "version": "29.4.0",
       "dev": true,
diff --git a/package.json b/package.json
index 08b6f35..add7a3e 100644
--- a/package.json
+++ b/package.json
@@ -36,15 +36,9 @@
     "build": "rsbuild build",
     "preview": "rsbuild preview",
     "test": "jest",
-    "lint": "eslint src",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx",
     "jest-preview": "jest-preview"
   },
-  "eslintConfig": {
-    "extends": [
-      "react-app",
-      "react-app/jest"
-    ]
-  },
   "browserslist": {
     "production": [
       ">0.2%",
@@ -61,23 +55,35 @@
     "node": "24.x"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.28.4",
     "@babel/preset-env": "^7.28.0",
     "@babel/preset-react": "^7.27.1",
     "@rsbuild/core": "^1.5.2",
     "@rsbuild/plugin-react": "^1.3.3",
+    "@rsbuild/plugin-stylus": "^1.2.0",
     "@rsbuild/plugin-svgr": "^1.2.0",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.3.0",
     "@testing-library/user-event": "^13.5.0",
     "@types/jest": "^30.0.0",
+    "@typescript-eslint/eslint-plugin": "^8.44.1",
+    "@typescript-eslint/parser": "^8.44.1",
     "babel-jest": "^30.0.4",
     "eslint": "^8.57.1",
+    "eslint-config-prettier": "^10.1.8",
     "eslint-config-react-app": "^7.0.1",
+    "eslint-plugin-import": "^2.32.0",
+    "eslint-plugin-jest": "^29.0.1",
+    "eslint-plugin-promise": "^7.2.1",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "history": "^5.3.0",
     "i18next-resources-for-ts": "1.4.0",
     "jest": "^30.0.4",
     "jest-environment-jsdom": "^30.0.4",
     "jest-preview": "^0.3.1",
+    "prettier": "^3.6.2",
     "ts-jest": "^29.4.0",
     "typescript": "^4.9.5"
   }
diff --git a/rsbuild.config.ts b/rsbuild.config.ts
index 3f86c04..cb967f3 100644
--- a/rsbuild.config.ts
+++ b/rsbuild.config.ts
@@ -1,10 +1,25 @@
 import { defineConfig } from "@rsbuild/core";
 import { pluginReact } from "@rsbuild/plugin-react";
+import { pluginStylus } from "@rsbuild/plugin-stylus";
+import { pluginSvgr } from "@rsbuild/plugin-svgr";
 
 export default defineConfig({
-  plugins: [pluginReact()],
+  plugins: [pluginReact(), pluginStylus(), pluginSvgr()],
   html: {
     template: "./public/index.html",
   },
-  server: { port: 5000 },
+  server: {
+    port: 5000,
+    historyApiFallback: true,
+  },
+  source: {
+    entry: {
+      index: "./src/index.tsx",
+    },
+  },
+  output: {
+    distPath: {
+      root: "dist",
+    },
+  },
 });
diff --git a/src/App.css b/src/App.css
deleted file mode 100644
index d8891f2..0000000
--- a/src/App.css
+++ /dev/null
@@ -1,20 +0,0 @@
-.App {
-  text-align: center;
-  font-family: "Roboto";
-  height: 100vh;
-}
-
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
diff --git a/src/App.styl b/src/App.styl
new file mode 100644
index 0000000..88ed990
--- /dev/null
+++ b/src/App.styl
@@ -0,0 +1,17 @@
+.App
+  text-align center
+  font-family "Roboto"
+  height 100vh
+
+.App-header
+  background-color #282c34
+  min-height 100vh
+  display flex
+  flex-direction column
+  align-items center
+  justify-content center
+  font-size calc(10px + 2vmin)
+  color white
+
+.App-link
+  color #61dafb
diff --git a/src/App.tsx b/src/App.tsx
index 441f905..28485a9 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -3,7 +3,7 @@ import { Route, Routes } from "react-router-dom";
 import { HistoryRouter as Router } from "redux-first-history/rr6";
 import { CallbackResume } from "./features/User/LoginCallback";
 import { history } from "./app/store";
-import "./App.css";
+import "./App.styl";
 import { Loading } from "./components/Loading/Loading";
 import HandleLogin from "./features/User/HandleLogin";
 import CalendarLayout from "./components/Calendar/CalendarLayout";
diff --git a/src/components/Attendees/PeopleSearch.tsx b/src/components/Attendees/PeopleSearch.tsx
index 024ff88..110fa27 100644
--- a/src/components/Attendees/PeopleSearch.tsx
+++ b/src/components/Attendees/PeopleSearch.tsx
@@ -116,7 +116,7 @@ export function PeopleSearch({
               startAdornment: (
                 <>
                   <PeopleOutlineOutlinedIcon
-                    sx={{ mr: 1, color: "action.active" }}
+                    style={{ marginRight: 8, color: "rgba(0, 0, 0, 0.54)" }}
                   />
                   {params.InputProps.startAdornment}
                 </>
@@ -164,7 +164,7 @@ export function PeopleSearch({
             <Chip
               {...getTagProps({ index })}
               key={label}
-              sx={{
+              style={{
                 backgroundColor: chipColor,
                 color: textColor,
               }}
diff --git a/src/components/Calendar/Calendar.css b/src/components/Calendar/Calendar.css
deleted file mode 100644
index df509e2..0000000
--- a/src/components/Calendar/Calendar.css
+++ /dev/null
@@ -1,155 +0,0 @@
-.App {
-  background-color: #f3f6f9;
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-}
-.main-layout {
-  background-color: #fff;
-  flex-direction: row;
-  height: calc(100vh - 90px);
-  display: flex;
-}
-
-.calendar {
-  flex-grow: 1;
-  height: 100%;
-  overflow: hidden;
-}
-
-.calendarListHeader {
-  padding-top: 10px;
-  display: flex;
-  align-items: center;
-  margin-left: 25%;
-}
-.sidebar {
-  border-right: 2px solid #f3f4f6;
-  width: 330px;
-  padding: 16px 25px;
-  height: 90vh;
-  flex-direction: column;
-  overflow: auto;
-}
-
-.declined-event {
-  opacity: 0.7;
-}
-
-.needs-action-event {
-  opacity: 0.7;
-  border: dashed 1px #ffffff;
-}
-
-.fc-event-main span,
-.fc-daygrid-event div {
-  display: block !important;
-  white-space: nowrap !important;
-  overflow: hidden !important;
-  text-overflow: ellipsis !important;
-}
-
-[data-theme="dark"] .fc-timegrid-slot::after {
-  border-top: 1px dotted rgba(255, 255, 255, 0.2);
-}
-
-#calendar {
-  flex: 1;
-  overflow: hidden; /* Important: let FullCalendar handle internal scroll */
-}
-
-/* Base container */
-.fc-daygrid-day-top {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  padding: 0.5rem 0;
-  font-family: "Inter", sans-serif;
-}
-
-/* sidebar*/
-.sidebar-calendar {
-  width: 280px;
-  background-color: #fff;
-  border-radius: 12px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
-  padding: 20px;
-  display: flex;
-  flex-direction: column;
-  gap: 30px;
-  font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
-}
-
-/* mini calendar style */
-.react-calendar {
-  border: none;
-  font-size: 14px;
-  width: 100%;
-  user-select: none;
-}
-
-/* selected day hover */
-.react-calendar__tile {
-  transition:
-    background-color 0.3s ease,
-    color 0.3s ease;
-  border: none;
-  background-color: white;
-  width: 12px;
-  height: 37.52px;
-}
-
-.react-calendar__tile--active {
-  background-color: rgb(255, 255, 255);
-}
-
-.today {
-  background: orange !important;
-  color: white;
-}
-.selectedWeek {
-  background-color: lightgrey;
-}
-.react-calendar__month-view__days__day--neighboringMonth {
-  color: gray;
-}
-
-/* sidebar header */
-.sidebar-calendar h2 {
-  font-size: 1.3rem;
-  font-weight: 700;
-  color: #333;
-  margin: 0 0 10px 0;
-}
-
-/* Calendar list */
-.calendar-list {
-  list-style: none;
-  padding: 0;
-  margin: 0;
-  display: flex;
-  flex-direction: column;
-  gap: 15px;
-}
-
-.calendar-list li {
-  display: flex;
-  align-items: center;
-  gap: 10px;
-  font-weight: 600;
-  color: #444;
-  padding: 10px 15px;
-  border-radius: 10px;
-  transition: background-color 0.2s ease;
-  cursor: pointer;
-}
-
-.event-dot {
-  margin-top: 2px;
-  width: 6px;
-  height: 6px;
-  background-color: #d93025;
-  border-radius: 50%;
-  margin-left: auto;
-  margin-right: auto;
-}
diff --git a/src/components/Calendar/Calendar.styl b/src/components/Calendar/Calendar.styl
new file mode 100644
index 0000000..3fcd106
--- /dev/null
+++ b/src/components/Calendar/Calendar.styl
@@ -0,0 +1,135 @@
+.App
+  background-color #f3f6f9
+  display flex
+  flex-direction column
+  justify-content space-between
+
+.main-layout
+  background-color #fff
+  flex-direction row
+  height calc(100vh - 90px)
+  display flex
+
+.calendar
+  flex-grow 1
+  height 100%
+  overflow hidden
+
+.calendarListHeader
+  padding-top 10px
+  display flex
+  align-items center
+  margin-left 25%
+
+.sidebar
+  border-right 2px solid #f3f4f6
+  width 330px
+  padding 16px 25px
+  height 90vh
+  flex-direction column
+  overflow auto
+
+.declined-event
+  opacity 0.7
+
+.needs-action-event
+  opacity 0.7
+  border dashed 1px #ffffff
+
+.fc-event-main span,
+.fc-daygrid-event div
+  display block !important
+  white-space nowrap !important
+  overflow hidden !important
+  text-overflow ellipsis !important
+
+[data-theme="dark"] .fc-timegrid-slot::after
+  border-top 1px dotted rgba(255, 255, 255, 0.2)
+
+#calendar
+  flex 1
+  overflow hidden /* Important: let FullCalendar handle internal scroll */
+
+/* Base container */
+.fc-daygrid-day-top
+  display flex
+  flex-direction column
+  align-items center
+  padding 0.5rem 0
+  font-family "Inter", sans-serif
+
+/* sidebar*/
+.sidebar-calendar
+  width 280px
+  background-color #fff
+  border-radius 12px
+  box-shadow 0 4px 12px rgba(0, 0, 0, 0.1)
+  padding 20px
+  display flex
+  flex-direction column
+  gap 30px
+  font-family "Segoe UI", Tahoma, Geneva, Verdana, sans-serif
+
+/* mini calendar style */
+.react-calendar
+  border none
+  font-size 14px
+  width 100%
+  user-select none
+
+/* selected day hover */
+.react-calendar__tile
+  transition background-color 0.3s ease, color 0.3s ease
+  border none
+  background-color white
+  width 12px
+  height 37.52px
+
+.react-calendar__tile--active
+  background-color rgb(255, 255, 255)
+
+.today
+  background orange !important
+  color white
+
+.selectedWeek
+  background-color lightgrey
+
+.react-calendar__month-view__days__day--neighboringMonth
+  color gray
+
+/* sidebar header */
+.sidebar-calendar h2
+  font-size 1.3rem
+  font-weight 700
+  color #333
+  margin 0 0 10px 0
+
+/* Calendar list */
+.calendar-list
+  list-style none
+  padding 0
+  margin 0
+  display flex
+  flex-direction column
+  gap 15px
+
+.calendar-list li
+  display flex
+  align-items center
+  gap 10px
+  font-weight 600
+  color #444
+  padding 10px 15px
+  border-radius 10px
+  transition background-color 0.2s ease
+  cursor pointer
+
+.event-dot
+  margin-top 2px
+  width 6px
+  height 6px
+  background-color #d93025
+  border-radius 50%
+  margin-left auto
+  margin-right auto
diff --git a/src/components/Calendar/Calendar.tsx b/src/components/Calendar/Calendar.tsx
index ea21eb3..754ff56 100644
--- a/src/components/Calendar/Calendar.tsx
+++ b/src/components/Calendar/Calendar.tsx
@@ -4,8 +4,8 @@ import timeGridPlugin from "@fullcalendar/timegrid";
 import interactionPlugin from "@fullcalendar/interaction";
 import { CalendarApi, DateSelectArg } from "@fullcalendar/core";
 import ReactCalendar from "react-calendar";
-import "./Calendar.css";
-import "./CustomCalendar.css";
+import "./Calendar.styl";
+import "./CustomCalendar.styl";
 import { useEffect, useRef, useState } from "react";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import EventPopover from "../../features/Events/EventModal";
diff --git a/src/components/Calendar/CalendarColorPicker.tsx b/src/components/Calendar/CalendarColorPicker.tsx
index ac900fa..6d901f2 100644
--- a/src/components/Calendar/CalendarColorPicker.tsx
+++ b/src/components/Calendar/CalendarColorPicker.tsx
@@ -19,11 +19,11 @@ export function ColorPicker({
           role="button"
           aria-label={`select color ${c}`}
           onClick={() => onChange(c)}
-          sx={{
+          style={{
             width: 20,
             height: 20,
             borderRadius: "50%",
-            bgcolor: c,
+            backgroundColor: c,
             cursor: "pointer",
             border:
               selectedColor === c ? "2px solid black" : "2px solid transparent",
diff --git a/src/components/Calendar/CalendarSearch.tsx b/src/components/Calendar/CalendarSearch.tsx
index 9be511c..b2d9e49 100644
--- a/src/components/Calendar/CalendarSearch.tsx
+++ b/src/components/Calendar/CalendarSearch.tsx
@@ -44,18 +44,18 @@ function CalendarItem({
       display="flex"
       alignItems="center"
       justifyContent="space-between"
-      sx={{
-        borderRadius: 2,
+      style={{
+        borderRadius: 8,
         border: "1px solid #e5e7eb",
-        p: 1,
-        mb: 1,
+        padding: 8,
+        marginBottom: 8,
       }}
     >
       <Box display="flex" alignItems="center" gap={2}>
         <Avatar
           src={cal.owner.avatarUrl}
           alt={cal.owner.email}
-          sx={{
+          style={{
             border: `2px solid ${cal.cal["apple:color"] ?? "transparent"}`,
             boxShadow: cal.cal["apple:color"]
               ? `0 0 0 2px ${cal.cal["apple:color"]}`
@@ -228,7 +228,7 @@ export default function CalendarSearch({
       }}
     >
       <Box
-        sx={{
+        style={{
           position: "absolute",
           left: "50%",
           top: "20%",
@@ -238,16 +238,16 @@ export default function CalendarSearch({
         }}
       >
         <Card
-          sx={{
-            p: 2,
-            borderRadius: 3,
-            boxShadow: 6,
+          style={{
+            padding: 16,
+            borderRadius: 12,
+            boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
             display: "flex",
             flexDirection: "column",
             maxHeight: "80vh",
           }}
         >
-          <Box sx={{ position: "absolute", top: 8, right: 8 }}>
+          <Box style={{ position: "absolute", top: 8, right: 8 }}>
             <IconButton
               size="small"
               onClick={() => onClose({}, "backdropClick")}
@@ -256,8 +256,11 @@ export default function CalendarSearch({
             </IconButton>
           </Box>
 
-          <CardHeader title="Browse other calendars" sx={{ pb: 0 }} />
-          <CardContent sx={{ flex: 1, overflow: "auto" }}>
+          <CardHeader
+            title="Browse other calendars"
+            style={{ paddingBottom: 0 }}
+          />
+          <CardContent style={{ flex: 1, overflow: "auto" }}>
             <PeopleSearch
               objectTypes={["user"]}
               selectedUsers={selectedUsers}
@@ -319,7 +322,7 @@ export default function CalendarSearch({
             />
           </CardContent>
 
-          <CardActions sx={{ justifyContent: "flex-end", gap: 1 }}>
+          <CardActions style={{ justifyContent: "flex-end", gap: 8 }}>
             <Button
               variant="outlined"
               onClick={() => onClose({}, "backdropClick")}
diff --git a/src/components/Calendar/CalendarSelection.tsx b/src/components/Calendar/CalendarSelection.tsx
index 7a43327..550dc6f 100644
--- a/src/components/Calendar/CalendarSelection.tsx
+++ b/src/components/Calendar/CalendarSelection.tsx
@@ -8,6 +8,8 @@ import { useState } from "react";
 import CalendarPopover from "./CalendarModal";
 import { Calendars } from "../../features/Calendars/CalendarTypes";
 import MoreVertIcon from "@mui/icons-material/MoreVert";
+import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
+import CalendarSearch from "./CalendarSearch";
 import IconButton from "@mui/material/IconButton";
 import Checkbox from "@mui/material/Checkbox";
 import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
diff --git a/src/components/Calendar/CustomCalendar.css b/src/components/Calendar/CustomCalendar.css
deleted file mode 100644
index c33b828..0000000
--- a/src/components/Calendar/CustomCalendar.css
+++ /dev/null
@@ -1,238 +0,0 @@
-/* Custom main calendar view */
-.fc-theme-standard td,
-.fc-theme-standard th {
-  border: 1px solid #b8c1cc;
-}
-th.fc-col-header-cell.fc-day {
-  border-left: 0;
-}
-
-a.fc-timegrid-axis-cushion {
-  color: #243b55;
-  text-align: center;
-  font-family: Roboto;
-  font-size: 12.507px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 18.76px;
-  letter-spacing: 0.391px;
-}
-
-/* Slot label visibility transitions */
-.fc-timegrid-slot-label {
-  transition: opacity 0.3s ease-in-out;
-}
-.fc-daygrid-day-top small {
-  color: #8c9caf;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 20px;
-  letter-spacing: 0.25px;
-  font-family: "Inter", sans-serif;
-}
-.fc-daygrid-day-top .fc-daygrid-day-number,
-span.fc-daygrid-day-number {
-  color: #243b55;
-  margin: 0 6px 0 0;
-  font-family: Roboto;
-  font-size: 28px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 36px;
-  position: relative;
-  width: 48px;
-  height: 48px;
-  line-height: 39px;
-}
-.fc-daygrid-day-top .fc-daygrid-day-number:after,
-span.fc-daygrid-day-number:after {
-  content: "";
-  z-index: -1;
-  border-radius: 50%;
-  width: 45px;
-  height: 45px;
-  position: absolute;
-  top: 1px;
-  left: 1px;
-  transition: background-color 0.3s ease;
-}
-span.fc-daygrid-day-number.current-date {
-  color: #fff;
-}
-span.fc-daygrid-day-number.current-date:after {
-  background-color: #f67e35;
-}
-td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink,
-td.fc-timegrid-slot.fc-timegrid-slot-label.fc-timegrid-slot-minor {
-  border: 0;
-}
-th.fc-timegrid-axis.fc-scrollgrid-shrink {
-  border: 0;
-  border-right: 1px solid #b8c1cc;
-}
-.fc .fc-timegrid-axis-cushion {
-  min-width: 80px;
-  max-width: 80px;
-  padding: 0;
-  text-align: left;
-  font-family: Roboto;
-  font-size: 12.507px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 18.76px;
-  padding: 0 0 0 10px;
-}
-.fc .fc-timegrid-divider {
-  display: none;
-  height: 0;
-}
-.fc-timegrid-slot-label-cushion {
-  color: #aea9b1;
-  font-family: Roboto;
-  font-size: 14px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: 20px;
-  letter-spacing: 0.25px;
-}
-th.fc-col-header-cell.fc-day {
-  border-right: 0;
-  border-bottom: 0;
-}
-.fc .fc-scrollgrid {
-  border: 0;
-}
-.fc .fc-timegrid-slot-label {
-  justify-content: flex-end;
-}
-.fc .fc-timegrid-slot-label .fc-timegrid-slot-label-frame {
-  position: relative;
-  transform: translate(-15px, -12px);
-}
-.fc
-  tbody
-  tr:first-of-type
-  .fc-timegrid-slot-label
-  .fc-timegrid-slot-label-frame {
-  display: none;
-}
-.fc .fc-timegrid-slot-label .fc-timegrid-slot-label-frame::after {
-  content: "";
-  z-index: -1;
-  background-color: #b8c1cc;
-  width: 10px;
-  height: 1px;
-  position: absolute;
-  top: 9.5px;
-  right: -15px;
-}
-.fc .fc-timegrid-col.fc-day-today,
-.fc .fc-daygrid-day.fc-day-today {
-  background-color: #fff;
-}
-.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events {
-  min-height: 36px;
-}
-.fc .fc-daygrid-body-natural .fc-daygrid-day-events {
-  margin-bottom: 0;
-}
-.fc .fc-timegrid-now-indicator-line {
-  z-index: 5;
-  border: 0 solid #f67e35;
-  border-top-width: 2px;
-  position: absolute;
-  left: 0;
-  right: 0;
-}
-.fc .fc-timegrid-now-indicator-line::after {
-  content: "";
-  z-index: 5;
-  background-color: #f67e35;
-  border-radius: 50%;
-  width: 10px;
-  height: 10px;
-  position: absolute;
-  top: -6px;
-  left: -5px;
-}
-.fc .fc-timegrid-now-indicator-arrow {
-  display: block !important;
-  width: auto;
-  height: auto;
-  position: relative;
-  border: 0;
-}
-
-.fc .fc-timegrid-now-indicator-arrow::before {
-  content: attr(data-time);
-  color: #f67e35;
-  white-space: nowrap;
-  font-family: Roboto, sans-serif;
-  font-weight: 600;
-  position: absolute;
-  top: -2px;
-  left: 25px;
-  font-size: 14px;
-  letter-spacing: 0.25px;
-}
-.fc-day-today .fc-timegrid-now-indicator-container {
-  overflow: unset;
-}
-.fc .fc-timegrid-slot {
-  height: auto;
-  min-height: 20px !important;
-}
-.fc .fc-timegrid-slot-label {
-  display: flex;
-  align-items: flex-start;
-  padding-top: 2px;
-  height: 100%;
-}
-tr:has(> td.fc-timegrid-divider.fc-cell-shaded) {
-  display: none;
-}
-.fc .fc-scrollgrid-section td {
-  border-bottom: 0;
-}
-.fc .fc-scrollgrid-section td .fc-daygrid-day-frame {
-  border-bottom: 1px solid #b8c1cc;
-}
-th.fc-col-header-cell.fc-day {
-  cursor: pointer;
-}
-th.fc-col-header-cell.fc-day:hover
-  .fc-daygrid-day-number:not(.current-date)::after {
-  background-color: #b8c1cc56;
-}
-
-/* Hover effects for month view using CSS */
-.fc-daygrid-day:hover {
-  background-color: #b8c1cc1a !important;
-  transition: background-color 0.3s ease;
-}
-
-/* Hover effects for week and day views using JavaScript */
-.hoverable-day-cell {
-  transition: background-color 0.3s ease;
-}
-
-.hour-highlight {
-  transition: background-color 0.3s ease;
-  background-color: #b8c1cc1a !important;
-  position: absolute;
-  left: 0;
-  right: 0;
-  pointer-events: none;
-  z-index: 1;
-}
-.fc-timegrid-slot-label {
-  background-color: #fff !important;
-}
-thead .fc-scroller,
-tbody > tr.fc-scrollgrid-section:first-of-type .fc-scroller {
-  overflow: hidden !important;
-}
-.navigation-controls {
-  margin-right: 40px;
-}
diff --git a/src/components/Calendar/CustomCalendar.styl b/src/components/Calendar/CustomCalendar.styl
new file mode 100644
index 0000000..09adb52
--- /dev/null
+++ b/src/components/Calendar/CustomCalendar.styl
@@ -0,0 +1,226 @@
+/* Custom main calendar view */
+.fc-theme-standard td,
+.fc-theme-standard th
+  border 1px solid #b8c1cc
+
+th.fc-col-header-cell.fc-day
+  border-left 0
+
+a.fc-timegrid-axis-cushion
+  color #243b55
+  text-align center
+  font-family Roboto
+  font-size 12.507px
+  font-style normal
+  font-weight 400
+  line-height 18.76px
+  letter-spacing 0.391px
+
+/* Slot label visibility transitions */
+.fc-timegrid-slot-label
+  transition opacity 0.3s ease-in-out
+
+.fc-daygrid-day-top small
+  color #8c9caf
+  font-size 14px
+  font-style normal
+  font-weight 500
+  line-height 20px
+  letter-spacing 0.25px
+  font-family "Inter", sans-serif
+
+.fc-daygrid-day-top .fc-daygrid-day-number,
+span.fc-daygrid-day-number
+  color #243b55
+  margin 0 6px 0 0
+  font-family Roboto
+  font-size 28px
+  font-style normal
+  font-weight 400
+  line-height 36px
+  position relative
+  width 48px
+  height 48px
+  line-height 39px
+
+.fc-daygrid-day-top .fc-daygrid-day-number:after,
+span.fc-daygrid-day-number:after
+  content ""
+  z-index -1
+  border-radius 50%
+  width 45px
+  height 45px
+  position absolute
+  top 1px
+  left 1px
+  transition background-color 0.3s ease
+
+span.fc-daygrid-day-number.current-date
+  color #fff
+
+span.fc-daygrid-day-number.current-date:after
+  background-color #f67e35
+
+td.fc-timegrid-slot.fc-timegrid-slot-label.fc-scrollgrid-shrink,
+td.fc-timegrid-slot.fc-timegrid-slot-label.fc-timegrid-slot-minor
+  border 0
+
+th.fc-timegrid-axis.fc-scrollgrid-shrink
+  border 0
+  border-right 1px solid #b8c1cc
+
+.fc .fc-timegrid-axis-cushion
+  min-width 80px
+  max-width 80px
+  padding 0
+  text-align left
+  font-family Roboto
+  font-size 12.507px
+  font-style normal
+  font-weight 400
+  line-height 18.76px
+  padding 0 0 0 10px
+
+.fc .fc-timegrid-divider
+  display none
+  height 0
+
+.fc-timegrid-slot-label-cushion
+  color #aea9b1
+  font-family Roboto
+  font-size 14px
+  font-style normal
+  font-weight 400
+  line-height 20px
+  letter-spacing 0.25px
+
+th.fc-col-header-cell.fc-day
+  border-right 0
+  border-bottom 0
+
+.fc .fc-scrollgrid
+  border 0
+
+.fc .fc-timegrid-slot-label
+  justify-content flex-end
+
+.fc .fc-timegrid-slot-label .fc-timegrid-slot-label-frame
+  position relative
+  transform translate(-15px, -12px)
+
+/* .fc tbody tr:first-of-type .fc-timegrid-slot-label .fc-timegrid-slot-label-frame
+  display none */
+
+.fc .fc-timegrid-slot-label .fc-timegrid-slot-label-frame::after
+  content ""
+  z-index -1
+  background-color #b8c1cc
+  width 10px
+  height 1px
+  position absolute
+  top 9.5px
+  right -15px
+
+.fc .fc-timegrid-col.fc-day-today,
+.fc .fc-daygrid-day.fc-day-today
+  background-color #fff
+
+.fc .fc-daygrid-body-unbalanced .fc-daygrid-day-events
+  min-height 36px
+
+.fc .fc-daygrid-body-natural .fc-daygrid-day-events
+  margin-bottom 0
+
+.fc .fc-timegrid-now-indicator-line
+  z-index 5
+  border 0 solid #f67e35
+  border-top-width 2px
+  position absolute
+  left 0
+  right 0
+
+.fc .fc-timegrid-now-indicator-line::after
+  content ""
+  z-index 5
+  background-color #f67e35
+  border-radius 50%
+  width 10px
+  height 10px
+  position absolute
+  top -6px
+  left -5px
+
+.fc .fc-timegrid-now-indicator-arrow
+  display block !important
+  width auto
+  height auto
+  position relative
+  border 0
+
+.fc .fc-timegrid-now-indicator-arrow::before
+  content attr(data-time)
+  color #f67e35
+  white-space nowrap
+  font-family Roboto, sans-serif
+  font-weight 600
+  position absolute
+  top -2px
+  left 25px
+  font-size 14px
+  letter-spacing 0.25px
+
+.fc-day-today .fc-timegrid-now-indicator-container
+  overflow unset
+
+.fc .fc-timegrid-slot
+  height auto
+  min-height 20px !important
+
+.fc .fc-timegrid-slot-label
+  display flex
+  align-items flex-start
+  padding-top 2px
+  height 100%
+
+tr:has(> td.fc-timegrid-divider.fc-cell-shaded)
+  display none
+
+.fc .fc-scrollgrid-section td
+  border-bottom 0
+
+.fc .fc-scrollgrid-section td .fc-daygrid-day-frame
+  border-bottom 1px solid #b8c1cc
+
+th.fc-col-header-cell.fc-day
+  cursor pointer
+
+th.fc-col-header-cell.fc-day:hover .fc-daygrid-day-number:not(.current-date)::after
+  background-color #b8c1cc56
+
+/* Hover effects for month view using CSS */
+.fc-daygrid-day:hover
+  background-color #b8c1cc1a !important
+  transition background-color 0.3s ease
+
+/* Hover effects for week and day views using JavaScript */
+.hoverable-day-cell
+  transition background-color 0.3s ease
+
+.hour-highlight
+  transition background-color 0.3s ease
+  background-color #b8c1cc1a !important
+  position absolute
+  left 0
+  right 0
+  pointer-events none
+  z-index 1
+
+.fc-timegrid-slot-label
+  background-color #fff !important
+
+thead .fc-scroller,
+tbody > tr.fc-scrollgrid-section:first-of-type .fc-scroller
+  overflow hidden !important
+
+.navigation-controls
+  margin-right 40px
diff --git a/src/components/Event/EventRepeat.tsx b/src/components/Event/EventRepeat.tsx
index 8439955..df065f9 100644
--- a/src/components/Event/EventRepeat.tsx
+++ b/src/components/Event/EventRepeat.tsx
@@ -98,7 +98,7 @@ export default function RepeatEvent({
                 })
               }
               size="small"
-              sx={{ width: 80 }}
+              style={{ width: 80 }}
             />
             <Typography>
               {
@@ -136,7 +136,7 @@ export default function RepeatEvent({
 
           {/* End options */}
           <Box>
-            <Typography variant="body2" gutterBottom sx={{ mt: 2 }}>
+            <Typography variant="body2" gutterBottom style={{ marginTop: 16 }}>
               End:
             </Typography>
             <RadioGroup
@@ -187,7 +187,7 @@ export default function RepeatEvent({
                           occurrences: Number(e.target.value),
                         })
                       }
-                      sx={{ width: 100 }}
+                      style={{ width: 100 }}
                       inputProps={{ min: 1 }}
                       disabled={endOption !== "after"}
                     />
diff --git a/src/components/Menubar/Menubar.css b/src/components/Menubar/Menubar.css
deleted file mode 100644
index 617bc20..0000000
--- a/src/components/Menubar/Menubar.css
+++ /dev/null
@@ -1,107 +0,0 @@
-/* Basic reset */
-* {
-  margin: 0;
-  padding: 0;
-  box-sizing: border-box;
-}
-
-.twake {
-  font-family: "Cal Sans";
-  font-weight: 400;
-  font-size: 28.07px;
-  line-height: 100%;
-  letter-spacing: 0%;
-  text-align: center;
-  vertical-align: middle;
-  padding: 0.2rem;
-}
-
-.calendar-text {
-  font-family: "Cal Sans";
-  padding: 0.2rem;
-  font-weight: 400;
-  font-size: 28.07px;
-  line-height: 100%;
-  letter-spacing: 0%;
-  text-align: center;
-  vertical-align: middle;
-  background: linear-gradient(180deg, #ffb73d, #f26c32);
-  -webkit-background-clip: text;
-  -webkit-text-fill-color: transparent;
-
-  /* Optional for broader support */
-  background-clip: text;
-  color: transparent;
-}
-
-/* Menubar styles */
-.menubar {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 0.5rem;
-  width: 100%;
-  z-index: 1000;
-  height: 80px;
-  background-color: #fff;
-}
-
-.menubar-item {
-  display: flex;
-  align-items: center;
-  width: calc(330px - 0.5rem);
-}
-
-.logo {
-  padding: 0.5rem 1rem;
-  font-size: 1.5rem;
-}
-
-.nav-month {
-  padding-right: 2px;
-  padding-left: 2px;
-  gap: 38px;
-}
-
-.day-selector {
-  font-weight: 100;
-  font-size: small;
-}
-
-.search-bar {
-  width: 600;
-  height: 43.88999938964844;
-  top: 18px;
-  left: 887px;
-}
-
-.app-grid {
-  display: grid;
-  grid-template-columns: repeat(3, 1fr);
-  gap: 16px;
-  padding: 16px;
-  justify-items: center;
-  align-items: center;
-}
-
-.app-grid img {
-  width: 48px;
-  height: 48px;
-}
-
-.app-grid p {
-  margin-top: 6px;
-  font-size: 14px;
-  text-align: center;
-}
-
-.left-menu {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-}
-.right-menu {
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-}
diff --git a/src/components/Menubar/Menubar.styl b/src/components/Menubar/Menubar.styl
new file mode 100644
index 0000000..cc5f1bb
--- /dev/null
+++ b/src/components/Menubar/Menubar.styl
@@ -0,0 +1,93 @@
+/* Basic reset */
+*
+  margin 0
+  padding 0
+  box-sizing border-box
+
+.twake
+  font-family "Cal Sans"
+  font-weight 400
+  font-size 28.07px
+  line-height 100%
+  letter-spacing 0%
+  text-align center
+  vertical-align middle
+  padding 0.2rem
+
+.calendar-text
+  font-family "Cal Sans"
+  padding 0.2rem
+  font-weight 400
+  font-size 28.07px
+  line-height 100%
+  letter-spacing 0%
+  text-align center
+  vertical-align middle
+  background linear-gradient(180deg, #ffb73d, #f26c32)
+  -webkit-background-clip text
+  -webkit-text-fill-color transparent
+  /* Optional for broader support */
+  background-clip text
+  color transparent
+
+/* Menubar styles */
+.menubar
+  display flex
+  justify-content space-between
+  align-items center
+  padding 0.5rem
+  width 100%
+  z-index 1000
+  height 80px
+  background-color #fff
+
+.menubar-item
+  display flex
+  align-items center
+  width calc(330px - 0.5rem)
+
+.logo
+  padding 0.5rem 1rem
+  font-size 1.5rem
+
+.nav-month
+  padding-right 2px
+  padding-left 2px
+  gap 38px
+
+.day-selector
+  font-weight 100
+  font-size small
+
+.search-bar
+  width 600
+  height 43.88999938964844
+  top 18px
+  left 887px
+
+.app-grid
+  display grid
+  grid-template-columns repeat(3, 1fr)
+  gap 16px
+  padding 16px
+  justify-items center
+  align-items center
+
+.app-grid img
+  width 48px
+  height 48px
+
+.app-grid p
+  margin-top 6px
+  font-size 14px
+  text-align center
+
+.left-menu
+  display flex
+  align-items center
+  justify-content flex-start
+
+.right-menu
+  display flex
+  justify-content flex-end
+  align-items center
diff --git a/src/components/Menubar/Menubar.tsx b/src/components/Menubar/Menubar.tsx
index 308ea76..bbcb17f 100644
--- a/src/components/Menubar/Menubar.tsx
+++ b/src/components/Menubar/Menubar.tsx
@@ -4,7 +4,7 @@ import AppsIcon from "@mui/icons-material/Apps";
 import RefreshIcon from "@mui/icons-material/Refresh";
 import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
 import ChevronRightIcon from "@mui/icons-material/ChevronRight";
-import "./Menubar.css";
+import "./Menubar.styl";
 import { useAppDispatch, useAppSelector } from "../../app/hooks";
 import { stringToColor } from "../../features/Events/EventDisplay";
 import {
@@ -141,7 +141,10 @@ export function Menubar({
             </IconButton>
           </div>
           <div className="menu-items">
-            <FormControl size="small" sx={{ minWidth: 120, mr: 2 }}>
+            <FormControl
+              size="small"
+              style={{ minWidth: 120, marginRight: 16 }}
+            >
               <Select
                 value={currentView}
                 onChange={(e) => handleViewChange(e.target.value)}
@@ -155,15 +158,15 @@ export function Menubar({
           </div>
           <div className="menu-items">
             {applist.length > 0 && (
-              <IconButton onClick={handleOpen} sx={{ mr: 1 }}>
+              <IconButton onClick={handleOpen} style={{ marginRight: 8 }}>
                 <AppsIcon />
               </IconButton>
             )}
           </div>
           <div className="menu-items">
             <Avatar
-              sx={{
-                bgcolor: stringToColor(
+              style={{
+                backgroundColor: stringToColor(
                   user && user.family_name
                     ? user.family_name
                     : user && user.email
diff --git a/src/features/Events/EventDisplay.tsx b/src/features/Events/EventDisplay.tsx
index 68df66f..b95b188 100644
--- a/src/features/Events/EventDisplay.tsx
+++ b/src/features/Events/EventDisplay.tsx
@@ -203,7 +203,7 @@ export default function EventDisplayModal({
           <MenuItem key={index} value={index}>
             <Typography variant="body2">
               <CircleIcon
-                sx={{
+                style={{
                   color: userPersonnalCalendars[index].color ?? "#3788D8",
                   width: 12,
                   height: 12,
@@ -217,7 +217,7 @@ export default function EventDisplayModal({
           <MenuItem key={index} value={index}>
             <Typography variant="body2">
               <CircleIcon
-                sx={{
+                style={{
                   color: calendars[index].color ?? "#3788D8",
                   width: 12,
                   height: 12,
@@ -231,7 +231,7 @@ export default function EventDisplayModal({
   return (
     <Modal open={open} onClose={onClose}>
       <Box
-        sx={{
+        style={{
           position: "absolute",
           top: "5vh",
           left: "50%",
@@ -240,9 +240,9 @@ export default function EventDisplayModal({
           maxHeight: "80vh",
         }}
       >
-        <Card sx={{ p: 2, position: "absolute" }}>
+        <Card style={{ padding: 16, position: "absolute" }}>
           {/* Close button */}
-          <Box sx={{ position: "absolute", top: 8, right: 8 }}>
+          <Box style={{ position: "absolute", top: 8, right: 8 }}>
             <IconButton
               size="small"
               onClick={() => onClose({}, "backdropClick")}
@@ -253,7 +253,7 @@ export default function EventDisplayModal({
 
           <CardHeader title={isOwn ? "Edit Event" : "Event Details"} />
 
-          <CardContent sx={{ maxHeight: "75vh", overflow: "auto" }}>
+          <CardContent style={{ maxHeight: "75vh", overflow: "auto" }}>
             {/* Title */}
             <TextField
               fullWidth
@@ -267,7 +267,7 @@ export default function EventDisplayModal({
 
             {/* RSVP */}
             {currentUserAttendee && isOwnCal && (
-              <Card sx={{ my: 1 }}>
+              <Card style={{ margin: "8px 0" }}>
                 <ButtonGroup size="small" fullWidth>
                   <Button
                     color={
@@ -408,7 +408,7 @@ export default function EventDisplayModal({
             {/* Video */}
             {event.x_openpass_videoconference && (
               <InfoRow
-                icon={<VideocamIcon sx={{ fontSize: 18 }} />}
+                icon={<VideocamIcon style={{ fontSize: 18 }} />}
                 text="Video conference available"
                 data={event.x_openpass_videoconference}
               />
@@ -416,7 +416,7 @@ export default function EventDisplayModal({
 
             {/* Attendees */}
             {event.attendee?.length > 0 && (
-              <Box sx={{ mb: 1 }}>
+              <Box style={{ marginBottom: 8 }}>
                 <Typography variant="subtitle2">Attendees:</Typography>
                 {organizer.cal_address &&
                   renderAttendeeBadge(organizer, "org", true)}
@@ -444,7 +444,7 @@ export default function EventDisplayModal({
                   <Typography
                     variant="body2"
                     color="primary"
-                    sx={{ cursor: "pointer", mt: 0.5 }}
+                    style={{ cursor: "pointer", marginTop: 4 }}
                     onClick={() => setShowAllAttendees(!showAllAttendees)}
                   >
                     {showAllAttendees
@@ -457,7 +457,7 @@ export default function EventDisplayModal({
               </Box>
             )}
 
-            <Divider sx={{ my: 1 }} />
+            <Divider style={{ margin: "8px 0" }} />
 
             {/* Extended options */}
             {showMore && (
@@ -527,7 +527,10 @@ export default function EventDisplayModal({
                 {event.error && (
                   <InfoRow
                     icon={
-                      <ErrorOutlineIcon color="error" sx={{ fontSize: 18 }} />
+                      <ErrorOutlineIcon
+                        color="error"
+                        style={{ fontSize: 18 }}
+                      />
                     }
                     text={event.error}
                     error
@@ -581,7 +584,9 @@ export function InfoRow({
   data?: string;
 }) {
   return (
-    <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 1 }}>
+    <Box
+      style={{ display: "flex", alignItems: "center", gap: 8, marginBottom: 8 }}
+    >
       {icon}
       <Typography variant="body2" color={error ? "error" : "textPrimary"}>
         {isValidUrl(data) ? <Link href={data}>{text}</Link> : text}
@@ -605,13 +610,13 @@ export function renderAttendeeBadge(
   return (
     <Box
       key={key}
-      sx={{
+      style={{
         display: "flex",
         alignItems: "center",
-        gap: 1.5,
-        mb: 0.5,
-        p: 0.5,
-        borderRadius: 1,
+        gap: 12,
+        marginBottom: 4,
+        padding: 4,
+        borderRadius: 4,
       }}
     >
       <Badge
@@ -620,7 +625,7 @@ export function renderAttendeeBadge(
         badgeContent={
           classIcon && (
             <Box
-              sx={{
+              style={{
                 fontSize: 14,
                 lineHeight: 0,
                 backgroundColor: "white",
@@ -635,11 +640,11 @@ export function renderAttendeeBadge(
       >
         <Avatar {...stringAvatar(a.cn || a.cal_address)} />
       </Badge>
-      <Box sx={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
+      <Box style={{ display: "flex", flexDirection: "column", minWidth: 0 }}>
         <Typography
           variant="body2"
           noWrap
-          sx={{
+          style={{
             maxWidth: "180px",
             overflow: "hidden",
             textOverflow: "ellipsis",
@@ -651,7 +656,7 @@ export function renderAttendeeBadge(
           <Typography
             variant="caption"
             color="text.secondary"
-            sx={{ fontStyle: "italic" }}
+            style={{ fontStyle: "italic" }}
           >
             Organizer
           </Typography>
diff --git a/src/features/Events/EventDisplayPreview.tsx b/src/features/Events/EventDisplayPreview.tsx
index 4583bab..f70c989 100644
--- a/src/features/Events/EventDisplayPreview.tsx
+++ b/src/features/Events/EventDisplayPreview.tsx
@@ -115,15 +115,15 @@ export default function EventPreviewModal({
         anchorPosition={anchorPosition ?? undefined}
         onClose={onClose}
       >
-        <Card sx={{ width: 300, p: 2, position: "relative" }}>
+        <Card style={{ width: 300, padding: 16, position: "relative" }}>
           {/* Top-right buttons */}
           <Box
-            sx={{
+            style={{
               position: "absolute",
               top: 8,
               right: 8,
               display: "flex",
-              gap: 1,
+              gap: 8,
             }}
           >
             {(window as any).DEBUG && (
@@ -205,12 +205,12 @@ export default function EventPreviewModal({
             </IconButton>
           </Box>
 
-          <CardContent sx={{ pt: 1.5 }}>
+          <CardContent style={{ paddingTop: 12 }}>
             {event.title && (
               <Typography
                 variant="h6"
                 fontWeight="bold"
-                sx={{
+                style={{
                   wordBreak: "break-word",
                 }}
                 gutterBottom
@@ -230,7 +230,7 @@ export default function EventPreviewModal({
             {/* Location */}
             {event.location && (
               <InfoRow
-                icon={<LocationOnIcon sx={{ fontSize: 18 }} />}
+                icon={<LocationOnIcon style={{ fontSize: 18 }} />}
                 text={event.location}
               />
             )}
@@ -238,7 +238,7 @@ export default function EventPreviewModal({
             {/* Video */}
             {event.x_openpass_videoconference && (
               <InfoRow
-                icon={<VideocamIcon sx={{ fontSize: 18 }} />}
+                icon={<VideocamIcon style={{ fontSize: 18 }} />}
                 text="Video conference available"
                 data={event.x_openpass_videoconference}
               />
@@ -246,7 +246,7 @@ export default function EventPreviewModal({
 
             {/* Attendees */}
             {event.attendee?.length > 0 && (
-              <Box sx={{ mb: 1 }}>
+              <Box style={{ marginBottom: 8 }}>
                 <Typography variant="subtitle2">Attendees:</Typography>
                 {organizer && renderAttendeeBadge(organizer, "org", true)}
                 {visibleAttendees.map((a, idx) =>
@@ -256,7 +256,7 @@ export default function EventPreviewModal({
                   <Typography
                     variant="body2"
                     color="primary"
-                    sx={{ cursor: "pointer", mt: 0.5 }}
+                    style={{ cursor: "pointer", marginTop: 4 }}
                     onClick={() => setShowAllAttendees(!showAllAttendees)}
                   >
                     {showAllAttendees
@@ -272,17 +272,26 @@ export default function EventPreviewModal({
             {/* Error */}
             {event.error && (
               <InfoRow
-                icon={<ErrorOutlineIcon color="error" sx={{ fontSize: 18 }} />}
+                icon={
+                  <ErrorOutlineIcon color="error" style={{ fontSize: 18 }} />
+                }
                 text={event.error}
                 error
               />
             )}
 
             {/* Calendar color dot */}
-            <Box sx={{ display: "flex", alignItems: "center", gap: 1, mb: 2 }}>
-              <CalendarTodayIcon sx={{ fontSize: 16 }} />
+            <Box
+              style={{
+                display: "flex",
+                alignItems: "center",
+                gap: 8,
+                marginBottom: 16,
+              }}
+            >
+              <CalendarTodayIcon style={{ fontSize: 16 }} />
               <CircleIcon
-                sx={{
+                style={{
                   color: calendar.color ?? "#3788D8",
                   width: 12,
                   height: 12,
@@ -291,12 +300,12 @@ export default function EventPreviewModal({
               <Typography variant="body2">{calendar.name}</Typography>
             </Box>
 
-            <Divider sx={{ mb: 1 }} />
+            <Divider style={{ marginBottom: 8 }} />
 
             {/* RSVP */}
             {currentUserAttendee && (
               <Box>
-                <Typography variant="body2" sx={{ mb: 1 }}>
+                <Typography variant="body2" style={{ marginBottom: 8 }}>
                   Will you attend?
                 </Typography>
                 <ButtonGroup size="small" fullWidth>
@@ -336,7 +345,7 @@ export default function EventPreviewModal({
 
             {/* Description */}
             {event.description && (
-              <Typography variant="body2" sx={{ mt: 1 }}>
+              <Typography variant="body2" style={{ marginTop: 8 }}>
                 {event.description}
               </Typography>
             )}
diff --git a/src/features/Events/EventModal.tsx b/src/features/Events/EventModal.tsx
index abedf74..b3c5bf9 100644
--- a/src/features/Events/EventModal.tsx
+++ b/src/features/Events/EventModal.tsx
@@ -190,7 +190,7 @@ function EventPopover({
       <Card>
         <CardHeader title={event?.uid ? "Duplicate Event" : "Create Event"} />
         <CardContent
-          sx={{ maxHeight: "85vh", maxWidth: "40vw", overflow: "auto" }}
+          style={{ maxHeight: "85vh", maxWidth: "40vw", overflow: "auto" }}
         >
           <TextField
             fullWidth
diff --git a/src/index.css b/src/index.css
deleted file mode 100644
index 7e1aa8d..0000000
--- a/src/index.css
+++ /dev/null
@@ -1,13 +0,0 @@
-body {
-  margin: 0;
-  font-family:
-    -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu",
-    "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-code {
-  font-family:
-    source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace;
-}
diff --git a/src/index.styl b/src/index.styl
new file mode 100644
index 0000000..5187b24
--- /dev/null
+++ b/src/index.styl
@@ -0,0 +1,8 @@
+body
+  margin 0
+  font-family -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif
+  -webkit-font-smoothing antialiased
+  -moz-osx-font-smoothing grayscale
+
+code
+  font-family source-code-pro, Menlo, Monaco, Consolas, "Courier New", monospace