diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
index 2b68163..63d19dc 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.ts
@@ -388,7 +388,12 @@ export class NttGanttComponent implements OnInit {
    * @param startDate new startDate from date-range-picker
    */
   public startDateChanged(startDate: any){
-      this.renderplanTime = false;
+    if(this.range.status == 'VALID' && this.range.controls.start.value && this.range.controls.end.value){ //event for Requesting new Records based on the Dates
+      this.projectStartDate = new Date(this.range.controls.start.value);
+      this.plantimeComponent.changeDateRange(this.projectStartDate, this.projectEndDate);
+      this.renderplanTime = true;
+
+    }
   }
 
   /**
@@ -397,9 +402,10 @@ export class NttGanttComponent implements OnInit {
   */
   public endDateChanged(endDate: any){
       if(this.range.status == 'VALID' && this.range.controls.start.value && this.range.controls.end.value){ //event for Requesting new Records based on the Dates
-        this.projectStartDate = new Date(this.range.controls.start.value);
         this.projectEndDate = new Date(this.range.controls.end.value);
+        this.plantimeComponent.changeDateRange(this.projectStartDate, this.projectEndDate);
         this.renderplanTime = true;
+
       }
   }
   /**
@@ -515,17 +521,19 @@ export class NttGanttComponent implements OnInit {
   public queryTaskbarInfo(args: any) {
     if(args.data.taskData.isRes == false){
       if(args.data.taskData.TaskID.includes("D2")){
+        args.milestoneBorder = "black";
+        console.log(args.taskbarElement);
         if (args.data.taskData.resources[0].state == 0 ) {
-          args.milestoneColor = "red";
+          args.milestoneColor = "#f83200";
         }
         if (args.data.taskData.resources[0].state == 1 ) {
-          args.milestoneColor = "orange";
+          args.milestoneColor = "#f98700";
         }
         if (args.data.taskData.resources[0].state == 3 ) {
-          args.milestoneColor = "yellow";
+          args.milestoneColor = "#f1b521";
         }
         if (args.data.taskData.resources[0].state == 6 ) {
-          args.milestoneColor = "lightgreen";
+          args.milestoneColor = "#89c341";
         }
         if (args.data.taskData.resources[0].state >= 10 ) {
           args.milestoneColor = "lightgrey";
diff --git a/frontend/src/app/plan-time-bar/plan-time-bar.component.ts b/frontend/src/app/plan-time-bar/plan-time-bar.component.ts
index a032b88..4aa75e0 100644
--- a/frontend/src/app/plan-time-bar/plan-time-bar.component.ts
+++ b/frontend/src/app/plan-time-bar/plan-time-bar.component.ts
@@ -165,5 +165,10 @@ export class PlanTimeBarComponent implements OnInit {
     this.fetchPlanTimes();
   }
 
+  public changeDateRange(startDate: Date, endDate: Date){
+    this.projectStartDate = startDate;
+    this.projectEndDate = endDate;
+  }
+
 }
 
diff --git a/frontend/src/index.html b/frontend/src/index.html
index 7771631..cab15eb 100644
--- a/frontend/src/index.html
+++ b/frontend/src/index.html
@@ -19,5 +19,10 @@
   .e-gantt .e-gantt-chart .e-active {
     background-color: #E0E0E0 !important;
   }
+  .e-gantt-milestone {
+    border: 2px solid red !important;
+  }
 </style>
 
+
+