diff --git a/AGENTS.md b/AGENTS.md
index a349e13..aa93e78 100644
--- a/AGENTS.md
+++ b/AGENTS.md
@@ -8,6 +8,18 @@ Currently mid migration from go templates (`./templates`) to React App (`./front
 - **Frontend**: React with Vite, currently migrating from Go templates (using the V1 API)
 - **API**: OpenAPI 3.0 spec, generates Go server (oapi-codegen) and TS client (orval)
 
+## Frontend Linting
+The frontend uses ESLint and Prettier for code quality and formatting.
+
+### Running Linting
+- **Check linting**: `cd frontend && npm run lint`
+- **Fix linting issues**: `cd frontend && npm run lint:fix`
+- **Check formatting**: `cd frontend && npm run format`
+- **Format files**: `cd frontend && npm run format:fix`
+
+### When to Run Linting
+Run linting after making any changes to the frontend to ensure code quality and consistency. All new code should pass linting before committing.
+
 ## Data Flow (CRITICAL for migrations)
 1. Database schema → SQL queries (`database/query.sql`, `database/query.sql.go`)
 2. SQLC models → API handlers (`api/v1/*.go`)  
@@ -24,6 +36,12 @@ Currently mid migration from go templates (`./templates`) to React App (`./front
 - Go backend: `go generate ./api/v1/generate.go`
 - TS client: `cd frontend && npm run generate:api`
 
+## Frontend Key Files and Directories
+- **Source code**: `frontend/src/`
+- **Configuration**: `frontend/eslint.config.js`, `frontend/.prettierrc`, `frontend/tsconfig.json`
+- **Build output**: `frontend/dist/`
+- **Generated API client**: `frontend/src/generated/`
+
 ## Key Files
 - Database queries: `database/query.sql` → SQLc Query shows actual fields returned
 - SQLC models: `database/query.sql.go` → SQLc Generated Go struct definitions
diff --git a/frontend/.prettierrc b/frontend/.prettierrc
new file mode 100644
index 0000000..e800a8d
--- /dev/null
+++ b/frontend/.prettierrc
@@ -0,0 +1,11 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "useTabs": false,
+  "trailingComma": "es5",
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "endOfLine": "lf"
+}
diff --git a/frontend/eslint.config.js b/frontend/eslint.config.js
new file mode 100644
index 0000000..a7293ef
--- /dev/null
+++ b/frontend/eslint.config.js
@@ -0,0 +1,50 @@
+import js from "@eslint/js";
+import typescriptParser from "@typescript-eslint/parser";
+import typescriptPlugin from "@typescript-eslint/eslint-plugin";
+import reactPlugin from "eslint-plugin-react";
+import reactHooksPlugin from "eslint-plugin-react-hooks";
+import tailwindcss from "eslint-plugin-tailwindcss";
+import prettier from "eslint-plugin-prettier";
+import eslintConfigPrettier from "eslint-config-prettier";
+
+export default [
+  js.configs.recommended,
+  reactPlugin.configs.flat.recommended,
+  reactHooksPlugin.configs.flat.recommended,
+  {
+    files: ["**/*.ts", "**/*.tsx", "**/*.css"],
+    ignores: ["**/generated/**"],
+    languageOptions: {
+      parser: typescriptParser,
+      parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        ecmaFeatures: {
+          jsx: true,
+        },
+      },
+    },
+    plugins: {
+      "@typescript-eslint": typescriptPlugin,
+      tailwindcss,
+      prettier,
+    },
+    rules: {
+      ...eslintConfigPrettier.rules,
+      ...tailwindcss.configs.recommended.rules,
+      "react/react-in-jsx-scope": "off",
+      "react/prop-types": "off",
+      "no-console": ["warn", { allow: ["warn", "error"] }],
+      "@typescript-eslint/no-explicit-any": "warn",
+      "@typescript-eslint/no-unused-vars": [
+        "error",
+        { argsIgnorePattern: "^_" },
+      ],
+    },
+    settings: {
+      react: {
+        version: "detect",
+      },
+    },
+  },
+];
diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6a8ce16..19540cb 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -20,10 +20,19 @@
       "devDependencies": {
         "@types/react": "^19.0.8",
         "@types/react-dom": "^19.0.8",
+        "@typescript-eslint/eslint-plugin": "^8.57.0",
+        "@typescript-eslint/parser": "^8.57.0",
         "@vitejs/plugin-react": "^4.3.4",
         "autoprefixer": "^10.4.20",
+        "eslint": "^9.39.4",
+        "eslint-config-prettier": "^10.1.8",
+        "eslint-plugin-prettier": "^5.5.5",
+        "eslint-plugin-react": "^7.37.5",
+        "eslint-plugin-react-hooks": "^7.0.1",
+        "eslint-plugin-tailwindcss": "^3.18.2",
         "orval": "^7.5.0",
         "postcss": "^8.4.49",
+        "prettier": "^3.8.1",
         "tailwindcss": "^3.4.17",
         "typescript": "~5.6.2",
         "vite": "^6.0.5"
@@ -838,6 +847,223 @@
         "node": ">=18"
       }
     },
+    "node_modules/@eslint-community/eslint-utils": {
+      "version": "4.9.1",
+      "resolved": "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.9.1.tgz",
+      "integrity": "sha512-phrYmNiYppR7znFEdqgfWHXR6NCkZEK7hwWDHZUjit/2/U0r6XvkDl0SYnoM51Hq7FhCGdLDT6zxCCOY1hexsQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "eslint-visitor-keys": "^3.4.3"
+      },
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      },
+      "peerDependencies": {
+        "eslint": "^6.0.0 || ^7.0.0 || >=8.0.0"
+      }
+    },
+    "node_modules/@eslint-community/regexpp": {
+      "version": "4.12.2",
+      "resolved": "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.12.2.tgz",
+      "integrity": "sha512-EriSTlt5OC9/7SXkRSCAhfSxxoSUgBm33OH+IkwbdpgoqsSsUg7y3uh+IICI/Qg4BBWr3U2i39RpmycbxMq4ew==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.0.0 || ^14.0.0 || >=16.0.0"
+      }
+    },
+    "node_modules/@eslint/config-array": {
+      "version": "0.21.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-array/-/config-array-0.21.2.tgz",
+      "integrity": "sha512-nJl2KGTlrf9GjLimgIru+V/mzgSK0ABCDQRvxw5BjURL7WfH5uoWmizbH7QB6MmnMBd8cIC9uceWnezL1VZWWw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/object-schema": "^2.1.7",
+        "debug": "^4.3.1",
+        "minimatch": "^3.1.5"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@eslint/config-array/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/config-array/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/config-helpers": {
+      "version": "0.4.2",
+      "resolved": "https://registry.npmjs.org/@eslint/config-helpers/-/config-helpers-0.4.2.tgz",
+      "integrity": "sha512-gBrxN88gOIf3R7ja5K9slwNayVcZgK6SOUORm2uBzTeIEfeVaIhOpCtTox3P6R7o2jLFwLFTLnC7kU/RGcYEgw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/core": {
+      "version": "0.17.0",
+      "resolved": "https://registry.npmjs.org/@eslint/core/-/core-0.17.0.tgz",
+      "integrity": "sha512-yL/sLrpmtDaFEiUj1osRP4TI2MDz1AddJL+jZ7KSqvBuliN4xqYY54IfdN8qD8Toa6g1iloph1fxQNkjOxrrpQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@types/json-schema": "^7.0.15"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/eslintrc": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-3.3.5.tgz",
+      "integrity": "sha512-4IlJx0X0qftVsN5E+/vGujTRIFtwuLbNsVUe7TO6zYPDR1O6nFwvwhIKEKSrl6dZchmYBITazxKoUYOjdtjlRg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "ajv": "^6.14.0",
+        "debug": "^4.3.2",
+        "espree": "^10.0.1",
+        "globals": "^14.0.0",
+        "ignore": "^5.2.0",
+        "import-fresh": "^3.2.1",
+        "js-yaml": "^4.1.1",
+        "minimatch": "^3.1.5",
+        "strip-json-comments": "^3.1.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@eslint/eslintrc/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/@eslint/eslintrc/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/@eslint/eslintrc/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/@eslint/js": {
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/@eslint/js/-/js-9.39.4.tgz",
+      "integrity": "sha512-nE7DEIchvtiFTwBw4Lfbu59PG+kCofhjsKaCWzxTpt4lfRjRMqG6uMBzKXuEcyXhOHoUp9riAm7/aWYGhXZ9cw==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      }
+    },
+    "node_modules/@eslint/object-schema": {
+      "version": "2.1.7",
+      "resolved": "https://registry.npmjs.org/@eslint/object-schema/-/object-schema-2.1.7.tgz",
+      "integrity": "sha512-VtAOaymWVfZcmZbp6E2mympDIHvyjXs/12LqWYjVw6qjrfF+VK+fyG33kChz3nnK+SU5/NeHOqrTEHS8sXO3OA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
+    "node_modules/@eslint/plugin-kit": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.4.1.tgz",
+      "integrity": "sha512-43/qtrDUokr7LJqoF2c3+RInu/t4zfrpYdoSDfYyhg52rwLV6TnOvdG4fXm7IkSB3wErkcmJS9iEhjVtOSEjjA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@eslint/core": "^0.17.0",
+        "levn": "^0.4.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      }
+    },
     "node_modules/@exodus/schemasafe": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/@exodus/schemasafe/-/schemasafe-1.3.0.tgz",
@@ -859,6 +1085,58 @@
         "@shikijs/vscode-textmate": "^10.0.2"
       }
     },
+    "node_modules/@humanfs/core": {
+      "version": "0.19.1",
+      "resolved": "https://registry.npmjs.org/@humanfs/core/-/core-0.19.1.tgz",
+      "integrity": "sha512-5DyQ4+1JEUzejeK1JGICcideyfUbGixgS9jNgex5nqkW+cY7WZhxBigmieN5Qnw9ZosSNVC9KQKyb+GUaGyKUA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanfs/node": {
+      "version": "0.16.7",
+      "resolved": "https://registry.npmjs.org/@humanfs/node/-/node-0.16.7.tgz",
+      "integrity": "sha512-/zUx+yOsIrG4Y43Eh2peDeKCxlRt/gET6aHfaKpuq267qXdYDFViVHfMaLyygZOnl0kGWxFIgsBy8QFuTLUXEQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "@humanfs/core": "^0.19.1",
+        "@humanwhocodes/retry": "^0.4.0"
+      },
+      "engines": {
+        "node": ">=18.18.0"
+      }
+    },
+    "node_modules/@humanwhocodes/module-importer": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/module-importer/-/module-importer-1.0.1.tgz",
+      "integrity": "sha512-bxveV4V8v5Yb4ncFTT3rPSgZBOpCkjfK0y4oVVVJwIuDVBRMDXrPyXRL988i5ap9m9bnyEEjWfm5WkBmtffLfA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=12.22"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
+    "node_modules/@humanwhocodes/retry": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/@humanwhocodes/retry/-/retry-0.4.3.tgz",
+      "integrity": "sha512-bV0Tgo9K4hfPCek+aMAn81RppFKv2ySDQeMoSZuvTASywNTnVJCArCZE2FWqpvIatKu7VMRLWlR1EazvVhDyhQ==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": ">=18.18"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/nzakas"
+      }
+    },
     "node_modules/@ibm-cloud/openapi-ruleset": {
       "version": "1.33.8",
       "resolved": "https://registry.npmjs.org/@ibm-cloud/openapi-ruleset/-/openapi-ruleset-1.33.8.tgz",
@@ -1153,6 +1431,19 @@
         "openapi3-ts": "4.5.0"
       }
     },
+    "node_modules/@pkgr/core": {
+      "version": "0.2.9",
+      "resolved": "https://registry.npmjs.org/@pkgr/core/-/core-0.2.9.tgz",
+      "integrity": "sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": "^12.20.0 || ^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pkgr"
+      }
+    },
     "node_modules/@rolldown/pluginutils": {
       "version": "1.0.0-beta.27",
       "resolved": "https://registry.npmjs.org/@rolldown/pluginutils/-/pluginutils-1.0.0-beta.27.tgz",
@@ -2053,6 +2344,262 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@typescript-eslint/eslint-plugin": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-8.57.0.tgz",
+      "integrity": "sha512-qeu4rTHR3/IaFORbD16gmjq9+rEs9fGKdX0kF6BKSfi+gCuG3RCKLlSBYzn/bGsY9Tj7KE/DAQStbp8AHJGHEQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/regexpp": "^4.12.2",
+        "@typescript-eslint/scope-manager": "8.57.0",
+        "@typescript-eslint/type-utils": "8.57.0",
+        "@typescript-eslint/utils": "8.57.0",
+        "@typescript-eslint/visitor-keys": "8.57.0",
+        "ignore": "^7.0.5",
+        "natural-compare": "^1.4.0",
+        "ts-api-utils": "^2.4.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      },
+      "peerDependencies": {
+        "@typescript-eslint/parser": "^8.57.0",
+        "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "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/parser": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-8.57.0.tgz",
+      "integrity": "sha512-XZzOmihLIr8AD1b9hL9ccNMzEMWt/dE2u7NyTY9jJG6YNiNthaD5XtUHVF2uCXZ15ng+z2hT3MVuxnUYhq6k1g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/scope-manager": "8.57.0",
+        "@typescript-eslint/types": "8.57.0",
+        "@typescript-eslint/typescript-estree": "8.57.0",
+        "@typescript-eslint/visitor-keys": "8.57.0",
+        "debug": "^4.4.3"
+      },
+      "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 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/project-service": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/project-service/-/project-service-8.57.0.tgz",
+      "integrity": "sha512-pR+dK0BlxCLxtWfaKQWtYr7MhKmzqZxuii+ZjuFlZlIGRZm22HnXFqa2eY+90MUz8/i80YJmzFGDUsi8dMOV5w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/tsconfig-utils": "^8.57.0",
+        "@typescript-eslint/types": "^8.57.0",
+        "debug": "^4.4.3"
+      },
+      "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/scope-manager": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-8.57.0.tgz",
+      "integrity": "sha512-nvExQqAHF01lUM66MskSaZulpPL5pgy5hI5RfrxviLgzZVffB5yYzw27uK/ft8QnKXI2X0LBrHJFr1TaZtAibw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.57.0",
+        "@typescript-eslint/visitor-keys": "8.57.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/tsconfig-utils": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/tsconfig-utils/-/tsconfig-utils-8.57.0.tgz",
+      "integrity": "sha512-LtXRihc5ytjJIQEH+xqjB0+YgsV4/tW35XKX3GTZHpWtcC8SPkT/d4tqdf1cKtesryHm2bgp6l555NYcT2NLvA==",
+      "dev": true,
+      "license": "MIT",
+      "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": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/type-utils/-/type-utils-8.57.0.tgz",
+      "integrity": "sha512-yjgh7gmDcJ1+TcEg8x3uWQmn8ifvSupnPfjP21twPKrDP/pTHlEQgmKcitzF/rzPSmv7QjJ90vRpN4U+zoUjwQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.57.0",
+        "@typescript-eslint/typescript-estree": "8.57.0",
+        "@typescript-eslint/utils": "8.57.0",
+        "debug": "^4.4.3",
+        "ts-api-utils": "^2.4.0"
+      },
+      "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 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/types": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/types/-/types-8.57.0.tgz",
+      "integrity": "sha512-dTLI8PEXhjUC7B9Kre+u0XznO696BhXcTlOn0/6kf1fHaQW8+VjJAVHJ3eTI14ZapTxdkOmc80HblPQLaEeJdg==",
+      "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/typescript-estree": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-8.57.0.tgz",
+      "integrity": "sha512-m7faHcyVg0BT3VdYTlX8GdJEM7COexXxS6KqGopxdtkQRvBanK377QDHr4W/vIPAR+ah9+B/RclSW5ldVniO1Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/project-service": "8.57.0",
+        "@typescript-eslint/tsconfig-utils": "8.57.0",
+        "@typescript-eslint/types": "8.57.0",
+        "@typescript-eslint/visitor-keys": "8.57.0",
+        "debug": "^4.4.3",
+        "minimatch": "^10.2.2",
+        "semver": "^7.7.3",
+        "tinyglobby": "^0.2.15",
+        "ts-api-utils": "^2.4.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/typescript-estree/node_modules/semver": {
+      "version": "7.7.4",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.7.4.tgz",
+      "integrity": "sha512-vFKC2IEtQnVhpT78h1Yp8wzwrf8CM+MzKMHGJZfBtzhZNycRFnXsHk6E5TxIkkMsgNS7mdX3AGB7x2QM2di4lA==",
+      "dev": true,
+      "license": "ISC",
+      "bin": {
+        "semver": "bin/semver.js"
+      },
+      "engines": {
+        "node": ">=10"
+      }
+    },
+    "node_modules/@typescript-eslint/utils": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-8.57.0.tgz",
+      "integrity": "sha512-5iIHvpD3CZe06riAsbNxxreP+MuYgVUsV0n4bwLH//VJmgtt54sQeY2GszntJ4BjYCpMzrfVh2SBnUQTtys2lQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.9.1",
+        "@typescript-eslint/scope-manager": "8.57.0",
+        "@typescript-eslint/types": "8.57.0",
+        "@typescript-eslint/typescript-estree": "8.57.0"
+      },
+      "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 || ^10.0.0",
+        "typescript": ">=4.8.4 <6.0.0"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys": {
+      "version": "8.57.0",
+      "resolved": "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-8.57.0.tgz",
+      "integrity": "sha512-zm6xx8UT/Xy2oSr2ZXD0pZo7Jx2XsCoID2IUh9YSTFRu7z+WdwYTRk6LhUftm1crwqbuoF6I8zAFeCMw0YjwDg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@typescript-eslint/types": "8.57.0",
+        "eslint-visitor-keys": "^5.0.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/typescript-eslint"
+      }
+    },
+    "node_modules/@typescript-eslint/visitor-keys/node_modules/eslint-visitor-keys": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-5.0.1.tgz",
+      "integrity": "sha512-tD40eHxA35h0PEIZNeIjkHoDR4YjjJp34biM0mDvplBe//mB+IHCqHDGV7pxF+7MklTvighcCPPZC7ynWyjdTA==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^20.19.0 || ^22.13.0 || >=24"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
     "node_modules/@vitejs/plugin-react": {
       "version": "4.7.0",
       "resolved": "https://registry.npmjs.org/@vitejs/plugin-react/-/plugin-react-4.7.0.tgz",
@@ -2100,6 +2647,16 @@
         "node": ">=0.4.0"
       }
     },
