diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index d7d8cb97..fe187a39 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -168,7 +168,6 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.29.0.tgz",
       "integrity": "sha512-CGOfOJqWjg2qW/Mb6zNsDm+u5vFQ8DxXfbM09z69p5Z6+mE1ikP2jUXw+j42Pf1XTYED2Rni5f95npYeuwMDQA==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.29.0",
         "@babel/generator": "^7.29.0",
@@ -2497,7 +2496,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/api/-/api-1.9.1.tgz",
       "integrity": "sha512-gLyJlPHPZYdAk1JENA9LeHejZe1Ti77/pTeFm/nMXmQH/HFZlcS/O2XJB+L8fkbrNSqhdtlvjBVjxwUYanNH5Q==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=8.0.0"
       }
@@ -2519,7 +2517,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/context-async-hooks/-/context-async-hooks-2.6.1.tgz",
       "integrity": "sha512-XHzhwRNkBpeP8Fs/qjGrAf9r9PRv67wkJQ/7ZPaBQQ68DYlTBBx5MF9LvPx7mhuXcDessKK2b+DcxqwpgkcivQ==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": "^18.19.0 || >=20.6.0"
       },
@@ -2532,7 +2529,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/core/-/core-2.6.1.tgz",
       "integrity": "sha512-8xHSGWpJP9wBxgBpnqGL0R3PbdWQndL1Qp50qrg71+B28zK5OQmUgcDKLJgzyAAV38t4tOyLMGDD60LneR5W8g==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@opentelemetry/semantic-conventions": "^1.29.0"
       },
@@ -3053,7 +3049,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/resources/-/resources-2.6.1.tgz",
       "integrity": "sha512-lID/vxSuKWXM55XhAKNoYXu9Cutoq5hFdkbTdI/zDKQktXzcWBVhNsOkiZFTMU9UtEWuGRNe0HUgmsFldIdxVA==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@opentelemetry/core": "2.6.1",
         "@opentelemetry/semantic-conventions": "^1.29.0"
@@ -3070,7 +3065,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/sdk-trace-base/-/sdk-trace-base-2.6.1.tgz",
       "integrity": "sha512-r86ut4T1e8vNwB35CqCcKd45yzqH6/6Wzvpk2/cZB8PsPLlZFTvrh8yfOS3CYZYcUmAx4hHTZJ8AO8Dj8nrdhw==",
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@opentelemetry/core": "2.6.1",
         "@opentelemetry/resources": "2.6.1",
@@ -3088,7 +3082,6 @@
       "resolved": "https://registry.npmjs.org/@opentelemetry/semantic-conventions/-/semantic-conventions-1.40.0.tgz",
       "integrity": "sha512-cifvXDhcqMwwTlTK04GBNeIe7yyo28Mfby85QXFe1Yk8nmi36Ab/5UQwptOx84SsoGNRg+EVSjwzfSZMy6pmlw==",
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=14"
       }
@@ -3443,7 +3436,6 @@
       "integrity": "sha512-akea+6bHYBBfA9uQqSYmlJXn61cTa+jbO87xVLCWbTqbWadRVmhxlXATaOjOgcBaWU4ePo0wB41KMFv3o35IXA==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "playwright": "1.58.2"
       },
@@ -4110,7 +4102,6 @@
       "resolved": "https://registry.npmjs.org/picomatch/-/picomatch-4.0.4.tgz",
       "integrity": "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A==",
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -5550,6 +5541,7 @@
       "resolved": "https://registry.npmjs.org/@types/eslint/-/eslint-9.6.1.tgz",
       "integrity": "sha512-FXx2pKgId/WyYo2jXw63kk7/+TY7u7AziEJxJAnSFzHlqTAS3Ync6SvgYAN/k4/PQpnnVuzoMuVnByKK2qp0ag==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/estree": "*",
         "@types/json-schema": "*"
@@ -5560,6 +5552,7 @@
       "resolved": "https://registry.npmjs.org/@types/eslint-scope/-/eslint-scope-3.7.7.tgz",
       "integrity": "sha512-MzMFlSLBqNF2gcHWO0G1vP/YQyfvrxZ0bF+u7mzUdZ1/xK4A4sru+nraZz5i3iEIk1l1uyicaDVTB4QbbEkAYg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/eslint": "*",
         "@types/estree": "*"
@@ -5600,7 +5593,8 @@
       "version": "7.0.15",
       "resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.15.tgz",
       "integrity": "sha512-5+fP8P8MFNC+AyZCDxrB2pkZFPGzqQWUzpSeuuVLvm8VMcorNYavBqoFcxK8bQz4Qsbn4oUEEem4wDLfcysGHA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@types/json5": {
       "version": "0.0.29",
@@ -5685,7 +5679,6 @@
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.28.tgz",
       "integrity": "sha512-z9VXpC7MWrhfWipitjNdgCauoMLRdIILQsAEV+ZesIzBq/oUlxk0m3ApZuMFCXdnS4U7KrI+l3WRUEGQ8K1QKw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/prop-types": "*",
         "csstype": "^3.2.2"
@@ -5697,7 +5690,6 @@
       "integrity": "sha512-MEe3UeoENYVFXzoXEWsvcpg6ZvlrFNlOQ7EOsvhI3CfAXwzPfO8Qwuxd40nepsYKqyyVQnTdEfv68q91yLcKrQ==",
       "devOptional": true,
       "license": "MIT",
-      "peer": true,
       "peerDependencies": {
         "@types/react": "^18.0.0"
       }
@@ -5799,7 +5791,6 @@
       "integrity": "sha512-XZzOmihLIr8AD1b9hL9ccNMzEMWt/dE2u7NyTY9jJG6YNiNthaD5XtUHVF2uCXZ15ng+z2hT3MVuxnUYhq6k1g==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "8.57.0",
         "@typescript-eslint/types": "8.57.0",
@@ -7092,6 +7083,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ast/-/ast-1.14.1.tgz",
       "integrity": "sha512-nuBEDgQfm1ccRp/8bCQrx1frohyufl4JlbMMZ4P1wpeOfDhF6FQkxZJ1b/e+PLwr6X1Nhw6OLme5usuBWYBvuQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/helper-numbers": "1.13.2",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2"
@@ -7101,25 +7093,29 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/floating-point-hex-parser/-/floating-point-hex-parser-1.13.2.tgz",
       "integrity": "sha512-6oXyTOzbKxGH4steLbLNOu71Oj+C8Lg34n6CqRvqfS2O71BxY6ByfMDRhBytzknj9yGUPVJ1qIKhRlAwO1AovA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@webassemblyjs/helper-api-error": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-api-error/-/helper-api-error-1.13.2.tgz",
       "integrity": "sha512-U56GMYxy4ZQCbDZd6JuvvNV/WFildOjsaWD3Tzzvmw/mas3cXzRJPMjP83JqEsgSbyrmaGjBfDtV7KDXV9UzFQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@webassemblyjs/helper-buffer": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-buffer/-/helper-buffer-1.14.1.tgz",
       "integrity": "sha512-jyH7wtcHiKssDtFPRB+iQdxlDf96m0E39yb0k5uJVhFGleZFoNw1c4aeIcVUPPbXUVJ94wwnMOAqUHyzoEPVMA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@webassemblyjs/helper-numbers": {
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-numbers/-/helper-numbers-1.13.2.tgz",
       "integrity": "sha512-FE8aCmS5Q6eQYcV3gI35O4J789wlQA+7JrqTTpJqn5emA4U2hvwJmvFRC0HODS+3Ye6WioDklgd6scJ3+PLnEA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/floating-point-hex-parser": "1.13.2",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -7130,13 +7126,15 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-bytecode/-/helper-wasm-bytecode-1.13.2.tgz",
       "integrity": "sha512-3QbLKy93F0EAIXLh0ogEVR6rOubA9AoZ+WRYhNbFyuB70j3dRdwH9g+qXhLAO0kiYGlg3TxDV+I4rQTr/YNXkA==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@webassemblyjs/helper-wasm-section": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/helper-wasm-section/-/helper-wasm-section-1.14.1.tgz",
       "integrity": "sha512-ds5mXEqTJ6oxRoqjhWDU83OgzAYjwsCV8Lo/N+oRsNDmx/ZDpqalmrtgOMkHwxsG0iI//3BwWAErYRHtgn0dZw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -7149,6 +7147,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/ieee754/-/ieee754-1.13.2.tgz",
       "integrity": "sha512-4LtOzh58S/5lX4ITKxnAK2USuNEvpdVV9AlgGQb8rJDHaLeHciwG4zlGr0j/SNWlr7x3vO1lDEsuePvtcDNCkw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@xtuc/ieee754": "^1.2.0"
       }
@@ -7158,6 +7157,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/leb128/-/leb128-1.13.2.tgz",
       "integrity": "sha512-Lde1oNoIdzVzdkNEAWZ1dZ5orIbff80YPdHx20mrHwHrVNNTjNr8E3xz9BdpcGqRQbAEa+fkrCb+fRFTl/6sQw==",
       "license": "Apache-2.0",
+      "peer": true,
       "dependencies": {
         "@xtuc/long": "4.2.2"
       }
@@ -7166,13 +7166,15 @@
       "version": "1.13.2",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/utf8/-/utf8-1.13.2.tgz",
       "integrity": "sha512-3NQWGjKTASY1xV5m7Hr0iPeXD9+RDobLll3T9d2AO+g3my8xy5peVyjSag4I50mR1bBSN/Ct12lo+R9tJk0NZQ==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/@webassemblyjs/wasm-edit": {
       "version": "1.14.1",
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-edit/-/wasm-edit-1.14.1.tgz",
       "integrity": "sha512-RNJUIQH/J8iA/1NzlE4N7KtyZNHi3w7at7hDjvRNm5rcUXa00z1vRz3glZoULfJ5mpvYhLybmVcwcjGrC1pRrQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -7189,6 +7191,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-gen/-/wasm-gen-1.14.1.tgz",
       "integrity": "sha512-AmomSIjP8ZbfGQhumkNvgC33AY7qtMCXnN6bL2u2Js4gVCg8fp735aEiMSBbDR7UQIj90n4wKAFUSEd0QN2Ukg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-wasm-bytecode": "1.13.2",
@@ -7202,6 +7205,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-opt/-/wasm-opt-1.14.1.tgz",
       "integrity": "sha512-PTcKLUNvBqnY2U6E5bdOQcSM+oVP/PmrDY9NzowJjislEjwP/C4an2303MCVS2Mg9d3AJpIGdUFIQQWbPds0Sw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-buffer": "1.14.1",
@@ -7214,6 +7218,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wasm-parser/-/wasm-parser-1.14.1.tgz",
       "integrity": "sha512-JLBl+KZ0R5qB7mCnud/yyX08jWFw5MsoalJ1pQ4EdFlgj9VdXKGuENGsiCIjegI1W7p91rUlcB/LB5yRJKNTcQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@webassemblyjs/helper-api-error": "1.13.2",
@@ -7228,6 +7233,7 @@
       "resolved": "https://registry.npmjs.org/@webassemblyjs/wast-printer/-/wast-printer-1.14.1.tgz",
       "integrity": "sha512-kPSSXE6De1XOR820C90RIo2ogvZG+c3KiHzqUoO/F34Y2shGzesfqv7o57xrxovZJH/MetF5UjroJ/R/3isoiw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@webassemblyjs/ast": "1.14.1",
         "@xtuc/long": "4.2.2"
@@ -7237,13 +7243,15 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@xtuc/ieee754/-/ieee754-1.2.0.tgz",
       "integrity": "sha512-DX8nKgqcGwsc0eJSqYt5lwP4DH5FlHnmuWWBRy7X0NcaGR0ZtuyeESgMwTYVEtxmsNGY+qit4QYT/MIYTOTPeA==",
-      "license": "BSD-3-Clause"
+      "license": "BSD-3-Clause",
+      "peer": true
     },
     "node_modules/@xtuc/long": {
       "version": "4.2.2",
       "resolved": "https://registry.npmjs.org/@xtuc/long/-/long-4.2.2.tgz",
       "integrity": "sha512-NuHqBY1PB/D8xU6s/thBgOAiAP7HOYDQ32+BFZILJ8ivkUkAHQnWfn6WhL79Owj1qmUnoN/YPhktdIoucipkAQ==",
-      "license": "Apache-2.0"
+      "license": "Apache-2.0",
+      "peer": true
     },
     "node_modules/abitype": {
       "version": "1.2.3",
@@ -7271,7 +7279,6 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.16.0.tgz",
       "integrity": "sha512-UVJyE9MttOsBQIDKw1skb9nAwQuR5wuGD3+82K6JgJlm/Y+KI92oNsMNGZCYdDsVtRHSak0pcV5Dno5+4jh9sw==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -7293,6 +7300,7 @@
       "resolved": "https://registry.npmjs.org/acorn-import-phases/-/acorn-import-phases-1.0.4.tgz",
       "integrity": "sha512-wKmbr/DDiIXzEOiWrTTUcDm24kQ2vGfZQvM2fwg2vXqR5uW6aapr7ObPtj1th32b9u90/Pf4AItvdTh42fBmVQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       },
@@ -7343,6 +7351,7 @@
       "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz",
       "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "ajv": "^8.0.0"
       },
@@ -7360,6 +7369,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
       "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -7375,7 +7385,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/ansi-colors": {
       "version": "4.1.3",
@@ -7999,7 +8010,6 @@
       "integrity": "sha512-NSTU5WN+fy/L0DDenfE8SXQna4voXuW0FHM7wH8i3/q9khUSchfPbPezO4zSFMnDGIf9YE+mt/RWhZgNRKRIXA==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "bare-path": "^3.0.0"
       }
@@ -8124,7 +8134,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "baseline-browser-mapping": "^2.9.0",
         "caniuse-lite": "^1.0.30001759",
@@ -8416,6 +8425,7 @@
       "resolved": "https://registry.npmjs.org/chrome-trace-event/-/chrome-trace-event-1.0.4.tgz",
       "integrity": "sha512-rNjApaLzuwaOTjCiT8lSDdGN1APCiqkChLMJxJPWLunPAt5fy8xgU9/jNOchV84wfIxrA0lRQB7oCT8jrn/wrQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6.0"
       }
