diff --git a/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue b/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
index 407056e90..559db97f4 100644
--- a/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
+++ b/client/web/admin/src/components/Authclient/CAuthclientEditorInfo.vue
@@ -63,41 +63,38 @@
             :label="$t('redirectURI')"
             label-class="text-primary"
           >
-            <b-button
-              data-test-id="button-add-redirect-uris"
-              variant="light"
-              class="align-top"
-              @click="redirectURI.push('')"
+            <c-form-table-wrapper
+              :labels="{ addButton: $t('general:label.add') }"
+              test-id="button-add-redirect-uris"
+              add-button-class="mt-2"
+              @add-item="redirectURI.push('')"
             >
-              + {{ $t('add') }}
-            </b-button>
-
-            <div
-              v-if="redirectURI.length"
-            >
-              <b-input-group
-                v-for="(value, index) in redirectURI"
-                :key="index"
-                class="mt-2"
+              <div
+                v-if="redirectURI.length"
               >
-                <b-form-input
-                  v-model="redirectURI[index]"
-                  data-test-id="input-uri"
-                  :placeholder="$t('uri')"
-                />
-
-                <b-button
-                  data-test-id="button-remove-uri"
-                  class="ml-1 text-danger"
-                  variant="link"
-                  @click="redirectURI.splice(index, 1)"
+                <b-input-group
+                  v-for="(value, index) in redirectURI"
+                  :key="index"
+                  class="mt-2"
                 >
-                  <font-awesome-icon
-                    :icon="['fas', 'times']"
+                  <b-form-input
+                    v-model="redirectURI[index]"
+                    data-test-id="input-uri"
+                    :placeholder="$t('uri')"
                   />
-                </b-button>
-              </b-input-group>
-            </div>
+                  <b-button
+                    data-test-id="button-remove-uri"
+                    class="ml-1 text-danger"
+                    variant="link"
+                    @click="redirectURI.splice(index, 1)"
+                  >
+                    <font-awesome-icon
+                      :icon="['fas', 'times']"
+                    />
+                  </b-button>
+                </b-input-group>
+              </div>
+            </c-form-table-wrapper>
           </b-form-group>
         </b-col>
 
diff --git a/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue b/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
index 9fbb368a3..dc8ca7e7c 100644
--- a/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
+++ b/client/web/admin/src/components/Settings/UI/CUITopbarSettings.vue
@@ -36,6 +36,7 @@
 
       <div>
         <hr>
+
         <b-row>
           <b-col
             cols="12"
@@ -62,53 +63,52 @@
               </b-form-checkbox>
             </b-form-group>
           </b-col>
+
           <b-col>
             <b-form-group
-              label-class="pb-1 text-primary"
+              :label="$t('links.title')"
+              label-class="text-primary"
             >
-              <template #label>
-                {{ $t('links.title') }}
-                <b-button
-                  variant="link"
-                  class="text-decoration-none"
-                  @click="topbarSettings.helpLinks.push({ handle: '', url: '', newTab: true })"
-                >
-                  {{ $t('general:label.plus-add') }}
-                </b-button>
-              </template>
-              <b-table
-                :fields="links.fields"
-                :items="topbarSettings.helpLinks"
-                head-variant="light"
-                responsive="sm"
-                small
-                class="mb-0"
+              <c-form-table-wrapper
+                :labels="{ addButton: $t('general:label.add') }"
+                @add-item="topbarSettings.helpLinks.push({ handle: '', url: '', newTab: true })"
               >
-                <template #cell(handle)="data">
-                  <b-form-input
-                    v-model="data.item.handle"
-                    size="sm"
-                  />
-                </template>
-                <template #cell(url)="data">
-                  <b-form-input
-                    v-model="data.item.url"
-                    type="url"
-                    size="sm"
-                  />
-                </template>
-                <template #cell(newTab)="data">
-                  <b-form-checkbox
-                    v-model="data.item.newTab"
-                  />
-                </template>
-                <template #cell(actions)="data">
-                  <c-input-confirm
-                    show-icon
-                    @confirmed="topbarSettings.helpLinks.splice(data.index, 1)"
-                  />
-                </template>
-              </b-table>
+                <b-table
+                  :fields="links.fields"
+                  :items="topbarSettings.helpLinks"
+                  thead-tr-class="text-primary"
+                  responsive="sm"
+                  small
+                >
+                  <template #cell(handle)="data">
+                    <b-form-input
+                      v-model="data.item.handle"
+                      size="sm"
+                    />
+                  </template>
+
+                  <template #cell(url)="data">
+                    <b-form-input
+                      v-model="data.item.url"
+                      type="url"
+                      size="sm"
+                    />
+                  </template>
+
+                  <template #cell(newTab)="data">
+                    <b-form-checkbox
+                      v-model="data.item.newTab"
+                    />
+                  </template>
+
+                  <template #cell(actions)="data">
+                    <c-input-confirm
+                      show-icon
+                      @confirmed="topbarSettings.helpLinks.splice(data.index, 1)"
+                    />
+                  </template>
+                </b-table>
+              </c-form-table-wrapper>
             </b-form-group>
           </b-col>
         </b-row>
@@ -116,12 +116,14 @@
 
       <div>
         <hr>
+
         <b-row>
           <b-col
             cols="12"
             lg="3"
           >
             <h5>{{ $t('profile.title') }}</h5>
+
             <b-form-group>
               <b-form-checkbox
                 v-model="topbarSettings.hideProfileLink"
@@ -142,53 +144,52 @@
               </b-form-checkbox>
             </b-form-group>
           </b-col>
+
           <b-col>
             <b-form-group
-              label-class="pb-1 text-primary"
+              :label="$t('links.title')"
+              label-class="text-primary"
             >
-              <template #label>
-                {{ $t('links.title') }}
-                <b-button
-                  variant="link"
-                  class="text-decoration-none"
-                  @click="topbarSettings.profileLinks.push({ handle: '', url: '', newTab: true })"
-                >
-                  {{ $t('general:label.plus-add') }}
-                </b-button>
-              </template>
-              <b-table
-                :fields="links.fields"
-                :items="topbarSettings.profileLinks"
-                head-variant="light"
-                responsive="sm"
-                small
-                class="mb-0"
+              <c-form-table-wrapper
+                :labels="{ addButton: $t('general:label.add') }"
+                @add-item="topbarSettings.profileLinks.push({ handle: '', url: '', newTab: true })"
               >
