diff --git a/.vscode/settings.json b/.vscode/settings.json
index 59aa4abd3..ecc1d50d7 100644
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -2,7 +2,7 @@
     "editor.bracketPairColorization.enabled": true,
     "editor.guides.bracketPairs": true,
     "editor.formatOnSave": true,
-    "editor.defaultFormatter": "johnsoncodehk.volar",
+    "editor.defaultFormatter": "esbenp.prettier-vscode",
     "editor.codeActionsOnSave": ["source.fixAll.eslint"],
     "eslint.validate": ["javascript", "javascriptreact", "typescript", "vue"],
     "json.schemas": [
@@ -11,9 +11,6 @@
             "url": "https://on.cypress.io/cypress.schema.json"
         }
     ],
-    "[javascript]": {
-        "editor.defaultFormatter": "vscode.typescript-language-features"
-    },
     "[vue]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     }
diff --git a/quasar.config.js b/quasar.config.js
index 9aefa9fda..83a3abf3e 100644
--- a/quasar.config.js
+++ b/quasar.config.js
@@ -38,8 +38,9 @@ module.exports = configure(function (ctx) {
             // 'line-awesome',
             // 'roboto-font-latin-ext', // this or either 'roboto-font', NEVER both!
 
-            'roboto-font', // optional, you are not bound to it
-            'material-icons', // optional, you are not bound to it
+            'roboto-font',
+            'material-icons-outlined',
+            'material-symbols-outlined',
         ],
 
         // Full list of options: https://v2.quasar.dev/quasar-cli-webpack/quasar-config-js#Property%3A-build
diff --git a/src/App.vue b/src/App.vue
index f381d2576..9cdc1d791 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -19,6 +19,11 @@ quasar.iconMapFn = (iconName) => {
             cls: `icon-${name}`,
         };
     }
