diff --git a/app/Http/Controllers/BarCodeController.php b/app/Http/Controllers/BarCodeController.php
index 5907c9b7..79f5c961 100644
--- a/app/Http/Controllers/BarCodeController.php
+++ b/app/Http/Controllers/BarCodeController.php
@@ -39,4 +39,10 @@ class BarCodeController extends Controller
             return \MessageResponse::data(['Barcode' => $Barcode, 'QRCode' => $QRCode]);
         }
     }
+    public function generatePackageQRCode(Package $Package)
+    {
+        $URL = 'https://www.cssd-doc.com/ShowPackage/'.$Package->id;
+        $QRCode  = DNS2D::getBarcodePNG($URL, "QRCODE");
+        return \MessageResponse::data(['QRCode' => 'data:image/png;base64,' .$QRCode]);
+    }
 }
diff --git a/app/Http/Controllers/LabelController.php b/app/Http/Controllers/LabelController.php
index cd90c9f5..19464d05 100644
--- a/app/Http/Controllers/LabelController.php
+++ b/app/Http/Controllers/LabelController.php
@@ -28,10 +28,6 @@ class LabelController extends Controller
                 $query->where('user_id', $user->id);
             }
         })
-
-        ->when($request->has('name') && $request->name != '', function($query) use($request){
-            $query->where('name', 'LIKE', '%'.$request->name.'%');
-        })
         ->when($request->has('sterilizer_id') && $request->sterilizer_id != '', function($query) use($request){
             $query->where('sterilizer_id', $request->sterilizer_id);
         })
@@ -41,9 +37,6 @@ class LabelController extends Controller
         ->when($request->has('lot_number') && $request->lot_number != '', function($query) use($request){
             $query->where('lot_number', $request->lot_number);
         })
