diff --git a/package-lock.json b/package-lock.json
index f5edb998e4e..09d952c4c5b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -52,8 +52,10 @@
         "react-google-recaptcha": "^3.1.0",
         "react-i18next": "^15.1.1",
         "react-infinite-scroll-component": "^6.1.0",
+        "react-markdown": "^9.0.1",
         "react-pdf": "^9.1.1",
         "react-webcam": "^7.2.0",
+        "rehype-raw": "^7.0.0",
         "tailwind-merge": "^2.5.4",
         "tailwindcss-animate": "^1.0.7",
         "use-keyboard-shortcut": "^1.1.6",
@@ -5090,7 +5092,6 @@
       "version": "4.1.12",
       "resolved": "https://registry.npmjs.org/@types/debug/-/debug-4.1.12.tgz",
       "integrity": "sha512-vIChWdVG3LG1SMxEvI/AK+FWJthlrqlTu7fbrlywTkkaONwk/UAGaULXRlf8vkzFBLVm0zkMdCquhL5aOjhXPQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/ms": "*"
@@ -5122,14 +5123,12 @@
       "version": "1.0.6",
       "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.6.tgz",
       "integrity": "sha512-AYnb1nQyY49te+VRAVgmzfcgjYS91mY5P0TKUDCLEM+gNnA+3T6rWITXRLYCpahpqSQbN5cE+gHpnPyXjHWxcw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/estree-jsx": {
       "version": "1.0.5",
       "resolved": "https://registry.npmjs.org/@types/estree-jsx/-/estree-jsx-1.0.5.tgz",
       "integrity": "sha512-52CcUVNFyfb1A2ALocQw/Dd1BQFNmSdkuC3BkZ6iqhdMfQz7JWOFRuJFloOzjk+6WijU56m9oKXFAXc7o3Towg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree": "*"
@@ -5149,6 +5148,14 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/@types/hast": {
+      "version": "3.0.4",
+      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
+      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/@types/is-empty": {
       "version": "1.2.3",
       "resolved": "https://registry.npmjs.org/@types/is-empty/-/is-empty-1.2.3.tgz",
@@ -5214,7 +5221,6 @@
       "version": "0.7.34",
       "resolved": "https://registry.npmjs.org/@types/ms/-/ms-0.7.34.tgz",
       "integrity": "sha512-nG96G3Wp6acyAgJqGasjODb+acrI7KltPiRxzHPXnP3NgI28bpQDRv53olbqGXbfcgF5aiiHmO3xpwEpS5Ld9g==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/node": {
@@ -5231,14 +5237,12 @@
       "version": "15.7.13",
       "resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.13.tgz",
       "integrity": "sha512-hCZTSvwbzWGvhqxp/RqVqwU999pBf2vp7hzIjiYOsl8wqOmUxkQ6ddw1cV3l8811+kdUFus/q4d1Y3E3SyEifA==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/@types/react": {
       "version": "18.3.12",
       "resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.12.tgz",
       "integrity": "sha512-D2wOSq/d6Agt28q7rSI3jhU7G6aiuzljDGZ2hTZHIkrTLUI+AF3WMeKkEZ9nN2fkBAlcktT6vcZjDFiIhMYEQw==",
-      "devOptional": true,
       "license": "MIT",
       "dependencies": {
         "@types/prop-types": "*",
@@ -5329,7 +5333,6 @@
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-3.0.3.tgz",
       "integrity": "sha512-ko/gIFJRv177XgZsZcBwnqJN5x/Gien8qNOn0D5bQU/zAzVf9Zt3BlcUiLqhV9y4ARk0GbT3tnUiPNgnTXzc/Q==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/@types/use-sync-external-store": {
@@ -5553,7 +5556,6 @@
       "version": "1.2.0",
       "resolved": "https://registry.npmjs.org/@ungap/structured-clone/-/structured-clone-1.2.0.tgz",
       "integrity": "sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==",
-      "dev": true,
       "license": "ISC"
     },
     "node_modules/@vitejs/plugin-react-swc": {
@@ -6444,7 +6446,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/bail/-/bail-2.0.2.tgz",
       "integrity": "sha512-0xO6mYd7JB2YesxDKplafRpsiOzPt9V02ddPCLbY1xYGPOX24NTyN50qnUxgCPcSoYMhKpAuBTjQoRZCAkUDRw==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -6754,7 +6755,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/ccount/-/ccount-2.0.1.tgz",
       "integrity": "sha512-eyrF0jiFpY+3drT6383f1qhkbGsLSifNAjA61IUjZjmLCWjItY6LB9ft9YhoDgwfmclB2zhu51Lc7+95b8NRAg==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -6817,7 +6817,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/character-entities-html4/-/character-entities-html4-2.1.0.tgz",
       "integrity": "sha512-1v7fgQRj6hnSwFpq1Eu0ynr/CDEw0rXo2B61qXrLNdHZmPKgb7fqS1a2JwF0rISo9q77jDI8VMEHoApn8qDoZA==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -7074,6 +7073,15 @@
         "node": ">= 0.8"
       }
     },
+    "node_modules/comma-separated-tokens": {
+      "version": "2.0.3",
+      "resolved": "https://registry.npmjs.org/comma-separated-tokens/-/comma-separated-tokens-2.0.3.tgz",
+      "integrity": "sha512-Fu4hJdvzeylCfQPp9SGWidpzrMs7tTrlu6Vb8XGaRGck8QSNZJJp538Wrb60Lax4fPwR64ViY468OIUTbRlGZg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/commander": {
       "version": "6.2.1",
       "resolved": "https://registry.npmjs.org/commander/-/commander-6.2.1.tgz",
@@ -7308,7 +7316,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
       "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
-      "devOptional": true,
       "license": "MIT"
     },
     "node_modules/cypress": {
@@ -7554,7 +7561,6 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/decode-named-character-reference/-/decode-named-character-reference-1.0.2.tgz",
       "integrity": "sha512-O8x12RzrUF8xyVcY0KJowWsmaJxQbmy0/EtnNtHRpsOcT7dFk5W598coHqBVpmWo1oQQfsCqfCmkZN5DJrZVdg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "character-entities": "^2.0.0"
@@ -7568,7 +7574,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
       "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -7907,7 +7912,6 @@
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/devlop/-/devlop-1.1.0.tgz",
       "integrity": "sha512-RWmIqhcFf1lRYBvNmr7qTNuyCt/7/ns2jbpp1+PalgE/rDQcBT0fioSMUpJ93irlUhC5hrg4cYqe6U+0ImW0rA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "dequal": "^2.0.0"
@@ -8111,7 +8115,6 @@
       "version": "4.5.0",
       "resolved": "https://registry.npmjs.org/entities/-/entities-4.5.0.tgz",
       "integrity": "sha512-V0hjH4dGPh9Ao5p0MoRY6BVqtwCjhz6vI5LT8AJ55H+4g9/4vbHx1I54fS0XuclLhDHArPQCiMjDxjaL8fPxhw==",
-      "dev": true,
       "license": "BSD-2-Clause",
       "engines": {
         "node": ">=0.12"
@@ -8852,7 +8855,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/estree-util-is-identifier-name/-/estree-util-is-identifier-name-3.0.0.tgz",
       "integrity": "sha512-hFtqIDZTIUZ9BXLb8y4pYGyk6+wekIivNVTcmvk8NoOh+VeRn5y6cEHzbURrWbfp1fIqdVipilzj+lfaadNZmg==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "opencollective",
@@ -9936,6 +9938,133 @@
         "node": ">= 0.4"
       }
     },
+    "node_modules/hast-util-from-parse5": {
+      "version": "8.0.1",
+      "resolved": "https://registry.npmjs.org/hast-util-from-parse5/-/hast-util-from-parse5-8.0.1.tgz",
+      "integrity": "sha512-Er/Iixbc7IEa7r/XLtuG52zoqn/b3Xng/w6aZQ0xGVxzhw5xUFxcRqdPzP6yFi/4HBYRaifaI5fQ1RH8n0ZeOQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hastscript": "^8.0.0",
+        "property-information": "^6.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-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==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-raw": {
+      "version": "9.0.4",
+      "resolved": "https://registry.npmjs.org/hast-util-raw/-/hast-util-raw-9.0.4.tgz",
+      "integrity": "sha512-LHE65TD2YiNsHD3YuXcKPHXPLuYh/gjp12mOfU8jxSrm1f/yJpsb0F/KKljS6U9LJoP0Ux+tCe8iJ2AsPzTdgA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "hast-util-from-parse5": "^8.0.0",
+        "hast-util-to-parse5": "^8.0.0",
+        "html-void-elements": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "parse5": "^7.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-jsx-runtime": {
+      "version": "2.3.2",
+      "resolved": "https://registry.npmjs.org/hast-util-to-jsx-runtime/-/hast-util-to-jsx-runtime-2.3.2.tgz",
+      "integrity": "sha512-1ngXYb+V9UT5h+PxNRa1O1FYguZK/XL+gkeqvp7EdHlB9oHUG0eYRo/vY5inBdcqo3RkPMC58/H94HvkbfGdyg==",
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "@types/hast": "^3.0.0",
+        "@types/unist": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "estree-util-is-identifier-name": "^3.0.0",
+        "hast-util-whitespace": "^3.0.0",
+        "mdast-util-mdx-expression": "^2.0.0",
+        "mdast-util-mdx-jsx": "^3.0.0",
+        "mdast-util-mdxjs-esm": "^2.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "style-to-object": "^1.0.0",
+        "unist-util-position": "^5.0.0",
+        "vfile-message": "^4.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hast-util-to-parse5": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/hast-util-to-parse5/-/hast-util-to-parse5-8.0.0.tgz",
+      "integrity": "sha512-3KKrV5ZVI8if87DVSi1vDeByYrkGzg4mEfeu4alwgmmIeARiBLKCZS2uw5Gb6nU9x9Yufyj3iudm6i7nl52PFw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "devlop": "^1.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0",
+        "web-namespaces": "^2.0.0",
+        "zwitch": "^2.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",
+      "integrity": "sha512-88JUN06ipLwsnv+dVn+OIYOvAuvBMy/Qoi6O7mQHxdPXpjy+Cd6xRkWwux7DKO+4sYILtLBRIKgsdpS2gQc7qw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/hastscript": {
+      "version": "8.0.0",
+      "resolved": "https://registry.npmjs.org/hastscript/-/hastscript-8.0.0.tgz",
+      "integrity": "sha512-dMOtzCEd3ABUeSIISmrETiKuyydk1w0pa+gE/uormcTpSYuaNJPbX1NU3JLyscSLjwAQM8bWMhhIlnCqnRvDTw==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "comma-separated-tokens": "^2.0.0",
+        "hast-util-parse-selector": "^4.0.0",
+        "property-information": "^6.0.0",
+        "space-separated-tokens": "^2.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/hi-profiles": {
       "version": "1.1.0",
       "resolved": "https://registry.npmjs.org/hi-profiles/-/hi-profiles-1.1.0.tgz",
@@ -9997,6 +10126,24 @@
         "void-elements": "3.1.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",
+      "integrity": "sha512-ol6UPyBWqsrO6EJySPz2O7ZSr856WDrEzM5zMqp+FJJLGMW35cLYmmZnl0vztAZxRUoNZJFTCohfjuIJ8I4QBQ==",
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/html-void-elements": {
+      "version": "3.0.0",
+      "resolved": "https://registry.npmjs.org/html-void-elements/-/html-void-elements-3.0.0.tgz",
+      "integrity": "sha512-bEqo66MRXsUGxWHV5IP0PUiAWwoEjba4VCzg0LjFJBpchPaTfyfCKTG6bc5F8ucKec3q5y6qOdGyYTSBEvhCrg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/http-proxy-agent": {
       "version": "7.0.2",
       "resolved": "https://registry.npmjs.org/http-proxy-agent/-/http-proxy-agent-7.0.2.tgz",
@@ -10256,6 +10403,11 @@
         "node": ">=10"
       }
     },
+    "node_modules/inline-style-parser": {
+      "version": "0.2.4",
+      "resolved": "https://registry.npmjs.org/inline-style-parser/-/inline-style-parser-0.2.4.tgz",
+      "integrity": "sha512-0aO8FkhNZlj/ZIbNi7Lxxr12obT7cL1moPfE4tg1LkX7LlLfC6DeX4l2ZEud1ukP9jNQyNnfzQVqwbwmAATY4Q=="
+    },
     "node_modules/internal-slot": {
       "version": "1.0.7",
       "resolved": "https://registry.npmjs.org/internal-slot/-/internal-slot-1.0.7.tgz",
@@ -10659,7 +10811,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/is-plain-obj/-/is-plain-obj-4.1.0.tgz",
       "integrity": "sha512-+Pgi+vMuUNkJyExiMBt5IlFoMyKnr5zhJ4Uspz58WOhBF5QoIZkFyNHIbBAtHwzVAgk5RtndVNsDRN61/mmDqg==",
-      "dev": true,
       "license": "MIT",
       "engines": {
         "node": ">=12"
@@ -12061,7 +12212,6 @@
       "version": "3.1.0",
       "resolved": "https://registry.npmjs.org/longest-streak/-/longest-streak-3.1.0.tgz",
       "integrity": "sha512-9Ri+o0JYgehTaVBBDoMqIl8GXtbWg711O3srftcHhZ0dqnETqLaoIK0x17fUw9rFSlK/0NlsKe0Ahhyl5pXE2g==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -12210,7 +12360,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-expression/-/mdast-util-mdx-expression-2.0.1.tgz",
       "integrity": "sha512-J6f+9hUp+ldTZqKRSg7Vw5V6MqjATc+3E4gf3CFNcuZNWD8XdyI6zQ8GqH7f8169MM6P7hMBRDVGnn7oHB9kXQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree-jsx": "^1.0.0",
@@ -12225,21 +12374,10 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-mdx-expression/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "*"
-      }
-    },
     "node_modules/mdast-util-mdx-expression/node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
       "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "*"
@@ -12249,7 +12387,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.1.tgz",
       "integrity": "sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0",
@@ -12274,7 +12411,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
       "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0"
@@ -12288,7 +12424,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
       "integrity": "sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -12320,50 +12455,10 @@
         "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/mdast-util-mdx-expression/node_modules/micromark-util-encode": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
-      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/mdast-util-mdx-expression/node_modules/micromark-util-sanitize-uri": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
-      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-encode": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0"
-      }
-    },
     "node_modules/mdast-util-mdx-expression/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",
       "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0"
@@ -12377,7 +12472,6 @@
       "version": "3.1.3",
       "resolved": "https://registry.npmjs.org/mdast-util-mdx-jsx/-/mdast-util-mdx-jsx-3.1.3.tgz",
       "integrity": "sha512-bfOjvNt+1AcbPLTFMFWY149nJz0OjmewJs3LQQ5pIyVGxP4CdOqNVJL6kTaM5c68p8q82Xv3nCyFfUnuEcH3UQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree-jsx": "^1.0.0",
@@ -12398,21 +12492,10 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-mdx-jsx/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "*"
-      }
-    },
     "node_modules/mdast-util-mdx-jsx/node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
       "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "*"
@@ -12422,7 +12505,6 @@
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/character-entities/-/character-entities-2.0.2.tgz",
       "integrity": "sha512-shx7oQ0Awen/BRIdkjkvz54PnEEI/EjwXDSIZp86/KKdbafHh1Df/RYGBhn4hbe2+uKC9FnT5UCEdyPz3ai9hQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -12433,7 +12515,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
       "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -12444,7 +12525,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/character-reference-invalid/-/character-reference-invalid-2.0.1.tgz",
       "integrity": "sha512-iBZ4F4wRbyORVsu0jPV7gXkOsGYjGHPmAyv+HiHG8gi5PtC9KI2j1+v8/tlibRvjoWX027ypmG/n0HtO5t7unw==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -12455,7 +12535,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphabetical/-/is-alphabetical-2.0.1.tgz",
       "integrity": "sha512-FWyyY60MeTNyeSRpkM2Iry0G9hpr7/9kD40mD/cGQEuilcZYS4okz8SN2Q6rLCJ8gbCt6fN+rC+6tMGS99LaxQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -12466,7 +12545,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-alphanumerical/-/is-alphanumerical-2.0.1.tgz",
       "integrity": "sha512-hmbYhX/9MUMF5uh7tOXyK/n0ZvWpad5caBA17GsC6vyuCqaWliRG5K1qS9inmUhEMaOBIW7/whAnSwveW/LtZw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "is-alphabetical": "^2.0.0",
@@ -12481,7 +12559,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-decimal/-/is-decimal-2.0.1.tgz",
       "integrity": "sha512-AAB9hiomQs5DXWcRB1rqsxGUstbRroFOPPVAomNk/3XHR5JyEZChOyTWe2oayKnsSsr/kcGqF+z6yuH6HHpN0A==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -12492,7 +12569,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/is-hexadecimal/-/is-hexadecimal-2.0.1.tgz",
       "integrity": "sha512-DgZQp241c8oO6cA1SbTEWiXeoxV42vlcJxgH+B3hi1AiqqKruZR3ZGF8In3fj4+/y/7rHvlOZLZtgJ/4ttYGZg==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -12503,7 +12579,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.1.tgz",
       "integrity": "sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0",
@@ -12528,7 +12603,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
       "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0"
@@ -12542,7 +12616,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
       "integrity": "sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -12574,50 +12647,10 @@
         "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/mdast-util-mdx-jsx/node_modules/micromark-util-encode": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
-      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/mdast-util-mdx-jsx/node_modules/micromark-util-sanitize-uri": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
-      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-encode": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0"
-      }
-    },
     "node_modules/mdast-util-mdx-jsx/node_modules/parse-entities": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/parse-entities/-/parse-entities-4.0.1.tgz",
       "integrity": "sha512-SWzvYcSJh4d/SGLIOQfZ/CoNv6BTlI6YEQ7Nj82oDVnRpwe/Z/F1EMx42x3JAOwGBlCjeCH0BRJQbQ/opHL17w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^2.0.0",
@@ -12638,14 +12671,12 @@
       "version": "2.0.11",
       "resolved": "https://registry.npmjs.org/@types/unist/-/unist-2.0.11.tgz",
       "integrity": "sha512-CmBKiL6NNo/OqgmMn95Fk9Whlp2mtvIv+KNpQKN2F4SjvrEesubTRWGYSg+BnWZOnlCaSTU1sMpsBOzgbYhnsA==",
-      "dev": true,
       "license": "MIT"
     },
     "node_modules/mdast-util-mdx-jsx/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",
       "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0"
@@ -12740,49 +12771,10 @@
         "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/mdast-util-mdx/node_modules/micromark-util-encode": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
-      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/mdast-util-mdx/node_modules/micromark-util-sanitize-uri": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
-      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-encode": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0"
-      }
-    },
-    "node_modules/mdast-util-mdx/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",
-      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
+    "node_modules/mdast-util-mdx/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",
+      "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
       "dev": true,
       "license": "MIT",
       "dependencies": {
@@ -12797,7 +12789,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-mdxjs-esm/-/mdast-util-mdxjs-esm-2.0.1.tgz",
       "integrity": "sha512-EcmOpxsZ96CvlP03NghtH1EsLtr0n9Tm4lPUJUBccV9RwUOneqSycg19n5HGzCf+10LozMRSObtVr3ee1WoHtg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/estree-jsx": "^1.0.0",
@@ -12812,21 +12803,10 @@
         "url": "https://opencollective.com/unified"
       }
     },
