diff --git a/src/views/register/Main.vue b/src/views/register/Main.vue
index d72ad8c..e4fec48 100644
--- a/src/views/register/Main.vue
+++ b/src/views/register/Main.vue
@@ -102,15 +102,15 @@
 
               <input
                 type="text"
-                v-model.trim="validate.password.$model"
+                v-model.trim="validate.password.password.$model"
                 class="intro-x login__input form-control py-3 px-4 block mt-4"
-                :class="{ 'border-danger': validate.password.$error }"
+                :class="{ 'border-danger': validate.password.password.$error }"
                 placeholder="Password"
                 @keyup="sayHiWit"
               />
-              <template v-if="validate.password.$error">
+              <template v-if="validate.password.password.$error">
                 <div
-                  v-for="(error, index) in validate.password.$errors"
+                  v-for="(error, index) in validate.password.password.$errors"
                   :key="index"
                   class="text-danger mt-2"
                 >
@@ -120,15 +120,15 @@
 
               <input
                 type="text"
-                v-model.trim="validate.confirmPassword.$model"
+                v-model.trim="validate.password.confirm.$model"
                 class="intro-x login__input form-control py-3 px-4 block mt-4"
-                :class="{ 'border-danger': validate.confirmPassword.$error }"
+                :class="{ 'border-danger': validate.password.confirm.$error }"
                 placeholder="Password Confirmation"
                 @keyup="sayHiWit"
               />
-              <template v-if="validate.confirmPassword.$error">
+              <template v-if="validate.password.confirm.$error">
                 <div
-                  v-for="(error, index) in validate.confirmPassword.$errors"
+                  v-for="(error, index) in validate.password.confirm.$errors"
                   :key="index"
                   class="text-danger mt-2"
                 >
@@ -155,6 +155,20 @@
         <!-- END: Register Form -->
       </div>
     </div>
+    <!-- BEGIN: Failed Notification Content -->
+    <div
+      id="failed-notification-content"
+      class="toastify-content hidden flex"
+    >
+      <XCircleIcon class="text-danger" />
+      <div class="ml-4 mr-4">
+        <div class="font-medium">Registration failed!</div>
+        <div class="text-slate-500 mt-1">
+          Please check the fileld form.
+        </div>
+      </div>
+    </div>
+    <!-- END: Failed Notification Content -->
   </div>
 </template>
 
@@ -165,18 +179,23 @@ import {
   required,
   minLength,
   email,
-  sameAs
+  helpers
 } from "@vuelidate/validators";
 import { useVuelidate } from "@vuelidate/core";
+import Toastify from "toastify-js";
 
 const formData = reactive({
   first_name: "",
   last_name: "",
   email: "",
-  password: "",
-  confirmPassword: ""
+  password: {
+    password: '',
+    confirm: '',
+  },
 });
 
+const mustBeTheSameAsPassword = (value) => value === formData.password.password
+
 const rules = {
   first_name: {
     required,
@@ -191,13 +210,16 @@ const rules = {
     email,
   },
   password: {
-    required,
-    minLength: minLength(8),
+    password: {
+      required,
+      minLength: minLength(8)
+    },
+    confirm: {
+      required,
+      mustBeTheSameAsPassword: helpers.withMessage('Must be the same as password',
+      mustBeTheSameAsPassword)
+    },
   },
-  confirmPassword: {
-    required,
-    sameAsPassword: sameAs(formData.password)
-  }
 };
 
 const validate = useVuelidate(rules, toRefs(formData));
@@ -205,18 +227,18 @@ const validate = useVuelidate(rules, toRefs(formData));
 const save = () => {
   validate.value.$touch();
   if (validate.value.$invalid) {
-    // Toastify({
-    //   node: dom("#failed-notification-content")
-    //     .clone()
-    //     .removeClass("hidden")[0],
-    //   duration: 3000,
-    //   newWindow: true,
-    //   close: true,
-    //   gravity: "top",
-    //   position: "right",
-    //   stopOnFocus: true,
-    // }).showToast();
-    alert('failed')
+    Toastify({
+      node: dom("#failed-notification-content")
+        .clone()
+        .removeClass("hidden")[0],
+      duration: 3000,
+      newWindow: true,
+      close: true,
+      gravity: "top",
+      position: "right",
+      stopOnFocus: true,
+    }).showToast();
+    // alert('failed')
   } else {
     // Toastify({
     //   node: dom("#success-notification-content")
@@ -233,11 +255,6 @@ const save = () => {
   }
 };
 
-const sayHiWit = () => {
-  console.log('password: ' + formData.password)
-  console.log('password-conf: ' + formData.confirmPassword)
-}
-
 onMounted(() => {
   dom("body").removeClass("main").removeClass("error-page").addClass("login");
 });