diff --git a/client/src/components/Message.tsx b/client/src/components/Message.tsx
index 0256e83..152f455 100644
--- a/client/src/components/Message.tsx
+++ b/client/src/components/Message.tsx
@@ -35,7 +35,14 @@
 
 import { EmojiButton, MoreButton, ReplyMessageButton } from './Button';
 import ConversationAvatar from './ConversationAvatar';
-import { OppositeArrowsIcon, TrashBinIcon, TwoSheetsIcon } from './SvgIcon';
+import {
+  ArrowLeftCurved,
+  ArrowLeftDown,
+  ArrowRightUp,
+  OppositeArrowsIcon,
+  TrashBinIcon,
+  TwoSheetsIcon,
+} from './SvgIcon';
 
 type MessagePosition = 'start' | 'end';
 
@@ -90,15 +97,60 @@
   isLastOfGroup: boolean;
 }
 
-const MessageCall = ({ isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageCallProps) => {
+const MessageCall = ({ message, isAccountMessage, isFirstOfGroup, isLastOfGroup }: MessageCallProps) => {
   const position = isAccountMessage ? 'end' : 'start';
-  const bubbleColor = isAccountMessage ? '#005699' : '#E5E5E5';
-  const textColor = isAccountMessage ? 'white' : 'black';
+
+  const { t } = useTranslation();
+  const { bubbleColor, Icon, text, textColor } = useMemo(() => {
+    const callDuration = dayjs.duration(parseInt(message?.duration || ''));
+    if (callDuration.asSeconds() === 0) {
+      if (isAccountMessage) {
+        return {
+          text: t('message_call_outgoing_missed'),
+          Icon: ArrowLeftCurved,
+          textColor: 'white',
+          bubbleColor: '#005699' + '80', // opacity 50%
+        };
+      } else {
+        return {
+          text: t('message_call_incoming_missed'),
+          Icon: ArrowLeftCurved,
+          textColor: 'black',
+          bubbleColor: '#C6C6C6',
+        };
+      }
+    } else {
+      const minutes = Math.floor(callDuration.asMinutes()).toString().padStart(2, '0');
+      const seconds = callDuration.format('ss');
+      const interpolations = {
+        duration: `${minutes}:${seconds}`,
+      };
+      if (isAccountMessage) {
+        return {
+          text: t('message_call_outgoing', interpolations),
+          Icon: ArrowRightUp,
+          textColor: 'white',
+          bubbleColor: '#005699',
+        };
+      } else {
+        return {
+          text: t('message_call_incoming', interpolations),
+          Icon: ArrowLeftDown,
+          textcolor: 'black',
+          bubbleColor: '#E5E5E5',
+        };
+      }
+    }
+  }, [isAccountMessage, message, t]);
+
   return (
     <Bubble position={position} isFirstOfGroup={isFirstOfGroup} isLastOfGroup={isLastOfGroup} bubbleColor={bubbleColor}>
-      <Typography variant="body1" color={textColor} textAlign={position}>
-        &quot;Appel&quot;
-      </Typography>
+      <Stack direction="row" spacing="10px" alignItems="center">
+        <Icon sx={{ fontSize: '16px', color: textColor }} />
+        <Typography variant="body1" color={textColor} textAlign={position} fontWeight="bold" textTransform="uppercase">
+          {text}
+        </Typography>
+      </Stack>
     </Bubble>
   );
 };
diff --git a/client/src/components/SvgIcon.tsx b/client/src/components/SvgIcon.tsx
index ba2a563..92875b7 100644
--- a/client/src/components/SvgIcon.tsx
+++ b/client/src/components/SvgIcon.tsx
@@ -64,6 +64,37 @@
   );
 };
 
