diff --git a/auto-imports.d.ts b/auto-imports.d.ts
new file mode 100644
index 0000000..e8959eb
--- /dev/null
+++ b/auto-imports.d.ts
@@ -0,0 +1,63 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-auto-import
+export {}
+declare global {
+  const EffectScope: typeof import('vue')['EffectScope']
+  const computed: typeof import('vue')['computed']
+  const createApp: typeof import('vue')['createApp']
+  const customRef: typeof import('vue')['customRef']
+  const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
+  const defineComponent: typeof import('vue')['defineComponent']
+  const effectScope: typeof import('vue')['effectScope']
+  const getCurrentInstance: typeof import('vue')['getCurrentInstance']
+  const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const h: typeof import('vue')['h']
+  const inject: typeof import('vue')['inject']
+  const isProxy: typeof import('vue')['isProxy']
+  const isReactive: typeof import('vue')['isReactive']
+  const isReadonly: typeof import('vue')['isReadonly']
+  const isRef: typeof import('vue')['isRef']
+  const markRaw: typeof import('vue')['markRaw']
+  const nextTick: typeof import('vue')['nextTick']
+  const onActivated: typeof import('vue')['onActivated']
+  const onBeforeMount: typeof import('vue')['onBeforeMount']
+  const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']
+  const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']
+  const onDeactivated: typeof import('vue')['onDeactivated']
+  const onErrorCaptured: typeof import('vue')['onErrorCaptured']
+  const onMounted: typeof import('vue')['onMounted']
+  const onRenderTracked: typeof import('vue')['onRenderTracked']
+  const onRenderTriggered: typeof import('vue')['onRenderTriggered']
+  const onScopeDispose: typeof import('vue')['onScopeDispose']
+  const onServerPrefetch: typeof import('vue')['onServerPrefetch']
+  const onUnmounted: typeof import('vue')['onUnmounted']
+  const onUpdated: typeof import('vue')['onUpdated']
+  const provide: typeof import('vue')['provide']
+  const reactive: typeof import('vue')['reactive']
+  const readonly: typeof import('vue')['readonly']
+  const ref: typeof import('vue')['ref']
+  const resolveComponent: typeof import('vue')['resolveComponent']
+  const shallowReactive: typeof import('vue')['shallowReactive']
+  const shallowReadonly: typeof import('vue')['shallowReadonly']
+  const shallowRef: typeof import('vue')['shallowRef']
+  const toRaw: typeof import('vue')['toRaw']
+  const toRef: typeof import('vue')['toRef']
+  const toRefs: typeof import('vue')['toRefs']
+  const triggerRef: typeof import('vue')['triggerRef']
+  const unref: typeof import('vue')['unref']
+  const useAttrs: typeof import('vue')['useAttrs']
+  const useCssModule: typeof import('vue')['useCssModule']
+  const useCssVars: typeof import('vue')['useCssVars']
+  const useSlots: typeof import('vue')['useSlots']
+  const watch: typeof import('vue')['watch']
+  const watchEffect: typeof import('vue')['watchEffect']
+  const watchPostEffect: typeof import('vue')['watchPostEffect']
+  const watchSyncEffect: typeof import('vue')['watchSyncEffect']
+}
+// for type re-export
+declare global {
+  // @ts-ignore
+  export type { Component, ComponentPublicInstance, ComputedRef, InjectionKey, PropType, Ref, VNode } from 'vue'
+}
diff --git a/components.d.ts b/components.d.ts
new file mode 100644
index 0000000..196b328
--- /dev/null
+++ b/components.d.ts
@@ -0,0 +1,26 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
+// Read more: https://github.com/vuejs/core/pull/3399
+import '@vue/runtime-core'
+
+export {}
+
+declare module '@vue/runtime-core' {
+  export interface GlobalComponents {
+    Autocomplete: typeof import('./src/components/Autocomplete.vue')['default']
+    Hamburger: typeof import('./src/components/Hamburger.vue')['default']
+    Logo: typeof import('./src/components/Logo.vue')['default']
+    Modal: typeof import('./src/components/Modal.vue')['default']
+    Note: typeof import('./src/components/Note.vue')['default']
+    NoteEditor: typeof import('./src/components/Note/NoteEditor.vue')['default']
+    NoteToolbar: typeof import('./src/components/Note/NoteToolbar.vue')['default']
+    SearchBar: typeof import('./src/components/Search/SearchBar.vue')['default']
+    SearchResult: typeof import('./src/components/Search/SearchResult.vue')['default']
+    SideBar: typeof import('./src/components/SideBar.vue')['default']
+    SideBarMenu: typeof import('./src/components/SideBar/SideBarMenu.vue')['default']
+    SideBarMenuItem: typeof import('./src/components/SideBar/SideBarMenuItem.vue')['default']
+    TopBar: typeof import('./src/components/TopBar.vue')['default']
+  }
+}
diff --git a/package-lock.json b/package-lock.json
index d804c20..f1fbc02 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -45,6 +45,8 @@
         "sass": "^1.62.1",
         "tailwindcss": "^3.3.2",
         "typescript": "^5.0.2",
