diff --git a/www/common/common-ui-elements.js b/www/common/common-ui-elements.js
index c44766ff5..769a7b059 100644
--- a/www/common/common-ui-elements.js
+++ b/www/common/common-ui-elements.js
@@ -1642,14 +1642,7 @@ define([
                     if ($(e.target).attr('href') === '#') {
                         e.preventDefault();
                     }
-                    if (config.isSelect && config.attributes["data-app"] !== 'diagram') { return; }
-                    if ($el.length !== 1) { return; }
-                    if (config.attributes["data-app"] === 'diagram') {
-                        $('.cp-dropdown-content').find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
-                        $el.addClass('cp-dropdown-element-active');
-                        $el.closest('li').focus();
-                    }
-                    
+                    if (config.isSelect) { return; } 
                     e.stopPropagation();
                     if (typeof(config.action) === "function") {
                         var close = config.action(e);
@@ -1836,7 +1829,7 @@ define([
             }
             $innerblock.find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
             setTimeout(() => {
-                if (config.isSelect && value || config.attributes && config.attributes["data-app"] === 'diagram' && value) {
+                if (config.isSelect && value) {
                     // We use JSON.stringify here to escape quotes
                     if (typeof(value) === "object") { value = JSON.stringify(value); }
                     var $val = $innerblock.find('[data-value='+JSON.stringify(value)+']');
diff --git a/www/diagram/inner.js b/www/diagram/inner.js
index c3d31c897..147ae34b1 100644
--- a/www/diagram/inner.js
+++ b/www/diagram/inner.js
@@ -254,32 +254,38 @@ define([
                     attributes: {
                         'data-value': mode,
                         'aria-label': Messages._getKey('diagram_modesOptionLabel', [mode]),
-                        'data-app': 'diagram'
                     },
                     content: mode,
                     action: function () {
+                        var $self = $('a[data-value="' + mode + '"]');
                         parameters.set('ui', mode);
                         drawioFrame.src = ApiConfig.httpSafeOrigin + '/components/drawio/src/main/webapp/index.html?'
                         + parameters;
                         privateData = framework._.cpNfInner.metadataMgr.getPrivateData();
                         setTheme(privateData.channel, mode);
+                        $('.cp-dropdown-content').find('.cp-dropdown-element-active').removeClass('cp-dropdown-element-active');
+                        $self.addClass('cp-dropdown-element-active');
+                        $self.closest('li').focus();
                     },
                 });
             });
-                        
+            var initialMode = parameters.get('ui') || checkDefaultTheme();
             var $drawer = UIElements.createDropdown({
                 text: Messages.diagram_modes,
                 options: types,
                 common: framework._.sfCommon,
-                isSelect: true,
                 iconCls: 'color-palette',
-                initialValue: parameters.get('ui') || checkDefaultTheme(),
+                initialValue: initialMode
             });
             framework._.toolbar.$theme = $drawer.find('ul.cp-dropdown-content');
             framework._.toolbar.$bottomL.append($drawer);
             $drawer.addClass('cp-toolbar-appmenu');
+            $drawer.on('click', function () {
+                $('a[data-value="' + initialMode + '"]').addClass('cp-dropdown-element-active');
+            });
         };
         mkModeButton(framework);
+        
     };
 
     $('#cp-app-diagram-editor').hide();