diff --git a/src/pages/project/ProjectListView.jsx b/src/pages/project/ProjectListView.jsx
new file mode 100644
index 00000000..69b7d0f8
--- /dev/null
+++ b/src/pages/project/ProjectListView.jsx
@@ -0,0 +1,196 @@
+import React from "react";
+import moment from "moment";
+import { useProjects } from "../../hooks/useProjects";
+
+const ProjectListView = () => {
+  const { projects } = useProjects();
+
+  const getProgress = (planned, completed) => {
+    return (completed * 100) / planned + "%";
+  };
+  const getProgressInNumber = (planned, completed) => {
+    return (completed * 100) / planned;
+  };
+
+  const getProjectStatusName = (statusId) => {
+    switch (statusId) {
+      case 1:
+        return "Active";
+      case 2:
+        return "On Hold";
+      // case 3:
+      //   return "Suspended";
+      case 3:
+        return "Inactive";
+      case 4:
+        return "Completed";
+    }
+  };
+
+  const getProjectStatusColor = (statusId) => {
+    switch (statusId) {
+      case 1:
+        return "bg-label-success";
+      case 2:
+        return "bg-label-warning";
+      case 3:
+        return "bg-label-info";
+      case 4:
+        return "bg-label-secondary";
+      case 5:
+        return "bg-label-dark";
+    }
+  };
+
+  return (
+    <div className="table-responsive text-nowrap py-2 overflow-auto">
+      <table className="table px-2">
+        <thead>
+          <tr>
+            <th className="text-start" colSpan={5}>
+              Project Name
+            </th>
+            <th className="mx-2">Project Manger</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 class="dropdown">
+                <a
+                  class="dropdown-toggle hide-arrow cursor-pointer"
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                
+                >
+                  Status <i class="bx bx-filter"></i>
+                </a>
+                <ul class="dropdown-menu px-3 py-2">
+                  <li>
+                    <div class="form-check form-check-success  mb-1">
+                      <input
+                        name="statusRadio"
+                        class="form-check-input"
+                        type="radio"
+                        value="active"
+                        id="statusActive"
+                        checked
+                      />
+                      <label class="form-check-label text-success" for="statusActive">
+                        Active
+                      </label>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="form-check form-check-warning mb-1">
+                      <input
+                        name="statusRadio"
+                        class="form-check-input"
+                        type="radio"
+                        value="onhold"
+                        id="statusOnHold"
+                        checked
+                      />
+                      <label class="form-check-label text-warning" for="statusOnHold">
+                        On-Hold
+                      </label>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="form-check form-check-info mb-1">
+                      <input
+                        name="statusRadio"
+                        class="form-check-input"
+                        type="radio"
+                        value="inactive"
+                        id="statusInactive"
+                        checked
+                      />
+                      <label class="form-check-label text-info" for="statusInactive">
+                        Inactive
+                      </label>
+                    </div>
+                  </li>
+                  <li>
+                    <div class="form-check form-check-secondary mb-1">
+                      <input
+                       name="customRadioSecondary" class="form-check-input" type="radio" value="" id="customRadioSecondary" checked
+                      />
+                      <label class="form-check-label text-secondary" for="statusCompleted">
+                        Completed
+                      </label>
+                    </div>
+                  </li>
+                </ul>
+              </div>
+            </th>
+            <th className="mx-2">Action</th>
+          </tr>
+        </thead>
+        <tbody className="table-border-bottom-0">
+          {projects.map((project) => (
+            <tr className="py-8">
+              <td className="text-start" colSpan={5}>
+                <strong className="text-primary"> {project.name}</strong>
+              </td>
+              <td className="text-start">{project.contactPerson}</td>
+              <td className="small text-start">
+                <small>
+                  {" "}
+                  {project.startDate
+                    ? moment(project.startDate).format("DD-MMM-YYYY")
+                    : "NA"}
+                </small>
+              </td>
+              <td className="mx-2 text-start">
+                {project.endDate
+                  ? moment(project.endDate).format("DD-MMM-YYYY")
+                  : "NA"}
+              </td>
+              <td className="mx-2 text-start">{project.plannedWork}</td>
+
+              <td className="py-6 mx-2 text-start">
+                <div
+                  className="progress  rounded align-items-center"
+                  style={{ height: "8px" }}
+                >
+                  <div
+                    className="progress-bar rounded"
+                    role="progressbar"
+                    style={{
+                      width: getProgress(
+                        project.plannedWork,
+                        project.completedWork
+                      ),
+                    }}
+                    aria-valuenow={project.completedWork}
+                    aria-valuemin="0"
+                    aria-valuemax={project.plannedWork}
+                  ></div>
+                </div>
+              </td>
+              <td className="mx-6 ">
+                <p className="mb-0">
+                  <span
+                    className={
+                      `badge  ` + getProjectStatusColor(project.projectStatusId)
+                    }
+                  >
+                    {getProjectStatusName(project.projectStatusId)}
+                  </span>
+                </p>{" "}
+              </td>
+
+              <td className="mx-2 ">
+                {" "}
+                <i className="bx bx-dots-vertical-rounded bx-sm text-muted"></i>
+              </td>
+            </tr>
+          ))}
+        </tbody>
+      </table>
+    </div>
+  );
+};
+
+export default ProjectListView;