+        "unplugin-auto-import": "^0.15.3",
+        "unplugin-vue-components": "^0.24.1",
         "vite": "^4.3.5",
         "vue-tsc": "^1.6.4"
       }
@@ -60,6 +62,15 @@
         "url": "https://github.com/sponsors/sindresorhus"
       }
     },
+    "node_modules/@antfu/utils": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.2.tgz",
+      "integrity": "sha512-vy9fM3pIxZmX07dL+VX1aZe7ynZ+YyB0jY+jE6r3hOK6GNY2t6W8rzpFC4tgpbXUYABkFQwgJq2XYXlxbXAI0g==",
+      "dev": true,
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@babel/parser": {
       "version": "7.21.4",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
@@ -1455,6 +1466,28 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
+    "node_modules/@rollup/pluginutils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "dev": true,
+      "dependencies": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      },
+      "engines": {
+        "node": ">=14.0.0"
+      },
+      "peerDependencies": {
+        "rollup": "^1.20.0||^2.0.0||^3.0.0"
+      },
+      "peerDependenciesMeta": {
+        "rollup": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/@types/dompurify": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.2.tgz",
@@ -1464,6 +1497,12 @@
         "@types/trusted-types": "*"
       }
     },
+    "node_modules/@types/estree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
+      "dev": true
+    },
     "node_modules/@types/lodash": {
       "version": "4.14.194",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.194.tgz",
@@ -1842,6 +1881,18 @@
         }
       }
     },
+    "node_modules/acorn": {
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "dev": true,
+      "bin": {
+        "acorn": "bin/acorn"
+      },
+      "engines": {
+        "node": ">=0.4.0"
+      }
+    },
     "node_modules/ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -2177,6 +2228,23 @@
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true
     },
+    "node_modules/debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "dependencies": {
+        "ms": "2.1.2"
+      },
+      "engines": {
+        "node": ">=6.0"
+      },
+      "peerDependenciesMeta": {
+        "supports-color": {
+          "optional": true
+        }
+      }
+    },
     "node_modules/didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -2247,6 +2315,18 @@
         "node": ">=6"
       }
     },
+    "node_modules/escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true,
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/sindresorhus"
+      }
+    },
     "node_modules/estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -2553,6 +2633,12 @@
         "jiti": "bin/jiti.js"
       }
     },
+    "node_modules/jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "dev": true
+    },
     "node_modules/lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -2566,6 +2652,18 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "node_modules/local-pkg": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
+      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "dev": true,
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
@@ -2650,6 +2748,24 @@
         "url": "https://github.com/sponsors/isaacs"
       }
     },
+    "node_modules/mlly": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.2.1.tgz",
+      "integrity": "sha512-1aMEByaWgBPEbWV2BOPEMySRrzl7rIHXmQxam4DM8jVjalTQDjpN2ZKOLUrwyhfZQO7IXHml2StcHMhooDeEEQ==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.2",
+        "pathe": "^1.1.0",
+        "pkg-types": "^1.0.3",
+        "ufo": "^1.1.2"
+      }
+    },
+    "node_modules/ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
     "node_modules/muggle-string": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.2.2.tgz",
@@ -2760,6 +2876,12 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
+    "node_modules/pathe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.0.tgz",
+      "integrity": "sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==",
+      "dev": true
+    },
     "node_modules/picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -2792,6 +2914,17 @@
         "node": ">= 6"
       }
     },
+    "node_modules/pkg-types": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
+      "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+      "dev": true,
+      "dependencies": {
+        "jsonc-parser": "^3.2.0",
+        "mlly": "^1.2.0",
+        "pathe": "^1.1.0"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.23",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
@@ -3226,6 +3359,12 @@
         "node": ">=14.0.0"
       }
     },
+    "node_modules/scule": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.0.0.tgz",
+      "integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
+      "dev": true
+    },
     "node_modules/semver": {
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
@@ -3294,6 +3433,18 @@
         "node": ">=8"
       }
     },
+    "node_modules/strip-literal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.1.tgz",
+      "integrity": "sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.2"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/sucrase": {
       "version": "3.32.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
@@ -3447,6 +3598,128 @@
         "node": ">=12.20"
       }
     },
