diff --git a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
index e405325a..cde4d84d 100644
--- a/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
+++ b/resources/assets/vue/components/bookings/forms/PurchaseOrderFormComponent.vue
@@ -20,13 +20,13 @@
                             <div class="row m-t-20" v-if="!submitted">
                                 <div class="col">
                                     <div class="row">
-                                        <div class="col-4 p-r-5">
+                                        <div class="col-sm-12 col-md-4 pr-md-1">
                                             <div class="form-group form-group-default b-rad-none">
                                                 <label>Stock Code</label>
                                                 <input type="text" class="form-control b-rad-none" v-model="product.stockCode" />
                                             </div>
                                         </div>
-                                        <div class="col p-l-5">
+                                        <div class="col-sm-12 col-md pl-md-1">
                                             <div class="form-group form-group-default b-rad-none required">
                                                 <label>description</label>
                                                 <input class="form-control b-rad-none" rows="1" @keyup="onlyEnglish($event)" v-model="product.description">
@@ -34,13 +34,13 @@
                                         </div>
                                     </div>
                                     <div class="row align-items-center">
-                                        <div class="col-6 p-r-5">
+                                        <div class="col-sm-12 col-md-6 pr-md-1">
                                             <div class="form-group form-group-default b-rad-none required">
                                                 <label>Unit Price</label>
                                                 <input type="text" class="form-control b-rad-none" placeholder="Unit Price" v-model.lazy="product.unit_price" v-money="productPrice" />
                                             </div>
                                         </div>
-                                        <div class="col-6 p-l-5">
+                                        <div class="col-sm-12 col-md-6 pl-md-1">
                                             <div class="form-group form-group-default b-rad-none no-padding no-border">
                                                 <div class="row no-margin">
                                                     <div class="col-auto bg-master-lightest pointer" @mousedown="updateQuantity" @mouseleave="clearInterval" @mouseup="clearInterval" @touchstart="updateQuantity" @touchend="clearInterval" @touchcancel="clearInterval">
@@ -66,11 +66,11 @@
                                         </div>
                                     </div>
                                     <div class="row">
-                                        <div class="col-4">
+                                        <div class="col-sm-12 col-md-4 p-b-15 pb-md-0">
                                             <p class="m-b-0 small">Total</p>
                                             <h6 class="no-margin bold text-complete">{{data.fixed_currency.short_code}} {{productTotal.toFixed(3)}}</h6>
                                         </div>
-                                        <div class="col">
+                                        <div class="col-sm-12 col-md">
                                             <button class="btn btn-sm btn-block btn-complete b-rad-none" @click="addProduct()">Add Product</button>
                                         </div>
                                     </div>