diff --git a/ts/components/conversation/message/message-item/DataExtractionNotification.tsx b/ts/components/conversation/message/message-item/DataExtractionNotification.tsx
index c33b8e3c5..9d93625fe 100644
--- a/ts/components/conversation/message/message-item/DataExtractionNotification.tsx
+++ b/ts/components/conversation/message/message-item/DataExtractionNotification.tsx
@@ -1,10 +1,8 @@
 import React from 'react';
 import { PropsForDataExtractionNotification } from '../../../../models/messageType';
 import { SignalService } from '../../../../protobuf';
-import { Flex } from '../../../basic/Flex';
-import { SpacerSM, Text } from '../../../basic/Text';
-import { SessionIcon } from '../../../icon';
 import { ExpirableReadableMessage } from './ExpirableReadableMessage';
+import { NotificationBubble } from './notification-bubble/NotificationBubble';
 
 export const DataExtractionNotification = (props: PropsForDataExtractionNotification) => {
   const { name, type, source, messageId } = props;
@@ -23,22 +21,7 @@ export const DataExtractionNotification = (props: PropsForDataExtractionNotifica
       key={`readable-message-${messageId}`}
       isControlMessage={true}
     >
-      <Flex
-        container={true}
-        flexDirection="column"
-        alignItems="center"
-        justifyContent="center"
-        width="90%"
-        maxWidth="700px"
-        margin="5px auto 10px auto" // top margin is smaller that bottom one to make the stopwatch icon of expirable message closer to its content
-        padding="5px 10px"
-        id={`msg-${messageId}`}
-        style={{ textAlign: 'center' }}
-      >
-        <SessionIcon iconType="save" iconColor="inherit" iconSize="large" />
-        <SpacerSM />
-        <Text text={contentText} ellipsisOverflow={true} />
-      </Flex>
+      <NotificationBubble notificationText={contentText} iconType="save" />
     </ExpirableReadableMessage>
   );
 };