+    "node_modules/ufo": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.1.2.tgz",
+      "integrity": "sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==",
+      "dev": true
+    },
+    "node_modules/unimport": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.0.6.tgz",
+      "integrity": "sha512-GYxGJ1Bri1oqx8VFDjdgooGzeK7jBk3bvhXmamTIpu3nONOcUMGwZbX7X0L5RA7OWMXpR4vzpSQP7pXUzJg1/Q==",
+      "dev": true,
+      "dependencies": {
+        "@rollup/pluginutils": "^5.0.2",
+        "escape-string-regexp": "^5.0.0",
+        "fast-glob": "^3.2.12",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.0",
+        "mlly": "^1.2.0",
+        "pathe": "^1.1.0",
+        "pkg-types": "^1.0.2",
+        "scule": "^1.0.0",
+        "strip-literal": "^1.0.1",
+        "unplugin": "^1.3.1"
+      }
+    },
+    "node_modules/unplugin": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.3.1.tgz",
+      "integrity": "sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==",
+      "dev": true,
+      "dependencies": {
+        "acorn": "^8.8.2",
+        "chokidar": "^3.5.3",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.5.0"
+      }
+    },
+    "node_modules/unplugin-auto-import": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-0.15.3.tgz",
+      "integrity": "sha512-RLT8SqbPn4bT7yBshZId0uPSofKWnwr66RyDaxWaFb/+f7OTDOWAsVNz+hOQLBWSjvbekr2xZY9ccS8TDHJbCQ==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.7.2",
+        "@rollup/pluginutils": "^5.0.2",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.0",
+        "minimatch": "^9.0.0",
+        "unimport": "^3.0.6",
+        "unplugin": "^1.3.1"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@nuxt/kit": "^3.2.2",
+        "@vueuse/core": "*"
+      },
+      "peerDependenciesMeta": {
+        "@nuxt/kit": {
+          "optional": true
+        },
+        "@vueuse/core": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-components": {
+      "version": "0.24.1",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.24.1.tgz",
+      "integrity": "sha512-T3A8HkZoIE1Cja95xNqolwza0yD5IVlgZZ1PVAGvVCx8xthmjsv38xWRCtHtwl+rvZyL9uif42SRkDGw9aCfMA==",
+      "dev": true,
+      "dependencies": {
+        "@antfu/utils": "^0.7.2",
+        "@rollup/pluginutils": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.2.12",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.0",
+        "minimatch": "^7.4.2",
+        "resolve": "^1.22.1",
+        "unplugin": "^1.1.0"
+      },
+      "engines": {
+        "node": ">=14"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      },
+      "peerDependencies": {
+        "@babel/parser": "^7.15.8",
+        "@nuxt/kit": "^3.2.2",
+        "vue": "2 || 3"
+      },
+      "peerDependenciesMeta": {
+        "@babel/parser": {
+          "optional": true
+        },
+        "@nuxt/kit": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/unplugin-vue-components/node_modules/minimatch": {
+      "version": "7.4.6",
+      "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
+      "integrity": "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==",
+      "dev": true,
+      "dependencies": {
+        "brace-expansion": "^2.0.1"
+      },
+      "engines": {
+        "node": ">=10"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/isaacs"
+      }
+    },
     "node_modules/update-browserslist-db": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
@@ -3573,6 +3846,21 @@
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
+    "node_modules/webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "dev": true,
+      "engines": {
+        "node": ">=10.13.0"
+      }
+    },
+    "node_modules/webpack-virtual-modules": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
+      "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
+      "dev": true
+    },
     "node_modules/websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
@@ -3678,6 +3966,12 @@
       "resolved": "https://registry.npmjs.org/@alloc/quick-lru/-/quick-lru-5.2.0.tgz",
       "integrity": "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="
     },
+    "@antfu/utils": {
+      "version": "0.7.2",
+      "resolved": "https://registry.npmjs.org/@antfu/utils/-/utils-0.7.2.tgz",
+      "integrity": "sha512-vy9fM3pIxZmX07dL+VX1aZe7ynZ+YyB0jY+jE6r3hOK6GNY2t6W8rzpFC4tgpbXUYABkFQwgJq2XYXlxbXAI0g==",
+      "dev": true
+    },
     "@babel/parser": {
       "version": "7.21.4",
       "resolved": "https://registry.npmjs.org/@babel/parser/-/parser-7.21.4.tgz",
@@ -4659,6 +4953,17 @@
       "resolved": "https://registry.npmjs.org/@protobufjs/utf8/-/utf8-1.1.0.tgz",
       "integrity": "sha512-Vvn3zZrhQZkkBE8LSuW3em98c0FwgO4nxzv6OdSxPKJIEKY2bGbHn+mhGIPerzI4twdxaP8/0+06HBpwf345Lw=="
     },
+    "@rollup/pluginutils": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/@rollup/pluginutils/-/pluginutils-5.0.2.tgz",
+      "integrity": "sha512-pTd9rIsP92h+B6wWwFbW8RkZv4hiR/xKsqre4SIuAOaOEQRxi0lqLke9k2/7WegC85GgUs9pjmOjCUi3In4vwA==",
+      "dev": true,
+      "requires": {
+        "@types/estree": "^1.0.0",
+        "estree-walker": "^2.0.2",
+        "picomatch": "^2.3.1"
+      }
+    },
     "@types/dompurify": {
       "version": "3.0.2",
       "resolved": "https://registry.npmjs.org/@types/dompurify/-/dompurify-3.0.2.tgz",
@@ -4668,6 +4973,12 @@
         "@types/trusted-types": "*"
       }
     },
+    "@types/estree": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/@types/estree/-/estree-1.0.1.tgz",
+      "integrity": "sha512-LG4opVs2ANWZ1TJoKc937iMmNstM/d0ae1vNbnBvBhqCSezgVUOzcLCqbI5elV8Vy6WKwKjaqR+zO9VKirBBCA==",
+      "dev": true
+    },
     "@types/lodash": {
       "version": "4.14.194",
       "resolved": "https://registry.npmjs.org/@types/lodash/-/lodash-4.14.194.tgz",
@@ -4962,6 +5273,12 @@
         }
       }
     },
