diff --git a/app.vue b/app.vue
index 3140f21..a37687e 100644
--- a/app.vue
+++ b/app.vue
@@ -4,7 +4,7 @@
 		<NuxtLoadingIndicator />
 		<TooltipProvider>
 			<NuxtLayout>
-				<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full relative">
+				<div class="xl:px-12 xl:py-8 lg:px-8 lg:py-6 px-6 py-3 flex flex-1 justify-center overflow-auto max-h-full relative *:overflow-x-hidden *:w-full *:h-full">
 					<NuxtPage />
 				</div>
 			</NuxtLayout>
diff --git a/components/TrainingViewer.vue b/components/TrainingViewer.vue
index 869d7c7..3c0e588 100644
--- a/components/TrainingViewer.vue
+++ b/components/TrainingViewer.vue
@@ -1,28 +1,120 @@
 <script setup lang="ts">
+import { clamp } from '#shared/general.util';
 import { MAIN_STATS, mainStatTexts, type CharacterConfig } from '~/types/character';
-import PreviewA from './prose/PreviewA.vue';
 
 const { config } = defineProps<{
-    config: CharacterConfig
+    config: CharacterConfig,
 }>();
 
-const position = ref(0);
+const dragger = useTemplateRef<HTMLElement | null>('dragger'), items = useTemplateRef<HTMLElement[] | null>('items');
+const position = ref(0), id = ref<number>(0);
+const dragging = ref(false), offset = ref(0);
+
+const dragend = () => {
+    window.removeEventListener('mousemove', dragmove);
+    window.removeEventListener('mouseup', dragend);
+
+    dragging.value = false;
+};
+const dragmove = (e: MouseEvent) => {
+    const box = dragger.value!.getBoundingClientRect();
+    offset.value = clamp(offset.value - e.movementX, 0, (320+32+2) * 16);
+    if(dragger.value) dragger.value.scrollLeft = offset.value;
+};
+const dragstart = () => {
+    window.addEventListener('mousemove', dragmove);
+    window.addEventListener('mouseup', dragend);
+
+    dragging.value = true;
+};
+const wheel = (e: WheelEvent) => {
+    if(dragging.value) return;
+
+    const box = dragger.value!.getBoundingClientRect();
+    offset.value = clamp(offset.value + e.deltaY, 0, (320+32+2) * 16);
+    if(dragger.value) dragger.value.scrollLeft = offset.value;
+}
+onMounted(() => {
+
+    dragger.value?.addEventListener('mousedown', dragstart);
+    dragger.value?.addEventListener('wheel', wheel);
+
+    transition(1, 0);
+});
+onUnmounted(() => {
+    dragger.value?.removeEventListener('mousedown', dragstart);
+    dragger.value?.removeEventListener('wheel', wheel);
+});
+function transition(from: number, to: number)
+{
+    if(!items.value || from === to)
+        return;
+
+    position.value = to;
+    items.value![to].style.visibility = 'visible';
+    items.value![from].style.opacity = '0';
+    items.value![to].style.opacity = '1';
+
+    for(let i = 0; i < MAIN_STATS.length; i++)
+    {
+        if(i < to)
+            items.value![i].style.top = `-25%`;
+        else
+            items.value![i].style.top = `25%`;
+    }
+    items.value![to].style.top = `0%`;
+
+    clearTimeout(id.value);
+    //@ts-ignore
+    id.value = setTimeout(() => {
+        items.value![from].style.visibility = 'hidden';
+    }, 200);
+}
 </script>
 
-<template>
-    <TabsRoot class="flex flex-1 flex-row justify-start items-stretch w-full" :default-value="MAIN_STATS[0]">
-        <TabsList class="flex flex-col gap-3 relative">
-            <TabsTrigger v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="position = i"></TabsTrigger>
-            <!-- <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator> -->
+<!-- <template>
+    <div class="flex flex-1 flex-row justify-start w-full max-h-full h-full overflow-hidden gap-8 relative">
+        <div class="flex flex-col gap-3 relative items-center">
+            <span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent 
+            hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="() => transition(position, i)"></span>
             <span :style="{ 'top': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[top]
             after:content-[attr(data-text)] after:absolute after:-top-2 after:left-4 after:p-px after:bg-light-0 dark:after:bg-dark-0"></span>
-        </TabsList>
-        <TabsContent v-for="(stat) of MAIN_STATS" :value="stat" class="flex-1">
-            <div class="flex flex-row overflow-x-auto w-full flex-nowrap gap-4">
-                <div class="w-96 flex flex-col gap-4 justify-between" v-for="(level) of config.training[stat]">
-                    <div class="border border-light-35 dark:border-dark-35 px-3 py-1" v-for="(option) of level"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
+        </div>
+        <div class="flex flex-1 flex-col justify-center relative cursor-grab" ref="dragger" :class="{ 'cursor-grabbing': dragging }">
+            <div v-for="(stat) of MAIN_STATS" :value="stat" class="flex-1 transition-[opacity,transform] items-center hidden absolute" ref="items" :style="{ 'left': `${-offset}%` }">
+                <div class="flex flex-row overflow-x-auto items-center w-full gap-4">
+                    <div class="w-96 flex flex-col gap-4 justify-between" v-for="(level, i) of config.training[stat]">
+                        <template v-for="(option) of level">
+                            <slot :stat="stat" :level="i" :option="option"></slot>
+                        </template>
+                    </div>
                 </div>
             </div>
