diff --git a/frontend/cypress/e2e/side_window/mission_form/action_list.spec.ts b/frontend/cypress/e2e/side_window/mission_form/action_list.spec.ts
index 171ed43ad4..ea3973bd97 100644
--- a/frontend/cypress/e2e/side_window/mission_form/action_list.spec.ts
+++ b/frontend/cypress/e2e/side_window/mission_form/action_list.spec.ts
@@ -177,7 +177,6 @@ context('Side Window > Mission Form > Action List', () => {
     cy.get('[data-cy="mission-form-action-list"] > div').children().eq(4).contains('Action CACEM')
 
     cy.get('[data-cy="mission-form-action-list"] > div').children().eq(5).contains('03 Nov à 13:59')
-    cy.get('[data-cy="mission-form-action-list"] > div').children().eq(5).contains('Note')
     cy.get('[data-cy="mission-form-action-list"] > div').children().eq(5).contains('Une note avec des informations')
     cy.get('[data-cy="mission-form-action-list"] > div').children().eq(6).contains('Action CACEM')
   })
diff --git a/frontend/src/features/Mission/components/MissionForm/ActionList/EnvActionCard.tsx b/frontend/src/features/Mission/components/MissionForm/ActionList/EnvActionCard.tsx
index 57d0150fd6..ab177f1f61 100644
--- a/frontend/src/features/Mission/components/MissionForm/ActionList/EnvActionCard.tsx
+++ b/frontend/src/features/Mission/components/MissionForm/ActionList/EnvActionCard.tsx
@@ -3,7 +3,7 @@ import { Icon, THEME } from '@mtes-mct/monitor-ui'
 import { useMemo } from 'react'
 import styled from 'styled-components'
 
-import { ActionLabel, Head } from './styles'
+import { ActionLabel, Head, NoteContent } from './styles'
 import { getActionTitle } from './utils'
 
 type EnvActionCardProps = Readonly<{
@@ -23,14 +23,7 @@ export function EnvActionCard({ missionAction }: EnvActionCardProps) {
         ]
 
       case EnvMissionAction.MissionActionType.NOTE:
-        return [
-          getActionTitle(
-            EnvMissionAction.MISSION_ACTION_TYPE_LABEL[EnvMissionAction.MissionActionType.NOTE],
-            missionAction.observations,
-            ''
-          ),
-          Icon.Note
-        ]
+        return [<NoteContent>{missionAction.observations}</NoteContent>, Icon.Note]
 
       case EnvMissionAction.MissionActionType.SURVEILLANCE:
         return [
diff --git a/frontend/src/features/Mission/components/MissionForm/ActionList/FishActionCard.tsx b/frontend/src/features/Mission/components/MissionForm/ActionList/FishActionCard.tsx
index e3fd4cc23f..8bfc6c10ce 100644
--- a/frontend/src/features/Mission/components/MissionForm/ActionList/FishActionCard.tsx
+++ b/frontend/src/features/Mission/components/MissionForm/ActionList/FishActionCard.tsx
@@ -6,7 +6,7 @@ import { find } from 'lodash'
 import { useMemo } from 'react'
 import styled from 'styled-components'
 
-import { ActionLabel, Head } from './styles'
+import { ActionLabel, Head, NoteContent } from './styles'
 import { getActionTitle, getMissionActionInfractionsFromMissionActionFormValues } from './utils'
 import { useGetNatinfsAsOptions } from '../hooks/useGetNatinfsAsOptions'
 
@@ -48,7 +48,7 @@ export function FishActionCard({ missionAction, onRemove }: FishActionCardProps)
         return [getActionTitle('Contrôle à la débarque', vesselName, 'Navire inconnu'), Icon.Anchor]
 
       case MissionAction.MissionActionType.OBSERVATION:
-        return [getActionTitle('', missionAction.otherComments, 'Note libre à renseigner'), Icon.Note]
+        return [<NoteContent>{missionAction.otherComments ?? 'Note libre à renseigner'}</NoteContent>, Icon.Note]
 
       case MissionAction.MissionActionType.SEA_CONTROL:
         return [getActionTitle('Contrôle en mer', vesselName, 'Navire inconnu'), Icon.FleetSegment]
diff --git a/frontend/src/features/Mission/components/MissionForm/ActionList/styles.ts b/frontend/src/features/Mission/components/MissionForm/ActionList/styles.ts
index 80c42f39c2..55fe61d8a0 100644
--- a/frontend/src/features/Mission/components/MissionForm/ActionList/styles.ts
+++ b/frontend/src/features/Mission/components/MissionForm/ActionList/styles.ts
@@ -25,3 +25,13 @@ export const Head = styled.div`
     padding: 0;
   }
 `
+
+export const NoteContent = styled.div`
+  color: ${p => p.theme.color.gunMetal};
+  font: normal normal normal 14px/20px Marianne;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  overflow: hidden;
+  flex: 1;
+`
diff --git a/frontend/src/features/Mission/components/MissionForm/index.tsx b/frontend/src/features/Mission/components/MissionForm/index.tsx
index 784159b94a..4d6a19c6be 100644
--- a/frontend/src/features/Mission/components/MissionForm/index.tsx
+++ b/frontend/src/features/Mission/components/MissionForm/index.tsx
@@ -371,6 +371,7 @@ export function MissionForm() {
       <Wrapper>
         {isMissionCreatedBannerDisplayed && (
           <StyledBanner
+            closingDelay={10000}
             isClosable
             isCollapsible={false}
             isHiddenByDefault={false}
@@ -509,6 +510,8 @@ export function MissionForm() {
 
 const StyledBanner = styled(Banner)`
   left: unset;
+  width: calc(100% - 122px);
+  min-width: calc(100% - 122px);
 `
 
 const MissionCreatedText = styled.div`