diff --git a/public/name_form.html b/public/name_form.html
deleted file mode 100644
index d3e44290..00000000
--- a/public/name_form.html
+++ /dev/null
@@ -1,28 +0,0 @@
-<!DOCTYPE html>
-<html lang="fr">
-  <head>
-    <meta charset="utf-8">
-    <meta name="referrer" content="same-origin">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-
-    <title>Framadate</title>
-
-    <meta name="description" content=" ">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
-
-    <link crossorigin="anonymous" rel="stylesheet" href="https://rawgit.com/twbs/bootstrap/v4-dev/dist/css/bootstrap-reboot.css">
-    <link rel="stylesheet" href="style.css">
-  </head>
-
-  <body>
-
-    <form>
-      <label>Nom :
-        <input type="text" name="name" placeholder="Bob"/>
-      </label>
-      <button type="submit">Valider</button>
-      <p class="example">Par exemple : Stéphane ou Caroline</p>
-    </form>
-
-  </body>
-</html>
diff --git a/public/parametres.html b/public/parametres.html
index 9a3996dc..266eee0f 100644
--- a/public/parametres.html
+++ b/public/parametres.html
@@ -19,7 +19,7 @@
 
     <section>
       <p>
-      Je m'appelle <a href="name_form.html" id="name">henri</a>
+      Je m'appelle <input type="text" name="name" id="name" value="Henri">
       et le titre de ce sondage
       <select id="type_sondage">
         <option>classique</option>
diff --git a/public/script.js b/public/script.js
index 022ce157..65431fa2 100644
--- a/public/script.js
+++ b/public/script.js
@@ -10,14 +10,16 @@ const debugStorage = () => {
   }
 }
 
-var nameFieldLink = $("#name").addEventListener("click", (e) => {
+$("#name").outerHTML = `<span id="name" class="toggle-field">${$("#name").getAttribute('value')}</span>`;
+
+$("#name").addEventListener("click", (e) => {
   e.preventDefault();
-  console.log("click sur le name");
-  createModal("truc");
+  createModal(`<input type="text" name="name" id="nameUpdateField" value="${e.target.textContent}"><button id="submitTextField" data-reference="name">></button>`);
 });
 
 const removeOverlay = () => {
   $('body').removeChild($('.overlay'))
+  $('body').removeChild($('.modal'))
 }
 
 const createModal = (text) => {
@@ -27,11 +29,17 @@ const createModal = (text) => {
   popin.innerHTML = text
   popin.className = 'modal'
   overlay.className = 'overlay'
-  overlay.appendChild(popin)
+  $('body').appendChild(overlay)
+  $('body').appendChild(popin)
+
   overlay.addEventListener('click', removeOverlay)
   $('body').insertBefore(overlay, $('main'))
-}
 
+  $("#submitTextField").addEventListener("click", () => {
+    $("#name").innerHTML = $("#nameUpdateField").value
+    removeOverlay()
+  });
+}
 
 $$('input').forEach((inputElement) => {
   inputElement.addEventListener("change", () => {
diff --git a/public/style.css b/public/style.css
index ae14a052..726e7998 100644
--- a/public/style.css
+++ b/public/style.css
@@ -58,10 +58,12 @@ input[type="text"], input[type="email"] {
   width: 100%;
   z-index: 5;
 }
+
 .modal {
   background: #fff;
   top: 10%;
   left: 40%;
   padding: 10px;
   position: absolute;
+  z-index: 10;
 }
