diff --git a/web/chat/edit-text-message.css b/web/chat/edit-text-message.css
new file mode 100644
index 000000000..4ab58dfbe
--- /dev/null
+++ b/web/chat/edit-text-message.css
@@ -0,0 +1,60 @@
+.editMessage {
+  padding: 10px;
+  background-color: var(--modal-bg);
+  border-radius: 8px;
+}
+
+.backgroundEditMessage {
+  width: 1000px;
+}
+
+.bottomRow {
+  padding-top: 10px;
+  display: flex;
+  align-items: center;
+}
+
+.buttons {
+  margin-left: auto;
+  margin-right: 0;
+}
+
+.icon {
+  color: var(--error);
+  height: 16px;
+  display: flex;
+  float: left;
+  margin-right: 2px;
+}
+
+.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;
+}
+
+.smallButton {
+  padding: 3px 8px;
+  border-radius: 4px;
+  font-size: 12px;
+  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
index 000000000..acdbce082
--- /dev/null
+++ b/web/chat/edit-text-message.react.js
@@ -0,0 +1,102 @@
+// @flow
+
+import classNames from 'classnames';
+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,
+};
+
+const cancelButtonColor: ButtonColor = {
+  backgroundColor: 'transparent',
+};
+
+function EditTextMessage(props: Props): React.Node {
+  const { background, threadInfo } = props;
+  const { editState, clearEditModal } = useEditModalContext();
+
+  const editedMessageDraft = editState?.editedMessageDraft ?? '';
+  const threadColor = threadInfo.color;
+  const saveButtonColor: ButtonColor = React.useMemo(
+    () => ({
+      backgroundColor: `#${threadColor}`,
+    }),
+    [threadColor],
+  );
+  let editFailed;
+  if (editState?.isError) {
+    editFailed = (
+      <div className={css.failedText}>
+        <XCircleIcon className={css.icon} />
+        <div className={css.errorColor}>Edit failed.</div>
+        <div className={css.whiteColor}>Please try again.</div>
+      </div>
+    );
+  }
+
+  const containerStyle = classNames(css.editMessage, {
+    [css.backgroundEditMessage]: background,
+  });
+
+  return (
+    <div className={containerStyle}>
+      <div className={cssInputBar.inputBarTextInput}>
+        <ChatInputTextArea
+          focus={!background}
+          currentText={editedMessageDraft}
+        />
+      </div>
+      <div className={css.bottomRow}>
+        {editFailed}
+        <div className={css.buttons}>
+          <Button
+            className={[css.saveButton, css.smallButton]}
+            variant="filled"
+            buttonColor={saveButtonColor}
+          >
+            Save (enter)
+          </Button>
+          <Button
+            className={css.smallButton}
+            variant="filled"
+            buttonColor={cancelButtonColor}
+            onClick={clearEditModal}
+          >
+            Cancel (esc)
+          </Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ComposedEditTextMessage: React.ComponentType<Props> = React.memo<Props>(
+  function ComposedEditTextMessage(props) {
+    const { background, ...restProps } = props;
+    return (
+      <ComposedMessage
+        {...restProps}
+        sendFailed={false}
+        shouldDisplayPinIndicator={false}
+      >
+        <EditTextMessage {...props} />
+      </ComposedMessage>
+    );
+  },
+);
+
+export { EditTextMessage, ComposedEditTextMessage };