diff --git a/projects/project-3/frontend/src/app/app.module.ts b/projects/project-3/frontend/src/app/app.module.ts
index 3cbe2e4..5e2fd0f 100644
--- a/projects/project-3/frontend/src/app/app.module.ts
+++ b/projects/project-3/frontend/src/app/app.module.ts
@@ -27,6 +27,7 @@ import {MatTableModule} from '@angular/material/table';
 import {AutoRefreshComponent} from './map/auto-refresh/auto-refresh.component';
 import {MatSlideToggleModule} from '@angular/material/slide-toggle';
 import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatTooltipModule} from '@angular/material/tooltip';
 
 @NgModule({
   declarations: [
@@ -36,31 +37,32 @@ import {MatCheckboxModule} from '@angular/material/checkbox';
     PopUpComponent,
     AutoRefreshComponent
   ],
-  imports: [
-    BrowserModule,
-    AppRoutingModule,
-    BrowserAnimationsModule,
-    MatToolbarModule,
-    MatIconModule,
-    MatButtonModule,
-    FlexLayoutModule,
-    HttpClientModule,
-    NgApexchartsModule,
-    MatGridListModule,
-    MatCardModule,
-    MatMenuModule,
-    LayoutModule,
-    MatSidenavModule,
-    MatDatepickerModule,
-    MatFormFieldModule,
-    MatNativeDateModule,
-    FormsModule,
-    ReactiveFormsModule,
-    MatInputModule,
-    MatTableModule,
-    MatSlideToggleModule,
-    MatCheckboxModule
-  ],
+    imports: [
+        BrowserModule,
+        AppRoutingModule,
+        BrowserAnimationsModule,
+        MatToolbarModule,
+        MatIconModule,
+        MatButtonModule,
+        FlexLayoutModule,
+        HttpClientModule,
+        NgApexchartsModule,
+        MatGridListModule,
+        MatCardModule,
+        MatMenuModule,
+        LayoutModule,
+        MatSidenavModule,
+        MatDatepickerModule,
+        MatFormFieldModule,
+        MatNativeDateModule,
+        FormsModule,
+        ReactiveFormsModule,
+        MatInputModule,
+        MatTableModule,
+        MatSlideToggleModule,
+        MatCheckboxModule,
+        MatTooltipModule
+    ],
   providers: [],
   bootstrap: [AppComponent]
 })
diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
index c6e9190..5400d92 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.html
@@ -22,11 +22,12 @@
         <mat-card fxFlex fxLayout="column">
           <mat-card-header fxFlex="15%">
             <div class="example-header-image" mat-card-avatar></div>
-            <mat-card-title>{{bikePoint?.commonName}}</mat-card-title>
+            <mat-card-title style="margin-top: 1em; margin-left: 0">{{bikePoint?.commonName}}</mat-card-title>
           </mat-card-header>
-          <mat-card-content fxFlex="70%" fxLayout="column" fxLayoutAlign="space-evenly">
-            <div class="user-input" fxFlex fxLayout="row" fxLayoutAlign="space-evenly center">
-              <form [formGroup]="form">
+          <mat-card-content fxFlex="70%" fxLayout="column" fxLayoutAlign="space-between">
+            <div class="user-input" fxFlex fxLayout="row" fxLayoutAlign="start center">
+              <form [formGroup]="form" style="margin-left: 2em">
+                <p>Select a range to analyze data</p>
                 <mat-form-field appearance="fill" class="datepicker">
                   <mat-label>Enter a range</mat-label>
                   <mat-date-range-input [max]="maxEndDate" [min]="maxStartDate" [rangePicker]="picker"
@@ -48,6 +49,8 @@
             <div class="chart-bikepoint-availability" fxFlex fxLayout="column">
               <div id="chart">
                 <apx-chart
+                  [title]="bikePointChartOptions.title"
+                  [subtitle]="bikePointChartOptions.subtitle"
                   [chart]="bikePointChartOptions.chart"
                   [colors]="bikePointChartOptions.colors"
                   [dataLabels]="bikePointChartOptions.dataLabels"
