diff --git a/src/components/Directory/NotesDirectory.jsx b/src/components/Directory/NotesDirectory.jsx
index 61908853..f310bfcc 100644
--- a/src/components/Directory/NotesDirectory.jsx
+++ b/src/components/Directory/NotesDirectory.jsx
@@ -4,7 +4,6 @@ import Avatar from "../common/Avatar";
 import { useForm } from "react-hook-form";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
-import { showText } from "pdf-lib";
 import { DirectoryRepository } from "../../repositories/DirectoryRepository";
 import moment from "moment";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
@@ -19,15 +18,14 @@ const schema = z.object({
 const NotesDirectory = ({
   refetchProfile,
   isLoading,
-  contactProfile,
+  contactProfile, // This contactProfile now reliably includes firstName, middleName, lastName, and fullName
   setProfileContact,
 }) => {
   const [IsActive, setIsActive] = useState(true);
-  const { contactNotes, refetch } = useContactNotes(contactProfile?.id, true);
+  const { contactNotes, refetch } = useContactNotes(contactProfile?.id, IsActive);
 
-  const [NotesData, setNotesData] = useState();
   const [IsSubmitting, setIsSubmitting] = useState(false);
-  const [addNote, setAddNote] = useState(true);
+  const [showEditor, setShowEditor] = useState(false);
   const {
     register,
     handleSubmit,
@@ -67,102 +65,115 @@ const NotesDirectory = ({
       ) {
         const updatedProfile = {
           ...cached_contactProfile.data,
-          notes: [...(cached_contactProfile.notes || []), createdNote],
+          notes: [...(cached_contactProfile.data.notes || []), createdNote],
         };
-        cacheData("Contact Profile", updatedProfile);
+        cacheData("Contact Profile", { contactId: contactProfile?.id, data: updatedProfile });
       }
 
       setValue("note", "");
       setIsSubmitting(false);
       showToast("Note added successfully!", "success");
-      setAddNote(true);
+      setShowEditor(false);
       setIsActive(true);
+      refetch(contactProfile?.id, true);
     } catch (error) {
       setIsSubmitting(false);
       const msg =
-        error.response.data.message ||
+        error.response?.data?.message ||
         error.message ||
-        "Error occured during API calling";
+        "Error occurred during API calling";
       showToast(msg, "error");
     }
   };
 
   const onCancel = () => {
-    setValue( "note", "" );
-    
+    setValue("note", "");
+    setShowEditor(false);
   };
+
   const handleSwitch = () => {
-    setIsActive(!IsActive);
-    if (IsActive) {
-      refetch(contactProfile?.id, false);
-    }
+    setIsActive((prevIsActive) => {
+      const newState = !prevIsActive;
+      refetch(contactProfile?.id, newState);
+      return newState;
+    });
   };
 
+  // Use the fullName from contactProfile, which now includes middle and last names if available
+  const contactName = contactProfile?.fullName || contactProfile?.firstName || "Contact";
+  const noNotesMessage = `Be the first to share your insights! ${contactName} currently has no notes.`;
+
+  const notesToDisplay = IsActive ? (contactProfile?.notes || []) : (contactNotes || []);
+
   return (
-    <div className="text-start">
+    <div className="text-start mt-10">
       <div className="d-flex align-items-center justify-content-between">
-        <p className="fw-semibold m-0">Notes :</p>
+        <p className="fw-semibold m-0 ms-3">Notes :</p>
       </div>
       <div className="d-flex align-items-center justify-content-between mb-5">
-  <div className="m-0 d-flex align-items-center">
-    {contactNotes?.length > 0 ? (
-      <label className="switch switch-primary">
-        <input
-          type="checkbox"
-          className="switch-input"
-          onChange={() => handleSwitch(!IsActive)}
-          value={IsActive}
-        />
-        <span className="switch-toggle-slider">
-          <span className="switch-on"></span>
-          <span className="switch-off"></span>
-        </span>
-        <span className="switch-label">Include Deleted Notes</span>
-      </label>
-    ) : (
-      <div style={{ visibility: "hidden" }}>
-        <label className="switch switch-primary">
-          <input type="checkbox" className="switch-input" />
-          <span className="switch-toggle-slider">
-            <span className="switch-on"></span>
-            <span className="switch-off"></span>
-          </span>
-          <span className="switch-label">Include Deleted Notes</span>
-        </label>
+        <div className="m-0 d-flex align-items-center">
+          {(contactProfile?.notes?.length > 0 || contactNotes?.length > 0) && (
+            <label className="switch switch-primary">
+              <input
+                type="checkbox"
+                className="switch-input"
+                onChange={handleSwitch}
+                checked={!IsActive}
+              />
+              <span className="switch-toggle-slider">
+                <span className="switch-on"></span>
+                <span className="switch-off"></span>
+              </span>
+              <span className="switch-label">Include Deleted Notes</span>
+            </label>
+          )}
+          {!(contactProfile?.notes?.length > 0 || contactNotes?.length > 0) && (
+            <div style={{ visibility: "hidden" }}>
+              <label className="switch switch-primary">
+                <input type="checkbox" className="switch-input" />
+                <span className="switch-toggle-slider">
+                  <span className="switch-on"></span>
+                  <span className="switch-off"></span>
+                </span>
+                <span className="switch-label">Include Deleted Notes</span>
+              </label>
+            </div>
+          )}
+        </div>
+
+        {!showEditor && (
+          <div className="d-flex justify-content-end">
+            <button
+              type="button"
+              className="btn btn-sm d-flex align-items-center"
+              onClick={() => setShowEditor(true)}
+              style={{
+                color: "#6c757d",
+                backgroundColor: "transparent",
+                boxShadow: "none",
+                border: "none",
+              }}
+            >
+              <i
+                className="bx bx-plus-circle me-0"
+                style={{ fontSize: "1.5rem", color: "#6c757d" }}
+              ></i>
+              Add a Note
+            </button>
+          </div>
+        )}
+
       </div>
-    )}
-  </div>
 
-  <div className="d-flex justify-content-end">
-    <span
-       className={`btn btn-sm ${addNote ? "btn-secondary" : "btn-primary"}`}
-      onClick={() => setAddNote(!addNote)}
-    >
-      {addNote ? "Hide Editor" : "Add a Note"}
-    </span>
-  </div>
-</div>
-
-
-      {addNote && (
-        <div className="card m-2 mb-5">
+      {showEditor && (
+        <div className="card m-2 mb-5 position-relative">
           <button
             type="button"
-            class="btn  btn-close btn-secondary position-absolute top-0 end-0 m-2 mt-3 rounded-circle"
+            className="btn-close btn-secondary position-absolute top-0 end-0 m-2 mt-3 rounded-circle"
             aria-label="Close"
             style={{ backgroundColor: "#eee", color: "white" }}
-            onClick={() => setAddNote(!addNote)}
+            onClick={() => setShowEditor(false)}
           ></button>
-          {/* <div className="d-flex justify-content-end px-2">
-            <span
-              className={`btn btn-sm   ${
-                addNote ? "btn-danger" : "btn-primary"
-              }`}
-              onClick={() => setAddNote(!addNote)}
-            >
-              {addNote ? "Hide Editor" : "Add Note"}
-            </span>
-          </div> */}
           <form onSubmit={handleSubmit(onSubmit)}>
             <Editor
               value={noteValue}
@@ -171,22 +182,23 @@ const NotesDirectory = ({
               onCancel={onCancel}
               onSubmit={handleSubmit(onSubmit)}
             />
-            {errors.notes && (
+            {errors.note && (
               <p className="text-danger small mt-1">{errors.note.message}</p>
             )}
           </form>
         </div>
       )}
 
-      <div className=" justify-content-start  px-1 mt-1">
+      <div className=" justify-content-start px-1 mt-1">
         {isLoading && (
           <div className="text-center">
             {" "}
             <p>Loading...</p>{" "}
           </div>
         )}
-        {!isLoading &&
-          [...(IsActive ? contactProfile?.notes || [] : contactNotes || [])]
+        {!isLoading && notesToDisplay.length > 0 ? (
+          notesToDisplay
+            .slice()
             .reverse()
             .map((noteItem) => (
               <NoteCardDirectory
@@ -198,25 +210,17 @@ const NotesDirectory = ({
                 setProfileContact={setProfileContact}
                 key={noteItem.id}
               />
-            ))}
-
-        {IsActive && (
-          <div>
-            {!isLoading && contactProfile?.notes.length == 0 && !addNote && (
-              <div className="text-center mt-5">No Notes Found</div>
-            )}
-          </div>
-        )}
-        {!IsActive && (
-          <div>
-            {!isLoading && contactNotes.length == 0 && !addNote && (
-              <div className="text-center  mt-5">No Notes Found</div>
-            )}
-          </div>
+            ))
+        ) : (
+          !isLoading && !showEditor && (
+            <div className="text-center mt-5">
+              {noNotesMessage}
+            </div>
+          )
         )}
       </div>
     </div>
   );
 };
 
-export default NotesDirectory;
+export default NotesDirectory;
\ No newline at end of file
diff --git a/src/components/Directory/ProfileContactDirectory.jsx b/src/components/Directory/ProfileContactDirectory.jsx
index 0509db50..3a518272 100644
--- a/src/components/Directory/ProfileContactDirectory.jsx
+++ b/src/components/Directory/ProfileContactDirectory.jsx
@@ -8,9 +8,10 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   const { contactProfile, loading, refetch } = useContactProfile(contact?.id);
   const [copiedIndex, setCopiedIndex] = useState(null);
 
-  const [profileContact, setProfileContact] = useState();
+  const [profileContactState, setProfileContactState] = useState(null);
   const [expanded, setExpanded] = useState(false);
-  const description = contactProfile?.description || "";
+
+  const description = profileContactState?.description || "";
   const limit = 500;
 
   const toggleReadMore = () => setExpanded(!expanded);
@@ -19,14 +20,51 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   const displayText = expanded
     ? description
     : description.slice(0, limit) + (isLong ? "..." : "");
+
   useEffect(() => {
-    setProfileContact(contactProfile);
-  }, [contactProfile]);
+    if (contactProfile) {
+      const names = (contact?.name || "").trim().split(" ");
+      let firstName = "";
+      let middleName = "";
+      let lastName = "";
+      let fullName = contact?.name || "";
+
+      // Logic to determine first, middle, and last names
+      if (names.length === 1) {
+        firstName = names[0];
+      } else if (names.length === 2) {
+        firstName = names[0];
+        lastName = names[1];
+      } else if (names.length >= 3) {
+        firstName = names[0];
+        middleName = names[1]; // This was an error in the original prompt, corrected to names[1]
+        lastName = names[names.length - 1];
+        // Reconstruct full name to be precise with spacing
+        fullName = `${firstName} ${middleName ? middleName + ' ' : ''}${lastName}`;
+      } else {
+        // Fallback if no names or empty string
+        firstName = "Contact";
+        fullName = "Contact";
+      }
+
+
+      setProfileContactState({
+        ...contactProfile,
+        firstName: contactProfile.firstName || firstName,
+        // Adding middleName and lastName to the state for potential future use or more granular access
+        middleName: contactProfile.middleName || middleName,
+        lastName: contactProfile.lastName || lastName,
+        fullName: contactProfile.fullName || fullName, // Prioritize fetched fullName, fallback to derived
+      });
+    }
+  }, [contactProfile, contact?.name]);
+
   const handleCopy = (email, index) => {
     navigator.clipboard.writeText(email);
     setCopiedIndex(index);
-    setTimeout(() => setCopiedIndex(null), 2000); // Reset after 2 seconds
+    setTimeout(() => setCopiedIndex(null), 2000);
   };
+
   return (
     <div className="p-1">
       <div className="text-center m-0 p-0">
@@ -47,36 +85,34 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
           <div className="d-flex flex-column text-start ms-1">
             <span className="m-0 fw-semibold">{contact?.name}</span>
             <small className="text-secondary small-text">
-              {contactProfile?.designation}
+              {profileContactState?.designation}
             </small>
           </div>
         </div>
-        <div className="row">
+        <div className="row ms-9">
           <div className="col-12 col-md-6 d-flex flex-column text-start">
-            {contactProfile?.contactEmails?.length > 0 && (
-              <div className="d-flex mb-2">
-                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
-                  <i className="bx bx-envelope bx-xs me-1"></i>
-                  <p className="m-0">Email :</p>
-                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
-                  <i className="bx bx-envelope bx-xs me-1"></i>
-                  <p className="m-0">Email :</p>
+            {profileContactState?.contactEmails?.length > 0 && (
+              <div className="d-flex mb-2 align-items-start">
+                <div
+                  className="d-flex align-items-start"
+                  style={{ width: "100px", minWidth: "130px" }}
+                >
+                  <span className="d-flex">
+                    <i className="bx bx-envelope bx-xs me-2 mt-1"></i>
+                    <span>Email</span>
+                  </span>
+                  <span style={{ marginLeft: "45px" }}>:</span>
                 </div>
+
                 <div style={{ flex: 1 }}>
                   <ul className="list-unstyled mb-0">
-                    {contactProfile.contactEmails.map((email, idx) => (
+                    {profileContactState.contactEmails.map((email, idx) => (
                       <li className="d-flex align-items-center mb-1" key={idx}>
-                        <span className="me-1 flex-grow text-break overflow-wrap">
+                        <span className="me-1 text-break overflow-wrap">
                           {email.emailAddress}
                         </span>
                         <i
-                          className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx
-                            ? "text-secondary"
-                            : "text-primary"
-                            }`}
-                          className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx
-                            ? "text-secondary"
-                            : "text-primary"
+                          className={`bx bx-copy-alt cursor-pointer bx-xs text-start ${copiedIndex === idx ? "text-secondary" : "text-primary"
                             }`}
                           title={copiedIndex === idx ? "Copied!" : "Copy Email"}
                           style={{ flexShrink: 0 }}
@@ -89,21 +125,22 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               </div>
             )}
 
-            {contactProfile?.contactPhones?.length > 0 && (
-              <div className="d-flex mb-2">
-                <div
-                  style={{ width: "100px", minWidth: "110px" }}
-                  className="d-flex align-items-center"
-                >
-                  <i className="bx bx-phone bx-xs me-1"></i>
-                  <p className="m-0">Phone :</p>
+            {profileContactState?.contactPhones?.length > 0 && (
+              <div className="d-flex mb-2 align-items-start">
+                <div className="d-flex" style={{ minWidth: "130px" }}>
+                  <span className="d-flex align-items-center">
+                    <i className="bx bx-phone bx-xs me-2"></i>
+                    <span>Phone</span>
+                  </span>
+                  <span style={{ marginLeft: "40px" }}>:</span>
                 </div>
+
                 <div>
                   <ul className="list-inline mb-0">
-                    {contactProfile.contactPhones.map((phone, idx) => (
+                    {profileContactState.contactPhones.map((phone, idx) => (
                       <li className="list-inline-item me-1" key={idx}>
                         {phone.phoneNumber}
-                        {idx < contactProfile.contactPhones.length - 1 && ","}
+                        {idx < profileContactState.contactPhones.length - 1 && ","}
                       </li>
                     ))}
                   </ul>
@@ -111,89 +148,92 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               </div>
             )}
 
-
-            {contactProfile?.createdAt && (
-              <div className="d-flex  mb-2">
-                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
-                  <i className="bx bx-calendar-week bx-xs me-1"></i>
-                  <p className="m-0">Created :</p>
-                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
-                  <i className="bx bx-calendar-week bx-xs me-1"></i>
-                  <p className="m-0">Created :</p>
+            {profileContactState?.createdAt && (
+              <div className="d-flex mb-2 align-items-start">
+                <div className="d-flex" style={{ minWidth: "130px" }}>
+                  <span className="d-flex align-items-center">
+                    <i className="bx bx-calendar-week bx-xs me-2"></i>
+                    <span>Created</span>
+                  </span>
+                  <span style={{ marginLeft: "30px" }}>:</span>
                 </div>
+
                 <div className="d-flex align-items-center">
-                  <li className="list-inline-item">
-                    {moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
-                  </li>
+                  <span>
+                    {moment(profileContactState.createdAt).format("MMMM DD, YYYY")}
+                  </span>
                 </div>
               </div>
             )}
-            {contactProfile?.address && (
-              <div className="d-flex mb-2">
-                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
-                  <i className="bx bx-map bx-xs me-1"></i>
-                  <p className="m-0">Location :</p>
-                <div style={{ width: "100px", minWidth: "110px" }} className="d-flex align-items-center">
-                  <i className="bx bx-map bx-xs me-1"></i>
-                  <p className="m-0">Location :</p>
-                </div>
-                <div className="d-flex align-items-center">
-                  <span className="text-break small">
-                    {contactProfile.address}
+
+            {profileContactState?.address && (
+              <div className="d-flex mb-2 align-items-start">
+                <div className="d-flex" style={{ minWidth: "130px" }}>
+                  <span className="d-flex align-items-start">
+                    <i className="bx bx-map bx-xs me-2 mt-1"></i>
+                    <span>Location</span>
                   </span>
+                  <span style={{ marginLeft: "26px" }}>:</span>
+                </div>
+                <div>
+                  <span className="text-break small">{profileContactState.address}</span>
                 </div>
               </div>
             )}
           </div>
 
           <div className="col-12 col-md-6 d-flex flex-column text-start">
-            {contactProfile?.organization && (
-              <div className="d-flex mb-2">
-                <div style={{ width: "100px", minWidth: "130px" }} className="d-flex align-items-center">
-                  <i className="fa-solid fa-briefcase me-1"></i>
-                  <p className="m-0">Organization :</p>
-                <div style={{ width: "100px", minWidth: "130px" }} className="d-flex align-items-center">
-                  <i className="fa-solid fa-briefcase me-1"></i>
-                  <p className="m-0">Organization :</p>
+            {profileContactState?.organization && (
+              <div className="d-flex mb-2 align-items-start">
+                <div className="d-flex" style={{ minWidth: "130px" }}>
+                  <span className="d-flex align-items-center">
+                    <i className="fa-solid fa-briefcase me-2"></i>
+                    <span>Organization</span>
+                  </span>
+                  <span className="ms-2">:</span>
                 </div>
+
                 <div className="d-flex align-items-center">
                   <span style={{ wordBreak: "break-word" }}>
-                    {contactProfile.organization}
+                    {profileContactState.organization}
                   </span>
                 </div>
               </div>
             )}
-            {contactProfile?.contactCategory && (
-              <div className="d-flex mb-2">
-                <div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
-                  <i className="bx bx-user bx-xs me-1"></i>
-                  <p className="m-0">Category :</p>
-                <div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
-                  <i className="bx bx-user bx-xs me-1"></i>
-                  <p className="m-0">Category :</p>
+
+            {profileContactState?.contactCategory && (
+              <div className="d-flex mb-2 align-items-start">
+                <div className="d-flex" style={{ minWidth: "130px" }}>
+                  <span className="d-flex align-items-center">
+                    <i className="bx bx-user bx-xs me-2"></i>
+                    <span>Category</span>
+                  </span>
+                  <span style={{ marginLeft: "28px" }}>:</span>
                 </div>
+
                 <div>
                   <ul className="list-inline mb-0">
                     <li className="list-inline-item">
-                      {contactProfile.contactCategory.name}
+                      {profileContactState.contactCategory.name}
                     </li>
                   </ul>
                 </div>
               </div>
             )}
-            {contactProfile?.tags?.length > 0 && (
-            {contactProfile?.tags?.length > 0 && (
-              <div className="d-flex mb-2">
-                <div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
-                  <i className="fa-solid fa-tag me-2"></i>
-                  <p className="m-0">Tags :</p>
-                <div style={{ width: "130px", minWidth: "100px" }} className="d-flex align-items-center">
-                  <i className="fa-solid fa-tag me-2"></i>
-                  <p className="m-0">Tags :</p>
+
+            {profileContactState?.tags?.length > 0 && (
+              <div className="d-flex mb-2 align-items-start">
+                <div className="d-flex" style={{ minWidth: "130px" }}>
+                  <span className="d-flex align-items-center">
+                    <i className="fa-solid fa-tag me-2"></i>
+                    <span>Tags</span>
+                  </span>
+                  <span style={{ marginLeft: "60px" }}>:</span>
                 </div>
+
                 <div>
                   <ul className="list-inline mb-0">
-                    {contactProfile.tags.map((tag, index) => (
+                    {profileContactState.tags.map((tag, index) => (
                       <li key={index} className="list-inline-item">
                         {tag.name}
                       </li>
@@ -203,84 +243,76 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
               </div>
             )}
 
-            {contactProfile?.buckets?.length > 0 && (
-              <div className="d-flex">
-              <div className="d-flex">
-                {contactProfile?.contactEmails?.length > 0 && (
-                  <div className="d-flex mb-2 align-items-center">
-                    <div style={{ width: "100px", minWidth: "130px" }}>
-                      <p className="m-0">
-                        <i className="bx bx-layer me-0"></i>Buckets :
-                      </p>
-                    <div style={{ width: "100px", minWidth: "130px" }}>
-                      <p className="m-0">
-                        <i className="bx bx-layer me-0"></i>Buckets :
-                      </p>
-                    </div>
-                    <div>
-                      <ul className="list-inline mb-0">
-                        {contactProfile.buckets.map((bucket) => (
-                          <li className="list-inline-item me-2" key={bucket.id}>
-                            <span className="badge bg-label-primary my-1">
-                              {bucket.name}
-                            </span>
-                          </li>
-                        ))}
-                      </ul>
-                    </div>
-                  </div>
-                )}
+            {profileContactState?.buckets?.length > 0 && (
+              <div className="d-flex mb-2 align-items-start">
+                <div className="d-flex" style={{ minWidth: "130px" }}>
+                  <span className="d-flex align-items-center">
+                    <i className="bx bx-layer me-1"></i>
+                    <span>Buckets</span>
+                  </span>
+                  <span style={{ marginLeft: "35px" }}>:</span>
+                </div>
+
+                <div>
+                  <ul className="list-inline mb-0">
+                    {profileContactState.buckets.map((bucket) => (
+                      <li className="list-inline-item me-2" key={bucket.id}>
+                        <span className="badge bg-label-primary my-1">
+                          {bucket.name}
+                        </span>
+                      </li>
+                    ))}
+                  </ul>
+                </div>
               </div>
             )}
-
-
           </div>
+
+          {profileContactState?.projects?.length > 0 && (
+            <div className="d-flex mb-2 align-items-start">
+              <div className="d-flex" style={{ minWidth: "130px" }}>
+                <span className="d-flex align-items-center">
+                  <i className="bx bx-building-house me-1"></i>
+                  <span>Projects</span>
+                </span>
+                <span style={{ marginLeft: "28px" }}>:</span>
+              </div>
+
+              <div className="text-start">
+                <ul className="list-inline mb-0">
+                  {profileContactState.projects.map((project, index) => (
+                    <li className="list-inline-item me-2" key={project.id}>
+                      {project.name}
+                      {index < profileContactState.projects.length - 1 && ","}
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+          )}
         </div>
-        {contactProfile?.projects?.length > 0 && (
-          <div className="d-flex mb-2 align-items-start">
-            <div style={{ minWidth: "110px" }}>
-              <p className="m-0 text-start">
-                <i className="bx bx-building-house me-0"></i>Projects :
-              </p>
-            <div style={{ minWidth: "110px" }}>
-              <p className="m-0 text-start">
-                <i className="bx bx-building-house me-0"></i>Projects :
-              </p>
-            </div>
-            <div className="text-start">
-              <ul className="list-inline mb-0">
-                {contactProfile.projects.map((project, index) => (
-                  <li className="list-inline-item me-2" key={project.id}>
-                    {project.name}
-                    {index < contactProfile.projects.length - 1 && ","}
-                  </li>
-                ))}
-              </ul>
-            </div>
+
+        <div className="d-flex mb-2 align-items-start" style={{ marginLeft: "3rem" }}>
+          <div className="d-flex" style={{ minWidth: "130px" }}>
+            <span className="d-flex align-items-start">
+              <i className="bx bx-book me-1"></i>
+              <span>Description</span>
+            </span>
+            <span style={{ marginLeft: "10px" }}>:</span>
           </div>
-        )}
 
-
-
-        <div className="d-flex mb-2 align-items-start">
-          <div style={{ minWidth: "110px" }}>
-            <p className="m-0 text-start">
-              <i className="bx bx-book me-0"></i>Description :
-            </p>
-          <div style={{ minWidth: "110px" }}>
-            <p className="m-0 text-start">
-              <i className="bx bx-book me-0"></i>Description :
-            </p>
-          </div>
           <div className="text-start">
             {displayText}
             {isLong && (
-              <span
-                onClick={toggleReadMore}
-                className="text-primary mx-1 cursor-pointer"
-              >
-                {expanded ? "Read less" : "Read more"}
-              </span>
+              <>
+                <br />
+                <span
+                  onClick={toggleReadMore}
+                  className="text-primary mx-1 cursor-pointer"
+                >
+                  {expanded ? "Read less" : "Read more"}
+                </span>
+              </>
             )}
           </div>
         </div>
@@ -291,12 +323,12 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
         <NotesDirectory
           refetchProfile={refetch}
           isLoading={loading}
-          contactProfile={profileContact}
-          setProfileContact={setProfileContact}
+          contactProfile={profileContactState}
+          setProfileContact={setProfileContactState}
         />
       </div>
     </div>
   );
 };
 
-export default ProfileContactDirectory;
+export default ProfileContactDirectory;
\ No newline at end of file