diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index 8d72890..b119ec5 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,6 +4,8 @@ import { HomeComponent } from './components/home/home.component';
 import { LoginComponent } from './components/login/login.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 
+import { ProfileService } from './services/profile/profile.service';
+
 const routes: Routes = [
 	{
 		path:"login",
@@ -11,8 +13,8 @@ const routes: Routes = [
 	},
 	{
 		path:"",
-		component:HomeComponent
-		//		children: [
+		component:HomeComponent,
+		children: [
 		//			{
 		//				path:"intro",
 		//				component:IntroductionComponent
@@ -33,9 +35,9 @@ const routes: Routes = [
 		//				path:"status",
 		//				component:DeviceComponent
 		//			}
-		//		],
-		//		canActivate: [ProfileService],
-		//		canActivateChild: [ProfileService]
+		],
+		canActivate: [ProfileService],
+		canActivateChild: [ProfileService]
 	},
 	{
 		path:"not-found",
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 71db51b..2b289af 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -38,11 +38,11 @@ import { WorkspaceComponent } from './components/home/workspace/workspace.compon
 @NgModule({
 	declarations: [
 		AppComponent,
-  LoginComponent,
-  NotFoundComponent,
-  HomeComponent,
-  NavbarComponent,
-  WorkspaceComponent
+		LoginComponent,
+		NotFoundComponent,
+		HomeComponent,
+		NavbarComponent,
+		WorkspaceComponent
 	],
 	imports: [
 		BrowserModule,
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index 5f2c53f..8f297fe 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -1 +1 @@
-<p>home works!</p>
+<app-workspace></app-workspace>
diff --git a/src/app/components/login/login.component.css b/src/app/components/login/login.component.css
index e69de29..5766621 100644
--- a/src/app/components/login/login.component.css
+++ b/src/app/components/login/login.component.css
@@ -0,0 +1,40 @@
+.container {
+	display: flex;
+	justify-content: center;
+	align-items: center;
+	height: 100%;
+	background-color: #b8b8b8;
+}
+
+mat-card {
+	width: 90%;
+	max-width: 300px;
+}
+
+mat-card-header {
+	display: block;
+	text-align: center;
+}
+
+mat-form-field {
+	width: 100%;
+}
+
+button {
+	display: block;
+	width: 100%;
+}
+
+.myError {
+	display: block;
+	width: 100%;
+	font-size: smaller;
+}
+
+.cred {
+	display: block;
+	width: 100%;
+	text-align: center;
+	font-size: smaller;
+	margin-top: 1rem;
+}
diff --git a/src/app/components/login/login.component.html b/src/app/components/login/login.component.html
index 147cfc4..8211358 100644
--- a/src/app/components/login/login.component.html
+++ b/src/app/components/login/login.component.html
@@ -1 +1,26 @@
-<p>login works!</p>
+<div class="container">
+	<mat-card class="mat-elevation-z8">
+		<mat-card-header>
+			<h2>Kine InterCOM</h2>
+		</mat-card-header>
+		<mat-card-content>
+		<!-- Login Form -->
+			<form [formGroup]="loginFG">
+				<mat-form-field>
+					<mat-label>Identifiant</mat-label>
+					<input matInput type="text" formControlName="login" class="form-control fadeIn second" name="login" placeholder="Identifiant" [ngClass]="{'is-invalid':submitted && loginFG.controls['login'].errors}">
+					<mat-error class="myError" *ngIf="loginFG.controls['login'].hasError('required')">L'identifiant est requis !</mat-error>
+				</mat-form-field>
+				<mat-form-field>
+					<mat-label>Mot de passe</mat-label>
+					<input matInput type="password" formControlName="password" class="form-control fadeIn third" name="password" placeholder="Mot de passe" [ngClass]="{'is-invalid':submitted && loginFG.controls['password'].errors}">
+					<mat-error class="myError" *ngIf="loginFG.controls['password'].hasError('required')">Le mot de passe est requis !</mat-error>
+				</mat-form-field>
+				<button mat-raised-button color="primary" (click)="onLogin()">Connexion</button>
+				<mat-error class="cred" *ngIf="wrongCredentials">Mauvais couple Identifiant/Mot de passe, Recommencez ....</mat-error>
+				<mat-error class="cred" *ngIf="userConnected">Un autre utilisateur ({{usernameConn}}) est déjà connecté, veuillez recommencer ultérieurement ...</mat-error>
+				<mat-error class="cred" *ngIf="errorProcess">Erreur de connexion avec le backend ...</mat-error>
+			</form>
+		</mat-card-content>
+	</mat-card>
+</div>
diff --git a/src/app/components/login/login.component.ts b/src/app/components/login/login.component.ts
index 4f58421..ff69822 100644
--- a/src/app/components/login/login.component.ts
+++ b/src/app/components/login/login.component.ts
@@ -1,15 +1,55 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators } from '@angular/forms';
+import { Router } from '@angular/router';
+import { BackendService } from '../../services/backend/backend.service';
 
 @Component({
-  selector: 'app-login',
-  templateUrl: './login.component.html',
-  styleUrls: ['./login.component.css']
+	selector: 'app-login',
+	templateUrl: './login.component.html',
+	styleUrls: ['./login.component.css']
 })
 export class LoginComponent implements OnInit {
+	loginFG:FormGroup;
+	submitted:boolean=false;
+	wrongCredentials:boolean=false;
+	userConnected:boolean=false;
+	errorProcess:boolean=false;
+	usernameConn:string='';
 
-  constructor() { }
+	constructor(private fb:FormBuilder,
+				private bs:BackendService,
+				private router:Router) { }
 
-  ngOnInit(): void {
-  }
+	ngOnInit(): void {
+		this.loginFG=this.fb.group({
+			login:["", Validators.required],
+			password:["", Validators.required],
+		});
 
+	}
+
+	onLogin(): void {
+		this.submitted=true;
+		if(this.loginFG.invalid) {
+			return;
+		}
+
+		this.bs.isConnected().subscribe(
+			(data) => {
+				if(data['message'] === 'oui') {
+					this.userConnected = true;
+					this.usernameConn = data['uid'];
+				} else {
+					this.bs.loginUser(this.loginFG.value).subscribe(
+						data => {
+							this.router.navigateByUrl("/intro");
+						}, err => {
+							this.wrongCredentials = true;
+						});
+				}
+			}, err => {
+				this.errorProcess = true;
+			}
+		);
+	}
 }
diff --git a/src/app/services/backend/backend.service.ts b/src/app/services/backend/backend.service.ts
index d4097d3..a5de5a7 100644
--- a/src/app/services/backend/backend.service.ts
+++ b/src/app/services/backend/backend.service.ts
@@ -1,9 +1,58 @@
 import { Injectable } from '@angular/core';
+import { HttpClient, HttpHeaders, HttpParams } from '@angular/common/http';
+import { Observable } from 'rxjs';
+import { environment } from '../../../environments/environment';
+import { Utilisateur } from '../../models/utilisateur.model';
 
 @Injectable({
-  providedIn: 'root'
+	providedIn: 'root'
 })
 export class BackendService {
+	constructor(private http:HttpClient) {}
 
-  constructor() { }
+	loginUser(val:any):Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+				'Authorization' : 'Basic ' + btoa(val['login'] + ':' + val['password']),
+			}),
+			withCredentials: true
+		};
+
+		return this.http.post<any>(host+"/api/login", {}, options);
+	}
+
+	isConnected():Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<any>(host+"/api/userConnected", options);
+	}
+
+	logoutUser():Observable<any> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.post<any>(host+"/api/logout", {}, options);
+	}
+
+	getCurrentUser():Observable<Utilisateur> {
+		let host=environment.host;
+		const options = {
+			headers: new HttpHeaders({
+				'Content-Type' : 'application/json',
+			}),
+			withCredentials: true
+		};
+		return this.http.get<Utilisateur>(host+"/api/current", options);
+	}
 }
