diff --git a/app/javascript/components/TypesDeChampEditor/components/TypeDeChamps.js b/app/javascript/components/TypesDeChampEditor/components/TypeDeChamps.js
index 13ba32302..104ca2fa2 100644
--- a/app/javascript/components/TypesDeChampEditor/components/TypeDeChamps.js
+++ b/app/javascript/components/TypesDeChampEditor/components/TypeDeChamps.js
@@ -12,13 +12,6 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
     typeDeChamps
   });
 
-  if (state.typeDeChamps.length === 0) {
-    dispatch({
-      type: 'addFirstTypeDeChamp',
-      done: () => dispatch({ type: 'refresh' })
-    });
-  }
-
   return (
     <div className="champs-editor">
       <SortableContainer
@@ -39,6 +32,13 @@ function TypeDeChamps({ state: rootState, typeDeChamps }) {
           />
         ))}
       </SortableContainer>
+      {state.typeDeChamps.length === 0 && (
+        <h2>
+          <FontAwesomeIcon icon="arrow-circle-down" />
+          &nbsp;&nbsp;Cliquez sur le bouton «&nbsp;Ajouter un champ&nbsp;» pour
+          créer votre premier champ.
+        </h2>
+      )}
       <div className="footer">&nbsp;</div>
       <div className="buttons">
         <button
diff --git a/app/javascript/components/TypesDeChampEditor/index.js b/app/javascript/components/TypesDeChampEditor/index.js
index dff850ac6..a5e224343 100644
--- a/app/javascript/components/TypesDeChampEditor/index.js
+++ b/app/javascript/components/TypesDeChampEditor/index.js
@@ -5,6 +5,7 @@ import {
   faArrowDown,
   faArrowsAltV,
   faArrowUp,
+  faArrowCircleDown,
   faPlus,
   faTrash
 } from '@fortawesome/free-solid-svg-icons';
@@ -13,7 +14,14 @@ import Flash from './Flash';
 import OperationsQueue from './OperationsQueue';
 import TypeDeChamps from './components/TypeDeChamps';
 
-library.add(faArrowDown, faArrowsAltV, faArrowUp, faPlus, faTrash);
+library.add(
+  faArrowDown,
+  faArrowsAltV,
+  faArrowUp,
+  faArrowCircleDown,
+  faPlus,
+  faTrash
+);
 
 class TypesDeChampEditor extends Component {
   constructor(props) {
diff --git a/app/javascript/components/TypesDeChampEditor/typeDeChampsReducer.js b/app/javascript/components/TypesDeChampEditor/typeDeChampsReducer.js
index 81e603082..d18c849b3 100644
--- a/app/javascript/components/TypesDeChampEditor/typeDeChampsReducer.js
+++ b/app/javascript/components/TypesDeChampEditor/typeDeChampsReducer.js
@@ -11,8 +11,6 @@ export default function typeDeChampsReducer(state, { type, params, done }) {
   switch (type) {
     case 'addNewTypeDeChamp':
       return addNewTypeDeChamp(state, state.typeDeChamps, done);
-    case 'addFirstTypeDeChamp':
-      return addFirstTypeDeChamp(state, state.typeDeChamps, done);
     case 'addNewRepetitionTypeDeChamp':
       return addNewRepetitionTypeDeChamp(
         state,
@@ -98,19 +96,6 @@ function addNewRepetitionTypeDeChamp(state, typeDeChamps, typeDeChamp, done) {
   );
 }
 
-function addFirstTypeDeChamp(state, typeDeChamps, done) {
-  const typeDeChamp = { ...state.defaultTypeDeChampAttributes, order_place: 0 };
-
-  createTypeDeChampOperation(typeDeChamp, state.queue)
-    .then(() => done())
-    .catch(message => state.flash.error(message));
-
-  return {
-    ...state,
-    typeDeChamps: [...typeDeChamps, typeDeChamp]
-  };
-}
-
 function updateTypeDeChamp(
   state,
   typeDeChamps,
@@ -223,10 +208,14 @@ function getUpdateHandler(typeDeChamp, { queue, flash }) {
 function findItemToInsertAfter() {
   const target = getLastVisibleTypeDeChamp();
 
-  return {
-    target,
-    index: parseInt(target.dataset.index) + 1
-  };
+  if (target) {
+    return {
+      target,
+      index: parseInt(target.dataset.index) + 1
+    };
+  } else {
+    return null;
+  }
 }
 
 function getLastVisibleTypeDeChamp() {