diff --git a/src/pages/project/ProjectList.jsx b/src/pages/project/ProjectList.jsx
index a0e9ea3e..aa4f5e3a 100644
--- a/src/pages/project/ProjectList.jsx
+++ b/src/pages/project/ProjectList.jsx
@@ -6,37 +6,35 @@ import ProjectRepository from "../../repositories/ProjectRepository";
 import { useProjects } from "../../hooks/useProjects";
 import { useDispatch } from "react-redux";
 import showToast from "../../services/toastService";
-import {  getCachedData,  cacheData} from "../../slices/apiDataManager";
-import {useHasUserPermission} from "../../hooks/useHasUserPermission"
+import { getCachedData, cacheData } from "../../slices/apiDataManager";
+import { useHasUserPermission } from "../../hooks/useHasUserPermission";
 import { useProfile } from "../../hooks/useProfile";
-import {MANAGE_PROJECT} from "../../utils/constants";
+import { MANAGE_PROJECT } from "../../utils/constants";
+import ProjectListView from "./ProjectListView";
 
-const ProjectList = () =>
-{
-
-
-  const {profile: loginUser} = useProfile();
+const ProjectList = () => {
+  const { profile: loginUser } = useProfile();
+  const [listView, setListView] = useState(true);
   const [showModal, setShowModal] = useState(false);
-  const {projects, loading, error, refetch} = useProjects();
+  const { projects, loading, error, refetch } = useProjects();
   const [refresh, setRefresh] = useState(false);
-  const [ projectList, setProjectList ] = useState( [] );
-  const HasManageProjectPermission = useHasUserPermission( MANAGE_PROJECT )
-  const[HasManageProject,setHasManageProject] = useState(HasManageProjectPermission)
+  const [projectList, setProjectList] = useState([]);
+  const HasManageProjectPermission = useHasUserPermission(MANAGE_PROJECT);
+  const [HasManageProject, setHasManageProject] = useState(
+    HasManageProjectPermission
+  );
   const dispatch = useDispatch();
   const [currentPage, setCurrentPage] = useState(1);
   const [itemsPerPage] = useState(6);
 
-    
-    const handleShow = () => setShowModal(true);
-    const handleClose = () => setShowModal( false );
-
-
+  const handleShow = () => setShowModal(true);
+  const handleClose = () => setShowModal(false);
 
   useEffect(() => {
     if (!loading && Array.isArray(projects)) {
       // Step 1: Group projects by statusId
       const grouped = {};
-  
+
       projects.forEach((project) => {
         const statusId = project.projectStatusId;
         if (!grouped[statusId]) {
@@ -44,7 +42,7 @@ const ProjectList = () =>
         }
         grouped[statusId].push(project);
       });
-  
+
       // Step 2: Sort each group by name
       const sortedGrouped = Object.keys(grouped)
         .sort() // sort group keys (status IDs)
@@ -53,35 +51,34 @@ const ProjectList = () =>
             a.name.toLowerCase().localeCompare(b.name.toLowerCase())
           )
         );
-  
+
       setProjectList(sortedGrouped); // final sorted flat list
     }
-    
-  }, [ projects, loginUser?.projects, loading ] );
+  }, [projects, loginUser?.projects, loading]);
 
   useEffect(() => {
     if (loginUser) {
-      setHasManageProject(HasManageProjectPermission); 
+      setHasManageProject(HasManageProjectPermission);
     } else {
-      setHasManageProject(false);     }
+      setHasManageProject(false);
+    }
   }, [loginUser, HasManageProjectPermission]);
