diff --git a/client/package-lock.json b/client/package-lock.json
index dac8c64..a2f7c46 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -87,6 +87,7 @@
       "resolved": "https://registry.npmjs.org/@babel/core/-/core-7.28.0.tgz",
       "integrity": "sha512-UlLAnTPrFdNGoFtbSXwcGFQBtQZJCNjaN6hQNP3UPvuNXT1i82N26KL3dZeIpNalWywr9IuQuncaAfUaS1g6sQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@ampproject/remapping": "^2.2.0",
         "@babel/code-frame": "^7.27.1",
@@ -736,6 +737,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-syntax-flow/-/plugin-syntax-flow-7.27.1.tgz",
       "integrity": "sha512-p9OkPbZ5G7UT1MofwYFigGebnrzGJacoBSQM0/6bi/PUMVE+qlWDD/OalvQKbwgQzU6dl0xAv6r4X7Jme0RYxA==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-plugin-utils": "^7.27.1"
       },
@@ -1619,6 +1621,7 @@
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-react-jsx/-/plugin-transform-react-jsx-7.27.1.tgz",
       "integrity": "sha512-2KH4LWGSrJIkVf5tSiBFYuXDAoWRq2MMwgivCf+93dd0GQi8RXLjKA/0EvRnVV5G0hrHczsquXuD01L8s6dmBw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/helper-annotate-as-pure": "^7.27.1",
         "@babel/helper-module-imports": "^7.27.1",
@@ -2961,7 +2964,6 @@
       "integrity": "sha512-q6XAnWQDIMA3+FTiOYajoYqySkO+JSat0ytXGSuRdq9uXE7o92gzuQwQM14xaCRlBLGq3v5miDGC4vkVTn54xA==",
       "license": "Apache-2.0",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=10.0"
       },
@@ -2979,7 +2981,6 @@
       "integrity": "sha512-6RX+W5a+ZUY/c/7J5s5jK9UinLfJo5oWKh84fb4X0yK2q4WXEWUWZWuEMjvCb1YNUQhEAhUfr5scEGOH7jC4YQ==",
       "license": "Apache-2.0",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=10.0"
       },
@@ -2997,7 +2998,6 @@
       "integrity": "sha512-E8Oy+08cmCf0EK/NMxpaJZmOxPqM+6iSe2S4nlSBrPZOORoDJILxtbSUEDKQyTamm/BVAhIGllOBNU79/dwf0g==",
       "license": "Apache-2.0",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=10.0"
       },
@@ -3015,7 +3015,6 @@
       "integrity": "sha512-7NST56/cM/wC2qD9NqUanPz0KiuyDxRKasG3X46iz3b0V8dvdexuGyCOBZCMdrHYaro6+w/H2i6EnJdqzKb69w==",
       "license": "Apache-2.0",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@jsonjoy.com/base64": "^1.1.2",
         "@jsonjoy.com/buffers": "^1.2.0",
@@ -3042,7 +3041,6 @@
       "integrity": "sha512-Fsn6wM2zlDzY1U+v4Nc8bo3bVqgfNTGcn6dMgs6FjrEnt4ZCe60o6ByKRjOGlI2gow0aE/Q41QOigdTqkyK5fg==",
       "license": "Apache-2.0",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@jsonjoy.com/codegen": "^1.0.0",
         "@jsonjoy.com/util": "^1.9.0"
@@ -3064,7 +3062,6 @@
       "integrity": "sha512-pLuQo+VPRnN8hfPqUTLTHk126wuYdXVxE6aDmjSeV4NCAgyxWbiOIeNJVtID3h1Vzpoi9m4jXezf73I6LgabgQ==",
       "license": "Apache-2.0",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@jsonjoy.com/buffers": "^1.0.0",
         "@jsonjoy.com/codegen": "^1.0.0"
@@ -3671,6 +3668,7 @@
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-10.4.1.tgz",
       "integrity": "sha512-o4PXJQidqJl82ckFaXUeoAW+XysPLauYI43Abki5hABd853iMhitooc6znOnczgbTYmEP6U6/y1ZyKAIsvMKGg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@babel/code-frame": "^7.10.4",
         "@babel/runtime": "^7.12.5",
@@ -4321,8 +4319,7 @@
       "resolved": "https://registry.npmjs.org/@types/retry/-/retry-0.12.2.tgz",
       "integrity": "sha512-XISRgDJ2Tc5q4TRqvgJtzsRkFYNJzZrhTdtMoGVBttwzzQJkPnS3WWTFc7kuDRoPtPakl+T+OfdEUjYJj7Jbow==",
       "license": "MIT",
-      "optional": true,
-      "peer": true
+      "optional": true
     },
     "node_modules/@types/semver": {
       "version": "7.7.0",
@@ -4410,6 +4407,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/eslint-plugin/-/eslint-plugin-5.62.0.tgz",
       "integrity": "sha512-TiZzBSJja/LbhNPvk6yc0JrX9XqhQ0hdh6M2svYfsHGejaKFIAGd9MQ+ERIMzLGlN/kZoYIgdxFV0PuljTKXag==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/regexpp": "^4.4.0",
         "@typescript-eslint/scope-manager": "5.62.0",
@@ -4463,6 +4461,7 @@
       "resolved": "https://registry.npmjs.org/@typescript-eslint/parser/-/parser-5.62.0.tgz",
       "integrity": "sha512-VlJEV0fOQ7BExOsHYAGrgbEiZoi8D+Bl2+f6V2RrXerRSylnp+ZBHmPvaIa8cz0Ajx7WO7Z5RqfgYg7ED1nRhA==",
       "license": "BSD-2-Clause",
+      "peer": true,
       "dependencies": {
         "@typescript-eslint/scope-manager": "5.62.0",
         "@typescript-eslint/types": "5.62.0",
@@ -4832,6 +4831,7 @@
       "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.15.0.tgz",
       "integrity": "sha512-NZyJarBfL7nWwIq+FDL6Zp/yHEhePMNnnJ0y3qfieCrmNvYct8uvtiV41UvlSe6apAfk0fY1FbWx+NwfmpvtTg==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "acorn": "bin/acorn"
       },
@@ -4930,6 +4930,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz",
       "integrity": "sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.1",
         "fast-json-stable-stringify": "^2.0.0",
@@ -5858,6 +5859,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "caniuse-lite": "^1.0.30001726",
         "electron-to-chromium": "^1.5.173",
@@ -5904,7 +5906,6 @@
       "integrity": "sha512-tjwM5exMg6BGRI+kNmTntNsvdZS1X8BFYS6tnJ2hdH0kVxM6/eVZ2xy+FqStSWvYmtfFMDLIxurorHwDKfDz5Q==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "run-applescript": "^7.0.0"
       },
@@ -6082,6 +6083,7 @@
       "resolved": "https://registry.npmjs.org/chart.js/-/chart.js-4.5.0.tgz",
       "integrity": "sha512-aYeC/jDgSEx8SHWZvANYMioYMZ2KX02W6f6uVfyteuCGcadDLcYVHdfdygsTQkQ4TKn5lghoojAsPj5pu0SnvQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@kurkle/color": "^0.3.0"
       },
@@ -6986,6 +6988,7 @@
       "resolved": "https://registry.npmjs.org/d3-selection/-/d3-selection-3.0.0.tgz",
       "integrity": "sha512-fmTRWbNMmsmWq6xJV8D19U/gw/bwrHfNXxrIN+HfZgnzqTHp9jOmKMhsTUjXOJnZOdZY9Q28y4yebKzqDKlxlQ==",
       "license": "ISC",
+      "peer": true,
       "engines": {
         "node": ">=12"
       }
@@ -7155,7 +7158,6 @@
       "integrity": "sha512-WY/3TUME0x3KPYdRRxEJJvXRHV4PyPoUsxtZa78lwItwRQRHhd2U9xOscaT/YTf8uCXIAjeJOFBVEh/7FtD8Xg==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "bundle-name": "^4.1.0",
         "default-browser-id": "^5.0.0"
@@ -7173,7 +7175,6 @@
       "integrity": "sha512-A6p/pu/6fyBcA1TRz/GqWYPViplrftcW2gZC9q79ngNCKAeR/X3gcEdXQHl4KNXV+3wgIJ1CPkJQ3IHM6lcsyA==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -7868,6 +7869,7 @@
       "integrity": "sha512-ypowyDxpVSYpkXr9WPv2PAZCtNip1Mv5KTW0SCurXv/9iOpcrH9PaqUElksqEB6pChqHGDRCFTyrZlGhnLNGiA==",
       "deprecated": "This version is no longer supported. Please see https://eslint.org/version-support for other options.",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@eslint-community/eslint-utils": "^4.2.0",
         "@eslint-community/regexpp": "^4.6.1",
