diff --git a/ayanova/src/components/work-order-contact.vue b/ayanova/src/components/work-order-contact.vue
new file mode 100644
index 00000000..978c5423
--- /dev/null
+++ b/ayanova/src/components/work-order-contact.vue
@@ -0,0 +1,91 @@
+<template>
+  <div>
+    <v-text-field
+      ref="customerContactName"
+      dense
+      v-bind="$attrs"
+      prepend-icon="$ayiUsers"
+      v-on="$listeners"
+      @click:prepend="fetchContacts"
+      @input="fieldValueChanged('customerContactName')"
+    ></v-text-field>
+
+    <!-- ################################################################################-->
+    <!-- ##########################  CONTACT SELECTOR DIALOG  ###############################-->
+    <!-- ################################################################################-->
+    <template>
+      <v-row dense justify="center">
+        <v-dialog v-model="openDialog" persistent max-width="600px">
+          <v-card>
+            <v-card-title> </v-card-title>
+            <v-card-text>
+              <v-select
+                v-model="selectedContact"
+                :items="contacts"
+                :label="$ay.t('Contacts')"
+              ></v-select>
+            </v-card-text>
+
+            <v-card-actions>
+              <v-btn text color="primary" @click="openDialog = false">{{
+                $ay.t("Cancel")
+              }}</v-btn>
+              <v-spacer></v-spacer>
+              <v-btn
+                :disabled="selectedContact == null"
+                color="primary"
+                text
+                @click="useSelectedContact()"
+                >{{ $ay.t("OK") }}</v-btn
+              >
+            </v-card-actions>
+          </v-card>
+        </v-dialog>
+      </v-row>
+    </template>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    dataCy: { type: String, default: null },
+    formKey: { type: String, default: "" }, //used to grab template from store
+    readonly: Boolean,
+    disabled: Boolean,
+    errorMessages: { type: Array, default: null }
+  },
+  data() {
+    return {
+      openDialog: false,
+      selectedContact: null,
+      contacts: []
+    };
+  },
+  methods: {
+    fetchContacts() {
+      //get a list of contacts from the server for this customer
+      //open a dialog to pick one
+      //if chosen then put it as the value
+      this.openDialog = true;
+    },
+    useSelectedContact() {
+      this.value.customerContactName = this.selectedContact;
+      this.pvm.formState.dirty = true;
+      this.openDialog = false;
+    },
+    fieldValueChanged(ref) {
+      if (!this.pvm.formState.loading && !this.pvm.formState.readonly) {
+        window.$gz.form.fieldValueChanged(this.pvm, ref);
+      }
+    }
+  }
+};
+</script>
diff --git a/ayanova/src/components/work-order-header.vue b/ayanova/src/components/work-order-header.vue
index d4c98018..9cfadcfd 100644
--- a/ayanova/src/components/work-order-header.vue
+++ b/ayanova/src/components/work-order-header.vue
@@ -275,7 +275,7 @@
         ></gz-date-time-picker>
       </v-col>
 
-      <v-col
+      <!-- <v-col
         v-if="form().showMe(this, 'WorkOrderCustomerContactName')"
         cols="12"
         sm="6"
@@ -297,6 +297,30 @@
           :error-messages="form().serverErrors(this, 'customerContactName')"
           @input="fieldValueChanged('customerContactName')"
         ></v-text-field>
+      </v-col> -->
+
+      <v-col
+        v-if="form().showMe(this, 'WorkOrderCustomerContactName')"
+        cols="12"
+        sm="6"
+        lg="4"
+        xl="3"
+      >
+        <gz-wo-contact
+          ref="customerContactName"
+          v-model="value"
+          :pvm="pvm"
+          dense
+          :readonly="
+            formState.readOnly ||
+              value.userIsTechRestricted ||
+              value.userIsSubContractorFull ||
+              value.userIsSubContractorRestricted
+          "
+          :label="$ay.t('WorkOrderCustomerContactName')"
+          data-cy="customerContactName"
+          :error-messages="form().serverErrors(this, 'customerContactName')"
+        ></gz-wo-contact>
       </v-col>
 
       <v-col
@@ -461,11 +485,13 @@
 import GzWoState from "./work-order-state.vue";
 import GzWoAddress from "./work-order-address.vue";
 import GzWoSignature from "./work-order-signature.vue";
+import GzWoContact from "./work-order-contact.vue";
 export default {
   components: {
     GzWoState,
     GzWoAddress,
-    GzWoSignature
+    GzWoSignature,
+    GzWoContact
   },
 
   props: {