diff --git a/index.html b/index.html
index 39aa3f1..c50404f 100644
--- a/index.html
+++ b/index.html
@@ -10,41 +10,46 @@
 </head>
 
 <body>
+    <div id="connectedUser" class="position-fixed top-0 end-0 m-2 p-2 bg-light border rounded" style="display: none; z-index: 1000; font-size: 0.9rem;">
+        <span>Connecté: <span id="userName"></span></span>
+        <button id="disconnect" class="btn btn-danger btn-sm ms-2" style="font-size: 0.8rem; padding: 0.1rem 0.3rem;">Déco</button>
+    </div>
+
     <div class="container-fluid d-flex align-items-center justify-content-center" style="min-height: 100vh;">
         <div class="text-center">
-            <h1 class="mb-4">MyIce - Games</h1>
+            <h1 id="loginTitle" class="mb-4">MyIce - Games</h1>
 
             <div id="loginContainer" class="mb-3">
                 <div id="oidcLoginSection">
                     <button id="oidcLoginBtn" class="btn btn-primary btn-lg px-4 py-3 shadow">Se connecter avec Infomaniak</button>
                 </div>
-                <div id="connectedUser" style="display: none;">
-                    <p>Connecté en tant que: <span id="userName"></span></p>
-                    <button id="disconnect" class="btn btn-danger">Déconnecter</button>
-                </div>
             </div>
         </div>
     </div>
 
-    <div class="container mt-4" id="mainContent" style="display: none;">
+    <div class="container mt-2" id="mainContent" style="display: none;">
 
         <div id="eventFilters" style="display: none;">
-            <div class="mb-3">
-                <label for="account" class="form-label">Sélectionner un compte</label>
-                <select id="account" class="form-select">
-                    <option value="default">Compte par défaut</option>
-                </select>
+            <div class="row g-2 align-items-end">
+                <div class="col-auto">
+                    <label for="account" class="form-label mb-1" style="font-size: 0.8rem;">Compte</label>
+                    <select id="account" class="form-select form-select-sm" style="font-size: 0.8rem;">
+                        <option value="default">Défaut</option>
+                    </select>
+                </div>
+                <div class="col-auto">
+                    <label for="agegroup" class="form-label mb-1" style="font-size: 0.8rem;">Âge</label>
+                    <select id="agegroup" class="form-select form-select-sm" style="font-size: 0.8rem;">
+                        <option value="">Tous</option>
+                    </select>
+                </div>
+                <div class="col-auto">
+                    <button id="fetchEvents" class="btn btn-primary btn-sm" style="font-size: 0.8rem; margin-top: 1.2rem;">Charger</button>
+                </div>
             </div>
-            <div class="mb-3">
-                <label for="agegroup" class="form-label">Filtrer par groupe d'âge</label>
-                <select id="agegroup" class="form-select">
-                    <option value="">Tous</option>
-                </select>
-            </div>
-            <button id="fetchEvents" class="btn btn-primary mb-3">Charger les événements</button>
         </div>
 
-        <div id="eventList" class="row"></div>
+        <div id="eventList" class="row mt-2"></div>
 
         <!-- Modal pour afficher les détails d'un événement -->
         <div class="modal fade" id="eventDetailsModal" tabindex="-1" aria-labelledby="eventDetailsLabel"
@@ -61,8 +66,6 @@
         </div>
     </div>
 
