diff --git a/Front/skydivelogs-app/angular.json b/Front/skydivelogs-app/angular.json
index ce07c6a..9f89b46 100644
--- a/Front/skydivelogs-app/angular.json
+++ b/Front/skydivelogs-app/angular.json
@@ -76,7 +76,6 @@
             "tsConfig": "src/tsconfig.spec.json",
             "scripts": [],
             "styles": [
-              "./node_modules/@angular/material/prebuilt-themes/purple-green.css",
               "src/styles.css"
             ],
             "assets": [
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 cb0bc86..4fbdf68 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,53 +1,52 @@
 <form [formGroup]="createForm" (ngSubmit)="onCreateSubmit()">
-  <div class="form-group">
-    <label for="firstname">Firstname</label>
-    <input type="text" formControlName="firstname" class="form-control"
-      [ngClass]="{ 'is-invalid': submitted && formCtrls.firstname.errors }" />
-    <div *ngIf="submitted && formCtrls.firstname.errors" class="invalid-feedback">
-      <div *ngIf="formCtrls.firstname.errors.required">Firstname is required</div>
-      <div *ngIf="formCtrls.firstname.errors.minlength">Firstname must have min 3 characters</div>
-    </div>
-  </div>
-  <div class="form-group">
-    <label for="lastname">Lastname</label>
-    <input type="text" formControlName="lastname" class="form-control"
-      [ngClass]="{ 'is-invalid': submitted && formCtrls.lastname.errors }" />
-    <div *ngIf="submitted && formCtrls.lastname.errors" class="invalid-feedback">
-      <div *ngIf="formCtrls.lastname.errors.required">Lastname is required</div>
-      <div *ngIf="formCtrls.lastname.errors.minlength">Lastname must have min 3 characters</div>
-    </div>
-  </div>
-  <div class="form-group">
-    <label for="email">E-mail</label>
-    <input type="text" formControlName="email" class="form-control"
-      [ngClass]="{ 'is-invalid': submitted && formCtrls.email.errors }" />
-    <div *ngIf="submitted && formCtrls.email.errors" class="invalid-feedback">
-      <div *ngIf="formCtrls.email.errors.required">E-mail is required</div>
-      <div *ngIf="formCtrls.email.errors.email">It's not a e-mail</div>
-    </div>
-  </div>
+  <p>
+    <mat-form-field>
+      <mat-label>Firstname</mat-label>
+      <input matInput type="text" formControlName="firstname"
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.firstname.errors }" />
+      <mat-error *ngIf="formCtrls.firstname.hasError('required')">Firstname is required</mat-error>
+      <mat-error *ngIf="formCtrls.firstname.hasError('minlength')">Firstname must have min 3 characters</mat-error>
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>Lastname</mat-label>
+      <input matInput type="text" formControlName="lastname"
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.lastname.errors }" />
+      <mat-error *ngIf="formCtrls.lastname.hasError('required')">Lastname is required</mat-error>
+      <mat-error *ngIf="formCtrls.lastname.hasError('minlength')">Lastname must have min 3 characters</mat-error>
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>E-mail</mat-label>
+      <input matInput type="email" formControlName="email"
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.email.errors }" />
+      <mat-error *ngIf="formCtrls.email.hasError('required')">E-mail is required</mat-error>
+      <mat-error *ngIf="formCtrls.email.hasError('email')">It's not a e-mail</mat-error>
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>Username</mat-label>
+      <input matInput type="text" formControlName="username"
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" />
+      <mat-error *ngIf="formCtrls.username.hasError('required')">Username is required</mat-error>
+      <mat-error *ngIf="formCtrls.username.hasError('minlength')">Username must have min 3 characters</mat-error>
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>Password</mat-label>
+      <input matInput type="password" formControlName="password"
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" />
+      <mat-error *ngIf="formCtrls.password.hasError('required')">Password is required</mat-error>
+      <mat-error *ngIf="formCtrls.password.hasError('pattern')">The pattern of the password ([A-Za-z0-9_-]
+        {{ '{' }}8,15{{ '}' }})</mat-error>
+    </mat-form-field>
+  </p>
 
