diff --git a/src/app/components/shared/footer/footer.component.html b/src/app/components/shared/footer/footer.component.html
index a78872ae9afb1f31d61a09720c71eeada7551622..09fcd95512394adee1dbba45a9ab8580544ca55c 100644
--- a/src/app/components/shared/footer/footer.component.html
+++ b/src/app/components/shared/footer/footer.component.html
@@ -1,9 +1,9 @@
 <div>
 
-  <mat-toolbar id="footer-toolbar" class="mat-elevation-z24">
+  <mat-toolbar class="mat-elevation-z24" id="footer-toolbar">
 
-    <button class="focus_button" mat-button (click)="showDemo()"
-            aria-labelledby="demo-label">
+    <button (click)="showDemo()" aria-labelledby="demo-label" class="focus_button"
+            mat-button>
       <mat-icon>flag</mat-icon>
       <span *ngIf="deviceType === 'desktop'">
         {{ 'footer.demo' | translate }}
@@ -12,8 +12,8 @@
 
     <span class="fill-remaining-space"></span>
 
-    <button class="focus_button" mat-button
-            aria-labelledby="style-label" [matMenuTriggerFor]="themeMenu">
+    <button [matMenuTriggerFor]="themeMenu" aria-labelledby="style-label"
+            class="focus_button" mat-button>
       <mat-icon>accessibility_new</mat-icon>
       <span *ngIf="deviceType === 'desktop'">
           {{'footer.style' | translate}}
@@ -21,9 +21,9 @@
     </button>
 
     <span class="fill-remaining-space"></span>
-    <button class="focus_button" id="language-menu" mat-button
-            aria-labelledby="language-label"
-            [matMenuTriggerFor]="langMenu">
+    <button [matMenuTriggerFor]="langMenu" aria-labelledby="language-label" class="focus_button"
+            id="language-menu"
+            mat-button>
       <mat-icon>language</mat-icon>
       <span *ngIf="deviceType === 'desktop'">
           {{'footer.language' | translate}}
@@ -32,8 +32,8 @@
 
     <span class="fill-remaining-space"></span>
 
-    <button class="focus_button" (click)="showDataProtection()" mat-button
-            aria-labelledby="data-protection-label">
+    <button (click)="showDataProtection()" aria-labelledby="data-protection-label" class="focus_button"
+            mat-button>
       <mat-icon>security</mat-icon>
       <span *ngIf="deviceType === 'desktop'">
         {{'footer.dsgvo' | translate}}
@@ -42,26 +42,22 @@
 
     <span class="fill-remaining-space"></span>
 
-    <button class="focus_button" (click)="showImprint()" mat-button aria-labelledby="imprint-label">
+    <button (click)="showImprint()" aria-labelledby="imprint-label" class="focus_button" mat-button>
       <mat-icon>info</mat-icon>
       <span *ngIf="deviceType === 'desktop'">
         {{'footer.imprint' | translate}}
       </span>
     </button>
 
-    <mat-menu class="color-menu" #themeMenu="matMenu" [overlapTrigger]="false">
-      <button
-        *ngFor="let theme of themes"
-        (click)="changeTheme(theme);"
-        matRipple [matRippleColor]="'rgba(0,0,0,0.1)'"
-        title="{{theme.toString(getLanguage())}}"
-        aria-label="test">
+
+    <mat-menu #themeMenu="matMenu" [overlapTrigger]="false" cdkTrapFocus class="color-menu">
+      <button (click)="changeTheme(theme)" *ngFor="let theme of themes" mat-menu-item style="height:50px;">
         <div class="btnContent">
-          <div class="btnColorIcon" [ngStyle]="{
-                  'background-color':theme.getPreviewColor()}">
-            <div class="checked" [ngClass]="{
-                        'checked_true':theme.key===themeClass,
-                        'checked_false':theme.key!==themeClass}">
+          <div [ngStyle]="{
+'background-color':theme.getPreviewColor()}" class="btnColorIcon">
+            <div [ngClass]="{
+'checked_true':theme.key===themeClass,
+'checked_false':theme.key!==themeClass}" class="checked">
               <mat-icon [ngStyle]="{'color':theme.getOnPreviewColor()}">
                 checked
               </mat-icon>
@@ -80,8 +76,8 @@
     </mat-menu>
 
     <mat-menu #langMenu="matMenu" [overlapTrigger]="false">
-      <button class="focus_item" mat-menu-item (click)="useLanguage('de')">{{ 'footer.german' | translate }}</button>
-      <button class="focus_item" mat-menu-item (click)="useLanguage('en')">{{ 'footer.english' | translate }}</button>
+      <button (click)="useLanguage('de')" class="focus_item" mat-menu-item>{{ 'footer.german' | translate }}</button>
+      <button (click)="useLanguage('en')" class="focus_item" mat-menu-item>{{ 'footer.english' | translate }}</button>
     </mat-menu>
 
   </mat-toolbar>
diff --git a/src/app/components/shared/footer/footer.component.scss b/src/app/components/shared/footer/footer.component.scss
index 05b8d234b26261f5c839f3e989a1d167fdda728b..b6d171f095e8eedbd6f1b5fce046ff041ed46cf7 100644
--- a/src/app/components/shared/footer/footer.component.scss
+++ b/src/app/components/shared/footer/footer.component.scss
@@ -167,8 +167,7 @@ mat-icon {
   width:calc( 100% - 50px );
   float:right;
   position:relative;
-  top:50%;
-  transform:translateY(-50%);
+  top:-10px;
 }
 
 .btnContent>.btnAppend>.title{