diff --git a/services/web/client/source/class/osparc/About.js b/services/web/client/source/class/osparc/About.js
index b489e0c853e..26e36e1b244 100644
--- a/services/web/client/source/class/osparc/About.js
+++ b/services/web/client/source/class/osparc/About.js
@@ -17,7 +17,7 @@
 ************************************************************************ */
 
 qx.Class.define("osparc.About", {
-  extend: qx.ui.window.Window,
+  extend: osparc.ui.window.Window,
   type: "singleton",
 
   construct: function() {
@@ -29,7 +29,8 @@ qx.Class.define("osparc.About", {
       showMinimize: false,
       resizable: false,
       centerOnAppear: true,
-      appearance: "service-window"
+      clickAwayClose: true,
+      modal: true
     });
     const closeBtn = this.getChildControl("close-button");
     osparc.utils.Utils.setIdToWidget(closeBtn, "aboutWindowCloseBtn");
diff --git a/services/web/client/source/class/osparc/component/export/Permissions.js b/services/web/client/source/class/osparc/component/export/Permissions.js
index 4d8f71b9733..3b5053f3c52 100644
--- a/services/web/client/source/class/osparc/component/export/Permissions.js
+++ b/services/web/client/source/class/osparc/component/export/Permissions.js
@@ -68,8 +68,7 @@ qx.Class.define("osparc.component.export.Permissions", {
     },
 
     createWindow: function(winText, shareResourceWidget) {
-      const window = new qx.ui.window.Window(winText).set({
-        appearance: "service-window",
+      const window = new osparc.ui.window.Window(winText).set({
         layout: new qx.ui.layout.Grow(),
         autoDestroy: true,
         contentPadding: 10,
@@ -77,7 +76,8 @@ qx.Class.define("osparc.component.export.Permissions", {
         height: 300,
         showMaximize: false,
         showMinimize: false,
-        modal: true
+        modal: true,
+        clickAwayClose: true
       });
       window.add(shareResourceWidget);
       window.center();
@@ -141,7 +141,9 @@ qx.Class.define("osparc.component.export.Permissions", {
       const collaboratorsUIList = new qx.ui.form.List().set({
         decorator: "no-border",
         spacing: 3,
-        width: 150
+        width: 150,
+        padding: 0,
+        backgroundColor: "material-button-background"
       });
 
       const collaboratorsModel = this.__collaboratorsModel = new qx.data.Array();
diff --git a/services/web/client/source/class/osparc/component/form/tag/TagManager.js b/services/web/client/source/class/osparc/component/form/tag/TagManager.js
index 1885a8ed177..0022f54c337 100644
--- a/services/web/client/source/class/osparc/component/form/tag/TagManager.js
+++ b/services/web/client/source/class/osparc/component/form/tag/TagManager.js
@@ -22,9 +22,8 @@ qx.Class.define("osparc.component.form.tag.TagManager", {
       movable: false,
       resizable: false,
       modal: true,
-      appearance: "service-window",
       width: 262,
-      contentPadding: 0
+      clickAwayClose: true
     });
     this.__attachment = attachment;
     this.__resourceName = resourceName;
@@ -69,7 +68,6 @@ qx.Class.define("osparc.component.form.tag.TagManager", {
           font: "title-16",
           textColor: "service-window-hint",
           rich: true,
-          backgroundColor: "material-button-background",
           padding: 10,
           textAlign: "center"
         }));
@@ -141,19 +139,7 @@ qx.Class.define("osparc.component.form.tag.TagManager", {
     __attachEventHandlers: function() {
       this.addListener("appear", () => {
         this.__updatePosition();
-        if (this.isModal()) {
-          // Enable closing when clicking outside the modal
-          const thisDom = this.getContentElement().getDomElement();
-          const thisZIndex = parseInt(thisDom.style.zIndex);
-          const modalFrame = qx.dom.Hierarchy.getSiblings(thisDom).find(el =>
-            // Hack: Qx inserts the modalFrame as a sibling of the window with a -1 zIndex
-            parseInt(el.style.zIndex) === thisZIndex - 1
-          );
-          if (modalFrame) {
-            modalFrame.addEventListener("click", () => this.close());
-          }
-        }
-      }, this);
+      });
       this.__selectedTags.addListener("change", evt => {
         this.fireDataEvent("changeSelected", {
           ...evt.getData(),
diff --git a/services/web/client/source/class/osparc/component/metadata/ServiceInfoWindow.js b/services/web/client/source/class/osparc/component/metadata/ServiceInfoWindow.js
index 32acad345da..493586fe938 100644
--- a/services/web/client/source/class/osparc/component/metadata/ServiceInfoWindow.js
+++ b/services/web/client/source/class/osparc/component/metadata/ServiceInfoWindow.js
@@ -21,7 +21,7 @@
  */
 
 qx.Class.define("osparc.component.metadata.ServiceInfoWindow", {
-  extend: qx.ui.window.Window,
+  extend: osparc.ui.window.Window,
 
   /**
     * @param metadata {Object} Service metadata
@@ -43,6 +43,7 @@ qx.Class.define("osparc.component.metadata.ServiceInfoWindow", {
     });
 
     const serviceInfo = this._serviceInfo = new osparc.component.metadata.ServiceInfo(metadata);
+    serviceInfo.setBackgroundColor("material-button-background");
     const scroll = new qx.ui.container.Scroll();
     scroll.add(serviceInfo);
     this.add(scroll, {
diff --git a/services/web/client/source/class/osparc/component/metadata/StudyDetailsEditor.js b/services/web/client/source/class/osparc/component/metadata/StudyDetailsEditor.js
index 3054efb6b01..d2c020c5bf9 100644
--- a/services/web/client/source/class/osparc/component/metadata/StudyDetailsEditor.js
+++ b/services/web/client/source/class/osparc/component/metadata/StudyDetailsEditor.js
@@ -65,14 +65,12 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
 
   statics: {
     popUpInWindow: function(title, studyDetailsEditor, width = 400, height = 400) {
-      const win = new qx.ui.window.Window(title).set({
+      const win = new osparc.ui.window.Window(title).set({
         autoDestroy: true,
-        layout: new qx.ui.layout.VBox(),
-        appearance: "service-window",
+        layout: new qx.ui.layout.Grow(),
         showMinimize: false,
         showMaximize: false,
         resizable: true,
-        contentPadding: 10,
         width: width,
         height: height,
         modal: true
@@ -99,8 +97,10 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
 
     __createDisplayView: function(study, isTemplate, winWidth) {
       const displayView = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+      displayView.add(new osparc.component.metadata.StudyDetails(study, winWidth), {
+        flex: 1
+      });
       displayView.add(this.__createButtons(isTemplate));
-      displayView.add(new osparc.component.metadata.StudyDetails(study, winWidth));
       return displayView;
     },
 
@@ -109,54 +109,48 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
       const canCreateTemplate = osparc.data.Permissions.getInstance().canDo("studies.template.create");
       const canUpdateTemplate = osparc.data.Permissions.getInstance().canDo("studies.template.update");
 
-      const buttonsLayout = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({
-        alignY: "middle"
-      })).set({
-        marginTop: 10
-      });
+      const buttonsToolbar = new qx.ui.toolbar.ToolBar();
 
-      const modeButton = new qx.ui.form.Button(this.tr("Edit")).set({
-        appearance: "md-button",
+      const modeButton = new qx.ui.toolbar.Button(this.tr("Edit")).set({
+        appearance: "toolbar-md-button",
         visibility: isCurrentUserOwner && (!isTemplate || canUpdateTemplate) ? "visible" : "excluded"
       });
       osparc.utils.Utils.setIdToWidget(modeButton, "editStudyBtn");
       modeButton.addListener("execute", () => this.setMode("edit"), this);
-      buttonsLayout.add(modeButton);
+      buttonsToolbar.add(modeButton);
 
       if (!isTemplate) {
-        const permissionsButton = new qx.ui.form.Button(this.tr("Permissions")).set({
-          appearance: "md-button"
+        const permissionsButton = new qx.ui.toolbar.Button(this.tr("Permissions")).set({
+          appearance: "toolbar-md-button"
         });
         osparc.utils.Utils.setIdToWidget(permissionsButton, "permissionsBtn");
         permissionsButton.addListener("execute", e => {
           this.__openPermissions();
         }, this);
-        buttonsLayout.add(permissionsButton);
+        buttonsToolbar.add(permissionsButton);
 
         if (isCurrentUserOwner && canCreateTemplate) {
-          const saveAsTemplateButton = new qx.ui.form.Button(this.tr("Save as Template")).set({
-            appearance: "md-button"
+          const saveAsTemplateButton = new qx.ui.toolbar.Button(this.tr("Save as Template")).set({
+            appearance: "toolbar-md-button"
           });
           osparc.utils.Utils.setIdToWidget(saveAsTemplateButton, "saveAsTemplateBtn");
           saveAsTemplateButton.addListener("execute", e => {
             this.__openSaveAsTemplate();
           }, this);
-          buttonsLayout.add(saveAsTemplateButton);
+          buttonsToolbar.add(saveAsTemplateButton);
         }
       }
 
-      buttonsLayout.add(new qx.ui.core.Spacer(), {
-        flex: 1
-      });
+      buttonsToolbar.addSpacer();
 
-      const openButton = this.__openButton = new qx.ui.form.Button(this.tr("Open")).set({
-        appearance: "md-button"
+      const openButton = this.__openButton = new qx.ui.toolbar.Button(this.tr("Open")).set({
+        appearance: "toolbar-md-button"
       });
       osparc.utils.Utils.setIdToWidget(openButton, "openStudyBtn");
       openButton.addListener("execute", () => this.fireEvent("openStudy"), this);
-      buttonsLayout.add(openButton);
+      buttonsToolbar.add(openButton);
 
-      return buttonsLayout;
+      return buttonsToolbar;
     },
 
     __createEditView: function(isTemplate) {
@@ -165,9 +159,7 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
       const fieldIsEnabled = isCurrentUserOwner && (!isTemplate || canUpdateTemplate);
 
       const editView = new qx.ui.container.Composite(new qx.ui.layout.VBox(8));
-      const buttons = new qx.ui.container.Composite(new qx.ui.layout.HBox(8).set({
-        alignX: "right"
-      }));
+      const buttonsToolbar = new qx.ui.toolbar.ToolBar();
 
       this.__fields = {
         name: new qx.ui.form.TextField(this.__studyModel.getName()).set({
@@ -176,9 +168,6 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
           enabled: fieldIsEnabled
         }),
         description: new qx.ui.form.TextArea(this.__studyModel.getDescription()).set({
-          autoSize: true,
-          minHeight: 100,
-          maxHeight: 500,
           enabled: fieldIsEnabled
         }),
         thumbnail: new qx.ui.form.TextField(this.__studyModel.getThumbnail()).set({
@@ -186,24 +175,6 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
         })
       };
 
-      const saveButton = new qx.ui.form.Button(this.tr("Save"), "@FontAwesome5Solid/save/16").set({
-        appearance: "lg-button"
-      });
-      osparc.utils.Utils.setIdToWidget(saveButton, "studyDetailsEditorSaveBtn");
-      saveButton.addListener("execute", e => {
-        const btn = e.getTarget();
-        btn.setIcon("@FontAwesome5Solid/circle-notch/16");
-        btn.getChildControl("icon").getContentElement()
-          .addClass("rotate");
-        this.__saveStudy(isTemplate, btn);
-      }, this);
-      const cancelButton = new qx.ui.form.Button(this.tr("Cancel")).set({
-        appearance: "lg-button",
-        enabled: isCurrentUserOwner && (!isTemplate || canUpdateTemplate)
-      });
-      osparc.utils.Utils.setIdToWidget(cancelButton, "studyDetailsEditorCancelBtn");
-      cancelButton.addListener("execute", () => this.setMode("display"), this);
-
       const {
         name,
         description,
@@ -219,7 +190,9 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
         font: "text-14"
       }));
       osparc.utils.Utils.setIdToWidget(description, "studyDetailsEditorDescFld");
-      editView.add(description);
+      editView.add(description, {
+        flex: 1
+      });
       editView.add(new qx.ui.basic.Label(this.tr("Thumbnail")).set({
         font: "text-14"
       }));
@@ -230,9 +203,28 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
         editView.add(this.__tagsSection());
       }
 
-      buttons.add(saveButton);
-      buttons.add(cancelButton);
-      editView.add(buttons);
+      const saveButton = new qx.ui.toolbar.Button(this.tr("Save"), "@FontAwesome5Solid/save/16").set({
+        appearance: "toolbar-lg-button"
+      });
+      osparc.utils.Utils.setIdToWidget(saveButton, "studyDetailsEditorSaveBtn");
+      saveButton.addListener("execute", e => {
+        const btn = e.getTarget();
+        btn.setIcon("@FontAwesome5Solid/circle-notch/16");
+        btn.getChildControl("icon").getContentElement()
+          .addClass("rotate");
+        this.__saveStudy(isTemplate, btn);
+      }, this);
+      const cancelButton = new qx.ui.toolbar.Button(this.tr("Cancel")).set({
+        appearance: "toolbar-lg-button",
+        enabled: isCurrentUserOwner && (!isTemplate || canUpdateTemplate)
+      });
+      osparc.utils.Utils.setIdToWidget(cancelButton, "studyDetailsEditorCancelBtn");
+      cancelButton.addListener("execute", () => this.setMode("display"), this);
+
+      buttonsToolbar.addSpacer();
+      buttonsToolbar.add(saveButton);
+      buttonsToolbar.add(cancelButton);
+      editView.add(buttonsToolbar);
 
       return editView;
     },
@@ -279,18 +271,22 @@ qx.Class.define("osparc.component.metadata.StudyDetailsEditor", {
     },
 
     __saveStudy: function(isTemplate, btn) {
+      const data = this.__serializeForm();
+      // FIXME: Avoid adding invalid properties to standard entities.
+      delete data.locked;
+      delete data.resourceType;
       const params = {
         url: {
           projectId: this.__studyModel.getUuid()
         },
-        data: this.__serializeForm()
+        data
       };
       osparc.data.Resources.fetch(isTemplate ? "templates" : "studies", "put", params)
-        .then(data => {
+        .then(studyData => {
           btn.resetIcon();
           btn.getChildControl("icon").getContentElement()
             .removeClass("rotate");
-          this.__studyModel.set(data);
+          this.__studyModel.set(studyData);
           this.setMode("display");
           this.fireEvent(isTemplate ? "updateTemplate" : "updateStudy");
         })
diff --git a/services/web/client/source/class/osparc/component/widget/Renamer.js b/services/web/client/source/class/osparc/component/widget/Renamer.js
index b937a0376fa..586c2d2a24b 100644
--- a/services/web/client/source/class/osparc/component/widget/Renamer.js
+++ b/services/web/client/source/class/osparc/component/widget/Renamer.js
@@ -35,7 +35,7 @@
  */
 
 qx.Class.define("osparc.component.widget.Renamer", {
-  extend: qx.ui.window.Window,
+  extend: osparc.ui.window.Window,
 
   construct: function(oldLabel) {
     this.base(arguments, "Rename");
@@ -51,7 +51,8 @@ qx.Class.define("osparc.component.widget.Renamer", {
       modal: true,
       showMaximize: false,
       showMinimize: false,
-      width: labelWidth
+      width: labelWidth,
+      clickAwayClose: true
     });
     this.__populateNodeLabelEditor(oldLabel, labelWidth);
   },
diff --git a/services/web/client/source/class/osparc/component/workbench/ServiceCatalog.js b/services/web/client/source/class/osparc/component/workbench/ServiceCatalog.js
index 12d2413ac37..e426706653f 100644
--- a/services/web/client/source/class/osparc/component/workbench/ServiceCatalog.js
+++ b/services/web/client/source/class/osparc/component/workbench/ServiceCatalog.js
@@ -34,13 +34,12 @@
  */
 
 qx.Class.define("osparc.component.workbench.ServiceCatalog", {
-  extend: qx.ui.window.Window,
+  extend: osparc.ui.window.Window,
 
   construct: function() {
     this.base();
 
     this.set({
-      appearance: "service-window",
       autoDestroy: true,
       caption: this.tr("Service catalog"),
       showMinimize: false,
diff --git a/services/web/client/source/class/osparc/dashboard/ExploreBrowser.js b/services/web/client/source/class/osparc/dashboard/ExploreBrowser.js
index bf4da5d1c27..2002424b34e 100644
--- a/services/web/client/source/class/osparc/dashboard/ExploreBrowser.js
+++ b/services/web/client/source/class/osparc/dashboard/ExploreBrowser.js
@@ -601,8 +601,7 @@ qx.Class.define("osparc.dashboard.ExploreBrowser", {
     },
 
     __displayServiceSubmissionForm: function(formData) {
-      const addServiceWindow = new qx.ui.window.Window(this.tr("Submit a new service")).set({
-        appearance: "service-window",
+      const addServiceWindow = new osparc.ui.window.Window(this.tr("Submit a new service")).set({
         modal: true,
         autoDestroy: true,
         showMinimize: false,
diff --git a/services/web/client/source/class/osparc/dashboard/OrganizationEditor.js b/services/web/client/source/class/osparc/dashboard/OrganizationEditor.js
index 0a2b67be035..00632a511b0 100644
--- a/services/web/client/source/class/osparc/dashboard/OrganizationEditor.js
+++ b/services/web/client/source/class/osparc/dashboard/OrganizationEditor.js
@@ -34,10 +34,9 @@ qx.Class.define("osparc.dashboard.OrganizationEditor", {
 
   statics: {
     popUpInWindow: function(title, organizationEditor, width = 300, height = 200) {
-      const win = new qx.ui.window.Window(title).set({
+      const win = new osparc.ui.window.Window(title).set({
         autoDestroy: true,
         layout: new qx.ui.layout.VBox(),
-        appearance: "service-window",
         showMinimize: false,
         showMaximize: false,
         resizable: true,
diff --git a/services/web/client/source/class/osparc/dashboard/ServiceBrowser.js b/services/web/client/source/class/osparc/dashboard/ServiceBrowser.js
index 0bbf49cdce2..a28a09a2da9 100644
--- a/services/web/client/source/class/osparc/dashboard/ServiceBrowser.js
+++ b/services/web/client/source/class/osparc/dashboard/ServiceBrowser.js
@@ -274,8 +274,7 @@ qx.Class.define("osparc.dashboard.ServiceBrowser", {
     },
 
     __displayServiceSubmissionForm: function(formData) {
-      const addServiceWindow = new qx.ui.window.Window(this.tr("Submit a new service")).set({
-        appearance: "service-window",
+      const addServiceWindow = new osparc.ui.window.Window(this.tr("Submit a new service")).set({
         modal: true,
         autoDestroy: true,
         showMinimize: false,
diff --git a/services/web/client/source/class/osparc/data/Resources.js b/services/web/client/source/class/osparc/data/Resources.js
index beaa7755034..789513f9f59 100644
--- a/services/web/client/source/class/osparc/data/Resources.js
+++ b/services/web/client/source/class/osparc/data/Resources.js
@@ -108,7 +108,8 @@ qx.Class.define("osparc.data.Resources", {
           },
           put: {
             method: "PUT",
-            url: statics.API + "/projects/{projectId}"
+            url: statics.API + "/projects/{projectId}",
+            useCache: true
           },
           delete: {
             method: "DELETE",
diff --git a/services/web/client/source/class/osparc/desktop/StudyEditor.js b/services/web/client/source/class/osparc/desktop/StudyEditor.js
index 7d3da0450a9..9151443c5b4 100644
--- a/services/web/client/source/class/osparc/desktop/StudyEditor.js
+++ b/services/web/client/source/class/osparc/desktop/StudyEditor.js
@@ -280,7 +280,7 @@ qx.Class.define("osparc.desktop.StudyEditor", {
     __openFilePicker: function(node) {
       const filePicker = new osparc.file.FilePicker(node, this.getStudy().getUuid());
       // open file picker in window
-      const filePickerWin = new qx.ui.window.Window(node.getLabel()).set({
+      const filePickerWin = new osparc.ui.window.Window(node.getLabel()).set({
         appearance: "service-window",
         layout: new qx.ui.layout.Grow(),
         autoDestroy: true,
@@ -288,7 +288,8 @@ qx.Class.define("osparc.desktop.StudyEditor", {
         width: 570,
         height: 450,
         showMinimize: false,
-        modal: true
+        modal: true,
+        clickAwayClose: true
       });
       const showParentWorkbench = () => {
         this.nodeSelected(node.getParentNodeId() || this.getStudy().getUuid());
diff --git a/services/web/client/source/class/osparc/desktop/preferences/PreferencesWindow.js b/services/web/client/source/class/osparc/desktop/preferences/PreferencesWindow.js
index a14194c7a58..2dfe60de907 100644
--- a/services/web/client/source/class/osparc/desktop/preferences/PreferencesWindow.js
+++ b/services/web/client/source/class/osparc/desktop/preferences/PreferencesWindow.js
@@ -41,7 +41,8 @@ qx.Class.define("osparc.desktop.preferences.PreferencesWindow", {
     osparc.utils.Utils.setIdToWidget(closeBtn, "preferencesWindowCloseBtn");
 
     const tabView = new qx.ui.tabview.TabView().set({
-      barPosition: "left"
+      barPosition: "left",
+      contentPadding: 0
     });
 
     const profPage = new osparc.desktop.preferences.pages.ProfilePage();
diff --git a/services/web/client/source/class/osparc/desktop/preferences/pages/BasePage.js b/services/web/client/source/class/osparc/desktop/preferences/pages/BasePage.js
index cc5f79a088c..c3cbbf579b9 100644
--- a/services/web/client/source/class/osparc/desktop/preferences/pages/BasePage.js
+++ b/services/web/client/source/class/osparc/desktop/preferences/pages/BasePage.js
@@ -33,6 +33,10 @@ qx.Class.define("osparc.desktop.preferences.pages.BasePage", {
 
     // spacer
     this.add(new qx.ui.core.Spacer(null, 10)); // TODO add decorator?
+    this.set({
+      backgroundColor: "material-button-background",
+      paddingLeft: 10
+    });
   },
 
   members: {
@@ -43,7 +47,6 @@ qx.Class.define("osparc.desktop.preferences.pages.BasePage", {
     _createSectionBox: function(sectionName) {
       let box = new qx.ui.groupbox.GroupBox(sectionName);
       box.setLayout(new qx.ui.layout.VBox(10));
-
       return box;
     },
 
diff --git a/services/web/client/source/class/osparc/desktop/preferences/pages/OrganizationsPage.js b/services/web/client/source/class/osparc/desktop/preferences/pages/OrganizationsPage.js
index 5675578ce85..f1478a21b63 100644
--- a/services/web/client/source/class/osparc/desktop/preferences/pages/OrganizationsPage.js
+++ b/services/web/client/source/class/osparc/desktop/preferences/pages/OrganizationsPage.js
@@ -63,6 +63,7 @@ qx.Class.define("osparc.desktop.preferences.pages.OrganizationsPage", {
     __getOrganizationsSection: function() {
       const box = this._createSectionBox(this.tr("Organizations"));
       box.add(this.__getOrganizationsList());
+      box.setContentPadding(0);
       return box;
     },
 
@@ -71,7 +72,8 @@ qx.Class.define("osparc.desktop.preferences.pages.OrganizationsPage", {
         decorator: "no-border",
         spacing: 3,
         height: 150,
-        width: 150
+        width: 150,
+        backgroundColor: "material-button-background"
       });
       orgsUIList.addListener("changeSelection", e => {
         this.__organizationSelected(e.getData());
@@ -112,6 +114,7 @@ qx.Class.define("osparc.desktop.preferences.pages.OrganizationsPage", {
       box.add(this.__getMembersList(), {
         flex: 1
       });
+      box.setContentPadding(0);
       return box;
     },
 
@@ -147,7 +150,8 @@ qx.Class.define("osparc.desktop.preferences.pages.OrganizationsPage", {
       const memebersUIList = new qx.ui.form.List().set({
         decorator: "no-border",
         spacing: 3,
-        width: 150
+        width: 150,
+        backgroundColor: "material-button-background"
       });
 
       const membersModel = this.__membersModel = new qx.data.Array();
diff --git a/services/web/client/source/class/osparc/desktop/preferences/pages/TagsPage.js b/services/web/client/source/class/osparc/desktop/preferences/pages/TagsPage.js
index e0a4e675977..de6e4560a10 100644
--- a/services/web/client/source/class/osparc/desktop/preferences/pages/TagsPage.js
+++ b/services/web/client/source/class/osparc/desktop/preferences/pages/TagsPage.js
@@ -14,6 +14,10 @@ qx.Class.define("osparc.desktop.preferences.pages.TagsPage", {
     this.base(arguments, null, "@FontAwesome5Solid/tags/24");
     this.setLayout(new qx.ui.layout.Grow());
     this.__container = new qx.ui.container.Composite(new qx.ui.layout.VBox(10));
+    this.__container.set({
+      backgroundColor: "material-button-background",
+      paddingLeft: 10
+    });
     const scroll = new qx.ui.container.Scroll(this.__container);
     this.add(scroll);
     this.__createComponents();
@@ -23,7 +27,7 @@ qx.Class.define("osparc.desktop.preferences.pages.TagsPage", {
     __tagItems: null,
     __createComponents: function() {
       this.__addTagButton = new qx.ui.form.Button(this.tr("Add new tag"), "@FontAwesome5Solid/plus-circle/14").set({
-        appearance: "md-button"
+        appearance: "toolbar-md-button"
       });
       osparc.data.Resources.get("tags")
         .then(tags => {
diff --git a/services/web/client/source/class/osparc/desktop/preferences/window/APIKeyBase.js b/services/web/client/source/class/osparc/desktop/preferences/window/APIKeyBase.js
index 134dfa1d64f..4adfa63a39a 100644
--- a/services/web/client/source/class/osparc/desktop/preferences/window/APIKeyBase.js
+++ b/services/web/client/source/class/osparc/desktop/preferences/window/APIKeyBase.js
@@ -14,7 +14,7 @@
  */
 
 qx.Class.define("osparc.desktop.preferences.window.APIKeyBase", {
-  extend: qx.ui.window.Window,
+  extend: osparc.ui.window.Window,
   type: "abstract",
 
   construct: function(caption, infoText) {
@@ -26,7 +26,8 @@ qx.Class.define("osparc.desktop.preferences.window.APIKeyBase", {
       modal: true,
       showMaximize: false,
       showMinimize: false,
-      width: 350
+      width: 350,
+      clickAwayClose: true
     });
 
     this.__addInfoText(infoText);
diff --git a/services/web/client/source/class/osparc/theme/Appearance.js b/services/web/client/source/class/osparc/theme/Appearance.js
index 477de7bf10b..b65c3fa92bf 100644
--- a/services/web/client/source/class/osparc/theme/Appearance.js
+++ b/services/web/client/source/class/osparc/theme/Appearance.js
@@ -29,6 +29,65 @@ qx.Theme.define("osparc.theme.Appearance", {
         padding: 10,
         decorator: "border-editable"
       })
+    },
+
+    /*
+    ---------------------------------------------------------------------------
+      buttons
+    ---------------------------------------------------------------------------
+    */
+    "toolbar-xl-button": {
+      include: "toolbar-button",
+      alias: "toolbar-button",
+      style: state => ({
+        allowStretchY: false,
+        allowStretchX: false,
+        minHeight: 50,
+        center: true
+      })
+    },
+
+    "toolbar-xl-button/label": {
+      include: "toolbar-button/label",
+      style: state => ({
+        font: "title-16"
+      })
+    },
+
+    "toolbar-lg-button": {
+      include: "toolbar-button",
+      alias: "toolbar-button",
+      style: state => ({
+        allowStretchY: false,
+        allowStretchX: false,
+        minHeight: 35,
+        center: true
+      })
+    },
+
+    "toolbar-lg-button/label": {
+      include: "toolbar-button/label",
+      style: state => ({
+        font: "text-16"
+      })
+    },
+
+    "toolbar-md-button": {
+      include: "toolbar-button",
+      alias: "toolbar-button",
+      style: state => ({
+        allowStretchY: false,
+        allowStretchX: false,
+        minHeight: 25,
+        center: true
+      })
+    },
+
+    "toolbar-md-button/label": {
+      include: "toolbar-button/label",
+      style: state => ({
+        font: "text-14"
+      })
     }
   }
 });
diff --git a/services/web/client/source/class/osparc/ui/window/Dialog.js b/services/web/client/source/class/osparc/ui/window/Dialog.js
index 9d083f27635..da474083b22 100644
--- a/services/web/client/source/class/osparc/ui/window/Dialog.js
+++ b/services/web/client/source/class/osparc/ui/window/Dialog.js
@@ -10,11 +10,11 @@
  * extends
  */
 qx.Class.define("osparc.ui.window.Dialog", {
-  extend: qx.ui.window.Window,
+  extend: osparc.ui.window.Window,
   /**
    * Constructor takes the same parameters as the Qooxdoo window widget, only adding a message that will
    * be displayed to the user.
-   * @extends qx.ui.window.Window
+   * @extends osparc.ui.window.Window
    * @param {String} message Message that will be displayed to the user.
    */
   construct: function(caption, icon, message) {
@@ -22,7 +22,6 @@ qx.Class.define("osparc.ui.window.Dialog", {
     this.set({
       autoDestroy: true,
       layout: new qx.ui.layout.VBox(),
-      appearance: "service-window",
       showMinimize: false,
       showMaximize: false,
       contentPadding: 0,
@@ -51,7 +50,6 @@ qx.Class.define("osparc.ui.window.Dialog", {
     __buildLayout: function() {
       this.__messageLabel = new qx.ui.basic.Label().set({
         rich: true,
-        appearance: "dialog-window-content",
         padding: 10
       });
       this.add(this.__messageLabel, {
diff --git a/services/web/client/source/class/osparc/ui/window/SingletonWindow.js b/services/web/client/source/class/osparc/ui/window/SingletonWindow.js
index 0ac3042b0d2..81e0e30d405 100644
--- a/services/web/client/source/class/osparc/ui/window/SingletonWindow.js
+++ b/services/web/client/source/class/osparc/ui/window/SingletonWindow.js
@@ -9,7 +9,7 @@
  * A singleton window is a type of window that can only have one instance.
  */
 qx.Class.define("osparc.ui.window.SingletonWindow", {
-  extend: qx.ui.window.Window,
+  extend: osparc.ui.window.Window,
 
   construct: function(id, caption, icon) {
     this.setId(id);
diff --git a/services/web/client/source/class/osparc/ui/window/Window.js b/services/web/client/source/class/osparc/ui/window/Window.js
new file mode 100644
index 00000000000..cc4a28ddbbc
--- /dev/null
+++ b/services/web/client/source/class/osparc/ui/window/Window.js
@@ -0,0 +1,42 @@
+/*
+ * oSPARC - The SIMCORE frontend - https://osparc.io
+ * Copyright: 2020 IT'IS Foundation - https://itis.swiss
+ * License: MIT - https://opensource.org/licenses/MIT
+ * Authors: Ignacio Pascual (ignapas)
+ */
+
+qx.Class.define("osparc.ui.window.Window", {
+  extend: qx.ui.window.Window,
+  construct: function(caption, icon) {
+    this.base(arguments, caption, icon);
+    this.set({
+      appearance: "service-window",
+      backgroundColor: "material-button-background"
+    });
+    this.addListener("appear", () => {
+      // Enable closing when clicking outside the modal
+      const thisDom = this.getContentElement().getDomElement();
+      const thisZIndex = parseInt(thisDom.style.zIndex);
+      const modalFrame = qx.dom.Hierarchy.getSiblings(thisDom).find(el =>
+        // Hack: Qx inserts the modalFrame as a sibling of the window with a -1 zIndex
+        parseInt(el.style.zIndex) === thisZIndex - 1
+      );
+      if (modalFrame) {
+        modalFrame.addEventListener("click", () => {
+          if (this.isModal() && this.isClickAwayClose() &&
+            parseInt(modalFrame.style.zIndex) === parseInt(thisDom.style.zIndex) - 1) {
+            this.close();
+          }
+        });
+        modalFrame.style.backgroundColor = "black";
+        modalFrame.style.opacity = 0.4;
+      }
+    });
+  },
+  properties: {
+    clickAwayClose: {
+      check: "Boolean",
+      init: false
+    }
+  }
+});
diff --git a/services/web/server/src/simcore_service_webserver/publication_handlers.py b/services/web/server/src/simcore_service_webserver/publication_handlers.py
index 74b041c58f6..f02e4ec4869 100644
--- a/services/web/server/src/simcore_service_webserver/publication_handlers.py
+++ b/services/web/server/src/simcore_service_webserver/publication_handlers.py
@@ -71,7 +71,7 @@ async def service_submission(request: web.Request):
                 "data": json2html.convert(
                     json=json.dumps(data), table_attributes='class="pure-table"'
                 ),
-                "subject": "TEST: " * is_real_usage + "New service submission",
+                "subject": "TEST: " * (not is_real_usage) + "New service submission",
             },
             attachments=[
                 (filename, filedata),