diff --git a/assets/icons/fa-solid/angle-double-left.svg b/assets/icons/fa-solid/angle-double-left.svg
new file mode 100644
index 000000000..0fe1d983d
--- /dev/null
+++ b/assets/icons/fa-solid/angle-double-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="m223.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L319.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L393.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34m-192 34l136 136c9.4 9.4 24.6 9.4 33.9 0l22.6-22.6c9.4-9.4 9.4-24.6 0-33.9L127.9 256l96.4-96.4c9.4-9.4 9.4-24.6 0-33.9L201.7 103c-9.4-9.4-24.6-9.4-33.9 0l-136 136c-9.5 9.4-9.5 24.6-.1 34"/></svg>
\ No newline at end of file
diff --git a/assets/icons/fa-solid/angle-double-right.svg b/assets/icons/fa-solid/angle-double-right.svg
new file mode 100644
index 000000000..cf1bd72ff
--- /dev/null
+++ b/assets/icons/fa-solid/angle-double-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 448 512"><path fill="currentColor" d="m224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4l-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34m192-34l-136-136c-9.4-9.4-24.6-9.4-33.9 0l-22.6 22.6c-9.4 9.4-9.4 24.6 0 33.9l96.4 96.4l-96.4 96.4c-9.4 9.4-9.4 24.6 0 33.9l22.6 22.6c9.4 9.4 24.6 9.4 33.9 0l136-136c9.4-9.2 9.4-24.4 0-33.8"/></svg>
\ No newline at end of file
diff --git a/assets/icons/fa-solid/angle-left.svg b/assets/icons/fa-solid/angle-left.svg
new file mode 100644
index 000000000..fd3f1a3aa
--- /dev/null
+++ b/assets/icons/fa-solid/angle-left.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="m31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34"/></svg>
\ No newline at end of file
diff --git a/assets/icons/fa-solid/angle-right.svg b/assets/icons/fa-solid/angle-right.svg
new file mode 100644
index 000000000..fd3a66191
--- /dev/null
+++ b/assets/icons/fa-solid/angle-right.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 512"><path fill="currentColor" d="m224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4l-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34"/></svg>
\ No newline at end of file
diff --git a/assets/icons/mingcute/arrow-left-fill.svg b/assets/icons/mingcute/arrow-left-fill.svg
new file mode 100644
index 000000000..fce0eb27a
--- /dev/null
+++ b/assets/icons/mingcute/arrow-left-fill.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path fill="none" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="3" d="M5 12h15m-10 5.657L4.343 12L10 6.343"/></svg>
\ No newline at end of file
diff --git a/sources/AppBundle/Site/Entity/Repository/ArticleRepository.php b/sources/AppBundle/Site/Entity/Repository/ArticleRepository.php
index dcab69ac1..799b565ea 100644
--- a/sources/AppBundle/Site/Entity/Repository/ArticleRepository.php
+++ b/sources/AppBundle/Site/Entity/Repository/ArticleRepository.php
@@ -49,7 +49,8 @@ public function getEventsLabelsById(): array
             ->from('afup_site_article', 'a')
             ->innerJoin('a', 'afup_forum', 'e', 'a.id_forum = e.id')
             ->groupBy('e.id')
-            ->orderBy('e.date_debut', 'DESC')
+            ->addOrderBy('e.date_debut', 'DESC')
+            ->addOrderBy('e.titre', 'DESC')
             ->executeQuery()
             ->fetchAllAssociative();
 
