diff --git a/src/components/Directory/ManageBucket.jsx b/src/components/Directory/ManageBucket.jsx
index ef8b5e54..bf48d8fe 100644
--- a/src/components/Directory/ManageBucket.jsx
+++ b/src/components/Directory/ManageBucket.jsx
@@ -12,13 +12,12 @@ import EmployeeList from "./EmployeeList";
 import { useAllEmployees, useEmployees } from "../../hooks/useEmployees";
 import { useSortableData } from "../../hooks/useSortableData";
 import ConfirmModal from "../common/ConfirmModal";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission";
-import {DIRECTORY_ADMIN, DIRECTORY_MANAGER} from "../../utils/constants";
-import {useProfile} from "../../hooks/useProfile";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
+import { DIRECTORY_ADMIN, DIRECTORY_MANAGER } from "../../utils/constants";
+import { useProfile } from "../../hooks/useProfile";
 
-const ManageBucket = () =>
-{
-  const {profile} =useProfile()
+const ManageBucket = () => {
+  const { profile } = useProfile();
   const [bucketList, setBucketList] = useState([]);
   const { employeesList } = useAllEmployees(false);
   const [selectedEmployee, setSelectEmployee] = useState([]);
@@ -27,9 +26,9 @@ const ManageBucket = () =>
   const [isSubmitting, setSubmitting] = useState(false);
   const [selected_bucket, select_bucket] = useState(null);
   const [deleteBucket, setDeleteBucket] = useState(null);
-  const [ searchTerm, setSearchTerm ] = useState( "" );
-  const DirManager = useHasUserPermission( DIRECTORY_MANAGER )
-  const DirAdmin = useHasUserPermission(DIRECTORY_ADMIN)
+  const [searchTerm, setSearchTerm] = useState("");
+  const DirManager = useHasUserPermission(DIRECTORY_MANAGER);
+  const DirAdmin = useHasUserPermission(DIRECTORY_ADMIN);
   const {
     items: sortedBuckteList,
     requestSort,
@@ -228,7 +227,7 @@ const ManageBucket = () =>
         <div className="d-flex justify-content-center">
           <p className="fs-6 fw-semibold m-0">Manage Buckets</p>
         </div>
-        <div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-sm-1 align-items-center">
+        <div className="d-flex justify-content-between px-2 px-sm-0 mt-5 mt-3 align-items-center ">
           {action_bucket ? (
             <i
               className={`fa-solid fa-arrow-left fs-5 cursor-pointer`}
@@ -255,7 +254,7 @@ const ManageBucket = () =>
 
           <button
             type="button"
-            className={`btn btn-xs btn-primary ms-auto ${
+            className={`btn  btn-sm btn-primary ms-auto ${
               action_bucket ? "d-none" : ""
             }`}
             onClick={() => setAction_bucket(true)}
@@ -266,9 +265,9 @@ const ManageBucket = () =>
         </div>
         <div>
           {!action_bucket ? (
-            <div className="table-responsive text-nowrap pt-1 px-2 px-sm-0">
+            <div className="table-responsive text-nowrap pt-1 px-2 px-sm-0 mt-3">
               <table className="table  px-2">
-                <thead className="p-0 table-light">
+                <thead className="p-0">
                   <tr className="p-0">
                     <th
                       colSpan={2}
@@ -332,29 +331,28 @@ const ManageBucket = () =>
                         <td
                           className="text-start d-none d-sm-table-cell text-truncate"
                           style={{
-                            maxWidth: "300px", 
+                            maxWidth: "300px",
                             whiteSpace: "wrap",
                             overflow: "hidden",
                             textOverflow: "ellipsis",
                           }}
-                          title={bucket.description} 
+                          title={bucket.description}
                         >
                           {bucket.description}
                         </td>
                         <td>{bucket.numberOfContacts}</td>
                         <td className="justify-content-center">
-                        
-                            {(DirManager ||
+                          {(DirManager ||
                             DirAdmin ||
                             bucket?.createdBy?.id ===
                               profile?.employeeInfo?.id) && (
                             <div className="d-flex justify-content-center align-items-center gap-2">
-                                <i
+                              <i
                                 className="bx bx-edit bx-sm text-primary cursor-pointer "
                                 onClick={() => {
                                   select_bucket(bucket);
                                   setAction_bucket(true);
-                              }}
+                                }}
                               ></i>
                               <i
                                 className="bx bx-trash bx-sm text-danger cursor-pointer"
diff --git a/src/components/Directory/NoteCardDirectory.jsx b/src/components/Directory/NoteCardDirectory.jsx
index 7b996e94..eebb68fb 100644
--- a/src/components/Directory/NoteCardDirectory.jsx
+++ b/src/components/Directory/NoteCardDirectory.jsx
@@ -7,12 +7,18 @@ import showToast from "../../services/toastService";
 import { cacheData, getCachedData } from "../../slices/apiDataManager";
 import "../common/TextEditor/Editor.css";
 
-const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, setProfileContact, }) => {
+const NoteCardDirectory = ({
+  refetchProfile,
+  refetchNotes,
+  noteItem,
+  contactId,
+  setProfileContact,
+}) => {
   const [editing, setEditing] = useState(false);
   const [editorValue, setEditorValue] = useState(noteItem.note);
   const [isLoading, setIsLoading] = useState(false);
-  const [ isDeleting, setIsDeleting ] = useState( false );
-  const [isActivProcess,setActiveProcessing]= useState(false)
+  const [isDeleting, setIsDeleting] = useState(false);
+  const [isActivProcess, setActiveProcessing] = useState(false);
   const handleUpdateNote = async () => {
     try {
       setIsLoading(true);
@@ -51,8 +57,8 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
         cacheData("Contact Profile", updatedProfile);
       }
       setEditing(false);
-      setIsLoading( false );
-      
+      setIsLoading(false);
+
       showToast("Note Updated successfully", "success");
     } catch (error) {
       setIsLoading(false);
@@ -66,8 +72,11 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
 
   const handleDeleteNote = async (activeStatue) => {
     try {
-     activeStatue ?   setActiveProcessing(true) : setIsDeleting(true) 
-      const resp = await DirectoryRepository.DeleteNote(noteItem.id,activeStatue);
+      activeStatue ? setActiveProcessing(true) : setIsDeleting(true);
+      const resp = await DirectoryRepository.DeleteNote(
+        noteItem.id,
+        activeStatue
+      );
       setProfileContact((prev) => ({
         ...prev,
         notes: prev.notes.filter((note) => note.id !== noteItem.id),
@@ -91,11 +100,14 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
 
         cacheData("Contact Profile", updatedCache);
       }
-      setIsDeleting( false );
-      setActiveProcessing( false )
-      refetchNotes( contactId, false )
-      refetchProfile(contactId)
-      showToast(`Note ${activeStatue ? "Restored":"Deleted"} Successfully`, "success");
+      setIsDeleting(false);
+      setActiveProcessing(false);
+      refetchNotes(contactId, false);
+      refetchProfile(contactId);
+      showToast(
+        `Note ${activeStatue ? "Restored" : "Deleted"} Successfully`,
+        "success"
+      );
     } catch (error) {
       setIsDeleting(false);
       const msg =
@@ -107,11 +119,15 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
   };
   return (
     <div
-      className="card p-1 shadow-sm border-1 mb-2 conntactNote"
-      style={{ width: "100%", minWidth: "300px", borderRadius: "0px", background: `${noteItem.isActive ?   "": "#f8f6f6"}`  }}
+      className="card p-1 shadow-sm border-1 mb-5 conntactNote rounded"
+      style={{
+        width: "100%",
+        minWidth: "300px",
+        borderRadius: "0px",
+        background: `${noteItem.isActive ? "" : "#f8f6f6"}`,
+      }}
       key={noteItem.id}
     >
-
       <div className="d-flex justify-content-between align-items-center mb-1">
         <div className="d-flex align-items-center">
           <Avatar
@@ -133,40 +149,38 @@ const NoteCardDirectory = ({refetchProfile,refetchNotes, noteItem, contactId, se
             </span>
           </div>
         </div>
-     <div>
-  {noteItem.isActive ? (
-    <>
-      <i
-        className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
-        onClick={() => setEditing(true)}
-      ></i>
+        <div>
+          {noteItem.isActive ? (
+            <>
+              <i
+                className="bx bxs-edit bx-sm me-1 text-primary cursor-pointer"
+                onClick={() => setEditing(true)}
+              ></i>
 
-      {!isDeleting ? (
-        <i
-          className="bx bx-trash bx-sm me-1 text-secondary cursor-pointer"
-          onClick={() => handleDeleteNote(!noteItem.isActive)}
-        ></i>
-      ) : (
-        <div
-          className="spinner-border spinner-border-sm text-secondary"
-          role="status"
-        >
-          <span className="visually-hidden">Loading...</span>
+              {!isDeleting ? (
+                <i
+                  className="bx bx-trash bx-sm me-1 text-secondary cursor-pointer"
+                  onClick={() => handleDeleteNote(!noteItem.isActive)}
+                ></i>
+              ) : (
+                <div
+                  className="spinner-border spinner-border-sm text-secondary"
+                  role="status"
+                >
+                  <span className="visually-hidden">Loading...</span>
+                </div>
+              )}
+            </>
+          ) : isActivProcess ? (
+            <i className="bx  bx-loader-alt bx-spin text-primary"></i>
+          ) : (
+            <i
+              className="bx bx-recycle  me-1 text-primary cursor-pointer"
+              onClick={() => handleDeleteNote(!noteItem.isActive)}
+              title="Restore"
+            ></i>
+          )}
         </div>
-      )}
-    </>
-  ) : isActivProcess ? (
-    < i className='bx  bx-loader-alt bx-spin text-primary'  ></i> 
-  ) : (
-    <i
-      className="bx bx-recycle  me-1 text-primary cursor-pointer"
-      onClick={() => handleDeleteNote(!noteItem.isActive)}
-      title="Restore"
-    ></i>
-  )}
-        </div>
-        
-
       </div>
 
       <hr className="mt-0" />
diff --git a/src/components/Directory/NotesDirectory.jsx b/src/components/Directory/NotesDirectory.jsx
index 87707596..b8128ef6 100644
--- a/src/components/Directory/NotesDirectory.jsx
+++ b/src/components/Directory/NotesDirectory.jsx
@@ -16,13 +16,18 @@ const schema = z.object({
   note: z.string().min(1, { message: "Note is required" }),
 });
 
-const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileContact }) => {
+const NotesDirectory = ({
+  refetchProfile,
+  isLoading,
+  contactProfile,
+  setProfileContact,
+}) => {
   const [IsActive, setIsActive] = useState(true);
-  const {contactNotes,refetch} = useContactNotes( contactProfile?.id, true );
+  const { contactNotes, refetch } = useContactNotes(contactProfile?.id, true);
 
   const [NotesData, setNotesData] = useState();
   const [IsSubmitting, setIsSubmitting] = useState(false);
-  const [addNote, setAddNote] = useState(false);
+  const [addNote, setAddNote] = useState(true);
   const {
     register,
     handleSubmit,
@@ -70,7 +75,7 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
       setValue("note", "");
       setIsSubmitting(false);
       showToast("Note added successfully!", "success");
-      setAddNote(false);
+      setAddNote(true);
       setIsActive(true);
     } catch (error) {
       setIsSubmitting(false);
@@ -85,14 +90,12 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
   const onCancel = () => {
     setValue("note", "");
   };
-  const handleSwitch = () =>
-  {
-    setIsActive( !IsActive )
-    if ( IsActive )
-    {
-      refetch(contactProfile?.id, false)
+  const handleSwitch = () => {
+    setIsActive(!IsActive);
+    if (IsActive) {
+      refetch(contactProfile?.id, false);
     }
-  }
+  };
 
   return (
     <div className="text-start">
@@ -103,7 +106,7 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
             <input
               type="checkbox"
               className="switch-input"
-              onChange={()=>handleSwitch(!IsActive)}
+              onChange={() => handleSwitch(!IsActive)}
               value={IsActive}
             />
             <span className="switch-toggle-slider">
@@ -114,24 +117,11 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
                 {/* <i class="icon-base bx bx-x"></i> */}
               </span>
             </span>
-            <span className="switch-label small-text">Show Including Inactive Notes</span>
+            <span className="switch-label ">Show Including Inactive Notes</span>
           </label>
-          
         </div>
       </div>
-      <div className="d-flex justify-content-end px-2">
-        <span
-            className={`btn btn-xs   ${addNote ? "btn-danger" : "btn-primary"}`}
-            onClick={() => setAddNote(!addNote)}
-          >
-            {/* <i
-            className={`icon-base  bx ${
-              addNote ? "bx-x bx-sm" : "bx-pencil"
-            } bx-xs `}
-          ></i> */}
-            {addNote ? "close" : "Add Note"}
-          </span>
-      </div>
+
       {addNote && (
         <form onSubmit={handleSubmit(onSubmit)}>
           <Editor
@@ -146,6 +136,14 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
           )}
         </form>
       )}
+      <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>
       <div className=" justify-content-start  px-1 mt-1">
         {isLoading && (
           <div className="text-center">
@@ -154,32 +152,31 @@ const NotesDirectory = ({refetchProfile, isLoading, contactProfile, setProfileCo
           </div>
         )}
         {!isLoading &&
-  [...(IsActive ? contactProfile?.notes || [] : contactNotes || [])]
-    .reverse()
-    .map((noteItem) => (
-      <NoteCardDirectory
-        refetchProfile={refetchProfile}
-        refetchNotes={refetch}
-        refetchContact ={refetch}
-        noteItem={noteItem}
-        contactId={contactProfile?.id}
-        setProfileContact={setProfileContact}
-        key={noteItem.id}
-
-      />
-    ))}
+          [...(IsActive ? contactProfile?.notes || [] : contactNotes || [])]
+            .reverse()
+            .map((noteItem) => (
+              <NoteCardDirectory
+                refetchProfile={refetchProfile}
+                refetchNotes={refetch}
+                refetchContact={refetch}
+                noteItem={noteItem}
+                contactId={contactProfile?.id}
+                setProfileContact={setProfileContact}
+                key={noteItem.id}
+              />
+            ))}
 
         {IsActive && (
           <div>
             {!isLoading && contactProfile?.notes.length == 0 && !addNote && (
-             <div className="text-center">No Notes Found</div>
+              <div className="text-center mt-5">No Notes Found</div>
             )}
           </div>
         )}
         {!IsActive && (
           <div>
             {!isLoading && contactNotes.length == 0 && !addNote && (
-               <div className="text-center">No Notes Found</div>
+              <div className="text-center  mt-5">No Notes Found</div>
             )}
           </div>
         )}
diff --git a/src/components/Directory/ProfileContactDirectory.jsx b/src/components/Directory/ProfileContactDirectory.jsx
index 8494f2c6..f986aab8 100644
--- a/src/components/Directory/ProfileContactDirectory.jsx
+++ b/src/components/Directory/ProfileContactDirectory.jsx
@@ -11,7 +11,7 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
   const [profileContact, setProfileContact] = useState();
   const [expanded, setExpanded] = useState(false);
   const description = contactProfile?.description || "";
-  const limit = 100;
+  const limit = 500;
 
   const toggleReadMore = () => setExpanded(!expanded);
 
@@ -107,10 +107,10 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
                   <p className="m-0">Created : </p>
                 </div>
                 <div className="d-flex align-items-center">
-                    <li className="list-inline-item">
-                      <i className="bx bx-calendar-week bx-xs me-1"></i>
-                      {moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
-                    </li>
+                  <li className="list-inline-item">
+                    <i className="bx bx-calendar-week bx-xs me-1"></i>
+                    {moment(contactProfile.createdAt).format("MMMM, DD YYYY")}
+                  </li>
                 </div>
               </div>
             )}
@@ -202,8 +202,11 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
           </div>
         )}
 
-        <div className="p-3 alert alert-secondary text-small text-start rounded  muted">
-          <small className="fw-130">
+        <div className="d-flex mb-2 align-items-start">
+          <div style={{ minWidth: "100px" }}>
+            <p className="m-0 text-start">Description :</p>
+          </div>
+          <div className="text-start">
             {displayText}
             {isLong && (
               <span
@@ -213,8 +216,9 @@ const ProfileContactDirectory = ({ contact, setOpen_contact, closeModal }) => {
                 {expanded ? "Read less" : "Read more"}
               </span>
             )}
-          </small>
+          </div>
         </div>
+
         <hr className="my-1" />
         <NotesDirectory
           refetchProfile={refetch}
diff --git a/src/components/common/TextEditor/Editor.jsx b/src/components/common/TextEditor/Editor.jsx
index dd6938f2..d44c9158 100644
--- a/src/components/common/TextEditor/Editor.jsx
+++ b/src/components/common/TextEditor/Editor.jsx
@@ -33,7 +33,7 @@ const Editor = ({
   ];
 
   return (
-    <div className="editor-wrapper">
+    <div className="editor-wrapper m-5">
       <div id="custom-toolbar" className="ql-toolbar ql-snow custom-toolbar">
         <div className="d-flex justify-content-between align-items-center w-100">
           {/* Left: Quill Format Buttons */}