diff --git a/client/web/compose/src/components/Admin/EditorToolbar.vue b/client/web/compose/src/components/Admin/EditorToolbar.vue
index 753fe815f..c348ee2e9 100644
--- a/client/web/compose/src/components/Admin/EditorToolbar.vue
+++ b/client/web/compose/src/components/Admin/EditorToolbar.vue
@@ -6,16 +6,16 @@
   >
     <b-row
       no-gutters
-      class="wrap-with-vertical-gutters align-items-center"
+      class="gap-1 gap-col-3 flex-column flex-md-row align-items-md-center"
     >
       <div
-        class="wrap-with-vertical-gutters align-items-center"
+        class="d-flex gap-1 align-items-center"
       >
         <b-button
           data-test-id="button-back-without-save"
           variant="link"
           :disabled="processing"
-          class="text-dark back mr-auto"
+          class="text-dark back mr-auto p-1"
           @click="$emit('back')"
         >
           <font-awesome-icon
@@ -25,15 +25,18 @@
           {{ $t('label.backWithoutSave') }}
         </b-button>
       </div>
+
       <div
-        class="ml-auto"
+        class="ml-md-auto d-flex flex-column d-inline-block-md"
       >
         <slot />
       </div>
+
       <div
-        class="d-flex wrap-with-vertical-gutters align-items-center ml-auto"
+        class="d-flex gap-1 flex-md-row flex-column align-items-md-center ml-md-auto"
       >
         <slot name="delete" />
+
         <c-input-confirm
           v-if="!hideDelete"
           v-b-tooltip.hover
@@ -45,6 +48,7 @@
           variant="danger"
           :title="deleteTooltip"
           :borderless="false"
+          class="d-flex flex-column"
           @confirmed="$emit('delete')"
         />
 
@@ -59,9 +63,10 @@
           variant="light"
           :text="$t('label.saveAsCopy')"
           size="lg"
-          class="ml-2"
+          class="ml-md-2"
           @submit="$emit('clone')"
         />
+
         <c-button-submit
           v-if="!hideSave"
           data-test-id="button-save-and-close"
@@ -70,9 +75,10 @@
           variant="light"
           :text="$t('label.saveAndClose')"
           size="lg"
-          class="ml-2"
+          class="ml-md-2"
           @submit="$emit('saveAndClose')"
         />
+
         <c-button-submit
           v-if="!hideSave"
           data-test-id="button-save"
@@ -80,7 +86,7 @@
           :processing="processingSave"
           :text="$t('label.save')"
           size="lg"
-          class="ml-2"
+          class="ml-md-2"
           @submit="$emit('save')"
         />
       </div>
diff --git a/client/web/compose/src/components/Admin/Import.vue b/client/web/compose/src/components/Admin/Import.vue
index 4e9fe1ee2..9cef7f646 100644
--- a/client/web/compose/src/components/Admin/Import.vue
+++ b/client/web/compose/src/components/Admin/Import.vue
@@ -3,7 +3,7 @@
     <b-btn
       variant="light"
       size="lg"
-      class="float-left"
+      class="w-100"
       @click="showModal=true"
     >
       {{ $t('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 9e3234206..8a33e5aa5 100644
--- a/client/web/compose/src/themes/corteza-base/custom.scss
+++ b/client/web/compose/src/themes/corteza-base/custom.scss
@@ -404,3 +404,11 @@ input[type="search"]::-webkit-search-cancel-button {
     width: 100%;
   }
 }
+
+.gap-1 {
+  gap: 0.5rem;
+}
+
+.gap-2 {
+  gap: 1rem;
+}
diff --git a/client/web/compose/src/views/Admin/Modules/List.vue b/client/web/compose/src/views/Admin/Modules/List.vue
index 230de40b2..e1c4fa37b 100644
--- a/client/web/compose/src/views/Admin/Modules/List.vue
+++ b/client/web/compose/src/views/Admin/Modules/List.vue
@@ -36,14 +36,14 @@
       <template #header>
         <div class="flex-grow-1">
           <div
-            class="wrap-with-vertical-gutters"
+            class="gap-1 d-flex flex-wrap flex-md-row flex-column"
           >
             <b-btn
               v-if="namespace.canCreateModule"
               data-test-id="button-create"
               variant="primary"
               size="lg"
-              class="mr-1 float-left"
+              class="mr-1"
               :to="{ name: 'admin.modules.create' }"
             >
               {{ $t('createLabel') }}
@@ -53,14 +53,14 @@
               v-if="namespace.canCreateModule"
               :namespace="namespace"
               type="module"
-              class="mr-1 float-left"
+              class="mr-1"
               @importSuccessful="onImportSuccessful"
             />
 
             <export
               :list="modules"
               type="module"
-              class="mr-1 float-left"
+              class="mr-1"
             />
 
             <b-dropdown
diff --git a/client/web/compose/src/views/Admin/Pages/Builder.vue b/client/web/compose/src/views/Admin/Pages/Builder.vue
index 2310acd6e..7b6b72dc5 100644
--- a/client/web/compose/src/views/Admin/Pages/Builder.vue
+++ b/client/web/compose/src/views/Admin/Pages/Builder.vue
@@ -274,7 +274,7 @@
           data-test-id="button-add-block"
           variant="light"
           size="lg"
-          class="mr-1 float-right"
+          class="mr-1"
         >
           + {{ $t('build.addBlock') }}
         </b-button>
@@ -287,7 +287,7 @@
             :disabled="processing"
             size="lg"
             variant="light"
-            class="ml-2"
+            class="ml-md-2"
           >
             <b-dropdown-item
               data-test-id="dropdown-item-saveAsCopy-ref"
diff --git a/lib/vue/src/components/resourceList/CResourceList.vue b/lib/vue/src/components/resourceList/CResourceList.vue
index 5eae5c222..cae1095a8 100644
--- a/lib/vue/src/components/resourceList/CResourceList.vue
+++ b/lib/vue/src/components/resourceList/CResourceList.vue
@@ -127,10 +127,10 @@
       #footer
     >
       <div
-        class="d-flex align-items-center justify-content-between"
+        class="d-flex align-items-center justify-content-between flex-wrap"
       >
         <div
-          class="text-truncate"
+          class="text-truncate ml-3 ml-sm-0"
         >
           <div
             v-if="!hideTotal"
@@ -151,6 +151,7 @@
           >
             <font-awesome-icon :icon="['fas', 'angle-double-left']" />
           </b-button>
+
           <b-button
             :disabled="!hasPrevPage"
             variant="outline-light"
@@ -163,6 +164,7 @@
             />
             {{ translations.prevPagination }}
           </b-button>
+
           <b-button
             :disabled="!hasNextPage"
             variant="outline-light"