diff --git a/index.html b/index.html
index c9d26eb..f2b0bb2 100644
--- a/index.html
+++ b/index.html
@@ -1,11 +1,11 @@
 <!DOCTYPE html>
-<html lang="en">
+<html lang="zh-CN">
 
 <head>
     <meta charset="UTF-8">
     <link rel="icon" href="/favicon.ico">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Vite App</title>
+    <title>Plusone Admin</title>
 </head>
 
 <body>
diff --git a/package.json b/package.json
index 08411fa..4b0991b 100644
--- a/package.json
+++ b/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "run-p type-check build-only",
     "preview": "vite preview",
     "build-only": "vite build",
diff --git a/src/App.vue b/src/App.vue
index ece2079..186d4b5 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -1,7 +1,28 @@
 <template>
-    <RouterView />
+    <n-config-provider :theme-overrides="themeOverrides">
+        <n-message-provider>
+            <router-view />
+        </n-message-provider>
+    </n-config-provider>
 </template>
 
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { NConfigProvider, type GlobalThemeOverrides } from 'naive-ui'
+
+const themeOverrides: GlobalThemeOverrides = {
+    common: {
+        primaryColor: '#42b883',
+        borderRadius: '4px',
+    },
+    // Button: {
+    //     textColor: '#FF0000',
+    // },
+    // Select: {
+    //     peers: {
+    //         InternalSelection: {
+    //             textColor: '#FF0000',
+    //         },
+    //     },
+    // },
+}
 </script>
diff --git a/src/main.ts b/src/main.ts
index 5657092..f70a218 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -18,6 +18,13 @@ import {
     NLayoutSider,
     NMenu,
     NScrollbar,
+    NForm,
+    NFormItem,
+    NInput,
+    NRow,
+    NCol,
+    NMessageProvider,
+    NCard,
 } from 'naive-ui'
 
 const naive = create({
@@ -30,6 +37,13 @@ const naive = create({
         NLayoutSider,
         NMenu,
         NScrollbar,
+        NForm,
+        NFormItem,
+        NInput,
+        NRow,
+        NCol,
+        NMessageProvider,
+        NCard,
     ],
 })
 
diff --git a/src/router/index.ts b/src/router/index.ts
index 87b4bca..0a6e774 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -7,8 +7,7 @@ const router = createRouter({
     routes: [
         {
             path: '/',
-            name: 'home',
-            component: HomeView,
+            redirect: '/login',
         },
         {
             path: '/login',
diff --git a/src/views/LoginView/LoginView.vue b/src/views/LoginView/LoginView.vue
index c5ef641..c49c18b 100644
--- a/src/views/LoginView/LoginView.vue
+++ b/src/views/LoginView/LoginView.vue
@@ -1,5 +1,184 @@
 <template>
-    <h1>This is login page</h1>
+    <div class="login-page">
+        <div class="login-form-container">
+            <div class="title">
+                <span style="color: #42b883">Plusone Admin&nbsp;</span>
+                <span>登录</span>
+            </div>
+
+            <n-form ref="formRef" :model="model" :rules="rules">
+                <n-form-item path="principal" :show-label="false">
+                    <n-input
+                        placeholder="用户名 / 邮箱地址 / 手机号"
+                        v-model:value="model.principal"
+                        @keydown.enter.prevent
+                    />
+                </n-form-item>
+                <n-form-item path="password" :show-label="false">
+                    <n-input
+                        placeholder="密码"
+                        v-model:value="model.password"
+                        type="password"
+                        @input="handlePasswordInput"
+                        @keydown.enter.prevent
+                    />
+                </n-form-item>
+                <n-form-item ref="rPasswordFormItemRef" first path="reenteredPassword" :show-label="false">
+                    <n-input
+                        placeholder="重复密码"
+                        v-model:value="model.reenteredPassword"
+                        :disabled="!model.password"
+                        type="password"
+                        @keydown.enter.prevent
+                    />
+                </n-form-item>
+                <n-row :gutter="[0, 24]">
+                    <n-col :span="24">
+                        <div style="display: flex; justify-content: flex-end">
+                            <n-button
+                                :disabled="model.principal === null"
+                                round
+                                type="primary"
+                                @click="handleBtnLoginClick"
+                            >
+                                登录
+                            </n-button>
+                        </div>
+                    </n-col>
+                </n-row>
+            </n-form>
+        </div>
+    </div>
+
+    <pre>{{ JSON.stringify(model, null, 2) }}</pre>
 </template>
 
-<script lang="ts" setup></script>
+<script lang="ts">
+import { defineComponent, ref } from 'vue'
+import type { FormInst, FormItemInst, FormItemRule, FormRules } from 'naive-ui'
+import { useMessage } from 'naive-ui'
+
+interface LoginByPasswordCommand {
+    principal: string
+    password: string
+    reenteredPassword: string
+}
+
+export default defineComponent({
+    setup() {
+        const formRef = ref<FormInst | null>(null)
+        const rPasswordFormItemRef = ref<FormItemInst | null>(null)
+        const message = useMessage()
+        const modelRef = ref<LoginByPasswordCommand>({
+            principal: '',
+            password: '',
+            reenteredPassword: '',
+        })
+        function validatePasswordStartWith(rule: FormItemRule, value: string): boolean {
+            return (
+                !!modelRef.value.password &&
+                modelRef.value.password.startsWith(value) &&
+                modelRef.value.password.length >= value.length
+            )
+        }
+        function validatePasswordSame(rule: FormItemRule, value: string): boolean {
+            return value === modelRef.value.password
+        }
+        const rules: FormRules = {
+            age: [
+                {
+                    required: true,
+                    validator(rule: FormItemRule, value: string) {
+                        if (!value) {
+                            return new Error('需要年龄')
+                        } else if (!/^\d*$/.test(value)) {
+                            return new Error('年龄应该为整数')
+                        } else if (Number(value) < 18) {
+                            return new Error('年龄应该超过十八岁')
+                        }
+                        return true
+                    },
+                    trigger: ['input', 'blur'],
+                },
+            ],
+            password: [
+                {
+                    required: true,
+                    message: '请输入密码',
+                },
+            ],
+            reenteredPassword: [
+                {
+                    required: true,
+                    message: '请再次输入密码',
+                    trigger: ['input', 'blur'],
+                },
+                {
+                    validator: validatePasswordStartWith,
+                    message: '两次密码输入不一致',
+                    trigger: 'input',
+                },
+                {
+                    validator: validatePasswordSame,
+                    message: '两次密码输入不一致',
+                    trigger: ['blur', 'password-input'],
+                },
+            ],
+        }
+        return {
+            formRef,
+            rPasswordFormItemRef,
+            model: modelRef,
+            rules,
+            handlePasswordInput() {
+                if (modelRef.value.reenteredPassword) {
+                    rPasswordFormItemRef.value?.validate({ trigger: 'password-input' })
+                }
+            },
+            handleBtnLoginClick(e: MouseEvent) {
+                e.preventDefault()
+                formRef.value?.validate((errors) => {
+                    if (!errors) {
+                        message.success('验证成功')
+                    } else {
+                        console.log(errors)
+                        message.error('验证失败')
+                    }
+                })
+            },
+        }
+    },
+})
+</script>
+
+<style scoped>
+.login-page {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.login-page > .login-form-container {
+    width: 320px;
+    background-color: #f3f3f3;
+    padding: 40px;
+    border-radius: 4px;
+    border: solid 1px #efeff5;
+}
+
+.title {
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.title::after {
+    height: 24px;
+    display: block;
+    content: '';
+}
+</style>
