diff --git a/src/pages/Supplier/Card/SupplierBalance.vue b/src/pages/Supplier/Card/SupplierBalance.vue
new file mode 100644
index 000000000..bc6e987fc
--- /dev/null
+++ b/src/pages/Supplier/Card/SupplierBalance.vue
@@ -0,0 +1,329 @@
+<script setup>
+import { computed, onBeforeMount, ref } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useRoute } from 'vue-router';
+import { useAcl } from 'src/composables/useAcl';
+import axios from 'axios';
+import { useQuasar } from 'quasar';
+import { getSupplierRisk } from 'src/composables/getRisk';
+
+import { toCurrency, toDate, toDateHourMin } from 'src/filters';
+import { useState } from 'composables/useState';
+import { useStateStore } from 'stores/useStateStore';
+import { usePrintService } from 'composables/usePrintService';
+import { useVnConfirm } from 'composables/useVnConfirm';
+
+import VnTable from 'components/VnTable/VnTable.vue';
+import VnInput from 'components/common/VnInput.vue';
+import VnSubToolbar from 'components/ui/VnSubToolbar.vue';
+import VnFilter from 'components/VnTable/VnFilter.vue';
+
+import CreateNewPayment from 'src/components/CreateNewPayment.vue';
+import InvoiceOutDescriptorProxy from 'src/pages/InvoiceOut/Card/InvoiceOutDescriptorProxy.vue';
+
+const { openConfirmationModal } = useVnConfirm();
+const { sendEmail, openReport } = usePrintService();
+const { t } = useI18n();
+const { hasAny } = useAcl();
+
+const quasar = useQuasar();
+const route = useRoute();
+const state = useState();
+const stateStore = useStateStore();
+const user = state.getUser();
+
+const supplierRisk = ref([]);
+const tableRef = ref();
+const companyId = ref();
+const companyUser = ref(user.value.companyFk);
+const balances = ref([]);
+const vnFilterRef = ref({});
+const filter = computed(() => {
+    return {
+        supplierId: route.params.id,
+        companyId: companyId.value ?? companyUser.value,
+    };
+});
+
+const companyFilterColumn = {
+    align: 'left',
+    name: 'companyId',
+    label: t('Company'),
+    component: 'select',
+    attrs: {
+        url: 'Companies',
+        optionLabel: 'code',
+        optionValue: 'id',
+        sortBy: 'code',
+    },
+    columnFilter: {
+        event: {
+            remove: () => (companyId.value = null),
+            'update:modelValue': (newCompanyFk) => {
+                if (!newCompanyFk) return;
+                vnFilterRef.value.addFilter(newCompanyFk);
+                companyUser.value = newCompanyFk;
+            },
+            blur: () => !companyId.value && (companyId.value = companyUser.value),
+        },
+    },
+    visible: false,
+};
+
+const columns = computed(() => [
+    {
+        align: 'left',
+        name: 'payed',
+        label: t('Date'),
+        format: ({ payed }) => toDate(payed),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'created',
+        label: t('Creation date'),
+        format: ({ created }) => toDateHourMin(created),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        label: t('Employee'),
+        columnField: {
+            component: 'userLink',
+            attrs: ({ row }) => {
+                return {
+                    workerId: row.workerFk,
+                    name: row.userName,
+                };
+            },
+        },
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'description',
+        label: t('Reference'),
+        isTitle: true,
+        class: 'extend',
+    },
+    {
+        align: 'left',
+        name: 'bankFk',
+        label: t('Bank'),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'debit',
+        label: t('Debit'),
+        format: ({ debit }) => debit && toCurrency(debit),
+        isId: true,
+    },
+    {
+        align: 'left',
+        name: 'credit',
+        label: t('Havings'),
+        format: ({ credit }) => credit && toCurrency(credit),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'balance',
+        label: t('Balance'),
+        format: ({ balance }) => toCurrency(balance),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'isConciliate',
+        label: t('Conciliated'),
+        cardVisible: true,
+    },
+    {
+        align: 'left',
+        name: 'tableActions',
+        actions: [
+            {
+                title: t('globals.downloadPdf'),
+                icon: 'cloud_download',
+                show: (row) => row.isInvoice,
+                action: (row) => showBalancePdf(row),
+            },
+            {
+                title: t('Send compensation'),
+                icon: 'outgoing_mail',
+                show: (row) => !!row.isCompensation,
+                action: ({ id }) =>
+                    openConfirmationModal(
+                        t('Send compensation'),
+                        t('Do you want to report compensation to the supplier by mail?'),
+                        () => sendEmail(`Receipts/${id}/balance-compensation-email`)
+                    ),
+            },
+        ],
+    },
+]);
+
+onBeforeMount(() => {
+    stateStore.rightDrawer = true;
+    companyId.value = companyUser.value;
+});
+
+async function getSupplierRisks() {
+    const filter = {
+        where: { supplierFk: route.params.id, companyFk: companyUser.value },
+    };
+    const { data } = await getSupplierRisk(filter);
+    supplierRisk.value = data;
+    return supplierRisk.value;
+}
+
+async function getCurrentBalance() {
+    const currentBalance = (await getSupplierRisks()).find((balance) => {
+        return balance.companyFk === companyId.value;
+    });
+    return currentBalance && currentBalance.amount;
+}
+
+async function onFetch(data) {
+    balances.value = [];
+    for (const [index, balance] of data.entries()) {
+        if (index === 0) {
+            balance.balance = await getCurrentBalance();
+            continue;
+        }
+        const previousBalance = data[index - 1];
+        balance.balance =
+            previousBalance?.balance - (previousBalance?.debit - previousBalance?.credit);
+    }
+    balances.value = data;
+}
+
+const showNewPaymentDialog = () => {
+    quasar.dialog({
+        component: CreateNewPayment,
+        componentProps: {
+            companyId: companyId.value,
+            totalCredit: supplierRisk.value[0]?.amount,
+            promise: () => tableRef.value.reload(),
+        },
+    });
+};
+
+const showBalancePdf = ({ id }) => {
+    openReport(`InvoiceOuts/${id}/download`, {}, '_blank');
+};
+</script>
+
+<template>
+    <VnSubToolbar class="q-mb-md">
+        <template #st-data>
+            <div class="column justify-center q-px-md q-py-sm">
+                <span class="text-bold">{{ t('Total by company') }}</span>
+                <div class="row justify-center" v-if="supplierRisk?.length">
+                    {{ supplierRisk[0].company.code }}:
+                    {{ toCurrency(supplierRisk[0].amount) }}
+                </div>
+            </div>
+        </template>
+        <template #st-actions>
+            <div>
+                <VnFilter
+                    ref="vnFilterRef"
+                    v-model="companyId"
+                    data-key="CustomerBalance"
+                    :column="companyFilterColumn"
+                    search-url="balance"
+                />
+            </div>
+        </template>
+    </VnSubToolbar>
+    <VnTable
+        ref="tableRef"
+        data-key="CustomerBalance"
+        url="Receipts/filter"
+        search-url="balance"
+        :user-params="filter"
+        :columns="columns"
+        :right-search="false"
+        :is-editable="false"
+        :column-search="false"
+        @on-fetch="onFetch"
+        :disable-option="{ card: true }"
+        auto-load
+    >
+        <template #column-balance="{ rowIndex }">
+            {{ toCurrency(balances[rowIndex]?.balance) }}
+        </template>
+        <template #column-description="{ row }">
+            <div class="link" v-if="row.isInvoice">
+                {{ t('bill', { ref: row.description }) }}
+                <InvoiceOutDescriptorProxy :id="row.description" />
+            </div>
+            <span v-else class="q-pa-xs dotted rounded-borders" :title="row.description">
+                {{ row.description }}
+            </span>
+            <QPopupEdit
+                v-model="row.description"
+                v-slot="scope"
+                @save="
+                    (value) =>
+                        value != row.description &&
+                        axios.patch(`Receipts/${row.id}`, { description: value })
+                "
+                auto-save
+            >
+                <VnInput
+                    v-model="scope.value"
+                    :disable="
+                        !hasAny([{ model: 'Receipt', props: '*', accessType: 'WRITE' }])
+                    "
+                    @keypress.enter="scope.set"
+                    autofocus
+                />
+            </QPopupEdit>
+        </template>
+    </VnTable>
+    <QPageSticky :offset="[18, 18]" style="z-index: 2">
+        <QBtn
+            @click.stop="showNewPaymentDialog()"
+            color="primary"
+            fab
+            icon="add"
+            shortcut="+"
+        />
+        <QTooltip>
+            {{ t('New payment') }}
+        </QTooltip>
+    </QPageSticky>
+</template>
+
+<i18n>
+en:
+    bill: 'N/INV {ref}'
+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
+    bill: 'N/FRA {ref}'
+    Bank: Caja
+    Debit: Debe
+    Havings: Haber
+    Balance: Balance
+    Conciliated: Conciliado
+    Send compensation: Enviar compensación
+    Do you want to report compensation to the supplier by mail?: ¿Desea informar de la compensación al cliente por correo?
+</i18n>
+
+<style lang="scss" scoped>
+.dotted {
+    border: 1px dotted var(--vn-header-color);
+}
+.dotted:hover {
+    border: 1px dotted $primary;
+}
+</style>