diff --git a/e2e/AboutPage.ts b/e2e/AboutPage.ts
index 8f0373d5..7862c886 100644
--- a/e2e/AboutPage.ts
+++ b/e2e/AboutPage.ts
@@ -35,23 +35,4 @@ export class AboutPage extends TabsetPage {
     await expect(this.page.locator('text=Add new Tabset')).not.toBeVisible()
   }
 
-  async submitNewTabsetDialog(tabsetName: string): Promise<TabsetTestPage> {
-    await this.createFirstTabsetBtn.click()
-    await this.newTabsetName.fill(tabsetName)
-    // await this.newTabsetAutoAdd.uncheck()
-    await this.fillByTestId(this.page, 'newTabsetName', tabsetName)
-    await this.newTabsetNameSubmit.click()
-    return new TabsetTestPage(this.page, this.extensionId)
-  }
-
-  async submitAddUrlDialog(url: string): Promise<TabsetTestPage> {
-    await this.screenshot(this.page, 'addTabset','beforeAddUrl.png');
-    await this.addUrlDialogBtn.click()
-    //await this.page.waitForSelector('text="NEW TAB"')
-    //await this.page.locator('text="NEW TAB"').click()
-    await this.addUrlDialogSubmit.fill(url)
-    await this.screenshot(this.page, 'addTabset','afterAddUrl.png');
-    await this.submitUrlDialogSubmit.click()
-    return new TabsetTestPage(this.page, this.extensionId)
-  }
 }
diff --git a/e2e/PageDefs/SidePanelWelcomePageDefinition.ts b/e2e/PageDefs/SidePanelWelcomePageDefinition.ts
index b40fa780..d191cb08 100644
--- a/e2e/PageDefs/SidePanelWelcomePageDefinition.ts
+++ b/e2e/PageDefs/SidePanelWelcomePageDefinition.ts
@@ -27,25 +27,4 @@ export class SidePanelWelcomePageDefinition extends TabsetPageDefinition {
     //await expect(this.page.locator('text=Add')).not.toBeVisible()
   }
 
-  async submitNewTabsetDialog(tabsetName: string) {
-    console.log("page url 1", this.page.url())
-    await this.newTabsetName.fill(tabsetName)
-    await this.addTabsetSubmitBtn.click()
-    //await delay(2000)
-    console.log(`checking for chrome-extension://${this.extensionId}/www/index.html#/sidepanel`)
-    await this.page.waitForURL("**\/sidepanel**")
-    console.log("page url 2", this.page.url())
-    //return Promise.resolve(new SidePanelPageDefinition(this.page, this.extensionId))
-  }
-
-  // async submitAddUrlDialog(url: string): Promise<TabsetTestPage> {
-  //   await this.screenshot(this.page, 'addTabset','beforeAddUrl.png');
-  //   await this.addUrlDialogBtn.click()
-  //   //await this.page.waitForSelector('text="NEW TAB"')
-  //   //await this.page.locator('text="NEW TAB"').click()
-  //   await this.addUrlDialogSubmit.fill(url)
-  //   await this.screenshot(this.page, 'addTabset','afterAddUrl.png');
-  //   await this.submitUrlDialogSubmit.click()
-  //   return new TabsetTestPage(this.page, this.extensionId)
-  // }
 }
diff --git a/package.json b/package.json
index 51f820cc..10b95fc6 100644
--- a/package.json
+++ b/package.json
@@ -53,6 +53,7 @@
     "@editorjs/editorjs": "^2.30.5",
     "@editorjs/header": "^2.8.7",
     "@extractus/feed-extractor": "^7.1.3",
+    "@he-tree/vue": "^2.8.7",
     "@intlify/unplugin-vue-i18n": "^4.0.0",
     "@quasar/extras": "^1.16.12",
     "@sentry/browser": "^8.32.0",
@@ -93,6 +94,7 @@
     "vue": "^3.5.10",
     "vue-draggable-next": "^2.2.1",
     "vue-grid-layout-v3": "^3.0.3",
+    "vue-highlight-words": "^3.0.1",
     "vue-i18n": "^10.0.3",
     "vue-json-pretty": "^2.4.0",
     "vue-router": "^4.4.3",