+    "node_modules/acorn-jsx": {
+      "version": "5.3.2",
+      "resolved": "https://registry.npmjs.org/acorn-jsx/-/acorn-jsx-5.3.2.tgz",
+      "integrity": "sha512-rq9s+JNhf0IChjtDXxllJ7g41oZk5SlXtp0LHwyA5cejwn7vKmKp4pPri6YEePv2PU65sAsegbXtIinmDFDXgQ==",
+      "dev": true,
+      "license": "MIT",
+      "peerDependencies": {
+        "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0"
+      }
+    },
     "node_modules/ajv": {
       "version": "8.18.0",
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
@@ -2248,6 +2805,29 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/array-includes": {
+      "version": "3.1.9",
+      "resolved": "https://registry.npmjs.org/array-includes/-/array-includes-3.1.9.tgz",
+      "integrity": "sha512-FmeCCAenzH0KH381SPT5FZmiA/TmpndpcaShhfgEN9eCVjnFBqq3l1xrI42y8+PPLI6hypzou4GXw00WHmPBLQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.0",
+        "es-object-atoms": "^1.1.1",
+        "get-intrinsic": "^1.3.0",
+        "is-string": "^1.1.1",
+        "math-intrinsics": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/array-union": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/array-union/-/array-union-2.1.0.tgz",
@@ -2258,6 +2838,82 @@
         "node": ">=8"
       }
     },
+    "node_modules/array.prototype.findlast": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/array.prototype.findlast/-/array.prototype.findlast-1.2.5.tgz",
+      "integrity": "sha512-CVvd6FHg1Z3POpBLxO6E6zr+rSKEQ9L6rZHAaY7lLfhKsWYUBBOuMs0e9o24oopj6H+geRCX0YJ+TJLBK2eHyQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flat": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flat/-/array.prototype.flat-1.3.3.tgz",
+      "integrity": "sha512-rwG/ja1neyLqCuGZ5YYrznA62D4mZXg0i1cIskIUKSiqF3Cje9/wXAls9B9s1Wa2fomMsIv8czB8jZcPmxCXFg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.flatmap": {
+      "version": "1.3.3",
+      "resolved": "https://registry.npmjs.org/array.prototype.flatmap/-/array.prototype.flatmap-1.3.3.tgz",
+      "integrity": "sha512-Y7Wt51eKJSyi80hFrJCePGGNo5ktJCslFuboqJsbf57CCPcm5zztluPlc4/aD8sWsKvlwatezpV4U1efk8kpjg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.5",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/array.prototype.tosorted": {
+      "version": "1.1.4",
+      "resolved": "https://registry.npmjs.org/array.prototype.tosorted/-/array.prototype.tosorted-1.1.4.tgz",
+      "integrity": "sha512-p6Fx8B7b7ZhL/gmUsAy0D15WhvDccw3mnGNbZpi3pmeJdxtWsj2jEaI4Y6oo3XiHfzuSgPwKc04MYt6KgvC/wA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.3",
+        "es-errors": "^1.3.0",
+        "es-shim-unscopables": "^1.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/arraybuffer.prototype.slice": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/arraybuffer.prototype.slice/-/arraybuffer.prototype.slice-1.0.4.tgz",
@@ -2522,6 +3178,16 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/callsites": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/callsites/-/callsites-3.1.0.tgz",
+      "integrity": "sha512-P8BjAsXvZS+VIDUI11hHCQEv74YT67YUi5JJFNWIqL235sBmjX4+qx9Muvls5ivyNENctx46xQLQ3aTuE7ssaQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/camelcase-css": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/camelcase-css/-/camelcase-css-2.0.1.tgz",
@@ -2793,6 +3459,13 @@
         }
       }
     },
+    "node_modules/deep-is": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/deep-is/-/deep-is-0.1.4.tgz",
+      "integrity": "sha512-oIPzksmTg4/MriiaYGO+okXDT7ztn/w3Eptv/+gSIdMdKsJo0u4CfYNFJPy+4SKMuCqGw2wxnA+URMg3t8a/bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/define-data-property": {
       "version": "1.1.4",
       "resolved": "https://registry.npmjs.org/define-data-property/-/define-data-property-1.1.4.tgz",
@@ -2875,6 +3548,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/doctrine": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/doctrine/-/doctrine-2.1.0.tgz",
+      "integrity": "sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "dependencies": {
+        "esutils": "^2.0.2"
+      },
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/dunder-proto": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/dunder-proto/-/dunder-proto-1.0.1.tgz",
@@ -3040,6 +3726,35 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-iterator-helpers": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/es-iterator-helpers/-/es-iterator-helpers-1.3.1.tgz",
+      "integrity": "sha512-zWwRvqWiuBPr0muUG/78cW3aHROFCNIQ3zpmYDpwdbnt2m+xlNyRWpHBpa2lJjSBit7BQ+RXA1iwbSmu5yJ/EQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.24.1",
+        "es-errors": "^1.3.0",
+        "es-set-tostringtag": "^2.1.0",
+        "function-bind": "^1.1.2",
+        "get-intrinsic": "^1.3.0",
+        "globalthis": "^1.0.4",
+        "gopd": "^1.2.0",
+        "has-property-descriptors": "^1.0.2",
+        "has-proto": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "iterator.prototype": "^1.1.5",
+        "math-intrinsics": "^1.1.0",
+        "safe-array-concat": "^1.1.3"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/es-object-atoms/-/es-object-atoms-1.1.1.tgz",
@@ -3067,6 +3782,19 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/es-shim-unscopables": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/es-shim-unscopables/-/es-shim-unscopables-1.1.0.tgz",
+      "integrity": "sha512-d9T8ucsEhh8Bi1woXCf+TIKDIROLG5WCkxg8geBCbvk22kzwC5G2OnXVMO6FUsvQlgUUXQ2itephWDLqDzbeCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hasown": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/es-to-primitive": {
       "version": "1.3.0",
       "resolved": "https://registry.npmjs.org/es-to-primitive/-/es-to-primitive-1.3.0.tgz",
@@ -3144,6 +3872,429 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-4.0.0.tgz",
+      "integrity": "sha512-TtpcNJ3XAzx3Gq8sWRzJaVajRs0uVxA2YAkdb1jm2YkPz4G6egUFAyA3n5vtEIZefPk5Wa4UXbKuS5fKkJWdgA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/eslint": {
+      "version": "9.39.4",
+      "resolved": "https://registry.npmjs.org/eslint/-/eslint-9.39.4.tgz",
+      "integrity": "sha512-XoMjdBOwe/esVgEvLmNsD3IRHkm7fbKIUGvrleloJXUZgDHig2IPWNniv+GwjyJXzuNqVjlr5+4yVUZjycJwfQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@eslint-community/eslint-utils": "^4.8.0",
+        "@eslint-community/regexpp": "^4.12.1",
+        "@eslint/config-array": "^0.21.2",
+        "@eslint/config-helpers": "^0.4.2",
+        "@eslint/core": "^0.17.0",
+        "@eslint/eslintrc": "^3.3.5",
+        "@eslint/js": "9.39.4",
+        "@eslint/plugin-kit": "^0.4.1",
+        "@humanfs/node": "^0.16.6",
+        "@humanwhocodes/module-importer": "^1.0.1",
+        "@humanwhocodes/retry": "^0.4.2",
+        "@types/estree": "^1.0.6",
+        "ajv": "^6.14.0",
+        "chalk": "^4.0.0",
+        "cross-spawn": "^7.0.6",
+        "debug": "^4.3.2",
+        "escape-string-regexp": "^4.0.0",
+        "eslint-scope": "^8.4.0",
+        "eslint-visitor-keys": "^4.2.1",
+        "espree": "^10.4.0",
+        "esquery": "^1.5.0",
+        "esutils": "^2.0.2",
+        "fast-deep-equal": "^3.1.3",
+        "file-entry-cache": "^8.0.0",
+        "find-up": "^5.0.0",
+        "glob-parent": "^6.0.2",
+        "ignore": "^5.2.0",
+        "imurmurhash": "^0.1.4",
+        "is-glob": "^4.0.0",
+        "json-stable-stringify-without-jsonify": "^1.0.1",
+        "lodash.merge": "^4.6.2",
+        "minimatch": "^3.1.5",
+        "natural-compare": "^1.4.0",
+        "optionator": "^0.9.3"
+      },
+      "bin": {
+        "eslint": "bin/eslint.js"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://eslint.org/donate"
+      },
+      "peerDependencies": {
+        "jiti": "*"
+      },
+      "peerDependenciesMeta": {
+        "jiti": {
+          "optional": true
+        }
+      }
+    },
+    "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-plugin-prettier": {
+      "version": "5.5.5",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-prettier/-/eslint-plugin-prettier-5.5.5.tgz",
+      "integrity": "sha512-hscXkbqUZ2sPithAuLm5MXL+Wph+U7wHngPBv9OMWwlP8iaflyxpjTYZkmdgB4/vPIhemRlBEoLrH7UC1n7aUw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prettier-linter-helpers": "^1.0.1",
+        "synckit": "^0.11.12"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint-plugin-prettier"
+      },
+      "peerDependencies": {
+        "@types/eslint": ">=8.0.0",
+        "eslint": ">=8.0.0",
+        "eslint-config-prettier": ">= 7.0.0 <10.0.0 || >=10.1.0",
+        "prettier": ">=3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "@types/eslint": {
+          "optional": true
+        },
+        "eslint-config-prettier": {
+          "optional": true
+        }
+      }
+    },
+    "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": {
+        "array-includes": "^3.1.8",
+        "array.prototype.findlast": "^1.2.5",
+        "array.prototype.flatmap": "^1.3.3",
+        "array.prototype.tosorted": "^1.1.4",
+        "doctrine": "^2.1.0",
+        "es-iterator-helpers": "^1.2.1",
+        "estraverse": "^5.3.0",
+        "hasown": "^2.0.2",
+        "jsx-ast-utils": "^2.4.1 || ^3.0.0",
+        "minimatch": "^3.1.2",
+        "object.entries": "^1.1.9",
+        "object.fromentries": "^2.0.8",
+        "object.values": "^1.2.1",
+        "prop-types": "^15.8.1",
+        "resolve": "^2.0.0-next.5",
+        "semver": "^6.3.1",
+        "string.prototype.matchall": "^4.0.12",
+        "string.prototype.repeat": "^1.0.0"
+      },
+      "engines": {
+        "node": ">=4"
+      },
+      "peerDependencies": {
+        "eslint": "^3 || ^4 || ^5 || ^6 || ^7 || ^8 || ^9.7"
+      }
+    },
+    "node_modules/eslint-plugin-react-hooks": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-react-hooks/-/eslint-plugin-react-hooks-7.0.1.tgz",
+      "integrity": "sha512-O0d0m04evaNzEPoSW+59Mezf8Qt0InfgGIBJnpC0h3NH/WjUAR7BIKUfysC6todmtiZ/A0oUVS8Gce0WhBrHsA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@babel/core": "^7.24.4",
+        "@babel/parser": "^7.24.4",
+        "hermes-parser": "^0.25.1",
+        "zod": "^3.25.0 || ^4.0.0",
+        "zod-validation-error": "^3.5.0 || ^4.0.0"
+      },
+      "engines": {
+        "node": ">=18"
+      },
+      "peerDependencies": {
+        "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/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eslint-plugin-react/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/eslint-plugin-react/node_modules/resolve": {
+      "version": "2.0.0-next.6",
+      "resolved": "https://registry.npmjs.org/resolve/-/resolve-2.0.0-next.6.tgz",
+      "integrity": "sha512-3JmVl5hMGtJ3kMmB3zi3DL25KfkCEyy3Tw7Gmw7z5w8M9WlwoPFnIvwChzu1+cF3iaK3sp18hhPz8ANeimdJfA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "es-errors": "^1.3.0",
+        "is-core-module": "^2.16.1",
+        "node-exports-info": "^1.6.0",
+        "object-keys": "^1.1.1",
+        "path-parse": "^1.0.7",
+        "supports-preserve-symlinks-flag": "^1.0.0"
+      },
+      "bin": {
+        "resolve": "bin/resolve"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/eslint-plugin-tailwindcss": {
+      "version": "3.18.2",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.18.2.tgz",
+      "integrity": "sha512-QbkMLDC/OkkjFQ1iz/5jkMdHfiMu/uwujUHLAJK5iwNHD8RTxVTlsUezE0toTZ6VhybNBsk+gYGPDq2agfeRNA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-glob": "^3.2.5",
+        "postcss": "^8.4.4"
+      },
+      "engines": {
+        "node": ">=18.12.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.4.0"
+      }
+    },
+    "node_modules/eslint-scope": {
+      "version": "8.4.0",
+      "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-8.4.0.tgz",
+      "integrity": "sha512-sNXOfKCn74rt8RICKMvJS7XKV/Xk9kA7DyJr8mJik3S7Cwgy3qlkkmyS2uQB3jiJg6VNdZd/pDBJu0nvG2NlTg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "esrecurse": "^4.3.0",
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint-visitor-keys": {
+      "version": "3.4.3",
+      "resolved": "https://registry.npmjs.org/eslint-visitor-keys/-/eslint-visitor-keys-3.4.3.tgz",
+      "integrity": "sha512-wpc+LXeiyiisxPlEkUzU6svyS1frIO3Mgxj1fdy7Pm8Ygzguax2N3Fa/D/ag1WqbOprdI+uY6wMUl8/a2G+iag==",
+      "dev": true,
+      "license": "Apache-2.0",
+      "engines": {
+        "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/eslint/node_modules/ajv": {
+      "version": "6.14.0",
+      "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.14.0.tgz",
+      "integrity": "sha512-IWrosm/yrn43eiKqkfkHis7QioDleaXQHdDVPKg0FSwwd/DuvyX79TZnFOnYpB7dcsFAMmtFztZuXPDvSePkFw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-deep-equal": "^3.1.1",
+        "fast-json-stable-stringify": "^2.0.0",
+        "json-schema-traverse": "^0.4.1",
+        "uri-js": "^4.2.2"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/epoberezkin"
+      }
+    },
+    "node_modules/eslint/node_modules/balanced-match": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/balanced-match/-/balanced-match-1.0.2.tgz",
+      "integrity": "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eslint/node_modules/brace-expansion": {
+      "version": "1.1.12",
+      "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.12.tgz",
+      "integrity": "sha512-9T9UjW3r0UW5c1Q7GTwllptXwhvYmEzFhzMfZ9H7FQWt+uZePjZPjBP/W1ZEyZ1twGWom5/56TF4lPcqjnDHcg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "balanced-match": "^1.0.0",
+        "concat-map": "0.0.1"
+      }
+    },
+    "node_modules/eslint/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/node_modules/glob-parent": {
+      "version": "6.0.2",
+      "resolved": "https://registry.npmjs.org/glob-parent/-/glob-parent-6.0.2.tgz",
+      "integrity": "sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "is-glob": "^4.0.3"
+      },
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/eslint/node_modules/json-schema-traverse": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-0.4.1.tgz",
+      "integrity": "sha512-xbbCH5dCYU5T8LcEhhuh7HJ88HXuW3qsI3Y0zOZFKfZEHcpWiHU/Jxzk629Brsab/mMiHQti9wMP+845RPe3Vg==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/eslint/node_modules/minimatch": {
+      "version": "3.1.5",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-3.1.5.tgz",
+      "integrity": "sha512-VgjWUsnnT6n+NUk6eZq77zeFdpW2LWDzP6zFGrCbHXiYNul5Dzqk2HHQ5uFH2DNW5Xbp8+jVzaeNt94ssEEl4w==",
+      "dev": true,
+      "license": "ISC",
+      "dependencies": {
+        "brace-expansion": "^1.1.7"
+      },
+      "engines": {
+        "node": "*"
+      }
+    },
+    "node_modules/espree": {
+      "version": "10.4.0",
+      "resolved": "https://registry.npmjs.org/espree/-/espree-10.4.0.tgz",
+      "integrity": "sha512-j6PAQ2uUr79PZhBjP5C5fhl8e39FmRnOjsD5lGnWrFU8i2G776tBK7+nP8KuQUTTyAZUwfQqXAgrVH5MbH9CYQ==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "acorn": "^8.15.0",
+        "acorn-jsx": "^5.3.2",
+        "eslint-visitor-keys": "^4.2.1"
+      },
+      "engines": {
+        "node": "^18.18.0 || ^20.9.0 || >=21.1.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/eslint"
+      }
+    },
+    "node_modules/espree/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/esquery": {
+      "version": "1.7.0",
+      "resolved": "https://registry.npmjs.org/esquery/-/esquery-1.7.0.tgz",
+      "integrity": "sha512-Ap6G0WQwcU/LHsvLwON1fAQX9Zp0A2Y6Y/cJBl9r/JbW90Zyg4/zbG6zzKa2OTALELarYHmKu0GhpM5EO+7T0g==",
+      "dev": true,
+      "license": "BSD-3-Clause",
+      "dependencies": {
+        "estraverse": "^5.1.0"
+      },
+      "engines": {
+        "node": ">=0.10"
+      }
+    },
+    "node_modules/esrecurse": {
+      "version": "4.3.0",
+      "resolved": "https://registry.npmjs.org/esrecurse/-/esrecurse-4.3.0.tgz",
+      "integrity": "sha512-KmfKL3b6G+RXvP8N1vr3Tq1kL/oCFgn2NYXEtqP8/L3pKapUA4G8cFVaoF3SU323CD4XypR/ffioHmkti6/Tag==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "estraverse": "^5.2.0"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/estraverse": {
+      "version": "5.3.0",
+      "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-5.3.0.tgz",
+      "integrity": "sha512-MMdARuVEQziNTeJD8DgMqmhwR11BRQ/cBP+pLtYdSTnf3MIO8fFeiINEbX36ZdNlfU/7A9f3gUw49B3oQsvwBA==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
     "node_modules/esutils": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/esutils/-/esutils-2.0.3.tgz",
@@ -3195,6 +4346,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/fast-diff": {
+      "version": "1.3.0",
+      "resolved": "https://registry.npmjs.org/fast-diff/-/fast-diff-1.3.0.tgz",
+      "integrity": "sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==",
+      "dev": true,
+      "license": "Apache-2.0"
+    },
     "node_modules/fast-glob": {
       "version": "3.3.3",
       "resolved": "https://registry.npmjs.org/fast-glob/-/fast-glob-3.3.3.tgz",
@@ -3212,6 +4370,20 @@
         "node": ">=8.6.0"
       }
     },
