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,61 @@
+.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;
+  border: none;
+  color: var(--fg);
+  white-space: nowrap;
+  flex: 1;
+  align-items: center;
+  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,100 @@
+// @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 type { EditState } 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 BaseProps = {
+  +item: ChatMessageInfoItem,
+  +threadInfo: ThreadInfo,
+  +background: boolean,
+  +width: ?number,
+};
+
+type Props = {
+  ...BaseProps,
+  +editState: ?EditState,
+  +clearEditModal: () => void,
+};
+
+function EditTextMessage(props: Props): React.Node {
+  const { editState, background, clearEditModal, threadInfo } = props;
+
+  const editedMessageDraft = editState?.editedMessageDraft ?? '';
+  const threadColor = threadInfo.color;
+  const buttonColor: ButtonColor = {
+    backgroundColor: `#${threadColor}`,
+  };
+
+  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={buttonColor}>
+            Save (enter)
+          </Button>
+          <Button onClick={clearEditModal}>Cancel (esc)</Button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
+const ConnectedEditTextMessage: React.ComponentType<BaseProps> =
+  React.memo<BaseProps>(function ConnectedEditTextMessage(props) {
+    const { editState, clearEditModal } = useEditModalContext();
+    return (
+      <EditTextMessage
+        {...props}
+        editState={editState}
+        clearEditModal={clearEditModal}
+      />
+    );
+  });
+
+const ComposedEditTextMessage: React.ComponentType<BaseProps> =
+  React.memo<BaseProps>(function ComposedEditTextMessage(props) {
+    const { background, width, ...restProps } = props;
+    return (
+      <ComposedMessage
+        {...restProps}
+        sendFailed={false}
+        shouldDisplayPinIndicator={false}
+      >
+        <ConnectedEditTextMessage {...props} />
+      </ComposedMessage>
+    );
+  });
+
+export { ConnectedEditTextMessage, ComposedEditTextMessage };