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
@@ -6,9 +6,11 @@
 import { preRequestUserStateSelector } from 'lib/selectors/account-selectors';
 import { useServerCall } from 'lib/utils/action-utils';
 
+import { useModalContext } from '../modals/modal-provider.react';
 import { useSelector } from '../redux/redux-utils';
 import SWMansionIcon from '../SWMansionIcon.react';
 import css from './account-settings.css';
+import PasswordChangeModal from './password-change-modal';
 
 function AccountSettings(): React.Node {
   const sendLogoutRequest = useServerCall(logOut);
@@ -17,6 +19,12 @@
     sendLogoutRequest(preRequestUserState);
   }, [sendLogoutRequest, preRequestUserState]);
 
+  const { setModal } = useModalContext();
+  const showPasswordChangeModal = React.useCallback(
+    () => setModal(<PasswordChangeModal />),
+    [setModal],
+  );
+
   const currentUserInfo = useSelector(state => state.currentUserInfo);
   if (!currentUserInfo || currentUserInfo.anonymous) {
     return null;
@@ -41,7 +49,10 @@
             <span>Password</span>
             <span className={css.passwordContainer}>
               <span className={css.password}>******</span>
-              <a className={css.editPasswordLink}>
+              <a
+                className={css.editPasswordLink}
+                onClick={showPasswordChangeModal}
+              >
                 <SWMansionIcon icon="edit" size={22} />
               </a>
             </span>