diff --git a/ayanova/src/components/_barebones_template.vue b/ayanova/src/components/_barebones_template.vue
index 55316743..bd452d08 100644
--- a/ayanova/src/components/_barebones_template.vue
+++ b/ayanova/src/components/_barebones_template.vue
@@ -15,16 +15,17 @@ export default {
 
   props: {
     value: {
-      default: "{}",
-      type: String
-    },
-    formKey: { type: String, default: "" }, //used to grab template from store
-    readonly: Boolean,
-    disabled: Boolean,
-    parentVM: {
       default: null,
       type: Object
-    }
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+
+    formKey: { type: String, default: "" }, //used to grab template from store
+    readonly: Boolean,
+    disabled: Boolean
   },
 
   methods: {
diff --git a/ayanova/src/components/work-order-header.vue b/ayanova/src/components/work-order-header.vue
index 54923567..03e9088c 100644
--- a/ayanova/src/components/work-order-header.vue
+++ b/ayanova/src/components/work-order-header.vue
@@ -28,7 +28,21 @@
           </div>
         </template>
       </v-col>
-
+      <v-col
+        v-if="form().showMe(this, 'ProjectAccountNumber')"
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <GzWoState
+          v-model="value"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly"
+          :pvm="pvm"
+          data-cy="woState"
+        />
+      </v-col>
       <v-col v-if="form().showMe(this, 'Notes')" cols="12">
         <v-textarea
           v-model="value.notes"
@@ -48,8 +62,11 @@
 /////////////////////////////////////////////////////////////////////////////////////////////////////////////
 /*  XXXeslint-disable    */
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
-
+import GzWoState from "./work-order-state.vue";
 export default {
+  components: {
+    GzWoState
+  },
   data() {
     return {
       canEditSerial: window.$gz.role.hasRole([
diff --git a/ayanova/src/components/work-order-state.vue b/ayanova/src/components/work-order-state.vue
index e69de29b..a1ab84b0 100644
--- a/ayanova/src/components/work-order-state.vue
+++ b/ayanova/src/components/work-order-state.vue
@@ -0,0 +1,53 @@
+<template>
+  <div>
+    <h5>WORKORDER STATE</h5>
+    {{ value }}
+
+    <!-- Display as drop down box so it appears like any other select, however, it also has a button to show history and
+    when user clicks on it a popup dialog shows the entire history of the state in a datatable or something along those lines -->
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  data() {
+    return {};
+  },
+
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    formKey: { type: String, default: "" }, //used to grab template from store
+    readonly: Boolean,
+    disabled: Boolean
+  },
+
+  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: {
+    lastState() {
+      return "blah";
+    }
+  }
+};
+</script>