diff --git a/manufacturing_overview/public/js/manufacturing_overview_desk.vue b/manufacturing_overview/public/js/manufacturing_overview_desk.vue
index 85ba85c..356fe9b 100644
--- a/manufacturing_overview/public/js/manufacturing_overview_desk.vue
+++ b/manufacturing_overview/public/js/manufacturing_overview_desk.vue
@@ -1,28 +1,22 @@
 <template>
-  <div class="col-12 col-lg-4 layout-main-section-wrapper">
-    <div class="layout-main-section">
-      <div class="widget links-widget-box" style="height: auto">
-        <div class="widget-head">
-          <div class="widget-label">
-            <div class="widget-title"><svg class="icon  icon-lg" style="">
-                <!-- <use class="" href="#icon-file"></use> -->
-              </svg> <span class="ellipsis" title="Manufacturing OVerview">Manufacturing Overview</span>
-              <!-- <span>
-                <button class="btn btn-secondary btn-default btn-sm" data-label="Mark sent">Mark
-                  sent</button>
-              </span> -->
-            </div>
+  <div class="layout-main-section">
+    <div class="widget quick-list-widget-box" style="height: auto">
+      <div class="widget-head">
+        <div class="widget-label">
+          <div class="widget-title">
+            <div class="widget-title"><span class="ellipsis" title="Sales Order">Delivery Overview</span></div>
             <div class="widget-subtitle"></div>
           </div>
-          <div class="widget-control"></div>
-        </div>
-        <div class="widget-body">
-          <manufacturing-overview-row v-for="so in salesorderData" :key="so.name" v-bind:qty="so.qty"
-            v-bind:item_name="so.item_name" v-bind:item_code="so.item_code" v-bind:customer="so.customer"
-            v-bind:delivery_date="so.delivery_date" v-bind:status="so.status" v-bind:link="so.link"
-            v-bind:reference="so.parent" v-bind:due_in="so.due_in">
-          </manufacturing-overview-row>
+          <div class="widget-subtitle"></div>
         </div>
+        <div class="widget-control"></div>
+      </div>
+      <div class="widget-body">
+        <manufacturing-overview-row v-for="so in salesorderData" :key="so.name" v-bind:qty="so.qty"
+          v-bind:item_name="so.item_name" v-bind:item_code="so.item_code" v-bind:customer="so.customer"
+          v-bind:delivery_date="so.delivery_date" v-bind:status="so.status" v-bind:link="so.link"
+          v-bind:reference="so.parent" v-bind:due_in="so.due_in">
+        </manufacturing-overview-row>
       </div>
     </div>
   </div>
diff --git a/manufacturing_overview/public/js/manufacturing_overview_page.js b/manufacturing_overview/public/js/manufacturing_overview_page.js
index 134f875..f24d012 100644
--- a/manufacturing_overview/public/js/manufacturing_overview_page.js
+++ b/manufacturing_overview/public/js/manufacturing_overview_page.js
@@ -1,11 +1,12 @@
+import { createApp } from "vue";
+
 import ManufacturingOverviewDesk from "./manufacturing_overview_desk.vue";
 
 $(document).ready(function () {
     $(".layout-main-section-wrapper").after('<div class="col-12 col-lg-4 layout-main-section-wrapper" id="manufacturing-overview-body"></div>');
-    var pod = new Vue({
-        el: "#manufacturing-overview-body",
-        render(h) {
-            return h(ManufacturingOverviewDesk, {});
-        }
-    });
-});
\ No newline at end of file
+
+    const moapp = createApp(ManufacturingOverviewDesk)
+
+    moapp.mount("#manufacturing-overview-body");
+});
+
diff --git a/manufacturing_overview/public/js/manufacturing_overview_row.vue b/manufacturing_overview/public/js/manufacturing_overview_row.vue
index a247c19..00d22d9 100644
--- a/manufacturing_overview/public/js/manufacturing_overview_row.vue
+++ b/manufacturing_overview/public/js/manufacturing_overview_row.vue
@@ -1,6 +1,6 @@
 <template>
-  <a @click="pushRoute(link)" class="row link-item text-wrap ellipsis onbpoard-spotlight" type="Link">
-    <div class="col col-xs-8">
+  <div @click="pushRoute(link)" class="quick-list-item align-items-start">
+    <div class="col-1">
       <span class="indicator-pill no-margin" v-bind:class="{
         red: status === 'No Work Order',
         blue: status === 'Partially Delivered',
@@ -9,35 +9,42 @@
         yellow: status === 'To Produce',
         grey: status === 'Unknown',
       }"></span>
-      <span class="widget-subtitle">{{ qty }}</span> -
-      <span class="widget-title">{{ item_name }}</span>
+    </div>
+    <div class="col col-xs-8">
+
+      <span class="ellipsis title"><b>{{ qty }}</b> - {{ item_name }}</span>
       <div>
         <small v-if="customer && item_code" class="color-secondary">{{ customer }} -
-          <a @click="pushRoute('/app/item/' + item_code)" type="Link">{{
-              item_code
-          }}</a></small>
+          <a class="underline-hover" @click="pushRoute('/app/item/' + item_code)" v-on:click.stop>{{
+            item_code
+          }}</a>
+        </small>
         <small v-else-if="customer" class="color-secondary">{{
-            customer
+          customer
         }}</small>
         <small v-else-if="item_code" class="color-secondary">{{
-            item_code
+          item_code
         }}</small>
       </div>
       <div>
-        <small class="color-secondary">{{ reference }}</small>
+        <small>
+          <a class="underline-hover" @click="pushRoute('/app/sales-order/' + reference)" v-on:click.stop>{{
+            reference
+          }}</a>
+        </small>
       </div>
     </div>
 
-    <div v-if="due_in < 0" class="text-muted ellipsis color-secondary col col-xs-4 text-right">
+    <div v-if="due_in < 0" class="text-muted ellipsis color-secondary col col-xs-3 text-right">
       <b style="color: red">{{ delivery_date }}</b>
     </div>
-    <div v-else-if="due_in === 0" class="text-muted ellipsis color-secondary col col-xs-4 text-right">
+    <div v-else-if="due_in === 0" class="text-muted ellipsis color-secondary col col-xs-3 text-right">
       <b style="color: black">{{ delivery_date }}</b>
     </div>
-    <div v-else class="text-muted ellipsis color-secondary col col-xs-4 text-right">
+    <div v-else class="text-muted ellipsis color-secondary col col-xs-3 text-right">
       {{ delivery_date }}
     </div>
-  </a>
+  </div>
 </template>
 
 <script>
@@ -63,5 +70,7 @@ export default {
 </script>
 
 <style>
-
+.underline-hover:hover {
+  text-decoration: underline;
+}
 </style>
\ No newline at end of file