diff --git a/src/app/app.component.html b/src/app/app.component.html
index 363c0282d1d747b5f7c1516afb875a37b6f642b9..78c8b0997b043c4240e265b5f3c05c6f5501f2dc 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,21 +1,13 @@
 <header>
-  <!--Navbar -->
-  <nav class="navbar navbar-expand-sm navbar-dark indigo">
-    <!-- Ouverture du sidenav -->
-    <span style="font-size:30px;cursor:pointer;color:white" (click)="openNav()">☰</span>
+  <!--Navbar-->
+<mdb-navbar SideClass="navbar navbar-expand-lg navbar-dark indigo">
 
-    <!-- lien vide pour que le toggler des liens apparaisse à droite -->
-    <a class="navbar-brand"></a>
+  <!-- Navbar brand -->
+  <mdb-navbar-brand class="navbar-brand" (click)="openNav()">Cassiopée</mdb-navbar-brand>
 
-    <!-- toggler des liens -->
-    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent"
-      aria-expanded="false" aria-label="Toggle navigation">
-      <!-- <span class="navbar-toggler-icon"> </span> -->
-      <i class="fa fa-ellipsis-v" aria-hidden="true"></i>
-    </button>
-
-    <!-- Collapsible content -->
-    <div class="collapse navbar-collapse" id="navbarSupportedContent">
+  <!-- Collapsible content -->
+  <links>
+      <!-- Links -->
       <ul class="navbar-nav mr-auto">
         <li class="nav-item" *ngFor="let c of _calculators">
           <a class="nav-link waves-light {{getHighlightClass(c.uid)}}" mdbRippleRadius [routerLink]="['/calculator/',c.uid]">{{c.title}}</a>
@@ -24,9 +16,12 @@
             <i class="fa fa-plus-square fa-2x fa-inverse" style='vertical-align: middle' (click)='newCalc()'></i>
         </li>
       </ul>
-    </div>
-  </nav>
-  <!--/Navbar -->
+      <!-- Links -->
+  </links>
+  <!-- Collapsible content -->
+
+</mdb-navbar>
+<!--/.Navbar-->
 </header>
 
 <main>