diff --git a/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitResourceList/Item.tsx b/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitResourceList/Item.tsx
index b96a2f6a23..bd471a9310 100644
--- a/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitResourceList/Item.tsx
+++ b/frontend/src/features/ControlUnit/components/ControlUnitDialog/ControlUnitResourceList/Item.tsx
@@ -1,5 +1,4 @@
 import { Accent, Icon, IconButton } from '@mtes-mct/monitor-ui'
-import { truncate } from 'lodash/fp'
 import { useCallback } from 'react'
 import styled from 'styled-components'
 
@@ -32,8 +31,7 @@ export function Item({ controlUnitResource, onEdit }: ItemProps) {
             <IconButton accent={Accent.TERTIARY} Icon={Icon.Edit} onClick={handleEdit} title="Éditer ce moyen" />
           </div>
         </InfoBoxHeader>
-        {/* 120 chars ~= 3 lines */}
-        {controlUnitResource.note && <p>{truncate({ length: 120 }, controlUnitResource.note)}</p>}
+        {controlUnitResource.note && <Note>{controlUnitResource.note}</Note>}
       </InfoBox>
     </Wrapper>
   )
@@ -53,9 +51,9 @@ const InfoBox = styled.div`
 
 const InfoBoxHeader = styled.div`
   display: flex;
+
   margin-bottom: 8px;
   color: ${p => p.theme.color.gunMetal};
-
   > div:first-child {
     display: flex;
     flex-direction: column;
@@ -63,6 +61,13 @@ const InfoBoxHeader = styled.div`
   }
 `
 
+const Note = styled.div`
+  -webkit-box-orient: vertical;
+  -webkit-line-clamp: 3;
+  display: -webkit-box;
+  overflow: hidden;
+`
+
 const Name = styled.p`
   font-weight: bold;
 `