diff --git a/web/account/log-in-form.react.js b/web/account/log-in-form.react.js
--- a/web/account/log-in-form.react.js
+++ b/web/account/log-in-form.react.js
@@ -63,7 +63,7 @@
           password,
           ...extraInfo,
         });
-        modalContext.clearModal();
+        modalContext.clearModals();
         return result;
       } catch (e) {
         if (e.message === 'invalid_parameters') {
diff --git a/web/app.react.js b/web/app.react.js
--- a/web/app.react.js
+++ b/web/app.react.js
@@ -79,7 +79,7 @@
   +activeThreadCurrentlyUnread: boolean,
   // Redux dispatch functions
   +dispatch: Dispatch,
-  +modal: ?React.Node,
+  +modals: $ReadOnlyArray<?React.Node>,
 };
 class App extends React.PureComponent<Props> {
   componentDidMount() {
@@ -134,7 +134,7 @@
           <FocusHandler />
           <VisibilityHandler />
           {content}
-          {this.props.modal}
+          {this.props.modals}
         </MenuProvider>
       </DndProvider>
     );
@@ -222,6 +222,13 @@
 
     const dispatch = useDispatch();
     const modalContext = useModalContext();
+    const modals = React.useMemo(
+      () =>
+        modalContext.modals.map((modal, idx) => (
+          <React.Fragment key={idx}>{modal}</React.Fragment>
+        )),
+      [modalContext.modals],
+    );
 
     return (
       <App
@@ -231,7 +238,7 @@
         loggedIn={loggedIn}
         activeThreadCurrentlyUnread={activeThreadCurrentlyUnread}
         dispatch={dispatch}
-        modal={modalContext.modal}
+        modals={modals}
       />
     );
   },
diff --git a/web/calendar/day.react.js b/web/calendar/day.react.js
--- a/web/calendar/day.react.js
+++ b/web/calendar/day.react.js
@@ -45,7 +45,7 @@
   +nextLocalID: number,
   +timeZone: ?string,
   +dispatch: Dispatch,
-  +setModal: (modal: ?React.Node) => void,
+  +pushModal: (modal: ?React.Node) => void,
 };
 type State = {
   +pickerOpen: boolean,
@@ -216,7 +216,7 @@
 
   createNewEntry = (threadID: string) => {
     if (!this.props.loggedIn) {
-      this.props.setModal(<LogInFirstModal inOrderTo="edit this calendar" />);
+      this.props.pushModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     const viewerID = this.props.viewerID;
@@ -234,7 +234,7 @@
 
   onHistory = (event: SyntheticEvent<HTMLAnchorElement>) => {
     event.preventDefault();
-    this.props.setModal(
+    this.props.pushModal(
       <HistoryModal mode="day" dayString={this.props.dayString} />,
     );
   };
@@ -273,7 +273,7 @@
         nextLocalID={nextLocalID}
         timeZone={timeZone}
         dispatch={dispatch}
-        setModal={modalContext.setModal}
+        pushModal={modalContext.pushModal}
       />
     );
   },
diff --git a/web/calendar/entry.react.js b/web/calendar/entry.react.js
--- a/web/calendar/entry.react.js
+++ b/web/calendar/entry.react.js
@@ -68,8 +68,8 @@
   +createEntry: (info: CreateEntryInfo) => Promise<CreateEntryPayload>,
   +saveEntry: (info: SaveEntryInfo) => Promise<SaveEntryResult>,
   +deleteEntry: (info: DeleteEntryInfo) => Promise<DeleteEntryResult>,
-  +setModal: (modal: ?React.Node) => void,
-  +clearModal: () => void,
+  +pushModal: (modal: ?React.Node) => void,
+  +clearModals: () => void,
 };
 type State = {
   +focused: boolean,
@@ -259,7 +259,7 @@
 
   onChange: (event: SyntheticEvent<HTMLTextAreaElement>) => void = event => {
     if (!this.props.loggedIn) {
-      this.props.setModal(<LogInFirstModal inOrderTo="edit this calendar" />);
+      this.props.pushModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     const target = event.target;
@@ -386,9 +386,9 @@
             type: concurrentModificationResetActionType,
             payload: { id: entryID, dbText: e.payload.db },
           });
-          this.props.clearModal();
+          this.props.clearModals();
         };
-        this.props.setModal(
+        this.props.pushModal(
           <ConcurrentModificationModal onRefresh={onRefresh} />,
         );
       }
@@ -399,7 +399,7 @@
   onDelete: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
     if (!this.props.loggedIn) {
-      this.props.setModal(<LogInFirstModal inOrderTo="edit this calendar" />);
+      this.props.pushModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     this.dispatchDelete(this.props.entryInfo.id, true);
@@ -440,7 +440,7 @@
 
   onHistory: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
-    this.props.setModal(
+    this.props.pushModal(
       <HistoryModal
         mode="entry"
         dayString={dateString(
@@ -490,8 +490,8 @@
         deleteEntry={callDeleteEntry}
         dispatchActionPromise={dispatchActionPromise}
         dispatch={dispatch}
-        setModal={modalContext.setModal}
-        clearModal={modalContext.clearModal}
+        pushModal={modalContext.pushModal}
+        clearModals={modalContext.clearModals}
       />
     );
   },
diff --git a/web/calendar/filter-panel.react.js b/web/calendar/filter-panel.react.js
--- a/web/calendar/filter-panel.react.js
+++ b/web/calendar/filter-panel.react.js
@@ -42,7 +42,7 @@
   +filteredThreadIDs: ?$ReadOnlySet<string>,
   +includeDeleted: boolean,
   +dispatch: Dispatch,
-  +setModal: (modal: ?React.Node) => void,
+  +pushModal: (modal: ?React.Node) => void,
 };
 type State = {
   +query: string,
@@ -202,7 +202,7 @@
   }
 
   onClickSettings = (threadID: string) => {
-    this.props.setModal(<ThreadSettingsModal threadID={threadID} />);
+    this.props.pushModal(<ThreadSettingsModal threadID={threadID} />);
   };
 
   onChangeQuery = (event: SyntheticEvent<HTMLInputElement>) => {
@@ -377,7 +377,7 @@
         filterThreadSearchIndex={filterThreadSearchIndex}
         includeDeleted={includeDeleted}
         dispatch={dispatch}
-        setModal={modalContext.setModal}
+        pushModal={modalContext.pushModal}
       />
     );
   },
diff --git a/web/chat/chat-thread-list-see-more-sidebars.react.js b/web/chat/chat-thread-list-see-more-sidebars.react.js
--- a/web/chat/chat-thread-list-see-more-sidebars.react.js
+++ b/web/chat/chat-thread-list-see-more-sidebars.react.js
@@ -16,11 +16,11 @@
 };
 function ChatThreadListSeeMoreSidebars(props: Props): React.Node {
   const { unread, showingSidebarsInline, threadInfo } = props;
-  const { setModal } = useModalContext();
+  const { pushModal } = useModalContext();
 
   const onClick = React.useCallback(
-    () => setModal(<SidebarListModal threadInfo={threadInfo} />),
-    [setModal, threadInfo],
+    () => pushModal(<SidebarListModal threadInfo={threadInfo} />),
+    [pushModal, threadInfo],
   );
   const buttonText = showingSidebarsInline ? 'See more...' : 'See sidebars...';
   return (
diff --git a/web/chat/thread-menu.react.js b/web/chat/thread-menu.react.js
--- a/web/chat/thread-menu.react.js
+++ b/web/chat/thread-menu.react.js
@@ -39,13 +39,13 @@
 };
 
 function ThreadMenu(props: ThreadMenuProps): React.Node {
-  const { setModal, clearModal } = useModalContext();
+  const { pushModal, clearModals } = useModalContext();
 
   const { threadInfo } = props;
 
   const onClickSettings = React.useCallback(
-    () => setModal(<ThreadSettingsModal threadID={threadInfo.id} />),
-    [setModal, threadInfo.id],
+    () => pushModal(<ThreadSettingsModal threadID={threadInfo.id} />),
+    [pushModal, threadInfo.id],
   );
 
   const settingsItem = React.useMemo(() => {
@@ -61,10 +61,10 @@
 
   const onClickMembers = React.useCallback(
     () =>
-      setModal(
-        <ThreadMembersModal threadID={threadInfo.id} onClose={clearModal} />,
+      pushModal(
+        <ThreadMembersModal threadID={threadInfo.id} onClose={clearModals} />,
       ),
-    [clearModal, setModal, threadInfo.id],
+    [clearModals, pushModal, threadInfo.id],
   );
   const membersItem = React.useMemo(() => {
     if (threadInfo.type === threadTypes.PERSONAL) {
@@ -91,8 +91,8 @@
   }, [childThreads]);
 
   const onClickSidebars = React.useCallback(
-    () => setModal(<SidebarListModal threadInfo={threadInfo} />),
-    [setModal, threadInfo],
+    () => pushModal(<SidebarListModal threadInfo={threadInfo} />),
+    [pushModal, threadInfo],
   );
 
   const sidebarItem = React.useMemo(() => {
@@ -120,10 +120,10 @@
 
   const onClickViewSubchannels = React.useCallback(
     () =>
-      setModal(
-        <SubchannelsModal threadID={threadInfo.id} onClose={clearModal} />,
+      pushModal(
+        <SubchannelsModal threadID={threadInfo.id} onClose={clearModals} />,
       ),
-    [clearModal, setModal, threadInfo.id],
+    [clearModals, pushModal, threadInfo.id],
   );
 
   const viewSubchannelsItem = React.useMemo(() => {
@@ -161,19 +161,19 @@
       leaveThreadActionTypes,
       callLeaveThread(threadInfo.id),
     );
-    clearModal();
-  }, [callLeaveThread, clearModal, dispatchActionPromise, threadInfo.id]);
+    clearModals();
+  }, [callLeaveThread, clearModals, dispatchActionPromise, threadInfo.id]);
 
   const onClickLeaveThread = React.useCallback(
     () =>
-      setModal(
+      pushModal(
         <ConfirmLeaveThreadModal
           threadInfo={threadInfo}
-          onClose={clearModal}
+          onClose={clearModals}
           onConfirm={onConfirmLeaveThread}
         />,
       ),
-    [clearModal, onConfirmLeaveThread, setModal, threadInfo],
+    [clearModals, onConfirmLeaveThread, pushModal, threadInfo],
   );
 
   const leaveThreadItem = React.useMemo(() => {
diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -108,7 +108,7 @@
     text: string,
   ) => Promise<SendMessageResult>,
   +newThread: (request: ClientNewThreadRequest) => Promise<NewThreadResult>,
-  +setModal: (modal: ?React.Node) => void,
+  +pushModal: (modal: ?React.Node) => void,
 };
 type State = {
   +pendingUploads: {
@@ -512,14 +512,14 @@
     files: $ReadOnlyArray<File>,
   ): Promise<boolean> {
     const selectionTime = Date.now();
-    const { setModal } = this.props;
+    const { pushModal } = this.props;
 
     const appendResults = await Promise.all(
       files.map(file => this.appendFile(file, selectionTime)),
     );
 
     if (appendResults.some(({ result }) => !result.success)) {
-      setModal(<InvalidUploadModal />);
+      pushModal(<InvalidUploadModal />);
 
       const time = Date.now() - selectionTime;
       const reports = [];
@@ -1264,7 +1264,7 @@
         newThread={callNewThread}
         dispatch={dispatch}
         dispatchActionPromise={dispatchActionPromise}
-        setModal={modalContext.setModal}
+        pushModal={modalContext.pushModal}
       />
     );
   },
diff --git a/web/media/multimedia-modal.react.js b/web/media/multimedia-modal.react.js
--- a/web/media/multimedia-modal.react.js
+++ b/web/media/multimedia-modal.react.js
@@ -13,7 +13,7 @@
 
 type Props = {
   ...BaseProps,
-  +clearModal: (modal: ?React.Node) => void,
+  +clearModals: (modal: ?React.Node) => void,
 };
 
 class MultimediaModal extends React.PureComponent<Props> {
@@ -35,7 +35,7 @@
       >
         <img src={this.props.uri} />
         <XCircleIcon
-          onClick={this.props.clearModal}
+          onClick={this.props.clearModals}
           className={css.closeMultimediaModal}
         />
       </div>
@@ -50,7 +50,7 @@
     event: SyntheticEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.target === this.overlay) {
-      this.props.clearModal();
+      this.props.clearModals();
     }
   };
 
@@ -58,7 +58,7 @@
     event: SyntheticKeyboardEvent<HTMLDivElement>,
   ) => void = event => {
     if (event.keyCode === 27) {
-      this.props.clearModal();
+      this.props.clearModals();
     }
   };
 }
@@ -66,7 +66,7 @@
 function ConnectedMultiMediaModal(props: BaseProps): React.Node {
   const modalContext = useModalContext();
 
-  return <MultimediaModal {...props} clearModal={modalContext.clearModal} />;
+  return <MultimediaModal {...props} clearModals={modalContext.clearModals} />;
 }
 
 export default ConnectedMultiMediaModal;
diff --git a/web/media/multimedia.react.js b/web/media/multimedia.react.js
--- a/web/media/multimedia.react.js
+++ b/web/media/multimedia.react.js
@@ -24,7 +24,7 @@
 };
 type Props = {
   ...BaseProps,
-  +setModal: (modal: ?React.Node) => void,
+  +pushModal: (modal: ?React.Node) => void,
 };
 
 class Multimedia extends React.PureComponent<Props> {
@@ -44,7 +44,7 @@
   render(): React.Node {
     let progressIndicator, errorIndicator, removeButton;
 
-    const { pendingUpload, remove, setModal } = this.props;
+    const { pendingUpload, remove, pushModal } = this.props;
     if (pendingUpload) {
       const { progressPercent, failed } = pendingUpload;
 
@@ -80,7 +80,7 @@
       this.props.multimediaImageCSSClass,
     ];
     let onClick;
-    if (setModal) {
+    if (pushModal) {
       imageContainerClasses.push(css.clickable);
       onClick = this.onClick;
     }
@@ -111,16 +111,16 @@
   onClick: (event: SyntheticEvent<HTMLSpanElement>) => void = event => {
     event.stopPropagation();
 
-    const { setModal, uri } = this.props;
-    invariant(setModal, 'should be set');
-    setModal(<MultimediaModal uri={uri} />);
+    const { pushModal, uri } = this.props;
+    invariant(pushModal, 'should be set');
+    pushModal(<MultimediaModal uri={uri} />);
   };
 }
 
 function ConnectedMultimediaContainer(props: BaseProps): React.Node {
   const modalContext = useModalContext();
 
-  return <Multimedia {...props} setModal={modalContext.setModal} />;
+  return <Multimedia {...props} pushModal={modalContext.pushModal} />;
 }
 
 export default ConnectedMultimediaContainer;
diff --git a/web/modals/account/log-in-first-modal.react.js b/web/modals/account/log-in-first-modal.react.js
--- a/web/modals/account/log-in-first-modal.react.js
+++ b/web/modals/account/log-in-first-modal.react.js
@@ -13,14 +13,14 @@
 
 type Props = {
   ...BaseProps,
-  +setModal: (modal: ?React.Node) => void,
-  +clearModal: () => void,
+  +pushModal: (modal: ?React.Node) => void,
+  +clearModals: () => void,
 };
 
 class LogInFirstModal extends React.PureComponent<Props> {
   render(): React.Node {
     return (
-      <Modal name="Log in" onClose={this.props.clearModal}>
+      <Modal name="Log in" onClose={this.props.clearModals}>
         <div className={css['modal-body']}>
           <p>
             {`In order to ${this.props.inOrderTo}, you'll first need to `}
@@ -40,7 +40,7 @@
 
   onClickLogIn: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
-    this.props.setModal(<LogInModal />);
+    this.props.pushModal(<LogInModal />);
   };
 }
 
@@ -50,8 +50,8 @@
   return (
     <LogInFirstModal
       {...props}
-      setModal={modalContext.setModal}
-      clearModal={modalContext.clearModal}
+      pushModal={modalContext.pushModal}
+      clearModals={modalContext.clearModals}
     />
   );
 }
diff --git a/web/modals/account/log-in-modal.react.js b/web/modals/account/log-in-modal.react.js
--- a/web/modals/account/log-in-modal.react.js
+++ b/web/modals/account/log-in-modal.react.js
@@ -9,7 +9,7 @@
 function LoginModal(): React.Node {
   const modalContext = useModalContext();
   return (
-    <Modal name="Log in" onClose={modalContext.clearModal}>
+    <Modal name="Log in" onClose={modalContext.clearModals}>
       <LoginForm />
     </Modal>
   );
diff --git a/web/modals/account/user-settings-modal.react.js b/web/modals/account/user-settings-modal.react.js
--- a/web/modals/account/user-settings-modal.react.js
+++ b/web/modals/account/user-settings-modal.react.js
@@ -70,7 +70,7 @@
   ) => Promise<LogOutResult>,
   +changeUserPassword: (passwordUpdate: PasswordUpdate) => Promise<void>,
   +logOut: (preRequestUserState: PreRequestUserState) => Promise<LogOutResult>,
-  +clearModal: () => void,
+  +clearModals: () => void,
 };
 type State = {
   +newPassword: string,
@@ -113,7 +113,7 @@
 
   logOut = async () => {
     await this.props.logOut(this.props.preRequestUserState);
-    this.props.clearModal();
+    this.props.clearModals();
   };
 
   render() {
@@ -204,7 +204,7 @@
     }
 
     return (
-      <Modal name="Edit account" onClose={this.props.clearModal} size="large">
+      <Modal name="Edit account" onClose={this.props.clearModals} size="large">
         <ul className={css['tab-panel']}>
           <Tab
             name="General"
@@ -326,7 +326,7 @@
         },
         currentPassword: this.state.currentPassword,
       });
-      this.props.clearModal();
+      this.props.clearModals();
     } catch (e) {
       if (e.message === 'invalid_credentials') {
         this.setState(
@@ -375,7 +375,7 @@
         this.state.currentPassword,
         this.props.preRequestUserState,
       );
-      this.props.clearModal();
+      this.props.clearModals();
       return response;
     } catch (e) {
       const errorMessage =
@@ -431,7 +431,7 @@
         changeUserPassword={callChangeUserPassword}
         dispatchActionPromise={dispatchActionPromise}
         logOut={boundLogOut}
-        clearModal={modalContext.clearModal}
+        clearModals={modalContext.clearModals}
       />
     );
   },
diff --git a/web/modals/chat/invalid-upload.react.js b/web/modals/chat/invalid-upload.react.js
--- a/web/modals/chat/invalid-upload.react.js
+++ b/web/modals/chat/invalid-upload.react.js
@@ -7,12 +7,12 @@
 import Modal from '../modal.react';
 
 type Props = {
-  +clearModal: () => void,
+  +clearModals: () => void,
 };
 class InvalidUploadModal extends React.PureComponent<Props> {
   render(): React.Node {
     return (
-      <Modal name="Invalid upload" onClose={this.props.clearModal}>
+      <Modal name="Invalid upload" onClose={this.props.clearModals}>
         <div className={css['modal-body']}>
           <p>We don&apos;t support that file type yet :(</p>
         </div>
@@ -24,7 +24,7 @@
 function ConnectedInvalidUploadModal(): React.Node {
   const modalContext = useModalContext();
 
-  return <InvalidUploadModal clearModal={modalContext.clearModal} />;
+  return <InvalidUploadModal clearModals={modalContext.clearModals} />;
 }
 
 export default ConnectedInvalidUploadModal;
diff --git a/web/modals/chat/sidebar-list-modal.react.js b/web/modals/chat/sidebar-list-modal.react.js
--- a/web/modals/chat/sidebar-list-modal.react.js
+++ b/web/modals/chat/sidebar-list-modal.react.js
@@ -28,7 +28,7 @@
     text: '',
     results: new Set<string>(),
   });
-  const { clearModal } = useModalContext();
+  const { clearModals } = useModalContext();
 
   const sidebarInfos = useSelector(
     state => sidebarInfoSelector(state)[threadInfo.id] ?? [],
@@ -53,12 +53,12 @@
             chatThreadListCSS.sidebar,
           )}
           key={item.threadInfo.id}
-          onClick={clearModal}
+          onClick={clearModals}
         >
           <SidebarItem sidebarInfo={item} />
         </div>
       )),
-    [clearModal, listData],
+    [clearModals, listData],
   );
 
   const viewerID = useSelector(
@@ -115,7 +115,7 @@
   }
 
   return (
-    <Modal name="Sidebars" onClose={clearModal} fixedHeight={false}>
+    <Modal name="Sidebars" onClose={clearModals} fixedHeight={false}>
       <div
         className={classNames(
           globalCSS['modal-body'],
diff --git a/web/modals/concurrent-modification-modal.react.js b/web/modals/concurrent-modification-modal.react.js
--- a/web/modals/concurrent-modification-modal.react.js
+++ b/web/modals/concurrent-modification-modal.react.js
@@ -15,7 +15,7 @@
   const modalContext = useModalContext();
 
   return (
-    <Modal name="Concurrent modification" onClose={modalContext.clearModal}>
+    <Modal name="Concurrent modification" onClose={modalContext.clearModals}>
       <div className={css['modal-body']}>
         <p>
           It looks like somebody is attempting to modify that field at the same
diff --git a/web/modals/history/history-modal.react.js b/web/modals/history/history-modal.react.js
--- a/web/modals/history/history-modal.react.js
+++ b/web/modals/history/history-modal.react.js
@@ -275,7 +275,7 @@
         fetchEntries={callFetchEntries}
         fetchRevisionsForEntry={callFetchRevisionsForEntry}
         dispatchActionPromise={dispatchActionPromise}
-        onClose={modalContext.clearModal}
+        onClose={modalContext.clearModals}
       />
     );
   },
diff --git a/web/modals/modal-provider.react.js b/web/modals/modal-provider.react.js
--- a/web/modals/modal-provider.react.js
+++ b/web/modals/modal-provider.react.js
@@ -7,31 +7,44 @@
   +children: React.Node,
 };
 type ModalContextType = {
-  +modal: ?React.Node,
-  +setModal: (?React.Node) => void,
-  +clearModal: () => void,
+  +modals: $ReadOnlyArray<React.Node>,
+  +pushModal: (?React.Node) => void,
+  +popModal: () => void,
+  +clearModals: () => void,
 };
 
 const ModalContext: React.Context<?ModalContextType> = React.createContext<?ModalContextType>(
   {
-    modal: null,
-    setModal: () => {},
-    clearModal: () => {},
+    modals: [],
+    pushModal: () => {},
+    popModal: () => {},
+    clearModals: () => {},
   },
 );
 
 function ModalProvider(props: Props): React.Node {
   const { children } = props;
-  const [modal, setModal] = React.useState(null);
-  const clearModal = React.useCallback(() => setModal(null), []);
+  const [modals, setModals] = React.useState<$ReadOnlyArray<React.Node>>([]);
+  const popModal = React.useCallback(
+    () => setModals(oldModals => [...oldModals.slice(0, oldModals.length - 1)]),
+    [],
+  );
+  const pushModal = React.useCallback(newModal => {
+    if (newModal) {
+      setModals(oldModals => [...oldModals, newModal]);
+    }
+  }, []);
+
+  const clearModals = React.useCallback(() => setModals([]), []);
 
   const value = React.useMemo(
     () => ({
-      modal,
-      setModal,
-      clearModal,
+      modals,
+      pushModal,
+      popModal,
+      clearModals,
     }),
-    [modal, clearModal],
+    [modals, pushModal, popModal, clearModals],
   );
 
   return (
diff --git a/web/modals/threads/subchannels/subchannel.react.js b/web/modals/threads/subchannels/subchannel.react.js
--- a/web/modals/threads/subchannels/subchannel.react.js
+++ b/web/modals/threads/subchannels/subchannel.react.js
@@ -26,16 +26,16 @@
   } = chatThreadItem;
 
   const timeZone = useSelector(state => state.timeZone);
-  const { clearModal } = useModalContext();
+  const { clearModals } = useModalContext();
 
   const navigateToThread = useOnClickThread(threadInfo);
 
   const onClickThread = React.useCallback(
     event => {
-      clearModal();
+      clearModals();
       navigateToThread(event);
     },
-    [clearModal, navigateToThread],
+    [clearModals, navigateToThread],
   );
 
   const lastActivity = React.useMemo(
diff --git a/web/modals/threads/thread-settings-modal.react.js b/web/modals/threads/thread-settings-modal.react.js
--- a/web/modals/threads/thread-settings-modal.react.js
+++ b/web/modals/threads/thread-settings-modal.react.js
@@ -572,7 +572,7 @@
 
     if (!threadInfo) {
       return (
-        <Modal onClose={modalContext.clearModal} name="Invalid thread">
+        <Modal onClose={modalContext.clearModals} name="Invalid thread">
           <div className={css['modal-body']}>
             <p>You no longer have permission to view this thread</p>
           </div>
@@ -590,7 +590,7 @@
         deleteThread={callDeleteThread}
         changeThreadSettings={callChangeThreadSettings}
         dispatchActionPromise={dispatchActionPromise}
-        onClose={modalContext.clearModal}
+        onClose={modalContext.clearModals}
       />
     );
   },
diff --git a/web/settings/account-settings.react.js b/web/settings/account-settings.react.js
--- a/web/settings/account-settings.react.js
+++ b/web/settings/account-settings.react.js
@@ -19,10 +19,10 @@
     sendLogoutRequest(preRequestUserState);
   }, [sendLogoutRequest, preRequestUserState]);
 
-  const { setModal } = useModalContext();
+  const { pushModal } = useModalContext();
   const showPasswordChangeModal = React.useCallback(
-    () => setModal(<PasswordChangeModal />),
-    [setModal],
+    () => pushModal(<PasswordChangeModal />),
+    [pushModal],
   );
 
   const currentUserInfo = useSelector(state => state.currentUserInfo);
diff --git a/web/settings/password-change-modal.js b/web/settings/password-change-modal.js
--- a/web/settings/password-change-modal.js
+++ b/web/settings/password-change-modal.js
@@ -30,7 +30,7 @@
   +inputDisabled: boolean,
   +dispatchActionPromise: DispatchActionPromise,
   +changeUserPassword: (passwordUpdate: PasswordUpdate) => Promise<void>,
-  +clearModal: () => void,
+  +clearModals: () => void,
 };
 type State = {
   +newPassword: string,
@@ -76,7 +76,7 @@
     return (
       <Modal
         name="Change Password"
-        onClose={this.props.clearModal}
+        onClose={this.props.clearModals}
         size="large"
       >
         <div className={css['modal-body']}>
@@ -201,7 +201,7 @@
         },
         currentPassword: this.state.currentPassword,
       });
-      this.props.clearModal();
+      this.props.clearModals();
     } catch (e) {
       if (e.message === 'invalid_credentials') {
         this.setState(
@@ -256,7 +256,7 @@
         inputDisabled={inputDisabled}
         changeUserPassword={callChangeUserPassword}
         dispatchActionPromise={dispatchActionPromise}
-        clearModal={modalContext.clearModal}
+        clearModals={modalContext.clearModals}
       />
     );
   },
diff --git a/web/sidebar/community-picker.react.js b/web/sidebar/community-picker.react.js
--- a/web/sidebar/community-picker.react.js
+++ b/web/sidebar/community-picker.react.js
@@ -9,11 +9,11 @@
 import css from './community-picker.css';
 
 function CommunityPicker(): React.Node {
-  const { setModal } = useModalContext();
+  const { pushModal } = useModalContext();
 
   const setModalToUserSettings = React.useCallback(() => {
-    setModal(<UserSettingsModal />);
-  }, [setModal]);
+    pushModal(<UserSettingsModal />);
+  }, [pushModal]);
 
   return (
     <div className={css.container}>