diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 9721814..6cfed54 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -19,8 +19,8 @@
         "@angular/platform-browser": "^16.0.0",
         "@angular/platform-browser-dynamic": "^16.0.0",
         "@angular/router": "^16.0.0",
-        "@syncfusion/ej2-angular-gantt": "^26.1.35",
-        "@syncfusion/ej2-material-theme": "^26.1.35",
+        "@syncfusion/ej2-angular-gantt": "^26.2.4",
+        "@syncfusion/ej2-material-theme": "^26.2.4",
         "jquery": "^3.6.1",
         "moment": "^2.29.4",
         "rxjs": "^7.8.0",
diff --git a/frontend/package.json b/frontend/package.json
index 72ac0f5..de2327c 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -22,8 +22,8 @@
     "@angular/platform-browser": "^16.0.0",
     "@angular/platform-browser-dynamic": "^16.0.0",
     "@angular/router": "^16.0.0",
-    "@syncfusion/ej2-angular-gantt": "^26.1.35",
-    "@syncfusion/ej2-material-theme": "^26.1.35",
+    "@syncfusion/ej2-angular-gantt": "^26.2.4",
+    "@syncfusion/ej2-material-theme": "^26.2.4",
     "jquery": "^3.6.1",
     "moment": "^2.29.4",
     "rxjs": "^7.8.0",
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 32f8180..7bf256e 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -107,7 +107,7 @@
   <div class="right">
 
     <!-- Scale Picker -->
-    <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()"
+    <mat-button-toggle-group color="primary" style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()"
       name="fontStyle" aria-label="Font Style" [(ngModel)]="selectedScalar">
       <mat-button-toggle style="display: flex; align-items: center;" value="bold" *ngFor="let scalar of scalars"
         [value]="scalar">
@@ -310,4 +310,4 @@
   <mat-card-content>
     <p style="padding-left: 15px;">{{errorService.getLastError('error').message}}</p>
   </mat-card-content>
-</mat-card>
\ No newline at end of file
+</mat-card>
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
index c0c45e7..ddd8ace 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
@@ -904,7 +904,7 @@ export class NttGanttComponent implements OnInit {
    */
 
   public queryTaskbarInfo(args: any) {
-    // console.log(args.data.taskData);
+     console.log(args);
     if (args.taskbarType == 'Milestone' && args.data.taskData.TaskID.includes("D2")) {
       if (args.data.taskData.isFixed == false) {
         args.taskbarElement.children[1].classList.add('e-gantt-milestone-border1');
@@ -915,7 +915,7 @@ export class NttGanttComponent implements OnInit {
       if (args.data.taskData.TaskID.includes("D2")) {
         // console.log(args.data.taskData.resources[0]);
         if (args.data.taskData.resources[0].state == 0) {
-          args.milestoneColor = "#f83200"; //red
+          args.milestoneColor = "rgb(248, 50, 0)"; //red
           // console.log("red");
         }
         if (args.data.taskData.resources[0].state == 1) {
@@ -961,7 +961,7 @@ export class NttGanttComponent implements OnInit {
         // console.log("\nisRes: ", args.data.taskData.isRes);
         // console.log("\nisD2", args.data.taskData.TaskID.includes("D2"));
         // console.log("\nMilestone Color ready:",args.milestoneColor);
-
+        console.log(args.milestoneColor);
       }
     }
     else {