diff --git a/src/app/components/home/new-landing/new-landing.component.scss b/src/app/components/home/new-landing/new-landing.component.scss
index 87e458989ee2a526a6292b29537fd5aee0b166c9..3b6c2ec2b6b9efc9262b3de52ea724451d7ead1d 100644
--- a/src/app/components/home/new-landing/new-landing.component.scss
+++ b/src/app/components/home/new-landing/new-landing.component.scss
@@ -14,3 +14,8 @@
   padding-left: 5px;
   color: var(--on-primary);
 }
+
+#new_session-button:focus {
+  background: var(--on-surface);
+  color: var(--background);
+}
diff --git a/src/app/components/home/user-home/user-home.component.html b/src/app/components/home/user-home/user-home.component.html
index ed885a33caf7f99b09842b4d5815f5b1e71a9a05..9605cbb4a9961912fbc5b9dee1cfc8f1112f2314 100644
--- a/src/app/components/home/user-home/user-home.component.html
+++ b/src/app/components/home/user-home/user-home.component.html
@@ -4,7 +4,7 @@
     <app-room-join></app-room-join>
   </div>
   <div fxLayout="row" fxLayoutAlign="center" fxLayoutGap="15px">
-    <button mat-raised-button (click)="openCreateRoomDialog()" id="create_session-button">
+    <button class="focus_button" mat-raised-button (click)="openCreateRoomDialog()" id="create_session-button">
       <mat-icon>add</mat-icon>
       {{ 'home-page.create-session' | translate }}
     </button>
diff --git a/src/app/components/home/user-home/user-home.component.scss b/src/app/components/home/user-home/user-home.component.scss
index c4386686332601035f2d88f94ced82f502a08e55..d5f973a915ca0f09535097949225d2e7142ae187 100644
--- a/src/app/components/home/user-home/user-home.component.scss
+++ b/src/app/components/home/user-home/user-home.component.scss
@@ -15,3 +15,8 @@ app-room-list {
 h1 {
   color: var(--on-surface)!important;
 }
+
+.focus_button:focus {
+  background: var(--on-surface);
+  color: var(--background);
+}
diff --git a/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.scss b/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.scss
index 2b59e16aec51e8e443ce18213570f112894ea1cd..0d427f6008789952a0c187cf8e1dbb91158d301c 100644
--- a/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.scss
+++ b/src/app/components/shared/dialog/dialog-action-buttons/dialog-action-buttons.component.scss
@@ -16,3 +16,13 @@
   background-color: var(--red);
   color: #fff;
 }
+
+.dialog-action-buttons .cancel-button:focus {
+  background: var(--on-surface);
+  color: var(--background);
+}
+
+.dialog-action-buttons .primary-confirm-button:focus {
+  background: var(--on-surface);
+  color: var(--background);
+}
diff --git a/src/app/components/shared/footer/footer.component.html b/src/app/components/shared/footer/footer.component.html
index a8ad9775764ced365376a28d12c2c6286a288977..f4f6eb1a46ae1fc8619267546d65ddf85007da17 100644
--- a/src/app/components/shared/footer/footer.component.html
+++ b/src/app/components/shared/footer/footer.component.html
@@ -1,12 +1,14 @@
 <div>
   <mat-toolbar id="footer-toolbar">
-    <button mat-button (click)="showHelp()" *ngIf="router.url !== '/home'" aria-labelledby="help-label">
+    <button class="focus_button" mat-button (click)="showHelp()" *ngIf="router.url !== '/home'"
+            aria-labelledby="help-label">
       <mat-icon>help</mat-icon>
       <span *ngIf="deviceType === 'desktop'">
         {{ 'footer.help' | translate }}
       </span>
     </button>
-    <button mat-button (click)="showDemo()" *ngIf="router.url === '/home'" aria-labelledby="demo-label">
+    <button class="focus_button" mat-button (click)="showDemo()" *ngIf="router.url === '/home'"
+            aria-labelledby="demo-label">
       <mat-icon>flag</mat-icon>
       <span *ngIf="deviceType === 'desktop'">
         {{ 'footer.demo' | translate }}
@@ -14,7 +16,7 @@
   </button>
 
     <span class="fill-remaining-space"></span>
-    <button mat-button aria-labelledby="style-label" [matMenuTriggerFor]="themeMenu">
+    <button class="focus_button" mat-button aria-labelledby="style-label" [matMenuTriggerFor]="themeMenu">
       <mat-icon>accessibility_new</mat-icon>
       <span *ngIf="deviceType === 'desktop'">
           {{'footer.style' | translate}}
@@ -22,7 +24,8 @@
   </button>
 
     <span class="fill-remaining-space"></span>
-    <button id="language-menu" mat-button aria-labelledby="language-label" [matMenuTriggerFor]="langMenu">
+    <button class="focus_button" id="language-menu" mat-button aria-labelledby="language-label"
+            [matMenuTriggerFor]="langMenu">
       <mat-icon>language</mat-icon>
       <span *ngIf="deviceType === 'desktop'">
           {{'footer.language' | translate}}
