diff --git a/resources/assets/vue/components/orders/elements/OrderComponent.vue b/resources/assets/vue/components/orders/elements/OrderComponent.vue
index c3104ca9..2262d768 100644
--- a/resources/assets/vue/components/orders/elements/OrderComponent.vue
+++ b/resources/assets/vue/components/orders/elements/OrderComponent.vue
@@ -2,7 +2,7 @@
     <div class="row m-l-0 m-r-0 m-b-30 parentContainer">
         <div class="col bg-white">
             <div class="row align-items-center">
-                <div class="col no-padding">
+                <div class="col-6 no-padding">
                     <div class="row">
                         <div class="col">
                             <a :href="route('order.qr.download', item.id)" target="_blank">
@@ -13,7 +13,7 @@
                         </div>
                     </div>
                 </div>
-                <div class="col">
+                <div class="col-6">
                     <div class="row m-b-5">
                         <div class="col">
                             <small class="fs-10 all-caps muted">Order No.</small>
@@ -28,8 +28,20 @@
                     </div>
                     <div class="row m-b-5">
                         <div class="col">
-                            <small class="fs-10 all-caps muted">Delivery Address</small>
-                            <h6 class="no-margin small">{{item.address.reference}} <i class="fa fa-info-circle m-l-5" v-tooltip:right="item.address.street_one+' '+(item.address.street_two ? item.address.street_two : '')+', '+ item.address.district.name+', '+item.address.post_code+' '+item.address.state.name+', '+item.address.country.name" ></i></h6>
+                            <div class="row">
+                                <div class="col">
+                                    <small class="fs-10 all-caps muted">Delivery Address</small>
+                                </div>
+                            </div>
+                            <div class="row">
+                                <div class="col-9 p-r-0">
+                                    <h6 class="no-margin small" style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;">{{item.address.reference}}</h6>
+                                </div>
+                                <div class="col p-l-0">
+                                    <div class="row"><div class="col"><div class="row"><div class="col"></div></div><div class="row"><div class="col"></div></div></div></div>
+                                    <i class="fa fa-info-circle m-l-5" data-html="true" v-tooltip:right="'<h6 class=\'text-white text-left fs-13 m-t-0 m-b-5 semi-bold\'>'+item.address.reference+'</h6><p class=\'text-white text-left lh-17 no-margin\'>'+item.address.street_one+' '+(item.address.street_two ? item.address.street_two : '')+', '+ item.address.district.name+', '+item.address.post_code+' '+item.address.state.name+', '+item.address.country.name+'</p>'" ></i>
+                                </div>
+                            </div>
                         </div>
                     </div>
                 </div>