diff --git a/Front/skydivelogs-app/src/app/app.component.css b/Front/skydivelogs-app/src/app/app.component.css
index f3e3e59..adb9cc8 100644
--- a/Front/skydivelogs-app/src/app/app.component.css
+++ b/Front/skydivelogs-app/src/app/app.component.css
@@ -15,3 +15,28 @@
 .side-menu-active {
   display: '' !important;
 }
+
+.navigation {
+  border: 1px red solid;
+  position: absolute;
+  width: 200px;
+  overflow: hidden;
+  z-index: 50;
+  background-color: grey;
+  padding: 5px;
+
+}
+
+.navigation ul {
+  list-style: none;
+}
+
+.navigation ul li {
+  margin: 5px;
+}
+
+.navigation ul li a {
+  text-decoration: none;
+  cursor: pointer;
+  color: black;
+}
diff --git a/Front/skydivelogs-app/src/app/app.component.html b/Front/skydivelogs-app/src/app/app.component.html
index 6894834..9cd9d07 100644
--- a/Front/skydivelogs-app/src/app/app.component.html
+++ b/Front/skydivelogs-app/src/app/app.component.html
@@ -19,13 +19,15 @@
 
     <h2 style="display: inline;">{{ title }}</h2>
 
-    <nav [ngClass]="{'side-menu-active': showMenu, 'side-menu-disactive': !showMenu}">
-      <a routerLink="/summary" routerLinkActive="active" (click)="toggleMenu()">Summary</a>
-      <a routerLink="/jumpsList" routerLinkActive="active" (click)="toggleMenu()">List of jumps</a>
-      <a routerLink="/dz" routerLinkActive="active" (click)="toggleMenu()">List of DZs</a>
-      <a routerLink="/aircraftList" routerLinkActive="active" (click)="toggleMenu()">List of aircrafts</a>
-      <a routerLink="/jumpTypeList" routerLinkActive="active" (click)="toggleMenu()">List of jump types</a>
-      <a routerLink="/newjump" routerLinkActive="active" (click)="toggleMenu()">Add a new jump</a>
+    <nav class="navigation" [ngClass]="{'side-menu-active': showMenu, 'side-menu-disactive': !showMenu}">
+      <ul>
+        <li><a routerLink="/summary" routerLinkActive="active" (click)="toggleMenu()">Summary</a></li>
+        <li><a routerLink="/jumpsList" routerLinkActive="active" (click)="toggleMenu()">List of jumps</a></li>
+        <li><a routerLink="/dz" routerLinkActive="active" (click)="toggleMenu()">List of DZs</a></li>
+        <li><a routerLink="/aircraftList" routerLinkActive="active" (click)="toggleMenu()">List of aircrafts</a></li>
+        <li><a routerLink="/jumpTypeList" routerLinkActive="active" (click)="toggleMenu()">List of jump types</a></li>
+        <li><a routerLink="/newjump" routerLinkActive="active" (click)="toggleMenu()">Add a new jump</a></li>
+      </ul>
     </nav>
   </header>