diff --git a/web/modals/chat/delete-message-modal.css b/web/modals/chat/delete-message-modal.css
new file mode 100644
--- /dev/null
+++ b/web/modals/chat/delete-message-modal.css
@@ -0,0 +1,5 @@
+.confirmationText {
+  color: var(--pin-message-information-text-color);
+  font-size: small;
+  margin-bottom: 24px;
+}
diff --git a/web/modals/chat/delete-message-modal.react.js b/web/modals/chat/delete-message-modal.react.js
new file mode 100644
--- /dev/null
+++ b/web/modals/chat/delete-message-modal.react.js
@@ -0,0 +1,85 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
+import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
+import { useDeleteMessage } from 'lib/utils/delete-message-utils.js';
+
+import css from './delete-message-modal.css';
+import Button, { buttonThemes } from '../../components/button.react.js';
+import MessageResult from '../../components/message-result.react.js';
+import Modal from '../modal.react.js';
+
+type Props = {
+  +item: ChatMessageInfoItem,
+  +threadInfo: ThreadInfo,
+};
+
+function DeleteMessageModal(props: Props): React.Node {
+  const { item, threadInfo } = props;
+  const { popModal } = useModalContext();
+  const deleteMessage = useDeleteMessage();
+
+  const onClickDelete = React.useCallback(() => {
+    if (item.messageInfo) {
+      void deleteMessage(item.messageInfo);
+    }
+    popModal();
+  }, [deleteMessage, item.messageInfo, popModal]);
+
+  const primaryButton = React.useMemo(
+    () => (
+      <Button
+        variant="filled"
+        buttonColor={buttonThemes.danger}
+        onClick={onClickDelete}
+      >
+        Delete
+      </Button>
+    ),
+    [onClickDelete],
+  );
+
+  const secondaryButton = React.useMemo(
+    () => (
+      <Button variant="outline" onClick={popModal}>
+        Cancel
+      </Button>
+    ),
+    [popModal],
+  );
+
+  const modifiedItem = React.useMemo(
+    () => ({
+      ...item,
+      startsConversation: false,
+      startsCluster: false,
+      endsCluster: false,
+    }),
+    [item],
+  );
+
+  return (
+    <Modal
+      name="Delete Message"
+      onClose={popModal}
+      size="large"
+      primaryButton={primaryButton}
+      secondaryButton={secondaryButton}
+    >
+      <div className={css.confirmationText}>
+        Are you sure you want to delete this message? This action cannot be
+        undone.
+      </div>
+      <MessageResult
+        item={modifiedItem}
+        threadInfo={threadInfo}
+        scrollable={true}
+      />
+    </Modal>
+  );
+}
+
+export { DeleteMessageModal };
diff --git a/web/tooltips/tooltip-action-utils.js b/web/tooltips/tooltip-action-utils.js
--- a/web/tooltips/tooltip-action-utils.js
+++ b/web/tooltips/tooltip-action-utils.js
@@ -24,10 +24,7 @@
 import { messageTypes } from 'lib/types/message-types-enum.js';
 import type { ThreadInfo } from 'lib/types/minimally-encoded-thread-permissions-types.js';
 import { threadPermissions } from 'lib/types/thread-permission-types.js';
-import {
-  useCanDeleteMessage,
-  useDeleteMessage,
-} from 'lib/utils/delete-message-utils.js';
+import { useCanDeleteMessage } from 'lib/utils/delete-message-utils.js';
 import { useCanToggleMessagePin } from 'lib/utils/message-pinning-utils.js';
 
 import LabelTooltip from './label-toolitp.react.js';
@@ -49,6 +46,7 @@
 import type { PositionInfo } from '../chat/position-types.js';
 import CommIcon from '../comm-icon.react.js';
 import { InputStateContext } from '../input/input-state.js';
+import { DeleteMessageModal } from '../modals/chat/delete-message-modal.react.js';
 import TogglePinModal from '../modals/chat/toggle-pin-modal.react.js';
 import {
   useOnClickPendingSidebar,
@@ -398,7 +396,8 @@
     messageInfo,
     !!item.threadCreatedFromMessage,
   );
-  const deleteMessage = useDeleteMessage();
+  const { pushModal } = useModalContext();
+  const inputState = React.useContext(InputStateContext);
   const { clearTooltip } = useTooltipContext();
 
   return React.useMemo(() => {
@@ -406,10 +405,12 @@
       return null;
     }
     const buttonContent = <FontAwesomeIcon icon={faTrash} />;
-    const onClickDelete = async () => {
-      if (messageInfo) {
-        await deleteMessage(messageInfo);
-      }
+    const onClickDelete = () => {
+      pushModal(
+        <InputStateContext.Provider value={inputState}>
+          <DeleteMessageModal item={item} threadInfo={threadInfo} />
+        </InputStateContext.Provider>,
+      );
       clearTooltip();
     };
     return {
@@ -417,7 +418,7 @@
       onClick: onClickDelete,
       label: 'Delete',
     };
-  }, [canDeleteMessage, clearTooltip, deleteMessage, messageInfo]);
+  }, [canDeleteMessage, clearTooltip, inputState, item, pushModal, threadInfo]);
 }
 
 function useMessageTooltipActions(