diff --git a/flask_base/templates/pokemon.html b/flask_base/templates/pokemon.html
index 10e558d..cdab1df 100644
--- a/flask_base/templates/pokemon.html
+++ b/flask_base/templates/pokemon.html
@@ -9,9 +9,9 @@
 <body>
 
   {% include 'header.html' %}
-
+  <div class="proprimon-content">
     <div class="battle">
-        <h1>PROPRIMON</h1>
+        <h1>LIBREMON</h1>
     <style>
     #log {
         width: 90%;
@@ -27,12 +27,60 @@
         flex-direction: column; /* Les nouveaux messages vont en bas */
         gap: 4px;
     }
+    .proprimon-log {
+      width: 90%;
+      height: 200px;
+      border: 1px solid #555;
+      padding: 10px;
+      margin-top: 15px;
+      background: #111;
+      color: white;
+      white-space: pre-line;
+      overflow-y: auto;
+      display: flex;
+      flex-direction: column;
+      gap: 4px;
+  }
+
+  /* ----- PANEL LATÉRAL POUR LE LEADERBOARD ----- */
+  .proprimon-sidepanel {
+      position: fixed;
+      left: 0;
+      top: 0;
+      width: 260px;
+      height: 100vh;
+      overflow-y: auto;
+      background: #1c1c1c;
+      color: white;
+      padding: 20px;
+      box-shadow: 4px 0 12px rgba(0,0,0,0.4);
+      border-right: 2px solid #333;
+      z-index: 1200;
+  }
+
+  .proprimon-sidepanel h2 {
+      text-align: center;
+      font-size: 20px;
+      margin-bottom: 15px;
+  }
+
+  .proprimon-sidepanel-entry {
+      margin: 8px 0;
+      padding: 4px;
+      background: #2a2a2a;
+      border-radius: 4px;
+  }
+
+  /* ----- DÉCALAGE DU JEU POUR ÉVITER LE PANEL ----- */
+  .proprimon-content {
+      margin-left: 280px;    /* Pour ne pas passer sous le panneau */
+      padding: 10px;
+  }
     </style>
 
-    <div class="leaderboard">
+    <div class="proprimon-sidepanel">
         <h2>Classement des joueurs</h2>
-        <div id="leaderboardDiv">
-        </div>
+        <div id="leaderboardDiv"></div>
     </div>
 
     <div class="battle">
@@ -56,7 +104,8 @@
         <div id="attacksDiv"></div>
         <button id="runBtn">Fuir</button>
       
-        <div id="log">Un ennemi sauvage apparaît !</div>
+        <div id="log" class="proprimon-log">Un ennemi sauvage apparaît !</div>
+
       </div>
       
       <script>
@@ -309,5 +358,6 @@
       
       
       </script>
+      </div>
 </body>
 </html>
