diff --git a/beike/Shop/Http/Controllers/Account/ForgottenController.php b/beike/Shop/Http/Controllers/Account/ForgottenController.php
index 611e5c8c..f1e9ec5a 100644
--- a/beike/Shop/Http/Controllers/Account/ForgottenController.php
+++ b/beike/Shop/Http/Controllers/Account/ForgottenController.php
@@ -44,7 +44,7 @@ class ForgottenController
      */
     public function changePassword(ForgottenRequest $request)
     {
-        AccountService::verifyAndChangePassword($request->get('code'), $request->get('account'), $request->get('password'));
+        AccountService::verifyAndChangePassword($request->get('code'), $request->get('email'), $request->get('password'));
 
         return json_success('密码已修改');
     }
diff --git a/beike/Shop/Services/AccountService.php b/beike/Shop/Services/AccountService.php
index d1b8061e..af3548f7 100644
--- a/beike/Shop/Services/AccountService.php
+++ b/beike/Shop/Services/AccountService.php
@@ -85,6 +85,9 @@ class AccountService
 
         if ($type == 'email') {
             $customer = CustomerRepo::findByEmail($account);
+            if (!$customer) {
+                throw new \Exception("账号不存在");
+            }
         } elseif ($type == 'telephone') {
             throw new \Exception("暂不支持手机号码找回密码");
         } else {
diff --git a/public/build/beike/shop/default/css/app.css b/public/build/beike/shop/default/css/app.css
index a796f6ff..4ce0c528 100644
--- a/public/build/beike/shop/default/css/app.css
+++ b/public/build/beike/shop/default/css/app.css
@@ -360,16 +360,16 @@ footer .footer-bottom {
   font-weight: bold;
 }
 
-body.page-login .login-item-header {
+body.page-login .login-item-header, body.page-forgotten .login-item-header {
   background: #f8f9fa;
   border-bottom: none;
   padding: 1.2rem 1.5rem;
 }
-body.page-login .login-item-header h6 {
+body.page-login .login-item-header h6, body.page-forgotten .login-item-header h6 {
   font-weight: bold;
   font-size: 1rem;
 }
-body.page-login .card {
+body.page-login .card, body.page-forgotten .card {
   border: none;
 }
 
diff --git a/public/build/beike/shop/default/css/bootstrap.css b/public/build/beike/shop/default/css/bootstrap.css
index a245a2c1..1bf7fcc2 100644
--- a/public/build/beike/shop/default/css/bootstrap.css
+++ b/public/build/beike/shop/default/css/bootstrap.css
@@ -18043,7 +18043,7 @@ textarea.form-control-lg {
   border-bottom: 0 solid rgba(0, 0, 0, 0.125);
 }
 .card .card-header:first-child {
-  border-radius: 1rem 1rem 0 0;
+  border-radius: 0;
 }
 .card .card-header .card-title {
   margin-bottom: 0;
diff --git a/resources/beike/shop/default/css/bootstrap/bootstrap.scss b/resources/beike/shop/default/css/bootstrap/bootstrap.scss
index 89fcafb0..fe3b755a 100644
--- a/resources/beike/shop/default/css/bootstrap/bootstrap.scss
+++ b/resources/beike/shop/default/css/bootstrap/bootstrap.scss
@@ -92,7 +92,7 @@ $card-border-width: 0;
     border-bottom: 0 solid rgba(0,0,0,.125);
 
     &:first-child {
-      border-radius: 1rem 1rem 0 0;
+      border-radius: 0;
     }
 
     .card-title {
diff --git a/resources/beike/shop/default/css/login.scss b/resources/beike/shop/default/css/login.scss
index 0d52ad93..9c16f225 100644
--- a/resources/beike/shop/default/css/login.scss
+++ b/resources/beike/shop/default/css/login.scss
@@ -1,6 +1,6 @@
 @charset "UTF-8";
 
-body.page-login {
+body.page-login, body.page-forgotten {
   .login-item-header {
     background: #f8f9fa;
     border-bottom: none;
diff --git a/themes/default/account/forgotten.blade.php b/themes/default/account/forgotten.blade.php
index 71f4353a..92847fb8 100644
--- a/themes/default/account/forgotten.blade.php
+++ b/themes/default/account/forgotten.blade.php
@@ -1,42 +1,137 @@
 @extends('layout.master')
 
+@section('body-class', 'page-forgotten')
+
+@push('header')
+  <script src="{{ asset('vendor/vue/2.6.14/vue.js') }}"></script>
+  <script src="{{ asset('vendor/element-ui/2.15.6/js.js') }}"></script>
+  <link rel="stylesheet" href="{{ asset('vendor/element-ui/2.15.6/css.css') }}">
+@endpush
+
+
 @section('content')
-    <div class="container">
-        <h1>找回密码</h1>
-        <form action="{{ route('shop.register.store') }}" method="post">
-            @csrf
+  <div class="container" id="page-forgotten" v-cloak>
+    <nav aria-label="breadcrumb">
+      <ol class="breadcrumb">
+        <li class="breadcrumb-item"><a href="#">Home</a></li>
+        <li class="breadcrumb-item active" aria-current="page">Library</li>
+      </ol>
+    </nav>
+    {{-- <div class="hero-content pb-5 text-center"><h1 class="hero-heading">找回密码</h1></div> --}}
+    <div class="row my-5 justify-content-md-center">
+      <div class="col-lg-5 col-xxl-4">
+        <div class="card">
+          <el-form ref="form" :model="form" :rules="rules">
+            <div class="card-body p-0">
+              <h4 class="fw-bold">请根据提示找回您的密码</h4>
+              <p class="text-muted" v-if="!isCode">请输入邮箱地址获取验证码</p>
+              <p class="text-muted" v-else>请输入新密码</p>
 
-            <div class="form-group">
-                <div class="input-group">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text" id="email">邮箱</span>
-                    </div>
-                    <input type="text" name="register[email]" class="form-control" value="{{ old('register.email') }}" placeholder="邮箱地址">
-                </div>
-                @error('register.email')
-                <x-admin::form.error :message="$message"/>
-                @enderror
+              <el-form-item label="邮箱" prop="email" v-if="!isCode">
+                <el-input v-model="form.email" placeholder="邮箱地址"></el-input>
+              </el-form-item>
+
+              <el-form-item label="验证码" prop="code" class="mb-3" v-if="isCode">
+                <el-input  v-model="form.code" placeholder="密码"></el-input>
+              </el-form-item>
+
+              <el-form-item label="密码" prop="password" class="mb-3" v-if="isCode">
+                <el-input type="password" v-model="form.password" placeholder="密码"></el-input>
+              </el-form-item>
+
+              <el-form-item label="确认密码" prop="password_confirmation" v-if="isCode">
+                <el-input type="password" v-model="form.password_confirmation" placeholder="确认密码"></el-input>
+              </el-form-item>
+
+              <div class="mt-5 mb-3">
+                <button type="button" @click="submitForm('form')" class="btn w-50 btn-dark">@{{ !isCode ? '发送验证码' : '提交' }}</button>
+              </div>
             </div>
-
-            <div class="form-group">
-                <div class="input-group">
-                    <div class="input-group-prepend">
-                        <span class="input-group-text" id="password">密码</span>
-                    </div>
-                    <input type="password" name="register[password]" class="form-control" placeholder="密码">
-                </div>
-                @error('register.password')
-                <x-admin::form.error :message="$message"/>
-                @enderror
-            </div>
-
-            @if (session('error'))
-                <div class="alert alert-success">
-                    {{ session('error') }}
-                </div>
-            @endif
-
-            <button type="submit" class="btn btn-primary btn-block mb-4">登录</button>
-        </form>
+          </el-form>
+        </div>
+      </div>
     </div>
+  </div>
 @endsection
+
+@push('add-scripts')
+  <script>
+    var validatePass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入密码'));
+      } else {
+        if (value !== '') {
+          app.$refs.form.validateField('password_confirmation');
+        }
+        callback();
+      }
+    };
+
+    var validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入确认密码'));
+      } else if (value !== app.form.password) {
+        callback(new Error('两次输入密码不一致!'));
+      } else {
+        callback();
+      }
+    };
+
+    let app = new Vue({
+      el: '#page-forgotten',
+
+      data: {
+        form: {
+          email: '',
+          code: '',
+          password: '',
+          password_confirmation: '',
+        },
+
+        isCode: false,
+
+        rules: {
+          email: [
+            {required: true, message: '请输入邮箱', trigger: 'blur'},
+            {type: 'email', message: '请输入正确邮箱地址', trigger: 'blur'},
+          ],
+          code: [
+            {required: true, message: '请输入验证码', trigger: 'blur'}
+          ],
+          password: [
+            {required: true, validator: validatePass, trigger: 'blur'}
+          ],
+          password_confirmation: [
+            {required: true, validator: validatePass2, trigger: 'blur'}
+          ]
+        },
+      },
+
+      beforeMount () {
+      },
+
+      methods: {
+        submitForm(form) {
+          let _data = this.form, url = '/forgotten/password'
+
+          if (!this.isCode) {
+            url = '/forgotten/send_code'
+          }
+
+          this.$refs[form].validate((valid) => {
+            if (!valid) {
+              // layer.msg('请检查表单是否填写正确', () => {})
+              return;
+            }
+
+            $http.post(url, this.form).then((res) => {
+              this.$message.success(res.message);
+              this.isCode = true
+              this.$refs[form].resetFields();
+            })
+          });
+        }
+      }
+    })
+  </script>
+@endpush
\ No newline at end of file
diff --git a/themes/default/account/login.blade.php b/themes/default/account/login.blade.php
index d068247e..f696e62a 100644
--- a/themes/default/account/login.blade.php
+++ b/themes/default/account/login.blade.php
@@ -36,11 +36,13 @@
                 <el-input v-model="loginForm.email" placeholder="邮箱地址"></el-input>
               </el-form-item>
 
-              <el-form-item label="密码" prop="password">
+              <el-form-item label="密码" prop="password" class="mb-1">
                 <el-input type="password" v-model="loginForm.password" placeholder="密码"></el-input>
               </el-form-item>
 
-              <div class="mt-5 mb-3">
+              <a class="text-muted" href="{{ shop_route('forgotten.index') }}">Forgot Your Password?</a>
+
+              <div class="mt-4 mb-3">
                 <button type="button" @click="checkedBtnLogin('loginForm')" class="btn btn-outline-dark"><i class="bi bi-box-arrow-in-right"></i> 登录</button>
               </div>
             </div>
@@ -87,7 +89,28 @@
 
 @push('add-scripts')
   <script>
-    new Vue({
+    var validatePass = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入密码'));
+      } else {
+        if (value !== '') {
+          app.$refs.registerForm.validateField('password_confirmation');
+        }
+        callback();
+      }
+    };
+
+    var validatePass2 = (rule, value, callback) => {
+      if (value === '') {
+        callback(new Error('请输入确认密码'));
+      } else if (value !== app.registerForm.password) {
+        callback(new Error('两次输入密码不一致!'));
+      } else {
+        callback();
+      }
+    };
+
+    let app = new Vue({
       el: '#page-login',
 
       data: {
@@ -118,10 +141,10 @@
             {type: 'email', message: '请输入正确邮箱地址', trigger: 'blur'},
           ],
           password: [
-            {required: true, message: '请输入密码', trigger: 'blur'}
+            {required: true, validator: validatePass, trigger: 'blur'}
           ],
           password_confirmation: [
-            {required: true, message: '请输入密码', trigger: 'blur'}
+            {required: true, validator: validatePass2, trigger: 'blur'}
           ]
         }
       },