diff --git a/resources/assets/js/pages/admin/booking/uploadInvoice.vue b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
index bbe208f8..cd29d071 100644
--- a/resources/assets/js/pages/admin/booking/uploadInvoice.vue
+++ b/resources/assets/js/pages/admin/booking/uploadInvoice.vue
@@ -3,7 +3,7 @@
     <x2-progress-track v-if="(trackerConfig.term == 'x2_cash' || trackerConfig.term == 'x2_cheque' || trackerConfig.term == 'x2_ba')" v-model="trackerConfig" />
     <progress-track v-else v-model="trackerConfig" />
 
-    <div id="old-invoice">
+    <div v-if="isLegacy" id="old-invoice">
       <div align="center">
         <h4 style="margin-top:5%" />
         <br>
@@ -267,6 +267,9 @@
       </el-row>
       <br>
     </div>
+    <div v-else>
+      <new-invoice :booking_details="booking_details" :booking_id="booking_id.toString()"/>
+    </div>
   </el-main>
 </template>
 <style>
@@ -289,11 +292,13 @@
 import ProgressTrack from '~/components/AdminProgressTrack'
 import X2ProgressTrack from '~/components/X2AdminProgressTrack'
 import axios from 'axios'
+import NewInvoice from '~/components/NewInvoice'
 
 export default {
   components: {
     'progress-track': ProgressTrack,
-    'x2-progress-track': X2ProgressTrack
+    'x2-progress-track': X2ProgressTrack,
+    'new-invoice': NewInvoice
   },
   directives: {
     insertMessage: function (canvasElement, binding) {
@@ -616,7 +621,7 @@ export default {
     },
     // TODO : refactor into library since many pages are using this
     getExtension (path) {
-      if (!path) {
+      if (path === null) {
         return null
       }
       let index = path.lastIndexOf('.') + 1