diff --git a/CHANGELOG.md b/CHANGELOG.md
index cc52eb4..1385c0e 100755
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,6 @@
 # Unreleased
 
+- The credit note list of the back-office is laid out like the order list of default-twig: one search over the reference, the number, the order and the customer; status, type, date and amount filters in a collapsed panel; chips for the active filters; columns sorted by reference, total, creation or update date; pages of the `BoDataTable` and `BoPagination` components. The id column is gone; the reference opens the modal; the invoice reference of a numbered credit note has its column, with the date of its document underneath; the customer shows the flag of the invoice country, the name and the e-mail; a creation or update date shows its age underneath for 30 days, and only the date afterwards or for a date ahead of the clock. The search matches every word in any field, so the names of a customer can come in any order. The date filter bounds the invoice date, as before: the date of its creation for a credit note not numbered yet, the date of its number once accepted. A parameter of the wrong shape is ignored instead of answering 400. The previous parameters (`status_id` of the side menu, `ref`, `creditNoteDateMin`, `creditNoteDateMax`) still filter; `credit_note_page` and `credit_note_order` are no longer read (the list opens on its first page, newest first). Edit and Delete show only to an administrator with the update or delete right on the module. `CreditNoteHookPresenter::listRows()` is removed, replaced by `CreditNoteListReader` and `CreditNoteListRowPresenter`.
 - The back-office screens are translated again: their labels used the `creditnote.bo.default` domain, which the kernel stopped loading once the Smarty back-office (`templates/backOffice/default/`) was removed, since it registers a `<module>.bo.<template>` domain only for a template the module ships. The domain is now `creditnote.bo.default-twig`, its catalogs moved to `I18n/backOffice/default-twig/`; the side menu reads "Avoirs" again in French. A shop that overrode one of these labels in `local/I18n` with a `creditnote.bo.default.` key renames it.
 - A credit note has a language (`lang_id`), chosen in the back-office modal: the language of its order by default, of its customer without an order, the default language of the shop otherwise. It stays editable once the credit note is numbered, since it only changes the printed document. The document is printed in it (still within `document_locales`). The update fills the existing credit notes with the language they were printed in: the one of their customer, of their order when the customer has none.
 - The colors of the status and type badges are written into `style` attributes only when they are hexadecimal colors, grey otherwise.
diff --git a/Config/module.xml b/Config/module.xml
index 7b3c2d1..83b8262 100755
--- a/Config/module.xml
+++ b/Config/module.xml
@@ -17,7 +17,7 @@
         <language>en_US</language>
         <language>fr_FR</language>
     </languages>
-    <version>4.3.1</version>
+    <version>4.4.0</version>
     <author>
         <name>Gilles Bourgeat</name>
         <email>gbourgeat@openstudio.fr</email>
diff --git a/Controller/CreditNoteController.php b/Controller/CreditNoteController.php
index 081e1de..db7e547 100755
--- a/Controller/CreditNoteController.php
+++ b/Controller/CreditNoteController.php
@@ -12,7 +12,10 @@
 use CreditNote\Form\CreditNoteSearchForm;
 use CreditNote\Helper\CreditNoteHelper;
 use CreditNote\Helper\CriteriaSearchHelper;
-use CreditNote\Service\CreditNoteHookPresenter;
+use CreditNote\Service\CreditNoteListFilterPresenter;
+use CreditNote\Service\CreditNoteListFilters;
+use CreditNote\Service\CreditNoteListReader;
+use CreditNote\Service\CreditNoteListRowPresenter;
 use CreditNote\Service\CreditNoteLanguage;
 use CreditNote\Service\CreditNoteModalPresenter;
 use CreditNote\Service\CreditNotePdfRenderer;
@@ -78,54 +81,27 @@ class CreditNoteController extends BaseAdminController
      * @return \Thelia\Core\HttpFoundation\Response
      */
     #[Route('/credit-note', name: '_list', methods: 'GET')]
-    public function listAction(Request $request, ParserContext $parserContext, CreditNoteHookPresenter $presenter)
+    public function listAction(Request $request, CreditNoteListReader $reader, CreditNoteListRowPresenter $rowPresenter, CreditNoteListFilterPresenter $filterPresenter)
     {
         if (null !== $response = $this->checkAuth([AdminResources::MODULE], [CreditNoteModule::DOMAIN_MESSAGE], AccessManager::VIEW)) {
             return $response;
         }
 
-        $parserContext->addForm($this->createForm(CreditNoteSearchForm::getName()));
-
-        return $this->render('credit-note-list', $this->buildListContext($request, $presenter));
-    }
-
-    /**
-     * Builds the list-page context (search filters + paginated rows), replacing the Smarty
-     * {loop type="credit-note"} + pagination plugin the Twig BO does not provide.
-     *
-     * @return array<string, mixed>
-     */
-    private function buildListContext(Request $request, CreditNoteHookPresenter $presenter): array
-    {
-        $page = max(1, (int) $request->query->get('credit_note_page', 1));
-        $order = (string) $request->query->get('credit_note_order', 'create-date-reverse');
-        $statusId = $request->query->get('status_id');
-        $ref = $request->query->get('ref');
-        $dateMin = $request->query->get('creditNoteDateMin');
-        $dateMax = $request->query->get('creditNoteDateMax');
-        $perPage = (int) ConfigQuery::read('number_default_results_per_page.credit_note_list', 20);
-
-        $list = $presenter->listRows(
-            $request->getLocale(),
-            $page,
-            $perPage,
-            $order,
-            null !== $statusId && '' !== $statusId ? (int) $statusId : null,
-            $ref !== null && $ref !== '' ? (string) $ref : null,
-            $dateMin !== null && $dateMin !== '' ? (string) $dateMin : null,
-            $dateMax !== null && $dateMax !== '' ? (string) $dateMax : null,
+        $locale = $request->getLocale();
+        $filters = CreditNoteListFilters::fromRequest($request);
+        $list = $reader->page(
+            $filters,
+            CreditNoteListFilters::pageFromRequest($request),
+            (int) ConfigQuery::read('number_default_results_per_page.credit_note_list', 20),
         );
 
-        return [
-            'credit_notes' => $list['rows'],
-            'current_page' => $page,
-            'page_count' => $list['page_count'],
-            'credit_note_order' => $order,
-            'filter_ref' => $ref,
-            'filter_status_id' => $statusId,
-            'filter_date_min' => $dateMin,
-            'filter_date_max' => $dateMax,
-        ];
+        return $this->render('credit-note-list', [
+            'rows' => $rowPresenter->presentAll($list['rows'], $locale),
+            'current_page' => $list['current_page'],
+            'pages' => $list['last_page'],
+            'filters' => $filterPresenter->present($filters, $locale),
+            'query_params' => $filters->toQueryParams(),
+        ]);
     }
 
     #[Route('/module/credit-note/config', name: '_config_save', methods: 'POST')]
diff --git a/I18n/backOffice/default-twig/en_US.php b/I18n/backOffice/default-twig/en_US.php
index bbee654..ce5a409 100755
--- a/I18n/backOffice/default-twig/en_US.php
+++ b/I18n/backOffice/default-twig/en_US.php
@@ -7,10 +7,13 @@
 return [
     '#' => '#',
     'Action' => 'Action',
+    'Actions' => 'Actions',
+    'Active filters:' => 'Active filters:',
     'Add a free amount' => 'Add a free amount',
     'Add a new credit note' => 'Add a new credit note',
     'Address :' => 'Address:',
     'Address complement :' => 'Address complement:',
+    'Advanced filters' => 'Advanced filters',
     'All Credit Notes' => 'All credit notes',
     'Amount with tax' => 'Amount with tax',
     'Amount with tax %currency' => 'Amount with tax %currency',
@@ -18,9 +21,11 @@
     'Amount without tax %currency' => 'Amount without tax %currency',
     'An error has occurred !!!' => 'An error has occurred.',
     'An order is required for this credit note type.' => 'An order is required for this credit note type.',
+    'Apply' => 'Apply',
     'Cancel' => 'Cancel',
     'City :' => 'City:',
     'Clean selection' => 'Clear the fields',
+    'Clear all' => 'Clear all',
     'Close' => 'Close',
     'Company :' => 'Company:',
     'Country :' => 'Country:',
@@ -33,12 +38,14 @@
     'Credit note for this order' => 'Credit note for this order',
     'Credit Note Informations :' => 'Credit note information:',
     'Credit Note ref' => 'Credit note ref',
+    'Credit note pagination' => 'Credit note pagination',
     'Credit note ref :' => 'Credit note ref:',
     'Credit Note reference' => 'Credit note reference',
     'Credit Note used :' => 'Credit note used:',
     'Credit note used :' => 'Credit note used:',
     'Credit notes' => 'Credit notes',
     'Credit Notes' => 'Credit notes',
+    'Credit notes management' => 'Credit notes management',
     'Customer' => 'Customer',
     'Customer :' => 'Customer:',
     'Delete' => 'Delete',
@@ -53,17 +60,22 @@
     'Free amount :' => 'Free amount:',
     'From' => 'From',
     'Internal comment :' => 'Internal comment:',
+    'Inv. ref' => 'Invoice ref',
     'Invoice address' => 'Invoice address',
     'Invoice date' => 'Invoice date',
+    'Invoice date between' => 'Invoice date between',
     'Invoice ref' => 'Invoice ref',
     'Invoice ref :' => 'Invoice ref:',
     'Language :' => 'Language:',
     'Lastname :' => 'Last name:',
+    'Max' => 'Max',
     'Message content : ' => 'Message:',
     'Message sent to the customer when a credit note is created from an order.' => 'Message sent to the customer when a credit note is created from an order.',
     'Message status : ' => 'Status:',
+    'Min' => 'Min',
     'No' => 'No',
     'No comments found for this credit note' => 'No comment found for this credit note',
+    'No credit note matches the current filters.' => 'No credit note matches the current filters.',
     'No free amount.' => 'No free amount.',
     'No results found' => 'No result found',
     'Order' => 'Order',
@@ -79,7 +91,11 @@
     'Quantity' => 'Quantity',
     'Ref' => 'Ref',
     'Ref :' => 'Ref:',
+    'Reference' => 'Reference',
+    'Reference, number, order, customer name or email' => 'Reference, number, order, customer name or email',
     'Remaining to pay :' => 'Remaining to pay:',
+    'Remove this filter' => 'Remove this filter',
+    'Reset' => 'Reset',
     'Save' => 'Save',
     'Search' => 'Search',
     'Search...' => 'Search…',
@@ -95,6 +111,7 @@
     'Title' => 'Title',
     'To' => 'To',
     'Total' => 'Total',
+    'Total amount (TTC)' => 'Total amount (TTC)',
     'Total credit notes amount' => 'Total credit notes amount',
     'Total including discount' => 'Total including discount',
     'Total with tax' => 'Total with tax',
diff --git a/I18n/backOffice/default-twig/fr_FR.php b/I18n/backOffice/default-twig/fr_FR.php
index ee5acdd..21d9515 100755
--- a/I18n/backOffice/default-twig/fr_FR.php
+++ b/I18n/backOffice/default-twig/fr_FR.php
@@ -7,12 +7,15 @@
 return [
     '#' => '#',
     'Action' => 'Action',
+    'Actions' => 'Actions',
+    'Active filters:' => 'Filtres actifs :',
     'Add a free amount' => 'Ajouter un montant libre',
     'Add a new credit note' => 'Ajouter un nouvel avoir',
     'Address :' => 'Adresse :',
     'Address : ' => 'Adresse :',
     'Address complement :' => 'Complément d\'adresse :',
     'Address complement : ' => 'Complément d\'adresse :',
+    'Advanced filters' => 'Filtres avancés',
     'All Credit Notes' => 'Tous les avoirs',
     'Amount with tax' => 'Montant TTC',
     'Amount with tax %currency' => 'Montant TTC %currency',
@@ -20,10 +23,12 @@
     'Amount without tax %currency' => 'Montant HT %currency',
     'An error has occurred !!!' => 'Une erreur est survenue',
     'An order is required for this credit note type.' => 'Une commande est obligatoire pour ce type d\'avoir.',
+    'Apply' => 'Appliquer',
     'Cancel' => 'Annuler',
     'City :' => 'Ville :',
     'City : ' => 'Ville :',
     'Clean selection' => 'Réinitialiser les champs',
+    'Clear all' => 'Tout effacer',
     'Close' => 'Fermer',
     'Combination reference' => 'Référence déclinaison',
     'Company :' => 'Société :',
@@ -37,6 +42,7 @@
     'Credit Note Informations :' => 'Informations sur l\'avoir :',
     'Credit Note Informations : ' => 'Informations avoir',
     'Credit Note ref' => 'Avoir ref',
+    'Credit note pagination' => 'Pagination des avoirs',
     'Credit note ref :' => 'Référence de l\'avoir :',
     'Credit note ref : <strong>%ref</strong>' => 'Référence avoir : <strong>%ref</strong>',
     'Credit Note reference' => 'Numéro d\'avoir',
@@ -46,6 +52,7 @@
     'Credit note versions : ' => 'Versions de l\'avoir',
     'Credit Notes' => 'Avoirs',
     'Credit notes' => 'Avoirs',
+    'Credit notes management' => 'Gestion des avoirs',
     'Customer' => 'Client',
     'Customer :' => 'Client :',
     'Customer : ' => 'Client :',
@@ -66,18 +73,23 @@
     'Home' => 'Accueil',
     'Internal comment :' => 'Commentaire interne :',
     'Internal comment : ' => 'Commentaire interne',
+    'Inv. ref' => 'Ref facture',
     'Invoice address' => 'Adresse de facturation',
     'Invoice date' => 'Date facture',
+    'Invoice date between' => 'Date de l\'avoir entre',
     'Invoice ref' => 'Référence facture',
     'Invoice ref :' => 'Référence facture :',
     'Invoice ref : <strong>%ref</strong>' => 'Référence facture : <strong>%ref</strong>',
     'Language :' => 'Langue :',
     'Lastname :' => 'Nom :',
     'Lastname : ' => 'Nom :',
+    'Max' => 'Max',
     'Message content : ' => 'Message :',
     'Message status : ' => 'Statut :',
+    'Min' => 'Min',
     'No' => 'Non',
     'No comments found for this credit note' => 'Aucun commentaire trouvé pour cet avoir',
+    'No credit note matches the current filters.' => 'Aucun avoir ne correspond aux filtres.',
     'No free amount.' => 'Aucun montant libre',
     'No results found' => 'Aucun résultat',
     'No version found for this credit note' => 'Aucune version trouvée pour cet avoir',
@@ -97,8 +109,12 @@
     'Quantity' => 'Quantité',
     'Ref' => 'Ref',
     'Ref :' => 'Ref :',
+    'Reference' => 'Référence',
+    'Reference, number, order, customer name or email' => 'Référence, numéro, commande, nom ou e-mail du client',
     'Remaining to pay :' => 'Reste à payer :',
     'Remaining to pay : ' => 'Reste à payer',
+    'Remove this filter' => 'Retirer ce filtre',
+    'Reset' => 'Réinitialiser',
     'Save' => 'Enregistrer',
     'Search' => 'Rechercher',
     'Search...' => 'Rechercher ...',
@@ -119,6 +135,7 @@
     'Title' => 'Titre',
     'To' => 'Jusqu\'au',
     'Total' => 'Total',
+    'Total amount (TTC)' => 'Montant total (TTC)',
     'Total including discount' => 'Total avec réduction',
     'Total with tax' => 'Total TTC',
     'Total with tax :' => 'Total TTC :',
diff --git a/I18n/en_US.php b/I18n/en_US.php
index eca0087..149b0fc 100755
--- a/I18n/en_US.php
+++ b/I18n/en_US.php
@@ -33,4 +33,17 @@
     'The credit notes on order %order% cannot exceed its total (%ceiling%): %granted% already granted, %amount% asked.' => 'The credit notes on order %order% cannot exceed its total (%ceiling%): %granted% already granted, %amount% asked.',
     'Languages of the credit note document (locales separated by commas, en_US,fr_FR when empty)' => 'Languages of the credit note document (locales separated by commas, en_US,fr_FR when empty)',
     'Enter locales such as fr_FR, separated by commas' => 'Enter locales such as fr_FR, separated by commas',
+    'Not numbered yet' => 'Not numbered yet',
+    '%amount% excl. tax' => '%amount% excl. tax',
+    'Just now' => 'Just now',
+    '%count% min ago' => '%count% min ago',
+    '%count% h ago' => '%count% h ago',
+    '%count% d ago' => '%count% d ago',
+    'Status' => 'Status',
+    'Type' => 'Type',
+    'Invoice date' => 'Invoice date',
+    'Amount' => 'Amount',
+    'Search' => 'Search',
+    'from %value%' => 'from %value%',
+    'up to %value%' => 'up to %value%',
 ];
diff --git a/I18n/fr_FR.php b/I18n/fr_FR.php
index a1b5aff..d0c8039 100755
--- a/I18n/fr_FR.php
+++ b/I18n/fr_FR.php
@@ -28,4 +28,17 @@
     'The credit notes on order %order% cannot exceed its total (%ceiling%): %granted% already granted, %amount% asked.' => 'Les avoirs de la commande %order% ne peuvent pas dépasser son total (%ceiling%) : %granted% déjà accordés, %amount% demandés.',
     'Languages of the credit note document (locales separated by commas, en_US,fr_FR when empty)' => 'Langues du document d\'avoir (locales séparées par des virgules, en_US,fr_FR si vide)',
     'Enter locales such as fr_FR, separated by commas' => 'Saisir des locales comme fr_FR, séparées par des virgules',
+    'Not numbered yet' => 'Pas encore numéroté',
+    '%amount% excl. tax' => '%amount% HT',
+    'Just now' => 'À l\'instant',
+    '%count% min ago' => 'il y a %count% min',
+    '%count% h ago' => 'il y a %count% h',
+    '%count% d ago' => 'il y a %count% j',
+    'Status' => 'Statut',
+    'Type' => 'Type',
+    'Invoice date' => 'Date de l\'avoir',
+    'Amount' => 'Montant',
+    'Search' => 'Rechercher',
+    'from %value%' => 'à partir de %value%',
+    'up to %value%' => 'jusqu\'à %value%',
 ];
diff --git a/Service/CreditNoteHookPresenter.php b/Service/CreditNoteHookPresenter.php
index e9b777a..cba0db6 100644
--- a/Service/CreditNoteHookPresenter.php
+++ b/Service/CreditNoteHookPresenter.php
@@ -64,54 +64,6 @@ public function tableRows(?int $customerId, ?int $orderId, string $locale): arra
         return $rows;
     }
 
