diff --git a/src/components/Directory/ListViewDirectory.jsx b/src/components/Directory/ListViewDirectory.jsx
index b3261563..2258fb5b 100644
--- a/src/components/Directory/ListViewDirectory.jsx
+++ b/src/components/Directory/ListViewDirectory.jsx
@@ -5,73 +5,69 @@ import { getEmailIcon,getPhoneIcon } from './DirectoryUtils';
 
 const ListViewDirectory = ({IsActive, contact,setSelectedContact,setIsOpenModal,setOpen_contact,setIsOpenModalNote,IsDeleted}) => {
   return (
-    <tr style={{background:`${!IsActive ? "#f8f6f6":""}`}} >
-      <td className="text-start cursor-pointer" style={{width: '18%'}} colSpan={2} onClick={() =>
-      {
-        if ( IsActive )
-        {
-           setIsOpenModalNote(true)
-        setOpen_contact(contact)
-       }
-      }}>
-     <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) || ""}
-/>
+   <tr className={!IsActive ? "bg-light" : ""}>
+  <td className="text-start cursor-pointer" style={{ width: "18%" }} colSpan={2} onClick={() => {
+    if (IsActive) {
+      setIsOpenModalNote(true);
+      setOpen_contact(contact);
+    }
+  }}>
+    <div className="d-flex align-items-center gap-2">
+      <Avatar
+        size="xs"
+        classAvatar="m-0"
+        firstName={(contact?.name || "").trim().split(" ")[0]?.charAt(0) || ""}
+        lastName={(contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""}
+      />
+      <span className="text-truncate mx-0" style={{ maxWidth: "150px" }}>{contact?.name || ""}</span>
+    </div>
+  </td>
 
-  <span >{contact?.name || ""}</span>
-</div>
+  <td className="px-2"  style={{ width: "20%" }}>
+    <div className="d-flex flex-column align-items-start text-truncate">
+      {contact.contactEmails?.map((email, index) => (
+        <span key={email.id} className="text-truncate">
+          <i className={getEmailIcon(email.label)} style={{ fontSize: "12px" }}></i>
+          <a href={`mailto:${email.emailAddress}`} className="text-decoration-none ms-1">{email.emailAddress}</a>
+        </span>
+      ))}
+    </div>
+  </td>
 
+  <td className="px-2" style={{ width: "20%" }}>
+    <div className="d-flex flex-column align-items-start text-truncate">
+      {contact.contactPhones?.map((phone, index) => (
+        <span key={phone.id}>
+          <i className={getPhoneIcon(phone.label)} style={{ fontSize: "12px" }}></i>
+          <span className="ms-1">{phone.phoneNumber}</span>
+        </span>
+      ))}
+    </div>
+  </td>
 
-      </td>
+  <td colSpan={2} className="text-start text-truncate px-2" style={{ width: "20%", maxWidth: "200px" }}>
+    {contact.organization}
+  </td>
 
-      {/* Emails */}
-      <td >
-        <div className="d-flex flex-column align-items-start px-1">
-          {contact.contactEmails?.map((email, index) => (
-            <span key={email.id}>
-             <i className={getEmailIcon(email.label)} style={{fontSize:"12px"}}></i>
-              <a href={`mailto:${email.email}`} className="text-decoration-none">{email.emailAddress}</a>
-            </span>
-          ))}
-        </div>
-      </td>
+  <td className="px-2" style={{ width: "10%" }}>
+    <span className="badge badge-outline-secondary">
+      {contact?.contactCategory?.name}
+    </span>
+  </td>
 
-      <td>
-        <div className="d-flex flex-column align-items-start">
-          {contact.contactPhones?.map((phone, index) => (
-            <span key={phone.id}>
-             <i className={getPhoneIcon(phone.label)} style={{fontSize:"12px"}}></i>
-              {phone.phoneNumber}
-            </span>
-          ))}
-        </div>
-      </td>
+  {IsActive && (
+    <td className="align-middle text-center" style={{ width: "12%" }}>
+      <i className="bx bx-edit bx-sm text-primary cursor-pointer me-2"
+        onClick={() => {
+          setSelectedContact(contact);
+          setIsOpenModal(true);
+        }}></i>
+      <i className="bx bx-trash bx-sm text-danger cursor-pointer"
+        onClick={() => IsDeleted(contact.id)}></i>
+    </td>
+  )}
+</tr>
 
-
-      <td colSpan={2} className="text-start text-wrap">{contact.organization}</td>
-
-  
-      <td>
-        <div className="d-flex flex-column align-items-start">
-          <span className="badge badge-outline-primary">{contact?.contactCategory?.name }</span>
-        </div>
-      </td>
-
-      {/* Actions */}
-      {IsActive &&
-        <td className="align-middle text-center ">
-          <i className='bx bx-edit bx-sm text-primary cursor-pointer' onClick={() =>
-          {
-            setSelectedContact( contact )
-            setIsOpenModal( true )
-          }}></i>
-          <i className='bx bx-trash bx-sm text-danger cursor-pointer' onClick={() => IsDeleted( contact.id )}></i>
-        </td>
-      }
-    </tr>
   );
 };