diff --git a/quasar.config.js b/quasar.config.js
index 83265295f..9aefa9fda 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -23,7 +23,7 @@ module.exports = configure(function (ctx) {
         // app boot file (/src/boot)
         // --> boot files are part of "main.js"
         // https://v2.quasar.dev/quasar-cli-webpack/boot-files
-        boot: ['i18n', 'axios'],
+        boot: ['i18n', 'axios', 'pinia'],
 
         // https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-css
         css: ['app.scss'],
diff --git a/src/boot/pinia.js b/src/boot/pinia.js
new file mode 100644
index 000000000..5c6c0da28
--- /dev/null
+++ b/src/boot/pinia.js
@@ -0,0 +1,8 @@
+import { boot } from 'quasar/wrappers';
+import { createPinia } from 'pinia';
+
+export default boot(({ app }) => {
+    const pinia = createPinia();
+
+    app.use(pinia);
+});
diff --git a/src/components/FavoriteModules.vue b/src/components/FavoriteModules.vue
index 65d070d95..26e39025c 100644
--- a/src/components/FavoriteModules.vue
+++ b/src/components/FavoriteModules.vue
@@ -1,43 +1,44 @@
-<!--<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/stores/useNavigation';
 
-<!--const { t } = useI18n();-->
-<!--const navigation = useNavigation();-->
+// const { t } = useI18n();
+const navigation = useNavigation();
 
-<!--onMounted(() => {-->
-<!--    navigation.fetchFavorites();-->
-<!--});-->
-<!--</script>-->
+onMounted(() => {
+    navigation.fetchPinned();
+});
+</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>
+    {{ navigation.pinned }}
+    <!--    <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 {-->
diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue
index 38563df39..8578df9d9 100644
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@@ -1,53 +1,95 @@
 <script setup>
 import { ref } from 'vue';
 import { useI18n } from 'vue-i18n';
-// import { useRole } from 'src/composables/useRole';
+import { useRole } from 'src/composables/useRole';
 // import { useQuasar } from 'quasar';
+import { useRoute } from 'vue-router';
 import { useNavigation } from 'src/composables/useNavigation';
 import routes from 'src/router/modules';
 
 const { t } = useI18n();
-// const { hasAny } = useRole();
+const role = useRole();
+const route = useRoute();
 const navigation = useNavigation();
 
-const $props = defineProps({
+const props = defineProps({
     source: {
         type: String,
         default: 'main',
     },
 });
 
-const items = ref([]);
-for (const module of navigation.modules) {
-    const moduleDef = routes.find((route) => route.name.toLowerCase() === module);
-    const moduleMeta = moduleDef.meta;
+function toLowerCamel(value) {
+    return value.charAt(0).toLowerCase() + value.slice(1);
+}
 
-    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,
-            });
+function findMatches(search, item) {
+    const matches = [];
+    function findRoute(search, item) {
+        for (const child of item.children) {
+            if (search.indexOf(child.name) > -1) {
+                matches.push(child);
+            } else if (child.children) {
+                findRoute(search, child);
+            }
         }
     }
 
-    items.value.push(item);
+    findRoute(search, item);
+
+    return matches;
 }
+
+function addChildren(module, route, parent) {
+    if (route.menus) {
+        const mainMenus = route.menus[props.source];
+        const matches = findMatches(mainMenus, route);
+        for (const child of matches) {
+            addMenuItem(module, child, parent);
+        }
+    }
+}
+
+function addMenuItem(module, route, parent) {
+    const { meta } = route;
+
+    if (meta && meta.roles && role.hasAny(meta.roles) === false) return;
+
+    const item = {
+        name: route.name,
+    };
+
+    if (meta) {
+        item.title = `${module}.pageTitles.${meta.title}`;
+        item.icon = meta.icon;
+    }
+
+    parent.push(item);
+
+    return item;
+}
+
+const items = ref([]);
+if (props.source === 'main') {
+    for (const module of navigation.modules) {
+        const moduleDef = routes.find((route) => toLowerCamel(route.name) === module);
+
+        const item = addMenuItem(module, moduleDef, items.value);
+        item.children = [];
+
+        if (!item) continue;
+        addChildren(module, moduleDef, item.children);
+    }
+}
+
+if (props.source === 'card') {
+    const currentRoute = route.matched[1];
+    const currentModule = toLowerCamel(currentRoute.name);
+    const moduleDef = routes.find((route) => toLowerCamel(route.name) === currentModule);
+
+    addChildren(currentModule, moduleDef, items.value);
+}
+
 // const quasar = useQuasar();
 
 // async function onToggleFavoriteModule(moduleName, event) {
@@ -58,44 +100,69 @@ for (const module of navigation.modules) {
 //         type: 'positive',
 //     });
 // }
+
+function isOpen(name) {
+    const { matched } = route;
+
+    return matched.some((item) => item.name === name);
+}
 </script>
 
 <template>
     <q-list padding>
-        <q-item-label header>{{ t('globals.favoriteModules') }}</q-item-label>
+        <q-item-label v-if="$props.source === 'main'" header>
+            {{ t('globals.favoriteModules') }}
+        </q-item-label>
         <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(`${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" />
+            <template v-if="item.children">
+                <q-expansion-item
+                    group="group"
+                    class="module"
+                    active-class="text-primary"
+                    :label="item.title"
+                    :to="{ name: item.name }"
+                    expand-separator
+                    :default-opened="isOpen(item.name)"
+                >
+                    <template #header>
+                        <q-item-section avatar>
+                            <q-icon :name="item.icon"></q-icon>
                         </q-item-section>
-                        <q-item-section>{{ t(`${item.module}.pageTitles.${section.title}`) }}</q-item-section>
-                    </q-item>
-                </template>
-            </q-expansion-item>
+                        <q-item-section>{{ t(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 v-if="section.icon">
+                                <q-icon :name="section.icon" />
+                            </q-item-section>
+                            <q-item-section avatar v-if="!item.icon">
+                                <q-icon name="disabled_by_default" />
+                            </q-item-section>
+                            <q-item-section>{{ t(section.title) }}</q-item-section>
+                        </q-item>
+                    </template>
+                </q-expansion-item>
+            </template>
+            <template v-if="!item.children">
+                <q-item clickable v-ripple active-class="text-primary" :to="{ name: item.name }">
+                    <q-item-section avatar v-if="item.icon">
+                        <q-icon :name="item.icon" />
+                    </q-item-section>
+                    <q-item-section avatar v-if="!item.icon">
+                        <q-icon name="disabled_by_default" />
+                    </q-item-section>
+                    <q-item-section>{{ t(item.title) }}</q-item-section>
+                </q-item>
+            </template>
         </template>
         <!--        <template v-for="module in navigation.favorites.value" :key="module.title">-->
         <!--            <div class="module" v-if="!module.children">-->
@@ -157,8 +224,6 @@ for (const module of navigation.modules) {
         <!--        </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">-->
@@ -232,13 +297,13 @@ for (const module of navigation.modules) {
     <!--    </q-expansion-item>-->
 </template>
 
-<style>
-.module .icon-pin,
-.module .icon-pin_off {
-    visibility: hidden;
-}
-.module:hover .icon-pin,
-.module:hover .icon-pin_off {
-    visibility: visible;
-}
-</style>
+<!--<style>-->
+<!--.module .icon-pin,-->
+<!--.module .icon-pin_off {-->
+<!--    visibility: hidden;-->
+<!--}-->
+<!--.module:hover .icon-pin,-->
+<!--.module:hover .icon-pin_off {-->
+<!--    visibility: visible;-->
+<!--}-->
+<!--</style>-->
diff --git a/src/composables/useRole.js b/src/composables/useRole.js
index eb2eebd28..b8da153d3 100644
--- a/src/composables/useRole.js
+++ b/src/composables/useRole.js
@@ -6,7 +6,7 @@ export function useRole() {
 
     async function fetch() {
         const { data } = await axios.get('Accounts/acl');
-        const roles = data.roles.map(userRoles => userRoles.role.name);
+        const roles = data.roles.map((userRoles) => userRoles.role.name);
 
         const userData = {
             id: data.user.id,
@@ -14,7 +14,7 @@ export function useRole() {
             nickname: data.user.nickname,
             lang: data.user.lang || 'es',
             darkMode: data.user.userConfig.darkMode,
-        }
+        };
         state.setUser(userData);
         state.setRoles(roles);
     }
@@ -32,6 +32,6 @@ export function useRole() {
     return {
         fetch,
         hasAny,
-        state
+        state,
     };
-}
\ No newline at end of file
+}
diff --git a/src/pages/Claim/Card/ClaimCard.vue b/src/pages/Claim/Card/ClaimCard.vue
index 32dd3f24e..cf8f7687c 100644
--- a/src/pages/Claim/Card/ClaimCard.vue
+++ b/src/pages/Claim/Card/ClaimCard.vue
@@ -1,9 +1,8 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { useState } from 'composables/useState';
 import ClaimDescriptor from './ClaimDescriptor.vue';
+import LeftMenu from 'components/LeftMenu.vue';
 
-const { t } = useI18n();
 const state = useState();
 </script>
 <template>
@@ -11,20 +10,7 @@ const state = useState();
         <q-scroll-area class="fit">
             <claim-descriptor />
             <q-separator />
-            <q-list>
-                <q-item :to="{ name: 'ClaimBasicData' }" clickable v-ripple>
-                    <q-item-section avatar>
-                        <q-icon name="vn:settings" />
-                    </q-item-section>
-                    <q-item-section>{{ t('claim.pageTitles.basicData') }}</q-item-section>
-                </q-item>
-                <q-item :to="{ name: 'ClaimRma' }" clickable v-ripple>
-                    <q-item-section avatar>
-                        <q-icon name="vn:barcode" />
-                    </q-item-section>
-                    <q-item-section>{{ t('claim.pageTitles.rma') }}</q-item-section>
-                </q-item>
-            </q-list>
+            <left-menu source="card" />
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
diff --git a/src/pages/Customer/Card/CustomerCard.vue b/src/pages/Customer/Card/CustomerCard.vue
index 673ab66f0..73a436a69 100644
--- a/src/pages/Customer/Card/CustomerCard.vue
+++ b/src/pages/Customer/Card/CustomerCard.vue
@@ -1,11 +1,9 @@
 <script setup>
-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();
 </script>
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
@@ -13,30 +11,6 @@ const { t } = useI18n();
             <customer-descriptor />
             <q-separator />
             <left-menu source="card" />
-            <q-list>
-                <q-item :to="{ name: 'CustomerBasicData' }" clickable v-ripple>
-                    <q-item-section avatar>
-                        <q-icon name="vn:settings" />
-                    </q-item-section>
-                    <q-item-section>{{ t('customer.pageTitles.basicData') }}</q-item-section>
-                </q-item>
-                <!-- <q-item clickable v-ripple>
-                    <q-item-section avatar>
-                        <q-icon name="notes" />
-                    </q-item-section>
-                    <q-item-section>Notes</q-item-section>
-                </q-item>
-                <q-expansion-item icon="more" label="More options" expand-icon-toggle expand-separator>
-                    <q-list>
-                        <q-item clickable v-ripple>
-                            <q-item-section avatar>
-                                <q-icon name="person" />
-                            </q-item-section>
-                            <q-item-section>Option</q-item-section>
-                        </q-item>
-                    </q-list>
-                </q-expansion-item> -->
-            </q-list>
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
diff --git a/src/pages/Ticket/Card/TicketCard.vue b/src/pages/Ticket/Card/TicketCard.vue
index b5645c8cf..71df0dfce 100644
--- a/src/pages/Ticket/Card/TicketCard.vue
+++ b/src/pages/Ticket/Card/TicketCard.vue
@@ -1,24 +1,16 @@
 <script setup>
-import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import TicketDescriptor from './TicketDescriptor.vue';
+import LeftMenu from 'components/LeftMenu.vue';
 
 const state = useState();
-const { t } = useI18n();
 </script>
 <template>
     <q-drawer v-model="state.drawer.value" show-if-above :width="256" :breakpoint="500">
         <q-scroll-area class="fit">
             <ticket-descriptor />
             <q-separator />
-            <q-list>
-                <q-item :to="{ name: 'TicketBoxing' }" clickable v-ripple>
-                    <q-item-section avatar>
-                        <q-icon name="vn:package" />
-                    </q-item-section>
-                    <q-item-section>{{ t('ticket.pageTitles.boxing') }}</q-item-section>
-                </q-item>
-            </q-list>
+            <left-menu source="card" />
         </q-scroll-area>
     </q-drawer>
     <q-page-container>
diff --git a/src/router/modules/claim.js b/src/router/modules/claim.js
index cbf078fd8..1c1cfb50e 100644
--- a/src/router/modules/claim.js
+++ b/src/router/modules/claim.js
@@ -10,11 +10,8 @@ export default {
     component: RouterView,
     redirect: { name: 'ClaimMain' },
     menus: {
-        main: [
-            { name: 'ClaimList', icon: 'view_list' },
-            { name: 'ClaimRmaList', icon: 'vn:barcode' },
-        ],
-        card: [{ name: 'CustomerBasicData', icon: 'vn:settings' }],
+        main: ['ClaimList', 'ClaimRmaList'],
+        card: ['ClaimBasicData', 'ClaimRma'],
     },
     children: [
         {
@@ -55,6 +52,7 @@ export default {
                     path: 'summary',
                     meta: {
                         title: 'summary',
+                        icon: 'launch',
                     },
                     component: () => import('src/pages/Claim/Card/ClaimSummary.vue'),
                 },
@@ -63,6 +61,7 @@ export default {
                     path: 'basic-data',
                     meta: {
                         title: 'basicData',
+                        icon: 'vn:settings',
                         roles: ['salesPerson'],
                     },
                     component: () => import('src/pages/Claim/Card/ClaimBasicData.vue'),
@@ -72,6 +71,7 @@ export default {
                     path: 'rma',
                     meta: {
                         title: 'rma',
+                        icon: 'vn:barcode',
                         roles: ['claimManager'],
                     },
                     component: () => import('src/pages/Claim/Card/ClaimRma.vue'),
diff --git a/src/router/modules/customer.js b/src/router/modules/customer.js
index 479a3d0ff..1c2d421b6 100644
--- a/src/router/modules/customer.js
+++ b/src/router/modules/customer.js
@@ -10,11 +10,8 @@ export default {
     component: RouterView,
     redirect: { name: 'CustomerMain' },
     menus: {
-        main: [
-            { name: 'CustomerList', icon: 'view_list' },
-            { name: 'CustomerCreate', icon: 'vn:addperson' },
-        ],
-        card: [{ name: 'CustomerBasicData', icon: 'vn:settings' }],
+        main: ['CustomerList', 'CustomerCreate'],
+        card: ['CustomerBasicData'],
     },
     children: [
         {
@@ -55,6 +52,7 @@ export default {
                     path: 'summary',
                     meta: {
                         title: 'summary',
+                        icon: 'launch',
                     },
                     component: () => import('src/pages/Customer/Card/CustomerSummary.vue'),
                 },
@@ -63,6 +61,7 @@ export default {
                     name: 'CustomerBasicData',
                     meta: {
                         title: 'basicData',
+                        icon: 'vn:settings',
                     },
                     component: () => import('src/pages/Customer/Card/CustomerBasicData.vue'),
                 },
diff --git a/src/router/modules/ticket.js b/src/router/modules/ticket.js
index b9ce8dcf8..4f06a1808 100644
--- a/src/router/modules/ticket.js
+++ b/src/router/modules/ticket.js
@@ -5,10 +5,14 @@ export default {
     path: '/ticket',
     meta: {
         title: 'tickets',
-        icon: 'vn:ticket'
+        icon: 'vn:ticket',
     },
     component: RouterView,
     redirect: { name: 'TicketMain' },
+    menus: {
+        main: ['TicketList'],
+        card: ['TicketBoxing'],
+    },
     children: [
         {
             name: 'TicketMain',
@@ -35,8 +39,7 @@ export default {
                     },
                     component: () => import('src/pages/Ticket/TicketList.vue'),
                 },
-
-            ]
+            ],
         },
         {
             name: 'TicketCard',
@@ -48,7 +51,8 @@ export default {
                     name: 'TicketSummary',
                     path: 'summary',
                     meta: {
-                        title: 'summary'
+                        title: 'summary',
+                        icon: 'launch',
                     },
                     component: () => import('src/pages/Ticket/Card/TicketSummary.vue'),
                 },
@@ -56,7 +60,8 @@ export default {
                     name: 'TicketBasicData',
                     path: 'basic-data',
                     meta: {
-                        title: 'basicData'
+                        title: 'basicData',
+                        icon: 'vn:settings',
                     },
                     component: () => import('src/pages/Ticket/Card/TicketBasicData.vue'),
                 },
@@ -64,11 +69,12 @@ export default {
                     path: 'boxing',
                     name: 'TicketBoxing',
                     meta: {
-                        title: 'boxing'
+                        title: 'boxing',
+                        icon: 'vn:package',
                     },
                     component: () => import('src/pages/Ticket/Card/TicketBoxing.vue'),
-                }
-            ]
+                },
+            ],
         },
-    ]
+    ],
 };
diff --git a/src/stores/useNavigation.js b/src/stores/useNavigation.js
new file mode 100644
index 000000000..6f3e3321e
--- /dev/null
+++ b/src/stores/useNavigation.js
@@ -0,0 +1,23 @@
+import { ref } from 'vue';
+import axios from 'axios';
+import { defineStore } from 'pinia';
+
+export const useNavigation = defineStore('navigation', () => {
+    const modules = ['customer', 'claim', 'ticket'];
+    const pinned = ref([]);
+
+    async function fetchPinned() {
+        const response = await axios.get('StarredModules/getStarredModules');
+        // const filteredModules = modules.value.filter((module) => {
+        //     return response.data.find((element) => element.moduleFk == salixModules[module.name]);
+        // });
+
+        return (pinned.value = response.data);
+    }
+
+    return {
+        modules,
+        pinned,
+        fetchPinned,
+    };
+});