diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index c42715f..45783a7 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -4,6 +4,9 @@ import { HomeComponent } from './components/home/home.component';
 import { LoginComponent } from './components/login/login.component';
 import { NotFoundComponent } from './components/not-found/not-found.component';
 import { AccountComponent } from './components/home/workspace/account/account.component';
+import { ParametresComponent } from './components/home/workspace/parametres/parametres.component';
+import { InfosComponent } from './components/home/workspace/infos/infos.component';
+import { HoursComponent } from './components/home/workspace/hours/hours.component';
 
 import { ProfileService } from './services/profile/profile.service';
 
@@ -19,8 +22,19 @@ const routes: Routes = [
 			{
 				path:"account",
 				component:AccountComponent
+			},
+			{
+				path:"parameters",
+				component:ParametresComponent
+			},
+			{
+				path:"infos",
+				component:InfosComponent
+			},
+			{
+				path:"hours",
+				component:HoursComponent
 			}
-			
 		],
 		canActivate: [ProfileService]
 	},
diff --git a/src/app/components/home/home.component.html b/src/app/components/home/home.component.html
index 75805e2..87e4f19 100644
--- a/src/app/components/home/home.component.html
+++ b/src/app/components/home/home.component.html
@@ -22,7 +22,7 @@
 			<!--<a (click)="sidenav.toggle()" href="" mat-list-item>Fermer</a>
 			<mat-divider></mat-divider>-->
 			<div fxLayout="column" fxLayoutAlign="center start">
-			<button mat-button routerLink="/compte" class="menu-button">
+			<button mat-button routerLink="/account" class="menu-button">
 				<mat-icon>account_circle</mat-icon>
 				<span>  Compte</span>
 			</button>
diff --git a/src/app/components/home/workspace/account/account.component.css b/src/app/components/home/workspace/account/account.component.css
index e69de29..56d6991 100644
--- a/src/app/components/home/workspace/account/account.component.css
+++ b/src/app/components/home/workspace/account/account.component.css
@@ -0,0 +1,38 @@
+.container {
+	/*display: flex;*/
+	/*background-color: #b8b8b8;*/
+	margin: 10px;
+}
+
+form {
+	/*margin-left: 100px;*/
+	width: 50%;
+	min-width: 50%;
+}
+
+mat-label {
+	font-size: smaller;
+}
+
+input {
+	font-size: smaller;
+}
+
+button {
+	display: block;
+	width: 100%;
+	margin-top: 2rem;
+}
+.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/home/workspace/account/account.component.html b/src/app/components/home/workspace/account/account.component.html
index 2d5fa18..2825020 100644
--- a/src/app/components/home/workspace/account/account.component.html
+++ b/src/app/components/home/workspace/account/account.component.html
@@ -1 +1,31 @@
-<p>account works!</p>
+<div class="container"
+	fxLayout="column"
+	fxLayoutAlign="space-around center">
+		<!-- Password Form -->
+			<form [formGroup]="passwdFG"
+				fxLayout="column">
+				<mat-form-field>
+					<mat-label>Ancien mot de passe</mat-label>
+					<input matInput type="password" formControlName="old_passwd" class="form-control" name="old_passwd" placeholder="Ancien mot de passe" [ngClass]="{'is-invalid':submitted && passwdFG.controls['old_passwd'].errors}">
+					<mat-error class="myError" *ngIf="passwdFG.controls['old_passwd'].hasError('required')">L'ancien mot de passe est requis !</mat-error>
+				</mat-form-field>
+				<mat-form-field>
+					<mat-label>Nouveau mot de passe</mat-label>
+					<input matInput type="password" formControlName="new_passwd" class="form-control" name="new_password" placeholder="Nouveau mot de passe" [ngClass]="{'is-invalid':submitted && passwdFG.controls['new_passwd'].errors}">
+					<mat-error class="myError" *ngIf="passwdFG.controls['new_passwd'].hasError('required')">Le nouveau mot de passe est requis !</mat-error>
+					<mat-error class="myError" *ngIf="passwdFG.controls['new_passwd'].hasError('pattern')">Le mot de passe doit avoir minimum {{minPw}} caractères et maximum {{maxPw}} avec 1 caratère minuscule, 1 majuscule et 1 chiffre</mat-error>
+				</mat-form-field>
+				<mat-form-field>
+					<mat-label>Confirmation</mat-label>
+					<input matInput type="password" formControlName="confirmation" class="form-control" name="confirmation" placeholder="Confirmation" [ngClass]="{'is-invalid':submitted && passwdFG.controls['confirmation'].errors}">
+					<mat-error class="myError" *ngIf="passwdFG.controls['confirmation'].hasError('required')">La confirmation du nouveau mot de passe est requis !</mat-error>
+					<mat-error class="myError" *ngIf="passwdFG.controls['confirmation'].hasError('pattern')">Le mot de passe doit avoir minimum {{minPw}} caractères et maximum {{maxPw}} avec 1 caratère minuscule, 1 majuscule et 1 chiffre</mat-error>
+					<mat-error class="myError" *ngIf="passwdFG.controls['confirmation'].hasError('mismatch')">La confirmation doit correspondre au mot de passe</mat-error>
+				</mat-form-field>
+				<button mat-raised-button color="primary" (click)="onUpdate()">Mise à jour</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>
+</div>
diff --git a/src/app/components/home/workspace/account/account.component.ts b/src/app/components/home/workspace/account/account.component.ts
index 9bb19e4..38e9724 100644
--- a/src/app/components/home/workspace/account/account.component.ts
+++ b/src/app/components/home/workspace/account/account.component.ts
@@ -1,4 +1,8 @@
 import { Component, OnInit } from '@angular/core';
