diff --git a/lemarche/static/js/siae_activity_delete.js b/lemarche/static/js/siae_activity_delete.js
index 11821fbfc..17b546ee0 100644
--- a/lemarche/static/js/siae_activity_delete.js
+++ b/lemarche/static/js/siae_activity_delete.js
@@ -1,23 +1,35 @@
-document.addEventListener("DOMContentLoaded", function() {
-    $('#siae_activity_delete_modal').on('show.bs.modal', function (event) {
-        // Button that triggered the modal
-        var button = $(event.relatedTarget);
+document.addEventListener('alpine:init', function () {
+    Alpine.data('activityItem', () => ({
+        siaeSlug: null,
+        siaeActivityId: null,
+        siaeActivityNameDisplay: null,
 
-        // Extract info from data-* attributes
-        var siaeId = button.data('siae-id');
-        var siaeSlug = button.data('siae-slug');
-        var siaeActivityId = button.data('siae-activity-id');
-        var siaeActivityNameDisplay = button.data('siae-activity-name-display');
+        initOptions(siaeSlug, siaeActivityId, siaeActivityNameDisplay) {
+            this.siaeSlug = siaeSlug;
+            this.siaeActivityId = siaeActivityId;
+            this.siaeActivityNameDisplay = siaeActivityNameDisplay;
+        },
+        remove() {
+            // Update the modal's content
+            // - siae activity name display
+            // - edit the form action url
+            // - open the modal
+            let modalID = 'siae_activity_delete_modal';
+            let modal = document.querySelector(`#${modalID}`);
+            let modalForm = modal.querySelector('form');
+            if (modal.querySelector('#siae-activity-name-display')) {
+                modal.querySelector('#siae-activity-name-display').textContent = this.siaeActivityNameDisplay;
+            }
 
-        // Update the modal's content
-        // - siae name display
-        // - edit the form action url
-        var modal = document.querySelector('#siae_activity_delete_modal');
-        var modalForm = modal.querySelector('form');
-        if (modal.querySelector('#siae-activity-name-display')) {
-            modal.querySelector('#siae-activity-name-display').textContent = siaeActivityNameDisplay;
+            let formActionUrl = new URL(modalForm.getAttribute('data-action'));
+            formActionUrl.pathname = formActionUrl.pathname
+                .replace('siae-slug-to-replace', encodeURIComponent(this.siaeSlug))
+                .replace('siae-activity-id-to-replace', encodeURIComponent(this.siaeActivityId));
+
+            modalForm.setAttribute('action', formActionUrl.toString());
+
+            const modalDialog = document.getElementById(modalID);
+            dsfr(modalDialog).modal.disclose();
         }
-        var formActionUrl = modalForm.getAttribute('action');
-        modalForm.setAttribute('action', formActionUrl.replace('siae-slug-to-replace', siaeSlug).replace('siae-activity-id-to-replace', siaeActivityId));
-    });
+    }));
 });
diff --git a/lemarche/templates/dashboard/_siae_activity_delete_modal.html b/lemarche/templates/dashboard/_siae_activity_delete_modal.html
index a6621ff61..301df3e10 100644
--- a/lemarche/templates/dashboard/_siae_activity_delete_modal.html
+++ b/lemarche/templates/dashboard/_siae_activity_delete_modal.html
@@ -1,23 +1,42 @@
-<div class="modal fade modal-siae" id="siae_activity_delete_modal" tabindex="-1" role="dialog" aria-modal="true" data-backdrop="static" data-keyboard="false" aria-labelledby="modalTitle">
-    <div class="modal-dialog modal-dialog-centered">
-        <div class="modal-content">
-            <div class="modal-header">
-                <h3 class="modal-title" id="modalTitle">Supprimer</h3>
-                <button type="button" class="close" data-dismiss="modal" aria-label="Fermer">
-                    <i class="ri-close-line"></i>
-                </button>
-            </div>
-            <form method="POST" action="{% url 'dashboard_siaes:siae_edit_activities_delete' siae.slug|default:'siae-slug-to-replace' activity.id|default:'siae-activity-id-to-replace' %}">
-                {% csrf_token %}
-                <div class="modal-body home-content-body">
-                    <p class="font-weight-bold">Voulez-vous supprimer cette activité ?</p>
-                    <i><span id="siae-activity-name-display"></span></i>
-                </div>
-                <div class="modal-footer">
-                    <button class="btn btn-sm btn-outline-primary" type="button" data-dismiss="modal" aria-label="Fermer">Annuler</button>
-                    <button class="btn btn-sm btn-primary" type="submit">Confirmer</button>
+<dialog class="fr-modal"
+        id="siae_activity_delete_modal"
+        role="dialog"
+        aria-modal="true"
+        data-backdrop="static"
+        data-keyboard="false"
+        aria-labelledby="siae_activity_delete_modal_title">
+    <div class="fr-container fr-container--fluid fr-container-md">
+        <div class="fr-grid-row fr-grid-row--center">
+            <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
+                <div class="fr-modal__body">
+                    <div class="fr-modal__header">
+                        <button class="fr-btn--close fr-btn"
+                                aria-controls="siae_activity_delete_modal">Fermer</button>
+                    </div>
+                    <div class="fr-modal__content">
+                        <h3 id="siae_activity_delete_modal_title" class="fr-modal__title">Supprimer</h3>
+                        <p>
+                            Voulez-vous supprimer l'activité <strong><span id="siae-activity-name-display"></span></strong> ?
+                        </p>
+                    </div>
+                    <div class="fr-modal__footer">
+                        <div class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg">
+                            <form method="post"
+                                  data-action="{% url 'dashboard_siaes:siae_edit_activities_delete' siae.slug|default:'siae-slug-to-replace' activity.id|default:'siae-activity-id-to-replace' %}">
+                                {% csrf_token %}
+                                <button class="fr-btn fr-btn--icon-left" type="submit">Confirmer</button>
+                            </form>
+                            <button class="fr-btn fr-btn--icon-left fr-btn--secondary"
+                                    aria-controls="siae_activity_delete_modal"
+                                    aria-label="Fermer">Annuler</button>
+                        </div>
+                    </div>
                 </div>
-            </form>
+            </div>
         </div>
     </div>
-</div>
+</dialog>
+<!-- button needed for modal to be triggered -->
+<button data-fr-opened="false"
+        aria-controls="siae_activity_delete_modal"
+        class="fr-hidden"></button>
diff --git a/lemarche/templates/dashboard/siae_edit_activities.html b/lemarche/templates/dashboard/siae_edit_activities.html
index 3588afe68..baf991fea 100644
--- a/lemarche/templates/dashboard/siae_edit_activities.html
+++ b/lemarche/templates/dashboard/siae_edit_activities.html
@@ -1,30 +1,31 @@
 {% extends "dashboard/siae_edit_base.html" %}
-{% load static bootstrap4 %}
+{% load static %}
 {% block content_siae_form %}
-    <div class="fr-grid-row mb-3">
+    <div class="fr-grid-row fr-grid-row--gutters fr-mb-4v">
         <div class="fr-col-lg-8">
             <h3>Ajoutez vos secteurs d'activité et recevez des opportunités commerciales ciblées</h3>
         </div>
         <div class="fr-col-lg-4">
             <a href="{% url 'dashboard_siaes:siae_edit_activities_create' siae.slug %}"
                id="siae-activities-create-btn"
-               class="btn btn-primary w-100 btn-ico mt-2">
-                <i class="ri-add-fill ri-lg mr-2"></i>Ajouter un secteur d'activité
-            </a>
+               class="fr-btn fr-fi-add-circle-line fr-btn--icon-right fr-mt-1w">Ajouter un secteur d'activité</a>
         </div>
     </div>
     {% if siae.activities.count %}
-        <div class="fr-grid-row mb-3 mb-lg-5">
+        <div class="fr-grid-row fr-grid-row--gutters fr-mb-4v">
             {% for activity in siae.activities.all %}
                 <div class="fr-col-12 fr-col-lg-8">{% include "siaes/_siae_activity_card.html" with activity=activity %}</div>
             {% endfor %}
         </div>
     {% endif %}
-{% endblock %}
+{% endblock content_siae_form %}
 {% block modals %}
     {% include "dashboard/_siae_activity_delete_modal.html" %}
-{% endblock %}
+{% endblock modals %}
 {% block extra_js %}
+    <script type="text/javascript"
+            src="{% static 'vendor/alpinejs@3.11.1.min.js'%}"
+            defer></script>
     <script type="text/javascript"
             src="{% static 'js/siae_activity_delete.js' %}"></script>
-{% endblock %}
+{% endblock extra_js %}
diff --git a/lemarche/templates/dashboard/siae_edit_activities_create.html b/lemarche/templates/dashboard/siae_edit_activities_create.html
index 8edab00f2..91ee87800 100644
--- a/lemarche/templates/dashboard/siae_edit_activities_create.html
+++ b/lemarche/templates/dashboard/siae_edit_activities_create.html
@@ -1,183 +1,140 @@
 {% extends "layouts/base.html" %}
-{% load static bootstrap4 %}
-{% block page_title %}{{ page_title }}{{ block.super }}{% endblock page_title %}
-{% block breadcrumbs %}
-    <section>
-        <div class="fr-container">
-            <div class="fr-grid-row">
-                <div class="fr-col-12 fr-col-lg">
-                    <nav class="c-breadcrumb c-breadcrumb--marche" aria-label="breadcrumb">
-                        <ol class="breadcrumb">
-                            <li class="breadcrumb-item">
-                                <a href="{{ HOME_PAGE_PATH }}">Accueil</a>
-                            </li>
-                            <li class="breadcrumb-item">
-                                <a href="{% url 'dashboard:home' %}">{{ DASHBOARD_TITLE }}</a>
-                            </li>
-                            <li class="breadcrumb-item" title="{{ siae.name_display }} : modifier">
-                                <a href="{% url 'dashboard_siaes:siae_edit_activities' siae.slug %}">{{ siae.name_display }} : modifier</a>
-                            </li>
-                            <li class="breadcrumb-item active" aria-current="page">{{ page_title }}</li>
-                        </ol>
-                    </nav>
-                </div>
-            </div>
-        </div>
-    </section>
-{% endblock %}
+{% load static dsfr_tags %}
+{% block page_title %}
+    {{ page_title }}{{ block.super }}
+{% endblock page_title %}
+{% block breadcrumb %}
+    {% dsfr_breadcrumb %}
+{% endblock breadcrumb %}
 {% block content %}
-    <section class="mb-0">
-        <div class="fr-container">
-            <div class="fr-grid-row">
-                <div class="fr-col-12">
-                    <form method="POST" action="" class="mb-3 mb-lg-5">
-                        {% csrf_token %}
-                        {% bootstrap_form_errors form type="all" %}
-                        <div class="fr-grid-row mb-3 mb-lg-5">
-                            <div class="fr-col-12">
-                                <h3>{{ page_title }}</h3>
-                            </div>
+    <div class="fr-container">
+        <div class="fr-grid-row">
+            <div class="fr-col-12">
+                <form method="POST" action="">
+                    {% csrf_token %}
+                    {% if form.non_field_errors %}
+                        <section class="fr-my-4v fr-input-group fr-input-group--error">
+                            {{ form.non_field_errors }}
+                        </section>
+                    {% endif %}
+                    <div class="fr-grid-row">
+                        <div class="fr-col-12">
+                            <h3>{{ page_title }}</h3>
                         </div>
-                        {% if activity %}
-                            <div class="fr-grid-row mb-3 mb-lg-5">
-                                <div class="fr-col-12">
-                                    <h3>{{ page_title }}</h3>
-                                </div>
-                            </div>
-                        {% endif %}
-                        <div class="fr-grid-row mb-3 mb-lg-5">
-                            <div class="fr-col-12 fr-col-lg-8">
-                                <div class="bg-white d-block rounded-lg shadow-lg fr-p-3 p-lg-5">
-                                    <fieldset>
-                                        {% bootstrap_field form.sector_group %}
-                                    </fieldset>
-                                    <fieldset>
-                                        <legend class="h5">
-                                            {{ form.sectors.label }} <strong class="fs-base">*</strong>
-                                        </legend>
-                                        {% bootstrap_field form.sectors show_label=False form_check_class="form-check checkbox-title" %}
-                                    </fieldset>
-                                </div>
-                            </div>
-                            <div class="fr-col-12 fr-col-lg-4">
-                                <div class="alert alert-info mt-3 mt-lg-0" role="alert">
-                                    <p class="mb-1">
-                                        <i class="ri-information-line ri-lg"></i>
-                                        <strong>Secteur d'activité</strong>
-                                    </p>
-                                    <p class="mb-0">
-                                        Améliorez votre référencement en indiquant tous les secteurs d'activités sur lesquels votre struture est positionnée.
-                                    </p>
-                                </div>
-                            </div>
+                    </div>
+                    <div class="fr-grid-row fr-grid-row--gutters">
+                        <div class="fr-col-12 fr-col-lg-8">
+                            {% dsfr_form_field form.sector_group %}
+                            {% dsfr_form_field form.sectors %}
                         </div>
-                        <div class="fr-grid-row mb-3 mb-lg-5">
-                            <div class="fr-col-12 fr-col-lg-8">
-                                <div class="bg-white d-block rounded-lg shadow-lg fr-p-3 p-lg-5">
-                                    <fieldset>
-                                        {% bootstrap_field form.presta_type %}
-                                    </fieldset>
-                                </div>
-                            </div>
-                            <div class="fr-col-12 fr-col-lg-4">
-                                <div class="alert alert-info mt-3 mt-lg-0" role="alert">
-                                    <p class="mb-1">
-                                        <i class="ri-information-line ri-lg"></i>
-                                        <strong>Type de prestation</strong>
-                                    </p>
-                                    <p class="mb-0">
-                                        Vous pourrez ensuite détailler vos prestations dans la section <i>offre commerciale</i>.
-                                    </p>
-                                </div>
+                        <div class="fr-col-12 fr-col-lg-4">
+                            <div class="fr-callout fr-p-4v">
+                                <h3 class="fr-callout__title fr-text--sm">
+                                    <span class="fr-icon-information-line" aria-hidden="true"></span> Secteur d'activité
+                                </h3>
+                                <p class="fr-callout__text fr-text--sm fr-pl-7v">
+                                    Améliorez votre référencement en indiquant tous les secteurs d'activités sur lesquels votre struture est positionnée.
+                                </p>
                             </div>
                         </div>
-                        <div class="fr-grid-row mb-3 mb-lg-5">
-                            <div class="fr-col-12 fr-col-lg-8">
-                                <div class="bg-white d-block rounded-lg shadow-lg fr-p-3 p-lg-5">
-                                    <fieldset>
-                                        <legend class="h4">
-                                            {{ form.geo_range.label }} <strong class="fs-base">*</strong>
-                                        </legend>
-                                        {% bootstrap_field form.geo_range show_label=False %}
-                                        {{ form.geo_range_custom_distance }}
-                                    </fieldset>
-                                </div>
-                            </div>
-                            <div class="fr-col-12 fr-col-lg-4">
-                                <div class="alert alert-info mt-3 mt-lg-0" role="alert">
-                                    <p class="mb-1">
-                                        <i class="ri-information-line ri-lg"></i>
-                                        <strong>Périmètre d'intervention</strong>
-                                    </p>
-                                    <p class="mb-0">
-                                        Le périmètre d'intervention est un critère essentiel dans le choix des acheteurs. Il est nécessaire de bien le renseigner.
-                                    </p>
-                                </div>
+                    </div>
+                    <div class="fr-grid-row fr-grid-row--gutters">
+                        <div class="fr-col-12 fr-col-lg-8">{% dsfr_form_field form.presta_type %}</div>
+                        <div class="fr-col-12 fr-col-lg-4">
+                            <div class="fr-callout fr-p-4v">
+                                <h3 class="fr-callout__title fr-text--sm">
+                                    <span class="fr-icon-information-line" aria-hidden="true"></span> Type de prestation
+                                </h3>
+                                <p class="fr-callout__text fr-text--sm fr-pl-7v">
+                                    Vous pourrez ensuite détailler vos prestations dans la section <i>offre commerciale</i>.
+                                </p>
                             </div>
                         </div>
-                        <div class="fr-grid-row mt-3 mt-lg-5">
-                            <div class="fr-col-12 fr-col-lg-8">
-                                <button type="submit" class="btn btn-primary">
-                                    <span>Enregistrer</span>
-                                </button>
-                                <a class="btn btn-outline-primary"
-                                   href="{% url 'dashboard_siaes:siae_edit_activities' siae.slug %}">
-                                    <span>Annuler</span>
-                                </a>
+                    </div>
+                    <div class="fr-grid-row fr-grid-row--gutters">
+                        <div class="fr-col-12 fr-col-lg-8">
+                            {% dsfr_form_field form.geo_range %}
+                            {% dsfr_form_field form.geo_range_custom_distance %}
+                        </div>
+                        <div class="fr-col-12 fr-col-lg-4">
+                            <div class="fr-callout fr-p-4v">
+                                <h3 class="fr-callout__title fr-text--sm">
+                                    <span class="fr-icon-information-line" aria-hidden="true"></span> Périmètre d'intervention
+                                </h3>
+                                <p class="fr-callout__text fr-text--sm fr-pl-7v">
+                                    Le périmètre d'intervention est un critère essentiel dans le choix des acheteurs. Il est nécessaire de bien le renseigner.
+                                </p>
                             </div>
                         </div>
-                    </form>
-                </div>
-            </section>
-        {% endblock %}
-        {% block extra_js %}
-            <script type="text/javascript"
-                    src="{% static 'js/siae_geo_range_field.js' %}"></script>
-            <script type="text/javascript">
-// dynamic sector display based on sector group selection
-document.addEventListener('DOMContentLoaded', function() {
-    let sectorGroupSelect = document.getElementById('id_sector_group');
-    let sectorGroupSelectOptions = sectorGroupSelect.children;
-    let sectorRadios = document.querySelectorAll('#id_sectors input[type="checkbox"][name="sectors"]');
-    let sectorGroupLabels = Array.from(document.querySelectorAll('#id_sectors label[class="form-check-label"]')).filter(label => !label.htmlFor);
-    let sectorLabels = Array.from(document.querySelectorAll('#id_sectors label[class="form-check-label"]')).filter(label => label.htmlFor);
+                    </div>
+                    <div class="fr-grid-row fr-grid-row--gutters fr-mt-3v fr-mt-lg-5v">
+                        <div class="fr-col-12 fr-col-lg-8">
+                            <ul class="fr-mt-2v fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-sm fr-btns-group--icon-left">
+                                <li>
+                                    <button type="submit" class="fr-btn">Enregistrer</button>
+                                </li>
+                                <li>
+                                    <a class="fr-btn fr-btn--tertiary-no-outline fr-icon-arrow-go-back-line"
+                                       href="{% url 'dashboard_siaes:siae_edit_activities' siae.slug %}">
+                                        <span>Annuler</span>
+                                    </a>
+                                </li>
+                            </ul>
+                        </div>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </div>
+{% endblock content %}
+{% block extra_js %}
+    <script type="text/javascript"
+            src="{% static 'js/siae_geo_range_field.js' %}"></script>
+    <script type="text/javascript">
+        // dynamic sector display based on sector group selection
+        document.addEventListener('DOMContentLoaded', function() {
+            let sectorGroupSelect = document.getElementById('id_sector_group');
+            let sectorGroupSelectOptions = sectorGroupSelect.children;
+            let sectorRadios = document.querySelectorAll('#checkboxes-id_sectors input[type="checkbox"][name="sectors"]');
+            let sectorGroupLabels = Array.from(document.querySelectorAll('#checkboxes-id_sectors label[class="form-check-label"]')).filter(label => !label.htmlFor);
+            let sectorLabels = Array.from(document.querySelectorAll('#checkboxes-id_sectors label[class="fr-label"]')).filter(label => label.htmlFor);
 
-    // hide all sector group titles
-    sectorGroupLabels.forEach(label => label.style.display = 'none');
+            // hide all sector group titles
+            sectorGroupLabels.forEach(label => label.style.display = 'none');
 
-    function hideAllSectors() {
-        sectorLabels.forEach(label => label.style.display = 'none');
-    }
+            function hideAllSectors() {
+                sectorLabels.forEach(label => label.style.display = 'none');
+            }
 
-    function showSectorsOfSelectedSectorGroup(selectedSectorGroupValue) {
-        hideAllSectors();
-        let selectedSectorGroupName = Array.from(sectorGroupSelectOptions).filter(option => option.value === selectedSectorGroupValue)[0].innerText;
-        let selectedSectorGroupLabel = sectorGroupLabels.find(label => label.innerText === selectedSectorGroupName);
-        Array.from(selectedSectorGroupLabel.parentNode.children).forEach(child => {
-            if (child.firstElementChild && child.firstElementChild.htmlFor) {
-                let selectedSectorGroupLabelSectorLabel = sectorLabels.find(label => label.htmlFor === child.firstElementChild.htmlFor);
-                selectedSectorGroupLabelSectorLabel.style.display = 'block';
+            function showSectorsOfSelectedSectorGroup(selectedSectorGroupValue) {
+                let selectedSectorGroupName = Array.from(sectorGroupSelectOptions).filter(option => option.value === selectedSectorGroupValue)[0].innerText;
+                let selectedSectorGroupLabel = sectorGroupLabels.find(label => label.innerText === selectedSectorGroupName);
+                Array.from(selectedSectorGroupLabel.parentNode.children).forEach(child => {
+                    if (child.lastElementChild && child.lastElementChild.htmlFor) {
+                        let selectedSectorGroupLabelSectorLabel = sectorLabels.find(label => label.htmlFor === child.lastElementChild.htmlFor);
+                        selectedSectorGroupLabelSectorLabel.style.display = 'block';
+                    }
+                });
             }
-        });
-    }
 
-    if (sectorGroupSelect.value) {
-        showSectorsOfSelectedSectorGroup(sectorGroupSelect.value);
-    } else {
-        // init: hide all sector checkboxes
-        sectorLabels.forEach(label => label.style.display = 'none');
-    }
+            if (sectorGroupSelect.value) {
+                hideAllSectors();
+                showSectorsOfSelectedSectorGroup(sectorGroupSelect.value);
+            } else {
+                // init: hide all sector checkboxes
+                sectorLabels.forEach(label => label.style.display = 'none');
+            }
 
-    // on sector group change
-    sectorGroupSelect.addEventListener('change', (event) => {
-        // unselect all sectors + hide them
-        sectorRadios.forEach(checkbox => checkbox.checked = false);
-        hideAllSectors();
-        // show only sectors of selected sector group
-        if (event.target.value) {
-            showSectorsOfSelectedSectorGroup(event.target.value);
-        }
-    })
-});
-            </script>
-        {% endblock %}
+            // on sector group change
+            sectorGroupSelect.addEventListener('change', (event) => {
+                // unselect all sectors + hide them
+                sectorRadios.forEach(checkbox => checkbox.checked = false);
+                hideAllSectors();
+                // show only sectors of selected sector group
+                if (event.target.value) {
+                    showSectorsOfSelectedSectorGroup(event.target.value);
+                }
+            })
+        });
+    </script>
+{% endblock extra_js %}
diff --git a/lemarche/templates/django/forms/widgets/multiple_input.html b/lemarche/templates/django/forms/widgets/multiple_input.html
new file mode 100644
index 000000000..76ea606a0
--- /dev/null
+++ b/lemarche/templates/django/forms/widgets/multiple_input.html
@@ -0,0 +1,12 @@
+{% with id=widget.attrs.id %}
+    {% for group, options, index in widget.optgroups %}
+        {% if group %}
+            <div>
+                <label class="form-check-label">{{ group }}</label>
+            {% endif %}
+            {% for option in options %}
+                {% include option.template_name with widget=option %}
+            {% endfor %}
+            {% if group %}</div>{% endif %}
+    {% endfor %}
+{% endwith %}
diff --git a/lemarche/templates/siaes/_siae_activity_card.html b/lemarche/templates/siaes/_siae_activity_card.html
index 1553cd7b1..e5ea1776d 100644
--- a/lemarche/templates/siaes/_siae_activity_card.html
+++ b/lemarche/templates/siaes/_siae_activity_card.html
@@ -1,43 +1,46 @@
 {% load static siae_sectors_display %}
-<div class="bg-white d-block rounded-lg shadow-lg fr-p-3 mb-3">
-    <div class="fr-grid-row">
-        <div class="fr-col-12 fr-col-lg-8">
-            <p class="h4 lh-sm">{{ activity.sector_group }}</p>
-            <ul>
-                {% siae_sectors_display activity display_max=6 output_format='li' %}
-            </ul>
-            <p class="mb-0">
-                <i class="ri-briefcase-4-line mr-1"></i>
-                <span class="sr-only">Type(s) de prestation :</span>
-                <span>{{ activity.presta_type_display }}</span>
-            </p>
-            <p class="mb-0">
-                <i class="ri-map-2-line"></i>
-                <span class="sr-only">Intervient sur : {{ siae.geo_range_pretty_title }}</span>
-                <span>{{ siae.geo_range_pretty_display }}</span>
-            </p>
-        </div>
-        {% if not hide_actions %}
-            <div class="fr-col-12 fr-col-lg-4 text-right">
-                <a href="{% url 'dashboard_siaes:siae_edit_activities_edit' activity.siae.slug activity.id %}"
-                   id="siae-activity-edit-btn"
-                   class="btn"
-                   title="Modifier l'activité">
-                    <i class="ri-pencil-fill ri-xl"></i>
-                </a>
-                <a href="#"
-                   id="siae-activity-delete-modal-btn"
-                   class="btn"
-                   data-toggle="modal"
-                   data-target="#siae_activity_delete_modal"
-                   data-siae-id="{{ activity.siae.id }}"
-                   data-siae-slug="{{ activity.siae.slug }}"
-                   data-siae-activity-id="{{ activity.id }}"
-                   data-siae-activity-name-display="{{ activity.sector_group }}"
-                   title="Supprimer l'activité">
-                    <i class="ri-delete-bin-line ri-xl"></i>
-                </a>
+<div class="fr-card fr-card--horizontal">
+    <div class="fr-card__body">
+        <div class="fr-card__content">
+            <div class="fr-grid-row">
+                <div class="fr-col-12 fr-col-lg-10">
+                    <h4>{{ activity.sector_group }}</h4>
+                    <ul class="fr-my-4v">
+                        {% siae_sectors_display activity display_max=6 output_format='li' %}
+                    </ul>
+                    <p>
+                        <span class="fr-icon-briefcase-line" aria-hidden="true"></span>
+                        <span class="fr-sr-only ">Type(s) de prestation :</span>
+                        <span>{{ activity.presta_type_display }}</span>
+                    </p>
+                    <p>
+                        <span class="fr-icon-map-pin-2-line" aria-hidden="true"></span>
+                        <span class="fr-sr-only">Intervient sur :</span>{{ activity.geo_range_pretty_title }}
+                        <span class="fr-icon-road-map-line fr-ml-2w" aria-hidden="true"></span>
+                        <span>{{ activity.geo_range_pretty_display }}</span>
+                    </p>
+                </div>
+                <div class="fr-col-12 fr-col-lg-2">
+                    <ul class="fr-btns-group fr-btns-group--inline-sm lemarche--align-right">
+                        <li>
+                            <a href="{% url 'dashboard_siaes:siae_edit_activities_edit' activity.siae.slug activity.id %}"
+                               id="siae-activity-edit-btn"
+                               class="fr-btn fr-btn--sm fr-btn--tertiary-no-outline fr-icon-pencil-fill"
+                               title="Modifier l'activité">Modifier l'activité</a>
+                        </li>
+                        <li>
+                            <button id="siae-activity-delete-modal-btn"
+                                    class="fr-btn fr-btn--sm fr-btn--tertiary-no-outline fr-icon-delete-line"
+                                    x-data="activityItem"
+                                    x-init="initOptions('{{ activity.siae.slug }}','{{ activity.id }}','{{ activity.sector_group|escapejs }}')"
+                                    @click="remove"
+                                    title="Supprimer l'activité">
+                                <i class="ri-delete-bin-line ri-xl"></i>
+                            </button>
+                        </li>
+                    </ul>
+                </div>
             </div>
-        {% endif %}
+        </div>
     </div>
 </div>
diff --git a/lemarche/www/dashboard_siaes/forms.py b/lemarche/www/dashboard_siaes/forms.py
index 4eb48f253..e0879afbb 100644
--- a/lemarche/www/dashboard_siaes/forms.py
+++ b/lemarche/www/dashboard_siaes/forms.py
@@ -271,6 +271,20 @@ class SiaeActivitiesCreateForm(forms.ModelForm):
         required=True,
         widget=forms.RadioSelect,
     )
+    geo_range_custom_distance = forms.IntegerField(
+        label="",
+        required=False,
+    )
+
+    def clean(self):
+        cleaned_data = super().clean()
+        geo_range = cleaned_data.get("geo_range")
+        geo_range_custom_distance = cleaned_data.get("geo_range_custom_distance")
+
+        if geo_range == siae_constants.GEO_RANGE_CUSTOM and not geo_range_custom_distance:
+            self.add_error("geo_range_custom_distance", "Une distance en kilomètres est requise pour cette option.")
+
+        return cleaned_data
 
     class Meta:
         model = SiaeActivity
diff --git a/lemarche/www/dashboard_siaes/views.py b/lemarche/www/dashboard_siaes/views.py
index 3f117c50a..2e8eb6fb2 100644
--- a/lemarche/www/dashboard_siaes/views.py
+++ b/lemarche/www/dashboard_siaes/views.py
@@ -153,6 +153,12 @@ class SiaeEditActivitiesView(SiaeMemberRequiredMixin, DetailView):
     context_object_name = "siae"
     queryset = Siae.objects.all()
 
+    def get_context_data(self, **kwargs):
+        context = super().get_context_data(**kwargs)
+        context["breadcrumb_links"] = [{"title": settings.DASHBOARD_TITLE, "url": reverse_lazy("dashboard:home")}]
+        context["breadcrumb_current"] = f"{self.object.name_display} : modifier"
+        return context
+
 
 class SiaeEditActivitiesDeleteView(SiaeMemberRequiredMixin, SuccessMessageMixin, DeleteView):
     template_name = "dashboard/_siae_activity_delete_modal.html"
@@ -181,6 +187,10 @@ def get(self, request, *args, **kwargs):
         self.siae = Siae.objects.get(slug=self.kwargs.get("slug"))
         return super().get(request, *args, **kwargs)
 
+    def post(self, request, *args, **kwargs):
+        self.siae = Siae.objects.get(slug=self.kwargs.get("slug"))
+        return super().post(request, *args, **kwargs)
+
     def form_valid(self, form):
         siae_activity = form.save(commit=False)
         siae_activity.siae = Siae.objects.get(slug=self.kwargs.get("slug"))
@@ -198,6 +208,17 @@ def get_context_data(self, **kwargs):
         context = super().get_context_data(**kwargs)
         context["page_title"] = "Ajouter une activité"
         context["siae"] = self.siae
+        context["breadcrumb_data"] = {
+            "root_dir": settings_context_processors.expose_settings(self.request)["HOME_PAGE_PATH"],
+            "links": [
+                {"title": settings.DASHBOARD_TITLE, "url": reverse_lazy("dashboard:home")},
+                {
+                    "title": f"{self.siae.name_display} : modifier",
+                    "url": reverse_lazy("dashboard_siaes:siae_edit_activities", args=[self.siae.slug]),
+                },
+            ],
+            "current": context["page_title"],
+        }
         return context
 
     def get_success_url(self):
@@ -217,6 +238,10 @@ def get(self, request, *args, **kwargs):
         self.siae = Siae.objects.get(slug=self.kwargs.get("slug"))
         return super().get(request, *args, **kwargs)
 
+    def post(self, request, *args, **kwargs):
+        self.siae = Siae.objects.get(slug=self.kwargs.get("slug"))
+        return super().post(request, *args, **kwargs)
+
     def get_object(self):
         return get_object_or_404(SiaeActivity, siae__slug=self.kwargs.get("slug"), id=self.kwargs.get("activity_id"))
 
@@ -225,6 +250,17 @@ def get_context_data(self, **kwargs):
         context["page_title"] = "Modifier une activité"
         context["siae"] = self.siae
         context["activity"] = self.object
+        context["breadcrumb_data"] = {
+            "root_dir": settings_context_processors.expose_settings(self.request)["HOME_PAGE_PATH"],
+            "links": [
+                {"title": settings.DASHBOARD_TITLE, "url": reverse_lazy("dashboard:home")},
+                {
+                    "title": f"{self.siae.name_display} : modifier",
+                    "url": reverse_lazy("dashboard_siaes:siae_edit_activities", args=[self.siae.slug]),
+                },
+            ],
+            "current": context["page_title"],
+        }
         return context
 
     def get_success_url(self):