-                <template #cell(handle)="data">
-                  <b-form-input
-                    v-model="data.item.handle"
-                    size="sm"
-                  />
-                </template>
-                <template #cell(url)="data">
-                  <b-form-input
-                    v-model="data.item.url"
-                    type="url"
-                    size="sm"
-                  />
-                </template>
-                <template #cell(newTab)="data">
-                  <b-form-checkbox
-                    v-model="data.item.newTab"
-                  />
-                </template>
-                <template #cell(actions)="data">
-                  <c-input-confirm
-                    show-icon
-                    @confirmed="topbarSettings.profileLinks.splice(data.index, 1)"
-                  />
-                </template>
-              </b-table>
+                <b-table
+                  :fields="links.fields"
+                  :items="topbarSettings.profileLinks"
+                  thead-tr-class="text-primary"
+                  responsive="sm"
+                  small
+                >
+                  <template #cell(handle)="data">
+                    <b-form-input
+                      v-model="data.item.handle"
+                      size="sm"
+                    />
+                  </template>
+
+                  <template #cell(url)="data">
+                    <b-form-input
+                      v-model="data.item.url"
+                      type="url"
+                      size="sm"
+                    />
+                  </template>
+
+                  <template #cell(newTab)="data">
+                    <b-form-checkbox
+                      v-model="data.item.newTab"
+                    />
+                  </template>
+
+                  <template #cell(actions)="data">
+                    <c-input-confirm
+                      show-icon
+                      @confirmed="topbarSettings.profileLinks.splice(data.index, 1)"
+                    />
+                  </template>
+                </b-table>
+              </c-form-table-wrapper>
             </b-form-group>
           </b-col>
         </b-row>
diff --git a/client/web/admin/src/components/index.js b/client/web/admin/src/components/index.js
index 834c70fb0..2056001bf 100644
--- a/client/web/admin/src/components/index.js
+++ b/client/web/admin/src/components/index.js
@@ -22,7 +22,7 @@ import {
   TooltipComponent,
 } from 'echarts/components'
 
-const { CCorredorManualButtons, CPermissionsButton, CInputConfirm, CButtonSubmit, CInputCheckbox, CInputSelect } = components
+const { CCorredorManualButtons, CPermissionsButton, CInputConfirm, CButtonSubmit, CInputCheckbox, CInputSelect, CFormTableWrapper } = components
 
 Vue.use(PortalVue)
 Vue.component('c-corredor-manual-buttons', CCorredorManualButtons)
@@ -36,6 +36,7 @@ Vue.component('c-button-submit', CButtonSubmit)
 Vue.component('c-input-checkbox', CInputCheckbox)
 Vue.component('c-system-fields', CSystemFields)
 Vue.component('c-input-select', CInputSelect)
+Vue.component('c-form-table-wrapper', CFormTableWrapper)
 
 use([
   LineChart,
diff --git a/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue b/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
index 706833816..38ed61baf 100644
--- a/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
+++ b/client/web/compose/src/components/Admin/Module/FieldRowEdit.vue
@@ -97,8 +97,8 @@
     </td>
 
     <td
-      class="text-right align-middle pr-2"
-      style="min-width: 100px;"
+      class="text-right align-middle"
+      style="min-width: 110px;"
     >
       <c-permissions-button
         v-if="canGrant && !isNew"
diff --git a/client/web/compose/src/components/Admin/Module/FieldRowView.vue b/client/web/compose/src/components/Admin/Module/FieldRowView.vue
index d2cbd4924..a8fd9482a 100644
--- a/client/web/compose/src/components/Admin/Module/FieldRowView.vue
+++ b/client/web/compose/src/components/Admin/Module/FieldRowView.vue
@@ -1,7 +1,8 @@
 <template>
   <tr>
-    <td />
-    <td class="pl-3">
+    <td class="pr-2" />
+
+    <td style="width: 250px;">
       {{ field.name }}
       <b-badge
         v-if="field.omit"
@@ -11,10 +12,12 @@
         {{ $t('unavailable') }}
       </b-badge>
     </td>
-    <td class="pl-3">
+
+    <td style="width: 250px;">
       {{ field.label }}
     </td>
-    <td class="pl-3">
+
+    <td>
       {{ field.kind }}
     </td>
   </tr>
diff --git a/client/web/compose/src/components/Admin/Module/UniqueValues.vue b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
index 13c503269..f36c8064f 100644
--- a/client/web/compose/src/components/Admin/Module/UniqueValues.vue
+++ b/client/web/compose/src/components/Admin/Module/UniqueValues.vue
@@ -59,12 +59,14 @@
         </b-form-group>
       </div>
 
-      <div
+      <c-form-table-wrapper
         v-if="rule.constraints && rule.constraints.length > 0"
-        class="list-background rounded border border-light p-1"
+        hide-add-button
       >
         <b-table-simple
           borderless
+          small
+          responsive
           class="mb-0"
         >
           <thead>
@@ -84,6 +86,7 @@
               <th style="width: 150px;" />
             </tr>
           </thead>
+
           <tbody v-if="rule.constraints">
             <tr
               v-for="(constraint, consIndex) in rule.constraints"
@@ -119,7 +122,7 @@
             </tr>
           </tbody>
         </b-table-simple>
-      </div>
+      </c-form-table-wrapper>
 
       <hr>
     </div>
diff --git a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
index b9bad0f1a..9d3701ec3 100644
--- a/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordConfigurator.vue
@@ -135,90 +135,81 @@
         </b-button>
       </h5>
 
-      <b-table-simple
-        borderless
-        small
-        responsive="lg"
+      <c-form-table-wrapper
+        :labels="{
+          addButton: $t('general:label.add')
+        }"
+        :disable-add-button="addRuleDisabled"
+        @add-item="addRule"
       >
-        <b-thead>
-          <b-tr>
-            <b-th
-              class="text-primary"
-            >
-              {{ $t('record.fieldConditions.field') }}
-            </b-th>
-
-            <b-th
-              class="text-primary"
-            >
-              {{ $t('record.fieldConditions.condition') }}
-            </b-th>
-
-            <b-th />
-          </b-tr>
-        </b-thead>
-
-        <b-tbody>
-          <b-tr
-            v-for="(condition, i) in block.options.fieldConditions"
-            :key="i"
-          >
-            <b-td
-              class="align-middle"
-              style="width: 33%; min-width: 250px;"
-            >
-              <c-input-select
-                v-model="condition.field"
-                :options="block.options.fields"
-                :placeholder="$t('record.fieldConditions.selectPlaceholder')"
-                :selectable="option => isSelectable(option)"
-                :get-option-label="getOptionLabel"
-                :get-option-key="getOptionKey"
-                :reduce="option => option.isSystem ? option.name : option.fieldID"
-              />
-            </b-td>
-
-            <b-td
-              class="align-middle"
-              style="min-width: 300px;"
-            >
-              <b-input-group>
-                <b-input-group-prepend>
-                  <b-button variant="extra-light">
-                    ƒ
-                  </b-button>
-                </b-input-group-prepend>
-                <b-form-input
-                  v-model="condition.condition"
-                  :placeholder="$t('record.fieldConditions.placeholder')"
-                />
-              </b-input-group>
-            </b-td>
-
-            <b-td
-              class="text-center align-middle pr-2"
-              style="width: 100px;"
-            >
-              <c-input-confirm
-                show-icon
-                @confirmed="deleteRule(i)"
-              />
-            </b-td>
-          </b-tr>
-
-          <b-tr>
-            <b-td>
-              <b-button
-                variant="primary"
-                :disabled="addRuleDisabled"
-                @click="addRule"
+        <b-table-simple
+          borderless
+          small
+          responsive="lg"
+        >
+          <b-thead>
+            <b-tr>
+              <b-th
+                class="text-primary"
               >
-                {{ $t('record.fieldConditions.action') }}
-              </b-button>
-            </b-td>
-          </b-tr>
-        </b-tbody>
-      </b-table-simple>
+                {{ $t('record.fieldConditions.field') }}
+              </b-th>
+              <b-th
+                class="text-primary"
+              >
+                {{ $t('record.fieldConditions.condition') }}
+              </b-th>
+              <b-th />
+            </b-tr>
+          </b-thead>
+          <b-tbody>
+            <b-tr
+              v-for="(condition, i) in block.options.fieldConditions"
+              :key="i"
+            >
+              <b-td
+                class="align-middle"
+                style="width: 33%; min-width: 250px;"
+              >
+                <c-input-select
+                  v-model="condition.field"
+                  :options="block.options.fields"
+                  :placeholder="$t('record.fieldConditions.selectPlaceholder')"
+                  :selectable="option => isSelectable(option)"
+                  :get-option-label="getOptionLabel"
+                  :get-option-key="getOptionKey"
+                  :reduce="option => option.isSystem ? option.name : option.fieldID"
+                />
+              </b-td>
+              <b-td
+                class="align-middle"
+                style="min-width: 300px;"
+              >
+                <b-input-group>
+                  <b-input-group-prepend>
+                    <b-button variant="extra-light">
+                      ƒ
+                    </b-button>
+                  </b-input-group-prepend>
+                  <b-form-input
+                    v-model="condition.condition"
+                    :placeholder="$t('record.fieldConditions.placeholder')"
+                  />
+                </b-input-group>
+              </b-td>
+              <b-td
+                class="text-center align-middle pr-2"
+                style="width: 100px;"
+              >
+                <c-input-confirm
+                  show-icon
+                  @confirmed="deleteRule(i)"
+                />
+              </b-td>
+            </b-tr>
+          </b-tbody>
+        </b-table-simple>
+      </c-form-table-wrapper>
     </div>
   </b-tab>
 </template>
diff --git a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
index be2b55cf8..ce56c7ecb 100644
--- a/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/RecordListConfigurator.vue
@@ -308,17 +308,20 @@
 
           <b-row>
             <b-col>
-              <div class="list-background rounded border border-light p-3">
-                <b-form-group
-                  :label="$t('recordList.filter.presets')"
-                  label-class="text-primary"
-                  class="mb-0"
+              <b-form-group
+                :label="$t('recordList.filter.presets')"
+                label-class="text-primary mb-1"
+              >
+                <c-form-table-wrapper
+                  :labels="{
+                    addButton: $t('general:label.add')
+                  }"
+                  @add-item="addFilterPreset"
                 >
                   <b-spinner v-if="fetchingRoles" />
 
                   <template v-else>
                     <b-table-simple
