diff --git a/src/views/admin/components/lists/mappers-list.vue b/src/views/admin/components/lists/mappers-list.vue
index 4bc9c5f0c..b5dd1236e 100644
--- a/src/views/admin/components/lists/mappers-list.vue
+++ b/src/views/admin/components/lists/mappers-list.vue
@@ -1,95 +1,25 @@
 <template>
-    <div class="table-container">
-        <div class="table-wrapper">
-            <table class="tainacan-table is-narrow">
-                <thead>
-                    <tr>
-                        <!-- Name -->
-                        <th>
-                            <div class="th-wrap">{{ $i18n.get('label_name') }}</div>
-                        </th>
-                        <!-- Description -->
-                        <th>
-                            <div class="th-wrap">{{ $i18n.get('label_description') }}</div>
-                        </th>
-                        <!-- Actions -->
-                        <th class="actions-header">
-                            &nbsp;
-                            <!-- nothing to show on header for actions cell-->
-                        </th>
-                    </tr>
-                </thead>
-                <tbody v-if="!isLoading">
-                    <template v-for="(mapper, index) of mappers">
-                        <tr :key="index">
-                            <!-- Name -->
-                            <td
-                                    class="column-default-width column-main-content"
-                                    :label="$i18n.get('label_name')"
-                                    :aria-label="$i18n.get('label_name') + ': ' + mapper.name">
-                                <p
-                                        v-tooltip="{
-                                            delay: {
-                                                shown: 500,
-                                                hide: 120,
-                                            },
-                                            content: mapper.name,
-                                            autoHide: false,
-                                            popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
-                                            placement: 'auto-start'
-                                        }">
-                                    {{ mapper.name }}
-                                </p>
-                            </td>
-                            <!-- Description -->
-                            <td
-                                    class="table-creation column-large-width"
-                                    :label="$i18n.get('label_description')"
-                                    :aria-label="$i18n.get('label_description') + ': ' + mapper.description">
-                                <p
-                                        v-tooltip="{
-                                            delay: {
-                                                shown: 500,
-                                                hide: 120,
-                                            },
-                                            content: mapper.description,
-                                            autoHide: false,
-                                            popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
-                                            placement: 'auto-start'
-                                        }"
-                                        v-html="mapper.description"/>
-                            </td>
-                            
-                            <!-- Actions -->
-                            <td  
-                                    class="actions-cell column-default-width" 
-                                    :label="$i18n.get('label_actions')">
-                                <div class="actions-container">
-                                    <b-switch 
-                                            v-model="mapper.enabled"
-                                            size="is-small" />
-                                    <a 
-                                            id="button-edit" 
-                                            :aria-label="$i18n.get('edit')" 
-                                            @click.prevent.stop="goToMapperEditionPage(mapper.slug)">                      
-                                        <span 
-                                                v-tooltip="{
-                                                    content: $i18n.get('edit'),
-                                                    autoHide: true,
-                                                    popperClass: ['tainacan-tooltip', 'tooltip', 'tainacan-repository-tooltip'],
-                                                    placement: 'auto'
-                                                }"
-                                                class="icon">
-                                            <i class="tainacan-icon tainacan-icon-1-25em tainacan-icon-edit"/>
-                                        </span>
-                                    </a>
-                                </div>
-                            </td>
-                        </tr>
-                    </template>
-                </tbody>
-            </table>
+    <div>
+
+        <div class="mappers-container">
+            <div
+                    class="mapper"
+                    v-for="mapper in mappers"
+                    :key="mapper.slug"
+                    @click="goToMapperEditionPage(mapper.slug)">
+                <h4>{{ mapper.name }}</h4>
+                <p>{{ mapper.description }}</p>       
+                <b-switch 
+                        v-model="mapper.enabled"
+                        size="is-small" />     
+            </div>
+
         </div>
+        
+        <b-loading 
+                :active="isLoading" 
+                :can-cancel="false"/>
+
     </div>
 </template>
 
@@ -109,9 +39,24 @@
 </script>
 
 <style scoped lang="scss">
