diff --git a/ayanova/devdocs/todo.txt b/ayanova/devdocs/todo.txt
index 8a9bd327..42e54cfb 100644
--- a/ayanova/devdocs/todo.txt
+++ b/ayanova/devdocs/todo.txt
@@ -391,6 +391,9 @@ todo 3: signature: report helper display signature and form ui control to captur
 	case 3682 implies code to steal to make signatures better so look into that
 	case 2052 is this one
 	case 3673 also directly related
+	v7 import - must put in block at least if not code immediately to import v7 sigs into svg format for display
+		also, depending on ease, it might make sense to have v8 server check type of image i.e. does it start with svg or not and 
+		then auto convert if necessary.
 
 3720 3: BUMPABLE CASE I THINK  prevent double booking a tech (some kind of warning)
 		availability feature??? maybe bump as a new availablity feature where user picks from a popup schedule for that tech?
diff --git a/ayanova/src/components/sign.vue b/ayanova/src/components/sign.vue
index 440969c3..949cd8b3 100644
--- a/ayanova/src/components/sign.vue
+++ b/ayanova/src/components/sign.vue
@@ -8,7 +8,7 @@
       :disabled="!enabled"
       :default-url="dataUrl"
     ></vueSignature>
-    <vueSignature ref="signature1" :sig-option="option"></vueSignature>
+    <!-- <vueSignature ref="signature1" :sig-option="option"></vueSignature> -->
     <button @click="save">Save</button>
     <button @click="clear">Clear</button>
     <button @click="undo">Undo</button>
@@ -70,7 +70,7 @@ export default {
     return {
       option: {
         penColor: "rgb(0, 0, 0)",
-        backgroundColor: "rgb(255,255,255)"
+        backgroundColor: "rgb(245,245,245)"
       },
 
       dataUrl: null, //"https://avatars2.githubusercontent.com/u/17644818?s=460&v=4"
diff --git a/ayanova/src/components/work-order-header.vue b/ayanova/src/components/work-order-header.vue
index 8324c607..75d34907 100644
--- a/ayanova/src/components/work-order-header.vue
+++ b/ayanova/src/components/work-order-header.vue
@@ -64,6 +64,35 @@
         />
       </v-col>
 
+      <v-col cols="12" sm="6" lg="4" xl="3">
+        <GzWoSignature
+          v-if="
+            pvm.subRights.states.visible &&
+              form().showMe(this, 'CustomerSignature')
+          "
+          v-model="value"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly"
+          :pvm="pvm"
+          variant="customer"
+          data-cy="customerSignature"
+        />
+      </v-col>
+
+      <v-col cols="12" sm="6" lg="4" xl="3">
+        <GzWoSignature
+          v-if="
+            pvm.subRights.states.visible && form().showMe(this, 'TechSignature')
+          "
+          v-model="value"
+          :form-key="formCustomTemplateKey"
+          :readonly="formState.readOnly"
+          :pvm="pvm"
+          variant="tech"
+          data-cy="techSignature"
+        />
+      </v-col>
+
       <v-col v-if="form().showMe(this, 'WorkOrderSummary')" cols="12">
         <v-textarea
           v-model="value.notes"
@@ -312,12 +341,12 @@
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 import GzWoState from "./work-order-state.vue";
 import GzWoAddress from "./work-order-address.vue";
-//import GzWoContract from "./work-order-contract.vue";
+import GzWoSignature from "./work-order-signature.vue";
 export default {
   components: {
     GzWoState,
-    GzWoAddress
-    //,    GzWoContract
+    GzWoAddress,
+    GzWoSignature
   },
   data() {
     return {
diff --git a/ayanova/src/components/work-order-signature.vue b/ayanova/src/components/work-order-signature.vue
new file mode 100644
index 00000000..2d73f1a8
--- /dev/null
+++ b/ayanova/src/components/work-order-signature.vue
@@ -0,0 +1,126 @@
+<template>
+  <div>
+    <div class="mb-n2 ml-10">
+      <span class="text-caption" v-if="variant == 'customer'">{{
+        $ay.t("CustomerSignature")
+      }}</span>
+      <span class="text-caption" v-else>{{ $ay.t("TechSignature") }}</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" @click="openDialog = true">{{
+          pvm.currentState.name
+        }}</span>
+        <v-icon :color="pvm.currentState.color" class="ml-4">$ayiFlag</v-icon>
+        <v-icon color="primary" v-if="pvm.currentState.locked" class="ml-4"
+          >$ayiLock</v-icon
+        >
+        <v-icon color="primary" v-if="pvm.currentState.completed" class="ml-4"
+          >$ayiCheckCircle</v-icon
+        >
+      </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("Signaturehere") }}</span>
+          </v-card-title>
+          <v-card-text>
+            <template v-if="$vuetify.breakpoint.smAndUp">
+              <!-- WIDE VIEW -->
+              <Sign data-cy="sign" />
+            </template>
+            <template v-else>
+              <!-- NARROW VIEW -->
+              <Sign data-cy="sign" />
+            </template>
+
+            <template>
+              <div class="mt-8">
+                input name here show date here
+              </div>
+            </template>
+          </v-card-text>
+          <v-card-actions>
+            <v-btn color="red darken-1" text @click="erase()">{{
+              $ay.t("Clear")
+            }}</v-btn>
+            <v-spacer></v-spacer>
+            <v-btn color="blue darken-1" text @click="cancelDialog()">{{
+              $ay.t("Cancel")
+            }}</v-btn>
+            <v-btn
+              color="blue darken-1"
+              :disabled="selectedStatus == null"
+              text
+              @click="save()"
+              >{{ $ay.t("OK") }}</v-btn
+            >
+          </v-card-actions>
+        </v-card>
+      </v-dialog>
+    </v-row>
+  </div>
+</template>
+<script>
+/////////////////////////////////////////////////////////////////////////////////////////////////////////////
+/*  XXXeslint-disable    */
+////////////////////////////////////////////////////////////////////////////////////////////////////////////
+
+export default {
+  data() {
+    return {
+      selectedStatus: null,
+      openDialog: false
+    };
+  },
+
+  props: {
+    value: {
+      default: null,
+      type: Object
+    },
+    pvm: {
+      default: null,
+      type: Object
+    },
+    variant: {
+      type: String,
+      default: null
+    },
+    formKey: { type: String, default: "" }, //used to grab template from store
+    readonly: Boolean,
+    disabled: Boolean
+  },
+
+  methods: {
+    form() {
+      return window.$gz.form;
+    },
+
+    save() {
+      this.openDialog = false;
+    },
+    cancelDialog() {
+      this.openDialog = false;
+    },
+    erase() {
+      this.selectedStatus = null;
+      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/views/svc-workorder.vue b/ayanova/src/views/svc-workorder.vue
index 3e8a245e..1f6fb720 100644
--- a/ayanova/src/views/svc-workorder.vue
+++ b/ayanova/src/views/svc-workorder.vue
@@ -2078,7 +2078,9 @@ async function fetchTranslatedText(vm) {
     "WorkOrderItemUnit",
     "WorkOrderItemTask",
     "WorkOrderItemLoan",
-    "WorkOrderItemOutsideService"
+    "WorkOrderItemOutsideService",
+    "CustomerSignature",
+    "TechSignature"
   ]);
 }