@@ -9319,7 +9321,6 @@
       "integrity": "sha512-QMwlOQKU/IzqMUOAZWubUOT8Qft+Y0KQWnX9nK3ch0CJg0tTp4TvGZsTfudYKv2NzoQSyPcnA6TYeIQ3jGichQ==",
       "license": "Apache-2.0",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=10.0"
       },
@@ -9850,7 +9851,6 @@
       "integrity": "sha512-Y93lCzHYgGWdrJ66yIktxiaGULYc6oGiABxhcO5AufBeOyoIdZF7bIfLaOrbM0iGIOXQQgxxRrFEnb+Y6w1n4A==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=10.18"
       }
@@ -10262,7 +10262,6 @@
       "integrity": "sha512-KIYLCCJghfHZxqjYBE7rEy0OBuTd5xCHS7tHVgvCLkx7StIoaxwNW3hCALgEUjFfeRk+MG/Qxmp/vtETEF3tRA==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "is-docker": "^3.0.0"
       },
@@ -10282,7 +10281,6 @@
       "integrity": "sha512-eljcgEDlEns/7AXFosB5K/2nCM4P7FQPkGc/DWLy5rmFEWvZayGrik1d9/QIY5nJ4f9YsVvBkA6kJpHn9rISdQ==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "bin": {
         "is-docker": "cli.js"
       },
@@ -10329,7 +10327,6 @@
       "integrity": "sha512-6oIwpsgRfnDiyEDLMay/GqCl3HoAtH5+RUKW29gYkL0QA+ipzpDLA16yQs7/RHCSu+BwgbJaOUqa4A99qNVQVw==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=16"
       },
@@ -10748,6 +10745,7 @@
       "resolved": "https://registry.npmjs.org/jest/-/jest-27.5.1.tgz",
       "integrity": "sha512-Yn0mADZB89zTtjkPJEXwrac3LHudkQMR+Paqa8uxJHCBr9agxztUifWCyiYrjhMPBoUVBjyny0I7XH6ozDr7QQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@jest/core": "^27.5.1",
         "import-local": "^3.0.2",
@@ -12751,7 +12749,6 @@
       "integrity": "sha512-hEt02O4hUct5wtwg4H4KcWgDdm+l1bOaEy/hWzd8xtXB9BqxTWBBhb+2ImAtH4Cv4rPjV76xN3Zumqk3k3AhhQ==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@types/retry": "0.12.2",
         "is-network-error": "^1.0.0",
@@ -13054,6 +13051,7 @@
         }
       ],
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "nanoid": "^3.3.11",
         "picocolors": "^1.1.1",
@@ -14241,6 +14239,7 @@
       "resolved": "https://registry.npmjs.org/postcss-selector-parser/-/postcss-selector-parser-6.1.2.tgz",
       "integrity": "sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "cssesc": "^3.0.0",
         "util-deprecate": "^1.0.2"
@@ -14606,6 +14605,7 @@
       "resolved": "https://registry.npmjs.org/react/-/react-19.1.1.tgz",
       "integrity": "sha512-w8nqGImo45dmMIfljjMwOGtbmC/mk4CMYhWIicdSflH91J9TyCyczcPFXJzrZ/ZXcgGRFeP6BU0BEJTw6tZdfQ==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -14747,6 +14747,7 @@
       "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-19.1.1.tgz",
       "integrity": "sha512-Dlq/5LAZgF0Gaz6yiqZCf6VCcZs1ghAJyrsu84Q/GT0gV+mCxbfmKNoGRKBYMJ8IEdGPqu49YWXD02GCknEDkw==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "scheduler": "^0.26.0"
       },
@@ -14780,6 +14781,7 @@
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
       "integrity": "sha512-F27qZr8uUqwhWZboondsPx8tnC3Ct3SxZA3V5WyEvujRyyNv0VYPhoBg1gZ8/MV5tubQp76Trw8lTv9hzRBa+A==",
       "license": "MIT",
+      "peer": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -15402,6 +15404,7 @@
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-2.79.2.tgz",
       "integrity": "sha512-fS6iqSPZDs3dr/y7Od6y5nha8dW1YnbgtsyotCVvoFGKbERG++CVRFv1meyGDE1SNItQA8BrnCw7ScdAhRJ3XQ==",
       "license": "MIT",
+      "peer": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -15457,7 +15460,6 @@
       "integrity": "sha512-DPe5pVFaAsinSaV6QjQ6gdiedWDcRCbUuiQfQa2wmWV7+xC9bGulGI8+TdRmoFkAPaBXk8CrAbnlY2ISniJ47Q==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=18"
       },
@@ -15658,6 +15660,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -17124,7 +17127,6 @@
       "integrity": "sha512-s+2Bwztg6PhWUD7XMfeYm5qliDdSiZm7M7n8KjTkIsm3l/2lgVRc2/Gx/v+ZX8lT4FMA+i8aQvhcWylldc+ZNw==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=10.18"
       },
@@ -17217,7 +17219,6 @@
       "integrity": "sha512-rMuvhU4MCDbcbnleZTFezWsaZXRFemSqAM+7jPnzUl1fo9w3YEKOxAeui0fz3OI4EU4hf23iyA7uQRVko+UaBA==",
       "license": "Apache-2.0",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=10.0"
       },
@@ -17278,7 +17279,8 @@
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.8.1.tgz",
       "integrity": "sha512-oJFu94HQb+KVduSUQL7wnpmqnfmLsOA/nAh6b6EH0wCEoK0/mPeXU6c3wKDV83MkOuHPRHtSXKKU99IBazS/2w==",
-      "license": "0BSD"
+      "license": "0BSD",
+      "peer": true
     },
     "node_modules/tsutils": {
       "version": "3.21.0",
@@ -17327,6 +17329,7 @@
       "resolved": "https://registry.npmjs.org/type-fest/-/type-fest-0.20.2.tgz",
       "integrity": "sha512-Ne+eE4r0/iWnpAxD852z3A+N0Bt5RN//NjJwRd2VFHEmrywxf5vsZlh4R6lixl6B+wz/8d+maTSAkN1FIkI3LQ==",
       "license": "(MIT OR CC0-1.0)",
+      "peer": true,
       "engines": {
         "node": ">=10"
       },
@@ -17769,6 +17772,7 @@
       "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.101.0.tgz",
       "integrity": "sha512-B4t+nJqytPeuZlHuIKTbalhljIFXeNRqrUGAQgTGlfOl2lXXKXw+yZu6bicycP+PUlM44CxBjCFD6aciKFT3LQ==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "@types/eslint-scope": "^3.7.7",
         "@types/estree": "^1.0.8",
@@ -17818,7 +17822,6 @@
       "integrity": "sha512-uxQ6YqGdE4hgDKNf7hUiPXOdtkXvBJXrfEGYSx7P7LC8hnUYGK70X6xQXUvXeNyBDDcsiQXpG2m3G9vxowaEuA==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "colorette": "^2.0.10",
         "memfs": "^4.43.1",
@@ -17849,7 +17852,6 @@
       "integrity": "sha512-L9uC9vGuc4xFybbdOpRLoOAOq1YEBBsocCs5NVW32DfU+CZWWIn3OVF+lB8Gp4ttBVSMazwrTrjv8ussX/e3VQ==",
       "license": "Apache-2.0",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@jsonjoy.com/json-pack": "^1.11.0",
         "@jsonjoy.com/util": "^1.9.0",
@@ -17869,7 +17871,6 @@
       "integrity": "sha512-aU5EJuIN2WDemCcAp2vFBfp/m4EAhWJnUNSSw0ixs7/kXbd6Pg64EmwJkNdFhB8aWt1sH2CTXrLxo/iAGV3oPQ==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">= 0.6"
       }
@@ -17880,7 +17881,6 @@
       "integrity": "sha512-xRc4oEhT6eaBpU1XF7AjpOFD+xQmXNB5OVKwp4tqCuBpHLS/ZbBDrc07mYTDqVMg6PfxUjjNp85O6Cd2Z/5HWA==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "mime-db": "^1.54.0"
       },
