diff --git a/package-lock.json b/package-lock.json
index 94f7b80..d804c20 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -22,7 +22,7 @@
         "@fortawesome/fontawesome-free": "^6.4.0",
         "@types/marked": "^4.0.8",
         "@vueuse/components": "^10.1.0",
-        "@vueuse/core": "^10.1.0",
+        "@vueuse/core": "^10.1.2",
         "daisyui": "^2.51.6",
         "date-fns": "^2.29.3",
         "dompurify": "^3.0.2",
@@ -1507,9 +1507,9 @@
       "dev": true
     },
     "node_modules/@types/web-bluetooth": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
-      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
+      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
     },
     "node_modules/@vitejs/plugin-vue": {
       "version": "4.2.2",
@@ -1696,6 +1696,33 @@
         "vue-demi": ">=0.14.0"
       }
     },
+    "node_modules/@vueuse/components/node_modules/@types/web-bluetooth": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+    },
+    "node_modules/@vueuse/components/node_modules/@vueuse/core": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.0.tgz",
+      "integrity": "sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.16",
+        "@vueuse/metadata": "10.1.0",
+        "@vueuse/shared": "10.1.0",
+        "vue-demi": ">=0.14.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/components/node_modules/@vueuse/metadata": {
+      "version": "10.1.0",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.0.tgz",
+      "integrity": "sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==",
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
     "node_modules/@vueuse/components/node_modules/vue-demi": {
       "version": "0.14.0",
       "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
@@ -1722,13 +1749,24 @@
       }
     },
     "node_modules/@vueuse/core": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.0.tgz",
-      "integrity": "sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==",
+      "version": "10.1.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.2.tgz",
+      "integrity": "sha512-roNn8WuerI56A5uiTyF/TEYX0Y+VKlhZAF94unUfdhbDUI+NfwQMn4FUnUscIRUhv3344qvAghopU4bzLPNFlA==",
+      "dependencies": {
+        "@types/web-bluetooth": "^0.0.17",
+        "@vueuse/metadata": "10.1.2",
+        "@vueuse/shared": "10.1.2",
+        "vue-demi": ">=0.14.0"
+      },
+      "funding": {
+        "url": "https://github.com/sponsors/antfu"
+      }
+    },
+    "node_modules/@vueuse/core/node_modules/@vueuse/shared": {
+      "version": "10.1.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.1.2.tgz",
+      "integrity": "sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==",
       "dependencies": {
-        "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "10.1.0",
-        "@vueuse/shared": "10.1.0",
         "vue-demi": ">=0.14.0"
       },
       "funding": {
@@ -1761,9 +1799,9 @@
       }
     },
     "node_modules/@vueuse/metadata": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.0.tgz",
-      "integrity": "sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg==",
+      "version": "10.1.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.2.tgz",
+      "integrity": "sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ==",
       "funding": {
         "url": "https://github.com/sponsors/antfu"
       }
@@ -4673,9 +4711,9 @@
       "dev": true
     },
     "@types/web-bluetooth": {
-      "version": "0.0.16",
-      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
-      "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+      "version": "0.0.17",
+      "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.17.tgz",
+      "integrity": "sha512-4p9vcSmxAayx72yn70joFoL44c9MO/0+iVEBIQXe3v2h2SiAsEIo/G5v6ObFWvNKRFjbrVadNf9LqEEZeQPzdA=="
     },
     "@vitejs/plugin-vue": {
       "version": "4.2.2",
@@ -4847,6 +4885,27 @@
         "vue-demi": ">=0.14.0"
       },
       "dependencies": {
+        "@types/web-bluetooth": {
+          "version": "0.0.16",
+          "resolved": "https://registry.npmjs.org/@types/web-bluetooth/-/web-bluetooth-0.0.16.tgz",
+          "integrity": "sha512-oh8q2Zc32S6gd/j50GowEjKLoOVOwHP/bWVjKJInBwQqdOYMdPrf1oVlelTlyfFK3CKxL1uahMDAr+vy8T7yMQ=="
+        },
+        "@vueuse/core": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.0.tgz",
+          "integrity": "sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==",
+          "requires": {
+            "@types/web-bluetooth": "^0.0.16",
+            "@vueuse/metadata": "10.1.0",
+            "@vueuse/shared": "10.1.0",
+            "vue-demi": ">=0.14.0"
+          }
+        },
+        "@vueuse/metadata": {
+          "version": "10.1.0",
+          "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.0.tgz",
+          "integrity": "sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg=="
+        },
         "vue-demi": {
           "version": "0.14.0",
           "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
@@ -4856,16 +4915,24 @@
       }
     },
     "@vueuse/core": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.0.tgz",