+
+    return {
+        cls: 'material-symbols-outlined',
+        content: iconName,
+    };
 };
 
 function responseError(error) {
diff --git a/src/components/FavoriteModules.vue b/src/components/FavoriteModules.vue
deleted file mode 100644
index a2b9648dd..000000000
--- a/src/components/FavoriteModules.vue
+++ /dev/null
@@ -1,57 +0,0 @@
-<script setup>
-// import { onMounted } from 'vue';
-// import { useI18n } from 'vue-i18n';
-// import { useNavigation } from 'src/stores/useNavigationStoreStore';
-
-// const { t } = useI18n();
-// const navigation = useNavigation();
-
-// onMounted(() => {
-//     navigation.fetchPinned();
-// });
-</script>
-
-<template>
-    Test
-    <!-- {{ 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 {-->
-<!--    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 889c47868..4055b1312 100644
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@@ -1,15 +1,16 @@
 <script setup>
-import { ref } from 'vue';
+import axios from 'axios';
+import { onMounted, ref, computed } from 'vue';
 import { useI18n } from 'vue-i18n';
-import { useRole } from 'src/composables/useRole';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
 import { useNavigationStore } from 'src/stores/useNavigationStore';
+import { toLowerCamel } from 'src/filters';
 import routes from 'src/router/modules';
-import axios from 'axios';
+import LeftMenuItem from './LeftMenuItem.vue';
+import LeftMenuItemGroup from './LeftMenuItemGroup.vue';
 
 const { t } = useI18n();
-const role = useRole();
 const route = useRoute();
 const quasar = useQuasar();
 const navigation = useNavigationStore();
@@ -21,9 +22,10 @@ const props = defineProps({
     },
 });
 
-function toLowerCamel(value) {
-    return value.charAt(0).toLowerCase() + value.slice(1);
-}
+onMounted(async () => {
+    await navigation.fetchPinned();
+    getRoutes();
+});
 
 function findMatches(search, item) {
     const matches = [];
@@ -47,333 +49,146 @@ function addChildren(module, route, parent) {
         const mainMenus = route.menus[props.source];
         const matches = findMatches(mainMenus, route);
         for (const child of matches) {
-            addMenuItem(module, child, parent);
+            navigation.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 pinnedItems = computed(() => {
+    return items.value.filter((item) => item.isPinned);
+});
 
 const items = ref([]);
-if (props.source === 'main') {
-    for (const module of navigation.modules) {
-        const moduleDef = routes.find((route) => toLowerCamel(route.name) === module);
+function getRoutes() {
+    if (props.source === 'main') {
+        const modules = Object.assign([], navigation.getModules().value);
+        for (const item of modules) {
+            const moduleDef = routes.find((route) => toLowerCamel(route.name) === item.module);
 
-        const item = addMenuItem(module, moduleDef, items.value);
-        const pinned = navigation.pinned.value;
-        if (pinned.contains(module)) {
-            item.isPinned = true
+            item.children = [];
+
+            addChildren(item.module, moduleDef, item.children);
         }
 
-        item.children = [];
-        item.module = module;
+        items.value = modules;
+    }
 
-        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);
     }
 }
 
-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);
-}
-
-async function togglePinned(moduleName, event) {
+async function togglePinned(item, event) {
     if (event.defaultPrevented) return;
     event.preventDefault();
     event.stopPropagation();
 
-    await axios.post('StarredModules/toggleStarredModule', { moduleName });
-    navigation.togglePinned(moduleName);
+    const data = { moduleName: item.module };
+    const response = await axios.post('StarredModules/toggleStarredModule', data);
+
+    item.isPinned = false;
+
+    if (response.data && response.data.id) {
+        item.isPinned = true;
+    }
+
+    navigation.togglePinned(item.module);
 
     quasar.notify({
         message: t('globals.dataSaved'),
         type: 'positive',
     });
 }
-
-function isOpen(name) {
-    const { matched } = route;
-
-    return matched.some((item) => item.name === name);
-}
 </script>
 
 <template>
     <q-list padding>
-        <q-item-label v-if="$props.source === 'main'" header>
-            {{ t('globals.favoriteModules') }}
-        </q-item-label>
-        <!-- <template v-for="item in items" :key="item.name">
-            <template v-if="item.children">
-                <q-expansion-item
-                    group="itemGroup"
-                    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.title) }}</q-item-section>
-                        <q-item-section side>
-                            <div
-                                @click="onToggleFavoriteModule(module.name, $event)"
-                                class="row items-center"
-                                v-if="module.name != 'dashboard'"
+        <template v-if="$props.source === 'main'">
+            <q-item-label header>
+                {{ t('globals.pinnedModules') }}
+            </q-item-label>
+            <template v-for="item in pinnedItems" :key="item.name">
+                <template v-if="item.children">
+                    <left-menu-item-group :item="item" group="pinnedModules" class="pinned">
+                        <template #side>
+                            <q-btn
+                                v-if="item.isPinned === true"
+                                @click="togglePinned(item, $event)"
+                                icon="vn:pin_off"
+                                size="xs"
+                                flat
+                                round
                             >
-                                <q-icon name="vn:pin"></q-icon>
-                            </div>
-                        </q-item-section>
-                    </template>
-                    <template v-for="section in item.children" :key="section.name">
-                        <q-item active-class="text-primary" :to="{ name: section.name }" clickable v-ripple>
-                            <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>
+                                <q-tooltip>{{ t('components.leftMenu.removeFromPinned') }}</q-tooltip>
+                            </q-btn>
+                            <q-btn
+                                v-if="item.isPinned === false"
+                                @click="togglePinned(item, $event)"
+                                icon="vn:pin"
+                                size="xs"
+                                flat
+                                round
+                            >
+                                <q-tooltip>{{ t('components.leftMenu.addToPinned') }}</q-tooltip>
+                            </q-btn>
+                        </template>
+                    </left-menu-item-group>
+                </template>
+
+                <left-menu-item v-if="!item.children" :item="item" />
             </template>
-            <template v-if="!item.children">
-                <q-item active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
-                    <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> -->
-        <q-separator />
-        <q-expansion-item :label="t('moduleIndex.allModules')">
-            <q-list padding>
+            <q-separator />
+            <q-expansion-item :label="t('moduleIndex.allModules')">
                 <template v-for="item in items" :key="item.name">
                     <template v-if="item.children">
-                        <q-expansion-item
-                            group="itemGroup"
-                            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.title) }}</q-item-section>
-                                <q-item-section side>
-                                    <q-btn
-                                        @click="togglePinned(item.module, $event)"
-                                        icon="vn:pin"
-                                        size="xs"
-                                        flat
-                                        round
-                                    >
-                                        <q-tooltip>Pin this module to favorites</q-tooltip>
-                                    </q-btn>
-                                </q-item-section>
+                        <left-menu-item-group :item="item" group="modules">
+                            <template #side>
+                                <q-btn
+                                    v-if="item.isPinned === true"
+                                    @click="togglePinned(item, $event)"
+                                    icon="vn:pin_off"
+                                    size="xs"
+                                    flat
+                                    round
+                                >
+                                    <q-tooltip>{{ t('components.leftMenu.removeFromPinned') }}</q-tooltip>
+                                </q-btn>
+                                <q-btn
+                                    v-if="item.isPinned === false"
+                                    @click="togglePinned(item, $event)"
+                                    icon="vn:pin"
+                                    size="xs"
+                                    flat
+                                    round
+                                >
+                                    <q-tooltip>{{ t('components.leftMenu.addToPinned') }}</q-tooltip>
+                                </q-btn>
                             </template>