-    "node_modules/mdast-util-mdxjs-esm/node_modules/@types/hast": {
-      "version": "3.0.4",
-      "resolved": "https://registry.npmjs.org/@types/hast/-/hast-3.0.4.tgz",
-      "integrity": "sha512-WPs+bbQw5aCj+x6laNGWLH3wviHtoCv/P3+otBhbOhJgG8qtpdAMlTCxLtsTWA7LH1Oh/bFCHsBn0TPS5m30EQ==",
-      "dev": true,
-      "license": "MIT",
-      "dependencies": {
-        "@types/unist": "*"
-      }
-    },
     "node_modules/mdast-util-mdxjs-esm/node_modules/@types/mdast": {
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
       "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "*"
@@ -12836,7 +12816,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.1.tgz",
       "integrity": "sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0",
@@ -12861,7 +12840,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
       "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0"
@@ -12875,7 +12853,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
       "integrity": "sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -12907,50 +12884,10 @@
         "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/mdast-util-mdxjs-esm/node_modules/micromark-util-encode": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
-      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/mdast-util-mdxjs-esm/node_modules/micromark-util-sanitize-uri": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
-      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-encode": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0"
-      }
-    },
     "node_modules/mdast-util-mdxjs-esm/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",
       "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0"
@@ -12964,7 +12901,6 @@
       "version": "4.1.0",
       "resolved": "https://registry.npmjs.org/mdast-util-phrasing/-/mdast-util-phrasing-4.1.0.tgz",
       "integrity": "sha512-TqICwyvJJpBwvGAMZjj4J2n0X8QWp21b9l0o7eXyVJ25YNWYbJDVIyD1bZXE6WtV6RmKJVYmQAKWa0zWOABz2w==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0",
@@ -12979,17 +12915,43 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
       "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "*"
       }
     },
+    "node_modules/mdast-util-to-hast": {
+      "version": "13.2.0",
+      "resolved": "https://registry.npmjs.org/mdast-util-to-hast/-/mdast-util-to-hast-13.2.0.tgz",
+      "integrity": "sha512-QGYKEuUsYT9ykKBCMOEDLsU5JRObWQusAolFMeko/tYPufNkRffBAQjIE+99jbA87xv6FgmjLtwjh9wBWajwAA==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "@ungap/structured-clone": "^1.0.0",
+        "devlop": "^1.0.0",
+        "micromark-util-sanitize-uri": "^2.0.0",
+        "trim-lines": "^3.0.0",
+        "unist-util-position": "^5.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/mdast-util-to-hast/node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/mdast-util-to-markdown": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/mdast-util-to-markdown/-/mdast-util-to-markdown-2.1.0.tgz",
       "integrity": "sha512-SR2VnIEdVNCJbP6y7kVTJgPLifdr8WEU440fQec7qHoHOUz/oJ2jmNRqdDQ3rbiStOXb2mCDGTuwsK5OPUgYlQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0",
@@ -13010,7 +12972,6 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
       "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "*"
@@ -13020,7 +12981,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
       "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0"
@@ -13104,7 +13064,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-core-commonmark/-/micromark-core-commonmark-2.0.1.tgz",
       "integrity": "sha512-CUQyKr1e///ZODyD1U3xit6zXwy1a8q2a1S1HKtIlmgvurrEpaw/Y9y6KSIbF8P59cn/NjzHyO+Q2fAyYLQrAA==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13247,7 +13206,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-factory-destination/-/micromark-factory-destination-2.0.0.tgz",
       "integrity": "sha512-j9DGrQLm/Uhl2tCzcbLhy5kXsgkHUrjJHg4fFAeoMRwJmJerT9aw4FEhIbZStWN8A3qMwOp1uzHr4UL8AInxtA==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13269,7 +13227,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-factory-label/-/micromark-factory-label-2.0.0.tgz",
       "integrity": "sha512-RR3i96ohZGde//4WSe/dJsxOX6vxIg9TimLAS3i4EhBAFx8Sm5SmqVfR8E87DPSR31nEAjZfbt91OMZWcNgdZw==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13320,7 +13277,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-factory-space/-/micromark-factory-space-2.0.0.tgz",
       "integrity": "sha512-TKr+LIDX2pkBJXFLzpyPyljzYK3MtmllMUMODTQJIUfDGncESaqB90db9IAUcz4AZAJFdd8U9zOp9ty1458rxg==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13341,7 +13297,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-factory-title/-/micromark-factory-title-2.0.0.tgz",
       "integrity": "sha512-jY8CSxmpWLOxS+t8W+FG3Xigc0RDQA9bKMY/EwILvsesiRniiVMejYTE4wumNc2f4UbAa4WsHqe3J1QS1sli+A==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13364,7 +13319,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-factory-whitespace/-/micromark-factory-whitespace-2.0.0.tgz",
       "integrity": "sha512-28kbwaBjc5yAI1XadbdPYHX/eDnqaUFVikLwrO7FDnKG7lpgxnvk/XGRhX/PN0mOZ+dBSZ+LgunHS+6tYQAzhA==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13387,7 +13341,6 @@
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/micromark-util-character/-/micromark-util-character-2.1.0.tgz",
       "integrity": "sha512-KvOVV+X1yLBfs9dCBSopq/+G1PcgT3lAK07mC4BzXi5E7ahzMAF8oIupDDJ6mievI6F+lAATkbQQlQixJfT3aQ==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13408,7 +13361,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-util-chunked/-/micromark-util-chunked-2.0.0.tgz",
       "integrity": "sha512-anK8SWmNphkXdaKgz5hJvGa7l00qmcaUQoMYsBwDlSKFKjc6gjGXPDw3FNL3Nbwq5L8gE+RCbGqTw49FK5Qyvg==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13428,7 +13380,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-util-classify-character/-/micromark-util-classify-character-2.0.0.tgz",
       "integrity": "sha512-S0ze2R9GH+fu41FA7pbSqNWObo/kzwf8rN/+IGlW/4tC6oACOs8B++bh+i9bVyNnwCcuksbFwsBme5OCKXCwIw==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13450,7 +13401,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-util-combine-extensions/-/micromark-util-combine-extensions-2.0.0.tgz",
       "integrity": "sha512-vZZio48k7ON0fVS3CUgFatWHoKbbLTK/rT7pzpJ4Bjp5JjkZeasRfrS9wsBdDJK2cJLHMckXZdzPSSr1B8a4oQ==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13471,7 +13421,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-util-decode-numeric-character-reference/-/micromark-util-decode-numeric-character-reference-2.0.1.tgz",
       "integrity": "sha512-bmkNc7z8Wn6kgjZmVHOX3SowGmVdhYS7yBpMnuMnPzDq/6xwVA604DuOXMZTO1lvq01g+Adfa0pE2UKGlxL1XQ==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13491,7 +13440,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-util-decode-string/-/micromark-util-decode-string-2.0.0.tgz",
       "integrity": "sha512-r4Sc6leeUTn3P6gk20aFMj2ntPwn6qpDZqWvYmAG6NgvFTIlj4WtrAudLi65qYoaGdXYViXYw2pkmn7QnIFasA==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13510,6 +13458,21 @@
         "micromark-util-symbol": "^2.0.0"
       }
     },
+    "node_modules/micromark-util-encode": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.1.tgz",
+      "integrity": "sha512-c3cVx2y4KqUnwopcO9b/SCdo2O67LwJJ/UyqGfbigahfegL9myoEFoDYZgkT7f36T0bLrM9hZTAaAyH+PCAXjw==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ]
+    },
     "node_modules/micromark-util-events-to-acorn": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/micromark-util-events-to-acorn/-/micromark-util-events-to-acorn-2.0.2.tgz",
@@ -13541,7 +13504,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-util-html-tag-name/-/micromark-util-html-tag-name-2.0.0.tgz",
       "integrity": "sha512-xNn4Pqkj2puRhKdKTm8t1YHC/BAjx6CEwRFXntTaRf/x16aqka6ouVoutm+QdkISTlT7e2zU7U4ZdlDLJd2Mcw==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13558,7 +13520,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-util-normalize-identifier/-/micromark-util-normalize-identifier-2.0.0.tgz",
       "integrity": "sha512-2xhYT0sfo85FMrUPtHcPo2rrp1lwbDEEzpx7jiH2xXJLqBuy4H0GgXk5ToU8IEwoROtXuL8ND0ttVa4rNqYK3w==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13578,7 +13539,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-util-resolve-all/-/micromark-util-resolve-all-2.0.0.tgz",
       "integrity": "sha512-6KU6qO7DZ7GJkaCgwBNtplXCvGkJToU86ybBAUdavvgsCiG8lSSvYxr9MhwmQ+udpzywHsl4RpGJsYWG1pDOcA==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13594,11 +13554,30 @@
         "micromark-util-types": "^2.0.0"
       }
     },
+    "node_modules/micromark-util-sanitize-uri": {
+      "version": "2.0.1",
+      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.1.tgz",
+      "integrity": "sha512-9N9IomZ/YuGGZZmQec1MbgxtlgougxTodVwDzzEouPKo3qFWvymFHWcnDi2vzV1ff6kas9ucW+o3yzJK9YB1AQ==",
+      "funding": [
+        {
+          "type": "GitHub Sponsors",
+          "url": "https://github.com/sponsors/unifiedjs"
+        },
+        {
+          "type": "OpenCollective",
+          "url": "https://opencollective.com/unified"
+        }
+      ],
+      "dependencies": {
+        "micromark-util-character": "^2.0.0",
+        "micromark-util-encode": "^2.0.0",
+        "micromark-util-symbol": "^2.0.0"
+      }
+    },
     "node_modules/micromark-util-subtokenize": {
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/micromark-util-subtokenize/-/micromark-util-subtokenize-2.0.1.tgz",
       "integrity": "sha512-jZNtiFl/1aY73yS3UGQkutD0UbhTt68qnRpw2Pifmz5wV9h8gOVsN70v+Lq/f1rKaU/W8pxRe8y8Q9FX1AOe1Q==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13621,7 +13600,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-util-symbol/-/micromark-util-symbol-2.0.0.tgz",
       "integrity": "sha512-8JZt9ElZ5kyTnO94muPxIGS8oyElRJaiJO8EzV6ZSyGQ1Is8xwl4Q45qU5UOg+bGH4AikWziz0iN4sFLWs8PGw==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -13638,7 +13616,6 @@
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/micromark-util-types/-/micromark-util-types-2.0.0.tgz",
       "integrity": "sha512-oNh6S2WMHWRZrmutsRmDDfkzKtxF+bc2VxLC9dvtrDIRFln627VsFP6fLMgTryGDljgLPjkrzQSDcPrjPyDJ5w==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -14428,7 +14405,6 @@
       "version": "7.2.1",
       "resolved": "https://registry.npmjs.org/parse5/-/parse5-7.2.1.tgz",
       "integrity": "sha512-BuBYQYlv1ckiPdQi/ohiivi9Sagc9JG+Ozs0r7b/0iK3sKmrb0b9FdWdBbOdx6hBCM/F9Ir82ofnBhtZOjCRPQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "entities": "^4.5.0"
@@ -15092,6 +15068,15 @@
         "react-is": "^16.13.1"
       }
     },
+    "node_modules/property-information": {
+      "version": "6.5.0",
+      "resolved": "https://registry.npmjs.org/property-information/-/property-information-6.5.0.tgz",
+      "integrity": "sha512-PgTgs/BlvHxOu8QuEN7wi5A0OmXaBcHpmCSTehcs6Uuu9IkDIEo13Hy7n898RHfrQ49vKCoGeWZSaAK01nwVig==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/proxy-from-env": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.0.0.tgz",
@@ -15321,6 +15306,31 @@
       "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==",
       "license": "MIT"
     },
+    "node_modules/react-markdown": {
+      "version": "9.0.1",
+      "resolved": "https://registry.npmjs.org/react-markdown/-/react-markdown-9.0.1.tgz",
+      "integrity": "sha512-186Gw/vF1uRkydbsOIkcGXw7aHq0sZOCRFFjGrr7b9+nVZg4UfA4enXCaxm4fUzecU38sWfrNDitGhshuU7rdg==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "devlop": "^1.0.0",
+        "hast-util-to-jsx-runtime": "^2.0.0",
+        "html-url-attributes": "^3.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "remark-parse": "^11.0.0",
+        "remark-rehype": "^11.0.0",
+        "unified": "^11.0.0",
+        "unist-util-visit": "^5.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      },
+      "peerDependencies": {
+        "@types/react": ">=18",
+        "react": ">=18"
+      }
+    },
     "node_modules/react-pdf": {
       "version": "9.1.1",
       "resolved": "https://registry.npmjs.org/react-pdf/-/react-pdf-9.1.1.tgz",
@@ -15673,6 +15683,20 @@
         "regjsparser": "bin/parser"
       }
     },
