diff --git a/src/App.vue b/src/App.vue
index 38c5801..471ae80 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,18 +1,12 @@
 <script setup lang="ts">
 // import { darkTheme } from 'naive-ui';
 import { zhCN, dateZhCN, GlobalThemeOverrides } from 'naive-ui';
+import json from './theme.json';
 
 const locale = zhCN;
 const dateLocale = dateZhCN;
 
-const themeOverrides: GlobalThemeOverrides = {
-  common: {
-    primaryColor: '#316C72FF',
-    primaryColorHover: '#316C72E3',
-    primaryColorPressed: '#2B4C59FF',
-    primaryColorSuppl: '#316C7263',
-  },
-};
+const themeOverrides: GlobalThemeOverrides = {} || json;
 </script>
 
 <template>
diff --git a/src/theme.json b/src/theme.json
new file mode 100644
index 0000000..ed6d7a2
--- /dev/null
+++ b/src/theme.json
@@ -0,0 +1,29 @@
+{
+  "Card": {
+    "titleFontSizeSmall": "17px"
+  },
+  "common": {
+    "primaryColor": "#0F72EFFF",
+    "primaryColorHover": "#3892F2FF",
+    "primaryColorPressed": "#0958C6FF",
+    "primaryColorSuppl": "#63AEF5FF",
+    "successColor": "#00C18BFF",
+    "successColorHover": "#23C343FF",
+    "successColorPressed": "#009A29FF",
+    "successColorSuppl": "#4CD263FF",
+    "warningColor": "#FFA145FF",
+    "warningColorHover": "#FFB766FF",
+    "warningColorPressed": "#D2792BFF",
+    "warningColorSuppl": "#FFCB86FF",
+    "errorColor": "#FF5169FF",
+    "errorColorHover": "#FF6F7EFF",
+    "errorColorPressed": "#D2324DFF",
+    "errorColorSuppl": "#FF8D95FF",
+    "textColorBase": "#E61D1DFF",
+    "textColor1": "#252631FF",
+    "textColor2": "#778CA2FF",
+    "bodyColor": "#F2F3F5FF",
+    "textColor3": "#A6B6C6FF",
+    "textColorDisabled": "#C9CDD4FF"
+  }
+}
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index 7623e32..eccdbff 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,31 +1,82 @@
 <template>
-  <div text-center flex-center wh-full>
-    <n-carousel autoplay w-500px>
-      <img
-        h-screen
-        object-cover
-        src="https://images.unsplash.com/photo-1659991689791-db84493f8544?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80"
-      />
-      <img
-        object-cover
-        h-screen
-        src="https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
-      />
-      <img
-        h-screen
-        object-cover
-        src="https://images.unsplash.com/photo-1657299156568-c94580e20fb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
-      />
-      <img
-        object-cover
-        h-screen
-        src="https://images.unsplash.com/photo-1659983391845-47ea9d99e7bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80"
-      />
+  <div flex-center wh-full bg-hex-F3F4F6>
+    <n-carousel autoplay trigger="hover" dot-type="line" effect="fade" :interval="3000" w-lg sm:hidden xl:block>
+      <img v-for="(item, index) in swiperList" :key="index" h-screen object-cover :src="item" />
     </n-carousel>
-    <div c-lightBlue flex-1><router-link to="/">Go to layout</router-link></div>
+    <div flex-1 flex-center>
+      <div b-rd-2 bg-white w-md h-xl shadow-lg p-5xl>
+        <n-h1>Ench Admin</n-h1>
+        <n-p depth="3">高效、简约、有点好玩</n-p>
+        <n-form ref="formRef" :rules="rules" :model="formValue" :show-label="false" size="large">
+          <n-form-item path="account">
+            <n-input v-model:value="formValue.account" placeholder="输入账号" round />
+          </n-form-item>
+          <n-form-item path="pwd">
+            <n-input v-model:value="formValue.pwd" type="password" placeholder="输入密码" round />
+          </n-form-item>
+          <n-form-item path="code">
+            <n-input v-model:value="formValue.code" placeholder="输入验证码" round />
+          </n-form-item>
+          <n-space vertical :size="24">
+            <div class="flex-y-center justify-between">
+              <n-checkbox>记住我</n-checkbox>
+              <n-button :text="true">忘记密码？</n-button>
+            </div>
+            <n-button w-full type="primary" round size="large" @click="validateAll">登录</n-button>
+          </n-space>
+        </n-form>
+
+        <n-divider><span op-50>其他登录</span></n-divider>
+      </div>
+    </div>
   </div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import { FormInst } from 'naive-ui';
+import { useRouter } from 'vue-router';
+import { ref } from 'vue';
+const router = useRouter();
+const swiperList = ref([
+  'https://images.unsplash.com/photo-1659991689791-db84493f8544?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=686&q=80',
+  'https://images.unsplash.com/photo-1599420186946-7b6fb4e297f0?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
+  'https://images.unsplash.com/photo-1657299156568-c94580e20fb6?ixlib=rb-1.2.1&ixid=MnwxMjA3fDF8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
+  'https://images.unsplash.com/photo-1659983391845-47ea9d99e7bd?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=687&q=80',
+]);
+
+const formValue = ref({
+  account: '',
+  pwd: '',
+  code: '',
+});
+const rules = {
+  account: {
+    required: true,
+    trigger: 'blur',
+    message: '请输入账户',
+  },
+  pwd: {
+    required: true,
+    trigger: 'blur',
+    message: '请输入密码',
+  },
+  code: {
+    required: true,
+    trigger: 'blur',
+    min: 4,
+    message: '最短长度为 4',
+  },
+};
+const formRef = ref<FormInst | null>(null);
+
+const validateAll = () => {
+  formRef.value?.validate((errors) => {
+    if (errors) {
+      return console.error(errors);
+    }
+    router.push('/');
+  });
+};
+</script>
 
 <style scoped></style>
diff --git a/unocss.config.ts b/unocss.config.ts
index c19e36a..a366645 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -5,5 +5,7 @@ export default defineConfig({
     'wh-full': 'w-full h-full',
     'flex-center': 'flex justify-center items-center',
     'flex-col-center': 'flex-center flex-col',
+    'flex-x-center': 'flex justify-center',
+    'flex-y-center': 'flex items-center',
   },
 });