diff --git a/src/app/statistics/statistics.component.css b/src/app/statistics/statistics.component.css
index 60459a7..a784c2e 100644
--- a/src/app/statistics/statistics.component.css
+++ b/src/app/statistics/statistics.component.css
@@ -4,3 +4,7 @@
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
 }
+
+html {
+  scroll-behavior: smooth;
+}
diff --git a/src/app/statistics/statistics.component.html b/src/app/statistics/statistics.component.html
index 184d756..b453c6d 100644
--- a/src/app/statistics/statistics.component.html
+++ b/src/app/statistics/statistics.component.html
@@ -1,9 +1,26 @@
-<app-menu-header label="Statistiken"></app-menu-header>
+<app-menu-header label="Statistiken" icon="bar_chart_4_bars "></app-menu-header>
 
-<h2 class="text-2xl font-bold flex flex justify-center gradient-text"> Movie-Statistiken </h2>
+<div class="p-10 pb-0 flex gap-4">
+  <h2 (click)="scrollTo('movie')"
+      class="text-xl mb-4 w-fit cursor-pointer hover:underline transition-colors">
+    Movie-Statistiken
+  </h2>
+
+    <h2 (click)="scrollTo('show')"
+      class="text-xl mb-4 w-fit cursor-pointer hover:underline transition-colors">
+    Show-Statistiken
+  </h2>
+</div>
+
+
+<div class="p-10">
+  <h2 (click)="scrollTo('movie')" id="movie"
+      class="text-2xl font-bold gradient-text mb-4 w-fit cursor-pointer hover:underline transition-colors">
+    Movie-Statistiken
+  </h2>
 
   <div class="table-table-container">
-    <table mat-table [dataSource]="moviesDS" matSort #movieSort="matSort" class="example-table">
+    <table mat-table [dataSource]="moviesDS" matSort #movieSort="matSort">
 
       <ng-container matColumnDef="movieId">
         <th mat-header-cell *matHeaderCellDef mat-sort-header="movieId" sortActionDescription="Sort by movieId">ID</th>
@@ -35,53 +52,76 @@
     </table>
   </div>
 
+  @if (loading.loading$ | async){
+    <div class="w-full h-full flex items-center justify-center mt-10">
+      <mat-progress-spinner
+        mode="indeterminate"
+        diameter="75"
+      ></mat-progress-spinner>
+    </div>
+  }
+
   <mat-paginator [length]="movieResultsLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
-
-
-<h2 class="text-2xl font-bold flex flex justify-center gradient-text"> Show-Statistiken </h2>
-
-<div class="show-table-container">
-  <table mat-table [dataSource]="showsDS" matSort #showSort="matSort" class="example-table">
-
-    <ng-container matColumnDef="showId">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="showId">ID</th>
-      <td mat-cell *matCellDef="let row">{{row.showId}}</td>
-    </ng-container>
-
-
-    <ng-container matColumnDef="showHall">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="showHallName">Kinosaal</th>
-      <td mat-cell *matCellDef="let row">{{row.showHallName}}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="showMovieTitle">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="movieTitle">Film Name</th>
-      <td mat-cell *matCellDef="let row">{{row.movieTitle}}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="showDate">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="showStart">Datum</th>
-      <td mat-cell *matCellDef="let row">{{formatDate(row.showStart)}}</td>
-    </ng-container>
-
-    <ng-container matColumnDef="showEarnings">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="earnings">
-        Umsatz
-      </th>
-      <td mat-cell *matCellDef="let row">{{(row.earnings/100).toFixed(2)}} €</td>
-    </ng-container>
-
-    <ng-container matColumnDef="showTickets">
-      <th mat-header-cell *matHeaderCellDef mat-sort-header="tickets">
-        Gebuchte Tickets
-      </th>
-      <td mat-cell *matCellDef="let row">{{row.tickets}}</td>
-    </ng-container>
-
-    <tr mat-header-row *matHeaderRowDef="showsDisplayedColumns"></tr>
-    <tr mat-row *matRowDef="let row; columns: showsDisplayedColumns;"></tr>
-  </table>
 </div>
 
-<mat-paginator [length]="showsResultLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
 
