diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx
index 50838bd3..26b2e479 100644
--- a/src/components/Directory/CardViewDirectory.jsx
+++ b/src/components/Directory/CardViewDirectory.jsx
@@ -1,61 +1,77 @@
 import React from "react";
 import Avatar from "../common/Avatar";
 
-const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
+const CardViewDirectory = ({ contact, setSelectedContact, setIsOpenModal,setOpen_contact,setIsOpenModalNote }) => {
   return (
     <div class="card text-start border-1">
-      <div class="card-body d-flex justify-content-between px-1 py-2">
-        <div className="d-flex align-items-center">
-          <Avatar
-            size="xs"
-            firstName={
-              (contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
-            }
-            lastName={
-              (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
-            }
-          />{" "}
-          <p className="m-0">{contact.name}</p>
-        </div>
-        <div>
-          <div className="dropdown z-2 ">
-            <button
-              type="button"
-              className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
-              data-bs-toggle="dropdown"
-              aria-expanded="false"
-            >
-              <i
-                className="bx bx-dots-vertical-rounded bx-sm text-muted p-0"
-                data-bs-toggle="tooltip"
-                data-bs-offset="0,8"
-                data-bs-placement="top"
-                data-bs-custom-class="tooltip-dark"
-                title="More Action"
-              ></i>
-            </button>
-            <ul className="dropdown-menu dropdown-menu-end w-auto">
-              <li onClick={() =>
-              {
-                setSelectedContact(contact)
-                setIsOpenModal(true)
-              }}>
-                <a className="dropdown-item px-2 py-0">
-                  <i className="bx bx-pencil bx-xs me-2"></i>
-                  <span className="align-left small-text">Modify</span>
-                </a>
-              </li>
-              <li>
-                <a className="dropdown-item  px-2 py-0">
-                  <i className="bx bx-trash bx-xs me-2"></i>
-                  <span className="align-left small-text">Delete</span>
-                </a>
-              </li>
-            </ul>
+      <div class="card-body  px-1 py-2 pb-0">
+        <div className="d-flex justify-content-between">
+          <div className="d-flex align-items-center">
+            <Avatar
+              size="xs"
+              firstName={
+                (contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""
+              }
+              lastName={
+                (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
+              }
+            />{" "}
+            <p className="m-0">{contact.name}</p>
+          </div>
+          <div>
+            <div className="dropdown z-2 ">
+              <button
+                type="button"
+                className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
+                data-bs-toggle="dropdown"
+                aria-expanded="false"
+              >
+                <i
+                  className="bx bx-dots-vertical-rounded bx-sm text-muted p-0"
+                  data-bs-toggle="tooltip"
+                  data-bs-offset="0,8"
+                  data-bs-placement="top"
+                  data-bs-custom-class="tooltip-dark"
+                  title="More Action"
+                ></i>
+              </button>
+              <ul className="dropdown-menu dropdown-menu-end w-auto">
+                <li
+                  onClick={() => {
+                    setSelectedContact(contact);
+                    setIsOpenModal(true);
+                  }}
+                >
+                  <a className="dropdown-item px-2 py-0">
+                    <i className="bx bx-pencil bx-xs me-2"></i>
+                    <span className="align-left small-text">Modify</span>
+                  </a>
+                </li>
+                <li>
+                  <a className="dropdown-item  px-2 py-0">
+                    <i className="bx bx-trash bx-xs me-2"></i>
+                    <span className="align-left small-text">Delete</span>
+                  </a>
+                </li>
+              </ul>
+            </div>
           </div>
         </div>
+
+        <ul className="list-inline m-0 ps-4">
+          <li className="list-inline-item me-1" style={{fontSize:"10px"}}>
+            <i className="bx bx-building bx-xs"></i>
+          </li>
+          <li className="list-inline-item" style={{fontSize:"10px"}}>
+            {contact.organization}
+          </li>
+        </ul>
       </div>
-      <div class="card-footer text-start px-1 py-1">
+      <div class="card-footer text-start px-1 py-1" onClick={() =>
+      {
+        setIsOpenModalNote(true)
+        setOpen_contact(contact)
+      }}>
         <hr className="my-0" />
         {contact.contactEmails[0] && (
           <ul className="list-inline my-1 ">
@@ -80,12 +96,6 @@ const CardViewDirectory = ({ contact,setSelectedContact , setIsOpenModal}) => {
         )}
 
         <ul className="list-inline m-0">
-          <li className="list-inline-item me-2">
-            <i className="bx bx-building bx-xs"></i>
-          </li>
-          <li className="list-inline-item small-text">
-            {contact.organization}
-          </li>
           <li className="list-inline-item me-2">
             <i className="bx bx-merge bx-xs"></i>
           </li>