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 168d982..e29abbf 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,21 +1,21 @@
-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 { 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 { NewAircraftComponent } from "../new-aircraft/new-aircraft.component";
-import { AddAction } from "../../models/add-action.enum";
+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';
+import { AddAction } from '../../models/add-action.enum';
 
 @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;
@@ -24,7 +24,7 @@ export class ListOfAircraftsComponent implements OnInit {
     private serviceApi: AircraftService,
     private serviceComm: ServiceComm,
     public dialog: MatDialog
-  ) {}
+  ) { }
 
   ngOnInit() {
     this.serviceComm.refreshRequest.subscribe(action => {
@@ -33,7 +33,7 @@ export class ListOfAircraftsComponent implements OnInit {
         this.getListOfAircrafts();
       }
     });
-    this.serviceComm.UpdatedComponentTitle("List of aircrafts");
+    this.serviceComm.UpdatedComponentTitle('List of aircrafts');
     this.getListOfAircrafts();
   }
 
diff --git a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts
index bae6876..63164e9 100644
--- a/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts
+++ b/Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts
@@ -1,31 +1,31 @@
-import { Component, OnInit, ViewChild } from "@angular/core";
-import { FormGroup, FormControl, Validators } from "@angular/forms";
-import { MatTableDataSource } from "@angular/material/table";
-import { MatPaginator } from "@angular/material/paginator";
+import { Component, OnInit, ViewChild } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { MatTableDataSource } from '@angular/material/table';
+import { MatPaginator } from '@angular/material/paginator';
 
