diff --git a/src/components/pay/SelectFinalise.vue b/src/components/pay/SelectFinalise.vue
new file mode 100644
index 0000000..760b56a
--- /dev/null
+++ b/src/components/pay/SelectFinalise.vue
@@ -0,0 +1,22 @@
+<template>
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-7">
+        <p>Cawangan: Ar-Rahn Kota Bharu 2</p>
+        <table class="table table-bordered">
+          <tbody>
+            <tr>
+              <td>X0192091029-02012</td>
+              <td>RM1212.00</td>
+            </tr>
+            <tr>
+              <td>X0192091029-02012</td>
+              <td>RM1212.00</td>
+            </tr>
+          </tbody>
+        </table>
+        <p>Jumlah Dipilih: RM2129</p>
+      </div>
+    </div>
+  </div>
+</template>
\ No newline at end of file
diff --git a/src/components/pay/SelectId.vue b/src/components/pay/SelectId.vue
new file mode 100644
index 0000000..2c85f16
--- /dev/null
+++ b/src/components/pay/SelectId.vue
@@ -0,0 +1,58 @@
+<template>
+  <p>Pilih Surat</p>
+  <div class="container">
+    <table class="table table-bordered">
+      <tbody>
+        <tr>
+          <td><input type="checkbox" /></td>
+          <td>X0192091029-02012</td>
+          <td>RM1212.00</td>
+        </tr>
+        <tr>
+          <td><input type="checkbox" /></td>
+          <td>X0192091029-02012</td>
+          <td>RM1212.00</td>
+        </tr>
+        <tr>
+          <td><input type="checkbox" /></td>
+          <td>X0192091029-02012</td>
+          <td>RM1212.00</td>
+        </tr>
+      </tbody>
+    </table>
+    <p>Jumlah Dipilih: RM2129</p>
+    <div class="d-flex justify-content-between">
+      <button v-on:click="$emit(clickBack)" class="btn btn-secondary">
+        Kembali
+      </button>
+      <button
+        ref="nextButton"
+        v-on:click="clickNextButton()"
+        class="btn btn-primary"
+      >
+        Teruskan
+      </button>
+      <!-- <button
+          ref="payButton"
+          type="button"
+          class="btn btn-success m-3"
+          data-bs-toggle="modal"
+          data-bs-target="#exampleModal"
+          hidden
+        >
+          Bayar
+        </button> -->
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  methods: {},
+  emits: {
+    clickBack() {
+      console.log("hye");
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/pay/SelectOutlet.vue b/src/components/pay/SelectOutlet.vue
new file mode 100644
index 0000000..b7e912b
--- /dev/null
+++ b/src/components/pay/SelectOutlet.vue
@@ -0,0 +1,72 @@
+<template>
+  <div class="container">
+    <div class="row justify-content-center">
+      <div class="col-7">
+        <div v-if="!clickNext">
+          <p>Pilih Cawangan</p>
+          <table class="table table-bordered">
+            <tbody>
+              <tr v-for="data in namaCawangan" v-bind:key="data">
+                <td>
+                  <input type="radio" name="idCawangan" id="idCawangan" />
+                </td>
+                <td>{{ data.cawangan }}</td>
+              </tr>
+            </tbody>
+          </table>
+          <div class="d-flex justify-content-between">
+            <router-link class="btn btn-danger" v-bind:to="{ name: 'detail' }"
+              >Cancel</router-link
+            >
+            <button
+              ref="nextButton"
+              v-on:click="clickNextButton()"
+              class="btn btn-primary"
+            >
+              Teruskan
+            </button>
+            <!-- <button
+          ref="payButton"
+          type="button"
+          class="btn btn-success m-3"
+          data-bs-toggle="modal"
+          data-bs-target="#exampleModal"
+          hidden
+        >
+          Bayar
+        </button> -->
+          </div>
+        </div>
+        <div v-else>
+          <select-id></select-id>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import SelectId from "./SelectId.vue";
+
+export default {
+  components: {
+    "select-id": SelectId,
+  },
+  props: {
+    id: Number,
+    namaCawangan: "",
+  },
+  data() {
+    return {
+      clickNext: false,
+      selectCawangan: this.namaCawangan,
+    };
+  },
+
+  methods: {
+    clickNextButton() {
+      this.clickNext = true;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/pay/ThePay.vue b/src/components/pay/ThePay.vue
new file mode 100644
index 0000000..7868aa3
--- /dev/null
+++ b/src/components/pay/ThePay.vue
@@ -0,0 +1,112 @@
+<template>
+  <the-template>
+    <base-card>
+      <p>Tarikh Lelong : {{ tarikhLelong }}</p>
+      <div v-if="statusComponent == 1">
+        <select-outlet v-bind:namaCawangan="lists"></select-outlet>
+      </div>
+      <!-- <div v-if="statusComponent == 2">
+        <select-id></select-id>
+      </div>
+      <div v-else-if="statusComponent == 3">
+        <select-finalse></select-finalse>
+      </div> -->
+      
+    </base-card>
+  </the-template>
+
+  <div
+    class="modal fade"
+    id="exampleModal"
+    tabindex="-1"
+    aria-labelledby="exampleModalLabel"
+    aria-hidden="true"
+  >
+    <div class="modal-dialog">
+      <div class="modal-content">
+        <div class="modal-header">
+          <h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
+          <button
+            type="button"
+            class="btn-close"
+            data-bs-dismiss="modal"
+            aria-label="Close"
+          ></button>
+        </div>
+        <div class="modal-body">...</div>
+        <div class="modal-footer">
+          <button
+            type="button"
+            class="btn btn-secondary"
+            data-bs-dismiss="modal"
+          >
+            Close
+          </button>
+          <button type="button" class="btn btn-primary">Save changes</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+import SelectOutlet from "./SelectOutlet.vue";
+import SelectId from "./SelectId.vue";
+import SelectFinalise from "./SelectFinalise.vue";
+
+export default {
+  components: {
+    "select-outlet": SelectOutlet,
+    "select-id": SelectId,
+    "select-finalse": SelectFinalise,
+  },
+  data() {
+    return {
+      lists: [],
+      tarikhLelong: "",
+      statusComponent: 1,
+      user: {
+        id: 1,
+        caw: "KOta Bbharu",
+      },
+    };
+  },
+  mounted: function () {
+    this.liveData();
+  },
+  methods: {
+    liveData() {
+      axios
+        .get(
+          "/bayar/" +
+            localStorage.getItem("id") +
+            "/" +
+            localStorage.getItem("lelong_id"),
+          {
+            headers: {
+              Authorization: "Bearer " + localStorage.getItem("token"),
+            },
+          }
+        )
+        .then((response) => {
+          if (response.statusText == "OK") {
+            this.lists = response.data.data;
+            console.log(this.lists);
+            this.tarikhLelong = response.data.tarikh_lelong;
+          } else {
+          }
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+    clickBackButton() {
+      // this.statusComponent -= 1;
+    },
+    clickNextButton() {
+      // this.statusComponent += 1;
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/result/ResultDetail.vue b/src/components/result/ResultDetail.vue
index 9dfdf4c..0e74121 100644
--- a/src/components/result/ResultDetail.vue
+++ b/src/components/result/ResultDetail.vue
@@ -11,7 +11,7 @@
                 >Kembali</router-link
               >
               <h5 class="m-3">Keputusan Tarikh Lelong: {{tarikhLelong}}</h5>
-              <button class="btn btn-primary m-3 me-0">Bayar</button>
+              <router-link v-bind:to="{name: 'pay'}" class="btn btn-primary m-3 me-0">Bayar</router-link>
             </div>
             <div>
               <div class="accordion" id="accordionExample">
diff --git a/src/router/index.js b/src/router/index.js
index 0847d87..cf9acef 100644
--- a/src/router/index.js
+++ b/src/router/index.js
@@ -129,6 +129,7 @@ import TheProfile from "../components/profile/TheProfile.vue";
 import TheBidRecord from "../components/bid-record/TheBidRecord.vue";
 import TheList from "../components/list/TheList.vue";
 import ResultDetail from "../components/result/ResultDetail.vue";
+import ThePay from "../components/pay/ThePay.vue";
 
 import {
   createRouter,
@@ -195,6 +196,11 @@ const routes = [
     component: ResultDetail,
     // meta: { requiresAuth: true }
   },
+  {
+    path: "/pay",
+    name: "pay",
+    component: ThePay,
+  },
 ];
 
 const router = createRouter({