diff --git a/pkg/app/pagewriter/login/euler-en.html b/pkg/app/pagewriter/login/euler-en.html
index 157110656c..6822620054 100644
--- a/pkg/app/pagewriter/login/euler-en.html
+++ b/pkg/app/pagewriter/login/euler-en.html
@@ -1,165 +1,183 @@
 {{define "sign_in.html"}}
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>openEuler</title>
-        <style>
-            * {
-                padding: 0;
-                margin: 0;
-            }
-
-            body {
-                background: #002FA7;
-            }
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>openEuler</title>
+    <style>
+      * {
+        padding: 0;
+        margin: 0;
+      }
 
-            .wrap {
-                height: 100vh;
-                margin: 0 auto;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/euler_pc.jpg) no-repeat center/cover;
-                padding: 0 80px;
-            }
+      body {
+        background: #002fa7;
+      }
 
-            .wrap .box {
-                margin-top: 30vh;
-                display: flex;
-                align-items: center;
-                flex-direction: column;
-            }
+      .wrap {
+        height: 100vh;
+        margin: 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/euler_pc.jpg)
+          no-repeat center/cover;
+        padding: 0 80px;
+      }
 
-            .wrap .button {
-                width: 300px;
-                line-height: 58px;
-                border: 0 none;
-                background: #002FA7;
-                box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.11);
-                border-radius: 8px;
-                text-align: center;
-                color: #fff;
-                font-size: 20px;
-                font-weight: bold;
-                cursor: pointer;
-            }
+      .wrap .box {
+        margin-top: 30vh;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+      }
 
-            .wrap .label {
-                font-size: 14px;
-                color: #fff;
-                margin-top: 30px;
-                display: flex;
-                align-items: center;
-            }
+      .wrap .button {
+        padding: 12px 32px;
+        font-size: 16px;
+        line-height: 24px;
+        border: 0 none;
+        background: #2a489e;
+        border-radius: 26px;
+        text-align: center;
+        color: #fff;
+        font-weight: bold;
+        cursor: pointer;
+      }
 
+      .wrap .label {
+        font-size: 14px;
+        color: #fff;
+        margin-top: 30px;
+        display: flex;
+        align-items: center;
+      }
 
+      .checkbox {
+        cursor: pointer;
+      }
 
-            .wrap .label a {
-                color: #fff;
-                display: inline-block;
-                text-decoration: none;
-            }
-            .wrap .label a:hover {
-                color: #002FA7;
-            }
+      .wrap .label a {
+        color: #fff;
+        display: inline-block;
+        text-decoration: none;
+      }
+      .wrap .label a:hover {
+        color: #002fa7;
+      }
 
-            .wrap .label .info {
-                padding-left: 10px;
-            }
-            .wrap .label .info p{
-                display: none;
-            }
+      .wrap .label .info {
+        padding-left: 10px;
+      }
+      .wrap .label .info p {
+        display: none;
+      }
 
-            .wrap .not-allowed {
-                cursor: not-allowed;
-                color: white;
-                background: grey;
-            }
+      .wrap .not-allowed {
+        cursor: not-allowed;
+        color: white;
+        background: grey;
+      }
 
-            @media (max-width: 768px) {
-                .wrap {
-                    padding: 0;
-                    box-sizing: border-box;
-                    background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/euler_h5.jpg) no-repeat left bottom /cover;
-                }
-                .wrap .box {
-                    margin-top: 6vh;
-                }
-                .wrap .box form,
-                .wrap .button{
-                    width: 100%;
-                }
-
-                .wrap .label {
-                    font-size: 14px;
-                    color: #fff;
-                    margin-top: 60px;
-                }
-            }
+      @media (max-width: 768px) {
+        .wrap {
+          padding: 0;
+          box-sizing: border-box;
+          background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/euler_h5.jpg)
+            no-repeat left bottom / cover;
+        }
+        .wrap .box {
+          margin-top: 6vh;
+        }
+        .wrap .box form,
+        .wrap .button {
+          width: 100%;
+        }
 
