diff --git a/css/style.css b/css/style.css
index 416fd6c..ee2ba65 100644
--- a/css/style.css
+++ b/css/style.css
@@ -37,4 +37,7 @@ footer {
   position: sticky;
   top: 0;
   z-index: 1;
+}
+#addVideoHandler{
+  display: flex;
 }
\ No newline at end of file
diff --git a/html/projet_detail.html b/html/projet_detail.html
index 0a9acd1..94314bd 100644
--- a/html/projet_detail.html
+++ b/html/projet_detail.html
@@ -1,84 +1,96 @@
 <!DOCTYPE html>
 <html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>Détails</title>
-    <link rel="stylesheet" href="../css/style.css" />
-    <link
-      rel="stylesheet"
-      href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
-      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
-      crossorigin="anonymous"
-    />
-    <link
-      href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
-      rel="stylesheet"
-    />
-  </head>
-  <body>
-    <div id="section" class="container mt-5">
-      <div class="row">
-        <div class="col-md-12">
-          <div class="buttons-container" style="float: left; width: 20%">
-            <button class="btn btn-primary" id="projets" >
-              <span> Home </span>
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>Détails</title>
+  <link rel="stylesheet" href="../css/style.css" />
+  <link
+    rel="stylesheet"
+    href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css"
+    integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
+    crossorigin="anonymous"
+  />
+  <link
+    href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css"
+    rel="stylesheet"
+  />
+  <!-- Select2 CSS -->
+  <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
+</head>
+<body>
+  <div id="section" class="container mt-5">
+    <div class="row">
+      <div class="col-md-12">
+        <div class="buttons-container" style="float: left; width: 20%">
+          <button class="btn btn-primary" id="projets">
+            <span> Home </span>
+          </button>
+        </div>
+        <h3
+          id="name_project"
+          class="text-black"
+          style="float: left; width: 50%"
+        ></h3>
+      </div>
+    </div>
+    <div class="row">
+      <div class="col-md-6">
+        <div id="addVideoHandler">
+          <select name="videos" id="video_selector" class="select2">
+          </select>
+          <div class="buttons-container">
+            <button class="btn btn-primary" id="projets">
+              <span> + </span>
             </button>
           </div>
-          <h3
-            id="name_project"
-            class="text-black"
-            style="float: left; width: 50%"
-          ></h3>
+        </div>
+        <div id="metric_viewer_placeholder">
+          <canvas id="metric_viewer"></canvas>
         </div>
       </div>
-      <div class="row">
-        <div class="col-md-6">
-          <select name="metriques" id="metric_selector">
-          </select>
-          <div id="metric_viewer_placeholder">
-            <canvas id="metric_viewer"></canvas>
-          </div>
-        </div>
-        <div class="col-md-6">
-          <div id="content1" class="hiddenTable">
-            <table
-              class="table table-striped scrollable sticky-header .thead-dark"
-              id="table-image"
-            >
-              <thead >
-                <tr>
-                  <th>
-                    <button class="btn btn-primary" id="toggle-view">
-                      See all images
-                    </button>
-                  </th>
-                  <th><button class="btn btn-primary">
-                      sort images
-                    </button></th>
-                  <th><button class="btn btn-primary">
-                      export images
-                    </button></th>
-                </tr>
-                <tr>
-                  <th colspan="3" scope="col">images</th>
-                </tr>
-              </thead>
-              <tbody id="imageSource"></tbody>
-            </table>
-          </div>
+      <div class="col-md-6">
+        <div id="content1" class="hiddenTable">
+          <table
+            class="table table-striped scrollable sticky-header .thead-dark"
+            id="table-image"
+          >
+            <thead>
+              <tr>
+                <th>
+                  <button class="btn btn-primary" id="toggle-view">
+                    See all images
+                  </button>
+                </th>
+                <th><button class="btn btn-primary">
+                    sort images
+                  </button></th>
+                <th><button class="btn btn-primary">
+                    export images
+                  </button></th>
+              </tr>
+              <tr>
+                <th colspan="3" scope="col">images</th>
+              </tr>
+            </thead>
+            <tbody id="imageSource"></tbody>
+          </table>
         </div>
       </div>
     </div>
