diff --git a/src/app/pages/contact/contact-get-all-form/contact-get-all-form.css b/src/app/pages/contact/contact-card/contact-card.css
similarity index 100%
rename from src/app/pages/contact/contact-get-all-form/contact-get-all-form.css
rename to src/app/pages/contact/contact-card/contact-card.css
diff --git a/src/app/pages/contact/contact-card/contact-card.html b/src/app/pages/contact/contact-card/contact-card.html
new file mode 100644
index 0000000..7bb4f76
--- /dev/null
+++ b/src/app/pages/contact/contact-card/contact-card.html
@@ -0,0 +1,29 @@
+@if (edit() == false) {
+    <nz-card style="width:400px;" [nzActions]="[edit, delete]">
+        <h2 style="text-align: center; font-weight: bold">Contact n°{{ contact().id }}</h2>
+        <p>Nom : {{ contact().lastName + " " + contact().firstName }}</p>
+    </nz-card>
+    <ng-template #edit>
+        <nz-icon (click)="Edit()" nzType="edit" nzTheme="fill" />
+    </ng-template>
+    <ng-template #delete>
+        <nz-icon (click)="Delete()" nzType="delete" nzTheme="fill" />
+    </ng-template>
+} @else {
+    <nz-card style="width:400px;" [nzActions]="[back, check]">
+        <form nz-form nzLayout="horizontal" [formGroup]="contactForm">
+            <nz-form-item>
+                <nz-form-label nzSpan="5" nzRequired> Nom </nz-form-label>
+                <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
+                    <input nz-input placeholder="Nom" formControlName="note">
+                </nz-form-control>
+            </nz-form-item>
+        </form>
+    </nz-card>
+    <ng-template #back>
+        <nz-icon (click)="Back()" nzType="backward" nzTheme="fill" />
+    </ng-template>
+    <ng-template #check>
+        <nz-icon (click)="submitForm()" nzType="check" nzTheme="outline" />
+    </ng-template>
+}
\ No newline at end of file
diff --git a/src/app/pages/contact/contact-card/contact-card.ts b/src/app/pages/contact/contact-card/contact-card.ts
new file mode 100644
index 0000000..e22c666
--- /dev/null
+++ b/src/app/pages/contact/contact-card/contact-card.ts
@@ -0,0 +1,108 @@
+import {Component, inject, input, output, signal} from '@angular/core';
+import {
+  ContactsService,
+  CustomersService, GetContactDto,
+  GetCustomerDto,
+  UpdateContactDto,
+  UpdateCustomerDto
+} from "../../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {firstValueFrom} from "rxjs";
+import {NzCardComponent} from "ng-zorro-antd/card";
+import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzIconDirective} from "ng-zorro-antd/icon";
+import {NzInputDirective} from "ng-zorro-antd/input";
+
+@Component({
+  selector: 'app-contact-card',
+  imports: [NzCardComponent, NzColDirective, NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzIconDirective, NzInputDirective, NzRowDirective, ReactiveFormsModule],
+  templateUrl: './contact-card.html',
+  styleUrl: './contact-card.css',
+})
+export class ContactCard {
+  private contactsService = inject(ContactsService);
+  private notificationService = inject(NzNotificationService)
+
+  contactEdit = signal<UpdateContactDto>(null);
+  contactsLoading = signal<boolean>(false);
+
+  contactForm = new FormGroup({
+    id: new FormControl(null, [Validators.required]),
+    lastname: new FormControl<string>(null, [Validators.required]),
+    firstname: new FormControl(null, [Validators.required]),
+    phone: new FormControl(null, [Validators.required]),
+    email: new FormControl(null, [Validators.required]),
+    address: new FormControl(null, [Validators.required]),
+    city: new FormControl(null, [Validators.required]),
+    role: new FormControl(null, [Validators.required])
+  })
+
+  async submitForm() {
+    this.contactsLoading.set(true);
+
+    const contactValue = {
+      lastname: this.contactForm.value.lastname,
+      firstname: this.contactForm.value.firstname,
+      phone: this.contactForm.value.phone,
+      email: this.contactForm.value.email,
+      address: this.contactForm.value.address,
+      city: this.contactForm.value.city,
+      role: this.contactForm.value.role,
+    }
+
+    try {
+      const contact = await firstValueFrom(this.contactsService.updateContactRequest(this.contact().id,contactValue));
+      this.contactEdit.set(contact);
+      console.log(contact);
+      this.contactForm.reset();
+      this.edit.set(false);
+
+      this.triggerEdited.emit();
+
+    } catch (e)
+    {
+      this.notificationService.error('Erreur', ' (ou Erreur de communication avec l\'API)');
+    }
+
+    this.contactsLoading.set(false);
+
+  }
+
+
+  contact = input<GetContactDto>(null);
+
+  edit = signal(false)
+
+  triggerEdited = output<void>();
+
+  protected Edit() {
+    this.edit.set(true)
+  }
+
+  protected Back() {
+    this.edit.set(false)
+    this.contactForm.reset();
+  }
+
+  async Delete() {
+    this.contactsLoading.set(true);
+
+    try {
+      const contact = await firstValueFrom(this.contactsService.deleteContactEndpoint(this.contact().id));
+      this.contactEdit.set(contact);
+
+      this.contactForm.reset();
+      this.triggerEdited.emit();
+
+    } catch (e)
+    {
+      this.notificationService.error('Erreur de recherche', "Le contact n\'existe pas !");
+
+      this.notificationService.error('Erreur', ' (ou Erreur de communication avec l\'API)');
+    }
+
+    this.contactsLoading.set(false);
+  }
+}
diff --git a/src/app/pages/contact/contact-get-all-form/contact-get-all-form.html b/src/app/pages/contact/contact-get-all-form/contact-get-all-form.html
deleted file mode 100644
index 2d632a1..0000000
--- a/src/app/pages/contact/contact-get-all-form/contact-get-all-form.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>contact-get-all-form works!</p>
diff --git a/src/app/pages/contact/contact-get-all-form/contact-get-all-form.ts b/src/app/pages/contact/contact-get-all-form/contact-get-all-form.ts
deleted file mode 100644
index 5bd699e..0000000
--- a/src/app/pages/contact/contact-get-all-form/contact-get-all-form.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-contact-get-all-form',
-  imports: [],
-  templateUrl: './contact-get-all-form.html',
-  styleUrl: './contact-get-all-form.css',
-})
-export class ContactGetAllForm {
-
-}
diff --git a/src/app/pages/contact/contact-get-all/contact-get-all.html b/src/app/pages/contact/contact-get-all/contact-get-all.html
deleted file mode 100644
index a96702b..0000000
--- a/src/app/pages/contact/contact-get-all/contact-get-all.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>contact-get-all works!</p>
diff --git a/src/app/pages/contact/contact-get-all/contact-get-all.ts b/src/app/pages/contact/contact-get-all/contact-get-all.ts
deleted file mode 100644
index 5f4cde4..0000000
--- a/src/app/pages/contact/contact-get-all/contact-get-all.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-import { Component } from '@angular/core';
-
-@Component({
-  selector: 'app-contact-get-all',
-  imports: [],
-  templateUrl: './contact-get-all.html',
-  styleUrl: './contact-get-all.css',
-})
-export class ContactGetAll {
-
-}
diff --git a/src/app/pages/contact/contact.html b/src/app/pages/contact/contact.html
index 9cae746..70b892c 100644
--- a/src/app/pages/contact/contact.html
+++ b/src/app/pages/contact/contact.html
@@ -1 +1,11 @@
-<p>contact works!</p>
+<app-create-contact-modal (triggerCreated)="fetchCustomers()" />
+
+<div class="card">
+    <div nz-row [nzGutter]="10" style="gap: 30px">
+        @for (contact of contacts(); track contact.id)
+        {
+            <!-- Passage de la donnée du parent vers l'enfant + signal à émettre -->
+            <app-contact-card [contact]="contact" (triggerEdited)="fetchCustomers()" />
+        }
+    </div>
+</div>
diff --git a/src/app/pages/contact/contact.ts b/src/app/pages/contact/contact.ts
index 7a0c2c0..cc43b0b 100644
--- a/src/app/pages/contact/contact.ts
+++ b/src/app/pages/contact/contact.ts
@@ -1,11 +1,46 @@
-import { Component } from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
+import {ContactsService, GetContactDto} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {Router} from "@angular/router";
+import {firstValueFrom} from "rxjs";
+import {CustomersCardForm} from "../customers/create-customers-modal/customers-card-form";
+import {GetAllCustomersCard} from "../customers/customers-card/get-all-customers-card";
+import {NzRowDirective} from "ng-zorro-antd/grid";
+import {CreateContactModal} from "./create-contact-modal/create-contact-modal";
+import {ContactCard} from "./contact-card/contact-card";
 
 @Component({
   selector: 'app-contact',
-  imports: [],
+  imports: [
+    NzRowDirective,
+    CreateContactModal,
+    ContactCard
+  ],
   templateUrl: './contact.html',
   styleUrl: './contact.css',
 })
 export class Contact {
+  private contactsService = inject(ContactsService);
+  private notificationService = inject(NzNotificationService)
 
+  router = inject(Router);
+
+  contacts = signal<GetContactDto[]>([]);
+  contactsLoading = signal<boolean>(false);
+
+  async ngOnInit() {
+    await this.fetchCustomers();
+  }
+
+  async fetchCustomers() {
+    this.contactsLoading.set(true);
+    try {
+      const contacts = await firstValueFrom(this.contactsService.getAllContactxuest())
+      this.contacts.set(contacts)
+    } catch (e) {
+      this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
+    }
+
+    this.contactsLoading.set(false);
+  }
 }
