diff --git a/package-lock.json b/package-lock.json
index 1af3be8e6..bb0e9e90f 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,10 +8,11 @@
             "name": "salix-front",
             "version": "0.0.1",
             "dependencies": {
-                "@quasar/extras": "^1.15.5",
+                "@quasar/extras": "^1.15.6",
                 "axios": "^0.21.1",
                 "core-js": "^3.6.5",
-                "quasar": "^2.10.0",
+                "pinia": "^2.0.24",
+                "quasar": "^2.10.2",
                 "validator": "^13.7.0",
                 "vue": "^3.0.0",
                 "vue-i18n": "^9.0.0",
@@ -3519,9 +3520,9 @@
             }
         },
         "node_modules/@quasar/extras": {
-            "version": "1.15.5",
-            "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.15.5.tgz",
-            "integrity": "sha512-JzKKx5/eKAip3X3bZUEJOOWT9NudqjF01gcce6rtyviko49OU4r+ekyJU3QQIKF8ZqnjZ+DpsVpMWBBZnO6hSQ==",
+            "version": "1.15.6",
+            "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.15.6.tgz",
+            "integrity": "sha512-lG3wrcz47c86N/j1ULZugmyVfwpmnsJpjtSWh+LhaFfe0g1kTMdAnxkWGKsa3ouZ4QBcnkrNan0kYSnKc3MiBg==",
             "funding": {
                 "type": "github",
                 "url": "https://donate.quasar.dev"
@@ -4307,9 +4308,9 @@
             }
         },
         "node_modules/@vue/devtools-api": {
-            "version": "6.1.3",
-            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.1.3.tgz",
-            "integrity": "sha512-79InfO2xHv+WHIrH1bHXQUiQD/wMls9qBk6WVwGCbdwP7/3zINtvqPNMtmSHXsIKjvUAHc8L0ouOj6ZQQRmcXg=="
+            "version": "6.4.5",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz",
+            "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
         },
         "node_modules/@vue/reactivity": {
             "version": "3.2.31",
@@ -15743,6 +15744,56 @@
                 "node": ">=0.10.0"
             }
         },
+        "node_modules/pinia": {
+            "version": "2.0.24",
+            "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.24.tgz",
+            "integrity": "sha512-DDLd4Iphyc+6PYYYbx7jkb6WP9gecgu9bz9huyB5rb7CdJI3DhzYiZI+/Ih8MLewRrP9DSpslF/BgSNrJtZU7A==",
+            "dependencies": {
+                "@vue/devtools-api": "^6.4.5",
+                "vue-demi": "*"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/posva"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.4.0",
+                "typescript": ">=4.4.4",
+                "vue": "^2.6.14 || ^3.2.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                },
+                "typescript": {
+                    "optional": true
+                }
+            }
+        },
+        "node_modules/pinia/node_modules/vue-demi": {
+            "version": "0.13.11",
+            "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+            "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+            "hasInstallScript": true,
+            "bin": {
+                "vue-demi-fix": "bin/vue-demi-fix.js",
+                "vue-demi-switch": "bin/vue-demi-switch.js"
+            },
+            "engines": {
+                "node": ">=12"
+            },
+            "funding": {
+                "url": "https://github.com/sponsors/antfu"
+            },
+            "peerDependencies": {
+                "@vue/composition-api": "^1.0.0-rc.1",
+                "vue": "^3.0.0-0 || ^2.6.0"
+            },
+            "peerDependenciesMeta": {
+                "@vue/composition-api": {
+                    "optional": true
+                }
+            }
+        },
         "node_modules/pirates": {
             "version": "4.0.5",
             "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -16622,9 +16673,9 @@
             }
         },
         "node_modules/quasar": {
-            "version": "2.10.0",
-            "resolved": "https://registry.npmjs.org/quasar/-/quasar-2.10.0.tgz",
-            "integrity": "sha512-PHGcrzPQfFa4tv9a5Z/3D2uat48D4WC9Ad/imzHk/k3G41t0eFMH6glCjAvpCWF2q8dBYIg4nEchiPhlujbKsw==",
+            "version": "2.10.2",
+            "resolved": "https://registry.npmjs.org/quasar/-/quasar-2.10.2.tgz",
+            "integrity": "sha512-y6suu0f2hJKrnFPHzx+p2EBVGzDF6xHaqYGkDIsMNkhxsrO9Qi2+dZCjq1J6+48EJiqPEOn8t9X/gT7yLSSnLw==",
             "engines": {
                 "node": ">= 10.18.1",
                 "npm": ">= 6.13.4",
@@ -19517,7 +19568,7 @@
             "version": "4.5.5",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
             "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
-            "dev": true,
+            "devOptional": true,
             "bin": {
                 "tsc": "bin/tsc",
                 "tsserver": "bin/tsserver"
@@ -23528,9 +23579,9 @@
             }
         },
         "@quasar/extras": {
-            "version": "1.15.5",
-            "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.15.5.tgz",
-            "integrity": "sha512-JzKKx5/eKAip3X3bZUEJOOWT9NudqjF01gcce6rtyviko49OU4r+ekyJU3QQIKF8ZqnjZ+DpsVpMWBBZnO6hSQ=="
+            "version": "1.15.6",
+            "resolved": "https://registry.npmjs.org/@quasar/extras/-/extras-1.15.6.tgz",
+            "integrity": "sha512-lG3wrcz47c86N/j1ULZugmyVfwpmnsJpjtSWh+LhaFfe0g1kTMdAnxkWGKsa3ouZ4QBcnkrNan0kYSnKc3MiBg=="
         },
         "@quasar/fastclick": {
             "version": "1.1.5",
@@ -24211,9 +24262,9 @@
             }
         },
         "@vue/devtools-api": {
-            "version": "6.1.3",
-            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.1.3.tgz",
-            "integrity": "sha512-79InfO2xHv+WHIrH1bHXQUiQD/wMls9qBk6WVwGCbdwP7/3zINtvqPNMtmSHXsIKjvUAHc8L0ouOj6ZQQRmcXg=="
+            "version": "6.4.5",
+            "resolved": "https://registry.npmjs.org/@vue/devtools-api/-/devtools-api-6.4.5.tgz",
+            "integrity": "sha512-JD5fcdIuFxU4fQyXUu3w2KpAJHzTVdN+p4iOX2lMWSHMOoQdMAcpFLZzm9Z/2nmsoZ1a96QEhZ26e50xLBsgOQ=="
         },
         "@vue/reactivity": {
             "version": "3.2.31",
@@ -32797,6 +32848,23 @@
             "integrity": "sha1-7RQaasBDqEnqWISY59yosVMw6Qw=",
             "dev": true
         },