@@ -8803,8 +8813,7 @@
       "version": "3.2.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.2.3.tgz",
       "integrity": "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ==",
-      "license": "MIT",
-      "peer": true
+      "license": "MIT"
     },
     "node_modules/d3-array": {
       "version": "3.2.4",
@@ -9182,8 +9191,7 @@
       "resolved": "https://registry.npmjs.org/devtools-protocol/-/devtools-protocol-0.0.1527314.tgz",
       "integrity": "sha512-UohCFOlzpPPD/IcsxM0k4lVZp/GfhPVJ6l2No5XX+LknpGisPWJe17oOHQhZTHf6ThUFIMwHO6bSEZUq/6oP7w==",
       "dev": true,
-      "license": "BSD-3-Clause",
-      "peer": true
+      "license": "BSD-3-Clause"
     },
     "node_modules/didyoumean": {
       "version": "1.2.2",
@@ -9349,6 +9357,7 @@
       "resolved": "https://registry.npmjs.org/enhanced-resolve/-/enhanced-resolve-5.20.1.tgz",
       "integrity": "sha512-Qohcme7V1inbAfvjItgw0EaxVX5q2rdVEZHRBrEQdRZTssLDGsL8Lwrznl8oQ/6kuTJONLaDcGjkNP247XEhcA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "graceful-fs": "^4.2.4",
         "tapable": "^2.3.0"
@@ -9502,7 +9511,8 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/es-module-lexer/-/es-module-lexer-2.0.0.tgz",
       "integrity": "sha512-5POEcUuZybH7IdmGsD8wlf0AI55wMecM9rVBTI/qEAy2c1kTOm3DjFYjrBdI2K3BaJjJYfYFeRtM0t9ssnRuxw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/es-object-atoms": {
       "version": "1.1.1",
@@ -9654,7 +9664,6 @@
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -9824,7 +9833,6 @@
       "integrity": "sha512-whOE1HFo/qJDyX4SnXzP4N6zOWn79WhnCUY/iDR0mPfQZO8wcYE4JClzI2oZrhBnnMUCBCHZhO6VQyoBU95mZA==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@rtsao/scc": "^1.1.0",
         "array-includes": "^3.1.9",
@@ -10897,7 +10905,8 @@
       "version": "0.4.1",
       "resolved": "https://registry.npmjs.org/glob-to-regexp/-/glob-to-regexp-0.4.1.tgz",
       "integrity": "sha512-lkX1HJXwyMcprw/5YUZc2s7DrpAiHB21/V+E1rHUrVNokkvB6bqMzT0VfV6/86ZNabt1k14YOIaT7nDvOX3Iiw==",
-      "license": "BSD-2-Clause"
+      "license": "BSD-2-Clause",
+      "peer": true
     },
     "node_modules/glob/node_modules/brace-expansion": {
       "version": "2.0.2",
@@ -11361,8 +11370,7 @@
       "version": "6.2.2",
       "resolved": "https://registry.npmjs.org/idb-keyval/-/idb-keyval-6.2.2.tgz",
       "integrity": "sha512-yjD9nARJ/jb1g+CvD0tlhUHOrJ9Sy0P8T9MF3YaLlHnSRpwPfpTX0XIvpmw3gAJUmEu3FiICLBDPXVwyEvrleg==",
-      "license": "Apache-2.0",
-      "peer": true
+      "license": "Apache-2.0"
     },
     "node_modules/ieee754": {
       "version": "1.2.1",
@@ -12171,6 +12179,7 @@
       "resolved": "https://registry.npmjs.org/jest-worker/-/jest-worker-27.5.1.tgz",
       "integrity": "sha512-7vuh85V5cdDofPyxn58nrPjBktZo0u9x1g8WtjQol+jZDaE+fhN+cIvTj11GndBnMnyfrUOG1sZQxCdjKh+DKg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "merge-stream": "^2.0.0",
@@ -12185,6 +12194,7 @@
       "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-8.1.1.tgz",
       "integrity": "sha512-MpUEN2OodtUzxvKQl72cUF7RQ5EiHsGvSsVG0ia9c5RbWGL2CI4C7EpPS8UTBIplnlzZiNuV56w+FuNxy3ty2Q==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "has-flag": "^4.0.0"
       },
@@ -12201,7 +12211,6 @@
       "integrity": "sha512-/imKNG4EbWNrVjoNC/1H5/9GFy+tqjGBHCaSsN+P2RnPqjsLmv6UD3Ej+Kj8nBWaRAwyk7kK5ZUc+OEatnTR3A==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "bin": {
         "jiti": "bin/jiti.js"
       }
@@ -12265,7 +12274,8 @@
       "version": "2.3.1",
       "resolved": "https://registry.npmjs.org/json-parse-even-better-errors/-/json-parse-even-better-errors-2.3.1.tgz",
       "integrity": "sha512-xyFwyhro/JEof6Ghe2iz2NcXoj2sloNsWr/XsERDK/oiPCfaNhl5ONfp+jQdAZRQQ0IJWNzH9zIZF7li91kh2w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/json-schema-traverse": {
       "version": "0.4.1",
@@ -12499,7 +12509,6 @@
       "integrity": "sha512-s5vvxXPVdjqS3kTLKMeBMvop9hbWkwzBpu+mUO2M7sZtlkyDJGwFe33wRKnbaYDo8ExRVBIIdwIGrqpxHuKttA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "engines": {
         "node": ">=14"
       },
@@ -12513,7 +12522,6 @@
       "integrity": "sha512-OOCM2C/QIURhJMuKaekP3TRBxBKxG/TWWA0TL2J6nXUtDnuCtccy49LUJF8xPFXMX+0LMcxFpCo8M9cGY1W6rQ==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@opentelemetry/semantic-conventions": "1.28.0"
       },
@@ -12540,7 +12548,6 @@
       "integrity": "sha512-BdBGhQBh8IjZ2oIIX6F2/Q3LKm/FDDKi6ccYKcBTeilh6SNdNKveDOLk73BkSJjQLJk6qe4Yh+hHw1UPhCDdrg==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@opentelemetry/api-logs": "0.57.2",
         "@types/shimmer": "^1.2.0",
@@ -12953,7 +12960,6 @@
       "integrity": "sha512-5UxZqiAgLYGFjS4s9qm5mBVo433u+dSPUFWVWXmLAD4wB65oMCoXaJP1KJa9DIYYMeHu3z4BZcStG3LC593cWA==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@opentelemetry/core": "1.30.1",
         "@opentelemetry/semantic-conventions": "1.28.0"
@@ -12981,7 +12987,6 @@
       "integrity": "sha512-jVPgBbH1gCy2Lb7X0AVQ8XAfgg0pJ4nvl8/IiQA6nxOsPvS+0zMJaFSs2ltXe0J6C8dqjcnpyqINDJmU30+uOg==",
       "dev": true,
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@opentelemetry/core": "1.30.1",
         "@opentelemetry/resources": "1.30.1",
@@ -13274,6 +13279,7 @@
       "resolved": "https://registry.npmjs.org/loader-runner/-/loader-runner-4.3.1.tgz",
       "integrity": "sha512-IWqP2SCPhyVFTBtRcgMHdzlf9ul25NwaFx4wCEH/KjAXuuHY4yNjvPXsBokp8jCB936PyWRaPKUNh8NvylLp2Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6.11.5"
       },
@@ -13727,7 +13733,8 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/merge-stream/-/merge-stream-2.0.0.tgz",
       "integrity": "sha512-abv/qOcuPfk3URPfDzmZU1LKmuw8kT+0nIHvKrKgFrwifol/doWcdA4ZqsWQ8ENrFKkd67Mfpo/LovbIUsbt3w==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/merge2": {
       "version": "1.4.1",
@@ -14652,7 +14659,8 @@
       "version": "2.6.2",
       "resolved": "https://registry.npmjs.org/neo-async/-/neo-async-2.6.2.tgz",
       "integrity": "sha512-Yd3UES5mWCSqR+qNT93S3UoYUkqAZ9lLg8a7g9rimsWmYGK8cVToA4/sF3RrshdyV3sAGMXVUmpMYOw+dLpOuw==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/netmask": {
       "version": "2.0.2",
@@ -14669,7 +14677,6 @@
       "resolved": "https://registry.npmjs.org/next/-/next-14.2.35.tgz",
       "integrity": "sha512-KhYd2Hjt/O1/1aZVX3dCwGXM1QmOV4eNM2UTacK5gipDdPN/oHHK/4oVGy7X8GMfPMsUTUEmGlsy0EY1YGAkig==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@next/env": "14.2.35",
         "@swc/helpers": "0.5.5",
@@ -15595,7 +15602,6 @@
       "version": "2.3.2",
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
       "integrity": "sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA==",
-      "dev": true,
       "hasInstallScript": true,
       "license": "MIT",
       "optional": true,
@@ -15641,7 +15647,6 @@
         }
       ],
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -16106,7 +16111,6 @@
       "resolved": "https://registry.npmjs.org/react/-/react-18.3.1.tgz",
       "integrity": "sha512-wS+hAgJShR0KhEvPJArfuPVN1+Hz1t0Y6n5jLrGQbkb4urgPE/0Rve+1kMB1v/oWgHgm4WIcV+i7F2pTVj+2iQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0"
       },
@@ -16134,7 +16138,6 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz",
       "integrity": "sha512-5m4nQKp+rZRb09LNH59GM4BxTh9251/ylbKIbpe7TpGxfJ+9kv6BLkLBXIjjspbgbnIBNqlI23tRnTWT0snUIw==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "loose-envify": "^1.1.0",
         "scheduler": "^0.23.2"
@@ -16853,7 +16856,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-4.60.0.tgz",
       "integrity": "sha512-yqjxruMGBQJ2gG4HtjZtAfXArHomazDHoFwFFmZZl0r7Pdo7qCIXKqKHZc8yeoMgzJJ+pO6pEEHa+V7uzWlrAQ==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "@types/estree": "1.0.8"
       },