+    "acorn": {
+      "version": "8.8.2",
+      "resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.2.tgz",
+      "integrity": "sha512-xjIYgE8HBrkpd/sJqOGNspf8uHG+NOHGOw6a/Urj8taM2EXfdNAH2oFcPeIFfsv3+kz/mJrS5VuMqbNLjCa2vw==",
+      "dev": true
+    },
     "ansi-regex": {
       "version": "5.0.1",
       "resolved": "https://registry.npmjs.org/ansi-regex/-/ansi-regex-5.0.1.tgz",
@@ -5182,6 +5499,15 @@
       "integrity": "sha512-e/1zu3xH5MQryN2zdVaF0OrdNLUbvWxzMbi+iNA6Bky7l1RoP8a2fIbRocyHclXt/arDrrR6lL3TqFD9pMQTsg==",
       "dev": true
     },
+    "debug": {
+      "version": "4.3.4",
+      "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
+      "integrity": "sha512-PRWFHuSU3eDtQJPvnNY7Jcket1j0t5OuOsFzPPzsekD52Zl8qUfFIPEiswXqIvHWGVHOgX+7G/vCNNhehwxfkQ==",
+      "dev": true,
+      "requires": {
+        "ms": "2.1.2"
+      }
+    },
     "didyoumean": {
       "version": "1.2.2",
       "resolved": "https://registry.npmjs.org/didyoumean/-/didyoumean-1.2.2.tgz",
@@ -5242,6 +5568,12 @@
       "resolved": "https://registry.npmjs.org/escalade/-/escalade-3.1.1.tgz",
       "integrity": "sha512-k0er2gUkLf8O0zKJiAhmkTnJlTvINGv7ygDNPbeIsX/TJjGJZHuh9B2UxbsaEkmlEo9MfhrSzmhIlhRlI2GXnw=="
     },
+    "escape-string-regexp": {
+      "version": "5.0.0",
+      "resolved": "https://registry.npmjs.org/escape-string-regexp/-/escape-string-regexp-5.0.0.tgz",
+      "integrity": "sha512-/veY75JbMK4j1yjvuUxuVsiS/hr/4iHs9FTT6cgTexxdE0Ly/glccBAkloH/DofkjRbZU3bnoj38mOmhkZ0lHw==",
+      "dev": true
+    },
     "estree-walker": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/estree-walker/-/estree-walker-2.0.2.tgz",
@@ -5485,6 +5817,12 @@
       "resolved": "https://registry.npmjs.org/jiti/-/jiti-1.18.2.tgz",
       "integrity": "sha512-QAdOptna2NYiSSpv0O/BwoHBSmz4YhpzJHyi+fnMRTXFjp7B8i/YG5Z8IfusxB1ufjcD2Sre1F3R+nX3fvy7gg=="
     },
+    "jsonc-parser": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/jsonc-parser/-/jsonc-parser-3.2.0.tgz",
+      "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==",
+      "dev": true
+    },
     "lilconfig": {
       "version": "2.1.0",
       "resolved": "https://registry.npmjs.org/lilconfig/-/lilconfig-2.1.0.tgz",
@@ -5495,6 +5833,12 @@
       "resolved": "https://registry.npmjs.org/lines-and-columns/-/lines-and-columns-1.2.4.tgz",
       "integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg=="
     },
+    "local-pkg": {
+      "version": "0.4.3",
+      "resolved": "https://registry.npmjs.org/local-pkg/-/local-pkg-0.4.3.tgz",
+      "integrity": "sha512-SFppqq5p42fe2qcZQqqEOiVRXl+WCP1MdT6k7BDEW1j++sp5fIY+/fdRQitvKgB5BrBcmrs5m/L0v2FrU5MY1g==",
+      "dev": true
+    },
     "lodash-es": {
       "version": "4.17.21",
       "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz",
@@ -5555,6 +5899,24 @@
         "brace-expansion": "^2.0.1"
       }
     },
+    "mlly": {
+      "version": "1.2.1",
+      "resolved": "https://registry.npmjs.org/mlly/-/mlly-1.2.1.tgz",
+      "integrity": "sha512-1aMEByaWgBPEbWV2BOPEMySRrzl7rIHXmQxam4DM8jVjalTQDjpN2ZKOLUrwyhfZQO7IXHml2StcHMhooDeEEQ==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.8.2",
+        "pathe": "^1.1.0",
+        "pkg-types": "^1.0.3",
+        "ufo": "^1.1.2"
+      }
+    },
+    "ms": {
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/ms/-/ms-2.1.2.tgz",
+      "integrity": "sha512-sGkPx+VjMtmA6MX27oA4FBFELFCZZ4S4XqeGOXCv68tT+jb3vk/RyaKWP0PTKyWtmLSM0b+adUTEvbs1PEaH2w==",
+      "dev": true
+    },
     "muggle-string": {
       "version": "0.2.2",
       "resolved": "https://registry.npmjs.org/muggle-string/-/muggle-string-0.2.2.tgz",
@@ -5627,6 +5989,12 @@
       "resolved": "https://registry.npmjs.org/path-parse/-/path-parse-1.0.7.tgz",
       "integrity": "sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw=="
     },