-  
-
 
   const handleSubmitForm = (newProject) => {
     ProjectRepository.manageProject(newProject)
-      .then( ( response ) =>
-      {
-       
-        const cachedProjects_list = getCachedData( "projectslist" ) || [];
-        
-        const updated_Projects_list = [ ...cachedProjects_list, response.data ];
-        
+      .then((response) => {
+        const cachedProjects_list = getCachedData("projectslist") || [];
+
+        const updated_Projects_list = [...cachedProjects_list, response.data];
+
         cacheData("projectslist", updated_Projects_list);
-        setProjectList((prevProjectList) => [...prevProjectList, response.data]);
+        setProjectList((prevProjectList) => [
+          ...prevProjectList,
+          response.data,
+        ]);
 
         showToast("Project Created successfully.", "success");
-        setShowModal(false)
+        setShowModal(false);
       })
       .catch((error) => {
         closeModal();
@@ -98,33 +95,31 @@ const ProjectList = () =>
 
   const indexOfLastItem = currentPage * itemsPerPage;
   const indexOfFirstItem = indexOfLastItem - itemsPerPage;
-  const currentItems =   Array.isArray(projectList)
-  ? projectList.slice(indexOfFirstItem, indexOfLastItem)
+  const currentItems = Array.isArray(projectList)
+    ? projectList.slice(indexOfFirstItem, indexOfLastItem)
     : [];
-  
+
   const paginate = (pageNumber) => setCurrentPage(pageNumber);
   const totalPages = Array.isArray(projectList)
     ? Math.ceil(projectList.length / itemsPerPage)
     : 0;
 
- 
-  
   return (
     <>
       <div
-        className={`modal fade ${showModal ? 'show' : ''}`}
+        className={`modal fade ${showModal ? "show" : ""}`}
         tabIndex="-1"
         role="dialog"
-        style={{ display: showModal ? 'block' : 'none' }}
+        style={{ display: showModal ? "block" : "none" }}
         aria-hidden={!showModal}
       >
-          <ManageProjectInfo
-            project={null}
-            handleSubmitForm={handleSubmitForm}
-            onClose={handleClose}
-          ></ManageProjectInfo>
-        </div>
-     
+        <ManageProjectInfo
+          project={null}
+          handleSubmitForm={handleSubmitForm}
+          onClose={handleClose}
+        ></ManageProjectInfo>
+      </div>
+
       <div className="container-xxl flex-grow-1 container-p-y">
         <Breadcrumb
           data={[
@@ -133,16 +128,51 @@ const ProjectList = () =>
           ]}
         ></Breadcrumb>
 
-        <div className="row">
-          <div
+        <div className="d-flex justify-content-between mb-4">
+          {/* <div
             className={`col-md-12 col-lg-12 col-xl-12 order-0 mb-4 ${
               !error && !projects ? "text-center" : "text-end"
             }`}
           >
-            {" "}
+           
+          
+          </div> */}
+
+          <div>
+            <div
+              id="DataTables_Table_0_filter"
+              className="dataTables_filter d-flex justify-content-start"
+            >
+              <label>
+                <input
+                  type="search"
+                  className="form-control form-control-sm"
+                  placeholder="Search"
+                  aria-controls="DataTables_Table_0"
+                ></input>
+              </label>
+              <button
+                type="button"
+                className={`btn btn-icon btn-sm ms-2  p-0  ${ listView ? "btn-secondary" : "btn-label-secondary" }`}
+                onClick={()=>setListView(!listView)}
+              >
+                <span class="bx bx-list-ul"></span>
+              </button>
+              <button
+                type="button"
+                className={`btn btn-icon btn-sm ms-2  p-0  ${ listView ? "btn-label-secondary" : "btn-secondary" }`}
+                onClick={()=>setListView(!listView)}
+              >
+                <span class="bx bx-grid-alt"></span>
+              </button>
+            </div>
+          </div>
+          <div>
             <button
               type="button"
-              className={`btn btn-xs btn-primary ${!HasManageProject && 'd-none' }`}
+              className={`btn btn-xs btn-primary ${
+                !HasManageProject && "d-none"
+              }`}
               data-bs-toggle="modal"
               data-bs-target="#create-project-model"
               onClick={handleShow}
@@ -174,59 +204,57 @@ const ProjectList = () =>
 
         <div className="row">
           {loading && <p className="text-center">Loading...</p>}
-
-          
-          {currentItems &&
+           
+          {listView ? <ProjectListView/> :
+        currentItems &&
             currentItems.map((item) => (
               <ProjectCard projectData={item} key={item.id}></ProjectCard>
             ))}
         </div>
-           {/* Pagination */}
-           {!loading && (
-                  <nav aria-label="Page ">
-                    <ul className="pagination pagination-sm justify-content-end py-1">
-                      <li
-                        className={`page-item  ${
-                          currentPage === 1 ? "disabled" : ""
-                        }`}
-                      >
-                        <button
-                          className="page-link btn-xs"
-                          onClick={() => paginate(currentPage - 1)}
-                        >
-                          &laquo;
-                        </button>
-                      </li>
-                      {[...Array(totalPages)]?.map((_, index) => (
-                        <li
-                          key={index}
-                          className={`page-item ${
-                            currentPage === index + 1 ? "active" : ""
-                          }`}
-                        >
-                          <button
-                            className="page-link "
-                            onClick={() => paginate(index + 1)}
-                          >
-                            {index + 1}
-                          </button>
-                        </li>
-                      ))}
-                      <li
-                        className={`page-item ${
-                          currentPage === totalPages ? "disabled" : ""
-                        }`}
-                      >
-                        <button
-                          className="page-link "
-                          onClick={() => paginate(currentPage + 1)}
-                        >
-                          &raquo;
-                        </button>
-                      </li>
-                    </ul>
-                  </nav>
-            )}
+        {/* Pagination */}
+        {!loading && (
+          <nav aria-label="Page ">
+            <ul className="pagination pagination-sm justify-content-end py-1">
+              <li
+                className={`page-item  ${currentPage === 1 ? "disabled" : ""}`}
+              >
+                <button
+                  className="page-link btn-xs"
+                  onClick={() => paginate(currentPage - 1)}
+                >
+                  &laquo;
+                </button>
+              </li>
+              {[...Array(totalPages)]?.map((_, index) => (
+                <li
+                  key={index}
+                  className={`page-item ${
+                    currentPage === index + 1 ? "active" : ""
+                  }`}
+                >
+                  <button
+                    className="page-link "
+                    onClick={() => paginate(index + 1)}
+                  >
+                    {index + 1}
+                  </button>
+                </li>
+              ))}
+              <li
+                className={`page-item ${
+                  currentPage === totalPages ? "disabled" : ""
+                }`}
+              >
+                <button
+                  className="page-link "
+                  onClick={() => paginate(currentPage + 1)}
+                >
+                  &raquo;
+                </button>
+              </li>
+            </ul>
+          </nav>
+        )}
       </div>
     </>
   );