diff --git a/web/src/auth/ForgetPage.js b/web/src/auth/ForgetPage.js
index b49fe48d..e09327d7 100644
--- a/web/src/auth/ForgetPage.js
+++ b/web/src/auth/ForgetPage.js
@@ -385,7 +385,7 @@ class ForgetPage extends React.Component {
                 },
               ]}
             />
-            <Popover placement="right" content={this.state.passwordPopover} open={this.state.passwordPopoverOpen}>
+            <Popover placement={window.innerWidth >= 960 ? "right" : "top"} content={this.state.passwordPopover} open={this.state.passwordPopoverOpen}>
               <Form.Item
                 name="newPassword"
                 hidden={this.state.current !== 2}
@@ -415,7 +415,7 @@ class ForgetPage extends React.Component {
                   }}
                   onFocus={() => {
                     this.setState({
-                      passwordPopoverOpen: true,
+                      passwordPopoverOpen: application.organizationObj.passwordOptions?.length > 0,
                       passwordPopover: PasswordChecker.renderPasswordPopover(application.organizationObj.passwordOptions, this.form.current?.getFieldValue("newPassword") ?? ""),
                     });
                   }}
diff --git a/web/src/auth/SignupPage.js b/web/src/auth/SignupPage.js
index cfc4353a..3781a1ac 100644
--- a/web/src/auth/SignupPage.js
+++ b/web/src/auth/SignupPage.js
@@ -607,7 +607,7 @@ class SignupPage extends React.Component {
       }
     } else if (signupItem.name === "Password") {
       return (
-        <Popover placement="right" content={this.state.passwordPopover} open={this.state.passwordPopoverOpen}>
+        <Popover placement={window.innerWidth >= 960 ? "right" : "top"} content={this.state.passwordPopover} open={this.state.passwordPopoverOpen}>
           <Form.Item
             name="password"
             className="signup-password"
@@ -635,7 +635,7 @@ class SignupPage extends React.Component {
             }}
             onFocus={() => {
               this.setState({
-                passwordPopoverOpen: true,
+                passwordPopoverOpen: application.organizationObj.passwordOptions?.length > 0,
                 passwordPopover: PasswordChecker.renderPasswordPopover(application.organizationObj.passwordOptions, this.form.current?.getFieldValue("password") ?? ""),
               });
             }}
diff --git a/web/src/common/modal/PasswordModal.js b/web/src/common/modal/PasswordModal.js
index 36570c2e..62b8e99f 100644
--- a/web/src/common/modal/PasswordModal.js
+++ b/web/src/common/modal/PasswordModal.js
@@ -132,18 +132,18 @@ export const PasswordModal = (props) => {
             </Row>
           ) : null}
           <Row style={{width: "100%", marginBottom: "20px"}}>
-            <Popover placement="right" content={passwordPopover} open={passwordPopoverOpen}>
+            <Popover placement={window.innerWidth >= 960 ? "right" : "top"} content={passwordPopover} open={passwordPopoverOpen}>
               <Input.Password
                 addonBefore={i18next.t("user:New Password")}
                 placeholder={i18next.t("user:input password")}
                 onChange={(e) => {
                   handleNewPassword(e.target.value);
-                  setPasswordPopoverOpen(true);
+                  setPasswordPopoverOpen(passwordOptions?.length > 0);
                   setPasswordPopover(PasswordChecker.renderPasswordPopover(passwordOptions, e.target.value));
 
                 }}
                 onFocus={() => {
-                  setPasswordPopoverOpen(true);
+                  setPasswordPopoverOpen(passwordOptions?.length > 0);
                   setPasswordPopover(PasswordChecker.renderPasswordPopover(passwordOptions, newPassword));
                 }}
                 onBlur={() => {