diff --git a/Back/skydiveLogs-api/Data/JumpsDb-log.db b/Back/skydiveLogs-api/Data/JumpsDb-log.db
index 8c5401f..a10789b 100644
Binary files a/Back/skydiveLogs-api/Data/JumpsDb-log.db and b/Back/skydiveLogs-api/Data/JumpsDb-log.db differ
diff --git a/Front/skydivelogs-app/src/app/app.module.ts b/Front/skydivelogs-app/src/app/app.module.ts
index f7f3bf8..fb74169 100644
--- a/Front/skydivelogs-app/src/app/app.module.ts
+++ b/Front/skydivelogs-app/src/app/app.module.ts
@@ -45,6 +45,7 @@ import { MatProgressSpinnerModule } from "@angular/material/progress-spinner";
 import { MatSelectModule } from "@angular/material/select";
 import { MatTableModule } from "@angular/material/table";
 import { MatTabsModule } from "@angular/material/tabs";
+import { MatDialogModule } from "@angular/material/dialog";
 
 import { CachingInterceptor } from "../interceptor/caching.interceptor";
 //import { BasicAuthInterceptor } from '../interceptor/basic-auth.interceptor';
@@ -138,7 +139,8 @@ const appRoutes: Routes = [
     MatIconModule,
     MatAutocompleteModule,
     MatProgressSpinnerModule,
-    MatTabsModule
+    MatTabsModule,
+    MatDialogModule
   ],
   exports: [HttpClientModule],
   providers: [
diff --git a/Front/skydivelogs-app/src/app/create-user/create-user.component.html b/Front/skydivelogs-app/src/app/create-user/create-user.component.html
index b767d64..b62f86e 100644
--- a/Front/skydivelogs-app/src/app/create-user/create-user.component.html
+++ b/Front/skydivelogs-app/src/app/create-user/create-user.component.html
@@ -1,21 +1,4 @@
 <form [formGroup]="createForm" (ngSubmit)="onCreateSubmit()">
-  <div class="form-group">
-    <label for="username">Username</label>
-    <input type="text" formControlName="username" class="form-control"
-      [ngClass]="{ 'is-invalid': submitted && createCtrls.username.errors }" />
-    <div *ngIf="submitted && createCtrls.username.errors" class="invalid-feedback">
-      <div *ngIf="createCtrls.username.errors.required">Username is required</div>
-    </div>
-  </div>
-  <div class="form-group">
-    <label for="password">Password</label>
-    <input type="password" formControlName="password" class="form-control"
-      [ngClass]="{ 'is-invalid': submitted && createCtrls.password.errors }" />
-    <div *ngIf="submitted && createCtrls.password.errors" class="invalid-feedback">
-      <div *ngIf="createCtrls.password.errors.required">Password is required</div>
-    </div>
-  </div>
-
   <div class="form-group">
     <label for="firstname">Firstname</label>
     <input type="text" formControlName="firstname" class="form-control"
@@ -41,6 +24,23 @@
     </div>
   </div>
 
+  <div class="form-group">
+    <label for="username">Username</label>
+    <input type="text" formControlName="username" class="form-control"
+      [ngClass]="{ 'is-invalid': submitted && createCtrls.username.errors }" />
+    <div *ngIf="submitted && createCtrls.username.errors" class="invalid-feedback">
+      <div *ngIf="createCtrls.username.errors.required">Username is required</div>
+    </div>
+  </div>
+  <div class="form-group">
+    <label for="password">Password</label>
+    <input type="password" formControlName="password" class="form-control"
+      [ngClass]="{ 'is-invalid': submitted && createCtrls.password.errors }" />
+    <div *ngIf="submitted && createCtrls.password.errors" class="invalid-feedback">
+      <div *ngIf="createCtrls.password.errors.required">Password is required</div>
+    </div>
+  </div>
+
   <button [disabled]="loading" class="btn btn-primary">
     <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
     Create user and login
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 fca50a0..b58aece 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
@@ -1,6 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button (click)="add()">Add a aircraft</button>
-  <app-new-aircraft *ngIf="showAddForm === true"></app-new-aircraft>
+  <button mat-button (click)="openDialogToAdd()" class="btn btn-primary">Add a aircraft</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">
diff --git a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts
index a70b740..5449659 100644
--- a/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts
+++ b/Front/skydivelogs-app/src/app/list-of-aircrafts/list-of-aircrafts.component.ts
@@ -1,37 +1,39 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatTableDataSource } from "@angular/material/table";
+import { MatDialog } from "@angular/material/dialog";
 
