diff --git a/src/components/Project/AboutProject.jsx b/src/components/Project/AboutProject.jsx
index 6553b07b..ca3cc7cd 100644
--- a/src/components/Project/AboutProject.jsx
+++ b/src/components/Project/AboutProject.jsx
@@ -22,12 +22,12 @@ const AboutProject = () => {
               <li className="d-flex align-items-center mb-3">
                 <i className="bx bx-cog"></i>
                 <span className="fw-medium mx-2">Name:</span>{" "}
-                <span>{data.name}</span>
+                <span>{projects_Details.name}</span>
               </li>
               <li className="d-flex align-items-center mb-3">
                 <i className="bx bx-fingerprint"></i>
                 <span className="fw-medium mx-2">Nick Name:</span>{" "}
-                <span> {data.shortName} </span>
+                <span> {projects_Details.shortName} </span>
               </li>
               <li className="d-flex align-items-center mb-3">
                 <i className="bx bx-check"></i>
diff --git a/src/components/Project/ProjectOverview.jsx b/src/components/Project/ProjectOverview.jsx
index 2b162f9d..c489c339 100644
--- a/src/components/Project/ProjectOverview.jsx
+++ b/src/components/Project/ProjectOverview.jsx
@@ -1,11 +1,16 @@
 import React from "react";
-import {useEmployeesByProjectAllocated, useProjects} from "../../hooks/useProjects";
-import {formatNumber} from "../../utils/dateUtils";
+import {
+  useEmployeesByProjectAllocated,
+  useProjects,
+} from "../../hooks/useProjects";
+import { formatNumber } from "../../utils/dateUtils";
+import ProgressBar from "../common/ProgressBar";
 
-const ProjectOverview = ({project}) =>{
-  const {projects} = useProjects()
+const ProjectOverview = ({ project }) => {
+  const { projects } = useProjects();
+
+  const project_detail = projects.find((pro) => pro.id == project);
 
-  const project_detail = projects.find( ( pro ) => pro.id == project )
   return (
     <div className="card mb-6">
       <div className="card-header text-start">
@@ -20,13 +25,12 @@ const ProjectOverview = ({project}) =>{
           <li className="d-flex align-items-center mb-3">
             <i className="bx bx-check"></i>
             <span className="fw-medium mx-2">Task Planned:</span>{" "}
-            <span>{formatNumber(project_detail?.plannedWork)
-            }</span>
+            <span>{formatNumber(project_detail?.plannedWork)}</span>
           </li>
           <li className="d-flex align-items-center mb-3">
             <i className="bx bx-star"></i>
             <span className="fw-medium mx-2">Task Completed:</span>{" "}
-            <span>{formatNumber(project_detail?.completedWork) }</span>
+            <span>{formatNumber(project_detail?.completedWork)}</span>
           </li>
           <li className="d-flex align-items-center mb-3">
             <i className="bx bx-user"></i>
@@ -38,16 +42,21 @@ const ProjectOverview = ({project}) =>{
               <>
                 <div className="d-flex  text-end mb-2  mt-5">
                   <small className="text-body text-muted ">
-                    {Math.floor(
+                    {/* {Math.floor(
                       getProgressInNumber(
-                        project_detail.plannedWork,
+                        
                         project_detail.completedWork
                       )
-                    ) || 0}{" "}
+                    ) || 0}{" "} */}
+                    {
+                      (formatNumber(project_detail.plannedWork),
+                      "/",
+                      formatNumber(project_detail.completedWork))
+                    }
                     % Completed
                   </small>
                 </div>
-                <div
+                {/* <div
                   className="progress mb-4 rounded"
                   style={{ height: "8px" }}
                 >
@@ -64,7 +73,12 @@ const ProjectOverview = ({project}) =>{
                     aria-valuemin="0"
                     aria-valuemax={project_detail.plannedWork}
                   ></div>
-                </div>
+                </div> */}
+                <ProgressBar
+                  completedWork={formatNumber(project_detail?.completedWork)}
+                  plannedWork={formatNumber(project_detail?.plannedWork)}
+                  className="m-0 text-info"
+                />
               </>
             )}
           </li>