diff --git a/bun.lockb b/bun.lockb
index 228754a..d0453b3 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/base/DropdownContentRender.vue b/components/base/DropdownContentRender.vue
index 264715e..199dc05 100644
--- a/components/base/DropdownContentRender.vue
+++ b/components/base/DropdownContentRender.vue
@@ -1,10 +1,10 @@
 <template>
     <template v-for="(item, idx) of options">
         <template v-if="item.type === 'item'">
-            <DropdownMenuItem :disabled="item.disabled" :textValue="item.label" @select="item.select">
-                <Icon v-if="item.icon" :icon="item.icon" />
+            <DropdownMenuItem :disabled="item.disabled" :textValue="item.label" @select="item.select" :class="{'pe-1': item.kbd}" class="group cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-center py-1.5 relative ps-7 pe-4 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-35 dark:data-[highlighted]:bg-dark-35">
+                <Icon v-if="item.icon" :icon="item.icon" class="absolute left-1.5" />
                 <span>{{ item.label }}</span>
-                <span v-if="item.kbd"> {{ item.kbd }} </span>
+                <span v-if="item.kbd" class="mx-2 text-xs font-mono text-light-70 dark:text-dark-70 relative top-0.5"> {{ item.kbd }} </span>
             </DropdownMenuItem>
         </template>
         
@@ -34,13 +34,13 @@
         
         <template v-if="item.type === 'submenu'">
             <DropdownMenuSub>
-                <DropdownMenuSubTrigger>
+                <DropdownMenuSubTrigger class="group cursor-pointer text-base text-light-100 dark:text-dark-100 leading-none flex items-center py-1.5 relative ps-7 select-none outline-none data-[disabled]:text-light-60 dark:data-[disabled]:text-dark-60 data-[disabled]:pointer-events-none data-[highlighted]:bg-light-35 dark:data-[highlighted]:bg-dark-35">
                     <Icon v-if="item.icon" :icon="item.icon" />
                     <span>{{ item.label }}</span>
-                    <Icon icon="radix-icons:chevron-right" />
+                    <Icon icon="radix-icons:chevron-right" class="absolute right-1" />
                 </DropdownMenuSubTrigger>
                 <DropdownMenuPortal>
-                    <DropdownMenuSubContent>
+                    <DropdownMenuSubContent class="z-50 outline-none bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade border border-light-35 dark:border-dark-35">
                         <DropdownContentRender :options="item.items" />
                     </DropdownMenuSubContent>
                 </DropdownMenuPortal>
@@ -48,8 +48,8 @@
         </template>
         
         <template v-if="item.type === 'group'">
-            <DropdownMenuLabel>{{ item.label }}</DropdownMenuLabel>
-            <DropdownContetnRender :options="item.items" />
+            <DropdownMenuLabel class="text-light-70 dark:text-dark-70 text-sm text-center pt-1">{{ item.label }}</DropdownMenuLabel>
+            <DropdownContentRender :options="item.items" />
 
             <DropdownMenuSeparator v-if="idx !== options.length - 1" />
         </template>
diff --git a/components/base/DropdownMenu.vue b/components/base/DropdownMenu.vue
index dd1e813..83e1771 100644
--- a/components/base/DropdownMenu.vue
+++ b/components/base/DropdownMenu.vue
@@ -3,11 +3,10 @@
 		<DropdownMenuTrigger :disabled="disabled" ><slot /></DropdownMenuTrigger>
 
 		<DropdownMenuPortal>
-			<DropdownMenuContent :align="align" :side="side">
+			<DropdownMenuContent :align="align" :side="side" class="z-50 outline-none bg-light-20 dark:bg-dark-20 will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade border border-light-35 dark:border-dark-35">
 				<DropdownContentRender :options="options" />
 
-				<DropdownMenuSeparator />
-				<DropdownMenuArrow />
+				<DropdownMenuArrow class="fill-light-35 dark:fill-dark-35" />
 			</DropdownMenuContent>
 		</DropdownMenuPortal>
 	</DropdownMenuRoot>
