diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 96a25d1a7..d6c569618 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -875,6 +875,36 @@ export default {
         create: {
             supplierName: 'Supplier name',
         },
+        basicData: {
+            alias: 'Alias',
+            workerFk: 'Responsible',
+            isSerious: 'Verified',
+            isActive: 'Active',
+            isPayMethodChecked: 'PayMethod checked',
+            note: 'Notes',
+        },
+        fiscalData: {
+            name: 'Social name *',
+            nif: 'Tax number *',
+            account: 'Account',
+            sageTaxTypeFk: 'Sage tax type',
+            sageWithholdingFk: 'Sage withholding',
+            sageTransactionTypeFk: 'Sage transaction type',
+            supplierActivityFk: 'Supplier activity',
+            healthRegister: 'Health register',
+            street: 'Street',
+            postcode: 'Postcode',
+            city: 'City *',
+            provinceFk: 'Province',
+            country: 'Country',
+            isTrucker: 'Trucker',
+            isVies: 'Vies',
+        },
+        billingData: {
+            payMethodFk: 'Billing data',
+            payDemFk: 'Payment deadline',
+            payDay: 'Pay day',
+        },
     },
     travel: {
         pageTitles: {
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 6b1e22263..6fd60bfd9 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -874,6 +874,36 @@ export default {
         create: {
             supplierName: 'Nombre del proveedor',
         },
+        basicData: {
+            alias: 'Alias',
+            workerFk: 'Responsable',
+            isSerious: 'Verificado',
+            isActive: 'Activo',
+            isPayMethodChecked: 'Método de pago validado',
+            note: 'Notas',
+        },
+        fiscalData: {
+            name: 'Razón social *',
+            nif: 'NIF/CIF *',
+            account: 'Cuenta',
+            sageTaxTypeFk: 'Tipo de impuesto sage',
+            sageWithholdingFk: 'Retención sage',
+            sageTransactionTypeFk: 'Tipo de transacción sage',
+            supplierActivityFk: 'Actividad proveedor',
+            healthRegister: 'Pasaporte sanitario',
+            street: 'Calle',
+            postcode: 'Código postal',
+            city: 'Población *',
+            provinceFk: 'Provincia',
+            country: 'País',
+            isTrucker: 'Transportista',
+            isVies: 'Vies',
+        },
+        billingData: {
+            payMethodFk: 'Forma de pago',
+            payDemFk: 'Plazo de pago',
+            payDay: 'Día de pago',
+        },
     },
     travel: {
         pageTitles: {
diff --git a/src/pages/Supplier/Card/SupplierBasicData.vue b/src/pages/Supplier/Card/SupplierBasicData.vue
index 582da48f3..b73ce9346 100644
--- a/src/pages/Supplier/Card/SupplierBasicData.vue
+++ b/src/pages/Supplier/Card/SupplierBasicData.vue
@@ -1 +1,97 @@
-<template>Supplier basic data</template>
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+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';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const workersOptions = ref([]);
+</script>
+<template>
+    <FetchData
+        url="Workers/search"
+        :filter="{ fields: ['id', 'nickname'], order: 'nickname ASC', limit: 30 }"
+        @on-fetch="(data) => (workersOptions = data)"
+        auto-load
+    />
+    <FormModel
+        :url="`Suppliers/${route.params.id}`"
+        :url-update="`Suppliers/${route.params.id}`"
+        model="supplier"
+        auto-load
+    >
+        <template #form="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.nickname"
+                        :label="t('supplier.basicData.alias')"
+                        :rules="validate('supplier.nickname')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('supplier.basicData.workerFk')"
+                        v-model="data.workerFk"
+                        :options="workersOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        map-options
+                        :rules="validate('supplier.workerFk')"
+                    >
+                        <template #option="scope">
+                            <QItem v-bind="scope.itemProps">
+                                <QItemSection>
+                                    <QItemLabel>{{ scope.opt?.name }}</QItemLabel>
+                                    <QItemLabel caption>
+                                        {{ scope.opt?.nickname }}, {{ scope.opt?.id }}
+                                    </QItemLabel>
+                                </QItemSection>
+                            </QItem>
+                        </template>
+                    </VnSelectFilter>
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isSerious"
+                        :label="t('supplier.basicData.isSerious')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isActive"
+                        :label="t('supplier.basicData.isActive')"
+                    />
+                </div>
+                <div class="col">
+                    <QCheckbox
+                        v-model="data.isPayMethodChecked"
+                        :label="t('supplier.basicData.isPayMethodChecked')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('supplier.basicData.note')"
+                        type="textarea"
+                        v-model="data.note"
+                        fill-input
+                        autogrow
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Supplier/Card/SupplierBillingData.vue b/src/pages/Supplier/Card/SupplierBillingData.vue
index 849737fa7..1237a0403 100644
--- a/src/pages/Supplier/Card/SupplierBillingData.vue
+++ b/src/pages/Supplier/Card/SupplierBillingData.vue
@@ -1 +1,68 @@
-<template>Supplier billing data</template>
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+import FetchData from 'components/FetchData.vue';
+import FormModel from 'components/FormModel.vue';
+import VnRow from 'components/ui/VnRow.vue';
+import VnSelectFilter from 'src/components/common/VnSelectFilter.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const paymethodsOptions = ref([]);
+const payDemsOptions = ref([]);
+</script>
+<template>
+    <FetchData
+        url="Paymethods"
+        @on-fetch="(data) => (paymethodsOptions = data)"
+        auto-load
+    />
+    <FetchData url="PayDems" @on-fetch="(data) => (payDemsOptions = data)" auto-load />
+    <FormModel
+        :url="`Suppliers/${route.params.id}`"
+        :url-update="`Suppliers/${route.params.id}`"
+        model="supplier"
+        auto-load
+    >
+        <template #form="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('supplier.billingData.payMethodFk')"
+                        v-model="data.payMethodFk"
+                        :options="paymethodsOptions"
+                        option-value="id"
+                        option-label="name"
+                        hide-selected
+                        map-options
+                        :rules="validate('supplier.payMethodFk')"
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('supplier.billingData.payDemFk')"
+                        v-model="data.payDemFk"
+                        :options="payDemsOptions"
+                        option-value="id"
+                        option-label="payDem"
+                        hide-selected
+                        map-options
+                        :rules="validate('supplier.payDemFk')"
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <QInput
+                        :label="t('supplier.billingData.payDay')"
+                        type="number"
+                        v-model="data.payDay"
+                    />
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
diff --git a/src/pages/Supplier/Card/SupplierFiscalData.vue b/src/pages/Supplier/Card/SupplierFiscalData.vue
index dd018ac60..ebf1b96b6 100644
--- a/src/pages/Supplier/Card/SupplierFiscalData.vue
+++ b/src/pages/Supplier/Card/SupplierFiscalData.vue
@@ -1 +1,292 @@
-<template>Supplier fiscal data</template>
+<script setup>
+import { ref } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+
+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 VnSelectCreate from 'src/components/common/VnSelectCreate.vue';
+import CustomerCreateNewPostcode from 'src/components/CreateNewPostcodeForm.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const postcodeFetchDataRef = ref(null);
+const sageTaxTypesOptions = ref([]);
+const sageWithholdingsOptions = ref([]);
+const sageTransactionTypesOptions = ref([]);
+const supplierActivitiesOptions = ref([]);
+const postcodesOptions = ref([]);
+const provincesLocationOptions = ref([]);
+const townsLocationOptions = ref([]);
+const countriesOptions = ref([]);
+
+const onPostcodeCreated = async () => {
+    postcodeFetchDataRef.value.fetch();
+};
+</script>
+<template>
+    <FetchData
+        url="SageTaxTypes"
+        auto-load
+        @on-fetch="(data) => (sageTaxTypesOptions = data)"
+    />
+    <FetchData
+        url="SageWithholdings"
+        auto-load
+        @on-fetch="(data) => (sageWithholdingsOptions = data)"
+    />
+    <FetchData
+        url="sageTransactionTypes"
+        auto-load
+        @on-fetch="(data) => (sageTransactionTypesOptions = data)"
+    />
+    <FetchData
+        url="SupplierActivities"
+        auto-load
+        @on-fetch="(data) => (supplierActivitiesOptions = data)"
+    />
+    <FetchData
+        ref="postcodeFetchDataRef"
+        url="Postcodes/location"
+        @on-fetch="(data) => (postcodesOptions = data)"
+        auto-load
+    />
+    <FetchData
+        @on-fetch="(data) => (townsLocationOptions = data)"
+        auto-load
+        url="Towns/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (provincesLocationOptions = data)"
+        auto-load
+        url="Provinces/location"
+    />
+    <FetchData
+        @on-fetch="(data) => (countriesOptions = data)"
+        auto-load
+        url="Countries"
+    />
+    <FormModel
+        :url="`Suppliers/${route.params.id}`"
+        :url-update="`Suppliers/${route.params.id}/updateFiscalData`"
+        model="supplier"
+        auto-load
+    >
+        <template #form="{ data, validate }">
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.name"
+                        :label="t('supplier.fiscalData.name')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <VnInput
+                        v-model="data.nif"
+                        :label="t('supplier.fiscalData.nif')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.account"
+                        :label="t('supplier.fiscalData.account')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('supplier.fiscalData.sageTaxTypeFk')"
+                        v-model="data.sageTaxTypeFk"
+                        :options="sageTaxTypesOptions"
+                        option-value="id"
+                        option-label="vat"
+                        hide-selected
+                        map-options
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('supplier.fiscalData.sageWithholdingFk')"
+                        v-model="data.sageWithholdingFk"
+                        :options="sageWithholdingsOptions"
+                        option-value="id"
+                        option-label="withholding"
+                        hide-selected
+                        map-options
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('supplier.fiscalData.sageTransactionTypeFk')"
+                        v-model="data.sageTransactionTypeFk"
+                        :options="sageTransactionTypesOptions"
+                        option-value="id"
+                        option-label="transaction"
+                        hide-selected
+                        map-options
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('supplier.fiscalData.supplierActivityFk')"
+                        v-model="data.supplierActivityFk"
+                        :options="supplierActivitiesOptions"
+                        option-value="code"
+                        option-label="name"
+                        hide-selected
+                        map-options
+                    />
+                </div>
+                <div class="col">
+                    <VnInput
+                        v-model="data.healthRegister"
+                        :label="t('supplier.fiscalData.healthRegister')"
+                        clearable
+                    />
+                </div>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnInput
+                        v-model="data.street"
+                        :label="t('supplier.fiscalData.street')"
+                        clearable
+                    />
+                </div>
+                <div class="col">
+                    <VnSelectCreate
+                        v-model="data.postCode"
+                        :label="t('supplier.fiscalData.postcode')"
+                        :rules="validate('supplier.postCode')"
+                        :roles-allowed-to-create="['deliveryAssistant']"
+                        :options="postcodesOptions"
+                        option-label="code"
+                        option-value="code"
+                        map-options
+                        hide-selected
+                    >
+                        <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>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('supplier.fiscalData.city')"
+                        :options="townsLocationOptions"
+                        v-model="data.city"
+                        option-value="name"
+                        option-label="name"
+                        hide-selected
+                        :rules="validate('supplier.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>
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('supplier.fiscalData.provinceFk')"
+                        :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>
+            </VnRow>
+            <VnRow class="row q-gutter-md q-mb-md">
+                <div class="col">
+                    <VnSelectFilter
+                        :label="t('supplier.fiscalData.country')"
+                        :options="countriesOptions"
+                        hide-selected
+                        option-label="country"
+                        option-value="id"
+                        v-model="data.countryFk"
+                        :rules="validate('postcode.countryFk')"
+                    />
+                </div>
+                <div class="col flex justify-around">
+                    <QCheckbox
+                        v-model="data.isTrucker"
+                        :label="t('supplier.fiscalData.isTrucker')"
+                    />
+                    <div class="row items-center">
+                        <QCheckbox
+                            v-model="data.isVies"
+                            :label="t('supplier.fiscalData.isVies')"
+                        />
+                        <QIcon name="info" size="xs" class="cursor-pointer q-ml-sm">
+                            <QTooltip>
+                                {{
+                                    t(
+                                        'When activating it, do not enter the country code in the ID field.'
+                                    )
+                                }}
+                            </QTooltip>
+                        </QIcon>
+                    </div>
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
+</template>
+
+<i18n>
+es:
+    When activating it, do not enter the country code in the ID field.: Al activarlo, no informar el código del país en el campo nif
+</i18n>
diff --git a/src/pages/Supplier/Card/SupplierLog.vue b/src/pages/Supplier/Card/SupplierLog.vue
index 2733e958d..86ee15fce 100644
--- a/src/pages/Supplier/Card/SupplierLog.vue
+++ b/src/pages/Supplier/Card/SupplierLog.vue
@@ -1 +1,6 @@
-<template>Supplier log</template>
+<script setup>
+import VnLog from 'src/components/common/VnLog.vue';
+</script>
+<template>
+    <VnLog model="Supplier" url="/SupplierLogs"></VnLog>
+</template>