+    "pathe": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/pathe/-/pathe-1.1.0.tgz",
+      "integrity": "sha512-ODbEPR0KKHqECXW1GoxdDb+AZvULmXjVPy4rt+pGo2+TnjJTIPJQSVS6N63n8T2Ip+syHhbn52OewKicV0373w==",
+      "dev": true
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-1.0.0.tgz",
@@ -5647,6 +6015,17 @@
       "resolved": "https://registry.npmjs.org/pirates/-/pirates-4.0.5.tgz",
       "integrity": "sha512-8V9+HQPupnaXMA23c5hvl69zXvTwTzyAYasnkb0Tts4XvO4CliqONMOnvlq26rkhLC3nWDFBJf73LU1e1VZLaQ=="
     },
+    "pkg-types": {
+      "version": "1.0.3",
+      "resolved": "https://registry.npmjs.org/pkg-types/-/pkg-types-1.0.3.tgz",
+      "integrity": "sha512-nN7pYi0AQqJnoLPC9eHFQ8AcyaixBUOwvqc5TDnIKCMEE6I0y8P7OKA7fPexsXGCGxQDl/cmrLAp26LhcwxZ4A==",
+      "dev": true,
+      "requires": {
+        "jsonc-parser": "^3.2.0",
+        "mlly": "^1.2.0",
+        "pathe": "^1.1.0"
+      }
+    },
     "postcss": {
       "version": "8.4.23",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.23.tgz",
@@ -5839,6 +6218,12 @@
         "source-map-js": ">=0.6.2 <2.0.0"
       }
     },
+    "scule": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/scule/-/scule-1.0.0.tgz",
+      "integrity": "sha512-4AsO/FrViE/iDNEPaAQlb77tf0csuq27EsVpy6ett584EcRTp6pTDLoGWVxCD77y5iU5FauOvhsI4o1APwPoSQ==",
+      "dev": true
+    },
     "semver": {
       "version": "7.5.0",
       "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.0.tgz",
@@ -5894,6 +6279,15 @@
         "ansi-regex": "^5.0.1"
       }
     },
+    "strip-literal": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/strip-literal/-/strip-literal-1.0.1.tgz",
+      "integrity": "sha512-QZTsipNpa2Ppr6v1AmJHESqJ3Uz247MUS0OjrnnZjFAvEoWqxuyFuXn2xLgMtRnijJShAa1HL0gtJyUs7u7n3Q==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.8.2"
+      }
+    },
     "sucrase": {
       "version": "3.32.0",
       "resolved": "https://registry.npmjs.org/sucrase/-/sucrase-3.32.0.tgz",
@@ -6004,6 +6398,87 @@
       "integrity": "sha512-cW9T5W9xY37cc+jfEnaUvX91foxtHkza3Nw3wkoF4sSlKn0MONdkdEndig/qPBWXNkmplh3NzayQzCiHM4/hqw==",
       "dev": true
     },
