diff --git a/package-lock.json b/package-lock.json
index 7e90ac2f..c422058b 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
                 "datatables.net": "^1.11.3",
                 "datatables.net-dt": "^1.11.3",
                 "jquery-confirm": "^3.3.4",
+                "v-viewer": "^3.0.11",
                 "viewerjs": "^1.11.2",
                 "vue": "^3.2.13",
                 "vue-loader": "^17.0.1"
@@ -5828,8 +5829,7 @@
         "node_modules/lodash": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-            "dev": true
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
         "node_modules/lodash.debounce": {
             "version": "4.0.8",
@@ -8804,6 +8804,18 @@
                 "uuid": "bin/uuid"
             }
         },
+        "node_modules/v-viewer": {
+            "version": "3.0.11",
+            "resolved": "https://registry.npmjs.org/v-viewer/-/v-viewer-3.0.11.tgz",
+            "integrity": "sha512-E8LOdAxhzuktt4HB3PswVCccQ1Q1sYHYnLsS6zaJISpb5EvmAFs5sYNfXnDLFxVb5DQ82v4ZlGxkYlseXwWRJw==",
+            "dependencies": {
+                "lodash": "^4.17.21",
+                "viewerjs": "^1.9.0"
+            },
+            "peerDependencies": {
+                "vue": "^3.0.0"
+            }
+        },
         "node_modules/vary": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
@@ -13881,8 +13893,7 @@
         "lodash": {
             "version": "4.17.21",
             "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz",
-            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==",
-            "dev": true
+            "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg=="
         },
         "lodash.debounce": {
             "version": "4.0.8",
@@ -16088,6 +16099,15 @@
             "integrity": "sha512-HjSDRw6gZE5JMggctHBcjVak08+KEVhSIiDzFnT9S9aegmp85S/bReBVTb4QTFaRNptJ9kuYaNhnbNEOkbKb/A==",
             "dev": true
         },
