diff --git a/src/pages/Customer/Card/CustomerContacts.vue b/src/pages/Customer/Card/CustomerContacts.vue
index 47fc28ec2..04f7ebeb8 100644
--- a/src/pages/Customer/Card/CustomerContacts.vue
+++ b/src/pages/Customer/Card/CustomerContacts.vue
@@ -17,61 +17,65 @@ onMounted(() => {
 });
 </script>
 <template>
-    <CrudModel
-        data-key="CustomerContacts"
-        url="ClientContacts"
-        model="CustomerContacts"
-        :filter="{
-            fields: ['id', 'name', 'phone', 'clientFk'],
-            where: { clientFk: route.params.id },
-        }"
-        ref="customerContactsRef"
-        :default-remove="false"
-        :data-required="{ clientFk: route.params.id }"
-    >
-        <template #body="{ rows }">
-            <QCard class="q-pa-md">
-                <VnRow
-                    v-for="(row, index) in rows"
-                    :key="index"
-                    class="row q-gutter-md q-mb-md"
-                >
-                    <div class="col">
-                        <VnInput :label="t('Name')" v-model="row.name" />
-                    </div>
-                    <div class="col">
-                        <VnInput :label="t('Phone')" v-model="row.phone" />
-                    </div>
-                    <div class="col-1 row justify-center items-center">
-                        <QIcon
-                            name="delete"
-                            size="sm"
-                            class="cursor-pointer"
-                            color="primary"
-                            @click="customerContactsRef.remove([row])"
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
+            <CrudModel
+                :data-required="{ clientFk: route.params.id }"
+                :default-remove="false"
+                :filter="{
+                    fields: ['id', 'name', 'phone', 'clientFk'],
+                    where: { clientFk: route.params.id },
+                }"
+                data-key="CustomerContacts"
+                model="CustomerContacts"
+                ref="customerContactsRef"
+                url="ClientContacts"
+            >
+                <template #body="{ rows }">
+                    <QCard class="q-pl-lg q-py-md">
+                        <VnRow
+                            v-for="(row, index) in rows"
+                            :key="index"
+                            class="row q-gutter-md q-mb-md"
                         >
-                            <QTooltip>
-                                {{ t('Remove contact') }}
-                            </QTooltip>
-                        </QIcon>
-                    </div>
-                </VnRow>
-                <VnRow>
-                    <QIcon
-                        name="add"
-                        size="sm"
-                        class="cursor-pointer"
-                        color="primary"
-                        @click="customerContactsRef.insert()"
-                    >
-                        <QTooltip>
-                            {{ t('Add contact') }}
-                        </QTooltip>
-                    </QIcon>
-                </VnRow>
-            </QCard>
-        </template>
-    </CrudModel>
+                            <div class="col">
+                                <VnInput :label="t('Name')" v-model="row.name" />
+                            </div>
+                            <div class="col">
+                                <VnInput :label="t('Phone')" v-model="row.phone" />
+                            </div>
+                            <div class="col-1 row justify-center items-center">
+                                <QIcon
+                                    name="delete"
+                                    size="sm"
+                                    class="cursor-pointer"
+                                    color="primary"
+                                    @click="customerContactsRef.remove([row])"
+                                >
+                                    <QTooltip>
+                                        {{ t('Remove contact') }}
+                                    </QTooltip>
+                                </QIcon>
+                            </div>
+                        </VnRow>
+                        <VnRow>
+                            <QIcon
+                                name="add"
+                                size="sm"
+                                class="cursor-pointer"
+                                color="primary"
+                                @click="customerContactsRef.insert()"
+                            >
+                                <QTooltip>
+                                    {{ t('Add contact') }}
+                                </QTooltip>
+                            </QIcon>
+                        </VnRow>
+                    </QCard>
+                </template>
+            </CrudModel>
+        </QPage>
+    </div>
 </template>
 
 <i18n>
