diff --git a/resources/js/vue/views/Item/AddEdit.vue b/resources/js/vue/views/Item/AddEdit.vue
index 1df9a59f..c19fb2b2 100644
--- a/resources/js/vue/views/Item/AddEdit.vue
+++ b/resources/js/vue/views/Item/AddEdit.vue
@@ -1,36 +1,51 @@
 <template>
   <v-form ref="form">
     <v-container grid-list-xs fluid>
-      <material-card color="black" title="Add Item">
+      <material-card color="black" title="Add Instrument">
         <v-layout align-center justify-center wrap class="px-5 my-3">
-          <v-flex xs12 sm4 md4>
+          <v-flex xs12 sm6 md3>
             <v-text-field
               name="name"
               label="Name"
               color="black"
               v-model="formData.name"
-              :rules="[rules.required, rules.counter]"
+              :rules="[rules.required]"
               class="pa-2"
             ></v-text-field>
           </v-flex>
-          <v-flex xs12 sm4 md4>
-            <v-select
-              :items="result"
-              label="Result"
-              name="result"
-              v-model="formData.result"
-              single-line
+          <v-flex xs12 sm6 md3>
+            <v-text-field
+              name="id"
+              label="ID"
+              color="black"
+              v-model="formData.id"
               :rules="[rules.required]"
               class="pa-2"
+            ></v-text-field>
+          </v-flex>
+          <v-flex xs12 sm6 md3>
+            <v-text-field
+              name="size"
+              label="Size"
               color="black"
-            ></v-select>
+              v-model="formData.size"
+              class="pa-2"
+            ></v-text-field>
+          </v-flex>
+          <v-flex xs12 sm6 md3>
+            <v-text-field
+              name="specific"
+              label="Specific"
+              color="black"
+              v-model="formData.specific"
+              class="pa-2"
+            ></v-text-field>
           </v-flex>
         </v-layout>
         <v-layout align-center justify-center wrap class="px-5 mb-3">
           <v-flex xs12 sm12 md12>
             <v-textarea
               color="black"
-              :rules="[rules.counter]"
               v-model="formData.description"
               class="pa-2"
               name="address"
diff --git a/resources/js/vue/views/Item/List.vue b/resources/js/vue/views/Item/List.vue
index 1a326f60..ae272919 100644
--- a/resources/js/vue/views/Item/List.vue
+++ b/resources/js/vue/views/Item/List.vue
@@ -1,7 +1,7 @@
 <template>
     <div class>
         <v-container fluid>
-            <material-card class color="black" title="All Items" text>
+            <material-card class color="black" title="All Instrument" text>
                 <v-layout align-center wrap class="my-3">
                     <v-flex xs12 md3 sm3>
                         <v-text-field
