diff --git a/client/bun.lock b/client/bun.lock
index c19abf4..60de920 100644
--- a/client/bun.lock
+++ b/client/bun.lock
@@ -5,11 +5,16 @@
     "": {
       "name": "client",
       "dependencies": {
+        "@marsidev/react-turnstile": "^1.5.3",
         "@tailwindcss/vite": "^4.2.2",
         "@tanstack/react-query": "^5.96.2",
         "@tanstack/react-router": "^1.168.7",
         "antd": "^6.3.4",
+        "antd-img-crop": "^4.30.0",
         "axios": "1.14.0",
+        "html2canvas": "^1.4.1",
+        "jspdf": "^4.2.1",
+        "qrcode.react": "^4.2.0",
         "react": "^19.2.4",
         "react-dom": "^19.2.4",
         "react-icons": "^5.6.0",
@@ -132,6 +137,8 @@
 
     "@jridgewell/trace-mapping": ["@jridgewell/trace-mapping@0.3.31", "", { "dependencies": { "@jridgewell/resolve-uri": "^3.1.0", "@jridgewell/sourcemap-codec": "^1.4.14" } }, "sha512-zzNR+SdQSDJzc8joaeP8QQoCQr8NuYx2dIIytl1QeBEZHJ9uW6hebsrYgbz8hJwUQao3TWCMtmfV8Nu1twOLAw=="],
 
+    "@marsidev/react-turnstile": ["@marsidev/react-turnstile@1.5.3", "", { "peerDependencies": { "react": "^17.0.2 || ^18.0.0 || ^19.0", "react-dom": "^17.0.2 || ^18.0.0 || ^19.0" } }, "sha512-8Dij2jiNGNczq1U4EKpO4do2XepcTPxSMc2ZzvHndO+gcp68tvMULm27z2P99rGkdB89hc3452NZeu2Rti4g6A=="],
+
     "@napi-rs/wasm-runtime": ["@napi-rs/wasm-runtime@1.1.1", "", { "dependencies": { "@emnapi/core": "^1.7.1", "@emnapi/runtime": "^1.7.1", "@tybys/wasm-util": "^0.10.1" } }, "sha512-p64ah1M1ld8xjWv3qbvFwHiFVWrq1yFvV4f7w+mzaqiR4IlSgkqhcRdHwsGgomwzBH51sRY4NEowLxnaBjcW/A=="],
 
     "@oxc-project/types": ["@oxc-project/types@0.122.0", "", {}, "sha512-oLAl5kBpV4w69UtFZ9xqcmTi+GENWOcPF7FCrczTiBbmC0ibXxCwyvZGbO39rCVEuLGAZM84DH0pUIyyv/YJzA=="],
@@ -344,10 +351,16 @@
 
     "@types/node": ["@types/node@24.12.0", "", { "dependencies": { "undici-types": "~7.16.0" } }, "sha512-GYDxsZi3ChgmckRT9HPU0WEhKLP08ev/Yfcq2AstjrDASOYCSXeyjDsHg4v5t4jOj7cyDX3vmprafKlWIG9MXQ=="],
 
+    "@types/pako": ["@types/pako@2.0.4", "", {}, "sha512-VWDCbrLeVXJM9fihYodcLiIv0ku+AlOa/TQ1SvYOaBuyrSKgEcro95LJyIsJ4vSo6BXIxOKxiJAat04CmST9Fw=="],
+
+    "@types/raf": ["@types/raf@3.4.3", "", {}, "sha512-c4YAvMedbPZ5tEyxzQdMoOhhJ4RD3rngZIdwC2/qDN3d7JpEhB6fiBRKVY1lg5B7Wk+uPBjn5f39j1/2MY1oOw=="],
+
     "@types/react": ["@types/react@19.2.14", "", { "dependencies": { "csstype": "^3.2.2" } }, "sha512-ilcTH/UniCkMdtexkoCN0bI7pMcJDvmQFPvuPvmEaYA/NSfFTAgdUSLAoVjaRJm7+6PvcM+q1zYOwS4wTYMF9w=="],
 
     "@types/react-dom": ["@types/react-dom@19.2.3", "", { "peerDependencies": { "@types/react": "^19.2.0" } }, "sha512-jp2L/eY6fn+KgVVQAOqYItbF0VY/YApe5Mz2F0aykSO8gx31bYCZyvSeYxCHKvzHG5eZjc+zyaS5BrBWya2+kQ=="],
 
+    "@types/trusted-types": ["@types/trusted-types@2.0.7", "", {}, "sha512-ScaPdn1dQczgbl0QFTeTOmVHFULt394XJgOQNoyVhZ6r2vLnMLJfBPd53SB52T/3G36VI1/g2MZaX0cwDuXsfw=="],
+
     "@typescript-eslint/eslint-plugin": ["@typescript-eslint/eslint-plugin@8.57.2", "", { "dependencies": { "@eslint-community/regexpp": "^4.12.2", "@typescript-eslint/scope-manager": "8.57.2", "@typescript-eslint/type-utils": "8.57.2", "@typescript-eslint/utils": "8.57.2", "@typescript-eslint/visitor-keys": "8.57.2", "ignore": "^7.0.5", "natural-compare": "^1.4.0", "ts-api-utils": "^2.4.0" }, "peerDependencies": { "@typescript-eslint/parser": "^8.57.2", "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-NZZgp0Fm2IkD+La5PR81sd+g+8oS6JwJje+aRWsDocxHkjyRw0J5L5ZTlN3LI1LlOcGL7ph3eaIUmTXMIjLk0w=="],
 
     "@typescript-eslint/parser": ["@typescript-eslint/parser@8.57.2", "", { "dependencies": { "@typescript-eslint/scope-manager": "8.57.2", "@typescript-eslint/types": "8.57.2", "@typescript-eslint/typescript-estree": "8.57.2", "@typescript-eslint/visitor-keys": "8.57.2", "debug": "^4.4.3" }, "peerDependencies": { "eslint": "^8.57.0 || ^9.0.0 || ^10.0.0", "typescript": ">=4.8.4 <6.0.0" } }, "sha512-30ScMRHIAD33JJQkgfGW1t8CURZtjc2JpTrq5n2HFhOefbAhb7ucc7xJwdWcrEtqUIYJ73Nybpsggii6GtAHjA=="],
@@ -380,6 +393,8 @@
 
     "antd": ["antd@6.3.4", "", { "dependencies": { "@ant-design/colors": "^8.0.1", "@ant-design/cssinjs": "^2.1.2", "@ant-design/cssinjs-utils": "^2.1.2", "@ant-design/fast-color": "^3.0.1", "@ant-design/icons": "^6.1.0", "@ant-design/react-slick": "~2.0.0", "@babel/runtime": "^7.28.4", "@rc-component/cascader": "~1.14.0", "@rc-component/checkbox": "~2.0.0", "@rc-component/collapse": "~1.2.0", "@rc-component/color-picker": "~3.1.1", "@rc-component/dialog": "~1.8.4", "@rc-component/drawer": "~1.4.2", "@rc-component/dropdown": "~1.0.2", "@rc-component/form": "~1.8.0", "@rc-component/image": "~1.8.0", "@rc-component/input": "~1.1.2", "@rc-component/input-number": "~1.6.2", "@rc-component/mentions": "~1.6.0", "@rc-component/menu": "~1.2.0", "@rc-component/motion": "^1.3.1", "@rc-component/mutate-observer": "^2.0.1", "@rc-component/notification": "~1.2.0", "@rc-component/pagination": "~1.2.0", "@rc-component/picker": "~1.9.1", "@rc-component/progress": "~1.0.2", "@rc-component/qrcode": "~1.1.1", "@rc-component/rate": "~1.0.1", "@rc-component/resize-observer": "^1.1.1", "@rc-component/segmented": "~1.3.0", "@rc-component/select": "~1.6.15", "@rc-component/slider": "~1.0.1", "@rc-component/steps": "~1.2.2", "@rc-component/switch": "~1.0.3", "@rc-component/table": "~1.9.1", "@rc-component/tabs": "~1.7.0", "@rc-component/textarea": "~1.1.2", "@rc-component/tooltip": "~1.4.0", "@rc-component/tour": "~2.3.0", "@rc-component/tree": "~1.2.4", "@rc-component/tree-select": "~1.8.0", "@rc-component/trigger": "^3.9.0", "@rc-component/upload": "~1.1.0", "@rc-component/util": "^1.10.0", "clsx": "^2.1.1", "dayjs": "^1.11.11", "scroll-into-view-if-needed": "^3.1.0", "throttle-debounce": "^5.0.2" }, "peerDependencies": { "react": ">=18.0.0", "react-dom": ">=18.0.0" } }, "sha512-Bu6JivPP7bFfYIdVj+61dxhwSOz+A3m0W7PlDasFGC3H3sNMYQ9gJXZoo11/rQh7pTlOQa351q5Ig/zjI98XYw=="],
 
+    "antd-img-crop": ["antd-img-crop@4.30.0", "", { "dependencies": { "react-easy-crop": "^5.5.6", "tslib": "^2.8.1" }, "peerDependencies": { "antd": ">=4.0.0", "react": ">=16.8.0", "react-dom": ">=16.8.0" } }, "sha512-fjpwyCNKtKr22AQcENBix5Y+P8ECM80Ivk/Yn7kF9D0XltYBGJHg+3yycxcGq7ATgnl7pgPYDvN2VzKleogCLQ=="],
+
     "argparse": ["argparse@2.0.1", "", {}, "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q=="],
 
     "asynckit": ["asynckit@0.4.0", "", {}, "sha512-Oei9OH4tRh0YqU3GxhX79dM/mwVgvbZJaSNaRk+bshkj0S5cfHcgYakreBjrHwatXKbz+IoIdYLxrKim2MjW0Q=="],
@@ -390,6 +405,8 @@
 
     "balanced-match": ["balanced-match@1.0.2", "", {}, "sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw=="],
 
+    "base64-arraybuffer": ["base64-arraybuffer@1.0.2", "", {}, "sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ=="],
+
     "baseline-browser-mapping": ["baseline-browser-mapping@2.10.11", "", { "bin": { "baseline-browser-mapping": "dist/cli.cjs" } }, "sha512-DAKrHphkJyiGuau/cFieRYhcTFeK/lBuD++C7cZ6KZHbMhBrisoi+EvhQ5RZrIfV5qwsW8kgQ07JIC+MDJRAhg=="],
 
     "brace-expansion": ["brace-expansion@1.1.13", "", { "dependencies": { "balanced-match": "^1.0.0", "concat-map": "0.0.1" } }, "sha512-9ZLprWS6EENmhEOpjCYW2c8VkmOvckIJZfkr7rBW6dObmfgJ/L1GpSYW5Hpo9lDz4D1+n0Ckz8rU7FwHDQiG/w=="],
@@ -402,6 +419,8 @@
 
     "caniuse-lite": ["caniuse-lite@1.0.30001781", "", {}, "sha512-RdwNCyMsNBftLjW6w01z8bKEvT6e/5tpPVEgtn22TiLGlstHOVecsX2KHFkD5e/vRnIE4EGzpuIODb3mtswtkw=="],
 
+    "canvg": ["canvg@3.0.11", "", { "dependencies": { "@babel/runtime": "^7.12.5", "@types/raf": "^3.4.0", "core-js": "^3.8.3", "raf": "^3.4.1", "regenerator-runtime": "^0.13.7", "rgbcolor": "^1.0.1", "stackblur-canvas": "^2.0.0", "svg-pathdata": "^6.0.3" } }, "sha512-5ON+q7jCTgMp9cjpu4Jo6XbvfYwSB2Ow3kzHKfIyJfaCAOHLbdKPQqGKgfED/R5B+3TFFfe8pegYA+b423SRyA=="],
+
     "chalk": ["chalk@4.1.2", "", { "dependencies": { "ansi-styles": "^4.1.0", "supports-color": "^7.1.0" } }, "sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA=="],
 
     "chokidar": ["chokidar@4.0.3", "", { "dependencies": { "readdirp": "^4.0.1" } }, "sha512-Qgzu8kfBvo+cA4962jnP1KkS6Dop5NS6g7R5LFYJr4b8Ub94PPQXUksCw9PvXoeXPRRddRNC5C1JQUR2SMGtnA=="],
@@ -422,8 +441,12 @@
 
     "cookie-es": ["cookie-es@2.0.0", "", {}, "sha512-RAj4E421UYRgqokKUmotqAwuplYw15qtdXfY+hGzgCJ/MBjCVZcSoHK/kH9kocfjRjcDME7IiDWR/1WX1TM2Pg=="],
 
+    "core-js": ["core-js@3.49.0", "", {}, "sha512-es1U2+YTtzpwkxVLwAFdSpaIMyQaq0PBgm3YD1W3Qpsn1NAmO3KSgZfu+oGSWVu6NvLHoHCV/aYcsE5wiB7ALg=="],
+
     "cross-spawn": ["cross-spawn@7.0.6", "", { "dependencies": { "path-key": "^3.1.0", "shebang-command": "^2.0.0", "which": "^2.0.1" } }, "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA=="],
 
+    "css-line-break": ["css-line-break@2.1.0", "", { "dependencies": { "utrie": "^1.0.2" } }, "sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w=="],
+
     "csstype": ["csstype@3.2.3", "", {}, "sha512-z1HGKcYy2xA8AGQfwrn0PAy+PB7X/GSj3UVJW9qKyn43xWa+gl5nXmU4qqLMRzWVLFC8KusUX8T/0kCiOYpAIQ=="],
 
     "dayjs": ["dayjs@1.11.20", "", {}, "sha512-YbwwqR/uYpeoP4pu043q+LTDLFBLApUP6VxRihdfNTqu4ubqMlGDLd6ErXhEgsyvY0K6nCs7nggYumAN+9uEuQ=="],
@@ -436,6 +459,8 @@
 
     "detect-libc": ["detect-libc@2.1.2", "", {}, "sha512-Btj2BOOO83o3WyH59e8MgXsxEQVcarkUOpEYrubB0urwnN10yQ364rsiByU11nZlqWYZm05i/of7io4mzihBtQ=="],
 
+    "dompurify": ["dompurify@3.4.8", "", { "optionalDependencies": { "@types/trusted-types": "^2.0.7" } }, "sha512-yb1cEmaOum7wFvOCSQxyfgVlv5D47Rc30iZWoMpbDIWTnJ6grDDQyu2KFJzB2k7u0pMuJcQ1zphH//fFnw2tjQ=="],
+
     "dunder-proto": ["dunder-proto@1.0.1", "", { "dependencies": { "call-bind-apply-helpers": "^1.0.1", "es-errors": "^1.3.0", "gopd": "^1.2.0" } }, "sha512-KIN/nDJBQRcXw0MLVhZE9iQHmG68qAVIBg9CqmUYjmQIhgij9U5MFvrqkUL5FbtyyzZuOeOt0zdeRe4UY7ct+A=="],
 
     "electron-to-chromium": ["electron-to-chromium@1.5.328", "", {}, "sha512-QNQ5l45DzYytThO21403XN3FvK0hOkWDG8viNf6jqS42msJ8I4tGDSpBCgvDRRPnkffafiwAym2X2eHeGD2V0w=="],
@@ -480,8 +505,12 @@
 
     "fast-levenshtein": ["fast-levenshtein@2.0.6", "", {}, "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw=="],
 
+    "fast-png": ["fast-png@6.4.0", "", { "dependencies": { "@types/pako": "^2.0.3", "iobuffer": "^5.3.2", "pako": "^2.1.0" } }, "sha512-kAqZq1TlgBjZcLr5mcN6NP5Rv4V2f22z00c3g8vRrwkcqjerx7BEhPbOnWCPqaHUl2XWQBJQvOT/FQhdMT7X/Q=="],
+
     "fdir": ["fdir@6.5.0", "", { "peerDependencies": { "picomatch": "^3 || ^4" }, "optionalPeers": ["picomatch"] }, "sha512-tIbYtZbucOs0BRGqPJkshJUYdL+SDH7dVM8gjy+ERp3WAUjLEFJE+02kanyHtwjWOnwrKYBiwAmM0p4kLJAnXg=="],
 
+    "fflate": ["fflate@0.8.3", "", {}, "sha512-tbZNuJrLwGUp3zshBtdy4W+ORxZuIh8a5ilyIEQDC5rY1f3U20JMry0Ll3WBzU58EZKsEuJFXhb5gwv8CsPvgA=="],
+
     "file-entry-cache": ["file-entry-cache@8.0.0", "", { "dependencies": { "flat-cache": "^4.0.0" } }, "sha512-XXTUwCvisa5oacNGRP9SfNtYBNAMi+RPwBFmblZEF7N7swHYQS6/Zfk7SRwx4D5j3CH211YNRco1DEMNVfZCnQ=="],
 
     "find-up": ["find-up@5.0.0", "", { "dependencies": { "locate-path": "^6.0.0", "path-exists": "^4.0.0" } }, "sha512-78/PXT1wlLLDgTzDs7sjq9hzz0vXD+zn+7wypEe4fXQxCmdmqfGsEPQxmiCSQI3ajFV91bVSsvNtrJRiW6nGng=="],
@@ -524,6 +553,8 @@
 
     "hermes-parser": ["hermes-parser@0.25.1", "", { "dependencies": { "hermes-estree": "0.25.1" } }, "sha512-6pEjquH3rqaI6cYAXYPcz9MS4rY6R4ngRgrgfDshRptUZIc3lw0MCIJIGDj9++mfySOuPTHB4nrSW99BCvOPIA=="],
 
+    "html2canvas": ["html2canvas@1.4.1", "", { "dependencies": { "css-line-break": "^2.1.0", "text-segmentation": "^1.0.3" } }, "sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA=="],
+
     "ignore": ["ignore@5.3.2", "", {}, "sha512-hsBTNUqQTDwkWtcdYI2i06Y/nUBEsNEDJKjWdigLvegy8kDuJAS8uRlpkkcQpyEXL0Z/pjDy5HBmMjRCJ2gq+g=="],
 
     "immutable": ["immutable@5.1.5", "", {}, "sha512-t7xcm2siw+hlUM68I+UEOK+z84RzmN59as9DZ7P1l0994DKUWV7UXBMQZVxaoMSRQ+PBZbHCOoBt7a2wxOMt+A=="],
@@ -532,6 +563,8 @@
 
     "imurmurhash": ["imurmurhash@0.1.4", "", {}, "sha512-JmXMZ6wuvDmLiHEml9ykzqO6lwFbof0GG4IkcGaENdCRDDmMVnny7s5HsIgHCbaq0w2MyPhDqkhTUgS2LU2PHA=="],
 
+    "iobuffer": ["iobuffer@5.4.0", "", {}, "sha512-DRebOWuqDvxunfkNJAlc3IzWIPD5xVxwUNbHr7xKB8E6aLJxIPfNX3CoMJghcFjpv6RWQsrcJbghtEwSPoJqMA=="],
+
     "is-extglob": ["is-extglob@2.1.1", "", {}, "sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ=="],
 
     "is-glob": ["is-glob@4.0.3", "", { "dependencies": { "is-extglob": "^2.1.1" } }, "sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg=="],
@@ -560,6 +593,8 @@
 
     "json5": ["json5@2.2.3", "", { "bin": { "json5": "lib/cli.js" } }, "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg=="],
 
+    "jspdf": ["jspdf@4.2.1", "", { "dependencies": { "@babel/runtime": "^7.28.6", "fast-png": "^6.2.0", "fflate": "^0.8.1" }, "optionalDependencies": { "canvg": "^3.0.11", "core-js": "^3.6.0", "dompurify": "^3.3.1", "html2canvas": "^1.0.0-rc.5" } }, "sha512-YyAXyvnmjTbR4bHQRLzex3CuINCDlQnBqoSYyjJwTP2x9jDLuKDzy7aKUl0hgx3uhcl7xzg32agn5vlie6HIlQ=="],
+
     "keyv": ["keyv@4.5.4", "", { "dependencies": { "json-buffer": "3.0.1" } }, "sha512-oxVHkHR/EJf2CNXnWxRLW6mg7JyCCUcG0DtEGmL2ctUo1PNTin1PUil+r/+4r5MpVgC/fn1kjsx7mjSujKqIpw=="],
 
     "levn": ["levn@0.4.1", "", { "dependencies": { "prelude-ls": "^1.2.1", "type-check": "~0.4.0" } }, "sha512-+bT2uH4E5LGE7h/n3evcS/sQlJXCpIp6ym8OWJ5eV6+67Dsql/LaaT7qJBAt2rzfoa/5QBGBhxDix1dMt2kQKQ=="],
@@ -614,18 +649,24 @@
 
     "node-releases": ["node-releases@2.0.36", "", {}, "sha512-TdC8FSgHz8Mwtw9g5L4gR/Sh9XhSP/0DEkQxfEFXOpiul5IiHgHan2VhYYb6agDSfp4KuvltmGApc8HMgUrIkA=="],
 
+    "normalize-wheel": ["normalize-wheel@1.0.1", "", {}, "sha512-1OnlAPZ3zgrk8B91HyRj+eVv+kS5u+Z0SCsak6Xil/kmgEia50ga7zfkumayonZrImffAxPU/5WcyGhzetHNPA=="],
+
     "optionator": ["optionator@0.9.4", "", { "dependencies": { "deep-is": "^0.1.3", "fast-levenshtein": "^2.0.6", "levn": "^0.4.1", "prelude-ls": "^1.2.1", "type-check": "^0.4.0", "word-wrap": "^1.2.5" } }, "sha512-6IpQ7mKUxRcZNLIObR0hz7lxsapSSIYNZJwXPGeF0mTVqGKFIXj1DQcMoT22S3ROcLyY/rz0PWaWZ9ayWmad9g=="],
 
     "p-limit": ["p-limit@3.1.0", "", { "dependencies": { "yocto-queue": "^0.1.0" } }, "sha512-TYOanM3wGwNGsZN2cVTYPArw454xnXj5qmWF1bEoAc4+cU/ol7GVh7odevjp1FNHduHc3KZMcFduxU5Xc6uJRQ=="],
 
     "p-locate": ["p-locate@5.0.0", "", { "dependencies": { "p-limit": "^3.0.2" } }, "sha512-LaNjtRWUBY++zB5nE/NwcaoMylSPk+S+ZHNB1TzdbMJMny6dynpAGt7X/tl/QYq3TIeE6nxHppbo2LGymrG5Pw=="],
 
+    "pako": ["pako@2.1.0", "", {}, "sha512-w+eufiZ1WuJYgPXbV/PO3NCMEc3xqylkKHzp8bxp1uW4qaSNQUkwmLLEc3kKsfz8lpV1F8Ht3U1Cm+9Srog2ug=="],
+
     "parent-module": ["parent-module@1.0.1", "", { "dependencies": { "callsites": "^3.0.0" } }, "sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g=="],
 
     "path-exists": ["path-exists@4.0.0", "", {}, "sha512-ak9Qy5Q7jYb2Wwcey5Fpvg2KoAc/ZIhLSLOSBmRmygPsGwkVVt0fZa0qrtMz+m6tJTAHfZQ8FnmB4MG4LWy7/w=="],
 
     "path-key": ["path-key@3.1.1", "", {}, "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q=="],
 
+    "performance-now": ["performance-now@2.1.0", "", {}, "sha512-7EAHlyLHI56VEIdK57uwHdHKIaAGbnXPiw0yWbarQZOKaKpvUIgW0jWRVLiatnM+XXlSwsanIBH/hzGMJulMow=="],
+
     "picocolors": ["picocolors@1.1.1", "", {}, "sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA=="],
 
     "picomatch": ["picomatch@4.0.4", "", {}, "sha512-QP88BAKvMam/3NxH6vj2o21R6MjxZUAd6nlwAS/pnGvN9IVLocLHxGYIzFhg6fUQ+5th6P4dv4eW9jX3DSIj7A=="],
@@ -638,18 +679,28 @@
 
     "punycode": ["punycode@2.3.1", "", {}, "sha512-vYt7UD1U9Wg6138shLtLOvdAu+8DsC/ilFtEVHcH+wydcSpNE20AfSOduf6MkRFahL5FY7X1oU7nKVZFtfq8Fg=="],
 
+    "qrcode.react": ["qrcode.react@4.2.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-QpgqWi8rD9DsS9EP3z7BT+5lY5SFhsqGjpgW5DY/i3mK4M9DTBNz3ErMi8BWYEfI3L0d8GIbGmcdFAS1uIRGjA=="],
+
+    "raf": ["raf@3.4.1", "", { "dependencies": { "performance-now": "^2.1.0" } }, "sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA=="],
+
     "react": ["react@19.2.4", "", {}, "sha512-9nfp2hYpCwOjAN+8TZFGhtWEwgvWHXqESH8qT89AT/lWklpLON22Lc8pEtnpsZz7VmawabSU0gCjnj8aC0euHQ=="],
 
     "react-dom": ["react-dom@19.2.4", "", { "dependencies": { "scheduler": "^0.27.0" }, "peerDependencies": { "react": "^19.2.4" } }, "sha512-AXJdLo8kgMbimY95O2aKQqsz2iWi9jMgKJhRBAxECE4IFxfcazB2LmzloIoibJI3C12IlY20+KFaLv+71bUJeQ=="],
 
+    "react-easy-crop": ["react-easy-crop@5.5.7", "", { "dependencies": { "normalize-wheel": "^1.0.1", "tslib": "^2.0.1" }, "peerDependencies": { "react": ">=16.4.0", "react-dom": ">=16.4.0" } }, "sha512-kYo4NtMeXFQB7h1U+h5yhUkE46WQbQdq7if54uDlbMdZHdRgNehfvaFrXnFw5NR1PNoUOJIfTwLnWmEx/MaZnA=="],
+
     "react-icons": ["react-icons@5.6.0", "", { "peerDependencies": { "react": "*" } }, "sha512-RH93p5ki6LfOiIt0UtDyNg/cee+HLVR6cHHtW3wALfo+eOHTp8RnU2kRkI6E+H19zMIs03DyxUG/GfZMOGvmiA=="],
 
     "react-is": ["react-is@18.3.1", "", {}, "sha512-/LLMVyas0ljjAtoYiPqYiL8VWXzUUdThrmU5+n20DZv+a+ClRoevUzw5JxU+Ieh5/c87ytoTBV9G1FiKfNJdmg=="],
 
     "readdirp": ["readdirp@4.1.2", "", {}, "sha512-GDhwkLfywWL2s6vEjyhri+eXmfH6j1L7JE27WhqLeYzoh/A3DBaYGEj2H/HFZCn/kMfim73FXxEJTw06WtxQwg=="],
 
+    "regenerator-runtime": ["regenerator-runtime@0.13.11", "", {}, "sha512-kY1AZVr2Ra+t+piVaJ4gxaFaReZVH40AKNo7UCX6W+dEwBo/2oZJzqfuN1qLq1oL45o56cPaTXELwrTh8Fpggg=="],
+
     "resolve-from": ["resolve-from@4.0.0", "", {}, "sha512-pb/MYmXstAkysRFx8piNI1tGFNQIFA3vkE3Gq4EuA1dF6gHp/+vgZqsCGJapvy8N3Q+4o7FwvquPJcnZ7RYy4g=="],
 
+    "rgbcolor": ["rgbcolor@1.0.1", "", {}, "sha512-9aZLIrhRaD97sgVhtJOW6ckOEh6/GnvQtdVNfdZ6s67+3/XwLS9lBcQYzEEhYVeUowN7pRzMLsyGhK2i/xvWbw=="],
+
     "rolldown": ["rolldown@1.0.0-rc.12", "", { "dependencies": { "@oxc-project/types": "=0.122.0", "@rolldown/pluginutils": "1.0.0-rc.12" }, "optionalDependencies": { "@rolldown/binding-android-arm64": "1.0.0-rc.12", "@rolldown/binding-darwin-arm64": "1.0.0-rc.12", "@rolldown/binding-darwin-x64": "1.0.0-rc.12", "@rolldown/binding-freebsd-x64": "1.0.0-rc.12", "@rolldown/binding-linux-arm-gnueabihf": "1.0.0-rc.12", "@rolldown/binding-linux-arm64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-arm64-musl": "1.0.0-rc.12", "@rolldown/binding-linux-ppc64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-s390x-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-x64-gnu": "1.0.0-rc.12", "@rolldown/binding-linux-x64-musl": "1.0.0-rc.12", "@rolldown/binding-openharmony-arm64": "1.0.0-rc.12", "@rolldown/binding-wasm32-wasi": "1.0.0-rc.12", "@rolldown/binding-win32-arm64-msvc": "1.0.0-rc.12", "@rolldown/binding-win32-x64-msvc": "1.0.0-rc.12" }, "bin": { "rolldown": "bin/cli.mjs" } }, "sha512-yP4USLIMYrwpPHEFB5JGH1uxhcslv6/hL0OyvTuY+3qlOSJvZ7ntYnoWpehBxufkgN0cvXxppuTu5hHa/zPh+A=="],
 
     "sass": ["sass@1.98.0", "", { "dependencies": { "chokidar": "^4.0.0", "immutable": "^5.1.5", "source-map-js": ">=0.6.2 <2.0.0" }, "optionalDependencies": { "@parcel/watcher": "^2.4.1" }, "bin": { "sass": "sass.js" } }, "sha512-+4N/u9dZ4PrgzGgPlKnaaRQx64RO0JBKs9sDhQ2pLgN6JQZ25uPQZKQYaBJU48Kd5BxgXoJ4e09Dq7nMcOUW3A=="],
@@ -670,6 +721,8 @@
 
     "source-map-js": ["source-map-js@1.2.1", "", {}, "sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA=="],
 
+    "stackblur-canvas": ["stackblur-canvas@2.7.0", "", {}, "sha512-yf7OENo23AGJhBriGx0QivY5JP6Y1HbrrDI6WLt6C5auYZXlQrheoY8hD4ibekFKz1HOfE48Ww8kMWMnJD/zcQ=="],
+
     "string-convert": ["string-convert@0.2.1", "", {}, "sha512-u/1tdPl4yQnPBjnVrmdLo9gtuLvELKsAoRapekWggdiQNvvvum+jYF329d84NAa660KQw7pB2n36KrIKVoXa3A=="],
 
     "strip-json-comments": ["strip-json-comments@3.1.1", "", {}, "sha512-6fPc+R4ihwqP6N/aIv2f1gMH8lOVtWQHoqC4yK6oSDVVocumAsfCqjkXnqiYMhmMwS/mEHLp7Vehlt3ql6lEig=="],
@@ -678,10 +731,14 @@
 
     "supports-color": ["supports-color@7.2.0", "", { "dependencies": { "has-flag": "^4.0.0" } }, "sha512-qpCAvRl9stuOHveKsn7HncJRvv501qIacKzQlO/+Lwxc9+0q2wLyv4Dfvt80/DPn2pqOBsJdDiogXGR9+OvwRw=="],
 
+    "svg-pathdata": ["svg-pathdata@6.0.3", "", {}, "sha512-qsjeeq5YjBZ5eMdFuUa4ZosMLxgr5RZ+F+Y1OrDhuOCEInRMA3x74XdBtggJcj9kOeInz0WE+LgCPDkZFlBYJw=="],
+
     "tailwindcss": ["tailwindcss@4.2.2", "", {}, "sha512-KWBIxs1Xb6NoLdMVqhbhgwZf2PGBpPEiwOqgI4pFIYbNTfBXiKYyWoTsXgBQ9WFg/OlhnvHaY+AEpW7wSmFo2Q=="],
 
     "tapable": ["tapable@2.3.2", "", {}, "sha512-1MOpMXuhGzGL5TTCZFItxCc0AARf1EZFQkGqMm7ERKj8+Hgr5oLvJOVFcC+lRmR8hCe2S3jC4T5D7Vg/d7/fhA=="],
 
+    "text-segmentation": ["text-segmentation@1.0.3", "", { "dependencies": { "utrie": "^1.0.2" } }, "sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw=="],
+
     "throttle-debounce": ["throttle-debounce@5.0.2", "", {}, "sha512-B71/4oyj61iNH0KeCamLuE2rmKuTO5byTOSVwECM5FA7TiAiAW+UqTKZ9ERueC4qvgSttUhdmq1mXC3kJqGX7A=="],
 
     "tinyglobby": ["tinyglobby@0.2.15", "", { "dependencies": { "fdir": "^6.5.0", "picomatch": "^4.0.3" } }, "sha512-j2Zq4NyQYG5XMST4cbs02Ak8iJUdxRM0XI5QyxXuZOzKOINmWurp3smXu3y5wDcJrptwpSjgXHzIQxR0omXljQ=="],
@@ -704,6 +761,8 @@
 
     "use-sync-external-store": ["use-sync-external-store@1.6.0", "", { "peerDependencies": { "react": "^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0" } }, "sha512-Pp6GSwGP/NrPIrxVFAIkOQeyw8lFenOHijQWkUTrDvrF4ALqylP2C/KCkeS9dpUM3KvYRQhna5vt7IL95+ZQ9w=="],
 
+    "utrie": ["utrie@1.0.2", "", { "dependencies": { "base64-arraybuffer": "^1.0.2" } }, "sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw=="],
+
     "vite": ["vite@8.0.3", "", { "dependencies": { "lightningcss": "^1.32.0", "picomatch": "^4.0.4", "postcss": "^8.5.8", "rolldown": "1.0.0-rc.12", "tinyglobby": "^0.2.15" }, "optionalDependencies": { "fsevents": "~2.3.3" }, "peerDependencies": { "@types/node": "^20.19.0 || >=22.12.0", "@vitejs/devtools": "^0.1.0", "esbuild": "^0.27.0", "jiti": ">=1.21.0", "less": "^4.0.0", "sass": "^1.70.0", "sass-embedded": "^1.70.0", "stylus": ">=0.54.8", "sugarss": "^5.0.0", "terser": "^5.16.0", "tsx": "^4.8.1", "yaml": "^2.4.2" }, "optionalPeers": ["@types/node", "@vitejs/devtools", "esbuild", "jiti", "less", "sass", "sass-embedded", "stylus", "sugarss", "terser", "tsx", "yaml"], "bin": { "vite": "bin/vite.js" } }, "sha512-B9ifbFudT1TFhfltfaIPgjo9Z3mDynBTJSUYxTjOQruf/zHH+ezCQKcoqO+h7a9Pw9Nm/OtlXAiGT1axBgwqrQ=="],
 
     "which": ["which@2.0.2", "", { "dependencies": { "isexe": "^2.0.0" }, "bin": { "node-which": "./bin/node-which" } }, "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA=="],
diff --git a/client/package.json b/client/package.json
index a5c1067..5c48a33 100644
--- a/client/package.json
+++ b/client/package.json
@@ -10,6 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@marsidev/react-turnstile": "^1.5.3",
     "@tailwindcss/vite": "^4.2.2",
     "@tanstack/react-query": "^5.96.2",
     "@tanstack/react-router": "^1.168.7",
diff --git a/client/src/features/auth/hooks.ts b/client/src/features/auth/hooks.ts
index 99423b6..c163656 100644
--- a/client/src/features/auth/hooks.ts
+++ b/client/src/features/auth/hooks.ts
@@ -5,7 +5,7 @@ import { queryClient } from "../../main";
 
 // Login
 export const useSignin = () => useMutation({
-    mutationFn: async (data: { email: string; password: string; twoFactorCode?: string }) => {
+    mutationFn: async (data: { email: string; password: string; twoFactorCode?: string; turnstileToken?: string | null }) => {
         const response = await axiosInstance.post("/auth/login", data);
         return response.data;
     },
@@ -13,7 +13,7 @@ export const useSignin = () => useMutation({
 
 // Register
 export const useSignup = () => useMutation({
-    mutationFn: async (data: { email: string; password: string; username: string }) => {
+    mutationFn: async (data: { email: string; password: string; username: string; turnstileToken?: string | null }) => {
         const response = await axiosInstance.post("/auth/register", data);
         return response.data;
     },
diff --git a/client/src/features/auth/login.tsx b/client/src/features/auth/login.tsx
index ac3da9a..3a1bf98 100644
--- a/client/src/features/auth/login.tsx
+++ b/client/src/features/auth/login.tsx
@@ -14,11 +14,12 @@ export const LoginPage = () => {
     const [errorMsg, setErrorMsg] = useState<string | null>(null);
     const [twoFactorStep, setTwoFactorStep] = useState(false);
     const [credentials, setCredentials] = useState<{ email: string; password: string } | null>(null);
+    const [turnstileReset, setTurnstileReset] = useState(0);
 
-    const handleSubmit = (values: { email: string; password: string; remember: boolean }) => {
+    const handleSubmit = (values: { email: string; password: string; remember: boolean; turnstileToken: string | null }) => {
         setErrorMsg(null);
         signin(
-            { email: values.email, password: values.password },
+            { email: values.email, password: values.password, turnstileToken: values.turnstileToken },
             {
                 onSuccess: data => {
                     if (data?.twoFactorRequired) {
@@ -30,6 +31,7 @@ export const LoginPage = () => {
                     navigate({ to: "/" });
                 },
                 onError: error => {
+                    setTurnstileReset(n => n + 1);
                     const e = error as { response?: { data?: { message?: string } } };
                     setErrorMsg(e.response?.data?.message ?? "Invalid email or password. Please try again.");
                 },
@@ -86,6 +88,7 @@ export const LoginPage = () => {
                             errorMsg={errorMsg}
                             onSubmit={handleSubmit}
                             onValuesChange={() => setErrorMsg(null)}
+                            resetSignal={turnstileReset}
                         />
                     )}
                 </div>
diff --git a/client/src/features/auth/login/LoginForm.tsx b/client/src/features/auth/login/LoginForm.tsx
index 535a341..e6c9d9c 100644
--- a/client/src/features/auth/login/LoginForm.tsx
+++ b/client/src/features/auth/login/LoginForm.tsx
@@ -1,11 +1,14 @@
+import { useState } from "react";
 import { Button, Checkbox, Form, Input } from "antd";
 import { Link } from "@tanstack/react-router";
+import { TurnstileWidget, turnstileEnabled } from "../shared/TurnstileWidget";
 
 interface Props {
     loading: boolean;
     errorMsg: string | null;
-    onSubmit: (values: { email: string; password: string; remember: boolean }) => void;
+    onSubmit: (values: { email: string; password: string; remember: boolean; turnstileToken: string | null }) => void;
     onValuesChange: () => void;
+    resetSignal?: number;
 }
 
 const GoogleSvg = () => (
@@ -33,8 +36,9 @@ const labelStyle = {
     letterSpacing: "0.05em",
 };
 
-export const LoginForm = ({ loading, errorMsg, onSubmit, onValuesChange }: Props) => {
+export const LoginForm = ({ loading, errorMsg, onSubmit, onValuesChange, resetSignal }: Props) => {
     const [form] = Form.useForm();
+    const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
 
     return (
         <>
@@ -52,7 +56,7 @@ export const LoginForm = ({ loading, errorMsg, onSubmit, onValuesChange }: Props
             <Form
                 form={form}
                 layout="vertical"
-                onFinish={onSubmit}
+                onFinish={values => onSubmit({ ...values, turnstileToken })}
                 onValuesChange={onValuesChange}
                 requiredMark={false}
             >
@@ -110,13 +114,15 @@ export const LoginForm = ({ loading, errorMsg, onSubmit, onValuesChange }: Props
                     </div>
                 )}
 
+                <TurnstileWidget onToken={setTurnstileToken} resetSignal={resetSignal} />
+
                 <Form.Item>
                     <Button
                         type="primary"
                         htmlType="submit"
                         block
                         loading={loading}
-                        disabled={loading}
+                        disabled={loading || (turnstileEnabled && !turnstileToken)}
                         style={{
                             height: "3.5rem",
                             background: "linear-gradient(135deg, #2563eb 0%, #004ac6 100%)",
diff --git a/client/src/features/auth/register.tsx b/client/src/features/auth/register.tsx
index b84cacb..28a3f0f 100644
--- a/client/src/features/auth/register.tsx
+++ b/client/src/features/auth/register.tsx
@@ -11,17 +11,20 @@ export const RegisterPage = () => {
     const navigate = useNavigate();
     const { mutate: signup, isPending: loading } = useSignup();
     const [errorMsg, setErrorMsg] = useState<string | null>(null);
+    const [turnstileReset, setTurnstileReset] = useState(0);
 
-    const handleSubmit = (values: { fullName: string; email: string; password: string }) => {
+    const handleSubmit = (values: { fullName: string; email: string; password: string; turnstileToken: string | null }) => {
         setErrorMsg(null);
         signup(
-            { username: values.fullName, email: values.email, password: values.password },
+            { username: values.fullName, email: values.email, password: values.password, turnstileToken: values.turnstileToken },
             {
                 onSuccess: data => {
                     setAuth(data.accessToken, data.user, data.notificationSettings);
                     navigate({ to: "/" });
                 },
                 onError: error => {
+                    // Reset Turnstile — the single-use token was consumed by this attempt.
+                    setTurnstileReset(n => n + 1);
                     const e = error as { response?: { data?: { message?: string } } };
                     setErrorMsg(e.response?.data?.message ?? "Registration failed. Please try again.");
                 },
@@ -45,6 +48,7 @@ export const RegisterPage = () => {
                         errorMsg={errorMsg}
                         onSubmit={handleSubmit}
                         onValuesChange={() => setErrorMsg(null)}
+                        resetSignal={turnstileReset}
                     />
                 </div>
             </section>
diff --git a/client/src/features/auth/register/RegisterForm.tsx b/client/src/features/auth/register/RegisterForm.tsx
index 4e466fe..924c42d 100644
--- a/client/src/features/auth/register/RegisterForm.tsx
+++ b/client/src/features/auth/register/RegisterForm.tsx
@@ -2,12 +2,14 @@ import { useState } from "react";
 import { Button, Form, Input } from "antd";
 import { Link } from "@tanstack/react-router";
 import { PasswordStrengthBars } from "./PasswordStrengthBars";
+import { TurnstileWidget, turnstileEnabled } from "../shared/TurnstileWidget";
 
 interface Props {
     loading: boolean;
     errorMsg: string | null;
-    onSubmit: (values: { fullName: string; email: string; password: string; confirmPassword: string }) => void;
+    onSubmit: (values: { fullName: string; email: string; password: string; confirmPassword: string; turnstileToken: string | null }) => void;
     onValuesChange: () => void;
+    resetSignal?: number;
 }
 
 const GoogleSvg = () => (
@@ -35,9 +37,10 @@ const inputStyle = {
     boxShadow: "0 8px 32px rgba(0,74,198,0.06)",
 } as const;
 
-export const RegisterForm = ({ loading, errorMsg, onSubmit, onValuesChange }: Props) => {
+export const RegisterForm = ({ loading, errorMsg, onSubmit, onValuesChange, resetSignal }: Props) => {
     const [form] = Form.useForm();
     const [password, setPassword] = useState("");
+    const [turnstileToken, setTurnstileToken] = useState<string | null>(null);
 
     return (
         <>
@@ -55,7 +58,7 @@ export const RegisterForm = ({ loading, errorMsg, onSubmit, onValuesChange }: Pr
             <Form
                 form={form}
                 layout="vertical"
-                onFinish={onSubmit}
+                onFinish={values => onSubmit({ ...values, turnstileToken })}
                 onValuesChange={onValuesChange}
                 requiredMark={false}
             >
@@ -144,13 +147,15 @@ export const RegisterForm = ({ loading, errorMsg, onSubmit, onValuesChange }: Pr
                     </div>
                 )}
 
+                <TurnstileWidget onToken={setTurnstileToken} resetSignal={resetSignal} />
+
                 <Form.Item className="mt-4">
                     <Button
                         type="primary"
                         htmlType="submit"
                         block
                         loading={loading}
-                        disabled={loading}
+                        disabled={loading || (turnstileEnabled && !turnstileToken)}
                         style={{
                             height: "3.5rem",
                             background: "linear-gradient(135deg, #2563eb 0%, #004ac6 100%)",
diff --git a/client/src/features/auth/shared/TurnstileWidget.tsx b/client/src/features/auth/shared/TurnstileWidget.tsx
new file mode 100644
index 0000000..cdd3815
--- /dev/null
+++ b/client/src/features/auth/shared/TurnstileWidget.tsx
@@ -0,0 +1,38 @@
+import { useEffect, useRef } from "react";
+import { Turnstile, type TurnstileInstance } from "@marsidev/react-turnstile";
+
+const SITE_KEY = import.meta.env.VITE_TURNSTILE_SITE_KEY as string | undefined;
+
+export const turnstileEnabled = !!SITE_KEY;
+
+interface Props {
+    onToken: (token: string | null) => void;
+    resetSignal?: number;
+}
+
+export const TurnstileWidget = ({ onToken, resetSignal }: Props) => {
+    const ref = useRef<TurnstileInstance | null>(null);
+
+    useEffect(() => {
+        if (resetSignal) {
+            ref.current?.reset();
+            onToken(null);
+        }
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [resetSignal]);
+
+    if (!SITE_KEY) return null;
+
+    return (
+        <div className="mb-4 flex justify-center">
+            <Turnstile
+                ref={ref}
+                siteKey={SITE_KEY}
+                onSuccess={token => onToken(token)}
+                onError={() => onToken(null)}
+                onExpire={() => onToken(null)}
+                options={{ theme: "light" }}
+            />
+        </div>
+    );
+};
diff --git a/client/src/features/dashboard/Help&Support/components/ContactChannels.tsx b/client/src/features/dashboard/Help&Support/components/ContactChannels.tsx
new file mode 100644
index 0000000..c1d6130
--- /dev/null
+++ b/client/src/features/dashboard/Help&Support/components/ContactChannels.tsx
@@ -0,0 +1,35 @@
+import { CONTACT_EMAIL } from '../data'
+
+function ChevronIcon() {
+  return (
+    <svg viewBox="0 0 14 14" className="w-3.5 h-3.5 fill-none stroke-[#64748b]" strokeWidth={1.5} strokeLinecap="round">
+      <path d="M4 3l6 4-6 4" />
+    </svg>
+  )
+}
+
+export function ContactChannels() {
+  return (
+    <div className="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,74,198,0.07)] border border-[rgba(195,198,215,0.25)]">
+      <div className="px-[22px] py-[18px] border-b border-[rgba(195,198,215,0.25)]">
+        <div className="font-extrabold text-[15px] text-[#131b2e]" style={{ fontFamily: 'Manrope, sans-serif' }}>Contact Channels</div>
+      </div>
+      <div className="p-4 flex flex-col gap-2.5">
+        <a href={`mailto:${CONTACT_EMAIL}`}
+          className="flex items-center gap-3 p-3 rounded-[10px] border border-[rgba(195,198,215,0.25)] bg-[#f7f9fb] no-underline text-inherit cursor-pointer transition-all duration-200 hover:bg-white hover:border-[rgba(195,198,215,0.5)]">
+          <div className="w-[38px] h-[38px] rounded-[9px] flex-shrink-0 flex items-center justify-center bg-[#dae2fd] text-[#004ac6]">
+            <svg viewBox="0 0 18 18" className="w-[17px] h-[17px] fill-none stroke-current" strokeWidth={1.3} strokeLinecap="round">
+              <rect x="1" y="4" width="16" height="11" rx="2" />
+              <path d="M1 7l8 5 8-5" />
+            </svg>
+          </div>
+          <div className="flex-1 min-w-0">
+            <div className="text-[13px] font-semibold text-[#131b2e]">Email Support</div>
+            <div className="text-[11.5px] text-[#64748b] mt-0.5">{CONTACT_EMAIL} · 24h response</div>
+          </div>
+          <ChevronIcon />
+        </a>
+      </div>
+    </div>
+  )
+}
diff --git a/client/src/features/dashboard/Help&Support/components/ContactForm.tsx b/client/src/features/dashboard/Help&Support/components/ContactForm.tsx
new file mode 100644
index 0000000..1535844
--- /dev/null
+++ b/client/src/features/dashboard/Help&Support/components/ContactForm.tsx
@@ -0,0 +1,102 @@
+import { useState } from 'react'
+import { Input, Select, Button, message } from 'antd'
+import { useAuthStore } from '../../../../store/auth.store'
+import { TOPIC_OPTIONS } from '../data'
+import { useSubmitSupport } from '../hooks'
+
+const { TextArea } = Input
+
+export function ContactForm() {
+  const user = useAuthStore(s => s.user)
+  const submit = useSubmitSupport()
+
+  const [topic, setTopic] = useState<string | undefined>(undefined)
+  const [body, setBody] = useState('')
+
+  const handleSend = () => {
+    if (!topic) {
+      message.warning('Please select a topic.')
+      return
+    }
+    if (body.trim().length < 10) {
+      message.warning('Please describe your issue in at least 10 characters.')
+      return
+    }
+
+    submit.mutate(
+      { topic, message: body.trim() },
+      {
+        onSuccess: res => {
+          message.success(res.message || 'Your message has been sent.')
+          setTopic(undefined)
+          setBody('')
+        },
+        onError: (err: unknown) => {
+          const e = err as { response?: { data?: { message?: string | string[] } } }
+          const msg = e.response?.data?.message
+          message.error(Array.isArray(msg) ? msg.join(', ') : msg ?? 'Failed to send your message.')
+        },
+      },
+    )
+  }
+
+  return (
+    <div className="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,74,198,0.07)] border border-[rgba(195,198,215,0.25)]">
+      <div className="px-[22px] py-[18px] border-b border-[rgba(195,198,215,0.25)]">
+        <div className="font-extrabold text-[15px] text-[#131b2e]" style={{ fontFamily: 'Manrope, sans-serif' }}>Contact Support</div>
+        <div className="text-xs text-[#64748b] mt-0.5">Can't find your answer? Send us a message and we'll respond within 24 hours.</div>
+      </div>
+      <div className="p-[22px] flex flex-col gap-4">
+        {/* Name + email are taken from your account */}
+        <div className="grid grid-cols-2 gap-3.5">
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[13px] font-semibold text-[#131b2e]">Full Name</label>
+            <Input value={user?.username ?? ''} size="large" disabled
+              className="rounded-[9px] bg-[#f7f9fb] border-[rgba(195,198,215,0.4)] text-[13.5px]" />
+          </div>
+          <div className="flex flex-col gap-1.5">
+            <label className="text-[13px] font-semibold text-[#131b2e]">Email Address</label>
+            <Input value={user?.email ?? ''} size="large" disabled
+              className="rounded-[9px] bg-[#f7f9fb] border-[rgba(195,198,215,0.4)] text-[13.5px]" />
+          </div>
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <label className="text-[13px] font-semibold text-[#131b2e]">Topic</label>
+          <Select size="large" placeholder="Select a topic"
+            value={topic}
+            onChange={setTopic}
+            className="w-full rounded-[9px] text-[13.5px]"
+            options={TOPIC_OPTIONS}
+          />
+        </div>
+
+        <div className="flex flex-col gap-1.5">
+          <label className="text-[13px] font-semibold text-[#131b2e]">Message</label>
+          <TextArea rows={4} placeholder="Describe your issue in as much detail as possible. Include any error messages, scan IDs, or steps to reproduce the problem..."
+            value={body}
+            onChange={e => setBody(e.target.value)}
+            maxLength={5000}
+            className="rounded-[9px] bg-[#f7f9fb] border-[rgba(195,198,215,0.4)] text-[13.5px] resize-none" />
+        </div>
+
+        <Button type="primary" size="large" block
+          loading={submit.isPending}
+          onClick={handleSend}
+          className="h-11 rounded-[10px] font-bold text-[14px] border-none shadow-[0_6px_18px_rgba(0,74,198,0.2)] hover:opacity-90 hover:-translate-y-px transition-all"
+          style={{ background: 'linear-gradient(135deg, #2563eb, #004ac6)', fontFamily: 'Manrope, sans-serif' }}>
+          <svg viewBox="0 0 16 16" className="w-4 h-4 fill-none stroke-white inline mr-2 -mt-0.5" strokeWidth={1.3} strokeLinecap="round" strokeLinejoin="round">
+            <path d="M14 2L2 8l5 2 2 5 5-13z" />
+          </svg>
+          Send Message
+        </Button>
+        <div className="text-xs text-[#64748b] text-center flex items-center justify-center gap-1">
+          <svg viewBox="0 0 14 14" className="w-3 h-3 fill-none stroke-[#64748b]" strokeWidth={1.3} strokeLinecap="round">
+            <path d="M7 1a6 6 0 100 12A6 6 0 007 1zm0 3v3m0 2h.01" />
+          </svg>
+          We typically respond within 24 hours on business days.
+        </div>
+      </div>
+    </div>
+  )
+}
diff --git a/client/src/features/dashboard/Help&Support/components/FaqSection.tsx b/client/src/features/dashboard/Help&Support/components/FaqSection.tsx
new file mode 100644
index 0000000..66a3a42
--- /dev/null
+++ b/client/src/features/dashboard/Help&Support/components/FaqSection.tsx
@@ -0,0 +1,56 @@
+import { useState } from 'react'
+import { Collapse } from 'antd'
+import type { CollapseProps } from 'antd'
+import { FAQ_CATS, FAQ_ITEMS, type FaqCat } from '../data'
+
+export function FaqSection() {
+  const [faqCat, setFaqCat] = useState<FaqCat>('all')
+
+  const visibleFaqs = FAQ_ITEMS.filter(f => faqCat === 'all' || f.cat === faqCat)
+
+  const collapseItems: CollapseProps['items'] = visibleFaqs.map((f, i) => ({
+    key: String(i),
+    label: <span className="text-[13.5px] font-semibold text-[#131b2e] leading-snug">{f.q}</span>,
+    children: <p className="text-[13.5px] text-[#64748b] leading-7">{f.a}</p>,
+  }))
+
+  return (
+    <div className="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,74,198,0.07)] border border-[rgba(195,198,215,0.25)]">
+      <div className="px-[22px] py-[18px] border-b border-[rgba(195,198,215,0.25)] flex items-center justify-between">
+        <div>
+          <div className="font-extrabold text-[15px] text-[#131b2e]" style={{ fontFamily: 'Manrope, sans-serif' }}>Frequently Asked Questions</div>
+          <div className="text-xs text-[#64748b] mt-0.5">Tap a question to expand the answer.</div>
+        </div>
+      </div>
+
+      {/* Tabs */}
+      <div className="flex gap-1 px-[22px] pt-4 flex-wrap">
+        {FAQ_CATS.map(c => (
+          <button key={c.key}
+            onClick={() => setFaqCat(c.key)}
+            className={`h-[34px] px-4 rounded-lg border-none text-[13px] font-semibold cursor-pointer transition-all duration-200
+              ${faqCat === c.key
+                ? 'bg-[#004ac6] text-white'
+                : 'bg-[#f2f4f6] text-[#64748b] hover:bg-[#dde1ea] hover:text-[#131b2e]'}`}>
+            {c.label}
+          </button>
+        ))}
+      </div>
+
+      <div className="px-[22px] pb-[22px] pt-3.5">
+        <Collapse
+          accordion
+          ghost
+          items={collapseItems}
+          className="faq-collapse"
+          expandIcon={({ isActive }) => (
+            <svg viewBox="0 0 12 12" className={`w-3 h-3 fill-none stroke-current transition-transform ${isActive ? 'rotate-45 stroke-[#004ac6]' : 'stroke-[#64748b]'}`} strokeWidth={1.5} strokeLinecap="round">
+              <path d="M3 3l6 6M9 3l-6 6" />
+            </svg>
+          )}
+          style={{ gap: 8 }}
+        />
+      </div>
+    </div>
+  )
+}
diff --git a/client/src/features/dashboard/Help&Support/components/GuideModal.tsx b/client/src/features/dashboard/Help&Support/components/GuideModal.tsx
new file mode 100644
index 0000000..755c73b
--- /dev/null
+++ b/client/src/features/dashboard/Help&Support/components/GuideModal.tsx
@@ -0,0 +1,60 @@
+import { Modal } from 'antd'
+import type { Guide } from '../data'
+
+interface GuideModalProps {
+  guide: Guide | null
+  open: boolean
+  onClose: () => void
+}
+
+export function GuideModal({ guide, open, onClose }: GuideModalProps) {
+  return (
+    <Modal
+      open={open}
+      onCancel={onClose}
+      footer={null}
+      width={620}
+      centered
+      destroyOnHidden
+      styles={{ body: { padding: 0 } }}
+    >
+      {guide && (
+        <div>
+          {/* Header */}
+          <div className="flex items-start gap-3.5 pr-6">
+            <div className={`w-12 h-12 rounded-[12px] flex items-center justify-center flex-shrink-0 ${guide.color} ${guide.iconColor}`}>
+              {guide.icon}
+            </div>
+            <div>
+              <h3 className="font-extrabold text-[19px] text-[#131b2e] tracking-tight" style={{ fontFamily: 'Manrope, sans-serif' }}>
+                {guide.title}
+              </h3>
+              <p className="text-[13.5px] text-[#64748b] leading-6 mt-1">{guide.intro}</p>
+            </div>
+          </div>
+
+          {/* Sections */}
+          <div className="flex flex-col gap-5 mt-6">
+            {guide.sections.map(section => (
+              <div key={section.heading}>
+                <div className="font-bold text-[13.5px] text-[#131b2e] mb-2" style={{ fontFamily: 'Manrope, sans-serif' }}>
+                  {section.heading}
+                </div>
+                <ul className="flex flex-col gap-2">
+                  {section.items.map((item, i) => (
+                    <li key={i} className="flex gap-2.5 text-[13.5px] text-[#3f465c] leading-6">
+                      <svg viewBox="0 0 16 16" className="w-3.5 h-3.5 mt-1 flex-shrink-0 fill-none stroke-[#004ac6]" strokeWidth={1.6} strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M3 8.5l3 3 7-7" />
+                      </svg>
+                      <span>{item}</span>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </Modal>
+  )
+}
diff --git a/client/src/features/dashboard/Help&Support/components/QuickActions.tsx b/client/src/features/dashboard/Help&Support/components/QuickActions.tsx
new file mode 100644
index 0000000..aa1697b
--- /dev/null
+++ b/client/src/features/dashboard/Help&Support/components/QuickActions.tsx
@@ -0,0 +1,31 @@
+import { useState } from 'react'
+import { GUIDES, type Guide } from '../data'
+import { GuideModal } from './GuideModal'
+
+export function QuickActions() {
+  const [activeGuide, setActiveGuide] = useState<Guide | null>(null)
+
+  return (
+    <>
+      <div className="grid grid-cols-4 gap-3.5">
+        {GUIDES.map(guide => (
+          <button
+            key={guide.key}
+            type="button"
+            onClick={() => setActiveGuide(guide)}
+            className="bg-white rounded-xl border border-[rgba(195,198,215,0.25)] shadow-[0_2px_12px_rgba(0,74,198,0.07)] p-5 flex flex-col items-start gap-2.5 text-left cursor-pointer transition-all duration-200 hover:-translate-y-1 hover:shadow-[0_8px_32px_rgba(0,74,198,0.10)] hover:border-[rgba(37,99,235,0.18)]"
+          >
+            <div className={`w-11 h-11 rounded-[11px] flex items-center justify-center ${guide.color} ${guide.iconColor}`}>
+              {guide.icon}
+            </div>
+            <div className="font-bold text-sm text-[#131b2e]" style={{ fontFamily: 'Manrope, sans-serif' }}>{guide.title}</div>
+            <div className="text-xs text-[#64748b] leading-[1.55]">{guide.desc}</div>
+            <div className="text-sm font-bold text-[#004ac6] mt-auto">{guide.cta}</div>
+          </button>
+        ))}
+      </div>
+
+      <GuideModal guide={activeGuide} open={!!activeGuide} onClose={() => setActiveGuide(null)} />
+    </>
+  )
+}
diff --git a/client/src/features/dashboard/Help&Support/data.tsx b/client/src/features/dashboard/Help&Support/data.tsx
new file mode 100644
index 0000000..10a6e31
--- /dev/null
+++ b/client/src/features/dashboard/Help&Support/data.tsx
@@ -0,0 +1,305 @@
+import type { ReactNode } from 'react'
+
+// ── Support inbox ─────────────────────────────────────────────────────────
+export const CONTACT_EMAIL = 'contact@tumorlens.health'
+
+// ── FAQ ────────────────────────────────────────────────────────────────────
+export type FaqCat = 'all' | 'scans' | 'reports' | 'account' | 'security'
+
+export interface FaqItem {
+  cat: Exclude<FaqCat, 'all'>
+  q: string
+  a: ReactNode
+}
+
+export const FAQ_CATS: { key: FaqCat; label: string }[] = [
+  { key: 'all', label: 'All' },
+  { key: 'scans', label: 'Scans' },
+  { key: 'reports', label: 'Reports' },
+  { key: 'account', label: 'Account' },
+  { key: 'security', label: 'Security' },
+]
+
+export const FAQ_ITEMS: FaqItem[] = [
+  {
+    cat: 'scans',
+    q: 'What image formats does TumorLens support?',
+    a: (
+      <>
+        TumorLens currently supports <strong className="text-[#131b2e]">JPEG</strong>,{' '}
+        <strong className="text-[#131b2e]">PNG</strong>, and{' '}
+        <strong className="text-[#131b2e]">DICOM</strong> formats. NIfTI support is planned for
+        an upcoming release. For best results, use axial-plane MRI images with a resolution of
+        224×224 pixels or higher.
+      </>
+    ),
+  },
+  {
+    cat: 'scans',
+    q: 'How long does it take to get a scan result?',
+    a: (
+      <>
+        Most scan Analyzes are completed in{' '}
+        <strong className="text-[#131b2e]">under 15 seconds</strong>. The time may vary
+        slightly depending on the image size and current server load. You will see a live
+        progress indicator while the scan is being processed.
+      </>
+    ),
+  },
+  {
+    cat: 'scans',
+    q: 'What does the confidence score mean?',
+    a: (
+      <>
+        The confidence score represents the model's certainty in its classification. A score of{' '}
+        <strong className="text-[#131b2e]">94%</strong> means the model is 94% confident that
+        the scan matches the detected tumor class. Scans with a confidence below{' '}
+        <strong className="text-[#131b2e]">75%</strong> are automatically flagged for
+        radiologist review.
+      </>
+    ),
+  },
+  {
+    cat: 'reports',
+    q: 'How are the AI clinical reports generated?',
+    a: (
+      <>
+        Reports are generated using a{' '}
+        <strong className="text-[#131b2e]">Retrieval-Augmented Generation (RAG)</strong>{' '}
+        pipeline. Once the CNN classifies the scan, relevant medical literature is retrieved
+        from a curated vector database (Qdrant). An LLM then synthesizes the classification
+        result with this evidence to produce a structured clinical report grounded in real
+        medical sources.
+      </>
+    ),
+  },
+  {
+    cat: 'reports',
+    q: 'Can I download reports as PDF?',
+    a: (
+      <>
+        Yes. PDF download is available on the{' '}
+        <strong className="text-[#131b2e]">Student</strong> and{' '}
+        <strong className="text-[#131b2e]">Clinic</strong> plans. On the Free plan, you can
+        view the report on-screen but cannot download it. To unlock PDF exports, upgrade your
+        plan from the Settings page.
+      </>
+    ),
+  },
+  {
+    cat: 'account',
+    q: 'How do I verify my student email?',
+    a: (
+      <>
+        After subscribing to the Student plan, sign in using your{' '}
+        <strong className="text-[#131b2e]">.edu institutional email</strong>. A verification
+        link will be sent to that address. Click the link to activate your Student plan. If
+        you don't receive the email within 5 minutes, check your spam folder or contact
+        support.
+      </>
+    ),
+  },
+  {
+    cat: 'account',
+    q: 'What happens if I run out of scans this month?',
+    a: (
+      <>
+        Once you reach your monthly scan limit, you won't be able to upload new scans until
+        the next billing cycle. You can still{' '}
+        <strong className="text-[#131b2e]">view all previous results and reports</strong>. To
+        continue scanning, you can upgrade to a higher plan or wait for your limit to reset on
+        the 1st of next month.
+      </>
+    ),
+  },
+]
+
+// ── Contact form topics ──────────────────────────────────────────────────────
+export const TOPIC_OPTIONS = [
+  { value: 'scan', label: 'Upload or scan issue' },
+  { value: 'report', label: 'Report generation problem' },
+  { value: 'billing', label: 'Account or billing question' },
+  { value: 'privacy', label: 'Privacy or security concern' },
+  { value: 'feature', label: 'Feature request' },
+  { value: 'other', label: 'Other' },
+]
+
+// ── Guide popups ─────────────────────────────────────────────────────────────
+export interface GuideSection {
+  heading: string
+  items: ReactNode[]
+}
+
+export interface Guide {
+  key: string
+  color: string
+  iconColor: string
+  icon: ReactNode
+  title: string
+  desc: string
+  cta: string
+  intro: ReactNode
+  sections: GuideSection[]
+}
+
+export const GUIDES: Guide[] = [
+  {
+    key: 'getting-started',
+    color: 'bg-[#dae2fd]',
+    iconColor: 'text-[#004ac6]',
+    icon: (
+      <svg viewBox="0 0 20 20" className="w-5 h-5 fill-none stroke-current" strokeWidth={1.4} strokeLinecap="round">
+        <path d="M10 2a8 8 0 100 16A8 8 0 0010 2zm0 4v4m0 2h.01" />
+      </svg>
+    ),
+    title: 'Getting Started',
+    desc: 'New to TumorLens? Learn how to upload your first scan and get a result in seconds.',
+    cta: 'Read guide →',
+    intro:
+      'TumorLens turns an MRI image into an AI-assisted classification in seconds. Follow these steps to run your first scan from start to finish.',
+    sections: [
+      {
+        heading: '1 · Add a patient',
+        items: [
+          'Open the Patients page from the sidebar and click "New Patient".',
+          'Enter the patient details. Every scan is linked to a patient so results stay organized.',
+        ],
+      },
+      {
+        heading: '2 · Upload a scan',
+        items: [
+          'Go to the Scan page and drag in an axial-plane MRI image (JPEG, PNG, or DICOM).',
+          'Use a resolution of 224×224 pixels or higher for the most reliable result.',
+          'Press Analyze — a live progress indicator shows the model working.',
+        ],
+      },
+      {
+        heading: '3 · Read the result',
+        items: [
+          'You will see the detected tumor class and a confidence score in under 15 seconds.',
+          'Results below 75% confidence are automatically flagged for radiologist review.',
+          'From the result you can generate a full AI clinical report.',
+        ],
+      },
+    ],
+  },
+  {
+    key: 'report-generation',
+    color: 'bg-[#d1fae5]',
+    iconColor: 'text-[#059669]',
+    icon: (
+      <svg viewBox="0 0 20 20" className="w-5 h-5 fill-none stroke-current" strokeWidth={1.4} strokeLinecap="round">
+        <path d="M14 2H6a1 1 0 00-1 1v14a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1zm-2 0v5h5M8 10h4M8 13h4M8 7h1" />
+      </svg>
+    ),
+    title: 'Report Generation',
+    desc: 'Understand how AI-powered reports are created and how to interpret the findings.',
+    cta: 'Learn more →',
+    intro:
+      'Reports are produced by a Retrieval-Augmented Generation (RAG) pipeline that grounds every finding in real medical literature.',
+    sections: [
+      {
+        heading: 'How a report is built',
+        items: [
+          'The CNN first classifies the scan into a tumor class.',
+          'Relevant medical literature is retrieved from a curated Qdrant vector database.',
+          'An LLM synthesizes the classification with the retrieved evidence into a structured report.',
+        ],
+      },
+      {
+        heading: 'Generating a report',
+        items: [
+          'Open any completed scan result and click "Generate Report".',
+          'Generation is queued and runs in the background — you will be notified when it is ready.',
+          'Open the report from the Reports page to read the full findings.',
+        ],
+      },
+      {
+        heading: 'Downloading & sharing',
+        items: [
+          'PDF export is available on the Student and Clinic plans.',
+          'Always review AI findings against your own clinical judgement — reports are decision support, not a diagnosis.',
+        ],
+      },
+    ],
+  },
+  {
+    key: 'privacy-security',
+    color: 'bg-[#fef3c7]',
+    iconColor: 'text-[#d97706]',
+    icon: (
+      <svg viewBox="0 0 20 20" className="w-5 h-5 fill-none stroke-current" strokeWidth={1.4} strokeLinecap="round">
+        <rect x="3" y="11" width="14" height="7" rx="2" />
+        <path d="M7 11V7a3 3 0 016 0v4" />
+      </svg>
+    ),
+    title: 'Privacy & Security',
+    desc: 'How your MRI data is encrypted, stored, and protected.',
+    cta: 'View policy →',
+    intro:
+      'Patient data is sensitive, and TumorLens is built to protect it at every step — in transit, at rest, and in access.',
+    sections: [
+      {
+        heading: 'Encryption',
+        items: [
+          'All data is encrypted in transit with TLS and at rest with AES-256.',
+          'MRI images are stored in access-controlled object storage, never in plain folders.',
+        ],
+      },
+      {
+        heading: 'Access control',
+        items: [
+          'Your scans and reports are visible only to your account and your organization members.',
+          'Sessions use HTTP-only cookies, and you can enable two-factor authentication from Settings.',
+        ],
+      },
+      {
+        heading: 'Your data, your control',
+        items: [
+          'We never sell or share patient data with third parties.',
+          'You can request deletion of your data at any time by contacting support.',
+        ],
+      },
+    ],
+  },
+  {
+    key: 'billing-plans',
+    color: 'bg-[#fce7f3]',
+    iconColor: 'text-[#9d174d]',
+    icon: (
+      <svg viewBox="0 0 20 20" className="w-5 h-5 fill-none stroke-current" strokeWidth={1.4} strokeLinecap="round">
+        <path d="M17 20H3a1 1 0 01-1-1V3a1 1 0 011-1h10l5 5v12a1 1 0 01-1 1zM13 2v5h5M8 12h4M8 15h4M8 9h1" />
+      </svg>
+    ),
+    title: 'Billing & Plans',
+    desc: 'Questions about your subscription, invoices, or upgrading to Clinic plan.',
+    cta: 'Manage billing →',
+    intro:
+      'Manage your subscription, switch plans, and find your invoices from the Plans and Settings pages.',
+    sections: [
+      {
+        heading: 'Choosing a plan',
+        items: [
+          'Free includes a monthly scan limit with on-screen results only.',
+          'Student and Clinic plans unlock PDF exports, higher limits, and team features.',
+          'Open the Plans page to compare tiers and upgrade.',
+        ],
+      },
+      {
+        heading: 'Managing your subscription',
+        items: [
+          'Billing is handled securely through Stripe.',
+          'You can upgrade, downgrade, or cancel at any time — changes apply from your next billing cycle.',
+          'Invoices and payment history are available in your account.',
+        ],
+      },
+      {
+        heading: 'Scan limits',
+        items: [
+          'Reaching your monthly limit pauses new uploads but never affects existing results.',
+          'Limits reset on the 1st of each month, or upgrade for more headroom right away.',
+        ],
+      },
+    ],
+  },
+]
diff --git a/client/src/features/dashboard/Help&Support/hooks.ts b/client/src/features/dashboard/Help&Support/hooks.ts
new file mode 100644
index 0000000..adb1fea
--- /dev/null
+++ b/client/src/features/dashboard/Help&Support/hooks.ts
@@ -0,0 +1,17 @@
+import { useMutation } from '@tanstack/react-query'
+import axiosInstance from '../../../lib/axios'
+
+export interface SupportContactPayload {
+  topic: string
+  message: string
+}
+
+// Send a support request to the TumorLens team (contact@tumorlens.health).
+// The sender's name and email are resolved server-side from the logged-in user.
+export const useSubmitSupport = () =>
+  useMutation({
+    mutationFn: async (data: SupportContactPayload) => {
+      const response = await axiosInstance.post<{ message: string }>('/support/contact', data)
+      return response.data
+    },
+  })
diff --git a/client/src/features/dashboard/Help&Support/index.tsx b/client/src/features/dashboard/Help&Support/index.tsx
index cd10479..1cfa583 100644
--- a/client/src/features/dashboard/Help&Support/index.tsx
+++ b/client/src/features/dashboard/Help&Support/index.tsx
@@ -1,290 +1,9 @@
-import { useState } from 'react'
-import { Collapse, Select, Input, Button } from 'antd'
-import type { CollapseProps } from 'antd'
+import { QuickActions } from './components/QuickActions'
+import { FaqSection } from './components/FaqSection'
+import { ContactForm } from './components/ContactForm'
+import { ContactChannels } from './components/ContactChannels'
 
-const { TextArea } = Input
-
-// ── Types ──────────────────────────────────────────────────────────────────
-type FaqCat = 'all' | 'scans' | 'reports' | 'account' | 'security'
-
-interface FaqItem {
-  cat: Exclude<FaqCat, 'all'>
-  q: string
-  a: React.ReactNode
-}
-
-// ── Data ───────────────────────────────────────────────────────────────────
-const FAQ_ITEMS: FaqItem[] = [
-  {
-    cat: 'scans',
-    q: 'What image formats does TumorLens support?',
-    a: (
-      <>
-        TumorLens currently supports <strong className="text-[#131b2e]">JPEG</strong>,{' '}
-        <strong className="text-[#131b2e]">PNG</strong>, and{' '}
-        <strong className="text-[#131b2e]">DICOM</strong> formats. NIfTI support is planned for
-        an upcoming release. For best results, use axial-plane MRI images with a resolution of
-        224×224 pixels or higher.
-      </>
-    ),
-  },
-  {
-    cat: 'scans',
-    q: 'How long does it take to get a scan result?',
-    a: (
-      <>
-        Most scan Analyzes are completed in{' '}
-        <strong className="text-[#131b2e]">under 15 seconds</strong>. The time may vary
-        slightly depending on the image size and current server load. You will see a live
-        progress indicator while the scan is being processed.
-      </>
-    ),
-  },
-  {
-    cat: 'scans',
-    q: 'What does the confidence score mean?',
-    a: (
-      <>
-        The confidence score represents the model's certainty in its classification. A score of{' '}
-        <strong className="text-[#131b2e]">94%</strong> means the model is 94% confident that
-        the scan matches the detected tumor class. Scans with a confidence below{' '}
-        <strong className="text-[#131b2e]">75%</strong> are automatically flagged for
-        radiologist review.
-      </>
-    ),
-  },
-  {
-    cat: 'reports',
-    q: 'How are the AI clinical reports generated?',
-    a: (
-      <>
-        Reports are generated using a{' '}
-        <strong className="text-[#131b2e]">Retrieval-Augmented Generation (RAG)</strong>{' '}
-        pipeline. Once the CNN classifies the scan, relevant medical literature is retrieved
-        from a curated vector database (Qdrant). An LLM then synthesizes the classification
-        result with this evidence to produce a structured clinical report grounded in real
-        medical sources.
-      </>
-    ),
-  },
-  {
-    cat: 'reports',
-    q: 'Can I download reports as PDF?',
-    a: (
-      <>
-        Yes. PDF download is available on the{' '}
-        <strong className="text-[#131b2e]">Student</strong> and{' '}
-        <strong className="text-[#131b2e]">Clinic</strong> plans. On the Free plan, you can
-        view the report on-screen but cannot download it. To unlock PDF exports, upgrade your
-        plan from the Settings page.
-      </>
-    ),
-  },
-  {
-    cat: 'account',
-    q: 'How do I verify my student email?',
-    a: (
-      <>
-        After subscribing to the Student plan, sign in using your{' '}
-        <strong className="text-[#131b2e]">.edu institutional email</strong>. A verification
-        link will be sent to that address. Click the link to activate your Student plan. If
-        you don't receive the email within 5 minutes, check your spam folder or contact
-        support.
-      </>
-    ),
-  },
-  {
-    cat: 'account',
-    q: 'What happens if I run out of scans this month?',
-    a: (
-      <>
-        Once you reach your monthly scan limit, you won't be able to upload new scans until
-        the next billing cycle. You can still{' '}
-        <strong className="text-[#131b2e]">view all previous results and reports</strong>. To
-        continue scanning, you can upgrade to a higher plan or wait for your limit to reset on
-        the 1st of next month.
-      </>
-    ),
-  },
-  // {
-  //   cat: 'security',
-  //   q: 'Is my patient data HIPAA compliant?',
-  //   a: (
-  //     <>
-  //       Yes. TumorLens uses{' '}
-  //       <strong className="text-[#131b2e]">AES-256 encryption</strong> for all stored data
-  //       and data in transit. All infrastructure is HIPAA and GDPR compliant. On Clinic plans,
-  //       a Business Associate Agreement (BAA) is available upon request. We never sell or share
-  //       patient data with third parties.
-  //     </>
-  //   ),
-  // },
-]
-
-const QUICK_ACTIONS = [
-  {
-    color: 'bg-[#dae2fd]',
-    iconColor: 'text-[#004ac6]',
-    icon: (
-      <svg viewBox="0 0 20 20" className="w-5 h-5 fill-none stroke-current" strokeWidth={1.4} strokeLinecap="round">
-        <path d="M10 2a8 8 0 100 16A8 8 0 0010 2zm0 4v4m0 2h.01" />
-      </svg>
-    ),
-    title: 'Getting Started',
-    desc: 'New to TumorLens? Learn how to upload your first scan and get a result in seconds.',
-    cta: 'Read guide →',
-  },
-  {
-    color: 'bg-[#d1fae5]',
-    iconColor: 'text-[#059669]',
-    icon: (
-      <svg viewBox="0 0 20 20" className="w-5 h-5 fill-none stroke-current" strokeWidth={1.4} strokeLinecap="round">
-        <path d="M14 2H6a1 1 0 00-1 1v14a1 1 0 001 1h8a1 1 0 001-1V3a1 1 0 00-1-1zm-2 0v5h5M8 10h4M8 13h4M8 7h1" />
-      </svg>
-    ),
-    title: 'Report Generation',
-    desc: 'Understand how AI-powered reports are created and how to interpret the findings.',
-    cta: 'Learn more →',
-  },
-  {
-    color: 'bg-[#fef3c7]',
-    iconColor: 'text-[#d97706]',
-    icon: (
-      <svg viewBox="0 0 20 20" className="w-5 h-5 fill-none stroke-current" strokeWidth={1.4} strokeLinecap="round">
-        <rect x="3" y="11" width="14" height="7" rx="2" />
-        <path d="M7 11V7a3 3 0 016 0v4" />
-      </svg>
-    ),
-    title: 'Privacy & Security',
-    desc: 'How your MRI data is encrypted, stored, and protected.',
-    cta: 'View policy →',
-  },
-  {
-    color: 'bg-[#fce7f3]',
-    iconColor: 'text-[#9d174d]',
-    icon: (
-      <svg viewBox="0 0 20 20" className="w-5 h-5 fill-none stroke-current" strokeWidth={1.4} strokeLinecap="round">
-        <path d="M17 20H3a1 1 0 01-1-1V3a1 1 0 011-1h10l5 5v12a1 1 0 01-1 1zM13 2v5h5M8 12h4M8 15h4M8 9h1" />
-      </svg>
-    ),
-    title: 'Billing & Plans',
-    desc: 'Questions about your subscription, invoices, or upgrading to Clinic plan.',
-    cta: 'Manage billing →',
-  },
-]
-
-const VIDEO_GUIDES = [
-  { gradient: 'from-[#0d1b3e] to-[#1e3a6e]', duration: '2:34', title: 'How to upload your first MRI scan', meta: 'Getting Started · 2 min' },
-  { gradient: 'from-[#1a3365] to-[#0d3b7a]', duration: '3:12', title: 'Generating and downloading a clinical report', meta: 'Reports · 3 min' },
-  { gradient: 'from-[#0d1b3e] to-[#1a2540]', duration: '1:58', title: 'Understanding the confidence score', meta: 'Results · 2 min' },
-  { gradient: 'from-[#1e3a6e] to-[#0d3b7a]', duration: '4:05', title: 'Setting up your clinic account and team', meta: 'Account · 4 min' },
-]
-
-const SERVICES = [
-  { name: 'CNN Classification API', status: 'ok' as const },
-  { name: 'Report Generation (RAG)', status: 'ok' as const },
-  { name: 'File Storage', status: 'ok' as const },
-  { name: 'Authentication', status: 'ok' as const },
-  { name: 'PDF Export', status: 'warn' as const },
-]
-
-const CHANNELS = [
-  {
-    iconBg: 'bg-[#dae2fd]',
-    iconColor: 'text-[#004ac6]',
-    icon: (
-      <svg viewBox="0 0 18 18" className="w-[17px] h-[17px] fill-none stroke-current" strokeWidth={1.3} strokeLinecap="round">
-        <rect x="1" y="4" width="16" height="11" rx="2" />
-        <path d="M1 7l8 5 8-5" />
-      </svg>
-    ),
-    name: 'Email Support',
-    desc: 'support@tumorlens.health · 24h response',
-    href: 'mailto:support@tumorlens.health',
-  },
-  {
-    iconBg: 'bg-[#d1fae5]',
-    iconColor: 'text-[#059669]',
-    icon: (
-      <svg viewBox="0 0 18 18" className="w-[17px] h-[17px] fill-none stroke-current" strokeWidth={1.3} strokeLinecap="round">
-        <path d="M15 2H3a1 1 0 00-1 1v9a1 1 0 001 1h3l3 3 3-3h3a1 1 0 001-1V3a1 1 0 00-1-1z" />
-      </svg>
-    ),
-    name: 'Live Chat',
-    desc: 'Available Mon–Fri · 9am–6pm CET',
-    href: '#',
-  },
-  {
-    iconBg: 'bg-[#fef3c7]',
-    iconColor: 'text-[#d97706]',
-    icon: (
-      <svg viewBox="0 0 18 18" className="w-[17px] h-[17px] fill-none stroke-current" strokeWidth={1.3} strokeLinecap="round">
-        <circle cx="9" cy="9" r="7" />
-        <path d="M9 6v4m0 2h.01" />
-      </svg>
-    ),
-    name: 'Enterprise Support',
-    desc: 'Dedicated SLA for Clinic plans',
-    href: '#',
-  },
-]
-
-const USEFUL_LINKS = [
-  { label: 'API Documentation' },
-  { label: 'Privacy Policy' },
-  { label: 'Terms of Service' },
-  // { label: 'HIPAA Compliance Guide' },
-  { label: 'Release Notes' },
-  { label: 'Community Forum' },
-]
-
-// ── Sub-components ─────────────────────────────────────────────────────────
-
-function ChevronIcon() {
-  return (
-    <svg viewBox="0 0 14 14" className="w-3.5 h-3.5 fill-none stroke-[#64748b]" strokeWidth={1.5} strokeLinecap="round">
-      <path d="M4 3l6 4-6 4" />
-    </svg>
-  )
-}
-
-function ServiceRow({ name, status }: { name: string; status: 'ok' | 'warn' | 'down' }) {
-  const badge =
-    status === 'ok'
-      ? <span className="text-[11px] font-bold px-2.5 py-0.5 rounded-full bg-[#f0fdf4] text-[#166534]">Operational</span>
-      : status === 'warn'
-      ? <span className="text-[11px] font-bold px-2.5 py-0.5 rounded-full bg-[#fff7ed] text-[#c2410c]">Degraded</span>
-      : <span className="text-[11px] font-bold px-2.5 py-0.5 rounded-full bg-[#fef2f2] text-[#b91c1c]">Down</span>
-
-  return (
-    <div className="flex items-center justify-between text-[13px]">
-      <span className="text-[#3f465c] font-medium">{name}</span>
-      {badge}
-    </div>
-  )
-}
-
-// ── Main Component ─────────────────────────────────────────────────────────
 export const HelpSupportPage = () => {
-  const [faqCat, setFaqCat] = useState<FaqCat>('all')
-  const [searchVal, setSearchVal] = useState('')
-
-  const faqCats: { key: FaqCat; label: string }[] = [
-    { key: 'all', label: 'All' },
-    { key: 'scans', label: 'Scans' },
-    { key: 'reports', label: 'Reports' },
-    { key: 'account', label: 'Account' },
-    { key: 'security', label: 'Security' },
-  ]
-
-  const visibleFaqs = FAQ_ITEMS.filter(f => faqCat === 'all' || f.cat === faqCat)
-
-  const collapseItems: CollapseProps['items'] = visibleFaqs.map((f, i) => ({
-    key: String(i),
-    label: <span className="text-[13.5px] font-semibold text-[#131b2e] leading-snug">{f.q}</span>,
-    children: <p className="text-[13.5px] text-[#64748b] leading-7">{f.a}</p>,
-  }))
-
   return (
     <div className="flex flex-col gap-6 min-h-screen bg-[#f7f9fb]">
 
@@ -294,291 +13,25 @@ export const HelpSupportPage = () => {
           <h1 className="font-extrabold text-2xl text-[#131b2e] tracking-tight" style={{ fontFamily: 'Manrope, sans-serif' }}>
             Help &amp; Support
           </h1>
-          <p className="text-sm text-[#64748b] mt-0.5">Find answers, watch guides, or reach our team directly.</p>
-        </div>
-      </div>
-
-      {/* ── Hero Search ── */}
-      <div className="relative bg-[#131b2e] rounded-xl px-9 py-10 text-center overflow-hidden">
-        {/* radial glow */}
-        <div className="pointer-events-none absolute left-1/2 -top-20 -translate-x-1/2 w-[400px] h-[400px] rounded-full"
-          style={{ background: 'radial-gradient(circle, rgba(37,99,235,0.18) 0%, transparent 70%)' }} />
-
-        <div className="inline-flex items-center gap-1.5 bg-white/[0.08] border border-white/10 rounded-full px-3.5 py-1 mb-4 text-xs font-semibold text-white/70">
-          <svg viewBox="0 0 14 14" className="w-3 h-3 fill-[#93c5fd]">
-            <circle cx="7" cy="7" r="6" stroke="currentColor" strokeWidth={1.3} fill="none" />
-            <path d="M7 5v4M7 10.5h.01" stroke="currentColor" strokeWidth={1.3} fill="none" strokeLinecap="round" />
-          </svg>
-          Support Center
-        </div>
-
-        <h2 className="font-extrabold text-[28px] text-white tracking-tight mb-2" style={{ fontFamily: 'Manrope, sans-serif' }}>
-          How can we help you?
-        </h2>
-        <p className="text-sm text-white/50 mb-6">Search our knowledge base or browse the topics below.</p>
-
-        <div className="flex items-center gap-2.5 bg-white rounded-[10px] px-4 py-1.5 max-w-[520px] mx-auto shadow-[0_8px_28px_rgba(0,0,0,0.18)]">
-          <svg viewBox="0 0 16 16" className="w-4 h-4 flex-shrink-0 text-[#64748b]" fill="none" stroke="currentColor" strokeWidth={1.5} strokeLinecap="round">
-            <circle cx="7" cy="7" r="5" />
-            <path d="M11 11l3 3" />
-          </svg>
-          <input
-            className="flex-1 border-none outline-none bg-transparent text-sm text-[#3f465c] placeholder:text-[#64748b] font-[Inter,sans-serif]"
-            placeholder="e.g. How do I upload a DICOM file?"
-            value={searchVal}
-            onChange={e => setSearchVal(e.target.value)}
-          />
-          <button className="h-10 px-5 rounded-lg text-white text-[13px] font-bold whitespace-nowrap transition-opacity hover:opacity-90"
-            style={{ background: 'linear-gradient(135deg, #2563eb, #004ac6)', fontFamily: 'Manrope, sans-serif' }}>
-            Search
-          </button>
-        </div>
-
-        <div className="flex gap-2 justify-center mt-4 flex-wrap">
-          {['Upload MRI', 'Generate Report', 'Download PDF', 'Account & Billing', 'DICOM Support', 'API Access'].map(tag => (
-            <span key={tag}
-              className="text-xs font-medium text-white/50 bg-white/[0.07] border border-white/10 px-3 py-1 rounded-full cursor-pointer transition-all hover:bg-white/[0.12] hover:text-white">
-              {tag}
-            </span>
-          ))}
+          <p className="text-sm text-[#64748b] mt-0.5">Browse the guides, find answers, or reach our team directly.</p>
         </div>
       </div>
 
-      {/* ── Quick Actions ── */}
-      <div className="grid grid-cols-4 gap-3.5">
-        {QUICK_ACTIONS.map(card => (
-          <a key={card.title} href="#"
-            className="bg-white rounded-xl border border-[rgba(195,198,215,0.25)] shadow-[0_2px_12px_rgba(0,74,198,0.07)] p-5 flex flex-col items-start gap-2.5 no-underline text-inherit cursor-pointer transition-all duration-200 hover:-translate-y-1 hover:shadow-[0_8px_32px_rgba(0,74,198,0.10)] hover:border-[rgba(37,99,235,0.18)]">
-            <div className={`w-11 h-11 rounded-[11px] flex items-center justify-center ${card.color} ${card.iconColor}`}>
-              {card.icon}
-            </div>
-            <div className="font-bold text-sm text-[#131b2e]" style={{ fontFamily: 'Manrope, sans-serif' }}>{card.title}</div>
-            <div className="text-xs text-[#64748b] leading-[1.55]">{card.desc}</div>
-            <div className="text-sm font-bold text-[#004ac6] mt-auto">{card.cta}</div>
-          </a>
-        ))}
-      </div>
+      {/* ── Quick Actions (open guide popups) ── */}
+      <QuickActions />
 
       {/* ── Main Grid ── */}
       <div className="grid gap-6" style={{ gridTemplateColumns: '1fr 320px', alignItems: 'start' }}>
 
         {/* ═══ LEFT COL ═══ */}
         <div className="flex flex-col gap-5">
-
-          {/* FAQ */}
-          <div className="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,74,198,0.07)] border border-[rgba(195,198,215,0.25)]">
-            <div className="px-[22px] py-[18px] border-b border-[rgba(195,198,215,0.25)] flex items-center justify-between">
-              <div>
-                <div className="font-extrabold text-[15px] text-[#131b2e]" style={{ fontFamily: 'Manrope, sans-serif' }}>Frequently Asked Questions</div>
-                <div className="text-xs text-[#64748b] mt-0.5">Tap a question to expand the answer.</div>
-              </div>
-            </div>
-
-            {/* Tabs */}
-            <div className="flex gap-1 px-[22px] pt-4 flex-wrap">
-              {faqCats.map(c => (
-                <button key={c.key}
-                  onClick={() => setFaqCat(c.key)}
-                  className={`h-[34px] px-4 rounded-lg border-none text-[13px] font-semibold cursor-pointer transition-all duration-200
-                    ${faqCat === c.key
-                      ? 'bg-[#004ac6] text-white'
-                      : 'bg-[#f2f4f6] text-[#64748b] hover:bg-[#dde1ea] hover:text-[#131b2e]'}`}>
-                  {c.label}
-                </button>
-              ))}
-            </div>
-
-            <div className="px-[22px] pb-[22px] pt-3.5">
-              <Collapse
-                accordion
-                ghost
-                items={collapseItems}
-                className="faq-collapse"
-                expandIcon={({ isActive }) => (
-                  <svg viewBox="0 0 12 12" className={`w-3 h-3 fill-none stroke-current transition-transform ${isActive ? 'rotate-45 stroke-[#004ac6]' : 'stroke-[#64748b]'}`} strokeWidth={1.5} strokeLinecap="round">
-                    <path d="M3 3l6 6M9 3l-6 6" />
-                  </svg>
-                )}
-                style={{ gap: 8 }}
-              />
-            </div>
-          </div>
-
-          {/* Video Guides */}
-          <div className="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,74,198,0.07)] border border-[rgba(195,198,215,0.25)]">
-            <div className="px-[22px] py-[18px] border-b border-[rgba(195,198,215,0.25)] flex items-center justify-between">
-              <div>
-                <div className="font-extrabold text-[15px] text-[#131b2e]" style={{ fontFamily: 'Manrope, sans-serif' }}>Video Guides</div>
-                <div className="text-xs text-[#64748b] mt-0.5">Short walkthroughs for the most common tasks.</div>
-              </div>
-              <a href="#" className="text-[13px] font-semibold text-[#004ac6] no-underline">View all →</a>
-            </div>
-            <div className="grid grid-cols-2 gap-3.5 p-[18px]">
-              {VIDEO_GUIDES.map(g => (
-                <div key={g.title}
-                  className="rounded-[10px] overflow-hidden border border-[rgba(195,198,215,0.25)] cursor-pointer transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_8px_32px_rgba(0,74,198,0.10)]">
-                  <div className={`h-[110px] bg-gradient-to-br ${g.gradient} flex items-center justify-center relative`}>
-                    <div className="w-10 h-10 rounded-full bg-white/90 flex items-center justify-center shadow-[0_4px_12px_rgba(0,0,0,0.2)] z-10">
-                      <svg viewBox="0 0 12 12" className="w-3.5 h-3.5 ml-0.5 fill-[#131b2e]">
-                        <path d="M3 2l8 4-8 4V2z" />
-                      </svg>
-                    </div>
-                    <span className="absolute bottom-2 right-2.5 text-[11px] font-bold text-white bg-black/55 px-1.5 py-0.5 rounded-[5px]">{g.duration}</span>
-                  </div>
-                  <div className="p-3 bg-white">
-                    <div className="text-[13px] font-semibold text-[#131b2e] leading-snug mb-1">{g.title}</div>
-                    <div className="text-[11px] text-[#64748b]">{g.meta}</div>
-                  </div>
-                </div>
-              ))}
-            </div>
-          </div>
-
-          {/* Contact Form */}
-          <div className="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,74,198,0.07)] border border-[rgba(195,198,215,0.25)]">
-            <div className="px-[22px] py-[18px] border-b border-[rgba(195,198,215,0.25)]">
-              <div className="font-extrabold text-[15px] text-[#131b2e]" style={{ fontFamily: 'Manrope, sans-serif' }}>Contact Support</div>
-              <div className="text-xs text-[#64748b] mt-0.5">Can't find your answer? Send us a message and we'll respond within 24 hours.</div>
-            </div>
-            <div className="p-[22px] flex flex-col gap-4">
-              <div className="grid grid-cols-2 gap-3.5">
-                <div className="flex flex-col gap-1.5">
-                  <label className="text-[13px] font-semibold text-[#131b2e]">Full Name</label>
-                  <Input placeholder="Dr. Julian Vane" size="large"
-                    className="rounded-[9px] bg-[#f7f9fb] border-[rgba(195,198,215,0.4)] text-[13.5px]" />
-                </div>
-                <div className="flex flex-col gap-1.5">
-                  <label className="text-[13px] font-semibold text-[#131b2e]">Email Address</label>
-                  <Input type="email" placeholder="you@hospital.com" size="large"
-                    className="rounded-[9px] bg-[#f7f9fb] border-[rgba(195,198,215,0.4)] text-[13.5px]" />
-                </div>
-              </div>
-              <div className="flex flex-col gap-1.5">
-                <label className="text-[13px] font-semibold text-[#131b2e]">Topic</label>
-                <Select size="large" placeholder="Select a topic"
-                  className="w-full rounded-[9px] text-[13.5px]"
-                  options={[
-                    { value: 'scan', label: 'Upload or scan issue' },
-                    { value: 'report', label: 'Report generation problem' },
-                    { value: 'billing', label: 'Account or billing question' },
-                    { value: 'privacy', label: 'Privacy or security concern' },
-                    { value: 'feature', label: 'Feature request' },
-                    { value: 'other', label: 'Other' },
-                  ]}
-                />
-              </div>
-              <div className="flex flex-col gap-1.5">
-                <label className="text-[13px] font-semibold text-[#131b2e]">Message</label>
-                <TextArea rows={4} placeholder="Describe your issue in as much detail as possible. Include any error messages, scan IDs, or steps to reproduce the problem..."
-                  className="rounded-[9px] bg-[#f7f9fb] border-[rgba(195,198,215,0.4)] text-[13.5px] resize-none" />
-              </div>
-              <Button type="primary" size="large" block
-                className="h-11 rounded-[10px] font-bold text-[14px] border-none shadow-[0_6px_18px_rgba(0,74,198,0.2)] hover:opacity-90 hover:-translate-y-px transition-all"
-                style={{ background: 'linear-gradient(135deg, #2563eb, #004ac6)', fontFamily: 'Manrope, sans-serif' }}>
-                <svg viewBox="0 0 16 16" className="w-4 h-4 fill-none stroke-white inline mr-2 -mt-0.5" strokeWidth={1.3} strokeLinecap="round" strokeLinejoin="round">
-                  <path d="M14 2L2 8l5 2 2 5 5-13z" />
-                </svg>
-                Send Message
-              </Button>
-              <div className="text-xs text-[#64748b] text-center flex items-center justify-center gap-1">
-                <svg viewBox="0 0 14 14" className="w-3 h-3 fill-none stroke-[#64748b]" strokeWidth={1.3} strokeLinecap="round">
-                  <path d="M7 1a6 6 0 100 12A6 6 0 007 1zm0 3v3m0 2h.01" />
-                </svg>
-                We typically respond within 24 hours on business days.
-              </div>
-            </div>
-          </div>
+          <FaqSection />
+          <ContactForm />
         </div>
 
         {/* ═══ RIGHT COL ═══ */}
         <div className="flex flex-col gap-5">
-
-          {/* System Status */}
-          <div className="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,74,198,0.07)] border border-[rgba(195,198,215,0.25)]">
-            <div className="px-[22px] py-[18px] border-b border-[rgba(195,198,215,0.25)]">
-              <div className="font-extrabold text-[15px] text-[#131b2e]" style={{ fontFamily: 'Manrope, sans-serif' }}>System Status</div>
-            </div>
-            <div className="p-5 flex flex-col gap-3">
-              <div className="flex items-center gap-2.5">
-                <span className="w-2.5 h-2.5 rounded-full bg-[#22c55e] flex-shrink-0 animate-pulse shadow-[0_0_0_3px_rgba(34,197,94,0.2)]" />
-                <div>
-                  <div className="font-bold text-[14px] text-[#131b2e]" style={{ fontFamily: 'Manrope, sans-serif' }}>All systems operational</div>
-                  <div className="text-xs text-[#64748b]">No incidents reported</div>
-                </div>
-              </div>
-              <div className="flex flex-col gap-2">
-                {SERVICES.map(s => <ServiceRow key={s.name} {...s} />)}
-              </div>
-              <div className="text-[11px] text-[#64748b] text-center pt-1 border-t border-[rgba(195,198,215,0.25)]">
-                Last checked · 2 minutes ago
-              </div>
-            </div>
-          </div>
-
-          {/* Contact Channels */}
-          <div className="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,74,198,0.07)] border border-[rgba(195,198,215,0.25)]">
-            <div className="px-[22px] py-[18px] border-b border-[rgba(195,198,215,0.25)]">
-              <div className="font-extrabold text-[15px] text-[#131b2e]" style={{ fontFamily: 'Manrope, sans-serif' }}>Contact Channels</div>
-            </div>
-            <div className="p-4 flex flex-col gap-2.5">
-              {CHANNELS.map(ch => (
-                <a key={ch.name} href={ch.href}
-                  className="flex items-center gap-3 p-3 rounded-[10px] border border-[rgba(195,198,215,0.25)] bg-[#f7f9fb] no-underline text-inherit cursor-pointer transition-all duration-200 hover:bg-white hover:border-[rgba(195,198,215,0.5)]">
-                  <div className={`w-[38px] h-[38px] rounded-[9px] flex-shrink-0 flex items-center justify-center ${ch.iconBg} ${ch.iconColor}`}>
-                    {ch.icon}
-                  </div>
-                  <div className="flex-1 min-w-0">
-                    <div className="text-[13px] font-semibold text-[#131b2e]">{ch.name}</div>
-                    <div className="text-[11.5px] text-[#64748b] mt-0.5">{ch.desc}</div>
-                  </div>
-                  <ChevronIcon />
-                </a>
-              ))}
-            </div>
-          </div>
-
-          {/* Useful Links */}
-          <div className="bg-white rounded-xl shadow-[0_2px_12px_rgba(0,74,198,0.07)] border border-[rgba(195,198,215,0.25)]">
-            <div className="px-[22px] py-[18px] border-b border-[rgba(195,198,215,0.25)]">
-              <div className="font-extrabold text-[15px] text-[#131b2e]" style={{ fontFamily: 'Manrope, sans-serif' }}>Useful Links</div>
-            </div>
-            <div className="px-5 py-3.5 flex flex-col gap-1">
-              {USEFUL_LINKS.map(l => (
-                <a key={l.label} href="#"
-                  className="flex items-center gap-2 px-2.5 py-2.5 rounded-lg text-[13px] font-medium text-[#3f465c] no-underline cursor-pointer transition-all duration-200 hover:bg-[#f7f9fb] hover:text-[#004ac6] group">
-                  <svg viewBox="0 0 14 14" className="w-3.5 h-3.5 fill-none stroke-[#64748b] group-hover:stroke-[#004ac6] flex-shrink-0 transition-colors" strokeWidth={1.3} strokeLinecap="round">
-                    <path d="M12 2H2a1 1 0 00-1 1v9a1 1 0 001 1h10a1 1 0 001-1V3a1 1 0 00-1-1zM4 6h6M4 9h4" />
-                  </svg>
-                  {l.label}
-                </a>
-              ))}
-            </div>
-          </div>
-
-          {/* Version Info */}
-          <div className="bg-[#131b2e] rounded-xl border border-[rgba(195,198,215,0.25)] p-5">
-            <div className="font-bold text-[13px] text-white/90 mb-2.5" style={{ fontFamily: 'Manrope, sans-serif' }}>Platform Information</div>
-            <div className="flex flex-col gap-1.5">
-              {[
-                { label: 'App Version', val: 'v2.1.0' },
-                { label: 'CNN Model', val: 'EfficientNetB0 v2' },
-                { label: 'RAG Engine', val: 'Qdrant Cloud' },
-                { label: 'Your Plan', val: 'Student' },
-              ].map(r => (
-                <div key={r.label} className="flex justify-between text-xs">
-                  <span className="text-white/40">{r.label}</span>
-                  <span className="text-white/75 font-semibold">{r.val}</span>
-                </div>
-              ))}
-            </div>
-            <div className="flex items-center gap-1 mt-3 text-[11px] text-[#86efac] font-semibold">
-              <svg viewBox="0 0 12 12" className="w-3 h-3 fill-none stroke-[#22c55e]" strokeWidth={1.5} strokeLinecap="round">
-                <path d="M2 6l3 3 5-5" />
-              </svg>
-              You are on the latest version
-            </div>
-          </div>
-
+          <ContactChannels />
         </div>
       </div>
     </div>
diff --git a/client/src/features/dashboard/History/index.tsx b/client/src/features/dashboard/History/index.tsx
deleted file mode 100644
index c2ded9d..0000000
--- a/client/src/features/dashboard/History/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { createRoute, redirect } from "@tanstack/react-router";
-import { useAuthStore } from "../../../store/auth.store";
-import { AppLayoutRoute } from "../../landing/route";
-
-const HistoryPage = () => {
-    return (
-        <div>
-            <h1>History</h1>
-            <p>This is where the history of scans and reports will be displayed.</p>
-        </div>
-    );
-}
-
-export const HistoryPageRoute = createRoute({
-    getParentRoute: () => AppLayoutRoute,
-    path: "history",
-    beforeLoad: () => {
-        if (!useAuthStore.getState().accessToken) throw redirect({ to: "/login" });
-    },
-    component: HistoryPage,
-});
\ No newline at end of file
diff --git a/client/src/features/dashboard/components/CommandPalette.tsx b/client/src/features/dashboard/components/CommandPalette.tsx
new file mode 100644
index 0000000..af18154
--- /dev/null
+++ b/client/src/features/dashboard/components/CommandPalette.tsx
@@ -0,0 +1,370 @@
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useNavigate } from "@tanstack/react-router";
+import {
+    MdSearch,
+    MdDashboard,
+    MdCloudUpload,
+    MdCheckCircle,
+    MdDescription,
+    MdPeople,
+    MdSettings,
+    MdHelpOutline,
+    MdApartment,
+    MdInsertDriveFile,
+    MdPerson,
+    MdImage,
+    MdArrowForward,
+} from "react-icons/md";
+import { queryClient } from "../../../main";
+import { useAuthStore } from "../../../store/auth.store";
+import type { Patient } from "../Patients/types";
+import type { ApiScan } from "../ScanResults/types";
+import type { Report } from "../Reports/types";
+
+type ResultKind = "page" | "patient" | "scan" | "report";
+type Result = {
+    kind: ResultKind;
+    id: string;
+    title: string;
+    subtitle?: string;
+    Icon: React.ElementType;
+    onSelect: () => void;
+};
+
+const PAGES: { label: string; path: string; Icon: React.ElementType; plans?: string[] }[] = [
+    { label: "Dashboard", path: "/", Icon: MdDashboard },
+    { label: "Upload MRI Scan", path: "/upload", Icon: MdCloudUpload },
+    { label: "Scan Results", path: "/results", Icon: MdCheckCircle },
+    { label: "Reports", path: "/reports", Icon: MdDescription },
+    { label: "Patients", path: "/patients", Icon: MdPeople, plans: ["DOCTOR", "ORGANIZATION"] },
+    { label: "Members", path: "/organization/members", Icon: MdApartment, plans: ["ORGANIZATION"] },
+    { label: "API Integration", path: "/organization/api-integration", Icon: MdDescription, plans: ["ORGANIZATION"] },
+    { label: "Audit Logs", path: "/organization/audit-logs", Icon: MdHelpOutline, plans: ["ORGANIZATION"] },
+    { label: "Settings", path: "/settings", Icon: MdSettings },
+    { label: "Plans", path: "/plans", Icon: MdPeople },
+    { label: "Help & Support", path: "/help-support", Icon: MdHelpOutline },
+];
+
+const MAX_PER_GROUP = 5;
+
+const norm = (s: unknown) => (typeof s === "string" ? s.toLowerCase() : "");
+
+export const CommandPalette = ({ open, onClose }: { open: boolean; onClose: () => void }) => {
+    if (!open) return null;
+    return <CommandPaletteInner onClose={onClose} />;
+};
+
+const CommandPaletteInner = ({ onClose }: { onClose: () => void }) => {
+    const [q, setQ] = useState("");
+    const [activeIdx, setActiveIdx] = useState(0);
+    const inputRef = useRef<HTMLInputElement>(null);
+    const listRef = useRef<HTMLDivElement>(null);
+    const navigate = useNavigate();
+    const userPlan = useAuthStore((s) => s.user?.plan);
+
+    useEffect(() => {
+        inputRef.current?.focus();
+    }, []);
+
+    const groups = useMemo(() => {
+        const query = q.trim().toLowerCase();
+
+        const pages: Result[] = PAGES
+            .filter((p) => !p.plans || (userPlan && p.plans.includes(userPlan)))
+            .filter((p) => !query || p.label.toLowerCase().includes(query))
+            .slice(0, MAX_PER_GROUP)
+            .map((p) => ({
+                kind: "page",
+                id: p.path,
+                title: p.label,
+                subtitle: p.path,
+                Icon: p.Icon,
+                onSelect: () => navigate({ to: p.path }),
+            }));
+
+        const patientsRaw = (queryClient.getQueryData<Patient[]>(["patients"]) || []);
+        const patients: Result[] = patientsRaw
+            .filter((p) => {
+                if (!query) return true;
+                return (
+                    norm(p.full_name).includes(query) ||
+                    norm(p.email).includes(query) ||
+                    norm(p.phone_number).includes(query) ||
+                    norm(p.cin).includes(query)
+                );
+            })
+            .slice(0, MAX_PER_GROUP)
+            .map((p) => ({
+                kind: "patient",
+                id: p.id,
+                title: p.full_name,
+                subtitle: [p.cin, p.email].filter(Boolean).join(" · "),
+                Icon: MdPerson,
+                onSelect: () => navigate({ to: "/patients" }),
+            }));
+
+        const scansRaw = (queryClient.getQueryData<ApiScan[]>(["scanResults"]) || []);
+        const scans: Result[] = scansRaw
+            .filter((s) => {
+                if (!query) return true;
+                return (
+                    norm(s.name).includes(query) ||
+                    norm(s.scan_code).includes(query) ||
+                    norm(s.class).includes(query) ||
+                    norm(s.patient?.full_name).includes(query)
+                );
+            })
+            .slice(0, MAX_PER_GROUP)
+            .map((s) => ({
+                kind: "scan",
+                id: s.id,
+                title: s.name || s.scan_code,
+                subtitle: [s.scan_code, s.patient?.full_name].filter(Boolean).join(" · "),
+                Icon: MdImage,
+                onSelect: () => navigate({ to: "/results/$id", params: { id: s.scan_code } }),
+            }));
+
+        const reportsRaw = (queryClient.getQueryData<Report[]>(["reports"]) || []);
+        const reports: Result[] = reportsRaw
+            .filter((r) => {
+                if (!query) return true;
+                return (
+                    norm(r.title).includes(query) ||
+                    norm(r.code).includes(query) ||
+                    norm(r.type).includes(query) ||
+                    norm(r.patient?.full_name).includes(query) ||
+                    norm(r.excerpt).includes(query)
+                );
+            })
+            .slice(0, MAX_PER_GROUP)
+            .map((r) => ({
+                kind: "report",
+                id: r.id,
+                title: r.title || `Report ${r.code}`,
+                subtitle: [r.code, r.patient?.full_name].filter(Boolean).join(" · "),
+                Icon: MdInsertDriveFile,
+                onSelect: () => navigate({ to: "/reports/$id", params: { id: r.code } }),
+            }));
+
+        return [
+            { label: "Pages", items: pages },
+            { label: "Patients", items: patients },
+            { label: "Scans", items: scans },
+            { label: "Reports", items: reports },
+        ].filter((g) => g.items.length > 0);
+    }, [q, userPlan, navigate]);
+
+    const flat = useMemo(() => groups.flatMap((g) => g.items), [groups]);
+
+    useEffect(() => {
+        const handler = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                e.preventDefault();
+                onClose();
+            } else if (e.key === "ArrowDown") {
+                e.preventDefault();
+                setActiveIdx((i) => Math.min(flat.length - 1, i + 1));
+            } else if (e.key === "ArrowUp") {
+                e.preventDefault();
+                setActiveIdx((i) => Math.max(0, i - 1));
+            } else if (e.key === "Enter") {
+                e.preventDefault();
+                const item = flat[activeIdx];
+                if (item) {
+                    item.onSelect();
+                    onClose();
+                }
+            }
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, [flat, activeIdx, onClose]);
+
+    useEffect(() => {
+        if (!listRef.current) return;
+        const el = listRef.current.querySelector<HTMLDivElement>(`[data-cp-idx="${activeIdx}"]`);
+        if (el) el.scrollIntoView({ block: "nearest" });
+    }, [activeIdx]);
+
+    let runningIdx = -1;
+
+    return (
+        <div
+            onClick={onClose}
+            style={{
+                position: "fixed",
+                inset: 0,
+                background: "rgba(15,23,42,0.45)",
+                zIndex: 1000,
+                display: "flex",
+                alignItems: "flex-start",
+                justifyContent: "center",
+                paddingTop: "12vh",
+                fontFamily: "Inter, sans-serif",
+            }}
+        >
+            <div
+                onClick={(e) => e.stopPropagation()}
+                style={{
+                    width: "100%",
+                    maxWidth: 600,
+                    background: "white",
+                    borderRadius: 14,
+                    border: "1px solid rgba(195,198,215,0.4)",
+                    boxShadow: "0 20px 60px rgba(15,23,42,0.25)",
+                    overflow: "hidden",
+                    display: "flex",
+                    flexDirection: "column",
+                    maxHeight: "70vh",
+                }}
+            >
+                <div
+                    className="flex items-center"
+                    style={{
+                        gap: 10,
+                        padding: "14px 18px",
+                        borderBottom: "1px solid rgba(195,198,215,0.3)",
+                    }}
+                >
+                    <MdSearch size={18} color="#64748b" />
+                    <input
+                        ref={inputRef}
+                        type="text"
+                        value={q}
+                        onChange={(e) => {
+                            setQ(e.target.value);
+                            setActiveIdx(0);
+                        }}
+                        placeholder="Search patients, scans, reports, pages…"
+                        style={{
+                            flex: 1,
+                            border: "none",
+                            outline: "none",
+                            fontSize: 14.5,
+                            color: "#131b2e",
+                            fontFamily: "Inter, sans-serif",
+                            background: "transparent",
+                        }}
+                    />
+                    <span
+                        style={{
+                            fontSize: 10,
+                            fontWeight: 600,
+                            color: "#64748b",
+                            background: "#f2f4f6",
+                            border: "1px solid rgba(195,198,215,0.3)",
+                            borderRadius: 4,
+                            padding: "2px 6px",
+                        }}
+                    >
+                        ESC
+                    </span>
+                </div>
+
+                <div ref={listRef} style={{ overflow: "auto", padding: "6px 0" }}>
+                    {flat.length === 0 ? (
+                        <div
+                            style={{
+                                padding: "40px 18px",
+                                textAlign: "center",
+                                color: "#64748b",
+                                fontSize: 13.5,
+                            }}
+                        >
+                            {q.trim()
+                                ? "No matches. Try a different search."
+                                : "Start typing to search across pages, patients, scans, and reports."}
+                        </div>
+                    ) : (
+                        groups.map((g) => (
+                            <div key={g.label} style={{ padding: "6px 0" }}>
+                                <div
+                                    style={{
+                                        padding: "4px 18px",
+                                        fontSize: 10.5,
+                                        fontWeight: 700,
+                                        letterSpacing: 0.6,
+                                        textTransform: "uppercase",
+                                        color: "#94a3b8",
+                                    }}
+                                >
+                                    {g.label}
+                                </div>
+                                {g.items.map((item) => {
+                                    runningIdx += 1;
+                                    const idx = runningIdx;
+                                    const active = idx === activeIdx;
+                                    return (
+                                        <div
+                                            key={`${item.kind}-${item.id}`}
+                                            data-cp-idx={idx}
+                                            onMouseEnter={() => setActiveIdx(idx)}
+                                            onClick={() => {
+                                                item.onSelect();
+                                                onClose();
+                                            }}
+                                            className="flex items-center"
+                                            style={{
+                                                gap: 12,
+                                                padding: "9px 18px",
+                                                cursor: "pointer",
+                                                background: active ? "#f2f4f6" : "transparent",
+                                            }}
+                                        >
+                                            <item.Icon size={16} color="#64748b" />
+                                            <div style={{ flex: 1, minWidth: 0 }}>
+                                                <div
+                                                    style={{
+                                                        fontSize: 13.5,
+                                                        color: "#131b2e",
+                                                        fontWeight: 500,
+                                                        overflow: "hidden",
+                                                        textOverflow: "ellipsis",
+                                                        whiteSpace: "nowrap",
+                                                    }}
+                                                >
+                                                    {item.title}
+                                                </div>
+                                                {item.subtitle && (
+                                                    <div
+                                                        style={{
+                                                            fontSize: 11.5,
+                                                            color: "#94a3b8",
+                                                            overflow: "hidden",
+                                                            textOverflow: "ellipsis",
+                                                            whiteSpace: "nowrap",
+                                                        }}
+                                                    >
+                                                        {item.subtitle}
+                                                    </div>
+                                                )}
+                                            </div>
+                                            {active && <MdArrowForward size={14} color="#64748b" />}
+                                        </div>
+                                    );
+                                })}
+                            </div>
+                        ))
+                    )}
+                </div>
+
+                <div
+                    className="flex items-center justify-between"
+                    style={{
+                        padding: "8px 18px",
+                        borderTop: "1px solid rgba(195,198,215,0.3)",
+                        fontSize: 11,
+                        color: "#94a3b8",
+                        background: "#fafbfc",
+                    }}
+                >
+                    <span>Showing items already loaded in this session.</span>
+                    <span style={{ display: "flex", gap: 10 }}>
+                        <span>↑↓ navigate</span>
+                        <span>↵ open</span>
+                    </span>
+                </div>
+            </div>
+        </div>
+    );
+};
diff --git a/client/src/features/dashboard/layout.tsx b/client/src/features/dashboard/layout.tsx
index 4872f20..7e44e89 100644
--- a/client/src/features/dashboard/layout.tsx
+++ b/client/src/features/dashboard/layout.tsx
@@ -25,6 +25,7 @@ import { MI } from "../../components/logo";
 import { useLogout } from "../auth/hooks";
 import { FREE_LIMIT, REPORT_FREE_LIMIT } from "./Home/constants";
 import { NotificationsDropdown } from "./Notifications";
+import { CommandPalette } from "./components/CommandPalette";
 
 // Types
 type NavItem = {
@@ -34,7 +35,6 @@ type NavItem = {
     badge?: string;
     badgeType?: "blue" | "orange";
 };
-
 type NavSection = {
     section: string;
     items: NavItem[];
@@ -93,11 +93,6 @@ const NAV: NavSection[] = [
                 label: "API Integration", 
                 Icon: MdDescription 
             },
-            // { 
-            //     id: "/organization/web-hooks", 
-            //     label: "Web Hooks", 
-            //     Icon: MdSettings 
-            // },
             { 
                 id: "/organization/audit-logs", 
                 label: "Audit Logs", 
@@ -283,7 +278,20 @@ export const DashboardLayout = ({ children }: { children?: React.ReactNode } = {
 
     // User
     const user = useAuthStore((state) => state.user);
-    
+
+    // Command palette (⌘K / Ctrl+K)
+    const [paletteOpen, setPaletteOpen] = useState(false);
+    useEffect(() => {
+        const handler = (e: KeyboardEvent) => {
+            if ((e.metaKey || e.ctrlKey) && e.key.toLowerCase() === "k") {
+                e.preventDefault();
+                setPaletteOpen((o) => !o);
+            }
+        };
+        window.addEventListener("keydown", handler);
+        return () => window.removeEventListener("keydown", handler);
+    }, []);
+
     return (
         <div
             className="flex h-screen overflow-hidden"
@@ -696,7 +704,9 @@ export const DashboardLayout = ({ children }: { children?: React.ReactNode } = {
                     </div>
 
                     {/* Search */}
-                    <div
+                    <button
+                        type="button"
+                        onClick={() => setPaletteOpen(true)}
                         className="flex items-center transition-all"
                         style={{
                             gap: 8,
@@ -705,7 +715,9 @@ export const DashboardLayout = ({ children }: { children?: React.ReactNode } = {
                             borderRadius: 9,
                             padding: "0 14px",
                             height: 38,
-                            width: 260,
+                            width: "330px",
+                            cursor: "pointer",
+                            textAlign: "left",
                         }}
                         onMouseEnter={(e) => {
                             e.currentTarget.style.borderColor = "rgba(195,198,215,0.5)";
@@ -717,16 +729,16 @@ export const DashboardLayout = ({ children }: { children?: React.ReactNode } = {
                         }}
                     >
                         <MdSearch size={14} color="#64748b" />
-                        <input
-                            type="text"
-                            placeholder="Search scans, reports, patients…"
+                        <span
                             style={{
-                                border: "none", background: "transparent",
-                                fontSize: 13.5, color: "#3f465c",
+                                flex: 1,
+                                fontSize: 13.5,
+                                color: "#94a3b8",
                                 fontFamily: "Inter, sans-serif",
-                                width: "100%", outline: "none",
                             }}
-                        />
+                        >
+                            {user?.plan === "FREE" ? "Search scans, reports..." : "Search patients, scans, reports..."}
+                        </span>
                         <span
                             style={{
                                 fontSize: 10, fontWeight: 600, color: "#64748b",
@@ -738,7 +750,7 @@ export const DashboardLayout = ({ children }: { children?: React.ReactNode } = {
                         >
                             ⌘K
                         </span>
-                    </div>
+                    </button>
 
                     {/* Actions */}
                     <div className="flex items-center" style={{ gap: 6 }}>
@@ -798,6 +810,8 @@ export const DashboardLayout = ({ children }: { children?: React.ReactNode } = {
                     {children ?? <Outlet />}
                 </main>
             </div>
+
+            <CommandPalette open={paletteOpen} onClose={() => setPaletteOpen(false)} />
         </div>
     );
 };
\ No newline at end of file
diff --git a/client/src/features/landing/index.tsx b/client/src/features/landing/index.tsx
index 6ef8d8e..311ad01 100644
--- a/client/src/features/landing/index.tsx
+++ b/client/src/features/landing/index.tsx
@@ -1,4 +1,4 @@
-import { Avatar, Button, Card } from "antd";
+import { Button, Card } from "antd";
 import { Link } from "@tanstack/react-router";
 import { useAuthStore } from "../../store/auth.store";
 import Logo from "../../components/logo";
@@ -60,7 +60,7 @@ const FEATURES = [
         iconColor: "text-[#004ac6]",
         title: "Smart Tumor Detection",
         desc: "Our AI instantly identifies and classifies brain tumors from MRI scans with high accuracy, giving you results in seconds.",
-        cta: "Learn about the model",
+        // cta: "Learn about the model",
     },
     {
         icon: "description",
@@ -68,7 +68,7 @@ const FEATURES = [
         iconColor: "text-[#004ac6]",
         title: "Instant Medical Reports",
         desc: "Get comprehensive, easy-to-read reports automatically generated for each scan, backed by trusted medical knowledge.",
-        cta: "View sample reports",
+        // cta: "View sample reports",
     },
     {
         icon: "encrypted",
@@ -76,7 +76,7 @@ const FEATURES = [
         iconColor: "text-[#004ac6]",
         title: "Your Data is Safe",
         desc: "Your Scan history are protected with military-grade security and comply with all healthcare privacy laws.",
-        cta: "Security whitepaper",
+        // cta: "Security whitepaper",
     },
 ];
 
@@ -114,14 +114,6 @@ const STATS = [
     { value: "DICOM", label: "Native Support" },
 ];
 
-const DOCTOR_AVATARS = [
-    "https://lh3.googleusercontent.com/aida-public/AB6AXuDqUVr453mh4t90vUKvKrYvlvcLvTJaKCXXPs5bSeKJpfxDYlsBUpsCOKW7eRGbt30UTL2sswFpAELszIzb0XlouXMegDJOpoVw6jGnKBhzLkbqtbRxI_rP1Bup4ljHhsmR6ehWVLc8BYvaYCtxg9LsFKxJelBPEfC8A3IAwc7m0riWS2pW2u-u5NFjqbrnOUAc3PiVBbr5YiFDBejKWV4KjQHIyBY2WhA34KeleNwkMfQlvKdbtsqSN5ZMLt5I_HuLZbsSQxtQCwM",
-    "https://lh3.googleusercontent.com/aida-public/AB6AXuCPXp6muYu6O73WD2d1foCM4ly-LKF2y7c9apKgaCTlWBA9bIo8TkUdg2-zeLnWfF1H0OhxoAWdOdEEk7UV-bxtrMoFiOkHHBzSJpBAmYjM5lyA-NVCWC75i7b9qt6kn7Ylr9w4E-QswVUlN5TFwGo9e96zdqOaPc7Y2P-ieuAEujXFwkX-gi1SudDzQPcEIIdfemBwoJ2kwf0PjrlMWRwqq_o58GydbIRM42whpGvthDSWouGw_bP2TmRg4Wva9SBSu8CQmJ0h-IU",
-    "https://lh3.googleusercontent.com/aida-public/AB6AXuAb3PFcEbCLEiEEp9of1YhsE2bo3IAOcf5o3UVMcFy6d5Q1l30BnHRI7E8khx4ds8pBj1CyYP8InwnmZCxADVMs78aOGXLBLksEM9o5wqs598r4mJPpUIz9MxeozQ3S_h6HmPxRTTiCY-wrwR9WyDdrXRpaokCD2ME17zmmiki3v4z0QXiXVpe35lwdcjBXxB0CzeImyDruVt1Lez7sHBKlHsZQHdPlyl28a78vTVrUGMYD-ULq-UNesC593fK_TD-mOc_E6rV5sag",
-    "https://lh3.googleusercontent.com/aida-public/AB6AXuCqJtI02t5R1RVcj5X5xywC4v9fOQQWNUw3RyHaq-3hUyEoE9PbMLbGVrElkPEg0eVy4wTxuSoCYKPyJhf05S-0UBkeh8SThgxQTorYFGSXmBs4a8EttXi0ilsr32DUoN1A2L8VAjmg9274cbPSG7QMxlVGbP-pBg8_etA3xZEBm6m_n0-CJav7rUZf2u1k7dSxEpJ-6QC65Da7_Gm9uAlRq40jxUfl8vEsO7TekG_1CWYgy769yElBiYWHeRFAv41xnAKmPzDeFIY",
-];
-
-
 const NAV_LINKS = [
     { label: "Features", id: "features" },
     { label: "How It Works", id: "how-it-works" },
@@ -277,26 +269,26 @@ const LandingPage = () => {
                             </Button>
                         </div>
 
-                    {/* Trust line */}
-                    <div className="flex items-center justify-center lg:justify-start gap-3">
-                        <Avatar.Group max={{ count: 4 }} size={32}>
-                        {DOCTOR_AVATARS.map((src, i) => (
-                            <Avatar
-                            key={i}
-                            src={src}
-                            size={32}
-                            style={{ border: "2px solid #f7f9fb" }}
-                            />
-                        ))}
-                        </Avatar.Group>
-                        <p className="text-sm text-[#434655]">
-                        Trusted by{" "}
-                        <span className="font-bold text-[#191c1e]">
-                            450+ medical institutions
-                        </span>{" "}
-                        worldwide
-                        </p>
-                    </div>
+                        {/* Trust line */}
+                        {/* <div className="flex items-center justify-center lg:justify-start gap-3">
+                            <Avatar.Group max={{ count: 4 }} size={32}>
+                            {DOCTOR_AVATARS.map((src, i) => (
+                                <Avatar
+                                key={i}
+                                src={src}
+                                size={32}
+                                style={{ border: "2px solid #f7f9fb" }}
+                                />
+                            ))}
+                            </Avatar.Group>
+                            <p className="text-sm text-[#434655]">
+                            Trusted by{" "}
+                            <span className="font-bold text-[#191c1e]">
+                                450+ medical institutions
+                            </span>{" "}
+                            worldwide
+                            </p>
+                        </div> */}
                     </div>
 
                     {/* Visual */}
@@ -377,7 +369,7 @@ const LandingPage = () => {
                             Everything You Need for Confident Diagnostics
                         </h2>
                         <p className="text-[#434655] max-w-2xl mx-auto">
-                            Built for clinical precision — from instant AI detection to
+                            Built for clinical precision from instant AI detection to
                             tamper-proof audit trails, every feature is designed with
                             radiologists in mind.
                         </p>
@@ -407,10 +399,10 @@ const LandingPage = () => {
                                     <p className="text-sm text-[#3f465c] leading-relaxed mb-8">
                                         {f.desc}
                                     </p>
-                                    <div className="mt-auto pt-6 border-t border-[#c3c6d7]/30 flex items-center gap-2 text-[#004ac6] font-bold text-sm group-hover:gap-3 transition-all duration-200">
+                                    {/* <div className="mt-auto pt-6 border-t border-[#c3c6d7]/30 flex items-center gap-2 text-[#004ac6] font-bold text-sm group-hover:gap-3 transition-all duration-200">
                                         {f.cta}
                                         <MI name="arrow_forward" className="text-sm" />
-                                    </div>
+                                    </div> */}
                             </Card>
                         ))}
                     </div>
@@ -862,18 +854,18 @@ const LandingPage = () => {
                 </div>
                 <div className="flex gap-8 text-sm text-[#3f465c]">
                     {[
-                    "Privacy Policy",
-                    "Terms of Service",
-                    "Compliance",
-                    "Support",
-                    ].map((label) => (
-                    <a
-                        key={label}
-                        href="#"
+                    { label: "Privacy Policy", to: "/privacy-policy" },
+                    { label: "Terms of Service", to: "/terms-of-service" },
+                    { label: "Compliance", to: "/compliance" },
+                    { label: "Support", to: "/support" },
+                    ].map((link) => (
+                    <Link
+                        key={link.to}
+                        to={link.to}
                         className="hover:text-[#004ac6] transition-colors no-underline"
                     >
-                        {label}
-                    </a>
+                        {link.label}
+                    </Link>
                     ))}
                 </div>
                 </div>
diff --git a/client/src/features/legal/Compliance.tsx b/client/src/features/legal/Compliance.tsx
new file mode 100644
index 0000000..4255252
--- /dev/null
+++ b/client/src/features/legal/Compliance.tsx
@@ -0,0 +1,158 @@
+import { LegalLayout } from "./components/LegalLayout";
+import { MI } from "../../components/logo";
+
+const CERTIFICATIONS = [
+    {
+        icon: "health_and_safety",
+        title: "HIPAA Aligned",
+        desc: "Safeguards modeled on the HIPAA Security and Privacy Rules for handling PHI.",
+    },
+    {
+        icon: "public",
+        title: "GDPR Ready",
+        desc: "Lawful processing, data-subject rights, and EU data-transfer protections.",
+    },
+    {
+        icon: "verified_user",
+        title: "SOC 2 Practices",
+        desc: "Security, availability, and confidentiality controls across our infrastructure.",
+    },
+    {
+        icon: "lock",
+        title: "AES-256 Encryption",
+        desc: "Data encrypted at rest and in transit with industry-standard ciphers.",
+    },
+];
+
+const SECTIONS = [
+    {
+        heading: "Our Commitment to Compliance",
+        body: (
+            <p>
+                TumorLens handles some of the most sensitive data in medicine. Compliance is not
+                an afterthought — it is built into how the platform is designed, operated, and
+                audited. This page summarizes the regulatory frameworks we align with and the
+                controls we maintain to protect patients and the professionals who care for them.
+            </p>
+        ),
+    },
+    {
+        heading: "Healthcare Data Protection (HIPAA)",
+        body: (
+            <p>
+                For customers subject to U.S. healthcare regulation, we apply administrative,
+                physical, and technical safeguards consistent with the HIPAA Security Rule. This
+                includes role-based access control, encryption of Protected Health Information,
+                tamper-evident audit logging, and Business Associate Agreements (BAAs) available
+                to eligible organizations.
+            </p>
+        ),
+    },
+    {
+        heading: "Data Privacy (GDPR & Beyond)",
+        body: (
+            <p>
+                We support the rights granted under the EU General Data Protection Regulation and
+                comparable privacy laws, including the rights to access, rectification, erasure,
+                and portability. We process personal data on a lawful basis, minimize what we
+                collect, and apply appropriate safeguards to any cross-border data transfers.
+            </p>
+        ),
+    },
+    {
+        heading: "Infrastructure & Security Controls",
+        body: (
+            <ul className="list-disc pl-5 space-y-2">
+                <li>End-to-end encryption (TLS in transit, AES-256 at rest).</li>
+                <li>Multi-factor authentication and short-lived session tokens.</li>
+                <li>Least-privilege access with per-organization isolation.</li>
+                <li>Immutable audit logs for every access to clinical records.</li>
+                <li>Continuous monitoring and regular security assessments.</li>
+            </ul>
+        ),
+    },
+    {
+        heading: "Auditability & Accountability",
+        body: (
+            <p>
+                Every meaningful action — scan uploads, report access, membership changes — is
+                recorded in an audit log scoped to your organization. Administrators can review
+                this activity at any time, providing the accountability and traceability required
+                by healthcare oversight bodies and internal governance teams.
+            </p>
+        ),
+    },
+    {
+        heading: "Intended Use & Regulatory Status",
+        body: (
+            <p>
+                TumorLens is intended as a clinical decision-support tool to assist qualified
+                medical professionals. It is not a substitute for professional diagnosis. Where
+                medical-device regulation applies in your jurisdiction, it is the responsibility
+                of the deploying organization to ensure the tool is used within the bounds of
+                applicable law and local clinical governance.
+            </p>
+        ),
+    },
+    {
+        heading: "Reporting a Concern",
+        body: (
+            <p>
+                If you believe you have found a security vulnerability or a compliance issue, we
+                want to hear from you. Contact our security team at{" "}
+                <a
+                    href="mailto:security@tumorlens.com"
+                    className="text-[#004ac6] font-semibold no-underline hover:underline"
+                >
+                    security@tumorlens.com
+                </a>
+                . We investigate every report and respond promptly to legitimate concerns.
+            </p>
+        ),
+    },
+];
+
+export const CompliancePage = () => (
+    <LegalLayout
+        icon="verified"
+        eyebrow="Trust & Compliance"
+        title="Compliance"
+        intro="Clinical software demands more than good intentions. Here is how TumorLens aligns with healthcare regulations and the security controls that protect every scan, report, and patient record on the platform."
+        lastUpdated="June 9, 2026"
+        sections={SECTIONS}
+    >
+        <div className="mt-12 pt-12 border-t" style={{ borderColor: "rgba(195,198,215,0.4)" }}>
+            <h2
+                className="text-2xl font-extrabold text-[#131b2e] mb-6"
+                style={{ fontFamily: "Manrope, sans-serif" }}
+            >
+                Standards We Align With
+            </h2>
+            <div className="grid grid-cols-1 sm:grid-cols-2 gap-4">
+                {CERTIFICATIONS.map((cert) => (
+                    <div
+                        key={cert.title}
+                        className="p-5 rounded-2xl flex items-start gap-4"
+                        style={{
+                            backgroundColor: "#f7f9fb",
+                            border: "1px solid rgba(195,198,215,0.35)",
+                        }}
+                    >
+                        <div className="w-11 h-11 rounded-xl bg-[#dbe1ff] flex items-center justify-center shrink-0">
+                            <MI name={cert.icon} className="text-[22px] text-[#004ac6]" />
+                        </div>
+                        <div>
+                            <h3
+                                className="font-bold text-[#131b2e] mb-1"
+                                style={{ fontFamily: "Manrope, sans-serif" }}
+                            >
+                                {cert.title}
+                            </h3>
+                            <p className="text-sm text-[#3f465c] leading-relaxed">{cert.desc}</p>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    </LegalLayout>
+);
diff --git a/client/src/features/legal/PrivacyPolicy.tsx b/client/src/features/legal/PrivacyPolicy.tsx
new file mode 100644
index 0000000..73e44fc
--- /dev/null
+++ b/client/src/features/legal/PrivacyPolicy.tsx
@@ -0,0 +1,145 @@
+import { LegalLayout, type LegalSection } from "./components/LegalLayout";
+
+const SECTIONS: LegalSection[] = [
+    {
+        heading: "Introduction",
+        body: (
+            <p>
+                TumorLens (&ldquo;we&rdquo;, &ldquo;us&rdquo;, or &ldquo;our&rdquo;) provides AI-assisted
+                brain tumor detection and clinical reporting tools for radiologists,
+                clinicians, and healthcare organizations. This Privacy Policy explains
+                what information we collect, how we use it, and the rights you have over
+                your data. Because TumorLens processes sensitive medical information, we
+                hold ourselves to strict privacy and security standards.
+            </p>
+        ),
+    },
+    {
+        heading: "Information We Collect",
+        body: (
+            <>
+                <p>We collect the following categories of information:</p>
+                <ul className="list-disc pl-5 space-y-2">
+                    <li>
+                        <strong>Account data</strong> — your name, email address,
+                        professional role, and organization details when you register.
+                    </li>
+                    <li>
+                        <strong>Clinical data</strong> — MRI scans, patient identifiers,
+                        and the diagnostic results generated for each scan you upload.
+                    </li>
+                    <li>
+                        <strong>Usage data</strong> — log information such as device, browser,
+                        IP address, and the actions you take within the platform.
+                    </li>
+                    <li>
+                        <strong>Billing data</strong> — subscription tier and payment
+                        metadata processed securely through our payment provider, Stripe.
+                    </li>
+                </ul>
+            </>
+        ),
+    },
+    {
+        heading: "How We Use Your Information",
+        body: (
+            <ul className="list-disc pl-5 space-y-2">
+                <li>To run AI analysis on uploaded scans and generate clinical reports.</li>
+                <li>To authenticate you and secure access to your account and records.</li>
+                <li>To maintain audit logs required for compliance and accountability.</li>
+                <li>To process subscriptions and deliver the features of your plan.</li>
+                <li>To notify you of results, account activity, and service updates.</li>
+                <li>To improve the accuracy, reliability, and safety of our models.</li>
+            </ul>
+        ),
+    },
+    {
+        heading: "Protected Health Information",
+        body: (
+            <p>
+                Patient scans and identifiers are treated as Protected Health Information
+                (PHI). We process PHI solely to deliver the diagnostic service you request.
+                We never sell PHI, and we do not use identifiable patient data to train
+                models without a separate, explicit agreement. Access to PHI is restricted
+                to authorized members of your organization and logged in tamper-evident
+                audit trails.
+            </p>
+        ),
+    },
+    {
+        heading: "Data Storage & Security",
+        body: (
+            <p>
+                All data is encrypted in transit (TLS) and at rest using AES-256. Scans and
+                reports are stored in access-controlled, S3-compatible object storage.
+                Authentication uses short-lived access tokens with HTTP-only refresh cookies,
+                and optional two-factor authentication (TOTP). We apply the principle of least
+                privilege across our infrastructure and continuously monitor for unauthorized
+                access.
+            </p>
+        ),
+    },
+    {
+        heading: "Data Sharing",
+        body: (
+            <>
+                <p>
+                    We do not sell your personal or clinical data. We share information only
+                    with:
+                </p>
+                <ul className="list-disc pl-5 space-y-2">
+                    <li>Members of your own organization, as governed by your access controls.</li>
+                    <li>
+                        Sub-processors who help operate the service (cloud hosting, payment
+                        processing, transactional email) under strict data-protection terms.
+                    </li>
+                    <li>Authorities where required by law or to protect patient safety.</li>
+                </ul>
+            </>
+        ),
+    },
+    {
+        heading: "Data Retention",
+        body: (
+            <p>
+                We retain clinical records for as long as your account is active or as required
+                to meet legal and regulatory obligations. You may request deletion of your data
+                at any time; we will honor such requests except where retention is legally
+                mandated. Audit logs may be retained separately to preserve their integrity.
+            </p>
+        ),
+    },
+    {
+        heading: "Your Rights",
+        body: (
+            <p>
+                Depending on your jurisdiction, you may have the right to access, correct,
+                export, or delete your personal data, and to object to or restrict certain
+                processing. To exercise any of these rights, contact us using the details
+                below and we will respond within the timeframe required by applicable law.
+            </p>
+        ),
+    },
+    {
+        heading: "Changes to This Policy",
+        body: (
+            <p>
+                We may update this Privacy Policy as our service evolves or as regulations
+                change. When we make material changes, we will notify you through the platform
+                or by email. Continued use of TumorLens after an update constitutes acceptance
+                of the revised policy.
+            </p>
+        ),
+    },
+];
+
+export const PrivacyPolicyPage = () => (
+    <LegalLayout
+        icon="shield_lock"
+        eyebrow="Privacy"
+        title="Privacy Policy"
+        intro="Your trust is the foundation of clinical software. This policy describes exactly what data TumorLens collects, why we collect it, and the controls we put in place to keep patient information safe."
+        lastUpdated="June 9, 2026"
+        sections={SECTIONS}
+    />
+);
diff --git a/client/src/features/legal/Support.tsx b/client/src/features/legal/Support.tsx
new file mode 100644
index 0000000..50edb8b
--- /dev/null
+++ b/client/src/features/legal/Support.tsx
@@ -0,0 +1,180 @@
+import { Link } from "@tanstack/react-router";
+import { LegalLayout, type LegalSection } from "./components/LegalLayout";
+import { MI } from "../../components/logo";
+
+const CHANNELS = [
+    {
+        icon: "mail",
+        title: "Email Support",
+        desc: "Get help with your account, billing, or scans.",
+        action: "support@tumorlens.com",
+        href: "mailto:support@tumorlens.com",
+    },
+    {
+        icon: "shield",
+        title: "Security & Privacy",
+        desc: "Report a vulnerability or ask about compliance.",
+        action: "security@tumorlens.com",
+        href: "mailto:security@tumorlens.com",
+    },
+    {
+        icon: "apartment",
+        title: "Enterprise & Sales",
+        desc: "Plans for hospitals, clinics, and large teams.",
+        action: "sales@tumorlens.com",
+        href: "mailto:sales@tumorlens.com",
+    },
+];
+
+const FAQS = [
+    {
+        q: "How do I upload an MRI scan?",
+        a: "Once signed in, open the dashboard and use “Upload Scan”. You can drag and drop a DICOM or standard image file, and analysis begins automatically.",
+    },
+    {
+        q: "How accurate is the AI detection?",
+        a: "TumorLens reports a confidence breakdown for every classification. It is a decision-support tool and should always be reviewed by a qualified clinician — it is not a substitute for professional diagnosis.",
+    },
+    {
+        q: "Is my patient data secure?",
+        a: "Yes. All data is encrypted in transit and at rest with AES-256, access is role-based and audited, and we never sell clinical data. See our Compliance and Privacy Policy pages for details.",
+    },
+    {
+        q: "How do I upgrade or cancel my plan?",
+        a: "Plans are managed from your account settings. You can upgrade at any time, and cancellations take effect at the end of your current billing period.",
+    },
+    {
+        q: "Can my whole organization use one account?",
+        a: "The Organization plan supports multiple members, role-based permissions, shared patient records, and audit logs across your team.",
+    },
+];
+
+const SECTIONS: LegalSection[] = [
+    {
+        heading: "Getting Started",
+        body: (
+            <p>
+                New to TumorLens? Create an account, sign in, and head to your dashboard to
+                upload your first MRI scan. The platform handles analysis and report generation
+                automatically — most scans return results in seconds. If you run into anything
+                along the way, the channels below will get you to a real person.
+            </p>
+        ),
+    },
+    {
+        heading: "Response Times",
+        body: (
+            <p>
+                We aim to respond to all support requests within one business day. Security
+                reports and issues affecting patient-facing functionality are prioritized.
+                Organization and Enterprise customers receive expedited support as part of their
+                plan.
+            </p>
+        ),
+    },
+];
+
+export const SupportPage = () => (
+    <LegalLayout
+        icon="support_agent"
+        eyebrow="Help Center"
+        title="Support"
+        intro="Need a hand? Whether it's a question about a scan, your subscription, or platform security, our team is here to help. Find the right channel below or browse the most common questions."
+        sections={SECTIONS}
+    >
+        {/* Contact channels */}
+        <div className="mt-12 pt-12 border-t" style={{ borderColor: "rgba(195,198,215,0.4)" }}>
+            <h2
+                className="text-2xl font-extrabold text-[#131b2e] mb-6"
+                style={{ fontFamily: "Manrope, sans-serif" }}
+            >
+                Contact Channels
+            </h2>
+            <div className="grid grid-cols-1 sm:grid-cols-3 gap-4">
+                {CHANNELS.map((channel) => (
+                    <a
+                        key={channel.title}
+                        href={channel.href}
+                        className="group p-6 rounded-2xl no-underline transition-all duration-300 hover:-translate-y-1 block"
+                        style={{
+                            backgroundColor: "#f7f9fb",
+                            border: "1px solid rgba(195,198,215,0.35)",
+                        }}
+                    >
+                        <div className="w-12 h-12 rounded-xl bg-[#dbe1ff] group-hover:bg-[#2563eb] flex items-center justify-center mb-5 transition-colors">
+                            <MI
+                                name={channel.icon}
+                                className="text-2xl text-[#004ac6] group-hover:text-white transition-colors"
+                            />
+                        </div>
+                        <h3
+                            className="font-bold text-[#131b2e] mb-1.5"
+                            style={{ fontFamily: "Manrope, sans-serif" }}
+                        >
+                            {channel.title}
+                        </h3>
+                        <p className="text-sm text-[#3f465c] leading-relaxed mb-4">
+                            {channel.desc}
+                        </p>
+                        <span className="text-sm font-bold text-[#004ac6] inline-flex items-center gap-1.5 group-hover:gap-2.5 transition-all">
+                            {channel.action}
+                            <MI name="arrow_forward" className="text-sm" />
+                        </span>
+                    </a>
+                ))}
+            </div>
+        </div>
+
+        {/* FAQ */}
+        <div className="mt-12 pt-12 border-t" style={{ borderColor: "rgba(195,198,215,0.4)" }}>
+            <h2
+                className="text-2xl font-extrabold text-[#131b2e] mb-6"
+                style={{ fontFamily: "Manrope, sans-serif" }}
+            >
+                Frequently Asked Questions
+            </h2>
+            <div className="space-y-4">
+                {FAQS.map((faq) => (
+                    <details
+                        key={faq.q}
+                        className="group rounded-2xl overflow-hidden"
+                        style={{
+                            backgroundColor: "#f7f9fb",
+                            border: "1px solid rgba(195,198,215,0.35)",
+                        }}
+                    >
+                        <summary className="flex items-center justify-between gap-4 px-6 py-5 cursor-pointer list-none select-none">
+                            <span
+                                className="font-bold text-[#131b2e]"
+                                style={{ fontFamily: "Manrope, sans-serif" }}
+                            >
+                                {faq.q}
+                            </span>
+                            <MI
+                                name="expand_more"
+                                className="text-2xl text-[#004ac6] transition-transform duration-300 group-open:rotate-180 shrink-0"
+                            />
+                        </summary>
+                        <p className="px-6 pb-5 text-[15px] text-[#3f465c] leading-relaxed">
+                            {faq.a}
+                        </p>
+                    </details>
+                ))}
+            </div>
+        </div>
+
+        {/* In-app help pointer */}
+        <div className="mt-10">
+            <p className="text-[15px] text-[#3f465c] leading-relaxed">
+                Already have an account? You can also reach support directly from the{" "}
+                <Link
+                    to="/login"
+                    className="text-[#004ac6] font-semibold no-underline hover:underline"
+                >
+                    in-app Help &amp; Support center
+                </Link>{" "}
+                after signing in.
+            </p>
+        </div>
+    </LegalLayout>
+);
diff --git a/client/src/features/legal/TermsOfService.tsx b/client/src/features/legal/TermsOfService.tsx
new file mode 100644
index 0000000..a1c4dae
--- /dev/null
+++ b/client/src/features/legal/TermsOfService.tsx
@@ -0,0 +1,137 @@
+import { LegalLayout, type LegalSection } from "./components/LegalLayout";
+
+const SECTIONS: LegalSection[] = [
+    {
+        heading: "Acceptance of Terms",
+        body: (
+            <p>
+                These Terms of Service (&ldquo;Terms&rdquo;) govern your access to and use of
+                TumorLens. By creating an account or using the platform, you agree to be bound
+                by these Terms. If you are using TumorLens on behalf of an organization, you
+                represent that you have authority to bind that organization to these Terms.
+            </p>
+        ),
+    },
+    {
+        heading: "Clinical Decision-Support Only",
+        body: (
+            <p>
+                TumorLens is a decision-support tool. Its AI outputs, classifications, and
+                generated reports are intended to assist qualified medical professionals and are
+                <strong> not a substitute for professional diagnosis</strong>, clinical judgment,
+                or direct patient care. You are responsible for independently reviewing all
+                results and for any clinical decision made using the platform.
+            </p>
+        ),
+    },
+    {
+        heading: "Eligibility & Accounts",
+        body: (
+            <p>
+                You must provide accurate registration information and keep your credentials
+                secure. You are responsible for all activity that occurs under your account.
+                Notify us immediately of any unauthorized access. We may suspend or terminate
+                accounts that violate these Terms or that pose a risk to patient safety or
+                platform integrity.
+            </p>
+        ),
+    },
+    {
+        heading: "Acceptable Use",
+        body: (
+            <>
+                <p>You agree not to:</p>
+                <ul className="list-disc pl-5 space-y-2">
+                    <li>Upload data you are not legally authorized to process.</li>
+                    <li>Reverse-engineer, scrape, or interfere with the platform or its models.</li>
+                    <li>Use the service to provide unsupervised, autonomous diagnosis.</li>
+                    <li>Share access credentials or circumvent plan and access controls.</li>
+                    <li>Attempt to access data belonging to other users or organizations.</li>
+                </ul>
+            </>
+        ),
+    },
+    {
+        heading: "Subscriptions & Billing",
+        body: (
+            <p>
+                Paid plans are billed in advance on a recurring basis through our payment
+                provider. Fees are non-refundable except where required by law. You may cancel
+                at any time; cancellation takes effect at the end of the current billing period.
+                We may change pricing with reasonable advance notice. Failure to pay may result
+                in suspension of paid features.
+            </p>
+        ),
+    },
+    {
+        heading: "Intellectual Property",
+        body: (
+            <p>
+                TumorLens, including its software, models, and branding, is owned by us and
+                protected by intellectual property laws. You retain all rights to the clinical
+                data and scans you upload. You grant us a limited license to process that data
+                solely to provide the service. We grant you a non-exclusive, non-transferable
+                right to use the platform in accordance with these Terms.
+            </p>
+        ),
+    },
+    {
+        heading: "Disclaimer of Warranties",
+        body: (
+            <p>
+                The platform is provided &ldquo;as is&rdquo; and &ldquo;as available&rdquo;
+                without warranties of any kind, whether express or implied, including
+                merchantability, fitness for a particular purpose, and non-infringement. We do
+                not warrant that AI outputs will be error-free or that the service will be
+                uninterrupted. Medical accuracy remains the responsibility of the treating
+                clinician.
+            </p>
+        ),
+    },
+    {
+        heading: "Limitation of Liability",
+        body: (
+            <p>
+                To the maximum extent permitted by law, TumorLens shall not be liable for any
+                indirect, incidental, special, or consequential damages, or for any clinical
+                decision made in reliance on the platform. Our total aggregate liability arising
+                from the service shall not exceed the amount you paid to us in the twelve months
+                preceding the claim.
+            </p>
+        ),
+    },
+    {
+        heading: "Termination",
+        body: (
+            <p>
+                You may stop using TumorLens at any time. We may suspend or terminate your access
+                if you breach these Terms, if required by law, or to protect the platform and its
+                users. Upon termination, your right to use the service ends, though certain
+                provisions — including those on liability, intellectual property, and data
+                retention — survive.
+            </p>
+        ),
+    },
+    {
+        heading: "Changes to These Terms",
+        body: (
+            <p>
+                We may revise these Terms from time to time. When changes are material, we will
+                provide notice through the platform or by email. Your continued use of TumorLens
+                after the effective date of the revised Terms constitutes acceptance of those
+                changes.
+            </p>
+        ),
+    },
+];
+
+export const TermsOfServicePage = () => (
+    <LegalLayout
+        icon="gavel"
+        eyebrow="Legal"
+        title="Terms of Service"
+        intro="These terms set out the rules for using TumorLens — your responsibilities, ours, and the boundaries that keep the platform safe for clinicians and patients alike. Please read them carefully."
+        lastUpdated="June 9, 2026"
+        sections={SECTIONS}
+    />
+);
diff --git a/client/src/features/legal/components/LegalLayout.tsx b/client/src/features/legal/components/LegalLayout.tsx
new file mode 100644
index 0000000..b5a53f0
--- /dev/null
+++ b/client/src/features/legal/components/LegalLayout.tsx
@@ -0,0 +1,250 @@
+import { Link } from "@tanstack/react-router";
+import { useEffect, useState, type ReactNode } from "react";
+import Logo from "../../../components/logo";
+import { MI } from "../../../components/logo";
+
+export type LegalSection = {
+    heading: string;
+    body: ReactNode;
+};
+
+const FOOTER_LINKS = [
+    { label: "Privacy Policy", to: "/privacy-policy" },
+    { label: "Terms of Service", to: "/terms-of-service" },
+    { label: "Compliance", to: "/compliance" },
+    { label: "Support", to: "/support" },
+] as const;
+
+type LegalLayoutProps = {
+    icon: string;
+    eyebrow: string;
+    title: string;
+    intro: string;
+    lastUpdated?: string;
+    sections: LegalSection[];
+    children?: ReactNode;
+};
+
+export const LegalLayout = ({
+    icon,
+    eyebrow,
+    title,
+    intro,
+    lastUpdated,
+    sections,
+    children,
+}: LegalLayoutProps) => {
+    const [scrolled, setScrolled] = useState(false);
+
+    useEffect(() => {
+        const onScroll = () => setScrolled(window.scrollY > 10);
+        window.addEventListener("scroll", onScroll);
+        return () => window.removeEventListener("scroll", onScroll);
+    }, []);
+
+    useEffect(() => {
+        window.scrollTo({ top: 0 });
+    }, []);
+
+    return (
+        <div
+            className="text-left w-full min-h-screen overflow-x-hidden"
+            style={{
+                fontFamily: "Inter, system-ui, sans-serif",
+                width: "100%",
+                backgroundColor: "#f7f9fb",
+                color: "#191c1e",
+            }}
+        >
+            {/* ════════════ NAVBAR ════════════ */}
+            <header
+                className="h-16 w-full fixed top-0 left-0 right-0 z-40 flex items-center justify-between px-8 transition-shadow duration-300"
+                style={{
+                    backgroundColor: "#f2f4f6",
+                    boxShadow: scrolled ? "0 2px 16px rgba(19,27,46,0.10)" : "none",
+                }}
+            >
+                <Logo nameColor="#131b2e" logoColor="#004ac6" />
+
+                <nav className="flex items-center gap-2">
+                    <Link
+                        to="/"
+                        className="px-5 h-10 rounded-lg font-bold text-[#3f465c] hover:text-[#004ac6] transition-all duration-200 flex items-center gap-1.5"
+                        style={{ fontSize: "0.9rem" }}
+                    >
+                        <MI name="arrow_back" className="text-base" />
+                        Back to home
+                    </Link>
+                    <Link
+                        to="/login"
+                        className="hidden sm:flex px-6 h-10 rounded-lg font-bold text-white hover:shadow-lg transition-all duration-200 items-center justify-center"
+                        style={{
+                            background: "linear-gradient(135deg, #2563eb 0%, #004ac6 100%)",
+                            boxShadow: "0 4px 16px rgba(0,74,198,0.25)",
+                            fontSize: "0.9rem",
+                        }}
+                    >
+                        Sign in
+                    </Link>
+                </nav>
+            </header>
+
+            {/* ════════════ HERO ════════════ */}
+            <section
+                className="relative overflow-hidden pt-32 pb-16"
+                style={{
+                    backgroundColor: "#f7f9fb",
+                    backgroundImage: `url("data:image/svg+xml,%3Csvg width='40' height='40' viewBox='0 0 40 40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='1' cy='1' r='1' fill='%23004ac6' fill-opacity='0.04'/%3E%3C/svg%3E")`,
+                }}
+            >
+                <div className="max-w-4xl mx-auto px-6 lg:px-8">
+                    <div className="anim-fade-up">
+                        <div className="inline-flex items-center gap-2 px-3 py-1 rounded-full text-xs font-bold tracking-widest uppercase mb-6 bg-[#dae2fd] text-[#565e74]">
+                            <MI name={icon} className="text-base text-[#004ac6]" />
+                            {eyebrow}
+                        </div>
+                        <h1
+                            className="text-4xl lg:text-5xl font-extrabold text-[#131b2e] leading-[1.1] tracking-tight mb-6"
+                            style={{ fontFamily: "Manrope, sans-serif" }}
+                        >
+                            {title}
+                        </h1>
+                        <p className="text-lg text-[#3f465c] leading-relaxed max-w-3xl">
+                            {intro}
+                        </p>
+                        {lastUpdated && (
+                            <p className="mt-6 text-sm font-semibold text-[#737686] uppercase tracking-widest">
+                                Last updated · {lastUpdated}
+                            </p>
+                        )}
+                    </div>
+                </div>
+            </section>
+
+            {/* ════════════ BODY ════════════ */}
+            <section className="pb-24" style={{ backgroundColor: "#f7f9fb" }}>
+                <div className="max-w-4xl mx-auto px-6 lg:px-8">
+                    <div
+                        className="rounded-3xl p-8 lg:p-12"
+                        style={{
+                            backgroundColor: "#ffffff",
+                            border: "1px solid rgba(195,198,215,0.35)",
+                            boxShadow: "0 8px 32px rgba(0,74,198,0.06)",
+                        }}
+                    >
+                        <div className="space-y-12">
+                            {sections.map((section, idx) => (
+                                <div key={section.heading} className="scroll-mt-24">
+                                    <div className="flex items-baseline gap-3 mb-4">
+                                        <span
+                                            className="text-sm font-black text-[#004ac6]/40 leading-none select-none"
+                                            style={{ fontFamily: "Manrope, sans-serif" }}
+                                        >
+                                            {String(idx + 1).padStart(2, "0")}
+                                        </span>
+                                        <h2
+                                            className="text-2xl font-extrabold text-[#131b2e]"
+                                            style={{ fontFamily: "Manrope, sans-serif" }}
+                                        >
+                                            {section.heading}
+                                        </h2>
+                                    </div>
+                                    <div className="text-[15px] text-[#3f465c] leading-relaxed space-y-4 pl-0 md:pl-9">
+                                        {section.body}
+                                    </div>
+                                </div>
+                            ))}
+                        </div>
+
+                        {children}
+                    </div>
+
+                    {/* Contact strip */}
+                    <div
+                        className="mt-10 p-6 lg:p-8 rounded-2xl flex flex-col sm:flex-row items-start sm:items-center justify-between gap-4"
+                        style={{ backgroundColor: "#131b2e" }}
+                    >
+                        <div className="flex items-center gap-4">
+                            <div className="w-11 h-11 rounded-xl bg-white/10 flex items-center justify-center shrink-0">
+                                <MI name="mail" className="text-[#b4c5ff] text-xl" />
+                            </div>
+                            <div>
+                                <p
+                                    className="text-white font-bold"
+                                    style={{ fontFamily: "Manrope, sans-serif" }}
+                                >
+                                    Questions about this page?
+                                </p>
+                                <p className="text-slate-400 text-sm">
+                                    Reach our team at{" "}
+                                    <a
+                                        href="mailto:legal@tumorlens.com"
+                                        className="text-[#b4c5ff] font-semibold no-underline hover:underline"
+                                    >
+                                        legal@tumorlens.com
+                                    </a>
+                                </p>
+                            </div>
+                        </div>
+                        <Link
+                            to="/support"
+                            className="px-6 h-11 rounded-lg font-bold bg-white text-[#131b2e] hover:bg-slate-100 transition-all duration-200 flex items-center justify-center shrink-0"
+                            style={{ fontFamily: "Manrope, sans-serif", fontSize: "0.9rem" }}
+                        >
+                            Contact Support
+                        </Link>
+                    </div>
+                </div>
+            </section>
+
+            {/* ════════════ FOOTER ════════════ */}
+            <footer
+                className="py-16 border-t"
+                style={{
+                    backgroundColor: "#f7f9fb",
+                    borderColor: "rgba(195,198,215,0.15)",
+                }}
+            >
+                <div className="max-w-7xl mx-auto px-6 lg:px-8">
+                    <div className="flex flex-col md:flex-row justify-between items-start md:items-center gap-8 mb-12">
+                        <div className="flex items-center gap-2">
+                            <MI name="neurology" fill className="text-[#004ac6] text-2xl" />
+                            <span
+                                className="text-xl font-extrabold tracking-tight text-[#131b2e]"
+                                style={{ fontFamily: "Manrope, sans-serif" }}
+                            >
+                                TumorLens
+                            </span>
+                        </div>
+                        <div className="flex flex-wrap gap-8 text-sm text-[#3f465c]">
+                            {FOOTER_LINKS.map((link) => (
+                                <Link
+                                    key={link.to}
+                                    to={link.to}
+                                    className="hover:text-[#004ac6] transition-colors no-underline"
+                                >
+                                    {link.label}
+                                </Link>
+                            ))}
+                        </div>
+                    </div>
+
+                    <div
+                        className="p-6 rounded-lg text-center"
+                        style={{ backgroundColor: "#e6e8ea" }}
+                    >
+                        <p className="text-sm text-[#3f465c]">
+                            <span className="font-bold text-[#131b2e]">TumorLens |</span>{" "}
+                            For decision-support use only. Not a substitute for professional
+                            diagnosis.
+                        </p>
+                    </div>
+
+                    <div className="mt-8 text-center text-xs text-[#737686] uppercase tracking-widest">
+                        © 2026 TumorLens. All Rights Reserved.
+                    </div>
+                </div>
+            </footer>
+        </div>
+    );
+};
diff --git a/client/src/features/legal/route.ts b/client/src/features/legal/route.ts
new file mode 100644
index 0000000..4672809
--- /dev/null
+++ b/client/src/features/legal/route.ts
@@ -0,0 +1,30 @@
+import { createRoute } from "@tanstack/react-router";
+import { rootRoute } from "../../rootRoute";
+import { PrivacyPolicyPage } from "./PrivacyPolicy";
+import { TermsOfServicePage } from "./TermsOfService";
+import { CompliancePage } from "./Compliance";
+import { SupportPage } from "./Support";
+
+export const PrivacyPolicyRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/privacy-policy",
+    component: PrivacyPolicyPage,
+});
+
+export const TermsOfServiceRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/terms-of-service",
+    component: TermsOfServicePage,
+});
+
+export const ComplianceRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/compliance",
+    component: CompliancePage,
+});
+
+export const SupportRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/support",
+    component: SupportPage,
+});
diff --git a/client/src/router.ts b/client/src/router.ts
index dcab9fa..695fed3 100644
--- a/client/src/router.ts
+++ b/client/src/router.ts
@@ -11,7 +11,6 @@ import { ScanResultsRoute } from "./features/dashboard/ScanResults/route";
 import { ScanDetailRoute } from "./features/dashboard/ScanResults/route";
 import { ReportsPageRoute, ReportsShareRoute } from "./features/dashboard/Reports/route";
 import { ReportsDetailRoute } from "./features/dashboard/Reports/route";
-import { HistoryPageRoute } from "./features/dashboard/History";
 import { SettingsPageRoute } from "./features/dashboard/Settings/route";
 import { HelpSupportPageRoute } from "./features/dashboard/Help&Support/route";
 import { PlansPageRoute } from "./features/dashboard/Plans/route";
@@ -33,6 +32,12 @@ import {
     SuperAdminTicketsRoute,
     SuperAdminTicketDetailRoute,
 } from "./features/superadmin/route";
+import {
+    PrivacyPolicyRoute,
+    TermsOfServiceRoute,
+    ComplianceRoute,
+    SupportRoute,
+} from "./features/legal/route";
 
 const routeTree = rootRoute.addChildren([
     AppLayoutRoute.addChildren([
@@ -42,7 +47,6 @@ const routeTree = rootRoute.addChildren([
         ScanDetailRoute,
         ReportsPageRoute,
         ReportsDetailRoute,
-        HistoryPageRoute,
         SettingsPageRoute,
         HelpSupportPageRoute,
         PlansPageRoute,
@@ -62,6 +66,10 @@ const routeTree = rootRoute.addChildren([
     ForgotPasswordPageRoute,
     ResetPasswordPageRoute,
     GoogleCallbackRoute,
+    PrivacyPolicyRoute,
+    TermsOfServiceRoute,
+    ComplianceRoute,
+    SupportRoute,
     SuperAdminRoute.addChildren([
         SuperAdminUsersRoute,
         SuperAdminBillingRoute,
diff --git a/client/vite.config.ts b/client/vite.config.ts
index fba1fce..8ff8447 100644
--- a/client/vite.config.ts
+++ b/client/vite.config.ts
@@ -15,6 +15,11 @@ export default defineConfig(({ mode }) => {
       tailwindcss(),
     ],
     server: {
+      watch: {
+        usePolling: true,
+        interval: 300,
+        ignored: ['**/node_modules/**', '**/dist/**', '**/.git/**'],
+      },
       proxy: {
         '/api': {
           target: apiTarget,
diff --git a/docker-compose.yml b/docker-compose.yml
index 12f5882..a1860e6 100644
--- a/docker-compose.yml
+++ b/docker-compose.yml
@@ -85,7 +85,7 @@ services:
     volumes:
       - redis_data:/data
     ports:
-      - "6379:6379"
+      - "6380:6379"
     networks:
       - tumorlens
     healthcheck:
diff --git a/server/src/Notifications/mail.service.ts b/server/src/Notifications/mail.service.ts
index 6e08e9c..d243b8a 100644
--- a/server/src/Notifications/mail.service.ts
+++ b/server/src/Notifications/mail.service.ts
@@ -391,4 +391,47 @@ export class MailService {
             }),
         });
     }
+
+    async sendSupportRequest(data: {
+        topicLabel: string;
+        message: string;
+        fromName: string;
+        fromEmail: string;
+        plan?: string;
+    }) {
+        const supportInbox = 'contact@tumorlens.health';
+        const safeMessage = data.message
+            .replace(/&/g, '&amp;')
+            .replace(/</g, '&lt;')
+            .replace(/>/g, '&gt;')
+            .replace(/\n/g, '<br/>');
+
+        await this.resend.emails.send({
+            from: this.fromElm,
+            to: supportInbox,
+            replyTo: data.fromEmail,
+            subject: `[Support] ${data.topicLabel} — ${data.fromName}`,
+            html: this.buildEmail({
+                title: 'New support request',
+                subtitle: `${data.fromName} submitted a message via the Help & Support page`,
+                body: `
+                    <table width="100%" cellpadding="0" cellspacing="0" style="margin-bottom:24px;">
+                        <tr>
+                        <td style="background-color:#f7f9fb;border:1px solid rgba(195,198,215,0.35);border-radius:10px;padding:18px 20px;">
+                            <p style="margin:0 0 6px;font-size:11px;font-weight:700;color:#737686;text-transform:uppercase;letter-spacing:0.08em;">From</p>
+                            <p style="margin:0 0 14px;font-size:14px;color:#131b2e;">${data.fromName} &lt;<a href="mailto:${data.fromEmail}" style="color:#004ac6;text-decoration:none;">${data.fromEmail}</a>&gt;</p>
+                            <p style="margin:0 0 6px;font-size:11px;font-weight:700;color:#737686;text-transform:uppercase;letter-spacing:0.08em;">Topic</p>
+                            <p style="margin:0${data.plan ? ' 0 14px' : ''};font-size:14px;color:#131b2e;">${data.topicLabel}</p>
+                            ${data.plan ? `<p style="margin:0 0 6px;font-size:11px;font-weight:700;color:#737686;text-transform:uppercase;letter-spacing:0.08em;">Plan</p>
+                            <p style="margin:0;font-size:14px;color:#131b2e;">${data.plan}</p>` : ''}
+                        </td>
+                        </tr>
+                    </table>
+
+                    <p style="margin:0 0 8px;font-size:11px;font-weight:700;color:#737686;text-transform:uppercase;letter-spacing:0.08em;">Message</p>
+                    <p style="margin:0;font-size:15px;color:#5c647a;line-height:1.7;">${safeMessage}</p>`,
+                footerNote: `Reply directly to this email to respond to ${data.fromName}.`,
+            }),
+        });
+    }
 }
diff --git a/server/src/Support/support.controller.ts b/server/src/Support/support.controller.ts
new file mode 100644
index 0000000..de95797
--- /dev/null
+++ b/server/src/Support/support.controller.ts
@@ -0,0 +1,14 @@
+import { Body, Controller, Post, Req, UseGuards } from '@nestjs/common';
+import { JwtAccessGuard } from '../auth/guards/jwt-access.guard';
+import { SupportService } from './support.service';
+
+@Controller('support')
+@UseGuards(JwtAccessGuard)
+export class SupportController {
+    constructor(private supportService: SupportService) {}
+
+    @Post('contact')
+    async contact(@Req() req: any, @Body() data: { topic: string; message: string }) {
+        return this.supportService.submitContact(req.user.userId, data);
+    }
+}
diff --git a/server/src/Support/support.module.ts b/server/src/Support/support.module.ts
new file mode 100644
index 0000000..da73197
--- /dev/null
+++ b/server/src/Support/support.module.ts
@@ -0,0 +1,11 @@
+import { Module } from '@nestjs/common';
+import { SupportController } from './support.controller';
+import { SupportService } from './support.service';
+import { PrismaService } from '../../prisma/prisma.service';
+import { MailService } from '../Notifications/mail.service';
+
+@Module({
+    controllers: [SupportController],
+    providers: [SupportService, PrismaService, MailService],
+})
+export class SupportModule {}
diff --git a/server/src/Support/support.service.ts b/server/src/Support/support.service.ts
new file mode 100644
index 0000000..b7178f8
--- /dev/null
+++ b/server/src/Support/support.service.ts
@@ -0,0 +1,51 @@
+import { BadRequestException, Injectable, NotFoundException } from '@nestjs/common';
+import { PrismaService } from '../../prisma/prisma.service';
+import { MailService } from '../Notifications/mail.service';
+
+const TOPIC_LABELS: Record<string, string> = {
+    scan: 'Upload or scan issue',
+    report: 'Report generation problem',
+    billing: 'Account or billing question',
+    privacy: 'Privacy or security concern',
+    feature: 'Feature request',
+    other: 'Other',
+};
+
+@Injectable()
+export class SupportService {
+    constructor(
+        private prisma: PrismaService,
+        private mailService: MailService,
+    ) {}
+
+    async submitContact(userId: string, data: { topic: string; message: string }) {
+        const topic = (data.topic || '').trim();
+        const message = (data.message || '').trim();
+
+        if (!topic || !TOPIC_LABELS[topic]) {
+            throw new BadRequestException('Please select a valid topic.');
+        }
+        if (message.length < 10) {
+            throw new BadRequestException('Please describe your issue in at least 10 characters.');
+        }
+        if (message.length > 5000) {
+            throw new BadRequestException('Message is too long (max 5000 characters).');
+        }
+
+        const user = await this.prisma.user.findUnique({
+            where: { id: userId },
+            select: { email: true, username: true, plan: true },
+        });
+        if (!user) throw new NotFoundException('User not found.');
+
+        await this.mailService.sendSupportRequest({
+            topicLabel: TOPIC_LABELS[topic],
+            message,
+            fromName: user.username,
+            fromEmail: user.email,
+            plan: user.plan,
+        });
+
+        return { message: 'Your message has been sent. We typically respond within 24 hours.' };
+    }
+}
diff --git a/server/src/app.module.ts b/server/src/app.module.ts
index 7bc58c3..4dcc1de 100644
--- a/server/src/app.module.ts
+++ b/server/src/app.module.ts
@@ -18,6 +18,7 @@ import { TasksModule } from './Tasks/tasks.module';
 import { EventEmitterModule } from '@nestjs/event-emitter';
 import { PublicApiModule } from './Public-API/public-api.module';
 import { SuperAdminModule } from './SuperAdmin/super-admin.module';
+import { SupportModule } from './Support/support.module';
 
 @Module({
     imports: [
@@ -46,6 +47,7 @@ import { SuperAdminModule } from './SuperAdmin/super-admin.module';
         TasksModule,
         PublicApiModule,
         SuperAdminModule,
+        SupportModule,
     ],
     controllers: [],
     providers: [],
diff --git a/server/src/auth/auth.controller.ts b/server/src/auth/auth.controller.ts
index 9e0de35..90eff0a 100644
--- a/server/src/auth/auth.controller.ts
+++ b/server/src/auth/auth.controller.ts
@@ -4,6 +4,7 @@ import type { Response } from 'express';
 import { AuthService } from './auth.service';
 import { JwtRefreshGuard } from './guards/jwt-refresh.guard';
 import { JwtAccessGuard } from './guards/jwt-access.guard';
+import { TurnstileGuard } from './guards/turnstile.guard';
 
 @Controller('auth')
 export class AuthController {
@@ -29,9 +30,10 @@ export class AuthController {
 
     // Register
     @Post('register')
+    @UseGuards(TurnstileGuard)
     async register(
         @Req() req: any,
-        @Body() data: { email: string; password: string; username: string },
+        @Body() data: { email: string; password: string; username: string; turnstileToken?: string },
         @Res({ passthrough: true }) res: Response,
     ) {
         const { refreshToken, ...result } = await this.authService.register({
@@ -44,9 +46,10 @@ export class AuthController {
 
     // Login
     @Post('login')
+    @UseGuards(TurnstileGuard)
     async login(
         @Req() req: any,
-        @Body() data: { email: string; password: string; twoFactorCode?: string },
+        @Body() data: { email: string; password: string; twoFactorCode?: string; turnstileToken?: string },
         @Res({ passthrough: true }) res: Response,
     ) {
         const result = await this.authService.login({
diff --git a/server/src/auth/guards/turnstile.guard.ts b/server/src/auth/guards/turnstile.guard.ts
new file mode 100644
index 0000000..7293b2e
--- /dev/null
+++ b/server/src/auth/guards/turnstile.guard.ts
@@ -0,0 +1,51 @@
+import {
+    CanActivate,
+    ExecutionContext,
+    Injectable,
+    BadRequestException,
+    ForbiddenException,
+} from '@nestjs/common';
+
+@Injectable()
+export class TurnstileGuard implements CanActivate {
+    async canActivate(context: ExecutionContext): Promise<boolean> {
+        const secret = process.env.TURNSTILE_SECRET_KEY;
+        if (!secret) return true;
+
+        const req = context.switchToHttp().getRequest();
+        const body = req.body ?? {};
+
+        // Second step of 2FA login already passed Turnstile on the first submit.
+        if (body.twoFactorCode) return true;
+
+        const token = body.turnstileToken;
+        if (!token || typeof token !== 'string') {
+            throw new BadRequestException('Captcha verification required');
+        }
+
+        const forwarded = (req.headers?.['x-forwarded-for'] as string) || '';
+        const ip = forwarded.split(',')[0].trim() || req.ip;
+
+        const form = new URLSearchParams();
+        form.append('secret', secret);
+        form.append('response', token);
+        if (ip) form.append('remoteip', ip);
+
+        let outcome: { success?: boolean } = {};
+        try {
+            const res = await fetch('https://challenges.cloudflare.com/turnstile/v0/siteverify', {
+                method: 'POST',
+                headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
+                body: form,
+            });
+            outcome = (await res.json()) as { success?: boolean };
+        } catch {
+            throw new ForbiddenException('Captcha verification failed');
+        }
+
+        if (!outcome.success) {
+            throw new ForbiddenException('Captcha verification failed');
+        }
+        return true;
+    }
+}