-                            <template v-for="section in item.children" :key="section.name">
-                                <q-item active-class="text-primary" :to="{ name: section.name }" clickable v-ripple>
-                                    <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 active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
-                            <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>
+                        </left-menu-item-group>
                     </template>
                 </template>
-            </q-list>
-        </q-expansion-item>
-        <q-separator />
-        <!--        <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-expansion-item>
+            <q-separator />
+        </template>
+        <template v-if="$props.source === 'card'">
+            <template v-for="item in items" :key="item.name">
+                <left-menu-item v-if="!item.children" :item="item" />
+            </template>
+        </template>
     </q-list>
-
-    <!--    <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>
 
-<!--<style>-->
-<!--.module .icon-pin,-->
-<!--.module .icon-pin_off {-->
-<!--    visibility: hidden;-->
-<!--}-->
-<!--.module:hover .icon-pin,-->
-<!--.module:hover .icon-pin_off {-->
-<!--    visibility: visible;-->
-<!--}-->
-<!--</style>-->
+<style>
+.pinned .icon-pin,
+.pinned .icon-pin_off {
+    visibility: hidden;
+}
+
+.pinned:hover .icon-pin,
+.pinned:hover .icon-pin_off {
+    visibility: visible;
+}
+</style>
diff --git a/src/components/LeftMenuItem.vue b/src/components/LeftMenuItem.vue
new file mode 100644
index 000000000..2713f434c
--- /dev/null
+++ b/src/components/LeftMenuItem.vue
@@ -0,0 +1,26 @@
+<script setup>
+import { computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+
+const { t } = useI18n();
+
+const props = defineProps({
+    item: {
+        type: Object,
+        required: true,
+    },
+});
+
+const item = computed(() => props.item);
+</script>
+<template>
+    <q-item active-class="text-primary" :to="{ name: item.name }" clickable v-ripple>
+        <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>
diff --git a/src/components/LeftMenuItemGroup.vue b/src/components/LeftMenuItemGroup.vue
new file mode 100644
index 000000000..8305c2ec4
--- /dev/null
+++ b/src/components/LeftMenuItemGroup.vue
@@ -0,0 +1,51 @@
+<script setup>
+import { computed } from 'vue';
+import { useRoute } from 'vue-router';
+import { useI18n } from 'vue-i18n';
+import LeftMenuItem from './LeftMenuItem.vue';
+
+const route = useRoute();
+const { t } = useI18n();
+
+const props = defineProps({
+    item: {
+        type: Object,
+        required: true,
+    },
+    group: {
+        type: String,
+        default: '',
+    },
+});
+
+const item = computed(() => props.item);
+const isOpened = computed(() => {
+    const { matched } = route;
+    const { name } = item.value;
+
+    return matched.some((item) => item.name === name);
+});
+</script>
+<template>
+    <q-expansion-item
+        :group="props.group"
+        active-class="text-primary"
+        :label="item.title"
+        :to="{ name: item.name }"
+        expand-separator
+        :default-opened="isOpened"
+    >
+        <template #header>
+            <q-item-section avatar>
+                <q-icon :name="item.icon"></q-icon>
+            </q-item-section>
+            <q-item-section>{{ t(item.title) }}</q-item-section>
+            <q-item-section side>
+                <slot name="side" :item="item" />
+            </q-item-section>
+        </template>
+        <template v-for="section in item.children" :key="section.name">
+            <left-menu-item :item="section" />
+        </template>
+    </q-expansion-item>
+</template>
diff --git a/src/components/Navbar.vue b/src/components/Navbar.vue
index ec407ace5..cb1283eb5 100644
--- a/src/components/Navbar.vue
+++ b/src/components/Navbar.vue
@@ -4,7 +4,7 @@ import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import { useSession } from 'src/composables/useSession';
 import UserPanel from 'components/UserPanel.vue';
-import FavoriteModules from './FavoriteModules.vue';
+import PinnedModules from './PinnedModules.vue';
 
 const { t } = useI18n();
 const session = useSession();
@@ -43,11 +43,11 @@ function onToggleDrawer() {
             <q-space></q-space>
             <div class="q-pl-sm q-gutter-sm row items-center no-wrap">
                 <div id="header-actions"></div>
-                <q-btn id="favoriteModules" icon="apps" flat dense rounded>
+                <q-btn id="pinnedModules" icon="apps" flat dense rounded>
                     <q-tooltip bottom>
-                        {{ t('globals.favoriteModules') }}
+                        {{ t('globals.pinnedModules') }}
                     </q-tooltip>
-                    <FavoriteModules />
+                    <PinnedModules />
                 </q-btn>
                 <q-btn rounded dense flat no-wrap id="user">
                     <q-avatar size="lg">
diff --git a/src/components/PinnedModules.vue b/src/components/PinnedModules.vue
new file mode 100644
index 000000000..27767a248
--- /dev/null
+++ b/src/components/PinnedModules.vue
@@ -0,0 +1,57 @@
+<script setup>
+import { onMounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
+import { useNavigationStore } from 'src/stores/useNavigationStore';
+
+const navigation = useNavigationStore();
+const { t } = useI18n();
+
+onMounted(() => {
+    navigation.fetchPinned();
+});
+
+const pinnedModules = computed(() => navigation.getPinnedModules());
+</script>
+
+<template>
+    <q-menu
+        anchor="bottom left"
+        class="row q-pa-md q-col-gutter-lg"
+        max-width="350px"
+        max-height="400px"
+        v-if="pinnedModules.length"
+    >
+        <div v-for="item of pinnedModules" :key="item.title" class="row no-wrap q-pa-xs flex-item">
+            <q-btn
+                align="evenly"
+                padding="16px"
+                flat
+                stack
+                size="lg"
+                :icon="item.icon"
+                color="primary"
+                class="col-4 button"
+                :to="{ name: item.name }"
+            >
+                <div class="text-center text-primary button-text">
+                    {{ t(item.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>
diff --git a/src/components/UserPanel.vue b/src/components/UserPanel.vue
index 6c061284d..c6264f07f 100644
--- a/src/components/UserPanel.vue
+++ b/src/components/UserPanel.vue
@@ -45,7 +45,7 @@ onMounted(async () => {
 });
 
 function updatePreferences() {
-    if (user.value.darkMode) {
+    if (user.value.darkMode !== null) {
         darkMode.value = user.value.darkMode;
     }
     if (user.value.lang) {
diff --git a/src/composables/useNavigation.js b/src/composables/useNavigation.js
deleted file mode 100644
index 3eaf32392..000000000
--- a/src/composables/useNavigation.js
+++ /dev/null
@@ -1,96 +0,0 @@
-// import routes from 'src/router/routes';
-// import { ref } from 'vue';
-import axios from 'axios';
-
-// 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);
-// }
-
-export function useNavigation() {
-    const modules = [
-        'customer',
-        'claim',
-        'ticket'
-    ];
-
-    // 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',
-    // };
-
-    // 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 togglePinned(moduleName, event) {
-        if (event.defaultPrevented) return;
-        event.preventDefault();
-        event.stopPropagation();
-
-        await axios.post('StarredModules/toggleStarredModule', { moduleName });
-
-        // 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, togglePinned };
-}
diff --git a/src/filters/index.js b/src/filters/index.js
index 459087e8e..70b0edc82 100644
--- a/src/filters/index.js
+++ b/src/filters/index.js
@@ -2,9 +2,11 @@ import toLowerCase from './toLowerCase';
 import toDate from './toDate';
 import toCurrency from './toCurrency';
 import toPercentage from './toPercentage';
+import toLowerCamel from './toLowerCamel';
 
 export {
     toLowerCase,
+    toLowerCamel,
     toDate,
     toCurrency,
     toPercentage,
diff --git a/src/filters/toLowerCamel.js b/src/filters/toLowerCamel.js
new file mode 100644
index 000000000..ebfe28bc2
--- /dev/null
+++ b/src/filters/toLowerCamel.js
@@ -0,0 +1,5 @@
+export default function toLowerCamel(value) {
+    if (!value) return;
+    if (typeof (value) !== 'string') return value;
+    return value.charAt(0).toLowerCase() + value.slice(1);
+}
\ No newline at end of file
diff --git a/src/i18n/en/index.js b/src/i18n/en/index.js
index 88fae5bb7..31da55081 100644
--- a/src/i18n/en/index.js
+++ b/src/i18n/en/index.js
@@ -9,7 +9,7 @@ export default {
         backToDashboard: 'Return to dashboard',
         notifications: 'Notifications',
         userPanel: 'User panel',
-        favoriteModules: 'Favorite modules',
+        pinnedModules: 'Pinned modules',
         darkMode: 'Dark mode',
         logOut: 'Log out',
         dataSaved: 'Data saved',
@@ -268,5 +268,9 @@ export default {
             summary: 'Summary',
             moreOptions: 'More options',
         },
+        leftMenu: {
+            addToPinned: 'Add to pinned',
+            removeFromPinned: 'Remove from pinned',
+        },
     },
 };
diff --git a/src/i18n/es/index.js b/src/i18n/es/index.js
index 0103b1a92..ce613b32a 100644
--- a/src/i18n/es/index.js
+++ b/src/i18n/es/index.js
@@ -9,7 +9,7 @@ export default {
         backToDashboard: 'Volver al tablón',
         notifications: 'Notificaciones',
         userPanel: 'Panel de usuario',
-        favoriteModules: 'Módulos favoritos',
+        pinnedModules: 'Módulos fijados',
         darkMode: 'Modo oscuro',
         logOut: 'Cerrar sesión',
         dataSaved: 'Datos guardados',
@@ -267,5 +267,9 @@ export default {
             summary: 'Resumen',
             moreOptions: 'Más opciones',
         },
+        leftMenu: {
+            addToPinned: 'Añadir a fijados',
+            removeFromPinned: 'Eliminar de fijados',
+        },
     },
 };
diff --git a/src/pages/Dashboard/Dashboard.vue b/src/pages/Dashboard/Dashboard.vue
index 4fe1a91cd..107e3fd3b 100644
--- a/src/pages/Dashboard/Dashboard.vue
+++ b/src/pages/Dashboard/Dashboard.vue
@@ -1,12 +1,19 @@
 <script setup>
-// import { useI18n } from 'vue-i18n';
+import { onMounted, computed } from 'vue';
+import { useI18n } from 'vue-i18n';
 import { useState } from 'src/composables/useState';
 import LeftMenu from 'components/LeftMenu.vue';
-// import { useNavigation } from 'composables/useNavigation';
+import { useNavigationStore } from 'src/stores/useNavigationStore';
 
-// const { t } = useI18n();
 const state = useState();
-// const modules = useNavigation();
+const navigation = useNavigationStore();
+const { t } = useI18n();
+
+onMounted(() => {
+    navigation.fetchPinned();
+});
+
+const pinnedModules = computed(() => navigation.getPinnedModules());
 </script>
 
 <template>
@@ -15,38 +22,34 @@ const state = useState();
             <LeftMenu />
         </q-scroll-area>
     </q-drawer>
-    <!--    <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>-->
+    <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="pinnedModules.length">
+                    <div class="text-h6 text-grey-8 q-mb-sm">{{ t('globals.pinnedModules') }}</div>
+                    <q-card class="row flex-container">
+                        <div v-for="item of pinnedModules" :key="item.title" class="row no-wrap q-pa-xs flex-item">
+                            <q-btn
+                                align="evenly"
+                                padding="16px"
+                                flat
+                                stack
+                                size="lg"
+                                :icon="item.icon"
+                                color="orange-6"
+                                class="col-4 button"
+                                :to="{ name: item.name }"
+                            >
+                                <div class="text-center text-primary button-text">
+                                    {{ t(item.title) }}
+                                </div>
+                            </q-btn>
+                        </div>
+                    </q-card>
+                </div>
+            </div>
+        </q-page>
+    </q-page-container>
 </template>
 
 <style lang="scss" scoped>
diff --git a/src/stores/useNavigationStore.js b/src/stores/useNavigationStore.js
index 8d365d36d..d676b5bb3 100644
--- a/src/stores/useNavigationStore.js
+++ b/src/stores/useNavigationStore.js
@@ -1,36 +1,84 @@
-import { onMounted, ref } from 'vue';
 import axios from 'axios';
+import { ref } from 'vue';
 import { defineStore } from 'pinia';
+import { toLowerCamel } from 'src/filters';
+import { useRole } from 'src/composables/useRole';
+import routes from 'src/router/modules';
 
 export const useNavigationStore = defineStore('navigationStore', () => {
     const modules = ['customer', 'claim', 'ticket'];
-    const pinned = ref([]);
+    const pinnedModules = ref([]);
+    const role = useRole();
 
-    onMounted(() => fetchPinned())
+    function getModules() {
+        const modulesRoutes = ref([]);
+        for (const module of modules) {
+            const moduleDef = routes.find((route) => toLowerCamel(route.name) === module);
+
+            const item = addMenuItem(module, moduleDef, modulesRoutes.value);
+            if (!item) continue;
+
+            item.module = module;
+            item.isPinned = false;
+
+            if (pinnedModules.value.includes(module)) {
+                item.isPinned = true;
+            }
+        }
+
+        return modulesRoutes;
+    }
+
+    function getPinnedModules() {
+        const modules = getModules();
+
+        return modules.value.filter((item) => item.isPinned);
+    }
+
+    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;
+    }
 
     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]);
-        // });
+        if (pinnedModules.value.length) return;
 
-        return (pinned.value = response.data);
+        const response = await axios.get('StarredModules/getStarredModules');
+        pinnedModules.value = response.data.map((row) => row.moduleFk);
     }
 
     function togglePinned(module) {
-        if (pinned.value.includes(module)) {
-            const index = pinned.value.indexOf(module);
-            pinned.value.splice(index, 1);
+        if (pinnedModules.value.includes(module)) {
+            const index = pinnedModules.value.indexOf(module);
+            pinnedModules.value.splice(index, 1);
 
             return;
         }
 
-        pinned.value.push(module);
+        pinnedModules.value.push(module);
     }
 
     return {
         modules,
-        pinned,
+        pinnedModules,
+        getModules,
+        getPinnedModules,
+        fetchPinned,
         togglePinned,
+        addMenuItem,
     };
 });