diff --git a/css/style.css b/css/style.css
index ee2ba65..d3b2bfb 100644
--- a/css/style.css
+++ b/css/style.css
@@ -40,4 +40,56 @@ footer {
 }
 #addVideoHandler{
   display: flex;
+}
+
+#show-form-button {
+  left: 20px;
+}
+
+.form-container {
+  z-index: 25;
+  display: none;
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.5);
+  justify-content: center;
+  align-items: center;
+}
+
+.form-content {
+  background-color: #fff;
+  padding: 20px;
+  border-radius: 8px;
+  text-align: center;
+}
+
+.form-content h1 {
+  margin: 0;
+}
+
+#close-form-button {
+  margin-top: 20px;
+}
+
+.duration-input {
+  display: flex;
+  align-items: center;
+}
+
+.duration-input button {
+  width: 30px;
+  height: 30px;
+  margin: 0 5px;
+}
+
+.duration-input input {
+  width: 50px;
+  text-align: center;
+}
+
+#close-form-button {
+  margin-top: 20px;
 }
\ No newline at end of file
diff --git a/html/projet_detail.html b/html/projet_detail.html
index 94314bd..79c6b1d 100644
--- a/html/projet_detail.html
+++ b/html/projet_detail.html
@@ -19,6 +19,26 @@
   <link href="https://cdn.jsdelivr.net/npm/select2@4.1.0/dist/css/select2.min.css" rel="stylesheet" />
 </head>
 <body>
+  <!-- formulaire -->
+    <div id="form-container" class="form-container">
+        <div class="form-content">
+          <form id="my-form">
+            <label for="name">Nom :</label>
+            <input type="text" id="name" name="name" required>
+            <br><br>
+            <label for="duration">Durée (en secondes) :</label>
+            <div class="duration-input">
+                <button type="button" id="decrement-button">-</button>
+                <input type="number" id="duration" name="duration" value="0" min="0" required>
+                <button type="button" id="increment-button">+</button>
+            </div>
+            <br><br>
+            <button class="btn btn-primary" type="submit">Soumettre</button>
+        </form>
+            <button class="btn btn-primary" id="close-form-button">Fermer</button>
+        </div>
+    </div>
+  <!-- page classique -->
   <div id="section" class="container mt-5">
     <div class="row">
       <div class="col-md-12">
@@ -40,7 +60,7 @@
           <select name="videos" id="video_selector" class="select2">
           </select>
           <div class="buttons-container">
-            <button class="btn btn-primary" id="projets">
+            <button class="btn btn-primary" id="show-form-button">
               <span> + </span>
             </button>
           </div>
@@ -69,9 +89,6 @@
                     export images
                   </button></th>
               </tr>
-              <tr>
-                <th colspan="3" scope="col">images</th>
-              </tr>
             </thead>
             <tbody id="imageSource"></tbody>
           </table>
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 696acb6..8829a81 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -15,6 +15,32 @@ document.addEventListener("DOMContentLoaded", () => {
     generateViewMetric(projectId);
   });
 
+  // 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) {
+      durationInput.value = parseInt(durationInput.value) - 1;
+  }
+});
+
+document.getElementById('my-form').addEventListener('submit', function(event) {
+  event.preventDefault();
+  alert('Nouveau Projet enregistré :\nNom : ' + document.getElementById('name').value + '\nDurée : ' + document.getElementById('duration').value + ' secondes');
+});
+
   document.getElementById("projets").addEventListener("click", () => {
     window.location.href = "../index.html";
     current_project = "";
