diff --git a/.github/workflows/trivy.yml b/.github/workflows/trivy.yml
index 0b010253..cc3f5305 100644
--- a/.github/workflows/trivy.yml
+++ b/.github/workflows/trivy.yml
@@ -7,7 +7,7 @@ name: trivy
 
 on:
   push:
-    branches: ["CHANGEME"]
+    branches: [ "main" ]
   # pull_request:
   #   # The branches below must be a subset of the branches above
   #   branches: [ "main" ]
@@ -50,7 +50,7 @@ jobs:
         with:
           context: .
           builder: ${{ steps.buildx.outputs.name }}
-          file: infra/docker/app/Dockerfile
+          file: infra/docker/app/DockerfileCI
           push: true
           tags: |
             ghcr.io/mtes-mct/rapportnav2/rapportnav-app:${{ github.sha }}
diff --git a/.gitlab-ci.yml b/.gitlab-ci.yml
index 154a9bcd..00be0ff1 100644
--- a/.gitlab-ci.yml
+++ b/.gitlab-ci.yml
@@ -11,6 +11,9 @@ variables:
   PROJECT_NAME:
     value: rapportnav-v2
     description: "Nom du projet à déployer"
+  BDD_IAMGE:
+    value: postgres:15-bookworm
+    description: "Image de la base de données"
   PROJECT_VERSION:
     value: "0.0.1-alpha.10"
     description: "Version du projet à déployer"
diff --git a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/repositories/mission/infraction/IInfractionEnvTargetRepository.kt b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/repositories/mission/infraction/IInfractionEnvTargetRepository.kt
new file mode 100644
index 00000000..12d03df7
--- /dev/null
+++ b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/repositories/mission/infraction/IInfractionEnvTargetRepository.kt
@@ -0,0 +1,11 @@
+package fr.gouv.dgampa.rapportnav.domain.repositories.mission.infraction
+
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.infraction.InfractionEntity
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.infraction.InfractionEnvTargetEntity
+import fr.gouv.dgampa.rapportnav.infrastructure.database.model.mission.infraction.InfractionEnvTargetModel
+
+interface IInfractionEnvTargetRepository {
+    fun save(infractionTarget: InfractionEnvTargetEntity, infraction: InfractionEntity): InfractionEnvTargetModel
+
+    fun findByActionIdAndVesselIdentifier(actionId: String, vesselIdentifier: String): List<InfractionEnvTargetModel>
+}
diff --git a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/use_cases/mission/infraction/AddOrUpdateInfractionEnvTarget.kt b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/use_cases/mission/infraction/AddOrUpdateInfractionEnvTarget.kt
new file mode 100644
index 00000000..55322321
--- /dev/null
+++ b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/use_cases/mission/infraction/AddOrUpdateInfractionEnvTarget.kt
@@ -0,0 +1,16 @@
+package fr.gouv.dgampa.rapportnav.domain.use_cases.mission.infraction
+
+import fr.gouv.dgampa.rapportnav.config.UseCase
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.infraction.InfractionEntity
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.infraction.InfractionEnvTargetEntity
+import fr.gouv.dgampa.rapportnav.domain.repositories.mission.infraction.IInfractionEnvTargetRepository
+
+@UseCase
+class AddOrUpdateInfractionEnvTarget(
+    private val repo: IInfractionEnvTargetRepository,
+) {
+    fun execute(infractionTarget: InfractionEnvTargetEntity, infraction: InfractionEntity): InfractionEnvTargetEntity {
+        val savedData = repo.save(infractionTarget, infraction).toInfractionEnvTargetEntity()
+        return savedData
+    }
+}
diff --git a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/use_cases/mission/infraction/GetInfractionById.kt b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/use_cases/mission/infraction/GetInfractionById.kt
index 4af51b98..369f6e1e 100644
--- a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/use_cases/mission/infraction/GetInfractionById.kt
+++ b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/use_cases/mission/infraction/GetInfractionById.kt
@@ -8,7 +8,11 @@ import java.util.*
 @UseCase
 class GetInfractionById(private val repo: IInfractionRepository) {
     fun execute(id: UUID): InfractionEntity? {
-        val optionalInfractionModel = repo.findById(id)
-        return optionalInfractionModel.map { it.toInfractionEntity() }.orElse(null)
+        val infractionModel = repo.findById(id)
+        if (infractionModel.isPresent) {
+            return infractionModel.get().toInfractionEntity()
+        } else {
+            return null
+        }
     }
 }
