diff --git a/src/components/Directory/CardViewDirectory.jsx b/src/components/Directory/CardViewDirectory.jsx
index a18f0f18..657f7353 100644
--- a/src/components/Directory/CardViewDirectory.jsx
+++ b/src/components/Directory/CardViewDirectory.jsx
@@ -3,11 +3,11 @@ import Avatar from "../common/Avatar";
 import {getBucketNameById} from "./DirectoryUtils";
 import {useBuckets} from "../../hooks/useDirectory";
 import { getPhoneIcon } from "./DirectoryUtils";
-const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpen_contact, setIsOpenModalNote, IsDeleted} ) =>
+const CardViewDirectory = ( {IsActive,contact, setSelectedContact, setIsOpenModal, setOpen_contact, setIsOpenModalNote, IsDeleted} ) =>
 {
   const {buckets} = useBuckets()
   return (
-    <div className="card text-start border-1">
+    <div className="card text-start border-1" style={{background:`${!IsActive ? "#f8f6f6":""}`}}>
       <div className="card-body  px-1 py-2 pb-0">
         <div className="d-flex justify-content-between">
           <div className="d-flex align-items-center">
@@ -23,7 +23,7 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
             <p className="m-0">{contact.name}</p>
           </div>
           <div>
-            <div className="dropdown z-2 ">
+            <div className={`dropdown z-2 ${!IsActive && "d-none"}`}>
               <button
                 type="button"
                 className="btn btn-xs btn-icon btn-text-secondary rounded-pill dropdown-toggle hide-arrow p-0 m-0"
@@ -40,12 +40,18 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
                 ></i>
               </button>
               <ul className="dropdown-menu dropdown-menu-end w-auto">
-                <li
-                  onClick={() => {
-                    setSelectedContact(contact);
-                    setIsOpenModal(true);
-                  }}
-                >
+             <li
+  onClick={() => {
+    if (!IsActive) {
+      setSelectedContact(contact);
+      setIsOpenModal(true);
+    }
+  }}
+  style={{
+    cursor: IsActive ? 'not-allowed' : 'pointer',
+    opacity: IsActive ? 0.6 : 1,
+  }}
+>
                   <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>
@@ -73,8 +79,12 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
       </div>
       <div className="card-footer text-start px-1 py-1" onClick={() =>
       {
+        if ( IsActive )
+        {
+        
         setIsOpenModalNote(true)
         setOpen_contact(contact)
+      }
       }}>
         <hr className="my-0" />
         {contact.contactEmails[0] && (
@@ -108,19 +118,19 @@ const CardViewDirectory = ( {contact, setSelectedContact, setIsOpenModal, setOpe
           </li>
         </ul>
 
-        <ul className="list-inline m-0">
-          {contact.bucketIds.map( ( 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></>
-          ))}
-      
-        </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>
+
       </div>
     </div>
   );