diff --git a/src/assets/css/components/index.scss b/src/assets/css/components/index.scss
index 503cef6f..b739d2c4 100644
--- a/src/assets/css/components/index.scss
+++ b/src/assets/css/components/index.scss
@@ -76,5 +76,6 @@
 @import './components/common/chart-tab';
 
 @import 'views/administration/AdministrationTabs';
+@import 'views/administration/Appearance.scss';
 
 @import 'views/setting/knowledgeBase';
diff --git a/src/assets/css/components/views/administration/Appearance.scss b/src/assets/css/components/views/administration/Appearance.scss
new file mode 100644
index 00000000..c0ec4db3
--- /dev/null
+++ b/src/assets/css/components/views/administration/Appearance.scss
@@ -0,0 +1,63 @@
+.appearance{
+  height: calc(100% - 100px);
+  display:flex;
+  flex-direction:column;
+  .appearance-form {
+    padding-top:40px;
+    padding-left:100px;
+    background-color: white;
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    //width: 600px;
+    .el-input {
+      width:600px;
+    }
+    .el-form .el-form-item .el-form-item__label {
+      padding-bottom: 6px;
+      font-size: 14px;
+      line-height: 16px;
+    }
+  }
+  .edit-appearance-base__footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100px;
+    margin-top: 3px;
+    box-shadow: 0 -1px 4px 0 rgba(0,0,0,0.10);
+
+    .footer__btn {
+      margin: 0 10px;
+      height: 30px;
+      min-width: 74px;
+      padding: 0 15px;
+      color: white;
+      background-color: #38ACD2;
+      border: none;
+      border-radius: 4px;
+      outline: none;
+      font-size: 14px;
+      cursor: pointer;
+      transition: background-color linear .2s, color linear .1s;
+    }
+    .footer__btn:hover:not(.footer__btn--disabled) {
+      background-color: lighten(#38ACD2, 10%);
+    }
+    .footer__btn--light {
+      background-color: #F5F6F7;
+      border: 1px solid $--border-color-primary;
+      color: #333;
+    }
+    .footer__btn.footer__btn--light:hover:not(.footer__btn--disabled) {
+      background-color: white;
+      border-color: lighten(#38ACD2, 40%);
+      color: #38ACD2;
+    }
+    .footer__btn--disabled {
+      opacity: .6;
+      cursor: default;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index d98cc24a..8fd42439 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -67,6 +67,11 @@ const routes = [
             name: 'OperationLog',
             path: '/administration/operationLog',
             component: () => import('@/views/administration/OperationLog')
+          },
+          {
+            name: 'Appearance',
+            path: '/administration/appearance',
+            component: () => import('@/views/administration/Appearance')
           }
         ]
       },
diff --git a/src/views/administration/Appearance.vue b/src/views/administration/Appearance.vue
new file mode 100644
index 00000000..55e49758
--- /dev/null
+++ b/src/views/administration/Appearance.vue
@@ -0,0 +1,188 @@
+<template>
+  <div class="appearance" :class="from">
+    <div class="appearance-form">
+      <el-form ref="appearanceForm" :model="appearanceObject"  label-position="top" label-width="120px">
+        <el-form-item :label="$t('config.appearance.dateFormat')" prop="dateFormat">
+          <el-select id="appearance-dateFormat"
+                     v-model="appearanceObject.dateFormat"
+                     collapse-tags
+                     placeholder=" "
+                     popper-class="right-box-select-dropdown right-box-select-report "
+                     size="small">
+            <template v-for="dateFormat in dateFormatList" :key="dateFormat.id">
+              <el-option :label="dateFormat.label" :value="dateFormat.value">
+                <span style="float: left">{{ dateFormat.label }}</span>
+                <span style="float: right;">{{ dateFormat.example }}</span>
+              </el-option>
+            </template>
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('config.appearance.lang')" prop="lang">
+          <el-select id="appearance-lang"
+                     v-model="appearanceObject.lang"
+                     collapse-tags
+                     placeholder=" "
+                     popper-class="right-box-select-dropdown right-box-select-report "
+                     size="small">
+            <template v-for="lang in langList" :key="lang.id">
+              <el-option :label="lang.label" :value="lang.value"></el-option>
+            </template>
+          </el-select>
+        </el-form-item>
+        <el-form-item :label="$t('config.appearance.timezone')" prop="timezone">
+          <el-select id="appearance-timezone"
+                     v-model="appearanceObject.timezone"
+                     collapse-tags
+                     filterable
+                     placeholder=" "
+                     popper-class="right-box-select-dropdown right-box-select-report "
+                     size="small">
+            <template v-for="timezone in timezoneList" :key="timezone.id">
+              <el-option :label="timezone.value" :value="timezone.value">
+                <span style="float: left">{{ timezone.value }}</span>
+                <span style="float: right;">{{ timezone.remark}}</span>
+              </el-option>
+            </template>
+          </el-select>
+
+        </el-form-item>
+      </el-form>
+    </div>
+    <div class="edit-appearance-base__footer">
+      <button style="position: relative;" :class="{'footer__btn--disabled': blockOperation.save}" :disabled="blockOperation.save" class="footer__btn" @click="save">
+        <loading size="small" :loading="blockOperation.save"></loading>
+        <span>{{$t('overall.save')}}</span>
+      </button>
+    </div>
+  </div>
+</template>
+<script>
+  import { api,getDictList } from '@/utils/api'
+  import { get, put } from '@/utils/http'
+  import { storageKey } from '@/utils/constants'
+
+
+  export default {
+    name: 'Appearance',
+    data () {
+      return {
+        url: api.appearance,
+        appearanceObject: { // 空白对象
+          dateFormat: '',
+          lang: '',
+          timezone: ''
+        },
+        timezoneList:[],
+        dateFormatList:[
+          {
+            id:1,
+            label:'DD/MM/YYYY HH:mm:ss',
+            value:'DD/MM/YYYY HH:mm:ss',
+            example:'20/03/2023 09:30:38'
+          },
+          {
+            id:2,
+            label:'MM/DD/YYYY HH:mm:ss',
+            value:'MM/DD/YYYY HH:mm:ss',
+            example:'03/20/2023 09:30:38'
+          },
+          {
+            id:3,
+            label:'YYYY-MM-DD HH:mm:ss',
+            value:'YYYY-MM-DD HH:mm:ss',
+            example:'2023-03-20 09:30:38'
+          }
+        ],
+        langList:[
+          {
+            id:1,
+            label:'English',
+            value:'en'
+          },
+          {
+            id:2,
+            label:'中文',
+            value:'zh'
+          }
+        ]
+      }
+    },
+    mounted () {
+      this.initData()
+    },
+    methods:{
+      async initData () {
+        this.dateFormatList.forEach(date => {
+          date.example = window.$dayJs(new Date()).tz().format(date.value)
+        })
+        this.timezoneList = await getDictList({ type: 'timezoneList',pageSize: -1 })
+        if (this.timezoneList && this.timezoneList.length > 0) {
+          this.timezoneList.forEach(mapData => {
+            let remark = Number(mapData.remark)/3600000 //转换为小
+            mapData.timezoneOffset = remark
+            let hour = Math.abs(parseInt(remark))
+            let remarkStr = remark.toString()
+            let minute = 0
+            if(remarkStr.indexOf('.') > -1){
+              minute = Math.abs(Number(remarkStr.substring(remarkStr.indexOf('.')))*60)
+            }
+            let str = ''
+            if(hour<10){
+              str = '0'+hour
+            }else {
+              str = hour
+            }
+            str += ':'
+            if(minute<10){
+              str += '0'+minute
+            }else {
+              str += minute
+            }
+            if(remark > 0){
+              mapData.remark = 'UTC+'+str
+            }else if(remark === 0){
+              mapData.remark = 'UTC'
+            }else {
+              mapData.remark = 'UTC-'+str
+            }
+          })
+        }
+        get(this.url, { pageSize: -1 }).then(response => {
+          if (response.code === 200) {
+            this.appearanceObject = response.data
+          }
+        })
+      },
+      save () {
+        if (this.blockOperation.save) { return }
+        this.blockOperation.save = true
+        put(this.url, this.appearanceObject).then(response => {
+          if (response.code === 200) {
+            this.$message({ duration: 2000, type: 'success', message: this.$t('tip.saveSuccess') })
+          } else {
+            this.$message.error(response.message)
+          }
+        }).catch(e => {
+          console.error(e)
+          if (e.response && e.response.message) {
+            this.$message.error(e.response.message)
+          } else {
+            this.$message.error('Something went wrong...')
+          }
+        }).finally(() => {
+          this.blockOperation.save = false
+          if (this.appearanceObject.dateFormat !== localStorage.getItem(storageKey.dateFormat)) {
+            localStorage.setItem(storageKey.dateFormat, this.appearanceObject.dateFormat)
+          }
+          if (this.appearanceObject.timezone !== localStorage.getItem(storageKey.sysTimezone)) {
+            localStorage.setItem(storageKey.sysTimezone, this.appearanceObject.timezone)
+          }
+          let timezone = this.timezoneList.find(mapData => mapData.value === this.appearanceObject.timezone)
+          if (timezone.timezoneOffset !== localStorage.getItem(storageKey.timezoneOffset)) {
+            localStorage.setItem(storageKey.timezoneOffset, timezone.timezoneOffset)
+          }
+        })
+      }
+    }
+  }
+</script>