diff --git a/src/pages/project/ProjectList.jsx b/src/pages/project/ProjectList.jsx
index c6a94ebd..c66bbccd 100644
--- a/src/pages/project/ProjectList.jsx
+++ b/src/pages/project/ProjectList.jsx
@@ -27,7 +27,12 @@ const ProjectList = () => {
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage] = useState(6);
   const [searchTerm, setSearchTerm] = useState("");
-  const [selectedStatuses, setSelectedStatuses] = useState(["b74da4c2-d07e-46f2-9919-e75e49b12731","603e994b-a27f-4e5d-a251-f3d69b0498ba","ef1c356e-0fe0-42df-a5d3-8daee355492d","33deaef9-9af1-4f2a-b443-681ea0d04f81",]);
+  const [selectedStatuses, setSelectedStatuses] = useState([
+    "b74da4c2-d07e-46f2-9919-e75e49b12731",
+    "603e994b-a27f-4e5d-a251-f3d69b0498ba",
+    "ef1c356e-0fe0-42df-a5d3-8daee355492d",
+    "33deaef9-9af1-4f2a-b443-681ea0d04f81",
+  ]);
 
   const handleShow = () => setShowModal(true);
   const handleClose = () => setShowModal(false);
@@ -42,12 +47,12 @@ const ProjectList = () => {
       });
 
       const sortedGrouped = selectedStatuses
-  .filter((statusId) => grouped[statusId]) 
-  .flatMap((statusId) =>
-    grouped[statusId].sort((a, b) =>
-      a.name.toLowerCase().localeCompare(b.name.toLowerCase())
-    )
-  );
+        .filter((statusId) => grouped[statusId])
+        .flatMap((statusId) =>
+          grouped[statusId].sort((a, b) =>
+            a.name.toLowerCase().localeCompare(b.name.toLowerCase())
+          )
+        );
 
       setProjectList(sortedGrouped);
     }
@@ -171,7 +176,7 @@ const ProjectList = () => {
                 data-bs-custom-class="tooltip"
                 title="Card View"
               >
-                <i className="bx bx-grid-alt"></i>
+                <i className="bx bx-grid-alt bx-sm"></i>
               </button>
               <button
                 type="button"
@@ -185,9 +190,52 @@ const ProjectList = () => {
                 data-bs-custom-class="tooltip"
                 title="List View"
               >
-                <i className="bx bx-list-ul"></i>
+                <i className="bx bx-list-ul bx-sm"></i>
               </button>
             </div>
+            {!listView && (
+                <div className="dropdown ms-3">
+                <a
+                  className="dropdown-toggle hide-arrow cursor-pointer"
+                  data-bs-toggle="dropdown"
+                  aria-expanded="false"
+                >
+                  <i className="bx bx-filter bx-lg"></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>
@@ -234,10 +282,22 @@ const ProjectList = () => {
                         </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" },
+                            {
+                              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">