-import { AircraftResp } from '../../models/aircraft';
-import { AircraftService } from '../../services/aircraft.service';
-import { ServiceComm } from '../../services/service-comm.service';
+import { AircraftResp } from "../../models/aircraft";
+import { AircraftService } from "../../services/aircraft.service";
+import { ServiceComm } from "../../services/service-comm.service";
+import { NewAircraftComponent } from "../new-aircraft/new-aircraft.component";
 
 @Component({
-  selector: 'app-list-of-aircrafts',
-  templateUrl: './list-of-aircrafts.component.html',
-  styleUrls: ['./list-of-aircrafts.component.css']
+  selector: "app-list-of-aircrafts",
+  templateUrl: "./list-of-aircrafts.component.html",
+  styleUrls: ["./list-of-aircrafts.component.css"]
 })
 export class ListOfAircraftsComponent implements OnInit {
-  public displayedColumns: Array<string> = ['id', 'name'];
+  public displayedColumns: Array<string> = ["id", "name"];
   public dataSourceTable: MatTableDataSource<AircraftResp>;
   public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  public showAddForm: boolean;
 
   constructor(
     private serviceApi: AircraftService,
-    private serviceComm: ServiceComm
-  ) { }
+    private serviceComm: ServiceComm,
+    public dialog: MatDialog
+  ) {}
 
   ngOnInit() {
-    this.serviceComm.UpdatedComponentTitle('List of aircrafts');
+    this.serviceComm.UpdatedComponentTitle("List of aircrafts");
     this.getListOfAircrafts();
   }
 
   private getListOfAircrafts() {
     this.serviceApi.getListOfAircrafts().subscribe(data => {
       setTimeout(() => {
-        data.sort((a, b) => (b.name < a.name) ? 1 : -1);
+        data.sort((a, b) => (b.name < a.name ? 1 : -1));
         this.dataSourceTable = new MatTableDataSource<AircraftResp>(data);
         this.dataSourceTable.paginator = this.paginator;
         this.resultsLength = data.length;
@@ -39,7 +41,7 @@ export class ListOfAircraftsComponent implements OnInit {
     });
   }
 
-  public add() {
-    this.showAddForm = true;
+  openDialogToAdd() {
+    this.dialog.open(NewAircraftComponent);
   }
 }
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 7a24c77..4e48cbd 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
@@ -1,6 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button (click)="add()">Add a aircraft</button>
-  <app-new-drop-zone *ngIf="showAddForm === true"></app-new-drop-zone>
+  <button mat-button (click)="openDialogToAdd()" class="btn btn-primary">Add a drop zone</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="isfavorite">
diff --git a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
index bbde394..55975b6 100644
--- a/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
+++ b/Front/skydivelogs-app/src/app/list-of-dzs/list-of-dzs.component.ts
@@ -1,39 +1,41 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatTableDataSource } from "@angular/material/table";
+import { MatDialog } from "@angular/material/dialog";
 
-import { DropZoneResp } from '../../models/dropzone';
-import { DropzoneService } from '../../services/dropzone.service';
-import { ServiceComm } from '../../services/service-comm.service';
+import { DropZoneResp } from "../../models/dropzone";
+import { DropzoneService } from "../../services/dropzone.service";
+import { ServiceComm } from "../../services/service-comm.service";
+import { NewDropZoneComponent } from "../new-drop-zone/new-drop-zone.component";
 
 @Component({
-  selector: 'app-list-of-dzs',
-  templateUrl: './list-of-dzs.component.html',
-  styleUrls: ['./list-of-dzs.component.css']
+  selector: "app-list-of-dzs",
+  templateUrl: "./list-of-dzs.component.html",
+  styleUrls: ["./list-of-dzs.component.css"]
 })
 export class ListOfDzsComponent implements OnInit {
   public displayedColumns: Array<string> = [
-    'isfavorite',
-    'id',
-    'name',
-    'latitude',
-    'longitude',
-    'address',
-    'email',
-    'type'
+    "isfavorite",
+    "id",
+    "name",
+    "latitude",
+    "longitude",
+    "address",
+    "email",
+    "type"
   ];
   public dataSourceTable: MatTableDataSource<DropZoneResp>;
   public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  public showAddForm: boolean;
 
   constructor(
     private serviceApi: DropzoneService,
-    private serviceComm: ServiceComm
-  ) { }
+    private serviceComm: ServiceComm,
+    public dialog: MatDialog
+  ) {}
 
   ngOnInit() {
-    this.serviceComm.UpdatedComponentTitle('List of DZs');
+    this.serviceComm.UpdatedComponentTitle("List of DZs");
     this.getListOfDropZones();
   }
 
@@ -56,7 +58,7 @@ export class ListOfDzsComponent implements OnInit {
     dropzone.isFavorite = this.serviceApi.RemoveFavoriteDropZone(dropzone);
   }
 
-  public add() {
-    this.showAddForm = true;
+  openDialogToAdd() {
+    this.dialog.open(NewDropZoneComponent);
   }
 }
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 51535f2..24529d2 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
@@ -1,6 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button (click)="add()">Add a aircraft</button>
-  <app-new-gear *ngIf="showAddForm === true"></app-new-gear>
+  <button mat-button (click)="openDialogToAdd()" class="btn btn-primary">Add a gear</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">
diff --git a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts
index ccbe241..b02f545 100644
--- a/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts
+++ b/Front/skydivelogs-app/src/app/list-of-gears/list-of-gears.component.ts
@@ -1,36 +1,38 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatTableDataSource } from "@angular/material/table";
+import { MatDialog } from "@angular/material/dialog";
 
-import { GearService } from '../../services/gear.service';
-import { ServiceComm } from '../../services/service-comm.service';
-import { GearResp } from '../../models/gear';
-import { AddAction } from '../../models/add-action.enum';
+import { GearService } from "../../services/gear.service";
+import { ServiceComm } from "../../services/service-comm.service";
+import { GearResp } from "../../models/gear";
+import { AddAction } from "../../models/add-action.enum";
+import { NewGearComponent } from "../new-gear/new-gear.component";
 
 @Component({
-  selector: 'app-list-of-gears',
-  templateUrl: './list-of-gears.component.html',
-  styleUrls: ['./list-of-gears.component.css']
+  selector: "app-list-of-gears",
+  templateUrl: "./list-of-gears.component.html",
+  styleUrls: ["./list-of-gears.component.css"]
 })
 export class ListOfGearsComponent implements OnInit {
   public displayedColumns: Array<string> = [
-    'id',
-    'name',
-    'manufacturer',
-    'maxSize',
-    'aad',
-    'mainCanopy',
-    'reserveCanopy'
+    "id",
+    "name",
+    "manufacturer",
+    "maxSize",
+    "aad",
+    "mainCanopy",
+    "reserveCanopy"
   ];
   public dataSourceTable: MatTableDataSource<GearResp>;
   public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  public showAddForm: boolean;
 
   constructor(
     private serviceApi: GearService,
-    private serviceComm: ServiceComm
-  ) { }
+    private serviceComm: ServiceComm,
+    public dialog: MatDialog
+  ) {}
 
   ngOnInit() {
     this.serviceComm.refreshRequest.subscribe(action => {
@@ -38,7 +40,7 @@ export class ListOfGearsComponent implements OnInit {
         this.getListOfGears();
       }
     });
-    this.serviceComm.UpdatedComponentTitle('List of gears');
+    this.serviceComm.UpdatedComponentTitle("List of gears");
 
     this.getListOfGears();
   }
@@ -53,7 +55,7 @@ export class ListOfGearsComponent implements OnInit {
     });
   }
 
