From ae1874bec13d32c0975a62da397609cd5ddf7669 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C5=BEe=20Fortun?= <joze.fortun@gmail.com>
Date: Thu, 2 Nov 2023 16:59:00 +0100
Subject: [PATCH] Adjust styles to fit corteza studio usage

---
 .../src/components/Apigw/CFiltersDropdown.vue |  10 +-
 .../src/components/Apigw/CFiltersStepper.vue  |  80 ++---
 .../src/components/Apigw/CRouteEditorInfo.vue |  34 +-
 .../admin/src/components/Apigw/CRouteList.vue |  28 +-
 .../src/components/Apigw/CSettingsEditor.vue  |   3 +-
 .../Apigw/Profiler/CProfilerHitInfo.vue       | 318 ++++++++++--------
 .../Apigw/Profiler/CProfilerRouteHits.vue     |   6 +-
 .../Application/CApplicationEditorInfo.vue    |  22 +-
 .../Application/CApplicationEditorUnify.vue   | 165 ++++-----
 .../Authclient/CAuthclientEditorInfo.vue      | 159 ++++-----
 .../admin/src/components/CContentHeader.vue   |   2 +-
 .../components/CResourceListStatusFilter.vue  |   6 +-
 .../admin/src/components/CSubmitButton.c3.js  |  41 ---
 .../admin/src/components/CSubmitButton.vue    |  83 -----
 .../admin/src/components/CSystemFields.vue    |   6 +-
 .../src/components/CUploaderWithPreview.vue   |   4 +-
 .../src/components/ConfirmationToggle.vue     |   8 +-
 .../Connection/CExternalConnectionList.vue    |   7 +-
 .../Federation/CFederationEditorInfo.vue      |  34 +-
 .../Permissions/CPermissionList.vue           |   5 +-
 .../components/Queues/CQueueEditorInfo.vue    |  22 +-
 .../src/components/Role/CRoleEditorInfo.vue   |  83 +++--
 .../components/Role/CRoleEditorMembers.vue    |   3 +-
 .../CSensitivityLevelEditorInfo.vue           |  22 +-
 .../components/Session/CSessionEditorInfo.vue |  18 +-
 .../Settings/Compose/CComposeEditorBasic.vue  |  23 +-
 .../Settings/Compose/CComposeEditorUI.vue     |   5 +-
 .../Settings/Email/CSystemEmailServer.vue     |   4 +-
 .../Settings/System/CSystemEditorAuth.vue     |  40 ++-
 .../System/CSystemEditorAuthBgScreen.vue      |  81 +++--
 .../Settings/System/CSystemEditorExternal.vue |  17 +-
 .../Settings/UI/CUIBrandingEditor.vue         |  13 +-
 .../components/Settings/UI/CUICustomCSS.vue   |   6 +-
 .../components/Settings/UI/CUILogoEditor.vue  |  57 ++--
 .../Settings/UI/CUITopbarSettings.vue         |   5 +-
 .../Template/CTemplateEditorContent/Index.vue |  46 ++-
 .../Template/CTemplateEditorInfo.vue          |  22 +-
 .../src/components/User/CUserEditorAvatar.vue |  73 ++--
 .../src/components/User/CUserEditorInfo.vue   |  20 +-
 .../src/components/User/CUserEditorMFA.vue    |  34 +-
 .../components/User/CUserEditorPassword.vue   |  22 +-
 .../src/components/User/CUserEditorRoles.vue  |   5 +-
 .../User/CUserExportModal/index.vue           |   4 +-
 .../User/CUserImportModal/index.vue           |   4 +-
 .../Workflow/CWorkflowEditorInfo.vue          |  50 ++-
 .../Workflow/CWorkflowEditorTriggers.vue      |   3 +-
 .../admin/src/themes/corteza-base/custom.scss |  14 +-
 .../admin/src/themes/corteza-base/rtl.scss    |   5 -
 .../src/views/Automation/Scripts/Index.vue    |  13 +-
 .../src/views/Automation/Session/List.vue     |  85 +++--
 .../src/views/Automation/Workflow/Editor.vue  |   1 -
 .../src/views/Automation/Workflow/List.vue    |  56 ++-
 .../admin/src/views/Federation/Nodes/List.vue |  41 +--
 .../src/views/System/Actionlog/Index.vue      |  28 +-
 .../admin/src/views/System/Apigw/Editor.vue   |   1 -
 .../admin/src/views/System/Apigw/Index.vue    |   4 +-
 .../src/views/System/Apigw/Profiler/Index.vue |  10 +-
 .../src/views/System/Application/Editor.vue   |   1 -
 .../src/views/System/Application/List.vue     |  58 ++--
 .../src/views/System/AuthClient/Editor.vue    |   1 -
 .../src/views/System/AuthClient/List.vue      |  46 ++-
 .../src/views/System/Connection/Editor.vue    |  16 +-
 .../web/admin/src/views/System/Queue/List.vue |  42 +--
 .../admin/src/views/System/Role/Editor.vue    |   1 -
 .../web/admin/src/views/System/Role/List.vue  |  78 ++---
 .../views/System/SensitivityLevel/List.vue    |  30 +-
 .../src/views/System/Template/Editor.vue      |   1 -
 .../admin/src/views/System/Template/List.vue  |  76 ++---
 .../admin/src/views/System/User/Editor.vue    |   1 -
 .../web/admin/src/views/System/User/List.vue  |  93 +++--
 client/web/admin/src/views/UI/Index.vue       |   1 -
 .../src/components/Admin/EditorToolbar.vue    |   1 -
 .../compose/src/components/Admin/Import.vue   |   4 +-
 .../Admin/Module/FieldBoolTranslator.vue      |   1 -
 .../components/Admin/Module/FieldRowEdit.vue  |   1 -
 .../Admin/Module/FieldSelectTranslator.vue    |   1 -
 .../Admin/Module/FieldTranslator.vue          |   1 -
 .../Admin/Module/Records/ColumnPicker.vue     |   4 +-
 .../components/Admin/Module/RelatedPages.vue  |   6 +-
 .../components/Admin/Module/UniqueValues.vue  |   2 +-
 .../components/Chart/Report/GaugeChart.vue    |   1 -
 .../components/Chart/Report/GenericChart.vue  |   2 -
 .../components/Chart/Report/RadarChart.vue    |   1 -
 .../compose/src/components/Common/Grid.vue    |   9 -
 .../ModuleFields/Configurator/Bool.vue        |   2 -
 .../ModuleFields/Configurator/Select.vue      |   1 -
 .../ModuleFields/Configurator/basic.vue       |   4 -
 .../ModuleFields/Configurator/validation.vue  |   1 -
 .../components/Namespaces/Importer/index.vue  |   3 +-
 .../Namespaces/NamespaceSidebar.vue           |   1 +
 .../components/PageBlocks/Configurator.vue    |   2 -
 .../components/PageBlocks/RecordListBase.vue  | 218 ++++++------
 .../src/components/PageBlocks/TabsBase.vue    |  21 +-
 .../src/components/PageBlocks/Wrap/Card.vue   |   6 +-
 .../src/components/PageBlocks/Wrap/Plain.vue  |   2 +-
 .../Public/Record/Exporter/index.vue          |   3 +-
 .../Public/Record/Importer/index.vue          |   3 +-
 .../src/themes/corteza-base/custom.scss       |   8 -
 .../compose/src/themes/corteza-base/rtl.scss  |   5 -
 .../compose/src/views/Admin/Charts/Edit.vue   |   2 +
 .../compose/src/views/Admin/Charts/List.vue   |   1 -
 .../compose/src/views/Admin/Modules/Edit.vue  | 195 +++++------
 .../compose/src/views/Admin/Modules/List.vue  |   7 +-
 .../compose/src/views/Admin/Pages/Builder.vue |   4 +-
 .../compose/src/views/Admin/Pages/Edit.vue    |   2 -
 .../web/compose/src/views/Namespace/Edit.vue  |   4 -
 .../web/compose/src/views/Namespace/List.vue  |   2 +-
 .../compose/src/views/Namespace/Manage.vue    |   5 +-
 .../compose/src/views/Public/Pages/View.vue   |   2 +-
 .../web/discovery/src/components/Search.vue   |   2 +-
 .../src/themes/corteza-base/custom.scss       |   8 -
 .../web/one/src/themes/corteza-base/rtl.scss  |   5 -
 .../src/themes/corteza-base/custom.scss       |   8 -
 .../src/views/Privacy/Request/List.vue        |   1 -
 .../reporter/src/components/EditorToolbar.vue |   1 -
 .../src/themes/corteza-base/custom.scss       |   8 -
 .../web/reporter/src/views/Report/Builder.vue |   2 +-
 client/web/reporter/src/views/Report/Edit.vue |   1 -
 client/web/reporter/src/views/Report/List.vue |  36 +-
 client/web/workflow/src/components/Import.vue |   3 +-
 .../src/components/WorkflowEditor.vue         |   1 -
 .../src/themes/corteza-base/custom.scss       |   8 -
 .../web/workflow/src/views/Workflow/List.vue  |  55 ++-
 .../corredor/CCorredorManualButtons.vue       |  10 +-
 .../components/input/CInputColorPicker.vue    |   6 +-
 .../src/components/input/CInputConfirm.vue    |  12 +-
 lib/vue/src/components/input/CInputSearch.vue |   5 +-
 .../src/components/navigation/CSidebar.vue    |   6 +-
 lib/vue/src/components/navigation/CTopbar.vue |   2 +-
 .../permissions/CPermissionsButton.vue        |   2 +-
 .../components/reminders/CReminderSidebar.vue |   2 +-
 .../components/resourceList/CResourceList.vue | 143 ++++----
 lib/vue/src/components/toolbar/CToolbar.vue   |   2 +-
 .../automation.workflows.yaml                 |   4 +-
 .../federation.nodes.yaml                     |   4 +-
 .../en/corteza-webapp-admin/system.apigw.yaml |   4 +-
 .../system.applications.yaml                  |   4 +-
 .../system.authclients.yaml                   |   4 +-
 .../system.connections.yaml                   |   4 +-
 .../corteza-webapp-admin/system.queues.yaml   |   4 +-
 .../en/corteza-webapp-admin/system.roles.yaml |   4 +-
 .../system.sensitivityLevel.yaml              |   4 +-
 .../corteza-webapp-admin/system.settings.yaml |   4 +-
 .../system.templates.yaml                     |   4 +-
 .../en/corteza-webapp-admin/system.users.yaml |   4 +-
 .../en/corteza-webapp-admin/ui.settings.yaml  |   8 +-
 .../en/corteza-webapp-compose/namespace.yaml  |   4 +-
 147 files changed, 1542 insertions(+), 1791 deletions(-)
 delete mode 100644 client/web/admin/src/components/CSubmitButton.c3.js
 delete mode 100644 client/web/admin/src/components/CSubmitButton.vue

diff --git a/client/web/admin/src/components/Apigw/CFiltersDropdown.vue b/client/web/admin/src/components/Apigw/CFiltersDropdown.vue
index dce778d68..dbb0eab51 100644
--- a/client/web/admin/src/components/Apigw/CFiltersDropdown.vue
+++ b/client/web/admin/src/components/Apigw/CFiltersDropdown.vue
@@ -2,8 +2,8 @@
   <b-dropdown
     data-test-id="dropdown-add-filter"
     :text="$t('filters.addFilter')"
-    class="min-content"
-    variant="primary"
+    variant="light"
+    class="d-inline-flex min-content"
   >
     <template v-if="filterList.length">
       <b-dropdown-item
@@ -71,9 +71,3 @@ export default {
   },
 }
 </script>
-
-<style scoped>
-.min-content{
-  max-width: min-content;
-}
-</style>
diff --git a/client/web/admin/src/components/Apigw/CFiltersStepper.vue b/client/web/admin/src/components/Apigw/CFiltersStepper.vue
index a89c3fd82..40c1d38a1 100644
--- a/client/web/admin/src/components/Apigw/CFiltersStepper.vue
+++ b/client/web/admin/src/components/Apigw/CFiltersStepper.vue
@@ -4,26 +4,25 @@
     header-bg-variant="white"
     footer-bg-variant="white"
     body-class="p-0"
-    class="apigw shadow-sm mt-3"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm mt-3"
   >
-    <c-filter-modal
-      :visible="!!selectedFilter"
-      :filter="selectedFilter"
-      @submit="onSubmit"
-      @reset="onReset"
-    />
+    <template #header>
+      <h3 class="m-0">
+        {{ $t('filters.title') }}
+      </h3>
+    </template>
 
     <b-tabs
       data-test-id="filter-steps"
-      active-nav-item-class="active-tab bg-white"
-      class="border-0"
-      content-class="border-bottom"
+      nav-wrapper-class="bg-white white border-bottom rounded-0"
+      card
     >
       <b-tab
         v-for="(step, index) in steps"
         :key="index"
         :button-id="steps[index]"
-        class="border-0"
+        class="border-0 p-0"
         :title="$t(`filters.step_title.${step}`)"
         @click="onActivateTab(index)"
       >
@@ -38,32 +37,32 @@
       </b-tab>
     </b-tabs>
 
-    <template #header>
-      <h3 class="m-0">
-        {{ $t('filters.title') }}
-      </h3>
+    <template #footer>
+      <c-filters-dropdown
+        :available-filters="getAvailableFiltersByStep"
+        :filters="getSelectedFiltersByStep"
+        @addFilter="onAddFilter"
+      />
+
+      <c-button-submit
+        :disabled="disabled"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="$emit('submit')"
+      />
     </template>
 
-    <template #footer>
-      <div
-        class="d-flex justify-content-between"
-      >
-        <c-filters-dropdown
-          :available-filters="getAvailableFiltersByStep"
-          :filters="getSelectedFiltersByStep"
-          @addFilter="onAddFilter"
-        />
-        <c-button-submit
-          :disabled="disabled"
-          :processing="processing"
-          :success="success"
-          :text="$t('admin:general.label.submit')"
-          @submit="$emit('submit')"
-        />
-      </div>
-    </template>
+    <c-filter-modal
+      :visible="!!selectedFilter"
+      :filter="selectedFilter"
+      @submit="onSubmit"
+      @reset="onReset"
+    />
   </b-card>
 </template>
+
 <script>
 import CFilterModal from 'corteza-webapp-admin/src/components/Apigw/CFilterModal'
 import CFiltersTable from 'corteza-webapp-admin/src/components/Apigw/CFiltersTable'
@@ -207,18 +206,3 @@ export default {
   },
 }
 </script>
-<style lang="scss" >
-
-.apigw {
-  .nav-link {
-    color: var(--primary);
-    border-width: 0 0 3px 0 !important;
-    border-color: transparent !important;
-  }
-
-  .active-tab {
-    color: var(--primary) !important;
-    border-color: var(--primary) !important;
-  }
-}
-</style>
diff --git a/client/web/admin/src/components/Apigw/CRouteEditorInfo.vue b/client/web/admin/src/components/Apigw/CRouteEditorInfo.vue
index ec6a6c7d9..d62f815b0 100644
--- a/client/web/admin/src/components/Apigw/CRouteEditorInfo.vue
+++ b/client/web/admin/src/components/Apigw/CRouteEditorInfo.vue
@@ -1,11 +1,17 @@
 <template>
   <b-card
-    class="shadow-sm"
     data-test-id="card-route-edit"
     header-bg-variant="white"
     footer-bg-variant="white"
-    footer-class="d-flex flex-wrap gap-1"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
+    <template #header>
+      <h3 class="m-0">
+        {{ $t('title') }}
+      </h3>
+    </template>
+
     <b-form
       @submit.prevent="$emit('submit', route)"
     >
@@ -109,22 +115,7 @@
       />
     </b-form>
 
-    <template #header>
-      <h3 class="m-0">
-        {{ $t('title') }}
-      </h3>
-    </template>
-
     <template #footer>
-      <c-button-submit
-        :disabled="saveDisabled"
-        :processing="processing"
-        :success="success"
-        :text="$t('admin:general.label.submit')"
-        class="float-right"
-        @submit="$emit('submit', route)"
-      />
-
       <confirmation-toggle
         v-if="route && route.routeID && route.canDeleteApigwRoute"
         :data-test-id="deletedButtonStatusCypressId"
@@ -132,6 +123,15 @@
       >
         {{ getDeleteStatus }}
       </confirmation-toggle>
+
+      <c-button-submit
+        :disabled="saveDisabled"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="$emit('submit', route)"
+      />
     </template>
   </b-card>
 </template>
diff --git a/client/web/admin/src/components/Apigw/CRouteList.vue b/client/web/admin/src/components/Apigw/CRouteList.vue
index 5d5f99096..a059c54e0 100644
--- a/client/web/admin/src/components/Apigw/CRouteList.vue
+++ b/client/web/admin/src/components/Apigw/CRouteList.vue
@@ -8,7 +8,7 @@
     <template
       #header
     >
-      <h3 class="m-0">
+      <h3 class="mb-0">
         {{ $t('title') }}
       </h3>
     </template>
@@ -34,8 +34,9 @@
         resourcePlural: $t('general:label.route.plural')
 
       }"
-      class="h-100"
       clickable
+      card-header-class="rounded-0"
+      class="h-100 bg-transparent"
       @search="filterList"
       @row-clicked="handleRowClicked"
     >
@@ -44,6 +45,7 @@
           v-if="canCreate"
           data-test-id="button-add"
           variant="primary"
+          size="lg"
           :to="{ name: 'system.apigw.new' }"
         >
           {{ $t('new') }}
@@ -52,8 +54,8 @@
         <b-button
           v-if="$Settings.get('apigw.profiler.enabled', false)"
           data-test-id="button-profiler"
-          class="ml-1"
           variant="info"
+          size="lg"
           :to="{ name: 'system.apigw.profiler' }"
         >
           {{ $t('profiler') }}
@@ -63,13 +65,12 @@
           v-if="canGrant"
           data-test-id="button-permissions"
           resource="corteza::system:apigw-route/*"
-          button-variant="light"
-          class="ml-1 text-dark d-print-none"
-        >
-          <font-awesome-icon :icon="['fas', 'lock']" />
-          {{ $t('permissions') }}
-        </c-permissions-button>
+          :button-label="$t('permissions')"
+          size="lg"
+        />
+      </template>
 
+      <template #toolbar>
         <c-resource-list-status-filter
           v-model="filter.deleted"
           data-test-id="filter-deleted-routes"
@@ -77,7 +78,6 @@
           :excluded-label="$t('filterForm.excluded.label')"
           :inclusive-label="$t('filterForm.inclusive.label')"
           :exclusive-label="$t('filterForm.exclusive.label')"
-          class="mt-3"
           @change="filterList"
         />
       </template>
@@ -233,3 +233,11 @@ export default {
   },
 }
 </script>
+
+<style lang="scss">
+.route-list {
+  .card-header {
+    border-radius: 0;
+  }
+}
+</style>
diff --git a/client/web/admin/src/components/Apigw/CSettingsEditor.vue b/client/web/admin/src/components/Apigw/CSettingsEditor.vue
index b6fd402a3..dda97466f 100644
--- a/client/web/admin/src/components/Apigw/CSettingsEditor.vue
+++ b/client/web/admin/src/components/Apigw/CSettingsEditor.vue
@@ -1,8 +1,9 @@
 <template>
   <b-card
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <template #header>
       <h3 class="m-0">
diff --git a/client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue b/client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue
index 6cefac587..9cad819dd 100644
--- a/client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue
+++ b/client/web/admin/src/components/Apigw/Profiler/CProfilerHitInfo.vue
@@ -12,130 +12,173 @@
         </h3>
       </template>
 
-      <b-form-group
-        :label="$t('general.id')"
-        label-cols="2"
-        label-class="text-primary"
-      >
-        <b-form-input
-          v-model="hit.ID"
-          plaintext
-          disabled
-        />
-      </b-form-group>
-
-      <b-form-group
-        :label="$t('general.route')"
-        label-cols="2"
-        label-class="text-primary"
-      >
-        <b-form-input
-          v-model="request.route"
-          data-test-id="input-route"
-          plaintext
-          disabled
-        />
-      </b-form-group>
-
-      <b-form-group
-        :label="$t('general.URL')"
-        label-cols="2"
-        label-class="text-primary"
-      >
-        <b-form-input
-          v-model="request.url"
-          plaintext
-          disabled
-        />
-      </b-form-group>
-
-      <b-form-group
-        :label="$t('general.method')"
-        label-cols="2"
-        label-class="text-primary"
-      >
-        <b-form-input
-          v-model="request.method"
-          plaintext
-          disabled
-        />
-      </b-form-group>
-
-      <b-form-group
-        :label="$t('general.statusCode')"
-        label-cols="2"
-        label-class="text-primary"
-      >
-        <div
-          class="d-flex align-items-center h-100"
+      <b-row>
+        <b-col
+          cols="12"
+          lg="6"
         >
-          <h5 class="mb-0">
-            <b-badge :variant="getStatusCodeVariant(request.statusCode)">
-              {{ request.statusCode }}
-            </b-badge>
-          </h5>
-        </div>
-      </b-form-group>
+          <b-form-group
+            :label="$t('general.id')"
+            label-class="text-primary"
+          >
+            <b-form-input
+              v-model="hit.ID"
+              plaintext
+              disabled
+            />
+          </b-form-group>
+        </b-col>
 
-      <b-form-group
-        :label="$t('general.remoteAddress')"
-        label-cols="2"
-        label-class="text-primary"
-      >
-        <b-form-input
-          v-model="request.remoteAddress"
-          plaintext
-          disabled
-        />
-      </b-form-group>
-
-      <b-form-group
-        :label="$t('general.duration')"
-        label-cols="2"
-        label-class="text-primary"
-      >
-        <b-form-input
-          v-model="request.duration"
-          plaintext
-          disabled
-        />
-      </b-form-group>
-
-      <b-form-group
-        :label="$t('general.start')"
-        label-cols="2"
-        label-class="text-primary"
-      >
-        <b-form-input
-          v-model="request.start"
-          plaintext
-          disabled
-        />
-      </b-form-group>
-
-      <b-form-group
-        :label="$t('general.end')"
-        label-cols="2"
-        label-class="text-primary"
-      >
-        <b-form-input
-          v-model="request.end"
-          plaintext
-          disabled
-        />
-      </b-form-group>
-
-      <b-form-group
-        v-if="showOpenRoute"
-        label-cols="2"
-      >
-        <b-button
-          variant="light"
-          :to="{ name: 'system.apigw.edit', params: { routeID: request.routeID } }"
+        <b-col
+          cols="12"
+          lg="6"
         >
-          {{ $t('general.openRoute') }}
-        </b-button>
-      </b-form-group>
+          <b-form-group
+            :label="$t('general.route')"
+            label-class="text-primary"
+          >
+            <b-form-input
+              v-model="request.route"
+              data-test-id="input-route"
+              plaintext
+              disabled
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('general.URL')"
+            label-class="text-primary"
+          >
+            <b-form-input
+              v-model="request.url"
+              plaintext
+              disabled
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('general.method')"
+            label-class="text-primary"
+          >
+            <b-form-input
+              v-model="request.method"
+              plaintext
+              disabled
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('general.statusCode')"
+            label-class="text-primary"
+          >
+            <div
+              class="d-flex align-items-center h-100"
+            >
+              <h5 class="mb-0">
+                <b-badge :variant="getStatusCodeVariant(request.statusCode)">
+                  {{ request.statusCode }}
+                </b-badge>
+              </h5>
+            </div>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('general.remoteAddress')"
+            label-class="text-primary"
+          >
+            <b-form-input
+              v-model="request.remoteAddress"
+              plaintext
+              disabled
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('general.duration')"
+            label-class="text-primary"
+          >
+            <b-form-input
+              v-model="request.duration"
+              plaintext
+              disabled
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('general.start')"
+            label-class="text-primary"
+          >
+            <b-form-input
+              v-model="request.start"
+              plaintext
+              disabled
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('general.end')"
+            label-class="text-primary"
+          >
+            <b-form-input
+              v-model="request.end"
+              plaintext
+              disabled
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            v-if="showOpenRoute"
+            label-cols="2"
+          >
+            <b-button
+              variant="light"
+              :to="{ name: 'system.apigw.edit', params: { routeID: request.routeID } }"
+            >
+              {{ $t('general.openRoute') }}
+            </b-button>
+          </b-form-group>
+        </b-col>
+      </b-row>
     </b-card>
 
     <b-card
@@ -149,22 +192,29 @@
         </h3>
       </template>
 
-      <b-form-group
-        v-for="header in request.headers"
-        :key="header.label"
-        :label="header.label"
-        label-cols="2"
-        label-class="text-primary"
-      >
-        <b-form-input
-          v-model="header.value"
-          plaintext
-          disabled
-        />
-      </b-form-group>
+      <b-row>
+        <b-col
+          v-for="header in request.headers"
+          :key="header.label"
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="header.label"
+            label-class="text-primary"
+          >
+            <b-form-input
+              v-model="header.value"
+              plaintext
+              disabled
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
     </b-card>
 
     <b-card