@@ -17894,7 +17894,6 @@
       "integrity": "sha512-QcQ72gh8a+7JO63TAx/6XZf/CWhgMzu5m0QirvPfGvptOusAxG12w2+aua1Jkjr7hzaWDnJ2n6JFeexMHI+Zjg==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@types/bonjour": "^3.5.13",
         "@types/connect-history-api-fallback": "^1.5.4",
@@ -17953,7 +17952,6 @@
       "integrity": "sha512-FvPtiIf1LfhzsaIXhv/PHan/2FeQBbtBDtfX2QfvPxdUelMDEckK08SM6nqo1MIZY3RUlfA+HV8+hFUSio78qg==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "@types/node": "*",
         "@types/qs": "*",
@@ -17967,7 +17965,6 @@
       "integrity": "sha512-N+MeXYoqr3pOgn8xfyRPREN7gHakLYjhsHhWGT3fWAiL4IkAt0iDw14QiiEm2bE30c5XX5q0FtAA3CK5f9/BUg==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=12"
       },
@@ -17981,7 +17978,6 @@
       "integrity": "sha512-YgBpdJHPyQ2UE5x+hlSXcnejzAvD0b22U2OuAP+8OnlJT+PjWPxtgmGqKKc+RgTM63U9gN0YzrYc71R2WT/hTA==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "default-browser": "^5.2.1",
         "define-lazy-prop": "^3.0.0",
@@ -18001,7 +17997,6 @@
       "integrity": "sha512-PEIGCY5tSlUt50cqyMXfCzX+oOPqN0vuGqWzbcJ2xvnkzkq46oOpz7dQaTDBdfICb4N14+GARUDw2XV2N4tvzg==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "engines": {
         "node": ">=10.0.0"
       },
@@ -18355,6 +18350,7 @@
       "resolved": "https://registry.npmjs.org/ajv/-/ajv-8.17.1.tgz",
       "integrity": "sha512-B/gBuNg5SiMTrPkC+A2+cW0RszwxYmn6VYxB/inlBStS5nx6xHIt/ehKRhIMhqusl7a8LjQoZnjCs5vhwxOQ1g==",
       "license": "MIT",
+      "peer": true,
       "dependencies": {
         "fast-deep-equal": "^3.1.3",
         "fast-uri": "^3.0.1",
@@ -18670,7 +18666,6 @@
       "integrity": "sha512-h3Fbisa2nKGPxCpm89Hk33lBLsnaGBvctQopaBSOW/uIs6FTe1ATyAnKFJrzVs9vpGdsTe73WF3V4lIsk4Gacw==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "is-wsl": "^3.1.0"
       },
@@ -18687,7 +18682,6 @@
       "integrity": "sha512-UcVfVfaK4Sc4m7X3dUSoHoozQGBEFeDC+zVo06t98xe8CzHSZZBekNXH+tu0NalHolcJ/QAGqS46Hef7QXBIMw==",
       "license": "MIT",
       "optional": true,
-      "peer": true,
       "dependencies": {
         "is-inside-container": "^1.0.0"
       },
diff --git a/client/src/components/FeedbackModal.css b/client/src/components/FeedbackModal.css
index 2e0aa11..915effc 100644
--- a/client/src/components/FeedbackModal.css
+++ b/client/src/components/FeedbackModal.css
@@ -13,7 +13,7 @@
 }
 
 .modal-content {
-  background: white;
+  background: var(--bg) ;
   padding: 30px;
   border-radius: 12px;
   width: 90%;
@@ -36,7 +36,7 @@
 .modal-content h2 {
   margin-top: 0;
   margin-bottom: 20px;
-  color: #333;
+  color: var(--text) ;
   text-align: center;
 }
 
@@ -59,7 +59,7 @@
   display: block;
   margin-bottom: 5px;
   font-weight: bold;
-  color: #555;
+  color: var(--text) ;
 }
 
 .form-group input,
@@ -67,7 +67,7 @@
 .form-group textarea {
   width: 100%;
   padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border) ;
   border-radius: 6px;
   font-size: 1rem;
   box-sizing: border-box; /* Important for padding */
diff --git a/client/src/index.css b/client/src/index.css
index e4585be..924b8f5 100644
--- a/client/src/index.css
+++ b/client/src/index.css
@@ -20,7 +20,7 @@ code {
   --text: #0f172a; /* Slate-900 */
   --muted: #334155; /* Slate-700 for stronger contrast */
   --card: #f8fafc; /* Slate-50 */
-  --border: #e2e8f0; /* Slate-200 */
+  --border: var(--border) ; /* Slate-200 */
   --brand: #2563eb; /* Stronger blue for links/buttons */
   --heading: #0a0f1f; /* Deep heading color */
 }
