src/pages/Directory/Directory.jsx

@@ -361,23 +361,9 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
         </div>
       </div>
       <div className="card-minHeight mt-0">
-        {(viewType === "card" || viewType === "list" || viewType === "notes") && (
-          <div className="d-flex flex-column justify-content-center align-items-center text-center">
-            {!loading && (viewType === "card" || viewType === "list") && contacts?.length === 0 && (
-              <p className="mt-10">No contact found</p>
-            )}
-            {!loading &&
-              (viewType === "card" || viewType === "list") &&
-              contacts?.length > 0 &&
-              currentItems.length === 0 && (
-                <p className="mt-10">No matching contact found</p>
-              )}
-          </div>
-        )}
-
         {viewType === "list" && (
           <div className="card cursor-pointer mt-5">
-            <div className="card-body p-2 pb-1">
+            <div className="card-body p-2 pb-1" style={{ minHeight: "200px" }}>
               <DirectoryListTableHeader>
                 {!loading &&
                   currentItems.map((contact) => (
@@ -394,12 +380,22 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                     />
                   ))}
               </DirectoryListTableHeader>
+
+              {/* Empty state AFTER list */}
+              {!loading && contacts?.length === 0 && (
+                <p className="mt-3 ms-3 text-muted" >No contact found</p>
+              )}
+              {!loading &&
+                contacts?.length > 0 &&
+                currentItems.length === 0 && (
+                  <p className="mt-3 ms-3 text-muted">No matching contact found</p>
+                )}
             </div>
           </div>
         )}
 
         {viewType === "card" && (
-          <div className="row mt-4">
+          <div className="row mt-10">
             {!loading &&
               currentItems.map((contact) => (
                 <div
@@ -418,6 +414,16 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                   />
                 </div>
               ))}
+
+            {/* Empty state for card view */}
+            {!loading && contacts?.length === 0 && (
+              <p className="mt-3 ms-3 text-muted">No contact found</p>
+            )}
+            {!loading &&
+              contacts?.length > 0 &&
+              currentItems.length === 0 && (
+                <p className="mt-3 ms-3 text-muted">No matching contact found</p>
+              )}
           </div>
         )}
 
@@ -464,7 +470,10 @@ const Directory = ({ IsPage = true, prefernceContacts }) => {
                   </li>
                 ))}
 
-                <li className={`page-item ${currentPage === totalPages ? "disabled" : ""}`}>
+                <li
+                  className={`page-item ${currentPage === totalPages ? "disabled" : ""
+                    }`}
+                >
                   <button
                     className="page-link"
                     onClick={() => paginate(currentPage + 1)}

src/pages/Directory/DirectoryListTableHeader.jsx

@@ -3,7 +3,7 @@ import IconButton from "../../components/common/IconButton";
 
 const DirectoryListTableHeader = ({ children }) => {
   return (
-    <div className="table-responsive text-nowrap py-2">
+     <div className="table-responsive text-nowrap py-2" style={{ minHeight: "80px"}}> 
       <table className="table px-2">
         <thead>
           <tr>