diff --git a/src/app/pages/customers/customers-add-form/customers-add-form.css b/src/app/pages/customers/customers-add-form/customers-add-form.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/customers/customers-add-form/customers-add-form.html b/src/app/pages/customers/customers-add-form/customers-add-form.html
new file mode 100644
index 0000000..6819891
--- /dev/null
+++ b/src/app/pages/customers/customers-add-form/customers-add-form.html
@@ -0,0 +1,51 @@
+<form nz-form nzLayout="horizontal" [formGroup]="customerForm">
+    <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-control nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Prénom" formControlName="firstName">
+        </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-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>Note</nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Note" formControlName="note">
+        </nz-form-control>
+    </nz-form-item>
+
+</form>
diff --git a/src/app/pages/customers/customers-add-form/customers-add-form.ts b/src/app/pages/customers/customers-add-form/customers-add-form.ts
new file mode 100644
index 0000000..2b819b7
--- /dev/null
+++ b/src/app/pages/customers/customers-add-form/customers-add-form.ts
@@ -0,0 +1,42 @@
+import { Component } from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
+import {NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+
+@Component({
+  selector: 'app-customers-add-form',
+    imports: [
+        FormsModule,
+        NzColDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzInputDirective,
+        NzRowDirective,
+        ReactiveFormsModule
+    ],
+  templateUrl: './customers-add-form.html',
+  styleUrl: './customers-add-form.css',
+})
+export class CustomersAddForm {
+    customerForm = 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]),
+    })
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.customerForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.customerForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.customerForm.reset()
+    }
+}
diff --git a/src/app/pages/customers/customers-card-form/customers-card-form.css b/src/app/pages/customers/customers-card-form/customers-card-form.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/customers/customers-card-form/customers-card-form.html b/src/app/pages/customers/customers-card-form/customers-card-form.html
new file mode 100644
index 0000000..4b55f97
--- /dev/null
+++ b/src/app/pages/customers/customers-card-form/customers-card-form.html
@@ -0,0 +1 @@
+<p>customers-card-form works!</p>
diff --git a/src/app/pages/customers/customers-card-form/customers-card-form.ts b/src/app/pages/customers/customers-card-form/customers-card-form.ts
new file mode 100644
index 0000000..68572de
--- /dev/null
+++ b/src/app/pages/customers/customers-card-form/customers-card-form.ts
@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import {NzMessageService} from "ng-zorro-antd/message";
+import {NzButtonModule} from "ng-zorro-antd/button";
+import {NzModalModule} from "ng-zorro-antd/modal";
+import {ProvidersAddForm} from "../../providers/providers-add-form/providers-add-form";
+import {CustomersAddForm} from "../customers-add-form/customers-add-form";
+
+@Component({
+  selector: 'app-customers-card-form',
+    imports: [NzButtonModule, NzModalModule, CustomersAddForm],
+    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-customers-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: './customers-card-form.css',
+})
+export class CustomersCardForm {
+    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;
+    }
+}
\ No newline at end of file
diff --git a/src/app/pages/customers/customers-card/customers-card.css b/src/app/pages/customers/customers-card/customers-card.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/customers/customers-card/customers-card.html b/src/app/pages/customers/customers-card/customers-card.html
new file mode 100644
index 0000000..ca34895
--- /dev/null
+++ b/src/app/pages/customers/customers-card/customers-card.html
@@ -0,0 +1 @@
+<p>customers-card works!</p>
diff --git a/src/app/pages/customers/customers-card/customers-card.ts b/src/app/pages/customers/customers-card/customers-card.ts
new file mode 100644
index 0000000..7a6dc3c
--- /dev/null
+++ b/src/app/pages/customers/customers-card/customers-card.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-customers-card',
+  imports: [],
+  templateUrl: './customers-card.html',
+  styleUrl: './customers-card.css',
+})
+export class CustomersCard {
+
+}
diff --git a/src/app/pages/providers/providers-add-form/providers-add-form.css b/src/app/pages/providers/providers-add-form/providers-add-form.css
new file mode 100644
index 0000000..e69de29
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
new file mode 100644
index 0000000..c204c6e
--- /dev/null
+++ b/src/app/pages/providers/providers-add-form/providers-add-form.html
@@ -0,0 +1,51 @@
+<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-control nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Prénom" formControlName="firstName">
+        </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-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-form-control>
+    </nz-form-item>
+
+</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
new file mode 100644
index 0000000..a6989ae
--- /dev/null
+++ b/src/app/pages/providers/providers-add-form/providers-add-form.ts
@@ -0,0 +1,34 @@
+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 {NzButtonComponent} from "ng-zorro-antd/button";
+
+@Component({
+  selector: 'app-providers-add-form',
+  imports: [ReactiveFormsModule, NzFormModule, NzInputDirective,],
+  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;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.providerForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.providerForm.reset()
+    }
+}
diff --git a/src/app/pages/staff/staff-add-form/staff-add-form.css b/src/app/pages/staff/staff-add-form/staff-add-form.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/staff/staff-add-form/staff-add-form.html b/src/app/pages/staff/staff-add-form/staff-add-form.html
new file mode 100644
index 0000000..5ef2c2f
--- /dev/null
+++ b/src/app/pages/staff/staff-add-form/staff-add-form.html
@@ -0,0 +1,61 @@
+<form nz-form nzLayout="horizontal" [formGroup]="staffForm">
+    <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-control nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Prénom" formControlName="firstName">
+        </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-control nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Rôle" formControlName="role">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-layout></nz-layout>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="10" nzRequired>Numéro F4T2</nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Numéro F4T2" formControlName="F4T2NumberApproval">
+        </nz-form-control>
+    </nz-form-item>
+
+    <nz-form-item>
+        <nz-form-label nzSpan="10" nzRequired>Date d'expiration du F4T2</nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Date d'expiration du F4T2" formControlName="F4T2ExpirationDate">
+        </nz-form-control>
+    </nz-form-item>
+
+
+</form>
diff --git a/src/app/pages/staff/staff-add-form/staff-add-form.ts b/src/app/pages/staff/staff-add-form/staff-add-form.ts
new file mode 100644
index 0000000..3e341b1
--- /dev/null
+++ b/src/app/pages/staff/staff-add-form/staff-add-form.ts
@@ -0,0 +1,43 @@
+import { Component } from '@angular/core';
+import {FormControl, FormGroup, FormsModule, ReactiveFormsModule, Validators} from "@angular/forms";
+import {NzColDirective, NzRowDirective} from "ng-zorro-antd/grid";
+import {
+    NzFormControlComponent,
+    NzFormDirective,
+    NzFormItemComponent,
+    NzFormLabelComponent,
+    NzFormModule
+} from "ng-zorro-antd/form";
+import {NzInputDirective} from "ng-zorro-antd/input";
+import {NzLayoutComponent} from "ng-zorro-antd/layout";
+
+@Component({
+  selector: 'app-staff-add-form',
+    imports: [ReactiveFormsModule, NzFormModule, NzInputDirective, NzLayoutComponent],
+  templateUrl: './staff-add-form.html',
+  styleUrl: './staff-add-form.css',
+})
+export class StaffAddForm {
+    staffForm = 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]),
+        F4T2NumberApproval: new FormControl<string>(null, [Validators.required]),
+        F4T2ExpirationDate: new FormControl<Date>(null, [Validators.required]),
+
+    })
+    submitForm() {
+        // Pour annuler si le formulaire est invalide
+        if (this.staffForm.invalid) return;
+
+        // Pour obtenir la valeur du formulaire
+        console.log(this.staffForm.getRawValue())
+
+        // Pour vider le formulaire
+        this.staffForm.reset()
+    }
+}
diff --git a/src/app/pages/staff/staff-card-form/staff-card-form.css b/src/app/pages/staff/staff-card-form/staff-card-form.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/staff/staff-card-form/staff-card-form.html b/src/app/pages/staff/staff-card-form/staff-card-form.html
new file mode 100644
index 0000000..00c833f
--- /dev/null
+++ b/src/app/pages/staff/staff-card-form/staff-card-form.html
@@ -0,0 +1 @@
+<p>staff-card-form works!</p>
diff --git a/src/app/pages/staff/staff-card-form/staff-card-form.ts b/src/app/pages/staff/staff-card-form/staff-card-form.ts
new file mode 100644
index 0000000..90e9a07
--- /dev/null
+++ b/src/app/pages/staff/staff-card-form/staff-card-form.ts
@@ -0,0 +1,57 @@
+import { Component } from '@angular/core';
+import {NzMessageService} from "ng-zorro-antd/message";
+import {StaffAddForm} from "../staff-add-form/staff-add-form";
+import {NzButtonModule} from "ng-zorro-antd/button";
+import {NzModalModule} from "ng-zorro-antd/modal";
+import {ProvidersAddForm} from "../../providers/providers-add-form/providers-add-form";
+
+@Component({
+  selector: 'app-staff-card-form',
+    imports: [NzButtonModule, NzModalModule, StaffAddForm],
+    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 artificiers</ng-template>
+
+            <ng-template #modalContent>
+                <app-staff-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: './staff-card-form.css',
+})
+export class StaffCardForm {
+    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;
+    }
+}
\ No newline at end of file
diff --git a/src/app/pages/staff/staff-card/staff-card.css b/src/app/pages/staff/staff-card/staff-card.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/staff/staff-card/staff-card.html b/src/app/pages/staff/staff-card/staff-card.html
new file mode 100644
index 0000000..3aeccb7
--- /dev/null
+++ b/src/app/pages/staff/staff-card/staff-card.html
@@ -0,0 +1 @@
+<p>staff-card works!</p>
diff --git a/src/app/pages/staff/staff-card/staff-card.ts b/src/app/pages/staff/staff-card/staff-card.ts
new file mode 100644
index 0000000..783d736
--- /dev/null
+++ b/src/app/pages/staff/staff-card/staff-card.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-staff-card',
+  imports: [],
+  templateUrl: './staff-card.html',
+  styleUrl: './staff-card.css',
+})
+export class StaffCard {
+
+}