+        "pinia": {
+            "version": "2.0.24",
+            "resolved": "https://registry.npmjs.org/pinia/-/pinia-2.0.24.tgz",
+            "integrity": "sha512-DDLd4Iphyc+6PYYYbx7jkb6WP9gecgu9bz9huyB5rb7CdJI3DhzYiZI+/Ih8MLewRrP9DSpslF/BgSNrJtZU7A==",
+            "requires": {
+                "@vue/devtools-api": "^6.4.5",
+                "vue-demi": "*"
+            },
+            "dependencies": {
+                "vue-demi": {
+                    "version": "0.13.11",
+                    "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.13.11.tgz",
+                    "integrity": "sha512-IR8HoEEGM65YY3ZJYAjMlKygDQn25D5ajNFNoKh9RSDMQtlzCxtfQjdQgv9jjK+m3377SsJXY8ysq8kLCZL25A==",
+                    "requires": {}
+                }
+            }
+        },
         "pirates": {
             "version": "4.0.5",
             "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
@@ -33385,9 +33453,9 @@
             }
         },
         "quasar": {
-            "version": "2.10.0",
-            "resolved": "https://registry.npmjs.org/quasar/-/quasar-2.10.0.tgz",
-            "integrity": "sha512-PHGcrzPQfFa4tv9a5Z/3D2uat48D4WC9Ad/imzHk/k3G41t0eFMH6glCjAvpCWF2q8dBYIg4nEchiPhlujbKsw=="
+            "version": "2.10.2",
+            "resolved": "https://registry.npmjs.org/quasar/-/quasar-2.10.2.tgz",
+            "integrity": "sha512-y6suu0f2hJKrnFPHzx+p2EBVGzDF6xHaqYGkDIsMNkhxsrO9Qi2+dZCjq1J6+48EJiqPEOn8t9X/gT7yLSSnLw=="
         },
         "queue-microtask": {
             "version": "1.2.3",
@@ -35619,7 +35687,7 @@
             "version": "4.5.5",
             "resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
             "integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
-            "dev": true
+            "devOptional": true
         },
         "uglify-js": {
             "version": "3.15.3",
diff --git a/package.json b/package.json
index 3060e75ac..18d015577 100644
--- a/package.json
+++ b/package.json
@@ -18,10 +18,11 @@
         "test:e2e:ci": "cross-env E2E_TEST=true start-test \"quasar dev\" http-get://localhost:8080 \"cypress run\""
     },
     "dependencies": {
-        "@quasar/extras": "^1.15.5",
+        "@quasar/extras": "^1.15.6",
         "axios": "^0.21.1",
         "core-js": "^3.6.5",
-        "quasar": "^2.10.0",
+        "pinia": "^2.0.24",
+        "quasar": "^2.10.2",
         "validator": "^13.7.0",
         "vue": "^3.0.0",
         "vue-i18n": "^9.0.0",
diff --git a/src/components/FavoriteModules.vue b/src/components/FavoriteModules.vue
index 1a01bd1c7..65d070d95 100644
--- a/src/components/FavoriteModules.vue
+++ b/src/components/FavoriteModules.vue
@@ -1,55 +1,55 @@
-<script setup>
-import { onMounted } from 'vue';
-import { useI18n } from 'vue-i18n';
-import { useNavigation } from 'src/composables/useNavigation';
+<!--<script setup>-->
+<!--import { onMounted } from 'vue';-->
+<!--import { useI18n } from 'vue-i18n';-->
+<!--import { useNavigation } from 'src/composables/useNavigation';-->
 
-const { t } = useI18n();
-const navigation = useNavigation();
+<!--const { t } = useI18n();-->
+<!--const navigation = useNavigation();-->
 
-onMounted(() => {
-    navigation.fetchFavorites();
-});
-</script>
+<!--onMounted(() => {-->
+<!--    navigation.fetchFavorites();-->
+<!--});-->
+<!--</script>-->
 
-<template>
-    <q-menu
-        anchor="bottom left"
-        class="row q-pa-md q-col-gutter-lg"
-        max-width="350px"
-        max-height="400px"
-        v-if="navigation.favorites.value.length"
-    >
-        <div v-for="module of navigation.favorites.value" :key="module.title" class="row no-wrap q-pa-xs flex-item">
-            <q-btn
-                align="evenly"
-                padding="16px"
-                flat
-                stack
-                size="lg"
-                :icon="module.icon"
-                color="primary"
-                class="col-4 button"
-                :to="{ name: module.stateName }"
-            >
-                <div class="text-center text-primary button-text">
-                    {{ t(`${module.name}.pageTitles.${module.title}`) }}
-                </div>
-            </q-btn>
-        </div>
-    </q-menu>
-</template>
+<!--<template>-->
+<!--    <q-menu-->
+<!--        anchor="bottom left"-->
+<!--        class="row q-pa-md q-col-gutter-lg"-->
+<!--        max-width="350px"-->
+<!--        max-height="400px"-->
+<!--        v-if="navigation.favorites.value.length"-->
+<!--    >-->
+<!--        <div v-for="module of navigation.favorites.value" :key="module.title" class="row no-wrap q-pa-xs flex-item">-->
+<!--            <q-btn-->
+<!--                align="evenly"-->
+<!--                padding="16px"-->
+<!--                flat-->
+<!--                stack-->
+<!--                size="lg"-->
+<!--                :icon="module.icon"-->
+<!--                color="primary"-->
+<!--                class="col-4 button"-->
+<!--                :to="{ name: module.stateName }"-->
+<!--            >-->
+<!--                <div class="text-center text-primary button-text">-->
+<!--                    {{ t(`${module.name}.pageTitles.${module.title}`) }}-->
+<!--                </div>-->
+<!--            </q-btn>-->
+<!--        </div>-->
+<!--    </q-menu>-->
+<!--</template>-->
 
-<style lang="scss" scoped>
-.flex-item {
-    width: 100px;
-}
-.button {
-    width: 100%;
-    line-height: normal;
-    align-items: center;
-}
-.button-text {
-    font-size: 10px;
-    margin-top: 5px;
-}
-</style>
+<!--<style lang="scss" scoped>-->
+<!--.flex-item {-->
+<!--    width: 100px;-->
+<!--}-->
+<!--.button {-->
+<!--    width: 100%;-->
+<!--    line-height: normal;-->
+<!--    align-items: center;-->
+<!--}-->
+<!--.button-text {-->
+<!--    font-size: 10px;-->
+<!--    margin-top: 5px;-->
+<!--}-->
+<!--</style>-->
diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue
index 75c821d74..38563df39 100644
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@@ -1,161 +1,235 @@
 <script setup>
+import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRole } from 'src/composables/useRole';
-import { useQuasar } from 'quasar';
+// import { useRole } from 'src/composables/useRole';
+// import { useQuasar } from 'quasar';
 import { useNavigation } from 'src/composables/useNavigation';