-      "integrity": "sha512-3Znoa5m5RO+z4/C9w6DRaKTR3wCVJvD5rav8HTDGsr+7rOZRHtcgFJ8NcCs0ZvIpmev2kExTa311ns5j2RbzDQ==",
+      "version": "10.1.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/core/-/core-10.1.2.tgz",
+      "integrity": "sha512-roNn8WuerI56A5uiTyF/TEYX0Y+VKlhZAF94unUfdhbDUI+NfwQMn4FUnUscIRUhv3344qvAghopU4bzLPNFlA==",
       "requires": {
-        "@types/web-bluetooth": "^0.0.16",
-        "@vueuse/metadata": "10.1.0",
-        "@vueuse/shared": "10.1.0",
+        "@types/web-bluetooth": "^0.0.17",
+        "@vueuse/metadata": "10.1.2",
+        "@vueuse/shared": "10.1.2",
         "vue-demi": ">=0.14.0"
       },
       "dependencies": {
+        "@vueuse/shared": {
+          "version": "10.1.2",
+          "resolved": "https://registry.npmjs.org/@vueuse/shared/-/shared-10.1.2.tgz",
+          "integrity": "sha512-1uoUTPBlgyscK9v6ScGeVYDDzlPSFXBlxuK7SfrDGyUTBiznb3mNceqhwvZHjtDRELZEN79V5uWPTF1VDV8svA==",
+          "requires": {
+            "vue-demi": ">=0.14.0"
+          }
+        },
         "vue-demi": {
           "version": "0.14.0",
           "resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.0.tgz",
@@ -4875,9 +4942,9 @@
       }
     },
     "@vueuse/metadata": {
-      "version": "10.1.0",
-      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.0.tgz",
-      "integrity": "sha512-cM28HjDEw5FIrPE9rgSPFZvQ0ZYnOLAOr8hl1XM6tFl80U3WAR5ROdnAqiYybniwP5gt9MKKAJAqd/ab2aHkqg=="
+      "version": "10.1.2",
+      "resolved": "https://registry.npmjs.org/@vueuse/metadata/-/metadata-10.1.2.tgz",
+      "integrity": "sha512-3mc5BqN9aU2SqBeBuWE7ne4OtXHoHKggNgxZR2K+zIW4YLsy6xoZ4/9vErQs6tvoKDX6QAqm3lvsrv0mczAwIQ=="
     },
     "@vueuse/shared": {
       "version": "10.1.0",
diff --git a/package.json b/package.json
index 24cd735..b9eeaa3 100644
--- a/package.json
+++ b/package.json
@@ -23,7 +23,7 @@
     "@fortawesome/fontawesome-free": "^6.4.0",
     "@types/marked": "^4.0.8",
     "@vueuse/components": "^10.1.0",
-    "@vueuse/core": "^10.1.0",
+    "@vueuse/core": "^10.1.2",
     "daisyui": "^2.51.6",
     "date-fns": "^2.29.3",
     "dompurify": "^3.0.2",
diff --git a/src/components/Modal.vue b/src/components/Modal.vue
new file mode 100644
index 0000000..91a7d13
--- /dev/null
+++ b/src/components/Modal.vue
@@ -0,0 +1,46 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+
+const modalBox = ref(null)
+const show = ref(false)
+
+const open = () => (show.value = true)
+const close = () => (show.value = false)
+
+const slotProps = { open, close }
+
+onClickOutside(modalBox, () => close())
+
+const onEnter = (el: Element, done: () => void): void => {
+  setTimeout(() => {
+    el.classList.add('modal-open')
+    done()
+  })
+}
+
+const onLeave = (el: Element, done: () => void): void => {
+  el.classList.remove('modal-open')
+  el.addEventListener('transitionend', () => done())
+}
+</script>
+<template>
+  <slot name="activator" v-bind="slotProps"></slot>
+  <Teleport to="body">
+    <Transition @enter="onEnter" @leave="onLeave">
+      <div class="modal bg-neutral-800 bg-opacity-60" v-if="show">
+        <div class="modal-box" ref="modalBox">
+          <h3 class="text-lg font-bold" v-if="$slots.title"><slot name="title" /></h3>
+          <p class="py-4">
+            <slot />
+          </p>
+          <div class="modal-action">
+            <slot name="actions" v-bind="slotProps">
+              <button class="btn-sm btn" @click="close">Close</button>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </Transition>
+  </Teleport>
+</template>
diff --git a/src/components/Note.vue b/src/components/Note.vue
index e00a5bb..7698b3e 100644
--- a/src/components/Note.vue
+++ b/src/components/Note.vue
@@ -1,6 +1,7 @@
 <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'
@@ -32,9 +33,9 @@ const references = computed<Note[]>(() => {
 </script>
 <template>
   <div class="flex flex-col">
-    <div class="flex items-center mb-2">
+    <div class="mb-2 flex items-center">
       <h1
-        class="flex flex-1 items-center rounded-md text-3xl font-semibold hover:bg-gray-200 mr-2"
+        class="mr-2 flex flex-1 items-center rounded-md text-3xl font-semibold hover:bg-gray-200"
       >
         <i
           class="fas fa-fw fa-home mr-2 text-base text-secondary opacity-40"
@@ -47,12 +48,42 @@ const references = computed<Note[]>(() => {
         />
       </h1>
       <div class="btn-group flex items-center">
-        <button class="btn-sm btn">
-          <i class="fas fa-fw fa-trash" />
-        </button>
-        <button class="btn-sm btn">
-          <i class="fas fa-fw fa-sitemap" />
-        </button>
+        <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>
     <NoteEditor