-    /**
-     * Paginated rows + page count for the credit-note list page (replaces the Smarty
-     * {loop type="credit-note"} + pagination plugin, which the Twig BO does not provide).
-     *
-     * @return array{rows: array<int, array<string, mixed>>, page_count: int}
-     */
-    public function listRows(
-        string $locale,
-        int $page,
-        int $perPage,
-        string $order,
-        ?int $statusId,
-        ?string $ref,
-        ?string $dateMin,
-        ?string $dateMax,
-    ): array {
-        $query = CreditNoteQuery::create();
-
-        if (null !== $statusId) {
-            $query->filterByStatusId($statusId);
-        }
-        if (null !== $ref && '' !== $ref) {
-            $query->filterByRef('%'.$ref.'%', Criteria::LIKE);
-        }
-        if (null !== $dateMin && '' !== $dateMin) {
-            $query->filterByInvoiceDate(new \DateTime($dateMin), Criteria::GREATER_EQUAL);
-        }
-        if (null !== $dateMax && '' !== $dateMax) {
-            $query->filterByInvoiceDate((new \DateTime($dateMax))->setTime(23, 59, 59), Criteria::LESS_EQUAL);
-        }
-
-        match ($order) {
-            'create-date' => $query->orderByCreatedAt(Criteria::ASC),
-            'update-date' => $query->orderByUpdatedAt(Criteria::ASC),
-            'update-date-reverse' => $query->orderByUpdatedAt(Criteria::DESC),
-            default => $query->orderByCreatedAt(Criteria::DESC),
-        };
-
-        $pager = $query->paginate($page, max(1, $perPage));
-
-        $rows = [];
-        foreach ($pager as $creditNote) {
-            $rows[] = $this->row($creditNote, $locale);
-        }
-
-        return ['rows' => $rows, 'page_count' => $pager->getLastPage()];
-    }
-
     /**
      * @return array<string, mixed>
      */