+      body-class="p-0"
       header-bg-variant="white"
       footer-bg-variant="white"
       class="shadow-sm mt-3"
diff --git a/client/web/admin/src/components/Apigw/Profiler/CProfilerRouteHits.vue b/client/web/admin/src/components/Apigw/Profiler/CProfilerRouteHits.vue
index ab2a2d579..3d8b5c619 100644
--- a/client/web/admin/src/components/Apigw/Profiler/CProfilerRouteHits.vue
+++ b/client/web/admin/src/components/Apigw/Profiler/CProfilerRouteHits.vue
@@ -12,10 +12,8 @@
         {{ $t('general:label.requests') }}
       </h3>
 
-      <div
-        class="d-flex align-items-center justify-content-between"
-      >
-        <div>
+      <div class="d-flex align-items-center flex-wrap flex-fill mt-2 gap-1">
+        <div class="flex-fill">
           <b-button
             data-test-id="button-refresh"
             variant="primary"
diff --git a/client/web/admin/src/components/Application/CApplicationEditorInfo.vue b/client/web/admin/src/components/Application/CApplicationEditorInfo.vue
index 9c8349dc6..7e4b170db 100644
--- a/client/web/admin/src/components/Application/CApplicationEditorInfo.vue
+++ b/client/web/admin/src/components/Application/CApplicationEditorInfo.vue
@@ -1,10 +1,10 @@
 <template>
   <b-card
-    class="shadow-sm"
     data-test-id="card-application-info"
     header-bg-variant="white"
     footer-bg-variant="white"
-    footer-class="d-flex flex-wrap gap-1"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <b-form
       @submit.prevent="$emit('submit', application)"
@@ -69,15 +69,6 @@
     </template>
 
     <template #footer>
-      <c-button-submit
-        :disabled="saveDisabled"
-        :processing="processing"
-        :success="success"
-        :text="$t('admin:general.label.submit')"
-        class="float-right"
-        @submit="$emit('submit', application)"
-      />
-
       <confirmation-toggle
         v-if="application && application.applicationID && application.canDeleteApplication"
         :data-test-id="deleteButtonStatusCypressId"
@@ -85,6 +76,15 @@
       >
         {{ getDeleteStatus }}
       </confirmation-toggle>
+
+      <c-button-submit
+        :disabled="saveDisabled"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="$emit('submit', application)"
+      />
     </template>
   </b-card>
 </template>
diff --git a/client/web/admin/src/components/Application/CApplicationEditorUnify.vue b/client/web/admin/src/components/Application/CApplicationEditorUnify.vue
index 45d37bc1d..16da5d3ff 100644
--- a/client/web/admin/src/components/Application/CApplicationEditorUnify.vue
+++ b/client/web/admin/src/components/Application/CApplicationEditorUnify.vue
@@ -1,9 +1,10 @@
 <template>
   <b-card
     data-test-id="card-application-selector"
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <b-form
       @submit.prevent="$emit('submit', unify)"
@@ -72,93 +73,81 @@
               @change="$emit('change-detected')"
             />
           </b-form-group>
+        </b-col>
 
-          <b-modal
-            id="logo"
-            hide-header
-            hide-footer
-            centered
-            body-class="p-1"
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            :label="$t('url.label')"
+            :description="$t('url.description')"
+            label-class="text-primary"
           >
-            <b-img
-              data-test-id="img-logo-preview"
-              :src="unify.logo"
-              fluid-grow
+            <b-form-input
+              v-model="unify.url"
+              data-test-id="input-url"
             />
-          </b-modal>
+          </b-form-group>
+        </b-col>
 
-          <b-col
-            cols="12"
-            lg="6"
-          >
-            <b-form-group
-              :label="$t('url.label')"
-              :description="$t('url.description')"
-              label-class="text-primary"
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-row>
+            <b-col
+              cols="12"
+              sm="6"
             >
-              <b-form-input
-                v-model="unify.url"
-                data-test-id="input-url"
-              />
-            </b-form-group>
-          </b-col>
-
-          <b-col
-            cols="12"
-            lg="6"
-          >
-            <b-row>
-              <b-col
-                cols="6"
+              <b-form-group
+                :label="$t('listed')"
+                label-class="text-primary"
               >
-                <b-form-group
-                  :label="$t('listed')"
-                  label-class="text-primary"
-                >
-                  <c-input-checkbox
-                    v-model="unify.listed"
-                    data-test-id="checkbox-listed"
-                    switch
-                    :labels="checkboxLabel"
-                  />
-                </b-form-group>
-              </b-col>
+                <c-input-checkbox
+                  v-model="unify.listed"
+                  data-test-id="checkbox-listed"
+                  switch
+                  :labels="checkboxLabel"
+                />
+              </b-form-group>
+            </b-col>
 
-              <b-col
-                cols="6"
-              >
-                <b-form-group
-                  :label="$t('pinned')"
-                  label-class="text-primary"
-                >
-                  <c-input-checkbox
-                    v-model="unify.pinned"
-                    data-test-id="checkbox-pinned"
-                    switch
-                    :labels="checkboxLabel"
-                    :disabled="!canPin"
-                  />
-                </b-form-group>
-              </b-col>
-            </b-row>
-          </b-col>
-
-          <b-col
-            cols="12"
-          >
-            <b-form-group
-              :label="$t('config.label')"
-              :description="$t('config.description')"
-              label-class="text-primary"
+            <b-col
+              cols="12"
+              sm="6"
             >
-              <b-form-textarea
-                v-model="unify.config"
-                data-test-id="textarea-config"
-                :state="configState"
-                rows="10"
-              />
-            </b-form-group>
-          </b-col>
+              <b-form-group
+                :label="$t('pinned')"
+                label-class="text-primary"
+              >
+                <c-input-checkbox
+                  v-model="unify.pinned"
+                  data-test-id="checkbox-pinned"
+                  switch
+                  :labels="checkboxLabel"
+                  :disabled="!canPin"
+                />
+              </b-form-group>
+            </b-col>
+          </b-row>
+        </b-col>
+
+        <b-col
+          cols="12"
+        >
+          <b-form-group
+            :label="$t('config.label')"
+            :description="$t('config.description')"
+            label-class="text-primary"
+          >
+            <b-form-textarea
+              v-model="unify.config"
+              data-test-id="textarea-config"
+              :state="configState"
+              rows="10"
+            />
+          </b-form-group>
         </b-col>
       </b-row>
     </b-form>
@@ -178,10 +167,24 @@
         :processing="processing"
         :success="success"
         :text="$t('admin:general.label.submit')"
-        class="float-right"
+        class="ml-auto"
         @submit="$emit('submit', { unify, unifyAssets })"
       />
     </template>
+
+    <b-modal
+      id="logo"
+      hide-header
+      hide-footer
+      centered
+      body-class="p-1"
+    >
+      <b-img
+        data-test-id="img-logo-preview"
+        :src="unify.logo"
+        fluid-grow
+      />
+    </b-modal>
   </b-card>
 </template>
 
diff --git a/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue b/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
index d00dd7d2c..27d3fb3fc 100644
--- a/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
+++ b/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
@@ -2,10 +2,10 @@
   <b-card
     v-if="resource"
     data-test-id="card-auth-client-info"
-    class="shadow-sm auth-clients"
     header-bg-variant="white"
     footer-bg-variant="white"
-    footer-class="d-flex flex-wrap gap-1"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm auth-clients"
   >
     <b-form
       @submit.prevent="submit"
@@ -59,9 +59,7 @@
           </b-form-group>
         </b-col>
 
-        <b-col
-          cols="12"
-        >
+        <b-col cols="12">
           <b-form-group
             :label="$t('redirectURI')"
             label-class="text-primary"
@@ -103,12 +101,8 @@
             </div>
           </b-form-group>
         </b-col>
-      </b-row>
 
-      <b-row>
-        <b-col
-          cols="6"
-        >
+        <b-col cols="12">
           <b-form-group
             v-if="!fresh"
             :label="$t('secret')"
@@ -151,7 +145,8 @@
         </b-col>
 
         <b-col
-          cols="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group
             label-class="text-primary"
@@ -166,53 +161,10 @@
             />
           </b-form-group>
         </b-col>
-      </b-row>
-
-      <b-row>
-        <b-col
-          cols="6"
-        >
-          <b-form-group
-            data-test-id="valid-from"
-            :label="$t('validFrom.label')"
-            :description="$t('validFrom.description')"
-          >
-            <c-input-date-time
-              v-model="resource.validFrom"
-              data-test-id="input-valid-from"
-              :labels="{
-                clear: $t('general:label.clear'),
-                none: $t('general:label.none'),
-                now: $t('general:label.now'),
-                today: $t('general:label.today'),
-              }"
-            />
-          </b-form-group>
-        </b-col>
 
         <b-col
-          cols="6"
-        >
-          <b-form-group
-            data-test-id="expires-at"
-            :label="$t('expiresAt.label')"
-            :description="$t('expiresAt.description')"
-          >
-            <c-input-date-time
-              v-model="resource.expiresAt"
-              data-test-id="input-expires-at"
-              :labels="{
-                clear: $t('general:label.clear'),
-                none: $t('general:label.none'),
-                now: $t('general:label.now'),
-                today: $t('general:label.today'),
-              }"
-            />
-          </b-form-group>
-        </b-col>
-
-        <b-col
-          cols="6"
+          cols="12"
+          lg="6"
         >
           <b-form-group>
             <b-form-checkbox
@@ -248,17 +200,56 @@
               {{ $t('discovery') }}
             </b-form-checkbox>
           </b-form-group>
+        </b-col>
 
-          <b-form-group>
-            <b-form-checkbox
-              v-model="resource.trusted"
-              data-test-id="checkbox-is-client-trusted"
-            >
-              {{ $t('trusted.label') }}
-            </b-form-checkbox>
-            <b-form-text>{{ $t('trusted.description') }}</b-form-text>
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            data-test-id="valid-from"
+            :label="$t('validFrom.label')"
+            :description="$t('validFrom.description')"
+          >
+            <c-input-date-time
+              v-model="resource.validFrom"
+              data-test-id="input-valid-from"
+              :labels="{
+                clear: $t('general:label.clear'),
+                none: $t('general:label.none'),
+                now: $t('general:label.now'),
+                today: $t('general:label.today'),
+              }"
+            />
           </b-form-group>
+        </b-col>
 
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group
+            data-test-id="expires-at"
+            :label="$t('expiresAt.label')"
+            :description="$t('expiresAt.description')"
+          >
+            <c-input-date-time
+              v-model="resource.expiresAt"
+              data-test-id="input-expires-at"
+              :labels="{
+                clear: $t('general:label.clear'),
+                none: $t('general:label.none'),
+                now: $t('general:label.now'),
+                today: $t('general:label.today'),
+              }"
+            />
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
           <b-form-group>
             <b-form-checkbox
               v-model="resource.enabled"
@@ -268,12 +259,24 @@
               {{ $t('enabled.label') }}
             </b-form-checkbox>
 
-            <template
-              v-if="resource.isDefault"
-              #description
-            >
+            <b-form-text v-if="resource.isDefault">
               {{ $t('enabled.disabledFootnote') }}
-            </template>
+            </b-form-text>
+          </b-form-group>
+        </b-col>
+
+        <b-col
+          cols="12"
+          lg="6"
+        >
+          <b-form-group>
+            <b-form-checkbox
+              v-model="resource.trusted"
+              data-test-id="checkbox-is-client-trusted"
+            >
+              {{ $t('trusted.label') }}
+            </b-form-checkbox>
+            <b-form-text>{{ $t('trusted.description') }}</b-form-text>
           </b-form-group>
         </b-col>
       </b-row>
@@ -466,15 +469,6 @@
     </template>
 
     <template #footer>
-      <c-button-submit
-        :disabled="saveDisabled"
-        :processing="processing"
-        :success="success"
-        :text="$t('admin:general.label.submit')"
-        class="float-right"
-        @submit="submit"
-      />
-
       <template
         v-if="canDelete"
       >
@@ -496,6 +490,15 @@
           {{ $t('delete') }}
         </confirmation-toggle>
       </template>
+
+      <c-button-submit
+        :disabled="saveDisabled"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="submit"
+      />
     </template>
   </b-card>
 </template>
diff --git a/client/web/admin/src/components/CContentHeader.vue b/client/web/admin/src/components/CContentHeader.vue
index 2ab0de3ea..4a7f691b2 100644
--- a/client/web/admin/src/components/CContentHeader.vue
+++ b/client/web/admin/src/components/CContentHeader.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex justify-content-end flex-wrap gap-1 mb-2"
+    class="d-flex justify-content-end flex-wrap gap-1 mb-2 flex-fill-child"
   >
     <portal to="topbar-title">
       {{ title }}
diff --git a/client/web/admin/src/components/CResourceListStatusFilter.vue b/client/web/admin/src/components/CResourceListStatusFilter.vue
index d6b8acf91..6c8dee5fd 100644
--- a/client/web/admin/src/components/CResourceListStatusFilter.vue
+++ b/client/web/admin/src/components/CResourceListStatusFilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="my-1">
+  <b-col class="d-flex align-items-center flex-wrap gap-1">
     <b-form-radio-group
       v-model="$attrs.value"
       v-bind="$attrs"
@@ -14,10 +14,10 @@
       name="radio-btn-outline"
       v-on="$listeners"
     />
-    <span class="mt-1 ml-2 text-nowrap">
+    <span class="text-nowrap">
       {{ $attrs.label }}
     </span>
-  </div>
+  </b-col>
 </template>
 
 <script>
diff --git a/client/web/admin/src/components/CSubmitButton.c3.js b/client/web/admin/src/components/CSubmitButton.c3.js
deleted file mode 100644
index 17d00e131..000000000
--- a/client/web/admin/src/components/CSubmitButton.c3.js
+++ /dev/null
@@ -1,41 +0,0 @@
-import { default as component } from './CSubmitButton.vue'
-import { components } from '@cortezaproject/corteza-vue'
-const { checkbox, input } = components.C3.controls
-
-const props = {
-  processing: false,
-  success: false,
-  disabled: true,
-  buttonClass: 'mt-2 pt-1',
-  variant: 'outline-primary',
-  iconVariant: '',
-}
-
-export default {
-  name: 'Submit button',
-  group: ['Root components'],
-  component,
-  props,
-
-  controls: [
-    checkbox('Processing', 'processing'),
-    checkbox('Success', 'success'),
-    checkbox('Disabled', 'disabled'),
-    input('Button class', 'buttonClass'),
-  ],
-
-  scenarios: [
-    { label: 'Full form',
-      props,
-    },
-    { label: 'Empty form',
-      props: {
-        ...props,
-        disabled: false,
-        buttonClass: '',
-        variant: '',
-        iconVariant: '',
-      },
-    },
-  ],
-}
diff --git a/client/web/admin/src/components/CSubmitButton.vue b/client/web/admin/src/components/CSubmitButton.vue
deleted file mode 100644
index 594f13d30..000000000
--- a/client/web/admin/src/components/CSubmitButton.vue
+++ /dev/null
@@ -1,83 +0,0 @@
-<template>
-  <b-button
-    :data-test-id="cypressID"
-    type="submit"
-    :variant="variant"
-    :disabled="disabled || processing || success"
-    class="submit"
-    :class="buttonClass"
-    @click.prevent="$emit('submit')"
-  >
-    <b-spinner
-      v-if="processing"
-      small
-      :variant="iconVariant"
-      type="grow"
-    />
-    <font-awesome-icon
-      v-else-if="success"
-      :icon="['fas', 'check']"
-      class="text-white h3 mb-0"
-      :class="iconVariant"
-    />
-    <span
-      v-else
-    >
-      <slot>{{ $t('general.label.submit') }}</slot>
-    </span>
-  </b-button>
-</template>
-
-<script>
-export default {
-  name: 'CSubmitButton',
-
-  i18nOptions: {
-    namespaces: 'admin',
-  },
-
-  props: {
-    processing: {
-      type: Boolean,
-      value: false,
-    },
-
-    success: {
-      type: Boolean,
-      value: false,
-    },
-
-    disabled: {
-      type: Boolean,
-      value: false,
-    },
-
-    buttonClass: {
-      type: String,
-      default: '',
-    },
-
-    variant: {
-      type: String,
-      default: 'primary',
-    },
-
-    iconVariant: {
-      type: String,
-      default: 'text-white',
-    },
-
-    cypressID: {
-      type: String,
-      default: 'button-submit',
-    },
-  },
-}
-</script>
-
-<style>
-.submit {
-  min-width: 75px;
-  min-height: 35px;
-}
-</style>
diff --git a/client/web/admin/src/components/CSystemFields.vue b/client/web/admin/src/components/CSystemFields.vue
index ccbe5e1ed..93faa7de9 100644
--- a/client/web/admin/src/components/CSystemFields.vue
+++ b/client/web/admin/src/components/CSystemFields.vue
@@ -10,11 +10,7 @@
         :label="$t('id')"
         label-class="text-primary"
       >
-        <b-form-input
-          v-model="id"
-          plaintext
-          disabled
-        />
+        {{ id }}
       </b-form-group>
     </b-col>
 
diff --git a/client/web/admin/src/components/CUploaderWithPreview.vue b/client/web/admin/src/components/CUploaderWithPreview.vue
index 6286eaa08..c81402579 100644
--- a/client/web/admin/src/components/CUploaderWithPreview.vue
+++ b/client/web/admin/src/components/CUploaderWithPreview.vue
@@ -4,11 +4,11 @@
   >
     <div
       v-if="value"
-      class="preview d-flex justify-content-center align-items-center w-100 mb-2"
+      class="preview d-flex w-100 mb-2"
     >
       <b-img
         :src="value"
-        class="mh-100 mw-100 h-auto"
+        class="w-100 h-auto"
       />
     </div>
 
diff --git a/client/web/admin/src/components/ConfirmationToggle.vue b/client/web/admin/src/components/ConfirmationToggle.vue
index 002c45a3a..127dceb2d 100644
--- a/client/web/admin/src/components/ConfirmationToggle.vue
+++ b/client/web/admin/src/components/ConfirmationToggle.vue
@@ -1,10 +1,10 @@
 <template>
-  <div>
+  <div class="d-inline-flex">
     <template v-if="!inConfirmation">
       <b-button
         :variant="ctaClass"
         :disabled="disabled"
-        class="confirmation-prompt"
+        class="confirmation-prompt flex-fill"
         @click.prevent="onPrompt"
       >
         <slot />
@@ -14,7 +14,7 @@
     <template v-if="inConfirmation">
       <b-button
         :variant="confirmationClass"
-        class="confirmation-confirm"
+        class="confirmation-confirm flex-fill mr-1"
         @click.prevent="onConfirmation()"
       >
         {{ $t('label.yes') }}
@@ -22,7 +22,7 @@
 
       <b-button
         variant="secondary"
-        class="confirmation-cancel"
+        class="confirmation-cancel flex-fill"
         @click.prevent="inConfirmation=false"
       >
         {{ $t('label.no') }}
diff --git a/client/web/admin/src/components/Connection/CExternalConnectionList.vue b/client/web/admin/src/components/Connection/CExternalConnectionList.vue
index 665e06f1a..74f915d04 100644
--- a/client/web/admin/src/components/Connection/CExternalConnectionList.vue
+++ b/client/web/admin/src/components/Connection/CExternalConnectionList.vue
@@ -12,6 +12,7 @@
         {{ $t('title') }}
       </h3>
     </template>
+
     <c-resource-list
       :primary-key="primaryKey"
       :filter="filter"
@@ -34,17 +35,21 @@
       }"
       clickable
       hide-search
-      class="h-100"
+      card-header-class="rounded-0"
+      class="h-100 bg-transparent"
       @row-clicked="handleRowClicked"
     >
       <template #header>
         <b-button
           variant="primary"
+          size="lg"
           :to="{ name: 'system.connection.new' }"
         >
           {{ $t('add-button') }}
         </b-button>
+      </template>
 
+      <template #toolbar>
         <c-resource-list-status-filter
           v-model="filter.deleted"
           data-test-id="filter-deleted-connections"
diff --git a/client/web/admin/src/components/Federation/CFederationEditorInfo.vue b/client/web/admin/src/components/Federation/CFederationEditorInfo.vue
index 557ed8960..536f1706a 100644
--- a/client/web/admin/src/components/Federation/CFederationEditorInfo.vue
+++ b/client/web/admin/src/components/Federation/CFederationEditorInfo.vue
@@ -1,10 +1,16 @@
 <template>
   <b-card
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
-    footer-class="d-flex flex-wrap gap-1"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
+    <template #header>
+      <h3 class="m-0">
+        {{ $t('title') }}
+      </h3>
+    </template>
+
     <b-form
       @submit.prevent="$emit('submit', node)"
     >
@@ -86,28 +92,22 @@
       >
     </b-form>
 
-    <template #header>
-      <h3 class="m-0">
-        {{ $t('title') }}
-      </h3>
-    </template>
-
     <template #footer>
-      <c-button-submit
-        :disabled="saveDisabled"
-        :processing="processing"
-        :success="success"
-        :text="$t('admin:general.label.submit')"
-        class="float-right"
-        @submit="$emit('submit', node)"
-      />
-
       <confirmation-toggle
         v-if="node && node.nodeID"
         @confirmed="$emit('delete')"
       >
         {{ getDeleteStatus }}
       </confirmation-toggle>
+
+      <c-button-submit
+        :disabled="saveDisabled"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="$emit('submit', node)"
+      />
     </template>
   </b-card>
 </template>
diff --git a/client/web/admin/src/components/Permissions/CPermissionList.vue b/client/web/admin/src/components/Permissions/CPermissionList.vue
index 69860b182..8a15b4259 100644
--- a/client/web/admin/src/components/Permissions/CPermissionList.vue
+++ b/client/web/admin/src/components/Permissions/CPermissionList.vue
@@ -1,11 +1,12 @@
 <template>
   <div class="h-100">
     <b-card
-      class="shadow h-100"
       header-class="p-0"
       body-class="overflow-auto p-0"
       header-bg-variant="white"
       footer-bg-variant="white"
+      footer-class="d-flex flex-wrap flex-fill-child gap-1"
+      class="shadow h-100"
     >
       <template
         v-if="loaded && canGrant"
@@ -183,7 +184,7 @@
           :processing="processing"
           :success="success"
           :text="$t('ui.save')"
-          class="float-right"
+          class="ml-auto"
           @submit="onSubmit"
         />
       </template>
diff --git a/client/web/admin/src/components/Queues/CQueueEditorInfo.vue b/client/web/admin/src/components/Queues/CQueueEditorInfo.vue
index c2bbe3165..ebba2a3d8 100644
--- a/client/web/admin/src/components/Queues/CQueueEditorInfo.vue
+++ b/client/web/admin/src/components/Queues/CQueueEditorInfo.vue
@@ -1,10 +1,10 @@
 <template>
   <b-card
     data-test-id="card-queue-edit"
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
-    footer-class="d-flex flex-wrap gap-1"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <b-form @submit="$emit('submit', queue)">
       <b-row>
@@ -95,15 +95,6 @@
     </template>
 
     <template #footer>
-      <c-button-submit
-        :disabled="saveDisabled"
-        :processing="processing"
-        :success="success"
-        :text="$t('admin:general.label.submit')"
-        class="float-right"
-        @submit="$emit('submit', queue)"
-      />
-
       <confirmation-toggle
         v-if="queue && queue.queueID && queue.canDeleteQueue"
         :data-test-id="deleteButtonStatusCypressId"
@@ -111,6 +102,15 @@
       >
         {{ getDeleteStatus }}
       </confirmation-toggle>
+
+      <c-button-submit
+        :disabled="saveDisabled"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="$emit('submit', queue)"
+      />
     </template>
   </b-card>
 </template>
diff --git a/client/web/admin/src/components/Role/CRoleEditorInfo.vue b/client/web/admin/src/components/Role/CRoleEditorInfo.vue
index 4faca3452..b0efc47b3 100644
--- a/client/web/admin/src/components/Role/CRoleEditorInfo.vue
+++ b/client/web/admin/src/components/Role/CRoleEditorInfo.vue
@@ -1,10 +1,10 @@
 <template>
   <b-card
-    class="shadow-sm"
     data-test-id="card-role-info"
     header-bg-variant="white"
     footer-bg-variant="white"
-    footer-class="d-flex flex-wrap gap-1"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <b-form
       @submit.prevent="submit()"
@@ -49,27 +49,7 @@
           </b-form-group>
         </b-col>
 
