diff --git a/desktop/head_tag.html b/desktop/head_tag.html
index b1f6999..9879c9f 100644
--- a/desktop/head_tag.html
+++ b/desktop/head_tag.html
@@ -49,78 +49,43 @@ api.onToolbarCreate(toolbar => {
         perform: e => e.applySurround('[wrap="justify"]\n', '\n[/wrap]', 'align_justify_text')
     });
 });
-
-// EXTRAS
-api.addToolbarPopupMenuOptionsCallback(() => {
-  return {
-      id: "bleu_color",
-      action: "bleucolor",
-      icon: "palette",
-      label: "bleu_color_button"
-  };
-});
-api.addToolbarPopupMenuOptionsCallback(() => {
-  return {
-      id: "rose_color",
-      action: "rosecolor",
-      icon: "palette",
-      label: "rose_color_button"
-  };
-});
-api.addToolbarPopupMenuOptionsCallback(() => {
-  return {
-      id: "jaune_color",
-      action: "jaunecolor",
-      icon: "palette",
-      label: "jaune_color_button"
-  };
-});
-api.addToolbarPopupMenuOptionsCallback(() => {
-  return {
-      id: "orange_color",
-      action: "orangecolor",
-      icon: "palette",
-      label: "orange_color_button"
-  };
-});
-api.addToolbarPopupMenuOptionsCallback(() => {
-  return {
-      id: "rouge_color",
-      action: "rougecolor",
-      icon: "palette",
-      label: "rouge_color_button"
-  };
-});
-api.addToolbarPopupMenuOptionsCallback(() => {
-  return {
-      id: "vert_color",
-      action: "vertcolor",
-      icon: "palette",
-      label: "vert_color_button"
-  };
-});
-
-api.modifyClass("controller:composer", {
-  actions: {
-    bleucolor() {
-      this.get("toolbarEvent").applySurround('[color=#068EEF]', '[/color]', "bleu_color_text");
-    },
-    rosecolor() {
-      this.get("toolbarEvent").applySurround('[color=#EF06A0]', '[/color]', "rose_color_text");
-    },
-    jaunecolor() {
-      this.get("toolbarEvent").applySurround('[color=#EFC906]', '[/color]', "jaune_color_text");
-    },
-    orangecolor() {
-      this.get("toolbarEvent").applySurround('[color=#EF8806]', '[/color]', "orange_color_text");
-    },
-    rougecolor() {
-      this.get("toolbarEvent").applySurround('[color=#EF0606]', '[/color]', "rouge_color_text");
-    },
-    vertcolor() {
-      this.get("toolbarEvent").applySurround('[color=#2A821C]', '[/color]', "vert_color_text");
-    },
-  }
+api.onToolbarCreate(toolbar => {
+    toolbar.addButton({
+        id: "bleu_color_button",
+        group: "colorStyles",
+        icon: "palette",
+        perform: e => e.applySurround('[color=#068EEF]', '[/color]', 'bleu_color_text')
+    });
+    toolbar.addButton({
+        id: "rose_color_button",
+        group: "colorStyles",
+        icon: "palette",
+        perform: e => e.applySurround('[color=#EF06A0]', '[/color]', 'rose_color_text')
+    });
+    toolbar.addButton({
+        id: "jaune_color_button",
+        group: "colorStyles",
+        icon: "palette",
+        perform: e => e.applySurround('[color=#EFC906]', '[/color]', 'jaune_color_text')
+    });
+    toolbar.addButton({
+        id: "orange_color_button",
+        group: "colorStyles",
+        icon: "palette",
+        perform: e => e.applySurround('[color=#EF8806]', '[/color]', 'orange_color_text')
+    });
+    toolbar.addButton({
+        id: "rouge_color_button",
+        group: "colorStyles",
+        icon: "palette",
+        perform: e => e.applySurround('[color=#EF0606]', '[/color]', 'rouge_color_text')
+    });
+    toolbar.addButton({
+        id: "vert_color_button",
+        group: "colorStyles",
+        icon: "palette",
+        perform: e => e.applySurround('[color=#2A821C]', '[/color]', 'vert_color_text')
+    });
 });
 
 // TEXTS