diff --git a/src/components/list/ListItem.vue b/src/components/list/ListItem.vue
index c92df8f..254ff4a 100644
--- a/src/components/list/ListItem.vue
+++ b/src/components/list/ListItem.vue
@@ -1,75 +1,150 @@
 <template>
   <div
     v-if="loading"
-    style="min-height: 70vh; display: grid; place-items: center"
+    class="container"
+    style="
+      min-height: 70vh;
+      min-width: 70vh;
+      display: grid;
+      place-items: center;
+    "
   >
     <div class="spinner-border" role="status">
       <span class="visually-hidden">Loading...</span>
     </div>
   </div>
 
-  <div v-else style="min-height: 60vh" class="row">
+  <div v-else class="row">
     <div v-if="this.status">
       <div class="">
         <div class="container">
-          <div class="row">
-            <div class="col">
-              <button disabled class="btn m-3 mb-1 btn-outline-primary">
-                Jumlah Surat: {{ numberSag }}
-              </button>
-              <button disabled class="btn m-3 mb-1 btn-outline-primary">
-                Masa Mula Lelong: {{ lelong_details.masamula_lelong }}
-              </button>
-              <button disabled class="btn m-3 mb-1 btn-outline-primary">
-                Masa Tamat Lelong: {{ lelong_details.masatamat_lelong }}
-              </button>
-            </div>
+          <div class="text-center">
+            <InlineMessage class="m-1" severity="info">
+              Jumlah Surat: {{ numberSag }}
+            </InlineMessage>
+            <InlineMessage class="m-1" severity="info">
+              Masa Mula Lelong: {{ lelong_details.masamula_lelong }}
+            </InlineMessage>
+            <InlineMessage class="m-1" severity="info">
+              Masa Tamat Lelong: {{ lelong_details.masatamat_lelong }}
+            </InlineMessage>
           </div>
           <div class="row clearfix">
