diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 9783a6cf6..5e0cd5162 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -3,14 +3,17 @@ import { ref, onMounted } from 'vue';
 import axios from 'axios';
 // import { useRouter } from 'vue-router';
 // const router = useRouter();
+
+const fabPos = ref([18, 18]);
+const draggingFab = ref(false);
+
 const gridView = ref(true);
 const loading = ref(false);
 const pagination = ref({
     sortBy: 'id ASC',
     descending: false,
     page: 1,
-    rowsPerPage: 10,
-    rowsNumber: 10,
+    rowsPerPage: 5,
 });
 
 const columns = [
@@ -75,7 +78,11 @@ async function onRequest(props) {
         params: { filter },
     });
 
-    customers.value = data;
+    for (const row of data) {
+        customers.value.push(row);
+    }
+
+    //customers.value = newData;
 
     pagination.value.rowsNumber = await totalRows();
 
@@ -95,6 +102,23 @@ onMounted(() => {
     onRequest({ pagination: pagination.value });
 });
 
+async function onLoad(index, done) {
+    console.log('scroll:', index);
+
+    pagination.value.page = pagination.value.page + 1;
+
+    await onRequest({ pagination: pagination.value });
+
+    done();
+    //done(true);
+}
+
+function moveFab(ev) {
+    draggingFab.value = ev.isFirst !== true && ev.isFinal !== true;
+
+    fabPos.value = [fabPos.value[0] - ev.delta.x, fabPos.value[1] - ev.delta.y];
+}
+
 // function navigate(id) {
 //     router.push({ path: `/customer/${id}` });
 // }
