diff --git a/client/web/admin/src/components/Apigw/CFiltersStepper.vue b/client/web/admin/src/components/Apigw/CFiltersStepper.vue
index 4e84419c14..a8a642f59c 100644
--- a/client/web/admin/src/components/Apigw/CFiltersStepper.vue
+++ b/client/web/admin/src/components/Apigw/CFiltersStepper.vue
@@ -53,10 +53,11 @@
           :filters="getSelectedFiltersByStep"
           @addFilter="onAddFilter"
         />
-        <c-submit-button
+        <c-button-submit
+          :disabled="disabled"
           :processing="processing"
           :success="success"
-          :disabled="disabled"
+          :text="$t('admin:general.label.submit')"
           @submit="$emit('submit')"
         />
       </div>
@@ -65,7 +66,6 @@
 </template>
 <script>
 import CFilterModal from 'corteza-webapp-admin/src/components/Apigw/CFilterModal'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import CFiltersTable from 'corteza-webapp-admin/src/components/Apigw/CFiltersTable'
 import CFiltersDropdown from 'corteza-webapp-admin/src/components/Apigw/CFiltersDropdown'
 
@@ -78,31 +78,36 @@ const mapKindToStep = {
 export default {
   components: {
     CFilterModal,
-    CSubmitButton,
     CFiltersTable,
     CFiltersDropdown,
   },
+
   props: {
     fetching: {
       type: Boolean,
       value: false,
     },
+
     processing: {
       type: Boolean,
       value: false,
     },
+
     success: {
       type: Boolean,
       value: false,
     },
+
     filters: {
       type: Array,
       required: true,
     },
+
     availableFilters: {
       type: Array,
       required: true,
     },
+
     steps: {
       type: Array,
       required: true,
diff --git a/client/web/admin/src/components/Apigw/CRouteEditorInfo.vue b/client/web/admin/src/components/Apigw/CRouteEditorInfo.vue
index a1cb5b11b5..cd62168146 100644
--- a/client/web/admin/src/components/Apigw/CRouteEditorInfo.vue
+++ b/client/web/admin/src/components/Apigw/CRouteEditorInfo.vue
@@ -139,11 +139,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', route)"
       />
 
@@ -161,7 +162,6 @@
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CRouteEditorInfo',
@@ -173,7 +173,6 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Apigw/CSettingsEditor.vue b/client/web/admin/src/components/Apigw/CSettingsEditor.vue
index f5b3fa50aa..b6fd402a33 100644
--- a/client/web/admin/src/components/Apigw/CSettingsEditor.vue
+++ b/client/web/admin/src/components/Apigw/CSettingsEditor.vue
@@ -52,10 +52,11 @@
     </b-form-row>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', settings)"
       />
     </template>
@@ -63,7 +64,6 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CSettingsEditor',
@@ -73,10 +73,6 @@ export default {
     keyPrefix: 'settings',
   },
 
-  components: {
-    CSubmitButton,
-  },
-
   props: {
     settings: {
       type: Object,
diff --git a/client/web/admin/src/components/Application/CApplicationEditorInfo.vue b/client/web/admin/src/components/Application/CApplicationEditorInfo.vue
index 8becdf96a2..9106c9951e 100644
--- a/client/web/admin/src/components/Application/CApplicationEditorInfo.vue
+++ b/client/web/admin/src/components/Application/CApplicationEditorInfo.vue
@@ -103,11 +103,11 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', application)"
       />
 
@@ -125,7 +125,6 @@
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CApplicationEditorInfo',
@@ -137,7 +136,6 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Application/CApplicationEditorUnify.vue b/client/web/admin/src/components/Application/CApplicationEditorUnify.vue
index 354147122e..76ac946621 100644
--- a/client/web/admin/src/components/Application/CApplicationEditorUnify.vue
+++ b/client/web/admin/src/components/Application/CApplicationEditorUnify.vue
@@ -134,12 +134,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        data-test-id="button-submit"
-        class="float-right"
+      <c-button-submit
+        :disabled="disabled"
         :processing="processing"
         :success="success"
-        :disabled="disabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', { unify, unifyAssets })"
       />
     </template>
@@ -148,7 +148,6 @@
 
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CApplicationEditorUnify',
@@ -158,10 +157,6 @@ export default {
     keyPrefix: 'editor.unify',
   },
 
-  components: {
-    CSubmitButton,
-  },
-
   props: {
     unify: {
       type: Object,
diff --git a/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue b/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
index 8715984f4a..4064fa884e 100644
--- a/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
+++ b/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
@@ -443,11 +443,12 @@ curl -X POST {{ curlURL }} \
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="saveDisabled"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="submit"
       />
 
@@ -479,7 +480,6 @@ curl -X POST {{ curlURL }} \
 import { NoID } from '@cortezaproject/corteza-js'
 import { handle, components } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import CRolePicker from 'corteza-webapp-admin/src/components/CRolePicker'
 import CSelectUser from 'corteza-webapp-admin/src/components/Authclient/CSelectUser'
 import copy from 'copy-to-clipboard'
@@ -497,7 +497,6 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
     CRolePicker,
     CSelectUser,
     CInputDateTime,
diff --git a/client/web/admin/src/components/CRolePicker.vue b/client/web/admin/src/components/CRolePicker.vue
index 7f31f6e453..a090073698 100644
--- a/client/web/admin/src/components/CRolePicker.vue
+++ b/client/web/admin/src/components/CRolePicker.vue
@@ -48,6 +48,7 @@ import { debounce } from 'lodash'
 import { VueSelect } from 'vue-select'
 import { components } from '@cortezaproject/corteza-vue/'
 const { CInputConfirm } = components
+
 function roleSorter (a, b) {
   return `${a.name} ${a.handle} ${a.roleID}`.localeCompare(`${b.name} ${b.handle} ${b.roleID}`)
 }
diff --git a/client/web/admin/src/components/Federation/CFederationEditorInfo.vue b/client/web/admin/src/components/Federation/CFederationEditorInfo.vue
index 5bac047bcb..20c919e73e 100644
--- a/client/web/admin/src/components/Federation/CFederationEditorInfo.vue
+++ b/client/web/admin/src/components/Federation/CFederationEditorInfo.vue
@@ -133,11 +133,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="saveDisabled"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', node)"
       />
 
@@ -154,7 +155,6 @@
 <script>
 import { NoID } from '@cortezaproject/corteza-js'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CFederationEditorInfo',
@@ -166,7 +166,6 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Permissions/CPermissionList.vue b/client/web/admin/src/components/Permissions/CPermissionList.vue
index 9f0e8602c2..d274790c9e 100644
--- a/client/web/admin/src/components/Permissions/CPermissionList.vue
+++ b/client/web/admin/src/components/Permissions/CPermissionList.vue
@@ -179,14 +179,13 @@
         v-if="loaded && canGrant"
         #footer
       >
-        <c-submit-button
-          class="float-right"
+        <c-button-submit
           :processing="processing"
           :success="success"
+          :text="$t('ui.save')"
+          class="float-right"
           @submit="onSubmit"
-        >
-          {{ $t('ui.save') }}
-        </c-submit-button>
+        />
       </template>
     </b-card>
 
@@ -262,7 +261,6 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { VueSelect } from 'vue-select'
 import _ from 'lodash'
 
@@ -272,7 +270,6 @@ export default {
   },
 
   components: {
-    CSubmitButton,
     VueSelect,
   },
 
diff --git a/client/web/admin/src/components/Queues/CQueueEditorInfo.vue b/client/web/admin/src/components/Queues/CQueueEditorInfo.vue
index 231c9ff8eb..d76f651a7f 100644
--- a/client/web/admin/src/components/Queues/CQueueEditorInfo.vue
+++ b/client/web/admin/src/components/Queues/CQueueEditorInfo.vue
@@ -96,11 +96,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', queue)"
       />
 
@@ -119,7 +120,6 @@
 import { NoID } from '@cortezaproject/corteza-js'
 import { handle } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CQueueEditorInfo',
@@ -131,7 +131,6 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Role/CRoleEditorInfo.vue b/client/web/admin/src/components/Role/CRoleEditorInfo.vue
index 4218b5b70a..ec4a1a1107 100644
--- a/client/web/admin/src/components/Role/CRoleEditorInfo.vue
+++ b/client/web/admin/src/components/Role/CRoleEditorInfo.vue
@@ -158,11 +158,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="submit()"
       />
 
@@ -191,7 +192,6 @@
 import { system, NoID } from '@cortezaproject/corteza-js'
 import { handle } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CRoleEditorInfo',
@@ -203,7 +203,6 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Role/CRoleEditorMembers.vue b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
index 8a4e933a1c..a73c2158db 100644
--- a/client/web/admin/src/components/Role/CRoleEditorMembers.vue
+++ b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
@@ -55,10 +55,11 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit')"
       />
     </template>
@@ -68,7 +69,6 @@
 <script>
 import { debounce } from 'lodash'
 import { VueSelect } from 'vue-select'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { components } from '@cortezaproject/corteza-vue/'
 const { CInputConfirm } = components
 
@@ -79,7 +79,6 @@ export default {
   },
 
   components: {
-    CSubmitButton,
     VueSelect,
     CInputConfirm,
   },
diff --git a/client/web/admin/src/components/SensitivityLevel/CSensitivityLevelEditorInfo.vue b/client/web/admin/src/components/SensitivityLevel/CSensitivityLevelEditorInfo.vue
index 218a009ecc..9613d3bd45 100644
--- a/client/web/admin/src/components/SensitivityLevel/CSensitivityLevelEditorInfo.vue
+++ b/client/web/admin/src/components/SensitivityLevel/CSensitivityLevelEditorInfo.vue
@@ -119,11 +119,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', sensitivityLevel)"
       />
 
@@ -141,7 +142,6 @@
 import { NoID } from '@cortezaproject/corteza-js'
 import { handle } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CSensitivityLevelEditorInfo',
@@ -153,7 +153,6 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Settings/Compose/CComposeEditorBasic.vue b/client/web/admin/src/components/Settings/Compose/CComposeEditorBasic.vue
index 2a7188f484..c40849c41a 100644
--- a/client/web/admin/src/components/Settings/Compose/CComposeEditorBasic.vue
+++ b/client/web/admin/src/components/Settings/Compose/CComposeEditorBasic.vue
@@ -79,11 +79,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', basic)"
       />
     </template>
@@ -91,7 +92,6 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CComposeEditorBasic',
@@ -101,10 +101,6 @@ export default {
     keyPrefix: 'editor.basic',
   },
 
-  components: {
-    CSubmitButton,
-  },
-
   props: {
     basic: {
       type: Object,
diff --git a/client/web/admin/src/components/Settings/Compose/CComposeEditorUI.vue b/client/web/admin/src/components/Settings/Compose/CComposeEditorUI.vue
index 2e4d3d02c0..1c27bea8f4 100644
--- a/client/web/admin/src/components/Settings/Compose/CComposeEditorUI.vue
+++ b/client/web/admin/src/components/Settings/Compose/CComposeEditorUI.vue
@@ -66,11 +66,12 @@
     </b-form>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="onSubmit"
       />
     </template>
@@ -78,7 +79,6 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CComposeEditorUI',
@@ -88,10 +88,6 @@ export default {
     keyPrefix: 'editor.ui',
   },
 
-  components: {
-    CSubmitButton,
-  },
-
   props: {
     settings: {
       type: Object,
diff --git a/client/web/admin/src/components/Settings/Email/CSystemEmailServer.vue b/client/web/admin/src/components/Settings/Email/CSystemEmailServer.vue
index 325aedf107..cdffe2b5b1 100644
--- a/client/web/admin/src/components/Settings/Email/CSystemEmailServer.vue
+++ b/client/web/admin/src/components/Settings/Email/CSystemEmailServer.vue
@@ -115,22 +115,22 @@
     </template>
 
     <template #footer>
-      <c-submit-button
+      <c-button-submit
+        data-test-id="button-smtp"
         :disabled="disabled"
-        :processing="processing"
-        :success="success"
-        :cypress-i-d="'button-smtp'"
+        :processing="processingSMTPTest"
+        :success="successSMTPTest"
+        :text="$t('testSmtpConfigs.button')"
         variant="light"
         class="float-left"
         @submit="smtpConnectionCheck()"
-      >
-        {{ $t('testSmtpConfigs.button') }}
-      </c-submit-button>
+      />
 
-      <c-submit-button
+      <c-button-submit
         :disabled="disabled"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
         class="float-right"
         @submit="submit()"
       />
@@ -140,7 +140,6 @@
 
 <script>
 import Vue from 'vue'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CComposeEditorBasic',
@@ -150,10 +149,6 @@ export default {
     keyPrefix: 'editor.server',
   },
 
-  components: {
-    CSubmitButton,
-  },
-
   props: {
     value: {
       type: Object,
@@ -165,11 +160,21 @@ export default {
       value: false,
     },
 
+    processingSMTPTest: {
+      type: Boolean,
+      value: false,
+    },
+
     success: {
       type: Boolean,
       value: false,
     },
 
+    successSMTPTest: {
+      type: Boolean,
+      value: false,
+    },
+
     disabled: {
       type: Boolean,
       value: true,
diff --git a/client/web/admin/src/components/Settings/System/CSystemEditorAuth.vue b/client/web/admin/src/components/Settings/System/CSystemEditorAuth.vue
index e385ede2bd..47c8eb9869 100644
--- a/client/web/admin/src/components/Settings/System/CSystemEditorAuth.vue
+++ b/client/web/admin/src/components/Settings/System/CSystemEditorAuth.vue
@@ -281,11 +281,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', settings)"
       />
     </template>
@@ -293,7 +294,6 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CSystemEditorAuth',
@@ -303,10 +303,6 @@ export default {
     keyPrefix: 'editor.auth',
   },
 
-  components: {
-    CSubmitButton,
-  },
-
   props: {
     settings: {
       type: Object,
diff --git a/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue b/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
index ee37363604..f5a210b6e7 100644
--- a/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
+++ b/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
@@ -63,10 +63,11 @@
             }"
           />
 
-          <c-submit-button
+          <c-button-submit
             :disabled="!canManage"
             :processing="processing"
             :success="success"
+            :text="$t('admin:general.label.submit')"
             class="float-right mt-2"
             @submit="$emit('submit', settings['auth.ui.styles'])"
           />
@@ -77,13 +78,12 @@
 </template>
 
 <script>
-import { Ace as AceEditor } from 'vue2-brace-editor'
-import CUploaderWithPreview from 'corteza-webapp-admin/src/components/CUploaderWithPreview'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
-
 import 'brace/mode/css'
 import 'brace/theme/chrome'
 
+import { Ace as AceEditor } from 'vue2-brace-editor'
+import CUploaderWithPreview from 'corteza-webapp-admin/src/components/CUploaderWithPreview'
+
 export default {
   name: 'CSystemEditorAuthBgImage',
 
@@ -95,7 +95,6 @@ export default {
   components: {
     CUploaderWithPreview,
     AceEditor,
-    CSubmitButton,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue b/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue
index ae42d3ebd1..786747cbb3 100644
--- a/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue
+++ b/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue
@@ -83,11 +83,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="!dirty || !canManage"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', changes)"
       />
     </template>
@@ -96,7 +97,6 @@
 
 <script>
 import _ from 'lodash'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import OidcExternal from 'corteza-webapp-admin/src/components/Settings/System/Auth/ExternalOIDC'
 import StandardExternal from 'corteza-webapp-admin/src/components/Settings/System/Auth/ExternalStd'
 import SamlExternal from 'corteza-webapp-admin/src/components/Settings/System/Auth/ExternalSAML'
@@ -224,7 +224,6 @@ export default {
   },
 
   components: {
-    CSubmitButton,
     OidcExternal,
     StandardExternal,
     SamlExternal,
diff --git a/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue b/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue
index ff23c968fd..82b23c049a 100644
--- a/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue
+++ b/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue
@@ -45,10 +45,11 @@
     </b-modal>
 
     <template #footer>
-      <c-submit-button
+      <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
         class="float-right mt-2"
         @submit="onSubmit"
       />
@@ -57,7 +58,6 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { components } from '@cortezaproject/corteza-vue'
 const { CAceEditor } = components
 
@@ -70,7 +70,6 @@ export default {
   },
 
   components: {
-    CSubmitButton,
     CAceEditor,
   },
 
diff --git a/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue b/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
index d5ae89075f..911a17bed9 100644
--- a/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
+++ b/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
@@ -200,11 +200,12 @@
     </b-form>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="onSubmit"
       />
     </template>
@@ -212,7 +213,6 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CUITopbarSettings',
@@ -222,10 +222,6 @@ export default {
     keyPrefix: 'editor.topbar',
   },
 
-  components: {
-    CSubmitButton,
-  },
-
   props: {
     settings: {
       type: Object,
diff --git a/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue b/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
index 8ef8a4d18c..763b6ace93 100644
--- a/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
+++ b/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
@@ -43,11 +43,12 @@
         </template>
 
         <template #footer>
-          <c-submit-button
+          <c-button-submit
             :disabled="!canCreate"
-            class="float-right"
             :processing="processing"
             :success="success"
+            :text="$t('admin:general.label.submit')"
+            class="float-right"
             @submit="$emit('submit', template)"
           />
         </template>
@@ -116,21 +117,19 @@
 </template>
 
 <script>
+import 'brace/mode/json'
+import 'brace/theme/chrome'
+
 import listHelpers from 'corteza-webapp-admin/src/mixins/listHelpers'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import EditorToolbox from './EditorToolbox'
 import EditorTextHtml from './EditorTextHtml'
 import EditorTextPlain from './EditorTextPlain'
 import EditorUnsupported from './EditorUnsupported'
 import { Ace as AceEditor } from 'vue2-brace-editor'
 
-import 'brace/mode/json'
-import 'brace/theme/chrome'
-
 export default {
 
   components: {
-    CSubmitButton,
     AceEditor,
     EditorToolbox,
   },
diff --git a/client/web/admin/src/components/Template/CTemplateEditorInfo.vue b/client/web/admin/src/components/Template/CTemplateEditorInfo.vue
index 973e148cf0..f4e3524188 100644
--- a/client/web/admin/src/components/Template/CTemplateEditorInfo.vue
+++ b/client/web/admin/src/components/Template/CTemplateEditorInfo.vue
@@ -124,11 +124,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', template)"
       />
 
@@ -147,7 +148,6 @@
 import { NoID } from '@cortezaproject/corteza-js'
 import { handle } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CTemplateEditorInfo',
@@ -159,7 +159,6 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
   },
 
   props: {
diff --git a/client/web/admin/src/components/User/CUserEditorAvatar.vue b/client/web/admin/src/components/User/CUserEditorAvatar.vue
index c79999f94a..87e3abf923 100644
--- a/client/web/admin/src/components/User/CUserEditorAvatar.vue
+++ b/client/web/admin/src/components/User/CUserEditorAvatar.vue
@@ -75,10 +75,11 @@
     </b-form>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', user)"
       />
     </template>
@@ -86,7 +87,6 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import CUploaderWithPreview from 'corteza-webapp-admin/src/components/CUploaderWithPreview'
 import { components } from '@cortezaproject/corteza-vue'
 const { CInputColorPicker } = components
@@ -100,7 +100,6 @@ export default {
   },
 
   components: {
-    CSubmitButton,
     CUploaderWithPreview,
     CInputColorPicker,
   },
diff --git a/client/web/admin/src/components/User/CUserEditorInfo.vue b/client/web/admin/src/components/User/CUserEditorInfo.vue
index 8d98d3c67e..8228af2fb2 100644
--- a/client/web/admin/src/components/User/CUserEditorInfo.vue
+++ b/client/web/admin/src/components/User/CUserEditorInfo.vue
@@ -119,11 +119,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', user)"
       />
 
@@ -181,7 +182,6 @@
 import { NoID } from '@cortezaproject/corteza-js'
 import { handle } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CUserEditorInfo',
@@ -193,7 +193,6 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
   },
 
   props: {
diff --git a/client/web/admin/src/components/User/CUserEditorPassword.vue b/client/web/admin/src/components/User/CUserEditorPassword.vue
index 164d2112c2..c1870a1646 100644
--- a/client/web/admin/src/components/User/CUserEditorPassword.vue
+++ b/client/web/admin/src/components/User/CUserEditorPassword.vue
@@ -60,11 +60,12 @@
         {{ $t('removePassword') }}
       </confirmation-toggle>
 
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="!passwordState || !confirmPasswordState"
         :processing="processing"
         :success="success"
-        :disabled="!passwordState || !confirmPasswordState"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="onPasswordSubmit"
       />
 
@@ -80,7 +81,6 @@
 
 <script>
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 
 export default {
   name: 'CUserEditorPassword',
@@ -92,7 +92,6 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
   },
 
   props: {
diff --git a/client/web/admin/src/components/User/CUserEditorRoles.vue b/client/web/admin/src/components/User/CUserEditorRoles.vue
index 03faa499d4..aabbc1c860 100644
--- a/client/web/admin/src/components/User/CUserEditorRoles.vue
+++ b/client/web/admin/src/components/User/CUserEditorRoles.vue
@@ -18,10 +18,11 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
         :processing="processing"
         :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit')"
       />
     </template>
@@ -29,7 +30,6 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import CRolePicker from 'corteza-webapp-admin/src/components/CRolePicker'
 
 export default {
@@ -39,7 +39,6 @@ export default {
   },
 
   components: {
-    CSubmitButton,
     CRolePicker,
   },
 
diff --git a/client/web/admin/src/components/Workflow/CWorkflowEditorInfo.vue b/client/web/admin/src/components/Workflow/CWorkflowEditorInfo.vue
index cd3220ab95..7a216c78e4 100644
--- a/client/web/admin/src/components/Workflow/CWorkflowEditorInfo.vue
+++ b/client/web/admin/src/components/Workflow/CWorkflowEditorInfo.vue
@@ -123,11 +123,12 @@
     </template>
 
     <template #footer>
-      <c-submit-button
-        class="float-right"
+      <c-button-submit
+        :disabled="saveDisabled"
         :processing="processing"
         :success="success"
-        :disabled="saveDisabled"
+        :text="$t('admin:general.label.submit')"
+        class="float-right"
         @submit="$emit('submit', workflow)"
       />
 
@@ -145,7 +146,6 @@
 <script>
 import { handle } from '@cortezaproject/corteza-vue'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { NoID } from '@cortezaproject/corteza-js'
 
 export default {
@@ -158,7 +158,6 @@ export default {
 
   components: {
     ConfirmationToggle,
-    CSubmitButton,
   },
 
   props: {
diff --git a/client/web/admin/src/components/index.js b/client/web/admin/src/components/index.js
index 48f1e88a21..276e61658a 100644
--- a/client/web/admin/src/components/index.js
+++ b/client/web/admin/src/components/index.js
@@ -33,6 +33,7 @@ Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.component('c-content-header', CContentHeader)
 Vue.component('c-resource-list-status-filter', CResourceListStatusFilter)
 Vue.component('c-input-confirm', CInputConfirm)
+Vue.component('c-button-submit', components.CButtonSubmit)
 
 // Map things
 Vue.component('l-map', LMap)
diff --git a/client/web/admin/src/views/Federation/Nodes/Editor.vue b/client/web/admin/src/views/Federation/Nodes/Editor.vue
index edd73d85b6..21aa89a696 100644
--- a/client/web/admin/src/views/Federation/Nodes/Editor.vue
+++ b/client/web/admin/src/views/Federation/Nodes/Editor.vue
@@ -57,17 +57,13 @@
           placeholder="email@example.com"
         />
         <b-input-group-append>
-          <c-submit-button
-            button-class="px-4"
-            variant="outline-primary"
-            icon-variant="text-primary"
+          <c-button-submit
+            :disabled="!generate.url || !generate.email"
             :processing="generate.processing"
             :success="generate.success"
-            :disabled="!generate.url || !generate.email"
+            :text="$t('generate.sendEmail')"
             @submit="sendEmail()"
-          >
-            {{ $t('generate.sendEmail') }}
-          </c-submit-button>
+          />
         </b-input-group-append>
       </b-input-group>
 
@@ -130,7 +126,6 @@
 import { mapGetters } from 'vuex'
 import editorHelpers from 'corteza-webapp-admin/src/mixins/editorHelpers'
 import CFederationEditorInfo from 'corteza-webapp-admin/src/components/Federation/CFederationEditorInfo'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { cloneDeep, isEqual } from 'lodash'
 
 export default {
@@ -141,7 +136,6 @@ export default {
 
   components: {
     CFederationEditorInfo,
-    CSubmitButton,
   },
 
   mixins: [
diff --git a/client/web/admin/src/views/Federation/Nodes/List.vue b/client/web/admin/src/views/Federation/Nodes/List.vue
index 55c25054db..8fdf4f4b7f 100644
--- a/client/web/admin/src/views/Federation/Nodes/List.vue
+++ b/client/web/admin/src/views/Federation/Nodes/List.vue
@@ -116,17 +116,13 @@
             placeholder=""
           />
           <b-input-group-append>
-            <c-submit-button
-              button-class="px-4"
-              variant="outline-primary"
-              icon-variant="text-primary"
+            <c-button-submit
               :disabled="!pair.url"
+              :text="$t('pair.confirm')"
               :processing="pair.processing"
               :success="pair.success"
               @submit="pairNode()"
-            >
-              {{ $t('pair.confirm') }}
-            </c-submit-button>
+            />
           </b-input-group-append>
         </b-input-group>
 
@@ -171,16 +167,12 @@
           </h2>
         </div>
 
-        <c-submit-button
-          button-class="px-5 mt-4"
-          variant="outline-primary"
-          icon-variant="text-primary"
+        <c-button-submit
           :processing="pair.processing"
           :success="pair.success"
+          :text="$t('pair.confirm')"
           @submit="confirmPending()"
-        >
-          {{ $t('pair.confirm') }}
-        </c-submit-button>
+        />
       </div>
     </b-modal>
   </b-container>
@@ -190,7 +182,6 @@
 import moment from 'moment'
 import { mapGetters } from 'vuex'
 import listHelpers from 'corteza-webapp-admin/src/mixins/listHelpers'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { components } from '@cortezaproject/corteza-vue'
 const { CResourceList } = components
 
@@ -203,7 +194,6 @@ export default {
   },
 
   components: {
-    CSubmitButton,
     CResourceList,
   },
 
diff --git a/client/web/admin/src/views/System/Apigw/Editor.vue b/client/web/admin/src/views/System/Apigw/Editor.vue
index aed0dd3ef3..a4863f8ade 100644
--- a/client/web/admin/src/views/System/Apigw/Editor.vue
+++ b/client/web/admin/src/views/System/Apigw/Editor.vue
@@ -93,6 +93,7 @@ export default {
         processing: false,
         success: false,
       },
+
       stepper: {
         fetching: false,
         processing: false,
@@ -171,6 +172,7 @@ export default {
 
     onInfoSubmit (route) {
       this.info.processing = true
+
       if (this.routeID) {
         this.$SystemAPI
           .apigwRouteUpdate(route)
diff --git a/client/web/admin/src/views/System/Apigw/Index.vue b/client/web/admin/src/views/System/Apigw/Index.vue
index 44bd92da2f..f11c8a2921 100644
--- a/client/web/admin/src/views/System/Apigw/Index.vue
+++ b/client/web/admin/src/views/System/Apigw/Index.vue
@@ -11,6 +11,8 @@
     >
       <c-settings-editor
         :settings="apigwSettings"
+        :processing="settings.processing"
+        :success="settings.success"
         class="mb-3"
         @submit="onSettingsSubmit"
       />
diff --git a/client/web/admin/src/views/System/Application/Editor.vue b/client/web/admin/src/views/System/Application/Editor.vue
index add11bfd42..a2c34c78c9 100644
--- a/client/web/admin/src/views/System/Application/Editor.vue
+++ b/client/web/admin/src/views/System/Application/Editor.vue
@@ -94,10 +94,12 @@ export default {
         processing: false,
         success: false,
       },
+
       unify: {
         processing: false,
         success: false,
       },
+
       unifyAssetStateChange: false,
     }
   },
@@ -260,6 +262,7 @@ export default {
 
             this.unifyAssetStateChange = false
 
+            this.animateSuccess('unify')
             this.toastSuccess(this.$t('notification:application.update.success'))
           })
           .catch(this.toastErrorHandler(this.$t('notification:application.update.error')))
diff --git a/client/web/admin/src/views/System/AuthClient/Editor.vue b/client/web/admin/src/views/System/AuthClient/Editor.vue
index 3915c76d65..547c2bd623 100644
--- a/client/web/admin/src/views/System/AuthClient/Editor.vue
+++ b/client/web/admin/src/views/System/AuthClient/Editor.vue
@@ -155,6 +155,7 @@ export default {
             this.authclient = new system.AuthClient(ac)
             this.initialAuthclientState = this.authclient.clone()
 
+            this.animateSuccess('info')
             this.toastSuccess(this.$t('notification:authclient.update.success'))
           })
           .catch(this.toastErrorHandler(this.$t('notification:authclient.update.error')))
@@ -167,6 +168,7 @@ export default {
             this.authclient = new system.AuthClient(ac)
             this.initialAuthclientState = this.authclient.clone()
             const { authClientID } = ac
+
             this.animateSuccess('info')
             this.toastSuccess(this.$t('notification:authclient.create.success'))
 
diff --git a/client/web/admin/src/views/System/Connection/Editor.vue b/client/web/admin/src/views/System/Connection/Editor.vue
index 474de83271..3c652458a2 100644
--- a/client/web/admin/src/views/System/Connection/Editor.vue
+++ b/client/web/admin/src/views/System/Connection/Editor.vue
@@ -51,9 +51,11 @@
           {{ connection.deletedAt ? $t('general:label.undelete') : $t('general:label.delete') }}
         </confirmation-toggle>
 
-        <c-submit-button
-          :processing="processing"
+        <c-button-submit
           :disabled="disabled || saveDisabled"
+          :processing="info.processing"
+          :success="info.success"
+          :text="$t('admin:general.label.submit')"
           class="ml-auto"
           @submit="onSubmit"
         />
@@ -71,7 +73,6 @@ import CConnectionEditorInfo from 'corteza-webapp-admin/src/components/Connectio
 import CConnectionEditorProperties from 'corteza-webapp-admin/src/components/Connection/CConnectionEditorProperties'
 import CConnectionEditorDal from 'corteza-webapp-admin/src/components/Connection/CConnectionEditorDAL'
 import ConfirmationToggle from 'corteza-webapp-admin/src/components/ConfirmationToggle'
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { mapGetters } from 'vuex'
 
 export default {
@@ -80,7 +81,6 @@ export default {
     CConnectionEditorDal,
     CConnectionEditorProperties,
     ConfirmationToggle,
-    CSubmitButton,
   },
 
   i18nOptions: {
@@ -101,7 +101,11 @@ export default {
 
   data () {
     return {
-      processing: false,
+      info: {
+        processing: false,
+        success: false,
+      },
+
       connection: undefined,
       initialConnectionState: undefined,
 
@@ -123,7 +127,7 @@ export default {
     },
 
     disabled () {
-      return this.processing
+      return this.info.processing
     },
 
     fresh () {
@@ -187,7 +191,7 @@ export default {
     },
 
     async fetchSensitivityLevels () {
-      this.processing = true
+      this.info.processing = true
 
       return this.$SystemAPI.dalSensitivityLevelList()
         .then(({ set = [] }) => {
@@ -195,7 +199,7 @@ export default {
         })
         .catch(this.toastErrorHandler(this.$t('notification:sensitivityLevel.fetch.error')))
         .finally(() => {
-          this.processing = false
+          this.info.processing = false
         })
     },
 
@@ -204,13 +208,14 @@ export default {
       const op = updating ? 'update' : 'create'
       const fn = updating ? 'dalConnectionUpdate' : 'dalConnectionCreate'
 
-      this.processing = true
+      this.info.processing = true
       this.incLoader()
 
       return this.$SystemAPI[fn](this.connection)
         .then(connection => {
           const { connectionID } = connection
 
+          this.animateSuccess('info')
           this.toastSuccess(this.$t(`notification:connection.${op}.success`))
           if (!updating) {
             this.$router.push({ name: `system.connection.edit`, params: { connectionID } })
@@ -221,7 +226,7 @@ export default {
         })
         .catch(this.toastErrorHandler(this.$t(`notification:connection.${op}.error`)))
         .finally(() => {
-          this.processing = false
+          this.info.processing = false
         })
     },
 
@@ -231,11 +236,11 @@ export default {
       const op = deleting ? 'delete' : 'undelete'
       const fn = deleting ? 'dalConnectionDelete' : 'dalConnectionUndelete'
 
-      this.processing = true
+      this.info.processing = true
       this.incLoader()
 
       return this.$SystemAPI[fn](this.connection)
-        .then(connection => {
+        .then(() => {
           this.toastSuccess(this.$t(`notification:connection.${op}.success`))
 
           if (deleting) {
@@ -249,7 +254,7 @@ export default {
         })
         .catch(this.toastErrorHandler(this.$t(`notification:connection.${op}.error`)))
         .finally(() => {
-          this.processing = false
+          this.info.processing = false
         })
     },
 
diff --git a/client/web/admin/src/views/System/Email/Index.vue b/client/web/admin/src/views/System/Email/Index.vue
index f4bdcce17b..f162c79912 100644
--- a/client/web/admin/src/views/System/Email/Index.vue
+++ b/client/web/admin/src/views/System/Email/Index.vue
@@ -9,8 +9,10 @@
     <c-system-email-server
       :key="JSON.stringify(server)"
       v-model="server"
-      :processing="auth.processing"
-      :success="auth.success"
+      :processing="external.processing"
+      :processing-smtp-test="auth.processing"
+      :success="external.success"
+      :success-smtp-tes="auth.success"
       :disabled="!canManage"
       @submit="onEmailServerSubmit($event)"
       @smtpConnectionCheck="onSmtpConnectionCheck($event)"
diff --git a/client/web/admin/src/views/System/Queue/Editor.vue b/client/web/admin/src/views/System/Queue/Editor.vue
index 54bae0d741..82ada35d24 100644
--- a/client/web/admin/src/views/System/Queue/Editor.vue
+++ b/client/web/admin/src/views/System/Queue/Editor.vue
@@ -158,6 +158,7 @@ export default {
 
     onSubmit (queue) {
       this.incLoader()
+
       if (this.queueID) {
         this.$SystemAPI.queuesUpdate(queue)
           .then(queue => {
diff --git a/client/web/admin/src/views/System/Role/Editor.vue b/client/web/admin/src/views/System/Role/Editor.vue
index b079fb4857..455c4c66d2 100644
--- a/client/web/admin/src/views/System/Role/Editor.vue
+++ b/client/web/admin/src/views/System/Role/Editor.vue
@@ -114,6 +114,7 @@ export default {
         processing: false,
         success: false,
       },
+
       members: {
         processing: false,
         success: false,
diff --git a/client/web/admin/src/views/System/SensitivityLevel/Editor.vue b/client/web/admin/src/views/System/SensitivityLevel/Editor.vue
index 56069f59cd..d63a9f0c1e 100644
--- a/client/web/admin/src/views/System/SensitivityLevel/Editor.vue
+++ b/client/web/admin/src/views/System/SensitivityLevel/Editor.vue
@@ -143,6 +143,7 @@ export default {
             this.sensitivityLevel = sensitivityLevel
             this.initialSensitivityLevelState = cloneDeep(sensitivityLevel)
 
+            this.animateSuccess('info')
             this.toastSuccess(this.$t('notification:sensitivityLevel.update.success'))
           })
           .catch(this.toastErrorHandler(this.$t('notification:sensitivityLevel.update.error')))
diff --git a/client/web/admin/src/views/System/Settings/Index.vue b/client/web/admin/src/views/System/Settings/Index.vue
index e6ab69d885..e0360552b6 100644
--- a/client/web/admin/src/views/System/Settings/Index.vue
+++ b/client/web/admin/src/views/System/Settings/Index.vue
@@ -26,6 +26,8 @@
     <c-system-editor-auth-bg-screen
       :settings="getAuthBackground"
       :can-manage="canManage"
+      :processing="authBackground.processing"
+      :success="authBackground.success"
       class="mt-3"
       @onUpload="onBackgroundImageUpload"
       @resetAttachment="onResetBackgroundImage"
diff --git a/client/web/admin/src/views/System/Template/Editor.vue b/client/web/admin/src/views/System/Template/Editor.vue
index 04f95f03e2..d19be9607a 100644
--- a/client/web/admin/src/views/System/Template/Editor.vue
+++ b/client/web/admin/src/views/System/Template/Editor.vue
@@ -213,6 +213,7 @@ export default {
             this.template = new system.Template(template)
             this.initialTemplateState = this.template.clone()
 
+            this.animateSuccess('info')
             this.toastSuccess(this.$t('notification:template.update.success'))
           })
           .catch(this.toastErrorHandler(this.$t('notification:template.update.error')))
diff --git a/client/web/admin/src/views/System/User/Editor.vue b/client/web/admin/src/views/System/User/Editor.vue
index 040e3b2616..ebbb5cf273 100644
--- a/client/web/admin/src/views/System/User/Editor.vue
+++ b/client/web/admin/src/views/System/User/Editor.vue
@@ -155,18 +155,22 @@ export default {
         processing: false,
         success: false,
       },
+
       avatar: {
         processing: false,
         success: false,
       },
+
       password: {
         processing: false,
         success: false,
       },
+
       mfa: {
         processing: false,
         success: false,
       },
+
       roles: {
         processing: false,
         success: false,
diff --git a/client/web/compose/src/components/Admin/EditorToolbar.vue b/client/web/compose/src/components/Admin/EditorToolbar.vue
index ab201f31c5..9c5582bfb2 100644
--- a/client/web/compose/src/components/Admin/EditorToolbar.vue
+++ b/client/web/compose/src/components/Admin/EditorToolbar.vue
@@ -47,44 +47,41 @@
         >
           {{ $t('label.delete') }}
         </c-input-confirm>
-
         <slot name="saveAsCopy" />
-        <b-button
+
+        <c-button-submit
           v-if="!hideClone"
           data-test-id="button-clone"
-          :title="cloneTooltip"
           :disabled="disableClone || processing"
+          :title="cloneTooltip"
+          :processing="processingClone"
           variant="light"
+          :text="$t('label.saveAsCopy')"
           size="lg"
           class="ml-2"
-          @click="$emit('clone')"
-        >
-          {{ $t('label.saveAsCopy') }}
-        </b-button>
-
-        <b-button
+          @submit="$emit('clone')"
+        />
+        <c-button-submit
           v-if="!hideSave"
           data-test-id="button-save-and-close"
           :disabled="disableSave || processing"
+          :processing="processingSaveAndClose"
           variant="light"
+          :text="$t('label.saveAndClose')"
           size="lg"
           class="ml-2"
-          @click.prevent="$emit('saveAndClose')"
-        >
-          {{ $t('label.saveAndClose') }}
-        </b-button>
-
-        <b-button
+          @submit="$emit('saveAndClose')"
+        />
+        <c-button-submit
           v-if="!hideSave"
           data-test-id="button-save"
           :disabled="disableSave || processing"
-          variant="primary"
+          :processing="processingSave"
+          :text="$t('label.save')"
           size="lg"
           class="ml-2"
-          @click.prevent="$emit('save')"
-        >
-          {{ $t('label.save') }}
-        </b-button>
+          @submit="$emit('save')"
+        />
       </div>
     </b-row>
   </b-container>
@@ -103,42 +100,66 @@ export default {
       type: Boolean,
       default: false,
     },
+
+    processingSave: {
+      type: Boolean,
+      default: false,
+    },
+
+    processingSaveAndClose: {
+      type: Boolean,
+      default: false,
+    },
+
+    processingClone: {
+      type: Boolean,
+      default: false,
+    },
+
     backLink: {
       type: Object,
       required: false,
       default: undefined,
     },
+
     hideDelete: {
       type: Boolean,
       required: false,
     },
+
     hideSave: {
       type: Boolean,
       required: false,
     },
+
     hideClone: {
       type: Boolean,
       required: false,
     },
+
     disableDelete: {
       type: Boolean,
       required: false,
       default: false,
     },
+
     disableSave: {
       type: Boolean,
       required: false,
       default: false,
     },
+
     disableClone: {
       type: Boolean,
       default: false,
     },
+
     deleteTooltip: {
       type: String,
       required: false,
       default: '',
     },
+
     cloneTooltip: {
       type: String,
       default: '',
diff --git a/client/web/compose/src/components/Common/RecordToolbar.vue b/client/web/compose/src/components/Common/RecordToolbar.vue
index 5aee77f5d1..2d9123fd93 100644
--- a/client/web/compose/src/components/Common/RecordToolbar.vue
+++ b/client/web/compose/src/components/Common/RecordToolbar.vue
@@ -160,29 +160,17 @@
             {{ labels.new || $t('label.addNew') }}
           </b-button>
 
-          <b-button
+          <c-button-submit
             v-if="inEditing && !(hideSubmit || settings.hideSubmit)"
-            data-test-id="button-submit"
-            :disabled="!record || !canSaveRecord || processing"
-            class="d-flex align-items-center justify-content-center ml-2"
-            variant="primary"
+            data-test-id="button-save"
+            :disabled="!record || !canSaveRecord || processingSubmit"
+            :processing="processingSubmit"
+            :text="labels.submit || $t('label.save')"
             size="lg"
             style="min-height: 42px; min-width: 73px;"
-            @click.prevent="$emit('submit')"
-          >
-            <b-spinner
-              v-if="processingSubmit"
-              small
-              type="grow"
-            />
-
-            <span
-              v-else
-              data-test-id="button-save"
-            >
-              {{ labels.submit || $t('label.save') }}
-            </span>
-          </b-button>
+            class="ml-2"
+            @submit="$emit('submit')"
+          />
 
           <slot name="end-actions" />
         </template>
diff --git a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
index c57234a284..1cbde9c384 100644
--- a/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
+++ b/client/web/compose/src/components/Namespaces/Reminders/Edit.vue
@@ -120,13 +120,13 @@
         {{ $t('label.back') }}
       </b-button>
 
-      <b-button
+      <c-button-submit
         data-test-id="button-save"
-        variant="primary"
-        @click="$emit('save', reminder)"
-      >
-        {{ $t('label.save') }}
-      </b-button>
+        :disabled="disableSave"
+        :processing="processingSave"
+        :text="$t('label.save')"
+        @submit="$emit('save', reminder)"
+      />
     </div>
   </div>
 </template>
@@ -147,6 +147,7 @@ export default {
     VueSelect,
     CInputDateTime,
   },
+
   props: {
     edit: {
       type: Object,
@@ -159,6 +160,16 @@ export default {
       required: true,
       default: () => [],
     },
+
+    disableSave: {
+      type: Boolean,
+      default: false,
+    },
+
+    processingSave: {
+      type: Boolean,
+      default: false,
+    },
   },
 
   data () {
diff --git a/client/web/compose/src/components/Namespaces/Reminders/index.vue b/client/web/compose/src/components/Namespaces/Reminders/index.vue
index 0aa015d9b6..ea24d5b12d 100644
--- a/client/web/compose/src/components/Namespaces/Reminders/index.vue
+++ b/client/web/compose/src/components/Namespaces/Reminders/index.vue
@@ -13,6 +13,8 @@
       v-else
       :edit="edit"
       :users="users"
+      :disable-save="disableSave"
+      :processing-save="processingSave"
       class="flex-fill"
       @dismiss="onDismiss"
       @back="onCancel()"
@@ -37,6 +39,8 @@ export default {
     return {
       reminders: [],
       edit: null,
+      disableSave: false,
+      processingSave: false,
     }
   },
 
@@ -55,9 +59,8 @@ export default {
   },
 
   beforeDestroy () {
-    this.$root.$off('reminders.pull', this.fetchReminders)
-    this.$root.$off('reminder.updated', this.fetchReminders)
-    this.$root.$off('reminder.create', this.onEdit)
+    this.destroyEvents()
+    this.setDefaultValues()
   },
 
   methods: {
@@ -76,12 +79,16 @@ export default {
     },
 
     onSave (r) {
+      this.processingSave = true
       const endpoint = r.reminderID && r.reminderID !== NoID ? 'reminderUpdate' : 'reminderCreate'
+
       this.$SystemAPI[endpoint](r).then(() => {
         return this.fetchReminders()
       }).then(() => {
         this.onCancel()
         this.$Reminder.prefetch()
+      }).finally(() => {
+        this.processingSave = false
       })
     },
 
@@ -110,6 +117,19 @@ export default {
         this.reminders = reminders.map(r => new system.Reminder(r))
       })
     },
+
+    setDefaultValues () {
+      this.reminder = []
+      this.edit = null
+      this.disableSave = false
+      this.processingSave = false
+    },
+
+    destroyEvents () {
+      this.$root.$off('reminders.pull', this.fetchReminders)
+      this.$root.$off('reminder.updated', this.fetchReminders)
+      this.$root.$off('reminder.create', this.onEdit)
+    },
   },
 
 }
diff --git a/client/web/compose/src/components/index.js b/client/web/compose/src/components/index.js
index 998e05fa3a..f3cd0ed633 100644
--- a/client/web/compose/src/components/index.js
+++ b/client/web/compose/src/components/index.js
@@ -60,6 +60,7 @@ Vue.component('c-input-confirm', components.CInputConfirm)
 Vue.component('c-input-processing', components.CInputProcessing)
 Vue.component('c-resource-list', components.CResourceList)
 Vue.component('c-input-checkbox', components.CInputCheckbox)
+Vue.component('c-button-submit', components.CButtonSubmit)
 
 // Map things
 Vue.component('l-map', LMap)
diff --git a/client/web/compose/src/mixins/pages.js b/client/web/compose/src/mixins/pages.js
index eeb42b088c..71d91b45e7 100644
--- a/client/web/compose/src/mixins/pages.js
+++ b/client/web/compose/src/mixins/pages.js
@@ -2,6 +2,12 @@ import { NoID } from '@cortezaproject/corteza-js'
 import { fetchID } from 'corteza-webapp-compose/src/lib/block'
 
 export default {
+  data () {
+    return {
+      processingClone: false,
+    }
+  },
+
   methods: {
     countDuplicateTitles (pages, pattern) {
       let substrTitle = this.page.title
@@ -18,6 +24,7 @@ export default {
     },
 
     handleClone () {
+      this.processingClone = true
       const { namespaceID = NoID } = this.namespace
       const pattern = /\([0-9]+\)/
 
@@ -78,6 +85,7 @@ export default {
           this.$router.push({ name: this.$route.name, params: { pageID } })
         })
         .catch(this.toastErrorHandler(this.$t('notification:page.cloneFailed')))
+        .finally(() => { this.processingClone = false })
     },
 
     cloneLayouts (pageID) {
diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss
index 075703862b..6c13055b70 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/client/web/compose/src/themes/corteza-base/custom.scss
@@ -78,7 +78,7 @@ th {
   -ms-flex: 1 1 auto;
   flex: 1 1 auto;
   margin-bottom: 0;
-  font-size: .9rem;
+  font-size: 0.9rem;
   border-radius: 0.25rem;
 
   .vs__selected-options {
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index 60304cbe9a..8357180697 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -298,6 +298,8 @@
     <portal to="admin-toolbar">
       <editor-toolbar
         :processing="processing"
+        :processing-save="processingSave"
+        :processing-save-and-close="processingSaveAndClose"
         :hide-delete="hideDelete"
         :hide-save="hideSave"
         hide-clone
@@ -373,6 +375,8 @@ export default {
       chart: undefined,
       initialChartState: undefined,
       processing: false,
+      processingSave: false,
+      processingSaveAndClose: false,
 
       editReportIndex: undefined,
       checkboxLabel: {
@@ -614,6 +618,14 @@ export default {
     },
 
     handleSave ({ closeOnSuccess = false } = {}) {
+      this.processing = true
+
+      if (closeOnSuccess) {
+        this.processingSaveAndClose = true
+      } else {
+        this.processingSave = true
+      }
+
       /**
        * Pass a special tag alongside payload that
        * instructs store layer to add content-language header to the API request
@@ -631,7 +643,17 @@ export default {
           } else {
             this.$router.push({ name: 'admin.charts.edit', params: { chartID: chartID } })
           }
-        }).catch(this.toastErrorHandler(this.$t('notification:chart.saveFailed')))
+        })
+          .catch(this.toastErrorHandler(this.$t('notification:chart.saveFailed')))
+          .finally(() => {
+            this.processing = false
+
+            if (closeOnSuccess) {
+              this.processingSaveAndClose = false
+            } else {
+              this.processingSave = false
+            }
+          })
       } else {
         this.updateChart(c).then((chart) => {
           this.chart = chartConstructor(chart)
@@ -640,15 +662,29 @@ export default {
           if (closeOnSuccess) {
             this.redirect()
           }
-        }).catch(this.toastErrorHandler(this.$t('notification:chart.saveFailed')))
+        })
+          .catch(this.toastErrorHandler(this.$t('notification:chart.saveFailed')))
+          .finally(() => {
+            this.processing = false
+
+            if (closeOnSuccess) {
+              this.processingSaveAndClose = false
+            } else {
+              this.processingSave = false
+            }
+          })
       }
     },
 
     handleDelete () {
+      this.processing = true
+
       this.deleteChart(this.chart).then(() => {
         this.toastSuccess(this.$t('notification:chart.deleted'))
         this.$router.push({ name: 'admin.charts' })
-      }).catch(this.toastErrorHandler(this.$t('notification:chart.deleteFailed')))
+      })
+        .catch(this.toastErrorHandler(this.$t('notification:chart.deleteFailed')))
+        .finally(() => { this.processing = false })
     },
 
     redirect () {
diff --git a/client/web/compose/src/views/Admin/Modules/Edit.vue b/client/web/compose/src/views/Admin/Modules/Edit.vue
index a16c17f7d4..cb391d2307 100644
--- a/client/web/compose/src/views/Admin/Modules/Edit.vue
+++ b/client/web/compose/src/views/Admin/Modules/Edit.vue
@@ -439,6 +439,8 @@
     <portal to="admin-toolbar">
       <editor-toolbar
         :processing="processing"
+        :processing-save="processingSave"
+        :processing-save-and-close="processingSaveAndClose"
         :hide-delete="hideDelete"
         hide-clone
         :hide-save="hideSave"
@@ -521,6 +523,8 @@ export default {
       initialModuleState: undefined,
       hasRecords: true,
       processing: false,
+      processingSave: false,
+      processingSaveAndClose: false,
 
       federationSettings: {
         modal: false,
@@ -768,6 +772,12 @@ export default {
       const resourceTranslationLanguage = this.currentLanguage
       this.processing = true
 
+      if (closeOnSuccess) {
+        this.processingSaveAndClose = true
+      } else {
+        this.processingSave = true
+      }
+
       if (!this.isEdit) {
         // Filter out record fields that reference this not yet created module
         let fields = []
@@ -807,6 +817,12 @@ export default {
         }).catch(this.toastErrorHandler(this.$t('notification:module.saveFailed')))
           .finally(() => {
             this.processing = false
+
+            if (closeOnSuccess) {
+              this.processingSaveAndClose = false
+            } else {
+              this.processingSave = false
+            }
           })
       } else {
         this.updateModule({ ...this.module, resourceTranslationLanguage }).then(module => {
@@ -820,6 +836,12 @@ export default {
         }).catch(this.toastErrorHandler(this.$t('notification:module.saveFailed')))
           .finally(() => {
             this.processing = false
+
+            if (closeOnSuccess) {
+              this.processingSaveAndClose = false
+            } else {
+              this.processingSave = false
+            }
           })
       }
     },
@@ -876,6 +898,8 @@ export default {
       this.initialModuleState = undefined
       this.hasRecords = true
       this.processing = false
+      this.processingSaveAndClose = false
+      this.processingSave = false
       this.federationSettings = {}
       this.discoverySettings = {}
       this.abortableRequests = []
diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue
index 02ececd3e1..34a3004dc3 100644
--- a/client/web/compose/src/views/Admin/Pages/Builder.vue
+++ b/client/web/compose/src/views/Admin/Pages/Builder.vue
@@ -255,8 +255,11 @@
     <portal to="admin-toolbar">
       <editor-toolbar
         :hide-save="!page.canUpdatePage"
-        :processing="processing"
         hide-clone
+        :processing="processing"
+        :processing-save="processingSave"
+        :processing-save-and-close="processingSaveAndClose"
+        :processing-clone="processingClone"
         @save="handleSaveLayout()"
         @delete="handleDeleteLayout()"
         @saveAndClose="handleSaveLayout({ closeOnSuccess: true })"
@@ -361,6 +364,9 @@ export default {
       title: '',
 
       processing: false,
+      processingSave: false,
+      processingSaveAndClose: false,
+      processingClone: false,
 
       processingLayout: false,
 
@@ -798,6 +804,12 @@ export default {
 
       this.processing = true
 
+      if (closeOnSuccess) {
+        this.processingSaveAndClose = true
+      } else {
+        this.processingSave = true
+      }
+
       return Promise.all([
         this.findPageByID({ ...this.page, force: true }),
         this.findLayoutByID({ ...this.layout }),
@@ -839,12 +851,19 @@ export default {
         this.setLayout(layout.pageLayoutID, false)
       }).finally(() => {
         this.processing = false
+
+        if (closeOnSuccess) {
+          this.processingSaveAndClose = false
+        } else {
+          this.processingSave = false
+        }
       }).catch(this.toastErrorHandler(this.$t('notification:page.page-layout.save.failed')))
     },
 
     async handleCloneLayout ({ ref = false }) {
       this.processing = true
       this.processingLayout = true
+      this.processingClone = true
 
       const layout = {
         ...this.layout.clone(),
@@ -894,6 +913,7 @@ export default {
       }).finally(() => {
         this.processing = false
         this.processingLayout = false
+        this.processingClone = false
       }).catch(this.toastErrorHandler(this.$t('notification:page.page-layout.clone.failed')))
     },
 
@@ -1056,6 +1076,9 @@ export default {
     setDefaultValues () {
       this.title = ''
       this.processing = false
+      this.processingSaveAndClose = false
+      this.processingSave = false
+      this.processingClone = false
       this.processingLayout = false
       this.page = undefined
       this.layout = undefined
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index b53f7ba0ac..9faae58c34 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -822,6 +822,9 @@
         :hide-save="hideSave"
         :disable-save="disableSave"
         :processing="processing"
+        :processing-save="processingSave"
+        :processing-save-and-close="processingSaveAndClose"
+        :processing-clone="processingClone"
         @clone="handleClone()"
         @delete="handleDeletePage()"
         @save="handleSave()"
@@ -903,6 +906,9 @@ export default {
   data () {
     return {
       processing: false,
+      processingSave: false,
+      processingSaveAndClose: false,
+      processingClone: false,
 
       page: new compose.Page(),
       initialPageState: new compose.Page(),
@@ -1191,6 +1197,12 @@ export default {
     handleSave ({ closeOnSuccess = false } = {}) {
       this.processing = true
 
+      if (closeOnSuccess) {
+        this.processingSaveAndClose = true
+      } else {
+        this.processingSave = true
+      }
+
       /**
        * Pass a special tag alongside payload that
        * instructs store layer to add content-language header to the API request
@@ -1216,6 +1228,12 @@ export default {
           }
         }).finally(() => {
           this.processing = false
+
+          if (closeOnSuccess) {
+            this.processingSaveAndClose = false
+          } else {
+            this.processingSave = false
+          }
         }).catch(this.toastErrorHandler(this.$t('notification:page.saveFailed')))
     },
 
@@ -1310,6 +1328,9 @@ export default {
 
     setDefaultValues () {
       this.processing = false
+      this.processingSaveAndClose = false
+      this.processingSave = false
+      this.processingClone = false
       this.page = {}
       this.initialPageState = {}
       this.showIconModal = false
diff --git a/client/web/compose/src/views/Namespace/Edit.vue b/client/web/compose/src/views/Namespace/Edit.vue
index 8bc919133b..b41a9c5b28 100644
--- a/client/web/compose/src/views/Namespace/Edit.vue
+++ b/client/web/compose/src/views/Namespace/Edit.vue
@@ -275,6 +275,8 @@
 
     <editor-toolbar
       :processing="processing"
+      :processing-save="processingSave"
+      :processing-save-and-close="processingSaveAndClose"
       :hide-delete="hideDelete"
       :hide-clone="!isEdit"
       :hide-save="hideSave"
@@ -340,6 +342,8 @@ export default {
   data () {
     return {
       processing: false,
+      processingSave: false,
+      processingSaveAndClose: false,
 
       namespace: undefined,
       initialNamespaceState: undefined,
@@ -541,6 +545,12 @@ export default {
     async handleSave ({ closeOnSuccess = false } = {}) {
       this.processing = true
 
+      if (closeOnSuccess) {
+        this.processingSaveAndClose = true
+      } else {
+        this.processingSave = true
+      }
+
       /**
        * Pass a special tag alongside payload that
        * instructs store layer to add content-language header to the API request
@@ -582,6 +592,12 @@ export default {
         } catch (e) {
           this.toastErrorHandler(this.$t('notification:namespace.saveFailed'))(e)
           this.processing = false
+
+          if (closeOnSuccess) {
+            this.processingSaveAndClose = false
+          } else {
+            this.processingSave = false
+          }
           return
         }
       } else if (this.isClone) {
@@ -605,6 +621,12 @@ export default {
         } catch (e) {
           this.toastErrorHandler(this.$t('notification:namespace.createFailed'))(e)
           this.processing = false
+
+          if (closeOnSuccess) {
+            this.processingSaveAndClose = false
+          } else {
+            this.processingSave = false
+          }
           return
         }
       }
@@ -617,6 +639,12 @@ export default {
 
       this.processing = false
 
+      if (closeOnSuccess) {
+        this.processingSaveAndClose = false
+      } else {
+        this.processingSave = false
+      }
+
       if (closeOnSuccess) {
         this.$router.push(this.previousPage || { name: 'namespace.manage' })
       } else if (!this.isEdit || this.isClone) {
@@ -748,6 +776,8 @@ export default {
 
     setDefaultValues () {
       this.processing = false
+      this.processingSaveAndClose = false
+      this.processingSave = false
       this.namespace = undefined
       this.initialNamespaceState = undefined
       this.namespaceAssets = {}
diff --git a/client/web/privacy/src/components/Common/EditorToolbar.vue b/client/web/privacy/src/components/Common/EditorToolbar.vue
index 4b0a3a87d0..0c99fecb62 100644
--- a/client/web/privacy/src/components/Common/EditorToolbar.vue
+++ b/client/web/privacy/src/components/Common/EditorToolbar.vue
@@ -62,17 +62,16 @@
           </b-button>
         </template>
 
-        <b-button
+        <c-button-submit
           v-if="submitShow"
           :data-test-id="buttonLabelCypressId(submitLabel)"
           :disabled="submitDisabled || processing"
-          variant="primary"
+          :processing="processing"
+          :text="submitLabel"
           size="lg"
           class="ml-1"
-          @click="$emit('submit')"
-        >
-          {{ submitLabel }}
-        </b-button>
+          @submit="$emit('submit')"
+        />
 
         <slot />
       </b-col>
@@ -81,6 +80,7 @@
 </template>
 
 <script>
+
 export default {
   props: {
     processing: {
diff --git a/client/web/privacy/src/components/index.js b/client/web/privacy/src/components/index.js
index 7b256f2702..0f7e384cfc 100644
--- a/client/web/privacy/src/components/index.js
+++ b/client/web/privacy/src/components/index.js
@@ -18,3 +18,4 @@ Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.component('font-awesome-layers', FontAwesomeLayers)
 Vue.component('c-permissions-button', components.CPermissionsButton)
 Vue.component('c-input-confirm', components.CInputConfirm)
+Vue.component('c-button-submit', components.CButtonSubmit)
diff --git a/client/web/reporter/src/components/EditorToolbar.vue b/client/web/reporter/src/components/EditorToolbar.vue
index 57bbd774e7..5476454fb0 100644
--- a/client/web/reporter/src/components/EditorToolbar.vue
+++ b/client/web/reporter/src/components/EditorToolbar.vue
@@ -45,19 +45,20 @@
         >
           {{ $t('general:label.delete') }}
         </c-input-confirm>
-        <b-button
-          variant="primary"
+
+        <c-button-submit
           data-test-id="button-save"
-          size="lg"
           :disabled="saveDisabled || processing"
-          @click="$emit('save')"
-        >
-          {{ $t('general:label.save') }}
-        </b-button>
+          :processing="processingSave"
+          :text="$t('general:label.save')"
+          size="lg"
+          @submit="$emit('save')"
+        />
       </b-col>
     </b-row>
   </b-container>
 </template>
+
 <script>
 
 export default {
@@ -67,27 +68,37 @@ export default {
       required: false,
       default: () => ({ name: 'root' }),
     },
+
     hideDelete: {
       type: Boolean,
       required: false,
     },
+
     deleteDisabled: {
       type: Boolean,
       required: false,
     },
+
     hideSave: {
       type: Boolean,
       required: false,
     },
+
     saveDisabled: {
       type: Boolean,
       required: false,
       default: false,
     },
+
     processing: {
       type: Boolean,
       required: false,
     },
+
+    processingSave: {
+      type: Boolean,
+      required: false,
+    },
   },
 }
 </script>
diff --git a/client/web/reporter/src/components/index.js b/client/web/reporter/src/components/index.js
index 38ee1b8fa5..a356083eb7 100644
--- a/client/web/reporter/src/components/index.js
+++ b/client/web/reporter/src/components/index.js
@@ -50,3 +50,4 @@ Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.component('font-awesome-layers', FontAwesomeLayers)
 Vue.component('c-permissions-button', components.CPermissionsButton)
 Vue.component('c-input-confirm', components.CInputConfirm)
+Vue.component('c-button-submit', components.CButtonSubmit)
diff --git a/client/web/reporter/src/mixins/report.js b/client/web/reporter/src/mixins/report.js
index ed1349e326..18eb281807 100644
--- a/client/web/reporter/src/mixins/report.js
+++ b/client/web/reporter/src/mixins/report.js
@@ -4,6 +4,7 @@ export default {
   data () {
     return {
       processing: false,
+      processingSave: false,
       report: undefined,
     }
   },
@@ -25,6 +26,7 @@ export default {
 
     async handleSave () {
       this.processing = true
+      this.processingSave = true
 
       const { blocks } = this.report
 
@@ -53,6 +55,7 @@ export default {
           .catch(this.toastErrorHandler(this.$t('notification:report.createFailed')))
           .finally(() => {
             this.processing = false
+            this.processingSave = false
           })
       } else {
         return this.$SystemAPI.reportUpdate(report)
@@ -65,6 +68,7 @@ export default {
           .catch(this.toastErrorHandler(this.$t('notification:report.updateFailed')))
           .finally(() => {
             this.processing = false
+            this.processingSave = false
           })
       }
     },
diff --git a/client/web/reporter/src/views/Layout.vue b/client/web/reporter/src/views/Layout.vue
index 09cddec616..2f6077ba87 100644
--- a/client/web/reporter/src/views/Layout.vue
+++ b/client/web/reporter/src/views/Layout.vue
@@ -131,7 +131,7 @@ export default {
       disabledRoutes: [
         'report.list',
         'report.create',
-        'report.edit'
+        'report.edit',
       ],
     }
   },
diff --git a/client/web/reporter/src/views/Report/Builder.vue b/client/web/reporter/src/views/Report/Builder.vue
index 4cf5d8658e..be745a7ad0 100644
--- a/client/web/reporter/src/views/Report/Builder.vue
+++ b/client/web/reporter/src/views/Report/Builder.vue
@@ -247,16 +247,13 @@
     <b-modal
       v-model="datasources.showConfigurator"
       :title="$t('builder:datasources.label')"
-      :ok-title="$t('general:label.saveAndClose')"
-      ok-variant="primary"
-      :ok-disabled="datasourceSaveDisabled"
       cancel-variant="link"
       :cancel-disabled="datasources.processing"
       scrollable
       size="xl"
       body-class="py-3"
       no-fade
-      @ok="saveDatasources"
+      @hide="hideDatasourceConfigurator"
     >
       <configurator
         v-if="report"
@@ -286,6 +283,16 @@
           />
         </template>
       </configurator>
+
+      <template #modal-footer>
+        <c-button-submit
+          data-test-id="button-save"
+          :disabled="datasourceSaveDisabled"
+          :processing="datasources.processing"
+          :text="$t('general:label.saveAndClose')"
+          @submit="saveDatasources"
+        />
+      </template>
     </b-modal>
 
     <b-modal
@@ -363,6 +370,7 @@
         :delete-disabled="!canDelete"
         :save-disabled="!canUpdate"
         :processing="processing"
+        :processing-save="processingSave"
         @delete="handleDelete"
         @save="handleReportSave"
       >
@@ -421,6 +429,8 @@ export default {
   data () {
     return {
       processing: false,
+      processingSave: false,
+
       showReport: true,
 
       report: undefined,
@@ -807,9 +817,8 @@ export default {
       this.datasources.showConfigurator = true
     },
 
-    saveDatasources (hideEvent) {
+    saveDatasources () {
       // Prevent closing of modal and manually close it when request is complete
-      hideEvent.preventDefault()
       this.datasources.processing = true
 
       const sources = this.datasources.tempItems
@@ -822,7 +831,7 @@ export default {
         report.scenarios = this.report.scenarios
         this.report = new system.Report(report)
         this.refreshReport()
-        this.datasources.showConfigurator = false
+        this.hideDatasourceConfigurator()
         this.toastSuccess(this.$t('notification:report.datasources.updated'))
       }).catch(this.toastErrorHandler(this.$t('notification:report.datasources.updateFailed')))
         .finally(() => {
@@ -832,6 +841,8 @@ export default {
 
     // Blocks
     handleReportSave () {
+      this.processingSave = true
+
       this.report.blocks = this.reportBlocks.map(({ moved, x, y, w, h, i, ...p }) => {
         return { ...p, key: `${i}`, xywh: [x, y, w, h] }
       })
@@ -842,6 +853,9 @@ export default {
           this.refreshReport()
           this.unsavedBlocks.clear()
         })
+        .finally(() => {
+          this.processingSave = false
+        })
     },
 
     mapBlocks () {
diff --git a/client/web/reporter/src/views/Report/Edit.vue b/client/web/reporter/src/views/Report/Edit.vue
index f7a3303c88..a3e8065a31 100644
--- a/client/web/reporter/src/views/Report/Edit.vue
+++ b/client/web/reporter/src/views/Report/Edit.vue
@@ -168,6 +168,7 @@
         :delete-disabled="!canDelete"
         :save-disabled="!canSave"
         :processing="processing"
+        :processing-save="processingSave"
         @delete="handleDelete"
         @save="handleSave"
       />
diff --git a/client/web/workflow/src/components/WorkflowEditor.vue b/client/web/workflow/src/components/WorkflowEditor.vue
index e97e670553..e3354392ac 100644
--- a/client/web/workflow/src/components/WorkflowEditor.vue
+++ b/client/web/workflow/src/components/WorkflowEditor.vue
@@ -196,26 +196,18 @@
         class="d-flex flex-column flex-shrink position-absolute fixed-bottom m-2"
         style="z-index: 1; width: 20vw;"
       >
-        <b-button
+        <c-button-submit
           v-if="changeDetected"
+          data-test-id="button-save-workflow"
           variant="dark"
-          :disabled="processingSave || !canUpdateWorkflow"
           block
+          :disabled="processing || !canUpdateWorkflow"
+          :processing="processingSave"
+          :text="$t('editor:detected-changes') + `${canUpdateWorkflow ? this.$t('editor:click-to-save') : ''}`"
+          :loading-text="$t('editor:saving')"
           class="rounded-0 py-2 px-3"
-          @click="saveWorkflow()"
-        >
-          <span
-            v-if="processingSave"
-            class="saving mx-2"
-          >
-            Saving
-          </span>
-          <span
-            v-else
-          >
-            {{ $t('editor:detected-changes') + `${canUpdateWorkflow ? this.$t('editor:click-to-save') : ''}` }}
-          </span>
-        </b-button>
+          @submit="saveWorkflow()"
+        />
       </div>
 
       <div
@@ -383,15 +375,14 @@
             {{ $t('editor:back') }}
           </b-button>
 
-          <b-button
-            variant="primary"
+          <c-button-submit
             data-test-id="button-save-workflow"
-            class="ml-auto"
             :disabled="canSave"
-            @click="saveWorkflow()"
-          >
-            {{ $t('editor:save') }}
-          </b-button>
+            :processing="processingSave"
+            :text="$t('editor:save')"
+            class="ml-auto"
+            @submit="saveWorkflow()"
+          />
         </div>
       </template>
     </b-modal>
diff --git a/client/web/workflow/src/components/index.js b/client/web/workflow/src/components/index.js
index 91b1e9c692..a1f0ec19e4 100644
--- a/client/web/workflow/src/components/index.js
+++ b/client/web/workflow/src/components/index.js
@@ -9,3 +9,4 @@ Vue.component('font-awesome-icon', FontAwesomeIcon)
 Vue.component('font-awesome-layers', FontAwesomeLayers)
 Vue.component('c-permissions-button', components.CPermissionsButton)
 Vue.component('c-input-confirm', components.CInputConfirm)
+Vue.component('c-button-submit', components.CButtonSubmit)
diff --git a/lib/vue/src/components/index.ts b/lib/vue/src/components/index.ts
index 55f757687d..6e5f3c2f82 100644
--- a/lib/vue/src/components/index.ts
+++ b/lib/vue/src/components/index.ts
@@ -19,6 +19,7 @@ export {
   CInputCheckbox,
   CInputColorPicker,
   CAceEditor,
+  CButtonSubmit,
 } from './input'
 
 export {
diff --git a/lib/vue/src/components/input/button/CButtonSubmit.vue b/lib/vue/src/components/input/button/CButtonSubmit.vue
new file mode 100644
index 0000000000..b278cda8f2
--- /dev/null
+++ b/lib/vue/src/components/input/button/CButtonSubmit.vue
@@ -0,0 +1,115 @@
+<template>
+  <b-button
+    data-test-id="button-submit"
+    type="submit"
+    :variant="variant"
+    :disabled="disabled || processing || success"
+    :size="size"
+    :block="block"
+    :title="title"
+    :class="buttonClass"
+    @click.prevent="$emit('submit')"
+  >
+    <template v-if="processing">
+      <span
+        v-if="loadingText"
+        data-test-id="button-loading-text"
+        class="loading-text mx-2"
+      >
+        {{ loadingText }}
+      </span>
+      <b-spinner
+        v-else
+        data-test-id="spinner"
+        class="align-middle"
+        small
+      />
+    </template>
+    <template v-else-if="success">
+      <font-awesome-icon
+        data-test-id="icon-success"
+        :icon="['fas', 'check']"
+        :class="iconVariant"
+        class="text-white"
+      />
+    </template>
+    <template v-else>
+      <span
+        data-test-id="button-text"
+      >
+        {{ text }}
+      </span>
+    </template>
+  </b-button>
+</template>
+
+<script>
+export default {
+  name: 'CButtonSubmit',
+
+  i18nOptions: {
+    namespaces: 'admin',
+  },
+
+  props: {
+    processing: {
+      type: Boolean,
+    },
+
+    success: {
+      type: Boolean,
+    },
+
+    disabled: {
+      type: Boolean,
+    },
+
+    title: {
+      type: String,
+      default: '',
+    },
+
+    buttonClass: {
+      type: String,
+      default: '',
+    },
+
+    text: {
+      type: String,
+      default: '',
+    },
+
+    loadingText: {
+      type: String,
+      default: '',
+    },
+
+    size: {
+      type: String,
+      default: 'md',
+    },
+
+    block: {
+      type: Boolean,
+    },
+
+    variant: {
+      type: String,
+      default: 'primary',
+    },
+
+    iconVariant: {
+      type: String,
+      default: 'text-white',
+    },
+  },
+}
+</script>
+
+<style scoped>
+.loading-text::after {
+  display: inline-block;
+  animation: saving steps(1, end) 1s infinite;
+  content: '';
+}
+</style>
diff --git a/lib/vue/src/components/input/button/index.ts b/lib/vue/src/components/input/button/index.ts
new file mode 100644
index 0000000000..d03f49a83a
--- /dev/null
+++ b/lib/vue/src/components/input/button/index.ts
@@ -0,0 +1 @@
+export { default as CButtonSubmit } from './CButtonSubmit.vue'
diff --git a/lib/vue/src/components/input/index.ts b/lib/vue/src/components/input/index.ts
index 2de29dfbf3..b7b65055b8 100644
--- a/lib/vue/src/components/input/index.ts
+++ b/lib/vue/src/components/input/index.ts
@@ -8,3 +8,6 @@ export { default as CRichTextInput } from './CRichTextInput/index.vue'
 export { default as CInputCheckbox } from './CInputCheckbox.vue'
 export { default as CInputColorPicker } from './CInputColorPicker.vue'
 export { default as CAceEditor } from './CAceEditor.vue'
+export {
+  CButtonSubmit
+} from './button'
\ No newline at end of file
diff --git a/lib/vue/src/components/permissions/CPermissionsModal.vue b/lib/vue/src/components/permissions/CPermissionsModal.vue
index 319f74ef27..fc80c48375 100644
--- a/lib/vue/src/components/permissions/CPermissionsModal.vue
+++ b/lib/vue/src/components/permissions/CPermissionsModal.vue
@@ -7,15 +7,10 @@
       :title="translatedTitle"
       lazy
       scrollable
-      :ok-disabled="submitDisabled"
-      :ok-title="labels.save"
-      :cancel-title="labels.cancel"
-      cancel-variant="light"
       no-fade
       body-class="d-flex flex-column p-0"
       class="h-100 overflow-hidden"
       @hide="onHide"
-      @ok="onSubmit"
     >
       <b-row
         no-gutters
@@ -165,6 +160,24 @@
           class="d-none d-lg-block pt-4 border-left"
         />
       </b-row>
+
+      <template #modal-footer>
+        <b-button
+          data-test-id="button-cancel"
+          variant="light"
+          @click="onHide"
+        >
+          {{ labels.cancel }}
+        </b-button>
+
+        <c-button-submit
+          data-test-id="button-save"
+          :disabled="submitDisabled"
+          :processing="processing"
+          :button-text="labels.save"
+          @submit="onSubmit"
+        />
+      </template>
     </b-modal>
 
     <b-modal
@@ -219,6 +232,24 @@
           @search="searchUsers"
         />
       </b-form-group>
+      <template #modal-footer>
+        <b-button
+          data-test-id="button-cancel"
+          variant="light"
+          @click="onHide"
+        >
+          {{ labels.cancel }}
+        </b-button>
+
+        <c-button-submit
+          v-if="false"
+          data-test-id="button-save"
+          :disabled="submitDisabled"
+          :processing="processing"
+          :button-text="labels.save"
+          @submit="onSubmit"
+        />
+      </template>
     </b-modal>
   </div>
 </template>
@@ -399,6 +430,7 @@ export default {
         this.fetchRules(roleID)
       }).finally(() => {
         this.processing = false
+        this.onHide()
       })
     },
 
diff --git a/locale/en/corteza-webapp-workflow/editor.yaml b/locale/en/corteza-webapp-workflow/editor.yaml
index 47c4fa6384..1d9b8c20a9 100644
--- a/locale/en/corteza-webapp-workflow/editor.yaml
+++ b/locale/en/corteza-webapp-workflow/editor.yaml
@@ -24,6 +24,7 @@ reset: Reset
 'required-namespace': Namespace required
 'required-namespace-and-module': Namespace and Module required
 save: Save
+saving: Saving
 spinning: Spinning
 'test-in-progress': "Testing in progress. If your workflow includes Prompt or Delay steps, it may be waiting for them to complete"
 'unsupported-browser': Browser is not supported!