+import routes from 'src/router/modules';
 
 const { t } = useI18n();
-const { hasAny } = useRole();
+// const { hasAny } = useRole();
 const navigation = useNavigation();
 
-const quasar = useQuasar();
+const $props = defineProps({
+    source: {
+        type: String,
+        default: 'main',
+    },
+});
 
-async function onToggleFavoriteModule(moduleName, event) {
-    await navigation.toggleFavorite(moduleName, event);
+const items = ref([]);
+for (const module of navigation.modules) {
+    const moduleDef = routes.find((route) => route.name.toLowerCase() === module);
+    const moduleMeta = moduleDef.meta;
 
-    quasar.notify({
-        message: t('globals.dataSaved'),
-        type: 'positive',
-    });
+    const item = {
+        name: moduleDef.name,
+        title: moduleMeta.title,
+        icon: moduleMeta.icon,
+        module: module,
+        children: [],
+    };
+
+    if (moduleDef.menus) {
+        const mainMenus = moduleDef.menus[$props.source];
+
+        for (const menu of mainMenus) {
+            const mainMenuItems = moduleDef.children[0].children;
+            const mainMenuItemDef = mainMenuItems.find((route) => route.name === menu.name);
+            const mainMenuItemMeta = mainMenuItemDef.meta;
+
+            item.children.push({
+                name: mainMenuItemDef.name,
+                title: mainMenuItemMeta.title,
+                icon: mainMenuItemMeta.icon,
+            });
+        }
+    }
+
+    items.value.push(item);
 }
+// const quasar = useQuasar();
+
+// async function onToggleFavoriteModule(moduleName, event) {
+//     await navigation.toggleFavorite(moduleName, event);
+//
+//     quasar.notify({
+//         message: t('globals.dataSaved'),
+//         type: 'positive',
+//     });
+// }
 </script>
 
 <template>
     <q-list padding>
         <q-item-label header>{{ t('globals.favoriteModules') }}</q-item-label>
-        <template v-for="module in navigation.favorites.value" :key="module.title">
-            <div class="module" v-if="!module.children">
-                <q-item
-                    clickable
-                    v-ripple
-                    active-class="text-primary"
-                    :key="module.title"
-                    :to="{ name: module.stateName }"
-                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
-                >
-                    <q-item-section avatar :if="module.icon">
-                        <q-icon :name="module.icon" />
+        <template v-for="item in items" :key="item.name">
+            <q-expansion-item
+                group="somegroup"
+                class="module"
+                active-class="text-primary"
+                :label="item.title"
+                :to="{ name: item.name }"
+                expand-separator
+            >
+                <template #header>
+                    <q-item-section avatar>
+                        <q-icon :name="item.icon"></q-icon>
                     </q-item-section>
-                    <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
-                    <q-item-section side>
-                        <div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">
-                            <q-icon name="vn:pin_off"></q-icon>
-                        </div>
-                    </q-item-section>
-                </q-item>
-            </div>
-
-            <template v-if="module.children">
-                <q-expansion-item
-                    class="module"
-                    active-class="text-primary"
-                    :label="t(`${module.name}.pageTitles.${module.title}`)"
-                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
-                    :to="{ name: module.stateName }"
-                >
-                    <template #header>
-                        <q-item-section avatar>
-                            <q-icon :name="module.icon"></q-icon>
+                    <q-item-section>{{ t(`${item.module}.pageTitles.${item.title}`) }}</q-item-section>
+                    <!--                    <q-item-section side>-->
+                    <!--                        <div-->
+                    <!--                            @click="onToggleFavoriteModule(module.name, $event)"-->
+                    <!--                            class="row items-center"-->
+                    <!--                            v-if="module.name != 'dashboard'"-->
+                    <!--                        >-->
+                    <!--                            <q-icon name="vn:pin"></q-icon>-->
+                    <!--                        </div>-->
+                    <!--                    </q-item-section>-->
+                </template>
+                <template v-for="section in item.children" :key="section.name">
+                    <q-item clickable v-ripple active-class="text-primary" :to="{ name: section.name }">
+                        <q-item-section avatar :if="section.icon">
+                            <q-icon :name="section.icon" />
                         </q-item-section>
-                        <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
-                        <q-item-section side>
-                            <div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">
-                                <q-icon name="vn:pin_off"></q-icon>
-                            </div>
-                        </q-item-section>
-                    </template>
-                    <template v-for="section in module.children" :key="section.title">
-                        <q-item
-                            clickable
-                            v-ripple
-                            active-class="text-primary"
-                            :to="{ name: section.stateName }"
-                            v-if="!section.roles || !section.roles.length || hasAny(section.roles)"
-                        >
-                            <q-item-section avatar :if="section.icon">
-                                <q-icon :name="section.icon" />
-                            </q-item-section>
-                            <q-item-section>{{ t(`${module.name}.pageTitles.${section.title}`) }}</q-item-section>
-                        </q-item>
-                    </template>
-                </q-expansion-item>
-            </template>
+                        <q-item-section>{{ t(`${item.module}.pageTitles.${section.title}`) }}</q-item-section>
+                    </q-item>
+                </template>
+            </q-expansion-item>
         </template>
+        <!--        <template v-for="module in navigation.favorites.value" :key="module.title">-->
+        <!--            <div class="module" v-if="!module.children">-->
+        <!--                <q-item-->
+        <!--                    clickable-->
+        <!--                    v-ripple-->
+        <!--                    active-class="text-primary"-->
+        <!--                    :key="module.title"-->
+        <!--                    :to="{ name: module.stateName }"-->
+        <!--                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"-->
+        <!--                >-->
+        <!--                    <q-item-section avatar :if="module.icon">-->
+        <!--                        <q-icon :name="module.icon" />-->
+        <!--                    </q-item-section>-->
+        <!--                    <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>-->
+        <!--                    <q-item-section side>-->
+        <!--                        <div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">-->
+        <!--                            <q-icon name="vn:pin_off"></q-icon>-->
+        <!--                        </div>-->
+        <!--                    </q-item-section>-->
+        <!--                </q-item>-->
+        <!--            </div>-->
+
+        <!--            <template v-if="module.children">-->
+        <!--                <q-expansion-item-->
+        <!--                    class="module"-->
+        <!--                    active-class="text-primary"-->
+        <!--                    :label="t(`${module.name}.pageTitles.${module.title}`)"-->
+        <!--                    v-if="!module.roles || !module.roles.length || hasAny(module.roles)"-->
+        <!--                    :to="{ name: module.stateName }"-->
+        <!--                >-->
+        <!--                    <template #header>-->
+        <!--                        <q-item-section avatar>-->
+        <!--                            <q-icon :name="module.icon"></q-icon>-->
+        <!--                        </q-item-section>-->
+        <!--                        <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>-->
+        <!--                        <q-item-section side>-->
+        <!--                            <div @click="onToggleFavoriteModule(module.name, $event)" class="row items-center">-->
+        <!--                                <q-icon name="vn:pin_off"></q-icon>-->
+        <!--                            </div>-->
+        <!--                        </q-item-section>-->
+        <!--                    </template>-->
+        <!--                    <template v-for="section in module.children" :key="section.title">-->
+        <!--                        <q-item-->
+        <!--                            clickable-->
+        <!--                            v-ripple-->
+        <!--                            active-class="text-primary"-->
+        <!--                            :to="{ name: section.stateName }"-->
+        <!--                            v-if="!section.roles || !section.roles.length || hasAny(section.roles)"-->
+        <!--                        >-->
+        <!--                            <q-item-section avatar :if="section.icon">-->
+        <!--                                <q-icon :name="section.icon" />-->
+        <!--                            </q-item-section>-->
+        <!--                            <q-item-section>{{ t(`${module.name}.pageTitles.${section.title}`) }}</q-item-section>-->
+        <!--                        </q-item>-->
+        <!--                    </template>-->
+        <!--                </q-expansion-item>-->
+        <!--            </template>-->
+        <!--        </template>-->
     </q-list>
 
     <q-separator />
 
-    <q-expansion-item :label="t('moduleIndex.allModules')">
-        <q-list padding>
-            <template v-for="module in navigation.modules.value" :key="module.title">
-                <div class="module" v-if="!module.children">
-                    <q-item
-                        class="module"
-                        clickable
-                        v-ripple
-                        active-class="text-primary"
-                        :key="module.title"
-                        :to="{ name: module.stateName }"
-                        v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
-                    >
-                        <q-item-section avatar :if="module.icon">
-                            <q-icon :name="module.icon" />
-                        </q-item-section>
-                        <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
-                        <q-item-section side>
-                            <div
-                                @click="onToggleFavoriteModule(module.name, $event)"
-                                class="row items-center"
-                                v-if="module.name != 'dashboard'"
-                            >
-                                <q-icon name="vn:pin"></q-icon>
-                            </div>
-                        </q-item-section>
-                    </q-item>
-                </div>
+    <!--    <q-expansion-item :label="t('moduleIndex.allModules')">-->
+    <!--        <q-list padding>-->
+    <!--            <template v-for="module in navigation.modules.value" :key="module.title">-->
+    <!--                <div class="module" v-if="!module.children">-->
+    <!--                    <q-item-->
+    <!--                        class="module"-->
+    <!--                        clickable-->
+    <!--                        v-ripple-->
+    <!--                        active-class="text-primary"-->
+    <!--                        :key="module.title"-->
+    <!--                        :to="{ name: module.stateName }"-->
+    <!--                        v-if="!module.roles || !module.roles.length || hasAny(module.roles)"-->
+    <!--                    >-->
+    <!--                        <q-item-section avatar :if="module.icon">-->
+    <!--                            <q-icon :name="module.icon" />-->
+    <!--                        </q-item-section>-->
+    <!--                        <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>-->
+    <!--                        <q-item-section side>-->
+    <!--                            <div-->
+    <!--                                @click="onToggleFavoriteModule(module.name, $event)"-->
+    <!--                                class="row items-center"-->
+    <!--                                v-if="module.name != 'dashboard'"-->
+    <!--                            >-->
+    <!--                                <q-icon name="vn:pin"></q-icon>-->
+    <!--                            </div>-->
+    <!--                        </q-item-section>-->
+    <!--                    </q-item>-->
+    <!--                </div>-->
 
-                <template v-if="module.children">
-                    <q-expansion-item
-                        class="module"
-                        active-class="text-primary"
-                        :label="t(`${module.name}.pageTitles.${module.title}`)"
-                        v-if="!module.roles || !module.roles.length || hasAny(module.roles)"
-                        :to="{ name: module.stateName }"
-                    >
-                        <template #header>
-                            <q-item-section avatar>
-                                <q-icon :name="module.icon"></q-icon>
-                            </q-item-section>
-                            <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>
-                            <q-item-section side>
-                                <div
-                                    @click="onToggleFavoriteModule(module.name, $event)"
-                                    class="row items-center"
-                                    v-if="module.name != 'dashboard'"
-                                >
-                                    <q-icon name="vn:pin"></q-icon>
-                                </div>
-                            </q-item-section>
-                        </template>
-                        <template v-for="section in module.children" :key="section.title">
-                            <q-item
-                                clickable
-                                v-ripple
-                                active-class="text-primary"
-                                :to="{ name: section.stateName }"
-                                v-if="!section.roles || !section.roles.length || hasAny(section.roles)"
-                            >
-                                <q-item-section avatar :if="section.icon">
-                                    <q-icon :name="section.icon" />
-                                </q-item-section>
-                                <q-item-section>{{ t(`${module.name}.pageTitles.${section.title}`) }}</q-item-section>
-                            </q-item>
-                        </template>
-                    </q-expansion-item>
-                </template>
-            </template>
-        </q-list>
-    </q-expansion-item>
+    <!--                <template v-if="module.children">-->
+    <!--                    <q-expansion-item-->
+    <!--                        class="module"-->
+    <!--                        active-class="text-primary"-->
+    <!--                        :label="t(`${module.name}.pageTitles.${module.title}`)"-->
+    <!--                        v-if="!module.roles || !module.roles.length || hasAny(module.roles)"-->
+    <!--                        :to="{ name: module.stateName }"-->
+    <!--                    >-->
+    <!--                        <template #header>-->
+    <!--                            <q-item-section avatar>-->
+    <!--                                <q-icon :name="module.icon"></q-icon>-->
+    <!--                            </q-item-section>-->
+    <!--                            <q-item-section>{{ t(`${module.name}.pageTitles.${module.title}`) }}</q-item-section>-->
+    <!--                            <q-item-section side>-->
+    <!--                                <div-->
+    <!--                                    @click="onToggleFavoriteModule(module.name, $event)"-->
+    <!--                                    class="row items-center"-->
+    <!--                                    v-if="module.name != 'dashboard'"-->
+    <!--                                >-->
+    <!--                                    <q-icon name="vn:pin"></q-icon>-->
+    <!--                                </div>-->
+    <!--                            </q-item-section>-->
+    <!--                        </template>-->
+    <!--                        <template v-for="section in module.children" :key="section.title">-->
+    <!--                            <q-item-->
+    <!--                                clickable-->
+    <!--                                v-ripple-->
+    <!--                                active-class="text-primary"-->
+    <!--                                :to="{ name: section.stateName }"-->
+    <!--                                v-if="!section.roles || !section.roles.length || hasAny(section.roles)"-->
+    <!--                            >-->
+    <!--                                <q-item-section avatar :if="section.icon">-->
+    <!--                                    <q-icon :name="section.icon" />-->
+    <!--                                </q-item-section>-->
+    <!--                                <q-item-section>{{ t(`${module.name}.pageTitles.${section.title}`) }}</q-item-section>-->
+    <!--                            </q-item>-->
+    <!--                        </template>-->
+    <!--                    </q-expansion-item>-->
+    <!--                </template>-->
+    <!--            </template>-->
+    <!--        </q-list>-->
+    <!--    </q-expansion-item>-->
 </template>
 
 <style>
diff --git a/src/composables/useNavigation.js b/src/composables/useNavigation.js
index a5c58ec09..f6b4849fd 100644
--- a/src/composables/useNavigation.js
+++ b/src/composables/useNavigation.js
@@ -1,92 +1,98 @@
-import routes from 'src/router/routes';
-import { ref } from 'vue';
-import axios from 'axios';
+// import routes from 'src/router/routes';
+// import { ref } from 'vue';
+// import axios from 'axios';
 
-const favorites = ref([]);
-const modules = ref([]);
+// const favorites = ref([]);
+//const modules = ref([]);
 
-const mainRoute = routes.find((route) => route.path === '/');
-const moduleRoutes = (mainRoute && mainRoute.children) || [];
-
-for (const route of moduleRoutes) {
-    const module = {
-        stateName: route.name,
-        name: route.name.toLowerCase(),
-        roles: [],
-    };
-
-    if (route.meta) {
-        Object.assign(module, route.meta);
-    }
-
-    if (route.children && route.children.length) {
-        const [moduleMain] = route.children;
-        const routes = moduleMain.children;
-
-        module.children = routes.map((route) => {
-            const submodule = {
-                stateName: route.name,
-                name: route.name,
-            };
-
-            Object.assign(submodule, route.meta);
-
-            return submodule;
-        });
-    }
-    modules.value.push(module);
-}
+// const mainRoute = routes.find((route) => route.path === '/');
+// const moduleRoutes = (mainRoute && mainRoute.children) || [];
+//
+// for (const route of moduleRoutes) {
+//     const module = {
+//         stateName: route.name,
+//         name: route.name.toLowerCase(),
+//         roles: [],
+//     };
+//
+//     if (route.meta) {
+//         Object.assign(module, route.meta);
+//     }
+//
+//     if (route.children && route.children.length) {
+//         const [moduleMain] = route.children;
+//         const routes = moduleMain.children;
+//
+//         module.children = routes.map((route) => {
+//             const submodule = {
+//                 stateName: route.name,
+//                 name: route.name,
+//             };
+//
+//             Object.assign(submodule, route.meta);
+//
+//             return submodule;
+//         });
+//     }
+//     modules.value.push(module);
+// }
 
 export function useNavigation() {
-    const salixModules = {
-        customer: 'Clients',
-        claim: 'Claims',
-        entry: 'Entries',
-        invoiceIn: 'Invoices In',
-        invoiceOut: 'Invoices Out',
-        item: 'Items',
-        monitor: 'Monitors',
-        order: 'Orders',
-        route: 'Routes',
-        supplier: 'Suppliers',
-        ticket: 'Tickets',
-        travel: 'Travels',
-        user: 'Users',
-        worker: 'Workers',
-        zone: 'Zones',
-    };
+    const modules = [
+        'customer',
+        'claim',
+        'ticket'
+    ];
 
-    async function fetchFavorites() {
-        const response = await axios.get('StarredModules/getStarredModules');
+    // const salixModules = {
+    //     customer: 'Clients',
+    //     claim: 'Claims',
+    //     entry: 'Entries',
+    //     invoiceIn: 'Invoices In',
+    //     invoiceOut: 'Invoices Out',
+    //     item: 'Items',
+    //     monitor: 'Monitors',
+    //     order: 'Orders',
+    //     route: 'Routes',
+    //     supplier: 'Suppliers',
+    //     ticket: 'Tickets',
+    //     travel: 'Travels',
+    //     user: 'Users',
+    //     worker: 'Workers',
+    //     zone: 'Zones',
+    // };
 
-        const filteredModules = modules.value.filter((module) => {
-            return response.data.find((element) => element.moduleFk == salixModules[module.name]);
-        });
+    // async function fetchFavorites() {
+    //     const response = await axios.get('StarredModules/getStarredModules');
+    //
+    //     const filteredModules = modules.value.filter((module) => {
+    //         return response.data.find((element) => element.moduleFk == salixModules[module.name]);
+    //     });
+    //
+    //     return (favorites.value = filteredModules);
+    // }
+    //
+    // async function toggleFavorite(moduleName, event) {
+    //     if (event.defaultPrevented) return;
+    //     event.preventDefault();
+    //     event.stopPropagation();
+    //
+    //     const params = { moduleName: salixModules[moduleName] };
+    //     const query = 'StarredModules/toggleStarredModule';
+    //     await axios.post(query, params);
+    //
+    //     updateFavorites(moduleName);
+    // }
+    //
+    // function updateFavorites(name) {
+    //     if (!favorites.value.find((module) => module.name == name)) {
+    //         const newStarreModule = modules.value.find((module) => module.name == name);
+    //         favorites.value.push(newStarreModule);
+    //     } else {
+    //         const moduleToRemove = favorites.value.find((module) => module.name == name);
+    //         favorites.value.splice(favorites.value.indexOf(moduleToRemove), 1);
+    //     }
+    // }
 
-        return (favorites.value = filteredModules);
-    }
-
-    async function toggleFavorite(moduleName, event) {
-        if (event.defaultPrevented) return;
-        event.preventDefault();
-        event.stopPropagation();
-
-        const params = { moduleName: salixModules[moduleName] };
-        const query = 'StarredModules/toggleStarredModule';
-        await axios.post(query, params);
-
-        updateFavorites(moduleName);
-    }
-
-    function updateFavorites(name) {
-        if (!favorites.value.find((module) => module.name == name)) {
-            const newStarreModule = modules.value.find((module) => module.name == name);
-            favorites.value.push(newStarreModule);
-        } else {
-            const moduleToRemove = favorites.value.find((module) => module.name == name);
-            favorites.value.splice(favorites.value.indexOf(moduleToRemove), 1);
-        }
-    }
-
-    return { modules, favorites, toggleFavorite, fetchFavorites, updateFavorites };
-}
\ No newline at end of file
+    return { modules};
+}
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index e78602aae..673ab66f0 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -2,6 +2,7 @@
 import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import CustomerDescriptor from './CustomerDescriptor.vue';