@@ -30,14 +33,14 @@
   </button>
 
     <span class="fill-remaining-space"></span>
-    <button (click)="showDataProtection()" mat-button aria-labelledby="data-protection-label">
+    <button class="focus_button" (click)="showDataProtection()" mat-button aria-labelledby="data-protection-label">
       <mat-icon>security</mat-icon>
       <span *ngIf="deviceType === 'desktop'">
         {{'footer.dsgvo' | translate}}
       </span>
     </button>
     <span class="fill-remaining-space"></span>
-    <button (click)="showImprint()" mat-button aria-labelledby="imprint-label">
+    <button class="focus_button" (click)="showImprint()" mat-button aria-labelledby="imprint-label">
       <mat-icon>info</mat-icon>
       <span *ngIf="deviceType === 'desktop'">
         {{'footer.imprint' | translate}}
@@ -79,8 +82,8 @@
     </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>
+      <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>
     </mat-menu>
   </mat-toolbar>
 </div>
diff --git a/src/app/components/shared/footer/footer.component.scss b/src/app/components/shared/footer/footer.component.scss
index 91a2ac6ae68154b6712c3a3b2e21081d687ea3d3..cea2c7d9b1750f5784cf305a03d2b1f2ff6cf47a 100644
--- a/src/app/components/shared/footer/footer.component.scss
+++ b/src/app/components/shared/footer/footer.component.scss
@@ -197,3 +197,12 @@ mat-icon {
   color:rgba(0,0,0,0.9);
   font-weight:500;
 }
+
+.focus_button:focus {
+  background: var(--on-surface);
+  color: var(--background);
+}
+
+.focus_item:focus {
+  border: 1px solid var(--on-surface);
+}
diff --git a/src/app/components/shared/header/header.component.scss b/src/app/components/shared/header/header.component.scss
index 56eca3c6e85052fbe27c2abb29beb68272da23ce..440bac8868612392ad3fcb4a3c8b43cd521bddec 100644
--- a/src/app/components/shared/header/header.component.scss
+++ b/src/app/components/shared/header/header.component.scss
@@ -38,3 +38,7 @@ h2 {
 .mat-button {
   padding: 0 0 0 10px;
 }
+
+button:focus {
+  border: 1px solid var(--on-surface);
+}
diff --git a/src/app/components/shared/login/login.component.html b/src/app/components/shared/login/login.component.html
index c0fd4a3b1eb93a2adffaa9b95367ae8292d5f4aa..233bd39acadea06899de7323d3e0c3cf202fd68b 100644
--- a/src/app/components/shared/login/login.component.html
+++ b/src/app/components/shared/login/login.component.html
@@ -1,5 +1,5 @@
 <div fxLayout="column" fxLayoutAlign="space-around">
-  <button (click)="guestLogin()" class="guest" mat-flat-button type="button"
+  <button id="focus_button_guest" (click)="guestLogin()" class="guest" mat-flat-button type="button"
           matTooltip="{{'login.guest-login-tooltip' | translate}}">
     {{ 'login.guest-login' | translate }}
   </button>
@@ -29,7 +29,7 @@
     <mat-placeholder class="placeholder">{{ 'login.password' | translate }}</mat-placeholder>
     <mat-error *ngIf="passwordFormControl.hasError('required')">{{ 'login.password-required' | translate }}</mat-error>
   </mat-form-field>
-  <button class="login" mat-flat-button type="submit">
+  <button id="focus_button_user" class="login" mat-flat-button type="submit">
     {{ 'login.login' | translate }}
   </button>
   <div class="forgot-password">
diff --git a/src/app/components/shared/login/login.component.scss b/src/app/components/shared/login/login.component.scss
index d02c229a7eeb7bafb16059bd46a8385b7fe11404..c9457adb290785690dab230288d2e31aa095cfb9 100644
--- a/src/app/components/shared/login/login.component.scss
+++ b/src/app/components/shared/login/login.component.scss
@@ -88,3 +88,13 @@ h3 {
   overflow: hidden;
   left: -10000px;
 }
+
+#focus_button_user:focus {
+  background: var(--on-surface);
+  color: var(--background);
+}
+
+#focus_button_guest:focus {
+  background: var(--on-surface);
+  color: var(--background);
+}
diff --git a/src/app/components/shared/room-join/room-join.component.scss b/src/app/components/shared/room-join/room-join.component.scss
index 0cebcefae5df925186d987106d7d13953b03d73b..74919f9260c22b704682d9e440a10c68217cc5f1 100644
--- a/src/app/components/shared/room-join/room-join.component.scss
+++ b/src/app/components/shared/room-join/room-join.component.scss
@@ -58,3 +58,8 @@ input:-webkit-autofill {
 mat-error{
   color:var(--on-surface);
 }
+
+#session_enter-button:focus {
+  background: var(--on-surface);
+  color: var(--background);
+}