diff --git a/web/chat/member-list-sidebar/member-list-sidebar-header.css b/web/chat/member-list-sidebar/member-list-sidebar-header.css
new file mode 100644
--- /dev/null
+++ b/web/chat/member-list-sidebar/member-list-sidebar-header.css
@@ -0,0 +1,28 @@
+.container {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 16px;
+  height: 100%;
+}
+
+.headerContent {
+  display: flex;
+  align-items: center;
+  column-gap: 16px;
+}
+
+.headerLabel {
+  color: var(--text-background-primary-default);
+  font-size: var(--m-font-16);
+  font-weight: var(--semi-bold);
+}
+
+.closeButton {
+  display: flex;
+  color: var(--button-label-tertiary-default);
+}
+.closeButton:hover {
+  cursor: pointer;
+  color: var(--button-label-tertiary-hover);
+}
diff --git a/web/chat/member-list-sidebar/member-list-sidebar-header.react.js b/web/chat/member-list-sidebar/member-list-sidebar-header.react.js
new file mode 100644
--- /dev/null
+++ b/web/chat/member-list-sidebar/member-list-sidebar-header.react.js
@@ -0,0 +1,52 @@
+// @flow
+
+import * as React from 'react';
+
+import { useModalContext } from 'lib/components/modal-provider.react.js';
+import SWMansionIcon from 'lib/components/SWMansionIcon.react.js';
+
+import css from './member-list-sidebar-header.css';
+import { useMemberListSidebarContext } from './member-list-sidebar-provider.react.js';
+import AddButton from '../../components/add-button.react.js';
+import { AddMembersModal } from '../../modals/threads/members/add-members-modal.react.js';
+
+type Props = {
+  +threadID: string,
+};
+
+function MemberListSidebarHeader(props: Props): React.Node {
+  const { threadID } = props;
+
+  const { pushModal, popModal } = useModalContext();
+
+  const onClickAddButton = React.useCallback(() => {
+    pushModal(<AddMembersModal onClose={popModal} threadID={threadID} />);
+  }, [popModal, pushModal, threadID]);
+
+  const { setShowMemberListSidebar } = useMemberListSidebarContext();
+
+  const onClickCloseButton = React.useCallback(() => {
+    setShowMemberListSidebar(false);
+  }, [setShowMemberListSidebar]);
+
+  const memberListSidebarHeader = React.useMemo(
+    () => (
+      <>
+        <div className={css.container}>
+          <div className={css.headerContent}>
+            <div className={css.headerLabel}>Member list</div>
+            <AddButton onClick={onClickAddButton} />
+          </div>
+          <div className={css.closeButton} onClick={onClickCloseButton}>
+            <SWMansionIcon icon="cross-small" size={24} />
+          </div>
+        </div>
+      </>
+    ),
+    [onClickAddButton, onClickCloseButton],
+  );
+
+  return memberListSidebarHeader;
+}
+
+export default MemberListSidebarHeader;