diff --git a/web/html/login.html b/web/html/login.html
index 2f4cb3e6..ae90e107 100644
--- a/web/html/login.html
+++ b/web/html/login.html
@@ -18,6 +18,12 @@
         border-radius: 30px;
     }
 
+    .ant-input-group-addon {
+        border-radius: 0 30px 30px 0;
+        width: 50px;
+        font-size: 18px;
+    }
+
     .ant-input-affix-wrapper .ant-input-prefix {
         left: 23px;
     }
@@ -26,20 +32,26 @@
         padding-left: 50px;
     }
 
-    .selectLang{
+    .centered {
         display: flex;
         text-align: center;
+        align-items: center;
         justify-content: center;
     }
 
+    .title {
+        font-size: 32px;
+        font-weight: bold;
+    }
+
 </style>
 <body>
-<a-layout id="app" v-cloak>
+<a-layout id="app" v-cloak :class="themeSwitcher.darkClass">
     <transition name="list" appear>
         <a-layout-content>
             <a-row type="flex" justify="center">
                 <a-col :xs="22" :sm="20" :md="16" :lg="12" :xl="8">
-                    <h1>{{ i18n "pages.login.title" }}</h1>
+                    <h1 class="title">{{ i18n "pages.login.title" }}</h1>
                 </a-col>
             </a-row>
             <a-row type="flex" justify="center">
@@ -48,35 +60,36 @@
                         <a-form-item>
                             <a-input v-model.trim="user.username" placeholder='{{ i18n "username" }}'
                                      @keydown.enter.native="login" autofocus>
-                                <a-icon slot="prefix" type="user" style="color: rgba(0,0,0,.25)"/>
+                                <a-icon slot="prefix" type="user" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
                             </a-input>
                         </a-form-item>
                         <a-form-item>
                             <a-input type="password" v-model.trim="user.password"
                                      placeholder='{{ i18n "password" }}' @keydown.enter.native="login">
-                                <a-icon slot="prefix" type="lock" style="color: rgba(0,0,0,.25)"/>
+                                <a-icon slot="prefix" type="lock" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
                             </a-input>
                         </a-form-item>
                         <a-form-item v-if="secretEnable">
                             <a-input type="text" placeholder='{{ i18n "secretToken" }}' v-model.trim="user.loginSecret" @keydown.enter.native="login">
-                            <a-icon slot="prefix" type="key" style="color: rgba(0,0,0,.25)"/>
+                            <a-icon slot="prefix" type="key" :style="'font-size: 16px;' + themeSwitcher.textStyle" />
                         </a-input>
                         </a-form-item>
                         <a-form-item>
                             <a-button block @click="login" :loading="loading">{{ i18n "login" }}</a-button>
                         </a-form-item>
                         <a-form-item>
-
-                            <a-row justify="center" class="selectLang">
-                                <a-col :span="5"><span>Language :</span></a-col>
-
-                                <a-col :span="7">
-                                    <a-select
-                                            ref="selectLang"
-                                            v-model="lang"
-                                            @change="setLang(lang)"
-                                    >
-                                        <a-select-option  :value="l.value" label="English" v-for="l in supportLangs" >
+                            <a-row justify="center" class="centered">
+                                <a-button type="primary" :loading="loading" @click="login" :icon="loading ? 'poweroff' : undefined"
+                                          :style="loading ? { width: '50px' } : { display: 'block', width: '100%' }">
+                                    [[ loading ? '' : '{{ i18n "login" }}' ]]
+                                </a-button>
+                            </a-row>
+                        </a-form-item>
+                        <a-form-item>
+                            <a-row justify="center" class="centered">
+                                <a-col :span="12">
+                                    <a-select ref="selectLang" v-model="lang" @change="setLang(lang)" :dropdown-class-name="themeSwitcher.darkCardClass">
+                                        <a-select-option :value="l.value" label="English" v-for="l in supportLangs">
                                             <span role="img" aria-label="l.name" v-text="l.icon"></span>
                                             &nbsp;&nbsp;<span v-text="l.name"></span>
                                         </a-select-option>
@@ -84,6 +97,11 @@
                                 </a-col>
                             </a-row>
                         </a-form-item>
+                        <a-form-item>
+                            <a-row justify="center" class="centered">
+                                <theme-switch></theme-switch>
+                            </a-row>
+                        </a-form-item>
                     </a-form>
                 </a-col>
             </a-row>
@@ -91,24 +109,23 @@
     </transition>
 </a-layout>
 {{template "js" .}}
+{{template "component/themeSwitcher" .}}
 <script>
-    const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16);
-    const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16);
-    const deg = RandomUtil.randomIntRange(0, 360);
-    const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`;
-    document.querySelector('#app').style.background = background;
+
     const app = new Vue({
         delimiters: ['[[', ']]'],
         el: '#app',
         data: {
+            themeSwitcher,
             loading: false,
             user: new User(),
             secretEnable: false,
-            lang : ""
+            lang: ""
         },
-        created(){
-          this.lang = getLang();
-          this.secretEnable = this.getSecretStatus();
+        created() {
+            this.updateBackground();
+            this.lang = getLang();
+            this.secretEnable = this.getSecretStatus();
         },
         methods: {
             async login() {
@@ -120,16 +137,29 @@
                 }
             },
             async getSecretStatus() {
-                this.loading= true;
+                this.loading = true;
                 const msg = await HttpUtil.post('/getSecretStatus');
                 this.loading = false;
-                if (msg.success){
+                if (msg.success) {
                     this.secretEnable = msg.obj;
                     return msg.obj;
                 }
-            }
-        }
+            },
+            updateBackground() {
+                const leftColor = RandomUtil.randomIntRange(0x222222, 0xFFFFFF / 2).toString(16);
+                const rightColor = RandomUtil.randomIntRange(0xFFFFFF / 2, 0xDDDDDD).toString(16);
+                const deg = RandomUtil.randomIntRange(0, 360);
+                const background = `linear-gradient(${deg}deg, #${leftColor} 10%, #${rightColor} 100%)`;
+                document.querySelector('#app').style.background = this.themeSwitcher.isDarkTheme ? colors.dark.bg : background;
+            },
+        },
+        watch: {
+            'themeSwitcher.isDarkTheme'(newVal, oldVal) {
+                this.updateBackground();
+            },
+        },
     });
+
 </script>
 </body>
 </html>
\ No newline at end of file
