diff --git a/src/pages/Directory/Directory.jsx b/src/pages/Directory/Directory.jsx
index dfbcbb81..c3e3830f 100644
--- a/src/pages/Directory/Directory.jsx
+++ b/src/pages/Directory/Directory.jsx
@@ -16,7 +16,9 @@ import { ITEMS_PER_PAGE } from "../../utils/constants";
 import ProfileContactDirectory from "../../components/Directory/ProfileContactDirectory";
 import ConfirmModal from "../../components/common/ConfirmModal";
 
-const Directory = () => {
+const Directory = () =>
+{
+  const[IsActivite,setIsActive] = useState(true)
   const [isOpenModal, setIsOpenModal] = useState(false);
   const [isOpenModalNote, setIsOpenModalNote] = useState(false);
   const [selectedContact, setSelectedContact] = useState(null);
@@ -32,7 +34,7 @@ const Directory = () => {
   const [tempSelectedBucketIds, setTempSelectedBucketIds] = useState([]);
   const [tempSelectedCategoryIds, setTempSelectedCategoryIds] = useState([]);
 
-  const { contacts, loading } = useDirectory();
+  const { contacts, loading } = useDirectory(IsActivite);
   const { contactCategory, loading: contactCategoryLoading } =
     useContactCategory();
   const { buckets } = useBuckets();
@@ -247,7 +249,7 @@ const Directory = () => {
         </div>
       )}
 
-      <div className="card p-2">
+      <div className="card p-2"    >
         <div className="row mx-0 px-0 align-items-center">
           <div className="col-12 col-md-4 mb-2 px-1 d-flex align-items-center ">
             <input
@@ -299,7 +301,7 @@ const Directory = () => {
 
                 <ul className="dropdown-menu p-3" style={{ width: "320px" }}>
                   <div>
-                    <p className="small-text text-muted m-0">Filter by</p>
+                    <p className="small-text fw-semibold text-muted m-0">Filter by</p>
 
                     {/* Bucket Filter */}
                     <div className="mt-1">
@@ -377,17 +379,17 @@ const Directory = () => {
             </div>
           </div>
           <div className="col-12 col-md-8 mb-2 px-1 text-md-end text-end">
-            <label class="switch switch-primary">
-              <input type="checkbox" class="switch-input" />
-              <span class="switch-toggle-slider">
-                <span class="switch-on">
+            <label className="switch switch-primary">
+              <input type="checkbox" className="switch-input" onChange={()=>setIsActive(!IsActivite)} value={IsActivite} />
+              <span className="switch-toggle-slider">
+                <span className="switch-on">
                   {/* <i class="icon-base bx bx-check"></i> */}
                 </span>
-                <span class="switch-off">
+                <span className="switch-off">
                   {/* <i class="icon-base bx bx-x"></i> */}
                 </span>
               </span>
-              <span class="switch-label">Show Inactive Contacts</span>
+              <span className="switch-label small-text">Show Inactive Contacts</span>
             </label>
             <button
               type="button"
@@ -456,7 +458,7 @@ const Directory = () => {
                 </tr>
               </thead>
               <tbody className="table-border-bottom-0 overflow-auto ">
-                {loading && ContatList.length === 0 && (
+                {loading &&  (
                   <tr>
                     <td colSpan={10}>Loading...</td>
                   </tr>
@@ -484,12 +486,13 @@ const Directory = () => {
           </div>
         ) : (
           <div className="row">
-            {currentItems.map((contact, index) => (
+            {!loading && currentItems.map((contact, index) => (
               <div
                 key={contact.id}
                 className="col-12 col-sm-6 col-md-4 col-lg-4 mb-4"
               >
                 <CardViewDirectory
+                  IsActive={IsActivite}
                   contact={contact}
                   setSelectedContact={setSelectedContact}
                   setIsOpenModal={setIsOpenModal}