diff --git a/src/components/authentication/TermsAndConditions.vue b/src/components/authentication/TermsAndConditions.vue
new file mode 100644
index 0000000..6578443
--- /dev/null
+++ b/src/components/authentication/TermsAndConditions.vue
@@ -0,0 +1,112 @@
+<template>
+  <a href="#" data-bs-toggle="modal" data-bs-target="#exampleModal">
+    Terma & Syarat
+  </a>
+  <div
+    class="modal fade"
+    id="exampleModal"
+    tabindex="-1"
+    aria-labelledby="exampleModalLabel"
+    aria-hidden="true"
+  >
+    <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>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">
+          <div class="row">
+            <div class="col paragraph-align">
+              <ol>
+                <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.
+                </li>
+                <li>
+                  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>
+                </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>.
+                </li>
+                <li>
+                  Setiap bidaan atas talian yang telah dihantar tidak boleh
+                  diubah, sila pastikan nombor siri dan harga yang dibida diisi
+                  secara atas talian adalah betul, pihak kami tidak akan
+                  bertanggungjawab atas kesilapan pelanggan mengisi harga bidaan
+                  atas talian.
+                </li>
+              </ol>
+            </div>
+            <div class="col paragraph-align">
+              <ol start="10">
+                <li style="text-transform: uppercase">
+                  <strong>Kaedah pembayaran melalui perbankan atas talian (Online
+                  Banking).</strong>
+                </li>
+                <li>
+                  Pembayaran bidaan hendaklah diselesaikan <strong>sebelum jam 4.00</strong>
+                  petang pada hari lelongan.
+                </li>
+                <li>
+                  Sila serahkan bukti pembayaran semasa menuntut marhun lelongan
+                  (di kaunter atau melalui media elektronik sama ada emel atau
+                  whatsapp dan marhun lelong hendaklah dituntut sebelum jam 4.00
+                  petang).
+                </li>
+                <li>
+                  Pembida yang menang di dalam bidaan tetapi gagal melakukan
+                  pembayaran pada hari lelongan akan <strong>disenarai hitamkan.</strong>
+                </li>
+                <li>
+                  Semua terma dan syarat di atas adalah tertakluk kepada pindaan
+                  dan boleh diubah dari masa ke semasa tanpa dimaklumkan kepada
+                  pembida.
+                </li>
+              </ol>
+            </div>
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button
+            type="button"
+            class="btn btn-secondary"
+            data-bs-dismiss="modal"
+          >
+            Kembali
+          </button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {};
+</script>
+
+<style scoped>
+.paragraph-align {
+  text-align: justify;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/authentication/TheLogin.vue b/src/components/authentication/TheLogin.vue
index 5f5bee2..142b010 100644
--- a/src/components/authentication/TheLogin.vue
+++ b/src/components/authentication/TheLogin.vue
@@ -129,9 +129,10 @@
       <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">
+  <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>
@@ -158,13 +159,16 @@
           </div>
           <button
             @click="doLogin"
-            class="w-100 mt-4 mb-5 btn btn-primary"
+            class="w-100 mt-4 btn btn-primary"
             type="submit"
           >
             Masuk
           </button>
         </form>
-        <router-link to="/register">Daftar Akaun</router-link><br />
+        <div class="row mt-2 mb-5">
+          <router-link to="/register">Daftar Akaun</router-link>
+        </div>
+        <terms-and-conditions></terms-and-conditions>
       </div>
     </div>
   </div>
@@ -232,4 +236,21 @@ export default {
     },
   },
 };
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.main-container {
+  /* display: flex; */
+  /* justify-content: center;
+  align-items: center;
+  width: 100%; */
+}
+
+.left-container {
+  background-color: #1d3461;
+}
+.row-container {
+  /* width: 100%; */
+  height: 100vh;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/authentication/TheRegister.vue b/src/components/authentication/TheRegister.vue
index 370d6a3..09b4c91 100644
--- a/src/components/authentication/TheRegister.vue
+++ b/src/components/authentication/TheRegister.vue
@@ -1,50 +1,182 @@
 <template>
-  <div class="container mt-5">
-    <div class="row justify-content-center">
-      <div class="col-7">
-        <form>
-          <h5>Register</h5>
-          <div class="mb-3">
-            <label for="exampleInputEmail1" class="form-label"
-              >Email address</label
+  <div class="container-fluid p-2">
+    <div class="row justify-content-center p-5 rounded">
+      <h1 class="mb-5 text-primary">Sistem Lelong</h1>
+      <h4>Daftar Akaun</h4>
+      <form @submit.prevent="submit">
+        <div class="row">
+          <div class="col-6 mb-1">
+            <div class="form-floating">
+              <input type="text" class="form-control" v-model="form.name" />
+              <label>Nama</label>
+            </div>
+            <div
+              style="font-size: 15px"
+              class="fst-italic text-danger"
             >
-            <input
-              type="email"
-              class="form-control"
-              id="exampleInputEmail1"
-              aria-describedby="emailHelp"
-            />
-            <div id="emailHelp" class="form-text">
-              We'll never share your email with anyone else.
+              <div class="text-start">
+                *Minimum tambahan harga bida adalah RM1.
+              </div>
             </div>
           </div>
-          <div class="mb-3">
-            <label for="exampleInputPassword1" class="form-label"
-              >Password</label
-            >
-            <input
-              type="password"
-              class="form-control"
-              id="exampleInputPassword1"
-            />
+          <div class="col-6 mb-1">
+            <div class="form-floating">
+              <input type="text" class="form-control" v-model="form.nokp" />
+              <label>No KP</label>
+            </div>
           </div>
-          <div class="mb-3 form-check">
-            <input
-              type="checkbox"
-              class="form-check-input"
-              id="exampleCheck1"
-            />
-            <label class="form-check-label" for="exampleCheck1"
-              >Check me out</label
-            >
+        </div>
+        <div class="row">
+          <div class="col-6 mb-1">
+            <div class="form-floating">
+              <input
+                type="text"
+                class="form-control"
+                v-model="form.notelbimbit"
+              />
+              <label>No. Telefon</label>
+            </div>
           </div>
-          <div class="mb-3">
-            <router-link v-bind:to="{ name: 'login' }" class="btn btn-secondary"
-              >Login</router-link
-            >
+          <div class="col-6 mb-1">
+            <div class="form-floating">
+              <input type="email" class="form-control" v-model="form.email" />
+              <label>E-mel</label>
+            </div>
           </div>
-        </form>
-      </div>
+        </div>
+        <div class="row">
+          <div class="col-6 mb-1">
+            <div class="form-floating">
+              <input
+                type="text"
+                class="form-control"
+                autocomplete="off"
+                v-model="form.username"
+              />
+              <label>Username</label>
+            </div>
+          </div>
+          <div class="col-6 mb-1">
+            <div class="form-floating"></div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-6 mb-1">
+            <div class="form-floating">
+              <input
+                type="password"
+                class="form-control"
+                v-model="form.password"
+              />
+              <label>Password</label>
+            </div>
+          </div>
+          <div class="col-6 mb-1">
+            <div class="form-floating">
+              <input
+                type="password"
+                class="form-control"
+                v-model="form.password_confirmation"
+              />
+              <label>Password Confirmation</label>
+            </div>
+          </div>
+        </div>
+        <div class="row">
+          <div class="col-6 mb-1">
+            <label>Kad Pengenalan Hadapan</label>
+            <input type="file" class="form-control" />
+          </div>
+          <div class="col-6 mb-1">
+            <label>Kad Pengenalan Belakang</label>
+            <input type="file" class="form-control" />
+          </div>
+        </div>
+        <div class="row">
+          <div class="checkbox mt-3 mb-3">
+            <label>
+              <input type="checkbox" value="1" id="register_agree" /> Setuju
+              Dengan
+              <terms-and-conditions></terms-and-conditions>
+            </label>
+          </div>
+        </div>
+        <div class="row justify-content-center">
+          <div class="col-3">
+            <button
+              @click="doRegister"
+              class="w-100 mt-4 mb-5 btn btn-primary"
+              type="submit"
+            >
+              Daftar
+            </button>
+          </div>
+        </div>
+      </form>
+
+      <router-link to="/login">Log Masuk</router-link>
     </div>
   </div>
-</template>
\ No newline at end of file
+</template>
+
+<script>
+import axios from "axios";
+import useVuelidate from "@vuelidate/core";
+import { required } from "@vuelidate/validators";
+
+export default {
+  name: "Register",
+  data() {
+    return {
+      v$: useVuelidate(),
+      hello: "",
+      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() {
+      this.v$.$validate();
+      if (!this.v$.$error) {
+        axios
+          .post("/register", this.form)
+          .then((response) => {
+            if (response.data.success == true) {
+              localStorage.setItem("token", response.data.token);
+              this.$router.push({ name: "login" });
+              console.log(response);
+            } else if (response.data.success == false) {
+              console.log(response.data);
+              alert(response.data.success);
+            } else {
+              alert(response);
+              console.log(response);
+            }
+          })
+          .catch((error) => {
+            alert(error);
+            console.log(error);
+          });
+      }
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index dcbb38b..c92df8f 100644
--- a/src/components/list/ListItem.vue
+++ b/src/components/list/ListItem.vue
@@ -308,8 +308,8 @@ export default {
           console.log(response);
           if (response.data.success == true) {
             this.status = true;
-            this.lelong_details = response.data.message[0];
-            this.response = response.data.message[0].lelongbid;
+            this.lelong_details = response.data.message;
+            this.response = response.data.message.lelongbid;
             this.sags = this.response;
             this.loading = false;
           } else {
diff --git a/src/main.js b/src/main.js
index 4670f17..96045b6 100644
--- a/src/main.js
+++ b/src/main.js
@@ -13,12 +13,14 @@ import 'sweetalert2/dist/sweetalert2.min.css';
 
 import TheTemplate from './components/layouts/TheTemplate.vue'
 import BaseCard from './components/base/BaseCard.vue'
+import TermsAndConditions from './components/authentication/TermsAndConditions.vue'
 
 const app = createApp(App);
 // const app = createApp(Master);
 
 app.component('the-template', TheTemplate);
 app.component('base-card', BaseCard);
+app.component('terms-and-conditions', TermsAndConditions);
 
 app.use(router).use(store).use(VueSweetalert2).mount('#app');
 
diff --git a/src/router/index.js b/src/router/index.js
index b7a0bf6..3541b1e 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -121,7 +121,7 @@
 // export default router;
 
 import TheLogin from "../components/authentication/TheLogin.vue";
-// import TheRegister from '../components/authentication/TheRegister.vue'
+import TheRegister from '../components/authentication/TheRegister.vue'
 import TheHome from "../components/home/TheHome.vue";
 import TheCart from "../components/cart/TheCart.vue";
 import TheResult from "../components/result/TheResult.vue";
@@ -138,7 +138,7 @@ import {
   createMemoryHistory,
 } from "vue-router";
 import Login from "../components/Login.vue";
-import Register from "../components/Register.vue";
+// import Register from "../components/Register.vue";
 // import IndexPaymentHistory from '../components/result/IndexPaymentHistory.vue'
 // import Modals from './../components/Modal.vue'
 // import { Modal } from "bootstrap";
@@ -153,7 +153,7 @@ const routes = [
   {
     path: "/register",
     name: "register",
-    component: Register,
+    component: TheRegister,
     // meta: { guest: true }
   },
   {