diff --git a/frontend/src/app/components/menu/menu.component.html b/frontend/src/app/components/menu/menu.component.html
index 2bf71bfc8..2cb5c828b 100644
--- a/frontend/src/app/components/menu/menu.component.html
+++ b/frontend/src/app/components/menu/menu.component.html
@@ -1,14 +1,15 @@
 <div class="sidenav" [class]="navOpen ? 'open': 'close'" *ngIf="userMenuGroups$ | async as menuGroups">
   <div class="pt-3 pl-4 pr-4">
     <nav>
-      <div *ngFor="let group of menuGroups">
+      <div *ngFor="let group of menuGroups" >
         <h6 class="d-flex justify-content-between align-items-center mt-4 mb-2 text-uppercase">
           <span>{{ group.title }}</span>
         </h6>
         <ul class="nav flex-column" *ngFor="let item of group.items">
           <li class="nav-item d-flex justify-content-start align-items-center" (click)="navOpen = false;">
             <fa-icon [icon]="['fas', item.faIcon]" [fixedWidth]="true"></fa-icon>
-            <a class="nav-link" routerLinkActive="active" [routerLink]="[item.link]" role="tab">{{ item.title }}</a>
+            <a *ngIf="item.link === 'logout'" class="nav-link" role="tab" (click)="logout()">{{ item.title }}</a>
+            <a *ngIf="item.title !== 'Logout'" class="nav-link" [routerLink]="[item.link]" role="tab">{{ item.title }}</a>
           </li>
         </ul>
       </div>
diff --git a/frontend/src/app/components/menu/menu.component.ts b/frontend/src/app/components/menu/menu.component.ts
index 3494dc165..494931b1d 100644
--- a/frontend/src/app/components/menu/menu.component.ts
+++ b/frontend/src/app/components/menu/menu.component.ts
@@ -20,4 +20,8 @@ export class MenuComponent implements OnInit {
   ngOnInit(): void {
     this.userMenuGroups$ = this.apiService.getUserMenuGroups$();
   }
+
+  logout(): void {
+    console.log('logout');
+  }
 }