diff --git a/src/components/pay/SelectOutlet.vue b/src/components/pay/SelectOutlet.vue
index aa895f7..4b6802f 100644
--- a/src/components/pay/SelectOutlet.vue
+++ b/src/components/pay/SelectOutlet.vue
@@ -19,9 +19,9 @@
             </tbody>
           </table>
           <div class="d-flex justify-content-between">
-            <router-link class="btn btn-danger" v-bind:to="{ name: 'detail' }"
-              >Cancel</router-link
-            >
+            <button class="btn btn-danger" v-on:click="clickCancelButton()">
+              Cancel
+            </button>
             <button
               ref="nextButton"
               v-on:click="clickNextButton()"
@@ -32,7 +32,10 @@
           </div>
         </div>
         <div v-else>
-          <select-id v-bind:selectedRadio="selectRadio" v-on:back-is-click="backIsClick"></select-id>
+          <select-id
+            v-bind:selectedRadio="selectRadio"
+            v-on:back-is-click="backIsClick"
+          ></select-id>
         </div>
       </div>
     </div>
@@ -62,12 +65,21 @@ export default {
       console.log(value);
       this.selectRadio = value;
     },
+    clickCancelButton() {
+      this.$router.push({
+        name: "detail",
+        params: {
+          lelongId: localStorage.getItem("lelong_id"),
+          statusPayment: null,
+        },
+      });
+    },
     clickNextButton() {
       this.nextButton = true;
     },
     backIsClick(value) {
       this.nextButton = value;
-    }
+    },
   },
 };
 </script>
\ No newline at end of file
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index bd223da..a8b1e09 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -20,6 +20,7 @@
               >
               <h5 class="m-3">Keputusan Tarikh Lelong: {{ tarikhLelong }}</h5>
               <router-link
+                v-if="!statusPayment"
                 v-bind:to="{ name: 'pay' }"
                 class="btn btn-primary m-3 me-0"
                 >Bayar</router-link
@@ -93,7 +94,12 @@
                             </td>
                           </tr>
                           <tr>
-                            <td colspan="5" style="justify-content:end">Muat Turun Penyata <a href="#" class="btn btn-outline-primary"> <i class="bi bi-download"></i></a></td>
+                            <td colspan="5" style="justify-content: end">
+                              Muat Turun Penyata
+                              <a href="#" class="btn btn-outline-primary">
+                                <i class="bi bi-download"></i
+                              ></a>
+                            </td>
                           </tr>
                         </tbody>
                       </table>
@@ -121,8 +127,15 @@ export default {
       lists: [],
       tarikhLelong: "",
       loading: false,
+      lelongId: "",
+      statusPayment: "",
     };
   },
+  created() {
+    console.log(this.$route.params.lelongId);
+    this.lelongId = this.$route.params.lelongId;
+    this.statusPayment = this.$route.params.statusPayment;
+  },
   mounted: function () {
     this.liveData();
   },
@@ -135,7 +148,7 @@ export default {
             localStorage.getItem("id") +
             // "/1",
             "/" +
-            localStorage.getItem("lelong_id"),
+            this.lelongId,
           {
             headers: {
               Authorization: "Bearer " + localStorage.getItem("token"),
diff --git a/src/components/result/ResultMain.vue b/src/components/result/ResultMain.vue
index f830b83..bb6dc51 100644
--- a/src/components/result/ResultMain.vue
+++ b/src/components/result/ResultMain.vue
@@ -10,24 +10,26 @@
           <th scope="col">Status</th>
         </tr>
       </thead>
-      <tbody>
-        <tr>
-          <td>1</td>
-          <td><router-link v-bind:to="{ name: 'detail' }">'tarikh'</router-link></td>
-          <td></td>
-          <td class="text-danger">Belum Selesai</td>
+      <tbody v-if="lelongStatus">
+        <tr v-for="(data, index) in lelong" v-bind:key="data">
+          <td>{{ index + 1 }}</td>
+          <td
+            class="btn text-primary"
+            style=""
+            v-on:click="selectDate(data)"
+          >
+            <u>{{ data.tarikh_lelong }}</u>
+          </td>
+          <td>RM{{ data.jumlah }}</td>
+          <td v-if="data.status == 1" class="text-success">Selesai</td>
+          <td v-else-if="data.status == null" class="text-danger">
+            Belum Selesai
+          </td>
         </tr>
+      </tbody>
+      <tbody v-else>
         <tr>
-          <td>1</td>
-          <td></td>
-          <td></td>
-          <td class="text-success"></td>
-        </tr>
-        <tr>
-          <td>1</td>
-          <td></td>
-          <td></td>
-          <td class="text-success"></td>
+          <td colspan="4">Tiada Data</td>
         </tr>
       </tbody>
     </table>
@@ -35,11 +37,49 @@
 </template>
 
 <script>
+import axios from "axios";
 import ResultDetail from "./ResultDetail.vue";
 
 export default {
   components: {
     "result-detail": ResultDetail,
   },
+  data() {
+    return {
+      lelong: "",
+      lelongStatus: true,
+    };
+  },
+  mounted: function () {
+    this.getLelong();
+  },
+  methods: {
+    getLelong() {
+      axios
+        .get("/result-lelong", {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+          params: {
+            user_id: localStorage.getItem("id"),
+          },
+        })
+
+        .then((response) => {
+          console.log(response);
+          if (response.data.success === true) {
+            this.lelong = response.data.lelong;
+          } else {
+            this.lelongStatus = false;
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    selectDate(value) {
+      this.$router.push({ name: "detail", params: { lelongId: value.id,  statusPayment: value.status} });
+    },
+  },
 };
 </script>
\ No newline at end of file