diff --git a/front/src/common/components/Journey.module.scss b/front/src/Apps/Dashboard/Components/Journey/Journey.module.scss
similarity index 69%
rename from front/src/common/components/Journey.module.scss
rename to front/src/Apps/Dashboard/Components/Journey/Journey.module.scss
index c0ddea1cbe..f41ebd81c9 100644
--- a/front/src/common/components/Journey.module.scss
+++ b/front/src/Apps/Dashboard/Components/Journey/Journey.module.scss
@@ -24,10 +24,10 @@
     height: 100%;
     background: linear-gradient(
       180deg,
-      #ebeff3 0%,
-      #ebeff3 50%,
-      #ebeff3 50%,
-      #ebeff3 100%
+      #dddddd 0%,
+      #dddddd 50%,
+      #dddddd 50%,
+      #dddddd 100%
     );
     transform: translate(-50%, 0);
   }
@@ -55,7 +55,7 @@
     width: 12px;
     height: 12px;
     border-radius: 50%;
-    background-color: #ebeff3;
+    background-color: #dddddd;
     transform: translate(-50%, -50%);
     border: 2px solid #fff;
   }
@@ -64,15 +64,15 @@
   &::before {
     background: linear-gradient(
       180deg,
-      #006be6 0%,
-      #006be6 50%,
-      #006be6 50%,
-      #006be6 100%
+      #000091 0%,
+      #000091 50%,
+      #000091 50%,
+      #000091 100%
     );
   }
 
   &::after {
-    background-color: #006be6;
+    background-color: #000091;
   }
 }
 
@@ -80,37 +80,39 @@
   &:not(:first-child):not(:last-child)::before {
     background: linear-gradient(
       180deg,
-      #006be6 0%,
-      #006be6 50%,
-      #ebeff3 50%,
-      #ebeff3 100%
+      #000091 0%,
+      #000091 50%,
+      #dddddd 50%,
+      #dddddd 100%
     );
   }
 
   &:last-child::before {
     background: linear-gradient(
       180deg,
-      #006be6 0%,
-      #006be6 50%,
-      #006be6 50%,
-      #006be6 100%
+      #000091 0%,
+      #000091 50%,
+      #000091 50%,
+      #000091 100%
     );
   }
 
   &::after {
-    background-color: #ebeff3;
-    border-color: #006be6;
+    background-color: #dddddd;
+    border-color: #000091;
   }
 
   @keyframes example {
     from {
-      border-color: #ebeff3;
+      border-color: #dddddd;
     }
     to {
-      border-color: #006be6;
+      border-color: #000091;
     }
   }
 }
 
 .JourneyStopName {
+  font-size: 0.875rem !important;
+  line-height: 1.5rem !important;
 }