diff --git a/src/app/pages/contact/contact-get-all/contact-get-all.css b/src/app/pages/contact/create-contact-modal/create-contact-modal.css
similarity index 100%
rename from src/app/pages/contact/contact-get-all/contact-get-all.css
rename to src/app/pages/contact/create-contact-modal/create-contact-modal.css
diff --git a/src/app/pages/contact/create-contact-modal/create-contact-modal.html b/src/app/pages/contact/create-contact-modal/create-contact-modal.html
new file mode 100644
index 0000000..9561a47
--- /dev/null
+++ b/src/app/pages/contact/create-contact-modal/create-contact-modal.html
@@ -0,0 +1 @@
+<p>create-contact-modal works!</p>
diff --git a/src/app/pages/contact/create-contact-modal/create-contact-modal.ts b/src/app/pages/contact/create-contact-modal/create-contact-modal.ts
new file mode 100644
index 0000000..e88f0df
--- /dev/null
+++ b/src/app/pages/contact/create-contact-modal/create-contact-modal.ts
@@ -0,0 +1,63 @@
+import {Component, output} from '@angular/core';
+import {ContactAddForm} from "../contact-add-form/contact-add-form";
+import {NzMessageService} from "ng-zorro-antd/message";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+import {NzModalComponent} from "ng-zorro-antd/modal";
+
+@Component({
+  selector: 'app-create-contact-modal',
+  imports: [
+    ContactAddForm,
+    NzButtonComponent,
+    NzModalComponent
+  ],
+  template: `
+    <button nz-button nzType="primary" (click)="showModal()">
+      <span style="font-weight: bold">+</span>
+    </button>
+    <nz-modal
+        [(nzVisible)]="isVisible"
+        [nzTitle]="modalTitle"
+        [nzContent]="modalContent"
+        [nzFooter]="modalFooter"
+        (nzOnCancel)="handleCancel()">
+      <ng-template #modalTitle style="text-align: center">Création de contacts</ng-template>
+
+      <ng-template #modalContent>
+        <app-contact-add-form/>
+      </ng-template>
+
+      <ng-template #modalFooter>
+        <button nz-button nzType="default" (click)="handleCancel()">Annuler</button>
+        <button nz-button nzType="primary" (click)="handleOk()" [nzLoading]="isConfirmLoading">Confirmer</button>
+      </ng-template>
+    </nz-modal>
+  `,
+  styleUrl: './create-contact-modal.css',
+})
+export class CreateContactModal {
+  constructor(private message: NzMessageService) {}
+  isVisible = false;
+  isConfirmLoading = false;
+
+  showModal(): void {
+    this.isVisible = true;
+  }
+
+  handleOk(): void {
+    this.isConfirmLoading = true;
+    this.message.success('Client créé !');
+    setTimeout(() => {
+      this.isVisible = false;
+      this.isConfirmLoading = false;
+    }, 300);
+    this.triggerCreated.emit();
+  }
+
+  handleCancel(): void {
+    this.isVisible = false;
+    this.message.info('Création annulée');
+  }
+
+  triggerCreated = output<void>()
+}
diff --git a/src/app/pages/customers/create-customers-modal/customers-card-form.ts b/src/app/pages/customers/create-customers-modal/customers-card-form.ts
index ca6c9b4..b5ec8cd 100644
--- a/src/app/pages/customers/create-customers-modal/customers-card-form.ts
+++ b/src/app/pages/customers/create-customers-modal/customers-card-form.ts
@@ -17,8 +17,7 @@ import {CustomersAddForm} from "../customers-add-form/customers-add-form";
                 [nzTitle]="modalTitle"
                 [nzContent]="modalContent"
                 [nzFooter]="modalFooter"