-        <b-col
-          cols="12"
-          lg="6"
-        >
-          <b-form-group
-            v-if="true"
-            :label="$t('context.expression-label')"
-            label-class="text-primary"
-          >
-            <b-form-input
-              v-model="role.meta.context.expr"
-              data-test-id="input-expression"
-              :disabled="!editable"
-            />
-          </b-form-group>
-        </b-col>
-
-        <b-col
-          cols="12"
-          lg="6"
-        >
+        <b-col cols="12">
           <b-form-group
             v-if="role.meta"
             :label="$t('description')"
@@ -101,22 +81,35 @@
         </b-col>
       </b-row>
 
-      <div
+      <b-row
         v-if="isContextual"
         class="my-3"
       >
-        <h5 class="mb-3">
-          {{ $t('context.resource-types-label') }}
-        </h5>
+        <b-col
+          cols="12"
+        >
+          <b-form-group
+            :label="$t('context.expression-label')"
+            label-class="text-primary"
+          >
+            <b-form-input
+              v-model="role.meta.context.expr"
+              data-test-id="input-expression"
+              :disabled="!editable"
+            />
+          </b-form-group>
+        </b-col>
 
-        <b-row>
-          <b-col
-            v-for="(resourceType, i) in resourceTypeOptions"
-            :key="i"
-            cols="12"
-            md="4"
+        <b-col
+          cols="12"
+        >
+          <b-form-group
+            :label="$t('context.resource-types-label')"
+            label-class="text-primary"
           >
             <b-checkbox
+              v-for="(resourceType, i) in resourceTypeOptions"
+              :key="i"
               v-model="role.meta.context.resourceTypes"
               data-test-id="checkbox-resource-types-list"
               :value="resourceType.value"
@@ -124,9 +117,9 @@
             >
               {{ resourceType.text }}
             </b-checkbox>
-          </b-col>
-        </b-row>
-      </div>
+          </b-form-group>
+        </b-col>
+      </b-row>
 
       <c-system-fields
         :resource="role"
@@ -150,15 +143,6 @@
     </template>
 
     <template #footer>
-      <c-button-submit
-        :disabled="saveDisabled"
-        :processing="processing"
-        :success="success"
-        :text="$t('admin:general.label.submit')"
-        class="float-right"
-        @submit="submit()"
-      />
-
       <confirmation-toggle
         v-if="!fresh && editable && role.canDeleteRole && !isDataPrivacyOfficer"
         :data-test-id="deletedButtonStatusCypressId"
@@ -175,6 +159,15 @@
       >
         {{ getArchiveStatus }}
       </confirmation-toggle>
+
+      <c-button-submit
+        :disabled="saveDisabled"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="submit()"
+      />
     </template>
   </b-card>
 </template>
diff --git a/client/web/admin/src/components/Role/CRoleEditorMembers.vue b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
index d025ac088..29191221c 100644
--- a/client/web/admin/src/components/Role/CRoleEditorMembers.vue
+++ b/client/web/admin/src/components/Role/CRoleEditorMembers.vue
@@ -1,9 +1,10 @@
 <template>
   <b-card
     data-test-id="card-role-edit-members"
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <b-form
       @submit.prevent="$emit('submit')"
diff --git a/client/web/admin/src/components/SensitivityLevel/CSensitivityLevelEditorInfo.vue b/client/web/admin/src/components/SensitivityLevel/CSensitivityLevelEditorInfo.vue
index 1b4dcac78..ecb56d104 100644
--- a/client/web/admin/src/components/SensitivityLevel/CSensitivityLevelEditorInfo.vue
+++ b/client/web/admin/src/components/SensitivityLevel/CSensitivityLevelEditorInfo.vue
@@ -1,10 +1,10 @@
 <template>
   <b-card
     data-test-id="card-sens-lvl-info"
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
-    footer-class="d-flex flex-wrap gap-1"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <b-form
       @submit.prevent="$emit('submit', sensitivityLevel)"
@@ -98,21 +98,21 @@
     </template>
 
     <template #footer>
-      <c-button-submit
-        :disabled="saveDisabled"
-        :processing="processing"
-        :success="success"
-        :text="$t('admin:general.label.submit')"
-        class="float-right"
-        @submit="$emit('submit', sensitivityLevel)"
-      />
-
       <confirmation-toggle
         v-if="sensitivityLevel && sensitivityLevel.sensitivityLevelID"
         @confirmed="$emit('delete')"
       >
         {{ getDeleteStatus }}
       </confirmation-toggle>
+
+      <c-button-submit
+        :disabled="saveDisabled"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="$emit('submit', sensitivityLevel)"
+      />
     </template>
   </b-card>
 </template>
diff --git a/client/web/admin/src/components/Session/CSessionEditorInfo.vue b/client/web/admin/src/components/Session/CSessionEditorInfo.vue
index f505c571d..8baab5a85 100644
--- a/client/web/admin/src/components/Session/CSessionEditorInfo.vue
+++ b/client/web/admin/src/components/Session/CSessionEditorInfo.vue
@@ -9,21 +9,10 @@
       v-if="session && session.sessionID"
     >
       <b-row>
-        <b-col
-          cols="12"
-        >
-          <b-form-group
-            :label="$t('id')"
-            label-class="text-primary"
-            class="mb-0"
-          >
-            {{ session.sessionID }}
-          </b-form-group>
-        </b-col>
-
         <b-col
           v-if="session.workflowID"
           cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('workflowID')"
@@ -35,6 +24,7 @@
 
         <b-col
           cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('status')"
@@ -48,6 +38,7 @@
         <b-col
           v-if="session.error"
           cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('error')"
@@ -60,6 +51,7 @@
         <b-col
           v-if="session.resourceType"
           cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('resourceType')"
@@ -72,6 +64,7 @@
         <b-col
           v-if="session.eventType"
           cols="12"
+          lg="6"
         >
           <b-form-group
             :label="$t('eventType')"
@@ -100,6 +93,7 @@
       </b-row>
 
       <c-system-fields
+        :id="session.sessionID"
         :resource="session"
       >
         <template #custom-field>
diff --git a/client/web/admin/src/components/Settings/Compose/CComposeEditorBasic.vue b/client/web/admin/src/components/Settings/Compose/CComposeEditorBasic.vue
index 907b82bb6..40185722a 100644
--- a/client/web/admin/src/components/Settings/Compose/CComposeEditorBasic.vue
+++ b/client/web/admin/src/components/Settings/Compose/CComposeEditorBasic.vue
@@ -1,9 +1,16 @@
 <template>
   <b-card
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
+    <template #header>
+      <h3 class="m-0">
+        {{ $t('title') }}
+      </h3>
+    </template>
+
     <b-form
       @submit.prevent="$emit('submit', basic)"
     >
@@ -17,6 +24,7 @@
           >
             <b-form-group
               :label="$t('attachments.max-size')"
+              label-class="text-primary"
             >
               <b-form-input
                 v-model="basic['compose.page.attachments.max-size']"
@@ -33,6 +41,7 @@
             <b-form-group
               :label="$t('attachments.type.whitelist')"
               :description="$t('attachments.type.description')"
+              label-class="text-primary"
               class="mb-0"
             >
               <b-form-input v-model="pageAttachmentWhitelist" />
@@ -51,6 +60,7 @@
           >
             <b-form-group
               :label="$t('attachments.max-size')"
+              label-class="text-primary"
             >
               <b-form-input
                 v-model="basic['compose.record.attachments.max-size']"
@@ -67,6 +77,7 @@
             <b-form-group
               :label="$t('attachments.type.whitelist')"
               :description="$t('attachments.type.description')"
+              label-class="text-primary"
               class="mb-0"
             >
               <b-form-input v-model="recordAttachmentWhitelist" />
@@ -85,6 +96,7 @@
           >
             <b-form-group
               :label="$t('attachments.max-size')"
+              label-class="text-primary"
             >
               <b-form-input
                 v-model="basic['compose.icon.attachments.max-size']"
@@ -101,6 +113,7 @@
             <b-form-group
               :label="$t('attachments.type.whitelist')"
               :description="$t('attachments.type.description')"
+              label-class="text-primary"
               class="mb-0"
             >
               <b-form-input v-model="iconAttachmentWhitelist" />
@@ -110,19 +123,13 @@
       </div>
     </b-form>
 
-    <template #header>
-      <h3 class="m-0">
-        {{ $t('title') }}
-      </h3>
-    </template>
-
     <template #footer>
       <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
         :text="$t('admin:general.label.submit')"
-        class="float-right"
+        class="ml-auto"
         @submit="$emit('submit', basic)"
       />
     </template>
diff --git a/client/web/admin/src/components/Settings/Compose/CComposeEditorUI.vue b/client/web/admin/src/components/Settings/Compose/CComposeEditorUI.vue
index d440b9cd6..6a89135b1 100644
--- a/client/web/admin/src/components/Settings/Compose/CComposeEditorUI.vue
+++ b/client/web/admin/src/components/Settings/Compose/CComposeEditorUI.vue
@@ -1,8 +1,9 @@
 <template>
   <b-card
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <template #header>
       <h3 class="m-0">
@@ -73,7 +74,7 @@
         :processing="processing"
         :success="success"
         :text="$t('admin:general.label.submit')"
-        class="float-right"
+        class="ml-auto"
         @submit="onSubmit"
       />
     </template>
diff --git a/client/web/admin/src/components/Settings/Email/CSystemEmailServer.vue b/client/web/admin/src/components/Settings/Email/CSystemEmailServer.vue
index 055152c4c..5a8678828 100644
--- a/client/web/admin/src/components/Settings/Email/CSystemEmailServer.vue
+++ b/client/web/admin/src/components/Settings/Email/CSystemEmailServer.vue
@@ -2,6 +2,7 @@
   <b-card
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
     class="shadow-sm"
   >
     <b-form
@@ -132,7 +133,6 @@
         :success="successSMTPTest"
         :text="$t('testSmtpConfigs.button')"
         variant="light"
-        class="float-left"
         @submit="smtpConnectionCheck()"
       />
 
@@ -141,7 +141,7 @@
         :processing="processing"
         :success="success"
         :text="$t('admin:general.label.submit')"
-        class="float-right"
+        class="ml-auto"
         @submit="submit()"
       />
     </template>
diff --git a/client/web/admin/src/components/Settings/System/CSystemEditorAuth.vue b/client/web/admin/src/components/Settings/System/CSystemEditorAuth.vue
index c0101516c..3ace54601 100644
--- a/client/web/admin/src/components/Settings/System/CSystemEditorAuth.vue
+++ b/client/web/admin/src/components/Settings/System/CSystemEditorAuth.vue
@@ -1,22 +1,28 @@
 <template>
   <b-card
     data-test-id="card-edit-authentication"
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
+    <template #header>
+      <h3 class="m-0">
+        {{ $t('title') }}
+      </h3>
+    </template>
+
     <b-form
       @submit.prevent="$emit('submit', settings)"
     >
-      <b-row
-        class="text-primary"
-      >
+      <b-row>
         <b-col
           cols="12"
           lg="6"
         >
           <b-form-group
             :label="$t('internal.title')"
+            label-class="text-primary"
           >
             <c-input-checkbox
               v-model="settings['auth.internal.enabled']"
@@ -34,6 +40,7 @@
         >
           <b-form-group
             :label="$t('internal.enabled')"
+            label-class="text-primary"
           >
             <c-input-checkbox
               v-model="settings['auth.internal.enabled']"
@@ -51,6 +58,7 @@
         >
           <b-form-group
             :label="$t('internal.password-reset.enabled')"
+            label-class="text-primary"
           >
             <c-input-checkbox
               v-model="settings['auth.internal.password-reset.enabled']"
@@ -69,6 +77,7 @@
         >
           <b-form-group
             :label="$t('internal.signup.email-confirmation-required')"
+            label-class="text-primary"
           >
             <c-input-checkbox
               v-model="settings['auth.internal.signup.email-confirmation-required']"
@@ -84,7 +93,10 @@
           cols="12"
           lg="6"
         >
-          <b-form-group :label="$t('internal.signup.enabled')">
+          <b-form-group
+            :label="$t('internal.signup.enabled')"
+            label-class="text-primary"
+          >
             <c-input-checkbox
               v-model="settings['auth.internal.signup.enabled']"
               :value="true"
@@ -99,7 +111,10 @@
           cols="12"
           lg="6"
         >
-          <b-form-group :label="$t('internal.profile-avatar.enabled')">
+          <b-form-group
+            :label="$t('internal.profile-avatar.enabled')"
+            label-class="text-primary"
+          >
             <c-input-checkbox
               v-model="settings['auth.internal.profile-avatar.enabled']"
               :value="true"
@@ -114,7 +129,10 @@
           cols="12"
           lg="6"
         >
-          <b-form-group :label="$t('internal.signup.split-credentials-check.label')">
+          <b-form-group
+            :label="$t('internal.signup.split-credentials-check.label')"
+            label-class="text-primary"
+          >
             <c-input-checkbox
               v-model="settings['auth.internal.split-credentials-check']"
               :value="true"
@@ -450,19 +468,13 @@
       </div>
     </b-form>
 
-    <template #header>
-      <h3 class="m-0">
-        {{ $t('title') }}
-      </h3>
-    </template>
-
     <template #footer>
       <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
         :text="$t('admin:general.label.submit')"
-        class="float-right"
+        class="ml-auto"
         @submit="$emit('submit', settings)"
       />
     </template>
diff --git a/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue b/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
index f5a210b6e..2278a9240 100644
--- a/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
+++ b/client/web/admin/src/components/Settings/System/CSystemEditorAuthBgScreen.vue
@@ -2,6 +2,7 @@
   <b-card
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
     class="shadow-sm"
   >
     <template #header>
@@ -11,22 +12,23 @@
     </template>
 
     <b-row cols="12">
-      <b-col cols="6">
-        <div class="shadow-sm">
-          <div class="d-flex justify-content-between">
-            <h5>
-              {{ $t("image.uploader.title") }}
-            </h5>
+      <b-col
+        cols="12"
+        lg="6"
+      >
+        <b-form-group
+          label-class="d-flex align-items-center text-primary"
+        >
+          <template #label>
+            {{ $t('image.uploader.label') }}
 
-            <b-button
+            <c-input-confirm
               v-if="uploadedFile('auth.ui.background-image-src')"
-              variant="link"
-              class="d-flex align-items-top text-dark p-1"
-              @click="$emit('resetAttachment', 'auth.ui.background-image-src')"
-            >
-              <font-awesome-icon :icon="['far', 'trash-alt']" />
-            </b-button>
-          </div>
+              show-icon
+              class="ml-auto"
+              @confirmed="$emit('resetAttachment', 'auth.ui.background-image-src')"
+            />
+          </template>
 
           <c-uploader-with-preview
             :value="uploadedFile('auth.ui.background-image-src')"
@@ -36,14 +38,26 @@
             @upload="$emit('onUpload')"
             @clear="$emit('resetAttachment', 'auth.ui.background-image-src')"
           />
-        </div>
+        </b-form-group>
       </b-col>
 
-      <b-col cols="6">
-        <div class="shadow-sm">
-          <h5>
-            {{ $t("image.editor.title") }}
-          </h5>
+      <b-col
+        cols="12"
+        lg="6"
+      >
+        <b-form-group
+          label-class="text-primary"
+        >
+          <template #label>
+            {{ $t("image.editor.label") }}
+
+            <c-input-confirm
+              v-if="uploadedFile('auth.ui.background-image-src')"
+              show-icon
+              class="ml-auto"
+              @confirmed="$emit('resetAttachment', 'auth.ui.background-image-src')"
+            />
+          </template>
 
           <ace-editor
             data-test-id="auth-bg-image-styling-editor"
@@ -51,29 +65,32 @@
             :show-print-margin="true"
             :show-gutter="true"
             :highlight-active-line="true"
-            width="100%"
-            height="200px"
             mode="css"
             theme="chrome"
+            height="h-100"
             name="editor/css"
             :on-change="v => (settings['auth.ui.styles'] = v)"
             :value="settings['auth.ui.styles']"
             :editor-props="{
               $blockScrolling: false
             }"
+            class="flex-fill w-100"
+            style="min-height: 300px;"
           />
-
-          <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'])"
-          />
-        </div>
+        </b-form-group>
       </b-col>
     </b-row>
+
+    <template #footer>
+      <c-button-submit
+        :disabled="!canManage"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="$emit('submit', settings['auth.ui.styles'])"
+      />
+    </template>
   </b-card>
 </template>
 
diff --git a/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue b/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue
index 9944559b9..add83588e 100644
--- a/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue
+++ b/client/web/admin/src/components/Settings/System/CSystemEditorExternal.vue
@@ -1,9 +1,16 @@
 <template>
   <b-card
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
+    <template #header>
+      <h3 class="m-0">
+        {{ $t('title') }}
+      </h3>
+    </template>
+
     <b-form-group
       :label="$t('enabled')"
       label-class="text-primary"
@@ -79,19 +86,13 @@
       />
     </b-modal>
 
-    <template #header>
-      <h3 class="m-0">
-        {{ $t('title') }}
-      </h3>
-    </template>
-
     <template #footer>
       <c-button-submit
         :disabled="!dirty || !canManage"
         :processing="processing"
         :success="success"
         :text="$t('admin:general.label.submit')"
-        class="float-right"
+        class="ml-auto"
         @submit="$emit('submit', changes)"
       />
     </template>
diff --git a/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue b/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
index 5a08b7053..e899ada3b 100644
--- a/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
+++ b/client/web/admin/src/components/Settings/UI/CUIBrandingEditor.vue
@@ -1,8 +1,9 @@
 <template>
   <b-card
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <template #header>
       <h3 class="m-0">
@@ -32,9 +33,6 @@
           <c-input-color-picker
             v-model="brandingVariables[key]"
             :data-test-id="`input-${key}-color`"
-            width="32px"
-            height="32px"
-            show-color-code-text
             :translations="colorTranslations"
           />
         </b-form-group>
@@ -42,11 +40,12 @@
     </b-row>
 
     <template #footer>
-      <c-submit-button
+      <c-button-submit
         :disabled="!canManage"
         :processing="processing"
         :success="success"
-        class="float-right mt-2"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
         @submit="onSubmit"
       />
     </template>
@@ -54,7 +53,6 @@
 </template>
 
 <script>
-import CSubmitButton from 'corteza-webapp-admin/src/components/CSubmitButton'
 import { components } from '@cortezaproject/corteza-vue'
 const { CInputColorPicker } = components
 
@@ -68,7 +66,6 @@ export default {
 
   components: {
     CInputColorPicker,
-    CSubmitButton,
   },
 
   props: {
diff --git a/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue b/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue
index 4a209548f..0e802986a 100644
--- a/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue
+++ b/client/web/admin/src/components/Settings/UI/CUICustomCSS.vue
@@ -1,8 +1,10 @@
 <template>
   <b-card
-    class="shadow-sm"
+    body-class="p-0"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <template #header>
       <h3 class="m-0">
@@ -50,7 +52,7 @@
         :processing="processing"
         :success="success"
         :text="$t('admin:general.label.submit')"
-        class="float-right mt-2"
+        class="ml-auto"
         @submit="onSubmit"
       />
     </template>
diff --git a/client/web/admin/src/components/Settings/UI/CUILogoEditor.vue b/client/web/admin/src/components/Settings/UI/CUILogoEditor.vue
index 325b33398..e1fa8dba0 100644
--- a/client/web/admin/src/components/Settings/UI/CUILogoEditor.vue
+++ b/client/web/admin/src/components/Settings/UI/CUILogoEditor.vue
@@ -1,30 +1,27 @@
 <template>
-  <b-row cols="12">
+  <b-row>
     <b-col
-      cols="6"
+      cols="12"
+      lg="6"
     >
       <b-card
-        class="shadow-sm"
+        header-class="d-flex align-items-center justify-content-between pr-2"
+        class="shadow-sm mb-3"
       >
-        <div
-          class="d-flex justify-content-between"
-        >
-          <h4
-            class="card-title"
-          >
+        <template #header>
+          <h3 class="mb-0">
             {{ $t('mainLogo.title') }}
-          </h4>
-          <b-button
+          </h3>
+
+          <c-input-confirm
             v-if="uploadedFile('ui.main-logo')"
-            variant="link"
-            class="d-flex align-items-top text-dark p-1"
-            @click="resetAttachment('ui.main-logo')"
+            @confirmed="resetAttachment('ui.main-logo')"
           >
             <font-awesome-icon
               :icon="['far', 'trash-alt']"
             />
-          </b-button>
-        </div>
+          </c-input-confirm>
+        </template>
 
         <c-uploader-with-preview
           :value="uploadedFile('ui.main-logo')"
@@ -35,31 +32,29 @@
         />
       </b-card>
     </b-col>
+
     <b-col
-      cols="6"
+      cols="12"
+      lg="6"
     >
       <b-card
-        class="shadow-sm"
+        header-class="d-flex align-items-center justify-content-between"
+        class="shadow-sm mb-3"
       >
-        <div
-          class="d-flex justify-content-between"
-        >
-          <h4
-            class="card-title"
-          >
+        <template #header>
+          <h3 class="mb-0">
             {{ $t('iconLogo.title') }}
-          </h4>
-          <b-button
+          </h3>
+
+          <c-input-confirm
             v-if="uploadedFile('ui.icon-logo')"
-            variant="link"
-            class="d-flex align-items-top text-dark p-1"
-            @click="resetAttachment('ui.icon-logo')"
+            @confirmed="resetAttachment('ui.icon-logo')"
           >
             <font-awesome-icon
               :icon="['far', 'trash-alt']"
             />
-          </b-button>
-        </div>
+          </c-input-confirm>
+        </template>
 
         <c-uploader-with-preview
           :value="uploadedFile('ui.icon-logo')"
diff --git a/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue b/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
index 923fac818..e79653c62 100644
--- a/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
+++ b/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
@@ -1,8 +1,9 @@
 <template>
   <b-card
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <template #header>
       <h3 class="m-0">
@@ -205,7 +206,7 @@
         :processing="processing"
         :success="success"
         :text="$t('admin:general.label.submit')"
-        class="float-right"
+        class="ml-auto"
         @submit="onSubmit"
       />
     </template>
diff --git a/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue b/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
index 763b6ace9..56ec28887 100644
--- a/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
+++ b/client/web/admin/src/components/Template/CTemplateEditorContent/Index.vue
@@ -18,10 +18,12 @@
       lg="9"
     >
       <b-card
-        class="shadow-sm"
+        body-class="p-0"
         header-bg-variant="white"
         header-class="d-flex align-items-center"
         footer-bg-variant="white"
+        footer-class="d-flex flex-wrap flex-fill-child gap-1"
+        class="shadow-sm"
       >
         <component
           :is="editor"
@@ -48,7 +50,7 @@
             :processing="processing"
             :success="success"
             :text="$t('admin:general.label.submit')"
-            class="float-right"
+            class="ml-auto"
             @submit="$emit('submit', template)"
           />
         </template>
@@ -57,9 +59,11 @@
       <!-- Preview configuration -->
       <b-card
         v-if="!template.partial"
-        class="shadow-sm mt-3"
+        body-class="p-0"
         header-bg-variant="white"
         footer-bg-variant="white"
+        footer-class="d-flex flex-wrap flex-fill-child gap-1"
+        class="shadow-sm mt-3"
       >
         <!-- Partial templates can't be previewed -->
         <ace-editor
@@ -68,7 +72,6 @@
           :show-print-margin="true"
           :show-gutter="true"
           :highlight-active-line="true"
-          class="mt-1"
           width="100%"
           height="500px"
           mode="json"
@@ -88,28 +91,23 @@
         </template>
 
         <template #footer>
-          <div
-            class="float-right"
+          <b-btn
+            v-if="canPreviewHTML"
+            data-test-id="button-preview-html-template"
+            variant="light"
+            @click="openPreview('html')"
           >
-            <b-btn
-              v-if="canPreviewHTML"
-              data-test-id="button-preview-html-template"
-              variant="light"
-              class="mr-2"
-              @click="openPreview('html')"
-            >
-              {{ $t('preview.html') }}
-            </b-btn>
+            {{ $t('preview.html') }}
+          </b-btn>
 
-            <b-btn
-              v-if="canPreviewPDF"
-              data-test-id="button-preview-pdf-template"
-              variant="light"
-              @click="openPreview('pdf')"
-            >
-              {{ $t('preview.pdf') }}
-            </b-btn>
-          </div>
+          <b-btn
+            v-if="canPreviewPDF"
+            data-test-id="button-preview-pdf-template"
+            variant="light"
+            @click="openPreview('pdf')"
+          >
+            {{ $t('preview.pdf') }}
+          </b-btn>
         </template>
       </b-card>
     </b-col>
diff --git a/client/web/admin/src/components/Template/CTemplateEditorInfo.vue b/client/web/admin/src/components/Template/CTemplateEditorInfo.vue
index f655e157a..6c17cf708 100644
--- a/client/web/admin/src/components/Template/CTemplateEditorInfo.vue
+++ b/client/web/admin/src/components/Template/CTemplateEditorInfo.vue
@@ -1,10 +1,10 @@
 <template>
   <b-card
-    class="shadow-sm"
     data-test-id="card-template-info"
     header-bg-variant="white"
     footer-bg-variant="white"
-    footer-class="d-flex flex-wrap gap-1"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <b-form
       @submit="$emit('submit', template)"
@@ -122,15 +122,6 @@
     </template>
 
     <template #footer>
-      <c-button-submit
-        :disabled="saveDisabled"
-        :processing="processing"
-        :success="success"
-        :text="$t('admin:general.label.submit')"
-        class="float-right"
-        @submit="$emit('submit', template)"
-      />
-
       <confirmation-toggle
         v-if="!fresh && template.canDeleteTemplate"
         :data-test-id="getDeletedButtonStatusCypressId"
@@ -138,6 +129,15 @@
       >
         {{ getDeleteStatus }}
       </confirmation-toggle>
+
+      <c-button-submit
+        :disabled="saveDisabled"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="$emit('submit', template)"
+      />
     </template>
   </b-card>
 </template>
diff --git a/client/web/admin/src/components/User/CUserEditorAvatar.vue b/client/web/admin/src/components/User/CUserEditorAvatar.vue
index 0aa8195e3..5dc4d9e43 100644
--- a/client/web/admin/src/components/User/CUserEditorAvatar.vue
+++ b/client/web/admin/src/components/User/CUserEditorAvatar.vue
@@ -1,9 +1,10 @@
 <template>
   <b-card
-    class="shadow-sm"
     data-test-id="card-user-profile-avatar"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <template #header>
       <h3 class="m-0">
@@ -43,39 +44,47 @@
         />
       </div>
 
-      <div class="form-row mt-3">
-        <b-form-group
-          :label="$t('initial.color')"
-          label-class="text-primary"
-          class="col"
+      <b-row class="mt-3">
+        <b-col
+          cols="12"
+          md="6"
         >
-          <c-input-color-picker
-            v-model="user.meta.avatarColor"
-            data-test-id="input-text-color"
-            :translations="{
-              modalTitle: $t('colorPicker'),
-              cancelBtnLabel: $t('general:label.cancel'),
-              saveBtnLabel: $t('general:label.saveAndClose')
-            }"
-          />
-        </b-form-group>
+          <b-form-group
+            :label="$t('initial.color')"
+            label-class="text-primary"
+          >
+            <c-input-color-picker
+              v-model="user.meta.avatarColor"
+              data-test-id="input-text-color"
+              :translations="{
+                modalTitle: $t('colorPicker'),
+                cancelBtnLabel: $t('general:label.cancel'),
+                saveBtnLabel: $t('general:label.saveAndClose')
+              }"
+            />
+          </b-form-group>
+        </b-col>
 
