diff --git a/bun.lockb b/bun.lockb
index 1012ad4..4b7bf2d 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/Markdown.vue b/components/Markdown.vue
index ad7cfc5..d06cf89 100644
--- a/components/Markdown.vue
+++ b/components/Markdown.vue
@@ -1,26 +1,49 @@
 <template>
-    <template v-if="content && content.length > 0">
-      <Suspense :timeout="0">
-        <MarkdownRenderer #default :key="key" v-if="node" :node="node" :proses="proses"></MarkdownRenderer>
-        <template #fallback><Loading /></template>
-      </Suspense>
-    </template>
-  </template>
-  
-  <script setup lang="ts">
-  import { hash } from 'ohash'
-  
-  const { content } = defineProps({
-    content: {
-      type: String,
-      required: true,
-    },
-    proses: {
-      type: Object
-    }
-  })
-  
-  const parser = useMarkdown();
-  const key = computed(() => hash(content));
-  const node = computed(() => content ? parser(content) : undefined);
-  </script>
\ No newline at end of file
+	<template v-if="content && content.length > 0">
+		<div><MarkdownRenderer #default v-if="data" :node="data" :proses="proses"></MarkdownRenderer></div>
+	</template>
+</template>
+
+<script setup lang="ts">
+import type { Component } from 'vue';
+import { heading } from 'hast-util-heading';
+import { headingRank } from 'hast-util-heading-rank';
+import { parseId } from '~/shared/general.utils';
+import type { Root } from 'hast';
+
+const { content, proses, filter } = defineProps<{
+	content: string
+	proses?: Array<string | Component>
+	filter?: string
+}>();
+
+const parser = useMarkdown(), data = ref<Root>();
+const node = computed(() => content ? parser(content) : undefined);
+watch([node], () => {
+	if(!node.value)
+		data.value = undefined;
+	else if(!filter)
+	{
+		data.value = node.value;
+	}
+	else
+	{
+		const start = node.value?.children.findIndex(e => heading(e) && parseId(e.properties.id as string | undefined) === filter) ?? -1;
+
+		if(start === -1)
+			data.value = node.value;
+		else
+		{
+			let end = start;
+			const rank = headingRank(node.value.children[start])!;
+			while(end < node.value.children.length)
+			{
+				end++;
+				if(heading(node.value.children[end]) && headingRank(node.value.children[end])! >= rank)
+					break;
+			}
+			data.value = { ...node.value, children: node.value.children.slice(start, end) };
+		}
+	}
+}, { immediate: true, });
+</script>
\ No newline at end of file
diff --git a/components/canvas/Canvas.vue b/components/canvas/Canvas.vue
index ed9209e..db236c3 100644
--- a/components/canvas/Canvas.vue
+++ b/components/canvas/Canvas.vue
@@ -154,71 +154,63 @@ const pinchHandler = usePinch(({ event, offset: [z] }: { event: Event, offset: n
     zoom.value = clamp(z / 2048, minZoom.value, 3);
 }, {
     domTarget: canvas,
-    eventOptions: { passive: false, }
 })
 const dragHandler = useDrag(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
     dispX.value += x / zoom.value;
     dispY.value += y / zoom.value;
 }, {
     domTarget: canvas,
-    eventOptions: { passive: false, }
 })
 const wheelHandler = useWheel(({ event, delta: [x, y] }: { event: Event, delta: number[] }) => { 
     zoom.value = clamp(zoom.value + y * -0.001, minZoom.value, 3);
 }, {
     domTarget: canvas,
-    eventOptions: { passive: false, }
 })
 </script>
 
 <template>
-    <Suspense>
-        <template #default>
-            <div id="canvas" ref="canvas" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
-                :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
-                <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden">
-                    <Tooltip message="Zoom avant" side="right">
-                        <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
-                            <Icon icon="radix-icons:plus" />
-                        </div>
-                    </Tooltip>
-                    <Tooltip message="Reset" side="right">
-                        <div @click="zoom = 1" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
-                            <Icon icon="radix-icons:reload" />
-                        </div>
-                    </Tooltip>
-                    <Tooltip message="Tout contenir" side="right">
-                        <div @click="reset" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
-                            <Icon icon="radix-icons:corners" />
-                        </div>
-                    </Tooltip>
-                    <Tooltip message="Zoom arrière" side="right">
-                        <div @click="zoom = clamp(zoom * 0.9, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
-                            <Icon icon="radix-icons:minus" />
-                        </div>
-                    </Tooltip>
-                </div>
-                <div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none"
-                    :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}">
-                    <div>
-                        <CanvasNode v-for="node of props.canvas.nodes" :key="node.id" :node="node" :zoom="zoom" />
+    <div>
+        <div id="canvas" ref="canvas" class="absolute top-0 left-0 overflow-hidden w-full h-full touch-none"
+            :style="{ '--zoom-multiplier': (1 / Math.pow(zoom, 0.7)) }">
+            <div class="border border-light-35 dark:border-dark-35 bg-light-10 dark:bg-dark-10 absolute sm:top-2 top-10 left-2 z-[35] overflow-hidden">
+                <Tooltip message="Zoom avant" side="right">
+                    <div @click="zoom = clamp(zoom * 1.1, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:plus" />
                     </div>
