diff --git a/resources/assets/js/pages/booking/completed.vue b/resources/assets/js/pages/booking/completed.vue
index 8ef4dfb1..e8c263a4 100644
--- a/resources/assets/js/pages/booking/completed.vue
+++ b/resources/assets/js/pages/booking/completed.vue
@@ -37,9 +37,9 @@
         </div>
       </div>
       <div class="col">
-        <div class="card">
+        <div v-if="booking_details.invoice_path[0] !== '/storage/'" class="card" >
           <div class="card-header">Invoice</div>
-          <div v-if="booking_details.invoice_path[0] !== '/storage/'">
+          <div >
             <div v-for="invoice in booking_details.invoice_path" :key="invoice" class="row" >
               <div class="col">
                 <a :href="getURL(invoice)" target="_blank">
@@ -50,16 +50,14 @@
               </div>
             </div>
           </div>
-          <div v-else>
-            <ul>
-              <li>
-                <a href="#">Download PO</a>
-              </li>
-              <li>
-                <a href="#">Download DO</a>
-              </li>
-            </ul>
-          </div>
+        </div>
+        <div v-else>
+          <button class="btn btn-success" type="button" @click="onDownloadPO">
+            Download PO
+          </button>
+          <button class="btn btn-primary" type="button" @click="onDownloadDO">
+            Download DO
+          </button>
         </div>
       </div>
     </div>
@@ -222,6 +220,12 @@ export default {
       var getUrl = window.location
       var baseUrl = getUrl.protocol + '//' + getUrl.host
       return baseUrl + path
+    },
+    onDownloadPO () {
+      alert('Downloading PO')
+    },
+    onDownloadDO () {
+      alert('Downloading DO')
     }
   }
 }