diff --git a/src/components/ProgressByClient/ProgressByClient.tsx b/src/components/ProgressByClient/ProgressByClient.tsx
index 115c08f..3d4ecd2 100644
--- a/src/components/ProgressByClient/ProgressByClient.tsx
+++ b/src/components/ProgressByClient/ProgressByClient.tsx
@@ -60,7 +60,31 @@ const ProgressByClient: React.FC<Props> = () => {
   const [selectedRows, setSelectedRows]:any[] = useState([]);
   const [chartProjectName, setChartProjectName]:any[] = useState([]);
   const [chartManhourConsumptionPercentage, setChartManhourConsumptionPercentage]:any[] = useState([]);
-  const color = ["#f57f90", "#94f7d6", "#87c5f5", "#ab95f5", "#fcd68b"];
+  const color = ["#f57f90", "#94f7d6", "#87c5f5", "#ab95f5", "#fcd68b",
+  "#f58a9b", "#8ef4d1", "#92caf9", "#a798f9", "#fad287",
+  "#f595a6", "#88f1cc", "#9dcff5", "#a39bf5", "#f8de83",
+  "#f5a0b1", "#82eec7", "#a8d4f1", "#9f9ef1", "#f6ea7f",
+  "#f5abb4", "#7cebca", "#b3d9ed", "#9ba1ed", "#f4f67b",
+  "#f5b6b7", "#76e8cd", "#bed6e9", "#97a4e9", "#f2fa77",
+  "#f5c1ba", "#70e5d0", "#c9d3e5", "#93a7e5", "#f0fe73",
+  "#f5ccbd", "#6ae2d3", "#d4d0e1", "#8faae1", "#eefe6f",
+  "#f5d7c0", "#64dfd6", "#dfc5dd", "#8badd5", "#ecfe6b",
+  "#f5e2c3", "#5edcd9", "#eabada", "#87b0c9", "#eafc67",
+  "#f5edc6", "#58d9dc", "#f5afd6", "#83b3bd", "#e8fc63",
+  "#f5f8c9", "#52d6df", "#ffacd2", "#7fb6b1", "#e6fc5f",
+  "#f5ffcc", "#4cd3e2", "#ffa9ce", "#7bb9a5", "#e4fc5b",
+  "#f2ffcf", "#46d0e5", "#ffa6ca", "#77bc99", "#e2fc57",
+  "#efffd2", "#40cde8", "#ffa3c6", "#73bf8d", "#e0fc53",
+  "#ecffd5", "#3acaeb", "#ffa0c2", "#6fc281", "#defb4f",
+  "#e9ffd8", "#34c7ee", "#ff9dbe", "#6bc575", "#dcfb4b",
+  "#e6ffdb", "#2ec4f1", "#ff9aba", "#67c869", "#dafb47",
+  "#e3ffde", "#28c1f4", "#ff97b6", "#63cb5d", "#d8fb43",
+  "#e0ffe1", "#22bef7", "#ff94b2", "#5fce51", "#d6fb3f",
+  "#ddfee4", "#1cbbfa", "#ff91ae", "#5bd145", "#d4fb3b",
+  "#dafee7", "#16b8fd", "#ff8eaa", "#57d439", "#d2fb37",
+  "#d7feea", "#10b5ff", "#ff8ba6", "#53d72d", "#d0fb33",
+  "#d4feed", "#0ab2ff", "#ff88a2", "#4fda21", "#cefb2f",
+  "#d1fef0", "#04afff", "#ff859e", "#4bdd15", "#ccfb2b"];
   const [clientSubsidiaryProjectResult, setClientSubsidiaryProjectResult]:any[] = useState([]);
 
   const fetchData = async () => {
@@ -465,7 +489,31 @@ const ProgressByClient: React.FC<Props> = () => {
       name: "Project Resource Consumption Percentage",
       data: chartManhourConsumptionPercentage,
     },],
-    colors: ["#f57f90", "#94f7d6", "#87c5f5", "#ab95f5", "#fcd68b"],
+    colors: ["#f57f90", "#94f7d6", "#87c5f5", "#ab95f5", "#fcd68b",
+    "#f58a9b", "#8ef4d1", "#92caf9", "#a798f9", "#fad287",
+    "#f595a6", "#88f1cc", "#9dcff5", "#a39bf5", "#f8de83",
+    "#f5a0b1", "#82eec7", "#a8d4f1", "#9f9ef1", "#f6ea7f",
+    "#f5abb4", "#7cebca", "#b3d9ed", "#9ba1ed", "#f4f67b",
+    "#f5b6b7", "#76e8cd", "#bed6e9", "#97a4e9", "#f2fa77",
+    "#f5c1ba", "#70e5d0", "#c9d3e5", "#93a7e5", "#f0fe73",
+    "#f5ccbd", "#6ae2d3", "#d4d0e1", "#8faae1", "#eefe6f",
+    "#f5d7c0", "#64dfd6", "#dfc5dd", "#8badd5", "#ecfe6b",
+    "#f5e2c3", "#5edcd9", "#eabada", "#87b0c9", "#eafc67",
+    "#f5edc6", "#58d9dc", "#f5afd6", "#83b3bd", "#e8fc63",
+    "#f5f8c9", "#52d6df", "#ffacd2", "#7fb6b1", "#e6fc5f",
+    "#f5ffcc", "#4cd3e2", "#ffa9ce", "#7bb9a5", "#e4fc5b",
+    "#f2ffcf", "#46d0e5", "#ffa6ca", "#77bc99", "#e2fc57",
+    "#efffd2", "#40cde8", "#ffa3c6", "#73bf8d", "#e0fc53",
+    "#ecffd5", "#3acaeb", "#ffa0c2", "#6fc281", "#defb4f",
+    "#e9ffd8", "#34c7ee", "#ff9dbe", "#6bc575", "#dcfb4b",
+    "#e6ffdb", "#2ec4f1", "#ff9aba", "#67c869", "#dafb47",
+    "#e3ffde", "#28c1f4", "#ff97b6", "#63cb5d", "#d8fb43",
+    "#e0ffe1", "#22bef7", "#ff94b2", "#5fce51", "#d6fb3f",
+    "#ddfee4", "#1cbbfa", "#ff91ae", "#5bd145", "#d4fb3b",
+    "#dafee7", "#16b8fd", "#ff8eaa", "#57d439", "#d2fb37",
+    "#d7feea", "#10b5ff", "#ff8ba6", "#53d72d", "#d0fb33",
+    "#d4feed", "#0ab2ff", "#ff88a2", "#4fda21", "#cefb2f",
+    "#d1fef0", "#04afff", "#ff859e", "#4bdd15", "#ccfb2b"],
     plotOptions: {
       bar: {
         horizontal: true,
@@ -501,7 +549,7 @@ const ProgressByClient: React.FC<Props> = () => {
 
   const handleSelectionChange = (newSelectionModel: GridRowSelectionModel) => {
     const selectedRowsData:any = clientSubsidiaryProjectResult.filter((row:any) =>
-      newSelectionModel.includes(row.projectId),
+      newSelectionModel.includes(row.id),
     );
     console.log(selectedRowsData);
     const projectArray = [];