diff --git a/lang/en.json b/lang/en.json
index 131558a151a33679ae6b9d3b9ef9cdd5c296b191..033e1c1aafa7b8eb9b86c3e206d4f6ce1461e805 100755
--- a/lang/en.json
+++ b/lang/en.json
@@ -134,11 +134,15 @@
 		"wrongLoginPassword"                 : "Wrong login or password",
 		"wrongPassword"                      : "Wrong password",
 		"wsUser"                             : "Web service user",
-		"visaUser"                             : "Visa user",
-		"signUser"                             : "Sign user",
-		"visaProcessInfo"                             : "Visa to",
-		"signProcessInfo"                             : "Sign to",
-		"inProgress"                             : "In progress",
-		"waiting"                             : "Waiting"
+		"visaUser": "Visa user",
+		"signUser": "Sign user",
+		"visaProcessInfo": "Visa to",
+		"signProcessInfo": "Sign to",
+		"inProgress": "In progress",
+		"waiting": "Waiting",
+		"visaLabel": "to approve",
+		"signLabel": "to sign",
+		"noteLabel": "to note",
+		"documents": "document(s)"
 	}
 }
diff --git a/lang/fr.json b/lang/fr.json
index 8b38f6d967366700a07ae2021ba425e321faed19..f7a98845d249658cb879c410af980735040797d2 100755
--- a/lang/fr.json
+++ b/lang/fr.json
@@ -135,10 +135,14 @@
 		"wrongPassword"                      : "Mauvais mot de passe",
 		"wsUser"                             : "Utilisateur web service",
 		"visaUser"                             : "Viseur",
-		"signUser"                             : "Signataire",
-		"visaProcessInfo"                             : "Visé le",
-		"signProcessInfo"                             : "Signé le",
-		"inProgress"                             : "En cours",
-		"waiting"                             : "En attente"
+		"signUser": "Signataire",
+		"visaProcessInfo": "Visé le",
+		"signProcessInfo": "Signé le",
+		"inProgress": "En cours",
+		"waiting": "En attente",
+		"visaLabel": "à viser",
+		"signLabel": "à signer",
+		"noteLabel": "à annoter",
+		"documents": "document(s)"
 	}
 }
diff --git a/src/frontend/app/service/signatures.service.ts b/src/frontend/app/service/signatures.service.ts
index cbda913f046bb2667529b9b8204a52d6cb306894..8a29de1040cdd7643246f1752ff2b60239b851c4 100755
--- a/src/frontend/app/service/signatures.service.ts
+++ b/src/frontend/app/service/signatures.service.ts
@@ -31,7 +31,7 @@ export class SignaturesContentService {
     workingAreaHeight = 0;
     renderingDoc = true;
     mobileMode = true;
-    mode = 'SIGN';
+    mode = '';
     scale = 1;
     x = 0;
     y = 0;
@@ -77,7 +77,7 @@ export class SignaturesContentService {
         } else {
             this.mobileMode = false;
         }
-        this.mode = 'SIGN';
+        this.mode = '';
         this.scale = 1;
         this.x = 0;
         this.y = 85;
diff --git a/src/frontend/app/sidebar/sidebar.component.html b/src/frontend/app/sidebar/sidebar.component.html
index 9e7748530b858e69486008283863469f29a7f2f5..c3e5b6682362356e46e4a030c4a4f85dec7b384e 100755
--- a/src/frontend/app/sidebar/sidebar.component.html
+++ b/src/frontend/app/sidebar/sidebar.component.html
@@ -11,10 +11,12 @@
       </div>
     </header>
     <header class="sidebar-header">
+      1 {{'lang.documents' | translate}}&nbsp;<span class="primary" *ngIf="signaturesService.mode != ''">{{'lang.'+signaturesService.mode+'Label' | translate}}</span>
     </header>
     <section class="sidebar-btn">
-      <button class="btn btn-xs blue filter" [ngClass]="[signaturesService.mode == 'NOTE' ? 'active' : '']" (click)="filter('NOTE')">{{'lang.annotation' | translate}} <span *ngIf="signaturesService.documentsListCount['NOTE']" class="badgeNbDocument">{{signaturesService.documentsListCount["NOTE"]}}</span></button>
-      <button class="btn btn-xs blue filter" [ngClass]="[signaturesService.mode == 'SIGN' ? 'active' : '']" (click)="filter('SIGN')">{{'lang.signature' | translate}} <span *ngIf="signaturesService.documentsListCount['SIGN']" class="badgeNbDocument">{{signaturesService.documentsListCount["SIGN"]}}</span></button>
+      <button class="btn btn-xs blue filter" [ngClass]="[signaturesService.mode == 'sign' ? 'active' : '']" (click)="filter('sign')"><i class="fas fa-file-signature"></i></button>
+      <button class="btn btn-xs blue filter" [ngClass]="[signaturesService.mode == 'visa' ? 'active' : '']" (click)="filter('visa')"><i class="fas fa-thumbs-up"></i></button>
+      <button class="btn btn-xs blue filter" [ngClass]="[signaturesService.mode == 'note' ? 'active' : '']" (click)="filter('note')"><i class="far fa-comment-dots"></i></button>
     </section>
   </div>
   <ul #listContent class="nav" detect-scroll (onScroll)="handleScroll($event)" [bottomOffset]="1" [topOffset]="1">
diff --git a/src/frontend/app/sidebar/sidebar.component.scss b/src/frontend/app/sidebar/sidebar.component.scss
index 9bd82f19d68e195a5a684b3993199cf015d43324..9f282f1c63e315cbfa944ca63856c812be3b7f53 100644
--- a/src/frontend/app/sidebar/sidebar.component.scss
+++ b/src/frontend/app/sidebar/sidebar.component.scss
@@ -153,6 +153,10 @@
   right: 10px;
 }
 
+.filter {
+  width: 35px;
+}
+
 .filter.active {
   background: $primary;
 }
diff --git a/src/frontend/app/sidebar/sidebar.component.ts b/src/frontend/app/sidebar/sidebar.component.ts
index 30a61a5144f8fed23d321fa3d4a9a7ca8dd320d0..4afc027d63c6d824369bf17bf917af76309b0883 100755
--- a/src/frontend/app/sidebar/sidebar.component.ts
+++ b/src/frontend/app/sidebar/sidebar.component.ts
@@ -83,7 +83,8 @@ export class SidebarComponent implements OnInit {
     }
 
     filter(mode: string) {
-        this.signaturesService.mode = mode;
+        this.signaturesService.mode == mode ? this.signaturesService.mode = '' : this.signaturesService.mode = mode;
+        
         this.offset = 0;
         this.http.get('../rest/documents?limit=' + this.limit + '&offset=' + this.offset + '&mode=' + this.signaturesService.mode)
             .subscribe((data: any) => {