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 d0a2a59..cbb7720 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
@@ -12,8 +12,7 @@ import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-providers-add-form',
-  imports: [FormsModule, NzButtonComponent, NzColDirective, NzFlexDirective, NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzInputDirective, NzOptionComponent, NzRowDirective, NzSelectComponent, ReactiveFormsModule
-  ],
+  imports: [FormsModule, NzButtonComponent, NzColDirective, NzFlexDirective, NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzInputDirective, NzOptionComponent, NzRowDirective, NzSelectComponent, ReactiveFormsModule],
   templateUrl: './providers-add-form.html',
   styleUrl: './providers-add-form.css',
 })
diff --git a/src/app/pages/staff/create-staff-modal/create-staff-modal.css b/src/app/pages/staff/create-staff-modal/create-staff-modal.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/staff/create-staff-modal/create-staff-modal.html b/src/app/pages/staff/create-staff-modal/create-staff-modal.html
new file mode 100644
index 0000000..50f5d70
--- /dev/null
+++ b/src/app/pages/staff/create-staff-modal/create-staff-modal.html
@@ -0,0 +1 @@
+<p>create-staff-modal works!</p>
diff --git a/src/app/pages/staff/create-staff-modal/create-staff-modal.ts b/src/app/pages/staff/create-staff-modal/create-staff-modal.ts
new file mode 100644
index 0000000..0a89b31
--- /dev/null
+++ b/src/app/pages/staff/create-staff-modal/create-staff-modal.ts
@@ -0,0 +1,63 @@
+import {Component, output} from '@angular/core';
+import {StaffAddForm} from "../staff-add-form/staff-add-form";
+import {NzMessageService} from "ng-zorro-antd/message";
+import {NzModalComponent} from "ng-zorro-antd/modal";
+import {NzButtonComponent} from "ng-zorro-antd/button";
+
+@Component({
+  selector: 'app-create-staff-modal',
+  imports: [
+    StaffAddForm,
+    NzModalComponent,
+    NzButtonComponent
+  ],
+  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 staff</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: './create-staff-modal.css',
+})
+export class CreateStaffModal {
+  constructor(private message: NzMessageService) {}
+  isVisible = false;
+  isConfirmLoading = false;
+
+  showModal(): void {
+    this.isVisible = true;
+  }
+
+  handleOk(): void {
+    this.isConfirmLoading = true;
+    this.message.success('Staff 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/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..b5a5e87
--- /dev/null
+++ b/src/app/pages/staff/staff-add-form/staff-add-form.html
@@ -0,0 +1,37 @@
+<form nz-form nzLayout="horizontal" [formGroup]="staffForm">
+    <nz-form-item>
+        <nz-form-label nzSpan="5" nzRequired>Nom</nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Nom de Famille" 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> Profession </nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis">
+            <nz-select placeholder="Type de client" formControlName="profession">
+                @for (staffprofession of staff(); track staff.id) {
+                    <nz-option nzValue="{{staff.id}}" nzLabel="{{ providertype.label }}"></nz-option>
+                }
+            </nz-select>
+        </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-flex nzJustify="end">
+        <button nz-button nzType="primary" (click)="submitForm()">Valider</button>
+    </nz-flex>
+</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..ea72a05
--- /dev/null
+++ b/src/app/pages/staff/staff-add-form/staff-add-form.ts
@@ -0,0 +1,98 @@
+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 {
+  CreateProviderDto, CreateStaffDto,
+  GetProviderTypeDto,
+  ProvidertypesService, StaffsService
+} from "../../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
+
+@Component({
+  selector: 'app-staff-add-form',
+  imports: [FormsModule, NzButtonComponent, NzColDirective, NzFlexDirective, NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzInputDirective, NzOptionComponent, NzRowDirective, NzSelectComponent, ReactiveFormsModule],
+  templateUrl: './staff-add-form.html',
+  styleUrl: './staff-add-form.css',
+})
+export class StaffAddForm {
+    private staffsService = inject(StaffsService);
+    private serviceprovidertypesService = inject(ProvidertypesService);
+    private notificationService = inject(NzNotificationService)
+
+
+    staffForm = new FormGroup({
+      lastname: new FormControl<string>(null, [Validators.required]),
+      firstname: new FormControl<string>(null, [Validators.required]),
+      profession: new FormControl<string>(null, [Validators.required]),
+      email: new FormControl<string>(null, [Validators.required]),
+      f4t2number: new FormControl<string>(null, [Validators.required]),
+      f4t2expiration: new FormControl<dateFns>(null, [Validators.required])
+    })
+
+    staffPost = signal<CreateStaffDto>(this.staffForm.value);
+    staffsLoading = signal<boolean>(false);
+
+    async submitForm() {
+      // Pour annuler si le formulaire est invalide
+      if (this.staffForm.invalid) return;
+
+      // Pour obtenir la valeur du formulaire
+      console.log(this.staffForm.getRawValue())
+      this.staffPost.set(this.staffForm.getRawValue())
+
+      await this.createProviders(this.staffPost().lastName, this.staffPost().firstName, this.staffPost().profession, this.staffPost().email, this.staffPost().f4T2NumberApproval, this.staffPost().f4T2ExpirationDate)
+      // Pour vider le formulaire
+      this.staffForm.reset()
+    }
+
+    async createProviders(lastname: string, firstname: string, profession: string, email: string, f4t2number: string, f4t2expiration: dateFns)
+    {
+      this.staffsLoading.set(true);
+
+      const staffValue = {
+        lastname: lastname,
+        firstname: firstname,
+        profession: profession,
+        email: email,
+        f4t2number: f4t2number,
+        f4t2expiration: f4t2expiration
+      }
+
+      try {
+        const staff = await firstValueFrom(this.staffsService.createStaffEndpoint(staffValue));
+        this.staffPost.set(staff);
+        console.log(staff);
+      } 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.staffsLoading.set(false);
+    }
+
+    providerTypes = signal<GetProviderTypeDto[]>([])
+
+    async ngOnInit() {
+      await this.fetchCustomerTypes()
+    }
+
+    async fetchCustomerTypes() {
+      this.staffsLoading.set(true);
+      try {
+        const providerType = await firstValueFrom(this.serviceprovidertypesService.getAllProviderTypesEndpoint())
+        this.providerTypes.set(providerType)
+      } catch (e) {
+        this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
+      }
+
+      this.staffsLoading.set(false);
+    }
+}
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 {
+
+}
diff --git a/src/app/pages/staff/staff.html b/src/app/pages/staff/staff.html
index d0db3ca..3cf8b5b 100644
--- a/src/app/pages/staff/staff.html
+++ b/src/app/pages/staff/staff.html
@@ -1 +1,11 @@
-<p>staff<p>
+<app-create-staff-modal (triggerCreated)="fetchStaff()" />
+
+<div class="card">
+    <div nz-row [nzGutter]="10" style="gap: 30px">
+        @for (staff of staffs(); track staff.id)
+        {
+            <!-- Passage de la donnée du parent vers l'enfant + signal à émettre -->
+            <app-staff-card [staff]="staff" (triggerEdited)="fetchStaff()" />
+        }
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/pages/staff/staff.ts b/src/app/pages/staff/staff.ts
index 3e8bbca..942e192 100644
--- a/src/app/pages/staff/staff.ts
+++ b/src/app/pages/staff/staff.ts
@@ -1,16 +1,40 @@
-import { Component } from '@angular/core';
+import {Component, inject, signal} from '@angular/core';
 import {StaffCardForm} from "./staff-card-form/staff-card-form";
 import {StaffGetAll} from "./staff-get-all/staff-get-all";
+import {NzRowDirective} from "ng-zorro-antd/grid";
+import {GetProviderDto, GetStaffDto, ServiceprovidersService, StaffsService} from "../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {Router} from "@angular/router";
+import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-staff',
-    imports: [
-        StaffCardForm,
-        StaffGetAll
-    ],
+    imports: [StaffCardForm, StaffGetAll, NzRowDirective,],
   templateUrl: './staff.html',
   styleUrl: './staff.css',
 })
 export class Staff {
+    private staffsService = inject(StaffsService);
+    private notificationService = inject(NzNotificationService)
 
+    router = inject(Router);
+
+    staffs = signal<GetStaffDto[]>([]);
+    staffsLoading = signal<boolean>(false);
+
+    async ngOnInit() {
+        await this.fetchStaff();
+    }
+
+    async fetchStaff() {
+        this.staffsLoading.set(true);
+        try {
+            const staff = await firstValueFrom(this.staffsService.getAllStaffsEndpoint())
+            this.staffs.set(staff)
+        } catch (e) {
+            this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
+        }
+
+        this.staffsLoading.set(false);
+    }
 }
diff --git a/src/app/services/api/model/create-staff-dto.ts b/src/app/services/api/model/create-staff-dto.ts
index 2e1ac8e..e0ec092 100644
--- a/src/app/services/api/model/create-staff-dto.ts
+++ b/src/app/services/api/model/create-staff-dto.ts
@@ -15,6 +15,6 @@ export interface CreateStaffDto {
     profession?: string | null;
     email?: string | null;
     f4T2NumberApproval?: string | null;
-    f4T2ExpirationDate?: string;
+    f4T2ExpirationDate?: dateFns;
 }