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
index e69de29..8ae4ce1 100644
--- a/src/app/pages/providers/providers-card-form/providers-card-form.css
+++ b/src/app/pages/providers/providers-card-form/providers-card-form.css
@@ -0,0 +1,3 @@
+.ant-modal-content {
+    background: #272727;
+}
\ No newline at end of file
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
index b1bd102..dd8edd7 100644
--- a/src/app/pages/providers/providers-card-form/providers-card-form.ts
+++ b/src/app/pages/providers/providers-card-form/providers-card-form.ts
@@ -1,11 +1,56 @@
 import { Component } from '@angular/core';
+import {NzModalComponent, NzModalModule} from "ng-zorro-antd/modal";
+import {NzButtonComponent, NzButtonModule} from "ng-zorro-antd/button";
+import {ProvidersAddForm} from "../providers-add-form/providers-add-form";
+import {NzMessageService} from "ng-zorro-antd/message";
 
 @Component({
   selector: 'app-providers-card-form',
-  imports: [],
-  templateUrl: './providers-card-form.html',
+    imports: [NzButtonModule, NzModalModule, ProvidersAddForm],
+    template: `
+        <button nz-button nzType="primary" (click)="showModal()">
+            <span>+</span>
+        </button>
+        <nz-modal
+                [(nzVisible)]="isVisible"
+                [nzTitle]="modalTitle"
+                [nzContent]="modalContent"
+                [nzFooter]="modalFooter"
+                (nzOnCancel)="handleCancel()"
+        >
+            <ng-template #modalTitle style="text-align: center">Création de prestataires</ng-template>
+
+            <ng-template #modalContent>
+                <app-providers-add-form></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.html b/src/app/pages/providers/providers.html
index 66d56d1..1efef85 100644
--- a/src/app/pages/providers/providers.html
+++ b/src/app/pages/providers/providers.html
@@ -1 +1 @@
-<app-providers-card-form></app-providers-card-form>
+<app-providers-card-form></app-providers-card-form>
\ No newline at end of file