@@ -17011,6 +17013,7 @@
       "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-4.3.3.tgz",
       "integrity": "sha512-eflK8wEtyOE6+hsaRVPxvUKYCpRgzLqDTb8krvAsRIwOGlHoSgYLgBXoubGgLd2fT41/OUYdb48v4k4WWHQurA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/json-schema": "^7.0.9",
         "ajv": "^8.9.0",
@@ -17047,6 +17050,7 @@
       "resolved": "https://registry.npmjs.org/ajv-keywords/-/ajv-keywords-5.1.0.tgz",
       "integrity": "sha512-YCS/JNFAUyr5vAuhk1DWm1CBxRHW9LbJ2ozWeemrIqpbsqKjHVxYPyi5GC0rjZIT5JxJ3virVTS8wk4i/Z+krw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3"
       },
@@ -17058,7 +17062,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/json-schema-traverse/-/json-schema-traverse-1.0.0.tgz",
       "integrity": "sha512-NM8/P9n3XjXhIZn1lLhkFaACTOURQXjWhV4BA/RnOv8xvgqtqpAX9IO4mRQxSx1Rlo4tqzeqb0sOlruaOy3dug==",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
     },
     "node_modules/selenium-webdriver": {
       "version": "4.39.0",
@@ -17076,7 +17081,6 @@
         }
       ],
       "license": "Apache-2.0",
-      "peer": true,
       "dependencies": {
         "@bazel/runfiles": "^6.5.0",
         "jszip": "^3.10.1",
@@ -18004,6 +18008,7 @@
       "resolved": "https://registry.npmjs.org/tapable/-/tapable-2.3.2.tgz",
       "integrity": "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=6"
       },
@@ -18163,6 +18168,7 @@
       "resolved": "https://registry.npmjs.org/terser-webpack-plugin/-/terser-webpack-plugin-5.4.0.tgz",
       "integrity": "sha512-Bn5vxm48flOIfkdl5CaD2+1CiUVbonWQ3KQPyP7/EuIl9Gbzq/gQFOzaMFUEgVjB1396tcK0SG8XcNJ/2kDH8g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jridgewell/trace-mapping": "^0.3.25",
         "jest-worker": "^27.4.5",
@@ -18315,7 +18321,6 @@
       "integrity": "sha512-5gTmgEY/sqK6gFXLIsQNH19lWb4ebPDLA4SdLP7dsWkIXHWlG66oPuVvXSGFPppYZz8ZDZq0dYYrbHfBCVUb1Q==",
       "dev": true,
       "license": "MIT",
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -18572,7 +18577,6 @@
       "integrity": "sha512-jl1vZzPDinLr9eUt3J/t7V6FgNEw9QjvBPdysz9KfQDD41fQrC2Y4vKQdiaUpFT4bXlb1RHhLpp8wtm6M5TgSw==",
       "devOptional": true,
       "license": "Apache-2.0",
-      "peer": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -19127,6 +19131,7 @@
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.5.1.tgz",
       "integrity": "sha512-Zn5uXdcFNIA1+1Ei5McRd+iRzfhENPCe7LeABkJtNulSxjma+l7ltNx55BWZkRlwRnpOgHqxnjyaDgJnNXnqzg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "glob-to-regexp": "^0.4.1",
         "graceful-fs": "^4.1.2"
@@ -19221,6 +19226,7 @@
       "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.3.4.tgz",
       "integrity": "sha512-7tP1PdV4vF+lYPnkMR0jMY5/la2ub5Fc/8VQrrU+lXkiM6C4TjVfGw7iKfyhnTQOsD+6Q/iKw0eFciziRgD58Q==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=10.13.0"
       }
@@ -19230,6 +19236,7 @@
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-5.1.1.tgz",
       "integrity": "sha512-2NxwbF/hZ0KpepYN0cNbo+FN6XoK7GaHlQhgx/hIZl6Va0bF45RQOOwhLIy8lQDbuCiadSLCBnH2CFYquit5bw==",
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "esrecurse": "^4.3.0",
         "estraverse": "^4.1.1"
@@ -19243,6 +19250,7 @@
       "resolved": "https://registry.npmjs.org/estraverse/-/estraverse-4.3.0.tgz",
       "integrity": "sha512-39nnKffWz8xN1BU/2c79n9nB9HDzo0niYUqx6xyqUnyoAnQyyWpOTdZEeiCch8BBu515t4wp9ZmgVfVhn9EBpw==",
       "license": "BSD-2-Clause",
+      "peer": true,
       "engines": {
         "node": ">=4.0"
       }
@@ -19521,7 +19529,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
       "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -19580,7 +19587,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.80.0.tgz",
       "integrity": "sha512-cIFJOD1DESzpjOBl763Kp1AH7UE/0fcdHe6rZXUdQ9c50uvgigvW97u3IcSeBwOkgqL/PXPBktBCh0KEu5L8XQ==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -19843,7 +19849,6 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.18.0.tgz",
       "integrity": "sha512-PlXPeEWMXMZ7sPYOHqmDyCJzcfNrUr3fGNKtezX14ykXOEIvyK81d+qydx89KY5O71FKMPaQ2vBfBFI5NHR63A==",
       "license": "MIT",
-      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -19902,7 +19907,6 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.80.0.tgz",
       "integrity": "sha512-cIFJOD1DESzpjOBl763Kp1AH7UE/0fcdHe6rZXUdQ9c50uvgigvW97u3IcSeBwOkgqL/PXPBktBCh0KEu5L8XQ==",
       "license": "MIT",
-      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -20298,7 +20302,6 @@
       "resolved": "https://registry.npmjs.org/zod/-/zod-4.3.6.tgz",
       "integrity": "sha512-rftlrkhHZOcjDwkGlnUtZZkvaPHCsDATp4pGpuOOMDaTdDDXF91wuVDJoWoPsKX/3YPQ5fHuF3STjcYyKr+Qhg==",
       "license": "MIT",
-      "peer": true,
       "funding": {
         "url": "https://github.com/sponsors/colinhacks"
       }