diff --git a/src/pages/Customer/Card/CustomerCreditContracts.vue b/src/pages/Customer/Card/CustomerCreditContracts.vue
index 654bd1e91..11acb226c 100644
--- a/src/pages/Customer/Card/CustomerCreditContracts.vue
+++ b/src/pages/Customer/Card/CustomerCreditContracts.vue
@@ -70,111 +70,118 @@ const updateData = () => {
 </script>
 
 <template>
-    <QCard class="q-pa-lg">
-        <VnPaginate
-            :filter="filter"
-            @on-fetch="fetch"
-            auto-load
-            data-key="CustomerCreditContracts"
-            order="id DESC"
-            ref="vnPaginateRef"
-            url="CreditClassifications"
-        >
-            <template #body="{ rows }">
-                <div v-if="rows.length">
-                    <QCard
-                        v-for="(item, index) in rows"
-                        :key="index"
-                        :class="{
-                            'customer-card': true,
-                            'q-mb-md': index < rows.length - 1,
-                            'is-active': !item.finished,
-                        }"
-                    >
-                        <QCardSection class="flex q-py-none">
-                            <div
-                                class="flex items-center q-ml-md cursor-pointer"
-                                v-if="!item.finished"
-                            >
-                                <QIcon
-                                    @click.stop="openDialog(item)"
-                                    color="primary"
-                                    name="lock"
-                                    size="md"
+    <div class="full-width flex justify-center">
+        <QCard class="card-width q-pa-lg">
+            <VnPaginate
+                :filter="filter"
+                @on-fetch="fetch"
+                auto-load
+                data-key="CustomerCreditContracts"
+                order="id DESC"
+                ref="vnPaginateRef"
+                url="CreditClassifications"
+            >
+                <template #body="{ rows }">
+                    <div v-if="rows.length">
+                        <QCard
+                            v-for="(item, index) in rows"
+                            :key="index"
+                            :class="{
+                                'customer-card': true,
+                                'q-mb-md': index < rows.length - 1,
+                                'is-active': !item.finished,
+                            }"
+                        >
+                            <QCardSection class="flex q-py-none">
+                                <div
+                                    class="flex items-center q-ml-md cursor-pointer"
+                                    v-if="!item.finished"
                                 >
-                                    <QTooltip>{{ t('Close contract') }}</QTooltip>
-                                </QIcon>
-                            </div>
+                                    <QIcon
+                                        @click.stop="openDialog(item)"
+                                        color="primary"
+                                        name="lock"
+                                        size="md"
+                                    >
+                                        <QTooltip>{{ t('Close contract') }}</QTooltip>
+                                    </QIcon>
+                                </div>
 
-                            <div class="q-ml-lg">
-                                <div class="flex q-mb-xs">
-                                    <div class="q-mr-sm color-vn-label">
-                                        {{ t('Since') }}:
+                                <div class="q-ml-lg">
+                                    <div class="flex q-mb-xs">
+                                        <div class="q-mr-sm color-vn-label">
+                                            {{ t('Since') }}:
+                                        </div>
+                                        <div class="text-weight-bold">
+                                            {{ toDate(item.started) }}
+                                        </div>
                                     </div>
-                                    <div class="text-weight-bold">
-                                        {{ toDate(item.started) }}
+                                    <div class="flex">
+                                        <div class="q-mr-sm color-vn-label">
+                                            {{ t('To') }}:
+                                        </div>
+                                        <div class="text-weight-bold">
+                                            {{ toDate(item.finished) }}
+                                        </div>
                                     </div>
                                 </div>
-                                <div class="flex">
-                                    <div class="q-mr-sm color-vn-label">
-                                        {{ t('To') }}:
-                                    </div>
-                                    <div class="text-weight-bold">
-                                        {{ toDate(item.finished) }}
-                                    </div>
-                                </div>
-                            </div>
-                        </QCardSection>
+                            </QCardSection>
 
-                        <QSeparator class="q-mx-lg" vertical />
+                            <QSeparator class="q-mx-lg" vertical />
 
