diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/Wizard.js b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/Wizard.js
index 14204da8f4..eae7892589 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/Wizard.js
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/Wizard.js
@@ -1,4 +1,4 @@
-import React, { useState } from "react";
+import React, { useState, useReducer } from "react";
 import PropTypes from "prop-types";
 import styled from "styled-components";
 import { Form } from "react-final-form";
@@ -9,14 +9,14 @@ import { StepItems } from "./StepItems";
 import { PrevNextBar } from "./PrevNextBar";
 
 function Wizard({
-  initialValues = {},
+  initialSteps,
   initialStepIndex = 0,
-  steps,
-  onSubmit,
-  onUpdate,
-  rules = null
+  initialValues = {},
+  Rules = null,
+  stepReducer
 }) {
   const [stepIndex, setStepIndex] = useState(initialStepIndex);
+  const [steps, dispatch] = useReducer(stepReducer, initialSteps);
 
   const prevStep = () => {
     setStepIndex(Math.max(0, stepIndex - 1));
@@ -36,12 +36,13 @@ function Wizard({
   const handlePageSubmit = (values, form) => {
     // This means the user clicked on a "restart a new simulation" button
     if (stepIndex === steps.length - 1) {
-      onSubmit(values);
       form.reset();
+      dispatch({
+        type: "reset"
+      });
       setStepIndex(0);
     } else {
       nextStep();
-      onUpdate && onUpdate(values);
     }
   };
   const stepItems = steps.map(({ name, label }) => ({
@@ -71,7 +72,9 @@ function Wizard({
           return (
             <>
               <form onSubmit={handleSubmit}>
-                {rules}
+                {Rules && (
+                  <Rules values={form.getState().values} dispatch={dispatch} />
+                )}
                 <StepItems activeIndex={stepIndex} items={stepItems} />
                 <StepWrapper narrow noPadding>
                   <Step form={form} />
@@ -92,10 +95,17 @@ function Wizard({
 }
 
 Wizard.propTypes = {
-  steps: PropTypes.array.isRequired,
-  initialValues: PropTypes.object,
+  stepReducer: PropTypes.func.isRequired,
+  initialSteps: PropTypes.arrayOf(
+    PropTypes.shape({
+      component: PropTypes.func.isRequired,
+      name: PropTypes.string.isRequired,
+      label: PropTypes.string.isRequired
+    })
+  ).isRequired,
   initialStepIndex: PropTypes.number,
-  onSubmit: PropTypes.func.isRequired
+  initialValues: PropTypes.object,
+  Rules: PropTypes.func
 };
 
 export { Wizard };
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/Wizard.test.js b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/Wizard.test.js
index 3a2540b258..02bd0b6aff 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/Wizard.test.js
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/Wizard.test.js
@@ -1,6 +1,7 @@
 import React from "react";
 import { render } from "react-testing-library";
 import { Wizard } from "../Wizard";
+import { stepReducer } from "../stepReducer";
 import { Field } from "react-final-form";
 
 const FirstStep = () => <p>Premiere Etape</p>;
@@ -11,13 +12,6 @@ const SecondStep = () => (
     Deuxieme Etape <button>Submit</button>
   </p>
 );
-const FormStep = () => <Field name="firstName" component="input" />;
-
-const FinalFormStep = {
-  label: "final form",
-  name: "final-form",
-  component: FormStep
-};
 const steps = [
   {
     name: "firstStep",
@@ -30,68 +24,76 @@ const steps = [
     component: SecondStep
   }
 ];
+
+const AdditionalStep = () => <Field name="firstName" component="input" />;
+const additionalStep = {
+  label: "Name",
+  name: "additional step",
+  component: AdditionalStep
+};
+
 describe("<Wizard />", () => {
   it("should render a step", () => {
-    const onSubmit = jest.fn();
-    const { container } = render(<Wizard steps={steps} onSubmit={onSubmit} />);
-    expect(container).toMatchSnapshot();
-  });
-  it("should call onSubmit once finish", () => {
-    const onSubmit = jest.fn();
-    const { getByText } = render(
-      <Wizard steps={steps} onSubmit={onSubmit} initialStepIndex={1} />
+    const { container } = render(
+      <Wizard stepReducer={stepReducer} initialSteps={steps} />
     );
-    const button = getByText(/submit/i);
-    button.click();
-    expect(onSubmit).toHaveBeenCalled();
+    expect(container).toMatchSnapshot();
   });
-  it("should call navigate to the second step when click on Suivant", () => {
-    const onSubmit = jest.fn();
-    const onUpdate = jest.fn();
+  it("should navigate to the second step when click on Suivant", () => {
     const { container, getByText } = render(
-      <Wizard steps={steps} onSubmit={onSubmit} onUpdate={onUpdate} />
+      <Wizard stepReducer={stepReducer} initialSteps={steps} />
     );
     const button = getByText(/suivant/i);
     button.click();
-    expect(onUpdate).toHaveBeenCalled();
     expect(container).toMatchSnapshot();
   });
   it("should call Step.validate when click on Suivant", () => {
-    const onSubmit = jest.fn();
-    const { getByText } = render(<Wizard steps={steps} onSubmit={onSubmit} />);
+    const { getByText } = render(
+      <Wizard stepReducer={stepReducer} initialSteps={steps} />
+    );
     const button = getByText(/suivant/i);
     button.click();
     expect(FirstStep.validate).toHaveBeenCalled();
   });
+  it("should handle initialStepIndex", () => {
+    const { container } = render(
+      <Wizard
+        stepReducer={stepReducer}
+        initialSteps={steps}
+        initialStepIndex={1}
+      />
+    );
+    expect(container).toMatchSnapshot();
+  });
   it("should call navigate the previous step when click on précédent", () => {
-    const onSubmit = jest.fn();
     const { container, getByText } = render(
-      <Wizard steps={steps} onSubmit={onSubmit} initialStepIndex={1} />
+      <Wizard
+        stepReducer={stepReducer}
+        initialSteps={steps}
+        initialStepIndex={1}
+      />
     );
     const button = getByText(/précédent/i);
     button.click();
     expect(container).toMatchSnapshot();
   });
   it("should handle initialValues", () => {
-    const onSubmit = jest.fn();
     const { container } = render(
       <Wizard
-        steps={[FinalFormStep]}
-        onSubmit={onSubmit}
+        stepReducer={stepReducer}
+        initialSteps={[...steps, additionalStep]}
         initialValues={{ firstName: "lionel" }}
       />
     );
     expect(container).toMatchSnapshot();
   });
   it("should inject rules component", () => {
-    const onSubmit = jest.fn();
     const Rule = () => <p>Rule</p>;
     const { container } = render(
       <Wizard
-        steps={[FinalFormStep]}
-        onSubmit={onSubmit}
-        initialValues={{ firstName: "lionel" }}
-        rules={[<Rule key="key" />]}
+        stepReducer={stepReducer}
+        initialSteps={steps}
+        Rules={() => <Rule key="key" />}
       />
     );
     expect(container).toMatchSnapshot();
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/__snapshots__/Wizard.test.js.snap b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/__snapshots__/Wizard.test.js.snap
index ec485ed562..28ee4d92e4 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/__snapshots__/Wizard.test.js.snap
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/__snapshots__/Wizard.test.js.snap
@@ -251,7 +251,7 @@ exports[`<Wizard /> should call navigate the previous step when click on précé
 </div>
 `;
 
-exports[`<Wizard /> should call navigate to the second step when click on Suivant 1`] = `
+exports[`<Wizard /> should handle initialStepIndex 1`] = `
 .c6 {
   max-width: 1200px;
   margin: 0 auto;
@@ -507,7 +507,7 @@ exports[`<Wizard /> should call navigate to the second step when click on Suivan
 `;
 
 exports[`<Wizard /> should handle initialValues 1`] = `
-.c4 {
+.c6 {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1.25rem;
@@ -515,11 +515,11 @@ exports[`<Wizard /> should handle initialValues 1`] = `
   max-width: 46.25rem;
 }
 
-.c4 > *:first-child {
+.c6 > *:first-child {
   margin-top: 0;
 }
 
-.c4 > *:last-child {
+.c6 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -556,6 +556,26 @@ exports[`<Wizard /> should handle initialValues 1`] = `
   line-height: 1;
 }
 
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 8.4375rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 0.25rem;
+  font-size: 0.875rem;
+  text-align: left;
+  color: #adb9c9;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-weight: 600;
+  line-height: 1;
+}
+
 .c2 {
   border-radius: 49%;
   -webkit-flex-shrink: 0;
@@ -581,7 +601,32 @@ exports[`<Wizard /> should handle initialValues 1`] = `
   background-color: #0053b3;
 }
 
-.c5 {
+.c4 {
+  border-radius: 49%;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: 1.6rem;
+  width: 1.6rem;
+  margin: 0.5rem 0.625rem;
+  margin-left: 0;
+  color: #fff;
+  background-color: #adb9c9;
+}
+
+.c7 {
   margin-bottom: 0.625rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -593,13 +638,73 @@ exports[`<Wizard /> should handle initialValues 1`] = `
   justify-content: space-between;
 }
 
-.c3 {
+.c8 {
+  padding: 0.625rem 1rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  text-align: center;
+  line-height: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  vertical-align: middle;
+  border-style: solid;
+  border-width: 1px 1px 2px 1px;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  -webkit-transition: background-color 250ms ease;
+  transition: background-color 250ms ease;
+  color: #fff;
+  background: #005994;
+  border-color: #005994;
+  border-bottom-color: #003a61;
+  margin-left: auto;
+}
+
+.c8:not([disabled]):hover,
+.c8:not([disabled]):focus {
+  background: #0068ae;
+  color: #fff;
+}
+
+.c8:not([disabled]):active {
+  color: #fff;
+  background: #0078c7;
+  border-width: 2px 1px 1px 1px;
+  border-color: #005994;
+  outline: none;
+}
+
+.c8[aria-pressed="true"] {
+  color: #fff;
+  background: #0068ae;
+  border-width: 2px 1px 1px 1px;
+  border-color: #005994;
+  border-top-color: #003a61;
+  box-shadow: inset 0 1px 2px 0 #003a61;
+}
+
+.c8[aria-pressed="true"]:not([disabled]):hover,
+.c8[aria-pressed="true"]:not([disabled]):focus {
+  background-color: #005994;
+}
+
+.c8[aria-pressed="true"]:not([disabled]):active {
+  border-top-color: #003a61;
+}
+
+.c8[disabled] {
+  cursor: not-allowed;
+  color: rgba(255,255,255,0.4);
+}
+
+.c5 {
   margin-top: 2rem;
   margin-bottom: 2rem;
 }
 
 @media print {
-  .c4 {
+  .c6 {
     max-width: 100%;
     padding: 0;
   }
@@ -618,26 +723,52 @@ exports[`<Wizard /> should handle initialValues 1`] = `
         >
           1
         </span>
-        final form
+        First Step
+      </span>
+      <span
+        class="c3"
+      >
+        <span
+          class="c4"
+        >
+          2
+        </span>
+        Second Step
+      </span>
+      <span
+        class="c3"
+      >
+        <span
+          class="c4"
+        >
+          3
+        </span>
+        Name
       </span>
     </div>
     <div
-      class="c3 c4"
+      class="c5 c6"
     >
-      <input
-        name="firstName"
-        value="lionel"
-      />
+      <p>
+        Premiere Etape
+      </p>
     </div>
     <div
-      class="c5"
-    />
+      class="c7"
+    >
+      <button
+        aria-pressed="false"
+        class="c8"
+      >
+        Suivant
+      </button>
+    </div>
   </form>
 </div>
 `;
 
 exports[`<Wizard /> should inject rules component 1`] = `
-.c4 {
+.c6 {
   max-width: 1200px;
   margin: 0 auto;
   padding: 0 1.25rem;
@@ -645,11 +776,11 @@ exports[`<Wizard /> should inject rules component 1`] = `
   max-width: 46.25rem;
 }
 
-.c4 > *:first-child {
+.c6 > *:first-child {
   margin-top: 0;
 }
 
-.c4 > *:last-child {
+.c6 > *:last-child {
   margin-bottom: 0;
 }
 
@@ -686,6 +817,26 @@ exports[`<Wizard /> should inject rules component 1`] = `
   line-height: 1;
 }
 
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 8.4375rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 0.25rem;
+  font-size: 0.875rem;
+  text-align: left;
+  color: #adb9c9;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-weight: 600;
+  line-height: 1;
+}
+
 .c2 {
   border-radius: 49%;
   -webkit-flex-shrink: 0;
@@ -711,7 +862,32 @@ exports[`<Wizard /> should inject rules component 1`] = `
   background-color: #0053b3;
 }
 
-.c5 {
+.c4 {
+  border-radius: 49%;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: 1.6rem;
+  width: 1.6rem;
+  margin: 0.5rem 0.625rem;
+  margin-left: 0;
+  color: #fff;
+  background-color: #adb9c9;
+}
+
+.c7 {
   margin-bottom: 0.625rem;
   display: -webkit-box;
   display: -webkit-flex;
@@ -723,48 +899,379 @@ exports[`<Wizard /> should inject rules component 1`] = `
   justify-content: space-between;
 }
 
-.c3 {
-  margin-top: 2rem;
-  margin-bottom: 2rem;
+.c8 {
+  padding: 0.625rem 1rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  text-align: center;
+  line-height: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  vertical-align: middle;
+  border-style: solid;
+  border-width: 1px 1px 2px 1px;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  -webkit-transition: background-color 250ms ease;
+  transition: background-color 250ms ease;
+  color: #fff;
+  background: #005994;
+  border-color: #005994;
+  border-bottom-color: #003a61;
+  margin-left: auto;
 }
 
-@media print {
-  .c4 {
-    max-width: 100%;
-    padding: 0;
-  }
+.c8:not([disabled]):hover,
+.c8:not([disabled]):focus {
+  background: #0068ae;
+  color: #fff;
 }
 
-<div>
-  <form>
-    <p>
-      Rule
-    </p>
-    <div
-      class="c0"
-    >
-      <span
-        class="c1"
-      >
-        <span
-          class="c2"
-        >
-          1
-        </span>
-        final form
-      </span>
-    </div>
-    <div
-      class="c3 c4"
-    >
-      <input
-        name="firstName"
-        value="lionel"
-      />
-    </div>
-    <div
-      class="c5"
-    />
+.c8:not([disabled]):active {
+  color: #fff;
+  background: #0078c7;
+  border-width: 2px 1px 1px 1px;
+  border-color: #005994;
+  outline: none;
+}
+
+.c8[aria-pressed="true"] {
+  color: #fff;
+  background: #0068ae;
+  border-width: 2px 1px 1px 1px;
+  border-color: #005994;
+  border-top-color: #003a61;
+  box-shadow: inset 0 1px 2px 0 #003a61;
+}
+
+.c8[aria-pressed="true"]:not([disabled]):hover,
+.c8[aria-pressed="true"]:not([disabled]):focus {
+  background-color: #005994;
+}
+
+.c8[aria-pressed="true"]:not([disabled]):active {
+  border-top-color: #003a61;
+}
+
+.c8[disabled] {
+  cursor: not-allowed;
+  color: rgba(255,255,255,0.4);
+}
+
+.c5 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+@media print {
+  .c6 {
+    max-width: 100%;
+    padding: 0;
+  }
+}
+
+<div>
+  <form>
+    <p>
+      Rule
+    </p>
+    <div
+      class="c0"
+    >
+      <span
+        class="c1"
+      >
+        <span
+          class="c2"
+        >
+          1
+        </span>
+        First Step
+      </span>
+      <span
+        class="c3"
+      >
+        <span
+          class="c4"
+        >
+          2
+        </span>
+        Second Step
+      </span>
+    </div>
+    <div
+      class="c5 c6"
+    >
+      <p>
+        Premiere Etape
+      </p>
+    </div>
+    <div
+      class="c7"
+    >
+      <button
+        aria-pressed="false"
+        class="c8"
+      >
+        Suivant
+      </button>
+    </div>
+  </form>
+</div>
+`;
+
+exports[`<Wizard /> should navigate to the second step when click on Suivant 1`] = `
+.c6 {
+  max-width: 1200px;
+  margin: 0 auto;
+  padding: 0 1.25rem;
+  padding: 0;
+  max-width: 46.25rem;
+}
+
+.c6 > *:first-child {
+  margin-top: 0;
+}
+
+.c6 > *:last-child {
+  margin-bottom: 0;
+}
+
+.c0 {
+  border-bottom: 1px solid #adb9c9;
+  margin-top: 1.25rem;
+  padding-bottom: 1.25rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-flex-wrap: wrap;
+  -ms-flex-wrap: wrap;
+  flex-wrap: wrap;
+}
+
+.c3 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 8.4375rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 0.25rem;
+  font-size: 0.875rem;
+  text-align: left;
+  color: #0053b3;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.c1 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  width: 8.4375rem;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  padding: 0 0.25rem;
+  font-size: 0.875rem;
+  text-align: left;
+  color: #adb9c9;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  font-weight: 600;
+  line-height: 1;
+}
+
+.c4 {
+  border-radius: 49%;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: 1.6rem;
+  width: 1.6rem;
+  margin: 0.5rem 0.625rem;
+  margin-left: 0;
+  color: #fff;
+  background-color: #0053b3;
+}
+
+.c2 {
+  border-radius: 49%;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  height: 1.6rem;
+  width: 1.6rem;
+  margin: 0.5rem 0.625rem;
+  margin-left: 0;
+  color: #fff;
+  background-color: #adb9c9;
+}
+
+.c7 {
+  margin-bottom: 0.625rem;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-pack: justify;
+  -webkit-justify-content: space-between;
+  -ms-flex-pack: justify;
+  justify-content: space-between;
+}
+
+.c8 {
+  padding: 0.625rem 1rem;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  text-align: center;
+  line-height: inherit;
+  font-size: 1rem;
+  font-weight: 600;
+  vertical-align: middle;
+  border-style: solid;
+  border-width: 1px 1px 2px 1px;
+  border-radius: 0.25rem;
+  cursor: pointer;
+  -webkit-transition: background-color 250ms ease;
+  transition: background-color 250ms ease;
+  color: #0c0c0e;
+  background: #eaeaea;
+  border-color: #eaeaea;
+  border-bottom-color: #d1d1d1;
+  margin-right: auto;
+}
+
+.c8:not([disabled]):hover,
+.c8:not([disabled]):focus {
+  background: #f7f7f7;
+  color: #18181c;
+}
+
+.c8:not([disabled]):active {
+  color: #242429;
+  background: #fff;
+  border-width: 2px 1px 1px 1px;
+  border-color: #eaeaea;
+  outline: none;
+}
+
+.c8[aria-pressed="true"] {
+  color: #18181c;
+  background: #f7f7f7;
+  border-width: 2px 1px 1px 1px;
+  border-color: #eaeaea;
+  border-top-color: #d1d1d1;
+  box-shadow: inset 0 1px 2px 0 #d1d1d1;
+}
+
+.c8[aria-pressed="true"]:not([disabled]):hover,
+.c8[aria-pressed="true"]:not([disabled]):focus {
+  background-color: #eaeaea;
+}
+
+.c8[aria-pressed="true"]:not([disabled]):active {
+  border-top-color: #d1d1d1;
+}
+
+.c8[disabled] {
+  cursor: not-allowed;
+  color: rgba(12,12,14,0.4);
+}
+
+.c5 {
+  margin-top: 2rem;
+  margin-bottom: 2rem;
+}
+
+@media print {
+  .c6 {
+    max-width: 100%;
+    padding: 0;
+  }
+}
+
+<div>
+  <form>
+    <div
+      class="c0"
+    >
+      <span
+        class="c1"
+      >
+        <span
+          class="c2"
+        >
+          1
+        </span>
+        First Step
+      </span>
+      <span
+        class="c3"
+      >
+        <span
+          class="c4"
+        >
+          2
+        </span>
+        Second Step
+      </span>
+    </div>
+    <div
+      class="c5 c6"
+    >
+      <p>
+        Deuxieme Etape 
+        <button>
+          Submit
+        </button>
+      </p>
+    </div>
+    <div
+      class="c7"
+    >
+      <button
+        aria-pressed="false"
+        class="c8"
+        type="button"
+      >
+        Précédent
+      </button>
+    </div>
   </form>
 </div>
 `;
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/reducer.test.js b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/stepReducer.test.js
similarity index 77%
rename from packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/reducer.test.js
rename to packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/stepReducer.test.js
index 5a95d7cf55..48f7bcee34 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/reducer.test.js
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/__tests__/stepReducer.test.js
@@ -1,8 +1,8 @@
-import { StepReducer, getInitialSteps } from "../reducer";
+import { stepReducer, initialSteps } from "../stepReducer";
 
 describe("getInitialSteps()", () => {
   it("should return default steps", () => {
-    expect(getInitialSteps()).toMatchInlineSnapshot(`
+    expect(initialSteps).toMatchInlineSnapshot(`
 Array [
   Object {
     "component": [Function],
@@ -36,36 +36,35 @@ Array [
 
 describe("reducer", () => {
   it("should handle reset action", () => {
-    const items = [{ label: "test" }];
-    expect(StepReducer([], { type: "reset", payload: items })).toEqual(items);
+    expect(stepReducer([], { type: "reset" })).toEqual(initialSteps);
   });
   it("should handle add_primes after salaires", () => {
     const initialSteps = [{ name: "salaires" }];
-    const newState = StepReducer(initialSteps, { type: "add_primes" });
+    const newState = stepReducer(initialSteps, { type: "add_primes" });
 
     expect(newState.findIndex(step => step.name === "primes")).toEqual(1);
   });
   it("should handle add_primes after salaires", () => {
     const initialSteps = [];
-    const newState = StepReducer(initialSteps, { type: "add_primes" });
+    const newState = stepReducer(initialSteps, { type: "add_primes" });
 
     expect(newState.findIndex(step => step.name === "primes")).toEqual(0);
   });
   it("should handle remove_primes", () => {
     const initialSteps = [];
-    const newState = StepReducer(initialSteps, { type: "remove_primes" });
+    const newState = stepReducer(initialSteps, { type: "remove_primes" });
 
     expect(newState.findIndex(step => step.name === "primes")).toEqual(-1);
   });
   it("should not fail when handle remove_primes", () => {
     const initialSteps = [];
-    const newState = StepReducer(initialSteps, { type: "remove_primes" });
+    const newState = stepReducer(initialSteps, { type: "remove_primes" });
 
     expect(newState.findIndex(step => step.name === "primes")).toEqual(-1);
   });
   it("should handle add_branche", () => {
     const initialSteps = [];
-    const newState = StepReducer(initialSteps, {
+    const newState = stepReducer(initialSteps, {
       type: "add_branche",
       payload: [{ name: "branche_1" }, { name: "branche_2" }]
     });
@@ -76,7 +75,7 @@ describe("reducer", () => {
   });
   it("should not fail to remove_branche when steps are empty", () => {
     const initialSteps = [];
-    const newState = StepReducer(initialSteps, {
+    const newState = stepReducer(initialSteps, {
       type: "remove_branche"
     });
 
@@ -88,7 +87,7 @@ describe("reducer", () => {
       { name: "branche_1" },
       { name: "branche_2" }
     ];
-    const newState = StepReducer(initialSteps, {
+    const newState = stepReducer(initialSteps, {
       type: "remove_branche"
     });
 
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.js b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.js
index a6914c84df..6fd1f55800 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.js
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/index.js
@@ -1,49 +1,39 @@
-import React, { useReducer, useState } from "react";
+import React from "react";
 import PropTypes from "prop-types";
 import { OnChange } from "react-final-form-listeners";
 import { Section, Container, Wrapper } from "@cdt/ui";
 
-import { StepReducer, getInitialSteps } from "./reducer";
+import { stepReducer, initialSteps } from "./stepReducer";
 import { Wizard } from "./Wizard";
 
 function CalculateurIndemnite() {
-  const initialSteps = getInitialSteps();
-  const [steps, dispatch] = useReducer(StepReducer, initialSteps);
-  const [values, setValues] = useState({});
   /**
-   * The rules defined here allows to manage additionnal steps to the form
+   * The rules defined here allows to manage additionnal steps to the wizard
    */
-  const rules = [
-    <OnChange key="rule-same-salaire" name="hasSameSalaire">
-      {value =>
-        value === false
-          ? dispatch({ type: "add_primes" })
-          : dispatch({ type: "remove_primes" })
-      }
-    </OnChange>,
-    <OnChange key="rule-branche" name="branche">
-      {async value => {
-        if (value) {
-          const module = await import(`./ccn/${value}`);
-          const steps = module.steps.filter(({ condition = () => true }) =>
-            condition(values)
-          );
-          dispatch({ type: "add_branche", payload: steps });
-        } else {
-          dispatch({ type: "remove_branche" });
+  const Rules = ({ values, dispatch }) => (
+    <>
+      <OnChange key="rule-same-salaire" name="hasSameSalaire">
+        {value =>
+          value === false
+            ? dispatch({ type: "add_primes" })
+            : dispatch({ type: "remove_primes" })
         }
-      }}
-    </OnChange>
-  ];
-
-  // when at the end, the form is submitted
-  // we reset the form data
-  const onSubmit = () => {
-    dispatch({
-      type: "reset",
-      payload: getInitialSteps()
-    });
-  };
+      </OnChange>
+      <OnChange key="rule-branche" name="branche">
+        {async value => {
+          if (value) {
+            const module = await import(`./ccn/${value}`);
+            const steps = module.steps.filter(({ condition = () => true }) =>
+              condition(values)
+            );
+            dispatch({ type: "add_branche", payload: steps });
+          } else {
+            dispatch({ type: "remove_branche" });
+          }
+        }}
+      </OnChange>
+    </>
+  );
 
   return (
     <Section>
@@ -51,10 +41,11 @@ function CalculateurIndemnite() {
         <Wrapper size="large" variant="light">
           <h1>Calculateur d&apos;indemnités de licenciement</h1>
           <Wizard
-            steps={steps}
-            onSubmit={onSubmit}
-            onUpdate={setValues}
-            rules={rules}
+            stepReducer={stepReducer}
+            initialSteps={initialSteps}
+            initialValues={{}}
+            initialStepIndex={0}
+            Rules={Rules}
           />
         </Wrapper>
       </Container>
diff --git a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/reducer.js b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/stepReducer.js
similarity index 61%
rename from packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/reducer.js
rename to packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/stepReducer.js
index 5aa7fc8ea3..e449ee0a5a 100644
--- a/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/reducer.js
+++ b/packages/code-du-travail-frontend/src/outils/IndemniteLicenciement/stepReducer.js
@@ -5,41 +5,39 @@ import { StepAnciennete } from "./steps/Anciennete";
 import { StepSalaires } from "./steps/Salaires";
 import { StepPrimes } from "./steps/Primes";
 
-export function getInitialSteps() {
-  return [
-    {
-      component: StepIntro,
-      name: "introduction",
-      label: "Introduction"
-    },
-    {
-      component: StepInfo,
-      name: "infoGenerales",
-      label: "Informations générales"
-    },
-    {
-      component: StepAnciennete,
-      name: "anciennete",
-      label: "Ancienneté"
-    },
-    {
-      component: StepSalaires,
-      name: "salaires",
-      label: "Salaires"
-    },
-    {
-      component: StepIndemnite,
-      name: "indemniteLegale",
-      label: "Indemnité légale"
-    }
-  ];
-}
+export const initialSteps = [
+  {
+    component: StepIntro,
+    name: "introduction",
+    label: "Introduction"
+  },
+  {
+    component: StepInfo,
+    name: "infoGenerales",
+    label: "Informations générales"
+  },
+  {
+    component: StepAnciennete,
+    name: "anciennete",
+    label: "Ancienneté"
+  },
+  {
+    component: StepSalaires,
+    name: "salaires",
+    label: "Salaires"
+  },
+  {
+    component: StepIndemnite,
+    name: "indemniteLegale",
+    label: "Indemnité légale"
+  }
+];
 
-export function StepReducer(steps, action) {
+export function stepReducer(steps, action) {
   switch (action.type) {
-    case "reset":
-      return action.payload;
-
+    case "reset": {
+      return [...initialSteps];
+    }
     case "add_primes": {
       const salaireIndex = steps.findIndex(step => step.name === "salaires");
       const newSteps = steps.filter(step => step.name !== "primes");
@@ -63,6 +61,6 @@ export function StepReducer(steps, action) {
     }
     default:
       console.warn("action unknow", action);
+      return steps;
   }
-  return steps;
 }