+    "node_modules/fast-json-stable-stringify": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/fast-json-stable-stringify/-/fast-json-stable-stringify-2.1.0.tgz",
+      "integrity": "sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/fast-levenshtein": {
+      "version": "2.0.6",
+      "resolved": "https://registry.npmjs.org/fast-levenshtein/-/fast-levenshtein-2.0.6.tgz",
+      "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/fast-memoize": {
       "version": "2.5.2",
       "resolved": "https://registry.npmjs.org/fast-memoize/-/fast-memoize-2.5.2.tgz",
@@ -3253,6 +4425,19 @@
         "reusify": "^1.0.4"
       }
     },
+    "node_modules/file-entry-cache": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/file-entry-cache/-/file-entry-cache-8.0.0.tgz",
+      "integrity": "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flat-cache": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=16.0.0"
+      }
+    },
     "node_modules/fill-range": {
       "version": "7.1.1",
       "resolved": "https://registry.npmjs.org/fill-range/-/fill-range-7.1.1.tgz",
@@ -3283,6 +4468,27 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/flat-cache": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/flat-cache/-/flat-cache-4.0.1.tgz",
+      "integrity": "sha512-f7ccFPK3SXFHpx15UIGyRJ/FJQctuKZ0zVuN3frBo4HnK3cay9VEW0R6yPYFHC0AgqhukPzKjq22t5DmAyqGyw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "flatted": "^3.2.9",
+        "keyv": "^4.5.4"
+      },
+      "engines": {
+        "node": ">=16"
+      }
+    },
+    "node_modules/flatted": {
+      "version": "3.4.1",
+      "resolved": "https://registry.npmjs.org/flatted/-/flatted-3.4.1.tgz",
+      "integrity": "sha512-IxfVbRFVlV8V/yRaGzk0UVIcsKKHMSfYw66T/u4nTwlWteQePsxe//LjudR1AMX4tZW3WFCh3Zqa/sjlqpbURQ==",
+      "dev": true,
+      "license": "ISC"
+    },
     "node_modules/follow-redirects": {
       "version": "1.15.11",
       "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.11.tgz",
@@ -3530,6 +4736,19 @@
         "node": ">= 6"
       }
     },
+    "node_modules/globals": {
+      "version": "14.0.0",
+      "resolved": "https://registry.npmjs.org/globals/-/globals-14.0.0.tgz",
+      "integrity": "sha512-oahGvuMGQlPw/ivIYBjVSrWAfWLBeku5tpPE2fOPLi+WHffIWbuh2tCjhyQhTBPMf5E9jDEH4FOmTYgYwbKwtQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/globalthis": {
       "version": "1.0.4",
       "resolved": "https://registry.npmjs.org/globalthis/-/globalthis-1.0.4.tgz",
@@ -3678,6 +4897,23 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hermes-estree": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-estree/-/hermes-estree-0.25.1.tgz",
+      "integrity": "sha512-0wUoCcLp+5Ev5pDW2OriHC2MJCbwLwuRx+gAqMTOkGKJJiBCLjtrvy4PWUGn6MIVefecRpzoOZ/UV6iGdOr+Cw==",
+      "dev": true,
+      "license": "MIT"
+    },
+    "node_modules/hermes-parser": {
+      "version": "0.25.1",
+      "resolved": "https://registry.npmjs.org/hermes-parser/-/hermes-parser-0.25.1.tgz",
+      "integrity": "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "hermes-estree": "0.25.1"
+      }
+    },
     "node_modules/http2-client": {
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/http2-client/-/http2-client-1.3.5.tgz",
@@ -3716,6 +4952,33 @@
         "url": "https://opencollective.com/immer"
       }
     },
+    "node_modules/import-fresh": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/import-fresh/-/import-fresh-3.3.1.tgz",
+      "integrity": "sha512-TR3KfrTZTYLPB6jUjfx6MF9WcWrHL9su5TObK4ZkYgBdWKPOFoSoQIdEuTuR82pmtxH2spWG9h6etwfr1pLBqQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "parent-module": "^1.0.0",
+        "resolve-from": "^4.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
+    "node_modules/imurmurhash": {
+      "version": "0.1.4",
+      "resolved": "https://registry.npmjs.org/imurmurhash/-/imurmurhash-0.1.4.tgz",
+      "integrity": "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.8.19"
+      }
+    },
     "node_modules/inflected": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/inflected/-/inflected-2.1.0.tgz",
@@ -4180,6 +5443,24 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/iterator.prototype": {
+      "version": "1.1.5",
+      "resolved": "https://registry.npmjs.org/iterator.prototype/-/iterator.prototype-1.1.5.tgz",
+      "integrity": "sha512-H0dkQoCa3b2VEeKQBOxFph+JAbcrQdE7KC0UkqwpLmv2EC4P41QXP+rqo9wYodACiG5/WM5s9oDApTU8utwj9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-data-property": "^1.1.4",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "get-proto": "^1.0.0",
+        "has-symbols": "^1.1.0",
+        "set-function-name": "^2.0.2"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
     "node_modules/jiti": {
       "version": "2.6.1",
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-2.6.1.tgz",
@@ -4233,6 +5514,13 @@
         "node": ">=6"
       }
     },
+    "node_modules/json-buffer": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/json-buffer/-/json-buffer-3.0.1.tgz",
+      "integrity": "sha512-4bV5BfR2mqfQTJm+V5tPPdf+ZpuhiIvTuAB5g8kcrXOZpTT/QwwVRWBywX1ozr6lEuPdbHxwaJlm9G6mI2sfSQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json-schema-traverse": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
@@ -4240,6 +5528,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/json-stable-stringify-without-jsonify": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/json-stable-stringify-without-jsonify/-/json-stable-stringify-without-jsonify-1.0.1.tgz",
+      "integrity": "sha512-Bdboy+l7tA3OGW6FjyFHWkP5LuByj1Tk33Ljyq0axyzdk9//JSi2u3fP1QSmd1KNwq6VOKYGlAu87CisVir6Pw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/json5": {
       "version": "2.2.3",
       "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz",
@@ -4312,6 +5607,32 @@
         "node": "*"
       }
     },
+    "node_modules/jsx-ast-utils": {
+      "version": "3.3.5",
+      "resolved": "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.3.5.tgz",
+      "integrity": "sha512-ZZow9HBI5O6EPgSJLUb8n2NKgmVWTwCvHGwFuJlMjvLFqlGG6pjirPhtdsseaLZjSibD8eegzmYpUZwoIlj2cQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array-includes": "^3.1.6",
+        "array.prototype.flat": "^1.3.1",
+        "object.assign": "^4.1.4",
+        "object.values": "^1.1.6"
+      },
+      "engines": {
+        "node": ">=4.0"
+      }
+    },
+    "node_modules/keyv": {
+      "version": "4.5.4",
+      "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz",
+      "integrity": "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "json-buffer": "3.0.1"
+      }
+    },
     "node_modules/leven": {
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/leven/-/leven-3.1.0.tgz",
@@ -4322,6 +5643,20 @@
         "node": ">=6"
       }
     },
+    "node_modules/levn": {
+      "version": "0.4.1",
+      "resolved": "https://registry.npmjs.org/levn/-/levn-0.4.1.tgz",
+      "integrity": "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1",
+        "type-check": "~0.4.0"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -4382,6 +5717,13 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/lodash.merge": {
+      "version": "4.6.2",
+      "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz",
+      "integrity": "sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/lodash.omitby": {
       "version": "4.6.0",
       "resolved": "https://registry.npmjs.org/lodash.omitby/-/lodash.omitby-4.6.0.tgz",
@@ -4438,6 +5780,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      },
+      "bin": {
+        "loose-envify": "cli.js"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -4614,6 +5969,13 @@
         "node": "^10 || ^12 || ^13.7 || ^14 || >=15.0.1"
       }
     },
+    "node_modules/natural-compare": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/natural-compare/-/natural-compare-1.4.0.tgz",
+      "integrity": "sha512-OWND8ei3VtNC9h7V60qff3SVobHr996CTwgxubgyQYEpg290h9J0buyECNNJexkFm5sOajh5G116RYA1c8ZMSw==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/nimma": {
       "version": "0.2.3",
       "resolved": "https://registry.npmjs.org/nimma/-/nimma-0.2.3.tgz",
@@ -4634,6 +5996,25 @@
         "lodash.topath": "^4.5.2"
       }
     },
+    "node_modules/node-exports-info": {
+      "version": "1.6.0",
+      "resolved": "https://registry.npmjs.org/node-exports-info/-/node-exports-info-1.6.0.tgz",
+      "integrity": "sha512-pyFS63ptit/P5WqUkt+UUfe+4oevH+bFeIiPPdfb0pFeYEu/1ELnJu5l+5EcTKYL5M7zaAa7S8ddywgXypqKCw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "array.prototype.flatmap": "^1.3.3",
+        "es-errors": "^1.3.0",
+        "object.entries": "^1.1.9",
+        "semver": "^6.3.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/node-fetch": {
       "version": "2.7.0",
       "resolved": "https://registry.npmjs.org/node-fetch/-/node-fetch-2.7.0.tgz",
@@ -4877,6 +6258,60 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/object.entries": {
+      "version": "1.1.9",
+      "resolved": "https://registry.npmjs.org/object.entries/-/object.entries-1.1.9.tgz",
+      "integrity": "sha512-8u/hfXFRBD1O0hPUjioLhoWFHRmt6tKA4/vZPyckBr18l1KE9uHrFaFaUi8MDRTpi4uak2goyPTSNJLXX2k2Hw==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.4",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.1.1"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      }
+    },
+    "node_modules/object.fromentries": {
+      "version": "2.0.8",
+      "resolved": "https://registry.npmjs.org/object.fromentries/-/object.fromentries-2.0.8.tgz",
+      "integrity": "sha512-k6E21FzySsSK5a21KRADBd/NGneRegFO5pLHfdQLpRDETUNJueLXs3WCzyQ3tFRDYgbq3KHGXfTbi2bs8WQ6rQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.7",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.2",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/object.values": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/object.values/-/object.values-1.2.1.tgz",
+      "integrity": "sha512-gXah6aZrcUxjWg2zR2MwouP2eHlCBzdV4pygudehaKXSGW4v2AsRQUK+lwwXhii6KFZcunEnmSUoYp5CXibxtA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-object-atoms": "^1.0.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
     "node_modules/onetime": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/onetime/-/onetime-5.1.2.tgz",
@@ -4911,6 +6346,24 @@
         "yaml": "^2.8.0"
       }
     },
+    "node_modules/optionator": {
+      "version": "0.9.4",
+      "resolved": "https://registry.npmjs.org/optionator/-/optionator-0.9.4.tgz",
+      "integrity": "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "deep-is": "^0.1.3",
+        "fast-levenshtein": "^2.0.6",
+        "levn": "^0.4.1",
+        "prelude-ls": "^1.2.1",
+        "type-check": "^0.4.0",
+        "word-wrap": "^1.2.5"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/orval": {
       "version": "7.21.0",
       "resolved": "https://registry.npmjs.org/orval/-/orval-7.21.0.tgz",
@@ -5004,6 +6457,19 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/parent-module": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/parent-module/-/parent-module-1.0.1.tgz",
+      "integrity": "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "callsites": "^3.0.0"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/path-exists": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/path-exists/-/path-exists-4.0.0.tgz",
@@ -5264,12 +6730,73 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/prelude-ls": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/prelude-ls/-/prelude-ls-1.2.1.tgz",
+      "integrity": "sha512-vkcDPrRZo1QZLbn5RLGPpg/WmIQ65qoWWhcGKf/b5eplkkarX0m9z8ppCat4mlOqUsWpyNuYgO3VRyrYHSzX5g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
+    "node_modules/prettier": {
+      "version": "3.8.1",
+      "resolved": "https://registry.npmjs.org/prettier/-/prettier-3.8.1.tgz",
+      "integrity": "sha512-UOnG6LftzbdaHZcKoPFtOcCKztrQ57WkHDeRD9t/PTQtmT0NHSeWWepj6pS0z/N7+08BHFDQVUrfmfMRcZwbMg==",
+      "dev": true,
+      "license": "MIT",
+      "bin": {
+        "prettier": "bin/prettier.cjs"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/prettier/prettier?sponsor=1"
+      }
+    },
+    "node_modules/prettier-linter-helpers": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/prettier-linter-helpers/-/prettier-linter-helpers-1.0.1.tgz",
+      "integrity": "sha512-SxToR7P8Y2lWmv/kTzVLC1t/GDI2WGjMwNhLLE9qtH8Q13C+aEmuRlzDst4Up4s0Wc8sF2M+J57iB3cMLqftfg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "fast-diff": "^1.1.2"
+      },
+      "engines": {
+        "node": ">=6.0.0"
+      }
+    },
+    "node_modules/prop-types": {
+      "version": "15.8.1",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz",
+      "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.13.1"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
       "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==",
       "license": "MIT"
     },
+    "node_modules/punycode": {
+      "version": "2.3.1",
+      "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz",
+      "integrity": "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=6"
+      }
+    },
     "node_modules/punycode.js": {
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/punycode.js/-/punycode.js-2.3.1.tgz",
@@ -5322,6 +6849,13 @@
         "react": "^19.2.4"
       }
     },
+    "node_modules/react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
+      "dev": true,
+      "license": "MIT"
+    },
     "node_modules/react-refresh": {
       "version": "0.17.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.17.0.tgz",
@@ -5489,6 +7023,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/resolve-from": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/resolve-from/-/resolve-from-4.0.0.tgz",
+      "integrity": "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=4"
+      }
+    },
     "node_modules/reusify": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/reusify/-/reusify-1.1.0.tgz",
@@ -5940,6 +7484,45 @@
         "node": ">=8"
       }
     },
