diff --git a/app/assets/stylesheets/procedure_champs_editor.scss b/app/assets/stylesheets/procedure_champs_editor.scss
index a205d053a..0b254dde1 100644
--- a/app/assets/stylesheets/procedure_champs_editor.scss
+++ b/app/assets/stylesheets/procedure_champs_editor.scss
@@ -5,6 +5,7 @@
 .types-de-champ-editor {
   > .types-de-champ-block {
     padding-bottom: 50px;
+    padding-left: 0;
 
     .types-de-champ-errors {
       background-color: $background-red;
@@ -19,7 +20,6 @@
 
     .type-de-champ-container {
       width: 100%;
-      background-color: #FAFDFF;
       border: 1px solid $border-grey;
       border-radius: 5px;
       margin-bottom: $default-padding;
@@ -81,8 +81,6 @@
     }
 
     .head {
-      background-color: #FAFDFF;
-
       select {
         margin-bottom: 0px;
       }
@@ -104,7 +102,7 @@
         border-bottom: 1px solid $border-grey;
 
         &.head {
-          border-bottom: 1px solid #D4E5F5;
+          border-bottom: 1px solid var(--border-default-grey);
           padding-bottom: 10px;
         }
       }
@@ -127,14 +125,17 @@
     }
   }
 
+  .bottom-container {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    right: 0;
+  }
+
   .buttons {
     display: flex;
     justify-content: space-between;
-    margin-left: -30px;
-    position: fixed;
-    bottom: 0px;
     background-color: $white;
-    max-width: 1100px;
     width: 100%;
     border: 1px solid $border-grey;
     padding: 30px;
diff --git a/app/components/types_de_champ_editor/editor_component/editor_component.html.haml b/app/components/types_de_champ_editor/editor_component/editor_component.html.haml
index 0baff9f5b..3d5f644f1 100644
--- a/app/components/types_de_champ_editor/editor_component/editor_component.html.haml
+++ b/app/components/types_de_champ_editor/editor_component/editor_component.html.haml
@@ -1,6 +1,8 @@
 .types-de-champ-editor.editor-root{ 'data-turbo': 'true', id: dom_id(@revision, :types_de_champ_editor) }
   = render TypesDeChampEditor::ErrorsSummary.new(revision: @revision)
   = render TypesDeChampEditor::BlockComponent.new(block: @revision, coordinates: coordinates)
-  .buttons
-    = render TypesDeChampEditor::AddChampButtonComponent.new(revision: @revision, is_annotation: annotations?)
-    = render TypesDeChampEditor::EstimatedFillDurationComponent.new(revision: @revision, is_annotation: annotations?)
+  .bottom-container
+    .fr-container
+      .buttons
+        = render TypesDeChampEditor::AddChampButtonComponent.new(revision: @revision, is_annotation: annotations?)
+        = render TypesDeChampEditor::EstimatedFillDurationComponent.new(revision: @revision, is_annotation: annotations?)
diff --git a/app/views/administrateurs/procedures/champs.html.haml b/app/views/administrateurs/procedures/champs.html.haml
index d86da698a..5065ff8a1 100644
--- a/app/views/administrateurs/procedures/champs.html.haml
+++ b/app/views/administrateurs/procedures/champs.html.haml
@@ -3,8 +3,7 @@
                     [@procedure.libelle.truncate_words(10), admin_procedure_path(@procedure)],
                     ['Configuration des champs']], preview: @procedure.draft_revision.valid? }
 
-.container
+.fr-container
   %h1 Configuration des champs
-  %br
   = render NestedForms::FormOwnerComponent.new
   = render TypesDeChampEditor::EditorComponent.new(revision: @procedure.draft_revision)