diff --git a/app/Http/Controllers/InvoiceController.php b/app/Http/Controllers/InvoiceController.php
index 8c8b6844..29c72492 100644
--- a/app/Http/Controllers/InvoiceController.php
+++ b/app/Http/Controllers/InvoiceController.php
@@ -3,6 +3,7 @@
 namespace App\Http\Controllers;
 
 use Illuminate\Http\Request;
+use Illuminate\Validation\Rule;
 use Illuminate\Routing\ResponseFactory;
 use Illuminate\Support\MessageBag;
 use Illuminate\Support\Facades\DB;
@@ -26,7 +27,10 @@ class InvoiceController extends Controller
         }
         $lines = InvoiceDetails::where('invoice_id', $invoice['id'])->orderBy('order', 'asc')->get();
 
+        $status = InvoiceStatuses::where('invoice_id', $invoice['id'])->orderBy('created_at', 'asc')->get();
+
         $invoice->lines = $lines;
+        $invoice->status = $status;
         return response()->json($invoice, 200);
 
     }
@@ -121,6 +125,12 @@ class InvoiceController extends Controller
 
         $invoice->lines = $invoice_details;
 
+        // Post status as pending
+        $status = new InvoiceStatuses;
+        $status->status = 'pending';
+        $status->comment = '';
+        $status->invoice_id = $invoice->id;
+        $status->save();
 
         if($invoice_details) {
             return $this->show($id);
@@ -134,9 +144,29 @@ class InvoiceController extends Controller
 
     }
 
-    public function updateStatus(Request $request, $id)
+    public function postStatus(Request $request, $id)
     {
 
+        // validate $id is integer
+
+        $validatedData = $request->validate([
+            'status' => ['required', Rule::in('request_change', 'approve')],
+            'comment' => Rule::requiredIf($request->status === 'request_change')
+        ]);
+
+        // Save to database
+
+        $status = new InvoiceStatuses;
+        $status->status = $validatedData['status'];
+        $status->comment = $validatedData['comment'];
+        $status->invoice_id = Invoice::where('booking_id', $id)->first()['id'];
+        $status->save();
+
+        // Response
+
+        return response()->json($status, 201);
+
+
     }
 
     public function getPO($id)
diff --git a/resources/assets/js/components/NewInvoice.vue b/resources/assets/js/components/NewInvoice.vue
index 0d1f6979..f93ff154 100644
--- a/resources/assets/js/components/NewInvoice.vue
+++ b/resources/assets/js/components/NewInvoice.vue
@@ -1,12 +1,20 @@
 /* eslint-disable camelcase */
 <template>
   <div class="invoice">
-    <h3 v-if="created" class="title">
-      Purchase Order (Pending Approval)
-    </h3>
-    <h3 v-else class="title">
-      Purchase Order
-    </h3>
+    <div class="header-container">
+      <h3 v-if="status === 'pending'" class="title">
+        Purchase Order (Pending Approval)
+      </h3>
+      <h3 v-else-if="status === 'approve'" class="title" >
+        Purchase Order (Approved)
+      </h3>
+      <h3 v-else-if="status === 'request_change'" class="title">
+        Purchase Order (Please Change)
+      </h3>
+      <h3 v-else class="title">
+        Purchase Order
+      </h3>
+    </div>
 
     <div class="invoice-container">
       <form @submit.prevent="submitForm">
@@ -289,6 +297,43 @@
         </div>
       </form>
     </div> <!-- invoice-container -->
+    <div v-if="role === 'admin'" class="admin-panel">
+      <form @submit.prevent="onSubmitStatus">
+        <h5>Admin Panel</h5>
+        <div class="form-group">
+          <label for="action">Action</label>
+          <select id="action"
+                  v-model="$v.form.postStatus.status.$model"
+                  :class="{
+                    'is-invalid': $v.form.postStatus.status.$invalid && $v.form.postStatus.status.$dirty,
+                    'is-valid': !$v.form.postStatus.status.$invalid && $v.form.postStatus.status.$dirty
+                  }"
+                  name="action"
+                  class="form-control">
+            <option value="approve">Approve</option>
+            <option value="request_change">Request Change</option>
+          </select>
+          <div class="invalid-feedback">
+            Action Required
+          </div>
+        </div>
+        <div class="form-group">
+          <label for="comment">Comment</label>
+          <textarea id="comment"
+                    v-model="$v.form.postStatus.comment.$model"
+                    :class="{
+                      'is-invalid': $v.form.postStatus.comment.$invalid && $v.form.postStatus.comment.$dirty,
+                      'is-valid': !$v.form.postStatus.comment.$invalid && $v.form.postStatus.comment.$dirty
+                    }"
+                    name="comment"
+                    cols="30" rows="3" class="form-control" />
+          <div class="invalid-feedback">
+            Comment required if you are requesting change from customer.
+          </div>
+        </div>
+        <button type="submit" class="btn btn-success">Submit</button>
+      </form>
+    </div>
   </div>
 </template>
 <style>
@@ -308,6 +353,7 @@
   .buyer-detail {
     grid-area: buyer-detail;
     width: 100%;
+    margin-bottom: 3em;
   }
   .card-body {
     display: flex !important;
@@ -346,12 +392,22 @@
     'billing-detail-title conversion-rate'
     'billing-detail-lines billing-detail-lines';
   }
+  .header-container {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+  }
+  .admin-panel {
+    margin-left: 3em;
+    margin-right: 3em;
+  }
 </style>
 
 <script>
 import Vue from 'vue'
 import Vuelidate from 'vuelidate'
-import { required, numeric, decimal } from 'vuelidate/lib/validators'
+import { required, numeric, decimal, requiredIf } from 'vuelidate/lib/validators'
 import axios from 'axios'
 Vue.use(Vuelidate)
 
@@ -404,6 +460,10 @@ export default {
           unit_price_rm: null,
           stock_code: null,
           total: null
+        },
+        postStatus: {
+          status: null,
+          comment: null
         }
       },
       rate: 0,
@@ -414,13 +474,13 @@ export default {
       subtotal: 0,
       total: 0,
       role: null,
-      created: false
+      status: null
     }
   },
   computed: {
     editable: function () {
       // Not editable if created and not admin
-      return this.role === 'admin' || !this.created
+      return this.role === 'admin' || this.status === null || this.status === 'request_change'
     }
   },
   validations: {
@@ -465,6 +525,16 @@ export default {
           required,
           decimal
         }
+      },
+      postStatus: {
+        status: {
+          required
+        },
+        comment: {
+          required: requiredIf(function () {
+            return this.form.postStatus.status === 'request_change'
+          })
+        }
       }
     }
   },
@@ -587,11 +657,14 @@ export default {
           this.form.formData.contact_no = resp.data.contact_no
           this.form.formData.address = resp.data.address
 
+          this.form.formData.lines = []
+
           resp.data.lines.forEach((el, i) => {
             this.form.formData.lines.push(el)
           })
 
-          this.created = true
+          this.status = resp.data.status[resp.data.status.length - 1].status
+          console.log(this.status)
           this.setTotal()
         })
     },
@@ -602,6 +675,19 @@ export default {
         .then(resp => {
           this.role = resp.data.role
         })
+    },
+    onSubmitStatus () {
+      if (this.$v.form.postStatus.$invalid) {
+        this.$v.form.postStatus.$touch()
+        return
+      }
+      const url = '/api/invoice/' + this.booking_id + '/comment'
+      axios
+        .post(url, this.form.postStatus)
+        .then(resp => {
+          this.getInvoice()
+          alert('Status Updated')
+        })
     }
   }
 }