diff --git a/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml b/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml
index 45c1df0..59c3380 100644
--- a/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml
+++ b/Areas/Inventory/Views/ItemMovement/ItemMovementUser.cshtml
@@ -49,12 +49,45 @@
     </div>
 
     <div v-if="sortBy === 'item'">
-        <div v-for="(movements, itemId) in groupedByItem" :key="itemId" class="row card">
+        <div v-for="(group, itemId) in groupedByItem" :key="itemId" class="row card">
             <div class="card-header">
-                <h2>Item ID: {{ itemId }}</h2>
+                <h2>Item Name: {{ group.productName }}</h2>
             </div>
             <div class="card-body">
-                <table class="table table-bordered table-hover table-striped no-wrap item-table" :id="'itemTable_' + itemId" style="width:100%;border-style: solid; border-width: 1px"></table>
+                <div v-for="movement in group.movements" :key="movement.id" class="movement-row">
+                    <div class="row">
+                        <div class="col-md-12">
+                            <strong>{{ movement.toOther === 'On Delivery' ? 'Receive' : 'Return' }}:</strong>
+                            | <strong>Send Date:</strong> {{ movement.sendDate }}
+                            | <strong>Receive Date:</strong> {{ movement.receiveDate || 'Not arrive' }}
+                            | <strong>Status:</strong> {{ movement.latestStatus || movement.toOther }}
+                            | <button class="btn btn-info btn-sm" v-on:click="toggleDetails(movement.id)">More Details</button>
+                        </div>
+                    </div>
+
+                    <div v-if="movement.showDetails" class="details-row mt-2">
+                        <div class="row align-items-center">
+                            <div class="col-md-4 text-center">
+                                <i class="fas fa-warehouse fa-2x"></i>
+                                <p>Information: {{ movement.toOther }}</p>
+                                <p>User: {{ movement.toUser }}</p>
+                                <p>Station: {{ movement.toStationName }}</p>
+                                <p>Store: {{ movement.toStoreName }}</p>
+                            </div>
+                            <div class="col-md-4 text-center">
+                                <i class="fas fa-arrow-right fa-2x"></i>
+                            </div>
+                            <div class="col-md-4 text-center">
+                                <i class="fas fa-user fa-2x"></i>
+                                <p>Information: {{ movement.toOther }}</p>
+                                <p>User: {{ movement.lastUser }}</p>
+                                <p>Station: {{ movement.lastStationName }}</p>
+                                <p>Store: {{ movement.lastStoreName }}</p>
+                            </div>
+                        </div>
+                    </div>
+                    <hr>
+                </div>
             </div>
         </div>
     </div>
@@ -82,9 +115,12 @@
             groupedByItem() {
                 return this.itemMovements.reduce((acc, movement) => {
                     if (!acc[movement.itemId]) {
-                        acc[movement.itemId] = [];
+                        acc[movement.itemId] = {
+                            productName: movement.productName,
+                            movements: []
+                        };
                     }
-                    acc[movement.itemId].push(movement);
+                    acc[movement.itemId].movements.push({...movement, showDetails: false});
                     return acc;
                 }, {});
             },
