diff --git a/desktop/head_tag.html b/desktop/head_tag.html
index 9879c9f..b1f6999 100644
--- a/desktop/head_tag.html
+++ b/desktop/head_tag.html
@@ -49,43 +49,78 @@ api.onToolbarCreate(toolbar => {
         perform: e => e.applySurround('[wrap="justify"]\n', '\n[/wrap]', 'align_justify_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')
-    });
+
+// 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");
+    },
+  }
 });
 
 // TEXTS