diff --git a/web/chat/chat-message-list.css b/web/chat/chat-message-list.css
--- a/web/chat/chat-message-list.css
+++ b/web/chat/chat-message-list.css
@@ -224,3 +224,11 @@
 .pinIconRight {
   right: -20px;
 }
+
+.deletedMessageContent {
+  display: flex;
+  gap: 4px;
+  align-items: center;
+  color: var(--deleted-message-color);
+  background-color: var(--deleted-message-background);
+}
diff --git a/web/chat/deleted-message.react.js b/web/chat/deleted-message.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/deleted-message.react.js
@@ -0,0 +1,39 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import SWMansionIcon from 'lib/components/swmansion-icon.react.js';
+import type { ComposableChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
+import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+
+import css from './chat-message-list.css';
+import ComposedMessage from './composed-message.react.js';
+
+type Props = {
+  +item: ComposableChatMessageInfoItem,
+  +threadInfo: ThreadInfo,
+};
+function DeletedMessage(props: Props): React.Node {
+  const messageClassName = classNames([
+    css.textMessage,
+    css.normalTextMessage,
+    css.deletedMessageContent,
+  ]);
+
+  return (
+    <ComposedMessage
+      item={props.item}
+      threadInfo={props.threadInfo}
+      shouldDisplayPinIndicator={false}
+      sendFailed={false}
+    >
+      <div className={messageClassName}>
+        <SWMansionIcon icon="block-2" size={16} />
+        <i>Deleted message</i>
+      </div>
+    </ComposedMessage>
+  );
+}
+
+export default DeletedMessage;
diff --git a/web/chat/message.react.js b/web/chat/message.react.js
--- a/web/chat/message.react.js
+++ b/web/chat/message.react.js
@@ -9,6 +9,7 @@
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 
 import css from './chat-message-list.css';
+import DeletedMessage from './deleted-message.react.js';
 import { useEditModalContext } from './edit-message-provider.js';
 import { ComposedEditTextMessage } from './edit-text-message.react.js';
 import MultimediaMessage from './multimedia-message.react.js';
@@ -35,7 +36,9 @@
   const { editState } = useEditModalContext();
 
   let message;
-  if (
+  if (item.deleted) {
+    message = <DeletedMessage item={item} threadInfo={props.threadInfo} />;
+  } else if (
     item.messageInfoType === 'composable' &&
     item.messageInfo.id &&
     editState?.messageInfo.messageInfo?.id === item.messageInfo.id
diff --git a/web/theme.css b/web/theme.css
--- a/web/theme.css
+++ b/web/theme.css
@@ -353,6 +353,10 @@
 
   /* List Item */
   --listItem-background-primary-hover: var(--shades-black-90);
+
+  /* Chat */
+  --deleted-message-background: var(--shades-black-85);
+  --deleted-message-color: var(--shades-white-60);
 }
 
 /* Light theme */
@@ -464,4 +468,8 @@
   /* List Item */
   /* @GINSU: TODO double check these values after redesign is finished */
   --listItem-background-primary-hover: var(--shades-white-70);
+
+  /* Chat */
+  --deleted-message-background: var(--shades-black-85);
+  --deleted-message-color: var(--shades-white-60);
 }