diff --git a/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.html b/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.html
index 571b31f..c9c7aef 100644
--- a/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.html
+++ b/frontend/src/app/delete-preset-dialog/delete-preset-dialog.component.html
@@ -1,5 +1,7 @@
-<h2 style="font-family: Roboto;">Möchten Sie das Preset {{preset.name}} wirklich löschen?</h2>
-<mat-dialog-actions align="end">
-  <button  mat-raised-button  style="margin-right: 3px;" matDialogClose>Abbrechen</button>
-  <button  mat-raised-button color = "primary" style="margin-left: 3px;" (click)="deletePreset()" matDialogClose>Löschen</button>
-</mat-dialog-actions>
+<div style="padding: 20px;">
+  <h2 style="line-height: 1.2;">Möchten Sie das Preset <span style="color: #ef6c00;">{{preset.name}}</span> wirklich löschen?</h2>
+  <mat-dialog-actions align="end">
+    <button mat-flat-button style="letter-spacing: 0px;" matDialogClose>Abbrechen</button>
+    <button mat-flat-button style="letter-spacing: 0px; color: white;" color="primary" (click)="deletePreset()" matDialogClose>Löschen</button>
+  </mat-dialog-actions>
+</div>
diff --git a/frontend/src/app/filter-dialog/filter-dialog.component.css b/frontend/src/app/filter-dialog/filter-dialog.component.css
index a5c6bd0..dbdcc8d 100644
--- a/frontend/src/app/filter-dialog/filter-dialog.component.css
+++ b/frontend/src/app/filter-dialog/filter-dialog.component.css
@@ -1,17 +1,15 @@
 .container {
-  width: 100%;
-  display: flex;
+  /* display: flex;
   flex-direction: row;
-  justify-content: center;
+  justify-content: center; */
 }
 
 .filterHeading {
-  font-family: Roboto;
 }
 
 .filterBox {
-  width: 90%;
   align-self: center;
+  padding: 30px;
 }
 
 .buttonBox {
@@ -23,10 +21,10 @@
 .dot-badge {
   background-color: #00a79d;
   color: #00a79d;
-  width: 10px;
-  /* Breite des Punkts */
-  height: 10px;
-  /* Höhe des Punkts */
+  margin-left: 2px;
+  margin-bottom: 2px;
+  padding: 4px;
   border-radius: 50%;
   /* Rundung des Punkts */
-}
\ No newline at end of file
+}
+
diff --git a/frontend/src/app/filter-dialog/filter-dialog.component.html b/frontend/src/app/filter-dialog/filter-dialog.component.html
index 2e60ff8..88bbb60 100644
--- a/frontend/src/app/filter-dialog/filter-dialog.component.html
+++ b/frontend/src/app/filter-dialog/filter-dialog.component.html
@@ -108,13 +108,12 @@
 
       <mat-expansion-panel>
         <mat-expansion-panel-header>
-          <mat-panel-title>Intervall<mat-badge *ngIf="IntervallEnabled" [matBadge]="''"
+          <mat-panel-title>{{this.languageService.lMap.get('filterDilogIntervalTitle')}}<mat-badge *ngIf="IntervallEnabled" [matBadge]="''"
               class="dot-badge"></mat-badge></mat-panel-title>
-          <mat-panel-description>Pakete mit Intervall > ein Jahr</mat-panel-description>
+          <mat-panel-description>{{this.languageService.lMap.get('filterDialogInterval')}}</mat-panel-description>
         </mat-expansion-panel-header>
 
-        <mat-checkbox (input)="this.IntervallEnabled = intervallFilter;" [(ngModel)]="intervallFilter">Zeige nur Pakete
-          mit Intervall > 1 Jahr!</mat-checkbox>
+        <mat-checkbox (input)="this.IntervallEnabled = intervallFilter;" [(ngModel)]="intervallFilter">{{this.languageService.lMap.get('filterDialogIntervalCheck')}}</mat-checkbox>
       </mat-expansion-panel>
     </mat-accordion>
 
