diff --git a/index.html b/index.html
index 33e9100..0cfd85f 100644
--- a/index.html
+++ b/index.html
@@ -150,8 +150,15 @@
   <div class="container">
     <object type="image/svg+xml" data="maps/M-MGN1-3.svg" id="plan" onload="initSvgSupport()"></object>
 
-    <div id="selectedSalleInfos">
-      Il faut que vous sélectionnez une salle.
+    <div class="card">
+      <h4 class="card-header">Salle actuelle</h4>
+      <div class="card-body">
+        <h5 class="card-title" id="room-name">Aucune salle sélectionnée</h5>
+        <p class="card-text" id="room-owners" style="font-style:italic;display:none;">Occupée par
+          <span id="room-owners-list"></span>
+        </p>
+        <p class="card-text" id="room-description"></p>
+      </div>
     </div>
   </div>
 
diff --git a/resources/script.js b/resources/script.js
index 1101290..7e16252 100644
--- a/resources/script.js
+++ b/resources/script.js
@@ -26,13 +26,6 @@ function researchRoom()
   xhr.send(null);
 }
 
-function salleInfosToHtml(salle)
-{
-  titres = ((salle.aliaz.length!=0)?("<h2>"+salle.aliaz.join("</h2> ou <h2>")+"</h2>"):"Aucun alias connu.");
-  locataires = salle.locataires.join(", ");
-  return titres + ((salle.description!=null)?("\n<br/>\n" + salle.description):"") + ((salle.locataires.length!=0)?("\n<br/>\n<b>Locataires</b>: " + locataires):"");
-}
-
 function httpGetAsync(theUrl, callback)
 {
   var xmlHttp = new XMLHttpRequest();
@@ -59,31 +52,39 @@ function selectRoom(roomId) {
     console.log('Error: the room does not exist');
     return;
   }
-
-  var outputDiv = document.getElementById('selectedSalleInfos');
+  
+  room.classList.add('current-room');
 
   httpGetAsync("api/request.php?salle="+room.id.substring("path-salle-".length), function (s,errcode){
     window.clearTimeout(document.wnsTimeout);
-    try{
-      if (s=="404") {
-        outputDiv.innerHTML = "Aucune information disponible pour cette salle. Si vous en avez, indiquez-les à l'adresse <a href=mailto:samy.avrillon@ens-lyon.fr>samy.avrillon@ens-lyon.fr</a> en indiquant l'identifiant de la salle : "+room.id.substring("path-salle-".length);
-        return;
-      }
-      ss = JSON.parse(s)
-      if (room.id==("path-salle-"+ss["id"])) {
-        if (errcode==200) {
-          outputDiv.innerHTML = salleInfosToHtml(ss);
+
+    if (s == "404") {
+      document.getElementById('room-name').innerText = 'Salle inconnue';
+      document.getElementById('room-owners').style.display = 'none';
+      document.getElementById('room-description').innerHTML = "Aucune information n'est disponible pour cette salle. Si vous en avez, indiquez-les à l'adresse <a href=mailto:samy.avrillon@ens-lyon.fr>samy.avrillon@ens-lyon.fr</a> en indiquant l'identifiant de la salle : " + roomId;
+      return;
+    }
+
+    salle = JSON.parse(s)
+    if (room.id == "path-salle-" + salle["id"]) {
+      if (errcode == 200) {
+        titres = ((salle.aliaz.length!=0)?(salle.aliaz.join(' ou ')):"Aucun alias connu.");
+        document.getElementById('room-name').innerText = titres;
+        document.getElementById('room-description').innerText = salle.description;
+
+        if (salle.locataires.length == 0) {
+          document.getElementById('room-owners').style.display = 'none';
+          document.getElementById('room-owners-list').innerText = '';
         } else {
-          outputDiv.innerHTML = "Erreur lors de l'appel à l'interface php: ERREUR "+errcode;
+          document.getElementById('room-owners').style.display = 'block';
+          document.getElementById('room-owners-list').innerText = salle.locataires.join(", ");
         }
+
+      } else {
+        console.log("Error " + errcode);
       }
-    } catch(err) {
-      console.error("Les données récupéréés de cette salle ne sont pas valides.");
-      console.error(err);
     }
   });
-
-  room.classList.add('current-room');
 }
 
 // Update the current room based on the current anchor