diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index e7d0454..055dd42 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -259,12 +259,19 @@
   height: 70%;
   width: 59px;
   background-color: rgb(255, 255, 255);
-  border-width: 1px;
-  border: none;
-  border-bottom: 1px;
-  border-top-right-radius: 4px;
   border: solid 1px rgba(0, 0, 0, 0.124);
-  border-radius: 8px;
+  border-radius: 0px 8px 8px 0px;
+  border-left: none;
+}
+
+.dateButton mat-icon {
+  transform: scale(0.8);
+  opacity: 0.75;
+  margin-right: 0px;
+}
+
+.dateButton:hover>mat-icon {
+  opacity: 1;
 }
 
 .dateButton:hover {
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index e002ee6..90e73b4 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -102,158 +102,156 @@
 
   <div class="right">
     <!-- Date Range Picker  -->
-      <div style="display: flex; height: 100%; align-items: center; font-size: 13px; ">
-        <div style="height: 70%; display: flex; align-items: center; width: 160px; font-family: Arial, sans-serif; font-weight: 600;">
-          <!-- <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label> -->
-          <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
-            <input matStartDate formControlName="start"
-              (dateChange)="startDateChanged($event)">
-            <input matEndDate formControlName="end"(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>
-        </div>
-
-        <button class="dateButton"
-          (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
+    <div style="display: flex; height: 100%; align-items: center; font-size: 13px; ">
+      <div style="height: 70%; display: flex; align-items: center; width: 180px; font-family: Arial, sans-serif; border: solid 1px rgba(0, 0, 0, 0.124);
+        background-color: white; padding-left: 10px; border-radius: 5px 0px 0px 5px;">
+        <!-- <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label> -->
+        <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
+          <input matStartDate formControlName="start" (dateChange)="startDateChanged($event)">
+          <input matEndDate formControlName="end" (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>
       </div>
 
-      <!-- Scale Picker -->
-      <mat-button-toggle-group 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">
-          {{scalar}}
-        </mat-button-toggle>
-      </mat-button-toggle-group>
+      <button class="dateButton" (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
+    </div>
 
-      <div class="detailsButton">
-        {{languageService.lMap.get('detailButton')}}
-        <mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
-          (change)="refreshData()"></mat-slide-toggle>
-      </div>
+    <!-- Scale Picker -->
+    <mat-button-toggle-group 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">
+        {{scalar}}
+      </mat-button-toggle>
+    </mat-button-toggle-group>
+
+    <div class="detailsButton">
+      {{languageService.lMap.get('detailButton')}}
+      <mat-slide-toggle color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
+        (change)="refreshData()"></mat-slide-toggle>
     </div>
   </div>
+</div>
 
-  <div
-    *ngIf="!this.disableSpin && !this.showNoResultsError && !this.errorService.critical && !this.errorService.rsso && !this.errorService.error"
-    id="showSpin" data-bind="visible: spin" style=" position: absolute; top: auto; left: 30%;">
-    <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" rel="stylesheet" />
-  </div>
+<div
+  *ngIf="!this.disableSpin && !this.showNoResultsError && !this.errorService.critical && !this.errorService.rsso && !this.errorService.error"
+  id="showSpin" data-bind="visible: spin" style=" position: absolute; top: auto; left: 30%;">
+  <img src="https://upload.wikimedia.org/wikipedia/commons/b/b1/Loading_icon.gif" rel="stylesheet" />
+</div>
 
 
 
 
-  <!-- <button ejs-button id='filterRecord' (click)='filter()'>Filter</button> -->
-  <ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault" [enableVirtualization]="true"
-    [ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}" [dataSource]="data" [allowSorting]='true'
-    [resources]="resources" [taskFields]="taskSettings" [resourceFields]="resourceFields" [editSettings]="editSettings"
-    [columns]="columns" [toolbar]="" [labelSettings]="labelSettings" [allowSelection]='true' [allowResizing]='true'
-    [highlightWeekends]='true' [treeColumnIndex]="1" [projectStartDate]="this.projectStartDate"
-    [projectEndDate]="this.projectEndDate" viewType="ResourceView" [showOverAllocation]='true'
-    [enableMultiTaskbar]='true' [collapseAllParentTasks]='true' [enableVirtualization]="false" [allowSorting]="true"
-    [allowFiltering]="false" [timelineSettings]="timelineSettings" [selectionSettings]="selectionSettings"
-    [tooltipSettings]="tooltipSettings" [splitterSettings]="splitterSettings" (actionComplete)="actionComplete($event)"
-    gridLines="Both" (splitterResizing)="splitterResizing($event)" (actionBegin)="actionBegin($event)"
-    (taskbarEditing)="taskbarEditing($event)" (taskbarEdited)="taskbarEdited($event)"
-    (toolbarClick)="toolbarBtnClicked($event)" (rowSelected)="rowSelected($event)"
-    (rowDeselected)="rowDeselected($event)" (created)="created($event)" (dataBound)="dataBound($event)"
-    (load)="load($event)" (queryTaskbarInfo)="queryTaskbarInfo($event)" (expanding)="onExpand($event)">
+<!-- <button ejs-button id='filterRecord' (click)='filter()'>Filter</button> -->
+<ejs-gantt *ngIf="renderGantt" #ganttObject id="ganttDefault" [enableVirtualization]="true"
+  [ngStyle]="{'visibility':spin ? 'hidden' : 'visible'}" [dataSource]="data" [allowSorting]='true'
+  [resources]="resources" [taskFields]="taskSettings" [resourceFields]="resourceFields" [editSettings]="editSettings"
+  [columns]="columns" [toolbar]="" [labelSettings]="labelSettings" [allowSelection]='true' [allowResizing]='true'
+  [highlightWeekends]='true' [treeColumnIndex]="1" [projectStartDate]="this.projectStartDate"
+  [projectEndDate]="this.projectEndDate" viewType="ResourceView" [showOverAllocation]='true' [enableMultiTaskbar]='true'
+  [collapseAllParentTasks]='true' [enableVirtualization]="false" [allowSorting]="true" [allowFiltering]="false"
+  [timelineSettings]="timelineSettings" [selectionSettings]="selectionSettings" [tooltipSettings]="tooltipSettings"
+  [splitterSettings]="splitterSettings" (actionComplete)="actionComplete($event)" gridLines="Both"
+  (splitterResizing)="splitterResizing($event)" (actionBegin)="actionBegin($event)"
+  (taskbarEditing)="taskbarEditing($event)" (taskbarEdited)="taskbarEdited($event)"
+  (toolbarClick)="toolbarBtnClicked($event)" (rowSelected)="rowSelected($event)" (rowDeselected)="rowDeselected($event)"
+  (created)="created($event)" (dataBound)="dataBound($event)" (load)="load($event)"
+  (queryTaskbarInfo)="queryTaskbarInfo($event)" (expanding)="onExpand($event)">
 
 
-    <ng-template #tooltipSettingsTaskbar let-data>
-      <div>
-        <table>
-          <ng-container>
-            <tr>
-              <td style="padding:3px">{{languageService.lMap.get('tooltipSummary')}}:
-                {{data.taskData.resources[0].resourceName}}</td>
-            </tr>
-            <tr>
-              <td style="padding:3px">{{languageService.lMap.get('tooltipState')}}:
-                {{dataService.getStateNameById(data.taskData.resources[0].state)}}</td>
-            </tr>
-            <tr>
-              <td style="padding:3px">{{languageService.lMap.get('tooltipPaketType')}}:
-                {{data.taskData.resources[0].packageName}}</td>
-            </tr>
-            <tr>
-              <td style="padding:3px">{{languageService.lMap.get('tooltipContract')}}:
-                {{data.taskData.resources[0].vertragName}}</td>
-            </tr>
-            <tr>
-              <td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupKv')}}:
-                {{data.taskData.resources[0].supportGroup}}</td>
-            </tr>
-            <tr>
-              <td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupIh')}}:
-                {{data.taskData.resources[0].coordinatorSg}}</td>
-            </tr>
-            <tr>
-              <td style="padding:3px">{{languageService.lMap.get('tooltipDate')}}:
-                {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}</td>
-            </tr>
-            <!-- <tr>
+  <ng-template #tooltipSettingsTaskbar let-data>
+    <div>
+      <table>
+        <ng-container>
+          <tr>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipSummary')}}:
+              {{data.taskData.resources[0].resourceName}}</td>
+          </tr>
+          <tr>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipState')}}:
+              {{dataService.getStateNameById(data.taskData.resources[0].state)}}</td>
+          </tr>
+          <tr>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipPaketType')}}:
+              {{data.taskData.resources[0].packageName}}</td>
+          </tr>
+          <tr>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipContract')}}:
+              {{data.taskData.resources[0].vertragName}}</td>
+          </tr>
+          <tr>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupKv')}}:
+              {{data.taskData.resources[0].supportGroup}}</td>
+          </tr>
+          <tr>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipSupportGroupIh')}}:
+              {{data.taskData.resources[0].coordinatorSg}}</td>
+          </tr>
+          <tr>
+            <td style="padding:3px">{{languageService.lMap.get('tooltipDate')}}:
+              {{data.taskData.resources[0].tasks[1].StartDate | date:'dd.MM.yyyy'}}</td>
+          </tr>
+          <!-- <tr>
             <td style="padding:3px"> Date: {{data.TaskID}}</td>
           </tr> -->
 
-          </ng-container>
-        </table>
-      </div>
-    </ng-template>
-  </ejs-gantt>
+        </ng-container>
+      </table>
+    </div>
+  </ng-template>
+</ejs-gantt>
 
-  <app-plan-time-bar #plantimeComponent *ngIf="!errorService.rsso && renderplanTime && renderGantt"
-    [inputData]="inputForTimeline" [splitterSettings]="splitterSettings" [parentResources]="allResources"
-    [filters]="filters"></app-plan-time-bar>
+<app-plan-time-bar #plantimeComponent *ngIf="!errorService.rsso && renderplanTime && renderGantt"
+  [inputData]="inputForTimeline" [splitterSettings]="splitterSettings" [parentResources]="allResources"
+  [filters]="filters"></app-plan-time-bar>
 
-  <div *ngIf="this.showNoResultsError && this.languageService.language =='DE'">
-    <h2>Die Suche lieferte keine Ergebnisse</h2>
-  </div>
-  <div *ngIf="this.showNoResultsError && this.languageService.language =='EN'">
-    <h2>The search did not return any results</h2>
-  </div>
-  <!-- [filterSettings]="filterSettings" -->
+<div *ngIf="this.showNoResultsError && this.languageService.language =='DE'">
+  <h2>Die Suche lieferte keine Ergebnisse</h2>
+</div>
+<div *ngIf="this.showNoResultsError && this.languageService.language =='EN'">
+  <h2>The search did not return any results</h2>
+</div>
+<!-- [filterSettings]="filterSettings" -->
 
-  <mat-paginator #paginator [ngStyle]="{'visibility':renderGantt ? 'visible' : 'hidden'}" class="demo-paginator"
-    (page)="handlePageEvent($event)" [length]="this.dataService.getTotalSize()" [pageSize]="20" [disabled]="false"
-    [showFirstLastButtons]="true" [pageSizeOptions]="[10, 20, 50, 70, 100, 200, 500]" [hidePageSize]="false"
-    [pageIndex]="0" aria-label="Seite auswählen">
-  </mat-paginator>
+<mat-paginator #paginator [ngStyle]="{'visibility':renderGantt ? 'visible' : 'hidden'}" class="demo-paginator"
+  (page)="handlePageEvent($event)" [length]="this.dataService.getTotalSize()" [pageSize]="20" [disabled]="false"
+  [showFirstLastButtons]="true" [pageSizeOptions]="[10, 20, 50, 70, 100, 200, 500]" [hidePageSize]="false"
+  [pageIndex]="0" aria-label="Seite auswählen">
+</mat-paginator>
 
-  <mat-card style="width: 50%; margin: auto;" *ngIf="errorService.rsso">
-    <mat-card-header>
-      <mat-card-title><mat-icon style="color: red;">error</mat-icon>
-        {{errorService.getLastError('rsso').name}}</mat-card-title>
-      <mat-card-subtitle>{{errorService.getLastError('rsso').userInfo}}</mat-card-subtitle>
-    </mat-card-header>
-    <mat-card-content>
-      <p style="padding-left: 15px;">{{errorService.getLastError('rsso').message}}</p>
-    </mat-card-content>
-  </mat-card>
+<mat-card style="width: 50%; margin: auto;" *ngIf="errorService.rsso">
+  <mat-card-header>
+    <mat-card-title><mat-icon style="color: red;">error</mat-icon>
+      {{errorService.getLastError('rsso').name}}</mat-card-title>
+    <mat-card-subtitle>{{errorService.getLastError('rsso').userInfo}}</mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>
+    <p style="padding-left: 15px;">{{errorService.getLastError('rsso').message}}</p>
+  </mat-card-content>
+</mat-card>
 
 
-  <mat-card style="width: 50%; margin: auto;" *ngIf="!errorService.rsso && errorService.critical">
-    <mat-card-header>
-      <mat-card-title><mat-icon style="color: red;">error</mat-icon>
-        {{errorService.getLastError('critical').name}}</mat-card-title>
-      <mat-card-subtitle>{{errorService.getLastError('critical').userInfo}}</mat-card-subtitle>
-    </mat-card-header>
-    <mat-card-content>
-      <p style="padding-left: 15px;">{{errorService.getLastError('critical').message}}</p>
-    </mat-card-content>
-  </mat-card>
+<mat-card style="width: 50%; margin: auto;" *ngIf="!errorService.rsso && errorService.critical">
+  <mat-card-header>
+    <mat-card-title><mat-icon style="color: red;">error</mat-icon>
+      {{errorService.getLastError('critical').name}}</mat-card-title>
+    <mat-card-subtitle>{{errorService.getLastError('critical').userInfo}}</mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>
+    <p style="padding-left: 15px;">{{errorService.getLastError('critical').message}}</p>
+  </mat-card-content>
+</mat-card>
 
-  <mat-card style="width: 50%; margin: auto;"
-    *ngIf="!errorService.rsso && !errorService.critical && errorService.error">
-    <mat-card-header>
-      <mat-card-title><mat-icon style="color: red;">error</mat-icon>
-        {{errorService.getLastError('error').name}}</mat-card-title>
-      <mat-card-subtitle>{{errorService.getLastError('error').userInfo}}</mat-card-subtitle>
-    </mat-card-header>
-    <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 style="width: 50%; margin: auto;" *ngIf="!errorService.rsso && !errorService.critical && errorService.error">
+  <mat-card-header>
+    <mat-card-title><mat-icon style="color: red;">error</mat-icon>
+      {{errorService.getLastError('error').name}}</mat-card-title>
+    <mat-card-subtitle>{{errorService.getLastError('error').userInfo}}</mat-card-subtitle>
+  </mat-card-header>
+  <mat-card-content>
+    <p style="padding-left: 15px;">{{errorService.getLastError('error').message}}</p>
+  </mat-card-content>
+</mat-card>
\ No newline at end of file