diff --git a/src/app/api/staffUtilization/index.ts b/src/app/api/staffUtilization/index.ts
index bb6cfd6..84c10c7 100644
--- a/src/app/api/staffUtilization/index.ts
+++ b/src/app/api/staffUtilization/index.ts
@@ -71,8 +71,8 @@ export const fetchmonthlyTeamTotalManhours = cache(async (teamId: number, startd
   return serverFetchJson<monthlyTeamTotalManhoursSpentResult[]>(`${BASE_API_URL}/dashboard/searchMonthlyActualTeamTotalManhoursSpent?teamId=${teamId}&startdate=${startdate}&enddate=${enddate}`);
 });
 
-export const fetchTotalManhoursByGrade = cache(async (startdate:string, enddate:string) => {
-  return serverFetchJson<totalManhourByGradeResult[]>(`${BASE_API_URL}/dashboard/searchTotalManhoursSpentByStaffGrade?startdate=${startdate}&enddate=${enddate}`);
+export const fetchTotalManhoursByGrade = cache(async (startdate:string, enddate:string, teamId:number) => {
+  return serverFetchJson<totalManhourByGradeResult[]>(`${BASE_API_URL}/dashboard/searchTotalManhoursSpentByStaffGrade?startdate=${startdate}&enddate=${enddate}&teamId=${teamId}`);
 });
 
 export const fetchWeeklyUnsubmit = cache(async (teamId:number,startdate:string, publicHolidayList:string) => {
diff --git a/src/components/ProgressByTeam/ProgressByTeam.tsx b/src/components/ProgressByTeam/ProgressByTeam.tsx
index 86d28e1..09ac58a 100644
--- a/src/components/ProgressByTeam/ProgressByTeam.tsx
+++ b/src/components/ProgressByTeam/ProgressByTeam.tsx
@@ -91,14 +91,14 @@ const ProgressByTeam: React.FC = () => {
   }
 
   useEffect(() => {
-    const projectName = []
+    const projectNo = []
     const manhourConsumptionPercentage = []
    for (let i = 0; i < teamProjectResult.length; i++){
     teamProjectResult[i].color = color[i]
-    projectName.push(teamProjectResult[i].projectName)
+    projectNo.push(teamProjectResult[i].projectNo)
     manhourConsumptionPercentage.push(teamProjectResult[i].manhourConsumptionPercentage)
    }
-   setChartProjectName(projectName)
+   setChartProjectName(projectNo)
    setChartManhourConsumptionPercentage(manhourConsumptionPercentage)
   }, [teamProjectResult]);
 
@@ -249,6 +249,12 @@ const ProgressByTeam: React.FC = () => {
       },
       flex: 0.1,
     },
+    {
+      id: "projectCode",
+      field: "projectCode",
+      headerName: "Project No",
+      minWidth:100
+    },
     {
       id: "projectName",
       field: "projectName",
diff --git a/src/components/StaffUtilization/StaffUtilization.tsx b/src/components/StaffUtilization/StaffUtilization.tsx
index 2e0c844..81bd660 100644
--- a/src/components/StaffUtilization/StaffUtilization.tsx
+++ b/src/components/StaffUtilization/StaffUtilization.tsx
@@ -108,8 +108,8 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
   const todayDate = new Date();
   const firstDayOfWeek = new Date();
   const lastDayOfWeek = new Date();
-  firstDayOfWeek.setDate(todayDate.getDate() - todayDate.getDay() + 1);
-  lastDayOfWeek.setDate(todayDate.getDate() - todayDate.getDay() + 7);
+  firstDayOfWeek.setDate(todayDate.getDate() - todayDate.getDay() + 0);
+  lastDayOfWeek.setDate(todayDate.getDate() - todayDate.getDay() + 6);
   const firstDayOfMonth = new Date(
     todayDate.getFullYear(),
     todayDate.getMonth(),
@@ -259,12 +259,14 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
   const [staffOptions, setStaffOptions]: any[] = React.useState([]);
   const [teamManhoursTeamId, setTeamManhoursTeamId]: any[] = React.useState(abilityViewDashboardAll ? 0 : staff.teamId);
   const [teamUnsubmitTeamId, setTeamUnsubmitTeamId]: any[] = React.useState(abilityViewDashboardAll ? 0 : staff.teamId);
+  const [staffGradeTeamId, setStaffGradeTeamId]: any[] = React.useState(abilityViewDashboardAll ? 0 : staff.teamId);
   const [staffId, setStaffId]: any[] = React.useState(0);
   const [unsubmitCount, setUnsubmitCount]: any[] = React.useState([]);
   const [currentPageUnsubmitStaffList, setCurrentPageUnsubmitStaffList]: any[] = React.useState([]);
   const [currentPageunsubmitCount, setCurrentPageUnsubmitCount]: any[] = React.useState([]);
   const [unsubmitStaffList, setUnsubmitStaffList]: any[] = React.useState([]);
   const [individualStaffProjectList, setIndividualStaffProjectList]: any[] = React.useState([]);
+  const [individualStaffProjectCodeList, setIndividualStaffProjectCodeList]: any[] = React.useState([]);
   const [individualStaffManhours, setIndividualStaffManhours]: any[] = React.useState([]);
   const [individualStaffManhoursPercentage, setIndividualStaffManhoursPercentage]: any[] = React.useState([]);
   const [totalNormalConsumption, setTotalNormalConsumption]: any = React.useState('NA');
@@ -381,7 +383,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
   }
 
   const fetchTotalManhoursByGradeData = async () => {
-    const fetchResult = await fetchTotalManhoursByGrade(weeklyValueByStaffGrade.format('YYYY-MM-DD'), weeklyToValueByStaffGrade.format('YYYY-MM-DD'));
+    const fetchResult = await fetchTotalManhoursByGrade(weeklyValueByStaffGrade.format('YYYY-MM-DD'), weeklyToValueByStaffGrade.format('YYYY-MM-DD'),staffGradeTeamId);
     const actualManhours = fetchResult[0].staffGradeTotalManhours
     const plannedManhours = fetchResult[0].staffGradeTotalPlannedManhours
     var chartMax = 5
@@ -428,7 +430,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
     setTotalManHoursByGradeMaxValue(chartMax)
   }
   const fetchMonthlyTotalManhoursByGradeData = async () => {
-    const fetchResult = await fetchTotalManhoursByGrade(totalManHoursMonthlyFromValue.format('YYYY-MM-DD'), totalManHoursMonthlyToValue.endOf('month').format('YYYY-MM-DD'));
+    const fetchResult = await fetchTotalManhoursByGrade(totalManHoursMonthlyFromValue.format('YYYY-MM-DD'), totalManHoursMonthlyToValue.endOf('month').format('YYYY-MM-DD'),staffGradeTeamId);
     const actualManhours = fetchResult[0].staffGradeTotalManhours
     const plannedManhours = fetchResult[0].staffGradeTotalPlannedManhours
     var chartMax = 5
@@ -517,6 +519,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
     const leaveResult = fetchResult[0].individualStaffTotalLeaveHoursByDay
     const result = []
     const projectList = []
+    const projectCodeList = []
     const percentageList = []
     var maxValue = 12
     
@@ -528,11 +531,13 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
             maxValue = manhoursResult[i].manhours
           }
           result.push(manhoursResult[i].manhours)
+          projectCodeList.push(manhoursResult[i].projectNo)
           projectList.push(manhoursResult[i].projectName)
-          percentageList.push(manhoursResult[i].percentage)
+          percentageList.push(manhoursResult[i].manhours)
         }
       }
       setIndividualManhoursMaxValue(maxValue)
+      setIndividualStaffProjectCodeList(projectCodeList)
       setIndividualStaffProjectList(projectList)
       setIndividualStaffManhours(result)
       setIndividualStaffManhoursPercentage(percentageList)
@@ -551,6 +556,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
     const leaveResult = fetchResult[0].individualStaffTotalLeaveHoursWeekly
     const result = []
     const projectList = []
+    const projectCodeList = []
     const percentageList = []
     var maxValue = 12
     if (manhoursResult.length > 0) {
@@ -559,11 +565,13 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
           maxValue = manhoursResult[i].manhours
         }
         result.push(manhoursResult[i].manhours)
+        projectCodeList.push(manhoursResult[i].projectNo)
         projectList.push(manhoursResult[i].projectName)
         percentageList.push(manhoursResult[i].percentage)
       }
       setIndividualManhoursMaxValue(maxValue)
       setIndividualStaffProjectList(projectList)
+      setIndividualStaffProjectCodeList(projectCodeList)
       setIndividualStaffManhours(result)
       setIndividualStaffManhoursPercentage(percentageList)
       setTotalNormalConsumption(totalResult[0].normalManhours)
@@ -580,6 +588,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
     const leaveResult = fetchResult[0].individualStaffTotalLeaveHoursByMonth
     const result = []
     const projectList = []
+    const projectCodeList = []
     const percentageList = []
     var maxValue = 12
     if (manhoursResult.length > 0) {
@@ -588,11 +597,13 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
           maxValue = manhoursResult[i].manhours
         }
         result.push(manhoursResult[i].manhours)
+        projectCodeList.push(manhoursResult[i].projectNo)
         projectList.push(manhoursResult[i].projectName)
         percentageList.push(manhoursResult[i].percentage)
       }
       setIndividualManhoursMaxValue(maxValue)
       setIndividualStaffProjectList(projectList)