-        </TabsContent>
-    </TabsRoot>
+        </div>
+    </div>
+</template> -->
+
+<template>
+    <div class="w-full h-full flex gap-8 max-w-full relative">
+        <div class="flex flex-col gap-3 relative items-center">
+            <span v-for="(stat, i) of MAIN_STATS" :value="stat" class="block w-2.5 h-2.5 m-px outline outline-1 outline-transparent 
+            hover:outline-light-70 dark:hover:outline-dark-70 rounded-full bg-light-40 dark:bg-dark-40 cursor-pointer" @click="() => transition(position, i)"></span>
+            <span :style="{ 'top': position * 1.5 + 'em' }" :data-text="mainStatTexts[MAIN_STATS[position]]" class="rounded-full w-3 h-3 bg-accent-blue absolute transition-[top]
+            after:content-[attr(data-text)] after:absolute after:-top-2 after:left-4 after:p-px after:bg-light-0 dark:after:bg-dark-0"></span>
+        </div>
+        <div class="absolute top-0 left-24 z-10">
+            <slot name="addin" :stat="MAIN_STATS[position]"></slot>
+        </div>
+        <div ref="dragger" class="flex flex-col gap-4 pb-4 cursor-grab active:cursor-grabbing select-none overflow-hidden h-full w-full relative">
+            <div v-for="(stat, name) in config.training" class="flex flex-1 gap-4 items-center absolute h-full z-0" ref="items" :style="{ 'opacity': '0', 'visibility': 'hidden', 'transition': 'opacity 200ms ease-in-out, top 200ms ease-in-out' }">
+                <div v-for="(options, level) in stat" class="flex-shrink-0 w-80">
+                    <div class="space-y-2" @mousedown.stop>
+                        <template v-for="(option, i) in options">
+                            <slot :stat="name" :level="level" :index="i" :option="option"></slot>
+                        </template>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
 </template>
\ No newline at end of file
diff --git a/db.sqlite-shm b/db.sqlite-shm
index 2d9328e..222bca1 100644
Binary files a/db.sqlite-shm and b/db.sqlite-shm differ
diff --git a/db.sqlite-wal b/db.sqlite-wal
index 60414e6..2e01350 100644
Binary files a/db.sqlite-wal and b/db.sqlite-wal differ
diff --git a/pages/character/[id]/edit.client.vue b/pages/character/[id]/edit.client.vue
index 27285d9..c18702f 100644
--- a/pages/character/[id]/edit.client.vue
+++ b/pages/character/[id]/edit.client.vue
@@ -34,9 +34,7 @@ function abilitySpecialFeatures(type: "points" | "max", curiosity: DoubleIndex<T
 }
 </script>
 <script setup lang="ts">
-import { Icon } from '@iconify/vue/dist/iconify.js';
 import PreviewA from '~/components/prose/PreviewA.vue';
