diff --git a/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml b/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml
index a76270b..463cfb5 100644
--- a/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml
+++ b/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml
@@ -136,12 +136,12 @@
                             </h4>
                         </div>
 
-
-
                         <div v-show="detailsVisible[movement.id]" class="col-md-12 mt-2">
                             <div class="row">
                                 <div class="col-md-4 text-center">
-                                    <i class="fas fa-warehouse fa-2x"></i>
+                                    <!-- Conditionally render Start Icon -->
+                                    <i v-if="movement.toOther !== 'On Delivery'" class="fas fa-user fa-2x"></i>
+                                    <i v-else class="fas fa-warehouse fa-2x"></i>
                                     <p><strong>Start</strong></p>
                                     <p><strong>User:</strong> {{ movement.toUserName }}</p>
                                     <p><strong>Station:</strong> {{ movement.toStationName }}</p>
@@ -151,16 +151,29 @@
                                     <p></p>
                                     <i class="fas fa-arrow-right fa-2x"></i>
                                     <p>{{ movement.latestStatus || movement.toOther }}</p>
+                                    <p>
+                                        <button class="btn btn-info btn-sm ms-auto" v-on:click="remark(movement.remark)" v-if="movement.toOther !== 'On Delivery'">
+                                            Remark
+                                        </button>
+                                    </p>
+                                    <p>
+                                        <button class="btn btn-info btn-sm ms-auto" v-on:click="consignmentNote(movement.consignmentNote)" v-if="movement.toOther !== 'On Delivery'">
+                                            Consignment Note
+                                        </button>
+                                    </p>
                                 </div>
                                 <div class="col-md-4 text-center">
-                                    <i class="fas fa-user fa-2x"></i>
-                                    <p><strong>End</strong> {{ movement.latestStatus }}</p>
+                                    <!-- Conditionally render End Icon -->
+                                    <i v-if="movement.toOther !== 'On Delivery'" class="fas fa-warehouse fa-2x"></i>
+                                    <i v-else class="fas fa-user fa-2x"></i>
+                                    <p><strong>End</strong></p>
                                     <p><strong>User:</strong> {{ movement.lastUserName }}</p>
                                     <p><strong>Station:</strong> {{ movement.lastStationName }}</p>
                                     <p><strong>Store:</strong> {{ movement.lastStoreName }}</p>
                                 </div>
                             </div>
                         </div>
+
                     </div>
                 </div>
 
@@ -197,9 +210,9 @@
                             </div>
 
                             <!-- Status -->
-                            <div class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:150px; min-width:150px;">
+                            <div class="d-flex flex-wrap align-items-center gap-2 flex-grow-1" style="max-width:160px; min-width:160px;">
                                 <h4 class="fixed-labelStatus m-0 text-nowrap">Status:</h4>
-                                <span class="fixed-value text-truncate" style="max-width:120px;">{{ movement.latestStatus || movement.toOther }}</span>
+                                <span class="fixed-value text-truncate" style="max-width:90px;">{{ movement.latestStatus || movement.toOther }}</span>
                             </div>
 
                             <!-- More Details Button -->
@@ -218,7 +231,9 @@
                         <div v-show="detailsVisible[movement.id]" class="col-md-12 mt-2">
                             <div class="row">
                                 <div class="col-md-4 text-center">
-                                    <i class="fas fa-warehouse fa-2x"></i>
+                                    <!-- Conditionally render Start Icon -->
+                                    <i v-if="movement.toOther !== 'On Delivery'" class="fas fa-user fa-2x"></i>
+                                    <i v-else class="fas fa-warehouse fa-2x"></i>
                                     <p><strong>Start</strong></p>
                                     <p><strong>User:</strong> {{ movement.toUserName }}</p>
                                     <p><strong>Station:</strong> {{ movement.toStationName }}</p>
@@ -228,9 +243,21 @@
                                     <p></p>
                                     <i class="fas fa-arrow-right fa-2x"></i>
                                     <p>{{ movement.latestStatus || movement.toOther }}</p>
+                                    <p>
+                                        <button class="btn btn-info btn-sm ms-auto" v-on:click="remark(movement.remark)" v-if="movement.toOther !== 'On Delivery'">
+                                            Remark
+                                        </button>
+                                    </p>
+                                    <p>
+                                        <button class="btn btn-info btn-sm ms-auto" v-on:click="consignmentNote(movement.consignmentNote)" v-if="movement.toOther !== 'On Delivery'">
+                                            Consignment Note
+                                        </button>
+                                    </p>
                                 </div>
                                 <div class="col-md-4 text-center">