+import LeftMenu from 'components/LeftMenu.vue';
 
 const state = useState();
 const { t } = useI18n();
@@ -11,6 +12,7 @@ const { t } = useI18n();
         <q-scroll-area class="fit">
             <customer-descriptor />
             <q-separator />
+            <left-menu source="card" />
             <q-list>
                 <q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
                     <q-item-section avatar>
diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue
index d84a53ab9..4fe1a91cd 100644
--- a/src/pages/Dashboard/Dashboard.vue
+++ b/src/pages/Dashboard/Dashboard.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
+// import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import LeftMenu from 'components/LeftMenu.vue';
-import { useNavigation } from 'composables/useNavigation';
+// import { useNavigation } from 'composables/useNavigation';
 
-const { t } = useI18n();
+// const { t } = useI18n();
 const state = useState();
-const modules = useNavigation();
+// const modules = useNavigation();
 </script>
 
 <template>
@@ -15,45 +15,38 @@ const modules = useNavigation();
             <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" v-if="modules.favorites.value.length">
-                    <div class="text-h6 text-grey-8 q-mb-sm">{{ t('globals.favoriteModules') }}</div>
-                    <q-card class="row flex-container">
-                        <div
-                            v-for="module of modules.favorites.value"
-                            :key="module.title"
-                            class="row no-wrap q-pa-xs flex-item"
-                        >
-                            <q-btn
-                                align="evenly"
-                                padding="16px"
-                                flat
-                                stack
-                                size="lg"
-                                :icon="module.icon"
-                                color="orange-6"
-                                class="col-4 button"
-                                :to="{ name: module.stateName }"
-                            >
-                                <div class="text-center text-primary button-text">
-                                    {{ t(`${module.name}.pageTitles.${module.title}`) }}
-                                </div>
-                            </q-btn>
-                        </div>
-                    </q-card>
-                </div>
-            </div>
-        </q-page>
-    </q-page-container>
+    <!--    <q-page-container>-->
+    <!--        <q-page class="q-pa-md">-->
+    <!--            <div class="row items-start wrap q-col-gutter-md q-mb-lg">-->
+    <!--                <div class="col-12 col-md" v-if="modules.favorites.value.length">-->
+    <!--                    <div class="text-h6 text-grey-8 q-mb-sm">{{ t('globals.favoriteModules') }}</div>-->
+    <!--                    <q-card class="row flex-container">-->
+    <!--                        <div-->
+    <!--                            v-for="module of modules.favorites.value"-->
+    <!--                            :key="module.title"-->
+    <!--                            class="row no-wrap q-pa-xs flex-item"-->
+    <!--                        >-->
+    <!--                            <q-btn-->
+    <!--                                align="evenly"-->
+    <!--                                padding="16px"-->
+    <!--                                flat-->
+    <!--                                stack-->
+    <!--                                size="lg"-->
+    <!--                                :icon="module.icon"-->
+    <!--                                color="orange-6"-->
+    <!--                                class="col-4 button"-->
+    <!--                                :to="{ name: module.stateName }"-->
+    <!--                            >-->
+    <!--                                <div class="text-center text-primary button-text">-->
+    <!--                                    {{ t(`${module.name}.pageTitles.${module.title}`) }}-->
+    <!--                                </div>-->
+    <!--                            </q-btn>-->
+    <!--                        </div>-->
+    <!--                    </q-card>-->
+    <!--                </div>-->
+    <!--            </div>-->
+    <!--        </q-page>-->
+    <!--    </q-page-container>-->
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/router/index.js b/src/router/index.js
index d3ea402fa..5ab014d73 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -1,6 +1,5 @@
 import { route } from 'quasar/wrappers';
 import { createRouter, createMemoryHistory, createWebHistory, createWebHashHistory } from 'vue-router';
