diff --git a/src/assets/javascripts/i18n.js b/src/assets/javascripts/i18n.js
index d0e6fcb..50e729d 100644
--- a/src/assets/javascripts/i18n.js
+++ b/src/assets/javascripts/i18n.js
@@ -340,6 +340,11 @@
       "zh": "登录",
       "ru": "Вход"
     },
+    "login_error": {
+      "en": "Invalid username or password",
+      "zh": "用户名或密码错误",
+      "ru": "Неверное имя пользователя или пароль"
+    },
     "username": {
       "en": "Username",
       "zh": "用户名",
diff --git a/src/assets/login.html b/src/assets/login.html
index 367d1ad..408ac1e 100644
--- a/src/assets/login.html
+++ b/src/assets/login.html
@@ -9,6 +9,7 @@
     <link rel="alternate icon" href="./static/graphicarts/favicon.png" type="image/png">
     <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
     <style>
+        [v-cloak] { display: none }
         form {
             max-width: 300px;
             margin: 0 auto;
@@ -23,21 +24,33 @@
     </style>
 </head>
 <body class="theme-{% .settings.theme_name %}">
-    <form action="" method="post">
-        <img src="./static/graphicarts/anchor.svg" alt="">
-        {% if .error %}
-            <div class="text-danger text-center my-3">{% .error %}</div>
-        {% end %}
-        <div class="form-group">
-            <label for="username">Username</label>
-            <input name="username" class="form-control" id="username" autocomplete="off"
-                   value="{% if .username %}{% .username %}{% end %}" required autofocus>
-        </div>
-        <div class="form-group">
-            <label for="password">Password</label>
-            <input name="password" class="form-control" id="password" type="password" required>
-        </div>
-        <button class="btn btn-block btn-default" type="submit">Login</button>
-    </form>
+    <div id="app" v-cloak>
+        <form action="" method="post">
+            <img src="./static/graphicarts/anchor.svg" alt="">
+            <div class="text-danger text-center my-3" v-if="hasError">{{ $t('login_error') }}</div>
+            <div class="form-group">
+                <label for="username">{{ $t('username') }}</label>
+                <input name="username" class="form-control" id="username" autocomplete="off"
+                       value="{% if .username %}{% .username %}{% end %}" required autofocus>
+            </div>
+            <div class="form-group">
+                <label for="password">{{ $t('password') }}</label>
+                <input name="password" class="form-control" id="password" type="password" required>
+            </div>
+            <button class="btn btn-block btn-default" type="submit">{{ $t('login') }}</button>
+        </form>
+    </div>
+    <script src="./static/javascripts/vue.min.js"></script>
+    <script src="./static/javascripts/fluent.js"></script>
+    <script src="./static/javascripts/i18n.js"></script>
+    <script>
+        Vue.use(i18n)
+        new Vue({
+            data: { hasError: {% .hasError %} },
+            created: function () {
+                this.$setLang('{% .settings.language %}')
+            }
+        }).$mount('#app')
+    </script>
 </body>
 </html>
diff --git a/src/server/auth/middleware.go b/src/server/auth/middleware.go
index 0704622..6d2d8b9 100644
--- a/src/server/auth/middleware.go
+++ b/src/server/auth/middleware.go
@@ -46,13 +46,14 @@ func (m *Middleware) Handler(c *router.Context) {
 		} else {
 			c.HTML(http.StatusOK, assets.Template("login.html"), map[string]any{
 				"username": username,
-				"error":    "Invalid username/password",
+				"hasError": true,
 				"settings": m.DB.GetSettings().Map(),
 			})
 			return
 		}
 	}
 	c.HTML(http.StatusOK, assets.Template("login.html"), map[string]any{
+		"hasError": false,
 		"settings": m.DB.GetSettings().Map(),
 	})
 }
