diff --git a/web/src/ResetModal.js b/web/src/ResetModal.js
index c833c268..505ff708 100644
--- a/web/src/ResetModal.js
+++ b/web/src/ResetModal.js
@@ -25,7 +25,7 @@ export const ResetModal = (props) => {
   const [confirmLoading, setConfirmLoading] = React.useState(false);
   const [dest, setDest] = React.useState("");
   const [code, setCode] = React.useState("");
-  const {buttonText, destType, application, account} = props;
+  const {buttonText, destType, application, countryCode} = props;
 
   const showModal = () => {
     setVisible(true);
@@ -87,7 +87,7 @@ export const ResetModal = (props) => {
           <Row style={{width: "100%", marginBottom: "20px"}}>
             <Input
               addonBefore={destType === "email" ? i18next.t("user:New Email") : i18next.t("user:New phone")}
-              prefix={destType === "email" ? <React.Fragment><MailOutlined />&nbsp;&nbsp;</React.Fragment> : (<React.Fragment><PhoneOutlined />&nbsp;&nbsp;{`+${Setting.getCountryCode(account.countryCode)}`}&nbsp;</React.Fragment>)}
+              prefix={destType === "email" ? <React.Fragment><MailOutlined />&nbsp;&nbsp;</React.Fragment> : (<React.Fragment><PhoneOutlined />&nbsp;&nbsp;{countryCode !== "" ? "+" : null}{Setting.getCountryCode(countryCode)}&nbsp;</React.Fragment>)}
               placeholder={placeholder}
               onChange={e => setDest(e.target.value)}
             />
diff --git a/web/src/Setting.js b/web/src/Setting.js
index 9b46b895..0a80a65b 100644
--- a/web/src/Setting.js
+++ b/web/src/Setting.js
@@ -209,7 +209,10 @@ export function initCountries() {
 }
 
 export function getCountryCode(country) {
-  return phoneNumber.getCountryCallingCode(country);
+  if (phoneNumber.isSupportedCountry(country)) {
+    return phoneNumber.getCountryCallingCode(country);
+  }
+  return "";
 }
 
 export function getCountryCodeData(countryCodes = phoneNumber.getCountries()) {
diff --git a/web/src/UserEditPage.js b/web/src/UserEditPage.js
index 93c7180d..292fbc1f 100644
--- a/web/src/UserEditPage.js
+++ b/web/src/UserEditPage.js
@@ -138,6 +138,10 @@ class UserEditPage extends React.Component {
     return this.isSelf() || Setting.isAdminUser(this.props.account);
   }
 
+  getCountryCode() {
+    return this.props.account.countryCode;
+  }
+
   renderAccountItem(accountItem) {
     if (!accountItem.visible) {
       return null;
@@ -296,7 +300,7 @@ class UserEditPage extends React.Component {
           </Col>
           <Col span={Setting.isMobile() ? 22 : 11} >
             {/* backend auto get the current user, so admin can not edit. Just self can reset*/}
-            {this.isSelf() ? <ResetModal application={this.state.application} account={this.props.account} disabled={disabled} buttonText={i18next.t("user:Reset Email...")} destType={"email"} /> : null}
+            {this.isSelf() ? <ResetModal application={this.state.application} disabled={disabled} buttonText={i18next.t("user:Reset Email...")} destType={"email"} /> : null}
           </Col>
         </Row>
       );
@@ -326,7 +330,7 @@ class UserEditPage extends React.Component {
             </Input.Group>
           </Col>
           <Col span={Setting.isMobile() ? 24 : 11} >
-            {this.isSelf() ? (<ResetModal application={this.state.application} account={this.props.account} disabled={disabled} buttonText={i18next.t("user:Reset Phone...")} destType={"phone"} />) : null}
+            {this.isSelf() ? (<ResetModal application={this.state.application} countryCode={this.getCountryCode()} disabled={disabled} buttonText={i18next.t("user:Reset Phone...")} destType={"phone"} />) : null}
           </Col>
         </Row>
       );