diff --git a/src/pages/login/LoginPage.vue b/src/pages/login/LoginPage.vue
index 21b9f9f..b11e1a9 100644
--- a/src/pages/login/LoginPage.vue
+++ b/src/pages/login/LoginPage.vue
@@ -69,6 +69,7 @@ export default {
   box-shadow: 0 22px 55px rgba(35, 91, 80, 0.14);
   max-width: 420px;
   padding: 48px 44px 38px;
+  transform: translateY(-60px);
   width: 100%;
 }
 
@@ -101,6 +102,7 @@ h1 {
   border-color: #dce8e4;
   border-radius: 4px;
   height: 46px;
+  margin-bottom: 10px;
 }
 
 .login-button {
diff --git a/src/pages/login/RegisterPage.vue b/src/pages/login/RegisterPage.vue
index a3862ed..52aec79 100644
--- a/src/pages/login/RegisterPage.vue
+++ b/src/pages/login/RegisterPage.vue
@@ -1,9 +1,46 @@
 <template>
-  <div class="hello">
-    <el-input placeholder="请输入用户名" v-model="username" clearable> </el-input>
-    <el-input placeholder="请输入密码" v-model="password" show-password></el-input>
-    <el-input placeholder="请确认密码" v-model="password2" show-password></el-input>
-  </div>
+  <main class="register-page">
+    <section class="register-card">
+      <p class="eyebrow">CHAT DEMO</p>
+      <h1>创建账号</h1>
+      <p class="subtitle">注册后开启你的聊天体验</p>
+
+      <el-form class="register-form" @submit.native.prevent="handleRegister">
+        <el-form-item>
+          <el-input
+            v-model="username"
+            placeholder="请输入账号"
+            clearable
+            prefix-icon="el-icon-user"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="password"
+            placeholder="请输入密码"
+            show-password
+            prefix-icon="el-icon-lock"
+          ></el-input>
+        </el-form-item>
+        <el-form-item>
+          <el-input
+            v-model="password2"
+            placeholder="请确认密码"
+            show-password
+            prefix-icon="el-icon-check"
+          ></el-input>
+        </el-form-item>
+        <el-button class="register-button" type="primary" native-type="submit">
+          注册
+        </el-button>
+      </el-form>
+
+      <p class="login-tip">
+        已有账号？
+        <router-link to="/login">返回登录</router-link>
+      </p>
+    </section>
+  </main>
 </template>
 
 <script>
@@ -15,23 +52,97 @@ export default {
       password: '',
       password2: ''
     }
+  },
+  methods: {
+    handleRegister() {
+      if (this.password !== this.password2) {
+        this.$message.error('两次输入的密码不一致')
+        return
+      }
+
+      // 注册接口接入后在这里提交账号和密码。
+    }
   }
 };
 </script>
 
 <style scoped>
-h3 {
-  margin: 40px 0 0;
+.register-page {
+  align-items: center;
+  background: #eef5f3;
+  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.8), rgba(211, 235, 229, 0.75));
+  display: flex;
+  justify-content: center;
+  min-height: 100vh;
 }
-ul {
-  list-style-type: none;
-  padding: 0;
+
+.register-card {
+  background: #ffffff;
+  border: 1px solid rgba(35, 91, 80, 0.08);
+  border-radius: 8px;
+  box-shadow: 0 22px 55px rgba(35, 91, 80, 0.14);
+  max-width: 420px;
+  padding: 48px 44px 38px;
+  transform: translateY(-60px);
+  width: 100%;
 }
-li {
-  display: inline-block;
-  margin: 0 10px;
+
+.eyebrow {
+  color: #3e8b7a;
+  font-size: 12px;
+  font-weight: 700;
+  letter-spacing: 2px;
+  margin-bottom: 18px;
 }
-a {
-  color: #42b983;
+
+h1 {
+  color: #193b37;
+  font-size: 32px;
+  font-weight: 700;
+  line-height: 1.2;
+}
+
+.subtitle {
+  color: #82948f;
+  font-size: 14px;
+  margin: 12px 0 32px;
+}
+
+.register-form :deep(.el-form-item) {
+  margin-bottom: 18px;
+}
+
+.register-form :deep(.el-input__inner) {
+  border-color: #dce8e4;
+  border-radius: 4px;
+  height: 46px;
+  margin-bottom: 10px;
+}
+
+.register-button {
+  border: 0;
+  border-radius: 4px;
+  font-size: 15px;
+  height: 46px;
+  margin-top: 4px;
+  width: 100%;
+}
+
+.login-tip {
+  color: #82948f;
+  font-size: 13px;
+  margin: 26px 0 0;
+  text-align: center;
+}
+
+.login-tip a {
+  color: #2f806f;
+  font-weight: 600;
+}
+
+@media (max-width: 480px) {
+  .register-card {
+    padding: 36px 24px 30px;
+  }
 }
 </style>