diff --git a/Areas/Report/Views/Reporting/InventoryReport.cshtml b/Areas/Report/Views/Reporting/InventoryReport.cshtml
index 53b50ee..d513fc8 100644
--- a/Areas/Report/Views/Reporting/InventoryReport.cshtml
+++ b/Areas/Report/Views/Reporting/InventoryReport.cshtml
@@ -101,13 +101,32 @@
         <hr />
         <div class="card-body">
             <div v-if="reportData">
-                <div class="row justify-content-center">
+                <div class="row">
                     <div v-if="formResponse">
                         <div class="col-3">
                             <h4>User List</h4>
                             <multiselect v-model="selectedUser" :options="formResponse.userItemBalance" :multiple="false" placeholder="Select User" track-by="userId" label="userFullName"></multiselect>
-                            <div class=""><button class="btn btn-danger" v-on:click="selectedUser = []">Clear</button></div>
-                            {{ selectedUser }}
+                            <div class=""><button class="btn btn-danger" v-on:click="console.log(selectedUser);selectedUser = {}; console.log(selectedUser)">Clear</button></div>
+                        </div>
+                        <div class="col-9" v-if="selectedUser">
+                            <table id="userItemsTable" v-if="selectedUser.userFullName" class="display">
+                                <thead>
+                                    <tr>
+                                        <th>Item Name</th>
+                                        <th>Item Price</th>
+                                    </tr>
+                                </thead>
+                                <tbody>
+                                    <tr v-for="(item, index) in selectedUser.items" :key="index">
+                                        <td>{{item.itemName}}</td>
+                                        <td>{{item.itemPrice}}</td>
+                                    </tr>
+                                    <tr>
+                                        <td>Total</td>
+                                        <td>{{selectedUser.totalItemPrice}}</td>
+                                    </tr>
+                                </tbody>
+                            </table>
                         </div>
                     </div>
                 </div>
@@ -159,7 +178,8 @@
                 usersInfo: [],
                 submitBody: null,
                 formResponse: null,
-                selectedUser: [],
+                selectedUser: {},
+                userItemsTable:null,
             }
         },
         mounted() {
@@ -174,7 +194,15 @@
             },
             selectedCategory() {
                 this.filterProducts();
+            },
+        },
+        computed: {
+          userItemsTableCompt() {
+            if (!this.selectedUser || !this.$refs.userItemsTable) {
+              return null;
             }
+            return $(this.$refs.userItemsTable).DataTable();
+          }
         },
         methods: {
             async generateReport(){
@@ -334,7 +362,24 @@
                         selectedCategory.includes(product.category)
                     );
                 }
-            }   
+            },
+            initUserItemsTable() {
+                this.$nextTick(() => {
+                    if (this.$refs.userItemsTable) {
+                        $(this.$refs.userItemsTable).DataTable().clear().destroy();
+                    }
+                    this.userItemsTable = $('#userItemsTable').DataTable();
+                });
+            },
+            // selectedUserFunc() {
+            //     if (this.userItemsTable) {
+            //         this.userItemsTable.destroy();
+            //     }
+            //     if (this.selectedUser.length > 0) {
+            //         console.log("YES")
+            //         this.initUserItemsTable();
+            //     }
+            // }
         },
     });
 </script>