diff --git a/ayanova/src/components/work-order-header.vue b/ayanova/src/components/work-order-header.vue
index 9677b465..02e4d2af 100644
--- a/ayanova/src/components/work-order-header.vue
+++ b/ayanova/src/components/work-order-header.vue
@@ -1,6 +1,48 @@
 <template>
   <div>
     <h1>WorkOrder header</h1>
+    <v-row>
+      <v-col cols="12" sm="6" lg="4" xl="3" v-if="value.serial != 0">
+        <template v-if="canEditSerial">
+          <v-text-field
+            v-model="value.serial"
+            :readonly="formState.readOnly"
+            :label="$ay.t('WorkOrderSerialNumber')"
+            ref="serial"
+            data-cy="serial"
+            :rules="[
+              form().integerValid(this, 'serial'),
+              form().required(this, 'serial')
+            ]"
+            :error-messages="form().serverErrors(this, 'serial')"
+            @input="fieldValueChanged('serial')"
+          ></v-text-field>
+        </template>
+        <template v-else>
+          <div>
+            <span class="text-caption">
+              {{ $ay.t("WorkOrderSerialNumber") }}</span
+            >
+          </div>
+          <div>
+            <span class="text-h5">{{ value.serial }}</span>
+          </div>
+        </template>
+      </v-col>
+
+      <v-col v-if="form().showMe(this, 'Notes')" cols="12">
+        <v-textarea
+          v-model="value.notes"
+          :readonly="formState.readOnly"
+          :label="$ay.t('WorkOrderSummary')"
+          :error-messages="form().serverErrors(this, 'notes')"
+          ref="notes"
+          data-cy="notes"
+          @input="fieldValueChanged('notes')"
+          auto-grow
+        ></v-textarea>
+      </v-col>
+    </v-row>
   </div>
 </template>
 <script>
