diff --git a/app/assets/stylesheets/commencer.scss b/app/assets/stylesheets/commencer.scss
index 517a87f57..01e78d1eb 100644
--- a/app/assets/stylesheets/commencer.scss
+++ b/app/assets/stylesheets/commencer.scss
@@ -1,16 +1,6 @@
 @import "constants";
 
 .commencer {
-  @media (min-width: $two-columns-breakpoint) {
-    .button:first-of-type {
-      margin-top: 4 * $default-spacer;
-    }
-  }
-
-  .button {
-    margin-bottom: 2 * $default-spacer;
-  }
-
   .optional-on-small-screens {
     color: #FFFFFF;
   }
diff --git a/app/assets/stylesheets/procedure_context.scss b/app/assets/stylesheets/procedure_context.scss
index 109724fab..cd8e35e65 100644
--- a/app/assets/stylesheets/procedure_context.scss
+++ b/app/assets/stylesheets/procedure_context.scss
@@ -2,7 +2,6 @@
 @import "constants";
 
 $procedure-context-breakpoint: $two-columns-breakpoint;
-$procedure-description-line-height: 22px;
 
 .procedure-preview {
   .paperless-logo {
@@ -31,23 +30,6 @@ $procedure-description-line-height: 22px;
     font-size: 12px;
   }
 
-  .procedure-title {
-    font-size: 26px;
-    margin: 0 0 20px 0;
-    text-align: center;
-
-    @media (min-width: $procedure-context-breakpoint) {
-      margin: 50px 0 32px;
-      font-size: 30px;
-      text-align: left;
-    }
-  }
-
-  .procedure-configuration {
-    font-size: 20px;
-    margin-bottom: 32px;
-  }
-
   .procedure-configuration--auto-archive {
     cursor: pointer;
 
@@ -72,39 +54,8 @@ $procedure-description-line-height: 22px;
     border-bottom: 1px dotted $blue-france-500;
   }
 
-  .read-more-button {
-    display: none;
-  }
-
-  @media (max-width: $procedure-context-breakpoint) {
-    // Truncate description and display the "Read more" UI if the text is too long
-    .procedure-description-body.read-more-collapsed {
-      // Setting the description at 25% of the viewport height:
-      // - displays more text on screens having more vertical space (like small tablets);
-      // - is enough for the action buttons to be visible on the bottom (even on mobiles).
-      max-height: 25vh;
-
-      // If the text exceeds the max-height,
-      // truncate it and displays the "Read more" button.
-      &.read-more-enabled {
-        overflow: auto;
-        border-bottom: 1px solid $border-grey;
-
-        + .read-more-button {
-          display: block;
-          position: relative;
-          margin-left: auto;
-          margin-right: auto;
-          top: -19px;
-          margin-bottom: -19px;
-        }
-      }
-    }
-  }
-
   .procedure-logos {
     display: flex;
-    justify-content: space-around;
     align-items: center;
     margin-bottom: 20px;
 
@@ -116,16 +67,8 @@ $procedure-description-line-height: 22px;
       max-width: 100%;
       max-height: 50px;
 
-      // Fix Chrome flexbox issue
-      // See https://github.com/philipwalton/flexbugs/issues/225
-      width: 100%;
-      height: 100%;
-      min-width: 0;
-      object-fit: contain;
-
       @media (min-width: $procedure-context-breakpoint) {
-        max-width: 500px;
-        max-height: 130px;
+        max-height: 90px;
       }
     }
   }
diff --git a/app/components/dsfr/input_component/input_component.html.haml b/app/components/dsfr/input_component/input_component.html.haml
index 4e52ec670..018def6af 100644
--- a/app/components/dsfr/input_component/input_component.html.haml
+++ b/app/components/dsfr/input_component/input_component.html.haml
@@ -4,8 +4,8 @@
       = label
       - if @required
         %span.mandatory  *
-        - if hint?
-          %span.fr-hint-text= hint
+      - if hint?
+        %span.fr-hint-text= hint
 
   = @form.public_send(@input_type, @attribute, input_opts)
 
diff --git a/app/controllers/administrateurs/procedures_controller.rb b/app/controllers/administrateurs/procedures_controller.rb
index c739d6996..af76e6257 100644
--- a/app/controllers/administrateurs/procedures_controller.rb
+++ b/app/controllers/administrateurs/procedures_controller.rb
@@ -457,6 +457,7 @@ module Administrateurs
       editable_params = [
         :libelle,
         :description,
+        :description_target_audience,
         :organisation,
         :direction,
         :lien_site_web,
diff --git a/app/controllers/users/dossiers_controller.rb b/app/controllers/users/dossiers_controller.rb
index d9f480e90..c8c2b1ff6 100644
--- a/app/controllers/users/dossiers_controller.rb
+++ b/app/controllers/users/dossiers_controller.rb
@@ -92,10 +92,12 @@ module Users
     def identite
       @dossier = dossier
       @user = current_user
+      @no_description = true
     end
 
     def update_identite
       @dossier = dossier
+      @no_description = true
 
       if @dossier.individual.update(individual_params)
         @dossier.update!(autorisation_donnees: true, identity_updated_at: Time.zone.now)
@@ -110,10 +112,12 @@ module Users
 
     def siret
       @dossier = dossier
+      @no_description = true
     end
 
     def update_siret
       @dossier = dossier
+      @no_description = true
 
       # We use the user as the holder model object for the siret value
       # (so that we can restore it on the form in case of error).
diff --git a/app/controllers/users/registrations_controller.rb b/app/controllers/users/registrations_controller.rb
index 9136649cd..8698670c7 100644
--- a/app/controllers/users/registrations_controller.rb
+++ b/app/controllers/users/registrations_controller.rb
@@ -5,7 +5,7 @@ class Users::RegistrationsController < Devise::RegistrationsController
   # before_action :configure_account_update_params, only: [:update]
   before_action :restore_procedure_context, only: [:new, :create]
 
-  layout 'procedure_context', only: [:new, :create]
+  layout 'login', only: [:new, :create]
 
   # GET /resource/sign_up
   def new
diff --git a/app/controllers/users/sessions_controller.rb b/app/controllers/users/sessions_controller.rb
index 41cbb9254..747646cdf 100644
--- a/app/controllers/users/sessions_controller.rb
+++ b/app/controllers/users/sessions_controller.rb
@@ -3,7 +3,7 @@ class Users::SessionsController < Devise::SessionsController
   include TrustedDeviceConcern
   include ActionView::Helpers::DateHelper
 
-  layout 'procedure_context', only: [:new, :create]
+  layout 'login', only: [:new, :create]
 
   before_action :restore_procedure_context, only: [:new, :create]
 
diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
index ffad913d7..f8eb08b1b 100644
--- a/app/javascript/entrypoints/application.js
+++ b/app/javascript/entrypoints/application.js
@@ -12,7 +12,6 @@ import '../shared/toggle-target';
 import { registerControllers } from '../shared/stimulus-loader';
 
 import '../new_design/form-validation';
-import '../new_design/procedure-context';
 import '../new_design/procedure-form';
 
 import { toggleCondidentielExplanation } from '../new_design/avis';
diff --git a/app/javascript/new_design/procedure-context.js b/app/javascript/new_design/procedure-context.js
deleted file mode 100644
index 753811c76..000000000
--- a/app/javascript/new_design/procedure-context.js
+++ /dev/null
@@ -1,20 +0,0 @@
-import { delegate } from '@utils';
-
-function updateReadMoreVisibility() {
-  const descBody = document.querySelector('.procedure-description-body');
-  if (descBody) {
-    // If the description text overflows, display a "Read more" button.
-    const isOverflowing = descBody.scrollHeight > descBody.clientHeight;
-    descBody.classList.toggle('read-more-enabled', isOverflowing);
-  }
-}
-
-function expandProcedureDescription() {
-  const descBody = document.querySelector('.procedure-description-body');
-  descBody.classList.remove('read-more-collapsed');
-}
-
-addEventListener('DOMContentLoaded', updateReadMoreVisibility);
-addEventListener('resize', updateReadMoreVisibility);
-
-delegate('click', '.read-more-button', expandProcedureDescription);
diff --git a/app/javascript/new_design/procedure-form.js b/app/javascript/new_design/procedure-form.js
index 0c161bbb7..153b806ce 100644
--- a/app/javascript/new_design/procedure-form.js
+++ b/app/javascript/new_design/procedure-form.js
@@ -10,8 +10,17 @@ function syncInputToElement(fromSelector, toSelector) {
 
 function syncFormToPreview() {
   syncInputToElement('#procedure_libelle', '.procedure-title');
-  syncInputToElement('#procedure_description', '.procedure-description-body');
+  syncInputToElement('#procedure_description', '.js_description p');
+  syncInputToElement(
+    '#procedure_description_target_audience',
+    '.js_description_target_audience p'
+  );
 }
 
 delegate('input', '.procedure-form #procedure_libelle', syncFormToPreview);
 delegate('input', '.procedure-form #procedure_description', syncFormToPreview);
+delegate(
+  'input',
+  '.procedure-form #procedure_description_target_audience',
+  syncFormToPreview
+);
diff --git a/app/models/procedure.rb b/app/models/procedure.rb
index f791e2cec..da8a08558 100644
--- a/app/models/procedure.rb
+++ b/app/models/procedure.rb
@@ -16,6 +16,7 @@
 #  closed_at                                 :datetime
 #  declarative_with_state                    :string
 #  description                               :string
+#  description_target_audience               :string
 #  dossiers_count_computed_at                :datetime
 #  duree_conservation_dossiers_dans_ds       :integer
 #  duree_conservation_etendue_par_ds         :boolean          default(FALSE), not null
diff --git a/app/views/administrateurs/procedures/_informations.html.haml b/app/views/administrateurs/procedures/_informations.html.haml
index 80d842e9e..ddaed9ad1 100644
--- a/app/views/administrateurs/procedures/_informations.html.haml
+++ b/app/views/administrateurs/procedures/_informations.html.haml
@@ -3,21 +3,17 @@
     .card-title Cette démarche est publiée.
     Certains éléments de la description ne sont plus modifiables.
 
-= f.label :libelle do
-  Titre de la démarche
-  %span.mandatory *
-= f.text_field :libelle, class: 'form-control', placeholder: 'Titre', required: true
+= render Dsfr::InputComponent.new(form: f, attribute: :libelle, input_type: :text_field, opts: {})
 
-= f.label :description do
-  Description
-  %span.mandatory *
-= f.text_area :description, rows: '6', placeholder: 'Description de la démarche, destinataires, etc. ', class: 'form-control', required: true
+= render Dsfr::InputComponent.new(form: f, attribute: :description, input_type: :text_area, opts: {})
+
+= render Dsfr::InputComponent.new(form: f, attribute: :description_target_audience, input_type: :text_area, opts: {}, required: false)
 
 %h3.header-subsection Logo de la démarche
 = render Attachment::EditComponent.new(attached_file: @procedure.logo, view_as: :link)
 
 %h3.header-subsection Conservation des données
-= f.label :duree_conservation_dossiers_dans_ds do
+= f.label :duree_conservation_dossiers_dans_ds, class: 'fr-label' do
   Sur #{APPLICATION_NAME}
   %span.mandatory *
 
@@ -25,12 +21,10 @@
   = t(:notice, scope: [:administrateurs, :duree_conservation_dossiers_dans_ds])
   - if f.object.duree_conservation_dossiers_dans_ds.to_i < Procedure::NEW_MAX_DUREE_CONSERVATION
     = t(:new_duration_constraint, scope: [:administrateurs, :duree_conservation_dossiers_dans_ds], new_duration_in_month: f.object.max_duree_conservation_dossiers_dans_ds)
-= f.number_field :duree_conservation_dossiers_dans_ds, { class: 'form-control', placeholder: '6', required: true, max: f.object.max_duree_conservation_dossiers_dans_ds }
+= f.number_field :duree_conservation_dossiers_dans_ds, { class: 'fr-input', placeholder: '6', required: true, max: f.object.max_duree_conservation_dossiers_dans_ds }
 
 - if @procedure.created_at.present?
-  = f.label :lien_site_web do
-    Où les usagers trouveront-ils le lien vers la démarche ?
-  = f.text_field :lien_site_web, class: 'form-control', placeholder: 'https://exemple.gouv.fr/ma_demarche'
+  = render Dsfr::InputComponent.new(form: f, attribute: :lien_site_web, input_type: :text_field, opts: {}, required: false)
 
 %h3.header-subsection
   Cadre juridique
@@ -48,10 +42,9 @@
 %p.notice
   Vous pouvez saisir un lien web vers ce texte, ou l’importer depuis un fichier.
 
-= f.label :cadre_juridique, 'Lien vers le texte'
-= f.text_field :cadre_juridique, class: 'form-control', placeholder: 'https://www.legifrance.gouv.fr/'
+= render Dsfr::InputComponent.new(form: f, attribute: :cadre_juridique, input_type: :text_field, opts: {})
 
-= f.label :deliberation, 'Importer le texte'
+= f.label :deliberation, 'Importer le texte', class: 'fr-label'
 = render Attachment::EditComponent.new(attached_file: @procedure.deliberation, view_as: :download)
 
 %h3.header-subsection
@@ -59,8 +52,7 @@
 %p.notice
   Pour certaines démarches, veuillez indiquer soit le mail de contact de votre délégué à la protection des données, soit un lien web pointant vers les informations
 
-= f.label :lien_dpo, 'Lien ou email pour contacter le Délégué à la Protection des Données (DPO)'
-= f.text_field :lien_dpo, class: 'form-control'
+= render Dsfr::InputComponent.new(form: f, attribute: :lien_dpo, input_type: :text_field, opts: {}, required: false)
 
 - if Rails.application.config.ds_opendata_enabled
   %h3.header-subsection= t(:opendata_header, scope: [:administrateurs, :informations])
@@ -78,7 +70,7 @@
 %p.notice
   Une notice explicative est un document destiné à guider l’usager dans sa démarche. C’est un document que vous avez élaboré et qui peut prendre la forme d’un fichier doc, d’un pdf ou encore de diapositives. Le bouton pour télécharger cette notice apparaît en haut du formulaire pour l’usager.
 
-= f.label :notice, 'Notice'
+= f.label :notice, 'Notice', class: 'fr-label'
 %p.notice
   Formats acceptés : .doc, .odt, .pdf, .ppt, .pptx
 = render Attachment::EditComponent.new(attached_file: @procedure.notice, view_as: :download)
@@ -91,7 +83,7 @@
       Ma démarche s’adresse à un particulier
       %p.notice En choisissant cette option, l’usager devra renseigner son nom et prénom avant d’accéder au formulaire
 
-    = f.label :for_individual, value: false do
+    = f.label :for_individual, value: false, class: 'fr-label' do
       = f.radio_button :for_individual, false
       Ma démarche s’adresse à une personne morale
       %p.notice
@@ -119,14 +111,14 @@
     %h3.header-subsection Options avancées
 
   - if feature_enabled?(:administrateur_web_hook)
-    = f.label :web_hook_url do
+    = f.label :web_hook_url, class: 'fr-label' do
       Lien de rappel HTTP (webhook)
     %p.notice
       Vous pouvez définir un lien de rappel HTTP (aussi appelé webhook) pour informer un service tiers du changement de l'état d’un dossier de cette démarche sur #{APPLICATION_NAME}.
       = link_to("Consulter la documentation du webhook", WEBHOOK_DOC_URL, target: "_blank", rel: "noopener")
-    = f.text_field :web_hook_url, class: 'form-control', placeholder: 'https://callback.exemple.fr/'
+    = f.text_field :web_hook_url, class: 'fr-input', placeholder: 'https://callback.exemple.fr/'
 
-  = f.label :auto_archive_on do
+  = f.label :auto_archive_on, class: 'fr-label' do
     Date limite de dépôt des dossiers
   %p.notice
     Si une date est définie, aucun dossier ne pourra plus être déposé ou modifié après cette limite.
@@ -136,7 +128,7 @@
     = f.date_field :auto_archive_on, id: 'auto_archive_on', value: value
     #{procedure_auto_archive_time(@procedure)}.
 
-  = f.label :declarative_with_state do
+  = f.label :declarative_with_state, class: 'fr-label' do
     Démarche déclarative
   %p.notice
     Par défaut, un dossier déposé peut être complété ou corrigé par le demandeur jusqu'à sa mise en instruction.<br>
diff --git a/app/views/commencer/show.html.haml b/app/views/commencer/show.html.haml
index 211c113bc..1cae0d8d3 100644
--- a/app/views/commencer/show.html.haml
+++ b/app/views/commencer/show.html.haml
@@ -2,13 +2,14 @@
 
 .commencer.form
   - if !user_signed_in?
-    %h2.huge-title= t('views.commencer.show.start_procedure')
-    = render partial: 'shared/france_connect_login', locals: { url: commencer_france_connect_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token) }
-    = link_to commencer_sign_up_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), class: 'fr-btn fr-btn--lg fr-my-2w' do
-      = t('views.shared.account.create')
-      %span.optional-on-small-screens.fr-ml-1v
-        #{APPLICATION_NAME}
-    = link_to t('views.shared.account.already_user'), commencer_sign_in_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), class: 'fr-btn fr-btn--secondary fr-btn--lg fr-my-2w'
+    = render Dsfr::CalloutComponent.new(title: t("views.commencer.show.start_procedure"), heading_level: 'h2') do |c|
+      - c.body do
+        = render partial: 'shared/france_connect_login', locals: { url: commencer_france_connect_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token) }
+        = link_to commencer_sign_up_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), class: 'fr-btn fr-mb-2w fr-mr-2w' do
+          = t('views.shared.account.create')
+          %span.optional-on-small-screens.fr-ml-1v
+            #{APPLICATION_NAME}
+        = link_to t('views.shared.account.already_user'), commencer_sign_in_path(path: @procedure.path, prefill_token: @prefilled_dossier&.prefill_token), class: 'fr-btn fr-btn--secondary fr-mb-2w'
 
   - else
     - revision = @revision.draft? ? @revision : @procedure.revisions.where.not(id: @procedure.draft_revision_id)
