diff --git a/css/pages/style_projet.css b/css/pages/style_projet.css
index 8c45e48..60c5ac5 100644
--- a/css/pages/style_projet.css
+++ b/css/pages/style_projet.css
@@ -163,4 +163,17 @@
 
 .highlight{
   background-color: red;
+}
+
+.middle-place{
+  position: absolute;
+  top: 45%;
+  left: 40%;
+}
+.explaination-text{
+  font-size: 1.5em;
+  color: #ffffff;
+  text-align: center;
+  margin-top: 20px;
+  margin-bottom: 20px;
 }
\ No newline at end of file
diff --git a/js/pages/projet_detail.js b/js/pages/projet_detail.js
index 6d68b15..88e0c9e 100644
--- a/js/pages/projet_detail.js
+++ b/js/pages/projet_detail.js
@@ -260,14 +260,14 @@ document.addEventListener("DOMContentLoaded", async () => {
       firstInput.max = lastValue;
       lastInput.min = firstValue;
     }
-    if (DataMetrics != 404) {
-      const project = data.find((project) => project.id == projectId);
+    const project = data.find((project) => project.id == projectId);
       if (project) {
         for (obj of document.getElementsByClassName("name_project"))
           obj.innerHTML = project.name;
       } else {
         console.error("Project not found");
       }
+    if (DataMetrics != 404) {
   
       choiceSelect.addEventListener("change", toggleContainers);
 
@@ -284,6 +284,14 @@ document.addEventListener("DOMContentLoaded", async () => {
     for (el of document.querySelectorAll(".box")) {
       el.style.display = "none";
     }
+    document.getElementById("buttons-container").classList.add("middle-place");
+    document.getElementById("toggle-view").style.display = "none";
+    // add an explaination to the user
+    const explaination = document.createElement("p");
+    explaination.innerHTML =
+      "Ce projet est encore vierge, il n'y a pas de données à afficher. <br> Veuillez configurer la caméra pour commencer à prendre des images.";
+    explaination.classList.add("explaination-text");
+    document.getElementById("title-global").appendChild(explaination);
   }
 });
 
diff --git a/pages/projet_detail.html b/pages/projet_detail.html
index 6048967..d062ebc 100644
--- a/pages/projet_detail.html
+++ b/pages/projet_detail.html
@@ -111,7 +111,7 @@
   <!-- page classique -->
   <div>
       <div>
-        <div class="buttons-container">
+        <div class="buttons-container" id="buttons-container">
           <button class="default-button" id="projets">Menu Principal</button>
           <div class="box">
             <select name="videos" id="video_selector"></select>