@@ -10,18 +52,19 @@
 
 export default {
   data() {
-    return {};
+    return {
+      canEditSerial: window.$gz.role.hasRole([
+        window.$gz.role.AUTHORIZATION_ROLES.BizAdminFull
+      ])
+    };
   },
 
   props: {
     value: {
-      default: "{}",
-      type: String
+      default: null,
+      type: Object
     },
-    formKey: { type: String, default: "" }, //used to grab template from store
-    readonly: Boolean,
-    disabled: Boolean,
-    parentVM: {
+    pvm: {
       default: null,
       type: Object
     }
@@ -32,14 +75,108 @@ export default {
       return window.$gz.form;
     },
     fieldValueChanged(ref) {
-      if (
-        !this.parentVM.formState.loading &&
-        !this.parentVM.formState.readonly
-      ) {
-        window.$gz.form.fieldValueChanged(this.parentVM, ref);
+      if (!this.formState.loading && !this.formState.readonly) {
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
     }
   },
-  computed: {}
+  computed: {
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    }
+  }
 };
+/*
+ data: {
+            id: 10,
+            concurrency: 7713074,
+            serial: 10,
+            notes:
+              "Sequi quia est occaecati vel aperiam dicta praesentium velit et.",
+            wiki: null,
+            customFields: null,
+            tags: ["orange", "violet"],
+            customerId: 14,
+            projectId: null,
+            internalReferenceNumber: "irf-4603",
+            customerReferenceNumber: "crf-4720",
+            customerContactName: "contact name here",
+            fromQuoteId: null,
+            fromPMId: null,
+            fromCSRId: null,
+            serviceDate: "2020-09-03T03:06:41.238542Z",
+            completeByDate: "2020-09-08T03:06:41.238542Z",
+            invoiceNumber: null,
+            customerSignature: null,
+            customerSignatureName: null,
+            customerSignatureCaptured: "0001-01-01T00:00:00Z",
+            postAddress: null,
+            postCity: null,
+            postRegion: null,
+            postCountry: null,
+            postCode: null,
+            address: null,
+            city: null,
+            region: null,
+            country: null,
+            latitude: null,
+            longitude: null,
+            items: [
+              {
+                id: 20,
+                concurrency: 7713074,
+                notes: "itemnotes",
+                wiki: null,
+                customFields: null,
+                tags: [],
+                workOrderId: 10,
+                techNotes: "technotes",
+                workorderItemStatusId: null,
+                workorderItemPriorityId: null,
+                requestDate: "2020-09-03T03:06:41.238542Z",
+                warrantyService: false,
+                isDirty: false,
+                expenses: [],
+                labors: [],
+                loans: [],
+                parts: [],
+                partRequests: [],
+                scheduledUsers: [
+                  {
+                    id: 39,
+                    concurrency: 7713074,
+                    userId: 30,
+                    estimatedQuantity: 1,
+                    startDate: null,
+                    stopDate: null,
+                    serviceRateId: null,
+                    isDirty: false,
+                    workOrderItemId: 20
+                  },
+                  {
+                    id: 40,
+                    concurrency: 7713074,
+                    userId: 10,
+                    estimatedQuantity: 2,
+                    startDate: null,
+                    stopDate: null,
+                    serviceRateId: null,
+                    isDirty: false,
+                    workOrderItemId: 20
+                  }
+                ],
+                tasks: [],
+                travels: [],
+                units: [],
+                outsideServices: []
+              }
+            ],
+            states: [],
+            isDirty: false
+          }
+        }
+*/
 </script>
diff --git a/ayanova/src/components/work-order-items.vue b/ayanova/src/components/work-order-items.vue
index c2ac884b..c3b6fefe 100644
--- a/ayanova/src/components/work-order-items.vue
+++ b/ayanova/src/components/work-order-items.vue
@@ -1,6 +1,14 @@
 <template>
   <div>
     <h2>WorkOrder items here</h2>
+    <template v-if="value.items.count > 1">
+      table of woitems here
+    </template>
+    <template v-if="pvm.selectedItemIndex">
+      woitem is selected
+    </template>
+
+    woitemfields
     <GzWoItemScheduledUsers data-cy="woItemScheduledUsers" />
   </div>
 </template>
@@ -17,16 +25,12 @@ export default {
   data() {
     return {};
   },
-
   props: {
     value: {
-      default: "{}",
-      type: String
+      default: null,
+      type: Object
     },
-    formKey: { type: String, default: "" }, //used to grab template from store
-    readonly: Boolean,
-    disabled: Boolean,
-    parentVM: {
+    pvm: {
       default: null,
       type: Object
     }
@@ -37,14 +41,18 @@ export default {
       return window.$gz.form;
     },
     fieldValueChanged(ref) {
-      if (
-        !this.parentVM.formState.loading &&
-        !this.parentVM.formState.readonly
-      ) {
-        window.$gz.form.fieldValueChanged(this.parentVM, ref);
+      if (!this.formState.loading && !this.formState.readonly) {
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
       }
     }
   },
-  computed: {}
+  computed: {
+    formState: function() {
+      return this.pvm.formState;
+    },
+    formCustomTemplateKey: function() {
+      return this.pvm.formCustomTemplateKey;
+    }
+  }
 };
 </script>
diff --git a/ayanova/src/views/svc-workorder.vue b/ayanova/src/views/svc-workorder.vue
index 4362ab0c..a62a2c5d 100644
--- a/ayanova/src/views/svc-workorder.vue
+++ b/ayanova/src/views/svc-workorder.vue
@@ -4,8 +4,20 @@
     <div v-if="formState.ready">
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
       <v-form ref="form">
-        <GzWoHeader data-cy="woHeader" />
-        <GzWoItems data-cy="woItems" />
+        <GzWoHeader
+          v-model="obj"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly"
+          :pvm="this"
+          data-cy="woHeader"
+        />
+        <GzWoItems
+          v-model="obj"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly"
+          :pvm="this"
+          data-cy="woItems"
+        />
       </v-form>
     </div>
     <template v-if="!formState.ready">
@@ -73,6 +85,9 @@ export default {
       });
 
       generateMenu(vm);
+      if (vm.obj.items.count > 0) {
+        selectedItemIndex = 0;
+      }
     } catch (error) {
       window.$gz.errorHandler.handleFormError(error, vm);
     } finally {
@@ -100,19 +115,58 @@ export default {
         //IMPORTANT NOTE: Fields that are NON NULLABLE in the schema for the table but *are* hideable **MUST** have a default value set here or else there will be no way to save the record
         //I.E. Serial, usertype fields, ACTIVE
         //Also, if it's a non-nullable Enum backed field then it should have a valid selection i.e. not zero if there is no zero
+        // {
+        //   id: 0,
+        //   concurrency: 0,
+        //   name: null,
+        //   active: true,
+        //   notes: null,
+        //   wiki: null,
+        //   customFields: "{}",
+        //   tags: [],
+        //   dateStarted: window.$gz.locale.nowUTC8601String(),
+        //   dateCompleted: null,
+        //   workorderOverseerId: null,
+        //   accountNumber: null
+        // }
         {
-          id: 0,
-          concurrency: 0,
-          name: null,
-          active: true,
-          notes: null,
-          wiki: null,
-          customFields: "{}",
-          tags: [],
-          dateStarted: window.$gz.locale.nowUTC8601String(),
-          dateCompleted: null,
-          workorderOverseerId: null,
-          accountNumber: null
+          data: {
+            id: 0,
+            concurrency: 0,
+            serial: null,
+            notes: null,
+            wiki: null,
+            customFields: "{}",
+            tags: [],
+            customerId: null,
+            projectId: null,
+            internalReferenceNumber: null,
+            customerReferenceNumber: null,
+            customerContactName: null,
+            fromQuoteId: null,
+            fromPMId: null,
+            fromCSRId: null,
+            serviceDate: null,
+            completeByDate: null,
+            invoiceNumber: null,
+            customerSignature: null,
+            customerSignatureName: null,
+            customerSignatureCaptured: null,
+            postAddress: null,
+            postCity: null,
+            postRegion: null,
+            postCountry: null,
+            postCode: null,
+            address: null,
+            city: null,
+            region: null,
+            country: null,
+            latitude: null,
+            longitude: null,
+            items: [],
+            states: [],
+            isDirty: false
+          }
         },
       formState: {
         ready: false,
@@ -125,7 +179,8 @@ export default {
         serverError: {}
       },
       rights: window.$gz.role.defaultRightsObject(),
-      ayaType: window.$gz.type.WorkOrder
+      ayaType: window.$gz.type.WorkOrder,
+      selectedItemIndex: null
     };
   },
   //WATCHERS
@@ -533,8 +588,8 @@ async function initForm(vm) {
 async function fetchTranslatedText(vm) {
   await window.$gz.translation.cacheTranslations([
     "WorkOrder",
-    "WorkOrderName",
-    "WorkOrderNotes",
+    "WorkOrderSerialNumber",
+    "WorkOrderSummary",
     "WorkOrderCustom1",
     "WorkOrderCustom2",
     "WorkOrderCustom3",