diff --git a/native/chat/deleted-message.react.js b/native/chat/deleted-message.react.js
new file mode 100644
--- /dev/null
+++ b/native/chat/deleted-message.react.js
@@ -0,0 +1,71 @@
+// @flow
+
+import * as React from 'react';
+import { View, Text } from 'react-native';
+
+import ComposedMessage from './composed-message.react.js';
+import {
+  allCorners,
+  filterCorners,
+  getRoundedContainerStyle,
+} from './rounded-corners.js';
+import SWMansionIcon from '../components/swmansion-icon.react.js';
+import { useStyles } from '../themes/colors.js';
+import { type ChatComposedMessageInfoItemWithHeight } from '../types/chat-types.js';
+
+type Props = {
+  +item: ChatComposedMessageInfoItemWithHeight,
+};
+
+function DeletedMessage(props: Props): React.Node {
+  const { item } = props;
+
+  const cornerStyle = React.useMemo(
+    () => getRoundedContainerStyle(filterCorners(allCorners, item)),
+    [item],
+  );
+
+  const styles = useStyles(unboundStyles);
+  const containerStyle = React.useMemo(
+    () => [styles.message, cornerStyle],
+    [cornerStyle, styles.message],
+  );
+  const text = 'Deleted message';
+  return (
+    <ComposedMessage
+      item={item}
+      sendFailed={false}
+      focused={false}
+      swipeOptions="none"
+      shouldDisplayPinIndicator={false}
+    >
+      <View style={containerStyle}>
+        <SWMansionIcon name="block-2" size={16} style={styles.icon} />
+        <Text style={styles.text}>{text}</Text>
+      </View>
+    </ComposedMessage>
+  );
+}
+
+const unboundStyles = {
+  icon: {
+    marginRight: 4,
+    color: 'deletedMessageText',
+  },
+  text: {
+    fontFamily: 'Arial',
+    fontSize: 18,
+    color: 'deletedMessageText',
+    fontStyle: 'italic',
+  },
+  message: {
+    overflow: 'hidden',
+    paddingHorizontal: 12,
+    paddingVertical: 6,
+    backgroundColor: 'deletedMessageBackground',
+    flexDirection: 'row',
+    alignItems: 'center',
+  },
+};
+
+export { DeletedMessage };
diff --git a/native/chat/message.react.js b/native/chat/message.react.js
--- a/native/chat/message.react.js
+++ b/native/chat/message.react.js
@@ -11,6 +11,7 @@
 import { useCanToggleMessagePin } from 'lib/utils/message-pinning-utils.js';
 
 import type { ChatNavigationProp } from './chat.react.js';
+import { DeletedMessage } from './deleted-message.react.js';
 import MultimediaMessage from './multimedia-message.react.js';
 import { RobotextMessage } from './robotext-message.react.js';
 import { TextMessage } from './text-message.react.js';
@@ -98,7 +99,9 @@
   );
 
   const innerMessageNode = React.useMemo(() => {
-    if (item.messageShapeType === 'text') {
+    if (item.deleted) {
+      return <DeletedMessage item={item} />;
+    } else if (item.messageShapeType === 'text') {
       return (
         <TextMessage
           item={item}
diff --git a/native/themes/colors.js b/native/themes/colors.js
--- a/native/themes/colors.js
+++ b/native/themes/colors.js
@@ -154,6 +154,8 @@
   greenIndicatorOuter: designSystemColors.successDark50,
   redIndicatorInner: designSystemColors.errorPrimary,
   redIndicatorOuter: designSystemColors.errorDark50,
+  deletedMessageText: designSystemColors.shadesBlack60,
+  deletedMessageBackground: designSystemColors.shadesWhite90,
 });
 export type Colors = $Exact<typeof light>;
 
@@ -262,6 +264,8 @@
   greenIndicatorOuter: designSystemColors.successDark90,
   redIndicatorInner: designSystemColors.errorPrimary,
   redIndicatorOuter: designSystemColors.errorDark90,
+  deletedMessageText: designSystemColors.shadesWhite60,
+  deletedMessageBackground: designSystemColors.shadesBlack90,
 });
 const colors = { light, dark };