-        </style>
-    </head>
-    <body>
+        .wrap .label {
+          font-size: 14px;
+          color: #fff;
+          margin-top: 60px;
+        }
+      }
+    </style>
+  </head>
+  <body>
     <div class="wrap">
-        <div class="box">
-            <form method="GET" action="{{.ProxyPrefix}}/start">
-                <input type="hidden" name="rd" value="{{.Redirect}}">
-                <button type="submit" class="button not-allowed block is-primary">Sign in with {{.ProviderName}}</button>
-            </form>
-            <div class="label">
-                <input class="checkbox" type="checkbox">
-                <div class="info">
-                    <p class="lang-zh">我已阅读并同意<a href="/agreement_ch.html" target="_blank">《用户授权协议》</a>和社区<a
-                        href='https://www.openeuler.org/zh/other/privacy/' target="_blank">《隐私政策》</a>
+      <div class="box">
+        <form method="GET" action="{{.ProxyPrefix}}/start">
+          <input type="hidden" name="rd" value="{{.Redirect}}" />
+          <button type="submit" class="button not-allowed block is-primary">
+            Sign in with {{.ProviderName}}
+          </button>
+        </form>
+        <div class="label">
+          <input class="checkbox" type="checkbox" />
+          <div class="info">
+            <p class="lang-zh">
+              我已阅读并同意<a href="/agreement_ch.html" target="_blank"
+                >《用户授权协议》</a
+              >和社区<a
+                href="https://www.openeuler.org/zh/other/privacy/"
+                target="_blank"
+                >《隐私政策》</a
+              >
             </p>
-            <p class="lang-en">I have read and agree to the <a href="/agreement_en.html" target="_blank">User
-                Agreement</a> and the <a href='https://www.openeuler.org/en/other/privacy/' target="_blank">Privacy Policy</a>
-              </p> 
-                </div>
-            </div>
+            <p class="lang-en">
+              I have read and agree to the
+              <a href="/agreement_en.html" target="_blank">User Agreement</a>
+              and the
+              <a
+                href="https://www.openeuler.org/en/other/privacy/"
+                target="_blank"
+                >Privacy Policy</a
+              >
+            </p>
+          </div>
         </div>
+      </div>
     </div>
     <script>
-           let checkbox = document.querySelector('.checkbox');
-        let btn = document.querySelector('.button');
-        checkbox.addEventListener('click',function() {
-            checkbox.checked ? btn.classList.remove('not-allowed') : btn.classList.add('not-allowed')
-        })
-        btn.addEventListener('click',function() {
-            checkbox.checked ? '' : event.preventDefault()
-        })
-        if (window.location.hash) {
-            (function () {
-                var inputs = document.getElementsByName('rd');
-                for (var i = 0; i < inputs.length; i++) {
-                    // Add hash, but make sure it is only added once
-                    var idx = inputs[i].value.indexOf('#');
-                    if (idx >= 0) {
-                        // Remove existing hash from URL
-                        inputs[i].value = inputs[i].value.substr(0, idx);
-                    }
-                    inputs[i].value += window.location.hash;
-                }
-            })();
-        }
-
-        // 根据中英文显示文案
-        let lang = 'zh-CN';
-        if(window.location.pathname.includes('en')){
-            document.querySelector('.lang-en').style.display='block';
-            document.querySelector('.lang-zh').remove();
-            lang = 'en';
-        }else{
-            document.querySelector('.lang-zh').style.display='block';
-            document.querySelector('.lang-en').remove();
-            lang = 'zh-CN';
-        }
-        document.documentElement.setAttribute('lang',lang)
+      let checkbox = document.querySelector(".checkbox");
+      let btn = document.querySelector(".button");
+      checkbox.addEventListener("click", function () {
+        checkbox.checked
+          ? btn.classList.remove("not-allowed")
+          : btn.classList.add("not-allowed");
+      });
+      btn.addEventListener("click", function () {
+        checkbox.checked ? "" : event.preventDefault();
+      });
+      if (window.location.hash) {
+        (function () {
+          var inputs = document.getElementsByName("rd");
+          for (var i = 0; i < inputs.length; i++) {
+            // Add hash, but make sure it is only added once
+            var idx = inputs[i].value.indexOf("#");
+            if (idx >= 0) {
+              // Remove existing hash from URL
+              inputs[i].value = inputs[i].value.substr(0, idx);
+            }
+            inputs[i].value += window.location.hash;
+          }
+        })();
+      }
 
