diff --git a/src/api/user.js b/src/api/user.js
index 19be1f0..dabe483 100644
--- a/src/api/user.js
+++ b/src/api/user.js
@@ -79,6 +79,14 @@ export function groupUsers (data) {
   return request({
     url: '/user/groupUsers',
     method: 'post',
-    data
+    data,
+  })
+}
+
+export function register (data) {
+  return request({
+    url: '/user/register',
+    method: 'post',
+    data,
   })
 }
diff --git a/src/permission.js b/src/permission.js
index 7dbded1..f58b285 100644
--- a/src/permission.js
+++ b/src/permission.js
@@ -10,7 +10,7 @@ import { T } from '@/utils/i18n'
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
-const whiteList = ['/login']
+const whiteList = ['/login', '/register']
 const routeStore = useRouteStore(pinia)
 const appStore = useAppStore(pinia)
 router.beforeEach(async (to, from, next) => {
diff --git a/src/router/index.js b/src/router/index.js
index e4fb363..e7945fa 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -7,7 +7,12 @@ const constantRoutes = [
     meta: { title: 'Login' },
     component: () => import('@/views/login/login.vue'),
   },
-
+  {
+    path: '/register',
+    name: 'Register',
+    meta: { title: 'Register' },
+    component: () => import('@/views/register/index.vue'),
+  },
   {
     path: '/404',
     component: () => import('@/views/error-page/404.vue'),
@@ -15,11 +20,13 @@ const constantRoutes = [
   },
   {
     path: '/oauth/:code',
+    meta: { title: 'OauthLogin' },
     component: () => import('@/views/oauth/login.vue'),
     hidden: true,
   },
   {
     path: '/oauth/bind/:code',
+    meta: { title: 'OauthBind' },
     component: () => import('@/views/oauth/bind.vue'),
     hidden: true,
   },
diff --git a/src/utils/i18n/en.json b/src/utils/i18n/en.json
index 903e744..3a032f3 100644
--- a/src/utils/i18n/en.json
+++ b/src/utils/i18n/en.json
@@ -438,5 +438,14 @@
   },
   "LastOnlineIp": {
     "One": "Last Online Ip"
+  },
+  "ConfirmPassword": {
+    "One": "Confirm Password"
+  },
+  "PasswordNotMatchConfirmPassword": {
+    "One": "Password not match Confirm Password"
+  },
+  "ToLogin": {
+    "One": "To Login"
   }
 }
diff --git a/src/utils/i18n/ko.json b/src/utils/i18n/ko.json
index 4efe106..ffa3609 100644
--- a/src/utils/i18n/ko.json
+++ b/src/utils/i18n/ko.json
@@ -424,5 +424,14 @@
   },
   "LastOnlineIp": {
     "One": "마지막 온라인 IP"
+  },
+  "ConfirmPassword": {
+    "One": "비밀번호 확인"
+  },
+  "PasswordNotMatchConfirmPassword": {
+    "One": "비밀번호가 확인 비밀번호와 일치하지 않습니다"
+  },
+  "ToLogin": {
+    "One": "로그인하려면 클릭하십시오"
   }
 }
diff --git a/src/utils/i18n/ru.json b/src/utils/i18n/ru.json
index 25b1f5c..1a54074 100644
--- a/src/utils/i18n/ru.json
+++ b/src/utils/i18n/ru.json
@@ -438,6 +438,15 @@
   },
   "LastOnlineIp": {
     "One": "Последний IP онлайн"
+  },
+  "ConfirmPassword": {
+    "One": "Подтвердите пароль"
+  },
+  "PasswordNotMatchConfirmPassword": {
+    "One": "Пароль и подтверждение пароля не совпадают"
+  },
+  "ToLogin": {
+    "One": "Войти"
   }
 }
 
diff --git a/src/utils/i18n/zh_CN.json b/src/utils/i18n/zh_CN.json
index 6f4c69c..e856779 100644
--- a/src/utils/i18n/zh_CN.json
+++ b/src/utils/i18n/zh_CN.json
@@ -428,8 +428,7 @@
   "LastOnlineIp": {
     "One": "最后在线IP"
   },
