diff --git a/build/plugins/unocss.ts b/build/plugins/unocss.ts
index c8040e4..06b7cc9 100644
--- a/build/plugins/unocss.ts
+++ b/build/plugins/unocss.ts
@@ -1,6 +1,3 @@
 import Unocss from 'unocss/vite'; // https://github.com/unocss/unocss
-import { presetUno, presetAttributify, presetIcons } from 'unocss';
 
-export default Unocss({
-  presets: [presetUno(), presetAttributify(), presetIcons()],
-});
+export default Unocss();
diff --git a/package.json b/package.json
index 19eb0e4..54b81fd 100644
--- a/package.json
+++ b/package.json
@@ -48,6 +48,7 @@
     "eslint-plugin-vue": "^9.3.0",
     "husky": "^8.0.0",
     "lint-staged": "^13.0.3",
+    "naive-ui": "^2.32.1",
     "prettier": "^2.7.1",
     "rollup-plugin-visualizer": "^5.7.1",
     "typescript": "^4.6.4",
diff --git a/src/layouts/BasicLayout/index.vue b/src/layouts/BasicLayout/index.vue
index 830dfae..c29992d 100644
--- a/src/layouts/BasicLayout/index.vue
+++ b/src/layouts/BasicLayout/index.vue
@@ -1,14 +1,14 @@
 <template>
-  <div>layout-page</div>
-  route:
-  <br />
-  <router-link to="/test1">Go to test1</router-link>
-  |
-  <router-link to="/test2">Go to test2</router-link>
-  |
-  <router-link to="/test3">Go to test3</router-link>
-  <br />
-  <router-link to="/login">Go to login</router-link>
+  <div text-3xl text-center>layout-page</div>
+  <div text-center>
+    <router-link to="/test1">Go to test1</router-link>
+    |
+    <router-link to="/test2">Go to test2</router-link>
+    |
+    <router-link to="/test3">Go to test3</router-link>
+    |
+    <router-link to="/login" c-gray>Go to login</router-link>
+  </div>
   <router-view></router-view>
 </template>
 
diff --git a/src/styles/css/index.css b/src/styles/css/index.css
index 435462a..69b897a 100644
--- a/src/styles/css/index.css
+++ b/src/styles/css/index.css
@@ -1 +1,7 @@
-@import './reset.css';
\ No newline at end of file
+@import './reset.css';
+
+html,
+body,
+#app {
+  height: 100%;
+}
\ No newline at end of file
diff --git a/src/views/login/index.vue b/src/views/login/index.vue
index a22cd37..5aa101a 100644
--- a/src/views/login/index.vue
+++ b/src/views/login/index.vue
@@ -1,10 +1,10 @@
 <template>
-  <div style="text-align: center">
-    <h1>{{ msg }}</h1>
-    <span>
+  <div text-center flex-col-center wh-full>
+    <h1 font="bold" text-5xl>{{ msg }}</h1>
+    <div m-10>
       Already configured: vue3、vite3、unocss、eslint、prettier、ts、tsx、conventional、husk、lint-staged、vue-router
-    </span>
-    <div><router-link to="/">Go to layout</router-link></div>
+    </div>
+    <div c-lightBlue><router-link to="/">Go to layout</router-link></div>
   </div>
 </template>
 
diff --git a/src/views/test/test1.vue b/src/views/test/test1.vue
index 0e65823..977a247 100644
--- a/src/views/test/test1.vue
+++ b/src/views/test/test1.vue
@@ -1,6 +1,5 @@
 <template>
-  <div text-center bg-green-500 rounded c-rose>I prove that you have made the jump test1.</div>
-  <div text-center c-yellow>Uno css</div>
+  <div text-center c-blue>I prove that you have made the jump test1.</div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/test/test2.vue b/src/views/test/test2.vue
index a098e6f..4f15d51 100644
--- a/src/views/test/test2.vue
+++ b/src/views/test/test2.vue
@@ -1,10 +1,5 @@
 <template>
-  <div style="text-align: center">I prove that you have made the jump test2.</div>
-  <button
-    class="py-2 px-4 font-semibold rounded-lg shadow-md text-white bg-green-500 hover:bg-green-700 border-none cursor-pointer"
-  >
-    Click me
-  </button>
+  <div text-center c-yellow>I prove that you have made the jump test2.</div>
 </template>
 
 <script setup lang="ts">
diff --git a/src/views/test/test3.vue b/src/views/test/test3.vue
index b7f274d..4144cd4 100644
--- a/src/views/test/test3.vue
+++ b/src/views/test/test3.vue
@@ -1,5 +1,5 @@
 <template>
-  <div style="text-align: center">I prove that you have made the jump test3.</div>
+  <div text-center c-red>I prove that you have made the jump test3.</div>
 </template>
 
 <script setup lang="ts">
diff --git a/tsconfig.json b/tsconfig.json
index 6be9216..4570e7f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -15,7 +15,8 @@
     "paths": {
       "~/*": ["./*"],
       "@/*": ["./src/*"]
-    }
+    },
+    "types": ["naive-ui/volar"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }
diff --git a/unocss.config.ts b/unocss.config.ts
new file mode 100644
index 0000000..c19e36a
--- /dev/null
+++ b/unocss.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig, presetUno, presetAttributify, presetIcons } from 'unocss'; // https://github.com/unocss/unocss
+export default defineConfig({
+  presets: [presetUno(), presetAttributify(), presetIcons()],
+  shortcuts: {
+    'wh-full': 'w-full h-full',
+    'flex-center': 'flex justify-center items-center',
+    'flex-col-center': 'flex-center flex-col',
+  },
+});