diff --git a/resources/js/vue/views/Pack/AddEdit.vue b/resources/js/vue/views/Pack/AddEdit.vue
new file mode 100644
index 00000000..40fdfd49
--- /dev/null
+++ b/resources/js/vue/views/Pack/AddEdit.vue
@@ -0,0 +1,138 @@
+<template>
+	<v-form ref="form">
+		<v-container grid-list-xs fluid>
+			<material-card color="black" title="Add Package">
+				<v-layout align-center justify-center wrap class="px-5 my-3">
+					<v-flex xs12 sm6 md4>
+						<v-text-field
+							name="name"
+							label="Name"
+							color="black"
+							v-model="formData.name"
+							:rules="[rules.required, rules.counter]"
+							class="pa-2"
+						></v-text-field>
+					</v-flex>
+					<v-flex xs12 sm6 md4>
+						<v-text-field
+							name="sterilizerId"
+							label="Sterilizer ID"
+							color="black"
+							v-model="formData.sterilizerId"
+							class="pa-2"
+						></v-text-field>
+					</v-flex>
+					<v-flex xs12 sm6 md4>
+						<v-text-field
+							name="cycle_number"
+							label="Cycle Number"
+							color="black"
+							v-model="formData.cycle_number"
+							class="pa-2"
+						></v-text-field>
+					</v-flex>
+					<v-flex xs12 sm6 md4>
+						<v-text-field
+							name="department"
+							label="Department"
+							color="black"
+							v-model="formData.department"
+							class="pa-2"
+						></v-text-field>
+					</v-flex>
+				</v-layout>
+				<v-layout align-center justify-center wrap class="px-5 mb-3">
+					<v-flex xs12 sm12 md12>
+						<v-textarea color="black" v-model="formData.description" class="pa-2" name="address">
+							<template v-slot:label>
+								<div>description</div>
+							</template>
+						</v-textarea>
+					</v-flex>
+				</v-layout>
+				<v-layout row wrap justify-center align-center>
+					<v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
+						<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
+							<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+							<span class="white--text">SAVE</span>
+						</v-btn>
+					</v-flex>
+					<v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
+						<router-link :to="{name: 'AllPackage'}">
+							<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+								<v-icon class="black--text">keyboard_arrow_left</v-icon>
+								<span class="black--text">Back</span>
+							</v-btn>
+						</router-link>
+					</v-flex>
+				</v-layout>
+			</material-card>
+		</v-container>
+	</v-form>
+</template>
+
+<script>
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
+import { mapMutations } from "vuex";
+export default {
+	data() {
+		return {
+			formData: {
+				name: "",
+				result: "",
+				description: "",
+				items: []
+			},
+			items: [],
+			result: ["Pass", "Fail"],
+			rules: {
+				required: value => !!value || "Required.",
+				counter: value =>
+					!value ||
+					value.length == 0 ||
+					value.length >= 5 ||
+					"Min 5 characters"
+			}
+		};
+	},
+	created() {
+		if (this.$route.params.package) {
+			this.load(this.$route.params.package);
+		}
+		this.loadItems();
+	},
+	methods: {
+		async load(id) {
+			const result = await ApiService.get(urls.editPackage(id));
+			if (result.status == 200) {
+				this.formData = result.data.data;
+			}
+		},
+		async loadItems() {
+			const result = await ApiService.get(urls.listAllItem());
+			if (result.status == 200) {
+				this.items = result.data.data;
+			}
+		},
+		async submitForm() {
+			let result;
+			if (this.$route.params.package) {
+				result = await ApiService.put(
+					urls.updatePackage(this.$route.params.package),
+					this.formData
+				);
+			} else {
+				result = await ApiService.post(
+					urls.storePackage,
+					this.formData
+				);
+			}
+
+			if (result && result.status == 200) {
+				this.$router.push({ name: "AllPackage" });
+			}
+		}
+	}
+};
+</script>
\ No newline at end of file
diff --git a/resources/js/vue/views/Pack/List.vue b/resources/js/vue/views/Pack/List.vue
new file mode 100644
index 00000000..ecee6854
--- /dev/null
+++ b/resources/js/vue/views/Pack/List.vue
@@ -0,0 +1,243 @@
+<template>
+    <div class>
+        <v-container fluid>
+            <material-card class color="black" title="All Labels" text>
+                <v-layout align-center wrap class="my-3">
+                    <v-flex xs12 md3 sm3>
+                        <v-text-field
+                            class="pa-2"
+                            v-model="filter.name"
+                            label="Name"
+                            color="black"
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex xs12 md3 sm3>
+                        <v-autocomplete
+                            class="pa-2"
+                            v-model="filter.result"
+                            label="Result"
+                            color="black"
+                            :items="result"
+                        ></v-autocomplete>
+                    </v-flex>
+                    <v-flex xs12 md3 sm3>
+                        <v-text-field
+                            class="pa-2"
+                            v-model="filter.unique_id"
+                            label="uniqueID"
+                            color="black"
+                        ></v-text-field>
+                    </v-flex>
+                    <v-flex class xs12 md2 sm3>
+                        <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="load()">
+                            <v-icon class="white--text mr-2 caption">fas fa-search</v-icon>
+                            <span class="white--text">Filter</span>
+                        </v-btn>
+                    </v-flex>
+                    <v-spacer></v-spacer>
+                    <v-flex xs12 md2 sm2 class="text-xs-right">
+                        <router-link :to="{name: 'AddPackage'}">
+                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+                                <v-icon class="black--text mr-2 caption">fas fa-plus</v-icon>
+                                <span class="black--text">Add</span>
+                            </v-btn>
+                        </router-link>
+                    </v-flex>
+                </v-layout>
+                <v-divider></v-divider>
+                <v-layout align-center wrap class="my-3">
+                    <v-flex md12>
+                        <v-data-table :headers="headers" :items="items" hide-actions>
+                            <template slot="headerCell" slot-scope="{ header }">
+                                <span
+                                    class="subheading font-weight-light text-white text--darken-3"
+                                    v-text="header.text"
+                                />
+                            </template>
+                            <template slot="items" slot-scope="{ item }">
+                                <td class="headline font-weight-light">{{ item.unique_id }}</td>
+                                <td class="title font-weight-light">{{ item.name }}</td>
+                                <td class="title font-weight-light">{{ item.result }}</td>
+                                <td class="title font-weight-light">{{ item.created_at }}</td>
+                                <td class="text-xs-right">
+                                    <v-btn color="cyan" class="mr-2" @click="show(item.id)">
+                                        <v-icon class="white--text mr-1 caption">fas fa-eye</v-icon>
+                                        <span>Show</span>
+                                    </v-btn>
+                                    <router-link
+                                        v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+                                        :to="{name: 'EditPackage', params: {package: item.id}}"
+                                    >
+                                        <v-btn color="orange" class="mr-2">
+                                            <v-icon class="white--text mr-1 caption">fas fa-pen</v-icon>
+                                            <span>Edit</span>
+                                        </v-btn>
+                                    </router-link>
+                                    <v-btn
+                                        color="pink"
+                                        class="WM-ActionButton"
+                                        @click="remove(item.id)"
+                                        v-if="$hasRole('Admin') || item.user_id == $store.state.user.id"
+                                    >
+                                        <v-icon class="white--text mr-2 caption">fas fa-times</v-icon>
+                                        <span>Remove</span>
+                                    </v-btn>
+                                    <v-btn color="orange darken-1" @click="generateBarcode(item.unique_id)">
+                                        <v-icon class="white--text mr-1 caption">fas fa-barcode</v-icon>
+                                        <span>Generate Barcode</span>
+                                    </v-btn>
+                                </td>
+                            </template>
+                        </v-data-table>
+                    </v-flex>
+                </v-layout>
+                <v-divider></v-divider>
+                <div class="text-xs-center" v-if="lastPage > 1">
+                    <v-pagination v-model="currentPage" :length="lastPage" :total-visible="6"></v-pagination>
+                </div>
+                <v-layout row wrap align-center justify-center class="mt-3">
+                    <router-link to="/dashboard">
+                        <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black ml-5">
+                            <v-icon class="black--text mr-2 caption">fas fa-chevron-left</v-icon>
+                            <span class="black--text">Back</span>
+                        </v-btn>
+                    </router-link>
+                </v-layout>
+            </material-card>
+        </v-container>
+    </div>
+</template>
+
+<script>
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
+import { mapMutations, mapGetters } from "vuex";
+export default {
+    data: () => ({
+        headers: [
+            {
+                sortable: true,
+                text: "Unique ID",
+                value: "Unique ID"
+            },
+            {
+                sortable: true,
+                text: "Name",
+                value: "name"
+            },
+            {
+                sortable: false,
+                text: "Result",
+                value: "result"
+            },
+            {
+                sortable: false,
+                text: "Date",
+                value: "date"
+            },
+            {
+                sortable: false,
+                text: "Action",
+                value: "action",
+                align: "right"
+            }
+        ],
+        filter: {
+            unique_id: '',
+            name: '',
+            result: '',
+        },
+        result: ['Pass', 'Fail'],
+        items: [],
+        currentPage: 1,
+        lastPage: 1,
+    }),
+    created() {
+        this.load();
+    },
+    methods: {
+        ...mapMutations("modal", ["changeCurrentModal"]),
+        async load(page = 1) {
+            let filter = '?';
+            for (const key in this.filter) {
+                if (this.filter.hasOwnProperty(key)) {
+                    filter += `${key}=${this.filter[key]}&`;
+                }
+            }
+            filter += (page) ? `page=${page}` : `page=1`;
+            const result = await ApiService.get(
+                urls.listPackage(filter)
+            );
+            if (result && result.status == 200) {
+                this.items = result.data.data.data;
+                this.currentPage = result.data.data.current_page;
+                this.lastPage = result.data.data.last_page;
+            }
+        },
+        async show(testResultId) {
+            const result = await ApiService.get(
+                urls.showPackage(testResultId)
+            );
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-package-show",
+                    properties: { result }
+                });
+            }
+        },
+        async remove(testResultId) {
+            const result = await ApiService.delete(
+                urls.removePackage(testResultId)
+            );
+            if (result && result.status == 200) {
+                for (const key in this.items) {
+                    if (
+                        this.items.hasOwnProperty(key) &&
+                        this.items[key].id == testResultId
+                    ) {
+                        this.items.splice(key, 1);
+                    }
+                }
+            }
+        },
+        async generateBarcode(code) {
+            const result = await ApiService.post(urls.Barcode(code));
+            if (result && result.status == 200) {
+                this.changeCurrentModal({
+                    modal: "modal-barcode-barcode",
+                    properties: { result }
+                });
+            }
+        }
+    },
+    computed: {
+        ...mapGetters("modal", ["getModalResult"])
+    },
+    watch: {
+        currentPage(page) {
+            this.load(page);
+        },
+        getModalResult(testResult) {
+            for (const key in this.items) {
+                if (
+                    this.items.hasOwnProperty(key) &&
+                    this.items[key].id == testResult.id
+                ) {
+                    this.items[key] = testResult;
+                }
+            }
+        }
+    }
+};
+</script>
+<style>
+.v-btn--floating {
+    padding: 0!important;
+}
+.theme--light.v-btn.v-btn--flat {
+    color: rgba(0,0,0,.87)!important;
+}
+.v-btn--floating, .v-btn--icon:before {
+    border-radius: 50%!important;
+}
+</style>
diff --git a/resources/js/vue/views/Package/AddEdit.vue b/resources/js/vue/views/Package/AddEdit.vue
index cf7a5aff..86d1ebd3 100644
--- a/resources/js/vue/views/Package/AddEdit.vue
+++ b/resources/js/vue/views/Package/AddEdit.vue
@@ -1,66 +1,57 @@
 <template>
