diff --git a/frontend/src/app/general/header/header.component.html b/frontend/src/app/general/header/header.component.html
index 9c18f0a11..2d1407f49 100644
--- a/frontend/src/app/general/header/header.component.html
+++ b/frontend/src/app/general/header/header.component.html
@@ -21,19 +21,25 @@
     </div>
 
     <div class="hidden gap-2 xl:flex">
-      <div
-        *ngFor="let item of navBarService.navBarItems"
-        [routerLink]="item.routerLink"
-      >
-        <a
-          mat-raised-button
-          color="primary"
-          *ngIf="userService.validateUserRole(item.requiredRole)"
-          [attr.href]="item.href"
-          [attr.target]="item.target"
-        >
-          {{ item.name }} <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
-        </a>
+      <div *ngFor="let item of navBarService.navBarItems">
+        <ng-container *ngIf="userService.validateUserRole(item.requiredRole)">
+          <ng-container *ngIf="item.href; else router">
+            <a
+              mat-raised-button
+              color="primary"
+              [attr.href]="item.href"
+              [attr.target]="item.target"
+            >
+              {{ item.name }}
+              <mat-icon *ngIf="item.icon">{{ item.icon }}</mat-icon>
+            </a>
+          </ng-container>
+          <ng-template #router>
+            <a mat-raised-button color="primary" [routerLink]="item.routerLink">
+              {{ item.name }}
+            </a>
+          </ng-template>
+        </ng-container>
       </div>
     </div>
     <div>
diff --git a/frontend/src/app/general/nav-bar-menu/nav-bar-menu.component.html b/frontend/src/app/general/nav-bar-menu/nav-bar-menu.component.html
index 3e9c89f97..b8c9613fd 100644
--- a/frontend/src/app/general/nav-bar-menu/nav-bar-menu.component.html
+++ b/frontend/src/app/general/nav-bar-menu/nav-bar-menu.component.html
@@ -5,20 +5,30 @@
 
 <mat-list>
   <div *ngFor="let item of navBarService.navBarItems">
-    <div [routerLink]="item.routerLink">
-      <a
-        mat-list-item
-        (click)="navBarService.toggle()"
-        *ngIf="userService.validateUserRole(item.requiredRole)"
-        [attr.href]="item.href"
-        [attr.target]="item.target"
-      >
-        {{ item.name }}
-        <mat-icon class="open-in-new" *ngIf="item.icon">{{
-          item.icon
-        }}</mat-icon>
-      </a>
-    </div>
+    <ng-container *ngIf="userService.validateUserRole(item.requiredRole)">
+      <ng-container *ngIf="item.href; else router">
+        <a
+          mat-list-item
+          (click)="navBarService.toggle()"
+          [attr.href]="item.href"
+          [attr.target]="item.target"
+        >
+          {{ item.name }}
+          <mat-icon class="open-in-new" *ngIf="item.icon">{{
+            item.icon
+          }}</mat-icon>
+        </a>
+      </ng-container>
+      <ng-template #router>
+        <a
+          mat-list-item
+          (click)="navBarService.toggle()"
+          [routerLink]="item.routerLink"
+        >
+          {{ item.name }}
+        </a>
+      </ng-template>
+    </ng-container>
     <mat-divider></mat-divider>
   </div>
   <mat-divider></mat-divider>