diff --git a/src/app/app.component.html b/src/app/app.component.html
index 6bdcbc2af0ffe1f6b053930879537e8319ac87f6..e3245eb0acfb5f3e00baadfd32aaf965a4a5cbe2 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -56,6 +56,9 @@
     <button *ngIf="currentRoute != '/list'" mat-icon-button id="new-calculator" routerLink="/list" (click)="sidenav.close()">
       <mat-icon>add_box</mat-icon>
     </button>
+    <a *ngIf="enableHeaderDoc" target="_blank" id="header-doc" href="/assets/docs-fr/index.html" (click)="sidenav.close()">
+      <mat-icon>help</mat-icon>
+    </a>
 
     <mat-progress-bar *ngIf="showProgressBar" color="accent" id="loading-progress-bar"
       [mode]="progressBarMode" [value]="progessBarValue">
diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index 0a4cebf95d8ed94e6641ec5fddc8b1e29110071d..25a2b9e344f6d16fdace3842c4eb515f74f98fda 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -55,6 +55,16 @@ button:focus {
     }
 }
 
+#header-doc {
+    color: white;
+    transform: scale(1.4);
+    margin-top: 10px;
+
+    &:focus {
+        outline: 0;
+    }
+}
+
 #tabs-container {
     width: 100%;
 }
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index a4f44c3d2bdf8ccb859e03224da8940aaafc3aaa..0624e3f4792581d11616c17d06067fb129acce1f 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -272,6 +272,10 @@ export class AppComponent implements OnInit, OnDestroy, Observer {
     this.progressBarDeterminate = ! show;
   }
 
+  public get enableHeaderDoc() {
+    return this.currentRoute === "/list" && this._calculators.length === 0;
+  }
+
   // interface Observer
 
   update(sender: any, data: any): void {