diff --git a/css/style.css b/css/style.css
index 622115f..8dcafb6 100644
--- a/css/style.css
+++ b/css/style.css
@@ -170,7 +170,7 @@ body::before {
 }
 
 .frequency-control input[type="number"] {
-  width: 50px;
+  width: 10vw;
   text-align: center;
   background-color: #333;
   border: 1px solid #555;
diff --git a/css/style_projet.css b/css/style_projet.css
index 5fd60c0..5f0384f 100644
--- a/css/style_projet.css
+++ b/css/style_projet.css
@@ -149,3 +149,7 @@
   text-align: center;
   text-transform: uppercase;
 }
+
+.frequency-control input{
+  width: 5vw;
+}
\ No newline at end of file
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 49e4b11..714d310 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -5,100 +5,118 @@ document.addEventListener("DOMContentLoaded", async () => {
   const data = await getAllProject();
   const DataMetrics = await getDataMetrics(projectId);
 
-  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"))
+    for (obj of document.getElementsByClassName("name_project"))
       obj.innerHTML = project.name;
   } else {
     console.error("Project not found");
   }
   const videoSelector = document.getElementById("video_selector");
-  const numberPicker = document.getElementById('number-picker');
-  const choiceSelect = document.getElementById('choice');
-  const oneByOneContainer = document.getElementById('one-by-one-container');
-  const firstLastContainer = document.getElementById('first-last-container');
-  const addNumberButton = document.getElementById('add-number-button');
-  const formContainerProject = document.getElementById('form-container-project');
-  const formContainerCamera = document.getElementById('form-container-camera');
-  const durationInput = document.getElementById('duration');
+  const numberPicker = document.getElementById("number-picker");
+  const choiceSelect = document.getElementById("choice");
+  const oneByOneContainer = document.getElementById("one-by-one-container");
+  const firstLastContainer = document.getElementById("first-last-container");
+  const addNumberButton = document.getElementById("add-number-button");
+  const formContainerProject = document.getElementById(
+    "form-container-project"
+  );
+  const formContainerCamera = document.getElementById("form-container-camera");
+  const durationInput = document.getElementById("duration");
   const tableImage = document.getElementById("content1");
-  const numberBoard = document.getElementById('number-board');
+  const numberBoard = document.getElementById("number-board");
   // Add event listeners for the "Début" and "Fin" input fields
-  const firstInput = document.getElementById('first');
-  const lastInput = document.getElementById('last');
-  const start_timelapse_button = document.getElementById('start-timelapse')
+  const firstInput = document.getElementById("first");
+  const lastInput = document.getElementById("last");
+  const start_timelapse_button = document.getElementById("start-timelapse");
 
   let selectedNumbers = [];
 
-  populateTimelapseLogic(start_timelapse_button, projectId).then( () => {
-    document.getElementById('show-form-button-camera').addEventListener('click', showFormCamera)
-    document.getElementById('close-form-button-camera').addEventListener('click', hideFormCamera)
-    if(document.getElementById('commencer') != null){
-      document.getElementById('commencer').addEventListener('click', async () => {
-        const days = document.getElementById('days').value;
-        const hours = document.getElementById('hours').value;
-        const minutes = document.getElementById('minutes').value;
-        const frequency = days * 1440 + hours * 60 + minutes;
-        start_timelapse(projectId, frequency).then(()=>{
-          location.reload();
-        })
-      })
+  populateTimelapseLogic(start_timelapse_button, projectId).then(() => {
+    document
+      .getElementById("show-form-button-project")
+      .addEventListener("click", showFormCamera);
+    document
+      .getElementById("close-form-button-project")
+      .addEventListener("click", hideFormProject);
+    if (document.getElementById("commencer") != null) {
+      document
+        .getElementById("commencer")
+        .addEventListener("click", async () => {
+          const days = document.getElementById("days").value;
+          const hours = document.getElementById("hours").value;
+          const minutes = document.getElementById("minutes").value;
+          const frequency = days * 1440 + hours * 60 + minutes;
+          start_timelapse(projectId, frequency).then(() => {
+            location.reload();
+          });
+        });
     }
-    if(document.getElementById('stop-camera') != null){
-      document.getElementById('stop-camera').addEventListener('click', async () => {
-        stopCamera(projectId)
-        location.reload();
-      })
-  }
-  }
-  )
+    if (document.getElementById("stop-camera") != null) {
+      document
+        .getElementById("stop-camera")
+        .addEventListener("click", async () => {
+          stopCamera(projectId);
+          location.reload();
+        });
+    }
+  });
 
-  choiceSelect.addEventListener('change', toggleContainers);
+  choiceSelect.addEventListener("change", toggleContainers);
 
   if (addNumberButton) {
-    addNumberButton.addEventListener('click', addSelectedNumber);
+    addNumberButton.addEventListener("click", addSelectedNumber);
   }
   videoSelector.addEventListener("change", () => generateViewMetric(projectId));
-  document.getElementById('show-form-button-camera').addEventListener('click', showFormProject);
-  document.getElementById('close-form-button-project').addEventListener('click', hideFormProject);
-  
-  document.getElementById('increment-button').addEventListener('click', incrementDuration);
-  document.getElementById('decrement-button').addEventListener('click', decrementDuration);
-  document.getElementById('submit').addEventListener('click', handleFormSubmit);
-  document.getElementById("projets").addEventListener("click", navigateToProjects);
+  document
+    .getElementById("show-form-button-camera")
+    .addEventListener("click", showFormProject);
+  document
+    .getElementById("close-form-button-camera")
+    .addEventListener("click", hideFormCamera);
+
+  document
+    .getElementById("increment-button")
+    .addEventListener("click", incrementDuration);
+  document
+    .getElementById("decrement-button")
+    .addEventListener("click", decrementDuration);
+  document.getElementById("submit").addEventListener("click", handleFormSubmit);
+  document
+    .getElementById("projets")
+    .addEventListener("click", navigateToProjects);
   document.getElementById("toggle-view").addEventListener("click", toggleView);
 
-  firstInput.addEventListener('input', updateRange);
-  lastInput.addEventListener('input', updateRange);
+  firstInput.addEventListener("input", updateRange);
+  lastInput.addEventListener("input", updateRange);
 
   generateViewMetric(projectId);
   PopulateSelect(videoSelector, projectId);
-  
 
   function toggleContainers() {
-    if (choiceSelect.value === 'oneByOne') {
-      oneByOneContainer.style.display = 'block';
-      firstLastContainer.style.display = 'none';
+    if (choiceSelect.value === "oneByOne") {
+      oneByOneContainer.style.display = "block";
+      firstLastContainer.style.display = "none";
       populateNumberBoard(DataMetrics.length);
       setRequiredAttributes();
     } else {
-      oneByOneContainer.style.display = 'none';
-      firstLastContainer.style.display = 'block';
-      const last = document.getElementById('last');
+      oneByOneContainer.style.display = "none";
+      firstLastContainer.style.display = "block";
+      const last = document.getElementById("last");
       last.value = DataMetrics.length;
       last.max = DataMetrics.length;
-      document.getElementById('first').max = last.value;
+      document.getElementById("first").max = last.value;
       setRequiredAttributes();
     }
   }
   toggleContainers();
 
   function setRequiredAttributes() {
-    const firstInput = document.getElementById('first');
-    const lastInput = document.getElementById('last');
-    const denominatorInput = document.getElementById('denominator');
+    const firstInput = document.getElementById("first");
+    const lastInput = document.getElementById("last");
+    const denominatorInput = document.getElementById("denominator");
 
-    if (firstLastContainer.style.display === 'block') {
+    if (firstLastContainer.style.display === "block") {
       firstInput.required = true;
       lastInput.required = true;
       denominatorInput.required = true;
@@ -118,18 +136,18 @@ document.addEventListener("DOMContentLoaded", async () => {
   }
 
   function showFormCamera() {
-    formContainerCamera.style.display = 'flex';
+    formContainerCamera.style.display = "flex";
   }
 
   function hideFormCamera() {
-    formContainerCamera.style.display = 'none';
+    formContainerCamera.style.display = "none";
   }
   function showFormProject() {
-    formContainerProject.style.display = 'flex';
+    formContainerProject.style.display = "flex";
   }
 
   function hideFormProject() {
-    formContainerProject.style.display = 'none';
+    formContainerProject.style.display = "none";
   }
   function incrementDuration() {
     durationInput.value = parseInt(durationInput.value) + 1;
@@ -144,28 +162,46 @@ document.addEventListener("DOMContentLoaded", async () => {
   async function handleFormSubmit(event) {
     event.preventDefault();
     const data = await getDataProjectVideosFromApi(projectId);
-    const nameVideo = document.getElementById('name').value;
+    const nameVideo = document.getElementById("name").value;
     const videoDuration = durationInput.value;
-    const videoResolution = document.getElementById('resolution').value;
+    const videoResolution = document.getElementById("resolution").value;
 
     if (videoDuration <= 0) {
-      alert('La durée de la vidéo doit être supérieur à 0');
+      alert("La durée de la vidéo doit être supérieur à 0");
       return 0;
     }
-    if (!checkVideoPath(data, nameVideo) || !nameVideo.length>0) {
-      alert('Le nom : " ' + nameVideo + ' " est déjà pris ou vide ! \n' +
-        'veuillez en trouver un autre');
-        return 0;
+    if (!checkVideoPath(data, nameVideo) || !nameVideo.length > 0) {
+      alert(
+        'Le nom : " ' +
+          nameVideo +
+          ' " est déjà pris ou vide ! \n' +
+          "veuillez en trouver un autre"
+      );
+      return 0;
     }
-    const choice = choiceSelect.value
-    const measurementIds = getMeasurementsIdsFromForm(choice,firstInput,lastInput);
-    postNewVideo(projectId, measurementIds, nameVideo, videoResolution, videoDuration)
-      .then(()=>{
-        alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
-          '\nRésolution : ' + videoResolution +
-          '\nDurée : ' + videoDuration + ' secondes');
-      })
-    
+    const choice = choiceSelect.value;
+    const measurementIds = getMeasurementsIdsFromForm(
+      choice,
+      firstInput,
+      lastInput
+    );
+    postNewVideo(
+      projectId,
+      measurementIds,
+      nameVideo,
+      videoResolution,
+      videoDuration
+    ).then(() => {
+      alert(
+        "Nouvelle vidéo enregistrée :\nNom : " +
+          nameVideo +
+          "\nRésolution : " +
+          videoResolution +
+          "\nDurée : " +
+          videoDuration +
+          " secondes"
+      );
+    });
   }
 
   function navigateToProjects() {
@@ -183,19 +219,21 @@ document.addEventListener("DOMContentLoaded", async () => {
   }
 
   function populateNumberBoard(length) {
-    numberBoard.innerHTML = '';
+    numberBoard.innerHTML = "";
     numberBoard.style.gridTemplateColumns = `repeat(auto-fill, minmax(50px, 1fr))`;
     for (let i = 1; i <= length; i++) {
-      const numberButton = document.createElement('button');
-      numberButton.classList.add('number-button');
+      const numberButton = document.createElement("button");
+      numberButton.classList.add("number-button");
       numberButton.textContent = i;
-      numberButton.addEventListener('click', () => highlightNumber(numberButton));
+      numberButton.addEventListener("click", () =>
+        highlightNumber(numberButton)
+      );
       numberBoard.appendChild(numberButton);
     }
   }
 
   function highlightNumber(button) {
-    button.classList.toggle('highlight');
+    button.classList.toggle("highlight");
   }
 
   function updateRange() {
@@ -218,7 +256,7 @@ function populateImageTable(DataMetrics) {
   const tableBody = document.getElementById("imageSource");
   while (tableBody.rows.length > 0) {
     tableBody.deleteRow(0);
-}
+  }
   let row = document.createElement("tr");
   let i = 0;
   DataMetrics.forEach((measure) => {
@@ -239,8 +277,8 @@ function populateImageTable(DataMetrics) {
 
 async function generateViewMetric(projectId) {
   const ctx = document.getElementById("metric_viewer").getContext("2d");
-  const videoPlaceHolder = document.getElementById('video-container')
-  const deletePlaceHolder = document.getElementById('delete-placeholder')
+  const videoPlaceHolder = document.getElementById("video-container");
+  const deletePlaceHolder = document.getElementById("delete-placeholder");
 
   let Hygrometrie = [];
   let Temperature = [];
@@ -262,29 +300,29 @@ async function generateViewMetric(projectId) {
 
   measurements = await getDataMetrics(projectId);
   let samples;
-  if(videoId!=-1 ){
+  if (videoId != -1) {
     currentVideoDatas = await getDataVideoFromApi(videoId);
     samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
-    if(currentVideoDatas[0].status != 0){
-    videoPlaceHolder.innerHTML=`
+    if (currentVideoDatas[0].status != 0) {
+      videoPlaceHolder.innerHTML = `
     <video class="video" controls>
     <source src="${api_url}/videos/file/${videoId}" type="video/mp4">
     Your browser does not support the video tag.
-  </video>`
+  </video>`;
     } else {
-      videoPlaceHolder.innerHTML=`<h2>La vidéo n'a pas été rendered</h2>`
+      videoPlaceHolder.innerHTML = `<h2>La vidéo n'a pas été rendered</h2>`;
     }
-  deletePlaceHolder.innerHTML=`
+    deletePlaceHolder.innerHTML = `
     <button id="delete-video" class="default-delete-button" data-video-id="${videoId}">Delete Video</button>
-  `
-  document.getElementById("delete-video").addEventListener("click", ()=>{
-    showConfirmationAlert(videoId)
-  })
-  tempoMeasure=filterAndSortMeasurementsByNumber(measurements, samples)
+  `;
+    document.getElementById("delete-video").addEventListener("click", () => {
+      showConfirmationAlert(videoId);
+    });
+    tempoMeasure = filterAndSortMeasurementsByNumber(measurements, samples);
   } else {
-    deletePlaceHolder.innerHTML=''
-    videoPlaceHolder.innerHTML=''
-    samples=measurements.map(measurements => measurements.id);
+    deletePlaceHolder.innerHTML = "";
+    videoPlaceHolder.innerHTML = "";
+    samples = measurements.map((measurements) => measurements.id);
     tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
   }
   tempoMeasure.forEach((measure) => {
@@ -292,7 +330,7 @@ async function generateViewMetric(projectId) {
     Temperature.push(measure.temperature);
     Hygrometrie.push(measure.humidity);
   });
-  populateImageTable(tempoMeasure)
+  populateImageTable(tempoMeasure);
 
   if (myChart) {
     myChart.destroy();
@@ -336,32 +374,32 @@ async function generateViewMetric(projectId) {
         },
       },
     },
-  })
+  });
 }
 function showConfirmationAlert(videoId) {
-  const customAlert = document.getElementById('customAlert');
-  const alertMessage = document.getElementById('alertMessage');
-  const okBtn = document.getElementById('okBtn');
-  const cancelBtn = document.getElementById('cancelBtn');
+  const customAlert = document.getElementById("customAlert");
+  const alertMessage = document.getElementById("alertMessage");
+  const okBtn = document.getElementById("okBtn");
+  const cancelBtn = document.getElementById("cancelBtn");
 
-  alertMessage.textContent = 'Are you sure you want to delete this video?';
-  customAlert.style.display = 'block';
+  alertMessage.textContent = "Are you sure you want to delete this video?";
+  customAlert.style.display = "block";
 
-  okBtn.onclick = function() {
+  okBtn.onclick = function () {
     deleteVideo(videoId);
-    customAlert.style.display = 'none';
+    customAlert.style.display = "none";
   };
 
-  cancelBtn.onclick = function() {
-    customAlert.style.display = 'none';
+  cancelBtn.onclick = function () {
+    customAlert.style.display = "none";
   };
 }
 
 function convertStringToArray(string) {
-  const numberStrings = string.replace(/[{}]/g, '').split(',');
+  const numberStrings = string.replace(/[{}]/g, "").split(",");
 
   // Trim whitespace and convert the string numbers to integers
-  const numberArray = numberStrings.map(num => parseInt(num.trim(), 10));
+  const numberArray = numberStrings.map((num) => parseInt(num.trim(), 10));
 
   return numberArray;
 }
@@ -373,30 +411,37 @@ function filterAndSortMeasurementsByIds(measurements, ids) {
 }
 function filterAndSortMeasurementsByNumber(measurements, Numbers) {
   // Filter measurements based on their position in the Numbers array
-  const filteredMeasurements = Numbers.map(index => measurements[index - 1]).filter(measurement => measurement !== undefined);
+  const filteredMeasurements = Numbers.map(
+    (index) => measurements[index - 1]
+  ).filter((measurement) => measurement !== undefined);
 
   // Sort the filtered measurements by their timestamp
-  return filteredMeasurements.sort((a, b) => new Date(a.timestamp) - new Date(b.timestamp));
+  return filteredMeasurements.sort(
+    (a, b) => new Date(a.timestamp) - new Date(b.timestamp)
+  );
 }
 
 function checkVideoPath(videos, name) {
   let res = true;
-  videos.forEach(video => {
-      const videoName = video.name;
-      if(videoName==name)
-        res=false;
+  videos.forEach((video) => {
+    const videoName = video.name;
+    if (videoName == name) res = false;
   });
   return res;
 }
 
 function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
-  if (choice === 'oneByOne') {
-    const highlightedButtons = document.querySelectorAll('.number-button.highlight');
-    return Array.from(highlightedButtons).map(button => parseInt(button.textContent));
+  if (choice === "oneByOne") {
+    const highlightedButtons = document.querySelectorAll(
+      ".number-button.highlight"
+    );
+    return Array.from(highlightedButtons).map((button) =>
+      parseInt(button.textContent)
+    );
   } else {
     const first = parseInt(firstInput.value);
     const last = parseInt(lastInput.value);
-    const denominator = parseInt(document.getElementById('denominator').value);
+    const denominator = parseInt(document.getElementById("denominator").value);
 
     const measurementIds = new Set();
     measurementIds.add(first); // Always include the first image
@@ -412,63 +457,61 @@ function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
   }
 }
 
-async function populateTimelapseLogic(placeholder,id) {
+async function populateTimelapseLogic(placeholder, id) {
   const data = await getSingleProject(id);
-  if(data.status == 0){
-    placeholder.innerHTML = `<button class="default-button" id="show-form-button-camera">
+  if (data.status == 0) {
+    placeholder.innerHTML = `<button class="default-button" id="show-form-button-project">
               <span> Configurer la caméra </span>
-            </button>`
+            </button>`;
   } else if (data.status == 1) {
-    placeholder.innerHTML = `<button class="btn btn-danger" id="stop-camera">
+    placeholder.innerHTML = `<button class="default-delete-button" id="stop-camera">
               <span> Stopper la prise d'images </span>
-            </button>`} 
-    else {
-    placeholder.innerHTML = ``
+            </button>`;
+  } else {
+    placeholder.innerHTML = ``;
   }
 }
 
 function increment(id) {
   const input = document.getElementById(id);
   input.value = parseInt(input.value) + 1;
-  updateFrequencyText()
+  updateFrequencyText();
 }
 
 function decrement(id) {
   const input = document.getElementById(id);
   if (parseInt(input.value) > 0) {
-      input.value = parseInt(input.value) - 1;
+    input.value = parseInt(input.value) - 1;
   }
-  updateFrequencyText()
+  updateFrequencyText();
 }
 
 function updateFrequencyText() {
-  const days = document.getElementById('days').value;
-  const hours = document.getElementById('hours').value;
-  const minutes = document.getElementById('minutes').value;
+  const days = document.getElementById("days").value;
+  const hours = document.getElementById("hours").value;
+  const minutes = document.getElementById("minutes").value;
 
   const frequencyText = `une image sera prise toutes les ${days} jours ${hours} heures ${minutes} minutes`;
-  document.getElementById('frequency-text').innerHTML = frequencyText;
+  document.getElementById("frequency-text").innerHTML = frequencyText;
 }
 
-$( ".arrow-icon" ).click(function() {
+$(".arrow-icon").click(function () {
   $(this).toggleClass("open");
 });
 
 let titleIsReadable = true;
 
-function change_title_style(){
-  const xyz = document.getElementById('xyzv');
-  const h3_title = document.getElementById('h3-title');
-  if(titleIsReadable){
+function change_title_style() {
+  const xyz = document.getElementById("xyzv");
+  const h3_title = document.getElementById("h3-title");
+  if (titleIsReadable) {
     titleIsReadable = false;
-    xyz.style.display = 'block';
-    h3_title.style.display = 'none';
+    xyz.style.display = "block";
+    h3_title.style.display = "none";
   } else {
     titleIsReadable = true;
-    xyz.style.display = 'none';
-    h3_title.style.display = 'block';
+    xyz.style.display = "none";
+    h3_title.style.display = "block";
   }
- 
-
-} 
-change_title_style();
\ No newline at end of file
+}
+change_title_style();