+  </div>
 
-    <footer>
-      <p>&copy; 2024 Timelapse. All rights reserved.</p>
-    </footer>
-    <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
-    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
-    <script src="../js/utilities/constVariables.js"></script>
-    <script src="../js/utilities/populate.js"></script>
-    <script src="../js/globals.js"></script>
-    <script src="../js/projet_detail.js"></script>
-  </body>
+  <footer>
+    <p>&copy; 2024 Timelapse. All rights reserved.</p>
+  </footer>
+  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
+  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+  <!-- Select2 JS -->
+  <script src="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/js/select2.min.js"></script>
+  <script src="../js/utilities/constVariables.js"></script>
+  <script src="../js/utilities/populate.js"></script>
+  <script src="../js/utilities/routes.js"></script>
+  <script src="../js/utilities/tools.js"></script>
+  <script src="../js/projet_detail.js"></script>
+</body>
 </html>
diff --git a/index.html b/index.html
index d23dba7..1794906 100644
--- a/index.html
+++ b/index.html
@@ -35,8 +35,9 @@
     </footer>
 
     <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
+
     <script src="../js/utilities/constVariables.js"></script>
-    <script src="../js/globals.js"></script>
+    <script src="../js/utilities/routes.js"></script>
     <script src="../js/index.js"></script>
     <script>
     // Redirect to videos.php when the "Mes vidéos" button is clicked
