diff --git a/css/style.css b/css/style.css
index c23d400..c7e61cc 100644
--- a/css/style.css
+++ b/css/style.css
@@ -204,4 +204,9 @@ footer {
 .close-button:hover {
   background-color: darkred;
 }
-
+footer{
+  margin-top: 15px;
+}
+#video-container{
+  margin-bottom: 15px;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index a0f48b1..535c7c8 100644
--- a/index.html
+++ b/index.html
@@ -13,7 +13,7 @@
 
 <body>
     <div id="form-container" class="form-container" style="display: none">
-      <div class="form-content">
+      <div class="form-content" id="place-of-form">
         <button id="close-form-button" class="close-button">&times;</button>
         <h1>Formulaire</h1>
         <div id="my-form">
@@ -32,7 +32,7 @@
         <div class="buttons-container mb-4">
             <button class="btn btn-primary" id="video" ><span>Mes vidéos</span></button>
             <button class="btn btn-primary" id="download" ><span>Download App</span></button>
-            <button class="btn btn-primary" id="add-project"><span>+</span></button>
+            <button class="btn btn-primary" id="show-form-button"><span>+</span></button>
         </div>
 
         <table class="table table-striped" id="table-projects">
diff --git a/js/index.js b/js/index.js
index e1c80bf..4320cce 100644
--- a/js/index.js
+++ b/js/index.js
@@ -2,16 +2,47 @@
 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 form = document.getElementById("add-project")
-  form.addEventListener('click', () => {
-    console.log("test")
-  });
+  const formContainer=document.getElementById('form-container')
+  function showForm() {
+    formContainer.style.display = 'flex';
+  }
+
+  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)){
+      alert('Le nom : " ' + nameProject + ' " est déjà pris ou vide ! \n' +
+        'veuillez en trouver un autre');
+      return 0;
+    }
+    PostNewProject(nameProject,description);
+  }
+
+  function checkName(Projects, name) {
+    let res = true;
+    Projects.forEach(project => {
+        const ProjectName = project.name;
+        if(ProjectName==name)
+          res=false;
+    });
+    return res;
+  }
+
   let datas = `<tr>
                 <th>Id</th>
                 <th>Name</th>
                 <th>Date</th>
                 <th>Status</th>
                 <th>Actions</th>
+                <th>Delete Project</th>
                 </tr> `;
   for (let i = 0; i < global_project_list.length; i++) {
     datas += `<tr>
@@ -22,6 +53,7 @@ function display_projects() {
                 <th><button class="project_detail btn btn-primary">détails de ${
                   global_project_list[i].name
                 }</button></th>
+                <th>test</th>
                 </tr>`;
   }
   table.innerHTML = datas;
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 592ebdb..8d11c18 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -21,6 +21,11 @@ document.addEventListener("DOMContentLoaded", async () => {
   const durationInput = document.getElementById('duration');
   const tableImage = document.getElementById("content1");
   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');
+
+  
   let selectedNumbers = [];
 
   choiceSelect.addEventListener('change', toggleContainers);
@@ -37,9 +42,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   document.getElementById("projets").addEventListener("click", navigateToProjects);
   document.getElementById("toggle-view").addEventListener("click", toggleView);
 
-  // Add event listeners for the "Début" and "Fin" input fields
-  const firstInput = document.getElementById('first');
-  const lastInput = document.getElementById('last');
 
   firstInput.addEventListener('input', updateRange);
   lastInput.addEventListener('input', updateRange);
@@ -96,7 +98,6 @@ document.addEventListener("DOMContentLoaded", async () => {
   function hideForm() {
     formContainer.style.display = 'none';
   }
-
   function incrementDuration() {
     durationInput.value = parseInt(durationInput.value) + 1;
   }
@@ -233,7 +234,7 @@ async function generateViewMetric(projectId) {
     samples = JSON.parse(currentVideoDatas[0]["measurement_ids"]);
     videoPlaceHolder.innerHTML=`
     <video width="600" controls>
-    <source src="https://timelapse.kerboul.me/api/cat" type="video/mp4">
+    <source src="${api_url}/videos/file/${videoId}" type="video/mp4">
     Your browser does not support the video tag.
   </video>`
   tempoMeasure=filterAndSortMeasurementsByNumber(measurements, samples)
diff --git a/js/utilities/routes.js b/js/utilities/routes.js
index d18bdc9..81c0b31 100644
--- a/js/utilities/routes.js
+++ b/js/utilities/routes.js
@@ -82,7 +82,6 @@ async function postNewVideo(project_id, measurements_id, name_video, resolution,
       resolution: resolution,
       duration: duration
     });
-    console.log(mydata);
 
     const response = await $.ajax({
       url: api_url.concat(`/videos/`),
@@ -98,18 +97,23 @@ async function postNewVideo(project_id, measurements_id, name_video, resolution,
     throw error;
   }
 }
-
-async function getVideoFromApi(id) {
+async function PostNewProject(nameProject, description){
   try {
-    const response = await $.ajax({
-      url: api_url.concat(`/cat/`),
-      method: "GET",
-      dataType: "json",
+    const mydata = JSON.stringify({
+      name: nameProject,
+      description: description
     });
-    // If the request is successful, store the data in the cache and return it
-    return response;
+    const response = await $.ajax({
+      url: api_url.concat(`/projects`),
+      method: "POST",
+      dataType: "json",
+      contentType: "application/json",
+      data: mydata
+    });
+
+    console.log("Video posted successfully:", response);
   } catch (error) {
-    console.error("Error fetching data:", error);
-    throw error; // Re-throw the error to handle it outside the function if needed
+    console.error("Error posting video:", error);
+    throw error;
   }
 }
\ No newline at end of file
diff --git a/js/utilities/tools.js b/js/utilities/tools.js
index 40104f8..16e1658 100644
--- a/js/utilities/tools.js
+++ b/js/utilities/tools.js
@@ -30,6 +30,8 @@ function checkVideoPath(videos, name) {
   return res;
 }
 
+
+
 function getMeasurementsIdsFromForm(choice, firstInput, lastInput) {
   if (choice === 'oneByOne') {
     const highlightedButtons = document.querySelectorAll('.number-button.highlight');
