diff --git a/bun.lockb b/bun.lockb
index d0453b3..ea2c86a 100644
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/components/base/DraggableTree.vue b/components/base/DraggableTree.vue
new file mode 100644
index 0000000..33ff564
--- /dev/null
+++ b/components/base/DraggableTree.vue
@@ -0,0 +1,80 @@
+<template>
+	<TreeRoot v-bind="forward" 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] max-h-full">
+		<DraggableTreeItem v-for="item in flattenItems" :key="item._id" v-bind="item" class="flex items-center 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>
+			<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, isDraggedOver }">
+				<slot :handleToggle="handleToggle"
+						:handleSelect="handleSelect"
+						:isExpanded="isExpanded"
+						:isSelected="isSelected"
+						:isDragging="isDragging"
+						:isDraggedOver="isDraggedOver"
+						:item="item"
+					/>
+			</template>
+			<template #hint="{ instruction }">
+				<div v-if="instruction">
+					<slot name="hint" :instruction="instruction" />
+				</div>
+			</template>
+		</DraggableTreeItem>
+	</TreeRoot>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { useForwardPropsEmits, type FlattenedItem, type TreeRootEmits, type TreeRootProps } from 'radix-vue';
+import { type Instruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+import { monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+
+const props = defineProps<TreeRootProps<T>>();
+const emits = defineEmits<TreeRootEmits<T> & {
+		'updateTree': [instruction: Instruction, itemId: string, targetId: string];
+}>();
+
+defineSlots<{
+	default: (props: {
+		handleToggle: () => void, 
+		handleSelect: () => void, 
+		isExpanded: boolean, 
+		isSelected: boolean, 
+		isDragging: boolean, 
+		isDraggedOver: boolean, 
+		item: FlattenedItem<T>, 
+	}) => any,
+	hint: (props: {
+		instruction: Extract<Instruction, { type: 'reorder-above' | 'reorder-below' | 'make-child' }> | null
+	}) => any,
+}>();
+
+const forward = useForwardPropsEmits(props, emits);
+
+watchEffect((onCleanup) => {
+	const dndFunction = combine(
+		monitorForElements({
+			onDrop(args) {
+				const { location, source } = args;
+				
+				if (!location.current.dropTargets.length)
+					return;
+
+				const itemId = source.data.id as string;
+				const target = location.current.dropTargets[0];
+				const targetId = target.data.id as string;
+
+				const instruction: Instruction | null = extractInstruction(
+					target.data,
+				);
+
+				if (instruction !== null)
+				{
+					emits('updateTree', instruction, itemId, targetId);
+				}
+			},
+		}),
+	)
+
+	onCleanup(() => {
+		dndFunction();
+	})
+})
+</script>
\ No newline at end of file
diff --git a/components/base/DraggableTreeItem.vue b/components/base/DraggableTreeItem.vue
new file mode 100644
index 0000000..7649ebe
--- /dev/null
+++ b/components/base/DraggableTreeItem.vue
@@ -0,0 +1,140 @@
+<template>
+	<TreeItem ref="el" v-bind="forward" v-slot="{ isExpanded, isSelected, isIndeterminate, handleToggle, handleSelect }">
+		<slot
+				:is-expanded="isExpanded"
+				:is-selected="isSelected"
+				:is-indeterminate="isIndeterminate"
+				:handle-select="handleSelect"
+				:handle-toggle="handleToggle"
+				:isDragging="isDragging"
+				:isDraggedOver="isDraggedOver"
+		/>
+		<div v-if="instruction">
+			<slot name="hint" :instruction="instruction" />
+		</div>
+	</TreeItem>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { useForwardPropsEmits, type FlattenedItem, type TreeItemEmits, type TreeItemProps } from 'radix-vue';
+import { draggable, dropTargetForElements, monitorForElements } from '@atlaskit/pragmatic-drag-and-drop/element/adapter'
+import { type Instruction, attachInstruction, extractInstruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/tree-item'
+import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine'
+
+const props = defineProps<TreeItemProps<T> & FlattenedItem<T>>();
+const emits = defineEmits<TreeItemEmits<T>>();
+
+defineSlots<{
+	default: (props: {
+		isExpanded: boolean
+		isSelected: boolean
+		isIndeterminate: boolean | undefined
+		isDragging: boolean
+		isDraggedOver: boolean
+		handleToggle: () => void
+		handleSelect: () => void
+	}) => any,
+	hint: (props: {
+		instruction: Extract<Instruction, { type: 'reorder-above' | 'reorder-below' | 'make-child' }> | null
+	}) => any,
+}>()
+
+const forward = useForwardPropsEmits(props, emits);
+
+const element = templateRef('el');
+const isDragging = ref(false);
+const isDraggedOver = ref(false);
+const isInitialExpanded = ref(false);
+const instruction = ref<Extract<Instruction, { type: 'reorder-above' | 'reorder-below' | 'make-child' }> | null>(null);
+
+const mode = computed(() => {
+	if (props.hasChildren)
+		return 'expanded'
+	if (props.index + 1 === props.parentItem?.children?.length)
+		return 'last-in-group'
+	return 'standard'
+});
+
+watchEffect((onCleanup) => {
+	const currentElement = unrefElement(element) as HTMLElement;
+
+	if (!currentElement)
+		return
+
+	const item = { ...props.value, level: props.level, id: props._id }
+
+	const expandItem = () => {
+		if (!element.value?.isExpanded) {
+				element.value?.handleToggle()
+		}
+	}
+
+	const closeItem = () => {
+		if (element.value?.isExpanded) {
+				element.value?.handleToggle()
+		}
+	}
+
+	const dndFunction = combine(
+		draggable({
+			element: currentElement,
+			getInitialData: () => item,
+			onDragStart: () => {
+				isDragging.value = true
+				isInitialExpanded.value = element.value?.isExpanded ?? false
+				closeItem()
+			},
+			onDrop: () => {
+				isDragging.value = false
+				if (isInitialExpanded.value)
+					expandItem()
+			},
+		}),
+
+		dropTargetForElements({
+			element: currentElement,
+			getData: ({ input, element }) => {
+				const data = { id: item.id }
+
+				return attachInstruction(data, {
+					input,
+					element,
+					indentPerLevel: 16,
+					currentLevel: props.level,
+					mode: mode.value,
+					block: [],
+				})
+			},
+			canDrop: ({ source }) => {
+				return source.data.id !== item.id
+			},
+			onDrag: ({ self }) => {
+				instruction.value = extractInstruction(self.data) as typeof instruction.value
+			},
+			onDragEnter: ({ source }) => {
+				if (source.data.id !== item.id) {
+					isDraggedOver.value = true
+				}
+			},
+			onDragLeave: () => {
+				isDraggedOver.value = false
+				instruction.value = null
+			},
+			onDrop: ({ location }) => {
+				isDraggedOver.value = false
+				instruction.value = null
+			},
+			getIsSticky: () => true,
+		}),
+
+		monitorForElements({
+			canMonitor: ({ source }) => {
+				return source.data.id !== item.id
+			},
+		}),
+	)
+
+	// Cleanup dnd function
+	onCleanup(() => dndFunction())
+})
+</script>
\ No newline at end of file
diff --git a/db.sqlite b/db.sqlite
index d23b34b..cc60573 100644
Binary files a/db.sqlite and b/db.sqlite differ
diff --git a/db.sqlite-shm b/db.sqlite-shm
index 16848b9..9ecd351 100644
Binary files a/db.sqlite-shm and b/db.sqlite-shm differ
diff --git a/db.sqlite-wal b/db.sqlite-wal
index 3741197..5c680f5 100644
Binary files a/db.sqlite-wal and b/db.sqlite-wal differ
diff --git a/package.json b/package.json
index 6a8bd65..69ff00f 100644
--- a/package.json
+++ b/package.json
@@ -8,6 +8,7 @@
   },
   "dependencies": {
     "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
+    "@atlaskit/pragmatic-drag-and-drop-hitbox": "^1.0.3",
     "@iconify/vue": "^4.1.2",
     "@nuxtjs/color-mode": "^3.5.2",
     "@nuxtjs/tailwindcss": "^6.12.2",
diff --git a/pages/explore/edit/[...path].vue b/pages/explore/edit/[...path].vue
index 8dd0394..40ace66 100644
--- a/pages/explore/edit/[...path].vue
+++ b/pages/explore/edit/[...path].vue
@@ -20,7 +20,7 @@
             <template v-if="page.type === 'markdown'">
                 <SplitterGroup direction="horizontal" class="flex-1 w-full flex" >
                     <SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }" :defaultSize="50">
-                        <textarea v-model="page.content" class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto" :class="{ 'hidden': isCollapsed }"></textarea>
+                        <textarea v-model="content" class="flex-1 bg-transparent appearance-none outline-none max-h-full resize-none !overflow-y-auto" :class="{ 'hidden': isCollapsed }"></textarea>
                     </SplitterPanel>
                     <SplitterResizeHandle class="bg-light-35 dark:bg-dark-35 w-px xl!mx-4 mx-2" />
                     <SplitterPanel asChild collapsible :collapsedSize="0" :minSize="20" v-slot="{ isCollapsed }">
@@ -51,12 +51,13 @@ import FakeA from '~/components/prose/FakeA.vue';
 const route = useRouter().currentRoute;
 const path = computed(() => Array.isArray(route.value.params.path) ? route.value.params.path[0] : route.value.params.path);
 const { user, loggedIn } = useUserSession();
+const sessionContent = useSessionStorage<string | undefined>(path.value, undefined);
 
 const toaster = useToast();
 const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
 
 const { data: page, status, error } = await useLazyFetch(`/api/file/${encodeURIComponent(path.value)}`, { watch: [ route, path ]});
-const content = computed(() => page.value?.content);
+const content = computed(() => sessionContent.value ?? page.value?.content);
 const debounced = useDebounce(content, 250);
 
 if(!loggedIn || (page.value && page.value.owner !== user.value?.id))
@@ -64,6 +65,10 @@ if(!loggedIn || (page.value && page.value.owner !== user.value?.id))
     useRouter().replace({ name: 'explore-path', params: { path: path.value } });
 }
 
+watch(debounced, (value) => {
+    sessionContent.value = value;
+});
+
 async function save(): Promise<void>
 {
     saveStatus.value = 'pending';
diff --git a/pages/explore/edit/index.vue b/pages/explore/edit/index.vue
index a24c1d6..6e27d9d 100644
--- a/pages/explore/edit/index.vue
+++ b/pages/explore/edit/index.vue
@@ -1,37 +1,49 @@
 <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>
+	<Head>
+		<Title>d[any] - Configuration du projet</Title>
+	</Head>
+	<div class="flex flex-1 flex-row gap-4 p-6 items-start">
+		<DraggableTree 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] max-h-full" 
+		:items="navigation ?? undefined" :get-key="(item) => item.path" @updateTree="drop">
+			<template #default="{ handleToggle, handleSelect, isExpanded, isSelected, isDragging, isDraggedOver, item }">
+				<div class="flex flex-1 px-2" :class="{ 'opacity-50': isDragging }" :style="{ 'padding-left': `${item.level - 0.5}em` }">
+					<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>
+				</div>
+			</template>
+			<template #hint="{ instruction }">
+				<div v-if="instruction" class="absolute h-full w-full top-0 left-0 border-light-50 dark:border-dark-50" :class="{
+					'!border-b-2': instruction?.type === 'reorder-below',
+					'!border-t-2': instruction?.type === 'reorder-above',
+					'!border-2 rounded': instruction?.type === 'make-child',
+					}"></div>
+			</template>
+		</DraggableTree>
+		<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">
 import type { NavigationTreeItem } from '~/server/api/navigation.get';
 import { Icon } from '@iconify/vue/dist/iconify.js';