-  "or login in with" :
-  {
+  "or login in with": {
     "One": "或使用以下登陆"
   },
   "Optional, default is" :
@@ -450,7 +449,13 @@
   "New PassWD": {
     "One": "新密码"
   },
-  "ConformPassWD": {
+  "ConfirmPassword": {
     "One": "确认密码"
+  },
+  "PasswordNotMatchConfirmPassword": {
+    "One": "密码与确认密码不匹配"
+  },
+  "ToLogin": {
+    "One": "去登录"
   }
 }
diff --git a/src/views/login/login.vue b/src/views/login/login.vue
index 65085d9..89fc86e 100644
--- a/src/views/login/login.vue
+++ b/src/views/login/login.vue
@@ -15,6 +15,7 @@
 
         <el-form-item>
           <el-button @click="login" type="primary" class="login-button">{{ T('Login') }}</el-button>
+          <el-button v-if="allowRegister" @click="register" class="login-button">{{ T('Register') }}</el-button>
         </el-form-item>
       </el-form>
 
@@ -26,7 +27,7 @@
         <div v-for="(option, index) in options" :key="index" class="oidc-option">
           <el-button @click="handleOIDCLogin(option.name)" class="oidc-btn">
             <img :src="getProviderImage(option.name)" alt="provider" class="oidc-icon" />
-            {{ T(option.name) }}
+            <span>{{ T(option.name) }}</span>
           </el-button>
         </div>
       </div>
@@ -103,23 +104,13 @@ const getProviderImage = (provider) => {
   return providerImageMap[provider] || providerImageMap.default;
 };
 
+const allowRegister = ref(false)
 const loadLoginOptions = async () => {
   try {
-    const res = await loginOptions().catch(() => []);
-    if (!Array.isArray(res) || !res.length) return console.warn('No valid response received');
-
-    const jsonPart = res[0].split('/')[1];
-    if (!jsonPart) return console.error('Invalid input string:', res[0]);
-
-    // const ops = JSON.parse(jsonPart).map(option => ({ name: option.name }));
-    // 不确定怎么处理webauth,不显示
-    // 解析 JSON，并过滤掉 "webauth" 类型的选项
-    const ops = JSON.parse(jsonPart)
-      .filter(option => option.name !== "webauth") // 排除 "webauth" 类型的选项
-      .map(option => ({ name: option.name })); // 创建新的对象数组
-    if (!ops.length) return;
-
-    options.push(...ops);
+    const res = await loginOptions().catch(_ => false);
+    if(!res || !res.data) return console.error('No valid response received');
+    res.data.ops.map(option => (options.push({ name: option }))); // 创建新的对象数组
+    allowRegister.value = res.data.register
   } catch (error) {
     console.error('Error loading login options:', error.message);
   }
@@ -141,6 +132,10 @@ onMounted(async () => {
     loadLoginOptions(); // 组件挂载后调用登录选项加载函数
   }
 });
+
+const register = () => {
+  router.push('/register')
+}
 </script>
 
 <style scoped lang="scss">
@@ -151,6 +146,7 @@ onMounted(async () => {
   height: 100vh;
   background-color: #2d3a4b;
   padding: 20px;
+  box-sizing: border-box;
 }
 
 .login-card {
@@ -180,6 +176,7 @@ h1 {
   width: 100%;
   height: 40px;
   margin-bottom: 20px;
+  margin-left: 0;
 }
 
 .divider {
@@ -230,6 +227,7 @@ h1 {
 .oidc-icon {
   width: 24px;
   height: 24px;
+  margin-right: 10px;
 }
 
 .login-logo {
@@ -255,4 +253,4 @@ h1 {
     }
   }
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/views/oauth/bind.vue b/src/views/oauth/bind.vue
index 3e25c90..b87aba0 100644
--- a/src/views/oauth/bind.vue
+++ b/src/views/oauth/bind.vue
@@ -49,10 +49,17 @@
     const res = await bindConfirm({ code }).catch(_ => false)
     if (res) {
       resStatus.value = 1
-      ElMessage.success(T('OperationSuccessAndCloseAfter3Seconds'))
-      setTimeout(_ => {
-        out()
-      }, 3000)
+      if (res.data.device_type === 'webadmin') {
+        ElMessage.success(T('OperationSuccess'))
+        //后台登录
+        router.push('/')
+      } else {
+        ElMessage.success(T('OperationSuccessAndCloseAfter3Seconds'))
+        setTimeout(_ => {
+          out()
+        }, 3000)
+      }
+
     }
   }
   const out = () => {
diff --git a/src/views/register/index.vue b/src/views/register/index.vue
new file mode 100644
index 0000000..ed3782f
--- /dev/null
+++ b/src/views/register/index.vue
@@ -0,0 +1,147 @@
+<template>
+  <div class="login-container">
+    <div class="login-card">
+      <img src="@/assets/logo.png" alt="logo" class="login-logo"/>
+      <el-form ref="f" :model="form" label-position="top" class="login-form" :rules="rules">
+        <el-form-item :label="T('Username')" prop="username">
+          <el-input v-model="form.username" class="login-input"></el-input>
+        </el-form-item>
+
+        <el-form-item :label="T('Password')" prop="password">
+          <el-input v-model="form.password" type="password" show-password
+                    class="login-input"></el-input>
+        </el-form-item>
+        <el-form-item :label="T('ConfirmPassword')" prop="confirm_password">
+          <el-input v-model="form.confirm_password" type="password" @keyup.enter.native="submit" show-password
+                    class="login-input"></el-input>
+        </el-form-item>
+        <el-form-item label="">
+          <el-button @click="submit" class="login-button" type="success">{{ T('Submit') }}</el-button>
+          <el-button @click="toLogin" class="login-button">{{ T('ToLogin') }}</el-button>
+        </el-form-item>
+      </el-form>
+    </div>
+  </div>
+</template>
+
+<script setup>
+  import { reactive, ref } from 'vue'
+  import { ElMessage } from 'element-plus'
+  import { T } from '@/utils/i18n'
+  import { useRoute, useRouter } from 'vue-router'
+  import { register } from '@/api/user'
+  import { useUserStore } from '@/store/user'
+
+  const router = useRouter()
+  const userStore = useUserStore()
+  const form = reactive({
+    username: '',
+    password: '',
+    confirm_password: '',
+  })
+  const rules = {
+    username: [
+      { required: true, message: T('ParamRequired', { param: T('Username') }), trigger: 'blur' },
+    ],
+    password: [
+      { required: true, message: T('ParamRequired', { param: T('Password') }), trigger: 'blur' },
+    ],
+    confirm_password: [
+      { required: true, message: T('ParamRequired', { param: T('ConfirmPassword') }), trigger: 'blur' },
+      {
+        validator: (rule, value, callback) => {
+          if (value !== form.password) {
+            callback(new Error(T('PasswordNotMatchConfirmPassword')))
+          } else {
+            callback()
+          }
+        }, trigger: 'blur',
+      },
+    ],
+  }
+  const f = ref(null)
+  const submit = async () => {
+    const v = await f.value.validate().catch(_ => false)
+    if (!v) {
+      return
+    }
+    const res = await register(form).catch(_ => false)
+    if (!res) {
+      return
+    }
+    userStore.saveUserData(res.data)
+    ElMessage.success('Submit')
+    router.push('/')
+  }
+  const toLogin = () => {
+    router.push('/login')
+
+  }
+</script>
+
+<style scoped lang="scss">
+.login-container {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100vh;
+  background-color: #2d3a4b;
+  padding: 20px;
+  box-sizing: border-box;
+}
+
+.login-card {
+  width: 360px;
+  background-color: #283342;
+  padding: 40px;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+  text-align: center;
+}
+
+h1 {
+  margin-bottom: 20px;
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.login-form {
+  margin-bottom: 20px;
+}
+
+.login-input {
+  width: 100%;
+}
+
+.login-button {
+  width: 100%;
+  height: 40px;
+  margin-bottom: 20px;
+  margin-top: 20px;
+  margin-left: 0;
+}
+
+.login-logo {
+  width: 80px;
+  height: 80px;
+  margin: 0 auto 20px;
+  display: block;
+}
+
+.el-form-item {
+  ::v-deep(.el-form-item__label) {
+    color: #fff;
+  }
+
+  .el-input {
+    ::v-deep(.el-input__wrapper) {
+      border: 1px solid rgba(255, 255, 255, 0.1);
+      background: transparent;
+    }
+
+    ::v-deep(input) {
+      color: #fff;
+    }
+  }
+}
+</style>
diff --git a/src/views/user/composables/index.js b/src/views/user/composables/index.js
index abbd6c3..61831aa 100644
--- a/src/views/user/composables/index.js
+++ b/src/views/user/composables/index.js
@@ -91,6 +91,9 @@ export function useDel () {
     }
 
     const res = remove({ id }).catch(_ => false)
+    if (res) {
+      ElMessage.success(T('OperationSuccess'))
+    }
     return res
   }
   return {