diff --git a/app/components/dsfr/callout_component.rb b/app/components/dsfr/callout_component.rb
new file mode 100644
index 000000000..43f015174
--- /dev/null
+++ b/app/components/dsfr/callout_component.rb
@@ -0,0 +1,12 @@
+# see: https://www.systeme-de-design.gouv.fr/elements-d-interface/composants/mise-en-avant
+class Dsfr::CalloutComponent < ApplicationComponent
+  renders_one :body
+
+  private
+
+  def initialize(title:)
+    @title = title
+  end
+
+  attr_reader :title
+end
diff --git a/app/components/dsfr/callout_component/callout_component.html.haml b/app/components/dsfr/callout_component/callout_component.html.haml
new file mode 100644
index 000000000..83c986ce3
--- /dev/null
+++ b/app/components/dsfr/callout_component/callout_component.html.haml
@@ -0,0 +1,3 @@
+%div.fr-callout
+  %h3.fr-callout__title= title
+  %p.fr-callout__text= body
diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
index 871c9f5a4..28a5204a9 100644
--- a/app/javascript/entrypoints/application.js
+++ b/app/javascript/entrypoints/application.js
@@ -71,3 +71,4 @@ import('../shared/track/sentry');
 import '../../../node_modules/@gouvfr/dsfr/dist/core/core.css';
 import '../../../node_modules/@gouvfr/dsfr/dist/component/button/button.css';
 import '../../../node_modules/@gouvfr/dsfr/dist/component/alert/alert.css';
+import '../../../node_modules/@gouvfr/dsfr/dist/component/callout/callout.css';
diff --git a/app/views/administrateurs/services/_form.html.haml b/app/views/administrateurs/services/_form.html.haml
index 327c6fd38..8cb3ad9b4 100644
--- a/app/views/administrateurs/services/_form.html.haml
+++ b/app/views/administrateurs/services/_form.html.haml
@@ -16,17 +16,16 @@
 
   = f.select :type_organisme, Service.type_organismes.keys.map { |key| [ I18n.t("type_organisme.#{key}"), key] }
 
-  %h2.header-section Informations de contact
-
-  %p.explication
-    Votre démarche sera hébergée par #{APPLICATION_NAME} – mais nous ne pouvons pas assurer le support des démarches. Et malgré la dématérialisation, les usagers se poseront parfois des questions légitimes sur le processus administratif.
-    %br
-    %br
-    %strong Il est donc indispensable que les usagers puissent vous contacter
-    par le moyen de leur choix s’ils ont des questions sur votre démarche.
-    %br
-    %br
-    Ces informations de contact seront visibles par les utilisateurs de la démarche, affichées dans le menu « Aide », ainsi qu’en pied de page lors du dépôt d’un dossier. En cas d’informations invalides, #{APPLICATION_NAME} se réserve le droit de suspendre la publication de la démarche.
+  = render Dsfr::CalloutComponent.new(title: "Informations de contact") do |c|
+    - c.body do
+      Votre démarche sera hébergée par #{APPLICATION_NAME} – mais nous ne pouvons pas assurer le support des démarches. Et malgré la dématérialisation, les usagers se poseront parfois des questions légitimes sur le processus administratif.
+      %br
+      %br
+      %strong Il est donc indispensable que les usagers puissent vous contacter
+      par le moyen de leur choix s’ils ont des questions sur votre démarche.
+      %br
+      %br
+      Ces informations de contact seront visibles par les utilisateurs de la démarche, affichées dans le menu « Aide », ainsi qu’en pied de page lors du dépôt d’un dossier. En cas d’informations invalides, #{APPLICATION_NAME} se réserve le droit de suspendre la publication de la démarche.
 
   = f.label :email do
     Adresse email