-
-
         <script>
         document.addEventListener("DOMContentLoaded", function () {
             const loginContainer = document.getElementById("loginContainer");
@@ -184,11 +187,14 @@
             function renderLoginSection() {
                 const mainContent = document.getElementById("mainContent");
                 const loginView = document.querySelector(".container-fluid");
+                const connectedUser = document.getElementById("connectedUser");
+                const loginTitle = document.getElementById("loginTitle");
 
                 if (storedApiKey || userInfo) {
                     // User is logged in
                     loginView.style.display = "none";
                     mainContent.style.display = "block";
+                    loginTitle.style.display = "none";
 
                     connectedUser.style.display = "block";
                     oidcLoginSection.style.display = "none";
@@ -208,6 +214,7 @@
                     // User is not logged in
                     loginView.style.display = "flex";
                     mainContent.style.display = "none";
+                    loginTitle.style.display = "block";
 
                     connectedUser.style.display = "none";
                     oidcLoginSection.style.display = "block";
@@ -361,13 +368,92 @@
                                 throw new Error("Le serveur a renvoyé une réponse invalide. Veuillez réessayer.");
                             }
                         });
+                    })
+                    .then(data => {
+                        if (data) {
+                            // Check if data is an array
+                            if (!Array.isArray(data)) {
+                                console.error("Schedule data is not an array:", data);
+                                throw new Error("Invalid schedule data format");
+                            }
+
+                            lastFetchedEvents = data.filter(event => event.event === "Jeu");
+                            updateAgeGroupOptions(lastFetchedEvents);
+                            displayEvents(lastFetchedEvents);
+                        }
+                    })
+                    .catch(error => {
+                        console.error("Erreur lors du chargement des événements:", error);
+                        alert("Erreur lors du chargement des événements: " + error.message);
                     });
             }
 
+            function updateAgeGroupOptions(events) {
+                let agegroups = new Set(events.map(event => `${event.agegroup} ${event.name}`.trim()));
+                agegroupSelect.innerHTML = '<option value="">Tous</option>';
+                agegroups.forEach(group => {
+                    const option = document.createElement("option");
+                    option.value = group;
+                    option.textContent = group;
+                    agegroupSelect.appendChild(option);
+                });
+            }
+
+            function displayEvents(events) {
+                eventList.innerHTML = "";
+                let selectedAgegroup = agegroupSelect.value;
+                let filteredEvents = events.filter(event => event.event === "Jeu" && (selectedAgegroup === "" || `${event.agegroup} ${event.name}` === selectedAgegroup));
+
+                if (filteredEvents.length === 0) {
+                    eventList.innerHTML = "<p class='text-muted'>Aucun événement 'Jeu' trouvé.</p>";
+                    return;
+                }
+
+                filteredEvents.forEach(event => {
+                    const eventCard = document.createElement("div");
+                    eventCard.className = "col-md-4 mb-3";
+                    eventCard.innerHTML = `
+                        <div class="card" style="border-left: 5px solid ${event.color}" data-id="${event.id_event}">
+                            <div class="card-body">
+                                <h5 class="card-title">${event.title}</h5>
+                                <p class="card-text"><strong>Lieu:</strong> ${event.place}</p>
+                                <p class="card-text"><strong>Heure:</strong> ${event.start} - ${event.end}</p>
+                            </div>
+                        </div>
+                    `;
+                    eventCard.addEventListener("click", () => fetchEventDetails(event.id_event));
+                    eventList.appendChild(eventCard);
+                });
+            }
+
+            function fetchEventDetails(eventId) {
+                const selectedAccount = accountSelect.value;
+                fetch(`${apiBaseUrl}/game/${eventId}?account=${selectedAccount}`, {
+                    headers: { "Authorization": `Bearer ${storedApiKey}` }
+                })
+                    .then(response => response.json())
+                    .then(data => {
+                        const sortedPlayers = data.convocation.available
+                            .sort((a, b) => (a.number || 0) - (b.number || 0));
+
+                        eventDetailsContent.innerHTML = `
+                        <h5>${data.title}</h5>
+                        <p><strong>Type:</strong> ${data.type}</p>
+                        <p><strong>Lieu:</strong> ${data.place}</p>
+                        <p><strong>Heure:</strong> ${data.time_start} - ${data.time_end}</p>
+                        <h6>Joueurs convoqués:</h6>
+                        <ul>${sortedPlayers.map(player => {
+                            let number = player.number ? player.number : "N/A";
+                            let position = player.position ? player.position : "N/A";
+                            return `<li>${number} - ${player.fname} ${player.lname} (${position}, ${player.dob})</li>`;
+                        }).join('')}</ul>
+                    `;
+                        new bootstrap.Modal(document.getElementById('eventDetailsModal')).show();
+                    })
+                    .catch(error => console.error("Erreur lors du chargement des détails de l'événement:", error));
+            }
         });
-
-        </script>
-
+    </script>
 </body>
 
 </html>
