diff --git a/web/chat/edit-text-message.css b/web/chat/edit-text-message.css
new file mode 100644
--- /dev/null
+++ b/web/chat/edit-text-message.css
@@ -0,0 +1,56 @@
+.editMessage {
+  padding: 10px;
+  background-color: var(--shades-black-90);
+  border-radius: 8px;
+}
+
+.bottomRow {
+  padding-top: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.buttons {
+  margin-left: auto;
+  margin-right: 0;
+}
+
+.iconContainer {
+  color: var(--error);
+}
+
+.iconContainer > svg {
+  height: 16px;
+  display: flex;
+}
+
+.failedText {
+  font-size: 13px;
+  white-space: nowrap;
+  flex: 1;
+  align-items: center;
+}
+
+.errorColor {
+  color: var(--error);
+}
+
+.whiteColor {
+  color: var(--fg);
+  margin-left: 2px;
+}
+
+.failedText > div {
+  float: left;
+  margin-right: 2px;
+}
+
+.buttons > button {
+  padding: 4px;
+  border-radius: 4px;
+  float: right;
+}
+
+.saveButton {
+  margin-left: 8px;
+}
diff --git a/web/chat/edit-text-message.react.js b/web/chat/edit-text-message.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/edit-text-message.react.js
@@ -0,0 +1,88 @@
+// @flow
+
+import * as React from 'react';
+import { XCircle as XCircleIcon } from 'react-feather';
+
+import type { ChatMessageInfoItem } from 'lib/selectors/chat-selectors.js';
+import { type ThreadInfo } from 'lib/types/thread-types.js';
+
+import cssInputBar from './chat-input-bar.css';
+import ChatInputTextArea from './chat-input-text-area.react.js';
+import ComposedMessage from './composed-message.react.js';
+import { useEditModalContext } from './edit-message-provider.js';
+import css from './edit-text-message.css';
+import type { ButtonColor } from '../components/button.react.js';
+import Button from '../components/button.react.js';
+
+type Props = {
+  +item: ChatMessageInfoItem,
+  +threadInfo: ThreadInfo,
+  +background: boolean,
+  +width: ?number,
+};
+
+function EditTextMessage(props: Props): React.Node {
+  const { background, threadInfo } = props;
+  const { editState, clearEditModal } = useEditModalContext();
+
+  const editedMessageDraft = editState?.editedMessageDraft ?? '';
+  const threadColor = threadInfo.color;
+  const saveButtonColors: ButtonColor = {
+    backgroundColor: `#${threadColor}`,
+    color: 'var(--fg)',
+  };
+  const cancelButtonColor: ButtonColor = {
+    color: 'var(--fg)',
+  };
+  let editFailed;
+  if (editState?.isError) {
+    editFailed = (
+      <div className={css.failedText}>
+        <div className={css.iconContainer}>
+          <XCircleIcon />
+        </div>
+        <div className={css.errorColor}>Edit failed.</div>
+        <div className={css.whiteColor}>Please try again.</div>
+      </div>
+    );
+  }
+
+  return (
+    <div className={css.editMessage} style={{ width: props.width }}>
+      <div className={cssInputBar.inputBarTextInput}>
+        <ChatInputTextArea
+          focus={!background}
+          currentText={editedMessageDraft}
+        />
+      </div>
+      <div className={css.bottomRow}>
+        {editFailed}
+        <div className={css.buttons}>
+          <Button className={css.saveButton} buttonColor={saveButtonColors}>
+            Save (enter)
+          </Button>
+          <Button onClick={clearEditModal} buttonColor={cancelButtonColor}>
+            Cancel (esc)
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ComposedEditTextMessage: React.ComponentType<Props> = React.memo<Props>(
+  function ComposedEditTextMessage(props) {
+    const { background, width, ...restProps } = props;
+    return (
+      <ComposedMessage
+        {...restProps}
+        sendFailed={false}
+        shouldDisplayPinIndicator={false}
+      >
+        <EditTextMessage {...props} />
+      </ComposedMessage>
+    );
+  },
+);
+
+export { EditTextMessage, ComposedEditTextMessage };