-        <b-form-group
-          :label="$t('initial.backgroundColor')"
-          label-class="text-primary"
-          class="col"
+        <b-col
+          cols="12"
+          md="6"
         >
-          <c-input-color-picker
-            v-model="user.meta.avatarBgColor"
-            data-test-id="input-background-color"
-            :translations="{
-              modalTitle: $t('colorPicker'),
-              cancelBtnLabel: $t('general:label.cancel'),
-              saveBtnLabel: $t('general:label.saveAndClose')
-            }"
-          />
-        </b-form-group>
-      </div>
+          <b-form-group
+            :label="$t('initial.backgroundColor')"
+            label-class="text-primary"
+          >
+            <c-input-color-picker
+              v-model="user.meta.avatarBgColor"
+              data-test-id="input-background-color"
+              :translations="{
+                modalTitle: $t('colorPicker'),
+                cancelBtnLabel: $t('general:label.cancel'),
+                saveBtnLabel: $t('general:label.saveAndClose')
+              }"
+            />
+          </b-form-group>
+        </b-col>
+      </b-row>
     </b-form>
 
     <template #footer>
@@ -83,7 +92,7 @@
         :processing="processing"
         :success="success"
         :text="$t('admin:general.label.submit')"
-        class="float-right"
+        class="ml-auto"
         @submit="$emit('submit', user)"
       />
     </template>
diff --git a/client/web/admin/src/components/User/CUserEditorInfo.vue b/client/web/admin/src/components/User/CUserEditorInfo.vue
index e9d887451..55459ca29 100644
--- a/client/web/admin/src/components/User/CUserEditorInfo.vue
+++ b/client/web/admin/src/components/User/CUserEditorInfo.vue
@@ -4,7 +4,7 @@
     data-test-id="card-user-info"
     header-bg-variant="white"
     footer-bg-variant="white"
-    footer-class="d-flex flex-wrap gap-1"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
   >
     <b-form
       @submit.prevent="$emit('submit', user)"
@@ -88,15 +88,6 @@
     </template>
 
     <template #footer>
-      <c-button-submit
-        :disabled="saveDisabled"
-        :processing="processing"
-        :success="success"
-        :text="$t('admin:general.label.submit')"
-        class="float-right"
-        @submit="$emit('submit', user)"
-      />
-
       <confirmation-toggle
         v-if="!fresh && user.canDeleteUser"
         :data-test-id="deletedButtonStatusCypressId"
@@ -139,6 +130,15 @@
         default-variant="secondary"
         @click="dispatchCortezaSystemUserEvent($event, { user })"
       />
+
+      <c-button-submit
+        :disabled="saveDisabled"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="$emit('submit', user)"
+      />
     </template>
   </b-card>
 </template>
diff --git a/client/web/admin/src/components/User/CUserEditorMFA.vue b/client/web/admin/src/components/User/CUserEditorMFA.vue
index e5ab362ac..af56b9710 100644
--- a/client/web/admin/src/components/User/CUserEditorMFA.vue
+++ b/client/web/admin/src/components/User/CUserEditorMFA.vue
@@ -1,11 +1,10 @@
 <template>
   <b-card
-    class="shadow-sm"
     header-bg-variant="white"
-    footer-bg-variant="white"
+    class="shadow-sm"
   >
-    <b-row>
-      <b-col cols="8">
+    <div class="d-flex align-items-center flex-wrap">
+      <div>
         <span
           v-if="mfa.enforcedEmailOTP"
           v-html="$t('emailOTP.enabled.text')"
@@ -14,11 +13,8 @@
           v-else
           v-html="$t('emailOTP.disabled.text')"
         />
-      </b-col>
-      <b-col
-        cols="4"
-        class="text-right"
-      >
+      </div>
+      <div class="ml-auto">
         <b-button
           v-if="mfa.enforcedEmailOTP"
           @click="$emit('patch', '/meta/securityPolicy/mfa/enforcedEmailOTP', false)"
@@ -31,10 +27,11 @@
         >
           {{ $t('emailOTP.enable.label') }}
         </b-button>
-      </b-col>
-    </b-row>
-    <b-row class="mt-2 pt-2 border-top">
-      <b-col cols="8">
+      </div>
+    </div>
+
+    <div class="d-flex align-items-center justify-content-between flex-wrap mt-2 pt-2 border-top">
+      <div>
         <span
           v-if="mfa.enforcedTOTP"
           v-html="$t('TOTP.enabled.text')"
@@ -43,19 +40,16 @@
           v-else
           v-html="$t('TOTP.disabled.text')"
         />
-      </b-col>
-      <b-col
-        cols="4"
-        class="text-right"
-      >
+      </div>
+      <div class="ml-auto">
         <b-button
           :disabled="!mfa.enforcedTOTP"
           @click="$emit('patch', '/meta/securityPolicy/mfa/enforcedTOTP', false)"
         >
           {{ $t('TOTP.remove.label') }}
         </b-button>
-      </b-col>
-    </b-row>
+      </div>
+    </div>
     <template #header>
       <h3 class="m-0">
         {{ $t('title') }}
diff --git a/client/web/admin/src/components/User/CUserEditorPassword.vue b/client/web/admin/src/components/User/CUserEditorPassword.vue
index 74731fa4e..3dd228663 100644
--- a/client/web/admin/src/components/User/CUserEditorPassword.vue
+++ b/client/web/admin/src/components/User/CUserEditorPassword.vue
@@ -1,9 +1,10 @@
 <template>
   <b-card
     data-test-id="card-user-password"
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <b-form
       @submit.prevent="onPasswordSubmit"
@@ -63,28 +64,27 @@
     <template #footer>
       <confirmation-toggle
         data-test-id="button-remove-password"
-        class="ml-1"
         cta-class="light"
         @confirmed="$emit('submit')"
       >
         {{ $t('removePassword') }}
       </confirmation-toggle>
 
-      <c-button-submit
-        :disabled="!passwordState || !confirmPasswordState"
-        :processing="processing"
-        :success="success"
-        :text="$t('admin:general.label.submit')"
-        class="float-right"
-        @submit="onPasswordSubmit"
-      />
-
       <c-corredor-manual-buttons
         ui-page="user/editor"
         ui-slot="passwordFooter"
         default-variant="secondary"
         @click="dispatchCortezaSystemEvent($event)"
       />
+
+      <c-button-submit
+        :disabled="!passwordState || !confirmPasswordState"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="onPasswordSubmit"
+      />
     </template>
   </b-card>
 </template>
diff --git a/client/web/admin/src/components/User/CUserEditorRoles.vue b/client/web/admin/src/components/User/CUserEditorRoles.vue
index aabbc1c86..3b4f1c08e 100644
--- a/client/web/admin/src/components/User/CUserEditorRoles.vue
+++ b/client/web/admin/src/components/User/CUserEditorRoles.vue
@@ -1,9 +1,10 @@
 <template>
   <b-card
     data-test-id="card-role-membership"
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
     <b-form
       @submit.prevent="$emit('submit')"
@@ -22,7 +23,7 @@
         :processing="processing"
         :success="success"
         :text="$t('admin:general.label.submit')"
-        class="float-right"
+        class="ml-auto"
         @submit="$emit('submit')"
       />
     </template>
diff --git a/client/web/admin/src/components/User/CUserExportModal/index.vue b/client/web/admin/src/components/User/CUserExportModal/index.vue
index e70966150..772e8c31d 100644
--- a/client/web/admin/src/components/User/CUserExportModal/index.vue
+++ b/client/web/admin/src/components/User/CUserExportModal/index.vue
@@ -1,8 +1,10 @@
 <template>
-  <div>
+  <div class="d-flex">
     <b-button
       data-test-id="button-export"
       variant="light"
+      size="lg"
+      class="flex-fill"
       @click="showModal=true"
     >
       {{ $t('export.buttonLabel') }}
diff --git a/client/web/admin/src/components/User/CUserImportModal/index.vue b/client/web/admin/src/components/User/CUserImportModal/index.vue
index e1b327585..e34210ee7 100644
--- a/client/web/admin/src/components/User/CUserImportModal/index.vue
+++ b/client/web/admin/src/components/User/CUserImportModal/index.vue
@@ -1,8 +1,10 @@
 <template>
-  <div>
+  <div class="d-flex">
     <b-button
       data-test-id="button-import"
       variant="light"
+      size="lg"
+      class="flex-fill"
       @click="showModal=true"
     >
       {{ $t('import.buttonLabel') }}
diff --git a/client/web/admin/src/components/Workflow/CWorkflowEditorInfo.vue b/client/web/admin/src/components/Workflow/CWorkflowEditorInfo.vue
index 4a90214bc..e173ebaa1 100644
--- a/client/web/admin/src/components/Workflow/CWorkflowEditorInfo.vue
+++ b/client/web/admin/src/components/Workflow/CWorkflowEditorInfo.vue
@@ -1,10 +1,16 @@
 <template>
   <b-card
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
-    footer-class="d-flex flex-wrap gap-1"
+    footer-class="d-flex flex-wrap flex-fill-child gap-1"
+    class="shadow-sm"
   >
+    <template #header>
+      <h3 class="m-0">
+        {{ $t('title') }}
+      </h3>
+    </template>
+
     <b-form
       @submit.prevent="$emit('submit', workflow)"
     >
@@ -79,22 +85,7 @@
       >
     </b-form>
 
-    <template #header>
-      <h3 class="m-0">
-        {{ $t('title') }}
-      </h3>
-    </template>
-
     <template #footer>
-      <c-button-submit
-        :disabled="saveDisabled"
-        :processing="processing"
-        :success="success"
-        :text="$t('admin:general.label.submit')"
-        class="float-right"
-        @submit="$emit('submit', workflow)"
-      />
-
       <confirmation-toggle
         v-if="workflow && workflow.workflowID && workflow.canDeleteWorkflow"
         :disabled="deleteDisabled"
@@ -103,15 +94,22 @@
         {{ getDeleteStatus }}
       </confirmation-toggle>
 
-      <div v-if="workflow.workflowID">
-        <b-button
-          variant="light"
-          class="align-top"
-          @click="openWorkflowBuilder()"
-        >
-          {{ $t('openBuilder') }}
-        </b-button>
-      </div>
+      <b-button
+        v-if="workflow.workflowID"
+        variant="light"
+        @click="openWorkflowBuilder()"
+      >
+        {{ $t('openBuilder') }}
+      </b-button>
+
+      <c-button-submit
+        :disabled="saveDisabled"
+        :processing="processing"
+        :success="success"
+        :text="$t('admin:general.label.submit')"
+        class="ml-auto"
+        @submit="$emit('submit', workflow)"
+      />
     </template>
   </b-card>
 </template>
diff --git a/client/web/admin/src/components/Workflow/CWorkflowEditorTriggers.vue b/client/web/admin/src/components/Workflow/CWorkflowEditorTriggers.vue
index 716ea03e6..0f5a53ab4 100644
--- a/client/web/admin/src/components/Workflow/CWorkflowEditorTriggers.vue
+++ b/client/web/admin/src/components/Workflow/CWorkflowEditorTriggers.vue
@@ -1,8 +1,9 @@
 <template>
   <b-card
-    class="shadow-sm mt-3"
+    body-class="p-0"
     header-bg-variant="white"
     footer-bg-variant="white"
+    class="shadow-sm mt-3 overflow-hidden"
   >
     <b-table
       id="trigger-list"
diff --git a/client/web/admin/src/themes/corteza-base/custom.scss b/client/web/admin/src/themes/corteza-base/custom.scss
index 2daa45106..ef86690b7 100644
--- a/client/web/admin/src/themes/corteza-base/custom.scss
+++ b/client/web/admin/src/themes/corteza-base/custom.scss
@@ -62,14 +62,6 @@ th {
   white-space: nowrap;
 }
 