-                      v-if="recordListModule"
                       borderless
                       small
                       responsive="lg"
@@ -411,8 +414,8 @@
                       {{ $t('general:label.add') }}
                     </b-button>
                   </template>
-                </b-form-group>
-              </div>
+                </c-form-table-wrapper>
+              </b-form-group>
             </b-col>
           </b-row>
         </div>
@@ -444,28 +447,21 @@
 
           <b-row>
             <b-col>
-              <div class="list-background rounded border border-light p-3">
-                <b-form-group
-                  :label="$t('recordList.record.presortInputLabel')"
-                  label-class="text-primary"
-                  class="mb-0"
-                >
-                  <c-input-presort
-                    v-model="options.presort"
-                    :fields="recordListModuleFields"
-                    :labels="{
-                      add: $t('general:label.add'),
-                      ascending: $t('general:label.ascending'),
-                      descending: $t('general:label.descending'),
-                      none: $t('general:label.none'),
-                      placeholder: $t('recordList.record.presortPlaceholder'),
-                      footnote: $t('recordList.record.presortFootnote'),
-                      toggleInput: $t('recordList.record.presortToggleInput'),
-                    }"
-                    allow-text-input
-                  />
-                </b-form-group>
-              </div>
+              <c-input-presort
+                v-model="options.presort"
+                :fields="recordListModuleFields"
+                :labels="{
+                  ascending: $t('general:label.ascending'),
+                  descending: $t('general:label.descending'),
+                  none: $t('general:label.none'),
+                  placeholder: $t('recordList.record.presortPlaceholder'),
+                  footnote: $t('recordList.record.presortFootnote'),
+                  toggleInput: $t('recordList.record.presortToggleInput'),
+                  addButton: $t('general:label.add'),
+                  title: $t('recordList.record.presortInputLabel')
+                }"
+                allow-text-input
+              />
             </b-col>
           </b-row>
         </div>
diff --git a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
index 73d46a4a6..49f77ea15 100644
--- a/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
+++ b/client/web/compose/src/components/PageBlocks/TabsConfigurator.vue
@@ -109,136 +109,126 @@
       </h5>
     </div>
 
-    <b-table-simple
-      v-if="block.options.tabs.length"
-      responsive="lg"
-      borderless
-      small
+    <c-form-table-wrapper
+      :labels="{
+        addButton: $t('general:label.add')
+      }"
+      @add-item="addTab"
     >
-      <b-thead>
-        <tr>
-          <th />
-
-          <th class="d-flex align-items-center text-primary">
-            {{ $t('tabs.table.columns.title.label') }}
-            <c-hint
-              :tooltip="$t('interpolationFootnote', ['${record.values.fieldName}', '${recordID}', '${ownerID}', '${userID}'])"
-              class="d-block"
-            />
-          </th>
-
-          <th
-            class="text-primary"
-          >
-            {{ $t('tabs.table.columns.block.label') }}
-          </th>
-
-          <th />
-        </tr>
-      </b-thead>
-
-      <draggable
-        v-model="block.options.tabs"
-        handle=".handle"
-        tag="b-tbody"
+      <b-table-simple
+        responsive="lg"
+        borderless
+        small
       >
