diff --git a/src/app/pages/customers/customers-get-all/customers-get-all.css b/src/app/pages/customers/customers-get-all/customers-get-all.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/customers/customers-get-all/customers-get-all.html b/src/app/pages/customers/customers-get-all/customers-get-all.html
new file mode 100644
index 0000000..cbe0385
--- /dev/null
+++ b/src/app/pages/customers/customers-get-all/customers-get-all.html
@@ -0,0 +1,15 @@
+<div class="card">
+    <div nz-row [nzGutter]="10" style="gap: 30px">
+        @for (customer of customers(); track customer.id)
+        {
+            <nz-card style="width:400px;">
+                <h2 style="text-align: center; font-weight: bold">Utilisateur n°{{ customer.id }}</h2>
+                <p>Nom/Prénom : {{ customer.name }} {{ customer.firstName }}</p>
+                <p>Téléphone : {{ customer.phone }}</p>
+                <p>Email : {{ customer.email }}</p>
+                <p>Adresse : {{ customer.address }}</p>
+                <p>Note : {{ customer.note }}</p>
+            </nz-card>
+        }
+    </div>
+</div>
diff --git a/src/app/pages/customers/customers-get-all/customers-get-all.ts b/src/app/pages/customers/customers-get-all/customers-get-all.ts
new file mode 100644
index 0000000..69def45
--- /dev/null
+++ b/src/app/pages/customers/customers-get-all/customers-get-all.ts
@@ -0,0 +1,36 @@
+import {Component, inject, signal} from '@angular/core';
+import {Router} from "@angular/router";
+import {firstValueFrom} from "rxjs";
+import {NzNotificationService} from "ng-zorro-antd/notification";
+
+@Component({
+  selector: 'app-customers-get-all',
+  imports: [],
+  templateUrl: './customers-get-all.html',
+  styleUrl: './customers-get-all.css',
+})
+export class CustomersGetAll {
+    private customerService = inject(CustomersService);
+    private notificationService = inject(NzNotificationService)
+
+    router = inject(Router);
+
+    customers = signal<GetCustomerDto[]>([]);
+    customersLoading = signal<boolean>(false);
+    async ngOnInit() {
+        await this.fetchCustomers();
+    }
+
+    async fetchCustomers() {
+        this.customersLoading.set(true);
+        try {
+            const customer = await firstValueFrom(this.customerService.getAllCustomersEndpoint())
+            this.customers.set(customer)
+        } catch (e)
+        {
+            this.notificationService.error('Erreur', 'Erreur de communication avec l\'API');
+        }
+
+        this.customersLoading.set(false);
+    }
+}
diff --git a/src/app/pages/customers/customers.html b/src/app/pages/customers/customers.html
index 5877c09..caf0405 100644
--- a/src/app/pages/customers/customers.html
+++ b/src/app/pages/customers/customers.html
@@ -1 +1,3 @@
 <app-customers-card-form/>
+
+<app-customers-get-all/>
diff --git a/src/app/pages/customers/customers.ts b/src/app/pages/customers/customers.ts
index 0ec6fce..63e241a 100644
--- a/src/app/pages/customers/customers.ts
+++ b/src/app/pages/customers/customers.ts
@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import {CustomersCardForm} from "./customers-card-form/customers-card-form";
+import {CustomersGetAll} from "./customers-get-all/customers-get-all";
 
 @Component({
   selector: 'app-customers',
     imports: [
-        CustomersCardForm
+        CustomersCardForm,
+        CustomersGetAll
     ],
   templateUrl: './customers.html',
   styleUrl: './customers.css',
diff --git a/src/app/pages/providers/providers-get-all/providers-get-all.css b/src/app/pages/providers/providers-get-all/providers-get-all.css
new file mode 100644
index 0000000..e69de29
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
new file mode 100644
index 0000000..7e60329
--- /dev/null
+++ b/src/app/pages/providers/providers-get-all/providers-get-all.html
@@ -0,0 +1 @@
+<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
new file mode 100644
index 0000000..084ed18
--- /dev/null
+++ b/src/app/pages/providers/providers-get-all/providers-get-all.ts
@@ -0,0 +1,36 @@
+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 {
+    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);
+    }
+}
diff --git a/src/app/pages/providers/providers.html b/src/app/pages/providers/providers.html
index 294327f..1cae579 100644
--- a/src/app/pages/providers/providers.html
+++ b/src/app/pages/providers/providers.html
@@ -1 +1,3 @@
-<app-providers-card-form/>
\ No newline at end of file
+<app-providers-card-form/>
+
+<app-providers-get-all/>
\ No newline at end of file
diff --git a/src/app/pages/providers/providers.ts b/src/app/pages/providers/providers.ts
index fe238ff..df16827 100644
--- a/src/app/pages/providers/providers.ts
+++ b/src/app/pages/providers/providers.ts
@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import {ProvidersCardForm} from "./providers-card-form/providers-card-form";
+import {ProvidersGetAll} from "./providers-get-all/providers-get-all";
 
 @Component({
   selector: 'app-providers',
     imports: [
-        ProvidersCardForm
+        ProvidersCardForm,
+        ProvidersGetAll
     ],
   templateUrl: './providers.html',
   styleUrl: './providers.css',
diff --git a/src/app/pages/staff/staff-get-all/staff-get-all.css b/src/app/pages/staff/staff-get-all/staff-get-all.css
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/pages/staff/staff-get-all/staff-get-all.html b/src/app/pages/staff/staff-get-all/staff-get-all.html
new file mode 100644
index 0000000..00bc9ae
--- /dev/null
+++ b/src/app/pages/staff/staff-get-all/staff-get-all.html
@@ -0,0 +1 @@
+<p>staff-get-all works!</p>
diff --git a/src/app/pages/staff/staff-get-all/staff-get-all.ts b/src/app/pages/staff/staff-get-all/staff-get-all.ts
new file mode 100644
index 0000000..27702c8
--- /dev/null
+++ b/src/app/pages/staff/staff-get-all/staff-get-all.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-staff-get-all',
+  imports: [],
+  templateUrl: './staff-get-all.html',
+  styleUrl: './staff-get-all.css',
+})
+export class StaffGetAll {
+
+}
diff --git a/src/app/pages/staff/staff.html b/src/app/pages/staff/staff.html
index 76b3738..614ec0e 100644
--- a/src/app/pages/staff/staff.html
+++ b/src/app/pages/staff/staff.html
@@ -1 +1,3 @@
 <app-staff-card-form/>
+
+<app-staff-get-all/>
diff --git a/src/app/pages/staff/staff.ts b/src/app/pages/staff/staff.ts
index a3b6982..3e8bbca 100644
--- a/src/app/pages/staff/staff.ts
+++ b/src/app/pages/staff/staff.ts
@@ -1,10 +1,12 @@
 import { Component } from '@angular/core';
 import {StaffCardForm} from "./staff-card-form/staff-card-form";
+import {StaffGetAll} from "./staff-get-all/staff-get-all";
 
 @Component({
   selector: 'app-staff',
     imports: [
-        StaffCardForm
+        StaffCardForm,
+        StaffGetAll
     ],
   templateUrl: './staff.html',
   styleUrl: './staff.css',