diff --git a/options/locale/locale_en-US.ini b/options/locale/locale_en-US.ini
index b1e6852db..46c5d1453 100755
--- a/options/locale/locale_en-US.ini
+++ b/options/locale/locale_en-US.ini
@@ -197,6 +197,7 @@ no_reply_address_helper = Domain name for users with a hidden email address. For
 
 [home]
 uname_holder = Username or Email Address
+login_uname_holder=Username/Email/Phone number
 uname_holder_cloud_brain = cloudbrain username
 password_holder = Password
 switch_dashboard_context = Switch Dashboard Context
diff --git a/options/locale/locale_zh-CN.ini b/options/locale/locale_zh-CN.ini
index 7de657ea9..8ad520798 100755
--- a/options/locale/locale_zh-CN.ini
+++ b/options/locale/locale_zh-CN.ini
@@ -198,6 +198,7 @@ no_reply_address_helper=具有隐藏电子邮件地址的用户的域名。例
 
 [home]
 uname_holder=登录名或电子邮箱地址
+login_uname_holder=用户名/邮箱/手机号
 uname_holder_cloud_brain=云脑登录名
 password_holder=密码
 switch_dashboard_context=切换控制面板用户
diff --git a/templates/user/auth/phone_verify.tmpl b/templates/user/auth/phone_verify.tmpl
index c679334f7..2bf774e43 100644
--- a/templates/user/auth/phone_verify.tmpl
+++ b/templates/user/auth/phone_verify.tmpl
@@ -1,9 +1,9 @@
 <style>