-        ->when($request->has('department') && $request->department != '', function($query) use($request){
-            $query->where('department', 'LIKE', '%'.$request->department.'%');
-        })
         ->when($medical_center_id, function($query) use($request){
             $query->whereHas('user', function($query) use($request){
                 $query->where('medical_center_id', $request->medical_center_id);
@@ -59,19 +52,17 @@ class LabelController extends Controller
     public function show(Label $Label)
     {
         $Label->load('user', 'package', 'package.items', 'user.medical_center');
+
         return \MessageResponse::data($Label);
     }
     public function store(StoreLabelRequest $request)
     {
         $LabelData = [
-          'name' => $request->name,
           'sterile_date' => $request->sterile_date,
           'expire_date' => $request->expire_date,
           'sterilizer_id' => $request->sterilizer_id,
           'cycle_number' => $request->cycle_number,
           'lot_number' => $request->lot_number,
-          'department' => $request->department,
-          'note' => $request->note,
           'user_id' => auth('api')->user()->id,
           'package_id' => $request->package_id
         ];
diff --git a/app/Http/Requests/StoreCycleRequest.php b/app/Http/Requests/StoreCycleRequest.php
index 1a4751f3..646ea6a7 100644
--- a/app/Http/Requests/StoreCycleRequest.php
+++ b/app/Http/Requests/StoreCycleRequest.php
@@ -30,7 +30,7 @@ class StoreCycleRequest extends FormRequest
                     'sterilizer_id' => 'required',
                     'cycle_number' => 'required',
                     'note' => 'nullable',
-                    'labels' => 'required',
+                    'labels.*.id' => 'required|numeric|exists:labels,id',
                 ];
                 break;
             }
@@ -43,7 +43,7 @@ class StoreCycleRequest extends FormRequest
                     'sterilizer_id' => 'required',
                     'cycle_number' => 'required',
                     'note' => 'nullable',
-                    'labels' => 'required',
+                    'labels.*.id' => 'required|numeric|exists:labels,id',
                 ];
                 break;
 
diff --git a/app/Http/Requests/StoreLabelRequest.php b/app/Http/Requests/StoreLabelRequest.php
index d214036c..248808bd 100644
--- a/app/Http/Requests/StoreLabelRequest.php
+++ b/app/Http/Requests/StoreLabelRequest.php
@@ -25,14 +25,11 @@ class StoreLabelRequest extends FormRequest
         switch ($this->method()) {
             case 'POST': {
                 return [
-                    'name' => 'required|max:100|unique:labels',
                     'sterile_date' => 'required',
                     'expire_date' => 'required',
                     'sterilizer_id' => 'required',
                     'cycle_number' => 'required',
                     'lot_number' => 'required',
-                    'department' => 'required',
-                    'note' => 'nullable',
                     'package_id' => 'required',
                 ];
                 break;
@@ -41,14 +38,11 @@ class StoreLabelRequest extends FormRequest
             case 'PATCH': {
                 $Label =  $this->route('Label');
                 return [
-                    'name' => 'required|max:100|unique:labels,id,'.$Label->id,
                     'sterile_date' => 'required',
                     'expire_date' => 'required',
                     'sterilizer_id' => 'required',
                     'cycle_number' => 'required',
                     'lot_number' => 'required',
-                    'department' => 'required',
-                    'note' => 'nullable',
                     'package_id' => 'required',
                 ];
                 break;
diff --git a/app/Label.php b/app/Label.php
index f34d22d3..4af546c2 100644
--- a/app/Label.php
+++ b/app/Label.php
@@ -6,7 +6,7 @@ use Illuminate\Database\Eloquent\Model;
 
 class Label extends Model
 {
-    public $fillable = ['name', 'sterile_date', 'expire_date', 'sterilizer_id', 'cycle_number', 'lot_number', 'department', 'user_id', 'note', 'package_id'];
+    public $fillable = ['sterile_date', 'expire_date', 'sterilizer_id', 'cycle_number', 'lot_number', 'user_id', 'package_id'];
     public function user()
     {
         return $this->belongsTo('App\User');
diff --git a/resources/js/show/App.vue b/resources/js/show/App.vue
new file mode 100644
index 00000000..a7c6bad3
--- /dev/null
+++ b/resources/js/show/App.vue
@@ -0,0 +1,37 @@
+<template>
+  <v-app>
+    <!-- <core-filter /> -->
+
+    <!-- <core-modal />
+
+    <core-toolbar v-if="accessToken" />
+
+    <core-drawer v-if="accessToken" /> -->
+
+    <core-view />
+  </v-app>
+</template>
+
+<script>
+    // import { TokenService } from '@/services';
+    // import { mapState } from 'vuex';
+    export default {
+        data() {
+          return {
+          };
+        },
+        // computed: mapState('auth', ['accessToken']),
+
+    }
+</script>
+
+<style lang="scss">
+@import '@/styles/index.scss';
+@import '@/styles/css/Assets/Main.scss';
+@import '@/styles/css/Assets/WM-ModernTheme.scss';
+
+/* Remove in 1.2 */
+.v-datatable thead th.column.sortable i {
+    vertical-align: unset;
+}
+</style>
diff --git a/resources/js/show/config/urls.js b/resources/js/show/config/urls.js
new file mode 100644
index 00000000..88f62e62
--- /dev/null
+++ b/resources/js/show/config/urls.js
@@ -0,0 +1,8 @@
+const urls = {
+
+    showPackage: function(id) {
+        return `/Packages/${id}`;
+    },
+
+};
+export { urls };
diff --git a/resources/js/show/config/utils.js b/resources/js/show/config/utils.js
new file mode 100644
index 00000000..7d79d18c
--- /dev/null
+++ b/resources/js/show/config/utils.js
@@ -0,0 +1,6 @@
+const roles = [
+    'Admin',
+    'User',
+    'Supervisor',
+];
+export { roles };
\ No newline at end of file
diff --git a/resources/js/show/main.js b/resources/js/show/main.js
new file mode 100644
index 00000000..fc6577e3
--- /dev/null
+++ b/resources/js/show/main.js
@@ -0,0 +1,55 @@
+import 'font-awesome/css/font-awesome.min.css'
+import Vue from 'vue'
+// Components
+import '@/components'
+
+// Plugins
+// import './plugins'
+import '@/plugins/vuetify'
+// Material FontIcon
+import 'material-design-icons-iconfont/dist/material-design-icons.css'
+// Fortawesome
+import '@fortawesome/fontawesome-free/css/all.css'
+// Sync router with store
+// import { sync } from 'vuex-router-sync'
+// Application imports
+import App from './App.vue'
+// import i18n from '@/i18n'
+import router from './router'
+// import store from '@/store'
+
+
+// import { ApiService, TokenService } from '@/services'
+// Sync store with router
+// sync(store, router)
+
+// Vue.config.productionTip = false
+// ApiService.setHeader();
+// Set the base URL of the API
+// ApiService.init(process.env.MIX_APP_ROOT_API)
+
+// require('./services/global/errorHandler.service');
+// If token exists set Authorizion header
+// if (TokenService.getToken()) {
+//   ApiService.setAuthHeader();
+//
+//   // If info exists set info in Store
+//   if(TokenService.getInfo()) {
+//     let info = TokenService.getInfo();
+//     store.commit('setInfo', info);
+//   } else {
+//     store.dispatch('info');
+//   }
+// }
+
+// import hasRole from '@/services/mixin/hasRole'
+// Vue.mixin(hasRole)
+
+/* eslint-disable no-new */
+new Vue({
+  // i18n,
+  router,
+  // store,
+  render: h => h(App),
+  iconfont: 'fa4'
+}).$mount('#app');
diff --git a/resources/js/show/router/index.js b/resources/js/show/router/index.js
new file mode 100644
index 00000000..f0235c3a
--- /dev/null
+++ b/resources/js/show/router/index.js
@@ -0,0 +1,96 @@
+/**
+ * Vue Router
+ *
+ * @library
+ *
+ * https://router.vuejs.org/en/
+ */
+
+// Lib imports
+import Vue from 'vue'
+// import VueAnalytics from 'vue-analytics'
+import Router from 'vue-router'
+// import Meta from 'vue-meta'
+// import { TokenService } from '@/services'
+
+// Routes
+import paths from './paths'
+
+function route (options) {
+    let path = options.path;
+    let view = options.view;
+    let name = options.name;
+    let meta = (options.meta) ? options.meta : '';
+    return {
+        name: name || view,
+        path,
+        meta,
+        component: (resovle) => import(
+          `@show/views/${view}.vue`
+        ).then(resovle)
+    }
+}
+
+Vue.use(Router)
+
+// Create a new router
+const router = new Router({
+  mode: 'history',
+  routes: paths.map(path => route(path)).concat([
+    { path: '*', redirect: '/' }
+  ]),
+  // scrollBehavior (to, from, savedPosition) {
+  //   if (savedPosition) {
+  //     return savedPosition
+  //   }
+  //   if (to.hash) {
+  //     return { selector: to.hash }
+  //   }
+  //   return { x: 0, y: 0 }
+  // }
+})
+
+// Vue.use(Meta)
+
+// import {$hasRole} from '@/services/acl/role';
+
+// router.beforeEach((to, from, next) => {
+//   const isPublic = to.matched.some(record => record.meta.public);
+//   const onlyWhenLoggedOut = to.matched.some(record => record.meta.onlyWhenLoggedOut);
+//   const loggedIn = !!TokenService.getToken();
+//   const roles = (to.meta && to.meta.roles) ? to.meta.roles : null;
+//
+//   if (!isPublic && !loggedIn) {
+//     return next({
+//       path:'/login',
+//       query: {redirect: to.fullPath}  // Store the full path to redirect the user to after login
+//     });
+//   }
+//
+//   // Do not allow user to visit login page or register page if they are logged in
+//   if (loggedIn && onlyWhenLoggedOut && policy) {
+//     return next('/')
+//   }
+//
+//   // Do not allow user to visit Pages then not access roles
+//   if (roles && !$hasRole(roles)) {
+//     return next('/')
+//   }
+//
+//   next();
+// });
+
+// Bootstrap Analytics
+// Set in .env
+// https://github.com/MatteoGabriele/vue-analytics
+// if (process.env.GOOGLE_ANALYTICS) {
+//   Vue.use(VueAnalytics, {
+//     id: process.env.GOOGLE_ANALYTICS,
+//     router,
+//     autoTracking: {
+//       page: process.env.NODE_ENV !== 'development'
+//     }
+//   })
+// }
+
+export default router
diff --git a/resources/js/show/router/paths.js b/resources/js/show/router/paths.js
new file mode 100644
index 00000000..f9573954
--- /dev/null
+++ b/resources/js/show/router/paths.js
@@ -0,0 +1,18 @@
+/**
+ * Define all of your application routes here
+ * for more information on routes, see the
+ * official documentation https://router.vuejs.org/en/
+ */
+export default [
+
+  {
+    path: '/',
+    name: 'home',
+    view: 'Package/ShowPackage'
+  },
+  {
+    path: '/Show/Package/:package',
+    name: 'ShowPackage',
+    view: 'Package/ShowPackage'
+  },
+]
diff --git a/resources/js/show/view/Package/ShowPackage.vue b/resources/js/show/view/Package/ShowPackage.vue
new file mode 100644
index 00000000..8e48440d
--- /dev/null
+++ b/resources/js/show/view/Package/ShowPackage.vue
@@ -0,0 +1,175 @@
+
+<template>
+    <v-container grid-list-xs>
+        <material-card color="black"  title="Show Package">
+            <v-layout id="printMe" align-left justify-left wrap class="px-5 my-3">
+                <h3 class="ml-3">Info</h3>
+                <v-flex xs12>
+                    <hr class="v-divider theme--light">
+                </v-flex>
+                <v-layout row wrap class="ml-4">
+                    <!-- <v-flex xs12 md6 sm6>
+                        <div class>
+                            <v-flex xs12 md6 sm6 v-if="QRCodeimg">
+                                <img :src="QRCodeimg">
+                            </v-flex>
+                        </div>
+                    </v-flex> -->
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Name :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.name }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Description :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.note }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Register User :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ (typeof data.user != 'undefined') ? data.user.name : '' }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Date :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
+                        </div>
+                    </v-flex>
+                </v-layout>
+                <v-layout align-left justify-left wrap class="px-5 my-3">
+                    <h3 class="ml-3">Barcode And QRCode Image</h3>
+                    <v-flex xs12>
+                        <hr class="v-divider theme--light">
+                    </v-flex>
+                    <v-layout row wrap class="ml-4">
+                        <v-flex xs12 md6 sm6 v-if="barcodeimg">
+                            <img :src="barcodeimg"><br />
+                            <span>{{data.unique_id}}</span>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout row wrap class="ml-4">
+                        <v-flex xs12 md6 sm6 v-if="QRCodeimg">
+                            <img :src="QRCodeimg">
+                        </v-flex>
+                    </v-layout>
+                </v-layout>
+
+            </v-layout>
+            <v-layout align-left justify-left wrap class="px-5 my-3">
+                <h3 class="ml-3">Items</h3>
+                <v-flex xs12>
+                    <hr class="v-divider theme--light">
+                </v-flex>
+                <v-layout row wrap class="ml-4">
+                    <template>
+                      <v-expansion-panel class="WM-Panel">
+                        <v-expansion-panel-content
+                          v-for="(item, key) in data.items" :key="key"
+                        >
+                          <template v-slot:header>
+                            <div>{{ key+1 + ": " + item.name }} ({{ item.pivot.count }})</div>
+                          </template>
+                          <v-card>
+                            <v-card-text>note : {{ item.note }}</v-card-text>
+                          </v-card>
+                        </v-expansion-panel-content>
+                      </v-expansion-panel>
+                    </template>
+
+                </v-layout>
+            </v-layout>
+
+            <v-layout row wrap align-center justify-center>
+                <v-flex class xs12 md2 sm2 @click="print" >
+                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+                        <v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
+                        <span class="white--text">Print</span>
+                    </v-btn>
+                </v-flex>
+            </v-layout>
+
+        </material-card>
+    </v-container>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+import { ApiService } from "@/services";
+import { urls } from "./config/urls";
+export default {
+    data: () => ({
+        data : {},
+        barcodeimg : '',
+        QRCodeimg : ''
+    }),
+    methods: {
+        async load(id) {
+			const result = await ApiService.get(urls.showPackage(id));
+			if (result.status == 200) {
+				this.data = result.data.data;
+                this.generateBarcode(this.data.unique_id);
+			}
+		},
+        async verify(id) {
+            const result = await ApiService.post(urls.verifyPackage(id));
+            if (result && result.status == 200) {
+                this.setResultModal(result.data.data);
+                this.closeModal();
+            }
+        },
+        async generateBarcode(packageId) {
+            const result = await ApiService.post(urls.Barcode(packageId));
+            if (result && result.status == 200) {
+                this.QRCodeimg  = result.data.data.QRCode ? result.data.data.QRCode : null;
+                this.barcodeimg  = result.data.data.Barcode ? result.data.data.Barcode : null;
+            }
+        },
+        print() {
+            const prtHtml = document.getElementById("printMe").innerHTML;
+
+            // Get all stylesheets HTML
+            let stylesHtml = "";
+            for (const node of [
+                ...document.querySelectorAll('link[rel="stylesheet"], style')
+            ]) {
+                stylesHtml += node.outerHTML;
+            }
+
+            // Open the print window
+            const WinPrint = window.open(
+                "",
+                "",
+                "left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
+            );
+
+            WinPrint.document.write(`<!DOCTYPE html>
+            <html>
+            <head>
+                ${stylesHtml}
+            </head>
+            <body>
+                ${prtHtml}
+            </body>
+            </html>`);
+
+            WinPrint.document.close();
+            WinPrint.focus();
+            WinPrint.print();
+            WinPrint.close();
+        }
+    },
+    created() {
+        if (this.$route.params.package) {
+			this.load(this.$route.params.package);
+		}
+
+    },
+    computed: {
+        ...mapGetters("modal", ["getModalProperties"])
+    }
+};
+</script>
diff --git a/resources/js/vue/App.vue b/resources/js/vue/App.vue
index 0193e59f..d6ef55aa 100644
--- a/resources/js/vue/App.vue
+++ b/resources/js/vue/App.vue
@@ -33,6 +33,6 @@
 
 /* Remove in 1.2 */
 .v-datatable thead th.column.sortable i {
-  vertical-align: unset;
+    vertical-align: unset;
 }
 </style>
diff --git a/resources/js/vue/components/modal/cycle/Show.vue b/resources/js/vue/components/modal/cycle/Show.vue
index 56bcf88a..b888c2a1 100644
--- a/resources/js/vue/components/modal/cycle/Show.vue
+++ b/resources/js/vue/components/modal/cycle/Show.vue
@@ -45,6 +45,24 @@
                         </div>
                     </v-flex>
                 </v-layout>
+                <v-layout align-left justify-left wrap class="px-5 my-3">
+                    <h3 class="ml-3">Barcode And QRCode Image</h3>
+                    <v-flex xs12>
+                        <hr class="v-divider theme--light">
+                    </v-flex>
+                    <v-layout row wrap class="ml-4">
+                        <v-flex xs12 md6 sm6 v-if="barcodeimg">
+                            <img :src="barcodeimg"><br />
+                            <span>{{data.unique_id}}</span>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout row wrap class="ml-4">
+                        <v-flex xs12 md6 sm6 v-if="QRCodeimg">
+                            <img :src="QRCodeimg">
+                        </v-flex>
+                    </v-layout>
+                </v-layout>
+
             </v-layout>
             <v-layout align-left justify-left wrap class="px-5 my-3">
                 <h3 class="ml-3">Labels</h3>
@@ -57,16 +75,14 @@
                       <v-expansion-panel class="WM-Panel" v-for="(label, key) in data.labels" :key="key">
                         <v-expansion-panel-content>
                           <template v-slot:header>
-                            <div>{{ label.name }}</div>
+                            <div>{{ label.id }} ({{ label.pivot.count }})</div>
                           </template>
                           <v-card>
-                            <v-card-text>count : {{ label.pivot.count }}</v-card-text>
-                            <v-card-text>note : {{ label.note }}</v-card-text>
                             <v-card-text> Package :
                                 <v-expansion-panel class="WM-Panel">
                                   <v-expansion-panel-content>
                                     <template v-slot:header>
-                                      <div>{{ label.package.name }}</div>
+                                      <div>{{ label.package.name }} </div>
                                     </template>
                                     <v-card>
                                       <v-card-text>note : {{ label.package.note }}</v-card-text>
@@ -75,10 +91,9 @@
                                           <v-expansion-panel class="WM-Panel" v-for="item in label.package.items" :key="item.key">
                                             <v-expansion-panel-content>
                                               <template v-slot:header>
-                                                <div>{{ item.name }}</div>
+                                                <div>{{ item.name }} ({{ item.pivot.count }})</div>
                                               </template>
                                               <v-card>
-                                                <v-card-text>count : {{ item.pivot.count }}</v-card-text>
                                                 <v-card-text>note : {{ item.note }}</v-card-text>
                                               </v-card>
                                             </v-expansion-panel-content>
@@ -112,14 +127,23 @@ import { ApiService } from "@/services";
 import { urls } from "@/config/urls";
 export default {
     data: () => ({
-        data : {}
+        data : {},
+        barcodeimg : '',
+        QRCodeimg : ''
     }),
     methods: {
         ...mapMutations("modal", ["closeModal", "setResultModal"]),
+        async generateBarcode(packageId) {
+            const result = await ApiService.post(urls.Barcode(packageId));
+            if (result && result.status == 200) {
+                this.QRCodeimg  = result.data.data.QRCode ? result.data.data.QRCode : null;
+                this.barcodeimg  = result.data.data.Barcode ? result.data.data.Barcode : null;
+            }
+        },
     },
     created() {
         this.data = this.getModalProperties.result.data.data;
-
+        this.generateBarcode(this.data.unique_id);
     },
     computed: {
         ...mapGetters("modal", ["getModalProperties"])
diff --git a/resources/js/vue/components/modal/label/Show.vue b/resources/js/vue/components/modal/label/Show.vue
index 3359fc65..25a63bc3 100644
--- a/resources/js/vue/components/modal/label/Show.vue
+++ b/resources/js/vue/components/modal/label/Show.vue
@@ -2,16 +2,22 @@
 <template>
     <v-container grid-list-xs>
         <material-card color="black" title="Show Label">
-            <v-layout align-left justify-left wrap class="px-5 my-3">
+            <v-layout  align-left justify-left wrap class="px-5 my-3">
                 <h3 class="ml-3">Info</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
-                <v-layout row wrap class="ml-4">
+                <v-layout id="printMe" row wrap class="ml-4">
                     <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">Name :</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.name }}</span>
+                            <span class="title">Package / Set :</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <v-flex xs12 md6 sm6 v-if="QRCodeimg">
+                                <img :src="QRCodeimg">
+                            </v-flex>
                         </div>
                     </v-flex>
                     <v-flex xs12 md6 sm6>
@@ -20,30 +26,12 @@
                             <span class="headline ml-1" style="letter-spacing:0 !important">{{ (data.user && data.user.medical_center) ? data.user.medical_center.name : "" }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
-                        <div class>
-                            <span class="title">Register User :</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ (typeof data.user != 'undefined') ? data.user.name : '' }}</span>
-                        </div>
-                    </v-flex>
-                    <v-flex xs12 md6 sm6>
-                        <div class>
-                            <span class="title">Cycle Number :</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.cycle_number }}</span>
-                        </div>
-                    </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title">Lot Number :</span>
                             <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.lot_number }}</span>
                         </div>
                     </v-flex>
-                    <v-flex xs12 md6 sm6>
-                        <div class>
-                            <span class="title">Description :</span>
-                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.note }}</span>
-                        </div>
-                    </v-flex>
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title">Sterile Date :</span>
@@ -56,6 +44,35 @@
                             <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.expire_date }}</span>
                         </div>
                     </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Sterilizer ID :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.sterilizer_id}}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Cycle Number :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.cycle_number }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Register User :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ (typeof data.user != 'undefined') ? data.user.name : '' }}</span>