+      // 根据中英文显示文案
+      let lang = "zh-CN";
+      if (window.location.pathname.includes("en")) {
+        document.querySelector(".lang-en").style.display = "block";
+        document.querySelector(".lang-zh").remove();
+        lang = "en";
+      } else {
+        document.querySelector(".lang-zh").style.display = "block";
+        document.querySelector(".lang-en").remove();
+        lang = "zh-CN";
+      }
+      document.documentElement.setAttribute("lang", lang);
     </script>
-    </body>
-    </html>
-{{end}}
\ No newline at end of file
+  </body>
+</html>
+{{end}}
diff --git a/pkg/app/pagewriter/login/euler.html b/pkg/app/pagewriter/login/euler.html
index 69ecaaea9e..75c9a43107 100644
--- a/pkg/app/pagewriter/login/euler.html
+++ b/pkg/app/pagewriter/login/euler.html
@@ -35,16 +35,16 @@
       }
 
       .wrap .button {
-        width: 300px;
-        line-height: 58px;
+        padding: 12px 32px;
+        font-size: 16px;
+        line-height: 24px;
         border: 0 none;
-        background: #002fa7;
-        box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.11);
-        border-radius: 8px;
+        background: #2a489e;
+        border-radius: 26px;
         text-align: center;
         color: #fff;
-        font-size: 20px;
         font-weight: bold;
+        cursor: pointer;
       }
 
       .wrap .label {
@@ -53,6 +53,9 @@
         margin-top: 30px;
         display: flex;
         align-items: center;
+      }
+
+      .checkbox {
         cursor: pointer;
       }
 
diff --git a/pkg/app/pagewriter/login/gauss-en.html b/pkg/app/pagewriter/login/gauss-en.html
index c17cbc12d7..02878be814 100644
--- a/pkg/app/pagewriter/login/gauss-en.html
+++ b/pkg/app/pagewriter/login/gauss-en.html
@@ -1,136 +1,147 @@
 {{define "sign_in.html"}}
-    <!DOCTYPE html>
-    <html lang="en">
-    <head>
-        <meta charset="UTF-8">
-        <meta http-equiv="X-UA-Compatible" content="IE=edge">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <title>openGauss</title>
-        <style>
-            * {
-                padding: 0;
-                margin: 0;
-            }
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>openGauss</title>
+    <style>
+      * {
+        padding: 0;
+        margin: 0;
+      }
 
-            body {
-                background: #7D32EA;
-            }
+      body {
+        background: #7d32ea;
+      }
 
-            .wrap {
-                height: 100vh;
-                margin: 0 auto;
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/gauss_pc.jpg) no-repeat center/cover;
-                padding: 0 80px;
-            }
+      .wrap {
+        height: 100vh;
+        margin: 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/gauss_pc.jpg)
+          no-repeat center/cover;
+        padding: 0 80px;
+      }
 
-            .wrap .box {
-                margin-top: 30vh;
-                display: flex;
-                align-items: center;
-                flex-direction: column;
-            }
+      .wrap .box {
+        margin-top: 30vh;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+      }
 
-            .wrap .button {
-                width: 300px;
-                line-height: 58px;
-                border: 0 none;
-                background: #FEDEA4;
-                box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.11);
-                border-radius: 8px;
-                text-align: center;
-                color: #7D32EA;
-                font-size: 20px;
-                font-weight: bold;
-            }
+      .wrap .button {
+        padding: 12px 32px;
+        font-size: 16px;
+        line-height: 24px;
+        border: 0 none;
+        background: #7d32ea;
+        border-radius: 26px;
+        text-align: center;
+        color: #fff;
+        font-weight: bold;
+        cursor: pointer;
+      }
 
-            .wrap .label {
-                font-size: 14px;
-                color: #fff;
-                margin-top: 30px;
-                display: flex;
-                align-items: center;
-            }
+      .checkbox {
+        cursor: pointer;
+      }
 
