diff --git a/src/app/app.component.html b/src/app/app.component.html
index e69c12c153e2dd6e94d1dad08fa97d2254db4820..9bf0d4c164e3b4cf82d0b66d9505e6250771a868 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,7 +1,13 @@
   <div fxLayout="column" fxFill appTheme>
-    <app-header #header></app-header>
-    <div fxFlex class="app-component">
-      <router-outlet></router-outlet>
-    </div>
-    <app-footer></app-footer>
+    <header>
+      <app-header #header></app-header>
+    </header>
+    <main>
+      <div fxFlex class="app-component">
+        <router-outlet></router-outlet>
+      </div>
+    </main>
+    <footer>
+      <app-footer></app-footer>
+    </footer>
   </div>
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index c88959035ac30935f1a8d318e6a4efbc6368a947..8fb1c6f0f6ae8e0e60b3d4a7c43f907800ca9a7d 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -2,3 +2,7 @@
   padding: 4%;
   background-color:var(--background);
 }
+
+main {
+  height: 100%;
+}
diff --git a/src/app/components/shared/footer/footer.component.html b/src/app/components/shared/footer/footer.component.html
index 83ed552e6b1236f054153cb0a2659b2df3852648..28cff54cc29bb7c162c3463234e9ffa520ea2bad 100644
--- a/src/app/components/shared/footer/footer.component.html
+++ b/src/app/components/shared/footer/footer.component.html
@@ -1,81 +1,79 @@
-<footer>
-  <mat-toolbar id="footer-toolbar">
-    <button mat-button (click)="navToBlog()" *ngIf="router.url !== '/home'">
-      <mat-icon>help_outline</mat-icon>
-      <span *ngIf="deviceType === 'desktop'">
+<mat-toolbar id="footer-toolbar">
+  <button mat-button (click)="navToBlog()" *ngIf="router.url !== '/home'">
+    <mat-icon>help_outline</mat-icon>
+    <span *ngIf="deviceType === 'desktop'">
         {{ 'footer.help' | translate }}
       </span>
-    </button>
-    <button mat-button (click)="showDemo()" *ngIf="router.url === '/home'">
-      <mat-icon>ondemand_video</mat-icon>
-      <span *ngIf="deviceType === 'desktop'">
+  </button>
+  <button mat-button (click)="showDemo()" *ngIf="router.url === '/home'">
+    <mat-icon>ondemand_video</mat-icon>
+    <span *ngIf="deviceType === 'desktop'">
         {{ 'footer.demo' | translate }}
       </span>
-    </button>
+  </button>
 
-    <span class="fill-remaining-space"></span>
-    <button mat-button [matMenuTriggerFor]="themeMenu">
-      <mat-icon>palette</mat-icon>
-      <span *ngIf="deviceType === 'desktop'">
+  <span class="fill-remaining-space"></span>
+  <button mat-button [matMenuTriggerFor]="themeMenu">
+    <mat-icon>palette</mat-icon>
+    <span *ngIf="deviceType === 'desktop'">
           {{'footer.style' | translate}}
         </span>
-    </button>
+  </button>
 
-    <span class="fill-remaining-space"></span>
-    <button mat-button [matMenuTriggerFor]="langMenu">
-      <mat-icon>language</mat-icon>
-      <span *ngIf="deviceType === 'desktop'">
+  <span class="fill-remaining-space"></span>
+  <button mat-button [matMenuTriggerFor]="langMenu">
+    <mat-icon>language</mat-icon>
+    <span *ngIf="deviceType === 'desktop'">
           {{'footer.language' | translate}}
         </span>
-    </button>
+  </button>
 
-    <span class="fill-remaining-space"></span>
-    <button mat-button (click)="navToDSGVO()">
-      <mat-icon>security</mat-icon>
-      <span *ngIf="deviceType === 'desktop'">
+  <span class="fill-remaining-space"></span>
+  <button mat-button (click)="navToDSGVO()">
+    <mat-icon>security</mat-icon>
+    <span *ngIf="deviceType === 'desktop'">
         {{ 'footer.dsgvo' | translate}}
       </span>
-    </button>
-    <span class="fill-remaining-space"></span>
-    <button mat-button (click)="navToImprint()">
-      <mat-icon>info</mat-icon>
-      <span *ngIf="deviceType === 'desktop'">
+  </button>
+  <span class="fill-remaining-space"></span>
+  <button mat-button (click)="navToImprint()">
+    <mat-icon>info</mat-icon>
+    <span *ngIf="deviceType === 'desktop'">
         {{ 'footer.imprint' | translate}}
       </span>
