diff --git a/src/css/app.scss b/src/css/app.scss
index f11ab865c1..b742dae2fb 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -58,6 +58,11 @@ body.body--dark {
     border-radius: 8px;
 }
 
+.vn-card-list {
+    width: 100%;
+    max-width: 60em;
+}
+
 /* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
     content: ' *';
diff --git a/src/pages/Claim/ClaimList.vue b/src/pages/Claim/ClaimList.vue
index b338549592..a0e38079d2 100644
--- a/src/pages/Claim/ClaimList.vue
+++ b/src/pages/Claim/ClaimList.vue
@@ -71,7 +71,7 @@ function viewSummary(id) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="ClaimList"
                 url="Claims/filter"
@@ -145,13 +145,6 @@ function viewSummary(id) {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search claim: Buscar reclamación
diff --git a/src/pages/Claim/ClaimRmaList.vue b/src/pages/Claim/ClaimRmaList.vue
index 3774932e35..b906e32fad 100644
--- a/src/pages/Claim/ClaimRmaList.vue
+++ b/src/pages/Claim/ClaimRmaList.vue
@@ -84,7 +84,7 @@ async function remove({ id }) {
                 </QForm>
             </QCard>
         </QPageSticky>
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="ClaimRmaList"
                 url="ClaimRmas"
@@ -160,7 +160,6 @@ async function remove({ id }) {
     padding-top: 156px;
 }
 
-.card-list,
 .card {
     width: 100%;
     max-width: 60em;
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 540afcc4cc..a78720d03d 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -65,7 +65,7 @@ const redirectToCreateView = () => {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 auto-load
                 data-key="CustomerList"
@@ -116,13 +116,6 @@ const redirectToCreateView = () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search customer: Buscar cliente
diff --git a/src/pages/Customer/Payments/CustomerPayments.vue b/src/pages/Customer/Payments/CustomerPayments.vue
index de774e63e0..eedaaf1372 100644
--- a/src/pages/Customer/Payments/CustomerPayments.vue
+++ b/src/pages/Customer/Payments/CustomerPayments.vue
@@ -122,7 +122,7 @@ function stateColor(row) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md customer-payments">
-        <div class="card-list">
+        <div class="vn-card-list">
             <QToolbar class="q-pa-none justify-end">
                 <QBtn
                     @click="arrayData.refresh()"
@@ -278,18 +278,13 @@ function stateColor(row) {
 
 <style lang="scss">
 .customer-payments {
-    .card-list {
-        width: 100%;
-        max-width: 60em;
-
-        .q-table--dense .q-table th:first-child {
-            padding-left: 0;
-        }
-        td {
-            max-width: 130px;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
+    .q-table--dense .q-table th:first-child {
+        padding-left: 0;
+    }
+    td {
+        max-width: 130px;
+        overflow: hidden;
+        text-overflow: ellipsis;
     }
 }
 </style>
diff --git a/src/pages/Entry/EntryList.vue b/src/pages/Entry/EntryList.vue
index 40747178c9..0cf707efa2 100644
--- a/src/pages/Entry/EntryList.vue
+++ b/src/pages/Entry/EntryList.vue
@@ -47,7 +47,7 @@ onMounted(async () => {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="EntryList"
                 url="Entries/filter"
@@ -128,13 +128,6 @@ onMounted(async () => {
     </QPageSticky>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search entries: Buscar entradas
diff --git a/src/pages/InvoiceIn/InvoiceInList.vue b/src/pages/InvoiceIn/InvoiceInList.vue
index bf791c10e5..2f508ec345 100644
--- a/src/pages/InvoiceIn/InvoiceInList.vue
+++ b/src/pages/InvoiceIn/InvoiceInList.vue
@@ -71,7 +71,7 @@ function viewSummary(id) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="InvoiceInList"
                 url="InvoiceIns/filter"
@@ -157,13 +157,6 @@ function viewSummary(id) {
     </QPageSticky>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search invoice: Buscar factura emitida
diff --git a/src/pages/InvoiceOut/InvoiceOutList.vue b/src/pages/InvoiceOut/InvoiceOutList.vue
index 292fa2e0ab..36d1d3aad4 100644
--- a/src/pages/InvoiceOut/InvoiceOutList.vue
+++ b/src/pages/InvoiceOut/InvoiceOutList.vue
@@ -181,7 +181,7 @@ const downloadCsv = () => {
                     </div>
                 </QToolbar>
                 <div class="flex flex-center q-pa-md">
-                    <div class="card-list">
+                    <div class="vn-card-list">
                         <CardList
                             :element="row"
                             :id="row.id"
@@ -246,13 +246,6 @@ const downloadCsv = () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 en:
     searchInvoice: Search issued invoice
diff --git a/src/pages/Order/OrderCatalog.vue b/src/pages/Order/OrderCatalog.vue
index 55f5e7da18..21442d10d9 100644
--- a/src/pages/Order/OrderCatalog.vue
+++ b/src/pages/Order/OrderCatalog.vue
@@ -1,7 +1,7 @@
 <script setup>
 import { useStateStore } from 'stores/useStateStore';
 import { useRoute } from 'vue-router';
-import {onMounted, onUnmounted, ref} from 'vue';
+import { onMounted, onUnmounted, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnSearchbar from 'components/ui/VnSearchbar.vue';
@@ -20,7 +20,7 @@ const catalogParams = {
     orderBy: JSON.stringify({ field: 'relevancy DESC, name', way: 'ASC', isTag: false }),
 };
 
-const tags = ref([])
+const tags = ref([]);
 
 function extractTags(items) {
     const resultTags = [];
@@ -34,7 +34,7 @@ function extractTags(items) {
             }
         });
     });
-    tags.value = resultTags
+    tags.value = resultTags;
 }
 </script>
 
@@ -70,7 +70,7 @@ function extractTags(items) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="full-width">
             <VnPaginate
                 data-key="OrderCatalogList"
                 url="Orders/CatalogFilter"
@@ -93,10 +93,6 @@ function extractTags(items) {
 </template>
 
 <style lang="scss" scoped>
-.card-list {
-    width: 100%;
-}
-
 .catalog-list {
     display: flex;
     align-items: flex-start;
diff --git a/src/pages/Order/OrderLines.vue b/src/pages/Order/OrderLines.vue
index 0dce708315..a2ee424815 100644
--- a/src/pages/Order/OrderLines.vue
+++ b/src/pages/Order/OrderLines.vue
@@ -83,7 +83,7 @@ async function confirmOrder() {
         auto-load
     />
     <QPage :key="componentKey" class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <div v-if="!orderSummary.total" class="no-result">
                 {{ t('globals.noResults') }}
             </div>
@@ -228,11 +228,6 @@ async function confirmOrder() {
 }
 </style>
 <style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-
 .header {
     color: $primary;
     font-weight: bold;
diff --git a/src/pages/Order/OrderList.vue b/src/pages/Order/OrderList.vue
index 362a68b4d5..8b6b53fbe0 100644
--- a/src/pages/Order/OrderList.vue
+++ b/src/pages/Order/OrderList.vue
@@ -4,7 +4,7 @@ import { onMounted, onUnmounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { useStateStore } from 'stores/useStateStore';
 import { toCurrency, toDate } from 'src/filters';
-import {useQuasar} from "quasar";
+import { useQuasar } from 'quasar';
 import CardList from 'components/ui/CardList.vue';
 import WorkerDescriptorProxy from 'pages/Worker/Card/WorkerDescriptorProxy.vue';
 import CustomerDescriptorProxy from 'pages/Customer/Card/CustomerDescriptorProxy.vue';
@@ -12,7 +12,7 @@ import VnPaginate from 'components/ui/VnPaginate.vue';
 import VnLv from 'components/ui/VnLv.vue';
 import OrderSearchbar from 'pages/Order/Card/OrderSearchbar.vue';
 import OrderFilter from 'pages/Order/Card/OrderFilter.vue';
-import OrderSummaryDialog from "pages/Order/Card/OrderSummaryDialog.vue";
+import OrderSummaryDialog from 'pages/Order/Card/OrderSummaryDialog.vue';
 
 const stateStore = useStateStore();
 const quasar = useQuasar();
@@ -63,7 +63,7 @@ function viewSummary(id) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="OrderList"
                 url="Orders/filter"
@@ -153,10 +153,3 @@ function viewSummary(id) {
         </QPageSticky>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Order/OrderVolume.vue b/src/pages/Order/OrderVolume.vue
index 4f4c269f68..5bb106edc7 100644
--- a/src/pages/Order/OrderVolume.vue
+++ b/src/pages/Order/OrderVolume.vue
@@ -35,7 +35,7 @@ const loadVolumes = async (rows) => {
         auto-load
     />
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <div
                 v-if="!volumeSummary?.totalVolume && !volumeSummary?.totalBoxes"
                 class="no-result"
@@ -121,11 +121,6 @@ const loadVolumes = async (rows) => {
 }
 </style>
 <style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-
 .header {
     color: $primary;
     font-weight: bold;
diff --git a/src/pages/Shelving/ShelvingList.vue b/src/pages/Shelving/ShelvingList.vue
index 71b3a6ccfe..c884dc5f4c 100644
--- a/src/pages/Shelving/ShelvingList.vue
+++ b/src/pages/Shelving/ShelvingList.vue
@@ -74,7 +74,7 @@ function exprBuilder(param, value) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="ShelvingList"
                 url="Shelvings"
@@ -129,10 +129,3 @@ function exprBuilder(param, value) {
         </QPageSticky>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Supplier/Card/SupplierAddresses.vue b/src/pages/Supplier/Card/SupplierAddresses.vue
index df7cff9329..c6b08075fc 100644
--- a/src/pages/Supplier/Card/SupplierAddresses.vue
+++ b/src/pages/Supplier/Card/SupplierAddresses.vue
@@ -47,7 +47,7 @@ const redirectToUpdateView = (addressData) => {
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="SupplierAddress"
                 :url="`Suppliers/${route.params.id}/addresses`"
@@ -88,10 +88,3 @@ const redirectToUpdateView = (addressData) => {
         </QPageSticky>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Supplier/SupplierList.vue b/src/pages/Supplier/SupplierList.vue
index ea7bc3cb05..d504e127af 100644
--- a/src/pages/Supplier/SupplierList.vue
+++ b/src/pages/Supplier/SupplierList.vue
@@ -44,7 +44,7 @@ const viewSummary = (id) => {
     </template>
 
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate data-key="SuppliersList" url="Suppliers/filter" auto-load>
                 <template #body="{ rows }">
                     <CardList
@@ -95,13 +95,6 @@ const viewSummary = (id) => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 en:
     Search suppliers: Search suppliers
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index 9186eb6adb..6f57ad0b91 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -74,7 +74,7 @@ function viewSummary(id) {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="TicketList"
                 url="Tickets/filter"
@@ -134,13 +134,6 @@ function viewSummary(id) {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search ticket: Buscar ticket
diff --git a/src/pages/Travel/TravelList.vue b/src/pages/Travel/TravelList.vue
index 889f096aaf..dbbdaca93e 100644
--- a/src/pages/Travel/TravelList.vue
+++ b/src/pages/Travel/TravelList.vue
@@ -56,7 +56,7 @@ onMounted(async () => {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="TravelList"
                 url="Travels/filter"
@@ -132,13 +132,6 @@ onMounted(async () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 en:
     addEntry: Add entry
diff --git a/src/pages/Wagon/Type/WagonTypeList.vue b/src/pages/Wagon/Type/WagonTypeList.vue
index 8e4ace744e..a7c7130397 100644
--- a/src/pages/Wagon/Type/WagonTypeList.vue
+++ b/src/pages/Wagon/Type/WagonTypeList.vue
@@ -42,7 +42,7 @@ async function remove(row) {
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="WagonTypeList"
                 url="/WagonTypes"
@@ -80,10 +80,3 @@ async function remove(row) {
         </QPageSticky>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Wagon/WagonList.vue b/src/pages/Wagon/WagonList.vue
index 77d9da0bf1..18417f4336 100644
--- a/src/pages/Wagon/WagonList.vue
+++ b/src/pages/Wagon/WagonList.vue
@@ -48,7 +48,7 @@ async function remove(row) {
 
 <template>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="WagonList"
                 url="/Wagons"
@@ -99,10 +99,3 @@ async function remove(row) {
         </QPageSticky>
     </QPage>
 </template>
-
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
diff --git a/src/pages/Worker/WorkerList.vue b/src/pages/Worker/WorkerList.vue
index e7e86d16ee..0e9868a04b 100644
--- a/src/pages/Worker/WorkerList.vue
+++ b/src/pages/Worker/WorkerList.vue
@@ -64,7 +64,7 @@ const redirectToCreateView = () => {
         </QScrollArea>
     </QDrawer>
     <QPage class="column items-center q-pa-md">
-        <div class="card-list">
+        <div class="vn-card-list">
             <VnPaginate
                 data-key="WorkerList"
                 url="Workers/filter"
@@ -114,13 +114,6 @@ const redirectToCreateView = () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
-}
-</style>
-
 <i18n>
 es:
     Search worker: Buscar trabajador