diff --git a/src/pages/Customer/Card/CustomerConsignees.vue b/src/pages/Customer/Card/CustomerConsignees.vue
index 0d06c31fc..f8f6160dd 100644
--- a/src/pages/Customer/Card/CustomerConsignees.vue
+++ b/src/pages/Customer/Card/CustomerConsignees.vue
@@ -1,31 +1,17 @@
 <script setup>
-import { computed, onBeforeMount, ref } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute, useRouter } from 'vue-router';
 
-import { useArrayData } from 'composables/useArrayData';
-import { useStateStore } from 'stores/useStateStore';
 import FetchData from 'components/FetchData.vue';
+import VnPaginate from 'src/components/ui/VnPaginate.vue';
 
 const { t } = useI18n();
 const route = useRoute();
 const router = useRouter();
-const stateStore = useStateStore();
 
-const arrayData = ref(null);
 const provincesLocation = ref([]);
 
-onBeforeMount(async () => {
-    arrayData.value = useArrayData('CustomerConsignees', {
-        url: `Clients/${route.params.id}/addresses`,
-        limit: 0,
-    });
-    await arrayData.value.fetch({ append: false });
-    stateStore.rightDrawer = true;
-});
-
-const data = computed(() => arrayData.value.store.data);
-
 const setProvince = (provinceFk) => {
     const result = provincesLocation.value.filter(
         (province) => province.id === provinceFk
@@ -49,14 +35,19 @@ const toCustomerConsigneeEdit = () => {
         url="Provinces/location"
     />
 
-    <QCard class="q-pa-sm">
-        <QCardSection>
-            <div v-if="data?.length">
-                <div v-for="(item, index) in data" :key="index">
+    <QCard class="q-pa-lg">
+        <VnPaginate
+            data-key="CustomerConsignees"
+            :url="`Clients/${route.params.id}/addresses`"
+            order="id"
+            auto-load
+        >
+            <template #body="{ rows }">
+                <div v-for="(item, index) in rows" :key="index">
                     <div
                         :class="{
                             'consignees-card': true,
-                            'q-mb-md': index + 1 === data.length ? false : true,
+                            'q-mb-md': index + 1 === rows.length ? false : true,
                         }"
                     >
                         <div class="consignees-card-icon">
@@ -89,20 +80,19 @@ const toCustomerConsigneeEdit = () => {
                         </div>
                     </div>
                 </div>
-            </div>
-        </QCardSection>
-
-        <QPageSticky :offset="[18, 18]">
-            <QBtn
-                @click.stop="toCustomerConsigneeCreate()"
-                color="primary"
-                fab
-                icon="add"
-            />
-            <QTooltip>
-                {{ t('New consignee') }}
-            </QTooltip>
-        </QPageSticky>
+                <QPageSticky :offset="[18, 18]">
+                    <QBtn
+                        @click.stop="toCustomerConsigneeCreate()"
+                        color="primary"
+                        fab
+                        icon="add"
+                    />
+                    <QTooltip>
+                        {{ t('New consignee') }}
+                    </QTooltip>
+                </QPageSticky>
+            </template>
+        </VnPaginate>
     </QCard>
 </template>