-  public add() {
-    this.showAddForm = true;
+  openDialogToAdd() {
+    this.dialog.open(NewGearComponent);
   }
 }
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 1f37d11..38b0c1e 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
@@ -1,6 +1,5 @@
 <div *ngIf="dataSourceTable != null else loading" class="table-container">
-  <button (click)="add()">Add a aircraft</button>
-  <app-new-jump-type *ngIf="showAddForm === true"></app-new-jump-type>
+  <button mat-button (click)="openDialogToAdd()" class="btn btn-primary">Add a jump type</button>
 
   <table mat-table [dataSource]="dataSourceTable">
     <ng-container matColumnDef="id">
diff --git a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts
index c3f9e65..10486b1 100644
--- a/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts
+++ b/Front/skydivelogs-app/src/app/list-of-jump-types/list-of-jump-types.component.ts
@@ -1,37 +1,39 @@
-import { Component, OnInit, ViewChild } from '@angular/core';
-import { MatPaginator } from '@angular/material/paginator';
-import { MatTableDataSource } from '@angular/material/table';
+import { Component, OnInit, ViewChild } from "@angular/core";
+import { MatPaginator } from "@angular/material/paginator";
+import { MatTableDataSource } from "@angular/material/table";
+import { MatDialog } from "@angular/material/dialog";
 