-        <tr
-          v-for="(tab, index) in block.options.tabs"
-          :key="index"
-        >
-          <b-td class="handle align-middle pr-2">
-            <font-awesome-icon
-              :icon="['fas', 'bars']"
-              class="grab m-0 text-secondary p-0"
-            />
-          </b-td>
+        <b-thead>
+          <tr>
+            <th />
 
-          <b-td
-            class="align-middle"
-            style="width: 50%; min-width: 200px;"
-          >
-            <b-form-input
-              v-model="tab.title"
-            />
-          </b-td>
-
-          <b-td
-            class="align-middle"
-            style="width: 50%; min-width: 200px;"
-          >
-            <b-input-group class="d-flex flex-nowrap w-100">
-              <c-input-select
-                v-model="tab.blockID"
-                :options="blockOptions"
-                :placeholder="$t('tabs.placeholder.block')"
-                :get-option-label="getBlockLabel"
-                :get-option-key="getOptionKey"
-                :selectable="option => isSelectable(option)"
-                :reduce="option => option.value"
+            <th class="d-flex align-items-center text-primary">
+              {{ $t('tabs.table.columns.title.label') }}
+              <c-hint
+                :tooltip="$t('interpolationFootnote', ['${record.values.fieldName}', '${recordID}', '${ownerID}', '${userID}'])"
+                class="d-block"
               />
+            </th>
 
-              <b-input-group-append>
-                <b-button
-                  v-if="tab.blockID"
-                  id="popover-edit"
-                  v-b-tooltip.noninteractive.hover="{ title: $t('tabs.tooltip.edit'), container: '#body' }"
-                  size="sm"
-                  variant="extra-light"
-                  class="d-flex align-items-center justify-content-center"
-                  style="width: 40px;"
-                  @click="editBlock(tab.blockID)"
-                >
-                  <font-awesome-icon
-                    :icon="['far', 'edit']"
-                  />
-                </b-button>
-                <b-button
-                  v-else
-                  v-b-tooltip.noninteractive.hover="{ title: $t('tabs.tooltip.addBlock'), container: '#body' }"
-                  size="sm"
-                  variant="extra-light"
-                  class="d-flex align-items-center justify-content-center"
-                  style="width: 40px;"
-                  @click="showBlockSelector(index)"
-                >
-                  <font-awesome-icon
-                    :icon="['fas', 'plus']"
-                  />
-                </b-button>
-              </b-input-group-append>
-            </b-input-group>
-          </b-td>
+            <th
+              class="text-primary"
+            >
+              {{ $t('tabs.table.columns.block.label') }}
+            </th>
 
-          <td
-            class="text-center align-middle"
-            style="min-width: 80px;"
+            <th />
+          </tr>
+        </b-thead>
+
+        <draggable
+          v-model="block.options.tabs"
+          handle=".handle"
+          tag="b-tbody"
+        >
+          <tr
+            v-for="(tab, index) in block.options.tabs"
+            :key="index"
           >
-            <c-input-confirm
-              :tooltip="$t('tabs.tooltip.delete')"
-              show-icon
-              @confirmed="deleteTab(index)"
-            />
-          </td>
-        </tr>
-      </draggable>
-    </b-table-simple>
+            <b-td class="handle align-middle pr-2">
+              <font-awesome-icon
+                :icon="['fas', 'bars']"
+                class="grab m-0 text-secondary p-0"
+              />
+            </b-td>
 
-    <div
-      v-else
-      class="text-center my-4"
-    >
-      <p>
-        {{ $t('tabs.noTabs') }}
-      </p>
-    </div>
+            <b-td
+              class="align-middle"
+              style="width: 50%; min-width: 200px;"
+            >
+              <b-form-input
+                v-model="tab.title"
+              />
+            </b-td>
 
-    <b-button
-      variant="primary"
-      class="text-decoration-none"
-      @click="addTab"
-    >
-      {{ $t('tabs.addTab') }}
-    </b-button>
+            <b-td
+              class="align-middle"
+              style="width: 50%; min-width: 200px;"
+            >
+              <b-input-group class="d-flex flex-nowrap w-100">
+                <c-input-select
+                  v-model="tab.blockID"
+                  :options="blockOptions"
+                  :placeholder="$t('tabs.placeholder.block')"
+                  :get-option-label="getBlockLabel"
+                  :get-option-key="getOptionKey"
+                  :selectable="option => isSelectable(option)"
+                  :reduce="option => option.value"
+                />
+
+                <b-input-group-append>
+                  <b-button
+                    v-if="tab.blockID"
+                    id="popover-edit"
+                    v-b-tooltip.noninteractive.hover="{ title: $t('tabs.tooltip.edit'), container: '#body' }"
+                    size="sm"
+                    variant="extra-light"
+                    class="d-flex align-items-center justify-content-center"
+                    style="width: 40px;"
+                    @click="editBlock(tab.blockID)"
+                  >
+                    <font-awesome-icon
+                      :icon="['far', 'edit']"
+                    />
+                  </b-button>
+
+                  <b-button
+                    v-else
+                    v-b-tooltip.noninteractive.hover="{ title: $t('tabs.tooltip.addBlock'), container: '#body' }"
+                    size="sm"
+                    variant="extra-light"
+                    class="d-flex align-items-center justify-content-center"
+                    style="width: 40px;"
+                    @click="showBlockSelector(index)"
+                  >
+                    <font-awesome-icon
+                      :icon="['fas', 'plus']"
+                    />
+                  </b-button>
+                </b-input-group-append>
+              </b-input-group>
+            </b-td>
+
+            <td
+              class="text-center align-middle"
+              style="min-width: 80px;"
+            >
+              <c-input-confirm
+                :tooltip="$t('tabs.tooltip.delete')"
+                show-icon
+                @confirmed="deleteTab(index)"
+              />
+            </td>
+          </tr>
+        </draggable>
+      </b-table-simple>
+    </c-form-table-wrapper>
 
     <b-modal
       id="createBlockSelectorTab"
diff --git a/client/web/compose/src/components/index.js b/client/web/compose/src/components/index.js
index 6a5045019..de01ec7f2 100644
--- a/client/web/compose/src/components/index.js
+++ b/client/web/compose/src/components/index.js
@@ -60,3 +60,4 @@ Vue.component('c-input-checkbox', components.CInputCheckbox)
 Vue.component('c-button-submit', components.CButtonSubmit)
 Vue.component('c-hint', components.CHint)
 Vue.component('c-input-select', components.CInputSelect)