-    <v-form ref="form">
-        <v-container grid-list-xs fluid>
-            <material-card color="black" title="Add Package">
-                <v-layout align-center justify-center wrap class="px-5 my-3">
-                    <v-flex xs12 sm4 md4>
-                        <v-text-field
-                            name="name"
-                            label="Name"
-                            color="black"
-                            v-model="formData.name"
-                            :rules="[rules.required, rules.counter]"
-                            class="pa-2"
-                        ></v-text-field>
-                    </v-flex>
-                    <v-flex xs12 sm4 md4>
-                        <v-select
-                            :items="result"
-                            label="Result"
-                            name="result"
-                            v-model="formData.result"
-                            single-line
-                            :rules="[rules.required]"
-                            class="pa-2"
-                            color="black"
-                        ></v-select>
-                    </v-flex>
-                </v-layout>
-                <v-layout align-center justify-center wrap class="px-5 mb-3">
-                    <v-flex xs12 sm12 md12>
-                        <v-autocomplete
-                            multiple
-                            :items="items"
-                            item-text="name"
-                            v-model="formData.items"
-                            item-value="id"
-                            label="Select Items For Package"
-                        ></v-autocomplete>
-                    </v-flex>
-                </v-layout>
-                <v-layout row wrap justify-center align-center>
-                    <v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
-                        <v-btn
-                            class="WM-CyanBlueGradient-BG"
-                            style="padding:10px 60px"
-                            @click="submitForm()"
-                        >
-                            <v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
-                            <span class="white--text">SAVE</span>
-                        </v-btn>
-                    </v-flex>
-                    <v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
-                        <router-link :to="{name: 'AllPackage'}">
-                            <v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
-                                <v-icon class="black--text">keyboard_arrow_left</v-icon>
-                                <span class="black--text">Back</span>
-                            </v-btn>
-                        </router-link>
-                    </v-flex>
-                </v-layout>
-            </material-card>
-        </v-container>
-    </v-form>
+	<v-form ref="form">
+		<v-container grid-list-xs fluid>
+			<material-card color="black" title="Add Package">
+				<v-layout align-center justify-center wrap class="px-5 my-3">
+					<v-flex xs12 sm6 md4>
+						<v-text-field
+							name="name"
+							label="Name"
+							color="black"
+							v-model="formData.name"
+							:rules="[rules.required, rules.counter]"
+							class="pa-2"
+						></v-text-field>
+					</v-flex>
+					<v-flex xs12 sm6 md8>
+						<v-autocomplete
+							multiple
+							:items="items"
+							item-text="name"
+							v-model="formData.items"
+							item-value="id"
+							label="Select Items For Package"
+						></v-autocomplete>
+					</v-flex>
+				</v-layout>
+				<v-layout align-center justify-center wrap class="px-5 mb-3">
+					<v-flex xs12 sm12 md12>
+						<v-textarea color="black" v-model="formData.description" class="pa-2" name="address">
+							<template v-slot:label>
+								<div>description</div>
+							</template>
+						</v-textarea>
+					</v-flex>
+				</v-layout>
+				<v-layout row wrap justify-center align-center>
+					<v-flex xs12 md2 sm2 class="text-md-center text-xs-center">
+						<v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px" @click="submitForm()">
+							<v-icon class="white--text mr-2 caption">fas fa-check</v-icon>
+							<span class="white--text">SAVE</span>
+						</v-btn>
+					</v-flex>
+					<v-flex xs12 md2 sm2 class="text-md-center text-sm-center text-xs-center">
+						<router-link :to="{name: 'AllPackage'}">
+							<v-btn class="WM-NoShadow WM-Outline-Btn WM-Border WM-Border-Black">
+								<v-icon class="black--text">keyboard_arrow_left</v-icon>
+								<span class="black--text">Back</span>
+							</v-btn>
+						</router-link>
+					</v-flex>
+				</v-layout>
+			</material-card>
+		</v-container>
+	</v-form>
 </template>
 
 <script>