@@ -56,7 +59,6 @@
                   [plotOptions]="bikePointChartOptions.plotOptions"
                   [series]="bikePointChartOptions.series"
                   [stroke]="bikePointChartOptions.stroke"
-                  [title]="bikePointChartOptions.title"
                   [tooltip]="bikePointChartOptions.tooltip"
                   [xaxis]="bikePointChartOptions.xaxis"
                   [yaxis]="bikePointChartOptions.yaxis"
@@ -81,14 +83,15 @@
           <ng-container matColumnDef="select">
             <th mat-header-cell *matHeaderCellDef></th>
             <td mat-cell *matCellDef="let row">
-              <mat-checkbox (click)="$event.stopPropagation()"
+              <mat-checkbox matTooltip="toggle to view marker on map" matTooltipPosition="above"
+                            (click)="$event.stopPropagation()"
                             (change)="$event ? selectRow($event, row) : null"
                             [checked]="selectionModel.isSelected(row)">
               </mat-checkbox>
             </td>
           </ng-container>
           <ng-container matColumnDef="endStationName">
-            <th *matHeaderCellDef mat-header-cell> station of lend destination</th>
+            <th *matHeaderCellDef mat-header-cell> station of rental destination</th>
             <td *matCellDef="let element" mat-cell><a
               [routerLink]="['/dashboard/', element.stationId]">{{element.stationName}}</a></td>
           </ng-container>
@@ -99,7 +102,7 @@
           </ng-container>
 
           <ng-container matColumnDef="avgDuration">
-            <th *matHeaderCellDef mat-header-cell> average lend duration</th>
+            <th *matHeaderCellDef mat-header-cell> average rental duration</th>
             <td *matCellDef="let element" mat-cell> {{humanizeAvgDuration(element.avgDuration)}} </td>
           </ng-container>
 
@@ -117,14 +120,15 @@
           <ng-container matColumnDef="select">
             <th mat-header-cell *matHeaderCellDef></th>
             <td mat-cell *matCellDef="let row">
-              <mat-checkbox (click)="$event.stopPropagation()"
+              <mat-checkbox matTooltip="toggle to view marker on map" matTooltipPosition="above"
+                            (click)="$event.stopPropagation()"
                             (change)="$event ? selectRow($event, row) : null"
                             [checked]="selectionModel.isSelected(row)">
               </mat-checkbox>
             </td>
           </ng-container>
           <ng-container matColumnDef="startStationName">
-            <th *matHeaderCellDef mat-header-cell> station of lend origin</th>
+            <th *matHeaderCellDef mat-header-cell> station of rental origin</th>
             <td *matCellDef="let element" mat-cell><a
               [routerLink]="['/dashboard/', element.stationId]"> {{element.stationName}}</a></td>
           </ng-container>
@@ -135,7 +139,7 @@
           </ng-container>
 
           <ng-container matColumnDef="avgDuration">
-            <th *matHeaderCellDef mat-header-cell> average lend duration</th>
+            <th *matHeaderCellDef mat-header-cell> average rental duration</th>
             <td *matCellDef="let element" mat-cell> {{humanizeAvgDuration(element.avgDuration)}} </td>
           </ng-container>
 
@@ -153,8 +157,12 @@
 
     <div class="container-borrow-duration" fxLayout="row" fxLayoutAlign="center">
       <mat-card fxFlex fxLayout="column">
-        <mat-card-header class="chart-header">
-          <mat-card-title>Borrow Duration</mat-card-title>
+        <mat-card-header>
+          <mat-card-title>Rental Duration</mat-card-title>
+          <mat-card-subtitle>
+            This chart shows the rent duration based on the currently selected station.
+            The time it takes for a rent which has the current station as origin is displayed here.
+          </mat-card-subtitle>
         </mat-card-header>
         <mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
           <div class="station-dashboard-borrow-duration" fxFlex="97%">
@@ -177,7 +185,12 @@
     <div class="container-borrow-time" fxLayout="row" fxLayoutAlign="center">
       <mat-card fxFlex fxLayout="column">
         <mat-card-header class="chart-header">