-// import { Notify } from 'quasar';
 import routes from './routes';
 import { i18n } from 'src/boot/i18n';
 import { useState } from 'src/composables/useState';
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index 641629c9c..cbf078fd8 100644
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@@ -5,10 +5,17 @@ export default {
     path: '/claim',
     meta: {
         title: 'claims',
-        icon: 'vn:claims'
+        icon: 'vn:claims',
     },
     component: RouterView,
     redirect: { name: 'ClaimMain' },
+    menus: {
+        main: [
+            { name: 'ClaimList', icon: 'view_list' },
+            { name: 'ClaimRmaList', icon: 'vn:barcode' },
+        ],
+        card: [{ name: 'CustomerBasicData', icon: 'vn:settings' }],
+    },
     children: [
         {
             name: 'ClaimMain',
@@ -31,11 +38,11 @@ export default {
                     meta: {
                         title: 'rmaList',
                         icon: 'vn:barcode',
-                        roles: ['claimManager']
+                        roles: ['claimManager'],
                     },
                     component: () => import('src/pages/Claim/ClaimRmaList.vue'),
-                }
-            ]
+                },
+            ],
         },
         {
             name: 'ClaimCard',
@@ -47,7 +54,7 @@ export default {
                     name: 'ClaimSummary',
                     path: 'summary',
                     meta: {
-                        title: 'summary'
+                        title: 'summary',
                     },
                     component: () => import('src/pages/Claim/Card/ClaimSummary.vue'),
                 },
@@ -56,7 +63,7 @@ export default {
                     path: 'basic-data',
                     meta: {
                         title: 'basicData',
-                        roles: ['salesPerson']
+                        roles: ['salesPerson'],
                     },
                     component: () => import('src/pages/Claim/Card/ClaimBasicData.vue'),
                 },
@@ -65,11 +72,11 @@ export default {
                     path: 'rma',
                     meta: {
                         title: 'rma',
-                        roles: ['claimManager']
+                        roles: ['claimManager'],
                     },
-                    component: () => import('src/pages/Claim/Card/ClaimRma.vue')
-                }
-            ]
+                    component: () => import('src/pages/Claim/Card/ClaimRma.vue'),
+                },
+            ],
         },