-  <div class="form-group">
-    <label for="username">Username</label>
-    <input type="text" formControlName="username" class="form-control"
-      [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" />
-    <div *ngIf="submitted && formCtrls.username.errors" class="invalid-feedback">
-      <div *ngIf="formCtrls.username.errors.required">Username is required</div>
-      <div *ngIf="formCtrls.username.errors.minlength">Username must have min 3 characters</div>
-    </div>
-  </div>
-  <div class="form-group">
-    <label for="password">Password</label>
-    <input type="password" formControlName="password" class="form-control"
-      [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" />
-    <div *ngIf="submitted && formCtrls.password.errors" class="invalid-feedback">
-      <div *ngIf="formCtrls.password.errors.required">Password is required</div>
-      <div *ngIf="formCtrls.password.errors.pattern">The pattern of the password ([A-Za-z0-9_-]
-        {{ '{' }}8,15{{ '}' }})</div>
-    </div>
-  </div>
-
-  <button [disabled]="loading" class="btn btn-primary">
+  <button [disabled]="loading" mat-button>
     <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
     Create user and login
   </button>
diff --git a/Front/skydivelogs-app/src/app/login-user/login-user.component.html b/Front/skydivelogs-app/src/app/login-user/login-user.component.html
index 4eba57c..77f12ec 100644
--- a/Front/skydivelogs-app/src/app/login-user/login-user.component.html
+++ b/Front/skydivelogs-app/src/app/login-user/login-user.component.html
@@ -1,26 +1,34 @@
 <form [formGroup]="loginForm" (ngSubmit)="onLoginSubmit()">
-  <div class="form-group">
-    <label for="username">Username</label>
-    <input type="text" formControlName="username" class="form-control"
-      [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }" />
-    <div *ngIf="submitted && formCtrls.username.errors" class="invalid-feedback">
-      <div *ngIf="formCtrls.username.errors.required">Username is required</div>
-      <div *ngIf="formCtrls.username.errors.minlength">Username must have min 3 characters</div>
-    </div>
-  </div>
-  <div class="form-group">
-    <label for="password">Password</label>
-    <input type="password" formControlName="password" class="form-control"
-      [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }" />
-    <div *ngIf="submitted && formCtrls.password.errors" class="invalid-feedback">
-      <div *ngIf="formCtrls.password.errors.required">Password is required</div>
-      <div *ngIf="formCtrls.password.errors.pattern">The pattern of the password ([A-Za-z0-9_-]
-        {{ '{' }}8,15{{ '}' }})</div>
-    </div>
-  </div>
+  <p>
+    <mat-form-field>
+      <mat-label>Username</mat-label>
+      <input matInput formControlName="username" [ngClass]="{ 'is-invalid': submitted && formCtrls.username.errors }">
+      <mat-error *ngIf="formCtrls.username.hasError('required')">
+        Username is required
+      </mat-error>
+      <mat-error *ngIf="formCtrls.username.hasError('minlength')">
+        Username must have min 3 characters
+      </mat-error>
+    </mat-form-field>
+  </p>
+  <p>
+    <mat-form-field>
+      <mat-label>Password</mat-label>
+      <input type="password" matInput formControlName="password"
+        [ngClass]="{ 'is-invalid': submitted && formCtrls.password.errors }">
+      <mat-error *ngIf="formCtrls.password.hasError('required')">
+        Password is required
+      </mat-error>
+      <mat-error *ngIf="formCtrls.password.hasError('pattern')">
+        The pattern of the password ([A-Za-z0-9_-] {{ '{' }}8,15{{ '}' }})
+      </mat-error>
+    </mat-form-field>
+  </p>
+
   <button [disabled]="loading" mat-button>
     <span *ngIf="loading" class="spinner-border spinner-border-sm mr-1"></span>
     Login
   </button>
+
   <div *ngIf="error" class="alert alert-danger mt-3 mb-0">{{error}}</div>
 </form>
diff --git a/Front/skydivelogs-app/src/app/login-user/login-user.component.ts b/Front/skydivelogs-app/src/app/login-user/login-user.component.ts
index cfa2f07..105fe20 100644
--- a/Front/skydivelogs-app/src/app/login-user/login-user.component.ts
+++ b/Front/skydivelogs-app/src/app/login-user/login-user.component.ts
@@ -41,7 +41,7 @@ export class LoginUserComponent implements OnInit {
           ]
         ]
       },
-      { updateOn: "submit" }
+      { updateOn: "blur" }
     );
 
     // get return url from route parameters or default to '/'
diff --git a/Front/skydivelogs-app/src/assets/css/custom-theme.scss b/Front/skydivelogs-app/src/assets/css/custom-theme.scss
index 463759f..5716cc6 100644
--- a/Front/skydivelogs-app/src/assets/css/custom-theme.scss
+++ b/Front/skydivelogs-app/src/assets/css/custom-theme.scss
@@ -1,10 +1,51 @@
-@import '~@angular/material/theming';
-
+@import "~@angular/material/theming";
 @include mat-core();
 
-$custom-theme-primary: mat-palette($mat-grey, 900);
-$custom-theme-accent:mat-palette($mat-pink, A200, A100, A400);
-$custom-theme-warn: mat-palette($mat-red);
-$custom-theme: mat-light-theme($custom-theme-primary, $custom-theme-accent, $custom-theme-warn);
+/* ======== Angular material custom themes ======== */
+$my-custom-primary: mat-palette($mat-deep-purple);
+$my-custom-accent: mat-palette($mat-pink, 100, 500, A100);
+$my-custom-warn: mat-palette($mat-lime);
 
-@include angular-material-theme($custom-theme);
+$my-custom-theme: mat-light-theme(
+  $my-custom-primary,
+  $my-custom-accent,
+  $my-custom-warn
+);
+
+@function mat-light-theme($primary, $accent, $warn: mat-palette($mat-red)) {
+  @return (
+    primary: $primary,
+    accent: $accent,
+    warn: $warn,
+    is-dark: false,
+    foreground: $mat-light-theme-foreground,
+    background: $mat-light-theme-background
+  );
+}
+
+@mixin angular-material-theme($theme) {
+  @include mat-core-theme($theme);
+  @include mat-autocomplete-theme($theme);
+  @include mat-button-theme($theme);
+  @include mat-button-toggle-theme($theme);
+  @include mat-card-theme($theme);
+  @include mat-checkbox-theme($theme);
+  @include mat-chips-theme($theme);
+  @include mat-datepicker-theme($theme);
+  @include mat-dialog-theme($theme);
+  @include mat-grid-list-theme($theme);
+  @include mat-icon-theme($theme);
+  @include mat-input-theme($theme);
+  @include mat-list-theme($theme);
+  @include mat-menu-theme($theme);
+  @include mat-progress-bar-theme($theme);
+  @include mat-progress-spinner-theme($theme);
+  @include mat-radio-theme($theme);
+  @include mat-select-theme($theme);
+  @include mat-sidenav-theme($theme);
+  @include mat-slide-toggle-theme($theme);
+  @include mat-slider-theme($theme);
+  @include mat-tabs-theme($theme);
+  @include mat-toolbar-theme($theme);
+  @include mat-tooltip-theme($theme);
+}