diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx
index a7fe7d32..1dc16cec 100644
--- a/src/components/Directory/CardViewDirectory.jsx
+++ b/src/components/Directory/CardViewDirectory.jsx
@@ -30,7 +30,7 @@ const CardViewDirectory = ({
                 (contact?.name || "").trim().split(" ")[1]?.charAt(0) || ""
               }
             />{" "}
-            <p className="m-0">{contact.name}</p>
+        <span className="text-heading fs-6">   {contact.name}</span>
           </div>
           <div>
             <div className={`dropdown z-2 ${!IsActive && "d-none"}`}>
@@ -55,20 +55,19 @@ const CardViewDirectory = ({
                     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 className="dropdown-item px-2 cursor-pointer py-1">
+                    <i className="bx bx-edit bx-xs text-primary  me-2"></i>
+                    <span className="align-left ">Modify</span>
                   </a>
                 </li>
                 <li>
                   <a
-                    className="dropdown-item  px-2 py-0"
+                    className="dropdown-item  px-2 cursor-pointer py-1"
                     onClick={() => IsDeleted(contact.id)}
                   >
-                    <i className="bx bx-trash bx-xs me-2"></i>
-                    <span className="align-left small-text">Delete</span>
+                    <i className="bx bx-trash text-danger  bx-xs me-2"></i>
+                    <span className="align-left">Delete</span>
                   </a>
                 </li>
               </ul>
@@ -80,7 +79,7 @@ const CardViewDirectory = ({
           <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" }}>
+          <li className="list-inline-item text-small">
             {contact.organization}
           </li>
         </ul>
@@ -96,52 +95,54 @@ const CardViewDirectory = ({
       >
         <hr className="my-0" />
         {contact.contactEmails[0] && (
-          <ul className="list-inline my-1 ">
+          <ul className="list-inline my-1  ">
             <li className="list-inline-item me-2">
-              <i className="bx bx-envelope bx-xs"></i>
+              <i className="bx bx-envelope bx-xs"></i> 
             </li>
-            <li className="list-inline-item small-text">
+            <li className="list-inline-item text-small">
               {contact.contactEmails[0]?.emailAddress}
             </li>
           </ul>
         )}
 
         {contact.contactPhones[0] && (
-          <ul className="list-inline m-0">
-            <li className="list-inline-item me-2">
+          <ul className="list-inline m-0 ">
+            <li className="list-inline-item me-1">
               <i
                 className={` ${getPhoneIcon(
                   contact.contactPhones[0].label
                 )} bx-xs`}
               ></i>
             </li>
-            <li className="list-inline-item small-text">
+            <li className="list-inline-item text-small">
               {contact.contactPhones[0]?.phoneNumber}
             </li>
           </ul>
         )}
 
         <ul className="list-inline m-0">
-          <li className="list-inline-item me-2">
-            <i className="bx bx-merge bx-xs"></i>
+          <li className="list-inline-item me-2 my-1">
+           <i className="fa-solid fa-tag fs-6"></i>
+            
           </li>
-          <li className="list-inline-item small-text">
+          <li className="list-inline-item text-small active">
             {contact.contactCategory.name}
           </li>
         </ul>
 
-        <ul className="list-inline m-0">
-          {contact.bucketIds.map((bucketId) => (
-            <React.Fragment key={bucketId}>
-              <li className="list-inline-item me-1">
-                <i className="bx bx-pin bx-xs"></i>
-              </li>
-              <li className="list-inline-item small-text">
-                {getBucketNameById(buckets, bucketId)}
-              </li>
-            </React.Fragment>
-          ))}
-        </ul>
+     <ul className="list-inline m-0">
+  {contact.bucketIds?.map((bucketId) => (
+    <li key={bucketId} className="list-inline-item me-1">
+      <span className="badge bg-label-primary rounded-pill d-flex align-items-center gap-1" style={{padding:'0.1rem 0.3rem'}}>
+        <i className="bx bx-pin bx-xs"></i>
+        <span className="small-text">
+          {getBucketNameById(buckets, bucketId)}
+        </span>
+      </span>
+    </li>
+  ))}
+</ul>
+
       </div>
     </div>
   );