diff --git a/app/assets/stylesheets/forms.scss b/app/assets/stylesheets/forms.scss
index d6e7d944f..a2f45af60 100644
--- a/app/assets/stylesheets/forms.scss
+++ b/app/assets/stylesheets/forms.scss
@@ -3,15 +3,6 @@
 @import "placeholders";
 
 .form {
-  h1 {
-    text-align: center;
-    margin-bottom: 20px;
-
-    @media (max-width: $two-columns-breakpoint) {
-      font-size: 26px;
-    }
-  }
-
   hr {
     width: 100%;
     height: 0;
@@ -649,6 +640,14 @@ textarea::placeholder {
   color: $dark-grey;
 }
 
-.send-wrapper--with-border-top {
-  border-top: 2px solid rgba(0, 0, 145, 1);
+.sticky-action-footer {
+  border-top: 2px solid $blue-france-500;
+  position: sticky;
+  // scss-lint:disable VendorPrefix
+  position: -webkit-sticky;  // This is needed on Safari (tested on 12.1)
+  // scss-lint:enable VendorPrefix
+  bottom: 0;
+  padding: $default-padding 0;
+  background-color: $white;
+  z-index: 2;
 }
diff --git a/app/assets/stylesheets/procedure_form.scss b/app/assets/stylesheets/procedure_form.scss
index 54100eb45..b4d64c839 100644
--- a/app/assets/stylesheets/procedure_form.scss
+++ b/app/assets/stylesheets/procedure_form.scss
@@ -69,8 +69,6 @@
 
 .procedure-form__actions {
   display: flex;
-  margin-left: -$default-padding;
-  margin-right: -$default-padding;
   padding: $default-spacer $default-padding;
   background: $light-grey;
   border-top: 1px solid $border-grey;
diff --git a/app/javascript/entrypoints/application.js b/app/javascript/entrypoints/application.js
index f8eb08b1b..d347c7eb4 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-form';
 
 import { toggleCondidentielExplanation } from '../new_design/avis';
 import {
diff --git a/app/javascript/new_design/procedure-form.js b/app/javascript/new_design/procedure-form.js
deleted file mode 100644
index 153b806ce..000000000
--- a/app/javascript/new_design/procedure-form.js
+++ /dev/null
@@ -1,26 +0,0 @@
-import { delegate } from '@utils';
-
-function syncInputToElement(fromSelector, toSelector) {
-  const fromElement = document.querySelector(fromSelector);
-  const toElement = document.querySelector(toSelector);
-  if (toElement && fromElement) {
-    toElement.innerText = fromElement.value;
-  }
-}
-
-function syncFormToPreview() {
-  syncInputToElement('#procedure_libelle', '.procedure-title');
-  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/views/administrateurs/_breadcrumbs.html.haml b/app/views/administrateurs/_breadcrumbs.html.haml
index e3a97c9d2..1ef25665c 100644
--- a/app/views/administrateurs/_breadcrumbs.html.haml
+++ b/app/views/administrateurs/_breadcrumbs.html.haml
@@ -1,5 +1,5 @@
 #breadcrumbs.sub-header
-  .container.flex.justify-between.align-baseline.column
+  .fr-container.flex.justify-between.align-baseline.column
     %nav.fr-breadcrumb.mt-0{ role: "navigation", aria: { label: t('you_are_here', scope: [:layouts, :breadcrumb]) } }
       %button.fr-breadcrumb__button{ aria: { expanded: "false", controls: "breadcrumb-1" } }
         = t('show', scope: [:layouts, :breadcrumb])
diff --git a/app/views/administrateurs/procedures/_informations.html.haml b/app/views/administrateurs/procedures/_informations.html.haml
index 2d607fe6c..be2eca6f0 100644
--- a/app/views/administrateurs/procedures/_informations.html.haml
+++ b/app/views/administrateurs/procedures/_informations.html.haml
@@ -21,7 +21,9 @@
   = 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: 'fr-input', placeholder: '6', required: true, max: f.object.max_duree_conservation_dossiers_dans_ds }
+
+.fr-input-group
+  = 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?
   = render Dsfr::InputComponent.new(form: f, attribute: :lien_site_web, input_type: :text_field, opts: {}, required: false)
@@ -89,11 +91,11 @@
       %p.notice
         En choisissant cette option, l’usager devra renseigner son n° SIRET.<br>Grâce à l’API Entreprise, les informations sur la personne morale (raison sociale, adresse du siège, etc.) seront automatiquement renseignées.
 
-  %p.explication
+  %p
     Si votre démarche s’adresse indifféremment à une personne morale ou un particulier, choisissez l'option « Particuliers ». Vous pourrez ajouter un champ SIRET directement dans le formulaire.
 
 %h3.header-subsection Ajouter des tags
-%p.explication Les tags sont des mots ou des expressions que vous attribuez aux démarches pour décrire leur contenu et pour les retrouver. Les tags sont partagés avec la communauté, ce qui vous permet de voir les tags attribués aux démarches créées par les autres administrateurs.
+%p Les tags sont des mots ou des expressions que vous attribuez aux démarches pour décrire leur contenu et pour les retrouver. Les tags sont partagés avec la communauté, ce qui vous permet de voir les tags attribués aux démarches créées par les autres administrateurs.
 = hidden_field_tag  'procedure[tags]', JSON.generate(@procedure.tags)
 = react_component("ComboMultiple",
   id: "procedure_tags_combo",
@@ -101,7 +103,7 @@
   selected: @procedure.tags,
   disabled: [],
   label: 'Tags',
-  group: '.procedure-form__column--form',
+  group: '.procedure_tags_combo',
   name: 'tags',
   describedby: 'procedure-tags',
   acceptNewValues: true)
diff --git a/app/views/administrateurs/procedures/edit.html.haml b/app/views/administrateurs/procedures/edit.html.haml
index 7571094af..0dee092c9 100644
--- a/app/views/administrateurs/procedures/edit.html.haml
+++ b/app/views/administrateurs/procedures/edit.html.haml
@@ -4,25 +4,21 @@
   locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)],
                     [@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)],
                     ['Description']] }
-.procedure-form
-  .procedure-form__columns.container
-    = render  NestedForms::FormOwnerComponent.new
-    = form_for @procedure,
-      url: url_for({ controller: 'administrateurs/procedures', action: :update, id: @procedure.id }),
-      html: { class: 'form procedure-form__column--form',
-              multipart: true } do |f|
 
-      %h1.page-title Description
+= render  NestedForms::FormOwnerComponent.new
+= form_for @procedure,
+  url: url_for({ controller: 'administrateurs/procedures', action: :update, id: @procedure.id }),
+  html: { class: 'form procedure_tags_combo', multipart: true } do |f|
+  .fr-container
+    .fr-grid-row
+      .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
+        %h1.fr-h2 Description
 
-      = render partial: 'administrateurs/procedures/informations', locals: { f: f }
+        = render partial: 'administrateurs/procedures/informations', locals: { f: f }
 
-      .procedure-form__actions.sticky--bottom
-        .actions-right
-          = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
-          = f.button 'Enregistrer', class: 'fr-btn'
-
-    .procedure-form__column--preview
-      .procedure-form__preview.sticky--top
-        %h3.procedure-form__preview-title Aperçu
-        .procedure-preview
-          = render partial: 'shared/procedure_description', locals: { procedure: @procedure }
+  .sticky-action-footer
+    .fr-container
+      .fr-grid-row
+        .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
+          = f.button 'Enregistrer', class: 'fr-btn fr-mr-2w'
+          = link_to 'Annuler', admin_procedure_path(id: @procedure), class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler les modifications effectuées ?'}
diff --git a/app/views/administrateurs/procedures/new.html.haml b/app/views/administrateurs/procedures/new.html.haml
index 99b375169..fd1511d26 100644
--- a/app/views/administrateurs/procedures/new.html.haml
+++ b/app/views/administrateurs/procedures/new.html.haml
@@ -4,25 +4,20 @@
   locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)],
                     ['Nouvelle']] }
 
-.procedure-form
-  .procedure-form__columns.container
-    = render NestedForms::FormOwnerComponent.new
-    = form_for @procedure,
-      url: url_for({ controller: 'administrateurs/procedures', action: :create, id: @procedure.id }),
-      html: { class: 'form procedure-form__column--form', multipart: true } do |f|
+= render NestedForms::FormOwnerComponent.new
+= form_for @procedure,
+  url: url_for({ controller: 'administrateurs/procedures', action: :create, id: @procedure.id }),
+  html: { class: 'form procedure_tags_combo', multipart: true } do |f|
+  .fr-container
+    .fr-grid-row
+      .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
+        %h1.fr-h2 Nouvelle démarche
 
-      %h1.page-title Nouvelle démarche
+        = render partial: 'administrateurs/procedures/informations', locals: { f: f }
 
-
-      = render partial: 'administrateurs/procedures/informations', locals: { f: f }
-
-      .procedure-form__actions.sticky--bottom
-        .actions-right
-          = link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary fr-mr-2w', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
-          = f.button 'Créer la démarche', class: 'fr-btn'
-
-    .procedure-form__column--preview
-      .procedure-form__preview.sticky--top
-        %h3.procedure-form__preview-title Aperçu
-        .procedure-preview
-          = render partial: 'shared/procedure_description', locals: { procedure: @procedure }
+  .sticky-action-footer
+    .fr-container
+      .fr-grid-row
+        .fr-col-12.fr-col-offset-sm-2.fr-col-sm-8
+          = f.button 'Créer la démarche', class: 'fr-btn fr-mr-2w'
+          = link_to 'Annuler', admin_procedures_path, class: 'fr-btn fr-btn--secondary', data: { confirm: 'Êtes-vous sûr de vouloir annuler la création de cette démarche ?'}
diff --git a/app/views/administrateurs/procedures/show.html.haml b/app/views/administrateurs/procedures/show.html.haml
index 0cc8e359f..0daf8543c 100644
--- a/app/views/administrateurs/procedures/show.html.haml
+++ b/app/views/administrateurs/procedures/show.html.haml
@@ -1,49 +1,37 @@
 = render partial: 'administrateurs/breadcrumbs',
-  locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)],
-                    ["#{@procedure.libelle.truncate_words(10)}"]],
-            metadatas: true }
+    locals: { steps: [['Démarches', admin_procedures_back_path(@procedure)],
+                      ["#{@procedure.libelle.truncate_words(10)}"]],
+              metadatas: true }
 
-.container.procedure-admin-container
-  - if @procedure.draft_revision.valid?
-    - if !@procedure.brouillon?
-      = link_to admin_procedure_archives_path(@procedure), class: 'button', id: "archive-procedure" do
-        %span.icon.download
-        Télécharger
+.fr-container.procedure-admin-container
+  %ul.fr-btns-group.fr-btns-group--inline-sm.fr-btns-group--icon-left
+    - if @procedure.draft_revision.valid?
+      - if !@procedure.brouillon?
+        = link_to 'Télécharger', admin_procedure_archives_path(@procedure), class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-download-line', id: "archive-procedure"
 
-      = link_to commencer_dossier_vide_for_revision_path(@procedure.active_revision), target: "_blank", rel: "noopener", class: 'button', id: "pdf-procedure" do
-        %span.icon.printer
-        PDF
+        = link_to 'PDF', commencer_dossier_vide_for_revision_path(@procedure.active_revision), target: "_blank", rel: "noopener", class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-printer-line', id: "pdf-procedure"
 
-    = link_to apercu_admin_procedure_path(@procedure), target: "_blank", rel: "noopener", class: 'button', id: "preview-procedure" do
-      %span.icon.preview
-      Prévisualiser
+      - if @procedure.brouillon? || @procedure.draft_changed?
+        = link_to 'Tester la démarche', sanitize_url(@procedure_lien_test), target: :blank, rel: :noopener, class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-edit-line'
 
-    - if @procedure.brouillon? || @procedure.draft_changed?
-      = link_to sanitize_url(@procedure_lien_test), target: :blank, rel: :noopener, class: 'button' do
-        %span.icon.in-progress
-        Tester
+      - if @procedure.publiee? || @procedure.brouillon?
+        = link_to 'Envoyer une copie', admin_procedure_transfert_path(@procedure), class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-arrow-right-up-line'
 
