diff --git a/web/avatars/edit-thread-avatar.css b/web/avatars/edit-thread-avatar.css
new file mode 100644
--- /dev/null
+++ b/web/avatars/edit-thread-avatar.css
@@ -0,0 +1,8 @@
+.editThreadAvatarContainer {
+  position: relative;
+  height: 112px;
+  width: 112px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
diff --git a/web/avatars/edit-thread-avatar.react.js b/web/avatars/edit-thread-avatar.react.js
new file mode 100644
--- /dev/null
+++ b/web/avatars/edit-thread-avatar.react.js
@@ -0,0 +1,35 @@
+// @flow
+
+import invariant from 'invariant';
+import * as React from 'react';
+
+import { EditThreadAvatarContext } from 'lib/components/base-edit-thread-avatar-provider.react.js';
+import type { RawThreadInfo, ThreadInfo } from 'lib/types/thread-types.js';
+
+import css from './edit-thread-avatar.css';
+import ThreadAvatar from './thread-avatar.react.js';
+
+type Props = {
+  +threadInfo: RawThreadInfo | ThreadInfo,
+  +disabled?: boolean,
+};
+function EditThreadAvatar(props: Props): React.Node {
+  const editThreadAvatarContext = React.useContext(EditThreadAvatarContext);
+  invariant(editThreadAvatarContext, 'editThreadAvatarContext should be set');
+
+  const { threadAvatarSaveInProgress } = editThreadAvatarContext;
+
+  const { threadInfo } = props;
+
+  return (
+    <div className={css.editThreadAvatarContainer}>
+      <ThreadAvatar
+        threadInfo={threadInfo}
+        size="profile"
+        showSpinner={threadAvatarSaveInProgress}
+      />
+    </div>
+  );
+}
+
+export default EditThreadAvatar;
diff --git a/web/modals/threads/settings/thread-settings-general-tab.react.js b/web/modals/threads/settings/thread-settings-general-tab.react.js
--- a/web/modals/threads/settings/thread-settings-general-tab.react.js
+++ b/web/modals/threads/settings/thread-settings-general-tab.react.js
@@ -22,6 +22,7 @@
 
 import SubmitSection from './submit-section.react.js';
 import css from './thread-settings-general-tab.css';
+import EditThreadAvatar from '../../../avatars/edit-thread-avatar.react.js';
 import LoadingIndicator from '../../../loading-indicator.react.js';
 import Input from '../../input.react.js';
 import ColorSelector from '../color-selector.react.js';
@@ -146,9 +147,16 @@
     return 'Save';
   }, [threadSettingsOperationInProgress]);
 
+  const editingAvatarsOnWebEnabled = false;
+  let avatarNode;
+  if (editingAvatarsOnWebEnabled) {
+    avatarNode = <EditThreadAvatar threadInfo={threadInfo} />;
+  }
+
   return (
     <form method="POST" className={css.container}>
       <div>
+        {avatarNode}
         <div className={css.form_title}>Chat name</div>
         <div className={css.form_content}>
           <Input