-            <div
-              v-for="sag in sags"
-              :key="sag.id"
-              class="col-lg-4 col-md-4 col-sm-12"
-              style="margin: 10px 0px"
-            >
-              <div class="card product_item">
-                <div
-                  class="card-body mb-3"
-                  style="
-                    border: 1px solid rgba(0, 0, 0, 0.125);
-                    height: 200px;
-                    width: 100%;
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                  "
-                >
-                  -gambar marhun-
-                </div>
-                <div class="body mb-2">
-                  <div class="product_details">
-                    <h6 class="text-primary">
-                      {{ sag.norujukan }}
-                    </h6>
-                    <ul class="product_price list-unstyled">
-                      <!-- <li class="old_price">{{ sag.marhun }}</li> -->
-                      <li class="old_price">{{ sag.berat }}g</li>
-                      <li class="old_price">
-                        <b>RM{{ sag.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</b>
-                      </li>
-                    </ul>
-                    <div class="cp_img">
-                      <div class="hover">
-                        <a
-                          data-bs-toggle="modal"
-                          data-bs-target="#bidaModal"
-                          @click="clickModal(sag)"
-                          class="btn btn-primary btn-sm waves-effect"
-                          >Masuk <i class="zmdi zmdi-shopping-cart"></i
-                        ></a>
+            <div v-for="sag in sags" :key="sag.id" class="col-12 lg:col-4">
+              <!-- <div class="card card-body"> -->
+              <Card>
+                <template #content>
+                  <div class="">
+                    <div
+                      class="mb-3 product-image"
+                      style="border: 1px solid rgba(0, 0, 0, 0.125)"
+                    >
+                      -gambar marhun-
+                    </div>
+                    <div class="">
+                      <div class="product_details">
+                        <div class="grid text-center">
+                          <div class="col-12">
+                            <h6 class="text-primary">
+                              {{ sag.norujukan }}
+                            </h6>
+                          </div>
+                        <div class="col-12">
+                          <p>{{ sag.berat }}g</p>
+                        </div>
+                        </div>
+                        <!-- <ul class="product_price list-unstyled">
+                          <li class="old_price">{{ sag.berat }}g</li>
+                          <li class="old_price">
+                            <b
+                              >RM{{
+                                sag.hargaasas
+                                  ?.toString()
+                                  .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                              }}</b
+                            >
+                          </li>
+                        </ul> -->
+                        <div class="flex justify-content-between">
+                          <div class="hover">
+                            RM{{
+                              sag.hargaasas
+                                ?.toString()
+                                .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                            }}
+                            <a
+                              data-bs-toggle="modal"
+                              data-bs-target="#bidaModal"
+                              @click="clickModal(sag)"
+                              class="btn btn-primary btn-sm waves-effect"
+                              >Masuk <i class="zmdi zmdi-shopping-cart"></i
+                            ></a>
+                          </div>
+                        </div>
                       </div>
                     </div>
                   </div>
+                </template>
+              </Card>
+            </div>
+            <!-- </div> -->
+          </div>
+        </div>
+      </div>
+    </div>
+    <div v-else>
+      <div class="container">
+        <Message severity="info" :closable="false"
+          >Sila isi ruangan pilih cawangan di atas.
+        </Message>
+        <div class="grid justify-content-center">
+          <div class="col-12 p-3 lg:col-4">
+            <div class="card p-2">
+              <div class="field">
+                <div class="custom-skeleton">
+                  <div class="flex mb-3"></div>
+                  <Skeleton width="100%" height="150px"></Skeleton>
+                  <div class="flex justify-content-center mt-3">
+                    <Skeleton width="10rem"></Skeleton>
+                  </div>
+                  <div class="flex justify-content-between mt-3">
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 p-3 lg:col-4">
+            <div class="card p-2">
+              <div class="field">
+                <div class="custom-skeleton">
+                  <div class="flex mb-3"></div>
+                  <Skeleton width="100%" height="150px"></Skeleton>
+                  <div class="flex justify-content-center mt-3">
+                    <Skeleton width="10rem"></Skeleton>
+                  </div>
+                  <div class="flex justify-content-between mt-3">
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div class="col-12 p-3 lg:col-4">
+            <div class="card p-2">
+              <div class="field">
+                <div class="custom-skeleton">
+                  <div class="flex mb-3"></div>
+                  <Skeleton width="100%" height="150px"></Skeleton>
+                  <div class="flex justify-content-center mt-3">
+                    <Skeleton width="10rem"></Skeleton>
+                  </div>
+                  <div class="flex justify-content-between mt-3">
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                    <Skeleton width="4rem" height="2rem"></Skeleton>
+                  </div>
                 </div>
               </div>
             </div>
@@ -77,9 +152,6 @@
         </div>
       </div>
     </div>
-    <div v-else style="min-height: 60vh">
-      <h1 class="mt-5">Sila Isi Ruangan 'Pilih Cawangan' Di Atas.</h1>
-    </div>
   </div>
 
   <!-- modal marhun -->
@@ -139,12 +211,18 @@
                     <td>{{ marhun.marhun_desc }}</td>
                     <td>{{ marhun.karat }}</td>
                     <td>{{ marhun.berat }}g</td>
-                    <td>RM{{ marhun.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || '' }}</td>
+                    <td>
+                      RM{{
+                        marhun.hargaasas
+                          ?.toString()
+                          .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                      }}
+                    </td>
                   </tr>
                   <tr style="text-transform: uppercase">
-                    <th colspan="3">Jumlah</th>
-                    <th>{{ norujukan.berat }}g</th>
-                    <th class="disabled-bg"></th>
+                    <td colspan="3">Jumlah</td>
+                    <td>{{ norujukan.berat }}g</td>
+                    <td class="disabled-bg"></td>
                   </tr>
                 </tbody>
               </table>
@@ -162,7 +240,11 @@
                       class="form-control text-start justify-content-start"
                       disabled
                     >
-                      {{ norujukan.hargaasas?.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ''}}
+                      {{
+                        norujukan.hargaasas
+                          ?.toString()
+                          .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+                      }}
                     </div>
                   </div>
                 </div>
@@ -252,6 +334,7 @@ export default {
   },
   data() {
     return {
+      layout: "grid",
       status: false,
       v$: useVuelidate(),
       loading: false,
@@ -315,7 +398,7 @@ export default {
           } else {
             this.status = false;
             this.loading = false;
-            console.log(response.data.message);
+            // console.log(response.data.message);
           }
         })
         .catch((error) => {
@@ -387,8 +470,20 @@ export default {
 };
 </script>
 
+
 <style scoped>
 .disabled-bg {
   background-color: rgb(233, 236, 239);
 }
+
+::v-deep(.p-dataview .p-dataview-content) {
+  background: none;
+}
+
+.product-image {
+  min-height: 200px;
+  min-width: 200px;
+  max-height: 350px;
+  max-width: 350px;
+}
 </style>
\ No newline at end of file
diff --git a/src/components/list/TheList.vue b/src/components/list/TheList.vue
index 302dff5..f84ad2a 100644
--- a/src/components/list/TheList.vue
+++ b/src/components/list/TheList.vue
@@ -35,14 +35,14 @@
               <input type="hidden" />
             </select>
           </div>
-          <h6>
+          <!-- <h6>
             <button
               class="badge m-2 btn-secondary"
               @click="toggleReloadComponent"
             >
               Reload <i class="bi bi-arrow-down"></i>
             </button>
-          </h6>
+          </h6> -->
           <list-item
             v-bind:key="componentKey"
             v-bind:selectedCawangan="selectCawangan"