diff --git a/Cargo.lock b/Cargo.lock
index 9f42256..8cbb0b7 100644
--- a/Cargo.lock
+++ b/Cargo.lock
@@ -437,7 +437,7 @@ checksum = "baf1de4339761588bc0619e3cbc0120ee582ebb74b53b4efbf79117bd2da40fd"
 
 [[package]]
 name = "cheezenotes"
-version = "0.1.0"
+version = "0.2.0"
 dependencies = [
  "actix-files",
  "actix-web",
diff --git a/Cargo.toml b/Cargo.toml
index 4ac4247..cc38a69 100644
--- a/Cargo.toml
+++ b/Cargo.toml
@@ -1,6 +1,6 @@
 [package]
 name = "cheezenotes"
-version = "0.1.0"
+version = "0.2.0"
 edition = "2021"
 
 # See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html
diff --git a/pages/BPCE-SI-Notes.md b/pages/BPCE-SI-Notes.md
index 9051907..77c5f55 100644
--- a/pages/BPCE-SI-Notes.md
+++ b/pages/BPCE-SI-Notes.md
@@ -18,4 +18,8 @@
 ## Suivi Anaïs
 - [Feedback 27/01/2023](anais-feedback-27-01-2023)
 ## Contacts
-- [Contacts](contacts-bpce-si)
\ No newline at end of file
+- [Contacts](contacts-bpce-si)
+## Clients
+- [Clients](clients-bpce-si)
+## Bidouille
+- [bidouille]()
\ No newline at end of file
diff --git a/pages/bidouille.md b/pages/bidouille.md
new file mode 100644
index 0000000..14234cf
--- /dev/null
+++ b/pages/bidouille.md
@@ -0,0 +1,13 @@
+[retour](BPCE-SI-Notes)
+[](\\Prdgce7v2115\d\gcedoc\referentielproduction\clients\csctrmif\csctrmif\Documents)
+[](\\Prdgce7v2116\d\gcedoc\referentielproduction\clients\csctrmif\csctrmif\Documents)
+[](\\Prdgce7v2117\d\gcedoc\referentielproduction\clients\csctrmif\csctrmif\Documents)
+[](\\Prdgce7v2118\d\gcedoc\referentielproduction\clients\csctrmif\csctrmif\Documents)
+[](\\Prdgce7v2119\d\gcedoc\referentielproduction\clients\csctrmif\csctrmif\Documents)
+[](\\Prdgce7v2120\d\gcedoc\referentielproduction\clients\csctrmif\csctrmif\Documents)
+[](\\Prdgce7v2121\d\gcedoc\referentielproduction\clients\csctrmif\csctrmif\Documents)
+[](\\Prdgce7v2122\d\gcedoc\referentielproduction\clients\csctrmif\csctrmif\Documents)
+[](\\Prdgce7v2123\d\gcedoc\referentielproduction\clients\csctrmif\csctrmif\Documents)
+[](\\Prdgce7v2124\d\gcedoc\referentielproduction\clients\csctrmif\csctrmif\Documents)
+[](\\Prdgce7v2125\d\gcedoc\referentielproduction\clients\csctrmif\csctrmif\Documents)
+[](\\Prdgce7v2126\d\gcedoc\referentielproduction\clients\csctrmif\csctrmif\Documents)
diff --git a/pages/clients-bpce-si.md b/pages/clients-bpce-si.md
new file mode 100644
index 0000000..0b79833
--- /dev/null
+++ b/pages/clients-bpce-si.md
@@ -0,0 +1,7 @@
+[retour](BPCE-SI-Notes)
+# Clients
+| Env | Etab. | No pers. | SIREN | Commentaire |
+| VFO| 11315| 075161690| 378140776| |
+| VFO| 11315| 501051182| 832124945| |
+| VFO| 11315| 500181958| 819524851| |
+| UTI| 11315| 502306706| 808056030| |
\ No newline at end of file
diff --git a/pages/notes.md b/pages/notes.md
index 011854b..7b680d2 100644
--- a/pages/notes.md
+++ b/pages/notes.md
@@ -1,5 +1,7 @@
 [Accueil](accueil)
 # Notes
+## BPCE-SI
+- [Notes](BPCE-SI-Notes)
 ## Rust
 *  [Idées](perso-idees)
 *  [Crates](perso-crates)
@@ -13,6 +15,4 @@
 ## Avec les enfants
 - [Bricolages]()
 - [mini-golf]()
-- [Livres](livres enfants)
-## BPCE-SI
-- [Notes](BPCE-SI-Notes)
\ No newline at end of file
+- [Livres](livres enfants)
\ No newline at end of file
diff --git a/static/cheezenotes.css b/static/cheezenotes.css
index c04fe93..0792824 100644
--- a/static/cheezenotes.css
+++ b/static/cheezenotes.css
@@ -35,24 +35,53 @@ body {
   background-color: #f6f6f6;
 }
 
-button {
-  width: 2.2rem;
-  height: 2.2rem;
-}
-
 div#buttons {
+  background-color: #f6f6f6;
+  content: "";
+  clear: both;
   position: fixed;
-  background-color: #dddddddd;
-  border-bottom: 3px solid #ccccccdd;
   top: 0;
   left: 0;
   right: 0;
-  height: 3rem;
   margin-left: auto;
   margin-right: auto;
   max-width: 1200;
 }
 
