diff --git a/src/pages/Customer/Card/CustomerConsigneeCreate.vue b/src/pages/Customer/Card/CustomerConsigneeCreate.vue
new file mode 100644
index 000000000..69d478b6f
--- /dev/null
+++ b/src/pages/Customer/Card/CustomerConsigneeCreate.vue
@@ -0,0 +1,241 @@
+<script setup>
+import { onBeforeMount, reactive, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const formInitialData = reactive({
+    isDefaultAddress: false,
+    nickname: null,
+    street: null,
+    postalCode: null,
+    city: null,
+    provinceFk: null,
+    agencyModeFk: null,
+    phone: null,
+    mobile: null,
+    incotermsFk: null,
+    customsAgentFk: null,
+});
+
+const agencyModes = ref([]);
+const incoterms = ref([]);
+const customsAgents = ref([]);
+const postcodeFetchDataRef = ref(null);
+const citiesLocationOptions = ref([]);
+const provincesLocationOptions = ref([]);
+const postcodesOptions = ref([]);
+const urlCreate = ref('');
+
+onBeforeMount(() => {
+    urlCreate.value = `Clients/${route.params.id}/createAddress`;
+});
+
+const onPostcodeCreated = async () => {
+    postcodeFetchDataRef.value.fetch();
+};
+</script>
+
+<template>
+    <FetchData
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+        url="Postcodes/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (citiesLocationOptions = data)"
+        auto-load
+        url="Towns/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (provincesLocationOptions = data)"
+        auto-load
+        url="Provinces/location"
+    />
+    <fetch-data
+        @on-fetch="(data) => (agencyModes = data)"
+        auto-load
+        url="AgencyModes/isActive"
+    />
+    <fetch-data @on-fetch="(data) => (incoterms = data)" auto-load url="Incoterms" />
+    <fetch-data
+        @on-fetch="(data) => (customsAgents = data)"
+        auto-load
+        url="CustomsAgents"
+    />
+
+    <FormModel
+        :form-initial-data="formInitialData"
+        :observe-form-changes="false"
+        model="client"
+        :url-create="urlCreate"
+    >
+        <template #form="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox :label="t('Default')" v-model="data.isDefaultAddress" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Consignee')" v-model="data.nickname" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Street address')" v-model="data.street" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectCreate
+                        :label="t('Postcode')"
+                        :options="postcodesOptions"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :rules="validate('Worker.postcode')"
+                        hide-selected
+                        option-label="code"
+                        option-value="code"
+                        v-model="data.postalCode"
+                    >
+                        <template #form>
+                            <CustomerCreateNewPostcode
+                                @on-data-saved="onPostcodeCreated($event)"
+                            />
+                        </template>
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection v-if="scope.opt">
+                                    <QItemLabel>{{ scope.opt.code }}</QItemLabel>
+                                    <QItemLabel caption
+                                        >{{ scope.opt.code }} -
+                                        {{ scope.opt.town.name }} ({{
+                                            scope.opt.town.province.name
+                                        }},
+                                        {{
+                                            scope.opt.town.province.country.country
+                                        }})</QItemLabel
+                                    >
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectCreate>
+                </div>
+                <div class="col">
+                    <!-- ciudades -->
+                    <VnSelectFilter
+                        :label="t('City')"
+                        :options="citiesLocationOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="name"
+                        v-model="data.city"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{
+                                            `${scope.opt.name}, ${scope.opt.province.name} (${scope.opt.province.country.country})`
+                                        }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Province')"
+                        :options="provincesLocationOptions"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.provinceFk"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{
+                                        `${scope.opt.name} (${scope.opt.country.country})`
+                                    }}</QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Agency')"
+                        :options="agencyModes"
+                        hide-selected
+                        option-label="name"
+                        option-value="id"
+                        v-model="data.agencyModeFk"
+                    />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput :label="t('Phone')" v-model="data.phone" />
+                </div>
+                <div class="col">
+                    <VnInput :label="t('Mobile')" v-model="data.mobile" />
+                </div>
+            </VnRow>
+
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Incoterms')"
+                        :options="incoterms"
+                        hide-selected
+                        option-label="name"
+                        option-value="code"
+                        v-model="data.incotermsFk"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('Customs agent')"
+                        :options="customsAgents"
+                        hide-selected
+                        option-label="fiscalName"
+                        option-value="id"
+                        v-model="data.customsAgentFk"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    Default: Predeterminado
+    Consignee: Consignatario
+    Street address: Dirección postal
+    Postcode: Código postal
+    City: Población
+    Province: Provincia
+    Agency: Agencia
+    Phone: Teléfono
+    Mobile: Movíl
+    Incoterms: Incoterms
+    Customs agent: Agente de aduanas
+</i18n>
diff --git a/src/pages/Customer/Card/CustomerConsigneeEdit.vue b/src/pages/Customer/Card/CustomerConsigneeEdit.vue
new file mode 100644
index 000000000..6546c527d
--- /dev/null
+++ b/src/pages/Customer/Card/CustomerConsigneeEdit.vue
@@ -0,0 +1,3 @@
+<template>
+    <div class="flex justify-center">Customer consignee edit</div>
+</template>
diff --git a/src/pages/Customer/Card/CustomerConsignees.vue b/src/pages/Customer/Card/CustomerConsignees.vue
index bab2bd1ff..5abe89589 100644
--- a/src/pages/Customer/Card/CustomerConsignees.vue
+++ b/src/pages/Customer/Card/CustomerConsignees.vue
@@ -1,3 +1,113 @@
+<script setup>
+import { ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute, useRouter } from 'vue-router';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const router = useRouter();
+
+const provincesLocation = ref([]);
+
+const setProvince = (provinceFk) => {
+    const result = provincesLocation.value.filter(
+        (province) => province.id === provinceFk
+    );
+    return result[0].name || '';
+};
+
+const toCustomerConsigneeCreate = () => {
+    router.push({ name: 'CustomerConsigneeCreate' });
+};
+
+const toCustomerConsigneeEdit = () => {
+    router.push({ name: 'CustomerConsigneeEdit' });
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Consignees</div>
+    <FetchData
+        @on-fetch="(data) => (provincesLocation = data)"
+        auto-load
+        url="Provinces/location"
+    />
+
+    <FormModel
+        :observe-form-changes="false"
+        :url="`Clients/${route.params.id}/addresses`"
+        auto-load
+        model="customer"
+    >
+        <template #form="{ data }">
+            <div v-if="data?.length">
+                <div v-for="(item, index) in data" :key="index">
+                    <div
+                        :class="{
+                            'consignees-card': true,
+                            'q-mb-md': index + 1 === data.length ? false : true,
+                        }"
+                    >
+                        <div class="consignees-card-icon">
+                            <QIcon name="star" size="md" color="primary" />
+                        </div>
+                        <div>
+                            <div>
+                                <div class="text-weight-bold">
+                                    {{ item.nickname }} - #{{ item.id }}
+                                </div>
+                                <div>{{ item.street }}</div>
+                                <div>
+                                    {{ item.postalCode }} - {{ item.city }},
+                                    {{ setProvince(item.provinceFk) }}
+                                </div>
+                            </div>
+                            <div class="flex">
+                                <QCheckbox
+                                    :label="t('Is equalizated')"
+                                    v-model="item.isEqualizated"
+                                    class="q-mr-lg"
+                                    @click.stop="toCustomerConsigneeEdit()"
+                                />
+                                <QCheckbox
+                                    :label="t('Is logiflora allowed')"
+                                    v-model="item.isLogifloraAllowed"
+                                    @click.stop="toCustomerConsigneeEdit()"
+                                />
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </FormModel>
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerConsigneeCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New consignee') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<style lang="scss" scoped>
+.consignees-card {
+    border: 2px solid var(--vn-light-gray);
+    border-radius: 10px;
+    padding: 10px;
+    display: flex;
+}
+.consignees-card-icon {
+    margin: 0 15px 0 5px;
+    display: flex;
+    align-items: center;
+}
+</style>
+
+<i18n>
+es:
+    Is equalizated: Recargo de equivalencia
+    Is logiflora allowed: Compra directa en Holanda
+    New consignee: Nuevo consignatario
+</i18n>
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 3c8445f42..752c486ee 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -152,13 +152,42 @@ export default {
                 },
                 {
                     path: 'consignees',
-                    name: 'CustomerConsignees',
-                    meta: {
-                        title: 'consignees',
-                        icon: 'vn:delivery',
-                    },
-                    component: () =>
-                        import('src/pages/Customer/Card/CustomerConsignees.vue'),
+                    name: 'ConsigneesCard',
+                    redirect: { name: 'CustomerConsignees' },
+                    children: [
+                        {
+                            path: '',
+                            name: 'CustomerConsignees',
+                            meta: {
+                                icon: 'vn:delivery',
+                                title: 'consignees',
+                            },
+                            component: () =>
+                                import('src/pages/Customer/Card/CustomerConsignees.vue'),
+                        },
+                        {
+                            path: 'create',
+                            name: 'CustomerConsigneeCreate',
+                            meta: {
+                                title: 'consignee-create',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Customer/Card/CustomerConsigneeCreate.vue'
+                                ),
+                        },
+                        {
+                            path: 'edit',
+                            name: 'CustomerConsigneeEdit',
+                            meta: {
+                                title: 'consignee-edit',
+                            },
+                            component: () =>
+                                import(
+                                    'src/pages/Customer/Card/CustomerConsigneeEdit.vue'
+                                ),
+                        },
+                    ],
                 },
                 {
                     path: 'notes',