diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx
index 3dfda7be..b7213829 100644
--- a/src/components/Directory/CardViewDirectory.jsx
+++ b/src/components/Directory/CardViewDirectory.jsx
@@ -1,12 +1,17 @@
 import React from "react";
+import Avatar from "../common/Avatar";
 
 const CardViewDirectory = ({contact}) => {
   return (
     <div class="card text-start ">
       <div class="card-body d-flex justify-content-between px-1 py-2">
-        <div>
-                  <p className="fs-6 m-0">{contact.name}</p>
-          <small className="simple-text m-0 text-muted"></small>
+        <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="fs-6 m-0">{contact.name}</p>
+          
         </div>
         <div>
           <div className="dropdown z-2 ">
@@ -44,14 +49,14 @@ const CardViewDirectory = ({contact}) => {
       </div>
       <div class="card-footer text-start px-1 py-1">
         <hr className="my-0"/>
-              {contact.contactEmails && <ul className="list-inline my-1 ">
+              {contact.contactEmails[0] && <ul className="list-inline my-1 ">
                   <li className="list-inline-item me-2">
                       <i className="bx bx-envelope bx-xs"></i>
                   </li>
                   <li className="list-inline-item small-text">{contact.contactEmails[ 0 ]?.emailAddress}</li>
               </ul>}
 
-              {contact.contactPhones && <ul className="list-inline m-0">
+              {contact.contactPhones[0] && <ul className="list-inline m-0">
                   <li className="list-inline-item me-2">
                       <i className="bx bx-phone bx-xs"></i>
                   </li>