+div#buttons button.button {
+  margin: 0.2rem;
+  margin-right: 0;
+  margin-left: 0;
+  height: 3rem;
+  width: 3rem;
+  background-color: #eeeeee;
+  border: 1px solid #cccccc;
+  border-right: none;
+}
+
+div#buttons button.floatright {
+  float: right;
+}
+
+div#buttons button.rightborder {
+  border-right: 1px solid #cccccc;
+}
+
+div#buttons button.separator {
+  background-color: transparent;
+  color: #bbbbbb;
+  border: none;
+  border-left: 1px solid #cccccc;
+  height: 3rem;
+  margin: 0.2rem;
+  margin-right: 0;
+  margin-left: 0;
+}
+
+div#buttons button.onoffbutton.buttonon {
+  background-color: #aaaaaa;
+}
+
 div#buttons #taButtonLabel {
   position: relative;
   font-size: 1.8rem;
@@ -96,9 +125,9 @@ div#cheezenotes {
   overflow-x: auto;
 }
 
-div#cheezenotes div.cheezenotes_line {
+/*div#cheezenotes div.cheezenotes_line {*/
   /* Pour firefox : white-space: pre; */
-}
+/*}*/
 
 div#cheezenotes span.tokenfictif {
   font-weight: 1;
@@ -257,8 +286,6 @@ div#cheezenotes div.lasttablerow span.tablerow {
   border-bottom: none;
 }
 
-
-
 div#cheezenotes div.cheezenotes_line span.token {
   font-weight: 1;
   color: #1353b3;
@@ -270,7 +297,7 @@ div#cheezenotes div.cheezenotes_line span.token {
 }
 
 div#cheezenotes:focus div.cheezenotes_line span.token {
-  font-size: inherit;
+  font-size: 95%;
 }
 
 div#cheezenotes div.body {
diff --git a/static/modules/cheezenotes.js b/static/modules/cheezenotes.js
index 9b363e2..1f805ac 100644
--- a/static/modules/cheezenotes.js
+++ b/static/modules/cheezenotes.js
@@ -1,6 +1,16 @@
 import { saveSelection, loadSelection, insertTextAtCaret } from './caret.js';
 import { formatLine, load, save, formatTable, redrawTables, appendData, dpwidth } from './md.js';
 