-.wrap-with-vertical-gutters {
-  margin-top: -0.25rem;
-
-  > * {
-    margin-top: 0.25rem;
-  }
-}
-
 // custom height for resource lists with buttons
 .custom-resource-list-height {
   height: calc(100vh - 120px);
@@ -203,6 +195,12 @@ fieldset.required {
   column-gap: 1.5rem;
 }
 
+@media (max-width: 576px) {
+  .flex-fill-child > * {
+    flex: 1 1 auto !important;
+  }
+}
+
 @keyframes ellipsis {
     0%   { content: ''; }
     25%  { content: '.'; }
diff --git a/client/web/admin/src/themes/corteza-base/rtl.scss b/client/web/admin/src/themes/corteza-base/rtl.scss
index 14c77dddf..f0ac5b66a 100644
--- a/client/web/admin/src/themes/corteza-base/rtl.scss
+++ b/client/web/admin/src/themes/corteza-base/rtl.scss
@@ -1,8 +1,3 @@
-[dir] {
-  margin: 0;
-  background-color: var(--body-bg);
-}
-
 [dir="rtl"] {
   text-align: right;
 
diff --git a/client/web/admin/src/views/Automation/Scripts/Index.vue b/client/web/admin/src/views/Automation/Scripts/Index.vue
index d7ebc3cb8..9a75a79d2 100644
--- a/client/web/admin/src/views/Automation/Scripts/Index.vue
+++ b/client/web/admin/src/views/Automation/Scripts/Index.vue
@@ -3,9 +3,7 @@
     fluid="xl"
     class="d-flex flex-column h-100 py-3"
   >
-    <c-content-header
-      :title="$t('title')"
-    />
+    <c-content-header :title="$t('title')" />
 
     <b-card
       no-body
@@ -31,6 +29,9 @@
                 />
               </b-form-group>
             </b-col>
+          </b-row>
+
+          <b-row>
             <b-col
               cols="12"
               lg="6"
@@ -47,9 +48,7 @@
                 />
               </b-form-group>
             </b-col>
-          </b-row>
 
-          <b-row>
             <b-col
               cols="12"
               lg="6"
@@ -66,6 +65,7 @@
                 />
               </b-form-group>
             </b-col>
+
             <b-col
               cols="12"
               lg="6"
@@ -82,9 +82,7 @@
                 />
               </b-form-group>
             </b-col>
-          </b-row>
 
-          <b-row>
             <b-col
               cols="12"
               lg="6"
@@ -101,6 +99,7 @@
                 />
               </b-form-group>
             </b-col>
+
             <b-col
               cols="12"
               lg="6"
diff --git a/client/web/admin/src/views/Automation/Session/List.vue b/client/web/admin/src/views/Automation/Session/List.vue
index a66045406..b7c663af0 100644
--- a/client/web/admin/src/views/Automation/Session/List.vue
+++ b/client/web/admin/src/views/Automation/Session/List.vue
@@ -3,9 +3,7 @@
     fluid="xl"
     class="d-flex flex-column h-100 py-3"
   >
-    <c-content-header
-      :title="$t('title')"
-    />
+    <c-content-header :title="$t('title')" />
 
     <c-resource-list
       :primary-key="primaryKey"
@@ -34,52 +32,45 @@
       @row-clicked="handleRowClicked"
     >
       <template #header>
-        <b-row>
-          <b-col
-            cols="12"
-            sm="5"
-          >
-            <b-form-group
-              :label="$t('columns.sessionID')"
-              label-class="text-primary"
-              class="mb-2"
-            >
-              <c-input-search
-                :value="filter.sessionID"
-                size="sm"
-                @input="filterBySessionID"
-              />
-            </b-form-group>
-          </b-col>
+        <b-form-group
+          :label="$t('columns.sessionID')"
+          label-class="text-primary"
+          class="mb-0"
+        >
+          <c-input-search
+            :value="filter.sessionID"
+            size="sm"
+            @input="filterBySessionID"
+          />
+        </b-form-group>
 
-          <b-col
-            cols="12"
-            sm="5"
-          >
-            <b-form-group
-              :label="$t('columns.workflowID')"
-              label-class="text-primary"
-            >
-              <c-input-search
-                :value="filter.workflowID"
-                size="sm"
-                @input="filterByWorkflowID"
-              />
-            </b-form-group>
-          </b-col>
-        </b-row>
+        <b-form-group
+          :label="$t('columns.workflowID')"
+          label-class="text-primary"
+          class="mb-0"
+        >
+          <c-input-search
+            :value="filter.workflowID"
+            size="sm"
+            @input="filterByWorkflowID"
+          />
+        </b-form-group>
+      </template>
 
-        <b-form-radio-group
-          v-model="filter.status"
-          :options="statusOptions"
-          buttons
-          button-variant="outline-primary"
-          size="sm"
-          @change="filterList"
-        />
-        <span class="ml-2 text-nowrap">
-          {{ $t('filterForm.sessions.label') }}
-        </span>
+      <template #toolbar>
+        <b-col>
+          <b-form-radio-group
+            v-model="filter.status"
+            :options="statusOptions"
+            buttons
+            button-variant="outline-primary"
+            size="sm"
+            @change="filterList"
+          />
+          <span class="ml-2 text-nowrap">
+            {{ $t('filterForm.sessions.label') }}
+          </span>
+        </b-col>
       </template>
 
       <template #sessionID="{ item }">
diff --git a/client/web/admin/src/views/Automation/Workflow/Editor.vue b/client/web/admin/src/views/Automation/Workflow/Editor.vue
index 8969cf956..b18b54099 100644
--- a/client/web/admin/src/views/Automation/Workflow/Editor.vue
+++ b/client/web/admin/src/views/Automation/Workflow/Editor.vue
@@ -19,7 +19,6 @@
         :title="workflow.meta.name || workflow.handle || workflowID"
         :target="workflow.meta.name || workflow.handle || workflowID"
         :resource="`corteza::automation:workflow/${workflowID}`"
-        button-variant="light"
       >
         <font-awesome-icon :icon="['fas', 'lock']" />
         {{ $t('permissions') }}
diff --git a/client/web/admin/src/views/Automation/Workflow/List.vue b/client/web/admin/src/views/Automation/Workflow/List.vue
index 91d7c7ffe..ee45230dc 100644
--- a/client/web/admin/src/views/Automation/Workflow/List.vue
+++ b/client/web/admin/src/views/Automation/Workflow/List.vue
@@ -2,43 +2,7 @@
   <b-container
     fluid="xl"
   >
-    <c-content-header
-      :title="$t('title')"
-    >
-      <span
-        class="text-nowrap"
-      >
-        <b-button
-          v-if="canCreate"
-          variant="primary"
-          :to="{ name: 'automation.workflow.new' }"
-        >
-          {{ $t('new') }}
-        </b-button>
-
-        <c-permissions-button
-          v-if="canGrant"
-          resource="corteza::automation:workflow/*"
-          button-variant="light"
-          class="ml-2"
-        >
-          <font-awesome-icon :icon="['fas', 'lock']" />
-          {{ $t('permissions') }}
-        </c-permissions-button>
-      </span>
-
-      <b-dropdown
-        v-if="false"
-        variant="link"
-        right
-        menu-class="shadow-sm"
-        :text="$t('export')"
-      >
-        <b-dropdown-item-button variant="link">
-          {{ $t('yaml') }}
-        </b-dropdown-item-button>
-      </b-dropdown>
-    </c-content-header>
+    <c-content-header :title="$t('title')" />
 
     <c-resource-list
       :primary-key="primaryKey"
@@ -67,6 +31,24 @@
       @row-clicked="handleRowClicked"
     >
       <template #header>
+        <b-button
+          v-if="canCreate"
+          variant="primary"
+          size="lg"
+          :to="{ name: 'automation.workflow.new' }"
+        >
+          {{ $t('new') }}
+        </b-button>
+
+        <c-permissions-button
+          v-if="canGrant"
+          resource="corteza::automation:workflow/*"
+          :button-label="$t('permissions')"
+          size="lg"
+        />
+      </template>
+
+      <template #toolbar>
         <c-resource-list-status-filter
           v-model="filter.deleted"
           :label="$t('filterForm.deleted.label')"
diff --git a/client/web/admin/src/views/Federation/Nodes/List.vue b/client/web/admin/src/views/Federation/Nodes/List.vue
index 8fdf4f4b7..32d823d2a 100644
--- a/client/web/admin/src/views/Federation/Nodes/List.vue
+++ b/client/web/admin/src/views/Federation/Nodes/List.vue
@@ -2,26 +2,7 @@
   <b-container
     fluid="xl"
   >
-    <c-content-header
-      :title="$t('title')"
-    >
-      <b-button
-        v-if="canCreate"
-        variant="primary"
-        class="mr-2"
-        :to="{ name: 'federation.nodes.new' }"
-      >
-        {{ $t('new') }}
-      </b-button>
-
-      <b-button
-        v-if="canCreate"
-        variant="light"
-        @click="openPairModal()"
-      >
-        {{ $t('pair.label') }}
-      </b-button>
-    </c-content-header>
+    <c-content-header :title="$t('title')" />
 
     <c-resource-list
       :primary-key="primaryKey"
@@ -47,6 +28,26 @@
       @row-clicked="handleRowClicked"
       @search="filterList"
     >
+      <template #header>
+        <b-button
+          v-if="canCreate"
+          variant="primary"
+          size="lg"
+          :to="{ name: 'federation.nodes.new' }"
+        >
+          {{ $t('new') }}
+        </b-button>
+
+        <b-button
+          v-if="canCreate"
+          variant="light"
+          size="lg"
+          @click="openPairModal()"
+        >
+          {{ $t('pair.label') }}
+        </b-button>
+      </template>
+
       <template #actions="{ item: n }">
         <b-dropdown
           v-if="n.nodeID === n.sharedNodeID && (n.status || '').toLowerCase() === 'pair_requested'"
diff --git a/client/web/admin/src/views/System/Actionlog/Index.vue b/client/web/admin/src/views/System/Actionlog/Index.vue
index 1c31d062a..16e921d05 100644
--- a/client/web/admin/src/views/System/Actionlog/Index.vue
+++ b/client/web/admin/src/views/System/Actionlog/Index.vue
@@ -12,10 +12,11 @@
       body-class="p-0"
       header-bg-variant="white"
       footer-bg-variant="white"
-      footer-class="d-flex align-items-center justify-content-center"
+      footer-class="d-flex flex-wrap flex-fill-child gap-1"
     >
       <template #header>
         <b-form
+          class="d-flex flex-column w-100"
           @submit.prevent="search"
         >
           <b-row>
@@ -109,13 +110,18 @@
               </b-form-group>
             </b-col>
           </b-row>
-          <b-button
-            data-test-id="button-submit"
-            type="submit"
-            class="text-primary"
-          >
-            {{ $t('filter.search') }}
-          </b-button>
+
+          <div class="d-flex flex-wrap flex-fill-child gap-1">
+            <b-button
+              data-test-id="button-submit"
+              type="submit"
+              :disabled="processing"
+              variant="primary"
+              class="ml-auto"
+            >
+              {{ $t('filter.search') }}
+            </b-button>
+          </div>
         </b-form>
       </template>
 
@@ -315,6 +321,7 @@
           v-if="items.length"
           data-test-id="button-load-older-actions"
           variant="light"
+          class="mx-auto"
           @click.stop="load()"
         >
           {{ $t('loadOlder') }}
@@ -325,7 +332,6 @@
 </template>
 
 <script>
-import { debounce } from 'lodash'
 import listHelpers from 'corteza-webapp-admin/src/mixins/listHelpers'
 import { components } from '@cortezaproject/corteza-vue'
 const { CInputDateTime } = components
@@ -439,7 +445,7 @@ export default {
       }
     },
 
-    load: debounce(function (reset = false) {
+    load (reset = false) {
       if (reset) {
         this.items.length = 0
         this.pagination.beforeActionID = undefined
@@ -471,7 +477,7 @@ export default {
         .finally(() => {
           this.processing = false
         })
-    }, 300),
+    },
 
     // Resets pagination & sorting and adds filtering params for drill-down
     drillDownLink (query = {}) {
diff --git a/client/web/admin/src/views/System/Apigw/Editor.vue b/client/web/admin/src/views/System/Apigw/Editor.vue
index e53a2fe36..9e454e94c 100644
--- a/client/web/admin/src/views/System/Apigw/Editor.vue
+++ b/client/web/admin/src/views/System/Apigw/Editor.vue
@@ -18,7 +18,6 @@
         :title="route.endpoint || routeID"
         :target="route.endpoint || routeID"
         :resource="`corteza::system:apigw-route/${routeID}`"
-        button-variant="light"
       >
         <font-awesome-icon :icon="['fas', 'lock']" />
         {{ $t("permissions") }}
diff --git a/client/web/admin/src/views/System/Apigw/Index.vue b/client/web/admin/src/views/System/Apigw/Index.vue
index f11c8a292..eb9f9191a 100644
--- a/client/web/admin/src/views/System/Apigw/Index.vue
+++ b/client/web/admin/src/views/System/Apigw/Index.vue
@@ -2,9 +2,7 @@
   <b-container
     class="py-3"
   >
-    <c-content-header
-      :title="$t('title')"
-    />
+    <c-content-header :title="$t('title')" />
 
     <div
       class="d-flex flex-column h-100"
diff --git a/client/web/admin/src/views/System/Apigw/Profiler/Index.vue b/client/web/admin/src/views/System/Apigw/Profiler/Index.vue
index 94cf9e174..a53e6e232 100644
--- a/client/web/admin/src/views/System/Apigw/Profiler/Index.vue
+++ b/client/web/admin/src/views/System/Apigw/Profiler/Index.vue
@@ -21,14 +21,13 @@
         </h3>
         <em>{{ description }}</em>
 
-        <div
-          class="d-flex align-items-center justify-content-between mt-2"
-        >
-          <div>
+        <div class="d-flex align-items-center flex-wrap flex-fill mt-2 gap-1">
+          <div class="flex-fill">
             <b-button
               data-test-id="button-refresh"
               variant="primary"
               :disabled="loading"
+              size="lg"
               @click="loadItems()"
             >
               {{ $t('general:label.refresh') }}
@@ -46,6 +45,9 @@
             :processing="processingPurgeRequests"
             :text="$t('purge.all')"
             variant="danger"
+            size="lg"
+            button-class="flex-fill"
+            class="d-flex justify-content-end ml-auto"
             @confirmed="purgeRequests"
           />
         </div>
diff --git a/client/web/admin/src/views/System/Application/Editor.vue b/client/web/admin/src/views/System/Application/Editor.vue
index 23d470de9..03e18b64a 100644
--- a/client/web/admin/src/views/System/Application/Editor.vue
+++ b/client/web/admin/src/views/System/Application/Editor.vue
@@ -20,7 +20,6 @@
         :title="application.name || applicationID"
         :target="application.name || applicationID"
         :resource="`corteza::system:application/${applicationID}`"
-        button-variant="light"
       >
         <font-awesome-icon :icon="['fas', 'lock']" />
         {{ $t('permissions') }}
diff --git a/client/web/admin/src/views/System/Application/List.vue b/client/web/admin/src/views/System/Application/List.vue
index 471bcf37e..55992096b 100644
--- a/client/web/admin/src/views/System/Application/List.vue
+++ b/client/web/admin/src/views/System/Application/List.vue
@@ -2,44 +2,7 @@
   <b-container
     fluid="xl"
   >
-    <c-content-header
-      :title="$t('title')"
-    >
-      <span
-        class="text-nowrap"
-      >
-        <b-button
-          v-if="canCreate"
-          data-test-id="button-new-application"
-          variant="primary"
-          class="mr-2"
-          :to="{ name: 'system.application.new' }"
-        >
-          {{ $t('new') }}
-        </b-button>
-
-        <c-permissions-button
-          v-if="canGrant"
-          resource="corteza::system:application/*"
-          button-variant="light"
-        >
-          <font-awesome-icon :icon="['fas', 'lock']" />
-          {{ $t('permissions') }}
-        </c-permissions-button>
-      </span>
-
-      <b-dropdown
-        v-if="false"
-        variant="link"
-        right
-        menu-class="shadow-sm"
-        :text="$t('export')"
-      >
-        <b-dropdown-item-button variant="link">
-          {{ $t('yaml') }}
-        </b-dropdown-item-button>
-      </b-dropdown>
-    </c-content-header>
+    <c-content-header :title="$t('title')" />
 
     <c-resource-list
       :primary-key="primaryKey"
@@ -68,6 +31,25 @@
       @row-clicked="handleRowClicked"
     >
       <template #header>
+        <b-button
+          v-if="canCreate"
+          data-test-id="button-new-application"
+          variant="primary"
+          size="lg"
+          :to="{ name: 'system.application.new' }"
+        >
+          {{ $t('new') }}
+        </b-button>
+
+        <c-permissions-button
+          v-if="canGrant"
+          resource="corteza::system:application/*"
+          :button-label="$t('permissions')"
+          size="lg"
+        />
+      </template>
+
+      <template #toolbar>
         <c-resource-list-status-filter
           v-model="filter.deleted"
           data-test-id="filter-deleted-apps"
diff --git a/client/web/admin/src/views/System/AuthClient/Editor.vue b/client/web/admin/src/views/System/AuthClient/Editor.vue
index d77ac93b1..c44a2b921 100644
--- a/client/web/admin/src/views/System/AuthClient/Editor.vue
+++ b/client/web/admin/src/views/System/AuthClient/Editor.vue
@@ -19,7 +19,6 @@
         :title="authclient.meta.name || authclient.handle || authClientID"
         :target="authclient.meta.name || authclient.handle || authClientID"
         :resource="`corteza::system:auth-client/${authClientID}`"
-        button-variant="light"
       >
         <font-awesome-icon :icon="['fas', 'lock']" />
         {{ $t('permissions') }}
diff --git a/client/web/admin/src/views/System/AuthClient/List.vue b/client/web/admin/src/views/System/AuthClient/List.vue
index 7d842d5dd..94e1cdcb5 100644
--- a/client/web/admin/src/views/System/AuthClient/List.vue
+++ b/client/web/admin/src/views/System/AuthClient/List.vue
@@ -2,32 +2,7 @@
   <b-container
     fluid="xl"
   >
-    <c-content-header
-      :title="$t('title')"
-    >
-      <span
-        class="text-nowrap"
-      >
-        <b-button
-          v-if="canCreate"
-          data-test-id="button-new-auth-client"
-          variant="primary"
-          class="mr-2"
-          :to="{ name: 'system.authClient.new' }"
-        >
-          {{ $t('new') }}
-        </b-button>
-
-        <c-permissions-button
-          v-if="canGrant"
-          resource="corteza::system:auth-client/*"
-          button-variant="light"
-        >
-          <font-awesome-icon :icon="['fas', 'lock']" />
-          {{ $t('permissions') }}
-        </c-permissions-button>
-      </span>
-    </c-content-header>
+    <c-content-header :title="$t('title')" />
 
     <c-resource-list
       :primary-key="primaryKey"
@@ -57,6 +32,25 @@
       @row-clicked="handleRowClicked"
     >
       <template #header>
+        <b-button
+          v-if="canCreate"
+          data-test-id="button-new-auth-client"
+          variant="primary"
+          size="lg"
+          :to="{ name: 'system.authClient.new' }"
+        >
+          {{ $t('new') }}
+        </b-button>
+
+        <c-permissions-button
+          v-if="canGrant"
+          resource="corteza::system:auth-client/*"
+          :button-label="$t('permissions')"
+          size="lg"
+        />
+      </template>
+
+      <template #toolbar>
         <c-resource-list-status-filter
           v-model="filter.deleted"
           data-test-id="filter-deleted-auth-clients"
diff --git a/client/web/admin/src/views/System/Connection/Editor.vue b/client/web/admin/src/views/System/Connection/Editor.vue
index 85504a583..954f19774 100644
--- a/client/web/admin/src/views/System/Connection/Editor.vue
+++ b/client/web/admin/src/views/System/Connection/Editor.vue
@@ -31,18 +31,10 @@
         :can-manage="connection.canManageDalConfig"
         class="mt-4"
       />
-      <!--
-        include hidden input to enable
-        trigger submit event w/ ENTER
-      -->
-      <input
-        type="submit"
-        class="d-none"
-        :disabled="saveDisabled"
-      >
 
-      <div
-        class="d-flex mt-2"
+      <b-card
+        body-class="d-flex flex-wrap flex-fill-child gap-1"
+        class="mt-4"
       >
         <confirmation-toggle
           v-if="connection && connectionID && !isPrimary && !disabled"
@@ -59,7 +51,7 @@
           class="ml-auto"
           @submit="onSubmit"
         />
-      </div>
+      </b-card>
     </b-form>
   </b-container>
 </template>
diff --git a/client/web/admin/src/views/System/Queue/List.vue b/client/web/admin/src/views/System/Queue/List.vue
index 025ce80bd..92a7915a7 100644
--- a/client/web/admin/src/views/System/Queue/List.vue
+++ b/client/web/admin/src/views/System/Queue/List.vue
@@ -2,35 +2,7 @@
   <b-container
     fluid="xl"
   >
-    <c-content-header
-      :title="$t('title')"
-    >
-      <span
-        class="text-nowrap"
-      >
-        <b-button
-          v-if="canCreate"
-          data-test-id="button-add"
-          variant="primary"
-          class="mr-2"
-          :to="{ name: 'system.queue.new' }"
-        >
-          {{ $t('new') }}
-        </b-button>
-      </span>
-
-      <b-dropdown
-        v-if="false"
-        variant="link"
-        right
-        menu-class="shadow-sm"
-        :text="$t('export')"
-      >
-        <b-dropdown-item-button variant="link">
-          {{ $t('yaml') }}
-        </b-dropdown-item-button>
-      </b-dropdown>
-    </c-content-header>
+    <c-content-header :title="$t('title')" />
 
     <c-resource-list
       :primary-key="primaryKey"
@@ -59,6 +31,18 @@
       @row-clicked="handleRowClicked"
     >
       <template #header>
+        <b-button
+          v-if="canCreate"
+          data-test-id="button-add"
+          variant="primary"
+          size="lg"
+          :to="{ name: 'system.queue.new' }"
+        >
+          {{ $t('new') }}
+        </b-button>
+      </template>
+
+      <template #toolbar>
         <c-resource-list-status-filter
           v-model="filter.deleted"
           data-test-id="filter-deleted-queues"
diff --git a/client/web/admin/src/views/System/Role/Editor.vue b/client/web/admin/src/views/System/Role/Editor.vue
index ac2475a83..29bb411f5 100644
--- a/client/web/admin/src/views/System/Role/Editor.vue
+++ b/client/web/admin/src/views/System/Role/Editor.vue
@@ -19,7 +19,6 @@
         :title="role.name || role.handle || role.roleID"
         :target="role.name || role.handle || role.roleID"
         :resource="`corteza::system:role/${roleID}`"
-        button-variant="light"
       >
         <font-awesome-icon :icon="['fas', 'lock']" />
         {{ $t('permissions') }}
diff --git a/client/web/admin/src/views/System/Role/List.vue b/client/web/admin/src/views/System/Role/List.vue
index 58584d494..0137360f4 100644
--- a/client/web/admin/src/views/System/Role/List.vue
+++ b/client/web/admin/src/views/System/Role/List.vue
@@ -2,53 +2,7 @@
   <b-container
     fluid="xl"
   >
-    <c-content-header
-      :title="$t('title')"
-    >
-      <span
-        class="text-nowrap"
-      >
-        <b-button
-          v-if="canCreate"
-          data-test-id="button-new-role"
-          variant="primary"
-          class="mr-2"
-          :to="{ name: 'system.role.new' }"
-        >
-          {{ $t('new') }}
-        </b-button>
-
-        <c-permissions-button
-          v-if="canGrant"
-          resource="corteza::system:role/*"
-          button-variant="light"
-        >
-          <font-awesome-icon :icon="['fas', 'lock']" />
-          {{ $t('permissions') }}
-        </c-permissions-button>
-      </span>
-
-      <b-dropdown
-        v-if="false"
-        variant="link"
-        right
-        menu-class="shadow-sm"
-        :text="$t('export')"
-      >
-        <b-dropdown-item-button variant="link">
-          {{ $t('yaml') }}
-        </b-dropdown-item-button>
-      </b-dropdown>
-
-      <c-corredor-manual-buttons
-        ui-page="role/list"
-        ui-slot="toolbar"
-        resource-type="system"
-        default-variant="link"
-        class="mr-1"
-        @click="dispatchCortezaSystemEvent($event)"
-      />
-    </c-content-header>
+    <c-content-header :title="$t('title')" />
 
     <c-resource-list
       :primary-key="primaryKey"
@@ -77,6 +31,34 @@
       @row-clicked="handleRowClicked"
     >
       <template #header>
+        <b-button
+          v-if="canCreate"
+          data-test-id="button-new-role"
+          variant="primary"
+          size="lg"
+          :to="{ name: 'system.role.new' }"
+        >
+          {{ $t('new') }}
+        </b-button>
+
+        <c-permissions-button
+          v-if="canGrant"
+          resource="corteza::system:role/*"
+          :button-label="$t('permissions')"
+          size="lg"
+        />
+
+        <c-corredor-manual-buttons
+          ui-page="role/list"
+          ui-slot="toolbar"
+          resource-type="system"
+          default-variant="link"
+          size="lg"
+          @click="dispatchCortezaSystemEvent($event)"
+        />
+      </template>
+
+      <template #toolbar>
         <c-resource-list-status-filter
           v-model="filter.deleted"
           data-test-id="filter-deleted-roles"
@@ -96,6 +78,8 @@
           :exclusive-label="$t('filterForm.exclusive.label')"
           @change="filterList"
         />
+
+        <b-col />
       </template>
 
       <template #actions="{ item: r }">
diff --git a/client/web/admin/src/views/System/SensitivityLevel/List.vue b/client/web/admin/src/views/System/SensitivityLevel/List.vue
index 89248b032..848a24acc 100644
--- a/client/web/admin/src/views/System/SensitivityLevel/List.vue
+++ b/client/web/admin/src/views/System/SensitivityLevel/List.vue
@@ -2,23 +2,7 @@
   <b-container
     fluid="xl"
   >
-    <c-content-header
-      :title="$t('title')"
-    >
-      <span
-        class="text-nowrap"
-      >
-        <b-button
-          v-if="canCreate"
-          data-test-id="button-new-sens-lvl"
-          variant="primary"
-          class="mr-2"
-          :to="{ name: 'system.sensitivityLevel.new' }"
-        >
-          {{ $t('new') }}
-        </b-button>
-      </span>
-    </c-content-header>
+    <c-content-header :title="$t('title')" />
 
     <c-resource-list
       :primary-key="primaryKey"
@@ -46,6 +30,18 @@
       @row-clicked="handleRowClicked"
     >
       <template #header>
+        <b-button
+          v-if="canCreate"
+          data-test-id="button-new-sens-lvl"
+          variant="primary"
+          size="lg"
+          :to="{ name: 'system.sensitivityLevel.new' }"
+        >
+          {{ $t('new') }}
+        </b-button>
+      </template>
+
+      <template #toolbar>
         <c-resource-list-status-filter
           v-model="filter.deleted"
           :label="$t('filterForm.deleted.label')"
diff --git a/client/web/admin/src/views/System/Template/Editor.vue b/client/web/admin/src/views/System/Template/Editor.vue
index 00cd6a671..c1cf79a8f 100644
--- a/client/web/admin/src/views/System/Template/Editor.vue
+++ b/client/web/admin/src/views/System/Template/Editor.vue
@@ -20,7 +20,6 @@
         :title="template.meta.short || template.handle || template.templateID"
         :target="template.meta.short || template.handle || template.templateID"
         :resource="`corteza::system:template/${templateID}`"
-        button-variant="light"
       >
         <font-awesome-icon :icon="['fas', 'lock']" />
         {{ $t('permissions') }}
diff --git a/client/web/admin/src/views/System/Template/List.vue b/client/web/admin/src/views/System/Template/List.vue
index 838645785..ca60dbe56 100644
--- a/client/web/admin/src/views/System/Template/List.vue
+++ b/client/web/admin/src/views/System/Template/List.vue
@@ -2,53 +2,7 @@
   <b-container
     fluid="xl"
   >
-    <c-content-header
-      :title="$t('title')"
-    >
-      <span
-        class="text-nowrap"
-      >
-        <b-button
-          v-if="canCreate"
-          data-test-id="button-new-template"
-          variant="primary"
-          class="mr-2"
-          :to="{ name: 'system.template.new' }"
-        >
-          {{ $t('new') }}
-        </b-button>
-
-        <c-permissions-button
-          v-if="canGrant"
-          resource="corteza::system:template/*"
-          button-variant="light"
-        >
-          <font-awesome-icon :icon="['fas', 'lock']" />
-          {{ $t('permissions') }}
-        </c-permissions-button>
-      </span>
-
-      <b-dropdown
-        v-if="false"
-        variant="link"
-        right
-        menu-class="shadow-sm"
-        :text="$t('export')"
-      >
-        <b-dropdown-item-button variant="link">
-          {{ $t('yaml') }}
-        </b-dropdown-item-button>
-      </b-dropdown>
-
-      <c-corredor-manual-buttons
-        ui-page="template/list"
-        ui-slot="toolbar"
-        resource-type="system"
-        default-variant="link"
-        class="mr-1"
-        @click="dispatchCortezaSystemEvent($event)"
-      />
-    </c-content-header>
+    <c-content-header :title="$t('title')" />
 
     <c-resource-list
       :primary-key="primaryKey"
@@ -77,6 +31,34 @@
       @row-clicked="handleRowClicked"
     >
       <template #header>
+        <b-button
+          v-if="canCreate"
+          data-test-id="button-new-template"
+          variant="primary"
+          size="lg"
+          :to="{ name: 'system.template.new' }"
+        >
+          {{ $t('new') }}
+        </b-button>
+
+        <c-permissions-button
+          v-if="canGrant"
+          resource="corteza::system:template/*"
+          :button-label="$t('permissions')"
+          size="lg"
+        />
+
+        <c-corredor-manual-buttons
+          ui-page="template/list"
+          ui-slot="toolbar"
+          resource-type="system"
+          default-variant="link"
+          size="lg"
+          @click="dispatchCortezaSystemEvent($event)"
+        />
+      </template>
+
+      <template #toolbar>
         <c-resource-list-status-filter
           v-model="filter.deleted"
           data-test-id="filter-deleted-template"
diff --git a/client/web/admin/src/views/System/User/Editor.vue b/client/web/admin/src/views/System/User/Editor.vue
index 5165eb5f8..5d3bb29c4 100644
--- a/client/web/admin/src/views/System/User/Editor.vue
+++ b/client/web/admin/src/views/System/User/Editor.vue
@@ -20,7 +20,6 @@
         :title="user.name || user.handle || user.email || userID"
         :target="user.name || user.handle || user.email || userID"
         :resource="`corteza::system:user/${userID}`"
-        button-variant="light"
       >
         <font-awesome-icon :icon="['fas', 'lock']" />
         {{ $t('permissions') }}
diff --git a/client/web/admin/src/views/System/User/List.vue b/client/web/admin/src/views/System/User/List.vue
index daf933e6a..b313f1061 100644
--- a/client/web/admin/src/views/System/User/List.vue
+++ b/client/web/admin/src/views/System/User/List.vue
@@ -2,61 +2,7 @@
   <b-container
     fluid="xl"
   >
-    <c-content-header
-      :title="$t('title')"
-    >
-      <span
-        class="text-nowrap"
-      >
-        <b-button
-          variant="primary"
-          data-test-id="button-new-user"
-          class="mr-2 float-left"
-          :to="{ name: 'system.user.new' }"
-        >
-          {{ $t('new') }}
-        </b-button>
-
-        <c-user-import-modal
-          class="mr-1 float-left"
-          @imported="onImported"
-        />
-
-        <c-user-export-modal
-          class="mr-1 float-left"
-          @export="onExport"
-        />
-
-        <c-permissions-button
-          v-if="canGrant"
-          resource="corteza::system:user/*"
-          button-variant="light"
-        >
-          <font-awesome-icon :icon="['fas', 'lock']" />
-          {{ $t('permissions') }}
-        </c-permissions-button>
-      </span>
-
-      <b-dropdown
-        v-if="false"
-        variant="link"
-        right
-        menu-class="shadow-sm"
-        :text="$t('export')"
-      >
-        <b-dropdown-item-button variant="link">
-          {{ $t('yaml') }}
-        </b-dropdown-item-button>
-      </b-dropdown>
-
-      <c-corredor-manual-buttons
-        ui-page="user/list"
-        ui-slot="toolbar"
-        resource-type="system"
-        class="mr-1"
-        @click="dispatchCortezaSystemEvent($event)"
-      />
-    </c-content-header>
+    <c-content-header :title="$t('title')" />
 
     <c-resource-list
       :primary-key="primaryKey"
@@ -85,6 +31,40 @@
       @row-clicked="handleRowClicked"
     >
       <template #header>
+        <b-button
+          variant="primary"
+          size="lg"
+          data-test-id="button-new-user"
+          :to="{ name: 'system.user.new' }"
+        >
+          {{ $t('new') }}
+        </b-button>
+
+        <c-user-import-modal
+          @imported="onImported"
+        />
+
+        <c-user-export-modal
+          @export="onExport"
+        />
+
+        <c-permissions-button
+          v-if="canGrant"
+          resource="corteza::system:user/*"
+          :button-label="$t('permissions')"
+          size="lg"
+        />
+
+        <c-corredor-manual-buttons
+          ui-page="user/list"
+          ui-slot="toolbar"
+          resource-type="system"
+          size="lg"
+          @click="dispatchCortezaSystemEvent($event)"
+        />
+      </template>
+
+      <template #toolbar>
         <c-resource-list-status-filter
           v-model="filter.deleted"
           data-test-id="filter-deleted-users"
@@ -94,6 +74,7 @@
           :exclusive-label="$t('filterForm.exclusive.label')"
           @change="filterList"
         />
+
         <c-resource-list-status-filter
           v-model="filter.suspended"
           data-test-id="filter-suspended-users"
@@ -103,6 +84,8 @@
           :exclusive-label="$t('filterForm.exclusive.label')"
           @change="filterList"
         />
+
+        <b-col />
       </template>
 
       <template #actions="{ item: u }">
diff --git a/client/web/admin/src/views/UI/Index.vue b/client/web/admin/src/views/UI/Index.vue
index 9494b7bab..f26aa607b 100644
--- a/client/web/admin/src/views/UI/Index.vue
+++ b/client/web/admin/src/views/UI/Index.vue
@@ -16,7 +16,6 @@
       :processing="branding.processing"
       :success="branding.success"
       :can-manage="canManage"
-      class="mt-3"
       @submit="onSubmit($event, 'branding')"
     />
 
diff --git a/client/web/compose/src/components/Admin/EditorToolbar.vue b/client/web/compose/src/components/Admin/EditorToolbar.vue
index ef7133c00..d0b9e722c 100644
--- a/client/web/compose/src/components/Admin/EditorToolbar.vue
+++ b/client/web/compose/src/components/Admin/EditorToolbar.vue
@@ -37,7 +37,6 @@
         variant="danger"
         :title="deleteTooltip"
         :borderless="false"
-        class="d-flex flex-column"
         @confirmed="$emit('delete')"
       />
 
diff --git a/client/web/compose/src/components/Admin/Import.vue b/client/web/compose/src/components/Admin/Import.vue
index 4744abcf7..2c8c05a35 100644
--- a/client/web/compose/src/components/Admin/Import.vue
+++ b/client/web/compose/src/components/Admin/Import.vue
@@ -1,9 +1,9 @@
 <template>
-  <div>
+  <div class="d-flex">
     <b-btn
       variant="light"
       size="lg"
-      class="w-100"
+      class="flex-fill"
       @click="showModal=true"
     >
       {{ $t('label.import') }}
diff --git a/client/web/compose/src/components/Admin/Module/FieldBoolTranslator.vue b/client/web/compose/src/components/Admin/Module/FieldBoolTranslator.vue
index af314616b..b9a027956 100644
--- a/client/web/compose/src/components/Admin/Module/FieldBoolTranslator.vue
+++ b/client/web/compose/src/components/Admin/Module/FieldBoolTranslator.vue
@@ -1,7 +1,6 @@
 <template>
   <c-translator-button
     v-if="canManageResourceTranslations && resourceTranslationsEnabled"
-    button-variant="light"
     v-bind="$props"
     :size="size"
     :title="$t('tooltip')"
diff --git a/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue b/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
index 28581a1dc..e65827871 100644
--- a/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
+++ b/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
@@ -34,7 +34,6 @@
             :module="module"
             :disabled="isNew"
             highlight-key="label"
-            button-variant="light"
           />
         </b-input-group-append>
       </b-input-group>
diff --git a/client/web/compose/src/components/Admin/Module/FieldSelectTranslator.vue b/client/web/compose/src/components/Admin/Module/FieldSelectTranslator.vue
index b52b0c1a3..d683c593d 100644
--- a/client/web/compose/src/components/Admin/Module/FieldSelectTranslator.vue
+++ b/client/web/compose/src/components/Admin/Module/FieldSelectTranslator.vue
@@ -1,7 +1,6 @@
 <template>
   <c-translator-button
     v-if="canManageResourceTranslations && resourceTranslationsEnabled"
-    button-variant="light"
     v-bind="$props"
     :title="$t('tooltip')"
     :size="size"
diff --git a/client/web/compose/src/components/Admin/Module/FieldTranslator.vue b/client/web/compose/src/components/Admin/Module/FieldTranslator.vue
index 87e55f4fc..0d3722098 100644
--- a/client/web/compose/src/components/Admin/Module/FieldTranslator.vue
+++ b/client/web/compose/src/components/Admin/Module/FieldTranslator.vue
@@ -2,7 +2,6 @@
   <c-translator-button
     v-if="canManageResourceTranslations && resourceTranslationsEnabled"
     v-bind="$props"
-    button-variant="light"
     :title="$t('tooltip')"
     :size="size"
     :resource="resource"
diff --git a/client/web/compose/src/components/Admin/Module/Records/ColumnPicker.vue b/client/web/compose/src/components/Admin/Module/Records/ColumnPicker.vue
index a00ca8a36..3c15df806 100644
--- a/client/web/compose/src/components/Admin/Module/Records/ColumnPicker.vue
+++ b/client/web/compose/src/components/Admin/Module/Records/ColumnPicker.vue
@@ -1,12 +1,14 @@
 <template>
-  <div>
+  <div class="d-flex">
     <b-button
       v-b-modal.columns
       size="lg"
       variant="light"
+      class="flex-fill"
     >
       {{ $t('allRecords.columns.title') }}
     </b-button>
+
     <b-modal
       id="columns"
       size="lg"
diff --git a/client/web/compose/src/components/Admin/Module/RelatedPages.vue b/client/web/compose/src/components/Admin/Module/RelatedPages.vue
index a441c7b78..8f9a2f10a 100644
--- a/client/web/compose/src/components/Admin/Module/RelatedPages.vue
+++ b/client/web/compose/src/components/Admin/Module/RelatedPages.vue
@@ -1,14 +1,12 @@
 <template>
-  <div
-    class="d-inline-block"
-  >
+  <div>
     <b-dropdown
       v-if="recordPage"
       :size="size"
       variant="primary"
       :text="$t('related-pages')"
       :boundary="boundary"
-      class="related-pages-dropdown"
+      class="related-pages-dropdown flex-fill"
     >
       <b-dropdown-item>
         <b-button
diff --git a/client/web/compose/src/components/Admin/Module/UniqueValues.vue b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
index a6b67448c..24ce72a68 100644
--- a/client/web/compose/src/components/Admin/Module/UniqueValues.vue
+++ b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
@@ -63,7 +63,7 @@
       <div
         v-if="rule.constraints && rule.constraints.length > 0"
         class="rounded border border-light p-3"
-        style="background-color: #F9FAFB;"
+        style="background-color: var(--gray-200);"
       >
         <b-table-simple
           borderless
diff --git a/client/web/compose/src/components/Chart/Report/GaugeChart.vue b/client/web/compose/src/components/Chart/Report/GaugeChart.vue
index 5c9394df9..4a0439f30 100644
--- a/client/web/compose/src/components/Chart/Report/GaugeChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GaugeChart.vue
@@ -28,7 +28,6 @@
               :chart="chart"
               :disabled="isNew"
               :highlight-key="`dimensions.${dimension.dimensionID}.meta.steps.${step.stepID}.label`"
-              button-variant="light"
             />
           </b-input-group-append>
 
diff --git a/client/web/compose/src/components/Chart/Report/GenericChart.vue b/client/web/compose/src/components/Chart/Report/GenericChart.vue
index 1480a3d20..f4e1f6cf0 100644
--- a/client/web/compose/src/components/Chart/Report/GenericChart.vue
+++ b/client/web/compose/src/components/Chart/Report/GenericChart.vue
@@ -60,7 +60,6 @@
                     :chart="chart"
                     :disabled="isNew"
                     highlight-key="yAxis.label"
-                    button-variant="light"
                   />
                 </b-input-group-append>
               </b-input-group>
@@ -190,7 +189,6 @@
                   :chart="chart"
                   :disabled="isNew"
                   :highlight-key="`metrics.${metric.metricID}.label`"
-                  button-variant="light"
                 />
               </b-input-group-append>
             </b-input-group>
diff --git a/client/web/compose/src/components/Chart/Report/RadarChart.vue b/client/web/compose/src/components/Chart/Report/RadarChart.vue
index f64f9d324..f3b5ff097 100644
--- a/client/web/compose/src/components/Chart/Report/RadarChart.vue
+++ b/client/web/compose/src/components/Chart/Report/RadarChart.vue
@@ -23,7 +23,6 @@
                   :chart="chart"
                   :disabled="isNew"
                   :highlight-key="`metrics.${metric.metricID}.label`"
-                  button-variant="light"
                 />
               </b-input-group-append>
             </b-input-group>
diff --git a/client/web/compose/src/components/Common/Grid.vue b/client/web/compose/src/components/Common/Grid.vue
index 5c8ab7f6d..9f4960741 100644
--- a/client/web/compose/src/components/Common/Grid.vue
+++ b/client/web/compose/src/components/Common/Grid.vue
@@ -166,12 +166,3 @@ export default {
   },
 }
 </script>
-
-<style lang="scss">
-.editable {
-  .grid-item {
-    background-image: linear-gradient(45deg, var(--gray-200) 25%, var(--white) 25%, var(--white) 50%, var(--gray-200) 50%, var(--gray-200) 75%, var(--white) 75%, var(--white) 100%);
-    background-size: 28.28px 28.28px;
-  }
-}
-</style>
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/Bool.vue b/client/web/compose/src/components/ModuleFields/Configurator/Bool.vue
index 97dac7f4d..9142bac8c 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/Bool.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/Bool.vue
@@ -18,7 +18,6 @@
             :highlight-key="`meta.bool.true.label`"
             size="sm"
             :disabled="isNew"
-            button-variant="light"
           />
         </b-input-group-append>
       </b-input-group>
@@ -42,7 +41,6 @@
             :highlight-key="`meta.bool.fals.label`"
             size="sm"
             :disabled="isNew"
-            button-variant="light"
           />
         </b-input-group-append>
       </b-input-group>
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/Select.vue b/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
index c308d24d3..065a8b003 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/Select.vue
@@ -75,7 +75,6 @@
                       :highlight-key="`meta.options.${option.value}.text`"
                       size="sm"
                       :disabled="isNew || option.new"
-                      button-variant="light"
                     />
                   </b-input-group-append>
                 </b-input-group>
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/basic.vue b/client/web/compose/src/components/ModuleFields/Configurator/basic.vue
index 0c1950f18..c2791b936 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/basic.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/basic.vue
@@ -95,7 +95,6 @@
             :module="module"
             :disabled="isNew"
             :highlight-key="`meta.description.view`"
-            button-variant="light"
           />
         </b-input-group-append>
       </b-input-group>
@@ -119,7 +118,6 @@
             :module="module"
             :disabled="isNew"
             :highlight-key="`meta.description.edit`"
-            button-variant="light"
           />
         </b-input-group-append>
       </b-input-group>
@@ -152,7 +150,6 @@
             :module="module"
             :disabled="isNew"
             :highlight-key="`meta.hint.view`"
-            button-variant="light"
           />
         </b-input-group-append>
       </b-input-group>
@@ -176,7 +173,6 @@
             :module="module"
             :disabled="isNew"
             :highlight-key="`meta.hint.edit`"
-            button-variant="light"
           />
         </b-input-group-append>
       </b-input-group>
diff --git a/client/web/compose/src/components/ModuleFields/Configurator/validation.vue b/client/web/compose/src/components/ModuleFields/Configurator/validation.vue
index 9cbb32cff..b0aef21c2 100644
--- a/client/web/compose/src/components/ModuleFields/Configurator/validation.vue
+++ b/client/web/compose/src/components/ModuleFields/Configurator/validation.vue
@@ -91,7 +91,6 @@
             :module="module"
             :highlight-key="`expression.validator.${value.validatorID}.error`"
             :disabled="isNew(value)"
-            button-variant="light"
           />
         </b-input-group-append>
       </field-expressions>
diff --git a/client/web/compose/src/components/Namespaces/Importer/index.vue b/client/web/compose/src/components/Namespaces/Importer/index.vue
index 3edf417f6..3e2d90da9 100644
--- a/client/web/compose/src/components/Namespaces/Importer/index.vue
+++ b/client/web/compose/src/components/Namespaces/Importer/index.vue
@@ -1,9 +1,10 @@
 <template>
-  <div>
+  <div class="d-flex">
     <b-button
       data-test-id="button-import"
       size="lg"
       variant="light"
+      class="flex-fill"
       @click="showModal=true"
     >
       {{ $t('import.buttonLabel') }}
diff --git a/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue b/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue
index a03957238..88223b234 100644
--- a/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue
+++ b/client/web/compose/src/components/Namespaces/NamespaceSidebar.vue
@@ -17,6 +17,7 @@
           :placeholder="$t('pickNamespace')"
           :calculate-position="calculateDropdownPosition"
           :autoscroll="false"
+          class="bg-white"
           @option:selected="namespaceSelected"
         >
           <template #list-header>
diff --git a/client/web/compose/src/components/PageBlocks/Configurator.vue b/client/web/compose/src/components/PageBlocks/Configurator.vue
index edcba084c..fa3b90d8e 100644
--- a/client/web/compose/src/components/PageBlocks/Configurator.vue
+++ b/client/web/compose/src/components/PageBlocks/Configurator.vue
@@ -32,7 +32,6 @@
                   :block.sync="block"
                   :disabled="isNew"
                   :highlight-key="`pageBlock.${block.blockID}.title`"
-                  button-variant="light"
                 />
               </b-input-group-append>
             </b-input-group>
@@ -59,7 +58,6 @@
                   :block.sync="block"
                   :disabled="isNew"
                   :highlight-key="`pageBlock.${block.blockID}.description`"
-                  button-variant="light"
                 />
               </b-input-group-append>
             </b-input-group>
diff --git a/client/web/compose/src/components/PageBlocks/RecordListBase.vue b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
index 2d10f0383..387ea654a 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListBase.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListBase.vue
@@ -21,120 +21,112 @@
     <template #toolbar>
       <b-container
         ref="toolbar"
-        class="py-2 d-print-none"
         fluid
+        class="d-flex flex-column gap-1 py-2 d-print-none"
       >
         <b-row
           no-gutters
-          class="justify-content-between wrap-with-vertical-gutters"
+          class="d-flex align-items-center justify-content-between gap-1"
         >
-          <div class="text-nowrap flex-grow-1">
-            <div
-              class="d-flex align-items-center flex-wrap wrap-with-vertical-gutters"
-            >
-              <template v-if="recordListModule.canCreateRecord">
-                <template v-if="inlineEditing">
-                  <b-button
-                    v-if="!options.hideAddButton"
-                    data-test-id="button-add-record"
-                    variant="primary"
-                    size="lg"
-                    class="mr-1"
-                    @click="addInlineRecord()"
-                  >
-                    + {{ $t('recordList.addRecord') }}
-                  </b-button>
-                </template>
-
-                <template v-else-if="!inlineEditing && (recordPageID || options.allRecords)">
-                  <b-button
-                    v-if="!options.hideAddButton"
-                    data-test-id="button-add-record"
-                    variant="primary"
-                    size="lg"
-                    class="mr-1"
-                    @click="handleAddRecord()"
-                  >
-                    + {{ $t('recordList.addRecord') }}
-                  </b-button>
-
-                  <importer-modal
-                    v-if="!options.hideImportButton"
-                    :module="recordListModule"
-                    :namespace="namespace"
-                    class="mr-1"
-                    @importSuccessful="onImportSuccessful"
-                  />
-                </template>
+          <div class="d-flex align-items-center flex-grow-1 flex-wrap flex-fill-child gap-1">
+            <template v-if="recordListModule.canCreateRecord">
+              <template v-if="inlineEditing">
+                <b-button
+                  v-if="!options.hideAddButton"
+                  data-test-id="button-add-record"
+                  variant="primary"
+                  size="lg"
+                  @click="addInlineRecord()"
+                >
+                  + {{ $t('recordList.addRecord') }}
+                </b-button>
               </template>
 
-              <exporter-modal
-                v-if="options.allowExport && !inlineEditing"
-                :module="recordListModule"
-                :filter="filter.query"
-                :selection="selected"
-                :selected-all-records="selectedAllRecords"
-                :processing="processing"
-                :preselected-fields="fields.map(({ moduleField }) => moduleField)"
-                class="mr-1"
-                @export="onExport"
-              />
-
-              <b-dropdown
-                v-if="filterPresets.length"
-                variant="light"
-                right
-                size="lg"
-                menu-class="shadow-sm"
-                boundary="viewport"
-                class="mr-1"
-                :text="$t('recordList.filter.filters.label')"
-              >
-                <li
-                  v-for="(f, idx) in filterPresets"
-                  :key="idx"
-                  class="d-flex align-items-center justify-content-between"
+              <template v-else-if="!inlineEditing && (recordPageID || options.allRecords)">
+                <b-button
+                  v-if="!options.hideAddButton"
+                  data-test-id="button-add-record"
+                  variant="primary"
+                  size="lg"
+                  @click="handleAddRecord()"
                 >
-                  <button
-                    class="dropdown-item"
-                    :disabled="activeFilters.includes(f.name)"
-                    @click="updateFilter(f.filter, f.name)"
-                  >
-                    {{ f.name }}
-                  </button>
+                  + {{ $t('recordList.addRecord') }}
+                </b-button>
 
-                  <c-input-confirm
-                    v-if="!f.roles"
-                    show-icon
-                    class="mr-1"
-                    @confirmed="removeStorageRecordListFilterPreset(f.name)"
-                  />
-                </li>
-              </b-dropdown>
+                <importer-modal
+                  v-if="!options.hideImportButton"
+                  :module="recordListModule"
+                  :namespace="namespace"
+                  @importSuccessful="onImportSuccessful"
+                />
+              </template>
+            </template>
 
-              <column-picker
-                v-if="!options.hideConfigureFieldsButton"
-                :module="recordListModule"
-                :fields="fields"
-                class="mr-1"
-                @updateFields="onUpdateFields"
-              />
-            </div>
+            <exporter-modal
+              v-if="options.allowExport && !inlineEditing"
+              :module="recordListModule"
+              :filter="filter.query"
+              :selection="selected"
+              :selected-all-records="selectedAllRecords"
+              :processing="processing"
+              :preselected-fields="fields.map(({ moduleField }) => moduleField)"
+              @export="onExport"
+            />
+
+            <b-dropdown
+              v-if="filterPresets.length"
+              variant="light"
+              right
+              size="lg"
+              menu-class="shadow-sm"
+              boundary="viewport"
+              :text="$t('recordList.filter.filters.label')"
+            >
+              <li
+                v-for="(f, idx) in filterPresets"
+                :key="idx"
+                class="d-flex align-items-center justify-content-between"
+              >
+                <button
+                  class="dropdown-item"
+                  :disabled="activeFilters.includes(f.name)"
+                  @click="updateFilter(f.filter, f.name)"
+                >
+                  {{ f.name }}
+                </button>
+
+                <c-input-confirm
+                  v-if="!f.roles"
+                  show-icon
+                  class="mr-1"
+                  @confirmed="removeStorageRecordListFilterPreset(f.name)"
+                />
+              </li>
+            </b-dropdown>
+
+            <column-picker
+              v-if="!options.hideConfigureFieldsButton"
+              :module="recordListModule"
+              :fields="fields"
+              @updateFields="onUpdateFields"
+            />
           </div>
+
           <div
             v-if="!options.hideSearch"
-            class="d-flex align-items-center flex-grow-1 w-25"
+            class="flex-fill"
           >
             <c-input-search
               v-model.trim="query"
               :placeholder="$t('general.label.search')"
+              :debounce="500"
             />
           </div>
         </b-row>
 
         <div
           v-if="activeFilters.length || drillDownFilter || options.showDeletedRecordsOption"
-          class="d-flex mt-2"
+          class="d-flex"
         >
           <div
             v-if="activeFilters.length"
@@ -187,7 +179,7 @@
             {{ selectedAllRecords ? $t('recordList.unselectAllRecords') : $t('recordList.selectAllRecords') }}
           </b-button>
 
-          <div class="d-flex align-items-center ml-auto">
+          <div class="d-flex align-items-center ml-auto gap-1">
             <automation-buttons
               class="d-inline m-0 mr-2"
               :buttons="options.selectionButtons"
@@ -737,7 +729,7 @@
 </template>
 <script>
 import axios from 'axios'
-import { debounce, isEqual } from 'lodash'
+import { isEqual } from 'lodash'
 import { mapGetters, mapActions } from 'vuex'
 import base from './base'
 import FieldViewer from 'corteza-webapp-compose/src/components/ModuleFields/Viewer'
@@ -905,7 +897,7 @@ export default {
     },
 
     showPageNavigation () {
-      return this.items.length && !this.options.hidePaging
+      return !this.options.hidePaging
     },
 
     showPerPageSelector () {
@@ -1048,9 +1040,11 @@ export default {
   },
 
   watch: {
-    query: debounce(function (e) {
-      this.refresh(true)
-    }, 500),
+    query: {
+      handler () {
+        this.refresh(true)
+      },
+    },
 
     options: {
       deep: true,
@@ -2069,16 +2063,22 @@ td:hover .inline-actions {
 </style>
 
 <style lang="scss">
-.record-list-table .actions {
-  padding-top: 8px;
-  position: sticky;
-  right: 0;
-  opacity: 0;
-  transition: opacity 0.25s;
-  width: 1%;
+.record-list-table {
+  th {
+    background-color: var(--gray-200) !important;
+  }
 
-  .regular-font {
-    font-family: var(--font-regular) !important;
+  .actions {
+    padding-top: 8px;
+    position: sticky;
+    right: 0;
+    opacity: 0;
+    transition: opacity 0.25s;
+    width: 1%;
+
+    .regular-font {
+      font-family: var(--font-regular) !important;
+    }
   }
 }
 
@@ -2087,4 +2087,10 @@ td:hover .inline-actions {
   margin: 0;
   padding: 0;
 }
+
+@media (max-width: 576px) {
+  .flex-fill-child > * {
+    flex-grow: 1;
+  }
+}
 </style>
diff --git a/client/web/compose/src/components/PageBlocks/TabsBase.vue b/client/web/compose/src/components/PageBlocks/TabsBase.vue
index f56261b1e..011d6dcea 100644
--- a/client/web/compose/src/components/PageBlocks/TabsBase.vue
+++ b/client/web/compose/src/components/PageBlocks/TabsBase.vue
@@ -149,13 +149,13 @@ export default {
     navClass () {
       const { orientation } = this.block.options.style
       const style = orientation === 'vertical' ? 'px-3' : 'px-2'
-      return `bg-white ${style}`
+      return `${style}`
     },
 
     navWrapperClass () {
       const { orientation, position } = this.block.options.style
       let border = 'border-bottom'
-      let style = 'bg-white mh-100'
+      let style = 'rounded mh-100'
 
       if (orientation === 'vertical') {
         border = position === 'end' ? 'border-left' : 'border-right'
@@ -199,9 +199,20 @@ export default {
 </script>
 
 <style lang="scss">
-.tabs-base-block-container .nav-pills {
-  .active .edit-block-btn {
-    color: var(--white) !important;
+.tabs-base-block-container {
+  .nav-pills {
+    .active .edit-block-btn {
+      color: var(--white) !important;
+    }
+  }
+
+  .tabs  {
+    .card {
+      border-radius: 0;
+    }
+    .card-header {
+      border-radius: 0;
+    }
   }
 }
 </style>
diff --git a/client/web/compose/src/components/PageBlocks/Wrap/Card.vue b/client/web/compose/src/components/PageBlocks/Wrap/Card.vue
index 01e723604..4a9b5521d 100644
--- a/client/web/compose/src/components/PageBlocks/Wrap/Card.vue
+++ b/client/web/compose/src/components/PageBlocks/Wrap/Card.vue
@@ -7,13 +7,11 @@
     >
       <b-card-header
         v-if="showHeader"
-        class="border-0 text-nowrap pl-3 pr-2 mr-1"
+        class="border-0 text-nowrap pl-3 pr-2"
         header-bg-variant="white"
         :header-text-variant="block.style.variants.headerText"
       >
-        <div
-          v-if="!headerSet"
-        >
+        <div v-if="!headerSet">
           <div class="d-flex">
             <h5
               v-if="block.title"
diff --git a/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue b/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue
index bcc62d695..780075908 100644
--- a/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue
+++ b/client/web/compose/src/components/PageBlocks/Wrap/Plain.vue
@@ -6,7 +6,7 @@
     >
       <div
         v-if="showHeader"
-        :class="`card-header bg-transparent border-0 text-nowrap pl-3 pr-2 mr-1 text-${block.style.variants.headerText}`"
+        :class="`card-header bg-transparent border-0 text-nowrap pl-3 pr-2 text-${block.style.variants.headerText}`"
       >
         <div
           v-if="!headerSet"
diff --git a/client/web/compose/src/components/Public/Record/Exporter/index.vue b/client/web/compose/src/components/Public/Record/Exporter/index.vue
index e4f7f2037..74fc753dd 100644
--- a/client/web/compose/src/components/Public/Record/Exporter/index.vue
+++ b/client/web/compose/src/components/Public/Record/Exporter/index.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="d-inline-block">
+  <div class="d-flex">
     <b-button
       size="lg"
       variant="light"
+      class="flex-fill"
       @click="toggleModal"
     >
       {{ $t('general:label.export') }}
diff --git a/client/web/compose/src/components/Public/Record/Importer/index.vue b/client/web/compose/src/components/Public/Record/Importer/index.vue
index 35e479d5c..0e318ad81 100644
--- a/client/web/compose/src/components/Public/Record/Importer/index.vue
+++ b/client/web/compose/src/components/Public/Record/Importer/index.vue
@@ -1,8 +1,9 @@
 <template>
-  <div class="d-inline-block">
+  <div class="d-flex">
     <b-button
       size="lg"
       variant="light"
+      class="flex-fill"
       @click="showModal=true"
     >
       {{ $t('general.label.import') }}
diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss
index 38b61ab48..263190e1f 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/client/web/compose/src/themes/corteza-base/custom.scss
@@ -300,14 +300,6 @@ fieldset.required {
   height: 4em;
 }
 
-.wrap-with-vertical-gutters {
-  margin-top: -0.25rem;
-
-  > * {
-    margin-top: 0.25rem;
-  }
-}
-
 // to remove the gap on top of the sticky header table
 .b-table-sticky-header > .table.b-table > thead > tr > th {
   border: 0;
diff --git a/client/web/compose/src/themes/corteza-base/rtl.scss b/client/web/compose/src/themes/corteza-base/rtl.scss
index ee6968dc9..c03fa5f55 100644
--- a/client/web/compose/src/themes/corteza-base/rtl.scss
+++ b/client/web/compose/src/themes/corteza-base/rtl.scss
@@ -1,8 +1,3 @@
-[dir] {
-  margin: 0;
-  background-color: var(--body-bg);
-}
-
 [dir="rtl"] {
   text-align: right;
 
diff --git a/client/web/compose/src/views/Admin/Charts/Edit.vue b/client/web/compose/src/views/Admin/Charts/Edit.vue
index c9cfa104f..a43a16fb1 100644
--- a/client/web/compose/src/views/Admin/Charts/Edit.vue
+++ b/client/web/compose/src/views/Admin/Charts/Edit.vue
@@ -363,6 +363,7 @@
           v-for="(color, index) in colorSchemeModal.colorscheme.colors"
           :key="index"
           v-model="colorSchemeModal.colorscheme.colors[index]"
+          :show-text="false"
           data-test-id="input-scheme-color"
           :translations="{
             modalTitle: $t('colorScheme.pickAColor'),
@@ -375,6 +376,7 @@
             <c-input-confirm
               variant="danger"
               size="md"
+              show-icon
               @confirmed="removeColor(index)"
             />
           </template>
diff --git a/client/web/compose/src/views/Admin/Charts/List.vue b/client/web/compose/src/views/Admin/Charts/List.vue
index 007c8d27b..018ce805d 100644
--- a/client/web/compose/src/views/Admin/Charts/List.vue
+++ b/client/web/compose/src/views/Admin/Charts/List.vue
@@ -81,7 +81,6 @@
           v-if="namespace.canGrant"
           :resource="`corteza::compose:chart/${namespace.namespaceID}/*`"
           :button-label="$t('general.label.permissions')"
-          button-variant="light"
           class="btn-lg"
         />
       </template>
diff --git a/client/web/compose/src/views/Admin/Modules/Edit.vue b/client/web/compose/src/views/Admin/Modules/Edit.vue
index 1832deae7..62824ca49 100644
--- a/client/web/compose/src/views/Admin/Modules/Edit.vue
+++ b/client/web/compose/src/views/Admin/Modules/Edit.vue
@@ -56,110 +56,105 @@
             >
               <b-row
                 no-gutters
-                class="wrap-with-vertical-gutters align-items-center"
+                class="d-flex align-items-center flex-fill-child gap-1"
               >
-                <div class="flex-grow-1 wrap-with-vertical-gutters">
-                  <b-button
-                    v-if="federationEnabled"
-                    data-test-id="button-federation-settings"
-                    variant="light"
-                    size="lg"
-                    class="mr-1"
-                    @click="federationSettings.modal = true"
-                  >
-                    <font-awesome-icon
-                      :icon="['fas', 'share-alt']"
-                    />
-
-                    {{ $t('edit.federationSettings.title') }}
-                  </b-button>
-
-                  <b-button
-                    v-if="discoveryEnabled"
-                    data-test-id="button-discovery-settings"
-                    variant="light"
-                    size="lg"
-                    class="mr-1"
-                    @click="discoverySettings.modal = true"
-                  >
-                    <font-awesome-icon
-                      :icon="['fas', 'search-location']"
-                    />
-                    {{ $t('edit.discoverySettings.title') }}
-                  </b-button>
-
-                  <export
-                    :list="[module]"
-                    type="module"
-                    class="mr-1"
-                  />
-
-                  <b-dropdown
-                    v-if="module.canGrant"
-                    data-test-id="dropdown-permissions"
-                    size="lg"
-                    variant="light"
-                    class="permissions-dropdown mr-1"
-                  >
-                    <template #button-content>
-                      <font-awesome-icon :icon="['fas', 'lock']" />
-                      <span>
-                        {{ $t('general.label.permissions') }}
-                      </span>
-                    </template>
-
-                    <b-dropdown-item>
-                      <c-permissions-button
-                        :title="module.name || module.handle || module.moduleID"
-                        :target="module.name || module.handle || module.moduleID"
-                        :resource="`corteza::compose:module/${namespace.namespaceID}/${module.moduleID}`"
-                        :button-label="$t('general:label.module.single')"
-                        :show-button-icon="false"
-                        button-variant="white text-left w-100"
-                      />
-                    </b-dropdown-item>
-
-                    <b-dropdown-item>
-                      <c-permissions-button
-                        :title="module.name || module.handle || module.moduleID"
-                        :target="module.name || module.handle || module.moduleID"
-                        :resource="`corteza::compose:module-field/${namespace.namespaceID}/${module.moduleID}/*`"
-                        :button-label="$t('general:label.field')"
-                        :show-button-icon="false"
-                        all-specific
-                        button-variant="white text-left w-100"
-                      />
-                    </b-dropdown-item>
-
-                    <b-dropdown-item>
-                      <c-permissions-button
-                        :title="module.name || module.handle || module.moduleID"
-                        :target="module.name || module.handle || module.moduleID"
-                        :resource="`corteza::compose:record/${namespace.namespaceID}/${module.moduleID}/*`"
-                        :button-label="$t('general:label.record')"
-                        :show-button-icon="false"
-                        all-specific
-                        button-variant="white text-left w-100"
-                      />
-                    </b-dropdown-item>
-                  </b-dropdown>
-                </div>
-
-                <div
-                  class="flex-grow-1 d-flex justify-content-md-end"
+                <b-button
+                  v-if="federationEnabled"
+                  data-test-id="button-federation-settings"
+                  variant="light"
+                  size="lg"
+                  class="mr-1"
+                  @click="federationSettings.modal = true"
                 >
-                  <related-pages
-                    :namespace="namespace"
-                    :module="module"
-                    size="lg"
+                  <font-awesome-icon
+                    :icon="['fas', 'share-alt']"
                   />
-                </div>
+
+                  {{ $t('edit.federationSettings.title') }}
+                </b-button>
+
+                <b-button
+                  v-if="discoveryEnabled"
+                  data-test-id="button-discovery-settings"
+                  variant="light"
+                  size="lg"
+                  class="mr-1"
+                  @click="discoverySettings.modal = true"
+                >
+                  <font-awesome-icon
+                    :icon="['fas', 'search-location']"
+                  />
+                  {{ $t('edit.discoverySettings.title') }}
+                </b-button>
+
+                <export
+                  :list="[module]"
+                  type="module"
+                  class="mr-1"
+                />
+
+                <b-dropdown
+                  v-if="module.canGrant"
+                  data-test-id="dropdown-permissions"
+                  size="lg"
+                  variant="light"
+                  class="permissions-dropdown mr-1"
+                >
+                  <template #button-content>
+                    <font-awesome-icon :icon="['fas', 'lock']" />
+                    <span>
+                      {{ $t('general.label.permissions') }}
+                    </span>
+                  </template>
+
+                  <b-dropdown-item>
+                    <c-permissions-button
+                      :title="module.name || module.handle || module.moduleID"
+                      :target="module.name || module.handle || module.moduleID"
+                      :resource="`corteza::compose:module/${namespace.namespaceID}/${module.moduleID}`"
+                      :button-label="$t('general:label.module.single')"
+                      :show-button-icon="false"
+                      button-variant="white text-left w-100"
+                    />
+                  </b-dropdown-item>
+
+                  <b-dropdown-item>
+                    <c-permissions-button
+                      :title="module.name || module.handle || module.moduleID"
+                      :target="module.name || module.handle || module.moduleID"
+                      :resource="`corteza::compose:module-field/${namespace.namespaceID}/${module.moduleID}/*`"
+                      :button-label="$t('general:label.field')"
+                      :show-button-icon="false"
+                      all-specific
+                      button-variant="white text-left w-100"
+                    />
+                  </b-dropdown-item>
+
+                  <b-dropdown-item>
+                    <c-permissions-button
+                      :title="module.name || module.handle || module.moduleID"
+                      :target="module.name || module.handle || module.moduleID"
+                      :resource="`corteza::compose:record/${namespace.namespaceID}/${module.moduleID}/*`"
+                      :button-label="$t('general:label.record')"
+                      :show-button-icon="false"
+                      all-specific
+                      button-variant="white text-left w-100"
+                    />
+                  </b-dropdown-item>
+                </b-dropdown>
+
+                <related-pages
+                  :namespace="namespace"
+                  :module="module"
+                  size="lg"
+                  class="d-flex ml-auto"
+                />
               </b-row>
             </b-card-header>
 
             <b-tabs
               v-model="activeTab"
-              nav-wrapper-class="bg-white white border-bottom"
+              nav-wrapper-class="bg-white white border-bottom rounded-0"
               card
             >
               <b-tab
@@ -985,3 +980,11 @@ export default {
   },
 }
 </script>
+
+<style scoped lang="scss">
+@media (max-width: 576px) {
+  .flex-fill-child > * {
+    flex-grow: 1;
+  }
+}
+</style>
diff --git a/client/web/compose/src/views/Admin/Modules/List.vue b/client/web/compose/src/views/Admin/Modules/List.vue
index 9ad34648b..0fce5bddf 100644
--- a/client/web/compose/src/views/Admin/Modules/List.vue
+++ b/client/web/compose/src/views/Admin/Modules/List.vue
@@ -60,7 +60,7 @@
           v-if="namespace.canGrant"
           size="lg"
           variant="light"
-          class="permissions-dropdown mr-1"
+          class="permissions-dropdown"
         >
           <template #button-content>
             <font-awesome-icon :icon="['fas', 'lock']" />
@@ -104,6 +104,7 @@
           :module="m"
           size="sm"
           boundary="scrollParent"
+          class="d-inline-block"
         />
 
         <b-dropdown
@@ -112,7 +113,7 @@
           size="sm"
           variant="light"
           :title="$t('permissions:resources.compose.module.tooltip')"
-          class="permissions-dropdown"
+          class="permissions-dropdown ml-2"
         >
           <template #button-content>
             <font-awesome-icon :icon="['fas', 'lock']" />
@@ -156,7 +157,7 @@
 
         <b-dropdown
           variant="outline-light"
-          toggle-class="d-flex align-items-center justify-content-center text-primary border-0 py-2 ml-1"
+          toggle-class="d-flex align-items-center justify-content-center text-primary border-0 py-2 ml-2"
           no-caret
           dropleft
           lazy
diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue
index a26ca72f3..e2a13ec2f 100644
--- a/client/web/compose/src/views/Admin/Pages/Builder.vue
+++ b/client/web/compose/src/views/Admin/Pages/Builder.vue
@@ -3,7 +3,7 @@
     v-if="page"
     id="page-builder"
     ref="pageBuilder"
-    class="flex-grow-1 overflow-auto d-flex px-2 w-100"
+    class="flex-grow-1 overflow-auto d-flex p-2 w-100"
     tabIndex="1"
   >
     <portal to="topbar-title">
@@ -78,7 +78,7 @@
       >
         <div
           :data-test-id="`block-${block.kind}`"
-          class="h-100 editable-block"
+          class="h-100"
         >
           <div
             class="toolbox border-0 p-2 m-0 text-light text-center"
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index 612122b9b..0450ab5cc 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -298,7 +298,6 @@
                               :page-layout="layout"
                               :disabled="layout.pageLayoutID === '0'"
                               highlight-key="meta.title"
-                              button-variant="light"
                             />
                           </b-input-group-append>
                         </b-input-group>
@@ -424,7 +423,6 @@
                   :page-layout="layoutEditor.layout"
                   :disabled="layoutEditor.layout.pageLayoutID === '0'"
                   highlight-key="meta.title"
-                  button-variant="light"
                 />
               </b-input-group-append>
             </b-input-group>
diff --git a/client/web/compose/src/views/Namespace/Edit.vue b/client/web/compose/src/views/Namespace/Edit.vue
index 74c839568..a07038c94 100644
--- a/client/web/compose/src/views/Namespace/Edit.vue
+++ b/client/web/compose/src/views/Namespace/Edit.vue
@@ -73,7 +73,6 @@
             :title="namespace.name || namespace.slug || namespace.namespaceID"
             :target="namespace.name || namespace.slug || namespace.namespaceID"
             :resource="`corteza::compose:namespace/${namespace.namespaceID}`"
-            button-variant="light"
             :button-label="$t('label.permissions')"
             class="ml-1 btn-lg"
           />
@@ -102,7 +101,6 @@
                   <namespace-translator
                     :namespace="namespace"
                     highlight-key="name"
-                    button-variant="light"
                     :disabled="isNew"
                   />
                 </b-input-group-append>
@@ -228,7 +226,6 @@
                   <namespace-translator
                     :namespace="namespace"
                     highlight-key="meta.subtitle"
-                    button-variant="light"
                     :disabled="isNew"
                   />
                 </b-input-group-append>
@@ -251,7 +248,6 @@
                   <namespace-translator
                     :namespace="namespace"
                     highlight-key="meta.description"
-                    button-variant="light"
                     :disabled="isNew"
                   />
                 </b-input-group-append>
diff --git a/client/web/compose/src/views/Namespace/List.vue b/client/web/compose/src/views/Namespace/List.vue
index 10d2b34b7..064e71fb9 100644
--- a/client/web/compose/src/views/Namespace/List.vue
+++ b/client/web/compose/src/views/Namespace/List.vue
@@ -29,7 +29,7 @@
       fluid="xl"
     >
       <b-row
-        class="wrap-with-vertical-gutters my-3"
+        class="my-3"
         no-gutters
       >
         <b-col
diff --git a/client/web/compose/src/views/Namespace/Manage.vue b/client/web/compose/src/views/Namespace/Manage.vue
index e1f08d12b..122ae1752 100644
--- a/client/web/compose/src/views/Namespace/Manage.vue
+++ b/client/web/compose/src/views/Namespace/Manage.vue
@@ -56,14 +56,12 @@
           :to="{ name: 'namespace.create' }"
           variant="primary"
           size="lg"
-          class="mr-1 float-left"
         >
           {{ $t('toolbar.buttons.create') }}
         </b-btn>
 
         <importer-modal
           v-if="canImport"
-          class="mr-1 float-left"
           @imported="onImported"
           @failed="onFailed"
         />
@@ -71,9 +69,8 @@
         <c-permissions-button
           v-if="canGrant"
           resource="corteza::compose:namespace/*"
-          button-variant="light"
           :button-label="$t('toolbar.buttons.permissions')"
-          class="btn-lg float-left"
+          size="lg"
         />
       </template>
 
diff --git a/client/web/compose/src/views/Public/Pages/View.vue b/client/web/compose/src/views/Public/Pages/View.vue
index 36e60396f..2013028e7 100644
--- a/client/web/compose/src/views/Public/Pages/View.vue
+++ b/client/web/compose/src/views/Public/Pages/View.vue
@@ -48,7 +48,7 @@
     </portal>
 
     <div
-      class="flex-grow-1 overflow-auto d-flex px-2 w-100"
+      class="flex-grow-1 overflow-auto d-flex p-2 w-100"
     >
       <router-view
         v-if="isRecordPage"
diff --git a/client/web/discovery/src/components/Search.vue b/client/web/discovery/src/components/Search.vue
index d7395db77..c1ab9670a 100644
--- a/client/web/discovery/src/components/Search.vue
+++ b/client/web/discovery/src/components/Search.vue
@@ -43,7 +43,7 @@
           <div
             v-if="$store.state.processing || !total.actual"
             class="position-absolute d-flex align-items-center justify-content-center w-100 h-100"
-            style="opacity: 0.8; z-index: 1; background-color: #F9FAFB;"
+            style="opacity: 0.8; z-index: 1; background-color: var(--gray-200);"
           >
             <h5
               class="mb-5"
diff --git a/client/web/discovery/src/themes/corteza-base/custom.scss b/client/web/discovery/src/themes/corteza-base/custom.scss
index 00305029a..afe0e0be5 100644
--- a/client/web/discovery/src/themes/corteza-base/custom.scss
+++ b/client/web/discovery/src/themes/corteza-base/custom.scss
@@ -219,14 +219,6 @@ fieldset.required {
   height: 4em;
 }
 
-.wrap-with-vertical-gutters {
-  margin-top: -0.25rem;
-
-  > * {
-    margin-top: 0.25rem;
-  }
-}
-
 .custom-control-label {
   width: 100%;
   margin-top: 0.25rem;
diff --git a/client/web/one/src/themes/corteza-base/rtl.scss b/client/web/one/src/themes/corteza-base/rtl.scss
index c057c8a11..decbb0178 100644
--- a/client/web/one/src/themes/corteza-base/rtl.scss
+++ b/client/web/one/src/themes/corteza-base/rtl.scss
@@ -1,8 +1,3 @@
-[dir] {
-  margin: 0;
-  background-color: var(--body-bg);
-}
-
 [dir="rtl"] {
   text-align: right;
 
diff --git a/client/web/privacy/src/themes/corteza-base/custom.scss b/client/web/privacy/src/themes/corteza-base/custom.scss
index 944f8b4b5..562a0f06e 100644
--- a/client/web/privacy/src/themes/corteza-base/custom.scss
+++ b/client/web/privacy/src/themes/corteza-base/custom.scss
@@ -223,14 +223,6 @@ fieldset.required {
   height: 4em;
 }
 
-.wrap-with-vertical-gutters {
-  margin-top: -0.25rem;
-
-  > * {
-    margin-top: 0.25rem;
-  }
-}
-
 .card-hover-popup {
   transition: all 0.1s ease-in-out;
 
diff --git a/client/web/privacy/src/views/Privacy/Request/List.vue b/client/web/privacy/src/views/Privacy/Request/List.vue
index a44c931ac..f3f6bbe25 100644
--- a/client/web/privacy/src/views/Privacy/Request/List.vue
+++ b/client/web/privacy/src/views/Privacy/Request/List.vue
@@ -56,7 +56,6 @@
             variant="danger"
             size="lg"
             size-confirm="lg"
-            class="ml-1"
             @confirmed="handleSelectedRequests(selected, 'rejected')"
           />
         </template>
diff --git a/client/web/reporter/src/components/EditorToolbar.vue b/client/web/reporter/src/components/EditorToolbar.vue
index d233e8fb3..9ff3eb578 100644
--- a/client/web/reporter/src/components/EditorToolbar.vue
+++ b/client/web/reporter/src/components/EditorToolbar.vue
@@ -33,7 +33,6 @@
         :processing="processingDelete"
         :text="$t('general:label.delete')"
         :borderless="false"
-        class="d-flex flex-column"
         @confirmed="$emit('delete')"
       />
 
diff --git a/client/web/reporter/src/themes/corteza-base/custom.scss b/client/web/reporter/src/themes/corteza-base/custom.scss
index 676808aef..0f59780c1 100644
--- a/client/web/reporter/src/themes/corteza-base/custom.scss
+++ b/client/web/reporter/src/themes/corteza-base/custom.scss
@@ -240,14 +240,6 @@ fieldset.required {
   height: 4em;
 }
 
-.wrap-with-vertical-gutters {
-  margin-top: -0.25rem;
-
-  > * {
-    margin-top: 0.25rem;
-  }
-}
-
 .gap-1 {
   gap: 0.5rem;
 }
diff --git a/client/web/reporter/src/views/Report/Builder.vue b/client/web/reporter/src/views/Report/Builder.vue
index 5c630f9d8..0dc078f19 100644
--- a/client/web/reporter/src/views/Report/Builder.vue
+++ b/client/web/reporter/src/views/Report/Builder.vue
@@ -92,7 +92,7 @@
         slot-scope="{ block, index }"
       >
         <div
-          class="h-100 editable-block"
+          class="h-100"
         >
           <div
             class="toolbox border-0 p-2 m-0 text-light text-center"
diff --git a/client/web/reporter/src/views/Report/Edit.vue b/client/web/reporter/src/views/Report/Edit.vue
index 920ab942e..2b598d76f 100644
--- a/client/web/reporter/src/views/Report/Edit.vue
+++ b/client/web/reporter/src/views/Report/Edit.vue
@@ -76,7 +76,6 @@
                     :target="report.meta.name || report.handle || report.reportID"
                     :resource="`corteza::system:report/${report.reportID}`"
                     :button-label="$t('permissions')"
-                    button-variant="light"
                     class="btn-lg ml-1"
                   />
                 </div>
diff --git a/client/web/reporter/src/views/Report/List.vue b/client/web/reporter/src/views/Report/List.vue
index 5bb4b3e3f..dabfcf1d1 100644
--- a/client/web/reporter/src/views/Report/List.vue
+++ b/client/web/reporter/src/views/Report/List.vue
@@ -33,28 +33,22 @@
       @row-clicked="viewReport"
     >
       <template #header>
-        <div class="flex-fill">
-          <div class="wrap-with-vertical-gutters">
-            <b-button
-              v-if="canCreate"
-              data-test-id="button-create-report"
-              variant="primary"
-              size="lg"
-              class="mr-1"
-              :to="{ name: 'report.create' }"
-            >
-              {{ $t('report.new') }}
-            </b-button>
+        <b-button
+          v-if="canCreate"
+          data-test-id="button-create-report"
+          variant="primary"
+          size="lg"
+          :to="{ name: 'report.create' }"
+        >
+          {{ $t('report.new') }}
+        </b-button>
 
-            <c-permissions-button
-              v-if="canGrant"
-              resource="corteza::system:report/*"
-              :button-label="$t('permissions')"
-              button-variant="light"
-              class="btn-lg"
-            />
-          </div>
-        </div>
+        <c-permissions-button
+          v-if="canGrant"
+          resource="corteza::system:report/*"
+          :button-label="$t('permissions')"
+          size="lg"
+        />
       </template>
 
       <template #name="{ item: r }">
diff --git a/client/web/workflow/src/components/Import.vue b/client/web/workflow/src/components/Import.vue
index 26ceaf250..abc012ae5 100644
--- a/client/web/workflow/src/components/Import.vue
+++ b/client/web/workflow/src/components/Import.vue
@@ -1,8 +1,9 @@
 <template>
-  <div>
+  <div class="d-flex">
     <b-button
       variant="light"
       size="lg"
+      class="flex-fill"
       @click="show = true"
     >
       {{ $t('general:import.label') }}
diff --git a/client/web/workflow/src/components/WorkflowEditor.vue b/client/web/workflow/src/components/WorkflowEditor.vue
index 7ad09e365..b969f3bb9 100644
--- a/client/web/workflow/src/components/WorkflowEditor.vue
+++ b/client/web/workflow/src/components/WorkflowEditor.vue
@@ -331,7 +331,6 @@
           :target="workflow.meta.name || workflow.handle || workflow.workflowID"
           :resource="`corteza::automation:workflow/${workflow.workflowID}`"
           :button-label="$t('general:permissions')"
-          button-variant="light"
           class="btn-lg ml-1"
         />
       </div>
diff --git a/client/web/workflow/src/themes/corteza-base/custom.scss b/client/web/workflow/src/themes/corteza-base/custom.scss
index 0164e3cce..d53d91c13 100644
--- a/client/web/workflow/src/themes/corteza-base/custom.scss
+++ b/client/web/workflow/src/themes/corteza-base/custom.scss
@@ -236,14 +236,6 @@ fieldset.required {
   height: 4em;
 }
 
-.wrap-with-vertical-gutters {
-  margin-top: -0.25rem;
-
-  > * {
-    margin-top: 0.25rem;
-  }
-}
-
 .gap-1 {
   gap: 0.5rem;
 }
diff --git a/client/web/workflow/src/views/Workflow/List.vue b/client/web/workflow/src/views/Workflow/List.vue
index 372a07e26..ff23c198f 100644
--- a/client/web/workflow/src/views/Workflow/List.vue
+++ b/client/web/workflow/src/views/Workflow/List.vue
@@ -34,36 +34,31 @@
       @row-clicked="handleRowClicked"
     >
       <template #header>
-        <div class="flex-grow-1">
-          <div class="wrap-with-vertical-gutters">
-            <b-button
-              v-if="canCreate"
-              data-test-id="button-create-workflow"
-              variant="primary"
-              size="lg"
-              class="float-left mr-1"
-              :to="{ name: 'workflow.create' }"
-            >
-              {{ $t('general:new-workflow') }}
-            </b-button>
-            <import
-              v-if="canCreate"
-              :disabled="importProcessing"
-              class="float-left mr-1"
-              @import="importJSON"
-            />
-            <export
-              class="float-left mr-1"
-            />
-            <c-permissions-button
-              v-if="canGrant"
-              resource="corteza::automation:workflow/*"
-              :button-label="$t('general:permissions')"
-              button-variant="light"
-              class="float-left btn-lg"
-            />
-          </div>
-        </div>
+        <b-button
+          v-if="canCreate"
+          data-test-id="button-create-workflow"
+          variant="primary"
+          size="lg"
+          :to="{ name: 'workflow.create' }"
+        >
+          {{ $t('general:new-workflow') }}
+        </b-button>
+
+        <import
+          v-if="canCreate"
+          :disabled="importProcessing"
+          class="d-flex"
+          @import="importJSON"
+        />
+
+        <export />
+
+        <c-permissions-button
+          v-if="canGrant"
+          resource="corteza::automation:workflow/*"
+          :button-label="$t('general:permissions')"
+          size="lg"
+        />
       </template>
 
       <template #toolbar>
diff --git a/lib/vue/src/components/corredor/CCorredorManualButtons.vue b/lib/vue/src/components/corredor/CCorredorManualButtons.vue
index 582596fb9..af69a4706 100644
--- a/lib/vue/src/components/corredor/CCorredorManualButtons.vue
+++ b/lib/vue/src/components/corredor/CCorredorManualButtons.vue
@@ -1,5 +1,8 @@
 <template>
-  <b-button-group>
+  <b-button-group
+    v-if="buttons.length"
+    :size="size"
+  >
     <b-button
       v-for="(b, i) in buttons"
       :key="i"
@@ -36,6 +39,11 @@ export default {
       type: String,
       default: () => 'mr-1'
     },
+
+    size: {
+      type: String,
+      default: () => 'md'
+    },
   },
 
   computed: {
diff --git a/lib/vue/src/components/input/CInputColorPicker.vue b/lib/vue/src/components/input/CInputColorPicker.vue
index b00331384..3da061fb8 100644
--- a/lib/vue/src/components/input/CInputColorPicker.vue
+++ b/lib/vue/src/components/input/CInputColorPicker.vue
@@ -48,7 +48,7 @@
           />
         </svg>
       </b-button>
-      <span v-if="showColorCodeText" class="ml-2">
+      <span v-if="showText" class="ml-2">
         {{ value }}
       </span>
     </div>
@@ -120,9 +120,9 @@ export default {
       default: "32px",
     },
 
-    showColorCodeText: {
+    showText: {
       type: Boolean,
-      default: false,
+      default: true,
     }
   },
 
diff --git a/lib/vue/src/components/input/CInputConfirm.vue b/lib/vue/src/components/input/CInputConfirm.vue
index 8309672f7..818087dc1 100644
--- a/lib/vue/src/components/input/CInputConfirm.vue
+++ b/lib/vue/src/components/input/CInputConfirm.vue
@@ -1,8 +1,5 @@
 <template>
-  <div
-    :class="{ 'text-center': inConfirmation }"
-    class="d-inline-block"
-  >
+  <div class="d-inline-flex">
     <template v-if="!inConfirmation">
       <b-button
         data-test-id="button-delete"
@@ -10,7 +7,7 @@
         :size="size"
         :disabled="disabled || processing"
         :title="tooltip"
-        :class="`${buttonClass} ${borderless ? 'border-0' : ''}`"
+        :class="`${buttonClass} ${borderless ? 'border-0' : ''} flex-fill`"
         @click.stop.prevent="onPrompt"
       >
         <b-spinner
@@ -40,8 +37,8 @@
         :variant="variantOk"
         :size="sizeConfirm"
         :disabled="okDisabled"
-        class="mr-1"
-        :class="[ borderless && 'border-0' ]"
+        :class="{ 'border-0': borderless }"
+        class="flex-fill mr-1"
         @blur.prevent="onCancel()"
         @click.prevent.stop="onConfirmation()"
       >
@@ -58,6 +55,7 @@
         :size="sizeConfirm"
         :disabled="cancelDisabled"
         :class="[ borderless && 'border-0' ]"
+        class="flex-fill"
         @click.prevent.stop="onCancel()"
       >
         <slot name="no">
diff --git a/lib/vue/src/components/input/CInputSearch.vue b/lib/vue/src/components/input/CInputSearch.vue
index 11a717688..f3d7447de 100644
--- a/lib/vue/src/components/input/CInputSearch.vue
+++ b/lib/vue/src/components/input/CInputSearch.vue
@@ -2,6 +2,7 @@
   <b-input-group
     :size="size"
     class="input-group-border border-light rounded"
+    style="min-width: 200px;"
   >
     <b-input
       ref="searchInput"
@@ -13,7 +14,7 @@
       :disabled="disabled"
       :placeholder="placeholder"
       :autocomplete="autocomplete"
-      class="h-100 pr-0 border-0 text-truncate bg-white"
+      class="h-100 pr-0 border-0 rounded-0 text-truncate bg-white"
       @input="onInput"
       @update="search"
       @keyup.enter="submitQuery"
@@ -34,7 +35,7 @@
       >
         <font-awesome-icon
           :icon="['fas', 'search']"
-          class="text-primary"
+          class="align-middle text-primary"
         />
       </b-button>
     </b-input-group-append>
diff --git a/lib/vue/src/components/navigation/CSidebar.vue b/lib/vue/src/components/navigation/CSidebar.vue
index 01c270ee0..8cfae92a0 100644
--- a/lib/vue/src/components/navigation/CSidebar.vue
+++ b/lib/vue/src/components/navigation/CSidebar.vue
@@ -336,7 +336,7 @@ $header-height: 64px;
 
 <style lang="scss">
 $nav-width: 320px;
-$sidebar-bg: #F4F7FA;
+$sidebar-bg: var(--gray-200);
 
 .sidebar {
   display: flex !important;
@@ -350,7 +350,7 @@ $sidebar-bg: #F4F7FA;
     background-color: var(--white);
 
     &.expanded {
-      background-color: $sidebar-bg !important;
+      background-color: $sidebar-bg;
     }
   }
 
@@ -375,7 +375,7 @@ $sidebar-bg: #F4F7FA;
       background-color: var(--white);
 
       &.expanded {
-        background-color: $sidebar-bg !important;
+        background-color: $sidebar-bg;
       }
     }
 
diff --git a/lib/vue/src/components/navigation/CTopbar.vue b/lib/vue/src/components/navigation/CTopbar.vue
index 176db1513..240a49412 100644
--- a/lib/vue/src/components/navigation/CTopbar.vue
+++ b/lib/vue/src/components/navigation/CTopbar.vue
@@ -287,7 +287,7 @@ $nav-user-icon-size: 50px;
 .header-navigation {
   width: 100vw;
   min-height: $header-height;
-  background-color: var(--gray-200) !important;
+  background-color: var(--body-bg);
 }
 
 .avatar {
diff --git a/lib/vue/src/components/permissions/CPermissionsButton.vue b/lib/vue/src/components/permissions/CPermissionsButton.vue
index 581e60d8f..17ebca68a 100644
--- a/lib/vue/src/components/permissions/CPermissionsButton.vue
+++ b/lib/vue/src/components/permissions/CPermissionsButton.vue
@@ -30,7 +30,7 @@ export default {
 
     buttonVariant: {
       type: String,
-      default: undefined,
+      default: 'light',
     },
 
     resource: {
diff --git a/lib/vue/src/components/reminders/CReminderSidebar.vue b/lib/vue/src/components/reminders/CReminderSidebar.vue
index a02562258..a266e141e 100644
--- a/lib/vue/src/components/reminders/CReminderSidebar.vue
+++ b/lib/vue/src/components/reminders/CReminderSidebar.vue
@@ -70,6 +70,6 @@ export default {
 <style lang="scss">
 .reminder-sidebar-header {
   height: 64px;
-  background-color: #F4F7FA;
+  background-color: var(--gray-200);
 }
 </style>
diff --git a/lib/vue/src/components/resourceList/CResourceList.vue b/lib/vue/src/components/resourceList/CResourceList.vue
index 1a2a003e6..19a2646e3 100644
--- a/lib/vue/src/components/resourceList/CResourceList.vue
+++ b/lib/vue/src/components/resourceList/CResourceList.vue
@@ -1,30 +1,31 @@
 <template>
   <b-card
     no-body
-    class="shadow-sm"
     header-bg-variant="white"
     footer-bg-variant="white"
-    footer-class="border-top"
+    footer-class="d-flex align-items-center flex-wrap gap-1 border-top"
+    :header-class="cardHeaderClass"
+    class="shadow-sm"
   >
     <template #header>
       <b-container
-        class="p-0"
         fluid
-        align-v="center"
+        class="d-flex flex-column p-0 gap-2 d-print-none"
       >
-        <b-row class="gap-1">
-          <b-col
-            lg="8"
-            class="gap-1 d-flex flex-wrap flex-sm-row flex-column"
-          >
+        <b-row
+          no-gutters
+          class="d-flex align-items-center justify-content-between gap-1"
+        >
+          <div :class="`d-flex align-items-center flex-grow-1 flex-wrap flex-fill-child gap-1 ${headerClass}`">
             <slot
               name="header"
               :selected="selected"
             />
-          </b-col>
+          </div>
 
-          <b-col
+          <div
             v-if="!hideSearch"
+            class="flex-fill"
           >
             <c-input-search
               v-model.trim="filter[queryField]"
@@ -32,11 +33,12 @@
               :debounce="300"
               @input="$emit('search')"
             />
-          </b-col>
+          </div>
         </b-row>
 
         <b-row
-          :class="{ 'mt-3': !!$slots.toolbar }"
+          v-if="$slots.toolbar"
+          class="gap-1"
         >
           <slot
             name="toolbar"
@@ -128,58 +130,51 @@
       #footer
     >
       <div
-        class="d-flex align-items-center justify-content-between flex-wrap"
+        v-if="!hideTotal"
+        class="text-nowrap"
       >
-        <div
-          class="text-truncate ml-3 ml-sm-0"
-        >
-          <div
-            v-if="!hideTotal"
-            class="text-nowrap"
-          >
-            {{ getPagination }}
-          </div>
-        </div>
-
-        <b-button-group
-          v-if="!hidePagination"
-        >
-          <b-button
-            :disabled="!hasPrevPage"
-            variant="outline-light"
-            class="d-flex align-items-center justify-content-center text-primary border-0"
-            @click="goToPage()"
-          >
-            <font-awesome-icon :icon="['fas', 'angle-double-left']" />
-          </b-button>
-
-          <b-button
-            :disabled="!hasPrevPage"
-            variant="outline-light"
-            class="d-flex align-items-center justify-content-center text-primary border-0"
-            @click="goToPage('prevPage')"
-          >
-            <font-awesome-icon
-              :icon="['fas', 'angle-left']"
-              class="mr-1"
-            />
-            {{ translations.prevPagination }}
-          </b-button>
-
-          <b-button
-            :disabled="!hasNextPage"
-            variant="outline-light"
-            class="d-flex align-items-center justify-content-center text-primary border-0"
-            @click="goToPage('nextPage')"
-          >
-            {{ translations.nextPagination }}
-            <font-awesome-icon
-              :icon="['fas', 'angle-right']"
-              class="ml-1"
-            />
-          </b-button>
-        </b-button-group>
+        {{ getPagination }}
       </div>
+
+      <b-button-group
+        v-if="!hidePagination"
+        class="ml-auto"
+      >
+        <b-button
+          :disabled="!hasPrevPage"
+          variant="outline-light"
+          class="d-flex align-items-center text-primary border-0"
+          @click="goToPage()"
+        >
+          <font-awesome-icon :icon="['fas', 'angle-double-left']" />
+        </b-button>
+
+        <b-button
+          :disabled="!hasPrevPage"
+          variant="outline-light"
+          class="d-flex align-items-center text-primary border-0"
+          @click="goToPage('prevPage')"
+        >
+          <font-awesome-icon
+            :icon="['fas', 'angle-left']"
+            class="mr-1"
+          />
+          {{ translations.prevPagination }}
+        </b-button>
+
+        <b-button
+          :disabled="!hasNextPage"
+          variant="outline-light"
+          class="d-flex align-items-center justify-content-center text-primary border-0"
+          @click="goToPage('nextPage')"
+        >
+          {{ translations.nextPagination }}
+          <font-awesome-icon
+            :icon="['fas', 'angle-right']"
+            class="ml-1"
+          />
+        </b-button>
+      </b-button-group>
     </template>
   </b-card>
 </template>
@@ -257,6 +252,16 @@ export default {
       default: () => true,
     },
 
+    cardHeaderClass: {
+      type: String,
+      default: '',
+    },
+
+    headerClass: {
+      type: String,
+      default: '',
+    },
+
     rowClass: {
       type: Function,
       default: () => {},
@@ -413,6 +418,10 @@ export default {
 
 <style lang="scss">
 #resource-list {
+  th {
+    background-color: var(--gray-200) !important;
+  }
+
   td.actions {
     padding-top: 8px;
     right: 0;
@@ -428,8 +437,14 @@ export default {
 
   tr:hover td.actions {
     opacity: 1;
-    background-color: #F9FAFB;
+    background-color: var(--gray-200);
     z-index: 1;
   }
 }
+
+@media (max-width: 576px) {
+  .flex-fill-child > * {
+    flex: 1 1 auto !important;
+  }
+}
 </style>
diff --git a/lib/vue/src/components/toolbar/CToolbar.vue b/lib/vue/src/components/toolbar/CToolbar.vue
index 9769f73ba..f140aaa68 100644
--- a/lib/vue/src/components/toolbar/CToolbar.vue
+++ b/lib/vue/src/components/toolbar/CToolbar.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="d-flex flex-column flex-sm-row bg-white p-3 gap-1 flex-wrap"
+    class="c-toolbar d-flex flex-column flex-sm-row bg-white p-3 gap-1 flex-wrap"
   >
     <div
       class="d-flex align-items-center flex-sm-grow-0 flex-sm-shrink-0 flex-fill fill-width gap-1 flex-wrap"
diff --git a/locale/en/corteza-webapp-admin/automation.workflows.yaml b/locale/en/corteza-webapp-admin/automation.workflows.yaml
index 5d6bc720e..4b5f7a90d 100644
--- a/locale/en/corteza-webapp-admin/automation.workflows.yaml
+++ b/locale/en/corteza-webapp-admin/automation.workflows.yaml
@@ -13,7 +13,7 @@ editor:
     title: Basic information
     undelete: Undelete
     updatedAt: Updated at
-  new: New
+  new: New Workflow
   permissions: Permissions
   title:
     create: Create workflow
@@ -53,7 +53,7 @@ list:
       label: Filter workflows list
       placeholder: Filter workflows by name
   loading: Loading workflows
-  new: New
+  new: New Workflow
   numFound: '{{count}} workflow found'
   numFound_plural: '{{count}} workflows found'
   permissions: Permissions
diff --git a/locale/en/corteza-webapp-admin/federation.nodes.yaml b/locale/en/corteza-webapp-admin/federation.nodes.yaml
index 06b32268a..02b07c6e3 100644
--- a/locale/en/corteza-webapp-admin/federation.nodes.yaml
+++ b/locale/en/corteza-webapp-admin/federation.nodes.yaml
@@ -41,12 +41,12 @@ list:
       label: Filter servers list
       placeholder: Filter servers by name
   loading: Loading federated nodes
-  new: New
+  new: New Federated Node
   numFound: '{{count}} server found'
   numFound_plural: '{{count}} servers found'
   pair:
     confirm: Confirm
-    label: Pair Federation Node
+    label: Pair Federated Node
     networkEstablished: Federated network will be established after the final confirmation from the administrator of another Corteza Federation Node.
     note: 'Note:'
     status:
diff --git a/locale/en/corteza-webapp-admin/system.apigw.yaml b/locale/en/corteza-webapp-admin/system.apigw.yaml
index bee488732..dd76bb594 100644
--- a/locale/en/corteza-webapp-admin/system.apigw.yaml
+++ b/locale/en/corteza-webapp-admin/system.apigw.yaml
@@ -2,7 +2,7 @@ title: Integration Gateway
 list:
   export: Export
   title: Routes
-  new: New
+  new: New Route
   permissions: Permissions
   profiler: Profiler
   yaml: YAML
@@ -49,7 +49,7 @@ settings:
 
 editor:
   title: Edit route
-  new: New
+  new: New Route
   permissions: Permissions
 
   info:
diff --git a/locale/en/corteza-webapp-admin/system.applications.yaml b/locale/en/corteza-webapp-admin/system.applications.yaml
index a2f567fdc..daaa19694 100644
--- a/locale/en/corteza-webapp-admin/system.applications.yaml
+++ b/locale/en/corteza-webapp-admin/system.applications.yaml
@@ -10,7 +10,7 @@ editor:
     title: Basic information
     undelete: Undelete
     updatedAt: Updated at
-  new: New
+  new: New Application
   permissions: Permissions
   title:
     create: Create application
@@ -58,7 +58,7 @@ list:
       label: Filter applications list
       placeholder: Filter applications by name
   loading: Loading applications
-  new: New
+  new: New Application
   numFound: '{{count}} application found'
   numFound_plural: '{{count}} applications found'
   permissions: Permissions
diff --git a/locale/en/corteza-webapp-admin/system.authclients.yaml b/locale/en/corteza-webapp-admin/system.authclients.yaml
index 6d0c52be2..dd1a65508 100644
--- a/locale/en/corteza-webapp-admin/system.authclients.yaml
+++ b/locale/en/corteza-webapp-admin/system.authclients.yaml
@@ -60,7 +60,7 @@ editor:
     testCurl: Test auth
     discovery: Allow client access to Corteza Discovery API on behalf of user
     openid: Allow client to use OIDC and verify the user's identity
-  new: New
+  new: New Auth Client
   permissions: Permissions
   title:
     create: Create client
@@ -90,7 +90,7 @@ list:
       label: Filter clients list
       placeholder: Filter clients
   loading: Loading clients
-  new: New
+  new: New Auth Client
   numFound: '{{count}} clients found'
   numFound_plural: '{{count}} clients found'
   permissions: Permissions
diff --git a/locale/en/corteza-webapp-admin/system.connections.yaml b/locale/en/corteza-webapp-admin/system.connections.yaml
index bed2dc4bd..17544d2b9 100644
--- a/locale/en/corteza-webapp-admin/system.connections.yaml
+++ b/locale/en/corteza-webapp-admin/system.connections.yaml
@@ -8,7 +8,7 @@ primary:
 
 list:
   title: List of database connections
-  add-button: Add connection
+  add-button: New Connection
   loading: Loading connections
   filterForm:
     deleted:
@@ -96,7 +96,7 @@ editor:
         label: Default table or container name
         placeholder: compose_record
         description: |
-          Identifier can contain placeholders like {{module}} (replaced with module handle) and/or {{namespace}} (replace with namespace handle). 
+          Identifier can contain placeholders like {{module}} (replaced with module handle) and/or {{namespace}} (replace with namespace handle).
           When set it is used as a default for modules without configure ident.
 
       type:
diff --git a/locale/en/corteza-webapp-admin/system.queues.yaml b/locale/en/corteza-webapp-admin/system.queues.yaml
index ca2831df1..f396792ae 100644
--- a/locale/en/corteza-webapp-admin/system.queues.yaml
+++ b/locale/en/corteza-webapp-admin/system.queues.yaml
@@ -15,7 +15,7 @@ editor:
     title: Basic information
     undelete: Undelete
     updatedAt: Updated at
-  new: New
+  new: New Queue
   title:
     edit: Edit queue
     new: Add a queue
@@ -46,5 +46,5 @@ list:
     inclusive:
       label: Including
   loading: Loading messaging queues
-  new: New
+  new: New Queue
   title: Messaging queues
diff --git a/locale/en/corteza-webapp-admin/system.roles.yaml b/locale/en/corteza-webapp-admin/system.roles.yaml
index f443d34ca..34eccc9d4 100644
--- a/locale/en/corteza-webapp-admin/system.roles.yaml
+++ b/locale/en/corteza-webapp-admin/system.roles.yaml
@@ -29,7 +29,7 @@ editor:
     searchUsers: Search users
     title: Role members
     unnamed: Unnamed user
-  new: New
+  new: New Role
   permissions: Permissions
   title:
     create: Create role
@@ -65,7 +65,7 @@ list:
       label: Filter roles list
       placeholder: Filter roles by name
   loading: Loading roles
-  new: New
+  new: New Role
   numFound: '{{count}} role found'
   numFound_plural: '{{count}} roles found'
   permissions: Permissions
diff --git a/locale/en/corteza-webapp-admin/system.sensitivityLevel.yaml b/locale/en/corteza-webapp-admin/system.sensitivityLevel.yaml
index 7d1a0ef93..85e3bbc50 100644
--- a/locale/en/corteza-webapp-admin/system.sensitivityLevel.yaml
+++ b/locale/en/corteza-webapp-admin/system.sensitivityLevel.yaml
@@ -1,5 +1,5 @@
 editor:
-  new: New
+  new: New Sensitivity Level
   title:
     create: Create sensitivity level
     edit: Edit sensitivity level
@@ -22,7 +22,7 @@ editor:
 list:
   title: Sensitivity Levels
   loading: Loading sensitivity levels
-  new: New
+  new: New Sensitivity Level
   columns:
     actions: ''
     'meta.name': Name
diff --git a/locale/en/corteza-webapp-admin/system.settings.yaml b/locale/en/corteza-webapp-admin/system.settings.yaml
index f4f5f3228..4aafd52ce 100644
--- a/locale/en/corteza-webapp-admin/system.settings.yaml
+++ b/locale/en/corteza-webapp-admin/system.settings.yaml
@@ -137,9 +137,9 @@ editor:
 
     image:
       uploader:
-        title: Background image
+        label: Background image
         instructions: Click or drop background image here to upload
         uploading: Uploading auth background image
 
       editor:
-        title: Styles editor
\ No newline at end of file
+        label: Custom CSS
\ No newline at end of file
diff --git a/locale/en/corteza-webapp-admin/system.templates.yaml b/locale/en/corteza-webapp-admin/system.templates.yaml
index 92663819b..f6b56a8da 100644
--- a/locale/en/corteza-webapp-admin/system.templates.yaml
+++ b/locale/en/corteza-webapp-admin/system.templates.yaml
@@ -39,7 +39,7 @@ editor:
     type: Template type
     undelete: Undelete
     updatedAt: Updated at
-  new: New
+  new: New Template
   permissions: Permissions
   title:
     create: Create template
@@ -72,7 +72,7 @@ list:
     inclusive:
       label: Including
   loading: Loading templates
-  new: New
+  new: New Template
   numFound: '{{count}} template found'
   numFound_plural: '{{count}} templates found'
   permissions: Permissions
diff --git a/locale/en/corteza-webapp-admin/system.users.yaml b/locale/en/corteza-webapp-admin/system.users.yaml
index 921603525..68c75f9d9 100644
--- a/locale/en/corteza-webapp-admin/system.users.yaml
+++ b/locale/en/corteza-webapp-admin/system.users.yaml
@@ -55,7 +55,7 @@ editor:
           Email OTP protection is enabled for this user
           User will receive email with the security code on each login
     title: Multi-factor authentication
-  new: New
+  new: New Role
   password:
     confirm: Confirm password
     length: The passwords must be at least {{length}} characters long!
@@ -107,7 +107,7 @@ list:
     suspended:
       label: suspended users
   loading: Loading users
-  new: New
+  new: New User
   numFound: '{{count}} user found'
   numFound_plural: '{{count}} users found'
   permissions: Permissions
diff --git a/locale/en/corteza-webapp-admin/ui.settings.yaml b/locale/en/corteza-webapp-admin/ui.settings.yaml
index 7d3f3ffc4..f25fcb816 100644
--- a/locale/en/corteza-webapp-admin/ui.settings.yaml
+++ b/locale/en/corteza-webapp-admin/ui.settings.yaml
@@ -23,7 +23,7 @@ editor:
       uploading: 'Uploading favicon'
 
   corteza-studio:
-    title: Branding
+    title: Theming
     colorPicker: Choose a color
     sassNotInstalled: No dart-sass binaries were detected. For guidance on how to set it up, refer to
     installSassDocs: docs here
@@ -39,13 +39,13 @@ editor:
       extra-light: Extra light
       dark: Dark
       tertiary: Tertiary
-      gray-200: Gray 200
+      gray-200: Gray
       body-bg: Body background
-  
+
   custom-css:
     title: Custom CSS
     modal:
-     editor: Custom CSS editor
+    editor: Custom CSS editor
 
   topbar:
     title: Topbar
diff --git a/locale/en/corteza-webapp-compose/namespace.yaml b/locale/en/corteza-webapp-compose/namespace.yaml
index 8572320c3..158691ce1 100644
--- a/locale/en/corteza-webapp-compose/namespace.yaml
+++ b/locale/en/corteza-webapp-compose/namespace.yaml
@@ -4,7 +4,7 @@ application:
   label: Enable on application list
 clickOpen: Click to open
 import:
-  buttonLabel: Import namespace
+  buttonLabel: Import
   title: Import namespace
   uploadFileLabel: Upload the file you want to import (.zip format)
   uploadFilePlaceholder: Click or drop file here to upload (.zip format)
@@ -64,7 +64,7 @@ manage:
 
   toolbar:
     buttons:
-      create: Create new namespace
+      create: New Namespace
       permissions: Permissions
 
   table: