chore: supprimer les dépendances Twig/Stimulus/React/Turbo inutilisées

PHP : suppression de symfony/stimulus-bundle, ux-live-component, ux-react, ux-turbo, twig/extra-bundle et symfony/form (plus utilisés depuis la migration vers Vue.js SPA). npm : suppression de @hotwired/stimulus, @hotwired/turbo, react, react-dom, alpinejs, bootstrap, daisyui, sortablejs, vuedraggable et leurs types. Corrige l'erreur de déploiement causée par vitest@^4.1.0 (introuvable) requis par les anciens packages @symfony/ux-react et @symfony/ux-turbo v2.33.0.
fix: corriger l'erreur HTTP 400 sur les endpoints content-sources POST/PUT
2026-03-26 18:33:50 +01:00 · 2026-03-26 18:22:31 +01:00 · 2026-03-26 17:58:07 +01:00 · 2026-03-26 17:55:12 +01:00 · 2026-03-26 17:00:46 +01:00 · 2026-03-26 16:35:29 +01:00
591 changed files with 11453 additions and 18140 deletions
--- a/.claude/skills/task-workflow/SKILL.md
+++ b/.claude/skills/task-workflow/SKILL.md
@@ -0,0 +1,142 @@
+---
+name: task-workflow
+description: Workflow complet pour traiter une tâche du TASK.md — branche git, développement, tests, commit conventionnel, push, puis archivage dans DONE.md. Utiliser quand l'utilisateur veut implémenter une tâche listée dans TASK.md.
+allowed-tools: Read, Bash, Edit, Write, Glob, Grep
+---
+
+# Workflow de traitement d'une tâche (TASK.md → DONE.md)
+
+Quand l'utilisateur demande de traiter une tâche du `TASK.md`, suivre **dans l'ordre** les étapes ci-dessous.
+
+---
+
+## ⚠️ Étape 0 — Repartir d'une branche saine depuis `origin/main`
+
+**IMPORTANT : toujours commencer par cette étape, sans exception.**
+
+```bash
+git fetch origin
+git checkout main
+git pull origin main
+```
+
+Ensuite seulement créer la branche de travail (voir étape 2).
+
+> Règle : ne jamais partir d'une branche de feature existante. Toujours tirer depuis `main` à jour.
+
+---
+
+## Étape 1 — Lire et choisir la tâche
+
+1. Lire `TASK.md` pour identifier la tâche à traiter (si non précisée, demander laquelle).
+2. Extraire : le titre, les fichiers impactés, et la liste des sous-tâches.
+
+---
+
+## Étape 2 — Créer une branche git
+
+Nommer la branche d'après le type et le titre de la tâche :
+
+```
+<type>/<slug-de-la-tache>
+```
+
+Exemples de types : `feat`, `fix`, `style`, `refactor`, `test`, `chore`
+
+```bash
+git checkout -b style/simplifier-table-homepage
+```
+
+Règle : **ne jamais committer directement sur `main`**.
+
+---
+
+## Étape 3 — Implémenter la tâche
+
+- Lire tous les fichiers mentionnés dans la tâche avant de les modifier.
+- Cocher mentalement chaque sous-tâche `[ ]` au fur et à mesure.
+- Respecter les skills existants selon les fichiers touchés :
+  - Composant Vue → skill `vue-frontend`
+  - Domaine PHP → skills `ddd-core`, `hexagonal-arch`, `cqrs`, `api-platform`
+  - Tests → skill `testing-strategy`
+
+---
+
+## Étape 4 — Vérifier que tous les tests passent
+
+```bash
+make test
+```
+
+- Si des tests échouent, **corriger avant de continuer**.
+- Ne pas passer à l'étape suivante tant que la suite n'est pas verte.
+- Pour un test spécifique : `make test f="NomDeLaClasse"`
+
+---
+
+## Étape 5 — Commit conventionnel
+
+Format Conventional Commits :
+
+```
+<type>(<scope>): <description courte en français>
+
+[corps optionnel : explication du pourquoi]
+```
+
+**Types autorisés :** `feat`, `fix`, `style`, `refactor`, `test`, `chore`, `docs`
+
+**Scope :** nom du domaine ou du composant impacté (ex: `manga-table`, `sidebar`, `homepage`)
+
+Exemples :
+```
+style(manga-table): simplifier le wrapper card + hover vert sur le titre
+fix(sidebar): séparer toggle et navigation sur MenuGroup
+```
+
+```bash
+git add <fichiers modifiés>
+git commit -m "style(manga-table): simplifier le wrapper card + hover vert sur le titre"
+```
+
+---
+
+## Étape 6 — Push de la branche
+
+**Demander confirmation à l'utilisateur avant de pusher.**
+
+```bash
+git push -u origin <nom-de-la-branche>
+```
+
+---
+
+## Étape 7 — Archiver la tâche dans DONE.md
+
+1. Retirer le bloc de la tâche de `TASK.md` (section complète, du titre `##` jusqu'au `---` suivant).
+2. Ajouter la tâche dans `DONE.md` (créer le fichier s'il n'existe pas) avec la date et le sha du commit :
+
+Format dans `DONE.md` :
+```markdown
+## [TYPE] Titre de la tâche — YYYY-MM-DD
+
+> Branche : `<nom-de-la-branche>` | Commit : `<sha court>`
+
+- [x] Sous-tâche 1
+- [x] Sous-tâche 2
+```
+
+---
+
+## Résumé du flux
+
+```
+fetch + checkout main + pull (branche saine)
+  → branche git depuis main
+  → TASK.md (choisir la tâche)
+  → implémentation
+  → make test (vert obligatoire)
+  → conventional commit
+  → push (après confirmation)
+  → DONE.md
+```
--- a/.claude/skills/ui-style/SKILL.md
+++ b/.claude/skills/ui-style/SKILL.md
@@ -0,0 +1,223 @@
+---
+name: ui-style
+description: Design system et harmonisation UI de Mangarr — layout de page canonique (Toolbar + flex + sections border-t), palette Tailwind, patterns composants (boutons, badges, upload, progression). Utiliser quand on crée ou modifie une page Vue ou un composant UI.
+allowed-tools: Read, Grep, Glob
+---
+
+# Design system Mangarr — Guide UI
+
+Les pages de référence canoniques sont :
+- `assets/vue/app/domain/manga/infrastructure/presentation/pages/NewImportPage.vue`
+- `assets/vue/app/domain/conversion/infrastructure/presentation/pages/ConversionPage.vue`
+
+En cas de doute, les lire pour vérifier le pattern en vigueur.
+
+---
+
+## 1. Layout de page canonique
+
+```vue
+<template>
+  <div class="flex flex-col h-full">
+    <Toolbar :config="toolbarConfig" />
+    <div class="overflow-y-auto flex-1">
+      <div class="px-6 py-8">
+        <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+          <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
+            Titre section
+          </h2>
+          <!-- contenu -->
+        </section>
+        <section class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+          <!-- section suivante -->
+        </section>
+      </div>
+    </div>
+  </div>
+</template>
+```
+
+**Règles absolues :**
+- `flex flex-col h-full` toujours à la racine du template
+- `<Toolbar>` toujours en premier enfant direct de la racine
+- `overflow-y-auto flex-1` pour le contenu scrollable
+- `px-6 py-8` comme wrapper interne — **jamais** `container mx-auto`
+- Chaque bloc logique = une `<section>` avec `border-t border-gray-200 dark:border-gray-700`
+- **Jamais** de `<h1>` volant dans le contenu — le titre de page va dans `toolbarConfig.leftSection`
+
+---
+
+## 2. Configuration Toolbar
+
+```javascript
+import { computed } from 'vue';
+import { SomeIcon } from '@heroicons/vue/24/outline';
+
+const toolbarConfig = computed(() => ({
+  leftSection: [
+    { type: 'label', text: 'Titre de la page', class: 'text-sm font-medium' },
+  ],
+  rightSection: [
+    {
+      type: 'button',
+      icon: SomeIcon,
+      label: 'Action principale',
+      onClick: handler,
+      disabled: condition,
+    },
+    // Bouton conditionnel :
+    ...(showAction ? [{
+      type: 'button',
+      icon: OtherIcon,
+      label: 'Action contextuelle',
+      onClick: otherHandler,
+    }] : []),
+  ],
+}));
+```
+
+- Icônes : Heroicons v24/outline (`@heroicons/vue/24/outline`)
+- Boutons toolbar visibles uniquement si pertinents — utiliser le spread conditionnel
+- `rightSection` peut être vide `[]`
+
+---
+
+## 3. Headers de section
+
+```vue
+<!-- Header simple -->
+<h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">
+  Titre
+</h2>
+
+<!-- Header avec info contextuelle à droite -->
+<div class="flex items-center justify-between mb-3">
+  <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
+    Titre
+  </h2>
+  <span class="text-xs text-gray-500 dark:text-gray-400">info contextuelle</span>
+</div>
+```
+
+---
+
+## 4. Palette de couleurs
+
+| Usage | Classes Tailwind |
+|-------|-----------------|
+| Primaire (action principale) | `bg-green-600 hover:bg-green-700` |
+| Secondaire | `bg-blue-600 hover:bg-blue-700` |
+| Danger | `bg-red-600 hover:bg-red-700` |
+| Désactivé | `disabled:bg-gray-400 disabled:cursor-not-allowed` |
+| Texte principal | `text-gray-900 dark:text-gray-100` |
+| Texte secondaire | `text-gray-600 dark:text-gray-300` |
+| Texte subtil | `text-gray-500 dark:text-gray-400` |
+| Étiquette section | `text-gray-400 dark:text-gray-500` |
+| Fond carte / panel | `bg-white dark:bg-gray-800` |
+| Bordure | `border-gray-200 dark:border-gray-700` |
+| Séparateur de liste | `divide-y divide-gray-100 dark:divide-gray-700/50` |
+
+---
+
+## 5. Boutons
+
+```vue
+<!-- Bouton action principale (submit, lancer, confirmer) -->
+<button
+  class="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white px-4 py-2 rounded-md font-medium transition-colors"
+  :disabled="condition"
+>
+  Label
+</button>
+
+<!-- Bouton ghost / discret -->
+<button class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors">
+  Label
+</button>
+```
+
+---
+
+## 6. Barre de progression
+
+```vue
+<div class="bg-gray-200 dark:bg-gray-700 h-1.5 mb-4">
+  <div
+    class="bg-green-600 h-1.5 transition-all duration-300"
+    :style="{ width: progress + '%' }"
+  />
+</div>
+```
+
+> **Important :** toujours `bg-green-600`, jamais `bg-blue-600` pour les barres de progression.
+
+---
+
+## 7. Liste avec séparateurs
+
+```vue
+<div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+  <div
+    v-for="item in items"
+    :key="item.id"
+    class="flex items-center justify-between py-3"
+  >
+    <!-- contenu de l'item -->
+  </div>
+</div>
+```
+
+---
+
+## 8. Zone de drop / upload de fichier
+
+```vue
+<div
+  class="border-2 border-dashed rounded-lg p-8 text-center transition-colors"
+  :class="isDragging
+    ? 'border-green-500 bg-green-50 dark:bg-green-900/10'
+    : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600'"
+  @dragover.prevent="isDragging = true"
+  @dragleave="isDragging = false"
+  @drop.prevent="handleDrop"
+>
+  <SomeIcon class="mx-auto h-8 w-8 text-gray-400 mb-3" />
+  <p class="text-sm text-gray-600 dark:text-gray-300">
+    Message principal
+  </p>
+  <p class="text-xs text-gray-400 dark:text-gray-500 mt-1">
+    Précision format/taille
+  </p>
+</div>
+```
+
+---
+
+## 9. Pages non conformes à corriger
+
+Les pages suivantes dévient encore du pattern canonique :
+
+| Page | Chemin relatif | Déviations principales |
+|------|---------------|----------------------|
+| `HomePage.vue` | `domain/manga/.../pages/` | Pas de `px-6 py-8`, pas de sections `border-t` |
+| `AddManga.vue` | `domain/manga/.../pages/` | Pas de Toolbar, pas de `flex flex-col h-full` |
+| `ActivityPage.vue` | `domain/activity/.../pages/` | Pas de `flex flex-col`, pas de Toolbar intégré |
+| `UserPreferencesPage.vue` | `domain/setting/.../pages/` | `h1` volant, pas de Toolbar |
+| `ScrapperConfigurations.vue` | `domain/setting/.../pages/` | `h1` volant, `container mx-auto` |
+| `ScrapperEdit.vue` | `domain/setting/.../pages/` | `container mx-auto` au lieu de `px-6 py-8` |
+| `MangaDetails.vue` | `domain/manga/.../pages/` | Layout spécial (cover + chapitres), à traiter séparément |
+| `ChapterPage.vue` | `domain/reader/.../pages/` | Layout lecteur spécialisé — **exception justifiée**, ne pas modifier |
+
+---
+
+## 10. Checklist avant de livrer une page
+
+- [ ] Racine : `flex flex-col h-full`
+- [ ] Premier enfant : `<Toolbar :config="toolbarConfig" />`
+- [ ] Contenu scrollable : `overflow-y-auto flex-1`
+- [ ] Wrapper interne : `px-6 py-8` (jamais `container mx-auto`)
+- [ ] Blocs logiques : `<section class="border-t border-gray-200 dark:border-gray-700 pt-6">`
+- [ ] Titre de page dans `toolbarConfig.leftSection`, pas de `<h1>` dans le contenu
+- [ ] Headers de section : classes `text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider`
+- [ ] Barres de progression : `bg-green-600` (pas `bg-blue-600`)
+- [ ] Dark mode : chaque couleur a sa variante `dark:`
--- a/.gitignore
+++ b/.gitignore
@@ -39,3 +39,10 @@ yarn-error.log
 src/Controller/TestController.php
 .phpunit.cache/test-results
 /tests/Fixtures/pages/
+
+# Claude Code — versionner les skills partagés, ignorer les fichiers perso
+!.claude/
+!.claude/skills/
+!.claude/skills/**
+.claude/settings.local.json
+.claude/projects/
--- a/2
+++ b/2
@@ -1,7 +1,7 @@
 #syntax=docker/dockerfile:1.4

 # Versions
-FROM dunglas/frankenphp:1-php8.3 AS frankenphp_upstream
+FROM dunglas/frankenphp:1-php8.4 AS frankenphp_upstream

 # The different stages of this Dockerfile are meant to be built into separate images
 # https://docs.docker.com/develop/develop-images/multistage-build/#stop-at-a-specific-build-stage
--- a/TASK.md
+++ b/TASK.md
@@ -75,6 +75,47 @@

 ---

+## [Perf] Reader — Lazy-loading des pages (InfiniteReader)
+
+**Problème :** `readerStore.js` charge toutes les pages avec `itemsPerPage=9999`. `InfiniteReader.vue` monte tous les composants `ReaderPage` simultanément dans le DOM. Sur un chapitre de 200 pages, cela représente 200 composants actifs et autant d'images pré-chargées.
+
+- [ ] Implémenter un `IntersectionObserver` sur les wrappers de page pour ne charger les images qu'au moment où elles entrent dans le viewport (`loading="lazy"` ou src conditionnel)
+- [ ] Limiter le nombre de composants montés simultanément (virtualisation ou windowing) : ne rendre que les pages proches de la page courante (ex. fenêtre de ±3 pages)
+- [ ] Adapter `readerStore.js` : remplacer `itemsPerPage=9999` par la vraie pagination côté API si la virtualisation le justifie, sinon conserver le fetch unique mais différer le rendu
+- [ ] Vérifier que le mode `single` n'est pas impacté (il affiche déjà une seule page)
+
+---
+
+## [Bug] Reader — N+1 requêtes SQL dans `getChapterContext()`
+
+**Problème :** `LegacyChapterRepository::getChapterContext()` émet 5 requêtes SQL pour un seul chargement : la requête principale + 2 doublons dans `getPreviousChapterId()` / `getNextChapterId()` (chacune re-fetche le chapitre courant) + les 2 requêtes de navigation.
+
+- [ ] Refactorer `getPreviousChapterId()` et `getNextChapterId()` pour accepter l'entité `ChapterEntity` déjà chargée en paramètre (au lieu de re-fetcher par ID)
+- [ ] Appeler ces méthodes depuis `getChapterContext()` en passant l'entité déjà disponible
+- [ ] Résultat attendu : 3 requêtes maximum (1 pour le chapitre courant + 1 prev + 1 next), idéalement 1 seule avec une requête SQL combinée
+
+---
+
+## [Bug] Reader — Division par zéro dans `ChapterPagesResponse::getTotalPages()`
+
+**Problème :** `ceil($totalItems / $itemsPerPage)` crashe si `itemsPerPage = 0`. Le test existant documente le bug avec un TODO et assert un HTTP 500 au lieu de corriger.
+
+- [ ] Ajouter une validation dans `ChapterPagesProvider` : rejeter la requête avec HTTP 400 si `itemsPerPage <= 0`
+- [ ] Corriger le test `GetChapterPagesTest` pour vérifier HTTP 400 (et non 500)
+- [ ] Supprimer le commentaire TODO du test une fois corrigé
+
+---
+
+## [Bug] Reader — `totalPages` toujours égal à 0 dans `ChapterContext`
+
+**Problème :** `LegacyChapterRepository::getChapterContext()` hardcode `totalPages: 0`. La méthode `getTotalPagesForChapter()` existe mais n'est jamais appelée depuis `GetChapterContextHandler`.
+
+- [ ] Appeler `getTotalPagesForChapter()` dans `getChapterContext()` (ou dans le handler) pour calculer le vrai nombre de pages
+- [ ] Vérifier que la valeur est correctement sérialisée dans la réponse API Platform (`ChapterContextResponse`)
+- [ ] Adapter les tests existants qui pourraient asserter `totalPages: 0`
+
+---
+
 ## [Style] Page conversion CBR → CBZ — Simplification UI + notifications toast

 **Objectif :** Revoir le style de la page de conversion CBR → CBZ pour le simplifier, et remplacer le message statique "Conversion réussie" par les notifications toast de l'application.
--- a/assets/app.js
+++ b/assets/app.js
@@ -1,17 +0,0 @@
-import './bootstrap.js';
-
-import '@fortawesome/fontawesome-free/js/all.js';
-/*
- * Welcome to your app's main JavaScript file!
- *
- * We recommend including the built version of this JavaScript file
- * (and its CSS file) in your base layout (base.html.twig).
- */
-
-// any CSS you import will output into a single css file (app.css in this case)
-import './styles/app.scss';
-
-// start the Stimulus application
-import './bootstrap';
-
-// La ligne registerReactControllerComponents a déjà été commentée
--- a/assets/bootstrap.js
+++ b/assets/bootstrap.js
@@ -1,35 +0,0 @@
-import { startStimulusApp } from '@symfony/stimulus-bridge';
-
-// Registers Stimulus controllers from controllers.json and in the controllers/ directory
-export const app = startStimulusApp(require.context(
-    '@symfony/stimulus-bridge/lazy-controller-loader!./controllers',
-    true,
-    /\.[jt]sx?$/
-));
-
-// register any custom, 3rd party controllers here
-// app.register('some_controller_name', SomeImportedController);
-
-//DEBUG TURBO
-// import * as Turbo from "@hotwired/turbo"
-//
-// Turbo.session.drive = false
-// Turbo.start()
-//
-// // Écouteurs existants
-// document.addEventListener("turbo:before-stream-render", (event) => {
-//   console.log("Before stream render", event.target);
-// });
-//
-// document.addEventListener("turbo:stream-render", (event) => {
-//   console.log("Stream rendered", event.target);
-// });
-//
-// // Nouvel écouteur pour les événements de création
-// document.addEventListener("turbo:before-fetch-request", (event) => {
-//   console.log("Before fetch request", event.detail.fetchOptions);
-// });
-//
-// document.addEventListener("turbo:before-fetch-response", (event) => {
-//   console.log("Before fetch response", event.detail.fetchResponse);
-// });
--- a/assets/controllers.json
+++ b/assets/controllers.json
@@ -1,30 +0,0 @@
-{
-    "controllers": {
-        "@symfony/ux-live-component": {
-            "live": {
-                "enabled": true,
-                "fetch": "eager",
-                "autoimport": {
-                    "@symfony/ux-live-component/dist/live.min.css": true
-                }
-            }
-        },
-        "@symfony/ux-react": {
-            "react": {
-                "enabled": true,
-                "fetch": "eager"
-            }
-        },
-        "@symfony/ux-turbo": {
-            "turbo-core": {
-                "enabled": true,
-                "fetch": "eager"
-            },
-            "mercure-turbo-stream": {
-                "enabled": true,
-                "fetch": "eager"
-            }
-        }
-    },
-    "entrypoints": []
-}
--- a/assets/controllers/activity_controller.js
+++ b/assets/controllers/activity_controller.js
@@ -1,54 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-/*
-* The following line makes this controller "lazy": it won't be downloaded until needed
-* See https://github.com/symfony/stimulus-bridge#lazy-controllers
-*/
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-  static targets = ['activity']
-
-  // ...
-  async connect() {
-    try {
-      const response = await fetch(`/activity/status`, {
-        method: 'GET',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Requested-With': 'XMLHttpRequest'
-        }
-      });
-
-      const data = await response.json();
-      // Handle the response data as needed
-      this.activityTarget.innerHTML = data.length;
-      if (data.length > 0) {
-        this.activityTarget.classList.remove('hidden');
-      }
-    } catch (error) {
-      console.error('Error:', error);
-    }
-
-
-    const mercureHubUrl = 'https://mangarr.test.nestor-server.fr/.well-known/mercure';
-    const eventSource = new EventSource(`${mercureHubUrl}?topic=activity`, {withCredentials: true});
-
-    eventSource.onmessage = (event) => {
-      const data = JSON.parse(event.data);
-      if (data.processing !== undefined && data.pending !== undefined) {
-        let totalActivities = data.processing.length + data.pending.length;
-        this.activityTarget.innerHTML = totalActivities;
-        if (totalActivities > 0) {
-          this.activityTarget.classList.remove('hidden');
-        }else if (totalActivities === 0) {
-          this.activityTarget.classList.add('hidden');
-        }
-      }
-    };
-
-    eventSource
-      .onerror = (event) => {
-      console.error('EventSource failed:', event);
-    };
-  }
-}
--- a/assets/controllers/addmanga_controller.js
+++ b/assets/controllers/addmanga_controller.js
@@ -1,14 +0,0 @@
-// assets/controllers/addmanga_controller.js
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static values = {
-    index: Number
-  }
-
-  openModal(event) {
-    event.preventDefault()
-    const openEvent = new CustomEvent(`openAddMangaModal${this.indexValue}`)
-    document.dispatchEvent(openEvent)
-  }
-}
--- a/assets/controllers/alert_controller.js
+++ b/assets/controllers/alert_controller.js
@@ -1,60 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-/*
-* The following line makes this controller "lazy": it won't be downloaded until needed
-* See https://github.com/symfony/stimulus-bridge#lazy-controllers
-*/
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-  static targets = ['alert', 'icon', 'message']
-
-  connect() {
-    window.addEventListener('alert:show', this.showAlert.bind(this));
-  }
-
-  // ...
-  showAlert(event) {
-    const detail = event.detail;
-    const message = detail.message;
-    const level = detail.level;
-
-    let alertClass = "";
-    let iconClass = "";
-    switch (level) {
-      case 'success':
-        alertClass = "bg-green-500";
-        iconClass = "fa-circle-check";
-        break;
-      case 'warning':
-        alertClass = "bg-yellow-500";
-        iconClass = "fa-circle-exclamation";
-        break;
-      case 'error':
-        alertClass = "bg-red-500";
-        iconClass = "fa-circle-xmark";
-        break;
-      case 'info':
-      default:
-        alertClass = "bg-blue-500";
-        iconClass = "fa-circle-info";
-        break;
-    }
-
-    this.messageTarget.innerHTML = message;
-    this.alertTarget.classList.add(alertClass);
-    this.iconTarget.classList.add(iconClass);
-    this.alertTarget.style.display = "block";
-
-    setTimeout(() => {
-      this.alertTarget.style.opacity = 0;
-
-      setTimeout(() => {
-        this.alertTarget.style.display = 'none';
-        this.alertTarget.classList.remove(alertClass);
-        this.alertTarget.style.opacity = 1;
-        this.iconTarget.classList.remove(iconClass);
-        this.messageTarget.innerHTML = message;
-      }, 1000);
-    }, 3000);
-  }
-}
--- a/assets/controllers/chapter_progress_controller.js
+++ b/assets/controllers/chapter_progress_controller.js
@@ -1,45 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-  static targets = ['progressBar', 'progressText']
-  static values = {
-    chapterId: Number
-  }
-
-  connect() {
-    this.currentPage = 0;
-    this.totalPages = 0;
-
-    const mercureHubUrl = 'https://mangarr.test.nestor-server.fr/.well-known/mercure';
-    this.eventSource = new EventSource(`${mercureHubUrl}?topic=activity`, {withCredentials: true});
-
-    this.eventSource.onmessage = this.handleMessage.bind(this);
-  }
-
-  disconnect() {
-    if (this.eventSource) {
-      this.eventSource.close();
-    }
-  }
-
-  handleMessage(event) {
-    const data = JSON.parse(event.data);
-    if (data.status === "scrapping.progress" && data.chapterId === this.chapterIdValue) {
-      this.handleProgressUpdate(data);
-    }
-  }
-
-  handleProgressUpdate(data) {
-    this.currentPage = data.pageIndex;
-    this.totalPages = data.totalPages;
-
-    this.updateProgressBar();
-  }
-
-  updateProgressBar() {
-    const progress = (this.currentPage / this.totalPages) * 100;
-    this.progressBarTarget.style.width = `${progress}%`;
-    this.progressTextTarget.textContent = `${this.currentPage} / ${this.totalPages}`;
-  }
-}
--- a/assets/controllers/collection_controller.js
+++ b/assets/controllers/collection_controller.js
@@ -1,26 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-/*
-* The following line makes this controller "lazy": it won't be downloaded until needed
-* See https://github.com/symfony/stimulus-bridge#lazy-controllers
-*/
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-  static targets = ['container', 'template', 'item'];
-
-  connect() {
-    this.index = this.itemTargets.length;
-  }
-
-  add(event) {
-    event.preventDefault();
-    const template = this.templateTarget.innerHTML.replace(/__name__/g, this.index);
-    this.containerTarget.insertAdjacentHTML('beforeend', template);
-    this.index++;
-  }
-
-  remove(event) {
-    event.preventDefault();
-    event.target.closest('.collection-item').remove();
-  }
-}
--- a/assets/controllers/download_controller.js
+++ b/assets/controllers/download_controller.js
@@ -1,69 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-  static targets = ['icon']
-  static values = {
-    url: String
-  }
-
-  connect() {
-    this.defaultIconClass = this.iconTarget.classList.value;
-  }
-
-  async download(event) {
-    event.preventDefault();
-
-    // Change the icon to a loader
-    this.iconTarget.classList.remove("fa-download", "fa-search");
-    this.iconTarget.classList.add("fa-spinner", "fa-spin");
-
-    try {
-      const response = await fetch(this.urlValue, {
-        method: 'GET',
-        headers: {
-          'Accept': 'application/json',
-          'X-Requested-With': 'XMLHttpRequest'
-        }
-      });
-
-      const contentType = response.headers.get("Content-Type");
-      if (contentType && contentType.includes("application/json")) {
-        const data = await response.json();
-        if (data.error) {
-          this.dispatchAlert(data.error, 'error');
-        } else if (data.success) {
-          this.dispatchAlert(data.success, 'success');
-        }
-      } else {
-        // C'est un fichier à télécharger
-        const blob = await response.blob();
-        const url = window.URL.createObjectURL(blob);
-        const a = document.createElement('a');
-        a.style.display = 'none';
-        a.href = url;
-        const contentDisposition = response.headers.get('Content-Disposition');
-        const filenameRegex = /filename[^;=\n]*=((['"]).*?\2|[^;\n]*)/;
-        const matches = filenameRegex.exec(contentDisposition);
-        let filename = 'download';
-        if (matches != null && matches[1]) {
-          filename = matches[1].replace(/['"]/g, '');
-        }
-        a.download = filename;
-        document.body.appendChild(a);
-        a.click();
-        window.URL.revokeObjectURL(url);
-      }
-    } finally {
-      // Revert the icon back to the original one
-      this.iconTarget.classList.value = this.defaultIconClass;
-    }
-  }
-
-  dispatchAlert(message, level) {
-    const event = new CustomEvent('alert:show', {
-      detail: { message: message, level: level }
-    });
-    window.dispatchEvent(event);
-  }
-}
--- a/assets/controllers/dropdown_controller.js
+++ b/assets/controllers/dropdown_controller.js
@@ -1,45 +0,0 @@
-// assets/controllers/dropdown_controller.js
-import {Controller} from "@hotwired/stimulus"
-import {useClickOutside} from "stimulus-use"
-
-export default class extends Controller {
-  static targets = ["button", "menu"]
-
-  connect() {
-    useClickOutside(this)
-  }
-
-  toggle(event) {
-    this.menuTarget.classList.toggle('hidden')
-    if (!this.menuTarget.classList.contains('hidden')) {
-      this.positionMenu()
-    }
-  }
-
-  clickOutside(event) {
-    this.menuTarget.classList.add('hidden')
-  }
-
-  positionMenu() {
-    const buttonRect = this.buttonTarget.getBoundingClientRect()
-    const menuRect = this.menuTarget.getBoundingClientRect()
-    const spaceRight = window.innerWidth - buttonRect.right
-    const spaceBottom = window.innerHeight - buttonRect.bottom
-
-    if (spaceRight < menuRect.width && buttonRect.left > menuRect.width) {
-      this.menuTarget.style.left = 'auto'
-      this.menuTarget.style.right = '0'
-    } else {
-      this.menuTarget.style.left = '0'
-      this.menuTarget.style.right = 'auto'
-    }
-
-    if (spaceBottom < menuRect.height && buttonRect.top > menuRect.height) {
-      this.menuTarget.style.top = 'auto'
-      this.menuTarget.style.bottom = '100%'
-    } else {
-      this.menuTarget.style.top = '100%'
-      this.menuTarget.style.bottom = 'auto'
-    }
-  }
-}
--- a/assets/controllers/hello_controller.js
+++ b/assets/controllers/hello_controller.js
@@ -1,16 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-/*
- * This is an example Stimulus controller!
- *
- * Any element with a data-controller="hello" attribute will cause
- * this controller to be executed. The name "hello" comes from the filename:
- * hello_controller.js -> "hello"
- *
- * Delete this file or adapt it for your use!
- */
-export default class extends Controller {
-    connect() {
-        this.element.textContent = 'Hello Stimulus! Edit me in assets/controllers/hello_controller.js';
-    }
-}
--- a/assets/controllers/import_match_controller.js
+++ b/assets/controllers/import_match_controller.js
@@ -1,51 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-export default class extends Controller {
-  static targets = ["checkbox", "modal", "modalContent"]
-
-  toggleAllCheckboxes(event) {
-    this.checkboxTargets.forEach(checkbox => {
-      checkbox.checked = event.target.checked;
-    });
-  }
-
-  updateMangaInfo(event) {
-    const select = event.target;
-    const selectedOption = select.options[select.selectedIndex];
-    const mangaInfo = JSON.parse(selectedOption.dataset.mangaInfo);
-  }
-
-  showDetails(event) {
-    const fileId = event.currentTarget.dataset.fileId;
-    const select = document.querySelector(`select[name="manga_slug[${fileId}]"]`);
-    const mangaInfo = JSON.parse(select.options[select.selectedIndex].dataset.mangaInfo);
-
-    this.modalContentTarget.innerHTML = `
-            <h3 class="text-lg leading-6 font-medium text-gray-900">${mangaInfo.title}</h3>
-            <div class="mt-2">
-                <p><strong>Author:</strong> ${mangaInfo.author || 'N/A'}</p>
-                <p><strong>Publication Year:</strong> ${mangaInfo.publicationYear || 'N/A'}</p>
-                <p><strong>Genres:</strong> ${mangaInfo.genres ? mangaInfo.genres.join(', ') : 'N/A'}</p>
-                <p><strong>Description:</strong> ${this.truncate(mangaInfo.description || 'N/A', 200)}</p>
-            </div>
-        `;
-
-    this.modalTarget.classList.remove('hidden');
-  }
-
-  closeModal() {
-    this.modalTarget.classList.add('hidden');
-  }
-
-  confirmSelected(event) {
-    const selectedFiles = this.checkboxTargets.filter(checkbox => checkbox.checked).map(checkbox => checkbox.value);
-    if (selectedFiles.length === 0) {
-      event.preventDefault();
-      alert('Veuillez sélectionner au moins un fichier à importer.');
-    }
-  }
-
-  truncate(str, length) {
-    return str.length > length ? str.substring(0, length) + '...' : str;
-  }
-}
--- a/assets/controllers/loading_button_controller.js
+++ b/assets/controllers/loading_button_controller.js
@@ -1,21 +0,0 @@
-// assets/controllers/loading_button_controller.js
-import {Controller} from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["text", "loader"];
-  static values = {form: String};
-
-  startLoading(event) {
-    event.preventDefault();
-    this.textTarget.classList.add("hidden");
-    this.loaderTarget.classList.remove("hidden");
-    this.element.disabled = true;
-
-    if (this.hasFormValue) {
-      const form = document.getElementById(this.formValue);
-      if (form) {
-        form.submit();
-      }
-    }
-  }
-}
--- a/assets/controllers/menu_controller.js
+++ b/assets/controllers/menu_controller.js
@@ -1,10 +0,0 @@
-// assets/controllers/menu_controller.js
-import { Controller } from '@hotwired/stimulus';
-
-export default class extends Controller {
-  static targets = ["sidebar"]
-
-  toggleMenu() {
-    this.sidebarTarget.classList.toggle('-translate-x-full')
-  }
-}
--- a/assets/controllers/mercure_controller.js
+++ b/assets/controllers/mercure_controller.js
@@ -1,33 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-/*
-* The following line makes this controller "lazy": it won't be downloaded until needed
-* See https://github.com/symfony/stimulus-bridge#lazy-controllers
-*/
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-  // ...
-  connect() {
-    const topic = this.data.get('topic');
-    const mercureHubUrl = 'https://mangarr.test.nestor-server.fr/.well-known/mercure';
-    const eventSource = new EventSource(`${mercureHubUrl}?topic=${topic}`, {withCredentials: true});
-
-    eventSource.onmessage = (event) => {
-      const data = JSON.parse(event.data);
-      console.log('Received Mercure update:', data);
-
-      this.dispatchAlert(data.message, data.status);
-    };
-
-    eventSource.onerror = (event) => {
-      console.error('EventSource failed:', event);
-    };
-  }
-
-  dispatchAlert(message, level) {
-    const event = new CustomEvent('alert:show', {
-      detail: { message: message, level: level }
-    });
-    window.dispatchEvent(event);
-  }
-}
--- a/assets/controllers/modal_controller.js
+++ b/assets/controllers/modal_controller.js
@@ -1,37 +0,0 @@
-// assets/controllers/modal_controller.js
-import { Controller } from "@hotwired/stimulus"
-
-export default class extends Controller {
-  static targets = ["modal"]
-  static values = {
-    openTrigger: String,
-    closeTrigger: String
-  }
-
-  connect() {
-    if (this.hasOpenTriggerValue) {
-      document.addEventListener(this.openTriggerValue, this.open.bind(this))
-    }
-    if (this.hasCloseTriggerValue) {
-      document.addEventListener(this.closeTriggerValue, this.close.bind(this))
-    }
-  }
-
-  disconnect() {
-    if (this.hasOpenTriggerValue) {
-      document.removeEventListener(this.openTriggerValue, this.open.bind(this))
-    }
-    if (this.hasCloseTriggerValue) {
-      document.removeEventListener(this.closeTriggerValue, this.close.bind(this))
-    }
-  }
-
-  open() {
-    console.log("Opening modal...")
-    this.modalTarget.classList.remove('hidden')
-  }
-
-  close() {
-    this.modalTarget.classList.add('hidden')
-  }
-}
--- a/assets/controllers/preferred_sources_controller.js
+++ b/assets/controllers/preferred_sources_controller.js
@@ -1,101 +0,0 @@
-// assets/controllers/preferred-sources_controller.js
-
-import {Controller} from "@hotwired/stimulus"
-import Sortable from 'sortablejs'
-
-export default class extends Controller {
-  static targets = ["preferredList", "availableList"]
-  static values = {
-    mangaId: Number,
-    preferredSources: Array,
-    allSources: Array
-  }
-
-  connect() {
-    this.initSortable()
-  }
-
-  initSortable() {
-    new Sortable(this.preferredListTarget, {
-      animation: 150,
-      ghostClass: 'bg-gray-300',
-      onEnd: this.handleDragEnd.bind(this)
-    })
-  }
-
-  handleDragEnd() {
-    this.updatePreferredSources()
-  }
-
-  addSource(event) {
-    const sourceId = parseInt(event.currentTarget.dataset.sourceId)
-    if (!this.preferredSourcesValue.includes(sourceId)) {
-      this.preferredSourcesValue = [...this.preferredSourcesValue, sourceId]
-      this.updateLists()
-      this.save()
-    }
-  }
-
-  removeSource(event) {
-    const sourceId = parseInt(event.currentTarget.dataset.sourceId)
-    this.preferredSourcesValue = this.preferredSourcesValue.filter(id => id !== sourceId)
-    this.updateLists()
-    this.save()
-  }
-
-  updatePreferredSources() {
-    this.preferredSourcesValue = Array.from(this.preferredListTarget.children).map(li => parseInt(li.dataset.id))
-    this.save()
-  }
-
-  updateLists() {
-    this.preferredListTarget.innerHTML = this.preferredSourcesValue
-      .map(id => this.allSourcesValue.find(s => s.id === id))
-      .map(source => this.sourceTemplate(source, true))
-      .join('')
-
-    this.availableListTarget.innerHTML = this.allSourcesValue
-      .filter(source => !this.preferredSourcesValue.includes(source.id))
-      .map(source => this.sourceTemplate(source, false))
-      .join('')
-
-    this.initSortable()
-  }
-
-  sourceTemplate(source, isPreferred) {
-    return `
-      <li data-id="${source.id}" draggable="true" class="flex items-center justify-between p-2 bg-gray-100 rounded ${isPreferred ? 'cursor-move' : ''}">
-        <span>${source.name}</span>
-        <button type="button" data-action="preferred-sources#${isPreferred ? 'removeSource' : 'addSource'}" data-source-id="${source.id}" class="text-${isPreferred ? 'red' : 'green'}-500 hover:text-${isPreferred ? 'red' : 'green'}-700">
-          <i class="fas fa-${isPreferred ? 'times' : 'plus'}"></i>
-        </button>
-      </li>
-    `
-  }
-
-  async save() {
-    try {
-      const response = await fetch(`/manga/${this.mangaIdValue}/preferred-sources`, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          'X-Requested-With': 'XMLHttpRequest'
-        },
-        body: JSON.stringify({
-          preferredSources: this.preferredSourcesValue
-        })
-      })
-
-      if (response.ok) {
-        console.log('Preferred sources saved successfully')
-        // Optionally show a success message
-      } else {
-        console.error('Error saving preferred sources')
-        // Optionally show an error message
-      }
-    } catch (error) {
-      console.error('Error:', error)
-      // Optionally show an error message
-    }
-  }
-}
--- a/assets/controllers/reader_controller.js
+++ b/assets/controllers/reader_controller.js
@@ -1,127 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-export default class extends Controller {
-  static targets = ['pageContainer', 'currentPage', 'chapterSelect', 'readingModeButton']
-  static values = {
-    mangaSlug: String,
-    chapterNumber: Number,
-    totalPages: Number,
-    currentPage: { type: Number, default: 1 },
-    readingMode: { type: String, default: 'horizontal' }
-  }
-
-  connect() {
-    this.loadChapters();
-    this.loadPages();
-  }
-
-  async loadChapters() {
-    try {
-      const response = await fetch(`/api/chapters/${this.mangaSlugValue}`);
-      const chapters = await response.json();
-
-      this.chapterSelectTarget.innerHTML = chapters.map(chapter =>
-        `<option value="${chapter.number}" ${chapter.number === this.chapterNumberValue ? 'selected' : ''}>
-          Chapitre ${chapter.number}
-        </option>`
-      ).join('');
-    } catch (error) {
-      console.error('Error loading chapters:', error);
-    }
-  }
-
-  async loadPages() {
-    this.pageContainerTarget.innerHTML = '';
-    if (this.readingModeValue === 'horizontal') {
-      await this.loadPage(this.currentPageValue);
-    } else {
-      for (let i = 1; i <= this.totalPagesValue; i++) {
-        await this.loadPage(i, true);
-      }
-    }
-  }
-
-  async loadPage(pageNumber, isVertical = false) {
-    const response = await fetch(`/api/read/${this.mangaSlugValue}/${this.chapterNumberValue}/${pageNumber}`);
-    const pageContent = await response.text();
-
-    const img = document.createElement('img');
-    img.src = `data:image/jpeg;base64,${pageContent}`;
-    img.alt = `Page ${pageNumber}`;
-    img.classList.add('shadow-lg', 'w-full', 'h-auto');
-
-    if (this.readingModeValue === 'horizontal') {
-      img.classList.add('cursor-pointer');
-      img.dataset.action = 'click->reader#pageClick';
-      this.pageContainerTarget.innerHTML = '';
-    }
-
-    if (isVertical) {
-      img.loading = 'lazy';
-      img.classList.add('mb-4');
-    }
-
-    this.pageContainerTarget.appendChild(img);
-
-    if (!isVertical) {
-      this.currentPageTarget.textContent = pageNumber;
-      this.currentPageValue = pageNumber;
-    }
-  }
-
-  pageClick(event) {
-    if (this.readingModeValue === 'horizontal') {
-      const pageWidth = event.target.offsetWidth;
-      const clickX = event.offsetX;
-
-      if (clickX < pageWidth / 2) {
-        this.previousPage();
-      } else {
-        this.nextPage();
-      }
-    }
-  }
-
-  previousPage() {
-    if (this.currentPageValue > 1) {
-      this.loadPage(this.currentPageValue - 1);
-    } else {
-      this.previousChapter();
-    }
-  }
-
-  nextPage() {
-    if (this.currentPageValue < this.totalPagesValue) {
-      this.loadPage(this.currentPageValue + 1);
-    } else {
-      this.nextChapter();
-    }
-  }
-
-  async previousChapter() {
-    const response = await fetch(`/api/previous-chapter/${this.mangaSlugValue}/${this.chapterNumberValue}`);
-    const previousChapter = await response.json();
-    if (previousChapter) {
-      window.location.href = `/read/${this.mangaSlugValue}/${previousChapter.number}`;
-    }
-  }
-
-  async nextChapter() {
-    const response = await fetch(`/api/next-chapter/${this.mangaSlugValue}/${this.chapterNumberValue}`);
-    const nextChapter = await response.json();
-    if (nextChapter) {
-      window.location.href = `/read/${this.mangaSlugValue}/${nextChapter.number}`;
-    }
-  }
-
-  changeChapter(event) {
-    const selectedChapterNumber = event.target.value;
-    window.location.href = `/read/${this.mangaSlugValue}/${selectedChapterNumber}`;
-  }
-
-  toggleReadingMode() {
-    this.readingModeValue = this.readingModeValue === 'horizontal' ? 'vertical' : 'horizontal';
-    this.readingModeButtonTarget.textContent = this.readingModeValue === 'horizontal' ? 'Passer en mode vertical' : 'Passer en mode horizontal';
-    this.loadPages();
-  }
-}
--- a/assets/controllers/scrapper_configure_controller.js
+++ b/assets/controllers/scrapper_configure_controller.js
@@ -1,76 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-export default class extends Controller {
-  static targets = ['form', 'testForm', 'imageSelector', 'nextPageSelector', 'testResults', 'scrapingType']
-
-  connect() {
-  }
-
-  async saveConfiguration(event) {
-    event.preventDefault();
-    this.formTarget.submit();
-  }
-
-  async testConfiguration(event) {
-    event.preventDefault();
-    const formData = new FormData(this.formTarget);
-    const testFormData = new FormData(this.testFormTarget);
-
-    for (let [key, value] of formData.entries()) {
-      const cleanKey = key.replace(/^content_source\[(.+)]$/, '$1');
-      testFormData.append(`content_source[${cleanKey}]`, value);
-    }
-
-    try {
-      const response = await fetch(this.testFormTarget.action, {
-        method: 'POST',
-        body: testFormData
-      });
-
-      const result = await response.json();
-
-      if (result.success) {
-        this.displayTestResults(result.data);
-      } else {
-        this.displayError(result.message, result.errors);
-      }
-    } catch (error) {
-      console.log(error)
-      this.displayError('An error occurred while testing the configuration');
-    }
-  }
-
-  displayTestResults(data) {
-    let html = '<h3 class="text-xl font-semibold mb-4">Test Results</h3>';
-    html += '<div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 gap-4">';
-    data.forEach(page => {
-      html += `
-        <div class="border rounded-lg p-2 flex flex-col items-center">
-          <img src="${page.image_url}" alt="Page ${page.page_number}" class="w-full h-48 object-cover mb-2">
-          <p class="text-sm font-medium">Page ${page.page_number}</p>
-        </div>
-      `;
-    });
-    html += '</div>';
-    this.testResultsTarget.innerHTML = html;
-  }
-
-  displayError(message, errors = []) {
-    let errorHtml = `
-      <div class="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative" role="alert">
-        <strong class="font-bold">Error:</strong>
-        <span class="block sm:inline">${message}</span>
-    `;
-
-    if (errors.length > 0) {
-      errorHtml += '<ul class="list-disc list-inside mt-2">';
-      errors.forEach(error => {
-        errorHtml += `<li>${error}</li>`;
-      });
-      errorHtml += '</ul>';
-    }
-
-    errorHtml += '</div>';
-    this.testResultsTarget.innerHTML = errorHtml;
-  }
-}
--- a/assets/controllers/scrapper_import_controller.js
+++ b/assets/controllers/scrapper_import_controller.js
@@ -1,81 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-/*
-* The following line makes this controller "lazy": it won't be downloaded until needed
-* See https://github.com/symfony/stimulus-bridge#lazy-controllers
-*/
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-    // ...
-  static targets = ["textarea", "submitButton"]
-
-  connect() {
-    document.addEventListener('openImportModal', this.prepareImportModal.bind(this));
-    document.addEventListener('openExportModal', this.prepareExportModal.bind(this));
-  }
-
-  disconnect() {
-    document.removeEventListener('openImportModal', this.prepareImportModal.bind(this));
-    document.removeEventListener('openExportModal', this.prepareExportModal.bind(this));
-  }
-
-  async prepareExportModal() {
-    try {
-      const response = await fetch('/settings/export_scrappers');
-      const data = await response.json();
-      this.textareaTarget.value = JSON.stringify(data, null, 2);
-      this.submitButtonTarget.textContent = 'Copy to Clipboard';
-      this.submitButtonTarget.dataset.action = 'scrapper-import#copyToClipboard';
-      this.openModal('Export Scrapper Configurations');
-    } catch (error) {
-      console.error('Error:', error);
-    }
-  }
-
-  prepareImportModal() {
-    this.textareaTarget.value = '';
-    this.submitButtonTarget.textContent = 'Import';
-    this.submitButtonTarget.dataset.action = 'scrapper-import#submitImport';
-    this.openModal('Import Scrapper Configurations');
-  }
-
-  openModal(title) {
-    const event = new CustomEvent('openScrapperModal', { detail: { title: title } });
-    document.dispatchEvent(event);
-  }
-
-  async submitImport() {
-    const jsonData = this.textareaTarget.value;
-
-    try {
-      const response = await fetch('/settings/import_scrappers', {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-        },
-        body: jsonData
-      });
-
-      const result = await response.json();
-
-      if (response.ok) {
-        console.log(result.message);
-        document.dispatchEvent(new CustomEvent('closeScrapperModal'));
-        window.location.reload();
-      } else {
-        console.error(result.error);
-      }
-    } catch (error) {
-      console.error('Error:', error);
-    }
-  }
-
-  copyToClipboard() {
-    navigator.clipboard.writeText(this.textareaTarget.value).then(() => {
-      console.log('Copied to clipboard');
-      document.dispatchEvent(new CustomEvent('closeScrapperModal'));
-    }, (err) => {
-      console.error('Could not copy text: ', err);
-    });
-  }
-}
--- a/assets/controllers/search_controller.js
+++ b/assets/controllers/search_controller.js
@@ -1,15 +0,0 @@
-import { Controller } from '@hotwired/stimulus';
-
-/*
-* The following line makes this controller "lazy": it won't be downloaded until needed
-* See https://github.com/symfony/stimulus-bridge#lazy-controllers
-*/
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-    static targets = ['input']
-
-    clearSearch() {
-      this.inputTarget.value = '';
-      this.inputTarget.focus();
-    }
-}
--- a/assets/controllers/table_controller.js
+++ b/assets/controllers/table_controller.js
@@ -1,35 +0,0 @@
-import {Controller} from '@hotwired/stimulus';
-
-/*
-* The following line makes this controller "lazy": it won't be downloaded until needed
-* See https://github.com/symfony/stimulus-bridge#lazy-controllers
-*/
-/* stimulusFetch: 'lazy' */
-export default class extends Controller {
-  static targets = ["body", "toggleIcon"]
-  static values = { open: Boolean }
-
-  connect() {
-    if (!this.openValue) {
-      this.close()
-    }
-  }
-
-  toggle() {
-    if (this.bodyTarget.style.display === "none") {
-      this.open()
-    } else {
-      this.close()
-    }
-  }
-
-  open() {
-    this.bodyTarget.style.display = "block"
-    this.toggleIconTarget.classList.replace("fa-chevron-down", "fa-chevron-up")
-  }
-
-  close() {
-    this.bodyTarget.style.display = "none"
-    this.toggleIconTarget.classList.replace("fa-chevron-up", "fa-chevron-down")
-  }
-}
--- a/assets/controllers/toolbar_controller.js
+++ b/assets/controllers/toolbar_controller.js
@@ -1,198 +0,0 @@
-// assets/controllers/toolbar_controller.js
-import { Controller } from "@hotwired/stimulus"
-import { visit } from "@hotwired/turbo"
-
-export default class extends Controller {
-  static targets = ["dropdown", "icon", "text"]
-  static values = {
-    currentSort: String,
-    currentOrder: String,
-    currentStatus: String,
-    mangaId: Number
-  }
-
-  connect() {
-    window.addEventListener('alert:show', this.stopLoading.bind(this));
-  }
-
-  stopLoading(event) {
-    if(event.currentTarget.dataset !== undefined){
-      this.iconTarget.classList.remove('fa-spin');
-    }
-  }
-
-  refreshMetadata(event) {
-    const mangaId = event.currentTarget.dataset.mangaid;
-    const url = `/refresh_metadata`;
-
-    this.iconTarget.classList.add('fa-spin');
-
-    fetch(url, {
-      method: 'POST',
-      headers: {
-        'X-Requested-With': 'XMLHttpRequest',
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ mangaId: mangaId })
-    })
-      .then(response => {
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        return response.json();
-      });
-  }
-
-  searchLastChapter() {
-    console.log("Searching last chapter...");
-  }
-
-  import() {
-    console.log("Importing...");
-  }
-
-  monitoring(event){
-    const mangaId = event.currentTarget.dataset.mangaid;
-    const currentTarget = event.currentTarget;
-
-    const url = `/toggle_monitored`;
-
-    fetch(url, {
-      method: 'POST',
-      headers: {
-        'X-Requested-With': 'XMLHttpRequest',
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ mangaId: mangaId })
-    })
-      .then(response => {
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        return response.json();
-      }).then(data => {
-        if(data.isMonitored === true){
-          currentTarget.classList.remove('text-white');
-          currentTarget.classList.add('text-green-500');
-          this.textTarget.innerHTML = "Monitored";
-        }else if(data.isMonitored === false){
-          currentTarget.classList.remove('text-green-500');
-          currentTarget.classList.add('text-white');
-          this.textTarget.innerHTML = "Monitoring";
-        }
-        // console.log(data.isMonitored);
-    });
-
-  }
-
-  editMangas() {
-    console.log("Editing mangas...");
-  }
-
-  editManga() {
-    const event = new CustomEvent('openEditModal');
-    document.dispatchEvent(event);
-  }
-
-  editPreferredSources() {
-    const event = new CustomEvent('openPreferredSourcesModal');
-    document.dispatchEvent(event);
-  }
-
-  openImportModal() {
-    const importEvent = new CustomEvent('openImportModal');
-    document.dispatchEvent(importEvent);
-  }
-
-  openExportModal() {
-    const exportEvent = new CustomEvent('openExportModal');
-    document.dispatchEvent(exportEvent);
-  }
-
-  deleteMangas() {
-    console.log("Deleting mangas...");
-  }
-
-  deleteManga() {
-    const event = new CustomEvent('openDeleteModal');
-    document.dispatchEvent(event);
-  }
-
-  confirmDelete(event) {
-    event.preventDefault();
-    const url = `/manga/delete/${this.mangaIdValue}`;
-
-    fetch(url, {
-      method: 'DELETE',
-      headers: {
-        'X-Requested-With': 'XMLHttpRequest',
-        'Content-Type': 'application/json',
-      }
-    })
-      .then(response => {
-        if (!response.ok) {
-          throw new Error('Network response was not ok');
-        }
-        return response.json();
-      })
-      .then(data => {
-        if (data.success) {
-          visit('/', {});
-        } else {
-          throw new Error(data.error);
-        }
-      })
-      .catch(error => {
-        console.error('Error:', error);
-        // Show error message to user
-      });
-  }
-
-  showOptions() {
-    console.log("Showing options...");
-  }
-
-  expandAll() {
-    console.log("Expanding all...");
-  }
-
-  changeView(event) {
-    event.preventDefault();
-    const viewOption = event.currentTarget.dataset.view;
-
-    const url = new URL(window.location);
-    url.searchParams.set('view', viewOption);
-
-    window.location = url.toString();
-  }
-
-  sort(event) {
-    event.preventDefault()
-    const sortOption = event.currentTarget.dataset.sort;
-    let order = 'asc';
-
-    if (sortOption === this.currentSortValue && this.currentOrderValue === 'asc') {
-      order = 'desc';
-    }
-
-    const url = new URL(window.location);
-    url.searchParams.set('sort', sortOption);
-    url.searchParams.set('order', order);
-
-    window.location = url.toString();
-  }
-
-  filter(event) {
-    event.preventDefault();
-    const filterOption = event.currentTarget.dataset.filter;
-
-    const url = new URL(window.location);
-    url.searchParams.set('status', filterOption);
-
-    // Réinitialiser la page à 1 si on utilise la pagination
-    // url.searchParams.set('page', '1');
-
-    window.location = url.toString();
-  }
-
-}
--- a/assets/vue/app/domain/activity/application/store/activityStore.js
+++ b/assets/vue/app/domain/activity/application/store/activityStore.js
@@ -1,13 +1,17 @@
 import { defineStore } from 'pinia';