+import { FormBuilder, FormGroup, Validators, ValidatorFn, ValidationErrors, AbstractControl } from '@angular/forms';
+import { Router } from '@angular/router';
+import { BackendService } from '../../../../services/backend/backend.service';
+import { ToastrService } from 'ngx-toastr';
 
 @Component({
 	selector: 'app-account',
@@ -6,10 +10,38 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./account.component.css']
 })
 export class AccountComponent implements OnInit {
+	passwdFG:FormGroup;
+	submitted:boolean=false;
+	minPw:number = 8;
+	maxPw:number = 24;
 
-	constructor() { }
+	constructor(private fb:FormBuilder,
+				private bs:BackendService,
+				private router:Router,
+				private toast:ToastrService) { }
 
 	ngOnInit(): void {
+		this.passwdFG=this.fb.group({
+			old_passwd:["", Validators.required],
+			new_passwd:["", [
+				Validators.required,
+				Validators.pattern('(?=\\D*\\d)(?=[^a-z])(?=[^A-Z]*[A-Z]).{' + this.minPw + ',' + this.maxPw + '}')
+			]],
+			confirmation:["", [
+				Validators.required,
+				Validators.pattern('(?=\\D*\\d)(?=[^a-z])(?=[^A-Z]*[A-Z]).{' + this.minPw + ',' + this.maxPw + '}'),
+				passwordMatchValidator
+			]],
+		});
 	}
 
+	onUpdate(): void {
+
+	}
+}
+
+export const passwordMatchValidator: ValidatorFn = (fg: AbstractControl): ValidationErrors | null => {
+	let pt = fg.parent as FormGroup;
+	if(!pt) return null;
+	return pt.get('new_passwd')?.value === pt.get('confirmation')?.value ? null : { 'mismatch' : true };
 }
diff --git a/src/app/components/home/workspace/hours/hours.component.ts b/src/app/components/home/workspace/hours/hours.component.ts
index bcaeb3f..31449d0 100644
--- a/src/app/components/home/workspace/hours/hours.component.ts
+++ b/src/app/components/home/workspace/hours/hours.component.ts
@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-hours',
-  templateUrl: './hours.component.html',
-  styleUrls: ['./hours.component.css']
+	selector: 'app-hours',
+	templateUrl: './hours.component.html',
+	styleUrls: ['./hours.component.css']
 })
 export class HoursComponent implements OnInit {
 
-  constructor() { }
+	constructor() { }
 
-  ngOnInit(): void {
-  }
+	ngOnInit(): void {
+	}
 
 }
diff --git a/src/app/components/home/workspace/infos/infos.component.ts b/src/app/components/home/workspace/infos/infos.component.ts
index f3420a1..5eb4f08 100644
--- a/src/app/components/home/workspace/infos/infos.component.ts
+++ b/src/app/components/home/workspace/infos/infos.component.ts
@@ -1,15 +1,15 @@
 import { Component, OnInit } from '@angular/core';
 
 @Component({
-  selector: 'app-infos',
-  templateUrl: './infos.component.html',
-  styleUrls: ['./infos.component.css']
+	selector: 'app-infos',
+	templateUrl: './infos.component.html',
+	styleUrls: ['./infos.component.css']
 })
 export class InfosComponent implements OnInit {
 
-  constructor() { }
+	constructor() { }
 
-  ngOnInit(): void {
-  }
+	ngOnInit(): void {
+	}
 
 }
diff --git a/src/styles.css b/src/styles.css
index 672a218..b6cfcb1 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -6,5 +6,6 @@ html, body { height: 100%; }
 body {
 	margin: 0;
 	font-family: Roboto, "Helvetica Neue", sans-serif;
-	background-color: #f5f5f5 !important;
+	overflow-y: hidden;
+	/*background-color: #f5f5f5 !important;*/
 }