diff --git a/src/pages/Customer/Card/CustomerBalance.vue b/src/pages/Customer/Card/CustomerBalance.vue
index 9e44f67f5..184667d6e 100644
--- a/src/pages/Customer/Card/CustomerBalance.vue
+++ b/src/pages/Customer/Card/CustomerBalance.vue
@@ -1,3 +1,282 @@
+<script setup>
+import { computed, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+
+import { date, QCheckbox, QBtn, useQuasar } from 'quasar';
+
+import { toCurrency } from 'src/filters';
+import { useStateStore } from 'stores/useStateStore';
+
+import FetchData from 'components/FetchData.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import CustomerNewPayment from 'src/pages/Customer/components/CustomerNewPayment.vue';
+import WorkerDescriptorProxy from 'src/pages/Worker/Card/WorkerDescriptorProxy.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+const quasar = useQuasar();
+const stateStore = useStateStore();
+
+const clientRisks = ref(null);
+const companiesOptions = ref([]);
+const companyId = ref(442);
+const rows = ref(null);
+const workerId = ref(0);
+const receiptsRef = ref(null);
+const clientRisksRef = ref(null);
+
+const filterCompanies = { order: ['code'] };
+const params = {
+    clientId: `${route.params.id}`,
+    companyId: companyId.value,
+    filter: { limit: 20 },
+};
+const filter = {
+    include: { relation: 'company', scope: { fields: ['code'] } },
+    where: { clientFk: `${route.params.id}`, companyFk: companyId.value },
+};
+
+const tableColumnComponents = {
+    payed: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    created: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    userName: {
+        component: QBtn,
+        props: () => ({ flat: true, color: 'blue' }),
+        event: (prop) => {
+            workerId.value = prop.row.clientFk;
+        },
+    },
+    description: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    bankFk: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    debit: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    credit: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    balance: {
+        component: 'span',
+        props: () => {},
+        event: () => {},
+    },
+    isConciliate: {
+        component: QCheckbox,
+        props: (prop) => ({
+            disable: true,
+            'model-value': Boolean(prop.value),
+        }),
+        event: () => {},
+    },
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        field: 'payed',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY'),
+        label: t('Date'),
+        name: 'payed',
+    },
+    {
+        align: 'left',
+        field: 'created',
+        format: (value) => date.formatDate(value, 'DD/MM/YYYY hh:mm'),
+        label: t('Creation date'),
+        name: 'created',
+    },
+    {
+        align: 'left',
+        field: 'userName',
+        label: t('Employee'),
+        name: 'userName',
+    },
+    {
+        align: 'left',
+        field: 'description',
+        label: t('Reference'),
+        name: 'description',
+    },
+    {
+        align: 'left',
+        field: 'bankFk',
+        label: t('Bank'),
+        name: 'bankFk',
+    },
+    {
+        align: 'left',
+        field: 'debit',
+        label: t('Debit'),
+        name: 'debit',
+    },
+    {
+        align: 'left',
+        field: 'credit',
+        format: (value) => toCurrency(value),
+        label: t('Havings'),
+        name: 'credit',
+    },
+    {
+        align: 'left',
+        field: (value) => value.debit - value.credit,
+        format: (value) => toCurrency(value),
+        label: t('Balance'),
+        name: 'balance',
+    },
+    {
+        align: 'left',
+        field: 'isConciliate',
+        label: t('Conciliated'),
+        name: 'isConciliate',
+    },
+]);
+
+const getData = () => {
+    stateStore.rightDrawer = true;
+    receiptsRef.value?.fetch();
+    clientRisksRef.value?.fetch();
+};
+
+const showNewPaymentDialog = () => {
+    quasar.dialog({
+        component: CustomerNewPayment,
+        componentProps: {
+            companyId: companyId.value,
+            totalCredit: clientRisks.value[0]?.amount,
+            promise: getData,
+        },
+    });
+};
+
+const updateCompanyId = (id) => {
+    if (id) companyId.value = id;
+    getData();
+};
+</script>
+
 <template>