-            .wrap .label a {
-                color: #fff;
-                display: inline-block;
-            }
+      .wrap .label {
+        font-size: 14px;
+        color: #fff;
+        margin-top: 30px;
+        display: flex;
+        align-items: center;
+      }
 
-            .wrap .label .info {
-                padding-left: 10px;
-            }
+      .wrap .label a {
+        color: #fff;
+        display: inline-block;
+      }
 
-            .wrap .not-allowed {
-                cursor: not-allowed;
-                color: white;
-                background: grey;
-            }
-            @media (max-width: 768px) {
-                .wrap {
-                    padding: 0 32px;
-                    box-sizing: border-box;
-                    background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/gauss_h5.jpg) no-repeat left bottom /cover;
-                }
-                .wrap .box {
-                    margin-top: 6vh;
-                }
+      .wrap .label .info {
+        padding-left: 10px;
+      }
 
-                .wrap .label {
-                    font-size: 14px;
-                    color: #fff;
-                    margin-top: 60px;
-                }
-            }
+      .wrap .not-allowed {
+        cursor: not-allowed;
+        color: white;
+        background: grey;
+      }
+      @media (max-width: 768px) {
+        .wrap {
+          padding: 0 32px;
+          box-sizing: border-box;
+          background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/gauss_h5.jpg)
+            no-repeat left bottom / cover;
+        }
+        .wrap .box {
+          margin-top: 6vh;
+        }
 
-        </style>
-    </head>
-    <body>
+        .wrap .label {
+          font-size: 14px;
+          color: #fff;
+          margin-top: 60px;
+        }
+      }
+    </style>
+  </head>
+  <body>
     <div class="wrap">
-        <div class="box">
-            <form method="GET" action="{{.ProxyPrefix}}/start">
-                <input type="hidden" name="rd" value="{{.Redirect}}">
-                <button type="submit" class="button not-allowed block is-primary">Sign in with {{.ProviderName}}</button>
-            </form>
-            <div class="label">
-                <input class="checkbox" type="checkbox">
-                <div class="info">
-                    <p>I have read and agree to the <a href='/agreement_en.html'
-                                                       target="_blank">User
-                            Agreement</a> and the <a href='https://opengauss.org/en/privacyPolicy/'
-                                                     target="_blank">Privacy Policy</a></p>
-                </div>
-            </div>
-
-
+      <div class="box">
+        <form method="GET" action="{{.ProxyPrefix}}/start">
+          <input type="hidden" name="rd" value="{{.Redirect}}" />
+          <button type="submit" class="button not-allowed block is-primary">
+            Sign in with {{.ProviderName}}
+          </button>
+        </form>
+        <div class="label">
+          <input class="checkbox" type="checkbox" />
+          <div class="info">
+            <p>
+              I have read and agree to the
+              <a href="/agreement_en.html" target="_blank">User Agreement</a>
+              and the
+              <a href="https://opengauss.org/en/privacyPolicy/" target="_blank"
+                >Privacy Policy</a
+              >
+            </p>
+          </div>
         </div>
+      </div>
     </div>
     <script>
-           let checkbox = document.querySelector('.checkbox');
-        let btn = document.querySelector('.button');
-        checkbox.addEventListener('click',function() {
-            checkbox.checked ? btn.classList.remove('not-allowed') : btn.classList.add('not-allowed')
-        })
-        btn.addEventListener('click',function() {
-            checkbox.checked ? '' : event.preventDefault()
-        }) 
-        if (window.location.hash) {
-            (function () {
-                var inputs = document.getElementsByName('rd');
-                for (var i = 0; i < inputs.length; i++) {
-                    // Add hash, but make sure it is only added once
-                    var idx = inputs[i].value.indexOf('#');
-                    if (idx >= 0) {
-                        // Remove existing hash from URL
-                        inputs[i].value = inputs[i].value.substr(0, idx);
-                    }
-                    inputs[i].value += window.location.hash;
-                }
-            })();
-        }
+      let checkbox = document.querySelector(".checkbox");
+      let btn = document.querySelector(".button");
+      checkbox.addEventListener("click", function () {
+        checkbox.checked
+          ? btn.classList.remove("not-allowed")
+          : btn.classList.add("not-allowed");
+      });
+      btn.addEventListener("click", function () {
+        checkbox.checked ? "" : event.preventDefault();
+      });
+      if (window.location.hash) {
+        (function () {
+          var inputs = document.getElementsByName("rd");
+          for (var i = 0; i < inputs.length; i++) {
+            // Add hash, but make sure it is only added once
+            var idx = inputs[i].value.indexOf("#");
+            if (idx >= 0) {
+              // Remove existing hash from URL
+              inputs[i].value = inputs[i].value.substr(0, idx);
+            }
+            inputs[i].value += window.location.hash;
+          }
+        })();
+      }
     </script>
