diff --git a/html/projet_detail.html b/html/projet_detail.html
index 168703c..0a9acd1 100644
--- a/html/projet_detail.html
+++ b/html/projet_detail.html
@@ -35,8 +35,6 @@
       <div class="row">
         <div class="col-md-6">
           <select name="metriques" id="metric_selector">
-            <option value="hygrometry">hygrométrie</option>
-            <option value="temperature">Température</option>
           </select>
           <div id="metric_viewer_placeholder">
             <canvas id="metric_viewer"></canvas>
@@ -78,6 +76,8 @@
     </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>
diff --git a/html/videos.html b/html/videos.html
index ce38b89..4b9ca94 100644
--- a/html/videos.html
+++ b/html/videos.html
@@ -33,6 +33,7 @@
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js"
         integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous">
     </script>
+    <script src="../js/utilities/constVariables.js"></script>
     <script>
     document.addEventListener('DOMContentLoaded', () => {
         document.getElementById("projets").addEventListener('click', () => {
diff --git a/index.html b/index.html
index 9a415c1..d23dba7 100644
--- a/index.html
+++ b/index.html
@@ -35,6 +35,7 @@
     </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/index.js"></script>
     <script>
diff --git a/js/globals.js b/js/globals.js
index 0a7be22..80e87bc 100644
--- a/js/globals.js
+++ b/js/globals.js
@@ -1,5 +1,4 @@
 // Global variables
-let api_url = "https://timelapse.kerboul.me/api";
 let global_project_list;
 let current_project = "";
 
@@ -22,7 +21,7 @@ function formatDate(isoString) {
 
 function getDataProjectFromApi() {
   return $.ajax({
-    url: api_url.concat("/itemsdb"),
+    url: api_url.concat("/projects"),
     method: "GET",
     dataType: "json",
   }).then((data) => {
diff --git a/js/index.js b/js/index.js
index e74ba22..8f7ce5c 100644
--- a/js/index.js
+++ b/js/index.js
@@ -12,8 +12,8 @@ function display_projects() {
   for (let i = 0; i < global_project_list.length; i++) {
     datas += `<tr>
                 <th>${global_project_list[i].id}</th>
-                <th>${global_project_list[i].titre}</th>
-                <th>${formatDate(global_project_list[i].creation)}</th>
+                <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>
                 </tr>`;
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 312b53f..0897eb0 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -1,12 +1,24 @@
 let myChart; // Declare a global variable to hold the chart instance
 
-function display_metrics() {
-  // Implementation for display_metrics function
-}
-
 document.addEventListener("DOMContentLoaded", () => {
+
+  // Objects / variables
+
+  const metric_selector = document.getElementById("metric_selector")
   const urlParams = new URLSearchParams(window.location.search);
   const projectId = urlParams.get("id");
+
+  // Initialisation
+
+  generateViewMetric();
+
+  PopulateSelect(metric_selector,projectId);
+
+  metric_selector.addEventListener("change", () => {
+    generateViewMetric();
+  });
+
+
   // getDataProjectMetricsFromApi(projectId)
   //   .then((project_metrics) => {
   //     display_metrics(project_metrics);
@@ -22,11 +34,6 @@ document.addEventListener("DOMContentLoaded", () => {
   document.getElementById("name_project").innerHTML =
     global_project_list[projectId - 1].titre;
 
-  generateViewMetric();
-
-  document.getElementById("metric_selector").addEventListener("change", () => {
-    generateViewMetric();
-  });
 
   fetch("https://timelapse.kerboul.me/api/smile")
     .then((response) => response.blob())
@@ -77,14 +84,25 @@ function generateViewMetric() {
 
   // Create a new chart instance
   myChart = new Chart(ctx, {
-    type: "bar",
+    type: "line",
     data: {
-      labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
+      labels: ["January", "February", "March", "April", "May", "June", "July"],
       datasets: [
         {
-          label: "# of Votes",
-          data: [12, 19, 3, 5, 2, 3],
-          borderWidth: 1,
+          label: "Température (F°)",
+          data: [65, 59, 80, 81, 56, 55, 40],
+          fill: false,
+          borderColor: "rgba(75, 192, 192, 1)",
+          tension: 0.1,
+          yAxisID: "y", // Use the default y-axis
+        },
+        {
+          label: "Hygrometrie (%)",
+          data: [28, 48, 40, 19, 86, 27, 90],
+          fill: false,
+          borderColor: "rgba(153, 102, 255, 1)",
+          tension: 0.1,
+          yAxisID: "y1", // Use the second y-axis
         },
       ],
     },
@@ -92,6 +110,14 @@ function generateViewMetric() {
       scales: {
         y: {
           beginAtZero: true,
+          position: "left",
+        },
+        y1: {
+          beginAtZero: true,
+          position: "right",
+          grid: {
+            drawOnChartArea: false, // Only want the grid lines for one axis to show up
+          },
         },
       },
     },
diff --git a/js/utilities/constVariables.js b/js/utilities/constVariables.js
new file mode 100644
index 0000000..f9ad0c8
--- /dev/null
+++ b/js/utilities/constVariables.js
@@ -0,0 +1 @@
+const api_url = "https://timelapse.kerboul.me/api";
diff --git a/js/utilities/populate.js b/js/utilities/populate.js
new file mode 100644
index 0000000..539d4a2
--- /dev/null
+++ b/js/utilities/populate.js
@@ -0,0 +1,29 @@
+async function PopulateSelect(mySelect,id){
+    let data=[]
+    if(mySelect.name=="metriques" && id!=null){
+        data=await getDataProjectVideosFromApi(id);
+        for(let i = 0 ; i < data.length ; i++){
+            const selectObj=document.createElement("option")
+            selectObj.value=data[i].id
+            selectObj.innerHTML=data[i].name
+            mySelect.appendChild(selectObj)
+        }
+    }
+}
+
+async function getDataProjectVideosFromApi(id) {
+    try {
+      const response = await $.ajax({
+        url: api_url.concat(`/projects/${id}/videos`),
+        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