diff --git a/src/app/pages/providers/providers-card/providers-card.ts b/src/app/pages/providers/providers-card/providers-card.ts
index 71c7265..8e52f43 100644
--- a/src/app/pages/providers/providers-card/providers-card.ts
+++ b/src/app/pages/providers/providers-card/providers-card.ts
@@ -5,13 +5,7 @@ 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";
-import {
-  CustomersService,
-  GetCustomerDto, GetProviderDto,
-  ServiceprovidersService,
-  UpdateCustomerDto,
-  UpdateProviderDto
-} from "../../../services/api";
+import {GetProviderDto, ServiceprovidersService, UpdateProviderDto} from "../../../services/api";
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {firstValueFrom} from "rxjs";
 
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
index 0a89b31..835acb8 100644
--- a/src/app/pages/staff/create-staff-modal/create-staff-modal.ts
+++ b/src/app/pages/staff/create-staff-modal/create-staff-modal.ts
@@ -1,5 +1,5 @@
 import {Component, output} from '@angular/core';
-import {StaffAddForm} from "../staff-add-form/staff-add-form";
+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";
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
index b5a5e87..678fcbb 100644
--- a/src/app/pages/staff/staff-add-form/staff-add-form.html
+++ b/src/app/pages/staff/staff-add-form/staff-add-form.html
@@ -2,25 +2,21 @@
     <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">
+            <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">
+            <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-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>
+            <input nz-input placeholder="Profession" formControlName="profession">
         </nz-form-control>
     </nz-form-item>
 
@@ -31,6 +27,20 @@
         </nz-form-control>
     </nz-form-item>
 
+    <nz-form-item>
+        <nz-form-label nzSpan="5" 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="5" nzRequired>Exp. F4T2</nz-form-label>
+        <nz-form-control nzErrorTip="Ce champ est requis">
+            <input nz-input placeholder="Date d'expiration F4T2" formControlName="f4T2ExpirationDate">
+        </nz-form-control>
+    </nz-form-item>
+
     <nz-flex nzJustify="end">
         <button nz-button nzType="primary" (click)="submitForm()">Valider</button>
     </nz-flex>
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
index ea72a05..9f96462 100644
--- a/src/app/pages/staff/staff-add-form/staff-add-form.ts
+++ b/src/app/pages/staff/staff-add-form/staff-add-form.ts
@@ -5,34 +5,29 @@ 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 {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],
+  imports: [FormsModule, NzButtonComponent, NzColDirective, NzFlexDirective, NzFormControlComponent, NzFormDirective, NzFormItemComponent, NzFormLabelComponent, NzInputDirective, NzRowDirective, ReactiveFormsModule],
   templateUrl: './staff-add-form.html',
   styleUrl: './staff-add-form.css',
 })
-export class StaffAddForm {
+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])
+        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]),
+        f4T2NumberApproval: new FormControl<string>(null, [Validators.required]),
+        f4T2ExpirationDate: new FormControl<Date>(null, [Validators.required])
     })
 
     staffPost = signal<CreateStaffDto>(this.staffForm.value);
@@ -46,31 +41,30 @@ export class StaffAddForm {
       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)
+      await this.createStaff(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)
+    async createStaff(lastname: string, firstname: string, profession: string, email: string, f4t2number: string, f4t2expiration: Date)
     {
       this.staffsLoading.set(true);
 
-      const staffValue = {
-        lastname: lastname,
-        firstname: firstname,
-        profession: profession,
-        email: email,
-        f4t2number: f4t2number,
-        f4t2expiration: f4t2expiration
-      }
+        const staffValue: CreateStaffDto = {
+            lastName: lastname,
+            firstName: firstname,
+            profession: profession,
+            email: email,
+            f4T2NumberApproval: f4t2number,
+            f4T2ExpirationDate: f4t2expiration
+        }
 
       try {
         const staff = await firstValueFrom(this.staffsService.createStaffEndpoint(staffValue));
-        this.staffPost.set(staff);
+          this.staffPost.set(staff as unknown as CreateStaffDto);
         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)');
       }
@@ -96,3 +90,5 @@ export class StaffAddForm {
       this.staffsLoading.set(false);
     }
 }
