diff --git a/web/chat/member-list-sidebar/member-list-sidebar.css b/web/chat/member-list-sidebar/member-list-sidebar.css
new file mode 100644
--- /dev/null
+++ b/web/chat/member-list-sidebar/member-list-sidebar.css
@@ -0,0 +1,15 @@
+.container {
+  padding: 0 8px 16px;
+  overflow-y: scroll;
+}
+
+.roleNameText {
+  color: var(--text-background-tertiary-default);
+  font-size: var(--m-font-16);
+  font-weight: var(--semi-bold);
+  margin: 16px 0 8px 8px;
+}
+
+div.noScroll {
+  overflow: hidden;
+}
diff --git a/web/chat/member-list-sidebar/member-list-sidebar.react.js b/web/chat/member-list-sidebar/member-list-sidebar.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/member-list-sidebar/member-list-sidebar.react.js
@@ -0,0 +1,48 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import { threadInfoSelector } from 'lib/selectors/thread-selectors.js';
+import { useMembersGroupedByRole } from 'lib/utils/role-utils.js';
+
+import css from './member-list-sidebar.css';
+import SortedMemberListGroup from './sorted-member-list-group.react.js';
+import { useSelector } from '../../redux/redux-utils.js';
+
+type Props = {
+  +threadID: string,
+};
+
+function MembersListSidebar(props: Props): React.Node {
+  const { threadID } = props;
+
+  const threadInfo = useSelector(state => threadInfoSelector(state)[threadID]);
+
+  const membersGroupedByRole = useMembersGroupedByRole(threadInfo);
+
+  const [openMenu, setOpenMenu] = React.useState<?string>(null);
+
+  const groupedMemberList = membersGroupedByRole.map(groupedRoleInfo => {
+    const { roleName, memberInfos } = groupedRoleInfo;
+
+    return (
+      <>
+        <div className={css.roleNameText}>{roleName}</div>
+        <SortedMemberListGroup
+          members={memberInfos}
+          threadInfo={threadInfo}
+          setOpenMenu={setOpenMenu}
+        />
+      </>
+    );
+  });
+
+  const containerClassName = classNames(css.container, {
+    [css.noScroll]: !!openMenu,
+  });
+
+  return <div className={containerClassName}>{groupedMemberList}</div>;
+}
+
+export default MembersListSidebar;