+export const ArrowLeftCurved = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="0 0 16 8.814">
+      <path d="M8.184 8.813a2.761 2.761 0 0 1-1.964-.815L1.627 3.409l1.782-1.782L7.998 6.22a.268.268 0 0 0 .368 0L14.218.368 16 2.15l-5.852 5.848a2.761 2.761 0 0 1-1.964.815Z" />
+      <path d="M2.518 7.555H0v-6.3A1.259 1.259 0 0 1 1.259 0h6.3v2.518H2.518Z" />
+    </SvgIcon>
+  );
+};
+
+export const ArrowLeftDown = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="6 4.5 10.5 12.5">
+      <path
+        d="M15.25009097 14.59477981h-6.3300199l8.5305362-8.5305362-1.45522575-1.45522576-8.5305362 8.5305362v-6.3300199l-2.05555942.01909189v9.82171319l9.84009797.01838477Z"
+        strokeWidth=".5"
+      />
+    </SvgIcon>
+  );
+};
+
+export const ArrowRightUp = (props: SvgIconProps) => {
+  return (
+    <SvgIcon {...props} viewBox="4.5 5.5 11.5 12.5">
+      <path
+        d="m6.82975394 7.48428721 6.3293128.0007071-8.53053621 8.53053622 1.45522575 1.45522575 8.53053621-8.5305362v6.3300199l2.05555941-.01909188V5.4294349l-9.84009796-.01838477Z"
+        strokeWidth=".5"
+      />
+    </SvgIcon>
+  );
+};
+
 export const AudioCallIcon = (props: SvgIconProps) => {
   return (
     <SvgIcon {...props} viewBox="0 0 15.338 16">
diff --git a/client/src/dayjsInitializer.ts b/client/src/dayjsInitializer.ts
index b2ce5c3..cff6ed1 100644
--- a/client/src/dayjsInitializer.ts
+++ b/client/src/dayjsInitializer.ts
@@ -20,12 +20,14 @@
 
 import dayjs from 'dayjs';
 import dayOfYear from 'dayjs/plugin/dayOfYear';
+import duration from 'dayjs/plugin/duration';
 import isBetween from 'dayjs/plugin/isBetween';
 import isToday from 'dayjs/plugin/isToday';
 import isYesterday from 'dayjs/plugin/isYesterday';
 import localizedFormat from 'dayjs/plugin/localizedFormat';
 
 dayjs.extend(dayOfYear);
+dayjs.extend(duration);
 dayjs.extend(isBetween);
 dayjs.extend(isToday);
 dayjs.extend(isYesterday);
diff --git a/client/src/locale/en/translation.json b/client/src/locale/en/translation.json
index a7de038..a0bae10 100644
--- a/client/src/locale/en/translation.json
+++ b/client/src/locale/en/translation.json
@@ -4,6 +4,10 @@
   "conversation_title_three": "{{member0}}, {{member1}} and {{member2}}",
   "conversation_title_four": "{{member0}}, {{member1}}, {{member2}}, +1 other member",
   "conversation_title_more": "{{member0}}, {{member1}}, {{member2}}, +{{excess}} other members",
+  "message_call_outgoing_missed": "Missed outgoing call",
+  "message_call_incoming_missed": "Missed incoming call",
+  "message_call_outgoing": "Outgoing call - {{duration}}",
+  "message_call_incoming": "Incoming call - {{duration}}",
   "message_swarm_created": "Swarm created",
   "message_user_joined": "{{user}} joined",
   "message_input_placeholder_one": "Write to {{member0}}",
diff --git a/client/src/locale/fr/translation.json b/client/src/locale/fr/translation.json
index 936d83d..0da1c1a 100644
--- a/client/src/locale/fr/translation.json
+++ b/client/src/locale/fr/translation.json
@@ -4,6 +4,10 @@
   "conversation_title_three": "{{member0}}, {{member1}} et {{member2}}",
   "conversation_title_four": "{{member0}}, {{member1}}, {{member2}}, +1 autre membre",
   "conversation_title_more": "{{member01}}, {{member1}}, {{member2}}, +{{excess}} autres membres",
+  "message_call_outgoing_missed": "Appel sortant manqué",
+  "message_call_incoming_missed": "Appel entrant manqué",
+  "message_call_outgoing": "Appel entrant - {{duration}}",
+  "message_call_incoming": "Appel sortant - {{duration}}",
   "message_swarm_created": "Le Swarm a été créé",
   "message_user_joined": "{{user}} s'est joint",
   "message_input_placeholder_one": "Écrire à {{member0}}",