+    "ufo": {
+      "version": "1.1.2",
+      "resolved": "https://registry.npmjs.org/ufo/-/ufo-1.1.2.tgz",
+      "integrity": "sha512-TrY6DsjTQQgyS3E3dBaOXf0TpPD8u9FVrVYmKVegJuFw51n/YB9XPt+U6ydzFG5ZIN7+DIjPbNmXoBj9esYhgQ==",
+      "dev": true
+    },
+    "unimport": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/unimport/-/unimport-3.0.6.tgz",
+      "integrity": "sha512-GYxGJ1Bri1oqx8VFDjdgooGzeK7jBk3bvhXmamTIpu3nONOcUMGwZbX7X0L5RA7OWMXpR4vzpSQP7pXUzJg1/Q==",
+      "dev": true,
+      "requires": {
+        "@rollup/pluginutils": "^5.0.2",
+        "escape-string-regexp": "^5.0.0",
+        "fast-glob": "^3.2.12",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.0",
+        "mlly": "^1.2.0",
+        "pathe": "^1.1.0",
+        "pkg-types": "^1.0.2",
+        "scule": "^1.0.0",
+        "strip-literal": "^1.0.1",
+        "unplugin": "^1.3.1"
+      }
+    },
+    "unplugin": {
+      "version": "1.3.1",
+      "resolved": "https://registry.npmjs.org/unplugin/-/unplugin-1.3.1.tgz",
+      "integrity": "sha512-h4uUTIvFBQRxUKS2Wjys6ivoeofGhxzTe2sRWlooyjHXVttcVfV/JiavNd3d4+jty0SVV0dxGw9AkY9MwiaCEw==",
+      "dev": true,
+      "requires": {
+        "acorn": "^8.8.2",
+        "chokidar": "^3.5.3",
+        "webpack-sources": "^3.2.3",
+        "webpack-virtual-modules": "^0.5.0"
+      }
+    },
+    "unplugin-auto-import": {
+      "version": "0.15.3",
+      "resolved": "https://registry.npmjs.org/unplugin-auto-import/-/unplugin-auto-import-0.15.3.tgz",
+      "integrity": "sha512-RLT8SqbPn4bT7yBshZId0uPSofKWnwr66RyDaxWaFb/+f7OTDOWAsVNz+hOQLBWSjvbekr2xZY9ccS8TDHJbCQ==",
+      "dev": true,
+      "requires": {
+        "@antfu/utils": "^0.7.2",
+        "@rollup/pluginutils": "^5.0.2",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.0",
+        "minimatch": "^9.0.0",
+        "unimport": "^3.0.6",
+        "unplugin": "^1.3.1"
+      }
+    },
+    "unplugin-vue-components": {
+      "version": "0.24.1",
+      "resolved": "https://registry.npmjs.org/unplugin-vue-components/-/unplugin-vue-components-0.24.1.tgz",
+      "integrity": "sha512-T3A8HkZoIE1Cja95xNqolwza0yD5IVlgZZ1PVAGvVCx8xthmjsv38xWRCtHtwl+rvZyL9uif42SRkDGw9aCfMA==",
+      "dev": true,
+      "requires": {
+        "@antfu/utils": "^0.7.2",
+        "@rollup/pluginutils": "^5.0.2",
+        "chokidar": "^3.5.3",
+        "debug": "^4.3.4",
+        "fast-glob": "^3.2.12",
+        "local-pkg": "^0.4.3",
+        "magic-string": "^0.30.0",
+        "minimatch": "^7.4.2",
+        "resolve": "^1.22.1",
+        "unplugin": "^1.1.0"
+      },
+      "dependencies": {
+        "minimatch": {
+          "version": "7.4.6",
+          "resolved": "https://registry.npmjs.org/minimatch/-/minimatch-7.4.6.tgz",
+          "integrity": "sha512-sBz8G/YjVniEz6lKPNpKxXwazJe4c19fEfV2GDMX6AjFz+MX9uDWIZW8XreVhkFW3fkIdTv/gxWr/Kks5FFAVw==",
+          "dev": true,
+          "requires": {
+            "brace-expansion": "^2.0.1"
+          }
+        }
+      }
+    },
     "update-browserslist-db": {
       "version": "1.0.11",
       "resolved": "https://registry.npmjs.org/update-browserslist-db/-/update-browserslist-db-1.0.11.tgz",
@@ -6068,6 +6543,18 @@
       "resolved": "https://registry.npmjs.org/webidl-conversions/-/webidl-conversions-3.0.1.tgz",
       "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
     },
+    "webpack-sources": {
+      "version": "3.2.3",
+      "resolved": "https://registry.npmjs.org/webpack-sources/-/webpack-sources-3.2.3.tgz",
+      "integrity": "sha512-/DyMEOrDgLKKIG0fmvtz+4dUX/3Ghozwgm6iPp8KRhvn+eQf9+Q7GWxVNMk3+uCPWfdXYC4ExGBckIXdFEfH1w==",
+      "dev": true
+    },
+    "webpack-virtual-modules": {
+      "version": "0.5.0",
+      "resolved": "https://registry.npmjs.org/webpack-virtual-modules/-/webpack-virtual-modules-0.5.0.tgz",
+      "integrity": "sha512-kyDivFZ7ZM0BVOUteVbDFhlRt7Ah/CSPwJdi8hBpkK7QLumUqdLtVfm/PX/hkcnrvr0i77fO5+TjZ94Pe+C9iw==",
+      "dev": true
+    },
     "websocket-driver": {
       "version": "0.7.4",
       "resolved": "https://registry.npmjs.org/websocket-driver/-/websocket-driver-0.7.4.tgz",
diff --git a/package.json b/package.json
index b9eeaa3..f519fda 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,8 @@
     "sass": "^1.62.1",
     "tailwindcss": "^3.3.2",
     "typescript": "^5.0.2",
+    "unplugin-auto-import": "^0.15.3",
+    "unplugin-vue-components": "^0.24.1",
     "vite": "^4.3.5",
     "vue-tsc": "^1.6.4"
   }
diff --git a/src/App.vue b/src/App.vue
index 80200b7..5bc5db3 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,8 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
-import TopBar from '@/components/TopBar.vue'
-import SideBar from '@/components/SideBar.vue'
-import Note from '@/components/Note.vue'
 import { activeNote, updateNote } from '@/composables/useNotes'
 
 const sideBarCollapsed = ref(false)
diff --git a/src/components/Autocomplete.vue b/src/components/Autocomplete.vue
index e66121c..2f0991e 100644
--- a/src/components/Autocomplete.vue
+++ b/src/components/Autocomplete.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { computed, ref } from 'vue'
-import SearchResult from '@/components/Search/SearchResult.vue'
 import { notes, findNotesByByTitle, activeNote } from '@/composables/useNotes'
 
 const props = defineProps<{
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
index 91a7d13..eeaa855 100644
--- a/src/components/Modal.vue
+++ b/src/components/Modal.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref } from 'vue'
 import { onClickOutside } from '@vueuse/core'
 
 const modalBox = ref(null)
diff --git a/src/components/Note.vue b/src/components/Note.vue
index 7698b3e..84c0eb0 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-import NoteEditor from '@/components/NoteEditor.vue'
-import Modal from '@/components/Modal.vue'
 import { formatDate } from '@/utils/helpers'
 import { notes, activeNote } from '@/composables/useNotes'
 import { notesRelations } from '@/composables/useNotes'