-                (nzOnCancel)="handleCancel()"
-        >
+                (nzOnCancel)="handleCancel()">
             <ng-template #modalTitle style="text-align: center">Création de clients</ng-template>
 
             <ng-template #modalContent>
diff --git a/src/app/pages/customers/customers-card/get-all-customers-card.html b/src/app/pages/customers/customers-card/get-all-customers-card.html
index 9d6ff29..4afd437 100644
--- a/src/app/pages/customers/customers-card/get-all-customers-card.html
+++ b/src/app/pages/customers/customers-card/get-all-customers-card.html
@@ -1,7 +1,7 @@
 @if (edit() == false) {
     <nz-card style="width:400px;" [nzActions]="[edit, delete]">
         <h2 style="text-align: center; font-weight: bold">Client n°{{ customer().id }}</h2>
-        <p>Nom : {{ customer().note }}</p>
+        <p>Note : {{ customer().note }}</p>
     </nz-card>
     <ng-template #edit>
         <nz-icon (click)="Edit()" nzType="edit" nzTheme="fill" />
@@ -13,7 +13,7 @@
     <nz-card style="width:400px;" [nzActions]="[back, check]">
         <form nz-form nzLayout="horizontal" [formGroup]="customerForm">
             <nz-form-item>
-                <nz-form-label nzSpan="5" nzRequired> Nom </nz-form-label>
+                <nz-form-label nzSpan="5" nzRequired> Note </nz-form-label>
                 <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
                     <input nz-input placeholder="Nom" formControlName="note">
                 </nz-form-control>