diff --git a/src/Login.vue b/src/Login.vue
index 5ede32b6..818a8258 100644
--- a/src/Login.vue
+++ b/src/Login.vue
@@ -39,7 +39,7 @@
 
 <script>
 import { mapActions } from 'vuex'
-import { post } from '@/utils/http'
+import { post, get } from '@/utils/http'
 export default {
 
   name: 'Login',
@@ -65,6 +65,12 @@ export default {
       post('sys/login', { username: this.username, pin: this.pin }).then(
         res => {
           if (res.code === 200) {
+            if (!this.$_.isEmpty(res.data.lang)) {
+              localStorage.setItem('cn-language', res.data.lang)
+            }
+            if (!this.$_.isEmpty(res.data.theme)) {
+              localStorage.setItem('cn-theme', res.data.theme)
+            }
             this.loginSuccess(res)
             localStorage.setItem('cn-username', this.username)
           } else if (res.code === 518005) {
@@ -82,7 +88,31 @@ export default {
         this.blockOperation.query = false
         this.$message.error(this.$t('tip.unknownError'))
       })
+    },
+    appearance () {
+      get('/sys/appearance').then(res => {
+        if (res.code === 200) {
+          this.appearanceOut(res.data)
+        }
+      })
+    },
+    appearanceOut (data) {
+      if (this.$_.isEmpty(localStorage.getItem('cn-language'))) {
+        localStorage.setItem('cn-language', data.lang)
+      }
+      if (this.$_.isEmpty(localStorage.getItem('cn-sys-timezone'))) {
+        localStorage.setItem('cn-sys-timezone', data.timezone)
+      }
+      if (this.$_.isEmpty(localStorage.getItem('cn-theme'))) {
+        localStorage.setItem('cn-theme', data.theme)
+      }
+      if (this.$_.isEmpty(localStorage.getItem('cn-date-format'))) {
+        localStorage.setItem('cn-date-format', data.dateFormat)
+      }
     }
+  },
+  mounted () {
+    this.appearance()
   }
 }
 </script>
diff --git a/src/components/rightBox/settings/UserBox.vue b/src/components/rightBox/settings/UserBox.vue
index 8b1097ac..ae6d24cb 100644
--- a/src/components/rightBox/settings/UserBox.vue
+++ b/src/components/rightBox/settings/UserBox.vue
@@ -54,6 +54,36 @@
               </template>
             </el-select>
           </el-form-item>
+          <!--i18n-->
+          <el-form-item :label="$t('config.i18n.lang')" prop="i18n">
+            <el-select id="account-input-roleIds"
+                       v-model="editObject.lang"
+                       class="right-box__select"
+                       clearable
+                       collapse-tags
+                       placeholder=""
+                       popper-class="right-box-select-dropdown prevent-clickoutside"
+                       size="small">
+              <template v-for="lang in langData" :key="lang.value">
+                <el-option :label="lang.label" :value="lang.value"></el-option>
+              </template>
+            </el-select>
+          </el-form-item>
+          <!--theme-->
+          <el-form-item :label="$t('config.user.theme')" prop="i18n">
+            <el-select id="account-input-roleIds"
+                       v-model="editObject.theme"
+                       class="right-box__select"
+                       clearable
+                       collapse-tags
+                       placeholder=""
+                       popper-class="right-box-select-dropdown prevent-clickoutside"
+                       size="small">
+              <template v-for="theme in themeData" :key="theme.value">
+                <el-option :label="theme.label" :value="theme.value"></el-option>
+              </template>
+            </el-select>
+          </el-form-item>
           <!--enable-->
           <el-form-item :label="$t('config.user.enable')">
             <el-switch
@@ -86,6 +116,7 @@
 <script>
 import rightBoxMixin from '@/mixins/right-box'
 import { get, post, put } from '@/utils/http'
+import { themeData, langData } from '@/utils/constants'
 export default {
   name: 'UserBox',
   mixins: [rightBoxMixin],
@@ -137,7 +168,9 @@ export default {
           { type: 'email', message: this.$t('validate.email') }
         ]
       },
-      roleData: []
+      roleData: [],
+      themeData,
+      langData
     }
   },
   setup () {
diff --git a/src/utils/constants.js b/src/utils/constants.js
index bd3cc13e..d118344c 100644
--- a/src/utils/constants.js
+++ b/src/utils/constants.js
@@ -7,6 +7,8 @@ export const storageKey = {
   languages: 'cn-languages',
   language: 'cn-language',
   timezone: 'cn-timezone',
+  theme: 'cn-theme',
+  dateFormat: 'cn-date-format',
   timezoneOffset: 'cn-timezone-offset',
   timezoneLocalOffset: 'cn-timezone-local-offset',
   token: 'cn-token',
@@ -195,6 +197,16 @@ export const dnsServerRole = {
   RTDNSM: 'RTDNSM'
 }
 
+export const themeData = [
+  { value: 'light', label: 'light' },
+  { value: 'dark', label: 'dark' }
+]
+
+export const langData = [
+  { value: 'zh', label: 'zh' },
+  { value: 'en', label: 'en' }
+]
+
 export const performanceMetricMapping = {
   'dns error': 'DNS Error Rate',
   'http error': 'HTTP Error Rate',