-import { clamp } from '~/shared/general.util';
 import { defaultCharacter, elementTexts, mainStatTexts, spellTypeTexts, type Ability, type Character, type CharacterConfig, type DoubleIndex, type Level, type MainStat, type RaceOption, type SpellConfig, type SpellElement, type SpellType, type TrainingLevel, type TrainingOption } from '~/types/character';
 
 definePageMeta({
@@ -60,9 +58,8 @@ const spellFilter = ref<{
     tags: [],
 });
 
-const peopleOpen = ref(false), trainingOpen = ref(false), abilityOpen = ref(false), spellOpen = ref(false), notesOpen = ref(false), trainingTab = ref(0);
 const raceOptions = computed(() => data.value.people !== undefined ? characterConfig.peoples[data.value.people!].options : undefined);
-const selectedRaceOptions = computed(() => raceOptions !== undefined ? data.value.leveling!.map(e => raceOptions.value![e[0]][e[1]]) : undefined);
+const selectedRaceOptions = computed(() => raceOptions.value ? data.value.leveling!.map(e => raceOptions.value![e[0]][e[1]]) : undefined);
 const trainingPoints = computed(() => raceOptions.value ? data.value.leveling?.reduce((p, v) => p + (raceOptions.value![v[0]][v[1]].training ?? 0), 0) : 0);
 const training = computed(() => Object.entries(characterConfig.training).map(e => [e[0], getFeaturesOf(e[0] as MainStat, data.value.training[e[0] as MainStat])]) as [MainStat, TrainingOption[]][]);
 const maxTraining = computed(() => Object.entries(data.value.training).reduce((p, v) => { p[v[0] as MainStat] = v[1].reduce((_p, _v) => Math.max(_p, _v[0]) , 0); return p; }, {} as Record<MainStat, number>));
@@ -254,128 +251,110 @@ useShortcuts({
                 <Tooltip side="right" message="Ctrl+S"><Button @click="() => save(true)">Enregistrer</Button></Tooltip>
             </div>
         </div>
-        <div class="flex flex-1 flex-col min-w-[800px] w-[75vw] max-w-[1200px]">
-            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="peopleOpen" @update:model-value="() => { trainingOpen = false; abilityOpen = false; spellOpen = false; notesOpen = false; }">
-                <template #label>
-                    <span class="font-bold text-xl">Peuple</span>
-                </template>
-                <template #default>
-                    <div class="m-2 overflow-auto">
-                        <Combobox label="Peuple de votre personnage" v-model="data.people" :options="config.peoples.map((people, index) => [people.name, index])" @update:model-value="(index) => { data.people = index as number | undefined; data.leveling = [[1, 0]]}" />
-                        <template v-if="data.people !== undefined">
-                            <div class="w-full border-b border-light-30 dark:border-dark-30 pb-4">
-                                <span class="text-sm text-light-70 dark:text-dark-70">{{ characterConfig.peoples[data.people].description }}</span>
+        <TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 px-8 w-full overflow-hidden" default-value="people">
+            <TabsList class="flex flex-row gap-4 self-center relative px-4">
+                <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
+                <TabsTrigger value="people" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</TabsTrigger>
+                <TabsTrigger :disabled="data.people === undefined" value="training" class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent">Entrainement</TabsTrigger>
+                <TabsTrigger :disabled="data.people === undefined" value="abilities" class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent">Compétences</TabsTrigger>
+                <TabsTrigger :disabled="data.people === undefined" value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue disabled:text-light-50 dark:disabled:text-dark-50 disabled:hover:border-transparent">Sorts</TabsTrigger>
+                <TabsTrigger value="notes" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Notes</TabsTrigger>
+            </TabsList>
+            <TabsContent value="people" class="flex-1 overflow-auto w-full h-full outline-none" forceMount>
+                <div class="m-2 overflow-auto">
+                    <Combobox label="Peuple de votre personnage" v-model="data.people" :options="config.peoples.map((people, index) => [people.name, index])" @update:model-value="(index) => { data.people = index as number | undefined; data.leveling = [[1, 0]]}" />
+                    <template v-if="data.people !== undefined">
+                        <div class="w-full border-b border-light-30 dark:border-dark-30 pb-4">
+                            <span class="text-sm text-light-70 dark:text-dark-70">{{ characterConfig.peoples[data.people].description }}</span>
+                        </div>
+                        <div class="flex flex-col gap-4 max-h-[50vh] pe-4 relative">
+                            <span class="sticky top-0 py-1 bg-light-0 dark:bg-dark-0 z-10 text-xl">Niveaux restants: {{ data.level - (data.leveling?.length ?? 0) }}</span>
+                            <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.peoples[data.people].options" :class="{ 'opacity-30': index > data.level }">
+                                <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-64" v-for="(option, i) of level" @click="selectRaceOption(parseInt(index as unknown as string, 10) as Level, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= data.level, '!border-accent-blue bg-accent-blue bg-opacity-20': data.leveling?.some(e => e[0] == index && e[1] === i) ?? false }"><MarkdownRenderer :content="raceOptionToText(option)" /></div>
                             </div>
-                            <div class="flex flex-col gap-4 max-h-[50vh] pe-4 relative">
-                                <span class="sticky top-0 py-1 bg-light-0 dark:bg-dark-0 z-10 text-xl">Niveaux restants: {{ data.level - (data.leveling?.length ?? 0) }}</span>
-                                <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.peoples[data.people].options" :class="{ 'opacity-30': index > data.level }">
-                                    <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-64" v-for="(option, i) of level" @click="selectRaceOption(parseInt(index as unknown as string, 10) as Level, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= data.level, '!border-accent-blue bg-accent-blue bg-opacity-20': data.leveling?.some(e => e[0] == index && e[1] === i) ?? false }"><MarkdownRenderer :content="raceOptionToText(option)" /></div>
-                                </div>
-                            </div>
-                        </template>
-                    </div>
-                </template>
-            </Collapsible>
-            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="trainingOpen" :disabled="data.people === undefined" @update:model-value="() => { peopleOpen = false; abilityOpen = false; spellOpen = false; notesOpen = false; }">
-                <template #label>
-                    <span class="font-bold text-xl">Entrainement</span>
-                </template>
-                <template #default>
-                    <div class="flex flex-col gap-4 max-h-[50vh] pe-4 relative overflow-y-auto overflow-x-hidden">
-                        <div class="sticky top-0 z-10 py-2 bg-light-0 dark:bg-dark-0 flex justify-between">
-                            <Icon icon="radix-icons:caret-left" class="w-6 h-6 border border-light-30 dark:border-dark-30 cursor-pointer" @click="() => trainingTab = clamp(trainingTab - 1, 0, 6)" />
+                        </div>
+                    </template>
+                </div>
+            </TabsContent>
+            <TabsContent value="training" class="flex-1 overflow-hidden w-full h-full outline-none" forceMount>
+                <TrainingViewer :config="characterConfig">
+                    <template #default="{ stat, level, option, index }">
+                        <div @click="switchTrainingOption(stat, parseInt(level as unknown as string, 10) as TrainingLevel, index)" :class="{ 'opacity-30': level > maxTraining[stat] + 1, 'hover:border-light-60 dark:hover:border-dark-60': level <= maxTraining[stat] + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': level == 0 || (data.training[stat]?.some(e => e[0] == level && e[1] === index) ?? false) }" class="border border-light-35 dark:border-dark-35 px-3 py-1 select-none cursor-pointer hover:border-light-50 dark:hover:border-dark-50">
+                            <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" />
+                        </div>
+                    </template>
+                    <template #addin="{ stat }">
+                        <div class="bg-light-0 dark:bg-dark-0 z-10">
                             <span class="text-xl" :class="{ 'text-light-red dark:text-dark-red': (trainingPoints ?? 0) < trainingSpent }">Points d'entrainement restants: {{ (trainingPoints ?? 0) - trainingSpent }}</span>
-                            <Icon icon="radix-icons:caret-right" class="w-6 h-6 border border-light-30 dark:border-dark-30 cursor-pointer" @click="() => trainingTab = clamp(trainingTab + 1, 0, 6)" />
-                        </div>
-                        <div class="flex gap-4 relative" :style="`left: calc(calc(-100% - 1em) * ${trainingTab}); transition: left .5s ease;`">
-                            <div class="flex w-full flex-shrink-0 flex-col gap-2 relative" v-for="(text, stat) of mainStatTexts">
-                                <div class="sticky top-1 mx-16 z-10 flex justify-between">
-                                    <div class="py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 text-xl font-bold border border-light-30 dark:border-dark-30 flex">{{ text }}
-                                        <div class="flex gap-2" v-if="maxTraining[stat] >= 0">: Niveau {{ maxTraining[stat] }} (+{{ modifiers[stat] }} 
-                                            <NumberFieldRoot :default-value="data.modifiers[stat] ?? 0" v-model="data.modifiers[stat]" class="flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
-                                data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
-                                                <NumberFieldInput class="tabular-nums w-8 text-base font-normal bg-transparent px-2 outline-none caret-light-50 dark:caret-dark-50" />
-                                            </NumberFieldRoot>
-                                        )</div></div>
-                                    <div class="py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 justify-center items-center" :class="{ 'text-light-red dark:text-dark-red': (modifierPoints ?? 0) < modifierSpent }">Modifieur bonus: {{ modifierPoints - modifierSpent }}</div>
-                                </div>
-                                <div class="flex flex-row gap-4 justify-center" v-for="(level, index) of characterConfig.training[stat]" :class="{ 'opacity-30': index > maxTraining[stat] + 1 }">
-                                    <div class="border border-light-40 dark:border-dark-40 cursor-pointer px-2 py-1 w-1/3" v-for="(option, i) of level" @click="switchTrainingOption(stat, parseInt(index as unknown as string, 10) as TrainingLevel, i)" :class="{ 'hover:border-light-60 dark:hover:border-dark-60': index <= maxTraining[stat] + 1, '!border-accent-blue bg-accent-blue bg-opacity-20': index == 0 || (data.training[stat]?.some(e => e[0] == index && e[1] === i) ?? false) }"><MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" /></div>
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-                </template>
-            </Collapsible>
-            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="abilityOpen" :disabled="data.people === undefined" @update:model-value="() => { trainingOpen = false; peopleOpen = false; spellOpen = false; notesOpen = false; }">
-                <template #label>
-                    <span class="font-bold text-xl">Compétences</span>
-                </template>
-                <template #default>
-                    <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
-                        <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex justify-between">
-                            <span class="text-xl -mx-2" :class="{ 'text-light-red dark:text-dark-red': (abilityPoints ?? 0) < abilitySpent }">Points d'entrainement restants: {{ (abilityPoints ?? 0) - abilitySpent }}</span>
-                        </div>
-                        <div class="grid gap-4 grid-cols-6">
-                            <div v-for="(ability, index) of characterConfig.abilities" class="flex flex-col items-center border border-light-30 dark:border-dark-30 p-2">
-                                <div class="flex items-center justify-center gap-4">
-                                    <NumberFieldRoot :min="0" :default-value="data.abilities[index] ? data.abilities[index][0] : 0" @update:model-value="(value) => { data.abilities[index] = [value, data.abilities[index] ? data.abilities[index][1] : 0]; }" class="border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
-                                data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
-                                        <NumberFieldInput class="tabular-nums w-8 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+                            <div class="py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 font-bold flex flex-row justify-between">
+                                <span class="flex gap-2" v-if="maxTraining[stat] >= 0">Niveau {{ maxTraining[stat] }}</span>
+                                <span class="flex gap-6">
+                                    Modifieur: +{{ modifiers[stat] }}
+                                    <NumberFieldRoot :default-value="data.modifiers[stat] ?? 0" v-model="data.modifiers[stat]" class="flex justify-center border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
+                        data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
+                                        <NumberFieldInput class="tabular-nums w-8 text-base font-normal bg-transparent px-2 outline-none caret-light-50 dark:caret-dark-50" />
                                     </NumberFieldRoot>
-                                    <span class="font-bold col-span-4">/{{ abilityMax[index] }}</span>
-                                </div>
-                                <span class="text-xl font-bold flex-2">{{ ability.name }}</span>
-                                <span class="text-sm text-light-70 dark:text-dark-70 flex-1">({{ mainStatTexts[ability.max[0]] }} + {{ mainStatTexts[ability.max[1]] }})</span>
+                                </span>
                             </div>
+                            <div class="py-1 px-3 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 justify-center items-center" :class="{ 'text-light-red dark:text-dark-red': (modifierPoints ?? 0) < modifierSpent }">Modifieur bonus: {{ modifierPoints - modifierSpent }}</div>
+                        </div>
+                    </template>
+                </TrainingViewer>
+            </TabsContent>
+            <TabsContent value="abilities" class="flex-1 overflow-auto w-full h-full outline-none" forceMount>
+                <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
+                    <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex justify-between">
+                        <span class="text-xl -mx-2" :class="{ 'text-light-red dark:text-dark-red': (abilityPoints ?? 0) < abilitySpent }">Points d'entrainement restants: {{ (abilityPoints ?? 0) - abilitySpent }}</span>
+                    </div>
+                    <div class="grid gap-4 grid-cols-6">
+                        <div v-for="(ability, index) of characterConfig.abilities" class="flex flex-col items-center border border-light-30 dark:border-dark-30 p-2">
+                            <div class="flex items-center justify-center gap-4">
+                                <NumberFieldRoot :min="0" :default-value="data.abilities[index] ? data.abilities[index][0] : 0" @update:model-value="(value) => { data.abilities[index] = [value, data.abilities[index] ? data.abilities[index][1] : 0]; }" class="border border-light-35 dark:border-dark-35 bg-light-20 dark:bg-dark-20 data-[disabled]:border-light-20 dark:data-[disabled]:border-dark-20 data-[disabled]:bg-light-20 dark:data-[disabled]:bg-dark-20 
+                            data-[disabled]:text-light-70 dark:data-[disabled]:text-dark-70 hover:border-light-50 dark:hover:border-dark-50 has-[:focus]:shadow-raw transition-[box-shadow] has-[:focus]:shadow-light-40 dark:has-[:focus]:shadow-dark-40">
+                                    <NumberFieldInput class="tabular-nums w-8 bg-transparent px-3 py-1 outline-none caret-light-50 dark:caret-dark-50" />
+                                </NumberFieldRoot>
+                                <span class="font-bold col-span-4">/{{ abilityMax[index] }}</span>
+                            </div>
+                            <span class="text-xl font-bold flex-2">{{ ability.name }}</span>
+                            <span class="text-sm text-light-70 dark:text-dark-70 flex-1">({{ mainStatTexts[ability.max[0]] }} + {{ mainStatTexts[ability.max[1]] }})</span>
                         </div>
                     </div>
-                </template>
-            </Collapsible>
-            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="spellOpen" :disabled="data.people === undefined" @update:model-value="() => { trainingOpen = false; peopleOpen = false; abilityOpen = false; notesOpen = false; }">
-                <template #label>
-                    <span class="font-bold text-xl">Sorts</span>
-                </template>
-                <template #default>
-                    <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
-                        <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 items-center">
-                            <span class="text-xl pe-4" :class="{ 'text-light-red dark:text-dark-red': spellsPoints < (data.spells?.length ?? 0) }">Sorts: {{ data.spells?.length ?? 0 }}/{{ spellsPoints }}</span>
-                            <TextInput label="Nom" v-model="spellFilter.text" />
-                            <Combobox label="Rang" v-model="spellFilter.ranks" multiple :options="[['Rang 1', 1], ['Rang 2', 2], ['Rang 3', 3]]" />
-                            <Combobox label="Type" v-model="spellFilter.types" multiple :options="[['Précision', 'precision'], ['Savoir', 'knowledge'], ['Instinct', 'instinct']]" />
-                            <Combobox label="Element" v-model="spellFilter.elements" multiple :options="[['Feu', 'fire'], ['Glace', 'ice'], ['Foudre', 'thunder'], ['Terre', 'earth'], ['Arcane', 'arcana'], ['Air', 'air'], ['Nature', 'nature'], ['Lumière', 'light'], ['Psy', 'psyche']]" />
-                        </div>
-                        <div class="grid gap-4 grid-cols-2">
-                            <div class="py-1 px-2 border border-light-30 dark:border-dark-30 flex flex-col hover:border-light-50 dark:hover:border-dark-50 cursor-pointer" v-for="spell of filterSpells(characterConfig.spells)" :class="{ '!border-accent-blue bg-accent-blue bg-opacity-20': data.spells?.find(e => e === spell.id) }"
-                                @click="() => data.spells?.includes(spell.id) ? data.spells.splice(data.spells.findIndex((e: string) => e === spell.id), 1) : data.spells!.push(spell.id)">
-                                <div class="flex flex-row justify-between">
-                                    <span class="text-lg font-bold">{{ spell.name }}</span>
-                                    <div class="flex flex-row items-center gap-6">
-                                        <div class="flex flex-row text-sm gap-2">
-                                            <span v-for="element of spell.elements" :class="elementTexts[element].class" class="border !border-opacity-50 rounded-full !bg-opacity-20 px-2 py-px">{{ elementTexts[element].text }}</span>
-                                        </div>
-                                        <div class="flex flex-row text-sm gap-1">
-                                            <span class="">Rang {{ spell.rank }}</span><span>/</span>
-                                            <span class="">{{ spellTypeTexts[spell.type] }}</span><span>/</span>
-                                            <span class="">{{ spell.cost }} mana</span><span>/</span>
-                                            <span class="">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
-                                        </div>
+                </div>
+            </TabsContent>
+            <TabsContent value="spells" class="flex-1 overflow-auto w-full h-full outline-none" forceMount>
+                <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
+                    <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 items-center">
+                        <span class="text-xl pe-4" :class="{ 'text-light-red dark:text-dark-red': spellsPoints < (data.spells?.length ?? 0) }">Sorts: {{ data.spells?.length ?? 0 }}/{{ spellsPoints }}</span>
+                        <TextInput label="Nom" v-model="spellFilter.text" />
+                        <Combobox label="Rang" v-model="spellFilter.ranks" multiple :options="[['Rang 1', 1], ['Rang 2', 2], ['Rang 3', 3]]" />
+                        <Combobox label="Type" v-model="spellFilter.types" multiple :options="[['Précision', 'precision'], ['Savoir', 'knowledge'], ['Instinct', 'instinct']]" />
+                        <Combobox label="Element" v-model="spellFilter.elements" multiple :options="[['Feu', 'fire'], ['Glace', 'ice'], ['Foudre', 'thunder'], ['Terre', 'earth'], ['Arcane', 'arcana'], ['Air', 'air'], ['Nature', 'nature'], ['Lumière', 'light'], ['Psy', 'psyche']]" />
+                    </div>
+                    <div class="grid gap-4 grid-cols-2">
+                        <div class="py-1 px-2 border border-light-30 dark:border-dark-30 flex flex-col hover:border-light-50 dark:hover:border-dark-50 cursor-pointer" v-for="spell of filterSpells(characterConfig.spells)" :class="{ '!border-accent-blue bg-accent-blue bg-opacity-20': data.spells?.find(e => e === spell.id) }"
+                            @click="() => data.spells?.includes(spell.id) ? data.spells.splice(data.spells.findIndex((e: string) => e === spell.id), 1) : data.spells!.push(spell.id)">
+                            <div class="flex flex-row justify-between">
+                                <span class="text-lg font-bold">{{ spell.name }}</span>
+                                <div class="flex flex-row items-center gap-6">
+                                    <div class="flex flex-row text-sm gap-2">
+                                        <span v-for="element of spell.elements" :class="elementTexts[element].class" class="border !border-opacity-50 rounded-full !bg-opacity-20 px-2 py-px">{{ elementTexts[element].text }}</span>
+                                    </div>
+                                    <div class="flex flex-row text-sm gap-1">
+                                        <span class="">Rang {{ spell.rank }}</span><span>/</span>
+                                        <span class="">{{ spellTypeTexts[spell.type] }}</span><span>/</span>
+                                        <span class="">{{ spell.cost }} mana</span><span>/</span>
+                                        <span class="">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
                                     </div>
                                 </div>
-                                <MarkdownRenderer :content="spell.effect" />
                             </div>
+                            <MarkdownRenderer :content="spell.effect" />
                         </div>
                     </div>
-                </template>
-            </Collapsible>
-            <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1" v-model="notesOpen" @update:model-value="() => { trainingOpen = false; peopleOpen = false; abilityOpen = false; spellOpen = false; }">
-                <template #label>
-                    <span class="font-bold text-xl">Notes libres</span>
-                </template>
-                <template #default>
-                    <Editor class="min-h-[400px] border border-light-30 dark:border-dark-30" v-model="data.notes" />
-                </template>
-            </Collapsible>
-        </div>
+                </div>
+            </TabsContent>
+            <TabsContent value="notes" class="flex-1 overflow-auto w-full h-full outline-none" forceMount>
+                <Editor class="min-h-[400px] border border-light-30 dark:border-dark-30" :v-model="data.notes" />
+            </TabsContent>
+        </TabsRoot>
     </div>
 </template>
\ No newline at end of file
diff --git a/pages/character/[id]/index.client.vue b/pages/character/[id]/index.client.vue
index 372be63..c11cca6 100644
--- a/pages/character/[id]/index.client.vue
+++ b/pages/character/[id]/index.client.vue
@@ -2,6 +2,7 @@
 import config from '#shared/character-config.json';
 import { Icon } from '@iconify/vue/dist/iconify.js';
 import PreviewA from '~/components/prose/PreviewA.vue';
+import { clamp } from '~/shared/general.util';
 import type { SpellConfig } from '~/types/character';
 import { elementTexts, spellTypeTexts, type CharacterConfig } from '~/types/character';
 
@@ -50,8 +51,8 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
                         <span>{{ character.race === -1 ? "Race inconnue" : characterConfig.peoples[character.race].name }}</span>
                     </div>
                 </div>
-                <div class="flex gap-6 lg:border-l border-light-30 dark:border-dark-30 py-4 ps-4">
-                    <span class="flex flex-row items-center gap-2">PV: {{ character.health - character.values.healht }}/{{ character.health }}</span>
+                <div class="flex flex-col lg:border-l border-light-30 dark:border-dark-30 py-4 ps-4">
+                    <span class="flex flex-row items-center gap-2">PV: {{ character.health - character.values.health }}/{{ character.health }}</span>
                     <span class="flex flex-row items-center gap-2">Mana: {{ character.mana - character.values.mana }}/{{ character.mana }}</span>
                 </div>
             </div>
@@ -60,8 +61,8 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
             </div>
         </div>
         <div class="flex flex-1 flex-col justify-center gap-4 *:py-2">
-            <div class="grid 2xl:grid-cols-12 grid-cols-2 gap-4 items-center border-b border-light-30 dark:border-dark-30">
-                <div class="flex relative justify-between ps-4 gap-2 2xl:col-span-6 lg:col-span-2">
+            <div class="grid 2xl:grid-cols-10 grid-cols-1 gap-4 items-center border-b border-light-30 dark:border-dark-30 me-4 pe-4">
+                <div class="flex relative justify-between ps-4 gap-2 2xl:col-span-6">
                     <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.strength }}</span><span class="text-sm 2xl:text-base">Force</span></div>
                     <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.dexterity }}</span><span class="text-sm 2xl:text-base">Dextérité</span></div>
                     <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.constitution }}</span><span class="text-sm 2xl:text-base">Constitution</span></div>
