diff --git a/resources/assets/js/components/NewInvoice.vue b/resources/assets/js/components/NewInvoice.vue
index 229fd5bd..22b570e4 100644
--- a/resources/assets/js/components/NewInvoice.vue
+++ b/resources/assets/js/components/NewInvoice.vue
@@ -266,6 +266,18 @@
               </tr>
             </tbody>
             <tfoot>
+              <tr class="subtotal-line">
+                <td colspan="5"/>
+                <td class="subtotal-title text-center">
+                  Rounding
+                </td>
+                <td class="subtotal text-center">
+                  plus or minus some number
+                </td>
+                <td>
+                  &nbsp;
+                </td>
+              </tr>
               <tr class="subtotal-line">
                 <td colspan="5"/>
                 <td class="subtotal-title text-center">
@@ -278,6 +290,18 @@
                   &nbsp;
                 </td>
               </tr>
+              <tr class="service-charge">
+                <td colspan="5"/>
+                <td class="subtotal-title text-center">
+                  Service Charge
+                </td>
+                <td class="subtotal text-center">
+                  {{ service_charge }}
+                </td>
+                <td>
+                  &nbsp;
+                </td>
+              </tr>
               <tr v-if="tax > 0" class="gst-line">
                 <td colspan="5"/>
                 <td class="gst-title text-center">
@@ -477,6 +501,7 @@ export default {
         return {
           id: null,
           bia: null,
+          amount: null,
           user_bankslip_path: null,
           china_bankslip_path: null,
           marking: null
@@ -513,8 +538,10 @@ export default {
       rate: 0,
       service_charge: 0,
       amount: 0,
+      bia: 0,
       invoice_total: 0,
       tax: 0,
+      billing_fee: 0,
       subtotal: 0,
       total: 0,
       role: null,
@@ -591,16 +618,18 @@ export default {
       const {
         marking,
         tax,
-        service_charge,
         bia,
+        amount,
         rate
       } = this.booking_details
 
       this.form.formData.marking = marking
       this.tax = tax
-      this.service_charge = service_charge
+      this.amount = amount
       this.bia = bia
       this.rate = rate
+      this.service_charge = parseFloat(this.bia - (this.amount / this.rate)).toFixed(2)
+      this.total = this.service_charge // Will not work if there is tax. Temporary fix.
     }
   },
   mounted () {
@@ -651,11 +680,11 @@ export default {
     setTotal: function () {
       if (this.form.formData.lines.length < 1) {
         this.subtotal = 0
-        this.total = 0
+        this.total = this.service_charge // Temporary fix. Will return error if GST is implemented.
         return
       }
       this.subtotal = parseFloat(this.form.formData.lines.map(line => line.total).reduce((a, b) => parseFloat(a) + parseFloat(b))).toFixed(2)
-      this.total = parseFloat(+this.subtotal + (+this.subtotal * (+this.tax || 0) / 100)).toFixed(2)
+      this.total = parseFloat(+this.subtotal + (+this.subtotal * (+this.tax || 0) / 100) + +this.service_charge).toFixed(2)
     },
     clearAddLine: function () {
       this.form.addLine.order = null