diff --git a/src/css/app.scss b/src/css/app.scss
index 57031b21d..4fec9db08 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -67,6 +67,14 @@ body.body--dark {
     max-width: 60em;
 }
 
+.bg-vn-primary-row {
+    background-color: var(--vn-dark);
+}
+
+.bg-vn-secondary-row {
+    background-color: var(--vn-light-gray);
+}
+
 /* Estilo para el asterisco en campos requeridos */
 .q-field.required .q-field__label:after {
     content: ' *';
diff --git a/src/pages/Travel/ExtraCommunity.vue b/src/pages/Travel/ExtraCommunity.vue
index f08cc64cb..4cbb850e1 100644
--- a/src/pages/Travel/ExtraCommunity.vue
+++ b/src/pages/Travel/ExtraCommunity.vue
@@ -51,57 +51,55 @@ const rows = computed(() => arrayData.store.data || []);
 const tableColumnComponents = {
     id: {
         component: QBtn,
-        attrs: () => ({ flat: true, color: 'blue', class: 'col-content' }),
+        attrs: { flat: true, color: 'primary' },
     },
     cargoSupplierNickname: {
         component: QBtn,
-        attrs: () => ({ flat: true, color: 'blue', class: 'col-content' }),
+        attrs: { flat: true, color: 'primary', dense: true },
     },
     agencyModeName: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     invoiceAmount: {
         component: 'span',
-        attrs: () => ({
-            class: 'col-content',
-        }),
+        attrs: {},
     },
     ref: {
         component: QField,
-        attrs: () => ({ readonly: true, dense: true }),
+        attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
     },
     stickers: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     kg: {
-        component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        component: QField,
+        attrs: { readonly: true, dense: true, class: 'cursor-pointer' },
     },
     loadedKg: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     volumeKg: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     warehouseOutName: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     shipped: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     warehouseInName: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
     landed: {
         component: 'span',
-        attrs: () => ({ class: 'col-content' }),
+        attrs: {},
     },
 };
 
@@ -110,8 +108,9 @@ const columns = computed(() => [
         label: 'id',
         field: 'id',
         name: 'id',
-        align: 'left',
+        align: 'center',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('supplier.pageTitles.supplier'),
@@ -119,6 +118,7 @@ const columns = computed(() => [
         name: 'cargoSupplierNickname',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('globals.agency'),
@@ -126,6 +126,7 @@ const columns = computed(() => [
         name: 'agencyModeName',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('globals.amount'),
@@ -133,6 +134,7 @@ const columns = computed(() => [
         field: 'entries',
         align: 'left',
         showValue: true,
+        sortable: true,
         format: (value) =>
             toCurrency(
                 value
@@ -148,6 +150,7 @@ const columns = computed(() => [
         name: 'ref',
         align: 'left',
         showValue: false,
+        sortable: true,
     },
     {
         label: t('globals.packages'),
@@ -155,13 +158,15 @@ const columns = computed(() => [
         name: 'stickers',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('kg'),
         field: 'kg',
         name: 'kg',
         align: 'left',
-        showValue: true,
+        showValue: false,
+        sortable: true,
     },
     {
         label: t('physicKg'),
@@ -169,6 +174,7 @@ const columns = computed(() => [
         name: 'loadedKg',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: 'KG Vol.',
@@ -176,6 +182,7 @@ const columns = computed(() => [
         name: 'volumeKg',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('globals.wareHouseOut'),
@@ -183,14 +190,16 @@ const columns = computed(() => [
         name: 'warehouseOutName',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('shipped'),
         field: 'shipped',
         name: 'shipped',
         align: 'left',
-        format: (value) => toDate(value.substring(0, 10)),
         showValue: true,
+        sortable: true,
+        format: (value) => toDate(value.substring(0, 10)),
     },
     {
         label: t('globals.wareHouseIn'),
@@ -198,14 +207,16 @@ const columns = computed(() => [
         name: 'warehouseInName',
         align: 'left',
         showValue: true,
+        sortable: true,
     },
     {
         label: t('landed'),
         field: 'landed',
         name: 'landed',
         align: 'left',
-        format: (value) => toDate(value.substring(0, 10)),
         showValue: true,
+        sortable: true,
+        format: (value) => toDate(value.substring(0, 10)),
     },
 ]);
 
@@ -237,7 +248,7 @@ const navigateToTravelId = (id) => {
 };
 
 const stopEventPropagation = (event, col) => {
-    if (!['ref', 'id', 'cargoSupplierNickname'].includes(col.name)) return;
+    if (!['ref', 'id', 'cargoSupplierNickname', 'kg'].includes(col.name)) return;
     event.preventDefault();
     event.stopPropagation();
 };
@@ -290,13 +301,13 @@ onMounted(async () => {
             hide-bottom
             row-key="clientId"
             :pagination="{ rowsPerPage: 0 }"
-            class="full-width q-mt-md"
+            class="full-width"
         >
             <template #body="props">
                 <QTr
                     :props="props"
                     @click="navigateToTravelId(props.row.id)"
-                    class="cursor-pointer"
+                    class="cursor-pointer bg-vn-primary-row"
                 >
                     <QTd
                         v-for="col in props.cols"
@@ -306,8 +317,7 @@ onMounted(async () => {
                     >
                         <component
                             :is="tableColumnComponents[col.name].component"
-                            class="col-content"
-                            v-bind="tableColumnComponents[col.name].attrs(props)"
+                            v-bind="tableColumnComponents[col.name].attrs"
                         >
                             <!-- Editable 'ref' and 'kg' QField slot -->
                             <template
@@ -361,36 +371,32 @@ onMounted(async () => {
                     v-for="entry in props.row.entries"
                     :key="entry.id"
                     :props="props"
-                    class="secondary-row"
+                    class="bg-vn-secondary-row"
                 >
-                    <QTd>
-                        <QBtn flat color="blue" class="col-content">{{ entry.id }} </QBtn>
+                    <QTd class="row justify-center">
+                        <QBtn flat color="primary">{{ entry.id }} </QBtn>
                         <EntryDescriptorProxy :id="entry.id" />
                     </QTd>
-                    <QTd
-                        ><QBtn flat color="blue" class="col-content">{{
-                            entry.supplierName
-                        }}</QBtn>
+                    <QTd>
+                        <QBtn flat color="primary" dense>{{ entry.supplierName }}</QBtn>
                         <SupplierDescriptorProxy :id="entry.supplierFk" />
                     </QTd>
                     <QTd></QTd>
                     <QTd
-                        ><span class="col-content">{{
-                            toCurrency(entry.invoiceAmount)
-                        }}</span></QTd
+                        ><span>{{ toCurrency(entry.invoiceAmount) }}</span></QTd
                     >
                     <QTd
-                        ><span class="col-content">{{ entry.reference }}</span></QTd
+                        ><span>{{ entry.reference }}</span></QTd
                     >
                     <QTd
-                        ><span class="col-content">{{ entry.stickers }}</span></QTd
+                        ><span>{{ entry.stickers }}</span></QTd
                     >
                     <QTd></QTd>
                     <QTd
-                        ><span class="col-content">{{ entry.loadedkg }}</span></QTd
+                        ><span>{{ entry.loadedkg }}</span></QTd
                     >
                     <QTd
-                        ><span class="col-content">{{ entry.volumeKg }}</span></QTd
+                        ><span>{{ entry.volumeKg }}</span></QTd
                     >
                     <QTd></QTd>
                     <QTd></QTd>
@@ -402,17 +408,6 @@ onMounted(async () => {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.col-content {
-    border-radius: 4px;
-    padding: 6px;
-}
-
-.secondary-row {
-    background-color: var(--vn-gray);
-}
-</style>
-
 <i18n>
 en:
     searchExtraCommunity: Search for extra community shipping
diff --git a/src/router/modules/travel.js b/src/router/modules/travel.js
index a9670525f..792b393e4 100644
--- a/src/router/modules/travel.js
+++ b/src/router/modules/travel.js
@@ -34,7 +34,7 @@ export default {
                     name: 'ExtraCommunity',
                     meta: {
                         title: 'extraCommunity',
-                        icon: 'vn:shipment-01',
+                        icon: 'vn:shipment',
                     },
                     component: () => import('src/pages/Travel/ExtraCommunity.vue'),
                 },