diff --git a/src/app/app.component.css b/src/app/app.component.css
index 4592116..067be35 100644
--- a/src/app/app.component.css
+++ b/src/app/app.component.css
@@ -22,7 +22,6 @@ p-toolbar {
     border:none;
 }
 
-
 p-toolbar .ui-button {
     background-color: transparent ;
     opacity: 1;
@@ -30,3 +29,8 @@ p-toolbar .ui-button {
     border: none;
 }
 
+p-dialog div > * {
+    margin: auto !important;
+}
+
+
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 69990fe..d58495d 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -9,18 +9,15 @@
         <button pButton type="button" label="ABOUT"></button>
         <button pButton type="button" label="TEAM" ></button>
         <button pButton type="button" label="CONTACT" ></button>
-        
         <button pButton type="button" label="SIGN UP" icon="pi pi-pencil" iconPos="right" (click)="SignUp()"></button>
-        <button pButton type="button" label="LOG IN" icon="pi pi-sign-in" iconPos="right" (click)="DisplayModalLogin = true"></button>
-        
+        <button *ngIf="!Connected" pButton type="button" label="LOG IN" icon="pi pi-sign-in" iconPos="right" (click)="DisplayLoginModal = true"></button>
         <p-splitButton *ngIf="Connected" class="btnDeMerde"  type="button" label="Nom du gars"></p-splitButton>
-        
     </div>
 
     
 </p-toolbar>
 
-<p-dialog [(visible)]="DisplayModalLogin" [style]="">
+<p-dialog id="modalLogIn" [modal]=true [(visible)]="DisplayLoginModal">
     <p-header>
         Log In
     </p-header>
@@ -38,6 +35,91 @@
             <button pButton type="button" label="Identify" (click)="LogIn()"></button>
     </p-footer>
 </p-dialog>
+
+<p-dialog [style]="{'width': '450px'}" [modal]=true id="modalSignIn"[(visible)]="DisplaySignInModal">
+    <p-header>
+        Sign In
+    </p-header>
+
+    <div class="ui-inputgroup">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
+            <input type="text" pInputText placeholder="Last name">   
+        </div>
+    </div>
+    <div class="ui-inputgroup">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fa fa-user"></i></span>
+            <input type="text" pInputText placeholder="First name">    
+        </div>     
+    </div>
+    <div class="ui-inputgroup" *ngIf="Connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fas fa-gift"></i></span>
+            <input type="date" pInputText placeholder="Birthday"> 
+        </div>
+             
+    </div>
+    <div class="ui-inputgroup">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fas fa-at"></i></span>
+            <input type="email" pInputText placeholder="E-mail">         
+        </div>
+    </div>
+   
+    <div class="ui-inputgroup" *ngIf="Connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
+            <input type="text" pInputText placeholder="Address">    
+        </div>
+    </div>
+    <div class="ui-inputgroup" *ngIf="Connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
+            <input type="text" pInputText placeholder="City">    
+        </div>
+    </div>
+    <div class="ui-inputgroup" *ngIf="Connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
+            <input type="text" pInputText placeholder="State">    
+        </div>
+    </div>
+    <div class="ui-inputgroup" *ngIf="Connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fa fa-home"></i></span>
+            <input type="text" pInputText placeholder="Postcode">    
+        </div>
+    </div>
+    <div class="ui-inputgroup" *ngIf="Connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fas fa-globe-europe"></i></span>
+            <input type="text" pInputText placeholder="Country">    
+        </div>
+    </div>
+    <div class="ui-inputgroup" *ngIf="Connected">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fas fa-globe-europe"></i></span>
+            <input type="text" pInputText placeholder="Timezone">    
+        </div>
+    </div>
+    <div class="ui-inputgroup">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fas fa-key"></i></span>
+            <input type="password" pInputText placeholder="Password">    
+        </div>
+    </div>
+    <div class="ui-inputgroup">
+        <div>
+            <span class="ui-inputgroup-addon"><i class="fas fa-key"></i></span>
+            <input type="password" pInputText placeholder="Confirm password">    
+        </div>
+    </div>
+
+    <p-footer>
+            <button pButton type="button" label="Identify"></button>
+    </p-footer>
+</p-dialog>
     
    
     
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
index 7d1286e..37050b0 100644
--- a/src/app/app.component.ts
+++ b/src/app/app.component.ts
@@ -13,11 +13,17 @@ export class AppComponent implements OnInit{
 
   items : MenuItem[];
 
-  public Connected : false;
-  public DisplayModalLogin: boolean = false;
+  public Connected : boolean = false;
+  public DisplayLoginModal: boolean = false;
+  public DisplaySignInModal: boolean = false;
+  public DisplayPersonalField: boolean = false;
+
+  // Login
   public Username: string = null;
   public Password: string = null;
 
+  public birthday: Date;
+
   constructor(
     private _appService: AppService
   ){}
@@ -34,10 +40,18 @@ export class AppComponent implements OnInit{
     this._appService.GetToken(this.Username, this.Password)
     .subscribe(res => {
       console.log(res.Token);
+      this.Connected = true;
+      this.DisplayLoginModal = false;
+      this.Username = null;
+      this.Password = null;
     }, () => {
       console.log('ERROR');
     });
 
-    // change route -> /login
+    // change route -> /config view
+  }
+  public SignUp()
+  {
+    this.DisplaySignInModal = true;
   }
 }
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index f510e22..909332a 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -20,6 +20,9 @@ import { InputTextModule } from 'primeng/inputtext';
 import { ApiConfiguration } from './api/api-configuration';
 import { AppService } from './app.service';
 import { FormsModule } from '@angular/forms';
+import { CalendarModule } from 'primeng/calendar';
+
+
 
 
 export function initApiConfiguration(config: ApiConfiguration): Function {
@@ -57,7 +60,8 @@ export const INIT_API_CONFIGURATION: Provider = {
     DialogModule,
     InputTextModule,
     HttpClientModule,
-    FormsModule
+    FormsModule,
+    CalendarModule
   ],
   providers: [
     INIT_API_CONFIGURATION,