diff --git a/db.sqlite b/db.sqlite
index c62f52b..d23b34b 100644
Binary files a/db.sqlite and b/db.sqlite differ
diff --git a/db.sqlite-shm b/db.sqlite-shm
index fc1e352..16848b9 100644
Binary files a/db.sqlite-shm and b/db.sqlite-shm differ
diff --git a/db.sqlite-wal b/db.sqlite-wal
index 2bdbb6b..3741197 100644
Binary files a/db.sqlite-wal and b/db.sqlite-wal differ
diff --git a/layouts/default.vue b/layouts/default.vue
index 78e0839..60d8c21 100644
--- a/layouts/default.vue
+++ b/layouts/default.vue
@@ -19,17 +19,16 @@
 				</Tooltip>
 				<Tooltip v-else :message="'Mon profil'" side="right">
 					<DropdownMenu :options="[{
-						type: 'group',
-						items: [{
 							type: 'item',
 							label: 'Mon profil',
-							click: () => useRouter().push({ name: 'user-profile' }),
+							icon: 'radix-icons:avatar',
+							select: () => useRouter().push({ name: 'user-profile' }),
 						}, {
 							type: 'item',
 							label: 'Deconnexion',
-							click: () => clear(),
-						}]
-					}]">
+							icon: 'radix-icons:close',
+							select: () => clear(),
+						}]" side="right" align="start">
 						<div class="hover:border-opacity-70 flex">
 							<Icon :icon="'radix-icons:avatar'" class="w-7 h-7 p-1" />
 						</div>
@@ -57,17 +56,14 @@
 								</Tooltip>
 								<Tooltip v-else :message="'Mon profil'" side="right">
 									<DropdownMenu :options="[{
-										type: 'group',
-										items: [{
 											type: 'item',
 											label: 'Mon profil',
-											click: () => useRouter().push({ name: 'user-profile' }),
+											select: () => useRouter().push({ name: 'user-profile' }),
 										}, {
 											type: 'item',
 											label: 'Deconnexion',
-											click: () => clear(),
-										}]
-									}]">
+											select: () => clear(),
+										}]" side="right" align="start">
 										<div class="bg-light-20 dark:bg-dark-20 hover:border-opacity-70 flex border p-px border-light-50 dark:border-dark-50">
 											<Icon :icon="'radix-icons:avatar'" class="w-7 h-7 p-1" />
 										</div>
@@ -95,6 +91,7 @@
 
 <script setup lang="ts">
 import { Icon } from '@iconify/vue/dist/iconify.js';
+import type { NavigationTreeItem } from '~/server/api/navigation.get';
 
 const open = ref(false);
 const { loggedIn, clear } = useUserSession();
@@ -111,8 +108,8 @@ const { data: pages } = await useLazyFetch('/api/navigation', {
 	watch: [useRouter().currentRoute]
 });
 
-function transform(list: any[]): any[]
+function transform(list: NavigationTreeItem[]): any[]
 {
-	return list?.map(e => ({ label: e.title, children: transform(e.children), link: e.path, tag: e.private ? 'private' : e.type, open: path.value?.startsWith(e.path)}))
+	return list?.map(e => ({ label: e.title, children: transform(e?.children ?? []), link: e.path, tag: e.private ? 'private' : e.type, open: path.value?.startsWith(e.path)}))
 }
 </script>
