diff --git a/html/projet_detail.html b/html/projet_detail.html
index e8eb867..33791cf 100644
--- a/html/projet_detail.html
+++ b/html/projet_detail.html
@@ -39,6 +39,19 @@
                 <input type="number" id="duration" name="duration" value="0" min="0" required>
                 <button type="button" id="increment-button">+</button>
             </div>
+            <label for="choice">Choose Option:</label>
+            <select id="choice" name="choice">
+                <option value="firstLast">First and Last</option>
+                <option value="oneByOne">One by One</option>
+            </select>
+            <br><br>
+            <div id="one-by-one-container" style="display: none;">
+                <label for="number-picker">Pick a Number:</label>
+                <select id="number-picker" name="number-picker"></select>
+                <button type="button" id="add-number-button">Add Number</button>
+            </div>
+            <br><br>
+            <div id="result-container"></div>
             <br><br>
             <button class="btn btn-primary" type="submit">Soumettre</button>
         </form>
diff --git a/js/projet_detail.js b/js/projet_detail.js
index 4e68e0c..1e18393 100644
--- a/js/projet_detail.js
+++ b/js/projet_detail.js
@@ -1,11 +1,41 @@
 let myChart; // Declare a global variable to hold the chart instance
 
-document.addEventListener("DOMContentLoaded", () => {
+document.addEventListener("DOMContentLoaded", async () => {
   // Objects / variables
   const video_selector = document.getElementById("video_selector");
   const urlParams = new URLSearchParams(window.location.search);
   const projectId = urlParams.get("id");
 
+  const data = await getAllProject();
+  document.getElementById("name_project").innerHTML = data[projectId].name;
+
+  
+const numbers = [1, 25, 68, 74]; // Example array of numbers
+const numberPicker = document.getElementById('number-picker');
+const resultContainer = document.getElementById('result-container');
+const choiceSelect = document.getElementById('choice');
+const oneByOneContainer = document.getElementById('one-by-one-container');
+const addNumberButton = document.getElementById('add-number-button');
+
+let selectedNumbers = [];
+
+  choiceSelect.addEventListener('change', () => {
+    if (choiceSelect.value === 'oneByOne') {
+        oneByOneContainer.style.display = 'block';
+    } else {
+        oneByOneContainer.style.display = 'none';
+    }
+});
+
+// Add number to selectedNumbers array
+addNumberButton.addEventListener('click', () => {
+    const selectedNumber = parseInt(numberPicker.value, 10);
+    if (!selectedNumbers.includes(selectedNumber)) {
+        selectedNumbers.push(selectedNumber);
+        numberPicker.remove(numberPicker.selectedIndex);
+    }
+});
+
   // Initialisation
   generateViewMetric(projectId);
 
@@ -61,9 +91,7 @@ document.getElementById('my-form').addEventListener('submit', async function(eve
     current_project = "";
   });
 
-  global_project_list = JSON.parse(localStorage.getItem("project_list"));
-  document.getElementById("name_project").innerHTML =
-    global_project_list[projectId - 1].name;
+
 
   fetch("https://timelapse.kerboul.me/api/smile")
     .then((response) => response.blob())