@@ -70,19 +71,14 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
                     <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.charisma }}</span><span class="text-sm 2xl:text-base">Charisme</span></div>
                     <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">+{{ character.modifier.psyche }}</span><span class="text-sm 2xl:text-base">Psyché</span></div>
                 </div>
-                <div class="flex relative 2xl:border-l border-light-30 dark:border-dark-30 ps-4 2xl:col-span-2">
-                    <div class="flex flex-1 flex-row items-center justify-between">
-                        <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.initiative }}</span><span>Initiative</span></div>
-                        <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">{{ character.speed === false ? "Aucun déplacement" : `${character.speed} cases` }}</span><span>Course</span></div>
-                    </div>
-                    <!-- <div class="absolute top-0 left-0 bottom-0 right-0 bg-light-0 dark:bg-dark-0 bg-opacity-50 dark:bg-opacity-50 text-xl font-bold flex items-center justify-center">Les données secondaires arrivent bientôt.</div> -->
+                <div class="flex flex-1 relative 2xl:border-l border-light-30 dark:border-dark-30 ps-4 2xl:col-span-4 flex-row items-center justify-between">
+                    <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">+{{ character.initiative }}</span><span>Initiative</span></div>
+                    <div class="flex flex-col px-2 items-center"><span class="text-2xl font-bold">{{ character.speed === false ? "Aucun déplacement" : `${character.speed} cases` }}</span><span>Course</span></div>
+                    <Icon icon="ph:shield-checkered" class="w-8 h-8" />
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">{{ clamp(character.defense.static + character.defense.passivedodge + character.defense.passiveparry, 0, character.defense.hardcap) }}</span><span class="text-sm 2xl:text-base">Passive</span></div>
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">{{ clamp(character.defense.static + character.defense.passivedodge + character.defense.activeparry, 0, character.defense.hardcap) }}</span><span class="text-sm 2xl:text-base">Blocage</span></div>
+                    <div class="flex flex-col items-center"><span class="2xl:text-2xl text-xl font-bold">{{ clamp(character.defense.static + character.defense.activedodge + character.defense.passiveparry, 0, character.defense.hardcap) }}</span><span class="text-sm 2xl:text-base">Esquive</span></div>
                 </div>