+    "node_modules/string.prototype.matchall": {
+      "version": "4.0.12",
+      "resolved": "https://registry.npmjs.org/string.prototype.matchall/-/string.prototype.matchall-4.0.12.tgz",
+      "integrity": "sha512-6CC9uyBL+/48dYizRf7H7VAYCMCNTBeM78x/VTUe9bFEaxBepPJDa1Ow99LqI/1yF7kuy7Q3cQsYMrcjGUcskA==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "call-bind": "^1.0.8",
+        "call-bound": "^1.0.3",
+        "define-properties": "^1.2.1",
+        "es-abstract": "^1.23.6",
+        "es-errors": "^1.3.0",
+        "es-object-atoms": "^1.0.0",
+        "get-intrinsic": "^1.2.6",
+        "gopd": "^1.2.0",
+        "has-symbols": "^1.1.0",
+        "internal-slot": "^1.1.0",
+        "regexp.prototype.flags": "^1.5.3",
+        "set-function-name": "^2.0.2",
+        "side-channel": "^1.1.0"
+      },
+      "engines": {
+        "node": ">= 0.4"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/ljharb"
+      }
+    },
+    "node_modules/string.prototype.repeat": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/string.prototype.repeat/-/string.prototype.repeat-1.0.0.tgz",
+      "integrity": "sha512-0u/TldDbKD8bFCQ/4f5+mNRrXwZ8hg2w7ZR8wa16e8z9XpePWl3eGEcUD0OXpEH/VJH/2G3gjUtR3ZOiBe2S/w==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "define-properties": "^1.1.3",
+        "es-abstract": "^1.17.5"
+      }
+    },
     "node_modules/string.prototype.trim": {
       "version": "1.2.10",
       "resolved": "https://registry.npmjs.org/string.prototype.trim/-/string.prototype.trim-1.2.10.tgz",
@@ -6022,6 +7605,19 @@
         "node": ">=6"
       }
     },
+    "node_modules/strip-json-comments": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/strip-json-comments/-/strip-json-comments-3.1.1.tgz",
+      "integrity": "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=8"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.35.1",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.35.1.tgz",
@@ -6119,6 +7715,22 @@
         "node": ">= 6"
       }
     },
+    "node_modules/synckit": {
+      "version": "0.11.12",
+      "resolved": "https://registry.npmjs.org/synckit/-/synckit-0.11.12.tgz",
+      "integrity": "sha512-Bh7QjT8/SuKUIfObSXNHNSK6WHo6J1tHCqJsuaFDP7gP0fkzSfTxI8y85JrppZ0h8l0maIgc2tfuZQ6/t3GtnQ==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "@pkgr/core": "^0.2.9"
+      },
+      "engines": {
+        "node": "^14.18.0 || >=16.0.0"
+      },
+      "funding": {
+        "url": "https://opencollective.com/synckit"
+      }
+    },
     "node_modules/tailwind-merge": {
       "version": "3.5.0",
       "resolved": "https://registry.npmjs.org/tailwind-merge/-/tailwind-merge-3.5.0.tgz",
@@ -6332,6 +7944,19 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/ts-api-utils": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/ts-api-utils/-/ts-api-utils-2.4.0.tgz",
+      "integrity": "sha512-3TaVTaAv2gTiMB35i3FiGJaRfwb3Pyn/j3m/bfAvGe8FB7CF6u+LMYqYlDh7reQf7UNvoTvdfAqHGmPGOSsPmA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.12"
+      },
+      "peerDependencies": {
+        "typescript": ">=4.8.4"
+      }
+    },
     "node_modules/ts-interface-checker": {
       "version": "0.1.13",
       "resolved": "https://registry.npmjs.org/ts-interface-checker/-/ts-interface-checker-0.1.13.tgz",
@@ -6367,6 +7992,19 @@
       "dev": true,
       "license": "0BSD"
     },
+    "node_modules/type-check": {
+      "version": "0.4.0",
+      "resolved": "https://registry.npmjs.org/type-check/-/type-check-0.4.0.tgz",
+      "integrity": "sha512-XleUoc9uwGXqjWwXaUTZAmzMcFZ5858QA2vvx1Ur5xIcixXIP+8LnFDgRplU30us6teqdlskFfu+ae4K79Ooew==",
+      "dev": true,
+      "license": "MIT",
+      "dependencies": {
+        "prelude-ls": "^1.2.1"
+      },
+      "engines": {
+        "node": ">= 0.8.0"
+      }
+    },
     "node_modules/typed-array-buffer": {
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/typed-array-buffer/-/typed-array-buffer-1.0.3.tgz",
@@ -6616,6 +8254,16 @@
         "browserslist": ">= 4.21.0"
       }
     },
+    "node_modules/uri-js": {
+      "version": "4.4.1",
+      "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz",
+      "integrity": "sha512-7rKUyy33Q1yc98pQ1DAmLtwX109F7TIfWlW1Ydo8Wl1ii1SeHieeh0HHfPeL2fMXK6z0s8ecKs9frCuLJvndBg==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "dependencies": {
+        "punycode": "^2.1.0"
+      }
+    },
     "node_modules/urijs": {
       "version": "1.19.11",
       "resolved": "https://registry.npmjs.org/urijs/-/urijs-1.19.11.tgz",
@@ -6879,6 +8527,16 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/word-wrap": {
+      "version": "1.2.5",
+      "resolved": "https://registry.npmjs.org/word-wrap/-/word-wrap-1.2.5.tgz",
+      "integrity": "sha512-BN22B5eaMMI9UMtjrGd5g5eCYPpCPDUy0FJXbYsaT5zYxjFOckS53SQDE3pWkVoWpHXVb3BrYcEN4Twa55B5cA==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=0.10.0"
+      }
+    },
     "node_modules/wrap-ansi": {
       "version": "7.0.0",
       "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz",
@@ -6971,6 +8629,29 @@
       "funding": {
         "url": "https://github.com/sponsors/sindresorhus"
       }
+    },
+    "node_modules/zod": {
+      "version": "4.3.6",
+      "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
+      "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
+      "dev": true,
+      "license": "MIT",
+      "funding": {
+        "url": "https://github.com/sponsors/colinhacks"
+      }
+    },
+    "node_modules/zod-validation-error": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/zod-validation-error/-/zod-validation-error-4.0.2.tgz",
+      "integrity": "sha512-Q6/nZLe6jxuU80qb/4uJ4t5v2VEZ44lzQjPDhYJNztRQ4wyWc6VF3D3Kb/fAuPetZQnhS3hnajCf9CsWesghLQ==",
+      "dev": true,
+      "license": "MIT",
+      "engines": {
+        "node": ">=18.0.0"
+      },
+      "peerDependencies": {
+        "zod": "^3.25.0 || ^4.0.0"
+      }
     }
   }
 }
diff --git a/frontend/package.json b/frontend/package.json
index c20f8c6..d5b475a 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -7,7 +7,11 @@
     "dev": "vite",
     "build": "tsc && vite build",
     "preview": "vite preview",