diff --git a/templates/components/Form/Section.html.twig b/templates/components/Card/Section.html.twig
similarity index 100%
rename from templates/components/Form/Section.html.twig
rename to templates/components/Card/Section.html.twig
diff --git a/templates/components/Form/FilterList.html.twig b/templates/components/Form/FilterList.html.twig
new file mode 100644
index 000000000..53a1f0db1
--- /dev/null
+++ b/templates/components/Form/FilterList.html.twig
@@ -0,0 +1,33 @@
+{# @prop field Le champ de formulaire (choice multiple + expanded) #}
+{# @prop title Le titre de la section #}
+{# @prop limit Le nombre de choix affichés avant repli #}
+{%- props field, title, limit = 5 -%}
+
+{# les choix cochés remontent, l'ordre d'origine est conservé pour le reste #}
+{%- set choices = field|sort((a, b) => (b.vars.checked ? 1 : 0) - (a.vars.checked ? 1 : 0)) -%}
+{%- set visible_count = max(limit, choices|filter(choice => choice.vars.checked)|length) -%}
+{%- set shown = choices|slice(0, visible_count) -%}
+{%- set folded = choices|slice(visible_count) -%}
+
+<twig:Card:Section title="{{ title }}" class="gap-2">
+    <div class="flex flex-col gap-1">
+        {% for choice in shown %}
+            <div class="flex items-center gap-2">{{ form_widget(choice) }}{{ form_label(choice) }}</div>
+        {% endfor %}
+    </div>
+
+    {% if folded|length %}
+        <details class="group">
+            <summary class="flex w-fit cursor-pointer items-center gap-1 text-sm text-ruby-700 list-none [&::-webkit-details-marker]:hidden">
+                <twig:ux:icon name="mingcute:down-fill" class="size-4 transition-transform group-open:rotate-180" />
+                <span class="group-open:hidden">Voir les {{ folded|length }} autres</span>
+                <span class="hidden group-open:inline">Voir moins</span>
+            </summary>
+            <div class="mt-1 flex flex-col gap-1">
+                {% for choice in folded %}
+                    <div class="flex items-center gap-2">{{ form_widget(choice) }}{{ form_label(choice) }}</div>
+                {% endfor %}
+            </div>
+        </details>
+    {% endif %}
+</twig:Card:Section>
diff --git a/templates/event/sponsorship_file/form.html.twig b/templates/event/sponsorship_file/form.html.twig
index a3ea3ceb0..b1e87d3b9 100644
--- a/templates/event/sponsorship_file/form.html.twig
+++ b/templates/event/sponsorship_file/form.html.twig
@@ -22,7 +22,7 @@
 
                 {{ form_errors(leadForm) }}
 
-                <twig:Form:Section title="{{ 'Vos coordonnées'|trans }}">
+                <twig:Card:Section title="{{ 'Vos coordonnées'|trans }}">
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-7">
                         {{ form_row(leadForm.firstname) }}
                         {{ form_row(leadForm.lastname) }}
@@ -30,15 +30,15 @@
                         {{ form_row(leadForm.phone) }}
                         {{ form_row(leadForm.language) }}
                     </div>
-                </twig:Form:Section>
+                </twig:Card:Section>
 
-                <twig:Form:Section title="{{ 'Votre entreprise'|trans }}">
+                <twig:Card:Section title="{{ 'Votre entreprise'|trans }}">
                     <div class="grid grid-cols-1 md:grid-cols-3 gap-7">
                         {{ form_row(leadForm.company) }}
                         {{ form_row(leadForm.poste) }}
                         {{ form_row(leadForm.website) }}
                     </div>
-                </twig:Form:Section>
+                </twig:Card:Section>
 
                 {{ form_row(leadForm.recaptcha) }}
 
diff --git a/templates/site/news/display.html.twig b/templates/site/news/display.html.twig
index 0cba39c98..a0cc6d9b9 100644
--- a/templates/site/news/display.html.twig
+++ b/templates/site/news/display.html.twig
@@ -34,9 +34,9 @@
                 <header class="font-titre">
                     <h1 class="text-afup-800 text-2xl sm:text-4xl">{{ article.titre }}</h1>
                     <div class="flex mt-2">
-                        <small class="text-2xl flex-grow">
+                        <time class="text-2xl flex-grow" datetime="{{ article.datePublication|date('Y-m-d H:i') }}">
                             {{ article.datePublication|format_date('long') }}
-                        </small>
+                        </time>
                         <small class="hidden sm:flex gap-2">
                             {% if article.theme %}
                                 <twig:Button class="text-xs" variant="secondary" as="a" href="{{ path('news_list', { news_filters : { theme : [article.theme.value]} }) }}">
diff --git a/templates/site/news/list.html.twig b/templates/site/news/list.html.twig
index c0782a6de..be0896d4c 100644
--- a/templates/site/news/list.html.twig
+++ b/templates/site/news/list.html.twig
@@ -1,13 +1,7 @@
-{% extends 'site/base.html.twig' %}
+{% extends 'layouts/site.html.twig' %}
 
 {% block title %}Les actualités de l'AFUP, page {{ current_page }}{% endblock %}
 
-{% block stylesheets %}
-    {{ parent() }}
-    <link rel="stylesheet" href="https://cdn.jsdelivr.net/instantsearch.js/1/instantsearch.min.css">
-    <link rel="stylesheet" href="/css/talk/list.css">
-{% endblock %}
-
 {% block canonical %}
     {% if current_page == 1 %}
         <link rel="canonical" href="{{ url('news_list') }}" />
@@ -18,114 +12,74 @@
 
 {% block content %}
 
-    <div class="mw1400p center" id="container">
-        <div class="line" id="main">
-            <h1>Actualités</h1>
-            <div class="container">
-                <div class="col-md-9 col-sm-12">
-
-                    {% if articles|length %}
-                        {% for article in articles %}
-                            <a class="article article-teaser" href="{{ path('news_display', { code: article.slug}) }}"
-                               title="Lire l'article: {{ article.titre }}">
-                                <h2>{{ article.titre }}</h2>
-                                <div class="article-date"><i>{{ article.datePublication|format_date('long') }}</i></div>
-                                <p>{{ article.resume|raw }} <span class="home-read-more">Lire plus <i class="fa fa-arrow-right"></i></span></p>
-                            </a>
-                        {% endfor %}
-                    {% else %}
-                        Aucun article trouvé.
-                    {% endif %}
+<div class="container mx-auto px-4 py-6 sm:px-0 sm:py-10 flex flex-row sm:flex-row gap-5">
+    <div class="flex flex-col gap-10 sm:gap-12 flex-grow">
+        {% for article in articles %}
+            <article>
+                <h2 class="text-afup-800 text-xl sm:text-2xl">{{ article.titre }}</h2>
+
+                <time datetime="{{ article.datePublication|date('Y-m-d H:i') }}" class="text-lg text-neutre-400">
+                    {{ article.datePublication|format_date('long') }}
+                </time>
+
+                <p class="text-gray-700 mt-2">{{ article.resume|raw }}</p>
+
+                <a href="{{ path('news_display', { code: article.slug}) }}"
+                   title="Lire l'article: {{ article.titre }}"
+                   class="flex items-center gap-1 text-ruby-700 mt-2">
+                    Lire plus <twig:UX:Icon name="mingcute:arrow-right-fill" class="h-5" />
+                </a>
+            </article>
+        {% else %}
+            <h2 class="text-3xl">
+                Aucun article trouvé avec ces critères.
+            </h2>
+            <a href="{{ path('news_list') }}" class="flex items-center gap-1 text-ruby-700 text-2xl">
+                <twig:UX:Icon name="mingcute:arrow-left-fill" class="h-5" /> Revenir à la liste
+            </a>
+        {% endfor %}
+
+        {{ render(controller(
+            'AppBundle\\Controller\\Website\\PagerController::display',
+            {
+                'total_items': total_items,
+                'current_page': current_page,
+                'extra_parameters': { news_filters: filters },
+                'items_per_page' : articles_per_page,
+            }
+        )) }}
+    </div>
 
-                    {{ render(controller(
-                        'AppBundle\\Controller\\Website\\PagerController::display',
-                        {
-                            'total_items': total_items,
-                            'current_page': current_page,
-                            'extra_parameters': { news_filters: filters },
-                            'items_per_page' : articles_per_page,
-                        }
-                    )) }}
+    <div class="min-w-fit max-w-100 hidden sm:block">
+        {{ form_start(form, { action: path('news_list') }) }}
 
+            <twig:Card class="flex flex-col gap-6">
+                <div class="flex flex-col gap-6">
+                    <twig:Form:FilterList :field="form.year" title="Année" />
+                    <twig:Form:FilterList :field="form.theme" title="Thème" />
+                    <twig:Form:FilterList :field="form.event" title="Cycle de conférences" />
                 </div>
 
-                <div class="col-md-3 col-sm-12 tablet-hidden">
-
-                    {{ form_start(form, { attr: { class: "news-filters"}, action: path('news_list') }) }}
-                    <div class="ais-root ais-refinement-list">
-                        <div class="ais-refinement-list--header ais-header">
-                            <h4>Année</h4>
-                        </div>
-
-                        <div class="ais-body ais-refinement-list--body">
-                            <div class="ais-refinement-list--list">
-                                <div class="ais-refinement-list--item">
-
-                                    {% for item in form.year %}
-                                        <div>
-                                            {{ form_widget(item) }}
-                                            {{ form_label(item) }}
-                                        </div>
-                                    {% endfor %}
+                {% if filters|filter(values => values is not empty)|length %}
+                    <a href="{{ path('news_list') }}" class="text-neutre-400">
+                        Effacer les filtres
+                    </a>
+                {% endif %}
+            </twig:Card>
 
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="ais-root ais-refinement-list">
-                        <div class="ais-refinement-list--header ais-header">
-                            <h4>Thème</h4>
-                        </div>
-
-                        <div class="ais-body ais-refinement-list--body">
-                            <div class="ais-refinement-list--list">
-                                <div class="ais-refinement-list--item">
-                                    {% for item in form.theme %}
-                                        <div>
-                                            {{ form_widget(item) }}
-                                            {{ form_label(item) }}
-                                        </div>
-                                    {% endfor %}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    <div class="ais-root ais-refinement-list">
-                        <div class="ais-refinement-list--header ais-header">
-                            <h4>Cycle de conférences</h4>
-                        </div>
-
-                        <div class="ais-body ais-refinement-list--body">
-                            <div class="ais-refinement-list--list">
-                                <div class="ais-refinement-list--item">
-                                    {% for item in form.event %}
-                                        <div>
-                                            {{ form_widget(item) }}
-                                            {{ form_label(item) }}
-                                        </div>
-                                    {% endfor %}
-                                </div>
-                            </div>
-                        </div>
-                    </div>
-
-                    {{ form_widget(form.submit, {attr: {style: "display:none "}}) }}
-
-                    {{ form_end(form) }}
-                </div>
-            </div>
+            {{ form_widget(form.submit, {attr: {style: "display:none "}}) }}
 
-        </div>
+        {{ form_end(form) }}
     </div>
+</div>
 {% endblock %}
 
 {% block javascripts %}
     {{ parent() }}
     <script>
-        $('form[name=news_filters]').on('change', function() {
-            $(this).submit();
-        })
+        document.addEventListener('DOMContentLoaded', () => {
+            const form = document.querySelector('form[name=news_filters]');
+            form?.addEventListener('change', () => form.requestSubmit());
+        });
     </script>
 {% endblock %}
diff --git a/templates/site/pager.html.twig b/templates/site/pager.html.twig
index e774b2b16..54d128dab 100644
--- a/templates/site/pager.html.twig
+++ b/templates/site/pager.html.twig
@@ -1,31 +1,61 @@
-<div id="pagination-container">
-    <div id="pagination">
-        <ul class="ais-pagination">
-            {% if current_page > 1 %}
-                <li class="ais-pagination--item ais-pagination--item__first">
-                    <a class="ais-pagination--link" href="{{ path('news_list', {page: 1}|merge(extra_parameters)) }}"><i class="fa fa-angle-double-left"></i></a>
-                </li>
-            {% endif %}
-            {% if current_page > 1 %}
-                <li class="ais-pagination--item ais-pagination--item__previous">
-                    <a rel="prev" class="ais-pagination--link" href="{{ path('news_list', {page: current_page - 1}|merge(extra_parameters)) }}"><i class="fa fa-angle-left"></i></a>
-                </li>
-            {% endif %}
-            {% for page in displayed_pages %}
-                <li class="ais-pagination--item ais-pagination--item__page{% if page == current_page %} ais-pagination--item__active{% endif %}">
-                    <a class="ais-pagination--link" href="{{ path('news_list', {page: page}|merge(extra_parameters)) }}">{{ page }}</a>
-                </li>
-            {% endfor %}
-            {% if current_page < nb_pages %}
-                <li class="ais-pagination--item ais-pagination--item__next">
-                    <a rel="next" class="ais-pagination--link" href="{{ path('news_list', {page: current_page + 1}|merge(extra_parameters)) }}"><i class="fa fa-angle-right"></i></a>
-                </li>
-            {% endif %}
-            {% if current_page < nb_pages %}
-                <li class="ais-pagination--item ais-pagination--item__last">
-                    <a class="ais-pagination--link" href="{{ path('news_list', {page: nb_pages}|merge(extra_parameters)) }}"><i class="fa fa-angle-double-right"></i></a>
-                </li>
-            {% endif %}
-        </ul>
-    </div>
-</div>
+<nav class="mx-auto flex w-full justify-center">
+    <ul class="flex flex-row gap-2 items-center">
+        {% if current_page > 1 %}
+            <li>
+                <twig:Button variant="secondary"
+                             as="a"
+                             href="{{ path('news_list', {page: 1}|merge(extra_parameters)) }}"
+                             aria-label="Première page"
+                             class="flex items-center gap-2">
+                    <twig:UX:Icon name="fa-solid:angle-double-left" class="h-4"/>
+                </twig:Button>
+            </li>
+        {% endif %}
+        {% if current_page > 1 %}
+            <li>
+                <twig:Button variant="secondary"
+                             as="a"
+                             rel="prev"
+                             href="{{ path('news_list', {page: current_page - 1}|merge(extra_parameters)) }}"
+                             aria-label="Page précédente"
+                             class="flex items-center gap-2">
+                    <twig:UX:Icon name="fa-solid:angle-left" class="h-4"/>
+                </twig:Button>
+            </li>
+        {% endif %}
+        {% for page in displayed_pages %}
+            <li>
+                <twig:Button :variant="page == current_page ? 'tertiary' : 'secondary'"
+                             as="a"
+                             href="{{ path('news_list', {page: page}|merge(extra_parameters)) }}"
+                             aria-label="Page {{ page }}"
+                             class="flex">
+                    {{ page }}
+                </twig:Button>
+            </li>
+        {% endfor %}
+        {% if current_page < nb_pages %}
+            <li>
+                <twig:Button variant="secondary"
+                             as="a"
+                             rel="next"
+                             href="{{ path('news_list', {page: current_page + 1}|merge(extra_parameters)) }}"
+                             aria-label="Page suivante"
+                             class="flex items-center gap-2">
+                    <twig:UX:Icon name="fa-solid:angle-right" class="h-4"/>
+                </twig:Button>
+            </li>
+        {% endif %}
+        {% if current_page < nb_pages %}
+            <li>
+                <twig:Button variant="secondary"
+                             as="a"
+                             href="{{ path('news_list', {page: nb_pages}|merge(extra_parameters)) }}"
+                             aria-label="Dernière page"
+                             class="flex items-center gap-2">
+                    <twig:UX:Icon name="fa-solid:angle-double-right" class="h-4"/>
+                </twig:Button>
+            </li>
+        {% endif %}
+    </ul>
+</nav>