diff --git a/app/components/HeroItem.vue b/app/components/HeroItem.vue
index d31968a..4756351 100644
--- a/app/components/HeroItem.vue
+++ b/app/components/HeroItem.vue
@@ -13,7 +13,7 @@
         :key="feature.title"
         :to="searchItem(feature?.search)"
         :class="getGridClass(index)"
-        @click="addTypeFilter(feature?.search)"
+        @click="addTypeFilter(feature?.search as typeFilter)"
       >
         <div class="absolute inset-0">
           <NuxtImg
@@ -31,16 +31,17 @@
   <div v-else>No data available</div>
 </template>
 
-<script setup="ts">
+<script setup lang="ts">
   import { useEntitesStore } from '../stores/entites.store'
+  import type { typeFilter } from '../types/database.types'
 
   const entitesStore = useEntitesStore()
 
   const { data } = await useAsyncData('home-hero', () => queryCollection('pages').first())
 
-  const getGridClass = (index) => {
+  const getGridClass = (index: number) => {
     const baseClass = 'relative rounded-3xl overflow-hidden'
-    const gridClasses = {
+    const gridClasses: Record<number, string> = {
       0: 'row-span-1 col-start-1 row-start-1 mt-24',
       1: 'row-span-3 col-start-2 row-start-1',
       2: 'row-span-1 col-start-3 row-start-1 mt-24',
@@ -50,16 +51,16 @@
     return `${baseClass} ${gridClasses[index] || ''}`
   }
 
-  const addTypeFilter = async (filterToAdd) => {
-    entitesStore.typeFilter = filterToAdd
-    await entitesStore.searchEntites()
+  const addTypeFilter = (filterToAdd: typeFilter) => {
+    if (filterToAdd !== ('genealogie' as typeFilter)) {
+      entitesStore.typeFilter = filterToAdd
+    }
   }
 
-  const searchItem = (item) => {
+  const searchItem = (item: string) => {
     if (item === 'genealogie') {
       return '/genealogie'
     }
-
     return '#search'
   }
 </script>
diff --git a/app/components/SearchItem.vue b/app/components/SearchItem.vue
index 5fb37fe..cbb92d1 100644
--- a/app/components/SearchItem.vue
+++ b/app/components/SearchItem.vue
@@ -1,6 +1,6 @@
 <template>
-  <div id="search" class="pt-30 pb-50 max-w-7xl mx-auto">
-    <h1 class="text-3xl font-bold mb-6">Encyclopédie</h1>
+  <div id="search" class="pt-30 pb-10 max-w-7xl mx-auto">
+    <h1 class="font-heading text-5xl mb-6">Encyclopédie</h1>
 
     <div class="mb-6 space-y-4">
       <input
@@ -14,35 +14,35 @@
         <UButton
           :color="typeFilter === 'tous' ? 'primary' : 'secondary'"
           class="text-white px-4 py-2 rounded"
-          @click="typeFilter = 'tous'"
+          @click="addTypeFilter('tous')"
         >
           Tous
         </UButton>
         <UButton
           :color="typeFilter === 'personnage' ? 'primary' : 'secondary'"
           class="text-white px-4 py-2 rounded"
-          @click="typeFilter = 'personnage'"
+          @click="addTypeFilter('personnage')"
         >
           Personnages
         </UButton>
         <UButton
           :color="typeFilter === 'lieu' ? 'primary' : 'secondary'"
           class="text-white px-4 py-2 rounded"
-          @click="typeFilter = 'lieu'"
+          @click="addTypeFilter('lieu')"
         >
           Lieux
         </UButton>
         <UButton
           :color="typeFilter === 'creature' ? 'primary' : 'secondary'"
           class="text-white px-4 py-2 rounded"
-          @click="typeFilter = 'creature'"
+          @click="addTypeFilter('creature')"
         >
           Créatures
         </UButton>
         <UButton
           :color="typeFilter === 'peuple' ? 'primary' : 'secondary'"
           class="text-white px-4 py-2 rounded"
-          @click="typeFilter = 'peuple'"
+          @click="addTypeFilter('peuple')"
         >
           Peuples
         </UButton>
@@ -102,11 +102,11 @@
       </NuxtLink>
     </div>
 
-    <div ref="loadMoreTrigger" class="h-20 flex items-center justify-center">
+    <div ref="loadMoreTrigger" class="h-10 flex items-center justify-center">
       <UIcon
         v-if="isLoading"
         name="i-heroicons-arrow-path"
-        class="w-8 h-8 animate-spin text-primary"
+        class="w-8 h-10 animate-spin text-primary"
       />
     </div>
   </div>
@@ -114,6 +114,7 @@
 
 <script setup lang="ts">
   import { useEntitesStore } from '../stores/entites.store'
+  import type { typeFilter } from '../types/database.types'
   import { storeToRefs } from 'pinia'
 
   const entitesStore = useEntitesStore()
@@ -123,12 +124,19 @@
   const loadMoreTrigger = ref<HTMLElement | null>(null)
   const isVisible = ref(false)
 
+  const addTypeFilter = (filterToAdd: typeFilter) => {
+    if (filterToAdd !== ('genealogie' as typeFilter)) {
+      entitesStore.typeFilter = filterToAdd
+    }
+  }
+
   let observer: IntersectionObserver | null = null
 
   onMounted(async () => {
-    await entitesStore.loadEntites()
+    entitesStore.resetFilters()
+    await entitesStore.getEntites()
 
-    observer = new IntersectionObserver((entries) => {
+    observer = new IntersectionObserver((entries: IntersectionObserverEntry[]) => {
       const entry = entries[0]
       if (entry) {
         isVisible.value = entry.isIntersecting
diff --git a/app/pages/entites/[id].vue b/app/pages/entites/[id].vue
index acb0768..b512048 100644
--- a/app/pages/entites/[id].vue
+++ b/app/pages/entites/[id].vue
@@ -1,4 +1,5 @@
 <template>
+  <!-- TODO add breadcrumbs -->
   <div class="mx-auto w-[75%] max-w-7xl">
     <p v-if="pending">Chargement...</p>
     <div v-else-if="entite" class="flex flex-col gap-1.5">
@@ -18,6 +19,14 @@
         {{ relation }}
       </p>
       <p v-if="entite.lieu_id">Lieu : {{ entite.lieu_id }}</p>
+      <NuxtImg
+        v-if="entite.image_url"
+        format="webp"
+        provider="cloudinary"
+        :src="entite.image_url"
+        :alt="`Image de${entite.nom}`"
+        class="w-75 h-auto rounded-lg object-cover"
+      />
     </div>
     <div v-else-if="error">"Entitée non trouvée !"</div>
     <UButton
diff --git a/app/pages/genealogie.vue b/app/pages/genealogie.vue
index a4da928..853e6fa 100644
--- a/app/pages/genealogie.vue
+++ b/app/pages/genealogie.vue
@@ -1,7 +1,146 @@
 <template>
-  <div>
-    <p>La généalogie du personnage principal</p>
+  <div class="pt-15 pb-50 max-w-7xl mx-auto">
+    <h1 class="text-5xl mb-6 font-heading">Généalogie</h1>
+    <h2 class="text-1xl mb-6">Retrouvez les arbres généalogiques des personnages principaux</h2>
+
+    <div class="my-15">
+      <div v-if="pending" class="flex justify-center py-20">
+        <UIcon name="i-heroicons-arrow-path" class="w-12 h-12 animate-spin text-primary" />
+      </div>
+
+      <div v-else-if="error" class="text-red-600 text-center py-20">
+        Erreur lors du chargement de l'arbre généalogique
+      </div>
+
+      <div v-else-if="entite" class="flex flex-col items-center gap-8 p-5">
+        <!-- SOUCHE EN HAUT -->
+        <div class="text-center">
+          <h3 class="text-2xl font-bold mb-4">La Souche</h3>
+          <div class="flex gap-8 justify-center">
+            <template v-for="(generation, index) in entite.souche" :key="index">
+              <div class="flex gap-1.5 relative items-start">
+                <NuxtLink
+                  v-for="personne in generation"
+                  :key="personne.id"
+                  :to="`/entites/${personne.id}`"
+                  class="person-card"
+                  :class="{ feminine: personne.espece === 'feminine' }"
+                >
+                  <div class="name">{{ personne.nom }}</div>
+                  <div class="role">{{ personne.espece || personne.type }}</div>
+                </NuxtLink>
+                <div v-if="generation.length === 2" class="marriage-line" />
+              </div>
+            </template>
+          </div>
+        </div>
+
+        <!-- LIGNE DE CONNEXION -->
+        <div class="connection-line-vertical" />
+
+        <!-- LES 3 BRANCHES CÔTE À CÔTE -->
+        <div class="flex gap-8 items-start justify-center">
+          <div
+            v-for="(branche, brancheNom) in entite.branches"
+            :key="brancheNom"
+            class="flex flex-col items-center gap-4"
+          >
+            <h3 class="text-xl font-bold capitalize">Branche {{ brancheNom }}</h3>
+
+            <template v-for="(generation, index) in branche" :key="index">
+              <div class="flex gap-8 content-center flex-wrap justify-center">
+                <div
+                  v-for="(groupe, gIndex) in generation"
+                  :key="gIndex"
+                  class="flex gap-1.5 relative items-start"
+                >
+                  <NuxtLink
+                    v-for="personne in groupe"
+                    :key="personne.id"
+                    :to="`/entites/${personne.id}`"
+                    class="person-card"
+                    :class="{ feminine: personne.espece === 'feminine' }"
+                  >
+                    <div class="name">{{ personne.nom }}</div>
+                    <div class="role">{{ personne.espece || personne.type }}</div>
+                  </NuxtLink>
+                  <div v-if="groupe.length === 2" class="marriage-line" />
+                </div>
+              </div>
+              <div v-if="index < branche.length - 1" class="connection-line" />
+            </template>
+          </div>
+        </div>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+  const {
+    data: entite,
+    error,
+    pending,
+  } = await useAsyncData('tree', () => $fetch(`/api/genealogie/families`))
+</script>
+
+<style scoped>
+  .person-card {
+    width: 150px;
+    padding: 20px;
+    background: white;
+    border: 3px solid #3b82f6;
+    border-radius: 12px;
+    text-align: center;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+    transition: transform 0.2s;
+    text-decoration: none;
+    color: inherit;
+  }
+
+  .person-card:hover {
+    transform: translateY(-5px);
+    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+    cursor: pointer;
+  }
+
+  .person-card.feminine {
+    border-color: #a855f7;
+    background: #faf5ff;
+  }
+
+  .name {
+    font-size: 18px;
+    font-weight: bold;
+    color: #1f2937;
+    margin-bottom: 5px;
+  }
+
+  .role {
+    font-size: 14px;
+    color: #6b7280;
+    font-style: italic;
+  }
+
+  .marriage-line {
+    position: absolute;
+    width: 10px;
+    height: 3px;
+    background: #ef4444;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
+  .connection-line {
+    width: 2px;
+    height: 30px;
+    background: #9ca3af;
+  }
+
+  .connection-line-vertical {
+    width: 2px;
+    height: 50px;
+    background: #9ca3af;
+  }
+</style>
diff --git a/app/pages/index.vue b/app/pages/index.vue
index d55f803..12b7f98 100644
--- a/app/pages/index.vue
+++ b/app/pages/index.vue
@@ -7,4 +7,7 @@
 
 <script setup lang="ts">
   const { data } = await useAsyncData('home', () => queryCollection('pages').first())
+
+  // TODO responsive design
+  // TODO SEO optimization
 </script>
diff --git a/app/stores/entites.store.ts b/app/stores/entites.store.ts
index ae22380..ffe240d 100644
--- a/app/stores/entites.store.ts
+++ b/app/stores/entites.store.ts
@@ -1,18 +1,19 @@
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
-import type { Entite } from '~/types/database.types'
+import type { Entite, EntiteTree, typeFilter } from '~/types/database.types'
 
 export const useEntitesStore = defineStore('entites', () => {
   const entites = ref<Entite[]>([])
-  const typeFilter = ref<'tous' | 'personnage' | 'lieu' | 'creature' | 'peuple'>('tous')
+  const typeFilter = ref<typeFilter>('tous')
   const searchValue = ref<string>('')
   const isLoading = ref(true)
   const isError = ref(false)
   const errorMessage = ref('')
   const currentPage = ref(1)
   const hasMore = ref(true)
+  const tree = ref<EntiteTree[][][]>([])
 
-  const loadEntites = async () => {
+  const getEntites = async () => {
     if (!hasMore.value) return
     isError.value = false
     errorMessage.value = ''
@@ -39,7 +40,7 @@ export const useEntitesStore = defineStore('entites', () => {
   const loadMore = () => {
     if (hasMore.value && !isLoading.value) {
       currentPage.value++
-      loadEntites()
+      return getEntites()
     }
   }
 
@@ -47,7 +48,7 @@ export const useEntitesStore = defineStore('entites', () => {
     entites.value = []
     currentPage.value = 1
     hasMore.value = true
-    loadEntites()
+    return getEntites()
   }
 
   const getEntiteById = async (id: string) => {
@@ -63,7 +64,7 @@ export const useEntitesStore = defineStore('entites', () => {
 
   const searchEntites = async (terme: string) => {
     if (!terme) {
-      await loadEntites()
+      await getEntites()
       return
     }
 
@@ -91,6 +92,30 @@ export const useEntitesStore = defineStore('entites', () => {
     )
   })
 
+  const getEntitesOnTree = async (selectedFamilyRoot: string) => {
+    isLoading.value = true
+    isError.value = false
+
+    try {
+      const data = await $fetch<EntiteTree[][][]>(`/api/genealogie/${selectedFamilyRoot}`)
+      tree.value = data
+    } catch (e) {
+      const err = e as Error
+      isError.value = true
+      errorMessage.value = err.message
+    } finally {
+      isLoading.value = false
+    }
+  }
+
+  const resetFilters = () => {
+    typeFilter.value = 'tous'
+    searchValue.value = ''
+    currentPage.value = 1
+    hasMore.value = true
+    entites.value = []
+  }
+
   return {
     entites,
     typeFilter,
@@ -100,9 +125,11 @@ export const useEntitesStore = defineStore('entites', () => {
     errorMessage,
     entitesFilter,
     loadMore,
-    loadEntites,
+    getEntites,
     resetAndLoad,
     getEntiteById,
     searchEntites,
+    getEntitesOnTree,
+    resetFilters,
   }
 })
diff --git a/app/types/database.types.ts b/app/types/database.types.ts
index 079c61a..35413f6 100644
--- a/app/types/database.types.ts
+++ b/app/types/database.types.ts
@@ -1,5 +1,7 @@
 export type EntiteType = 'personnage' | 'lieu' | 'creature'
 
+export type typeFilter = 'tous' | 'personnage' | 'lieu' | 'creature' | 'peuple'
+
 export type Entite = {
   id: string
   created_at: string
@@ -16,3 +18,11 @@ export type Entite = {
   relations?: string[]
   lieu_id?: string
 }
+
+export interface EntiteTree {
+  id: string
+  nom: string
+  espece?: string
+  type?: string
+  highlight?: boolean
+}
diff --git a/commitlint.config.js b/commitlint.config.ts
similarity index 100%
rename from commitlint.config.js
rename to commitlint.config.ts
diff --git a/eslint.config.mjs b/eslint.config.mts
similarity index 100%
rename from eslint.config.mjs
rename to eslint.config.mts
diff --git a/nuxt.config.ts b/nuxt.config.ts
index 509f9d5..279160e 100644
--- a/nuxt.config.ts
+++ b/nuxt.config.ts
@@ -74,8 +74,28 @@ export default defineNuxtConfig({
           "'unsafe-eval'",
           "'wasm-unsafe-eval'",
           'https://cloud.umami.is',
+          'https://esm.sh',
+        ],
+        'script-src-elem': [
+          "'self'",
+          "'unsafe-inline'",
+          "'wasm-unsafe-eval'",
+          'https://cloud.umami.is',
+          'https://esm.sh',
+        ],
+        'img-src': [
+          "'self'",
+          'data:',
+          'https://avatars.githubusercontent.com',
+          'https://res.cloudinary.com',
+          'https://cloud.umami.is',
         ],
       },
     },
   },
+  image: {
+    cloudinary: {
+      baseURL: 'https://res.cloudinary.com/dbihnwsar/image/upload',
+    },
+  },
 })
diff --git a/server/api/genealogie/families.ts b/server/api/genealogie/families.ts
new file mode 100644
index 0000000..3624413
--- /dev/null
+++ b/server/api/genealogie/families.ts
@@ -0,0 +1,58 @@
+import { serverSupabaseClient } from '#supabase/server'
+
+// type characterInTree = {
+//   id: string
+//   nom: string
+//   espece: string
+//   type: string
+//   highlight?: boolean
+// }
+
+export default defineEventHandler(async (event) => {
+  const supabase = await serverSupabaseClient(event)
+
+  const { data: personnages, error } = await supabase
+    .from('entites')
+    .select('id, nom, espece, type')
+    .eq('type', 'personnage')
+
+  if (error) {
+    throw createError({
+      statusCode: 500,
+      message: 'Erreur lors de la récupération des personnages',
+    })
+  }
+
+  const findByName = (nom: string) => {
+    return personnages?.find((p) => p.nom.toLowerCase() === nom.toLowerCase())
+  }
+
+  return {
+    // Souche = génération 0 (les grands-parents)
+    souche: [[{ ...findByName('Zaboor') }, { ...findByName('Toolja') }].filter((p) => p?.id)],
+
+    // Les 3 branches côte à côte
+    branches: {
+      invisible: [
+        // Génération 1 : Parents
+        [[{ ...findByName('Noor') }, { ...findByName('Brunilla') }].filter((p) => p?.id)],
+        // Génération 2 : Enfants
+        [[{ ...findByName('Galdec') }, { ...findByName('Kheëna') }].filter((p) => p?.id)],
+        // Génération 3 : Petits-enfants
+        [[{ ...findByName('Weëna') }].filter((p) => p?.id)],
+      ],
+
+      maitresse: [
+        [[{ ...findByName('Skoor') }, { ...findByName('Naounë') }].filter((p) => p?.id)],
+        [[{ ...findByName("Ot'Skoor") }, { ...findByName('Eda') }].filter((p) => p?.id)],
+        [[{ ...findByName('Armskoor') }].filter((p) => p?.id)],
+      ],
+
+      morte: [
+        [[{ ...findByName('Tengoor') }, { ...findByName('Golja') }].filter((p) => p?.id)],
+        [[{ ...findByName("Ot'Tengoor") }, { ...findByName('Queënzy') }].filter((p) => p?.id)],
+        [[{ ...findByName('Morckoor') }, { ...findByName('Olja') }].filter((p) => p?.id)],
+      ],
+    },
+  }
+})