diff --git a/src/components/Common/DiscussionNotesEditor.tsx b/src/components/Common/DiscussionNotesEditor.tsx
index 3c9a258bd66..be0ca45dea6 100644
--- a/src/components/Common/DiscussionNotesEditor.tsx
+++ b/src/components/Common/DiscussionNotesEditor.tsx
@@ -157,8 +157,8 @@ const DiscussionNotesEditor: React.FC<DiscussionNotesEditorProps> = ({
       <div className="relative">
         <div
           className={classNames(
-            "rounded-t-lg border border-x-gray-300 bg-white shadow-sm transition-all duration-200",
-            isPreviewMode && "bg-gray-50",
+            "rounded-t-lg border border-x-secondary-300 bg-white shadow-sm transition-all duration-200",
+            isPreviewMode && "bg-secondary-50",
             className,
           )}
         >
@@ -181,7 +181,7 @@ const DiscussionNotesEditor: React.FC<DiscussionNotesEditorProps> = ({
             />
           )}
           {fileUpload.files.length > 0 && (
-            <div className="flex flex-wrap gap-3 border-t border-gray-200 bg-gray-50/50 px-3 py-1">
+            <div className="flex flex-wrap gap-3 border-t border-secondary-200 bg-secondary-50/50 px-3 py-1">
               {fileUpload.files.map((file, index) => (
                 <FilePreviewCard
                   key={index}
@@ -195,18 +195,18 @@ const DiscussionNotesEditor: React.FC<DiscussionNotesEditorProps> = ({
         </div>
 
         {/* toolbar*/}
-        <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 text-gray-700">
+        <div className="flex items-center space-x-1 rounded-b-md border border-secondary-300 bg-secondary-100 pl-2 sm:space-x-2">
+          <label className="tooltip cursor-pointer rounded bg-secondary-200/50 p-1 text-secondary-700">
             <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>
+          <div className="mx-2 h-6 border-l border-secondary-400"></div>
           <button
             onClick={() => fileUpload.handleCameraCapture()}
-            className="tooltip rounded bg-gray-200/50 p-1"
+            className="tooltip rounded bg-secondary-200/50 p-1"
           >
             <CareIcon icon="l-camera" className="text-lg" />
             <span className="tooltip-text tooltip-top -translate-x-1/2">
@@ -215,17 +215,17 @@ const DiscussionNotesEditor: React.FC<DiscussionNotesEditorProps> = ({
           </button>
           <button
             onClick={() => fileUpload.handleAudioCapture()}
-            className="tooltip rounded bg-gray-200/50 p-1"
+            className="tooltip rounded bg-secondary-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>
+          <div className="mx-2 h-6 border-l border-secondary-400"></div>
           <button
             onClick={handleMentionButtonClick}
-            className="tooltip rounded bg-gray-200/50 p-1"
+            className="tooltip rounded bg-secondary-200/50 p-1"
           >
             <CareIcon icon="l-at" className="text-lg" />
             <span className="tooltip-text tooltip-top -translate-x-1/2">
diff --git a/src/components/Common/FilePreviewCard.tsx b/src/components/Common/FilePreviewCard.tsx
index fc8da2f70fb..feac800a479 100644
--- a/src/components/Common/FilePreviewCard.tsx
+++ b/src/components/Common/FilePreviewCard.tsx
@@ -50,7 +50,7 @@ export function FilePreviewCard({
   return (
     <div
       className={classNames(
-        "relative mt-1 h-20 w-20 cursor-pointer overflow-hidden rounded-lg bg-gray-100 shadow-sm transition-all duration-200 hover:bg-gray-200/50",
+        "relative mt-1 h-20 w-20 cursor-pointer overflow-hidden rounded-lg bg-secondary-100 shadow-sm transition-all duration-200 hover:bg-secondary-200/50",
         onClick && "cursor-pointer",
       )}
       onClick={onClick}
@@ -61,7 +61,7 @@ export function FilePreviewCard({
             e.stopPropagation();
             onRemove(index);
           }}
-          className="absolute right-0 top-0 z-10 h-5 w-5 rounded-full bg-gray-300 text-gray-800 transition-colors duration-200 hover:bg-gray-400 hover:text-white"
+          className="absolute right-0 top-0 z-10 h-5 w-5 rounded-full bg-secondary-300 text-secondary-800 transition-colors duration-200 hover:bg-secondary-400 hover:text-white"
         >
           <CareIcon
             icon="l-times-circle"
@@ -91,7 +91,7 @@ export function FilePreviewCard({
             icon={isPlaying ? "l-pause" : "l-play"}
             className="h-6 w-6 text-primary-600"
           />
-          <span className="mt-1 max-h-[2.5em] w-full overflow-hidden text-ellipsis break-words text-center text-xs text-gray-600">
+          <span className="mt-1 max-h-[2.5em] w-full overflow-hidden text-ellipsis break-words text-center text-xs text-secondary-600">
             {fileName}
           </span>
         </div>
@@ -99,9 +99,9 @@ export function FilePreviewCard({
         <div className="flex h-full w-full flex-col items-center justify-center p-2">
           <CareIcon
             icon={icons[fileType]}
-            className="shrink-0 text-2xl text-gray-600"
+            className="shrink-0 text-2xl text-secondary-600"
           />
-          <span className="mt-1 max-h-[2.5em] w-full overflow-hidden text-ellipsis break-words text-center text-xs text-gray-600">
+          <span className="mt-1 max-h-[2.5em] w-full overflow-hidden text-ellipsis break-words text-center text-xs text-secondary-600">
             {fileName}
           </span>
         </div>
diff --git a/src/components/Common/MentionDropdown.tsx b/src/components/Common/MentionDropdown.tsx
index c1206090a61..bcce137a3b9 100644
--- a/src/components/Common/MentionDropdown.tsx
+++ b/src/components/Common/MentionDropdown.tsx
@@ -61,30 +61,25 @@ const MentionsDropdown: React.FC<MentionsDropdownProps> = ({
       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 + " ",
-          });
-        }
+        const selectedUser =
+          selectedIndex !== null
+            ? filteredUsers[selectedIndex]
+            : filteredUsers[0];
+
+        onSelect({
+          id: selectedUser.id.toString(),
+          username: selectedUser.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);
@@ -111,17 +106,22 @@ const MentionsDropdown: React.FC<MentionsDropdownProps> = ({
       role="listbox"
       aria-label="User mentions"
     >
-      {loading && (
-        <div className="p-2 text-gray-500" role="status" aria-live="polite">
+      {loading ? (
+        <div
+          className="p-2 text-secondary-500"
+          role="status"
+          aria-live="polite"
+        >
           <span className="inline-block animate-spin">⌛</span> Loading users...
         </div>
-      )}
-      {filteredUsers.length > 0 && !loading ? (
+      ) : filteredUsers.length > 0 ? (
         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"
+              index === selectedIndex
+                ? "bg-secondary-100"
+                : "hover:bg-secondary-100"
             }`}
             role="option"
             aria-selected={index === selectedIndex}
@@ -143,8 +143,12 @@ const MentionsDropdown: React.FC<MentionsDropdownProps> = ({
           </div>
         ))
       ) : (
-        <div className="p-2 text-gray-500" role="status" aria-live="polite">
-          No users found
+        <div
+          className="p-2 text-secondary-500"
+          role="status"
+          aria-live="polite"
+        >
+          {filter ? "No matching users found" : "Type to search users"}
         </div>
       )}
     </div>
diff --git a/src/components/Common/NotePreview.tsx b/src/components/Common/NotePreview.tsx
index f603945133c..39667581c1e 100644
--- a/src/components/Common/NotePreview.tsx
+++ b/src/components/Common/NotePreview.tsx
@@ -7,18 +7,18 @@ import { UserBareMinimum } from "@/components/Users/models";
 import { formatDisplayName } from "@/Utils/utils";
 
 const UserCard = ({ user }: { user: UserBareMinimum }) => (
-  <div className="z-10 flex w-56 items-center space-x-3 rounded-lg bg-gray-200 px-3 pb-3 shadow-lg">
+  <div className="z-10 flex w-56 items-center space-x-3 rounded-lg bg-secondary-200 px-3 pb-3 shadow-lg">
     <Avatar
       name={formatDisplayName(user)}
       imageUrl={user.read_profile_picture_url}
       className="h-12 w-12 rounded-full text-black/50"
     />
     <div className="space-y-0">
-      <h3 className="text-sm font-semibold text-gray-800">
+      <h3 className="text-sm font-semibold text-secondary-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>
+      <p className="text-xs text-secondary-500">@{user.username}</p>
+      <p className="text-xs text-secondary-500">{user.user_type}</p>
     </div>
   </div>
 );
@@ -99,7 +99,7 @@ const NotePreview = ({
           }}
         >
           <UserCard user={mentionedUsersMap[hoveredUserData.username]} />
-          <div className="absolute left-2 -bottom-1 h-4 w-4 rotate-45 transform bg-gray-200"></div>
+          <div className="absolute left-2 -bottom-1 h-4 w-4 rotate-45 transform bg-secondary-200"></div>
         </div>
       )}
     </div>
diff --git a/src/components/Facility/DoctorNoteReplyPreviewCard.tsx b/src/components/Facility/DoctorNoteReplyPreviewCard.tsx
index b3dd8a2a51a..ba417f93a74 100644
--- a/src/components/Facility/DoctorNoteReplyPreviewCard.tsx
+++ b/src/components/Facility/DoctorNoteReplyPreviewCard.tsx
@@ -25,7 +25,7 @@ const DoctorNoteReplyPreviewCard = ({
     return children;
   }
   return (
-    <div className="mt-3 flex flex-col rounded-lg border border-gray-300 bg-gray-200/50 pt-2 text-gray-800">
+    <div className="mt-3 flex flex-col rounded-lg border border-secondary-300 bg-secondary-200/50 pt-2 text-secondary-800">
       <div className="flex flex-col">
         <div className="flex justify-between pl-3">
           <div className="flex gap-2">
@@ -36,17 +36,17 @@ const DoctorNoteReplyPreviewCard = ({
             />
             <div>
               <div>
-                <span className="text-sm font-semibold text-gray-700">
+                <span className="text-sm font-semibold text-secondary-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">
+                  <span className="pl-2 text-sm text-secondary-700">
                     {`(${USER_TYPES_MAP[parentNote.user_type]})`}
                   </span>
                 )}
               </div>
-              <div className="text-xs text-gray-600">
+              <div className="text-xs text-secondary-600">
                 <div className="tooltip inline">
                   <span className="tooltip-text tooltip-bottom">
                     {formatDateTime(parentNote.created_date)}
@@ -66,12 +66,12 @@ const DoctorNoteReplyPreviewCard = ({
             >
               <CareIcon
                 icon="l-times"
-                className="m-1 rounded-full bg-gray-400 p-1 text-white hover:bg-gray-500"
+                className="m-1 rounded-full bg-secondary-400 p-1 text-white hover:bg-secondary-500"
               />
             </button>
           )}
         </div>
-        <div className="max-h-14 overflow-hidden pb-2 pl-14 text-sm text-gray-700">
+        <div className="max-h-14 overflow-hidden pb-2 pl-14 text-sm text-secondary-700">
           <NotePreview initialNote={parentNote.note} />
         </div>
       </div>
diff --git a/src/components/Facility/PatientNoteCard.tsx b/src/components/Facility/PatientNoteCard.tsx
index 56ad0cb6c7d..b36be904ae2 100644
--- a/src/components/Facility/PatientNoteCard.tsx
+++ b/src/components/Facility/PatientNoteCard.tsx
@@ -132,7 +132,7 @@ const PatientNoteCard = ({
       <audio ref={audioRef} onEnded={() => setIsPlaying(null)} />
       <div
         className={classNames(
-          "group flex flex-col rounded-lg border border-gray-300 bg-white px-3 py-1 text-gray-800",
+          "group flex flex-col rounded-lg border border-secondary-300 bg-white px-3 py-1 text-secondary-800",
           note.user_type === "RemoteSpecialist" && "border-primary-400",
         )}
       >
@@ -163,7 +163,7 @@ const PatientNoteCard = ({
                       onClick={() => {
                         setIsEditing(true);
                       }}
-                      className="bg-gray-100 p-2"
+                      className="bg-secondary-100 p-2"
                     >
                       <CareIcon icon="l-pen" className="h-4 w-4" />
                     </ButtonV2>
@@ -174,7 +174,7 @@ const PatientNoteCard = ({
                     onClick={() => {
                       setReplyTo && setReplyTo(note);
                     }}
-                    className="bg-gray-100 p-2"
+                    className="bg-secondary-100 p-2"
                   >
                     <CareIcon icon="l-corner-up-left-alt" className="h-4 w-4" />
                   </ButtonV2>
@@ -207,7 +207,7 @@ const PatientNoteCard = ({
                 </div>
               </div>
             ) : (
-              <div className="text-xs text-gray-600">
+              <div className="text-xs text-secondary-600">
                 <div className="tooltip inline">
                   <span className="tooltip-text tooltip-bottom">
                     {formatDateTime(note.created_date)}
@@ -258,7 +258,7 @@ const PatientNoteCard = ({
                 if (allowThreadView && setThreadViewNote)
                   setThreadViewNote(note.id);
               }}
-              className={`pl-11 text-sm text-gray-700 ${allowThreadView ? "cursor-pointer" : ""}`}
+              className={`pl-11 text-sm text-secondary-700 ${allowThreadView ? "cursor-pointer" : ""}`}
             >
               <NotePreview
                 initialNote={noteField}
@@ -280,8 +280,8 @@ const PatientNoteCard = ({
                   />
                 ))}
               </div>
-              {mode == "thread-view" && note.replies.length > 0 && (
-                <div className="mt-2 flex items-center text-xs text-gray-500">
+              {mode == "thread-view" && note.child_notes.length > 0 && (
+                <div className="mt-2 flex items-center text-xs text-secondary-500">
                   <CareIcon icon="l-corner-down-right" className="h-3 w-3" />
                   {note.child_notes.length}{" "}
                   {note.child_notes.length === 1 ? "Reply" : "Replies"}
diff --git a/src/components/Facility/PatientNotesDetailedView.tsx b/src/components/Facility/PatientNotesDetailedView.tsx
index 5cb98adf967..8f04a3b56ca 100644
--- a/src/components/Facility/PatientNotesDetailedView.tsx
+++ b/src/components/Facility/PatientNotesDetailedView.tsx
@@ -125,7 +125,7 @@ const PatientNotesDetailedView = (props: Props) => {
   }
 
   return (
-    <div className="flex w-full flex-col overflow-hidden rounded-lg border border-gray-300 bg-white sm:w-[500px]">
+    <div className="flex w-full flex-col overflow-hidden rounded-lg border border-secondary-300 bg-white sm:w-[500px]">
       {state && (
         <div className="flex h-full flex-col">
           <div className="px-3 pt-2">
@@ -150,7 +150,7 @@ const PatientNotesDetailedView = (props: Props) => {
             <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">
+                <div className="text-sm text-secondary-500">
                   {state.child_notes.length}{" "}
                   {state.child_notes.length > 1 ? "replies" : "reply"}
                 </div>
@@ -185,9 +185,11 @@ const PatientNotesDetailedView = (props: Props) => {
                   <div className="flex flex-col items-center gap-2">
                     <CareIcon
                       icon="l-comment-alt"
-                      className="text-4xl text-gray-400"
+                      className="text-4xl text-secondary-400"
                     />
-                    <h4 className="text-lg text-gray-500">No replies yet</h4>
+                    <h4 className="text-lg text-secondary-500">
+                      No replies yet
+                    </h4>
                   </div>
                 </div>
               )}
diff --git a/src/components/Patient/PatientNotes.tsx b/src/components/Patient/PatientNotes.tsx
index d1f4bebc02b..144f4e7a66a 100644
--- a/src/components/Patient/PatientNotes.tsx
+++ b/src/components/Patient/PatientNotes.tsx
@@ -125,8 +125,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-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">
+      <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">
           {keysOf(PATIENT_NOTES_THREADS).map((current) => (
             <button
               id={`patient-note-tab-${current}`}
diff --git a/src/hooks/useFileManager.tsx b/src/hooks/useFileManager.tsx
index ebcc747de3a..d670053e0d5 100644
--- a/src/hooks/useFileManager.tsx
+++ b/src/hooks/useFileManager.tsx
@@ -225,10 +225,21 @@ export default function useFileManager(
   const urlCache = new Map<string, { url: string; timestamp: number }>();
   const CACHE_DURATION = 5 * 60 * 1000; // 5 min
 
+  const cleanExpiredCache = () => {
+    const now = Date.now();
+    for (const [key, value] of urlCache.entries()) {
+      if (now - value.timestamp >= CACHE_DURATION) {
+        urlCache.delete(key);
+      }
+    }
+  };
+
   const getSignedUrl = async (file: FileUploadModel) => {
     const cacheKey = `${file.id}-${file.associating_id}`;
     const cached = urlCache.get(cacheKey);
 
+    cleanExpiredCache();
+
     if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
       return cached.url;
     }