diff --git a/ayanova/src/components/phone-control.vue b/ayanova/src/components/phone-control.vue
new file mode 100644
index 00000000..f09db34c
--- /dev/null
+++ b/ayanova/src/components/phone-control.vue
@@ -0,0 +1,21 @@
+<template>
+  <v-text-field
+    v-bind="$attrs"
+    v-on="$listeners"
+    type="tel"
+    prepend-icon="$ayiPhoneAlt"
+    @click:prepend="dial"
+  ></v-text-field>
+</template>
+<script>
+/*  Xeslint-disable */
+
+export default {
+  methods: {
+    dial() {
+      console.log(this.$el.attributes.value);
+      //alert("DIAL");
+    }
+  }
+};
+</script>
diff --git a/ayanova/src/main.js b/ayanova/src/main.js
index b38bcfbc..9e24470d 100644
--- a/ayanova/src/main.js
+++ b/ayanova/src/main.js
@@ -42,6 +42,7 @@ import dataTable from "./components/gz-data-table.vue";
 import customFieldsControl from "./components/custom-fields-control.vue";
 import currencyControl from "./components/currency-control.vue";
 import decimalControl from "./components/decimal-control.vue";
+import phoneControl from "./components/phone-control.vue";
 import roleControl from "./components/role-control.vue";
 import durationControl from "./components/duration-control.vue";
 import errorControl from "./components/error-control.vue";
@@ -186,6 +187,7 @@ Vue.component("gz-data-table", dataTable);
 Vue.component("gz-custom-fields", customFieldsControl);
 Vue.component("gz-currency", currencyControl);
 Vue.component("gz-decimal", decimalControl);
+Vue.component("gz-phone", phoneControl);
 Vue.component("gz-role-picker", roleControl);
 Vue.component("gz-duration-picker", durationControl);
 Vue.component("gz-error", errorControl);
diff --git a/ayanova/src/plugins/vuetify.js b/ayanova/src/plugins/vuetify.js
index 92e2e625..c5db82a9 100644
--- a/ayanova/src/plugins/vuetify.js
+++ b/ayanova/src/plugins/vuetify.js
@@ -25,6 +25,7 @@ import {
   faAddressCard,
   faArrowsAltH,
   faArrowsAltV,
+  faAt,
   faBackward,
   faBars,
   faBell,
@@ -122,6 +123,7 @@ import {
   faPencilAlt,
   faPencilRuler,
   faPeopleCarry,
+  faPhoneAlt,
   faPlug,
   faPlus,
   faPlusCircle,
@@ -184,6 +186,7 @@ library.add(
   faAddressCard,
   faArrowsAltH,
   faArrowsAltV,
+  faAt,
   faBackward,
   faBars,
   faBell,
@@ -283,6 +286,7 @@ library.add(
   faPencilAlt,
   faPencilRuler,
   faPeopleCarry,
+  faPhoneAlt,
   faPlug,
   faPlus,
   faPlusCircle,
@@ -364,6 +368,12 @@ const CUSTOM_ICONS = {
       icon: ["fas", "arrows-alt-v"]
     }
   },
+  ayiAt: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "at"]
+    }
+  },
   ayiBackward: {
     component: FontAwesomeIcon,
     props: {
@@ -911,6 +921,12 @@ const CUSTOM_ICONS = {
       icon: ["fas", "people-carry"]
     }
   },
+  ayiPhoneAlt: {
+    component: FontAwesomeIcon,
+    props: {
+      icon: ["fas", "phone-alt"]
+    }
+  },
   ayiPlug: {
     component: FontAwesomeIcon,
     props: {
diff --git a/ayanova/src/views/cust-customer.vue b/ayanova/src/views/cust-customer.vue
index b800bc7b..60cc96aa 100644
--- a/ayanova/src/views/cust-customer.vue
+++ b/ayanova/src/views/cust-customer.vue
@@ -94,7 +94,7 @@
                   lg="4"
                   xl="3"
                 >
-                  <v-text-field
+                  <!-- <v-text-field
                     v-model="obj.phone1"
                     :readonly="formState.readOnly"
                     :disabled="formState.readOnly"
@@ -104,7 +104,19 @@
                     type="tel"
                     :error-messages="form().serverErrors(this, 'phone1')"
                     @input="fieldValueChanged('phone1')"
-                  ></v-text-field>
+                    prepend-icon="$ayiPhoneAlt"
+                    @click:prepend="console.log('CLICK')"
+                  ></v-text-field> -->
+                  <gz-phone
+                    v-model="obj.phone1"
+                    :readonly="formState.readOnly"
+                    :disabled="formState.readOnly"
+                    :label="$ay.t('CustomerPhone1')"
+                    ref="phone1"
+                    data-cy="phone1"
+                    :error-messages="form().serverErrors(this, 'phone1')"
+                    @input="fieldValueChanged('phone1')"
+                  ></gz-phone>
                 </v-col>
 
                 <v-col