diff --git a/ui/src/layout/components/sidebar/SidebarItem.vue b/ui/src/layout/components/sidebar/SidebarItem.vue
index 059166934..88fc898b6 100644
--- a/ui/src/layout/components/sidebar/SidebarItem.vue
+++ b/ui/src/layout/components/sidebar/SidebarItem.vue
@@ -1,6 +1,27 @@
 <template>
   <div v-if="(!menu.meta || !menu.meta.hidden) && showMenu()" class="sidebar-item">
+    <el-sub-menu
+      v-if="menu?.children && menu?.children.length > 0"
+      :index="menu.path"
+      popper-class="sidebar-container-popper"
+    >
+      <template #title>
+        <el-icon>
+          <AppIcon v-if="menu.meta && menu.meta.icon" :iconName="menuIcon" class="sidebar-icon" />
+        </el-icon>
+        <span>{{ menu.meta?.title as string }}</span>
+      </template>
+      <sidebar-item
+        v-hasPermission="menu.meta?.permission"
+        v-for="(child, index) in menu?.children"
+        :key="index"
+        :menu="child"
+        :activeMenu="activeMenu"
+      >
+      </sidebar-item>
+    </el-sub-menu>
     <el-menu-item
+      v-else
       ref="subMenu"
       :index="menu.path"
       popper-class="sidebar-popper"
@@ -66,7 +87,18 @@ const menuIcon = computed(() => {
       color: var(--el-menu-active-color);
     }
   }
-
+  :deep(.el-sub-menu__title) {
+    padding: 13px 12px 13px 16px !important;
+    &:hover {
+      background: none;
+      color: var(--el-menu-active-color);
+    }
+  }
+  .el-sub-menu {
+    .el-menu-item {
+      padding-left: 43px !important;
+    }
+  }
   .el-menu-item.is-active {
     color: var(--el-menu-active-color);
     background: var(--el-color-primary-light-9);
diff --git a/ui/src/router/modules/setting.ts b/ui/src/router/modules/setting.ts
index fffe83e81..f9dd1e460 100644
--- a/ui/src/router/modules/setting.ts
+++ b/ui/src/router/modules/setting.ts
@@ -54,17 +54,55 @@ const settingRouter = {
       component: () => import('@/views/template/index.vue')
     },
     {
-      path: '/email',
-      name: 'email',
+      path: '/system',
+      name: 'system',
       meta: {
-        icon: 'Message',
-        title: '邮箱设置',
+        icon: 'app-setting',
+        iconActive: 'app-setting-active',
+        title: '系统设置',
         activeMenu: '/setting',
         parentPath: '/setting',
         parentName: 'setting',
         permission: new Role('ADMIN')
       },
-      component: () => import('@/views/email/index.vue')
+      children: [
+        {
+          path: '/system/theme',
+          name: 'theme',
+          meta: {
+            title: '外观设置',
+            activeMenu: '/setting',
+            parentPath: '/setting',
+            parentName: 'setting',
+            permission: new Role('ADMIN')
+          },
+          component: () => import('@/views/theme/index.vue')
+        },
+        {
+          path: '/system/authentication',
+          name: 'authentication',
+          meta: {
+            title: '登录认证',
+            activeMenu: '/setting',
+            parentPath: '/setting',
+            parentName: 'setting',
+            permission: new Role('ADMIN')
+          },
+          component: () => import('@/views/authentication/index.vue')
+        },
+        {
+          path: '/system/email',
+          name: 'email',
+          meta: {
+            title: '邮箱配置',
+            activeMenu: '/setting',
+            parentPath: '/setting',
+            parentName: 'setting',
+            permission: new Role('ADMIN')
+          },
+          component: () => import('@/views/email/index.vue')
+        }
+      ]
     }
   ]
 }
