diff --git a/.vscode/settings.json b/.vscode/settings.json
index 3dcb9b1d6..c8da3d854 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -14,5 +14,8 @@
     ],
     "[javascript]": {
         "editor.defaultFormatter": "vscode.typescript-language-features"
+    },
+    "[vue]": {
+        "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
 }
diff --git a/jsconfig.json b/jsconfig.json
index 8c158e0e0..ee1a17d04 100644
--- a/jsconfig.json
+++ b/jsconfig.json
@@ -13,5 +13,8 @@
             "vue$": ["node_modules/vue/dist/vue.runtime.esm-bundler.js"]
         }
     },
-    "exclude": ["dist", ".quasar", "node_modules"]
+    "exclude": ["dist", ".quasar", "node_modules"],
+    "vueCompilerOptions": {
+        "experimentalDisableTemplateSupport": true
+    }
 }
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index d25fe43a2..778fda213 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -1,5 +1,3 @@
-
-
 <script setup>
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
@@ -10,14 +8,15 @@ const state = useState();
 const user = state.getUser();
 const token = session.getToken();
 
-defineEmits(['toggle-drawer']);
-
+function onToggleDrawer() {
+    state.drawer.value = !state.drawer.value;
+}
 </script>
 
 <template>
     <q-header class="bg-dark" color="white" elevated bordered>
         <q-toolbar class="q-py-sm q-px-md">
-            <q-btn flat @click="$emit('toggle-drawer')" round dense icon="menu" />
+            <q-btn flat @click="onToggleDrawer()" round dense icon="menu" />
             <router-link to="/">
                 <q-btn flat round class="q-ml-xs" v-if="$q.screen.gt.xs">
                     <q-avatar square size="md">