-    - if @procedure.publiee? || @procedure.brouillon?
-      = link_to admin_procedure_transfert_path(@procedure), class: 'button' do
-        %span.icon.reply
-        Envoyer une copie
+      - if !@procedure.publiee? && !@procedure.close? && !@procedure.depubliee?
+        = link_to 'Publier', admin_procedure_publication_path(@procedure), class: 'fr-btn fr-btn--primary fr-btn--icon-left fr-icon-success-line', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
 
-    - if !@procedure.publiee? && !@procedure.close? && !@procedure.depubliee?
-      = link_to 'Publier', admin_procedure_publication_path(@procedure), class: 'button primary', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
+      - if (@procedure.close? || @procedure.depubliee?) && !@procedure.draft_changed?
+        = link_to 'Réactiver', admin_procedure_publication_path(@procedure), class: 'fr-btn fr-btn--primary fr-btn--icon-left fr-icon-success-line', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
 
-    - if (@procedure.close? || @procedure.depubliee?) && !@procedure.draft_changed?
-      = link_to 'Réactiver', admin_procedure_publication_path(@procedure), class: 'button primary', id: 'publish-procedure-link', data: { disable_with: "Publication..." }
+      - if @procedure.locked? && !@procedure.close?
+        = link_to 'Clore', admin_procedure_archive_path(procedure_id: @procedure.id), method: :put, class: 'fr-btn fr-btn--tertiary fr-btn--icon-left fr-icon-archive-line', id: "close-procedure-link", data: { confirm:  "Voulez-vous vraiment clore la démarche ? \nLes dossiers en cours pourront être instruits, mais aucun nouveau dossier ne pourra plus être déposé.", disable_with: "Archivage..."}
 
-    - if @procedure.locked? && !@procedure.close?
-      = link_to admin_procedure_archive_path(procedure_id: @procedure.id), method: :put, class: 'button', id: "close-procedure-link", data: { confirm:  "Voulez-vous vraiment clore la démarche ? \nLes dossiers en cours pourront être instruits, mais aucun nouveau dossier ne pourra plus être déposé.", disable_with: "Archivage..."} do
-        %span.icon.archive
-        Clore
 
-.container
+.fr-container
   = render TypesDeChampEditor::ErrorsSummary.new(revision: @procedure.draft_revision)
 
 - if @procedure.draft_changed?
-  .container
+  .fr-container
     .card.featured
       .card-title
         = t(:has_changes, scope: [:administrateurs, :revision_changes])
@@ -54,7 +42,7 @@
 
 - if !@procedure.procedure_expires_when_termine_enabled?
   = render partial: 'administrateurs/procedures/suggest_expires_when_termine', locals: { procedure: @procedure }
-.container
+.fr-container
   %h2.fr-mt-5w.fr-mb-3w.fr-h1 Indispensable avant publication
   .fr-grid-row.fr-grid-row--gutters
     = render Procedure::Card::PresentationComponent.new(procedure: @procedure)
diff --git a/app/views/administrateurs/services/_form.html.haml b/app/views/administrateurs/services/_form.html.haml
index fb9b1793c..72e6c33ef 100644
--- a/app/views/administrateurs/services/_form.html.haml
+++ b/app/views/administrateurs/services/_form.html.haml
@@ -71,7 +71,6 @@
   - if procedure_id.present?
     = hidden_field_tag :procedure_id, procedure_id
 
-  .send-wrapper.justify-content--space-between.send-wrapper--with-border-top.my-0.py-3
+  .sticky-action-footer
+    = f.submit "Enregistrer", class: "fr-btn fr-mr-2w"
     = link_to "Annuler et revenir à la page de suivi", admin_procedure_path(id: @procedure.id), class: "fr-btn fr-btn--secondary"
-    = f.submit "Enregistrer", class: "fr-btn"
-
diff --git a/app/views/shared/_procedure_description.html.haml b/app/views/shared/_procedure_description.html.haml
index fc7d2f08a..886fbb258 100644
--- a/app/views/shared/_procedure_description.html.haml
+++ b/app/views/shared/_procedure_description.html.haml
@@ -5,7 +5,7 @@
   = 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.fr-h2