+                        </div>
+                    </v-flex>
+
+                    <v-flex xs12 md12 sm12>
+                        <div class>
+                            <v-layout row wrap align-center justify-center class="ml-4" style="text-align:center;margin-top:30px">
+                                <v-flex xs12 md12 sm12 v-if="barcodeimg">
+                                    <img :src="barcodeimg"><br />
+                                    <span>{{data.id}}</span>
+                                </v-flex>
+                            </v-layout>
+                        </div>
+                    </v-flex>
                 </v-layout>
             </v-layout>
             <v-layout align-left justify-left wrap class="px-5 my-3">
@@ -76,10 +93,9 @@
                                 <v-expansion-panel class="WM-Panel" v-for="item in data.package.items" :key="item.key">
                                   <v-expansion-panel-content>
                                     <template v-slot:header>
-                                      <div>{{ item.name }}</div>
+                                      <div>{{ item.name }} ({{ item.pivot.count }})</div>
                                     </template>
                                     <v-card>
-                                      <v-card-text>count : {{ item.pivot.count }}</v-card-text>
                                       <v-card-text>note : {{ item.note }}</v-card-text>
                                     </v-card>
                                   </v-expansion-panel-content>
@@ -94,6 +110,16 @@
 
                 </v-layout>
             </v-layout>