+      setIndividualStaffProjectCodeList(projectCodeList)
       setIndividualStaffManhours(result)
       setIndividualStaffManhoursPercentage(percentageList)
       setTotalNormalConsumption(totalResult[0].normalManhours)
@@ -862,7 +873,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
       enabled: true,
     },
     xaxis: {
-      categories: individualStaffProjectList,
+      categories: individualStaffProjectCodeList,
     },
     yaxis: [
       {
@@ -878,6 +889,13 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
       borderColor: "#f1f1f1",
     },
     annotations: {},
+    tooltip: {
+      x: {
+        formatter: (value, { series, seriesIndex, dataPointIndex, w }) => {
+          return individualStaffProjectList[dataPointIndex];
+        },
+      },
+    },
     series: [
       {
         name: "Manhours(Hour)",
@@ -1442,6 +1460,28 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
                   </div>
                   <div className="inline-block w-fit mt-2">
                     <div className="inline-block mt-2 ml-6">
+                    {abilityViewDashboardAll &&
+                      <div className="inline-block">
+                        <div className="inline-block ml-6">
+                          <Label className="text-slate-500 font-medium">
+                            Team:&nbsp;
+                          </Label>
+                        </div>
+                        <div className="inline-block ml-1 w-60">
+                          <Select
+                            placeholder="Please select a team"
+                            options={teamManhoursTeamOptions}
+                            isClearable={true}
+                            onChange={(selectedOption: any) => {
+                              if (selectedOption === null) {
+                                setStaffGradeTeamId(null);
+                              } else {
+                                setStaffGradeTeamId(selectedOption.value);
+                              }
+                            }}
+                          />
+                        </div>
+                      </div>}
                       {staffGradeManhoursSpentSelect === "Weekly" && (
                         <LocalizationProvider dateAdapter={AdapterDayjs}>
                           <DatePicker