-                <div class="flex relative border-l border-light-30 dark:border-dark-30 ps-4 2xl:col-span-4">
-                        <div class="flex flex-col px-2">
-                            <span class="text-xl">Défense passive: <span class="text-2xl font-bold">{{ character.defense.static }}</span>/+<span class="text-2xl font-bold">{{ character.defense.passivedodge }}</span>/+<span class="text-2xl font-bold">{{ character.defense.passiveparry }}</span></span>
-                            <span class="text-xl">Défense active: <span class="float-right">+<span class="text-2xl font-bold">{{ character.defense.activedodge }}</span>/+<span class="text-2xl font-bold">{{ character.defense.activeparry }}</span></span></span>
-                        </div>
-                    </div>
             </div>
             <div class="flex flex-1 px-8">
                 <div class="flex flex-col pe-8 gap-4 py-8 w-80 border-r border-light-30 dark:border-dark-30">
@@ -117,12 +113,6 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
                         <span>Sorts de savoir: <span class="font-bold">{{ character.spellranks.knowledge }}</span></span>
                         <span>Sorts d'instinct: <span class="font-bold">{{ character.spellranks.instinct }}</span></span>
                     </div>
-                    <div class="flex flex-col">
-                        <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30 mb-2 flex items-center gap-4">Résistances (Attaque/Défense) <Tooltip side="right" message="Les défenses affichées incluent déjà leur modifieur de statistique."><Icon icon="radix-icons:question-mark-circled" /></Tooltip></span>
-                        <div class="grid grid-cols-3 gap-1">
-                            <div class="flex flex-col px-2 items-center text-sm text-light-70 dark:text-dark-70" v-for="(value, resistance) of character.resistance"><span class="font-bold text-base text-light-100 dark:text-dark-100">+{{ value[0] }}/+{{ value[1] + character.modifier[characterConfig.resistances[resistance].statistic as MainStat] }}</span><span>{{ characterConfig.resistances[resistance].name }}</span></div>
-                        </div>
-                    </div>
                     <div class="flex flex-col">
                         <span class="text-lg font-semibold border-b border-light-30 dark:border-dark-30 mb-2">Compétences</span>
                         <div class="grid grid-cols-3 gap-1">
