diff --git a/web/modals/threads/members/members-list.react.js b/web/modals/threads/members/members-list.react.js
new file mode 100644
index 000000000..704cdebec
--- /dev/null
+++ b/web/modals/threads/members/members-list.react.js
@@ -0,0 +1,76 @@
+// @flow
+
+import classNames from 'classnames';
+import _groupBy from 'lodash/fp/groupBy';
+import _toPairs from 'lodash/fp/toPairs';
+import * as React from 'react';
+
+import { stringForUser } from 'lib/shared/user-utils';
+import {
+  type ThreadInfo,
+  type RelativeMemberInfo,
+} from 'lib/types/thread-types';
+
+import ThreadMember from './member.react';
+import css from './members-modal.css';
+
+type Props = {
+  +threadInfo: ThreadInfo,
+  +threadMembers: $ReadOnlyArray<RelativeMemberInfo>,
+};
+
+function ThreadMembersList(props: Props): React.Node {
+  const { threadMembers, threadInfo } = props;
+  const [openMenu, setOpenMenu] = React.useState(null);
+  const hasMembers = threadMembers.length > 0;
+
+  const groupedByFirstLetterMembers = React.useMemo(
+    () => _groupBy(member => stringForUser(member)[0])(threadMembers),
+    [threadMembers],
+  );
+
+  const groupedMembersList = React.useMemo(
+    () =>
+      _toPairs(groupedByFirstLetterMembers)
+        .sort((a, b) => a[0].localeCompare(b[0]))
+        .map(([letter, users]) => {
+          const userList = users
+            .sort((a, b) => stringForUser(a).localeCompare(stringForUser(b)))
+            .map((user: RelativeMemberInfo) => (
+              <ThreadMember
+                key={user.id}
+                memberInfo={user}
+                threadInfo={threadInfo}
+                setOpenMenu={setOpenMenu}
+                isMenuOpen={openMenu === user.id}
+              />
+            ));
+          const letterHeader = (
+            <h5 className={css.memberletterHeader} key={letter}>
+              {letter.toUpperCase()}
+            </h5>
+          );
+          return (
+            <React.Fragment key={letter}>
+              {letterHeader}
+              {userList}
+            </React.Fragment>
+          );
+        }),
+    [groupedByFirstLetterMembers, openMenu, threadInfo],
+  );
+  let content = groupedMembersList;
+  if (!hasMembers) {
+    content = (
+      <div className={css.noUsers}>
+        No matching users were found in the thread!
+      </div>
+    );
+  }
+  const membersListClasses = classNames(css.membersList, {
+    [css.noScroll]: !!openMenu,
+  });
+  return <div className={membersListClasses}>{content}</div>;
+}
+
+export default ThreadMembersList;
diff --git a/web/modals/threads/members/members-modal.css b/web/modals/threads/members/members-modal.css
index a4e8bc26b..b285d61eb 100644
--- a/web/modals/threads/members/members-modal.css
+++ b/web/modals/threads/members/members-modal.css
@@ -1,25 +1,46 @@
+div.membersList {
+  overflow: scroll;
+  padding: 8px 0;
+  color: var(--members-modal-member-text);
+}
+
+div.noScroll {
+  overflow: hidden;
+}
+
 div.memberContainer {
   display: flex;
   flex-direction: row;
   justify-content: space-between;
   padding: 8px 16px;
 }
 
 div.memberContainer:hover {
   color: var(--members-modal-member-text-hover);
 }
 
 div.memberContainerWithMenuOpen {
   color: var(--members-modal-member-text-hover);
 }
 
 div.memberInfo {
   font-size: var(--l-font-18);
   display: flex;
   align-items: center;
   gap: 10px;
 }
 
 div.memberAction {
   position: relative;
 }
