diff --git a/js/index.js b/js/index.js
index 7528f31..512838e 100644
--- a/js/index.js
+++ b/js/index.js
@@ -15,7 +15,9 @@ 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].name}</button></th>
+                <th><button class="project_detail btn btn-primary">détails de ${
+                  global_project_list[i].name
+                }</button></th>
                 </tr>`;
   }
   table.innerHTML = datas;
@@ -30,16 +32,16 @@ function display_projects() {
     });
     buttons[i].addEventListener("onclick", (event) => {
       // Send data to API and then navigate to projet_detail.html page
-      current_project=change_current_project(i);
+      current_project = change_current_project(i);
     });
   }
 }
 getAllProject()
-  .then(project_list => {
+  .then((project_list) => {
     global_project_list = project_list;
     // Call the next function here
     display_projects();
   })
-  .catch(error => {
+  .catch((error) => {
     console.error(error);
   });
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 1e18393..fba2841 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -1,125 +1,96 @@
-let myChart; // Declare a global variable to hold the chart instance
+let myChart;
 
 document.addEventListener("DOMContentLoaded", async () => {
-  // Objects / variables
-  const video_selector = document.getElementById("video_selector");
   const urlParams = new URLSearchParams(window.location.search);
   const projectId = urlParams.get("id");
-
   const data = await getAllProject();
+  const DataMetrics = await getDataMetrics(projectId);
+
   document.getElementById("name_project").innerHTML = data[projectId].name;
 
-  
-const numbers = [1, 25, 68, 74]; // Example array of numbers
-const numberPicker = document.getElementById('number-picker');
-const resultContainer = document.getElementById('result-container');
-const choiceSelect = document.getElementById('choice');
-const oneByOneContainer = document.getElementById('one-by-one-container');
-const addNumberButton = document.getElementById('add-number-button');
+  const videoSelector = document.getElementById("video_selector");
+  const numberPicker = document.getElementById('number-picker');
+  const resultContainer = document.getElementById('result-container');
+  const choiceSelect = document.getElementById('choice');
+  const oneByOneContainer = document.getElementById('one-by-one-container');
+  const addNumberButton = document.getElementById('add-number-button');
+  const formContainer = document.getElementById('form-container');
+  const durationInput = document.getElementById('duration');
+  const tableBody = document.getElementById("imageSource");
+  const tableImage = document.getElementById("content1");
 
-let selectedNumbers = [];
+  let selectedNumbers = [];
 
-  choiceSelect.addEventListener('change', () => {
-    if (choiceSelect.value === 'oneByOne') {
-        oneByOneContainer.style.display = 'block';
-    } else {
-        oneByOneContainer.style.display = 'none';
-    }
-});
+  choiceSelect.addEventListener('change', toggleOneByOneContainer);
+  addNumberButton.addEventListener('click', addSelectedNumber);
+  videoSelector.addEventListener("change", () => generateViewMetric(projectId));
+  document.getElementById('show-form-button').addEventListener('click', showForm);
+  document.getElementById('close-form-button').addEventListener('click', hideForm);
+  document.getElementById('increment-button').addEventListener('click', incrementDuration);
+  document.getElementById('decrement-button').addEventListener('click', decrementDuration);
+  document.getElementById('my-form').addEventListener('submit', handleFormSubmit);
+  document.getElementById("projets").addEventListener("click", navigateToProjects);
+  document.getElementById("toggle-view").addEventListener("click", toggleView);
 
-// Add number to selectedNumbers array
-addNumberButton.addEventListener('click', () => {
+  generateViewMetric(projectId);
+  PopulateSelect(videoSelector, projectId);
+  populateImageTable(DataMetrics);
+
+  function toggleOneByOneContainer() {
+    oneByOneContainer.style.display = choiceSelect.value === 'oneByOne' ? 'block' : 'none';
+  }
+
+  function addSelectedNumber() {
     const selectedNumber = parseInt(numberPicker.value, 10);
     if (!selectedNumbers.includes(selectedNumber)) {
-        selectedNumbers.push(selectedNumber);
-        numberPicker.remove(numberPicker.selectedIndex);
+      selectedNumbers.push(selectedNumber);
+      numberPicker.remove(numberPicker.selectedIndex);
     }
-});
+  }
 
-  // Initialisation
-  generateViewMetric(projectId);
+  function showForm() {
+    formContainer.style.display = 'flex';
+  }
 
-  PopulateSelect(video_selector, projectId);
+  function hideForm() {
+    formContainer.style.display = 'none';
+  }
 
-  video_selector.addEventListener("change", () => {
-    generateViewMetric(projectId);
-  });
+  function incrementDuration() {
+    durationInput.value = parseInt(durationInput.value) + 1;
+  }
 
-  // button
-
-  document.getElementById('show-form-button').addEventListener('click', function() {
-    document.getElementById('form-container').style.display = 'flex';
-});
-
-document.getElementById('close-form-button').addEventListener('click', function() {
-    document.getElementById('form-container').style.display = 'none';
-});
-document.getElementById('increment-button').addEventListener('click', function() {
-  let durationInput = document.getElementById('duration');
-  durationInput.value = parseInt(durationInput.value) + 1;
-});
-
-document.getElementById('decrement-button').addEventListener('click', function() {
-  let durationInput = document.getElementById('duration');
-  if (parseInt(durationInput.value) > 0) {
+  function decrementDuration() {
+    if (parseInt(durationInput.value) > 0) {
       durationInput.value = parseInt(durationInput.value) - 1;
-  }
-});
-
-document.getElementById('my-form').addEventListener('submit', async function(event) {
-  event.preventDefault();
-  const data=await getDataProjectVideosFromApi(projectId);
-  const name_video = document.getElementById('name').value
-  const video_duration = document.getElementById('duration').value
-  if(video_duration>0){
-    if(checkVideoPath(data, name_video)){
-      alert('Nouvelle vidéo enregistrée :\nNom : ' + name_video  +
-        '\nRésolution : ' + document.getElementById('resolution').value +
-       '\nDurée : ' + video_duration + ' secondes');
-      //project_id, measurement_ids, video_name, resolution, duration, fps, status
-    } else {
-      alert('Le nom : "'+ name_video + '" est déjà pris ! \n' +
-        'veuillez en trouver un autre')
     }
-  } else {
-    alert('La durée de la vidéo doit être suppérieur à 0')
   }
-});
 
-  document.getElementById("projets").addEventListener("click", () => {
+  async function handleFormSubmit(event) {
+    event.preventDefault();
+    const data = await getDataProjectVideosFromApi(projectId);
+    const nameVideo = document.getElementById('name').value;
+    const videoDuration = durationInput.value;
+
+    if (videoDuration > 0) {
+      if (checkVideoPath(data, nameVideo)) {
+        alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
+          '\nRésolution : ' + document.getElementById('resolution').value +
+          '\nDurée : ' + videoDuration + ' secondes');
+      } else {
+        alert('Le nom : "' + nameVideo + '" est déjà pris ! \n' +
+          'veuillez en trouver un autre');
+      }
+    } else {
+      alert('La durée de la vidéo doit être supérieur à 0');
+    }
+  }
+
+  function navigateToProjects() {
     window.location.href = "../index.html";
-    current_project = "";
-  });
+  }
 
-
-
-  fetch("https://timelapse.kerboul.me/api/smile")
-    .then((response) => response.blob())
-    .then((blob) => {
-      const url = URL.createObjectURL(blob);
-      let tableBody = document.getElementById("imageSource");
-      let row = document.createElement("tr");
-
-      for (let i = 0; i < 1500; i++) {
-        let imageTD = document.createElement("td");
-        imageTD.innerHTML = `<img id="${i}" src="${url}" />`;
-        row.appendChild(imageTD);
-
-        if ((i + 1) % 3 === 0 && i !== 0) {
-          tableBody.appendChild(row);
-          row = document.createElement("tr"); // Create a new row
-        }
-      }
-
-      // Append the last row if there are remaining images
-      if (row.childNodes.length > 0) {
-        tableBody.appendChild(row);
-      }
-    });
-
-  // Add event listener for the toggle button
-  document.getElementById("toggle-view").addEventListener("click", () => {
-    const tableImage = document.getElementById("content1");
+  function toggleView() {
     if (tableImage.classList.contains("hiddenTable")) {
       tableImage.classList.remove("hiddenTable");
       tableImage.classList.add("full-view");
@@ -129,7 +100,26 @@ document.getElementById('my-form').addEventListener('submit', async function(eve
       tableImage.classList.add("hiddenTable");
       document.getElementById("toggle-view").innerHTML = "See all images";
     }
-  });
+  }
+
+  function populateImageTable(DataMetrics) {
+    let row = document.createElement("tr");
+    let i = 0;
+    DataMetrics.forEach((measure) => {
+      let imageTD = document.createElement("td");
+      imageTD.innerHTML = `<img id="${i}" src="${measure.image_path}" />`;
+      row.appendChild(imageTD);
+
+      if ((i + 1) % 3 === 0 && i !== 0) {
+        tableBody.appendChild(row);
+        row = document.createElement("tr");
+      }
+      if (row.childNodes.length > 0) {
+        tableBody.appendChild(row);
+      }
+      i++;
+    });
+  }
 });
 
 async function generateViewMetric(projectId) {
@@ -139,9 +129,8 @@ async function generateViewMetric(projectId) {
   let datesMeasurement = [];
 
   let measurements;
-  let current_video_datas;
+  let currentVideoDatas;
 
-  // Wait for the video_selector to be populated
   await new Promise((resolve) => {
     const checkExist = setInterval(() => {
       if (document.getElementById("video_selector").options.length > 0) {
@@ -154,22 +143,20 @@ async function generateViewMetric(projectId) {
   const videoId = document.getElementById("video_selector").value;
 
   measurements = await getDataMetrics(projectId);
-  current_video_datas = await getDataVideoFromApi(videoId);
+  currentVideoDatas = await getDataVideoFromApi(videoId);
 
-  let samples = convertStringToArray(current_video_datas[0]["measurement_ids"]);
-  tempoMeasure = filterAndSortMeasurementsByIds(measurements,samples)
+  let samples = convertStringToArray(currentVideoDatas[0]["measurement_ids"]);
+  tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
   tempoMeasure.forEach((measure) => {
-    datesMeasurement.push(measure.timestamp)
-    Temperature.push(measure.temperature)
-    Hygrometrie.push(measure.humidity)
+    datesMeasurement.push(measure.timestamp);
+    Temperature.push(measure.temperature);
+    Hygrometrie.push(measure.humidity);
   });
 
-  // Destroy the existing chart instance if it exists
   if (myChart) {
     myChart.destroy();
   }
 
-  // Create a new chart instance
   myChart = new Chart(ctx, {
     type: "line",
     data: {
@@ -209,4 +196,4 @@ async function generateViewMetric(projectId) {
       },
     },
   });
-}
\ No newline at end of file
+}
diff --git a/js/utilities/routes.js b/js/utilities/routes.js
index d547b34..2a528d3 100644
--- a/js/utilities/routes.js
+++ b/js/utilities/routes.js
@@ -26,7 +26,6 @@ function getAllProject() {
     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;
   });
 }