+
+export default StaffAddForm
diff --git a/src/app/pages/staff/staff-card/staff-card.html b/src/app/pages/staff/staff-card/staff-card.html
index 3aeccb7..8be06c6 100644
--- a/src/app/pages/staff/staff-card/staff-card.html
+++ b/src/app/pages/staff/staff-card/staff-card.html
@@ -1 +1,39 @@
-<p>staff-card works!</p>
+@if (edit() == false) {
+    <nz-card style="width:400px;" [nzActions]="[edit, delete]">
+        <h2 style="text-align: center; font-weight: bold">Staff n°{{ staff().id }}</h2>
+        <p>Nom : {{ staff().lastName }} {{ staff().firstName }}</p>
+        <p>Profession : {{ staff().profession }}</p>
+        <p>Email : {{ staff().email }}</p>
+        <p>N° F4T2 : {{ staff().f4T2NumberApproval }}</p>
+        <p>Expiration F4T2 : {{ staff().f4T2ExpirationDate }}</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]="staffForm">
+            <nz-form-item>
+                <nz-form-label nzSpan="5" nzRequired> N° F4T2 </nz-form-label>
+                <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
+                    <input nz-input placeholder="N° F4T2" formControlName="f4T2NumberApproval">
+                </nz-form-control>
+            </nz-form-item>
+            <nz-form-item>
+                <nz-form-label nzSpan="5" nzRequired> Exp. F4T2 </nz-form-label>
+                <nz-form-control nzSpan="22" nzErrorTip="Ce champ est requis !">
+                    <input nz-input placeholder="Expiration F4T2" formControlName="f4T2ExpirationDate">
+                </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/staff/staff-card/staff-card.ts b/src/app/pages/staff/staff-card/staff-card.ts
index 783d736..75367ad 100644
--- a/src/app/pages/staff/staff-card/staff-card.ts
+++ b/src/app/pages/staff/staff-card/staff-card.ts
@@ -1,11 +1,89 @@
-import { Component } from '@angular/core';
+import {Component, inject, input, output, signal} from '@angular/core';
+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";
+import {FormControl, FormGroup, ReactiveFormsModule, Validators} from "@angular/forms";
+import {GetStaffDto, StaffsService, UpdateStaffDto} from "../../../services/api";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+import {firstValueFrom} from "rxjs";
 
 @Component({
   selector: 'app-staff-card',
-  imports: [],
+    imports: [
+        NzCardComponent,
+        NzColDirective,
+        NzFormControlComponent,
+        NzFormDirective,
+        NzFormItemComponent,
+        NzFormLabelComponent,
+        NzIconDirective,
+        NzInputDirective,
+        NzRowDirective,
+        ReactiveFormsModule
+    ],
   templateUrl: './staff-card.html',
   styleUrl: './staff-card.css',
 })
 export class StaffCard {
+    private staffsService = inject(StaffsService);
+    private notificationService = inject(NzNotificationService)
 
+    staffEdit = signal<UpdateStaffDto>(null);
+    staffsLoading = signal<boolean>(false);
+
+    staffForm = new FormGroup({
+        f4T2NumberApproval: new FormControl<string>(null, [Validators.required]),
+        f4T2ExpirationDate: new FormControl<string>(null, [Validators.required]),
+    })
+
+    async submitForm() {
+        this.staffsLoading.set(true);
+
+        const staffValue: UpdateStaffDto = {
+            f4T2NumberApproval: this.staffForm.value.f4T2NumberApproval,
+            f4T2ExpirationDate: this.staffForm.value.f4T2ExpirationDate,
+        }
+
+        try {
+            const staff = await firstValueFrom(this.staffsService.updateStaffRequest(this.staff().id, staffValue));
+            this.staffEdit.set(staff as unknown as UpdateStaffDto);
+            console.log(staff);
+            this.staffForm.reset();
+            this.edit.set(false);
+            this.triggerEdited.emit();
+        } catch (e) {
+            this.notificationService.error('Erreur', '(ou Erreur de communication avec l\'API)');
+        }
+
+        this.staffsLoading.set(false);
+    }
+
+    staff = input<GetStaffDto>(null);
+    edit = signal(false)
+    triggerEdited = output<void>();
+
+    protected Edit() {
+        this.edit.set(true)
+    }
+
+    protected Back() {
+        this.edit.set(false)
+        this.staffForm.reset();
+    }
+
+    async Delete() {
+        this.staffsLoading.set(true);
+
+        try {
+            await firstValueFrom(this.staffsService.deleteStaffEndpoint(this.staff().id));
+            this.staffForm.reset();
+            this.triggerEdited.emit();
+        } catch (e) {
+            this.notificationService.error('Erreur', '(ou Erreur de communication avec l\'API)');
+        }
+
+        this.staffsLoading.set(false);
+    }
 }
diff --git a/src/app/pages/staff/staff.ts b/src/app/pages/staff/staff.ts
index 942e192..3ef9ab5 100644
--- a/src/app/pages/staff/staff.ts
+++ b/src/app/pages/staff/staff.ts
@@ -1,15 +1,15 @@
 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 {GetStaffDto, StaffsService} from "../../services/api";
 import {NzNotificationService} from "ng-zorro-antd/notification";
 import {Router} from "@angular/router";
 import {firstValueFrom} from "rxjs";
+import {CreateStaffModal} from "./create-staff-modal/create-staff-modal";
+import {StaffCard} from "./staff-card/staff-card";
 
 @Component({
   selector: 'app-staff',
-    imports: [StaffCardForm, StaffGetAll, NzRowDirective,],
+    imports: [NzRowDirective, CreateStaffModal, StaffCard,],
   templateUrl: './staff.html',
   styleUrl: './staff.css',
 })
diff --git a/src/app/services/api/model/create-staff-dto.ts b/src/app/services/api/model/create-staff-dto.ts
index e0ec092..614f4b7 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?: dateFns;
+    f4T2ExpirationDate?: Date | null;
 }
 
diff --git a/src/app/services/api/model/method-impl-attributes.ts b/src/app/services/api/model/method-impl-attributes.ts
index 3e0ac0e..f9accd0 100644
--- a/src/app/services/api/model/method-impl-attributes.ts
+++ b/src/app/services/api/model/method-impl-attributes.ts
@@ -23,7 +23,6 @@ export const MethodImplAttributes = {
     NUMBER_42: 4,
     NUMBER_8: 8,
     NUMBER_16: 16,
-    NUMBER_32: 32,
     NUMBER_64: 64,
     NUMBER_128: 128,
     NUMBER_256: 256,