diff --git a/front_end/src/classes.tsx b/front_end/src/classes.tsx
index 4021ee2..739e1cf 100644
--- a/front_end/src/classes.tsx
+++ b/front_end/src/classes.tsx
@@ -1,22 +1,29 @@
 export type Groupe = "Entrainement" | "Competition" | "Loisir"| "";
+export type Role = "Admin" | "Athlete" | "Coach";
 
 export class User{
     id!: number;
     nom!: String;
     sessions: Session[] = []; //nb: Admin liaison non symétrique /!\
+    role!: Role;
 }
 
 export class Admin extends User{
+    role!: Role;
 
 }
 
 export class Athlete extends User{
     nom!: String;
     groupe!: Groupe;
+    role!: Role;
+
 
 }
 
 export class Coach extends User{
+    nom!: String;
+    role!: Role;
 
 }
 
@@ -49,6 +56,7 @@ export function getUserTest():User{
     const s3 = new Session();
     user.id = 0;
     user.nom = "Emilien-Yee NootNoot";
+    user.role = "Coach"
     s1.creneau = new Date();
     s1.id = 1;
     s1.name = "Entrainement Frisbee"
@@ -144,5 +152,10 @@ export function getUserTest():User{
     user.sessions.push(s1);
     user.sessions.push(s2);
     user.sessions.push(s3);
+
+    athlete1.role = "Athlete";
+    athlete2.role = "Athlete";
+    athlete3.role = "Athlete";
+
     return user;
 }
diff --git a/front_end/src/components/ressourceList.tsx b/front_end/src/components/ressourceList.tsx
index 66e767f..51ef72b 100644
--- a/front_end/src/components/ressourceList.tsx
+++ b/front_end/src/components/ressourceList.tsx
@@ -1,12 +1,10 @@
-import { Athlete, Activite } from "../classes";
+import { Athlete, Activite, Coach } from "../classes";
 
-type Props = {
-    athletes: Athlete[];
-    activites: Activite[];
+type AthleteListProps = { athletes: Athlete[] };
+type ActiviteListProps = { activites: Activite[] };
+type CoachListProps = { coachs: Coach[] };
 
-};
-
-function AthleteList({ athletes }: Props) {
+function AthleteList({ athletes }: AthleteListProps) {
     return (
         <ul className="AthleteList">
             {athletes.map((athlete) => (
@@ -19,7 +17,7 @@ function AthleteList({ athletes }: Props) {
     );
 }
 
-function ActiviteList({ activites }: Props) {
+function ActiviteList({ activites }: ActiviteListProps) {
     return (
         <ul className="ActiviteList">
             {activites.map((activite) => (
@@ -39,4 +37,19 @@ function ActiviteList({ activites }: Props) {
     );
 }
 
-export { AthleteList, ActiviteList };
\ No newline at end of file
+function CoachList({ coachs }: CoachListProps) {
+    return (
+        <ul className="CoachList">
+            {coachs.map((coachs) => (
+                <li key={coachs.id}>
+                    <div>
+                        <strong>Nom:</strong> {coachs.nom}
+                    </div>
+
+                </li>
+            ))}
+        </ul>
+    );
+}
+
+export { AthleteList, ActiviteList, CoachList };
\ No newline at end of file
diff --git a/front_end/src/components/ressourcePanel.tsx b/front_end/src/components/ressourcePanel.tsx
index 6109e9a..1e99690 100644
--- a/front_end/src/components/ressourcePanel.tsx
+++ b/front_end/src/components/ressourcePanel.tsx
@@ -1,13 +1,15 @@
 import { useState } from "react";
 import { useLocalData } from "../context/useLocalData";
-import { AthleteList, ActiviteList } from "./ressourceList";
-import { Activite, Athlete } from "../classes";
-// import { Dropdown } from "react-bootstrap"; // not used
+import { AthleteList, ActiviteList, CoachList} from "./ressourceList";
+import { Activite, Athlete, Coach } from "../classes";
 
 export default function RessourcePanel() {
     const { user } = useLocalData();
     const [showAthletes, setShowAthletes] = useState(false);
     const [showActivites, setShowActivites] = useState(false);
+    const [showCoach,setShowCoach] = useState(false);
+    console.log("Rôle utilisateur:", user.role);
+    if (user.role === "Athlete") return null;
 
 
     const athleteMap: Map<number, Athlete> = new Map();
@@ -22,13 +24,31 @@ export default function RessourcePanel() {
     });
     const allActivites: Activite[] = Array.from(activiteMap.values());
 
+    const coachMap: Map<number, Coach> = new Map();
+    user.sessions.forEach(session => {
+        if (session.coach) {
+            coachMap.set(session.coach.id, session.coach);
+        }
+    });
+
+    const allCoachs: Coach[] = Array.from(coachMap.values());
+
     function onAthletesClick(): void {
         setShowAthletes(prev => !prev);
         setShowActivites(false); 
+        setShowCoach(false);
     }
     function onActivitiesClick(): void {
         setShowActivites(prev => !prev);
         setShowAthletes(false);
+        setShowCoach(false);
+
+    }
+    function onCoachClick(): void {
+        setShowCoach(prev => !prev);
+        setShowActivites(false); 
+        setShowAthletes(false);
+
     }
 
 
@@ -39,28 +59,38 @@ export default function RessourcePanel() {
                     const v = (e.target as HTMLSelectElement).value;
                     if (v === "athletes") onAthletesClick();
                     else if (v === "activites") onActivitiesClick();
-                    else {setShowAthletes(false); setShowActivites(false);
-                    }
+                    else if (v === "coach") onCoachClick();
+                    else {setShowAthletes(false); setShowActivites(false); setShowCoach(false)}
                 }}>
                 <option>Choissisez la ressource</option>
                 <option value="athletes">Athlètes</option>
                 <option value="activites">Activités</option>
+                {user.role === "Admin" && <option value="coach"> Coach</option>}
             </select>
 
             {showAthletes && (
                 <div className="edt_athletes_panel">
                     <h3>Liste des athlètes</h3>
-                    <AthleteList athletes={allAthletes} activites={[]}/>
+                    <AthleteList athletes={allAthletes} />
                 </div>
             )}
 
             {showActivites && (
                 <div className="edt_activites_panel">
                     <h3>Liste des activités</h3>
-                    <ActiviteList athletes={[]} activites={allActivites} />
+                    <ActiviteList activites={allActivites} />
                 </div>
             )}
 
+            {showCoach && (
+                <div className="edt_coach_panel">
+                    <h3>Liste des coachs</h3>
+                    <CoachList coachs={allCoachs} />
+                </div>
+            )}
+
+
+
         </div>
     );
 }
diff --git a/front_end/src/components/test_app.tsx b/front_end/src/components/test_app.tsx
new file mode 100644
index 0000000..1e13241
--- /dev/null
+++ b/front_end/src/components/test_app.tsx
@@ -0,0 +1,20 @@
+import React, { useState } from "react";
+import { getUserTest, User, Session } from "../classes";
+import RessourcePanel from "./ressourcePanel";
+import { LocalDataContext } from "../context/LocalDataContext";
+
+export default function TestApp() {
+  const initialUser = getUserTest();
+  initialUser.role = "Athlete"; // Change role here for testing
+  const [user, setUser] = useState<User>(initialUser);
+  const [sessions, setSessions] = useState<Session[]>(initialUser.sessions || []);
+  const [users, setUsers] = useState<User[]>([initialUser]);
+
+  return (
+    <LocalDataContext.Provider value={{ user, setUser, sessions, setSessions, users, setUsers }}>
+      <h1>Test Utilisateur</h1>
+      <div>Nom: {String(user.nom)}</div>
+      <RessourcePanel />
+    </LocalDataContext.Provider>
+  );
+}