+%h1.fr-h2
   = procedure.libelle
 
 - if procedure.persisted? && procedure.estimated_duration_visible?
diff --git a/spec/system/administrateurs/procedure_creation_spec.rb b/spec/system/administrateurs/procedure_creation_spec.rb
index c9a684209..f0c5ab84c 100644
--- a/spec/system/administrateurs/procedure_creation_spec.rb
+++ b/spec/system/administrateurs/procedure_creation_spec.rb
@@ -41,14 +41,6 @@ describe 'Creating a new procedure', js: true do
 
       add_champ
       expect(page).to have_selector('.type-de-champ', count: 1)
-
-      click_on Procedure.last.libelle
-
-      preview_window = window_opened_by { find('#preview-procedure').click }
-      within_window(preview_window) do
-        expect(page).to have_current_path(apercu_admin_procedure_path(Procedure.last))
-        expect(page).to have_field('libelle de champ')
-      end
     end
 
     scenario 'a warning is displayed when creating an invalid procedure' do
diff --git a/spec/system/administrateurs/procedure_publish_spec.rb b/spec/system/administrateurs/procedure_publish_spec.rb
index 8fab1137b..82a970052 100644
--- a/spec/system/administrateurs/procedure_publish_spec.rb
+++ b/spec/system/administrateurs/procedure_publish_spec.rb
@@ -44,7 +44,6 @@ describe 'Publishing a procedure', js: true do
       click_on 'Publier'
 
       expect(page).to have_text('Démarche publiée')
-      expect(page).to have_selector('#preview-procedure')
     end
 
     context 'when the procedure has invalid champs' do
@@ -93,7 +92,6 @@ describe 'Publishing a procedure', js: true do
       click_on 'publish'
 
       expect(page).to have_text('Démarche publiée')
-      expect(page).to have_selector('#preview-procedure')
     end
   end
 
@@ -125,7 +123,6 @@ describe 'Publishing a procedure', js: true do
       find('#publish').click
 
       expect(page).to have_text('Démarche publiée')
-      expect(page).to have_selector('#preview-procedure')
     end
   end
 
diff --git a/spec/system/administrateurs/procedure_update_spec.rb b/spec/system/administrateurs/procedure_update_spec.rb
index 5624a70ab..19d006a51 100644
--- a/spec/system/administrateurs/procedure_update_spec.rb
+++ b/spec/system/administrateurs/procedure_update_spec.rb
@@ -32,10 +32,6 @@ describe 'Administrateurs can edit procedures', js: true do
       expect(page).to have_field('procedure_libelle', with: procedure.libelle)
 
       fill_in('procedure_libelle', with: 'Ma petite démarche')
-      within('.procedure-form__preview') do
-        expect(page).to have_content('Ma petite démarche')
-      end
-
       click_on 'Enregistrer'
 
       expect(page).to have_selector('.fr-breadcrumb li', text: 'Ma petite démarche')
diff --git a/spec/views/administrateurs/procedures/edit.html.haml_spec.rb b/spec/views/administrateurs/procedures/edit.html.haml_spec.rb
index f1a061e93..1355dcad8 100644
--- a/spec/views/administrateurs/procedures/edit.html.haml_spec.rb
+++ b/spec/views/administrateurs/procedures/edit.html.haml_spec.rb
@@ -1,15 +1,5 @@
 RSpec.describe 'administrateurs/procedures/edit', type: :view do
-  let(:logo) { fixture_file_upload('spec/fixtures/files/logo_test_procedure.png', 'image/png') }
-  let(:procedure) { create(:procedure, logo: logo, lien_site_web: 'http://some.website') }
-
-  context 'when procedure logo is present' do
-    it 'display on the page' do
-      assign(:procedure, procedure)
-      render
-
-      expect(rendered).to have_selector('.procedure-logos')
-    end
-  end
+  let(:procedure) { create(:procedure, lien_site_web: 'http://some.website') }
 
   context 'when opendata is enabled' do
     it 'asks for opendata' do