diff --git a/.env.exemple b/.env.exemple
deleted file mode 100644
index 3452b5c..0000000
--- a/.env.exemple
+++ /dev/null
@@ -1 +0,0 @@
-VITE_API_URL=
\ No newline at end of file
diff --git a/src/components/PendingMembers/PendingMembers.jsx b/src/components/PendingMembers/PendingMembers.jsx
index 27dace2..8b43ca1 100644
--- a/src/components/PendingMembers/PendingMembers.jsx
+++ b/src/components/PendingMembers/PendingMembers.jsx
@@ -1,38 +1,61 @@
-import React from "react";
+import React, { useState, useEffect } from "react";
 import Button from "../ui/button/button";
 import styles from "./PendingMembers.module.css";
+import getInvalidUsers from "../../utils/users/getUserToValidate";
+import getUserById from "../../utils/users/getUserById";
 
 function pendingMembers() {
-  const pendingMembers = [
-    { name: "Antoine Ordonneau" },
-    { name: "Giovanni Josserand" },
-    { name: "Quentin T'Jampens" },
-    { name: "Quentin T'Jampens" },
-    { name: "Quentin T'Jampens" },
-    { name: "Quentin T'Jampens" },
-    { name: "Quentin T'Jampens" }
-  ];
+  const [pendingMembers, setPendingMembers] = useState([]);
+  const [loading, setLoading] = useState(true);
 
-  const handleValidate = (name) => {
-    console.log(`Valider ${name}`);
+  useEffect(() => {
+    const fetchPendingMembers = async () => {
+      const userIds = await getInvalidUsers();
+      console.log("IDs reçus :", userIds);
+
+      if (userIds && userIds.length > 0) {
+        const usersWithDetails = await Promise.all(
+    userIds.map(async (id) => {
+    const user = await getUserById(id);
+    console.log("Utilisateur récupéré :", user);
+    return user;
+  })
+);
+
+        console.log("Utilisateurs avec détails :", usersWithDetails);
+        setPendingMembers(usersWithDetails.filter(user => user !== null)); 
+      }
+      setLoading(false);
+    };
+    fetchPendingMembers();
+  }, []);
+
+  const handleValidate = async (id) => {
+    console.log(`Valider l'utilisateur ID: ${id}`);
+    setPendingMembers(pendingMembers.filter(member => member.id !== id));
   };
 
-  const handleReject = (name) => {
-    console.log(`Refuser ${name}`);
+  const handleReject = async (id) => {
+    console.log(`Refuser l'utilisateur ID: ${id}`);
+    setPendingMembers(pendingMembers.filter(member => member.id !== id));
   };
 
+  if (loading) {
+    return <div>Chargement des membres en attente...</div>;
+  }
+
   return (
     <div className={`${styles.rightBlock} glassCard`}>
       <h2>Membres en attente de validation</h2>
       <div className={styles.membersContainer}>
-        {pendingMembers.map((member, index) => (
-          <div key={index} className={`glassCard ${styles.memberCard}`}>
-            <p>{member.name}</p>
+        {pendingMembers.map((member) => (
+          <div key={member.id} className={`glassCard ${styles.memberCard}`}>
+            <p>{member.name} {member.lastname}</p> 
             <div className={styles.buttonGroup}>
-              <Button onClick={() => handleValidate(member.name)} variant="primary">
+              <Button onClick={() => handleValidate(member.id)} variant="primary">
                 Valider
               </Button>
-              <Button onClick={() => handleReject(member.name)} variant="danger">
+              <Button onClick={() => handleReject(member.id)} variant="danger">
                 Refuser
               </Button>
             </div>
@@ -42,5 +65,4 @@ function pendingMembers() {
     </div>
   );
 }
-
 export default pendingMembers;
diff --git a/src/utils/users/deleteUser.js b/src/utils/users/deleteUser.js
new file mode 100644
index 0000000..ff88d96
--- /dev/null
+++ b/src/utils/users/deleteUser.js
@@ -0,0 +1,22 @@
+export default async function deleteUser(userId) {
+  try {
+    const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/${userId}`, {
+      method: 'DELETE',
+      credentials: 'include',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!res.ok) {
+      throw new Error(`Erreur serveur : ${res.status}`);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (err) {
+    console.error('Erreur lors de la suppression :', err);
+    return null;
+  }
+}
diff --git a/src/utils/users/getUserToValidate.js b/src/utils/users/getUserToValidate.js
new file mode 100644
index 0000000..f619c0b
--- /dev/null
+++ b/src/utils/users/getUserToValidate.js
@@ -0,0 +1,21 @@
+export default async function getUserToValidate() {
+    try {
+        const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/invalid`, {
+            method: 'GET',
+            credentials: 'include',
+            headers: {
+                'Accept': 'application/json'
+            }
+        });
+
+        if (!res.ok) {
+            throw new Error(`Erreur serveur : ${res.status}`);
+        }
+
+        const data = await res.json();
+        return data;
+    } catch (err) {
+        console.error('Erreur :', err);
+        return null;
+    }
+}
\ No newline at end of file
diff --git a/src/utils/users/validateUser b/src/utils/users/validateUser
new file mode 100644
index 0000000..f366a2b
--- /dev/null
+++ b/src/utils/users/validateUser
@@ -0,0 +1,22 @@
+export default async function validateUser(userId) {
+  try {
+    const res = await fetch(`http://${import.meta.env.VITE_API_URL}/api/users/${userId}/validate`, {
+      method: 'POST',
+      credentials: 'include',
+      headers: {
+        'Accept': 'application/json',
+        'Content-Type': 'application/json',
+      },
+    });
+
+    if (!res.ok) {
+      throw new Error(`Erreur serveur : ${res.status}`);
+    }
+
+    const data = await res.json();
+    return data;
+  } catch (err) {
+    console.error('Erreur lors de la validation :', err);
+    return null;
+  }
+}