diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 6bb8fe2..9d0a8c5 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -12,7 +12,11 @@
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-markdown": "^9.0.1",
-        "react-router-dom": "^6.26.0"
+        "react-router-dom": "^6.26.0",
+        "rehype-highlight": "^7.0.2",
+        "rehype-katex": "^7.0.1",
+        "remark-gfm": "^4.0.1",
+        "remark-math": "^6.0.0"
       },
       "devDependencies": {
         "@types/react": "^18.3.1",
@@ -1251,6 +1255,12 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/katex": {
+      "version": "0.16.8",
+      "resolved": "https://registry.npmjs.org/@types/katex/-/katex-0.16.8.tgz",
+      "integrity": "sha512-trgaNyfU+Xh2Tc+ABIb44a5AYUpicB3uwirOioeOkNPPbmgRNtcWyDeeFRzjPZENO9Vq8gvVqfhaaXWLlevVwg==",
+      "license": "MIT"
+    },
     "node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
@@ -1734,6 +1744,18 @@
       "dev": true,
       "license": "ISC"
     },
+    "node_modules/entities": {
+      "version": "6.0.1",
+      "resolved": "https://registry.npmjs.org/entities/-/entities-6.0.1.tgz",
+      "integrity": "sha512-aN97NXWF6AWBTahfVOIrB/NShkzi5H7F9r1s9mD3cDj4Ko5f2qhhVoYMibXF7GlLveb/D2ioWay8lxI97Ven3g==",
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=0.12"
+      },
+      "funding": {
+        "url": "https://github.com/fb55/entities?sponsor=1"
+      }
+    },
     "node_modules/esbuild": {
       "version": "0.21.5",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.21.5.tgz",
@@ -1783,6 +1805,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "license": "MIT",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/estree-util-is-identifier-name": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
@@ -1927,6 +1961,101 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-from-dom": {
+      "version": "5.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-from-dom/-/hast-util-from-dom-5.0.1.tgz",
+      "integrity": "sha512-N+LqofjR2zuzTjCPzyDUdSshy4Ma6li7p/c3pA78uTwzFgENbgbUrm2ugwsOdcjI1muO+o6Dgzp9p8WHtn/39Q==",
+      "license": "ISC",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hastscript": "^9.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html/-/hast-util-from-html-2.0.3.tgz",
+      "integrity": "sha512-CUSRHXyKjzHov8yKsQjGOElXy/3EKpyX56ELnkHH34vDVw1N1XSQ1ZcAvTyAPtGqLTuKP/uxM+aLkSPqF/EtMw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.1.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "parse5": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-html-isomorphic": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-from-html-isomorphic/-/hast-util-from-html-isomorphic-2.0.0.tgz",
+      "integrity": "sha512-zJfpXq44yff2hmE0XmwEOzdWin5xwH+QIhMLOScpX91e/NSGPsAzNCvLQDIEPyO2TXi+lBmU6hjLIhV8MwP2kw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-from-dom": "^5.0.0",
+        "hast-util-from-html": "^2.0.0",
+        "unist-util-remove-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.3",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.3.tgz",
+      "integrity": "sha512-3kxEVkEKt0zvcZ3hCRYI8rqrgwtlIOFMWkbclACvjlDw8Li9S2hk/d51OI0nr/gIpdMHNepwgOKqZ/sy0Clpyg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^9.0.0",
+        "property-information": "^7.0.0",
+        "vfile": "^6.0.0",
+        "vfile-location": "^5.0.0",
+        "web-namespaces": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-is-element": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-is-element/-/hast-util-is-element-3.0.0.tgz",
+      "integrity": "sha512-Val9mnv2IWpLbNPqc/pUem+a7Ipj2aHacCwgNfTiK0vJKl0LF+4Ba4+v1oPHFpf3bLYmreq0/l3Gud9S5OH42g==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-parse-selector": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-parse-selector/-/hast-util-parse-selector-4.0.0.tgz",
+      "integrity": "sha512-wkQCkSYoOGCRKERFWcxMVMOcYE2K1AaNLU8DXS9arxnLOUEWbOXKXiJUNzEpqZ3JOKpnha3jkFrumEjVliDe7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-to-jsx-runtime": {
       "version": "2.3.6",
       "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.6.tgz",
@@ -1954,6 +2083,22 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hast-util-to-text": {
+      "version": "4.0.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-text/-/hast-util-to-text-4.0.2.tgz",
+      "integrity": "sha512-KK6y/BN8lbaq654j7JgBydev7wuNMcID54lkRav1P0CaE1e47P72AWWPiGKXTJU271ooYzcvTAn/Zt0REnvc7A==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "hast-util-is-element": "^3.0.0",
+        "unist-util-find-after": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hast-util-whitespace": {
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/hast-util-whitespace/-/hast-util-whitespace-3.0.0.tgz",
@@ -1967,6 +2112,32 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/hastscript": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-9.0.1.tgz",
+      "integrity": "sha512-g7df9rMFX/SPi34tyGCyUBREQoKkapwdY/T04Qn9TDWfHhAYt4/I0gMVirzK5wEzeUqIjEB+LXC/ypb7Aqno5w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^7.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/highlight.js": {
+      "version": "11.11.1",
+      "resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-11.11.1.tgz",
+      "integrity": "sha512-Xwwo44whKBVCYoliBQwaPvtd/2tYFkRQtXDWj1nackaV2JPXx3L0+Jvd8/qCJ2p+ML0/XVkJ2q+Mr+UVdpJK5w==",
+      "license": "BSD-3-Clause",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/html-url-attributes": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/html-url-attributes/-/html-url-attributes-3.0.1.tgz",
@@ -2143,6 +2314,31 @@
         "node": ">=6"
       }
     },
+    "node_modules/katex": {
+      "version": "0.16.33",
+      "resolved": "https://registry.npmjs.org/katex/-/katex-0.16.33.tgz",
+      "integrity": "sha512-q3N5u+1sY9Bu7T4nlXoiRBXWfwSefNGoKeOwekV+gw0cAXQlz2Ww6BLcmBxVDeXBMUDQv6fK5bcNaJLxob3ZQA==",
+      "funding": [
+        "https://opencollective.com/katex",
+        "https://github.com/sponsors/katex"
+      ],
+      "license": "MIT",
+      "dependencies": {
+        "commander": "^8.3.0"
+      },
+      "bin": {
+        "katex": "cli.js"
+      }
+    },
+    "node_modules/katex/node_modules/commander": {
+      "version": "8.3.0",
+      "resolved": "https://registry.npmjs.org/commander/-/commander-8.3.0.tgz",
+      "integrity": "sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==",
+      "license": "MIT",
+      "engines": {
+        "node": ">= 12"
+      }
+    },
     "node_modules/lilconfig": {
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-3.1.3.tgz",
@@ -2185,6 +2381,21 @@
         "loose-envify": "cli.js"
       }
     },
+    "node_modules/lowlight": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lowlight/-/lowlight-3.3.0.tgz",
+      "integrity": "sha512-0JNhgFoPvP6U6lE/UdVsSq99tn6DhjjpAj5MxG49ewd2mOBVtwWYIT8ClyABhq198aXXODMU6Ox8DrGy/CpTZQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "highlight.js": "~11.11.0"
+      },
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/lru-cache": {
       "version": "5.1.1",
       "resolved": "https://registry.npmjs.org/lru-cache/-/lru-cache-5.1.1.tgz",
@@ -2204,6 +2415,32 @@
         "react": "^16.5.1 || ^17.0.0 || ^18.0.0 || ^19.0.0-rc"
       }
     },