+import { Job } from '../../domain/entities/job';
 import { ApiJobRepository } from '../../infrastructure/api/ApiJobRepository';

 const jobRepository = new ApiJobRepository();

+const ACTIVE_STATUSES = ['pending', 'in_progress'];
+
 export const useActivityStore = defineStore('activity', {
    state: () => ({
        jobs: [],
        loading: false,
        error: null,
+        mercureEventSource: null,
        // Pagination
        currentPage: 1,
        totalPages: 0,
@@ -15,21 +19,15 @@ export const useActivityStore = defineStore('activity', {
        limit: 20,
        hasNextPage: false,
        hasPreviousPage: false,
-        // Filtres
-        filter: {
-            status: ['pending', 'in_progress'], // Par défaut, ne montrer que les actifs
-            sortBy: 'createdAt',
-            sortOrder: 'DESC'
-        }
+        // Tri
+        sortBy: 'createdAt',
+        sortOrder: 'DESC',
    }),

    getters: {
        activeJobs: state => state.jobs.filter(job => job.isActive()),
-        completedJobs: state => state.jobs.filter(job => job.isCompleted()),
-        failedJobs: state => state.jobs.filter(job => job.hasError()),
        isLoading: state => state.loading,
        hasError: state => !!state.error,
-        // Getters pour la pagination
        paginationInfo: state => ({
            currentPage: state.currentPage,
            totalPages: state.totalPages,
@@ -41,44 +39,25 @@ export const useActivityStore = defineStore('activity', {
    },

    actions: {
-        /**
-         * Charge la liste des jobs selon les filtres actuels
-         * @param {number} page - Numéro de page optionnel
-         */
        async loadJobs(page = null) {
            this.loading = true;
            this.error = null;

            try {
-                const options = {
+                const jobCollection = await jobRepository.getJobs({
                    page: page || this.currentPage,
                    limit: this.limit,
-                    sortBy: this.filter.sortBy,
-                    sortOrder: this.filter.sortOrder,
-                    status: this.filter.status
-                };
+                    sortBy: this.sortBy,
+                    sortOrder: this.sortOrder,
+                    status: ACTIVE_STATUSES,
+                });

-                const jobCollection = await jobRepository.getJobs(options);
-
-                // Mettre à jour les données
                this.jobs = jobCollection.items;
                this.currentPage = jobCollection.page;
                this.total = jobCollection.total;
                this.hasNextPage = jobCollection.hasNextPage;
                this.hasPreviousPage = jobCollection.hasPreviousPage;
-
-                // Calculer le nombre total de pages
                this.totalPages = Math.ceil(this.total / this.limit);
-
-                console.log('Store updated with:', {
-                    jobs: this.jobs.length,
-                    currentPage: this.currentPage,
-                    total: this.total,
-                    limit: this.limit,
-                    totalPages: this.totalPages,
-                    hasNextPage: this.hasNextPage,
-                    hasPreviousPage: this.hasPreviousPage
-                });
            } catch (error) {
                this.error = error.message;
                console.error('Error loading jobs:', error);
@@ -87,10 +66,6 @@ export const useActivityStore = defineStore('activity', {
            }
        },

-        /**
-         * Va à une page spécifique
-         * @param {number} page
-         */
        async goToPage(page) {
            if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
                this.currentPage = page;
@@ -98,39 +73,26 @@ export const useActivityStore = defineStore('activity', {
            }
        },

-        /**
-         * Met à jour les filtres et recharge la liste
-         * @param {Object} filter
-         */
-        async updateFilter(filter) {
-            this.filter = { ...this.filter, ...filter };
-            this.currentPage = 1; // Retourner à la première page lors du changement de filtre
+        async updateSort(sortBy, sortOrder) {
+            this.sortBy = sortBy;
+            this.sortOrder = sortOrder;
+            this.currentPage = 1;
            await this.loadJobs(1);
        },

-        /**
-         * Met à jour la limite par page
-         * @param {number} limit
-         */
        async updateLimit(limit) {
            this.limit = limit;
-            this.currentPage = 1; // Retourner à la première page
+            this.currentPage = 1;
            await this.loadJobs(1);
        },

-        /**
-         * Supprime un job par son ID
-         * @param {string} id
-         */
        async deleteJob(id) {
            this.loading = true;
            this.error = null;

            try {
                await jobRepository.deleteJob(id);
-                // Supprimer le job de la liste locale
                this.jobs = this.jobs.filter(job => job.id !== id);
-                // Recharger la page courante pour avoir les bons totaux
                await this.loadJobs(this.currentPage);
            } catch (error) {
                this.error = error.message;
@@ -140,17 +102,75 @@ export const useActivityStore = defineStore('activity', {
            }
        },

-        /**
-         * Supprime tous les jobs correspondant aux critères
-         * @param {Object} criteria
-         */
+        updateJobProgress(jobId, progress) {
+            const job = this.jobs.find(j => j.id === jobId);
+            if (job) job.progress = progress;
+        },
+
+        handleJobCreated(data) {
+            const alreadyExists = this.jobs.some(j => j.id === data.id);
+            if (alreadyExists) return;
+
+            const job = Job.create({
+                id: data.id,
+                type: data.type_job,
+                status: data.status,
+                createdAt: data.createdAt,
+                context: data.context,
+                attempts: data.attempts,
+                maxAttempts: data.maxAttempts,
+            });
+
+            this.jobs.unshift(job);
+            this.total += 1;
+            this.totalPages = Math.ceil(this.total / this.limit);
+        },
+
+        handleJobStatusChange(jobId, newStatus) {
+            const job = this.jobs.find(j => j.id === jobId);
+            if (!job) return;
+
+            if (newStatus === 'in_progress') {
+                job.status = 'in_progress';
+            } else {
+                setTimeout(() => {
+                    this.jobs = this.jobs.filter(j => j.id !== jobId);
+                    this.total = Math.max(0, this.total - 1);
+                    this.totalPages = Math.ceil(this.total / this.limit);
+                }, 1500);
+            }
+        },
+
+        subscribeMercure() {
+            if (this.mercureEventSource) return;
+            const url = new URL('/.well-known/mercure', window.location.origin);
+            url.searchParams.append('topic', 'jobs/activity');
+            this.mercureEventSource = new EventSource(url.toString());
+            this.mercureEventSource.onmessage = (event) => {
+                const data = JSON.parse(event.data);
+                if (data.type === 'job.created') {
+                    this.handleJobCreated(data);
+                } else if (data.type === 'job.progress_updated') {
+                    this.updateJobProgress(data.jobId, data.progress);
+                } else if (data.type === 'job.status_changed') {
+                    this.handleJobStatusChange(data.jobId, data.status);
+                }
+            };
+        },
+
+        unsubscribeMercure() {
+            if (this.mercureEventSource) {
+                this.mercureEventSource.close();
+                this.mercureEventSource = null;
+            }
+        },
+
        async deleteJobs(criteria = {}) {
            this.loading = true;
            this.error = null;

            try {
                const deleted = await jobRepository.deleteJobs(criteria);
-                // Recharger la liste après suppression
                await this.loadJobs(this.currentPage);
                return deleted;
            } catch (error) {
@@ -160,26 +180,5 @@ export const useActivityStore = defineStore('activity', {
                this.loading = false;
            }
        },
-
-        /**
-         * Supprime tous les jobs terminés
-         */
-        async deleteCompletedJobs() {
-            return this.deleteJobs({ status: ['COMPLETED'] });
-        },
-
-        /**
-         * Supprime tous les jobs en erreur
-         */
-        async deleteFailedJobs() {
-            return this.deleteJobs({ status: ['ERROR'] });
-        },
-
-        /**
-         * Supprime tous les jobs
-         */
-        async deleteAllJobs() {
-            return this.deleteJobs({});
-        }
    }
 });
--- a/assets/vue/app/domain/activity/domain/entities/job.js
+++ b/assets/vue/app/domain/activity/domain/entities/job.js
@@ -10,6 +10,8 @@ export class Job {
        failureReason = null,
        createdAt = new Date().toISOString(),
        updatedAt = new Date().toISOString(),
+        startedAt = null,
+        completedAt = null,
        attempts = 0,
        maxAttempts = 1,
        context = {}
@@ -23,6 +25,8 @@ export class Job {
        this.error = failureReason ?? error;
        this.createdAt = createdAt;
        this.updatedAt = updatedAt;
+        this.startedAt = startedAt;
+        this.completedAt = completedAt;
        this.attempts = attempts;
        this.maxAttempts = maxAttempts;
        this.context = context;
--- a/assets/vue/app/domain/activity/infrastructure/api/ApiJobRepository.js
+++ b/assets/vue/app/domain/activity/infrastructure/api/ApiJobRepository.js
@@ -13,7 +13,7 @@ export class ApiJobRepository extends JobRepositoryInterface {
     * @returns {Promise<JobCollection>} Collection de jobs
     */
    async getJobs(options = {}) {
-        const { page = 1, limit = 100, sortBy = 'createdAt', sortOrder = 'DESC', status = [] } = options;
+        const { page = 1, limit = 100, sortBy = 'createdAt', sortOrder = 'DESC', status = [], type = null } = options;

        try {
            let url = `/api/jobs?page=${page}&limit=${limit}&sortBy=${sortBy}&sortOrder=${sortOrder}`;
@@ -23,6 +23,11 @@ export class ApiJobRepository extends JobRepositoryInterface {
                url += `&status=${status.join(',')}`;
            }

+            // Ajouter le filtre de type si fourni
+            if (type) {
+                url += `&type=${type}`;
+            }
+
            const response = await fetch(url);

            if (!response.ok) {
--- a/assets/vue/app/domain/activity/presentation/pages/ActivityPage.vue
+++ b/assets/vue/app/domain/activity/presentation/pages/ActivityPage.vue
@@ -1,169 +1,153 @@
 <template>
-    <div class="overflow-y-auto h-full">
-        <Toolbar :config="toolbarConfig" class="mb-6" />
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />

-        <div v-if="activityStore.loading" class="flex justify-center py-8">
-            <div class="animate-spin rounded-full h-10 w-10 border-t-2 border-b-2 border-indigo-500"></div>
-        </div>
+        <div class="overflow-y-auto flex-1">
+            <!-- Loading -->
+            <div v-if="loading" class="flex justify-center py-12">
+                <div class="animate-spin h-10 w-10 border-b-2 border-indigo-500 rounded-full"></div>
+            </div>

-        <div v-else-if="activityStore.error" class="bg-red-100 dark:bg-red-900/20 border-l-4 border-red-500 text-red-700 dark:text-red-400 p-4 mb-6">
-            <p>{{ activityStore.error }}</p>
-        </div>
+            <!-- Error -->
+            <div v-else-if="activityStore.error" class="px-6 py-8">
+                <div class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 p-4">
+                    <p class="text-red-800 dark:text-red-200">{{ activityStore.error }}</p>
+                </div>
+            </div>

-        <div v-else class="container mx-auto p-2">
-            <div class="bg-white dark:bg-gray-800 overflow-hidden shadow rounded-lg">
-                <div class="overflow-x-auto">
-                    <table class="min-w-full bg-white dark:bg-gray-800">
+            <!-- Content -->
+            <section v-else class="border-t border-gray-200 dark:border-gray-700">
+                <!-- Empty -->
+                <div v-if="activityStore.jobs.length === 0" class="flex flex-col items-center justify-center py-20 text-gray-400 dark:text-gray-500">
+                    <ClockIcon class="w-12 h-12 mb-3" />
+                    <p class="text-base">Aucun job en cours ou en attente.</p>
+                </div>
+
+                <!-- Table -->
+                <div v-else class="overflow-x-auto">
+                    <table class="min-w-full">
                        <thead>
-                            <tr class="bg-gray-200 dark:bg-gray-700 text-gray-800 dark:text-gray-200">
-                                <th class="w-1/12 py-3 px-4 text-left">
-                                    <input
-                                        type="checkbox"
-                                        class="form-checkbox h-5 w-5 text-green-600"
-                                        @change="toggleSelectAll" />
-                                </th>
-                                <th class="w-2/12 py-3 px-4 text-left">Type</th>
-                                <th class="w-2/12 py-3 px-4 text-left">Statut</th>
-                                <th class="w-3/12 py-3 px-4 text-left">Informations</th>
-                                <th class="w-3/12 py-3 px-4 text-left">Progression</th>
-                                <th class="w-1/12 py-3 px-4 text-left">Actions</th>
+                            <tr class="border-b border-gray-200 dark:border-gray-700 text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
+                                <th class="w-2/11 py-3 px-6 text-left">Type</th>
+                                <th class="w-2/11 py-3 px-4 text-left">Statut</th>
+                                <th class="w-3/11 py-3 px-4 text-left">Informations</th>
+                                <th class="w-3/11 py-3 px-4 text-left">Progression</th>
+                                <th class="w-1/11 py-3 px-4 text-left">Actions</th>
                            </tr>
                        </thead>
-                        <tbody class="text-gray-700 dark:text-gray-300">
-                            <template v-if="activityStore.jobs.length === 0">
-                                <tr>
-                                    <td colspan="6" class="py-8 px-4 text-center text-gray-500">
-                                        <div class="flex flex-col items-center">
-                                            <ClockIcon class="h-12 w-12 text-gray-300 dark:text-gray-600 mb-4" />
-                                            <p class="text-lg font-medium dark:text-gray-300">Aucune activité trouvée</p>
-                                            <p class="text-sm dark:text-gray-400">Aucune activité ne correspond aux filtres actuels.</p>
-                                        </div>
-                                    </td>
-                                </tr>
-                            </template>
-                            <template v-else>
-                                <JobItem
-                                    v-for="job in activityStore.jobs"
-                                    :key="job.id"
-                                    :job="job"
-                                    @delete="deleteJob" />
-                            </template>
+                        <tbody class="divide-y divide-gray-100 dark:divide-gray-700/50 text-gray-700 dark:text-gray-300">
+                            <JobItem
+                                v-for="job in activityStore.jobs"
+                                :key="job.id"
+                                :job="job"
+                                @delete="deleteJob" />
                        </tbody>
                    </table>
                </div>

                <!-- Pagination -->
                <Pagination
-                    v-if="activityStore.total > activityStore.limit"
+                    v-if="total > activityStore.limit"
                    :current-page="activityStore.currentPage"
                    :total-pages="activityStore.totalPages"
-                    :total="activityStore.total"
+                    :total="total"
                    :limit="activityStore.limit"
                    :has-next-page="activityStore.hasNextPage"
                    :has-previous-page="activityStore.hasPreviousPage"
                    @page-change="changePage" />
-            </div>
+            </section>
        </div>
    </div>
 </template>

 <script setup>
-    import { ArrowPathIcon, ClockIcon, FunnelIcon, TrashIcon } from '@heroicons/vue/24/outline';
-import { computed, onMounted, ref } from 'vue';
+import { ArrowPathIcon, BarsArrowDownIcon, ClockIcon, TrashIcon } from '@heroicons/vue/24/outline';
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, onUnmounted } from 'vue';
 import Pagination from '../../../../shared/components/ui/Pagination.vue';
 import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
 import { useActivityStore } from '../../application/store/activityStore';
 import JobItem from '../components/JobItem.vue';

-    const activityStore = useActivityStore();
-    const selectedAll = ref(false);
+const activityStore = useActivityStore();

-    // Statuts disponibles pour le filtre
-    const statusOptions = [
-        { value: ['pending', 'in_progress'], label: 'Actifs' },
-        { value: ['pending', 'in_progress', 'completed', 'failed'], label: 'Tous' },
-        { value: ['completed'], label: 'Terminés' },
-        { value: ['failed'], label: 'En erreur' },
-        { value: ['pending'], label: 'En attente' },
-        { value: ['in_progress'], label: 'En cours' }
-    ];
+const { sortBy, sortOrder, total, loading } = storeToRefs(activityStore);

-    // Index du statut actif (par défaut "Actifs")
-    const activeStatusIndex = ref(0);
+const isSortSelected = (by, order) => sortBy.value === by && sortOrder.value === order;

-    // Configuration de la toolbar réactive
-    const toolbarConfig = computed(() => ({
-        leftSection: [
-            {
-                icon: FunnelIcon,
-                type: 'dropdown',
-                label: statusOptions[activeStatusIndex.value].label,
-                active: false,
-                items: statusOptions.map((option, index) => ({
-                    label: option.label,
-                    isSelected: index === activeStatusIndex.value,
-                    onClick: () => setStatusFilter(index)
-                }))
-            }
-        ],
-        rightSection: [
-            {
-                icon: ArrowPathIcon,
-                type: 'button',
-                label: 'Rafraîchir',
-                onClick: refreshJobs
-            },
-            {
-                icon: TrashIcon,
-                type: 'button',
-                label: 'Supprimer visibles',
-                onClick: deleteVisibleJobs
-            }
-        ]
-    }));
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Activité', class: 'text-sm font-medium' },
+        { type: 'label', text: `(${total.value})`, class: 'text-sm text-gray-400' },
+    ],
+    rightSection: [
+        {
+            type: 'dropdown',
+            icon: BarsArrowDownIcon,
+            label: 'Trier',
+            items: [
+                {
+                    label: 'Plus récent',
+                    isSelected: isSortSelected('createdAt', 'DESC'),
+                    onClick: () => activityStore.updateSort('createdAt', 'DESC'),
+                },
+                {
+                    label: 'Plus ancien',
+                    isSelected: isSortSelected('createdAt', 'ASC'),
+                    onClick: () => activityStore.updateSort('createdAt', 'ASC'),
+                },
+                {
+                    label: 'Par type',
+                    isSelected: isSortSelected('type', 'ASC'),
+                    onClick: () => activityStore.updateSort('type', 'ASC'),
+                },
+                {
+                    label: 'Par statut',
+                    isSelected: isSortSelected('status', 'ASC'),
+                    onClick: () => activityStore.updateSort('status', 'ASC'),
+                },
+            ],
+        },
+        {
+            type: 'button',
+            icon: ArrowPathIcon,
+            label: 'Rafraîchir',
+            disabled: loading.value,
+            onClick: () => activityStore.loadJobs(),
+        },
+        {
+            type: 'button',
+            icon: TrashIcon,
+            label: 'Supprimer visibles',
+            disabled: loading.value || total.value === 0,
+            onClick: deleteVisibleJobs,
+        },
+    ],
+}));

-    onMounted(() => {
-        loadJobs();
-    });
+onMounted(() => {
+    activityStore.loadJobs();
+    activityStore.subscribeMercure();
+});

-    function loadJobs() {
-        activityStore.loadJobs();
+onUnmounted(() => {
+    activityStore.unsubscribeMercure();
+});
+
+function changePage(page) {
+    activityStore.goToPage(page);
+}
+
+function deleteJob(id) {
+    if (confirm('Voulez-vous vraiment supprimer ce job ?')) {
+        activityStore.deleteJob(id);
    }
+}

-    function refreshJobs() {
-        loadJobs();
-    }
-
-    function changePage(page) {
-        activityStore.goToPage(page);
-    }
-
-    function toggleSelectAll() {
-        selectedAll.value = !selectedAll.value;
-        // La logique pour sélectionner tous les jobs serait ajoutée ici
-    }
-
-    function setStatusFilter(index) {
-        if (index >= 0 && index < statusOptions.length) {
-            activeStatusIndex.value = index;
-            activityStore.updateFilter({ status: statusOptions[index].value });
-        }
-    }
-
-    function deleteJob(id) {
-        if (confirm('Voulez-vous vraiment supprimer ce job ?')) {
-            activityStore.deleteJob(id);
-        }
-    }
-
-    function deleteVisibleJobs() {
-        if (activityStore.jobs.length === 0) {
-            return;
-        }
-
-        const statusLabel = statusOptions[activeStatusIndex.value].label.toLowerCase();
-        if (confirm(`Voulez-vous vraiment supprimer tous les jobs ${statusLabel} ?`)) {
-            activityStore.deleteJobs({ status: activityStore.filter.status });
-        }
+function deleteVisibleJobs() {
+    if (activityStore.jobs.length === 0) return;
+    if (confirm('Voulez-vous vraiment supprimer tous les jobs visibles ?')) {
+        activityStore.deleteJobs({ status: ['pending', 'in_progress'] });
    }
+}
 </script>
--- a/assets/vue/app/domain/conversion/presentation/pages/ConversionPage.vue
+++ b/assets/vue/app/domain/conversion/presentation/pages/ConversionPage.vue
@@ -1,84 +1,77 @@
 <template>
-  <div class="flex flex-col h-full bg-gray-50 dark:bg-gray-900">
-    <div class="overflow-y-auto flex-1">
-      <div class="container mx-auto px-4 sm:px-6 lg:px-8 py-8">
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />

-        <FileUploadArea
-          :selected-file="conversionStore.currentFile"
-          :disabled="conversionStore.isProcessing"
-          @file-selected="handleFileSelected"
-          @file-cleared="handleFileClear"
-        />
+        <div class="overflow-y-auto flex-1">
+            <div class="px-6 py-8">

-        <div v-if="conversionStore.hasSelectedFile && !conversionStore.hasSucceeded" class="mt-6 flex justify-center">
-          <button
-            @click="handleConvert"
-            :disabled="conversionStore.isProcessing"
-            :class="[
-              'flex items-center gap-2 px-6 py-3 text-white font-medium rounded-lg transition-colors',
-              conversionStore.isProcessing
-                ? 'bg-gray-400 cursor-not-allowed'
-                : 'bg-green-600 hover:bg-green-700'
-            ]"
-          >
-            <ArrowPathIcon :class="['w-5 h-5', conversionStore.isProcessing && 'animate-spin']" />
-            {{ conversionStore.isProcessing ? 'Conversion en cours...' : 'Convertir en CBZ' }}
-          </button>
-        </div>
+                <!-- Zone d'upload -->
+                <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Fichier</h2>
+                    <FileUploadArea
+                        :selected-file="conversionStore.currentFile"
+                        :disabled="conversionStore.isProcessing"
+                        @file-selected="handleFileSelected"
+                        @file-cleared="handleFileClear"
+                    />
+                </section>

-        <ConversionProgress
-          v-if="showProgress"
-          class="mt-6"
-          :is-converting="conversionStore.isProcessing"
-          :progress="conversionStore.conversionProgress"
-          :is-success="conversionStore.hasSucceeded"
-          :has-error="conversionStore.hasError"
-          :error-message="conversionStore.conversionError"
-          :file-name="conversionStore.currentFileName"
-          :original-size="conversionStore.currentFile?.size || 0"
-          :converted-size="conversionStore.convertedFile?.size || 0"
-          @download="handleDownload"
-          @reset="handleReset"
-        />
+                <!-- Progression -->
+                <section v-if="showProgress" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+                    <ConversionProgress
+                        :is-converting="conversionStore.isProcessing"
+                        :progress="conversionStore.conversionProgress"
+                        :is-success="conversionStore.hasSucceeded"
+                        :has-error="conversionStore.hasError"
+                        :error-message="conversionStore.conversionError"
+                        :file-name="conversionStore.currentFileName"
+                        :original-size="conversionStore.currentFile?.size || 0"
+                        :converted-size="conversionStore.convertedFile?.size || 0"
+                        @download="handleDownload"
+                        @reset="handleReset"
+                    />
+                </section>
+
+                <!-- Historique -->
+                <section v-if="conversionStore.conversionCount > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+                    <div class="flex items-center justify-between mb-3">
+                        <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Historique</h2>
+                        <button
+                            @click="conversionStore.clearHistory()"
+                            class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
+                        >
+                            Effacer
+                        </button>
+                    </div>
+                    <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+                        <div
+                            v-for="(conversion, index) in conversionStore.conversionHistory"
+                            :key="index"
+                            class="flex items-center justify-between py-3"
+                        >
+                            <div>
+                                <p class="text-sm text-gray-900 dark:text-gray-100">{{ conversion.originalName }}</p>
+                                <p class="text-xs text-gray-500 dark:text-gray-400">{{ formatDate(conversion.timestamp) }}</p>
+                            </div>
+                            <div class="text-right text-sm">
+                                <p class="text-gray-600 dark:text-gray-300">
+                                    {{ formatFileSize(conversion.originalSize) }} → {{ formatFileSize(conversion.convertedSize) }}
+                                </p>
+                                <p class="text-xs text-green-600">{{ calculateSaving(conversion.originalSize, conversion.convertedSize) }}</p>
+                            </div>
+                        </div>
+                    </div>
+                </section>

-        <div v-if="conversionStore.conversionCount > 0" class="mt-8">
-          <div class="flex items-center justify-between mb-3">
-            <h3 class="text-sm font-medium text-gray-700 dark:text-gray-300">Historique</h3>
-            <button
-              @click="conversionStore.clearHistory()"
-              class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors"
-            >
-              Effacer
-            </button>
-          </div>
-          <div class="divide-y divide-gray-200 dark:divide-gray-700">
-            <div
-              v-for="(conversion, index) in conversionStore.conversionHistory"
-              :key="index"
-              class="flex items-center justify-between py-3"
-            >
-              <div>
-                <p class="text-sm text-gray-900 dark:text-gray-100">{{ conversion.originalName }}</p>
-                <p class="text-xs text-gray-500 dark:text-gray-400">{{ formatDate(conversion.timestamp) }}</p>
-              </div>
-              <div class="text-right text-sm">
-                <p class="text-gray-600 dark:text-gray-300">
-                  {{ formatFileSize(conversion.originalSize) }} → {{ formatFileSize(conversion.convertedSize) }}
-                </p>
-                <p class="text-xs text-green-600">{{ calculateSaving(conversion.originalSize, conversion.convertedSize) }}</p>
-              </div>
            </div>
-          </div>
        </div>
-
-      </div>
    </div>
-  </div>
 </template>

 <script setup>
 import { ArrowPathIcon } from '@heroicons/vue/24/outline';
 import { computed, onMounted } from 'vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
 import { useConversionStore } from '../../application/store/conversionStore';
 import { useNotifications } from '../../../../shared/composables/useNotifications';
 import ConversionProgress from '../components/ConversionProgress.vue';
@@ -88,53 +81,68 @@ const conversionStore = useConversionStore();
 const { showSuccess, showError } = useNotifications();

 const showProgress = computed(() =>
-  conversionStore.hasSelectedFile &&
-  (conversionStore.isProcessing || conversionStore.hasSucceeded || conversionStore.hasError)
+    conversionStore.hasSelectedFile &&
+    (conversionStore.isProcessing || conversionStore.hasSucceeded || conversionStore.hasError)
 );

+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Conversion CBR → CBZ', class: 'text-sm font-medium' },
+    ],
+    rightSection: [
+        ...(conversionStore.hasSelectedFile && !conversionStore.hasSucceeded ? [{
+            type: 'button',
+            icon: ArrowPathIcon,
+            label: conversionStore.isProcessing ? 'Conversion en cours...' : 'Convertir en CBZ',
+            onClick: handleConvert,
+            disabled: conversionStore.isProcessing,
+        }] : []),
+    ],
+}));
+
 const handleFileSelected = (file) => {
-  conversionStore.selectFile(file);
+    conversionStore.selectFile(file);
 };

 const handleFileClear = () => {
-  conversionStore.resetConversion();
+    conversionStore.resetConversion();
 };

 const handleConvert = async () => {
-  if (!conversionStore.currentFile) return;
-  const success = await conversionStore.convertCurrentFile();
-  if (success) {
-    showSuccess('Conversion réussie !');
-  } else {
-    showError(conversionStore.conversionError ?? 'Échec de la conversion');
-  }
+    if (!conversionStore.currentFile) return;
+    const success = await conversionStore.convertCurrentFile();
+    if (success) {
+        showSuccess('Conversion réussie !');
+    } else {
+        showError(conversionStore.conversionError ?? 'Échec de la conversion');
+    }
 };

 const handleDownload = () => conversionStore.downloadConvertedFile();
 const handleReset = () => conversionStore.resetConversion();

 const formatFileSize = (bytes) => {
-  if (bytes === 0) return '0 octets';
-  const k = 1024;
-  const sizes = ['octets', 'Ko', 'Mo', 'Go'];
-  const i = Math.floor(Math.log(bytes) / Math.log(k));
-  return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
+    if (bytes === 0) return '0 octets';
+    const k = 1024;
+    const sizes = ['octets', 'Ko', 'Mo', 'Go'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return `${parseFloat((bytes / Math.pow(k, i)).toFixed(1))} ${sizes[i]}`;
 };

 const formatDate = (isoString) =>
-  new Intl.DateTimeFormat('fr-FR', {
-    day: 'numeric',
-    month: 'short',
-    hour: '2-digit',
-    minute: '2-digit',
-  }).format(new Date(isoString));
+    new Intl.DateTimeFormat('fr-FR', {
+        day: 'numeric',
+        month: 'short',
+        hour: '2-digit',
+        minute: '2-digit',
+    }).format(new Date(isoString));

 const calculateSaving = (originalSize, convertedSize) => {
-  if (!originalSize || !convertedSize) return '';
-  const saving = ((originalSize - convertedSize) / originalSize) * 100;
-  if (saving > 0) return `-${saving.toFixed(1)}%`;
-  if (saving < 0) return `+${Math.abs(saving).toFixed(1)}%`;
-  return '0%';
+    if (!originalSize || !convertedSize) return '';
+    const saving = ((originalSize - convertedSize) / originalSize) * 100;
+    if (saving > 0) return `-${saving.toFixed(1)}%`;
+    if (saving < 0) return `+${Math.abs(saving).toFixed(1)}%`;
+    return '0%';
 };

 onMounted(() => conversionStore.resetConversion());
--- a/assets/vue/app/domain/import/presentation/components/FileImportCard.vue
+++ b/assets/vue/app/domain/import/presentation/components/FileImportCard.vue
@@ -1,228 +1,150 @@
 <template>
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 p-6">
-    <div class="flex items-start space-x-4">
-      <!-- File Icon and Info -->
-      <div class="flex-shrink-0">
-        <div class="w-12 h-12 bg-gray-100 dark:bg-gray-700 rounded-lg flex items-center justify-center">
-          <svg class="w-6 h-6 text-gray-600 dark:text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
-          </svg>
-        </div>
-      </div>
+    <div class="py-3">

-      <!-- File Details -->
-      <div class="flex-1 min-w-0">
-        <div class="flex items-center justify-between">
-          <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 truncate">
-            {{ file.filename }}
-          </h3>
-
-          <!-- Status Badge -->
-          <div class="flex-shrink-0 ml-4">
-            <StatusBadge :status="file.status" :is-analyzing="isAnalyzing" :is-importing="isImporting" />
-          </div>
-        </div>
-
-        <p class="text-sm text-gray-500 dark:text-gray-400 mt-1">
-          {{ file.getFormattedSize() }} • {{ file.getFileExtension().toUpperCase() }}
-        </p>
-
-        <!-- Extracted Info -->
-        <div v-if="file.isAnalyzed()" class="mt-2 flex gap-3 text-sm">
-          <span v-if="file.getExtractedChapterNumber()" class="inline-flex items-center px-2 py-1 rounded-md bg-blue-50 dark:bg-blue-900/30 text-blue-700 dark:text-blue-300">
-            Chapitre {{ file.getExtractedChapterNumber() }}
-          </span>
-          <span v-if="file.getExtractedVolumeNumber()" class="inline-flex items-center px-2 py-1 rounded-md bg-purple-50 dark:bg-purple-900/30 text-purple-700 dark:text-purple-300">
-            Volume {{ file.getExtractedVolumeNumber() }}
-          </span>
-        </div>
-
-        <!-- Error Display -->
-        <div v-if="file.hasError()" class="mt-3 p-3 bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 rounded-md">
-          <div class="flex">
-            <svg class="flex-shrink-0 h-5 w-5 text-red-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-            </svg>
-            <div class="ml-3">
-              <h3 class="text-sm font-medium text-red-800 dark:text-red-300">Erreur</h3>
-              <div class="mt-2 text-sm text-red-700 dark:text-red-400">{{ file.errorMessage }}</div>
+        <!-- Row principal : icône, nom, statut, actions -->
+        <div class="flex items-center gap-3">
+            <div class="w-8 h-8 bg-gray-100 dark:bg-gray-700 flex items-center justify-center shrink-0">
+                <DocumentIcon class="w-4 h-4 text-gray-500 dark:text-gray-400" />
+            </div>
+
+            <div class="flex-1 min-w-0">
+                <p class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate">{{ file.filename }}</p>
+                <p class="text-xs text-gray-500 dark:text-gray-400">
+                    {{ file.getFormattedSize() }} · {{ file.getFileExtension().toUpperCase() }}
+                    <span v-if="file.isAnalyzed() && file.getExtractedChapterNumber()" class="ml-2 text-green-600 dark:text-green-400">
+                        Ch. {{ file.getExtractedChapterNumber() }}
+                    </span>
+                    <span v-if="file.isAnalyzed() && file.getExtractedVolumeNumber()" class="ml-2 text-green-600 dark:text-green-400">
+                        Vol. {{ file.getExtractedVolumeNumber() }}
+                    </span>
+                </p>
+            </div>
+
+            <div class="flex items-center gap-2 shrink-0">
+                <StatusBadge :status="file.status" :is-analyzing="isAnalyzing" :is-importing="isImporting" />
+
+                <button
+                    v-if="file.isReadyForImport()"
+                    @click="$emit('import-file')"
+                    :disabled="isImporting"
+                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white text-xs font-medium transition-colors"
+                >
+                    <ArrowUpTrayIcon class="w-3.5 h-3.5" />
+                    Importer
+                </button>
+
+                <button
+                    v-if="file.hasError()"
+                    @click="$emit('retry-file')"
+                    class="inline-flex items-center gap-1 px-3 py-1.5 bg-green-600 hover:bg-green-700 text-white text-xs font-medium transition-colors"
+                >
+                    Réessayer
+                </button>
+
+                <button
+                    @click="$emit('remove-file')"
+                    class="p-1.5 text-gray-400 hover:text-red-500 dark:hover:text-red-400 transition-colors"
+                    title="Supprimer"
+                >
+                    <XMarkIcon class="w-4 h-4" />
+                </button>
            </div>
-          </div>
        </div>

-        <!-- Manga Selection -->
-        <div v-if="file.isAnalyzed() && file.hasMatches()" class="mt-4 space-y-3">
-          <div>
-            <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-3">
-              Sélectionner un manga ({{ file.getMatches().length }} correspondance(s) trouvée(s))
-            </label>
+        <!-- Message d'erreur -->
+        <div v-if="file.hasError()" class="mt-2 flex items-start gap-2 text-xs text-red-700 dark:text-red-400 bg-red-50 dark:bg-red-900/20 px-3 py-2">
+            <ExclamationCircleIcon class="w-4 h-4 shrink-0 mt-0.5" />
+            {{ file.errorMessage }}
+        </div>

-            <!-- Matches Grid -->
-            <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-3">
-              <MangaMatchCard
-                v-for="match in sortedMatches"
-                :key="match.id"
-                :match="match"
-                :is-selected="file.selectedManga?.id === match.id"
-                @select-match="handleMangaSelection"
-              />
+        <!-- Aucun manga trouvé -->
+        <div v-if="file.isAnalyzed() && !file.hasMatches()" class="mt-2 flex items-start gap-2 text-xs text-yellow-700 dark:text-yellow-400 bg-yellow-50 dark:bg-yellow-900/20 px-3 py-2">
+            <ExclamationTriangleIcon class="w-4 h-4 shrink-0 mt-0.5" />
+            Aucun manga correspondant trouvé. Vérifiez le nom du fichier.
+        </div>
+
+        <!-- Sélection du manga -->
+        <div v-if="file.isAnalyzed() && file.hasMatches()" class="mt-3 space-y-3">
+            <p class="text-xs font-medium text-gray-500 dark:text-gray-400 uppercase tracking-wide">
+                {{ file.getMatches().length }} correspondance(s)
+            </p>
+
+            <div class="grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-2">
+                <MangaMatchCard
+                    v-for="match in sortedMatches"
+                    :key="match.id"
+                    :match="match"
+                    :is-selected="file.selectedManga?.id === match.id"
+                    @select-match="handleMangaSelection"
+                />
            </div>
-          </div>
+        </div>

-          <!-- Selected Manga Preview -->
-          <div v-if="file.selectedManga" class="flex items-center gap-3 p-3 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-md">
-            <img
-              v-if="file.selectedManga.thumbnailUrl"
-              :src="file.selectedManga.thumbnailUrl"
-              :alt="file.selectedManga.title"
-              class="w-12 h-16 object-cover rounded"
-            />
-            <div class="flex-1">
-              <p class="font-medium text-gray-900 dark:text-gray-100">{{ file.selectedManga.title }}</p>
-              <p class="text-sm text-gray-500 dark:text-gray-400">{{ file.selectedManga.slug }}</p>
-              <p class="text-xs text-blue-600 dark:text-blue-400 mt-1">Score: {{ file.selectedManga.matchScore }}%</p>
-            </div>
-          </div>
-
-          <!-- Chapter/Volume Number Inputs -->
-          <div v-if="file.selectedManga" class="grid grid-cols-2 gap-3">
-            <!-- Chapter Number -->
+        <!-- Numéros de chapitre / volume -->
+        <div v-if="file.selectedManga" class="mt-3 grid grid-cols-2 gap-3">
            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Numéro de chapitre
-              </label>
-              <input
-                type="number"
-                step="0.5"
-                :value="file.selectedChapterNumber ?? ''"
-                @input="handleChapterNumberInput"
-                :disabled="file.selectedVolumeNumber !== null"
-                class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-600"
-                placeholder="Ex: 1, 1.5, 2..."
-              />
+                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Chapitre</label>
+                <input
+                    type="number"
+                    step="0.5"
+                    :value="file.selectedChapterNumber ?? ''"
+                    @input="handleChapterNumberInput"
+                    :disabled="file.selectedVolumeNumber !== null"
+                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 disabled:bg-gray-100 dark:disabled:bg-gray-600 disabled:text-gray-400"
+                    placeholder="Ex: 1, 1.5..."
+                />
            </div>
-
-            <!-- Volume Number -->
            <div>
-              <label class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                Numéro de volume
-              </label>
-              <input
-                type="number"
-                step="0.5"
-                :value="file.selectedVolumeNumber ?? ''"
-                @input="handleVolumeNumberInput"
-                :disabled="file.selectedChapterNumber !== null"
-                class="w-full border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-gray-100 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 disabled:bg-gray-100 dark:disabled:bg-gray-600"
-                placeholder="Ex: 1, 1.5, 2..."
-              />
+                <label class="block text-xs font-medium text-gray-700 dark:text-gray-300 mb-1">Volume</label>
+                <input
+                    type="number"
+                    step="0.5"
+                    :value="file.selectedVolumeNumber ?? ''"
+                    @input="handleVolumeNumberInput"
+                    :disabled="file.selectedChapterNumber !== null"
+                    class="w-full px-3 py-2 text-sm border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 focus:outline-none focus:ring-2 focus:ring-green-500 focus:border-green-500 disabled:bg-gray-100 dark:disabled:bg-gray-600 disabled:text-gray-400"
+                    placeholder="Ex: 1, 1.5..."
+                />
            </div>
-          </div>
        </div>

-        <!-- No Matches Message -->
-        <div v-if="file.isAnalyzed() && !file.hasMatches()" class="mt-4 p-3 bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-800 rounded-md">
-          <div class="flex">
-            <svg class="flex-shrink-0 h-5 w-5 text-yellow-400" fill="currentColor" viewBox="0 0 20 20">
-              <path fill-rule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clip-rule="evenodd" />
-            </svg>
-            <div class="ml-3">
-              <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-300">Aucun manga trouvé</h3>
-              <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-400">
-                Aucun manga ne correspond à ce fichier. Vérifiez le nom du fichier.
-              </div>
-            </div>
-          </div>
-        </div>
-      </div>
    </div>
-
-    <!-- Actions -->
-    <div class="mt-6 flex justify-between items-center border-t dark:border-gray-700 pt-4">
-      <div class="flex space-x-3">
-        <!-- Import Button -->
-        <button
-          v-if="file.isReadyForImport()"
-          @click="$emit('import-file')"
-          :disabled="isImporting"
-          class="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-md text-sm font-medium flex items-center"
-        >
-          <svg v-if="isImporting" class="animate-spin -ml-1 mr-2 h-4 w-4 text-white" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24">
-            <circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"></circle>
-            <path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"></path>
-          </svg>
-          {{ isImporting ? 'Import en cours...' : 'Importer' }}
-        </button>
-
-        <!-- Retry Button -->
-        <button
-          v-if="file.hasError()"
-          @click="$emit('retry-file')"
-          class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
-        >
-          Réessayer
-        </button>
-      </div>
-
-      <!-- Remove Button -->
-      <button
-        @click="$emit('remove-file')"
-        class="text-red-600 hover:text-red-700 text-sm font-medium"
-      >
-        Supprimer
-      </button>
-    </div>
-  </div>
 </template>

 <script setup>
+import { ArrowUpTrayIcon, DocumentIcon, ExclamationCircleIcon, ExclamationTriangleIcon, XMarkIcon } from '@heroicons/vue/24/outline';
 import { computed } from 'vue';
 import MangaMatchCard from './MangaMatchCard.vue';
 import StatusBadge from './StatusBadge.vue';

 const props = defineProps({
-  file: {
-    type: Object,
-    required: true
-  },
-  isAnalyzing: {
-    type: Boolean,
-    default: false
-  },
-  isImporting: {
-    type: Boolean,
-    default: false
-  }
+    file: { type: Object, required: true },
+    isAnalyzing: { type: Boolean, default: false },
+    isImporting: { type: Boolean, default: false },
 });

 const emit = defineEmits([
-  'manga-selected',
-  'chapter-number-selected',
-  'volume-number-selected',
-  'import-file',
-  'retry-file',
-  'remove-file'
+    'manga-selected',
+    'chapter-number-selected',
+    'volume-number-selected',
+    'import-file',
+    'retry-file',
+    'remove-file',
 ]);

-// Computed property to get sorted matches
-const sortedMatches = computed(() => {
-  const matches = props.file.getMatches();
-  return matches.sort((a, b) => b.matchScore - a.matchScore);
-});
+const sortedMatches = computed(() =>
+    [...props.file.getMatches()].sort((a, b) => b.matchScore - a.matchScore)
+);

-const handleMangaSelection = (selectedManga) => {
-  emit('manga-selected', selectedManga);
-};
+const handleMangaSelection = (manga) => emit('manga-selected', manga);

 const handleChapterNumberInput = (event) => {
-  const value = event.target.value;
-  const chapterNumber = value ? parseFloat(value) : null;
-  emit('chapter-number-selected', chapterNumber);
+    const value = event.target.value;
+    emit('chapter-number-selected', value ? parseFloat(value) : null);
 };

 const handleVolumeNumberInput = (event) => {
-  const value = event.target.value;
-  const volumeNumber = value ? parseFloat(value) : null;
-  emit('volume-number-selected', volumeNumber);
+    const value = event.target.value;
+    emit('volume-number-selected', value ? parseFloat(value) : null);
 };
 </script>
--- a/assets/vue/app/domain/import/presentation/components/ImportResults.vue
+++ b/assets/vue/app/domain/import/presentation/components/ImportResults.vue
@@ -1,96 +1,94 @@
 <template>
-  <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm border dark:border-gray-700 p-6">
-    <div class="text-center mb-6">
-      <div class="mx-auto flex items-center justify-center h-12 w-12 rounded-full bg-green-100 dark:bg-green-900/40 mb-4">
-        <svg class="h-6 w-6 text-green-600" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
-        </svg>
+  <div>
+    <!-- En-tête -->
+    <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+      <div class="flex items-center justify-between">
+        <div class="flex items-center gap-3">
+          <div class="flex items-center justify-center h-9 w-9 bg-green-100 dark:bg-green-900/40">
+            <CheckCircleIcon class="h-5 w-5 text-green-600" />
+          </div>
+          <div>
+            <h3 class="text-sm font-medium text-gray-900 dark:text-gray-100">Import terminé</h3>
+            <p class="text-xs text-gray-500 dark:text-gray-400">Voici le résumé de votre session d'import</p>
+          </div>
+        </div>
+        <div class="flex items-center gap-6 text-center">
+          <div>
+            <div class="text-xl font-bold text-green-600">{{ importedCount }}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">Importés</div>
+          </div>
+          <div>
+            <div class="text-xl font-bold text-red-600">{{ errorCount }}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">Erreurs</div>
+          </div>
+          <div>
+            <div class="text-xl font-bold text-gray-600 dark:text-gray-300">{{ totalCount }}</div>
+            <div class="text-xs text-gray-500 dark:text-gray-400">Total</div>
+          </div>
+        </div>
      </div>
-      <h3 class="text-lg font-medium text-gray-900 dark:text-gray-100 mb-2">Import terminé</h3>
-      <p class="text-sm text-gray-500 dark:text-gray-400">
-        Voici le résumé de votre session d'import
-      </p>
-    </div>
+    </section>

-    <!-- Statistics -->
-    <div class="grid grid-cols-3 gap-4 mb-6">
-      <div class="text-center">
-        <div class="text-2xl font-bold text-green-600">{{ importedCount }}</div>
-        <div class="text-sm text-gray-500 dark:text-gray-400">Importés</div>
-      </div>
-      <div class="text-center">
-        <div class="text-2xl font-bold text-red-600">{{ errorCount }}</div>
-        <div class="text-sm text-gray-500">Erreurs</div>
-      </div>
-      <div class="text-center">
-        <div class="text-2xl font-bold text-gray-600">{{ totalCount }}</div>
-        <div class="text-sm text-gray-500">Total</div>
-      </div>
-    </div>
-
-    <!-- Success Files List -->
-    <div v-if="importedFiles.length > 0" class="mb-6">
-      <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
-        Fichiers importés avec succès ({{ importedFiles.length }})
-      </h4>
-      <ul class="space-y-2">
-        <li
+    <!-- Fichiers importés -->
+    <section v-if="importedFiles.length > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+      <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
+        Importés ({{ importedFiles.length }})
+      </h2>
+      <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+        <div
          v-for="file in importedFiles"
          :key="file.id"
-          class="flex items-center text-sm"
+          class="flex items-center gap-2 py-2.5 text-sm"
        >
-          <svg class="flex-shrink-0 h-4 w-4 text-green-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clip-rule="evenodd" />
-          </svg>
-          <span class="text-gray-900 dark:text-gray-100">{{ file.filename }}</span>
-          <span v-if="file.selectedManga" class="ml-2 text-gray-500 dark:text-gray-400">
-            → {{ file.selectedManga.title }}
-          </span>
-        </li>
-      </ul>
-    </div>
+          <CheckCircleIcon class="flex-shrink-0 h-4 w-4 text-green-400" />
+          <span class="text-gray-900 dark:text-gray-100 truncate">{{ file.filename }}</span>
+          <span v-if="file.selectedManga" class="text-gray-400 dark:text-gray-500 shrink-0">→ {{ file.selectedManga.title }}</span>
+        </div>
+      </div>
+    </section>

-    <!-- Error Files List -->
-    <div v-if="errorFiles.length > 0" class="mb-6">
-      <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 mb-3">
-        Fichiers en erreur ({{ errorFiles.length }})
-      </h4>
-      <ul class="space-y-2">
-        <li
+    <!-- Fichiers en erreur -->
+    <section v-if="errorFiles.length > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+      <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-3">
+        Erreurs ({{ errorFiles.length }})
+      </h2>
+      <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+        <div
          v-for="file in errorFiles"
          :key="file.id"
-          class="flex items-start text-sm"
+          class="flex items-start gap-2 py-2.5 text-sm"
        >
-          <svg class="flex-shrink-0 h-4 w-4 text-red-400 mr-2 mt-0.5" fill="currentColor" viewBox="0 0 20 20">
-            <path fill-rule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zM8.707 7.293a1 1 0 00-1.414 1.414L8.586 10l-1.293 1.293a1 1 0 101.414 1.414L10 11.414l1.293 1.293a1 1 0 001.414-1.414L11.414 10l1.293-1.293a1 1 0 00-1.414-1.414L10 8.586 8.707 7.293z" clip-rule="evenodd" />
-          </svg>
+          <XCircleIcon class="flex-shrink-0 h-4 w-4 text-red-400 mt-0.5" />
          <div>
            <div class="text-gray-900 dark:text-gray-100">{{ file.filename }}</div>
-            <div class="text-red-600 dark:text-red-400 text-xs mt-1">{{ file.errorMessage }}</div>
+            <div class="text-red-600 dark:text-red-400 text-xs mt-0.5">{{ file.errorMessage }}</div>
          </div>
-        </li>
-      </ul>
-    </div>
+        </div>
+      </div>
+    </section>

    <!-- Actions -->
-    <div class="flex justify-center space-x-4 pt-6 border-t dark:border-gray-700">
-      <button
-        @click="startNewImport"
-        class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md text-sm font-medium"
-      >
-        Nouvel import
-      </button>
-      <button
-        @click="goToLibrary"
-        class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 rounded-md text-sm font-medium"
-      >
-        Aller à la bibliothèque
-      </button>
-    </div>
+    <section class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+      <div class="flex gap-3">
+        <button
+          @click="startNewImport"
+          class="bg-green-600 hover:bg-green-700 text-white px-4 py-2 text-sm font-medium"
+        >
+          Nouvel import
+        </button>
+        <button
+          @click="goToLibrary"
+          class="bg-gray-600 hover:bg-gray-700 text-white px-4 py-2 text-sm font-medium"
+        >
+          Aller à la bibliothèque
+        </button>
+      </div>
+    </section>
  </div>
 </template>

 <script setup>
+import { CheckCircleIcon, XCircleIcon } from '@heroicons/vue/24/solid';
 import { computed } from 'vue';
 import { useRouter } from 'vue-router';
 import { useNewImportStore } from '../../application/store/newImportStore';
--- a/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue
+++ b/assets/vue/app/domain/import/presentation/components/MangaMatchCard.vue
@@ -1,116 +1,47 @@
 <template>
-  <div
-    class="border rounded-lg p-4 cursor-pointer transition-all duration-200 hover:shadow-md"
-    :class="{
-      'border-blue-500 bg-blue-50 dark:bg-blue-900/20': isSelected,
-      'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-500': !isSelected
-    }"
-    @click="$emit('select-match', match)"
-  >
-    <!-- Match Header with Score -->
-    <div class="flex items-center justify-between mb-3">
-      <div class="flex items-center space-x-2">
-        <div
-          class="w-3 h-3 rounded-full"
-          :class="{
-            'bg-blue-500': isSelected,
-            'bg-gray-300': !isSelected
-          }"
-        ></div>
-        <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Score: {{ match.matchScore }}</span>
-      </div>
-      <div v-if="isSelected" class="text-blue-600">
-        <svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20">
-          <path fill-rule="evenodd" d="M16.707 5.293a1 1 0 010 1.414l-8 8a1 1 0 01-1.414 0l-4-4a1 1 0 011.414-1.414L8 12.586l7.293-7.293a1 1 0 011.414 0z" clip-rule="evenodd" />
-        </svg>
-      </div>
-    </div>
-
-    <!-- Manga Thumbnail -->
-    <div class="flex space-x-3">
-      <div class="flex-shrink-0">
-        <img
-          v-if="match.thumbnailUrl"
-          :src="match.thumbnailUrl"
-          :alt="match.title"
-          class="w-16 h-20 object-cover rounded border"
-        />
-        <div
-          v-else
-          class="w-16 h-20 bg-gray-200 dark:bg-gray-700 rounded border dark:border-gray-600 flex items-center justify-center"
-        >
-          <svg class="w-8 h-8 text-gray-400 dark:text-gray-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
-            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
-          </svg>
-        </div>
-      </div>
-
-      <!-- Manga Info -->
-      <div class="flex-1 min-w-0">
-        <h4 class="text-sm font-medium text-gray-900 dark:text-gray-100 truncate" :title="match.title">
-          {{ match.title }}
-        </h4>
-        <p class="text-xs text-gray-500 dark:text-gray-400 mt-1 truncate" :title="match.slug">
-          {{ match.slug }}
-        </p>
-
-        <!-- Alternative Slugs -->
-        <div v-if="match.alternativeSlugs && match.alternativeSlugs.length > 0" class="mt-2">
-          <p class="text-xs text-gray-400 dark:text-gray-500">Autres titres:</p>
-          <div class="flex flex-wrap gap-1 mt-1">
-            <span
-              v-for="altSlug in match.alternativeSlugs.slice(0, 2)"
-              :key="altSlug"
-              class="text-xs bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300 px-2 py-1 rounded"
+    <div
+        class="border p-2.5 cursor-pointer transition-all duration-150"
+        :class="isSelected
+            ? 'border-green-500 bg-green-50 dark:bg-green-900/20'
+            : 'border-gray-200 dark:border-gray-700 hover:border-gray-300 dark:hover:border-gray-600 bg-white dark:bg-gray-800'"
+        @click="$emit('select-match', match)"
+    >
+        <div class="flex gap-2.5">
+            <!-- Couverture -->
+            <img
+                v-if="match.thumbnailUrl"
+                :src="match.thumbnailUrl"
+                :alt="match.title"
+                class="w-12 h-16 object-cover shrink-0"
+            />
+            <div
+                v-else
+                class="w-12 h-16 bg-gray-100 dark:bg-gray-700 shrink-0 flex items-center justify-center"
            >
-              {{ altSlug }}
-            </span>
-            <span
-              v-if="match.alternativeSlugs.length > 2"
-              class="text-xs text-gray-400 dark:text-gray-500"
-            >
-              +{{ match.alternativeSlugs.length - 2 }} autres
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
+                <PhotoIcon class="w-6 h-6 text-gray-400" />
+            </div>

-    <!-- Score Bar -->
-    <div class="mt-3">
-      <div class="flex items-center justify-between text-xs text-gray-500 dark:text-gray-400 mb-1">
-        <span>Correspondance</span>
-        <span>{{ match.matchScore }}%</span>
-      </div>
-      <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-        <div
-          class="h-2 rounded-full transition-all duration-300"
-          :class="{
-            'bg-blue-500': isSelected,
-            'bg-gray-400': !isSelected
-          }"
-          :style="{ width: match.matchScore + '%' }"
-        ></div>
-      </div>
+            <!-- Infos -->
+            <div class="flex-1 min-w-0 flex flex-col justify-between py-0.5">
+                <p class="text-xs font-medium text-gray-900 dark:text-gray-100 line-clamp-3 leading-snug" :title="match.title">
+                    {{ match.title }}
+                </p>
+                <div class="flex items-center justify-between mt-1">
+                    <span class="text-xs text-gray-400 dark:text-gray-500">{{ match.matchScore }}%</span>
+                    <CheckCircleIcon v-if="isSelected" class="w-4 h-4 text-green-500 shrink-0" />
+                </div>
+            </div>
+        </div>
    </div>
-  </div>
 </template>

 <script setup>
+import { CheckCircleIcon, PhotoIcon } from '@heroicons/vue/24/outline';
+
 const props = defineProps({
-  match: {
-    type: Object,
-    required: true
-  },
-  isSelected: {
-    type: Boolean,
-    default: false
-  }
+    match: { type: Object, required: true },
+    isSelected: { type: Boolean, default: false },
 });

 const emit = defineEmits(['select-match']);
 </script>
-
-
-
-
--- a/assets/vue/app/domain/import/presentation/components/StatusBadge.vue
+++ b/assets/vue/app/domain/import/presentation/components/StatusBadge.vue
@@ -46,10 +46,10 @@ const badgeText = computed(() => {
 });

 const badgeClasses = computed(() => {
-  const baseClasses = 'inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium';
+  const baseClasses = 'inline-flex items-center px-2.5 py-0.5 text-xs font-medium';

  if (props.isImporting || props.isAnalyzing) {
-    return `${baseClasses} bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300`;
+    return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
  }

  switch (props.status) {
@@ -58,7 +58,7 @@ const badgeClasses = computed(() => {
    case 'analyzed':
      return `${baseClasses} bg-yellow-100 dark:bg-yellow-900/40 text-yellow-800 dark:text-yellow-300`;
    case 'importing':
-      return `${baseClasses} bg-blue-100 dark:bg-blue-900/40 text-blue-800 dark:text-blue-300`;
+      return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
    case 'imported':
      return `${baseClasses} bg-green-100 dark:bg-green-900/40 text-green-800 dark:text-green-300`;
    case 'error':
--- a/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue
+++ b/assets/vue/app/domain/import/presentation/pages/NewImportPage.vue
@@ -1,115 +1,103 @@
 <template>
-    <div class="overflow-y-auto h-full"><div class="container mx-auto px-4 py-8">
-        <!-- Header -->
-        <div class="mb-8">
-            <h1 class="text-3xl font-bold text-gray-900 dark:text-gray-100 mb-2">Import de Bibliothèque</h1>
-            <p class="text-gray-600 dark:text-gray-400">
-                Importez vos fichiers CBZ/CBR dans votre bibliothèque Mangarr
-            </p>
-        </div>
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
+
+        <div class="overflow-y-auto flex-1">
+            <div class="px-6 py-8">
+
+                <!-- Zone de dépôt -->
+                <section v-if="!store.hasFiles" class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Fichiers</h2>
+                    <FileUpload
+                        label="Importer des fichiers CBZ/CBR"
+                        accept=".cbz,.cbr"
+                        :multiple="true"
+                        description="Formats CBZ ou CBR uniquement"
+                        @files-selected="store.addFiles($event)"
+                    />
+                </section>
+
+                <!-- Fichiers en cours -->
+                <template v-if="store.hasFiles && !store.allFilesProcessed">
+                    <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                        <div class="flex items-center justify-between mb-3">
+                            <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">
+                                {{ store.totalFiles }} fichier(s)
+                            </h2>
+                            <span class="text-xs text-gray-500 dark:text-gray-400">
+                                {{ store.importedCount }}/{{ store.totalFiles }}
+                                <span v-if="store.errorCount > 0" class="text-red-500 ml-1">· {{ store.errorCount }} erreur(s)</span>
+                            </span>
+                        </div>
+                        <div class="bg-gray-200 dark:bg-gray-700 h-1.5 mb-4">
+                            <div
+                                class="bg-green-600 h-1.5 transition-all duration-300"
+                                :style="{ width: store.progressPercentage + '%' }"
+                            />
+                        </div>
+                        <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+                            <FileImportCard
+                                v-for="file in store.files"
+                                :key="file.id"
+                                :file="file"
+                                :is-analyzing="store.analyzingFiles.has(file.id)"
+                                :is-importing="store.importingFiles.has(file.id)"
+                                @manga-selected="(manga) => store.setFileManga(file.id, manga)"
+                                @chapter-number-selected="(n) => store.setFileChapterNumber(file.id, n)"
+                                @volume-number-selected="(n) => store.setFileVolumeNumber(file.id, n)"
+                                @import-file="() => importSingleFile(file.id)"
+                                @retry-file="() => retryFile(file.id)"
+                                @remove-file="() => store.removeFile(file.id)"
+                            />
+                        </div>
+                    </section>
+                </template>
+
+                <!-- Résultats -->
+                <ImportResults v-if="store.allFilesProcessed" />

-        <!-- Progress Bar (if files are being processed) -->
-        <div v-if="store.hasFiles && !store.allFilesProcessed" class="mb-8">
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-sm p-6">
-                <div class="flex items-center justify-between mb-2">
-                    <span class="text-sm font-medium text-gray-700 dark:text-gray-300">Progression</span>
-                    <span class="text-sm text-gray-500 dark:text-gray-400">{{ store.progressPercentage }}%</span>
-                </div>
-                <div class="w-full bg-gray-200 dark:bg-gray-700 rounded-full h-2">
-                    <div
-                        class="bg-blue-600 h-2 rounded-full transition-all duration-300"
-                        :style="{ width: store.progressPercentage + '%' }"
-                    ></div>
-                </div>
-                <div class="flex justify-between text-xs text-gray-500 dark:text-gray-400 mt-2">
-                    <span>{{ store.importedCount }} importés</span>
-                    <span>{{ store.errorCount }} erreurs</span>
-                    <span>{{ store.totalFiles }} total</span>
-                </div>
            </div>
        </div>
-
-        <!-- File Upload Zone -->
-        <div v-if="!store.hasFiles || store.allFilesProcessed" class="mb-8">
-            <FileUpload
-                label="Importer des fichiers CBZ/CBR"
-                accept=".cbz,.cbr"
-                :multiple="true"
-                description="Formats CBZ ou CBR uniquement"
-                @files-selected="handleFilesSelected"
-            />
-        </div>
-
-        <!-- Files List -->
-        <div v-if="store.hasFiles" class="space-y-6">
-            <!-- Action Buttons -->
-            <div class="flex flex-wrap gap-4 mb-6">
-                <button
-                    v-if="store.hasReadyFiles"
-                    @click="importAllFiles"
-                    :disabled="store.isLoading"
-                    class="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 text-white px-4 py-2 rounded-md font-medium"
-                >
-                    <LoadingSpinner v-if="store.isLoading" class="w-4 h-4 mr-2" />
-                    Importer tous les fichiers prêts ({{ store.readyCount }})
-                </button>
-
-                <button
-                    v-if="store.analyzedFiles.length > 0"
-                    @click="autoSelectMatches"
-                    class="bg-blue-600 hover:bg-blue-700 text-white px-4 py-2 rounded-md font-medium"
-                >
-                    Sélection automatique
-                </button>
-
-                <button
-                    @click="clearAllFiles"
-                    class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-md font-medium"
-                >
-                    Effacer tout
-                </button>
-            </div>
-
-            <!-- Files Grid -->
-            <div class="grid gap-6">
-                <FileImportCard
-                    v-for="file in store.files"
-                    :key="file.id"
-                    :file="file"
-                    :is-analyzing="store.analyzingFiles.has(file.id)"
-                    :is-importing="store.importingFiles.has(file.id)"
-                    @manga-selected="(manga) => store.setFileManga(file.id, manga)"
-                    @chapter-number-selected="(chapterNumber) => store.setFileChapterNumber(file.id, chapterNumber)"
-                    @volume-number-selected="(volumeNumber) => store.setFileVolumeNumber(file.id, volumeNumber)"
-                    @import-file="() => importSingleFile(file.id)"
-                    @retry-file="() => retryFile(file.id)"
-                    @remove-file="() => store.removeFile(file.id)"
-                />
-            </div>
-        </div>
-
-        <!-- Results Summary (when all files are processed) -->
-        <div v-if="store.allFilesProcessed" class="mt-8">
-            <ImportResults />
-        </div>
-    </div></div>
+    </div>
 </template>

 <script setup>
-import { onUnmounted } from 'vue';
+import { ArrowUpTrayIcon, SparklesIcon, TrashIcon } from '@heroicons/vue/24/outline';
+import { computed, onUnmounted } from 'vue';
 import FileUpload from '../../../../shared/components/ui/FileUpload.vue';
-import LoadingSpinner from '../../../../shared/components/ui/LoadingSpinner.vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
 import { useNewImportStore } from '../../application/store/newImportStore';
 import FileImportCard from '../components/FileImportCard.vue';
 import ImportResults from '../components/ImportResults.vue';

 const store = useNewImportStore();

-// === EVENT HANDLERS ===
-
-const handleFilesSelected = (files) => {
-    store.addFiles(files);
-};
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Import de bibliothèque', class: 'text-sm font-medium' },
+    ],
+    rightSection: [
+        ...(store.analyzedFiles.length > 0 ? [{
+            type: 'button',
+            icon: SparklesIcon,
+            label: 'Sélection auto',
+            onClick: () => store.autoSelectBestMatches(),
+        }] : []),
+        ...(store.hasReadyFiles ? [{
+            type: 'button',
+            icon: ArrowUpTrayIcon,
+            label: `Importer (${store.readyCount})`,
+            onClick: importAllFiles,
+            disabled: store.isLoading,
+        }] : []),
+        {
+            type: 'button',
+            icon: TrashIcon,
+            label: 'Effacer',
+            onClick: () => store.clearFiles(),
+        },
+    ],
+}));

 const importAllFiles = async () => {
    try {
@@ -135,19 +123,6 @@ const retryFile = async (fileId) => {
    }
 };

-const autoSelectMatches = () => {
-    store.autoSelectBestMatches();
-};
-
-const clearAllFiles = () => {
-    if (confirm('Êtes-vous sûr de vouloir effacer tous les fichiers ?')) {
-        store.clearFiles();
-    }
-};
-
-// === LIFECYCLE ===
-
-// Reset state when component unmounts
 onUnmounted(() => {
    store.resetGlobalState();
 });
--- a/assets/vue/app/domain/manga/application/store/mangaStore.js
+++ b/assets/vue/app/domain/manga/application/store/mangaStore.js
@@ -40,7 +40,12 @@ export const useMangaStore = defineStore('manga', {

        // --- Add Manga State ---
        addingManga: false,
-        addMangaError: null
+        addMangaError: null,
+
+        // --- Discover State ---
+        discoverResults: [],
+        loadingDiscover: false,
+        discoverError: null
    }),

    getters: {
@@ -170,6 +175,25 @@ export const useMangaStore = defineStore('manga', {
            this.loadingSearch = false;
        },

+        // --- Discover Actions ---
+        async loadDiscoverRecommendations() {
+            if (this.loadingDiscover) return;
+
+            this.loadingDiscover = true;
+            this.discoverError = null;
+            this.discoverResults = [];
+
+            try {
+                const data = await mangaRepository.discoverManga();
+                this.discoverResults = data.items || [];
+            } catch (error) {
+                this.discoverError = error.message;
+                throw error;
+            } finally {
+                this.loadingDiscover = false;
+            }
+        },
+
        // --- Add Manga Actions ---
        async createFromMangaDex(externalId) {
            if (this.addingManga) return;
--- a/assets/vue/app/domain/manga/infrastructure/api/apiMangaRepository.js
+++ b/assets/vue/app/domain/manga/infrastructure/api/apiMangaRepository.js
@@ -104,6 +104,17 @@ export class ApiMangaRepository {
        }
    }

+    async discoverManga() {
+        try {
+            const response = await fetch('/api/manga-discover');
+            if (!response.ok) throw new Error('Failed to fetch discover recommendations');
+            return await response.json();
+        } catch (error) {
+            console.error('API Error:', error);
+            throw error;
+        }
+    }
+
    async createFromMangaDex(externalId) {
        try {
            const response = await fetch('/api/mangas/create-from-mangadex', {
--- a/assets/vue/app/domain/manga/presentation/components/MangaChapter.vue
+++ b/assets/vue/app/domain/manga/presentation/components/MangaChapter.vue
@@ -1,7 +1,8 @@
 <template>
    <tr class="border-t dark:border-gray-700 hover:bg-green-100 dark:hover:bg-green-900/20">
        <td class="px-4 py-2 text-gray-900 dark:text-gray-100" :class="{ 'text-green-500 dark:text-green-400': chapter.isAvailable }">
-            {{ String(chapter.number).padStart(2, '0') }}
+            <template v-if="chapter.isVolumeGroup">{{ chapter.volumeChaptersRange }}</template>
+            <template v-else>{{ String(chapter.number).padStart(2, '0') }}</template>
        </td>
        <td class="px-4 py-2 w-full text-left text-gray-900 dark:text-gray-100">
            <router-link
@@ -13,9 +14,17 @@
                        chapterId: chapter.id
                    }
                }">
-                {{ chapter.title || 'Sans titre' }}
+                <template v-if="chapter.isVolumeGroup">
+                    {{ chapter.volumeChapterCount > 1 ? 'Chapitres ' : 'Chapitre ' }}{{ chapter.volumeChaptersRange }}
+                </template>
+                <template v-else>{{ chapter.title || 'Sans titre' }}</template>
            </router-link>
-            <span v-else class="text-gray-500 dark:text-gray-400">{{ chapter.title || 'Sans titre' }}</span>
+            <span v-else class="text-gray-500 dark:text-gray-400">
+                <template v-if="chapter.isVolumeGroup">
+                    {{ chapter.volumeChapterCount > 1 ? 'Chapitres ' : 'Chapitre ' }}{{ chapter.volumeChaptersRange }}
+                </template>
+                <template v-else>{{ chapter.title || 'Sans titre' }}</template>
+            </span>
        </td>
        <td class="px-4 py-2 flex justify-end gap-2">
            <button v-if="!chapter.isAvailable" @click="handleSearch" :class="buttonClass">
--- a/assets/vue/app/domain/manga/presentation/pages/AddManga.vue
+++ b/assets/vue/app/domain/manga/presentation/pages/AddManga.vue
@@ -1,172 +1,234 @@
 <template>
-    <div class="overflow-y-auto h-full">
-    <div class="container mx-auto px-4 py-8">
-        <!-- Barre de recherche -->
-        <div class="mb-8">
-            <div class="flex gap-4">
-                <input
-                    type="text"
-                    v-model="searchQuery"
-                    @keyup.enter="performSearch"
-                    placeholder="Rechercher un manga..."
-                    class="flex-1 px-4 py-2 border border-gray-300 dark:border-gray-600 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" />
-                <button
-                    @click="performSearch"
-                    class="px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2">
-                    Rechercher
-                </button>
-            </div>
-        </div>
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />

-        <!-- État de chargement -->
-        <div v-if="loading" class="text-center py-8">
-            <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-600 mx-auto"></div>
-            <p class="mt-4 text-gray-600 dark:text-gray-400">Recherche en cours...</p>
-        </div>
+        <div class="overflow-y-auto flex-1">
+            <div class="px-6 py-8">

-        <!-- Message d'erreur -->
-        <div v-if="error" class="bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded relative mb-6">
-            {{ error }}
-        </div>
+                <!-- Recherche -->
+                <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-4">Recherche</h2>
+                    <input
+                        type="text"
+                        v-model="searchQuery"
+                        @keyup.enter="performSearch"
+                        placeholder="Rechercher un manga..."
+                        class="w-full px-4 py-2 border border-gray-300 dark:border-gray-600 focus:ring-2 focus:ring-blue-500 focus:border-transparent bg-white dark:bg-gray-700 text-gray-900 dark:text-gray-100 placeholder-gray-400 dark:placeholder-gray-500" />
+                </section>

-        <!-- Résultats de recherche -->
-        <div v-if="searchResults.length > 0" class="border-t border-gray-200 dark:border-gray-700">
-            <div
-                v-for="manga in searchResults"
-                :key="manga.externalId"
-                class="flex items-center gap-4 px-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors border-b border-gray-100 dark:border-gray-700 cursor-pointer"
-                @click="openMangaModal(manga)">
-                <img
-                    :src="manga.thumbnailUrl || manga.imageUrl || '/placeholder-cover.png'"
-                    alt=""
-                    class="h-36 w-24 object-cover flex-shrink-0 self-start"
-                    referrerpolicy="no-referrer" />
-                <div class="flex-1 min-w-0">
-                    <p class="text-xl font-semibold text-gray-900 dark:text-gray-100">{{ manga.title }}</p>
-                    <p v-if="manga.description" class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-4">{{ manga.description }}</p>
-                </div>
-            </div>
-        </div>
-        <p v-else-if="!loading && searchQuery" class="text-center text-gray-600 dark:text-gray-400">Aucun résultat trouvé</p>
+                <!-- État de chargement -->
+                <section v-if="loading" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+                    <div class="flex items-center gap-3 text-gray-600 dark:text-gray-400">
+                        <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-green-600"></div>
+                        <span class="text-sm">Recherche en cours...</span>
+                    </div>
+                </section>

-        <!-- Modal de confirmation -->
-        <Dialog :open="isModalOpen" @close="closeModal" class="relative z-50">
-            <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity" aria-hidden="true" />
+                <!-- Message d'erreur -->
+                <section v-if="error" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+                    <p class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
+                </section>

-            <div class="fixed inset-0 flex items-center justify-center p-4">
-                <DialogPanel class="w-full max-w-lg bg-white dark:bg-gray-800 rounded-xl shadow-xl p-6">
-                    <DialogTitle class="text-lg mb-4 text-gray-900 dark:text-gray-100"> Ajouter à la bibliothèque </DialogTitle>
-
-                    <div v-if="selectedManga">
-                        <div class="flex gap-4">
+                <!-- Résultats -->
+                <section v-if="searchResults.length > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Résultats</h2>
+                        <span class="text-xs text-gray-500 dark:text-gray-400">{{ searchResults.length }} manga(s)</span>
+                    </div>
+                    <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+                        <div
+                            v-for="manga in searchResults"
+                            :key="manga.externalId"
+                            class="flex items-start gap-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors cursor-pointer px-2"
+                            @click="openMangaModal(manga)">
                            <img
-                                :src="selectedManga.imageUrl || '/placeholder-cover.png'"
-                                :alt="selectedManga.title"
-                                class="h-48 w-32 object-cover" />
+                                :src="manga.thumbnailUrl || manga.imageUrl || '/placeholder-cover.png'"
+                                alt=""
+                                class="h-36 w-24 object-cover flex-shrink-0"
+                                referrerpolicy="no-referrer" />
                            <div class="flex-1 min-w-0">
-                                <h4 class="text-lg text-gray-900 dark:text-gray-100">{{ selectedManga.title }}</h4>
-                                <p class="mt-2 text-gray-700 dark:text-gray-300">
-                                    {{ truncatedDescription }}
-                                </p>
+                                <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ manga.title }}</p>
+                                <p v-if="manga.description" class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-4">{{ manga.description }}</p>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Aucun résultat -->
+                <section v-else-if="hasSearched && !loading" class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+                    <p class="text-sm text-gray-500 dark:text-gray-400 text-center">Aucun résultat trouvé</p>
+                </section>
+
+            </div>
+        </div>
+
+        <!-- Modal de détail -->
+        <Dialog :open="isModalOpen" @close="closeModal" class="relative z-50">
+            <div class="fixed inset-0 bg-gray-900/70 dark:bg-gray-900/80 transition-opacity" aria-hidden="true" />
+            <div class="fixed inset-0 flex items-center justify-center p-4">
+                <DialogPanel v-if="selectedManga" class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-xl overflow-hidden flex flex-col max-h-[90vh]">
+
+                    <!-- En-tête avec couverture -->
+                    <div class="flex gap-0 border-b border-gray-200 dark:border-gray-700">
+                        <img
+                            :src="selectedManga.imageUrl || selectedManga.thumbnailUrl || '/placeholder-cover.png'"
+                            :alt="selectedManga.title"
+                            class="h-64 w-44 object-cover flex-shrink-0"
+                            referrerpolicy="no-referrer" />
+                        <div class="flex-1 min-w-0 p-6 flex flex-col justify-between">
+                            <div>
+                                <DialogTitle class="text-base font-semibold text-gray-900 dark:text-gray-100 leading-snug">
+                                    {{ selectedManga.title }}
+                                </DialogTitle>
+                                <div class="mt-3 space-y-1.5">
+                                    <p v-if="selectedManga.author" class="text-xs text-gray-500 dark:text-gray-400">
+                                        <span class="text-gray-400 dark:text-gray-500">Auteur</span>
+                                        <span class="ml-2 text-gray-700 dark:text-gray-200">{{ selectedManga.author }}</span>
+                                    </p>
+                                    <p v-if="selectedManga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">
+                                        <span class="text-gray-400 dark:text-gray-500">Publication</span>
+                                        <span class="ml-2 text-gray-700 dark:text-gray-200">{{ selectedManga.publicationYear }}</span>
+                                    </p>
+                                    <p v-if="selectedManga.status" class="text-xs text-gray-500 dark:text-gray-400">
+                                        <span class="text-gray-400 dark:text-gray-500">Statut</span>
+                                        <span class="ml-2 text-gray-700 dark:text-gray-200">{{ selectedManga.status }}</span>
+                                    </p>
+                                    <p v-if="selectedManga.rating" class="text-xs text-gray-500 dark:text-gray-400">
+                                        <span class="text-gray-400 dark:text-gray-500">Note</span>
+                                        <span class="ml-2 text-gray-700 dark:text-gray-200">{{ selectedManga.rating.toFixed(2) }} / 10</span>
+                                    </p>
+                                </div>
+                            </div>
+                            <div v-if="selectedManga.genres?.length" class="flex flex-wrap gap-1.5 mt-4">
+                                <span
+                                    v-for="genre in selectedManga.genres"
+                                    :key="genre"
+                                    class="text-xs px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
+                                    {{ genre }}
+                                </span>
                            </div>
                        </div>
                    </div>

-                    <div class="mt-6 flex justify-end gap-3">
+                    <!-- Description -->
+                    <div class="px-6 py-4 overflow-y-auto flex-1">
+                        <h3 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Description</h3>
+                        <p v-if="selectedManga.description" class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+                            {{ selectedManga.description }}
+                        </p>
+                        <p v-else class="text-sm text-gray-400 dark:text-gray-500 italic">Aucune description disponible.</p>
+                    </div>
+
+                    <!-- Actions -->
+                    <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
                        <button
                            type="button"
                            @click="closeModal"
-                            class="px-4 py-2 rounded-lg border border-gray-300 dark:border-gray-600 text-gray-700 dark:text-gray-300 hover:bg-gray-50 dark:hover:bg-gray-700 dark:bg-gray-800">
+                            class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors px-4 py-2">
                            Annuler
                        </button>
                        <button
                            type="button"
                            @click="addManga"
                            :disabled="adding"
-                            class="px-4 py-2 rounded-lg bg-green-600 text-white hover:bg-green-700 disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center">
-                            <span v-if="adding" class="mr-2">
-                                <ArrowPathIcon class="h-5 w-5 animate-spin" />
-                            </span>
-                            {{ adding ? 'Ajout en cours...' : 'Ajouter' }}
+                            class="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white px-4 py-2 font-medium transition-colors inline-flex items-center gap-2">
+                            <ArrowPathIcon v-if="adding" class="h-4 w-4 animate-spin" />
+                            {{ adding ? 'Ajout en cours...' : 'Ajouter à la bibliothèque' }}
                        </button>
                    </div>
+
                </DialogPanel>
            </div>
        </Dialog>
    </div>
-    </div>
 </template>

 <script setup>
-    import { Dialog, DialogPanel, DialogTitle } from '@headlessui/vue';
-import { ArrowPathIcon } from '@heroicons/vue/24/solid';
+import { Dialog, DialogPanel, DialogTitle } from '@headlessui/vue';
+import { ArrowPathIcon, MagnifyingGlassIcon } from '@heroicons/vue/24/outline';
 import { storeToRefs } from 'pinia';
-import { computed, onBeforeUnmount, onMounted, ref } from 'vue';
+import { computed, onBeforeUnmount, onMounted, ref, watch } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
 import { useMangaStore } from '../../application/store/mangaStore';

-    const router = useRouter();
-    const route = useRoute();
-    const mangaStore = useMangaStore();
+const router = useRouter();
+const route = useRoute();
+const mangaStore = useMangaStore();

-    const searchQuery = ref('');
-    const isModalOpen = ref(false);
-    const selectedManga = ref(null);
+const searchQuery = ref('');
+const hasSearched = ref(false);
+const isModalOpen = ref(false);
+const selectedManga = ref(null);

-    // Récupération des états du store
-    const { searchResults, loadingSearch: loading, searchError: error, addingManga: adding } = storeToRefs(mangaStore);
+const { searchResults, loadingSearch: loading, searchError: error, addingManga: adding } = storeToRefs(mangaStore);

-    const truncatedDescription = computed(() => {
-        if (!selectedManga.value?.description) return '';
-        return selectedManga.value.description.length > 500
-            ? selectedManga.value.description.slice(0, 500) + '...'
-            : selectedManga.value.description;
-    });
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Ajouter un manga', class: 'text-sm font-medium' },
+    ],
+    rightSection: [
+        {
+            type: 'button',
+            icon: MagnifyingGlassIcon,
+            label: 'Rechercher',
+            onClick: performSearch,
+            disabled: !searchQuery.value.trim() || loading.value,
+        },
+    ],
+}));

-    // Effectuer la recherche au chargement si un paramètre q est présent
-    onMounted(() => {
-        const queryParam = route.query.q;
-        if (queryParam) {
-            searchQuery.value = queryParam;
-            performSearch();
-        }
-    });
+let debounceTimer = null;
+watch(searchQuery, newVal => {
+    clearTimeout(debounceTimer);
+    if (newVal.trim().length > 3) {
+        debounceTimer = setTimeout(performSearch, 500);
+    }
+});

-    // Nettoyer la recherche et les résultats lors du démontage du composant
-    onBeforeUnmount(() => {
-        searchQuery.value = '';
-        mangaStore.clearSearchResults();
-    });
+onMounted(() => {
+    const queryParam = route.query.q;
+    if (queryParam) {
+        searchQuery.value = queryParam;
+        performSearch();
+    }
+});

-    const performSearch = async () => {
-        if (!searchQuery.value.trim()) return;
-        try {
-            await mangaStore.searchMangaDex(searchQuery.value);
-        } catch (e) {
-            console.error('Erreur de recherche:', e);
-        }
-    };
+onBeforeUnmount(() => {
+    clearTimeout(debounceTimer);
+    searchQuery.value = '';
+    mangaStore.clearSearchResults();
+});

-    const openMangaModal = manga => {
-        selectedManga.value = manga;
-        isModalOpen.value = true;
-    };
+const performSearch = async () => {
+    if (!searchQuery.value.trim()) return;
+    try {
+        await mangaStore.searchMangaDex(searchQuery.value);
+        hasSearched.value = true;
+    } catch (e) {
+        console.error('Erreur de recherche:', e);
+    }
+};

-    const closeModal = () => {
-        isModalOpen.value = false;
-        selectedManga.value = null;
-    };
+const openMangaModal = manga => {
+    selectedManga.value = manga;
+    isModalOpen.value = true;
+};

-    const addManga = async () => {
-        if (!selectedManga.value) return;
+const closeModal = () => {
+    isModalOpen.value = false;
+    selectedManga.value = null;
+};

-        try {
-            await mangaStore.createFromMangaDex(selectedManga.value.externalId);
-            router.push('/manga');
-        } catch (e) {
-            console.error("Erreur d'ajout:", e);
-        } finally {
-            closeModal();
-        }
-    };
+const addManga = async () => {
+    if (!selectedManga.value) return;
+    try {
+        await mangaStore.createFromMangaDex(selectedManga.value.externalId);
+        router.push('/manga');
+    } catch (e) {
+        console.error("Erreur d'ajout:", e);
+    } finally {
+        closeModal();
+    }
+};
 </script>
--- a/assets/vue/app/domain/manga/presentation/pages/DiscoverPage.vue
+++ b/assets/vue/app/domain/manga/presentation/pages/DiscoverPage.vue
@@ -0,0 +1,192 @@
+<template>
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
+
+        <div class="overflow-y-auto flex-1">
+            <div class="px-6 py-8">
+
+                <!-- État de chargement -->
+                <section v-if="loading" class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <div class="flex items-center gap-3 text-gray-600 dark:text-gray-400">
+                        <div class="animate-spin rounded-full h-5 w-5 border-b-2 border-green-600"></div>
+                        <span class="text-sm">Chargement des recommandations...</span>
+                    </div>
+                </section>
+
+                <!-- Message d'erreur -->
+                <section v-else-if="error" class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <p class="text-sm text-red-600 dark:text-red-400">{{ error }}</p>
+                </section>
+
+                <!-- Résultats -->
+                <section v-else-if="discoverResults.length > 0" class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <div class="flex items-center justify-between mb-4">
+                        <h2 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider">Recommandations</h2>
+                        <span class="text-xs text-gray-500 dark:text-gray-400">{{ discoverResults.length }} manga(s)</span>
+                    </div>
+                    <div class="divide-y divide-gray-100 dark:divide-gray-700/50">
+                        <div
+                            v-for="manga in discoverResults"
+                            :key="manga.externalId"
+                            class="flex items-start gap-4 py-3 hover:bg-gray-50 dark:hover:bg-gray-700/40 transition-colors cursor-pointer px-2"
+                            @click="openMangaModal(manga)">
+                            <img
+                                :src="manga.thumbnailUrl || manga.imageUrl || '/placeholder-cover.png'"
+                                alt=""
+                                class="h-36 w-24 object-cover flex-shrink-0"
+                                referrerpolicy="no-referrer" />
+                            <div class="flex-1 min-w-0">
+                                <p class="text-sm font-semibold text-gray-900 dark:text-gray-100">{{ manga.title }}</p>
+                                <p v-if="manga.description" class="text-sm text-gray-600 dark:text-gray-300 mt-2 line-clamp-4">{{ manga.description }}</p>
+                            </div>
+                        </div>
+                    </div>
+                </section>
+
+                <!-- Collection locale vide -->
+                <section v-else-if="!loading" class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                    <p class="text-sm text-gray-500 dark:text-gray-400 text-center">Ajoutez des manga pour obtenir des recommandations.</p>
+                </section>
+
+            </div>
+        </div>
+
+        <!-- Modal de détail -->
+        <Dialog :open="isModalOpen" @close="closeModal" class="relative z-50">
+            <div class="fixed inset-0 bg-gray-900/70 dark:bg-gray-900/80 transition-opacity" aria-hidden="true" />
+            <div class="fixed inset-0 flex items-center justify-center p-4">
+                <DialogPanel v-if="selectedManga" class="w-full max-w-2xl bg-white dark:bg-gray-800 shadow-xl overflow-hidden flex flex-col max-h-[90vh]">
+
+                    <!-- En-tête avec couverture -->
+                    <div class="flex gap-0 border-b border-gray-200 dark:border-gray-700">
+                        <img
+                            :src="selectedManga.imageUrl || selectedManga.thumbnailUrl || '/placeholder-cover.png'"
+                            :alt="selectedManga.title"
+                            class="h-64 w-44 object-cover flex-shrink-0"
+                            referrerpolicy="no-referrer" />
+                        <div class="flex-1 min-w-0 p-6 flex flex-col justify-between">
+                            <div>
+                                <DialogTitle class="text-base font-semibold text-gray-900 dark:text-gray-100 leading-snug">
+                                    {{ selectedManga.title }}
+                                </DialogTitle>
+                                <div class="mt-3 space-y-1.5">
+                                    <p v-if="selectedManga.author" class="text-xs text-gray-500 dark:text-gray-400">
+                                        <span class="text-gray-400 dark:text-gray-500">Auteur</span>
+                                        <span class="ml-2 text-gray-700 dark:text-gray-200">{{ selectedManga.author }}</span>
+                                    </p>
+                                    <p v-if="selectedManga.publicationYear" class="text-xs text-gray-500 dark:text-gray-400">
+                                        <span class="text-gray-400 dark:text-gray-500">Publication</span>
+                                        <span class="ml-2 text-gray-700 dark:text-gray-200">{{ selectedManga.publicationYear }}</span>
+                                    </p>
+                                    <p v-if="selectedManga.status" class="text-xs text-gray-500 dark:text-gray-400">
+                                        <span class="text-gray-400 dark:text-gray-500">Statut</span>
+                                        <span class="ml-2 text-gray-700 dark:text-gray-200">{{ selectedManga.status }}</span>
+                                    </p>
+                                    <p v-if="selectedManga.rating" class="text-xs text-gray-500 dark:text-gray-400">
+                                        <span class="text-gray-400 dark:text-gray-500">Note</span>
+                                        <span class="ml-2 text-gray-700 dark:text-gray-200">{{ selectedManga.rating.toFixed(2) }} / 10</span>
+                                    </p>
+                                </div>
+                            </div>
+                            <div v-if="selectedManga.genres?.length" class="flex flex-wrap gap-1.5 mt-4">
+                                <span
+                                    v-for="genre in selectedManga.genres"
+                                    :key="genre"
+                                    class="text-xs px-2 py-0.5 bg-gray-100 dark:bg-gray-700 text-gray-600 dark:text-gray-300">
+                                    {{ genre }}
+                                </span>
+                            </div>
+                        </div>
+                    </div>
+
+                    <!-- Description -->
+                    <div class="px-6 py-4 overflow-y-auto flex-1">
+                        <h3 class="text-xs font-semibold text-gray-400 dark:text-gray-500 uppercase tracking-wider mb-2">Description</h3>
+                        <p v-if="selectedManga.description" class="text-sm text-gray-600 dark:text-gray-300 leading-relaxed">
+                            {{ selectedManga.description }}
+                        </p>
+                        <p v-else class="text-sm text-gray-400 dark:text-gray-500 italic">Aucune description disponible.</p>
+                    </div>
+
+                    <!-- Actions -->
+                    <div class="px-6 py-4 border-t border-gray-200 dark:border-gray-700 flex justify-end gap-3">
+                        <button
+                            type="button"
+                            @click="closeModal"
+                            class="text-sm text-gray-400 hover:text-gray-600 dark:hover:text-gray-200 transition-colors px-4 py-2">
+                            Annuler
+                        </button>
+                        <button
+                            type="button"
+                            @click="addManga"
+                            :disabled="adding"
+                            class="bg-green-600 hover:bg-green-700 disabled:bg-gray-400 disabled:cursor-not-allowed text-white px-4 py-2 font-medium transition-colors inline-flex items-center gap-2">
+                            <ArrowPathIcon v-if="adding" class="h-4 w-4 animate-spin" />
+                            {{ adding ? 'Ajout en cours...' : 'Ajouter à la bibliothèque' }}
+                        </button>
+                    </div>
+
+                </DialogPanel>
+            </div>
+        </Dialog>
+    </div>
+</template>
+
+<script setup>
+import { Dialog, DialogPanel, DialogTitle } from '@headlessui/vue';
+import { ArrowPathIcon, ArrowPathRoundedSquareIcon } from '@heroicons/vue/24/outline';
+import { storeToRefs } from 'pinia';
+import { computed, onMounted, ref } from 'vue';
+import { useRouter } from 'vue-router';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import { useMangaStore } from '../../application/store/mangaStore';
+
+const router = useRouter();
+const mangaStore = useMangaStore();
+
+const isModalOpen = ref(false);
+const selectedManga = ref(null);
+
+const { discoverResults, loadingDiscover: loading, discoverError: error, addingManga: adding } = storeToRefs(mangaStore);
+
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Découvrir', class: 'text-sm font-medium' },
+    ],
+    rightSection: [
+        {
+            type: 'button',
+            icon: ArrowPathRoundedSquareIcon,
+            label: 'Actualiser',
+            onClick: () => mangaStore.loadDiscoverRecommendations(),
+            disabled: loading.value,
+        },
+    ],
+}));
+
+onMounted(() => {
+    mangaStore.loadDiscoverRecommendations();
+});
+
+const openMangaModal = manga => {
+    selectedManga.value = manga;
+    isModalOpen.value = true;
+};
+
+const closeModal = () => {
+    isModalOpen.value = false;
+    selectedManga.value = null;
+};
+
+const addManga = async () => {
+    if (!selectedManga.value) return;
+    try {
+        await mangaStore.createFromMangaDex(selectedManga.value.externalId);
+        router.push('/manga');
+    } catch (e) {
+        console.error("Erreur d'ajout:", e);
+    } finally {
+        closeModal();
+    }
+};
+</script>
--- a/assets/vue/app/domain/reader/presentation/components/ChapterReader.vue
+++ b/assets/vue/app/domain/reader/presentation/components/ChapterReader.vue
@@ -22,6 +22,7 @@
                    :pages="store.pages"
                    :zoom="store.zoom"
                    :double-page-mode="store.effectiveDoublePageMode"
+                    :initial-page="store.currentPage"
                    @page-visible="store.handlePageVisible"
                    ref="infiniteReaderRef" />
            </template>
--- a/assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue
+++ b/assets/vue/app/domain/reader/presentation/components/InfiniteReader.vue
@@ -94,14 +94,14 @@ import ReaderPage from './ReaderPage.vue';
        });
    };

-    // Calcul de la hauteur du placeholder — miroir exact du maxWidth de ReaderPage
+    // Calcul de la hauteur du placeholder — miroir exact du maxWidth de ReaderPage, zoom inclus
    const getPlaceholderHeight = (page) => {
        const dims = page?.dimensions;
-        if (!dims?.width || !dims?.height) return 800;
+        if (!dims?.width || !dims?.height) return Math.round(800 * props.zoom);
        const displayWidth = windowWidth.value < 1200
            ? Math.min(dims.width, windowWidth.value * 0.95)
            : Math.min(dims.width, 1200);
-        return Math.round((dims.height / dims.width) * displayWidth);
+        return Math.round((dims.height / dims.width) * displayWidth * props.zoom);
    };

    const setupObservers = () => {
@@ -109,7 +109,7 @@ import ReaderPage from './ReaderPage.vue';
        visibilityObserver.value?.disconnect();

        observer.value = new IntersectionObserver(observeIntersection, {
-            root: null,
+            root: containerRef.value,
            threshold: 0.5
        });

@@ -124,7 +124,7 @@ import ReaderPage from './ReaderPage.vue';
                    }
                });
            },