@@ -174,10 +173,13 @@
     <br><br> -->
     <br>
     <mat-dialog-actions align="end">
-      <button mat-raised-button style="margin-right: 3px;"
-        matDialogClose>{{this.languageService.lMap.get('filterDialogCancel')}}</button>
-      <button mat-raised-button color="primary" style="margin-left: 3px;"
-        (click)="mapFilter()">{{this.languageService.lMap.get('filterDilogButton')}}</button>
+      <button mat-raised-button matDialogClose>
+        <mat-icon>close</mat-icon> {{this.languageService.lMap.get('filterDialogCancel')}}
+      </button>
+      <button mat-raised-button color="primary" style="color: white;" (click)="mapFilter()">
+        <mat-icon>filter_list</mat-icon> {{this.languageService.lMap.get('filterDilogButton')}}
+      </button>
     </mat-dialog-actions>
+    
   </div>
 </div>
\ No newline at end of file
diff --git a/frontend/src/app/implementer-dialog/implementer-dialog.component.html b/frontend/src/app/implementer-dialog/implementer-dialog.component.html
index f2ccd70..fd2c65f 100644
--- a/frontend/src/app/implementer-dialog/implementer-dialog.component.html
+++ b/frontend/src/app/implementer-dialog/implementer-dialog.component.html
@@ -1,4 +1,4 @@
-<p style="font-family:arial; margin-top: -3%;">{{this.languageService.lMap.get('implementerDialogHeading')}}</p>
+<p style="margin-top: -3%;">{{this.languageService.lMap.get('implementerDialogHeading')}}</p>
 <mat-form-field  appearance="fill" >
   <mat-label>{{this.languageService.lMap.get('implementerDialogLabel')}}</mat-label>
   <mat-select [disabled]="diasbled" (selectionChange)="enableButton()" [(ngModel)]="selectedValue" name="state">
