diff --git a/index.html b/index.html
index 8889a1c..39aa3f1 100644
--- a/index.html
+++ b/index.html
@@ -10,18 +10,23 @@
 </head>
 
 <body>
-    <div class="container mt-4">
-        <h1 class="mb-4 text-center">MyIce - Games</h1>
+    <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>
 
-        <div id="loginContainer" class="mb-3">
-    <div id="oidcLoginSection">
-        <button id="oidcLoginBtn" class="btn btn-primary">Se connecter avec Infomaniak</button>
+            <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 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 class="container mt-4" id="mainContent" style="display: none;">
 
         <div id="eventFilters" style="display: none;">
             <div class="mb-3">
@@ -56,6 +61,8 @@
         </div>
     </div>
 
+
+
         <script>
         document.addEventListener("DOMContentLoaded", function () {
             const loginContainer = document.getElementById("loginContainer");
@@ -175,8 +182,14 @@
             }
 
             function renderLoginSection() {
+                const mainContent = document.getElementById("mainContent");
+                const loginView = document.querySelector(".container-fluid");
+
                 if (storedApiKey || userInfo) {
                     // User is logged in
+                    loginView.style.display = "none";
+                    mainContent.style.display = "block";
+
                     connectedUser.style.display = "block";
                     oidcLoginSection.style.display = "none";
 
@@ -193,6 +206,9 @@
                     // Wait for user to explicitly select an account or click fetch
                 } else {
                     // User is not logged in
+                    loginView.style.display = "flex";
+                    mainContent.style.display = "none";
+
                     connectedUser.style.display = "none";
                     oidcLoginSection.style.display = "block";
                     eventFilters.style.display = "none";
@@ -345,92 +361,13 @@
                                 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>