+    .mappers-container {
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 20px;
+        margin: 20px;
 
-.table-container .table-wrapper table.tainacan-table tbody tr {
-    cursor: default;
-}
+        .mapper {
+            border: 1px solid var(--tainacan-gray2);
+            padding: 15px;
+            min-height: 100px;
+            cursor: pointer;
+            background-color: var(--tainacan-item-background-color);
+            transition: border 0.3s ease, background-color 0.15s ease;
 
+            &:hover {
+                background-color: var(--tainacan-item-hover-background-color);
+                border: 1px solid var(--tainacan-gray3);
+            }
+        }
+    }
 </style>
diff --git a/src/views/admin/pages/lists/available-exporters-page.vue b/src/views/admin/pages/lists/available-exporters-page.vue
index 0a3295e6e..e0e3230b1 100644
--- a/src/views/admin/pages/lists/available-exporters-page.vue
+++ b/src/views/admin/pages/lists/available-exporters-page.vue
@@ -59,17 +59,21 @@
 <style lang="scss" scoped>
 
     .exporter-types-container {
-        display: flex;
-        flex-wrap: wrap;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 20px;
+        margin: 20px;
 
         .exporter-type {
             border: 1px solid var(--tainacan-gray2);
             padding: 15px;
-            margin: 20px;
+            min-height: 100px;
             cursor: pointer;
-            transition: border 0.3s ease;
+            background-color: var(--tainacan-item-background-color);
+            transition: border 0.3s ease, background-color 0.15s ease;
 
             &:hover {
+                background-color: var(--tainacan-item-hover-background-color);
                 border: 1px solid var(--tainacan-gray3);
             }
         }
diff --git a/src/views/admin/pages/lists/available-importers-page.vue b/src/views/admin/pages/lists/available-importers-page.vue
index 685c5724f..a6284e2ff 100644
--- a/src/views/admin/pages/lists/available-importers-page.vue
+++ b/src/views/admin/pages/lists/available-importers-page.vue
@@ -59,20 +59,21 @@ export default {
 <style lang="scss" scoped>
 
     .importer-types-container {
-        display: flex;
-        flex-wrap: wrap;
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+        gap: 20px;
+        margin: 20px;
 
         .importer-type {
             border: 1px solid var(--tainacan-gray2);
             padding: 15px;
-            margin: 20px;
+            min-height: 100px;
             cursor: pointer;
-            max-width: 20%;
-            flex-grow: 1;
-            flex-basis: 20%;
-            transition: border 0.3s ease;
+            background-color: var(--tainacan-item-background-color);
+            transition: border 0.3s ease, background-color 0.15s ease;
 
             &:hover {
+                background-color: var(--tainacan-item-hover-background-color);
                 border: 1px solid var(--tainacan-gray3);
             }
         }
diff --git a/src/views/admin/pages/lists/mappers-page.vue b/src/views/admin/pages/lists/mappers-page.vue
index 8a40ddf7f..8efd8d7b5 100644
--- a/src/views/admin/pages/lists/mappers-page.vue
+++ b/src/views/admin/pages/lists/mappers-page.vue
@@ -1,11 +1,9 @@
 <template>
     <div :class="{ 'repository-level-page page-container': isRepositoryLevel }">
-        <tainacan-title 
-                :bread-crumb-items="[{ path: '', label: $i18n.get('mappers') }]"/>
+        <tainacan-title :bread-crumb-items="[{ path: '', label: $i18n.get('mappers') }]"/>
         
         <template v-if="isRepositoryLevel">
             <p>{{ $i18n.get('info_repository_metadata_inheritance') }}</p>
-            <br>
         </template>
 
         <div>
diff --git a/src/views/admin/scss/tainacan-admin.scss b/src/views/admin/scss/tainacan-admin.scss
index 8fd7d6ba9..1660eeaae 100644
--- a/src/views/admin/scss/tainacan-admin.scss
+++ b/src/views/admin/scss/tainacan-admin.scss
@@ -131,7 +131,7 @@ a:hover {
     overflow-x: hidden;
 
     &>p {
-        font-size: 0.8125em;
+        font-size: 0.875em;
     }
 }
 html.is-clipped .page-container:not(.is-filters-menu-open) {