diff --git a/src/components/homePage/eventItem.jsx b/src/components/homePage/eventItem.jsx
new file mode 100644
index 0000000..3540857
--- /dev/null
+++ b/src/components/homePage/eventItem.jsx
@@ -0,0 +1,25 @@
+import styles from "./eventList.module.css";
+import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
+import { useState } from "react";
+
+export default function EventItem({ eventGroup }) {
+
+    const [isVisible, setIsVisible] = useState(false);
+
+    return <div key={eventGroup.date} className={`${styles.eventGroup} glassBorder`} onClick={() => setIsVisible(!isVisible)}>
+        <div className={styles.eventTitle}>
+            <p className={styles.title}>{eventGroup.name}</p>
+            <p>{formatDateLetter(eventGroup.start)}</p>
+        </div>
+        {isVisible &&
+            <ul className={styles.eventDetails}>
+                {eventGroup.tasks.map((task, i) => (
+                    <li key={i} className={styles.eventTasks}>
+                        <p>- {task.name} - {task.description}</p>
+                        <p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
+                    </li>
+                ))}
+            </ul>
+        }
+    </div>
+}
\ No newline at end of file
diff --git a/src/components/homePage/eventList.jsx b/src/components/homePage/eventList.jsx
index 3d9b366..66ff366 100644
--- a/src/components/homePage/eventList.jsx
+++ b/src/components/homePage/eventList.jsx
@@ -1,6 +1,6 @@
 import { useMemo } from "react";
 import styles from "./eventList.module.css";
-import { formatDateLetter } from "../../utils/date/formatDateLetter.js";
+import EventItem from "./eventItem";
 
 
 function EventList({ events }) {
@@ -16,26 +16,11 @@ function EventList({ events }) {
         <div className={`${styles.glassCard} glassCard`}>
                 <h2>Liste des événements à venir</h2>
                 {sortedEvents.length > 0 ? (
-                    <ul className={styles.eventList}>
-                        {sortedEvents.map((eventGroup) => (
-                            <li key={eventGroup.date} className={`${styles.eventGroup} glassBorder`}>
-                                <div className={styles.eventTitle}>
-                                    <p className={styles.title}>{eventGroup.name}</p>
-                                    <p>{formatDateLetter(eventGroup.start)}</p>
-                                </div>
-                                {/* TODO: Faire une liste déroulante pour ne plus afficher les tache */}
-                                <ul className={styles.eventDetails}>
-                                    {eventGroup.tasks.map((task, i) => (
-                                        <li key={i} className={styles.eventTasks}>
-                                            <p>- {task.name} - {task.description}</p>
-                                            <p>{formatDateLetter(task.start)} - {formatDateLetter(task.end)}</p>
-                                        </li>
-                                    ))}
-                                </ul>
-                            </li>
-
+                    <div className={styles.eventList}>
+                        {sortedEvents.map((eventGroup, index) => (
+                            <EventItem eventGroup={eventGroup} key={index} />
                         ))}
-                    </ul>
+                    </div>
                 ) : (
                     <p>Aucun événement planifié pour l'instant.</p>
                 )}
diff --git a/src/components/homePage/eventList.module.css b/src/components/homePage/eventList.module.css
index fb9c1f3..859d913 100644
--- a/src/components/homePage/eventList.module.css
+++ b/src/components/homePage/eventList.module.css
@@ -54,6 +54,10 @@ h2{
     padding: 10px 20px 10px 20px;
 }
 
+.eventGroup:hover{
+    cursor: pointer;
+}
+
 .eventTitle {
     display: flex;
     flex-direction: row;