diff --git a/front_end/src/components/object/activite.tsx b/front_end/src/components/object/activite.tsx
index e69de29..07c9079 100644
--- a/front_end/src/components/object/activite.tsx
+++ b/front_end/src/components/object/activite.tsx
@@ -0,0 +1,34 @@
+import { useState } from 'react';
+import { Activite } from '../../classes';
+import '../style/objectList.css';
+
+type Props = {
+    activite: Activite
+}
+
+function ObjectActivite({activite}: Props) {
+    const [open, setOpen] = useState<boolean>(false);
+    
+    function handleOpen(): void {
+        setOpen(!open);
+    }
+    
+    return (
+        <div>
+            <div className="object" onClick={() => handleOpen()}>
+                <div>{activite.nom}</div>
+                <div>{activite.theme ? activite.theme : "Pas de thème défini pour l'activité"}</div>
+                <div>{activite.duree} min</div>
+            </div>
+            {open && activite.data && activite.data.size > 0 && (
+                <div className="object_details">
+                    {Array.from(activite.data.entries()).map(([key, value]) => (
+                        <div key={key}><strong>{key}:</strong> {value}</div>
+                    ))}
+                </div>
+            )}
+        </div>
+    )
+}
+
+export default ObjectActivite
\ No newline at end of file
diff --git a/front_end/src/components/ressourceList.tsx b/front_end/src/components/ressourceList.tsx
index c674b94..27acfaa 100644
--- a/front_end/src/components/ressourceList.tsx
+++ b/front_end/src/components/ressourceList.tsx
@@ -3,6 +3,7 @@ import { Athlete, Activite, Coach, Session, Ligne } from "../classes";
 import ObjectSession from "./object/session";
 import {calculStatsAthlete, niveauAlerte} from "../utils/athleteUtils";
 import {calculTempsDeJeuParLigne} from "../utils/ligneUtils";
+import ObjectActivite from "./object/activite";
 
 
 type AthleteListProps = { athletes: Athlete[], sessions: Session[]};
@@ -87,21 +88,12 @@ function AthleteList({ athletes, sessions }: AthleteListProps) {
 
 function ActiviteList({ activites }: ActiviteListProps) {
     return (
-        <ul className="ActiviteList">
+        <div className="list_object">
             {activites.map((activite) => (
-                <li key={activite.id}>
-                    <div>
-                        <strong>Nom:</strong> {activite.nom}
-                    </div>
-                    <div>
-                        <strong>Thème:</strong> {activite.theme}
-                    </div>
-                    <div>
-                        <strong>Durée:</strong> {activite.duree} minutes
-                    </div>
-                </li>
+                    <ObjectActivite activite={activite}/>
             ))}
-        </ul>
+            
+        </div>
     );
 }