-    ]
-};
\ No newline at end of file
+    ],
+};
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 32cd3446c..479a3d0ff 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -5,10 +5,17 @@ export default {
     name: 'Customer',
     meta: {
         title: 'customers',
-        icon: 'vn:client'
+        icon: 'vn:client',
     },
     component: RouterView,
     redirect: { name: 'CustomerMain' },
+    menus: {
+        main: [
+            { name: 'CustomerList', icon: 'view_list' },
+            { name: 'CustomerCreate', icon: 'vn:addperson' },
+        ],
+        card: [{ name: 'CustomerBasicData', icon: 'vn:settings' }],
+    },
     children: [
         {
             path: '',
@@ -35,7 +42,7 @@ export default {
                     },
                     component: () => import('src/pages/Customer/CustomerCreate.vue'),
                 },
-            ]
+            ],
         },
         {
             name: 'CustomerCard',
@@ -47,7 +54,7 @@ export default {
                     name: 'CustomerSummary',
                     path: 'summary',
                     meta: {
-                        title: 'summary'
+                        title: 'summary',
                     },
                     component: () => import('src/pages/Customer/Card/CustomerSummary.vue'),
                 },
@@ -55,11 +62,11 @@ export default {
                     path: 'basic-data',
                     name: 'CustomerBasicData',
                     meta: {
-                        title: 'basicData'
+                        title: 'basicData',
                     },
                     component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
-                }
-            ]
+                },
+            ],
         },
-    ]
-};
\ No newline at end of file
+    ],
+};
diff --git a/src/router/modules/index.js b/src/router/modules/index.js
new file mode 100644
index 000000000..14f496365
--- /dev/null
+++ b/src/router/modules/index.js
@@ -0,0 +1,9 @@
+import Customer from './customer';
+import Ticket from './ticket';
+import Claim from './claim';
+
+export default [
+    Customer,
+    Ticket,
+    Claim
+]