diff --git a/js/globals.js b/js/globals.js
deleted file mode 100644
index 80e87bc..0000000
--- a/js/globals.js
+++ /dev/null
@@ -1,84 +0,0 @@
-// Global variables
-let global_project_list;
-let current_project = "";
-
-function formatDate(isoString) {
-  const date = new Date(isoString);
-
-  const options = {
-    year: "numeric",
-    month: "long",
-    day: "numeric",
-    hour: "numeric",
-    minute: "numeric",
-    second: "numeric",
-    timeZoneName: "short",
-  };
-
-  return date.toLocaleString("en-US", options);
-}
-// Function to get data from API
-
-function getDataProjectFromApi() {
-  return $.ajax({
-    url: api_url.concat("/projects"),
-    method: "GET",
-    dataType: "json",
-  }).then((data) => {
-    // If the request is successful, store the data in the cache and return it
-    localStorage.setItem("project_list", JSON.stringify(data));
-    return data;
-  });
-}
-function getDataProjectMetricsFromApi(id) {
-  return $.ajax({
-    url: api_url.concat(`/metric/${id}`),
-    method: "GET",
-    dataType: "json",
-  }).then((data) => {
-    // If the request is successful, store the data in the cache and return it
-    return data;
-  });
-}
-
-function getDataProjectImagesFromApi(id) {
-  return $.ajax({
-    url: api_url.concat(`/image/${id}`),
-    method: "GET",
-    dataType: "json",
-  }).then((data) => {
-    // If the request is successful, store the data in the cache and return it
-    return data;
-  });
-}
-
-// Function to send data to API
-function sendDataFromApi(datas) {
-  return $.ajax({
-    url: api_url.concat("/projets"),
-    method: "POST",
-    data: JSON.stringify(datas),
-    contentType: "application/json",
-    success: function (datas) {
-      console.log("successful");
-    },
-    error: function (jqXHR, textStatus, errorThrown) {
-      console.error(errorThrown);
-    },
-  });
-}
-
-function deleteDataFromApi(id) {
-  return $.ajax({
-    url: api_url.concat("/delete"),
-    method: "POST",
-    data: JSON.stringify({ id: id }),
-    contentType: "application/json",
-    success: function (datas) {
-      console.log("successful");
-    },
-    error: function (jqXHR, textStatus, errorThrown) {
-      console.error(errorThrown);
-    },
-  });
-}
diff --git a/js/index.js b/js/index.js
index 8f7ce5c..7528f31 100644
--- a/js/index.js
+++ b/js/index.js
@@ -15,7 +15,7 @@ function display_projects() {
                 <th>${global_project_list[i].name}</th>
                 <th>${formatDate(global_project_list[i].start_date)}</th>
                 <th>${global_project_list[i].status}</th>
-                <th><button class="project_detail btn btn-primary">détails de ${global_project_list[i].titre}</button></th>
+                <th><button class="project_detail btn btn-primary">détails de ${global_project_list[i].name}</button></th>
                 </tr>`;
   }
   table.innerHTML = datas;
@@ -34,7 +34,7 @@ function display_projects() {
     });
   }
 }
-getDataProjectFromApi()
+getAllProject()
   .then(project_list => {
     global_project_list = project_list;
     // Call the next function here
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 0897eb0..43ba229 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -1,39 +1,28 @@
 let myChart; // Declare a global variable to hold the chart instance
 
 document.addEventListener("DOMContentLoaded", () => {
-
   // Objects / variables
-
-  const metric_selector = document.getElementById("metric_selector")
+  const video_selector = document.getElementById("video_selector");
   const urlParams = new URLSearchParams(window.location.search);
   const projectId = urlParams.get("id");
 
   // Initialisation
+  generateViewMetric(projectId);
 
-  generateViewMetric();
+  PopulateSelect(video_selector, projectId);
 
-  PopulateSelect(metric_selector,projectId);
-
-  metric_selector.addEventListener("change", () => {
-    generateViewMetric();
+  video_selector.addEventListener("change", () => {
+    generateViewMetric(projectId);
   });
 
-
-  // getDataProjectMetricsFromApi(projectId)
-  //   .then((project_metrics) => {
-  //     display_metrics(project_metrics);
-  //   })
-  //   .catch((error) => {
-  //     console.error(error);
-  //   });
   document.getElementById("projets").addEventListener("click", () => {
     window.location.href = "../index.html";
     current_project = "";
   });
+
   global_project_list = JSON.parse(localStorage.getItem("project_list"));
   document.getElementById("name_project").innerHTML =
-    global_project_list[projectId - 1].titre;
-
+    global_project_list[projectId - 1].name;
 
   fetch("https://timelapse.kerboul.me/api/smile")
     .then((response) => response.blob())
@@ -74,8 +63,37 @@ document.addEventListener("DOMContentLoaded", () => {
   });
 });
 
-function generateViewMetric() {
+async function generateViewMetric(projectId) {
   const ctx = document.getElementById("metric_viewer").getContext("2d");
+  let Hygrometrie = [];
+  let Temperature = [];
+  let datesMeasurement = [];
+
+  let measurements;
+  let current_video_datas;
+
+  // Wait for the video_selector to be populated
+  await new Promise((resolve) => {
+    const checkExist = setInterval(() => {
+      if (document.getElementById("video_selector").options.length > 0) {
+        clearInterval(checkExist);
+        resolve();
+      }
+    }, 100); // check every 100ms
+  });
+
+  const videoId = document.getElementById("video_selector").value;
+
+  measurements = await getDataMetrics(projectId);
+  current_video_datas = await getDataVideoFromApi(videoId);
+
+  let samples = convertStringToArray(current_video_datas[0]["measurement_ids"]);
+  tempoMeasure = filterAndSortMeasurementsByIds(measurements,samples)
+  tempoMeasure.forEach((measure) => {
+    datesMeasurement.push(measure.timestamp)
+    Temperature.push(measure.temperature)
+    Hygrometrie.push(measure.hydrometrie)
+  });
 
   // Destroy the existing chart instance if it exists
   if (myChart) {
@@ -86,11 +104,11 @@ function generateViewMetric() {
   myChart = new Chart(ctx, {
     type: "line",
     data: {
-      labels: ["January", "February", "March", "April", "May", "June", "July"],
+      labels: datesMeasurement,
       datasets: [
         {
           label: "Température (F°)",
-          data: [65, 59, 80, 81, 56, 55, 40],
+          data: Temperature,
           fill: false,
           borderColor: "rgba(75, 192, 192, 1)",
           tension: 0.1,
@@ -98,7 +116,7 @@ function generateViewMetric() {
         },
         {
           label: "Hygrometrie (%)",
-          data: [28, 48, 40, 19, 86, 27, 90],
+          data: Hygrometrie,
           fill: false,
           borderColor: "rgba(153, 102, 255, 1)",
           tension: 0.1,
@@ -122,4 +140,4 @@ function generateViewMetric() {
       },
     },
   });
-}
+}
\ No newline at end of file
diff --git a/js/utilities/populate.js b/js/utilities/populate.js
index 539d4a2..2f96b73 100644
--- a/js/utilities/populate.js
+++ b/js/utilities/populate.js
@@ -1,6 +1,6 @@
 async function PopulateSelect(mySelect,id){
     let data=[]
-    if(mySelect.name=="metriques" && id!=null){
+    if(mySelect.name=="videos" && id!=null){
         data=await getDataProjectVideosFromApi(id);
         for(let i = 0 ; i < data.length ; i++){
             const selectObj=document.createElement("option")
@@ -25,5 +25,20 @@ async function getDataProjectVideosFromApi(id) {
       throw error; // Re-throw the error to handle it outside the function if needed
     }
   }
+
+  async function getDataVideoFromApi(id) {
+    try {
+      const response = await $.ajax({
+        url: api_url.concat(`/videos/${id}`),
+        method: "GET",
+        dataType: "json",
+      });
+      // If the request is successful, store the data in the cache and return it
+      return response;
+    } catch (error) {
+      console.error("Error fetching data:", error);
+      throw error; // Re-throw the error to handle it outside the function if needed
+    }
+  }
   
   
\ No newline at end of file
diff --git a/js/utilities/routes.js b/js/utilities/routes.js
new file mode 100644
index 0000000..110bab0
--- /dev/null
+++ b/js/utilities/routes.js
@@ -0,0 +1,44 @@
+// Global variables
+let global_project_list;
+let current_project = "";
+
+function formatDate(isoString) {
+  const date = new Date(isoString);
+
+  const options = {
+    year: "numeric",
+    month: "long",
+    day: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+    second: "numeric",
+    timeZoneName: "short",
+  };
+
+  return date.toLocaleString("en-US", options);
+}
+// Function to get data from API
+
+function getAllProject() {
+  return $.ajax({
+    url: api_url.concat("/projects"),
+    method: "GET",
+    dataType: "json",
+  }).then((data) => {
+    // If the request is successful, store the data in the cache and return it
+    localStorage.setItem("project_list", JSON.stringify(data));
+    return data;
+  });
+}
+
+function getDataMetrics(projectId){
+  return $.ajax({
+    url: api_url.concat("/projects/"+projectId+"/measurements"),
+    method: "GET",
+    dataType: "json",
+  }).then((data) => {
+    // If the request is successful, store the data in the cache and return it
+    localStorage.setItem("project_list", JSON.stringify(data));
+    return data;
+  });
+}
diff --git a/js/utilities/tools.js b/js/utilities/tools.js
new file mode 100644
index 0000000..66d4e92
--- /dev/null
+++ b/js/utilities/tools.js
@@ -0,0 +1,15 @@
+function convertStringToArray(inputString) {
+  // Split the string by the delimiter '/'
+  const stringArray = inputString.split(",");
+
+  // Convert each element to a number
+  const numberArray = stringArray.map(Number);
+
+  return numberArray;
+}
+
+function filterAndSortMeasurementsByIds(measurements, ids) {
+  return measurements
+    .filter((measurement) => ids.includes(measurement.id))
+    .sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+}
