diff --git a/src/components/cart/CartList.vue b/src/components/cart/CartList.vue
index 18d7973..18d870e 100644
--- a/src/components/cart/CartList.vue
+++ b/src/components/cart/CartList.vue
@@ -695,7 +695,11 @@ export default {
     listCart() {
       this.loading = true;
       axios
-        .get("/cart/" + localStorage.getItem("id"))
+        .get("/cart/" + localStorage.getItem("id"), {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
         .then((response) => {
           this.senaraiCarts = response.data;
           this.loading = false;
diff --git a/src/components/cart/CartListNew.vue b/src/components/cart/CartListNew.vue
new file mode 100644
index 0000000..5b6e45b
--- /dev/null
+++ b/src/components/cart/CartListNew.vue
@@ -0,0 +1,140 @@
+<template>
+  <div
+    v-if="loading"
+    style="min-height: 70vh; display: grid; place-items: center"
+  >
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+  <div v-else class="container">
+    <div class="row">
+      <div class="col-10">
+        <div class="card">
+          <div class="card-header">SENARAI TROLI</div>
+          <div v-if="success" class="accordion" id="accordionExample">
+            <div v-for="item in items" v-bind:key="item" class="accordion-item">
+              <h2 class="accordion-header" id="headingOne">
+                <button
+                  class="accordion-button"
+                  type="button"
+                  data-bs-toggle="collapse"
+                  data-bs-target="#collapseOne"
+                  aria-expanded="true"
+                  aria-controls="collapseOne"
+                >
+                  {{ item.caw_name }}
+                </button>
+              </h2>
+              <div
+                id="collapseOne"
+                class="accordion-collapse collapse show"
+                aria-labelledby="headingOne"
+                data-bs-parent="#accordionExample"
+              >
+                <div class="accordion-body">
+                  <table class="table table-bordered table-hover">
+                    <thead>
+                      <tr>
+                        <th>Bil</th>
+                        <th>No Rujukan</th>
+                        <th>Harga Asas</th>
+                        <th>Harga Bida</th>
+                        <th>Tindakan</th>
+                      </tr>
+                    </thead>
+                    <tbody>
+                      <tr
+                        v-for="(surat, index) in item.lelongbid"
+                        v-bind:key="surat"
+                      >
+                        <td>{{ index + 1 }}</td>
+                        <td>
+                          {{ surat.norujukan }}<br /><small>{{
+                            surat.marhun
+                          }}</small>
+                        </td>
+                        <td>RM{{ surat.hargaasas }}</td>
+                        <td>RM{{ surat.hargabida }}</td>
+                        <td>
+                          <button class="btn me-1 ms-1 btn-warning">Ubah</button
+                          ><button class="btn me-1 ms-1 btn-danger">
+                            Padam
+                          </button>
+                        </td>
+                      </tr>
+                      <tr style="text-transform: uppercase">
+                        <th colspan="3">JUMLAH</th>
+                        <th>RMxxxxxx</th>
+                        <td></td>
+                      </tr>
+                    </tbody>
+                  </table>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div v-else>
+            <div class="card-body">
+              <p>TIADA DATA</p>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="col-2">
+        <div class="card">
+          <div class="card-header">RINGKASAN TROLI</div>
+          <div class="card-body">
+            <base-card>
+              <p>Jumlah Surat: 121</p>
+            </base-card>
+            <base-card>
+              <p>Jumlah Bidaan: RM12121</p>
+            </base-card>
+            <button class="btn btn-success">Teruskan</button>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import axios from "axios";
+export default {
+  data() {
+    return {
+      loading: false,
+      success: false,
+      items: "",
+    };
+  },
+  mounted: function () {
+    this.listCart();
+  },
+  methods: {
+    listCart() {
+      this.loading = true;
+      axios
+        .get("/cartByCawangan/" + localStorage.getItem("id"), {
+          headers: {
+            Authorization: "Bearer " + localStorage.getItem("token"),
+          },
+        })
+        .then((response) => {
+          this.loading = false;
+          if (response.data.success == true) {
+            this.success = true;
+            this.items = response.data.cart;
+          } else {
+            this.success = false;
+          }
+          console.log(response);
+        })
+        .catch((error) => {
+          console.log(error);
+        });
+    },
+  },
+};
+</script>
\ No newline at end of file
diff --git a/src/components/cart/TheCart.vue b/src/components/cart/TheCart.vue
index 1da76d3..67e2587 100644
--- a/src/components/cart/TheCart.vue
+++ b/src/components/cart/TheCart.vue
@@ -1,19 +1,26 @@
 <template>
   <the-template>
-    <base-card>
-      <cart-list
+    <!-- <base-card> -->
+      <button v-on:click="toggleReloadComponent()" class="badge btn-secondary m-2">
+        Reload <i class="bi bi-arrow-clockwise"></i>
+      </button>
+      <!-- <cart-list
         v-bind:key="componentKey"
         v-on:reloadComponent="toggleReloadComponent"
-      ></cart-list>
-    </base-card>
+      ></cart-list> -->
+      <cart-list-new v-bind:key="componentKey"></cart-list-new>
+    <!-- </base-card> -->
   </the-template>
 </template>
 
 <script>
 import CartList from "./CartList.vue";
+import CartListNew from "./CartListNew.vue";
+
 export default {
   components: {
     "cart-list": CartList,
+    "cart-list-new": CartListNew,
   },
   data() {
     return {
diff --git a/src/components/result/ResultMain.vue b/src/components/result/ResultMain.vue
index 82900c1..e63625a 100644
--- a/src/components/result/ResultMain.vue
+++ b/src/components/result/ResultMain.vue
@@ -1,4 +1,13 @@
 <template>
+  <div
+    v-if="loading"
+    style="min-height: 70vh; display: grid; place-items: center"
+  >
+    <div class="spinner-border" role="status">
+      <span class="visually-hidden">Loading...</span>
+    </div>
+  </div>
+  <div v-else class="container">
     <table class="table table-bordered table-hover">
       <thead>
         <tr>
@@ -33,6 +42,7 @@
         </tr>
       </tbody>
     </table>
+  </div>
 </template>
 
 <script>
@@ -47,6 +57,7 @@ export default {
     return {
       lelong: "",
       lelongStatus: true,
+      loading: false,
     };
   },
   mounted: function () {
@@ -54,6 +65,7 @@ export default {
   },
   methods: {
     getLelong() {
+      this.loading = true;
       axios
         .get("/result-lelong", {
           headers: {
@@ -65,6 +77,7 @@ export default {
         })
 
         .then((response) => {
+          this.loading = false;
           console.log(response);
           if (response.data.success === true) {
             this.lelong = response.data.lelong;