@@ -131,8 +121,8 @@ text-light-purple dark:text-dark-purple border-light-purple dark:border-dark-pur
                     </div>
                 </div>
                 <TabsRoot default-value="features" class="w-[60rem]">
-                    <TabsList class="flex flex-row gap-4 relative px-4">
-                        <TabsIndicator class="absolute px-8 left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
+                    <TabsList class="flex flex-row relative px-4 gap-4">
+                        <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
                         <TabsTrigger value="features" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Aptitudes</TabsTrigger>
                         <TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts</TabsTrigger>
                         <TabsTrigger value="notes" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Notes</TabsTrigger>
diff --git a/pages/character/manage.client.vue b/pages/character/manage.client.vue
index 77b6fb1..0b13734 100644
--- a/pages/character/manage.client.vue
+++ b/pages/character/manage.client.vue
@@ -18,7 +18,7 @@ function copy()
     <Head>
         <Title>d[any] - Edition de données</Title>
     </Head>
-    <TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 px-8 w-full" default-value="training">
+    <TabsRoot class="flex flex-1 flex-col justify-start items-center gap-4 px-8 w-full overflow-hidden" default-value="training">
         <TabsList class="flex flex-row gap-4 self-center relative px-4">
             <TabsIndicator class="absolute left-0 h-[3px] bottom-0 w-[--radix-tabs-indicator-size] translate-x-[--radix-tabs-indicator-position] transition-[width,transform] duration-300 bg-accent-blue"></TabsIndicator>
             <TabsTrigger value="peoples" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Peuples</TabsTrigger>
