diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index f231cd67..413d7170 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -12,15 +12,18 @@ import UpdateContact from "../../components/Directory/UpdateContact";
 import CardViewDirectory from "../../components/Directory/CardViewDirectory";
 import { useContactCategory } from "../../hooks/masterHook/useMaster";
 import usePagination from "../../hooks/usePagination";
-import {ITEMS_PER_PAGE} from "../../utils/constants";
+import { ITEMS_PER_PAGE } from "../../utils/constants";
+import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
 
 const Directory = () => {
   const [isOpenModal, setIsOpenModal] = useState(false);
+  const [isOpenModalNote, setIsOpenModalNote] = useState(false);
   const [selectedContact, setSelectedContact] = useState(null);
+  const [open_contact, setOpen_contact] = useState(null);
   const [ContatList, setContactList] = useState([]);
   const [contactCategories, setContactCategories] = useState([]);
-  const [ searchText, setSearchText ] = useState( "" );
-   const [listView, setListView] = useState(true);
+  const [searchText, setSearchText] = useState("");
+  const [listView, setListView] = useState(false);
 
   const { contacts, loading } = useDirectory();
   const { contactCategory, loading: contactCategoryLoading } =
@@ -59,6 +62,7 @@ const Directory = () => {
   const closedModel = () => {
     setIsOpenModal(false);
     setSelectedContact(null);
+    setOpen_contact(null);
   };
   useEffect(() => {
     setContactList(contacts);
@@ -80,23 +84,39 @@ const Directory = () => {
     );
   };
   const filteredContacts = useMemo(() => {
-    return ContatList
-      .filter((c) => {
-        const matchesSearch =
-          c.name.toLowerCase().includes(searchText.toLowerCase()) ||
-          c.organization.toLowerCase().includes(searchText.toLowerCase());
-        const matchesCategory =
-          selectedCategoryIds.length === 0 ||
-          selectedCategoryIds.includes(c.contactCategory?.id);
-        return matchesSearch && matchesCategory;
-      })
-      .sort((a, b) => a.name.localeCompare(b.name));
+    return ContatList.filter((c) => {
+      const matchesSearch =
+        c.name.toLowerCase().includes(searchText.toLowerCase()) ||
+        c.organization.toLowerCase().includes(searchText.toLowerCase());
+      const matchesCategory =
+        selectedCategoryIds.length === 0 ||
+        selectedCategoryIds.includes(c.contactCategory?.id);
+      return matchesSearch && matchesCategory;
+    }).sort((a, b) => a.name.localeCompare(b.name));
   }, [ContatList, searchText, selectedCategoryIds]);
   const { currentPage, totalPages, currentItems, paginate } = usePagination(
     filteredContacts,
     ITEMS_PER_PAGE
   );
 
+  const renderModalContent = () => {
+    if (selectedContact) {
+      return (
+        <UpdateContact
+          existingContact={selectedContact}
+          submitContact={submitContact}
+          onCLosed={closedModel}
+        />
+      );
+    }
+
+    if (!open_contact) {
+      return (
+        <ManageDirectory submitContact={submitContact} onCLosed={closedModel} />
+      );
+    }
+  };
+
   return (
     <div className="container-xxl flex-grow-1 container-p-y">
       <Breadcrumb
@@ -112,23 +132,22 @@ const Directory = () => {
           closeModal={() => setIsOpenModal(false)}
           size="lg"
         >
-          {selectedContact ? (
-            <UpdateContact
-              existingContact={selectedContact}
-              submitContact={submitContact}
-              onCLosed={closedModel}
-            />
-          ) : (
-            <ManageDirectory
-              submitContact={submitContact}
-              onCLosed={closedModel}
-            />
-          )}
+          {renderModalContent()}
+        </GlobalModel>
+      )}
+      {isOpenModalNote && (
+        <GlobalModel
+          isOpen={isOpenModalNote}
+          closeModal={() => setIsOpenModalNote(false)}
+          size="lg"
+          IsCloseBtn={false}
+        >
+          {open_contact && <ProfileContactDirectory contact={open_contact} setOpen_contact={setOpen_contact} closeModal={ () => setIsOpenModalNote(false)} />}
         </GlobalModel>
       )}
       <div className="card p-2">
         <div className="row mx-0 px-0 align-items-center">
-          <div className="col-7 col-md-4 mb-2 px-1 d-flex align-items-center ">
+          <div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
             <input
               type="search"
               className="form-control form-control-sm me-2"
@@ -166,7 +185,7 @@ const Directory = () => {
                 <i className="bx bx-list-ul bx-sm"></i>
               </button>
             </div>
-               <div className="dropdown">
+            <div className="dropdown">
               <a
                 className="dropdown-toggle hide-arrow cursor-pointer d-flex align-items-center"
                 data-bs-toggle="dropdown"
@@ -194,117 +213,118 @@ const Directory = () => {
             </div>
           </div>
 
-          <div className="col-5 col-md-8 mb-2 px-1 text-md-end text-end">
+          <div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
             <button
               type="button"
               className="btn btn-xs btn-primary"
               onClick={() => setIsOpenModal(true)}
             >
               <i className="bx bx-plus-circle me-2"></i>
-              <span className="d-sm-block d-none"> New Contact</span>
+              New Contact
             </button>
           </div>
         </div>
-        {
-          listView ? (
-             <div className="table-responsive text-nowrap py-2 ">
-          <table className="table px-2">
-            <thead>
-              <tr>
-                <th colSpan={2}>
-                  <div className="d-flex align-items-center gap-1">
-                    <IconButton
-                      size={12}
-                      iconClass="bx bx-user"
-                      color="secondary"
-                      onClick={() => alert("User icon clicked")}
-                    />
-                    <span>Name</span>
-                  </div>
-                </th>
-                <th className="px-2 text-start">
-                  <div className="d-flex text-center align-items-center gap-1 justify-content-start">
-                    <IconButton
-                      size={12}
-                      iconClass="bx bx-envelope"
-                      color="primary"
-                    />
-                    <span>Email</span>
-                  </div>
-                </th>
-
-                <th className="mx-2">
-                  <div className="d-flex align-items-center m-0 p-0 gap-1">
-                    <IconButton
-                      size={12}
-                      iconClass="bx bx-phone"
-                      color="warning"
-                      onClick={() => alert("User icon clicked")}
-                    />
-                    <span>Phone</span>
-                  </div>
-                </th>
-                <th className="mx-2">
-                  <div className="d-flex align-items-center gap-1">
-                    <IconButton
-                      size={12}
-                      iconClass="bx bxs-grid-alt"
-                      color="info"
-                    />
-                    <span>Organization</span>
-                  </div>
-                </th>
-                <th className="mx-2">Category</th>
-                <th
-                //   className={`mx-2 ${
-                //     HasManageProject ? "d-sm-table-cell" : "d-none"
-                //   }`}
-                >
-                  Action
-                </th>
-              </tr>
-            </thead>
-            <tbody className="table-border-bottom-0 overflow-auto ">
-              {loading && ContatList.length === 0 && (
+        {listView ? (
+          <div className="table-responsive text-nowrap py-2 ">
+            <table className="table px-2">
+              <thead>
                 <tr>
-                  <td colSpan={10}>Loading...</td>
-                </tr>
-              )}
-              {!loading && contacts.length == 0 && ContatList.length === 0 && (
-                <tr>
-                  <td colSpan={10}>No Contact Found</td>
-                </tr>
-              )}
-              {!loading &&
-                currentItems.map((contact) => (
-                  <ListViewDirectory
-                      key={contact.id} 
-                    contact={contact}
-                    setSelectedContact={setSelectedContact}
-                    setIsOpenModal={setIsOpenModal}
-                  />
-                ))}
-            </tbody>
-          </table>
-        </div>
-          ) : (
-                <div className="row">
-          {currentItems.map((contact, index) => (
-            <div key={contact.id} className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4">
-              <CardViewDirectory contact={contact}
-                setSelectedContact={setSelectedContact}
-                setIsOpenModal={setIsOpenModal}
-            
-              />
-            </div>
-          ))}
-        </div>
-          )
-        }
+                  <th colSpan={2}>
+                    <div className="d-flex align-items-center gap-1">
+                      <IconButton
+                        size={12}
+                        iconClass="bx bx-user"
+                        color="secondary"
+                        onClick={() => alert("User icon clicked")}
+                      />
+                      <span>Name</span>
+                    </div>
+                  </th>
+                  <th className="px-2 text-start">
+                    <div className="d-flex text-center align-items-center gap-1 justify-content-start">
+                      <IconButton
+                        size={12}
+                        iconClass="bx bx-envelope"
+                        color="primary"
+                      />
+                      <span>Email</span>
+                    </div>
+                  </th>
 
-       
-
-      
+                  <th className="mx-2">
+                    <div className="d-flex align-items-center m-0 p-0 gap-1">
+                      <IconButton
+                        size={12}
+                        iconClass="bx bx-phone"
+                        color="warning"
+                        onClick={() => alert("User icon clicked")}
+                      />
+                      <span>Phone</span>
+                    </div>
+                  </th>
+                  <th className="mx-2">
+                    <div className="d-flex align-items-center gap-1">
+                      <IconButton
+                        size={12}
+                        iconClass="bx bxs-grid-alt"
+                        color="info"
+                      />
+                      <span>Organization</span>
+                    </div>
+                  </th>
+                  <th className="mx-2">Category</th>
+                  <th
+                  //   className={`mx-2 ${
+                  //     HasManageProject ? "d-sm-table-cell" : "d-none"
+                  //   }`}
+                  >
+                    Action
+                  </th>
+                </tr>
+              </thead>
+              <tbody className="table-border-bottom-0 overflow-auto ">
+                {loading && ContatList.length === 0 && (
+                  <tr>
+                    <td colSpan={10}>Loading...</td>
+                  </tr>
+                )}
+                {!loading &&
+                  contacts.length == 0 &&
+                  ContatList.length === 0 && (
+                    <tr>
+                      <td colSpan={10}>No Contact Found</td>
+                    </tr>
+                  )}
+                {!loading &&
+                  currentItems.map((contact) => (
+                    <ListViewDirectory
+                      key={contact.id}
+                      contact={contact}
+                      setSelectedContact={setSelectedContact}
+                      setIsOpenModal={setIsOpenModal}
+                    />
+                  ))}
+              </tbody>
+            </table>
+          </div>
+        ) : (
+          <div className="row">
+            {currentItems.map((contact, index) => (
+              <div
+                key={contact.id}
+                className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
+              >
+                <CardViewDirectory
+                  contact={contact}
+                  setSelectedContact={setSelectedContact}
+                  setIsOpenModal={setIsOpenModal}
+                  setOpen_contact={setOpen_contact}
+                  setIsOpenModalNote={setIsOpenModalNote}
+                />
+              </div>
+            ))}
+          </div>
+        )}
 
         {!loading && (
           <nav aria-label="Page ">