diff --git a/html/projet_detail.html b/html/projet_detail.html
index 839311a..75ec867 100644
--- a/html/projet_detail.html
+++ b/html/projet_detail.html
@@ -26,7 +26,7 @@
       <div class="modal-content">
           <p id="alertMessage">This is a custom alert!</p>
           <div class="modal-buttons">
-              <button class="btn btn-primary"id="cancelBtn">Cancel</button>
+              <button class="btn btn-danger"id="cancelBtn">Cancel</button>
               <button class="btn btn-primary"id="okBtn">OK</button>
           </div>
       </div>
diff --git a/index.html b/index.html
index ff93a76..f82772a 100644
--- a/index.html
+++ b/index.html
@@ -16,7 +16,7 @@
         <div class="modal-content">
             <p id="alertMessage">This is a custom alert!</p>
             <div class="modal-buttons">
-                <button class="btn btn-primary"id="cancelBtn">Cancel</button>
+                <button class="btn btn-danger"id="cancelBtn">Cancel</button>
                 <button class="btn btn-primary"id="okBtn">OK</button>
             </div>
         </div>
diff --git a/js/index.js b/js/index.js
index 45a4ad7..4dafd7e 100644
--- a/js/index.js
+++ b/js/index.js
@@ -54,7 +54,7 @@ function display_projects() {
                 <th><button class="project_detail btn btn-primary">détails de ${
       global_project_list[i].name
     }</button></th>
-                <th><button name="${i}" class="project_delete btn btn-primary">Delete</button></th>
+                <th><button name="${i}" class="project_delete btn btn-danger">Delete</button></th>
                 </tr>`;
   }
   table.innerHTML = datas;
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 3323c2e..ff4cb3a 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -11,7 +11,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   } else {
     console.error("Project not found");
   }
-
   const videoSelector = document.getElementById("video_selector");
   const numberPicker = document.getElementById('number-picker');
   const choiceSelect = document.getElementById('choice');
@@ -22,41 +21,11 @@ document.addEventListener("DOMContentLoaded", async () => {
   const durationInput = document.getElementById('duration');
   const tableImage = document.getElementById("content1");
   const numberBoard = document.getElementById('number-board');
-  const deletePlaceHolder = document.getElementById('delete-placeholder');
-
-  // Populate the video selector and then get the initial videoId
-  await PopulateSelect(videoSelector, projectId);
-  const videoId = videoSelector.value;
-  const videoName = videoSelector.options[videoSelector.selectedIndex].innerHTML;
-
-  if (videoId != -1) {
-    deletePlaceHolder.innerHTML = `
-      <button class="btn btn-primary" id="delete_current">
-        <span> Delete </span>
-      </button>
-    `;
-
-    // Ensure the delete button event listener is added after the button is created
-    document.getElementById('delete_current').addEventListener("click", (event) => {
-      document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer la vidéo : ${videoName} ?`;
-      document.getElementById('customAlert').style.display = 'block';
-
-      document.getElementById('okBtn').onclick = function() {
-        document.getElementById('customAlert').style.display = 'none';
-        // Call your delete function here
-        deleteVideo(videoId);
-      };
-
-      document.getElementById('cancelBtn').onclick = function() {
-        document.getElementById('customAlert').style.display = 'none';
-      };
-    });
-  }
-
   // Add event listeners for the "Début" and "Fin" input fields
   const firstInput = document.getElementById('first');
   const lastInput = document.getElementById('last');
 
+  
   let selectedNumbers = [];
 
   choiceSelect.addEventListener('change', toggleContainers);