\ No newline at end of file
diff --git a/package.json b/package.json
index eaecd21..6a8bd65 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
     "dev": "bunx --bun nuxi dev"
   },
   "dependencies": {
+    "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
     "@iconify/vue": "^4.1.2",
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/tailwindcss": "^6.12.2",
diff --git a/pages/explore/[...path].vue b/pages/explore/[...path].vue
index 723396b..376a193 100644
--- a/pages/explore/[...path].vue
+++ b/pages/explore/[...path].vue
@@ -46,7 +46,7 @@ const path = computed(() => Array.isArray(route.value.params.path) ? route.value
 watch(path, () => {
     if(path.value === 'index')
     {
-        useRouter().push({ name: 'explore' });
+        useRouter().replace({ name: 'explore' });
     }
 }, { immediate: true });
 
diff --git a/pages/explore/edit/[...path].vue b/pages/explore/edit/[...path].vue
index fea8f08..8dd0394 100644
--- a/pages/explore/edit/[...path].vue
+++ b/pages/explore/edit/[...path].vue
@@ -71,9 +71,6 @@ async function save(): Promise<void>
         await $fetch(`/api/file`, {
             method: 'post',
             body: page.value,
-            headers: {
-                'Content-Type': 'application/json',
-            },
         });
         saveStatus.value = 'success';
 
diff --git a/pages/explore/edit/index.vue b/pages/explore/edit/index.vue
index cf10477..a24c1d6 100644
--- a/pages/explore/edit/index.vue
+++ b/pages/explore/edit/index.vue
@@ -1,31 +1,60 @@
 <template>
-    
+    <Head>
+        <Title>d[any] - Configuration du projet</Title>
+    </Head>
+    <div class="flex flex-1 flex-row gap-4 p-6">
+        <TreeRoot v-slot="{ flattenItems }" class="list-none select-none border border-light-35 dark:border-dark-35 text-light-100 dark:text-dark-100 p-2 xl:text-base text-sm overflow-auto w-[450px]" :items="navigation ?? undefined" :get-key="(item) => item.path" :defaultExpanded="flatten(navigation ?? [])">
+            <TreeItem v-for="item in flattenItems" v-slot="{ handleToggle, handleSelect, isExpanded, isSelected }" :key="item._id" :style="{ 'padding-left': `${item.level - 0.5}em` }" v-bind="item.bind" class="flex items-center px-2 outline-none relative cursor-pointer hover:bg-light-20 dark:hover:bg-dark-20 data-[selected]:bg-light-35 dark:data-[selected]:bg-dark-35" @select.prevent @toggle.prevent>
+                <span class="py-2 px-2" @click="handleToggle" v-if="item.hasChildren" >
+                    <Icon :icon="isExpanded ? 'lucide:folder-open' : 'lucide:folder'"/>
+                </span>
+                <div class="ps-2 py-1 flex-1 truncate" :class="{'!ps-4 border-s border-light-35 dark:border-dark-35': !item.hasChildren}" :title="item.value.title" @click="() => { handleSelect();  selected = isSelected ? undefined : item.value; }">
+                    {{ item.value.title }}
+                </div>
+            </TreeItem>
+        </TreeRoot>
+        <div v-if="selected" class="flex-1 flex justify-start items-start">
+            <div class="flex flex-col flex-1 justify-start items-start">
+                <input type="text" v-model="selected.title" placeholder="Titre" class="flex-1 mx-4 h-16 w-full caret-light-50 dark:caret-dark-50 text-light-100 dark:text-dark-100 placeholder:text-light-50 dark:placeholder:text-dark-50 appearance-none outline-none px-3 py-1 text-5xl font-thin bg-transparent" />
+                <div class="flex ms-6 flex-col justify-start items-start">
+                    <Tooltip message="Consultable uniquement par le propriétaire" side="right"><Switch label="Privé" v-model="selected.private" /></Tooltip>
+                    <Tooltip message="Afficher dans le menu de navigation" side="right"><Switch label="Navigable" v-model="selected.navigable" /></Tooltip>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
 
 
 <script setup lang="ts">
-const { user, loggedIn } = useUserSession();
+import type { NavigationTreeItem } from '~/server/api/navigation.get';
+import { Icon } from '@iconify/vue/dist/iconify.js';
+
+definePageMeta({
+    rights: ['admin', 'editor'],
+})
+
+const route = useRouter().currentRoute;
+const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
 
 const toaster = useToast();
 const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
 
-const { data: page, status, error } = await useLazyFetch(`/api/navigation`);
+const { data: navigation, status, error } = await useLazyFetch(`/api/navigation`);
+const selected = ref<NavigationTreeItem>();
 
-if(!loggedIn || (page.value && page.value.owner !== user.value?.id))
+
+function flatten(arr: NavigationTreeItem[]): string[]
 {
-    useRouter().replace({ name: 'explore-path', params: { path: path.value } });
+    return arr.flatMap(e => [e.path, ...flatten(e.children ?? [])]);
 }
-
 async function save(): Promise<void>
 {
     saveStatus.value = 'pending';
     try {
-        await $fetch(`/api/file`, {
+        await $fetch(`/api/navigation`, {
             method: 'post',
-            body: page.value,
-            headers: {
-                'Content-Type': 'application/json',
-            },
+            body: navigation.value,
         });
         saveStatus.value = 'success';
 
diff --git a/server/api/navigation.get.ts b/server/api/navigation.get.ts
index 9458e2f..e386e92 100644
--- a/server/api/navigation.get.ts
+++ b/server/api/navigation.get.ts
@@ -1,7 +1,8 @@
 import useDatabase from '~/composables/useDatabase';
 import { explorerContentTable } from '~/db/schema';
-import type { Navigation, NavigationItem } from '~/schemas/navigation';
+import type { NavigationItem } from '~/schemas/navigation';
 
+export type NavigationTreeItem = NavigationItem & { children?: NavigationItem[] };
 export default defineEventHandler(async (e) => {
     const { user } = await getUserSession(e);
 
@@ -23,7 +24,7 @@ export default defineEventHandler(async (e) => {
 
     if(content.length > 0)
     {
-        const navigation: Navigation = [];
+        const navigation: NavigationTreeItem[] = [];
 
         for(const idx in content)
         {
@@ -53,7 +54,7 @@ export default defineEventHandler(async (e) => {
     setResponseStatus(e, 404);
 });
 
-function addChild(arr: Navigation, e: NavigationItem): void
+function addChild(arr: NavigationTreeItem[], e: NavigationItem): void
 {
     const parent = arr.find(f => e.path.startsWith(f.path));
 
@@ -66,7 +67,7 @@ function addChild(arr: Navigation, e: NavigationItem): void
     }
     else
     {
-        arr.push({ title: e.title, path: e.path, type: e.type, order: e.order, private: e.private });
+        arr.push({ ...e });
         arr.sort((a, b) => {
             if(a.order && b.order)
                 return a.order - b.order;
diff --git a/server/api/navigation.post.ts b/server/api/navigation.post.ts
index 959f16a..c22cb68 100644
--- a/server/api/navigation.post.ts
+++ b/server/api/navigation.post.ts
@@ -1,7 +1,7 @@
 import { hasPermissions } from "#shared/auth.util";
 import useDatabase from '~/composables/useDatabase';
 import { explorerContentTable } from '~/db/schema';
-import { schema } from '~/schemas/navigation';
+import { table } from '~/schemas/navigation';
 
 export default defineEventHandler(async (e) => {
     const { user } = await getUserSession(e);
@@ -11,7 +11,7 @@ export default defineEventHandler(async (e) => {
         throw createError({ statusCode: 401, statusText: 'Unauthorized' });
     }
 
-    const body = await readValidatedBody(e, schema.safeParse);
+    const body = await readValidatedBody(e, table.safeParse);
 
     if(!body.success)
     {
diff --git a/server/tasks/pull.ts b/server/tasks/pull.ts
index 4ac6149..0b06e49 100644
--- a/server/tasks/pull.ts
+++ b/server/tasks/pull.ts
@@ -28,8 +28,6 @@ export default defineTask({
 
             const db = useDatabase();
             const files = db.select().from(explorerContentTable).where(ne(explorerContentTable.type, 'folder')).all();
-
-            useStorage('cache').clear();
             
             return { result: true };
         }
diff --git a/server/tasks/push.ts b/server/tasks/push.ts
index 70fc2b6..12e297d 100644
--- a/server/tasks/push.ts
+++ b/server/tasks/push.ts
@@ -41,7 +41,7 @@ export default defineTask({
                         content: null,
                         owner: '1',
                         navigable: true,
-                        private: e.path.startsWith('98.Privé')
+                        private: e.path.startsWith('98.Privé'),
                     }
                 }