diff --git a/.vscode/extensions.json b/.vscode/extensions.json
index a870d0f04..5c8908497 100644
--- a/.vscode/extensions.json
+++ b/.vscode/extensions.json
@@ -3,7 +3,7 @@
         "dbaeumer.vscode-eslint",
         "esbenp.prettier-vscode",
         "editorconfig.editorconfig",
-        "johnsoncodehk.volar",
+        "Vue.volar",
         "wayou.vscode-todo-highlight"
     ],
     "unwantedRecommendations": [
diff --git a/src/components/FavoriteModules.vue b/src/components/FavoriteModules.vue
index 26e39025c..a2b9648dd 100644
--- a/src/components/FavoriteModules.vue
+++ b/src/components/FavoriteModules.vue
@@ -1,18 +1,19 @@
 <script setup>
-import { onMounted } from 'vue';
+// import { onMounted } from 'vue';
 // import { useI18n } from 'vue-i18n';
-import { useNavigation } from 'src/stores/useNavigation';
+// import { useNavigation } from 'src/stores/useNavigationStoreStore';
 
 // const { t } = useI18n();
-const navigation = useNavigation();
+// const navigation = useNavigation();
 
-onMounted(() => {
-    navigation.fetchPinned();
-});
+// onMounted(() => {
+//     navigation.fetchPinned();
+// });
 </script>
 
 <template>
-    {{ navigation.pinned }}
+    Test
+    <!-- {{ navigation.pinned }} -->
     <!--    <q-menu-->
     <!--        anchor="bottom left"-->
     <!--        class="row q-pa-md q-col-gutter-lg"-->
diff --git a/src/components/LeftMenu.vue b/src/components/LeftMenu.vue
index 1793ab5cc..889c47868 100644
--- a/src/components/LeftMenu.vue
+++ b/src/components/LeftMenu.vue
@@ -4,14 +4,15 @@ import { useI18n } from 'vue-i18n';
 import { useRole } from 'src/composables/useRole';
 import { useQuasar } from 'quasar';
 import { useRoute } from 'vue-router';
-import { useNavigation } from 'src/composables/useNavigation';
+import { useNavigationStore } from 'src/stores/useNavigationStore';
 import routes from 'src/router/modules';
+import axios from 'axios';
 
 const { t } = useI18n();
 const role = useRole();
 const route = useRoute();
 const quasar = useQuasar();
-const navigation = useNavigation();
+const navigation = useNavigationStore();
 
 const props = defineProps({
     source: {
@@ -76,6 +77,11 @@ if (props.source === 'main') {
         const moduleDef = routes.find((route) => toLowerCamel(route.name) === module);
 
         const item = addMenuItem(module, moduleDef, items.value);
+        const pinned = navigation.pinned.value;
+        if (pinned.contains(module)) {
+            item.isPinned = true
+        }
+
         item.children = [];
         item.module = module;
 
@@ -92,8 +98,13 @@ if (props.source === 'card') {
     addChildren(currentModule, moduleDef, items.value);
 }
 
-async function togglePinnedModule(module, event) {
-    await navigation.toggleFavorite(module, event);
+async function togglePinned(moduleName, event) {
+    if (event.defaultPrevented) return;
+    event.preventDefault();
+    event.stopPropagation();
+
+    await axios.post('StarredModules/toggleStarredModule', { moduleName });
+    navigation.togglePinned(moduleName);
 
     quasar.notify({
         message: t('globals.dataSaved'),
@@ -185,7 +196,7 @@ function isOpen(name) {
                                 <q-item-section>{{ t(item.title) }}</q-item-section>
                                 <q-item-section side>
                                     <q-btn
-                                        @click="togglePinnedModule(item.module, $event)"
+                                        @click="togglePinned(item.module, $event)"
                                         icon="vn:pin"
                                         size="xs"
                                         flat
diff --git a/src/stores/useNavigation.js b/src/stores/useNavigationStore.js
similarity index 56%
rename from src/stores/useNavigation.js
rename to src/stores/useNavigationStore.js
index 6f3e3321e..8d365d36d 100644
--- a/src/stores/useNavigation.js
+++ b/src/stores/useNavigationStore.js
@@ -1,11 +1,13 @@
-import { ref } from 'vue';
+import { onMounted, ref } from 'vue';
 import axios from 'axios';
 import { defineStore } from 'pinia';
 
-export const useNavigation = defineStore('navigation', () => {
+export const useNavigationStore = defineStore('navigationStore', () => {
     const modules = ['customer', 'claim', 'ticket'];
     const pinned = ref([]);
 
+    onMounted(() => fetchPinned())
+
     async function fetchPinned() {
         const response = await axios.get('StarredModules/getStarredModules');
         // const filteredModules = modules.value.filter((module) => {
@@ -15,9 +17,20 @@ export const useNavigation = defineStore('navigation', () => {
         return (pinned.value = response.data);
     }
 
+    function togglePinned(module) {
+        if (pinned.value.includes(module)) {
+            const index = pinned.value.indexOf(module);
+            pinned.value.splice(index, 1);
+
+            return;
+        }
+
+        pinned.value.push(module);
+    }
+
     return {
         modules,
         pinned,
-        fetchPinned,
+        togglePinned,
     };
 });