-    </button>
+  </button>
 
-    <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
-      <mat-grid-list cols="2">
-        <mat-grid-tile>
-          <button mat-icon-button class="default color-button" (click)="changeTheme('arsnova')">
-            <mat-icon class="color-icon" matTooltip="{{ 'footer.bright' | translate }}">lens</mat-icon>
-            <mat-icon *ngIf="themeClass === 'arsnova'" class="check">check_circle</mat-icon>
-          </button>
-        </mat-grid-tile>
-        <mat-grid-tile>
-          <button mat-icon-button class="dark color-button" (click)="changeTheme('dark')">
-            <mat-icon class="color-icon" matTooltip="{{ 'footer.dark' | translate }}">lens</mat-icon>
-            <mat-icon *ngIf="themeClass === 'dark'" class="check">check_circle</mat-icon>
-          </button>
-        </mat-grid-tile>
-        <mat-grid-tile>
-          <button mat-icon-button class="purple color-button" (click)="changeTheme('purple')">
-            <mat-icon class="color-icon" matTooltip="{{ 'footer.beamer' | translate }}">lens</mat-icon>
-            <mat-icon *ngIf="themeClass === 'purple'" class="check">check_circle</mat-icon>
-          </button>
-        </mat-grid-tile>
-        <mat-grid-tile>
-          <button mat-icon-button class="blue color-button" (click)="changeTheme('blue')">
-            <mat-icon class="color-icon" matTooltip="{{ 'footer.wai' | translate }}">lens</mat-icon>
-            <mat-icon *ngIf="themeClass === 'blue'" class="check">check_circle</mat-icon>
-          </button>
-        </mat-grid-tile>
-      </mat-grid-list>
-    </mat-menu>
+  <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
+    <mat-grid-list cols="2">
+      <mat-grid-tile>
+        <button mat-icon-button class="default color-button" (click)="changeTheme('arsnova')">
+          <mat-icon class="color-icon" matTooltip="{{ 'footer.bright' | translate }}">lens</mat-icon>
+          <mat-icon *ngIf="themeClass === 'arsnova'" class="check">check_circle</mat-icon>
+        </button>
+      </mat-grid-tile>
+      <mat-grid-tile>
+        <button mat-icon-button class="dark color-button" (click)="changeTheme('dark')">
+          <mat-icon class="color-icon" matTooltip="{{ 'footer.dark' | translate }}">lens</mat-icon>
+          <mat-icon *ngIf="themeClass === 'dark'" class="check">check_circle</mat-icon>
+        </button>
+      </mat-grid-tile>
+      <mat-grid-tile>
+        <button mat-icon-button class="purple color-button" (click)="changeTheme('purple')">
+          <mat-icon class="color-icon" matTooltip="{{ 'footer.beamer' | translate }}">lens</mat-icon>
+          <mat-icon *ngIf="themeClass === 'purple'" class="check">check_circle</mat-icon>
+        </button>
+      </mat-grid-tile>
+      <mat-grid-tile>
+        <button mat-icon-button class="blue color-button" (click)="changeTheme('blue')">
+          <mat-icon class="color-icon" matTooltip="{{ 'footer.wai' | translate }}">lens</mat-icon>
+          <mat-icon *ngIf="themeClass === 'blue'" class="check">check_circle</mat-icon>
+        </button>
+      </mat-grid-tile>
+    </mat-grid-list>
+  </mat-menu>
 
-    <mat-menu #langMenu="matMenu" [overlapTrigger]="false">
-      <button mat-menu-item (click)="useLanguage('de')">{{ 'footer.german' | translate }}</button>
-      <button mat-menu-item (click)="useLanguage('en')">{{ 'footer.english' | translate }}</button>
-    </mat-menu>
-  </mat-toolbar>
-</footer>
+  <mat-menu #langMenu="matMenu" [overlapTrigger]="false">
+    <button mat-menu-item (click)="useLanguage('de')">{{ 'footer.german' | translate }}</button>
+    <button mat-menu-item (click)="useLanguage('en')">{{ 'footer.english' | translate }}</button>
+  </mat-menu>
+</mat-toolbar>