diff --git a/src/app/pages/providers/providers-get-all/providers-get-all.css b/src/app/pages/providers/create-providers-modal/create-providers-modal.css
similarity index 100%
rename from src/app/pages/providers/providers-get-all/providers-get-all.css
rename to src/app/pages/providers/create-providers-modal/create-providers-modal.css
diff --git a/src/app/pages/providers/create-providers-modal/create-providers-modal.html b/src/app/pages/providers/create-providers-modal/create-providers-modal.html
new file mode 100644
index 0000000..1c34d8b
--- /dev/null
+++ b/src/app/pages/providers/create-providers-modal/create-providers-modal.html
@@ -0,0 +1 @@
+<p>create-providers-modal works!</p>
diff --git a/src/app/pages/providers/create-providers-modal/create-providers-modal.ts b/src/app/pages/providers/create-providers-modal/create-providers-modal.ts
new file mode 100644
index 0000000..9f431de
--- /dev/null
+++ b/src/app/pages/providers/create-providers-modal/create-providers-modal.ts
@@ -0,0 +1,59 @@
+import {Component, output} from '@angular/core';
+import {NzMessageService} from "ng-zorro-antd/message";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+import {NzModalComponent} from "ng-zorro-antd/modal";
+import {ProvidersAddForm} from "../providers-add-form/providers-add-form";
+
+@Component({
+  selector: 'app-create-providers-modal',
+  imports: [NzButtonComponent, NzModalComponent, ProvidersAddForm],
+  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 clients</ng-template>
+
+      <ng-template #modalContent>
+        <app-providers-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-providers-modal.css',
+})
+export class CreateProvidersModal {
+    constructor(private message: NzMessageService) {}
+    isVisible = false;
+    isConfirmLoading = false;
+
+    showModal(): void {
+      this.isVisible = true;
+    }
+
+    handleOk(): void {
+      this.isConfirmLoading = true;
+      this.message.success('Prestataire 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/providers/providers-add-form/providers-add-form.html b/src/app/pages/providers/providers-add-form/providers-add-form.html
index c204c6e..3a69e44 100644
--- a/src/app/pages/providers/providers-add-form/providers-add-form.html
+++ b/src/app/pages/providers/providers-add-form/providers-add-form.html
@@ -1,51 +1,23 @@
 <form nz-form nzLayout="horizontal" [formGroup]="providerForm">
     <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="lastName">
-        </nz-form-control>
-    </nz-form-item>
-
-    <nz-form-item>
-        <nz-form-label nzSpan="5" nzRequired>Prénom</nz-form-label>
+        <nz-form-label nzSpan="5" nzRequired>Note</nz-form-label>
         <nz-form-control nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Prénom" formControlName="firstName">
+            <input nz-input placeholder="Note" formControlName="note">
         </nz-form-control>
     </nz-form-item>
 
     <nz-form-item>
-        <nz-form-label nzSpan="5" nzRequired>Téléphone</nz-form-label>
-        <nz-form-control nzErrorTip="Ce champ est requis !">
-            <input nz-input placeholder="Numéro de téléphone" formControlName="phoneNumber">
-        </nz-form-control>
-    </nz-form-item>
-
-    <nz-form-item>
-        <nz-form-label nzSpan="5" nzRequired>Email</nz-form-label>
-        <nz-form-control nzErrorTip="Ce champ est requis !">
-            <input nz-input placeholder="Email" formControlName="email">
-        </nz-form-control>
-    </nz-form-item>
-
-    <nz-form-item>
-        <nz-form-label nzSpan="5" nzRequired>Adresse</nz-form-label>
-        <nz-form-control nzErrorTip="Ce champ est requis !">
-            <input nz-input placeholder="Adresse" formControlName="address">
-        </nz-form-control>
-    </nz-form-item>
-
-    <nz-form-item>
-        <nz-form-label nzSpan="5" nzRequired>Rôle</nz-form-label>
+        <nz-form-label nzSpan="5" nzRequired> Type </nz-form-label>
         <nz-form-control nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Rôle" formControlName="role">
-        </nz-form-control>
-    </nz-form-item>
-
-    <nz-form-item>
-        <nz-form-label nzSpan="5" nzRequired>Prix</nz-form-label>
-        <nz-form-control nzErrorTip="Ce champ est requis">
-            <input nz-input placeholder="Prix" formControlName="price">
+            <nz-select placeholder="Type de client" formControlName="providerTypeId">
+                @for (providertype of providerTypes(); track providertype.id) {
+                    <nz-option nzValue="{{providertype.id}}" nzLabel="{{ providertype.label }}"></nz-option>
+                }
+            </nz-select>
         </nz-form-control>
     </nz-form-item>
 
+    <nz-flex nzJustify="end">
+        <button nz-button nzType="primary" (click)="submitForm()">Valider</button>
+    </nz-flex>
 </form>
diff --git a/src/app/pages/providers/providers-add-form/providers-add-form.ts b/src/app/pages/providers/providers-add-form/providers-add-form.ts
index a6989ae..c8e7cbf 100644
--- a/src/app/pages/providers/providers-add-form/providers-add-form.ts
+++ b/src/app/pages/providers/providers-add-form/providers-add-form.ts
@@ -1,34 +1,105 @@
-import { Component } from '@angular/core';
-import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
-import {NzFormModule} from "ng-zorro-antd/form";
-import {NzInputDirective} from "ng-zorro-antd/input";
-import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {Component, inject, signal} from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
 import {NzButtonComponent} from "ng-zorro-antd/button";
+import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
+import {NzFlexDirective} from "ng-zorro-antd/flex";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {NzOptionComponent, NzSelectComponent} from "ng-zorro-antd/select";
+import {
+  CreateCustomerDto,
+  CustomersService,
+  CustomertypesService,
+  GetCustomerTypeDto,
+  ProvidersService, ProvidertypesService
+} from "../../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-providers-add-form',
-  imports: [ReactiveFormsModule, NzFormModule, NzInputDirective,],
+  imports: [
+    FormsModule,
+    NzButtonComponent,
+    NzColDirective,
+    NzFlexDirective,
+    NzFormControlComponent,
+    NzFormDirective,
+    NzFormItemComponent,
+    NzFormLabelComponent,
+    NzInputDirective,
+    NzOptionComponent,
+    NzRowDirective,
+    NzSelectComponent,
+    ReactiveFormsModule
+  ],
   templateUrl: './providers-add-form.html',
   styleUrl: './providers-add-form.css',
 })
 export class ProvidersAddForm {
-    providerForm = new FormGroup({
-        lastName: new FormControl<string>(null, [Validators.required]),
-        firstName: new FormControl<string>(null, [Validators.required]),
-        phoneNumber: new FormControl<string>(null, [Validators.required]),
-        email: new FormControl<string>(null, [Validators.required]),
-        address: new FormControl<string>(null, [Validators.required]),
-        role: new FormControl<string>(null, [Validators.required]),
-        price: new FormControl<string>(null, [Validators.required]),
-    })
-    submitForm() {
-        // Pour annuler si le formulaire est invalide
-        if (this.providerForm.invalid) return;
+  private providersService = inject(ProvidersService);
+  private providertypesService = inject(ProvidertypesService);
+  private notificationService = inject(NzNotificationService)
 
-        // Pour obtenir la valeur du formulaire
-        console.log(this.providerForm.getRawValue())
 
-        // Pour vider le formulaire
-        this.providerForm.reset()
+  providerForm = new FormGroup({
+    Price: new FormControl<string>(null, [Validators.required]),
+    providerTypeId: new FormControl<number>(null, [Validators.required]),
+  })
+
+  providerPost = signal<CreateCustomerDto>(this.providerForm.value);
+  providersLoading = signal<boolean>(false);
+
+  async submitForm() {
+    // Pour annuler si le formulaire est invalide
+    if (this.providerForm.invalid) return;
+
+    // Pour obtenir la valeur du formulaire
+    console.log(this.providerForm.getRawValue())
+    this.providerPost.set(this.providerForm.getRawValue())
+
+    await this.createCustomers(this.providerPost().note, this.providerPost().customerTypeId)
+    // Pour vider le formulaire
+    this.providerForm.reset()
+  }
+
+  async createCustomers(note: string, customerTypeId: number) {
+    this.providersLoading.set(true);
+
+    const providerValue = {
+      note: note,
+      customerTypeId: customerTypeId
     }
+
+    try {
+      const provider = await firstValueFrom(this.providersService.createProviderEndpoint(providerValue));
+      this.providerPost.set(provider);
+      console.log(provider);
+    } catch (e)
+    {
+      this.notificationService.error('Erreur de recherche', "L\'auteur n\'existe pas !");
+
+      this.notificationService.error('Erreur', ' (ou Erreur de communication avec l\'API)');
+    }
+
+    this.providersLoading.set(false);
+  }
+
+  customerTypes = signal<GetCustomerTypeDto[]>([])
+
+  async ngOnInit() {
+    await this.fetchCustomerTypes()
+  }
+
+  async fetchCustomerTypes() {
+    this.customersLoading.set(true);
+    try {
+      const customerType = await firstValueFrom(this.customertypesService.getAllCustomerTypeEndpoint())
+      this.customerTypes.set(customerType)
+    } catch (e) {
+      this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
+    }
+
+    this.customersLoading.set(false);
+  }
 }
diff --git a/src/app/pages/providers/providers-card-form/providers-card-form.css b/src/app/pages/providers/providers-card-form/providers-card-form.css
deleted file mode 100644
index 8ae4ce1..0000000
--- a/src/app/pages/providers/providers-card-form/providers-card-form.css
+++ /dev/null
@@ -1,3 +0,0 @@
-.ant-modal-content {
-    background: #272727;
-}
\ No newline at end of file
diff --git a/src/app/pages/providers/providers-card-form/providers-card-form.html b/src/app/pages/providers/providers-card-form/providers-card-form.html
deleted file mode 100644
index 81b94e8..0000000
--- a/src/app/pages/providers/providers-card-form/providers-card-form.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>providers-card-form works!</p>
diff --git a/src/app/pages/providers/providers-card-form/providers-card-form.ts b/src/app/pages/providers/providers-card-form/providers-card-form.ts
deleted file mode 100644
index 85dd200..0000000
--- a/src/app/pages/providers/providers-card-form/providers-card-form.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { Component } from '@angular/core';
-import {NzModalComponent, NzModalModule} from "ng-zorro-antd/modal";
-import {NzButtonComponent, NzButtonModule} from "ng-zorro-antd/button";
-import {NzMessageService} from "ng-zorro-antd/message";
-import {ProvidersAddForm} from "../providers-add-form/providers-add-form";
-
-@Component({
-  selector: 'app-providers-card-form',
-    imports: [NzButtonModule, NzModalModule, ProvidersAddForm],
-    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>Création de prestataires</ng-template>
-
-            <ng-template #modalContent>
-                <app-providers-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: './providers-card-form.css',
-})
-export class ProvidersCardForm {
-    constructor(private message: NzMessageService) {}
-    isVisible = false;
-    isConfirmLoading = false;
-
-    showModal(): void {
-        this.isVisible = true;
-    }
-
-    handleOk(): void {
-        this.isConfirmLoading = true;
-        this.message.success('Prestataire créé !');
-        setTimeout(() => {
-            this.isVisible = false;
-            this.isConfirmLoading = false;
-        }, 1000);
-    }
-
-    handleCancel(): void {
-        this.isVisible = false;
-    }
-}
diff --git a/src/app/pages/providers/providers-card/providers-card.css b/src/app/pages/providers/providers-card/providers-card.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/providers/providers-card/providers-card.html b/src/app/pages/providers/providers-card/providers-card.html
new file mode 100644
index 0000000..2a291ad
--- /dev/null
+++ b/src/app/pages/providers/providers-card/providers-card.html
@@ -0,0 +1 @@
+<p>providers-card works!</p>
diff --git a/src/app/pages/providers/providers-card/providers-card.ts b/src/app/pages/providers/providers-card/providers-card.ts
new file mode 100644
index 0000000..596c6fd
--- /dev/null
+++ b/src/app/pages/providers/providers-card/providers-card.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-providers-card',
+  imports: [],
+  templateUrl: './providers-card.html',
+  styleUrl: './providers-card.css',
+})
+export class ProvidersCard {
+
+}
diff --git a/src/app/pages/providers/providers-get-all/providers-get-all.html b/src/app/pages/providers/providers-get-all/providers-get-all.html
deleted file mode 100644
index 7e60329..0000000
--- a/src/app/pages/providers/providers-get-all/providers-get-all.html
+++ /dev/null
@@ -1 +0,0 @@
-<p>providers-get-all works!</p>
diff --git a/src/app/pages/providers/providers-get-all/providers-get-all.ts b/src/app/pages/providers/providers-get-all/providers-get-all.ts
deleted file mode 100644
index 7db4414..0000000
--- a/src/app/pages/providers/providers-get-all/providers-get-all.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-import {Component, inject, signal} from '@angular/core';
-import {NzNotificationService} from "ng-zorro-antd/notification";
-import {Router} from "@angular/router";
-import {firstValueFrom} from "rxjs";
-
-@Component({
-  selector: 'app-providers-get-all',
-  imports: [],
-  templateUrl: './providers-get-all.html',
-  styleUrl: './providers-get-all.css',
-})
-export class ProvidersGetAll {
-}
diff --git a/src/app/pages/providers/providers.html b/src/app/pages/providers/providers.html
index 1cae579..6e1fd60 100644
--- a/src/app/pages/providers/providers.html
+++ b/src/app/pages/providers/providers.html
@@ -1,3 +1,11 @@
-<app-providers-card-form/>
+<app-create-providers-modal (triggerCreated)="fetchProviders()" />
 
