diff --git a/assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes.js b/assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes.js
index ebaedcbd81..3284268596 100644
--- a/assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes.js
+++ b/assets/js/src/newsletter_editor/tinymce/mailpoet_shortcodes.js
@@ -8,50 +8,54 @@
  * its placeholder into editor text.
  */
 
+import MailPoet from 'mailpoet';
 
 function tinyMceAdd(editor) {
-  var appendLabelAndClose = function appendLabelAndCLose(shortcode) {
-    editor.insertContent(shortcode);
-    editor.windowManager.close();
-  };
-  var generateOnClickFunc = function generateOnClickFunc(shortcode) {
-    return function appendAndClose() {
-      appendLabelAndClose(shortcode);
-    };
-  };
+  editor.ui.registry.addIcon('mailpoet', '<svg viewBox="0 0 152.02 156.4" width="20" height="20"><path d="M37.71,89.1c3.5,0,5.9-.8,7.2-2.3a8,8,0,0,0,2-5.4V35.7l17,45.1a12.68,12.68,0,0,0,3.7,5.4c1.6,1.3,4,2,7.2,2a12.54,12.54,0,0,0,5.9-1.4,8.41,8.41,0,0,0,3.9-5l18.1-50V81a8.53,8.53,0,0,0,2.1,6.1c1.4,1.4,3.7,2.2,6.9,2.2,3.5,0,5.9-.8,7.2-2.3a8,8,0,0,0,2-5.4V8.7a7.48,7.48,0,0,0-3.3-6.6c-2.1-1.4-5-2.1-8.6-2.1a19.3,19.3,0,0,0-9.4,2,11.63,11.63,0,0,0-5.1,6.8L74.91,67.1,54.41,8.4a12.4,12.4,0,0,0-4.5-6.2c-2.1-1.5-5-2.2-8.8-2.2a16.51,16.51,0,0,0-8.9,2.1c-2.3,1.5-3.5,3.9-3.5,7.2V80.8c0,2.8.7,4.8,2,6.2C32.21,88.4,34.41,89.1,37.71,89.1Z"/><path d="M149,116.6l-2.4-1.9a7.4,7.4,0,0,0-9.4.3,19.65,19.65,0,0,1-12.5,4.6h-21.4A37.08,37.08,0,0,0,77,130.5l-1.1,1.2-1.1-1.1a37.25,37.25,0,0,0-26.3-10.9H27a19.59,19.59,0,0,1-12.4-4.6,7.28,7.28,0,0,0-9.4-.3l-2.4,1.9A7.43,7.43,0,0,0,0,122.2a7.14,7.14,0,0,0,2.4,5.7A37.28,37.28,0,0,0,27,137.4h21.6a19.59,19.59,0,0,1,18.9,14.4v.2c.1.7,1.2,4.4,8.5,4.4s8.4-3.7,8.5-4.4v-.2a19.59,19.59,0,0,1,18.9-14.4H125a37.28,37.28,0,0,0,24.6-9.5,7.42,7.42,0,0,0,2.4-5.7A7.86,7.86,0,0,0,149,116.6Z"/></svg>');
 
-  editor.addButton('mailpoet_shortcodes', {
-    icon: 'mailpoet_shortcodes',
-    onclick: function onClick() {
+  editor.ui.registry.addButton('mailpoet_shortcodes', {
+    icon: 'mailpoet',
+    onAction: function onActionButton() {
       var shortcodes = [];
       var configShortcodes = editor.settings.mailpoet_shortcodes;
       var i;
 
       Object.keys(configShortcodes).forEach(function configShortcodesLoop(segment) {
+        var section;
         if (Object.prototype.hasOwnProperty.call(configShortcodes, segment)) {
-          shortcodes.push({
-            type: 'label',
-            text: segment,
-          });
+          section = {
+            name: segment,
+            title: segment,
+            items: [],
+          };
 
           for (i = 0; i < configShortcodes[segment].length; i += 1) {
-            shortcodes.push({
+            section.items.push({
               type: 'button',
               text: configShortcodes[segment][i].text,
-              onClick: generateOnClickFunc(configShortcodes[segment][i].shortcode),
+              name: configShortcodes[segment][i].shortcode,
             });
           }
+          shortcodes.push(section);
         }
       });
 
       // Open window
       editor.windowManager.open({
-        height: parseInt(editor.getParam('plugin_mailpoet_shortcodes_height', 400), 10),
-        width: parseInt(editor.getParam('plugin_mailpoet_shortcodes_width', 450), 10),
-        autoScroll: true,
         title: editor.settings.mailpoet_shortcodes_window_title,
-        body: shortcodes,
-        buttons: [],
+        body: {
+          type: 'tabpanel',
+          tabs: shortcodes,
+        },
+        buttons: [{
+          type: 'cancel',
+          text: MailPoet.I18n.t('close'),
+          primary: true,
+        }],
+        onAction: function onActionDialog(dialog, button) {
+          editor.insertContent(button.name);
+          editor.windowManager.close();
+        },
       });
     },
   });
diff --git a/views/newsletter/editor.html b/views/newsletter/editor.html
index bbaaeea051..416ab78a50 100644
--- a/views/newsletter/editor.html
+++ b/views/newsletter/editor.html
@@ -304,6 +304,7 @@
   |replaceLinkTags('https://kb.mailpoet.com/article/146-my-newsletters-are-not-being-received', {'target' : '_blank', 'data-beacon-article': '580846f09033604df5166ed1'})
   |escape('js') %>
   <%= localize({
+    'close': __('Close'),
     'failedToFetchAvailablePosts': __('Failed to fetch available posts'),
     'failedToFetchRenderedPosts': __('Failed to fetch rendered posts'),
     'shortcodesWindowTitle': __('Select a shortcode'),