diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index fe1940b..9cfc493 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -78,6 +78,7 @@ import { QuizEffects } from './state/quiz/quiz.effects';
 import { PictureEffects } from './state/picture/picture.effects';
 import { DeletionEffects } from './state/deletion/deletion.effects';
 import { MAT_DATE_LOCALE } from '@angular/material/core';
+import { MatTabsModule } from '@angular/material/tabs';
 
 registerLocaleData(localeDeCh);
 
@@ -205,6 +206,7 @@ export function MSALGuardConfigFactory(): MsalGuardConfiguration {
     MatInputModule,
     MatProgressBarModule,
     NgOptimizedImage,
+    MatTabsModule,
   ],
   providers: [
     {
diff --git a/src/app/components/dashboard/dashboard.component.html b/src/app/components/dashboard/dashboard.component.html
index 5d08a5a..2e0e8be 100644
--- a/src/app/components/dashboard/dashboard.component.html
+++ b/src/app/components/dashboard/dashboard.component.html
@@ -4,73 +4,83 @@
 <app-panel *ngIf="error$ | async">
   <app-alert [message]="(error$ | async)!"></app-alert>
 </app-panel>
-<ng-container *ngIf="!((loading$ | async) || (error$ | async))">
-  <div *ngIf="dashboard$ | async as dashboard" class="m-2 space-y-2">
-    <app-title>Chärtli</app-title>
-    <div class="grid grid-cols-2 gap-2">
-      <div class="bg-dark-gray p-2">
-        <div class="text-light-pink">Meine Chärtli</div>
-        <div class="text-4xl">
-          {{ dashboard.myUniqueCardsCount }} /
-          {{ dashboard.allCardsCount }}
+<mat-tab-group
+  *ngIf="!((loading$ | async) || (error$ | async))"
+  mat-align-tabs="center"
+  animationDuration="0ms"
+>
+  <mat-tab label="Chärtli">
+    <div *ngIf="dashboard$ | async as dashboard" class="m-2 space-y-2">
+      <div class="grid grid-cols-2 gap-2">
+        <div class="bg-dark-gray p-2">
+          <div class="text-light-pink">Meine Chärtli</div>
+          <div class="text-4xl">
+            {{ dashboard.myUniqueCardsCount }} /
+            {{ dashboard.allCardsCount }}
+          </div>
+          <div class="pt-2">
+            <mat-progress-bar
+              mode="determinate"
+              value="{{ progress$ | async }}"
+              color="primary"
+            ></mat-progress-bar>
+          </div>
         </div>
-        <div class="pt-2">
-          <mat-progress-bar
-            mode="determinate"
-            value="{{ progress$ | async }}"
-            color="primary"
-          ></mat-progress-bar>
+        <div class="bg-dark-gray p-2">
+          <div class="text-light-pink">Mein Rang</div>
+          <div class="text-4xl">
+            {{ myRank$ | async }} / {{ totalUsers$ | async }}
+          </div>
         </div>
       </div>
       <div class="bg-dark-gray p-2">
-        <div class="text-light-pink">Mein Rang</div>
-        <div class="text-4xl">
-          {{ myRank$ | async }} / {{ totalUsers$ | async }}
-        </div>
+        <div class="text-light-pink">Top 10</div>
+        <ol class="list-decimal list-inside">
+          <li *ngFor="let ranking of topRanking$ | async">
+            {{ ranking.displayName }}
+            <span class="text-light-blue"
+              >[{{ ranking.uniqueCardsCount }}]</span
+            >
+          </li>
+        </ol>
       </div>
-    </div>
-    <div class="bg-dark-gray p-2">
-      <div class="text-light-pink">Top 10</div>
-      <ol class="list-decimal list-inside">
-        <li *ngFor="let ranking of topRanking$ | async">
-          {{ ranking.displayName }}
-          <span class="text-light-blue">[{{ ranking.uniqueCardsCount }}]</span>
-        </li>
-      </ol>
-    </div>
-    <div *ngIf="dashboard.totalCardQuantity" class="bg-dark-gray p-2">
-      <div class="text-light-pink">Total ausgeschüttete Chärtli</div>
-      <div class="text-4xl">{{ dashboard.totalCardQuantity | number }}</div>
-    </div>
-    <div *ngIf="dashboard.lastDistribution" class="bg-dark-gray p-2">
-      <div class="text-light-pink">Jüngste Ausschüttung</div>
-      <div class="text-lg">
-        {{ dashboard.lastDistribution | date: 'dd. LLLL yyyy, HH:mm' }} Uhr
+      <div *ngIf="dashboard.totalCardQuantity" class="bg-dark-gray p-2">
+        <div class="text-light-pink">Total ausgeschüttete Chärtli</div>
+        <div class="text-4xl">{{ dashboard.totalCardQuantity | number }}</div>
+      </div>
+      <div *ngIf="dashboard.lastDistribution" class="bg-dark-gray p-2">
+        <div class="text-light-pink">Jüngste Ausschüttung</div>
+        <div class="text-lg">
+          {{ dashboard.lastDistribution | date: 'dd. LLLL yyyy, HH:mm' }} Uhr
+        </div>
       </div>
     </div>
-    <app-title>Quiz</app-title>
-    <div class="grid grid-cols-2 gap-2">
-      <div class="bg-dark-gray p-2">
-        <div class="text-light-pink">Meine Punkte</div>
-        <div class="text-4xl">
-          {{ (userRankingQuiz$ | async)?.quizScore }}
+  </mat-tab>
+  <mat-tab label="Quiz">
+    <div *ngIf="dashboard$ | async as dashboard" class="m-2 space-y-2">
+      <div class="grid grid-cols-2 gap-2">
+        <div class="bg-dark-gray p-2">
+          <div class="text-light-pink">Meine Punkte</div>
+          <div class="text-4xl">
+            {{ (userRankingQuiz$ | async)?.quizScore }}
+          </div>
+        </div>
+        <div class="bg-dark-gray p-2">
+          <div class="text-light-pink">Mein Rang</div>
+          <div class="text-4xl">
+            {{ (userRankingQuiz$ | async)?.rank }} / {{ totalUsers$ | async }}
+          </div>
         </div>
       </div>
       <div class="bg-dark-gray p-2">
-        <div class="text-light-pink">Mein Rang</div>
-        <div class="text-4xl">
-          {{ (userRankingQuiz$ | async)?.rank }} / {{ totalUsers$ | async }}
-        </div>
+        <div class="text-light-pink">Top 10</div>
+        <ol class="list-decimal list-inside">
+          <li *ngFor="let ranking of topRankingQuiz$ | async">
+            {{ ranking.displayName }}
+            <span class="text-light-blue">[{{ ranking.quizScore }}]</span>
+          </li>
+        </ol>
       </div>
     </div>
-    <div class="bg-dark-gray p-2">
-      <div class="text-light-pink">Top 10</div>
-      <ol class="list-decimal list-inside">
-        <li *ngFor="let ranking of topRankingQuiz$ | async">
-          {{ ranking.displayName }}
-          <span class="text-light-blue">[{{ ranking.quizScore }}]</span>
-        </li>
-      </ol>
-    </div>
-  </div>
-</ng-container>
+  </mat-tab>
+</mat-tab-group>
diff --git a/src/styles/_overrides.scss b/src/styles/_overrides.scss
index 1462bae..8d6a8dd 100644
--- a/src/styles/_overrides.scss
+++ b/src/styles/_overrides.scss
@@ -45,3 +45,12 @@
 .mat-mdc-dialog-container .mat-mdc-dialog-content {
   padding: 16px !important;
 }
+
+// Button toggle
+.mat-button-toggle-appearance-standard {
+  background-color: #1e1e1e !important;
+
+  &.mat-button-toggle-checked {
+    background-color: #0093d9 !important;
+  }
+}