diff --git a/Front/skydivelogs-app/src/app/app.module.ts b/Front/skydivelogs-app/src/app/app.module.ts
index 9708cf3..cd9160a 100644
--- a/Front/skydivelogs-app/src/app/app.module.ts
+++ b/Front/skydivelogs-app/src/app/app.module.ts
@@ -49,6 +49,7 @@ 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 { MatCardModule } from "@angular/material/card";
 
 import { CachingInterceptor } from "../interceptor/caching.interceptor";
 //import { BasicAuthInterceptor } from '../interceptor/basic-auth.interceptor';
@@ -61,42 +62,42 @@ const appRoutes: Routes = [
   {
     path: "summary",
     component: SummaryComponent,
-    canActivate: [AuthGuardService]
+    canActivate: [AuthGuardService],
   },
   {
     path: "jumps",
     component: ListOfJumpsComponent,
-    canActivate: [AuthGuardService]
+    canActivate: [AuthGuardService],
   },
   {
     path: "dzs",
     component: ListOfDzsComponent,
-    canActivate: [AuthGuardService]
+    canActivate: [AuthGuardService],
   },
   {
     path: "newjump",
     component: NewJumpComponent,
-    canActivate: [AuthGuardService]
+    canActivate: [AuthGuardService],
   },
   {
     path: "aircrafts",
     component: ListOfAircraftsComponent,
-    canActivate: [AuthGuardService]
+    canActivate: [AuthGuardService],
   },
   {
     path: "jumpTypes",
     component: ListOfJumpTypesComponent,
-    canActivate: [AuthGuardService]
+    canActivate: [AuthGuardService],
   },
   {
     path: "gears",
     component: ListOfGearsComponent,
-    canActivate: [AuthGuardService]
+    canActivate: [AuthGuardService],
   },
 
   { path: "login", component: LoginComponent },
 
-  { path: "**", redirectTo: "" }
+  { path: "**", redirectTo: "" },
 ];
 
 @NgModule({
@@ -116,7 +117,7 @@ const appRoutes: Routes = [
     DefaultComponent,
     LoginComponent,
     CreateUserComponent,
-    LoginUserComponent
+    LoginUserComponent,
   ],
   imports: [
     RouterModule.forRoot(
@@ -141,7 +142,8 @@ const appRoutes: Routes = [
     MatAutocompleteModule,
     MatProgressSpinnerModule,
     MatTabsModule,
-    MatDialogModule
+    MatDialogModule,
+    MatCardModule,
   ],
   exports: [HttpClientModule],
   providers: [
@@ -156,8 +158,8 @@ const appRoutes: Routes = [
     RequestCache,
     // { provide: HTTP_INTERCEPTORS, useClass: CachingInterceptor, multi: true }
     { provide: HTTP_INTERCEPTORS, useClass: JwtAuthInterceptor, multi: true },
-    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true }
+    { provide: HTTP_INTERCEPTORS, useClass: ErrorInterceptor, multi: true },
   ],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
 })
 export class AppModule {}
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 78ce970..c91aee9 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,4 +1,4 @@
-<form [formGroup]="createForm" (ngSubmit)="onCreateSubmit()" autocomplete="off">
+<form [formGroup]="createForm" (ngSubmit)="onCreateSubmit()" autocomplete="off" style="padding: 10px;">
   <p>
     <mat-form-field>
       <mat-label>Firstname</mat-label>
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 eee2f05..143f0c3 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,4 +1,4 @@
-<form [formGroup]="loginForm" (ngSubmit)="onLoginSubmit()" autocomplete="off">
+<form [formGroup]="loginForm" (ngSubmit)="onLoginSubmit()" autocomplete="off" style="padding: 10px;">
   <p>
     <mat-form-field>
       <mat-label>Username</mat-label>
diff --git a/Front/skydivelogs-app/src/app/login/login.component.html b/Front/skydivelogs-app/src/app/login/login.component.html
index 18b44d6..70ec34c 100644
--- a/Front/skydivelogs-app/src/app/login/login.component.html
+++ b/Front/skydivelogs-app/src/app/login/login.component.html
@@ -1,4 +1,4 @@
-<div class="col-md-4 offset-md-4 mt-5">
+<!-- <div class="col-md-4 offset-md-4 mt-5">
   <div class="card">
     <h4 class="card-header">Login to the Skydive log</h4>
     <div class="card-body">
@@ -14,4 +14,22 @@
 
     </div>
   </div>
-</div>
+</div> -->
+
+
+<mat-card style="max-width: 500px;">
+  <mat-card-header>
+    <mat-card-title>Login to the Skydive log</mat-card-title>
+  </mat-card-header>
+
+  <mat-card-content>
+    <mat-tab-group mat-align-tabs="center" animationDuration="0ms">
+      <mat-tab label="Login with a user">
+        <app-login-user></app-login-user>
+      </mat-tab>
+      <mat-tab label="Create and login a user">
+        <app-create-user></app-create-user>
+      </mat-tab>
+    </mat-tab-group>
+  </mat-card-content>
+</mat-card>