diff --git a/src/components/authentication/TheForgotPassword.vue b/src/components/authentication/TheForgotPassword.vue
new file mode 100644
index 0000000..b30a461
--- /dev/null
+++ b/src/components/authentication/TheForgotPassword.vue
@@ -0,0 +1,115 @@
+<template>
+    <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 fadein p-4 shadow-2 border-round w-11 md:w-10 lg:w-8 xl:w-7 content-bg">
+            <div class="text-center mb-5">
+                <div class="text-900 text-3xl font-semibold mb-3">
+                    ArrahnBid
+                    <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>
+            <form @submit.prevent="submit">
+                <div class="px-0 text-center md:px-8">
+                    <div class="field grid">
+                        <label for="firstname3" class="justify-content-end" style="width: 170px">Emel</label>
+                        <div class="col">
+                            <span class="p-input-icon-right">
+                                <i class="pi pi-user"></i>
+                                <InputText class="mb-2" type="text" v-model="email" required></InputText>
+                            </span>
+                        </div>
+                    </div>
+                    <div class="">
+                        <Button @click="doForgotPassword()" type="submit" class="p-button-sm" label="Lupa Katalaluan"
+                            icon="pi pi-sign-in" :loading="isLoading" iconPos="right"></Button>
+                    </div>
+                </div>
+            </form>
+            <div class="mt-3 text-center">
+                <router-link v-bind:to="{ name: 'login' }">Kembali ke Log Masuk</router-link>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import axios from "axios";
+
+export default {
+    name: "Login",
+    data() {
+        return {
+            isLoading: false,
+            email: "",
+        };
+    },
+    methods: {
+        doForgotPassword() {
+            this.isLoading = true;
+            axios
+                .post("/forgotPassword", { email: this.email },)
+                .then((response) => {
+                    console.log(response);
+                    if (response.data.success == true) {
+                        this.$swal.fire({
+                            icon: "success",
+                            title: "Pautan Lupa Katalaluan Telah Dihantar!",
+                            text: "Sila semak emel anda untuk tindakan lebih lanjut",
+                            confirmButtonColor: "#344871",
+                            confirmButtonText: "OK",
+                            allowOutsideClick: false,
+                            allowEscapeKey: false,
+                        });
+                        this.email = "";
+                        this.isLoading = false;
+                    } else if (response.data.success == false) {
+                        if (response.data.status == 0) {
+                            this.$toast.add({
+                                severity: "error",
+                                summary: "Emel tidak dijumpai",
+                                detail: "Sila semak emel anda",
+                                life: 10000,
+                            });
+                            this.isLoading = false;
+                        } else if (response.data.status == 500) {
+                            this.$swal.fire({
+                                icon: "error",
+                                title: "Failed!",
+                                text: "There is some issue with email provider, please contact admin.",
+                                confirmButtonColor: "#344871",
+                                confirmButtonText: "OK",
+                                allowOutsideClick: false,
+                                allowEscapeKey: false,
+                            });
+                        }
+                    }
+                })
+                .catch((response) => {
+                    alert(response);
+                    this.isLoading = false;
+                });
+        }
+    }
+}
+
+</script>
+
+<style scoped>
+.main-container {
+    background: url("/src/assets/bg3.JPG");
+    background-position: center;
+    background-size: cover;
+}
+
+.content-bg {
+    background: #fff9f9eb !important;
+}
+
+.logo-img {
+    width: 84px;
+    height: 44px;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/authentication/TheLogin.vue b/src/components/authentication/TheLogin.vue
index 07cc6a0..29dd39e 100644
--- a/src/components/authentication/TheLogin.vue
+++ b/src/components/authentication/TheLogin.vue
@@ -94,6 +94,12 @@
               iconPos="right"
             ></Button>
           </div>
+          <div class="mt-3">
+              <router-link
+                v-bind:to="{ name: 'forgot-password' }"
+                >Lupa Katalaluan
+              </router-link>
+          </div>
           <div class="flex alin justify-content-center mt-4">
             <div class="btn btn-warning btn-sm mr-4">
               <terms-and-conditions></terms-and-conditions>
diff --git a/src/components/home/CurrentKaratDetail.vue b/src/components/home/CurrentKaratDetail.vue
index b6acfbc..950412c 100644
--- a/src/components/home/CurrentKaratDetail.vue
+++ b/src/components/home/CurrentKaratDetail.vue
@@ -48,6 +48,7 @@
 
 <script>
 import axios from "axios";
+import { useAuthenticationUserStore } from "@/store/modules/authentication";
 
 export default {
   data() {
@@ -67,7 +68,7 @@ export default {
       await axios
         .get("/karat", {
           headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
+            Authorization: "Bearer " + useAuthenticationUserStore().getToken,
           },
         })
         .then((response) => {
diff --git a/src/components/home/LelongNextDetail.vue b/src/components/home/LelongNextDetail.vue
index 0e4ca06..24c59a6 100644
--- a/src/components/home/LelongNextDetail.vue
+++ b/src/components/home/LelongNextDetail.vue
@@ -43,6 +43,7 @@
 
 <script>
 import axios from "axios";
+import { useAuthenticationUserStore } from "@/store/modules/authentication";
 
 export default {
   data() {
@@ -61,7 +62,7 @@ export default {
       axios
         .get("/listcawlelongnext", {
           headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
+            Authorization: "Bearer " + useAuthenticationUserStore().getToken,
           },
         })
         .then((response) => {
diff --git a/src/components/home/LelongTodayDetail.vue b/src/components/home/LelongTodayDetail.vue
index c0a48a7..45dfb03 100644
--- a/src/components/home/LelongTodayDetail.vue
+++ b/src/components/home/LelongTodayDetail.vue
@@ -48,7 +48,7 @@
 
 <script>
 import axios from "axios";
-import { useAuthenticationUserStore } from "@/store/modules/authentication"
+import { useAuthenticationUserStore } from "@/store/modules/authentication";
 
 export default {
   data() {
@@ -58,11 +58,6 @@ export default {
       response: Array,
     };
   },
-  setup() {
-    const authenticationStore = useAuthenticationUserStore()
-
-    return { authenticationStore }
-  },
   mounted: function () {
     this.liveData();
   },
@@ -72,7 +67,7 @@ export default {
       axios
         .get("/listcawlelongtoday", {
           headers: {
-            Authorization: "Bearer " + this.authenticationStore.getToken,
+            Authorization: "Bearer " + useAuthenticationUserStore().getToken,
           },
         })
         .then((response) => {
diff --git a/src/components/pay/SelectOutlet.vue b/src/components/pay/SelectOutlet.vue
index 801250f..1e0f881 100644
--- a/src/components/pay/SelectOutlet.vue
+++ b/src/components/pay/SelectOutlet.vue
@@ -46,8 +46,8 @@
           </button> -->
           <div class="col-12 md:col-5">
             <Button
-              label="Batal Pembayaran"
-              class="p-button-danger p-button-sm"
+              label="Kembali"
+              class="p-button-secondary p-button-sm"
               v-on:click="clickCancelButton()"
             />
           </div>
@@ -211,6 +211,20 @@
     :style="{ width: '50vw' }"
     :modal="true"
   >
+    <div class="text-center">
+      <div>Lakukan bayaran ke akaun tersebut.</div>
+      <div class="div-card-bank">
+        <div class="card-bank">
+          <div>
+            <div>PERMODALAN KELANTAN BERHAD</div>
+            <div>03139010016326</div>
+            <div>BANK ISLAM</div>
+          </div>
+        </div>
+      </div>
+    </div>
+    <div class="mt-5">Sila muat naik gambar resit dalam bentuk <strong>PNG</strong> atau <strong>JPG</strong>.</div>
+    <div>Pastikan gambar yang dimuat naik adalah <strong>JELAS.</strong></div>
     <div class="text-center m-2">
       <input
         class="form-control"
@@ -223,7 +237,6 @@
         class="fst-italic text-danger row"
         v-if="v$.fileSize.$error"
       >
-        <div>Saiz maksimum gambar adalah 2MB.</div>
         <div>Jenis gambar yang diterima adalah PNG dan JPG.</div>
       </div>
     </div>
@@ -249,7 +262,7 @@
 import SelectId from "./SelectId.vue";
 import TermsAndConditionsDetails from "../authentication/TermsAndConditionsDetails.vue";
 import axios from "axios";
-import { required, integer, between } from "@vuelidate/validators";
+import { required, integer, minValue} from "@vuelidate/validators";
 import useVuelidate from "@vuelidate/core";
 
 export default {
@@ -309,7 +322,7 @@ export default {
   },
   validations() {
     return {
-      fileSize: { required, integer, betweenValue: between(1, 2200000) },
+      fileSize: { required, integer, minValueValue: minValue(10) },
     };
   },
   mounted() {
@@ -507,4 +520,22 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.div-card-bank {
+  display: flex;
+  justify-content: center;
+}
+
+.card-bank {
+  background: #2f68c51c;
+  color: #2f68c5f2;
+  width: 300px;
+  height: 125px;
+  border-radius: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index 3e874fb..13a4f59 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -174,12 +174,12 @@
                         <div
                           v-if="
                             list.status_payment_cawangan.status == 9 &&
-                            list.status_payment_cawangan.file_resit.length < 7
+                            list.status_payment_cawangan.file_resit.length < 15
                           "
                         >
                           <Button
                             class="p-button-sm mb-1"
-                            label="Muat Naik Resit"
+                            label="Tambah Resit Baharu"
                             icon="pi pi-plus-circle"
                             iconPos="right"
                             @click="openModalFileUpload(list.kodcaw)"
@@ -191,6 +191,20 @@
                             :style="{ width: '50vw' }"
                             :modal="true"
                           >
+                            <div class="text-center">
+                              <div>Lakukan bayaran ke akaun tersebut.</div>
+                              <div class="div-card-bank">
+                                <div class="card-bank">
+                                  <div>
+                                    <div>PERMODALAN KELANTAN BERHAD</div>
+                                    <div>03139010016326</div>
+                                    <div>BANK ISLAM</div>
+                                  </div>
+                                </div>
+                              </div>
+                            </div>
+                            <div class="mt-5">Sila muat naik gambar resit dalam bentuk <strong>PNG</strong> atau <strong>JPG</strong>.</div>
+                            <div>Pastikan gambar yang dimuat naik adalah <strong>JELAS.</strong></div>
                             <div class="text-center m-2">
                               <input
                                 class="form-control"
@@ -203,7 +217,6 @@
                                 class="fst-italic text-danger row"
                                 v-if="v$.fileSize.$error"
                               >
-                                <div>Saiz maksimum gambar adalah 2MB.</div>
                                 <div>
                                   Jenis gambar yang diterima adalah PNG dan JPG.
                                 </div>
@@ -520,7 +533,7 @@ import html2canvas from "html2canvas";
 import axios from "axios";
 import ItemMasterImageModal from "../list/ItemMasterImageModal.vue";
 import ReceiptImage from "../pay/ReceiptImage.vue";
-import { required, integer, between } from "@vuelidate/validators";
+import { required, integer, minValue } from "@vuelidate/validators";
 import useVuelidate from "@vuelidate/core";
 
 export default {
@@ -556,7 +569,7 @@ export default {
   },
   validations() {
     return {
-      fileSize: { required, integer, betweenValue: between(1, 2200000) },
+      fileSize: { required, integer, minValueValue: minValue(10) },
     };
   },
   created() {
@@ -577,27 +590,31 @@ export default {
     },
     liveData() {
       this.loading = true;
-      axios
-        .get("/bayar/" + localStorage.getItem("id") + "/" + this.lelongId, {
-          headers: {
-            Authorization: "Bearer " + localStorage.getItem("token"),
-          },
-        })
-        .then((response) => {
-          // console.log("liveData", response);
-          if (response.data.success == true) {
-            this.isSuccess = true;
+      if(this.lelongId != null) {
+        axios
+          .get("/bayar/" + localStorage.getItem("id") + "/" + this.lelongId, {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          })
+          .then((response) => {
+            // console.log("liveData", response);
+            if (response.data.success == true) {
+              this.isSuccess = true;
+              this.loading = false;
+              this.lists = response.data.data;
+              this.tarikhLelong = response.data.tarikh_lelong;
+            } else {
+              this.isSuccess = false;
+            }
+          })
+          .catch((error) => {
             this.loading = false;
-            this.lists = response.data.data;
-            this.tarikhLelong = response.data.tarikh_lelong;
-          } else {
-            this.isSuccess = false;
-          }
-        })
-        .catch((error) => {
-          this.loading = false;
-          console.log(error);
-        });
+            console.log(error);
+          });
+      } else {
+        this.$router.push({ name: "result" });
+      }
     },
     clickPayButton(value) {
       this.$router.push({ name: "pay", params: { lelongId: value } });
@@ -760,4 +777,20 @@ export default {
 .container-height {
   min-height: 70vh;
 }
+
+.div-card-bank {
+  display: flex;
+  justify-content: center;
+}
+
+.card-bank {
+  background: #2f68c51c;
+  color: #2f68c5f2;
+  width: 300px;
+  height: 125px;
+  border-radius: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
 </style>
\ No newline at end of file
diff --git a/src/router/index.js b/src/router/index.js
index 68ac13c..aae3091 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -132,7 +132,8 @@ import ResultDetail from "../components/result/ResultDetail.vue";
 import ResultReceipt from "../components/result/ResultReceipt.vue"
 import ThePay from "../components/pay/ThePay.vue";
 import ThePayCdm from "../components/pay/ThePayCdm.vue";
-import ThePolicy from "../components/policy/ThePolicy.vue"
+import ThePolicy from "../components/policy/ThePolicy.vue";
+import TheForgotPassword from "../components/authentication/TheForgotPassword.vue";
 
 import {
   createRouter,
@@ -162,6 +163,11 @@ const routes = [
     name: "login",
     component: TheLogin,
   },
+  {
+    path: "/forgot-password",
+    name: "forgot-password",
+    component: TheForgotPassword,
+  },
   {
     path: "/home",
     name: "home",