-                    <template v-for="edge of props.canvas.edges">
-                        <div :key="edge.id" v-if="edge.label" class="absolute z-10"
-                            :style="{ transform: labelCenter(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide) }">
-                            <div class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 -translate-x-[50%] -translate-y-[50%]">{{ edge.label }}</div>
-                        </div>
-                    </template>
-                    <svg class="absolute top-0 left-0 overflow-visible w-full h-full origin-top pointer-events-none">
-                        <CanvasEdge v-for="edge of props.canvas.edges" :key="edge.id"
-                            :path="path(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide)"
-                            :color="edge.color" :label="edge.label" />
-                    </svg>
-                </div>
+                </Tooltip>
+                <Tooltip message="Reset" side="right">
+                    <div @click="zoom = 1" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:reload" />
+                    </div>
+                </Tooltip>
+                <Tooltip message="Tout contenir" side="right">
+                    <div @click="reset" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:corners" />
+                    </div>
+                </Tooltip>
+                <Tooltip message="Zoom arrière" side="right">
+                    <div @click="zoom = clamp(zoom * 0.9, minZoom, 3)" class="w-8 h-8 flex justify-center items-center p-2 hover:bg-light-30 dark:hover:bg-dark-30 cursor-pointer">
+                        <Icon icon="radix-icons:minus" />
+                    </div>
+                </Tooltip>
             </div>
-        </template>
-        <template #fallback>
-            <div class="loading"></div>
-        </template>
-    </Suspense>
+            <div class="absolute top-0 left-0 w-full h-full origin-center pointer-events-none *:pointer-events-auto *:select-none"
+                :style="{transform: `scale(${zoom}) translate(${dispX}px, ${dispY}px)`}">
+                <div>
+                    <CanvasNode v-for="node of props.canvas.nodes" :key="node.id" :node="node" :zoom="zoom" />
+                </div>
+                <template v-for="edge of props.canvas.edges">
+                    <div :key="edge.id" v-if="edge.label" class="absolute z-10"
+                        :style="{ transform: labelCenter(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide) }">
+                        <div class="relative bg-light-20 dark:bg-dark-20 border border-light-35 dark:border-dark-35 px-4 py-2 -translate-x-[50%] -translate-y-[50%]">{{ edge.label }}</div>
+                    </div>
+                </template>
+                <svg class="absolute top-0 left-0 overflow-visible w-full h-full origin-top pointer-events-none">
+                    <CanvasEdge v-for="edge of props.canvas.edges" :key="edge.id"
+                        :path="path(getNode(edge.fromNode)!, edge.fromSide, getNode(edge.toNode)!, edge.toSide)"
+                        :color="edge.color" :label="edge.label" />
+                </svg>
+            </div>
+        </div>
+    </div>
 </template>
\ No newline at end of file
diff --git a/components/prose/ProseA.vue b/components/prose/ProseA.vue
index bf6ab67..6da4354 100644
--- a/components/prose/ProseA.vue
+++ b/components/prose/ProseA.vue
@@ -1,33 +1,18 @@
 <template>
