diff --git a/frontend/src/app/change-password/change-password.component.html b/frontend/src/app/change-password/change-password.component.html
index 876ce22..fce25c6 100644
--- a/frontend/src/app/change-password/change-password.component.html
+++ b/frontend/src/app/change-password/change-password.component.html
@@ -1 +1,24 @@
-<p>change-password works!</p>
+<div class="container">
+  <div class="modal-header">
+    <h4 class="modal-title">Changer de mot de passe :</h4>
+  </div>
+  <form>
+    <div class="modal-body">
+      <div class="row">
+        <div class="col-md-10">
+          <div class="form-group mb-0">
+            <input class="form-control" type="password" required="" [(ngModel)]="oldPassword" autocomplete="password-change" id="oldpassword-change" name="oldpassword-name-change" placeholder="old password">
+            <input class="form-control" type="password" required="" [(ngModel)]="newPassword" autocomplete="password2-change" id="newpassword-change" name="newpassword-name-change" placeholder="new password">
+            <input class="form-control" type="password" required="" [(ngModel)]="confirmPassword" autocomplete="password2-change" id="confirmpassword-change" name="confirmpassword-name-change" placeholder="confirm password">
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="modal-footer">
+      <input class="btn btn-sm btn-primary" name="button-register" (click)="changePassword()" type="submit" value="Changer">
+    </div>
+  </form>
+  <br>
+  <div class="alert alert-danger" *ngIf="errorMessage!==''">{{errorMessage}}</div>
+  <div class="alert-success" *ngIf="succesMessage!==''">{{succesMessage}}</div>
+</div>
diff --git a/frontend/src/app/change-password/change-password.component.ts b/frontend/src/app/change-password/change-password.component.ts
index 21a5a50..eaf5864 100644
--- a/frontend/src/app/change-password/change-password.component.ts
+++ b/frontend/src/app/change-password/change-password.component.ts
@@ -1,4 +1,6 @@
 import { Component, OnInit } from '@angular/core';
+import {MessageService} from "../services/message/message.service";
+import {environment} from "../../environments/environment";
 
 @Component({
   selector: 'app-change-password',
@@ -7,9 +9,33 @@ import { Component, OnInit } from '@angular/core';
 })
 export class ChangePasswordComponent implements OnInit {
 
-  constructor() { }
+  username = sessionStorage.getItem('login');
+  oldPassword = '';
+  newPassword = '';
+  confirmPassword = '';
+  errorMessage = '';
+  succesMessage = '';
+
+  constructor(private messageService: MessageService) { }
 
   ngOnInit(): void {
   }
 
+  changePassword(): void {
+    console.log(this.username);
+    if(this.newPassword !== this.confirmPassword){
+      this.errorMessage = 'Les mots de passe ne sont pas identiques.';
+    }
+    else {
+      this.messageService.sendMessage(environment.urlCL,"changePassword",{username: this.username, password: this.oldPassword, newpassword: this.confirmPassword}).subscribe(data => {
+        if (data.status !== 'ok') {
+          this.succesMessage = '';
+          this.errorMessage = data.data.reason;
+        } else {
+          this.errorMessage = '';
+          this.succesMessage = data.data;
+        }
+      });
+    }
+  }
 }