+<div class="p-10">
+  <h2 (click)="scrollTo('show')" id="show"
+      class="text-2xl font-bold gradient-text mb-4 w-fit cursor-pointer hover:underline transition-colors">
+    Show-Statistiken
+  </h2>
+
+  <div class="show-table-container">
+    <table mat-table [dataSource]="showsDS" matSort #showSort="matSort">
+
+      <ng-container matColumnDef="showId">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="showId">ID</th>
+        <td mat-cell *matCellDef="let row">{{row.showId}}</td>
+      </ng-container>
+
+
+      <ng-container matColumnDef="showHall">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="showHallName">Kinosaal</th>
+        <td mat-cell *matCellDef="let row">{{row.showHallName}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="showMovieTitle">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="movieTitle">Film Name</th>
+        <td mat-cell *matCellDef="let row">{{row.movieTitle}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="showDate">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="showStart">Datum</th>
+        <td mat-cell *matCellDef="let row">{{formatDate(row.showStart)}}</td>
+      </ng-container>
+
+      <ng-container matColumnDef="showEarnings">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="earnings">
+          Umsatz
+        </th>
+        <td mat-cell *matCellDef="let row">{{(row.earnings/100).toFixed(2)}} €</td>
+      </ng-container>
+
+      <ng-container matColumnDef="showTickets">
+        <th mat-header-cell *matHeaderCellDef mat-sort-header="tickets">
+          Gebuchte Tickets
+        </th>
+        <td mat-cell *matCellDef="let row">{{row.tickets}}</td>
+      </ng-container>
+
+      <tr mat-header-row *matHeaderRowDef="showsDisplayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: showsDisplayedColumns;"></tr>
+    </table>
+  </div>
+
+  @if (loading.loading$ | async){
+    <div class="w-full h-full flex items-center justify-center mt-10">
+      <mat-progress-spinner
+        mode="indeterminate"
+        diameter="75"
+      ></mat-progress-spinner>
+    </div>
+  }
+
+  <mat-paginator [length]="showsResultLength" [pageSize]="30" aria-label="Select page of GitHub search results"></mat-paginator>
+</div>
diff --git a/src/app/statistics/statistics.component.ts b/src/app/statistics/statistics.component.ts
index 1745cb4..81b14a0 100644
--- a/src/app/statistics/statistics.component.ts
+++ b/src/app/statistics/statistics.component.ts
@@ -1,15 +1,11 @@
-import {Component, effect, inject, signal, ViewChild} from '@angular/core';
-import {MatSort, Sort, MatSortModule} from '@angular/material/sort';
-import {HttpService} from '../http.service';
-import {
-  StatisticsFilm,
-  StatisticsVorstellung,
-} from '@infinimotion/model-frontend';
-import {LoadingService} from '../loading.service';
-import {firstValueFrom} from 'rxjs';
-import {MatTableDataSource} from '@angular/material/table';
-import {MatPaginatorModule} from '@angular/material/paginator';
-
+import { Component, inject, signal, ViewChild } from '@angular/core';
+import { MatSort } from '@angular/material/sort';
+import { HttpService } from '../http.service';
+import { StatisticsFilm, StatisticsVorstellung } from '@infinimotion/model-frontend';
+import { LoadingService } from '../loading.service';
+import { firstValueFrom } from 'rxjs';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginatorModule } from '@angular/material/paginator';
 
 @Component({
   selector: 'app-statistics',
@@ -32,7 +28,7 @@ export class StatisticsComponent {
   @ViewChild('movieSort') movieSort!: MatSort;
   @ViewChild('showSort') showSort!: MatSort;
 
-  private loading = inject(LoadingService);
+  public loading = inject(LoadingService);
 
   ngOnInit(): void {
     this.loading.show()
@@ -91,4 +87,14 @@ export class StatisticsComponent {
       }
     };
   }
+
+  scrollTo(id: string) {
+    const element = document.getElementById(id);
+    if (element) {
+      element.scrollIntoView({ behavior: 'smooth', block: 'start' });
+      const url = new URL(window.location.href);
+      url.hash = id;
+      history.replaceState(null, '', url.toString());
+    }
+  }
 }