-    </body>
-    </html>
+  </body>
+</html>
 {{end}}
diff --git a/pkg/app/pagewriter/login/gauss.html b/pkg/app/pagewriter/login/gauss.html
index 9ce9d2fb52..7e05a0d87c 100644
--- a/pkg/app/pagewriter/login/gauss.html
+++ b/pkg/app/pagewriter/login/gauss.html
@@ -35,15 +35,14 @@
       }
 
       .wrap .button {
-        width: 300px;
-        line-height: 58px;
+        padding: 12px 32px;
+        font-size: 16px;
+        line-height: 24px;
         border: 0 none;
         background: #7d32ea;
-        box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.11);
-        border-radius: 8px;
+        border-radius: 26px;
         text-align: center;
         color: #fff;
-        font-size: 20px;
         font-weight: bold;
         cursor: pointer;
       }
@@ -54,6 +53,9 @@
         margin-top: 30px;
         display: flex;
         align-items: center;
+      }
+
+      .checkbox {
         cursor: pointer;
       }
 
diff --git a/pkg/app/pagewriter/login/img/euler_h5.jpg b/pkg/app/pagewriter/login/img/euler_h5.jpg
index 39162ed7fd..020e294290 100644
Binary files a/pkg/app/pagewriter/login/img/euler_h5.jpg and b/pkg/app/pagewriter/login/img/euler_h5.jpg differ
diff --git a/pkg/app/pagewriter/login/img/euler_pc.jpg b/pkg/app/pagewriter/login/img/euler_pc.jpg
index d6f17e9020..7803664a38 100644
Binary files a/pkg/app/pagewriter/login/img/euler_pc.jpg and b/pkg/app/pagewriter/login/img/euler_pc.jpg differ
diff --git a/pkg/app/pagewriter/login/img/gauss_h5.jpg b/pkg/app/pagewriter/login/img/gauss_h5.jpg
index ec578ae26d..57a2b6d244 100644
Binary files a/pkg/app/pagewriter/login/img/gauss_h5.jpg and b/pkg/app/pagewriter/login/img/gauss_h5.jpg differ
diff --git a/pkg/app/pagewriter/login/img/gauss_pc.jpg b/pkg/app/pagewriter/login/img/gauss_pc.jpg
index debc104c3b..ab2425de15 100644
Binary files a/pkg/app/pagewriter/login/img/gauss_pc.jpg and b/pkg/app/pagewriter/login/img/gauss_pc.jpg differ
diff --git a/pkg/app/pagewriter/login/img/mindspore_h5.jpg b/pkg/app/pagewriter/login/img/mindspore_h5.jpg
index c31acc2513..4599b3368c 100644
Binary files a/pkg/app/pagewriter/login/img/mindspore_h5.jpg and b/pkg/app/pagewriter/login/img/mindspore_h5.jpg differ
diff --git a/pkg/app/pagewriter/login/img/mindspore_pc.jpg b/pkg/app/pagewriter/login/img/mindspore_pc.jpg
index 6155ffea97..aae4af1b14 100644
Binary files a/pkg/app/pagewriter/login/img/mindspore_pc.jpg and b/pkg/app/pagewriter/login/img/mindspore_pc.jpg differ
diff --git a/pkg/app/pagewriter/login/mindspore-en.html b/pkg/app/pagewriter/login/mindspore-en.html
index faa9e72dd7..e0bb4af2da 100644
--- a/pkg/app/pagewriter/login/mindspore-en.html
+++ b/pkg/app/pagewriter/login/mindspore-en.html
@@ -1,137 +1,149 @@
 {{define "sign_in.html"}}
 <!DOCTYPE html>
 <html lang="en">
