diff --git a/src/router/index.ts b/src/router/index.ts
index 8183413d5..13a687c36 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -22,6 +22,19 @@ const routes: Array<RouteRecordRaw> = [
                 path: '/customer',
                 name: 'Customer',
                 component: () => import('../views/Customer/Customer.vue'),
+                redirect: { name: 'List' },
+                children: [
+                    {
+                        path: 'list',
+                        name: 'List',
+                        component: () => import('../views/Customer/List.vue'),
+                    },
+                    {
+                        path: ':id',
+                        name: 'Card',
+                        component: () => import('../views/Customer/Card/Card.vue'),
+                    },
+                ],
             },
             {
                 path: '/:pathMatch(.*)*',
diff --git a/src/views/Customer/Card/Card.vue b/src/views/Customer/Card/Card.vue
new file mode 100644
index 000000000..a6a00bf67
--- /dev/null
+++ b/src/views/Customer/Card/Card.vue
@@ -0,0 +1 @@
+<template>Customer card...</template>
diff --git a/src/views/Customer/Customer.vue b/src/views/Customer/Customer.vue
index 966b44bf5..2785996d8 100644
--- a/src/views/Customer/Customer.vue
+++ b/src/views/Customer/Customer.vue
@@ -1,7 +1,3 @@
 <template>
-    <q-page class="q-pa-md">
-        <q-card class="q-pa-md"> Customer page.. </q-card>
-    </q-page>
+    <router-view></router-view>
 </template>
-
-<style lang="scss" scoped></style>
diff --git a/src/views/Customer/List.vue b/src/views/Customer/List.vue
new file mode 100644
index 000000000..a0add370f
--- /dev/null
+++ b/src/views/Customer/List.vue
@@ -0,0 +1,63 @@
+<template>
+    <q-page class="q-pa-md">
+        <div class="column items-center justify-evenly">
+            <router-link to="/customer/123"></router-link>
+            <q-card class="card col-6" v-for="customer in customers" :key="customer.id">
+                <q-card-section clickable>
+                    <div class="row items-center no-wrap">
+                        <div class="col">
+                            <div class="text-h6">{{ customer.name }}</div>
+                            <div class="text-subtitle2">@{{ customer.username }}</div>
+                        </div>
+
+                        <div class="col-auto">
+                            <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>
+                        </div>
+                    </div>
+                </q-card-section>
+
+                <q-card-section> Labels.. </q-card-section>
+
+                <q-separator />
+
+                <q-card-actions>
+                    <q-btn flat>Action 1</q-btn>
+                    <q-btn flat>Action 2</q-btn>
+                </q-card-actions>
+            </q-card>
+        </div>
+    </q-page>
+</template>
+
+<script lang="ts" setup>
+const customers = [
+    {
+        id: 1101,
+        name: 'Bruce Wayne',
+        username: 'batman',
+    },
+    {
+        id: 1102,
+        name: 'James Gordon',
+        username: 'jamesgordon',
+    },
+];
+</script>
+
+<style lang="scss" scoped>
+.card {
+    width: 100%;
+    max-width: 60em;
+}
+</style>