diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 752bf5c8..f3fd627c 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -245,6 +245,8 @@ todo: in UI the workorder state should show current state but be expandable to v
 	LastStateViz??
 	Also, this will be best for sites that don't really use the state fully and just want to ignore it or set it once to completed, that kind of thing
 	so maybe it's a single / collection depending on if there are more than one but collapsable??
+	Status control, displays last status as a read only text field maybe decorated in an H3 tag or something, but when you click on it opens a form to append a new status
+		control handles the rights and roles and shit
 
 
 
diff --git a/ayanova/src/components/_barebones_template.vue b/ayanova/src/components/_barebones_template.vue
new file mode 100644
index 00000000..55316743
--- /dev/null
+++ b/ayanova/src/components/_barebones_template.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    barebones template
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  data() {
+    return {};
+  },
+
+  props: {
+    value: {
+      default: "{}",
+      type: String
+    },
+    formKey: { type: String, default: "" }, //used to grab template from store
+    readonly: Boolean,
+    disabled: Boolean,
+    parentVM: {
+      default: null,
+      type: Object
+    }
+  },
+
+  methods: {
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (
+        !this.parentVM.formState.loading &&
+        !this.parentVM.formState.readonly
+      ) {
+        window.$gz.form.fieldValueChanged(this.parentVM, ref);
+      }
+    }
+  },
+  computed: {}
+};
+</script>
diff --git a/ayanova/src/components/work-order-header.vue b/ayanova/src/components/work-order-header.vue
new file mode 100644
index 00000000..9677b465
--- /dev/null
+++ b/ayanova/src/components/work-order-header.vue
@@ -0,0 +1,45 @@
+<template>
+  <div>
+    <h1>WorkOrder header</h1>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  data() {
+    return {};
+  },
+
+  props: {
+    value: {
+      default: "{}",
+      type: String
+    },
+    formKey: { type: String, default: "" }, //used to grab template from store
+    readonly: Boolean,
+    disabled: Boolean,
+    parentVM: {
+      default: null,
+      type: Object
+    }
+  },
+
+  methods: {
+    form() {
+      return window.$gz.form;
+    },
+    fieldValueChanged(ref) {
+      if (
+        !this.parentVM.formState.loading &&
+        !this.parentVM.formState.readonly
+      ) {
+        window.$gz.form.fieldValueChanged(this.parentVM, ref);
+      }
+    }
+  },
+  computed: {}
+};
+</script>
diff --git a/ayanova/src/components/work-order-item-scheduled-users.vue b/ayanova/src/components/work-order-item-scheduled-users.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/ayanova/src/components/work-order-items.vue b/ayanova/src/components/work-order-items.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/ayanova/src/components/work-order-state.vue b/ayanova/src/components/work-order-state.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/ayanova/src/views/svc-workorder.vue b/ayanova/src/views/svc-workorder.vue
index 8e764e16..4362ab0c 100644
--- a/ayanova/src/views/svc-workorder.vue
+++ b/ayanova/src/views/svc-workorder.vue
@@ -4,67 +4,8 @@
     <div v-if="formState.ready">
       <gz-error :error-box-message="formState.errorBoxMessage"></gz-error>
       <v-form ref="form">
-        <v-row>
-          organize as controls see dashboard <br />
-          woheader here <br />wostate control here<br />
-          woitems control here
-          <!-- --------------------------------- -->
-          <v-col v-if="form().showMe(this, 'Notes')" cols="12">
-            <v-textarea
-              v-model="obj.notes"
-              :readonly="formState.readOnly"
-              :label="$ay.t('WorkOrderNotes')"
-              :error-messages="form().serverErrors(this, 'notes')"
-              ref="notes"
-              data-cy="notes"
-              @input="fieldValueChanged('notes')"
-              auto-grow
-            ></v-textarea>
-          </v-col>
-
-          <v-col v-if="form().showMe(this, 'Tags')" cols="12">
-            <gz-tag-picker
-              v-model="obj.tags"
-              :readonly="formState.readOnly"
-              ref="tags"
-              data-cy="tags"
-              :error-messages="form().serverErrors(this, 'tags')"
-              @input="fieldValueChanged('tags')"
-            ></gz-tag-picker>
-          </v-col>
-
-          <v-col cols="12">
-            <gz-custom-fields
-              v-model="obj.customFields"
-              :form-key="formCustomTemplateKey"
-              :readonly="formState.readOnly"
-              :parent-v-m="this"
-              ref="customFields"
-              data-cy="customFields"
-              :error-messages="form().serverErrors(this, 'customFields')"
-              @input="fieldValueChanged('customFields')"
-            ></gz-custom-fields>
-          </v-col>
-
-          <v-col v-if="form().showMe(this, 'Wiki')" cols="12">
-            <gz-wiki
-              :aya-type="ayaType"
-              :aya-id="obj.id"
-              ref="wiki"
-              v-model="obj.wiki"
-              :readonly="formState.readOnly"
-              @input="fieldValueChanged('wiki')"
-            ></gz-wiki
-          ></v-col>
-
-          <v-col v-if="form().showMe(this, 'Attachments') && obj.id" cols="12">
-            <gz-attachments
-              :readonly="formState.readOnly"
-              :aya-type="ayaType"
-              :aya-id="obj.id"
-            ></gz-attachments
-          ></v-col>
-        </v-row>
+        <GzWoHeader data-cy="woHeader" />
+        <GzWoItems data-cy="woItems" />
       </v-form>
     </div>
     <template v-if="!formState.ready">
@@ -83,11 +24,19 @@
 //
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 //
+
+import GzWoHeader from "../components/work-order-header.vue";
+import GzWoItems from "../components/work-order-items.vue";
+
 const FORM_KEY = "workorder-edit";
 const API_BASE_URL = "workorder/";
 const FORM_CUSTOM_TEMPLATE_KEY = "WorkOrder"; //<-- Should always be CoreBizObject AyaType name here where possible
 
 export default {
+  components: {
+    GzWoHeader,
+    GzWoItems
+  },
   async created() {
     let vm = this;