diff --git a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/use_cases/mission/infraction/IsControlledAllowedForTarget.kt b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/use_cases/mission/infraction/IsControlledAllowedForTarget.kt
new file mode 100644
index 00000000..2e59ebe6
--- /dev/null
+++ b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/domain/use_cases/mission/infraction/IsControlledAllowedForTarget.kt
@@ -0,0 +1,20 @@
+package fr.gouv.dgampa.rapportnav.domain.use_cases.mission.infraction
+
+import fr.gouv.dgampa.rapportnav.config.UseCase
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.control.ControlType
+import fr.gouv.dgampa.rapportnav.domain.repositories.mission.infraction.IInfractionEnvTargetRepository
+
+@UseCase
+class IsControlledAllowedForTarget(
+    private val repo: IInfractionEnvTargetRepository,
+    private val getInfractionById: GetInfractionById,
+) {
+    fun execute(actionId: String, vesselIdentifier: String, controlType: ControlType): Boolean {
+        val targets = repo.findByActionIdAndVesselIdentifier(actionId = actionId, vesselIdentifier = vesselIdentifier)
+        val controlledAllowed = targets.map {
+            val infraction = it.infraction?.toInfractionEntity()
+            return controlType != infraction?.controlType
+        }
+        return controlledAllowed.all { true }
+    }
+}
diff --git a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/ActionEnvController.kt b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/ActionEnvController.kt
index e3b7b7a9..e9da99b7 100644
--- a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/ActionEnvController.kt
+++ b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/ActionEnvController.kt
@@ -86,14 +86,14 @@ class ActionEnvController(
         infractionsByVessel = infractionsByVessel.map { byVessel ->
             // a target reported by monitorEnv will have an infraction with controlType null
             // the next field is to help the frontend hide/show information according to whom has reported the target
-            val targetAddedInRapportNav = !byVessel.infractions.any { it.controlType == null }
+            val targetAddedByUnit = !byVessel.infractions.any { it.controlType == null }
 
             // the next field is to help the frontend show different options for which control type to report an infraction
             val reportedControlTypes = byVessel.infractions.mapNotNull { it.controlType }
 
             val updatedByVessel = byVessel.copy(
                 controlTypesWithInfraction = reportedControlTypes,
-                targetAddedInRapportNav = targetAddedInRapportNav
+                targetAddedByUnit = targetAddedByUnit
             )
             updatedByVessel
         }
diff --git a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/InfractionController.kt b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/InfractionController.kt
index dc0899ec..54ecc5d9 100644
--- a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/InfractionController.kt
+++ b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/InfractionController.kt
@@ -1,14 +1,15 @@
 package fr.gouv.dgampa.rapportnav.infrastructure.bff
 
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.env.envActions.VesselSizeEnum
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.env.envActions.VesselTypeEnum
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.control.ControlType
 import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.infraction.InfractionEnvTargetEntity
-import fr.gouv.dgampa.rapportnav.domain.use_cases.mission.infraction.AddOrUpdateInfraction
-import fr.gouv.dgampa.rapportnav.domain.use_cases.mission.infraction.DeleteInfraction
-import fr.gouv.dgampa.rapportnav.domain.use_cases.mission.infraction.GetInfractionById
-import fr.gouv.dgampa.rapportnav.domain.use_cases.mission.infraction.GetNatinfs
+import fr.gouv.dgampa.rapportnav.domain.use_cases.mission.infraction.*
 import fr.gouv.dgampa.rapportnav.infrastructure.bff.adapters.infraction.InfractionInput
 import fr.gouv.dgampa.rapportnav.infrastructure.bff.adapters.infraction.InfractionWithNewTargetInput
 import fr.gouv.dgampa.rapportnav.infrastructure.bff.model.infraction.Infraction
 import fr.gouv.dgampa.rapportnav.infrastructure.bff.model.infraction.Natinf
+import org.slf4j.LoggerFactory
 import org.springframework.graphql.data.method.annotation.Argument
 import org.springframework.graphql.data.method.annotation.MutationMapping
 import org.springframework.graphql.data.method.annotation.QueryMapping
@@ -22,8 +23,13 @@ class InfractionController(
     private val deleteInfraction: DeleteInfraction,
     private val getInfractionById: GetInfractionById,
     private val getNatinfs: GetNatinfs,
+    private val addOrUpdateInfractionEnvTarget: AddOrUpdateInfractionEnvTarget,
+    private val isControlledAllowedForTarget: IsControlledAllowedForTarget,
 ) {
 
+    private val logger = LoggerFactory.getLogger(InfractionController::class.java)
+
+
     @QueryMapping
     fun natinfs(): List<Natinf> {
         return getNatinfs.execute().map { Natinf.fromNatinfEntity(it) }
@@ -49,22 +55,57 @@ class InfractionController(
 
     @MutationMapping
     fun addOrUpdateInfractionForEnvTarget(@Argument infraction: InfractionWithNewTargetInput): Infraction? {
-        val target: InfractionEnvTargetEntity?
+        var target: InfractionEnvTargetEntity?
+
+
+        if (infraction.id == null) {
+            // check if there is not already an infraction with the same controlType for this target
+            val isAllowed = isControlledAllowedForTarget.execute(
+                actionId = infraction.actionId,
+                vesselIdentifier = infraction.vesselIdentifier,
+                controlType = ControlType.valueOf(infraction.controlType)
+            )
+            if (!isAllowed) {
+                logger.error("addOrUpdateInfractionForEnvTarget - controlType=${infraction.controlType} already exists for target name=${infraction.vesselIdentifier}")
+                throw Exception("Ce type de contrôle a déjà été reporté pour cette cible. Veuillez annuler et modifier le contrôle déjà existant.")
+            } else {
+                target = null
+            }
+        } else {
 
-        // get the infraction if it already exists and set its target
-        if (infraction.id != null) {
+            // get the infraction if it already exists and set its target
             val repoInfraction = getInfractionById.execute(id = UUID.fromString(infraction.id))
             target = repoInfraction?.target
-        } else {
-            target = null
-        }
 
-        // TODO must also verify that there is not already an infraction for this target and this controlType
+            // Check if target has changed or not by crossing fields between InfractionWithNewTargetInput and InfractionEnvTargetEntity
+            if (target != null && hasTargetChanged(infraction, target)) {
+                // Update the target
+                val newTarget = InfractionEnvTargetEntity(
+                    id = target.id,
+                    missionId = target.missionId,
+                    actionId = target.actionId,
+                    infractionId = target.infractionId,
+                    vesselIdentifier = infraction.vesselIdentifier,
+                    vesselSize = VesselSizeEnum.valueOf(infraction.vesselSize),
+                    vesselType = VesselTypeEnum.valueOf(infraction.vesselType),
+                    identityControlledPerson = infraction.identityControlledPerson
+                )
+                target = addOrUpdateInfractionEnvTarget.execute(newTarget, infraction.toInfractionEntity(newTarget))
+            }
+        }
 
         val input = infraction.toInfractionEntity(target)
         val infractionEntity = addOrUpdateInfraction.execute(input)
         return Infraction.fromInfractionEntity(infractionEntity)
     }
 
+    // Function to check if the target has changed
+    private fun hasTargetChanged(input: InfractionWithNewTargetInput, target: InfractionEnvTargetEntity): Boolean {
+        return input.vesselType != target.vesselType.name ||
+                input.vesselSize != target.vesselSize.name ||
+                input.vesselIdentifier != target.vesselIdentifier ||
+                input.identityControlledPerson != target.identityControlledPerson
+    }
+
 
 }
diff --git a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/model/infraction/InfractionsByVessel.kt b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/model/infraction/InfractionsByVessel.kt
index ec42d271..fa06d092 100644
--- a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/model/infraction/InfractionsByVessel.kt
+++ b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/bff/model/infraction/InfractionsByVessel.kt
@@ -8,7 +8,7 @@ data class InfractionsByVessel(
     val vesselIdentifier: String? = null,
     val vesselType: VesselTypeEnum? = null,
     val controlTypesWithInfraction: List<ControlType>? = null,
-    val targetAddedInRapportNav: Boolean? = null,
+    val targetAddedByUnit: Boolean? = null,
     val infractions: List<Infraction>
 ) {
     fun groupInfractionsByVesselIdentifier(infractions: List<Infraction>): List<InfractionsByVessel> {
@@ -20,7 +20,7 @@ data class InfractionsByVessel(
                     vesselType = infractions.firstOrNull()?.target?.vesselType,
                     infractions = infractions,
                     controlTypesWithInfraction = controlTypesWithInfraction,
-                    targetAddedInRapportNav = targetAddedInRapportNav,
+                    targetAddedByUnit = targetAddedByUnit,
                 )
             }
     }
diff --git a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/model/mission/infraction/InfractionEnvTargetModel.kt b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/model/mission/infraction/InfractionEnvTargetModel.kt
index f6406818..ef01a86a 100644
--- a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/model/mission/infraction/InfractionEnvTargetModel.kt
+++ b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/model/mission/infraction/InfractionEnvTargetModel.kt
@@ -3,6 +3,7 @@ package fr.gouv.dgampa.rapportnav.infrastructure.database.model.mission.infracti
 import com.fasterxml.jackson.annotation.JsonIgnore
 import fr.gouv.dgampa.rapportnav.domain.entities.mission.env.envActions.VesselSizeEnum
 import fr.gouv.dgampa.rapportnav.domain.entities.mission.env.envActions.VesselTypeEnum
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.infraction.InfractionEntity
 import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.infraction.InfractionEnvTargetEntity
 import jakarta.persistence.*
 import java.util.*
@@ -53,14 +54,19 @@ data class InfractionEnvTargetModel(
     }
 
     companion object {
-        fun fromInfractionEnvTargetEntity(infraction: InfractionEnvTargetEntity) = InfractionEnvTargetModel(
-            id = infraction.id,
-            missionId = infraction.missionId,
-            actionId = infraction.actionId,
-            vesselIdentifier = infraction.vesselIdentifier,
-            identityControlledPerson = infraction.identityControlledPerson,
-            vesselType = infraction.vesselType.toString(),
-            vesselSize = infraction.vesselSize.toString(),
-        )
+        fun fromInfractionEnvTargetEntity(
+            infractionTarget: InfractionEnvTargetEntity,
+            infraction: InfractionEntity? = null
+        ) =
+            InfractionEnvTargetModel(
+                id = infractionTarget.id,
+                missionId = infractionTarget.missionId,
+                actionId = infractionTarget.actionId,
+                infraction = infraction?.let { it -> InfractionModel.fromInfractionEntity(it) },
+                vesselIdentifier = infractionTarget.vesselIdentifier,
+                identityControlledPerson = infractionTarget.identityControlledPerson,
+                vesselType = infractionTarget.vesselType.toString(),
+                vesselSize = infractionTarget.vesselSize.toString(),
+            )
     }
 }
diff --git a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/model/mission/infraction/InfractionModel.kt b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/model/mission/infraction/InfractionModel.kt
index d5686bc0..afb38af8 100644
--- a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/model/mission/infraction/InfractionModel.kt
+++ b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/model/mission/infraction/InfractionModel.kt
@@ -69,21 +69,20 @@ class InfractionModel(
     }
 
     companion object {
-        fun fromInfractionEntity(infraction: InfractionEntity) = InfractionModel(
-            id = infraction.id,
-            missionId = infraction.missionId,
-            actionId = infraction.actionId,
-            controlType = infraction.controlType.toString(),
-            infractionType = infraction.infractionType?.toString(),
-            natinfs = infraction.natinfs,
-            observations = infraction.observations,
-            target = infraction.target?.let {
-                listOf(
-                    InfractionEnvTargetModel.fromInfractionEnvTargetEntity(
-                        infraction.target!!
-                    )
-                )
-            }
-        )
+        fun fromInfractionEntity(infraction: InfractionEntity): InfractionModel {
+            return InfractionModel(
+                id = infraction.id,
+                missionId = infraction.missionId,
+                actionId = infraction.actionId,
+                controlType = infraction.controlType.toString(),
+                infractionType = infraction.infractionType?.toString(),
+                natinfs = infraction.natinfs,
+                observations = infraction.observations,
+                target = infraction.target?.let {
+                    listOf(InfractionEnvTargetModel.fromInfractionEnvTargetEntity(it))
+                } ?: emptyList()  // Provide an empty list if target is null
+            )
+        }
+
     }
 }
diff --git a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/repositories/interfaces/mission/infraction/IDBInfractionEnvTargetRepository.kt b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/repositories/interfaces/mission/infraction/IDBInfractionEnvTargetRepository.kt
new file mode 100644
index 00000000..e91c4245
--- /dev/null
+++ b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/repositories/interfaces/mission/infraction/IDBInfractionEnvTargetRepository.kt
@@ -0,0 +1,9 @@
+package fr.gouv.dgampa.rapportnav.infrastructure.database.repositories.interfaces.mission.infraction
+
+import fr.gouv.dgampa.rapportnav.infrastructure.database.model.mission.infraction.InfractionEnvTargetModel
+import org.springframework.data.jpa.repository.JpaRepository
+import java.util.*
+
+interface IDBInfractionEnvTargetRepository : JpaRepository<InfractionEnvTargetModel, UUID> {
+    fun findByActionIdAndVesselIdentifier(actionId: String, vesselIdentifier: String): List<InfractionEnvTargetModel>
+}
diff --git a/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/repositories/mission/infraction/JPAInfractionEnvTargetRepository.kt b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/repositories/mission/infraction/JPAInfractionEnvTargetRepository.kt
new file mode 100644
index 00000000..0fa9d53a
--- /dev/null
+++ b/backend/src/main/kotlin/fr/gouv/dgampa/rapportnav/infrastructure/database/repositories/mission/infraction/JPAInfractionEnvTargetRepository.kt
@@ -0,0 +1,44 @@
+package fr.gouv.dgampa.rapportnav.infrastructure.database.repositories.mission.infraction
+
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.infraction.InfractionEntity
+import fr.gouv.dgampa.rapportnav.domain.entities.mission.nav.infraction.InfractionEnvTargetEntity
+import fr.gouv.dgampa.rapportnav.domain.repositories.mission.infraction.IInfractionEnvTargetRepository
+import fr.gouv.dgampa.rapportnav.infrastructure.database.model.mission.infraction.InfractionEnvTargetModel
+import fr.gouv.dgampa.rapportnav.infrastructure.database.repositories.interfaces.mission.infraction.IDBInfractionEnvTargetRepository
+import org.springframework.dao.InvalidDataAccessApiUsageException
+import org.springframework.stereotype.Repository
+import org.springframework.transaction.annotation.Transactional
+
+
+@Repository
+class JPAInfractionEnvTargetRepository(
+    private val dbRepo: IDBInfractionEnvTargetRepository,
+) : IInfractionEnvTargetRepository {
+
+    @Transactional
+    override fun save(
+        infractionTarget: InfractionEnvTargetEntity,
+        infraction: InfractionEntity
+    ): InfractionEnvTargetModel {
+        return try {
+            val model = InfractionEnvTargetModel.fromInfractionEnvTargetEntity(infractionTarget, infraction)
+            dbRepo.save(model)
+        } catch (e: InvalidDataAccessApiUsageException) {
+            throw Exception("Error saving or updating Infraction Env Target", e)
+        }
+    }
+
+    override fun findByActionIdAndVesselIdentifier(
+        actionId: String,
+        vesselIdentifier: String
+    ): List<InfractionEnvTargetModel> {
+        return try {
+            val models = dbRepo.findByActionIdAndVesselIdentifier(actionId, vesselIdentifier)
+            models
+        } catch (e: InvalidDataAccessApiUsageException) {
+            throw Exception("Error findByActionIdAndVesselIdentifier Infraction Env Target", e)
+        }
+    }
+
+
+}
diff --git a/backend/src/main/resources/graphql/infraction.graphqls b/backend/src/main/resources/graphql/infraction.graphqls
index 152ef611..840bcc42 100644
--- a/backend/src/main/resources/graphql/infraction.graphqls
+++ b/backend/src/main/resources/graphql/infraction.graphqls
@@ -37,7 +37,7 @@ type InfractionByTarget {
   vesselIdentifier: String
   vesselType: VesselType
   controlTypesWithInfraction: [ControlType]
-  targetAddedInRapportNav: Boolean
+  targetAddedByUnit: Boolean
   infractions: [Infraction]
 }
 
diff --git a/ci/jobs/analyse_trivy.yml b/ci/jobs/analyse_trivy.yml
index 7fbbffc1..242f0d42 100644
--- a/ci/jobs/analyse_trivy.yml
+++ b/ci/jobs/analyse_trivy.yml
@@ -12,6 +12,7 @@ analyse_trivy:
     TRIVY_NON_SSL: "true"
     TRIVY_SERVER: "http://trivy.dsi.damgm.i2"
     FULL_IMAGE_NAME: $TAG_LATEST
+    BDD_IMAGE_NAME: $NEXUS_DOCKER_PROXY/$BDD_IAMGE
     HTTP_PROXY: "http://172.27.229.197:8090"
     HTTPS_PROXY: "http://172.27.229.197:8090"
     NO_PROXY: "gitlab-sml.din.developpement-durable.gouv.fr,int-docker01,localhost,127.0.0.1,0.0.0.0,.dsi.damgm.i2"
@@ -22,10 +23,20 @@ analyse_trivy:
     - |
       if [[ "$FAIL_TRIVY_CONDITION" != "" && "$KEEP_RUNNING" != "true" ]]; then
         # Fail on critical vulnerabilities
-        time trivy image -d --server $TRIVY_SERVER --exit-code 1 --cache-dir .trivycache/ $FAIL_TRIVY_CONDITION --no-progress --format template --template "@/contrib/html.tpl" --output "container-scanning-report.html" "$FULL_IMAGE_NAME"
+        time trivy image -d --server $TRIVY_SERVER --exit-code 1 --cache-dir .trivycache/ $FAIL_TRIVY_CONDITION --no-progress --format template --template "@/contrib/html.tpl" --output "container-scanning-report-app.html" "$FULL_IMAGE_NAME"
       else
         # Builds report and puts it in the default workdir $CI_PROJECT_DIR, so `artifacts:` can take it from there
-        time trivy image -d --server $TRIVY_SERVER --exit-code 0 --cache-dir .trivycache/ --no-progress --format template --template "@/contrib/html.tpl" --output "container-scanning-report.html" "$FULL_IMAGE_NAME"
+        time trivy image -d --server $TRIVY_SERVER --exit-code 0 --cache-dir .trivycache/ --no-progress --format template --template "@/contrib/html.tpl" --output "container-scanning-report-app.html" "$FULL_IMAGE_NAME"
+      fi
+
+    - time trivy image -d --server $TRIVY_SERVER $BDD_IMAGE_NAME --clear-cache --timeout 120m --cache-dir .trivycache/
+    - |
+      if [[ "$FAIL_TRIVY_CONDITION" != "" && "$KEEP_RUNNING" != "true" ]]; then
+        # Fail on critical vulnerabilities
+        time trivy image -d --server $TRIVY_SERVER --exit-code 1 --cache-dir .trivycache/ $FAIL_TRIVY_CONDITION --no-progress --format template --template "@/contrib/html.tpl" --output "container-scanning-report-bdd.html" "$BDD_IMAGE_NAME"
+      else
+        # Builds report and puts it in the default workdir $CI_PROJECT_DIR, so `artifacts:` can take it from there
+        time trivy image -d --server $TRIVY_SERVER --exit-code 0 --cache-dir .trivycache/ --no-progress --format template --template "@/contrib/html.tpl" --output "container-scanning-report-bdd.html" "$BDD_IMAGE_NAME"
       fi
   cache:
     paths:
@@ -33,7 +44,8 @@ analyse_trivy:
   artifacts:
     when: always
     paths:
-      - container-scanning-report.html
+      - container-scanning-report-app.html
+      - container-scanning-report-bdd.html
   tags:
     - analyze
 
diff --git a/ci/jobs/construction_image.yml b/ci/jobs/construction_image.yml
index 4d7fc1e3..ffd9506f 100644
--- a/ci/jobs/construction_image.yml
+++ b/ci/jobs/construction_image.yml
@@ -28,6 +28,9 @@ construction_image:
     - docker login $NEXUS_DOCKER_REPO -u $NEXUS_USER -p $NEXUS_PWD
     - docker image push --all-tags $NEXUS_DOCKER_REPO/$PROJECT_NAME
     - docker logout $NEXUS_DOCKER_REPO
+    - docker login $NEXUS_DOCKER_PROXY -u $NEXUS_USER -p $NEXUS_PWD
+    - docker pull $NEXUS_DOCKER_PROXY/$BDD_IAMGE
+    - docker logout $NEXUS_DOCKER_PROXY
   tags:
     - build
 
diff --git a/ci/roles/start_docker_containers/templates/docker-compose.yml.j2 b/ci/roles/start_docker_containers/templates/docker-compose.yml.j2
index 1ab40030..433fc66a 100644
--- a/ci/roles/start_docker_containers/templates/docker-compose.yml.j2
+++ b/ci/roles/start_docker_containers/templates/docker-compose.yml.j2
@@ -26,7 +26,7 @@ services:
         max-size: "1024m"
 
   db:
-    image: postgres:15-bookworm
+    image: {{ image_bdd }}
     volumes:
     #  - "${RAPPORTNAV_BACKUPS_FOLDER}:/opt/rapportnav_backups"
       - db:/var/lib/postgresql/data
diff --git a/ci/roles/start_docker_containers/vars/main.yml b/ci/roles/start_docker_containers/vars/main.yml
index 0d80fe8a..0b01c001 100644
--- a/ci/roles/start_docker_containers/vars/main.yml
+++ b/ci/roles/start_docker_containers/vars/main.yml
@@ -4,3 +4,4 @@ docker_image_path: "{{ lookup('env', 'TAG_VERSION') }}"
 docker_compose_path: "/opt/dockers/{{ project_name }}"
 project_ports: "{{ lookup('env', 'PROJECT_PORTS') }}"
 project_volumes: "{{ lookup('env', 'PROJECT_VOLUMES') }}"
+image_bdd: "{{ lookup('env', 'BDD_IAMGE') }}"
\ No newline at end of file
diff --git a/frontend/src/auth/test-server.ts b/frontend/src/auth/test-server.ts
index 8802fa1e..00abda01 100644
--- a/frontend/src/auth/test-server.ts
+++ b/frontend/src/auth/test-server.ts
@@ -5,17 +5,11 @@ import { LOGIN_ENDPOINT } from "./login.tsx";
 
 export const loginSuccessHandler = [
   http.post(LOGIN_ENDPOINT, () => {
-    // return new HttpResponse(null, {
-    //   status: 202,
-    // }).json({ token: 'jwt' })
     return HttpResponse.json({token: 'jwt'}, {status: 200})
-    // return res(ctx.status(200), ctx.json({token: 'jwt'}))
   })
 ]
 export const loginFailedHandler = http.post(LOGIN_ENDPOINT, (_req, res, ctx) => {
-  // return HttpResponse.error().json({ message: 'Login Failed' })
   return HttpResponse.json({message: 'Login Failed'}, {status: 400})
-  // return res(ctx.status(400), ctx.json({message: 'Login Failed'}))
 })
 
 // This configures a request mocking server with the given request handlers.
diff --git a/frontend/src/pam/mission/actions/action-control-env.tsx b/frontend/src/pam/mission/actions/action-control-env.tsx
index 8b3948bb..4f66d77e 100644
--- a/frontend/src/pam/mission/actions/action-control-env.tsx
+++ b/frontend/src/pam/mission/actions/action-control-env.tsx
@@ -10,242 +10,218 @@ import { Action } from '../../../types/action-types'
 import { ControlType } from '../../../types/control-types'
 import { actionTargetTypeLabels, EnvActionControl, vehicleTypeLabels } from '../../../types/env-mission-types'
 import { useParams } from 'react-router-dom'
-import EnvInfractionNewTarget from '../infractions/env-infraction-new-target'
-import EnvInfractionExistingTarget from '../infractions/env-infraction-existing-target'
+import EnvInfractionAddNewTarget from '../infractions/env-infraction-add-new-target.tsx'
+import EnvInfractionExistingTargets from '../infractions/env-infraction-existing-targets.tsx'
 import useActionById from "./use-action-by-id.tsx";
 import { extractLatLonFromMultiPoint } from "../../../utils/geometry.ts";
 
 interface ActionControlPropsEnv {
-  action: Action
+    action: Action
 }
 
 const ActionControlEnv: React.FC<ActionControlPropsEnv> = ({action}) => {
-  const {missionId, actionId} = useParams()
+    const {missionId, actionId} = useParams()
 
-  const {
-    data: envAction,
-    loading,
-    error,
-  } = useActionById(actionId, missionId, action.source, action.type)
+    const {
+        data: envAction,
+        loading,
+        error,
+    } = useActionById(actionId, missionId, action.source, action.type)
 
-  if (loading) {
-    return (
-      <div>loading</div>
-    )
-  }
-  if (error) {
-    return (
-      <div>error</div>
-    )
-  }
-  if (envAction) {
-    const actionData: EnvActionControl = envAction.data
-    return (
-      <Stack direction="column" spacing={'2rem'} alignItems="flex-start" style={{width: '100%'}}>
-        <Stack.Item style={{width: '100%'}}>
-          <Stack direction="row" spacing={'0.5rem'} style={{width: '100%'}}>
-            <Stack.Item alignSelf="baseline">
-              <Icon.ControlUnit color={THEME.color.charcoal} size={20}/>
-            </Stack.Item>
-            <Stack.Item grow={2}>
-              <Text as="h2" weight="bold">
-                Contrôles {envAction.startDateTimeUtc && `(${formatDateTimeForFrenchHumans(envAction.startDateTimeUtc)})`}
-              </Text>
-            </Stack.Item>
-          </Stack>
-        </Stack.Item>
-        <Stack.Item style={{width: '100%'}}>
-          <Label>Thématique de contrôle</Label>
-          <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
-            {actionData?.themes[0].theme ?? 'inconnue'}
-          </Text>
-        </Stack.Item>
-        <Stack.Item style={{width: '100%'}}>
-          <Label>Sous-thématiques de contrôle</Label>
-          <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
-            {actionData?.themes[0].subThemes?.length
-              ? actionData?.themes[0].subThemes?.join(', ')
-              : 'inconnues'}
-          </Text>
-        </Stack.Item>
-        <Stack.Item style={{width: '100%'}}>
-          <Label>Date et heure</Label>
-          <DatePicker
-            defaultValue={envAction.startDateTimeUtc}
-            // label="Date et heure"
-            withTime={true}
-            isCompact={false}
-            isLight={true}
-            name="startDateTimeUtc"
-            readOnly={true}
-            disabled={true}
-          />
-        </Stack.Item>
-        <Stack.Item>
-          <Label>Lieu du contrôle</Label>
-          {true && (() => {
-            const [latitude, longitude] = extractLatLonFromMultiPoint(actionData?.geom);
-            return (
-              <CoordinatesInput
-                defaultValue={[
-                  latitude as any,
-                  longitude as any
-                ]}
-                coordinatesFormat={CoordinatesFormat.DECIMAL_DEGREES}
-                // label="Lieu du contrôle"
-                // isLight={true}
-                disabled={true}
-              />
-            );
-          })()}
-
-
-          {/*<MultiZoneEditor*/}
-          {/*    addButtonLabel="Add a zone"*/}
-          {/*    disabled*/}
-          {/*    error=""*/}
-          {/*    initialZone={{*/}
-          {/*        name: 'Polygone dessiné'*/}
-          {/*    }}*/}
-          {/*    isLight={true}*/}
-          {/*    label="Some zones"*/}
-          {/*    labelPropName="name"*/}
-          {/*    defaultValue={actionData?.geom}*/}
-          {/*    onAdd={function noRefCheck() {*/}
-          {/*    }}*/}
-          {/*    onCenter={function noRefCheck() {*/}
-          {/*    }}*/}
-          {/*    onChange={function noRefCheck() {*/}
-          {/*    }}*/}
-          {/*    onDelete={function noRefCheck() {*/}
-          {/*    }}*/}
-          {/*    onEdit={function noRefCheck() {*/}
-          {/*    }}*/}
-          {/*/>*/}
-        </Stack.Item>
-        <Stack.Item style={{width: '100%'}}>
-          <Divider style={{backgroundColor: THEME.color.charcoal}}/>
-        </Stack.Item>
-        <Stack.Item style={{width: '100%'}}>
-          <Stack direction="column" alignItems="flex-start" spacing={'2rem'} style={{width: '100%'}}>
-            <Stack.Item style={{width: '100%'}}>
-              <Stack direction="row" alignItems="flex-start" spacing={'2rem'} style={{width: '100%'}}>
-                <Stack.Item style={{width: '33%'}}>
-                  <Stack direction="column" spacing={'1rem'} alignItems="flex-start">
-                    <Stack.Item>
-                      <Label>Nbre total de contrôles</Label>
-                      <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
-                        {actionData?.actionNumberOfControls ?? 'inconnu'}
-                      </Text>
-                    </Stack.Item>
-                    <Stack.Item>
-                      <Label>Type de cible</Label>
-                      <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
-                        {!!actionData?.actionTargetType
-                          ? actionTargetTypeLabels[actionData?.actionTargetType].libelle
-                          : 'inconnu'}
-                      </Text>
-                    </Stack.Item>
-                    <Stack.Item>
-                      <Label>Type de véhicule</Label>
-                      <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
-                        {!!actionData?.vehicleType ? vehicleTypeLabels[actionData?.vehicleType].libelle : 'inconnu'}
-                      </Text>
-                    </Stack.Item>
-                    <Stack.Item>
-                      <Label>Observations</Label>
-                      <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
-                        {actionData?.observations ?? 'aucunes'}
-                      </Text>
-                    </Stack.Item>
-                  </Stack>
+    if (loading) {
+        return (
+            <div>loading</div>
+        )
+    }
+    if (error) {
+        return (
+            <div>error</div>
+        )
+    }
+    if (envAction) {
+        const actionData: EnvActionControl = envAction.data
+        return (
+            <Stack direction="column" spacing={'2rem'} alignItems="flex-start" style={{width: '100%'}}>
+                <Stack.Item style={{width: '100%'}}>
+                    <Stack direction="row" spacing={'0.5rem'} style={{width: '100%'}}>
+                        <Stack.Item alignSelf="baseline">
+                            <Icon.ControlUnit color={THEME.color.charcoal} size={20}/>
+                        </Stack.Item>
+                        <Stack.Item grow={2}>
+                            <Text as="h2" weight="bold">
+                                Contrôles {envAction.startDateTimeUtc && `(${formatDateTimeForFrenchHumans(envAction.startDateTimeUtc)})`}
+                            </Text>
+                        </Stack.Item>
+                    </Stack>
+                </Stack.Item>
+                <Stack.Item style={{width: '100%'}}>
+                    <Label>Thématique de contrôle</Label>
+                    <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
+                        {actionData?.themes[0].theme ?? 'inconnue'}
+                    </Text>
+                </Stack.Item>
+                <Stack.Item style={{width: '100%'}}>
+                    <Label>Sous-thématiques de contrôle</Label>
+                    <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
+                        {actionData?.themes[0].subThemes?.length
+                            ? actionData?.themes[0].subThemes?.join(', ')
+                            : 'inconnues'}
+                    </Text>
+                </Stack.Item>
+                <Stack.Item style={{width: '100%'}}>
+                    <Label>Date et heure</Label>
+                    <DatePicker
+                        defaultValue={envAction.startDateTimeUtc}
+                        // label="Date et heure"
+                        withTime={true}
+                        isCompact={false}
+                        isLight={true}
+                        name="startDateTimeUtc"
+                        readOnly={true}
+                        disabled={true}
+                    />
+                </Stack.Item>
+                <Stack.Item>
+                    <Label>Lieu du contrôle</Label>
+                    {true && (() => {
+                        const [latitude, longitude] = extractLatLonFromMultiPoint(actionData?.geom);
+                        return (
+                            <CoordinatesInput
+                                defaultValue={[
+                                    latitude as any,
+                                    longitude as any
+                                ]}
+                                coordinatesFormat={CoordinatesFormat.DECIMAL_DEGREES}
+                                // label="Lieu du contrôle"
+                                // isLight={true}
+                                disabled={true}
+                            />
+                        );
+                    })()}
+                </Stack.Item>
+                <Stack.Item style={{width: '100%'}}>
+                    <Divider style={{backgroundColor: THEME.color.charcoal}}/>
                 </Stack.Item>
+                <Stack.Item style={{width: '100%'}}>
+                    <Stack direction="column" alignItems="flex-start" spacing={'2rem'} style={{width: '100%'}}>
+                        <Stack.Item style={{width: '100%'}}>
+                            <Stack direction="row" alignItems="flex-start" spacing={'2rem'} style={{width: '100%'}}>
+                                <Stack.Item style={{width: '33%'}}>
+                                    <Stack direction="column" spacing={'1rem'} alignItems="flex-start">
+                                        <Stack.Item>
+                                            <Label>Nbre total de contrôles</Label>
+                                            <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
+                                                {actionData?.actionNumberOfControls ?? 'inconnu'}
+                                            </Text>
+                                        </Stack.Item>
+                                        <Stack.Item>
+                                            <Label>Type de cible</Label>
+                                            <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
+                                                {!!actionData?.actionTargetType
+                                                    ? actionTargetTypeLabels[actionData?.actionTargetType].libelle
+                                                    : 'inconnu'}
+                                            </Text>
+                                        </Stack.Item>
+                                        <Stack.Item>
+                                            <Label>Type de véhicule</Label>
+                                            <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
+                                                {!!actionData?.vehicleType ? vehicleTypeLabels[actionData?.vehicleType].libelle : 'inconnu'}
+                                            </Text>
+                                        </Stack.Item>
+                                        <Stack.Item>
+                                            <Label>Observations</Label>
+                                            <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
+                                                {actionData?.observations ?? 'aucunes'}
+                                            </Text>
+                                        </Stack.Item>
+                                    </Stack>
+                                </Stack.Item>
 
-                <Stack.Item style={{width: '67%'}}>
-                  <Stack direction="column" alignItems="flex-start" spacing={'1.5rem'}
-                         style={{width: '100%'}}>
-                    {(actionData?.controlsToComplete?.length || 0) > 0 && (
-                      <Stack.Item alignSelf="flex-end">
-                        <ControlsToCompleteTag
-                          amountOfControlsToComplete={
-                            actionData?.controlsToComplete?.length
-                          }
-                          isLight={true}
-                        />
-                      </Stack.Item>
-                    )}
+                                <Stack.Item style={{width: '67%'}}>
+                                    <Stack direction="column" alignItems="flex-start" spacing={'1.5rem'}
+                                           style={{width: '100%'}}>
+                                        {(actionData?.controlsToComplete?.length || 0) > 0 && (
+                                            <Stack.Item alignSelf="flex-end">
+                                                <ControlsToCompleteTag
+                                                    amountOfControlsToComplete={
+                                                        actionData?.controlsToComplete?.length
+                                                    }
+                                                    isLight={true}
+                                                />
+                                            </Stack.Item>
+                                        )}
 
-                    <Stack.Item>
-                      <Text as="h3" weight="bold" color={THEME.color.gunMetal}>
-                        dont...
-                      </Text>
-                    </Stack.Item>
-                    <Stack.Item style={{width: '100%'}}>
-                      <EnvControlForm
-                        controlType={ControlType.ADMINISTRATIVE}
-                        data={actionData?.controlAdministrative}
-                        maxAmountOfControls={actionData?.actionNumberOfControls}
-                        shouldCompleteControl={
-                          !!actionData?.controlsToComplete?.includes(
-                            ControlType.ADMINISTRATIVE
-                          )
-                        }
-                      />
-                    </Stack.Item>
-                    <Stack.Item style={{width: '100%'}}>
-                      <EnvControlForm
-                        controlType={ControlType.NAVIGATION}
-                        data={actionData?.controlNavigation}
-                        maxAmountOfControls={actionData?.actionNumberOfControls}
-                        shouldCompleteControl={
-                          !!actionData?.controlsToComplete?.includes(ControlType.NAVIGATION)
-                        }
-                      />
-                    </Stack.Item>
-                    <Stack.Item style={{width: '100%'}}>
-                      <EnvControlForm
-                        controlType={ControlType.GENS_DE_MER}
-                        data={actionData?.controlGensDeMer}
-                        maxAmountOfControls={actionData?.actionNumberOfControls}
-                        shouldCompleteControl={
-                          !!actionData?.controlsToComplete?.includes(
-                            ControlType.GENS_DE_MER
-                          )
-                        }
-                      />
-                    </Stack.Item>
-                    <Stack.Item style={{width: '100%'}}>
-                      <EnvControlForm
-                        controlType={ControlType.SECURITY}
-                        data={actionData?.controlSecurity}
-                        maxAmountOfControls={actionData?.actionNumberOfControls}
-                        shouldCompleteControl={
-                          !!actionData?.controlsToComplete?.includes(ControlType.SECURITY)
-                        }
-                      />
-                    </Stack.Item>
-                  </Stack>
+                                        <Stack.Item>
+                                            <Text as="h3" weight="bold" color={THEME.color.gunMetal}>
+                                                dont...
+                                            </Text>
+                                        </Stack.Item>
+                                        <Stack.Item style={{width: '100%'}}>
+                                            <EnvControlForm
+                                                controlType={ControlType.ADMINISTRATIVE}
+                                                data={actionData?.controlAdministrative}
+                                                maxAmountOfControls={actionData?.actionNumberOfControls}
+                                                shouldCompleteControl={
+                                                    !!actionData?.controlsToComplete?.includes(
+                                                        ControlType.ADMINISTRATIVE
+                                                    )
+                                                }
+                                            />
+                                        </Stack.Item>
+                                        <Stack.Item style={{width: '100%'}}>
+                                            <EnvControlForm
+                                                controlType={ControlType.NAVIGATION}
+                                                data={actionData?.controlNavigation}
+                                                maxAmountOfControls={actionData?.actionNumberOfControls}
+                                                shouldCompleteControl={
+                                                    !!actionData?.controlsToComplete?.includes(ControlType.NAVIGATION)
+                                                }
+                                            />
+                                        </Stack.Item>
+                                        <Stack.Item style={{width: '100%'}}>
+                                            <EnvControlForm
+                                                controlType={ControlType.GENS_DE_MER}
+                                                data={actionData?.controlGensDeMer}
+                                                maxAmountOfControls={actionData?.actionNumberOfControls}
+                                                shouldCompleteControl={
+                                                    !!actionData?.controlsToComplete?.includes(
+                                                        ControlType.GENS_DE_MER
+                                                    )
+                                                }
+                                            />
+                                        </Stack.Item>
+                                        <Stack.Item style={{width: '100%'}}>
+                                            <EnvControlForm
+                                                controlType={ControlType.SECURITY}
+                                                data={actionData?.controlSecurity}
+                                                maxAmountOfControls={actionData?.actionNumberOfControls}
+                                                shouldCompleteControl={
+                                                    !!actionData?.controlsToComplete?.includes(ControlType.SECURITY)
+                                                }
+                                            />
+                                        </Stack.Item>
+                                    </Stack>
+                                </Stack.Item>
+                            </Stack>
+                        </Stack.Item>
+                        <Stack.Item style={{width: '100%'}}>
+                            <EnvInfractionAddNewTarget
+                                availableControlTypesForInfraction={actionData?.availableControlTypesForInfraction}
+                            />
+                        </Stack.Item>
+                        <Stack.Item style={{width: '100%'}}>
+                            <EnvInfractionExistingTargets
+                                infractionsByTarget={actionData?.infractions}
+                                availableControlTypesForInfraction={actionData?.availableControlTypesForInfraction}
+                            />
+                        </Stack.Item>
+                    </Stack>
                 </Stack.Item>
-              </Stack>
-            </Stack.Item>
-            <Stack.Item style={{width: '100%'}}>
-              <EnvInfractionNewTarget
-                availableControlTypesForInfraction={actionData?.availableControlTypesForInfraction}
-              />
-            </Stack.Item>
-            <Stack.Item style={{width: '100%'}}>
-              <EnvInfractionExistingTarget
-                infractionsByTarget={actionData?.infractions}
-                availableControlTypesForInfraction={actionData?.availableControlTypesForInfraction}
-              />
-            </Stack.Item>
-          </Stack>
-        </Stack.Item>
-      </Stack>
-    )
-  }
+            </Stack>
+        )
+    }
 
-  return null
+    return null
 }
 
 export default ActionControlEnv
diff --git a/frontend/src/pam/mission/actions/action-control-nav.tsx b/frontend/src/pam/mission/actions/action-control-nav.tsx
index d7776154..8801ae73 100644
--- a/frontend/src/pam/mission/actions/action-control-nav.tsx
+++ b/frontend/src/pam/mission/actions/action-control-nav.tsx
@@ -1,20 +1,20 @@
 import React, { useEffect, useState } from 'react'
 import {
-  Accent,
-  Button,
-  Coordinates,
-  CoordinatesFormat,
-  CoordinatesInput,
-  DateRange,
-  DateRangePicker,
-  Icon,
-  Label,
-  OptionValue,
-  Select,
-  Size,
-  Textarea,
-  TextInput,
-  THEME
+    Accent,
+    Button,
+    Coordinates,
+    CoordinatesFormat,
+    CoordinatesInput,
+    DateRange,
+    DateRangePicker,
+    Icon,
+    Label,
+    OptionValue,
+    Select,
+    Size,
+    Textarea,
+    TextInput,
+    THEME
 } from '@mtes-mct/monitor-ui'
 import { VesselTypeEnum } from '../../../types/mission-types'
 import { Action, ActionControl } from '../../../types/action-types'
@@ -34,266 +34,266 @@ import { GET_MISSION_TIMELINE } from "../timeline/use-mission-timeline.tsx";
 import useActionById from "./use-action-by-id.tsx";
 
 interface ActionControlNavProps {
-  action: Action
+    action: Action
 }
 
 const ActionControlNav: React.FC<ActionControlNavProps> = ({action}) => {
-  const navigate = useNavigate()
-  const {missionId, actionId} = useParams()
-  const [observationsValue, setObservationsValue] = useState<string | undefined>(
-    undefined
-  )
-  const [identityControlledPersonValue, setIdentityControlledPersonValue] = useState<string | undefined>(
-    undefined
-  )
-
-  const [mutateControl] = useMutation(
-    MUTATION_ADD_OR_UPDATE_ACTION_CONTROL,
-    {
-      refetchQueries: [GET_MISSION_TIMELINE]
-    }
-  )
-  const [deleteControl] = useMutation(DELETE_ACTION_CONTROL, {
-    refetchQueries: [GET_MISSION_TIMELINE]
-  })
-
-  const {data: navAction, loading, error} = useActionById(actionId, missionId, action.source, action.type)
-
-  useEffect(() => {
-    setObservationsValue(navAction?.data.observations)
-    setIdentityControlledPersonValue(navAction?.data.identityControlledPerson)
-  }, [navAction])
-
-
-  if (loading) {
-    return (
-      <div>loading</div>
+    const navigate = useNavigate()
+    const {missionId, actionId} = useParams()
+    const [observationsValue, setObservationsValue] = useState<string | undefined>(
+        undefined
     )
-  }
-  if (error) {
-    return (
-      <div>error</div>
+    const [identityControlledPersonValue, setIdentityControlledPersonValue] = useState<string | undefined>(
+        undefined
     )
-  }
-  if (navAction) {
-    const control = navAction?.data as ActionControl
 
+    const [mutateControl] = useMutation(
+        MUTATION_ADD_OR_UPDATE_ACTION_CONTROL,
+        {
+            refetchQueries: [GET_MISSION_TIMELINE]
+        }
+    )
+    const [deleteControl] = useMutation(DELETE_ACTION_CONTROL, {
+        refetchQueries: [GET_MISSION_TIMELINE]
+    })
 
-    const handleObservationsChange = (nextValue?: string) => {
-      setObservationsValue(nextValue)
-    }
-    const handleObservationsBlur = () => {
-      onChange('observations', observationsValue)
-    }
+    const {data: navAction, loading, error} = useActionById(actionId, missionId, action.source, action.type)
 
-    const handleIdentityControlledPersonChange = (nextValue?: string) => {
-      setIdentityControlledPersonValue(nextValue)
+    useEffect(() => {
+        setObservationsValue(navAction?.data.observations)
+        setIdentityControlledPersonValue(navAction?.data.identityControlledPerson)
+    }, [navAction])
+
+
+    if (loading) {
+        return (
+            <div>loading</div>
+        )
     }
-    const handleIdentityControlledPersonBlur = () => {
-      onChange('identityControlledPerson', identityControlledPersonValue)
+    if (error) {
+        return (
+            <div>error</div>
+        )
     }
+    if (navAction) {
+        const control = navAction?.data as ActionControl
 
 
-    const onChange = (field: string, value: any) => {
-      let updatedField = {}
-      if (field === 'dates') {
-        debugger
-        const startDateTimeUtc = value[0].toISOString()
-        const endDateTimeUtc = value[1].toISOString()
-        updatedField = {
-          startDateTimeUtc,
-          endDateTimeUtc
+        const handleObservationsChange = (nextValue?: string) => {
+            setObservationsValue(nextValue)
         }
-      } else if (field === 'geom') {
-        updatedField = {
-          latitude: value[0],
-          longitude: value[1]
+        const handleObservationsBlur = () => {
+            onChange('observations', observationsValue)
         }
-      } else {
-        updatedField = {
-          [field]: value
+
+        const handleIdentityControlledPersonChange = (nextValue?: string) => {
+            setIdentityControlledPersonValue(nextValue)
+        }
+        const handleIdentityControlledPersonBlur = () => {
+            onChange('identityControlledPerson', identityControlledPersonValue)
         }
-      }
 
-      const updatedData = {
-        missionId: missionId,
-        ...omit(control, [
-          '__typename',
-          'controlAdministrative',
-          'controlGensDeMer',
-          'controlNavigation',
-          'controlSecurity'
-        ]),
-        startDateTimeUtc: action.startDateTimeUtc,
-        endDateTimeUtc: action.endDateTimeUtc,
-        ...updatedField
-      }
 
-      mutateControl({variables: {controlAction: updatedData}})
-    }
+        const onChange = (field: string, value: any) => {
+            let updatedField = {}
+            if (field === 'dates') {
+                debugger
+                const startDateTimeUtc = value[0].toISOString()
+                const endDateTimeUtc = value[1].toISOString()
+                updatedField = {
+                    startDateTimeUtc,
+                    endDateTimeUtc
+                }
+            } else if (field === 'geom') {
+                updatedField = {
+                    latitude: value[0],
+                    longitude: value[1]
+                }
+            } else {
+                updatedField = {
+                    [field]: value
+                }
+            }
+
+            const updatedData = {
+                missionId: missionId,
+                ...omit(control, [
+                    '__typename',
+                    'controlAdministrative',
+                    'controlGensDeMer',
+                    'controlNavigation',
+                    'controlSecurity'
+                ]),
+                startDateTimeUtc: action.startDateTimeUtc,
+                endDateTimeUtc: action.endDateTimeUtc,
+                ...updatedField
+            }
 
-    const deleteAction = () => {
-      deleteControl({
-        variables: {
-          id: action.id!
+            mutateControl({variables: {controlAction: updatedData}})
         }
-      })
-      navigate(`/pam/missions/${missionId}`)
-    }
 
+        const deleteAction = () => {
+            deleteControl({
+                variables: {
+                    id: action.id!
+                }
+            })
+            navigate(`/pam/missions/${missionId}`)
+        }
 
-    return (
-      <Stack direction="column" spacing="2rem" alignItems="flex-start" style={{width: '100%'}}>
-        {/* TITLE AND BUTTONS */}
-        <Stack.Item style={{width: '100%'}}>
-          <Stack direction="row" spacing="0.5rem" style={{width: '100%'}}>
-            <Stack.Item alignSelf="baseline">
-              <Icon.ControlUnit color={THEME.color.charcoal} size={20}/>
-            </Stack.Item>
-            <Stack.Item grow={2}>
-              <Stack direction="column" alignItems="flex-start">
-                <Stack.Item>
-                  <Text as="h2">
-                    Contrôles {action.startDateTimeUtc && `(${formatDateTimeForFrenchHumans(action.startDateTimeUtc)})`}
-                  </Text>
+
+        return (
+            <Stack direction="column" spacing="2rem" alignItems="flex-start" style={{width: '100%'}}>
+                {/* TITLE AND BUTTONS */}
+                <Stack.Item style={{width: '100%'}}>
+                    <Stack direction="row" spacing="0.5rem" style={{width: '100%'}}>
+                        <Stack.Item alignSelf="baseline">
+                            <Icon.ControlUnit color={THEME.color.charcoal} size={20}/>
+                        </Stack.Item>
+                        <Stack.Item grow={2}>
+                            <Stack direction="column" alignItems="flex-start">
+                                <Stack.Item>
+                                    <Text as="h2">
+                                        Contrôles {action.startDateTimeUtc && `(${formatDateTimeForFrenchHumans(action.startDateTimeUtc)})`}
+                                    </Text>
+                                </Stack.Item>
+                                <Stack.Item>
+                                    <Text as="h2">
+                                        {controlMethodToHumanString(control.controlMethod)} - {vesselTypeToHumanString(control.vesselType)}
+                                    </Text>
+                                </Stack.Item>
+                            </Stack>
+                        </Stack.Item>
+                        <Stack.Item>
+                            <Stack direction="row" spacing="0.5rem">
+                                <Stack.Item>
+                                    <Button accent={Accent.SECONDARY} size={Size.SMALL} Icon={Icon.Duplicate}
+                                            disabled={true}>
+                                        Dupliquer
+                                    </Button>
+                                </Stack.Item>
+                                <Stack.Item>
+                                    <Button accent={Accent.PRIMARY} size={Size.SMALL} Icon={Icon.Delete}
+                                            onClick={deleteAction}>
+                                        Supprimer
+                                    </Button>
+                                </Stack.Item>
+                            </Stack>
+                        </Stack.Item>
+                    </Stack>
                 </Stack.Item>
+                {/* INFO TEXT */}
                 <Stack.Item>
-                  <Text as="h2">
-                    {controlMethodToHumanString(control.controlMethod)} - {vesselTypeToHumanString(control.vesselType)}
-                  </Text>
+                    <Stack direction="row" spacing="0.5rem" style={{width: '100%'}}>
+                        <Stack.Item alignSelf="baseline">
+                            <Icon.Info color={THEME.color.charcoal} size={20}/>
+                        </Stack.Item>
+                        <Stack.Item>
+                            <Text as="h3" weight="normal" fontStyle="italic">
+                                Pour la saisie des contrôles de la pêche et de l’environnement marin, veuillez appeler
+                                les
+                                centres
+                                concernés.
+                                <br/>
+                                Pêche : CNSP / Environnement Marin : CACEM
+                            </Text>
+                        </Stack.Item>
+                    </Stack>
                 </Stack.Item>
-              </Stack>
-            </Stack.Item>
-            <Stack.Item>
-              <Stack direction="row" spacing="0.5rem">
+                {/* DATE FIELDS */}
                 <Stack.Item>
-                  <Button accent={Accent.SECONDARY} size={Size.SMALL} Icon={Icon.Duplicate}
-                          disabled={true}>
-                    Dupliquer
-                  </Button>
+                    <DateRangePicker
+                        defaultValue={[action.startDateTimeUtc || new Date(), action.endDateTimeUtc || new Date()]}
+                        label="Date et heure de début et de fin"
+                        withTime={true}
+                        isCompact={true}
+                        isLight={true}
+                        onChange={(nextUtcDateRange?: DateRange) => {
+                            onChange('dates', nextUtcDateRange)
+                        }}
+                    />
                 </Stack.Item>
+                {/* CONTROL ZONES FIELD */}
                 <Stack.Item>
-                  <Button accent={Accent.PRIMARY} size={Size.SMALL} Icon={Icon.Delete}
-                          onClick={deleteAction}>
-                    Supprimer
-                  </Button>
+                    <CoordinatesInput
+                        defaultValue={[control.latitude, control.longitude]}
+                        coordinatesFormat={CoordinatesFormat.DECIMAL_DEGREES}
+                        label="Lieu du contrôle"
+                        isLight={true}
+                        onChange={(nextCoordinates?: Coordinates) => onChange('geom', nextCoordinates)}
+                    />
                 </Stack.Item>
-              </Stack>
-            </Stack.Item>
-          </Stack>
-        </Stack.Item>
-        {/* INFO TEXT */}
-        <Stack.Item>
-          <Stack direction="row" spacing="0.5rem" style={{width: '100%'}}>
-            <Stack.Item alignSelf="baseline">
-              <Icon.Info color={THEME.color.charcoal} size={20}/>
-            </Stack.Item>
-            <Stack.Item>
-              <Text as="h3" weight="normal" style="italic">
-                Pour la saisie des contrôles de la pêche et de l’environnement marin, veuillez appeler
-                les
-                centres
-                concernés.
-                <br/>
-                Pêche : CNSP / Environnement Marin : CACEM
-              </Text>
-            </Stack.Item>
-          </Stack>
-        </Stack.Item>
-        {/* DATE FIELDS */}
-        <Stack.Item>
-          <DateRangePicker
-            defaultValue={[action.startDateTimeUtc || new Date(), action.endDateTimeUtc || new Date()]}
-            label="Date et heure de début et de fin"
-            withTime={true}
-            isCompact={true}
-            isLight={true}
-            onChange={(nextUtcDateRange?: DateRange) => {
-              onChange('dates', nextUtcDateRange)
-            }}
-          />
-        </Stack.Item>
-        {/* CONTROL ZONES FIELD */}
-        <Stack.Item>
-          <CoordinatesInput
-            defaultValue={[control.latitude, control.longitude]}
-            coordinatesFormat={CoordinatesFormat.DECIMAL_DEGREES}
-            label="Lieu du contrôle"
-            isLight={true}
-            onChange={(nextCoordinates?: Coordinates) => onChange('geom', nextCoordinates)}
-          />
-        </Stack.Item>
-        {/* VESSEL INFORMATION */}
-        <Stack.Item style={{width: '100%'}}>
-          <Stack spacing="0.5rem" style={{width: '100%'}}>
-            <Stack.Item grow={1} basis={'25%'}>
-              <Select
-                label="Taille du navire"
-                isLight={true}
-                options={VESSEL_SIZE_OPTIONS}
-                value={control.vesselSize}
-                name="vesselSize"
-                onChange={(nextValue: OptionValue) => onChange('vesselSize', nextValue)}
-              />
-            </Stack.Item>
-            <Stack.Item grow={1} basis={'25%'}>
-              <TextInput
-                label="Immatriculation"
-                value={control.vesselIdentifier}
-                isLight={true}
-                name="vesselIdentifier"
-                onChange={(nextValue?: string) => onChange('vesselIdentifier', nextValue)}
-              />
-            </Stack.Item>
-            <Stack.Item grow={2} basis={'50%'}>
-              <TextInput
-                label="Identité de la personne contrôlée"
-                isLight={true}
-                name="identityControlledPerson"
-                value={identityControlledPersonValue}
-                onChange={handleIdentityControlledPersonChange}
-                onBlur={handleIdentityControlledPersonBlur}
-              />
-            </Stack.Item>
-          </Stack>
-        </Stack.Item>
-        <Stack.Item style={{width: '100%'}}>
-          <Stack direction="column" spacing="0.5rem" style={{width: '100%'}}>
-            <Stack.Item style={{width: '100%'}}>
-              <Label>Contrôle(s) effectué(s) par l’unité sur le navire</Label>
-            </Stack.Item>
-            <Stack.Item style={{width: '100%'}}>
-              <ControlAdministrativeForm data={control.controlAdministrative}/>
-            </Stack.Item>
-            <Stack.Item style={{width: '100%'}}>
-              <ControlNavigationForm data={control.controlNavigation}/>
-            </Stack.Item>
-            {/* ne pas montrer les controles gens de mer pour la plaisance de loisir */}
-            {control.vesselType !== VesselTypeEnum.SAILING_LEISURE && (
-              <Stack.Item style={{width: '100%'}}>
-                <ControlGensDeMerForm data={control.controlGensDeMer}/>
-              </Stack.Item>
-            )}
-            <Stack.Item style={{width: '100%'}}>
-              <ControlSecurityForm data={control.controlSecurity}/>
-            </Stack.Item>
-          </Stack>
-        </Stack.Item>
-        <Stack.Item style={{width: '100%'}}>
-          <Textarea
-            label="Observations générales sur le contrôle"
-            isLight={true}
-            name="observations"
-            value={observationsValue}
-            onChange={handleObservationsChange}
-            onBlur={handleObservationsBlur}
-          />
-        </Stack.Item>
-      </Stack>
-    )
-  }
+                {/* VESSEL INFORMATION */}
+                <Stack.Item style={{width: '100%'}}>
+                    <Stack spacing="0.5rem" style={{width: '100%'}}>
+                        <Stack.Item grow={1} basis={'25%'}>
+                            <Select
+                                label="Taille du navire"
+                                isLight={true}
+                                options={VESSEL_SIZE_OPTIONS}
+                                value={control.vesselSize}
+                                name="vesselSize"
+                                onChange={(nextValue: OptionValue) => onChange('vesselSize', nextValue)}
+                            />
+                        </Stack.Item>
+                        <Stack.Item grow={1} basis={'25%'}>
+                            <TextInput
+                                label="Immatriculation"
+                                value={control.vesselIdentifier}
+                                isLight={true}
+                                name="vesselIdentifier"
+                                onChange={(nextValue?: string) => onChange('vesselIdentifier', nextValue)}
+                            />
+                        </Stack.Item>
+                        <Stack.Item grow={2} basis={'50%'}>
+                            <TextInput
+                                label="Identité de la personne contrôlée"
+                                isLight={true}
+                                name="identityControlledPerson"
+                                value={identityControlledPersonValue}
+                                onChange={handleIdentityControlledPersonChange}
+                                onBlur={handleIdentityControlledPersonBlur}
+                            />
+                        </Stack.Item>
+                    </Stack>
+                </Stack.Item>
+                <Stack.Item style={{width: '100%'}}>
+                    <Stack direction="column" spacing="0.5rem" style={{width: '100%'}}>
+                        <Stack.Item style={{width: '100%'}}>
+                            <Label>Contrôle(s) effectué(s) par l’unité sur le navire</Label>
+                        </Stack.Item>
+                        <Stack.Item style={{width: '100%'}}>
+                            <ControlAdministrativeForm data={control.controlAdministrative}/>
+                        </Stack.Item>
+                        <Stack.Item style={{width: '100%'}}>
+                            <ControlNavigationForm data={control.controlNavigation}/>
+                        </Stack.Item>
+                        {/* ne pas montrer les controles gens de mer pour la plaisance de loisir */}
+                        {control.vesselType !== VesselTypeEnum.SAILING_LEISURE && (
+                            <Stack.Item style={{width: '100%'}}>
+                                <ControlGensDeMerForm data={control.controlGensDeMer}/>
+                            </Stack.Item>
+                        )}
+                        <Stack.Item style={{width: '100%'}}>
+                            <ControlSecurityForm data={control.controlSecurity}/>
+                        </Stack.Item>
+                    </Stack>
+                </Stack.Item>
+                <Stack.Item style={{width: '100%'}}>
+                    <Textarea
+                        label="Observations générales sur le contrôle"
+                        isLight={true}
+                        name="observations"
+                        value={observationsValue}
+                        onChange={handleObservationsChange}
+                        onBlur={handleObservationsBlur}
+                    />
+                </Stack.Item>
+            </Stack>
+        )
+    }
 
-  return null
+    return null
 }
 
 export default ActionControlNav
diff --git a/frontend/src/pam/mission/actions/action-status-form.tsx b/frontend/src/pam/mission/actions/action-status-form.tsx
index ea691f6e..9dad752e 100644
--- a/frontend/src/pam/mission/actions/action-status-form.tsx
+++ b/frontend/src/pam/mission/actions/action-status-form.tsx
@@ -1,15 +1,15 @@
 import React, { useEffect, useState } from 'react'
 import {
-  Accent,
-  Button,
-  DatePicker,
-  Icon,
-  MultiRadio,
-  OptionValue,
-  Size,
-  Tag,
-  Textarea,
-  THEME
+    Accent,
+    Button,
+    DatePicker,
+    Icon,
+    MultiRadio,
+    OptionValue,
+    Size,
+    Tag,
+    Textarea,
+    THEME
 } from '@mtes-mct/monitor-ui'
 import { Action, ActionStatus, ActionStatusType, } from '../../../types/action-types'
 import { Stack } from 'rsuite'
@@ -25,174 +25,174 @@ import { GET_MISSION_TIMELINE } from "../timeline/use-mission-timeline.tsx";
 import useActionById from "./use-action-by-id.tsx";
 
 interface ActionStatusFormProps {
-  action: Action
+    action: Action
 }
 
 const ActionStatusForm: React.FC<ActionStatusFormProps> = ({action}) => {
-  const navigate = useNavigate()
-  const {missionId, actionId} = useParams()
+    const navigate = useNavigate()
+    const {missionId, actionId} = useParams()
 
-  const {data: navAction, loading, error} = useActionById(actionId, missionId, action.source, action.type)
-  const [mutateStatus, {statusData, statusLoading, statusError}] = useMutation(MUTATION_ADD_OR_UPDATE_ACTION_STATUS, {
-    refetchQueries: [GET_MISSION_TIMELINE]
-  })
-  const [deleteStatus, {deleteData, deleteLoading, deleteError}] = useMutation(DELETE_ACTION_STATUS, {
-    refetchQueries: [GET_MISSION_TIMELINE]
-  })
+    const {data: navAction, loading, error} = useActionById(actionId, missionId, action.source, action.type)
+    const [mutateStatus] = useMutation(MUTATION_ADD_OR_UPDATE_ACTION_STATUS, {
+        refetchQueries: [GET_MISSION_TIMELINE]
+    })
+    const [deleteStatus] = useMutation(DELETE_ACTION_STATUS, {
+        refetchQueries: [GET_MISSION_TIMELINE]
+    })
 
-  const [observationsValue, setObservationsValue] = useState<string | undefined>(undefined)
+    const [observationsValue, setObservationsValue] = useState<string | undefined>(undefined)
 
-  useEffect(() => {
-    setObservationsValue(navAction?.data?.observations)
-  }, [navAction])
+    useEffect(() => {
+        setObservationsValue(navAction?.data?.observations)
+    }, [navAction])
 
-  if (loading) {
-    return (
-      <div>loading</div>
-    )
-  }
-  if (error) {
-    return (
-      <div>error</div>
-    )
-  }
-  if (navAction) {
-    const status = navAction?.data as ActionStatus
+    if (loading) {
+        return (
+            <div>loading</div>
+        )
+    }
+    if (error) {
+        return (
+            <div>error</div>
+        )
+    }
+    if (navAction) {
+        const status = navAction?.data as ActionStatus
 
 
-    const handleObservationsChange = (nextValue?: string) => {
-      setObservationsValue(nextValue)
-    }
+        const handleObservationsChange = (nextValue?: string) => {
+            setObservationsValue(nextValue)
+        }
 
 
-    const handleObservationsBlur = () => {
-      onChange('observations', observationsValue)
-    }
+        const handleObservationsBlur = () => {
+            onChange('observations', observationsValue)
+        }
 
-    const onChange = (field: string, value: any) => {
-      const updatedData = {
-        missionId: missionId,
-        ...omit(status, '__typename'),
-        [field]: value
-      }
-      mutateStatus({variables: {statusAction: updatedData}})
-    }
+        const onChange = (field: string, value: any) => {
+            const updatedData = {
+                missionId: missionId,
+                ...omit(status, '__typename'),
+                [field]: value
+            }
+            mutateStatus({variables: {statusAction: updatedData}})
+        }
 
-    const deleteAction = () => {
-      deleteStatus({
-        variables: {
-          id: action.id!
+        const deleteAction = () => {
+            deleteStatus({
+                variables: {
+                    id: action.id!
+                }
+            })
+            navigate(`/pam/missions/${missionId}`)
         }
-      })
-      navigate(`/pam/missions/${missionId}`)
-    }
 
-    return (
-      <form style={{width: '100%'}}>
-        <Stack direction="column" spacing="2rem" alignItems="flex-start" style={{width: '100%'}}>
-          {/* TITLE AND BUTTONS */}
-          <Stack.Item style={{width: '100%'}}>
-            <Stack direction="row" spacing="0.5rem" style={{width: '100%'}}>
-              <Stack.Item alignSelf="baseline">
-                <Icon.FleetSegment color={THEME.color.charcoal} size={20}/>
-              </Stack.Item>
-              <Stack.Item grow={2}>
-                <Stack direction="column" alignItems="flex-start">
-                  <Stack.Item>
-                    <Text as="h2" weight="bold">
-                      Statut du navire{' '}
-                      {status.startDateTimeUtc && `(${formatDateTimeForFrenchHumans(status.startDateTimeUtc)})`}
-                    </Text>
-                  </Stack.Item>
+        return (
+            <form style={{width: '100%'}}>
+                <Stack direction="column" spacing="2rem" alignItems="flex-start" style={{width: '100%'}}>
+                    {/* TITLE AND BUTTONS */}
+                    <Stack.Item style={{width: '100%'}}>
+                        <Stack direction="row" spacing="0.5rem" style={{width: '100%'}}>
+                            <Stack.Item alignSelf="baseline">
+                                <Icon.FleetSegment color={THEME.color.charcoal} size={20}/>
+                            </Stack.Item>
+                            <Stack.Item grow={2}>
+                                <Stack direction="column" alignItems="flex-start">
+                                    <Stack.Item>
+                                        <Text as="h2" weight="bold">
+                                            Statut du navire{' '}
+                                            {status.startDateTimeUtc && `(${formatDateTimeForFrenchHumans(status.startDateTimeUtc)})`}
+                                        </Text>
+                                    </Stack.Item>
+                                </Stack>
+                            </Stack.Item>
+                            <Stack.Item>
+                                <Stack direction="row" spacing="0.5rem">
+                                    <Stack.Item>
+                                        <Button accent={Accent.SECONDARY} size={Size.SMALL} Icon={Icon.Duplicate}
+                                                disabled>
+                                            Dupliquer
+                                        </Button>
+                                    </Stack.Item>
+                                    <Stack.Item>
+                                        <Button accent={Accent.SECONDARY} size={Size.SMALL} Icon={Icon.Delete}
+                                                onClick={deleteAction}>
+                                            Supprimer
+                                        </Button>
+                                    </Stack.Item>
+                                </Stack>
+                            </Stack.Item>
+                        </Stack>
+                    </Stack.Item>
+                    {/* STATUS FIELDS */}
+                    <Stack.Item style={{width: '100%'}}>
+                        <Stack direction="row" spacing="2rem" style={{width: '100%'}}>
+                            <Stack.Item>
+                                <Tag bullet="DISK" bulletColor={getColorForStatus(ActionStatusType[action.status])}
+                                     isLight>
+                                    {mapStatusToText(ActionStatusType[action.status])}
+                                </Tag>
+                            </Stack.Item>
+                            <Stack.Item>
+                                <MultiRadio
+                                    value={status.isStart || false}
+                                    error=""
+                                    isInline
+                                    label=""
+                                    name="isStart"
+                                    onChange={(nextValue: OptionValue) => onChange('isStart', nextValue)}
+                                    options={[
+                                        {
+                                            label: 'Début',
+                                            value: true
+                                        },
+                                        {
+                                            label: 'Fin',
+                                            value: false
+                                        }
+                                    ]}
+                                />
+                            </Stack.Item>
+                        </Stack>
+                    </Stack.Item>
+                    {/* DATE & REASON FIELDS */}
+                    <Stack.Item style={{width: '100%'}}>
+                        <Stack direction="row" spacing="0.5rem" style={{width: '100%'}}>
+                            <Stack.Item grow={1}>
+                                <DatePicker
+                                    defaultValue={status.startDateTimeUtc}
+                                    label="Date et heure"
+                                    withTime={true}
+                                    isCompact={false}
+                                    isLight={true}
+                                    name="startDateTimeUtc"
+                                    onChange={(nextUtcDate: Date) => {
+                                        const date = new Date(nextUtcDate)
+                                        onChange('startDateTimeUtc', date.toISOString())
+                                    }}
+                                />
+                            </Stack.Item>
+                            <Stack.Item grow={3}>
+                                <StatusReasonDropdown actionType={status.status} value={status.reason}
+                                                      onSelect={onChange}/>
+                            </Stack.Item>
+                        </Stack>
+                    </Stack.Item>
+                    <Stack.Item style={{width: '100%'}}>
+                        <Textarea
+                            label="Observations"
+                            value={observationsValue}
+                            isLight={true}
+                            name="observations"
+                            onChange={handleObservationsChange}
+                            onBlur={handleObservationsBlur}
+                        />
+                    </Stack.Item>
                 </Stack>
-              </Stack.Item>
-              <Stack.Item>
-                <Stack direction="row" spacing="0.5rem">
-                  <Stack.Item>
-                    <Button accent={Accent.SECONDARY} size={Size.SMALL} Icon={Icon.Duplicate}
-                            disabled>
-                      Dupliquer
-                    </Button>
-                  </Stack.Item>
-                  <Stack.Item>
-                    <Button accent={Accent.SECONDARY} size={Size.SMALL} Icon={Icon.Delete}
-                            onClick={deleteAction}>
-                      Supprimer
-                    </Button>
-                  </Stack.Item>
-                </Stack>
-              </Stack.Item>
-            </Stack>
-          </Stack.Item>
-          {/* STATUS FIELDS */}
-          <Stack.Item style={{width: '100%'}}>
-            <Stack direction="row" spacing="2rem" style={{width: '100%'}}>
-              <Stack.Item>
-                <Tag bullet="DISK" bulletColor={getColorForStatus(ActionStatusType[action.status])}
-                     isLight>
-                  {mapStatusToText(ActionStatusType[action.status])}
-                </Tag>
-              </Stack.Item>
-              <Stack.Item>
-                <MultiRadio
-                  value={status.isStart || false}
-                  error=""
-                  isInline
-                  label=""
-                  name="isStart"
-                  onChange={(nextValue: OptionValue) => onChange('isStart', nextValue)}
-                  options={[
-                    {
-                      label: 'Début',
-                      value: true
-                    },
-                    {
-                      label: 'Fin',
-                      value: false
-                    }
-                  ]}
-                />
-              </Stack.Item>
-            </Stack>
-          </Stack.Item>
-          {/* DATE & REASON FIELDS */}
-          <Stack.Item style={{width: '100%'}}>
-            <Stack direction="row" spacing="0.5rem" style={{width: '100%'}}>
-              <Stack.Item grow={1}>
-                <DatePicker
-                  defaultValue={status.startDateTimeUtc}
-                  label="Date et heure"
-                  withTime={true}
-                  isCompact={false}
-                  isLight={true}
-                  name="startDateTimeUtc"
-                  onChange={(nextUtcDate: Date) => {
-                    const date = new Date(nextUtcDate)
-                    onChange('startDateTimeUtc', date.toISOString())
-                  }}
-                />
-              </Stack.Item>
-              <Stack.Item grow={3}>
-                <StatusReasonDropdown actionType={status.status} value={status.reason}
-                                      onSelect={onChange}/>
-              </Stack.Item>
-            </Stack>
-          </Stack.Item>
-          <Stack.Item style={{width: '100%'}}>
-            <Textarea
-              label="Observations"
-              value={observationsValue}
-              isLight={true}
-              name="observations"
-              onChange={handleObservationsChange}
-              onBlur={handleObservationsBlur}
-            />
-          </Stack.Item>
-        </Stack>
-      </form>
-    )
-  }
-  return null
+            </form>
+        )
+    }
+    return null
 }
 
 export default ActionStatusForm
diff --git a/frontend/src/pam/mission/actions/use-action-by-id.tsx b/frontend/src/pam/mission/actions/use-action-by-id.tsx
index c68ccd4c..4127e76e 100644
--- a/frontend/src/pam/mission/actions/use-action-by-id.tsx
+++ b/frontend/src/pam/mission/actions/use-action-by-id.tsx
@@ -154,7 +154,7 @@ export const GET_ACTION_BY_ID = gql`
           infractions {
             vesselIdentifier
             vesselType
-            targetAddedInRapportNav
+            targetAddedByUnit
             controlTypesWithInfraction
             infractions {
               id
diff --git a/frontend/src/pam/mission/controls/env-control-form.tsx b/frontend/src/pam/mission/controls/env-control-form.tsx
index accc73d0..19d8d1fe 100644
--- a/frontend/src/pam/mission/controls/env-control-form.tsx
+++ b/frontend/src/pam/mission/controls/env-control-form.tsx
@@ -1,22 +1,22 @@
 import { Stack } from 'rsuite'
 import {
-  ControlAdministrative,
-  ControlGensDeMer,
-  ControlNavigation,
-  ControlSecurity,
-  ControlType
+    ControlAdministrative,
+    ControlGensDeMer,
+    ControlNavigation,
+    ControlSecurity,
+    ControlType
 } from '../../../types/control-types'
 import { NumberInput, TextInput } from '@mtes-mct/monitor-ui'
 import { useMutation } from '@apollo/client'
 import {
-  DELETE_CONTROL_ADMINISTRATIVE,
-  DELETE_CONTROL_GENS_DE_MER,
-  DELETE_CONTROL_NAVIGATION,
-  DELETE_CONTROL_SECURITY,
-  MUTATION_ADD_OR_UPDATE_CONTROL_ADMINISTRATIVE,
-  MUTATION_ADD_OR_UPDATE_CONTROL_GENS_DE_MER,
-  MUTATION_ADD_OR_UPDATE_CONTROL_NAVIGATION,
-  MUTATION_ADD_OR_UPDATE_CONTROL_SECURITY
+    DELETE_CONTROL_ADMINISTRATIVE,
+    DELETE_CONTROL_GENS_DE_MER,
+    DELETE_CONTROL_NAVIGATION,
+    DELETE_CONTROL_SECURITY,
+    MUTATION_ADD_OR_UPDATE_CONTROL_ADMINISTRATIVE,
+    MUTATION_ADD_OR_UPDATE_CONTROL_GENS_DE_MER,
+    MUTATION_ADD_OR_UPDATE_CONTROL_NAVIGATION,
+    MUTATION_ADD_OR_UPDATE_CONTROL_SECURITY
 } from '../queries'
 import omit from 'lodash/omit'
 import { useParams } from 'react-router-dom'
@@ -26,123 +26,123 @@ import { GET_MISSION_TIMELINE } from "../timeline/use-mission-timeline.tsx";
 import { GET_ACTION_BY_ID } from "../actions/use-action-by-id.tsx";
 
 export interface EnvControlFormProps {
-  controlType: ControlType
-  data?: ControlAdministrative | ControlSecurity | ControlNavigation | ControlGensDeMer
-  maxAmountOfControls?: number
-  shouldCompleteControl?: boolean
+    controlType: ControlType
+    data?: ControlAdministrative | ControlSecurity | ControlNavigation | ControlGensDeMer
+    maxAmountOfControls?: number
+    shouldCompleteControl?: boolean
 }
 
 const EnvControlForm: React.FC<EnvControlFormProps> = ({
-                                                         controlType,
-                                                         data,
-                                                         maxAmountOfControls,
-                                                         shouldCompleteControl
+                                                           controlType,
+                                                           data,
+                                                           maxAmountOfControls,
+                                                           shouldCompleteControl
                                                        }) => {
-  const {missionId, actionId} = useParams()
+    const {missionId, actionId} = useParams()
 
-  const [observationsValue, setObservationsValue] = useState<string | undefined>(data?.observations)
+    const [observationsValue, setObservationsValue] = useState<string | undefined>(data?.observations)
 
-  const handleObservationsChange = (nextValue?: string) => {
-    setObservationsValue(nextValue)
-  }
+    const handleObservationsChange = (nextValue?: string) => {
+        setObservationsValue(nextValue)
+    }
 
-  useEffect(() => {
-    setObservationsValue(data?.observations)
-  }, [data])
+    useEffect(() => {
+        setObservationsValue(data?.observations)
+    }, [data])
 
-  const handleObservationsBlur = () => {
-    onChange('observations', observationsValue)
-  }
+    const handleObservationsBlur = () => {
+        onChange('observations', observationsValue)
+    }
 
-  const mutations = {
-    [ControlType.ADMINISTRATIVE]: {
-      addOrUpdate: MUTATION_ADD_OR_UPDATE_CONTROL_ADMINISTRATIVE,
-      delete: DELETE_CONTROL_ADMINISTRATIVE
-    },
-    [ControlType.NAVIGATION]: {
-      addOrUpdate: MUTATION_ADD_OR_UPDATE_CONTROL_NAVIGATION,
-      delete: DELETE_CONTROL_NAVIGATION
-    },
-    [ControlType.SECURITY]: {
-      addOrUpdate: MUTATION_ADD_OR_UPDATE_CONTROL_SECURITY,
-      delete: DELETE_CONTROL_SECURITY
-    },
-    [ControlType.GENS_DE_MER]: {
-      addOrUpdate: MUTATION_ADD_OR_UPDATE_CONTROL_GENS_DE_MER,
-      delete: DELETE_CONTROL_GENS_DE_MER
+    const mutations = {
+        [ControlType.ADMINISTRATIVE]: {
+            addOrUpdate: MUTATION_ADD_OR_UPDATE_CONTROL_ADMINISTRATIVE,
+            delete: DELETE_CONTROL_ADMINISTRATIVE
+        },
+        [ControlType.NAVIGATION]: {
+            addOrUpdate: MUTATION_ADD_OR_UPDATE_CONTROL_NAVIGATION,
+            delete: DELETE_CONTROL_NAVIGATION
+        },
+        [ControlType.SECURITY]: {
+            addOrUpdate: MUTATION_ADD_OR_UPDATE_CONTROL_SECURITY,
+            delete: DELETE_CONTROL_SECURITY
+        },
+        [ControlType.GENS_DE_MER]: {
+            addOrUpdate: MUTATION_ADD_OR_UPDATE_CONTROL_GENS_DE_MER,
+            delete: DELETE_CONTROL_GENS_DE_MER
+        }
     }
-  }
 
-  const [mutate, {statusData, statusLoading, statusError}] = useMutation(mutations[controlType].addOrUpdate, {
-    refetchQueries: [GET_MISSION_TIMELINE, GET_ACTION_BY_ID]
-  })
+    const [mutate] = useMutation(mutations[controlType].addOrUpdate, {
+        refetchQueries: [GET_MISSION_TIMELINE, GET_ACTION_BY_ID]
+    })
 
-  const [deleteControl, {deleteData, deleteLoading, deleteError}] = useMutation(mutations[controlType].delete, {
-    refetchQueries: [GET_MISSION_TIMELINE, GET_ACTION_BY_ID],
-  })
+    const [deleteControl] = useMutation(mutations[controlType].delete, {
+        refetchQueries: [GET_MISSION_TIMELINE, GET_ACTION_BY_ID],
+    })
 
-  const toggleControl = async (isChecked: boolean) =>
-    isChecked
-      ? onChange()
-      : await deleteControl({
-        variables: {
-          actionId
-        }
-      })
+    const toggleControl = async (isChecked: boolean) =>
+        isChecked
+            ? onChange()
+            : await deleteControl({
+                variables: {
+                    actionId
+                }
+            })
 
-  const onChange = async (field?: string, value?: any) => {
-    let updatedData = {
-      ...omit(data, '__typename'),
-      missionId: missionId,
-      actionControlId: actionId,
-      amountOfControls: data?.amountOfControls || 1
-    }
+    const onChange = async (field?: string, value?: any) => {
+        let updatedData = {
+            ...omit(data, '__typename'),
+            missionId: missionId,
+            actionControlId: actionId,
+            amountOfControls: data?.amountOfControls || 1
+        }
 
-    if (!!field && !!value) {
-      updatedData = {
-        ...updatedData,
-        [field]: value
-      }
+        if (!!field && !!value) {
+            updatedData = {
+                ...updatedData,
+                [field]: value
+            }
+        }
+        await mutate({variables: {control: updatedData}})
     }
-    await mutate({variables: {control: updatedData}})
-  }
 
-  return (
-    <Stack direction="column" alignItems="flex-start" spacing={'0.5rem'} style={{width: '100%'}}>
-      <Stack.Item style={{width: '100%'}}>
-        <ControlTitleCheckbox
-          controlType={controlType}
-          checked={!!data || shouldCompleteControl}
-          shouldCompleteControl={!!shouldCompleteControl && !!!data}
-          onChange={(isChecked: boolean) => toggleControl(isChecked)}
-        />
-      </Stack.Item>
-      <Stack.Item style={{width: '100%'}}>
-        <Stack direction="row" style={{width: '100%'}} spacing={'0.5rem'}>
-          <Stack.Item style={{width: '33%'}}>
-            <NumberInput
-              label="Nb contrôles"
-              name="amountOfControls"
-              value={data?.amountOfControls}
-              max={maxAmountOfControls}
-              isLight={true}
-              onChange={(nextValue?: number) => onChange('amountOfControls', nextValue)}
-            />
-          </Stack.Item>
-          <Stack.Item style={{width: '67%'}}>
-            <TextInput
-              label="Observations (hors infraction)"
-              name="observations"
-              isLight={true}
-              value={observationsValue}
-              onChange={handleObservationsChange}
-              onBlur={handleObservationsBlur}
-            />
-          </Stack.Item>
+    return (
+        <Stack direction="column" alignItems="flex-start" spacing={'0.5rem'} style={{width: '100%'}}>
+            <Stack.Item style={{width: '100%'}}>
+                <ControlTitleCheckbox
+                    controlType={controlType}
+                    checked={!!data || shouldCompleteControl}
+                    shouldCompleteControl={!!shouldCompleteControl && !!!data}
+                    onChange={(isChecked: boolean) => toggleControl(isChecked)}
+                />
+            </Stack.Item>
+            <Stack.Item style={{width: '100%'}}>
+                <Stack direction="row" style={{width: '100%'}} spacing={'0.5rem'}>
+                    <Stack.Item style={{width: '33%'}}>
+                        <NumberInput
+                            label="Nb contrôles"
+                            name="amountOfControls"
+                            value={data?.amountOfControls}
+                            max={maxAmountOfControls}
+                            isLight={true}
+                            onChange={(nextValue?: number) => onChange('amountOfControls', nextValue)}
+                        />
+                    </Stack.Item>
+                    <Stack.Item style={{width: '67%'}}>
+                        <TextInput
+                            label="Observations (hors infraction)"
+                            name="observations"
+                            isLight={true}
+                            value={observationsValue}
+                            onChange={handleObservationsChange}
+                            onBlur={handleObservationsBlur}
+                        />
+                    </Stack.Item>
+                </Stack>
+            </Stack.Item>
         </Stack>
-      </Stack.Item>
-    </Stack>
-  )
+    )
 }
 
 export default EnvControlForm
diff --git a/frontend/src/pam/mission/crew/mission-crew.tsx b/frontend/src/pam/mission/crew/mission-crew.tsx
index 859c07b7..34e480b0 100644
--- a/frontend/src/pam/mission/crew/mission-crew.tsx
+++ b/frontend/src/pam/mission/crew/mission-crew.tsx
@@ -15,186 +15,186 @@ interface MissionCrewProps {
 }
 
 const MissionCrew: React.FC<MissionCrewProps> = () => {
-  const {missionId} = useParams()
+    const {missionId} = useParams()
 
-  const {data: agentRoles, agentRolesLoading, agentRolesError} = useAgentRoles()
-  const {data: agents, agentsLoading, agentsError} = useAgentsByUserService()
-  const {data: crew, crewLoading, crewError} = useMissionCrew(missionId!)
-  const [addOrUpdateCrew, {updateData, updateLoading, updateError}] = useAddOrUpdateMissionCrew()
-  const [deleteCrew, {deleteData, deleteLoading, deleteError}] = useDeleteMissionCrew()
+    const {data: agentRoles} = useAgentRoles()
+    const {data: agents} = useAgentsByUserService()
+    const {data: crew} = useMissionCrew(missionId!)
+    const [addOrUpdateCrew] = useAddOrUpdateMissionCrew()
+    const [deleteCrew] = useDeleteMissionCrew()
 
-  const [crewList, setCrewList] = useState<MissionCrewModel[] | undefined>(crew)
-  const [hideAddButton, setHideAddButton] = useState<boolean>(false)
+    const [crewList, setCrewList] = useState<MissionCrewModel[] | undefined>(crew)
+    const [hideAddButton, setHideAddButton] = useState<boolean>(false)
 
-  // refresh the crew var after a mutation's refetchQuery
-  useEffect(() => {
-    setCrewList(crew)
-  }, [crew])
+    // refresh the crew var after a mutation's refetchQuery
+    useEffect(() => {
+        setCrewList(crew)
+    }, [crew])
 
-  const onClickAddCrewMember = () => {
-    setCrewList([...(crewList || []), {} as MissionCrewModel])
-    setHideAddButton(true)
-  }
-
-  const onDeleteCrewMember = async (id?: string) => {
-    if (!id) {
-      // delete crew being added
-      setCrewList(crew)
-      setHideAddButton(false)
-    } else {
-      // delete exising crew
-      await deleteCrew({variables: {id}})
+    const onClickAddCrewMember = () => {
+        setCrewList([...(crewList || []), {} as MissionCrewModel])
+        setHideAddButton(true)
     }
-  }
 
-  const updateExistingCrew = async (missionCrew: MissionCrewModel, field?: string, value?: any) => {
-    let data: AddOrUpdateMissionCrewInput = {
-      missionId,
-      ...omit(missionCrew, '__typename'),
-      agent: omit(missionCrew.agent, '__typename'),
-      role: omit(missionCrew.role, '__typename')
-    }
-    if (field === 'agent') {
-      data = {
-        ...data,
-        [field]: omit(
-          agents?.find((agent: Agent) => agent.id === value),
-          '__typename'
-        )
-      }
-    } else if (field === 'role') {
-      data = {
-        ...data,
-        [field]: omit(
-          agentRoles?.find((role: AgentRole) => role.id === value),
-          '__typename'
-        )
-      }
+    const onDeleteCrewMember = async (id?: string) => {
+        if (!id) {
+            // delete crew being added
+            setCrewList(crew)
+            setHideAddButton(false)
+        } else {
+            // delete exising crew
+            await deleteCrew({variables: {id}})
+        }
     }
 
-    await addOrUpdateCrew({variables: {crew: data}})
-  }
+    const updateExistingCrew = async (missionCrew: MissionCrewModel, field?: string, value?: any) => {
+        let data: AddOrUpdateMissionCrewInput = {
+            missionId,
+            ...omit(missionCrew, '__typename'),
+            agent: omit(missionCrew.agent, '__typename'),
+            role: omit(missionCrew.role, '__typename')
+        }
+        if (field === 'agent') {
+            data = {
+                ...data,
+                [field]: omit(
+                    agents?.find((agent: Agent) => agent.id === value),
+                    '__typename'
+                )
+            }
+        } else if (field === 'role') {
+            data = {
+                ...data,
+                [field]: omit(
+                    agentRoles?.find((role: AgentRole) => role.id === value),
+                    '__typename'
+                )
+            }
+        }
 
-  const addNewCrew = async (field?: string, value?: any) => {
-    const newCrew = crewList?.[crewList?.length - 1] || ({} as MissionCrewModel)
-    if (field === 'agent') {
-      newCrew.agent = omit(
-        agents?.find((agent: Agent) => agent.id === value),
-        '__typename'
-      )
-      setCrewList([...(crewList?.slice(0, -1) || []), newCrew])
-    } else if (field === 'role') {
-      newCrew.role = omit(
-        agentRoles?.find((role: AgentRole) => role.id === value),
-        '__typename'
-      )
-      const data: AddOrUpdateMissionCrewInput = {
-        missionId,
-        agent: newCrew.agent,
-        role: newCrew.role
-      }
-      await addOrUpdateCrew({variables: {crew: data}})
-      setHideAddButton(false)
+        await addOrUpdateCrew({variables: {crew: data}})
     }
-  }
 
-  const onChange = async (missionCrew: MissionCrewModel, field?: string, value?: any) => {
-    if (field === 'agent' && !value) {
-      return
+    const addNewCrew = async (field?: string, value?: any) => {
+        const newCrew = crewList?.[crewList?.length - 1] || ({} as MissionCrewModel)
+        if (field === 'agent') {
+            newCrew.agent = omit(
+                agents?.find((agent: Agent) => agent.id === value),
+                '__typename'
+            )
+            setCrewList([...(crewList?.slice(0, -1) || []), newCrew])
+        } else if (field === 'role') {
+            newCrew.role = omit(
+                agentRoles?.find((role: AgentRole) => role.id === value),
+                '__typename'
+            )
+            const data: AddOrUpdateMissionCrewInput = {
+                missionId,
+                agent: newCrew.agent,
+                role: newCrew.role
+            }
+            await addOrUpdateCrew({variables: {crew: data}})
+            setHideAddButton(false)
+        }
     }
-    if (missionCrew.id) {
-      // case: crew member already exists
-      updateExistingCrew(missionCrew, field, value)
-    } else {
-      // case: new crew member being created
-      addNewCrew(field, value)
+
+    const onChange = async (missionCrew: MissionCrewModel, field?: string, value?: any) => {
+        if (field === 'agent' && !value) {
+            return
+        }
+        if (missionCrew.id) {
+            // case: crew member already exists
+            updateExistingCrew(missionCrew, field, value)
+        } else {
+            // case: new crew member being created
+            addNewCrew(field, value)
+        }
     }
-  }
 
-  return (
-    <>
-      <Label>Equipage à bord</Label>
-      <Stack direction="column" alignItems="flex-start" spacing="0.25rem" style={{width: '100%'}}>
-        {!!!crewList || !crewList.length ? (
-          <Stack.Item style={{width: '100%', backgroundColor: THEME.color.gainsboro, padding: '0.5rem'}}>
-            <Text as="h3">Aucun membre d'équipage renseigné</Text>
-          </Stack.Item>
-        ) : (
-          crewList?.map((crew: MissionCrewModel) => (
-            <Stack.Item key={crew.id} style={{width: '100%', backgroundColor: THEME.color.gainsboro}}>
-              <Stack
-                direction="row"
-                alignItems="flex-start"
-                spacing="1rem"
-                style={{width: '100%', backgroundColor: THEME.color.gainsboro, padding: '0.5rem'}}
-              >
-                <Stack.Item style={{flex: 1}}>
-                  <Select
-                    name="agent"
-                    label="Identité"
-                    isLight={true}
-                    value={crew?.agent?.id}
-                    options={
-                      (agents?.map((agent: Agent) => ({
-                        value: agent.id,
-                        label: [agent.firstName, agent.lastName].join(' ')
-                      })) as any) || []
-                    }
-                    disabledItemValues={crewList.map(crew => crew.agent?.id).filter(Boolean) as string[]}
-                    onChange={(nextValue?: string) => onChange(crew, 'agent', nextValue)}
-                  />
-                </Stack.Item>
-                <Stack.Item style={{flex: 1}}>
-                  <Select
-                    label="Fonction"
-                    name="role"
-                    isLight={true}
-                    value={crew?.role?.id}
-                    options={agentRoles?.map(({id, title}) => ({value: id, label: title})) as any}
-                    disabled={!crew?.agent?.lastName}
-                    onChange={(nextValue?: string) => onChange(crew, 'role', nextValue)}
-                  />
-                </Stack.Item>
-                <Stack.Item style={{flex: 0}} alignSelf="center">
-                  <Label>&nbsp;</Label> {/*  fake label to align the icon with the fields */}
-                  <Dropdown
-                    Icon={Icon.More}
-                    accent={Accent.SECONDARY}
-                    onSelect={function noRefCheck() {
-                    }}
-                    title=""
-                    placement="bottomEnd"
-                  >
-                    <Dropdown.Item
-                      eventKey="DELETE"
-                      onClick={() => onDeleteCrewMember(crew?.id)}
-                      style={{backgroundColor: THEME.color.white}}
-                    >
-                      Supprimer le membre
-                    </Dropdown.Item>
-                  </Dropdown>
-                </Stack.Item>
-              </Stack>
-            </Stack.Item>
-          ))
-        )}
-        {!hideAddButton && (
-          <Stack.Item>
-            <Button
-              onClick={() => onClickAddCrewMember()}
-              accent={Accent.SECONDARY}
-              size={Size.NORMAL}
-              Icon={Icon.Plus}
-              role="add-crew-member-button"
-              isFullWidth={false}
-            >
-              Ajouter un membre d’équipage
-            </Button>
-          </Stack.Item>
-        )}
-      </Stack>
-    </>
-  )
+    return (
+        <>
+            <Label>Equipage à bord</Label>
+            <Stack direction="column" alignItems="flex-start" spacing="0.25rem" style={{width: '100%'}}>
+                {!!!crewList || !crewList.length ? (
+                    <Stack.Item style={{width: '100%', backgroundColor: THEME.color.gainsboro, padding: '0.5rem'}}>
+                        <Text as="h3">Aucun membre d'équipage renseigné</Text>
+                    </Stack.Item>
+                ) : (
+                    crewList?.map((crew: MissionCrewModel) => (
+                        <Stack.Item key={crew.id} style={{width: '100%', backgroundColor: THEME.color.gainsboro}}>
+                            <Stack
+                                direction="row"
+                                alignItems="flex-start"
+                                spacing="1rem"
+                                style={{width: '100%', backgroundColor: THEME.color.gainsboro, padding: '0.5rem'}}
+                            >
+                                <Stack.Item style={{flex: 1}}>
+                                    <Select
+                                        name="agent"
+                                        label="Identité"
+                                        isLight={true}
+                                        value={crew?.agent?.id}
+                                        options={
+                                            (agents?.map((agent: Agent) => ({
+                                                value: agent.id,
+                                                label: [agent.firstName, agent.lastName].join(' ')
+                                            })) as any) || []
+                                        }
+                                        disabledItemValues={crewList.map(crew => crew.agent?.id).filter(Boolean) as string[]}
+                                        onChange={(nextValue?: string) => onChange(crew, 'agent', nextValue)}
+                                    />
+                                </Stack.Item>
+                                <Stack.Item style={{flex: 1}}>
+                                    <Select
+                                        label="Fonction"
+                                        name="role"
+                                        isLight={true}
+                                        value={crew?.role?.id}
+                                        options={agentRoles?.map(({id, title}) => ({value: id, label: title})) as any}
+                                        disabled={!crew?.agent?.lastName}
+                                        onChange={(nextValue?: string) => onChange(crew, 'role', nextValue)}
+                                    />
+                                </Stack.Item>
+                                <Stack.Item style={{flex: 0}} alignSelf="center">
+                                    <Label>&nbsp;</Label> {/*  fake label to align the icon with the fields */}
+                                    <Dropdown
+                                        Icon={Icon.More}
+                                        accent={Accent.SECONDARY}
+                                        onSelect={function noRefCheck() {
+                                        }}
+                                        title=""
+                                        placement="bottomEnd"
+                                    >
+                                        <Dropdown.Item
+                                            eventKey="DELETE"
+                                            onClick={() => onDeleteCrewMember(crew?.id)}
+                                            style={{backgroundColor: THEME.color.white}}
+                                        >
+                                            Supprimer le membre
+                                        </Dropdown.Item>
+                                    </Dropdown>
+                                </Stack.Item>
+                            </Stack>
+                        </Stack.Item>
+                    ))
+                )}
+                {!hideAddButton && (
+                    <Stack.Item>
+                        <Button
+                            onClick={() => onClickAddCrewMember()}
+                            accent={Accent.SECONDARY}
+                            size={Size.NORMAL}
+                            Icon={Icon.Plus}
+                            role="add-crew-member-button"
+                            isFullWidth={false}
+                        >
+                            Ajouter un membre d’équipage
+                        </Button>
+                    </Stack.Item>
+                )}
+            </Stack>
+        </>
+    )
 }
 
 export default MissionCrew
diff --git a/frontend/src/pam/mission/infractions/env-infraction-add-new-target.tsx b/frontend/src/pam/mission/infractions/env-infraction-add-new-target.tsx
new file mode 100644
index 00000000..b525cd54
--- /dev/null
+++ b/frontend/src/pam/mission/infractions/env-infraction-add-new-target.tsx
@@ -0,0 +1,98 @@
+import React, { useState } from 'react'
+import { Accent, Button, Icon, Size, THEME } from '@mtes-mct/monitor-ui'
+import { ControlType } from '../../../types/control-types'
+import { Infraction, InfractionEnvNewTarget } from '../../../types/infraction-types'
+import { MUTATION_ADD_OR_UPDATE_INFRACTION_ENV } from '../queries'
+import { useMutation } from '@apollo/client'
+import { useParams } from 'react-router-dom'
+import omit from 'lodash/omit'
+import { Stack } from 'rsuite'
+import EnvInfractionTargetAddedByUnitForm from './env-infraction-target-added-by-unit-form.tsx'
+import { GET_MISSION_TIMELINE } from "../timeline/use-mission-timeline.tsx";
+import { GET_ACTION_BY_ID } from "../actions/use-action-by-id.tsx";
+
+export interface EnvInfractionNewTargetProps {
+    availableControlTypesForInfraction?: ControlType[]
+    infractions?: Infraction[]
+}
+
+const EnvInfractionAddNewTarget: React.FC<EnvInfractionNewTargetProps> = ({availableControlTypesForInfraction}) => {
+    const {missionId, actionId} = useParams()
+
+    const [showInfractionForNewTarget, setShowInfractionForNewTarget] = useState<boolean>(false)
+
+    const [formData, setFormData] = useState<Infraction | undefined>(undefined) // only 1 infraction for nav and fish
+
+    const onChangeFormField = (field: string, value: any) => {
+        setFormData((prevData: any) => ({...(prevData || {}), [field]: value}))
+    }
+
+    const onChangeTargetFormField = (field: string, value: any) => {
+        setFormData((prevData: any) => ({...(prevData || {}), target: {...(prevData || {}).target, [field]: value}}))
+    }
+
+    const [mutate] = useMutation(MUTATION_ADD_OR_UPDATE_INFRACTION_ENV, {
+        refetchQueries: [GET_MISSION_TIMELINE, GET_ACTION_BY_ID]
+    })
+
+    const onSubmit = async (e: React.FormEvent, infraction?: Infraction) => {
+        e.preventDefault()
+        const mutationData = {
+            ...omit(infraction, '__typename', 'target'),
+            id: infraction?.id,
+            missionId,
+            actionId,
+            // controlType: infraction?.controlType,
+            vesselType: infraction?.target?.vesselType,
+            vesselSize: infraction?.target?.vesselSize,
+            vesselIdentifier: infraction?.target?.vesselIdentifier,
+            identityControlledPerson: infraction?.target?.identityControlledPerson
+            // controlId,
+            // controlType
+        } as unknown as InfractionEnvNewTarget
+
+        await mutate({variables: {infraction: mutationData}})
+        setShowInfractionForNewTarget(false)
+    }
+
+    return (
+        <>
+            {showInfractionForNewTarget ? (
+                <div style={{
+                    width: '100%',
+                    backgroundColor: THEME.color.white,
+                    padding: '1rem'
+                }}>
+                    <form
+                        onSubmit={(e: React.FormEvent) => onSubmit(e, formData)}>
+                        <EnvInfractionTargetAddedByUnitForm
+                            infraction={formData}
+                            onChange={onChangeFormField}
+                            onChangeTarget={onChangeTargetFormField}
+                            availableControlTypesForInfraction={availableControlTypesForInfraction}
+                            onCancel={() => {
+                                setFormData(undefined)
+                                setShowInfractionForNewTarget(false)
+                            }}
+                        />
+                    </form>
+                </div>
+            ) : (
+                <Stack justifyContent="flex-end">
+                    <Stack.Item>
+                        <Button
+                            onClick={() => setShowInfractionForNewTarget(true)}
+                            accent={Accent.SECONDARY}
+                            size={Size.NORMAL}
+                            Icon={Icon.Plus}
+                        >
+                            Ajouter une nouvelle cible avec infraction
+                        </Button>
+                    </Stack.Item>
+                </Stack>
+            )}
+        </>
+    )
+}
+
+export default EnvInfractionAddNewTarget
diff --git a/frontend/src/pam/mission/infractions/env-infraction-existing-target-form.tsx b/frontend/src/pam/mission/infractions/env-infraction-existing-target-form.tsx
deleted file mode 100644
index 486964bb..00000000
--- a/frontend/src/pam/mission/infractions/env-infraction-existing-target-form.tsx
+++ /dev/null
@@ -1,180 +0,0 @@
-import React from 'react'
-import { Stack } from 'rsuite'
-import { Checkbox, Legend, MultiRadio, Select, THEME } from '@mtes-mct/monitor-ui'
-import { ControlType } from '../../../types/control-types'
-import { Infraction, InfractionByTarget } from '../../../types/infraction-types'
-import InfractionForm from './infraction-form'
-import {
-  controlTitle,
-  getDisabledControlTypes,
-  vesselSizeToHumanString,
-  vesselTypeToHumanString
-} from '../controls/utils'
-import Text from '../../../ui/text'
-import { formalNoticeLabels, infractionTypeLabels, transformFormatToOptions } from '../../../types/env-mission-types'
-import NatinfsFullNameList from "./natinfs-fullname-list.tsx";
-
-const CONTROL_TYPE_OPTIONS = [
-  {
-    label: `Infraction - ${controlTitle(ControlType.ADMINISTRATIVE)}`,
-    value: ControlType.ADMINISTRATIVE
-  },
-  {
-    label: `Infraction - ${controlTitle(ControlType.SECURITY)}`,
-    value: ControlType.SECURITY
-  },
-  {
-    label: `Infraction - ${controlTitle(ControlType.NAVIGATION)}`,
-    value: ControlType.NAVIGATION
-  },
-  {
-    label: `Infraction - ${controlTitle(ControlType.GENS_DE_MER)}`,
-    value: ControlType.GENS_DE_MER
-  }
-]
-
-interface EnvInfractionNewTargetFormProps {
-  infraction?: InfractionByTarget
-  formData?: Infraction
-  availableControlTypesForInfraction?: ControlType[]
-  targetAddedInRapportNav?: boolean
-  onChange: (field: string, value: any) => void
-  onCancel: () => void
-}
-
-const EnvInfractionNewTargetForm: React.FC<EnvInfractionNewTargetFormProps> = ({
-                                                                                 infraction,
-                                                                                 formData,
-                                                                                 availableControlTypesForInfraction,
-                                                                                 targetAddedInRapportNav,
-                                                                                 onChange,
-                                                                                 onCancel
-                                                                               }) => {
-
-  return (
-    <Stack direction="column" spacing={'2rem'} style={{width: '100%', padding: '1rem'}}>
-      <Stack.Item style={{width: '100%'}}>
-        <Stack direction="row" spacing={'2rem'} style={{width: '100%'}}>
-          <Stack.Item style={{width: '100%'}}>
-            <Legend>Immatriculation</Legend>
-            <Text as="h3" weight="medium">
-              {formData?.target?.vesselIdentifier}
-            </Text>
-          </Stack.Item>
-          <Stack.Item style={{width: '100%'}}>
-            <Legend>Type de navire</Legend>
-            <Text as="h3" weight="medium">
-              {vesselTypeToHumanString(formData?.target?.vesselType)}
-            </Text>
-          </Stack.Item>
-          <Stack.Item style={{width: '100%'}}>
-            <Legend>Taille du navire</Legend>
-            <Text as="h3" weight="medium">
-              {vesselSizeToHumanString(formData?.target?.vesselSize)}
-            </Text>
-          </Stack.Item>
-        </Stack>
-      </Stack.Item>
-      <Stack.Item style={{width: '100%'}}>
-        <Legend>Identité de la personne contrôlée</Legend>
-        <Text as="h3" weight="medium">
-          {formData?.target?.identityControlledPerson}
-        </Text>
-      </Stack.Item>
-      {
-        !targetAddedInRapportNav && (
-          <Stack.Item style={{width: '100%'}}>
-            <MultiRadio
-              isReadOnly={true}
-              isInline
-              value={formData?.target?.infractionType}
-              label="Type d'infraction"
-              name="infractionType"
-              options={transformFormatToOptions(infractionTypeLabels)}
-            />
-          </Stack.Item>
-        )
-      }
-      {
-        !targetAddedInRapportNav && (
-          <Stack.Item style={{width: '100%'}}>
-            <MultiRadio
-              isReadOnly={true}
-              isInline
-              value={formData?.target?.formalNotice}
-              label="Mise en demeure"
-              name="formalNotice"
-              options={transformFormatToOptions(formalNoticeLabels)}
-            />
-          </Stack.Item>
-        )
-      }
-
-      {
-        !targetAddedInRapportNav && (
-          <Stack.Item style={{width: '100%'}}>
-            <Legend>NATINF</Legend>
-            <NatinfsFullNameList natinfs={infraction?.infractions[0]?.natinfs}/>
-          </Stack.Item>
-        )
-      }
-
-      {
-        !targetAddedInRapportNav && (
-          <Stack.Item style={{width: '100%'}}>
-            <Stack direction="row" spacing={'2rem'}>
-              <Stack.Item>
-                <Legend>Tribunal compétent</Legend>
-                <Text as="h3" weight="medium">
-                  {formData?.target?.relevantCourt || '--'}
-                </Text>
-              </Stack.Item>
-              <Stack.Item>
-                <Legend>&nbsp;</Legend>
-                <Checkbox value={!!formData?.target?.toProcess} label="À traiter"/>
-              </Stack.Item>
-            </Stack>
-          </Stack.Item>
-        )
-      }
-      {
-        !targetAddedInRapportNav && (
-          <Stack.Item style={{width: '100%'}}>
-            <Legend>Observations</Legend>
-            <Text as="h3" weight="medium">
-              {formData?.target?.observations ?? '--'}
-            </Text>
-          </Stack.Item>
-        )
-      }
-      <Stack.Item style={{width: '100%'}}>
-        <Legend>Ajout d’une infraction pour cette cible</Legend>
-        <Stack
-          direction="column"
-          spacing={'2rem'}
-          style={{width: '100%', backgroundColor: THEME.color.cultured, padding: '2rem'}}
-        >
-          <Stack.Item style={{width: '100%'}}>
-            <Select
-              label="Type de contrôle avec infraction"
-              options={CONTROL_TYPE_OPTIONS}
-              disabledItemValues={getDisabledControlTypes(availableControlTypesForInfraction)}
-              value={formData?.controlType}
-              name="controlType"
-              onChange={(nextValue: OptionValue) => onChange('controlType', nextValue)}
-            />
-          </Stack.Item>
-          <Stack.Item style={{width: '100%'}}>
-            <InfractionForm
-              infraction={formData}
-              onChange={onChange}
-              onCancel={onCancel}
-            />
-          </Stack.Item>
-        </Stack>
-      </Stack.Item>
-    </Stack>
-  )
-}
-
-export default EnvInfractionNewTargetForm
diff --git a/frontend/src/pam/mission/infractions/env-infraction-existing-target.tsx b/frontend/src/pam/mission/infractions/env-infraction-existing-target.tsx
deleted file mode 100644
index 21cedffe..00000000
--- a/frontend/src/pam/mission/infractions/env-infraction-existing-target.tsx
+++ /dev/null
@@ -1,116 +0,0 @@
-import React, { useState } from 'react'
-import { THEME } from '@mtes-mct/monitor-ui'
-import { ControlType } from '../../../types/control-types'
-import { Infraction, InfractionByTarget, InfractionEnvNewTarget } from '../../../types/infraction-types'
-import { MUTATION_ADD_OR_UPDATE_INFRACTION_ENV, MUTATION_DELETE_INFRACTION } from '../queries'
-import { useMutation } from '@apollo/client'
-import { useParams } from 'react-router-dom'
-import omit from 'lodash/omit'
-import EnvInfractionSummary from './env-infraction-summary'
-import EnvInfractionExistingTargetForm from './env-infraction-existing-target-form'
-import { GET_MISSION_TIMELINE } from "../timeline/use-mission-timeline.tsx";
-
-export interface EnvInfractionExistingTargetProps {
-  availableControlTypesForInfraction?: ControlType[]
-  infractionsByTarget?: InfractionByTarget[]
-}
-
-const EnvInfractionExistingTarget: React.FC<EnvInfractionExistingTargetProps> = ({
-                                                                                   availableControlTypesForInfraction,
-                                                                                   infractionsByTarget
-                                                                                 }) => {
-  const {missionId, actionId} = useParams()
-
-  const [selectedVessel, setSelectedVessel] = useState<string | undefined>(undefined)
-
-  const [formData, setFormData] = useState<Infraction | undefined>(undefined) // only 1 infraction for nav and fish
-
-  const [mutate, {mutateData, mutateLoading, mutateError}] = useMutation(MUTATION_ADD_OR_UPDATE_INFRACTION_ENV, {
-    refetchQueries: [GET_MISSION_TIMELINE]
-  })
-
-  const [deleteMutation] = useMutation(MUTATION_DELETE_INFRACTION, {
-    refetchQueries: [GET_MISSION_TIMELINE]
-  })
-
-  const onChangeFormField = (field: string, value: any) => {
-    setFormData((prevData: any) => ({...prevData, [field]: value}))
-  }
-
-  const onSubmit = async (e: React.FormEvent, infraction?: Infraction) => {
-    e.preventDefault()
-    const mutationData = {
-      ...omit(infraction, '__typename', 'target'),
-      id: infraction?.id,
-      missionId,
-      actionId,
-      // controlType: infraction?.controlType,
-      vesselType: infraction?.target?.vesselType,
-      vesselSize: infraction?.target?.vesselSize,
-      vesselIdentifier: infraction?.target?.vesselIdentifier,
-      identityControlledPerson: infraction?.target?.identityControlledPerson
-      // controlId,
-      // controlType
-    } as unknown as InfractionEnvNewTarget
-
-    await mutate({variables: {infraction: mutationData}})
-    setSelectedVessel(undefined)
-  }
-
-  const deleteInfraction = async (infractionId: string) => {
-    await deleteMutation({
-      variables: {
-        id: infractionId
-      }
-    })
-  }
-
-  return (
-    <>
-      {!!infractionsByTarget?.length &&
-        infractionsByTarget?.map((infractionByTarget: InfractionByTarget) => (
-          <div key={infractionByTarget.vesselIdentifier} style={{
-            width: '100%',
-            backgroundColor: THEME.color.white,
-            padding: '1rem',
-            marginBottom: '0.25rem'
-          }}>
-            {selectedVessel === infractionByTarget.vesselIdentifier ? (
-              <>
-                <form onSubmit={(e: React.FormEvent) => onSubmit(e, formData)}>
-                  <EnvInfractionExistingTargetForm
-                    infraction={infractionByTarget}
-                    formData={formData}
-                    onChange={onChangeFormField}
-                    onCancel={() => {
-                      setFormData(undefined)
-                      setSelectedVessel(undefined)
-                    }}
-                    targetAddedInRapportNav={infractionByTarget.targetAddedInRapportNav}
-                    availableControlTypesForInfraction={
-                      availableControlTypesForInfraction?.filter(controlType => !infractionByTarget.controlTypesWithInfraction?.includes(controlType))
-                    }
-                  />
-                </form>
-              </>
-            ) : (
-              <EnvInfractionSummary
-                infractionByTarget={infractionByTarget}
-                onAddInfractionForTarget={(infraction?: Partial<Infraction>) => {
-                  setFormData(infraction as Infraction)
-                  setSelectedVessel(infractionByTarget.vesselIdentifier)
-                }}
-                onEditInfractionForTarget={(infraction: Infraction) => {
-                  setFormData(infraction)
-                  setSelectedVessel(infractionByTarget.vesselIdentifier)
-                }}
-                onDeleteInfraction={(infractionId: string) => deleteInfraction(infractionId)}
-              />
-            )}
-          </div>
-        ))}
-    </>
-  )
-}
-
-export default EnvInfractionExistingTarget
diff --git a/frontend/src/pam/mission/infractions/env-infraction-existing-targets.tsx b/frontend/src/pam/mission/infractions/env-infraction-existing-targets.tsx
new file mode 100644
index 00000000..cf666b72
--- /dev/null
+++ b/frontend/src/pam/mission/infractions/env-infraction-existing-targets.tsx
@@ -0,0 +1,151 @@
+import React, { useState } from 'react'
+import { THEME } from '@mtes-mct/monitor-ui'
+import { ControlType } from '../../../types/control-types'
+import { Infraction, InfractionByTarget, InfractionEnvNewTarget } from '../../../types/infraction-types'
+import { MUTATION_ADD_OR_UPDATE_INFRACTION_ENV, MUTATION_DELETE_INFRACTION } from '../queries'
+import { useMutation } from '@apollo/client'
+import { useParams } from 'react-router-dom'
+import omit from 'lodash/omit'
+import EnvInfractionSummary from './env-infraction-summary'
+import { GET_MISSION_TIMELINE } from "../timeline/use-mission-timeline.tsx";
+import EnvInfractionTargetAddedByCacemForm from "./env-infraction-target-added-by-cacem-form.tsx";
+import EnvInfractionTargetAddedByUnitForm from "./env-infraction-target-added-by-unit-form.tsx";
+import { GET_ACTION_BY_ID } from "../actions/use-action-by-id.tsx";
+import Text from '../../../ui/text'
+
+
+export interface EnvInfractionExistingTargetProps {
+    availableControlTypesForInfraction?: ControlType[]
+    infractionsByTarget?: InfractionByTarget[]
+}
+
+const EnvInfractionExistingTargets: React.FC<EnvInfractionExistingTargetProps> = ({
+                                                                                      availableControlTypesForInfraction,
+                                                                                      infractionsByTarget
+                                                                                  }) => {
+    const {missionId, actionId} = useParams()
+
+    const [selectedVessel, setSelectedVessel] = useState<string | undefined>(undefined)
+
+    const [formData, setFormData] = useState<Infraction | undefined>(undefined) // only 1 infraction for nav and fish
+
+    const [mutate, {error: updateError}] = useMutation(MUTATION_ADD_OR_UPDATE_INFRACTION_ENV, {
+        refetchQueries: [GET_MISSION_TIMELINE, GET_ACTION_BY_ID]
+    })
+
+    const [deleteMutation] = useMutation(MUTATION_DELETE_INFRACTION, {
+        refetchQueries: [GET_MISSION_TIMELINE, GET_ACTION_BY_ID]
+    })
+
+    const onChangeFormField = (field: string, value: any) => {
+        setFormData((prevData: any) => ({...prevData, [field]: value}))
+    }
+
+    const onChangeTargetFormField = (field: string, value: any) => {
+        setFormData((prevData: any) => ({...prevData, target: {...prevData.target, [field]: value}}))
+    }
+
+    const onSubmit = async (e: React.FormEvent, infraction?: Infraction) => {
+        e.preventDefault()
+        const mutationData = {
+            ...omit(infraction, '__typename', 'target'),
+            id: infraction?.id,
+            missionId,
+            actionId,
+            // controlType: infraction?.controlType,
+            vesselType: infraction?.target?.vesselType,
+            vesselSize: infraction?.target?.vesselSize,
+            vesselIdentifier: infraction?.target?.vesselIdentifier,
+            identityControlledPerson: infraction?.target?.identityControlledPerson
+            // controlId,
+            // controlType
+        } as unknown as InfractionEnvNewTarget
+        await mutate({variables: {infraction: mutationData}})
+        setSelectedVessel(undefined)
+    }
+
+    const deleteInfraction = async (infractionId: string) => {
+        await deleteMutation({
+            variables: {
+                id: infractionId
+            }
+        })
+    }
+
+    return (
+        <>
+            {!!infractionsByTarget?.length &&
+                infractionsByTarget?.map((infractionByTarget: InfractionByTarget, i: number) => (
+                    <div key={infractionByTarget.vesselIdentifier} style={{
+                        width: '100%',
+                        backgroundColor: THEME.color.white,
+                        padding: '1rem',
+                        marginBottom: '0.25rem'
+                    }}>
+                        {selectedVessel === infractionByTarget.vesselIdentifier ? (
+                            <>
+
+                                <form onSubmit={(e: React.FormEvent) => onSubmit(e, formData)}>
+                                    {
+                                        infractionByTarget.targetAddedByUnit ? (
+                                                <EnvInfractionTargetAddedByUnitForm
+                                                    infraction={formData}
+                                                    onChange={onChangeFormField}
+                                                    onChangeTarget={onChangeTargetFormField}
+                                                    availableControlTypesForInfraction={
+                                                        availableControlTypesForInfraction?.filter(controlType => !infractionByTarget.controlTypesWithInfraction?.includes(controlType))
+                                                    }
+                                                    onCancel={() => {
+                                                        setFormData(undefined)
+                                                        setSelectedVessel(undefined)
+                                                    }}
+                                                />
+
+                                            )
+
+                                            : (
+                                                <EnvInfractionTargetAddedByCacemForm
+                                                    infraction={infractionByTarget}
+                                                    formData={formData}
+                                                    onChange={onChangeFormField}
+                                                    onCancel={() => {
+                                                        setFormData(undefined)
+                                                        setSelectedVessel(undefined)
+                                                    }}
+                                                    availableControlTypesForInfraction={
+                                                        availableControlTypesForInfraction?.filter(controlType => !infractionByTarget.controlTypesWithInfraction?.includes(controlType))
+                                                    }
+                                                />
+                                            )
+                                    }
+                                    {
+                                        !!updateError && (
+                                            <div style={{padding: '0 1rem'}}>
+                                                <Text as={'h3'} weight={'medium'}
+                                                      color={THEME.color.maximumRed}>ERREUR: {updateError?.message}</Text>
+                                            </div>
+                                        )
+                                    }
+                                </form>
+                            </>
+                        ) : (
+                            <EnvInfractionSummary
+                                infractionByTarget={infractionByTarget}
+                                onAddInfractionForTarget={(infraction?: Partial<Infraction>) => {
+                                    setFormData(infraction as Infraction)
+                                    setSelectedVessel(infractionByTarget.vesselIdentifier)
+                                }}
+                                onEditInfractionForTarget={(infraction: Infraction) => {
+                                    setFormData(infraction)
+                                    setSelectedVessel(infractionByTarget.vesselIdentifier)
+                                }}
+                                onDeleteInfraction={(infractionId: string) => deleteInfraction(infractionId)}
+                            />
+                        )}
+                    </div>
+                ))}
+        </>
+    )
+}
+
+export default EnvInfractionExistingTargets
diff --git a/frontend/src/pam/mission/infractions/env-infraction-new-target-form.tsx b/frontend/src/pam/mission/infractions/env-infraction-new-target-form.tsx
deleted file mode 100644
index 106e1cf4..00000000
--- a/frontend/src/pam/mission/infractions/env-infraction-new-target-form.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import React from 'react'
-import { Stack } from 'rsuite'
-import { Select, TextInput } from '@mtes-mct/monitor-ui'
-import { ControlType } from '../../../types/control-types'
-import { InfractionEnvNewTarget } from '../../../types/infraction-types'
-import InfractionForm from './infraction-form'
-import {
-  CONTROL_TYPE_OPTIONS,
-  getDisabledControlTypes,
-  VESSEL_SIZE_OPTIONS,
-  VESSEL_TYPE_OPTIONS
-} from '../controls/utils'
-
-interface EnvInfractionNewTargetFormProps {
-  infraction?: InfractionEnvNewTarget
-  availableControlTypesForInfraction?: ControlType[]
-  availableNatinfs?: string[]
-  onChange: (field: string, value: any) => void
-  onCancel: () => void
-}
-
-const EnvInfractionNewTargetForm: React.FC<EnvInfractionNewTargetFormProps> = ({
-                                                                                 infraction,
-                                                                                 availableControlTypesForInfraction,
-                                                                                 availableNatinfs,
-                                                                                 onChange,
-                                                                                 onCancel
-                                                                               }) => {
-  return (
-    <Stack direction="column" spacing={'2rem'} style={{width: '100%', padding: '1rem'}}>
-      <Stack.Item style={{width: '100%'}}>
-        <Select
-          label="Type de contrôle avec infraction"
-          options={CONTROL_TYPE_OPTIONS}
-          disabledItemValues={getDisabledControlTypes(availableControlTypesForInfraction)}
-          value={infraction?.controlType}
-          name="controlType"
-          onChange={(nextValue: OptionValue) => onChange('controlType', nextValue)}
-        />
-      </Stack.Item>
-      <Stack.Item style={{width: '100%'}}>
-        <Stack direction="column" alignItems="baseline" spacing={'0.5rem'}>
-          <Stack.Item style={{width: '100%'}}>
-            <Stack direction="row" alignItems="baseline" spacing={'0.5rem'}>
-              <Stack.Item style={{width: '40%'}}>
-                <Select
-                  label="Taille du navire"
-                  options={VESSEL_SIZE_OPTIONS}
-                  value={infraction?.vesselSize}
-                  name="vesselSize"
-                  onChange={(nextValue: OptionValue) => onChange('vesselSize', nextValue)}
-                />
-              </Stack.Item>
-              <Stack.Item style={{width: '60%'}}>
-                <Select
-                  label="Type de navire"
-                  options={VESSEL_TYPE_OPTIONS}
-                  value={infraction?.vesselType}
-                  name="vesselType"
-                  onChange={(nextValue: OptionValue) => onChange('vesselType', nextValue)}
-                />
-              </Stack.Item>
-            </Stack>
-          </Stack.Item>
-          <Stack.Item style={{width: '100%'}}>
-            <Stack direction="row" alignItems="baseline" spacing={'0.5rem'}>
-              <Stack.Item style={{width: '40%'}}>
-                <TextInput
-                  label="Immatriculation"
-                  value={infraction?.vesselIdentifier}
-                  name="vesselIdentifier"
-                  onChange={(nextValue?: string) => onChange('vesselIdentifier', nextValue)}
-                />
-              </Stack.Item>
-              <Stack.Item style={{width: '60%'}}>
-                <TextInput
-                  label="Identité de la personne contrôlée"
-                  value={infraction?.identityControlledPerson}
-                  name="identityControlledPerson"
-                  onChange={(nextValue?: string) => onChange('identityControlledPerson', nextValue)}
-                />
-              </Stack.Item>
-            </Stack>
-          </Stack.Item>
-        </Stack>
-      </Stack.Item>
-      <Stack.Item style={{width: '100%'}}>
-        <InfractionForm
-          infraction={infraction}
-          onChange={onChange}
-          onCancel={onCancel}
-        />
-      </Stack.Item>
-    </Stack>
-  )
-}
-
-export default EnvInfractionNewTargetForm
diff --git a/frontend/src/pam/mission/infractions/env-infraction-new-target.tsx b/frontend/src/pam/mission/infractions/env-infraction-new-target.tsx
deleted file mode 100644
index cd336759..00000000
--- a/frontend/src/pam/mission/infractions/env-infraction-new-target.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import React, { useState } from 'react'
-import { Accent, Button, Icon, Size, THEME } from '@mtes-mct/monitor-ui'
-import { ControlType } from '../../../types/control-types'
-import { Infraction, InfractionEnvNewTarget } from '../../../types/infraction-types'
-import { MUTATION_ADD_OR_UPDATE_INFRACTION_ENV } from '../queries'
-import { useMutation } from '@apollo/client'
-import { useParams } from 'react-router-dom'
-import omit from 'lodash/omit'
-import { Stack } from 'rsuite'
-import EnvInfractionNewTargetForm from './env-infraction-new-target-form'
-import { GET_MISSION_TIMELINE } from "../timeline/use-mission-timeline.tsx";
-
-export interface EnvInfractionNewTargetProps {
-  availableControlTypesForInfraction?: ControlType[]
-  infractions?: Infraction[]
-}
-
-const EnvInfractionNewTarget: React.FC<EnvInfractionNewTargetProps> = ({availableControlTypesForInfraction}) => {
-  const {missionId, actionId} = useParams()
-
-  const [showInfractionForNewTarget, setShowInfractionForNewTarget] = useState<boolean>(false)
-
-  const [formData, setFormData] = useState<InfractionEnvNewTarget | undefined>(undefined) // only 1 infraction for nav and fish
-
-  const onChangeFormField = (field: string, value: any) => {
-    setFormData((prevData: any) => ({...prevData, [field]: value}))
-  }
-
-  const [mutate, {
-    mutateData,
-    mutateLoading,
-    mutateError
-  }] = useMutation(MUTATION_ADD_OR_UPDATE_INFRACTION_ENV, {
-    refetchQueries: [GET_MISSION_TIMELINE]
-  })
-
-  const onSubmit = async (e: React.FormEvent, data?: InfractionEnvNewTarget) => {
-    e.preventDefault()
-    const mutationData = {
-      ...omit(data, '__typename'),
-      id: data?.id,
-      missionId,
-      actionId
-      // controlId,
-      // controlType
-    }
-
-    await mutate({variables: {infraction: mutationData}})
-    setShowInfractionForNewTarget(false)
-  }
-
-  return (
-    <>
-      {showInfractionForNewTarget ? (
-        <div style={{
-          width: '100%',
-          backgroundColor: THEME.color.white,
-          padding: '1rem'
-        }}>
-          <form
-            onSubmit={(e: React.FormEvent) => onSubmit(e, formData)}>
-            <EnvInfractionNewTargetForm
-              infraction={formData}
-              onChange={onChangeFormField}
-              availableControlTypesForInfraction={availableControlTypesForInfraction}
-              onCancel={() => {
-                setFormData(undefined)
-                setShowInfractionForNewTarget(false)
-              }}
-            />
-          </form>
-        </div>
-      ) : (
-        <Stack justifyContent="flex-end">
-          <Stack.Item>
-            {' '}
-            <Button
-              onClick={() => setShowInfractionForNewTarget(true)}
-              accent={Accent.SECONDARY}
-              size={Size.NORMAL}
-              Icon={Icon.Plus}
-            >
-              Ajouter une nouvelle cible avec infraction
-            </Button>
-          </Stack.Item>
-        </Stack>
-      )}
-    </>
-  )
-}
-
-export default EnvInfractionNewTarget
diff --git a/frontend/src/pam/mission/infractions/env-infraction-summary.tsx b/frontend/src/pam/mission/infractions/env-infraction-summary.tsx
index c2553f33..e847cf0e 100644
--- a/frontend/src/pam/mission/infractions/env-infraction-summary.tsx
+++ b/frontend/src/pam/mission/infractions/env-infraction-summary.tsx
@@ -8,95 +8,95 @@ import InfractionTypeTag from './infraction-type-tag.tsx'
 import NatinfsTag from "./natinfs-tag.tsx";
 
 interface EnvInfractionSummaryProps {
-  infractionByTarget?: InfractionByTarget
-  onAddInfractionForTarget: (infraction?: Partial<Infraction>) => void
-  onEditInfractionForTarget: (infraction: Infraction) => void
-  onDeleteInfraction: (infractionId: string) => void
+    infractionByTarget?: InfractionByTarget
+    onAddInfractionForTarget: (infraction?: Partial<Infraction>) => void
+    onEditInfractionForTarget: (infraction: Infraction) => void
+    onDeleteInfraction: (infractionId: string) => void
 }
 
 const EnvInfractionSummary: React.FC<EnvInfractionSummaryProps> = ({
-                                                                     infractionByTarget,
-                                                                     onAddInfractionForTarget,
-                                                                     onEditInfractionForTarget,
-                                                                     onDeleteInfraction
+                                                                       infractionByTarget,
+                                                                       onAddInfractionForTarget,
+                                                                       onEditInfractionForTarget,
+                                                                       onDeleteInfraction
                                                                    }) => {
-  return (
-    <Stack direction="column" spacing={'0.5rem'} style={{width: '100%'}}>
-      <Stack.Item style={{width: '100%'}}>
-        <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={'0.5rem'}>
-          <Stack.Item>
-            <Text as="h3" weight="bold" color={THEME.color.gunMetal}>
-              {`${vesselTypeToHumanString(infractionByTarget?.vesselType)} - ${infractionByTarget?.vesselIdentifier}`}
-            </Text>
-          </Stack.Item>
-          <Stack.Item>
-            <Button
-              onClick={() =>
-                onAddInfractionForTarget({
-                  target: infractionByTarget?.infractions?.find(infraction => !!infraction.target)?.target
-                })
-              }
-              accent={Accent.SECONDARY}
-              size={Size.NORMAL}
-              Icon={Icon.Plus}
-            >
-              infraction pour cette cible
-            </Button>
-          </Stack.Item>
-        </Stack>
-      </Stack.Item>
-      {infractionByTarget?.infractions.map((infraction: Infraction) => (
-        <Stack.Item key={infraction.id} style={{width: '100%'}}>
-          <Stack direction="row" spacing={'0.5rem'} justifyContent="space-between">
-            <Stack.Item>
-              <Stack direction="row" spacing={'0.5rem'}>
-                <Stack.Item>
-                  <Text as="h3" weight="bold" color={THEME.color.gunMetal}>
-                    {!infraction?.controlType
-                      ? 'Infraction contrôle de l’environnement'
-                      : controlTitle(infraction.controlType)}
-                  </Text>
-                </Stack.Item>
-                <Stack.Item>
-                  <Stack direction='row' spacing={'0.5rem'}>
+    return (
+        <Stack direction="column" spacing={'0.5rem'} style={{width: '100%'}}>
+            <Stack.Item style={{width: '100%'}}>
+                <Stack direction="row" alignItems="center" justifyContent="space-between" spacing={'0.5rem'}>
                     <Stack.Item>
-                      <InfractionTypeTag type={infraction.infractionType}/>
+                        <Text as="h3" weight="bold" color={THEME.color.gunMetal}>
+                            {`${vesselTypeToHumanString(infractionByTarget?.vesselType)} - ${infractionByTarget?.vesselIdentifier}`}
+                        </Text>
                     </Stack.Item>
                     <Stack.Item>
-                      <NatinfsTag natinfs={infraction.natinfs}/>
+                        <Button
+                            onClick={() =>
+                                onAddInfractionForTarget({
+                                    target: infractionByTarget?.infractions?.find(infraction => !!infraction.target)?.target
+                                })
+                            }
+                            accent={Accent.SECONDARY}
+                            size={Size.NORMAL}
+                            Icon={Icon.Plus}
+                        >
+                            infraction pour cette cible
+                        </Button>
                     </Stack.Item>
-                  </Stack>
-                </Stack.Item>
-              </Stack>
-            </Stack.Item>
-            {infraction.controlType !== null && (
-              <Stack.Item>
-                <Stack direction="row" alignItems="baseline" spacing={'0.5rem'}>
-                  <Stack.Item>
-                    <IconButton
-                      Icon={Icon.EditUnbordered}
-                      accent={Accent.SECONDARY}
-                      size={Size.NORMAL}
-                      role="edit-infraction"
-                      onClick={() => onEditInfractionForTarget(infraction)}
-                    />
-                  </Stack.Item>
-                  <Stack.Item>
-                    <IconButton
-                      Icon={Icon.Delete}
-                      accent={Accent.SECONDARY}
-                      size={Size.NORMAL}
-                      onClick={() => onDeleteInfraction(infraction.id)}
-                    />
-                  </Stack.Item>
                 </Stack>
-              </Stack.Item>
-            )}
-          </Stack>
-        </Stack.Item>
-      ))}
-    </Stack>
-  )
+            </Stack.Item>
+            {infractionByTarget?.infractions.map((infraction: Infraction) => (
+                <Stack.Item key={infraction.id} style={{width: '100%'}}>
+                    <Stack direction="row" spacing={'0.5rem'} justifyContent="space-between">
+                        <Stack.Item>
+                            <Stack direction="row" spacing={'0.5rem'} wrap={true}>
+                                <Stack.Item>
+                                    <Text as="h3" weight="bold" color={THEME.color.gunMetal}>
+                                        {!infraction?.controlType
+                                            ? 'Infraction contrôle de l’environnement'
+                                            : controlTitle(infraction.controlType)}
+                                    </Text>
+                                </Stack.Item>
+                                <Stack.Item>
+                                    <Stack direction='row' spacing={'0.5rem'}>
+                                        <Stack.Item>
+                                            <InfractionTypeTag type={infraction.infractionType}/>
+                                        </Stack.Item>
+                                        <Stack.Item>
+                                            <NatinfsTag natinfs={infraction.natinfs}/>
+                                        </Stack.Item>
+                                    </Stack>
+                                </Stack.Item>
+                            </Stack>
+                        </Stack.Item>
+                        {infraction.controlType !== null && (
+                            <Stack.Item>
+                                <Stack direction="row" alignItems="baseline" spacing={'0.5rem'}>
+                                    <Stack.Item>
+                                        <IconButton
+                                            Icon={Icon.EditUnbordered}
+                                            accent={Accent.SECONDARY}
+                                            size={Size.NORMAL}
+                                            role="edit-infraction"
+                                            onClick={() => onEditInfractionForTarget(infraction)}
+                                        />
+                                    </Stack.Item>
+                                    <Stack.Item>
+                                        <IconButton
+                                            Icon={Icon.Delete}
+                                            accent={Accent.SECONDARY}
+                                            size={Size.NORMAL}
+                                            onClick={() => onDeleteInfraction(infraction.id)}
+                                        />
+                                    </Stack.Item>
+                                </Stack>
+                            </Stack.Item>
+                        )}
+                    </Stack>
+                </Stack.Item>
+            ))}
+        </Stack>
+    )
 }
 
 export default EnvInfractionSummary
diff --git a/frontend/src/pam/mission/infractions/env-infraction-target-added-by-cacem-form.tsx b/frontend/src/pam/mission/infractions/env-infraction-target-added-by-cacem-form.tsx
new file mode 100644
index 00000000..9ef53a08
--- /dev/null
+++ b/frontend/src/pam/mission/infractions/env-infraction-target-added-by-cacem-form.tsx
@@ -0,0 +1,156 @@
+import React from 'react'
+import { Stack } from 'rsuite'
+import { Checkbox, Legend, MultiRadio, Select, THEME } from '@mtes-mct/monitor-ui'
+import { ControlType } from '../../../types/control-types'
+import { Infraction, InfractionByTarget } from '../../../types/infraction-types'
+import InfractionForm from './infraction-form'
+import {
+    controlTitle,
+    getDisabledControlTypes,
+    vesselSizeToHumanString,
+    vesselTypeToHumanString
+} from '../controls/utils'
+import Text from '../../../ui/text'
+import { formalNoticeLabels, infractionTypeLabels, transformFormatToOptions } from '../../../types/env-mission-types'
+import NatinfsFullNameList from "./natinfs-fullname-list.tsx";
+
+const CONTROL_TYPE_OPTIONS = [
+    {
+        label: `Infraction - ${controlTitle(ControlType.ADMINISTRATIVE)}`,
+        value: ControlType.ADMINISTRATIVE
+    },
+    {
+        label: `Infraction - ${controlTitle(ControlType.SECURITY)}`,
+        value: ControlType.SECURITY
+    },
+    {
+        label: `Infraction - ${controlTitle(ControlType.NAVIGATION)}`,
+        value: ControlType.NAVIGATION
+    },
+    {
+        label: `Infraction - ${controlTitle(ControlType.GENS_DE_MER)}`,
+        value: ControlType.GENS_DE_MER
+    }
+]
+
+interface EnvInfractionNewTargetFormProps {
+    infraction?: InfractionByTarget
+    formData?: Infraction
+    availableControlTypesForInfraction?: ControlType[]
+    onChange: (field: string, value: any) => void
+    onCancel: () => void
+}
+
+const EnvInfractionTargetAddedByCacemForm: React.FC<EnvInfractionNewTargetFormProps> = ({
+                                                                                            infraction,
+                                                                                            formData,
+                                                                                            availableControlTypesForInfraction,
+                                                                                            onChange,
+                                                                                            onCancel
+                                                                                        }) => {
+
+    return (
+        <Stack direction="column" spacing={'2rem'} style={{width: '100%', padding: '1rem'}}>
+            <Stack.Item style={{width: '100%'}}>
+                <Stack direction="row" spacing={'2rem'} style={{width: '100%'}}>
+                    <Stack.Item style={{width: '100%'}}>
+                        <Legend>Immatriculation</Legend>
+                        <Text as="h3" weight="medium">
+                            {formData?.target?.vesselIdentifier}
+                        </Text>
+                    </Stack.Item>
+                    <Stack.Item style={{width: '100%'}}>
+                        <Legend>Type de navire</Legend>
+                        <Text as="h3" weight="medium">
+                            {vesselTypeToHumanString(formData?.target?.vesselType)}
+                        </Text>
+                    </Stack.Item>
+                    <Stack.Item style={{width: '100%'}}>
+                        <Legend>Taille du navire</Legend>
+                        <Text as="h3" weight="medium">
+                            {vesselSizeToHumanString(formData?.target?.vesselSize)}
+                        </Text>
+                    </Stack.Item>
+                </Stack>
+            </Stack.Item>
+            <Stack.Item style={{width: '100%'}}>
+                <Legend>Identité de la personne contrôlée</Legend>
+                <Text as="h3" weight="medium">
+                    {formData?.target?.identityControlledPerson}
+                </Text>
+            </Stack.Item>
+            <Stack.Item style={{width: '100%'}}>
+                <MultiRadio
+                    isReadOnly={true}
+                    isInline
+                    value={formData?.target?.infractionType}
+                    label="Type d'infraction"
+                    name="infractionType"
+                    options={transformFormatToOptions(infractionTypeLabels)}
+                />
+            </Stack.Item>
+            <Stack.Item style={{width: '100%'}}>
+                <MultiRadio
+                    isReadOnly={true}
+                    isInline
+                    value={formData?.target?.formalNotice}
+                    label="Mise en demeure"
+                    name="formalNotice"
+                    options={transformFormatToOptions(formalNoticeLabels)}
+                />
+            </Stack.Item>
+            <Stack.Item style={{width: '100%'}}>
+                <Legend>NATINF</Legend>
+                <NatinfsFullNameList natinfs={infraction?.infractions[0]?.natinfs}/>
+            </Stack.Item>
+            <Stack.Item style={{width: '100%'}}>
+                <Stack direction="row" spacing={'2rem'}>
+                    <Stack.Item>
+                        <Legend>Tribunal compétent</Legend>
+                        <Text as="h3" weight="medium">
+                            {formData?.target?.relevantCourt || '--'}
+                        </Text>
+                    </Stack.Item>
+                    <Stack.Item>
+                        <Legend>&nbsp;</Legend>
+                        <Checkbox value={!!formData?.target?.toProcess} label="À traiter"/>
+                    </Stack.Item>
+                </Stack>
+            </Stack.Item>
+            <Stack.Item style={{width: '100%'}}>
+                <Legend>Observations</Legend>
+                <Text as="h3" weight="medium">
+                    {formData?.target?.observations ?? '--'}
+                </Text>
+            </Stack.Item>
+            <Stack.Item style={{width: '100%'}}>
+                <Legend>Ajout d’une infraction pour cette cible</Legend>
+                <Stack
+                    direction="column"
+                    spacing={'2rem'}
+                    style={{width: '100%', backgroundColor: THEME.color.cultured, padding: '2rem'}}
+                >
+                    <Stack.Item style={{width: '100%'}}>
+                        <Select
+                            label="Type de contrôle avec infraction"
+                            options={CONTROL_TYPE_OPTIONS}
+                            disabledItemValues={getDisabledControlTypes(availableControlTypesForInfraction)}
+                            value={formData?.controlType}
+                            name="controlType"
+                            onChange={(nextValue: OptionValue) => onChange('controlType', nextValue)}
+                        />
+                    </Stack.Item>
+                    <Stack.Item style={{width: '100%'}}>
+                        <InfractionForm
+                            infraction={formData}
+                            onChange={onChange}
+                            onCancel={onCancel}
+                        />
+                    </Stack.Item>
+                </Stack>
+            </Stack.Item>
+        </Stack>
+    )
+}
+
+export default EnvInfractionTargetAddedByCacemForm
diff --git a/frontend/src/pam/mission/infractions/env-infraction-target-added-by-unit-form.tsx b/frontend/src/pam/mission/infractions/env-infraction-target-added-by-unit-form.tsx
new file mode 100644
index 00000000..e76b62d0
--- /dev/null
+++ b/frontend/src/pam/mission/infractions/env-infraction-target-added-by-unit-form.tsx
@@ -0,0 +1,99 @@
+import React from 'react'
+import { Stack } from 'rsuite'
+import { OptionValue, Select, TextInput } from '@mtes-mct/monitor-ui'
+import { ControlType } from '../../../types/control-types'
+import { Infraction } from '../../../types/infraction-types'
+import InfractionForm from './infraction-form'
+import {
+    CONTROL_TYPE_OPTIONS,
+    getDisabledControlTypes,
+    VESSEL_SIZE_OPTIONS,
+    VESSEL_TYPE_OPTIONS
+} from '../controls/utils'
+
+interface EnvInfractionNewTargetFormProps {
+    infraction?: Infraction
+    availableControlTypesForInfraction?: ControlType[]
+    onChange: (field: string, value: any) => void
+    onChangeTarget: (field: string, value: any) => void
+    onCancel: () => void
+}
+
+const EnvInfractionTargetAddedByUnitForm: React.FC<EnvInfractionNewTargetFormProps> = ({
+                                                                                           infraction,
+                                                                                           availableControlTypesForInfraction,
+                                                                                           onChange,
+                                                                                           onChangeTarget,
+                                                                                           onCancel
+                                                                                       }) => {
+
+    return (
+        <Stack direction="column" spacing={'2rem'} style={{width: '100%', padding: '1rem'}}>
+            <Stack.Item style={{width: '100%'}}>
+                <Select
+                    label="Type de contrôle avec infraction"
+                    options={CONTROL_TYPE_OPTIONS}
+                    disabledItemValues={getDisabledControlTypes(availableControlTypesForInfraction)}
+                    value={infraction?.controlType}
+                    name="controlType"
+                    onChange={(nextValue: OptionValue) => onChange('controlType', nextValue)}
+                />
+            </Stack.Item>
+            <Stack.Item style={{width: '100%'}}>
+                <Stack direction="column" alignItems="baseline" spacing={'0.5rem'}>
+                    <Stack.Item style={{width: '100%'}}>
+                        <Stack direction="row" alignItems="baseline" spacing={'0.5rem'}>
+                            <Stack.Item style={{width: '40%'}}>
+                                <Select
+                                    label="Taille du navire"
+                                    options={VESSEL_SIZE_OPTIONS}
+                                    value={infraction?.target?.vesselSize}
+                                    name="vesselSize"
+                                    onChange={(nextValue: OptionValue) => onChangeTarget('vesselSize', nextValue)}
+                                />
+                            </Stack.Item>
+                            <Stack.Item style={{width: '60%'}}>
+                                <Select
+                                    label="Type de navire"
+                                    options={VESSEL_TYPE_OPTIONS}
+                                    value={infraction?.target?.vesselType}
+                                    name="vesselType"
+                                    onChange={(nextValue: OptionValue) => onChangeTarget('vesselType', nextValue)}
+                                />
+                            </Stack.Item>
+                        </Stack>
+                    </Stack.Item>
+                    <Stack.Item style={{width: '100%'}}>
+                        <Stack direction="row" alignItems="baseline" spacing={'0.5rem'}>
+                            <Stack.Item style={{width: '40%'}}>
+                                <TextInput
+                                    label="Immatriculation"
+                                    value={infraction?.target?.vesselIdentifier}
+                                    name="vesselIdentifier"
+                                    onChange={(nextValue?: string) => onChangeTarget('vesselIdentifier', nextValue)}
+                                />
+                            </Stack.Item>
+                            <Stack.Item style={{width: '60%'}}>
+                                <TextInput
+                                    label="Identité de la personne contrôlée"
+                                    value={infraction?.target?.identityControlledPerson}
+                                    name="identityControlledPerson"
+                                    onChange={(nextValue?: string) => onChangeTarget('identityControlledPerson', nextValue)}
+                                />
+                            </Stack.Item>
+                        </Stack>
+                    </Stack.Item>
+                </Stack>
+            </Stack.Item>
+            <Stack.Item style={{width: '100%'}}>
+                <InfractionForm
+                    infraction={infraction}
+                    onChange={onChange}
+                    onCancel={onCancel}
+                />
+            </Stack.Item>
+        </Stack>
+    )
+}
+
+export default EnvInfractionTargetAddedByUnitForm
diff --git a/frontend/src/pam/mission/infractions/infraction-for-control.tsx b/frontend/src/pam/mission/infractions/infraction-for-control.tsx
index d77e2d52..4898fd50 100644
--- a/frontend/src/pam/mission/infractions/infraction-for-control.tsx
+++ b/frontend/src/pam/mission/infractions/infraction-for-control.tsx
@@ -13,93 +13,93 @@ import { GET_MISSION_TIMELINE } from "../timeline/use-mission-timeline.tsx";
 import { GET_ACTION_BY_ID } from "../actions/use-action-by-id.tsx";
 
 export interface ControlInfractionProps {
-  controlId?: string
-  controlType: ControlType
-  infractions?: Infraction[]
+    controlId?: string
+    controlType: ControlType
+    infractions?: Infraction[]
 }
 
 const ControlInfraction: React.FC<ControlInfractionProps> = ({controlId, controlType, infractions}) => {
-  const {missionId, actionId} = useParams()
+    const {missionId, actionId} = useParams()
 
-  const [showInfractionForm, setShowInfractionForm] = useState<boolean>(false)
-  const [formData, setFormData] = useState<InfractionFormData | undefined>(undefined) // only 1 infraction for nav and fish
+    const [showInfractionForm, setShowInfractionForm] = useState<boolean>(false)
+    const [formData, setFormData] = useState<InfractionFormData | undefined>(undefined) // only 1 infraction for nav and fish
 
-  useEffect(() => {
-    setFormData({...infractions?.[0], controlType})
-  }, [infractions])
+    useEffect(() => {
+        setFormData({...infractions?.[0], controlType})
+    }, [infractions, controlType])
 
-  const onChangeFormField = (field: string, value: any) => {
-    setFormData((prevData: any) => ({...prevData, [field]: value}))
-  }
+    const onChangeFormField = (field: string, value: any) => {
+        setFormData((prevData: any) => ({...prevData, [field]: value}))
+    }
 
-  const [mutate, {mutateData, mutateLoading, mutateError}] = useMutation(MUTATION_ADD_OR_UPDATE_INFRACTION, {
-    refetchQueries: [GET_MISSION_TIMELINE, GET_ACTION_BY_ID]
-  })
-  const [deleteMutation] = useMutation(MUTATION_DELETE_INFRACTION, {
-    refetchQueries: [GET_MISSION_TIMELINE, GET_ACTION_BY_ID]
-  })
+    const [mutate] = useMutation(MUTATION_ADD_OR_UPDATE_INFRACTION, {
+        refetchQueries: [GET_MISSION_TIMELINE, GET_ACTION_BY_ID]
+    })
+    const [deleteMutation] = useMutation(MUTATION_DELETE_INFRACTION, {
+        refetchQueries: [GET_MISSION_TIMELINE, GET_ACTION_BY_ID]
+    })
 
-  const onSubmit = async (e: React.FormEvent, infraction?: Infraction) => {
-    e.preventDefault()
-    const mutationData = {
-      ...omit(infraction, '__typename', 'target'),
-      id: infraction?.id,
-      missionId,
-      actionId,
-      controlId,
-      controlType
+    const onSubmit = async (e: React.FormEvent, infraction?: Infraction) => {
+        e.preventDefault()
+        const mutationData = {
+            ...omit(infraction, '__typename', 'target'),
+            id: infraction?.id,
+            missionId,
+            actionId,
+            controlId,
+            controlType
+        }
+        await mutate({variables: {infraction: mutationData}})
+        setShowInfractionForm(false)
+    }
+    const onDelete = async (data: Infraction) => {
+        await deleteMutation({
+            variables: {
+                id: data.id!
+            }
+        })
     }
-    await mutate({variables: {infraction: mutationData}})
-    setShowInfractionForm(false)
-  }
-  const onDelete = async (data: Infraction) => {
-    await deleteMutation({
-      variables: {
-        id: data.id!
-      }
-    })
-  }
 
-  return (
-    <>
-      {!!!infractions?.length && !showInfractionForm ? (
-        <Button
-          onClick={() => {
-            setShowInfractionForm(true)
-          }}
-          accent={Accent.SECONDARY}
-          size={Size.NORMAL}
-          Icon={Icon.Plus}
-          role="add-infraction-button"
-          isFullWidth={true}
-        >
-          {`${infractionButtonTitle(controlType)}`}
-        </Button>
-      ) : !!infractions?.length && !showInfractionForm ? (
-        <div style={{width: '100%', backgroundColor: THEME.color.cultured, padding: '1rem'}}>
-          <InfractionSummary
-            infractions={infractions}
-            controlType={controlType}
-            onEdit={() => setShowInfractionForm(true)}
-            onDelete={onDelete}
-          />
-        </div>
-      ) : (
+    return (
         <>
-          <Label>Ajout d'infraction</Label>
-          <div style={{width: '100%', backgroundColor: THEME.color.cultured, padding: '1rem'}}>
-            <form onSubmit={(e: React.FormEvent) => onSubmit(e, formData)}>
-              <InfractionForm
-                infraction={formData}
-                onChange={onChangeFormField}
-                onCancel={() => setShowInfractionForm(false)}
-              />
-            </form>
-          </div>
+            {!!!infractions?.length && !showInfractionForm ? (
+                <Button
+                    onClick={() => {
+                        setShowInfractionForm(true)
+                    }}
+                    accent={Accent.SECONDARY}
+                    size={Size.NORMAL}
+                    Icon={Icon.Plus}
+                    role="add-infraction-button"
+                    isFullWidth={true}
+                >
+                    {`${infractionButtonTitle(controlType)}`}
+                </Button>
+            ) : !!infractions?.length && !showInfractionForm ? (
+                <div style={{width: '100%', backgroundColor: THEME.color.cultured, padding: '1rem'}}>
+                    <InfractionSummary
+                        infractions={infractions}
+                        controlType={controlType}
+                        onEdit={() => setShowInfractionForm(true)}
+                        onDelete={onDelete}
+                    />
+                </div>
+            ) : (
+                <>
+                    <Label>Ajout d'infraction</Label>
+                    <div style={{width: '100%', backgroundColor: THEME.color.cultured, padding: '1rem'}}>
+                        <form onSubmit={(e: React.FormEvent) => onSubmit(e, formData)}>
+                            <InfractionForm
+                                infraction={formData}
+                                onChange={onChangeFormField}
+                                onCancel={() => setShowInfractionForm(false)}
+                            />
+                        </form>
+                    </div>
+                </>
+            )}
         </>
-      )}
-    </>
-  )
+    )
 }
 
 export default ControlInfraction
diff --git a/frontend/src/pam/mission/infractions/utils.ts b/frontend/src/pam/mission/infractions/utils.ts
index 0b377176..5af7ab14 100644
--- a/frontend/src/pam/mission/infractions/utils.ts
+++ b/frontend/src/pam/mission/infractions/utils.ts
@@ -1,30 +1,30 @@
 import { ControlType } from '../../../types/control-types'
 
 export const infractionTitleForControlType = (controlType: ControlType): string => {
-  switch (controlType) {
-    case ControlType.ADMINISTRATIVE:
-      return 'Infraction administrative'
-    case ControlType.NAVIGATION:
-      return 'Infraction règles de navigation'
-    case ControlType.SECURITY:
-      return 'Infraction equipements et respect des normes de sécurité'
-    case ControlType.GENS_DE_MER:
-      return 'Infraction administrative gens de mer'
-    default:
-      return ''
-  }
+    switch (controlType) {
+        case ControlType.ADMINISTRATIVE:
+            return 'Infraction administrative'
+        case ControlType.NAVIGATION:
+            return 'Infraction règles de navigation'
+        case ControlType.SECURITY:
+            return 'Infraction équipements et respect des normes de sécurité'
+        case ControlType.GENS_DE_MER:
+            return 'Infraction administrative gens de mer'
+        default:
+            return ''
+    }
 }
 export const infractionButtonTitle = (controlType: ControlType): string => {
-  switch (controlType) {
-    case ControlType.ADMINISTRATIVE:
-      return 'Ajouter une infraction administrative'
-    case ControlType.NAVIGATION:
-      return 'Ajouter une infraction règle de navigation'
-    case ControlType.SECURITY:
-      return 'Ajouter une infraction sécurité'
-    case ControlType.GENS_DE_MER:
-      return 'Ajouter une infraction administrative'
-    default:
-      return ''
-  }
+    switch (controlType) {
+        case ControlType.ADMINISTRATIVE:
+            return 'Ajouter une infraction administrative'
+        case ControlType.NAVIGATION:
+            return 'Ajouter une infraction règle de navigation'
+        case ControlType.SECURITY:
+            return 'Ajouter une infraction sécurité'
+        case ControlType.GENS_DE_MER:
+            return 'Ajouter une infraction administrative'
+        default:
+            return ''
+    }
 }
diff --git a/frontend/src/pam/mission/mission-component.tsx b/frontend/src/pam/mission/mission-component.tsx
index b26ffa49..93a59546 100644
--- a/frontend/src/pam/mission/mission-component.tsx
+++ b/frontend/src/pam/mission/mission-component.tsx
@@ -18,188 +18,188 @@ import find from 'lodash/find'
 import { GET_MISSION_TIMELINE } from "./timeline/use-mission-timeline.tsx";
 
 export interface MissionProps {
-  mission?: Mission
+    mission?: Mission
 }
 
 const MissionComponent: React.FC<MissionProps> = ({mission}) => {
-  const {missionId, actionId} = useParams()
+    const {missionId, actionId} = useParams()
 
-  let navigate = useNavigate()
+    let navigate = useNavigate()
 
-  const [showControlTypesModal, setShowControlTypesModal] = useState<boolean>(false)
+    const [showControlTypesModal, setShowControlTypesModal] = useState<boolean>(false)
 
 
-  const [addStatus, {statusMutationResponse}] = useMutation(MUTATION_ADD_OR_UPDATE_ACTION_STATUS, {
-    refetchQueries: [GET_MISSION_TIMELINE]
-  })
-  const [addControl, {controlMutationResponse}] = useMutation(MUTATION_ADD_OR_UPDATE_ACTION_CONTROL, {
-    refetchQueries: [GET_MISSION_TIMELINE]
-  })
-
-  const selectedAction = useMemo(() => {
-    if (actionId) {
-      return find(mission?.actions, {id: actionId})
-    }
-  }, [mission, actionId])
+    const [addStatus] = useMutation(MUTATION_ADD_OR_UPDATE_ACTION_STATUS, {
+        refetchQueries: [GET_MISSION_TIMELINE]
+    })
+    const [addControl] = useMutation(MUTATION_ADD_OR_UPDATE_ACTION_CONTROL, {
+        refetchQueries: [GET_MISSION_TIMELINE]
+    })
 
-  const selectAction = (action: Action) => {
-    navigate(`/pam/missions/${missionId}/${action.id}`)
-    // setSelectedAction(action)
-  }
+    const selectedAction = useMemo(() => {
+        if (actionId) {
+            return find(mission?.actions, {id: actionId})
+        }
+    }, [mission, actionId])
 
-  const addNewAction = (key: ActionTypeEnum) => {
-    if (key === ActionTypeEnum.CONTROL) {
-      setShowControlTypesModal(true)
+    const selectAction = (action: Action) => {
+        navigate(`/pam/missions/${missionId}/${action.id}`)
+        // setSelectedAction(action)
     }
-  }
-
-  const addNewStatus = async (key: ActionStatusType) => {
-    const newActionData = {
-      missionId: parseInt(missionId!, 10),
-      status: key,
-      isStart: true,
-      reason: null,
-      observations: null
+
+    const addNewAction = (key: ActionTypeEnum) => {
+        if (key === ActionTypeEnum.CONTROL) {
+            setShowControlTypesModal(true)
+        }
     }
 
-    const response = await addStatus({
-      variables: {
-        statusAction: newActionData
-      }
-    })
+    const addNewStatus = async (key: ActionStatusType) => {
+        const newActionData = {
+            missionId: parseInt(missionId!, 10),
+            status: key,
+            isStart: true,
+            reason: null,
+            observations: null
+        }
+
+        const response = await addStatus({
+            variables: {
+                statusAction: newActionData
+            }
+        })
+
+        // TODO change this
+        navigate(`/pam/missions/${missionId}/${response.data.addOrUpdateStatus.id}`)
+    }
 
-    // TODO change this
-    navigate(`/pam/missions/${missionId}/${response.data.addOrUpdateStatus.id}`)
-  }
-
-  const addNewControl = async (controlMethod: string, vesselType: VesselTypeEnum) => {
-    setShowControlTypesModal(false)
-    // TODO id creation should be in backend
-    const newControl = {
-      missionId: parseInt(missionId!, 10),
-      controlMethod,
-      vesselType
+    const addNewControl = async (controlMethod: string, vesselType: VesselTypeEnum) => {
+        setShowControlTypesModal(false)
+        // TODO id creation should be in backend
+        const newControl = {
+            missionId: parseInt(missionId!, 10),
+            controlMethod,
+            vesselType
+        }
+
+        const response = await addControl({variables: {controlAction: newControl}})
+        debugger
+        navigate(`/pam/missions/${missionId}/${response.data.addOrUpdateControl.id}`)
     }
 
-    const response = await addControl({variables: {controlAction: newControl}})
-    debugger
-    navigate(`/pam/missions/${missionId}/${response.data.addOrUpdateControl.id}`)
-  }
-
-
-  if (mission) {
-    const MissionActionComponent = getComponentForAction(selectedAction)
-
-    return (
-      <>
-        <FlexboxGrid justify="space-between" style={{display: 'flex', flex: 1}}>
-          <FlexboxGrid.Item
-            colspan={8}
-            style={{
-              flex: 1,
-              overflowY: 'auto',
-              minHeight: 'calc(100vh - 2 * 60px)',
-              maxHeight: 'calc(100vh - 2 * 60px)'
-            }}
-          >
-            <Stack direction="column">
-              <Stack.Item style={{width: '100%', padding: '1rem'}}>
-                <MissionGeneralInfoPanel mission={mission}/>
-              </Stack.Item>
-              <Stack.Item
-                style={{width: '100%', padding: '1rem'}}>{/* <MissionActivityPanel /> */}</Stack.Item>
-              <Stack.Item style={{width: '100%', padding: '1rem'}}>
-                {/* <MissionOperationalSummaryPanel /> */}
-              </Stack.Item>
-            </Stack>
-          </FlexboxGrid.Item>
-          <FlexboxGrid.Item
-            colspan={8}
-            style={{
-              backgroundColor: THEME.color.cultured,
-              padding: '2rem',
-              flex: 1,
-              overflowY: 'hidden',
-              minHeight: 'calc(100vh - 2 * 60px)',
-              maxHeight: 'calc(100vh - 2 * 60px)'
-            }}
-          >
-            <FlexboxGrid>
-              <FlexboxGrid.Item style={{width: '100%'}}>
-                <FlexboxGrid justify="space-between">
-                  <FlexboxGrid.Item>
-                    <Stack alignItems="center">
-                      <Stack.Item>
-                        <Text as="h2" weight="bold">
-                          Actions réalisées en mission
-                        </Text>
-                      </Stack.Item>
-                      <Stack.Item style={{paddingLeft: '0.5rem'}}>
-                        <ActionSelectionDropdown onSelect={addNewAction}/>
-                      </Stack.Item>
-                    </Stack>
-                  </FlexboxGrid.Item>
-                  <FlexboxGrid.Item>
-                    <Stack>
-                      {/* <Stack.Item>
+
+    if (mission) {
+        const MissionActionComponent = getComponentForAction(selectedAction)
+
+        return (
+            <>
+                <FlexboxGrid justify="space-between" style={{display: 'flex', flex: 1}}>
+                    <FlexboxGrid.Item
+                        colspan={8}
+                        style={{
+                            flex: 1,
+                            overflowY: 'auto',
+                            minHeight: 'calc(100vh - 2 * 60px)',
+                            maxHeight: 'calc(100vh - 2 * 60px)'
+                        }}
+                    >
+                        <Stack direction="column">
+                            <Stack.Item style={{width: '100%', padding: '1rem'}}>
+                                <MissionGeneralInfoPanel mission={mission}/>
+                            </Stack.Item>
+                            <Stack.Item
+                                style={{width: '100%', padding: '1rem'}}>{/* <MissionActivityPanel /> */}</Stack.Item>
+                            <Stack.Item style={{width: '100%', padding: '1rem'}}>
+                                {/* <MissionOperationalSummaryPanel /> */}
+                            </Stack.Item>
+                        </Stack>
+                    </FlexboxGrid.Item>
+                    <FlexboxGrid.Item
+                        colspan={8}
+                        style={{
+                            backgroundColor: THEME.color.cultured,
+                            padding: '2rem',
+                            flex: 1,
+                            overflowY: 'hidden',
+                            minHeight: 'calc(100vh - 2 * 60px)',
+                            maxHeight: 'calc(100vh - 2 * 60px)'
+                        }}
+                    >
+                        <FlexboxGrid>
+                            <FlexboxGrid.Item style={{width: '100%'}}>
+                                <FlexboxGrid justify="space-between">
+                                    <FlexboxGrid.Item>
+                                        <Stack alignItems="center">
+                                            <Stack.Item>
+                                                <Text as="h2" weight="bold">
+                                                    Actions réalisées en mission
+                                                </Text>
+                                            </Stack.Item>
+                                            <Stack.Item style={{paddingLeft: '0.5rem'}}>
+                                                <ActionSelectionDropdown onSelect={addNewAction}/>
+                                            </Stack.Item>
+                                        </Stack>
+                                    </FlexboxGrid.Item>
+                                    <FlexboxGrid.Item>
+                                        <Stack>
+                                            {/* <Stack.Item>
                         <IconButton
                           Icon={Icon.Phone}
                           accent={Accent.PRIMARY}
                           size={Size.NORMAL}
                         />
                       </Stack.Item> */}
-                      <Stack.Item style={{paddingLeft: '0.5rem'}}>
-                        <StatusSelectionDropdown onSelect={addNewStatus}/>
-                      </Stack.Item>
-                    </Stack>
-                  </FlexboxGrid.Item>
+                                            <Stack.Item style={{paddingLeft: '0.5rem'}}>
+                                                <StatusSelectionDropdown onSelect={addNewStatus}/>
+                                            </Stack.Item>
+                                        </Stack>
+                                    </FlexboxGrid.Item>
+                                </FlexboxGrid>
+                                <Divider style={{backgroundColor: THEME.color.charcoal}}/>
+                            </FlexboxGrid.Item>
+                            <FlexboxGrid.Item style={{
+                                width: '100%',
+                                overflowY: 'auto',
+                                minHeight: 'calc(100vh - 260px)',
+                                maxHeight: 'calc(100vh - 260px)'
+                            }}>
+                                <MissionTimeline missionId={missionId} onSelectAction={selectAction}/>
+                            </FlexboxGrid.Item>
+                        </FlexboxGrid>
+                    </FlexboxGrid.Item>
+                    <FlexboxGrid.Item
+                        colspan={8}
+                        style={{
+                            backgroundColor: THEME.color.gainsboro,
+                            flex: 1,
+                            overflowY: 'auto',
+                            minHeight: 'calc(100vh - 2 * 60px)',
+                            maxHeight: 'calc(100vh - 2 * 60px)'
+                        }}
+                    >
+                        <FlexboxGrid justify="start" align="middle" style={{padding: '2rem', width: '100%'}}>
+                            {selectedAction && MissionActionComponent &&
+                                <MissionActionComponent action={selectedAction}/>}
+                        </FlexboxGrid>
+                    </FlexboxGrid.Item>
                 </FlexboxGrid>
-                <Divider style={{backgroundColor: THEME.color.charcoal}}/>
-              </FlexboxGrid.Item>
-              <FlexboxGrid.Item style={{
-                width: '100%',
-                overflowY: 'auto',
-                minHeight: 'calc(100vh - 260px)',
-                maxHeight: 'calc(100vh - 260px)'
-              }}>
-                <MissionTimeline missionId={missionId} onSelectAction={selectAction}/>
-              </FlexboxGrid.Item>
-            </FlexboxGrid>
-          </FlexboxGrid.Item>
-          <FlexboxGrid.Item
-            colspan={8}
-            style={{
-              backgroundColor: THEME.color.gainsboro,
-              flex: 1,
-              overflowY: 'auto',
-              minHeight: 'calc(100vh - 2 * 60px)',
-              maxHeight: 'calc(100vh - 2 * 60px)'
-            }}
-          >
-            <FlexboxGrid justify="start" align="middle" style={{padding: '2rem', width: '100%'}}>
-              {selectedAction && MissionActionComponent &&
-                <MissionActionComponent action={selectedAction}/>}
-            </FlexboxGrid>
-          </FlexboxGrid.Item>
-        </FlexboxGrid>
-        <>
-          {showControlTypesModal && (
-            <Dialog>
-              <Dialog.Title>Ajouter des contrôles</Dialog.Title>
-              <Dialog.Body>
-                <ControlSelection onSelect={addNewControl}/>
-              </Dialog.Body>
-              <Dialog.Action style={{justifyContent: 'flex-end', paddingRight: '1.5rem'}}>
-                <Button accent={Accent.SECONDARY} onClick={() => setShowControlTypesModal(false)}>
-                  Fermer
-                </Button>
-              </Dialog.Action>
-            </Dialog>
-          )}
-        </>
-      </>
-    )
-  }
+                <>
+                    {showControlTypesModal && (
+                        <Dialog>
+                            <Dialog.Title>Ajouter des contrôles</Dialog.Title>
+                            <Dialog.Body>
+                                <ControlSelection onSelect={addNewControl}/>
+                            </Dialog.Body>
+                            <Dialog.Action style={{justifyContent: 'flex-end', paddingRight: '1.5rem'}}>
+                                <Button accent={Accent.SECONDARY} onClick={() => setShowControlTypesModal(false)}>
+                                    Fermer
+                                </Button>
+                            </Dialog.Action>
+                        </Dialog>
+                    )}
+                </>
+            </>
+        )
+    }
 }
 
 export default MissionComponent
diff --git a/frontend/src/pam/mission/page-footer.tsx b/frontend/src/pam/mission/page-footer.tsx
index dd8380a4..6290ef0b 100644
--- a/frontend/src/pam/mission/page-footer.tsx
+++ b/frontend/src/pam/mission/page-footer.tsx
@@ -14,49 +14,49 @@ const StyledFooter = styled.div`
 `
 
 interface MissionPageFooterProps {
-  missionName: string
-  exitMission: () => void
+    missionName: string
+    exitMission: () => void
 }
 
 const MissionPageFooter: React.FC<MissionPageFooterProps> = ({missionName, exitMission}) => {
 
-  const deleteMission = () => {
-    // TODO add delete
-    alert('Fonctionnalité pas encore implémentée')
-    exitMission()
-  }
+    const deleteMission = () => {
+        // TODO add delete
+        alert('Fonctionnalité pas encore implémentée')
+        exitMission()
+    }
 
 
-  return (
-    <StyledFooter>
-      <Stack direction="row" justifyContent="space-between" alignItems="center" style={{height: '100%'}}>
-        <Stack.Item style={{paddingLeft: '1rem'}}>
-          <Button accent={Accent.SECONDARY}
-                  size={Size.NORMAL}
-                  Icon={Icon.Delete}
-                  onClick={deleteMission}
-                  disabled={true}
-          >
-            Supprimer la mission
-          </Button>
-        </Stack.Item>
-        <Stack.Item style={{paddingLeft: '1rem'}}>
-          <Text as={'h2'} color={THEME.color.lightGray}>
-            RapportNav - Version test #0 -Janvier 2024
-          </Text>
-        </Stack.Item>
-        <Stack.Item style={{paddingLeft: '1rem'}}>
-          <Button accent={Accent.PRIMARY}
-                  size={Size.NORMAL}
-                  Icon={Icon.Save}
-                  onClick={exitMission}
-          >
-            Quitter le rapport
-          </Button>
-        </Stack.Item>
-      </Stack>
-    </StyledFooter>
-  )
+    return (
+        <StyledFooter>
+            <Stack direction="row" justifyContent="space-between" alignItems="center" style={{height: '100%'}}>
+                <Stack.Item style={{paddingLeft: '1rem'}}>
+                    <Button accent={Accent.SECONDARY}
+                            size={Size.NORMAL}
+                            Icon={Icon.Delete}
+                            onClick={deleteMission}
+                            disabled={true}
+                    >
+                        Supprimer la mission
+                    </Button>
+                </Stack.Item>
+                <Stack.Item style={{paddingLeft: '1rem'}}>
+                    <Text as={'h2'} color={THEME.color.lightGray}>
+                        RapportNav - Version test - Janvier 2024
+                    </Text>
+                </Stack.Item>
+                <Stack.Item style={{paddingLeft: '1rem'}}>
+                    <Button accent={Accent.PRIMARY}
+                            size={Size.NORMAL}
+                            Icon={Icon.Save}
+                            onClick={exitMission}
+                    >
+                        Quitter le rapport
+                    </Button>
+                </Stack.Item>
+            </Stack>
+        </StyledFooter>
+    )
 }
 
 export default MissionPageFooter
diff --git a/frontend/src/pam/mission/queries.ts b/frontend/src/pam/mission/queries.ts
index d85dec08..6c0bf4cf 100644
--- a/frontend/src/pam/mission/queries.ts
+++ b/frontend/src/pam/mission/queries.ts
@@ -142,7 +142,7 @@ export const GET_MISSION_BY_ID = gql`
             infractions {
               vesselIdentifier
               vesselType
-              targetAddedInRapportNav
+              targetAddedByUnit
               controlTypesWithInfraction
               infractions {
                 id
diff --git a/frontend/src/pam/mission/timeline/timeline-item.tsx b/frontend/src/pam/mission/timeline/timeline-item.tsx
index e9fa7235..0d2e8056 100644
--- a/frontend/src/pam/mission/timeline/timeline-item.tsx
+++ b/frontend/src/pam/mission/timeline/timeline-item.tsx
@@ -1,10 +1,10 @@
 import React from 'react'
 import { Accent, Icon, Tag, THEME } from '@mtes-mct/monitor-ui'
 import {
-  actionTargetTypeLabels,
-  ActionTypeEnum,
-  EnvActionControl,
-  MissionSourceEnum
+    actionTargetTypeLabels,
+    ActionTypeEnum,
+    EnvActionControl,
+    MissionSourceEnum
 } from '../../../types/env-mission-types'
 import { FlexboxGrid, Stack } from 'rsuite'
 import { Action, ActionControl, ActionStatus as NavActionStatus } from '../../../types/action-types'
@@ -18,322 +18,324 @@ import { useParams } from 'react-router-dom'
 import { vesselNameOrUnknown } from "../actions/utils.ts";
 
 interface MissionTimelineItemProps {
-  action: Action
-  onClick: (action: Action) => void
+    action: Action
+    onClick: (action: Action) => void
 }
 
 const Wrapper: React.FC<{ onClick: any; children: any; borderWhenSelected?: boolean }> = ({
-                                                                                            onClick,
-                                                                                            children,
-                                                                                            borderWhenSelected = null
+                                                                                              onClick,
+                                                                                              children,
+                                                                                              borderWhenSelected = null
                                                                                           }) => {
-  return (
-    <div onClick={onClick}>
-      <FlexboxGrid
-        style={{
-          width: '100%',
-          border: !!borderWhenSelected ? `3px solid ${THEME.color.blueGray}` : 'none',
-          cursor: 'pointer'
-        }}
-        justify="start"
-      >
-        {children}
-      </FlexboxGrid>
-    </div>
-  )
+    return (
+        <div onClick={onClick}>
+            <FlexboxGrid
+                style={{
+                    width: '100%',
+                    border: !!borderWhenSelected ? `3px solid ${THEME.color.blueGray}` : 'none',
+                    cursor: 'pointer'
+                }}
+                justify="start"
+            >
+                {children}
+            </FlexboxGrid>
+        </div>
+    )
 }
 
 const ActionEnvControl: React.FC<{ action: Action; onClick: any }> = ({action, onClick}) => {
-  const {actionId} = useParams()
-  const actionData = action.data as unknown as EnvActionControl
-  return (
-    <Wrapper onClick={onClick} borderWhenSelected={action.id === actionId}>
-      <FlexboxGrid.Item
-        style={{
-          width: '100%',
-          padding: '1rem'
-        }}
-      >
-        <Stack direction="row" spacing="0.5rem">
-          <Stack.Item alignSelf="flex-start">
-            <Icon.ControlUnit color={THEME.color.charcoal} size={20}/>
-          </Stack.Item>
-          <Stack.Item alignSelf="flex-start" style={{width: '100%'}}>
-            <Stack direction="column" spacing="0.5rem" alignItems="flex-start" style={{width: '100%'}}>
-              <Stack.Item>
-                <Stack direction="row" spacing="0.25rem">
-                  <Stack.Item>
-                    <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
-                      Contrôle
-                    </Text>
-                  </Stack.Item>
-                  <Stack.Item>
-                    <Text as="h3" weight="bold" color={THEME.color.gunMetal}>
-                      {actionData && 'themes' in actionData && actionData?.themes[0].theme ? actionData?.themes[0].theme : ''}
-                    </Text>
-                  </Stack.Item>
-                </Stack>
-              </Stack.Item>
-              <Stack.Item>
-                <Text as="h3" weight="normal" color={THEME.color.slateGray}>
-                  <b>
-                    {actionData && 'actionNumberOfControls' in actionData && actionData.actionNumberOfControls
-                      ? `${actionData.actionNumberOfControls} ${
-                        actionData.actionNumberOfControls > 1 ? 'contrôles' : 'contrôle'
-                      }`
-                      : 'Nombre de contrôles inconnu'}
-                  </b>
-                  &nbsp;
-                  {actionData &&
-                  'actionNumberOfControls' in actionData &&
-                  actionData.actionNumberOfControls &&
-                  actionData.actionNumberOfControls > 1
-                    ? 'réalisés'
-                    : 'réalisé'}{' '}
-                  sur des cibles de type&nbsp;
-                  <b>
-                    {actionData && 'actionTargetType' in actionData && actionData.actionTargetType
-                      ? actionTargetTypeLabels[actionData.actionTargetType]?.libelle?.toLowerCase()
-                      : 'inconnu'}
-                  </b>
-                </Text>
-              </Stack.Item>
+    const {actionId} = useParams()
+    const actionData = action.data as unknown as EnvActionControl
+    return (
+        <Wrapper onClick={onClick} borderWhenSelected={action.id === actionId}>
+            <FlexboxGrid.Item
+                style={{
+                    width: '100%',
+                    padding: '1rem'
+                }}
+            >
+                <Stack direction="row" spacing="0.5rem">
+                    <Stack.Item alignSelf="flex-start">
+                        <Icon.ControlUnit color={THEME.color.charcoal} size={20}/>
+                    </Stack.Item>
+                    <Stack.Item alignSelf="flex-start" style={{width: '100%'}}>
+                        <Stack direction="column" spacing="0.5rem" alignItems="flex-start" style={{width: '100%'}}>
+                            <Stack.Item>
+                                <Stack direction="row" spacing="0.25rem">
+                                    <Stack.Item>
+                                        <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
+                                            Contrôle
+                                        </Text>
+                                    </Stack.Item>
+                                    <Stack.Item>
+                                        <Text as="h3" weight="bold" color={THEME.color.gunMetal}>
+                                            {actionData && 'themes' in actionData && actionData?.themes[0].theme ? actionData?.themes[0].theme : ''}
+                                        </Text>
+                                    </Stack.Item>
+                                </Stack>
+                            </Stack.Item>
+                            <Stack.Item>
+                                <Text as="h3" weight="normal" color={THEME.color.slateGray}>
+                                    <b>
+                                        {actionData && 'actionNumberOfControls' in actionData && actionData.actionNumberOfControls
+                                            ? `${actionData.actionNumberOfControls} ${
+                                                actionData.actionNumberOfControls > 1 ? 'contrôles' : 'contrôle'
+                                            }`
+                                            : 'Nombre de contrôles inconnu'}
+                                    </b>
+                                    &nbsp;
+                                    {actionData &&
+                                    'actionNumberOfControls' in actionData &&
+                                    actionData.actionNumberOfControls &&
+                                    actionData.actionNumberOfControls > 1
+                                        ? 'réalisés'
+                                        : 'réalisé'}{' '}
+                                    sur des cibles de type&nbsp;
+                                    <b>
+                                        {actionData && 'actionTargetType' in actionData && actionData.actionTargetType
+                                            ? actionTargetTypeLabels[actionData.actionTargetType]?.libelle?.toLowerCase()
+                                            : 'inconnu'}
+                                    </b>
+                                </Text>
+                            </Stack.Item>
 
-              <Stack.Item alignSelf="flex-start" style={{width: '100%'}}>
-                <Stack direction="row" spacing="1rem" style={{width: '100%'}}>
-                  <Stack.Item style={{width: '70%'}}>
-                    {actionData?.controlsToComplete !== undefined &&
-                    actionData?.controlsToComplete?.length > 0 ? (
-                      <ControlsToCompleteTag
-                        amountOfControlsToComplete={actionData?.controlsToComplete?.length}
-                      />
-                    ) : (
-                      <>
-                        {
-                          action.summaryTags?.map((tag: string) => (
-                            <Tag accent={Accent.PRIMARY}
-                                 style={{marginRight: '0.5rem'}}>{tag}</Tag>
-                          ))
-                        }
-                      </>
-                    )}
-                  </Stack.Item>
-                  <Stack.Item alignSelf="flex-end" style={{width: '30%'}}>
-                    <Stack direction="column" alignItems="flex-end">
-                      <Stack.Item alignSelf="flex-end">
-                        <Text as="h4" color={THEME.color.slateGray} style={"italic"}>
-                          ajouté par CACEM
-                        </Text>
-                      </Stack.Item>
-                    </Stack>
-                  </Stack.Item>
+                            <Stack.Item alignSelf="flex-start" style={{width: '100%'}}>
+                                <Stack direction="row" spacing="1rem" style={{width: '100%'}}>
+                                    <Stack.Item style={{width: '70%'}}>
+                                        {actionData?.controlsToComplete !== undefined &&
+                                        actionData?.controlsToComplete?.length > 0 ? (
+                                            <ControlsToCompleteTag
+                                                amountOfControlsToComplete={actionData?.controlsToComplete?.length}
+                                            />
+                                        ) : (
+                                            <>
+                                                {
+                                                    action.summaryTags?.map((tag: string) => (
+                                                        <Tag key={tag}
+                                                             accent={Accent.PRIMARY}
+                                                             style={{marginRight: '0.5rem'}}>{tag}</Tag>
+                                                    ))
+                                                }
+                                            </>
+                                        )}
+                                    </Stack.Item>
+                                    <Stack.Item alignSelf="flex-end" style={{width: '30%'}}>
+                                        <Stack direction="column" alignItems="flex-end">
+                                            <Stack.Item alignSelf="flex-end">
+                                                <Text as="h4" color={THEME.color.slateGray} fontStyle={"italic"}>
+                                                    ajouté par CACEM
+                                                </Text>
+                                            </Stack.Item>
+                                        </Stack>
+                                    </Stack.Item>
+                                </Stack>
+                            </Stack.Item>
+                        </Stack>
+                    </Stack.Item>
                 </Stack>
-              </Stack.Item>
-            </Stack>
-          </Stack.Item>
-        </Stack>
-      </FlexboxGrid.Item>
-    </Wrapper>
-  )
+            </FlexboxGrid.Item>
+        </Wrapper>
+    )
 }
 
 const ActionFishControl: React.FC<{ action: Action; onClick: any }> = ({action, onClick}) => {
-  const {actionId} = useParams()
-  const actionData = action.data as unknown as FishAction
-  return (
-    <Wrapper onClick={onClick} borderWhenSelected={action.id === actionId}>
-      <FlexboxGrid.Item style={{width: '100%', padding: '1rem'}}>
-        <Stack direction="row" spacing="0.5rem">
-          <Stack.Item alignSelf="flex-start">
-            <Icon.ControlUnit color={THEME.color.charcoal} size={20}/>
-          </Stack.Item>
-          <Stack.Item alignSelf="flex-start" style={{width: '100%'}}>
-            <Stack direction="column" spacing="0.5rem" alignItems="flex-start" style={{width: '100%'}}>
-              <Stack.Item>
-                <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
-                  {formatMissionActionTypeForHumans(actionData?.actionType)} - {vesselNameOrUnknown(actionData?.vesselName)}
-                </Text>
-              </Stack.Item>
+    const {actionId} = useParams()
+    const actionData = action.data as unknown as FishAction
+    return (
+        <Wrapper onClick={onClick} borderWhenSelected={action.id === actionId}>
+            <FlexboxGrid.Item style={{width: '100%', padding: '1rem'}}>
+                <Stack direction="row" spacing="0.5rem">
+                    <Stack.Item alignSelf="flex-start">
+                        <Icon.ControlUnit color={THEME.color.charcoal} size={20}/>
+                    </Stack.Item>
+                    <Stack.Item alignSelf="flex-start" style={{width: '100%'}}>
+                        <Stack direction="column" spacing="0.5rem" alignItems="flex-start" style={{width: '100%'}}>
+                            <Stack.Item>
+                                <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
+                                    {formatMissionActionTypeForHumans(actionData?.actionType)} - {vesselNameOrUnknown(actionData?.vesselName)}
+                                </Text>
+                            </Stack.Item>
 
-              <Stack.Item alignSelf="flex-start" style={{width: '100%'}}>
-                <Stack direction="row" spacing="1rem" style={{width: '100%'}}>
-                  <Stack.Item style={{width: '70%'}}>
-                    {actionData?.controlsToComplete !== undefined &&
-                    actionData?.controlsToComplete?.length > 0 ? (
-                      <ControlsToCompleteTag
-                        amountOfControlsToComplete={actionData?.controlsToComplete?.length}
-                      />
-                    ) : (
-                      <>
-                        {
-                          action.summaryTags?.map((tag: string) => (
-                            <Tag accent={Accent.PRIMARY}
-                                 style={{marginRight: '0.5rem'}}>{tag}</Tag>
-                          ))
-                        }
-                      </>
-                    )}
-                  </Stack.Item>
-                  <Stack.Item alignSelf="flex-end" style={{width: '30%'}}>
-                    <Stack direction="column" alignItems="flex-end">
-                      <Stack.Item alignSelf="flex-end">
-                        <Text as="h4" color={THEME.color.slateGray} style="italic">
-                          ajouté par CNSP
-                        </Text>
-                      </Stack.Item>
-                    </Stack>
-                  </Stack.Item>
+                            <Stack.Item alignSelf="flex-start" style={{width: '100%'}}>
+                                <Stack direction="row" spacing="1rem" style={{width: '100%'}}>
+                                    <Stack.Item style={{width: '70%'}}>
+                                        {actionData?.controlsToComplete !== undefined &&
+                                        actionData?.controlsToComplete?.length > 0 ? (
+                                            <ControlsToCompleteTag
+                                                amountOfControlsToComplete={actionData?.controlsToComplete?.length}
+                                            />
+                                        ) : (
+                                            <>
+                                                {
+                                                    action.summaryTags?.map((tag: string) => (
+                                                        <Tag kry={tag} accent={Accent.PRIMARY}
+                                                             style={{marginRight: '0.5rem'}}>{tag}</Tag>
+                                                    ))
+                                                }
+                                            </>
+                                        )}
+                                    </Stack.Item>
+                                    <Stack.Item alignSelf="flex-end" style={{width: '30%'}}>
+                                        <Stack direction="column" alignItems="flex-end">
+                                            <Stack.Item alignSelf="flex-end">
+                                                <Text as="h4" color={THEME.color.slateGray} fontStyle="italic">
+                                                    ajouté par CNSP
+                                                </Text>
+                                            </Stack.Item>
+                                        </Stack>
+                                    </Stack.Item>
+                                </Stack>
+                            </Stack.Item>
+                        </Stack>
+                    </Stack.Item>
                 </Stack>
-              </Stack.Item>
-            </Stack>
-          </Stack.Item>
-        </Stack>
-      </FlexboxGrid.Item>
-    </Wrapper>
-  )
+            </FlexboxGrid.Item>
+        </Wrapper>
+    )
 }
 
 const ActionNavControl: React.FC<{ action: Action; onClick: any }> = ({action, onClick}) => {
-  const {actionId} = useParams()
-  const actionData = action.data as unknown as ActionControl
-  return (
-    <Wrapper onClick={onClick} borderWhenSelected={action.id === actionId}>
-      <FlexboxGrid.Item style={{width: '100%', padding: '1rem'}}>
+    const {actionId} = useParams()
+    const actionData = action.data as unknown as ActionControl
+    return (
+        <Wrapper onClick={onClick} borderWhenSelected={action.id === actionId}>
+            <FlexboxGrid.Item style={{width: '100%', padding: '1rem'}}>
 
 
-        <Stack direction="row" spacing="0.5rem">
-          <Stack.Item alignSelf="flex-start" style={{paddingTop: '0.2rem'}}>
-            <Icon.ControlUnit color={THEME.color.charcoal} size={20}/>
-          </Stack.Item>
-          <Stack.Item>
-            <Stack direction="column" alignItems="flex-start" spacing="0.5rem">
-              <Stack.Item>
                 <Stack direction="row" spacing="0.5rem">
-                  <Stack.Item>
-                    <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
-                      Contrôles <b>{`${controlMethodToHumanString(actionData?.controlMethod)} - ${vesselTypeToHumanString(
-                      actionData?.vesselType
-                    )}`}</b>
-                    </Text>
-                  </Stack.Item>
-                </Stack>
-              </Stack.Item>
-              {
-                action.summaryTags?.length > 0 && (
-                  <Stack.Item>
-                    {
-                      action.summaryTags?.map((tag: string) => (
-                        <Tag accent={Accent.PRIMARY} style={{marginRight: '0.5rem'}}>{tag}</Tag>
-                      ))
-                    }
-                  </Stack.Item>
-                )
-              }
-            </Stack>
-          </Stack.Item>
+                    <Stack.Item alignSelf="flex-start" style={{paddingTop: '0.2rem'}}>
+                        <Icon.ControlUnit color={THEME.color.charcoal} size={20}/>
+                    </Stack.Item>
+                    <Stack.Item>
+                        <Stack direction="column" alignItems="flex-start" spacing="0.5rem">
+                            <Stack.Item>
+                                <Stack direction="row" spacing="0.5rem">
+                                    <Stack.Item>
+                                        <Text as="h3" weight="medium" color={THEME.color.gunMetal}>
+                                            Contrôles <b>{`${controlMethodToHumanString(actionData?.controlMethod)} - ${vesselTypeToHumanString(
+                                            actionData?.vesselType
+                                        )}`}</b>
+                                        </Text>
+                                    </Stack.Item>
+                                </Stack>
+                            </Stack.Item>
+                            {
+                                action.summaryTags?.length > 0 && (
+                                    <Stack.Item>
+                                        {
+                                            action.summaryTags?.map((tag: string) => (
+                                                <Tag key={tag} accent={Accent.PRIMARY}
+                                                     style={{marginRight: '0.5rem'}}>{tag}</Tag>
+                                            ))
+                                        }
+                                    </Stack.Item>
+                                )
+                            }
+                        </Stack>
+                    </Stack.Item>
 
 
-        </Stack>
-      </FlexboxGrid.Item>
-    </Wrapper>
-  )
+                </Stack>
+            </FlexboxGrid.Item>
+        </Wrapper>
+    )
 }
 
 const ActionSurveillance: React.FC = () => {
-  // Implementation for ActionSurveillance
-  return null
+    // Implementation for ActionSurveillance
+    return null
 }
 
 const ActionNote: React.FC = () => {
-  // Implementation for ActionNote
-  return null
+    // Implementation for ActionNote
+    return null
 }
 
 const ActionOther: React.FC = () => {
-  // Implementation for ActionOther
-  return null
+    // Implementation for ActionOther
+    return null
 }
 
 const ActionStatus: React.FC<{ action: Action; onClick: any }> = ({action, onClick}) => {
-  const {actionId} = useParams()
-  const isSelected = action.id === actionId
-  const actionData = action.data as unknown as NavActionStatus
-  return (
-    <Wrapper onClick={onClick} borderWhenSelected={false}>
-      <Stack alignItems="center" spacing="0.5rem">
-        <Stack.Item>
-          <StatusColorTag status={actionData?.status}/>
-        </Stack.Item>
-        <Stack.Item>
-          <Text
-            as="h3"
-            weight="normal"
-            color={isSelected ? THEME.color.charcoal : THEME.color.slateGray}
-            decoration={isSelected ? 'underline' : 'normal'}
-          >
-            <p
-              style={{
-                whiteSpace: 'nowrap',
-                overflow: 'hidden',
-                textOverflow: 'ellipsis',
-                maxWidth: '500px'
-              }}
-            >
-              <b>{`${mapStatusToText(actionData?.status)} - ${actionData?.isStart ? 'début' : 'fin'} ${
-                !!actionData?.reason ? ' - ' + statusReasonToHumanString(actionData?.reason) : ''
-              }`}</b>
-              {!!actionData?.observations ? ' - ' + actionData?.observations : ''}
-            </p>
-          </Text>
-        </Stack.Item>
-        <Stack.Item>
-          <Icon.EditUnbordered size={20} color={THEME.color.slateGray}/>
-        </Stack.Item>
-      </Stack>
-    </Wrapper>
-  )
+    const {actionId} = useParams()
+    const isSelected = action.id === actionId
+    const actionData = action.data as unknown as NavActionStatus
+    return (
+        <Wrapper onClick={onClick} borderWhenSelected={false}>
+            <Stack alignItems="center" spacing="0.5rem">
+                <Stack.Item>
+                    <StatusColorTag status={actionData?.status}/>
+                </Stack.Item>
+                <Stack.Item>
+                    <Text
+                        as="h3"
+                        weight="normal"
+                        color={isSelected ? THEME.color.charcoal : THEME.color.slateGray}
+                        decoration={isSelected ? 'underline' : 'normal'}
+                    >
+                        <p
+                            style={{
+                                whiteSpace: 'nowrap',
+                                overflow: 'hidden',
+                                textOverflow: 'ellipsis',
+                                maxWidth: '500px'
+                            }}
+                        >
+                            <b>{`${mapStatusToText(actionData?.status)} - ${actionData?.isStart ? 'début' : 'fin'} ${
+                                !!actionData?.reason ? ' - ' + statusReasonToHumanString(actionData?.reason) : ''
+                            }`}</b>
+                            {!!actionData?.observations ? ' - ' + actionData?.observations : ''}
+                        </p>
+                    </Text>
+                </Stack.Item>
+                <Stack.Item>
+                    <Icon.EditUnbordered size={20} color={THEME.color.slateGray}/>
+                </Stack.Item>
+            </Stack>
+        </Wrapper>
+    )
 }
 
 const ActionContact: React.FC = () => {
-  // Implementation for ActionContact
-  return null
+    // Implementation for ActionContact
+    return null
 }
 
 const getActionComponent = (action: Action) => {
-  if (action.source === MissionSourceEnum.MONITORENV) {
-    if (action.type === ActionTypeEnum.CONTROL) {
-      return ActionEnvControl
-    }
-  } else if (action.source === MissionSourceEnum.MONITORFISH) {
-    if (action.type === ActionTypeEnum.CONTROL) {
-      return ActionFishControl
+    if (action.source === MissionSourceEnum.MONITORENV) {
+        if (action.type === ActionTypeEnum.CONTROL) {
+            return ActionEnvControl
+        }
+    } else if (action.source === MissionSourceEnum.MONITORFISH) {
+        if (action.type === ActionTypeEnum.CONTROL) {
+            return ActionFishControl
+        }
+    } else if (action.source === MissionSourceEnum.RAPPORTNAV) {
+        switch (action.type) {
+            case ActionTypeEnum.CONTROL:
+                return ActionNavControl
+            case ActionTypeEnum.STATUS:
+                return ActionStatus
+            default:
+                return null
+        }
     }
-  } else if (action.source === MissionSourceEnum.RAPPORTNAV) {
-    switch (action.type) {
-      case ActionTypeEnum.CONTROL:
-        return ActionNavControl
-      case ActionTypeEnum.STATUS:
-        return ActionStatus
-      default:
-        return null
-    }
-  }
-  return null
+    return null
 }
 
 const MissionTimelineItem: React.FC<MissionTimelineItemProps> = ({
-                                                                   action,
-                                                                   onClick
-                                                                   // componentMap = ActionComponentMap
+                                                                     action,
+                                                                     onClick
+                                                                     // componentMap = ActionComponentMap
                                                                  }) => {
-  const Component = getActionComponent(action)
-  // const Component = componentMap[action.actionType]
+    const Component = getActionComponent(action)
+    // const Component = componentMap[action.actionType]
 
-  if (!Component) {
-    return null
-  }
+    if (!Component) {
+        return null
+    }
 
-  return <Component action={action as any} onClick={onClick}/>
+    return <Component action={action as any} onClick={onClick}/>
 }
 
 export default MissionTimelineItem
diff --git a/frontend/src/pam/missions/missions.tsx b/frontend/src/pam/missions/missions.tsx
index 511d534d..7e6efd5f 100644
--- a/frontend/src/pam/missions/missions.tsx
+++ b/frontend/src/pam/missions/missions.tsx
@@ -9,59 +9,59 @@ import { GET_MISSIONS } from './queries'
 import { GET_MISSION_BY_ID } from '../mission/queries'
 
 const Missions: React.FC = () => {
-  const {loading, error, data, client} = useQuery(GET_MISSIONS)
+    const {loading, data, client} = useQuery(GET_MISSIONS)
 
-  const prefetchMission = async (missionId: string) => {
-    await client.query({
-      query: GET_MISSION_BY_ID,
-      variables: {missionId}
-    })
-  }
+    const prefetchMission = async (missionId: string) => {
+        await client.query({
+            query: GET_MISSION_BY_ID,
+            variables: {missionId}
+        })
+    }
 
-  if (data) {
-    const missions: Mission[] = data.missions as Mission[]
-    return (
-      <FlexboxGrid
-        // align="middle"
-        justify="center"
-        style={{padding: '4rem 2rem', display: 'flex', flex: 1}}
-      >
-        <FlexboxGrid.Item as={Col} colspan={24} xxl={16}>
-          <Stack direction="column" alignItems="flex-start">
-            <Stack.Item>
-              <h3>Missions</h3>
-            </Stack.Item>
+    if (data) {
+        const missions: Mission[] = data.missions as Mission[]
+        return (
+            <FlexboxGrid
+                // align="middle"
+                justify="center"
+                style={{padding: '4rem 2rem', display: 'flex', flex: 1}}
+            >
+                <FlexboxGrid.Item as={Col} colspan={24} xxl={16}>
+                    <Stack direction="column" alignItems="flex-start">
+                        <Stack.Item>
+                            <h3>Missions</h3>
+                        </Stack.Item>
 
-            <Stack.Item style={{paddingTop: '2rem'}}>
-              <h4>Mes rapports de mission</h4>
-            </Stack.Item>
+                        <Stack.Item style={{paddingTop: '2rem'}}>
+                            <h4>Mes rapports de mission</h4>
+                        </Stack.Item>
 
-            <Stack.Item alignSelf="flex-end" style={{paddingTop: '2rem'}}>
-              <Link to={`/pam/missions/0`}>
-                <Button accent={Accent.PRIMARY} Icon={Icon.Plus} size={Size.NORMAL} disabled={true}>
-                  Créer un rapport de mission
-                </Button>
-              </Link>
-            </Stack.Item>
+                        <Stack.Item alignSelf="flex-end" style={{paddingTop: '2rem'}}>
+                            <Link to={`/pam/missions/0`}>
+                                <Button accent={Accent.PRIMARY} Icon={Icon.Plus} size={Size.NORMAL} disabled={true}>
+                                    Créer un rapport de mission
+                                </Button>
+                            </Link>
+                        </Stack.Item>
 
-            <Stack.Item style={{paddingTop: '2rem', width: '100%'}}>
-              {loading ? (
-                <Stack justifyContent="center" style={{marginTop: '5rem'}}>
-                  <Stack.Item>
-                    <Loader/>
-                  </Stack.Item>
-                </Stack>
-              ) : (
-                <MissionsList missions={missions} prefetchMission={prefetchMission}/>
-              )}
-            </Stack.Item>
-          </Stack>
-        </FlexboxGrid.Item>
-      </FlexboxGrid>
-    )
-  }
+                        <Stack.Item style={{paddingTop: '2rem', width: '100%'}}>
+                            {loading ? (
+                                <Stack justifyContent="center" style={{marginTop: '5rem'}}>
+                                    <Stack.Item>
+                                        <Loader/>
+                                    </Stack.Item>
+                                </Stack>
+                            ) : (
+                                <MissionsList missions={missions} prefetchMission={prefetchMission}/>
+                            )}
+                        </Stack.Item>
+                    </Stack>
+                </FlexboxGrid.Item>
+            </FlexboxGrid>
+        )
+    }
 
-  return null
+    return null
 }
 
 export default Missions
diff --git a/frontend/src/types/infraction-types.ts b/frontend/src/types/infraction-types.ts
index 6d29233b..56b65402 100644
--- a/frontend/src/types/infraction-types.ts
+++ b/frontend/src/types/infraction-types.ts
@@ -30,7 +30,7 @@ export type InfractionByTarget = {
   vesselType: VesselTypeEnum
   infractions: Infraction[]
   controlTypesWithInfraction?: ControlType[]
-  targetAddedInRapportNav?: boolean
+  targetAddedByUnit?: boolean
 }
 
 export type InfractionEnvNewTarget = Infraction & {
diff --git a/frontend/src/ui/text.tsx b/frontend/src/ui/text.tsx
index 48ca18cd..a3be18c1 100644
--- a/frontend/src/ui/text.tsx
+++ b/frontend/src/ui/text.tsx
@@ -2,27 +2,27 @@ import React, { ReactNode } from 'react';
 import styled from 'styled-components';
 import { THEME } from '@mtes-mct/monitor-ui';
 
-interface TitleProps {
-  as: 'h1' | 'h2' | 'h3' | 'h4';
-  color?: string;
-  weight?: 'normal' | 'medium' | 'bold';
-  style?: 'normal' | 'italic';
-  decoration?: 'normal' | 'underline';
-  children: ReactNode;
+interface TextProps {
+    as: 'h1' | 'h2' | 'h3' | 'h4';
+    color?: string;
+    weight?: 'normal' | 'medium' | 'bold';
+    fontStyle?: 'normal' | 'italic';
+    decoration?: 'normal' | 'underline';
+    children: ReactNode;
 }
 
 const fontWeights = {
-  normal: '400',
-  medium: '500',
-  bold: '700'
+    normal: '400',
+    medium: '500',
+    bold: '700'
 };
 
 const createTitleStyled = (
-  fontSize: number,
-  fontWeight: string,
-  color: string,
-  fontStyle?: string,
-  decoration?: string
+    fontSize: number,
+    fontWeight: string,
+    color: string,
+    fontStyle?: string,
+    decoration?: string
 ) => styled.p`
   color: ${color || '#282f3e'};
   font-size: ${fontSize}px;
@@ -36,33 +36,33 @@ const createTitleStyled = (
 `;
 
 const H1 = (color: string, weight: string = 'bold', fontStyle?: string, decoration?: string) =>
-  createTitleStyled(22, weight, color, fontStyle, decoration);
+    createTitleStyled(22, weight, color, fontStyle, decoration);
 
 const H2 = (color: string, weight: string = 'bold', fontStyle?: string, decoration?: string) =>
-  createTitleStyled(16, weight, color, fontStyle, decoration);
+    createTitleStyled(16, weight, color, fontStyle, decoration);
 
 const H3 = (color: string, weight: string = 'normal', fontStyle?: string, decoration?: string) =>
-  createTitleStyled(13, weight, color, fontStyle, decoration);
+    createTitleStyled(13, weight, color, fontStyle, decoration);
 
 const H4 = (color: string, weight: string = 'normal', fontStyle?: string, decoration?: string) =>
-  createTitleStyled(11, weight, color, fontStyle, decoration);
+    createTitleStyled(11, weight, color, fontStyle, decoration);
 
 const TextComponentMap = (color: string, weight?: string, fontStyle?: string, decoration?: string) => ({
-  h1: H1(color, weight, fontStyle, decoration),
-  h2: H2(color, weight, fontStyle, decoration),
-  h3: H3(color, weight, fontStyle, decoration),
-  h4: H4(color, weight, fontStyle, decoration)
+    h1: H1(color, weight, fontStyle, decoration),
+    h2: H2(color, weight, fontStyle, decoration),
+    h3: H3(color, weight, fontStyle, decoration),
+    h4: H4(color, weight, fontStyle, decoration)
 });
 
-const Text: React.FC<TitleProps> = ({children, as, color, weight, style, decoration}) => {
-  const fontColor = color ?? THEME.color.charcoal;
-  const Component = TextComponentMap(fontColor, weight, style, decoration)[as];
+const Text: React.FC<TextProps> = ({children, as, color, weight, fontStyle, decoration}) => {
+    const fontColor = color ?? THEME.color.charcoal;
+    const Component = TextComponentMap(fontColor, weight, fontStyle, decoration)[as];
 
-  if (!Component) {
-    return null;
-  }
+    if (!Component) {
+        return null;
+    }
 
-  return <Component>{children}</Component>;
+    return <Component>{children}</Component>;
 };
 
 export default Text;
diff --git a/infra/docker/app/Dockerfile.old b/infra/docker/app/DockerfileCI
similarity index 100%
rename from infra/docker/app/Dockerfile.old
rename to infra/docker/app/DockerfileCI