diff --git a/frontend/src/app/language.service.ts b/frontend/src/app/language.service.ts
index 71d6215..28d0593 100644
--- a/frontend/src/app/language.service.ts
+++ b/frontend/src/app/language.service.ts
@@ -124,6 +124,7 @@ export class LanguageService {
     this.deMap.set('filterDilogPaketTypeText', 'einen oder mehrere, exakte Eingabe');
     this.deMap.set('filterDilogDate', 'Datum');
     this.deMap.set('filterDilogDateText', 'Geplantes Start-Datum: Von / Bis');
+    this.deMap.set('filterDilogIntervalTitle', 'Intervall');
 
     this.deMap.set('filterDilogSearchText', 'Text durchsuchen');
     this.deMap.set('filterDialogSearchSg', 'Supportgruppe suchen & auswählen');
@@ -134,17 +135,18 @@ export class LanguageService {
     this.deMap.set('filterDilogSearchTo', 'Bis');
 
     this.enMap.set('filterDialogShortDesc', 'Short description');
-    this.enMap.set('filterDialogShortDescText', 'entering a text part filters all matching packages');
+    this.enMap.set('filterDialogShortDescText', 'Entering a text part filters all matching packages');
     this.enMap.set('filterDilogSg', 'Support group');
-    this.enMap.set('filterDilogSgText', 'in the role of planning IH or cost manager (one)');
+    this.enMap.set('filterDilogSgText', 'In the role of planning IH or cost manager (one)');
     this.enMap.set('filterDilogState', 'State');
-    this.enMap.set('filterDilogStateText', '(one or more) of the package');
+    this.enMap.set('filterDilogStateText', '(One or more) of the package');
     this.enMap.set('filterDilogContract', 'Contract');
     this.enMap.set('filterDilogContractText', 'Contract / provider cluster (one or more)');
     this.enMap.set('filterDilogPaketType', 'Package type');
     this.enMap.set('filterDilogPaketTypeText', 'one or more, exact input');
     this.enMap.set('filterDilogDate', 'Date');
     this.enMap.set('filterDilogDateText', 'Planned start date: from / to');
+    this.enMap.set('filterDilogIntervalTitle', 'Interval');
 
     this.enMap.set('filterDilogSearchText', 'Text search');
     this.enMap.set('filterDialogSearchSg', 'Search & select support group');
@@ -154,6 +156,11 @@ export class LanguageService {
     this.enMap.set('filterDilogSearchFrom', 'From');
     this.enMap.set('filterDilogSearchTo', 'Until');
 
+    this.enMap.set('filterDialogInterval', 'Packages with interval > one year');
+    this.deMap.set('filterDialogInterval', 'Pakete mit Intervall > ein Jahr');
+    this.enMap.set('filterDialogIntervalCheck', 'Show only packages with interval > one year!');
+    this.deMap.set('filterDialogIntervalCheck', 'Zeige nur Pakete mit Intervall > ein Jahr!');
+
     this.enMap.set('filterDilogButton', 'Apply Filters');
     this.deMap.set('filterDilogButton', 'Filter anwenden');
     this.deMap.set('filterDialogCancel', 'Abbrechen');
diff --git a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css
index 6a868f0..86bb7e3 100644
--- a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css
+++ b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.css
@@ -6,11 +6,6 @@
   min-height: 3em;
 }
 
-.custom-form-field {
-  height: 56px;
-  align-items: center;
-}
-
 .custom-form-field .form-field-container {
   display: flex;
   align-items: center;
@@ -18,10 +13,16 @@
 }
 
 .custom-form-field input[matInput] {
-  flex: 1;
-  margin-left: 8px;
+
+  line-height: 1;
 }
 
-.custom-form-field mat-checkbox {
-  margin-right: 8px; 
+mat-chip {
+  display: flex;
+  align-items: center;
+  vertical-align: middle;
+  line-height: 1;
 }
+mat-icon {
+  vertical-align: middle;
+}
\ No newline at end of file
diff --git a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html
index ce3ede5..54bb84f 100644
--- a/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html
+++ b/frontend/src/app/multiselect-autocomplete/multiselect-autocomplete.component.html
@@ -1,12 +1,12 @@
 <div class="chip-list-wrapper">
   <mat-chip-listbox #chipList>
     <ng-container *ngFor="let select of selectData | slice:0:20; let i =index">
-      <mat-chip class="cardinal-colors" (click)="removeChip(select)" style="background-color: #00a79d;">
+      <mat-chip (click)="removeChip(select)" style="background-color: #00a79d;">
         {{ select.item }}
         <mat-icon class="mat-chip-remove">cancel</mat-icon>
       </mat-chip>
     </ng-container>
-    <mat-chip *ngIf="selectData.length>20" class="cardinal-colors" style="background-color: #00a79d;">...
+    <mat-chip *ngIf="selectData.length>20">...
       {{selectData.length-20}} weitere
     </mat-chip>
   </mat-chip-listbox>
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.css b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
index 05edb88..d25700b 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.css
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.css
@@ -2,7 +2,7 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
-  overflow: hidden;
+  /* overflow: hidden; */
 }
 
 .splitter {
@@ -15,7 +15,6 @@
   color: rgba(41, 46, 50, 0.8);
   padding-left: 10px;
   padding-right: 10px;
-  font-family: Arial, Helvetica, sans-serif;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -105,6 +104,56 @@
   }
 }
 
+.detailsButton {
+  display: flex;
+  align-items: center;
+  padding: 8px; /* Adjust padding as needed */
+  height: 40px; /* Ensure enough height for the slide toggle */
+}
+
+mat-slide-toggle {
+  margin-bottom: 0; /* Prevent margin collapse */
+}
+
+
+mat-button-toggle-group {
+  .mat-button-toggle-checked {
+    background-color: #ef6c00 !important; /* Orange background */
+    color: white !important; /* Text color */
+  }
+
+  .mat-button-toggle-checked:hover {
+    background-color: darken(#ef6c00, 10%) !important; /* Darker orange on hover */
+  }
+}
+
+.detailsButton {
+  display: flex;
+  align-items: center;
+
+  mat-slide-toggle.mat-primary .mat-slide-toggle-thumb {
+    background-color: #ef6c00 !important; /* Orange thumb */
+  }
+
+  mat-slide-toggle.mat-primary .mat-slide-toggle-bar {
+    background-color: rgba(239, 108, 0, 0.5) !important; /* Lighter orange bar */
+  }
+
+  mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-thumb {
+    background-color: #ef6c00 !important; /* Orange thumb when checked */
+  }
+
+  mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-bar {
+    background-color: #ef6c00 !important; /* Orange bar when checked */
+  }
+
+  mat-slide-toggle.mat-primary.mat-checked .mat-slide-toggle-content {
+    color: #ef6c00 !important; /* Text color */
+  }
+}
+
+
+
 .restartButton {
   background-color: white;
   border: none;
@@ -197,10 +246,7 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  height: 70%;
   font-weight: 500;
-  font-size: 13px;
-  font-family: Arial, Helvetica, sans-serif;
   gap: 8px;
   user-select: none;
   padding-left: 10px;
@@ -456,8 +502,6 @@
 
 .legend {
   width: 100%;
-  font-family: Arial, sans-serif;
-  font-size: 13px;
   gap: 4px;
   background-color: rgb(210, 217, 224);
   padding: 10px;
diff --git a/frontend/src/app/ntt-gantt/ntt-gantt.component.html b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
index 7bf256e..0947b14 100644
--- a/frontend/src/app/ntt-gantt/ntt-gantt.component.html
+++ b/frontend/src/app/ntt-gantt/ntt-gantt.component.html
@@ -1,12 +1,12 @@
-<div class="head" style="">
+<div class="head" style="display: flex; align-items: center;">
   <div class="left" style="display: flex; align-items: center; gap: 8px; height: 100%;">
-    <h2>W&I Kalender</h2>
+    <h2 style="padding: 0; margin: 0;">W&I Kalender</h2>
     <div class="splitter"></div>
     <!-- Preset Picker -->
-    <div appearance="fill" style="width: 200px; padding-left: 15px; padding-top: 3px; font-size: 14px;">
+    <div appearance="fill" style="width: 240px; padding-left: 15px; ">
       <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">
+        <mat-optgroup style="font-size: 14px; font-weight: 600; letter-spacing: 0; color: rgba(0, 0, 0, 0.4);" *ngFor="let group of presetGroups" [label]="group.name" [disabled]="group.disabled">
+          <mat-option  style="font-size: 14px; line-height: 1;letter-spacing: 0;" *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> -->
@@ -30,11 +30,8 @@
   </mat-form-field> -->
 
     <!-- Language Picker -->
-    <mat-button-toggle-group style="height: 70%; font-size: 13px; border-radius: 8px; margin-left: 15px;"
-      (change)="languageChange($event)" name="languagePicker" aria-label="Language Picker"
-      [(ngModel)]="languageService.language">
-      <mat-button-toggle style="display: flex; align-items: center;" *ngFor="let lang of languageService.languages"
-        [value]="lang">
+    <mat-button-toggle-group style="height: 70%; border-radius: 8px; margin-left: 15px;" (change)="languageChange($event)" name="languagePicker" aria-label="Language Picker" [(ngModel)]="languageService.language">
+      <mat-button-toggle style="display: flex; align-items: center;" *ngFor="let lang of languageService.languages" [value]="lang">
         {{lang}}
       </mat-button-toggle>
     </mat-button-toggle-group>
@@ -43,16 +40,16 @@
 
 
   <!-- User -->
-  <div style="display: flex; justify-content: center; align-items: center; font-size: 12px;">
+  <div style="display: flex; justify-content: center; align-items: center;">
     <h3 *ngIf="userId"
-      style="font-family: Arial, Helvetica, sans-serif; font-weight: 100; display: flex; align-items: center; gap: 5px; color: rgba(0, 0, 0, 0.845);">
+      style="font-weight: 100; display: flex; align-items: center; gap: 5px; color: rgba(0, 0, 0, 0.845);">
       <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="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="display: flex; align-items: center; gap: 5px;"><mat-icon
         style="color: orange;">verified_user</mat-icon> RSSO: initializing</h3>
   </div>
 </div>
@@ -107,7 +104,7 @@
   <div class="right">
 
     <!-- Scale Picker -->
-    <mat-button-toggle-group color="primary" style="height: 70%; font-size: 13px; border-radius: 8px;" (change)="changeScalar()"
+    <mat-button-toggle-group color="primary" style="height: 70%; 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">
@@ -117,8 +114,8 @@
 
     <!-- Date Range Picker  -->
     <div class="dateRangePicker"
-      style="display: flex; height: 100%; align-items: center; font-size: 13px; color: rgba(0, 0, 0, 0.734);">
-      <div style="height: 70%; display: flex; align-items: center; width: 170px; font-family: Arial, sans-serif; border: solid 1px rgba(0, 0, 0, 0.124);
+      style="display: flex; height: 100%; align-items: center; color: rgba(0, 0, 0, 0.734);">
+      <div style="height: 70%; display: flex; align-items: center; width: 190px; border: solid 1px rgba(0, 0, 0, 0.124);
         background-color: white; padding-left: 10px; border-radius: 8px 0px 0px 8px;">
         <!-- <mat-label>{{languageService.lMap.get('dateRangeLabel')}}</mat-label> -->
         <mat-date-range-input [formGroup]="range" [rangePicker]="picker">
diff --git a/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.html b/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.html
index 149dc62..5ce6bc9 100644
--- a/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.html
+++ b/frontend/src/app/rename-preset-dialog/rename-preset-dialog.component.html
@@ -1,9 +1,11 @@
-<h2 style="font-family: Roboto;">Preset {{preset.name}} umbenennen?</h2>
-<mat-form-field class="example-full-width">
-  <mat-label>Preset Name</mat-label>
-  <input matInput [(ngModel)]="newName">
-</mat-form-field>
-<mat-dialog-actions align="end">
-  <button  mat-raised-button  style="margin-right: 3px;" matDialogClose>Abbrechen</button>
-  <button  mat-raised-button color = "primary" style="margin-left: 3px;" (click)="renamePreset()" matDialogClose>Umbenennen</button>
-</mat-dialog-actions>
+<div style="padding: 20px;">
+  <h2 style="line-height: 1.2;">Preset <span style="color: #ef6c00;">{{preset.name}}</span> umbenennen?</h2>
+  <mat-form-field style="width: 100%;">
+    <mat-label>Preset Name</mat-label>
+    <input matInput [(ngModel)]="newName">
+  </mat-form-field>
+  <mat-dialog-actions align="end">
+    <button mat-flat-button style="letter-spacing: 0px;" matDialogClose>Abbrechen</button>
+    <button mat-flat-button style="color: white; letter-spacing: 0px" color="primary"(click)="renamePreset()" matDialogClose>Umbenennen</button>
+  </mat-dialog-actions>
+</div>
\ No newline at end of file
diff --git a/frontend/src/app/save-preset-under-dialog/save-preset-under-dialog.component.html b/frontend/src/app/save-preset-under-dialog/save-preset-under-dialog.component.html
index f0746af..dac9260 100644
--- a/frontend/src/app/save-preset-under-dialog/save-preset-under-dialog.component.html
+++ b/frontend/src/app/save-preset-under-dialog/save-preset-under-dialog.component.html
@@ -1,4 +1,4 @@
-<h2 style="font-family: Roboto;">Als neues Preset speichern?</h2>
+<h2>Als neues Preset speichern?</h2>
 <mat-form-field class="example-full-width">
   <mat-label>Preset Name</mat-label>
   <input matInput [(ngModel)]="newName">
diff --git a/frontend/src/app/state-dialog/state-dialog.component.html b/frontend/src/app/state-dialog/state-dialog.component.html
index af37600..f9e9626 100644
--- a/frontend/src/app/state-dialog/state-dialog.component.html
+++ b/frontend/src/app/state-dialog/state-dialog.component.html
@@ -1,17 +1,20 @@
-<p style="font-family:arial; margin-top: -3%;">{{this.languageService.lMap.get('stateDialogStateTransition')}} ({{data.changes.length}} {{data.changes.length > 1 ? 'Pakete' : 'Paket'}})</p>
-<mat-form-field  appearance="fill" >
-  <mat-label>{{this.languageService.lMap.get('stateDialogSelectState')}}</mat-label>
-  <mat-select [disabled]="diasbled" (selectionChange)="enableButton()" [(ngModel)]="selectedValue" name="state">
-    <mat-option *ngFor="let state of possibleStates" [value]="state.value">
-      {{state.viewValue}}
-    </mat-option>
-  </mat-select>
-</mat-form-field>
-<mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
+<div style="padding: 20px;">
+  <p style="margin-top: -3%;">{{this.languageService.lMap.get('stateDialogStateTransition')}} ({{data.changes.length}} {{data.changes.length > 1 ? 'Pakete' : 'Paket'}})</p>
+  <mat-form-field  appearance="fill" >
+    <mat-label>{{this.languageService.lMap.get('stateDialogSelectState')}}</mat-label>
+    <mat-select [disabled]="diasbled" (selectionChange)="enableButton()" [(ngModel)]="selectedValue" name="state">
+      <mat-option *ngFor="let state of possibleStates" [value]="state.value">
+        {{state.viewValue}}
+      </mat-option>
+    </mat-select>
+  </mat-form-field>
+  <mat-progress-bar mode="determinate" [value]="progress"></mat-progress-bar>
+  
+  
+  <mat-dialog-actions align="end">
+    <button [disabled]="diasbled"  mat-flat-button  style="letter-spacing: 0px;" matDialogClose>{{this.languageService.lMap.get('stateDialogCancel')}}</button>
+    <button [disabled]="bdiasbled"  mat-flat-button  style="color: white; letter-spacing: 0px" color="primary" (click)="updateState()">{{this.languageService.lMap.get('stateDialogConfirm')}}</button>
+  </mat-dialog-actions>
+</div>
 
 
-<mat-dialog-actions align="end">
-  <button [disabled]="diasbled"  mat-raised-button matDialogClose>{{this.languageService.lMap.get('stateDialogCancel')}}</button>
-  <button [disabled]="bdiasbled"  mat-raised-button color="primary" (click)="updateState()">{{this.languageService.lMap.get('stateDialogConfirm')}}</button>
-</mat-dialog-actions>
-
diff --git a/frontend/src/styles.css b/frontend/src/styles.css
index 84b8b28..29065f2 100644
--- a/frontend/src/styles.css
+++ b/frontend/src/styles.css
@@ -16,27 +16,39 @@
 @import "~@angular/material/prebuilt-themes/indigo-pink.css";
 
 .green-snackbar {
-  background: green!important;
+  background: green !important;
   color: white;
 }
+
 .green-snackbar button {
-  background-color: green!important;
+  background-color: green !important;
   color: white;
   border: none;
 }
+
 .red-snackbar {
-  background: #F44336!important;
-  color: white!important;
+  background: #F44336 !important;
+  color: white !important;
 }
+
 .red-snackbar button {
   background-color: #F44336;
   color: white !important;
   border: none;
 }
 
-html, body {
+html,
+body {
   /* overflow: hidden !important; */
+  font-family: 'Helvetica';
+  font-size: 14px;
 }
 
-html, body { height: 100%; }
-body { margin: 0; font-family: Roboto, "Helvetica Neue", sans-serif; }
+html,
+body {
+  height: 100%;
+}
+
+body {
+  margin: 0;
+}
\ No newline at end of file
diff --git a/frontend/src/theme.scss b/frontend/src/theme.scss
index 5016042..9f3ecdf 100644
--- a/frontend/src/theme.scss
+++ b/frontend/src/theme.scss
@@ -19,6 +19,10 @@ $my-theme: mat.define-light-theme((
 .dateButton.mat-button {
     background-color: blue !important;
     color: white;
+  }
+
+
+* {
+  font-family: 'Helvetica';
+  font-size: 14px;
 }
-
-