@@ -64,38 +33,7 @@ document.addEventListener("DOMContentLoaded", async () => {
   if (addNumberButton) {
     addNumberButton.addEventListener('click', addSelectedNumber);
   }
-
-  videoSelector.addEventListener("change", () => {
-    const newVideoId = videoSelector.value;
-    const newVideoName = videoSelector.options[videoSelector.selectedIndex].innerHTML;
-    generateViewMetric(projectId);
-    if (newVideoId != -1) {
-      deletePlaceHolder.innerHTML = `
-        <button class="btn btn-primary" id="delete_current">
-          <span> Delete </span>
-        </button>
-      `;
-
-      // Re-add the event listener for the new delete button
-      document.getElementById('delete_current').addEventListener("click", (event) => {
-        document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer la vidéo : ${newVideoName} ?`;
-        document.getElementById('customAlert').style.display = 'block';
-
-        document.getElementById('okBtn').onclick = function() {
-          document.getElementById('customAlert').style.display = 'none';
-          // Call your delete function here
-          deleteVideo(videoId)
-        };
-
-        document.getElementById('cancelBtn').onclick = function() {
-          document.getElementById('customAlert').style.display = 'none';
-        };
-      });
-    } else {
-      deletePlaceHolder.innerHTML = '';
-    }
-  });
-
+  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);
@@ -104,10 +42,12 @@ document.addEventListener("DOMContentLoaded", async () => {
   document.getElementById("projets").addEventListener("click", navigateToProjects);
   document.getElementById("toggle-view").addEventListener("click", toggleView);
 
+
   firstInput.addEventListener('input', updateRange);
   lastInput.addEventListener('input', updateRange);
 
   generateViewMetric(projectId);
+  PopulateSelect(videoSelector, projectId);
 
   function toggleContainers() {
     if (choiceSelect.value === 'oneByOne') {
@@ -125,7 +65,6 @@ document.addEventListener("DOMContentLoaded", async () => {
       setRequiredAttributes();
     }
   }
-
   toggleContainers();
 
   function setRequiredAttributes() {
@@ -159,7 +98,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   function hideForm() {
     formContainer.style.display = 'none';
   }
-
   function incrementDuration() {
     durationInput.value = parseInt(durationInput.value) + 1;
   }
@@ -181,19 +119,19 @@ document.addEventListener("DOMContentLoaded", async () => {
       alert('La durée de la vidéo doit être supérieur à 0');
       return 0;
     }
-    if (!checkVideoPath(data, nameVideo) || !nameVideo.length > 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;
+        return 0;
     }
-    const choice = choiceSelect.value;
-    const measurementIds = getMeasurementsIdsFromForm(choice, firstInput, lastInput);
+    const choice = choiceSelect.value
+    const measurementIds = getMeasurementsIdsFromForm(choice,firstInput,lastInput);
     postNewVideo(projectId, measurementIds, nameVideo, videoResolution, videoDuration)
-      .then(() => {
+      .then(()=>{
         alert('Nouvelle vidéo enregistrée :\nNom : ' + nameVideo +
           '\nRésolution : ' + videoResolution +
           '\nDurée : ' + videoDuration + ' secondes');
-      });
+      })
   }
 
   function navigateToProjects() {
@@ -248,7 +186,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) => {
@@ -269,7 +207,8 @@ function populateImageTable(DataMetrics) {
 
 async function generateViewMetric(projectId) {
   const ctx = document.getElementById("metric_viewer").getContext("2d");
-  const videoPlaceHolder = document.getElementById('video-container');
+  const videoPlaceHolder = document.getElementById('video-container')
+  const deletePlaceHolder = document.getElementById('delete-placeholder')
 
   let Hygrometrie = [];
   let Temperature = [];
@@ -288,20 +227,26 @@ async function generateViewMetric(projectId) {
   });
 
   const videoId = document.getElementById("video_selector").value;
-
+  
   measurements = await getDataMetrics(projectId);
   let samples;
-  if (videoId != -1) {
+  if(videoId!=-1){
     currentVideoDatas = await getDataVideoFromApi(videoId);
     samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
-    videoPlaceHolder.innerHTML = `
-      <video width="600" controls>
-        <source src="${api_url}/videos/file/${videoId}" type="video/mp4">
-        Your browser does not support the video tag.
-      </video>`;
-    tempoMeasure = filterAndSortMeasurementsByNumber(measurements, samples);
+    videoPlaceHolder.innerHTML=`
+    <video width="600" controls>
+    <source src="${api_url}/videos/file/${videoId}" type="video/mp4">
+    Your browser does not support the video tag.
+  </video>`
+  deletePlaceHolder.innerHTML=`
+    <button id="delete-video" class="btn btn-danger delete-video-button" data-video-id="${videoId}">Delete Video</button>
+  `
+  document.getElementById("delete-video").addEventListener("click", ()=>{
+    showConfirmationAlert(videoId)
+  })
+  tempoMeasure=filterAndSortMeasurementsByNumber(measurements, samples)
   } else {
-    samples = measurements.map(measurements => measurements.id);
+    samples=measurements.map(measurements => measurements.id);
     tempoMeasure = filterAndSortMeasurementsByIds(measurements, samples);
   }
   tempoMeasure.forEach((measure) => {
@@ -309,7 +254,7 @@ async function generateViewMetric(projectId) {
     Temperature.push(measure.temperature);
     Hygrometrie.push(measure.humidity);
   });
-  populateImageTable(tempoMeasure);
+  populateImageTable(tempoMeasure)
 
   if (myChart) {
     myChart.destroy();
@@ -353,5 +298,23 @@ 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');
+
+  alertMessage.textContent = 'Are you sure you want to delete this video?';
+  customAlert.style.display = 'block';
+
+  okBtn.onclick = function() {
+    deleteVideo(videoId);
+    customAlert.style.display = 'none';
+  };
+
+  cancelBtn.onclick = function() {
+    customAlert.style.display = 'none';
+  };
+}
\ No newline at end of file