diff --git a/app/Http/Controllers/BookingController.php b/app/Http/Controllers/BookingController.php
index 0ae1355e..89c78366 100644
--- a/app/Http/Controllers/BookingController.php
+++ b/app/Http/Controllers/BookingController.php
@@ -295,11 +295,17 @@ class BookingController extends Controller
 		$user_po = new PurchaseOrder;
 		$user_po->image_path = $unique_image_path;
 		$user_po->book_id = $booking->id;
-		$user_po->amount = $request->input('amount');
 		$user_po->save();
 
 		return response()->json(['message'=>'Success'],200);
-	}
+    }
+    
+    public function confirmPurchaseOrder($id){
+        $booking = Booking::where('user_id',Auth::user()->id)->where('id',$id)->first();
+        $booking->status = 5; 
+        $booking->save();
+        return response()->json(['message'=>'Success'],200);
+    }
 
 	public function delete(Booking $book_id)
 	{
diff --git a/database/migrations/2018_06_21_072354_remove_amountcolumn_from_po_table.php b/database/migrations/2018_06_21_072354_remove_amountcolumn_from_po_table.php
new file mode 100644
index 00000000..d350c3c1
--- /dev/null
+++ b/database/migrations/2018_06_21_072354_remove_amountcolumn_from_po_table.php
@@ -0,0 +1,34 @@
+<?php
+
+use Illuminate\Support\Facades\Schema;
+use Illuminate\Database\Schema\Blueprint;
+use Illuminate\Database\Migrations\Migration;
+
+class RemoveAmountcolumnFromPoTable extends Migration
+{
+    /**
+     * Run the migrations.
+     *
+     * @return void
+     */
+    public function up()
+    {
+        Schema::table('purchase_orders', function (Blueprint $table) {
+            $table->dropColumn('amount');
+        // $table->dropColumn('reject_reason');
+         });
+    }
+
+    /**
+     * Reverse the migrations.
+     *
+     * @return void
+     */
+    public function down()
+    {
+        Schema::table('purchase_orders', function (Blueprint $table) {
+            $table->double('amount');
+        // $table->dropColumn('reject_reason');
+         });
+    }
+}
diff --git a/resources/assets/js/pages/booking/uploadPo.vue b/resources/assets/js/pages/booking/uploadPo.vue
index fb2a2c31..6570f5a5 100644
--- a/resources/assets/js/pages/booking/uploadPo.vue
+++ b/resources/assets/js/pages/booking/uploadPo.vue
@@ -19,19 +19,22 @@
                     </div>
 
                     <!-- upload image -->
-                    <el-upload class="upload-demo" drag action="https://jsonplaceholder.typicode.com/posts/" :on-preview="handlePreview" :on-remove="handleRemove"
-                        :file-list="fileList" multiple>
+                    <el-upload class="upload-demo" drag v-bind:action="'/api/booking/' + booking_id + '/upload-po'" 
+                        :on-exceed="handleExceed"
+                        :on-preview="handlePreview" 
+                        :on-remove="handleRemove"
+                        multiple>
                         <i class="el-icon-upload"></i>
                         <div class="el-upload__text">Drop file here or
                             <em>click to upload</em>
                         </div>
-                        <div class="el-upload__tip" slot="tip">jpg/png files with a size less than 500kb</div>
+                        <div class="el-upload__tip" slot="tip">jpg/png/pdf files with a size less than 3mb</div>
                     </el-upload>
 
                     <br>
 
                     <div class="bottom clearfix" style="text-align:right;">
-                        <el-button @click="uploadPo" type="primary">Submit</el-button>
+                        <el-button @click="uploadPo" :loading="loading" type="primary">Submit</el-button>
                     </div>
                     <!-- upload image end -->
 
@@ -103,6 +106,7 @@
 <script>
     import VueCountdown from '@dmaksimovic/vue-countdown'
     import ProgressTrack from '~/components/ProgressTrack'
+    import axios from 'axios'
 
     export default {
         components: {
@@ -110,7 +114,9 @@
         },
         data() {
             return {
+                booking_id: this.$route.params.id,
                 status: 5,
+                loading: false,
                 bookingConfirmTable: [{
                     data1: 'Order Number :',
                     data2: '001'
@@ -156,15 +162,42 @@
         },
         methods: {
             uploadPo(){
-                this.$message({
-                showClose: true,
-                message: 'Your PO has been uploaded. We are processing the Invoice.',
-                type: 'success',
-                duration: 5000,
-                });
-                this.$router.push({
-                name: 'home'
+                this.loading = true
+                axios
+                .post('/api/booking/' + this.$route.params.id + '/confirm-po')
+                .then((response) => {
+                    console.log(response)
+                    this.$message({
+                    showClose: true,
+                    message: 'Your PO has been uploaded. We are processing the Invoice.',
+                    type: 'success',
+                    duration: 5000,
+                    });
+                    this.$router.push({
+                    name: 'home'
+                    })
+                    this.loading = false
+
+                }).catch((error) => {
+                    console.log(error)
+                    loading.close()
+                    this.$router.push({
+                        name: 'notfound'
+                    })
+                    this.loading = false
                 })
+            },
+            handleRemove(file, fileList) {
+                console.log(file, fileList);
+            },
+            handlePreview(file) {
+                console.log(file);
+            },
+            handleExceed(files, fileList) {
+                this.$message.warning(`The limit is 3, you selected ${files.length} files this time, add up to ${files.length + fileList.length} totally`);
+            },
+            beforeRemove(file, fileList) {
+                return this.$confirm(`确定移除 ${ file.name }？`);
             }
         }
     }
diff --git a/resources/assets/js/pages/booking/uploadUserBankSlip.vue b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
index cc394a7e..db35014e 100644
--- a/resources/assets/js/pages/booking/uploadUserBankSlip.vue
+++ b/resources/assets/js/pages/booking/uploadUserBankSlip.vue
@@ -32,7 +32,7 @@
 
     <div align="center">
 
-      <vue-countdown countdownend="handleCoutdownend" :time="booking.timeout">
+      <vue-countdown :countdownend="handleCoutdownend" :time="booking.timeout">
         <template slot-scope="props">Time Remaining：<br>{{ props.days }} days, {{ props.hours }} hours, {{ props.minutes }} minutes, {{ props.seconds }} seconds.</template>
       </vue-countdown>
       <!-- <button v-on:click="startTimer">Start timer</button> -->
diff --git a/resources/assets/js/pages/home.vue b/resources/assets/js/pages/home.vue
index da7696fa..b53ed7d8 100644
--- a/resources/assets/js/pages/home.vue
+++ b/resources/assets/js/pages/home.vue
@@ -493,27 +493,27 @@
             })
 
           case 2:
-            this.$router.push({
-              name: 'booking.user.upload',
-              params: {id: booking_id  }
-            })
-            break;
-          case 3:
-            this.$router.push({
+              this.$router.push({
               name: 'booking.confirmation',
               params: {id: booking_id  }
             })
             break;
-          case 4:
-            this.$router.push({
+          case 3:
+           this.$router.push({
               name: 'booking.transfer',
               params: {id: booking_id  }
             })
             break;
+          case 4:
+           this.$router.push({
+              name: 'booking.user.uploadpo',
+              params: {id: booking_id  }
+            })
+            break;
 
           case 5:
             this.$router.push({
-              name: 'booking.user.uploadpo',
+              name: 'booking.user.pocomplete',
               params: {id: booking_id  }
             })
             break;
diff --git a/routes/api.php b/routes/api.php
index 47a3b639..28fa46e0 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -36,7 +36,8 @@ Route::group(['middleware' => 'auth:api'], function () {
 	Route::post('/booking/calculation', 'BookingController@calculation');
 	Route::post('/booking/{book_id}/cancel', 'BookingController@cancel');
 	Route::post('/booking/{id}/upload-user-bankslip', 'BookingController@uploadbankslip');
-	Route::post('/booking/{id}/upload-po', 'BookingController@uploadPurchaseOrder');
+    Route::post('/booking/{id}/upload-po', 'BookingController@uploadPurchaseOrder');
+    Route::post('/booking/{id}/confirm-po', 'BookingController@confirmPurchaseOrder');
 	Route::patch('/booking/{id}/bankslip-amount', 'BookingController@updateBankSlipAmount');
 	Route::post('booking/{book_id}/reject-bank-slip','BookingController@rejectBankSlip');
 	Route::post('booking/{book_id}/approve-bank-slip','BookingController@approveBankSlip');