diff --git a/src/components/Directory/NoteCardDirectory.jsx b/src/components/Directory/NoteCardDirectory.jsx
index 7e145136..a7020732 100644
--- a/src/components/Directory/NoteCardDirectory.jsx
+++ b/src/components/Directory/NoteCardDirectory.jsx
@@ -4,43 +4,109 @@ import moment from "moment";
 import Avatar from "../common/Avatar";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import showToast from "../../services/toastService";
-import {getCachedData} from "../../slices/apiDataManager";
-import "../common/TextEditor/Editor.css"
+import { cacheData, getCachedData } from "../../slices/apiDataManager";
+import "../common/TextEditor/Editor.css";
 
-const NoteCardDirectory = ({ noteItem, contactId,setProfileContact }) => {
+const NoteCardDirectory = ({ noteItem, contactId, setProfileContact }) => {
   const [editing, setEditing] = useState(false);
-  const [ editorValue, setEditorValue ] = useState( noteItem.note );
-  const [isLoading,setIsLoading] = useState(false)
-  const handleUpdateNote= async () => {
-    try
-    {
-      console.log(editorValue)
-      setIsLoading(true)
-   const payload ={id:noteItem.id,note:editorValue,contactId:contactId}
-      
-      const response = await DirectoryRepository.UpdateNote(noteItem.id, payload);
-    setProfileContact((prev) => ({
-      ...prev,
-      notes: prev.notes.map((note) =>
-        note.id === noteItem.id ? response?.data : note
-      ),
+  const [editorValue, setEditorValue] = useState(noteItem.note);
+  const [isLoading, setIsLoading] = useState(false);
+  const [isDeleting, setIsDeleting] = useState(false);
+  const handleUpdateNote = async () => {
+    try {
+      setIsLoading(true);
+      const payload = {
+        id: noteItem.id,
+        note: editorValue,
+        contactId: contactId,
+      };
 
-    }));
-      setEditing( false );
-      setIsLoading(false)
-      showToast("Note Updated successfully", "success")
-    } catch ( error )
-    {
-      setIsLoading(false)
-      const msg = error.reponse.data.message || error.message || "Error occured during API calling."
-           showToast("Failed to update note", "error");
+      const response = await DirectoryRepository.UpdateNote(
+        noteItem.id,
+        payload
+      );
+      setProfileContact((prev) => ({
+        ...prev,
+        notes: prev.notes.map((note) =>
+          note.id === noteItem.id ? response?.data : note
+        ),
+      }));
+
+      const cached_contactProfile = getCachedData("Contact Profile");
+
+      if (
+        cached_contactProfile &&
+        cached_contactProfile.contactId === contactId
+      ) {
+        const updatedProfile = {
+          ...cached_contactProfile,
+          data: {
+            ...cached_contactProfile?.data,
+            notes: cached_contactProfile?.data?.notes.map((note) =>
+              note.id === noteItem.id ? response?.data : note
+            ),
+          },
+        };
+        cacheData("Contact Profile", updatedProfile);
+      }
+      setEditing(false);
+      setIsLoading(false);
+      showToast("Note Updated successfully", "success");
+    } catch (error) {
+      setIsLoading(false);
+      const msg =
+        error.reponse.data.message ||
+        error.message ||
+        "Error occured during API calling.";
+      showToast("Failed to update note", "error");
     }
   };
 
+  const handleDeleteNote = async () => {
+    try {
+      setIsDeleting(true);
+      const resp = await DirectoryRepository.DeleteNote(noteItem.id);
+      setProfileContact((prev) => ({
+        ...prev,
+        notes: prev.notes.filter((note) => note.id !== noteItem.id),
+      }));
 
+      const cachedContactProfile = getCachedData("Contact Profile");
+
+      if (
+        cachedContactProfile &&
+        cachedContactProfile.contactId === contactId
+      ) {
+        const updatedCache = {
+          ...cachedContactProfile,
+          data: {
+            ...cachedContactProfile?.data,
+            notes: (cachedContactProfile?.data?.notes || []).filter(
+              (note) => note.id !== noteItem.id
+            ),
+          },
+        };
+
+        cacheData("Contact Profile", updatedCache);
+      }
+      setIsDeleting(false);
+      showToast("Note Deleted Successfully", "success");
+    } catch (error) {
+      setIsDeleting(false);
+      const msg =
+        error.response?.data?.message ||
+        error.message ||
+        "Error occured during API calling";
+      showToast(msg, "error");
+    }
+  };
 
   return (
-    <div className="card p-1 shadow-sm border-1 mb-2" style={{ width: "fit-content", minWidth: "300px", borderRadius:"0px" }} key={noteItem.id} >
+    <div
+      className="card p-1 shadow-sm border-1 mb-2 conntactNote"
+      style={{ width: "100%", minWidth: "300px", borderRadius: "0px" }}
+      key={noteItem.id}
+    >
       <div className="d-flex justify-content-between align-items-center mb-1">
         <div className="d-flex align-items-center">
           <Avatar
@@ -58,38 +124,25 @@ const NoteCardDirectory = ({ noteItem, contactId,setProfileContact }) => {
             </span>
           </div>
         </div>
-
-        <div className="dropdown">
+        <div>
           <i
-            className="bx bx-dots-vertical bx-xs cursor-pointer"
-            role="button"
-            id={`dropdownMenuIcon-${noteItem.id}`}
-            data-bs-toggle="dropdown"
-            aria-expanded="false"
+            className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
+            onClick={() => setEditing(true)}
           ></i>
-
-          <ul
-            className="dropdown-menu dropdown-menu-end p-1"
-            aria-labelledby={`dropdownMenuIcon-${noteItem.id}`}
-            style={{ minWidth: "120px", fontSize: "0.85rem" }}
-          >
-            <li>
-              <button
-                className="dropdown-item py-1 px-2 small text-primary"
-                onClick={() => setEditing(true)}
-              >
-                <i className="bx bxs-edit bx-sm me-1"></i> Edit
-              </button>
-            </li>
-            <li>
-              <button
-                className="dropdown-item py-1 px-2 text-danger small"
-                onClick={()=>{}}
-              >
-                <i className="bx bx-trash bx-sm me-1"></i> Delete
-              </button>
-            </li>
-          </ul>
+          {!isDeleting && (
+            <i
+              className="bx bx-trash bx-sm me-1 text-secondary cursor-pointer"
+              onClick={handleDeleteNote}
+            ></i>
+          )}
+          {isDeleting && (
+            <div
+              class="spinner-border spinner-border-sm text-secondary"
+              role="status"
+            >
+              <span class="visually-hidden">Loading...</span>
+            </div>
+          )}
         </div>
       </div>
 
@@ -102,14 +155,21 @@ const NoteCardDirectory = ({ noteItem, contactId,setProfileContact }) => {
             onChange={setEditorValue}
             theme="snow"
             className="compact-editor"
-       
           />
           <div className="d-flex justify-content-end gap-2">
-            <span className="text-secondary cursor-pointer" aria-disabled={isLoading}  onClick={() => setEditing(false)}>
+            <span
+              className="text-secondary cursor-pointer"
+              aria-disabled={isLoading}
+              onClick={() => setEditing(false)}
+            >
               Cancel
             </span>
-            <span className="text-primary cursor-pointer" aria-disabled={isLoading}  onClick={handleUpdateNote}>
-             {isLoading ? "Please Wait...":"Submit"}
+            <span
+              className="text-primary cursor-pointer"
+              aria-disabled={isLoading}
+              onClick={handleUpdateNote}
+            >
+              {isLoading ? "Please Wait..." : "Submit"}
             </span>
           </div>
         </>