diff --git a/frontend/src/app/(public)/forgot-password/page.tsx b/frontend/src/app/(public)/forgot-password/page.tsx
index 05265dab..9aa9ab73 100644
--- a/frontend/src/app/(public)/forgot-password/page.tsx
+++ b/frontend/src/app/(public)/forgot-password/page.tsx
@@ -17,7 +17,7 @@ export default function ForgotPasswordPage() {
     <GuestGuard>
       <main className="mx-auto flex min-h-screen w-full max-w-lg flex-col justify-center gap-10 px-6 py-24 bg-white text-[#0A0A0A]">
         <header className="text-center">
-          <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-[#6B6B6B]">
+          <p className="text-xs font-bold uppercase tracking-[0.4em] text-[#6B6B6B]">
             Account Recovery
           </p>
           <h1 className="mt-4 text-5xl font-serif font-black uppercase tracking-tight">
@@ -31,7 +31,7 @@ export default function ForgotPasswordPage() {
         <section className="rounded-[2rem] border border-[#E8E8E8] bg-white p-8 shadow-[0_20px_60px_rgb(0,0,0,0.05)]">
           {!submitted ? (
             <form onSubmit={handleSubmit} className="flex flex-col gap-5">
-              <label htmlFor="email" className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">
+              <label htmlFor="email" className="text-xs font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">
                 Email Address
               </label>
               <input
@@ -46,13 +46,13 @@ export default function ForgotPasswordPage() {
               />
               <button
                 type="submit"
-                className="mt-2 flex h-14 w-full items-center justify-center rounded-2xl bg-[var(--pluto-500)] text-[10px] font-bold uppercase tracking-[0.3em] text-white transition-all hover:bg-[var(--pluto-600)]"
+                className="mt-2 flex h-14 w-full items-center justify-center rounded-2xl bg-[var(--pluto-500)] text-xs font-bold uppercase tracking-[0.3em] text-white transition-all hover:bg-[var(--pluto-600)]"
               >
                 Continue
               </button>
             </form>
           ) : (
-            <div className="space-y-4">
+            <div className="space-y-4" role="status">
               <p className="rounded-2xl border border-[#DDE7DD] bg-[#F6FBF6] px-4 py-3 text-sm font-medium text-[#235B23]">
                 Request received. If an account exists for {email}, recovery instructions will be sent.
               </p>
@@ -63,7 +63,7 @@ export default function ForgotPasswordPage() {
           )}
         </section>
 
-        <footer className="text-center text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B]">
+        <footer className="text-center text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
           Remembered your password?{" "}
           <Link href="/login" className="text-[#0A0A0A] underline underline-offset-4 hover:text-black">
             Back to login
diff --git a/frontend/src/app/(public)/login/page.tsx b/frontend/src/app/(public)/login/page.tsx
index 717982a2..65f6a266 100644
--- a/frontend/src/app/(public)/login/page.tsx
+++ b/frontend/src/app/(public)/login/page.tsx
@@ -17,26 +17,26 @@ export default function LoginPage() {
       {/* Main Content */}
       <div className="flex-1 w-full max-w-7xl mx-auto grid grid-cols-1 md:grid-cols-2 relative z-10">
         {/* Left Column (Hero) */}
-        <div className="flex flex-col justify-center items-start px-6 md:px-12 lg:px-20 py-10 md:py-0">
+        <section className="flex flex-col justify-center items-start px-6 md:px-12 lg:px-20 py-10 md:py-0" aria-labelledby="hero-heading">
           <HeroSection />
-        </div>
+        </section>
         
         {/* Right Column (Form) */}
-        <div className="flex flex-col justify-center items-center px-6 md:px-12 lg:px-20 py-10 md:py-0">
+        <section className="flex flex-col justify-center items-center px-6 md:px-12 lg:px-20 py-10 md:py-0" aria-labelledby="login-heading">
           <LoginForm />
-        </div>
+        </section>
       </div>
 
       {/* Footer */}
-      <footer className="w-full max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 px-6 md:px-10 py-8 mt-auto z-50 text-[10px] font-bold tracking-widest text-[#6B6B6B] uppercase border-t border-[#E8E8E8]">
+      <footer className="w-full max-w-7xl mx-auto flex flex-col md:flex-row items-center justify-between gap-4 px-6 md:px-10 py-8 mt-auto z-50 text-xs font-bold tracking-widest text-[#6B6B6B] uppercase border-t border-[#E8E8E8]">
           <div className="text-[#0A0A0A] mb-4 md:mb-0 uppercase tracking-[0.4em] font-serif font-black">
             PLUTO
           </div>
-         <div className="flex gap-8 mb-4 md:mb-0">
+         <nav className="flex gap-8 mb-4 md:mb-0" aria-label="Footer navigation">
             <Link href="#" className="hover:text-[#0A0A0A] transition-colors">Privacy Policy</Link>
             <Link href="#" className="hover:text-[#0A0A0A] transition-colors">Terms of Service</Link>
             <Link href="#" className="hover:text-[#0A0A0A] transition-colors">Help Center</Link>
-         </div>
+         </nav>
           <div className="text-[#6B6B6B] uppercase tracking-widest">
             © {new Date().getFullYear()} PLUTO. THE HUB FOR MODERN COMMERCE.
           </div>
diff --git a/frontend/src/app/(public)/page.tsx b/frontend/src/app/(public)/page.tsx
index da019d16..b49c59d5 100644
--- a/frontend/src/app/(public)/page.tsx
+++ b/frontend/src/app/(public)/page.tsx
@@ -80,7 +80,7 @@ function HeroSection() {
       <div className="pointer-events-none absolute inset-0 z-0 bg-gradient-to-b from-transparent via-transparent to-white" />
 
       <div className="relative z-10 flex flex-col items-center gap-6">
-        <span className="inline-flex items-center gap-2 rounded-full border border-[#E8E8E8] bg-white/80 px-5 py-2 font-bold text-[10px] uppercase tracking-[0.2em] text-[#6B6B6B] shadow-sm">
+        <span className="inline-flex items-center gap-2 rounded-full border border-[#E8E8E8] bg-white/80 px-5 py-2 font-bold text-xs uppercase tracking-[0.2em] text-[#6B6B6B] shadow-sm">
           <span className="h-1.5 w-1.5 rounded-full bg-[#0A0A0A]" />
           Surgical Precision Payments
         </span>
@@ -114,7 +114,7 @@ function HeroSection() {
           </Link>
         </div>
 
-        <div className="mt-20 flex flex-wrap items-center justify-center gap-x-10 gap-y-3 text-[10px] font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">
+        <div className="mt-20 flex flex-wrap items-center justify-center gap-x-10 gap-y-3 text-xs font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">
           {["Non-custodial", "5-minute integration", "Sandbox included"].map((t) => (
             <span key={t} className="flex items-center gap-2">
               <span className="h-1 w-1 rounded-full bg-[#0A0A0A]" />
@@ -131,7 +131,7 @@ function FeaturesSection() {
   return (
     <div className="mx-auto max-w-7xl px-6 py-32 lg:py-48">
       <div className="mb-20 text-center">
-        <p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Engineered for Performance</p>
+        <p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">Engineered for Performance</p>
         <h2 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-7xl">
           Everything you need to scale
         </h2>
@@ -145,7 +145,7 @@ function FeaturesSection() {
           >
             <div className="flex items-center justify-between">
               <span className="text-3xl text-[#0A0A0A] transition-transform duration-300 group-hover:scale-110">{f.icon}</span>
-              <span className="rounded-full border border-[#E8E8E8] px-4 py-1.5 font-bold text-[10px] uppercase tracking-widest text-[#6B6B6B]">
+              <span className="rounded-full border border-[#E8E8E8] px-4 py-1.5 font-bold text-xs uppercase tracking-widest text-[#6B6B6B]">
                 {f.tag}
               </span>
             </div>
@@ -172,7 +172,7 @@ function HowItWorksSection() {
     <div className="border-y border-[#E8E8E8] bg-[#F9F9F9]">
       <div className="mx-auto max-w-7xl px-6 py-32 lg:py-48">
         <div className="mb-20 text-center">
-          <p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Simple Workflow</p>
+          <p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">Simple Workflow</p>
           <h2 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-7xl">Four steps to scale</h2>
         </div>
 
@@ -185,7 +185,7 @@ function HowItWorksSection() {
                   <div className="absolute left-full top-1/2 hidden h-px w-[calc(100%+3rem)] -translate-y-1/2 bg-[#E8E8E8] lg:block" />
                 )}
               </div>
-              <h3 className="mb-3 text-[10px] font-bold text-[#0A0A0A] uppercase tracking-[0.4em]">{step.title}</h3>
+              <h3 className="mb-3 text-xs font-bold text-[#0A0A0A] uppercase tracking-[0.4em]">{step.title}</h3>
               <p className="text-sm font-medium leading-relaxed text-[#6B6B6B]">{step.description}</p>
             </div>
           ))}
@@ -199,26 +199,26 @@ function IntegrationModesSection() {
   return (
     <div className="mx-auto max-w-7xl px-6 py-24 lg:py-32">
       <div className="mb-12 text-center">
-        <p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Agentic Payments</p>
+        <p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">Agentic Payments</p>
         <h2 className="mx-auto max-w-4xl text-4xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-6xl">
           Build with x402 mode
         </h2>
       </div>
 
       <div className="mx-auto max-w-3xl rounded-[2rem] border border-[var(--pluto-200)] bg-[var(--pluto-50)] p-8 shadow-sm">
-        <p className="text-[10px] font-bold uppercase tracking-[0.3em] text-[var(--pluto-600)]">x402</p>
+        <p className="text-xs font-bold uppercase tracking-[0.3em] text-[var(--pluto-600)]">x402</p>
         <h3 className="mt-3 text-3xl font-bold tracking-tight text-[var(--pluto-800)]">Pay-per-request API access</h3>
         <p className="mt-4 text-sm text-[var(--pluto-700)]">
           Start integrating with x402-protected create-payment calls and let your backend handle 402 challenge, on-chain payment, verification, and retry.
         </p>
-        <ul className="mt-6 flex flex-col gap-2 text-[10px] font-bold uppercase tracking-widest text-[var(--pluto-700)]">
+        <ul className="mt-6 flex flex-col gap-2 text-xs font-bold uppercase tracking-widest text-[var(--pluto-700)]">
           <li>Request with x402 pricing mode</li>
           <li>Pay challenge on Stellar</li>
           <li>Retry with payment token</li>
         </ul>
         <Link
           href="/docs/x402-agentic-payments"
-          className="mt-8 inline-flex items-center gap-2 rounded-xl bg-[var(--pluto-500)] px-5 py-3 text-[10px] font-bold uppercase tracking-widest text-white transition-colors hover:bg-[var(--pluto-600)]"
+          className="mt-8 inline-flex items-center gap-2 rounded-xl bg-[var(--pluto-500)] px-5 py-3 text-xs font-bold uppercase tracking-widest text-white transition-colors hover:bg-[var(--pluto-600)]"
         >
           View x402 Guide →
         </Link>
@@ -280,7 +280,7 @@ function PricingSection() {
       />
       <div className="relative z-10 mx-auto max-w-7xl px-6 py-24 lg:py-32">
         <div className="mb-20 text-center">
-          <p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[var(--pluto-600)]">Pricing</p>
+          <p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[var(--pluto-600)]">Pricing</p>
           <h2 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.1] tracking-tight text-[#0A0A0A] sm:text-7xl">
             Predictable pricing.<br />Infinite scale.
           </h2>
@@ -326,7 +326,7 @@ function PricingSection() {
 
                 <Link
                   href={plan.cta.href}
-                  className={`mt-auto inline-flex items-center justify-center rounded-2xl px-6 py-4 text-[10px] font-bold uppercase tracking-[0.2em] transition-all hover:scale-[1.02] active:scale-[0.98] ${
+                  className={`mt-auto inline-flex items-center justify-center rounded-2xl px-6 py-4 text-xs font-bold uppercase tracking-[0.2em] transition-all hover:scale-[1.02] active:scale-[0.98] ${
                     plan.cta.primary 
                       ? "bg-[var(--pluto-500)] text-white shadow-xl shadow-[var(--pluto-500)]/20 hover:bg-[var(--pluto-600)]" 
                       : "border border-[#E8E8E8] bg-white text-[#0A0A0A] hover:bg-[#F9F9F9]"
@@ -350,7 +350,7 @@ function CodeSnippetSection() {
     <div className="mx-auto max-w-7xl px-6 py-32 lg:py-48">
       <div className="grid items-center gap-12 lg:grid-cols-2 lg:gap-20">
         <div>
-          <p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">Developer First</p>
+          <p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">Developer First</p>
           <h2 className="mb-8 text-5xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-7xl">
             One endpoint.<br />Total control.
           </h2>
@@ -359,7 +359,7 @@ function CodeSnippetSection() {
           </p>
           <ul className="flex flex-col gap-4">
             {["Atomic transactions", "HMAC-SHA256 signed webhooks", "Customizable metadata", "Scalable architecture"].map((item) => (
-              <li key={item} className="flex items-center gap-3 text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B]">
+              <li key={item} className="flex items-center gap-3 text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
                 <span className="h-1.5 w-1.5 rounded-full bg-[#0A0A0A] shrink-0" />
                 {item}
               </li>
@@ -373,7 +373,7 @@ function CodeSnippetSection() {
               <button
                 key={t}
                 onClick={() => setTab(t)}
-                className={`relative px-8 py-4 font-bold text-[10px] uppercase tracking-widest transition-colors ${tab === t ? "bg-white text-[#0A0A0A]" : "text-[#6B6B6B] hover:text-[#0A0A0A]"}`}
+                className={`relative px-8 py-4 font-bold text-xs uppercase tracking-widest transition-colors ${tab === t ? "bg-white text-[#0A0A0A]" : "text-[#6B6B6B] hover:text-[#0A0A0A]"}`}
               >
                 {t}
                 {tab === t && <span className="absolute bottom-0 left-0 right-0 h-0.5 bg-[#0A0A0A]" />}
@@ -401,7 +401,7 @@ function PayWithLinkDemo() {
   return (
     <div className="mx-auto max-w-6xl px-6 py-32 lg:py-48">
       <div className="mb-20 text-center">
-        <p className="mb-4 font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">User Experience</p>
+        <p className="mb-4 font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">User Experience</p>
         <h2 className="mx-auto max-w-3xl text-5xl font-bold leading-[1.1] text-[#0A0A0A] sm:text-7xl">Precision Checkout</h2>
         <p className="mx-auto mt-6 max-w-lg text-base font-medium text-[#6B6B6B]">
           A sleek, branded checkout experience generated instantly through the PLUTO API.
@@ -416,12 +416,12 @@ function PayWithLinkDemo() {
             <div className="flex h-11 w-11 items-center justify-center rounded-2xl bg-[#F9F9F9] border border-[#E8E8E8] text-lg">⬡</div>
             <div>
               <p className="text-sm font-bold text-[#0A0A0A]">Acme Store</p>
-              <p className="text-[10px] font-bold text-[#6B6B6B] uppercase tracking-widest">Order #8842</p>
+              <p className="text-xs font-bold text-[#6B6B6B] uppercase tracking-widest">Order #8842</p>
             </div>
           </div>
 
           <div className="mb-8 text-center">
-            <p className="text-[10px] font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">Amount Due</p>
+            <p className="text-xs font-bold uppercase tracking-[0.2em] text-[#6B6B6B]">Amount Due</p>
             <p className="mt-1 text-5xl font-bold tracking-tight text-[#0A0A0A]">
               25.00 <span className="text-lg font-medium text-[#6B6B6B]">USDC</span>
             </p>
@@ -429,7 +429,7 @@ function PayWithLinkDemo() {
 
           <div className="mb-8 space-y-3 rounded-2xl border border-[#E8E8E8] bg-[#F9F9F9] p-5">
             {[["Network", "Stellar Mainnet"], ["Expires In", "29:42"]].map(([k, v]) => (
-              <div key={k} className="flex items-center justify-between text-[10px] font-bold uppercase tracking-widest">
+              <div key={k} className="flex items-center justify-between text-xs font-bold uppercase tracking-widest">
                 <span className="text-[#6B6B6B]">{k}</span>
                 <span className="text-[#0A0A0A]">{v}</span>
               </div>
@@ -439,7 +439,7 @@ function PayWithLinkDemo() {
           {!paid ? (
             <button
               onClick={() => setPaid(true)}
-              className="w-full rounded-2xl bg-[var(--pluto-500)] py-5 text-[10px] font-bold uppercase tracking-[0.3em] text-white shadow-xl shadow-[var(--pluto-500)]/10 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.97]"
+              className="w-full rounded-2xl bg-[var(--pluto-500)] py-5 text-xs font-bold uppercase tracking-[0.3em] text-white shadow-xl shadow-[var(--pluto-500)]/10 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.97]"
             >
               Complete Payment
             </button>
@@ -476,11 +476,11 @@ function CTASection() {
         <div className="mt-14 flex flex-col items-center gap-6 sm:flex-row">
           <Link
             href="/register"
-            className="inline-flex items-center gap-2 rounded-xl bg-[var(--pluto-500)] px-12 py-6 text-[10px] font-bold uppercase tracking-widest text-white shadow-2xl shadow-[var(--pluto-500)]/10 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.97]"
+            className="inline-flex items-center gap-2 rounded-xl bg-[var(--pluto-500)] px-12 py-6 text-xs font-bold uppercase tracking-widest text-white shadow-2xl shadow-[var(--pluto-500)]/10 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.97]"
           >
             Create Free Account →
           </Link>
-          <Link href="/login" className="font-bold text-[10px] uppercase tracking-widest text-[#6B6B6B] transition-colors hover:text-[#0A0A0A]">
+          <Link href="/login" className="font-bold text-xs uppercase tracking-widest text-[#6B6B6B] transition-colors hover:text-[#0A0A0A]">
             Sign in →
           </Link>
         </div>
@@ -497,7 +497,7 @@ function Footer() {
           <span className="font-serif text-xl font-bold tracking-tight text-[#0A0A0A]">PLUTO</span>
           <SystemStatus />
         </div>
-        <div className="flex gap-10 font-bold text-[10px] uppercase tracking-widest text-[#6B6B6B]">
+        <div className="flex gap-10 font-bold text-xs uppercase tracking-widest text-[#6B6B6B]">
           {[["Login", "/login"], ["Register", "/register"], ["Dashboard", "/dashboard"], ["Docs", "/docs"]].map(([label, href]) => (
             <Link key={label} href={href} className="transition-colors hover:text-[#0A0A0A]">{label}</Link>
           ))}
diff --git a/frontend/src/app/(public)/register/page.tsx b/frontend/src/app/(public)/register/page.tsx
index 503e46a4..c1e0b6d6 100644
--- a/frontend/src/app/(public)/register/page.tsx
+++ b/frontend/src/app/(public)/register/page.tsx
@@ -7,7 +7,7 @@ export default function RegisterPage() {
     <GuestGuard>
     <main className="mx-auto flex min-h-screen max-w-lg flex-col justify-center gap-10 px-6 py-14 md:py-20 bg-white">
       <header className="flex flex-col gap-6 text-center">
-        <p className="font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B] animate-pulse">Onboarding</p>
+        <p className="font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B] motion-safe:animate-pulse">Onboarding</p>
         <h1 className="text-4xl md:text-5xl font-bold text-[#0A0A0A] tracking-tight font-serif uppercase">Join PLUTO</h1>
         <p className="text-sm font-medium text-[#6B6B6B] leading-relaxed">
           Create your merchant profile to start accepting modern payments and managing assets on the PLUTO infrastructure.
@@ -19,7 +19,7 @@ export default function RegisterPage() {
       </div>
 
       <footer className="text-center">
-        <p className="text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B]">
+        <p className="text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
           Already have an account?{" "}
           <Link href="/login" className="text-[#0A0A0A] underline underline-offset-8 font-bold hover:text-black">
             Log in here
diff --git a/frontend/src/components/ApiHealthBadge.tsx b/frontend/src/components/ApiHealthBadge.tsx
index ed8b3c7f..6d2e7373 100644
--- a/frontend/src/components/ApiHealthBadge.tsx
+++ b/frontend/src/components/ApiHealthBadge.tsx
@@ -77,25 +77,34 @@ export default function ApiHealthBadge() {
   }[status];
 
   return (
-    <div className="group relative flex items-center gap-2 rounded-full border border-[#E8E8E8] bg-white px-3 py-1.5 transition-all hover:border-[#0A0A0A] hover:bg-[#F9F9F9] cursor-default">
+    <div 
+      className="group relative flex items-center gap-2 rounded-full border border-[var(--border-subtle)] bg-white px-3.5 py-2 transition-all duration-300 hover:border-[var(--pluto-300)] hover:bg-[var(--pluto-50)]/50 cursor-default"
+      aria-describedby="api-status-tooltip"
+    >
       <div className="relative flex h-2 w-2 items-center justify-center">
         {status !== "loading" && (
           <span
-            className={`absolute inline-flex h-full w-full animate-ping rounded-full opacity-75 ${config.pulse}`}
+            className={`absolute inline-flex h-full w-full motion-safe:animate-ping rounded-full opacity-75 ${config.pulse}`}
           />
         )}
         <span className={`relative inline-flex h-1.5 w-1.5 rounded-full ${config.color}`} />
       </div>
-      <span className={`text-[10px] font-bold uppercase tracking-widest ${config.text}`}>
+      <span className={`text-[10px] font-bold uppercase tracking-[0.2em] ${config.text}`}>
         {status === "healthy" ? "API Active" : status === "error" ? "API Down" : "Checking"}
       </span>
 
       {/* Tooltip */}
-      <div className="pointer-events-none absolute left-1/2 top-full z-50 mt-3 -translate-x-1/2 whitespace-nowrap rounded-xl border border-[#E8E8E8] bg-white px-4 py-3 text-[10px] font-bold uppercase tracking-widest text-[#0A0A0A] opacity-0 shadow-[0_10px_30px_rgb(0,0,0,0.08)] transition-all group-hover:opacity-100 group-hover:translate-y-1">
-        <p className="text-center">{config.label}</p>
+      <div 
+        id="api-status-tooltip"
+        role="tooltip"
+        className="pointer-events-none absolute left-1/2 top-full z-50 mt-4 -translate-x-1/2 whitespace-nowrap rounded-2xl border border-[var(--pluto-100)] bg-white/95 px-5 py-3.5 text-[10px] font-bold uppercase tracking-[0.2em] text-[var(--text-primary)] opacity-0 shadow-[0_20px_50px_rgba(0,0,0,0.12)] backdrop-blur-md transition-all duration-300 group-hover:opacity-100 group-hover:translate-y-1.5"
+      >
+        <p className="text-center leading-none">{config.label}</p>
         {(errorMsg && status !== "loading") && (
-          <p className="mt-1.5 text-[9px] text-[#6B6B6B] lowercase tracking-normal font-medium text-center">{errorMsg}</p>
+          <p className="mt-2 text-[9px] text-[var(--text-secondary)] lowercase tracking-normal font-medium text-center">{errorMsg}</p>
         )}
+        {/* Arrow */}
+        <div className="absolute bottom-full left-1/2 h-2.5 w-2.5 -translate-x-1/2 translate-y-1.5 rotate-45 border-l border-t border-[var(--pluto-100)] bg-white/95" />
       </div>
     </div>
   );
diff --git a/frontend/src/components/ApiUsageChart.tsx b/frontend/src/components/ApiUsageChart.tsx
index e9864d02..75304849 100644
--- a/frontend/src/components/ApiUsageChart.tsx
+++ b/frontend/src/components/ApiUsageChart.tsx
@@ -170,14 +170,23 @@ export default function ApiUsageChart() {
             />
             <Tooltip
               contentStyle={{
-                backgroundColor: "rgba(0, 0, 0, 0.9)",
-                border: "1px solid rgba(255, 255, 255, 0.1)",
-                borderRadius: "8px",
-                color: "#fff",
+                backgroundColor: "rgba(255, 255, 255, 0.95)",
+                border: "1px solid var(--pluto-100)",
+                borderRadius: "16px",
+                padding: "12px 16px",
+                boxShadow: "0 20px 50px rgba(0, 0, 0, 0.12)",
+                backdropFilter: "blur(8px)",
+              }}
+              itemStyle={{
+                color: "var(--pluto-600)",
+                fontSize: "12px",
+                fontWeight: "600",
+                textTransform: "uppercase",
+                letterSpacing: "0.05em",
               }}
               formatter={(value: number) => [value.toLocaleString(locale), "Requests"]}
               labelFormatter={formatTooltipLabel}
-              labelStyle={{ color: "#94a3b8" }}
+              labelStyle={{ color: "var(--text-secondary)", fontSize: "10px", fontWeight: "600", marginBottom: "4px" }}
             />
               <Bar dataKey="requests" fill="#5ef2c0" radius={[4, 4, 0, 0]} maxBarSize={isCompact ? 22 : 32} />
             </BarChart>
diff --git a/frontend/src/components/CheckoutQrModal.tsx b/frontend/src/components/CheckoutQrModal.tsx
index e14d1f32..7c34f045 100644
--- a/frontend/src/components/CheckoutQrModal.tsx
+++ b/frontend/src/components/CheckoutQrModal.tsx
@@ -2,7 +2,7 @@
 
 import { useRef } from "react";
 import { useTranslations } from "next-intl";
-import toast from "react-hot-toast";
+import { toast } from "sonner";
 import { QRCodeCanvas } from "qrcode.react";
 import { Modal } from "@/components/ui/Modal";
 
@@ -44,10 +44,10 @@ export default function CheckoutQrModal({
   return (
     <Modal isOpen={isOpen} onClose={onClose} title={t("qrModalTitle")}>
       <div className="flex flex-col gap-5">
-        <p className="text-sm text-slate-400">{t("qrModalDescription")}</p>
+        <p className="text-sm text-[#6B6B6B]">{t("qrModalDescription")}</p>
         <div
           ref={qrWrapperRef}
-          className="flex items-center justify-center rounded-2xl border border-white/10 bg-white p-5 transition-all hover:border-mint/30 hover:shadow-lg hover:shadow-mint/10"
+          className="flex items-center justify-center rounded-2xl border border-[#E8E8E8] bg-white p-5 transition-all hover:border-[var(--pluto-400)] hover:shadow-lg hover:shadow-[var(--pluto-400)]/10"
         >
           <QRCodeCanvas
             value={qrValue}
@@ -60,7 +60,7 @@ export default function CheckoutQrModal({
         <button
           type="button"
           onClick={handleDownload}
-          className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-mint/30 bg-mint/10 px-4 font-semibold text-mint transition-all hover:bg-mint/20 hover:border-mint/50 hover:shadow-md hover:shadow-mint/20 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-mint focus-visible:ring-offset-2 focus-visible:ring-offset-[#16171a]"
+          className="inline-flex h-11 items-center justify-center gap-2 rounded-xl border border-[var(--pluto-200)] bg-[var(--pluto-50)] px-4 font-bold uppercase tracking-widest text-xs text-[var(--pluto-700)] transition-all hover:bg-[var(--pluto-100)] hover:border-[var(--pluto-400)] hover:shadow-md hover:shadow-[var(--pluto-500)]/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--pluto-300)] focus-visible:ring-offset-2 focus-visible:ring-offset-white"
         >
           <svg
             className="h-4 w-4"
diff --git a/frontend/src/components/CopyButton.tsx b/frontend/src/components/CopyButton.tsx
index 20dc0a6c..4920f5ef 100644
--- a/frontend/src/components/CopyButton.tsx
+++ b/frontend/src/components/CopyButton.tsx
@@ -135,7 +135,7 @@ export default function CopyButton({ text, className = "" }: CopyButtonProps) {
         type="button"
         onClick={handleCopy}
         aria-label={t("ariaLabel")}
-        className={`relative overflow-hidden rounded-lg border border-white/10 bg-black/20 p-1.5 text-slate-300 transition-all hover:border-mint/40 hover:text-mint active:scale-95 ${className}`}
+        className={`relative overflow-hidden rounded-lg border border-[var(--border-subtle)] bg-white p-1.5 text-[var(--text-secondary)] transition-all duration-300 hover:border-[var(--pluto-300)] hover:text-[var(--pluto-600)] hover:bg-[var(--pluto-50)]/50 active:scale-95 ${className}`}
         whileTap={{ scale: 0.95 }}
         whileHover={{ scale: 1.05 }}
         variants={glitchButtonVariants}
@@ -234,13 +234,15 @@ export default function CopyButton({ text, className = "" }: CopyButtonProps) {
       <AnimatePresence>
         {copied && (
           <motion.span
-            initial={{ opacity: 0, y: 10, scale: 0.8 }}
-            animate={{ opacity: 1, y: 0, scale: 1 }}
-            exit={{ opacity: 0, y: -10, scale: 0.8 }}
-            transition={{ duration: 0.3, ease: "easeOut" }}
-            className="absolute -top-8 left-1/2 -translate-x-1/2 whitespace-nowrap rounded-md border border-mint/30 bg-tide px-2 py-1 font-mono text-xs text-mint shadow-lg"
+            initial={{ opacity: 0, y: 8, scale: 0.9, x: "-50%" }}
+            animate={{ opacity: 1, y: 0, scale: 1, x: "-50%" }}
+            exit={{ opacity: 0, y: -8, scale: 0.9, x: "-50%" }}
+            transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}
+            className="absolute -top-11 left-1/2 whitespace-nowrap rounded-xl border border-[var(--pluto-100)] bg-white/95 px-3 py-1.5 text-[10px] font-bold uppercase tracking-widest text-[var(--pluto-600)] shadow-[0_10px_30px_rgba(0,0,0,0.08)] backdrop-blur-md"
           >
             {t("copied")}
+            {/* Arrow */}
+            <div className="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1 rotate-45 border-b border-r border-[var(--pluto-100)] bg-white/95" />
           </motion.span>
         )}
       </AnimatePresence>
diff --git a/frontend/src/components/InfoTooltip.tsx b/frontend/src/components/InfoTooltip.tsx
index 6de39c92..aa8aa355 100644
--- a/frontend/src/components/InfoTooltip.tsx
+++ b/frontend/src/components/InfoTooltip.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import React, { useState, useRef } from "react";
+import React, { useState, useRef, useEffect } from "react";
 import { motion, AnimatePresence } from "framer-motion";
 
 interface InfoTooltipProps {
@@ -17,12 +17,23 @@ export function InfoTooltip({
   const [isVisible, setIsVisible] = useState(false);
   const triggerRef = useRef<HTMLButtonElement>(null);
 
+  // Close on escape
+  useEffect(() => {
+    const handleKeyDown = (e: KeyboardEvent) => {
+      if (e.key === "Escape") setIsVisible(false);
+    };
+    if (isVisible) {
+      window.addEventListener("keydown", handleKeyDown);
+    }
+    return () => window.removeEventListener("keydown", handleKeyDown);
+  }, [isVisible]);
+
   return (
     <div className={`relative inline-flex items-center ${className}`}>
       <button
         ref={triggerRef}
         type="button"
-        className="cursor-help border-b border-dotted border-white/30 decoration-white/30 transition-colors hover:border-mint hover:text-mint focus-visible:border-mint focus-visible:text-mint focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-mint focus-visible:ring-offset-2 focus-visible:ring-offset-[#16171a]"
+        className="group/tooltip cursor-help rounded px-0.5 border-b border-dotted border-[var(--text-secondary)]/40 decoration-[var(--text-secondary)]/40 transition-all duration-300 text-[var(--text-secondary)] hover:text-[var(--pluto-600)] hover:border-[var(--pluto-600)] hover:bg-[var(--pluto-50)] focus-visible:text-[var(--pluto-600)] focus-visible:border-[var(--pluto-600)] focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-[var(--pluto-300)] focus-visible:ring-offset-2 focus-visible:ring-offset-white"
         onMouseEnter={() => setIsVisible(true)}
         onMouseLeave={() => setIsVisible(false)}
         onFocus={() => setIsVisible(true)}
@@ -38,15 +49,15 @@ export function InfoTooltip({
           <motion.div
             id="tooltip-content"
             role="tooltip"
-            initial={{ opacity: 0, scale: 0.95, y: 5 }}
+            initial={{ opacity: 0, scale: 0.95, y: 8 }}
             animate={{ opacity: 1, scale: 1, y: 0 }}
-            exit={{ opacity: 0, scale: 0.95, y: 5 }}
-            transition={{ duration: 0.15, ease: "easeOut" }}
-            className="absolute bottom-full left-1/2 z-[100] mb-2 w-64 -translate-x-1/2 rounded-lg border border-white/10 bg-[#16171a] p-2.5 text-xs leading-relaxed text-slate-200 shadow-2xl backdrop-blur-md"
+            exit={{ opacity: 0, scale: 0.95, y: 8 }}
+            transition={{ duration: 0.2, ease: [0.23, 1, 0.32, 1] }}
+            className="absolute bottom-full left-1/2 z-[100] mb-4 w-64 -translate-x-1/2 rounded-2xl border border-[var(--pluto-100)] bg-white/95 p-4 text-[12px] font-medium leading-relaxed text-[var(--text-primary)] shadow-[0_20px_50px_rgba(0,0,0,0.12)] backdrop-blur-md"
           >
-            {content}
+            <div className="relative z-10">{content}</div>
             {/* Arrow */}
-            <div className="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1 rotate-45 border-b border-r border-white/10 bg-[#16171a]" />
+            <div className="absolute top-full left-1/2 h-3 w-3 -translate-x-1/2 -translate-y-1.5 rotate-45 border-b border-r border-[var(--pluto-100)] bg-white/95" />
           </motion.div>
         )}
       </AnimatePresence>
diff --git a/frontend/src/components/MaskedValue.tsx b/frontend/src/components/MaskedValue.tsx
index 9536cd30..d05729b3 100644
--- a/frontend/src/components/MaskedValue.tsx
+++ b/frontend/src/components/MaskedValue.tsx
@@ -94,7 +94,7 @@ export default function MaskedValue({
     <section className={`flex flex-col gap-3 ${className}`.trim()}>
       <div className="flex items-center justify-between">
         {label ? (
-          <h2 className="text-xs font-medium uppercase tracking-wider text-slate-300">
+          <h2 className="text-xs font-bold uppercase tracking-wider text-[#6B6B6B]">
             {label}
           </h2>
         ) : (
@@ -104,17 +104,17 @@ export default function MaskedValue({
           type="button"
           onClick={toggle}
           aria-label={ariaLabel}
-          className="flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs text-slate-300 transition-colors hover:bg-white/5 hover:text-white focus-visible:bg-white/10 focus-visible:text-white"
+          className="flex items-center gap-1.5 rounded-lg px-2 py-1 text-xs font-bold uppercase tracking-widest text-[#6B6B6B] transition-colors hover:bg-black/5 hover:text-[#0A0A0A] focus-visible:bg-black/10 focus-visible:text-[#0A0A0A]"
         >
           <EyeIcon open={isRevealed} />
           {isRevealed ? hideLabel : showLabel}
         </button>
       </div>
 
-      <div className="flex items-center gap-2 overflow-hidden rounded-xl border border-white/10 bg-black/40 p-1 pl-4">
+      <div className="flex items-center gap-2 overflow-hidden rounded-xl border border-[#E8E8E8] bg-[#F9F9F9] p-1 pl-4">
         <code
           className={`flex-1 truncate font-mono text-sm transition-colors ${
-            isRevealed ? "text-mint" : "text-slate-300"
+            isRevealed ? "text-[#0A0A0A]" : "text-[#6B6B6B]"
           }`}
         >
           {displayValue}
@@ -123,7 +123,7 @@ export default function MaskedValue({
       </div>
 
       {helperText ? (
-        <p className="text-[11px] text-slate-400">{helperText}</p>
+        <p className="text-xs text-[#6B6B6B]">{helperText}</p>
       ) : null}
     </section>
   );
diff --git a/frontend/src/components/MerchantProfileCard.tsx b/frontend/src/components/MerchantProfileCard.tsx
index 1bcc0e24..f64d8a19 100644
--- a/frontend/src/components/MerchantProfileCard.tsx
+++ b/frontend/src/components/MerchantProfileCard.tsx
@@ -24,7 +24,7 @@ export default function MerchantProfileCard() {
     return (
       <Link
         href="/login"
-        className="inline-flex h-10 items-center gap-2 rounded-full border border-[#E8E8E8] bg-white px-4 text-[10px] font-bold uppercase tracking-widest text-[#0A0A0A] transition-colors hover:bg-[#F5F5F5]"
+        className="inline-flex h-10 items-center gap-2 rounded-full border border-[#E8E8E8] bg-white px-4 text-xs font-bold uppercase tracking-widest text-[#0A0A0A] transition-colors hover:bg-[#F5F5F5]"
       >
         <svg className="h-3.5 w-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
           <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5.121 17.804A9 9 0 1118.879 17.804M15 11a3 3 0 11-6 0 3 3 0 016 0z" />
@@ -52,6 +52,8 @@ export default function MerchantProfileCard() {
         onClick={() => setShowDropdown((v) => !v)}
         className="group flex h-10 items-center gap-2.5 rounded-full border border-[#E8E8E8] bg-white px-2.5 pr-3.5 transition-all hover:border-[#DADADA] hover:bg-[#F8F8F8]"
         aria-label="Open profile menu"
+        aria-expanded={showDropdown}
+        aria-haspopup="true"
       >
         <Avatar
           size={30}
@@ -62,7 +64,7 @@ export default function MerchantProfileCard() {
           <p className="truncate text-xs font-bold text-[#0A0A0A]">
             {displayName}
           </p>
-          <p className="truncate text-[9px] font-bold uppercase tracking-[0.18em] text-[#6B6B6B]">{email}</p>
+          <p className="truncate text-[10px] font-bold uppercase tracking-[0.18em] text-[#6B6B6B]">{email}</p>
         </div>
         <svg
           className={`h-3.5 w-3.5 text-[#8A8A8A] transition-transform duration-300 ${
@@ -71,6 +73,7 @@ export default function MerchantProfileCard() {
           fill="none"
           stroke="currentColor"
           viewBox="0 0 24 24"
+          aria-hidden="true"
         >
           <path
             strokeLinecap="round"
@@ -89,7 +92,11 @@ export default function MerchantProfileCard() {
             onClick={() => setShowDropdown(false)}
           />
           
-          <div className="absolute right-0 z-50 mt-3 w-72 origin-top-right rounded-2xl border border-[#E8E8E8] bg-white p-5 shadow-[0_20px_50px_rgba(0,0,0,0.12)]">
+          <div 
+            className="absolute right-0 z-50 mt-3 w-72 origin-top-right rounded-2xl border border-[#E8E8E8] bg-white p-5 shadow-[0_20px_50px_rgba(0,0,0,0.12)]"
+            role="menu"
+            aria-orientation="vertical"
+          >
             {/* Profile Header */}
             <div className="mb-5 flex items-center gap-3.5 border-b border-[#F0F0F0] pb-5">
               <Avatar
@@ -110,13 +117,15 @@ export default function MerchantProfileCard() {
               <Link
                 href="/dashboard"
                 onClick={() => setShowDropdown(false)}
-                className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-[11px] font-bold uppercase tracking-widest text-[#0A0A0A] bg-[#F5F5F5] transition-all hover:bg-[#E8E8E8]"
+                role="menuitem"
+                className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-xs font-bold uppercase tracking-widest text-[#0A0A0A] bg-[#F5F5F5] transition-all hover:bg-[#E8E8E8]"
               >
                 <svg
                   className="h-4 w-4"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
+                  aria-hidden="true"
                 >
                   <path
                     strokeLinecap="round"
@@ -131,14 +140,15 @@ export default function MerchantProfileCard() {
               <Link
                 href="/settings"
                 onClick={() => setShowDropdown(false)}
-                className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-[11px] font-bold uppercase tracking-widest text-[#6B6B6B] transition-all hover:bg-[#F5F5F5] hover:text-[#0A0A0A]"
+                role="menuitem"
+                className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-xs font-bold uppercase tracking-widest text-[#6B6B6B] transition-all hover:bg-[#F5F5F5] hover:text-[#0A0A0A]"
               >
-                {/* icon svg same */}
                 <svg
                   className="h-4 w-4"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
+                  aria-hidden="true"
                 >
                   <path
                     strokeLinecap="round"
@@ -159,13 +169,15 @@ export default function MerchantProfileCard() {
               <Link
                 href="/dashboard/create"
                 onClick={() => setShowDropdown(false)}
-                className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-[11px] font-bold uppercase tracking-widest text-[#6B6B6B] transition-all hover:bg-[#F5F5F5] hover:text-[#0A0A0A]"
+                role="menuitem"
+                className="flex items-center gap-3 rounded-xl px-3 py-2.5 text-xs font-bold uppercase tracking-widest text-[#6B6B6B] transition-all hover:bg-[#F5F5F5] hover:text-[#0A0A0A]"
               >
                 <svg
                   className="h-4 w-4"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
+                  aria-hidden="true"
                 >
                   <path
                     strokeLinecap="round"
@@ -179,13 +191,15 @@ export default function MerchantProfileCard() {
 
               <button
                 onClick={handleLogout}
-                className="mt-2 flex items-center gap-3 rounded-xl bg-red-50 px-3 py-2.5 text-[11px] font-bold uppercase tracking-widest text-red-600 transition-all hover:bg-red-100"
+                role="menuitem"
+                className="mt-2 flex items-center gap-3 rounded-xl bg-red-50 px-3 py-2.5 text-xs font-bold uppercase tracking-widest text-red-600 transition-all hover:bg-red-100"
               >
                 <svg
                   className="h-4 w-4"
                   fill="none"
                   stroke="currentColor"
                   viewBox="0 0 24 24"
+                  aria-hidden="true"
                 >
                   <path
                     strokeLinecap="round"
diff --git a/frontend/src/components/Navbar.tsx b/frontend/src/components/Navbar.tsx
index a90aefa2..af74f5ab 100644
--- a/frontend/src/components/Navbar.tsx
+++ b/frontend/src/components/Navbar.tsx
@@ -75,7 +75,7 @@ export default function Navbar() {
                 key={link.href}
                 href={link.href}
                 aria-current={isActive(pathname, link.href) ? "page" : undefined}
-                className={`group relative rounded-full px-4 py-1.5 text-[10px] font-bold uppercase tracking-widest transition-all ${
+                className={`group relative rounded-full px-4 py-1.5 text-xs font-bold uppercase tracking-widest transition-all ${
                   isActive(pathname, link.href)
                     ? "text-pluto-900"
                     : "text-pluto-600 hover:text-pluto-900"
diff --git a/frontend/src/components/PaymentDetailModal.tsx b/frontend/src/components/PaymentDetailModal.tsx
index 39224baf..62b15981 100644
--- a/frontend/src/components/PaymentDetailModal.tsx
+++ b/frontend/src/components/PaymentDetailModal.tsx
@@ -72,7 +72,7 @@ function AssetBadge({
     return (
       <span
         aria-hidden="true"
-        className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-white/15 via-mint/20 to-mint/40 text-mint shadow-[0_0_0_1px_rgba(255,255,255,0.08)]"
+        className="inline-flex h-8 w-8 items-center justify-center rounded-full bg-gradient-to-br from-[#0A0A0A] to-[#6B6B6B] text-white shadow-[0_0_0_1px_rgba(255,255,255,0.08)]"
       >
         <svg
           viewBox="0 0 24 24"
@@ -116,11 +116,11 @@ const STATUS_MAP: Record<string, { label: string; classes: string }> = {
   },
   confirmed: {
     label: "Confirmed",
-    classes: "bg-mint/10 text-mint border border-mint/30",
+    classes: "bg-[var(--pluto-500)]/15 text-[var(--pluto-400)] border border-[var(--pluto-500)]/30",
   },
   completed: {
     label: "Completed",
-    classes: "bg-green-500/15 text-green-400 border border-green-500/30",
+    classes: "bg-emerald-500/15 text-emerald-400 border border-emerald-500/30",
   },
   failed: {
     label: "Failed",
@@ -420,7 +420,7 @@ export default function PaymentDetailModal({
         {/* Header */}
         <div className="flex flex-shrink-0 items-center justify-between border-b border-white/10 p-6">
           <div>
-            <p className="font-mono text-xs uppercase tracking-[0.3em] text-mint">
+            <p className="font-mono text-xs uppercase tracking-[0.3em] text-[var(--pluto-400)]">
               Payment Details
             </p>
             <p className="mt-1 font-mono text-xs text-slate-500">
@@ -584,7 +584,7 @@ export default function PaymentDetailModal({
                         href={`${EXPLORER_BASE}/tx/${payment.tx_id}`}
                         target="_blank"
                         rel="noopener noreferrer"
-                        className="flex-1 truncate font-mono text-sm text-mint underline underline-offset-2 hover:text-glow"
+                        className="flex-1 truncate font-mono text-sm text-[var(--pluto-400)] underline underline-offset-2 hover:text-white"
                       >
                         {payment.tx_id}
                       </a>
@@ -657,7 +657,7 @@ export default function PaymentDetailModal({
                       type="button"
                       onClick={handlePay}
                       disabled={isProcessing}
-                      className="group relative flex h-12 w-full items-center justify-center rounded-xl bg-mint font-bold text-black transition-all hover:bg-glow disabled:cursor-not-allowed disabled:opacity-50"
+                      className="group relative flex h-12 w-full items-center justify-center rounded-xl bg-[var(--pluto-500)] font-bold text-white transition-all hover:bg-[var(--pluto-600)] disabled:cursor-not-allowed disabled:opacity-50"
                     >
                       {isProcessing ? (
                         <span className="flex items-center gap-2">
@@ -685,7 +685,7 @@ export default function PaymentDetailModal({
                       ) : (
                         `Pay with ${activeProvider!.name}`
                       )}
-                      <div className="absolute inset-0 -z-10 bg-mint/20 opacity-0 blur-xl transition-opacity group-hover:opacity-100" />
+                      <div className="absolute inset-0 -z-10 bg-[var(--pluto-500)]/20 opacity-0 blur-xl transition-opacity group-hover:opacity-100" />
                     </button>
                   ) : (
                     <WalletSelector
@@ -698,8 +698,8 @@ export default function PaymentDetailModal({
 
               {/* ── Status messages ── */}
               {isSettled && (
-                <div className="rounded-xl border border-mint/30 bg-mint/5 p-4 text-center">
-                  <p className="text-sm font-semibold text-mint">
+                <div className="rounded-xl border border-[var(--pluto-500)]/30 bg-[var(--pluto-500)]/5 p-4 text-center">
+                  <p className="text-sm font-semibold text-[var(--pluto-400)]">
                     This payment has been received.
                   </p>
                   <p className="mt-1 text-xs text-slate-400">
diff --git a/frontend/src/components/PaymentMetrics.tsx b/frontend/src/components/PaymentMetrics.tsx
index 2473b415..03354483 100644
--- a/frontend/src/components/PaymentMetrics.tsx
+++ b/frontend/src/components/PaymentMetrics.tsx
@@ -383,26 +383,27 @@ export default function PaymentMetrics({
                 />
                 <Tooltip
                   contentStyle={{
-                    backgroundColor: "#FFFFFF",
-                    border: "1px solid #E8E8E8",
-                    borderRadius: "4px",
-                    padding: "12px",
-                    boxShadow: "0 4px 12px rgba(0,0,0,0.05)",
+                    backgroundColor: "rgba(255, 255, 255, 0.95)",
+                    border: "1px solid var(--pluto-100)",
+                    borderRadius: "16px",
+                    padding: "16px",
+                    boxShadow: "0 20px 50px rgba(0, 0, 0, 0.12)",
+                    backdropFilter: "blur(8px)",
                   }}
                   labelStyle={{
-                    color: "#0A0A0A",
+                    color: "var(--pluto-600)",
                     fontSize: "10px",
                     fontWeight: "700",
                     textTransform: "uppercase",
-                    letterSpacing: "0.05em",
-                    marginBottom: "4px",
+                    letterSpacing: "0.08em",
+                    marginBottom: "8px",
                   }}
                   formatter={(value: number, name: string) => [
                     <span key={name} className="flex items-center gap-2">
-                      <span className="text-[11px] font-bold text-[#0A0A0A]">
+                      <span className="text-[12px] font-bold text-[var(--text-primary)]">
                         {value.toLocaleString()}
                       </span>
-                      <span className="text-[9px] font-medium text-[#6B6B6B] uppercase">
+                      <span className="text-[10px] font-medium text-[var(--text-secondary)] uppercase tracking-widest">
                         {name}
                       </span>
                     </span>,
diff --git a/frontend/src/components/RegistrationForm.tsx b/frontend/src/components/RegistrationForm.tsx
index 322bf629..cc377290 100644
--- a/frontend/src/components/RegistrationForm.tsx
+++ b/frontend/src/components/RegistrationForm.tsx
@@ -17,35 +17,50 @@ const BUSINESS_NAME_REGEX = /^[a-zA-Z0-9][a-zA-Z0-9\s&'.,-]{1,79}$/;
 
 // Memoized password strength indicator to prevent unnecessary re-renders
 const PasswordStrengthIndicator = React.memo(
-  ({ score, passwordLength }: { score: number; passwordLength: number }) => (
-    <div className="mt-1 flex flex-col gap-2">
-      <div className="flex h-1 gap-1">
-        {[0, 1, 2, 3].map((index) => {
-          const activeBars = score === 0 ? 1 : score === 4 ? 4 : score + 1;
-          const isActive = passwordLength > 0 && index < activeBars;
-          let bgColor = "bg-[#E8E8E8]";
-
-          if (isActive) {
-            if (score <= 1) bgColor = "bg-red-400";
-            else if (score === 2) bgColor = "bg-yellow-400";
-            else bgColor = "bg-[#0A0A0A]";
-          }
-
-          return (
-            <div
-              key={index}
-              className={`flex-1 rounded-full transition-colors duration-300 ${bgColor}`}
-            />
-          );
-        })}
+  ({ score, passwordLength }: { score: number; passwordLength: number }) => {
+    const labels = ["Weak", "Fair", "Good", "Strong", "Strong"];
+    const currentLabel = labels[score];
+
+    return (
+      <div className="mt-1 flex flex-col gap-2">
+        <div
+          className="flex h-1 gap-1"
+          role="progressbar"
+          aria-valuenow={passwordLength > 0 ? score + 1 : 0}
+          aria-valuemin={0}
+          aria-valuemax={4}
+          aria-label={`Password strength: ${passwordLength > 0 ? currentLabel : "None"}`}
+        >
+          {[0, 1, 2, 3].map((index) => {
+            const activeBars = score === 0 ? 1 : score === 4 ? 4 : score + 1;
+            const isActive = passwordLength > 0 && index < activeBars;
+            let bgColor = "bg-[#E8E8E8]";
+
+            if (isActive) {
+              if (score <= 1) bgColor = "bg-red-400";
+              else if (score === 2) bgColor = "bg-yellow-400";
+              else bgColor = "bg-[#0A0A0A]";
+            }
+
+            return (
+              <div
+                key={index}
+                className={`flex-1 rounded-full transition-colors duration-300 ${bgColor}`}
+              />
+            );
+          })}
+        </div>
+        {passwordLength > 0 && (
+          <p
+            className="text-[10px] text-[#6B6B6B] text-right font-black uppercase tracking-widest"
+            aria-live="polite"
+          >
+            {currentLabel}
+          </p>
+        )}
       </div>
-      {passwordLength > 0 && (
-        <p className="text-[9px] text-[#6B6B6B] text-right font-black uppercase tracking-widest">
-          {["Weak", "Fair", "Good", "Strong", "Strong"][score]}
-        </p>
-      )}
-    </div>
-  ),
+    );
+  },
 );
 
 PasswordStrengthIndicator.displayName = "PasswordStrengthIndicator";
@@ -180,7 +195,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
       <div className="flex flex-col gap-8 animate-in fade-in slide-in-from-bottom-4 duration-500">
         <div className="rounded-[3rem] border border-[#E8E8E8] bg-white p-12 shadow-[0_20px_60px_rgb(0,0,0,0.05)]">
           <div className="flex flex-col gap-4 text-center sm:text-left mb-8">
-            <p className="font-bold text-[10px] uppercase tracking-[0.4em] text-[#6B6B6B]">
+            <p className="font-bold text-xs uppercase tracking-[0.4em] text-[#6B6B6B]">
               Success
             </p>
             <h2 className="text-4xl font-bold text-[#0A0A0A] font-serif tracking-tight uppercase">
@@ -210,7 +225,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
 
         <a
           href="/dashboard"
-          className="text-center text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B] transition-colors underline underline-offset-8 hover:text-[#0A0A0A]"
+          className="text-center text-xs font-bold uppercase tracking-widest text-[#6B6B6B] transition-colors underline underline-offset-8 hover:text-[#0A0A0A]"
         >
           Enter Dashboard
         </a>
@@ -219,9 +234,17 @@ const RegistrationForm = React.memo(function RegistrationForm() {
   }
 
   return (
-    <form onSubmit={handleSubmit} className="flex flex-col gap-8" noValidate>
+    <form
+      onSubmit={handleSubmit}
+      className="flex flex-col gap-8"
+      noValidate
+      aria-busy={loading}
+    >
       {error && (
-        <div className="rounded-2xl border border-red-100 bg-red-50 p-5 text-xs font-bold text-red-600">
+        <div
+          className="rounded-2xl border border-red-100 bg-red-50 p-5 text-xs font-bold text-red-600"
+          role="alert"
+        >
           {error}
         </div>
       )}
@@ -230,7 +253,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
         <div className="flex flex-col gap-2">
           <label
             htmlFor="businessName"
-            className="text-[10px] font-bold text-[#6B6B6B] uppercase tracking-widest"
+            className="text-xs font-bold text-[#6B6B6B] uppercase tracking-widest"
           >
             Business Name
           </label>
@@ -258,7 +281,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
           {businessNameError && (
             <p
               id="business-name-error"
-              className="text-[10px] font-bold text-red-500 uppercase tracking-widest"
+              className="text-xs font-bold text-red-500 uppercase tracking-widest"
               role="alert"
             >
               {businessNameError}
@@ -269,7 +292,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
         <div className="flex flex-col gap-2">
           <label
             htmlFor="email"
-            className="text-[10px] font-bold text-[#6B6B6B] uppercase tracking-widest"
+            className="text-xs font-bold text-[#6B6B6B] uppercase tracking-widest"
           >
             Primary Email
           </label>
@@ -295,7 +318,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
           {emailError && (
             <p
               id="primary-email-error"
-              className="text-[10px] font-bold text-red-500 uppercase tracking-widest"
+              className="text-xs font-bold text-red-500 uppercase tracking-widest"
               role="alert"
             >
               {emailError}
@@ -306,7 +329,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
         <div className="flex flex-col gap-2">
           <label
             htmlFor="password"
-            className="text-[10px] font-bold text-[#6B6B6B] uppercase tracking-widest"
+            className="text-xs font-bold text-[#6B6B6B] uppercase tracking-widest"
           >
             Password
           </label>
@@ -335,7 +358,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
           {passwordError && (
             <p
               id="password-error"
-              className="text-[10px] font-bold text-red-500 uppercase tracking-widest"
+              className="text-xs font-bold text-red-500 uppercase tracking-widest"
               role="alert"
             >
               {passwordError}
@@ -346,7 +369,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
         <div className="flex flex-col gap-2">
           <label
             htmlFor="notificationEmail"
-            className="text-[10px] font-bold text-[#6B6B6B] uppercase tracking-widest"
+            className="text-xs font-bold text-[#6B6B6B] uppercase tracking-widest"
           >
             Notification Email
           </label>
@@ -374,7 +397,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
           {notificationEmailError && (
             <p
               id="notification-email-error"
-              className="text-[10px] font-bold text-red-500 uppercase tracking-widest"
+              className="text-xs font-bold text-red-500 uppercase tracking-widest"
               role="alert"
             >
               {notificationEmailError}
@@ -386,7 +409,7 @@ const RegistrationForm = React.memo(function RegistrationForm() {
       <button
         type="submit"
         disabled={loading || !isFormValid}
-        className="group relative flex h-16 items-center justify-center rounded-2xl bg-[#0A0A0A] px-8 text-[10px] font-bold uppercase tracking-[0.3em] text-white transition-all hover:bg-black shadow-xl shadow-black/10 disabled:cursor-not-allowed disabled:opacity-50"
+        className="group relative flex h-16 items-center justify-center rounded-2xl bg-[#0A0A0A] px-8 text-xs font-bold uppercase tracking-[0.3em] text-white transition-all hover:bg-black shadow-xl shadow-black/10 disabled:cursor-not-allowed disabled:opacity-50"
       >
         {loading ? (
           <span className="flex items-center gap-3">
diff --git a/frontend/src/components/WalletSelector.tsx b/frontend/src/components/WalletSelector.tsx
index 8943506b..cfd25bdb 100644
--- a/frontend/src/components/WalletSelector.tsx
+++ b/frontend/src/components/WalletSelector.tsx
@@ -173,8 +173,8 @@ export default function WalletSelector({
   return (
     <div className="flex flex-col gap-4">
       <div>
-        <p className="text-sm font-bold text-white">{t("chooseWallet")}</p>
-        <p className="mt-0.5 text-xs text-slate-400">{t("description")}</p>
+        <p className="text-sm font-bold text-[#0A0A0A]">{t("chooseWallet")}</p>
+        <p className="mt-0.5 text-xs text-[#6B6B6B]">{t("description")}</p>
       </div>
 
       <div className="flex flex-col gap-3">
@@ -215,16 +215,16 @@ export default function WalletSelector({
               {/* Label */}
               <div className="flex flex-1 flex-col gap-0.5">
                 {isConnecting ? (
-                  <span className="flex items-center gap-2 text-sm font-bold text-white">
+                  <span className="flex items-center gap-2 text-sm font-bold text-[#0A0A0A]">
                     <Spinner size="sm" />
                     {isWc ? t("walletConnectWaiting") : "Connecting…"}
                   </span>
                 ) : (
                   <>
-                    <span className="text-sm font-bold text-white transition-colors group-hover:text-mint">
+                    <span className="text-sm font-bold text-[#0A0A0A] transition-colors group-hover:text-[var(--pluto-600)]">
                       {p.name}
                     </span>
-                    <span className="text-[10px] font-medium text-slate-500">
+                    <span className="text-[10px] font-medium text-[#6B6B6B]">
                       {isDisabled
                         ? isWc
                           ? t("noProjectId")
@@ -259,13 +259,13 @@ export default function WalletSelector({
       {/* WalletConnect QR */}
       {wcUri && (
         <div
-          className="flex flex-col items-center gap-3 rounded-2xl border border-white/10 bg-white/[0.02] p-6"
+          className="flex flex-col items-center gap-3 rounded-2xl border border-[#E8E8E8] bg-[#F9F9F9] p-6"
           aria-live="polite"
         >
-          <p className="text-xs font-bold uppercase tracking-widest text-slate-500">
+          <p className="text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
             {t("scanTitle")}
           </p>
-          <div className="rounded-xl bg-white p-3 shadow-[0_0_20px_rgba(255,255,255,0.05)]">
+          <div className="rounded-xl bg-white p-3 shadow-[0_4px_20px_rgba(0,0,0,0.05)] border border-[#E8E8E8]">
             <QRCodeSVG
               value={wcUri}
               size={200}
@@ -274,7 +274,7 @@ export default function WalletSelector({
               bgColor="#ffffff"
             />
           </div>
-          <p className="text-center text-[10px] text-slate-500">
+          <p className="text-center text-[10px] text-[#6B6B6B] font-medium">
             {t("scanDescription")}
           </p>
         </div>
diff --git a/frontend/src/components/login/HeroSection.tsx b/frontend/src/components/login/HeroSection.tsx
index 7713023a..bdeab5ea 100644
--- a/frontend/src/components/login/HeroSection.tsx
+++ b/frontend/src/components/login/HeroSection.tsx
@@ -39,7 +39,7 @@ export default function HeroSection() {
         </div>
       </div> */}
 
-      <h1 className="text-5xl leading-[1.05] font-bold text-[#0A0A0A] mb-6 tracking-tighter uppercase">
+      <h1 id="hero-heading" className="text-5xl leading-[1.05] font-bold text-[#0A0A0A] mb-6 tracking-tighter uppercase">
         Commerce <br />
         <span className="text-[#6B6B6B]">Re-Engineered</span>
       </h1>
diff --git a/frontend/src/components/login/LoginForm.tsx b/frontend/src/components/login/LoginForm.tsx
index fcc32874..212c0c12 100644
--- a/frontend/src/components/login/LoginForm.tsx
+++ b/frontend/src/components/login/LoginForm.tsx
@@ -34,24 +34,31 @@ export default function LoginForm() {
   return (
     <div className="w-full max-w-[440px] rounded-[3rem] bg-white p-10 sm:p-14 shadow-[0_20px_60px_rgb(0,0,0,0.05)] border border-[#E8E8E8]">
       <div className="mb-12 text-center sm:text-left">
-        <h2 className="text-4xl font-bold tracking-tight text-[#0A0A0A] mb-4 uppercase">Welcome Back</h2>
+        <h2 id="login-heading" className="text-4xl font-bold tracking-tight text-[#0A0A0A] mb-4 uppercase">Welcome Back</h2>
         <p className="text-sm font-medium text-[#6B6B6B]">Sign in to your professional PLUTO dashboard.</p>
       </div>
 
       {error && (
-        <div className="mb-6 rounded-2xl bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700 font-medium">
+        <div
+          role="alert"
+          className="mb-6 rounded-2xl bg-red-50 border border-red-200 px-4 py-3 text-sm text-red-700 font-medium"
+        >
           {error}
         </div>
       )}
 
-      <form onSubmit={handleSubmit} className="flex flex-col gap-6">
+      <form
+        onSubmit={handleSubmit}
+        className="flex flex-col gap-6"
+        aria-busy={loading}
+      >
         <div className="flex flex-col gap-2">
-          <label htmlFor="email" className="text-[10px] font-bold tracking-[0.2em] text-[#6B6B6B] uppercase">
+          <label htmlFor="email" className="text-xs font-bold tracking-[0.2em] text-[#6B6B6B] uppercase">
             Email Address
           </label>
           <div className="relative">
             <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#6B6B6B]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#6B6B6B]" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z" />
               </svg>
             </div>
@@ -69,12 +76,12 @@ export default function LoginForm() {
         </div>
 
         <div className="flex flex-col gap-2">
-          <label htmlFor="password" className="text-[10px] font-bold tracking-[0.2em] text-[#6B6B6B] uppercase">
+          <label htmlFor="password" className="text-xs font-bold tracking-[0.2em] text-[#6B6B6B] uppercase">
             Password
           </label>
           <div className="relative">
             <div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-4">
-              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#6B6B6B]" fill="none" viewBox="0 0 24 24" stroke="currentColor">
+              <svg xmlns="http://www.w3.org/2000/svg" className="h-4 w-4 text-[#6B6B6B]" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
                 <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.8} d="M12 15v2m-6 4h12a2 2 0 002-2v-6a2 2 0 00-2-2H6a2 2 0 00-2 2v6a2 2 0 002 2zm10-10V7a4 4 0 00-8 0v4h8z" />
               </svg>
             </div>
@@ -100,11 +107,11 @@ export default function LoginForm() {
               onChange={(e) => setRememberMe(e.target.checked)}
               className="h-4 w-4 rounded border-[#E8E8E8] text-[#0A0A0A] focus:ring-[#0A0A0A] transition-all"
             />
-            <label htmlFor="remember_me" className="text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B] group-hover:text-[#0A0A0A] transition-colors">
+            <label htmlFor="remember_me" className="text-xs font-bold uppercase tracking-widest text-[#6B6B6B] group-hover:text-[#0A0A0A] transition-colors">
               Remember me
             </label>
           </div>
-          <Link href="/forgot-password" className="text-[10px] font-bold uppercase tracking-widest text-[#0A0A0A] hover:underline">
+          <Link href="/forgot-password" className="text-xs font-bold uppercase tracking-widest text-[#0A0A0A] hover:underline">
             Forgot password?
           </Link>
         </div>
@@ -112,13 +119,13 @@ export default function LoginForm() {
         <button
           type="submit"
           disabled={loading}
-          className="flex h-14 w-full justify-center rounded-2xl bg-[var(--pluto-500)] py-5 text-[10px] font-bold uppercase tracking-[0.3em] text-white shadow-xl shadow-[var(--pluto-500)]/20 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
+          className="flex h-14 w-full justify-center rounded-2xl bg-[var(--pluto-500)] py-5 text-xs font-bold uppercase tracking-[0.3em] text-white shadow-xl shadow-[var(--pluto-500)]/20 transition-all hover:bg-[var(--pluto-600)] active:scale-[0.98] disabled:opacity-50 disabled:cursor-not-allowed"
         >
           {loading ? "Signing in..." : "Sign in to PLUTO"}
         </button>
       </form>
 
-      <p className="mt-10 text-center text-[10px] font-bold uppercase tracking-widest text-[#6B6B6B]">
+      <p className="mt-10 text-center text-xs font-bold uppercase tracking-widest text-[#6B6B6B]">
         New to PLUTO?{" "}
         <Link href="/register" className="text-[#0A0A0A] underline underline-offset-4 hover:text-black">
           Create account