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,8 @@
+.container {
+ padding: 0 8px 16px;
+ overflow-y: scroll;
+}
+
+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,52 @@
+// @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 RoleGroupMemberList from './role-group-member-list.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(null);
+
+ const groupedMemberList = React.useMemo(
+ () =>
+ Array.from(membersGroupedByRole).map(([roleName, memberInfos], index) => (
+