diff --git a/app/Booking.php b/app/Booking.php
index a6be11c4..6daa1d89 100644
--- a/app/Booking.php
+++ b/app/Booking.php
@@ -43,5 +43,9 @@ class Booking extends Model
     public function userBankSlip(){
         return $this->hasOne(UserBankSlip::class);
     }
+
+    public function purchaseOrder(){
+        return $this->hasOne(PurchaseOrder::class);
+    }
 }
 
diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 2a0daed0..396af86e 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -427,6 +427,13 @@ class BookingController extends Controller
         return response()->json(['message'=>'Success'],200);
     }
 
+    public function showPurchaseOrder($id){
+        $booking = Booking::where('id',$id)->first();
+        $user_po = $booking->purchaseOrder()->first();
+
+        return response()->json(['po_path'=> $user_po],200);
+    }
+
     public function delete(Booking $book_id)
     {
         $booking = Booking::where('user_id', Auth::user())->where('id', $book_id)->firstOrFail();
diff --git a/app/PurchaseOrder.php b/app/PurchaseOrder.php
index 72345a6f..71227d02 100644
--- a/app/PurchaseOrder.php
+++ b/app/PurchaseOrder.php
@@ -7,4 +7,9 @@ use Illuminate\Database\Eloquent\Model;
 class PurchaseOrder extends Model
 {
     protected $fillable = ['image_url','amount','booking_id'];
+    
+    public function booking()
+    {
+        return $this->belongsTo(Booking::class);
+    }
 }
diff --git a/database/migrations/2018_06_28_011717_rename_booking_foreignkey_in_po_table.php b/database/migrations/2018_06_28_011717_rename_booking_foreignkey_in_po_table.php
new file mode 100644
index 00000000..27f8b18a
--- /dev/null
+++ b/database/migrations/2018_06_28_011717_rename_booking_foreignkey_in_po_table.php
@@ -0,0 +1,33 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RenameBookingForeignkeyInPoTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('purchase_orders', function($table)
+        {
+            $table->dropForeign('book_id');
+            $table->integer('booking_id')->unsigned();
+            $table->foreign('booking_id')->references('id')->on('bookings');
+        });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        //
+    }
+}
diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index 7a02b347..1c05fbc3 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -345,7 +345,7 @@
         })
 
       axios
-        .get('/api/setting-supplier/')
+        .get('/api/booking/'+ this.$route.params.id +'/po')
         .then((response) => {
           loading.close()
           this.supplier_options = response.data
@@ -359,7 +359,7 @@
 
     },
     methods: {
-      submitChinaSlip(formName) {
+      uploadPo(formName) {
         this.loading_btn = true
 
         this.$refs[formName].validate((valid) => {
diff --git a/resources/assets/js/pages/settings/index.vue b/resources/assets/js/pages/settings/index.vue
index dcdac990..9dfd7811 100644
--- a/resources/assets/js/pages/settings/index.vue
+++ b/resources/assets/js/pages/settings/index.vue
@@ -4,9 +4,8 @@
       <card :title="$t('settings')" class="settings-card">
         <ul class="nav flex-column nav-pills">
           <li v-for="tab in tabs" :key="tab.route" class="nav-item">
-            <router-link :to="{ name: tab.route }" class="nav-link" active-class="active">
-              <fa :icon="tab.icon" fixed-width/>
-              {{ tab.name }}
+            <router-link v-if="(role == tab.role)" :to="{ name: tab.route }" class="nav-link" active-class="active">
+              <fa :icon="tab.icon" fixed-width/> {{ tab.name }}
             </router-link>
           </li>
         </ul>
@@ -22,50 +21,63 @@
 </template>
 
 <script>
-export default {
-  middleware: 'auth',
+  import {
+    mapGetters
+  } from 'vuex'
+  export default {
+    middleware: 'auth',
 
-  computed: {
-    tabs () {
-      return [
-        {
-          icon: 'user',
-          name: this.$t('profile'),
-          route: 'settings.profile'
-        },
-        {
-          icon: 'lock',
-          name: this.$t('password'),
-          route: 'settings.password'
-        },
-        {
-          icon: 'user',
-          name: this.$t('Supplier'),
-          route: 'settings.admin-supplier'
-        },
-        {
-          icon: 'cog',
-          name: this.$t('Credit Setting'),
-          route: 'settings.admin-credit-setting'
-        },
-        {
-          icon: 'flag',
-          name: this.$t('CIEF China Bank'),
-          route: 'settings.admin-china-bank'
-        },
-        {
-          icon: 'building',
-          name: this.$t('Bank Setting'),
-          route: 'settings.admin-bank-setting'
-        },
-      ]
+    computed: {
+      role() {
+        return this.$store.getters['auth/role']
+      },
+      tabs() {
+        return [{
+            icon: 'user',
+            name: this.$t('profile'),
+            route: 'settings.profile',
+            role: 'member'
+          },
+          {
+            icon: 'lock',
+            name: this.$t('password'),
+            route: 'settings.password',
+            role: 'member'
+          },
+          {
+            icon: 'user',
+            name: this.$t('Supplier'),
+            route: 'settings.admin-supplier',
+            role: 'admin'
+          },
+          {
+            icon: 'cog',
+            name: this.$t('Credit Setting'),
+            route: 'settings.admin-credit-setting',
+            role: 'admin'
+          },
+          {
+            icon: 'flag',
+            name: this.$t('CIEF China Bank'),
+            route: 'settings.admin-china-bank',
+            role: 'admin'
+          },
+          {
+            icon: 'building',
+            name: this.$t('Bank Setting'),
+            route: 'settings.admin-bank-setting',
+            role: 'admin'
+          },
+        ]
+      }
     }
+
+
   }
-}
 </script>
 
 <style>
-.settings-card .card-body {
-  padding: 0;
-}
-</style>
+  .settings-card .card-body {
+    padding: 0;
+  }
+</style>
\ No newline at end of file
diff --git a/routes/api.php b/routes/api.php
index 1b2ca525..fe413583 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -103,6 +103,9 @@ Route::group(['middleware' => ['role:admin']], function() {
 
 	Route::post('/booking/{id}/upload-china-bankslip','ChinaBankSlipController@store');
 	Route::patch('/booking/{id}/update-china-bankslip','ChinaBankSlipController@update');
+
+	Route::get('/booking/{id}/po', 'BookingController@showPurchaseOrder');
+	
 });