diff --git a/src/components/modal/barcode/Barcode.vue b/src/components/modal/barcode/Barcode.vue
index 9f80a12..1120dcd 100644
--- a/src/components/modal/barcode/Barcode.vue
+++ b/src/components/modal/barcode/Barcode.vue
@@ -13,8 +13,9 @@
                         <span v-else>{{ Type + ':' + ID }}</span>
                     </v-flex>
                     <v-flex xs12 md6 sm6 v-if="QRCodeimg" class="WM-Align-R">
-                        <a v-if="Type != 'TestType'" :href="'https://www.cssd-doc.com/'+ShowLink" target="_blank"><img :src="QRCodeimg"
-                                                                                           class="WM-Width-150"></a>
+                        <a v-if="Type != 'TestType'" :href="'https://www.cssd-doc.com/'+ShowLink" target="_blank">
+                            <img :src="QRCodeimg" class="WM-Width-150">
+                        </a>
                         <img v-else :src="QRCodeimg" class="WM-Width-150">
                     </v-flex>
                 </v-layout>
diff --git a/src/components/modal/item/show.vue b/src/components/modal/item/show.vue
index 5e0113e..4df92a7 100644
--- a/src/components/modal/item/show.vue
+++ b/src/components/modal/item/show.vue
@@ -90,7 +90,7 @@
                     <v-layout row wrap class="align-center mt-3">
                         <v-flex xs12 md6 sm6 v-if="barcodeimg">
                             <img :src="barcodeimg" class="WM-Width-350"><br/>
-                            <span class="CSSD-font">Item ID : {{ data.id }}</span>
+                            <span class="CSSD-font">Item UDI : {{ data.udi }}</span>
                         </v-flex>
                         <v-flex xs12 md6 sm6 v-if="QRCodeimg" class="WM-Align-R">
                             <a :href="'https://www.cssd-doc.com/Show/Item/' + data.id + ''" target="_blank">
diff --git a/src/views/MyItem/List.vue b/src/views/MyItem/List.vue
index 199edd8..bda7f0d 100644
--- a/src/views/MyItem/List.vue
+++ b/src/views/MyItem/List.vue
@@ -31,17 +31,19 @@
                     <v-flex xs12 sm6 md6 lg2 xl3 class="WM-Align-R">
                         <v-tooltip bottom open-on-hover>
                             <template v-slot:activator="{ on, attrs }">
-                                <v-btn v-bind="attrs" v-on="on" color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2" @click="load()">
+                                <v-btn v-bind="attrs" v-on="on"
+                                       color="WM-Tooltip-Btn WM-Outline-Btn WM-Border WM-Margin-BT-0 WM-Border-Black mr-2"
+                                       @click="load()">
                                     <v-icon class="black--text caption">fas fa-search</v-icon>
                                 </v-btn>
                             </template>
                             <span>Filter</span>
                         </v-tooltip>
 
-<!--                        <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
-                            <v-icon class="black&#45;&#45;text mr-2 caption">fas fa-share-square</v-icon>
-                            <span class="black&#45;&#45;text">EXPORT</span>
-                        </v-btn>-->
+                        <!--                        <v-btn class="WM-Outline-Btn WM-Border mr-2 WM-Margin-BT-0 WM-Border-Black" style="padding: 10px 30px;">
+                                                    <v-icon class="black&#45;&#45;text mr-2 caption">fas fa-share-square</v-icon>
+                                                    <span class="black&#45;&#45;text">EXPORT</span>
+                                                </v-btn>-->
 
                         <router-link :to="{ name: 'AddItem' }">
                             <v-btn class="WM-CyanBlueGradient-BG WM-Margin-BT-0" style="padding:10px 30px">