+
+            <v-layout row wrap align-center justify-center>
+                <v-flex class xs12 md2 sm2 @click="print" >
+                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+                        <v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
+                        <span class="white--text">Print</span>
+                    </v-btn>
+                </v-flex>
+            </v-layout>
+
         </material-card>
     </v-container>
 </template>
@@ -110,21 +136,70 @@ import { ApiService } from "@/services";
 import { urls } from "@/config/urls";
 export default {
     data: () => ({
-        data : {}
+        data : {},
+        QRCodeimg : '',
+        barcodeimg : ''
+
     }),
     methods: {
         ...mapMutations("modal", ["closeModal", "setResultModal"]),
-        async verify(id) {
-            const result = await ApiService.post(urls.verifyPackage(id));
+        // async verify(id) {
+        //     const result = await ApiService.post(urls.verifyPackage(id));
+        //     if (result && result.status == 200) {
+        //         this.setResultModal(result.data.data);
+        //         this.closeModal();
+        //     }
+        // },
+        async generateQRcodePackage(packageId) {
+            const result = await ApiService.post(urls.packageQRCode(packageId));
             if (result && result.status == 200) {
-                this.setResultModal(result.data.data);
-                this.closeModal();
+                this.QRCodeimg  = result.data.data.QRCode ? result.data.data.QRCode : null;
             }
+        },
+        async generateBarcode(labelId) {
+            const result = await ApiService.post(urls.Barcode(labelId));
+            if (result && result.status == 200) {
+                this.barcodeimg  = result.data.data.Barcode ? result.data.data.Barcode : null;
+            }
+        },
+        print() {
+            const prtHtml = document.getElementById("printMe").innerHTML;
+
+            // Get all stylesheets HTML
+            let stylesHtml = "";
+            for (const node of [
+                ...document.querySelectorAll('link[rel="stylesheet"], style')
+            ]) {
+                stylesHtml += node.outerHTML;
+            }
+
+            // Open the print window
+            const WinPrint = window.open(
+                "",
+                "",
+                "left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
+            );
+
+            WinPrint.document.write(`<!DOCTYPE html>
+            <html>
+            <head>
+                ${stylesHtml}
+            </head>
+            <body>
+                ${prtHtml}
+            </body>
+            </html>`);
+
+            WinPrint.document.close();
+            WinPrint.focus();
+            WinPrint.print();
+            WinPrint.close();
         }
     },
     created() {
         this.data = this.getModalProperties.result.data.data;
-
+        this.generateQRcodePackage(this.data.package.id);
+        this.generateBarcode(this.data.id);
     },
     computed: {
         ...mapGetters("modal", ["getModalProperties"])
diff --git a/resources/js/vue/components/modal/package/Show.vue b/resources/js/vue/components/modal/package/Show.vue
index d150e14a..b5bd07ce 100644
--- a/resources/js/vue/components/modal/package/Show.vue
+++ b/resources/js/vue/components/modal/package/Show.vue
@@ -1,19 +1,20 @@
 
 <template>
     <v-container grid-list-xs>
-        <material-card color="black" id="printMe" title="Show Package">
-            <v-layout align-left justify-left wrap class="px-5 my-3">
+        <material-card color="black"  title="Show Package">
+            <v-layout id="printMe" align-left justify-left wrap class="px-5 my-3">
                 <h3 class="ml-3">Info</h3>
                 <v-flex xs12>
                     <hr class="v-divider theme--light">
                 </v-flex>
                 <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6>
+                    <!-- <v-flex xs12 md6 sm6>
                         <div class>
-                            <span class="title">UniqueId :</span>
-                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.unique_id }}</span>
+                            <v-flex xs12 md6 sm6 v-if="QRCodeimg">
+                                <img :src="QRCodeimg">
+                            </v-flex>
                         </div>
-                    </v-flex>
+                    </v-flex> -->
                     <v-flex xs12 md6 sm6>
                         <div class>
                             <span class="title">Name :</span>
@@ -39,6 +40,24 @@
                         </div>
                     </v-flex>
                 </v-layout>
+                <v-layout align-left justify-left wrap class="px-5 my-3">
+                    <h3 class="ml-3">Barcode And QRCode Image</h3>
+                    <v-flex xs12>
+                        <hr class="v-divider theme--light">
+                    </v-flex>
+                    <v-layout row wrap class="ml-4">
+                        <v-flex xs12 md6 sm6 v-if="barcodeimg">
+                            <img :src="barcodeimg"><br />
+                            <span>{{data.unique_id}}</span>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout row wrap class="ml-4">
+                        <v-flex xs12 md6 sm6 v-if="QRCodeimg">
+                            <img :src="QRCodeimg">
+                        </v-flex>
+                    </v-layout>
+                </v-layout>
+
             </v-layout>
             <v-layout align-left justify-left wrap class="px-5 my-3">
                 <h3 class="ml-3">Items</h3>
@@ -52,10 +71,9 @@
                           v-for="(item, key) in data.items" :key="key"
                         >
                           <template v-slot:header>
-                            <div>{{ key+1 + ": " + item.name }}</div>
+                            <div>{{ key+1 + ": " + item.name }} ({{ item.pivot.count }})</div>
                           </template>
                           <v-card>
-                            <v-card-text>count : {{ item.pivot.count }}</v-card-text>
                             <v-card-text>note : {{ item.note }}</v-card-text>
                           </v-card>
                         </v-expansion-panel-content>
@@ -65,22 +83,6 @@
                 </v-layout>
             </v-layout>
 
-            <v-layout id="printMe" align-left justify-left wrap class="px-5 my-3">
-                <h3 class="ml-3">Barcode And QRCode Image</h3>
-                <v-flex xs12>
-                    <hr class="v-divider theme--light">
-                </v-flex>
-                <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6 v-if="data.bar_code">
-                        <img :src="data.bar_code">
-                    </v-flex>
-                </v-layout>
-                <v-layout row wrap class="ml-4">
-                    <v-flex xs12 md6 sm6 v-if="data.qr_code">
-                        <img :src="data.qr_code">
-                    </v-flex>
-                </v-layout>
-            </v-layout>
             <v-layout row wrap align-center justify-center>
                 <v-flex class xs12 md2 sm2 @click="print" >
                     <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
@@ -93,20 +95,16 @@
         </material-card>
     </v-container>
 </template>
-<script>
-export default {
-    data: () => ({
-        data: {}
-    })
-};
-</script>
+
 <script>
 import { mapGetters, mapMutations } from "vuex";
 import { ApiService } from "@/services";
 import { urls } from "@/config/urls";
 export default {
     data: () => ({
-        data : {}
+        data : {},
+        barcodeimg : '',
+        QRCodeimg : ''
     }),
     methods: {
         ...mapMutations("modal", ["closeModal", "setResultModal"]),
@@ -117,6 +115,13 @@ export default {
                 this.closeModal();
             }
         },
+        async generateBarcode(packageId) {
+            const result = await ApiService.post(urls.Barcode(packageId));
+            if (result && result.status == 200) {
+                this.QRCodeimg  = result.data.data.QRCode ? result.data.data.QRCode : null;
+                this.barcodeimg  = result.data.data.Barcode ? result.data.data.Barcode : null;
+            }
+        },
         print() {
             const prtHtml = document.getElementById("printMe").innerHTML;
 
@@ -153,7 +158,7 @@ export default {
     },
     created() {
         this.data = this.getModalProperties.result.data.data;
-
+        this.generateBarcode(this.data.unique_id);
     },
     computed: {
         ...mapGetters("modal", ["getModalProperties"])
diff --git a/resources/js/vue/config/urls.js b/resources/js/vue/config/urls.js
index 6b94ae39..268f414d 100644
--- a/resources/js/vue/config/urls.js
+++ b/resources/js/vue/config/urls.js
@@ -176,6 +176,9 @@ const urls = {
     },
     packageBarcode: function(code) {
         return `/Package/Barcode/${code}`;
+    },
+    packageQRCode: function(code) {
+        return `/Package/QRCode/${code}`;
     }
 };
 export { urls };
diff --git a/resources/js/vue/router/paths.js b/resources/js/vue/router/paths.js
index 63f53983..d41debd5 100644
--- a/resources/js/vue/router/paths.js
+++ b/resources/js/vue/router/paths.js
@@ -209,4 +209,9 @@ export default [
     name: 'Tickets',
     view: 'Tickets/List'
   },
+  {
+    path: '/ShowPackage/:package',
+    name: 'ShowPackage',
+    view: 'Package/ShowPackage'
+  },
 ]
diff --git a/resources/js/vue/views/Cycle/AddEdit.vue b/resources/js/vue/views/Cycle/AddEdit.vue
index 5d14b731..399c87a0 100644
--- a/resources/js/vue/views/Cycle/AddEdit.vue
+++ b/resources/js/vue/views/Cycle/AddEdit.vue
@@ -63,14 +63,22 @@
                     <v-flex xs12 sm6 md4 class="WM-FlexCenter WM-DuplicateInput" style="position: relative" v-for="(label, key) in formData.labels" :key="key">
                       <div class="Inner">
                         <v-icon class="fa fa-check mr-2 WM-Margin-B-8"></v-icon>
-                        <v-autocomplete
+                        <!-- <v-autocomplete
                             color="black"
                             :items="labels"
                             item-text="name"
                             item-value="id"
                             v-model="label.id"
                             label="Select Label For Cycle"
-                        ></v-autocomplete>
+                        ></v-autocomplete> -->
+                        <v-text-field
+                            name="labels"
+                            label="Label ID"
+                            color="black"
+                            v-model="label.id"
+                            class="py-3 pr-3"
+                        ></v-text-field>
+
                         <v-btn
                         absolute
                         small
diff --git a/resources/js/vue/views/Label/AddEdit.vue b/resources/js/vue/views/Label/AddEdit.vue
index aff54d9e..c2cf20e4 100644
--- a/resources/js/vue/views/Label/AddEdit.vue
+++ b/resources/js/vue/views/Label/AddEdit.vue
@@ -3,17 +3,7 @@
 		<v-container grid-list-xs fluid>
 			<material-card color="black" title="Add Label on Set ">
 				<v-layout  wrap class="px-5 my-3">
-					<v-flex xs12 md3 sm3 class="WM-FlexCenter">
-						<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-						<v-text-field
-							name="name"
-							label="Name"
-							color="black"
-							v-model="formData.name"
-							:rules="[rules.required, rules.counter]"
-							class="py-3 pr-3"
-						></v-text-field>
-					</v-flex>
+			
 					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
 						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
 						<v-text-field
@@ -57,16 +47,6 @@
 							class="py-3 pr-3"
 						></v-autocomplete>
 					</v-flex>
-					<v-flex xs12 sm6 md3 class="WM-FlexCenter pl-3">
-						<v-icon class="fa fa-building mr-2 WM-Margin-B-8"></v-icon>
-						<v-text-field
-							name="department"
-							label="Department"
-							color="black"
-							v-model="formData.department"
-							class="py-3 pr-3"
-						></v-text-field>
-					</v-flex>
 					<v-flex xs12 sm6 md2 class="WM-FlexCenter pl-3">
 						<v-icon class="far fa-calendar-alt mr-2"></v-icon>
 						<v-menu
@@ -118,15 +98,7 @@
 						</v-menu>
 					</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.note" 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()">
@@ -158,9 +130,7 @@ export default {
 			fromMenuSterile: false ,
 			fromMenuExpire: false,
 			formData: {
-				name: "",
 				result: "",
-				note: "",
 				package_id: ""
 			},
 			items: [],
diff --git a/resources/js/vue/views/Label/List.vue b/resources/js/vue/views/Label/List.vue
index 16177a10..a041484f 100644
--- a/resources/js/vue/views/Label/List.vue
+++ b/resources/js/vue/views/Label/List.vue
@@ -3,10 +3,6 @@
 		<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 class="WM-FlexCenter pl-3">
-						<v-icon class="fa fa-align-left mr-2 WM-Margin-B-8"></v-icon>
-						<v-text-field class="py-3 pr-3" v-model="filter.name" label="Name" color="black"></v-text-field>
-					</v-flex>
 					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
 						<v-icon class="fa fa-hospital-o mr-2 WM-Margin-B-8"></v-icon>
 						<v-autocomplete
@@ -36,10 +32,6 @@
 						<v-icon class="fas fa-sort-numeric-up mr-2 WM-Margin-B-8"></v-icon>
 						<v-text-field class="py-3" v-model="filter.cycle_number" label="Cycle Number" color="black"></v-text-field>
 					</v-flex>
-					<v-flex xs12 md3 sm3 class="WM-FlexCenter pl-3">
-						<v-icon class="fa fa-building mr-2 WM-Margin-B-8"></v-icon>
-						<v-text-field class="py-3 pr-3" v-model="filter.department" label="Department" 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>
@@ -64,13 +56,13 @@
 								<span class="subheading font-weight-light text-white text--darken-3" v-text="header.text" />
 							</template>
 							<template slot="items" slot-scope="{ item }">
-								<td class="title font-weight-light">{{ item.name }}</td>
+								<td class="title font-weight-light">{{ item.id }}</td>
 								<td
 									class="title font-weight-light"
 								>{{ (item.user && item.user.medical_center) ? item.user.medical_center.name : '' }}</td>
 								<td class="title font-weight-light">{{ item.user ? item.user.name : '' }}</td>
 								<td class="title font-weight-light">{{ item.cycle_number }}</td>
-								<td class="title font-weight-light">{{ item.department }}</td>
+								<td class="title font-weight-light">{{ item.sterilizer_id }}</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>
@@ -129,8 +121,8 @@ export default {
 		headers: [
 			{
 				sortable: true,
-				text: "Name",
-				value: "Name"
+				text: "LabelID",
+				value: "LabelID"
 			},
 			{
 				sortable: true,
@@ -149,8 +141,8 @@ export default {
 			},
 			{
 				sortable: false,
-				text: "Department",
-				value: "Department"
+				text: "SterilizerID",
+				value: "SterilizerID"
 			},
 			{
 				sortable: false,
diff --git a/resources/js/vue/views/Package/List.vue b/resources/js/vue/views/Package/List.vue
index e111ab52..4e15b1ea 100644
--- a/resources/js/vue/views/Package/List.vue
+++ b/resources/js/vue/views/Package/List.vue
@@ -50,6 +50,7 @@
                             <template slot="items" slot-scope="{ item }">
                                 <td class="title font-weight-light">{{ item.unique_id }}</td>
                                 <td class="title font-weight-light">{{ item.name }}</td>
+                                <td class="title font-weight-light">{{ item.user.name }}</td>
                                 <td class="title font-weight-light">{{ item.description }}</td>
                                 <td class="text-xs-right">
                                     <v-btn color="cyan" class="mr-2" @click="show(item.id)">
@@ -117,6 +118,11 @@ export default {
                 text: "Name",
                 value: "name"
             },
+            {
+                sortable: true,
+                text: "User",
+                value: "User"
+            },
             {
                 sortable: true,
                 text: "Description",
diff --git a/resources/js/vue/views/Package/ShowPackage.vue b/resources/js/vue/views/Package/ShowPackage.vue
new file mode 100644
index 00000000..05182f84
--- /dev/null
+++ b/resources/js/vue/views/Package/ShowPackage.vue
@@ -0,0 +1,176 @@
+
+<template>
+    <v-container grid-list-xs>
+        <material-card color="black"  title="Show Package">
+            <v-layout id="printMe" align-left justify-left wrap class="px-5 my-3">
+                <h3 class="ml-3">Info</h3>
+                <v-flex xs12>
+                    <hr class="v-divider theme--light">
+                </v-flex>
+                <v-layout row wrap class="ml-4">
+                    <!-- <v-flex xs12 md6 sm6>
+                        <div class>
+                            <v-flex xs12 md6 sm6 v-if="QRCodeimg">
+                                <img :src="QRCodeimg">
+                            </v-flex>
+                        </div>
+                    </v-flex> -->
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Name :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.name }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Description :</span>
+                            <span class="headline ml-1" style="letter-spacing:0 !important">{{ data.note }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Register User :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ (typeof data.user != 'undefined') ? data.user.name : '' }}</span>
+                        </div>
+                    </v-flex>
+                    <v-flex xs12 md6 sm6>
+                        <div class>
+                            <span class="title">Date :</span>
+                            <span class="headline ml-2" style="letter-spacing:0 !important">{{ data.created_at }}</span>
+                        </div>
+                    </v-flex>
+                </v-layout>
+                <v-layout align-left justify-left wrap class="px-5 my-3">
+                    <h3 class="ml-3">Barcode And QRCode Image</h3>
+                    <v-flex xs12>
+                        <hr class="v-divider theme--light">
+                    </v-flex>
+                    <v-layout row wrap class="ml-4">
+                        <v-flex xs12 md6 sm6 v-if="barcodeimg">
+                            <img :src="barcodeimg"><br />
+                            <span>{{data.unique_id}}</span>
+                        </v-flex>
+                    </v-layout>
+                    <v-layout row wrap class="ml-4">
+                        <v-flex xs12 md6 sm6 v-if="QRCodeimg">
+                            <img :src="QRCodeimg">
+                        </v-flex>
+                    </v-layout>
+                </v-layout>
+
+            </v-layout>
+            <v-layout align-left justify-left wrap class="px-5 my-3">
+                <h3 class="ml-3">Items</h3>
+                <v-flex xs12>
+                    <hr class="v-divider theme--light">
+                </v-flex>
+                <v-layout row wrap class="ml-4">
+                    <template>
+                      <v-expansion-panel class="WM-Panel">
+                        <v-expansion-panel-content
+                          v-for="(item, key) in data.items" :key="key"
+                        >
+                          <template v-slot:header>
+                            <div>{{ key+1 + ": " + item.name }} ({{ item.pivot.count }})</div>
+                          </template>
+                          <v-card>
+                            <v-card-text>note : {{ item.note }}</v-card-text>
+                          </v-card>
+                        </v-expansion-panel-content>
+                      </v-expansion-panel>
+                    </template>
+
+                </v-layout>
+            </v-layout>
+
+            <v-layout row wrap align-center justify-center>
+                <v-flex class xs12 md2 sm2 @click="print" >
+                    <v-btn class="WM-CyanBlueGradient-BG" style="padding:10px 60px">
+                        <v-icon class="white--text mr-2 caption">fas fa-print</v-icon>
+                        <span class="white--text">Print</span>
+                    </v-btn>
+                </v-flex>
+            </v-layout>
+
+        </material-card>
+    </v-container>
+</template>
+
+<script>
+import { mapGetters, mapMutations } from "vuex";
+import { ApiService } from "@/services";
+import { urls } from "@/config/urls";
+export default {
+    data: () => ({
+        data : {},
+        barcodeimg : '',
+        QRCodeimg : ''
+    }),
+    methods: {
+        ...mapMutations("modal", ["closeModal", "setResultModal"]),
+        async load(id) {
+			const result = await ApiService.get(urls.showPackage(id));
+			if (result.status == 200) {
+				this.data = result.data.data;
+                this.generateBarcode(this.data.unique_id);
+			}
+		},
+        async verify(id) {
+            const result = await ApiService.post(urls.verifyPackage(id));
+            if (result && result.status == 200) {
+                this.setResultModal(result.data.data);
+                this.closeModal();
+            }
+        },
+        async generateBarcode(packageId) {
+            const result = await ApiService.post(urls.Barcode(packageId));
+            if (result && result.status == 200) {
+                this.QRCodeimg  = result.data.data.QRCode ? result.data.data.QRCode : null;
+                this.barcodeimg  = result.data.data.Barcode ? result.data.data.Barcode : null;
+            }
+        },
+        print() {
+            const prtHtml = document.getElementById("printMe").innerHTML;
+
+            // Get all stylesheets HTML
+            let stylesHtml = "";
+            for (const node of [
+                ...document.querySelectorAll('link[rel="stylesheet"], style')
+            ]) {
+                stylesHtml += node.outerHTML;
+            }
+
+            // Open the print window
+            const WinPrint = window.open(
+                "",
+                "",
+                "left=0,top=0,width=800,height=900,toolbar=0,scrollbars=0,status=0"
+            );
+
+            WinPrint.document.write(`<!DOCTYPE html>
+            <html>
+            <head>
+                ${stylesHtml}
+            </head>
+            <body>
+                ${prtHtml}
+            </body>
+            </html>`);
+
+            WinPrint.document.close();
+            WinPrint.focus();
+            WinPrint.print();
+            WinPrint.close();
+        }
+    },
+    created() {
+        if (this.$route.params.package) {
+			this.load(this.$route.params.package);
+		}
+
+    },
+    computed: {
+        ...mapGetters("modal", ["getModalProperties"])
+    }
+};
+</script>
diff --git a/resources/views/showMaster.blade.php b/resources/views/showMaster.blade.php
new file mode 100644
index 00000000..44486d04
--- /dev/null
+++ b/resources/views/showMaster.blade.php
@@ -0,0 +1,70 @@
+<!doctype html>
+<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
+    <head>
+        <meta charset="utf-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1">
+
+        <title>CSSD-DOC</title>
+
+        <!-- Fonts -->
+        <link href="https://fonts.googleapis.com/css?family=Nunito:200,600" rel="stylesheet">
+
+        <!-- Styles -->
+        <style>
+            html, body {
+                background-color: #fff;
+                color: #636b6f;
+                font-family: 'Nunito', sans-serif;
+                font-weight: 200;
+                height: 100vh;
+                margin: 0;
+            }
+
+            .full-height {
+                height: 100vh;
+            }
+
+            .flex-center {
+                align-items: center;
+                display: flex;
+                justify-content: center;
+            }
+
+            .position-ref {
+                position: relative;
+            }
+
+            .top-right {
+                position: absolute;
+                right: 10px;
+                top: 18px;
+            }
+
+            .content {
+                text-align: center;
+            }
+
+            .title {
+                font-size: 84px;
+            }
+
+            .links > a {
+                color: #636b6f;
+                padding: 0 25px;
+                font-size: 13px;
+                font-weight: 600;
+                letter-spacing: .1rem;
+                text-decoration: none;
+                text-transform: uppercase;
+            }
+
+            .m-b-md {
+                margin-bottom: 30px;
+            }
+        </style>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="{{ mix('js/show/app.js') }}"></script>
+    </body>
+</html>
diff --git a/routes/api.php b/routes/api.php
index 19ec0a6e..7acbd967 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -63,6 +63,7 @@ Route::middleware('auth:api')->group(function () {
     Route::resource('Cycles', 'CycleController');
 
     Route::post('Package/Barcode/{Code}', 'BarCodeController@generatePackageBarcode');
+    Route::post('Package/QRCode/{Package}', 'BarCodeController@generatePackageQRCode');
 });
 
 Route::get('TestResults/{id}', 'TestResultController@show');
diff --git a/routes/web.php b/routes/web.php
index 4dc5d3e6..7bf4a2cf 100644
--- a/routes/web.php
+++ b/routes/web.php
@@ -55,6 +55,9 @@ Route::get('/test',function(){
     return view('home');
 
 
+});
+Route::get('/Show/{any?}/{any2?}',function(){
+    return view('showMaster');
 });
 Route::any('{all}', function(){
     return view('welcome');
diff --git a/webpack.mix.js b/webpack.mix.js
index 277a6b02..68e2c743 100644
--- a/webpack.mix.js
+++ b/webpack.mix.js
@@ -16,6 +16,7 @@ const mix = require('laravel-mix');
          extensions: ['.js', '.vue', '.json'],
          alias: {
              '@': path.resolve(__dirname, 'resources/js/vue'),
+             '@show': path.resolve(__dirname, 'resources/js/show'),
          },
      },
      output: {
@@ -23,7 +24,8 @@ const mix = require('laravel-mix');
     }
  });
 
-mix.js('resources/js/vue/main.js', 'public/js/vue/app.js');
+mix.js('resources/js/vue/main.js', 'public/js/vue/app.js')
+.js('resources/js/show/main.js', 'public/js/show/app.js');
 
 
-mix.version();
\ No newline at end of file
+mix.version();