diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.html b/projects/common/src/fm/components/user-menu/user-menu.component.html
index 4d45d8f..fa8895e 100644
--- a/projects/common/src/fm/components/user-menu/user-menu.component.html
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.html
@@ -1,11 +1,13 @@
 <div *ngIf="user">
     <div (click)="toggle($event)" class="rounded-circle menu-button" [title]="user.name">
         <span>{{getLetter()}}</span>
-        <div  [ngClass]="{'hidden':!showMenu}" class="card">           
-            <div class="card-body">
-                <div class="username">{{user.name}}</div>
-                <div><a href="#" (click)="logout($event)" i18n>logout</a></div>
-            </div>
+        <div class="menu hidden" [ngClass]="{'hidden':!showMenu}">
+            <div  class="card">           
+                <div class="card-body">
+                    <div class="username">{{user.name}}</div>
+                    <div><a href="#" (click)="logout($event)" i18n>logout</a></div>
+                </div>
+            </div>    
         </div>
     </div>
 </div>
diff --git a/projects/common/src/fm/components/user-menu/user-menu.component.scss b/projects/common/src/fm/components/user-menu/user-menu.component.scss
index b3897b0..4538297 100644
--- a/projects/common/src/fm/components/user-menu/user-menu.component.scss
+++ b/projects/common/src/fm/components/user-menu/user-menu.component.scss
@@ -14,12 +14,20 @@ div.menu-button > span {
     color:white;
 }
 
-.card {
+.menu {
+    max-height: 100vh;
+    transition: max-height 0.2s;
+    overflow: hidden;
+    box-shadow: 0 0 20px rgba(0,0,0,.3);
     position: absolute;
     top: 3rem;
     right:0;
+}
+
+.card {      
     padding:0.5rem;
-    min-width: 10rem;
+    min-width: 10rem;      
+    overflow: hidden;
 }
 
 .username {
@@ -34,5 +42,5 @@ div.menu-button > span {
 }
 
 .hidden {
-    display: none;
+    max-height: 0;   
 }
\ No newline at end of file