diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index ebc291933..9783a6cf6 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -1,37 +1,184 @@
 <script setup>
-import { ref } from 'vue';
-import { useRouter } from 'vue-router';
-const router = useRouter();
+import { ref, onMounted } from 'vue';
+import axios from 'axios';
+// import { useRouter } from 'vue-router';
+// const router = useRouter();
+const gridView = ref(true);
+const loading = ref(false);
+const pagination = ref({
+    sortBy: 'id ASC',
+    descending: false,
+    page: 1,
+    rowsPerPage: 10,
+    rowsNumber: 10,
+});
 
-const customers = [
+const columns = [
     {
-        id: 1101,
-        name: 'Bruce Wayne',
-        username: 'batman',
-        email: 'batman@gotham',
-        phone: '555-555-5555',
-        expanded: ref(false),
+        name: 'id',
+        label: 'ID',
+        align: 'right',
+        field: (row) => row.id,
+        sortable: true,
     },
     {
-        id: 1102,
-        name: 'James Gordon',
-        username: 'jamesgordon',
-        email: 'jamesgordon@gotham',
-        phone: '555-555-1111',
-        expanded: ref(false),
+        name: 'name',
+        label: 'Name',
+        align: 'left',
+        field: (row) => row.name,
+        sortable: true,
+    },
+    {
+        name: 'phone',
+        label: 'Phone',
+        align: 'left',
+        field: (row) => row.phone,
+        sortable: true,
+    },
+    {
+        name: 'city',
+        label: 'City',
+        align: 'left',
+        field: (row) => row.city,
+        sortable: true,
+    },
+    {
+        name: 'email',
+        label: 'Email',
+        align: 'left',
+        field: (row) => row.email,
+        sortable: true,
     },
 ];
 
-function navigate(id) {
-    router.push({ path: `/customer/${id}` });
+const customers = ref([]);
+
+async function totalRows() {
+    const { data } = await axios.get('/api/Clients/count');
+
+    return data.count;
 }
+
+async function onRequest(props) {
+    const { page, rowsPerPage, sortBy, descending } = props.pagination;
+
+    // Loading status
+    loading.value = true;
+
+    const sort = descending ? `${sortBy} DESC` : `${sortBy} ASC`;
+    const filter = {
+        order: sort,
+        limit: rowsPerPage,
+        skip: rowsPerPage * (page - 1),
+    };
+    const { data } = await axios.get('/api/Clients', {
+        params: { filter },
+    });
+
+    customers.value = data;
+
+    pagination.value.rowsNumber = await totalRows();
+
+    pagination.value.page = page;
+    pagination.value.rowsPerPage = rowsPerPage;
+    pagination.value.sortBy = sortBy;
+    pagination.value.descending = descending;
+
+    loading.value = false;
+}
+
+function swapView() {
+    gridView.value = !gridView.value;
+}
+
+onMounted(() => {
+    onRequest({ pagination: pagination.value });
+});
+
+// function navigate(id) {
+//     router.push({ path: `/customer/${id}` });
+// }
 </script>
 
 <template>
     <q-page class="q-pa-md">
-        <div class="column items-center q-gutter-y-md">
-            <q-card v-for="customer in customers" :key="customer.id" class="card">
-                <!-- v-ripple :to="{ path: '/dashboard' }" -->
+        <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-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">
                     <q-item-section class="q-pa-md">
                         <div class="text-h6">{{ customer.name }}</div>
@@ -97,7 +244,7 @@ function navigate(id) {
                         </q-card-section>
                     </div>
                 </q-slide-transition>
-            </q-card>
+            </q-card> -->
         </div>
     </q-page>
 </template>