diff --git a/front/src/common/components/Journey.tsx b/front/src/Apps/Dashboard/Components/Journey/Journey.tsx
similarity index 90%
rename from front/src/common/components/Journey.tsx
rename to front/src/Apps/Dashboard/Components/Journey/Journey.tsx
index 8d97f85c9f..2549a68b28 100644
--- a/front/src/common/components/Journey.tsx
+++ b/front/src/Apps/Dashboard/Components/Journey/Journey.tsx
@@ -35,7 +35,7 @@ interface JourneyStopNameProps {
 }
 
 export function JourneyStopName({ children }: JourneyStopNameProps) {
-  return <strong className={styles.JourneyStopName}>{children}</strong>;
+  return <p className={styles.JourneyStopName}>{children}</p>;
 }
 
 interface JourneyStopDescriptionProps {
@@ -45,5 +45,5 @@ interface JourneyStopDescriptionProps {
 export function JourneyStopDescription({
   children
 }: JourneyStopDescriptionProps) {
-  return <p>{children}</p>;
+  return <p className="fr-text--bold">{children}</p>;
 }
diff --git a/front/src/dashboard/components/BSDList/BSVhu/WorkflowAction/BsvhuJourneySummary.tsx b/front/src/Apps/Dashboard/Validation/Bsvhu/BsvhuJourneySummary.tsx
similarity index 94%
rename from front/src/dashboard/components/BSDList/BSVhu/WorkflowAction/BsvhuJourneySummary.tsx
rename to front/src/Apps/Dashboard/Validation/Bsvhu/BsvhuJourneySummary.tsx
index c5eaae79e6..a8df232946 100644
--- a/front/src/dashboard/components/BSDList/BSVhu/WorkflowAction/BsvhuJourneySummary.tsx
+++ b/front/src/Apps/Dashboard/Validation/Bsvhu/BsvhuJourneySummary.tsx
@@ -5,7 +5,7 @@ import {
   JourneyStop,
   JourneyStopName,
   JourneyStopDescription
-} from "../../../../../common/components";
+} from "../../../../common/components";
 
 interface Props {
   bsvhu: Bsvhu;
@@ -17,7 +17,7 @@ export function BsvhuJourneySummary({ bsvhu }: Props) {
       <JourneyStop
         variant={bsvhu.emitter?.emission?.signature ? "complete" : "active"}
       >
-        <JourneyStopName>Émetteur</JourneyStopName>
+        <JourneyStopName>Producteur</JourneyStopName>
         <JourneyStopDescription>
           {bsvhu.emitter?.company?.name} ({bsvhu.emitter?.company?.siret})<br />
           {bsvhu.emitter?.company?.address}
diff --git a/front/src/Apps/Dashboard/Validation/Bsvhu/SignVhuEmission.tsx b/front/src/Apps/Dashboard/Validation/Bsvhu/SignVhuEmission.tsx
new file mode 100644
index 0000000000..ddee39f33e
--- /dev/null
+++ b/front/src/Apps/Dashboard/Validation/Bsvhu/SignVhuEmission.tsx
@@ -0,0 +1,180 @@
+import { useMutation, useQuery } from "@apollo/client";
+import Button from "@codegouvfr/react-dsfr/Button";
+import Input from "@codegouvfr/react-dsfr/Input";
+import { zodResolver } from "@hookform/resolvers/zod";
+import {
+  Mutation,
+  MutationSignBsvhuArgs,
+  Query,
+  QueryBsvhuArgs,
+  SignatureTypeInput
+} from "@td/codegen-ui";
+import { subMonths } from "date-fns";
+import React from "react";
+import { useForm } from "react-hook-form";
+import { generatePath, Link, useLocation, useParams } from "react-router-dom";
+import { z } from "zod";
+import { datetimeToYYYYMMDD } from "../../../../common/datetime";
+import { Loader } from "../../../common/Components";
+import { DsfrNotificationError } from "../../../common/Components/Error/Error";
+import TdModal from "../../../common/Components/Modal/Modal";
+import {
+  GET_VHU_FORM,
+  SIGN_BSVHU
+} from "../../../common/queries/bsvhu/queries";
+import routes from "../../../routes";
+import { BsvhuJourneySummary } from "./BsvhuJourneySummary";
+import WasteVhuSummary from "./WasteVhuSummary";
+
+const schema = z.object({
+  author: z
+    .string()
+    .min(3, "Le nom et prénom de l'auteur de la signature est requis"),
+  date: z.coerce
+    .date({
+      required_error: "La date d'émission est requise",
+      invalid_type_error: "Format de date invalide."
+    })
+    .transform(v => v?.toISOString())
+});
+export type ZodBsvhuEmission = z.infer<typeof schema>;
+
+const SignVhuEmission = ({ bsvhuId, onClose }) => {
+  const { siret } = useParams<{ siret: string }>();
+  const location = useLocation();
+
+  const { data } = useQuery<Pick<Query, "bsvhu">, QueryBsvhuArgs>(
+    GET_VHU_FORM,
+    {
+      variables: {
+        id: bsvhuId
+      }
+    }
+  );
+
+  const [signBsvhu, { loading, error }] = useMutation<
+    Pick<Mutation, "signBsvhu">,
+    MutationSignBsvhuArgs
+  >(SIGN_BSVHU);
+
+  const title = "Signer le bordereau";
+  const TODAY = new Date();
+
+  const initialState = {
+    date: datetimeToYYYYMMDD(TODAY),
+    author: ""
+  };
+
+  const { handleSubmit, reset, formState, register } =
+    useForm<ZodBsvhuEmission>({
+      values: initialState,
+      resolver: async (data, context, options) => {
+        return zodResolver(schema)(data, context, options);
+      }
+    });
+
+  if (data == null) {
+    return <Loader />;
+  }
+
+  const { bsvhu } = data;
+
+  const onCancel = () => {
+    reset();
+    onClose();
+  };
+
+  return (
+    <TdModal onClose={onClose} title={title} ariaLabel={title} isOpen size="L">
+      {bsvhu.metadata?.errors?.some(
+        error => error.requiredFor === SignatureTypeInput.Emission
+      ) ? (
+        <>
+          <p className="tw-mt-2 tw-text-red-700">
+            Vous devez mettre à jour le bordereau et renseigner les champs
+            obligatoires avant de le signer.
+          </p>
+          <ul className="tw-mb-2 tw-text-red-700 tw-list-disc">
+            {bsvhu.metadata?.errors.map((error, idx) => (
+              <li key={idx}>{error.message}</li>
+            ))}
+          </ul>
+          <Link
+            to={generatePath(routes.dashboard.bsvhus.edit, {
+              siret,
+              id: bsvhu.id
+            })}
+            className="btn btn--primary"
+            state={{ background: location }}
+          >
+            Mettre le bordereau à jour pour le signer
+          </Link>
+        </>
+      ) : (
+        <>
+          <WasteVhuSummary bsvhu={bsvhu} />
+          <BsvhuJourneySummary bsvhu={bsvhu} />
+
+          <p className="fr-text fr-mb-2w">
+            En qualité <strong>d'émetteur du déchet</strong>, j'atteste que les
+            informations ci-dessus sont correctes. En signant ce document,
+            j'autorise le transporteur à prendre en charge le déchet.
+          </p>
+
+          <form
+            onSubmit={handleSubmit(async data => {
+              await signBsvhu({
+                variables: {
+                  id: bsvhu.id,
+                  input: {
+                    ...data,
+                    type: SignatureTypeInput.Emission
+                  }
+                }
+              });
+              onClose();
+            })}
+          >
+            <div className="fr-col-4 fr-mb-2w">
+              <Input
+                label="Date de prise en charge"
+                nativeInputProps={{
+                  type: "date",
+                  min: datetimeToYYYYMMDD(subMonths(TODAY, 2)),
+                  max: datetimeToYYYYMMDD(TODAY),
+                  ...register("date")
+                }}
+                state={formState.errors.date ? "error" : "default"}
+                stateRelatedMessage={formState.errors.date?.message}
+              />
+            </div>
+            <div className="fr-col-8 fr-mb-2w">
+              <Input
+                label="Nom et prénom"
+                state={formState.errors.author ? "error" : "default"}
+                nativeInputProps={{
+                  ...register("author")
+                }}
+                stateRelatedMessage={formState.errors.author?.message}
+              />
+            </div>
+            <div className="fr-mb-8w">
+              {error && <DsfrNotificationError apolloError={error} />}
+            </div>
+
+            <div className="fr-modal__footer">
+              <div className="fr-btns-group fr-btns-group--right fr-btns-group--inline fr-btns-group--icon-left">
+                <Button type="button" priority="secondary" onClick={onCancel}>
+                  Annuler
+                </Button>
+                <Button disabled={loading}>Signer</Button>
+              </div>
+            </div>
+          </form>
+        </>
+      )}
+    </TdModal>
+  );
+};
+
+export default SignVhuEmission;
diff --git a/front/src/Apps/Dashboard/Validation/Bsvhu/WasteVhuSummary.tsx b/front/src/Apps/Dashboard/Validation/Bsvhu/WasteVhuSummary.tsx
new file mode 100644
index 0000000000..21ca34fcff
--- /dev/null
+++ b/front/src/Apps/Dashboard/Validation/Bsvhu/WasteVhuSummary.tsx
@@ -0,0 +1,50 @@
+import { Bsvhu, BsvhuPackaging } from "@td/codegen-ui";
+import * as React from "react";
+import {
+  DsfrDataList,
+  DsfrDataListDescription,
+  DsfrDataListItem,
+  DsfrDataListTerm
+} from "../../../../common/components";
+import { isDangerous } from "@td/constants";
+
+interface WasteVhuSummaryProps {
+  bsvhu: Bsvhu;
+}
+const WasteVhuSummary = ({ bsvhu }: WasteVhuSummaryProps) => {
+  const isDangerousWaste = isDangerous(bsvhu.wasteCode ?? "");
+  const usualName = isDangerousWaste ? "VHU pollué" : "VHU dépollué";
+  return (
+    <DsfrDataList>
+      <DsfrDataListItem>
+        <DsfrDataListTerm>BSVHU n°</DsfrDataListTerm>
+        <DsfrDataListDescription>{bsvhu.id}</DsfrDataListDescription>
+      </DsfrDataListItem>
+      <DsfrDataListItem>
+        <DsfrDataListTerm>Code déchet</DsfrDataListTerm>
+        <DsfrDataListDescription>{bsvhu.wasteCode}</DsfrDataListDescription>
+      </DsfrDataListItem>
+      <DsfrDataListItem>
+        <DsfrDataListTerm>Nom usuel du déchet</DsfrDataListTerm>
+        <DsfrDataListDescription>{usualName}</DsfrDataListDescription>
+      </DsfrDataListItem>
+      <DsfrDataListItem>
+        <DsfrDataListTerm>
+          {bsvhu.packaging === BsvhuPackaging.Lot
+            ? "Nombre de lot(s)"
+            : "Nombre d'unité(s)"}
+        </DsfrDataListTerm>
+        <DsfrDataListDescription>{bsvhu.quantity}</DsfrDataListDescription>
+      </DsfrDataListItem>
+      <DsfrDataListItem>
+        <DsfrDataListTerm>
+          {bsvhu.weight?.isEstimate ? "Poids estimé" : "Poids réel"}
+        </DsfrDataListTerm>
+        <DsfrDataListDescription>
+          {`${bsvhu.weight?.value}t`}
+        </DsfrDataListDescription>
+      </DsfrDataListItem>
+    </DsfrDataList>
+  );
+};
+export default WasteVhuSummary;
diff --git a/front/src/Apps/Dashboard/Validation/workflow/Act/ActBsvhuValidation.tsx b/front/src/Apps/Dashboard/Validation/workflow/Act/ActBsvhuValidation.tsx
index 594406f523..82c5f3edff 100644
--- a/front/src/Apps/Dashboard/Validation/workflow/Act/ActBsvhuValidation.tsx
+++ b/front/src/Apps/Dashboard/Validation/workflow/Act/ActBsvhuValidation.tsx
@@ -1,6 +1,6 @@
 import React from "react";
 import { Bsvhu, BsvhuStatus } from "@td/codegen-ui";
-import { SignEmission } from "../../../../../dashboard/components/BSDList/BSVhu/WorkflowAction/SignEmission";
+import SignVhuEmission from "../../Bsvhu/SignVhuEmission";
 import { SignTransport } from "../../../../../dashboard/components/BSDList/BSVhu/WorkflowAction/SignTransport";
 import { SignOperation } from "../../../../../dashboard/components/BSDList/BSVhu/WorkflowAction/SignOperation";
 
@@ -23,13 +23,7 @@ const ActBsvhuValidation = ({
   };
 
   const renderInitialModal = () => {
-    return (
-      <SignEmission
-        bsvhuId={bsd.id}
-        siret={currentSiret}
-        {...actionButtonAdapterProps}
-      />
-    );
+    return <SignVhuEmission bsvhuId={bsd.id} onClose={onClose} />;
   };
 
   const renderSignedByProducerModal = () => {
diff --git a/front/src/common/components/index.ts b/front/src/common/components/index.ts
index b521efaadd..7e47e9c3a1 100644
--- a/front/src/common/components/index.ts
+++ b/front/src/common/components/index.ts
@@ -19,7 +19,7 @@ export * from "./Label";
 export * from "./Slideshow";
 export * from "./List";
 export * from "./Table";
-export * from "./Journey";
+export * from "../../Apps/Dashboard/Components/Journey/Journey";
 export * from "../../Apps/common/Components/Journey/DsfrJourney";
 export * from "./DataList";
 export * from "../../Apps/common/Components/DataList/DsfrDataList";
diff --git a/front/src/common/datetime.ts b/front/src/common/datetime.ts
index f8e54d7bef..57b90f2897 100644
--- a/front/src/common/datetime.ts
+++ b/front/src/common/datetime.ts
@@ -30,3 +30,7 @@ export function formatDateTime(date: Props): string {
     locale: fr
   });
 }
+
+// YYYY-MM-DD
+export const datetimeToYYYYMMDD = (dt: Date): string =>
+  format(new Date(dt), "yyyy-MM-dd");
diff --git a/front/src/dashboard/components/BSDList/BSVhu/WorkflowAction/BsvhuSummary.tsx b/front/src/dashboard/components/BSDList/BSVhu/WorkflowAction/BsvhuSummary.tsx
index b466d9ce7c..fa4db05eaa 100644
--- a/front/src/dashboard/components/BSDList/BSVhu/WorkflowAction/BsvhuSummary.tsx
+++ b/front/src/dashboard/components/BSDList/BSVhu/WorkflowAction/BsvhuSummary.tsx
@@ -1,7 +1,7 @@
 import * as React from "react";
 import { Bsvhu } from "@td/codegen-ui";
 import { BsvhuWasteSummary } from "./BsvhuWasteSummary";
-import { BsvhuJourneySummary } from "./BsvhuJourneySummary";
+import { BsvhuJourneySummary } from "../../../../../Apps/Dashboard/Validation/Bsvhu/BsvhuJourneySummary";
 
 interface Props {
   bsvhu: Bsvhu;
diff --git a/front/src/dashboard/components/BSDList/BSVhu/WorkflowAction/SignEmission.tsx b/front/src/dashboard/components/BSDList/BSVhu/WorkflowAction/SignEmission.tsx
deleted file mode 100644
index 05f9a6ddce..0000000000
--- a/front/src/dashboard/components/BSDList/BSVhu/WorkflowAction/SignEmission.tsx
+++ /dev/null
@@ -1,167 +0,0 @@
-import { useMutation } from "@apollo/client";
-import { RedErrorMessage } from "../../../../../common/components";
-import routes from "../../../../../Apps/routes";
-import { Field, Form, Formik } from "formik";
-import {
-  Mutation,
-  MutationSignBsvhuArgs,
-  SignatureTypeInput
-} from "@td/codegen-ui";
-import React from "react";
-import { generatePath, Link, useLocation } from "react-router-dom";
-import * as yup from "yup";
-import { SignBsvhu } from "./SignBsvhu";
-import { SIGN_BSVHU } from "../../../../../Apps/common/queries/bsvhu/queries";
-import DateInput from "../../../../../form/common/components/custom-inputs/DateInput";
-import { subMonths } from "date-fns";
-
-const validationSchema = yup.object({
-  date: yup.date().required("La date d'émission est requise"),
-  author: yup
-    .string()
-    .ensure()
-    .min(1, "Le nom et prénom de l'auteur de la signature est requis")
-});
-
-type Props = {
-  siret: string;
-  bsvhuId: string;
-  isModalOpenFromParent?: boolean;
-  onModalCloseFromParent?: () => void;
-  displayActionButton?: boolean;
-};
-export function SignEmission({
-  siret,
-  bsvhuId,
-  isModalOpenFromParent,
-  onModalCloseFromParent,
-  displayActionButton
-}: Props) {
-  const [signBsvhu, { loading }] = useMutation<
-    Pick<Mutation, "signBsvhu">,
-    MutationSignBsvhuArgs
-  >(SIGN_BSVHU);
-
-  const TODAY = new Date();
-  const location = useLocation();
-
-  return (
-    <SignBsvhu
-      title="Signer"
-      bsvhuId={bsvhuId}
-      isModalOpenFromParent={isModalOpenFromParent}
-      onModalCloseFromParent={onModalCloseFromParent}
-      displayActionButton={displayActionButton}
-    >
-      {({ bsvhu, onClose }) =>
-        bsvhu.metadata?.errors?.some(
-          error => error.requiredFor === SignatureTypeInput.Emission
-        ) ? (
-          <>
-            <p className="tw-mt-2 tw-text-red-700">
-              Vous devez mettre à jour le bordereau et renseigner les champs
-              obligatoires avant de le signer.
-            </p>
-            <ul className="tw-mb-2 tw-text-red-700 tw-list-disc">
-              {bsvhu.metadata?.errors.map((error, idx) => (
-                <li key={idx}>{error.message}</li>
-              ))}
-            </ul>
-            <Link
-              to={generatePath(routes.dashboard.bsvhus.edit, {
-                siret,
-                id: bsvhu.id
-              })}
-              className="btn btn--primary"
-              state={{ background: location }}
-            >
-              Mettre le bordereau à jour pour le signer
-            </Link>
-          </>
-        ) : (
-          <Formik
-            initialValues={{
-              author: "",
-              date: TODAY.toISOString()
-            }}
-            validationSchema={validationSchema}
-            onSubmit={async values => {
-              await signBsvhu({
-                variables: {
-                  id: bsvhu.id,
-                  input: {
-                    ...values,
-                    type: SignatureTypeInput.Emission
-                  }
-                }
-              });
-              onClose();
-            }}
-          >
-            {({ isSubmitting, handleReset }) => (
-              <Form>
-                <p>
-                  En qualité <strong>d'émetteur du déchet</strong>, j'atteste
-                  que les informations ci-dessus sont correctes. En signant ce
-                  document, j'autorise le transporteur à prendre en charge le
-                  déchet.
-                </p>
-
-                <div className="form__row">
-                  <label>
-                    Date d'émission
-                    <div className="td-date-wrapper">
-                      <Field
-                        name="date"
-                        component={DateInput}
-                        minDate={subMonths(TODAY, 2)}
-                        maxDate={TODAY}
-                        required
-                        className="td-input"
-                      />
-                    </div>
-                  </label>
-                  <RedErrorMessage name="date" />
-                </div>
-
-                <div className="form__row">
-                  <label>
-                    Nom du signataire
-                    <Field
-                      type="text"
-                      name="author"
-                      placeholder="NOM Prénom"
-                      className="td-input"
-                    />
-                  </label>
-                  <RedErrorMessage name="author" />
-                </div>
-
-                <div className="form__actions">
-                  <button
-                    type="button"
-                    className="btn btn--outline-primary"
-                    onClick={() => {
-                      handleReset();
-                      onClose();
-                    }}
-                  >
-                    Annuler
-                  </button>
-
-                  <button
-                    type="submit"
-                    className="btn btn--primary"
-                    disabled={isSubmitting}
-                  >
-                    {loading ? "Signature en cours..." : "Signer l'enlèvement"}
-                  </button>
-                </div>
-              </Form>
-            )}
-          </Formik>
-        )
-      }
-    </SignBsvhu>
-  );
-}