diff --git a/src/components/ProgressByClient/ProgressByClient.tsx b/src/components/ProgressByClient/ProgressByClient.tsx
index 973d511..ed23c8d 100644
--- a/src/components/ProgressByClient/ProgressByClient.tsx
+++ b/src/components/ProgressByClient/ProgressByClient.tsx
@@ -112,14 +112,14 @@ const ProgressByClient: React.FC<Props> = () => {
   }
   
   useEffect(() => {
-    const projectName = []
+    const projectCode = []
     const manhourConsumptionPercentage = []
    for (let i = 0; i < clientSubsidiaryProjectResult.length; i++){
     clientSubsidiaryProjectResult[i].color = color[i]
-    projectName.push(clientSubsidiaryProjectResult[i].projectName)
+    projectCode.push(clientSubsidiaryProjectResult[i].projectCode)
     manhourConsumptionPercentage.push(clientSubsidiaryProjectResult[i].manhourConsumptionPercentage)
    }
-   setChartProjectName(projectName)
+   setChartProjectName(projectCode)
    setChartManhourConsumptionPercentage(manhourConsumptionPercentage)
   }, [clientSubsidiaryProjectResult]);
 
@@ -218,6 +218,12 @@ const ProgressByClient: React.FC<Props> = () => {
       },
       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 5c9db6d..2e0c844 100644
--- a/src/components/StaffUtilization/StaffUtilization.tsx
+++ b/src/components/StaffUtilization/StaffUtilization.tsx
@@ -250,6 +250,8 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
   const holidayDates = allHolidays.map(holiday => moment(holiday.date).format('YYYY-MM-DD')).join(',');
   const [totalManHoursMaxValue, setTotalManHoursMaxValue] = React.useState(5);
   const [totalManHoursByGradeMaxValue, setTotalManHoursByGradeMaxValue] = React.useState(5);
+  const [individualManhoursMaxValue, setIndividualManhoursMaxValue] = React.useState(12);
+  const [unsubmittedMaxValue, setUnsubmittedMaxValue] = React.useState(5);
   const [totalManhourByGradeActualManhours, setTotalManhourByGradeActualManhours]: any[] = React.useState([]);
   const [totalManhourByGradePlannedManhours, setTotalManhourByGradePlannedManhours]: any[] = React.useState([]);
   const [gradeNameList, setGradeNameList]: any[] = React.useState([]);
@@ -259,6 +261,8 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
   const [teamUnsubmitTeamId, setTeamUnsubmitTeamId]: 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 [individualStaffManhours, setIndividualStaffManhours]: any[] = React.useState([]);
@@ -266,6 +270,8 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
   const [totalNormalConsumption, setTotalNormalConsumption]: any = React.useState('NA');
   const [totalOtConsumption, setTotalOtConsumption]: any = React.useState('NA');
   const [totalLeaveHours, setTotalLeaveHours]: any = React.useState('NA');
+  const [currentPage, setCurrentPage] = useState(1);
+  const recordsPerPage = 10;
 
   const fetchComboData = async () => {
     const staffComboList = []
@@ -472,21 +478,33 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
     const fetchResult = await fetchWeeklyUnsubmit(teamUnsubmitTeamId, weeklyUnsubmittedTimeSheet.format('YYYY-MM-DD'), holidayDates);
     const result = []
     const staffList = []
+    var maxValue = 5
     for (var i = 0; i < fetchResult.length; i++) {
+      if (maxValue < fetchResult[i].UnsubmittedCount) {
+        maxValue = fetchResult[i].UnsubmittedCount
+      }
       result.push(fetchResult[i].UnsubmittedCount)
       staffList.push(fetchResult[i].name)
     }
+    setUnsubmittedMaxValue(maxValue)
     setUnsubmitCount(result)
     setUnsubmitStaffList(staffList)
   }
+
+
   const fetchMonthlyUnsubmittedData = async () => {
     const fetchResult = await fetchMonthlyUnsubmit(teamUnsubmitTeamId, unsubmitMonthlyFromValue.format('YYYY-MM-DD'), unsubmitMonthlyToValue.endOf('month').format('YYYY-MM-DD'), holidayDates);
     const result = []
     const staffList = []
+    var maxValue = 5
     for (var i = 0; i < fetchResult.length; i++) {
+      if (maxValue < fetchResult[i].UnsubmittedCount) {
+        maxValue = fetchResult[i].UnsubmittedCount
+      }
       result.push(fetchResult[i].UnsubmittedCount)
       staffList.push(fetchResult[i].name)
     }
+    setUnsubmittedMaxValue(maxValue)
     setUnsubmitCount(result)
     setUnsubmitStaffList(staffList)
   }
@@ -500,16 +518,21 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
     const result = []
     const projectList = []
     const percentageList = []
