diff --git a/src/components/Project/ProjectCard.jsx b/src/components/Project/ProjectCard.jsx
index 1c3086fe..296c1605 100644
--- a/src/components/Project/ProjectCard.jsx
+++ b/src/components/Project/ProjectCard.jsx
@@ -29,6 +29,13 @@ const ProjectCard = ({ projectData }) => {
     }
   };
 
+  const getProgress = (planned, completed) => {
+    return (completed * 100) / planned + "%";
+  };
+  const getProgressInNumber = (planned, completed) => {
+    return (completed * 100) / planned ;
+  };
+
   const handleClose = () => setShowModal( false );
   
   const getProjectStatusName = (statusId) => {
@@ -229,29 +236,38 @@ const ProjectCard = ({ projectData }) => {
             </span>
           </div>
           <div className="d-flex justify-content-between align-items-center mb-2">
-            <small className="text-body">Task: 290/344</small>
-            <small className="text-body">95% Completed</small>
+              <small className="text-body">Task: {projectInfo.completedWork} / { projectInfo.plannedWork}</small>
+            <small className="text-body">{Math.floor(getProgressInNumber(projectInfo.plannedWork,projectInfo.completedWork)) || 0} % Completed</small>
           </div>
           <div className="progress mb-4 rounded" style={{ height: "8px" }}>
             <div
               className="progress-bar rounded"
               role="progressbar"
-              style={{ width: "95%" }}
-              aria-valuenow="95"
+              style={{ width: getProgress(projectInfo.plannedWork,projectInfo.completedWork) }}
+              aria-valuenow={projectInfo.completedWork}
               aria-valuemin="0"
-              aria-valuemax="100"
+              aria-valuemax={projectInfo.plannedWork}
             ></div>
           </div>
-          <div className="d-flex align-items-center">
-            <div className="d-flex align-items-center">
-            </div>
-            <div className="ms-auto">
+          <div className="d-flex align-items-center justify-content-between">
+            {/* <div className="d-flex align-items-center ">
+            </div> */}
+            <div >
               <a
             
+                className="text-muted d-flex "
+              >
+               <i className="bx bx-group bx-sm me-1_5"></i>{projectInfo?.teamSize}
+                </a>
+                
+              </div>
+              <div >
+              <a
                 className="text-muted d-flex align-items-center"
               >
                 <i className="bx bx-chat me-1"></i> 15
-              </a>
+                </a>
+                
             </div>
           </div>
         </div>
diff --git a/src/components/Project/ProjectOverview.jsx b/src/components/Project/ProjectOverview.jsx
index bf7ba756..1aa1f300 100644
--- a/src/components/Project/ProjectOverview.jsx
+++ b/src/components/Project/ProjectOverview.jsx
@@ -1,11 +1,10 @@
 import React from "react";
-import {useEmployeesByProjectAllocated} from "../../hooks/useProjects";
+import {useEmployeesByProjectAllocated, useProjects} from "../../hooks/useProjects";
 
 const ProjectOverview = ({project}) =>
 {
-  const {projectEmployees} = useEmployeesByProjectAllocated( project?.id );
-  let teamSize = projectEmployees.filter( ( emp ) => emp.isActive )
-
+const {projects} = useProjects()
+const teamSize = projects.find((pro)=>pro.id == project)
   return (
     <div className="card mb-6">
       <div className="card-body">
@@ -26,7 +25,7 @@ const ProjectOverview = ({project}) =>
           <li className="d-flex align-items-center">
             <i className="bx bx-user"></i>
             <span className="fw-medium mx-2">Current team Size:</span>{" "}
-            <span>{ teamSize?.length}</span>
+            <span>{teamSize?.teamSize}</span>
           </li>
         </ul>
       </div>
diff --git a/src/components/common/ProgressBar.jsx b/src/components/common/ProgressBar.jsx
new file mode 100644
index 00000000..1a29a343
--- /dev/null
+++ b/src/components/common/ProgressBar.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+
+const ProgressBar = ( {completeValue, totalValue} ) =>
+{
+    
+
+  const getProgress = (complete, total) => {
+    return (total * 100) / complete + "%";
+  };
+    return (
+        <div className="progress mb-4 rounded" style={{height: "8px"}}>
+                <div className="progress p-0">
+      <div
+        className="progress-bar"
+        role="progressbar"
+        style={{
+          width: `${getProgress( totalValue,completeValue)}`,
+          height: "10px",
+        }}
+        aria-valuenow={completeValue}
+        aria-valuemin="0"
+        aria-valuemax={totalValue}
+      ></div>
+    </div>
+        </div>
+
+  );
+};
+
+export default ProgressBar;
diff --git a/src/pages/project/ProjectDetails.jsx b/src/pages/project/ProjectDetails.jsx
index 91799d67..3385b585 100644
--- a/src/pages/project/ProjectDetails.jsx
+++ b/src/pages/project/ProjectDetails.jsx
@@ -102,7 +102,7 @@ const ProjectDetails = () => {
             </div>
             <div className="col-xl-4 col-lg-5 col-md-5">
               {/* Profile Overview */}
-              <ProjectOverview project={ project} />
+              <ProjectOverview project={projectId} />
               {/* Profile Overview */}
             </div>
           </div>
diff --git a/src/pages/project/ProjectList.jsx b/src/pages/project/ProjectList.jsx
index 11f6fe67..da90e759 100644
--- a/src/pages/project/ProjectList.jsx
+++ b/src/pages/project/ProjectList.jsx
@@ -23,7 +23,7 @@ const ProjectList = () =>
   const[HasManageProject,setHasManageProject] = useState(HasManageProjectPermission)
   const dispatch = useDispatch();
   const [currentPage, setCurrentPage] = useState(1);
-  const [itemsPerPage] = useState(5);
+  const [itemsPerPage] = useState(6);
 
     
     const handleShow = () => setShowModal(true);