diff --git a/src/pages/Volunteers/VolunteersPage.jsx b/src/pages/Volunteers/VolunteersPage.jsx
deleted file mode 100644
index 169275a..0000000
--- a/src/pages/Volunteers/VolunteersPage.jsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import { useState, useEffect } from "react";
-import styles from "./VolunteersPage.module.css";
-import VolunteerCard from "./VolunteerCard.jsx";
-import getAllUser from "../../utils/users/getAllUsers.js";
-import ToolBar from "../../components/ToolBar/ToolBar.jsx";
-import filter from "../../utils/filter.js";
-import getUserById from "../../utils/users/getUserById.js";
-
-function VolunteerPage() {
-    const [filters, setFilters] = useState({
-        alphabetical: "asc",
-        yearOrder: "desc",
-    });
-    const [users, setUsers] = useState([]);
-
-    useEffect(() => {
-        (async () => {
-            const result = await getAllUser();
-
-            if (result.status !== 200 || !Array.isArray(result.data)) {
-                console.error("Erreur lors du chargement des utilisateurs", result);
-                return;
-            }
-
-            const usersData = await Promise.all(
-                result.data.map(async (id) => {
-                    const res = await getUserById(id);
-
-                    if (res.status === 200) {
-                        return res.data;
-                    }
-                    console.warn(`Utilisateur ${id} non récupéré`, res.status);
-                    return null;
-                })
-            );
-
-            setUsers(usersData.filter(Boolean));
-        })();
-    }, []);
-
-    return (
-        <div className={styles.container}>
-            <ToolBar setFilters={setFilters} filters={filters} showCreate={false} />
-            <div className={styles.usersList}>
-                {filter(users, filters, "user").map((user, index) => (
-                    <VolunteerCard key={user.id ?? index} user={user} />
-                ))}
-            </div>
-        </div>
-    );
-}
-
-export default VolunteerPage;
diff --git a/src/pages/Volunteers/VolunteersPage.tsx b/src/pages/Volunteers/VolunteersPage.tsx
new file mode 100644
index 0000000..d234833
--- /dev/null
+++ b/src/pages/Volunteers/VolunteersPage.tsx
@@ -0,0 +1,68 @@
+import { useEffect, useState } from "react";
+import styles from "./VolunteersPage.module.css";
+import VolunteerCard from "./components/VolunteersCard/VolunteerCard";
+import getAllUser from "../../utils/users/getAllUsers";
+import ToolBar from "../../components/ToolBar/ToolBar";
+import filter from "../../utils/filter";
+import getUserById from "../../utils/users/getUserById";
+import User from "./interfaces/user.interface";
+
+interface Filters {
+    alphabetical: "asc" | "desc";
+    yearOrder: "asc" | "desc";
+}
+
+const VolunteerPage: React.FC = () => {
+    const [filters, setFilters] = useState<Filters>({
+        alphabetical: "asc",
+        yearOrder: "desc",
+    });
+
+    const [users, setUsers] = useState<User[]>([]);
+
+    useEffect(() => {
+        const fetchUsers = async (): Promise<void> => {
+            const result = await getAllUser();
+
+            if (result.status !== 200 || !Array.isArray(result.data)) {
+                console.error("Erreur lors du chargement des utilisateurs", result);
+                return;
+            }
+
+            const usersData = await Promise.all(
+                result.data.map(async (id: number): Promise<User | null> => {
+                    const res = await getUserById(id);
+
+                    if (res.status === 200) {
+                        return res.data as User;
+                    }
+
+                    console.warn(`Utilisateur ${id} non récupéré`, res.status);
+                    return null;
+                })
+            );
+
+            setUsers(usersData.filter((user: any): user is User => user !== null));
+        };
+
+        fetchUsers();
+    }, []);
+
+    return (
+        <div className={styles.container}>
+            <ToolBar
+                setFilters={setFilters}
+                filters={filters}
+                showCreate={false}
+            />
+
+            <div className={styles.usersList}>
+                {filter(users, filters, "user").map((user: User) => (
+                    <VolunteerCard key={user.id} user={user} />
+                ))}
+            </div>
+        </div>
+    );
+};
+
+export default VolunteerPage;
diff --git a/src/router.js b/src/router.js
index b9137b0..9d40c88 100644
--- a/src/router.js
+++ b/src/router.js
@@ -3,7 +3,7 @@ import Layout from "./layout.jsx";
 import HomePage from "./pages/Home/HomePage";
 import LoginPage from "./pages/Login/LoginPage";
 import RegisterPage from "./pages/Register/RegisterPage.jsx";
-import VolunteersPage from "./pages/Volunteers/VolunteersPage";
+import VolunteersPage from "./pages/Volunteers/VolunteersPage.tsx";
 import ProfilePage from "./pages/Profile/ProfilePage";
 import EventsPage from "./pages/Events/EventsPage.jsx";
 import AdminPage from "./pages/Admin/AdminPage.jsx";