+Vue.component('c-form-table-wrapper', components.CFormTableWrapper)
diff --git a/client/web/compose/src/themes/corteza-base/custom.scss b/client/web/compose/src/themes/corteza-base/custom.scss
index bb74ebe22..b9fd1a855 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/client/web/compose/src/themes/corteza-base/custom.scss
@@ -37,9 +37,3 @@
     }
   }
 }
-
-.value-only {
-  .col-form-label {
-    padding-bottom: 0px !important;
-  }
-}
diff --git a/client/web/compose/src/views/Admin/Modules/Edit.vue b/client/web/compose/src/views/Admin/Modules/Edit.vue
index 5e0a3fb8c..ca6be679d 100644
--- a/client/web/compose/src/views/Admin/Modules/Edit.vue
+++ b/client/web/compose/src/views/Admin/Modules/Edit.vue
@@ -215,7 +215,11 @@
                 </h5>
 
                 <b-row no-gutters>
-                  <b-form-group class="w-100">
+                  <c-form-table-wrapper
+                    :labels="{ addButton: $t('edit.newField') }"
+                    class="mb-2"
+                    @add-item="handleNewField"
+                  >
                     <b-table-simple
                       data-test-id="table-module-fields"
                       borderless
@@ -225,7 +229,6 @@
                       <thead>
                         <tr>
                           <th />
-
                           <th
                             class="text-primary"
                           >
@@ -238,7 +241,6 @@
                               />
                             </div>
                           </th>
-
                           <th
                             class="text-primary"
                           >
@@ -289,37 +291,62 @@
                           @updateKind="handleFieldKindUpdate(index)"
                         />
                       </draggable>
-
-                      <tr>
-                        <td colspan="1" />
-                        <td colspan="7">
-                          <b-button
-                            data-test-id="button-field-add"
-                            class="mb-5"
-                            variant="primary"
-                            @click="handleNewField"
-                          >
-                            + {{ $t('edit.newField') }}
-                          </b-button>
-                        </td>
-                      </tr>
-                      <tr>
-                        <td
-                          colspan="7"
-                          class="text-primary font-weight-bold"
-                        >
-                          {{ $t('edit.systemFields') }}
-                        </td>
-                      </tr>
-
-                      <field-row-view
-                        v-for="(field, index) in systemFields"
-                        :key="index"
-                        :field="field"
-                        class="mt-4"
-                      />
                     </b-table-simple>
-                  </b-form-group>
+                  </c-form-table-wrapper>
+                </b-row>
+
+                <hr>
+
+                <h5 class="mb-3">
+                  {{ $t('edit.systemFields') }}
+                </h5>
+
+                <b-row
+                  no-gutters
+                >
+                  <c-form-table-wrapper hide-add-button>
+                    <b-table-simple
+                      borderless
+                      responsive
+                      small
+                    >
+                      <thead>
+                        <tr>
+                          <th />
+
+                          <th
+                            class="text-primary"
+                            style="min-width: 250px;"
+                          >
+                            {{ $t('general:label.name') }}
+                          </th>
+
+                          <th
+                            class="text-primary"
+                            style="min-width: 250px;"
+                          >
+                            {{ $t('general.label.title') }}
+                          </th>
+
+                          <th
+                            colspan="5"
+                            class="text-primary"
+                            style="min-width: 250px;"
+                          >
+                            {{ $t('general:label.type') }}
+                          </th>
+                        </tr>
+                      </thead>
+
+                      <b-tbody>
+                        <field-row-view
+                          v-for="(field, index) in systemFields"
+                          :key="index"
+                          :field="field"
+                        />
+                      </b-tbody>
+                    </b-table-simple>
+                  </c-form-table-wrapper>
                 </b-row>
               </b-tab>
 
diff --git a/client/web/compose/src/views/Admin/Pages/Edit.vue b/client/web/compose/src/views/Admin/Pages/Edit.vue
index a03ce19f9..8a3e44344 100644
--- a/client/web/compose/src/views/Admin/Pages/Edit.vue
+++ b/client/web/compose/src/views/Admin/Pages/Edit.vue
@@ -232,11 +232,15 @@
             cols="12"
           >
             <hr>
-            <div class="list-background rounded border border-light p-3">
-              <b-form-group
-                :label="$t('page-layout.layouts')"
-                label-class="text-primary"
-                class="mb-0"
+
+            <b-form-group
+              :label="$t('page-layout.layouts')"
+              label-class="text-primary"
+              class="mb-0"
+            >
+              <c-form-table-wrapper
+                :labels="{ addButton: $t('general:label.add') }"
+                @add-item="addLayout"
               >
                 <b-table-simple
                   v-if="layouts.length > 0"
@@ -247,21 +251,18 @@
                   <b-thead>
                     <tr>
                       <th style="width: 40px;" />
-
                       <th
                         class="text-primary"
                         style="min-width: 300px;"
                       >
                         {{ $t('page-layout.title') }}
                       </th>
-
                       <th
                         class="text-primary"
                         style="min-width: 300px;"
                       >
                         {{ $t('page-layout.handle') }}
                       </th>
-
                       <th style="min-width: 100px;" />
                     </tr>
                   </b-thead>
@@ -284,7 +285,6 @@
                           class="text-secondary"
                         />
                       </b-td>
-
                       <b-td
                         class="align-middle"
                       >
@@ -294,7 +294,6 @@
                             :state="layoutTitleState(layout.meta.title)"
                             @input="layout.meta.updated = true"
                           />
-
                           <b-input-group-append>
                             <page-layout-translator
                               :page-layout="layout"
@@ -304,7 +303,6 @@
                           </b-input-group-append>
                         </b-input-group>
                       </b-td>
-
                       <b-td
                         class="align-middle"
                       >
@@ -314,7 +312,6 @@
                             :state="layoutHandleState(layout.handle)"
                             @input="layout.meta.updated = true"
                           />
-
                           <b-input-group-append>
                             <b-button
                               v-b-tooltip.noninteractive.hover="{ title: $t('page-layout.tooltip.configure'), container: '#body' }"
@@ -326,7 +323,6 @@
                                 :icon="['fas', 'wrench']"
                               />
                             </b-button>
-
                             <b-button
                               v-b-tooltip.noninteractive.hover="{ title: $t('page-layout.tooltip.builder'), container: '#body' }"
                               variant="primary"
@@ -341,7 +337,6 @@
                           </b-input-group-append>
                         </b-input-group>
                       </b-td>
-
                       <td
                         class="text-right align-middle"
                         style="min-width: 100px;"