@@ -207,16 +209,22 @@ export default {
         items() {
             return this.getMyItems;
         },
-        currentPage() {
-            return this.getCurrentPage;
+        currentPage: {
+            get() {
+                return this.getCurrentPage;
+            },
+            set(val) {
+                this.$store.commit('myItems/SET_MY_ITEMS_CURRENT_PAGE', val);
+                this.$store.dispatch('myItems/loadMyItem', val);
+            }
         },
         lastPage() {
             return this.getLastPage;
-        },
+        }
     },
     methods: {
         ...mapMutations('myItems', ["SET_FILTER"]),
-        ...mapMutations("modal", ["changeCurrentModal",'closeModal']),
+        ...mapMutations("modal", ["changeCurrentModal", 'closeModal']),
         ...mapActions('myItems', ['loadMyItem', 'removeItem', 'showItem', 'generateBarcode']),
         onFilterClick() {
             this.loadMyItem();
@@ -281,8 +289,8 @@ export default {
         getStatus(item) {
             if (item.status === 'pending') {
                 return [
-                    {status: 'approved', label: 'approve', color: 'cyan', font_color : 'white', icon: 'fa-check'},
-                    {status: 'rejected', label: 'reject', color: 'light-gray',font_color : 'black', icon: 'fa-close'},
+                    {status: 'approved', label: 'approve', color: 'cyan', font_color: 'white', icon: 'fa-check'},
+                    {status: 'rejected', label: 'reject', color: 'light-gray', font_color: 'black', icon: 'fa-close'},
                 ]
             } else {
                 const nextStatus = item.status === 'rejected' ? 'approved' : 'rejected'
@@ -307,10 +315,12 @@ export default {
             }
         }
     },
+
     watch: {
         currentPage(page) {
-            this.loadMyItem(page);
-        },
+            this.$store.dispatch('myItems/loadMyItem', page);
+        }
     }
+
 };
 </script>
\ No newline at end of file
diff --git a/src/views/MyPackage/List.vue b/src/views/MyPackage/List.vue
index 93bf5fa..beb6800 100644
--- a/src/views/MyPackage/List.vue
+++ b/src/views/MyPackage/List.vue
@@ -62,7 +62,7 @@
                                 <td class="title font-weight-light">{{ item.description }}</td>
                                 <td class="title font-weight-light">
                                     <span v-for="(i , index) in item.items" :key="index">
-                                        {{ i.id }} <span v-if="index !== item.items.length-1">,</span>
+                                        {{ i.udi }} <span v-if="index !== item.items.length-1">,</span>
                                     </span>
                                 </td>
                                 <td class="title font-weight-light">{{ item.status }}</td>
@@ -186,7 +186,7 @@ export default {
             {sortable: false, text: "Name", value: "name"},
             {sortable: false, text: "Hospital", value: "Hospital"},
             {sortable: false, text: "Description", value: "description"},
-            {sortable: false, text: "Items", value: "item"},
+            {sortable: false, text: "Items UDI", value: "item"},
             {sortable: false, text: "Status", value: "status"},
             {sortable: false, text: "Action", value: "action", align: "center", width: '20%'}
         ],
diff --git a/src/views/Package/List.vue b/src/views/Package/List.vue
index 70ef85b..125e93d 100644
--- a/src/views/Package/List.vue
+++ b/src/views/Package/List.vue
@@ -65,7 +65,7 @@
                                 <td class="title font-weight-light">{{ item.description }}</td>
                                 <td class="title font-weight-light">
                                     <span v-for="(i , index) in item.items" :key="index">
-                                        {{ i.id }} <span v-if="index !== item.items.length-1">,</span>
+                                        {{ i.udi }} <span v-if="index !== item.items.length-1">,</span>
                                     </span>
                                 </td>
                                 <td class="title font-weight-light">{{ item.status }}</td>
@@ -190,7 +190,7 @@ export default {
             {sortable: false, text: "Hospital", value: "Hospital"},
             {sortable: false, text: "Owner", value: "User"},
             {sortable: false, text: "Description", value: "description"},
-            {sortable: false, text: "Items", value: "items"},
+            {sortable: false, text: "Items UDI", value: "items"},
             {sortable: false, text: "Status", value: "status"},
             {sortable: false, text: "Action", value: "action", align: "center", width: '20%'}
         ],