diff --git a/src/pages/project/ProjectList.jsx b/src/pages/project/ProjectList.jsx
index 1dd37392..323216ac 100644
--- a/src/pages/project/ProjectList.jsx
+++ b/src/pages/project/ProjectList.jsx
@@ -264,102 +264,153 @@ const ProjectList = () => {
         )}
 
        {listView ? (
-          currentItems.length === 0 ? (
-            <div className="text-center text-muted mt-4">
-              No projects found.
-            </div>
-          ) : (
-            <div className="card cursor-pointer">
-              <div className="card-body p-2">
-                <div className="table-responsive text-nowrap py-2 ">
-                  <table className="table m-3">
-                    <thead>
-                      <tr>
-                        <th className="text-start" colSpan={5}>
-                          Project Name
-                        </th>
-                        <th className="mx-2 text-start">Contact Person</th>
-                        <th className="mx-2">START DATE</th>
-                        <th className="mx-2">DEADLINE</th>
-                        <th className="mx-2">Task</th>
-                        <th className="mx-2">Progress</th>
-                        <th className="mx-2">
-                          <div className="dropdown">
-                            <a
-                              className="dropdown-toggle hide-arrow cursor-pointer"
-                              data-bs-toggle="dropdown"
-                              aria-expanded="false"
-                            >
-                              Status <i className="bx bx-filter bx-sm"></i>
-                            </a>
-                            <ul className="dropdown-menu p-2 text-capitalize">
-                              {[
-                                {
-                                  id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
-                                  label: "Active",
-                                },
-                                {
-                                  id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
-                                  label: "On Hold",
-                                },
-                                {
-                                  id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
-                                  label: "Inactive",
-                                },
-                                {
-                                  id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
-                                  label: "Completed",
-                                },
-                              ].map(({ id, label }) => (
-                                <li key={id}>
-                                  <div className="form-check">
-                                    <input
-                                      className="form-check-input"
-                                      type="checkbox"
-                                      checked={selectedStatuses.includes(id)}
-                                      onChange={() => handleStatusChange(id)}
-                                    />
-                                    <label className="form-check-label">{label}</label>
-                                  </div>
-                                </li>
-                              ))}
-                            </ul>
-                          </div>
-                        </th>
-                        <th
-                          className={`mx-2 ${HasManageProject ? "d-sm-table-cell" : "d-none"
-                            }`}
-                        >
-                          Action
-                        </th>
-                      </tr>
-                    </thead>
-                    <tbody className="table-border-bottom-0 overflow-auto">
-                      {currentItems.map((project) => (
-                        <ProjectListView
-                          key={project.id}
-                          projectData={project}
-                          recall={sortingProject}
-                        />
-                      ))}
-                    </tbody>
-                  </table>
+  <div className="card cursor-pointer">
+    <div className="card-body p-2" style={{ minHeight: "200px" }}>
+      <div className="table-responsive text-nowrap py-2">
+        <table className="table m-3">
+          <thead>
+            <tr>
+              <th className="text-start" colSpan={5}>
+                Project Name
+              </th>
+              <th className="mx-2 text-start">Contact Person</th>
+              <th className="mx-2">START DATE</th>
+              <th className="mx-2">DEADLINE</th>
+              <th className="mx-2">Task</th>
+              <th className="mx-2">Progress</th>
+              <th className="mx-2">
+                <div className="dropdown">
+                  <a
+                    className="dropdown-toggle hide-arrow cursor-pointer"
+                    data-bs-toggle="dropdown"
+                    aria-expanded="false"
+                  >
+                    Status <i className="bx bx-filter bx-sm"></i>
+                  </a>
+                  <ul className="dropdown-menu p-2 text-capitalize">
+                    {[
+                      {
+                        id: "b74da4c2-d07e-46f2-9919-e75e49b12731",
+                        label: "Active",
+                      },
+                      {
+                        id: "603e994b-a27f-4e5d-a251-f3d69b0498ba",
+                        label: "On Hold",
+                      },
+                      {
+                        id: "ef1c356e-0fe0-42df-a5d3-8daee355492d",
+                        label: "Inactive",
+                      },
+                      {
+                        id: "33deaef9-9af1-4f2a-b443-681ea0d04f81",
+                        label: "Completed",
+                      },
+                    ].map(({ id, label }) => (
+                      <li key={id}>
+                        <div className="form-check">
+                          <input
+                            className="form-check-input"
+                            type="checkbox"
+                            checked={selectedStatuses.includes(id)}
+                            onChange={() => handleStatusChange(id)}
+                          />
+                          <label className="form-check-label">{label}</label>
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
                 </div>
-              </div>
-            </div>
-          )
-        ) : (
-          <div className="row">
-            {currentItems.map((project) => (
-              <ProjectCard
-                key={project.id}
-                projectData={project}
-                recall={sortingProject}
-              />
-            ))}
-          </div>
-        )}
+              </th>
+              <th
+                className={`mx-2 ${
+                  HasManageProject ? "d-sm-table-cell" : "d-none"
+                }`}
+              >
+                Action
+              </th>
+            </tr>
+          </thead>
+          <tbody className="table-border-bottom-0" style={{ height: "200px" }}>
+            {currentItems.length === 0 ? (
+              <tr>
+                <td
+                  colSpan="12"
+                  className="text-center"
+                  style={{
+                    verticalAlign: "middle",
+                    height: "200px",
+                    paddingTop: 0,
+                    paddingBottom: 0,
+                  }}
+                >
+                  <div className="d-flex flex-column justify-content-center align-items-center h-100">
+                    <p className="mb-0">No projects found</p>
+                  </div>
+                </td>
+              </tr>
+            ) : (
+              currentItems.map((project) => (
+                <ProjectListView
+                  key={project.id}
+                  projectData={project}
+                  recall={sortingProject}
+                />
+              ))
+            )}
+          </tbody>
+        </table>
+      </div>
+    </div>
+  </div>
+) : (
+  <div className="row">
+    {currentItems.map((project) => (
+      <ProjectCard
+        key={project.id}
+        projectData={project}
+        recall={sortingProject}
+      />
+    ))}
+  </div>
+)}
 
+{!loading && totalPages > 1 && (
+  <nav>
+    <ul className="pagination pagination-sm justify-content-end py-2">
+      <li className={`page-item ${currentPage === 1 && "disabled"}`}>
+        <button
+          className="page-link"
+          onClick={() => setCurrentPage((p) => Math.max(1, p - 1))}
+        >
+          &laquo;
+        </button>
+      </li>
+      {[...Array(totalPages)].map((_, i) => (
+        <li
+          key={i}
+          className={`page-item ${currentPage === i + 1 && "active"}`}
+        >
+          <button
+            className="page-link"
+            onClick={() => setCurrentPage(i + 1)}
+          >
+            {i + 1}
+          </button>
+        </li>
+      ))}
+      <li className={`page-item ${currentPage === totalPages && "disabled"}`}>
+        <button
+          className="page-link"
+          onClick={() =>
+            setCurrentPage((p) => Math.min(totalPages, p + 1))
+          }
+        >
+          &raquo;
+        </button>
+      </li>
+    </ul>
+  </nav>
+)}
 
 {!loading && totalPages > 1 && (
   <nav>