diff --git a/client/src/pages/About.css b/client/src/pages/About.css
index 2da398d..a846dd4 100644
--- a/client/src/pages/About.css
+++ b/client/src/pages/About.css
@@ -3,7 +3,7 @@
 .about {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   line-height: 1.6;
-  color: #333;
+  color: var(--text) ;
 }
 
 .container {
@@ -58,7 +58,7 @@
 /* Mission Section */
 .mission {
   padding: 6rem 0;
-  background: #f8fafc;
+  background: var(--card) ;
 }
 
 .mission-content {
@@ -72,12 +72,12 @@
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 2rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .mission-text p {
   font-size: 1.1rem;
-  color: #666;
+  color: var(--muted) ;
   margin-bottom: 1.5rem;
   line-height: 1.8;
 }
@@ -113,14 +113,14 @@
 
 .stat-text {
   font-size: 0.9rem;
-  color: #666;
+  color: var(--muted) ;
   font-weight: 500;
 }
 
 /* Story Section */
 .story {
   padding: 4rem 0;
-  background: white;
+  background: var(--bg) ;
 }
 
 .story h2 {
@@ -128,7 +128,7 @@
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 3rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .story-content {
@@ -138,7 +138,7 @@
 }
 
 .story-card {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 2.5rem;
   border-radius: 15px;
   text-align: center;
@@ -169,18 +169,18 @@
   font-size: 1.5rem;
   font-weight: 600;
   margin-bottom: 1rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .story-card p {
-  color: #666;
+  color: var(--muted) ;
   line-height: 1.7;
 }
 
 /* Features Deep Dive */
 .features-deep {
   padding: 6rem 0;
-  background: #f8fafc;
+  background: var(--card) ;
 }
 
 .features-deep h2 {
@@ -188,7 +188,7 @@
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 3rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .features-deep-grid {
@@ -198,7 +198,7 @@
 }
 
 .feature-deep {
-  background: white;
+  background: var(--bg) ;
   padding: 2.5rem;
   border-radius: 15px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
@@ -225,12 +225,12 @@
 .feature-deep h3 {
   font-size: 1.3rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin: 0;
 }
 
 .feature-deep p {
-  color: #666;
+  color: var(--muted) ;
   margin-bottom: 1.5rem;
   line-height: 1.7;
 }
@@ -241,7 +241,7 @@
 }
 
 .feature-deep ul li {
-  color: #555;
+  color: var(--text) ;
   margin-bottom: 0.5rem;
   position: relative;
   padding-left: 1.5rem;
@@ -266,7 +266,7 @@
 /* Values Section */
 .values {
   padding: 6rem 0;
-  background: white;
+  background: var(--bg) ;
 }
 
 .values h2 {
@@ -274,7 +274,7 @@
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 3rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .values-grid {
@@ -286,7 +286,7 @@
 .value-item {
   text-align: center;
   padding: 2rem;
-  background: #f8fafc;
+  background: var(--card) ;
   border-radius: 15px;
   transition: all 0.3s ease;
 }
@@ -423,7 +423,7 @@
 
 .btn-primary {
   background: linear-gradient(45deg, #ffd700, #ffed4a);
-  color: #333;
+  color: var(--text) ;
   box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
 }
 
@@ -439,7 +439,7 @@
 }
 
 .btn-secondary:hover {
-  background: white;
+  background: var(--bg) ;
   color: #f5576c;
   transform: translateY(-3px);
 }
diff --git a/client/src/pages/Analytics.css b/client/src/pages/Analytics.css
index e55e514..fd04af9 100644
--- a/client/src/pages/Analytics.css
+++ b/client/src/pages/Analytics.css
@@ -9,7 +9,7 @@
   min-height: 100vh;
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   line-height: 1.6;
-  color: #333;
+  color: var(--text) ;
 }
 
 .container {
@@ -84,7 +84,7 @@
 }
 
 .chart-container {
-  background: white;
+  background: var(--bg) ;
   padding: 2rem;
   border-radius: 16px;
   box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
@@ -95,14 +95,14 @@
 .chart-container h2 {
   margin-bottom: 1rem;
   font-size: 1.4rem;
-  color: #333;
+  color: var(--text) ;
   text-align: center;
 }
 select {
   border: 2px solid #667eea;
   border-radius: 6px;
-  background-color: white;
-  color: #333;
+  background-color: var(--bg) ;
+  color: var(--text) ;
 }
 
 button:hover {
@@ -119,7 +119,7 @@ button:hover {
 .insights-section h2,
 .filter-section h2 {
   margin-bottom: 1rem;
-  color: #444;
+  color: var(--text) ;
 }
 
 .insights-section ul {
@@ -131,7 +131,7 @@ button:hover {
 .filter-section select {
   padding: 0.6rem 1rem;
   font-size: 1rem;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border) ;
   border-radius: 6px;
 }
 
@@ -140,7 +140,7 @@ button:hover {
   padding: 0.8rem 1.5rem;
   font-size: 1rem;
   background-color: #ffd700;
-  color: #333;
+  color: var(--text) ;
   border: none;
   border-radius: 8px;
   cursor: pointer;
@@ -173,7 +173,7 @@ button:hover {
 .insights-section h2,
 .filter-section h2 {
   margin-bottom: 1rem;
-  color: #333;
+  color: var(--text) ;
   font-size: 1.6rem;
   font-weight: 600;
   border-left: 6px solid #ffda00;
@@ -185,7 +185,7 @@ button:hover {
   list-style: none;
   padding-left: 0;
   font-size: 1.1rem;
-  color: #444;
+  color: var(--text) ;
 }
 
 .insights-section ul li {
@@ -208,7 +208,7 @@ button:hover {
   background-color: #fff8d6;
   border: 1px solid #e0c000;
   border-radius: 8px;
-  color: #333;
+  color: var(--text) ;
   outline: none;
   transition: border-color 0.3s ease;
 }
diff --git a/client/src/pages/Contact.css b/client/src/pages/Contact.css
index dcb500b..4e37736 100644
--- a/client/src/pages/Contact.css
+++ b/client/src/pages/Contact.css
@@ -3,7 +3,7 @@
 .contact {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
   line-height: 1.6;
-  color: #333;
+  color: var(--text) ;
 }
 
 .container {
@@ -36,7 +36,7 @@
 /* Main Content */
 .contact-main {
   padding: 80px 0;
-  background: #f8f9fa;
+  background: var(--card) ;
 }
 
 .contact-content {
@@ -48,7 +48,7 @@
 
 /* Contact Form */
 .contact-form-container {
-  background: white;
+  background: var(--bg) ;
   padding: 40px;
   border-radius: 12px;
   box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
@@ -57,7 +57,7 @@
 .contact-form-container h2 {
   font-size: 1.8rem;
   margin-bottom: 30px;
-  color: #333;
+  color: var(--text) ;
 }
 
 .form-group {
@@ -132,14 +132,14 @@
 }
 
 .success-message p {
-  color: #666;
+  color: var(--muted) ;
 }
 
 /* Contact Info */
 .contact-info h2 {
   font-size: 1.8rem;
   margin-bottom: 40px;
-  color: #333;
+  color: var(--text) ;
 }
 
 .info-item {
@@ -156,11 +156,11 @@
   font-size: 1.1rem;
   font-weight: 600;
   margin-bottom: 5px;
-  color: #333;
+  color: var(--text) ;
 }
 
 .info-content p {
-  color: #666;
+  color: var(--muted) ;
   line-height: 1.6;
 }
 
@@ -172,7 +172,7 @@
 .social-links h3 {
   font-size: 1.1rem;
   margin-bottom: 15px;
-  color: #333;
+  color: var(--text) ;
 }
 
 .social-icons {
@@ -194,14 +194,14 @@
 /* FAQ Section */
 .faq-section {
   padding: 80px 0;
-  background: white;
+  background: var(--bg) ;
 }
 
 .faq-section h2 {
   text-align: center;
   font-size: 2.2rem;
   margin-bottom: 50px;
-  color: #333;
+  color: var(--text) ;
 }
 
 .faq-list {
@@ -212,19 +212,19 @@
 .faq-item {
   margin-bottom: 30px;
   padding: 30px;
-  background: #f8f9fa;
+  background: var(--card) ;
   border-radius: 8px;
   border-left: 4px solid #667eea;
 }
 
 .faq-item h3 {
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 10px;
   font-size: 1.1rem;
 }
 
 .faq-item p {
-  color: #666;
+  color: var(--muted) ;
   line-height: 1.6;
 }
 
@@ -256,7 +256,7 @@
 }
 
 .btn-secondary:hover {
-  background: white;
+  background: var(--bg) ;
   color: #1e293b;
   transform: translateY(-2px);
 }
diff --git a/client/src/pages/Contribute.css b/client/src/pages/Contribute.css
index a2ca4e9..0cb8ce1 100644
--- a/client/src/pages/Contribute.css
+++ b/client/src/pages/Contribute.css
@@ -3,7 +3,7 @@
 .contribute {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   line-height: 1.6;
-  color: #333;
+  color: var(--text) ;
 }
 
 .container {
@@ -88,7 +88,7 @@
 /* Project Overview */
 .project-overview {
   padding: 6rem 0;
-  background: #f8fafc;
+  background: var(--card) ;
 }
 
 .overview-content {
@@ -102,12 +102,12 @@
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 2rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .overview-text p {
   font-size: 1.1rem;
-  color: #666;
+  color: var(--muted) ;
   margin-bottom: 1.5rem;
   line-height: 1.8;
 }
@@ -124,14 +124,14 @@
   align-items: center;
   gap: 1rem;
   padding: 1.5rem;
-  background: white;
+  background: var(--bg) ;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
   overflow: hidden;
 }
 
 .steps-nav {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 2rem;
   display: flex;
   flex-direction: column;
@@ -153,8 +153,8 @@
 }
 
 .step-nav-button:hover {
-  background: white;
-  border-color: #e5e7eb;
+  background: var(--bg) ;
+  border-color: var(--border) ;
 }
 
 .step-nav-button.active {
@@ -213,13 +213,13 @@
 .step-header h3 {
   font-size: 2rem;
   font-weight: 700;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 0.5rem;
 }
 
 .step-header p {
   font-size: 1.1rem;
-  color: #666;
+  color: var(--muted) ;
   margin-bottom: 2rem;
 }
 
@@ -276,7 +276,7 @@
 .step-details-list h4 {
   font-size: 1.2rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 1rem;
   margin-top: 2rem;
 }
@@ -287,7 +287,7 @@
 }
 
 .step-details-list li {
-  color: #555;
+  color: var(--text) ;
   margin-bottom: 0.75rem;
   position: relative;
   padding-left: 2rem;
@@ -306,7 +306,7 @@
 /* Tech Stack */
 .tech-stack {
   padding: 6rem 0;
-  background: white;
+  background: var(--bg) ;
 }
 
 .tech-stack h2 {
@@ -314,13 +314,13 @@
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 1rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .tech-subtitle {
   text-align: center;
   font-size: 1.2rem;
-  color: #666;
+  color: var(--muted) ;
   margin-bottom: 4rem;
   max-width: 600px;
   margin-left: auto;
@@ -335,7 +335,7 @@
 }
 
 .tech-category {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 2rem;
   border-radius: 15px;
   border: 2px solid transparent;
@@ -350,7 +350,7 @@
 .category-title {
   font-size: 1.4rem;
   font-weight: 700;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 1.5rem;
   text-align: center;
 }
@@ -366,7 +366,7 @@
   justify-content: space-between;
   align-items: center;
   padding: 1rem;
-  background: white;
+  background: var(--bg) ;
   border-radius: 10px;
   transition: all 0.3s ease;
 }
@@ -384,7 +384,7 @@
 
 .tech-name {
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   font-size: 1rem;
 }
 
@@ -400,13 +400,13 @@
 .tech-description {
   font-size: 0.9rem;
   padding: 0.2rem 0.7rem;
-  color: #666;
+  color: var(--muted) ;
   font-style: italic;
 }
 
 /* Prerequisites */
 .prerequisites {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 3rem;
   border-radius: 20px;
   margin-top: 3rem;
@@ -415,7 +415,7 @@
 .prerequisites h3 {
   font-size: 1.8rem;
   font-weight: 700;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 2rem;
   text-align: center;
 }
@@ -431,7 +431,7 @@
   align-items: flex-start;
   gap: 1rem;
   padding: 1.5rem;
-  background: white;
+  background: var(--bg) ;
   border-radius: 15px;
   transition: all 0.3s ease;
 }
@@ -449,20 +449,20 @@
 .prereq-content h4 {
   font-size: 1.1rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 0.5rem;
 }
 
 .prereq-content p {
   font-size: 0.95rem;
-  color: #666;
+  color: var(--muted) ;
   line-height: 1.6;
 }
 
 /* Code of Conduct */
 .code-of-conduct {
   padding: 6rem 0;
-  background: #f8fafc;
+  background: var(--card) ;
 }
 
 .code-of-conduct h2 {
@@ -470,13 +470,13 @@
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 1rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .conduct-subtitle {
   text-align: center;
   font-size: 1.2rem;
-  color: #666;
+  color: var(--muted) ;
   margin-bottom: 4rem;
   max-width: 700px;
   margin-left: auto;
@@ -495,7 +495,7 @@
   align-items: flex-start;
   gap: 1.5rem;
   padding: 2rem;
-  background: white;
+  background: var(--bg) ;
   border-radius: 15px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease;
@@ -514,12 +514,12 @@
 .rule-content h3 {
   font-size: 1.3rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 0.75rem;
 }
 
 .rule-content p {
-  color: #666;
+  color: var(--muted) ;
   line-height: 1.7;
 }
 
@@ -549,7 +549,7 @@
 /* Community */
 .community {
   padding: 6rem 0;
-  background: white;
+  background: var(--bg) ;
 }
 
 .community h2 {
@@ -557,13 +557,13 @@
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 1rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .community-subtitle {
   text-align: center;
   font-size: 1.2rem;
-  color: #666;
+  color: var(--muted) ;
   margin-bottom: 4rem;
   max-width: 600px;
   margin-left: auto;
@@ -581,7 +581,7 @@
   align-items: center;
   gap: 1.5rem;
   padding: 2rem;
-  background: #f8fafc;
+  background: var(--card) ;
   border-radius: 15px;
   text-decoration: none;
   color: inherit;
@@ -593,11 +593,11 @@
   transform: translateY(-5px);
   border-color: #667eea;
   box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1);
-  background: white;
+  background: var(--bg) ;
 }
 
 .community-link.github:hover {
-  border-color: #333;
+  border-color: var(--text) ;
 }
 
 .community-link.discord:hover {
@@ -624,12 +624,12 @@
 .community-content h3 {
   font-size: 1.3rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 0.5rem;
 }
 
 .community-content p {
-  color: #666;
+  color: var(--muted) ;
   line-height: 1.6;
   margin-bottom: 0;
 }
@@ -645,7 +645,7 @@
 /* Documentation */
 .documentation {
   padding: 6rem 0;
-  background: #f8fafc;
+  background: var(--card) ;
 }
 
 .documentation h2 {
@@ -653,7 +653,7 @@
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 3rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .docs-grid {
@@ -663,7 +663,7 @@
 }
 
 .doc-card {
-  background: white;
+  background: var(--bg) ;
   padding: 2.5rem;
   border-radius: 15px;
   text-align: center;
@@ -687,12 +687,12 @@
 .doc-card h3 {
   font-size: 1.3rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 1rem;
 }
 
 .doc-card p {
-  color: #666;
+  color: var(--muted) ;
   line-height: 1.7;
   margin-bottom: 1.5rem;
 }
@@ -758,7 +758,7 @@
 
 .btn-primary {
   background: linear-gradient(45deg, #ffd700, #ffed4a);
-  color: #333;
+  color: var(--text) ;
   box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
 }
 
@@ -774,7 +774,7 @@
 }
 
 .btn-secondary:hover {
-  background: white;
+  background: var(--bg) ;
   color: #f5576c;
   transform: translateY(-3px);
 }
@@ -1138,7 +1138,7 @@
 
 .impact-desc {
   font-size: 0.9rem;
-  color: #666;
+  color: var(--muted) ;
   font-weight: 500;
 }
 
@@ -1149,7 +1149,7 @@
 }
 
 .contribution-types-preview {
-  background: white;
+  background: var(--bg) ;
   padding: 2rem;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
@@ -1161,7 +1161,7 @@
   font-size: 1.3rem;
   font-weight: 600;
   margin-bottom: 1.5rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .contrib-type-mini {
@@ -1170,7 +1170,7 @@
   gap: 0.75rem;
   padding: 0.75rem;
   margin-bottom: 0.5rem;
-  background: #f8fafc;
+  background: var(--card) ;
   border-radius: 10px;
   transition: all 0.3s ease;
 }
@@ -1203,7 +1203,7 @@
 /* Contribution Types */
 .contribution-types {
   padding: 6rem 0;
-  background: white;
+  background: var(--bg) ;
 }
 
 .contribution-types h2 {
@@ -1211,7 +1211,7 @@
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 3rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .contrib-grid {
@@ -1221,7 +1221,7 @@
 }
 
 .contrib-card {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 2.5rem;
   border-radius: 20px;
   transition: all 0.3s ease;
@@ -1232,7 +1232,7 @@
   transform: translateY(-10px);
   border-color: #667eea;
   box-shadow: 0 20px 50px rgba(102, 126, 234, 0.1);
-  background: white;
+  background: var(--bg) ;
 }
 
 .contrib-header {
@@ -1250,12 +1250,12 @@
 .contrib-header h3 {
   font-size: 1.3rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin: 0;
 }
 
 .contrib-description {
-  color: #666;
+  color: var(--muted) ;
   margin-bottom: 1.5rem;
   line-height: 1.7;
 }
@@ -1263,7 +1263,7 @@
 .contrib-examples h4 {
   font-size: 1rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 0.75rem;
 }
 
@@ -1273,7 +1273,7 @@
 }
 
 .contrib-examples li {
-  color: #555;
+  color: var(--text) ;
   margin-bottom: 0.5rem;
   position: relative;
   padding-left: 1.5rem;
@@ -1290,7 +1290,7 @@
 /* Contribution Guide */
 .contribution-guide {
   padding: 6rem 0;
-  background: #f8fafc;
+  background: var(--card) ;
 }
 
 .contribution-guide h2 {
@@ -1298,13 +1298,13 @@
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 1rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .guide-subtitle {
   text-align: center;
   font-size: 1.2rem;
-  color: #666;
+  color: var(--muted) ;
   margin-bottom: 4rem;
   max-width: 600px;
   margin-left: auto;
@@ -1315,6 +1315,6 @@
   display: grid;
   grid-template-columns: 300px 1fr;
   gap: 3rem;
-  background: white;
+  background: var(--bg) ;
   border-radius: 20px;
 }
\ No newline at end of file
diff --git a/client/src/pages/Faq.css b/client/src/pages/Faq.css
index 81b92f8..cdd4668 100644
--- a/client/src/pages/Faq.css
+++ b/client/src/pages/Faq.css
@@ -7,7 +7,7 @@
 .faq-page {
   font-family: 'Inter', sans-serif;
   line-height: 1.6;
-  color: #333;
+  color: var(--text) ;
 }
 
 /* Hero */
@@ -50,7 +50,7 @@
   margin-top: 100px;
   font-size: 2rem;
   font-weight: 700;
-  color: #333;
+  color: var(--text) ;
   position: relative;
 }
 
@@ -73,7 +73,7 @@
 }
 
 .faq-item {
-  background: #fff;
+  background: var(--bg) ;
   padding: 1.2rem 1.6rem;
   border-radius: 12px;
   box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
@@ -89,7 +89,7 @@
 }
 
 .faq-item.active {
-  background: #f8f8ff;
+  background: var(--card) ;
   border-left: 5px solid #764ba2;
 }
 
@@ -105,7 +105,7 @@
 .faq-answer {
   margin-top: 0.8rem;
   font-size: 0.95rem;
-  color: #555;
+  color: var(--text) ;
   line-height: 1.5;
   animation: fadeIn 0.3s ease-in-out;
 }
@@ -117,7 +117,7 @@
 
 /* Features Section */
 .features-section {
-  background: #fafafa;
+  background: var(--card) ;
   padding: 3.5rem 2rem;
   border-radius: 16px;
   margin: 3rem 1rem 0; /* Adjusted margin */
@@ -132,7 +132,7 @@
 }
 
 .features-list li {
-  background: white;
+  background: var(--bg) ;
   margin: 0.8rem 0;
   padding: 1rem 1.2rem;
   border-radius: 10px;
diff --git a/client/src/pages/Feedback.css b/client/src/pages/Feedback.css
index 3f5383c..62abf3f 100644
--- a/client/src/pages/Feedback.css
+++ b/client/src/pages/Feedback.css
@@ -1,7 +1,7 @@
 .feedback {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   line-height: 1.6;
-  color: #333;
+  color: var(--text) ;
 }
 
 .container {
@@ -57,7 +57,7 @@
 /* Stats Section */
 .feedback-stats {
   padding: 4rem 0;
-  background: #f8fafc;
+  background: var(--card) ;
 }
 
 .stats-grid {
@@ -69,7 +69,7 @@
 .stat-item {
   text-align: center;
   padding: 2rem;
-  background: white;
+  background: var(--bg) ;
   border-radius: 15px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
   transition: all 0.3s ease;
@@ -96,15 +96,15 @@
 
 .stat-label {
   font-size: 1rem;
-  color: #666;
+  color: var(--muted) ;
   font-weight: 500;
 }
 
 /* Filters Section */
 .feedback-filters {
   padding: 3rem 0;
-  background: white;
-  border-bottom: 1px solid #e5e7eb;
+  background: var(--bg) ;
+  border-bottom: 1px solid var(--border);
 }
 
 .filters-wrapper {
@@ -132,7 +132,7 @@
   border: 2px solid #e5e7eb;
   border-radius: 10px;
   font-size: 1rem;
-  background: white;
+  background: var(--bg) ;
   color: #374151;
   transition: all 0.3s ease;
   min-width: 200px;
@@ -147,17 +147,17 @@
 .results-count {
   margin-left: auto;
   font-size: 0.9rem;
-  color: #6b7280;
+  color: var(--muted) ;
   font-weight: 500;
   padding: 0.75rem 1rem;
-  background: #f3f4f6;
+  background: var(--card) ;
   border-radius: 25px;
 }
 
 /* Feedback Content */
 .feedback-content {
   padding: 4rem 0;
-  background: #f8fafc;
+  background: var(--card) ;
 }
 
 .feedback-grid {
@@ -167,7 +167,7 @@
 }
 
 .feedback-card {
-  background: white;
+  background: var(--bg) ;
   border-radius: 20px;
   padding: 2.5rem;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
@@ -196,13 +196,13 @@
 .student-name {
   font-size: 1.4rem;
   font-weight: 700;
-  color: #1f2937;
+  color: var(--text) ;
   margin-bottom: 0.5rem;
 }
 
 .student-details {
   font-size: 0.9rem;
-  color: #6b7280;
+  color: var(--muted) ;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -252,13 +252,13 @@
 .subject-name {
   font-size: 1.5rem;
   font-weight: 700;
-  color: #1f2937;
+  color: var(--text) ;
   margin-bottom: 0.5rem;
 }
 
 .subject-details {
   font-size: 0.95rem;
-  color: #6b7280;
+  color: var(--muted) ;
   display: flex;
   align-items: center;
   gap: 0.5rem;
@@ -294,10 +294,10 @@
 
 .prep-time {
   font-size: 0.9rem;
-  color: #6b7280;
+  color: var(--muted) ;
   font-weight: 600;
   padding: 0.5rem 1rem;
-  background: #f3f4f6;
+  background: var(--card) ;
   border-radius: 20px;
 }
 
@@ -311,7 +311,7 @@
 .detail-section h5 {
   font-size: 1rem;
   font-weight: 700;
-  color: #1f2937;
+  color: var(--text) ;
   margin-bottom: 0.75rem;
   display: flex;
   align-items: center;
@@ -348,7 +348,7 @@
 }
 
 .exam-pattern {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 1rem;
   border-radius: 10px;
   border-left: 4px solid #667eea;
@@ -406,7 +406,7 @@
 
 .btn-primary {
   background: linear-gradient(45deg, #ffd700, #ffed4a);
-  color: #333;
+  color: var(--text) ;
   box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
 }
 
@@ -438,7 +438,7 @@
 }
 
 .modal-content {
-  background: white;
+  background: var(--bg) ;
   padding: 30px;
   border-radius: 12px;
   width: 90%;
@@ -454,7 +454,7 @@
 .modal-content h2 {
   margin-top: 0;
   margin-bottom: 20px;
-  color: #333;
+  color: var(--text) ;
   text-align: center;
 }
 
@@ -477,7 +477,7 @@
   display: block;
   margin-bottom: 5px;
   font-weight: bold;
-  color: #555;
+  color: var(--text) ;
 }
 
 .form-group input,
@@ -485,7 +485,7 @@
 .form-group textarea {
   width: 100%;
   padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border) ;
   border-radius: 6px;
   font-size: 1rem;
   box-sizing: border-box;
@@ -851,7 +851,7 @@
 .loading-state {
   text-align: center;
   padding: 4rem 0;
-  color: #6b7280;
+  color: var(--muted) ;
 }
 
 .loading-spinner {
@@ -872,7 +872,7 @@
 .empty-state {
   text-align: center;
   padding: 4rem 0;
-  color: #6b7280;
+  color: var(--muted) ;
 }
 
 .empty-state h3 {
@@ -910,7 +910,7 @@
   
   .feedback-card {
     box-shadow: none;
-    border: 1px solid #e5e7eb;
+    border: 1px solid var(--border) ;
     page-break-inside: avoid;
     margin-bottom: 2rem;
   }
diff --git a/client/src/pages/Home.css b/client/src/pages/Home.css
index cbdeb36..f926c74 100644
--- a/client/src/pages/Home.css
+++ b/client/src/pages/Home.css
@@ -604,7 +604,7 @@ html[data-theme="dark"] .step { background: #101826; }
 /* CTA-specific button overrides — high specificity to override base .btn-primary on <a> tags */
 .cta .cta-buttons a.btn-primary,
 .cta .cta-buttons .btn-primary {
-  background: #ffffff !important;
+  background: var(--bg) !important;
   color: #4f46e5 !important;
   box-shadow: 0 4px 20px rgba(0,0,0,0.2) !important;
   border-color: transparent !important;
@@ -612,7 +612,7 @@ html[data-theme="dark"] .step { background: #101826; }
 
 .cta .cta-buttons a.btn-primary:hover,
 .cta .cta-buttons .btn-primary:hover {
-  background: #f0f0ff !important;
+  background: var(--card) !important;
   color: #4338ca !important;
   box-shadow: 0 8px 30px rgba(0,0,0,0.25) !important;
 }
diff --git a/client/src/pages/MindMapEditor.css b/client/src/pages/MindMapEditor.css
index a1a8997..446d0a1 100644
--- a/client/src/pages/MindMapEditor.css
+++ b/client/src/pages/MindMapEditor.css
@@ -306,7 +306,7 @@
 }
 
 .react-flow__node-info .info-node, .info-node {
-  background: #fff;
+  background: var(--bg) ;
   color: #111;
   padding: 8px 10px;
   border-radius: 8px;
@@ -316,5 +316,5 @@
 
 /* Waypoint (small draggable connector) */
 .waypoint-node { display:flex; align-items:center; justify-content:center; width:28px; height:28px; }
-.waypoint-dot { width:18px; height:18px; border-radius:50%; background:#fff; border:2px solid var(--accent); box-shadow:0 4px 12px rgba(0,0,0,0.08); }
+.waypoint-dot { width:18px; height:18px; border-radius:50%; background: var(--bg) ; border:2px solid var(--accent); box-shadow:0 4px 12px rgba(0,0,0,0.08); }
 .react-flow__handle { width:10px; height:10px; }
diff --git a/client/src/pages/Notes.css b/client/src/pages/Notes.css
index 4873b2c..533e817 100644
--- a/client/src/pages/Notes.css
+++ b/client/src/pages/Notes.css
@@ -1,7 +1,7 @@
 .notes {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   line-height: 1.6;
-  color: #333;
+  color: var(--text) ;
 }
 
 .container {
@@ -89,9 +89,9 @@
 
 /* Search and Filters */
 .search-filters {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 2rem 0;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid var(--border);
 }
 
 .search-bar {
@@ -110,7 +110,7 @@
   font-size: 1.1rem;
   border: 2px solid #e2e8f0;
   border-radius: 50px;
-  background: white;
+  background: var(--bg) ;
   transition: all 0.3s ease;
   outline: none;
 }
@@ -126,7 +126,7 @@
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.2rem;
-  color: #666;
+  color: var(--muted) ;
 }
 
 .filters {
@@ -153,7 +153,7 @@
   padding: 0.8rem;
   border: 2px solid #e2e8f0;
   border-radius: 8px;
-  background: white;
+  background: var(--bg) ;
   font-size: 1rem;
   color: #374151;
   cursor: pointer;
@@ -168,7 +168,7 @@
 /* Results Section */
 .results {
   padding: 3rem 0;
-  background: white;
+  background: var(--bg) ;
 }
 
 .results-header {
@@ -180,11 +180,11 @@
   font-size: 2rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .results-header p {
-  color: #666;
+  color: var(--muted) ;
   font-size: 1.1rem;
 }
 
@@ -192,7 +192,7 @@
 .no-results {
   text-align: center;
   padding: 4rem 2rem;
-  background: #f8fafc;
+  background: var(--card) ;
   border-radius: 15px;
   margin: 2rem 0;
 }
@@ -210,7 +210,7 @@
 }
 
 .no-results p {
-  color: #6b7280;
+  color: var(--muted) ;
   font-size: 1rem;
 }
 
@@ -223,11 +223,11 @@
 
 /* Note Card */
 .note-card {
-  background: white;
+  background: var(--bg) ;
   border-radius: 15px;
   padding: 2rem;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--border) ;
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
@@ -256,7 +256,7 @@
 .card-title {
   font-size: 1.3rem;
   font-weight: 700;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 0.5rem;
   line-height: 1.4;
 }
@@ -266,7 +266,7 @@
   align-items: center;
   gap: 0.5rem;
   font-size: 0.9rem;
-  color: #666;
+  color: var(--muted) ;
 }
 
 .university {
@@ -279,7 +279,7 @@
 }
 
 .department {
-  color: #6b7280;
+  color: var(--muted) ;
 }
 
 .difficulty-badge {
@@ -323,7 +323,7 @@
   justify-content: space-between;
   margin-bottom: 1.5rem;
   padding: 1rem;
-  background: #f8fafc;
+  background: var(--card) ;
   border-radius: 10px;
   gap: 1rem;
 }
@@ -333,7 +333,7 @@
   align-items: center;
   gap: 0.4rem;
   font-size: 0.85rem;
-  color: #6b7280;
+  color: var(--muted) ;
   flex: 1;
   justify-content: center;
 }
@@ -388,22 +388,22 @@
 
 /* Upload Section */
 .upload-section {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 3rem 1rem;
   text-align: center;
-  border-top: 1px solid #e2e8f0;
+  border-top: 1px solid var(--border);
 }
 
 .upload-section h3 {
   font-size: 1.8rem;
   font-weight: 700;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 1rem;
 }
 
 .upload-section p {
   font-size: 1rem;
-  color: #555;
+  color: var(--text) ;
   margin-bottom: 2rem;
 }
 
@@ -486,7 +486,7 @@
 }
 
 .modal-content {
-  background: #fff;
+  background: var(--bg) ;
   border-radius: 10px;
   padding: 1rem;
   width: 90%;
@@ -550,7 +550,7 @@
   padding: 0.8rem;
   border: 2px solid #e2e8f0;
   border-radius: 8px;
-  background: white;
+  background: var(--bg) ;
   font-size: 1rem;
   color: #374151;
   cursor: pointer;
diff --git a/client/src/pages/PYQs.css b/client/src/pages/PYQs.css
index 48600e2..fc4f939 100644
--- a/client/src/pages/PYQs.css
+++ b/client/src/pages/PYQs.css
@@ -22,7 +22,7 @@
 /* Selection Section */
 .pyqs-selection {
   padding: 40px 20px;
-  background-color: #fff;
+  background-color: var(--bg) ;
 }
 
 .pyqs-form {
@@ -45,7 +45,7 @@
 
 .form-group select {
   padding: 10px;
-  border: 1px solid #ccc;
+  border: 1px solid var(--border) ;
   border-radius: 6px;
   font-size: 1rem;
 }
@@ -53,7 +53,7 @@
 /* Results Section */
 .pyqs-results {
   padding: 40px 20px;
-  background-color: #f8f9fa;
+  background-color: var(--card) ;
   text-align: center;
 }
 
@@ -82,7 +82,7 @@
 
 /* Individual PYQ Card */
 .pyq-card {
-  background-color: #fff;
+  background-color: var(--bg) ;
   padding: 20px;
   border-radius: 12px;
   box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
@@ -98,12 +98,12 @@
 .pyq-card h3 {
   font-size: 1.1rem;
   margin-bottom: 10px;
-  color: #333;
+  color: var(--text) ;
 }
 
 .pyq-card p {
   font-size: 0.95rem;
-  color: #555;
+  color: var(--text) ;
   margin: 4px 0;
 }
 
diff --git a/client/src/pages/Privacy.css b/client/src/pages/Privacy.css
index 2696eba..c4fefaf 100644
--- a/client/src/pages/Privacy.css
+++ b/client/src/pages/Privacy.css
@@ -3,7 +3,7 @@
 .privacy {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   line-height: 1.6;
-  color: #333;
+  color: var(--text) ;
 }
 
 .container {
@@ -75,7 +75,7 @@
 /* Privacy Introduction */
 .privacy-intro {
   padding: 6rem 0;
-  background: #f8fafc;
+  background: var(--card) ;
   text-align: center;
 }
 
@@ -94,19 +94,19 @@
   font-size: 2.5rem;
   font-weight: 700;
   margin-bottom: 2rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .privacy-intro p {
   font-size: 1.2rem;
-  color: #666;
+  color: var(--muted) ;
   line-height: 1.8;
 }
 
 /* Privacy Content Sections */
 .privacy-content {
   padding: 4rem 0;
-  background: white;
+  background: var(--bg) ;
 }
 
 .privacy-section {
@@ -134,7 +134,7 @@
 .section-header h2 {
   font-size: 2rem;
   font-weight: 700;
-  color: #333;
+  color: var(--text) ;
   margin: 0;
 }
 
@@ -144,7 +144,7 @@
 
 .section-content > p {
   font-size: 1.1rem;
-  color: #666;
+  color: var(--muted) ;
   margin-bottom: 2rem;
   line-height: 1.8;
 }
@@ -158,7 +158,7 @@
 }
 
 .info-category {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 2rem;
   border-radius: 15px;
   border-left: 4px solid #667eea;
@@ -167,7 +167,7 @@
 .info-category h3 {
   font-size: 1.3rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 1rem;
 }
 
@@ -177,7 +177,7 @@
 }
 
 .info-category ul li {
-  color: #555;
+  color: var(--text) ;
   margin-bottom: 0.8rem;
   position: relative;
   padding-left: 1.5rem;
@@ -202,7 +202,7 @@
 }
 
 .usage-item {
-  background: white;
+  background: var(--bg) ;
   padding: 2rem;
   border-radius: 15px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
@@ -226,12 +226,12 @@
 .usage-item h3 {
   font-size: 1.3rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 1rem;
 }
 
 .usage-item p {
-  color: #666;
+  color: var(--muted) ;
   line-height: 1.6;
 }
 
@@ -255,12 +255,12 @@
 .note-content h3 {
   font-size: 1.2rem;
   font-weight: 700;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 0.5rem;
 }
 
 .note-content p {
-  color: #555;
+  color: var(--text) ;
   margin: 0;
   line-height: 1.6;
 }
@@ -274,7 +274,7 @@
 }
 
 .sharing-category {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 2rem;
   border-radius: 15px;
   border: 2px solid #e2e8f0;
@@ -302,7 +302,7 @@
 }
 
 .sharing-category ul li {
-  color: #555;
+  color: var(--text) ;
   margin-bottom: 1rem;
   position: relative;
   padding-left: 1.5rem;
@@ -328,7 +328,7 @@
   gap: 1.5rem;
   margin-bottom: 2rem;
   padding: 1.5rem;
-  background: #f8fafc;
+  background: var(--card) ;
   border-radius: 15px;
   border-left: 4px solid #667eea;
 }
@@ -342,12 +342,12 @@
 .guideline-text h3 {
   font-size: 1.2rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 0.5rem;
 }
 
 .guideline-text p {
-  color: #666;
+  color: var(--muted) ;
   margin: 0;
   line-height: 1.6;
 }
@@ -361,7 +361,7 @@
 }
 
 .security-item {
-  background: white;
+  background: var(--bg) ;
   padding: 2rem;
   border-radius: 15px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
@@ -385,12 +385,12 @@
 .security-item h3 {
   font-size: 1.3rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 1rem;
 }
 
 .security-item p {
-  color: #666;
+  color: var(--muted) ;
   line-height: 1.6;
 }
 
@@ -414,7 +414,7 @@
 }
 
 .disclaimer-content p {
-  color: #555;
+  color: var(--text) ;
   margin: 0;
   line-height: 1.6;
 }
@@ -428,7 +428,7 @@
 }
 
 .right-item {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 2rem;
   border-radius: 15px;
   text-align: center;
@@ -467,7 +467,7 @@
 
 /* Contact Info */
 .privacy-contact-info {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 2.5rem;
   border-radius: 15px;
   margin: 2rem 0;
@@ -476,12 +476,12 @@
 .privacy-contact-info h3 {
   font-size: 1.4rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 1rem;
 }
 
 .privacy-contact-info p {
-  color: #666;
+  color: var(--muted) ;
   margin-bottom: 1.5rem;
 }
 
@@ -496,7 +496,7 @@
   align-items: center;
   gap: 1rem;
   padding: 1rem;
-  background: white;
+  background: var(--bg) ;
   border-radius: 10px;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
 }
@@ -517,7 +517,7 @@
   gap: 2rem;
   margin-bottom: 2rem;
   padding: 1.5rem;
-  background: #f8fafc;
+  background: var(--card) ;
   border-radius: 15px;
 }
 
@@ -538,12 +538,12 @@
 .step-content h3 {
   font-size: 1.3rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 0.5rem;
 }
 
 .step-content p {
-  color: #666;
+  color: var(--muted) ;
   margin: 0;
   line-height: 1.6;
 }
@@ -557,7 +557,7 @@
 }
 
 .contact-card {
-  background: white;
+  background: var(--bg) ;
   padding: 2.5rem;
   border-radius: 15px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
@@ -581,12 +581,12 @@
 .contact-card h3 {
   font-size: 1.3rem;
   font-weight: 600;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 1rem;
 }
 
 .contact-card p {
-  color: #666;
+  color: var(--muted) ;
   line-height: 1.6;
   margin-bottom: 0.5rem;
 }
@@ -640,7 +640,7 @@
 
 .btn-primary {
   background: linear-gradient(45deg, #ffd700, #ffed4a);
-  color: #333;
+  color: var(--text) ;
   box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
 }
 
@@ -656,7 +656,7 @@
 }
 
 .btn-secondary:hover {
-  background: white;
+  background: var(--bg) ;
   color: #f5576c;
   transform: translateY(-3px);
 }
diff --git a/client/src/pages/Profile.css b/client/src/pages/Profile.css
index 289b592..16064ed 100644
--- a/client/src/pages/Profile.css
+++ b/client/src/pages/Profile.css
@@ -10,7 +10,7 @@
   padding: 2rem;
   border-radius: 16px;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.07);
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--border) ;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -122,7 +122,7 @@
   justify-content: center;
   text-align: center;
   box-shadow: 0 8px 30px rgba(0, 0, 0, 0.05);
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--border) ;
 }
 
 .content-icon {
diff --git a/client/src/pages/SubmitFeedback.css b/client/src/pages/SubmitFeedback.css
index b63d4e9..19fc32d 100644
--- a/client/src/pages/SubmitFeedback.css
+++ b/client/src/pages/SubmitFeedback.css
@@ -1,5 +1,5 @@
 .submit-feedback-page {
-  background-color: #f8fafc;
+  background-color: var(--card) ;
   padding: 4rem 0;
   min-height: 100vh;
 }
@@ -12,19 +12,19 @@
 .form-header h1 {
   font-size: 2.5rem;
   font-weight: 700;
-  color: #1f2937;
+  color: var(--text) ;
   margin-bottom: 1rem;
 }
 
 .form-header p {
   font-size: 1.1rem;
-  color: #6b7280;
+  color: var(--muted) ;
   max-width: 600px;
   margin: 0 auto;
 }
 
 .feedback-form {
-  background: white;
+  background: var(--bg) ;
   padding: 3rem;
   border-radius: 20px;
   box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
diff --git a/client/src/pages/Syllabus.css b/client/src/pages/Syllabus.css
index 12318ce..5349622 100644
--- a/client/src/pages/Syllabus.css
+++ b/client/src/pages/Syllabus.css
@@ -3,7 +3,7 @@
 .syllabus {
   font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', sans-serif;
   line-height: 1.6;
-  color: #333;
+  color: var(--text) ;
 }
 
 .container {
@@ -91,9 +91,9 @@
 
 /* Search and Filters */
 .search-filters {
-  background: #f8fafc;
+  background: var(--card) ;
   padding: 2rem 0;
-  border-bottom: 1px solid #e2e8f0;
+  border-bottom: 1px solid var(--border);
 }
 
 .search-bar {
@@ -112,7 +112,7 @@
   font-size: 1.1rem;
   border: 2px solid #e2e8f0;
   border-radius: 50px;
-  background: white;
+  background: var(--bg) ;
   transition: all 0.3s ease;
   outline: none;
 }
@@ -128,7 +128,7 @@
   top: 50%;
   transform: translateY(-50%);
   font-size: 1.2rem;
-  color: #666;
+  color: var(--muted) ;
 }
 
 .filters {
@@ -155,7 +155,7 @@
   padding: 0.8rem;
   border: 2px solid #e2e8f0;
   border-radius: 8px;
-  background: white;
+  background: var(--bg) ;
   font-size: 1rem;
   color: #374151;
   cursor: pointer;
@@ -170,7 +170,7 @@
 /* Results Section */
 .results {
   padding: 3rem 0;
-  background: white;
+  background: var(--bg) ;
 }
 
 .results-header {
@@ -182,11 +182,11 @@
   font-size: 2rem;
   font-weight: 700;
   margin-bottom: 0.5rem;
-  color: #333;
+  color: var(--text) ;
 }
 
 .results-header p {
-  color: #666;
+  color: var(--muted) ;
   font-size: 1.1rem;
 }
 
@@ -194,7 +194,7 @@
 .no-results {
   text-align: center;
   padding: 4rem 2rem;
-  background: #f8fafc;
+  background: var(--card) ;
   border-radius: 15px;
   margin: 2rem 0;
 }
@@ -212,7 +212,7 @@
 }
 
 .no-results p {
-  color: #6b7280;
+  color: var(--muted) ;
   font-size: 1rem;
 }
 
@@ -225,11 +225,11 @@
 
 /* Syllabus Card */
 .syllabus-card {
-  background: white;
+  background: var(--bg) ;
   border-radius: 15px;
   padding: 2rem;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
-  border: 1px solid #e2e8f0;
+  border: 1px solid var(--border) ;
   transition: all 0.3s ease;
   display: flex;
   flex-direction: column;
@@ -257,7 +257,7 @@
 .card-title {
   font-size: 1.3rem;
   font-weight: 700;
-  color: #333;
+  color: var(--text) ;
   margin-bottom: 0.5rem;
   line-height: 1.4;
 }
@@ -267,7 +267,7 @@
   align-items: center;
   gap: 0.5rem;
   font-size: 0.9rem;
-  color: #666;
+  color: var(--muted) ;
 }
 
 .university {
@@ -280,7 +280,7 @@
 }
 
 .department {
-  color: #6b7280;
+  color: var(--muted) ;
 }
 
 .difficulty-badge {
@@ -317,13 +317,13 @@
 }
 
 .subject-tag {
-  background: #f3f4f6;
+  background: var(--card) ;
   color: #374151;
   padding: 0.4rem 0.8rem;
   border-radius: 20px;
   font-size: 0.85rem;
   font-weight: 500;
-  border: 1px solid #e5e7eb;
+  border: 1px solid var(--border) ;
 }
 
 .tags-section {
@@ -350,7 +350,7 @@
   justify-content: space-between;
   margin-bottom: 1.5rem;
   padding: 1rem;
-  background: #f8fafc;
+  background: var(--card) ;
   border-radius: 10px;
   gap: 1rem;
 }
@@ -360,7 +360,7 @@
   align-items: center;
   gap: 0.4rem;
   font-size: 0.85rem;
-  color: #6b7280;
+  color: var(--muted) ;
   flex: 1;
   justify-content: center;
 }