diff --git a/Front/skydivelogs-app/src/app/app.component.css b/Front/skydivelogs-app/src/app/app.component.css
index dfda4a8..9673883 100644
--- a/Front/skydivelogs-app/src/app/app.component.css
+++ b/Front/skydivelogs-app/src/app/app.component.css
@@ -1,5 +1,8 @@
 body {
   margin: 10px;
+  color: #424242;
+  height: 600px;
+  overflow: auto;
 }
 
 .hamburger__icon {
@@ -12,38 +15,37 @@ body {
 }
 
 .hamburger__icon__fill {
-  fill: #594e78
+  fill: #424242
 }
 
-.side-menu-disactive {
-  display: none !important;
-}
-
-.side-menu-active {
-  display: '' !important;
+.navigation.side-menu-active {
+  left: 0px;
 }
 
 .navigation {
-  border: 1px red solid;
   position: absolute;
   width: 200px;
   overflow: hidden;
   z-index: 50;
   background-color: grey;
+  height: 600px;
   padding: 5px;
-
+  left: -220px;
+  transition: 0.5s linear left;
+  -webkit-transition: 0.5s linear left;
 }
 
 .navigation ul {
   list-style: none;
+  padding: 0;
 }
 
 .navigation ul li {
-  margin: 5px;
+  margin: 10px;
 }
 
 .navigation ul li a {
   text-decoration: none;
   cursor: pointer;
-  color: black;
+  color: #424242;
 }
diff --git a/Front/skydivelogs-app/src/app/app.component.html b/Front/skydivelogs-app/src/app/app.component.html
index 7366528..bd02e3a 100644
--- a/Front/skydivelogs-app/src/app/app.component.html
+++ b/Front/skydivelogs-app/src/app/app.component.html
@@ -11,7 +11,7 @@
 
     <h2 style="display: inline;">{{ title }}</h2>
 
-    <nav class="navigation" [ngClass]="{'side-menu-active': showMenu, 'side-menu-disactive': !showMenu}">
+    <nav class="navigation" [ngClass]="{'side-menu-active': showMenu}">
       <ul>
         <li><a routerLink="/summary" routerLinkActive="active" (click)="toggleMenu()" skipLocationChange>Summary</a>
         </li>
diff --git a/Front/skydivelogs-app/src/app/app.component.ts b/Front/skydivelogs-app/src/app/app.component.ts
index 5cd9283..b81df13 100644
--- a/Front/skydivelogs-app/src/app/app.component.ts
+++ b/Front/skydivelogs-app/src/app/app.component.ts
@@ -9,6 +9,7 @@ import { ServiceComm } from '../services/service-comm.service';
 export class AppComponent implements OnInit {
   title = 'app';
   showMenu = false;
+  // showMenu = true;
 
   constructor(private serviceComm: ServiceComm) { }
 
diff --git a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.css b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.css
index 9912e46..9a7951d 100644
--- a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.css
+++ b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.css
@@ -7,3 +7,13 @@ table {
   height: 600px;
   overflow: auto;
 }
+
+.mat-row td {
+  padding: 15px;
+}
+
+.spanWithBreakWord {
+  display: inline-block;
+  min-width: 200px;
+  word-wrap: break-word;
+}
diff --git a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html
index ad33c6a..f6606d5 100644
--- a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.html
@@ -13,7 +13,7 @@
       <td mat-cell *matCellDef="let element">{{element.name}}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 </div>
diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
index 41b044e..1fe59f6 100644
--- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.html
@@ -50,7 +50,7 @@
       <td mat-cell *matCellDef="let element">{{element.type}}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 </div>
diff --git a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.css b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.css
index 9912e46..9a7951d 100644
--- a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.css
+++ b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.css
@@ -7,3 +7,13 @@ table {
   height: 600px;
   overflow: auto;
 }
+
+.mat-row td {
+  padding: 15px;
+}
+
+.spanWithBreakWord {
+  display: inline-block;
+  min-width: 200px;
+  word-wrap: break-word;
+}
diff --git a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html
index ef511d4..fefc0ca 100644
--- a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.html
@@ -38,7 +38,7 @@
       <td mat-cell *matCellDef="let element">{{element.reserveCanopy}}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 </div>
diff --git a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.css b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.css
index 9912e46..9a7951d 100644
--- a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.css
+++ b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.css
@@ -7,3 +7,13 @@ table {
   height: 600px;
   overflow: auto;
 }
+
+.mat-row td {
+  padding: 15px;
+}
+
+.spanWithBreakWord {
+  display: inline-block;
+  min-width: 200px;
+  word-wrap: break-word;
+}
diff --git a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html
index 2e61bd3..ebd72b2 100644
--- a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.html
@@ -13,7 +13,7 @@
       <td mat-cell *matCellDef="let element">{{element.name}}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 </div>
diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css
index 9912e46..9a7951d 100644
--- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css
+++ b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.css
@@ -7,3 +7,13 @@ table {
   height: 600px;
   overflow: auto;
 }
+
+.mat-row td {
+  padding: 15px;
+}
+
+.spanWithBreakWord {
+  display: inline-block;
+  min-width: 200px;
+  word-wrap: break-word;
+}
diff --git a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
index 4e1e31e..f8ae51a 100644
--- a/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
+++ b/Front/skydivelogs-app/src/app/list-of-jumps/list-of-jumps.component.html
@@ -27,7 +27,7 @@
       <td mat-cell *matCellDef="let element">{{element.gear.name}}</td>
     </ng-container>
 
-    <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+    <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
     <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
   </table>
 </div>
diff --git a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.css b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.css
index b9cb1d1..7af606a 100644
--- a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.css
+++ b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.css
@@ -1,15 +1,24 @@
-.example-container {
+.formNewJumps {
   display: flex;
   flex-direction: column;
 
   min-width: 150px;
   max-width: 500px;
   width: 100%;
+
   background-color: black;
-  color: white;
+  /* color: white; */
   padding: 15px
 }
 
-.example-container>* {
+.formNewJumps>* {
   width: 100%;
 }
+
+mat-form-field.mat-form-field {
+  font-size: 16px;
+}
+
+mat-label {
+  color: #424242;
+}
diff --git a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
index c5a327f..e432f27 100644
--- a/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
+++ b/Front/skydivelogs-app/src/app/new-jump/new-jump.component.html
@@ -1,4 +1,4 @@
-<form class="example-container" (ngSubmit)="onFormSubmit()">
+<form class="formNewJumps" (ngSubmit)="onFormSubmit()">
   <mat-form-field>
     <mat-label>Choose the jump type</mat-label>
     <input type="text" matInput [matAutocomplete]="autoJumpType" [(ngModel)]="selectedJumpType" name="selectedJumpType">