+
+h5.memberletterHeader {
+  margin: 16px;
+  color: var(--members-modal-member-text);
+  font-size: var(--s-font-14);
+}
+
+div.noUsers {
+  padding-top: 16px;
+  text-align: center;
+}
diff --git a/web/theme.css b/web/theme.css
index f0487b42c..b2ac84d86 100644
--- a/web/theme.css
+++ b/web/theme.css
@@ -1,137 +1,139 @@
 :root {
   /* Never use color values defined here directly in CSS. Add color variables to "Color Theme" below
 
      The reason we never use color values defined here directly in CSS is
 
       1. It makes changing themes from light / dark / user generated impossible.
       2. Gives the programmer context into the color being used.
       3. If our color system changes it's much easier to change color values in one place.
 
      Add a color value to the theme below, and then use it in your CSS.
      naming convention:
      - bg: background.
      - fg: foreground.
      - color: text-color
    */
   --shades-white-100: #ffffff;
   --shades-white-90: #f5f5f5;
   --shades-white-80: #ebebeb;
   --shades-white-70: #e0e0e0;
   --shades-white-60: #cccccc;
 
   --shades-black-100: #0a0a0a;
   --shades-black-90: #1f1f1f;
   --shades-black-80: #404040;
   --shades-black-70: #666666;
   --shades-black-60: #808080;
 
   --violet-dark-100: #7e57c2;
   --violet-dark-80: #6d49ab;
   --violet-dark-60: #563894;
   --violet-dark-40: #44297a;
   --violet-dark-20: #331f5c;
 
   --violet-light-100: #ae94db;
   --violet-light-80: #b9a4df;
   --violet-light-60: #d3c6ec;
   --violet-light-40: #e8e0f5;
   --violet-light-20: #f3f0fa;
 
   --success-light-10: #d5f6e3;
   --success-light-50: #6cdf9c;
   --success-primary: #00c853;
   --success-dark-50: #029841;
   --success-dark-90: #034920;
 
   --error-light-10: #feebe6;
   --error-light-50: #f9947b;
   --error-primary: #f53100;
   --error-dark-50: #b62602;
   --error-dark-90: #4f1203;
 
   --bg: var(--shades-black-100);
   --fg: var(--shades-white-100);
   --color-disabled: var(--shades-black-60);
   --text-input-bg: var(--shades-black-80);
   --text-input-color: var(--shades-white-60);
   --text-input-placeholder: var(--shades-white-60);
   --border: var(--shades-black-80);
   --error: var(--error-primary);
   --success: var(--success-dark-50);
 
   /* Color Theme */
   --btn-bg-primary: var(--violet-dark-100);
   --btn-bg-primary-hover: var(--violet-dark-80);
   --btn-bg-danger: var(--error-primary);
   --chat-bg: var(--violet-dark-80);
   --chat-confirmation-icon: var(--violet-dark-100);
   --keyserver-selection: var(--violet-dark-60);
   --thread-selection: var(--violet-light-80);
   --thread-hover-bg: var(--shades-black-90);
   --thread-active-bg: var(--shades-black-80);
   --chat-timestamp-color: var(--shades-black-60);
   --tool-tip-bg: var(--shades-black-80);
   --tool-tip-color: var(--shades-white-60);
   --border-color: var(--shades-black-80);
   --calendar-chevron: var(--shades-black-60);
   --calendar-day-bg: var(--shades-black-60);
   --calendar-day-selected-color: var(--violet-dark-80);
   --community-bg: var(--shades-black-90);
   --unread-bg: var(--error-primary);
   --settings-btn-bg: var(--violet-dark-100);
   --modal-bg: var(--shades-black-90);
   --join-bg: var(--shades-black-90);
   --help-color: var(--shades-black-60);
   --breadcrumb-color: var(--shades-white-60);
   --breadcrumb-color-unread: var(--shades-white-60);
   --btn-secondary-border: var(--shades-black-60);
   --thread-color-read: var(--shades-black-60);
   --thread-from-color-read: var(--shades-black-80);
   --thread-last-message-color-read: var(--shades-black-60);
   --relationship-button-green: var(--success-dark-50);
   --relationship-button-red: var(--error-primary);
   --relationship-button-text: var(--fg);
   --disconnected-bar-alert-bg: var(--error-dark-50);
   --disconnected-bar-alert-color: var(--shades-white-100);
   --disconnected-bar-connecting-bg: var(--shades-white-70);
   --disconnected-bar-connecting-color: var(--shades-black-100);
   --permission-color: var(--shades-white-60);
   --thread-top-bar-color: var(--shades-white-100);
   --thread-top-bar-menu-color: var(--shades-white-70);
   --thread-ancestor-keyserver-border: var(--shades-black-70);
   --thread-ancestor-color-light: var(--shades-white-70);
   --thread-ancestor-color-dark: var(--shades-black-100);
   --thread-ancestor-separator-color: var(--shades-white-60);
   --text-message-default-background: var(--shades-black-80);
   --message-action-tooltip-bg: var(--shades-black-90);
   --menu-bg: var(--shades-black-90);
   --menu-bg-light: var(--shades-black-80);
   --menu-separator-color: var(--shades-black-80);
   --menu-color: var(--shades-black-60);
   --menu-color-light: var(--shades-white-60);
   --menu-color-hover: var(--shades-white-100);
   --menu-color-dangerous: var(--error-primary);
   --menu-color-dangerous-hover: var(--error-light-50);
   --app-list-icon-read-only-color: var(--shades-black-60);
   --app-list-icon-enabled-color: var(--success-primary);
   --app-list-icon-disabled-color: var(--shades-white-80);
   --account-settings-label: var(--shades-black-60);
   --account-button-color: var(--violet-dark-100);
   --chat-thread-list-menu-color: var(--shades-white-60);
   --chat-thread-list-menu-bg: var(--shades-black-80);
   --chat-thread-list-menu-active-color: var(--shades-white-60);
   --chat-thread-list-menu-active-bg: var(--shades-black-90);
   --search-clear-color: var(--shades-white-100);
   --search-clear-bg: var(--shades-black-70);
   --search-input-color: var(--shades-white-100);
   --search-input-placeholder: var(--shades-black-60);
   --search-icon-color: var(--shades-black-60);
   --tabs-header-active-color: var(--shades-white-100);
   --tabs-header-active-border: var(--violet-light-100);
   --tabs-header-background-color: var(--shades-black-60);
   --tabs-header-background-border: var(--shades-black-80);
   --tabs-header-background-color-hover: var(--shades-white-80);
   --tabs-header-background-border-hover: var(--shades-black-70);
+  --members-modal-member-text: var(--shades-black-60);
+  --members-modal-member-text-hover: var(--shades-white-100);
   --label-default-bg: var(--violet-dark-80);
   --label-default-color: var(--shades-white-80);
 }