-
-<head>
-    <meta charset="UTF-8">
-    <meta http-equiv="X-UA-Compatible" content="IE=edge">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <head>
+    <meta charset="UTF-8" />
+    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>MindSpore</title>
     <style>
-        * {
-            padding: 0;
-            margin: 0;
-        }
+      * {
+        padding: 0;
+        margin: 0;
+      }
 
-        body {
-            background: #0D8DFF;
-        }
+      body {
+        background: #0d8dff;
+      }
 
-        .wrap {
-            height: 100vh;
-            margin: 0 auto;
-            display: flex;
-            justify-content: center;
-            align-items: center;
-            background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/mindspore_pc.jpg) no-repeat center/cover;
-            padding: 0 80px;
-        }
+      .wrap {
+        height: 100vh;
+        margin: 0 auto;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/mindspore_pc.jpg)
+          no-repeat center/cover;
+        padding: 0 80px;
+      }
 
-        .wrap .box {
-            margin-top: 30vh;
-            display: flex;
-            align-items: center;
-            flex-direction: column;
-        }
+      .wrap .box {
+        margin-top: 30vh;
+        display: flex;
+        align-items: center;
+        flex-direction: column;
+      }
 
-        .wrap .button {
-            width: 300px;
-            line-height: 58px;
-            border: 0 none;
-            background: #FEDEA4;
-            box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.11);
-            border-radius: 8px;
-            text-align: center;
-            color: #0D8DFF;
-            font-size: 20px;
-            font-weight: bold;
-        }
+      .wrap .button {
+        padding: 12px 32px;
+        font-size: 16px;
+        line-height: 24px;
+        border: 0 none;
+        background: #0d8dff;
+        border-radius: 26px;
+        text-align: center;
+        color: #fff;
+        font-weight: bold;
+        cursor: pointer;
+      }
 
-        .wrap .label {
-            font-size: 14px;
-            color: #fff;
-            margin-top: 30px;
-            display: flex;
-            align-items: center;
-        }
+      .checkbox {
+        cursor: pointer;
+      }
 
-        .wrap .label a {
-            color: #fff;
-            display: inline-block;
-        }
+      .wrap .label {
+        font-size: 14px;
+        color: #fff;
+        margin-top: 30px;
+        display: flex;
+        align-items: center;
+      }
 
-        .wrap .label .info {
-            padding-left: 10px;
-        }
+      .wrap .label a {
+        color: #fff;
+        display: inline-block;
+      }
 
-        .wrap .not-allowed {
-            cursor: not-allowed;
-            color: white;
-            background: grey;
-        }
+      .wrap .label .info {
+        padding-left: 10px;
+      }
 
-        @media (max-width: 768px) {
-            .wrap {
-                padding: 0 32px;
-                box-sizing: border-box;
-                background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/mindspore_h5.jpg) no-repeat left bottom /cover;
-            }
-            .wrap .box {
-                margin-top: 6vh;
-            }
+      .wrap .not-allowed {
+        cursor: not-allowed;
+        color: white;
+        background: grey;
+      }
 