+        "v-viewer": {
+            "version": "3.0.11",
+            "resolved": "https://registry.npmjs.org/v-viewer/-/v-viewer-3.0.11.tgz",
+            "integrity": "sha512-E8LOdAxhzuktt4HB3PswVCccQ1Q1sYHYnLsS6zaJISpb5EvmAFs5sYNfXnDLFxVb5DQ82v4ZlGxkYlseXwWRJw==",
+            "requires": {
+                "lodash": "^4.17.21",
+                "viewerjs": "^1.9.0"
+            }
+        },
         "vary": {
             "version": "1.1.2",
             "resolved": "https://registry.npmjs.org/vary/-/vary-1.1.2.tgz",
diff --git a/package.json b/package.json
index 47b0a7de..aa79a2ca 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
         "datatables.net": "^1.11.3",
         "datatables.net-dt": "^1.11.3",
         "jquery-confirm": "^3.3.4",
+        "v-viewer": "^3.0.11",
         "viewerjs": "^1.11.2",
         "vue": "^3.2.13",
         "vue-loader": "^17.0.1"
diff --git a/resources/js/components/ByeComponent.vue b/resources/js/components/ByeComponent.vue
deleted file mode 100644
index b7d37d0b..00000000
--- a/resources/js/components/ByeComponent.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <bye-detail></bye-detail>
-</template>
-
-<script>
-import ByeDetail from "./ByeDetail.vue";
-export default {
-  components: {
-    "bye-detail": ByeDetail,
-  },
-};
-</script>
\ No newline at end of file
diff --git a/resources/js/components/ByeDetail.vue b/resources/js/components/ByeDetail.vue
deleted file mode 100644
index dd408ab6..00000000
--- a/resources/js/components/ByeDetail.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>this is bye component using vuejs</div>
-</template>
\ No newline at end of file
diff --git a/resources/js/components/HelloComponent.vue b/resources/js/components/HelloComponent.vue
deleted file mode 100644
index ba117d86..00000000
--- a/resources/js/components/HelloComponent.vue
+++ /dev/null
@@ -1,12 +0,0 @@
-<template>
-  <hello-detail></hello-detail>
-</template>
-
-<script>
-import HelloDetail from "./HelloDetail.vue";
-export default {
-  components: {
-    "hello-detail": HelloDetail,
-  },
-};
-</script>
\ No newline at end of file
diff --git a/resources/js/components/HelloDetail.vue b/resources/js/components/HelloDetail.vue
deleted file mode 100644
index c6bc85e2..00000000
--- a/resources/js/components/HelloDetail.vue
+++ /dev/null
@@ -1,3 +0,0 @@
-<template>
-  <div>this is hello detail component using vuejs</div>
-</template>
\ No newline at end of file
diff --git a/resources/js/components/pengurusangambar/marhun/DisplayLelongBid.vue.vue b/resources/js/components/pengurusangambar/marhun/DisplayLelongBid.vue.vue
index 5b320ab8..5cc7e457 100644
--- a/resources/js/components/pengurusangambar/marhun/DisplayLelongBid.vue.vue
+++ b/resources/js/components/pengurusangambar/marhun/DisplayLelongBid.vue.vue
@@ -1,24 +1,15 @@
 <template>
-    <div class="col-12">
-        Jumlah Item: {{ numberOfLelongBid }}
-    </div>
-    <div v-for="lelongBid in allLelongBid" v-bind:key="lelongBid" class="col-lg-4 my-1 text-center col-md-6 col-sm-12">
-        <div class="card">
-            <div class="card-body">
-                <div class="text-center" v-if="lelongBid.file_marhun_main != null">
-                    <MarhunImage v-bind:noRujukan="lelongBid.norujukan" v-bind:gambarId="lelongBid.file_marhun_main.id"/>
-                </div>
-                <div v-else>
-                    <div class="col-12">{{ lelongBid.norujukan }}</div>
-                    <div class="col-12 text-danger">Gambar Belum Di Muat Naik</div>
-                </div>
+    <div v-for="lelongBid in allLelongBid" v-bind:key="lelongBid">
+        <div class="item-wrapper">
+            <div class="item-main">
+                <MarhunImage v-bind:lelongBidProp="lelongBid" />
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from "vue";
+import { ref, onMounted } from "vue";
 import axios from "axios";
 import MarhunImage from "./MarhunImage.vue"
 
@@ -29,10 +20,6 @@ const props = defineProps({
 
 const allLelongBid = ref();
 
-const numberOfLelongBid = computed(
-    () => allLelongBid.length
-);
-
 function getListLelongBid() {
     axios.get("/listLelongBid", {
         params: {
@@ -47,4 +34,19 @@ function getListLelongBid() {
 onMounted(() => {
     getListLelongBid();
 });
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.item-wrapper {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, auto));
+    gap: 1rem;
+}
+
+.item-main {
+    border: 1px solid #0000001a;
+    margin: 10px;
+    border-start-start-radius: 8px;
+    border-start-end-radius: 8px;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/components/pengurusangambar/marhun/MarhunImage.vue b/resources/js/components/pengurusangambar/marhun/MarhunImage.vue
index c8a3d026..4b099503 100644
--- a/resources/js/components/pengurusangambar/marhun/MarhunImage.vue
+++ b/resources/js/components/pengurusangambar/marhun/MarhunImage.vue
@@ -1,12 +1,29 @@
 <template>
-    <div class="col-12">
-        file_marhun_id: {{ props.gambarId }}
+    <div class="text-center">
+        <div v-if="props.lelongBidProp.file_marhun_main == null" class="text-danger false-style image-style">
+            <span class="material-symbols-rounded icon-image">
+                cancel
+            </span>
+            <div>Gambar Belum Di Muat Naik</div>
+        </div>
+        <div v-else-if="stringGambar == 0" class="text-primary bg-light image-style">
+            <span class="material-symbols-rounded icon-image">
+                cycle
+            </span>
+            <div>No Image in Storage</div>
+        </div>
+        <div v-else class="images" v-viewer style="cursor:pointer;">
+            <img :src="stringGambarMarhun" class="image-style" alt="gambar-marhun">
+        </div>
+        <div class="my-2">{{ props.lelongBidProp.norujukan }}</div>
+        <div class="marhun-div-style">{{ props.lelongBidProp.marhun }}</div>
+        <div class="my-2">RM{{
+            props.lelongBidProp.nilaimarhun
+                ?.toString()
+                .replace(/\B(?=(\d{3})+(?!\d))/g, ",") || ""
+        }}</div>
+
     </div>
-    <div class="col-12">
-        {{ props.noRujukan }}
-    </div>
-    <div v-if="stringGambar == 0" class="text-center text-primary">No Image in Storage. Please cp from the server</div>
-    <img v-else :src="stringGambarMarhun" alt="gambar-marhun" width="180">
 </template>
 
 <script setup>
@@ -14,26 +31,52 @@ import { ref, onMounted } from 'vue'
 import axios from "axios";
 
 const props = defineProps({
-    gambarId: Number,
-    noRujukan: String
+    lelongBidProp: Object,
 })
 
 const stringGambar = ref();
 const stringGambarMarhun = ref();
 
 function getPhotoMarhun() {
-    axios.get("/showPhotoMarhun", {
-        params: {
-            filemarhun_id: props.gambarId,
-            norujukan: props.noRujukan,
-        },
-    }).then((response) => {
-        stringGambar.value = response.data;
-        stringGambarMarhun.value = "data:image/png;base64, " + stringGambar.value;
-    }).catch((error) => { console.log(error); });
+    if (props.lelongBidProp.file_marhun_main != null) {
+        axios.get("/showPhotoMarhun", {
+            params: {
+                filemarhun_id: props.lelongBidProp.file_marhun_main.id,
+                norujukan: props.lelongBidProp.norujukan,
+            },
+        }).then((response) => {
+            stringGambar.value = response.data;
+            stringGambarMarhun.value = "data:image/png;base64, " + stringGambar.value;
+        }).catch((error) => { console.log(error); });
+    }
 }
 
 onMounted(() => {
     getPhotoMarhun();
 });
-</script>
\ No newline at end of file
+</script>
+
+<style scoped>
+.image-style {
+    display: grid;
+    justify-content: center;
+    align-items: center;
+    width: 245px;
+    height: 137.812px;
+    border-start-start-radius: 7px;
+    border-start-end-radius: 7px;
+}
+
+.marhun-div-style {
+    max-width: 225px;
+    margin: 0.5rem;
+}
+
+.icon-image {
+    font-size: 50px;
+}
+
+.false-style {
+    background: #fdf3f3;
+}
+</style>
\ No newline at end of file
diff --git a/resources/js/components/pengurusangambar/marhun/SelectBatchLelong.vue b/resources/js/components/pengurusangambar/marhun/SelectBatchLelong.vue
index 9956806c..37ea1c88 100644
--- a/resources/js/components/pengurusangambar/marhun/SelectBatchLelong.vue
+++ b/resources/js/components/pengurusangambar/marhun/SelectBatchLelong.vue
@@ -11,7 +11,7 @@
             <option v-for="val in listLelong" :key="val" v-bind:value="val.id">{{ val.id }}</option>
         </select>
         <div class="mt-3">
-            <SelectCawangan v-if="pilihLelong != null" v-bind:key="componentKey" v-bind:selectedLelong="pilihLelong" />
+            <SelectCawangan v-if="pilihLelong != 'Batch Lelong'" v-bind:key="componentKey" v-bind:selectedLelong="pilihLelong" />
         </div>
     </div>
 </template>
@@ -22,7 +22,7 @@ import SelectCawangan from "./SelectCawangan.vue"
 import axios from "axios";
 
 const listLelong = ref();
-const pilihLelong = ref();
+const pilihLelong = ref('Batch Lelong');
 const componentKey = ref(0);
 const isLoadingGetListLelong = ref(false);
 
diff --git a/resources/js/components/pengurusangambar/marhun/SelectCawangan.vue b/resources/js/components/pengurusangambar/marhun/SelectCawangan.vue
index ad9f0d4d..97b3fc66 100644
--- a/resources/js/components/pengurusangambar/marhun/SelectCawangan.vue
+++ b/resources/js/components/pengurusangambar/marhun/SelectCawangan.vue
@@ -1,20 +1,12 @@
 <template>
-    <button @click="testLoading()" class="btn btn-primary">Invert isLoadingGetListCawangan</button>
-    <div v-if="isLoadingGetListCawangan" class="row justify-content-center">
-        <div class="spinner-border text-primary" role="status">
-            <span class="sr-only">Loading...</span>
-        </div>
-    </div>
-    <div v-else>
-        <label>Pilih Cawangan</label>
-        <select class="custom-select" @change="pilihCawangan($event)">
-            <option selected>Cawangan</option>
-            <option v-for="val in listCawangan" :key="val" v-bind:value="val.caw_id">{{ val.caw_name }}</option>
-        </select>
-        <div class="mt-3 row justify-content-center">
-            <DisplayLelongBid v-if="pilihIdCawangan != null" v-bind:key="componentKeySecond"
-                v-bind:selectedIdCawangan="pilihIdCawangan" v-bind:selectedBatchLelong="props.selectedLelong" />
-        </div>
+    <label>Pilih Cawangan</label>
+    <select class="custom-select" @change="pilihCawangan($event)">
+        <option selected>Cawangan</option>
+        <option v-for="val in listCawangan" :key="val" v-bind:value="val.caw_id">{{ val.caw_name }}</option>
+    </select>
+    <div class="mt-3 row justify-content-center">
+        <DisplayLelongBid v-if="pilihIdCawangan != 'Cawangan'" v-bind:key="componentKeySecond"
+            v-bind:selectedIdCawangan="pilihIdCawangan" v-bind:selectedBatchLelong="props.selectedLelong" />
     </div>
 </template>
 
@@ -28,16 +20,10 @@ const props = defineProps({
 })
 
 const listCawangan = ref();
-const pilihIdCawangan = ref();
+const pilihIdCawangan = ref('Cawangan');
 const componentKeySecond = ref(0);
-const isLoadingGetListCawangan = ref(false);
-
-function testLoading() {
-    isLoadingGetListCawangan.value = !isLoadingGetListCawangan.value;
-}
 
 function getListCawangan() {
-    isLoadingGetListCawangan.value = true;
     axios.get("/listCawangan", {
         params: {
             lelong_id: props.selectedLelong,
@@ -45,7 +31,6 @@ function getListCawangan() {
     }).then((response) => {
         listCawangan.value = response.data;
     }).catch((error) => { alert(error); });
-    isLoadingGetListCawangan.value = false;
 }
 
 function pilihCawangan(e) {
@@ -56,5 +41,5 @@ function pilihCawangan(e) {
 
 onMounted(() => {
     getListCawangan();
-})
+});
 </script>
diff --git a/resources/js/vue-app.js b/resources/js/vue-app.js
index 9f658763..ed621403 100644
--- a/resources/js/vue-app.js
+++ b/resources/js/vue-app.js
@@ -1,14 +1,11 @@
 import { createApp } from 'vue'
 import './axios'
+import 'viewerjs/dist/viewer.css'
+import VueViewer from 'v-viewer'
 
-// import HelloComponent from "./components/HelloComponent.vue"
-// import ByeComponent from "./components/ByeComponent.vue"
 import SelectBatchLelong from "./components/pengurusangambar/marhun/SelectBatchLelong.vue"
 
-// const appHelloComponent = createApp(HelloComponent);
-// const appByeComponent = createApp(ByeComponent);
 const appSelectBatchLelong = createApp(SelectBatchLelong);
+appSelectBatchLelong.use(VueViewer);
 
-// appHelloComponent.mount("#appHelloComponent");
-// appByeComponent.mount("#appByeComponent");
 appSelectBatchLelong.mount("#appSelectBatchLelong");
\ No newline at end of file