diff --git a/ayanova/src/components/work-order-contract.vue b/ayanova/src/components/work-order-contract.vue
new file mode 100644
index 00000000..b813a323
--- /dev/null
+++ b/ayanova/src/components/work-order-contract.vue
@@ -0,0 +1,94 @@
+<template>
+  <div>
+    <div class="mb-n2 ml-10">
+      <span class="text-caption">{{ $ay.t("Contract") }}</span>
+    </div>
+
+    <template>
+      <div class="mb-6 mb-sm-0">
+        <v-btn icon class="ml-n1 mr-2" @click="openDialog = true">
+          <v-icon>$ayiEdit</v-icon>
+        </v-btn>
+
+        <span class="text-h6">{{ value.contractViz }}</span>
+      </div>
+    </template>
+
+    <v-row justify="center">
+      <v-dialog v-model="openDialog" max-width="600px">
+        <v-card>
+          <v-card-title>
+            <span class="text-h5">{{ $ay.t("ContractList") }}</span>
+          </v-card-title>
+          <v-card-text>
+            contract pick list here
+          </v-card-text>
+          <v-card-actions>
+            <v-spacer></v-spacer>
+            <v-btn color="blue darken-1" text @click="cancelDialog()">{{
+              $ay.t("Cancel")
+            }}</v-btn>
+            <v-btn color="blue darken-1" text @click="save()">{{
+              $ay.t("Save")
+            }}</v-btn>
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  data() {
+    return {
+      openDialog: false
+    };
+  },
+
+  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;
+    },
+
+    handleEditStateClick: function() {
+      window.$gz.eventBus.$emit("openobject", {
+        type: window.$gz.type.Contract,
+        id: this.value.contractId
+      });
+    },
+    save() {
+      //TODO: save entire workorder
+      this.pvm.submit();
+      this.openDialog = false;
+    },
+    cancelDialog() {
+      this.openDialog = false;
+    },
+    fieldValueChanged(ref) {
+      if (!this.pvm.formState.loading && !this.pvm.formState.readonly) {
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    }
+  },
+  computed: {}
+};
+</script>
diff --git a/ayanova/src/components/work-order-header.vue b/ayanova/src/components/work-order-header.vue
index 63b9783a..be31c168 100644
--- a/ayanova/src/components/work-order-header.vue
+++ b/ayanova/src/components/work-order-header.vue
@@ -95,6 +95,23 @@
         ></gz-date-time-picker>
       </v-col>
 
+      <v-col
+        v-if="form().showMe(this, 'Contract')"
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <GzWoContract
+          v-if="form().showMe(this, 'Contract')"
+          v-model="value"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly"
+          :pvm="pvm"
+          data-cy="woContract"
+        />
+      </v-col>
+
       <v-col
         v-if="form().showMe(this, 'Project')"
         cols="12"
@@ -275,10 +292,12 @@
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 import GzWoState from "./work-order-state.vue";
 import GzWoAddress from "./work-order-address.vue";
+import GzWoContract from "./work-order-contract.vue";
 export default {
   components: {
     GzWoState,
-    GzWoAddress
+    GzWoAddress,
+    GzWoContract
   },
   data() {
     return {
diff --git a/ayanova/src/views/svc-workorder.vue b/ayanova/src/views/svc-workorder.vue
index 92453df3..2ed411b1 100644
--- a/ayanova/src/views/svc-workorder.vue
+++ b/ayanova/src/views/svc-workorder.vue
@@ -1273,6 +1273,7 @@ async function fetchTranslatedText(vm) {
     "WorkOrderSerialNumber",
     "WorkOrderSummary",
     "WorkOrderCloseByDate",
+    "Contract",
     "Project",
     "WorkOrderInvoiceNumber",
     "WorkOrderServiceDate",