- .phone-verify-code {
+  .__phone-verify-code {
     max-width: 519px;
   }
 
-  .phone-verify-code ._label-c {
+  .__phone-verify-code ._label-c {
     display: flex;
     justify-content: fixed-start;
     align-items: center;
@@ -11,13 +11,13 @@
     display: none;
   }
 
-   .phone-verify-code ._label-c ._label {
+   .__phone-verify-code ._label-c ._label {
     font-size: 13px;
     font-weight: 700;
     color: rgba(0,0,0,.87);
    }
 
-  .phone-verify-code ._label-c.required ._label:after {
+  .__phone-verify-code ._label-c.required ._label:after {
     margin: -0.2em 0 0 0.2em;
     content: '*';
     color: #db2828;    
@@ -25,12 +25,12 @@
     vertical-align: top;
    }
 
-  .phone-c {
+  .__phone-verify-code .phone-c {
     display: flex;
     margin: 0 0 1em;
   }
 
-  .phone-c .phone-area-c {
+  .__phone-verify-code .phone-c .phone-area-c {
     height: 38px;
     width: 80px;
     margin-right: 10px;
@@ -41,11 +41,11 @@
     box-sizing: border-box;
   }
 
-  .phone-c .phone-area-c select {
+  .__phone-verify-code .phone-c .phone-area-c select {
     outline: none;
   }
 
-  .phone-c .phone-num-c {
+  .__phone-verify-code .phone-c .phone-num-c {
     height: 38px;
     flex: 1;
     display: flex;
@@ -54,16 +54,15 @@
     box-sizing: border-box;
   }
 
-  .phone-c .phone-num-c input {
+  .__phone-verify-code .phone-c .phone-num-c input {
     height: 100%;
     width: 100% !important;
     padding: 9.5px 14px;
     box-sizing: border-box;
-    border: none;
     outline: none;
   }
 
-  .slide-bar-wrap {
+  .__phone-verify-code .slide-bar-wrap {
     display: flex;
     height: 38px;
     margin: 0 0 1em;
@@ -72,7 +71,7 @@
     position: relative;
   }
 
-  .slide-bar-c {
+  .__phone-verify-code .slide-bar-c {
     flex: 1;
     display: flex;
     height: 38px;
@@ -81,7 +80,7 @@
     position: relative;
   }
 
-  .slide-bar-c .slide-bar-bg {
+  .__phone-verify-code .slide-bar-c .slide-bar-bg {
     height: 34px;
     flex: 1;
     background-color: rgb(245, 245, 246);
@@ -90,7 +89,7 @@
     position: relative;
   }
 
-  .slide-bar-c .slide-bar-bg .slide-txt {
+  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-txt {
     position: absolute;
     width: 100%;
     height: 100%;
@@ -102,7 +101,7 @@
     font-size: 14px;
   }
 
-  .slide-bar-c .slide-bar-bg .slide-bar {
+  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-bar {
     position: absolute;
     width: 38px;
     height: 34px;
@@ -113,17 +112,17 @@
     top: -1px;
   }
 
-  .slide-bar-c .slide-bar-bg .slide-bar.sucess {
+  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-bar.sucess {
     background-color: #d2f4ef;
     border: 1px solid #52ccba;
   }
 
-  .slide-bar-c .slide-bar-bg .slide-bar.error {
+  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-bar.error {
     border-color: #f57a7a;
     background-color: #fce1e1;
   }
 
-  .slide-bar-c .slide-bar-bg .slide-trigger {
+  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-trigger {
     position: absolute;
     width: 38px;
     height: 34px;
@@ -131,17 +130,29 @@
     border-radius: 2px;
     cursor: pointer;
     top: -1px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
   }
 
-  .slide-bar-c .slide-bar-bg .slide-trigger.sucess {
-    background-color: #52ccba;
+  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-trigger .icon {
+    font-size: 16px;
+    color: white;
+    margin: 0;   
+    height: 16px;
+    width: 16px;
+    margin-top: -6px;
+  }
+
+  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-trigger.sucess {
+    background-color: #52ccba;    
   }
 
-  .slide-bar-c .slide-bar-bg .slide-trigger.error {
+  .__phone-verify-code .slide-bar-c .slide-bar-bg .slide-trigger.error {
     background-color: #f57a7a;
   }
 
-  .slide-bar-c .slide-image-big {
+  .__phone-verify-code .slide-bar-c .slide-image-big {
     position: absolute;
     width: 391px;
     height: 196px;    
@@ -152,7 +163,7 @@
     display: none;
   }
 
-  .slide-bar-c .slide-image-small {
+  .__phone-verify-code .slide-bar-c .slide-image-small {
     position: absolute;
     left: 0;
     width: 51px;
@@ -160,12 +171,12 @@
     box-shadow: 0 0 4px rgb(35 173 255);
   }
 
-  .slide-bar-c .verify-code-c {
+  .__phone-verify-code .slide-bar-c .verify-code-c {
     display: flex;
     height: 38px;
   }
 
-  .verify-code-c {
+  .__phone-verify-code .verify-code-c {
     display: flex;
     height: 38px;
     margin: 0 0 1em;
@@ -173,7 +184,7 @@
     align-items: center;
   }
 
-  .verify-code-c .verify-code-num-c {
+  .__phone-verify-code .verify-code-c .verify-code-num-c {
     flex: 1;
     height: 38px;
     box-sizing: border-box;
@@ -182,16 +193,15 @@
     display: flex;
   }
 
-  .verify-code-c .verify-code-num-c input {
+  .__phone-verify-code .verify-code-c .verify-code-num-c input {
     height: 100%;
     width: 100% !important;
     padding: 9.5px 14px;
     box-sizing: border-box;
-    border: none;
     outline: none;
   }
 
-  .verify-code-c .verify-code-send {
+  .__phone-verify-code .verify-code-c .verify-code-send {
     display: flex;
     width: 120px;
     height: 38px;
@@ -199,7 +209,7 @@
     align-items: center;
   }
 
-  .verify-code-c .verify-code-send .verify-code-send-btn {
+  .__phone-verify-code .verify-code-c .verify-code-send .verify-code-send-btn {
     height: 100%;
     width: 100%;
     margin-left: 10px;
@@ -214,13 +224,13 @@
     align-items: center;
   }
 
-  .verify-code-c .verify-code-send .verify-code-send-btn.__disabled {
+  .__phone-verify-code .verify-code-c .verify-code-send .verify-code-send-btn.__disabled {
     border: 1px solid #ddd;
     background-color: #ddd;
     cursor: not-allowed;
   }
 
-  .new-pass-word-wrap {
+  .__phone-verify-code .new-pass-word-wrap {
     display: flex;
     height: 38px;
     margin: 0 0 1em;
@@ -229,7 +239,7 @@
     display: none;
   }
 
-  .new-pass-word-wrap .new-pass-word-c {
+  .__phone-verify-code .new-pass-word-wrap .new-pass-word-c {
     flex: 1;
     height: 38px;
     box-sizing: border-box;
@@ -238,7 +248,7 @@
     display: flex;
   }
   
-  .new-pass-word-wrap .new-pass-word-c input {
+  .__phone-verify-code .new-pass-word-wrap .new-pass-word-c input {
     height: 100%;
     width: 100% !important;
     padding: 9.5px 14px;
@@ -248,7 +258,7 @@
   }
 </style>
 
-<div class="phone-verify-code">
+<div class="__phone-verify-code">
   <div class="phone-c">
     <div class="phone-label _label-c required">
       <span class="_label">{{.i18n.Tr "phone.phone_number"}}</span>
@@ -268,7 +278,11 @@
       <div class="slide-bar-bg">
         <div class="slide-txt">{{.i18n.Tr "phone.drag_the_slider_to_fill_the_puzzle"}}</div>
         <div class="slide-bar"></div>
-        <div class="slide-trigger"></div>
+        <div class="slide-trigger">
+          <i class="arrow right icon"></i>
+          <i class="check icon" style="display:none;"></i>
+          <i class="close icon" style="display:none;"></i>
+        </div>
       </div>
       <div class="slide-image-big">
         <div class="slide-image-small" style="top:{{.SlideImageInfo.ImageY}}px"></div>
@@ -414,11 +428,15 @@
                 self.canSendCode = true;
                 self.dom.find('.slide-bar').addClass('sucess');
                 self.dom.find('.slide-trigger').addClass('sucess');
+                self.dom.find('.slide-trigger .icon').hide();
+                self.dom.find('.slide-trigger .icon.check').show();
                 self.dom.find('.slide-image-big').slideUp();
                 self.dom.find('.verify-code-send-btn').removeClass('__disabled');
               } else {
                 self.dom.find('.slide-bar').addClass('error');
                 self.dom.find('.slide-trigger').addClass('error');
+                self.dom.find('.slide-trigger .icon').hide();
+                self.dom.find('.slide-trigger .icon.close').show();
                 setTimeout(function () {
                   self.refreshImages();
                 }, 300);
@@ -495,6 +513,8 @@
         this.imgID = '';
         this.dom.find('.slide-bar').removeClass('sucess error').css('width', '30px');
         this.dom.find('.slide-trigger').removeClass('sucess error').css('left', '0px');
+        this.dom.find('.slide-trigger .icon').hide();
+        this.dom.find('.slide-trigger .icon.arrow').show();
         this.dom.find('.slide-txt').show();
         this.dom.find('.slide-image-small').css('left', '0');
         this.dom.find('.verify-code-send-btn').addClass('__disabled');
@@ -519,12 +539,12 @@
         var self = this;
         var sendBtnEl = this.dom.find('.verify-code-send-btn');
         var count = this.countDownNumber;
-        sendBtnEl.addClass('__disabled').text(`${count}{{.i18n.Tr "phone.second_resend"}}`);
+        sendBtnEl.addClass('__disabled').text(count + {{.i18n.Tr "phone.second_resend"}});
         this.canSendCode = false;
         this.countDownEnd = false;
         var timer = setInterval(function () {
           count--;
-          sendBtnEl.addClass('__disabled').text(`${count}{{.i18n.Tr "phone.second_resend"}}`);
+          sendBtnEl.addClass('__disabled').text(count + {{.i18n.Tr "phone.second_resend"}});
           if (count <= 0) {
             sendBtnEl.removeClass('__disabled').text({{.i18n.Tr "phone.get_verification_code"}});
             clearInterval(timer);
@@ -534,7 +554,7 @@
         }, 1000);
       };
     
-      const phoneVerifyCode = new PhoneVerifyCode($('.phone-verify-code'));
+      const phoneVerifyCode = new PhoneVerifyCode($('.__phone-verify-code'));
     });
   })();
 </script>
diff --git a/templates/user/auth/signin_inner.tmpl b/templates/user/auth/signin_inner.tmpl
index bdcd6a5c6..32ce80dc5 100644
--- a/templates/user/auth/signin_inner.tmpl
+++ b/templates/user/auth/signin_inner.tmpl
@@ -28,7 +28,7 @@
 				</div>
 
 				<div class="ui grid">
-                    <div class="column">
+          <div class="column">
 						{{if .IsCourse}}
 							<form class="ui form" action="{{.SignInLink}}?course=true" method="post">
 						{{else}}
@@ -38,7 +38,7 @@
 						<div class="field">
 							<div class="ui left icon input {{if and (.Err_UserName) (or (not .LinkAccountMode) (and .LinkAccountMode .LinkAccountModeSignIn))}}error{{end}}">
 								<i class="user icon"></i>
-								<input id="user_name" name="user_name" value="{{.user_name}}" placeholder="{{.i18n.Tr "home.uname_holder"}}" autofocus required>
+								<input id="user_name" name="user_name" value="{{.user_name}}" placeholder="{{.i18n.Tr "home.login_uname_holder"}}" autofocus required>
 							</div>
 						</div>
 						{{if or (not .DisablePassword) .LinkAccountMode}}