-            { root: null, rootMargin: '1000px 0px', threshold: 0 }
+            { root: containerRef.value, rootMargin: '1000px 0px', threshold: 0 }
        );

        nextTick(() => {
@@ -328,7 +328,6 @@ import ReaderPage from './ReaderPage.vue';
        @apply flex-1 flex flex-col items-center overflow-y-auto relative min-h-0;
        /* Réduction du padding sur mobile */
        @apply py-2 sm:py-8;
-        scroll-behavior: smooth;
    }

    .page-wrapper {
--- a/assets/vue/app/domain/reader/presentation/components/ReaderPage.vue
+++ b/assets/vue/app/domain/reader/presentation/components/ReaderPage.vue
@@ -87,13 +87,9 @@ import { useReaderStore } from '../../application/store/readerStore';

    const store = useReaderStore();

-    // En mode single : zoom via la propriété CSS `zoom` (affecte le layout → scrollbars naturelles)
-    // En mode infinite : zoom via transform: scale (pas d'impact layout souhaité)
+    // zoom via la propriété CSS `zoom` dans les deux modes (affecte le layout → pas de chevauchement en mode scroll)
    const containerStyle = computed(() => {
-        if (store.readingMode === 'single') {
-            return { zoom: props.zoom };
-        }
-        return { transform: `scale(${props.zoom})` };
+        return { zoom: props.zoom };
    });

    const imageRef = ref(null);
--- a/assets/vue/app/domain/setting/application/store/contentSourceStore.js
+++ b/assets/vue/app/domain/setting/application/store/contentSourceStore.js
@@ -23,7 +23,15 @@ export const useContentSourceStore = defineStore('contentSource', {
        importing: false,
        exporting: false,
        importError: null,
-        exportError: null
+        exportError: null,
+
+        // Health check state
+        checkingHealth: false,
+        checkHealthError: null,
+
+        // Delete state
+        deleting: false,
+        deleteError: null,
    }),

    getters: {
@@ -168,12 +176,64 @@ export const useContentSourceStore = defineStore('contentSource', {
            }
        },

+        // Delete a source
+        async deleteSource(id) {
+            if (this.deleting) return;
+
+            this.deleting = true;
+            this.deleteError = null;
+
+            try {
+                await contentSourceRepository.delete(id);
+                this.sources = this.sources.filter(source => source.id !== id);
+                if (this.currentSource && this.currentSource.id === id) {
+                    this.currentSource = null;
+                }
+            } catch (error) {
+                this.deleteError = error.message;
+                console.error('Erreur lors de la suppression de la source:', error);
+                throw error;
+            } finally {
+                this.deleting = false;
+            }
+        },
+
        // Clear current source
        clearCurrentSource() {
            this.currentSource = null;
            this.currentSourceError = null;
        },

+        // Check all scrapers health
+        async checkAllHealth() {
+            if (this.checkingHealth) return;
+
+            this.checkingHealth = true;
+            this.checkHealthError = null;
+
+            try {
+                await contentSourceRepository.checkAllHealth();
+            } catch (error) {
+                this.checkHealthError = error.message;
+                console.error('Erreur lors du health check:', error);
+                throw error;
+            } finally {
+                this.checkingHealth = false;
+            }
+        },
+
+        // Update health status of a single source (called from Mercure)
+        updateSourceHealth(sourceId, status, error = null) {
+            const index = this.sources.findIndex(s => s.id === sourceId);
+            if (index !== -1) {
+                this.sources[index] = {
+                    ...this.sources[index],
+                    healthStatus: status,
+                    healthLastError: error,
+                };
+            }
+        },
+
        // Clear errors
        clearErrors() {
            this.sourcesError = null;
@@ -181,6 +241,7 @@ export const useContentSourceStore = defineStore('contentSource', {
            this.saveError = null;
            this.importError = null;
            this.exportError = null;
+            this.checkHealthError = null;
        }
    }
 });
--- a/assets/vue/app/domain/setting/domain/model/ScraperHealthStatus.js
+++ b/assets/vue/app/domain/setting/domain/model/ScraperHealthStatus.js
@@ -0,0 +1,6 @@
+export const ScraperHealthStatus = {
+    UNKNOWN: 'unknown',
+    OK: 'ok',
+    KO: 'ko',
+    TESTING: 'testing',
+};
--- a/assets/vue/app/domain/setting/infrastructure/api/apiContentSourceRepository.js
+++ b/assets/vue/app/domain/setting/infrastructure/api/apiContentSourceRepository.js
@@ -82,6 +82,28 @@ export class ApiContentSourceRepository {
        }
    }

+    /**
+     * Déclenche le test de santé de tous les scrapers
+     */
+    async checkAllHealth() {
+        try {
+            await this.apiClient.post('/scraping/check-all-health', {});
+        } catch (error) {
+            throw new Error(error.response?.data?.message || 'Erreur lors du lancement du health check');
+        }
+    }
+
+    /**
+     * Supprime une source de contenu
+     */
+    async delete(id) {
+        try {
+            await this.apiClient.delete(`/content-sources/${id}`);
+        } catch (error) {
+            throw new Error(error.response?.data?.message || 'Erreur lors de la suppression de la source');
+        }
+    }
+
    /**
     * Teste une configuration de scraper
     */
--- a/assets/vue/app/domain/setting/presentation/components/ContentSourceCard.vue
+++ b/assets/vue/app/domain/setting/presentation/components/ContentSourceCard.vue
@@ -1,7 +1,7 @@
 <template>
    <div
        @click="$emit('edit', source)"
-        class="bg-white dark:bg-gray-800 rounded-lg shadow-md border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg transition-shadow duration-200 cursor-pointer">
+        class="bg-white dark:bg-gray-800 shadow-md border border-gray-200 dark:border-gray-700 p-6 hover:shadow-lg transition-shadow duration-200 cursor-pointer">
        <!-- Header avec URL et icône externe -->
        <div class="flex items-center justify-between mb-4">
            <h3 class="text-lg font-semibold text-gray-900 dark:text-white truncate" :title="source.cleanBaseUrl">
@@ -20,16 +20,24 @@
            <!-- Badge type de scraping -->
            <span
                :class="getScrapingTypeBadgeClass(source.scrapingType)"
-                class="px-2 py-1 text-xs font-medium rounded-md">
+                class="px-2 py-1 text-xs font-medium">
                {{ source.scrapingType?.toLowerCase() || 'N/A' }}
            </span>

            <!-- Badge orientation basé sur les sélecteurs -->
            <span
                :class="getOrientationBadgeClass(source)"
-                class="px-2 py-1 text-xs font-medium rounded-md">
+                class="px-2 py-1 text-xs font-medium">
                {{ getOrientation(source) }}
            </span>
+
+            <!-- Badge health status -->
+            <span
+                :class="getHealthBadgeClass(source.healthStatus)"
+                class="px-2 py-1 text-xs font-medium"
+                :title="source.healthLastError || ''">
+                {{ getHealthLabel(source.healthStatus) }}
+            </span>
        </div>


@@ -39,6 +47,7 @@

 <script setup>
 import { ArrowTopRightOnSquareIcon } from '@heroicons/vue/24/outline';
+import { ScraperHealthStatus } from '../../domain/model/ScraperHealthStatus';

 defineProps({
    source: {
@@ -86,4 +95,26 @@ const getOrientationBadgeClass = (source) => {
            return 'bg-gray-100 text-gray-800 dark:bg-gray-700 dark:text-gray-300';
    }
 };
+
+const getHealthLabel = (status) => {
+    switch (status) {
+        case ScraperHealthStatus.OK: return '✓ ok';
+        case ScraperHealthStatus.KO: return '✗ ko';
+        case ScraperHealthStatus.TESTING: return '⟳ test';
+        default: return '? unknown';
+    }
+};
+
+const getHealthBadgeClass = (status) => {
+    switch (status) {
+        case ScraperHealthStatus.OK:
+            return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-300';
+        case ScraperHealthStatus.KO:
+            return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-300';
+        case ScraperHealthStatus.TESTING:
+            return 'bg-yellow-100 text-yellow-800 dark:bg-yellow-900 dark:text-yellow-300';
+        default:
+            return 'bg-gray-100 text-gray-600 dark:bg-gray-700 dark:text-gray-400';
+    }
+};
 </script>
--- a/assets/vue/app/domain/setting/presentation/components/ContentSourceDeleteModal.vue
+++ b/assets/vue/app/domain/setting/presentation/components/ContentSourceDeleteModal.vue
@@ -0,0 +1,123 @@
+<template>
+    <TransitionRoot as="template" :show="isOpen">
+        <Dialog as="div" class="relative z-50" @close="closeModal">
+            <TransitionChild
+                as="template"
+                enter="ease-out duration-300"
+                enter-from="opacity-0"
+                enter-to="opacity-100"
+                leave="ease-in duration-200"
+                leave-from="opacity-100"
+                leave-to="opacity-0"
+            >
+                <div class="fixed inset-0 bg-gray-500 dark:bg-gray-900 bg-opacity-75 dark:bg-opacity-80 transition-opacity" />
+            </TransitionChild>
+
+            <div class="fixed inset-0 z-10 overflow-y-auto">
+                <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
+                    <TransitionChild
+                        as="template"
+                        enter="ease-out duration-300"
+                        enter-from="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                        enter-to="opacity-100 translate-y-0 sm:scale-100"
+                        leave="ease-in duration-200"
+                        leave-from="opacity-100 translate-y-0 sm:scale-100"
+                        leave-to="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
+                    >
+                        <DialogPanel class="relative transform overflow-hidden rounded-lg bg-white dark:bg-gray-800 px-6 pb-6 pt-6 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg">
+                            <div class="mb-6">
+                                <DialogTitle as="h3" class="text-lg font-semibold leading-6 text-gray-900 dark:text-gray-100">
+                                    Supprimer la source de contenu
+                                </DialogTitle>
+                            </div>
+
+                            <!-- Error state -->
+                            <div v-if="error" class="mb-6 bg-red-100 dark:bg-red-900/20 border border-red-400 dark:border-red-700 text-red-700 dark:text-red-400 px-4 py-3 rounded">
+                                {{ error }}
+                            </div>
+
+                            <!-- Warning message -->
+                            <div class="mb-6">
+                                <div class="flex items-center mb-4">
+                                    <ExclamationTriangleIcon class="h-6 w-6 text-red-500 mr-3" />
+                                    <span class="text-sm font-medium text-gray-900 dark:text-gray-100">Action irréversible</span>
+                                </div>
+                                <p class="text-sm text-gray-600 dark:text-gray-400 mb-4">
+                                    Êtes-vous sûr de vouloir supprimer la source <strong>{{ source?.baseUrl }}</strong> ?
+                                </p>
+                                <div class="bg-yellow-50 dark:bg-yellow-900/20 border border-yellow-200 dark:border-yellow-700 rounded-md p-4">
+                                    <div class="flex">
+                                        <ExclamationTriangleIcon class="h-5 w-5 text-yellow-400" />
+                                        <div class="ml-3">
+                                            <h3 class="text-sm font-medium text-yellow-800 dark:text-yellow-300">
+                                                Attention
+                                            </h3>
+                                            <div class="mt-2 text-sm text-yellow-700 dark:text-yellow-400">
+                                                <p>Cette source ne pourra plus être utilisée pour le scraping des chapitres.</p>
+                                            </div>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+
+                            <!-- Action buttons -->
+                            <div class="mt-6 flex justify-end space-x-3">
+                                <button
+                                    type="button"
+                                    class="inline-flex justify-center rounded-md border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-700 px-4 py-2 text-sm font-medium text-gray-700 dark:text-gray-300 shadow-sm hover:bg-gray-50 dark:hover:bg-gray-600 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2"
+                                    @click="closeModal"
+                                    :disabled="isLoading"
+                                >
+                                    Annuler
+                                </button>
+                                <button
+                                    type="button"
+                                    class="inline-flex justify-center rounded-md border border-transparent bg-red-600 px-4 py-2 text-sm font-medium text-white shadow-sm hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500 focus:ring-offset-2 disabled:opacity-50 disabled:cursor-not-allowed"
+                                    @click="confirmDelete"
+                                    :disabled="isLoading"
+                                >
+                                    <ArrowPathIcon v-if="isLoading" class="h-4 w-4 mr-2 animate-spin" />
+                                    {{ isLoading ? 'Suppression...' : 'Supprimer définitivement' }}
+                                </button>
+                            </div>
+                        </DialogPanel>
+                    </TransitionChild>
+                </div>
+            </div>
+        </Dialog>
+    </TransitionRoot>
+</template>
+
+<script setup>
+import { Dialog, DialogPanel, DialogTitle, TransitionChild, TransitionRoot } from '@headlessui/vue';
+import { ArrowPathIcon, ExclamationTriangleIcon } from '@heroicons/vue/24/outline';
+
+const props = defineProps({
+    isOpen: {
+        type: Boolean,
+        required: true
+    },
+    source: {
+        type: Object,
+        default: null
+    },
+    isLoading: {
+        type: Boolean,
+        default: false
+    },
+    error: {
+        type: String,
+        default: null
+    }
+});
+
+const emit = defineEmits(['close', 'confirm']);
+
+const closeModal = () => {
+    emit('close');
+};
+
+const confirmDelete = () => {
+    emit('confirm');
+};
+</script>
--- a/assets/vue/app/domain/setting/presentation/components/ContentSourceForm.vue
+++ b/assets/vue/app/domain/setting/presentation/components/ContentSourceForm.vue
@@ -1,17 +1,7 @@
 <template>
-    <div class="bg-white dark:bg-gray-800 rounded-lg shadow-lg border border-gray-200 dark:border-gray-700">
-        <!-- Header -->
-        <div class="bg-gray-50 dark:bg-gray-700 px-6 py-4 border-b border-gray-200 dark:border-gray-600 rounded-t-lg">
-            <div class="flex items-center space-x-2">
-                <Cog6ToothIcon class="w-5 h-5 text-gray-600 dark:text-gray-400" />
-                <h2 class="text-lg font-semibold text-gray-900 dark:text-white">
-                    {{ isEditing ? 'Edit Scrapper Configuration' : 'New Scrapper Configuration' }}
-                </h2>
-            </div>
-        </div>
-
+    <div>
        <!-- Form -->
-        <form @submit.prevent="handleSubmit" class="p-6 space-y-6">
+        <form @submit.prevent="handleSubmit" class="space-y-6">
            <!-- Base URL -->
            <div>
                <label for="baseUrl" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
@@ -22,25 +12,12 @@
                    v-model="form.baseUrl"
                    type="url"
                    required
-                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                    placeholder="https://example.com" />
            </div>

-            <!-- Image Selector -->
-            <div>
-                <label for="imageSelector" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    Image Selector
-                </label>
-                <input
-                    id="imageSelector"
-                    v-model="form.imageSelector"
-                    type="text"
-                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                    placeholder=".reading-content .page-break img" />
-            </div>
-
            <!-- Chapter URL Format -->
-            <div>
+            <div class="border-t border-gray-200 dark:border-gray-700 pt-6">
                <label for="chapterUrlFormat" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
                    Chapter URL Format <span class="text-gray-500">({slug}, {chapterNumber})</span>
                </label>
@@ -49,132 +26,132 @@
                    v-model="form.chapterUrlFormat"
                    type="text"
                    required
-                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                    placeholder="https://example.com/manga/{slug}-{chapterNumber}/" />
            </div>

-            <!-- Next Page Selector -->
-            <div>
-                <label for="nextPageSelector" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    Next Page Selector <span class="text-gray-500">(let empty if vertical reader)</span>
-                </label>
-                <input
-                    id="nextPageSelector"
-                    v-model="form.nextPageSelector"
-                    type="text"
-                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                    placeholder=".next-page" />
+            <!-- Selectors -->
+            <div class="border-t border-gray-200 dark:border-gray-700 pt-6 space-y-4">
+                <div>
+                    <label for="imageSelector" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Image Selector
+                    </label>
+                    <input
+                        id="imageSelector"
+                        v-model="form.imageSelector"
+                        type="text"
+                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                        placeholder=".reading-content .page-break img" />
+                </div>
+
+                <div>
+                    <label for="nextPageSelector" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Next Page Selector <span class="text-gray-500">(laisser vide si lecteur vertical)</span>
+                    </label>
+                    <input
+                        id="nextPageSelector"
+                        v-model="form.nextPageSelector"
+                        type="text"
+                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                        placeholder=".next-page" />
+                </div>
+
+                <div>
+                    <label for="chapterSelector" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Chapter Selector <span class="text-gray-500">(requis pour le scraping Javascript)</span>
+                    </label>
+                    <input
+                        id="chapterSelector"
+                        v-model="form.chapterSelector"
+                        type="text"
+                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                        placeholder=".chapter-selector" />
+                </div>
            </div>

-            <!-- Chapter Selector -->
-            <div>
-                <label for="chapterSelector" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    Chapter Selector <span class="text-gray-500">(required for Javascript scraping)</span>
-                </label>
-                <input
-                    id="chapterSelector"
-                    v-model="form.chapterSelector"
-                    type="text"
-                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                    placeholder=".chapter-selector" />
-            </div>
+            <!-- Scraping Type + Token -->
+            <div class="border-t border-gray-200 dark:border-gray-700 pt-6 space-y-4">
+                <div>
+                    <label for="scrapingType" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Scraping Type
+                    </label>
+                    <select
+                        id="scrapingType"
+                        v-model="form.scrapingType"
+                        required
+                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
+                        <option value="html">HTML</option>
+                        <option value="javascript">Javascript</option>
+                    </select>
+                </div>

-            <!-- Scraping Type -->
-            <div>
-                <label for="scrapingType" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    Scraping Type
-                </label>
-                <select
-                    id="scrapingType"
-                    v-model="form.scrapingType"
-                    required
-                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white">
-                    <option value="html">HTML</option>
-                    <option value="javascript">Javascript</option>
-                </select>
-            </div>
-
-            <!-- Token (optionnel) -->
-            <div>
-                <label for="token" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                    Token
-                </label>
-                <input
-                    id="token"
-                    v-model="form.token"
-                    type="text"
-                    class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
-                    placeholder="Optional authentication token" />
-            </div>
-
-            <!-- Submit Button -->
-            <div class="flex justify-end">
-                <button
-                    type="submit"
-                    :disabled="saving"
-                    class="px-6 py-2 bg-green-600 hover:bg-green-700 disabled:bg-green-400 text-white font-medium rounded-md transition-colors duration-200 flex items-center space-x-2">
-                    <ArrowPathIcon v-if="saving" class="w-4 h-4 animate-spin" />
-                    <span>{{ isEditing ? 'Update Configuration' : 'Create Configuration' }}</span>
-                    <PencilSquareIcon v-if="!saving" class="w-4 h-4" />
-                </button>
+                <div>
+                    <label for="token" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Token
+                    </label>
+                    <input
+                        id="token"
+                        v-model="form.token"
+                        type="text"
+                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                        placeholder="Optional authentication token" />
+                </div>
            </div>

            <!-- Error message -->
-            <div v-if="error" class="text-red-600 dark:text-red-400 text-sm">
+            <div v-if="error" class="border-t border-gray-200 dark:border-gray-700 pt-6 text-red-600 dark:text-red-400 text-sm">
                {{ error }}
            </div>
        </form>

        <!-- Test Configuration Section -->
-        <div class="border-t border-gray-200 dark:border-gray-600 p-6 bg-gray-50 dark:bg-gray-700 rounded-b-lg">
-            <div class="flex items-center space-x-2 mb-4">
+        <div class="border-t border-gray-200 dark:border-gray-700 pt-6 mt-6">
+            <div class="flex items-center space-x-2 mb-6">
                <WrenchScrewdriverIcon class="w-5 h-5 text-gray-600 dark:text-gray-400" />
-                <h3 class="text-lg font-medium text-gray-900 dark:text-white">Test Configuration</h3>
+                <h3 class="text-sm font-medium text-gray-900 dark:text-white">Configuration de test (health check)</h3>
            </div>

            <div class="grid grid-cols-1 md:grid-cols-2 gap-4 mb-4">
                <div>
-                    <label for="testMangaSlug" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                        Manga Slug
+                    <label for="testSlug" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                        Manga Slug <span class="text-gray-500">(enregistré)</span>
                    </label>
                    <input
-                        id="testMangaSlug"
-                        v-model="testData.mangaSlug"
+                        id="testSlug"
+                        v-model="form.testSlug"
                        type="text"
-                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                        placeholder="manga-slug" />
                </div>

                <div>
                    <label for="testChapterNumber" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
-                        Chapter Number
+                        Numéro de chapitre <span class="text-gray-500">(enregistré)</span>
                    </label>
                    <input
                        id="testChapterNumber"
-                        v-model="testData.chapterNumber"
+                        v-model="form.testChapterNumber"
                        type="number"
                        step="0.1"
-                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 rounded-md shadow-sm focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
+                        class="w-full px-3 py-2 border border-gray-300 dark:border-gray-600 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:text-white"
                        placeholder="1" />
                </div>
            </div>

-            <!-- Preview de l'URL qui sera testée -->
-            <div v-if="generatedTestUrl" class="mb-4 p-3 bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-md">
-                <div class="text-sm text-blue-800 dark:text-blue-200">
-                    <strong>URL qui sera testée :</strong>
-                    <div class="mt-1 font-mono text-xs break-all">{{ generatedTestUrl }}</div>
-                </div>
+            <!-- Preview URL -->
+            <div v-if="generatedTestUrl" class="mb-4 border-t border-gray-200 dark:border-gray-700 pt-4">
+                <p class="text-xs text-gray-500 dark:text-gray-400 mb-1">URL qui sera testée</p>
+                <code class="text-xs text-gray-700 dark:text-gray-300 break-all">{{ generatedTestUrl }}</code>
            </div>

            <button
                type="button"
                @click="testConfiguration"
                :disabled="testing || !canTest"
-                class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium rounded-md transition-colors duration-200 flex items-center justify-center space-x-2">
+                class="w-full px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white font-medium transition-colors duration-200 flex items-center justify-center space-x-2">
                <ArrowPathIcon v-if="testing" class="w-4 h-4 animate-spin" />
                <PlayIcon v-else class="w-4 h-4" />
-                <span>Test Configuration</span>
+                <span>Tester maintenant</span>
            </button>
        </div>
    </div>
@@ -183,8 +160,6 @@
 <script setup>
 import {
    ArrowPathIcon,
-    Cog6ToothIcon,
-    PencilSquareIcon,
    PlayIcon,
    WrenchScrewdriverIcon
 } from '@heroicons/vue/24/outline';
@@ -216,12 +191,9 @@ const form = ref({
    nextPageSelector: '',
    chapterSelector: '',
    scrapingType: 'html',
-    token: ''
-});
-
-const testData = ref({
-    mangaSlug: '',
-    chapterNumber: ''
+    token: '',
+    testSlug: '',
+    testChapterNumber: '',
 });

 const testing = ref(false);
@@ -229,20 +201,19 @@ const testing = ref(false);
 const canTest = computed(() => {
    return form.value.baseUrl &&
           form.value.chapterUrlFormat &&
-           testData.value.mangaSlug &&
-           testData.value.chapterNumber;
+           form.value.testSlug &&
+           form.value.testChapterNumber;
 });

 const generatedTestUrl = computed(() => {
-    if (!form.value.chapterUrlFormat || !testData.value.mangaSlug || !testData.value.chapterNumber) {
+    if (!form.value.chapterUrlFormat || !form.value.testSlug || !form.value.testChapterNumber) {
        return '';
    }
    return form.value.chapterUrlFormat
-        .replace('{slug}', testData.value.mangaSlug)
-        .replace('{chapterNumber}', testData.value.chapterNumber);
+        .replace('{slug}', form.value.testSlug)
+        .replace('{chapterNumber}', form.value.testChapterNumber);
 });

-// Initialize form with source data if editing, clear if creating new
 watch(() => props.source, (newSource) => {
    if (newSource) {
        form.value = {
@@ -252,10 +223,11 @@ watch(() => props.source, (newSource) => {
            nextPageSelector: newSource.nextPageSelector || '',
            chapterSelector: newSource.chapterSelector || '',
            scrapingType: (newSource.scrapingType || 'html').toLowerCase(),
-            token: newSource.token || ''
+            token: newSource.token || '',
+            testSlug: newSource.testSlug || '',
+            testChapterNumber: newSource.testChapterNumber ?? '',
        };
    } else {
-        // Reset form when no source (creating new)
        form.value = {
            baseUrl: '',
            imageSelector: '',
@@ -263,23 +235,37 @@ watch(() => props.source, (newSource) => {
            nextPageSelector: '',
            chapterSelector: '',
            scrapingType: 'html',
-            token: ''
+            token: '',
+            testSlug: '',
+            testChapterNumber: '',
        };
    }
 }, { immediate: true });

-const handleSubmit = () => {
-    emit('submit', { ...form.value });
+const buildPayload = (formData) => {
+    const data = { ...formData };
+    const raw = data.testChapterNumber;
+    data.testChapterNumber = (raw === '' || raw === null || raw === undefined)
+        ? null
+        : parseFloat(raw);
+    return data;
 };

+const handleSubmit = () => {
+    emit('submit', buildPayload(form.value));
+};
+
+defineExpose({ submitForm: handleSubmit });
+
 const testConfiguration = async () => {
    testing.value = true;
    try {
        await emit('test', {
-            configuration: { ...form.value },
+            configuration: buildPayload(form.value),
            testData: {
-                ...testData.value,
-                testUrl: generatedTestUrl.value
+                mangaSlug: form.value.testSlug,
+                chapterNumber: form.value.testChapterNumber,
+                testUrl: generatedTestUrl.value,
            }
        });
    } finally {
--- a/assets/vue/app/domain/setting/presentation/pages/ScrapperConfigurations.vue
+++ b/assets/vue/app/domain/setting/presentation/pages/ScrapperConfigurations.vue
@@ -3,72 +3,54 @@
        <Toolbar :config="toolbarConfig" />

        <div class="overflow-y-auto flex-1">
-        <div class="container mx-auto px-4 py-6">
-            <!-- Header -->
-            <div class="mb-8">
-                <h1 class="text-3xl font-bold text-gray-900 dark:text-white mb-2">
-                    Scrapper Configurations
-                </h1>
-                <p class="text-gray-600 dark:text-gray-400">
-                    Gérez les configurations de scraping pour les différentes sources de manga
-                </p>
-            </div>
-
+        <div class="px-6 py-8">
            <!-- Loading State -->
            <div v-if="loadingSources" class="flex justify-center py-12">
-                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
+                <div class="animate-spin h-12 w-12 border-b-2 border-blue-500"></div>
            </div>

            <!-- Error State -->
-            <div v-else-if="sourcesError" class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded-lg p-4 mb-6">
+            <div v-else-if="sourcesError" class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 p-4 mb-6">
                <div class="flex items-center">
                    <ExclamationTriangleIcon class="w-5 h-5 text-red-400 mr-2" />
                    <p class="text-red-800 dark:text-red-200">{{ sourcesError }}</p>
                </div>
                <button
                    @click="contentSourceStore.loadSources()"
-                    class="mt-3 px-4 py-2 bg-red-600 text-white rounded hover:bg-red-700">
+                    class="mt-3 px-4 py-2 bg-red-600 text-white hover:bg-red-700">
                    Réessayer
                </button>
            </div>

-            <!-- Debug Info (temporary) -->
-            <div v-if="!loadingSources && !sourcesError && sources.length === 0" class="bg-blue-50 dark:bg-blue-900 border border-blue-200 dark:border-blue-700 rounded-lg p-4 mb-6">
-                <p class="text-blue-800 dark:text-blue-200">Aucune source trouvée. Rechargement en cours...</p>
-                <button
-                    @click="contentSourceStore.loadSources()"
-                    class="mt-2 px-4 py-2 bg-blue-600 text-white rounded hover:bg-blue-700">
-                    Actualiser
-                </button>
-            </div>
-
            <!-- Sources Grid -->
-            <div v-else class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
-                <!-- Existing Sources -->
-                <ContentSourceCard
-                    v-for="source in sources"
-                    :key="source.id"
-                    :source="source"
-                    @edit="editSource"
-                    @open-link="openSourceLink" />
+            <section v-else class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
+                    <!-- Existing Sources -->
+                    <ContentSourceCard
+                        v-for="source in sources"
+                        :key="source.id"
+                        :source="source"
+                        @edit="editSource"
+                        @open-link="openSourceLink" />

-                <!-- Add New Configuration Card -->
-                <div
-                    @click="addNewSource"
-                    class="bg-gray-50 dark:bg-gray-700 border-2 border-dashed border-gray-300 dark:border-gray-600 rounded-lg p-6 hover:border-gray-400 dark:hover:border-gray-500 transition-colors cursor-pointer flex flex-col items-center justify-center h-full">
-                    <PlusIcon class="w-8 h-8 text-gray-400 dark:text-gray-500 mb-3" />
-                    <span class="text-lg font-medium text-gray-600 dark:text-gray-400 mb-2">
-                        Add New Configuration
-                    </span>
+                    <!-- Add New Configuration Card -->
+                    <div
+                        @click="addNewSource"
+                        class="bg-gray-50 dark:bg-gray-700 border-2 border-dashed border-gray-300 dark:border-gray-600 p-6 hover:border-gray-400 dark:hover:border-gray-500 transition-colors cursor-pointer flex flex-col items-center justify-center h-full">
+                        <PlusIcon class="w-8 h-8 text-gray-400 dark:text-gray-500 mb-3" />
+                        <span class="text-lg font-medium text-gray-600 dark:text-gray-400 mb-2">
+                            Add New Configuration
+                        </span>
+                    </div>
                </div>
-            </div>
+            </section>

            <!-- Import/Export Success Messages -->
-            <div v-if="showImportSuccess" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg">
+            <div v-if="showImportSuccess" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 shadow-lg">
                Configuration importée avec succès !
            </div>

-            <div v-if="showExportSuccess" class="fixed bottom-4 right-4 bg-blue-500 text-white px-4 py-2 rounded-lg shadow-lg">
+            <div v-if="showExportSuccess" class="fixed bottom-4 right-4 bg-blue-500 text-white px-4 py-2 shadow-lg">
                Configuration exportée !
            </div>
        </div>
@@ -76,12 +58,12 @@

        <!-- Import Modal -->
        <div v-if="showImportModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-            <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-md">
+            <div class="bg-white dark:bg-gray-800 shadow-xl w-full max-w-md">
                <div class="p-6">
                    <h3 class="text-lg font-semibold mb-4">Importer des configurations</h3>
                    <textarea
                        v-model="importData"
-                        class="w-full h-40 p-3 border border-gray-300 dark:border-gray-600 rounded-md dark:bg-gray-700 dark:text-white"
+                        class="w-full h-40 p-3 border border-gray-300 dark:border-gray-600 dark:bg-gray-700 dark:text-white"
                        placeholder="Collez ici le JSON des configurations à importer..."></textarea>

                    <div class="flex justify-end space-x-3 mt-4">
@@ -93,7 +75,7 @@
                        <button
                            @click="handleImport"
                            :disabled="importing || !importData.trim()"
-                            class="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white rounded-md">
+                            class="px-4 py-2 bg-blue-600 hover:bg-blue-700 disabled:bg-blue-400 text-white">
                            {{ importing ? 'Import...' : 'Importer' }}
                        </button>
                    </div>
@@ -109,10 +91,11 @@ import {
    ArrowPathIcon,
    ArrowUpTrayIcon,
    ExclamationTriangleIcon,
+    HeartIcon,
    PlusIcon
 } from '@heroicons/vue/24/outline';
 import { storeToRefs } from 'pinia';
-import { computed, onMounted, ref } from 'vue';
+import { computed, onMounted, onUnmounted, ref } from 'vue';
 import { useRouter } from 'vue-router';
 import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
 import { useContentSourceStore } from '../../application/store/contentSourceStore';
@@ -126,9 +109,13 @@ const {
    loadingSources,
    sourcesError,
    importing,
-    exporting
+    exporting,
+    checkingHealth,
 } = storeToRefs(contentSourceStore);

+// Mercure — écoute des mises à jour health
+let mercureEventSource = null;
+
 // Local state
 const showImportModal = ref(false);
 const showExportSuccess = ref(false);
@@ -138,40 +125,45 @@ const importData = ref('');
 // Load sources on mount and clear current source
 onMounted(async () => {
    try {
-        contentSourceStore.clearCurrentSource(); // Clear any previously loaded source
-        contentSourceStore.clearErrors(); // Clear any previous errors
+        contentSourceStore.clearCurrentSource();
+        contentSourceStore.clearErrors();
        await contentSourceStore.loadSources();
    } catch (error) {
        console.error('Erreur lors du chargement des sources:', error);
    }
+
+    // Écoute Mercure pour les mises à jour de health status
+    const url = new URL('/.well-known/mercure', window.location.href);
+    sources.value.forEach(source => {
+        url.searchParams.append('topic', `scrapers/health/${source.id}`);
+    });
+
+    mercureEventSource = new EventSource(url.toString());
+    mercureEventSource.onmessage = (event) => {
+        try {
+            const data = JSON.parse(event.data);
+            contentSourceStore.updateSourceHealth(data.sourceId, data.status, data.error);
+        } catch (e) {
+            console.error('Erreur parsing Mercure event:', e);
+        }
+    };
+});
+
+onUnmounted(() => {
+    mercureEventSource?.close();
 });

 // Toolbar configuration
 const toolbarConfig = computed(() => ({
    leftSection: [
-        {
-            icon: ArrowPathIcon,
-            label: 'Actualiser',
-            type: 'button',
-            onClick: () => contentSourceStore.loadSources(),
-            active: loadingSources.value
-        }
+        { type: 'label', text: 'Scrapers', class: 'text-sm font-medium' },
    ],
    rightSection: [
-        {
-            icon: ArrowDownTrayIcon,
-            label: 'Exporter',
-            type: 'button',
-            onClick: handleExport,
-            disabled: exporting.value
-        },
-        {
-            icon: ArrowUpTrayIcon,
-            label: 'Importer',
-            type: 'button',
-            onClick: () => showImportModal.value = true
-        }
-    ]
+        { type: 'button', icon: ArrowPathIcon, label: 'Actualiser', onClick: () => contentSourceStore.loadSources(), disabled: loadingSources.value },
+        { type: 'button', icon: HeartIcon, label: 'Tester tous', onClick: handleCheckAllHealth, disabled: checkingHealth.value },
+        { type: 'button', icon: ArrowDownTrayIcon, label: 'Exporter', onClick: handleExport, disabled: exporting.value },
+        { type: 'button', icon: ArrowUpTrayIcon, label: 'Importer', onClick: () => showImportModal.value = true },
+    ],
 }));

 // Actions
@@ -190,6 +182,14 @@ const openSourceLink = (url) => {
    window.open(url, '_blank');
 };

+async function handleCheckAllHealth() {
+    try {
+        await contentSourceStore.checkAllHealth();
+    } catch (error) {
+        console.error('Erreur lors du health check:', error);
+    }
+}
+
 async function handleExport() {
    try {
        const exportData = await contentSourceStore.exportSources();
--- a/assets/vue/app/domain/setting/presentation/pages/ScrapperEdit.vue
+++ b/assets/vue/app/domain/setting/presentation/pages/ScrapperEdit.vue
@@ -3,43 +3,36 @@
        <Toolbar :config="toolbarConfig" />

        <div class="overflow-y-auto flex-1">
-        <div class="container mx-auto px-4 py-6">
-            <!-- Back Navigation -->
-            <div class="mb-6">
-                <button
-                    @click="goBack"
-                    class="flex items-center space-x-2 text-gray-600 dark:text-gray-400 hover:text-gray-900 dark:hover:text-gray-200 transition-colors">
-                    <ArrowLeftIcon class="w-5 h-5" />
-                    <span>Retour aux configurations</span>
-                </button>
-            </div>
-
-            <!-- Loading State -->
-            <div v-if="loadingCurrentSource" class="flex justify-center py-12">
-                <div class="animate-spin rounded-full h-12 w-12 border-b-2 border-blue-500"></div>
-            </div>
-
-            <!-- Error State -->
-            <div v-else-if="currentSourceError" class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded-lg p-4 mb-6">
-                <div class="flex items-center">
-                    <ExclamationTriangleIcon class="w-5 h-5 text-red-400 mr-2" />
-                    <p class="text-red-800 dark:text-red-200">{{ currentSourceError }}</p>
+        <div class="px-6 py-8">
+            <section class="border-t border-gray-200 dark:border-gray-700 pt-6">
+                <!-- Loading State -->
+                <div v-if="loadingCurrentSource" class="flex justify-center py-12">
+                    <div class="animate-spin h-12 w-12 border-b-2 border-blue-500"></div>
                </div>
-            </div>

-            <!-- Form -->
-            <div v-else class="max-w-4xl mx-auto">
-                <ContentSourceForm
-                    :source="currentSource"
-                    :saving="saving"
-                    :error="saveError"
-                    @submit="handleSubmit"
-                    @test="handleTest" />
-            </div>
+                <!-- Error State -->
+                <div v-else-if="currentSourceError" class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 p-4 mb-6">
+                    <div class="flex items-center">
+                        <ExclamationTriangleIcon class="w-5 h-5 text-red-400 mr-2" />
+                        <p class="text-red-800 dark:text-red-200">{{ currentSourceError }}</p>
+                    </div>
+                </div>
+
+                <!-- Form -->
+                <div v-else>
+                    <ContentSourceForm
+                        ref="formRef"
+                        :source="currentSource"
+                        :saving="saving"
+                        :error="saveError"
+                        @submit="handleSubmit"
+                        @test="handleTest" />
+                </div>
+            </section>

            <!-- Test Results Modal -->
            <div v-if="showTestResults" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 p-4">
-                <div class="bg-white dark:bg-gray-800 rounded-lg shadow-xl w-full max-w-4xl max-h-[80vh] overflow-hidden">
+                <div class="bg-white dark:bg-gray-800 shadow-xl w-full max-w-4xl max-h-[80vh] overflow-hidden">
                    <div class="p-6 border-b border-gray-200 dark:border-gray-600">
                        <div class="flex justify-between items-center">
                            <h3 class="text-lg font-semibold">Résultats du test</h3>
@@ -54,7 +47,7 @@
                    <div class="p-6 overflow-y-auto">
                        <!-- Loading state during test -->
                        <div v-if="testingConfiguration" class="flex items-center justify-center py-8">
-                            <div class="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-500 mr-3"></div>
+                            <div class="animate-spin h-8 w-8 border-b-2 border-blue-500 mr-3"></div>
                            <span class="text-gray-600">Test en cours...</span>
                        </div>

@@ -65,7 +58,7 @@
                                <span class="font-medium">Test réussi !</span>
                            </div>

-                            <div class="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 rounded-lg p-4">
+                            <div class="bg-green-50 dark:bg-green-900 border border-green-200 dark:border-green-700 p-4">
                                <div class="grid grid-cols-2 gap-4 text-sm">
                                    <div>
                                        <span class="font-medium text-green-800 dark:text-green-200">URL testée:</span>
@@ -92,10 +85,11 @@
                                        <img
                                            :src="imageUrl"
                                            :alt="`Image ${index + 1}`"
-                                            class="w-full h-32 object-cover rounded border border-gray-200 dark:border-gray-600"
+                                            class="w-full h-32 object-cover border border-gray-200 dark:border-gray-600"
+                                            referrerpolicy="no-referrer"
                                            @error="handleImageError"
                                            @load="handleImageLoad" />
-                                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-opacity rounded flex items-center justify-center">
+                                        <div class="absolute inset-0 bg-black bg-opacity-0 group-hover:bg-opacity-30 transition-opacity flex items-center justify-center">
                                            <span class="text-white opacity-0 group-hover:opacity-100 text-sm font-medium">
                                                Page {{ index + 1 }}
                                            </span>
@@ -107,7 +101,7 @@
                                </p>
                            </div>

-                            <div v-else class="bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 rounded-lg p-4">
+                            <div v-else class="bg-yellow-50 dark:bg-yellow-900 border border-yellow-200 dark:border-yellow-700 p-4">
                                <div class="flex items-center">
                                    <ExclamationTriangleIcon class="w-5 h-5 text-yellow-400 mr-2" />
                                    <p class="text-yellow-800 dark:text-yellow-200">
@@ -125,7 +119,7 @@
                                <span class="font-medium">Test échoué</span>
                            </div>

-                            <div class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded-lg p-4 mb-4">
+                            <div class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 p-4 mb-4">
                                <div class="text-sm text-red-800 dark:text-red-200">
                                    <div><strong>URL testée:</strong> {{ testResults.testedUrl || 'N/A' }}</div>
                                    <div><strong>Type de scraping:</strong> {{ testResults.scrapingType || 'N/A' }}</div>
@@ -138,14 +132,14 @@
                                <div
                                    v-for="(error, index) in testResults.errors"
                                    :key="index"
-                                    class="bg-red-100 dark:bg-red-800 border-l-4 border-red-400 p-4 rounded">
+                                    class="bg-red-100 dark:bg-red-800 border-l-4 border-red-400 p-4">
                                    <div class="flex items-start">
                                        <div class="flex-shrink-0">
                                            <ExclamationTriangleIcon class="w-5 h-5 text-red-400" />
                                        </div>
                                        <div class="ml-3 flex-1">
                                            <div class="flex items-center mb-1">
-                                                <span class="inline-flex items-center px-2 py-1 rounded-full text-xs font-medium bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-200 mr-2">
+                                                <span class="inline-flex items-center px-2 py-1 text-xs font-medium bg-red-200 text-red-800 dark:bg-red-700 dark:text-red-200 mr-2">
                                                    {{ formatErrorType(error.type) }}
                                                </span>
                                                <span class="text-sm font-medium text-red-800 dark:text-red-200">
@@ -155,7 +149,7 @@
                                            <p class="text-sm text-red-700 dark:text-red-300 mb-2">
                                                {{ error.message }}
                                            </p>
-                                            <div class="bg-red-50 dark:bg-red-900 rounded p-2">
+                                            <div class="bg-red-50 dark:bg-red-900 p-2">
                                                <p class="text-xs text-red-600 dark:text-red-400">
                                                    <strong>Suggestion :</strong> {{ error.suggestion }}
                                                </p>
@@ -166,7 +160,7 @@
                            </div>

                            <!-- Generic Error -->
-                            <div v-else-if="testResults.error" class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 rounded p-3">
+                            <div v-else-if="testResults.error" class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 p-3">
                                <code class="text-sm text-red-800 dark:text-red-200">
                                    {{ testResults.error }}
                                </code>
@@ -177,11 +171,20 @@
            </div>

            <!-- Success Message -->
-            <div v-if="showSuccessMessage" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 rounded-lg shadow-lg">
+            <div v-if="showSuccessMessage" class="fixed bottom-4 right-4 bg-green-500 text-white px-4 py-2 shadow-lg">
                Configuration {{ isEditing ? 'mise à jour' : 'créée' }} avec succès !
            </div>
        </div>
        </div>
+
+        <!-- Delete Modal -->
+        <ContentSourceDeleteModal
+            :is-open="isDeleteModalOpen"
+            :source="currentSource"
+            :is-loading="isDeleting"
+            :error="deleteError"
+            @close="isDeleteModalOpen = false"
+            @confirm="confirmDeleteSource" />
    </div>
 </template>

@@ -190,6 +193,8 @@ import {
    ArrowLeftIcon,
    CheckCircleIcon,
    ExclamationTriangleIcon,
+    PencilSquareIcon,
+    TrashIcon,
    XCircleIcon,
    XMarkIcon
 } from '@heroicons/vue/24/outline';
@@ -199,6 +204,7 @@ import { useRoute, useRouter } from 'vue-router';
 import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
 import { useContentSourceStore } from '../../application/store/contentSourceStore';
 import { ApiContentSourceRepository } from '../../infrastructure/api/apiContentSourceRepository';
+import ContentSourceDeleteModal from '../components/ContentSourceDeleteModal.vue';
 import ContentSourceForm from '../components/ContentSourceForm.vue';

 const route = useRoute();
@@ -214,11 +220,17 @@ const {
    saveError
 } = storeToRefs(contentSourceStore);

+// Form ref
+const formRef = ref(null);
+
 // Local state
 const showTestResults = ref(false);
 const showSuccessMessage = ref(false);
 const testResults = ref({});
 const testingConfiguration = ref(false);
+const isDeleteModalOpen = ref(false);
+const isDeleting = ref(false);
+const deleteError = ref(null);

 const isEditing = computed(() => !!route.params.id);

@@ -233,16 +245,19 @@ onMounted(async () => {
 });

 // Toolbar configuration
-const toolbarConfig = {
-    leftSection: [],
-    rightSection: []
-};
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'button', icon: ArrowLeftIcon, label: 'Retour', onClick: () => router.push({ name: 'scrapper-configurations' }) },
+        { type: 'divider' },
+        { type: 'label', text: isEditing.value ? 'Modifier la configuration' : 'Nouvelle configuration', class: 'text-sm font-medium' },
+    ],
+    rightSection: [
+        ...(isEditing.value ? [{ type: 'button', icon: TrashIcon, label: 'Supprimer', onClick: () => { isDeleteModalOpen.value = true; }, class: 'text-red-600 hover:text-red-700' }, { type: 'divider' }] : []),
+        { type: 'button', icon: PencilSquareIcon, label: isEditing.value ? 'Mettre à jour' : 'Créer', onClick: () => formRef.value?.submitForm(), disabled: saving.value },
+    ],
+}));

 // Actions
-const goBack = () => {
-    router.push({ name: 'scrapper-configurations' });
-};
-
 const handleSubmit = async (formData) => {
    try {
        if (isEditing.value) {
@@ -279,6 +294,11 @@ const handleTest = async ({ configuration, testData }) => {
    testResults.value = {};

    try {
+        // Persister testSlug + testChapterNumber avant de lancer le test
+        if (isEditing.value) {
+            await contentSourceStore.updateSource(route.params.id, configuration);
+        }
+
        // Préparer les données selon le format de l'API
        const testConfiguration = {
            baseUrl: configuration.baseUrl,
@@ -323,6 +343,21 @@ const handleImageLoad = (event) => {
    event.target.style.display = 'block';
 };

+const confirmDeleteSource = async () => {
+    isDeleting.value = true;
+    deleteError.value = null;
+
+    try {
+        await contentSourceStore.deleteSource(route.params.id);
+        isDeleteModalOpen.value = false;
+        await router.push({ name: 'scrapper-configurations' });
+    } catch (error) {
+        deleteError.value = error.message;
+    } finally {
+        isDeleting.value = false;
+    }
+};
+
 const formatErrorType = (type) => {
    const typeMap = {
        'selector_error': 'Erreur sélecteur',
--- a/assets/vue/app/domain/system/application/store/logsStore.js
+++ b/assets/vue/app/domain/system/application/store/logsStore.js
@@ -0,0 +1,110 @@
+import { defineStore } from 'pinia';
+import { ApiJobRepository } from '../../../activity/infrastructure/api/ApiJobRepository';
+
+const jobRepository = new ApiJobRepository();
+
+// Statuts disponibles par filtre
+const STATUS_MAP = {
+    failed: ['failed'],
+    completed: ['completed'],
+    all: ['failed', 'completed'],
+};
+
+export const useLogsStore = defineStore('logs', {
+    state: () => ({
+        logs: [],
+        loading: false,
+        error: null,
+        currentPage: 1,
+        totalPages: 0,
+        total: 0,
+        limit: 50,
+        hasNextPage: false,
+        hasPreviousPage: false,
+        sortBy: 'createdAt',
+        sortOrder: 'DESC',
+        statusFilter: 'failed', // 'failed' | 'completed' | 'all'
+    }),
+
+    getters: {
+        isLoading: state => state.loading,
+        hasError: state => !!state.error,
+    },
+
+    actions: {
+        async loadLogs(page = null) {
+            this.loading = true;
+            this.error = null;
+
+            try {
+                const collection = await jobRepository.getJobs({
+                    page: page || this.currentPage,
+                    limit: this.limit,
+                    sortBy: this.sortBy,
+                    sortOrder: this.sortOrder,
+                    status: STATUS_MAP[this.statusFilter],
+                    type: 'scraping_job',
+                });
+
+                this.logs = collection.items;
+                this.currentPage = collection.page;
+                this.total = collection.total;
+                this.hasNextPage = collection.hasNextPage;
+                this.hasPreviousPage = collection.hasPreviousPage;
+                this.totalPages = Math.ceil(this.total / this.limit);
+            } catch (error) {
+                this.error = error.message;
+            } finally {
+                this.loading = false;
+            }
+        },
+
+        async goToPage(page) {
+            if (page >= 1 && page <= this.totalPages && page !== this.currentPage) {
+                this.currentPage = page;
+                await this.loadLogs(page);
+            }
+        },
+
+        async updateSort(sortBy, sortOrder) {
+            this.sortBy = sortBy;
+            this.sortOrder = sortOrder;
+            this.currentPage = 1;
+            await this.loadLogs(1);
+        },
+
+        async setStatusFilter(filter) {
+            this.statusFilter = filter;
+            this.currentPage = 1;
+            await this.loadLogs(1);
+        },
+
+        async deleteLog(id) {
+            try {
+                await jobRepository.deleteJob(id);
+                this.logs = this.logs.filter(log => log.id !== id);
+                this.total = Math.max(0, this.total - 1);
+                this.totalPages = Math.ceil(this.total / this.limit);
+            } catch (error) {
+                this.error = error.message;
+            }
+        },
+
+        async deleteAllLogs() {
+            this.loading = true;
+            this.error = null;
+
+            try {
+                await jobRepository.deleteJobs({
+                    status: STATUS_MAP[this.statusFilter].join(','),
+                    type: 'scraping_job',
+                });
+                await this.loadLogs(1);
+            } catch (error) {
+                this.error = error.message;
+            } finally {
+                this.loading = false;
+            }
+        },
+    },
+});
--- a/assets/vue/app/domain/system/application/store/statusStore.js
+++ b/assets/vue/app/domain/system/application/store/statusStore.js
@@ -0,0 +1,26 @@
+import { defineStore } from 'pinia';
+import { ApiStatusRepository } from '../../infrastructure/api/ApiStatusRepository';
+
+const statusRepository = new ApiStatusRepository();
+
+export const useStatusStore = defineStore('system-status', {
+    state: () => ({
+        status: null,
+        loading: false,
+        error: null,
+    }),
+
+    actions: {
+        async loadStatus() {
+            this.loading = true;
+            this.error = null;
+            try {
+                this.status = await statusRepository.getStatus();
+            } catch (e) {
+                this.error = e.message ?? 'Erreur lors du chargement du statut système';
+            } finally {
+                this.loading = false;
+            }
+        },
+    },
+});
--- a/assets/vue/app/domain/system/infrastructure/api/ApiStatusRepository.js
+++ b/assets/vue/app/domain/system/infrastructure/api/ApiStatusRepository.js
@@ -0,0 +1,13 @@
+export class ApiStatusRepository {
+    async getStatus() {
+        const response = await fetch('/api/system/status', {
+            headers: { Accept: 'application/json' },
+        });
+
+        if (!response.ok) {
+            throw new Error(`Erreur HTTP ${response.status}`);
+        }
+
+        return response.json();
+    }
+}
--- a/assets/vue/app/domain/system/presentation/components/ChaptersStatusCard.vue
+++ b/assets/vue/app/domain/system/presentation/components/ChaptersStatusCard.vue
@@ -0,0 +1,36 @@
+<template>
+    <StatusCard title="Chapitres" :icon="DocumentTextIcon">
+        <div class="flex items-baseline gap-2 mb-3">
+            <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.totalChapters }}</span>
+            <span class="text-sm text-gray-500">total</span>
+        </div>
+        <div class="mb-1 flex justify-between text-xs text-gray-500">
+            <span>{{ status.downloadedChapters }} téléchargés</span>
+            <span>{{ downloadedPercent }}%</span>
+        </div>
+        <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+            <div
+                class="h-full bg-green-500 rounded-full transition-all"
+                :style="{ width: downloadedPercent + '%' }" />
+        </div>
+        <p class="mt-1 text-xs text-gray-400">{{ status.pendingChapters }} en attente</p>
+    </StatusCard>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { DocumentTextIcon } from '@heroicons/vue/24/outline';
+import StatusCard from './StatusCard.vue';
+
+const props = defineProps({
+    status: {
+        type: Object,
+        required: true,
+    },
+});
+
+const downloadedPercent = computed(() => {
+    if (!props.status.totalChapters) return 0;
+    return Math.round((props.status.downloadedChapters / props.status.totalChapters) * 100);
+});
+</script>
--- a/assets/vue/app/domain/system/presentation/components/JobsStatusCard.vue
+++ b/assets/vue/app/domain/system/presentation/components/JobsStatusCard.vue
@@ -0,0 +1,104 @@
+<template>
+    <StatusCard title="Jobs" :icon="CpuChipIcon">
+        <!-- Onglets -->
+        <div class="flex gap-1 mb-3 border-b border-gray-200 dark:border-gray-700">
+            <button
+                v-for="tab in tabs"
+                :key="tab.key"
+                @click="activeTab = tab.key"
+                class="px-3 py-1.5 text-xs font-medium transition-colors"
+                :class="activeTab === tab.key
+                    ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400'
+                    : 'text-gray-500 hover:text-gray-700 dark:hover:text-gray-300'">
+                {{ tab.label }}
+            </button>
+        </div>
+
+        <!-- Contenu -->
+        <template v-if="activeTab === 'global'">
+            <div class="grid grid-cols-2 gap-2">
+                <Metric label="Total" :value="status.totalJobs" />
+                <Metric label="En cours" :value="status.inProgressJobs" color="blue" />
+                <Metric label="Terminés" :value="status.completedJobs" color="green" />
+                <Metric label="En attente" :value="status.pendingJobs" color="yellow" />
+                <Metric label="Échoués" :value="status.failedJobs" color="red" />
+            </div>
+        </template>
+
+        <template v-else-if="activeTab === '24h'">
+            <div class="grid grid-cols-2 gap-2">
+                <Metric label="Total" :value="status.totalJobsLast24h" />
+                <Metric label="Terminés" :value="status.completedJobsLast24h" color="green" />
+                <Metric label="Échoués" :value="status.failedJobsLast24h" color="red" />
+                <div class="col-span-2">
+                    <p class="text-xs text-gray-500 mb-1">Taux de succès</p>
+                    <span class="text-xl font-bold" :class="rateColor(status.successRateLast24h)">
+                        {{ status.successRateLast24h }}%
+                    </span>
+                </div>
+            </div>
+        </template>
+
+        <template v-else>
+            <div class="grid grid-cols-2 gap-2">
+                <Metric label="Total" :value="status.totalJobsLast7d" />
+                <Metric label="Terminés" :value="status.completedJobsLast7d" color="green" />
+                <Metric label="Échoués" :value="status.failedJobsLast7d" color="red" />
+                <div class="col-span-2">
+                    <p class="text-xs text-gray-500 mb-1">Taux de succès</p>
+                    <span class="text-xl font-bold" :class="rateColor(status.successRateLast7d)">
+                        {{ status.successRateLast7d }}%
+                    </span>
+                </div>
+            </div>
+        </template>
+    </StatusCard>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+import { CpuChipIcon } from '@heroicons/vue/24/outline';
+import StatusCard from './StatusCard.vue';
+
+defineProps({
+    status: {
+        type: Object,
+        required: true,
+    },
+});
+
+const activeTab = ref('global');
+
+const tabs = [
+    { key: 'global', label: 'Global' },
+    { key: '24h', label: '24h' },
+    { key: '7j', label: '7 jours' },
+];
+
+function rateColor(rate) {
+    if (rate >= 80) return 'text-green-600 dark:text-green-400';
+    if (rate >= 50) return 'text-yellow-600 dark:text-yellow-400';
+    return 'text-red-600 dark:text-red-400';
+}
+
+const Metric = {
+    props: {
+        label: String,
+        value: Number,
+        color: { type: String, default: 'gray' },
+    },
+    template: `
+        <div>
+            <p class="text-xs text-gray-500">{{ label }}</p>
+            <p class="text-lg font-semibold"
+               :class="{
+                 'text-gray-900 dark:text-white': color === 'gray',
+                 'text-green-600 dark:text-green-400': color === 'green',
+                 'text-red-600 dark:text-red-400': color === 'red',
+                 'text-yellow-600 dark:text-yellow-400': color === 'yellow',
+                 'text-blue-600 dark:text-blue-400': color === 'blue',
+               }">{{ value }}</p>
+        </div>
+    `,
+};
+</script>
--- a/assets/vue/app/domain/system/presentation/components/LogItem.vue
+++ b/assets/vue/app/domain/system/presentation/components/LogItem.vue
@@ -0,0 +1,131 @@
+<template>
+    <div class="border-t border-gray-200 dark:border-gray-700 py-4 px-6">
+        <!-- Ligne 1 : Titre manga + chapitre + badge statut + date + bouton supprimer -->
+        <div class="flex items-start justify-between gap-4">
+            <div class="flex items-baseline gap-2 min-w-0">
+                <span class="font-semibold text-gray-900 dark:text-gray-100 truncate">
+                    {{ log.context?.mangaTitle ?? 'Manga inconnu' }}
+                </span>
+                <span class="text-gray-400 dark:text-gray-500 text-sm shrink-0">•</span>
+                <span class="text-sm text-gray-600 dark:text-gray-400 shrink-0">
+                    Chapitre {{ log.context?.chapterNumber ?? '?' }}
+                </span>
+                <span
+                    :class="[
+                        'px-1.5 py-0.5 text-xs font-medium shrink-0',
+                        log.status === 'completed'
+                            ? 'bg-green-100 text-green-700 dark:bg-green-900/30 dark:text-green-400'
+                            : 'bg-red-100 text-red-700 dark:bg-red-900/30 dark:text-red-400'
+                    ]">
+                    {{ log.status === 'completed' ? 'Terminé' : 'Échec' }}
+                </span>
+            </div>
+            <div class="flex items-center gap-3 shrink-0">
+                <span class="text-xs text-gray-400 dark:text-gray-500">{{ formattedDate }}</span>
+                <button
+                    @click="$emit('delete', log.id)"
+                    class="text-gray-400 hover:text-red-500 dark:text-gray-500 dark:hover:text-red-400 transition-colors"
+                    title="Supprimer ce log">
+                    <TrashIcon class="w-4 h-4" />
+                </button>
+            </div>
+        </div>
+
+        <!-- Ligne 2 : Source + slug + durée -->
+        <div class="flex items-center justify-between mt-1 gap-4">
+            <div class="flex items-center gap-3 min-w-0 text-sm text-gray-500 dark:text-gray-400">
+                <!-- Domaine de la source (lien vers la page d'édition) -->
+                <RouterLink
+                    v-if="source"
+                    :to="{ name: 'scrapper-edit', params: { id: source.id } }"
+                    class="flex items-center gap-1 hover:text-blue-500 dark:hover:text-blue-400 transition-colors shrink-0">
+                    <GlobeAltIcon class="w-3.5 h-3.5" />
+                    <span class="font-mono">{{ cleanDomain }}</span>
+                </RouterLink>
+                <span v-else class="font-mono shrink-0">
+                    ID {{ log.context?.sourceId ?? '-' }}
+                </span>
+
+                <!-- Badge type de scraping -->
+                <span
+                    v-if="source?.scrapingType"
+                    :class="[
+                        'px-1.5 py-0.5 text-xs font-medium shrink-0',
+                        source.scrapingType === 'Javascript'
+                            ? 'bg-yellow-100 text-yellow-700 dark:bg-yellow-900/30 dark:text-yellow-400'
+                            : 'bg-blue-100 text-blue-700 dark:bg-blue-900/30 dark:text-blue-400'
+                    ]">
+                    {{ source.scrapingType }}
+                </span>
+
+                <!-- Slug utilisé -->
+                <span v-if="log.context?.slug" class="truncate text-gray-400 dark:text-gray-500">
+                    slug : <span class="font-mono">{{ log.context.slug }}</span>
+                </span>
+            </div>
+
+            <span v-if="duration !== null" class="text-xs text-gray-400 dark:text-gray-500 shrink-0">
+                {{ duration }}
+            </span>
+        </div>
+
+        <!-- Ligne 3 : Message d'erreur -->
+        <div v-if="log.error" class="mt-2">
+            <p
+                :class="[
+                    'text-sm font-mono text-red-600 dark:text-red-400',
+                    !expanded && isLong ? 'line-clamp-1' : ''
+                ]">
+                ↳ {{ log.error }}
+            </p>
+            <button
+                v-if="isLong"
+                @click="expanded = !expanded"
+                class="mt-1 text-xs text-gray-400 hover:text-gray-600 dark:hover:text-gray-300 transition-colors">
+                {{ expanded ? 'voir moins' : 'voir plus' }}
+            </button>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { GlobeAltIcon, TrashIcon } from '@heroicons/vue/24/outline';
+import { computed, ref } from 'vue';
+import { RouterLink } from 'vue-router';
+
+const props = defineProps({
+    log: {
+        type: Object,
+        required: true,
+    },
+    source: {
+        type: Object,
+        default: null,
+    },
+});
+
+defineEmits(['delete']);
+
+const expanded = ref(false);
+
+const isLong = computed(() => props.log.error && props.log.error.length > 120);
+
+const cleanDomain = computed(() => {
+    if (!props.source?.baseUrl) return null;
+    return props.source.baseUrl.replace(/^(https?:\/\/)?(www\.)?/, '').replace(/\/+$/, '');
+});
+
+const formattedDate = computed(() => {
+    if (!props.log.createdAt) return '';
+    const d = new Date(props.log.createdAt);
+    const pad = n => String(n).padStart(2, '0');
+    return `${pad(d.getDate())}/${pad(d.getMonth() + 1)}/${d.getFullYear()} ${pad(d.getHours())}:${pad(d.getMinutes())}`;
+});
+
+const duration = computed(() => {
+    if (!props.log.startedAt || !props.log.completedAt) return null;
+    const ms = new Date(props.log.completedAt) - new Date(props.log.startedAt);
+    if (ms < 0) return null;
+    return `${(ms / 1000).toLocaleString('fr-FR', { maximumFractionDigits: 1 })}s`;
+});
+</script>
--- a/assets/vue/app/domain/system/presentation/components/MangasStatusCard.vue
+++ b/assets/vue/app/domain/system/presentation/components/MangasStatusCard.vue
@@ -0,0 +1,33 @@
+<template>
+    <StatusCard title="Mangas" :icon="BookOpenIcon">
+        <div class="flex items-baseline gap-2 mb-3">
+            <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.totalMangas }}</span>
+            <span class="text-sm text-gray-500">total</span>
+            <span class="ml-auto text-sm text-blue-600 dark:text-blue-400">{{ status.monitoredMangas }} suivis</span>
+        </div>
+        <div class="flex flex-wrap gap-2">
+            <span
+                v-for="(count, label) in status.mangasByStatus"
+                :key="label"
+                class="px-2 py-0.5 text-xs rounded-full border border-gray-300 dark:border-gray-600 text-gray-600 dark:text-gray-400">
+                {{ label }}: {{ count }}
+            </span>
+            <span v-if="!hasStatuses" class="text-xs text-gray-400">Aucun statut disponible</span>
+        </div>
+    </StatusCard>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { BookOpenIcon } from '@heroicons/vue/24/outline';
+import StatusCard from './StatusCard.vue';
+
+const props = defineProps({
+    status: {
+        type: Object,
+        required: true,
+    },
+});
+
+const hasStatuses = computed(() => Object.keys(props.status.mangasByStatus ?? {}).length > 0);
+</script>
--- a/assets/vue/app/domain/system/presentation/components/SourcesStatusCard.vue
+++ b/assets/vue/app/domain/system/presentation/components/SourcesStatusCard.vue
@@ -0,0 +1,41 @@
+<template>
+    <StatusCard title="Sources" :icon="GlobeAltIcon">
+        <div class="flex items-baseline gap-2 mb-3">
+            <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.totalSources }}</span>
+            <span class="text-sm text-gray-500">sources configurées</span>
+        </div>
+        <div class="flex flex-wrap gap-2">
+            <span
+                v-for="(count, health) in status.sourcesByHealth"
+                :key="health"
+                class="px-2 py-0.5 text-xs rounded-full"
+                :class="healthBadgeClass(health)">
+                {{ health }}: {{ count }}
+            </span>
+            <span v-if="!hasSources" class="text-xs text-gray-400">Aucune source</span>
+        </div>
+    </StatusCard>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { GlobeAltIcon } from '@heroicons/vue/24/outline';
+import StatusCard from './StatusCard.vue';
+
+const props = defineProps({
+    status: {
+        type: Object,
+        required: true,
+    },
+});
+
+const hasSources = computed(() => Object.keys(props.status.sourcesByHealth ?? {}).length > 0);
+
+function healthBadgeClass(health) {
+    switch (health) {
+        case 'healthy': return 'bg-green-100 text-green-800 dark:bg-green-900 dark:text-green-200';
+        case 'unhealthy': return 'bg-red-100 text-red-800 dark:bg-red-900 dark:text-red-200';
+        default: return 'bg-gray-100 text-gray-700 dark:bg-gray-700 dark:text-gray-300';
+    }
+}
+</script>
--- a/assets/vue/app/domain/system/presentation/components/StatusCard.vue
+++ b/assets/vue/app/domain/system/presentation/components/StatusCard.vue
@@ -0,0 +1,22 @@
+<template>
+    <div class="bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg p-4">
+        <div class="flex items-center gap-2 mb-3">
+            <component :is="icon" v-if="icon" class="w-5 h-5 text-blue-500 shrink-0" />
+            <h3 class="text-sm font-semibold text-gray-700 dark:text-gray-300">{{ title }}</h3>
+        </div>
+        <slot />
+    </div>
+</template>
+
+<script setup>
+defineProps({
+    title: {
+        type: String,
+        required: true,
+    },
+    icon: {
+        type: [Object, Function],
+        default: null,
+    },
+});
+</script>
--- a/assets/vue/app/domain/system/presentation/components/StorageStatusCard.vue
+++ b/assets/vue/app/domain/system/presentation/components/StorageStatusCard.vue
@@ -0,0 +1,40 @@
+<template>
+    <StatusCard title="Stockage" :icon="CircleStackIcon">
+        <div class="flex items-baseline gap-2 mb-3">
+            <span class="text-3xl font-bold text-gray-900 dark:text-white">{{ status.storageUsedHuman }}</span>
+            <span class="text-sm text-gray-500">utilisés</span>
+        </div>
+        <div class="mb-1 flex justify-between text-xs text-gray-500">
+            <span>{{ status.storageFreeHuman }} libres</span>
+            <span>{{ usedPercent }}%</span>
+        </div>
+        <div class="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-full overflow-hidden">
+            <div
+                class="h-full rounded-full transition-all"
+                :class="usedPercent > 90 ? 'bg-red-500' : 'bg-blue-500'"
+                :style="{ width: usedPercent + '%' }" />
+        </div>
+        <p class="mt-1 text-xs text-gray-400">Total : {{ status.storageTotalHuman }}</p>
+        <p class="mt-1 text-xs text-gray-400 truncate" :title="status.storagePath">{{ status.storagePath }}</p>
+    </StatusCard>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { CircleStackIcon } from '@heroicons/vue/24/outline';
+import StatusCard from './StatusCard.vue';
+
+const props = defineProps({
+    status: {
+        type: Object,
+        required: true,
+    },
+});
+
+const diskUsedBytes = computed(() => props.status.storageTotalBytes - props.status.storageFreeBytes);
+
+const usedPercent = computed(() => {
+    if (!props.status.storageTotalBytes) return 0;
+    return Math.round((diskUsedBytes.value / props.status.storageTotalBytes) * 100);
+});
+</script>
--- a/assets/vue/app/domain/system/presentation/components/SystemInfoCard.vue
+++ b/assets/vue/app/domain/system/presentation/components/SystemInfoCard.vue
@@ -0,0 +1,32 @@
+<template>
+    <StatusCard title="Informations système" :icon="ServerIcon">
+        <dl class="space-y-2">
+            <div class="flex justify-between text-sm">
+                <dt class="text-gray-500">Version PHP</dt>
+                <dd class="font-medium text-gray-900 dark:text-white">{{ status.phpVersion }}</dd>
+            </div>
+            <div class="flex justify-between text-sm">
+                <dt class="text-gray-500">Généré le</dt>
+                <dd class="font-medium text-gray-900 dark:text-white">{{ formattedDate }}</dd>
+            </div>
+        </dl>
+    </StatusCard>
+</template>
+
+<script setup>
+import { computed } from 'vue';
+import { ServerIcon } from '@heroicons/vue/24/outline';
+import StatusCard from './StatusCard.vue';
+
+const props = defineProps({
+    status: {
+        type: Object,
+        required: true,
+    },
+});
+
+const formattedDate = computed(() => {
+    if (!props.status.generatedAt) return '';
+    return new Date(props.status.generatedAt).toLocaleString('fr-FR');
+});
+</script>
--- a/assets/vue/app/domain/system/presentation/pages/LogsPage.vue
+++ b/assets/vue/app/domain/system/presentation/pages/LogsPage.vue
@@ -0,0 +1,165 @@
+<template>
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
+
+        <div class="overflow-y-auto flex-1">
+            <section class="border-t border-gray-200 dark:border-gray-700">
+                <!-- Loading -->
+                <div v-if="isLoading" class="flex justify-center py-12">
+                    <div class="animate-spin h-10 w-10 border-b-2 border-blue-500 rounded-full"></div>
+                </div>
+
+                <!-- Error -->
+                <div v-else-if="hasError" class="px-6 py-8">
+                    <div class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 p-4">
+                        <div class="flex items-center">
+                            <ExclamationCircleIcon class="w-5 h-5 text-red-400 mr-2 shrink-0" />
+                            <p class="text-red-800 dark:text-red-200">{{ error }}</p>
+                        </div>
+                        <button
+                            @click="logsStore.loadLogs()"
+                            class="mt-3 px-4 py-2 bg-red-600 text-white hover:bg-red-700">
+                            Réessayer
+                        </button>
+                    </div>
+                </div>
+
+                <!-- Empty -->
+                <div v-else-if="!isLoading && logs.length === 0" class="flex flex-col items-center justify-center py-20 text-gray-400 dark:text-gray-500">
+                    <ExclamationCircleIcon class="w-12 h-12 mb-3" />
+                    <p class="text-base">Aucune erreur de scraping</p>
+                </div>
+
+                <!-- List -->
+                <template v-else>
+                    <LogItem
+                        v-for="log in logs"
+                        :key="log.id"
+                        :log="log"
+                        :source="getSource(log)"
+                        @delete="handleDelete" />
+                </template>
+            </section>
+
+            <!-- Pagination -->
+            <Pagination
+                v-if="totalPages > 1"
+                :current-page="currentPage"
+                :total-pages="totalPages"
+                :total="total"
+                :limit="limit"
+                :has-next-page="hasNextPage"
+                :has-previous-page="hasPreviousPage"
+                @page-change="logsStore.goToPage" />
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ArrowPathIcon, ExclamationCircleIcon, TrashIcon } from '@heroicons/vue/24/outline';
+import { BarsArrowDownIcon } from '@heroicons/vue/24/outline';
+import { storeToRefs } from 'pinia';
+import { computed, onMounted } from 'vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import Pagination from '../../../../shared/components/ui/Pagination.vue';
+import { useContentSourceStore } from '../../../setting/application/store/contentSourceStore';
+import { useLogsStore } from '../../application/store/logsStore';
+import LogItem from '../components/LogItem.vue';
+
+const logsStore = useLogsStore();
+const contentSourceStore = useContentSourceStore();
+const { sources } = storeToRefs(contentSourceStore);
+
+const {
+    logs,
+    loading: isLoading,
+    error,
+    currentPage,
+    totalPages,
+    total,
+    limit,
+    hasNextPage,
+    hasPreviousPage,
+    sortBy,
+    sortOrder,
+    statusFilter,
+} = storeToRefs(logsStore);
+
+const hasError = computed(() => !!error.value);
+
+onMounted(() => {
+    logsStore.loadLogs();
+    contentSourceStore.loadSources();
+});
+
+function getSource(log) {
+    const sourceId = log.context?.sourceId;
+    if (!sourceId) return null;
+    // eslint-disable-next-line eqeqeq
+    return sources.value.find(s => s.id == sourceId) ?? null;
+}
+
+const isSortSelected = (by, order) => sortBy.value === by && sortOrder.value === order;
+
+const STATUS_FILTERS = [
+    { key: 'failed',    label: 'Échecs' },
+    { key: 'completed', label: 'Terminés' },
+    { key: 'all',       label: 'Tous' },
+];
+
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Logs', class: 'text-sm font-medium' },
+        { type: 'label', text: `(${total.value})`, class: 'text-sm text-gray-400' },
+    ],
+    rightSection: [
+        ...STATUS_FILTERS.map(f => ({
+            type: 'button',
+            label: f.label,
+            active: statusFilter.value === f.key,
+            onClick: () => logsStore.setStatusFilter(f.key),
+        })),
+        { type: 'divider' },
+        {
+            type: 'dropdown',
+            icon: BarsArrowDownIcon,
+            label: 'Trier',
+            items: [
+                {
+                    label: 'Plus récent',
+                    isSelected: isSortSelected('createdAt', 'DESC'),
+                    onClick: () => logsStore.updateSort('createdAt', 'DESC'),
+                },
+                {
+                    label: 'Plus ancien',
+                    isSelected: isSortSelected('createdAt', 'ASC'),
+                    onClick: () => logsStore.updateSort('createdAt', 'ASC'),
+                },
+            ],
+        },
+        {
+            type: 'button',
+            icon: ArrowPathIcon,
+            label: 'Rafraîchir',
+            disabled: isLoading.value,
+            onClick: () => logsStore.loadLogs(),
+        },
+        {
+            type: 'button',
+            icon: TrashIcon,
+            label: 'Tout supprimer',
+            disabled: isLoading.value || total.value === 0,
+            onClick: handleDeleteAll,
+        },
+    ],
+}));
+
+async function handleDelete(id) {
+    await logsStore.deleteLog(id);
+}
+
+async function handleDeleteAll() {
+    if (!confirm('Supprimer tous les logs d\'erreur ? Cette action est irréversible.')) return;
+    await logsStore.deleteAllLogs();
+}
+</script>
--- a/assets/vue/app/domain/system/presentation/pages/StatusPage.vue
+++ b/assets/vue/app/domain/system/presentation/pages/StatusPage.vue
@@ -0,0 +1,71 @@
+<template>
+    <div class="flex flex-col h-full">
+        <Toolbar :config="toolbarConfig" />
+
+        <div class="overflow-y-auto flex-1">
+            <!-- Loading -->
+            <div v-if="loading" class="flex justify-center py-12">
+                <div class="animate-spin h-10 w-10 border-b-2 border-blue-500 rounded-full"></div>
+            </div>
+
+            <!-- Error -->
+            <div v-else-if="error" class="px-6 py-8">
+                <div class="bg-red-50 dark:bg-red-900 border border-red-200 dark:border-red-700 p-4 rounded">
+                    <div class="flex items-center">
+                        <ExclamationCircleIcon class="w-5 h-5 text-red-400 mr-2 shrink-0" />
+                        <p class="text-red-800 dark:text-red-200">{{ error }}</p>
+                    </div>
+                    <button
+                        @click="statusStore.loadStatus()"
+                        class="mt-3 px-4 py-2 bg-red-600 text-white hover:bg-red-700 rounded">
+                        Réessayer
+                    </button>
+                </div>
+            </div>
+
+            <!-- Données -->
+            <div v-else-if="status" class="grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-4 p-4">
+                <MangasStatusCard :status="status" />
+                <ChaptersStatusCard :status="status" />
+                <JobsStatusCard :status="status" />
+                <StorageStatusCard :status="status" />
+                <SourcesStatusCard :status="status" />
+                <SystemInfoCard :status="status" />
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+import { ArrowPathIcon, ExclamationCircleIcon } from '@heroicons/vue/24/outline';
+import { storeToRefs } from 'pinia';
+import { computed, onMounted } from 'vue';
+import Toolbar from '../../../../shared/components/ui/Toolbar.vue';
+import { useStatusStore } from '../../application/store/statusStore';
+import ChaptersStatusCard from '../components/ChaptersStatusCard.vue';
+import JobsStatusCard from '../components/JobsStatusCard.vue';
+import MangasStatusCard from '../components/MangasStatusCard.vue';
+import SourcesStatusCard from '../components/SourcesStatusCard.vue';
+import StorageStatusCard from '../components/StorageStatusCard.vue';
+import SystemInfoCard from '../components/SystemInfoCard.vue';
+
+const statusStore = useStatusStore();
+const { status, loading, error } = storeToRefs(statusStore);
+
+onMounted(() => statusStore.loadStatus());
+
+const toolbarConfig = computed(() => ({
+    leftSection: [
+        { type: 'label', text: 'Statut système', class: 'text-sm font-medium' },
+    ],
+    rightSection: [
+        {
+            type: 'button',
+            icon: ArrowPathIcon,
+            label: 'Rafraîchir',
+            disabled: loading.value,
+            onClick: () => statusStore.loadStatus(),
+        },
+    ],
+}));
+</script>
--- a/assets/vue/app/router/index.js
+++ b/assets/vue/app/router/index.js
@@ -3,30 +3,17 @@ import ActivityPage from '../domain/activity/presentation/pages/ActivityPage.vue
 import ConversionPage from '../domain/conversion/presentation/pages/ConversionPage.vue';
 import NewImportPage from '../domain/import/presentation/pages/NewImportPage.vue';
 import AddManga from '../domain/manga/presentation/pages/AddManga.vue';
+import DiscoverPage from '../domain/manga/presentation/pages/DiscoverPage.vue';
 import HomePage from '../domain/manga/presentation/pages/HomePage.vue';
 import MangaDetails from '../domain/manga/presentation/pages/MangaDetails.vue';
 import ChapterPage from '../domain/reader/presentation/pages/ChapterPage.vue';
 import ScrapperConfigurations from '../domain/setting/presentation/pages/ScrapperConfigurations.vue';
 import ScrapperEdit from '../domain/setting/presentation/pages/ScrapperEdit.vue';
 import UserPreferencesPage from '../domain/setting/presentation/pages/UserPreferencesPage.vue';
+import LogsPage from '../domain/system/presentation/pages/LogsPage.vue';
+import StatusPage from '../domain/system/presentation/pages/StatusPage.vue';
 import Layout from '../shared/components/layout/Layout.vue';

-// Placeholder component for new routes
-const PlaceholderComponent = {
-    props: {
-        title: {
-            type: String,
-            required: true
-        }
-    },
-    template: `
-    <div class="container mx-auto px-4 py-8">
-      <h1 class="text-2xl font-bold mb-4">{{ title }}</h1>
-      <p class="text-gray-600">Cette fonctionnalité sera bientôt disponible.</p>
-    </div>
-  `
-};
-
 const routes = [
    {
        path: '/',
@@ -64,18 +51,10 @@ const routes = [
                name: 'import',
                component: NewImportPage
            },
-            // Pages placeholder avec chargement différé
-            {
-                path: '/manga/import',
-                name: 'manga-import',
-                component: PlaceholderComponent,
-                props: { title: 'Import de bibliothèque' }
-            },
            {
                path: '/manga/discover',
                name: 'discover',
-                component: PlaceholderComponent,
-                props: { title: 'Découvrir' }
+                component: DiscoverPage
            },
            {
                path: '/convert',
@@ -90,21 +69,7 @@ const routes = [
            // Paramètres
            {
                path: '/settings',
-                name: 'settings',
-                component: PlaceholderComponent,
-                props: { title: 'Paramètres' }
-            },
-            {
-                path: '/settings/general',
-                name: 'settings-general',
-                component: PlaceholderComponent,
-                props: { title: 'Paramètres généraux' }
-            },
-            {
-                path: '/settings/folders',
-                name: 'settings-folders',
-                component: PlaceholderComponent,
-                props: { title: 'Gestion des dossiers' }
+                redirect: '/settings/scrappers',
            },
            {
                path: '/settings/scrappers',
@@ -129,34 +94,18 @@ const routes = [
            // Système
            {
                path: '/system',
-                name: 'system',
-                component: PlaceholderComponent,
-                props: { title: 'Système' }
+                redirect: '/system/status',
            },
            {
                path: '/system/status',
                name: 'system-status',
-                component: PlaceholderComponent,
-                props: { title: 'Status du système' }
-            },
-            {
-                path: '/system/backup',
-                name: 'system-backup',
-                component: PlaceholderComponent,
-                props: { title: 'Sauvegarde' }
+                component: StatusPage,
            },
            {
                path: '/system/logs',
                name: 'system-logs',
-                component: PlaceholderComponent,
-                props: { title: 'Journaux système' }
+                component: LogsPage,
            },
-            {
-                path: '/system/updates',
-                name: 'system-updates',
-                component: PlaceholderComponent,
-                props: { title: 'Mises à jour' }
-            }
        ]
    }
 ];
--- a/assets/vue/app/shared/components/layout/Layout.vue
+++ b/assets/vue/app/shared/components/layout/Layout.vue
@@ -1,5 +1,5 @@
 <template>
-    <div class="h-screen overflow-hidden bg-gray-50 dark:bg-gray-900 flex">
+    <div class="h-[100dvh] overflow-hidden bg-gray-50 dark:bg-gray-900 flex">
        <Header
            :show-menu-button="isReaderMode"
            @menu-click="toggleSidebar"
@@ -16,7 +16,7 @@
            headerStore.shouldShowHeader ? 'mt-16' : 'mt-0',
            isReaderMode ? '' : 'md:ml-60'
        ]" style="transition: margin-top 300ms ease-in-out;">
-            <RouterView></RouterView>
+            <RouterView class="flex-1 min-h-0"></RouterView>
        </main>
    </div>
 </template>
--- a/assets/vue/app/shared/components/layout/Sidebar.vue
+++ b/assets/vue/app/shared/components/layout/Sidebar.vue
@@ -78,11 +78,9 @@ import MenuGroup from './sidebar/MenuGroup.vue';
        {
            icon: Cog6ToothIcon,
            text: 'Paramètres',
-            to: '/settings',
+            to: '/settings/scrappers',
            id: 'settings',
            subItems: [
-                { icon: null, text: 'Général', to: '/settings/general' },
-                { icon: null, text: 'Dossiers', to: '/settings/folders' },
                { icon: null, text: 'Scrappers', to: '/settings/scrappers' },
                { icon: null, text: 'UI', to: '/settings/ui' }
            ]
@@ -90,13 +88,11 @@ import MenuGroup from './sidebar/MenuGroup.vue';
        {
            icon: ComputerDesktopIcon,
            text: 'Système',
-            to: '/system',
+            to: '/system/status',
            id: 'system',
            subItems: [
                { icon: null, text: 'Status', to: '/system/status' },
-                { icon: null, text: 'Backup', to: '/system/backup' },
                { icon: null, text: 'Logs', to: '/system/logs' },
-                { icon: null, text: 'Updates', to: '/system/updates' }
            ]
        }
    ];
--- a/assets/vue/app/shared/components/ui/FileUpload.vue
+++ b/assets/vue/app/shared/components/ui/FileUpload.vue
@@ -1,35 +1,23 @@
 <template>
  <div class="file-upload">
-    <label :for="inputId" class="block text-sm font-medium text-gray-700 mb-2">
+    <label :for="inputId" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
      {{ label }}
    </label>
    
    <div 
-      class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 border-dashed rounded-md"
-      :class="{ 'border-green-500 bg-green-50': isDragOver, 'hover:border-gray-400': !isDragOver }"
+      class="mt-1 flex justify-center px-6 pt-5 pb-6 border-2 border-gray-300 dark:border-gray-600 border-dashed "
+      :class="{ 'border-green-500 bg-green-50 dark:bg-green-900/20': isDragOver, 'hover:border-gray-400': !isDragOver }"
      @drop.prevent="handleDrop"
      @dragover.prevent="isDragOver = true"
      @dragleave.prevent="isDragOver = false"
    >
      <div class="space-y-1 text-center">
-        <svg 
-          class="mx-auto h-12 w-12 text-gray-400" 
-          stroke="currentColor" 
-          fill="none" 
-          viewBox="0 0 48 48"
-        >
-          <path 
-            d="M28 8H12a4 4 0 00-4 4v20m32-12v8m0 0v8a4 4 0 01-4 4H12a4 4 0 01-4-4v-4m32-4l-3.172-3.172a4 4 0 00-5.656 0L28 28M8 32l9.172-9.172a4 4 0 015.656 0L28 28m0 0l4 4m4-24h8m-4-4v8m-12 4h.02" 
-            stroke-width="2" 
-            stroke-linecap="round" 
-            stroke-linejoin="round" 
-          />
-        </svg>
+        <ArrowUpTrayIcon class="mx-auto h-12 w-12 text-gray-400 dark:text-gray-500" />
        
        <div class="flex text-sm text-gray-600">
          <label 
            :for="inputId" 
-            class="relative cursor-pointer bg-white rounded-md font-medium text-green-600 hover:text-green-500"
+            class="relative cursor-pointer font-medium text-green-600 hover:text-green-500"
          >
            <span>Sélectionner des fichiers</span>
            <input 
@@ -50,8 +38,8 @@
        </p>
        
        <div v-if="selectedFiles.length > 0" class="mt-4">
-          <h4 class="text-sm font-medium text-gray-700 mb-2">Fichiers sélectionnés :</h4>
-          <ul class="text-xs text-gray-600 space-y-1">
+          <h4 class="text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">Fichiers sélectionnés :</h4>
+          <ul class="text-xs text-gray-600 dark:text-gray-400 space-y-1">
            <li v-for="file in selectedFiles" :key="file.name" class="flex justify-between items-center">
              <span class="truncate">{{ file.name }}</span>
              <span class="text-gray-400">{{ formatFileSize(file.size) }}</span>
@@ -64,6 +52,7 @@
 </template>

 <script setup>
+import { ArrowUpTrayIcon } from '@heroicons/vue/24/outline';
 import { ref, computed, watch } from 'vue';

 const props = defineProps({
--- a/composer.json
+++ b/composer.json
@@ -3,57 +3,50 @@
    "type": "project",
    "license": "MIT",
    "description": "A minimal Symfony project recommended to create bare bones applications",
-    "minimum-stability": "stable",
+    "minimum-stability": "dev",
    "prefer-stable": true,
    "require": {
-        "php": ">=8.3.1",
+        "php": ">=8.4.0",
        "ext-ctype": "*",
        "ext-curl": "*",
        "ext-gd": "*",
        "ext-iconv": "*",
        "ext-zip": "*",
-        "api-platform/core": "^3.2",
-        "doctrine/dbal": "^3",
-        "doctrine/doctrine-bundle": "^2.11",
+        "api-platform/core": "^4.0",
+        "doctrine/dbal": "^4",
+        "doctrine/doctrine-bundle": "^3.0",
        "doctrine/doctrine-migrations-bundle": "^3.3",
-        "doctrine/orm": "^2.17",
+        "doctrine/orm": "^3.0",
        "guzzlehttp/guzzle": "^7.8",
        "intervention/image": "^3.7",
        "nelmio/cors-bundle": "^2.4",
        "phpdocumentor/reflection-docblock": "^5.3",
        "phpstan/phpdoc-parser": "^1.25",
        "ramsey/uuid": "^4.7",
-        "runtime/frankenphp-symfony": "^0.2.0",
-        "symfony/asset": "7.0.*",
-        "symfony/console": "7.0.*",
-        "symfony/css-selector": "7.0.*",
-        "symfony/doctrine-messenger": "7.0.*",
-        "symfony/dotenv": "7.0.*",
-        "symfony/expression-language": "7.0.*",
+        "symfony/asset": "8.0.*",
+        "symfony/console": "8.0.*",
+        "symfony/css-selector": "8.0.*",
+        "symfony/doctrine-messenger": "8.0.*",
+        "symfony/dotenv": "8.0.*",
+        "symfony/expression-language": "8.0.*",
        "symfony/flex": "^2",
-        "symfony/form": "7.0.*",
-        "symfony/framework-bundle": "7.0.*",
-        "symfony/http-client": "7.0.*",
-        "symfony/mercure-bundle": "^0.3.9",
-        "symfony/messenger": "7.0.*",
-        "symfony/mime": "7.0.*",
-        "symfony/monolog-bundle": "^3.10",
+        "symfony/framework-bundle": "8.0.*",
+        "symfony/http-client": "8.0.*",
+        "symfony/mercure-bundle": "^0.4",
+        "symfony/messenger": "8.0.*",
+        "symfony/mime": "8.0.*",
+        "symfony/monolog-bundle": "^4.0",
        "symfony/panther": "^2.1",
-        "symfony/property-access": "7.0.*",
-        "symfony/property-info": "7.0.*",
-        "symfony/runtime": "7.0.*",
-        "symfony/scheduler": "7.0.*",
-        "symfony/security-bundle": "7.0.*",
-        "symfony/serializer": "7.0.*",
-        "symfony/stimulus-bundle": "^2.17",
-        "symfony/twig-bundle": "7.0.*",
-        "symfony/ux-live-component": "^2.17",
-        "symfony/ux-react": "^2.23",
-        "symfony/ux-turbo": "^2.18",
-        "symfony/validator": "7.0.*",
+        "symfony/property-access": "8.0.*",
+        "symfony/property-info": "8.0.*",
+        "symfony/runtime": "8.0.*",
+        "symfony/scheduler": "8.0.*",
+        "symfony/security-bundle": "8.0.*",
+        "symfony/serializer": "8.0.*",
+        "symfony/twig-bundle": "8.0.*",
+        "symfony/validator": "8.0.*",
        "symfony/webpack-encore-bundle": "^2.1",
-        "symfony/yaml": "7.0.*",
-        "twig/extra-bundle": "^2.12|^3.0",
+        "symfony/yaml": "8.0.*",
        "twig/twig": "^2.12|^3.0",
        "vich/uploader-bundle": "^2.7"
    },
@@ -103,7 +96,7 @@
    "extra": {
        "symfony": {
            "allow-contrib": false,
-            "require": "7.0.*",
+            "require": "8.0.*",
            "docker": true
        }
    },
@@ -111,18 +104,18 @@
        "dama/doctrine-test-bundle": "^8.2",
        "dbrekelmans/bdi": "^1.3",
        "deployer/deployer": "^7.5",
-        "doctrine/doctrine-fixtures-bundle": "^3.5",
+        "doctrine/doctrine-fixtures-bundle": "^4.0",
        "friendsofphp/php-cs-fixer": "^3.48",
        "mtdowling/jmespath.php": "^2.7",
-        "phparkitect/phparkitect": "^0.3.33",
-        "phpmd/phpmd": "^2.15",
+        "phparkitect/phparkitect": "^0.8",
+        "phpmd/phpmd": "3.x-dev",
        "phpunit/phpunit": "^10.5",
-        "symfony/browser-kit": "7.0.*",
+        "symfony/browser-kit": "8.0.*",
        "symfony/maker-bundle": "^1.52",
-        "symfony/phpunit-bridge": "^7.0",
-        "symfony/stopwatch": "7.0.*",
-        "symfony/web-profiler-bundle": "7.0.*",
+        "symfony/phpunit-bridge": "^8.0",
+        "symfony/stopwatch": "8.0.*",
+        "symfony/web-profiler-bundle": "8.0.*",
        "zenstruck/browser": "^1.8",
-        "zenstruck/foundry": "^1.36"
+        "zenstruck/foundry": "^2.0"
    }
 }
--- a/composer.lock
+++ b/composer.lock
--- a/config/bundles.php
+++ b/config/bundles.php
@@ -14,13 +14,7 @@ return [
    Doctrine\Bundle\FixturesBundle\DoctrineFixturesBundle::class => ['dev' => true, 'test' => true],
    Symfony\Bundle\MonologBundle\MonologBundle::class => ['all' => true],
    Symfony\WebpackEncoreBundle\WebpackEncoreBundle::class => ['all' => true],
-    Symfony\UX\TwigComponent\TwigComponentBundle::class => ['all' => true],
-    Symfony\UX\LiveComponent\LiveComponentBundle::class => ['all' => true],
-    Symfony\UX\StimulusBundle\StimulusBundle::class => ['all' => true],
-    Twig\Extra\TwigExtraBundle\TwigExtraBundle::class => ['all' => true],
    Symfony\Bundle\MercureBundle\MercureBundle::class => ['all' => true],
-    Symfony\UX\Turbo\TurboBundle::class => ['all' => true],
    DAMA\DoctrineTestBundle\DAMADoctrineTestBundle::class => ['test' => true],
-    Symfony\UX\React\ReactBundle::class => ['all' => true],
    Vich\UploaderBundle\VichUploaderBundle::class => ['all' => true],
 ];
--- a/config/packages/api_platform.yaml
+++ b/config/packages/api_platform.yaml
@@ -23,8 +23,6 @@ api_platform:
        extra_properties:
            standard_put: true
            rfc_7807_compliant_errors: true
-    event_listeners_backward_compatibility_layer: false
-    keep_legacy_inflector: false
    mapping:
        paths: 
            - '%kernel.project_dir%/src/Domain/Scraping/Infrastructure/ApiPlatform/Dto'
@@ -34,5 +32,6 @@ api_platform:
            - '%kernel.project_dir%/src/Domain/Reader/Infrastructure/ApiPlatform/Resource'
            - '%kernel.project_dir%/src/Domain/Conversion/Infrastructure/ApiPlatform/Resource'
            - '%kernel.project_dir%/src/Domain/Shared/Infrastructure/ApiPlatform/Resource'
+            - '%kernel.project_dir%/src/Domain/System/Infrastructure/ApiPlatform/Resource'
    patch_formats:
        json: ['application/merge-patch+json']
--- a/config/packages/doctrine.yaml
+++ b/config/packages/doctrine.yaml
@@ -3,7 +3,6 @@ doctrine:
        connections:
            default:
                url: '%env(resolve:DATABASE_URL)%'
-                use_savepoints: true
                profiling_collect_backtrace: '%kernel.debug%'

        # IMPORTANT: You MUST configure your server version,
@@ -11,9 +10,6 @@ doctrine:
        #server_version: '16'

    orm:
-        auto_generate_proxy_classes: true
-        enable_lazy_ghost_objects: true
-        report_fields_where_declared: true
        validate_xml_mapping: true
        naming_strategy: doctrine.orm.naming_strategy.underscore_number_aware
        auto_mapping: true
@@ -40,7 +36,6 @@ when@test:
        dbal:
            connections:
                default:
-                    use_savepoints: true
                    # "TEST_TOKEN" is typically set by ParaTest
                    dbname_suffix: '_test%env(default::TEST_TOKEN)%'

--- a/config/packages/messenger.yaml
+++ b/config/packages/messenger.yaml
@@ -17,7 +17,6 @@ framework:
            command.bus:
                middleware:
                    - validation
-                    - doctrine_transaction
            event.bus:
                default_middleware: allow_no_handlers

@@ -38,10 +37,6 @@ framework:
            'App\Domain\Shared\Domain\Event\VolumeImported': events
            'App\Domain\Shared\Domain\Event\ChapterScraped': events

-            # Legacy messages (à garder si nécessaire)
-            'App\Message\DownloadChapter': commands
-            'App\Message\RefreshMetadata': commands
-            'App\Message\RefreshAndDownloadChapters': commands

 # when@test:
 #    framework:
--- a/config/packages/property_info.yaml
+++ b/config/packages/property_info.yaml
@@ -0,0 +1,3 @@
+framework:
+    property_info:
+        with_constructor_extractor: true
--- a/config/packages/twig_component.yaml
+++ b/config/packages/twig_component.yaml
@@ -1,5 +0,0 @@
-twig_component:
-    anonymous_template_directory: 'components/'
-    defaults:
-        # Namespace & directory for components
-        App\Twig\Components\: 'components/'
--- a/config/reference.php
+++ b/config/reference.php
--- a/config/routes.yaml
+++ b/config/routes.yaml
@@ -7,8 +7,3 @@ vue_app:
    requirements:
        req: "^(?!api/|legacy).*"

-controllers:
-    resource:
-        path: ../src/Controller/
-        namespace: App\Controller
-    type: attribute
--- a/config/routes/framework.yaml
+++ b/config/routes/framework.yaml
@@ -1,4 +1,4 @@
 when@dev:
    _errors:
-        resource: '@FrameworkBundle/Resources/config/routing/errors.xml'
+        resource: '@FrameworkBundle/Resources/config/routing/errors.php'
        prefix: /_error
--- a/config/routes/ux_live_component.yaml
+++ b/config/routes/ux_live_component.yaml
@@ -1,5 +0,0 @@
-live_component:
-    resource: '@LiveComponentBundle/config/routes.php'
-    prefix: '/_components'
-    # adjust prefix to add localization to your components
-    #prefix: '/{_locale}/_components'
--- a/config/routes/web_profiler.yaml
+++ b/config/routes/web_profiler.yaml
@@ -1,8 +1,8 @@
 when@dev:
    web_profiler_wdt:
-        resource: '@WebProfilerBundle/Resources/config/routing/wdt.xml'
+        resource: '@WebProfilerBundle/Resources/config/routing/wdt.php'
        prefix: /_wdt

    web_profiler_profiler:
-        resource: '@WebProfilerBundle/Resources/config/routing/profiler.xml'
+        resource: '@WebProfilerBundle/Resources/config/routing/profiler.php'
        prefix: /_profiler
--- a/config/services.yaml
+++ b/config/services.yaml
@@ -26,10 +26,6 @@ services:
    # add more service definitions when explicit configuration is needed
    # please note that last definitions always *replace* previous ones
    
-    App\EventListener\ExceptionListener:
-        tags:
-            - { name: kernel.event_listener, event: kernel.exception, method: onKernelException }
-            
    GuzzleHttp\Client:
        class: GuzzleHttp\Client
        arguments:
@@ -43,63 +39,11 @@ services:
                    protocols: [ 'http', 'https' ]
                    track_redirects: true
            
-    App\Service\MangaScraperService:
-        arguments:
-            $projectDir: '%kernel.project_dir%'
-            
-    App\Controller\TestController:
-        arguments:
-            $projectDir: '%kernel.project_dir%'
-    
    App\Domain\Conversion\Infrastructure\Service\ConversionService:
        arguments:
            $projectDir: '%kernel.project_dir%'
            
-    App\Service\CbrToCbzConverter:
-        arguments:
-            $projectDir: '%kernel.project_dir%'
-                
-    App\Manager\FileSystemManager:
-        arguments:
-            $projectDir: '%kernel.project_dir%'
-                
-    App\EventSubscriber\QueueStatusSubscriber:
-        tags:
-            - { name: kernel.event_subscriber }
-
-    App\Client\MangadexClient:
-        arguments:
-            $httpClient: '@GuzzleHttp\Client'
-            $clientId: '%env(MANGADEX_CLIENT_ID)%'
-            $clientSecret: '%env(MANGADEX_CLIENT_SECRET)%'
-            $username: '%env(MANGADEX_USERNAME)%'
-            $password: '%env(MANGADEX_PASSWORD)%'
-
-    App\Service\MangadexProvider:
-        arguments:
-            $client: '@App\Client\MangadexClient'
-            
-    # Scraper Service
-    App\Service\Scraper\HtmlScraper:
-        tags: [ 'app.scraper' ]
-
-    App\Service\Scraper\JavascriptScraper:
-        tags: [ 'app.scraper' ]
-
-    App\Service\Scraper\MangadexScraper:
-        tags: [ 'app.scraper' ]
-
-    # Scraper Factory
-    App\Service\Scraper\ScraperFactory:
-        arguments:
-            $scrapers: !tagged_iterator app.scraper
-
-    # Manga Scraper Service
-    App\Service\Scraper\MangaScraperService:
-        arguments:
-            $scraperFactory: '@App\Service\Scraper\ScraperFactory'
-
-    # New Scrapers Factory for Domain Layer
+    # Scrapers Factory for Domain Layer
    App\Domain\Scraping\Infrastructure\Service\ScraperFactory:
        arguments:
            $projectDir: '%kernel.project_dir%'
@@ -126,10 +70,10 @@ services:
        tags:
            - { name: messenger.message_handler, bus: command.bus }

-    App\Domain\Scraping\Domain\Contract\Service\ImageStorageInterface:
-        alias: App\Domain\Scraping\Infrastructure\Service\LocalImageStorage
+    App\Domain\Shared\Domain\Contract\ImageStorageInterface:
+        alias: App\Domain\Shared\Infrastructure\Service\ImageStorageManager

-    App\Domain\Scraping\Infrastructure\Service\LocalImageStorage:
+    App\Domain\Shared\Infrastructure\Service\ImageStorageManager:
        arguments:
            $storagePath: '%kernel.project_dir%/public/images'
            
@@ -180,16 +124,18 @@ services:
        tags:
            - { name: messenger.message_handler, bus: command.bus }

-    # Import Domain Services
-    App\Domain\Import\Infrastructure\Service\FilenameAnalyzer: ~
-    
-    App\Domain\Import\Domain\Service\FilenameAnalyzerInterface:
-        alias: App\Domain\Import\Infrastructure\Service\FilenameAnalyzer
+    # Scraper Health Check
+    App\Domain\Scraping\Domain\Contract\Repository\ContentSourceForHealthCheckInterface:
+        alias: App\Domain\Setting\Infrastructure\Persistence\Repository\DoctrineContentSourceForHealthCheckRepository

-    # Import Domain Query/Command Handlers
-    App\Domain\Import\Application\QueryHandler\AnalyzeFilenameQueryHandler: ~
-    App\Domain\Import\Application\CommandHandler\ImportFileCommandHandler: ~
+    App\Domain\Scraping\Domain\Contract\Repository\ContentSourceHealthRepositoryInterface:
+        alias: App\Domain\Setting\Infrastructure\Persistence\Repository\DoctrineContentSourceForHealthCheckRepository

-    # Import Domain API Platform Services
-    App\Domain\Import\Infrastructure\ApiPlatform\State\Processor\AnalyzeFilenameStateProcessor: ~
-    App\Domain\Import\Infrastructure\ApiPlatform\State\Processor\ImportFileStateProcessor: ~
+    # System Domain
+    App\Domain\System\Domain\Contract\Repository\SystemStatusRepositoryInterface:
+        alias: App\Domain\System\Infrastructure\Persistence\Repository\DoctrineSystemStatusRepository
+
+    App\Domain\System\Application\QueryHandler\GetSystemStatusQueryHandler:
+        arguments:
+            $mangaDataPath: '%env(resolve:MANGA_DATA_PATH)%'
+            $imagesStoragePath: '%kernel.project_dir%/public/images'
--- a/config/services_test.yaml
+++ b/config/services_test.yaml
@@ -12,7 +12,7 @@ services:
        class: 'App\Tests\Domain\Scraping\Adapter\InMemoryScrapingJobRepository'
        public: true

-    App\Domain\Scraping\Domain\Contract\Service\ImageStorageInterface:
+    App\Domain\Shared\Domain\Contract\ImageStorageInterface:
        class: 'App\Tests\Domain\Scraping\Adapter\InMemoryImageStorage'
        public: true

--- a/deploy.php
+++ b/deploy.php
@@ -1,4 +1,5 @@
 <?php
+
 namespace Deployer;

 require 'recipe/symfony.php';
@@ -33,15 +34,16 @@ task('deploy:prepare_dirs', function () {
 // --user assure que vendor/ appartient au user deploy et non root
 // Skip si composer.lock inchangé et vendor/ déjà populé (hard-linké depuis la release précédente)
 task('deploy:vendors', function () {
-    $releaseDir  = get('release_path');
+    $releaseDir = get('release_path');
    $previousDir = get('previous_release');

-    if ($previousDir !== null) {
-        $lockUnchanged   = test("diff -q $previousDir/composer.lock $releaseDir/composer.lock > /dev/null 2>&1");
+    if (null !== $previousDir) {
+        $lockUnchanged = test("diff -q $previousDir/composer.lock $releaseDir/composer.lock > /dev/null 2>&1");
        $vendorPopulated = test("[ -d $releaseDir/vendor/composer ]");

        if ($lockUnchanged && $vendorPopulated) {
            writeln('<info>deploy:vendors skipped — composer.lock unchanged</info>');
+
            return;
        }
    }
@@ -56,23 +58,23 @@ task('deploy:vendors', function () {
 //   3. Cache npm et webpack persistants entre les releases
 desc('Build Webpack Encore assets');
 task('webpack_encore:build', function () {
-    $sharedDir          = '/srv/mangarr/shared';
+    $sharedDir = '/srv/mangarr/shared';
    $sharedWebpackCache = "$sharedDir/webpack_cache";
-    $sharedNodeModules  = "$sharedDir/node_modules";
-    $sharedNpmCache     = "$sharedDir/npm_cache";
+    $sharedNodeModules = "$sharedDir/node_modules";
+    $sharedNpmCache = "$sharedDir/npm_cache";

    run("mkdir -p $sharedWebpackCache $sharedNodeModules $sharedNpmCache");

-    $releaseDir  = get('release_path');
+    $releaseDir = get('release_path');
    $previousDir = get('previous_release'); // null au 1er déploiement

    // --- COUCHE 1 : skip total si aucun fichier front-end n'a changé ---
-    if ($previousDir !== null) {
+    if (null !== $previousDir) {
        $watchList = ['assets', 'templates', 'package.json', 'package-lock.json',
-                      'webpack.config.js', 'postcss.config.js', 'tailwind.config.js'];
+            'webpack.config.js', 'postcss.config.js', 'tailwind.config.js'];

        $diffChecks = implode(' && ', array_map(
-            fn($p) => "diff -rq --no-dereference $previousDir/$p $releaseDir/$p > /dev/null 2>&1",
+            fn ($p) => "diff -rq --no-dereference $previousDir/$p $releaseDir/$p > /dev/null 2>&1",
            $watchList
        ));

@@ -81,15 +83,16 @@ task('webpack_encore:build', function () {
        if ($hasPreviousBuild && test("($diffChecks)")) {
            run("cp -al $previousDir/public/build $releaseDir/public/build");
            writeln('<info>webpack_encore:build skipped — no front-end files changed</info>');
+
            return;
        }
    }

    // --- COUCHE 2 : skip npm install si package-lock.json inchangé ---
    $needsNpmInstall = true;
-    if ($previousDir !== null) {
+    if (null !== $previousDir) {
        $lockUnchanged = test("diff -q $previousDir/package-lock.json $releaseDir/package-lock.json > /dev/null 2>&1");
-        $nmPopulated   = test("[ -d $sharedNodeModules/.bin ]");
+        $nmPopulated = test("[ -d $sharedNodeModules/.bin ]");
        if ($lockUnchanged && $nmPopulated) {
            $needsNpmInstall = false;
        }
--- a/frankenphp/worker.Caddyfile
+++ b/frankenphp/worker.Caddyfile
@@ -1,4 +1,3 @@
 worker {
 	file ./public/index.php
-	env APP_RUNTIME Runtime\FrankenPhpSymfony\Runtime
 }
--- a/migrations/Version20260315221706.php
+++ b/migrations/Version20260315221706.php
@@ -0,0 +1,41 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20260315221706 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return '';
+    }
+
+    public function up(Schema $schema): void
+    {
+        // this up() migration is auto-generated, please modify it to your needs
+        $this->addSql('ALTER TABLE content_source ADD test_slug VARCHAR(255) DEFAULT NULL');
+        $this->addSql('ALTER TABLE content_source ADD test_chapter_number DOUBLE PRECISION DEFAULT NULL');
+        $this->addSql('ALTER TABLE content_source ADD health_status VARCHAR(20) DEFAULT \'unknown\' NOT NULL');
+        $this->addSql('ALTER TABLE content_source ADD health_last_tested_at TIMESTAMP(0) WITHOUT TIME ZONE DEFAULT NULL');
+        $this->addSql('ALTER TABLE content_source ADD health_last_error TEXT DEFAULT NULL');
+        $this->addSql('COMMENT ON COLUMN content_source.health_last_tested_at IS \'(DC2Type:datetime_immutable)\'');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('CREATE SCHEMA public');
+        $this->addSql('ALTER TABLE content_source DROP test_slug');
+        $this->addSql('ALTER TABLE content_source DROP test_chapter_number');
+        $this->addSql('ALTER TABLE content_source DROP health_status');
+        $this->addSql('ALTER TABLE content_source DROP health_last_tested_at');
+        $this->addSql('ALTER TABLE content_source DROP health_last_error');
+    }
+}
--- a/migrations/Version20260326165659.php
+++ b/migrations/Version20260326165659.php
@@ -0,0 +1,97 @@
+<?php
+
+declare(strict_types=1);
+
+namespace DoctrineMigrations;
+
+use Doctrine\DBAL\Schema\Schema;
+use Doctrine\Migrations\AbstractMigration;
+
+/**
+ * Auto-generated Migration: Please modify to your needs!
+ */
+final class Version20260326165659 extends AbstractMigration
+{
+    public function getDescription(): string
+    {
+        return 'Migrate manga.genres column from PHP-serialized array to JSON';
+    }
+
+    public function preUp(Schema $schema): void
+    {
+        // Convert existing PHP-serialized data to JSON before changing the column type
+        $rows = $this->connection->fetchAllAssociative('SELECT id, genres FROM manga WHERE genres IS NOT NULL');
+        foreach ($rows as $row) {
+            $raw = $row['genres'];
+            // Skip if already valid JSON
+            json_decode($raw);
+            if (json_last_error() === JSON_ERROR_NONE) {
+                continue;
+            }
+            // Unserialize PHP format and re-encode as JSON
+            $value = @unserialize($raw);
+            if ($value === false && $raw !== 'b:0;') {
+                $value = [];
+            }
+            $this->connection->executeStatement(
+                'UPDATE manga SET genres = :json WHERE id = :id',
+                ['json' => json_encode($value), 'id' => $row['id']]
+            );
+        }
+    }
+
+    public function up(Schema $schema): void
+    {
+        $this->addSql('COMMENT ON COLUMN api_token.expires_at IS \'\'');
+        $this->addSql('COMMENT ON COLUMN content_source.health_last_tested_at IS \'\'');
+        $this->addSql('COMMENT ON COLUMN failed_job.failed_at IS \'\'');
+        $this->addSql('COMMENT ON COLUMN job.created_at IS \'\'');
+        $this->addSql('COMMENT ON COLUMN job.started_at IS \'\'');
+        $this->addSql('COMMENT ON COLUMN job.completed_at IS \'\'');
+        $this->addSql('ALTER TABLE manga ALTER genres TYPE JSON USING genres::json');
+        $this->addSql('COMMENT ON COLUMN manga.genres IS \'\'');
+        $this->addSql('COMMENT ON COLUMN manga.created_at IS \'\'');
+        $this->addSql('COMMENT ON COLUMN manga.last_monitoring_check IS \'\'');
+        $this->addSql('COMMENT ON COLUMN manga_preferred_sources.created_at IS \'\'');
+        $this->addSql('COMMENT ON COLUMN manga_preferred_sources.updated_at IS \'\'');
+        $this->addSql('COMMENT ON COLUMN source.created_at IS \'\'');
+        $this->addSql('COMMENT ON COLUMN source.updated_at IS \'\'');
+        $this->addSql('DROP INDEX idx_75ea56e0e3bd61ce');
+        $this->addSql('DROP INDEX idx_75ea56e0fb7336f0');
+        $this->addSql('DROP INDEX idx_75ea56e016ba31db');
+        $this->addSql('ALTER TABLE messenger_messages ALTER id DROP DEFAULT');
+        $this->addSql('ALTER TABLE messenger_messages ALTER id ADD GENERATED BY DEFAULT AS IDENTITY');
+        $this->addSql('COMMENT ON COLUMN messenger_messages.created_at IS \'\'');
+        $this->addSql('COMMENT ON COLUMN messenger_messages.available_at IS \'\'');
+        $this->addSql('COMMENT ON COLUMN messenger_messages.delivered_at IS \'\'');
+        $this->addSql('CREATE INDEX IDX_75EA56E0FB7336F0E3BD61CE16BA31DBBF396750 ON messenger_messages (queue_name, available_at, delivered_at, id)');
+    }
+
+    public function down(Schema $schema): void
+    {
+        // this down() migration is auto-generated, please modify it to your needs
+        $this->addSql('COMMENT ON COLUMN api_token.expires_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('COMMENT ON COLUMN content_source.health_last_tested_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('COMMENT ON COLUMN failed_job.failed_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('COMMENT ON COLUMN job.created_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('COMMENT ON COLUMN job.started_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('COMMENT ON COLUMN job.completed_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('ALTER TABLE manga ALTER genres TYPE TEXT');
+        $this->addSql('COMMENT ON COLUMN manga.genres IS \'(DC2Type:array)\'');
+        $this->addSql('COMMENT ON COLUMN manga.created_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('COMMENT ON COLUMN manga.last_monitoring_check IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('COMMENT ON COLUMN manga_preferred_sources.created_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('COMMENT ON COLUMN manga_preferred_sources.updated_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('DROP INDEX IDX_75EA56E0FB7336F0E3BD61CE16BA31DBBF396750');
+        $this->addSql('ALTER TABLE messenger_messages ALTER id SET DEFAULT nextval(\'messenger_messages_id_seq\'::regclass)');
+        $this->addSql('ALTER TABLE messenger_messages ALTER id DROP IDENTITY');
+        $this->addSql('COMMENT ON COLUMN messenger_messages.created_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('COMMENT ON COLUMN messenger_messages.available_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('COMMENT ON COLUMN messenger_messages.delivered_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('CREATE INDEX idx_75ea56e0e3bd61ce ON messenger_messages (available_at)');
+        $this->addSql('CREATE INDEX idx_75ea56e0fb7336f0 ON messenger_messages (queue_name)');
+        $this->addSql('CREATE INDEX idx_75ea56e016ba31db ON messenger_messages (delivered_at)');
+        $this->addSql('COMMENT ON COLUMN source.created_at IS \'(DC2Type:datetime_immutable)\'');
+        $this->addSql('COMMENT ON COLUMN source.updated_at IS \'(DC2Type:datetime_immutable)\'');
+    }
+}
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -2,26 +2,15 @@
    "devDependencies": {
        "@babel/core": "^7.17.0",
        "@babel/preset-env": "^7.16.0",
-        "@babel/preset-react": "^7.26.3",
        "@headlessui/vue": "^1.7.23",
        "@heroicons/vue": "^2.2.0",
-        "@hotwired/stimulus": "^3.0.0",
-        "@hotwired/turbo": "^7.1.1 || ^8.0",
-        "@symfony/stimulus-bridge": "^3.2.0",
-        "@symfony/ux-live-component": "file:vendor/symfony/ux-live-component/assets",
-        "@symfony/ux-react": "file:vendor/symfony/ux-react/assets",
-        "@symfony/ux-turbo": "file:vendor/symfony/ux-turbo/assets",
        "@symfony/webpack-encore": "^4.0.0",
        "@vue/compiler-sfc": "^3.5.13",
        "core-js": "^3.23.0",
-        "daisyui": "^4.4.2",
        "pinia": "^3.0.1",
-        "react": "^18.0",
-        "react-dom": "^18.0",
        "regenerator-runtime": "^0.13.9",
        "sass": "^1.59.3",
        "sass-loader": "^13.2.0",
-        "stimulus-use": "^0.52.2",
        "vue": "^3.5.13",
        "vue-loader": "^17.4.2",
        "vue-router": "^4.5.0",
@@ -41,18 +30,12 @@
        "@fortawesome/fontawesome-free": "^6.5.2",
        "@fortawesome/fontawesome-svg-core": "^6.7.2",
        "@fortawesome/free-solid-svg-icons": "^6.7.2",
-        "@fortawesome/react-fontawesome": "^0.2.2",
        "@tanstack/vue-query": "^5.71.0",
-        "alpinejs": "^3.13.3",
        "autoprefixer": "^10.4.14",
        "axios": "^1.7.9",
-        "bootstrap": "^5.3.3",
        "postcss-loader": "^7.1.0",
        "puppeteer": "^22.10.0",
-        "react-router-dom": "^7.1.5",
-        "sortablejs": "^1.15.2",
        "tailwindcss": "^3.2.7",
-        "vue-i18n": "^11.3.0",
-        "vuedraggable": "^2.24.3"
+        "vue-i18n": "^11.3.0"
    }
 }
--- a/phparkitect.php
+++ b/phparkitect.php
@@ -11,7 +11,7 @@ use Arkitect\Expression\ForClasses\ResideInOneOfTheseNamespaces;
 use Arkitect\Rules\Rule;

 return static function (Config $config): void {
-    $domainClassSet = ClassSet::fromDir(__DIR__ . '/src/Domain');
+    $domainClassSet = ClassSet::fromDir(__DIR__.'/src/Domain');
    $businessDomains = ['Manga', 'Reader', 'Scraping', 'Conversion'];

    // Classes PHP standards et utilitaires
@@ -29,7 +29,7 @@ return static function (Config $config): void {
    // Dépendances externes autorisées
    $externalDependencies = [
        'Symfony\Component\Messenger',
-        'Ramsey\Uuid'
+        'Ramsey\Uuid',
    ];

    // Règle pour le namespace cohérent
@@ -72,7 +72,7 @@ return static function (Config $config): void {
        // Interdiction explicite pour l'Application d'accéder à l'Infrastructure
        $rules[] = Rule::allClasses()
            ->that(new ResideInOneOfTheseNamespaces("App\Domain\\$domain\Application"))
-            ->should(new NotDependsOnTheseNamespaces("App\Domain\\$domain\Infrastructure"))
+            ->should(new NotDependsOnTheseNamespaces(["App\Domain\\$domain\Infrastructure"]))
            ->because("la couche Application de $domain ne doit jamais dépendre de l'Infrastructure, même au sein de son propre domaine");
    }

--- a/src/ApiResource/.gitignore
+++ b/src/ApiResource/.gitignore
--- a/src/Client/MangadexClient.php
+++ b/src/Client/MangadexClient.php
@@ -1,86 +0,0 @@
-<?php
-
-namespace App\Client;
-
-use App\Interface\ClientInterface;
-use GuzzleHttp\ClientInterface as GuzzleInterface;
-
-class MangadexClient implements ClientInterface
-{
-    private const AUTHENTICATION_URL = 'https://auth.mangadex.org/realms/mangadex/protocol/openid-connect/token';
-    private const API_URL = 'https://api.mangadex.org';
-    private GuzzleInterface $httpClient;
-    private string $clientId;
-    private string $clientSecret;
-    private string $username;
-    private string $password;
-    private ?string $accessToken = null;
-    private ?string $refreshToken = null;
-
-    public function __construct(GuzzleInterface $httpClient, string $clientId, string $clientSecret, string $username, string $password)
-    {
-        $this->httpClient = $httpClient;
-        $this->clientId = $clientId;
-        $this->clientSecret = $clientSecret;
-        $this->username = $username;
-        $this->password = $password;
-        $this->authenticate();
-    }
-
-    public function authenticate(): void
-    {
-        $response = $this->httpClient->request('POST', self::AUTHENTICATION_URL, [
-            'form_params' => [
-                'grant_type' => 'password',
-                'username' => $this->username,
-                'password' => $this->password,
-                'client_id' => $this->clientId,
-                'client_secret' => $this->clientSecret,
-            ],
-        ]);
-
-        $data = json_decode($response->getBody()->getContents(), true);
-        $this->accessToken = $data['access_token'];
-        $this->refreshToken = $data['refresh_token'];
-    }
-
-    public function refresh(): void
-    {
-        $response = $this->httpClient->request('POST', self::AUTHENTICATION_URL, [
-            'form_params' => [
-                'grant_type' => 'refresh_token',
-                'refresh_token' => $this->refreshToken,
-                'client_id' => $this->clientId,
-                'client_secret' => $this->clientSecret,
-            ],
-        ]);
-
-        $data = json_decode($response->getBody()->getContents(), true);
-        $this->accessToken = $data['access_token'];
-    }
-
-    private function request(string $method, string $endpoint, array $options = []): array
-    {
-        $options['headers']['Authorization'] = 'Bearer ' . $this->accessToken;
-
-        $response = $this->httpClient->request($method, self::API_URL . $endpoint, $options);
-
-        if ($response->getStatusCode() === 429) {
-            $this->refresh();
-            $options['headers']['Authorization'] = 'Bearer ' . $this->accessToken;
-            $response = $this->httpClient->request($method, self::API_URL . $endpoint, $options);
-        }
-
-        return json_decode($response->getBody()->getContents(), true);
-    }
-
-    public function get(string $endpoint, array $params = []): array
-    {
-        return $this->request('GET', $endpoint, ['query' => $params]);
-    }
-
-    public function post(string $endpoint, array $data): array
-    {
-        return $this->request('POST', $endpoint, ['json' => $data]);
-    }
-}
--- a/src/Command/SendTestNotificationCommand.php
+++ b/src/Command/SendTestNotificationCommand.php
@@ -18,7 +18,7 @@ use Symfony\Component\Console\Output\OutputInterface;
 class SendTestNotificationCommand extends Command
 {
    public function __construct(
-        private readonly NotificationInterface $notification
+        private readonly NotificationInterface $notification,
    ) {
        parent::__construct();
    }
@@ -38,14 +38,15 @@ class SendTestNotificationCommand extends Command
        $allowed = ['info', 'success', 'error', 'warning'];
        if (!in_array($type, $allowed, true)) {
            $output->writeln(sprintf('<error>Type invalide "%s". Valeurs acceptées : %s</error>', $type, implode(', ', $allowed)));
+
            return Command::FAILURE;
        }

        match ($type) {
            'success' => $this->notification->sendSuccess($message),
-            'error'   => $this->notification->sendError($message),
+            'error' => $this->notification->sendError($message),
            'warning' => $this->notification->sendWarning($message),
-            default   => $this->notification->sendInfo($message),
+            default => $this->notification->sendInfo($message),
        };

        $output->writeln(sprintf('<info>[%s] Notification envoyée : %s</info>', strtoupper($type), $message));
--- a/src/Controller/ActivityController.php
+++ b/src/Controller/ActivityController.php
@@ -1,120 +0,0 @@
-<?php
-
-namespace App\Controller;
-
-use App\Manager\Toolbar\Factory\ToolbarFactory;
-use App\Manager\ToolbarManager;
-use App\Message\DownloadChapter;
-use App\Repository\ChapterRepository;
-use Doctrine\DBAL\Connection;
-use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\JsonResponse;
-use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\Messenger\Envelope;
-use Symfony\Component\Routing\Annotation\Route;
-
-class ActivityController extends AbstractController
-{
-    public function __construct(
-        private readonly Connection        $connection,
-        private readonly ChapterRepository $chapterRepository,
-        private readonly ToolbarFactory    $toolbarFactory
-    ) {
-
-    }
-
-    #[Route('/activity', name: 'app_activity')]
-    public function index(): Response
-    {
-        $queueStatus = $this->getQueueStatus();
-        $decodedPending = $this->decodeMessages($queueStatus['pending']);
-        $decodedProcessing = $this->decodeMessages($queueStatus['processing']);
-
-        $status = array_merge(
-            $this->buildStatusActivity($decodedPending),
-            $this->buildStatusActivity($decodedProcessing)
-        );
-
-        return $this->render('activity/index.html.twig', [
-            'controller_name' => 'ActivityController',
-            'status' => $status,
-            'toolbar' => $this->toolbarFactory->createToolbar('activity')->getGroups(),
-        ]);
-    }
-
-    #[Route('/activity/status', name: 'app_activity_status', methods: ['GET'])]
-    public function getStatus(): JsonResponse
-    {
-        $queueStatus = $this->getQueueStatus();
-        $decodedPending = $this->decodeMessages($queueStatus['pending']);
-        $decodedProcessing = $this->decodeMessages($queueStatus['processing']);
-        $status = array_merge(
-            $this->buildStatusActivity($decodedPending),
-            $this->buildStatusActivity($decodedProcessing)
-        );
-
-        return new JsonResponse($status);
-    }
-
-    //    TODO refactorer ce code avec celui du QueueStatusSubscriber
-    private function getQueueStatus(): array
-    {
-        // Requête pour récupérer les messages en attente
-        $sqlPending = 'SELECT * FROM messenger_messages WHERE queue_name = :queue AND available_at IS NULL';
-        $pending = $this->connection->fetchAllAssociative($sqlPending, ['queue' => 'default']);
-
-        // Requête pour récupérer les messages en cours de traitement
-        $sqlProcessing = 'SELECT * FROM messenger_messages WHERE queue_name = :queue AND available_at IS NOT NULL';
-        $processing = $this->connection->fetchAllAssociative($sqlProcessing, ['queue' => 'default']);
-
-        return [
-            'pending' => $pending,
-            'processing' => $processing
-        ];
-    }
-
-    private function buildStatusActivity(array $activity): array
-    {
-        $status = [];
-        foreach ($activity as $envelope) {
-            $envelope = $envelope['body'];
-            if ($envelope instanceof Envelope) {
-                if (!$envelope->getMessage() instanceof DownloadChapter) {
-                    continue;
-                }
-
-                $chapter = $this->chapterRepository->find($envelope->getMessage()->getChapterId());
-                $manga = $chapter->getManga();
-                $status[] = [
-                    'manga' => $manga->getTitle(),
-                    'volume' => $chapter->getVolume(),
-                    'chapter' => $chapter->getNumber(),
-                    'chapterId' => $chapter->getId(),
-                    'title' => $chapter->getTitle(),
-                ];
-            }
-        }
-
-        return $status;
-    }
-
-    private function decodeMessages(array $messages): array
-    {
-        $decodedMessages = [];
-
-        foreach ($messages as $message) {
-            $decodedMessages[] = [
-                'id' => $message['id'],
-                'body' => $this->decodeMessageBody($message['body']),
-                'headers' => json_decode($message['headers'], true),
-            ];
-        }
-
-        return $decodedMessages;
-    }
-
-    private function decodeMessageBody(string $body)
-    {
-        return unserialize(stripcslashes($body));
-    }
-}
--- a/src/Controller/CalendarController.php
+++ b/src/Controller/CalendarController.php
@@ -1,18 +0,0 @@
-<?php
-
-namespace App\Controller;
-
-use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\Routing\Attribute\Route;
-
-class CalendarController extends AbstractController
-{
-    #[Route('/calendar', name: 'app_calendar')]
-    public function index(): Response
-    {
-        return $this->render('calendar/index.html.twig', [
-            'controller_name' => 'CalendarController',
-        ]);
-    }
-}
--- a/src/Controller/ConversionController.php
+++ b/src/Controller/ConversionController.php
@@ -1,64 +0,0 @@
-<?php
-
-namespace App\Controller;
-
-use App\Service\CbrToCbzConverter;
-use App\Service\NotificationService;
-use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\BinaryFileResponse;
-use Symfony\Component\HttpFoundation\File\UploadedFile;
-use Symfony\Component\HttpFoundation\Request;
-use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\HttpFoundation\ResponseHeaderBag;
-use Symfony\Component\Routing\Annotation\Route;
-
-class ConversionController extends AbstractController
-{
-    public function __construct(
-        private readonly CbrToCbzConverter $cbrToCbzConverter,
-        private readonly NotificationService $notificationService
-    ) {
-    }
-
-    #[Route('/convert', name: 'app_convert')]
-    public function convert(Request $request): Response
-    {
-        if ($request->isMethod('POST')) {
-            /** @var UploadedFile $file */
-            $file = $request->files->get('file');
-
-            if ($file && $file->getClientOriginalExtension() === 'cbr') {
-                $originalFileName = pathinfo($file->getClientOriginalName(), PATHINFO_FILENAME);
-                $tempFilePath = $file->getPathname();
-
-                try {
-                    $cbzPath = $this->cbrToCbzConverter->convert($tempFilePath);
-
-                    $response = new BinaryFileResponse($cbzPath);
-                    $response->setContentDisposition(
-                        ResponseHeaderBag::DISPOSITION_ATTACHMENT,
-                        $originalFileName . '.cbz'
-                    );
-                    $response->headers->set('Content-Type', 'application/x-cbz');
-                    $response->headers->set('Turbo-Visit-Control', 'reload');
-
-                    $response->deleteFileAfterSend(true);
-
-                    return $response;
-                } catch (\Exception $e) {
-                    $this->notificationService->sendUpdate([
-                        'status' => 'error',
-                        'message' => 'Une erreur est survenue lors de la conversion : ' . $e->getMessage()
-                    ]);
-                }
-            } else {
-                $this->notificationService->sendUpdate([
-                    'status' => 'error',
-                    'message' => 'Veuillez sélectionner un fichier CBR valide.'
-                ]);
-            }
-        }
-
-        return $this->render('conversion/index.html.twig');
-    }
-}
--- a/src/Controller/ImportController.php
+++ b/src/Controller/ImportController.php
@@ -1,220 +0,0 @@
-<?php
-
-namespace App\Controller;
-
-use App\Manager\FileSystemManager;
-use App\Repository\ChapterRepository;
-use App\Repository\MangaRepository;
-use App\Service\CbrToCbzConverter;
-use App\Service\CbzService;
-use App\Service\MangaImportService;
-use App\Service\NotificationService;
-use Exception;
-use Symfony\Bundle\FrameworkBundle\Controller\AbstractController;
-use Symfony\Component\HttpFoundation\File\Exception\FileException;
-use Symfony\Component\HttpFoundation\Request;
-use Symfony\Component\HttpFoundation\Response;
-use Symfony\Component\HttpFoundation\Session\SessionInterface;
-use Symfony\Component\Routing\Attribute\Route;
-use Symfony\Component\String\Slugger\SluggerInterface;
-
-class ImportController extends AbstractController
-{
-    public function __construct(
-        private readonly FileSystemManager   $fileSystemManager,
-        private readonly CbzService          $cbzService,
-        private readonly MangaImportService  $mangaImportService,
-        private readonly NotificationService $notificationService,
-        private readonly MangaRepository     $mangaRepository,
-        private readonly CbrToCbzConverter   $cbrToCbzConverter
-    ) {
-
-    }
-
-    #[Route('/manga/import', name: 'app_manga_import')]
-    public function index(Request $request, SessionInterface $session): Response
-    {
-        if ($request->isMethod('POST')) {
-            $files = $request->files->get('files');
-            if ($files) {
-                $importFiles = [];
-                foreach ($files as $file) {
-                    if ($file && in_array($file->getClientOriginalExtension(), ['cbz', 'cbr'])) {
-                        $originalFileName = $file->getClientOriginalName();
-
-                        try {
-                            $tmpPath = $this->fileSystemManager->moveUploadedFile(
-                                $file->getPathname(),
-                                $this->fileSystemManager->getUploadsDirectory(),
-                                $file->getClientOriginalName()
-                            );
-                            $importFiles[] = [
-                                'id' => uniqid(),
-                                'path' => $tmpPath,
-                                'original_name' => $originalFileName,
-                            ];
-                        } catch (FileException $e) {
-                            $this->notificationService->sendUpdate([
-                                'status' => 'error',
-                                'message' => 'Une erreur est survenue lors de l\'import du fichier ' . $originalFileName,
-                            ]);
-                        }
-                    } else {
-                        $this->notificationService->sendUpdate([
-                            'status' => 'error',
-                            'message' => 'Le fichier ' . $file->getClientOriginalName() . ' doit être au format CBZ ou CBR.',
-                        ]);
-                    }
-                }
-
-                if (!empty($importFiles)) {
-                    $session->set('import_files', $importFiles);
-                    return $this->redirectToRoute('import_match');
-                }
-            } else {
-                $this->notificationService->sendUpdate([
-                    'status' => 'error',
-                    'message' => 'Aucun fichier n\'a été sélectionné.',
-                ]);
-            }
-        }
-
-        return $this->render('import/index.html.twig');
-    }
-
-    /**
-     * @throws Exception
-     */
-    #[Route('/import/match', name: 'import_match')]
-    public function match(SessionInterface $session): Response
-    {
-        $files = $session->get('import_files', []);
-        if (empty($files)) {
-            return $this->redirectToRoute('app_manga_import');
-        }
-
-        $processedFiles = [];
-        foreach ($files as $fileId => $fileInfo) {
-            $filePath = $fileInfo['path'];
-            $originalFileName = $fileInfo['original_name'];
-
-            $fileExtension = pathinfo($filePath, PATHINFO_EXTENSION);
-            if (strtolower($fileExtension) === 'cbr') {
-                $cbzPath = $this->cbrToCbzConverter->convert($filePath);
-                $filePath = $cbzPath;
-                $originalFileName = pathinfo($originalFileName, PATHINFO_FILENAME) . '.cbz';
-                $files[$fileId]['path'] = $filePath;
-                $files[$fileId]['original_name'] = $originalFileName;
-            }
-
-            $metadata = $this->cbzService->extractMetadata($filePath, $originalFileName);
-            $mangas = $this->mangaRepository->findBySlug($metadata['title']);
-
-            $mangaOptions = [];
-            foreach ($mangas as $manga) {
-                $mangaOptions[] = [
-                    'slug' => $manga->getSlug(),
-                    'title' => $manga->getTitle(),
-                    'author' => $manga->getAuthor(),
-                    'publicationYear' => $manga->getPublicationYear(),
-                    'genres' => $manga->getGenres(),
-                    'description' => $manga->getDescription()
-                ];
-            }
-
-            $processedFiles[] = [
-                'id' => $fileId,
-                'originalFileName' => $originalFileName,
-                'fileSize' => $this->formatBytes(filesize($filePath)),
-                'metadata' => $metadata,
-                'mangaOptions' => $mangaOptions
-            ];
-        }
-
-        $session->set('import_files', $files);
-
-        return $this->render('import/match.html.twig', [
-            'files' => $processedFiles
-        ]);
-    }
-
-    private function formatBytes($bytes, $precision = 2)
-    {
-        $units = ['B', 'KB', 'MB', 'GB', 'TB'];
-        $bytes = max($bytes, 0);
-        $pow = floor(($bytes ? log($bytes) : 0) / log(1024));
-        $pow = min($pow, count($units) - 1);
-        $bytes /= (1 << (10 * $pow));
-        return round($bytes, $precision) . ' ' . $units[$pow];
-    }
-
-    #[Route('/import/confirm', name: 'import_confirm', methods: ['POST'])]
-    public function confirm(Request $request, SessionInterface $session): Response
-    {
-        $files = $session->get('import_files', []);
-        $selectedFiles = $request->request->all('selected');
-        $mangaSlugs = $request->request->all('manga_slug');
-        $volumes = $request->request->all('volume');
-        $chapters = $request->request->all('chapter');
-
-        $importedFiles = [];
-        $errors = [];
-
-        foreach ($selectedFiles as $fileId) {
-            if (!isset($files[$fileId])) {
-                continue;
-            }
-
-            $file = $files[$fileId];
-            $mangaSlug = $mangaSlugs[$fileId] ?? null;
-            $volume = $volumes[$fileId] ?? null;
-            $chapter = $chapters[$fileId] ?? null;
-
-            try {
-                $manga = $this->mangaRepository->findOneBy(['slug' => $mangaSlug]);
-                if (!$manga) {
-                    throw new \Exception('Manga non trouvé.');
-                }
-
-                if (!is_null($chapter)) {
-                    $chapter = $manga->getChapterByNumber($chapter);
-                    if (!$chapter) {
-                        throw new \Exception('Chapitre non trouvé.');
-                    }
-                }
-
-                $importedFiles[] = $file['original_name'];
-                $this->mangaImportService->importFile($manga, $volume, $chapter, $file['path']);
-            } catch (\Exception $e) {
-                $errors[] = "Erreur lors de l'import de {$file['original_name']} : " . $e->getMessage();
-            }
-        }
-
-        // Nettoyer les fichiers temporaires non importés
-        foreach ($files as $file) {
-            $this->fileSystemManager->deleteFile($file['path']);
-        }
-
-        // Nettoyer la session
-        $session->remove('import_files');
-
-        // Préparer le message de notification
-        if (!empty($importedFiles)) {
-            $successMessage = 'Fichiers importés avec succès : ' . implode(', ', $importedFiles);
-            $this->notificationService->sendUpdate([
-                'status' => 'success',
-                'message' => $successMessage
-            ]);
-        }
-
-        if (!empty($errors)) {
-            $errorMessage = implode("\n", $errors);
-            $this->notificationService->sendUpdate([
-                'status' => 'error',
-                'message' => $errorMessage
-            ]);
-        }
-
-        return $this->redirectToRoute('app_manga');
-    }
-}
--- a/Show More
+++ b/Show More