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/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",