@@ -68,63 +59,63 @@ import { ApiService } from "@/services";
 import { urls } from "@/config/urls";
 import { mapMutations } from "vuex";
 export default {
-    data() {
-        return {
-            formData: {
-                name: "",
-                result: "",
-                description: "",
-                items: []
-            },
-            items: [],
-            result: ["Pass", "Fail"],
-            rules: {
-                required: value => !!value || "Required.",
-                counter: value =>
-                    !value ||
-                    value.length == 0 ||
-                    value.length >= 5 ||
-                    "Min 5 characters"
-            }
-        };
-    },
-    created() {
-        if (this.$route.params.package) {
-            this.load(this.$route.params.package);
-        }
-        this.loadItems();
-    },
-    methods: {
-        async load(id) {
-            const result = await ApiService.get(urls.editPackage(id));
-            if (result.status == 200) {
-                this.formData = result.data.data;
-            }
-        },
-        async loadItems() {
-            const result = await ApiService.get(urls.listAllItem());
-            if (result.status == 200) {
-                this.items = result.data.data;
-            }
-        },
-        async submitForm() {
-            let result;
-            if (this.$route.params.package) {
-                result = await ApiService.put(
-                    urls.updatePackage(this.$route.params.package),
-                    this.formData
-                );
-            } else {
-                result = await ApiService.post(
-                    urls.storePackage,
-                    this.formData
-                );
-            }
+	data() {
+		return {
+			formData: {
+				name: "",
+				result: "",
+				description: "",
+				items: []
+			},
+			items: [],
+			result: ["Pass", "Fail"],
+			rules: {
+				required: value => !!value || "Required.",
+				counter: value =>
+					!value ||
+					value.length == 0 ||
+					value.length >= 5 ||
+					"Min 5 characters"
+			}
+		};
+	},
+	created() {
+		if (this.$route.params.package) {
+			this.load(this.$route.params.package);
+		}
+		this.loadItems();
+	},
+	methods: {
+		async load(id) {
+			const result = await ApiService.get(urls.editPackage(id));
+			if (result.status == 200) {
+				this.formData = result.data.data;
+			}
+		},
+		async loadItems() {
+			const result = await ApiService.get(urls.listAllItem());
+			if (result.status == 200) {
+				this.items = result.data.data;
+			}
+		},
+		async submitForm() {
+			let result;
+			if (this.$route.params.package) {
+				result = await ApiService.put(
+					urls.updatePackage(this.$route.params.package),
+					this.formData
+				);
+			} else {
+				result = await ApiService.post(
+					urls.storePackage,
+					this.formData
+				);
+			}
 
-            if (result && result.status == 200) {
-                this.$router.push({ name: "AllPackage" });
-            }
-        }
-    }
+			if (result && result.status == 200) {
+				this.$router.push({ name: "AllPackage" });
+			}
+		}
+	}
 };
 </script>
\ No newline at end of file