+    "node_modules/markdown-table": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/markdown-table/-/markdown-table-3.0.4.tgz",
+      "integrity": "sha512-wiYz4+JrLyb/DqW2hkFJxP7Vd7JuTDm77fvbM8VfEQdmSMqcImWeeRbHwZjBjIFki/VaMK2BhFi7oUUZeM5bqw==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
+    "node_modules/mdast-util-find-and-replace": {
+      "version": "3.0.2",
+      "resolved": "https://registry.npmjs.org/mdast-util-find-and-replace/-/mdast-util-find-and-replace-3.0.2.tgz",
+      "integrity": "sha512-Tmd1Vg/m3Xz43afeNxDIhWRtFZgM2VLyaf4vSTYwudTyeuTneoL3qtWMA5jeLyz/O1vDJmmV4QuScFCA2tBPwg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "escape-string-regexp": "^5.0.0",
+        "unist-util-is": "^6.0.0",
+        "unist-util-visit-parents": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-from-markdown": {
       "version": "2.0.3",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.3.tgz",
@@ -2228,6 +2465,126 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/mdast-util-gfm": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm/-/mdast-util-gfm-3.1.0.tgz",
+      "integrity": "sha512-0ulfdQOM3ysHhCJ1p06l0b0VKlhU0wuQs3thxZQagjcjPrlFRqY215uZGHHJan9GEAXd9MbfPjFJz+qMkVR6zQ==",
+      "license": "MIT",
+      "dependencies": {
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-gfm-autolink-literal": "^2.0.0",
+        "mdast-util-gfm-footnote": "^2.0.0",
+        "mdast-util-gfm-strikethrough": "^2.0.0",
+        "mdast-util-gfm-table": "^2.0.0",
+        "mdast-util-gfm-task-list-item": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-autolink-literal": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-autolink-literal/-/mdast-util-gfm-autolink-literal-2.0.1.tgz",
+      "integrity": "sha512-5HVP2MKaP6L+G6YaxPNjuL0BPrq9orG3TsrZ9YXbA3vDw/ACI4MEsnoDpn6ZNm7GnZgtAcONJyPhOP8tNJQavQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "ccount": "^2.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-find-and-replace": "^3.0.0",
+        "micromark-util-character": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-footnote/-/mdast-util-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-sqpDWlsHn7Ac9GNZQMeUzPQSMzR6Wv0WKRNvQRg0KqHh02fpTz69Qc1QSseNX29bhz1ROIyNyxExfawVKTm1GQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.1.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-strikethrough": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-strikethrough/-/mdast-util-gfm-strikethrough-2.0.0.tgz",
+      "integrity": "sha512-mKKb915TF+OC5ptj5bJ7WFRPdYtuHv0yTRxK2tJvi+BDqbkiG7h7u/9SI89nRAYcmap2xHQL9D+QG/6wSrTtXg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-table": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-table/-/mdast-util-gfm-table-2.0.0.tgz",
+      "integrity": "sha512-78UEvebzz/rJIxLvE7ZtDd/vIQ0RHv+3Mh5DR96p7cS7HsBhYIICDBCu8csTNWNO6tBWfqXPWekRuj2FNOGOZg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "markdown-table": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-gfm-task-list-item": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-gfm-task-list-item/-/mdast-util-gfm-task-list-item-2.0.0.tgz",
+      "integrity": "sha512-IrtvNvjxC1o06taBAVJznEnkiHxLFTzgonUdy8hzFVeDun0uTjxxrRGVaNFqkU1wJR3RBPEfsxmU6jDWPofrTQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-math": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-math/-/mdast-util-math-3.0.0.tgz",
+      "integrity": "sha512-Tl9GBNeG/AhJnQM221bJR2HPvLOSnLE/T9cJI9tlc6zwQk2nPk/4f0cHkOdEixQPC/j8UtKDdITswvLAy1OZ1w==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "devlop": "^1.0.0",
+        "longest-streak": "^3.0.0",
+        "mdast-util-from-markdown": "^2.0.0",
+        "mdast-util-to-markdown": "^2.1.0",
+        "unist-util-remove-position": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/mdast-util-mdx-expression": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
@@ -2436,6 +2793,146 @@
         "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-extension-gfm": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm/-/micromark-extension-gfm-3.0.0.tgz",
+      "integrity": "sha512-vsKArQsicm7t0z2GugkCKtZehqUm31oeGBV/KVSorWSy8ZlNAv7ytjFhvaryUiCUJYqs+NoE6AFhpQvBTM6Q4w==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-extension-gfm-autolink-literal": "^2.0.0",
+        "micromark-extension-gfm-footnote": "^2.0.0",
+        "micromark-extension-gfm-strikethrough": "^2.0.0",
+        "micromark-extension-gfm-table": "^2.0.0",
+        "micromark-extension-gfm-tagfilter": "^2.0.0",
+        "micromark-extension-gfm-task-list-item": "^2.0.0",
+        "micromark-util-combine-extensions": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-autolink-literal": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-autolink-literal/-/micromark-extension-gfm-autolink-literal-2.1.0.tgz",
+      "integrity": "sha512-oOg7knzhicgQ3t4QCjCWgTmfNhvQbDDnJeVu9v81r7NltNCVmhPy1fJRX27pISafdjL+SVc4d3l48Gb6pbRypw==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-footnote": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-footnote/-/micromark-extension-gfm-footnote-2.1.0.tgz",
+      "integrity": "sha512-/yPhxI1ntnDNsiHtzLKYnE3vf9JZ6cAisqVDauhp4CEHxlb4uoOTxOCJ+9s51bIB8U1N1FJ1RXOKTIlD5B/gqw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-core-commonmark": "^2.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-normalize-identifier": "^2.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-strikethrough": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-strikethrough/-/micromark-extension-gfm-strikethrough-2.1.0.tgz",
+      "integrity": "sha512-ADVjpOOkjz1hhkZLlBiYA9cR2Anf8F4HqZUO6e5eDcPQd0Txw5fxLzzxnEkSkfnD0wziSGiv7sYhk/ktvbf1uw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-util-chunked": "^2.0.0",
+        "micromark-util-classify-character": "^2.0.0",
+        "micromark-util-resolve-all": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-table": {
+      "version": "2.1.1",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-table/-/micromark-extension-gfm-table-2.1.1.tgz",
+      "integrity": "sha512-t2OU/dXXioARrC6yWfJ4hqB7rct14e8f7m0cbI5hUmDyyIlwv5vEtooptH8INkbLzOatzKuVbQmAYcbWoyz6Dg==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-tagfilter": {
+      "version": "2.0.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-tagfilter/-/micromark-extension-gfm-tagfilter-2.0.0.tgz",
+      "integrity": "sha512-xHlTOmuCSotIA8TW1mDIM6X2O1SiX5P9IuDtqGonFhEK0qgRI4yeC6vMxEV2dgyr2TiD+2PQ10o+cOhdVAcwfg==",
+      "license": "MIT",
+      "dependencies": {
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-gfm-task-list-item": {
+      "version": "2.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-gfm-task-list-item/-/micromark-extension-gfm-task-list-item-2.1.0.tgz",
+      "integrity": "sha512-qIBZhqxqI6fjLDYFTBIa4eivDMnP+OZqsNwmQ3xNLE4Cxwc+zfQEfbs6tzAo2Hjq+bh6q5F+Z8/cksrLFYWQQw==",
+      "license": "MIT",
+      "dependencies": {
+        "devlop": "^1.0.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/micromark-extension-math": {
+      "version": "3.1.0",
+      "resolved": "https://registry.npmjs.org/micromark-extension-math/-/micromark-extension-math-3.1.0.tgz",
+      "integrity": "sha512-lvEqd+fHjATVs+2v/8kg9i5Q0AP2k85H0WUOwpIVvUML8BapsMvh1XAogmQjOCsLpoKRCVQqEkQBB3NhVBcsOg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/katex": "^0.16.0",
+        "devlop": "^1.0.0",
+        "katex": "^0.16.0",
+        "micromark-factory-space": "^2.0.0",
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0",
+        "micromark-util-types": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/micromark-factory-destination": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.1.tgz",
@@ -2922,6 +3419,18 @@
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
       "license": "MIT"
     },
+    "node_modules/parse5": {
+      "version": "7.3.0",
+      "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.3.0.tgz",
+      "integrity": "sha512-IInvU7fabl34qmi9gY8XOVxhYyMyuH2xUNpb2q8/Y+7552KlejkRvqvD19nMoUW/uQGGbqNpA6Tufu5FL5BZgw==",
+      "license": "MIT",
+      "dependencies": {
+        "entities": "^6.0.0"
+      },
+      "funding": {
+        "url": "https://github.com/inikulin/parse5?sponsor=1"
+      }
+    },
     "node_modules/path-parse": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
@@ -3280,6 +3789,76 @@
         "node": ">=8.10.0"
       }
     },
+    "node_modules/rehype-highlight": {
+      "version": "7.0.2",
+      "resolved": "https://registry.npmjs.org/rehype-highlight/-/rehype-highlight-7.0.2.tgz",
+      "integrity": "sha512-k158pK7wdC2qL3M5NcZROZ2tR/l7zOzjxXd5VGdcfIyoijjQqpHd3JKtYSBDpDZ38UI2WJWuFAtkMDxmx5kstA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-to-text": "^4.0.0",
+        "lowlight": "^3.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/rehype-katex": {
+      "version": "7.0.1",
+      "resolved": "https://registry.npmjs.org/rehype-katex/-/rehype-katex-7.0.1.tgz",
+      "integrity": "sha512-OiM2wrZ/wuhKkigASodFoo8wimG3H12LWQaH8qSPVJn9apWKFSH3YOCtbKpBorTVw/eI7cuT21XBbvwEswbIOA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/katex": "^0.16.0",
+        "hast-util-from-html-isomorphic": "^2.0.0",
+        "hast-util-to-text": "^4.0.0",
+        "katex": "^0.16.0",
+        "unist-util-visit-parents": "^6.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-gfm": {
+      "version": "4.0.1",
+      "resolved": "https://registry.npmjs.org/remark-gfm/-/remark-gfm-4.0.1.tgz",
+      "integrity": "sha512-1quofZ2RQ9EWdeN34S79+KExV1764+wCUGop5CPL1WGdD0ocPpu91lzPGbwWMECpEpd42kJGQwzRfyov9j4yNg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-gfm": "^3.0.0",
+        "micromark-extension-gfm": "^3.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-stringify": "^11.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-math": {
+      "version": "6.0.0",
+      "resolved": "https://registry.npmjs.org/remark-math/-/remark-math-6.0.0.tgz",
+      "integrity": "sha512-MMqgnP74Igy+S3WwnhQ7kqGlEerTETXMvJhrUzDikVZ2/uogJCb+WHUg97hK9/jcfc0dkD73s3LN8zU49cTEtA==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-math": "^3.0.0",
+        "micromark-extension-math": "^3.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-parse": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
@@ -3313,6 +3892,21 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-stringify": {
+      "version": "11.0.0",
+      "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
+      "integrity": "sha512-1OSmLd3awB/t8qdoEOMazZkNsfVTeY4fTsgzcQFdXNq8ToTN4ZGwrMnlda4K6smTFKD+GRV6O48i6Z4iKgPPpw==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-markdown": "^2.0.0",
+        "unified": "^11.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/resolve": {
       "version": "1.22.11",
       "resolved": "https://registry.npmjs.org/resolve/-/resolve-1.22.11.tgz",
@@ -3703,6 +4297,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-find-after": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-find-after/-/unist-util-find-after-5.0.0.tgz",
+      "integrity": "sha512-amQa0Ep2m6hE2g72AugUItjbuM8X8cGQnFoHk0pGfrFeT9GZhzN5SW8nRsiGKK7Aif4CrACPENkA6P/Lw6fHGQ==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-is": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-is": {
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.1.tgz",
@@ -3729,6 +4337,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-remove-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-remove-position/-/unist-util-remove-position-5.0.0.tgz",
+      "integrity": "sha512-Hp5Kh3wLxv0PHj9m2yZhhLt58KzPtEYKQQ4yxfYFEO7EvHwzyDYnduhHnY1mDxoqr7VUwVuHXk9RXKIiYS1N8Q==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "unist-util-visit": "^5.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-stringify-position": {
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
@@ -3823,6 +4445,20 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/vfile-location": {
+      "version": "5.0.3",
+      "resolved": "https://registry.npmjs.org/vfile-location/-/vfile-location-5.0.3.tgz",
+      "integrity": "sha512-5yXvWDEgqeiYiBe1lbxYF7UMAIm/IcopxMHrMQDq3nvKcjPKIhZklUKL+AE7J7uApI4kwe2snsK+eI6UTj9EHg==",
+      "license": "MIT",
+      "dependencies": {
+        "@types/unist": "^3.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/vfile-message": {
       "version": "4.0.3",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.3.tgz",
@@ -3897,6 +4533,16 @@
         }
       }
     },
+    "node_modules/web-namespaces": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/web-namespaces/-/web-namespaces-2.0.1.tgz",
+      "integrity": "sha512-bKr1DkiNa2krS7qxNtdrtHAmzuYGFQLiQ13TsorsdT6ULTkPLKuu5+GsFpDlg6JFjUTwX2DyhMPG2be8uPrqsQ==",
+      "license": "MIT",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/yallist": {
       "version": "3.1.1",
       "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.1.1.tgz",
diff --git a/frontend/package.json b/frontend/package.json
index 10cf624..1e6b834 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -14,7 +14,11 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-markdown": "^9.0.1",
-    "react-router-dom": "^6.26.0"
+    "react-router-dom": "^6.26.0",
+    "rehype-highlight": "^7.0.2",
+    "rehype-katex": "^7.0.1",
+    "remark-gfm": "^4.0.1",
+    "remark-math": "^6.0.0"
   },
   "devDependencies": {
     "@types/react": "^18.3.1",
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
index a983905..b850703 100644
--- a/frontend/src/App.tsx
+++ b/frontend/src/App.tsx
@@ -32,6 +32,7 @@ import { AgentCard, NAFS_LEVELS } from "./components/AgentCard";
 import {
   ChatMessageContent,
   ChatMessageBubble,
+  TypingIndicator,
 } from "./components/ChatMessage";
 import { Sidebar } from "./components/Sidebar";
 import { MobileNav } from "./components/MobileNav";
@@ -244,7 +245,10 @@ function AppInner() {
 
   const api = useApi();
   const messagesEndRef = useRef<HTMLDivElement>(null);
+  const chatScrollRef = useRef<HTMLDivElement>(null);
+  const chatTextareaRef = useRef<HTMLTextAreaElement>(null);
   const commandMenuRef = useRef<HTMLDivElement>(null);
+  const [showScrollDown, setShowScrollDown] = useState(false);
   const clientId = useRef(`client_${Date.now()}`);
 
   const addTerminalLine = useCallback((text: string, type: string = "") => {
@@ -653,6 +657,17 @@ function AppInner() {
     messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
   }, [messages, streamingText]);
 
+  const handleChatScroll = useCallback(() => {
+    const el = chatScrollRef.current;
+    if (!el) return;
+    const distanceFromBottom = el.scrollHeight - el.scrollTop - el.clientHeight;
+    setShowScrollDown(distanceFromBottom > 150);
+  }, []);
+
+  const scrollToBottom = useCallback(() => {
+    messagesEndRef.current?.scrollIntoView({ behavior: "smooth" });
+  }, []);
+
   const startNewSession = useCallback(() => {
     const newId = `session_${Date.now()}`;
     setSessionId(newId);
@@ -676,6 +691,10 @@ function AppInner() {
     setTypingIndicator(true);
     setToolStatus("");
     setInput("");
+    // Reset textarea height after clearing
+    if (chatTextareaRef.current) {
+      chatTextareaRef.current.style.height = "auto";
+    }
     addTerminalLine(`> ${content.substring(0, 60)}...`, "info");
 
     // Prefer HTTP POST /api/chat (returns message_id, streams via WebSocket)
@@ -1017,501 +1036,440 @@ function AppInner() {
 
       case "chat":
         return (
-          <div className="flex-1 flex flex-col overflow-hidden relative">
-            <div className="flex items-center gap-3 px-6 py-3.5 border-b border-white/50 dark:border-white/5 bg-white/60 dark:bg-mizan-dark-surface/40 backdrop-blur-md z-10 shadow-sm transition-all duration-300">
-              <Icons.Chat />
-              <span className="font-semibold text-sm text-gray-900 dark:text-gray-100">
-                Chat
-              </span>
-
-              {/* Agent picker pill */}
-              <div className="relative">
-                <button
-                  className={`flex items-center gap-2 px-3 py-1.5 rounded-xl border backdrop-blur-md shadow-sm transition-all duration-300 ${
-                    showAgentPicker
-                      ? "bg-mizan-gold/10 border-mizan-gold/30 text-mizan-gold shadow-md"
-                      : "bg-white/60 dark:bg-mizan-dark-surface/40 border-white/50 dark:border-white/10 hover:border-mizan-gold/40 hover:shadow-md hover:-translate-y-0.5"
-                  }`}
-                  onClick={() => setShowAgentPicker(!showAgentPicker)}
-                >
-                  <div className="w-6 h-6 rounded-full bg-mizan-gold/10 border border-mizan-gold/30 flex items-center justify-center text-xs text-mizan-gold font-semibold">
-                    {selectedAgent?.name?.[0]?.toUpperCase() || "?"}
-                  </div>
-                  <span className="text-sm font-medium text-gray-900 dark:text-gray-100">
-                    {selectedAgent?.name || "Select Agent"}
-                  </span>
-                  <span className="text-xs text-gray-400 dark:text-gray-500">
-                    {selectedAgent?.role || ""}
-                  </span>
-                  <svg
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    className="w-3.5 h-3.5 text-gray-400"
-                  >
-                    <path
-                      fillRule="evenodd"
-                      d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z"
-                      clipRule="evenodd"
-                    />
-                  </svg>
-                </button>
-
-                {/* Agent picker dropdown */}
-                {showAgentPicker && (
-                  <div className="absolute top-full left-0 mt-2 w-72 bg-white/90 dark:bg-mizan-dark-surface/90 backdrop-blur-xl border border-white/50 dark:border-white/10 rounded-2xl shadow-xl overflow-hidden z-50 animate-fade-in-up">
-                    {agents.map((agent) => {
-                      const roleLabels: Record<string, string> = {
-                        general: "General Purpose",
-                        hafiz: "General Purpose",
-                        wakil: "General Purpose",
-                        browser: "Web Browsing",
-                        mubashir: "Web Browsing",
-                        research: "Deep Research",
-                        mundhir: "Deep Research",
-                        code: "Code Generation",
-                        katib: "Code Generation",
-                        communication: "Communication",
-                        rasul: "Communication",
-                      };
-                      return (
-                        <button
-                          key={agent.id}
-                          className={`w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors ${
-                            selectedAgent?.id === agent.id
-                              ? "bg-mizan-gold/10 text-mizan-gold"
-                              : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-zinc-700/50"
-                          }`}
-                          onClick={() => {
-                            setSelectedAgent(agent);
-                            setShowAgentPicker(false);
-                          }}
-                        >
-                          <div className="w-7 h-7 rounded-full bg-gray-100 dark:bg-zinc-700 border border-gray-200 dark:border-zinc-600 flex items-center justify-center text-xs font-semibold text-mizan-gold shrink-0">
-                            {agent.name[0]?.toUpperCase()}
-                          </div>
-                          <div className="min-w-0 flex-1">
-                            <div className="text-sm font-medium truncate">
-                              {agent.name}
-                            </div>
-                            <div className="text-xs text-gray-400 dark:text-gray-500">
-                              {roleLabels[agent.role] || agent.role}
-                            </div>
-                          </div>
-                          {selectedAgent?.id === agent.id && (
-                            <span className="text-xs text-mizan-gold font-mono">
-                              ACTIVE
-                            </span>
-                          )}
-                        </button>
-                      );
-                    })}
-                  </div>
-                )}
-              </div>
-
-              <div className="ml-auto flex items-center gap-2">
-                {selectedAgent && (
-                  <span className="text-xs text-gray-500 dark:text-gray-400 hidden sm:inline">
-                    Level {selectedAgent.nafs_level} —{" "}
-                    {NAFS_LEVELS[selectedAgent.nafs_level]?.latin}
-                  </span>
-                )}
-
-                {/* Session history dropdown */}
+          <div className="chat-layout bg-white dark:bg-[#0B0C10]">
+            {/* ===== Chat Header — clean, minimal ===== */}
+            <div className="chat-header">
+              <div className="chat-header-inner">
+                {/* Left: Agent picker */}
                 <div className="relative">
                   <button
-                    className="p-1.5 rounded-md text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
-                    onClick={() => {
-                      setShowSessionHistory(!showSessionHistory);
-                      if (!showSessionHistory) loadChatSessions();
-                    }}
-                    title="Chat history"
+                    className={`flex items-center gap-2.5 px-3 py-1.5 rounded-xl border transition-all duration-200 ${
+                      showAgentPicker
+                        ? "bg-amber-50 dark:bg-amber-500/10 border-amber-300 dark:border-amber-500/30 shadow-sm"
+                        : "bg-transparent border-transparent hover:bg-gray-100 dark:hover:bg-zinc-800"
+                    }`}
+                    onClick={() => setShowAgentPicker(!showAgentPicker)}
                   >
-                    <svg
-                      viewBox="0 0 20 20"
-                      fill="currentColor"
-                      className="w-4 h-4"
-                    >
-                      <path
-                        fillRule="evenodd"
-                        d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z"
-                        clipRule="evenodd"
-                      />
+                    <div className="w-6 h-6 rounded-full bg-gradient-to-br from-amber-400 to-amber-600 flex items-center justify-center">
+                      <svg viewBox="0 0 20 20" fill="white" className="w-3 h-3">
+                        <path d="M10 1a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1zM5.05 3.05a.75.75 0 011.06 0l1.062 1.06a.75.75 0 11-1.06 1.06L5.05 4.11a.75.75 0 010-1.06zm9.9 0a.75.75 0 010 1.06l-1.06 1.062a.75.75 0 01-1.062-1.061l1.061-1.06a.75.75 0 011.06 0zM10 7a3 3 0 100 6 3 3 0 000-6z" />
+                      </svg>
+                    </div>
+                    <span className="text-sm font-semibold text-gray-900 dark:text-gray-100">
+                      {selectedAgent?.name || "MIZAN"}
+                    </span>
+                    <svg viewBox="0 0 20 20" fill="currentColor" className="w-3.5 h-3.5 text-gray-400">
+                      <path fillRule="evenodd" d="M5.23 7.21a.75.75 0 011.06.02L10 11.168l3.71-3.938a.75.75 0 111.08 1.04l-4.25 4.5a.75.75 0 01-1.08 0l-4.25-4.5a.75.75 0 01.02-1.06z" clipRule="evenodd" />
                     </svg>
                   </button>
-                  {showSessionHistory && (
-                    <div className="absolute top-full right-0 mt-2 w-80 bg-white/90 dark:bg-mizan-dark-surface/90 backdrop-blur-xl border border-white/50 dark:border-white/10 rounded-2xl shadow-xl overflow-hidden z-50 animate-fade-in-up">
-                      <div className="px-4 py-3 border-b border-white/50 dark:border-white/10 text-xs font-semibold text-gray-500 dark:text-gray-400 uppercase tracking-widest bg-gray-50/50 dark:bg-mizan-dark/50">
-                        Recent Sessions
+
+                  {showAgentPicker && (
+                    <div className="absolute top-full left-0 mt-1.5 w-72 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 rounded-xl shadow-xl overflow-hidden z-50 animate-fade-in">
+                      <div className="px-3 py-2 border-b border-gray-100 dark:border-zinc-800">
+                        <span className="text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Select Agent</span>
                       </div>
-                      <div className="max-h-64 overflow-y-auto">
-                        {chatSessions.length === 0 && (
-                          <div className="px-3 py-4 text-center text-xs text-gray-400">
-                            No previous sessions
-                          </div>
-                        )}
-                        {chatSessions.map((s) => (
+                      {agents.map((agent) => {
+                        const roleLabels: Record<string, string> = {
+                          general: "General", hafiz: "General", wakil: "General",
+                          browser: "Browser", mubashir: "Browser",
+                          research: "Research", mundhir: "Research",
+                          code: "Code", katib: "Code",
+                          communication: "Comms", rasul: "Comms",
+                        };
+                        return (
                           <button
-                            key={s.session_id}
-                            className={`w-full flex items-center gap-2 px-3 py-2 text-left transition-colors ${
-                              sessionId === s.session_id
-                                ? "bg-mizan-gold/10 text-mizan-gold"
-                                : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-zinc-700/50"
+                            key={agent.id}
+                            className={`w-full flex items-center gap-3 px-3 py-2.5 text-left transition-colors ${
+                              selectedAgent?.id === agent.id
+                                ? "bg-amber-50 dark:bg-amber-500/10"
+                                : "hover:bg-gray-50 dark:hover:bg-zinc-800"
                             }`}
-                            onClick={() => switchSession(s.session_id)}
+                            onClick={() => { setSelectedAgent(agent); setShowAgentPicker(false); }}
                           >
+                            <div className="w-7 h-7 rounded-full bg-gray-100 dark:bg-zinc-800 flex items-center justify-center text-xs font-semibold text-amber-600 dark:text-amber-400 shrink-0">
+                              {agent.name[0]?.toUpperCase()}
+                            </div>
                             <div className="min-w-0 flex-1">
-                              <div className="text-xs font-medium truncate">
-                                {s.first_message ||
-                                  s.session_id.slice(0, 24) + "..."}
-                              </div>
-                              <div className="text-micro text-gray-400 dark:text-gray-500">
-                                {s.message_count} msgs
-                                {s.last_message_at &&
-                                  ` · ${new Date(s.last_message_at).toLocaleDateString()}`}
-                              </div>
+                              <div className="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{agent.name}</div>
+                              <div className="text-[11px] text-gray-400 dark:text-gray-500">{roleLabels[agent.role] || agent.role}</div>
                             </div>
-                            {sessionId === s.session_id && (
-                              <span className="text-micro text-mizan-gold font-mono shrink-0">
-                                CURRENT
-                              </span>
+                            {selectedAgent?.id === agent.id && (
+                              <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4 text-amber-500 shrink-0">
+                                <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
+                              </svg>
                             )}
                           </button>
-                        ))}
-                      </div>
+                        );
+                      })}
                     </div>
                   )}
                 </div>
 
-                {/* New chat button */}
-                <button
-                  className="flex items-center gap-1 px-2.5 py-1.5 rounded-md text-xs font-medium text-gray-600 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800 border border-gray-200 dark:border-zinc-700 transition-colors"
-                  onClick={startNewSession}
-                  title="New chat"
-                >
-                  <svg
-                    viewBox="0 0 20 20"
-                    fill="currentColor"
-                    className="w-3.5 h-3.5"
+                {/* Right: Session controls */}
+                <div className="flex items-center gap-1">
+                  {selectedAgent && (
+                    <span className="text-[11px] text-gray-400 dark:text-gray-500 hidden sm:inline mr-2 font-mono">
+                      L{selectedAgent.nafs_level} {NAFS_LEVELS[selectedAgent.nafs_level]?.latin}
+                    </span>
+                  )}
+
+                  {/* Session history */}
+                  <div className="relative">
+                    <button
+                      className="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
+                      onClick={() => { setShowSessionHistory(!showSessionHistory); if (!showSessionHistory) loadChatSessions(); }}
+                      title="Chat history"
+                    >
+                      <svg viewBox="0 0 20 20" fill="currentColor" className="w-4.5 h-4.5">
+                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm.75-13a.75.75 0 00-1.5 0v5c0 .414.336.75.75.75h4a.75.75 0 000-1.5h-3.25V5z" clipRule="evenodd" />
+                      </svg>
+                    </button>
+                    {showSessionHistory && (
+                      <div className="absolute top-full right-0 mt-1.5 w-80 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 rounded-xl shadow-xl overflow-hidden z-50 animate-fade-in">
+                        <div className="px-3 py-2 border-b border-gray-100 dark:border-zinc-800 flex items-center justify-between">
+                          <span className="text-[11px] font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">History</span>
+                        </div>
+                        <div className="max-h-72 overflow-y-auto">
+                          {chatSessions.length === 0 && (
+                            <div className="px-3 py-6 text-center text-xs text-gray-400">No previous sessions</div>
+                          )}
+                          {chatSessions.map((s) => (
+                            <button
+                              key={s.session_id}
+                              className={`w-full flex items-center gap-2 px-3 py-2.5 text-left transition-colors ${
+                                sessionId === s.session_id ? "bg-amber-50 dark:bg-amber-500/10" : "hover:bg-gray-50 dark:hover:bg-zinc-800"
+                              }`}
+                              onClick={() => switchSession(s.session_id)}
+                            >
+                              <div className="min-w-0 flex-1">
+                                <div className="text-xs font-medium text-gray-700 dark:text-gray-300 truncate">
+                                  {s.first_message || s.session_id.slice(0, 24) + "..."}
+                                </div>
+                                <div className="text-[10px] text-gray-400 dark:text-gray-500">
+                                  {s.message_count} msgs{s.last_message_at && ` · ${new Date(s.last_message_at).toLocaleDateString()}`}
+                                </div>
+                              </div>
+                              {sessionId === s.session_id && (
+                                <span className="text-[10px] text-amber-500 font-mono shrink-0">ACTIVE</span>
+                              )}
+                            </button>
+                          ))}
+                        </div>
+                      </div>
+                    )}
+                  </div>
+
+                  {/* New chat */}
+                  <button
+                    className="p-2 rounded-lg text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
+                    onClick={startNewSession}
+                    title="New chat"
                   >
-                    <path d="M10.75 4.75a.75.75 0 00-1.5 0v4.5h-4.5a.75.75 0 000 1.5h4.5v4.5a.75.75 0 001.5 0v-4.5h4.5a.75.75 0 000-1.5h-4.5v-4.5z" />
-                  </svg>
-                  New
-                </button>
+                    <svg viewBox="0 0 20 20" fill="currentColor" className="w-4.5 h-4.5">
+                      <path d="M5.433 13.917l1.262-3.155A4 4 0 017.58 9.42l6.92-6.918a2.121 2.121 0 013 3l-6.92 6.918c-.383.383-.84.685-1.343.886l-3.154 1.262a.5.5 0 01-.65-.65z" />
+                      <path d="M3.5 5.75c0-.69.56-1.25 1.25-1.25H10A.75.75 0 0010 3H4.75A2.75 2.75 0 002 5.75v9.5A2.75 2.75 0 004.75 18h9.5A2.75 2.75 0 0017 15.25V10a.75.75 0 00-1.5 0v5.25c0 .69-.56 1.25-1.25 1.25h-9.5c-.69 0-1.25-.56-1.25-1.25v-9.5z" />
+                    </svg>
+                  </button>
+                </div>
               </div>
             </div>
 
-            <div className="flex-1 overflow-y-auto px-4 py-4 space-y-4">
-              {messages.length === 0 && !streaming && (
-                <div className="flex-1 flex flex-col items-center justify-center py-12 gap-8">
-                  <div className="text-center space-y-3">
-                    <div
-                      className="text-5xl text-mizan-gold/30 select-none"
-                      style={{ fontFamily: "Amiri, Georgia, serif" }}
-                    >
-                      &#1605;&#1610;&#1586;&#1575;&#1606;
+            {/* ===== Chat Messages Area ===== */}
+            <div className="chat-scroll-area relative" ref={chatScrollRef} onScroll={handleChatScroll}>
+              {messages.length === 0 && !streaming ? (
+                /* ===== Empty state — centered like ChatGPT ===== */
+                <div className="flex flex-col items-center justify-center h-full px-4">
+                  <div className="text-center space-y-4 mb-8">
+                    <div className="w-14 h-14 rounded-2xl bg-gradient-to-br from-amber-400 to-amber-600 mx-auto flex items-center justify-center shadow-lg shadow-amber-500/20">
+                      <svg viewBox="0 0 24 24" fill="white" className="w-7 h-7">
+                        <path d="M12 2a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0V2.75A.75.75 0 0112 2zM6.05 4.05a.75.75 0 011.06 0l1.59 1.59a.75.75 0 11-1.06 1.06L6.05 5.11a.75.75 0 010-1.06zm11.9 0a.75.75 0 010 1.06l-1.59 1.59a.75.75 0 01-1.06-1.06l1.59-1.59a.75.75 0 011.06 0zM12 8a4 4 0 100 8 4 4 0 000-8zM4 12.75a.75.75 0 01-.75-.75 .75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H4zm13.75-.75a.75.75 0 01.75-.75h2.25a.75.75 0 010 1.5H18.5a.75.75 0 01-.75-.75zM7.7 16.3a.75.75 0 010 1.06l-1.59 1.59a.75.75 0 01-1.06-1.06l1.59-1.59a.75.75 0 011.06 0zm8.6 0a.75.75 0 011.06 0l1.59 1.59a.75.75 0 01-1.06 1.06l-1.59-1.59a.75.75 0 010-1.06zM12 18a.75.75 0 01.75.75v2.25a.75.75 0 01-1.5 0v-2.25A.75.75 0 0112 18z" />
+                      </svg>
+                    </div>
+                    <div>
+                      <h2 className="text-xl font-semibold text-gray-900 dark:text-gray-100" style={{ fontFamily: "'Space Grotesk', sans-serif" }}>
+                        How can I help you today?
+                      </h2>
+                      <p className="text-sm text-gray-500 dark:text-gray-400 mt-1.5 max-w-sm mx-auto">
+                        Ask anything, run code, browse the web, or try a suggestion below.
+                      </p>
                     </div>
-                    <h2 className="text-xl font-display font-semibold text-gray-900 dark:text-gray-100">
-                      How can I help?
-                    </h2>
-                    <p className="text-sm text-gray-500 dark:text-gray-400 max-w-md">
-                      Start a conversation, ask a question, or try one of these
-                      suggestions.
-                    </p>
                   </div>
-                  <div className="grid grid-cols-2 gap-3 max-w-lg w-full px-4">
+                  <div className="grid grid-cols-2 gap-2.5 max-w-lg w-full">
                     {[
-                      {
-                        label: "Write code",
-                        desc: "Generate, debug, or refactor",
-                        prompt: "Help me write a Python script that ",
-                      },
-                      {
-                        label: "Analyze data",
-                        desc: "Explore patterns and insights",
-                        prompt: "Analyze this data and help me understand ",
-                      },
-                      {
-                        label: "Research topic",
-                        desc: "Deep dive into any subject",
-                        prompt: "Research and summarize the key points about ",
-                      },
-                      {
-                        label: "Brainstorm ideas",
-                        desc: "Creative thinking together",
-                        prompt: "Help me brainstorm ideas for ",
-                      },
+                      { label: "Write code", desc: "Generate or debug code", prompt: "Help me write a Python script that " },
+                      { label: "Analyze data", desc: "Find patterns and insights", prompt: "Analyze this data and help me understand " },
+                      { label: "Research topic", desc: "Deep dive into any subject", prompt: "Research and summarize the key points about " },
+                      { label: "Brainstorm", desc: "Creative thinking together", prompt: "Help me brainstorm ideas for " },
                     ].map((action) => (
                       <button
                         key={action.label}
-                        className="card-hover text-left p-4 group cursor-pointer"
-                        onClick={() => {
-                          setInput(action.prompt);
-                        }}
+                        className="text-left p-3.5 rounded-xl border border-gray-200 dark:border-zinc-700 hover:border-amber-300 dark:hover:border-amber-500/30 hover:bg-amber-50/50 dark:hover:bg-amber-500/5 transition-all group cursor-pointer"
+                        onClick={() => setInput(action.prompt)}
                       >
-                        <div className="text-sm font-medium text-gray-900 dark:text-gray-100 group-hover:text-mizan-gold transition-colors">
+                        <div className="text-sm font-medium text-gray-800 dark:text-gray-200 group-hover:text-amber-700 dark:group-hover:text-amber-400 transition-colors">
                           {action.label}
                         </div>
-                        <div className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">
-                          {action.desc}
-                        </div>
+                        <div className="text-xs text-gray-400 dark:text-gray-500 mt-0.5">{action.desc}</div>
                       </button>
                     ))}
                   </div>
                 </div>
-              )}
+              ) : (
+                /* ===== Messages list ===== */
+                <div className="py-4 space-y-0">
+                  {messages.map((msg) => (
+                    <ChatMessageBubble
+                      key={msg.id}
+                      msg={msg}
+                      selectedAgent={selectedAgent}
+                    />
+                  ))}
 
-              {messages.map((msg) => (
-                <div
-                  key={msg.id}
-                  className={`flex gap-4 ${
-                    msg.role === "user"
-                      ? "flex-row-reverse"
-                      : msg.role === "system"
-                        ? "justify-center"
-                        : ""
-                  } animate-fade-in`}
-                >
-                  {msg.role === "system" ? (
-                    <div className="max-w-[85%] w-full">
-                      <div
-                        className="px-4 py-3 rounded-lg text-sm leading-relaxed italic
-                        bg-amber-50/60 dark:bg-amber-500/5 border border-amber-200/60 dark:border-amber-500/15
-                        text-amber-900 dark:text-amber-200/90"
-                        style={{
-                          fontFamily:
-                            "'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace",
-                        }}
-                      >
-                        <div className="flex items-center gap-2 mb-1.5 not-italic">
-                          <svg
-                            viewBox="0 0 24 24"
-                            fill="none"
-                            stroke="currentColor"
-                            strokeWidth="1.5"
-                            className="w-3.5 h-3.5 text-amber-500 dark:text-amber-400"
-                          >
-                            <path d="M7 9l3 3-3 3M13 15h4" />
-                            <rect x="3" y="4" width="18" height="16" rx="2" />
-                          </svg>
-                          <span className="text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400">
-                            System
-                          </span>
+                  {/* Typing indicator */}
+                  {streaming && !streamingText && typingIndicator && (
+                    <div className="chat-message-row">
+                      <div className="chat-message-container">
+                        <div className="flex gap-3.5">
+                          <div className="w-7 h-7 rounded-full shrink-0 flex items-center justify-center mt-0.5 bg-gradient-to-br from-amber-400 to-amber-600">
+                            <svg viewBox="0 0 20 20" fill="white" className="w-3.5 h-3.5">
+                              <path d="M10 1a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1zM10 7a3 3 0 100 6 3 3 0 000-6z" />
+                            </svg>
+                          </div>
+                          <div>
+                            <div className="text-[13px] font-semibold text-gray-900 dark:text-gray-100 mb-1.5">
+                              {selectedAgent?.name || "MIZAN"}
+                            </div>
+                            <TypingIndicator />
+                          </div>
                         </div>
-                        <div className="whitespace-pre-wrap">{msg.content}</div>
-                      </div>
-                      <div className="text-xs text-amber-400 dark:text-amber-500/60 mt-1 px-1 font-mono text-center">
-                        {msg.ts}
                       </div>
                     </div>
-                  ) : (
-                    <>
-                      <div
-                        className={`w-8 h-8 rounded-full shrink-0 flex items-center justify-center text-xs font-medium ${
-                          msg.role === "user"
-                            ? "bg-blue-100 dark:bg-blue-500/15 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-500/30"
-                            : "bg-gray-100 dark:bg-zinc-800 text-mizan-gold border border-gray-200 dark:border-zinc-700"
-                        }`}
-                      >
-                        {msg.role === "user" ? "You" : msg.agent?.[0] || "AI"}
+                  )}
+
+                  {/* Tool status */}
+                  {streaming && toolStatus && (
+                    <div className="chat-message-row">
+                      <div className="chat-message-container">
+                        <div className="flex gap-3.5 items-center">
+                          <div className="w-7 h-7 shrink-0" />
+                          <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-50 dark:bg-blue-500/10 border border-blue-200/60 dark:border-blue-500/20">
+                            <svg className="w-3.5 h-3.5 text-blue-500 animate-spin" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2">
+                              <path d="M12 2v4m0 12v4m-7.07-3.93l2.83-2.83m8.48-8.48l2.83-2.83M2 12h4m12 0h4m-3.93 7.07l-2.83-2.83M7.76 7.76L4.93 4.93" />
+                            </svg>
+                            <span className="text-xs font-medium text-blue-600 dark:text-blue-400">{toolStatus}</span>
+                          </div>
+                        </div>
                       </div>
-                      <div
-                        className={
-                          msg.role === "assistant"
-                            ? "max-w-[85%]"
-                            : "max-w-[75%]"
-                        }
-                      >
-                        {msg.role === "assistant" ? (
-                          <div className="prose px-5 py-3.5 rounded-2xl text-sm leading-relaxed bg-white/80 dark:bg-mizan-dark-surface/80 backdrop-blur-md border border-white/50 dark:border-white/5 text-gray-800 dark:text-gray-200 rounded-tl-sm shadow-sm transition-all hover:shadow-md">
-                            <ChatMessageContent content={msg.content} />
+                    </div>
+                  )}
+
+                  {/* Streaming text */}
+                  {streaming && streamingText && (
+                    <div className="chat-message-row group/msg">
+                      <div className="chat-message-container">
+                        <div className="flex gap-3.5">
+                          <div className="w-7 h-7 rounded-full shrink-0 flex items-center justify-center mt-0.5 bg-gradient-to-br from-amber-400 to-amber-600">
+                            <svg viewBox="0 0 20 20" fill="white" className="w-3.5 h-3.5">
+                              <path d="M10 1a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1zM10 7a3 3 0 100 6 3 3 0 000-6z" />
+                            </svg>
                           </div>
-                        ) : (
-                          <div className="px-5 py-3.5 rounded-2xl text-sm leading-relaxed bg-gradient-to-br from-blue-500 to-blue-600 border border-blue-400/50 text-white rounded-tr-sm shadow-md">
-                            {msg.content}
+                          <div className="min-w-0 flex-1 overflow-hidden">
+                            <div className="text-[13px] font-semibold text-gray-900 dark:text-gray-100 mb-1.5">
+                              {selectedAgent?.name || "MIZAN"}
+                            </div>
+                            <div className="prose">
+                              <ChatMessageContent content={streamingText} />
+                              <span className="inline-block w-0.5 h-4 bg-amber-500 ml-0.5 align-middle animate-pulse rounded-full" />
+                            </div>
                           </div>
-                        )}
-                        <div className="text-xs text-gray-400 dark:text-gray-500 mt-1 px-1 font-mono">
-                          {msg.role === "assistant" ? msg.agent : "You"}{" "}
-                          &middot; {msg.ts}
                         </div>
                       </div>
-                    </>
+                    </div>
                   )}
-                </div>
-              ))}
 
-              {/* Typing indicator - shown before first token arrives */}
-              {streaming && !streamingText && typingIndicator && (
-                <div className="flex gap-3">
-                  <div className="w-8 h-8 rounded-full shrink-0 flex items-center justify-center text-xs bg-gray-100 dark:bg-zinc-800 text-mizan-gold border border-gray-200 dark:border-zinc-700">
-                    {selectedAgent?.name?.[0] || "AI"}
-                  </div>
-                  <div className="max-w-[75%]">
-                    <div className="bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 px-4 py-2.5 rounded-xl rounded-tl-sm text-sm leading-relaxed text-gray-400 dark:text-gray-500">
-                      <span className="inline-flex gap-1 items-center">
-                        <span
-                          className="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-500 animate-bounce"
-                          style={{ animationDelay: "0ms" }}
-                        />
-                        <span
-                          className="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-500 animate-bounce"
-                          style={{ animationDelay: "150ms" }}
-                        />
-                        <span
-                          className="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-500 animate-bounce"
-                          style={{ animationDelay: "300ms" }}
-                        />
-                      </span>
-                    </div>
-                  </div>
+                  <div ref={messagesEndRef} />
                 </div>
               )}
 
-              {/* Tool status indicator */}
-              {streaming && toolStatus && (
-                <div className="flex gap-3 items-center">
-                  <div className="w-8 h-8 shrink-0" />
-                  <div className="inline-flex items-center gap-2 px-3 py-1.5 rounded-full bg-blue-50 dark:bg-blue-500/10 border border-blue-200/60 dark:border-blue-500/20 animate-pulse">
-                    <svg
-                      className="w-3.5 h-3.5 text-blue-500 animate-spin"
-                      viewBox="0 0 24 24"
-                      fill="none"
-                      stroke="currentColor"
-                      strokeWidth="2"
-                    >
-                      <path d="M12 2v4m0 12v4m-7.07-3.93l2.83-2.83m8.48-8.48l2.83-2.83M2 12h4m12 0h4m-3.93 7.07l-2.83-2.83M7.76 7.76L4.93 4.93" />
-                    </svg>
-                    <span className="text-xs font-medium text-blue-600 dark:text-blue-400">
-                      {toolStatus}
-                    </span>
-                  </div>
-                </div>
-              )}
+              {/* Scroll to bottom arrow */}
+              <button
+                className={`chat-scroll-to-bottom ${showScrollDown ? "visible" : ""}`}
+                onClick={scrollToBottom}
+                aria-label="Scroll to bottom"
+              >
+                <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
+                  <path fillRule="evenodd" d="M10 3a.75.75 0 01.75.75v10.638l3.96-4.158a.75.75 0 111.08 1.04l-5.25 5.5a.75.75 0 01-1.08 0l-5.25-5.5a.75.75 0 111.08-1.04l3.96 4.158V3.75A.75.75 0 0110 3z" clipRule="evenodd" />
+                </svg>
+              </button>
+            </div>
 
-              {/* Streaming text with markdown and blinking cursor */}
-              {streaming && streamingText && (
-                <div className="flex gap-3">
-                  <div className="w-8 h-8 rounded-full shrink-0 flex items-center justify-center text-xs bg-gray-100 dark:bg-zinc-800 text-mizan-gold border border-gray-200 dark:border-zinc-700">
-                    {selectedAgent?.name?.[0] || "AI"}
-                  </div>
-                  <div className="max-w-[75%]">
-                    <div className="bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 px-4 py-2.5 rounded-xl rounded-tl-sm text-sm leading-relaxed text-gray-800 dark:text-gray-200">
-                      <ChatMessageContent content={streamingText} />
-                      <span className="inline-block w-0.5 h-4 bg-mizan-gold ml-0.5 align-middle animate-pulse" />
+            {/* ===== Chat Input — anchored bottom, ChatGPT-style ===== */}
+            <div className="chat-input-area">
+              <div className="chat-input-container">
+                {/* Command autocomplete */}
+                {showCommandMenu && filteredCommands.length > 0 && (
+                  <div
+                    ref={commandMenuRef}
+                    className="absolute bottom-full left-0 right-0 mb-2 bg-white dark:bg-zinc-900 border border-gray-200 dark:border-zinc-700 rounded-xl shadow-lg overflow-hidden z-50"
+                  >
+                    <div className="px-3 py-1.5 text-[10px] uppercase tracking-wider font-semibold text-gray-400 dark:text-gray-500 border-b border-gray-100 dark:border-zinc-800">
+                      Commands
                     </div>
+                    {filteredCommands.map((cmd, i) => (
+                      <button
+                        key={cmd.name}
+                        className={`w-full text-left px-3 py-2 flex items-center gap-3 text-sm transition-colors ${
+                          i === commandMenuIndex
+                            ? "bg-amber-50 dark:bg-amber-500/10 text-amber-900 dark:text-amber-200"
+                            : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-zinc-800"
+                        }`}
+                        onMouseEnter={() => setCommandMenuIndex(i)}
+                        onClick={() => { setInput(cmd.name + " "); setShowCommandMenu(false); setCommandMenuIndex(0); }}
+                      >
+                        <span className="font-mono font-semibold text-amber-600 dark:text-amber-400 shrink-0">{cmd.name}</span>
+                        <span className="text-gray-500 dark:text-gray-400 text-xs truncate">{cmd.description}</span>
+                      </button>
+                    ))}
                   </div>
-                </div>
-              )}
-
-              <div ref={messagesEndRef} />
-            </div>
+                )}
 
-            <div className="relative px-6 py-4 border-t border-white/50 dark:border-white/5 bg-white/70 dark:bg-mizan-dark-surface/60 backdrop-blur-xl shadow-[0_-4px_24px_rgba(0,0,0,0.02)] z-dropdown transition-all duration-200 focus-within:shadow-[0_-4px_24px_rgba(212,175,55,0.08)]">
-              {/* Command autocomplete dropdown */}
-              {showCommandMenu && filteredCommands.length > 0 && (
-                <div
-                  ref={commandMenuRef}
-                  className="absolute bottom-full left-4 right-4 mb-1 bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-700 rounded-lg shadow-lg overflow-hidden z-50"
-                >
-                  <div className="px-3 py-1.5 text-xs uppercase tracking-wider font-semibold text-gray-400 dark:text-gray-500 border-b border-gray-100 dark:border-zinc-700">
-                    Commands
-                  </div>
-                  {filteredCommands.map((cmd, i) => (
+                {/* Input box */}
+                <div className="chat-input-box">
+                  {/* Left action buttons */}
+                  <div className="flex items-center shrink-0 self-end">
+                    {/* Attach / Upload button */}
                     <button
-                      key={cmd.name}
-                      className={`w-full text-left px-3 py-2 flex items-center gap-3 text-sm transition-colors ${
-                        i === commandMenuIndex
-                          ? "bg-amber-50 dark:bg-amber-500/10 text-amber-900 dark:text-amber-200"
-                          : "text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-zinc-700/50"
-                      }`}
-                      onMouseEnter={() => setCommandMenuIndex(i)}
+                      className="chat-input-btn"
+                      title="Attach file"
                       onClick={() => {
-                        setInput(cmd.name + " ");
-                        setShowCommandMenu(false);
-                        setCommandMenuIndex(0);
+                        const fileInput = document.createElement('input');
+                        fileInput.type = 'file';
+                        fileInput.multiple = true;
+                        fileInput.accept = '*/*';
+                        fileInput.onchange = (e) => {
+                          const files = (e.target as HTMLInputElement).files;
+                          if (files && files.length > 0) {
+                            const names = Array.from(files).map(f => f.name).join(', ');
+                            setInput((prev) => prev + (prev ? ' ' : '') + `[Attached: ${names}]`);
+                          }
+                        };
+                        fileInput.click();
                       }}
                     >
-                      <span className="font-mono font-semibold text-amber-600 dark:text-amber-400 shrink-0">
-                        {cmd.name}
-                      </span>
-                      <span className="text-gray-500 dark:text-gray-400 text-xs truncate">
-                        {cmd.description}
-                      </span>
+                      <svg viewBox="0 0 20 20" fill="currentColor" className="w-4.5 h-4.5">
+                        <path d="M10 5a.75.75 0 01.75.75v3.5h3.5a.75.75 0 010 1.5h-3.5v3.5a.75.75 0 01-1.5 0v-3.5h-3.5a.75.75 0 010-1.5h3.5v-3.5A.75.75 0 0110 5z" />
+                      </svg>
                     </button>
-                  ))}
-                </div>
-              )}
-              <div className="flex gap-2 items-end">
-                <textarea
-                  className="input flex-1 resize-none min-h-[38px] max-h-[120px]"
-                  placeholder="Type your message... (/ for commands, Enter to send)"
-                  value={input}
-                  onChange={(e) => {
-                    const val = e.target.value;
-                    setInput(val);
-                    if (val.startsWith("/") && !val.includes(" ")) {
-                      setShowCommandMenu(true);
-                      setCommandMenuIndex(0);
-                    } else {
-                      setShowCommandMenu(false);
-                    }
-                  }}
-                  onKeyDown={(e) => {
-                    if (showCommandMenu && filteredCommands.length > 0) {
-                      if (e.key === "ArrowDown") {
-                        e.preventDefault();
-                        setCommandMenuIndex(
-                          (prev) => (prev + 1) % filteredCommands.length,
-                        );
-                        return;
+
+                    {/* Web search button */}
+                    <button
+                      className="chat-input-btn"
+                      title="Web search"
+                      onClick={() => setInput((prev) => prev + (prev ? ' ' : '') + '/web_search ')}
+                    >
+                      <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
+                        <path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM4.332 8.027a6.012 6.012 0 011.912-2.706C6.512 5.73 6.974 6 7.5 6A1.5 1.5 0 019 7.5V8a2 2 0 004 0c0-.738.402-1.381 1-1.726a5.994 5.994 0 01.98 2.65l-.02.018a.998.998 0 01-.592.29A6.003 6.003 0 0110 16a6.004 6.004 0 01-5.668-7.973z" clipRule="evenodd" />
+                      </svg>
+                    </button>
+                  </div>
+
+                  {/* Textarea */}
+                  <textarea
+                    ref={chatTextareaRef}
+                    className="chat-textarea"
+                    placeholder="Message MIZAN..."
+                    value={input}
+                    onChange={(e) => {
+                      const val = e.target.value;
+                      setInput(val);
+                      if (val.startsWith("/") && !val.includes(" ")) {
+                        setShowCommandMenu(true);
+                        setCommandMenuIndex(0);
+                      } else {
+                        setShowCommandMenu(false);
                       }
-                      if (e.key === "ArrowUp") {
-                        e.preventDefault();
-                        setCommandMenuIndex(
-                          (prev) =>
-                            (prev - 1 + filteredCommands.length) %
-                            filteredCommands.length,
-                        );
-                        return;
+                      // Auto-resize
+                      e.target.style.height = "auto";
+                      e.target.style.height = Math.min(e.target.scrollHeight, 200) + "px";
+                    }}
+                    onKeyDown={(e) => {
+                      if (showCommandMenu && filteredCommands.length > 0) {
+                        if (e.key === "ArrowDown") { e.preventDefault(); setCommandMenuIndex((prev) => (prev + 1) % filteredCommands.length); return; }
+                        if (e.key === "ArrowUp") { e.preventDefault(); setCommandMenuIndex((prev) => (prev - 1 + filteredCommands.length) % filteredCommands.length); return; }
+                        if (e.key === "Tab" || (e.key === "Enter" && !e.shiftKey)) {
+                          e.preventDefault();
+                          const selected = filteredCommands[commandMenuIndex];
+                          if (selected) { setInput(selected.name + " "); setShowCommandMenu(false); setCommandMenuIndex(0); }
+                          return;
+                        }
+                        if (e.key === "Escape") { e.preventDefault(); setShowCommandMenu(false); return; }
                       }
-                      if (
-                        e.key === "Tab" ||
-                        (e.key === "Enter" && !e.shiftKey)
-                      ) {
-                        e.preventDefault();
-                        const selected = filteredCommands[commandMenuIndex];
-                        if (selected) {
-                          setInput(selected.name + " ");
-                          setShowCommandMenu(false);
+                      if (e.key === "Enter" && !e.shiftKey) { e.preventDefault(); sendMessage(); }
+                    }}
+                    onBlur={() => { setTimeout(() => setShowCommandMenu(false), 150); }}
+                    rows={1}
+                  />
+
+                  {/* Right action buttons */}
+                  <div className="flex items-center gap-0.5 shrink-0 self-end">
+                    {/* Commands button */}
+                    <button
+                      className="chat-input-btn"
+                      title="Commands (/)"
+                      onClick={() => {
+                        if (!input.startsWith('/')) {
+                          setInput('/');
+                          setShowCommandMenu(true);
                           setCommandMenuIndex(0);
                         }
-                        return;
-                      }
-                      if (e.key === "Escape") {
-                        e.preventDefault();
-                        setShowCommandMenu(false);
-                        return;
-                      }
-                    }
-                    if (e.key === "Enter" && !e.shiftKey) {
-                      e.preventDefault();
-                      sendMessage();
-                    }
-                  }}
-                  onBlur={() => {
-                    // Delay hiding so clicks on menu items register
-                    setTimeout(() => setShowCommandMenu(false), 150);
-                  }}
-                  rows={1}
-                />
-                <button
-                  className="w-10 h-10 rounded-lg bg-mizan-gold hover:bg-mizan-gold-light text-black flex items-center justify-center shrink-0 transition-colors disabled:opacity-40"
-                  onClick={sendMessage}
-                  disabled={streaming || !input.trim() || !ws}
-                >
-                  <Icons.Send />
-                </button>
+                      }}
+                    >
+                      <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
+                        <path fillRule="evenodd" d="M14.5 10a4.5 4.5 0 004.284-5.882c-.105-.324-.51-.391-.752-.15L15.34 6.66a.454.454 0 01-.493.101 3.046 3.046 0 01-1.607-1.607.454.454 0 01.1-.493l2.693-2.692c.24-.241.174-.647-.15-.752a4.5 4.5 0 00-5.873 4.575c.055.873-.128 1.808-.8 2.368l-7.23 6.024a2.724 2.724 0 103.837 3.837l6.024-7.23c.56-.672 1.495-.855 2.368-.8.096.007.193.01.291.01zM5 16a1 1 0 11-2 0 1 1 0 012 0z" clipRule="evenodd" />
+                      </svg>
+                    </button>
+
+                    {/* Send or Stop button */}
+                    {streaming ? (
+                      <button
+                        className="chat-stop-btn"
+                        onClick={() => {
+                          // Signal stop — close and reconnect WS
+                          if (ws) { ws.close(); }
+                        }}
+                        title="Stop generating"
+                        aria-label="Stop generating"
+                      >
+                        <svg viewBox="0 0 20 20" fill="currentColor" className="w-3.5 h-3.5">
+                          <rect x="5" y="5" width="10" height="10" rx="1.5" />
+                        </svg>
+                      </button>
+                    ) : (
+                      <button
+                        className="chat-send-btn"
+                        onClick={sendMessage}
+                        disabled={!input.trim() || !ws}
+                        aria-label="Send message"
+                      >
+                        <svg viewBox="0 0 20 20" fill="currentColor" className="w-4 h-4">
+                          <path d="M3.105 2.289a.75.75 0 00-.826.95l1.414 4.925A1.5 1.5 0 005.135 9.25h6.115a.75.75 0 010 1.5H5.135a1.5 1.5 0 00-1.442 1.086l-1.414 4.926a.75.75 0 00.826.95 28.896 28.896 0 0015.293-7.154.75.75 0 000-1.115A28.897 28.897 0 003.105 2.289z" />
+                        </svg>
+                      </button>
+                    )}
+                  </div>
+                </div>
+                <div className="flex items-center justify-between mt-2 px-1">
+                  <span className="text-[10px] text-gray-400 dark:text-gray-500 font-mono">
+                    <span className="hidden sm:inline">Enter to send · Shift+Enter for new line · / for commands</span>
+                    <span className="sm:hidden">Enter to send</span>
+                  </span>
+                  {wsStatus !== 'connected' && (
+                    <span className="text-[10px] text-red-400 font-mono flex items-center gap-1">
+                      <span className="w-1.5 h-1.5 rounded-full bg-red-400 inline-block" />
+                      Disconnected
+                    </span>
+                  )}
+                </div>
               </div>
             </div>
           </div>
@@ -2028,7 +1986,7 @@ function AppInner() {
   };
 
   return (
-    <div className="h-screen flex flex-col overflow-hidden bg-transparent text-gray-900 dark:text-gray-100 font-body transition-colors duration-500">
+    <div className="h-dvh flex flex-col overflow-hidden bg-transparent text-gray-900 dark:text-gray-100 font-body transition-colors duration-500">
       {/* Connection banner */}
       <ConnectionBanner status={wsStatus} attempts={reconnectAttempts} />
 
@@ -2076,7 +2034,7 @@ function AppInner() {
         />
 
         {/* Content */}
-        <main className="flex-1 overflow-hidden flex flex-col bg-transparent relative z-0 pb-16 md:pb-0">
+        <main className={`flex-1 overflow-hidden flex flex-col bg-transparent relative z-0 ${activeTab === "chat" ? "pb-0" : "pb-16 md:pb-0"}`}>
           <ErrorBoundary>
             <Suspense
               fallback={
@@ -2093,8 +2051,10 @@ function AppInner() {
         </main>
       </div>
 
-      {/* Mobile bottom nav */}
-      <MobileNav activeTab={activeTab} setActiveTab={setActiveTab} />
+      {/* Mobile bottom nav — hidden on chat tab since chat has its own input area */}
+      {activeTab !== "chat" && (
+        <MobileNav activeTab={activeTab} setActiveTab={setActiveTab} />
+      )}
 
       {/* Create / Edit Agent Modal */}
       {showCreateAgent && (
diff --git a/frontend/src/components/ChatMessage.tsx b/frontend/src/components/ChatMessage.tsx
index df64284..e1baf57 100644
--- a/frontend/src/components/ChatMessage.tsx
+++ b/frontend/src/components/ChatMessage.tsx
@@ -51,6 +51,16 @@ function parseChatContent(text: string): ContentBlock[] {
   return blocks;
 }
 
+export function TypingIndicator() {
+  return (
+    <span className="inline-flex gap-1 items-center py-1">
+      <span className="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-500 animate-bounce" style={{ animationDelay: "0ms" }} />
+      <span className="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-500 animate-bounce" style={{ animationDelay: "150ms" }} />
+      <span className="w-1.5 h-1.5 rounded-full bg-gray-400 dark:bg-gray-500 animate-bounce" style={{ animationDelay: "300ms" }} />
+    </span>
+  );
+}
+
 export function ChatMessageContent({ content }: { content: string }) {
   const [expandedTools, setExpandedTools] = useState<Set<number>>(new Set());
   const blocks = useMemo(() => parseChatContent(content), [content]);
@@ -390,83 +400,107 @@ export function ChatMessageBubble({
   msg,
   selectedAgent,
 }: ChatMessageBubbleProps) {
-  return (
-    <div
-      className={`flex gap-4 ${
-        msg.role === "user"
-          ? "flex-row-reverse"
-          : msg.role === "system"
-            ? "justify-center"
-            : ""
-      } animate-fade-in`}
-    >
-      {msg.role === "system" ? (
-        <div className="max-w-[85%] w-full">
-          <div
-            className="px-4 py-3 rounded-lg text-sm leading-relaxed italic
-            bg-amber-50/60 dark:bg-amber-500/5 border border-amber-200/60 dark:border-amber-500/15
-            text-amber-900 dark:text-amber-200/90"
-            style={{
-              fontFamily:
-                "'SF Mono', 'Fira Code', 'Cascadia Code', 'Consolas', monospace",
-            }}
-          >
-            <div className="flex items-center gap-2 mb-1.5 not-italic">
-              <svg
-                viewBox="0 0 24 24"
-                fill="none"
-                stroke="currentColor"
-                strokeWidth="1.5"
-                className="w-3.5 h-3.5 text-amber-500 dark:text-amber-400"
-                aria-hidden="true"
-              >
-                <path d="M7 9l3 3-3 3M13 15h4" />
-                <rect x="3" y="4" width="18" height="16" rx="2" />
-              </svg>
-              <span className="text-xs font-semibold uppercase tracking-wider text-amber-600 dark:text-amber-400">
-                System
-              </span>
-            </div>
-            <div className="whitespace-pre-wrap">{msg.content}</div>
+  const [copied, setCopied] = useState(false);
+
+  const handleCopy = () => {
+    navigator.clipboard.writeText(msg.content).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2000);
+    });
+  };
+
+  if (msg.role === "system") {
+    return (
+      <div className="chat-message-row">
+        <div className="chat-message-container flex justify-center">
+          <div className="inline-flex items-center gap-2 px-4 py-2 rounded-full bg-amber-50/80 dark:bg-amber-500/5 border border-amber-200/40 dark:border-amber-500/10 text-xs text-amber-700 dark:text-amber-300/80">
+            <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="1.5" className="w-3 h-3" aria-hidden="true">
+              <path d="M7 9l3 3-3 3M13 15h4" />
+              <rect x="3" y="4" width="18" height="16" rx="2" />
+            </svg>
+            <span>{msg.content}</span>
           </div>
-          <div className="text-xs text-amber-400 dark:text-amber-500/60 mt-1 px-1 font-mono text-center">
-            {msg.ts}
+        </div>
+      </div>
+    );
+  }
+
+  if (msg.role === "user") {
+    return (
+      <div className="chat-message-row">
+        <div className="chat-message-container flex justify-end">
+          <div className="max-w-[80%] lg:max-w-[70%]">
+            <div className="px-4 py-3 rounded-2xl rounded-br-md text-sm leading-relaxed bg-blue-600 text-white shadow-sm">
+              {msg.content}
+            </div>
+            <div className="text-[10px] text-gray-400 dark:text-gray-500 mt-1 text-right font-mono px-1">
+              {msg.ts}
+            </div>
           </div>
         </div>
-      ) : (
-        <>
-          <div
-            className={`w-8 h-8 rounded-full shrink-0 flex items-center justify-center text-xs font-medium ${
-              msg.role === "user"
-                ? "bg-blue-100 dark:bg-blue-500/15 text-blue-600 dark:text-blue-400 border border-blue-200 dark:border-blue-500/30"
-                : "bg-gray-100 dark:bg-zinc-800 text-mizan-gold border border-gray-200 dark:border-zinc-700"
-            }`}
-          >
-            {msg.role === "user"
-              ? "You"
-              : selectedAgent?.name?.[0] || msg.agent?.[0] || "AI"}
+      </div>
+    );
+  }
+
+  // Assistant message — full-width like ChatGPT/Claude
+  return (
+    <div className="chat-message-row group/msg">
+      <div className="chat-message-container">
+        <div className="flex gap-3.5">
+          {/* Avatar */}
+          <div className="w-7 h-7 rounded-full shrink-0 flex items-center justify-center mt-0.5 bg-gradient-to-br from-amber-400 to-amber-600 shadow-sm">
+            <svg viewBox="0 0 20 20" fill="white" className="w-3.5 h-3.5">
+              <path d="M10 1a.75.75 0 01.75.75v1.5a.75.75 0 01-1.5 0v-1.5A.75.75 0 0110 1zM10 7a3 3 0 100 6 3 3 0 000-6z" />
+            </svg>
           </div>
-          <div
-            className={msg.role === "assistant" ? "max-w-[85%]" : "max-w-[75%]"}
-          >
-            {msg.role === "assistant" ? (
-              <div className="prose px-5 py-3.5 rounded-2xl text-sm leading-relaxed bg-white/80 dark:bg-mizan-dark-surface/80 backdrop-blur-md border border-white/50 dark:border-white/5 text-gray-800 dark:text-gray-200 rounded-tl-sm shadow-sm transition-all hover:shadow-md">
-                <ChatMessageContent content={msg.content} />
-              </div>
-            ) : (
-              <div className="px-5 py-3.5 rounded-2xl text-sm leading-relaxed bg-gradient-to-br from-blue-500 to-blue-600 border border-blue-400/50 text-white rounded-tr-sm shadow-md">
-                {msg.content}
-              </div>
-            )}
-            {msg.role === "assistant" && msg.cognitive && (
-              <CognitiveBar cognitive={msg.cognitive} />
-            )}
-            <div className="text-xs text-gray-400 dark:text-gray-500 mt-1 px-1 font-mono opacity-0 group-hover:opacity-100 transition-opacity">
-              {msg.role === "assistant" ? msg.agent : "You"} &middot; {msg.ts}
+
+          {/* Body */}
+          <div className="min-w-0 flex-1 overflow-hidden">
+            {/* Header */}
+            <div className="flex items-center gap-2 mb-1">
+              <span className="text-[13px] font-semibold text-gray-900 dark:text-gray-100">
+                {msg.agent || selectedAgent?.name || "MIZAN"}
+              </span>
+              {msg.model && (
+                <span className="text-[10px] font-mono px-1.5 py-0.5 rounded bg-gray-100 dark:bg-zinc-800 text-gray-500 dark:text-gray-400">
+                  {msg.model}
+                </span>
+              )}
+            </div>
+
+            {/* Content */}
+            <div className="prose">
+              <ChatMessageContent content={msg.content} />
+            </div>
+
+            {/* Cognitive bar */}
+            {msg.cognitive && <CognitiveBar cognitive={msg.cognitive} />}
+
+            {/* Action buttons — hover reveal */}
+            <div className="flex items-center gap-1 mt-2 opacity-0 group-hover/msg:opacity-100 transition-opacity duration-200">
+              <button
+                onClick={handleCopy}
+                className="p-1.5 rounded-md text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-100 dark:hover:bg-zinc-800 transition-colors"
+                title="Copy"
+              >
+                {copied ? (
+                  <svg viewBox="0 0 20 20" fill="currentColor" className="w-3.5 h-3.5 text-green-500">
+                    <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
+                  </svg>
+                ) : (
+                  <svg viewBox="0 0 20 20" fill="currentColor" className="w-3.5 h-3.5">
+                    <path d="M7 3.5A1.5 1.5 0 018.5 2h3.879a1.5 1.5 0 011.06.44l3.122 3.12A1.5 1.5 0 0117 6.622V12.5a1.5 1.5 0 01-1.5 1.5h-1v-3.379a3 3 0 00-.879-2.121L10.5 5.379A3 3 0 008.379 4.5H7v-1z" />
+                    <path d="M4.5 6A1.5 1.5 0 003 7.5v9A1.5 1.5 0 004.5 18h7a1.5 1.5 0 001.5-1.5v-5.879a1.5 1.5 0 00-.44-1.06L9.44 6.439A1.5 1.5 0 008.378 6H4.5z" />
+                  </svg>
+                )}
+              </button>
+              <span className="text-[10px] text-gray-400 dark:text-gray-500 font-mono ml-1">
+                {msg.ts}
+              </span>
             </div>
           </div>
-        </>
-      )}
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/frontend/src/components/Markdown.tsx b/frontend/src/components/Markdown.tsx
index 346e400..700278a 100644
--- a/frontend/src/components/Markdown.tsx
+++ b/frontend/src/components/Markdown.tsx
@@ -1,5 +1,23 @@
-import { memo, useState, useCallback } from "react";
+import { memo, useState, useCallback, type ReactNode } from "react";
 import ReactMarkdown from "react-markdown";
+import remarkGfm from "remark-gfm";
+import remarkMath from "remark-math";
+import rehypeKatex from "rehype-katex";
+import rehypeHighlight from "rehype-highlight";
+import "katex/dist/katex.min.css";
+import "highlight.js/styles/github-dark.min.css";
+
+/** Recursively extract plain text from React children (for copy button). */
+function extractText(node: ReactNode): string {
+  if (typeof node === "string") return node;
+  if (typeof node === "number") return String(node);
+  if (!node) return "";
+  if (Array.isArray(node)) return node.map(extractText).join("");
+  if (typeof node === "object" && "props" in node) {
+    return extractText(node.props.children);
+  }
+  return "";
+}
 
 function CopyButton({ text }: { text: string }) {
   const [copied, setCopied] = useState(false);
@@ -13,10 +31,25 @@ function CopyButton({ text }: { text: string }) {
   return (
     <button
       onClick={handleCopy}
-      className="absolute top-2 right-2 px-2 py-0.5 text-xs rounded bg-gray-200 dark:bg-zinc-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-zinc-600 transition-colors cursor-pointer focus-ring"
+      className="absolute top-2 right-2 px-2 py-0.5 text-xs rounded bg-gray-700/80 text-gray-300 hover:bg-gray-600 transition-colors cursor-pointer focus-ring z-10 backdrop-blur-sm"
       aria-label="Copy code"
     >
-      {copied ? "Copied!" : "Copy"}
+      {copied ? (
+        <span className="flex items-center gap-1 text-green-400">
+          <svg viewBox="0 0 20 20" fill="currentColor" className="w-3 h-3">
+            <path fillRule="evenodd" d="M16.704 4.153a.75.75 0 01.143 1.052l-8 10.5a.75.75 0 01-1.127.075l-4.5-4.5a.75.75 0 011.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 011.05-.143z" clipRule="evenodd" />
+          </svg>
+          Copied
+        </span>
+      ) : (
+        <span className="flex items-center gap-1">
+          <svg viewBox="0 0 20 20" fill="currentColor" className="w-3 h-3">
+            <path d="M7 3.5A1.5 1.5 0 018.5 2h3.879a1.5 1.5 0 011.06.44l3.122 3.12A1.5 1.5 0 0117 6.622V12.5a1.5 1.5 0 01-1.5 1.5h-1v-3.379a3 3 0 00-.879-2.121L10.5 5.379A3 3 0 008.379 4.5H7v-1z" />
+            <path d="M4.5 6A1.5 1.5 0 003 7.5v9A1.5 1.5 0 004.5 18h7a1.5 1.5 0 001.5-1.5v-5.879a1.5 1.5 0 00-.44-1.06L9.44 6.439A1.5 1.5 0 008.378 6H4.5z" />
+          </svg>
+          Copy
+        </span>
+      )}
     </button>
   );
 }
@@ -29,29 +62,53 @@ export const Markdown = memo(function Markdown({ content }: MarkdownProps) {
   return (
     <div className="prose">
       <ReactMarkdown
+        remarkPlugins={[remarkGfm, remarkMath]}
+        rehypePlugins={[rehypeKatex, [rehypeHighlight, { detect: true, ignoreMissing: true }]]}
         components={{
           code({ children, className }) {
-            const isBlock = className?.startsWith("language-");
-            const lang = className?.replace("language-", "") || "";
-            const text = String(children).replace(/\n$/, "");
+            const isBlock = className?.startsWith("language-") || className?.startsWith("hljs");
+            const langMatch = className?.match(/language-(\w+)/);
+            const lang = langMatch ? langMatch[1] : "";
+            const plainText = extractText(children).replace(/\n$/, "");
 
             if (isBlock) {
               return (
-                <div className="code-block-wrapper">
-                  {lang && <span className="code-lang">{lang}</span>}
-                  <CopyButton text={text} />
+                <div className="code-block-wrapper group">
+                  <div className="code-block-header">
+                    {lang && <span className="code-lang">{lang}</span>}
+                    <CopyButton text={plainText} />
+                  </div>
                   <pre>
-                    <code>{text}</code>
+                    <code className={className}>{children}</code>
                   </pre>
                 </div>
               );
             }
 
-            return <code>{children}</code>;
+            return <code className="inline-code">{children}</code>;
           },
           pre({ children }) {
             return <>{children}</>;
           },
+          table({ children }) {
+            return (
+              <div className="table-wrapper">
+                <table>{children}</table>
+              </div>
+            );
+          },
+          // Task list items get checkbox styling via GFM
+          input({ checked, ...props }) {
+            return (
+              <input
+                type="checkbox"
+                checked={checked}
+                readOnly
+                className="task-checkbox"
+                {...props}
+              />
+            );
+          },
         }}
       >
         {content}
diff --git a/frontend/src/index.css b/frontend/src/index.css
index 974c79e..c52074e 100644
--- a/frontend/src/index.css
+++ b/frontend/src/index.css
@@ -103,6 +103,88 @@
     @apply p-5 text-xs text-gray-400 dark:text-gray-500 font-mono;
   }
 
+  /* ===== CHAT LAYOUT (ChatGPT / Claude style) ===== */
+
+  .chat-layout {
+    position: absolute;
+    inset: 0;
+    display: grid;
+    grid-template-rows: auto 1fr auto;
+    overflow: hidden;
+  }
+
+  .chat-header {
+    @apply flex items-center border-b border-gray-200/70 dark:border-zinc-800 bg-white dark:bg-[#0B0C10] z-10 px-4 py-2;
+  }
+
+  .chat-header-inner {
+    @apply flex items-center justify-between w-full max-w-4xl mx-auto;
+  }
+
+  .chat-scroll-area {
+    overflow-y: auto;
+    min-height: 0;
+    scrollbar-gutter: stable both-edges;
+  }
+
+  .chat-message-row {
+    @apply flex justify-center px-4 py-2;
+  }
+
+  .chat-message-container {
+    @apply w-full max-w-3xl mx-auto;
+  }
+
+  .chat-input-area {
+    @apply px-4 pb-4 pt-3 bg-white dark:bg-[#0B0C10] border-t border-gray-100 dark:border-zinc-800/50 z-10;
+  }
+
+  .chat-scroll-to-bottom {
+    @apply absolute bottom-3 left-1/2 -translate-x-1/2 z-20
+    w-9 h-9 rounded-full flex items-center justify-center
+    bg-white dark:bg-zinc-800 border border-gray-200 dark:border-zinc-600
+    shadow-lg shadow-black/10 dark:shadow-black/30
+    text-gray-500 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200
+    hover:bg-gray-50 dark:hover:bg-zinc-700
+    transition-all duration-200 cursor-pointer
+    opacity-0 translate-y-2 pointer-events-none;
+  }
+
+  .chat-scroll-to-bottom.visible {
+    @apply opacity-100 translate-y-0 pointer-events-auto;
+  }
+
+  .chat-input-container {
+    @apply relative max-w-3xl mx-auto;
+  }
+
+  .chat-input-box {
+    @apply flex items-end gap-0 rounded-2xl border border-gray-300 dark:border-zinc-600 bg-gray-50 dark:bg-zinc-900 shadow-sm transition-all duration-200
+    focus-within:border-amber-400 dark:focus-within:border-amber-500/40 focus-within:shadow-md focus-within:shadow-amber-500/5 focus-within:bg-white dark:focus-within:bg-zinc-900;
+    padding: 8px 8px 8px 4px;
+  }
+
+  .chat-textarea {
+    @apply flex-1 resize-none bg-transparent border-none outline-none text-sm text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500 min-h-[24px] max-h-[200px] py-1 px-2 leading-normal;
+    font-family: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
+  }
+
+  .chat-input-btn {
+    @apply w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-150 shrink-0
+    text-gray-400 dark:text-gray-500 hover:text-gray-600 dark:hover:text-gray-300 hover:bg-gray-200/60 dark:hover:bg-zinc-700/60;
+  }
+
+  .chat-send-btn {
+    @apply w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-200 shrink-0
+    bg-amber-500 hover:bg-amber-600 text-white shadow-sm
+    disabled:bg-gray-200 dark:disabled:bg-zinc-700 disabled:text-gray-400 disabled:shadow-none disabled:cursor-not-allowed;
+  }
+
+  .chat-stop-btn {
+    @apply w-8 h-8 rounded-lg flex items-center justify-center transition-all duration-200 shrink-0
+    bg-red-500 hover:bg-red-600 text-white shadow-sm;
+  }
+
   /* ===== CARDS ===== */
 
   .card {
@@ -353,79 +435,284 @@
   }
 }
 
-/* Prose / markdown content */
+/* ===================================================================
+   PROSE / MARKDOWN CONTENT — Rich formatting for chat responses
+   Supports: GFM tables, task lists, math (KaTeX), syntax highlighting,
+   headings, lists, blockquotes, links, images, horizontal rules
+   =================================================================== */
+
 .prose {
-  @apply text-gray-700 dark:text-gray-300 leading-relaxed;
+  @apply text-gray-700 dark:text-gray-300 leading-relaxed text-sm;
+  word-break: break-word;
 }
 
-.prose code {
-  @apply bg-gray-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded text-xs font-mono text-amber-700 dark:text-[#D4AF37];
+.prose > *:first-child { margin-top: 0; }
+.prose > *:last-child { margin-bottom: 0; }
+
+/* --- Paragraphs --- */
+.prose p {
+  @apply my-2;
 }
 
+/* --- Inline code --- */
+.prose .inline-code,
+.prose code:not([class]) {
+  @apply bg-gray-100 dark:bg-zinc-800 px-1.5 py-0.5 rounded text-[13px] font-mono
+         text-amber-700 dark:text-[#D4AF37] border border-gray-200/60 dark:border-zinc-700/60;
+}
+
+/* --- Code blocks (pre) --- */
 .prose pre {
-  @apply bg-gray-100 dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-lg p-4 overflow-x-auto;
+  @apply bg-[#0d1117] dark:bg-[#0d1117] border border-gray-200 dark:border-zinc-800
+         rounded-lg overflow-x-auto text-[13px] leading-relaxed my-3;
+  padding: 1rem 1.25rem;
 }
 
 .prose pre code {
-  @apply bg-transparent p-0 text-gray-800 dark:text-gray-300;
+  @apply bg-transparent p-0 font-mono text-gray-200 border-none;
+  white-space: pre;
+  font-size: inherit;
 }
 
+/* --- Links --- */
 .prose a {
-  @apply text-blue-600 dark:text-blue-400 hover:underline;
+  @apply text-blue-600 dark:text-blue-400 underline decoration-blue-600/30 dark:decoration-blue-400/30
+         hover:decoration-blue-600 dark:hover:decoration-blue-400 transition-colors;
+}
+
+/* --- Headings --- */
+.prose h1 {
+  @apply text-lg font-bold text-gray-900 dark:text-gray-100 mt-5 mb-2 pb-1.5 border-b border-gray-200 dark:border-zinc-700;
+}
+
+.prose h2 {
+  @apply text-base font-bold text-gray-900 dark:text-gray-100 mt-4 mb-2 pb-1 border-b border-gray-200/50 dark:border-zinc-700/50;
 }
 
-.prose h1,
-.prose h2,
 .prose h3 {
-  @apply text-gray-900 dark:text-gray-100 font-semibold;
+  @apply text-sm font-bold text-gray-900 dark:text-gray-100 mt-3 mb-1.5;
+}
+
+.prose h4,
+.prose h5,
+.prose h6 {
+  @apply text-sm font-semibold text-gray-800 dark:text-gray-200 mt-3 mb-1;
 }
 
+/* --- Lists --- */
 .prose ul,
 .prose ol {
-  @apply pl-6 my-1;
+  @apply pl-6 my-2;
 }
 
 .prose ul {
   list-style-type: disc;
 }
 
+.prose ul ul {
+  list-style-type: circle;
+}
+
+.prose ul ul ul {
+  list-style-type: square;
+}
+
 .prose ol {
   list-style-type: decimal;
 }
 
+.prose ol ol {
+  list-style-type: lower-alpha;
+}
+
 .prose li {
-  @apply mb-1;
+  @apply mb-1 leading-relaxed;
+}
+
+.prose li > p {
+  @apply my-1;
+}
+
+/* --- Task list (GFM) --- */
+.prose li:has(.task-checkbox) {
+  list-style: none;
+  margin-left: -1.25rem;
 }
 
+.task-checkbox {
+  @apply mr-2 rounded border-gray-300 dark:border-zinc-600 cursor-default;
+  accent-color: #D4AF37;
+  width: 14px;
+  height: 14px;
+  vertical-align: middle;
+  position: relative;
+  top: -1px;
+}
+
+/* --- Blockquote --- */
 .prose blockquote {
-  @apply border-l-2 border-gray-300 dark:border-zinc-600 pl-3 my-2 italic text-gray-500 dark:text-gray-400;
+  @apply border-l-4 border-amber-400/70 dark:border-[#D4AF37]/50 pl-4 my-3
+         text-gray-500 dark:text-gray-400 bg-amber-50/30 dark:bg-amber-900/5
+         rounded-r-lg py-2 pr-3 italic;
 }
 
+.prose blockquote p:first-child { margin-top: 0; }
+.prose blockquote p:last-child { margin-bottom: 0; }
+
+/* --- Horizontal rule --- */
 .prose hr {
-  @apply my-3 border-gray-200 dark:border-zinc-700;
+  @apply my-4 border-gray-200 dark:border-zinc-700;
+}
+
+/* --- Images --- */
+.prose img {
+  @apply rounded-lg max-w-full h-auto my-3 shadow-sm;
+}
+
+/* --- Strong / Em / Del --- */
+.prose strong {
+  @apply font-semibold text-gray-900 dark:text-gray-100;
+}
+
+.prose em {
+  @apply italic;
+}
+
+.prose del {
+  @apply line-through text-gray-400 dark:text-gray-500;
+}
+
+/* ===================================================================
+   TABLES (GFM)
+   =================================================================== */
+.table-wrapper {
+  @apply overflow-x-auto my-3 rounded-lg border border-gray-200 dark:border-zinc-700;
+}
+
+.prose table {
+  @apply w-full text-xs border-collapse;
+}
+
+.prose thead {
+  @apply bg-gray-50 dark:bg-zinc-800/80;
+}
+
+.prose th {
+  @apply px-3 py-2 text-left text-xs font-semibold text-gray-700 dark:text-gray-300
+         border-b border-gray-200 dark:border-zinc-700 whitespace-nowrap;
+}
+
+.prose td {
+  @apply px-3 py-2 text-xs text-gray-600 dark:text-gray-400
+         border-b border-gray-100 dark:border-zinc-800;
+}
+
+.prose tbody tr:last-child td {
+  border-bottom: none;
+}
+
+.prose tbody tr:hover {
+  @apply bg-gray-50/50 dark:bg-zinc-800/30;
 }
 
-/* Code block wrapper with copy button */
+/* Alternating row colors */
+.prose tbody tr:nth-child(even) {
+  @apply bg-gray-50/30 dark:bg-zinc-800/20;
+}
+
+/* ===================================================================
+   CODE BLOCK WRAPPER (with header, lang label, copy button)
+   =================================================================== */
 .code-block-wrapper {
   position: relative;
-  margin: 0.5rem 0;
+  margin: 0.75rem 0;
+  @apply rounded-lg overflow-hidden border border-gray-200 dark:border-zinc-800;
+}
+
+.code-block-header {
+  @apply flex items-center justify-between px-3 py-1.5 bg-[#161b22] border-b border-zinc-800;
+  min-height: 32px;
 }
 
 .code-block-wrapper pre {
-  @apply bg-gray-100 dark:bg-zinc-900 border border-gray-200 dark:border-zinc-800 rounded-lg p-4 overflow-x-auto text-xs;
+  @apply bg-[#0d1117] overflow-x-auto text-[13px] leading-relaxed m-0 border-none rounded-none;
+  padding: 1rem 1.25rem;
 }
 
 .code-block-wrapper pre code {
-  @apply bg-transparent p-0 font-mono text-gray-800 dark:text-gray-300;
+  @apply bg-transparent p-0 font-mono text-gray-200 border-none;
   white-space: pre;
 }
 
 .code-block-wrapper .code-lang {
-  @apply absolute top-2 left-3 text-xs font-mono text-gray-400 dark:text-gray-500;
+  @apply text-xs font-mono text-gray-400 uppercase tracking-wide;
+  font-size: 11px;
 }
 
+/* Hide the absolute copy button when header is used */
 .code-block-wrapper .code-copy-btn {
-  @apply absolute top-2 right-2 px-2 py-0.5 text-xs rounded bg-gray-200 dark:bg-zinc-700 text-gray-600 dark:text-gray-300 hover:bg-gray-300 dark:hover:bg-zinc-600 transition-colors cursor-pointer;
+  @apply px-2 py-0.5 text-xs rounded bg-zinc-700/60 text-gray-300 hover:bg-zinc-600 transition-colors cursor-pointer;
+}
+
+/* ===================================================================
+   HIGHLIGHT.JS OVERRIDES — ensure dark theme works in both modes
+   =================================================================== */
+.prose pre code.hljs {
+  @apply bg-transparent p-0;
+}
+
+/* Override highlight.js background so it blends with our code block */
+.hljs {
+  background: transparent !important;
+  color: #c9d1d9 !important;
+}
+
+/* ===================================================================
+   KATEX / MATH OVERRIDES
+   =================================================================== */
+.prose .katex-display {
+  @apply my-3 overflow-x-auto py-2;
+}
+
+.prose .katex-display > .katex {
+  @apply text-gray-800 dark:text-gray-200;
+}
+
+.prose .katex {
+  font-size: 1em;
+  @apply text-gray-800 dark:text-gray-200;
+}
+
+/* Inline math */
+.prose .katex:not(.katex-display .katex) {
+  @apply px-0.5;
+}
+
+/* Math block container */
+.prose .math-display {
+  @apply bg-gray-50/50 dark:bg-zinc-800/30 rounded-lg px-4 py-2 my-3 overflow-x-auto;
+}
+
+/* ===================================================================
+   DEFINITION LIST (bonus)
+   =================================================================== */
+.prose dt {
+  @apply font-semibold text-gray-800 dark:text-gray-200 mt-2;
+}
+
+.prose dd {
+  @apply ml-4 mb-1 text-gray-600 dark:text-gray-400;
+}
+
+/* ===================================================================
+   FOOTNOTES (GFM)
+   =================================================================== */
+.prose .footnotes {
+  @apply mt-4 pt-3 border-t border-gray-200 dark:border-zinc-700 text-xs text-gray-500 dark:text-gray-400;
+}
+
+.prose .footnotes ol {
+  @apply pl-4;
 }
 
 /* Scrollbar thin variant for specific sections */