diff --git a/src/bookmarks b/src/bookmarks
index 481342af..35a4ae3e 160000
--- a/src/bookmarks
+++ b/src/bookmarks
@@ -1 +1 @@
-Subproject commit 481342afcdb242cf91e1a7c95cc419363e049407
+Subproject commit 35a4ae3ee6de50066c5cd08e0281b862ded05f9d
diff --git a/src/components/TabsAsTree.vue b/src/components/TabsAsTree.vue
index d6247bfd..f0f2f0df 100644
--- a/src/components/TabsAsTree.vue
+++ b/src/components/TabsAsTree.vue
@@ -1,23 +1,51 @@
 <template>
-
-  <q-list class="q-mt-md">
-
-    <!--      v-model:expanded="useNotificationsStore().bookmarksExpanded"-->
-    <q-tree
-      :nodes="tabNodes"
-      node-key="id"
-      selected-color="dark"
-      @mouseenter="entered(true)"
-      @mouseleave="entered(false)"
-      v-model:selected="selected">
-
-      <template v-slot:header-node="prop">
-        <q-icon name="o_folder" class="q-mr-sm"/>
-        <span class="cursor-pointer fit no-wrap">{{ prop.node.label }}</span>
-      </template>
-    </q-tree>
-
-  </q-list>
+  <!-- TabsAsTree -->
+
+  <div class="row q-mt-xs">
+    <div class="col-12 q-mb-xs">
+      <q-input
+        dense
+        autofocus
+        ref="filterRef"
+        filled
+        v-model="filter"
+        label="Filter Urls">
+        <template v-slot:append>
+          <q-icon v-if="filter !== ''" name="clear" class="cursor-pointer" @click="resetFilter"/>
+        </template>
+      </q-input>
+    </div>
+  </div>
+
+  <q-tree v-if="!loading"
+          :nodes="tabNodes"
+          node-key="id"
+          :filter="filter"
+          :filter-method="filterMethod"
+          selected-color="dark"
+          @mouseenter="entered(true)"
+          @mouseleave="entered(false)"
+          v-model:selected="selected">
+
+    <template v-slot:default-header="prop">
+
+      <q-img v-if="prop.node.header === 'root'"
+             class="rounded-borders q-mr-sm"
+             width="20px"
+             height="20px"
+             :src="getFaviconUrl(prop.node)">
+      </q-img>
+
+      <q-icon v-else name="o_folder" class="q-mr-sm"/>
+
+      <Highlighter class="cursor-pointer fit no-wrap my-highlight"
+                   :highlightStyle="{backgroundColor:'yellow'}"
+                   :searchWords="[filter]"
+                   :autoEscape="true"
+                   :textToHighlight="prop.node.label"/>
+    </template>
+  </q-tree>
+  <q-spinner v-else></q-spinner>
 
 </template>
 
@@ -29,10 +57,14 @@ import {useBookmarksStore} from "src/bookmarks/stores/bookmarksStore";
 import {useNotificationsStore} from "src/stores/notificationsStore";
 import {useNotificationHandler} from "src/core/services/ErrorHandler";
 import NavigationService from "src/services/NavigationService";
-import DeleteBookmarkFolderDialog from "src/bookmarks/dialogues/DeleteBookmarkFolderDialog.vue";
 import _ from "lodash"
 import {TreeNode} from "src/bookmarks/models/Tree";
 import {useTabsetsStore} from "src/tabsets/stores/tabsetsStore";
+import Highlighter from 'vue-highlight-words'
+import {useSettingsStore} from "stores/settingsStore";
+import {useUtils} from "src/core/services/Utils";
+
+const {favIconFromUrl} = useUtils()
 
 const $q = useQuasar();
 const localStorage = useQuasar().localStorage
@@ -40,8 +72,11 @@ const localStorage = useQuasar().localStorage
 const mouseHover = ref(false)
 const selected = ref('')
 const deleteButtonId = ref('')
-const nodesToUrl = ref<Map<string, object>>(new Map())
+const nodesToUrl = ref<Map<string, string>>(new Map())
 const bookmarksPermissionGranted = ref<boolean | undefined>(undefined)
+const filterRef = ref(null)
+const filter = ref('')
+const loading = ref(true)
 
 const {handleSuccess, handleError} = useNotificationHandler()
 
@@ -70,22 +105,23 @@ function createNodes(tabs: object[], level = 0): TreeNode[] {
       return (segments && segments.length > level + 1 && segments[level] === name)
     })
     const children: TreeNode[] = createNodes(filteredTabs, level + 1)
-   // console.log("calculated children", children.length)
+    // console.log("calculated children", children.length)
     const newNodeId = uid()
