diff --git a/src/app/core/components/navigation/navigation.component.html b/src/app/core/components/navigation/navigation.component.html
index 8d7c27d..80355b0 100644
--- a/src/app/core/components/navigation/navigation.component.html
+++ b/src/app/core/components/navigation/navigation.component.html
@@ -25,36 +25,6 @@
           state?.username[0] + state?.roleIdentifier[0]
         }}</span>
       </button>
-      <!-- User dropdown -->
-      <div
-        class="z-50 hidden my-4 text-base list-none divide-y divide-skin-primary rounded-lg shadow-sm shadow-skin-primary bg-skin-primary"
-        id="user-dropdown"
-      >
-        <div class="px-4 py-3">
-          <span class="block text-sm text-skin-accent font-bold">{{
-            state?.username
-          }}</span>
-          <span class="block text-sm text-skin-primary-muted truncate">{{
-            state?.roleIdentifier
-          }}</span>
-        </div>
-
-        <ul class="p-4" aria-labelledby="user-menu-button">
-          <li *ngFor="let usermenuButton of usermenuButtons">
-            <button
-              [routerLink]="
-                usermenuButton.routerLink === undefined
-                  ? null
-                  : [usermenuButton.routerLink]
-              "
-              class="w-full text-left block py-2 px-3 rounded text-skin-primary hover:bg-skin-accent"
-              (click)="clickUserMenuButtonLabel(usermenuButton)"
-            >
-              {{ getUserMenuButtonLabel(usermenuButton) }}
-            </button>
-          </li>
-        </ul>
-      </div>
 
       <!--Burger Menu-->
       <button
@@ -82,6 +52,39 @@
         </svg>
       </button>
     </div>
+
+    <!-- User dropdown -->
+    <div id="user-dropdown" class="hidden min-w-full md:min-w-72 px-4">
+      <div
+        class="text-base list-none divide-y divide-skin-primary rounded-lg shadow-sm shadow-skin-primary bg-skin-primary"
+      >
+        <div class="px-4 py-3">
+          <span class="block text-sm text-skin-accent font-bold">{{
+            state?.username
+          }}</span>
+          <span class="block text-sm text-skin-primary-muted truncate">{{
+            state?.roleIdentifier
+          }}</span>
+        </div>
+
+        <ul class="p-4" aria-labelledby="user-menu-button">
+          <li *ngFor="let usermenuButton of usermenuButtons">
+            <button
+              [routerLink]="
+                usermenuButton.routerLink === undefined
+                  ? null
+                  : [usermenuButton.routerLink]
+              "
+              class="w-full text-left block py-2 px-3 rounded text-skin-primary hover:bg-skin-accent"
+              (click)="clickUserMenuButtonLabel(usermenuButton)"
+            >
+              {{ getUserMenuButtonLabel(usermenuButton) }}
+            </button>
+          </li>
+        </ul>
+      </div>
+    </div>
+
     <!-- Navigatoin -->
     <div
       class="items-center justify-between hidden w-full md:flex md:w-auto md:order-1"
@@ -92,7 +95,7 @@
       >
         <li *ngFor="let navigationLink of navigationLinks">
           <a
-            class="block py-2 px-3 rounded text-skin-primary hover:font-bold hover:bg-skin-accent md:p-0"
+            class="block py-2 px-3 rounded text-skin-primary hover:text-skin-secondary hover:bg-skin-accent md:p-0"
             [routerLink]="navigationLink.routerLink"
             [routerLinkActiveOptions]="{ exact: true }"
             routerLinkActive="font-bold"