+const showtokens = [
+    { fontSize: 0 },
+    { fontSize: '95%' }
+];
+
+const hidetokens = [
+    { fontSize: '95%' },
+    { fontSize: 0 }
+];
+
 function timeoutSave() {
     if (window.tos !== null) {
         window.clearTimeout(window.tos);
@@ -8,9 +18,24 @@ function timeoutSave() {
     window.tos = window.setTimeout(onsave, 5000);
 }
 
+function showTokens() {
+    let tokens = document.getElementsByClassName('token');
+    for (let i = 0; i < tokens.length; i++) {
+        tokens[i].animate(showtokens, { duration: 200, iterations: 1 });
+    }
+}
+
+function hideTokens() {
+    let tokens = document.getElementsByClassName('token');
+    for (let i = 0; i < tokens.length; i++) {
+        tokens[i].animate(hidetokens, { duration: 200, iterations: 1 });
+    }
+}
+
 function ontextarea(e) {
     let ta = document.getElementById('ta');
-    if (ta.style.display != 'inline') {
+    let taButton = document.getElementById('taButton');
+    if (taButton.classList.contains('buttonoff')) {
         ta.style.display = 'inline';
     } else {
         ta.style.display = 'none';
@@ -173,36 +198,127 @@ function ondragleave(e) {
     // alert('leave')
 }
 
-function init(pagename = null) {
-    let cheezenotesdiv = document.getElementById('cheezenotes');
-
-    dpwidth(cheezenotesdiv);
-
-    cheezenotesdiv.addEventListener('input', onedit);
-    cheezenotesdiv.addEventListener('keyup', onkeyup);
-    cheezenotesdiv.addEventListener('keypress', onkeypress);
-    cheezenotesdiv.addEventListener('keydown', onkeydown);
-    cheezenotesdiv.addEventListener('paste', onpaste);
-    cheezenotesdiv.addEventListener('copy', oncopy);
-    cheezenotesdiv.addEventListener('blur', () => { redrawTables(cheezenotesdiv); onsave() });
-    cheezenotesdiv.addEventListener('focus', () => { redrawTables(cheezenotesdiv, dpwidth()); });
-    cheezenotesdiv.addEventListener('drag', ondrag);
-    cheezenotesdiv.addEventListener('dragenter', ondragenter);
-    cheezenotesdiv.addEventListener('dragleave', ondragleave);
+function addButton(id, icon, onclick) {
+    let buttons = document.getElementById('buttons');
+    let button = document.createElement('button');
+    button.id = id;
+    button.classList.add('button');
+    button.classList.add('material-icons');
+    button.innerText = icon;
+    button.addEventListener('mousedown', onclick);
+    buttons.appendChild(button);
+    return button;
+}
 
-    let saveButton = document.getElementById('saveButton');
-    saveButton.disabled = true;
-    saveButton.addEventListener('click', onsave);
-    let taButton = document.getElementById('taButton');
-    taButton.addEventListener('click', ontextarea);
-    let lockButton = document.getElementById('lockButton');
-    lockButton.addEventListener('click', onlockbutton);
+function addOnOffButton(id, icon, alt_icon, onclick, on = false) {
+    let button;
+    if (on == true) {
+        button = addButton(id, icon, onclick);
+        button.classList.add('onoffbutton');
+        button.classList.add('buttonon');
+    } else {
+        button = addButton(id, alt_icon, onclick);
+        button.classList.add('onoffbutton');
+        button.classList.add('buttonoff');
+    }
+    button.addEventListener('click', function (e) {
+        if (button.classList.contains('buttonon')) {
+            button.classList.remove('buttonon');
+            button.classList.add('buttonoff');
+            button.innerText = alt_icon;
+        } else {
+            button.classList.remove('buttonoff');
+            button.classList.add('buttonon');
+            button.innerText = icon;
+        }
+    });
+    return button;
+}
+
+function lastButton(button) {
+    button.classList.add('rightborder');
+    return button;
+}
+
+function floatRight(button) {
+    button.classList.add('floatright');
+    return button;
+}
+
+function addSeparator() {
+    let separator = addButton('', 'more_vert', function () { });
+    separator.classList.add('separator');
+    separator.classList.remove('button');
+}
+
+function enableFormatButtons() {
+    let boldButton = document.getElementById('boldButton');
+    let italicButton = document.getElementById('italicButton');
+    let strikeButton = document.getElementById('strikeButton');
+    boldButton.disabled = false;
+    italicButton.disabled = false;
+    strikeButton.disabled = false;
+}
+
+function disableFormatButtons() {
     let boldButton = document.getElementById('boldButton');
-    boldButton.addEventListener('mousedown', onboldbutton);
     let italicButton = document.getElementById('italicButton');
-    italicButton.addEventListener('mousedown', onitalicbutton);
     let strikeButton = document.getElementById('strikeButton');
-    strikeButton.addEventListener('mousedown', onstrikebutton);
+    boldButton.disabled = true;
+    italicButton.disabled = true;
+    strikeButton.disabled = true;
+}
+
+function onblur(e) {
+    let cheezenotes = document.getElementById('cheezenotes');
+    redrawTables(cheezenotes);
+    onsave();
+    hideTokens();
+    disableFormatButtons();
+}
+
+function onfocus() {
+    redrawTables(cheezenotes, dpwidth());
+    showTokens();
+    enableFormatButtons();
+}
+
+function init(pagename = null) {
+    let cheezenotes = document.getElementById('cheezenotes');
+
+    dpwidth(cheezenotes);
+
+    cheezenotes.addEventListener('input', onedit);
+    cheezenotes.addEventListener('keyup', onkeyup);
+    cheezenotes.addEventListener('keypress', onkeypress);
+    cheezenotes.addEventListener('keydown', onkeydown);
+    cheezenotes.addEventListener('paste', onpaste);
+    cheezenotes.addEventListener('copy', oncopy);
+    cheezenotes.addEventListener('blur', onblur);
+    cheezenotes.addEventListener('focus', onfocus);
+    cheezenotes.addEventListener('drag', ondrag);
+    cheezenotes.addEventListener('dragenter', ondragenter);
+    cheezenotes.addEventListener('dragleave', ondragleave);
+
+    let saveButton = addButton('saveButton', 'save', onsave);
+    saveButton.disabled = true;
+    addSeparator();
+    addButton('boldButton', 'format_bold', onboldbutton);
+    addButton('italicButton', 'format_italic', onitalicbutton);
+    lastButton(addButton('strikeButton', 'format_strikethrough', onstrikebutton));
+
+    floatRight(lastButton(addOnOffButton('taButton', 'notes', 'notes', ontextarea)));
+    floatRight(addOnOffButton('editModeButton', 'edit_note', 'visibility',
+        function (e) {
+            if (editModeButton.classList.contains('buttonon')) {
+                cheezenotes.contentEditable = false;
+            } else {
+                cheezenotes.contentEditable = true;
+            }
+        }, true));
+
+    disableFormatButtons();
+
     onload();
 }
 
diff --git a/templates/page.html b/templates/page.html
index bc9623a..aec8917 100644
--- a/templates/page.html
+++ b/templates/page.html
@@ -13,12 +13,12 @@
     </head>
     <body>
         <div id="buttons">
-            <button id="saveButton">💾</button>
+            <!--<button id="saveButton">💾</button>
             <input type="checkbox" id="taButton" /><label id="taButtonLabel" for="taButton">📋</label>
             <input type="checkbox" id="lockButton" /><label id="lockButtonLabel" for="lockButton" class="material-icons">visibility_off</label>
             <button id="boldButton"><b>B</b></button>
             <button id="italicButton"><i>I</i></button>
-            <button id="strikeButton"><s>S</s></button>
+            <button id="strikeButton"><s>S</s></button>-->
         </div>
         <div class="ta"><textarea id="ta" class="cheezenotes" spellcheck="false">{{md}}</textarea></body><div>
         <div id="cheezenotes" class="cheezenotes" contenteditable="true" spellcheck="false"></div>