diff --git a/package-lock.json b/package-lock.json
index f5edb998e4e..80a16f4ebb8 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -5149,6 +5149,15 @@
       "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==",
+      "dev": true,
+      "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",
@@ -12225,16 +12234,6 @@
         "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",
@@ -12320,45 +12319,6 @@
         "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",
@@ -12398,16 +12358,6 @@
         "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",
@@ -12574,45 +12524,6 @@
         "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",
@@ -12740,45 +12651,6 @@
         "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",
@@ -12812,16 +12684,6 @@
         "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",
@@ -12907,45 +12769,6 @@
         "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",
@@ -13510,6 +13333,22 @@
         "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==",
+      "dev": true,
+      "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",
@@ -13594,6 +13433,27 @@
         "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==",
+      "dev": true,
+      "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",
@@ -15790,45 +15650,6 @@
         "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",
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..e4a353fd231
--- /dev/null
+++ b/src/components/Common/MarkdownPreview.tsx
@@ -0,0 +1,149 @@
+import DOMPurify from "dompurify";
+import { marked } from "marked";
+import { useEffect, useState } from "react";
+
+import { UserBareMinimum } from "@/components/Users/models";
+
+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 [hoveredUser, setHoveredUser] = useState<string | null>(null);
+  const [hoverPosition, setHoverPosition] = useState<{
+    x: number;
+    y: number;
+  } | null>(null);
+
+  const renderer = new marked.Renderer();
+  renderer.link = function ({
+    href,
+    title,
+    text,
+  }: {
+    href: string;
+    title?: string | null;
+    text: string;
+  }) {
+    try {
+      const url = new URL(href);
+      if (!["http:", "https:"].includes(url.protocol)) {
+        return text;
+      }
+      href = url.toString();
+    } catch {
+      return text;
+    }
+    return `<a href="${href}" target="_blank" rel="noopener noreferrer" title="${
+      title || ""
+    }">${text}</a>`;
+  };
+
+  const processedMarkdown = markdown
+    .replace(/@([a-zA-Z0-9_]{3,30})/g, (_, username) => {
+      const user = MentionedUsers[username];
+      if (user) {
+        const sanitizedUsername = username.replace(/[<>"'&]/g, "");
+        return `<span class="mention cursor-pointer font-medium text-primary hover:underline" data-username="${sanitizedUsername}">@${sanitizedUsername}</span>`;
+      } else {
+        return `@${username}`;
+      }
+    })
+    .replace(/~~(.*?)~~/g, (_, text) => `<del>${text}</del>`);
+
+  const html = marked
+    .parse(processedMarkdown, {
+      gfm: true,
+      breaks: true,
+      renderer: renderer,
+    })
+    .toString();
+
+  const sanitizedHtml = DOMPurify.sanitize(html, {
+    ADD_ATTR: ["target", "rel"],
+  });
+
+  useEffect(() => {
+    const mentionElements = document.querySelectorAll(".mention");
+    const listeners: Array<{
+      element: Element;
+      enter: () => void;
+      leave: () => void;
+    }> = [];
+
+    mentionElements.forEach((ele) => {
+      const handleEnter = () => {
+        const username = ele.getAttribute("data-username");
+        if (username) {
+          setHoveredUser(username);
+          const rect = ele.getBoundingClientRect();
+          setHoverPosition({
+            x: rect.left,
+            y: rect.top,
+          });
+        }
+      };
+      const handleLeave = () => {
+        setHoveredUser(null);
+        setHoverPosition(null);
+      };
+
+      ele.addEventListener("mouseenter", handleEnter);
+      ele.addEventListener("mouseleave", handleLeave);
+
+      listeners.push({
+        element: ele,
+        enter: handleEnter,
+        leave: handleLeave,
+      });
+    });
+
+    return () => {
+      listeners.forEach(({ element, enter, leave }) => {
+        element.removeEventListener("mouseenter", enter);
+        element.removeEventListener("mouseleave", leave);
+      });
+    };
+  }, [sanitizedHtml]);
+
+  return (
+    <div className="relative prose text-sm prose-p:m-0">
+      <div dangerouslySetInnerHTML={{ __html: sanitizedHtml }} />
+      {hoveredUser && hoverPosition && MentionedUsers[hoveredUser] && (
+        <div
+          className="fixed z-50 transition-opacity duration-300 ease-in-out"
+          style={{
+            top: `${hoverPosition.y - 100}px`,
+            left: `${hoverPosition.x}px`,
+          }}
+        >
+          <UserCard user={MentionedUsers[hoveredUser]} />
+          <div className="absolute left-2 -bottom-1 h-4 w-4 rotate-45 transform bg-gray-200"></div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default MarkdownPreview;
diff --git a/src/components/Common/MentionDropdown.tsx b/src/components/Common/MentionDropdown.tsx
new file mode 100644
index 00000000000..c4365242802
--- /dev/null
+++ b/src/components/Common/MentionDropdown.tsx
@@ -0,0 +1,140 @@
+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 KEYS = {
+  ENTER: "Enter",
+  ARROW_UP: "ArrowUp",
+  ARROW_DOWN: "ArrowDown",
+  ESCAPE: "Escape",
+} as const;
+
+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 (document.activeElement !== editorRef.current) {
+        return;
+      }
+      if (event.key === KEYS.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 === KEYS.ESCAPE) {
+        event.preventDefault();
+        onSelect({ id: "", username: "" });
+      } else if (event.key === KEYS.ARROW_DOWN) {
+        event.preventDefault();
+        setSelectedIndex((prevIndex) => {
+          if (prevIndex === null) return 0;
+          return Math.min(filteredUsers.length - 1, prevIndex + 1);
+        });
+      } else if (event.key === KEYS.ARROW_UP) {
+        event.preventDefault();
+        setSelectedIndex((prevIndex) => {
+          if (prevIndex === null) return filteredUsers.length - 1;
+          return Math.max(0, prevIndex - 1);
+        });
+      }
+    },
+    [filteredUsers, selectedIndex, onSelect, editorRef],
+  );
+
+  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 }}
+      role="listbox"
+      aria-label="User mentions"
+    >
+      {loading && (
+        <div className="p-2 text-gray-500" role="status" aria-live="polite">
+          <span className="inline-block animate-spin">⌛</span> Loading users...
+        </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"
+            }`}
+            role="option"
+            aria-selected={index === selectedIndex}
+            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>
+            <span className="truncate" title={user.username}>
+              {user.username}
+            </span>
+          </div>
+        ))
+      ) : (
+        <div className="p-2 text-gray-500" role="status" aria-live="polite">
+          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..806fe985aae
--- /dev/null
+++ b/src/components/Common/RichTextEditor.tsx
@@ -0,0 +1,766 @@
+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;
+  maxRows?: number;
+}
+
+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,
+  maxRows,
+}) => {
+  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 adjustTextareaHeight = useCallback(
+    (textarea: HTMLTextAreaElement) => {
+      textarea.style.height = "auto";
+
+      const style = window.getComputedStyle(textarea);
+      const borderHeight =
+        parseInt(style.borderTopWidth) + parseInt(style.borderBottomWidth);
+      const paddingHeight =
+        parseInt(style.paddingTop) + parseInt(style.paddingBottom);
+
+      const lineHeight = parseInt(style.lineHeight);
+      const maxHeight = maxRows
+        ? lineHeight * maxRows + borderHeight + paddingHeight
+        : Infinity;
+
+      const newHeight = Math.min(
+        textarea.scrollHeight + borderHeight,
+        maxHeight,
+      );
+      textarea.style.height = `${newHeight}px`;
+    },
+    [maxRows],
+  );
+
+  const handleInput = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      const newMarkdown = event.target.value;
+      const caretPosition = event.target.selectionStart;
+
+      setMarkdown(newMarkdown);
+      adjustTextareaHeight(event.target);
+
+      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);
+      }
+    },
+    [adjustTextareaHeight],
+  );
+
+  useEffect(() => {
+    if (editorRef.current) {
+      adjustTextareaHeight(editorRef.current);
+    }
+  }, [markdown, adjustTextareaHeight]);
+
+  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={classNames(
+              "w-full resize-none border-none p-2 align-middle text-sm outline-none focus:outline-none focus:ring-0",
+              maxRows ? "overflow-y-auto" : "overflow-hidden",
+            )}
+            value={markdown}
+            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");
+  try {
+    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 { top, left } = span.getBoundingClientRect();
+    return { top, left, start: position };
+  } finally {
+    document.body.removeChild(div);
+  }
+};
diff --git a/src/components/Facility/ConsultationDetails/DiscussionNotesFilesTab.tsx b/src/components/Facility/ConsultationDetails/DiscussionNotesFilesTab.tsx
new file mode 100644
index 00000000000..abb69a6f66e
--- /dev/null
+++ b/src/components/Facility/ConsultationDetails/DiscussionNotesFilesTab.tsx
@@ -0,0 +1,174 @@
+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 * as Notification from "@/Utils/Notifications";
+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 FILE_TYPE = "NOTES" as const;
+
+  const {
+    data: activeFilesData,
+    loading: activeFilesLoading,
+    refetch: refetchActive,
+  } = useQuery(routes.listConsultationFileUploads, {
+    query: {
+      is_archived: false,
+      limit: RESULTS_PER_PAGE_LIMIT,
+      offset,
+    },
+    pathParams: { consultation_external_id: props.consultationId },
+  });
+
+  const {
+    data: archivedFilesData,
+    loading: archivedFilesLoading,
+    refetch: refetchArchived,
+  } = useQuery(routes.listConsultationFileUploads, {
+    query: {
+      is_archived: true,
+      limit: RESULTS_PER_PAGE_LIMIT,
+      offset,
+    },
+    pathParams: { consultation_external_id: props.consultationId },
+  });
+
+  const queries = {
+    UNARCHIVED: {
+      data: activeFilesData,
+      loading: activeFilesLoading,
+      refetch: refetchActive,
+    },
+    ARCHIVED: {
+      data: archivedFilesData,
+      loading: archivedFilesLoading,
+      refetch: refetchArchived,
+    },
+  };
+
+  const loading = Object.values(queries).some((q) => q.loading);
+  const refetchAll = async () =>
+    Promise.all(
+      Object.values(queries).map((q) =>
+        q.refetch?.().catch(() => {
+          Notification.Error({ msg: "Failed to refetch files" });
+        }),
+      ),
+    );
+
+  const fileQuery = queries[tab as keyof typeof queries];
+
+  const tabs = [
+    { text: "Active Files", value: "UNARCHIVED" },
+    { text: "Archived Files", value: "ARCHIVED" },
+  ];
+
+  const fileManager = useFileManager({
+    type: FILE_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 && fileQuery.data.count > 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?.count }}
+            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..06b4ad237cd 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,
+  PatientNotesReplyModel,
 } 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>(
+  const [reply_to, setReplyTo] = useState<PatientNotesReplyModel | 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,50 @@ 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)}
+                  maxRows={10}
+                />
+              </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..5b6fbcd538f 100644
--- a/src/components/Facility/DoctorNote.tsx
+++ b/src/components/Facility/DoctorNote.tsx
@@ -10,18 +10,28 @@ import {
 
 interface DoctorNoteProps {
   state: PatientNoteStateType;
-  setReload: any;
+  setReload?: (value: boolean) => void;
   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,41 @@ 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}
-            >
+          {state.notes.map((note) => {
+            const noteCard = (
               <PatientNoteCard
                 note={note}
                 setReload={setReload}
                 disableEdit={disableEdit}
                 setReplyTo={setReplyTo}
+                mode={mode}
+                allowThreadView={mode === "thread-view"}
+                allowReply={mode !== "thread-view"}
+                setThreadViewNote={setThreadViewNote}
               />
-            </DoctorNoteReplyPreviewCard>
-          ))}
+            );
+            if (mode === "thread-view" && !note.root_note_object) {
+              return (
+                <div key={note.id} className="mt-3">
+                  {noteCard}
+                </div>
+              );
+            } else {
+              return (
+                <DoctorNoteReplyPreviewCard
+                  key={note.id}
+                  parentNote={note.reply_to_object}
+                >
+                  <div className="mt-3">{noteCard}</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..4157a9d7d7d 100644
--- a/src/components/Facility/DoctorNoteReplyPreviewCard.tsx
+++ b/src/components/Facility/DoctorNoteReplyPreviewCard.tsx
@@ -1,13 +1,16 @@
 import React from "react";
 
-import { PaitentNotesReplyModel } from "@/components/Facility/models";
+import { PatientNotesReplyModel } from "@/components/Facility/models";
 
 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;
+  parentNote: PatientNotesReplyModel | undefined;
   children: React.ReactNode;
   cancelReply?: () => void;
 }
@@ -17,49 +20,59 @@ 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 && (
+            <button
+              type="button"
+              className="mr-2 cursor-pointer p-1 text-2xl"
+              onClick={cancelReply}
+              aria-label="Cancel reply"
+              title="Cancel reply"
+            >
+              <CareIcon
+                icon="l-times"
+                className="m-1 rounded-full bg-gray-400 p-1 text-white hover:bg-gray-500"
+              />
+            </button>
+          )}
+        </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..ad2e73697d5 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..6c13a724668
--- /dev/null
+++ b/src/components/Facility/PatientNotesDetailedView.tsx
@@ -0,0 +1,189 @@
+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 { PatientNotesModel, PatientNotesReplyModel } 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<PatientNotesReplyModel | 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("");
+      setReload(true);
+    }
+
+    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.child_notes.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)}
+                maxRows={10}
+              />
+            </DoctorNoteReplyPreviewCard>
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default PatientNotesDetailedView;
diff --git a/src/components/Facility/PatientNotesSlideover.tsx b/src/components/Facility/PatientNotesSlideover.tsx
index 89d38a5f168..f3c77237e04 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,
+  PatientNotesReplyModel,
 } 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,8 +44,7 @@ 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>(
+  const [reply_to, setReplyTo] = useState<PatientNotesReplyModel | 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,25 @@ 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)}
+                    maxRows={10}
+                  />
+                </DoctorNoteReplyPreviewCard>
+              )}
+            </AuthorizedChild>
+          )}
         </div>
       )}
     </div>
diff --git a/src/components/Facility/models.tsx b/src/components/Facility/models.tsx
index 79272ac3de7..8d7483320b6 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 {
@@ -581,12 +582,13 @@ export interface PatientNotesEditModel {
   note: string;
 }
 
-export interface PaitentNotesReplyModel {
+export interface PatientNotesReplyModel {
   id: string;
   note: string;
   user_type?: UserRole | "RemoteSpecialist";
   created_by_object: BaseUserModel;
   created_date: string;
+  reply_to?: string;
 }
 
 export interface PatientNotesModel {
@@ -599,7 +601,12 @@ export interface PatientNotesModel {
   created_date: string;
   last_edited_by?: BaseUserModel;
   last_edited_date?: string;
-  reply_to_object?: PaitentNotesReplyModel;
+  reply_to_object?: PatientNotesReplyModel;
+  replies: PatientNotesReplyModel[];
+  files: FileUploadModel[];
+  root_note_object?: PatientNotesReplyModel;
+  child_notes: PatientNotesReplyModel[];
+  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..248ee23f7f6 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,20 +61,30 @@ const PatientNotes = (props: PatientNotesProps) => {
       return;
     }
 
-    const { res } = await request(routes.addPatientNote, {
-      pathParams: { patientId: patientId },
-      body: {
-        note: noteField,
-        thread,
-        reply_to: reply_to?.id,
-      },
-    });
-    if (res?.status === 201) {
-      Notification.Success({ msg: "Note added successfully" });
-      setNoteField("");
-      setReload(!reload);
-      setState({ ...state, cPage: 1 });
-      setReplyTo(undefined);
+    try {
+      const { res, data } = await request(routes.addPatientNote, {
+        pathParams: { patientId: patientId },
+        body: {
+          note: noteField,
+          thread,
+          reply_to: reply_to?.id,
+        },
+      });
+      if (res?.status === 201) {
+        Notification.Success({ msg: "Note added successfully" });
+        setNoteField("");
+        setReload(!reload);
+        setState({ ...state, cPage: 1 });
+        setReplyTo(undefined);
+        return data?.id;
+      } else {
+        throw new Error("Failed to add note");
+      }
+    } catch (error) {
+      Notification.Error({
+        msg: "Failed to add note. Please try again.",
+      });
+      return undefined;
     }
   };
 
@@ -118,8 +126,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",