-    "generate:api": "orval"
+    "generate:api": "orval",
+    "lint": "eslint src --max-warnings=0",
+    "lint:fix": "eslint src --fix",
+    "format": "prettier --check src",
+    "format:fix": "prettier --write src"
   },
   "dependencies": {
     "@tanstack/react-query": "^5.62.16",
@@ -22,10 +26,19 @@
   "devDependencies": {
     "@types/react": "^19.0.8",
     "@types/react-dom": "^19.0.8",
+    "@typescript-eslint/eslint-plugin": "^8.57.0",
+    "@typescript-eslint/parser": "^8.57.0",
     "@vitejs/plugin-react": "^4.3.4",
     "autoprefixer": "^10.4.20",
+    "eslint": "^9.39.4",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-prettier": "^5.5.5",
+    "eslint-plugin-react": "^7.37.5",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-tailwindcss": "^3.18.2",
     "orval": "^7.5.0",
     "postcss": "^8.4.49",
+    "prettier": "^3.8.1",
     "tailwindcss": "^3.4.17",
     "typescript": "~5.6.2",
     "vite": "^6.0.5"
diff --git a/frontend/src/components/HamburgerMenu.tsx b/frontend/src/components/HamburgerMenu.tsx
index 86e2b5a..a73c4b2 100644
--- a/frontend/src/components/HamburgerMenu.tsx
+++ b/frontend/src/components/HamburgerMenu.tsx
@@ -37,11 +37,11 @@ export default function HamburgerMenu() {
   const isAdmin = user?.is_admin ?? false;
 
   return (
-    <div className="flex flex-col z-40 relative ml-6">
+    <div className="relative z-40 ml-6 flex flex-col">
       {/* Checkbox input for state management */}
       <input
         type="checkbox"
-        className="absolute lg:hidden z-50 -top-2 w-7 h-7 flex cursor-pointer opacity-0"
+        className="absolute -top-2 z-50 flex size-7 cursor-pointer opacity-0 lg:hidden"
         id="mobile-nav-checkbox"
         checked={isOpen}
         onChange={(e) => setIsOpen(e.target.checked)}
@@ -49,7 +49,7 @@ export default function HamburgerMenu() {
       
       {/* Hamburger icon lines with CSS animations - hidden on desktop */}
       <span
-        className="lg:hidden bg-black w-7 h-0.5 z-40 mt-0.5 dark:bg-white transition-transform transition-background transition-opacity duration-500"
+        className="transition-background z-40 mt-0.5 h-0.5 w-7 bg-black transition-opacity transition-transform duration-500 lg:hidden dark:bg-white"
         style={{
           transformOrigin: '5px 0px',
           transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
@@ -57,7 +57,7 @@ export default function HamburgerMenu() {
         }}
       />
       <span
-        className="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white transition-transform transition-background transition-opacity duration-500"
+        className="transition-background z-40 mt-1 h-0.5 w-7 bg-black transition-opacity transition-transform duration-500 lg:hidden dark:bg-white"
         style={{
           transformOrigin: '0% 100%',
           transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
@@ -66,7 +66,7 @@ export default function HamburgerMenu() {
         }}
       />
       <span
-        className="lg:hidden bg-black w-7 h-0.5 z-40 mt-1 dark:bg-white transition-transform transition-background transition-opacity duration-500"
+        className="transition-background z-40 mt-1 h-0.5 w-7 bg-black transition-opacity transition-transform duration-500 lg:hidden dark:bg-white"
         style={{
           transformOrigin: '0% 0%',
           transition: 'transform 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), background 0.5s cubic-bezier(0.77, 0.2, 0.05, 1), opacity 0.55s ease',
@@ -77,7 +77,7 @@ export default function HamburgerMenu() {
       {/* Navigation menu with slide animation */}
       <div
         id="menu"
-        className="fixed -ml-6 h-full w-56 lg:w-48 bg-white dark:bg-gray-700 shadow-lg"
+        className="fixed -ml-6 h-full w-56 bg-white shadow-lg lg:w-48 dark:bg-gray-700"
         style={{
           top: 0,
           paddingTop: 'env(safe-area-inset-top)',
@@ -96,8 +96,8 @@ export default function HamburgerMenu() {
             }
           }
         `}</style>
-        <div className="h-16 flex justify-end lg:justify-around">
-          <p className="text-xl font-bold dark:text-white text-right my-auto pr-8 lg:pr-0">
+        <div className="flex h-16 justify-end lg:justify-around">
+          <p className="my-auto pr-8 text-right text-xl font-bold lg:pr-0 dark:text-white">
             AnthoLume
           </p>
         </div>
@@ -107,7 +107,7 @@ export default function HamburgerMenu() {
               key={item.path}
               to={item.path}
               onClick={() => setIsOpen(false)}
-              className={`flex items-center justify-start w-full p-2 pl-6 my-2 transition-colors duration-200 border-l-4 ${
+              className={`my-2 flex w-full items-center justify-start border-l-4 p-2 pl-6 transition-colors duration-200 ${
                 location.pathname === item.path
                   ? 'border-purple-500 dark:text-white'
                   : 'border-transparent text-gray-400 hover:text-gray-800 dark:hover:text-gray-100'
@@ -120,7 +120,7 @@ export default function HamburgerMenu() {
           
           {/* Admin section - only visible for admins */}
           {isAdmin && (
-            <div className={`flex flex-col gap-4 p-2 pl-6 my-2 transition-colors duration-200 border-l-4 ${
+            <div className={`my-2 flex flex-col gap-4 border-l-4 p-2 pl-6 transition-colors duration-200 ${
               hasPrefix(location.pathname, '/admin')
                 ? 'border-purple-500 dark:text-white'
                 : 'border-transparent text-gray-400'
@@ -129,7 +129,7 @@ export default function HamburgerMenu() {
               <Link
                 to="/admin"
                 onClick={() => setIsOpen(false)}
-                className={`flex justify-start w-full ${
+                className={`flex w-full justify-start ${
                   location.pathname === '/admin' && !hasPrefix(location.pathname, '/admin/')
                     ? 'dark:text-white'
                     : 'text-gray-400 hover:text-gray-800 dark:hover:text-gray-100'
@@ -146,7 +146,7 @@ export default function HamburgerMenu() {
                       key={item.path}
                       to={item.path}
                       onClick={() => setIsOpen(false)}
-                      className={`flex justify-start w-full ${
+                      className={`flex w-full justify-start ${
                         location.pathname === item.path
                           ? 'dark:text-white'
                           : 'text-gray-400 hover:text-gray-800 dark:hover:text-gray-100'
@@ -162,9 +162,9 @@ export default function HamburgerMenu() {
           )}
         </nav>
         <a
-          className="flex flex-col gap-2 justify-center items-center p-6 w-full absolute bottom-0 text-black dark:text-white"
+          className="absolute bottom-0 flex w-full flex-col items-center justify-center gap-2 p-6 text-black dark:text-white"
           target="_blank"
-          href="https://gitea.va.reichard.io/evan/AnthoLume"
+          href="https://gitea.va.reichard.io/evan/AnthoLume" rel="noreferrer"
         >
           <span className="text-xs">v1.0.0</span>
         </a>
diff --git a/frontend/src/components/Layout.tsx b/frontend/src/components/Layout.tsx
index 401d4ba..62441ee 100644
--- a/frontend/src/components/Layout.tsx
+++ b/frontend/src/components/Layout.tsx
@@ -54,19 +54,19 @@ export default function Layout() {
   }
 
   return (
-    <div className="bg-gray-100 dark:bg-gray-800 min-h-screen">
+    <div className="min-h-screen bg-gray-100 dark:bg-gray-800">
       {/* Header */}
-      <div className="flex items-center justify-between w-full h-16">
+      <div className="flex h-16 w-full items-center justify-between">
         {/* Mobile Navigation Button with CSS animations */}
         <HamburgerMenu />
 
         {/* Header Title */}
-        <h1 className="text-xl font-bold dark:text-white px-6 lg:ml-44">
+        <h1 className="px-6 text-xl font-bold lg:ml-44 dark:text-white">
           {currentPageTitle}
         </h1>
 
         {/* User Dropdown */}
-        <div className="relative flex items-center justify-end w-full p-4 space-x-4" ref={dropdownRef}>
+        <div className="relative flex w-full items-center justify-end space-x-4 p-4" ref={dropdownRef}>
           <button
             onClick={() => setIsUserDropdownOpen(!isUserDropdownOpen)}
             className="relative block text-gray-800 dark:text-gray-200"
@@ -75,8 +75,8 @@ export default function Layout() {
           </button>
 
           {isUserDropdownOpen && (
-            <div className="transition duration-200 z-20 absolute right-4 top-16 pt-4">
-              <div className="w-40 origin-top-right bg-white rounded-md shadow-lg dark:shadow-gray-800 dark:bg-gray-700 ring-1 ring-black ring-opacity-5">
+            <div className="absolute right-4 top-16 z-20 pt-4 transition duration-200">
+              <div className="w-40 origin-top-right rounded-md bg-white shadow-lg ring-1 ring-black ring-opacity-5 dark:bg-gray-700 dark:shadow-gray-800">
                 <div
                   className="py-1"
                   role="menu"
@@ -86,7 +86,7 @@ export default function Layout() {
                   <Link
                     to="/settings"
                     onClick={() => setIsUserDropdownOpen(false)}
-                    className="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600"
+                    className="text-md block px-4 py-2 text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                     role="menuitem"
                   >
                     <span className="flex flex-col">
@@ -95,7 +95,7 @@ export default function Layout() {
                   </Link>
                   <button
                     onClick={handleLogout}
-                    className="block px-4 py-2 text-md text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:text-white dark:hover:bg-gray-600 w-full text-left"
+                    className="text-md block w-full px-4 py-2 text-left text-gray-700 hover:bg-gray-100 hover:text-gray-900 dark:text-gray-100 dark:hover:bg-gray-600 dark:hover:text-white"
                     role="menuitem"
                   >
                     <span className="flex flex-col">
@@ -109,10 +109,10 @@ export default function Layout() {
 
           <button
             onClick={() => setIsUserDropdownOpen(!isUserDropdownOpen)}
-            className="flex items-center gap-2 text-gray-500 dark:text-white text-md py-4 cursor-pointer"
+            className="text-md flex cursor-pointer items-center gap-2 py-4 text-gray-500 dark:text-white"
           >
             <span>{userData?.username || 'User'}</span>
-            <span className="text-gray-800 dark:text-gray-200 transition-transform duration-200" style={{ transform: isUserDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}>
+            <span className="text-gray-800 transition-transform duration-200 dark:text-gray-200" style={{ transform: isUserDropdownOpen ? 'rotate(180deg)' : 'rotate(0deg)' }}>
               <ChevronDown size={20} />
             </span>
           </button>
@@ -121,7 +121,7 @@ export default function Layout() {
 
       {/* Main Content */}
       <main className="relative overflow-hidden" style={{ height: 'calc(100dvh - 4rem - env(safe-area-inset-top))' }}>
-        <div id="container" className="h-[100dvh] px-4 overflow-auto md:px-6 lg:ml-48" style={{ paddingBottom: 'calc(5em + env(safe-area-inset-bottom) * 2)' }}>
+        <div id="container" className="h-dvh overflow-auto px-4 md:px-6 lg:ml-48" style={{ paddingBottom: 'calc(5em + env(safe-area-inset-bottom) * 2)' }}>
           <Outlet />
         </div>
       </main>
diff --git a/frontend/src/components/Skeleton.tsx b/frontend/src/components/Skeleton.tsx
index f45d69b..8010790 100644
--- a/frontend/src/components/Skeleton.tsx
+++ b/frontend/src/components/Skeleton.tsx
@@ -113,16 +113,16 @@ export function SkeletonCard({
   return (
     <div className={cn('bg-white dark:bg-gray-700 rounded-lg p-4 border dark:border-gray-600', className)}>
       {showAvatar && (
-        <div className="flex items-start gap-4 mb-4">
+        <div className="mb-4 flex items-start gap-4">
           <SkeletonAvatar />
           <div className="flex-1">
-            <Skeleton variant="text" className="w-3/4 mb-2" />
+            <Skeleton variant="text" className="mb-2 w-3/4" />
             <Skeleton variant="text" className="w-1/2" />
           </div>
         </div>
       )}
       {showTitle && (
-        <Skeleton variant="text" className="w-1/2 mb-4 h-6" />
+        <Skeleton variant="text" className="mb-4 h-6 w-1/2" />
       )}
       {showText && (
         <SkeletonText lines={textLines} />
@@ -152,7 +152,7 @@ export function SkeletonTable({
             <tr className="border-b dark:border-gray-600">
               {Array.from({ length: columns }).map((_, i) => (
                 <th key={i} className="p-3">
-                  <Skeleton variant="text" className="w-3/4 h-5" />
+                  <Skeleton variant="text" className="h-5 w-3/4" />
                 </th>
               ))}
             </tr>
@@ -160,7 +160,7 @@ export function SkeletonTable({
         )}
         <tbody>
           {Array.from({ length: rows }).map((_, rowIndex) => (
-            <tr key={rowIndex} className="border-b dark:border-gray-600 last:border-0">
+            <tr key={rowIndex} className="border-b last:border-0 dark:border-gray-600">
               {Array.from({ length: columns }).map((_, colIndex) => (
                 <td key={colIndex} className="p-3">
                   <Skeleton variant="text" className={colIndex === columns - 1 ? 'w-1/2' : 'w-full'} />
@@ -199,9 +199,9 @@ export function PageLoader({ message = 'Loading...', className = '' }: PageLoade
   return (
     <div className={cn('flex flex-col items-center justify-center min-h-[400px] gap-4', className)}>
       <div className="relative">
-        <div className="w-12 h-12 border-4 border-gray-200 dark:border-gray-600 border-t-blue-500 rounded-full animate-spin" />
+        <div className="size-12 animate-spin rounded-full border-4 border-gray-200 border-t-blue-500 dark:border-gray-600" />
       </div>
-      <p className="text-gray-500 dark:text-gray-400 text-sm font-medium">{message}</p>
+      <p className="text-sm font-medium text-gray-500 dark:text-gray-400">{message}</p>
     </div>
   );
 }
@@ -220,7 +220,7 @@ export function InlineLoader({ size = 'md', className = '' }: InlineLoaderProps)
 
   return (
     <div className={cn('flex items-center justify-center', className)}>
-      <div className={`${sizeMap[size]} border-gray-200 dark:border-gray-600 border-t-blue-500 rounded-full animate-spin`} />
+      <div className={`${sizeMap[size]} animate-spin rounded-full border-gray-200 border-t-blue-500 dark:border-gray-600`} />
     </div>
   );
 }
diff --git a/frontend/src/components/Table.tsx b/frontend/src/components/Table.tsx
index 0ef787c..a3972e3 100644
--- a/frontend/src/components/Table.tsx
+++ b/frontend/src/components/Table.tsx
@@ -43,14 +43,14 @@ export function Table<T extends Record<string, any>>({
             <tr className="border-b dark:border-gray-600">
               {Array.from({ length: columns }).map((_, i) => (
                 <th key={i} className="p-3">
-                  <Skeleton variant="text" className="w-3/4 h-5" />
+                  <Skeleton variant="text" className="h-5 w-3/4" />
                 </th>
               ))}
             </tr>
           </thead>
           <tbody>
             {Array.from({ length: rows }).map((_, rowIndex) => (
-              <tr key={rowIndex} className="border-b dark:border-gray-600 last:border-0">
+              <tr key={rowIndex} className="border-b last:border-0 dark:border-gray-600">
                 {Array.from({ length: columns }).map((_, colIndex) => (
                   <td key={colIndex} className="p-3">
                     <Skeleton variant="text" className={colIndex === columns - 1 ? 'w-1/2' : 'w-full'} />
@@ -79,7 +79,7 @@ export function Table<T extends Record<string, any>>({
               {columns.map((column) => (
                 <th
                   key={String(column.key)}
-                  className={`text-left p-3 text-gray-500 dark:text-white ${column.className || ''}`}
+                  className={`p-3 text-left text-gray-500 dark:text-white ${column.className || ''}`}
                 >
                   {column.header}
                 </th>
@@ -91,7 +91,7 @@ export function Table<T extends Record<string, any>>({
               <tr>
                 <td
                   colSpan={columns.length}
-                  className="text-center p-3 text-gray-700 dark:text-gray-300"
+                  className="p-3 text-center text-gray-700 dark:text-gray-300"
                 >
                   {emptyMessage}
                 </td>
diff --git a/frontend/src/components/Toast.tsx b/frontend/src/components/Toast.tsx
index 8cdff1f..8822b15 100644
--- a/frontend/src/components/Toast.tsx
+++ b/frontend/src/components/Toast.tsx
@@ -70,7 +70,7 @@ export function Toast({ id, type, message, duration = 5000, onClose }: ToastProp
     <div
       className={`${baseStyles} ${typeStyles[type]} ${
         isAnimatingOut 
-          ? 'opacity-0 translate-x-full' 
+          ? 'translate-x-full opacity-0' 
           : 'animate-slideInRight opacity-100'
       }`}
     >
@@ -80,7 +80,7 @@ export function Toast({ id, type, message, duration = 5000, onClose }: ToastProp
       </p>
       <button
         onClick={handleClose}
-        className={`ml-2 opacity-70 hover:opacity-100 transition-opacity ${textStyles[type]}`}
+        className={`ml-2 opacity-70 transition-opacity hover:opacity-100 ${textStyles[type]}`}
         aria-label="Close"
       >
         <X size={18} />
diff --git a/frontend/src/components/ToastContext.tsx b/frontend/src/components/ToastContext.tsx
index d6227dc..5195c59 100644
--- a/frontend/src/components/ToastContext.tsx
+++ b/frontend/src/components/ToastContext.tsx
@@ -59,7 +59,7 @@ function ToastContainer({ toasts }: ToastContainerProps) {
   }
 
   return (
-    <div className="fixed bottom-4 right-4 z-50 flex flex-col gap-2 max-w-sm w-full pointer-events-none">
+    <div className="pointer-events-none fixed bottom-4 right-4 z-50 flex w-full max-w-sm flex-col gap-2">
       <div className="pointer-events-auto">
         {toasts.map((toast) => (
           <Toast key={toast.id} {...toast} />
diff --git a/frontend/src/pages/ActivityPage.tsx b/frontend/src/pages/ActivityPage.tsx
index ea79cff..8d28a9f 100644
--- a/frontend/src/pages/ActivityPage.tsx
+++ b/frontend/src/pages/ActivityPage.tsx
@@ -13,7 +13,7 @@ export default function ActivityPage() {
       render: (_: any, row: any) => (
         <Link
           to={`/documents/${row.document_id}`}
-          className="text-blue-600 dark:text-blue-400 hover:underline"
+          className="text-blue-600 hover:underline dark:text-blue-400"
         >
           {row.author || 'Unknown'} - {row.title || 'Unknown'}
         </Link>
diff --git a/frontend/src/pages/AdminImportPage.tsx b/frontend/src/pages/AdminImportPage.tsx
index 5de2d42..fd100b7 100644
--- a/frontend/src/pages/AdminImportPage.tsx
+++ b/frontend/src/pages/AdminImportPage.tsx
@@ -69,21 +69,21 @@ export default function AdminImportPage() {
       <div className="overflow-x-auto">
         <div className="inline-block min-w-full overflow-hidden rounded shadow">
           <div
-            className="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
+            className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
           >
             <p className="text-lg font-semibold text-gray-500">
               Selected Import Directory
             </p>
-            <form className="flex gap-4 flex-col" onSubmit={handleImport}>
-              <div className="flex justify-between gap-4 w-full">
-                <div className="flex gap-4 items-center">
+            <form className="flex flex-col gap-4" onSubmit={handleImport}>
+              <div className="flex w-full justify-between gap-4">
+                <div className="flex items-center gap-4">
                   <FolderOpen size={20} />
-                  <p className="font-medium text-lg break-all">
+                  <p className="break-all text-lg font-medium">
                     {selectedDirectory}
                   </p>
                 </div>
-                <div className="flex flex-col justify-around gap-2 mr-4">
-                  <div className="inline-flex gap-2 items-center">
+                <div className="mr-4 flex flex-col justify-around gap-2">
+                  <div className="inline-flex items-center gap-2">
                     <input
                       type="radio"
                       id="direct"
@@ -92,7 +92,7 @@ export default function AdminImportPage() {
                     />
                     <label htmlFor="direct">Direct</label>
                   </div>
-                  <div className="inline-flex gap-2 items-center">
+                  <div className="inline-flex items-center gap-2">
                     <input
                       type="radio"
                       id="copy"
@@ -127,15 +127,15 @@ export default function AdminImportPage() {
     <div className="overflow-x-auto">
       <div className="inline-block min-w-full overflow-hidden rounded shadow">
         <table
-          className="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm"
+          className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700"
         >
           <thead className="text-gray-800 dark:text-gray-400">
             <tr>
               <th
-                className="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 w-12"
+                className="w-12 border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800"
               ></th>
               <th
-                className="p-3 font-normal text-left border-b border-gray-200 dark:border-gray-800 break-all"
+                className="break-all border-b border-gray-200 p-3 text-left font-normal dark:border-gray-800"
               >
                 {currentPath}
               </th>
@@ -145,9 +145,9 @@ export default function AdminImportPage() {
             {currentPath !== '/' && (
               <tr>
                 <td
-                  className="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"
+                  className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400"
                 ></td>
-                <td className="p-3 border-b border-gray-200">
+                <td className="border-b border-gray-200 p-3">
                   <button onClick={handleNavigateUp}>
                     <p>../</p>
                   </button>
@@ -156,19 +156,19 @@ export default function AdminImportPage() {
             )}
             {directories.length === 0 ? (
               <tr>
-                <td className="text-center p-3" colSpan={2}>No Folders</td>
+                <td className="p-3 text-center" colSpan={2}>No Folders</td>
               </tr>
             ) : (
               directories.map((item) => (
                 <tr key={item.name}>
                   <td
-                    className="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400"
+                    className="border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400"
                   >
                     <button onClick={() => item.name && handleSelectDirectory(item.name)}>
                       <FolderOpen size={20} />
                     </button>
                   </td>
-                  <td className="p-3 border-b border-gray-200">
+                  <td className="border-b border-gray-200 p-3">
                     <button onClick={() => item.name && handleSelectDirectory(item.name)}>
                       <p>{item.name ?? ''}</p>
                     </button>
diff --git a/frontend/src/pages/AdminImportResultsPage.tsx b/frontend/src/pages/AdminImportResultsPage.tsx
index e8fdc3f..5e731aa 100644
--- a/frontend/src/pages/AdminImportResultsPage.tsx
+++ b/frontend/src/pages/AdminImportResultsPage.tsx
@@ -14,22 +14,22 @@ export default function AdminImportResultsPage() {
     <div className="overflow-x-auto">
       <div className="inline-block min-w-full overflow-hidden rounded shadow">
         <table
-          className="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm"
+          className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700"
         >
           <thead className="text-gray-800 dark:text-gray-400">
             <tr>
               <th
-                className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
+                className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
               >
                 Document
               </th>
               <th
-                className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
+                className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
               >
                 Status
               </th>
               <th
-                className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
+                className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
               >
                 Error
               </th>
@@ -38,13 +38,13 @@ export default function AdminImportResultsPage() {
           <tbody className="text-black dark:text-white">
             {results.length === 0 ? (
               <tr>
-                <td className="text-center p-3" colSpan={3}>No Results</td>
+                <td className="p-3 text-center" colSpan={3}>No Results</td>
               </tr>
             ) : (
               results.map((result: ImportResult, index: number) => (
                 <tr key={index}>
                   <td
-                    className="p-3 border-b border-gray-200 grid"
+                    className="grid border-b border-gray-200 p-3"
                     style={{ gridTemplateColumns: '4rem auto' }}
                   >
                     <span className="text-gray-800 dark:text-gray-400">Name:</span>
@@ -56,10 +56,10 @@ export default function AdminImportResultsPage() {
                     <span className="text-gray-800 dark:text-gray-400">File:</span>
                     <span>{result.path}</span>
                   </td>
-                  <td className="p-3 border-b border-gray-200">
+                  <td className="border-b border-gray-200 p-3">
                     <p>{result.status}</p>
                   </td>
-                  <td className="p-3 border-b border-gray-200">
+                  <td className="border-b border-gray-200 p-3">
                     <p>{result.error || ''}</p>
                   </td>
                 </tr>
diff --git a/frontend/src/pages/AdminLogsPage.tsx b/frontend/src/pages/AdminLogsPage.tsx
index 6c34434..c6d9512 100644
--- a/frontend/src/pages/AdminLogsPage.tsx
+++ b/frontend/src/pages/AdminLogsPage.tsx
@@ -25,13 +25,13 @@ export default function AdminLogsPage() {
     <div>
       {/* Filter Form */}
       <div
-        className="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
+        className="mb-4 flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
       >
-        <form className="flex gap-4 flex-col lg:flex-row" onSubmit={handleFilterSubmit}>
-          <div className="flex flex-col w-full grow">
-            <div className="flex relative">
+        <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleFilterSubmit}>
+          <div className="flex w-full grow flex-col">
+            <div className="relative flex">
               <span
-                className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
+                className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
               >
                 <Search size={15} />
               </span>
@@ -39,7 +39,7 @@ export default function AdminLogsPage() {
                 type="text"
                 value={filter}
                 onChange={(e) => setFilter(e.target.value)}
-                className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
+                className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white p-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                 placeholder="JQ Filter"
               />
             </div>
@@ -52,7 +52,7 @@ export default function AdminLogsPage() {
 
       {/* Log Display */}
       <div
-        className="flex flex-col-reverse text-black dark:text-white w-full overflow-scroll"
+        className="flex w-full flex-col-reverse overflow-scroll text-black dark:text-white"
         style={{ fontFamily: 'monospace' }}
       >
         {logs.map((log: string, index: number) => (
diff --git a/frontend/src/pages/AdminPage.tsx b/frontend/src/pages/AdminPage.tsx
index 1225f9c..5d531c3 100644
--- a/frontend/src/pages/AdminPage.tsx
+++ b/frontend/src/pages/AdminPage.tsx
@@ -115,16 +115,16 @@ export default function AdminPage() {
   }
 
   return (
-    <div className="w-full flex flex-col gap-4 grow">
+    <div className="flex w-full grow flex-col gap-4">
       {/* Backup & Restore Card */}
       <div
-        className="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
+        className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
       >
-        <p className="text-lg font-semibold mb-2">Backup & Restore</p>
+        <p className="mb-2 text-lg font-semibold">Backup & Restore</p>
         <div className="flex flex-col gap-4">
           {/* Backup Form */}
           <form className="flex justify-between" onSubmit={handleBackupSubmit}>
-            <div className="flex gap-8 items-center">
+            <div className="flex items-center gap-8">
               <div>
                 <input
                   type="checkbox"
@@ -144,7 +144,7 @@ export default function AdminPage() {
                 <label htmlFor="backup_documents">Documents</label>
               </div>
             </div>
-            <div className="w-40 h-10">
+            <div className="h-10 w-40">
               <Button variant="secondary" type="submit">Backup</Button>
             </div>
           </form>
@@ -152,9 +152,9 @@ export default function AdminPage() {
           {/* Restore Form */}
           <form
             onSubmit={handleRestoreSubmit}
-            className="flex justify-between grow"
+            className="flex grow justify-between"
           >
-            <div className="flex items-center w-1/2">
+            <div className="flex w-1/2 items-center">
               <input
                 type="file"
                 accept=".zip"
@@ -162,7 +162,7 @@ export default function AdminPage() {
                 className="w-full"
               />
             </div>
-            <div className="w-40 h-10">
+            <div className="h-10 w-40">
               <Button variant="secondary" type="submit">Restore</Button>
             </div>
           </form>
@@ -171,17 +171,17 @@ export default function AdminPage() {
 
       {/* Tasks Card */}
       <div
-        className="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
+        className="flex grow flex-col rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
       >
         <p className="text-lg font-semibold">Tasks</p>
-        <table className="min-w-full bg-white dark:bg-gray-700 text-sm">
+        <table className="min-w-full bg-white text-sm dark:bg-gray-700">
           <tbody className="text-black dark:text-white">
             <tr>
               <td className="pl-0">
                 <p>Metadata Matching</p>
               </td>
-              <td className="py-2 float-right">
-                <div className="w-40 h-10 text-base">
+              <td className="float-right py-2">
+                <div className="h-10 w-40 text-base">
                   <Button variant="secondary" onClick={handleMetadataMatch}>Run</Button>
                 </div>
               </td>
@@ -190,8 +190,8 @@ export default function AdminPage() {
               <td>
                 <p>Cache Tables</p>
               </td>
-              <td className="py-2 float-right">
-                <div className="w-40 h-10 text-base">
+              <td className="float-right py-2">
+                <div className="h-10 w-40 text-base">
                   <Button variant="secondary" onClick={handleCacheTables}>Run</Button>
                 </div>
               </td>
diff --git a/frontend/src/pages/AdminUsersPage.tsx b/frontend/src/pages/AdminUsersPage.tsx
index ed73aef..8edbd37 100644
--- a/frontend/src/pages/AdminUsersPage.tsx
+++ b/frontend/src/pages/AdminUsersPage.tsx
@@ -117,22 +117,22 @@ export default function AdminUsersPage() {
     <div className="relative h-full overflow-x-auto">
       {/* Add User Form */}
       {showAddForm && (
-        <div className="absolute top-10 left-10 p-3 transition-all duration-200 bg-gray-200 rounded shadow-lg shadow-gray-500 dark:shadow-gray-900 dark:bg-gray-600">
+        <div className="absolute left-10 top-10 rounded bg-gray-200 p-3 shadow-lg shadow-gray-500 transition-all duration-200 dark:bg-gray-600 dark:shadow-gray-900">
           <form onSubmit={handleCreateUser}
-                className="flex flex-col gap-2 text-black dark:text-white text-sm">
+                className="flex flex-col gap-2 text-sm text-black dark:text-white">
             <input
               type="text"
               value={newUsername}
               onChange={(e) => setNewUsername(e.target.value)}
               placeholder="Username"
-              className="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
+              className="bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
             />
             <input
               type="password"
               value={newPassword}
               onChange={(e) => setNewPassword(e.target.value)}
               placeholder="Password"
-              className="p-2 bg-gray-300 text-black dark:bg-gray-700 dark:text-white"
+              className="bg-gray-300 p-2 text-black dark:bg-gray-700 dark:text-white"
             />
             <div className="flex items-center gap-2">
               <input
@@ -144,7 +144,7 @@ export default function AdminUsersPage() {
               <label htmlFor="new_is_admin">Admin</label>
             </div>
             <button
-              className="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
+              className="bg-gray-500 px-2 py-1 font-medium text-white hover:bg-gray-800 dark:text-gray-800 dark:hover:bg-gray-100"
               type="submit"
             >
               Create
@@ -155,38 +155,38 @@ export default function AdminUsersPage() {
 
       {/* Users Table */}
       <div className="min-w-full overflow-scroll rounded shadow">
-        <table className="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm">
+        <table className="min-w-full bg-white text-sm leading-normal dark:bg-gray-700">
           <thead className="text-gray-800 dark:text-gray-400">
             <tr>
-              <th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 w-12">
+              <th className="w-12 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">
                 <button onClick={() => setShowAddForm(!showAddForm)}>
                   <Plus size={20} />
                 </button>
               </th>
-              <th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">User</th>
-              <th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800">Password</th>
-              <th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 text-center">
+              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">User</th>
+              <th className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">Password</th>
+              <th className="border-b border-gray-200 p-3 text-left text-center font-normal uppercase dark:border-gray-800">
                 Permissions
               </th>
-              <th className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800 w-48">Created</th>
+              <th className="w-48 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800">Created</th>
             </tr>
           </thead>
           <tbody className="text-black dark:text-white">
             {users.length === 0 ? (
               <tr>
-                <td className="text-center p-3" colSpan={5}>No Results</td>
+                <td className="p-3 text-center" colSpan={5}>No Results</td>
               </tr>
             ) : (
               users.map((user) => (
                 <tr key={user.id}>
                   {/* Delete Button */}
-                  <td className="p-3 border-b border-gray-200 text-gray-800 dark:text-gray-400 cursor-pointer relative">
+                  <td className="relative cursor-pointer border-b border-gray-200 p-3 text-gray-800 dark:text-gray-400">
                     <button onClick={() => handleDeleteUser(user.id)}>
                       <Trash2 size={20} />
                     </button>
                   </td>
                   {/* User ID */}
-                  <td className="p-3 border-b border-gray-200">
+                  <td className="border-b border-gray-200 p-3">
                     <p>{user.id}</p>
                   </td>
                   {/* Password Reset */}
@@ -196,20 +196,20 @@ export default function AdminUsersPage() {
                         const password = prompt(`Enter new password for ${user.id}`);
                         if (password) handleUpdatePassword(user.id, password);
                       }}
-                      className="font-medium px-2 py-1 text-white bg-gray-500 dark:text-gray-800 hover:bg-gray-800 dark:hover:bg-gray-100"
+                      className="bg-gray-500 px-2 py-1 font-medium text-white hover:bg-gray-800 dark:text-gray-800 dark:hover:bg-gray-100"
                     >
                       Reset
                     </button>
                   </td>
                   {/* Admin Toggle */}
-                  <td className="flex gap-2 justify-center p-3 border-b border-gray-200 text-center min-w-40">
+                  <td className="flex min-w-40 justify-center gap-2 border-b border-gray-200 p-3 text-center">
                     <button
                       onClick={() => handleToggleAdmin(user.id, true)}
                       disabled={user.admin}
-                      className={`px-2 py-1 rounded-md text-white dark:text-black ${
+                      className={`rounded-md px-2 py-1 text-white dark:text-black ${
                         user.admin
-                          ? 'bg-gray-800 dark:bg-gray-100 cursor-default'
-                          : 'bg-gray-400 dark:bg-gray-600 cursor-pointer'
+                          ? 'cursor-default bg-gray-800 dark:bg-gray-100'
+                          : 'cursor-pointer bg-gray-400 dark:bg-gray-600'
                       }`}
                     >
                       admin
@@ -217,17 +217,17 @@ export default function AdminUsersPage() {
                     <button
                       onClick={() => handleToggleAdmin(user.id, false)}
                       disabled={!user.admin}
-                      className={`px-2 py-1 rounded-md text-white dark:text-black ${
+                      className={`rounded-md px-2 py-1 text-white dark:text-black ${
                         !user.admin
-                          ? 'bg-gray-800 dark:bg-gray-100 cursor-default'
-                          : 'bg-gray-400 dark:bg-gray-600 cursor-pointer'
+                          ? 'cursor-default bg-gray-800 dark:bg-gray-100'
+                          : 'cursor-pointer bg-gray-400 dark:bg-gray-600'
                       }`}
                     >
                       user
                     </button>
                   </td>
                   {/* Created Date */}
-                  <td className="p-3 border-b border-gray-200">
+                  <td className="border-b border-gray-200 p-3">
                     <p>{user.created_at}</p>
                   </td>
                 </tr>
diff --git a/frontend/src/pages/ComponentDemoPage.tsx b/frontend/src/pages/ComponentDemoPage.tsx
index f8c2d42..fe2f463 100644
--- a/frontend/src/pages/ComponentDemoPage.tsx
+++ b/frontend/src/pages/ComponentDemoPage.tsx
@@ -42,31 +42,31 @@ export default function ComponentDemoPage() {
       <h1 className="text-2xl font-bold dark:text-white">UI Components Demo</h1>
 
       {/* Toast Demos */}
-      <section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
-        <h2 className="text-xl font-semibold mb-4 dark:text-white">Toast Notifications</h2>
+      <section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
+        <h2 className="mb-4 text-xl font-semibold dark:text-white">Toast Notifications</h2>
         <div className="flex flex-wrap gap-4">
           <button
             onClick={handleDemoClick}
             disabled={isLoading}
-            className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600 disabled:opacity-50 disabled:cursor-not-allowed"
+            className="rounded bg-blue-500 px-4 py-2 text-white hover:bg-blue-600 disabled:cursor-not-allowed disabled:opacity-50"
           >
             {isLoading ? <InlineLoader size="sm" /> : 'Show Info Toast'}
           </button>
           <button
             onClick={handleWarningClick}
-            className="px-4 py-2 bg-yellow-500 text-white rounded hover:bg-yellow-600"
+            className="rounded bg-yellow-500 px-4 py-2 text-white hover:bg-yellow-600"
           >
             Show Warning Toast (10s)
           </button>
           <button
             onClick={handleErrorClick}
-            className="px-4 py-2 bg-red-500 text-white rounded hover:bg-red-600"
+            className="rounded bg-red-500 px-4 py-2 text-white hover:bg-red-600"
           >
             Show Error Toast
           </button>
           <button
             onClick={handleCustomToast}
-            className="px-4 py-2 bg-purple-500 text-white rounded hover:bg-purple-600"
+            className="rounded bg-purple-500 px-4 py-2 text-white hover:bg-purple-600"
           >
             Show Custom Toast
           </button>
@@ -74,15 +74,15 @@ export default function ComponentDemoPage() {
       </section>
 
       {/* Skeleton Demos */}
-      <section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
-        <h2 className="text-xl font-semibold mb-4 dark:text-white">Skeleton Loading Components</h2>
+      <section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
+        <h2 className="mb-4 text-xl font-semibold dark:text-white">Skeleton Loading Components</h2>
         
-        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+        <div className="grid grid-cols-1 gap-8 md:grid-cols-2">
           {/* Basic Skeletons */}
           <div className="space-y-4">
             <h3 className="text-lg font-medium dark:text-gray-300">Basic Skeletons</h3>
             <div className="space-y-2">
-              <Skeleton className="w-full h-8" />
+              <Skeleton className="h-8 w-full" />
               <Skeleton variant="text" className="w-3/4" />
               <Skeleton variant="text" className="w-1/2" />
               <div className="flex items-center gap-4">
@@ -113,7 +113,7 @@ export default function ComponentDemoPage() {
           {/* Skeleton Button */}
           <div className="space-y-4">
             <h3 className="text-lg font-medium dark:text-gray-300">Skeleton Button</h3>
-            <div className="flex gap-2 flex-wrap">
+            <div className="flex flex-wrap gap-2">
               <SkeletonButton width={120} />
               <SkeletonButton className="w-full max-w-xs" />
             </div>
@@ -122,9 +122,9 @@ export default function ComponentDemoPage() {
       </section>
 
       {/* Skeleton Card Demo */}
-      <section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
-        <h2 className="text-xl font-semibold mb-4 dark:text-white">Skeleton Cards</h2>
-        <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
+      <section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
+        <h2 className="mb-4 text-xl font-semibold dark:text-white">Skeleton Cards</h2>
+        <div className="grid grid-cols-1 gap-4 md:grid-cols-2 lg:grid-cols-3">
           <SkeletonCard />
           <SkeletonCard showAvatar />
           <SkeletonCard showAvatar showTitle showText textLines={4} />
@@ -132,20 +132,20 @@ export default function ComponentDemoPage() {
       </section>
 
       {/* Skeleton Table Demo */}
-      <section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
-        <h2 className="text-xl font-semibold mb-4 dark:text-white">Skeleton Table</h2>
+      <section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
+        <h2 className="mb-4 text-xl font-semibold dark:text-white">Skeleton Table</h2>
         <SkeletonTable rows={5} columns={4} />
       </section>
 
       {/* Page Loader Demo */}
-      <section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
-        <h2 className="text-xl font-semibold mb-4 dark:text-white">Page Loader</h2>
+      <section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
+        <h2 className="mb-4 text-xl font-semibold dark:text-white">Page Loader</h2>
         <PageLoader message="Loading demo content..." />
       </section>
 
       {/* Inline Loader Demo */}
-      <section className="bg-white dark:bg-gray-700 rounded-lg p-6 shadow">
-        <h2 className="text-xl font-semibold mb-4 dark:text-white">Inline Loader</h2>
+      <section className="rounded-lg bg-white p-6 shadow dark:bg-gray-700">
+        <h2 className="mb-4 text-xl font-semibold dark:text-white">Inline Loader</h2>
         <div className="flex items-center gap-8">
           <div className="text-center">
             <InlineLoader size="sm" />
diff --git a/frontend/src/pages/DocumentPage.tsx b/frontend/src/pages/DocumentPage.tsx
index 7676e93..9289ed9 100644
--- a/frontend/src/pages/DocumentPage.tsx
+++ b/frontend/src/pages/DocumentPage.tsx
@@ -74,19 +74,19 @@ export default function DocumentPage() {
   const totalTimeLeftSeconds = Math.round((100 - percentage) * secondsPerPercent);
 
   return (
-    <div className="h-full w-full relative">
+    <div className="relative size-full">
       <div
-        className="h-full w-full overflow-scroll bg-white shadow-lg dark:bg-gray-700 rounded dark:text-white p-4"
+        className="size-full overflow-scroll rounded bg-white p-4 shadow-lg dark:bg-gray-700 dark:text-white"
       >
         {/* Document Info - Left Column */}
         <div
-          className="flex flex-col gap-2 float-left w-44 md:w-60 lg:w-80 mr-4 mb-2 relative"
+          className="relative float-left mb-2 mr-4 flex w-44 flex-col gap-2 md:w-60 lg:w-80"
         >
           {/* Cover Image */}
           {document.filepath && (
-            <div className="rounded object-fill w-full bg-gray-200 dark:bg-gray-600 h-60">
+            <div className="h-60 w-full rounded bg-gray-200 object-fill dark:bg-gray-600">
               <img
-                className="rounded object-cover h-full"
+                className="h-full rounded object-cover"
                 src={`/api/v1/documents/${document.id}/cover`}
                 alt={`${document.title} cover`}
               />
@@ -97,14 +97,14 @@ export default function DocumentPage() {
           {document.filepath && (
             <a
               href={`/reader#id=${document.id}&type=REMOTE`}
-              className="z-10 text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none w-full mt-2"
+              className="z-10 mt-2 w-full rounded bg-blue-700 py-1 text-center text-sm font-medium text-white hover:bg-blue-800 focus:outline-none focus:ring-4 focus:ring-blue-300 dark:bg-blue-600 dark:hover:bg-blue-700"
             >
               Read
             </a>
           )}
           
           {/* Action Buttons */}
-          <div className="flex flex-wrap-reverse justify-between gap-2 z-20 relative my-2">
+          <div className="relative z-20 my-2 flex flex-wrap-reverse justify-between gap-2">
             <div className="min-w-[50%] md:mr-2">
               <div className="flex gap-1 text-sm">
                 <p className="text-gray-500">ISBN-10:</p>
@@ -123,7 +123,7 @@ export default function DocumentPage() {
                 className="z-10 text-gray-500 dark:text-gray-400"
                 title="Download"
               >
-                <svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <svg className="size-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
                   <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16v1a3 3 0 003-3h4a3 3 0 003 3v1m0-3l-3 3m0 0L4 20" />
                 </svg>
               </a>
@@ -132,34 +132,34 @@ export default function DocumentPage() {
         </div>
 
         {/* Document Details Grid */}
-        <div className="grid sm:grid-cols-2 justify-between gap-4 pb-4">
+        <div className="grid justify-between gap-4 pb-4 sm:grid-cols-2">
           {/* Title - Editable */}
           <div className="relative">
-            <div className="text-gray-500 inline-flex gap-2 relative">
+            <div className="relative inline-flex gap-2 text-gray-500">
               <p>Title</p>
             </div>
-            <div className="relative font-medium text-justify hyphens-auto">
+            <div className="relative hyphens-auto text-justify font-medium">
               <p>{document.title}</p>
             </div>
           </div>
 
           {/* Author - Editable */}
           <div className="relative">
-            <div className="text-gray-500 inline-flex gap-2 relative">
+            <div className="relative inline-flex gap-2 text-gray-500">
               <p>Author</p>
             </div>
-            <div className="relative font-medium text-justify hyphens-auto">
+            <div className="relative hyphens-auto text-justify font-medium">
               <p>{document.author}</p>
             </div>
           </div>
 
           {/* Time Read */}
           <div className="relative">
-            <div className="text-gray-500 inline-flex gap-2 relative">
+            <div className="relative inline-flex gap-2 text-gray-500">
               <p>Time Read</p>
             </div>
             <div className="relative">
-              <p className="font-medium text-lg">
+              <p className="text-lg font-medium">
                 {document.total_time_seconds ? niceSeconds(document.total_time_seconds) : 'N/A'}
               </p>
             </div>
@@ -168,7 +168,7 @@ export default function DocumentPage() {
           {/* Progress */}
           <div>
             <p className="text-gray-500">Progress</p>
-            <p className="font-medium text-lg">
+            <p className="text-lg font-medium">
               {percentage ? `${Math.round(percentage)}%` : '0%'}
             </p>
           </div>
@@ -176,16 +176,16 @@ export default function DocumentPage() {
 
         {/* Description - Editable */}
         <div className="relative">
-          <div className="text-gray-500 inline-flex gap-2 relative">
+          <div className="relative inline-flex gap-2 text-gray-500">
             <p>Description</p>
           </div>
-          <div className="relative font-medium text-justify hyphens-auto">
+          <div className="relative hyphens-auto text-justify font-medium">
             <p>{document.description || 'N/A'}</p>
           </div>
         </div>
 
         {/* Reading Statistics */}
-        <div className="mt-4 grid sm:grid-cols-3 gap-4">
+        <div className="mt-4 grid gap-4 sm:grid-cols-3">
           <div>
             <p className="text-gray-500">Words</p>
             <p className="font-medium">{document.words || 'N/A'}</p>
@@ -206,14 +206,14 @@ export default function DocumentPage() {
 
         {/* Additional Reading Stats - Matching Legacy Template */}
         {progress && (
-          <div className="mt-4 grid sm:grid-cols-2 gap-4">
-            <div className="flex gap-2 items-center">
+          <div className="mt-4 grid gap-4 sm:grid-cols-2">
+            <div className="flex items-center gap-2">
               <p className="text-gray-500">Words / Minute:</p>
               <p className="font-medium">{document.wpm || 'N/A'}</p>
             </div>
-            <div className="flex gap-2 items-center">
+            <div className="flex items-center gap-2">
               <p className="text-gray-500">Est. Time Left:</p>
-              <p className="font-medium whitespace-nowrap">
+              <p className="whitespace-nowrap font-medium">
                 {niceSeconds(totalTimeLeftSeconds)}
               </p>
             </div>
diff --git a/frontend/src/pages/DocumentsPage.tsx b/frontend/src/pages/DocumentsPage.tsx
index 5d12073..56f697d 100644
--- a/frontend/src/pages/DocumentsPage.tsx
+++ b/frontend/src/pages/DocumentsPage.tsx
@@ -34,20 +34,20 @@ function DocumentCard({ doc }: DocumentCardProps) {
   };
 
   return (
-    <div className="w-full relative">
+    <div className="relative w-full">
       <div
-        className="flex gap-4 w-full h-full p-4 shadow-lg bg-white dark:bg-gray-700 rounded"
+        className="flex size-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700"
       >
-        <div className="min-w-fit my-auto h-48 relative">
+        <div className="relative my-auto h-48 min-w-fit">
           <Link to={`/documents/${doc.id}`}>
             <img
-              className="rounded object-cover h-full"
+              className="h-full rounded object-cover"
               src={`/api/v1/documents/${doc.id}/cover`}
               alt={doc.title}
             />
           </Link>
         </div>
-        <div className="flex flex-col justify-around dark:text-white w-full text-sm">
+        <div className="flex w-full flex-col justify-around text-sm dark:text-white">
           <div className="inline-flex shrink-0 items-center">
             <div>
               <p className="text-gray-400">Title</p>
@@ -74,7 +74,7 @@ function DocumentCard({ doc }: DocumentCardProps) {
           </div>
         </div>
         <div
-          className="absolute flex flex-col gap-2 right-4 bottom-4 text-gray-500 dark:text-gray-400"
+          className="absolute bottom-4 right-4 flex flex-col gap-2 text-gray-500 dark:text-gray-400"
         >
           <Link to={`/activity?document=${doc.id}`}>
             <Activity size={20} />
@@ -153,13 +153,13 @@ export default function DocumentsPage() {
     <div className="flex flex-col gap-4">
       {/* Search Form */}
       <div
-        className="flex flex-col gap-2 grow p-4 mb-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
+        className="mb-4 flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
       >
-        <form className="flex gap-4 flex-col lg:flex-row" onSubmit={handleSubmit}>
-          <div className="flex flex-col w-full grow">
-            <div className="flex relative">
+        <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleSubmit}>
+          <div className="flex w-full grow flex-col">
+            <div className="relative flex">
               <span
-                className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
+                className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
               >
                 <Search size={15} />
               </span>
@@ -167,7 +167,7 @@ export default function DocumentsPage() {
                 type="text"
                 value={search}
                 onChange={(e) => setSearch(e.target.value)}
-                className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-2 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
+                className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white p-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                 placeholder="Search Author / Title"
                 name="search"
               />
@@ -187,11 +187,11 @@ export default function DocumentsPage() {
       </div>
 
       {/* Pagination */}
-      <div className="w-full flex gap-4 justify-center mt-4 text-black dark:text-white">
+      <div className="mt-4 flex w-full justify-center gap-4 text-black dark:text-white">
         {previousPage && previousPage > 0 && (
           <button
             onClick={() => setPage(page - 1)}
-            className="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
+            className="w-24 rounded bg-white p-2 text-center text-sm font-medium shadow-lg hover:bg-gray-400 focus:outline-none dark:bg-gray-600 dark:hover:bg-gray-700"
           >
             ◄
           </button>
@@ -199,7 +199,7 @@ export default function DocumentsPage() {
         {nextPage && nextPage > 0 && (
           <button
             onClick={() => setPage(page + 1)}
-            className="bg-white shadow-lg dark:bg-gray-600 hover:bg-gray-400 font-medium rounded text-sm text-center p-2 w-24 dark:hover:bg-gray-700 focus:outline-none"
+            className="w-24 rounded bg-white p-2 text-center text-sm font-medium shadow-lg hover:bg-gray-400 focus:outline-none dark:bg-gray-600 dark:hover:bg-gray-700"
           >
             ►
           </button>
@@ -208,7 +208,7 @@ export default function DocumentsPage() {
 
       {/* Upload Button */}
       <div
-        className="fixed bottom-6 right-6 rounded-full flex items-center justify-center"
+        className="fixed bottom-6 right-6 flex items-center justify-center rounded-full"
       >
         <input 
           type="checkbox" 
@@ -218,7 +218,7 @@ export default function DocumentsPage() {
           onChange={() => setUploadMode(!uploadMode)}
         />
         <div
-          className={`absolute right-0 z-10 bottom-0 rounded p-4 bg-gray-800 dark:bg-gray-200 text-white dark:text-black w-72 text-sm flex flex-col gap-2 transition-opacity duration-200 ${uploadMode ? 'visible opacity-100' : 'invisible opacity-0'}`}
+          className={`absolute bottom-0 right-0 z-10 flex w-72 flex-col gap-2 rounded bg-gray-800 p-4 text-sm text-white transition-opacity duration-200 dark:bg-gray-200 dark:text-black ${uploadMode ? 'visible opacity-100' : 'invisible opacity-0'}`}
         >
           <form
             method="POST"
@@ -234,7 +234,7 @@ export default function DocumentsPage() {
               onChange={handleFileChange}
             />
             <button
-              className="font-medium px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
+              className="bg-gray-500 px-2 py-1 font-medium text-gray-800 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-800"
               type="submit"
               onClick={(e) => {
                 e.preventDefault();
@@ -246,7 +246,7 @@ export default function DocumentsPage() {
           </form>
           <label htmlFor="upload-file-button">
             <div
-              className="w-full text-center cursor-pointer font-medium mt-2 px-2 py-1 text-gray-800 bg-gray-500 dark:text-white hover:bg-gray-100 dark:hover:bg-gray-800"
+              className="mt-2 w-full cursor-pointer bg-gray-500 px-2 py-1 text-center font-medium text-gray-800 hover:bg-gray-100 dark:text-white dark:hover:bg-gray-800"
               onClick={handleCancelUpload}
             >
               Cancel Upload
@@ -254,7 +254,7 @@ export default function DocumentsPage() {
           </label>
         </div>
         <label
-          className="w-16 h-16 bg-gray-800 dark:bg-gray-200 rounded-full flex items-center justify-center opacity-30 hover:opacity-100 transition-all duration-200 cursor-pointer"
+          className="flex size-16 cursor-pointer items-center justify-center rounded-full bg-gray-800 opacity-30 transition-all duration-200 hover:opacity-100 dark:bg-gray-200"
           htmlFor="upload-file-button"
         >
           <Upload size={34} />
diff --git a/frontend/src/pages/HomePage.tsx b/frontend/src/pages/HomePage.tsx
index 33caf80..84bcbdc 100644
--- a/frontend/src/pages/HomePage.tsx
+++ b/frontend/src/pages/HomePage.tsx
@@ -12,8 +12,8 @@ function InfoCard({ title, size, link }: InfoCardProps) {
   if (link) {
     return (
       <Link to={link} className="w-full">
-        <div className="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
-          <div className="flex flex-col justify-around dark:text-white w-full text-sm">
+        <div className="flex w-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
+          <div className="flex w-full flex-col justify-around text-sm dark:text-white">
             <p className="text-2xl font-bold text-black dark:text-white">{size}</p>
             <p className="text-sm text-gray-400">{title}</p>
           </div>
@@ -24,8 +24,8 @@ function InfoCard({ title, size, link }: InfoCardProps) {
   
   return (
     <div className="w-full">
-      <div className="flex gap-4 w-full p-4 bg-white shadow-lg dark:bg-gray-700 rounded">
-        <div className="flex flex-col justify-around dark:text-white w-full text-sm">
+      <div className="flex w-full gap-4 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
+        <div className="flex w-full flex-col justify-around text-sm dark:text-white">
           <p className="text-2xl font-bold text-black dark:text-white">{size}</p>
           <p className="text-sm text-gray-400">{title}</p>
         </div>
@@ -47,15 +47,15 @@ interface StreakCardProps {
 function StreakCard({ window, currentStreak, currentStreakStartDate, currentStreakEndDate, maxStreak, maxStreakStartDate, maxStreakEndDate }: StreakCardProps) {
   return (
     <div className="w-full">
-      <div className="relative w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded">
-        <p className="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
+      <div className="relative w-full rounded bg-white px-4 py-6 shadow-lg dark:bg-gray-700">
+        <p className="w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
           {window === 'WEEK' ? 'Weekly Read Streak' : 'Daily Read Streak'}
         </p>
-        <div className="flex items-end my-6 space-x-2">
+        <div className="my-6 flex items-end space-x-2">
           <p className="text-5xl font-bold text-black dark:text-white">{currentStreak}</p>
         </div>
         <div className="dark:text-white">
-          <div className="flex items-center justify-between pb-2 mb-2 text-sm border-b border-gray-200">
+          <div className="mb-2 flex items-center justify-between border-b border-gray-200 pb-2 text-sm">
             <div>
               <p>{window === 'WEEK' ? 'Current Weekly Streak' : 'Current Daily Streak'}</p>
               <div className="flex items-end text-sm text-gray-400">
@@ -64,7 +64,7 @@ function StreakCard({ window, currentStreak, currentStreakStartDate, currentStre
             </div>
             <div className="flex items-end font-bold">{currentStreak}</div>
           </div>
-          <div className="flex items-center justify-between pb-2 mb-2 text-sm">
+          <div className="mb-2 flex items-center justify-between pb-2 text-sm">
             <div>
               <p>{window === 'WEEK' ? 'Best Weekly Streak' : 'Best Daily Streak'}</p>
               <div className="flex items-end text-sm text-gray-400">
@@ -87,13 +87,13 @@ interface LeaderboardCardProps {
 function LeaderboardCard({ name, data }: LeaderboardCardProps) {
   return (
     <div className="w-full">
-      <div className="flex flex-col justify-between h-full w-full px-4 py-6 bg-white shadow-lg dark:bg-gray-700 rounded">
+      <div className="flex size-full flex-col justify-between rounded bg-white px-4 py-6 shadow-lg dark:bg-gray-700">
         <div>
           <div className="flex justify-between">
-            <p className="text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
+            <p className="w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
               {name} Leaderboard
             </p>
-            <div className="flex gap-2 text-xs text-gray-400 items-center">
+            <div className="flex items-center gap-2 text-xs text-gray-400">
               <span className="cursor-pointer hover:text-black dark:hover:text-white">all</span>
               <span className="cursor-pointer hover:text-black dark:hover:text-white">year</span>
               <span className="cursor-pointer hover:text-black dark:hover:text-white">month</span>
@@ -103,7 +103,7 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
         </div>
         
         {/* All time data */}
-        <div className="flex items-end my-6 space-x-2">
+        <div className="my-6 flex items-end space-x-2">
           {data.all.length === 0 ? (
             <p className="text-5xl font-bold text-black dark:text-white">N/A</p>
           ) : (
@@ -115,7 +115,7 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
           {data.all.slice(0, 3).map((item: any, index: number) => (
             <div 
               key={index} 
-              className={`flex items-center justify-between pt-2 pb-2 text-sm ${index > 0 ? 'border-t border-gray-200' : ''}`}
+              className={`flex items-center justify-between py-2 text-sm ${index > 0 ? 'border-t border-gray-200' : ''}`}
             >
               <div>
                 <p>{item.user_id}</p>
@@ -132,7 +132,7 @@ function LeaderboardCard({ name, data }: LeaderboardCardProps) {
 function GraphVisualization({ data }: { data: GraphDataPoint[] }) {
   if (!data || data.length === 0) {
     return (
-      <div className="relative h-24 flex items-center justify-center bg-gray-100 dark:bg-gray-600">
+      <div className="relative flex h-24 items-center justify-center bg-gray-100 dark:bg-gray-600">
         <p className="text-gray-400 dark:text-gray-300">No data available</p>
       </div>
     );
@@ -142,14 +142,14 @@ function GraphVisualization({ data }: { data: GraphDataPoint[] }) {
   const maxMinutes = Math.max(...data.map(d => d.minutes_read), 1);
   
   return (
-    <div className="relative h-24 flex items-end justify-between p-2 bg-gray-100 dark:bg-gray-600">
+    <div className="relative flex h-24 items-end justify-between bg-gray-100 p-2 dark:bg-gray-600">
       {data.map((point, i) => (
         <div
           key={i}
-          className="flex-1 mx-0.5 bg-blue-500 hover:bg-blue-600 transition-colors relative group"
+          className="group relative mx-0.5 flex-1 bg-blue-500 transition-colors hover:bg-blue-600"
           style={{ height: `${(point.minutes_read / maxMinutes) * 100}%` }}
         >
-          <div className="absolute bottom-full mb-1 left-0 w-full text-xs text-center text-gray-600 dark:text-gray-300 opacity-0 group-hover:opacity-100 pointer-events-none">
+          <div className="pointer-events-none absolute bottom-full left-0 mb-1 w-full text-center text-xs text-gray-600 opacity-0 group-hover:opacity-100 dark:text-gray-300">
             {point.minutes_read} min
           </div>
         </div>
@@ -176,8 +176,8 @@ export default function HomePage() {
     <div className="flex flex-col gap-4">
       {/* Daily Read Totals Graph */}
       <div className="w-full">
-        <div className="relative w-full bg-white shadow-lg dark:bg-gray-700 rounded">
-          <p className="absolute top-3 left-5 text-sm font-semibold text-gray-700 border-b border-gray-200 w-max dark:text-white dark:border-gray-500">
+        <div className="relative w-full rounded bg-white shadow-lg dark:bg-gray-700">
+          <p className="absolute left-5 top-3 w-max border-b border-gray-200 text-sm font-semibold text-gray-700 dark:border-gray-500 dark:text-white">
             Daily Read Totals
           </p>
           <GraphVisualization data={graphData || []} />
@@ -244,13 +244,13 @@ export default function HomePage() {
         {docs?.slice(0, 6).map((doc: any) => (
           <div
             key={doc.id}
-            className="flex flex-col gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
+            className="flex flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
           >
-            <h3 className="font-medium text-lg">{doc.title}</h3>
+            <h3 className="text-lg font-medium">{doc.title}</h3>
             <p className="text-sm">{doc.author}</p>
             <Link
               to={`/documents/${doc.id}`}
-              className="text-white bg-blue-700 hover:bg-blue-800 font-medium rounded text-sm text-center py-1 dark:bg-blue-600 dark:hover:bg-blue-700"
+              className="rounded bg-blue-700 py-1 text-center text-sm font-medium text-white hover:bg-blue-800 dark:bg-blue-600 dark:hover:bg-blue-700"
             >
               View Document
             </Link>
diff --git a/frontend/src/pages/LoginPage.tsx b/frontend/src/pages/LoginPage.tsx
index 7f6bcff..6cd27b2 100644
--- a/frontend/src/pages/LoginPage.tsx
+++ b/frontend/src/pages/LoginPage.tsx
@@ -34,34 +34,34 @@ export default function LoginPage() {
   };
 
   return (
-    <div className="bg-gray-100 dark:bg-gray-800 dark:text-white min-h-screen">
-      <div className="flex flex-wrap w-full">
-        <div className="flex flex-col w-full md:w-1/2">
+    <div className="min-h-screen bg-gray-100 dark:bg-gray-800 dark:text-white">
+      <div className="flex w-full flex-wrap">
+        <div className="flex w-full flex-col md:w-1/2">
           <div
-            className="flex flex-col justify-center px-8 pt-8 my-auto md:justify-start md:pt-0 md:px-24 lg:px-32"
+            className="my-auto flex flex-col justify-center px-8 pt-8 md:justify-start md:px-24 md:pt-0 lg:px-32"
           >
-            <p className="text-3xl text-center">Welcome.</p>
+            <p className="text-center text-3xl">Welcome.</p>
             <form className="flex flex-col pt-3 md:pt-8" onSubmit={handleSubmit}>
               <div className="flex flex-col pt-4">
-                <div className="flex relative">
+                <div className="relative flex">
                   <input
                     type="text"
                     value={username}
                     onChange={(e) => setUsername(e.target.value)}
-                    className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
+                    className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                     placeholder="Username"
                     required
                     disabled={isLoading}
                   />
                 </div>
               </div>
-              <div className="flex flex-col pt-4 mb-12">
-                <div className="flex relative">
+              <div className="mb-12 flex flex-col pt-4">
+                <div className="relative flex">
                   <input
                     type="password"
                     value={password}
                     onChange={(e) => setPassword(e.target.value)}
-                    className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
+                    className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                     placeholder="Password"
                     required
                     disabled={isLoading}
@@ -72,12 +72,12 @@ export default function LoginPage() {
                 variant="secondary" 
                 type="submit" 
                 disabled={isLoading}
-                className="w-full px-4 py-2 text-base font-semibold text-center transition duration-200 ease-in focus:outline-none focus:ring-2 disabled:opacity-50"
+                className="w-full px-4 py-2 text-center text-base font-semibold transition duration-200 ease-in focus:outline-none focus:ring-2 disabled:opacity-50"
               >
                 {isLoading ? 'Logging in...' : 'Login'}
               </Button>
             </form>
-            <div className="pt-12 pb-12 text-center">
+            <div className="py-12 text-center">
               <p className="mt-4">
                 <a href="/local" className="font-semibold underline">
                   Offline / Local Mode
@@ -86,8 +86,8 @@ export default function LoginPage() {
             </div>
           </div>
         </div>
-        <div className="hidden image-fader w-1/2 shadow-2xl h-screen relative md:block">
-          <div className="w-full h-screen object-cover ease-in-out top-0 left-0 bg-gray-300 flex items-center justify-center">
+        <div className="image-fader relative hidden h-screen w-1/2 shadow-2xl md:block">
+          <div className="left-0 top-0 flex h-screen w-full items-center justify-center bg-gray-300 object-cover ease-in-out">
             <span className="text-gray-500">AnthoLume</span>
           </div>
         </div>
diff --git a/frontend/src/pages/ProgressPage.tsx b/frontend/src/pages/ProgressPage.tsx
index cf3dbe1..59b8cb7 100644
--- a/frontend/src/pages/ProgressPage.tsx
+++ b/frontend/src/pages/ProgressPage.tsx
@@ -13,7 +13,7 @@ export default function ProgressPage() {
       render: (_: any, row: any) => (
         <Link
           to={`/documents/${row.document_id}`}
-          className="text-blue-600 dark:text-blue-400 hover:underline"
+          className="text-blue-600 hover:underline dark:text-blue-400"
         >
           {row.author || 'Unknown'} - {row.title || 'Unknown'}
         </Link>
diff --git a/frontend/src/pages/SearchPage.tsx b/frontend/src/pages/SearchPage.tsx
index 7334837..484a219 100644
--- a/frontend/src/pages/SearchPage.tsx
+++ b/frontend/src/pages/SearchPage.tsx
@@ -17,17 +17,17 @@ export default function SearchPage() {
   };
 
   return (
-    <div className="w-full flex flex-col md:flex-row gap-4">
-      <div className="flex flex-col gap-4 grow">
+    <div className="flex w-full flex-col gap-4 md:flex-row">
+      <div className="flex grow flex-col gap-4">
         {/* Search Form */}
         <div
-          className="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
+          className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
         >
-          <form className="flex gap-4 flex-col lg:flex-row" onSubmit={handleSubmit}>
-            <div className="flex flex-col w-full grow">
-              <div className="flex relative">
+          <form className="flex flex-col gap-4 lg:flex-row" onSubmit={handleSubmit}>
+            <div className="flex w-full grow flex-col">
+              <div className="relative flex">
                 <span
-                  className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
+                  className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
                 >
                   <Search size={15} />
                 </span>
@@ -35,21 +35,21 @@ export default function SearchPage() {
                   type="text"
                   value={query}
                   onChange={(e) => setQuery(e.target.value)}
-                  className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
+                  className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                   placeholder="Query"
                 />
               </div>
             </div>
-            <div className="flex relative min-w-[12em]">
+            <div className="relative flex min-w-[12em]">
               <span
-                className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
+                className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
               >
                 <Book size={15} />
               </span>
               <select
                 value={source}
                 onChange={(e) => setSource(e.target.value as GetSearchSource)}
-                className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
+                className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
               >
                 <option value="LibGen">Library Genesis</option>
                 <option value="Annas Archive">Annas Archive</option>
@@ -64,35 +64,35 @@ export default function SearchPage() {
         {/* Search Results Table */}
         <div className="inline-block min-w-full overflow-hidden rounded shadow">
           <table
-            className="min-w-full leading-normal bg-white dark:bg-gray-700 text-sm md:text-sm"
+            className="min-w-full bg-white text-sm leading-normal md:text-sm dark:bg-gray-700"
           >
             <thead className="text-gray-800 dark:text-gray-400">
               <tr>
                 <th
-                  className="w-12 p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
+                  className="w-12 border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
                 ></th>
                 <th
-                  className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
+                  className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
                 >
                   Document
                 </th>
                 <th
-                  className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
+                  className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
                 >
                   Series
                 </th>
                 <th
-                  className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
+                  className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
                 >
                   Type
                 </th>
                 <th
-                  className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
+                  className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
                 >
                   Size
                 </th>
                 <th
-                  className="p-3 hidden md:block font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
+                  className="hidden border-b border-gray-200 p-3 text-left font-normal uppercase md:block dark:border-gray-800"
                 >
                   Date
                 </th>
@@ -101,18 +101,18 @@ export default function SearchPage() {
             <tbody className="text-black dark:text-white">
               {isLoading && (
                 <tr>
-                  <td className="text-center p-3" colSpan={6}>Loading...</td>
+                  <td className="p-3 text-center" colSpan={6}>Loading...</td>
                 </tr>
               )}
               {!isLoading && !results && (
                 <tr>
-                  <td className="text-center p-3" colSpan={6}>No Results</td>
+                  <td className="p-3 text-center" colSpan={6}>No Results</td>
                 </tr>
               )}
               {!isLoading && results && results.map((item: any) => (
                 <tr key={item.id}>
                   <td
-                    className="p-3 border-b border-gray-200 text-gray-500 dark:text-gray-500"
+                    className="border-b border-gray-200 p-3 text-gray-500 dark:text-gray-500"
                   >
                     <button
                       className="hover:text-purple-600"
@@ -121,19 +121,19 @@ export default function SearchPage() {
                       <Download size={15} />
                     </button>
                   </td>
-                  <td className="p-3 border-b border-gray-200">
+                  <td className="border-b border-gray-200 p-3">
                     {item.author || 'N/A'} - {item.title || 'N/A'}
                   </td>
-                  <td className="p-3 border-b border-gray-200">
+                  <td className="border-b border-gray-200 p-3">
                     <p>{item.series || 'N/A'}</p>
                   </td>
-                  <td className="p-3 border-b border-gray-200">
+                  <td className="border-b border-gray-200 p-3">
                     <p>{item.file_type || 'N/A'}</p>
                   </td>
-                  <td className="p-3 border-b border-gray-200">
+                  <td className="border-b border-gray-200 p-3">
                     <p>{item.file_size || 'N/A'}</p>
                   </td>
-                  <td className="hidden md:table-cell p-3 border-b border-gray-200">
+                  <td className="hidden border-b border-gray-200 p-3 md:table-cell">
                     <p>{item.upload_date || 'N/A'}</p>
                   </td>
                 </tr>
diff --git a/frontend/src/pages/SettingsPage.tsx b/frontend/src/pages/SettingsPage.tsx
index ffa5165..4ed5e63 100644
--- a/frontend/src/pages/SettingsPage.tsx
+++ b/frontend/src/pages/SettingsPage.tsx
@@ -60,37 +60,37 @@ export default function SettingsPage() {
 
   if (isLoading) {
     return (
-      <div className="w-full flex flex-col md:flex-row gap-4">
+      <div className="flex w-full flex-col gap-4 md:flex-row">
         <div>
-          <div className="flex flex-col p-4 items-center rounded shadow-lg md:w-60 lg:w-80 bg-white dark:bg-gray-700">
-            <div className="w-16 h-16 bg-gray-200 dark:bg-gray-600 rounded-full mb-4" />
-            <div className="w-32 h-6 bg-gray-200 dark:bg-gray-600 rounded" />
+          <div className="flex flex-col items-center rounded bg-white p-4 shadow-lg md:w-60 lg:w-80 dark:bg-gray-700">
+            <div className="mb-4 size-16 rounded-full bg-gray-200 dark:bg-gray-600" />
+            <div className="h-6 w-32 rounded bg-gray-200 dark:bg-gray-600" />
           </div>
         </div>
-        <div className="flex flex-col gap-4 grow">
-          <div className="flex flex-col gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700">
-            <div className="w-48 h-6 bg-gray-200 dark:bg-gray-600 rounded mb-4" />
+        <div className="flex grow flex-col gap-4">
+          <div className="flex flex-col gap-2 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
+            <div className="mb-4 h-6 w-48 rounded bg-gray-200 dark:bg-gray-600" />
             <div className="flex gap-4">
-              <div className="flex-1 h-12 bg-gray-200 dark:bg-gray-600 rounded" />
-              <div className="flex-1 h-12 bg-gray-200 dark:bg-gray-600 rounded" />
-              <div className="w-40 h-10 bg-gray-200 dark:bg-gray-600 rounded" />
+              <div className="h-12 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
+              <div className="h-12 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
+              <div className="h-10 w-40 rounded bg-gray-200 dark:bg-gray-600" />
             </div>
           </div>
-          <div className="flex flex-col gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700">
-            <div className="w-48 h-6 bg-gray-200 dark:bg-gray-600 rounded mb-4" />
+          <div className="flex flex-col gap-2 rounded bg-white p-4 shadow-lg dark:bg-gray-700">
+            <div className="mb-4 h-6 w-48 rounded bg-gray-200 dark:bg-gray-600" />
             <div className="flex gap-4">
-              <div className="flex-1 h-12 bg-gray-200 dark:bg-gray-600 rounded" />
-              <div className="w-40 h-10 bg-gray-200 dark:bg-gray-600 rounded" />
+              <div className="h-12 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
+              <div className="h-10 w-40 rounded bg-gray-200 dark:bg-gray-600" />
             </div>
           </div>
-          <div className="flex flex-col p-4 rounded shadow-lg bg-white dark:bg-gray-700">
-            <div className="w-24 h-6 bg-gray-200 dark:bg-gray-600 rounded mb-4" />
-            <div className="flex gap-4 mb-4">
-              <div className="flex-1 h-6 bg-gray-200 dark:bg-gray-600 rounded" />
-              <div className="flex-1 h-6 bg-gray-200 dark:bg-gray-600 rounded" />
-              <div className="flex-1 h-6 bg-gray-200 dark:bg-gray-600 rounded" />
+          <div className="flex flex-col rounded bg-white p-4 shadow-lg dark:bg-gray-700">
+            <div className="mb-4 h-6 w-24 rounded bg-gray-200 dark:bg-gray-600" />
+            <div className="mb-4 flex gap-4">
+              <div className="h-6 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
+              <div className="h-6 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
+              <div className="h-6 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
             </div>
-            <div className="flex-1 h-32 bg-gray-200 dark:bg-gray-600 rounded" />
+            <div className="h-32 flex-1 rounded bg-gray-200 dark:bg-gray-600" />
           </div>
         </div>
       </div>
@@ -98,31 +98,31 @@ export default function SettingsPage() {
   }
 
   return (
-    <div className="w-full flex flex-col md:flex-row gap-4">
+    <div className="flex w-full flex-col gap-4 md:flex-row">
       {/* User Profile Card */}
       <div>
         <div
-          className="flex flex-col p-4 items-center rounded shadow-lg md:w-60 lg:w-80 bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
+          className="flex flex-col items-center rounded bg-white p-4 text-gray-500 shadow-lg md:w-60 lg:w-80 dark:bg-gray-700 dark:text-white"
         >
           <User size={60} />
           <p className="text-lg">{settingsData?.data.user.username || "N/A"}</p>
         </div>
       </div>
 
-      <div className="flex flex-col gap-4 grow">
+      <div className="flex grow flex-col gap-4">
         {/* Change Password Form */}
         <div
-          className="flex flex-col gap-2 grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
+          className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
         >
-          <p className="text-lg font-semibold mb-2">Change Password</p>
+          <p className="mb-2 text-lg font-semibold">Change Password</p>
           <form
-            className="flex gap-4 flex-col lg:flex-row"
+            className="flex flex-col gap-4 lg:flex-row"
             onSubmit={handlePasswordSubmit}
           >
-            <div className="flex flex-col grow">
-              <div className="flex relative">
+            <div className="flex grow flex-col">
+              <div className="relative flex">
                 <span
-                  className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
+                  className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
                 >
                   <Lock size={15} />
                 </span>
@@ -130,15 +130,15 @@ export default function SettingsPage() {
                   type="password"
                   value={password}
                   onChange={(e) => setPassword(e.target.value)}
-                  className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
+                  className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                   placeholder="Password"
                 />
               </div>
             </div>
-            <div className="flex flex-col grow">
-              <div className="flex relative">
+            <div className="flex grow flex-col">
+              <div className="relative flex">
                 <span
-                  className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
+                  className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
                 >
                   <Lock size={15} />
                 </span>
@@ -146,7 +146,7 @@ export default function SettingsPage() {
                   type="password"
                   value={newPassword}
                   onChange={(e) => setNewPassword(e.target.value)}
-                  className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
+                  className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
                   placeholder="New Password"
                 />
               </div>
@@ -159,23 +159,23 @@ export default function SettingsPage() {
 
         {/* Change Timezone Form */}
         <div
-          className="flex flex-col grow gap-2 p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
+          className="flex grow flex-col gap-2 rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
         >
-          <p className="text-lg font-semibold mb-2">Change Timezone</p>
+          <p className="mb-2 text-lg font-semibold">Change Timezone</p>
           <form
-            className="flex gap-4 flex-col lg:flex-row"
+            className="flex flex-col gap-4 lg:flex-row"
             onSubmit={handleTimezoneSubmit}
           >
-            <div className="flex relative grow">
+            <div className="relative flex grow">
               <span
-                className="inline-flex items-center px-3 border-t bg-white border-l border-b border-gray-300 text-gray-500 shadow-sm text-sm"
+                className="inline-flex items-center border-y border-l border-gray-300 bg-white px-3 text-sm text-gray-500 shadow-sm"
               >
                 <Clock size={15} />
               </span>
               <select
                 value={timezone || 'UTC'}
                 onChange={(e) => setTimezone(e.target.value)}
-                className="flex-1 appearance-none rounded-none border border-gray-300 w-full py-2 px-4 bg-white text-gray-700 placeholder-gray-400 shadow-sm text-base focus:outline-none focus:ring-2 focus:ring-purple-600 focus:border-transparent"
+                className="w-full flex-1 appearance-none rounded-none border border-gray-300 bg-white px-4 py-2 text-base text-gray-700 shadow-sm placeholder:text-gray-400 focus:border-transparent focus:outline-none focus:ring-2 focus:ring-purple-600"
               >
                 <option value="UTC">UTC</option>
                 <option value="America/New_York">America/New_York</option>
@@ -197,24 +197,24 @@ export default function SettingsPage() {
 
         {/* Devices Table */}
         <div
-          className="flex flex-col grow p-4 rounded shadow-lg bg-white dark:bg-gray-700 text-gray-500 dark:text-white"
+          className="flex grow flex-col rounded bg-white p-4 text-gray-500 shadow-lg dark:bg-gray-700 dark:text-white"
         >
           <p className="text-lg font-semibold">Devices</p>
-          <table className="min-w-full bg-white dark:bg-gray-700 text-sm">
+          <table className="min-w-full bg-white text-sm dark:bg-gray-700">
             <thead className="text-gray-800 dark:text-gray-400">
               <tr>
                 <th
-                  className="p-3 pl-0 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
+                  className="border-b border-gray-200 p-3 pl-0 text-left font-normal uppercase dark:border-gray-800"
                 >
                   Name
                 </th>
                 <th
-                  className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
+                  className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
                 >
                   Last Sync
                 </th>
                 <th
-                  className="p-3 font-normal text-left uppercase border-b border-gray-200 dark:border-gray-800"
+                  className="border-b border-gray-200 p-3 text-left font-normal uppercase dark:border-gray-800"
                 >
                   Created
                 </th>
@@ -223,7 +223,7 @@ export default function SettingsPage() {
             <tbody className="text-black dark:text-white">
               {!settingsData?.data.devices || settingsData.data.devices.length === 0 ? (
                 <tr>
-                  <td className="text-center p-3" colSpan={3}>No Results</td>
+                  <td className="p-3 text-center" colSpan={3}>No Results</td>
                 </tr>
               ) : (
                 settingsData.data.devices.map((device: any) => (