diff --git a/Front/skydivelogs-app/src/app/app.component.html b/Front/skydivelogs-app/src/app/app.component.html
index b82e1a3..19786b5 100644
--- a/Front/skydivelogs-app/src/app/app.component.html
+++ b/Front/skydivelogs-app/src/app/app.component.html
@@ -1,70 +1,55 @@
-  <header *ngIf="this.show()">
-    <div style="display: flex; justify-content: space-between;">
-      <div>
-        <svg (click)="toggleMenu()" class="hamburger__icon" viewBox="31.5 30 49.9 32">
-          <rect id="Rectangle_9" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 9" rx="2"
-            transform="translate(31.5 58)"></rect>
-          <rect id="Rectangle_10" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 10" rx="2"
-            transform="translate(31.5 44)"></rect>
-          <rect id="Rectangle_11" width="49.9" height="4" class="hamburger__icon__fill" data-name="Rectangle 11" rx="2"
-            transform="translate(31.5 30)"></rect>
-        </svg>
-        <h2 style="display: inline;">{{ title }}</h2>
-      </div>
-    </div>
+<mat-toolbar>
+  <button mat-icon-button (click)="snav.toggle()"><mat-icon>menu</mat-icon></button>
+  <h2>{{ title }}</h2>
+</mat-toolbar>
 
-    <nav class="navigation" [ngClass]="{'side-menu-active': showMenu}">
-      <ul>
-        <li>
-          <mat-icon aria-hidden="false" aria-label="Summary">timeline</mat-icon>
-          <a routerLink="/summary" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Summary</a>
-          <hr class="splitter">
-        </li>
-        <li>
-          <mat-icon aria-hidden="false" aria-label="List of jumps">list_alt</mat-icon>
-          <a routerLink="/jumps" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
-            jumps</a>
-        </li>
-        <li>
-          <mat-icon aria-hidden="false" aria-label="Add jumps">add_circle</mat-icon>
-          <a routerLink="/newjump" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Add a new
-            jump</a>
-          <hr class="splitter">
-        </li>
-        <li>
-          <mat-icon aria-hidden="false" aria-label="Dropzones">store</mat-icon>
-          <a routerLink="/dzs" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of DZs</a>
-        </li>
-        <li>
-          <mat-icon aria-hidden="false" aria-label="Aircrafts">airplanemode_active</mat-icon>
-          <a routerLink="/aircrafts" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
-            aircrafts</a>
-        </li>
-        <li>
-          <mat-icon aria-hidden="false" aria-label="List of jump types">flight_land</mat-icon>
-          <a routerLink="/jumpTypes" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
-            jump types</a>
-        </li>
-        <li>
-          <mat-icon aria-hidden="false" aria-label="List of gears">settings_input_antenna</mat-icon>
-          <a routerLink="/gears" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>List of
-            gears</a>
-        </li>
-        <li *ngIf="currentUser">
-          <hr class="splitter">
-          <mat-icon aria-hidden="false" aria-label="User account">account_box</mat-icon>
-          <a routerLink="/user" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>
-            {{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
-          </a>
-        </li>
-        <li *ngIf="currentUser">
-          <mat-icon aria-hidden="false" aria-label="To logout">logout</mat-icon>
-          <span (click)="logout()" style="cursor: pointer;">Logout</span>
-        </li>
-      </ul>
-    </nav>
-  </header>
+<mat-sidenav-container>
+  <mat-sidenav #snav mode="over" style="padding: 0 20px 0 10px;">
+    <mat-nav-list>
+      <mat-icon aria-hidden="false" aria-label="Summary">timeline</mat-icon>
+      <a routerLink="/summary" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>Summary</a>
+      <hr class="splitter">
+    </mat-nav-list>
+    <mat-nav-list>
+      <mat-icon aria-hidden="false" aria-label="List of jumps">list_alt</mat-icon>
+      <a routerLink="/jumps" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of jumps</a>
+    </mat-nav-list>
+    <mat-nav-list>
+      <mat-icon aria-hidden="false" aria-label="Add jumps">add_circle</mat-icon>
+      <a routerLink="/newjump" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>Add a new jump</a>
+      <hr class="splitter">
+    </mat-nav-list>
+    <mat-nav-list>
+      <mat-icon aria-hidden="false" aria-label="Dropzones">store</mat-icon>
+      <a routerLink="/dzs" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of DZs</a>
+    </mat-nav-list>
+    <mat-nav-list>
+      <mat-icon aria-hidden="false" aria-label="Aircrafts">airplanemode_active</mat-icon>
+      <a routerLink="/aircrafts" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of aircrafts</a>
+    </mat-nav-list>
+    <mat-nav-list>
+      <mat-icon aria-hidden="false" aria-label="List of jump types">flight_land</mat-icon>
+      <a routerLink="/jumpTypes" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of jump types</a>
+    </mat-nav-list>
+    <mat-nav-list>
+      <mat-icon aria-hidden="false" aria-label="List of gears">settings_input_antenna</mat-icon>
+      <a routerLink="/gears" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>List of gears</a>
+    </mat-nav-list>
+    <mat-nav-list *ngIf="currentUser">
+      <hr class="splitter">
+      <mat-icon aria-hidden="false" aria-label="User account">account_box</mat-icon>
+      <a routerLink="/user" routerLinkActive="active" (click)="snav.toggle()" skipLocationChange>
+        {{ this.currentUser.firstName }} {{ this.currentUser.lastName }}
+      </a>
+    </mat-nav-list>
+    <mat-nav-list *ngIf="currentUser">
+      <mat-icon aria-hidden="false" aria-label="To logout">logout</mat-icon>
+      <span (click)="logout()" style="cursor: pointer;">Logout</span>
+    </mat-nav-list>
+  </mat-sidenav>
 
-  <router-outlet></router-outlet>
-
-  <footer style="text-align: right;">Web software to log your skydive jumps - v{{ version }} - @Séb</footer>
+  <mat-sidenav-content>
+    <router-outlet></router-outlet>
+    <footer style="text-align: right;">Web software to log your skydive jumps - v{{ version }} - @Séb</footer>
+  </mat-sidenav-content>
+</mat-sidenav-container>
\ No newline at end of file
diff --git a/Front/skydivelogs-app/src/app/app.module.ts b/Front/skydivelogs-app/src/app/app.module.ts
index 7bc2429..2d7353f 100644
--- a/Front/skydivelogs-app/src/app/app.module.ts
+++ b/Front/skydivelogs-app/src/app/app.module.ts
@@ -53,6 +53,9 @@ import { MatTabsModule } from "@angular/material/tabs";
 import { MatDialogModule } from "@angular/material/dialog";
 import { MatCardModule } from "@angular/material/card";
 import { MatRadioModule } from "@angular/material/radio";
+import { MatSidenavModule } from '@angular/material/sidenav';
+import { MatListModule } from '@angular/material/list';
+import { MatToolbarModule } from '@angular/material/toolbar';
 
 import { CachingInterceptor } from "../interceptor/caching.interceptor";
 //import { BasicAuthInterceptor } from '../interceptor/basic-auth.interceptor';
@@ -163,7 +166,10 @@ export function initConfig(configService: ConfigurationHelper) {
     MatTabsModule,
     MatDialogModule,
     MatCardModule,
-    MatRadioModule
+    MatRadioModule,
+    MatSidenavModule,
+    MatListModule,
+    MatToolbarModule
   ],
   exports: [HttpClientModule],
   providers: [