-import { JumpTypeResp } from '../../models/jumpType';
-import { JumpTypeService } from '../../services/jump-type.service';
-import { ServiceComm } from '../../services/service-comm.service';
+import { JumpTypeResp } from "../../models/jumpType";
+import { JumpTypeService } from "../../services/jump-type.service";
+import { ServiceComm } from "../../services/service-comm.service";
+import { NewJumpTypeComponent } from "../new-jump-type/new-jump-type.component";
 
 @Component({
-  selector: 'app-list-of-jump-types',
-  templateUrl: './list-of-jump-types.component.html',
-  styleUrls: ['./list-of-jump-types.component.css']
+  selector: "app-list-of-jump-types",
+  templateUrl: "./list-of-jump-types.component.html",
+  styleUrls: ["./list-of-jump-types.component.css"]
 })
 export class ListOfJumpTypesComponent implements OnInit {
-  public displayedColumns: Array<string> = ['id', 'name'];
+  public displayedColumns: Array<string> = ["id", "name"];
   public dataSourceTable: MatTableDataSource<JumpTypeResp>;
   public resultsLength = 0;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
-  public showAddForm: boolean;
 
   constructor(
     private serviceApi: JumpTypeService,
-    private serviceComm: ServiceComm
-  ) { }
+    private serviceComm: ServiceComm,
+    public dialog: MatDialog
+  ) {}
 
   ngOnInit() {
-    this.serviceComm.UpdatedComponentTitle('List of jump types');
+    this.serviceComm.UpdatedComponentTitle("List of jump types");
     this.getListOfJumpTypes();
   }
 
   getListOfJumpTypes() {
     this.serviceApi.getListOfJumpTypes().subscribe(data => {
       setTimeout(() => {
-        data.sort((a, b) => (b.name < a.name) ? 1 : -1);
+        data.sort((a, b) => (b.name < a.name ? 1 : -1));
         this.dataSourceTable = new MatTableDataSource<JumpTypeResp>(data);
         this.dataSourceTable.paginator = this.paginator;
         this.resultsLength = data.length;
@@ -39,7 +41,7 @@ export class ListOfJumpTypesComponent implements OnInit {
     });
   }
 
-  public add() {
-    this.showAddForm = true;
+  openDialogToAdd() {
+    this.dialog.open(NewJumpTypeComponent);
   }
 }