@@ -356,7 +351,6 @@
                           :resource="`corteza::compose:page-layout/${layout.namespaceID}/${layout.pageID}/${layout.pageLayoutID}`"
                           class="text-dark border-0 mr-2"
                         />
-
                         <c-input-confirm
                           show-icon
                           @confirmed="removeLayout(index)"
@@ -365,21 +359,8 @@
                     </tr>
                   </draggable>
                 </b-table-simple>
-
-                <b-button
-                  variant="primary"
-                  size="sm"
-                  class="mt-1"
-                  @click="addLayout"
-                >
-                  <font-awesome-icon
-                    :icon="['fas', 'plus']"
-                    class="mr-1"
-                  />
-                  {{ $t('general:label.add') }}
-                </b-button>
-              </b-form-group>
-            </div>
+              </c-form-table-wrapper>
+            </b-form-group>
           </b-col>
         </b-row>
       </b-card>
@@ -598,11 +579,14 @@
           </b-form-checkbox>
         </b-form-group>
 
-        <div class="list-background rounded border border-light p-3">
-          <b-form-group
-            :label="$t('page-layout.recordToolbar.actions.label')"
-            label-class="text-primary"
-            class="mb-0"
+        <b-form-group
+          :label="$t('page-layout.recordToolbar.actions.label')"
+          label-class="text-primary"
+          class="mb-0"
+        >
+          <c-form-table-wrapper
+            :labels="{ addButton: $t('general:label.add') }"
+            @add-item="addLayoutAction"
           >
             <b-table-simple
               v-if="layoutEditor.layout.config.actions.length > 0"
@@ -633,7 +617,6 @@
                       />
                     </div>
                   </b-td>
-
                   <b-td style="min-width: 250px;">
                     <b-form-group
                       :label="$t('page-layout.recordToolbar.actions.buttonLabel')"
@@ -645,7 +628,6 @@
                         class="mb-1"
                       />
                     </b-form-group>
-
                     <b-form-group
                       v-if="action.kind === 'toLayout'"
                       :label="$t('page-layout.recordToolbar.actions.toLayout.label')"
@@ -659,7 +641,6 @@
                         text-field="label"
                       />
                     </b-form-group>
-
                     <b-form-group
                       v-if="action.kind === 'toURL'"
                       :label="$t('page-layout.recordToolbar.actions.toURL.label')"
@@ -673,7 +654,6 @@
                       />
                     </b-form-group>
                   </b-td>
-
                   <b-td style="min-width: 250px;">
                     <b-form-group
                       :label="$t('page-layout.recordToolbar.actions.kind.label')"
@@ -687,7 +667,6 @@
                         @change="onActionKindChange(action)"
                       />
                     </b-form-group>
-
                     <b-form-group
                       v-if="action.kind === 'toURL'"
                       :label="$t('page-layout.recordToolbar.actions.openIn.label')"
@@ -700,7 +679,6 @@
                       />
                     </b-form-group>
                   </b-td>
-
                   <b-td style="min-width: 150px;">
                     <b-form-group
                       :label="$t('page-layout.recordToolbar.actions.variant')"
@@ -712,7 +690,6 @@
                       />
                     </b-form-group>
                   </b-td>
-
                   <b-td style="min-width: 100px;">
                     <b-form-group
                       :label="$t('page-layout.recordToolbar.actions.placement.label')"
@@ -724,7 +701,6 @@
                       />
                     </b-form-group>
                   </b-td>
-
                   <b-td style="min-width: 80px;">
                     <b-form-group
                       :label="$t('page-layout.recordToolbar.actions.visible')"
@@ -741,7 +717,6 @@
                       </div>
                     </b-form-group>
                   </b-td>
-
                   <b-td style="min-width: 80px;">
                     <div
                       class="d-flex align-items-center justify-content-end"
@@ -757,21 +732,8 @@
                 </tr>
               </draggable>
             </b-table-simple>
-
-            <b-button
-              variant="primary"
-              size="sm"
-              class="mt-1"
-              @click="addLayoutAction"
-            >
-              <font-awesome-icon
-                :icon="['fas', 'plus']"
-                class="mr-1"
-              />
-              {{ $t('general:label.add') }}
-            </b-button>
-          </b-form-group>
-        </div>
+          </c-form-table-wrapper>
+        </b-form-group>
       </template>
     </b-modal>
 
@@ -1507,7 +1469,6 @@ export default {
       this.resolvedRoles = {}
       this.removedLayouts.clear()
       this.checkboxLabel = {}
-      this.abortableRequests = []
     },
   },
 }
diff --git a/client/web/reporter/src/components/Common/Prefilter.vue b/client/web/reporter/src/components/Common/Prefilter.vue
index 2bbbc2420..1a7575bff 100644
--- a/client/web/reporter/src/components/Common/Prefilter.vue
+++ b/client/web/reporter/src/components/Common/Prefilter.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="prefilter">
+  <c-form-table-wrapper hide-add-button>
     <b-table-simple
       v-if="render && filter.ref"
       responsive
@@ -23,6 +23,7 @@
               class="w-auto"
               @change="reRender()"
             />
+
             <span
               v-else
               class="px-3"
@@ -31,6 +32,7 @@
               {{ argIndex === 0 ? 'Where' : `${group.args[0].ref[0].toUpperCase() + group.args[0].ref.slice(1).toLowerCase()}` }}
             </span>
           </td>
+
           <template v-if="Object.keys(arg).includes('raw')">
             <td>
               <b-input-group>
@@ -54,6 +56,7 @@
               </b-input-group>
             </td>
           </template>
+
           <template v-else-if="group">
             <td>
               <b-input-group>
@@ -110,6 +113,7 @@
               </b-input-group>
             </td>
           </template>
+
           <td
             class="fit text-center align-middle pl-2 pr-0"
           >
@@ -119,6 +123,7 @@
             />
           </td>
         </tr>
+
         <tr
           :key="`${groupIndex}-add`"
         >
@@ -127,8 +132,9 @@
             :class="{ 'text-center': group.args[0].args && group.args[0].args.length }"
           >
             <b-button
-              variant="link text-decoration-none"
-              class="px-0"
+              variant="primary"
+              size="sm"
+              class="mt-1"
               @click="addFilter(groupIndex)"
             >
               <font-awesome-icon
@@ -178,8 +184,8 @@
       v-else
     >
       <b-button
-        variant="link text-decoration-none"
-        class="px-0"
+        variant="primary"
+        size="sm"
         @click="initFilter()"
       >
         <font-awesome-icon
@@ -190,7 +196,7 @@
         {{ $t('general:label.add') }}
       </b-button>
     </tr>