+    var maxValue = 12
     
     console.log(manhoursResult)
     if (manhoursResult.length > 0) {
       for (var i = 0; i < manhoursResult.length; i++) {
         if (manhoursResult[i].id !== null) {
+          if (maxValue < manhoursResult[i].manhours) {
+            maxValue = manhoursResult[i].manhours
+          }
           result.push(manhoursResult[i].manhours)
           projectList.push(manhoursResult[i].projectName)
           percentageList.push(manhoursResult[i].percentage)
         }
       }
+      setIndividualManhoursMaxValue(maxValue)
       setIndividualStaffProjectList(projectList)
       setIndividualStaffManhours(result)
       setIndividualStaffManhoursPercentage(percentageList)
@@ -529,12 +552,17 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
     const result = []
     const projectList = []
     const percentageList = []
+    var maxValue = 12
     if (manhoursResult.length > 0) {
       for (var i = 0; i < manhoursResult.length; i++) {
+        if (maxValue < manhoursResult[i].manhours) {
+          maxValue = manhoursResult[i].manhours
+        }
         result.push(manhoursResult[i].manhours)
         projectList.push(manhoursResult[i].projectName)
         percentageList.push(manhoursResult[i].percentage)
       }
+      setIndividualManhoursMaxValue(maxValue)
       setIndividualStaffProjectList(projectList)
       setIndividualStaffManhours(result)
       setIndividualStaffManhoursPercentage(percentageList)
@@ -553,12 +581,17 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
     const result = []
     const projectList = []
     const percentageList = []
+    var maxValue = 12
     if (manhoursResult.length > 0) {
       for (var i = 0; i < manhoursResult.length; i++) {
+        if (maxValue < manhoursResult[i].manhours) {
+          maxValue = manhoursResult[i].manhours
+        }
         result.push(manhoursResult[i].manhours)
         projectList.push(manhoursResult[i].projectName)
         percentageList.push(manhoursResult[i].percentage)
       }
+      setIndividualManhoursMaxValue(maxValue)
       setIndividualStaffProjectList(projectList)
       setIndividualStaffManhours(result)
       setIndividualStaffManhoursPercentage(percentageList)
@@ -569,6 +602,29 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
 
   }
 
+  const startIndex = (currentPage - 1) * recordsPerPage;
+  const endIndex = startIndex + recordsPerPage;
+  useEffect(() => {
+  const currentPageStaffData = unsubmitStaffList.slice(startIndex, endIndex)
+  const currentPageData = unsubmitCount.slice(startIndex, endIndex);
+  console.log(currentPage)
+  console.log(Math.ceil(unsubmitStaffList.length / recordsPerPage))
+  setCurrentPageUnsubmitStaffList(currentPageStaffData)
+  setCurrentPageUnsubmitCount(currentPageData)
+  }, [unsubmitCount,currentPage]);
+
+  const handlePrevPage = () => {
+    if (currentPage > 1) {
+      setCurrentPage(currentPage - 1);
+    }
+  };
+
+  const handleNextPage = () => {
+    if (endIndex < unsubmitCount.length) {
+      setCurrentPage(currentPage + 1);
+    }
+  };
+
   useEffect(() => {
     fetchComboData()
   }, []);
@@ -814,7 +870,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
           text: "Project",
         },
         min: 0,
-        max: 12,
+        max: individualManhoursMaxValue,
         tickAmount: 5,
       },
     ],
@@ -850,7 +906,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
       enabled: true,
     },
     xaxis: {
-      categories: unsubmitStaffList,
+      categories: currentPageUnsubmitStaffList,
     },
     yaxis: [
       {
@@ -858,7 +914,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
           text: "Staff",
         },
         min: 0,
-        max: 5,
+        max: unsubmittedMaxValue,
         tickAmount: 5,
       },
     ],
@@ -871,7 +927,7 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
         name: "Unsubmitted Time Sheet",
         type: "bar",
         color: "#00acb1",
-        data: unsubmitCount,
+        data: currentPageunsubmitCount,
       },
     ],
   };
@@ -1308,12 +1364,12 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
                       {teamTotalManhoursSpentSelect === "Monthly" && (
                         <LocalizationProvider dateAdapter={AdapterDayjs}>
                           <DatePicker
-                            className="w-40 h-10 align-top"
+                            className="w-44 h-10 align-top"
                             onChange={(newValue) =>
                               selectMonthlyPeriodFrom(newValue)
                             }
                             defaultValue={totalManHoursMonthlyFromValue}
-                            label={"Form"}
+                            label={"From"}
                             views={["month", "year"]}
                           />
                           <DatePicker
@@ -1415,14 +1471,14 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
                       {staffGradeManhoursSpentSelect === "Monthly" && (
                         <LocalizationProvider dateAdapter={AdapterDayjs}>
                           <DatePicker
-                            className="w-40 h-10 align-top"
+                            className="w-44 h-10 align-top"
                             onChange={(newValue) =>
                               selectStaffGradeMonthlyPeriodFrom(newValue)
                             }
                             defaultValue={
                               totalManHoursByStaffGradeMonthlyFromValue
                             }
-                            label={"Form"}
+                            label={"From"}
                             views={["month", "year"]}
                           />
                           <DatePicker
@@ -1600,6 +1656,38 @@ const StaffUtilization: React.FC<Props> = ({ abilities, staff }) => {
                   type="bar"
                   height="380"
                 />
+                <div className="float-right mr-4 mb-10">
+                  {currentPage === 1 && (
+                    <button className="bg-blue-500 text-white font-bold py-2 px-4 opacity-50 cursor-not-allowed rounded-l">
+                    Pervious
+                    </button>
+                  )}
+                  {currentPage !== 1 && (
+                    <button onClick={handlePrevPage} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 outline-none rounded-l">
+                    Previous
+                    </button>
+                  )}
+                  {endIndex >= unsubmitCount.length && (
+                    <button className="bg-blue-500 text-white font-bold py-2 px-4 opacity-50 cursor-not-allowed rounded-r mr-2">
+                    Next
+                    </button>
+                  )}
+                  {endIndex < unsubmitCount.length && (
+                  <button onClick={handleNextPage} className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 outline-none rounded-r mr-2">
+                    Next
+                  </button>
+                  )}
+                  Page&nbsp;
+                  {unsubmitCount.length === 0 && (
+                    0
+                  )}
+                  {unsubmitCount.length > 0 && (
+                    currentPage
+                  )}
+                  &nbsp;of&nbsp;
+                  {Math.ceil(unsubmitCount.length / recordsPerPage)}
+                  
+                 </div>
               </div>
             </Card>
             <Card>