-    <NuxtLink class="text-accent-blue inline-flex items-center" v-if="overview"
-    :to="{ name: 'explore-path', params: { path: overview.path }, hash: hash }" :class="class">
-        <HoverCard class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview.type === 'canvas'}" @open="load">
-            <template #content>
-                <template v-if="loading">
-                    <Loading />
-                </template>
-                <template v-else-if="overview.type === 'markdown'">
-                    <div class="px-10">
-                        <Markdown :content="content!.content" />
-                    </div>
-                </template>
-                <template v-else-if="overview.type === 'canvas'">
-                    <div class="w-[600px] h-[600px] relative">
-                        <Canvas :canvas="JSON.parse(content!.content)" />
-                    </div>
-                </template>
-            </template>
-            <template #default>
-                <slot v-bind="$attrs"></slot>
-                <Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :icon="iconByType[overview.type]" />
-            </template>
-        </HoverCard>
-    </NuxtLink>
-    <NuxtLink v-else-if="href" :to="href" :class="class" class="text-accent-blue inline-flex items-center">
-        <slot v-bind="$attrs"></slot>
-        <Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :height="20" :width="20" :icon="iconByType[overview.type]" />
-    </NuxtLink>
-    <slot :class="class" v-else v-bind="$attrs"></slot>
+	<NuxtLink class="text-accent-blue inline-flex items-center"
+	:to="overview ? { name: 'explore-path', params: { path: overview.path }, hash: hash } : href" :class="class">
+		<HoverCard class="max-w-[600px] max-h-[600px] w-full overflow-auto z-[45]" :class="{'overflow-hidden !p-0': overview?.type === 'canvas'}" @open="load" :disabled="!overview">
+			<template #content>
+				<Loading v-if="loading" />
+				<Markdown v-else-if="overview?.type === 'markdown'" class="px-10" :content="content!.content" :filter="hash.substring(1)" />
+				<Canvas v-else-if="overview?.type === 'canvas'" class="w-[600px] h-[600px] relative" :canvas="JSON.parse(content!.content)" />
+			</template>
+			<template #default>
+				<slot v-bind="$attrs"></slot>
+				<Icon class="w-4 h-4 inline-block" v-if="overview && overview.type !== 'markdown'" :icon="iconByType[overview.type]" />
+			</template>
+		</HoverCard>
+	</NuxtLink>
 </template>
 
 <script setup lang="ts">
@@ -36,41 +21,41 @@ import { Icon } from '@iconify/vue/dist/iconify.js';
 import { iconByType } from '#shared/general.utils';
 
 const { href } = defineProps<{
-    href: string
-    class?: string
+	href: string
+	class?: string
 }>();
 
 const { hash, pathname, protocol } = parseURL(href);
 const overview = ref<{
-    path: string;
-    owner: number;
-    title: string;
-    type: "file" | "folder" | "markdown" | "canvas";
-    navigable: boolean;
-    private: boolean;
-    order: number;
-    visit: number;
+	path: string;
+	owner: number;
+	title: string;
+	type: "file" | "folder" | "markdown" | "canvas";
+	navigable: boolean;
+	private: boolean;
+	order: number;
+	visit: number;
 }>(), content = ref<{
-    content: string;
+	content: string;
 }>(), loading = ref(false), fetched = ref(false);
 
 if(!!pathname && !protocol)
 {
-    try {
-        overview.value = await $fetch(`/api/file/overview/${encodeURIComponent(pathname)}`);
-    } catch(e) {}
+	try {
+		overview.value = await $fetch(`/api/file/overview/${encodeURIComponent(pathname)}`);
+	} catch(e) {}
 }
 
 async function load()
 {
-    if(fetched.value === true)
-        return;
+	if(fetched.value === true)
+		return;
 
-    fetched.value = true;
-    loading.value = true;
-    try {
-        content.value = await $fetch(`/api/file/content/${encodeURIComponent(pathname)}`);
-    } catch(e) { }
-    loading.value = false;
+	fetched.value = true;
+	loading.value = true;
+	try {
+		content.value = await $fetch(`/api/file/content/${encodeURIComponent(pathname)}`);
+	} catch(e) { }
+	loading.value = false;
 }
 </script>
\ No newline at end of file
diff --git a/db.sqlite-shm b/db.sqlite-shm
index 6a642b2..8cfd3cc 100644
Binary files a/db.sqlite-shm and b/db.sqlite-shm differ
diff --git a/db.sqlite-wal b/db.sqlite-wal
index 09ce120..2dc7d3a 100644
Binary files a/db.sqlite-wal and b/db.sqlite-wal differ
diff --git a/package.json b/package.json
index 3f36f9b..93c6ba6 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
     "codemirror": "^6.0.1",
     "drizzle-orm": "^0.35.3",
     "hast": "^1.0.0",
+    "hast-util-heading": "^3.0.0",
+    "hast-util-heading-rank": "^3.0.0",
     "lodash.capitalize": "^4.2.1",
     "mdast-util-find-and-replace": "^3.0.1",
     "nodemailer": "^6.9.16",
diff --git a/todo.md b/todo.md
index 1a28a2a..c8e3552 100644
--- a/todo.md
+++ b/todo.md
@@ -1,8 +1,8 @@
 - [x] Mot de passe oublié
 - [x] Rename auto des liens au changement de path
-- [ ] Autocomplete des liens dans l'editeur
-- [ ] Editeur de graphe
 - [ ] Filtrage de lien avec le header id
+- [ ] Editeur de graphe
+- [ ] Autocomplete des liens dans l'editeur
 - [ ] Embed de lien (le ![[]] de Obsidian)
 - [ ] Rework la structure projet
 - [ ] Limite de taille par projet (100 Mo ?)