@@ -27,52 +27,22 @@ function copy()
             <TabsTrigger value="spells" class="px-2 py-1 border-b border-transparent hover:border-accent-blue">Sorts</TabsTrigger>
             <Tooltip message="Copier le JSON" side="right"><Button icon @click="copy" class="p-2"><Icon icon="radix-icons:clipboard-copy" /></Button></Tooltip>
         </TabsList>
-        <TabsContent value="peoples" class="flex-1 overflow-auto">
+        <TabsContent value="peoples" class="flex-1 overflow-auto outline-none">
         </TabsContent>
-        <TabsContent value="training">
-            <TrainingViewer :config="config" />
+        <TabsContent value="training" class="flex-1 overflow-hidden w-full h-full outline-none">
+            <TrainingViewer :config="config">
+                <template #default="{ stat, level, option }">
+                    <div class="border border-light-35 dark:border-dark-35 px-3 py-1 select-none cursor-pointer hover:border-light-50 dark:hover:border-dark-50">
+                        <MarkdownRenderer :proses="{ 'a': PreviewA }" :content="option.description.map(e => e.text).join('\n')" />
+                    </div>
+                </template>
+            </TrainingViewer>
         </TabsContent>
-        <TabsContent value="abilities" class="flex-1 overflow-auto">
+        <TabsContent value="abilities" class="flex-1 overflow-auto outline-none">
 
         </TabsContent>