-                        <div class="flex">
-                            <div class="flex items-center" v-if="item?.insurances.length">
-                                <div class="flex q-mr-xl">
-                                    <div class="q-mr-sm color-vn-label">
-                                        {{ t('Credit') }}:
-                                    </div>
-                                    <div class="text-weight-bold">
-                                        {{ item.insurances[0].credit }}
-                                    </div>
-                                </div>
-                                <div class="flex q-mr-xl">
-                                    <div class="q-mr-sm color-vn-label">
-                                        {{ t('Grade') }}:
-                                    </div>
-                                    <div class="text-weight-bold">
-                                        {{ item.insurances[0].grade || '-' }}
-                                    </div>
-                                </div>
-                                <div class="flex">
-                                    <div class="q-mr-sm color-vn-label">
-                                        {{ t('Date') }}:
-                                    </div>
-                                    <div class="text-weight-bold">
-                                        {{ toDate(item.insurances[0].created) }}
-                                    </div>
-                                </div>
-                            </div>
-
-                            <div class="flex items-center q-ml-lg q-mr-md cursor-pointer">
-                                <QIcon
-                                    @click.stop="openViewCredit(item)"
-                                    color="primary"
-                                    name="preview"
-                                    size="md"
+                            <div class="flex">
+                                <div
+                                    class="flex items-center"
+                                    v-if="item?.insurances.length"
                                 >
-                                    <QTooltip>{{ t('View credits') }}</QTooltip>
-                                </QIcon>
+                                    <div class="flex q-mr-xl">
+                                        <div class="q-mr-sm color-vn-label">
+                                            {{ t('Credit') }}:
+                                        </div>
+                                        <div class="text-weight-bold">
+                                            {{ item.insurances[0].credit }}
+                                        </div>
+                                    </div>
+                                    <div class="flex q-mr-xl">
+                                        <div class="q-mr-sm color-vn-label">
+                                            {{ t('Grade') }}:
+                                        </div>
+                                        <div class="text-weight-bold">
+                                            {{ item.insurances[0].grade || '-' }}
+                                        </div>
+                                    </div>
+                                    <div class="flex">
+                                        <div class="q-mr-sm color-vn-label">
+                                            {{ t('Date') }}:
+                                        </div>
+                                        <div class="text-weight-bold">
+                                            {{ toDate(item.insurances[0].created) }}
+                                        </div>
+                                    </div>
+                                </div>
+
+                                <div
+                                    class="flex items-center q-ml-lg q-mr-md cursor-pointer"
+                                >
+                                    <QIcon
+                                        @click.stop="openViewCredit(item)"
+                                        color="primary"
+                                        name="preview"
+                                        size="md"
+                                    >
+                                        <QTooltip>{{ t('View credits') }}</QTooltip>
+                                    </QIcon>
+                                </div>
                             </div>
-                        </div>
-                    </QCard>
-                </div>
-                <h5 class="flex justify-center color-vn-label" v-else>
-                    {{ t('globals.noResults') }}
-                </h5>
-            </template>
-        </VnPaginate>
-    </QCard>
+                        </QCard>
+                    </div>
+                    <h5 class="flex justify-center color-vn-label" v-else>
+                        {{ t('globals.noResults') }}
+                    </h5>
+                </template>
+            </VnPaginate>
+        </QCard>
+    </div>
 
     <QPageSticky :offset="[18, 18]" v-if="showQPageSticky">
         <QBtn
