diff --git a/css/style.css b/css/style.css
index c7e61cc..010f2f0 100644
--- a/css/style.css
+++ b/css/style.css
@@ -209,4 +209,51 @@ footer{
 }
 #video-container{
   margin-bottom: 15px;
-}
\ No newline at end of file
+}
+.modal {
+  display: none;
+  position: fixed;
+  z-index: 1;
+  left: 0;
+  top: 0;
+  background-color: rgba(0, 0, 0, 0.6); /* Darker background */
+}
+
+.modal-content {
+  background-color: #fff;
+  padding: 20px;
+  border: 2px solid #ff0000; /* Red border */
+  width: 40% !important; /* Fixed width for a smaller modal */
+  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3); /* Add shadow for emphasis */
+  border-radius: 8px; /* Rounded corners */
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%); /* Center the modal */
+}
+
+.modal-buttons {
+  text-align: center; /* Center buttons */
+  margin-top: 20px;
+}
+
+.modal-buttons button {
+  background-color: #ff0000; /* Red buttons */
+  color: white;
+  border: none;
+  padding: 10px 20px;
+  margin: 5px;
+  cursor: pointer;
+  border-radius: 5px;
+  font-size: 16px;
+}
+
+.modal-buttons button:hover {
+  background-color: #cc0000; /* Darker red on hover */
+}
+
+#alertMessage {
+  color: #ff0000; /* Red text */
+  font-size: 18px;
+  text-align: center;
+}
diff --git a/index.html b/index.html
index 535c7c8..ff93a76 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,15 @@
 </head>
 
 <body>
+    <div id="customAlert" class="modal">
+        <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-primary"id="okBtn">OK</button>
+            </div>
+        </div>
+    </div>
     <div id="form-container" class="form-container" style="display: none">
       <div class="form-content" id="place-of-form">
         <button id="close-form-button" class="close-button">&times;</button>
diff --git a/js/index.js b/js/index.js
index 4320cce..45a4ad7 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,7 +2,8 @@
 function display_projects() {
   // Get data from API and then generate HTML code to display the data in a table
   const table = document.getElementById("table-projects");
-  const formContainer=document.getElementById('form-container')
+  const formContainer = document.getElementById('form-container');
+
   function showForm() {
     formContainer.style.display = 'flex';
   }
@@ -10,28 +11,28 @@ function display_projects() {
   function hideForm() {
     formContainer.style.display = 'none';
   }
+
   document.getElementById('show-form-button').addEventListener('click', showForm);
   document.getElementById('close-form-button').addEventListener('click', hideForm);
   document.getElementById('submit').addEventListener('click', handleFormSubmit);
 
-
   async function handleFormSubmit() {
     const nameProject = document.getElementById('name').value;
     const description = document.getElementById('description').value;
-    if(nameProject.length==0 || !checkName(global_project_list, nameProject)){
+    if (nameProject.length === 0 || !checkName(global_project_list, nameProject)) {
       alert('Le nom : " ' + nameProject + ' " est déjà pris ou vide ! \n' +
         'veuillez en trouver un autre');
       return 0;
     }
-    PostNewProject(nameProject,description);
+    PostNewProject(nameProject, description);
   }
 
   function checkName(Projects, name) {
     let res = true;
     Projects.forEach(project => {
-        const ProjectName = project.name;
-        if(ProjectName==name)
-          res=false;
+      const ProjectName = project.name;
+      if (ProjectName === name)
+        res = false;
     });
     return res;
   }
@@ -51,27 +52,47 @@ function display_projects() {
                 <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>test</th>
+      global_project_list[i].name
+    }</button></th>
+                <th><button name="${i}" class="project_delete btn btn-primary">Delete</button></th>
                 </tr>`;
   }
   table.innerHTML = datas;
 
-  // Select all the buttons with the class button_project
-  const buttons = document.getElementsByClassName("project_detail");
+  // Select all the buttons_access with the class button_project
+  const buttons_access = document.getElementsByClassName("project_detail");
+  const buttons_delete = document.getElementsByClassName("project_delete");
   // Add an event listener to each button
-  for (let i = 0; i < buttons.length; i++) {
-    buttons[i].addEventListener("click", (event) => {
+  for (let i = 0; i < buttons_access.length; i++) {
+    buttons_access[i].addEventListener("click", (event) => {
       // Send data to API and then navigate to projet_detail.html page
       window.location.href = `html/projet_detail.html?id=${global_project_list[i].id}`;
     });
-    buttons[i].addEventListener("onclick", (event) => {
+    buttons_access[i].addEventListener("click", (event) => {
       // Send data to API and then navigate to projet_detail.html page
       current_project = change_current_project(i);
     });
   }
+
+  for (let i = 0; i < buttons_delete.length; i++) {
+    buttons_delete[i].addEventListener("click", (event) => {
+      const projectName = global_project_list[i].name;
+      document.getElementById('alertMessage').textContent = `Veux-tu vraiment supprimer le projet : ${projectName} ?`;
+      document.getElementById('customAlert').style.display = 'block';
+
+      document.getElementById('okBtn').onclick = function() {
+        document.getElementById('customAlert').style.display = 'none';
+        // Call your delete function here
+        deleteProject(global_project_list[i].id);
+      };
+
+      document.getElementById('cancelBtn').onclick = function() {
+        document.getElementById('customAlert').style.display = 'none';
+      };
+    });
+  }
 }
+
 getAllProject()
   .then((project_list) => {
     global_project_list = project_list;
diff --git a/js/utilities/routes.js b/js/utilities/routes.js
index 81c0b31..4457ce0 100644
--- a/js/utilities/routes.js
+++ b/js/utilities/routes.js
@@ -99,6 +99,9 @@ async function postNewVideo(project_id, measurements_id, name_video, resolution,
 }
 async function PostNewProject(nameProject, description){
   try {
+    if(description.length==0){
+      description="Non renseignée"
+    }
     const mydata = JSON.stringify({
       name: nameProject,
       description: description
@@ -116,4 +119,18 @@ async function PostNewProject(nameProject, description){
     console.error("Error posting video:", error);
     throw error;
   }
+}
+
+async function deleteProject(id){
+  try {
+      const response = await $.ajax({
+        url: api_url.concat(`/projects/${id}`),
+        method: "DELETE",
+      }).then(()=>{
+        alert("Projet supprimé avec succès")
+      })
+  } catch (error) {
+    console.error("Error deleting project, project id :"+ id+"\n error :"+error);
+    throw error;
+  }
 }
\ No newline at end of file