+import type { Instruction } from '@atlaskit/pragmatic-drag-and-drop-hitbox/dist/types/tree-item';
+import { parsePath } from '#shared/general.utils';
 
 definePageMeta({
-    rights: ['admin', 'editor'],
+	rights: ['admin', 'editor'],
 })
 
 const route = useRouter().currentRoute;
@@ -40,35 +52,187 @@ const path = computed(() => Array.isArray(route.value.params.path) ? route.value
 const toaster = useToast();
 const saveStatus = ref<'idle' | 'pending' | 'success' | 'error'>('idle');
 
-const { data: navigation, status, error } = await useLazyFetch(`/api/navigation`);
+const { data: navigation } = await useLazyFetch(`/api/navigation`);
 const selected = ref<NavigationTreeItem>();
 
+const tree = {
+  remove(data: NavigationTreeItem[], id: string): NavigationTreeItem[] {
+	return data
+	  .filter(item => parsePath(item.title) !== id)
+	  .map((item) => {
+		if (tree.hasChildren(item)) {
+		  return {
+			...item,
+			children: tree.remove(item.children ?? [], id),
+		  };
+		}
+		return item;
+	  });
+  },
+  insertBefore(data: NavigationTreeItem[], targetId: string, newItem: NavigationTreeItem): NavigationTreeItem[] {
+	return data.flatMap((item) => {
+	  if (parsePath(item.title) === targetId)
+		return [newItem, item];
 
-function flatten(arr: NavigationTreeItem[]): string[]
-{
-    return arr.flatMap(e => [e.path, ...flatten(e.children ?? [])]);
+	  if (tree.hasChildren(item)) {
+		return {
+		  ...item,
+		  children: tree.insertBefore(item.children ?? [], targetId, newItem),
+		};
+	  }
+	  return item;
+	});
+  },
+  insertAfter(data: NavigationTreeItem[], targetId: string, newItem: NavigationTreeItem): NavigationTreeItem[] {
+	return data.flatMap((item) => {
+	  if (parsePath(item.title) === targetId)
+		return [item, newItem];
+
+	  if (tree.hasChildren(item)) {
+		return {
+		  ...item,
+		  children: tree.insertAfter(item.children ?? [], targetId, newItem),
+		};
+	  }
+
+	  return item;
+	});
+  },
+  insertChild(data: NavigationTreeItem[], targetId: string, newItem: NavigationTreeItem): NavigationTreeItem[] {
+	return data.flatMap((item) => {
+	  if (parsePath(item.title) === targetId) {
+		// already a parent: add as first child
+		return {
+		  ...item,
+		  // opening item so you can see where item landed
+		  isOpen: true,
+		  children: [newItem, ...item.children ?? []],
+		};
+	  }
+
+	  if (!tree.hasChildren(item))
+		return item;
+
+	  return {
+		...item,
+		children: tree.insertChild(item.children ?? [], targetId, newItem),
+	  };
+	});
+  },
+  find(data: NavigationTreeItem[], itemId: string): NavigationTreeItem | undefined {
+	for (const item of data) {
+	  if (parsePath(item.title) === itemId)
+		return item;
+
+	  if (tree.hasChildren(item)) {
+		const result = tree.find(item.children ?? [], itemId);
+		if (result)
+		  return result;
+	  }
+	}
+  },
+  getPathToItem({
+	current,
+	targetId,
+	parentIds = [],
+  }: {
+	current: NavigationTreeItem[]
+	targetId: string
+	parentIds?: string[]
+  }): string[] | undefined {
+	for (const item of current) {
+	  if (parsePath(item.title) === targetId)
+		return parentIds;
+
+	  const nested = tree.getPathToItem({
+		current: (item.children ?? []),
+		targetId,
+		parentIds: [...parentIds, parsePath(item.title)],
+	  });
+	  if (nested)
+		return nested;
+	}
+  },
+  hasChildren(item: NavigationTreeItem): boolean {
+	return (item.children ?? []).length > 0;
+  },
+}
+
+function updateTree(instruction: Instruction, itemId: string, targetId: string) {
+	if(!navigation.value)
+		return;
+
+	const item = tree.find(navigation.value, itemId);
+
+	if(!item)
+		return;
+	
+	if (instruction.type === 'reparent') {
+		const path = tree.getPathToItem({
+			current: navigation.value,
+			targetId: targetId,
+		});
+		if (!path) {
+			console.error(`missing ${path}`);
+			return;
+		}
+
+		const desiredId = path[instruction.desiredLevel];
+		let result = tree.remove(navigation.value, itemId);
+		result = tree.insertAfter(result, desiredId, item);
+		return result;
+	}
+
+	// the rest of the actions require you to drop on something else
+	if (itemId === targetId)
+		return navigation.value;
+
+	if (instruction.type === 'reorder-above') {
+		let result = tree.remove(navigation.value, itemId);
+		result = tree.insertBefore(result, targetId, item);
+		return result;
+	}
+
+	if (instruction.type === 'reorder-below') {
+		let result = tree.remove(navigation.value, itemId);
+		result = tree.insertAfter(result, targetId, item);
+		return result;
+	}
+
+	if (instruction.type === 'make-child') {
+		let result = tree.remove(navigation.value, itemId);
+		result = tree.insertChild(result, targetId, item);
+		return result;
+	}
+
+  return navigation.value;
+}
+
+function drop(instruction: Instruction, itemId: string, targetId: string)
+{          
+	navigation.value = updateTree(instruction, itemId, targetId) ?? navigation.value;
 }
 async function save(): Promise<void>
 {
-    saveStatus.value = 'pending';
-    try {
-        await $fetch(`/api/navigation`, {
-            method: 'post',
-            body: navigation.value,
-        });
-        saveStatus.value = 'success';
+	saveStatus.value = 'pending';
+	try {
+		await $fetch(`/api/navigation`, {
+			method: 'post',
+			body: navigation.value,
+		});
+		saveStatus.value = 'success';
 
-        toaster.clear('error');
-        toaster.add({
-            type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
-        });
+		toaster.clear('error');
+		toaster.add({
+			type: 'success', content: 'Contenu enregistré', timer: true, duration: 10000
+		});
 
-        useRouter().push({ name: 'explore-path', params: { path: path.value } });
-    } catch(e: any) {
-        toaster.add({
-            type: 'error', content: e.message, timer: true, duration: 10000
-        })
-        saveStatus.value = 'error';
-    }
+		useRouter().push({ name: 'explore-path', params: { path: path.value } });
+	} catch(e: any) {
+		toaster.add({
+			type: 'error', content: e.message, timer: true, duration: 10000
+		})
+		saveStatus.value = 'error';
+	}
 }
 </script>
\ No newline at end of file
diff --git a/server/api/navigation.get.ts b/server/api/navigation.get.ts
index e386e92..12fe548 100644
--- a/server/api/navigation.get.ts
+++ b/server/api/navigation.get.ts
@@ -2,7 +2,7 @@ import useDatabase from '~/composables/useDatabase';
 import { explorerContentTable } from '~/db/schema';
 import type { NavigationItem } from '~/schemas/navigation';
 
-export type NavigationTreeItem = NavigationItem & { children?: NavigationItem[] };
+export type NavigationTreeItem = NavigationItem & { children?: NavigationTreeItem[] };
 export default defineEventHandler(async (e) => {
     const { user } = await getUserSession(e);
 
diff --git a/shared/general.utils.ts b/shared/general.utils.ts
index 6643232..58fabe4 100644
--- a/shared/general.utils.ts
+++ b/shared/general.utils.ts
@@ -2,6 +2,10 @@ export function unifySlug(slug: string | string[]): string
 {
     return (Array.isArray(slug) ? slug.join('/') : slug);
 }
+export function parsePath(path: string): string
+{
+    return path.toLowerCase().replaceAll(" ", "-").normalize("NFD").replace(/[\u0300-\u036f]/g, "");
+}
 export function parseId(id: string | undefined): string |undefined
 {
     return id?.normalize('NFD')?.replace(/[\u0300-\u036f]/g, '')?.replace(/^\d\. */g, '')?.replace(/\s/g, "-")?.replace(/%/g, "-percent")?.replace(/\?/g, "-q")?.toLowerCase();