-                                    <i class="fas fa-user fa-2x"></i>
+                                    <!-- Conditionally render End Icon -->
+                                    <i v-if="movement.toOther !== 'On Delivery'" class="fas fa-warehouse fa-2x"></i>
+                                    <i v-else class="fas fa-user fa-2x"></i>
                                     <p><strong>End</strong></p>
                                     <p><strong>User:</strong> {{ movement.lastUserName }}</p>
                                     <p><strong>Station:</strong> {{ movement.lastStationName }}</p>
@@ -238,12 +265,44 @@
                                 </div>
                             </div>
                         </div>
+
                     </div>
                 </div>
 
             </div>
         </div>
 
+        <div class="modal fade" id="remarkModal" tabindex="-1" aria-labelledby="remarkModalLabel" aria-hidden="true">
+            <div class="modal-dialog">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="remarkModalLabel">Remark</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body" id="remarkContent">
+                        <!-- Remark Content Here -->
+                    </div>
+                    <div class="modal-footer">
+                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="modal fade" id="consignmentModal" tabindex="-1" aria-labelledby="consignmentModalLabel" aria-hidden="true">
+            <div class="modal-dialog modal-xl">
+                <div class="modal-content">
+                    <div class="modal-header">
+                        <h5 class="modal-title" id="consignmentModalLabel">Consignment Note</h5>
+                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
+                    </div>
+                    <div class="modal-body text-center">
+                        <img v-if="/\.(jpeg|jpg|png|gif)$/i.test(consignmentNoteUrl)" :src="consignmentNoteUrl" class="img-fluid" alt="Consignment Note Image">
+                        <iframe v-else-if="/\.pdf$/i.test(consignmentNoteUrl)" :src="consignmentNoteUrl" style="width:100%; height: 80vh;"></iframe> 
+                        <a v-else class="btn btn-primary">There's no Folder or Picture</a>
+                    </div>
+                </div>
+            </div>
+        </div>
 
     </div>
 
@@ -268,6 +327,7 @@
                     historyVisible: {},
                     detailsVisible: {},
                     categoryVisible: {},
+                    consignmentNoteUrl: "",
                 };
             },
             computed: {
@@ -296,10 +356,32 @@
                 },
             },
             mounted() {
-                console.log("Vue app mounted!");
                 this.fetchItemMovement();
             },
             methods: {
+                remark(remark) {
+                    document.getElementById("remarkContent").innerText = remark || "No remark message provide.";
+                    let modal = new bootstrap.Modal(document.getElementById("remarkModal"));
+                    modal.show();
+                },
+
+                consignmentNote(consignmentNote) {
+                    if (!consignmentNote) {
+                        this.consignmentNoteUrl = "No consignment note available.";
+                        new bootstrap.Modal(document.getElementById('consignmentModal')).show();
+                        return;
+                    }
+
+                    // Pastikan URL betul
+                    this.consignmentNoteUrl = consignmentNote;
+
+                    // Tunggu Vue update sebelum buka modal
+                    this.$nextTick(() => {
+                        new bootstrap.Modal(document.getElementById('consignmentModal')).show();
+                    });
+                },
+
+                
                 async fetchItemMovement() {
                     try {
                         const response = await fetch("/InvMainAPI/ItemMovementUser", {
diff --git a/Areas/Inventory/Views/ItemMovement/QrUser.cshtml b/Areas/Inventory/Views/ItemMovement/QrUser.cshtml
index fd32e6d..57c2e8f 100644
--- a/Areas/Inventory/Views/ItemMovement/QrUser.cshtml
+++ b/Areas/Inventory/Views/ItemMovement/QrUser.cshtml
@@ -516,11 +516,11 @@
                             method: 'POST',
                         }
                         );
-
+                         
                         if (response.ok) {
                             this.thisItem = await response.json();
 
-                            if (this.thisItem.movementId != null && this.thisItem.toOther === "On Delivery" && this.thisItem.latestStatus == null && this.thisItem.currentUserId == this.currentUserId && this.movementComplete == 0) {
+                            if (this.thisItem.movementId != null && this.thisItem.toOther === "On Delivery" && this.thisItem.latestStatus == null && this.thisItem.currentUserId == this.currentUserId && this.thisItem.movementComplete == 0) {
                                 this.displayStatus = "arrived";
                             } else if (this.thisItem.movementId != null && this.thisItem.toOther === "On Delivery" && this.thisItem.latestStatus != null && this.thisItem.currentUserId == this.currentUserId && this.thisItem.latestStatus != "Ready To Deploy") {
                                 this.displayStatus = "return";