-    <div class="flex justify-center">Balance</div>
+    <FetchData
+        :filter="filterCompanies"
+        @on-fetch="(data) => (companiesOptions = data)"
+        auto-load
+        url="Companies"
+    />
+    <FetchData
+        :params="params"
+        @on-fetch="(data) => (rows = data)"
+        auto-load
+        ref="receiptsRef"
+        url="Receipts/filter"
+    />
+    <FetchData
+        :filter="filter"
+        @on-fetch="(data) => (clientRisks = data)"
+        auto-load
+        ref="clientRisksRef"
+        url="ClientRisks"
+    />
+
+    <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" 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)"
+                    >
+                        <template v-if="props.col.name !== 'isConciliate'">
+                            {{ props.value }}
+                        </template>
+                        <WorkerDescriptorProxy :id="workerId" />
+                    </component>
+                </QTr>
+            </QTd>
+        </template>
+    </QTable>
+
+    <h5 class="flex justify-center label-color" v-else>
+        {{ t('globals.noResults') }}
+    </h5>
+
+    <QDrawer :width="256" show-if-above side="right" v-model="stateStore.rightDrawer">
+        <div class="q-mt-xl q-px-md">
+            <VnSelectFilter
+                :label="t('Company')"
+                :options="companiesOptions"
+                @update:model-value="updateCompanyId($event)"
+                hide-selected
+                option-label="code"
+                option-value="id"
+                v-model="companyId"
+            />
+        </div>
+
+        <QCard class="q-ma-md q-pa-md q-mt-lg" v-if="rows?.length">
+            <QCardSection>
+                <div class="flex justify-center text-subtitle1 text-bold">
+                    {{ t('Total by company') }}
+                </div>
+                <div class="flex justify-center">
+                    <div class="q-mr-sm" v-if="clientRisks?.length">
+                        {{ clientRisks[0].company.code }}:
+                    </div>
+                    <div v-if="clientRisks?.length">
+                        {{ toCurrency(clientRisks[0].amount) }}
+                    </div>
+                </div>
+            </QCardSection>
+        </QCard>
+    </QDrawer>
+
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="showNewPaymentDialog()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New payment') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
+
+<i18n>
+es:
+    Company: Empresa
+    Total by company: Total por empresa
+    New payment: Añadir pago
+    Date: Fecha
+    Creation date: Fecha de creación
+    Employee: Empleado
+    Reference: Referencia
+    Bank: Caja
+    Debit: Debe
+    Havings: Haber
+    Balance: Balance
+    Conciliated: Conciliado
+</i18n>
diff --git a/src/pages/Customer/Card/CustomerConsignees.vue b/src/pages/Customer/Card/CustomerConsignees.vue
index bf61ea302..7e643208e 100644
--- a/src/pages/Customer/Card/CustomerConsignees.vue
+++ b/src/pages/Customer/Card/CustomerConsignees.vue
@@ -137,21 +137,15 @@ const toCustomerConsigneeEdit = (consigneeId) => {
                         </div>
                     </div>
                 </QCard>
-
-                <QPageSticky :offset="[18, 18]">
-                    <QBtn
-                        @click.stop="toCustomerConsigneeCreate()"
-                        color="primary"
-                        fab
-                        icon="add"
-                    />
-                    <QTooltip>
-                        {{ t('New consignee') }}
-                    </QTooltip>
-                </QPageSticky>
             </template>
         </VnPaginate>
     </QCard>
+    <QPageSticky :offset="[18, 18]">
+        <QBtn @click.stop="toCustomerConsigneeCreate()" color="primary" fab icon="add" />
+        <QTooltip>
+            {{ t('New consignee') }}
+        </QTooltip>
+    </QPageSticky>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/pages/Customer/Card/CustomerGreuges.vue b/src/pages/Customer/Card/CustomerGreuges.vue
index 2d67737d4..d92d7b4ee 100644
--- a/src/pages/Customer/Card/CustomerGreuges.vue
+++ b/src/pages/Customer/Card/CustomerGreuges.vue
@@ -49,8 +49,8 @@ onBeforeMount(async () => {
         filter,
     });
     await arrayData.value.fetch({ append: false });
-    totalAmount.value = arrayData.value.store.data.reduce((acumulador, objetoActual) => {
-        return acumulador + objetoActual.amount;
+    totalAmount.value = arrayData.value.store.data.reduce((accumulator, currentValue) => {
+        return accumulator + currentValue.amount;
     }, 0);
     stateStore.rightDrawer = true;
 });
diff --git a/src/pages/Customer/Card/CustomerNotes.vue b/src/pages/Customer/Card/CustomerNotes.vue
index 303ea0980..0909758f3 100644
--- a/src/pages/Customer/Card/CustomerNotes.vue
+++ b/src/pages/Customer/Card/CustomerNotes.vue
@@ -60,7 +60,7 @@ const toCustomerNoteCreate = () => {
 
                 <QPageSticky :offset="[18, 18]">
                     <QBtn
-                        @click.stop="toCustomerConsigneeCreate()"
+                        @click.stop="toCustomerNoteCreate()"
                         color="primary"
                         fab
                         icon="add"
diff --git a/src/pages/Customer/components/CustomerConsigneeCreate.vue b/src/pages/Customer/components/CustomerConsigneeCreate.vue
index aadf554b3..c725742b7 100644
--- a/src/pages/Customer/components/CustomerConsigneeCreate.vue
+++ b/src/pages/Customer/components/CustomerConsigneeCreate.vue
@@ -12,7 +12,7 @@ import VnInput from 'src/components/common/VnInput.vue';
 import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
 import VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
 import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
-import CustomsNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
+import CustomerNewCustomsAgent from 'src/pages/Customer/components/CustomerNewCustomsAgent.vue';
 
 const { t } = useI18n();
 const route = useRoute();
@@ -233,7 +233,7 @@ const refreshData = () => {
                         v-model="data.customsAgentFk"
                     >
                         <template #form>
-                            <CustomsNewCustomsAgent @on-data-saved="refreshData()" />
+                            <CustomerNewCustomsAgent @on-data-saved="refreshData()" />
                         </template>
                     </VnSelectCreate>
                 </div>
diff --git a/src/pages/Customer/components/CustomerNewPayment.vue b/src/pages/Customer/components/CustomerNewPayment.vue
new file mode 100644
index 000000000..fc0c52b0f
--- /dev/null
+++ b/src/pages/Customer/components/CustomerNewPayment.vue
@@ -0,0 +1,286 @@
+<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 VnInputDate from 'components/common/VnInputDate.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+import VnInput from 'src/components/common/VnInput.vue';
+
+const { t } = useI18n();
+const route = useRoute();
+
+const $props = defineProps({
+    companyId: {
+        type: Number,
+        required: true,
+    },
+    totalCredit: {
+        type: Number,
+        required: true,
+    },
+    promise: {
+        type: Function,
+        required: true,
+    },
+});
+
+const closeButton = ref(null);
+const urlCreate = ref([]);
+const companyOptions = ref([]);
+const bankOptions = ref([]);
+const clientFindOne = ref([]);
+const deliveredAmount = ref(null);
+const amountToReturn = ref(null);
+const viewRecipt = ref(true);
+const sendEmail = ref(false);
+const isLoading = ref(false);
+
+const filterBanks = {
+    fields: ['id', 'bank', 'accountingTypeFk'],
+    include: { relation: 'accountingType' },
+    order: 'id',
+    limit: 30,
+};
+
+const filterClientFindOne = {
+    fields: ['email'],
+    where: {
+        id: `${route.params.id}`,
+    },
+};
+
+const initialData = reactive({
+    amountPaid: $props.totalCredit,
+    bankFk: null,
+    clientFk: `${route.params.id}`,
+    companyFk: $props.companyId,
+    compensationAccount: null,
+    description: null,
+    email: clientFindOne.value.email,
+    payed: null,
+});
+
+onBeforeMount(() => {
+    urlCreate.value = `Clients/${route.params.id}/createReceipt`;
+});
+
+const setPaymentType = (id) => {
+    initialData.payed = '2001-01-01T11:00:00.000Z';
+    if (id === 1) initialData.description = 'Credit card';
+    if (id === 2) initialData.description = 'Cash';
+    if (id === 3 || id === 3117) initialData.description = '';
+    if (id === 4) initialData.description = 'Transfer';
+};
+
+const calculateFromAmount = (event) => {
+    amountToReturn.value = parseFloat(event) * -1 + parseFloat(deliveredAmount.value);
+};
+
+const calculateFromDeliveredAmount = (event) => {
+    amountToReturn.value = parseFloat($props.totalCredit) * -1 + parseFloat(event);
+};
+
+const setClientEmail = (data) => {
+    initialData.email = data.email;
+};
+
+const onDataSaved = async () => {
+    isLoading.value = true;
+    if ($props.promise) {
+        try {
+            await $props.promise();
+        } finally {
+            isLoading.value = false;
+            if (closeButton.value) closeButton.value.click();
+        }
+    }
+};
+</script>
+
+<template>
+    <QDialog ref="dialogRef">
+        <fetch-data
+            @on-fetch="(data) => (companyOptions = data)"
+            auto-load
+            url="Companies"
+        />
+        <fetch-data
+            :filter="filterBanks"
+            @on-fetch="(data) => (bankOptions = data)"
+            auto-load
+            url="Banks"
+        />
+        <fetch-data
+            :filter="filterClientFindOne"
+            @on-fetch="setClientEmail"
+            auto-load
+            url="Clients/findOne"
+        />
+
+        <FormModel
+            :default-actions="false"
+            :form-initial-data="initialData"
+            :observe-form-changes="false"
+            :url-create="urlCreate"
+            @on-data-saved="onDataSaved()"
+        >
+            <template #form="{ data }">
+                <span ref="closeButton" class="row justify-end close-icon" v-close-popup>
+                    <QIcon name="close" size="sm" />
+                </span>
+
+                <h5 class="flex justify-center q-mt-xs">
+                    {{ t('New payment') }}
+                </h5>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnInputDate
+                            :label="t('Date')"
+                            :required="true"
+                            v-model="data.payed"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Company')"
+                            :options="companyOptions"
+                            :required="true"
+                            hide-selected
+                            option-label="code"
+                            option-value="id"
+                            v-model="data.companyFk"
+                        />
+                    </div>
+                </VnRow>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col">
+                        <VnSelectFilter
+                            :label="t('Bank')"
+                            :options="bankOptions"
+                            :required="true"
+                            @update:model-value="setPaymentType($event)"
+                            hide-selected
+                            option-label="bank"
+                            option-value="id"
+                            v-model="data.bankFk"
+                        >
+                            <template #option="scope">
+                                <QItem v-bind="scope.itemProps">
+                                    <QItemSection>
+                                        <QItemLabel>
+                                            {{ scope.opt.id }}:&ensp;{{ scope.opt.bank }}
+                                        </QItemLabel>
+                                    </QItemSection>
+                                </QItem>
+                            </template>
+                        </VnSelectFilter>
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            :label="t('Amount')"
+                            :required="true"
+                            @update:model-value="calculateFromAmount($event)"
+                            type="number"
+                            v-model.number="data.amountPaid"
+                        />
+                    </div>
+                </VnRow>
+
+                <div class="text-h6" v-if="data.bankFk === 3 || data.bankFk === 3117">
+                    {{ t('Compensation') }}
+                </div>
+
+                <VnRow class="row q-gutter-md q-mb-md">
+                    <div class="col" v-if="data.bankFk === 3 || data.bankFk === 3117">
+                        <VnInput
+                            :label="t('Compensation account')"
+                            v-model="data.compensationAccount"
+                        />
+                    </div>
+                    <div class="col">
+                        <VnInput
+                            :label="t('Reference')"
+                            :required="true"
+                            v-model="data.description"
+                        />
+                    </div>
+                </VnRow>
+
+                <div class="q-mt-lg" v-if="data.bankFk === 2">
+                    <div class="text-h6">{{ t('Cash') }}</div>
+
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <VnInput
+                                :label="t('Delivered amount')"
+                                @update:model-value="calculateFromDeliveredAmount($event)"
+                                type="number"
+                                v-model="deliveredAmount"
+                            />
+                        </div>
+                        <div class="col">
+                            <VnInput
+                                :label="t('Amount to return')"
+                                disable
+                                type="number"
+                                v-model="amountToReturn"
+                            />
+                        </div>
+                    </VnRow>
+
+                    <VnRow class="row q-gutter-md q-mb-md">
+                        <div class="col">
+                            <QCheckbox v-model="viewRecipt" />
+                        </div>
+                        <div class="col">
+                            <QCheckbox v-model="sendEmail" />
+                        </div>
+                    </VnRow>
+                </div>
+
+                <div class="q-mt-lg row justify-end">
+                    <QBtn
+                        :disabled="isLoading"
+                        :label="t('globals.cancel')"
+                        :loading="isLoading"
+                        class="q-ml-sm"
+                        color="primary"
+                        flat
+                        type="reset"
+                        v-close-popup
+                    />
+                    <QBtn
+                        :disabled="isLoading"
+                        :label="t('globals.save')"
+                        :loading="isLoading"
+                        color="primary"
+                        type="submit"
+                    />
+                </div>
+            </template>
+        </FormModel>
+    </QDialog>
+</template>
+
+<i18n>
+es:
+    New payment: Añadir pago
+    Date: Fecha
+    Company: Empresa
+    Bank: Caja
+    Amount: Importe
+    Reference: Referencia
+    Cash: Efectivo
+    Delivered amount: Cantidad entregada
+    Amount to return: Cantidad a devolver
+    View recipt: Ver recibido
+    Send email: Enviar correo
+    Compensation: Compensación
+    Compensation account: Cuenta para compensar
+</i18n>