diff --git a/src/assets/background_arrahn.jpg b/src/assets/background_arrahn.jpg
new file mode 100644
index 0000000..2bc154d
Binary files /dev/null and b/src/assets/background_arrahn.jpg differ
diff --git a/src/components/Login.vue b/src/components/Login.vue
deleted file mode 100644
index d4af078..0000000
--- a/src/components/Login.vue
+++ /dev/null
@@ -1,232 +0,0 @@
-<template>
-  <!-- <div class="row justify-content-md-center">
-    <h1>Login</h1>
-    <div class="col-6" style="border: 1px solid">
-      <form @submit.prevent="submit">
-        <div class="p-20">
-          <div class="mb-6">
-            <label
-              for="username"
-              class="
-                block
-                mb-2
-                text-sm
-                font-medium
-                text-gray-900
-                dark:text-gray-300
-              "
-              >Username</label
-            >
-            <input
-              type="text"
-              v-model="form.username"
-              class="
-                bg-gray-50
-                border border-gray-300
-                text-gray-900 text-sm
-                rounded-lg
-                focus:ring-blue-500 focus:border-blue-500
-                block
-                w-full
-                p-2.5
-                dark:bg-gray-700
-                dark:border-gray-600
-                dark:placeholder-gray-400
-                dark:text-white
-                dark:focus:ring-blue-500
-                dark:focus:border-blue-500
-              "
-              placeholder="name@flowbite.com"
-              required=""
-            />
-          </div>
-          <div class="mb-6">
-            <label
-              for="password"
-              class="
-                block
-                mb-2
-                text-sm
-                font-medium
-                text-gray-900
-                dark:text-gray-300
-              "
-              >Password</label
-            >
-            <input
-              type="password"
-              v-model="form.password"
-              class="
-                bg-gray-50
-                border border-gray-300
-                text-gray-900 text-sm
-                rounded-lg
-                focus:ring-blue-500 focus:border-blue-500
-                block
-                w-full
-                p-2.5
-                dark:bg-gray-700
-                dark:border-gray-600
-                dark:placeholder-gray-400
-                dark:text-white
-                dark:focus:ring-blue-500
-                dark:focus:border-blue-500
-              "
-              required=""
-            />
-          </div>
-          <div class="flex items-start mb-6">
-            <div class="flex items-center h-5">
-              <input
-                id="remember"
-                aria-describedby="remember"
-                type="checkbox"
-                class="
-                  w-4
-                  h-4
-                  bg-gray-50
-                  rounded
-                  border border-gray-300
-                  focus:ring-3 focus:ring-blue-300
-                  dark:bg-gray-700
-                  dark:border-gray-600
-                  dark:focus:ring-blue-600
-                  dark:ring-offset-gray-800
-                "
-              />
-            </div>
-            <div class="ml-3 text-sm">
-              <label
-                for="remember"
-                class="font-medium text-gray-900 dark:text-gray-300"
-                >Remember me</label
-              >
-            </div>
-          </div>
-          <button
-            @click="doLogin"
-            type="submit"
-            class="
-              text-white
-              bg-blue-700
-              hover:bg-blue-800
-              focus:ring-4 focus:outline-none focus:ring-blue-300
-              font-medium
-              rounded-lg
-              text-sm
-              w-full
-              sm:w-auto
-              px-5
-              py-2.5
-              text-center
-              dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-            "
-          >
-            Submit
-          </button>
-        </div>
-      </form>
-      <router-link to="/register">Register</router-link><br />
-    </div>
-  </div> -->
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-5 text-center m-5 p-5 border rounded">
-        <form @submit.prevent="submit">
-          <h1 class="mb-5 text-primary">Sistem Lelong</h1>
-          <h4>Log Masuk</h4>
-
-          <div class="form-floating">
-            <input
-              type="text"
-              class="form-control"
-              v-model="form.username"
-              placeholder="username sini"
-              required
-            />
-            <label for="floatingInput">Username</label>
-          </div>
-          <div class="form-floating">
-            <input
-              type="password"
-              class="form-control"
-              v-model="form.password"
-              placeholder="Password"
-              required
-            />
-            <label for="floatingPassword">Password</label>
-          </div>
-          <button
-            @click="doLogin"
-            class="w-100 mt-4 mb-5 btn btn-primary"
-            type="submit"
-          >
-            Masuk
-          </button>
-        </form>
-        <router-link to="/register">Daftar Akaun</router-link><br />
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { useRouter } from "vue-router";
-import axios from "axios";
-export default {
-  name: "Login",
-
-  // ========api composition style===============
-  // setup() {
-
-  //     const router = useRouter();
-
-  //     const submit = async e => {
-  //         const form = new FormData(e.target);
-
-  //         const inputs = Object.fromEntries(form.entries());
-
-  //         const {data} = await axios.post('user/login', inputs, {
-  //             withCredentials: false
-  //         });
-
-  //         axios.defaults.headers.common['Authorization'] = 'Bearer ${data.token}';
-
-  //         console.log(data);
-  //         await router.push('/');
-  //     }
-
-  //     return {
-  //         submit
-  //     }
-  // }
-
-  //=========api option style===================
-  data() {
-    return {
-      form: {
-        username: "",
-        password: "",
-      },
-    };
-  },
-  methods: {
-    doLogin() {
-      axios.post("/user/login", this.form).then((response) => {
-        localStorage.setItem("token", response.data.token);
-        localStorage.setItem("id", response.data.user.id);
-        localStorage.setItem("nokp", response.data.user.nokp);
-        localStorage.setItem("name", response.data.user.name);
-        localStorage.setItem("email", response.data.user.email);
-        localStorage.setItem("notelbimbit", response.data.user.notelbimbit);
-        this.$router.push({name: 'home'});
-        console.log(response);
-      })
-      .catch((response) => {
-          alert(response.message);
-          console.log(response);
-        });
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/components/Register.vue b/src/components/Register.vue
deleted file mode 100644
index 670707f..0000000
--- a/src/components/Register.vue
+++ /dev/null
@@ -1,397 +0,0 @@
-<template>
-  <!-- <div class="row justify-content-md-center">
-    <h1>Register</h1>
-    <div class="col-6" style="border: 1px solid">
-      <form @submit.prevent="submit">
-        <div class="p-20">
-          <div class="mb-6">
-            <label
-              for="name"
-              class="
-                block
-                mb-2
-                text-sm
-                font-medium
-                text-gray-900
-                dark:text-gray-300
-              "
-              >Name</label
-            >
-            <input
-              type="text"
-              v-model="form.name"
-              class="
-                bg-gray-50
-                border border-gray-300
-                text-gray-900 text-sm
-                rounded-lg
-                focus:ring-blue-500 focus:border-blue-500
-                block
-                w-full
-                p-2.5
-                dark:bg-gray-700
-                dark:border-gray-600
-                dark:placeholder-gray-400
-                dark:text-white
-                dark:focus:ring-blue-500
-                dark:focus:border-blue-500
-              "
-              placeholder="Mustaqim Mustafar"
-              required=""
-            />
-          </div>
-          <div class="mb-6">
-            <label
-              for="username"
-              class="
-                block
-                mb-2
-                text-sm
-                font-medium
-                text-gray-900
-                dark:text-gray-300
-              "
-              >Username</label
-            >
-            <input
-              type="text"
-              v-model="form.username"
-              class="
-                bg-gray-50
-                border border-gray-300
-                text-gray-900 text-sm
-                rounded-lg
-                focus:ring-blue-500 focus:border-blue-500
-                block
-                w-full
-                p-2.5
-                dark:bg-gray-700
-                dark:border-gray-600
-                dark:placeholder-gray-400
-                dark:text-white
-                dark:focus:ring-blue-500
-                dark:focus:border-blue-500
-              "
-              required=""
-            />
-          </div>
-          <div class="mb-6">
-            <label
-              for="nokp"
-              class="
-                block
-                mb-2
-                text-sm
-                font-medium
-                text-gray-900
-                dark:text-gray-300
-              "
-              >No KP</label
-            >
-            <input
-              type="text"
-              v-model="form.nokp"
-              class="
-                bg-gray-50
-                border border-gray-300
-                text-gray-900 text-sm
-                rounded-lg
-                focus:ring-blue-500 focus:border-blue-500
-                block
-                w-full
-                p-2.5
-                dark:bg-gray-700
-                dark:border-gray-600
-                dark:placeholder-gray-400
-                dark:text-white
-                dark:focus:ring-blue-500
-                dark:focus:border-blue-500
-              "
-              required=""
-            />
-          </div>
-          <div class="mb-6">
-            <label
-              for="password"
-              class="
-                block
-                mb-2
-                text-sm
-                font-medium
-                text-gray-900
-                dark:text-gray-300
-              "
-              >Password</label
-            >
-            <input
-              type="text"
-              v-model="form.password"
-              class="
-                bg-gray-50
-                border border-gray-300
-                text-gray-900 text-sm
-                rounded-lg
-                focus:ring-blue-500 focus:border-blue-500
-                block
-                w-full
-                p-2.5
-                dark:bg-gray-700
-                dark:border-gray-600
-                dark:placeholder-gray-400
-                dark:text-white
-                dark:focus:ring-blue-500
-                dark:focus:border-blue-500
-              "
-              required=""
-            />
-          </div>
-          <div class="mb-6">
-            <label
-              for="email"
-              class="
-                block
-                mb-2
-                text-sm
-                font-medium
-                text-gray-900
-                dark:text-gray-300
-              "
-              >Email</label
-            >
-            <input
-              type="text"
-              v-model="form.email"
-              class="
-                bg-gray-50
-                border border-gray-300
-                text-gray-900 text-sm
-                rounded-lg
-                focus:ring-blue-500 focus:border-blue-500
-                block
-                w-full
-                p-2.5
-                dark:bg-gray-700
-                dark:border-gray-600
-                dark:placeholder-gray-400
-                dark:text-white
-                dark:focus:ring-blue-500
-                dark:focus:border-blue-500
-              "
-              required=""
-            />
-          </div>
-          <div class="mb-6">
-            <label
-              for="notelbimbit"
-              class="
-                block
-                mb-2
-                text-sm
-                font-medium
-                text-gray-900
-                dark:text-gray-300
-              "
-              >Nombor Telefon</label
-            >
-            <input
-              type="text"
-              v-model="form.notelbimbit"
-              class="
-                bg-gray-50
-                border border-gray-300
-                text-gray-900 text-sm
-                rounded-lg
-                focus:ring-blue-500 focus:border-blue-500
-                block
-                w-full
-                p-2.5
-                dark:bg-gray-700
-                dark:border-gray-600
-                dark:placeholder-gray-400
-                dark:text-white
-                dark:focus:ring-blue-500
-                dark:focus:border-blue-500
-              "
-              required=""
-            />
-          </div>
-
-          <div class="flex items-start mb-6">
-            <div class="flex items-center h-5">
-              <input
-                id="register_agree"
-                aria-describedby="register_agree"
-                type="checkbox"
-                value="1"
-                v-model="form.register_agree"
-                class="
-                  w-4
-                  h-4
-                  bg-gray-50
-                  rounded
-                  border border-gray-300
-                  focus:ring-3 focus:ring-blue-300
-                  dark:bg-gray-700
-                  dark:border-gray-600
-                  dark:focus:ring-blue-600
-                  dark:ring-offset-gray-800
-                "
-                required=""
-              />
-            </div>
-            <div class="ml-3 text-sm">
-              <label
-                for="register_agree"
-                required=""
-                class="font-medium text-gray-900 dark:text-gray-300"
-                >Setuju dgn terma & syarat</label
-              >
-            </div>
-          </div>
-          <button
-            @click="doRegister"
-            type="submit"
-            class="
-              text-white
-              bg-blue-700
-              hover:bg-blue-800
-              focus:ring-4 focus:outline-none focus:ring-blue-300
-              font-medium
-              rounded-lg
-              text-sm
-              w-full
-              sm:w-auto
-              px-5
-              py-2.5
-              text-center
-              dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-            "
-          >
-            Submit
-          </button>
-        </div>
-      </form>
-      <router-link to="/login">Login</router-link><br />
-    </div>
-  </div> -->
-  <div class="container">
-    <div class="row justify-content-center">
-      <div class="col-5 text-center m-5 p-5 border rounded">
-        <form @submit.prevent="submit">
-          <h1 class="mb-5 text-primary">Sistem Lelong</h1>
-          <h4>Daftar Akaun</h4>
-
-          <div class="form-floating">
-            <input type="text" class="form-control" v-model="form.name" />
-            <label>Nama</label>
-          </div>
-          <div class="form-floating">
-            <input type="text" class="form-control" v-model="form.username" />
-            <label>Username</label>
-          </div>
-          <div class="form-floating">
-            <input type="text" class="form-control" v-model="form.nokp" />
-            <label>No KP</label>
-          </div>
-          <div class="form-floating">
-            <input
-              type="password"
-              class="form-control"
-              v-model="form.password"
-            />
-            <label>Password</label>
-          </div>
-          <div class="form-floating">
-            <input
-              type="password"
-              class="form-control"
-              v-model="form.password_confirmation"
-            />
-            <label>Password Confirmation</label>
-          </div>
-          <div class="form-floating">
-            <input type="email" class="form-control" v-model="form.email" />
-            <label>E-mel</label>
-          </div>
-          <div class="form-floating">
-            <input
-              type="text"
-              class="form-control"
-              v-model="form.notelbimbit"
-            />
-            <label>No. Telefon</label>
-          </div>
-          <label class="mt-3">Kad Pengenalan Hadapan</label>
-          <input type="file" class="form-control" />
-          <label>Kad Pengenalan Belakang</label>
-          <input type="file" class="form-control" />
-          <div class="checkbox mt-3 mb-3">
-            <label>
-              <input type="checkbox" value="1" id="register_agree" /> Setuju
-              dengan terma & syarat
-            </label>
-          </div>
-          <button
-            @click="doRegister"
-            class="w-100 mt-4 mb-5 btn btn-primary"
-            type="submit"
-          >
-            Enter
-          </button>
-        </form>
-        <router-link to="/login">Log Masuk</router-link>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import axios from "axios";
-export default {
-  name: "Register",
-  data() {
-    return {
-      form: {
-        name: "",
-        username: "",
-        nokp: "",
-        password: "",
-        email: "",
-        notelbimbit: "",
-        register_agree: "1",
-        password_confirmation: "",
-        images: {
-          file1: {
-            file_type: "png",
-            filename: "imagein64string",
-          },
-          file2: {
-            file_type: "jpg",
-            filename: "imagein64string",
-          },
-        },
-      },
-    };
-  },
-  methods: {
-    doRegister() {
-      axios
-        .post("/register", this.form)
-        .then((response) => {
-          if (response.data.success != "error") {
-            localStorage.setItem("token", response.data.token);
-            this.$router.push({ name: "login" });
-            console.log(response);
-          } else {
-            console.log(response.data);
-            alert(response.data.success);
-          }
-        })
-        .catch((error) => {
-          alert(error);
-          console.log(error);
-        });
-    },
-  },
-};
-</script>
\ No newline at end of file
diff --git a/src/components/authentication/TermsAndConditions.vue b/src/components/authentication/TermsAndConditions.vue
index 6578443..9c32622 100644
--- a/src/components/authentication/TermsAndConditions.vue
+++ b/src/components/authentication/TermsAndConditions.vue
@@ -12,7 +12,9 @@
     <div class="modal-dialog modal-xl modal-dialog-centered">
       <div class="modal-content">
         <div class="modal-header">
-          <h5 class="modal-title" id="exampleModalLabel">Terma & Syarat Sistem Lelong</h5>
+          <h5 class="modal-title" id="exampleModalLabel">
+            Terma & Syarat Sistem Lelong
+          </h5>
           <button
             type="button"
             class="btn-close"
@@ -22,32 +24,39 @@
         </div>
         <div class="modal-body">
           <div class="row">
-            <div class="col paragraph-align">
-              <ol>
+            <div class="col-12 lg:col-6 paragraph-align">
+              <ol class="pr-3">
                 <li>Daftar secara atas talian.</li>
                 <li>Berumur 18 tahun ke atas.</li>
                 <li>
                   Marhun lelongan boleh dilihat dalam sistem untuk dibida.
                 </li>
                 <li>
-                  Harga yang disenaraikan dalam web kami adalah <strong>muktamad</strong> dan
-                  tidak boleh dirunding.
+                  Harga yang disenaraikan dalam web kami adalah
+                  <strong>muktamad</strong> dan tidak boleh dirunding.
                 </li>
                 <li>
-                  Harga <strong>minimum bidaan</strong> adalah <strong>RM1.00</strong> dari
-                  Harga Asas.
+                  Harga <strong>minimum bidaan</strong> adalah
+                  <strong>RM1.00</strong> dari Harga Asas.
                 </li>
                 <li>
-                  <strong>Nilai bidaan hendaklah genap</strong> dan penggunaan <strong>nilaian sen adalah
-                  tidak dibenarkan.</strong>
+                  <strong>Nilai bidaan hendaklah genap</strong> dan penggunaan
+                  <strong>nilaian sen adalah tidak dibenarkan.</strong>
+                </li>
+                <li>
+                  Waktu <strong>tamat lelongan</strong> adalah
+                  <strong>2 jam</strong> selepas waktu dibuka.
                 </li>
-                <li>Waktu <strong>tamat lelongan</strong> adalah <strong>2 jam</strong> selepas waktu dibuka.</li>
                 <li>
                   Sebelum meningggalkan premis, sila semak dan pastikan marhun
-                  yang <strong>diterima adalah betul.</strong> Sekiranya terdapat kekurangan dan
-                  masalah <strong>setelah marhun dibawa keluar</strong> dari premis, pihak
-                  Permodalan Kelantan Berhad <strong>tidak akan bertanggungjawab dan
-                  marhun tidak boleh dikembalikan</strong>.
+                  yang <strong>diterima adalah betul.</strong> Sekiranya
+                  terdapat kekurangan dan masalah
+                  <strong>setelah marhun dibawa keluar</strong> dari premis,
+                  pihak Permodalan Kelantan Berhad
+                  <strong
+                    >tidak akan bertanggungjawab dan marhun tidak boleh
+                    dikembalikan</strong
+                  >.
                 </li>
                 <li>
                   Setiap bidaan atas talian yang telah dihantar tidak boleh
@@ -58,14 +67,17 @@
                 </li>
               </ol>
             </div>
-            <div class="col paragraph-align">
-              <ol start="10">
+            <div class="col-12 lg:col-6 paragraph-align">
+              <ol class="pr-3" start="10">
                 <li style="text-transform: uppercase">
-                  <strong>Kaedah pembayaran melalui perbankan atas talian (Online
-                  Banking).</strong>
+                  <strong
+                    >Kaedah pembayaran melalui perbankan atas talian (Online
+                    Banking).</strong
+                  >
                 </li>
                 <li>
-                  Pembayaran bidaan hendaklah diselesaikan <strong>sebelum jam 4.00</strong>
+                  Pembayaran bidaan hendaklah diselesaikan
+                  <strong>sebelum jam 4.00</strong>
                   petang pada hari lelongan.
                 </li>
                 <li>
@@ -76,7 +88,8 @@
                 </li>
                 <li>
                   Pembida yang menang di dalam bidaan tetapi gagal melakukan
-                  pembayaran pada hari lelongan akan <strong>disenarai hitamkan.</strong>
+                  pembayaran pada hari lelongan akan
+                  <strong>disenarai hitamkan.</strong>
                 </li>
                 <li>
                   Semua terma dan syarat di atas adalah tertakluk kepada pindaan
@@ -88,13 +101,7 @@
           </div>
         </div>
         <div class="modal-footer">
-          <button
-            type="button"
-            class="btn btn-secondary"
-            data-bs-dismiss="modal"
-          >
-            Kembali
-          </button>
+          <Button data-bs-dismiss="modal" class="p-button-sm" label="Kembali"></Button>
         </div>
       </div>
     </div>
diff --git a/src/components/authentication/TheLogin.vue b/src/components/authentication/TheLogin.vue
index 142b010..6f75c78 100644
--- a/src/components/authentication/TheLogin.vue
+++ b/src/components/authentication/TheLogin.vue
@@ -1,256 +1,193 @@
 <template>
-  <!-- <div class="row justify-content-md-center">
-    <h1>Login</h1>
-    <div class="col-6" style="border: 1px solid">
-      <form @submit.prevent="submit">
-        <div class="p-20">
-          <div class="mb-6">
-            <label
-              for="username"
-              class="
-                block
-                mb-2
-                text-sm
-                font-medium
-                text-gray-900
-                dark:text-gray-300
-              "
-              >Username</label
-            >
-            <input
-              type="text"
-              v-model="form.username"
-              class="
-                bg-gray-50
-                border border-gray-300
-                text-gray-900 text-sm
-                rounded-lg
-                focus:ring-blue-500 focus:border-blue-500
-                block
-                w-full
-                p-2.5
-                dark:bg-gray-700
-                dark:border-gray-600
-                dark:placeholder-gray-400
-                dark:text-white
-                dark:focus:ring-blue-500
-                dark:focus:border-blue-500
-              "
-              placeholder="name@flowbite.com"
-              required=""
-            />
+  <Toast :breakpoints="{ '767px': { width: '100%', right: '0', left: '0' } }" />
+  <div
+    class="
+      flex
+      main-container
+      min-h-screen
+      align-items-center
+      justify-content-center
+    "
+  >
+    <div
+      class="surface-card p-4 shadow-2 border-round w-11 md:w-10 lg:w-8 xl:w-7"
+    >
+      <div class="text-center mb-5">
+        <div class="text-900 text-3xl font-semibold mb-3">
+          eLelong
+          <img class="logo-img" src="img/logo_arrahn.png" alt="arrahn-logo" />
+        </div>
+        <span class="text-600 font-medium line-height-3"
+          >Belum punyai akaun?</span
+        >
+        <router-link
+          v-bind:to="{ name: 'register' }"
+          class="font-medium no-underline ml-2 text-blue-500 cursor-pointer"
+          >Daftar sekarang!</router-link
+        >
+      </div>
+      <div class="px-0 text-center md:px-8">
+        <div class="field grid">
+          <label for="firstname3" class="justify-content-end" style="width: 170px"
+            >Username</label
+          >
+          <div class="col">
+            <span class="p-input-icon-right">
+              <i class="pi pi-user" />
+              <InputText
+                class="mb-2"
+                v-model="form.username"
+                type="text"
+                required
+              ></InputText>
+            </span>
           </div>
-          <div class="mb-6">
-            <label
-              for="password"
-              class="
-                block
-                mb-2
-                text-sm
-                font-medium
-                text-gray-900
-                dark:text-gray-300
-              "
-              >Password</label
-            >
-            <input
-              type="password"
-              v-model="form.password"
-              class="
-                bg-gray-50
-                border border-gray-300
-                text-gray-900 text-sm
-                rounded-lg
-                focus:ring-blue-500 focus:border-blue-500
-                block
-                w-full
-                p-2.5
-                dark:bg-gray-700
-                dark:border-gray-600
-                dark:placeholder-gray-400
-                dark:text-white
-                dark:focus:ring-blue-500
-                dark:focus:border-blue-500
-              "
-              required=""
-            />
-          </div>
-          <div class="flex items-start mb-6">
-            <div class="flex items-center h-5">
-              <input
-                id="remember"
-                aria-describedby="remember"
-                type="checkbox"
-                class="
-                  w-4
-                  h-4
-                  bg-gray-50
-                  rounded
-                  border border-gray-300
-                  focus:ring-3 focus:ring-blue-300
-                  dark:bg-gray-700
-                  dark:border-gray-600
-                  dark:focus:ring-blue-600
-                  dark:ring-offset-gray-800
-                "
+          <InlineMessage class="flex-auto" v-if="v$.form.username.$error"
+            >Username diperlukan</InlineMessage
+          >
+        </div>
+        <div class="field grid">
+          <label for="firstname3" class="justify-content-end" style="width: 170px"
+            >Kata Laluan</label
+          >
+          <div class="col">
+            <span class="p-input-icon-left">
+              <i class="pi pi-user" />
+              <Password
+                class="mb-2"
+                v-model="form.password"
+                toggleMask
+                :feedback="false"
               />
-            </div>
-            <div class="ml-3 text-sm">
-              <label
-                for="remember"
-                class="font-medium text-gray-900 dark:text-gray-300"
-                >Remember me</label
-              >
-            </div>
+            </span>
           </div>
-          <button
-            @click="doLogin"
-            type="submit"
-            class="
-              text-white
-              bg-blue-700
-              hover:bg-blue-800
-              focus:ring-4 focus:outline-none focus:ring-blue-300
-              font-medium
-              rounded-lg
-              text-sm
-              w-full
-              sm:w-auto
-              px-5
-              py-2.5
-              text-center
-              dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800
-            "
+          <InlineMessage class="flex-auto" v-if="v$.form.password.$error"
+            >Kata laluan diperlukan</InlineMessage
           >
-            Submit
-          </button>
         </div>
-      </form>
-      <router-link to="/register">Register</router-link><br />
-    </div>
-  </div> -->
-  <div class="container-fluid main-container">
-    <div class="row row-container justify-content-center">
-      <div class="col text-center left-container"></div>
-      <div class="col-5 mb-0 pb-0 m-5 p-5">
-        <form @submit.prevent="submit">
-          <h1 class="mb-5 text-primary">Sistem Lelong</h1>
-          <h4>Log Masuk</h4>
-
-          <div class="form-floating">
-            <input
-              type="text"
-              class="form-control"
-              v-model="form.username"
-              placeholder="username sini"
-              required
-            />
-            <label for="floatingInput">Username</label>
-          </div>
-          <div class="form-floating">
-            <input
-              type="password"
-              class="form-control"
-              v-model="form.password"
-              placeholder="Password"
-              required
-            />
-            <label for="floatingPassword">Password</label>
-          </div>
-          <button
-            @click="doLogin"
-            class="w-100 mt-4 btn btn-primary"
-            type="submit"
-          >
-            Masuk
-          </button>
-        </form>
-        <div class="row mt-2 mb-5">
-          <router-link to="/register">Daftar Akaun</router-link>
+        <div class="">
+        <Button
+          @click="doLogin()"
+          class="p-button-sm"
+          label="Log Masuk"
+          icon="pi pi-sign-in"
+          :loading="isLoading"
+          iconPos="right"
+        ></Button>
+        </div>
+        <div class="flex justify-content-center mt-4">
+          <terms-and-conditions></terms-and-conditions>
         </div>
-        <terms-and-conditions></terms-and-conditions>
       </div>
     </div>
   </div>
 </template>
 
 <script>
-import { useRouter } from "vue-router";
 import axios from "axios";
+import useVuelidate from "@vuelidate/core";
+import { required } from "@vuelidate/validators";
+
 export default {
   name: "Login",
-
-  // ========api composition style===============
-  // setup() {
-
-  //     const router = useRouter();
-
-  //     const submit = async e => {
-  //         const form = new FormData(e.target);
-
-  //         const inputs = Object.fromEntries(form.entries());
-
-  //         const {data} = await axios.post('user/login', inputs, {
-  //             withCredentials: false
-  //         });
-
-  //         axios.defaults.headers.common['Authorization'] = 'Bearer ${data.token}';
-
-  //         console.log(data);
-  //         await router.push('/');
-  //     }
-
-  //     return {
-  //         submit
-  //     }
-  // }
-
-  //=========api option style===================
   data() {
     return {
+      v$: useVuelidate(),
       form: {
         username: "",
         password: "",
       },
+      isLoading: false,
     };
   },
   methods: {
     doLogin() {
-      axios
-        .post("/user/login", this.form)
-        .then((response) => {
-          localStorage.setItem("token", response.data.token);
-          localStorage.setItem("id", response.data.user.id);
-          localStorage.setItem("nokp", response.data.user.nokp);
-          localStorage.setItem("name", response.data.user.name);
-          localStorage.setItem("email", response.data.user.email);
-          localStorage.setItem("notelbimbit", response.data.user.notelbimbit);
-          localStorage.setItem("username", response.data.user.username);
-          this.$router.push({ name: "home" });
-          console.log(response);
-        })
-        .catch((response) => {
-          alert(response.message);
-          console.log(response);
-        });
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        this.isLoading = true;
+        axios
+          .post("/user/login", this.form)
+          .then((response) => {
+            if (response.data.statusAkaun == 1) {
+              localStorage.setItem("token", response.data.token);
+              localStorage.setItem("id", response.data.user.id);
+              localStorage.setItem("nokp", response.data.user.nokp);
+              localStorage.setItem("name", response.data.user.name);
+              localStorage.setItem("email", response.data.user.email);
+              localStorage.setItem(
+                "notelbimbit",
+                response.data.user.notelbimbit
+              );
+              localStorage.setItem("username", response.data.user.username);
+              this.$router.push({ name: "home" });
+            } else if (response.data.statusAkaun == 0) {
+              this.$toast.add({
+                severity: "info",
+                summary: "Tiada akaun dalam database. Sila daftar sekarang.",
+              });
+              console.log(response, "status 0");
+            } else if (response.data.statusAkaun == 2) {
+              this.$toast.add({
+                severity: "error",
+                summary:
+                  "Akaun anda telah dibanned. Sila hubungi pihak pengurusan untuk maklumat lebih lanjut.",
+              });
+              console.log(response, "status 2");
+            } else if (response.data.statusAkaun == 3) {
+              this.$toast.add({
+                severity: "error",
+                summary:
+                  "Account rejected. Please contact administrator for further information.",
+              });
+              console.log(response, "status 3");
+            } else if (response.data.statusAkaun == 4) {
+              this.$toast.add({
+                severity: "info",
+                summary: "Registration in progress,status wait for approval",
+              });
+              console.log(response, "status 4");
+            } else if (response.data.statusAkaun == 5) {
+              this.$toast.add({
+                severity: "error",
+                summary: "Kata laluan salah. Sila semak semula.",
+              });
+              console.log(response);
+            }
+            this.isLoading = false;
+          })
+          .catch((response) => {
+            // alert(response.message);
+            console.log(response);
+            this.isLoading = false;
+          });
+      }
     },
   },
+  validations() {
+    return {
+      form: {
+        username: { required },
+        password: { required },
+      },
+    };
+  },
 };
 </script>
 
 <style scoped>
 .main-container {
-  /* display: flex; */
-  /* justify-content: center;
-  align-items: center;
-  width: 100%; */
+  /* background: linear-gradient(
+    135deg,
+    rgba(139, 198, 236, 0.3) 0%,
+    #9599e2 100%
+  ),
+  url("/src/assets/background_arrahn.jpg"); */
+  background-position: center;
+  background-size: cover;
 }
 
-.left-container {
-  background-color: #1d3461;
+.logo-img {
+  width: 84px;
+  height: 44px;
 }
-.row-container {
-  /* width: 100%; */
-  height: 100vh;
-}
-</style>
\ No newline at end of file
+</style>
diff --git a/src/main.js b/src/main.js
index 14fe664..cf767fc 100644
--- a/src/main.js
+++ b/src/main.js
@@ -28,7 +28,8 @@ import Sidebar from 'primevue/sidebar';
 import Message from 'primevue/message';
 import InlineMessage from 'primevue/inlinemessage';
 import Skeleton from 'primevue/skeleton';
-
+import Password from 'primevue/password';
+import InputText from 'primevue/inputtext';
 
 import TheTemplate from './components/layouts/TheTemplate.vue'
 import BaseCard from './components/base/BaseCard.vue'
@@ -51,6 +52,8 @@ app.component('Sidebar', Sidebar);
 app.component('Message', Message);
 app.component('InlineMessage', InlineMessage);
 app.component('Skeleton', Skeleton);
+app.component('Password', Password);
+app.component('InputText', InputText);
 
 app.use(router).use(store).use(PrimeVue).use(VueSweetalert2).use(ToastService).mount('#app');
 // app.use(router).use(store).use(PrimeVue).use(ToastService).mount('#app');
diff --git a/src/router/index.js b/src/router/index.js
index 3541b1e..b112294 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -137,7 +137,6 @@ import {
   createWebHistory,
   createMemoryHistory,
 } from "vue-router";
-import Login from "../components/Login.vue";
 // import Register from "../components/Register.vue";
 // import IndexPaymentHistory from '../components/result/IndexPaymentHistory.vue'
 // import Modals from './../components/Modal.vue'