@@ -30,13 +27,19 @@ const references = computed<Note[]>(() => {
     })
     .filter((note): note is Note => note !== undefined)
 })
+
+const deleteNote = () => {
+  console.log('delete note')
+}
+
+const setRootNote = () => {
+  console.log('set root note')
+}
 </script>
 <template>
   <div class="flex flex-col">
-    <div class="mb-2 flex items-center">
-      <h1
-        class="mr-2 flex flex-1 items-center rounded-md text-3xl font-semibold hover:bg-gray-200"
-      >
+    <NoteToolbar @delete="deleteNote" @set-root="setRootNote">
+      <template #title>
         <i
           class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
           v-if="props.note.isRoot"
@@ -46,46 +49,8 @@ const references = computed<Note[]>(() => {
           class="flex-1 bg-transparent py-1 outline-none"
           v-model="noteTitle"
         />
-      </h1>
-      <div class="btn-group flex items-center">
-        <Modal>
-          <template #activator="{ open }">
-            <button class="btn-sm btn" @click="open">
-              <i class="fas fa-fw fa-trash" />
-            </button>
-          </template>
-          <template #default>Are you sure you want to delete this?</template>
-          <template #actions="{ close }">
-            <button
-              class="btn-primary btn-sm btn mr-1"
-              @click="() => console.log('delete note')"
-            >
-              Delete note
-            </button>
-            <button class="btn-sm btn" @click="close">Close</button>
-          </template>
-        </Modal>
-        <Modal>
-          <template #activator="{ open }">
-            <button class="btn-sm btn" @click="open">
-              <i class="fas fa-fw fa-sitemap" />
-            </button>
-          </template>
-          <template #default>
-            Are you sure you want to set this note as root note?
-          </template>
-          <template #actions="{ close }">
-            <button
-              class="btn-primary btn-sm btn mr-1"
-              @click="() => console.log('set root note')"
-            >
-              Set current note as root
-            </button>
-            <button class="btn-sm btn" @click="close">Close</button>
-          </template>
-        </Modal>
-      </div>
-    </div>
+      </template>
+    </NoteToolbar>
     <NoteEditor
       class="h-100 flex-1 overflow-auto"
       :note="activeNote"
diff --git a/src/components/NoteEditor.vue b/src/components/Note/NoteEditor.vue
similarity index 98%
rename from src/components/NoteEditor.vue
rename to src/components/Note/NoteEditor.vue
index e7e26b3..2cf3006 100644
--- a/src/components/NoteEditor.vue
+++ b/src/components/Note/NoteEditor.vue
@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import { ref, nextTick } from 'vue'
 import CKEditor from '@/ckeditor/CKEditor'
 import BalloonEditor from '@ckeditor/ckeditor5-editor-balloon/src/ballooneditor'
 import EssentialsPlugin from '@ckeditor/ckeditor5-essentials/src/essentials'
@@ -17,9 +16,7 @@ import { mdToHtml } from '@/utils/markdown'
 import { activeNote, getNoteByTitle } from '@/composables/useNotes'
 import Autocomplete from '@/components/Autocomplete.vue'
 
-const props = defineProps<{
-  note: Note
-}>()
+const props = defineProps<{ note: Note }>()
 
 const html = mdToHtml(props.note.content)
 
diff --git a/src/components/Note/NoteToolbar.vue b/src/components/Note/NoteToolbar.vue
new file mode 100644
index 0000000..c8a0ea4
--- /dev/null
+++ b/src/components/Note/NoteToolbar.vue
@@ -0,0 +1,47 @@
+<script setup lang="ts">
+const emit = defineEmits<{
+  delete: []
+  setRoot: []
+}>()
+</script>
+<template>
+  <div class="mb-2 flex items-center">
+    <h1
+      class="mr-2 flex flex-1 items-center rounded-md pr-2 text-3xl font-semibold hover:bg-gray-200"
+    >
+      <slot name="title"></slot>
+    </h1>
+    <div class="btn-group flex items-center">
+      <Modal>
+        <template #activator="{ open }">
+          <button class="btn-sm btn" @click="open">
+            <i class="fas fa-fw fa-trash" />
+          </button>
+        </template>
+        <template #default>Are you sure you want to delete this?</template>
+        <template #actions="{ close }">
+          <button class="btn-primary btn-sm btn mr-1" @click="emit('delete')">
+            Delete note
+          </button>
+          <button class="btn-sm btn" @click="close">Close</button>
+        </template>
+      </Modal>
+      <Modal>
+        <template #activator="{ open }">
+          <button class="btn-sm btn" @click="open">
+            <i class="fas fa-fw fa-sitemap" />
+          </button>
+        </template>
+        <template #default>
+          Are you sure you want to set this note as root note?
+        </template>
+        <template #actions="{ close }">
+          <button class="btn-primary btn-sm btn mr-1" @click="emit('setRoot')">
+            Set current note as root
+          </button>
+          <button class="btn-sm btn" @click="close">Close</button>
+        </template>
+      </Modal>
+    </div>
+  </div>
+</template>
diff --git a/src/components/Search/SearchBar.vue b/src/components/Search/SearchBar.vue
index 06fef3f..416655b 100644
--- a/src/components/Search/SearchBar.vue
+++ b/src/components/Search/SearchBar.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { ref, watch, computed } from 'vue'
-import SearchResult from '@/components/Search/SearchResult.vue'
 import { notes, findNotes, activeNote } from '@/composables/useNotes'
 
 const active = ref(false)
diff --git a/src/components/SideBar.vue b/src/components/SideBar.vue
index 7d9c45e..3d93959 100644
--- a/src/components/SideBar.vue
+++ b/src/components/SideBar.vue
@@ -1,7 +1,5 @@
 <script setup lang="ts">
 import { rootNote, notes, activeNote } from '@/composables/useNotes'
-import SideBarMenu from '@/components/SideBar/SideBarMenu.vue'
-import SideBarMenuItem from '@/components/SideBar/SideBarMenuItem.vue'
 
 const props = defineProps<{
   viewModes: ViewMode[]
@@ -20,7 +18,11 @@ const emit = defineEmits<{
     <SideBarMenu>
       <template #header>Root note</template>
       <template #items>
-        <SideBarMenuItem icon="fas fa-fw fa-home" @click="activeNote = rootNote">
+        <SideBarMenuItem
+          icon="fas fa-fw fa-home"
+          @click="activeNote = rootNote"
+          :title="rootNote?.title"
+        >
           {{ rootNote?.title }}
         </SideBarMenuItem>
       </template>
@@ -48,6 +50,7 @@ const emit = defineEmits<{
           v-for="note in notes"
           icon="far fa-file-alt fa-fw"
           @click="activeNote = note"
+          :title="rootNote?.title"
         >
           {{ note.title }}
         </SideBarMenuItem>
diff --git a/src/components/SideBar/SideBarMenuItem.vue b/src/components/SideBar/SideBarMenuItem.vue
index 2baaaae..f83fd71 100644
--- a/src/components/SideBar/SideBarMenuItem.vue
+++ b/src/components/SideBar/SideBarMenuItem.vue
@@ -6,7 +6,7 @@ const props = defineProps<{
 </script>
 <template>
   <a
-    class="mt-1 block w-full cursor-pointer rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
+    class="mt-1 block w-full cursor-pointer overflow-x-hidden text-ellipsis whitespace-nowrap rounded hover:bg-gray-200 active:bg-primary active:text-primary-content"
     :class="props.active ? 'font-bold text-primary' : 'text-secondary'"
   >
     <i :class="props.icon" class="mr-2" v-if="props.icon"></i>
diff --git a/src/components/TopBar.vue b/src/components/TopBar.vue
index 810b7c4..9dd9689 100644
--- a/src/components/TopBar.vue
+++ b/src/components/TopBar.vue
@@ -1,7 +1,4 @@
 <script setup lang="ts">
-import Hamburger from '@/components/Hamburger.vue'
-import SearchBar from '@/components/Search/SearchBar.vue'
-import Logo from './Logo.vue'
 import { addNote, activeNote, rootNote } from '@/composables/useNotes'
 const props = defineProps<{
   sideBarCollapsed: boolean
diff --git a/src/composables/useNotes.ts b/src/composables/useNotes.ts
index 0126eee..893cb2d 100644
--- a/src/composables/useNotes.ts
+++ b/src/composables/useNotes.ts
@@ -1,4 +1,3 @@
-import { ref, reactive, computed, watch } from 'vue'
 import { useTitle } from '@vueuse/core'
 import { mdToHtml } from '@/utils/markdown'
 import { getAllMatches } from '@/utils/helpers'
diff --git a/tsconfig.json b/tsconfig.json
index 9578653..2f2ce17 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -21,6 +21,7 @@
     "noUnusedLocals": true,
     "noUnusedParameters": true,
     "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
     "paths": {
       "@/*": [
         "./src/*"
@@ -31,7 +32,9 @@
     "src/**/*.ts",
     "src/**/*.d.ts",
     "src/**/*.tsx",
-    "src/**/*.vue"
+    "src/**/*.vue",
+    "auto-imports.d.ts",
+    "components.d.ts"
   ],
   "references": [
     {
diff --git a/vite.config.ts b/vite.config.ts
index b5d1612..1ffa77c 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -1,16 +1,19 @@
 import { defineConfig } from 'vite'
 import vue from '@vitejs/plugin-vue'
 import path from 'path'
-
+import AutoImport from 'unplugin-auto-import/vite'
+import Components from 'unplugin-vue-components/vite'
 // CKEditor
-import { createRequire } from 'node:module';
+import { createRequire } from 'node:module'
 import ckeditor5 from '@ckeditor/vite-plugin-ckeditor5'
-const require = createRequire( import.meta.url );
+const require = createRequire(import.meta.url)
 
 // https://vitejs.dev/config/
 export default defineConfig({
   plugins: [
     vue(),
+    AutoImport({ imports: ['vue'] }),
+    Components(),
     ckeditor5({ theme: require.resolve('@ckeditor/ckeditor5-theme-lark') }),
   ],
   resolve: {