diff --git a/src/pages/Customer/Card/CustomerCreditOpinion.vue b/src/pages/Customer/Card/CustomerCreditOpinion.vue
index 1eeae0f24..a4d63574a 100644
--- a/src/pages/Customer/Card/CustomerCreditOpinion.vue
+++ b/src/pages/Customer/Card/CustomerCreditOpinion.vue
@@ -126,34 +126,36 @@ const columns = computed(() => [
         </template>
     </FormModel>
 
-    <QTable
-        :columns="columns"
-        :pagination="{ rowsPerPage: 0 }"
-        :rows="rows"
-        hide-bottom
-        row-key="id"
-        v-model:selected="selected"
-        class="q-pa-lg"
-    >
-        <template #body-cell="props">
-            <QTd :props="props">
-                <QTr :props="props" class="cursor-pointer">
-                    <component
-                        :is="tableColumnComponents[props.col.name].component"
-                        class="col-content"
-                        v-bind="tableColumnComponents[props.col.name].props(props)"
-                        @click="tableColumnComponents[props.col.name].event(props)"
-                    >
-                        {{ props.value }}
-                        <WorkerDescriptorProxy
-                            :id="props.row.workerFk"
-                            v-if="props.col.name === 'employee'"
-                        />
-                    </component>
-                </QTr>
-            </QTd>
-        </template>
-    </QTable>
+    <div class="full-width flex justify-center">
+        <QTable
+            :columns="columns"
+            :pagination="{ rowsPerPage: 0 }"
+            :rows="rows"
+            hide-bottom
+            row-key="id"
+            v-model:selected="selected"
+            class="card-width q-pa-lg"
+        >
+            <template #body-cell="props">
+                <QTd :props="props">
+                    <QTr :props="props" class="cursor-pointer">
+                        <component
+                            :is="tableColumnComponents[props.col.name].component"
+                            class="col-content"
+                            v-bind="tableColumnComponents[props.col.name].props(props)"
+                            @click="tableColumnComponents[props.col.name].event(props)"
+                        >
+                            {{ props.value }}
+                            <WorkerDescriptorProxy
+                                :id="props.row.workerFk"
+                                v-if="props.col.name === 'employee'"
+                            />
+                        </component>
+                    </QTr>
+                </QTd>
+            </template>
+        </QTable>
+    </div>
 </template>
 
 <i18n>
diff --git a/src/pages/Customer/Card/CustomerGreuges.vue b/src/pages/Customer/Card/CustomerGreuges.vue
index 485e61e79..5e0dc247e 100644
--- a/src/pages/Customer/Card/CustomerGreuges.vue
+++ b/src/pages/Customer/Card/CustomerGreuges.vue
@@ -117,42 +117,50 @@ const toCustomerGreugeCreate = () => {
 <template>
     <FetchData :filter="filter" @on-fetch="setRows" auto-load url="greuges" />
 
-    <QPage class="column items-center q-pa-md">
-        <QCard class="full-width" v-if="totalAmount">
-            <h6 class="flex justify-end q-my-lg q-pr-lg">
-                <span class="color-vn-label q-mr-md">{{ t('Total') }}:</span>
-                {{ toCurrency(totalAmount) }}
-            </h6>
-        </QCard>
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
+            <QCard class="full-width q-pa-sm" v-if="totalAmount">
+                <h6 class="flex justify-end q-my-lg q-pr-lg">
+                    <span class="color-vn-label q-mr-md">{{ t('Total') }}:</span>
+                    {{ toCurrency(totalAmount) }}
+                </h6>
+            </QCard>
 
-        <QTable
-            :columns="columns"
-            :no-data-label="t('globals.noResults')"
-            :pagination="{ rowsPerPage: 12 }"
-            :rows="rows"
-            class="full-width q-mt-md"
-            row-key="id"
-        >
-            <template #body-cell="props">
-                <QTd :props="props">
-                    <QTr :props="props" class="cursor-pointer">
-                        <component
-                            :is="tableColumnComponents[props.col.name].component"
-                            class="col-content"
-                            v-bind="tableColumnComponents[props.col.name].props(props)"
-                            @click="tableColumnComponents[props.col.name].event(props)"
-                        >
-                            {{ props.value }}
-                            <WorkerDescriptorProxy
-                                :id="props.row.userFk"
-                                v-if="props.col.name === 'createdBy'"
-                            />
-                        </component>
-                    </QTr>
-                </QTd>
-            </template>
-        </QTable>
-    </QPage>
+            <QCard class="q-pa-sm q-mt-md">
+                <QTable
+                    :columns="columns"
+                    :no-data-label="t('globals.noResults')"
+                    :pagination="{ rowsPerPage: 12 }"
+                    :rows="rows"
+                    class="full-width q-mt-md"
+                    row-key="id"
+                >
+                    <template #body-cell="props">
+                        <QTd :props="props">
+                            <QTr :props="props" class="cursor-pointer">
+                                <component
+                                    :is="tableColumnComponents[props.col.name].component"
+                                    class="col-content"
+                                    v-bind="
+                                        tableColumnComponents[props.col.name].props(props)
+                                    "
+                                    @click="
+                                        tableColumnComponents[props.col.name].event(props)
+                                    "
+                                >
+                                    {{ props.value }}
+                                    <WorkerDescriptorProxy
+                                        :id="props.row.userFk"
+                                        v-if="props.col.name === 'createdBy'"
+                                    />
+                                </component>
+                            </QTr>
+                        </QTd>
+                    </template>
+                </QTable>
+            </QCard>
+        </QPage>
+    </div>
 
     <QPageSticky :offset="[18, 18]">
         <QBtn @click.stop="toCustomerGreugeCreate()" color="primary" fab icon="add" />
diff --git a/src/pages/Customer/Card/CustomerRecoveries.vue b/src/pages/Customer/Card/CustomerRecoveries.vue
index e01101562..865d61450 100644
--- a/src/pages/Customer/Card/CustomerRecoveries.vue
+++ b/src/pages/Customer/Card/CustomerRecoveries.vue
@@ -84,31 +84,37 @@ const toCustomerRecoverieCreate = () => {
         url="Recoveries"
     />
 
-    <QPage class="column items-center q-pa-md">
-        <QTable
-            :columns="columns"
-            :no-data-label="t('globals.noResults')"
-            :pagination="{ rowsPerPage: 12 }"
-            :rows="rows"
-            class="full-width q-mt-md"
-            row-key="id"
-        >
-            <template #body-cell="props">
-                <QTd :props="props">
-                    <QTr :props="props" class="cursor-pointer">
-                        <component
-                            :is="tableColumnComponents[props.col.name].component"
-                            class="col-content"
-                            v-bind="tableColumnComponents[props.col.name].props(props)"
-                            @click="tableColumnComponents[props.col.name].event(props)"
-                        >
-                            {{ props.value }}
-                        </component>
-                    </QTr>
-                </QTd>
-            </template>
-        </QTable>
-    </QPage>
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
+            <QTable
+                :columns="columns"
+                :no-data-label="t('globals.noResults')"
+                :pagination="{ rowsPerPage: 12 }"
+                :rows="rows"
+                class="full-width q-mt-md"
+                row-key="id"
+            >
+                <template #body-cell="props">
+                    <QTd :props="props">
+                        <QTr :props="props" class="cursor-pointer">
+                            <component
+                                :is="tableColumnComponents[props.col.name].component"
+                                class="col-content"
+                                v-bind="
+                                    tableColumnComponents[props.col.name].props(props)
+                                "
+                                @click="
+                                    tableColumnComponents[props.col.name].event(props)
+                                "
+                            >
+                                {{ props.value }}
+                            </component>
+                        </QTr>
+                    </QTd>
+                </template>
+            </QTable>
+        </QPage>
+    </div>
 
     <QPageSticky :offset="[18, 18]">
         <QBtn @click.stop="toCustomerRecoverieCreate()" color="primary" fab icon="add" />
diff --git a/src/pages/Customer/Card/CustomerSamples.vue b/src/pages/Customer/Card/CustomerSamples.vue
index e05d0016d..9975ef0c6 100644
--- a/src/pages/Customer/Card/CustomerSamples.vue
+++ b/src/pages/Customer/Card/CustomerSamples.vue
@@ -90,35 +90,41 @@ const toCustomerSamplesCreate = () => {
         url="ClientSamples"
     />
 
-    <QPage class="column items-center q-pa-md">
-        <QTable
-            :columns="columns"
-            :pagination="{ rowsPerPage: 12 }"
-            :rows="rows"
-            class="full-width q-mt-md"
-            row-key="id"
-            :no-data-label="t('globals.noResults')"
-        >
-            <template #body-cell="props">
-                <QTd :props="props">
-                    <QTr :props="props" class="cursor-pointer">
-                        <component
-                            :is="tableColumnComponents[props.col.name].component"
-                            class="col-content"
-                            v-bind="tableColumnComponents[props.col.name].props(props)"
-                            @click="tableColumnComponents[props.col.name].event(props)"
-                        >
-                            {{ props.value }}
-                            <WorkerDescriptorProxy
-                                :id="props.row.userFk"
-                                v-if="props.col.name === 'worker'"
-                            />
-                        </component>
-                    </QTr>
-                </QTd>
-            </template>
-        </QTable>
-    </QPage>
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
+            <QTable
+                :columns="columns"
+                :pagination="{ rowsPerPage: 12 }"
+                :rows="rows"
+                class="full-width q-mt-md"
+                row-key="id"
+                :no-data-label="t('globals.noResults')"
+            >
+                <template #body-cell="props">
+                    <QTd :props="props">
+                        <QTr :props="props" class="cursor-pointer">
+                            <component
+                                :is="tableColumnComponents[props.col.name].component"
+                                class="col-content"
+                                v-bind="
+                                    tableColumnComponents[props.col.name].props(props)
+                                "
+                                @click="
+                                    tableColumnComponents[props.col.name].event(props)
+                                "
+                            >
+                                {{ props.value }}
+                                <WorkerDescriptorProxy
+                                    :id="props.row.userFk"
+                                    v-if="props.col.name === 'worker'"
+                                />
+                            </component>
+                        </QTr>
+                    </QTd>
+                </template>
+            </QTable>
+        </QPage>
+    </div>
 
     <QPageSticky :offset="[18, 18]">
         <QBtn @click.stop="toCustomerSamplesCreate()" color="primary" fab icon="add" />
diff --git a/src/pages/Customer/Card/CustomerWebPayment.vue b/src/pages/Customer/Card/CustomerWebPayment.vue
index 0effaaca2..fd9062c38 100644
--- a/src/pages/Customer/Card/CustomerWebPayment.vue
+++ b/src/pages/Customer/Card/CustomerWebPayment.vue
@@ -104,35 +104,41 @@ const refreshData = () => {
         url="clients/transactions"
     />
 
-    <QPage class="column items-center q-pa-md">
-        <QTable
-            :columns="columns"
-            :pagination="{ rowsPerPage: 12 }"
-            :rows="rows"
-            class="full-width q-mt-md"
-            row-key="id"
-            v-if="rows?.length"
-        >
-            <template #body-cell="props">
-                <QTd :props="props">
-                    <QTr :props="props">
-                        <component
-                            :is="tableColumnComponents[props.col.name].component"
-                            @click="tableColumnComponents[props.col.name].event(props)"
-                            class="rounded-borders q-pa-sm"
-                            v-bind="tableColumnComponents[props.col.name].props(props)"
-                        >
-                            {{ props.value }}
-                        </component>
-                    </QTr>
-                </QTd>
-            </template>
-        </QTable>
+    <div class="full-width flex justify-center">
+        <QPage class="card-width q-pa-lg">
+            <QTable
+                :columns="columns"
+                :pagination="{ rowsPerPage: 12 }"
+                :rows="rows"
+                class="full-width q-mt-md"
+                row-key="id"
+                v-if="rows?.length"
+            >
+                <template #body-cell="props">
+                    <QTd :props="props">
+                        <QTr :props="props">
+                            <component
+                                :is="tableColumnComponents[props.col.name].component"
+                                @click="
+                                    tableColumnComponents[props.col.name].event(props)
+                                "
+                                class="rounded-borders q-pa-sm"
+                                v-bind="
+                                    tableColumnComponents[props.col.name].props(props)
+                                "
+                            >
+                                {{ props.value }}
+                            </component>
+                        </QTr>
+                    </QTd>
+                </template>
+            </QTable>
 
-        <h5 class="flex justify-center color-vn-label" v-else>
-            {{ t('globals.noResults') }}
-        </h5>
-    </QPage>
+            <h5 class="flex justify-center color-vn-label" v-else>
+                {{ t('globals.noResults') }}
+            </h5>
+        </QPage>
+    </div>
 </template>
 
 <i18n>
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 04e75b7ef..d8726b5d3 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -453,7 +453,7 @@ export default {
                             {
                                 name: 'CustomerUnpaid',
                                 title: 'unpaid',
-                                icon: 'vn:supplierfalse',
+                                icon: 'vn:deaulter',
                             },
                         ],
                     },