-        <TabsContent value="spells" class="flex-1 overflow-auto">
+        <TabsContent value="spells" class="flex-1 overflow-auto outline-none">
 
         </TabsContent>
     </TabsRoot>
-    <!-- <Collapsible class="border-b border-light-30 dark:border-dark-30 p-1">
-        <template #label>
-            <span class="font-bold text-xl">Sorts</span>
-        </template>
-        <template #default>
-            <div class="flex flex-col gap-2 max-h-[50vh] px-4 relative overflow-y-auto">
-                <div class="sticky top-0 py-2 bg-light-0 dark:bg-dark-0 z-10 flex gap-2 items-center">
-                    <span class="text-xl pe-4" :class="{ 'text-light-red dark:text-dark-red': spellsPoints < (data.spells?.length ?? 0) }">Sorts: {{ data.spells?.length ?? 0 }}/{{ spellsPoints }}</span>
-                    <TextInput label="Nom" v-model="spellFilter.text" />
-                    <Combobox label="Rang" v-model="spellFilter.ranks" multiple :options="[['Rang 1', 1], ['Rang 2', 2], ['Rang 3', 3]]" />
-                    <Combobox label="Type" v-model="spellFilter.types" multiple :options="[['Précision', 'precision'], ['Savoir', 'knowledge'], ['Instinct', 'instinct']]" />
-                    <Combobox label="Element" v-model="spellFilter.elements" multiple :options="[['Feu', 'fire'], ['Glace', 'ice'], ['Foudre', 'thunder'], ['Terre', 'earth'], ['Arcane', 'arcana'], ['Air', 'air'], ['Nature', 'nature'], ['Lumière', 'light'], ['Psy', 'psyche']]" />
-                </div>
-                <div class="grid gap-4 grid-cols-2">
-                    <div class="py-1 px-2 border border-light-30 dark:border-dark-30 flex flex-col hover:border-light-50 dark:hover:border-dark-50 cursor-pointer" v-for="spell of filterSpells(characterConfig.spells)" :class="{ '!border-accent-blue bg-accent-blue bg-opacity-20': data.spells?.find(e => e === spell.id) }"
-                        @click="() => data.spells?.includes(spell.id) ? data.spells.splice(data.spells.findIndex((e: string) => e === spell.id), 1) : data.spells!.push(spell.id)">
-                        <div class="flex flex-row justify-between">
-                            <span class="text-lg font-bold">{{ spell.name }}</span>
-                            <div class="flex flex-row items-center gap-6">
-                                <div class="flex flex-row text-sm gap-2">
-                                    <span v-for="element of spell.elements" :class="elementTexts[element].class" class="border !border-opacity-50 rounded-full !bg-opacity-20 px-2 py-px">{{ elementTexts[element].text }}</span>
-                                </div>
-                                <div class="flex flex-row text-sm gap-1">
-                                    <span class="">Rang {{ spell.rank }}</span><span>/</span>
-                                    <span class="">{{ spellTypeTexts[spell.type] }}</span><span>/</span>
-                                    <span class="">{{ spell.cost }} mana</span><span>/</span>
-                                    <span class="">{{ typeof spell.speed === 'string' ? spell.speed : `${spell.speed} minutes` }}</span>
-                                </div>
-                            </div>
-                        </div>
-                        <MarkdownRenderer :content="spell.effect" />
-                    </div>
-                </div>
-            </div>
-        </template>
-    </Collapsible> -->
 </template>
\ No newline at end of file