+    "node_modules/rehype-raw": {
+      "version": "7.0.0",
+      "resolved": "https://registry.npmjs.org/rehype-raw/-/rehype-raw-7.0.0.tgz",
+      "integrity": "sha512-/aE8hCfKlQeA8LmyeyQvQF3eBiLRGNlfBJEvWH7ivp9sBqs7TNqBL5X3v157rM4IFETqDnIOO+z5M/biZbo9Ww==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "hast-util-raw": "^9.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/remark-mdx": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/remark-mdx/-/remark-mdx-3.0.1.tgz",
@@ -15692,7 +15716,6 @@
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-parse/-/remark-parse-11.0.0.tgz",
       "integrity": "sha512-FCxlKLNGknS5ba/1lmpYijMUzX2esxW5xQqjWxw2eHFfS2MSdaHVINFmhjo+qN1WhZhNimq0dZATN9pH0IDrpA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0",
@@ -15709,7 +15732,6 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
       "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "*"
@@ -15719,7 +15741,6 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/mdast-util-from-markdown/-/mdast-util-from-markdown-2.0.1.tgz",
       "integrity": "sha512-aJEUyzZ6TzlsX2s5B4Of7lN7EQtAxvtradMMglCQDyaTFgse6CmtmdJ15ElnVRlCg1vpNyVtbem0PWzlNieZsA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0",
@@ -15744,7 +15765,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/mdast-util-to-string/-/mdast-util-to-string-4.0.0.tgz",
       "integrity": "sha512-0H44vDimn51F0YwvxSJSm0eCDOJTRlmN0R1yBh4HLj9wiV1Dn0QoXGbvFAWj2hSItVTlCmBF1hqKlIyUBVFLPg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/mdast": "^4.0.0"
@@ -15758,7 +15778,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/micromark/-/micromark-4.0.0.tgz",
       "integrity": "sha512-o/sd0nMof8kYff+TqcDx3VSrgBTcZpSvYcAHIfHhv5VAuNmisCxjhx6YmxS8PFEpb9z5WKWKPdzf0jM23ro3RQ==",
-      "dev": true,
       "funding": [
         {
           "type": "GitHub Sponsors",
@@ -15790,50 +15809,10 @@
         "micromark-util-types": "^2.0.0"
       }
     },
-    "node_modules/remark-parse/node_modules/micromark-util-encode": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-util-encode/-/micromark-util-encode-2.0.0.tgz",
-      "integrity": "sha512-pS+ROfCXAGLWCOc8egcBvT0kf27GoWMqtdarNfDcjb6YLuV5cM3ioG45Ys2qOVqeqSbjaKg72vU+Wby3eddPsA==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT"
-    },
-    "node_modules/remark-parse/node_modules/micromark-util-sanitize-uri": {
-      "version": "2.0.0",
-      "resolved": "https://registry.npmjs.org/micromark-util-sanitize-uri/-/micromark-util-sanitize-uri-2.0.0.tgz",
-      "integrity": "sha512-WhYv5UEcZrbAtlsnPuChHUAsu/iBPOVaEVsntLBIdpibO0ddy8OzavZz3iL2xVvBZOpolujSliP65Kq0/7KIYw==",
-      "dev": true,
-      "funding": [
-        {
-          "type": "GitHub Sponsors",
-          "url": "https://github.com/sponsors/unifiedjs"
-        },
-        {
-          "type": "OpenCollective",
-          "url": "https://opencollective.com/unified"
-        }
-      ],
-      "license": "MIT",
-      "dependencies": {
-        "micromark-util-character": "^2.0.0",
-        "micromark-util-encode": "^2.0.0",
-        "micromark-util-symbol": "^2.0.0"
-      }
-    },
     "node_modules/remark-parse/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",
       "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0"
@@ -15843,6 +15822,30 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/remark-rehype": {
+      "version": "11.1.1",
+      "resolved": "https://registry.npmjs.org/remark-rehype/-/remark-rehype-11.1.1.tgz",
+      "integrity": "sha512-g/osARvjkBXb6Wo0XvAeXQohVta8i84ACbenPpoSsxTOQH/Ae0/RGP4WZgnMH5pMLpsj4FG7OHmcIcXxpza8eQ==",
+      "dependencies": {
+        "@types/hast": "^3.0.0",
+        "@types/mdast": "^4.0.0",
+        "mdast-util-to-hast": "^13.0.0",
+        "unified": "^11.0.0",
+        "vfile": "^6.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
+    "node_modules/remark-rehype/node_modules/@types/mdast": {
+      "version": "4.0.4",
+      "resolved": "https://registry.npmjs.org/@types/mdast/-/mdast-4.0.4.tgz",
+      "integrity": "sha512-kGaNbPh1k7AFzgpud/gMdvIm5xuECykRR+JnWKQno9TAXVa6WIVCGTPvYGekIDL4uwCZQSYbUxNBSb1aUo79oA==",
+      "dependencies": {
+        "@types/unist": "*"
+      }
+    },
     "node_modules/remark-stringify": {
       "version": "11.0.0",
       "resolved": "https://registry.npmjs.org/remark-stringify/-/remark-stringify-11.0.0.tgz",
@@ -16699,6 +16702,15 @@
       "dev": true,
       "license": "MIT"
     },
+    "node_modules/space-separated-tokens": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/space-separated-tokens/-/space-separated-tokens-2.0.2.tgz",
+      "integrity": "sha512-PEGlAwrG8yXGXRjW32fGbg66JAlOAwbObuqVoJpv/mRgoWDQfgH1wDPvtzWyUSNAXBGSk8h755YDbbcEy3SH2Q==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/spdx-correct": {
       "version": "3.2.0",
       "resolved": "https://registry.npmjs.org/spdx-correct/-/spdx-correct-3.2.0.tgz",
@@ -16963,7 +16975,6 @@
       "version": "4.0.4",
       "resolved": "https://registry.npmjs.org/stringify-entities/-/stringify-entities-4.0.4.tgz",
       "integrity": "sha512-IwfBptatlO+QCJUo19AqvrPNqlVMpW9YEL2LIVY+Rpv2qsjCGxaDLNRgeGsQWJhfItebuJhsGSLjaBbNSQ+ieg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "character-entities-html4": "^2.0.0",
@@ -16978,7 +16989,6 @@
       "version": "3.0.0",
       "resolved": "https://registry.npmjs.org/character-entities-legacy/-/character-entities-legacy-3.0.0.tgz",
       "integrity": "sha512-RpPp0asT/6ufRm//AJVwpViZbGM/MkjQFxJccQRHmISF/22NBtsHqAWmL+/pmkPWoIUJdWyeVleTl1wydHATVQ==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -17067,6 +17077,14 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/style-to-object": {
+      "version": "1.0.8",
+      "resolved": "https://registry.npmjs.org/style-to-object/-/style-to-object-1.0.8.tgz",
+      "integrity": "sha512-xT47I/Eo0rwJmaXC4oilDGDWLohVhR6o/xAQcPQN8q6QBuZVL8qMYL85kLmST5cPjAorwvqIA4qXTRQoYHaL6g==",
+      "dependencies": {
+        "inline-style-parser": "0.2.4"
+      }
+    },
     "node_modules/stylus-lookup": {
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/stylus-lookup/-/stylus-lookup-6.0.0.tgz",
@@ -17655,11 +17673,19 @@
         "tree-kill": "cli.js"
       }
     },
+    "node_modules/trim-lines": {
+      "version": "3.0.1",
+      "resolved": "https://registry.npmjs.org/trim-lines/-/trim-lines-3.0.1.tgz",
+      "integrity": "sha512-kRj8B+YHZCc9kQYdWfJB2/oUl9rA99qbowYYBtr4ui4mZyAQ2JpvVBd/6U2YloATfqBhBTSMhTpgBHtU0Mf3Rg==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/trough": {
       "version": "2.2.0",
       "resolved": "https://registry.npmjs.org/trough/-/trough-2.2.0.tgz",
       "integrity": "sha512-tmMpK00BjZiUyVyvrBK7knerNgmgvcV/KLVyuma/SC+TQN167GrMRciANTz09+k3zW8L8t60jWO1GpfkZdjTaw==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
@@ -17975,7 +18001,6 @@
       "version": "11.0.5",
       "resolved": "https://registry.npmjs.org/unified/-/unified-11.0.5.tgz",
       "integrity": "sha512-xKvGhPWw3k84Qjh8bI3ZeJjqnyadK+GEFtazSfZv/rKeTkTjOJho6mFqh2SM96iIcZokxiOpg78GazTSg8+KHA==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
@@ -18180,7 +18205,6 @@
       "version": "6.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-is/-/unist-util-is-6.0.0.tgz",
       "integrity": "sha512-2qCTHimwdxLfz+YzdGfkqNlH0tLi9xjTnHddPmJwtIG9MGsdbutfTc4P+haPD7l7Cjxf/WZj+we5qfVPvvxfYw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0"
@@ -18190,6 +18214,18 @@
         "url": "https://opencollective.com/unified"
       }
     },
+    "node_modules/unist-util-position": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/unist-util-position/-/unist-util-position-5.0.0.tgz",
+      "integrity": "sha512-fucsC7HjXvkB5R3kTCO7kUjRdrS0BJt3M/FPxmHMBOm8JQi2BsHAHFsy27E0EolP8rp0NzXsJ+jNPyDWvOJZPA==",
+      "dependencies": {
+        "@types/unist": "^3.0.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/unified"
+      }
+    },
     "node_modules/unist-util-position-from-estree": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-position-from-estree/-/unist-util-position-from-estree-2.0.0.tgz",
@@ -18229,7 +18265,6 @@
       "version": "5.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-visit/-/unist-util-visit-5.0.0.tgz",
       "integrity": "sha512-MR04uvD+07cwl/yhVuVWAtw+3GOR/knlL55Nd/wAdblk27GCVt3lqpTivy/tkJcZoNPzTwS1Y+KMojlLDhoTzg==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
@@ -18245,7 +18280,6 @@
       "version": "6.0.1",
       "resolved": "https://registry.npmjs.org/unist-util-visit-parents/-/unist-util-visit-parents-6.0.1.tgz",
       "integrity": "sha512-L/PqWzfTP9lzzEa6CKs0k2nARxTdZduw3zyh8d2NVBnsyvHjSX4TWse388YrrQKbvI8w20fGjGlhgT96WwKykw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
@@ -18480,7 +18514,6 @@
       "version": "6.0.3",
       "resolved": "https://registry.npmjs.org/vfile/-/vfile-6.0.3.tgz",
       "integrity": "sha512-KzIbH/9tXat2u30jf+smMwFCsno4wHVdNmzFyL+T/L3UGqqk6JKfVqOFOZEpZSHADH1k40ab6NUIXZq422ov3Q==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
@@ -18491,11 +18524,23 @@
         "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==",
+      "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.2",
       "resolved": "https://registry.npmjs.org/vfile-message/-/vfile-message-4.0.2.tgz",
       "integrity": "sha512-jRDZ1IMLttGj41KcZvlrYAaI3CfqpLpfpf+Mfig13viT6NKvRzWZ+lXz0Y5D60w6uJIBAOGq9mSHf0gktF0duw==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0",
@@ -18510,7 +18555,6 @@
       "version": "4.0.0",
       "resolved": "https://registry.npmjs.org/unist-util-stringify-position/-/unist-util-stringify-position-4.0.0.tgz",
       "integrity": "sha512-0ASV06AAoKCDkS2+xw5RXJywruurpbC4JZSm7nr7MOt1ojAzvyyaO+UxZf18j8FCF6kmzCZKcAgN/yu2gm2XgQ==",
-      "dev": true,
       "license": "MIT",
       "dependencies": {
         "@types/unist": "^3.0.0"
@@ -19469,6 +19513,15 @@
         "defaults": "^1.0.3"
       }
     },
