diff --git a/src/components/ui/VnFilterPanel.vue b/src/components/ui/VnFilterPanel.vue
index 68b3a7676..0e42ae2bf 100644
--- a/src/components/ui/VnFilterPanel.vue
+++ b/src/components/ui/VnFilterPanel.vue
@@ -20,6 +20,10 @@ const props = defineProps({
         required: false,
         default: null,
     },
+    showAll: {
+        type: Boolean,
+        default: true,
+    },
 });
 
 const emit = defineEmits(['refresh', 'clear']);
@@ -38,22 +42,27 @@ onMounted(() => {
 
 const isLoading = ref(false);
 async function search() {
-    const params = userParams.value;
-    for (const param in params) {
-        if (params[param] === '' || params[param] === null) {
-            delete userParams.value[param];
-            delete store.userParams[param];
+    if (props.showAll) {
+        const params = userParams.value;
+        for (const param in params) {
+            if (params[param] === '' || params[param] === null) {
+                delete userParams.value[param];
+                delete store.userParams[param];
+            }
         }
-    }
 
-    isLoading.value = true;
-    await arrayData.addFilter({ params });
-    isLoading.value = false;
+        isLoading.value = true;
+        await arrayData.addFilter({ params });
+        isLoading.value = false;
+    } else {
+        store.data = [];
+    }
 }
 
 async function reload() {
     isLoading.value = true;
-    await arrayData.fetch({ append: false });
+    if (props.showAll) await arrayData.fetch({ append: false });
+    else store.data = [];
     isLoading.value = false;
     emit('refresh');
 }
@@ -61,7 +70,8 @@ async function reload() {
 async function clearFilters() {
     userParams.value = {};
     isLoading.value = true;
-    await arrayData.applyFilter({ params: {} });
+    if (props.showAll) await arrayData.applyFilter({ params: {} });
+    else store.data = [];
     isLoading.value = false;
 
     emit('clear');
diff --git a/src/composables/useArrayData.js b/src/composables/useArrayData.js
index c7808f9a8..08e4eb001 100644
--- a/src/composables/useArrayData.js
+++ b/src/composables/useArrayData.js
@@ -38,11 +38,11 @@ export function useArrayData(key, userOptions) {
             'limit',
             'skip',
             'userParams',
-            'userFilter'
+            'userFilter',
         ];
         if (typeof userOptions === 'object') {
             for (const option in userOptions) {
-                const isEmpty = userOptions[option] == null || userOptions[option] == ''
+                const isEmpty = userOptions[option] == null || userOptions[option] == '';
                 if (isEmpty || !allowedOptions.includes(option)) continue;
 
                 if (Object.prototype.hasOwnProperty.call(store, option)) {
@@ -73,12 +73,11 @@ export function useArrayData(key, userOptions) {
 
         Object.assign(params, store.userParams);
 
-        store.isLoading = true
+        store.isLoading = true;
         const response = await axios.get(store.url, {
             signal: canceller.signal,
             params,
         });
-
         const { limit } = filter;
 
         hasMoreData.value = response.data.length === limit;
@@ -94,7 +93,7 @@ export function useArrayData(key, userOptions) {
             updateStateParams();
         }
 
-        store.isLoading = false
+        store.isLoading = false;
 
         canceller = null;
     }
@@ -135,8 +134,9 @@ export function useArrayData(key, userOptions) {
         await fetch({ append: true });
     }
 
-    async function refresh() {
-        await fetch({ append: false });
+    async function refresh(showAll = true) {
+        if (showAll) await fetch({ append: false });
+        if (!showAll) store.data = [];
     }
 
     function updateStateParams() {
@@ -153,8 +153,8 @@ export function useArrayData(key, userOptions) {
         });
     }
 
-    const totalRows = computed(() => store.data && store.data.length || 0);
-    const isLoading = computed(() => store.isLoading || false)
+    const totalRows = computed(() => (store.data && store.data.length) || 0);
+    const isLoading = computed(() => store.isLoading || false);
 
     return {
         fetch,
@@ -167,6 +167,6 @@ export function useArrayData(key, userOptions) {
         hasMoreData,
         totalRows,
         updateStateParams,
-        isLoading
+        isLoading,
     };
 }
diff --git a/src/pages/Customer/CustomerPayments.vue b/src/pages/Customer/CustomerPayments.vue
index 608aca2af..6b8430d84 100644
--- a/src/pages/Customer/CustomerPayments.vue
+++ b/src/pages/Customer/CustomerPayments.vue
@@ -110,17 +110,23 @@ function stateColor(row) {
             </div>
         </Teleport>
     </template>
-    <QDrawer v-model="stateStore.rightDrawer" side="right" :width="256" show-if-above>
+    <QDrawer
+        v-model="stateStore.rightDrawer"
+        side="right"
+        :width="256"
+        show-if-above
+        :breakpoint="1600"
+    >
         <QScrollArea class="fit text-grey-8">
             <CustomerPaymentsFilter data-key="CustomerTransactions" />
         </QScrollArea>
     </QDrawer>
-    <QPage class="column items-center q-pa-md">
+    <QPage class="column items-center q-pa-md customer-payments">
         <div class="card-list">
             <QToolbar class="q-pa-none">
                 <QToolbarTitle>{{ t('Web Payments') }}</QToolbarTitle>
                 <QBtn
-                    @click="arrayData.refresh()"
+                    @click="arrayData.refresh(false)"
                     :loading="isLoading"
                     icon="refresh"
                     color="primary"
@@ -138,7 +144,7 @@ function stateColor(row) {
                 order="created DESC"
                 :limit="20"
                 :offset="50"
-                auto-load
+                :show-all="false"
             >
                 <template #body="{ rows }">
                     <QTable
@@ -148,7 +154,7 @@ function stateColor(row) {
                         row-key="id"
                         :pagination="{ rowsPerPage: 0 }"
                         :grid="grid || $q.screen.lt.sm"
-                        class="q-mt-xs"
+                        class="q-mt-xs custom-table"
                         hide-pagination
                     >
                         <template #body-cell-actions="{ row }">
@@ -167,6 +173,13 @@ function stateColor(row) {
                                 </QBtn>
                             </QTd>
                         </template>
+                        <template #body-cell-id="{ row }">
+                            <QTd auto-width align="right">
+                                <span>
+                                    {{ row.id }}
+                                </span>
+                            </QTd>
+                        </template>
                         <template #body-cell-customerId="{ row }">
                             <QTd align="right">
                                 <span class="link">
@@ -175,6 +188,13 @@ function stateColor(row) {
                                 </span>
                             </QTd>
                         </template>
+                        <template #body-cell-customer="{ row }">
+                            <QTd auto-width align="left" :title="row.customerName">
+                                <span>
+                                    {{ row.customerName }}
+                                </span>
+                            </QTd>
+                        </template>
                         <template #body-cell-state="{ row }">
                             <QTd auto-width class="text-center">
                                 <QBadge :color="stateColor(row)">
@@ -188,9 +208,9 @@ function stateColor(row) {
                         </template>
                         <template #item="{ cols, row }">
                             <div class="q-mb-md col-12">
-                                <QCard>
+                                <QCard class="q-pa-none">
                                     <QItem class="q-pa-none items-start">
-                                        <QItemSection class="q-pa-md">
+                                        <QItemSection class="q-pa-none">
                                             <QList>
                                                 <template
                                                     v-for="col of cols"
@@ -257,10 +277,21 @@ function stateColor(row) {
     </QPage>
 </template>
 
-<style lang="scss" scoped>
-.card-list {
-    width: 100%;
-    max-width: 60em;
+<style lang="scss">
+.customer-payments {
+    .card-list {
+        width: 100%;
+        max-width: 60em;
+
+        .q-table--dense .q-table th:first-child {
+            padding-left: 0;
+        }
+        td {
+            max-width: 130px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
+    }
 }
 </style>
 
diff --git a/src/pages/Customer/CustomerPaymentsFilter.vue b/src/pages/Customer/CustomerPaymentsFilter.vue
index d2a9160ab..6d104765d 100644
--- a/src/pages/Customer/CustomerPaymentsFilter.vue
+++ b/src/pages/Customer/CustomerPaymentsFilter.vue
@@ -9,10 +9,14 @@ const props = defineProps({
         required: true,
     },
 });
+
+function isValidNumber(value) {
+    return /^(\d|\d+(\.|,)?\d+)$/.test(value);
+}
 </script>
 
 <template>
-    <VnFilterPanel :data-key="props.dataKey" :search-button="true">
+    <VnFilterPanel :data-key="props.dataKey" :search-button="true" :show-all="false">
         <template #tags="{ tag, formatFn }">
             <div class="q-gutter-x-xs">
                 <strong>{{ t(`params.${tag.label}`) }}: </strong>
@@ -49,9 +53,90 @@ const props = defineProps({
                 </QItem>
                 <QItem>
                     <QItemSection>
-                        <QInput :label="t('Amount')" v-model="params.amount" lazy-rules>
+                        <QInput
+                            :label="t('Amount')"
+                            v-model="params.amount"
+                            lazy-rules
+                            @update:model-value="
+                                (value) => {
+                                    if (value.includes(','))
+                                        params.amount = params.amount.replace(',', '.');
+                                }
+                            "
+                            :rules="[
+                                (val) =>
+                                    isValidNumber(val) || !val || 'Please type a number',
+                            ]"
+                        >
                             <template #prepend>
-                                <QIcon name="euro" size="sm"></QIcon>
+                                <QIcon name="euro" size="sm" />
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                </QItem>
+                <QItem>
+                    <QItemSection>
+                        <QInput v-model="params.from" :label="t('From')" mask="date">
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="params.from" landscape>
+                                            <div
+                                                class="row items-center justify-end q-gutter-sm"
+                                            >
+                                                <QBtn
+                                                    :label="t('globals.cancel')"
+                                                    color="primary"
+                                                    flat
+                                                    v-close-popup
+                                                />
+                                                <QBtn
+                                                    :label="t('globals.confirm')"
+                                                    color="primary"
+                                                    flat
+                                                    v-close-popup
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
+                            </template>
+                        </QInput>
+                    </QItemSection>
+                    <QItemSection>
+                        <QInput v-model="params.to" :label="t('To')" mask="date">
+                            <template #append>
+                                <QIcon name="event" class="cursor-pointer">
+                                    <QPopupProxy
+                                        cover
+                                        transition-show="scale"
+                                        transition-hide="scale"
+                                    >
+                                        <QDate v-model="params.to" landscape>
+                                            <div
+                                                class="row items-center justify-end q-gutter-sm"
+                                            >
+                                                <QBtn
+                                                    :label="t('globals.cancel')"
+                                                    color="primary"
+                                                    flat
+                                                    v-close-popup
+                                                />
+                                                <QBtn
+                                                    :label="t('globals.confirm')"
+                                                    color="primary"
+                                                    flat
+                                                    @click="save"
+                                                    v-close-popup
+                                                />
+                                            </div>
+                                        </QDate>
+                                    </QPopupProxy>
+                                </QIcon>
                             </template>
                         </QInput>
                     </QItemSection>
@@ -75,4 +160,5 @@ es:
     Order ID: ID pedido
     Customer ID: ID cliente
     Amount: Importe
+    Please type a number: Por favor, escriba un número
 </i18n>