diff --git a/web/components/stepper.css b/web/components/stepper.css
deleted file mode 100644
index f18870657..000000000
--- a/web/components/stepper.css
+++ /dev/null
@@ -1,43 +0,0 @@
-.stepperContainer {
-  display: flex;
-  flex-direction: column;
-  flex-shrink: 0;
-}
-
-.stepperItem {
-  overflow-y: auto;
-  height: 100%;
-}
-
-.stepperFooter {
-  display: flex;
-  justify-content: flex-end;
-  gap: 12px;
-  margin-top: 5px;
-}
-
-.button {
-  position: relative;
-}
-
-.buttonContainer {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-
-.hide {
-  visibility: hidden;
-  height: 0;
-}
-
-.errorMessage {
-  color: var(--error);
-  font-style: italic;
-
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-
-  margin-top: 5px;
-}
diff --git a/web/components/stepper.react.js b/web/components/stepper.react.js
deleted file mode 100644
index 7b52a21b4..000000000
--- a/web/components/stepper.react.js
+++ /dev/null
@@ -1,108 +0,0 @@
-// @flow
-
-import classnames from 'classnames';
-import * as React from 'react';
-
-import Button from './button.react.js';
-import css from './stepper.css';
-import LoadingIndicator from '../loading-indicator.react.js';
-
-export type ButtonProps = {
-  +content: React.Node,
-  +disabled?: boolean,
-  +loading?: boolean,
-  +onClick: () => mixed,
-};
-
-type ButtonType = 'prev' | 'next';
-
-type ActionButtonProps = {
-  +buttonProps: ButtonProps,
-  +type: ButtonType,
-};
-
-function ActionButton(props: ActionButtonProps) {
-  const { buttonProps, type } = props;
-  const { content, loading, disabled, onClick } = buttonProps;
-
-  const buttonContent = loading ? (
-    <>
-      <div className={css.hide}>{content}</div>
-      <LoadingIndicator status="loading" />
-    </>
-  ) : (
-    content
-  );
-
-  return (
-    <Button
-      className={css.button}
-      variant={type === 'prev' ? 'outline' : 'filled'}
-      disabled={disabled || loading}
-      onClick={onClick}
-    >
-      <div className={css.buttonContainer}>{buttonContent}</div>
-    </Button>
-  );
-}
-
-type ItemProps = {
-  +content: React.Node,
-  +name: string,
-  +errorMessage?: string,
-  +prevProps?: ButtonProps,
-  +nextProps?: ButtonProps,
-};
-
-function StepperItem(props: ItemProps): React.Node {
-  const { content, errorMessage, prevProps, nextProps } = props;
-
-  const prevButton = React.useMemo(
-    () =>
-      prevProps ? <ActionButton buttonProps={prevProps} type="prev" /> : null,
-    [prevProps],
-  );
-
-  const nextButton = React.useMemo(
-    () =>
-      nextProps ? <ActionButton buttonProps={nextProps} type="next" /> : null,
-    [nextProps],
-  );
-
-  return (
-    <>
-      <div className={css.stepperItem}>{content}</div>
-      <div className={css.errorMessage}>{errorMessage}</div>
-      <div className={css.stepperFooter}>
-        {prevButton}
-        {nextButton}
-      </div>
-    </>
-  );
-}
-
-type ContainerProps = {
-  +activeStep: string,
-  +className?: string,
-  +children: React.ChildrenArray<React.Element<typeof StepperItem>>,
-};
-
-function StepperContainer(props: ContainerProps): React.Node {
-  const { children, activeStep, className = '' } = props;
-
-  const index = new Map(
-    React.Children.toArray(children).map(child => [child.props.name, child]),
-  );
-
-  const activeComponent = index.get(activeStep);
-  const styles = classnames(css.stepperContainer, className);
-
-  return <div className={styles}>{activeComponent}</div>;
-}
-
-const Stepper = {
-  Container: StepperContainer,
-  Item: StepperItem,
-};
-
-export default Stepper;
diff --git a/web/modals/components/add-members-group.react.js b/web/modals/components/add-members-group.react.js
deleted file mode 100644
index 959791176..000000000
--- a/web/modals/components/add-members-group.react.js
+++ /dev/null
@@ -1,47 +0,0 @@
-// @flow
-
-import * as React from 'react';
-
-import type { UserListItem } from 'lib/types/user-types.js';
-
-import AddMembersItem from './add-members-item.react.js';
-import css from './add-members.css';
-
-type AddMemberItemGroupProps = {
-  +header: ?string,
-  +userInfos: $ReadOnlyArray<UserListItem>,
-  +onUserClick: (userID: string) => void,
-  +usersAdded: $ReadOnlySet<string>,
-};
-function AddMembersItemGroup(props: AddMemberItemGroupProps): React.Node {
-  const { userInfos, onUserClick, usersAdded, header } = props;
-
-  const sortedUserInfos = React.useMemo(() => {
-    return [...userInfos].sort((a, b) => a.username.localeCompare(b.username));
-  }, [userInfos]);
-
-  const userInfosComponents = React.useMemo(
-    () =>
-      sortedUserInfos.map(userInfo => (
-        <AddMembersItem
-          key={userInfo.id}
-          userInfo={userInfo}
-          onClick={onUserClick}
-          userAdded={usersAdded.has(userInfo.id)}
-        />
-      )),
-    [onUserClick, sortedUserInfos, usersAdded],
-  );
-  const headerComponent = header ? (
-    <div className={css.addMemberItemsGroupHeader}>{header}:</div>
-  ) : null;
-
-  return (
-    <>
-      {headerComponent}
-      {userInfosComponents}
-    </>
-  );
-}
-
-export default AddMembersItemGroup;
diff --git a/web/modals/components/add-members-item.react.js b/web/modals/components/add-members-item.react.js
deleted file mode 100644
index fd04b16cb..000000000
--- a/web/modals/components/add-members-item.react.js
+++ /dev/null
@@ -1,55 +0,0 @@
-// @flow
-
-import * as React from 'react';
-
-import type { UserListItem } from 'lib/types/user-types.js';
-
-import css from './add-members.css';
-import UserAvatar from '../../avatars/user-avatar.react.js';
-import Button from '../../components/button.react.js';
-
-type AddMembersItemProps = {
-  +userInfo: UserListItem,
-  +onClick: (userID: string) => void,
-  +userAdded: boolean,
-};
-
-function AddMemberItem(props: AddMembersItemProps): React.Node {
-  const { userInfo, onClick, userAdded = false } = props;
-
-  const canBeAdded = !userInfo.alert;
-
-  const onClickCallback = React.useCallback(() => {
-    if (!canBeAdded) {
-      return;
-    }
-    onClick(userInfo.id);
-  }, [canBeAdded, onClick, userInfo.id]);
-
-  const action = React.useMemo(() => {
-    if (!canBeAdded) {
-      return userInfo.alert?.title;
-    }
-    if (userAdded) {
-      return <span className={css.danger}>Remove</span>;
-    } else {
-      return 'Add';
-    }
-  }, [canBeAdded, userAdded, userInfo.alert?.title]);
-
-  return (
-    <Button
-      className={css.addMemberItem}
-      onClick={onClickCallback}
-      disabled={!canBeAdded}
-    >
-      <div className={css.userInfoContainer}>
-        <UserAvatar size="S" userID={userInfo.id} />
-        <div className={css.username}>{userInfo.username}</div>
-      </div>
-      <div className={css.label}>{action}</div>
-    </Button>
-  );
-}
-
-export default AddMemberItem;
diff --git a/web/modals/components/add-members-list.react.js b/web/modals/components/add-members-list.react.js
deleted file mode 100644
index 3b1257bbf..000000000
--- a/web/modals/components/add-members-list.react.js
+++ /dev/null
@@ -1,40 +0,0 @@
-// @flow
-
-import * as React from 'react';
-
-import type { UserListItem } from 'lib/types/user-types.js';
-
-import AddMembersItemGroup from './add-members-group.react.js';
-
-type MemberGroupItem = {
-  +header: ?string,
-  +userInfos: $ReadOnlyArray<UserListItem>,
-};
-
-type Props = {
-  +switchUser: string => void,
-  +pendingUsersToAdd: $ReadOnlySet<string>,
-  +sortedGroupedUsersList: $ReadOnlyArray<MemberGroupItem>,
-};
-
-function AddMembersList(props: Props): React.Node {
-  const { switchUser, pendingUsersToAdd, sortedGroupedUsersList } = props;
-
-  const addMembersList = React.useMemo(
-    () =>
-      sortedGroupedUsersList.map(({ header, userInfos }) => (
-        <AddMembersItemGroup
-          key={header}
-          header={header}
-          userInfos={userInfos}
-          onUserClick={switchUser}
-          usersAdded={pendingUsersToAdd}
-        />
-      )),
-    [sortedGroupedUsersList, switchUser, pendingUsersToAdd],
-  );
-
-  return addMembersList;
-}
-
-export default AddMembersList;
diff --git a/web/modals/components/add-members.css b/web/modals/components/add-members.css
deleted file mode 100644
index 984e8a79a..000000000
--- a/web/modals/components/add-members.css
+++ /dev/null
@@ -1,47 +0,0 @@
-div.addMemberItemsGroupHeader {
-  font-size: var(--s-font-14);
-  color: var(--add-members-group-header-color);
-  margin: 16px;
-}
-
-button.addMemberItem {
-  justify-content: space-between;
-  color: var(--add-members-item-color);
-  font-size: var(--l-font-18);
-  width: 100%;
-}
-
-button.addMemberItem:hover {
-  color: var(--add-members-item-color-hover);
-}
-
-button.addMemberItem:disabled {
-  color: var(--add-members-item-disabled-color);
-  cursor: not-allowed;
-}
-
-button.addMemberItem:hover:disabled {
-  color: var(--add-members-item-disabled-color-hover);
-}
-
-button.addMemberItem .label {
-  padding: 8px 16px;
-}
-
-button.addMemberItem .danger {
-  color: var(--add-members-remove-pending-color);
-}
-button.addMemberItem:hover .danger {
-  color: var(--add-members-remove-pending-color-hover);
-}
-
-div.userInfoContainer {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding-left: 16px;
-}
-
-div.username {
-  margin-left: 8px;
-}
diff --git a/web/modals/threads/members/add-members-list-content.react.js b/web/modals/threads/members/add-members-list-content.react.js
deleted file mode 100644
index 1b42f4cc9..000000000
--- a/web/modals/threads/members/add-members-list-content.react.js
+++ /dev/null
@@ -1,76 +0,0 @@
-// @flow
-
-import _groupBy from 'lodash/fp/groupBy.js';
-import _toPairs from 'lodash/fp/toPairs.js';
-import * as React from 'react';
-
-import type { UserListItem } from 'lib/types/user-types.js';
-
-import AddMembersList from '../../components/add-members-list.react.js';
-
-type Props = {
-  +userListItems: $ReadOnlyArray<UserListItem>,
-  +pendingUsersToAdd: $ReadOnlySet<string>,
-  +switchUser: string => void,
-  +hasParentThread: boolean,
-};
-
-function AddMembersListContent(props: Props): React.Node {
-  const { userListItems, pendingUsersToAdd, switchUser, hasParentThread } =
-    props;
-
-  const groupedAvailableUsersList = React.useMemo(
-    () => _groupBy(userInfo => userInfo.notice)(userListItems),
-    [userListItems],
-  );
-
-  const membersInParentThread = React.useMemo(() => {
-    if (!groupedAvailableUsersList['undefined']) {
-      return null;
-    }
-    const label = hasParentThread ? 'Users in parent channel' : null;
-    return [label, groupedAvailableUsersList['undefined']];
-  }, [groupedAvailableUsersList, hasParentThread]);
-
-  const membersNotInParentThread = React.useMemo(
-    () =>
-      _toPairs(groupedAvailableUsersList)
-        .filter(group => group[0] !== 'undefined')
-        .sort((a, b) => a[0].localeCompare(b[0]))
-        .map(([header, users]) => [
-          header.charAt(0).toUpperCase() + header.substring(1),
-          users,
-        ]),
-    [groupedAvailableUsersList],
-  );
-
-  const usersUnavailableToAdd = React.useMemo(() => {
-    const usersUnavailable = userListItems.filter(user => user.alert);
-    if (!usersUnavailable.length) {
-      return null;
-    }
-    return ['Unavailable users', usersUnavailable];
-  }, [userListItems]);
-
-  const sortedGroupedUsersList = React.useMemo(
-    () =>
-      [
-        membersInParentThread,
-        ...membersNotInParentThread,
-        usersUnavailableToAdd,
-      ]
-        .filter(Boolean)
-        .map(([header, userInfos]) => ({ header, userInfos })),
-    [membersInParentThread, membersNotInParentThread, usersUnavailableToAdd],
-  );
-
-  return (
-    <AddMembersList
-      switchUser={switchUser}
-      pendingUsersToAdd={pendingUsersToAdd}
-      sortedGroupedUsersList={sortedGroupedUsersList}
-    />
-  );
-}
-
-export default AddMembersListContent;