diff --git a/ui/src/views/authentication/component/LDAP.vue b/ui/src/views/authentication/component/LDAP.vue
new file mode 100644
index 000000000..b1d7d020d
--- /dev/null
+++ b/ui/src/views/authentication/component/LDAP.vue
@@ -0,0 +1,101 @@
+<template>
+  <div class="p-24" v-loading="loading">
+    <!-- <el-form
+      ref="emailFormRef"
+      :rules="rules"
+      :model="form"
+      label-position="top"
+      require-asterisk-position="right"
+    >
+      <el-form-item label="SMTP 主机" prop="email_host">
+        <el-input v-model="form.email_host" placeholder="请输入 SMTP 主机" />
+      </el-form-item>
+      <el-form-item label="SMTP 端口" prop="email_port">
+        <el-input v-model="form.email_port" placeholder="请输入 SMTP 端口" />
+      </el-form-item>
+      <el-form-item label="SMTP 账户" prop="email_host_user">
+        <el-input v-model="form.email_host_user" placeholder="请输入 SMTP 账户" />
+      </el-form-item>
+      <el-form-item label="发件人邮箱" prop="from_email">
+        <el-input v-model="form.from_email" placeholder="请输入发件人邮箱" />
+      </el-form-item>
+      <el-form-item label="密码" prop="email_host_password">
+        <el-input v-model="form.email_host_password" placeholder="请输入发件人密码" show-password />
+      </el-form-item>
+      <el-form-item>
+        <el-checkbox v-model="form.email_use_ssl"
+          >开启SSL(如果SMTP端口是465，通常需要启用SSL)
+        </el-checkbox>
+      </el-form-item>
+      <el-form-item>
+        <el-checkbox v-model="form.email_use_tls"
+          >开启TLS(如果SMTP端口是587，通常需要启用TLS)</el-checkbox
+        >
+      </el-form-item>
+      <el-button @click="submit(emailFormRef, 'test')" :disabled="loading"> 测试连接 </el-button>
+    </el-form>
+
+    <div class="text-right">
+      <el-button @click="submit(emailFormRef)" type="primary" :disabled="loading"> 保存 </el-button>
+    </div> -->
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, watch, onMounted } from 'vue'
+import emailApi from '@/api/email-setting'
+import type { FormInstance, FormRules } from 'element-plus'
+
+import { MsgSuccess } from '@/utils/message'
+
+const form = ref<any>({
+  email_host: '',
+  email_port: '',
+  email_host_user: '',
+  email_host_password: '',
+  email_use_tls: false,
+  email_use_ssl: false,
+  from_email: ''
+})
+
+const emailFormRef = ref()
+
+const loading = ref(false)
+
+const rules = reactive<FormRules<any>>({
+  email_host: [{ required: true, message: '请输入 SMTP 主机', trigger: 'blur' }],
+  email_port: [{ required: true, message: '请输入 SMTP 端口', trigger: 'blur' }],
+  email_host_user: [{ required: true, message: '请输入 SMTP 账户', trigger: 'blur' }],
+  email_host_password: [{ required: true, message: '请输入发件人邮箱密码', trigger: 'blur' }],
+  from_email: [{ required: true, message: '请输入发件人邮箱', trigger: 'blur' }]
+})
+
+const submit = async (formEl: FormInstance | undefined, test?: string) => {
+  if (!formEl) return
+  await formEl.validate((valid, fields) => {
+    if (valid) {
+      if (test) {
+        emailApi.postTestEmail(form.value, loading).then((res) => {
+          MsgSuccess('测试连接成功')
+        })
+      } else {
+        emailApi.putEmailSetting(form.value, loading).then((res) => {
+          MsgSuccess('设置成功')
+        })
+      }
+    }
+  })
+}
+
+function getDetail() {
+  emailApi.getEmailSetting(loading).then((res: any) => {
+    if (res.data && JSON.stringify(res.data) !== '{}') {
+      form.value = res.data
+    }
+  })
+}
+
+onMounted(() => {
+  getDetail()
+})
+</script>
+<style lang="scss" scoped></style>
diff --git a/ui/src/views/authentication/index.vue b/ui/src/views/authentication/index.vue
new file mode 100644
index 000000000..2a424951a
--- /dev/null
+++ b/ui/src/views/authentication/index.vue
@@ -0,0 +1,61 @@
+<template>
+  <div class="authentication-setting p-24">
+    <h4>登录认证</h4>
+    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
+      <template v-for="(item, index) in tabList" :key="index">
+        <el-tab-pane :label="item.label" :name="item.name">
+          <div class="authentication-setting__main main-calc-height">
+            <div class="form-container">
+              <el-scrollbar>
+                <component :is="item.component" />
+              </el-scrollbar>
+            </div>
+          </div>
+        </el-tab-pane>
+      </template>
+    </el-tabs>
+  </div>
+</template>
+<script setup lang="ts">
+import { reactive, ref, computed, onMounted } from 'vue'
+import emailApi from '@/api/email-setting'
+import type { FormInstance, FormRules } from 'element-plus'
+import { MsgSuccess } from '@/utils/message'
+import LDAP from './component/LDAP.vue'
+
+const activeName = ref('LDAP')
+const tabList = [
+  {
+    label: 'LDAP设置',
+    name: 'LDAP',
+    component: LDAP
+  }
+]
+
+// 动态引入组件
+const loadComponent = async (componentName: string) => {
+  await import(`./component/${componentName}.vue`).then((res) => res.default)
+}
+
+const currentComponent = computed(() => loadComponent(activeName.value))
+
+function handleClick() {}
+
+onMounted(() => {})
+</script>
+<style lang="scss" scoped>
+.authentication-setting__main {
+  background-color: var(--app-view-bg-color);
+  box-sizing: border-box;
+  min-width: 700px;
+  height: calc(100vh - var(--app-header-height) - var(--app-view-padding) * 2 - 80px);
+  box-sizing: border-box;
+  .form-container {
+    width: 70%;
+    margin: 0 auto;
+    :deep(.el-checkbox__label) {
+      font-weight: 400;
+    }
+  }
+}
+</style>
diff --git a/ui/src/views/email/index.vue b/ui/src/views/email/index.vue
index e7a6f6333..2b9228021 100644
--- a/ui/src/views/email/index.vue
+++ b/ui/src/views/email/index.vue
@@ -1,5 +1,5 @@
 <template>
-  <LayoutContainer header="邮箱设置">
+  <LayoutContainer header="邮箱配置">
     <div class="email-setting main-calc-height">
       <el-scrollbar>
         <div class="p-24" v-loading="loading">
diff --git a/ui/src/views/theme/index.vue b/ui/src/views/theme/index.vue
new file mode 100644
index 000000000..56549d281
--- /dev/null
+++ b/ui/src/views/theme/index.vue
@@ -0,0 +1,5 @@
+<template>
+  <LayoutContainer header="外观设置"> </LayoutContainer>
+</template>
+<script setup lang="ts"></script>
+<style lang="scss" scoped></style>