diff --git a/src/App.vue b/src/App.vue
index 5bc5db3..ac8a541 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,14 +1,7 @@
 <script setup lang="ts">
 import { activeNote, updateNote } from '@/composables/useNotes'
-
+import { viewModes, activeViewMode } from '@/composables/useViewMode'
 const sideBarCollapsed = ref(false)
-
-const viewModes: ViewMode[] = [
-  { name: 'Note', icon: 'fas fa-sticky-note fa-fw' },
-  { name: 'List', icon: 'fas fa-list fa-fw' },
-  { name: 'Mindmap', icon: 'fas fa-project-diagram fa-fw' },
-]
-const activeViewMode = ref(viewModes[0])
 </script>
 
 <template>
diff --git a/src/composables/useNotes.ts b/src/composables/useNotes.ts
index 4523abd..ced2cfd 100644
--- a/src/composables/useNotes.ts
+++ b/src/composables/useNotes.ts
@@ -1,3 +1,4 @@
+import { viewModes, activeViewMode } from '@/composables/useViewMode'
 import { useTitle } from '@vueuse/core'
 import { mdToHtml } from '@/utils/markdown'
 import { getAllMatches } from '@/utils/helpers'
@@ -27,7 +28,11 @@ watch(activeNote, () => {
   }
 })
 export const setActiveNote = (noteId: string | undefined) => {
-  if (noteId) activeNoteId.value = noteId
+  if (noteId) {
+    activeNoteId.value = noteId
+    activeViewMode.value =
+      viewModes.find((mode) => mode.name === 'Note') || viewModes[0]
+  }
 }
 
 export const rootNote = computed<Note | undefined>(() => {
diff --git a/src/composables/useViewMode.ts b/src/composables/useViewMode.ts
new file mode 100644
index 0000000..f58478e
--- /dev/null
+++ b/src/composables/useViewMode.ts
@@ -0,0 +1,6 @@
+export const viewModes: ViewMode[] = [
+  { name: 'Note', icon: 'fas fa-sticky-note fa-fw' },
+  { name: 'List', icon: 'fas fa-list fa-fw' },
+  { name: 'Mindmap', icon: 'fas fa-project-diagram fa-fw' },
+]
+export const activeViewMode = ref(viewModes[0])