-<app-providers-get-all/>
\ No newline at end of file
+<div class="card">
+    <div nz-row [nzGutter]="10" style="gap: 30px">
+        @for (provider of providers(); track provider.id)
+        {
+            <!-- Passage de la donnée du parent vers l'enfant + signal à émettre -->
+            <app-providers-card [provider]="provider" (triggerEdited)="fetchProviders()" />
+        }
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/providers/providers.ts b/src/app/pages/providers/providers.ts
index df16827..1511818 100644
--- a/src/app/pages/providers/providers.ts
+++ b/src/app/pages/providers/providers.ts
@@ -1,16 +1,40 @@
-import { Component } from '@angular/core';
-import {ProvidersCardForm} from "./providers-card-form/providers-card-form";
-import {ProvidersGetAll} from "./providers-get-all/providers-get-all";
+import {Component, inject, signal} from '@angular/core';
+import {NzRowDirective} from "ng-zorro-antd/grid";
+import {GetProviderDto, ProvidersService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {Router} from "@angular/router";
+import {firstValueFrom} from "rxjs";
+import {ProvidersCard} from "./providers-card/providers-card";
+import {CreateProvidersModal} from "./create-providers-modal/create-providers-modal";
 
 @Component({
   selector: 'app-providers',
-    imports: [
-        ProvidersCardForm,
-        ProvidersGetAll
-    ],
+    imports: [NzRowDirective, ProvidersCard, CreateProvidersModal],
   templateUrl: './providers.html',
   styleUrl: './providers.css',
 })
 export class Providers {
+    private providersService = inject(ProvidersService);
+    private notificationService = inject(NzNotificationService)
 
+    router = inject(Router);
+
+    providers = signal<GetProviderDto[]>([]);
+    providersLoading = signal<boolean>(false);
+
+    async ngOnInit() {
+        await this.fetchProviders();
+    }
+
+    async fetchProviders() {
+        this.providersLoading.set(true);
+        try {
+            const providers = await firstValueFrom(this.providersService.getAllProvidersEndpoint())
+            this.providers.set(providers)
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
+        }
+
+        this.providersLoading.set(false);
+    }
 }