diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index 9c11cf7..c964a3f 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -14,14 +14,16 @@
   flex-direction: row;
   margin: 0px 0;
   align-items: flex-start;
-  height: 5%;
+  height: 3%;
 
 }
 
 .mat-mdc-form-field + .mat-mdc-form-field {
   margin-left: 8px;
 }
-
+ .mat-button-toggle-group .mat-button-toggle-button {
+  height: 100%!important;
+}
 .toggleContainer{
   display: flex;
   flex-direction: column;
@@ -47,6 +49,11 @@
 .filterButton{
   margin-right: 0.5%;
  }
+
+ /* .datePickerContainer{
+  height: 20px;
+  width: 400px;
+ } */
  /*
 ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
   background-color: #d56100;
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 58febe6..3524bba 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -1,30 +1,21 @@
 <div id="topbar">
-  <mat-form-field class="datePicker" appearance="fill">
-    <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label>
-    <mat-date-range-input  [formGroup]="range" [rangePicker]="picker">
-      <input matStartDate formControlName="start" placeholder="Start date" (dateChange)="startDateChanged($event)">
-      <input matEndDate formControlName="end" placeholder="End date" (dateChange)="endDateChanged($event)">
-    </mat-date-range-input>
-    <!-- <mat-hint>tt.mm.yyyy – tt.mm.yyyy</mat-hint> -->
-    <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle>
-    <mat-date-range-picker #picker></mat-date-range-picker>
 
-    <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
-    <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
-  </mat-form-field>
+    <mat-form-field class="datePicker"  appearance="fill" >
+      <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label>
+      <mat-date-range-input  [formGroup]="range"  [rangePicker]="picker">
+        <input matStartDate formControlName="start" placeholder="Start date" (dateChange)="startDateChanged($event)">
+        <input matEndDate formControlName="end" placeholder="End date" (dateChange)="endDateChanged($event)">
+      </mat-date-range-input>
+      <!-- <mat-datepicker-toggle matIconSuffix [for]="picker"></mat-datepicker-toggle> -->
+      <mat-date-range-picker #picker></mat-date-range-picker>
+      <mat-error *ngIf="range.controls.start.hasError('matStartDateInvalid')">Invalid start date</mat-error>
+      <mat-error *ngIf="range.controls.end.hasError('matEndDateInvalid')">Invalid end date</mat-error>
+    </mat-form-field>
+    <button mat-basic-button color="" style="height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 2px;  border-top: none; border-left: none; border-right: none; border-top-right-radius: 4px;" (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
 
 
-  <!-- <mat-radio-group
-   (change)="changeScalar()"
-    aria-labelledby="example-radio-group-label"
-    class="example-radio-group"
-    [(ngModel)]="selectedScalar">
-    <mat-radio-button color="primary" class="example-radio-button" *ngFor="let scalar of scalars" [value]="scalar" >
-      {{scalar}}
-    </mat-radio-button>
-  </mat-radio-group> -->
   <div class="scalarContainer">
-    <mat-button-toggle-group  (change)="changeScalar()" name="fontStyle" aria-label="Font Style"   [(ngModel)]="selectedScalar">
+    <mat-button-toggle-group style="height: 59px;"  (change)="changeScalar()" name="fontStyle" aria-label="Font Style"   [(ngModel)]="selectedScalar">
       <mat-button-toggle value="bold"*ngFor="let scalar of scalars" [value]="scalar">
         {{scalar}}
       </mat-button-toggle>