@@ -103,80 +127,83 @@ onMounted(() => {
 <template>
     <q-page class="q-pa-md">
         <div>
-            <q-table
-                title="Customers"
-                :columns="columns"
-                :rows="customers"
-                row-key="id"
-                v-model:pagination="pagination"
-                :loading="loading"
-                @request="onRequest"
-                binary-state-sort
-                :grid="gridView"
-                :card-container-class="['column', 'items-center', 'q-gutter-y-md', 'card']"
-            >
-                <template #loading>
-                    <q-inner-loading showing color="orange" />
-                </template>
-                <template #top-right>
-                    <q-btn round flat dense size="md" icon="download">
-                        <q-tooltip>Export to CSV</q-tooltip>
-                    </q-btn>
-                    <q-btn round flat dense size="md" icon="grid_view" @click="swapView()">
-                        <q-tooltip>Swap View</q-tooltip>
-                    </q-btn>
-                </template>
-                <template #item="props">
-                    <q-card class="card">
-                        <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
-                            <q-item-section class="q-pa-md">
-                                <div class="text-h6">{{ props.row.name }}</div>
-                                <q-item-label caption>@{{ props.row.username }}</q-item-label>
-                                <div class="q-mt-md">
-                                    <q-list>
-                                        <q-item class="q-pa-none">
-                                            <q-item-section>
-                                                <q-item-label caption>Email</q-item-label>
-                                                <q-item-label>{{ props.row.email }}</q-item-label>
-                                            </q-item-section>
-                                        </q-item>
-                                        <q-item class="q-pa-none">
-                                            <q-item-section>
-                                                <q-item-label caption>Phone</q-item-label>
-                                                <q-item-label>{{ props.row.phone }}</q-item-label>
-                                            </q-item-section>
-                                        </q-item>
-                                    </q-list>
-                                </div>
-                            </q-item-section>
-                            <q-btn color="grey-7" round flat icon="more_vert">
-                                <q-menu cover auto-close>
-                                    <q-list>
-                                        <q-item clickable>
-                                            <q-item-section>Action 1</q-item-section>
-                                        </q-item>
-                                        <q-item clickable>
-                                            <q-item-section>Action 2</q-item-section>
-                                        </q-item>
-                                    </q-list>
-                                </q-menu>
-                            </q-btn>
-                            <q-separator vertical />
-                            <q-card-actions vertical class="justify-between">
-                                <q-btn
-                                    flat
-                                    round
-                                    color="orange"
-                                    icon="arrow_circle_right"
-                                    @click="navigate(props.row.id)"
-                                />
-                                <q-btn flat round color="accent" icon="preview" />
-                                <q-btn flat round color="accent" icon="vn:ticket" />
-                            </q-card-actions>
-                        </q-item>
-                    </q-card>
-                </template>
-            </q-table>
+            <q-infinite-scroll @load="onLoad" :offset="100" style="height: 1000px">
+                <q-table
+                    :columns="columns"
+                    :rows="customers"
+                    row-key="id"
+                    v-model:pagination="pagination"
+                    :loading="loading"
+                    @request="onRequest"
+                    binary-state-sort
+                    :grid="true"
+                    :card-container-class="['column', 'items-center', 'q-gutter-y-md', 'card']"
+                    :hide-pagination="true"
+                >
+                    <template #loading>
+                        <q-inner-loading showing color="orange" />
+                    </template>
+                    <template #top-right>
+                        <q-btn round flat dense size="md" icon="download">
+                            <q-tooltip>Export to CSV</q-tooltip>
+                        </q-btn>
+                        <q-btn round flat dense size="md" icon="grid_view" @click="swapView()">
+                            <q-tooltip>Swap View</q-tooltip>
+                        </q-btn>
+                    </template>
+                    <template #item="props">
+                        <q-card class="card">
+                            <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
+                                <q-item-section class="q-pa-md">
+                                    <div class="text-h6">{{ props.row.name }}</div>
+                                    <q-item-label caption>#{{ props.row.id }}</q-item-label>
+                                    <div class="q-mt-md">
+                                        <q-list>
+                                            <q-item class="q-pa-none">
+                                                <q-item-section>
+                                                    <q-item-label caption>Email</q-item-label>
+                                                    <q-item-label>{{ props.row.email }}</q-item-label>
+                                                </q-item-section>
+                                            </q-item>
+                                            <q-item class="q-pa-none">
+                                                <q-item-section>
+                                                    <q-item-label caption>Phone</q-item-label>
+                                                    <q-item-label>{{ props.row.phone }}</q-item-label>
+                                                </q-item-section>
+                                            </q-item>
+                                        </q-list>
+                                    </div>
+                                </q-item-section>
+                                <q-btn color="grey-7" round flat icon="more_vert">
+                                    <q-menu cover auto-close>
+                                        <q-list>
+                                            <q-item clickable>
+                                                <q-item-section>Action 1</q-item-section>
+                                            </q-item>
+                                            <q-item clickable>
+                                                <q-item-section>Action 2</q-item-section>
+                                            </q-item>
+                                        </q-list>
+                                    </q-menu>
+                                </q-btn>
+                                <q-separator vertical />
+                                <q-card-actions vertical class="justify-between">
+                                    <q-btn
+                                        flat
+                                        round
+                                        color="orange"
+                                        icon="arrow_circle_right"
+                                        @click="navigate(props.row.id)"
+                                    />
+                                    <q-btn flat round color="accent" icon="preview" />
+                                    <q-btn flat round color="accent" icon="vn:ticket" />
+                                </q-card-actions>
+                            </q-item>
+                        </q-card>
+                    </template>
+                </q-table>
+            </q-infinite-scroll>
+
             <!--  <q-card v-for="customer in customers" :key="customer.id" class="card">
 
                 <q-item v-ripple class="q-pa-none items-start cursor-pointer q-hoverable">
@@ -246,6 +273,19 @@ onMounted(() => {
                 </q-slide-transition>
             </q-card> -->
         </div>
+
+        <q-page-sticky position="bottom-right" :offset="fabPos">
+            <q-fab
+                icon="add"
+                direction="up"
+                color="light-green-6"
+                :disable="draggingFab"
+                v-touch-pan.prevent.mouse="moveFab"
+            >
+                <q-fab-action @click="onClick" color="light-green-4" icon="person_add" :disable="draggingFab" />
+                <q-fab-action @click="onClick" color="light-green-4" icon="mail" :disable="draggingFab" />
+            </q-fab>
+        </q-page-sticky>
     </q-page>
 </template>