diff --git a/src/app/services/profile/profile.service.ts b/src/app/services/profile/profile.service.ts
index f52db44..0fdd6bb 100644
--- a/src/app/services/profile/profile.service.ts
+++ b/src/app/services/profile/profile.service.ts
@@ -2,12 +2,12 @@ import { Injectable } from '@angular/core';
 import { CanActivate, CanActivateChild, ActivatedRouteSnapshot, RouterStateSnapshot, Router } from '@angular/router';
 import { Observable } from 'rxjs';
 import { BackendService } from '../backend/backend.service';
-import { Utilisateur } from '../../model/utilisateur.model';
+import { Utilisateur } from '../../models/utilisateur.model';
 
 @Injectable({
 	providedIn: 'root'
 })
-export class ProfileService {
+export class ProfileService implements CanActivate, CanActivateChild {
 	profile:Utilisateur;
 
 	constructor( private bs:BackendService,
@@ -38,6 +38,7 @@ export class ProfileService {
 			})
 		});
 	}
+
 	canActivateChild(route: ActivatedRouteSnapshot, state: RouterStateSnapshot): Observable<boolean> {
 		return new Observable((observer) => {
 			this.getProfile().subscribe(profile => {
diff --git a/src/environments/environment.ts b/src/environments/environment.ts
index f56ff47..760bd5b 100644
--- a/src/environments/environment.ts
+++ b/src/environments/environment.ts
@@ -3,7 +3,8 @@
 // The list of file replacements can be found in `angular.json`.
 
 export const environment = {
-  production: false
+	production: false,
+	host: "http://127.0.0.1:6000"
 };
 
 /*