@@ -17,37 +18,42 @@
     - not_drafts = dossiers.merge(Dossier.state_not_brouillon)
 
     - if @prefilled_dossier
-      %h2.huge-title= t('views.commencer.show.prefilled_draft')
-      %p= t('views.commencer.show.prefilled_draft_detail_html', time_ago: time_ago_in_words(@prefilled_dossier.created_at), procedure: @procedure.libelle)
-      = link_to t('views.commencer.show.go_to_prefilled_file'), url_for_dossier(@prefilled_dossier), class: 'fr-btn fr-btn--lg fr-my-2w'
+      = render Dsfr::CalloutComponent.new(title: t("views.commencer.show.prefilled_draft"), heading_level: 'h2') do |c|
+        - c.body do
+          %p= t('views.commencer.show.prefilled_draft_detail_html', time_ago: time_ago_in_words(@prefilled_dossier.created_at), procedure: @procedure.libelle)
+          = link_to t('views.commencer.show.go_to_prefilled_file'), url_for_dossier(@prefilled_dossier), class: 'fr-btn fr-mb-2w'
 
     - elsif dossiers.empty?
-      = link_to t('views.commencer.show.start_procedure'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--lg fr-my-2w'
+      = link_to t('views.commencer.show.start_procedure'), url_for_new_dossier(@revision), class: 'fr-btn fr-mb-2w'
 
     - elsif drafts.size == 1 && not_drafts.empty?
       - dossier = drafts.first
-      %h2.huge-title= t('views.commencer.show.already_draft')
-      %p
-        = t('views.commencer.show.already_draft_detail_html', time_ago: time_ago_in_words(dossier.created_at), procedure: dossier.procedure.libelle)
-      = link_to t('views.commencer.show.continue_file'), url_for_dossier(dossier), class: 'fr-btn fr-btn--lg fr-my-2w'
-      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--lg fr-btn--secondary fr-my-2w'
+      = render Dsfr::CalloutComponent.new(title: t("views.commencer.show.already_draft"), heading_level: 'h2') do |c|
+        - c.body do
+          %p
+            = t('views.commencer.show.already_draft_detail_html', time_ago: time_ago_in_words(dossier.created_at), procedure: dossier.procedure.libelle)
+          = link_to t('views.commencer.show.continue_file'), url_for_dossier(dossier), class: 'fr-btn fr-mb-2w'
+          = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--secondary fr-mb-2w'
 
     - elsif not_drafts.size == 1
       - dossier = not_drafts.first
-      %h2.huge-title= t('views.commencer.show.already_not_draft')
-      %p
-        = t('views.commencer.show.already_not_draft_detail_html', time_ago: time_ago_in_words(dossier.depose_at), procedure: dossier.procedure.libelle)
-      = link_to t('views.commencer.show.show_my_submitted_file'), url_for_dossier(dossier), class: 'fr-btn fr-btn--lg fr-my-2w'
-      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--lg fr-btn--secondary fr-my-2w'
+      = render Dsfr::CalloutComponent.new(title: t("views.commencer.show.already_not_draft"), heading_level: 'h2') do |c|
+        - c.body do
+          %p
+            = t('views.commencer.show.already_not_draft_detail_html', time_ago: time_ago_in_words(dossier.depose_at), procedure: dossier.procedure.libelle)
+          = link_to t('views.commencer.show.show_my_submitted_file'), url_for_dossier(dossier), class: 'fr-btn fr-mb-2w'
+          = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: 'fr-btn fr-btn--secondary fr-mb-2w'
 
     - else
-      %h2.huge-title= t('views.commencer.show.existing_dossiers')
-      = link_to t('views.commencer.show.show_dossiers'), dossiers_path, class: "fr-btn fr-btn--lg fr-my-2w"
-      = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: "fr-btn fr-btn--lg fr-btn--secondary fr-my-2w"
+      = render Dsfr::CalloutComponent.new(title: t("views.commencer.show.existing_dossiers"), heading_level: 'h2') do |c|
+        - c.body do
+          = link_to t('views.commencer.show.show_dossiers'), dossiers_path, class: "fr-btn fr-mb-2w"
+          = link_to t('views.commencer.show.start_new_file'), url_for_new_dossier(@revision), class: "fr-btn fr-btn--secondary fr-mb-2w"
+
 
   - if @procedure.feature_enabled?(:dossier_pdf_vide)
     %hr
     %p= t('views.commencer.show.want_empty_pdf', service: @procedure&.service&.nom, adresse: @procedure&.service&.adresse)
 
     %br
-    = link_to t('views.commencer.show.download_empty_pdf'), commencer_dossier_vide_for_revision_path(@revision), class: "fr-btn fr-btn--lg fr-btn--secondary fr-my-2w"
+    = link_to t('views.commencer.show.download_empty_pdf'), commencer_dossier_vide_for_revision_path(@revision), class: "fr-btn fr-btn--secondary fr-mb-2w"
diff --git a/app/views/layouts/login.html.haml b/app/views/layouts/login.html.haml
new file mode 100644
index 000000000..fe55afe5c
--- /dev/null
+++ b/app/views/layouts/login.html.haml
@@ -0,0 +1,17 @@
+- procedure = @procedure || @dossier&.procedure || nil
+
+- content_for :content do
+  .two-columns.procedure-context
+    .columns-container
+      .column.procedure-preview
+        = yield
+      .column.procedure-context-content
+        = render partial: 'layouts/commencer/no_procedure'
+
+- content_for :footer do
+  - if procedure
+    = render partial: 'users/procedure_footer', locals: { procedure: procedure, dossier: @dossier }
+  - else
+    = render partial: 'users/dossiers/index_footer'
+
+= render template: 'layouts/application'
diff --git a/app/views/layouts/procedure_context.html.haml b/app/views/layouts/procedure_context.html.haml
index 3143c57d7..ebdfc0b5d 100644
--- a/app/views/layouts/procedure_context.html.haml
+++ b/app/views/layouts/procedure_context.html.haml
@@ -1,17 +1,11 @@
 - procedure = @procedure || @dossier&.procedure || nil
 
 - content_for :content do
-  .two-columns.procedure-context
-    .columns-container
-
-      .column.procedure-preview
-        - if procedure
+  .fr-container.fr-mt-5w
+    .fr-grid-row
+      .fr-col-12.fr-col-md-8.fr-col-offset-md-2
+        .procedure-preview.fr-mb-5w
           = render partial: 'shared/procedure_description', locals: { procedure: procedure }
-        - else
-          = render partial: 'layouts/commencer/no_procedure'
-
-      .column.procedure-context-content
-        = yield
 
 - content_for :footer do
   - if procedure
diff --git a/app/views/shared/_procedure_description.html.haml b/app/views/shared/_procedure_description.html.haml
index 8e2af15c9..0a3f2dc7f 100644
--- a/app/views/shared/_procedure_description.html.haml
+++ b/app/views/shared/_procedure_description.html.haml
@@ -5,23 +5,37 @@
   = image_tag procedure.logo_url, alt: procedure_logo_alt
   - if procedure.euro_flag
     = image_tag("flag_of_europe.svg", id: 'euro_flag', class: (!procedure.euro_flag ? "hidden" : ""))
-%h1.procedure-title
+%h1.procedure-title.fr-h2
   = procedure.libelle
 
 - if procedure.persisted? && procedure.estimated_duration_visible?
-  %p.procedure-configuration.procedure-configuration--fill-duration
-    %span.icon.clock
-    = t('shared.procedure_description.estimated_fill_duration', estimated_minutes: estimated_fill_duration_minutes(procedure))
+  %p
+    %small
+      %span.fr-icon-timer-line
+      = t('shared.procedure_description.estimated_fill_duration', estimated_minutes: estimated_fill_duration_minutes(procedure))
+
+
+= yield
 
 - if procedure.auto_archive_on
-  %details.procedure-configuration.procedure-configuration--auto-archive
+  %details.procedure-configuration--auto-archive
     %summary
       %span.icon.edit
 
       %span.procedure-auto-archive-title Date limite : #{procedure_auto_archive_date(procedure)}
     %p Vous pouvez déposer vos dossiers jusqu’au #{procedure_auto_archive_datetime(procedure)}.
 
-.procedure-description
-  .procedure-description-body.read-more-enabled.read-more-collapsed{ tabindex: "0", role: "region", "aria-label": t('views.users.dossiers.identite.description') }
-    = h render SimpleFormatComponent.new(procedure.description, allow_a: true)
-  = button_tag "Afficher la description complète", class: 'button read-more-button'
+- unless @no_description
+  .fr-accordions-group
+    %section.fr-accordion
+      %h2.fr-accordion__title
+        %button.fr-accordion__btn{ "aria-controls" => "accordion-114", "aria-expanded" => "true" } Quel est l’objet de cette démarche ?
+      #accordion-114.fr-collapse.js_description
+        = h render SimpleFormatComponent.new(procedure.description, allow_a: true)
+
+    - if procedure.description_target_audience.present?
+      %section.fr-accordion
+        %h2.fr-accordion__title
+          %button.fr-accordion__btn{ "aria-controls" => "accordion-115", "aria-expanded" => "false" } À qui s’adresse la démarche ?
+        #accordion-115.fr-collapse.js_description_target_audience
+          = h render SimpleFormatComponent.new(procedure.description_target_audience, allow_a: true)
diff --git a/app/views/users/dossiers/siret.html.haml b/app/views/users/dossiers/siret.html.haml
index 436e1076d..64bc5a761 100644
--- a/app/views/users/dossiers/siret.html.haml
+++ b/app/views/users/dossiers/siret.html.haml
@@ -2,7 +2,7 @@
 
 - if !dossier_submission_is_closed?(@dossier)
   = form_for current_user, url: siret_dossier_path(@dossier), html: { class: 'form', method: 'post' } do |f|
-    %h2.huge-title Identifier votre établissement
+    %h2.fr-h4 Identifier votre établissement
 
     %p.mb-1 Merci de remplir le numéro de SIRET de votre entreprise, administration ou association pour commencer la démarche.
 
diff --git a/config/locales/en.yml b/config/locales/en.yml
index 984c0e8f2..f6d2a5419 100644
--- a/config/locales/en.yml
+++ b/config/locales/en.yml
@@ -396,7 +396,6 @@ en:
           identity_data: Identity data
           all_required: All fields are required.
           civility: Civility
-          description: Description of the procedure
           first_name: First Name
           last_name: Last Name
           birthdate: Date de naissance
diff --git a/config/locales/fr.yml b/config/locales/fr.yml
index 82f6101ce..485db9541 100644
--- a/config/locales/fr.yml
+++ b/config/locales/fr.yml
@@ -397,7 +397,6 @@ fr:
           identity_data: Données d’identité
           all_required: Tous les champs sont obligatoires.
           civility: Civilité
-          description: Description de la démarche
           first_name: Prénom
           last_name: Nom
           birthdate: Date de naissance
diff --git a/config/locales/models/procedure/en.yml b/config/locales/models/procedure/en.yml
index 7794527c6..f7346f11e 100644
--- a/config/locales/models/procedure/en.yml
+++ b/config/locales/models/procedure/en.yml
@@ -6,8 +6,18 @@ en:
         other: Procedure
     attributes:
       procedure:
+        hints:
+          description: Describe in a few lines the context, the aim etc.
+          description_target_audience: Describe in a few lines the final recipients of the process, the eligibility criteria if there are any, the prerequisites, etc.
+          lien_site_web: "Exemple: 'https://exemple.gouv.fr/ma_demarche'"
+          cadre_juridique: "Exemple: 'https://www.legifrance.gouv.fr/'"
         path: Public link
         organisation: Service
+        description: What is the purpose of this procedure?
+        description_target_audience: Who is the procedure intended for?
+        lien_site_web: Where will users find the link to the procedure?
+        cadre_juridique: Link to the legal text
+        lien_dpo: Link or email to contact the data protection officer (DPO)
         duree_conservation_dossiers_dans_ds: Duration files will be kept
         max_duree_conservation_dossiers_dans_ds: Max duration allowed to keep files
         aasm_state:
diff --git a/config/locales/models/procedure/fr.yml b/config/locales/models/procedure/fr.yml
index 2c223d149..27ea70305 100644
--- a/config/locales/models/procedure/fr.yml
+++ b/config/locales/models/procedure/fr.yml
@@ -6,12 +6,22 @@ fr:
         other: Démarches
     attributes:
       procedure:
+        hints:
+          description: Décrivez en quelques lignes le contexte, la finalité etc.
+          description_target_audience: Décrivez en quelques lignes les destinataires finaux de la démarche, les critères d’éligibilité s’il y en a, les pré-requis, etc.
+          lien_site_web: "Exemple: 'https://exemple.gouv.fr/ma_demarche'"
+          cadre_juridique: "Exemple: 'https://www.legifrance.gouv.fr/'"
         path: Lien public
         organisation: Organisme
         duree_conservation_dossiers_dans_ds: Durée de conservation des dossiers sur demarches-simplifiees.fr (choisi par un usager)
         max_duree_conservation_dossiers_dans_ds: Durée de conservation des dossiers maximum (autorisé par un super admin de DS)
         id: Id
-        libelle: Libelle
+        libelle: Titre de la démarche
+        description: Quel est l’objet de la démarche ?
+        description_target_audience: À qui s’adresse la démarche ?
+        lien_site_web: Où les usagers trouveront-ils le lien vers la démarche ?
+        cadre_juridique: Lien vers le texte
+        lien_dpo: Lien ou email pour contacter le Délégué à la Protection des Données (DPO)
         published_at: 'Date de publication'
         aasm_state: 'Statut'
         admin_count: 'Nb administrateurs'
diff --git a/db/migrate/20230516132925_add_description_target_audience_to_procedure.rb b/db/migrate/20230516132925_add_description_target_audience_to_procedure.rb
new file mode 100644
index 000000000..e0c1a0f96
--- /dev/null
+++ b/db/migrate/20230516132925_add_description_target_audience_to_procedure.rb
@@ -0,0 +1,5 @@
+class AddDescriptionTargetAudienceToProcedure < ActiveRecord::Migration[7.0]
+  def change
+    add_column :procedures, :description_target_audience, :string
+  end
+end
diff --git a/spec/support/feature_matchers.rb b/spec/support/feature_matchers.rb
deleted file mode 100644
index b61c8beee..000000000
--- a/spec/support/feature_matchers.rb
+++ /dev/null
@@ -1,9 +0,0 @@
-module Capybara
-  class Session
-    # Find the description of a procedure on the page
-    # Usage: expect(page).to have_procedure_description(procedure)
-    def has_procedure_description?(procedure)
-      has_content?(procedure.libelle) && has_content?(procedure.description) && has_content?(procedure.service.email)
-    end
-  end
-end
diff --git a/spec/system/administrateurs/procedure_spec_helper.rb b/spec/system/administrateurs/procedure_spec_helper.rb
index 134e93ec9..279e2d1ae 100644
--- a/spec/system/administrateurs/procedure_spec_helper.rb
+++ b/spec/system/administrateurs/procedure_spec_helper.rb
@@ -1,7 +1,8 @@
 module ProcedureSpecHelper
   def fill_in_dummy_procedure_details(fill_path: true)
     fill_in 'procedure_libelle', with: 'libelle de la procedure'
-    fill_in 'procedure_description', with: 'description de la procedure'
+    fill_in 'procedure_description', with: "description de l'objet de la procedure"
+    fill_in 'procedure_description_target_audience', with: "description d'à qui s'adresse la procedure"
     fill_in 'procedure_cadre_juridique', with: 'cadre juridique'
     fill_in 'procedure_duree_conservation_dossiers_dans_ds', with: '3'
   end
diff --git a/spec/system/sessions/sign_in_spec.rb b/spec/system/sessions/sign_in_spec.rb
index c5679805c..0bd1beaeb 100644
--- a/spec/system/sessions/sign_in_spec.rb
+++ b/spec/system/sessions/sign_in_spec.rb
@@ -35,7 +35,6 @@ describe 'Signin in:' do
     scenario 'an existing user can sign-in and fill the procedure' do
       click_on 'J’ai déjà un compte'
       expect(page).to have_current_path new_user_session_path
-      expect(page).to have_procedure_description(procedure)
 
       sign_in_with user.email, password
 
@@ -43,7 +42,7 @@ describe 'Signin in:' do
       click_on 'Commencer la démarche'
 
       expect(page).to have_current_path identite_dossier_path(user.reload.dossiers.last)
-      expect(page).to have_procedure_description(procedure)
+      expect(page).to have_content(procedure.libelle)
       expect(page).to have_content "Données d’identité"
     end
   end
diff --git a/spec/system/users/dossier_creation_spec.rb b/spec/system/users/dossier_creation_spec.rb
index ca2c8f3e4..d5581a02f 100644
--- a/spec/system/users/dossier_creation_spec.rb
+++ b/spec/system/users/dossier_creation_spec.rb
@@ -19,7 +19,6 @@ describe 'Creating a new dossier:' do
         click_on 'Commencer la démarche'
 
         expect(page).to have_current_path identite_dossier_path(user.reload.dossiers.last)
-        expect(page).to have_procedure_description(procedure)
         expect(page).to have_title(libelle)
 
         choose 'Monsieur'
@@ -91,7 +90,7 @@ describe 'Creating a new dossier:' do
         click_on 'Commencer la démarche'
 
         expect(page).to have_current_path siret_dossier_path(dossier)
-        expect(page).to have_procedure_description(procedure)
+        expect(page).to have_content(procedure.libelle)
 
         fill_in 'Numéro SIRET', with: siret
         click_on 'Valider'
@@ -108,7 +107,7 @@ describe 'Creating a new dossier:' do
         click_on 'Commencer la démarche'
 
         expect(page).to have_current_path(siret_dossier_path(dossier))
-        expect(page).to have_procedure_description(procedure)
+        expect(page).to have_content(procedure.libelle)
 
         fill_in 'Numéro SIRET', with: '0000'
         click_on 'Valider'
diff --git a/spec/system/users/sign_up_spec.rb b/spec/system/users/sign_up_spec.rb
index 9c77cfbac..9f576b48a 100644
--- a/spec/system/users/sign_up_spec.rb
+++ b/spec/system/users/sign_up_spec.rb
@@ -70,7 +70,6 @@ describe 'Signing up:' do
 
       click_on 'Créer un compte'
       expect(page).to have_current_path new_user_registration_path
-      expect(page).to have_procedure_description(procedure)
 
       sign_up_with user_email, user_password
       expect(page).to have_content "nous avons besoin de vérifier votre adresse #{user_email}"
@@ -84,7 +83,7 @@ describe 'Signing up:' do
       click_on 'Commencer la démarche'
 
       expect(page).to have_current_path identite_dossier_path(procedure.reload.dossiers.last)
-      expect(page).to have_procedure_description(procedure)
+      expect(page).to have_content(procedure.libelle)
     end
   end
 
@@ -141,7 +140,6 @@ describe 'Signing up:' do
       click_procedure_sign_in_link_for user_email
 
       expect(page).to have_current_path new_user_session_path
-      expect(page).to have_procedure_description(procedure)
     end
   end
 end
diff --git a/spec/views/layouts/procedure_context.html.haml_spec.rb b/spec/views/layouts/procedure_context.html.haml_spec.rb
index da578e5fa..15013c457 100644
--- a/spec/views/layouts/procedure_context.html.haml_spec.rb
+++ b/spec/views/layouts/procedure_context.html.haml_spec.rb
@@ -51,18 +51,4 @@ describe 'layouts/procedure_context', type: :view do
       expect(subject).to have_text(dossier.procedure.service.email)
     end
   end
-
-  context 'when neither procedure or dossier are assigned' do
-    it 'renders a placeholder for the procedure' do
-      expect(subject).to have_selector('.no-procedure')
-    end
-
-    it 'renders the inner content' do
-      expect(subject).to have_text('Column content')
-    end
-
-    it 'renders a generic footer' do
-      expect(subject).to have_text('Mentions légales')
-    end
-  end
 end