@@ -95,7 +131,7 @@
         methods: {
             async fetchItemMovement() {
                 try {
-                        const response = await fetch('/InvMainAPI/ItemMovementUser', {
+                    const response = await fetch('/InvMainAPI/ItemMovementUser', {
                         method: 'POST',
                         headers: {
                             'Content-Type': 'application/json', 
@@ -105,7 +141,13 @@
                     if (!response.ok) {
                         throw new Error('Failed to fetch item movement');
                     }
-                    this.itemMovements = await response.json();
+                    const data = await response.json();
+
+                    // Ensure showDetails is reactive
+                    this.itemMovements = data.map(movement => ({
+                        ...movement,
+                        showDetails: false
+                    }));
 
                     if (this.itemMovementNotCompleteDatatable) {
                         this.itemMovementNotCompleteDatatable.clear().destroy();
@@ -124,10 +166,7 @@
             renderTables() {
                 if (this.sortBy === 'all') {
                     this.initAllTables();
-                } else {
-                    console.log(this.sortBy);
-                    this.initItemTables();
-                }
+                } 
             },
 
             initAllTables() {
@@ -194,41 +233,11 @@
                 this.loading = false;
             },
 
-            initItemTables() {
-                if (this.itemMovementNotCompleteDatatable) {
-                    this.itemMovementNotCompleteDatatable.clear().destroy();
+            toggleDetails(id) {
+                const movement = this.itemMovements.find(m => m.id === id);
+                if (movement) {
+                    movement.showDetails = !movement.showDetails;
                 }
-                if (this.itemMovementCompleteDatatable) {
-                    this.itemMovementCompleteDatatable.clear().destroy();
-                }
-                Object.values(this.itemDatatables).forEach(table => table.destroy());
-                this.itemDatatables = {};
-
-                Object.entries(this.groupedByItem).forEach(([itemId, movements]) => {
-                    const tableId = `#itemTable_${itemId}`;
-
-                    this.itemDatatables[itemId] = $(tableId).DataTable({
-                        data: movements,
-                        columns: this.getColumns(),
-                        responsive: true,
-                    });
-                });
-            },
-
-            getColumns() {
-                return [
-                    { title: "Unique Id", data: "id" },
-                    { title: "From User", data: "toUserName" },
-                    { title: "Last User", data: "lastUserName" },
-                    { title: "From Station", data: "toStationName" },
-                    { title: "From Store", data: "toStoreName" },
-                    { title: "Action", data: "action" },
-                    { title: "Start Status", data: "toOther" },
-                    { title: "Quantity", data: "quantity" },
-                    { title: "Send Date", data: "sendDate" },
-                    { title: "Note", data: "consignmentNote" },
-                    { title: "Remark", data: "remark" },
-                ];
             },
 
             resetForm() {
@@ -236,22 +245,7 @@
             },
 
             handleSorting() {
-                // Destroy existing DataTables before switching views
-                if (this.itemMovementNotCompleteDatatable) {
-                    this.itemMovementNotCompleteDatatable.clear().destroy();
-                    this.itemMovementNotCompleteDatatable = null;
-                }
-                if (this.itemMovementCompleteDatatable) {
-                    this.itemMovementCompleteDatatable.clear().destroy();
-                    this.itemMovementCompleteDatatable = null;
-                }
-                Object.values(this.itemDatatables).forEach(table => table.destroy());
-                this.itemDatatables = {};
-
-                // Delay rendering to ensure Vue updates the DOM
-                this.$nextTick(() => {
-                    this.renderTables();
-                });
+                    this.$nextTick(() => this.fetchItemMovement());
             },
 
 
diff --git a/Areas/Inventory/Views/ItemMovement/QrUser.cshtml b/Areas/Inventory/Views/ItemMovement/QrUser.cshtml
index f22ab6c..1e66044 100644
--- a/Areas/Inventory/Views/ItemMovement/QrUser.cshtml
+++ b/Areas/Inventory/Views/ItemMovement/QrUser.cshtml
@@ -576,7 +576,6 @@
 
                 async receiveReturnAPI() {
                     this.receiveReturn = 1;
-                    console.log("update");
                     this.updateItemMovement();
                 },
 
diff --git a/Controllers/API/Inventory/InvMainAPI.cs b/Controllers/API/Inventory/InvMainAPI.cs
index e10fb18..6e0d2a7 100644
--- a/Controllers/API/Inventory/InvMainAPI.cs
+++ b/Controllers/API/Inventory/InvMainAPI.cs
@@ -668,6 +668,8 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
                 }
 
                 var itemMovementUser = await _centralDbContext.ItemMovements
+                                        .Include(i => i.Item)
+                                        .ThenInclude(i => i.Product)
                                         .Include(i => i.FromStore)
                                         .Include(i => i.FromStation)
                                         .Include(i => i.FromUser)
@@ -684,6 +686,7 @@ namespace PSTW_CentralSystem.Controllers.API.Inventory
                         i.ToStation,
                         i.ToStore,
                         i.ToUser,
+                        ProductName = i.Item?.Product?.ProductName,
                         LastUserName = i.FromUser?.FullName,
                         LastStoreName = i.FromStore?.StoreName,
                         LastStationName = i.FromStation?.StationName,