diff --git a/src/composables/useState.js b/src/composables/useState.js
index 2f182d651..78ff4257f 100644
--- a/src/composables/useState.js
+++ b/src/composables/useState.js
@@ -8,6 +8,8 @@ const user = ref({
 
 const roles = ref([]);
 
+const drawer = ref(true);
+
 export function useState() {
     function getUser() {
         return computed(() => {
@@ -42,5 +44,6 @@ export function useState() {
         setUser,
         getRoles,
         setRoles,
+        drawer
     };
 }
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index 480617886..9ba7063a4 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -1,35 +1,11 @@
 <script setup>
-import { ref } from 'vue';
 import Navbar from 'src/components/Navbar.vue';
-import LeftMenu from 'src/components/LeftMenu.vue';
-const drawer = ref(false);
-const miniState = ref(true);
-
-function onToggleDrawer() {
-    drawer.value = !drawer.value;
-}
 </script>
 
 <template>
     <q-layout view="hHh lpR fFf">
-        <Navbar @toggle-drawer="onToggleDrawer()" />
-        <q-drawer
-            v-model="drawer"
-            show-if-above
-            :mini="miniState"
-            @mouseover="miniState = false"
-            @mouseout="miniState = true"
-            mini-to-overlay
-            :width="200"
-            :breakpoint="500"
-        >
-            <q-scroll-area class="fit text-grey-8">
-                <LeftMenu />
-            </q-scroll-area>
-        </q-drawer>
-        <q-page-container>
-            <router-view></router-view>
-        </q-page-container>
+        <Navbar />
+        <router-view></router-view>
     </q-layout>
 </template>
 
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 152c8cfdc..7ac41ebf4 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -1,15 +1,24 @@
-<template>
-    <div class="row fit fixed">
-        <div class="col-2">
-            <q-card square>
-                <router-link :to="{ path: '/customer/list' }">
-                    <q-icon name="arrow_back" size="md" color="primary" />
-                </router-link>Descriptor
-            </q-card>
-        </div>
+<script setup>
+import { computed } from 'vue';
+import { useState } from 'src/composables/useState';
+import { useRouter } from 'vue-router';
 
-        <div class="col">
-            <router-view></router-view>
-        </div>
-    </div>
+const state = useState();
+const router = useRouter();
+const entityId = computed(function () {
+    return router.currentRoute.value.params.id;
+});
+</script>
+<template>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
+        <q-scroll-area class="fit text-grey-8">
+            <router-link :to="{ path: '/customer/list' }">
+                <q-icon name="arrow_back" size="md" color="primary" />
+            </router-link>
+            <div>Customer ID: {{ entityId }}</div>
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
 </template>
diff --git a/src/pages/Customer/CustomerLayout.vue b/src/pages/Customer/CustomerLayout.vue
deleted file mode 100644
index 2785996d8..000000000
--- a/src/pages/Customer/CustomerLayout.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    <router-view></router-view>
-</template>
diff --git a/src/pages/Customer/CustomerList.vue b/src/pages/Customer/CustomerList.vue
index 47960b007..ebc291933 100644
--- a/src/pages/Customer/CustomerList.vue
+++ b/src/pages/Customer/CustomerList.vue
@@ -67,13 +67,7 @@ function navigate(id) {
                     </q-btn>
                     <q-separator vertical />
                     <q-card-actions vertical class="justify-between">
-                        <q-btn
-                            flat
-                            round
-                            color="orange"
-                            icon="arrow_circle_right"
-                            @click="navigate(customer.id)"
-                        />
+                        <q-btn flat round color="orange" icon="arrow_circle_right" @click="navigate(customer.id)" />
                         <q-btn flat round color="accent" icon="preview" />
                         <q-btn flat round color="accent" icon="vn:ticket" />
                         <q-card-actions>
@@ -103,33 +97,6 @@ function navigate(id) {
                         </q-card-section>
                     </div>
                 </q-slide-transition>
-                <!-- <q-card-section horizontal>
-                    <q-card-section vertical class="col">
-                        <div class="text-h6">{{ customer.name }}</div>
-                        <div class="text-subtitle2">@{{ customer.username }}</div>
-
-                        <q-card-section vertical>text</q-card-section>
-                    </q-card-section>
-
-                    <q-separator vertical />
-
-                    <q-card-actions vertical class="justify-around">
-                        <q-btn flat round color="red" icon="favorite" />
-                        <q-btn flat round color="accent" icon="bookmark" />
-                        <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-card-actions>
-                </q-card-section>-->
             </q-card>
         </div>
     </q-page>
diff --git a/src/pages/Customer/CustomerMain.vue b/src/pages/Customer/CustomerMain.vue
new file mode 100644
index 000000000..731ebb803
--- /dev/null
+++ b/src/pages/Customer/CustomerMain.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const state = useState();
+const miniState = ref(true);
+</script>
+
+<template>
+    <q-drawer
+        v-model="state.drawer.value"
+        show-if-above
+        :mini="miniState"
+        @mouseover="miniState = false"
+        @mouseout="miniState = true"
+        mini-to-overlay
+        :width="200"
+        :breakpoint="500"
+    >
+        <q-scroll-area class="fit text-grey-8">
+            <LeftMenu />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>
diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue
index f02d33f3f..28bad6e1a 100644
--- a/src/pages/Dashboard/Dashboard.vue
+++ b/src/pages/Dashboard/Dashboard.vue
@@ -1,87 +1,101 @@
 <script setup>
 import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const state = useState();
+const miniState = ref(true);
 
 const slide = ref('style');
 const slideText = 'Description text';
-
-
 </script>
 
 <template>
-    <q-page class="q-pa-md">
-        <q-banner
-            v-if="$q.screen.gt.xs"
-            inline-actions
-            rounded
-            class="bg-orange text-white q-mb-lg"
-        >
-            Employee notification message
-            <template #action>
-                <q-btn flat label="Dismiss" />
-            </template>
-        </q-banner>
+    <q-drawer
+        v-model="state.drawer.value"
+        show-if-above
+        :mini="miniState"
+        @mouseover="miniState = false"
+        @mouseout="miniState = true"
+        mini-to-overlay
+        :width="200"
+        :breakpoint="500"
+    >
+        <q-scroll-area class="fit text-grey-8">
+            <LeftMenu />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <q-page class="q-pa-md">
+            <q-banner v-if="$q.screen.gt.xs" inline-actions rounded class="bg-orange text-white q-mb-lg">
+                Employee notification message
+                <template #action>
+                    <q-btn flat label="Dismiss" />
+                </template>
+            </q-banner>
 
-        <div class="row items-start wrap q-col-gutter-md q-mb-lg">
-            <div class="col-12 col-md">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-carousel
-                    v-model="slide"
-                    transition-prev="scale"
-                    transition-next="scale"
-                    swipeable
-                    animated
-                    control-color="white"
-                    navigation
-                    padding
-                    arrows
-                    height="300px"
-                    class="bg-orange-3 text-white shadow-1 rounded-borders"
-                >
-                    <q-carousel-slide name="style" class="column no-wrap flex-center">
-                        <q-icon name="style" size="56px" />
-                        <div class="q-mt-md text-center">{{ slideText }}</div>
-                    </q-carousel-slide>
-                    <q-carousel-slide name="tv" class="column no-wrap flex-center">
-                        <q-icon name="live_tv" size="56px" />
-                        <div class="q-mt-md text-center">{{ slideText }}</div>
-                    </q-carousel-slide>
-                    <q-carousel-slide name="layers" class="column no-wrap flex-center">
-                        <q-icon name="layers" size="56px" />
-                        <div class="q-mt-md text-center">{{ slideText }}</div>
-                    </q-carousel-slide>
-                    <q-carousel-slide name="map" class="column no-wrap flex-center">
-                        <q-icon name="terrain" size="56px" />
-                        <div class="q-mt-md text-center">{{ slideText }}</div>
-                    </q-carousel-slide>
-                </q-carousel>
+            <div class="row items-start wrap q-col-gutter-md q-mb-lg">
+                <div class="col-12 col-md">
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <q-carousel
+                        v-model="slide"
+                        transition-prev="scale"
+                        transition-next="scale"
+                        swipeable
+                        animated
+                        control-color="white"
+                        navigation
+                        padding
+                        arrows
+                        height="300px"
+                        class="bg-orange-3 text-white shadow-1 rounded-borders"
+                    >
+                        <q-carousel-slide name="style" class="column no-wrap flex-center">
+                            <q-icon name="style" size="56px" />
+                            <div class="q-mt-md text-center">{{ slideText }}</div>
+                        </q-carousel-slide>
+                        <q-carousel-slide name="tv" class="column no-wrap flex-center">
+                            <q-icon name="live_tv" size="56px" />
+                            <div class="q-mt-md text-center">{{ slideText }}</div>
+                        </q-carousel-slide>
+                        <q-carousel-slide name="layers" class="column no-wrap flex-center">
+                            <q-icon name="layers" size="56px" />
+                            <div class="q-mt-md text-center">{{ slideText }}</div>
+                        </q-carousel-slide>
+                        <q-carousel-slide name="map" class="column no-wrap flex-center">
+                            <q-icon name="terrain" size="56px" />
+                            <div class="q-mt-md text-center">{{ slideText }}</div>
+                        </q-carousel-slide>
+                    </q-carousel>
+                </div>
+                <div class="col-12 col-md">
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <q-card class="q-pa-md">Dashboard page..</q-card>
+                </div>
+                <div class="col-12 col-md">
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <q-card class="q-pa-md">Dashboard page..</q-card>
+                </div>
             </div>
-            <div class="col-12 col-md">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-card class="q-pa-md">Dashboard page..</q-card>
+            <div class="row items-start q-col-gutter-md q-mb-lg">
+                <div class="col-12 col-md">
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <q-card class="q-pa-md">Dashboard page..</q-card>
+                </div>
+                <div class="col-12 col-md">
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <q-card class="q-pa-md">Dashboard page..</q-card>
+                </div>
             </div>
-            <div class="col-12 col-md">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-card class="q-pa-md">Dashboard page..</q-card>
-            </div>
-        </div>
-        <div class="row items-start q-col-gutter-md q-mb-lg">
-            <div class="col-12 col-md">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-card class="q-pa-md">Dashboard page..</q-card>
-            </div>
-            <div class="col-12 col-md">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-card class="q-pa-md">Dashboard page..</q-card>
-            </div>
-        </div>
 
-        <div class="row items-start q-col-gutter-md q-mb-lg">
-            <div class="col">
-                <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
-                <q-card class="q-pa-md">Dashboard page..</q-card>
+            <div class="row items-start q-col-gutter-md q-mb-lg">
+                <div class="col">
+                    <div class="text-h6 text-grey-8 q-mb-sm">Responsive monitor</div>
+                    <q-card class="q-pa-md">Dashboard page..</q-card>
+                </div>
             </div>
-        </div>
-    </q-page>
+        </q-page>
+    </q-page-container>
 </template>
 
 <style lang="scss" scoped></style>
diff --git a/src/pages/Ticket/Card/TicketBasicData.vue b/src/pages/Ticket/Card/TicketBasicData.vue
new file mode 100644
index 000000000..b4e913ad5
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketBasicData.vue
@@ -0,0 +1,3 @@
+<template>
+    <q-card>Basic Data</q-card>
+</template>
\ No newline at end of file
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
new file mode 100644
index 000000000..7ac41ebf4
--- /dev/null
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -0,0 +1,24 @@
+<script setup>
+import { computed } from 'vue';
+import { useState } from 'src/composables/useState';
+import { useRouter } from 'vue-router';
+
+const state = useState();
+const router = useRouter();
+const entityId = computed(function () {
+    return router.currentRoute.value.params.id;
+});
+</script>
+<template>
+    <q-drawer v-model="state.drawer.value" show-if-above :width="200" :breakpoint="500">
+        <q-scroll-area class="fit text-grey-8">
+            <router-link :to="{ path: '/customer/list' }">
+                <q-icon name="arrow_back" size="md" color="primary" />
+            </router-link>
+            <div>Customer ID: {{ entityId }}</div>
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>
diff --git a/src/pages/Ticket/TicketLayout.vue b/src/pages/Ticket/TicketLayout.vue
deleted file mode 100644
index 2785996d8..000000000
--- a/src/pages/Ticket/TicketLayout.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-    <router-view></router-view>
-</template>
diff --git a/src/pages/Ticket/TicketList.vue b/src/pages/Ticket/TicketList.vue
index e69de29bb..ebc291933 100644
--- a/src/pages/Ticket/TicketList.vue
+++ b/src/pages/Ticket/TicketList.vue
@@ -0,0 +1,110 @@
+<script setup>
+import { ref } from 'vue';
+import { useRouter } from 'vue-router';
+const router = useRouter();
+
+const customers = [
+    {
+        id: 1101,
+        name: 'Bruce Wayne',
+        username: 'batman',
+        email: 'batman@gotham',
+        phone: '555-555-5555',
+        expanded: ref(false),
+    },
+    {
+        id: 1102,
+        name: 'James Gordon',
+        username: 'jamesgordon',
+        email: 'jamesgordon@gotham',
+        phone: '555-555-1111',
+        expanded: ref(false),
+    },
+];
+
+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' }" -->
+                <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>
+                        <q-item-label caption>@{{ customer.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>{{ customer.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>{{ customer.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(customer.id)" />
+                        <q-btn flat round color="accent" icon="preview" />
+                        <q-btn flat round color="accent" icon="vn:ticket" />
+                        <q-card-actions>
+                            <q-btn
+                                color="grey"
+                                round
+                                flat
+                                dense
+                                :icon="customer.expanded.value ? 'keyboard_arrow_up' : 'keyboard_arrow_down'"
+                                @click="customer.expanded.value = !customer.expanded.value"
+                            />
+                        </q-card-actions>
+                    </q-card-actions>
+                </q-item>
+                <q-slide-transition>
+                    <div v-show="customer.expanded.value">
+                        <q-separator />
+                        <q-card-section class="text-subitle2">
+                            <q-list>
+                                <q-item clickable>
+                                    <q-item-section>
+                                        <q-item-label>Address</q-item-label>
+                                        <q-item-label caption>Avenue 11</q-item-label>
+                                    </q-item-section>
+                                </q-item>
+                            </q-list>
+                        </q-card-section>
+                    </div>
+                </q-slide-transition>
+            </q-card>
+        </div>
+    </q-page>
+</template>
+
+<style lang="scss" scoped>
+.card {
+    width: 100%;
+    max-width: 60em;
+}
+</style>
diff --git a/src/pages/Ticket/TicketMain.vue b/src/pages/Ticket/TicketMain.vue
new file mode 100644
index 000000000..731ebb803
--- /dev/null
+++ b/src/pages/Ticket/TicketMain.vue
@@ -0,0 +1,28 @@
+<script setup>
+import { ref } from 'vue';
+import { useState } from 'src/composables/useState';
+import LeftMenu from 'src/components/LeftMenu.vue';
+
+const state = useState();
+const miniState = ref(true);
+</script>
+
+<template>
+    <q-drawer
+        v-model="state.drawer.value"
+        show-if-above
+        :mini="miniState"
+        @mouseover="miniState = false"
+        @mouseout="miniState = true"
+        mini-to-overlay
+        :width="200"
+        :breakpoint="500"
+    >
+        <q-scroll-area class="fit text-grey-8">
+            <LeftMenu />
+        </q-scroll-area>
+    </q-drawer>
+    <q-page-container>
+        <router-view></router-view>
+    </q-page-container>
+</template>
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 948fcc4c3..d72834dc9 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -1,3 +1,5 @@
+import { RouterView } from 'vue-router';
+
 export default {
     path: '/customer',
     name: 'Customer',
@@ -6,24 +8,32 @@ export default {
         icon: 'vn:client',
         roles: ['salesPerson'],
     },
-    component: () => import('src/pages/Customer/CustomerLayout.vue'),
-    redirect: { name: 'CustomerList' },
+    component: RouterView,
+    redirect: { name: 'CustomerMain' },
     children: [
         {
-            path: 'list',
-            name: 'CustomerList',
-            meta: {
-                title: 'list'
-            },
-            component: () => import('src/pages/Customer/CustomerList.vue'),
-        },
-        {
-            path: 'create',
-            name: 'CustomerCreate',
-            meta: {
-                title: 'create'
-            },
-            component: () => import('src/pages/Customer/CustomerCreate.vue'),
+            path: '',
+            name: 'CustomerMain',
+            component: () => import('src/pages/Customer/CustomerMain.vue'),
+            redirect: { name: 'CustomerList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'CustomerList',
+                    meta: {
+                        title: 'list'
+                    },
+                    component: () => import('src/pages/Customer/CustomerList.vue'),
+                },
+                {
+                    path: 'create',
+                    name: 'CustomerCreate',
+                    meta: {
+                        title: 'create'
+                    },
+                    component: () => import('src/pages/Customer/CustomerCreate.vue'),
+                },
+            ]
         },
         {
             path: ':id',
@@ -40,5 +50,5 @@ export default {
                 }
             ]
         },
-    ],
+    ]
 };
\ No newline at end of file
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index 6e22a0ecc..a8dd42165 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -1,18 +1,46 @@
+import { RouterView } from 'vue-router';
+
 export default {
     path: '/ticket',
     name: 'Ticket',
     meta: {
         title: 'tickets',
         icon: 'vn:ticket',
+        roles: ['salesPerson'],
     },
-    component: () => import('src/pages/Ticket/TicketLayout.vue'),
-    redirect: { path: '/ticket/list' },
+    component: RouterView,
+    redirect: { name: 'TicketMain' },
     children: [
         {
-            path: 'list',
-            name: 'TicketList',
-            meta: { title: 'list' },
-            component: () => import('src/pages/Ticket/TicketList.vue'),
-        }
-    ],
+            path: '',
+            name: 'TicketMain',
+            component: () => import('src/pages/Ticket/TicketMain.vue'),
+            redirect: { name: 'TicketList' },
+            children: [
+                {
+                    path: 'list',
+                    name: 'TicketList',
+                    meta: {
+                        title: 'list'
+                    },
+                    component: () => import('src/pages/Ticket/TicketList.vue'),
+                },
+            ]
+        },
+        {
+            path: ':id',
+            component: () => import('src/pages/Ticket/Card/TicketCard.vue'),
+            redirect: { name: 'TicketBasicData' },
+            children: [
+                {
+                    path: 'basic-data',
+                    name: 'TicketBasicData',
+                    meta: {
+                        title: 'basicData'
+                    },
+                    component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
+                }
+            ]
+        },
+    ]
 };
\ No newline at end of file
diff --git a/src/router/routes.js b/src/router/routes.js
index d4b63df1d..6905c4116 100644
--- a/src/router/routes.js
+++ b/src/router/routes.js
@@ -20,16 +20,16 @@ const routes = [
                 meta: { title: 'dashboard', icon: 'dashboard' },
                 component: () => import('../pages/Dashboard/Dashboard.vue'),
             },
-            /*             {
-                            path: '/:pathMatch(.*)*',
-                            name: 'NotFound',
-                            component: () => import('../pages/NotFound.vue'),
-                        }, */
             // Module routes
             customer,
             ticket,
         ],
     },
+    {
+        path: '/:pathMatch(.*)*',
+        name: 'NotFound',
+        component: () => import('../pages/NotFound.vue'),
+    }
 ];
 
 export default routes;
\ No newline at end of file
diff --git a/src/types/route.ts b/src/types/route.ts
deleted file mode 100644
index ea7b84d42..000000000
--- a/src/types/route.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export interface Route {
-    path: string;
-    component: any;
-}
\ No newline at end of file