-    let url = t['protocol' as keyof object] + "//" + t['hostname' as keyof object]
+    let url: string = t['protocol' as keyof object] + "//" + t['hostname' as keyof object]
     for (let i = 1; i <= level; i++) {
       url += "/" + t['segments' as keyof object][i]
     }
     children.length === 0 ?
       nodesToUrl.value.set(newNodeId, t['url' as keyof object]) :
       nodesToUrl.value.set(newNodeId, url)
-    const newNode = new TreeNode(newNodeId, name as string, name as string, undefined, "", children)
+    const newNode = new TreeNode(newNodeId, name as string, name as string, url, "", children, level)
     nodes.push(newNode)
   }
   return nodes
 }
 
 watchEffect(() => {
+  loading.value = true
   const tabs: object[] = []
   for (const ts of useTabsetsStore().tabsets.values()) {
     for (const t of ts.tabs) {
@@ -110,8 +146,13 @@ watchEffect(() => {
     }
   }
   const nodes = createNodes(tabs, 0);
-  console.log("nodes", nodes)
   tabNodes.value = JSON.parse(JSON.stringify(nodes))
+  // console.log("v", tabNodes.value)
+  loading.value = false
+})
+
+watchEffect(() => {
+  console.log("loading", loading.value)
 })
 
 watchEffect(() => {
@@ -141,17 +182,47 @@ $q.loadingBar.setDefaults({
   position: 'bottom'
 })
 
-const deleteBookmarksFolderDialog = () => {
-  $q.dialog({
-    component: DeleteBookmarkFolderDialog,
-    componentProps: {
-      folderId: selected.value
-    }
-  })
+const resetFilter = () => {
+  filter.value = ''
+  if (filterRef.value) {
+    // @ts-ignore
+    filterRef.value.focus()
+  }
 }
 
+const filterMethod = (node: TreeNode, filter: any): boolean =>
+  (node.url !== undefined) && (node.url.toLowerCase().indexOf(filter.toLowerCase()) > -1)
+
+
 const entered = (b: boolean) => mouseHover.value = b
 
+const getFaviconUrl = (n: TreeNode) => {
+  // if (!useSettingsStore().isEnabled('noDDG')) {
+  let theUrl = n.url || ''
+  //   let theRealUrl
+  //   try {
+  //     theRealUrl = new URL(theUrl)
+  //   } catch (err) {
+  //     if (!theUrl.startsWith('http')) {
+  //       theUrl = 'https://' + theUrl
+  //       try {
+  //         theRealUrl = new URL(theUrl)
+  //       } catch (err) {
+  //       }
+  //     }
+  //   }
+  //   return theRealUrl ? "https://icons.duckduckgo.com/ip3/" + theRealUrl.hostname + ".ico" : 'favicon-unknown-32x32.png'
+  //}
+
+    //const chromeTab = tab?.chromeTab
+    if (theUrl.startsWith("chrome")) {
+      return ''
+    }
+    if (!useSettingsStore().isEnabled('noDDG')) {
+      return favIconFromUrl(theUrl)
+    }
+    return ''
+}
 </script>
 
 <style lang="sass" scoped>
diff --git a/src/css/app.scss b/src/css/app.scss
index 44675347..9e5e62d9 100644
--- a/src/css/app.scss
+++ b/src/css/app.scss
@@ -142,6 +142,11 @@
   color: black;
 }
 
+::highlight(yellow-highlight) {
+  color: orange;
+  text-decoration: underline;
+}
+
 // for notification (bottom) not to hide the panel footer
 .q-notifications__list {
   margin-bottom: 45px
diff --git a/src/layouts/NotesLayout.vue_ b/src/layouts/NotesLayout.vue_
new file mode 100644
index 00000000..0eb38539
--- /dev/null
+++ b/src/layouts/NotesLayout.vue_
@@ -0,0 +1,78 @@
+<template>
+  <q-layout view="hHh lpR fFf">
+
+    <q-header class="bg-white text-primary">
+      <q-toolbar>
+        <q-btn dense flat round icon="menu" @click="toggleLeftDrawer"/>
+
+        <q-toolbar-title>
+          <q-avatar>
+            <img src="https://cdn.quasar.dev/logo-v2/svg/logo-mono-white.svg">
+          </q-avatar>
+          Notes
+        </q-toolbar-title>
+        <q-btn flat round dense>
+<!--          <q-btn class="cursor-pointer q-mr-md" @click="createSubfolder()"-->
+<!--                 icon="edit" size="sm" label="New Sub-Page"/>-->
+          <q-btn class="cursor-pointer q-mr-md" @click="openInEditMode()"
+                 icon="edit" size="sm"  label="Edit"/>
+<!--          <q-btn class="cursor-pointer q-mr-md" @click="deleteNote()"-->
+<!--                 icon="edit" size="sm"  label="Delete"/>-->
+        </q-btn>
+        <q-icon name="save" @click="saveInPage"/>
+        <q-icon name="save" v-if="savingIndicator" />
+      </q-toolbar>
+    </q-header>
+
+    <q-drawer show-if-above v-model="leftDrawerOpen" side="left" bordered>
+      <!-- drawer content -->
+    </q-drawer>
+
+    <q-page-container>
+      <router-view ref="routerView"/>
+    </q-page-container>
+
+  </q-layout>
+</template>
+
+<script lang="ts" setup>
+import {ref, useTemplateRef, watchEffect} from 'vue'
+import {useRoute, useRouter} from "vue-router";
+import {useUiStore} from "src/ui/stores/uiStore";
+import MainPanelNotePage from "src/notes/pages/mainpanel/MainPanelNotePage.vue";
+
+// https://stackoverflow.com/questions/42632711/how-to-call-function-on-child-component-on-parent-events
+// https://vuejs.org/guide/typescript/composition-api.html#typing-component-template-refs
+type MainPanelNotePageType = InstanceType<typeof MainPanelNotePage>
+
+const compRef = useTemplateRef<MainPanelNotePageType>('routerView')
+
+const route = useRoute()
+const router = useRouter()
+
+const leftDrawerOpen = ref(false)
+const savingIndicator = ref(false)
+const noteId = ref<string | undefined>(undefined)
+const tabsetId = ref<string | undefined>(route.query.tsId as string)
+
+watchEffect(async () => {
+  noteId.value = route.params.noteId as unknown as string
+})
+
+watchEffect(() => {
+  console.log("hier", useUiStore().saving)
+  savingIndicator.value = useUiStore().saving
+})
+
+const saveInPage = () => {
+  console.log("compRef", compRef.value)
+  compRef.value?.save()
+}
+
+const toggleLeftDrawer = () => {
+  leftDrawerOpen.value = !leftDrawerOpen.value
+}
+
+const openInEditMode = () => router.push('./' + noteId.value + '?edit=true&tsId=' + tabsetId.value)
+
+</script>
diff --git a/src/notes b/src/notes
index 641e18cc..c36333c7 160000
--- a/src/notes
+++ b/src/notes
@@ -1 +1 @@
-Subproject commit 641e18cc911e20607b6848247590f728c4cbe41a
+Subproject commit c36333c7cfe0df8fae8a8e1b2d6b83d9ca24f0da
diff --git a/src/opentabs b/src/opentabs
index c598d85a..560ec02f 160000
--- a/src/opentabs
+++ b/src/opentabs
@@ -1 +1 @@
-Subproject commit c598d85a2ebf73357d9f5b56998435d1525cde39
+Subproject commit 560ec02fae3c130ad68c94b1cbcb06426a72edf2
diff --git a/src/pages/sidepanel/SidePanelPageContextMenu.vue b/src/pages/sidepanel/SidePanelPageContextMenu.vue
index a8a99cc0..7a8c19fc 100644
--- a/src/pages/sidepanel/SidePanelPageContextMenu.vue
+++ b/src/pages/sidepanel/SidePanelPageContextMenu.vue
@@ -7,14 +7,14 @@
                        icon="o_note"
                        label="Edit Tabset"/>
 
-<!--      <ContextMenuItem v-close-popup-->
-<!--                       @was-clicked="emits('editHeaderDescription')"-->
-<!--                       icon="o_description"-->
-<!--                       label="Tabset Description..."/>-->
+      <!--      <ContextMenuItem v-close-popup-->
+      <!--                       @was-clicked="emits('editHeaderDescription')"-->
+      <!--                       icon="o_description"-->
+      <!--                       label="Tabset Description..."/>-->
 
       <template v-if="useFeaturesStore().hasFeature(FeatureIdent.TABSET_SUBFOLDER)">
 
-        <q-separator inset />
+        <q-separator inset/>
 
         <ContextMenuItem v-close-popup
                          @was-clicked="createSubfolder(tabset)"
@@ -26,9 +26,9 @@
       <q-separator inset v-if="useTabsetsStore().tabsets.size > 1"/>
 
       <ContextMenuItem v-close-popup
-                       v-if="useFeaturesStore().hasFeature(FeatureIdent.NOTES)"
+                       v-if="showCreateNoteItem()"
                        @was-clicked="startTabsetNote(tabset)"
-                       icon="o_add_circle"
+                       icon="o_description"
                        label="Create Note"/>
 
 
@@ -72,7 +72,7 @@
         <ContextMenuItem v-close-popup
                          @was-clicked="openOverviewPage(tabset.id)"
                          icon="open_in_new"
-                         label="Show Overview"/>
+                         label="Show Gallery"/>
       </template>
 
       <ContextMenuItem v-if="useTabsetsStore().tabsets.size > 6"
@@ -110,14 +110,14 @@
 
       <q-separator inset/>
 
-      <template v-if="useFeaturesStore().hasFeature(FeatureIdent.DEV_MODE)">
-        <ContextMenuItem v-close-popup
-                         @was-clicked="useSearchStore().reindexTabset(tabset.id)"
-                         icon="o_note"
-                         label="Re-Index Search (dev)"/>
+      <!--      <template v-if="useFeaturesStore().hasFeature(FeatureIdent.DEV_MODE)">-->
+      <!--        <ContextMenuItem v-close-popup-->
+      <!--                         @was-clicked="useSearchStore().reindexTabset(tabset.id)"-->
+      <!--                         icon="o_note"-->
+      <!--                         label="Re-Index Search (dev)"/>-->
 
-        <q-separator inset/>
-      </template>
+      <!--        <q-separator inset/>-->
+      <!--      </template>-->
 
       <ContextMenuItem v-close-popup
                        @was-clicked="deleteTabsetDialog(tabset as Tabset)"
@@ -138,11 +138,10 @@
 <script lang="ts" setup>
 
 import {FeatureIdent} from "src/app/models/FeatureIdent";
-import {Tabset, TabsetSharing, TabsetStatus} from "src/tabsets/models/Tabset";
-import {useSearchStore} from "src/search/stores/searchStore";
+import {Tabset, TabsetStatus} from "src/tabsets/models/Tabset";
 import NavigationService from "src/services/NavigationService";
 import EditTabsetDialog from "src/tabsets/dialogues/EditTabsetDialog.vue";
-import {LocalStorage, openURL, useQuasar} from "quasar";
+import {LocalStorage, useQuasar} from "quasar";
 import {useUtils} from "src/core/services/Utils";
 import {useCommandExecutor} from "src/core/services/CommandExecutor";
 import {RestoreTabsetCommand} from "src/tabsets/commands/RestoreTabset";
@@ -150,7 +149,7 @@ import {MarkTabsetAsFavoriteCommand} from "src/tabsets/commands/MarkTabsetAsFavo
 import {MarkTabsetAsDefaultCommand} from "src/tabsets/commands/MarkTabsetAsDefault";
 import DeleteTabsetDialog from "src/tabsets/dialogues/DeleteTabsetDialog.vue";
 import ContextMenuItem from "src/core/components/helper/ContextMenuItem.vue";
-import {PropType} from "vue";
+import {PropType, watchEffect} from "vue";
 import {useTabsetService} from "src/tabsets/services/TabsetService2";
 import {Tab} from "src/tabsets/models/Tab";
 import {MarkTabsetAsArchivedCommand} from "src/tabsets/commands/MarkTabsetAsArchived";
@@ -161,6 +160,7 @@ import NewSubfolderDialog from "src/tabsets/dialogues/NewSubfolderDialog.vue";
 import {useTabsetsStore} from "src/tabsets/stores/tabsetsStore";
 import {useFeaturesStore} from "src/features/stores/featuresStore";
 import {DeleteTabsetCommand} from "src/tabsets/commands/DeleteTabset";
+import {CreateNotebookCommand} from "src/notes/commands/CreateNotebookCommand"
 
 const {inBexMode} = useUtils()
 
@@ -175,12 +175,9 @@ const emits = defineEmits(['editHeaderDescription'])
 
 const publictabsetsPath = "https://public.tabsets.net/tabsets/"
 
-const startTabsetNote = (tabset: Tabset) => {
-  const url = chrome && chrome.runtime && chrome.runtime.getURL ?
-    chrome.runtime.getURL('www/index.html') + "#/mainpanel/notes/?tsId=" + tabset.id + "&edit=true" :
-    "#/mainpanel/notes/?tsId=" + tabset.id + "&edit=true"
-  NavigationService.openOrCreateTab([url])
-}
+const startTabsetNote = (tabset: Tabset) =>
+  useCommandExecutor().executeFromUi(new CreateNotebookCommand(tabset))
+
 
 const createSubfolder = (tabset: Tabset) => {
   $q.dialog({
@@ -253,6 +250,10 @@ const pin = (tabset: Tabset) =>
 const unpin = (tabset: Tabset) =>
   useCommandExecutor().executeFromUi(new MarkTabsetAsDefaultCommand(tabset.id))
 
+const showCreateNoteItem = () =>
+  useFeaturesStore().hasFeature(FeatureIdent.NOTES)
+
+
 const getPublicTabsetLink = (ts: Tabset) => {
   let image = "https://tabsets.web.app/favicon.ico"
   if (ts && ts.sharedId) {
@@ -274,7 +275,7 @@ const changeWindow = (tabset: Tabset, window: string) => {
   useTabsetService().saveTabset(tabset)
 }
 
-const deleteTabsetDialog = (tabset: Tabset):void => {
+const deleteTabsetDialog = (tabset: Tabset): void => {
   if (tabset.tabs.length === 0) {
     useCommandExecutor().executeFromUi(new DeleteTabsetCommand(tabset.id))
     return
@@ -284,7 +285,7 @@ const deleteTabsetDialog = (tabset: Tabset):void => {
     componentProps: {
       tabsetId: tabset.id,
       tabsetName: tabset.name,
-      tabsCount: tabsets.tabs.length
+      tabsCount: tabset.tabs.length
     }
   })
 }
diff --git a/src/pages/sidepanel/SidePanelTabsAsTreePage.vue b/src/pages/sidepanel/SidePanelTabsAsTreePage.vue
index a28ba527..e105fed0 100644
--- a/src/pages/sidepanel/SidePanelTabsAsTreePage.vue
+++ b/src/pages/sidepanel/SidePanelTabsAsTreePage.vue
@@ -44,6 +44,7 @@ import ToolbarButton from "src/core/components/SidePanelToolbarButton.vue";
 import SidePanelToolbarTabNavigationHelper from "src/opentabs/pages/SidePanelToolbarTabNavigationHelper.vue";
 import SidePanelToolbarButton from "src/core/components/SidePanelToolbarButton.vue";
 import TabsAsTree from "components/TabsAsTree.vue";
+import {SidePanelViews} from "src/models/SidePanelViews";
 
 onMounted(() => {
   Analytics.firePageViewEvent('SidePanelTabsAsTreePage', document.location.href);
diff --git a/src/router/routes.ts b/src/router/routes.ts
index d8b7a657..c9a84c94 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -130,12 +130,12 @@ const routes: RouteRecordRaw[] = [
     children: [{path: '', component: () => import('src/features/pages/FeaturesPage.vue')}],
   },
   {
-    path: '/mainpanel/notes/:noteId/edit', // editorjs setup cannot toggle between readonly/write mode
+    path: '/mainpanel/notes/:notebookId',
     component: () => import('layouts/PlainLayout.vue'),
     children: [{path: '', component: () => import('src/notes/pages/mainpanel/MainPanelNotePage.vue')}],
   },
   {
-    path: '/mainpanel/notes/:noteId',
+    path: '/mainpanel/notes/:notebookId/:subNoteId',
     component: () => import('layouts/PlainLayout.vue'),
     children: [{path: '', component: () => import('src/notes/pages/mainpanel/MainPanelNotePage.vue')}],
   },
diff --git a/src/tabsets b/src/tabsets
index c0c88bc6..ff16fc74 160000
--- a/src/tabsets
+++ b/src/tabsets
@@ -1 +1 @@
-Subproject commit c0c88bc6fc264807f66b54de79476e0e9470fbfd
+Subproject commit ff16fc7462ad0d9857073e4fbc9b800cfb4510d3
diff --git a/src/ui b/src/ui
index 84034292..03f2c8fe 160000
--- a/src/ui
+++ b/src/ui
@@ -1 +1 @@
-Subproject commit 84034292455993aa92bd333b3eac39e84dbbb0e6
+Subproject commit 03f2c8fedeec26b2bf6774f34d212845a26e8cf1
diff --git a/yarn.lock b/yarn.lock
index 98d4adf5..25404e72 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1128,6 +1128,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.7.7":
+  version "7.25.7"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.25.7.tgz#7ffb53c37a8f247c8c4d335e89cdf16a2e0d0fb6"
+  integrity sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.24.7", "@babel/template@^7.25.0":
   version "7.25.0"
   resolved "https://registry.yarnpkg.com/@babel/template/-/template-7.25.0.tgz#e733dc3134b4fede528c15bc95e89cb98c52592a"
@@ -1737,6 +1744,35 @@
     fast-xml-parser "^4.3.6"
     html-entities "^2.5.2"
 
+"@he-tree/dnd-utils@^0.1.0-alpha.4":
+  version "0.1.0-alpha.4"
+  resolved "https://registry.yarnpkg.com/@he-tree/dnd-utils/-/dnd-utils-0.1.0-alpha.4.tgz#7438684dba7b69abc5f8b1aa386a910d9091cf7a"
+  integrity sha512-DuxkFOQ8eztoHrX1/VelqOnQphQbRszemfMKSKlAEEhVjqR/IkaOE2QSRlAdj6OC6AfMvHDPvIZOiEPFwP6/ZQ==
+  dependencies:
+    "@babel/runtime" "^7.7.7"
+    drag-event-service "^2.0.0"
+    helper-js "^3.1.2"
+
+"@he-tree/tree-utils@^0.1.0-alpha.6":
+  version "0.1.0-alpha.6"
+  resolved "https://registry.yarnpkg.com/@he-tree/tree-utils/-/tree-utils-0.1.0-alpha.6.tgz#fd42b54bd4eca5a0f64c17dedd4339c36776be97"
+  integrity sha512-TIH1iIRLpn3sjd4EuIfKQzFd6ToY8GLYk3i5bfK1njCW7lBBDHLqSyK0mlJPbCPk4PfkZBC4K+sMcYyH4hokyg==
+  dependencies:
+    "@babel/runtime" "^7.7.7"
+    drag-event-service "^2.0.0"
+    helper-js "^3.1.2"
+
+"@he-tree/vue@^2.8.7":
+  version "2.8.7"
+  resolved "https://registry.yarnpkg.com/@he-tree/vue/-/vue-2.8.7.tgz#5aa54157222d9dae883adba9088d7931e5b7fbfa"
+  integrity sha512-Ii6lRTtj7F9wylCZ23H001ucVGgtOrHmmLB3LA8KY4LolmCNwHb8VOnfRSMnk5JccoQuYLPIFAEnRdFbqzdFSA==
+  dependencies:
+    "@he-tree/dnd-utils" "^0.1.0-alpha.4"
+    "@he-tree/tree-utils" "^0.1.0-alpha.6"
+    "@virtual-list/vue" "^1.2.0"
+    helper-js "^3.1.2"
+    vue-demi latest
+
 "@iconify/types@^2.0.0":
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/@iconify/types/-/types-2.0.0.tgz#ab0e9ea681d6c8a1214f30cd741fe3a20cc57f57"
@@ -3300,6 +3336,14 @@
   resolved "https://registry.yarnpkg.com/@ungap/structured-clone/-/structured-clone-1.2.0.tgz#756641adb587851b5ccb3e095daf27ae581c8406"
   integrity sha512-zuVdFrMJiuCDQUMCzQaD6KL28MjnqqN8XnAqiEq9PNm/hCPTSGfrXCOfwj1ow4LFb/tNymJPwsNbVePc1xFqrQ==
 
+"@virtual-list/vue@^1.2.0":
+  version "1.2.0"
+  resolved "https://registry.yarnpkg.com/@virtual-list/vue/-/vue-1.2.0.tgz#f0e1f6a5b97034e047b5812afb7d3c40838a894f"
+  integrity sha512-sTWCJAIU6NoRWU+6Nzw6TDJcwxnFgK3NmwGu4iDgV6Nhh/iaCEZDDhmChTV+CoXbShLfsgasQRhaVyC7SmkDDg==
+  dependencies:
+    helper-js "^3.1.0"
+    vue-demi latest
+
 "@vitejs/plugin-vue@^2.2.0":
   version "2.3.4"
   resolved "https://registry.yarnpkg.com/@vitejs/plugin-vue/-/plugin-vue-2.3.4.tgz#966a6279060eb2d9d1a02ea1a331af071afdcf9e"
@@ -5739,6 +5783,14 @@ dotenv@^16.3.1, dotenv@^16.4.5:
   resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-16.4.5.tgz#cdd3b3b604cb327e286b4762e13502f717cb099f"
   integrity sha512-ZmdL2rui+eB2YwhsWzjInR8LldtZHGDoQ1ugH85ppHKwpUHL7j7rN0Ti9NCnGiQbhaZ11FpR+7ao1dNsmduNUg==
 
+drag-event-service@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/drag-event-service/-/drag-event-service-2.0.0.tgz#7e9fd5beacdf9c3e7c502c717164a4fc284a696f"
+  integrity sha512-JVEnOEbbNDS3RrWd+tVVIDu2SHQZ9luhEFGSQ1hXMjl+ABw0PxhHmnkGjzPVE836Tsg+k7rkm5GM9Ln/UgbYpA==
+  dependencies:
+    "@babel/runtime" "^7.7.7"
+    helper-js "^3.0.0"
+
 eastasianwidth@^0.2.0:
   version "0.2.0"
   resolved "https://registry.yarnpkg.com/eastasianwidth/-/eastasianwidth-0.2.0.tgz#696ce2ec0aa0e6ea93a397ffcf24aa7840c827cb"
@@ -7243,6 +7295,18 @@ hast-util-whitespace@^3.0.0:
   dependencies:
     "@types/hast" "^3.0.0"
 
+helper-js@^3.0.0, helper-js@^3.1.0, helper-js@^3.1.2:
+  version "3.1.5"
+  resolved "https://registry.yarnpkg.com/helper-js/-/helper-js-3.1.5.tgz#ab81bbe99bd9807d00a9293060354c150707c2f2"
+  integrity sha512-CQ56onWqmWwJRUK55/aJ6EeJUV/eqoRiayG6bk2i0Bhs79U94M+aRdA2QLOUGXp/Hy5yAos+YQK1LQHRWiSOHw==
+  dependencies:
+    "@babel/runtime" "^7.7.7"
+
+highlight-words-core@^1.2.2:
+  version "1.2.3"
+  resolved "https://registry.yarnpkg.com/highlight-words-core/-/highlight-words-core-1.2.3.tgz#781f37b2a220bf998114e4ef8c8cb6c7a4802ea8"
+  integrity sha512-m1O9HW3/GNHxzSIXWw1wCNXXsgLlxrP0OI6+ycGUhiUHkikqW3OrwVHz+lxeNBe5yqLESdIcj8PowHQ2zLvUvQ==
+
 hookable@^5.5.3:
   version "5.5.3"
   resolved "https://registry.yarnpkg.com/hookable/-/hookable-5.5.3.tgz#6cfc358984a1ef991e2518cb9ed4a778bbd3215d"
@@ -11630,7 +11694,7 @@ vue-component-type-helpers@^2.0.0:
   resolved "https://registry.yarnpkg.com/vue-component-type-helpers/-/vue-component-type-helpers-2.1.6.tgz#f350515b252ed9e76960ac51f135636f8baef3fe"
   integrity sha512-ng11B8B/ZADUMMOsRbqv0arc442q7lifSubD0v8oDXIFoMg/mXwAPUunrroIDkY+mcD0dHKccdaznSVp8EoX3w==
 
-vue-demi@>=0.14.10, vue-demi@^0.14.10:
+vue-demi@>=0.14.10, vue-demi@^0.14.10, vue-demi@latest:
   version "0.14.10"
   resolved "https://registry.yarnpkg.com/vue-demi/-/vue-demi-0.14.10.tgz#afc78de3d6f9e11bf78c55e8510ee12814522f04"
   integrity sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==
@@ -11655,6 +11719,13 @@ vue-grid-layout-v3@^3.0.3:
     element-resize-detector "^1.2.4"
     mitt "^3.0.0"
 
+vue-highlight-words@^3.0.1:
+  version "3.0.1"
+  resolved "https://registry.yarnpkg.com/vue-highlight-words/-/vue-highlight-words-3.0.1.tgz#530b490ea09528b7595bd3946f25d0cb07383175"
+  integrity sha512-t6L0+KRaMzX5RVubWl6Sog+Aa+U0kHsbUlDIrln1VfajR2SEg+zQYfXov8UmX3MLNOfd6cv7MCM6LclqNlW4ww==
+  dependencies:
+    highlight-words-core "^1.2.2"
+
 vue-i18n@^10.0.3:
   version "10.0.3"
   resolved "https://registry.yarnpkg.com/vue-i18n/-/vue-i18n-10.0.3.tgz#059b557aeed776a1a72f24ad1e9dfdb67c66d6d4"