diff --git a/src/pages/Customer/Card/CustomerUnpaid.vue b/src/pages/Customer/Card/CustomerUnpaid.vue
index ef3ff3b94..1387329cc 100644
--- a/src/pages/Customer/Card/CustomerUnpaid.vue
+++ b/src/pages/Customer/Card/CustomerUnpaid.vue
@@ -1,164 +1,80 @@
 <script setup>
-import { computed, onBeforeMount, ref, watch, nextTick } from 'vue';
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRoute } from 'vue-router';
+
 import VnInputDate from 'components/common/VnInputDate.vue';
-import VnInput from 'src/components/common/VnInput.vue';
-import VnRow from 'components/ui/VnRow.vue';
-import axios from 'axios';
-import useNotify from 'src/composables/useNotify';
-import { useStateStore } from 'stores/useStateStore';
+import FormModel from 'components/FormModel.vue';
+import FetchData from 'components/FetchData.vue';
+import VnInputNumber from 'src/components/common/VnInputNumber.vue';
+const formModelRef = ref(false);
 
 const { t } = useI18n();
 const route = useRoute();
-const { notify } = useNotify();
-const stateStore = useStateStore();
-
 const amountInputRef = ref(null);
-const initialDated = Date.vnNew();
-const unpaidClient = ref(false);
-const isLoading = ref(false);
-const amount = ref(null);
-const dated = ref(initialDated);
 
 const initialData = ref({
-    dated: initialDated,
+    dated: Date.vnNew(),
+    amount: null,
 });
 
-const hasChanged = computed(() => {
-    return (
-        initialData.value.dated !== dated.value ||
-        initialData.value.amount !== amount.value
-    );
-});
-
-onBeforeMount(() => {
-    getData(route.params.id);
-});
-
-watch(
-    () => route.params.id,
-    (newValue) => {
-        if (!newValue) return;
-        getData(newValue);
-    }
-);
-
-const getData = async (id) => {
-    const filter = { where: { clientFk: id } };
-    try {
-        const { data } = await axios.get('ClientUnpaids', {
-            params: { filter: JSON.stringify(filter) },
-        });
-        if (data.length) {
-            setValues(data[0]);
-        } else {
-            defaultValues();
-        }
-    } catch (error) {
-        defaultValues();
-    }
-};
-
-const setValues = (data) => {
-    unpaidClient.value = true;
-    amount.value = data.amount;
-    dated.value = data.dated;
-    initialData.value = data;
-};
-
-const defaultValues = () => {
-    unpaidClient.value = false;
-    initialData.value.amount = null;
-    setInitialData();
-};
-
-const setInitialData = () => {
-    amount.value = initialData.value.amount;
-    dated.value = initialData.value.dated;
-};
-
-const onSubmit = async () => {
-    isLoading.value = true;
-
-    const payload = {
-        amount: amount.value,
+const filterClientFindOne = {
+    fields: ['unpaid', 'dated', 'amount'],
+    where: {
         clientFk: route.params.id,
-        dated: dated.value,
-    };
-    try {
-        await axios.patch('ClientUnpaids', payload);
-        notify('globals.dataSaved', 'positive');
-        unpaidClient.value = true;
-    } catch (error) {
-        notify('errors.writeRequest', 'negative');
-    } finally {
-        isLoading.value = false;
-    }
+    },
 };
-
-watch(
-    () => unpaidClient.value,
-    async (val) => {
-        await nextTick();
-        if (val) amountInputRef.value.focus();
-    }
-);
 </script>
 
 <template>
-    <Teleport v-if="stateStore?.isSubToolbarShown()" to="#st-actions">
-        <QBtnGroup push class="q-gutter-x-sm">
-            <QBtn
-                :disabled="!hasChanged"
-                :label="t('globals.reset')"
-                :loading="isLoading"
-                @click="setInitialData"
-                color="primary"
-                flat
-                icon="restart_alt"
-                type="reset"
-            />
-            <QBtn
-                :disabled="!hasChanged"
-                :label="t('globals.save')"
-                :loading="isLoading"
-                @click="onSubmit"
-                color="primary"
-                icon="save"
-            />
-        </QBtnGroup>
-    </Teleport>
+    <FetchData
+        :filter="filterClientFindOne"
+        auto-load
+        url="ClientUnpaids"
+        @on-fetch="
+            (data) => {
+                const unpaid = data.length == 1;
+                initialData = { ...data[0], unpaid };
+            }
+        "
+    />
+    <FormModel
+        v-if="'unpaid' in initialData"
+        :observe-form-changes="false"
+        ref="formModelRef"
+        model="unpaid"
+        url-update="ClientUnpaids"
+        :mapper="(formData) => ({ ...formData, clientFk: route.params.id })"
+        :form-initial-data="initialData"
+    >
+        <template #form="{ data }">
+            <VnRow>
+                <QCheckbox :label="t('Unpaid client')" v-model="data.unpaid" />
+            </VnRow>
 
-    <div class="full-width flex justify-center">
-        <QCard class="card-width q-pa-lg">
-            <QForm>
-                <VnRow>
-                    <div class="col">
-                        <QCheckbox :label="t('Unpaid client')" v-model="unpaidClient" />
-                    </div>
-                </VnRow>
-
-                <VnRow class="row q-gutter-md q-mb-md" v-show="unpaidClient">
-                    <div class="col">
-                        <VnInputDate :label="t('Date')" v-model="dated" />
-                    </div>
-                    <div class="col">
-                        <VnInput
-                            ref="amountInputRef"
-                            :label="t('Amount')"
-                            clearable
-                            type="number"
-                            v-model="amount"
-                            autofocus
-                        >
-                            <template #append>€</template></VnInput
-                        >
-                    </div>
-                </VnRow>
-            </QForm>
-        </QCard>
-    </div>
+            <VnRow class="row q-gutter-md q-mb-md" v-show="data.unpaid">
+                <div class="col">
+                    <VnInputDate
+                        data-cy="customerUnpaidDate"
+                        :label="t('Date')"
+                        v-model="data.dated"
+                    />
+                </div>
+                <div class="col">
+                    <VnInputNumber
+                        data-cy="customerUnpaidAmount"
+                        ref="amountInputRef"
+                        :label="t('Amount')"
+                        clearable
+                        v-model="data.amount"
+                        autofocus
+                    >
+                        <template #append>€</template></VnInputNumber
+                    >
+                </div>
+            </VnRow>
+        </template>
+    </FormModel>
 </template>
 
 <i18n>