diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index fad4302..088dcf0 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -1,3 +1,18 @@
+#topbar {
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  height: 57px;
+  margin-bottom: 20px;
+
+  border: dashed green 1px;
+}
+
+
+.restartButton {
+  width: 60px;
+}
+
 .example-radio-group {
   display: flex;
   flex-direction: column;
@@ -9,22 +24,18 @@
   margin: 5px;
 }
 
-#topbar {
-  display: flex;
-  flex-direction: row;
-  margin: 0px 0;
-  align-items: flex-start;
-  height: 3%;
 
-}
 
-.mat-mdc-form-field + .mat-mdc-form-field {
+
+.mat-mdc-form-field+.mat-mdc-form-field {
   margin-left: 8px;
 }
- .mat-button-toggle-group .mat-button-toggle-button {
-  height: 100%!important;
+
+.mat-button-toggle-group .mat-button-toggle-button {
+  height: 100% !important;
 }
-.toggleContainer{
+
+.toggleContainer {
   display: flex;
   flex-direction: column;
   align-items: flex-start;
@@ -32,88 +43,108 @@
   width: 100%;
 }
 
-.filterContainer{
+.filterContainer {
   width: 100%;
   display: flex;
   flex-direction: row;
   align-items: flex-start;
 }
 
-.clearFilter{
+.clearFilter {
   margin-left: 10px;
 }
 
-.showDetails{
+.showDetails {
   margin-left: 80px;
   margin-top: 8.5px;
 }
-.filter{
+
+.filter {
   margin-top: 0.5%;
   margin-left: 1%;
 }
 
 
 
-.checkbox{
+.checkbox {
   margin: 0 0.5%;
 }
 
-.scalarContainer{
-  margin-left: 0.5%;
-  margin-right: 0.5%;
+
+.dateButton {
+  width: 59px;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-width: 1px;
+  border: none;
+  border-bottom: 1px;
+  border-top-right-radius: 4px;
 }
 
-.filterButton{
-
- }
-
- .dateButton{
-  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 1px;  border-top: none; border-left: none; border-right: none; border-top-right-radius: 4px; margin-right: 15px;
- }
-
- .dateButton:hover{
-  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 2px;  border-top: 1px; border-left: 1px; border-right: 1px; border-top-right-radius: 4px;
+.dateButton:hover {
+  border-width: 2px;
+  border-top-right-radius: 4px;
   background-color: rgba(0, 0, 0, 0.08);
- }
+}
 
-.dateButton:checked{
-  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 2px;  border-top: 1px; border-left: 1px; border-right: 1px; border-top-right-radius: 4px;
-  background-color: red;
- }
+.editButton {
+  height: 59px;
+  width: 59px;
+  background-color: rgba(0, 0, 0, 0.04);
+  border: none;
+  border-top-right-radius: 4px;
+  margin-right: 15px;
+}
 
- .editButton{
-  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border: none;  border-top-right-radius: 4px; margin-right: 15px;
- }
-
- .editButton:hover{
-  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04);  border-top-right-radius: 4px;
+.editButton:hover {
+  height: 59px;
+  width: 59px;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-top-right-radius: 4px;
   background-color: rgba(0, 0, 0, 0.08);
- }
+}
 
-.editButton:checked{
-  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04);  border-top-right-radius: 4px;
+.editButton:checked {
+  height: 59px;
+  width: 59px;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-top-right-radius: 4px;
   background-color: red;
- }
+}
 
- .deleteButton{
-  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 1px;  border: none; border-top-right-radius: 4px; margin-right: 15px; margin-left: -15px;
- }
+.deleteButton {
+  height: 59px;
+  width: 59px;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-width: 1px;
+  border: none;
+  border-top-right-radius: 4px;
+  margin-right: 15px;
+  margin-left: -15px;
+}
 
- .deleteButton:hover{
-  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 2px;  border-top-right-radius: 4px;
+.deleteButton:hover {
+  height: 59px;
+  width: 59px;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-width: 2px;
+  border-top-right-radius: 4px;
   background-color: rgba(0, 0, 0, 0.08);
- }
+}
 
-.deleteButton:checked{
-  height: 59px; width: 59px;  background-color: rgba(0, 0, 0, 0.04); border-width: 2px;  border-top-right-radius: 4px;
+.deleteButton:checked {
+  height: 59px;
+  width: 59px;
+  background-color: rgba(0, 0, 0, 0.04);
+  border-width: 2px;
+  border-top-right-radius: 4px;
   background-color: red;
- }
+}
 
- /* .datePickerContainer{
+/* .datePickerContainer{
   height: 20px;
   width: 400px;
  } */
- /*
+/*
 ::ng-deep .mat-slide-toggle.mat-checked:not(.mat-disabled) .mat-slide-toggle-bar {
   background-color: #d56100;
 }
@@ -136,12 +167,16 @@
   background-color: #ef6c00;
 
 }
+
 .dot-badge {
   background-color: #00a79d;
   color: #00a79d;
-  width: 15px; /* Breite des Punkts */
-  height: 15px; /* Höhe des Punkts */
-  border-radius: 50%; /* Rundung des Punkts */
+  width: 15px;
+  /* Breite des Punkts */
+  height: 15px;
+  /* Höhe des Punkts */
+  border-radius: 50%;
+  /* Rundung des Punkts */
 }
 
 /* ::ng-deep .mat-calendar{
@@ -149,9 +184,9 @@
 } */
 
 /* ::ng-deep .mat-calendar-body-label{ */
-  /* color: white; */
+/* color: white; */
 /* }
 
 ::ng-deep .mat-calendar-cell-content{
    color: #d56100;
-} */
+} */
\ No newline at end of file
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index ff4d232..53fbc89 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -1,19 +1,26 @@
 <div *ngIf="!errorService.rsso && !rssoInit" 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-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 class="dateButton" color="" style="" (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
+  <!-- Date Range Picker  -->
+  <div style="display: flex; gap: 10px;">
+    <div style="display: flex;">
+      <mat-form-field appearance="fill" style="width: 237px;">
+        <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>
 
-    <mat-form-field style="width: 90px; height: 59px;" appearance="fill">
+      <button mat-basic-button class="dateButton" color=""
+        (click)="picker.open()"><mat-icon>calendar_today</mat-icon></button>
+    </div>
+
+    <!-- Language Picker -->
+    <mat-form-field style="width: 90px;" appearance="fill">
       <mat-label>{{languageService.lMap.get('language')}}</mat-label>
       <mat-select (selectionChange)="languageChange($event)" [(value)]="languageService.language">
         <mat-option *ngFor="let lang of languageService.languages" [value]="lang">
@@ -21,46 +28,55 @@
         </mat-option>
       </mat-select>
     </mat-form-field>
-  <div class="scalarContainer">
-    <mat-button-toggle-group  style="margin-top: 5px;"  (change)="changeScalar()" name="fontStyle" aria-label="Font Style" [(ngModel)]="selectedScalar">
-      <mat-button-toggle  value="bold"*ngFor="let scalar of scalars" [value]="scalar">
+
+    <!-- Scale Picker -->
+    <mat-button-toggle-group style="height: 100%;" (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>
+
+    <!-- Preset Picker -->
+    <mat-form-field appearance="fill" style="width: 300px;">
+      <mat-label>Preset</mat-label>
+      <mat-select [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
+        <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
+          <mat-option *ngFor="let preset of group.presets" [value]="preset">
+            {{preset.name}}
+            <!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
+          <button *ngIf="group.name == 'User'" mat-icon-button><mat-icon>edit</mat-icon></button> -->
+          </mat-option>
+        </mat-optgroup>
+      </mat-select>
+    </mat-form-field>
+
+    <button mat-basic-button *ngIf="isUserPreset" class="editButton"
+      (click)="openRenameDialog()"><mat-icon>edit</mat-icon></button>
+    <button mat-basic-button *ngIf="isUserPreset" class="deleteButton"
+      (click)="openDeleteDialog()"><mat-icon>delete_forever</mat-icon></button>
+
+    <!-- Restart Button -->
+    <button class="restartButton" aria-label="Refresh" (click)="refreshGanttWithFilters()">
+      <mat-icon>restart_alt</mat-icon>
+    </button>
+
   </div>
 
-  <!-- <mat-form-field appearance="fill" >
-    <mat-label>Preset</mat-label>
-    <mat-select [(value)]="selectedPreset">
-      <mat-option *ngFor="let preset of presets" [value]="preset">
-        {{preset.name}}
-      </mat-option>
-    </mat-select>
-  </mat-form-field> -->
+  <!-- User -->
+  <div style="display: flex; justify-content: center; align-items: center; border: dashed blue 1px;">
+    <h3 *ngIf="userId" style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;">
+      <mat-icon style="color: green;">verified_user</mat-icon>{{this.userId}}
+    </h3>
+    <h3 *ngIf="errorService.rsso"
+      style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;"><mat-icon
+        style="color: red;">verified_user</mat-icon> RSSO Auth Failed</h3>
+    <h3 *ngIf="!errorService.rsso &&rssoInit"
+      style="font-family: Arial, Helvetica, sans-serif; display: flex; align-items: center; gap: 5px;"><mat-icon
+        style="color: orange;">verified_user</mat-icon> RSSO: initializing</h3>
+  </div>
 
-  <mat-form-field appearance="fill" style="width: 300px;">
-    <mat-label>Preset</mat-label>
-    <mat-select  [(value)]="selectedPreset" (selectionChange)="selectPreset($event)">
-      <mat-optgroup *ngFor="let group of presetGroups" [label]="group.name"
-                    [disabled]="group.disabled">
-        <mat-option *ngFor="let preset of group.presets" [value]="preset">
-          {{preset.name}}
-          <!-- <button style="align-self: right;" *ngIf="group.name == 'User'" mat-icon-button><mat-icon>delete_forever</mat-icon></button>
-          <button *ngIf="group.name == 'User'" mat-icon-button><mat-icon>edit</mat-icon></button> -->
-        </mat-option>
-      </mat-optgroup>
-    </mat-select>
-  </mat-form-field>
-
-
-  <button mat-basic-button *ngIf="isUserPreset" class="editButton" (click)="openRenameDialog()" color="" style="" ><mat-icon>edit</mat-icon></button>
-  <button mat-basic-button *ngIf="isUserPreset" class="deleteButton" (click)="openDeleteDialog()" color="" style="" ><mat-icon>delete_forever</mat-icon></button>
-  <button  mat-raised-button style="margin-top: 5px; margin-left: 10px; height: 50px; margin-right: 5px;" aria-label="Refresh" (click)="refreshGanttWithFilters()">
-    <mat-icon >restart_alt</mat-icon>
-  </button>
-  <h3 *ngIf="userId" style="font-family: Arial, Helvetica, sans-serif;"><mat-icon style="color: green;">verified_user</mat-icon>{{this.userId}}</h3>
-  <h3 *ngIf="errorService.rsso" style="font-family: Arial, Helvetica, sans-serif;"><mat-icon style="color: red;">verified_user</mat-icon> RSSO Auth Failed</h3>
-  <h3 *ngIf="!errorService.rsso &&rssoInit" style="font-family: Arial, Helvetica, sans-serif;"><mat-icon style="color: orange;">verified_user</mat-icon> RSSO: initializing</h3>
 
 
 
@@ -68,82 +84,61 @@
 
 
 <div *ngIf="!errorService.rsso && !rssoInit" class="filterContainer">
-  <button *ngIf="transitionButton"  mat-raised-button style="margin-bottom: 2px; background-color: #00a79d; margin-left: 1px; margin-right: 1px;" class="filterButton" aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
-  <button *ngIf="approveButton"  mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;" class="filterButton" aria-label="Filtern" (click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>
-  <button *ngIf="rejectButton"  mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;" class="filterButton" aria-label="Filtern" (click)="reject()">{{languageService.lMap.get('ablehnen')}}</button>
-  <button *ngIf="cancelButton"  mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;" class="filterButton" aria-label="Filtern" (click)="cancel()">{{languageService.lMap.get('stornieren')}}</button>
-  <button *ngIf="reApproveButton"  mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;" class="filterButton" aria-label="Filtern" (click)="reApprove()">Erneut zur Genehmigung</button>
-  <button *ngIf="implementerButton"  mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;" class="filterButton" aria-label="Filtern" (click)="openImplementerDialog()">{{languageService.lMap.get('implementerDialogHeading')}}</button>
-  <button  mat-raised-button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
+  <button *ngIf="transitionButton" mat-raised-button
+    style="margin-bottom: 2px; background-color: #00a79d; margin-left: 1px; margin-right: 1px;" class="filterButton"
+    aria-label="Filtern" (click)=" openStatTransitionDialog()">{{languageService.lMap.get('stateChange')}}</button>
+  <button *ngIf="approveButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;"
+    class="filterButton" aria-label="Filtern" (click)="approve()">{{languageService.lMap.get('genehmigen')}}</button>
+  <button *ngIf="rejectButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;"
+    class="filterButton" aria-label="Filtern" (click)="reject()">{{languageService.lMap.get('ablehnen')}}</button>
+  <button *ngIf="cancelButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;"
+    class="filterButton" aria-label="Filtern" (click)="cancel()">{{languageService.lMap.get('stornieren')}}</button>
+  <button *ngIf="reApproveButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;"
+    class="filterButton" aria-label="Filtern" (click)="reApprove()">Erneut zur Genehmigung</button>
+  <button *ngIf="implementerButton" mat-raised-button style="margin-bottom: 2px; margin-left: 1px; margin-right: 1px;"
+    class="filterButton" aria-label="Filtern"
+    (click)="openImplementerDialog()">{{languageService.lMap.get('implementerDialogHeading')}}</button>
+  <button mat-raised-button class="filterButton" aria-label="Filtern" (click)="openFilterDialog()">
     {{languageService.lMap.get('nttGanttFilterButton')}} <mat-icon style="color: #00a79d;">filter_alt</mat-icon>
   </button>
   <mat-badge *ngIf="filterBadge" [matBadge]="''" class="dot-badge"></mat-badge>
 
   <button *ngIf="showSaveButton" mat-raised-button (click)="updatePreset()">Speichern</button>
-  <button *ngIf="showSaveUnderButton" mat-raised-button (click)="openSaveUnderDialog()" >Speichern unter</button>
-  <button [disabled]="!filterEnabled" mat-icon-button aria-label="clear Filters and Sort" class="clearFilter" (click)="clearFilter()">
-    {{languageService.lMap.get('clearFilter')}} <mat-icon >close</mat-icon>
+  <button *ngIf="showSaveUnderButton" mat-raised-button (click)="openSaveUnderDialog()">Speichern unter</button>
+  <button [disabled]="!filterEnabled" mat-icon-button aria-label="clear Filters and Sort" class="clearFilter"
+    (click)="clearFilter()">
+    {{languageService.lMap.get('clearFilter')}} <mat-icon>close</mat-icon>
   </button>
 
-   <mat-slide-toggle class="showDetails" color="primary" [(ngModel)]="showDetails" [checked]="showDetails" (change)="refreshData()">{{languageService.lMap.get('detailButton')}}</mat-slide-toggle>
+  <mat-slide-toggle class="showDetails" color="primary" [(ngModel)]="showDetails" [checked]="showDetails"
+    (change)="refreshData()">{{languageService.lMap.get('detailButton')}}</mat-slide-toggle>
 
 </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"/>
+  *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]="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)"
-
-  >
+<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]="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>
@@ -151,25 +146,32 @@
       <table>
         <ng-container>
           <tr>
-            <td style="padding:3px">{{languageService.lMap.get('tooltipSummary')}}: {{data.taskData.resources[0].resourceName}}</td>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
+            <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>
@@ -182,61 +184,53 @@
 </ejs-gantt>
 
 <app-plan-time-bar #plantimeComponent *ngIf="!errorService.rsso && renderplanTime && renderGantt"
-[inputData]="inputForTimeline"
-[splitterSettings]="splitterSettings"
-[parentResources]="allResources"
-[filters]="filters"
+  [inputData]="inputForTimeline" [splitterSettings]="splitterSettings" [parentResources]="allResources"
+  [filters]="filters"></app-plan-time-bar>
 
-></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 && 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>
+<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 && 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
diff --git a/frontend/src/theme.scss b/frontend/src/theme.scss
index b918d61..73af48a 100644
--- a/frontend/src/theme.scss
+++ b/frontend/src/theme.scss
@@ -8,3 +8,9 @@ $my-warn: mat-palette($mat-red, 600);
 $my-theme: mat-light-theme($my-primary, $my-accent, $my-warn);
 
 @include angular-material-theme($my-theme);
+
+.dateButton.mat-button {
+    background-color: blue !important; /* Use !important as a last resort */
+    color: white;
+  }
+  
\ No newline at end of file