-  </div>
+  </c-form-table-wrapper>
 </template>
 
 <script>
diff --git a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/index.vue b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/index.vue
index 97875f226..1cefd323a 100644
--- a/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/index.vue
+++ b/client/web/reporter/src/components/Report/Blocks/DisplayElements/Configurators/index.vue
@@ -82,6 +82,7 @@
                 ascending: $t('general:label.ascending'),
                 descending: $t('general:label.descending'),
                 none: $t('general:label.none'),
+                addButton: $t('general:label.add'),
               }"
             />
           </b-form-group>
diff --git a/client/web/reporter/src/components/Report/Datasources/Aggregate/Aggregate.vue b/client/web/reporter/src/components/Report/Datasources/Aggregate/Aggregate.vue
index f0fce2282..428b02e5a 100644
--- a/client/web/reporter/src/components/Report/Datasources/Aggregate/Aggregate.vue
+++ b/client/web/reporter/src/components/Report/Datasources/Aggregate/Aggregate.vue
@@ -1,11 +1,15 @@
 <template>
-  <div>
+  <c-form-table-wrapper
+    :labels="{
+      addButton: $t('general:label.add')
+    }"
+    @add-item="addColumn"
+  >
     <b-table-simple
       v-if="columns.length"
       responsive
       borderless
       small
-      class="mb-0"
     >
       <b-thead>
         <b-tr>
@@ -14,11 +18,13 @@
           >
             {{ $t('datasources:name') }}
           </b-th>
+
           <b-th
             class="w-25"
           >
             {{ $t('datasources:label') }}
           </b-th>
+
           <b-th
             class="w-50"
           >
@@ -38,18 +44,21 @@
               :placeholder="$t('datasources:new.name')"
             />
           </b-td>
+
           <b-td>
             <b-form-input
               v-model="column.label"
               :placeholder="$t('datasources:new.label')"
             />
           </b-td>
+
           <b-td>
             <b-form-input
               v-model="column.def.raw"
               :placeholder="$t('datasources:expression')"
             />
           </b-td>
+
           <b-td class="align-middle">
             <c-input-confirm
               show-icon
@@ -59,20 +68,7 @@
         </b-tr>
       </b-tbody>
     </b-table-simple>
-
-    <b-button
-      variant="link text-decoration-none"
-      class="px-0"
-      @click="addColumn()"
-    >
-      <font-awesome-icon
-        :icon="['fas', 'plus']"
-        size="sm"
-        class="mr-1"
-      />
-      {{ $t('datasources:add') }}
-    </b-button>
-  </div>
+  </c-form-table-wrapper>
 </template>
 
 <script>
@@ -84,11 +80,6 @@ export default {
     },
   },
 