+    "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==",
+      "funding": {
+        "type": "github",
+        "url": "https://github.com/sponsors/wooorm"
+      }
+    },
     "node_modules/webidl-conversions": {
       "version": "3.0.1",
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
@@ -20400,7 +20453,6 @@
       "version": "2.0.4",
       "resolved": "https://registry.npmjs.org/zwitch/-/zwitch-2.0.4.tgz",
       "integrity": "sha512-bXE4cR/kVZhKZX/RjPEflHaKVhUVl85noU3v6b8apfQEc1x4A+zBxjZ4lN8LqGd6WZ3dl98pY4o717VFmoPp+A==",
-      "dev": true,
       "license": "MIT",
       "funding": {
         "type": "github",
diff --git a/package.json b/package.json
index 60250c2209e..828f339513e 100644
--- a/package.json
+++ b/package.json
@@ -91,8 +91,10 @@
     "react-google-recaptcha": "^3.1.0",
     "react-i18next": "^15.1.1",
     "react-infinite-scroll-component": "^6.1.0",
+    "react-markdown": "^9.0.1",
     "react-pdf": "^9.1.1",
     "react-webcam": "^7.2.0",
+    "rehype-raw": "^7.0.0",
     "tailwind-merge": "^2.5.4",
     "tailwindcss-animate": "^1.0.7",
     "use-keyboard-shortcut": "^1.1.6",
diff --git a/public/locale/en.json b/public/locale/en.json
index 1159c4ab0dc..a058283a36f 100644
--- a/public/locale/en.json
+++ b/public/locale/en.json
@@ -30,6 +30,7 @@
   "CONSULTATION_TAB__ABDM": "ABDM Records",
   "CONSULTATION_TAB__ABG": "ABG",
   "CONSULTATION_TAB__DIALYSIS": "Dialysis",
+  "CONSULTATION_TAB__DISCUSSION_NOTES_FILES": "Discussion Notes",
   "CONSULTATION_TAB__FEED": "Feed",
   "CONSULTATION_TAB__FILES": "Files",
   "CONSULTATION_TAB__INVESTIGATIONS": "Investigations",
diff --git a/src/Utils/request/api.tsx b/src/Utils/request/api.tsx
index d6d30dfce85..7a47cbd477b 100644
--- a/src/Utils/request/api.tsx
+++ b/src/Utils/request/api.tsx
@@ -811,6 +811,11 @@ const routes = {
     method: "PUT",
     TRes: Type<PatientNotesModel>(),
   },
+  getPatientNote: {
+    path: "/api/v1/patient/{patientId}/notes/{noteId}/",
+    method: "GET",
+    TRes: Type<PatientNotesModel>(),
+  },
   getPatientNoteEditHistory: {
     path: "/api/v1/patient/{patientId}/notes/{noteId}/edits/",
     method: "GET",
@@ -1120,7 +1125,7 @@ const routes = {
     TBody: Type<IFacilityNotificationRequest>(),
   },
 
-  // FileUpload Create
+  // FileUploads
   createUpload: {
     path: "/api/v1/files/",
     method: "POST",
@@ -1144,6 +1149,13 @@ const routes = {
     TRes: Type<FileUploadModel>(),
   },
 
+  // Consultation FileUploads
+  listConsultationFileUploads: {
+    path: "/api/v1/consultation/{consultation_external_id}/files/",
+    method: "GET",
+    TRes: Type<PaginatedResponse<FileUploadModel>>(),
+  },
+
   // Investigation
   listInvestigations: {
     path: "/api/v1/investigation/",
diff --git a/src/common/constants.tsx b/src/common/constants.tsx
index 857796d7c88..c9da5d2f39f 100644
--- a/src/common/constants.tsx
+++ b/src/common/constants.tsx
@@ -671,6 +671,11 @@ export const NOTIFICATION_EVENTS: NotificationEvent[] = [
     text: "Patient Note Added",
     icon: "l-notes",
   },
+  {
+    id: "PATIENT_NOTE_MENTIONED",
+    text: "Patient Note Mentioned",
+    icon: "l-at",
+  },
 ];
 
 export const BREATHLESSNESS_LEVEL = [
diff --git a/src/components/Common/FilePreviewDialog.tsx b/src/components/Common/FilePreviewDialog.tsx
index 4b7a07bd0cd..871cbf915a9 100644
--- a/src/components/Common/FilePreviewDialog.tsx
+++ b/src/components/Common/FilePreviewDialog.tsx
@@ -43,16 +43,17 @@ type FilePreviewProps = {
 };
 
 const previewExtensions = [
-  ".html",
-  ".htm",
-  ".pdf",
-  ".mp4",
-  ".webm",
-  ".jpg",
-  ".jpeg",
-  ".png",
-  ".gif",
-  ".webp",
+  "html",
+  "htm",
+  "pdf",
+  "mp4",
+  "mp3",
+  "webm",
+  "jpg",
+  "jpeg",
+  "png",
+  "gif",
+  "webp",
 ];
 
 const FilePreviewDialog = (props: FilePreviewProps) => {
diff --git a/src/components/Common/MarkdownPreview.tsx b/src/components/Common/MarkdownPreview.tsx
new file mode 100644
index 00000000000..44ba16b01b3
--- /dev/null
+++ b/src/components/Common/MarkdownPreview.tsx
@@ -0,0 +1,100 @@
+import React, { useState } from "react";
+import ReactMarkdown from "react-markdown";
+import rehypeRaw from "rehype-raw";
+
+import { UserBareMinimum } from "@/components/Users/models";
+
+interface CustomLinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement> {
+  "data-username"?: string;
+}
+
+const UserCard = ({ user }: { user: UserBareMinimum }) => (
+  <div className="z-10 flex w-64 items-center space-x-3 rounded-lg bg-gray-200 px-3 pb-3 shadow-lg">
+    <div className="flex h-10 w-10 items-center justify-center rounded-full bg-primary text-lg font-semibold text-white">
+      {user.first_name[0]}
+    </div>
+    <div className="space-y-0">
+      <h3 className="text-sm font-semibold text-gray-800">
+        {user.first_name} {user.last_name}
+      </h3>
+      <p className="text-xs text-gray-500">@{user.username}</p>
+      <p className="text-xs text-gray-500">{user.user_type}</p>
+    </div>
+  </div>
+);
+
+const MarkdownPreview = ({
+  markdown,
+  mentioned_users,
+}: {
+  markdown: string;
+  mentioned_users?: UserBareMinimum[];
+}) => {
+  const MentionedUsers = Object.fromEntries(
+    mentioned_users?.map((u) => [u.username, u]) ?? [],
+  );
+
+  const processedMarkdown = markdown
+    .replace(/@(\w+)/g, (_, username) => {
+      const user = MentionedUsers[username];
+      if (user) {
+        return `<a href="/user/profile/${username}" data-username="${username}">@${username}</a>`;
+      } else {
+        return `@${username}`;
+      }
+    })
+    .replace(/~~(.*?)~~/g, (_, text) => `<del>${text}</del>`);
+
+  const CustomLink = (props: CustomLinkProps) => {
+    const [isHovered, setIsHovered] = useState(false);
+
+    if (props["data-username"]) {
+      const username = props["data-username"];
+      return (
+        <span
+          className="relative inline-block"
+          onMouseEnter={() => setIsHovered(true)}
+          onMouseLeave={() => setIsHovered(false)}
+        >
+          <span
+            onClick={(e) => {
+              e.stopPropagation();
+            }}
+            className="cursor-pointer rounded bg-blue-100 px-1 font-normal text-slate-800 no-underline"
+          >
+            @{username}
+          </span>
+          {MentionedUsers[username] && isHovered && (
+            <div className="tooltip-text absolute bottom-full z-10 mb-2 transition-opacity duration-300 ease-in-out">
+              <UserCard user={MentionedUsers[username]} />
+              <div className="absolute left-2 top-full border-8 border-solid border-transparent border-t-gray-200 shadow-md"></div>
+            </div>
+          )}
+        </span>
+      );
+    }
+    return (
+      <a
+        {...props}
+        target="_blank"
+        onClick={(e) => e.stopPropagation()}
+        className="text-blue-500 underline"
+      />
+    );
+  };
+
+  return (
+    <ReactMarkdown
+      className="prose text-sm prose-p:m-0"
+      rehypePlugins={[rehypeRaw]}
+      components={{
+        a: CustomLink,
+      }}
+    >
+      {processedMarkdown}
+    </ReactMarkdown>
+  );
+};
+
+export default MarkdownPreview;
diff --git a/src/components/Common/MentionDropdown.tsx b/src/components/Common/MentionDropdown.tsx
new file mode 100644
index 00000000000..c4489b1636b
--- /dev/null
+++ b/src/components/Common/MentionDropdown.tsx
@@ -0,0 +1,115 @@
+import React, { useCallback, useEffect, useMemo, useState } from "react";
+
+import useSlug from "@/hooks/useSlug";
+
+import routes from "@/Utils/request/api";
+import useQuery from "@/Utils/request/useQuery";
+
+interface MentionsDropdownProps {
+  onSelect: (user: { id: string; username: string }) => void;
+  position: { top: number; left: number };
+  editorRef: React.RefObject<HTMLTextAreaElement>;
+  filter: string;
+}
+
+const MentionsDropdown: React.FC<MentionsDropdownProps> = ({
+  onSelect,
+  position,
+  editorRef,
+  filter,
+}) => {
+  const facilityId = useSlug("facility");
+  const { data, loading } = useQuery(routes.getFacilityUsers, {
+    pathParams: { facility_id: facilityId },
+  });
+
+  const users = data?.results || [];
+
+  const [dropdownPosition, setDropdownPosition] = useState({ top: 0, left: 0 });
+  const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
+
+  useEffect(() => {
+    if (editorRef.current) {
+      setDropdownPosition({
+        top: position.top,
+        left: position.left,
+      });
+    }
+  }, [position, editorRef]);
+
+  const filteredUsers = useMemo(() => {
+    return users.filter((user) =>
+      user.username.toLowerCase().startsWith(filter.toLowerCase()),
+    );
+  }, [users, filter]);
+
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === "Enter" && filteredUsers.length > 0) {
+        event.preventDefault();
+        if (selectedIndex !== null) {
+          onSelect({
+            id: filteredUsers[selectedIndex].id.toString(),
+            username: filteredUsers[selectedIndex].username,
+          });
+        } else {
+          onSelect({
+            id: filteredUsers[0].id.toString(),
+            username: filteredUsers[0].username,
+          });
+        }
+      } else if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setSelectedIndex((prevIndex) => {
+          if (prevIndex === null) return 0;
+          return Math.min(filteredUsers.length - 1, prevIndex + 1);
+        });
+      } else if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setSelectedIndex((prevIndex) => {
+          if (prevIndex === null) return filteredUsers.length - 1;
+          return Math.max(0, prevIndex - 1);
+        });
+      }
+    },
+    [filteredUsers, selectedIndex, onSelect],
+  );
+
+  useEffect(() => {
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [handleKeyDown]);
+
+  return (
+    <div
+      className="absolute z-10 max-h-36 w-64 overflow-y-auto rounded-md bg-white text-sm shadow-lg"
+      style={{ top: dropdownPosition.top, left: dropdownPosition.left }}
+    >
+      {loading && <div className="p-2 text-gray-500">Loading...</div>}
+      {filteredUsers.length > 0 && !loading ? (
+        filteredUsers.map((user, index) => (
+          <div
+            key={user.id}
+            className={`flex cursor-pointer items-center gap-2 p-2 ${
+              index === selectedIndex ? "bg-gray-100" : "hover:bg-gray-100"
+            }`}
+            onClick={() =>
+              onSelect({ id: user.id.toString(), username: user.username })
+            }
+          >
+            <span className="flex h-5 w-5 items-center justify-center rounded-full bg-primary text-xs font-semibold text-white">
+              {user.first_name[0]}
+            </span>
+            {user.username}
+          </div>
+        ))
+      ) : (
+        <div className="p-2 text-gray-500">No users found</div>
+      )}
+    </div>
+  );
+};
+
+export default MentionsDropdown;
diff --git a/src/components/Common/RichTextEditor.tsx b/src/components/Common/RichTextEditor.tsx
new file mode 100644
index 00000000000..a8c2d504f23
--- /dev/null
+++ b/src/components/Common/RichTextEditor.tsx
@@ -0,0 +1,732 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import ButtonV2, { Submit } from "@/components/Common/ButtonV2";
+import DialogModal from "@/components/Common/Dialog";
+
+import useFileUpload from "@/hooks/useFileUpload";
+
+import { classNames } from "@/Utils/utils";
+
+import MarkdownPreview from "./MarkdownPreview";
+import MentionsDropdown from "./MentionDropdown";
+
+interface RichTextEditorProps {
+  initialMarkdown?: string;
+  onChange: (markdown: string) => void;
+  onAddNote: () => Promise<string | undefined>;
+  isAuthorized?: boolean;
+  onRefetch?: () => void;
+}
+
+const lineStyles = {
+  orderedList: /^\d+\.\s/,
+  unorderedList: /^-\s/,
+  quote: /^>\s/,
+  emptyOrderedList: /^\d+\.\s*$/,
+  emptyUnorderedList: /^-\s*$/,
+  emptyQuote: /^>\s*$/,
+  startWithNumber: /^\d+/,
+  containsNumber: /\d+/,
+};
+
+const RichTextEditor: React.FC<RichTextEditorProps> = ({
+  initialMarkdown: markdown = "",
+  onChange: setMarkdown,
+  onAddNote,
+  isAuthorized = true,
+  onRefetch,
+}) => {
+  const editorRef = useRef<HTMLTextAreaElement>(null);
+  const [showMentions, setShowMentions] = useState(false);
+  const [mentionPosition, setMentionPosition] = useState({ top: 0, left: 0 });
+
+  const [mentionFilter, setMentionFilter] = useState("");
+  const [linkDialogState, setLinkDialogState] = useState({
+    showDialog: false,
+    url: "",
+    selectedText: "",
+    linkText: "",
+  });
+
+  const [isPreviewMode, setIsPreviewMode] = useState(false);
+
+  const fileUpload = useFileUpload({
+    type: "NOTES",
+    category: "UNSPECIFIED",
+    multiple: true,
+    allowAllExtensions: true,
+  });
+
+  const insertMarkdown = (prefix: string, suffix: string = prefix) => {
+    if (!editorRef.current) return;
+
+    const start = editorRef.current.selectionStart;
+    const end = editorRef.current.selectionEnd;
+    const text = editorRef.current.value;
+
+    const beforeSelection = text.substring(0, start);
+    const selection = text.substring(start, end);
+    const afterSelection = text.substring(end);
+
+    let newText = "";
+    let newCursorPosition = 0;
+
+    if (selection) {
+      newText = `${beforeSelection}${prefix}${selection}${suffix}${afterSelection}`;
+      newCursorPosition = start + prefix.length + selection.length;
+    } else {
+      newText = `${beforeSelection}${prefix}${suffix}${afterSelection}`;
+      newCursorPosition = start + prefix.length;
+    }
+
+    setMarkdown(newText);
+
+    // Using setTimeout to ensure the new text is set before we try to move the cursor
+    setTimeout(() => {
+      if (editorRef.current) {
+        editorRef.current.focus();
+        editorRef.current.setSelectionRange(
+          newCursorPosition,
+          newCursorPosition,
+        );
+      }
+    }, 0);
+  };
+
+  useEffect(() => {
+    const handleEscape = (e: KeyboardEvent) => {
+      if (e.key === "Escape") {
+        setShowMentions(false);
+        setMentionFilter("");
+      }
+    };
+
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+    };
+  }, []);
+
+  const insertMention = (user: { id: string; username: string }) => {
+    if (!editorRef.current) return;
+
+    const start = editorRef.current.selectionStart;
+    const text = editorRef.current.value;
+    const lastAtSymbolIndex = text.lastIndexOf("@", start - 1);
+
+    const beforeMention = text.substring(0, lastAtSymbolIndex);
+    const afterMention = text.substring(start);
+
+    const displayMention = `@${user.username}`;
+    const newMarkdown = `${beforeMention}${displayMention}${afterMention}`;
+    setMarkdown(newMarkdown);
+
+    editorRef.current.focus();
+    const newCursorPosition = lastAtSymbolIndex + displayMention.length;
+    editorRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
+
+    setShowMentions(false);
+    setMentionFilter("");
+  };
+
+  const handleInput = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newMarkdown = event.target.value;
+      const caretPosition = event.target.selectionStart;
+
+      setMarkdown(newMarkdown);
+
+      const textBeforeCaret = newMarkdown.substring(0, caretPosition);
+      const lastAtSymbolIndex = textBeforeCaret.lastIndexOf("@");
+
+      if (lastAtSymbolIndex !== -1) {
+        const mentionText = textBeforeCaret.substring(lastAtSymbolIndex + 1);
+        if (mentionText.includes(" ")) return;
+        setMentionFilter(mentionText);
+
+        if (editorRef.current) {
+          const { top, left } = getCaretCoordinates(
+            editorRef.current,
+            caretPosition,
+          );
+          setMentionPosition({ top: top + 50, left: left + 10 });
+          setShowMentions(true);
+        }
+      } else {
+        setShowMentions(false);
+      }
+    },
+    [],
+  );
+
+  const onKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === "Enter") {
+      e.preventDefault();
+      if (!editorRef.current) return;
+
+      const text = editorRef.current.value;
+      const selectionStart = editorRef.current.selectionStart || 0;
+      const currentLineStart = text.lastIndexOf("\n", selectionStart - 1) + 1;
+      const currentLine = text.slice(currentLineStart, selectionStart);
+
+      let newText = text;
+      let newCursorPos = selectionStart;
+
+      if (
+        lineStyles.emptyOrderedList.test(currentLine) ||
+        lineStyles.emptyUnorderedList.test(currentLine) ||
+        lineStyles.emptyQuote.test(currentLine)
+      ) {
+        newText = text.slice(0, currentLineStart) + text.slice(selectionStart);
+        newCursorPos = currentLineStart;
+      } else {
+        let newLine = "\n";
+
+        if (lineStyles.orderedList.test(currentLine)) {
+          const currentNumber = parseInt(
+            currentLine.match(lineStyles.startWithNumber)?.[0] || "0",
+            10,
+          );
+          newLine += `${currentNumber + 1}. `;
+        } else if (lineStyles.unorderedList.test(currentLine)) {
+          newLine += "- ";
+        } else if (lineStyles.quote.test(currentLine)) {
+          newLine += "> ";
+        }
+
+        newText =
+          text.slice(0, selectionStart) + newLine + text.slice(selectionStart);
+        newCursorPos = selectionStart + newLine.length;
+      }
+
+      editorRef.current.value = newText;
+      editorRef.current.setSelectionRange(newCursorPos, newCursorPos);
+      setMarkdown(newText);
+    }
+  };
+
+  const handleOrderedList = () => {
+    if (!editorRef.current) return;
+    const selectionStart = editorRef.current.selectionStart || 0;
+    const selectionEnd = editorRef.current.selectionEnd || 0;
+    const text = editorRef.current.value;
+
+    if (selectionStart === selectionEnd) {
+      const lineIndex = getCurrentLineIndex(selectionStart);
+      const currentLine = getCurrentLine(lineIndex);
+
+      let newText = "";
+      if (lineStyles.orderedList.test(currentLine)) {
+        newText = currentLine.replace(lineStyles.orderedList, "");
+      } else {
+        const prevLine = getCurrentLine(lineIndex - 1);
+        const prevNumber = lineStyles.orderedList
+          .exec(prevLine)?.[0]
+          .match(lineStyles.containsNumber)?.[0];
+        const nextNumber = prevNumber ? parseInt(prevNumber) + 1 : 1;
+        newText = `${nextNumber}. ${currentLine}`;
+      }
+
+      replaceLine(lineIndex, newText);
+    } else {
+      const selectedText = text.substring(selectionStart, selectionEnd);
+      const lines = selectedText.split("\n");
+
+      let newText = "";
+      let currentNumber = 1;
+
+      lines.forEach((line) => {
+        if (lineStyles.orderedList.test(line)) {
+          newText += line.replace(lineStyles.orderedList, "") + "\n";
+        } else {
+          newText += `${currentNumber}. ${line}\n`;
+          currentNumber++;
+        }
+      });
+
+      newText = newText.trimEnd();
+
+      const beforeSelection = text.substring(0, selectionStart);
+      const afterSelection = text.substring(selectionEnd);
+
+      const updatedText = beforeSelection + newText + afterSelection;
+      setMarkdown(updatedText);
+    }
+  };
+
+  const handleUnorderedList = () => {
+    if (!editorRef.current) return;
+    const selectionStart = editorRef.current.selectionStart || 0;
+    const selectionEnd = editorRef.current.selectionEnd || 0;
+    const text = editorRef.current.value;
+
+    if (selectionStart === selectionEnd) {
+      const lineIndex = getCurrentLineIndex(selectionStart);
+      const currentLine = getCurrentLine(lineIndex);
+
+      let newText = "";
+      if (lineStyles.unorderedList.test(currentLine)) {
+        newText = currentLine.replace(lineStyles.unorderedList, "");
+      } else {
+        newText = `- ${currentLine}`;
+      }
+
+      replaceLine(lineIndex, newText);
+    } else {
+      const selectedText = text.substring(selectionStart, selectionEnd);
+      const lines = selectedText.split("\n");
+
+      let newText = "";
+
+      lines.forEach((line) => {
+        if (lineStyles.unorderedList.test(line)) {
+          newText += line.replace(lineStyles.unorderedList, "") + "\n";
+        } else {
+          newText += `- ${line}\n`;
+        }
+      });
+
+      newText = newText.trimEnd();
+
+      const beforeSelection = text.substring(0, selectionStart);
+      const afterSelection = text.substring(selectionEnd);
+
+      const updatedText = beforeSelection + newText + afterSelection;
+      setMarkdown(updatedText);
+    }
+  };
+
+  const handleQuote = () => {
+    if (!editorRef.current) return;
+    const selectionStart = editorRef.current.selectionStart || 0;
+    const lineIndex = getCurrentLineIndex(selectionStart);
+    const currentLine = getCurrentLine(lineIndex);
+
+    let newText = "";
+    if (lineStyles.quote.test(currentLine)) {
+      newText = currentLine.replace(lineStyles.quote, "");
+    } else {
+      newText = `> ${currentLine}`;
+    }
+
+    replaceLine(lineIndex, newText);
+  };
+
+  const getCurrentLine = (lineIndex: number): string => {
+    if (!editorRef.current) return "";
+    const lines = editorRef.current.value.split("\n");
+    return lines[lineIndex] || "";
+  };
+
+  const replaceLine = (lineIndex: number, newText: string) => {
+    if (!editorRef.current) return;
+    const text = editorRef.current.value;
+    const lines = text.split("\n");
+
+    if (lineIndex < 0 || lineIndex >= lines.length) return;
+
+    lines[lineIndex] = newText;
+    const newValue = lines.join("\n");
+    editorRef.current.value = newValue;
+    setMarkdown(newValue);
+
+    const newLineStart =
+      lines.slice(0, lineIndex).join("\n").length + (lineIndex > 0 ? 1 : 0);
+    const newCursorPosition = newLineStart + newText.length;
+    editorRef.current.setSelectionRange(newCursorPosition, newCursorPosition);
+    editorRef.current.focus();
+  };
+
+  const getCurrentLineIndex = (cursorPosition: number) => {
+    const text = editorRef.current?.value || "";
+    return text.substring(0, cursorPosition).split("\n").length - 1;
+  };
+
+  const formatUrl = (url: string) => {
+    if (!/^https?:\/\//i.test(url)) {
+      return `https://${url}`;
+    }
+    return url;
+  };
+  const handleLink = () => {
+    if (!editorRef.current) return;
+
+    const start = editorRef.current.selectionStart;
+    const end = editorRef.current.selectionEnd;
+    const text = editorRef.current.value;
+
+    const selectedText = text.substring(start, end);
+
+    setLinkDialogState({
+      showDialog: true,
+      url: "",
+      linkText: selectedText,
+      selectedText,
+    });
+  };
+
+  const handleInsertLink = () => {
+    if (!editorRef.current || !linkDialogState.url.trim()) return;
+
+    const { start } = getCaretCoordinates(
+      editorRef.current,
+      editorRef.current.selectionStart,
+    );
+
+    const text = editorRef.current.value;
+
+    const beforeSelection = text.substring(0, start);
+    const afterSelection = text.substring(
+      start + linkDialogState.selectedText.length,
+    );
+
+    const markdownLink = `[${linkDialogState.linkText || linkDialogState.url}](${formatUrl(linkDialogState.url)})`;
+    const newText = `${beforeSelection}${markdownLink}${afterSelection}`;
+
+    setMarkdown(newText);
+    editorRef.current.focus();
+    editorRef.current.setSelectionRange(
+      start + markdownLink.length,
+      start + markdownLink.length,
+    );
+
+    setLinkDialogState({
+      showDialog: false,
+      url: "",
+      linkText: "",
+      selectedText: "",
+    });
+  };
+
+  return (
+    <div className="relative m-2">
+      {/* toolbar */}
+      <div className="flex items-center space-x-1 rounded-t-md border border-gray-300 bg-gray-100 pl-1 sm:space-x-2">
+        <button
+          onClick={() => insertMarkdown("**")}
+          className="tooltip rounded bg-gray-200/50 p-1"
+        >
+          <CareIcon icon="l-bold" className="text-lg" />
+          <span className="tooltip-text tooltip-top -translate-x-4">Bold</span>
+        </button>
+        <button
+          onClick={() => insertMarkdown("_")}
+          className="tooltip rounded bg-gray-200/50 p-1"
+        >
+          <CareIcon icon="l-italic" className="text-lg" />
+          <span className="tooltip-text tooltip-top -translate-x-1/2">
+            Italic
+          </span>
+        </button>
+        <button
+          onClick={() => insertMarkdown("~~")}
+          className="tooltip rounded bg-gray-200/50 p-1"
+        >
+          <CareIcon icon="l-text-strike-through" className="text-lg" />
+          <span className="tooltip-text tooltip-top -translate-x-1/2">
+            Strikethrough
+          </span>
+        </button>
+        <div className="mx-2 h-6 border-l border-gray-400"></div>
+
+        <button
+          onClick={handleUnorderedList}
+          className="tooltip rounded bg-gray-200/50 p-1"
+        >
+          <CareIcon icon="l-list-ul" className="text-lg" />
+          <span className="tooltip-text tooltip-top -translate-x-1/2">
+            Unordered List
+          </span>
+        </button>
+        <button
+          onClick={handleOrderedList}
+          className="tooltip rounded bg-gray-200/50 p-1"
+        >
+          <CareIcon icon="l-list-ol" className="text-lg" />
+          <span className="tooltip-text tooltip-top -translate-x-1/2">
+            Ordered List
+          </span>
+        </button>
+        <div className="mx-2 h-6 border-l border-gray-400"></div>
+        <button
+          onClick={handleQuote}
+          className="tooltip rounded bg-gray-200/50 p-1"
+        >
+          <CareIcon icon="l-paragraph" className="text-lg" />
+          <span className="tooltip-text tooltip-top -translate-x-1/2">
+            Quote
+          </span>
+        </button>
+
+        <button
+          onClick={handleLink}
+          className="tooltip rounded bg-gray-200/50 p-1"
+        >
+          <CareIcon icon="l-link" className="text-lg" />
+          <span className="tooltip-text tooltip-top -translate-x-1/2">
+            Link
+          </span>
+        </button>
+
+        <div className="flex-1" />
+        <div className="flex rounded-md border border-gray-300 bg-white">
+          <button
+            className={classNames(
+              "rounded-md px-3 py-1 text-sm font-medium transition-colors duration-200",
+              !isPreviewMode && "bg-primary-500 text-white",
+              isPreviewMode && "text-gray-500 hover:bg-gray-100",
+            )}
+            onClick={() => setIsPreviewMode(false)}
+          >
+            Edit
+          </button>
+          <button
+            className={classNames(
+              "rounded-md px-3 py-1 text-sm font-medium transition-colors duration-200",
+              isPreviewMode && "bg-primary-500 text-white",
+              !isPreviewMode && "text-gray-500 hover:bg-gray-100",
+            )}
+            onClick={() => setIsPreviewMode(true)}
+          >
+            Preview
+          </button>
+        </div>
+      </div>
+
+      {/* editor/preview */}
+      <div
+        className={classNames(
+          "border border-x-gray-300 bg-white",
+          isPreviewMode && "bg-gray-50",
+        )}
+      >
+        {isPreviewMode ? (
+          <div className="max-h-[400px] min-h-[70px] overflow-y-auto p-4">
+            <MarkdownPreview markdown={markdown} />
+          </div>
+        ) : (
+          <textarea
+            id="discussion_notes_textarea"
+            ref={editorRef}
+            className="max-h-[300px] min-h-[70px] w-full resize-none overflow-y-auto border-none p-2 align-middle text-sm outline-none focus:outline-none focus:ring-0"
+            value={markdown}
+            onChange={(e) => {
+              setMarkdown(e.target.value);
+            }}
+            onInput={handleInput}
+            onKeyDown={onKeyDown}
+          />
+        )}
+        {fileUpload.files.length > 0 && (
+          <div className="flex flex-wrap gap-2 p-2">
+            {fileUpload.files.map((file, index) => (
+              <div
+                key={index}
+                className="relative mt-1 h-20 w-20 cursor-pointer rounded-md bg-gray-100 shadow-sm transition-colors duration-200 hover:bg-gray-200/50"
+              >
+                <button
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    fileUpload.removeFile(index);
+                  }}
+                  className="absolute -right-1 -top-1 z-10 h-5 w-5 rounded-full bg-gray-300 text-gray-800 transition-colors duration-200 hover:bg-gray-400"
+                >
+                  <CareIcon
+                    icon="l-times-circle"
+                    className="text-md absolute right-0.5 top-0.5 text-gray-600"
+                  />
+                </button>
+                <div className="flex h-full w-full flex-col items-center justify-center p-2">
+                  <CareIcon
+                    icon="l-file"
+                    className="shrink-0 text-2xl text-gray-600"
+                  />
+                  <span className="mt-1 max-h-[2.5em] w-full overflow-hidden text-ellipsis break-words text-center text-xs text-gray-600">
+                    {file?.name || "file"}
+                  </span>
+                </div>
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* toolbar-2 */}
+      <div className="flex items-center space-x-1 rounded-b-md border border-gray-300 bg-gray-100 pl-2 sm:space-x-2">
+        <label className="tooltip cursor-pointer rounded bg-gray-200/50 p-1">
+          <CareIcon icon="l-paperclip" className="text-lg" />
+          <span className="tooltip-text tooltip-top -translate-x-4">
+            Attach File
+          </span>
+          <fileUpload.Input multiple />
+        </label>
+        <div className="mx-2 h-6 border-l border-gray-400"></div>
+        <button
+          onClick={() => fileUpload.handleCameraCapture()}
+          className="tooltip rounded bg-gray-200/50 p-1"
+        >
+          <CareIcon icon="l-camera" className="text-lg" />
+          <span className="tooltip-text tooltip-top -translate-x-1/2">
+            Camera
+          </span>
+        </button>
+        <button
+          onClick={() => fileUpload.handleAudioCapture()}
+          className="tooltip rounded bg-gray-200/50 p-1"
+        >
+          <CareIcon icon="l-microphone" className="text-lg" />
+          <span className="tooltip-text tooltip-top -translate-x-1/2">
+            Audio
+          </span>
+        </button>
+        <div className="mx-2 h-6 border-l border-gray-400"></div>
+        <button
+          onClick={() => {
+            const selection = window.getSelection();
+            if (!selection || !selection.rangeCount) return;
+            const range = selection.getRangeAt(0);
+            const rect = range.getBoundingClientRect();
+            setMentionPosition({
+              top: rect.bottom + window.scrollY,
+              left: rect.left + window.scrollX,
+            });
+            setShowMentions(!showMentions);
+          }}
+          className="tooltip rounded bg-gray-200/50 p-1"
+        >
+          <CareIcon icon="l-at" className="text-lg" />
+          <span className="tooltip-text tooltip-top -translate-x-1/2">
+            Mention
+          </span>
+        </button>
+
+        <div className="grow"></div>
+        <div>
+          <Submit
+            id="add_doctor_note_button"
+            onClick={async () => {
+              if (!editorRef.current) return;
+              const id = await onAddNote();
+              if (!id) return;
+              await fileUpload.handleFileUpload(id);
+              onRefetch?.();
+              fileUpload.clearFiles();
+              editorRef.current.innerHTML = "";
+              setIsPreviewMode(false);
+            }}
+            className="flex-none rounded bg-primary-500 p-2 text-white"
+            disabled={!isAuthorized || isPreviewMode}
+          >
+            <CareIcon icon="l-message" className="text-lg" />
+          </Submit>
+        </div>
+      </div>
+
+      {showMentions && (
+        <MentionsDropdown
+          onSelect={insertMention}
+          position={mentionPosition}
+          editorRef={editorRef}
+          filter={mentionFilter}
+        />
+      )}
+
+      <DialogModal
+        show={linkDialogState.showDialog}
+        title="Insert Link"
+        onClose={() =>
+          setLinkDialogState((prev) => ({ ...prev, showDialog: false }))
+        }
+      >
+        <div className="flex flex-col gap-4">
+          <div>
+            <label
+              htmlFor="link-text-input"
+              className="block text-sm font-medium text-gray-700"
+            >
+              Link Text:
+            </label>
+            <input
+              id="link-text-input"
+              type="text"
+              placeholder="Enter link text"
+              className="mt-1 block w-full rounded border border-gray-300 p-2"
+              value={linkDialogState.linkText}
+              onChange={(e) =>
+                setLinkDialogState((prev) => ({
+                  ...prev,
+                  linkText: e.target.value,
+                }))
+              }
+            />
+          </div>
+          <div>
+            <label
+              htmlFor="url-input"
+              className="block text-sm font-medium text-gray-700"
+            >
+              URL:
+            </label>
+            <input
+              id="url-input"
+              type="text"
+              placeholder="Enter URL"
+              className="mt-1 block w-full rounded border border-gray-300 p-2"
+              value={linkDialogState.url}
+              onChange={(e) =>
+                setLinkDialogState((prev) => ({ ...prev, url: e.target.value }))
+              }
+            />
+          </div>
+          <div className="flex justify-end gap-4">
+            <ButtonV2
+              variant="secondary"
+              onClick={() =>
+                setLinkDialogState((prev) => ({ ...prev, showDialog: false }))
+              }
+            >
+              Cancel
+            </ButtonV2>
+            <ButtonV2 onClick={handleInsertLink}>Apply Link</ButtonV2>
+          </div>
+        </div>
+      </DialogModal>
+
+      {fileUpload.Dialogues}
+    </div>
+  );
+};
+
+export default RichTextEditor;
+
+const getCaretCoordinates = (
+  element: HTMLTextAreaElement,
+  position: number,
+) => {
+  const div = document.createElement("div");
+  const span = document.createElement("span");
+  const computed = getComputedStyle(element);
+
+  div.style.position = "absolute";
+  div.style.whiteSpace = "pre-wrap";
+  div.style.visibility = "hidden";
+
+  for (let i = 0; i < computed.length; i++) {
+    const prop = computed[i];
+    div.style.setProperty(prop, computed.getPropertyValue(prop));
+  }
+
+  div.textContent = element.value.substring(0, position);
+  span.textContent = element.value.substring(position) || ".";
+
+  div.appendChild(span);
+  document.body.appendChild(div);
+
+  const { offsetTop: top, offsetLeft: left } = span;
+
+  document.body.removeChild(div);
+
+  return { top, left, start: position };
+};
diff --git a/src/components/Facility/ConsultationDetails/DiscussionNotesFilesTab.tsx b/src/components/Facility/ConsultationDetails/DiscussionNotesFilesTab.tsx
new file mode 100644
index 00000000000..e391e418f92
--- /dev/null
+++ b/src/components/Facility/ConsultationDetails/DiscussionNotesFilesTab.tsx
@@ -0,0 +1,150 @@
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+
+import Pagination from "@/components/Common/Pagination";
+import Tabs from "@/components/Common/Tabs";
+import FileBlock from "@/components/Files/FileBlock";
+import { FileUploadModel } from "@/components/Patient/models";
+
+import useAuthUser from "@/hooks/useAuthUser";
+import useFileManager from "@/hooks/useFileManager";
+
+import { RESULTS_PER_PAGE_LIMIT } from "@/common/constants";
+
+import routes from "@/Utils/request/api";
+import useQuery from "@/Utils/request/useQuery";
+
+interface DiscussionNotesProps {
+  patientId: string;
+  consultationId: string;
+  facilityId: string;
+  className?: string;
+}
+
+export interface ModalDetails {
+  name?: string;
+  id?: string;
+  reason?: string;
+  userArchived?: string;
+  archiveTime?: string;
+  associatedId?: string;
+}
+
+export interface StateInterface {
+  open: boolean;
+  isImage: boolean;
+  name: string;
+  extension: string;
+  zoom: number;
+  isZoomInDisabled: boolean;
+  isZoomOutDisabled: boolean;
+  rotation: number;
+}
+
+export const DiscussionNotesFiles = (props: DiscussionNotesProps) => {
+  const { t } = useTranslation();
+  const [currentPage, setCurrentPage] = useState(1);
+  const [offset, setOffset] = useState(0);
+  const [tab, setTab] = useState("UNARCHIVED");
+  const authUser = useAuthUser();
+
+  const handlePagination = (page: number, limit: number) => {
+    const offset = (page - 1) * limit;
+    setCurrentPage(page);
+    setOffset(offset);
+  };
+
+  const type = "NOTES";
+  const activeFilesQuery = useQuery(routes.listConsultationFileUploads, {
+    query: {
+      is_archived: false,
+      limit: RESULTS_PER_PAGE_LIMIT,
+      offset: offset,
+    },
+    pathParams: { consultation_external_id: props.consultationId },
+  });
+
+  const archivedFilesQuery = useQuery(routes.listConsultationFileUploads, {
+    query: {
+      is_archived: true,
+      limit: RESULTS_PER_PAGE_LIMIT,
+      offset: offset,
+    },
+    pathParams: { consultation_external_id: props.consultationId },
+  });
+
+  const queries = {
+    UNARCHIVED: activeFilesQuery,
+    ARCHIVED: archivedFilesQuery,
+  };
+
+  const loading = Object.values(queries).some((q) => q.loading);
+  const refetchAll = async () =>
+    Promise.all(Object.values(queries).map((q) => q.refetch()));
+
+  const fileQuery = queries[tab as keyof typeof queries];
+
+  const tabs = [
+    { text: "Active Files", value: "UNARCHIVED" },
+    { text: "Archived Files", value: "ARCHIVED" },
+  ];
+
+  const fileManager = useFileManager({
+    type,
+    onArchive: refetchAll,
+    onEdit: refetchAll,
+  });
+
+  return (
+    <div className={`md:p-4 ${props.className}`}>
+      {fileManager.Dialogues}
+      <div className="mb-4 flex flex-col items-center justify-between gap-4 md:flex-row">
+        <h3>Discussion Notes Files</h3>
+        <Tabs
+          tabs={tabs}
+          onTabChange={(v) => setTab(v.toString())}
+          currentTab={tab}
+        />
+      </div>
+      <div className="flex flex-col gap-2">
+        {!(fileQuery?.data?.results || []).length && loading && (
+          <div className="skeleton-animate-alpha h-32 rounded-lg" />
+        )}
+        {fileQuery?.data?.results.map((item: FileUploadModel) => {
+          if (!item.associating_id) return null;
+          return (
+            <FileBlock
+              file={item}
+              key={item.id}
+              fileManager={fileManager}
+              associating_id={item.associating_id}
+              editable={
+                item?.uploaded_by?.username === authUser.username ||
+                authUser.user_type === "DistrictAdmin" ||
+                authUser.user_type === "StateAdmin"
+              }
+              archivable={true}
+            />
+          );
+        })}
+        {!(fileQuery?.data?.results || []).length && (
+          <div className="mt-4">
+            <div className="text-md flex items-center justify-center font-semibold capitalize text-secondary-500">
+              {t("no_files_found", { type: tab.toLowerCase() })}
+            </div>
+          </div>
+        )}
+      </div>
+      {(fileQuery?.data?.results || []).length > RESULTS_PER_PAGE_LIMIT && (
+        <div className="mt-4 flex w-full justify-center">
+          <Pagination
+            cPage={currentPage}
+            defaultPerPage={RESULTS_PER_PAGE_LIMIT}
+            data={{ totalCount: (fileQuery?.data?.results || []).length }}
+            onChange={handlePagination}
+          />
+        </div>
+      )}
+    </div>
+  );
+};
diff --git a/src/components/Facility/ConsultationDetails/index.tsx b/src/components/Facility/ConsultationDetails/index.tsx
index ec26dfe1a1d..5032e58f01e 100644
--- a/src/components/Facility/ConsultationDetails/index.tsx
+++ b/src/components/Facility/ConsultationDetails/index.tsx
@@ -20,6 +20,7 @@ import { ConsultationPressureSoreTab } from "@/components/Facility/ConsultationD
 import { ConsultationSummaryTab } from "@/components/Facility/ConsultationDetails/ConsultationSummaryTab";
 import { ConsultationUpdatesTab } from "@/components/Facility/ConsultationDetails/ConsultationUpdatesTab";
 import { ConsultationVentilatorTab } from "@/components/Facility/ConsultationDetails/ConsultationVentilatorTab";
+import { DiscussionNotesFiles } from "@/components/Facility/ConsultationDetails/DiscussionNotesFilesTab";
 import DoctorVideoSlideover from "@/components/Facility/DoctorVideoSlideover";
 import PatientNotesSlideover from "@/components/Facility/PatientNotesSlideover";
 import { ConsultationModel } from "@/components/Facility/models";
@@ -59,6 +60,7 @@ const defaultTabs = {
   SUMMARY: ConsultationSummaryTab,
   MEDICINES: ConsultationMedicinesTab,
   FILES: ConsultationFilesTab,
+  DISCUSSION_NOTES_FILES: DiscussionNotesFiles,
   INVESTIGATIONS: ConsultationInvestigationsTab,
   ABG: ConsultationABGTab,
   NURSING: ConsultationNursingTab,
diff --git a/src/components/Facility/ConsultationDoctorNotes/index.tsx b/src/components/Facility/ConsultationDoctorNotes/index.tsx
index 098a4b392e3..6991a51ad98 100644
--- a/src/components/Facility/ConsultationDoctorNotes/index.tsx
+++ b/src/components/Facility/ConsultationDoctorNotes/index.tsx
@@ -1,30 +1,27 @@
-import { t } from "i18next";
 import { useState } from "react";
-import useKeyboardShortcut from "use-keyboard-shortcut";
+import { useTranslation } from "react-i18next";
 
-import CareIcon from "@/CAREUI/icons/CareIcon";
-
-import ButtonV2 from "@/components/Common/ButtonV2";
 import Page from "@/components/Common/Page";
+import RichTextEditor from "@/components/Common/RichTextEditor";
+import Tabs from "@/components/Common/Tabs";
 import DoctorNoteReplyPreviewCard from "@/components/Facility/DoctorNoteReplyPreviewCard";
 import PatientConsultationNotesList from "@/components/Facility/PatientConsultationNotesList";
+import PatientNotesDetailedView from "@/components/Facility/PatientNotesDetailedView";
 import {
   PaitentNotesReplyModel,
   PatientNoteStateType,
 } from "@/components/Facility/models";
-import AutoExpandingTextInputFormField from "@/components/Form/FormFields/AutoExpandingTextInputFormField";
 
 import useAuthUser from "@/hooks/useAuthUser";
 import { useMessageListener } from "@/hooks/useMessageListener";
 
 import { PATIENT_NOTES_THREADS } from "@/common/constants";
 
-import { NonReadOnlyUsers } from "@/Utils/AuthorizeFor";
 import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
 import useQuery from "@/Utils/request/useQuery";
-import { classNames, isAppleDevice, keysOf } from "@/Utils/utils";
+import { classNames, keysOf } from "@/Utils/utils";
 
 interface ConsultationDoctorNotesProps {
   patientId: string;
@@ -34,7 +31,7 @@ interface ConsultationDoctorNotesProps {
 
 const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
   const { patientId, facilityId, consultationId } = props;
-
+  const { t } = useTranslation();
   const authUser = useAuthUser();
   const [thread, setThread] = useState(
     authUser.user_type === "Nurse"
@@ -47,10 +44,13 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
   const [reload, setReload] = useState(false);
   const [facilityName, setFacilityName] = useState("");
   const [patientName, setPatientName] = useState("");
-  const [focused, setFocused] = useState(false);
   const [reply_to, setReplyTo] = useState<PaitentNotesReplyModel | undefined>(
     undefined,
   );
+  const [mode, setMode] = useState<"thread-view" | "default-view">(
+    "default-view",
+  );
+  const [threadViewNote, setThreadViewNote] = useState("");
 
   const initialData: PatientNoteStateType = {
     notes: [],
@@ -69,7 +69,7 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
       return;
     }
 
-    const { res } = await request(routes.addPatientNote, {
+    const { res, data } = await request(routes.addPatientNote, {
       pathParams: {
         patientId: patientId,
       },
@@ -88,6 +88,8 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
       setReload(true);
       setReplyTo(undefined);
     }
+
+    return data?.id;
   };
 
   useQuery(routes.getPatient, {
@@ -113,30 +115,29 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
     }
   });
 
-  useKeyboardShortcut(
-    [isAppleDevice ? "Meta" : "Shift", "Enter"],
-    () => {
-      if (focused) {
-        onAddNote();
-      }
-    },
-    {
-      ignoreInputFields: false,
-    },
-  );
-
   return (
     <Page
       title="Discussion Notes"
-      className="flex h-screen flex-col"
+      className="relative flex h-screen flex-col"
       crumbsReplacements={{
         [facilityId]: { name: facilityName },
         [patientId]: { name: patientName },
       }}
       backUrl={`/facility/${facilityId}/patient/${patientId}`}
     >
-      <div className="relative mx-3 my-2 flex grow flex-col overflow-hidden rounded-lg border border-secondary-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
-        <div className="absolute inset-x-0 top-0 z-10 flex bg-secondary-200 text-sm shadow-md">
+      <div className="right-8 top-0 max-sm:my-1 sm:mx-2 md:absolute">
+        <Tabs
+          className="mt-1 w-full gap-8 lg:w-full"
+          tabs={[
+            { text: "Thread View", value: "thread-view" },
+            { text: "Default View", value: "default-view" },
+          ]}
+          currentTab={mode}
+          onTabChange={(tab) => setMode(tab as "thread-view" | "default-view")}
+        />
+      </div>
+      <div className="relative flex h-full flex-col overflow-hidden rounded-lg border border-secondary-300 bg-white">
+        <div className="sticky top-0 z-10 flex bg-secondary-200 text-sm shadow-md">
           {keysOf(PATIENT_NOTES_THREADS).map((current) => (
             <button
               id={`patient-note-tab-${current}`}
@@ -153,47 +154,49 @@ const ConsultationDoctorNotes = (props: ConsultationDoctorNotesProps) => {
             </button>
           ))}
         </div>
-        <PatientConsultationNotesList
-          state={state}
-          setState={setState}
-          reload={reload}
-          setReload={setReload}
-          thread={thread}
-          setReplyTo={setReplyTo}
-        />
-        <DoctorNoteReplyPreviewCard
-          parentNote={reply_to}
-          cancelReply={() => setReplyTo(undefined)}
-        >
-          <div className="relative mx-4 flex items-center">
-            <AutoExpandingTextInputFormField
-              id="doctor_consultation_notes"
-              maxHeight={160}
-              rows={2}
-              name="note"
-              value={noteField}
-              onChange={(e) => setNoteField(e.value)}
-              className="w-full grow"
-              innerClassName="pr-10"
-              errorClassName="hidden"
-              placeholder={t("notes_placeholder")}
-              disabled={!patientActive}
-              onFocus={() => setFocused(true)}
-              onBlur={() => setFocused(false)}
+        <div className="flex flex-1 overflow-hidden">
+          <div
+            className={classNames(
+              "flex flex-1 flex-col",
+              threadViewNote && "max-sm:hidden",
+            )}
+          >
+            <PatientConsultationNotesList
+              state={state}
+              setState={setState}
+              reload={reload}
+              setReload={setReload}
+              thread={thread}
+              setReplyTo={setReplyTo}
+              mode={mode}
+              setThreadViewNote={setThreadViewNote}
             />
-            <ButtonV2
-              onClick={onAddNote}
-              border={false}
-              className="absolute right-2"
-              ghost
-              size="small"
-              disabled={!patientActive}
-              authorizeFor={NonReadOnlyUsers}
-            >
-              <CareIcon icon="l-message" className="text-lg" />
-            </ButtonV2>
+            <div className="mt-2">
+              <DoctorNoteReplyPreviewCard
+                parentNote={reply_to}
+                cancelReply={() => setReplyTo(undefined)}
+              >
+                <RichTextEditor
+                  initialMarkdown={noteField}
+                  onChange={setNoteField}
+                  onAddNote={onAddNote}
+                  isAuthorized={patientActive}
+                  onRefetch={() => setReload(true)}
+                />
+              </DoctorNoteReplyPreviewCard>
+            </div>
           </div>
-        </DoctorNoteReplyPreviewCard>
+
+          {threadViewNote && (
+            <PatientNotesDetailedView
+              patientId={patientId}
+              consultationId={consultationId}
+              noteId={threadViewNote}
+              thread={thread}
+              setThreadViewNote={setThreadViewNote}
+            />
+          )}
+        </div>
       </div>
     </Page>
   );
diff --git a/src/components/Facility/DoctorNote.tsx b/src/components/Facility/DoctorNote.tsx
index ce6fe955182..c93d164e599 100644
--- a/src/components/Facility/DoctorNote.tsx
+++ b/src/components/Facility/DoctorNote.tsx
@@ -14,14 +14,24 @@ interface DoctorNoteProps {
   handleNext: () => void;
   disableEdit?: boolean;
   setReplyTo?: (reply_to: PatientNotesModel | undefined) => void;
+  mode?: "thread-view" | "default-view";
+  setThreadViewNote?: (noteId: string) => void;
 }
 
 const DoctorNote = (props: DoctorNoteProps) => {
-  const { state, handleNext, setReload, disableEdit, setReplyTo } = props;
+  const {
+    state,
+    handleNext,
+    setReload,
+    disableEdit,
+    setReplyTo,
+    mode,
+    setThreadViewNote,
+  } = props;
 
   return (
     <div
-      className="m-2 flex h-[390px] grow flex-col-reverse overflow-auto bg-white"
+      className="mt-4 flex h-[500px] grow flex-col-reverse overflow-y-scroll bg-white sm:ml-2"
       id="patient-notes-list"
     >
       {state.notes.length ? (
@@ -33,24 +43,46 @@ const DoctorNote = (props: DoctorNoteProps) => {
               <CircularProgress />
             </div>
           }
-          className="flex h-full flex-col-reverse p-2"
+          className="flex h-full flex-col-reverse overflow-hidden"
           inverse={true}
           dataLength={state.notes.length}
           scrollableTarget="patient-notes-list"
         >
-          {state.notes.map((note) => (
-            <DoctorNoteReplyPreviewCard
-              key={note.id}
-              parentNote={note.reply_to_object}
-            >
-              <PatientNoteCard
-                note={note}
-                setReload={setReload}
-                disableEdit={disableEdit}
-                setReplyTo={setReplyTo}
-              />
-            </DoctorNoteReplyPreviewCard>
-          ))}
+          {state.notes.map((note) => {
+            if (mode === "thread-view" && !note.root_note_object) {
+              return (
+                <div className="mt-3">
+                  <PatientNoteCard
+                    key={note.id}
+                    note={note}
+                    setReload={setReload}
+                    disableEdit={disableEdit}
+                    setReplyTo={setReplyTo}
+                    mode={mode}
+                    allowThreadView
+                    allowReply={false}
+                    setThreadViewNote={setThreadViewNote}
+                  />
+                </div>
+              );
+            } else if (mode === "default-view") {
+              return (
+                <DoctorNoteReplyPreviewCard
+                  key={note.id}
+                  parentNote={note.reply_to_object}
+                >
+                  <div className="mt-3">
+                    <PatientNoteCard
+                      note={note}
+                      setReload={setReload}
+                      disableEdit={disableEdit}
+                      setReplyTo={setReplyTo}
+                    />
+                  </div>
+                </DoctorNoteReplyPreviewCard>
+              );
+            }
+          })}
         </InfiniteScroll>
       ) : (
         <div className="mt-2 flex h-full items-center justify-center text-2xl font-bold text-secondary-500">
diff --git a/src/components/Facility/DoctorNoteReplyPreviewCard.tsx b/src/components/Facility/DoctorNoteReplyPreviewCard.tsx
index 118b529a646..b69e889f51b 100644
--- a/src/components/Facility/DoctorNoteReplyPreviewCard.tsx
+++ b/src/components/Facility/DoctorNoteReplyPreviewCard.tsx
@@ -6,6 +6,9 @@ import { USER_TYPES_MAP } from "@/common/constants";
 
 import { formatDateTime, relativeDate } from "@/Utils/utils";
 
+import CareIcon from "../../CAREUI/icons/CareIcon";
+import MarkdownPreview from "../Common/MarkdownPreview";
+
 interface Props {
   parentNote: PaitentNotesReplyModel | undefined;
   children: React.ReactNode;
@@ -17,49 +20,56 @@ const DoctorNoteReplyPreviewCard = ({
   children,
   cancelReply,
 }: Props) => {
+  if (!parentNote) {
+    return children;
+  }
   return (
-    <div className="">
-      {parentNote ? (
-        <div className="mt-4 flex w-full flex-col rounded-lg border border-gray-300 bg-gray-200 p-2 text-gray-800">
-          <div className="flex flex-col px-2">
-            <div className="flex justify-between">
+    <div className="mt-3 flex flex-col rounded-lg border border-gray-300 bg-gray-200/50 pt-2 text-gray-800">
+      <div className="flex flex-col">
+        <div className="flex justify-between pl-3">
+          <div className="flex gap-2">
+            <div className="mt-1 flex h-9 w-9 items-center justify-center rounded-full bg-primary text-lg font-semibold text-white">
+              {parentNote.created_by_object?.first_name[0]}
+            </div>
+            <div>
               <div>
-                <div>
-                  <span className="text-sm font-semibold text-gray-700">
-                    {parentNote.created_by_object?.first_name || "Unknown"}{" "}
-                    {parentNote.created_by_object?.last_name}
+                <span className="text-sm font-semibold text-gray-700">
+                  {parentNote.created_by_object?.first_name || "Unknown"}{" "}
+                  {parentNote.created_by_object?.last_name}
+                </span>
+                {parentNote.user_type && (
+                  <span className="pl-2 text-sm text-gray-700">
+                    {`(${USER_TYPES_MAP[parentNote.user_type]})`}
                   </span>
-                  {parentNote.user_type && (
-                    <span className="pl-2 text-sm text-gray-700">
-                      {`(${USER_TYPES_MAP[parentNote.user_type]})`}
-                    </span>
-                  )}
-                </div>
-                <div className="text-xs text-gray-600">
-                  <div className="tooltip inline">
-                    <span className="tooltip-text tooltip-bottom">
-                      {formatDateTime(parentNote.created_date)}
-                    </span>
-                    Created {relativeDate(parentNote.created_date, true)}
-                  </div>
-                </div>
+                )}
               </div>
-              {cancelReply && (
-                <div
-                  className="cursor-pointer text-xs text-gray-600"
-                  onClick={cancelReply}
-                >
-                  Cancel
+              <div className="text-xs text-gray-600">
+                <div className="tooltip inline">
+                  <span className="tooltip-text tooltip-bottom">
+                    {formatDateTime(parentNote.created_date)}
+                  </span>
+                  Created {relativeDate(parentNote.created_date, true)}
                 </div>
-              )}
+              </div>
             </div>
-            <div className="pb-2 text-sm text-gray-700">{parentNote.note}</div>
           </div>
-          <div>{children}</div>
+          {cancelReply && (
+            <div
+              className="mr-2 cursor-pointer p-1 text-2xl"
+              onClick={cancelReply}
+            >
+              <CareIcon
+                icon="l-times"
+                className="m-1 rounded-full bg-gray-400 p-1 text-white hover:bg-gray-500"
+              />
+            </div>
+          )}
+        </div>
+        <div className="max-h-14 overflow-hidden pb-2 pl-14 text-sm text-gray-700">
+          <MarkdownPreview markdown={parentNote.note} />
         </div>
-      ) : (
-        <div>{children}</div>
-      )}
+      </div>
+      <div>{children}</div>
     </div>
   );
 };
diff --git a/src/components/Facility/PatientConsultationNotesList.tsx b/src/components/Facility/PatientConsultationNotesList.tsx
index 243821b7d6d..49b76d4674e 100644
--- a/src/components/Facility/PatientConsultationNotesList.tsx
+++ b/src/components/Facility/PatientConsultationNotesList.tsx
@@ -22,6 +22,8 @@ interface PatientNotesProps {
   disableEdit?: boolean;
   thread: PatientNotesModel["thread"];
   setReplyTo?: (value: PatientNotesModel | undefined) => void;
+  mode?: "thread-view" | "default-view";
+  setThreadViewNote?: (noteId: string) => void;
 }
 
 const pageSize = RESULTS_PER_PAGE_LIMIT;
@@ -35,6 +37,8 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => {
     disableEdit,
     thread,
     setReplyTo,
+    mode = "default-view",
+    setThreadViewNote,
   } = props;
   const consultationId = useSlug("consultation") ?? "";
 
@@ -83,6 +87,10 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => {
     fetchNotes();
   }, [thread]);
 
+  useEffect(() => {
+    setThreadViewNote?.("");
+  }, [thread, mode]);
+
   useEffect(() => {
     setReload?.(true);
   }, []);
@@ -112,6 +120,8 @@ const PatientConsultationNotesList = (props: PatientNotesProps) => {
       setReload={setReload}
       disableEdit={disableEdit}
       setReplyTo={setReplyTo}
+      mode={mode}
+      setThreadViewNote={setThreadViewNote}
     />
   );
 };
diff --git a/src/components/Facility/PatientNoteCard.tsx b/src/components/Facility/PatientNoteCard.tsx
index 7896cbada4d..a88bd908688 100644
--- a/src/components/Facility/PatientNoteCard.tsx
+++ b/src/components/Facility/PatientNoteCard.tsx
@@ -6,13 +6,18 @@ import CareIcon from "@/CAREUI/icons/CareIcon";
 
 import ButtonV2 from "@/components/Common/ButtonV2";
 import DialogModal from "@/components/Common/Dialog";
+import FilePreviewDialog from "@/components/Common/FilePreviewDialog";
+import MarkdownPreview from "@/components/Common/MarkdownPreview";
 import Spinner from "@/components/Common/Spinner";
 import {
   PatientNotesEditModel,
   PatientNotesModel,
 } from "@/components/Facility/models";
+import { StateInterface } from "@/components/Files/FileUpload";
+import { FileUploadModel } from "@/components/Patient/models";
 
 import useAuthUser from "@/hooks/useAuthUser";
+import { ExtImage } from "@/hooks/useFileUpload";
 import useSlug from "@/hooks/useSlug";
 
 import { USER_TYPES_MAP } from "@/common/constants";
@@ -31,19 +36,91 @@ const PatientNoteCard = ({
   note,
   setReload,
   disableEdit,
+  allowReply = true,
+  allowThreadView = false,
   setReplyTo,
+  mode = "default-view",
+  setThreadViewNote,
 }: {
   note: PatientNotesModel;
   setReload: any;
   disableEdit?: boolean;
+  allowReply?: boolean;
+  allowThreadView?: boolean;
   setReplyTo?: (reply_to: PatientNotesModel | undefined) => void;
+  mode?: "thread-view" | "default-view";
+  setThreadViewNote?: (noteId: string) => void;
 }) => {
-  const patientId = useSlug("patient");
   const [isEditing, setIsEditing] = useState(false);
   const [noteField, setNoteField] = useState(note.note);
   const [showEditHistory, setShowEditHistory] = useState(false);
   const [editHistory, setEditHistory] = useState<PatientNotesEditModel[]>([]);
   const authUser = useAuthUser();
+  const patientId = useSlug("patient");
+
+  const file_type = "NOTES";
+  const [file_state, setFileState] = useState<StateInterface>({
+    open: false,
+    isImage: false,
+    name: "",
+    extension: "",
+    zoom: 4,
+    isZoomInDisabled: false,
+    isZoomOutDisabled: false,
+    rotation: 0,
+  });
+  const [fileUrl, setFileUrl] = useState<string>("");
+  const [downloadURL, setDownloadURL] = useState("");
+
+  const getExtension = (url: string) => {
+    const extension = url.split("?")[0].split(".").pop();
+    return extension ?? "";
+  };
+  const downloadFileUrl = (url: string) => {
+    fetch(url)
+      .then((res) => res.blob())
+      .then((blob) => {
+        setDownloadURL(URL.createObjectURL(blob));
+      });
+  };
+
+  const loadFile = async (id: string, noteId: string) => {
+    setFileUrl("");
+    setFileState({ ...file_state, open: true });
+    const { data } = await request(routes.retrieveUpload, {
+      query: {
+        file_type: file_type,
+        associating_id: noteId,
+      },
+      pathParams: { id },
+    });
+
+    if (!data) return;
+
+    const signedUrl = data.read_signed_url as string;
+    const extension = getExtension(signedUrl);
+
+    setFileState({
+      ...file_state,
+      open: true,
+      name: data.name?.split(".")[0] ?? "file",
+      extension,
+      isImage: ExtImage.includes(extension),
+    });
+    downloadFileUrl(signedUrl);
+    setFileUrl(signedUrl);
+  };
+
+  const handleClose = () => {
+    setDownloadURL("");
+    setFileState({
+      ...file_state,
+      open: false,
+      zoom: 4,
+      isZoomInDisabled: false,
+      isZoomOutDisabled: false,
+    });
+  };
 
   const fetchEditHistory = async () => {
     const { res, data } = await request(routes.getPatientNoteEditHistory, {
@@ -85,93 +162,101 @@ const PatientNoteCard = ({
       {" "}
       <div
         className={classNames(
-          "mt-4 flex w-full flex-col rounded-lg border border-secondary-300 bg-white p-3 text-secondary-800",
+          "group flex flex-col rounded-lg border border-gray-300 bg-white px-3 py-1 text-gray-800 max-sm:ml-2",
           note.user_type === "RemoteSpecialist" && "border-primary-400",
         )}
       >
-        <div className="flex justify-between">
-          <div>
-            <div>
-              <span className="text-sm font-semibold text-secondary-700">
-                {formatName(note.created_by_object)}
-              </span>
-              {note.user_type && (
-                <span className="pl-2 text-sm text-secondary-700">
-                  {`(${USER_TYPES_MAP[note.user_type]})`}
-                </span>
-              )}
-            </div>
-            <div className="text-xs text-secondary-600">
-              <div className="tooltip inline">
-                <span className="tooltip-text tooltip-bottom">
-                  {formatDateTime(note.created_date)}
+        <FilePreviewDialog
+          show={file_state.open}
+          fileUrl={fileUrl}
+          file_state={file_state}
+          setFileState={setFileState}
+          downloadURL={downloadURL}
+          onClose={handleClose}
+          fixedWidth={false}
+          className="h-[80vh] w-full md:h-screen"
+        />
+        <div className="relative flex items-center gap-2">
+          <div className="flex h-9 w-9 items-center justify-center rounded-full bg-primary text-lg font-semibold text-white">
+            {note.created_by_object?.first_name[0]}
+          </div>
+          <div className="flex-grow">
+            <div className="flex items-center justify-between">
+              <div>
+                <span className="text-sm font-semibold text-secondary-700">
+                  {formatName(note.created_by_object)}
                 </span>
-                Created {relativeDate(note.created_date, true)}
+                {note.user_type && (
+                  <span className="ml-2 text-sm text-secondary-700">
+                    {`(${USER_TYPES_MAP[note.user_type]})`}
+                  </span>
+                )}
               </div>
-            </div>
-            {
-              // If last edited date is same as created date, then it is not edited
-              !dayjs(note.last_edited_date).isSame(
-                note.created_date,
-                "second",
-              ) && (
-                <div className="flex">
-                  <div
-                    className="cursor-pointer text-xs text-secondary-600"
+              <div className="flex gap-2">
+                {!disableEdit &&
+                  note.created_by_object.id === authUser.id &&
+                  !isEditing && (
+                    <ButtonV2
+                      ghost
+                      onClick={() => {
+                        setIsEditing(true);
+                      }}
+                      className="bg-gray-100 p-2"
+                    >
+                      <CareIcon icon="l-pen" className="h-4 w-4" />
+                    </ButtonV2>
+                  )}
+                {allowReply && (
+                  <ButtonV2
+                    ghost
                     onClick={() => {
-                      fetchEditHistory();
-                      setShowEditHistory(true);
+                      setReplyTo && setReplyTo(note);
                     }}
+                    className="bg-gray-100 p-2"
                   >
-                    <div className="tooltip inline">
-                      <span className="tooltip-text tooltip-bottom">
-                        {formatDateTime(note.last_edited_date)}
-                      </span>
-                      Edited {relativeDate(note.last_edited_date, true)}
-                    </div>
-                    <CareIcon
-                      icon="l-history"
-                      className="ml-1 h-4 w-4 pt-[3px] text-primary-600"
-                    />
-                  </div>
-                </div>
-              )
-            }
-          </div>
-          <div className="flex gap-2">
-            {!disableEdit &&
-              note.created_by_object.id === authUser.id &&
-              !isEditing && (
-                <ButtonV2
-                  className="tooltip"
-                  ghost
+                    <CareIcon icon="l-corner-up-left-alt" className="h-4 w-4" />
+                  </ButtonV2>
+                )}
+              </div>
+            </div>
+            {note.last_edited_date &&
+            !dayjs(note.last_edited_date).isSame(
+              note.created_date,
+              "second",
+            ) ? (
+              <div className="flex">
+                <div
+                  className="cursor-pointer text-xs text-secondary-600"
                   onClick={() => {
-                    setIsEditing(true);
+                    fetchEditHistory();
+                    setShowEditHistory(true);
                   }}
                 >
-                  <CareIcon icon="l-pen" className="h-5 w-5" />
-                  <span className="tooltip-text tooltip-bottom -translate-x-11 -translate-y-1 text-xs">
-                    {t("edit")}
+                  <div className="tooltip inline">
+                    <span className="tooltip-text tooltip-bottom">
+                      {formatDateTime(note.last_edited_date)}
+                    </span>
+                    Edited {relativeDate(note.last_edited_date, true)}
+                  </div>
+                  <CareIcon
+                    icon="l-history"
+                    className="ml-1 h-4 w-4 pt-[3px] text-primary-600"
+                  />
+                </div>
+              </div>
+            ) : (
+              <div className="text-xs text-gray-600">
+                <div className="tooltip inline">
+                  <span className="tooltip-text tooltip-bottom">
+                    {formatDateTime(note.created_date)}
                   </span>
-                </ButtonV2>
-              )}
-            <ButtonV2
-              className="tooltip"
-              ghost
-              onClick={() => {
-                setReplyTo && setReplyTo(note);
-              }}
-            >
-              <CareIcon
-                icon="l-corner-up-left-alt"
-                className="tooltip h-5 w-5"
-              />
-              <span className="tooltip-text tooltip-bottom -translate-x-11 -translate-y-1 text-xs">
-                {t("reply")}
-              </span>
-            </ButtonV2>
+                  Created {relativeDate(note.created_date, true)}
+                </div>
+              </div>
+            )}
           </div>
         </div>
+
         {
           <div className="mt-2">
             {isEditing ? (
@@ -207,7 +292,49 @@ const PatientNoteCard = ({
                 </div>
               </div>
             ) : (
-              <div className="text-sm text-secondary-700">{noteField}</div>
+              <div
+                onClick={() => {
+                  if (allowThreadView && setThreadViewNote)
+                    setThreadViewNote(note.id);
+                }}
+                className={`pl-11 text-sm text-gray-700 ${allowThreadView && "cursor-pointer"}`}
+              >
+                <MarkdownPreview
+                  markdown={noteField}
+                  mentioned_users={note.mentioned_users}
+                />
+                <div className="flex gap-2">
+                  {note?.files?.map((file: FileUploadModel) => (
+                    <div
+                      key={file.id}
+                      className="relative mt-1 h-20 w-20 cursor-pointer rounded-md bg-gray-100 shadow-sm hover:bg-gray-200"
+                    >
+                      <div
+                        className="flex h-full w-full flex-col items-center justify-center p-2"
+                        onClick={(e) => {
+                          e.stopPropagation();
+                          if (file.id) loadFile(file.id, note.id);
+                        }}
+                      >
+                        <CareIcon
+                          icon="l-file"
+                          className="shrink-0 text-2xl text-gray-600"
+                        />
+                        <span className="mt-1 max-h-[2.5em] w-full overflow-hidden text-ellipsis break-words text-center text-xs text-gray-600">
+                          {file.name}
+                        </span>
+                      </div>
+                    </div>
+                  ))}
+                </div>
+                {mode == "thread-view" && note.replies.length > 0 && (
+                  <div className="mt-2 flex items-center text-xs text-gray-500">
+                    <CareIcon icon="l-corner-down-right" className="h-3 w-3" />
+                    {note.child_notes.length}{" "}
+                    {note.child_notes.length === 1 ? "Reply" : "Replies"}
+                  </div>
+                )}
+              </div>
             )}
           </div>
         }
@@ -225,7 +352,7 @@ const PatientNoteCard = ({
                 <strong> {note.id}</strong>
               </p>
             </div>
-            <div className="h-96 overflow-scroll">
+            <div className="h-96 overflow-y-scroll">
               {editHistory.length === 0 && (
                 <div className="flex h-full items-center justify-center">
                   <Spinner />
@@ -252,7 +379,9 @@ const PatientNoteCard = ({
                       <p className="text-sm font-medium text-secondary-500">
                         Note
                       </p>
-                      <p className="text-sm text-secondary-900">{edit.note}</p>
+                      <div className="text-sm text-secondary-900">
+                        <MarkdownPreview markdown={edit.note} />
+                      </div>
                     </div>
                   </div>
                 );
diff --git a/src/components/Facility/PatientNotesDetailedView.tsx b/src/components/Facility/PatientNotesDetailedView.tsx
new file mode 100644
index 00000000000..51f90b65177
--- /dev/null
+++ b/src/components/Facility/PatientNotesDetailedView.tsx
@@ -0,0 +1,187 @@
+import { useEffect, useState } from "react";
+
+import CareIcon from "@/CAREUI/icons/CareIcon";
+
+import CircularProgress from "@/components/Common/CircularProgress";
+import RichTextEditor from "@/components/Common/RichTextEditor";
+import DoctorNoteReplyPreviewCard from "@/components/Facility/DoctorNoteReplyPreviewCard";
+
+import * as Notification from "@/Utils/Notifications";
+import routes from "@/Utils/request/api";
+import request from "@/Utils/request/request";
+
+import PatientNoteCard from "./PatientNoteCard";
+import { PaitentNotesReplyModel, PatientNotesModel } from "./models";
+
+interface Props {
+  patientId: string;
+  consultationId: string;
+  noteId: string;
+  thread: PatientNotesModel["thread"];
+  setThreadViewNote?: (note: string) => void;
+}
+
+const PatientNotesDetailedView = (props: Props) => {
+  const { patientId, consultationId, noteId, thread, setThreadViewNote } =
+    props;
+  const [isLoading, setIsLoading] = useState(true);
+  const [reload, setReload] = useState(false);
+  const [state, setState] = useState<PatientNotesModel>();
+  const [noteField, setNoteField] = useState("");
+  const [reply_to, setReplyTo] = useState<PaitentNotesReplyModel | undefined>(
+    undefined,
+  );
+
+  const onAddNote = async () => {
+    if (!/\S+/.test(noteField)) {
+      Notification.Error({
+        msg: "Note Should Contain At Least 1 Character",
+      });
+      return;
+    }
+
+    const { res, data } = await request(routes.addPatientNote, {
+      pathParams: {
+        patientId: patientId,
+      },
+      body: {
+        note: noteField,
+        thread,
+        consultation: consultationId,
+        reply_to: reply_to?.id || noteId,
+      },
+    });
+
+    setReplyTo(undefined);
+
+    if (res?.status === 201) {
+      Notification.Success({ msg: "Note added successfully" });
+      setNoteField("");
+    }
+
+    return data?.id;
+  };
+  const fetchNotes = async () => {
+    setIsLoading(true);
+
+    const { data } = await request(routes.getPatientNote, {
+      pathParams: {
+        patientId: patientId,
+        noteId,
+      },
+      query: {
+        consultation: consultationId,
+        thread,
+      },
+    });
+
+    if (data) {
+      setState(data);
+    }
+    setIsLoading(false);
+    setReload?.(false);
+  };
+
+  // Fetch notes when reload is triggered
+  useEffect(() => {
+    if (reload) {
+      fetchNotes();
+    }
+  }, [reload]);
+
+  // Fetch notes when thread or noteId changes
+  useEffect(() => {
+    fetchNotes();
+  }, [thread, noteId]);
+
+  // Set reload to true on component mount
+  useEffect(() => {
+    setReload?.(true);
+  }, []);
+
+  if (isLoading) {
+    return (
+      <div className="flex items-center justify-center bg-white">
+        <CircularProgress />
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex w-full flex-col overflow-hidden rounded-lg border border-gray-300 bg-white sm:w-[500px]">
+      {state && (
+        <div className="flex h-full flex-col">
+          <div className="px-3 pt-2">
+            <div className="mb-2 flex items-center justify-between">
+              <h4 className="text-lg">Note</h4>
+              <button
+                onClick={() => setThreadViewNote?.("")}
+                className="btn btn-default"
+              >
+                <CareIcon icon="l-times" className="mr-1 text-lg" />
+                Close
+              </button>
+            </div>
+            <PatientNoteCard
+              note={state}
+              setReload={setReload}
+              allowReply={false}
+            />
+          </div>
+
+          <div className="flex flex-1 flex-col overflow-hidden">
+            <div className="flex items-center justify-between px-4 py-2">
+              <h4 className="text-lg text-slate-600">Replies</h4>
+              {state.replies.length > 0 && (
+                <div className="text-sm text-gray-500">
+                  {state.child_notes.length}{" "}
+                  {state.child_notes.length > 1 ? "replies" : "reply"}
+                </div>
+              )}
+            </div>
+
+            <div className="flex-1 overflow-y-auto px-3">
+              {state.child_notes.map((note) => {
+                const parentNote = state.child_notes.find(
+                  (n) => n.id === note.reply_to,
+                );
+                return (
+                  <DoctorNoteReplyPreviewCard
+                    key={note.id}
+                    parentNote={
+                      note.reply_to !== state.id ? parentNote : undefined
+                    }
+                  >
+                    <div className="mt-3">
+                      <PatientNoteCard
+                        note={note as PatientNotesModel}
+                        setReload={setReload}
+                        setReplyTo={setReplyTo}
+                      />
+                    </div>
+                  </DoctorNoteReplyPreviewCard>
+                );
+              })}
+            </div>
+          </div>
+
+          <div className="px-3 pb-2">
+            <DoctorNoteReplyPreviewCard
+              parentNote={reply_to}
+              cancelReply={() => setReplyTo(undefined)}
+            >
+              <RichTextEditor
+                onAddNote={onAddNote}
+                onChange={setNoteField}
+                initialMarkdown={noteField}
+                onRefetch={() => setReload(true)}
+              />
+            </DoctorNoteReplyPreviewCard>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PatientNotesDetailedView;
diff --git a/src/components/Facility/PatientNotesSlideover.tsx b/src/components/Facility/PatientNotesSlideover.tsx
index 89d38a5f168..b7ea200f452 100644
--- a/src/components/Facility/PatientNotesSlideover.tsx
+++ b/src/components/Facility/PatientNotesSlideover.tsx
@@ -1,18 +1,17 @@
-import { t } from "i18next";
 import { Link } from "raviger";
 import { Dispatch, SetStateAction, useEffect, useState } from "react";
-import useKeyboardShortcut from "use-keyboard-shortcut";
+import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
+import AuthorizedChild from "@/CAREUI/misc/AuthorizedChild";
 
-import ButtonV2 from "@/components/Common/ButtonV2";
+import RichTextEditor from "@/components/Common/RichTextEditor";
 import DoctorNoteReplyPreviewCard from "@/components/Facility/DoctorNoteReplyPreviewCard";
 import PatientConsultationNotesList from "@/components/Facility/PatientConsultationNotesList";
 import {
   PaitentNotesReplyModel,
   PatientNoteStateType,
 } from "@/components/Facility/models";
-import AutoExpandingTextInputFormField from "@/components/Form/FormFields/AutoExpandingTextInputFormField";
 
 import useAuthUser from "@/hooks/useAuthUser";
 import { useMessageListener } from "@/hooks/useMessageListener";
@@ -24,7 +23,7 @@ import { NonReadOnlyUsers } from "@/Utils/AuthorizeFor";
 import * as Notification from "@/Utils/Notifications";
 import routes from "@/Utils/request/api";
 import request from "@/Utils/request/request";
-import { classNames, isAppleDevice, keysOf } from "@/Utils/utils";
+import { classNames, keysOf } from "@/Utils/utils";
 
 interface PatientNotesProps {
   patientId: string;
@@ -35,6 +34,7 @@ interface PatientNotesProps {
 
 export default function PatientNotesSlideover(props: PatientNotesProps) {
   const authUser = useAuthUser();
+  const { t } = useTranslation();
   const notificationSubscriptionState = useNotificationSubscriptionState();
   const [thread, setThread] = useState(
     authUser.user_type === "Nurse"
@@ -44,7 +44,6 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
   const [show, setShow] = useState(true);
   const [patientActive, setPatientActive] = useState(true);
   const [reload, setReload] = useState(false);
-  const [focused, setFocused] = useState(false);
   const [reply_to, setReplyTo] = useState<PaitentNotesReplyModel | undefined>(
     undefined,
   );
@@ -85,7 +84,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
       });
       return;
     }
-    const { res } = await request(routes.addPatientNote, {
+    const { res, data } = await request(routes.addPatientNote, {
       pathParams: { patientId: patientId },
       body: {
         note: noteField,
@@ -101,6 +100,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
       setReload(true);
       setReplyTo(undefined);
     }
+    return data?.id;
   };
 
   useMessageListener((data) => {
@@ -129,18 +129,6 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
     fetchPatientName();
   }, [patientId]);
 
-  useKeyboardShortcut(
-    [isAppleDevice ? "Meta" : "Shift", "Enter"],
-    () => {
-      if (focused) {
-        onAddNote();
-      }
-    },
-    {
-      ignoreInputFields: false,
-    },
-  );
-
   const notesActionIcons = (
     <div className="flex gap-1">
       {show && (
@@ -206,7 +194,7 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
       className={classNames(
         "fixed bottom-0 z-20 sm:right-8",
         show
-          ? "right-0 h-screen w-screen sm:h-fit sm:w-[400px]"
+          ? "right-0 h-screen w-screen sm:h-fit sm:w-[430px]"
           : "right-8 w-[250px]",
       )}
     >
@@ -250,43 +238,24 @@ export default function PatientNotesSlideover(props: PatientNotesProps) {
             thread={thread}
             setReplyTo={setReplyTo}
           />
-          <DoctorNoteReplyPreviewCard
-            parentNote={reply_to}
-            cancelReply={() => setReplyTo(undefined)}
-          >
-            <div className="relative mx-4 flex items-center">
-              <AutoExpandingTextInputFormField
-                id="discussion_notes_textarea"
-                maxHeight={160}
-                rows={2}
-                name="note"
-                value={noteField}
-                onChange={(e) => setNoteField(e.value)}
-                className="w-full grow"
-                errorClassName="hidden"
-                innerClassName="pr-10"
-                placeholder={t("notes_placeholder")}
-                disabled={!patientActive}
-                onFocus={() => setFocused(true)}
-                onBlur={() => setFocused(false)}
-              />
-              <ButtonV2
-                id="add_doctor_note_button"
-                onClick={onAddNote}
-                border={false}
-                className="tooltip absolute right-2"
-                ghost
-                size="small"
-                disabled={!patientActive}
-                authorizeFor={NonReadOnlyUsers}
-              >
-                <CareIcon icon="l-message" className="tooltip text-lg" />
-                <span className="tooltip-text tooltip-bottom -translate-x-11 -translate-y-1 text-xs">
-                  {t("send")}
-                </span>
-              </ButtonV2>
-            </div>
-          </DoctorNoteReplyPreviewCard>
+          {patientActive && (
+            <AuthorizedChild authorizeFor={NonReadOnlyUsers}>
+              {({ isAuthorized }) => (
+                <DoctorNoteReplyPreviewCard
+                  parentNote={reply_to}
+                  cancelReply={() => setReplyTo(undefined)}
+                >
+                  <RichTextEditor
+                    initialMarkdown={noteField}
+                    onChange={setNoteField}
+                    onAddNote={onAddNote}
+                    isAuthorized={isAuthorized}
+                    onRefetch={() => setReload(true)}
+                  />
+                </DoctorNoteReplyPreviewCard>
+              )}
+            </AuthorizedChild>
+          )}
         </div>
       )}
     </div>
diff --git a/src/components/Facility/models.tsx b/src/components/Facility/models.tsx
index 79272ac3de7..a98e8b49e99 100644
--- a/src/components/Facility/models.tsx
+++ b/src/components/Facility/models.tsx
@@ -572,6 +572,7 @@ export interface BaseUserModel {
   last_name: string;
   user_type: string;
   last_login: string;
+  read_profile_picture_url: string;
 }
 
 export interface PatientNotesEditModel {
@@ -587,6 +588,7 @@ export interface PaitentNotesReplyModel {
   user_type?: UserRole | "RemoteSpecialist";
   created_by_object: BaseUserModel;
   created_date: string;
+  reply_to?: string;
 }
 
 export interface PatientNotesModel {
@@ -600,6 +602,11 @@ export interface PatientNotesModel {
   last_edited_by?: BaseUserModel;
   last_edited_date?: string;
   reply_to_object?: PaitentNotesReplyModel;
+  replies: PaitentNotesReplyModel[];
+  files: FileUploadModel[];
+  root_note_object?: PaitentNotesReplyModel;
+  child_notes: PaitentNotesReplyModel[];
+  mentioned_users: UserBareMinimum[];
 }
 
 export interface PatientNoteStateType {
diff --git a/src/components/Notifications/NotificationsList.tsx b/src/components/Notifications/NotificationsList.tsx
index 0153017c5ed..cc2c7f3857d 100644
--- a/src/components/Notifications/NotificationsList.tsx
+++ b/src/components/Notifications/NotificationsList.tsx
@@ -78,7 +78,9 @@ const NotificationTile = ({
       case "INVESTIGATION_SESSION_CREATED":
         return `/facility/${data.facility}/patient/${data.patient}/consultation/${data.consultation}/investigation/${data.session}`;
       case "PATIENT_NOTE_ADDED":
-        return `/facility/${data.facility}/patient/${data.patient}/notes`;
+        return `/facility/${data.facility}/patient/${data.patient}/consultation/${data.consultation}/notes`;
+      case "PATIENT_NOTE_MENTIONED":
+        return `/facility/${data.facility}/patient/${data.patient}/consultation/${data.consultation}/notes`;
       case "MESSAGE":
         return "/notice_board/";
       default:
diff --git a/src/components/Patient/PatientNotes.tsx b/src/components/Patient/PatientNotes.tsx
index 70dfcd6c426..cd355c9936e 100644
--- a/src/components/Patient/PatientNotes.tsx
+++ b/src/components/Patient/PatientNotes.tsx
@@ -1,5 +1,5 @@
-import { t } from "i18next";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 
 import CareIcon from "@/CAREUI/icons/CareIcon";
 
@@ -25,13 +25,13 @@ import request from "@/Utils/request/request";
 import { classNames, keysOf } from "@/Utils/utils";
 
 interface PatientNotesProps {
-  patientId: any;
-  facilityId: any;
+  patientId: string;
+  facilityId: string;
 }
 
 const PatientNotes = (props: PatientNotesProps) => {
   const { patientId, facilityId } = props;
-
+  const { t } = useTranslation();
   const authUser = useAuthUser();
   const [thread, setThread] = useState(
     authUser.user_type === "Nurse"
@@ -44,9 +44,7 @@ const PatientNotes = (props: PatientNotesProps) => {
   const [reload, setReload] = useState(false);
   const [facilityName, setFacilityName] = useState("");
   const [patientName, setPatientName] = useState("");
-  const [reply_to, setReplyTo] = useState<PatientNotesModel | undefined>(
-    undefined,
-  );
+  const [reply_to, setReplyTo] = useState<PatientNotesModel>();
 
   const initialData: PatientNoteStateType = {
     notes: [],
@@ -63,7 +61,7 @@ const PatientNotes = (props: PatientNotesProps) => {
       return;
     }
 
-    const { res } = await request(routes.addPatientNote, {
+    const { res, data } = await request(routes.addPatientNote, {
       pathParams: { patientId: patientId },
       body: {
         note: noteField,
@@ -78,6 +76,7 @@ const PatientNotes = (props: PatientNotesProps) => {
       setState({ ...state, cPage: 1 });
       setReplyTo(undefined);
     }
+    return data?.id;
   };
 
   useEffect(() => {
@@ -118,8 +117,8 @@ const PatientNotes = (props: PatientNotesProps) => {
       }}
       backUrl={`/facility/${facilityId}/patient/${patientId}`}
     >
-      <div className="relative mx-3 my-2 flex grow flex-col rounded-lg border border-secondary-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
-        <div className="absolute inset-x-0 top-0 z-10 flex bg-secondary-200 text-sm shadow-md">
+      <div className="relative mx-3 my-2 flex grow flex-col rounded-lg border border-gray-300 bg-white p-2 sm:mx-10 sm:my-5 sm:p-5">
+        <div className="absolute inset-x-0 top-0 z-10 flex bg-gray-200 text-sm shadow-md">
           {keysOf(PATIENT_NOTES_THREADS).map((current) => (
             <button
               id={`patient-note-tab-${current}`}
diff --git a/src/components/Users/UserProfile.tsx b/src/components/Users/UserProfile.tsx
index 15cedafab2e..4f75c211006 100644
--- a/src/components/Users/UserProfile.tsx
+++ b/src/components/Users/UserProfile.tsx
@@ -127,8 +127,8 @@ const editFormReducer = (state: State, action: Action) => {
 };
 
 export default function UserProfile() {
-  const { t } = useTranslation();
   const { signOut, refetchUser } = useAuthContext();
+  const { t } = useTranslation();
   const [states, dispatch] = useReducer(editFormReducer, initialState);
   const [editAvatar, setEditAvatar] = useState(false);
   const [updateStatus, setUpdateStatus] = useState({
diff --git a/src/hooks/useAuthUser.ts b/src/hooks/useAuthUser.ts
index 2a44575072f..11f55026375 100644
--- a/src/hooks/useAuthUser.ts
+++ b/src/hooks/useAuthUser.ts
@@ -9,9 +9,9 @@ type SignInReturnType = RequestResult<JwtTokenObtainPair>;
 
 type AuthContextType = {
   user: UserModel | undefined;
+  refetchUser: () => Promise<RequestResult<UserModel>>;
   signIn: (creds: LoginCredentials) => Promise<SignInReturnType>;
   signOut: () => Promise<void>;
-  refetchUser: () => Promise<RequestResult<UserModel>>;
 };
 
 export const AuthUserContext = createContext<AuthContextType | null>(null);
diff --git a/src/hooks/useFileUpload.tsx b/src/hooks/useFileUpload.tsx
index 56f0d337a5e..c05b339111a 100644
--- a/src/hooks/useFileUpload.tsx
+++ b/src/hooks/useFileUpload.tsx
@@ -64,7 +64,7 @@ export type FileUploadReturn = {
 };
 
 // Array of image extensions
-const ExtImage: string[] = [
+export const ExtImage: string[] = [
   "jpeg",
   "jpg",
   "png",