-import { ImageService } from "../../services/image.service";
-import { ServiceComm } from "../../services/service-comm.service";
-import { ImageResp } from "../../models/Image";
-import { AddAction } from "../../models/add-action.enum";
+import { ImageService } from '../../services/image.service';
+import { ServiceComm } from '../../services/service-comm.service';
+import { ImageResp } from '../../models/Image';
+import { AddAction } from '../../models/add-action.enum';
 
 @Component({
-  selector: "app-list-of-images",
-  templateUrl: "./list-of-images.component.html",
-  styleUrls: ["./list-of-images.component.css"],
+  selector: 'app-list-of-images',
+  templateUrl: './list-of-images.component.html',
+  styleUrls: ['./list-of-images.component.css'],
 })
 export class ListOfImagesComponent implements OnInit {
-  public displayedColumns: Array<string> = ["comment", "data"];
+  public displayedColumns: Array<string> = ['comment', 'data'];
   public imgForm: FormGroup;
   public imageError: string;
+  private selectedFile: string;
   public dataSourceTable: MatTableDataSource<ImageResp>;
   public resultsLength = 0;
-  private selectedFile: string;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
     private serviceApi: ImageService,
     private serviceComm: ServiceComm
-  ) {}
+  ) { }
 
   ngOnInit(): void {
     this.serviceComm.refreshRequest.subscribe((action) => {
@@ -36,8 +36,8 @@ export class ListOfImagesComponent implements OnInit {
     this.getListOfImages();
 
     this.imgForm = new FormGroup({
-      comment: new FormControl("", Validators.required),
-      image: new FormControl("", Validators.required),
+      comment: new FormControl('', Validators.required),
+      image: new FormControl('', Validators.required),
     });
   }
 
@@ -52,16 +52,16 @@ export class ListOfImagesComponent implements OnInit {
   }
 
   public onFileChanged(fileInput: any) {
-    var file = fileInput.dataTransfer
+    const file = fileInput.dataTransfer
       ? fileInput.dataTransfer.files[0]
       : fileInput.target.files[0];
-    const allowed_types = ["image/png", "image/jpeg"];
+    const allowed_types = ['image/png', 'image/jpeg'];
     const max_size = 20971520;
 
     if (!allowed_types.includes(file.type)) {
-      this.imageError = "Only Images are allowed ( JPG | PNG )";
+      this.imageError = 'Only Images are allowed ( JPG | PNG )';
     } else if (file.size > max_size) {
-      this.imageError = "Maximum size allowed is " + max_size / 1000 + "Mb";
+      this.imageError = 'Maximum size allowed is ' + max_size / 1000 + 'Mb';
     } else {
       const reader = new FileReader();
       reader.onload = this.checkAndExtractDataToBase64.bind(this);
@@ -76,16 +76,16 @@ export class ListOfImagesComponent implements OnInit {
     const image = new Image();
     image.src = e.target.result;
     image.onload = (rs) => {
-      const img_height = rs.currentTarget["height"];
-      const img_width = rs.currentTarget["width"];
+      const img_height = rs.currentTarget['height'];
+      const img_width = rs.currentTarget['width'];
 
       if (img_height > max_height && img_width > max_width) {
         this.imageError =
-          "Maximum dimentions allowed " + max_height + "*" + max_width + "px";
+          'Maximum dimentions allowed ' + max_height + '*' + max_width + 'px';
       } else {
         const imgBase64Path = e.target.result;
         this.selectedFile = imgBase64Path;
-        this.imageError = "OK";
+        this.imageError = 'OK';
       }
     };
   }
diff --git a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html
index d27c2a0..3db76cd 100644
--- a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html
+++ b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.html
@@ -6,6 +6,10 @@
         <input matInput type="text" formControlName="aircraftName">
       </mat-form-field>
     </p>
+    <p>
+      <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" formControlName="image"
+        (change)="onFileChanged($event)" />
+    </p>
 
     <button type="submit" mat-raised-button color="accent">Add</button>
   </form>
diff --git a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts
index e6b58be..5220310 100644
--- a/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts
+++ b/Front/skydivelogs-app/src/app/new-aircraft/new-aircraft.component.ts
@@ -1,16 +1,18 @@
-import { Component, OnInit } from "@angular/core";
-import { FormControl, FormGroup, Validators } from "@angular/forms";
-import { AircraftService } from "../../services/aircraft.service";
-import { ServiceComm } from "../../services/service-comm.service";
-import { AddAction } from "../../models/add-action.enum";
+import { Component, OnInit } from '@angular/core';
+import { FormControl, FormGroup, Validators } from '@angular/forms';
+import { AircraftService } from '../../services/aircraft.service';
+import { ServiceComm } from '../../services/service-comm.service';
+import { AddAction } from '../../models/add-action.enum';
 
 @Component({
-  selector: "app-new-aircraft",
-  templateUrl: "./new-aircraft.component.html",
-  styleUrls: ["./new-aircraft.component.css"]
+  selector: 'app-new-aircraft',
+  templateUrl: './new-aircraft.component.html',
+  styleUrls: ['./new-aircraft.component.css']
 })
 export class NewAircraftComponent implements OnInit {
   public addForm: FormGroup;
+  public imageError: string;
+  private selectedFile: string;
 
   constructor(
     private serviceComm: ServiceComm,
@@ -18,16 +20,59 @@ export class NewAircraftComponent implements OnInit {
   ) {
     this.addForm = new FormGroup(
       {
-        aircraftName: new FormControl("", Validators.required)
+        aircraftName: new FormControl('', Validators.required)
       },
-      { updateOn: "blur" }
+      { updateOn: 'blur' }
     );
   }
 
-  ngOnInit() {}
+  ngOnInit() { }
 
   onSubmit(formData) {
-    this.serviceApi.AddAircraft(formData.aircraftName);
+    if (formData.invalid) {
+      return;
+    }
+
+    this.serviceApi.AddAircraft(formData.aircraftName, this.selectedFile);
     this.serviceComm.RefreshData(AddAction.Aircraft);
   }
+
+  public onFileChanged(fileInput: any) {
+    const file = fileInput.dataTransfer
+      ? fileInput.dataTransfer.files[0]
+      : fileInput.target.files[0];
+    const allowed_types = ['image/png', 'image/jpeg'];
+    const max_size = 20971520;
+
+    if (!allowed_types.includes(file.type)) {
+      this.imageError = 'Only Images are allowed ( JPG | PNG )';
+    } else if (file.size > max_size) {
+      this.imageError = 'Maximum size allowed is ' + max_size / 1000 + 'Mb';
+    } else {
+      const reader = new FileReader();
+      reader.onload = this.checkAndExtractDataToBase64.bind(this);
+      reader.readAsDataURL(fileInput.target.files[0]);
+    }
+  }
+
+  private checkAndExtractDataToBase64(e: any) {
+    const max_height = 15200;
+    const max_width = 25600;
+
+    const image = new Image();
+    image.src = e.target.result;
+    image.onload = (rs) => {
+      const img_height = rs.currentTarget['height'];
+      const img_width = rs.currentTarget['width'];
+
+      if (img_height > max_height && img_width > max_width) {
+        this.imageError =
+          'Maximum dimentions allowed ' + max_height + '*' + max_width + 'px';
+      } else {
+        const imgBase64Path = e.target.result;
+        this.selectedFile = imgBase64Path;
+        this.imageError = 'OK';
+      }
+    };
+  }
 }
diff --git a/Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts b/Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts
index c1488e5..dfdbca2 100644
--- a/Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts
+++ b/Front/skydivelogs-app/src/app/user-profile/user-profile.component.ts
@@ -1,20 +1,20 @@
-import { Component, OnInit } from "@angular/core";
-import { FormGroup, FormControl, Validators } from "@angular/forms";
-import { AuthenticationService } from "../../services/authentication.service";
-import { User } from "../../models/user";
+import { Component, OnInit } from '@angular/core';
+import { FormGroup, FormControl, Validators } from '@angular/forms';
+import { AuthenticationService } from '../../services/authentication.service';
+import { User } from '../../models/user';
 
 @Component({
-  selector: "app-user-profile",
-  templateUrl: "./user-profile.component.html",
-  styleUrls: ["./user-profile.component.css"],
+  selector: 'app-user-profile',
+  templateUrl: './user-profile.component.html',
+  styleUrls: ['./user-profile.component.css'],
 })
 export class UserProfileComponent implements OnInit {
   public userForm: FormGroup;
 
-  constructor(private authenticationService: AuthenticationService) {}
+  constructor(private authenticationService: AuthenticationService) { }
 
   ngOnInit(): void {
-    let currentUser = this.authenticationService.currentUserValue;
+    const currentUser = this.authenticationService.currentUserValue;
 
     this.userForm = new FormGroup(
       {
@@ -32,15 +32,15 @@ export class UserProfileComponent implements OnInit {
           Validators.email,
         ]),
         currentPassword: new FormControl(
-          "",
-          Validators.pattern("^[A-Za-z0-9_-]{8,15}$")
+          '',
+          Validators.pattern('^[A-Za-z0-9_-]{8,15}$')
         ),
         newPassword: new FormControl(
-          "",
-          Validators.pattern("^[A-Za-z0-9_-]{8,15}$")
+          '',
+          Validators.pattern('^[A-Za-z0-9_-]{8,15}$')
         ),
       },
-      { updateOn: "blur" }
+      { updateOn: 'blur' }
     );
   }
 
@@ -49,7 +49,7 @@ export class UserProfileComponent implements OnInit {
       return;
     }
 
-    let updatedUser = new User();
+    const updatedUser = new User();
     updatedUser.login = formData.username;
     updatedUser.password = formData.password;
     updatedUser.firstName = formData.firstname;
diff --git a/Front/skydivelogs-app/src/models/aircraft.ts b/Front/skydivelogs-app/src/models/aircraft.ts
index 2a5322f..b04eddc 100644
--- a/Front/skydivelogs-app/src/models/aircraft.ts
+++ b/Front/skydivelogs-app/src/models/aircraft.ts
@@ -5,6 +5,7 @@ export class AircraftReq {
 
   public id: number;
   public name: string;
+  public imageData: string;
 }
 
 export class AircraftResp {
@@ -14,4 +15,5 @@ export class AircraftResp {
 
   public id: number;
   public name: string;
+  public imageData: string;
 }
diff --git a/Front/skydivelogs-app/src/services/aircraft.service.ts b/Front/skydivelogs-app/src/services/aircraft.service.ts
index 41a85c9..56e9d9c 100644
--- a/Front/skydivelogs-app/src/services/aircraft.service.ts
+++ b/Front/skydivelogs-app/src/services/aircraft.service.ts
@@ -1,10 +1,10 @@
-import { Injectable } from "@angular/core";
-import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs";
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
 
-import { AircraftResp, AircraftReq } from "../models/aircraft";
+import { AircraftResp, AircraftReq } from '../models/aircraft';
 
-import { BaseService } from "./base.service";
+import { BaseService } from './base.service';
 
 @Injectable()
 export class AircraftService extends BaseService {
@@ -18,10 +18,11 @@ export class AircraftService extends BaseService {
     });
   }
 
-  public AddAircraft(aircraftName: string) {
+  public AddAircraft(aircraftName: string, dataImg: string) {
     const bodyNewAircraft: AircraftReq = {
       id: 0,
-      name: aircraftName
+      name: aircraftName,
+      imageData: dataImg
     };
 
     this.http
diff --git a/Front/skydivelogs-app/src/services/image.service.ts b/Front/skydivelogs-app/src/services/image.service.ts
index 360bb56..a16b43f 100644
--- a/Front/skydivelogs-app/src/services/image.service.ts
+++ b/Front/skydivelogs-app/src/services/image.service.ts
@@ -1,10 +1,10 @@
-import { Injectable } from "@angular/core";
-import { HttpClient } from "@angular/common/http";
-import { Observable } from "rxjs";
+import { Injectable } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { Observable } from 'rxjs';
 
-import { ImageResp, ImageReq } from "../models/Image";
+import { ImageResp, ImageReq } from '../models/Image';
 
-import { BaseService } from "./base.service";
+import { BaseService } from './base.service';
 
 @Injectable()
 export class ImageService extends BaseService {