-            .wrap .label {
-                font-size: 14px;
-                color: #fff;
-                margin-top: 60px;
-            }
+      @media (max-width: 768px) {
+        .wrap {
+          padding: 0 32px;
+          box-sizing: border-box;
+          background: url(https://openeuler-website.obs.ap-southeast-1.myhuaweicloud.com/img/mindspore_h5.jpg)
+            no-repeat left bottom / cover;
+        }
+        .wrap .box {
+          margin-top: 6vh;
         }
+
+        .wrap .label {
+          font-size: 14px;
+          color: #fff;
+          margin-top: 60px;
+        }
+      }
     </style>
-</head>
+  </head>
 
-<body>
+  <body>
     <div class="wrap">
-        <div class="box">
-            <form method="GET" action="{{.ProxyPrefix}}/start">
-                <input type="hidden" name="rd" value="{{.Redirect}}">
-                <button type="submit" class="button not-allowed block is-primary">Sign in with
-                    {{.ProviderName}}</button>
-            </form>
-            <div class="label">
-                <input class="checkbox" type="checkbox">
-                <div class="info">
-                    <p>I have read and agree to the <a href='/agreement_en.html' target="_blank">User Agreement</a> and the
-                        <a href='https://www.mindspore.cn/privacy/en' target="_blank">Privacy Policy</a>
-                    </p>
-                </div>
-            </div>
+      <div class="box">
+        <form method="GET" action="{{.ProxyPrefix}}/start">
+          <input type="hidden" name="rd" value="{{.Redirect}}" />
+          <button type="submit" class="button not-allowed block is-primary">
+            Sign in with {{.ProviderName}}
+          </button>
+        </form>
+        <div class="label">
+          <input class="checkbox" type="checkbox" />
+          <div class="info">
+            <p>
+              I have read and agree to the
+              <a href="/agreement_en.html" target="_blank">User Agreement</a>
+              and the
+              <a href="https://www.mindspore.cn/privacy/en" target="_blank"
+                >Privacy Policy</a
+              >
+            </p>
+          </div>
         </div>
+      </div>
     </div>
     <script>
-        let checkbox = document.querySelector('.checkbox');
-        let btn = document.querySelector('.button');
-        checkbox.addEventListener('click', function () {
-            checkbox.checked ? btn.classList.remove('not-allowed') : btn.classList.add('not-allowed')
-        })
-        btn.addEventListener('click', function () {
-            checkbox.checked ? '' : event.preventDefault()
-        })
-        if (window.location.hash) {
-            (function () {
-                var inputs = document.getElementsByName('rd');
-                for (var i = 0; i < inputs.length; i++) {
-                    // Add hash, but make sure it is only added once
-                    var idx = inputs[i].value.indexOf('#');
-                    if (idx >= 0) {
-                        // Remove existing hash from URL
-                        inputs[i].value = inputs[i].value.substr(0, idx);
-                    }
-                    inputs[i].value += window.location.hash;
-                }
-            })();
-        }
+      let checkbox = document.querySelector(".checkbox");
+      let btn = document.querySelector(".button");
+      checkbox.addEventListener("click", function () {
+        checkbox.checked
+          ? btn.classList.remove("not-allowed")
+          : btn.classList.add("not-allowed");
+      });
+      btn.addEventListener("click", function () {
+        checkbox.checked ? "" : event.preventDefault();
+      });
+      if (window.location.hash) {
+        (function () {
+          var inputs = document.getElementsByName("rd");
+          for (var i = 0; i < inputs.length; i++) {
+            // Add hash, but make sure it is only added once
+            var idx = inputs[i].value.indexOf("#");
+            if (idx >= 0) {
+              // Remove existing hash from URL
+              inputs[i].value = inputs[i].value.substr(0, idx);
+            }
+            inputs[i].value += window.location.hash;
+          }
+        })();
+      }
     </script>
-</body>
-
+  </body>
 </html>
 {{end}}
diff --git a/pkg/app/pagewriter/login/mindspore.html b/pkg/app/pagewriter/login/mindspore.html
index 25094f54fa..b69b8cd5f2 100644
--- a/pkg/app/pagewriter/login/mindspore.html
+++ b/pkg/app/pagewriter/login/mindspore.html
@@ -35,18 +35,22 @@
       }
 
       .wrap .button {
-        cursor: pointer;
-        width: 300px;
-        line-height: 58px;
+        padding: 12px 32px;
+        font-size: 16px;
+        line-height: 24px;
         border: 0 none;
         background: #0d8dff;
-        box-shadow: 0px 5px 0px 0px rgba(0, 0, 0, 0.11);
-        border-radius: 8px;
+        border-radius: 26px;
         text-align: center;
         color: #fff;
-        font-size: 20px;
         font-weight: bold;
+        cursor: pointer;
+      }
+
+      .checkbox {
+        cursor: pointer;
       }
+
       .wrap .not-allowed {
         color: white;
         background: grey;