-          <mat-card-title>Borrow Time</mat-card-title>
+          <mat-card-title>Rental Time</mat-card-title>
+          <mat-card-subtitle>
+            This chart shows the workload of the currently selected Station in relation
+            of the time of the day. It is visualized at which time of the day a journey begins or ends.
+            In addition, the average rental duration of the trips is displayed at the given time (green).
+          </mat-card-subtitle>
         </mat-card-header>
 
         <mat-card-content fxFlex fxLayout="row" fxLayoutAlign="center">
diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
index 3f2326b..f9eefe9 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.scss
@@ -7,7 +7,7 @@ mat-sidenav-content {
 }
 
 a {
-  color: #017bfe;
+  color: black;
 }
 
 img {
@@ -20,7 +20,8 @@ img {
 }
 
 .submit-date {
-  margin-bottom: 15px;
+  margin-top: 1em;
+  margin-left: 4em;
 }
 
 #chart {
@@ -46,13 +47,14 @@ img {
 
 .mat-card-title {
   margin-top: 1em;
+  margin-left: 2em;
 }
 
-.chart-header {
-  display: inline-flex;
-  justify-content: center;
+.mat-card-subtitle {
+  margin-left: 39px;
 }
 
+
 .container-map {
   height: 40em;
   margin: 1em 2em;
@@ -72,12 +74,12 @@ img {
 }
 
 .container-borrow-duration {
-  height: 40em;
+  height: 41em;
   margin: 1em 2em;
 }
 
 .container-borrow-time {
-  height: 40em;
+  height: 41em;
   margin: 1em 2em;
 }
 
diff --git a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
index 5bc0b22..00c54b6 100644
--- a/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
+++ b/projects/project-3/frontend/src/app/dashboard/dashboard.component.ts
@@ -30,7 +30,8 @@ import {DateAdapter, MAT_DATE_FORMATS, NativeDateAdapter} from '@angular/materia
 import {formatDate} from '@angular/common';
 
 export type ChartOptions = {
-  title: ApexTitleSubtitle
+  title: ApexTitleSubtitle;
+  subtitle: ApexTitleSubtitle;
   series: ApexAxisChartSeries;
   chart: ApexChart;
   colors: string[];
@@ -160,6 +161,14 @@ export class DashboardComponent implements OnInit {
         this.bikePoint = data;
         const NbBlockedDocks = data.status.NbDocks - data.status.NbBikes - data.status.NbEmptyDocks;
         this.bikePointChartOptions = {
+          subtitle: {
+            text: 'This chart visualizes the availability of the bikes',
+            offsetX: 20,
+            offsetY: 15,
+            style: {
+              fontSize: '15px'
+            }
+          },
           series: [
             {
               name: 'Bikes',
@@ -322,7 +331,7 @@ export class DashboardComponent implements OnInit {
             data: numbers
           },
           {
-            name: 'average Duration',
+            name: 'average rental duration',
             type: 'line',
             data: avgDuration
           }
@@ -361,7 +370,7 @@ export class DashboardComponent implements OnInit {
         }, {
           opposite: true,
           title: {
-            text: 'average Duration'
+            text: 'average rental duration'
           },
           labels: {
             formatter: (val: number): string => {
@@ -484,7 +493,7 @@ export class DashboardComponent implements OnInit {
             data: numbers
           },
           {
-            name: 'average Duration',
+            name: 'average rental duration',
             type: 'line',
             data: avgDuration
           }
@@ -515,7 +524,7 @@ export class DashboardComponent implements OnInit {
         }, {
           opposite: true,
           title: {
-            text: 'average Duration'
+            text: 'average rental duration'
           },
           labels: {
             formatter: (val: number): string => {
@@ -589,7 +598,6 @@ export class DashboardComponent implements OnInit {
     return source;
   }
 
-
   getRandomColor(): string {
     const color = this.colors[Math.floor(Math.random() * this.colors.length)];
     this.colors = this.colors.filter(c => c !== color);