diff --git a/client/src/app/site/site.component.html b/client/src/app/site/site.component.html
index 371f9dba6..98a2cf5ec 100644
--- a/client/src/app/site/site.component.html
+++ b/client/src/app/site/site.component.html
@@ -14,9 +14,40 @@
                 <!-- Get the username from operator -->
                 {{username}}
             </mat-expansion-panel-header>
-            <mat-action-row>
-                <button (click)='logOutButton()' mat-button>Logout</button>
-            </mat-action-row>
+            <mat-nav-list>
+                <!-- <mat-list-item> -->
+
+                <a (click)='logOutButton()' mat-list-item>
+                    <fa-icon icon='user-cog'></fa-icon>
+                    <span translate>Edit Profile</span>
+                </a>
+                <a (click)='logOutButton()' mat-list-item>
+                    <fa-icon icon='key'></fa-icon>
+                    <span translate>Change Password</span>
+                </a>
+                <mat-divider></mat-divider>
+                <a (click)='logOutButton()' mat-list-item>
+                    <fa-icon icon='sign-out-alt'></fa-icon>
+                    <span translate>Logout</span>
+                </a>
+
+                <!-- <button (click)='logOutButton()' mat-button>
+                        <fa-icon icon='user-cog'></fa-icon> Edit Profile</button> -->
+                <!-- </mat-list-item>
+                <mat-list-item>
+                    <button (click)='logOutButton()' mat-button>
+                        <fa-icon icon='key'></fa-icon> Change Password</button>
+                </mat-list-item>
+
+                <mat-list-item>
+                    <button (click)='logOutButton()' mat-button>
+                        <fa-icon icon='sign-out-alt'> </fa-icon>Logout</button>
+                </mat-list-item> -->
+            </mat-nav-list>
+            <!-- TODO translate -->
+
+
+
         </mat-expansion-panel>
 
         <!-- navigation -->
diff --git a/client/src/app/site/site.component.scss-theme.scss b/client/src/app/site/site.component.scss-theme.scss
index 7ded4badf..a3d01c235 100644
--- a/client/src/app/site/site.component.scss-theme.scss
+++ b/client/src/app/site/site.component.scss-theme.scss
@@ -8,7 +8,19 @@
     $foreground: map-get($theme, foreground);
     $background: map-get($theme, background);
 
+    /** the name of the selector */
     app-site {
+        mat-sidenav-container {
+            /** nav panel on the left */
+            mat-sidenav {
+                /** rules for icons in the whole site-view */
+                .ng-fa-icon {
+                    min-width: 20px; //puts the text to the right on the same level
+                    margin-right: 10px; // the distance from the icon to the text
+                }
+            }
+        }
+
         /** adjust the color of the main container to our theme */
         .main-container {
             background-color: mat-color($background, background);
@@ -16,14 +28,32 @@
 
         /** change the nav-toolbar to the darker nuance of the current theme*/
         .nav-toolbar {
+            height: 80px;
             background-color: mat-color($primary, darker);
+
+            mat-toolbar-row {
+                height: 80px;
+            }
         }
 
         /** make the .user-menu expansion panel look like the nav-toolbar above */
         .user-menu {
             background-color: mat-color($primary, darker);
             color: mat-color($background, raised-button);
-            min-height: 64px;
+            min-height: 48px;
+
+            /** color of the divider just above the log out button */
+            mat-divider {
+                border-top-color: rgba(255, 255, 255, 0.25);
+            }
+
+            fa-icon {
+                color: mat-color($background, raised-button);
+            }
+
+            span {
+                color: mat-color($background, raised-button);
+            }
 
             .mat-expansion-indicator:after {
                 color: mat-color($background, raised-button);
@@ -32,10 +62,8 @@
 
         /** style and align the nav icons the icons*/
         .main-nav {
-            .ng-fa-icon {
+            fa-icon {
                 color: mat-color($foreground, icon);
-                min-width: 20px; //puts the text to the right on the same leve
-                margin-right: 10px; // the distance from the icon to the text
             }
             span {
                 font-weight: bold;