-  data () {
-    return {
-    }
-  },
-
   computed: {
     columns: {
       get () {
diff --git a/client/web/reporter/src/components/Report/Datasources/Aggregate/GroupBy.vue b/client/web/reporter/src/components/Report/Datasources/Aggregate/GroupBy.vue
index 6df77528b..1b6d7785a 100644
--- a/client/web/reporter/src/components/Report/Datasources/Aggregate/GroupBy.vue
+++ b/client/web/reporter/src/components/Report/Datasources/Aggregate/GroupBy.vue
@@ -1,11 +1,15 @@
 <template>
-  <div>
+  <c-form-table-wrapper
+    :labels="{
+      addButton: $t('general:label.add')
+    }"
+    @add-item="addParam"
+  >
     <b-table-simple
       v-if="groups.length"
       responsive
       borderless
       small
-      class="mb-0"
     >
       <b-thead>
         <b-tr>
@@ -14,11 +18,13 @@
           >
             {{ $t('datasources:name') }}
           </b-th>
+
           <b-th
             class="w-25"
           >
             {{ $t('datasources:label') }}
           </b-th>
+
           <b-th
             class="w-50"
           >
@@ -38,18 +44,21 @@
               :placeholder="$t('datasources:new.name')"
             />
           </b-td>
+
           <b-td>
             <b-form-input
               v-model="group.label"
               :placeholder="$t('datasources:new.label')"
             />
           </b-td>
+
           <b-td>
             <b-form-input
               v-model="group.def.raw"
               :placeholder="$t('datasources:expression')"
             />
           </b-td>
+
           <b-td class="align-middle">
             <c-input-confirm
               show-icon
@@ -59,20 +68,7 @@
         </b-tr>
       </b-tbody>
     </b-table-simple>
-
-    <b-button
-      variant="link text-decoration-none"
-      class="px-0"
-      @click="addParam()"
-    >
-      <font-awesome-icon
-        :icon="['fas', 'plus']"
-        size="sm"
-        class="mr-1"
-      />
-      {{ $t('datasources:add') }}
-    </b-button>
-  </div>
+  </c-form-table-wrapper>
 </template>
 
 <script>
diff --git a/lib/vue/src/components/index.ts b/lib/vue/src/components/index.ts
index 12bc9c4dc..b9db4f7c4 100644
--- a/lib/vue/src/components/index.ts
+++ b/lib/vue/src/components/index.ts
@@ -94,4 +94,8 @@ export {
   CMap,
 } from './map'
 
+export {
+  CFormTableWrapper,
+} from './wrapper'
+
 export { default as C3 } from './c3'
diff --git a/lib/vue/src/components/input/CInputPresort.vue b/lib/vue/src/components/input/CInputPresort.vue
index a373d9248..2cf2a2dd1 100644
--- a/lib/vue/src/components/input/CInputPresort.vue
+++ b/lib/vue/src/components/input/CInputPresort.vue
@@ -1,70 +1,76 @@
 <template>
-  <div>
-    <b-table-simple
+  <c-form-table-wrapper
+    :labels="{ addButton: labels.addButton }"
+    :hide-add-button="textInput"
+    @add-item="items.push({ field: undefined, descending: false })"
+  >
+    <b-form-group
       v-if="!textInput"
-      borderless
-      small
-      responsive="lg"
-      class="mb-0"
+      :label="labels.title"
+       label-class="text-primary"
     >
-      <draggable
-        :list.sync="items"
-        group="sort"
-        handle=".grab"
-        tag="tbody"
+      <b-table-simple
+        borderless
+        small
+        responsive="lg"
+        class="mb-0"
       >
-        <tr
-          v-for="(column, index) in items"
-          :key="index"
+        <draggable
+          :list.sync="items"
+          group="sort"
+          handle=".grab"
+          tag="tbody"
         >
-          <td
-            class="grab text-center align-middle"
-            style="width: 40px;"
+          <tr
+            v-for="(column, index) in items"
+            :key="index"
           >
-            <font-awesome-icon
-              :icon="['fas', 'bars']"
-              class="text-secondary"
-            />
-          </td>
-
-          <td
-            class="align-middle"
-            style="min-width: 250px;"
-          >
-            <c-input-select
-              v-model="column.field"
-              :options="availableFields"
-              :reduce="o => o.name"
-              :placeholder="labels.none"
-              class="rounded"
-            />
-          </td>
-
-          <td
-            class="text-center align-middle"
-            style="min-width: 200px;"
-          >
-            <b-form-radio-group
-              v-model="column.descending"
-              :options="sortDirections"
-              buttons
-              button-variant="outline-primary"
-              class="bg-white"
-            />
-          </td>
-
-          <td
-            class="align-middle text-right"
-            style="min-width: 80px; width: 80px;"
-          >
-            <c-input-confirm
-              show-icon
-              @confirmed="items.splice(index, 1)"
-            />
-          </td>
-        </tr>
-      </draggable>
-    </b-table-simple>
+            <td
+              class="grab text-center align-middle"
+              style="width: 40px;"
+            >
+              <font-awesome-icon
+                :icon="['fas', 'bars']"
+                class="text-secondary"
+              />
+            </td>
+            <td
+              class="align-middle"
+              style="min-width: 250px;"
+            >
+              <c-input-select
+                v-model="column.field"
+                :options="availableFields"
+                :reduce="o => o.name"
+                :placeholder="labels.none"
+                class="rounded"
+              />
+            </td>
+            <td
+              class="text-center align-middle"
+              style="min-width: 200px;"
+            >
+              <b-form-radio-group
+                v-model="column.descending"
+                :options="sortDirections"
+                buttons
+                button-variant="outline-primary"
+                class="bg-white"
+              />
+            </td>
+            <td
+              class="align-middle text-right"
+              style="min-width: 80px; width: 80px;"
+            >
+              <c-input-confirm
+                show-icon
+                @confirmed="items.splice(index, 1)"
+              />
+            </td>
+          </tr>
+        </draggable>
+      </b-table-simple>
+    </b-form-group>
 
     <div
       v-else
@@ -79,23 +85,10 @@
     </div>
 
     <div
+      v-if="allowTextInput"
       class="d-flex align-items-center mt-1"
     >
       <b-button
-        v-if="!textInput"
-        variant="primary"
-        size="sm"
-        @click="items.push({ field: undefined, descending: false })"
-      >
-        <font-awesome-icon
-          :icon="['fas', 'plus']"
-          class="mr-1"
-        />
-        {{ labels.add }}
-      </b-button>
-
-      <b-button
-        v-if="allowTextInput"
         variant="link"
         size="sm"
         class="text-decoration-none ml-auto"
@@ -104,17 +97,19 @@
         {{ labels.toggleInput }}
       </b-button>
     </div>
-  </div>
+  </c-form-table-wrapper>
 </template>
 
 <script>
 import Draggable from 'vuedraggable'
 import CInputSelect from './CInputSelect.vue'
+import CFormTableWrapper from '../wrapper/CFormTableWrapper.vue'
 
 export default {
   components: {
     Draggable,
     CInputSelect,
+    CFormTableWrapper,
   },
 
   props: {
diff --git a/lib/vue/src/components/wrapper/CFormTableWrapper.vue b/lib/vue/src/components/wrapper/CFormTableWrapper.vue
new file mode 100644
index 000000000..f70f95b28
--- /dev/null
+++ b/lib/vue/src/components/wrapper/CFormTableWrapper.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="list-background w-100 p-3 rounded border border-light">
+    <slot></slot>
+
+    <b-button
+      v-if="!hideAddButton"
+      variant="primary"
+      size="sm"
+      :data-test-id="testID"
+      :class="addButtonClass"
+      :disabled="disableAddButton"
+      @click="$emit('add-item')"
+    >
+       <font-awesome-icon
+         :icon="['fas', 'plus']"
+         class="mr-1"
+       />
+
+      {{ labels.addButton || '' }}
+    </b-button>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'CFormTableWrapper',
+
+  props: {
+    labels: {
+      type: Object,
+      default: () => {},
+    },
+
+    hideAddButton: {
+      type: Boolean,
+      default: false,
+    },
+
+    disableAddButton: {
+      type: Boolean,
+      default: false,
+    },
+
+    addButtonClass: {
+      type: String,
+      default: '',
+    },
+
+    buttonTestId : {
+      type: String,
+      default: '',
+    }
+  },
+}
+</script>
+
+<style scoped>
+.list-background {
+  background-color: var(--body-bg);
+}
+</style>
diff --git a/lib/vue/src/components/wrapper/index.ts b/lib/vue/src/components/wrapper/index.ts
new file mode 100644
index 000000000..a52af369e
--- /dev/null
+++ b/lib/vue/src/components/wrapper/index.ts
@@ -0,0 +1 @@
+export { default as CFormTableWrapper } from './CFormTableWrapper.vue'
diff --git a/locale/en/corteza-webapp-admin/general.yaml b/locale/en/corteza-webapp-admin/general.yaml
index 18f85049b..f299c0be4 100644
--- a/locale/en/corteza-webapp-admin/general.yaml
+++ b/locale/en/corteza-webapp-admin/general.yaml
@@ -1,4 +1,5 @@
 label:
+  add: Add
   general:
     yes: Yes
     no: No
diff --git a/locale/en/corteza-webapp-compose/block.yaml b/locale/en/corteza-webapp-compose/block.yaml
index dcb263a58..b97a0a7f4 100644
--- a/locale/en/corteza-webapp-compose/block.yaml
+++ b/locale/en/corteza-webapp-compose/block.yaml
@@ -843,7 +843,6 @@ tabs:
   label: Tabs
   alertTitle: Set a title for your block
   title: Tabs
-  addTab: + Add
   tab: Tab
   selectBlock: Choose a block
   noTabs: No tabs configured
diff --git a/locale/en/corteza-webapp-compose/module.yaml b/locale/en/corteza-webapp-compose/module.yaml
index 1442f3d12..b74e63abe 100644
--- a/locale/en/corteza-webapp-compose/module.yaml
+++ b/locale/en/corteza-webapp-compose/module.yaml
@@ -71,7 +71,7 @@ edit:
   steps:
     recordList: Page with record list
     recordPage: Record page
-  systemFields: 'System fields:'
+  systemFields: 'System fields'
   tooltip:
     attributes: Select if the field can hold multiple values, if it's required field or if contains sensitive data
     name: Should be at least 2 characters long. Can contain only letters, numbers, underscores and dashes. Must end with letter or number.