diff --git a/Service/CreditNoteListFilterPresenter.php b/Service/CreditNoteListFilterPresenter.php
new file mode 100644
index 0000000..c68d994
--- /dev/null
+++ b/Service/CreditNoteListFilterPresenter.php
@@ -0,0 +1,130 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CreditNote\Service;
+
+use CreditNote\CreditNote as CreditNoteModule;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+use Symfony\Contracts\Translation\TranslatorInterface;
+
+/**
+ * The filters of the credit note list as the template reads them: the values to put back in the
+ * form, the options of the panel, and the chips of the active filters with the URL that drops each.
+ */
+final readonly class CreditNoteListFilterPresenter
+{
+    private const LIST_ROUTE = 'credit_note_list';
+
+    public function __construct(
+        private UrlGeneratorInterface $urls,
+        private TranslatorInterface $translator,
+        private CreditNoteListReader $reader,
+    ) {
+    }
+
+    /**
+     * @return array<string, mixed>
+     */
+    public function present(CreditNoteListFilters $filters, string $locale): array
+    {
+        $statuses = $this->reader->statuses($locale);
+        $types = $this->reader->types($locale);
+
+        return [
+            'search_input' => $filters->search,
+            'advanced_count' => $filters->advancedCount(),
+            'active_chips' => $this->activeChips($filters, $statuses, $types),
+            'clear_all_url' => $this->urls->generate(self::LIST_ROUTE),
+
+            'status_options' => $statuses,
+            'selected_status_ids' => $filters->statusIds,
+            'type_options' => $types,
+            'selected_type_ids' => $filters->typeIds,
+
+            'invoice_date_from_input' => $filters->invoiceDateFrom?->format('Y-m-d') ?? '',
+            'invoice_date_to_input' => $filters->invoiceDateTo?->format('Y-m-d') ?? '',
+            'min_amount_input' => self::formatNumber($filters->minAmount),
+            'max_amount_input' => self::formatNumber($filters->maxAmount),
+            'amount_slider' => $this->reader->amountBounds(),
+
+            'sort_field' => $filters->sort,
+            'sort_direction' => $filters->direction,
+        ];
+    }
+
+    /**
+     * @param list<array{id: int, title: string, color: string}> $statuses
+     * @param list<array{id: int, title: string, color: string}> $types
+     *
+     * @return list<array{key: string, label: string, value: string, remove_url: string}>
+     */
+    private function activeChips(CreditNoteListFilters $filters, array $statuses, array $types): array
+    {
+        $chips = [];
+
+        if ($filters->statusIds !== []) {
+            $chips[] = $this->chip($filters, CreditNoteListFilters::KEY_STATUS_IDS, $this->translator->trans('Status', [], CreditNoteModule::DOMAIN_MESSAGE), self::titles($filters->statusIds, $statuses));
+        }
+        if ($filters->typeIds !== []) {
+            $chips[] = $this->chip($filters, CreditNoteListFilters::KEY_TYPE_IDS, $this->translator->trans('Type', [], CreditNoteModule::DOMAIN_MESSAGE), self::titles($filters->typeIds, $types));
+        }
+        if ('' !== $range = $this->rangeLabel($filters->invoiceDateFrom?->format('d/m/Y'), $filters->invoiceDateTo?->format('d/m/Y'))) {
+            $chips[] = $this->chip($filters, CreditNoteListFilters::KEY_INVOICE_DATE_RANGE, $this->translator->trans('Invoice date', [], CreditNoteModule::DOMAIN_MESSAGE), $range);
+        }
+        if ('' !== $range = $this->rangeLabel(
+            null !== $filters->minAmount ? self::formatNumber($filters->minAmount) : null,
+            null !== $filters->maxAmount ? self::formatNumber($filters->maxAmount) : null,
+        )) {
+            $chips[] = $this->chip($filters, CreditNoteListFilters::KEY_AMOUNT_RANGE, $this->translator->trans('Amount', [], CreditNoteModule::DOMAIN_MESSAGE), $range);
+        }
+        if ($filters->search !== '') {
+            $chips[] = $this->chip($filters, CreditNoteListFilters::KEY_SEARCH, $this->translator->trans('Search', [], CreditNoteModule::DOMAIN_MESSAGE), $filters->search);
+        }
+
+        return $chips;
+    }
+
+    /**
+     * @return array{key: string, label: string, value: string, remove_url: string}
+     */
+    private function chip(CreditNoteListFilters $filters, string $key, string $label, string $value): array
+    {
+        return [
+            'key' => $key,
+            'label' => $label,
+            'value' => $value,
+            'remove_url' => $this->urls->generate(self::LIST_ROUTE, $filters->withoutFilter($key)->toQueryParams()),
+        ];
+    }
+
+    private function rangeLabel(?string $from, ?string $to): string
+    {
+        return match (true) {
+            null !== $from && null !== $to => $from.' - '.$to,
+            null !== $from => $this->translator->trans('from %value%', ['%value%' => $from], CreditNoteModule::DOMAIN_MESSAGE),
+            null !== $to => $this->translator->trans('up to %value%', ['%value%' => $to], CreditNoteModule::DOMAIN_MESSAGE),
+            default => '',
+        };
+    }
+
+    /**
+     * @param list<int>                                           $ids
+     * @param list<array{id: int, title: string, color: string}> $options
+     */
+    private static function titles(array $ids, array $options): string
+    {
+        $titles = array_column($options, 'title', 'id');
+
+        return implode(', ', array_filter(array_map(static fn (int $id): string => $titles[$id] ?? '', $ids)));
+    }
+
+    private static function formatNumber(?float $value): string
+    {
+        if (null === $value) {
+            return '';
+        }
+
+        return rtrim(rtrim(number_format($value, 2, '.', ''), '0'), '.');
+    }
+}
diff --git a/Service/CreditNoteListFilters.php b/Service/CreditNoteListFilters.php
new file mode 100644
index 0000000..0a3b8b4
--- /dev/null
+++ b/Service/CreditNoteListFilters.php
@@ -0,0 +1,317 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CreditNote\Service;
+
+use CreditNote\Model\CreditNoteQuery;
+use CreditNote\Model\Map\CreditNoteTableMap;
+use Propel\Runtime\ActiveQuery\Criteria;
+use Symfony\Component\HttpFoundation\Request;
+
+/**
+ * The filters of the credit note list, read from the query string: parsing, URL serialisation
+ * and SQL application in one place, the same surface as the order list of the back-office.
+ *
+ * The free search covers the reference, the number, the order reference and the customer at
+ * once. The date range bounds the date of the credit note document (`invoice_date`), as the
+ * list always did. The parameters of the previous list (`status_id` from the side menu, `ref`,
+ * `creditNoteDateMin`, `creditNoteDateMax`) are still read, so their links keep working.
+ */
+final readonly class CreditNoteListFilters
+{
+    public const DEFAULT_SORT = 'created_at';
+    public const DEFAULT_DIRECTION = 'desc';
+    public const ALLOWED_SORTS = ['ref', 'created_at', 'updated_at', 'total'];
+    public const ALLOWED_DIRECTIONS = ['asc', 'desc'];
+    private const MAX_SEARCH_WORDS = 5;
+
+    public const KEY_STATUS_IDS = 'status_ids';
+    public const KEY_TYPE_IDS = 'type_ids';
+    public const KEY_INVOICE_DATE_RANGE = 'invoice_date_range';
+    public const KEY_AMOUNT_RANGE = 'amount_range';
+    public const KEY_SEARCH = 'search';
+
+    /**
+     * @param list<int> $statusIds
+     * @param list<int> $typeIds
+     */
+    public function __construct(
+        public array $statusIds = [],
+        public array $typeIds = [],
+        public ?\DateTimeImmutable $invoiceDateFrom = null,
+        public ?\DateTimeImmutable $invoiceDateTo = null,
+        public ?float $minAmount = null,
+        public ?float $maxAmount = null,
+        public string $search = '',
+        public string $sort = self::DEFAULT_SORT,
+        public string $direction = self::DEFAULT_DIRECTION,
+    ) {
+    }
+
+    /**
+     * Reads the raw query string: a value of the wrong shape (a list where a word is expected, or
+     * the reverse, as in a hand-edited link) is ignored instead of answering 400, which the
+     * typed accessors of InputBag do.
+     */
+    public static function fromRequest(Request $request): self
+    {
+        $query = $request->query->all();
+
+        $statusIds = self::parseIntArray($query['status_ids'] ?? []);
+        if ($statusIds === [] && null !== $single = self::parsePositiveInt(self::text($query, 'status_id'))) {
+            $statusIds = [$single];
+        }
+
+        $invoiceDateFrom = self::parseDate(self::text($query, 'invoice_date_from', 'creditNoteDateMin'), endOfDay: false);
+        $invoiceDateTo = self::parseDate(self::text($query, 'invoice_date_to', 'creditNoteDateMax'), endOfDay: true);
+        if ($invoiceDateFrom !== null && $invoiceDateTo !== null && $invoiceDateFrom > $invoiceDateTo) {
+            [$invoiceDateFrom, $invoiceDateTo] = [$invoiceDateTo->setTime(0, 0, 0), $invoiceDateFrom->setTime(23, 59, 59)];
+        }
+
+        $minAmount = self::parseAmount(self::text($query, 'min_amount'));
+        $maxAmount = self::parseAmount(self::text($query, 'max_amount'));
+        if ($minAmount !== null && $maxAmount !== null && $minAmount > $maxAmount) {
+            [$minAmount, $maxAmount] = [$maxAmount, $minAmount];
+        }
+
+        $sort = self::text($query, 'order');
+        if (!\in_array($sort, self::ALLOWED_SORTS, true)) {
+            $sort = self::DEFAULT_SORT;
+        }
+
+        $direction = strtolower(self::text($query, 'direction'));
+        if (!\in_array($direction, self::ALLOWED_DIRECTIONS, true)) {
+            $direction = self::DEFAULT_DIRECTION;
+        }
+
+        return new self(
+            statusIds: $statusIds,
+            typeIds: self::parseIntArray($query['type_ids'] ?? []),
+            invoiceDateFrom: $invoiceDateFrom,
+            invoiceDateTo: $invoiceDateTo,
+            minAmount: $minAmount,
+            maxAmount: $maxAmount,
+            search: trim(self::text($query, 'q', 'ref')),
+            sort: $sort,
+            direction: $direction,
+        );
+    }
+
+    /**
+     * The page asked in the query string, 1 when it is absent or not a number.
+     */
+    public static function pageFromRequest(Request $request): int
+    {
+        return self::parsePositiveInt(self::text($request->query->all(), 'page')) ?? 1;
+    }
+
+    /**
+     * The filters of the collapsed panel that are set: the badge of its toggle.
+     */
+    public function advancedCount(): int
+    {
+        return \count(array_filter([
+            $this->statusIds !== [],
+            $this->typeIds !== [],
+            $this->invoiceDateFrom !== null || $this->invoiceDateTo !== null,
+            $this->minAmount !== null || $this->maxAmount !== null,
+        ]));
+    }
+
+    /**
+     * Omits the defaults, so the URLs stay short and bookmarkable.
+     *
+     * @return array<string, scalar|list<int>>
+     */
+    public function toQueryParams(): array
+    {
+        $params = [];
+
+        if ($this->statusIds !== []) {
+            $params['status_ids'] = $this->statusIds;
+        }
+        if ($this->typeIds !== []) {
+            $params['type_ids'] = $this->typeIds;
+        }
+        if ($this->invoiceDateFrom !== null) {
+            $params['invoice_date_from'] = $this->invoiceDateFrom->format('Y-m-d');
+        }
+        if ($this->invoiceDateTo !== null) {
+            $params['invoice_date_to'] = $this->invoiceDateTo->format('Y-m-d');
+        }
+        if ($this->minAmount !== null) {
+            $params['min_amount'] = $this->minAmount;
+        }
+        if ($this->maxAmount !== null) {
+            $params['max_amount'] = $this->maxAmount;
+        }
+        if ($this->search !== '') {
+            $params['q'] = $this->search;
+        }
+        if ($this->sort !== self::DEFAULT_SORT) {
+            $params['order'] = $this->sort;
+        }
+        if ($this->direction !== self::DEFAULT_DIRECTION) {
+            $params['direction'] = $this->direction;
+        }
+
+        return $params;
+    }
+
+    public function withoutFilter(string $key): self
+    {
+        return new self(
+            statusIds: $key === self::KEY_STATUS_IDS ? [] : $this->statusIds,
+            typeIds: $key === self::KEY_TYPE_IDS ? [] : $this->typeIds,
+            invoiceDateFrom: $key === self::KEY_INVOICE_DATE_RANGE ? null : $this->invoiceDateFrom,
+            invoiceDateTo: $key === self::KEY_INVOICE_DATE_RANGE ? null : $this->invoiceDateTo,
+            minAmount: $key === self::KEY_AMOUNT_RANGE ? null : $this->minAmount,
+            maxAmount: $key === self::KEY_AMOUNT_RANGE ? null : $this->maxAmount,
+            search: $key === self::KEY_SEARCH ? '' : $this->search,
+            sort: $this->sort,
+            direction: $this->direction,
+        );
+    }
+
+    public function applyTo(CreditNoteQuery $query): CreditNoteQuery
+    {
+        if ($this->statusIds !== []) {
+            $query->filterByStatusId($this->statusIds, Criteria::IN);
+        }
+        if ($this->typeIds !== []) {
+            $query->filterByTypeId($this->typeIds, Criteria::IN);
+        }
+        if ($this->invoiceDateFrom !== null) {
+            $query->filterByInvoiceDate($this->invoiceDateFrom->format('Y-m-d H:i:s'), Criteria::GREATER_EQUAL);
+        }
+        if ($this->invoiceDateTo !== null) {
+            $query->filterByInvoiceDate($this->invoiceDateTo->format('Y-m-d H:i:s'), Criteria::LESS_EQUAL);
+        }
+        if ($this->minAmount !== null) {
+            $query->filterByTotalPriceWithTax((string) $this->minAmount, Criteria::GREATER_EQUAL);
+        }
+        if ($this->maxAmount !== null) {
+            $query->filterByTotalPriceWithTax((string) $this->maxAmount, Criteria::LESS_EQUAL);
+        }
+
+        $this->applySearch($query);
+
+        $direction = $this->direction === 'asc' ? Criteria::ASC : Criteria::DESC;
+        match ($this->sort) {
+            'ref' => $query->orderByRef($direction),
+            'updated_at' => $query->orderByUpdatedAt($direction),
+            'total' => $query->orderByTotalPriceWithTax($direction),
+            default => $query->orderByCreatedAt($direction),
+        };
+
+        // Rows sharing the sorted value keep the same order from one page to the next.
+        return $query->orderById($direction);
+    }
+
+    private function applySearch(CreditNoteQuery $query): void
+    {
+        if ($this->search === '') {
+            return;
+        }
+
+        // Every word must be found in one of the fields, so "Diallo Mohamed" finds the customer
+        // whatever the order of the names. condition() and combine() keep each word's
+        // alternatives in one clause: chaining _or() would turn the whole WHERE into an OR with
+        // the other filters.
+        $words = \array_slice(preg_split('/\s+/u', $this->search, -1, \PREG_SPLIT_NO_EMPTY) ?: [], 0, self::MAX_SEARCH_WORDS);
+        $clauses = [];
+        foreach ($words as $index => $word) {
+            $needle = '%'.addcslashes($word, '%_\\').'%';
+            $query
+                ->condition("ref_$index", CreditNoteTableMap::COL_REF.' LIKE ?', $needle, \PDO::PARAM_STR)
+                ->condition("number_$index", CreditNoteTableMap::COL_INVOICE_REF.' LIKE ?', $needle, \PDO::PARAM_STR)
+                ->condition(
+                    "order_$index",
+                    'EXISTS (SELECT 1 FROM `order` o WHERE o.id = '.CreditNoteTableMap::COL_ORDER_ID.' AND o.ref LIKE ?)',
+                    $needle,
+                    \PDO::PARAM_STR,
+                )
+                ->condition(
+                    "customer_$index",
+                    'EXISTS (SELECT 1 FROM customer c WHERE c.id = '.CreditNoteTableMap::COL_CUSTOMER_ID
+                        .' AND CONCAT_WS(\' \', c.firstname, c.lastname, c.email) LIKE ?)',
+                    $needle,
+                    \PDO::PARAM_STR,
+                )
+                ->combine(["ref_$index", "number_$index", "order_$index", "customer_$index"], Criteria::LOGICAL_OR, "word_$index");
+            $clauses[] = "word_$index";
+        }
+
+        $query->combine($clauses, Criteria::LOGICAL_AND);
+    }
+
+    /**
+     * The text of the first of $keys given a non-empty word in the query string, '' otherwise.
+     *
+     * @param array<string, mixed> $query
+     */
+    private static function text(array $query, string ...$keys): string
+    {
+        foreach ($keys as $key) {
+            // An empty field of the form does not hide the previous parameter it replaces.
+            if (isset($query[$key]) && \is_scalar($query[$key]) && '' !== trim((string) $query[$key])) {
+                return (string) $query[$key];
+            }
+        }
+
+        return '';
+    }
+
+    /**
+     * @return list<int>
+     */
+    private static function parseIntArray(mixed $value): array
+    {
+        if (!\is_array($value)) {
+            return [];
+        }
+
+        $ids = [];
+        foreach ($value as $raw) {
+            if (\is_scalar($raw) && null !== $id = self::parsePositiveInt((string) $raw)) {
+                $ids[$id] = $id;
+            }
+        }
+
+        return array_values($ids);
+    }
+
+    private static function parsePositiveInt(string $value): ?int
+    {
+        $trimmed = trim($value);
+        if ($trimmed === '' || !ctype_digit($trimmed)) {
+            return null;
+        }
+
+        return (int) $trimmed > 0 ? (int) $trimmed : null;
+    }
+
+    private static function parseDate(string $value, bool $endOfDay): ?\DateTimeImmutable
+    {
+        $date = \DateTimeImmutable::createFromFormat('!Y-m-d', trim($value));
+        if ($date === false || $date->format('Y-m-d') !== trim($value)) {
+            return null;
+        }
+
+        return $endOfDay ? $date->setTime(23, 59, 59) : $date;
+    }
+
+    private static function parseAmount(string $value): ?float
+    {
+        $normalized = str_replace([' ', ','], ['', '.'], trim($value));
+        if ($normalized === '' || !is_numeric($normalized)) {
+            return null;
+        }
+
+        $amount = (float) $normalized;
+
+        // "1e400" is numeric but overflows to INF, which the database would read as 0.
+        return $amount >= 0 && is_finite($amount) ? $amount : null;
+    }
+}
diff --git a/Service/CreditNoteListReader.php b/Service/CreditNoteListReader.php
new file mode 100644
index 0000000..55dc2eb
--- /dev/null
+++ b/Service/CreditNoteListReader.php
@@ -0,0 +1,132 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CreditNote\Service;
+
+use CreditNote\Helper\BadgeColor;
+use CreditNote\Model\CreditNote;
+use CreditNote\Model\CreditNoteQuery;
+use CreditNote\Model\CreditNoteStatusQuery;
+use CreditNote\Model\CreditNoteTypeQuery;
+use CreditNote\Model\Map\CreditNoteTableMap;
+use Thelia\Model\CurrencyQuery;
+
+/**
+ * What the credit note list reads: a page of credit notes under the filters, the statuses and
+ * types offered as filters, and the bounds of the amount slider.
+ */
+final readonly class CreditNoteListReader
+{
+    /**
+     * A page past the last one (a bookmark on a list that shrank) shows the last page.
+     *
+     * @return array{rows: list<CreditNote>, current_page: int, last_page: int}
+     */
+    public function page(CreditNoteListFilters $filters, int $page, int $perPage): array
+    {
+        $page = max(1, $page);
+        $perPage = max(1, $perPage);
+
+        $pager = $this->query($filters)->paginate($page, $perPage);
+        // An empty list has no page at all for Propel: it still shows as its first page.
+        $lastPage = max(1, $pager->getLastPage());
+        if ($page > $lastPage) {
+            $page = $lastPage;
+            $pager = $this->query($filters)->paginate($page, $perPage);
+        }
+
+        $rows = [];
+        foreach ($pager as $creditNote) {
+            $rows[] = $creditNote;
+        }
+
+        return [
+            'rows' => $rows,
+            'current_page' => $page,
+            'last_page' => $lastPage,
+        ];
+    }
+
+    /**
+     * The customer, the order and the invoice address with its country are read with the
+     * credit notes: each row shows them. The statuses and types come from statuses() and types().
+     */
+    private function query(CreditNoteListFilters $filters): CreditNoteQuery
+    {
+        return $filters->applyTo(CreditNoteQuery::create())
+            ->joinWith('Customer')
+            ->leftJoinWith('Order')
+            ->joinWith('CreditNoteAddress')
+            ->joinWith('CreditNoteAddress.Country');
+    }
+
+    /**
+     * The titles come with the statuses (one query, translations joined).
+     *
+     * @return list<array{id: int, title: string, color: string}>
+     */
+    public function statuses(string $locale): array
+    {
+        $options = [];
+        foreach (CreditNoteStatusQuery::create()->joinWithI18n($locale)->orderByPosition()->find() as $status) {
+            $options[] = [
+                'id' => (int) $status->getId(),
+                'title' => (string) $status->setLocale($locale)->getTitle(),
+                'color' => BadgeColor::css($status->getColor()),
+            ];
+        }
+
+        return $options;
+    }
+
+    /**
+     * @return list<array{id: int, title: string, color: string}>
+     */
+    public function types(string $locale): array
+    {
+        $options = [];
+        foreach (CreditNoteTypeQuery::create()->joinWithI18n($locale)->orderByPosition()->find() as $type) {
+            $options[] = [
+                'id' => (int) $type->getId(),
+                'title' => (string) $type->setLocale($locale)->getTitle(),
+                'color' => BadgeColor::css($type->getColor()),
+            ];
+        }
+
+        return $options;
+    }
+
+    /**
+     * Bounds of the amount slider, rounded up from the largest credit note so its steps stay round.
+     *
+     * @return array{min: float, max: float, step: int, currency: string}
+     */
+    public function amountBounds(): array
+    {
+        $largest = (float) CreditNoteQuery::create()
+            ->withColumn('MAX('.CreditNoteTableMap::COL_TOTAL_PRICE_WITH_TAX.')', 'largest')
+            ->select(['largest'])
+            ->findOne();
+
+        $max = self::roundUpToNice($largest);
+
+        return [
+            'min' => 0.0,
+            'max' => (float) $max,
+            'step' => $max >= 5000 ? 100 : ($max >= 1000 ? 50 : 10),
+            'currency' => (string) (CurrencyQuery::create()->filterByByDefault(true)->findOne()?->getSymbol() ?? ''),
+        ];
+    }
+
+    private static function roundUpToNice(float $value): int
+    {
+        return match (true) {
+            $value <= 100 => 100,
+            $value <= 500 => 500,
+            $value <= 1000 => 1000,
+            $value <= 5000 => (int) (ceil($value / 500) * 500),
+            default => (int) (ceil($value / 1000) * 1000),
+        };
+    }
+}
diff --git a/Service/CreditNoteListRowPresenter.php b/Service/CreditNoteListRowPresenter.php
new file mode 100644
index 0000000..b1df40d
--- /dev/null
+++ b/Service/CreditNoteListRowPresenter.php
@@ -0,0 +1,244 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CreditNote\Service;
+
+use CreditNote\CreditNote as CreditNoteModule;
+use CreditNote\Helper\BadgeColor;
+use CreditNote\Model\CreditNote;
+use Symfony\Component\HttpFoundation\RequestStack;
+use Symfony\Component\Routing\Generator\UrlGeneratorInterface;
+use Symfony\Contracts\Translation\TranslatorInterface;
+use Thelia\Model\CurrencyQuery;
+use Thelia\Tools\MoneyFormat;
+
+/**
+ * A credit note as a row of the list, laid out like the order list of the back-office: the
+ * reference, the invoice reference with its date, the customer with the flag of the invoice
+ * country and the e-mail, the creation and update dates with their age. The actions are built
+ * by the template (row_action()).
+ */
+final readonly class CreditNoteListRowPresenter
+{
+    private const NO_OPTION = ['title' => '', 'color' => BadgeColor::FALLBACK];
+    private const CLOCK_TOLERANCE = 60;
+
+    public function __construct(
+        private UrlGeneratorInterface $urls,
+        private TranslatorInterface $translator,
+        private RequestStack $requestStack,
+        private CreditNoteListReader $reader,
+    ) {
+    }
+
+    /**
+     * The titles of the statuses and types and the symbols of the currencies are read once for
+     * the page, not once per row.
+     *
+     * @param iterable<CreditNote> $creditNotes
+     *
+     * @return list<array<string, mixed>>
+     */
+    public function presentAll(iterable $creditNotes, string $locale): array
+    {
+        $statuses = array_column($this->reader->statuses($locale), null, 'id');
+        $types = array_column($this->reader->types($locale), null, 'id');
+        $symbols = [];
+
+        $rows = [];
+        foreach ($creditNotes as $creditNote) {
+            $currencyId = (int) $creditNote->getCurrencyId();
+            $symbols[$currencyId] ??= (string) CurrencyQuery::create()->findPk($currencyId)?->getSymbol();
+
+            $rows[] = $this->present(
+                $creditNote,
+                $statuses[(int) $creditNote->getStatusId()] ?? self::NO_OPTION,
+                $types[(int) $creditNote->getTypeId()] ?? self::NO_OPTION,
+                $symbols[$currencyId],
+            );
+        }
+
+        return $rows;
+    }
+
+    /**
+     * @param array{title: string, color: string} $status
+     * @param array{title: string, color: string} $type
+     *
+     * @return array<string, mixed>
+     */
+    private function present(CreditNote $creditNote, array $status, array $type, string $currencySymbol): array
+    {
+        $id = (int) $creditNote->getId();
+        $viewUrl = $this->urls->generate('credit_note_view', ['id' => $id]);
+
+        return [
+            'id' => $id,
+            'ref' => (string) $creditNote->getRef(),
+            'label' => (string) $creditNote->getRef() !== '' ? (string) $creditNote->getRef() : '#'.$id,
+            'ref_html' => $this->renderRef($creditNote, $viewUrl),
+            'invoice_html' => $this->renderInvoice($creditNote),
+            'customer_html' => $this->renderCustomer($creditNote),
+            'order_html' => $this->renderOrder($creditNote),
+            'status_id' => (int) $creditNote->getStatusId(),
+            'status' => $status['title'],
+            'status_color' => $status['color'],
+            'type_id' => (int) $creditNote->getTypeId(),
+            'type' => $type['title'],
+            'type_color' => $type['color'],
+            'amount_html' => $this->renderAmount($creditNote, $currencySymbol),
+            'created_html' => $this->renderDate($creditNote->getCreatedAt()),
+            'updated_html' => $this->renderDate($creditNote->getUpdatedAt()),
+            'numbered' => (string) $creditNote->getInvoiceRef() !== '',
+            'view_url' => $viewUrl,
+            'delete_url' => $this->urls->generate('credit_note_delete', ['id' => $id]),
+            'pdf_url' => $this->urls->generate('credit_note_invoice_pdf', ['creditNoteId' => $id, 'browser' => 0]),
+        ];
+    }
+
+    /**
+     * The reference opens the modal of the credit note, as its row buttons do.
+     */
+    private function renderRef(CreditNote $creditNote, string $viewUrl): string
+    {
+        $ref = (string) $creditNote->getRef();
+
+        return \sprintf(
+            '<button type="button" class="btn btn-link p-0 fw-semibold text-decoration-none text-start" data-bs-toggle="modal" data-bs-target="#modal-credit-note" data-ajax-url="%s" data-action="view" data-testid="credit-note-ref-link">%s</button>',
+            self::escape($viewUrl),
+            self::escape($ref !== '' ? $ref : '#'.$creditNote->getId()),
+        );
+    }
+
+    /**
+     * The invoice reference of the credit note (drawn on acceptance, from the series of the
+     * invoices when `invoice_ref_with_thelia_order` is on) and the date of its document.
+     */
+    private function renderInvoice(CreditNote $creditNote): string
+    {
+        $number = (string) $creditNote->getInvoiceRef();
+        if ($number === '') {
+            return \sprintf(
+                '<span class="text-muted small fst-italic">%s</span>',
+                self::escape($this->translator->trans('Not numbered yet', [], CreditNoteModule::DOMAIN_MESSAGE)),
+            );
+        }
+
+        $date = $creditNote->getInvoiceDate();
+        if (null === $date) {
+            return \sprintf('<div data-testid="credit-note-invoice-ref">%s</div>', self::escape($number));
+        }
+
+        return \sprintf(
+            '<div data-testid="credit-note-invoice-ref">%s</div><div class="text-muted small"><time datetime="%s">%s</time></div>',
+            self::escape($number),
+            self::escape($date->format(\DateTimeInterface::ATOM)),
+            self::escape($date->format('d/m/Y')),
+        );
+    }
+
+    private function renderCustomer(CreditNote $creditNote): string
+    {
+        $customer = $creditNote->getCustomer();
+        if (null === $customer) {
+            return '<span class="text-muted">-</span>';
+        }
+
+        $country = $creditNote->getCreditNoteAddress()?->getCountry();
+
+        return \sprintf(
+            '<div class="bo-order-customer"><a class="fw-semibold text-reset text-decoration-none" href="%s">%s%s %s</a><div class="text-muted small text-truncate">%s</div></div>',
+            self::escape($this->urls->generate('admin.customer.update.view', ['customer_id' => $customer->getId()])),
+            self::countryFlag($country?->getIsoalpha2()),
+            self::escape((string) $customer->getFirstname()),
+            self::escape((string) $customer->getLastname()),
+            self::escape((string) $customer->getEmail()),
+        );
+    }
+
+    private function renderOrder(CreditNote $creditNote): string
+    {
+        $order = $creditNote->getOrder();
+        if (null === $order) {
+            return '<span class="text-muted">-</span>';
+        }
+
+        return \sprintf(
+            '<a href="%s" class="text-decoration-none">%s</a>',
+            self::escape($this->urls->generate('admin.order.update.view', ['order_id' => $order->getId()])),
+            self::escape((string) $order->getRef()),
+        );
+    }
+
+    private function renderAmount(CreditNote $creditNote, string $currencySymbol): string
+    {
+        return \sprintf(
+            '<div class="text-nowrap" dir="ltr">%s</div><div class="text-muted small text-nowrap">%s</div>',
+            self::escape($this->formatMoney($creditNote->getTotalPriceWithTax(), $currencySymbol)),
+            self::escape($this->translator->trans('%amount% excl. tax', ['%amount%' => $this->formatMoney($creditNote->getTotalPrice(), $currencySymbol)], CreditNoteModule::DOMAIN_MESSAGE)),
+        );
+    }
+
+    private function renderDate(?\DateTimeInterface $date): string
+    {
+        if (null === $date) {
+            return '<span class="text-muted">-</span>';
+        }
+
+        $display = $date->format('d/m/Y H:i');
+        $age = $this->age($date);
+
+        return \sprintf(
+            '<time datetime="%s" title="%s"><div>%s</div>%s</time>',
+            self::escape($date->format(\DateTimeInterface::ATOM)),
+            self::escape($display),
+            self::escape($display),
+            null === $age ? '' : '<div class="text-muted small">'.self::escape($age).'</div>',
+        );
+    }
+
+    /**
+     * The age of a recent date; none past 30 days, where it would only repeat the date, nor for
+     * a date ahead of the clock (a shifted server clock or an import), which has no age.
+     *
+     * A date saved a moment ago can read up to a second ahead: Propel writes the microseconds
+     * and the DATETIME column rounds them to the nearest second. That is still "just now".
+     */
+    private function age(\DateTimeInterface $date): ?string
+    {
+        $seconds = time() - $date->getTimestamp();
+
+        return match (true) {
+            $seconds < -self::CLOCK_TOLERANCE => null,
+            $seconds < 60 => $this->translator->trans('Just now', [], CreditNoteModule::DOMAIN_MESSAGE),
+            $seconds < 3600 => $this->translator->trans('%count% min ago', ['%count%' => intdiv($seconds, 60)], CreditNoteModule::DOMAIN_MESSAGE),
+            $seconds < 86400 => $this->translator->trans('%count% h ago', ['%count%' => intdiv($seconds, 3600)], CreditNoteModule::DOMAIN_MESSAGE),
+            $seconds < 30 * 86400 => $this->translator->trans('%count% d ago', ['%count%' => intdiv($seconds, 86400)], CreditNoteModule::DOMAIN_MESSAGE),
+            default => null,
+        };
+    }
+
+    private function formatMoney(float|string|null $amount, string $currencySymbol): string
+    {
+        return MoneyFormat::getInstance($this->requestStack->getCurrentRequest())
+            ->format((float) $amount, null, null, null, $currencySymbol);
+    }
+
+    private static function countryFlag(?string $iso): string
+    {
+        if (null === $iso || 1 !== preg_match('/^[A-Za-z]{2}$/D', $iso)) {
+            return '';
+        }
+
+        $offset = 0x1F1E6 - \ord('A');
+        $upper = strtoupper($iso);
+
+        return mb_chr(\ord($upper[0]) + $offset).mb_chr(\ord($upper[1]) + $offset).' ';
+    }
+
+    private static function escape(string $value): string
+    {
+        return htmlspecialchars($value, \ENT_QUOTES | \ENT_HTML5);
+    }
+}
diff --git a/templates/backOffice/default-twig/credit-note-list.html.twig b/templates/backOffice/default-twig/credit-note-list.html.twig
index bba8d60..6dd558b 100644
--- a/templates/backOffice/default-twig/credit-note-list.html.twig
+++ b/templates/backOffice/default-twig/credit-note-list.html.twig
@@ -1,6 +1,6 @@
-{# Credit-note list page. Flat default-twig page rendered by CreditNoteController::listAction
-   ($this->render('credit-note-list') resolves the parser per active BO template since core ad57a43).
-   Data (rows, pagination, filters) is supplied by the controller / CreditNoteHookPresenter. #}
+{# Credit-note list page, laid out like the order list of default-twig (search, collapsed advanced
+   filters, active filter chips, BoDataTable, BoPagination). Rendered by CreditNoteController::listAction;
+   rows by CreditNoteListRowPresenter, filters by CreditNoteListFilterPresenter. #}
 {% extends '@BackOfficeDefaultTwig/base.html.twig' %}
 
 {% block title %}{{ 'Credit notes'|trans({}, 'creditnote.bo.default-twig') }}{% endblock %}
@@ -19,139 +19,236 @@
     {{ safe_hook('credit-notes.top') }}
 
     <div class="container-fluid" id="module-credit-note" data-testid="credit-notes-page">
+        {% embed '@BackOfficeDefaultTwig/_page_header.html.twig' with { title: 'Credit notes management'|trans({}, 'creditnote.bo.default-twig') } %}
+            {% block actions %}
+                <button type="button" class="btn btn-sm btn-primary"
+                        data-bs-toggle="modal" data-bs-target="#modal-credit-note"
+                        data-ajax-url="{{ path('credit_note_ajax_create') }}"
+                        data-action="create"
+                        data-testid="credit-note-create">
+                    <i class="bi bi-plus-lg me-1" aria-hidden="true"></i>{{ 'Add a new credit note'|trans({}, 'creditnote.bo.default-twig') }}
+                </button>
+            {% endblock %}
+        {% endembed %}
 
-        {# ---- Search ---- #}
-        <div class="card mb-3">
-            <div class="card-header">
-                <h2 class="h5 mb-0">{{ 'Search'|trans({}, 'creditnote.bo.default-twig') }}</h2>
+        <form method="get" action="{{ path('credit_note_list') }}" class="bo-order-filters" data-testid="credit-note-search-form">
+            <div class="row g-2 align-items-end">
+                <div class="col-md-9">
+                    <label class="form-label" for="credit-note-search-q">{{ 'Search'|trans({}, 'creditnote.bo.default-twig') }}</label>
+                    <input type="search" id="credit-note-search-q" name="q" value="{{ filters.search_input }}"
+                           class="form-control"
+                           placeholder="{{ 'Reference, number, order, customer name or email'|trans({}, 'creditnote.bo.default-twig') }}"
+                           data-testid="credit-note-search-input">
+                </div>
+                <div class="col-md-3 d-flex align-items-end gap-2">
+                    <button type="submit" class="btn btn-primary flex-grow-1" data-testid="credit-note-search-submit">
+                        <i class="bi bi-funnel me-1" aria-hidden="true"></i>{{ 'Apply'|trans({}, 'creditnote.bo.default-twig') }}
+                    </button>
+                    <a href="{{ filters.clear_all_url }}" class="btn btn-outline-secondary" data-testid="credit-note-reset">{{ 'Reset'|trans({}, 'creditnote.bo.default-twig') }}</a>
+                </div>
             </div>
-            <div class="card-body">
-                <form action="{{ path('credit_note_list') }}" method="get" class="row g-3 align-items-end">
-                    <div class="col-md-4">
-                        <label class="form-label" for="cn-search-ref">{{ 'Credit Note reference'|trans({}, 'creditnote.bo.default-twig') }}</label>
-                        <input type="text" id="cn-search-ref" class="form-control" name="ref" value="{{ filter_ref }}">
+
+            <div class="mt-3">
+                <button type="button" class="btn btn-link p-0 bo-order-filters__toggle" data-bs-toggle="collapse"
+                        data-bs-target="#bo-credit-note-advanced" aria-controls="bo-credit-note-advanced"
+                        aria-expanded="false"
+                        data-testid="credit-note-advanced-toggle">
+                    <i class="bi bi-sliders me-1" aria-hidden="true"></i>
+                    <span class="bo-order-filters__toggle-label">{{ 'Advanced filters'|trans({}, 'creditnote.bo.default-twig') }}</span>
+                    {% if filters.advanced_count > 0 %}
+                        <span class="badge bg-primary ms-1">{{ filters.advanced_count }}</span>
+                    {% endif %}
+                    <i class="bi bi-chevron-down ms-1 bo-order-filters__toggle-caret" aria-hidden="true"></i>
+                </button>
+            </div>
+
+            <div id="bo-credit-note-advanced" class="bo-order-filters__panel collapse" data-testid="credit-note-advanced-panel">
+                <div class="row g-2 pt-2">
+                    <div class="col-md-6 col-lg-4">
+                        <fieldset>
+                            <legend class="form-label">{{ 'Status'|trans({}, 'creditnote.bo.default-twig') }}</legend>
+                            <div class="d-flex flex-wrap gap-2">
+                                {% for option in filters.status_options %}
+                                    {% set checked = option.id in filters.selected_status_ids %}
+                                    <label class="bo-order-filters__pill" data-checked="{{ checked ? 'true' : 'false' }}"
+                                           style="--pill-color: {{ option.color }};">
+                                        <input type="checkbox" class="visually-hidden" name="status_ids[]"
+                                               value="{{ option.id }}" {{ checked ? 'checked' : '' }}
+                                               data-testid="credit-note-filter-status-{{ option.id }}">
+                                        <span class="bo-order-filters__pill-dot" aria-hidden="true"></span>
+                                        {{ option.title }}
+                                    </label>
+                                {% endfor %}
+                            </div>
+                        </fieldset>
                     </div>
-                    <div class="col-md-3">
-                        <label class="form-label" for="cn-search-min">{{ 'From'|trans({}, 'creditnote.bo.default-twig') }}</label>
-                        <input type="date" id="cn-search-min" class="form-control" name="creditNoteDateMin" value="{{ filter_date_min }}">
+
+                    <div class="col-md-6 col-lg-4">
+                        <fieldset>
+                            <legend class="form-label">{{ 'Type'|trans({}, 'creditnote.bo.default-twig') }}</legend>
+                            <div class="d-flex flex-wrap gap-2">
+                                {% for option in filters.type_options %}
+                                    {% set checked = option.id in filters.selected_type_ids %}
+                                    <label class="bo-order-filters__pill" data-checked="{{ checked ? 'true' : 'false' }}"
+                                           style="--pill-color: {{ option.color }};">
+                                        <input type="checkbox" class="visually-hidden" name="type_ids[]"
+                                               value="{{ option.id }}" {{ checked ? 'checked' : '' }}
+                                               data-testid="credit-note-filter-type-{{ option.id }}">
+                                        <span class="bo-order-filters__pill-dot" aria-hidden="true"></span>
+                                        {{ option.title }}
+                                    </label>
+                                {% endfor %}
+                            </div>
+                        </fieldset>
                     </div>
-                    <div class="col-md-3">
-                        <label class="form-label" for="cn-search-max">{{ 'To'|trans({}, 'creditnote.bo.default-twig') }}</label>
-                        <input type="date" id="cn-search-max" class="form-control" name="creditNoteDateMax" value="{{ filter_date_max }}">
+
+                    <div class="col-md-6 col-lg-4">
+                        <fieldset>
+                            <legend class="form-label">{{ 'Invoice date between'|trans({}, 'creditnote.bo.default-twig') }}</legend>
+                            <div class="row g-2">
+                                <div class="col">
+                                    <input type="date" name="invoice_date_from" value="{{ filters.invoice_date_from_input }}"
+                                           class="form-control form-control-sm" aria-label="{{ 'From'|trans({}, 'creditnote.bo.default-twig') }}"
+                                           data-testid="credit-note-filter-invoice-date-from">
+                                </div>
+                                <div class="col">
+                                    <input type="date" name="invoice_date_to" value="{{ filters.invoice_date_to_input }}"
+                                           class="form-control form-control-sm" aria-label="{{ 'To'|trans({}, 'creditnote.bo.default-twig') }}"
+                                           data-testid="credit-note-filter-invoice-date-to">
+                                </div>
+                            </div>
+                        </fieldset>
                     </div>
-                    <div class="col-md-2 d-flex gap-2">
-                        <button class="btn btn-primary" type="submit">
-                            <i class="bi bi-search"></i> {{ 'Search'|trans({}, 'creditnote.bo.default-twig') }}
-                        </button>
-                        <a class="btn btn-outline-secondary" href="{{ path('credit_note_list') }}">{{ 'Clean selection'|trans({}, 'creditnote.bo.default-twig') }}</a>
+
+                    <div class="col-md-6 col-lg-4">
+                        <fieldset>
+                            <legend class="form-label">{{ 'Total amount (TTC)'|trans({}, 'creditnote.bo.default-twig') }}</legend>
+                            <div class="bo-range-slider" data-controller="bo-range-slider"
+                                 data-bo-range-slider-min-value="{{ filters.amount_slider.min }}"
+                                 data-bo-range-slider-max-value="{{ filters.amount_slider.max }}"
+                                 data-bo-range-slider-step-value="{{ filters.amount_slider.step }}">
+                                <div class="bo-range-slider__rail">
+                                    <div class="bo-range-slider__track">
+                                        <div class="bo-range-slider__fill" data-bo-range-slider-target="fill"></div>
+                                    </div>
+                                    <input type="range" class="bo-range-slider__handle"
+                                           data-bo-range-slider-target="minRange"
+                                           data-action="input->bo-range-slider#onMinRange"
+                                           min="{{ filters.amount_slider.min }}" max="{{ filters.amount_slider.max }}"
+                                           step="{{ filters.amount_slider.step }}"
+                                           value="{{ filters.amount_slider.min }}"
+                                           aria-label="{{ 'Min'|trans({}, 'creditnote.bo.default-twig') }}">
+                                    <input type="range" class="bo-range-slider__handle"
+                                           data-bo-range-slider-target="maxRange"
+                                           data-action="input->bo-range-slider#onMaxRange"
+                                           min="{{ filters.amount_slider.min }}" max="{{ filters.amount_slider.max }}"
+                                           step="{{ filters.amount_slider.step }}"
+                                           value="{{ filters.amount_slider.max }}"
+                                           aria-label="{{ 'Max'|trans({}, 'creditnote.bo.default-twig') }}">
+                                </div>
+                                <div class="row g-1 mt-1">
+                                    <div class="col">
+                                        <div class="input-group input-group-sm">
+                                            <input type="text" name="min_amount" value="{{ filters.min_amount_input }}"
+                                                   class="form-control" placeholder="{{ 'Min'|trans({}, 'creditnote.bo.default-twig') }}" inputmode="decimal"
+                                                   aria-label="{{ 'Min'|trans({}, 'creditnote.bo.default-twig') }}"
+                                                   data-bo-range-slider-target="minInput"
+                                                   data-action="change->bo-range-slider#onMinInput"
+                                                   data-testid="credit-note-filter-min-amount">
+                                            <span class="input-group-text">{{ filters.amount_slider.currency }}</span>
+                                        </div>
+                                    </div>
+                                    <div class="col">
+                                        <div class="input-group input-group-sm">
+                                            <input type="text" name="max_amount" value="{{ filters.max_amount_input }}"
+                                                   class="form-control" placeholder="{{ 'Max'|trans({}, 'creditnote.bo.default-twig') }}" inputmode="decimal"
+                                                   aria-label="{{ 'Max'|trans({}, 'creditnote.bo.default-twig') }}"
+                                                   data-bo-range-slider-target="maxInput"
+                                                   data-action="change->bo-range-slider#onMaxInput"
+                                                   data-testid="credit-note-filter-max-amount">
+                                            <span class="input-group-text">{{ filters.amount_slider.currency }}</span>
+                                        </div>
+                                    </div>
+                                </div>
+                            </div>
+                        </fieldset>
                     </div>
-                </form>
+                </div>
             </div>
-        </div>
 
-        {# ---- Table ---- #}
-        <div class="card">
-            <div class="card-body">
-                <div class="d-flex justify-content-between align-items-center mb-3">
-                    <h2 class="h5 mb-0">{{ 'Credit notes'|trans({}, 'creditnote.bo.default-twig') }}</h2>
-                    <a class="btn btn-primary btn-sm"
-                       title="{{ 'Add a new credit note'|trans({}, 'creditnote.bo.default-twig') }}"
-                       data-bs-toggle="modal" data-bs-target="#modal-credit-note"
-                       data-ajax-url="{{ path('credit_note_ajax_create') }}"
-                       data-action="create">
-                        <i class="bi bi-plus-lg"></i> {{ 'Add a new credit note'|trans({}, 'creditnote.bo.default-twig') }}
-                    </a>
-                </div>
+            <input type="hidden" name="order" value="{{ filters.sort_field }}">
+            <input type="hidden" name="direction" value="{{ filters.sort_direction }}">
+        </form>
 
-                <div class="table-responsive">
-                    <table class="table table-striped table-sm align-middle">
-                        <thead>
-                        <tr>
-                            <th>{{ '#'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                            <th>{{ 'Ref'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                            <th>{{ 'Invoice ref'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                            <th>{{ 'Invoice date'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                            <th>{{ 'Create date'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                            <th>{{ 'Update date'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                            <th>{{ 'Customer'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                            <th>{{ 'Order'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                            <th>{{ 'Status'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                            <th>{{ 'Type'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                            <th>{{ 'Total with tax'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                            <th>{{ 'Total without tax'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                            <th class="action">{{ 'Action'|trans({}, 'creditnote.bo.default-twig') }}</th>
-                        </tr>
-                        </thead>
-                        <tbody>
-                        {% for cn in credit_notes %}
-                            <tr>
-                                <td>{{ cn.id }}</td>
-                                <td>{{ cn.ref }}</td>
-                                <td>{{ cn.invoice_ref }}</td>
-                                <td>{{ cn.invoice_date ? cn.invoice_date|date('d/m/Y') : '' }}</td>
-                                <td>{{ cn.create_date ? cn.create_date|date('d/m/Y') : '' }}</td>
-                                <td>{{ cn.update_date ? cn.update_date|date('d/m/Y') : '' }}</td>
-                                <td>
-                                    {% if cn.customer_id %}
-                                        <a href="/admin/customer/update?customer_id={{ cn.customer_id }}">{{ cn.customer_name }}</a>
-                                    {% endif %}
-                                </td>
-                                <td>
-                                    {% if cn.order_id %}
-                                        <a href="{{ path('admin.order.update.view', {order_id: cn.order_id}) }}">{{ cn.order_ref }}</a>
-                                    {% endif %}
-                                </td>
-                                <td><span class="badge" style="background-color: {{ cn.status_color }}">{{ cn.status_title }}</span></td>
-                                <td><span class="badge" style="background-color: {{ cn.type_color }}">{{ cn.type_title }}</span></td>
-                                <td>{{ cn.total_price_with_tax }}</td>
-                                <td>{{ cn.total_price }}</td>
-                                <td class="action">
-                                    {% if not cn.invoice_ref %}
-                                        <button class="btn btn-info btn-sm"
-                                                data-bs-toggle="modal" data-bs-target="#modal-credit-note"
-                                                data-ajax-url="/admin/credit-note/{{ cn.id }}"
-                                                data-action="view">{{ 'Edit'|trans({}, 'creditnote.bo.default-twig') }}</button>
-                                        <button class="btn btn-danger btn-sm"
-                                                data-bs-toggle="modal" data-bs-target="#modal-credit-note-delete"
-                                                data-ajax-url="/admin/credit-note/{{ cn.id }}/_delete"
-                                                data-action="delete">{{ 'Delete'|trans({}, 'creditnote.bo.default-twig') }}</button>
-                                    {% else %}
-                                        <button class="btn btn-primary btn-sm"
-                                                data-bs-toggle="modal" data-bs-target="#modal-credit-note"
-                                                data-ajax-url="/admin/credit-note/{{ cn.id }}"
-                                                data-action="view">{{ 'View'|trans({}, 'creditnote.bo.default-twig') }}</button>
-                                        <a class="btn btn-secondary btn-sm"
-                                           href="/admin/credit-note/pdf/invoice/{{ cn.id }}/0">{{ 'PDF'|trans({}, 'creditnote.bo.default-twig') }}</a>
-                                    {% endif %}
-                                </td>
-                            </tr>
-                        {% else %}
-                            <tr>
-                                <td colspan="13">
-                                    <div class="alert alert-info mb-0">
-                                        {{ 'You have no credit notes for the moment.'|trans({}, 'creditnote.bo.default-twig') }}
-                                    </div>
-                                </td>
-                            </tr>
-                        {% endfor %}
-                        </tbody>
-                    </table>
+        {% if filters.active_chips %}
+            <div class="bo-order-filters__active-chips d-flex align-items-center gap-2 mt-3" data-testid="credit-note-active-chips">
+                <span class="text-muted small flex-shrink-0">{{ 'Active filters:'|trans({}, 'creditnote.bo.default-twig') }}</span>
+                <div class="d-flex flex-nowrap align-items-center gap-2 overflow-x-auto" role="region" tabindex="0" aria-label="{{ 'Active filters:'|trans({}, 'creditnote.bo.default-twig') }}">
+                    {% for chip in filters.active_chips %}
+                        <a class="bo-order-filters__chip d-inline-flex align-items-center gap-1 text-decoration-none flex-shrink-0"
+                           href="{{ chip.remove_url }}"
+                           data-testid="credit-note-active-chip-{{ chip.key }}"
+                           title="{{ 'Remove this filter'|trans({}, 'creditnote.bo.default-twig') }}">
+                            <span class="bo-order-filters__chip-label">{{ chip.label }}:</span>
+                            <strong class="bo-order-filters__chip-value">{{ chip.value }}</strong>
+                            <i class="bi bi-x-lg" aria-hidden="true"></i>
+                        </a>
+                    {% endfor %}
                 </div>
-
-                {% if page_count > 1 %}
-                    {% set qs = app.request.query.all %}
-                    <nav aria-label="{{ 'Pagination'|trans({}, 'creditnote.bo.default-twig') }}">
-                        <ul class="pagination justify-content-center mb-0">
-                            {% for p in 1..page_count %}
-                                {% set pageQs = qs|merge({credit_note_page: p}) %}
-                                <li class="page-item {{ p == current_page ? 'active' : '' }}">
-                                    <a class="page-link" href="{{ path('credit_note_list', pageQs) }}">{{ p }}</a>
-                                </li>
-                            {% endfor %}
-                        </ul>
-                    </nav>
-                {% endif %}
+                <a class="bo-order-filters__clear-all small text-decoration-none ms-1 flex-shrink-0"
+                   href="{{ filters.clear_all_url }}"
+                   data-testid="credit-note-clear-all">
+                    <i class="bi bi-eraser me-1" aria-hidden="true"></i>{{ 'Clear all'|trans({}, 'creditnote.bo.default-twig') }}
+                </a>
             </div>
+        {% endif %}
+
+        <div class="mt-3">
+            {#- A credit note stays editable and deletable until it is numbered; then it can only be
+                viewed and printed. View, edit and delete open the modals of the module. -#}
+            {% set grant = { resource: 'admin.module', module: 'creditnote' } %}
+            {% set rows = rows|map(row => row|merge({
+                _actions: row.numbered ? [
+                    row_action('view', 'View'|trans({}, 'creditnote.bo.default-twig'), modalTarget: '#modal-credit-note', dataAttributes: { 'ajax-url': row.view_url, action: 'view' }),
+                    row_action('invoice', 'PDF'|trans({}, 'creditnote.bo.default-twig'), href: row.pdf_url),
+                ] : [
+                    row_action('edit', 'Edit'|trans({}, 'creditnote.bo.default-twig'), modalTarget: '#modal-credit-note', grantedAttribute: 'UPDATE', grantedSubject: grant, dataAttributes: { 'ajax-url': row.view_url, action: 'view' }),
+                    row_action('delete', 'Delete'|trans({}, 'creditnote.bo.default-twig'), modalTarget: '#modal-credit-note-delete', grantedAttribute: 'DELETE', grantedSubject: grant, dataAttributes: { 'ajax-url': row.delete_url, action: 'delete' }),
+                ],
+            })) %}
+
+            {{ component('BoDataTable', {
+                id: 'credit-notes',
+                columns: [
+                    column_html('ref_html', 'Reference'|trans({}, 'creditnote.bo.default-twig'), 'start', 'ref'),
+                    column_html('invoice_html', 'Inv. ref'|trans({}, 'creditnote.bo.default-twig'), visibleFrom: 'md'),
+                    column_html('customer_html', 'Customer'|trans({}, 'creditnote.bo.default-twig'), visibleFrom: 'lg'),
+                    column_html('order_html', 'Order'|trans({}, 'creditnote.bo.default-twig'), visibleFrom: 'md'),
+                    column_badge('status_id', 'Status'|trans({}, 'creditnote.bo.default-twig'), {}, 'start', 'status', 'status_color'),
+                    column_badge('type_id', 'Type'|trans({}, 'creditnote.bo.default-twig'), {}, 'start', 'type', 'type_color', visibleFrom: 'xl'),
+                    column_html('amount_html', 'Total'|trans({}, 'creditnote.bo.default-twig'), 'end', 'total'),
+                    column_html('created_html', 'Create date'|trans({}, 'creditnote.bo.default-twig'), 'start', 'created_at', visibleFrom: 'lg'),
+                    column_html('updated_html', 'Update date'|trans({}, 'creditnote.bo.default-twig'), 'start', 'updated_at', visibleFrom: 'xl'),
+                    column_actions('_actions', 'Actions'|trans({}, 'creditnote.bo.default-twig')),
+                ],
+                rows: rows,
+                emptyMessage: 'No credit note matches the current filters.'|trans({}, 'creditnote.bo.default-twig'),
+                sortField: filters.sort_field,
+                sortDirection: filters.sort_direction,
+                sortParam: 'order',
+                sortDirectionParam: 'direction',
+                sortKeepParams: query_params,
+                rowIdentifierKey: 'label',
+            }) }}
+
+            {{ component('BoPagination', {
+                route: 'credit_note_list',
+                currentPage: current_page,
+                lastPage: pages,
+                routeParams: query_params,
+                ariaLabel: 'Credit note pagination'|trans({}, 'creditnote.bo.default-twig'),
+                testid: 'credit-note-pagination',
+            }) }}
         </div>
 
         {{ safe_hook('credit-notes.bottom') }}
diff --git a/tests/Integration/CreditNoteListTest.php b/tests/Integration/CreditNoteListTest.php
new file mode 100644
index 0000000..ea78c1b
--- /dev/null
+++ b/tests/Integration/CreditNoteListTest.php
@@ -0,0 +1,231 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CreditNote\Tests\Integration;
+
+use CreditNote\CreditNote;
+use CreditNote\Model\CreditNoteStatusQuery;
+use CreditNote\Model\CreditNoteTypeQuery;
+use CreditNote\Service\CreditNoteListFilterPresenter;
+use CreditNote\Service\CreditNoteListFilters;
+use CreditNote\Service\CreditNoteListReader;
+use CreditNote\Service\CreditNoteListRowPresenter;
+use CreditNote\Tests\Support\CreditNoteFixture;
+use PHPUnit\Framework\Attributes\Test;
+use Symfony\Component\HttpFoundation\Request;
+use Thelia\Model\ModuleQuery;
+use Thelia\Test\IntegrationTestCase;
+
+/**
+ * The credit note list of the back-office: what its search and filters keep, and how a row
+ * shows a credit note (its number under its reference, its customer as on the order list).
+ * Every search names the customer of the test, so the credit notes already in the database
+ * stay out of the results.
+ */
+final class CreditNoteListTest extends IntegrationTestCase
+{
+    private CreditNoteFixture $fixture;
+
+    protected function setUp(): void
+    {
+        parent::setUp();
+
+        if (!ModuleQuery::create()->findOneByCode(CreditNote::getModuleCode())?->getActivate()) {
+            self::markTestSkipped('The CreditNote module is not active in the test database.');
+        }
+
+        $this->fixture = new CreditNoteFixture($this->getPropelConnection());
+    }
+
+    #[Test]
+    public function theSearchFindsACreditNoteByItsReferenceItsNumberItsOrderOrItsCustomer(): void
+    {
+        $customer = $this->fixture->customer();
+        $order = $this->fixture->paidOrder($customer);
+        $onOrder = $this->fixture->creditNote($customer, $order, 'accepted');
+        $onOrder->save();
+        $rebate = $this->fixture->creditNote($customer, null, 'proposed', 1, 'rebate');
+        $rebate->save();
+
+        self::assertEqualsCanonicalizing([$onOrder->getId(), $rebate->getId()], $this->ids(['q' => $customer->getEmail()]));
+        self::assertSame([$onOrder->getId()], $this->ids(['q' => $order->getRef()]));
+        self::assertSame([$onOrder->getId()], $this->ids(['q' => $onOrder->getRef()]));
+        self::assertSame([$onOrder->getId()], $this->ids(['q' => $onOrder->getInvoiceRef()]), 'the number of an accepted credit note is searched too');
+    }
+
+    #[Test]
+    public function theStatusTypeAndAmountFiltersNarrowTheSearch(): void
+    {
+        $customer = $this->fixture->customer();
+        $accepted = $this->fixture->creditNote($customer, $this->fixture->paidOrder($customer), 'accepted');
+        $accepted->save();
+        $rebate = $this->fixture->creditNote($customer, null, 'proposed', 1, 'rebate');
+        $rebate->save();
+        $search = ['q' => $customer->getEmail()];
+
+        $acceptedStatus = CreditNoteStatusQuery::create()->findOneByCode('accepted');
+        $rebateType = CreditNoteTypeQuery::create()->findOneByCode('rebate');
+
+        self::assertSame([$accepted->getId()], $this->ids($search + ['status_ids' => [$acceptedStatus->getId()]]));
+        self::assertSame([$rebate->getId()], $this->ids($search + ['type_ids' => [$rebateType->getId()]]));
+        self::assertSame([$accepted->getId()], $this->ids($search + ['min_amount' => '100']), '117.60 with tax against 12.00');
+        self::assertSame([$rebate->getId()], $this->ids($search + ['max_amount' => '12']), 'the bounds are inclusive');
+    }
+
+    #[Test]
+    public function everyWordOfTheSearchMustBeFoundWhateverTheirOrder(): void
+    {
+        $customer = $this->fixture->customer();
+        $creditNote = $this->fixture->creditNote($customer, null, 'proposed', 1, 'rebate');
+        $creditNote->save();
+
+        self::assertSame([$creditNote->getId()], $this->ids(['q' => 'Diallo Mohamed '.$customer->getEmail()]), 'the last name before the first name');
+        self::assertSame([], $this->ids(['q' => 'Diallo Nobody '.$customer->getEmail()]), 'a word found nowhere excludes the credit note');
+    }
+
+    #[Test]
+    public function theDateFilterBoundsTheInvoiceDateWhichADraftCarriesFromItsCreation(): void
+    {
+        $customer = $this->fixture->customer();
+        $accepted = $this->fixture->creditNote($customer, $this->fixture->paidOrder($customer), 'accepted');
+        $accepted->save();
+        $draft = $this->fixture->creditNote($customer, null);
+        $draft->save();
+        $today = (new \DateTimeImmutable())->format('Y-m-d');
+        $yesterday = (new \DateTimeImmutable('-1 day'))->format('Y-m-d');
+        $search = ['q' => $customer->getEmail()];
+
+        self::assertNotNull($draft->getInvoiceDate(), 'the module dates a credit note when it gives it its reference');
+        self::assertEqualsCanonicalizing([$accepted->getId(), $draft->getId()], $this->ids($search + ['invoice_date_from' => $today, 'invoice_date_to' => $today]));
+        self::assertSame([], $this->ids($search + ['invoice_date_to' => $yesterday]));
+    }
+
+    #[Test]
+    public function aRowShowsTheInvoiceReferenceWithItsDateAndTheCustomerAsOnTheOrderList(): void
+    {
+        $customer = $this->fixture->customer();
+        $numbered = $this->fixture->creditNote($customer, $this->fixture->paidOrder($customer), 'accepted');
+        $numbered->save();
+        $draft = $this->fixture->creditNote($customer, null);
+        $draft->save();
+
+        $rows = $this->rows(['q' => $customer->getEmail(), 'order' => 'created_at', 'direction' => 'asc']);
+        [$numberedRow, $draftRow] = $rows;
+
+        self::assertNotSame('', (string) $numbered->getInvoiceRef(), 'an accepted credit note is numbered on save');
+        self::assertStringContainsString((string) $numbered->getRef(), $numberedRow['ref_html']);
+        self::assertStringNotContainsString((string) $numbered->getInvoiceRef(), $numberedRow['ref_html'], 'the invoice reference has its own column');
+        self::assertStringContainsString((string) $numbered->getInvoiceRef(), $numberedRow['invoice_html']);
+        self::assertStringContainsString((string) $numbered->getInvoiceDate()?->format('d/m/Y'), $numberedRow['invoice_html'], 'the date of the document sits under its reference');
+        self::assertTrue($numberedRow['numbered']);
+        self::assertSame('Accepted', $numberedRow['status'], 'the title of the status in the locale asked');
+        self::assertSame('Back Product', $numberedRow['type']);
+
+        self::assertStringNotContainsString('credit-note-invoice-ref', $draftRow['invoice_html'], 'a draft has no invoice reference yet');
+        self::assertFalse($draftRow['numbered'], 'a draft can still be edited and deleted');
+
+        self::assertStringContainsString((string) $numbered->getCreatedAt()?->format('d/m/Y H:i'), $numberedRow['created_html']);
+        self::assertStringContainsString((string) $numbered->getUpdatedAt()?->format('d/m/Y H:i'), $numberedRow['updated_html']);
+        self::assertStringContainsString('text-muted small', $numberedRow['created_html'], 'a recent date shows its age underneath');
+
+        self::assertStringContainsString('Mohamed', $numberedRow['customer_html']);
+        self::assertStringContainsString('Diallo', $numberedRow['customer_html']);
+        self::assertStringContainsString((string) $customer->getEmail(), $numberedRow['customer_html'], 'the e-mail sits under the name, as on the order list');
+        self::assertStringContainsString('117', $numberedRow['amount_html']);
+        self::assertStringContainsString('<span class="text-muted">-</span>', $draftRow['order_html'], 'a credit note without order names none');
+    }
+
+    #[Test]
+    public function aZeroAmountBoundIsAChipLikeAnyOther(): void
+    {
+        $filters = CreditNoteListFilters::fromRequest(new Request(['min_amount' => '0', 'max_amount' => '50']));
+
+        $chips = $this->getService(CreditNoteListFilterPresenter::class)->present($filters, 'en_US')['active_chips'];
+
+        self::assertSame(['0 - 50'], array_column($chips, 'value'));
+    }
+
+    #[Test]
+    public function aPagePastTheLastOneShowsTheLastPage(): void
+    {
+        $customer = $this->fixture->customer();
+        $this->fixture->creditNote($customer, null)->save();
+        $filters = CreditNoteListFilters::fromRequest(new Request(['q' => $customer->getEmail()]));
+
+        $page = $this->getService(CreditNoteListReader::class)->page($filters, 9, 20);
+
+        self::assertSame(1, $page['current_page']);
+        self::assertCount(1, $page['rows']);
+
+        $nothing = CreditNoteListFilters::fromRequest(new Request(['q' => $customer->getEmail().'-nobody']));
+        $empty = $this->getService(CreditNoteListReader::class)->page($nothing, 3, 20);
+
+        self::assertSame([1, 1, []], [$empty['current_page'], $empty['last_page'], $empty['rows']], 'an empty list is its first page');
+    }
+
+    #[Test]
+    public function aDateOlderThanAMonthIsShownOnceWithoutAge(): void
+    {
+        $customer = $this->fixture->customer();
+        $old = $this->fixture->creditNote($customer, null);
+        $old->setCreatedAt(new \DateTime('-60 days'));
+        $old->save();
+
+        [$row] = $this->rows(['q' => $customer->getEmail()]);
+
+        self::assertSame(1, substr_count(strip_tags($row['created_html']), (string) $old->getCreatedAt()?->format('d/m/Y')), 'the date is not repeated as its age');
+        self::assertStringNotContainsString('text-muted small', $row['created_html']);
+    }
+
+    #[Test]
+    public function aDateAheadOfTheClockHasNoAge(): void
+    {
+        $customer = $this->fixture->customer();
+        $ahead = $this->fixture->creditNote($customer, null);
+        $ahead->setCreatedAt(new \DateTime('+2 days'));
+        $ahead->save();
+
+        [$row] = $this->rows(['q' => $customer->getEmail()]);
+
+        self::assertStringContainsString((string) $ahead->getCreatedAt()?->format('d/m/Y H:i'), $row['created_html']);
+        self::assertStringNotContainsString('text-muted small', $row['created_html'], 'a date ahead of the clock is not "just now"');
+    }
+
+    #[Test]
+    public function aDateSavedAMomentAgoIsJustNowEvenRoundedUpBySecondByTheDatabase(): void
+    {
+        $customer = $this->fixture->customer();
+        $justSaved = $this->fixture->creditNote($customer, null);
+        // A DATETIME column keeps a date written at x.6 s as the next second: a few seconds
+        // ahead, so the date is still ahead when the row is read, however slow the test is.
+        $justSaved->setCreatedAt(new \DateTime('+5 seconds'));
+        $justSaved->save();
+
+        [$row] = $this->rows(['q' => $customer->getEmail()]);
+
+        self::assertStringContainsString('text-muted small', $row['created_html'], 'a date a second ahead still shows its age');
+    }
+
+    /**
+     * @param array<string, mixed> $query
+     *
+     * @return list<int>
+     */
+    private function ids(array $query): array
+    {
+        return array_column($this->rows($query), 'id');
+    }
+
+    /**
+     * @param array<string, mixed> $query
+     *
+     * @return list<array<string, mixed>>
+     */
+    private function rows(array $query): array
+    {
+        $page = $this->getService(CreditNoteListReader::class)->page(CreditNoteListFilters::fromRequest(new Request($query)), 1, 50);
+
+        return $this->getService(CreditNoteListRowPresenter::class)->presentAll($page['rows'], 'en_US');
+    }
+}
diff --git a/tests/Unit/CreditNoteListFiltersTest.php b/tests/Unit/CreditNoteListFiltersTest.php
new file mode 100644
index 0000000..19ec3de
--- /dev/null
+++ b/tests/Unit/CreditNoteListFiltersTest.php
@@ -0,0 +1,166 @@
+<?php
+
+declare(strict_types=1);
+
+namespace CreditNote\Tests\Unit;
+
+use CreditNote\Service\CreditNoteListFilters;
+use PHPUnit\Framework\Attributes\Test;
+use PHPUnit\Framework\TestCase;
+use Symfony\Component\HttpFoundation\Request;
+
+/**
+ * The filters of the credit note list, read from the query string and written back to it.
+ */
+final class CreditNoteListFiltersTest extends TestCase
+{
+    #[Test]
+    public function theFiltersOfTheFormComeBackAsTheSameQueryString(): void
+    {
+        $query = [
+            'q' => 'CN0001',
+            'status_ids' => ['3', '1'],
+            'type_ids' => ['2'],
+            'invoice_date_from' => '2026-01-01',
+            'invoice_date_to' => '2026-01-31',
+            'min_amount' => '10',
+            'max_amount' => '99.5',
+            'order' => 'total',
+            'direction' => 'asc',
+        ];
+
+        $filters = CreditNoteListFilters::fromRequest(new Request($query));
+
+        self::assertSame([
+            'status_ids' => [3, 1],
+            'type_ids' => [2],
+            'invoice_date_from' => '2026-01-01',
+            'invoice_date_to' => '2026-01-31',
+            'min_amount' => 10.0,
+            'max_amount' => 99.5,
+            'q' => 'CN0001',
+            'order' => 'total',
+            'direction' => 'asc',
+        ], $filters->toQueryParams());
+        self::assertSame(4, $filters->advancedCount(), 'status, type, date and amount are the filters of the collapsed panel');
+    }
+
+    #[Test]
+    public function theParametersOfThePreviousListStillFilter(): void
+    {
+        $filters = CreditNoteListFilters::fromRequest(new Request([
+            'status_id' => '2',
+            'ref' => 'CN15',
+            'creditNoteDateMin' => '2026-03-01',
+            'creditNoteDateMax' => '2026-03-31',
+        ]));
+
+        self::assertSame([2], $filters->statusIds, 'the side menu links a status with status_id');
+        self::assertSame('CN15', $filters->search);
+        self::assertSame('2026-03-01 00:00:00', $filters->invoiceDateFrom?->format('Y-m-d H:i:s'));
+        self::assertSame('2026-03-31 23:59:59', $filters->invoiceDateTo?->format('Y-m-d H:i:s'));
+
+        $withEmptyFields = CreditNoteListFilters::fromRequest(new Request([
+            'ref' => 'CN15',
+            'q' => '',
+            'creditNoteDateMin' => '2026-03-01',
+            'invoice_date_from' => '',
+        ]));
+
+        self::assertSame('CN15', $withEmptyFields->search, 'an empty field of the form does not hide the previous parameter');
+        self::assertSame('2026-03-01', $withEmptyFields->invoiceDateFrom?->format('Y-m-d'));
+    }
+
+    #[Test]
+    public function everyDateColumnOfTheListSorts(): void
+    {
+        self::assertSame('created_at', CreditNoteListFilters::fromRequest(new Request(['order' => 'created_at']))->sort);
+        self::assertSame('updated_at', CreditNoteListFilters::fromRequest(new Request(['order' => 'updated_at']))->sort);
+    }
+
+    #[Test]
+    public function anEmptyQueryStringIsTheNewestCreditNotesFirstWithoutFilter(): void
+    {
+        $filters = CreditNoteListFilters::fromRequest(new Request());
+
+        self::assertSame([], $filters->toQueryParams());
+        self::assertSame('created_at', $filters->sort);
+        self::assertSame('desc', $filters->direction);
+        self::assertSame(0, $filters->advancedCount());
+    }
+
+    #[Test]
+    public function aValueTheListCannotUseIsDropped(): void
+    {
+        $filters = CreditNoteListFilters::fromRequest(new Request([
+            'status_ids' => ['0', '-1', 'abc', ['nested']],
+            'invoice_date_from' => '2026-02-30',
+            'min_amount' => '-5',
+            'max_amount' => 'cheap',
+            'order' => 'id; DROP TABLE credit_note',
+            'direction' => 'sideways',
+        ]));
+
+        self::assertSame([], $filters->toQueryParams());
+    }
+
+    #[Test]
+    public function aValueOfTheWrongShapeIsIgnoredInsteadOfRefused(): void
+    {
+        $request = new Request([
+            'status_ids' => '1',
+            'type_ids' => '2',
+            'q' => ['x'],
+            'status_id' => ['3'],
+            'min_amount' => ['10'],
+            'order' => ['total'],
+            'page' => ['2'],
+        ]);
+
+        self::assertSame([], CreditNoteListFilters::fromRequest($request)->toQueryParams());
+        self::assertSame(1, CreditNoteListFilters::pageFromRequest($request));
+    }
+
+    #[Test]
+    public function anAmountTooLargeToBeAFigureIsDropped(): void
+    {
+        self::assertNull(CreditNoteListFilters::fromRequest(new Request(['min_amount' => '1e400']))->minAmount);
+    }
+
+    #[Test]
+    public function thePageIsReadFromTheQueryString(): void
+    {
+        self::assertSame(3, CreditNoteListFilters::pageFromRequest(new Request(['page' => '3'])));
+        self::assertSame(1, CreditNoteListFilters::pageFromRequest(new Request(['page' => '-2'])));
+    }
+
+    #[Test]
+    public function boundsGivenTheWrongWayRoundAreSwapped(): void
+    {
+        $filters = CreditNoteListFilters::fromRequest(new Request([
+            'invoice_date_from' => '2026-05-31',
+            'invoice_date_to' => '2026-05-01',
+            'min_amount' => '200',
+            'max_amount' => '50',
+        ]));
+
+        self::assertSame('2026-05-01 00:00:00', $filters->invoiceDateFrom?->format('Y-m-d H:i:s'));
+        self::assertSame('2026-05-31 23:59:59', $filters->invoiceDateTo?->format('Y-m-d H:i:s'));
+        self::assertSame([50.0, 200.0], [$filters->minAmount, $filters->maxAmount]);
+    }
+
+    #[Test]
+    public function removingAChipDropsThatFilterAndKeepsTheOthers(): void
+    {
+        $filters = CreditNoteListFilters::fromRequest(new Request([
+            'q' => 'Diallo',
+            'status_ids' => ['1'],
+            'min_amount' => '10',
+            'order' => 'ref',
+        ]));
+
+        self::assertSame(['status_ids' => [1], 'min_amount' => 10.0, 'order' => 'ref'], $filters->withoutFilter(CreditNoteListFilters::KEY_SEARCH)->toQueryParams());
+        self::assertSame(['min_amount' => 10.0, 'q' => 'Diallo', 'order' => 'ref'],$filters->withoutFilter(CreditNoteListFilters::KEY_STATUS_IDS)->toQueryParams());
+        self::assertSame(['status_ids' => [1], 'q' => 'Diallo', 'order' => 'ref'], $filters->withoutFilter(CreditNoteListFilters::KEY_AMOUNT_RANGE)->toQueryParams());
+    }
+}