diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index 7c07cf0f..5607c29d 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -36,6 +36,21 @@
     />
   </div>
 
+  <!-- show myDate prefill with stored value -->
+  <div
+    v-else-if="field.type === 'my_date'"
+    class="flex absolute"
+    :style="{ ...computedStyle, backgroundColor: 'transparent' }"
+    :class="{ 'cursor-default ': !submittable, 'z-0 ': isActive && submittable, 'bg-opacity-100 ': (isActive || isValueSet) && submittable }"
+  >
+    <span
+      style="border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; font-size: 1.4rem"
+      class="!text-2xl w-full h-full"
+    >
+      {{ getFormattedDate }}
+</span>
+  </div>
+
   <!-- show mySignature prefill with stored value -->
   <div
     v-else-if="['my_signature', 'my_initials'].includes(field.type)"
@@ -285,7 +300,8 @@ export default {
   data () {
     return {
       textOverflowChars: 0,
-      showLocalText: ''
+      showLocalText: '',
+      showLocalDate: ''
     }
   },
   computed: {
@@ -306,7 +322,8 @@ export default {
         redact: 'Redact',
         my_text: 'Text',
         my_signature: 'My Signature',
-        my_initials: 'My Initials'
+        my_initials: 'My Initials',
+        my_date: 'Date'
       }
     },
     fieldIcons () {
@@ -375,6 +392,14 @@ export default {
         return ''
       }
     },
+    getFormattedDate () {
+      if (this.field.type === 'my_date' && this.showLocalDate) {
+        console.log('date returned ___-----', new Intl.DateTimeFormat([], { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(new Date(this.showLocalDate)))
+        return new Intl.DateTimeFormat([], { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(new Date(this.showLocalDate))
+      } else {
+        return ''
+      }
+    },
     attachments () {
       if (this.field.type === 'file') {
         return (this.modelValue || []).map((uuid) => this.attachmentsIndex[uuid])
@@ -410,6 +435,15 @@ export default {
       }
     }
 
+    if (this.field.type === 'my_date') {
+      const fieldUuid = this.field.uuid
+      if (this.templateValues && this.templateValues[fieldUuid]) {
+        this.showLocalDate = this.templateValues[fieldUuid]
+      } else {
+        this.showLocalDate = ''
+      }
+    }
+
     if (this.field.type === 'text' && this.$refs.textContainer) {
       this.$nextTick(() => {
         this.textOverflowChars = this.$refs.textContainer.scrollHeight > this.$refs.textContainer.clientHeight ? this.modelValue.length : 0
diff --git a/app/javascript/template_builder/area.vue b/app/javascript/template_builder/area.vue
index c276e377..7420b1bb 100644
--- a/app/javascript/template_builder/area.vue
+++ b/app/javascript/template_builder/area.vue
@@ -130,6 +130,19 @@
         @input="makeMyText"
       />
     </div>
+    <!-- adding my_date  prefills -->
+    <div
+      v-else-if="field.type === 'my_date'"
+      class="flex items-center justify-center h-full w-full"
+      style="border-width: 2px; --tw-bg-opacity: 1; --tw-border-opacity: 0.2; background-color: transparent;"
+    >
+      <span
+        :id="field.uuid"
+        ref="my_date"
+      >
+        {{ getFormattedDate }}
+      </span>
+    </div>
     <!-- adding my_signature and my_initials for prefills -->
     <div
       v-else-if="['my_signature', 'my_initials'].includes(field.type)"
@@ -187,7 +200,7 @@
       </span>
     </div>
     <div
-      v-if="!['my_text', 'my_signature', 'my_initials'].includes(field.type)"
+      v-if="!['my_text', 'my_signature', 'my_initials', 'my_date'].includes(field.type)"
       ref="touchTarget"
       class="absolute top-0 bottom-0 right-0 left-0 cursor-pointer"
     />
@@ -236,6 +249,19 @@
         @start="$refs.areas.scrollIntoField(field)"
       />
     </div>
+    <div
+      v-if="showMyDate"
+      class="absolute"
+      style="z-index: 50;"
+      :style="{ ...mySignatureStyle }"
+    >
+      <MyDate
+        :key="field.uuid"
+        v-model="setMyDateValue"
+        :my-signature-style="mySignatureStyle"
+        :field="field"
+      />
+    </div>
   </div>
 </template>
 
@@ -247,6 +273,7 @@ import { IconX, IconWriting } from '@tabler/icons-vue'
 import { v4 } from 'uuid'
 import MySignature from './my_signature'
 import MyInitials from './my_initials'
+import MyDate from './my_date'
 
 export default {
   name: 'FieldArea',
@@ -256,7 +283,8 @@ export default {
     IconX,
     IconWriting,
     MySignature,
-    MyInitials
+    MyInitials,
+    MyDate
   },
   inject: ['template', 'selectedAreaRef', 'save', 'templateAttachments', 'isDirectUpload'],
   props: {
@@ -291,8 +319,10 @@ export default {
       dragFrom: { x: 0, y: 0 },
       showMySignature: false,
       showMyInitials: false,
+      showMyDate: false,
       myLocalSignatureValue: '',
-      myLocalInitialsValue: ''
+      myLocalInitialsValue: '',
+      myLocalDateValue: ''
     }
   },
   computed: {
@@ -315,6 +345,15 @@ export default {
         this.makeMyInitials(value)
       }
     },
+    setMyDateValue: {
+      get () {
+        return this.myLocalDateValue
+      },
+      set (value) {
+        this.myLocalDateValue = value
+        this.makeMyDate(value)
+      }
+    },
     optionIndexText () {
       if (this.area.option_uuid && this.field.options) {
         return `${this.field.options.findIndex((o) => o.uuid === this.area.option_uuid) + 1}.`
@@ -363,6 +402,13 @@ export default {
         return null
       }
     },
+    getFormattedDate () {
+      if (this.field.type === 'my_date' && this.myLocalDateValue) {
+        return new Intl.DateTimeFormat([], { year: 'numeric', month: 'long', day: 'numeric', timeZone: 'UTC' }).format(new Date(this.myLocalDateValue))
+      } else {
+        return ''
+      }
+    },
     cells () {
       const cells = []
 
@@ -461,6 +507,15 @@ export default {
       }
     }
 
+    if (this.field.type === 'my_date') {
+      const fieldUuid = this.field.uuid
+      if (this.template.values && this.template.values[fieldUuid]) {
+        this.myLocalDateValue = this.template.values[fieldUuid]
+      } else {
+        this.myLocalDateValue = ''
+      }
+    }
+
     if (this.field.type === 'text' && this.field.default_value && this.$refs.textContainer && (this.textOverflowChars === 0 || (this.textOverflowChars - 4) > this.field.default_value)) {
       this.$nextTick(() => {
         this.textOverflowChars = this.$el.clientHeight < this.$refs.textContainer.clientHeight ? this.field.default_value.length : 0
@@ -479,7 +534,6 @@ export default {
         this.myLocalSignatureValue = value
         this.saveFieldValue({ [this.field.uuid]: value })
       } else {
-        console.log('My signature field value was empty')
         this.saveFieldValue({ [this.field.uuid]: '' })
       }
     },
@@ -488,10 +542,15 @@ export default {
         this.myLocalInitialsValue = value
         this.saveFieldValue({ [this.field.uuid]: value })
       } else {
-        console.log('My initial field value was empty')
         this.saveFieldValue({ [this.field.uuid]: '' })
       }
     },
+    makeMyDate (value) {
+      this.saveFieldValue(
+        { [this.field.uuid]: value }
+      )
+      this.save()
+    },
     saveFieldValue (event) {
       this.$emit('update:myField', event)
     },
@@ -596,6 +655,8 @@ export default {
         this.handleMySignatureClick()
       } else if (this.field.type === 'my_initials') {
         this.handleMyInitialClick()
+      } else if (this.field.type === 'my_date') {
+        this.handleMyDateClick()
       }
       this.selectedAreaRef.value = this.area
 
@@ -713,6 +774,9 @@ export default {
     },
     handleMyInitialClick () {
       this.showMyInitials = !this.showMyInitials
+    },
+    handleMyDateClick () {
+      this.showMyDate = !this.showMyDate
     }
   }
 }
diff --git a/app/javascript/template_builder/field.vue b/app/javascript/template_builder/field.vue
index ae030452..6ecfa6f1 100644
--- a/app/javascript/template_builder/field.vue
+++ b/app/javascript/template_builder/field.vue
@@ -31,7 +31,7 @@
           />
         </div>
         <div
-          v-if="isNameFocus && !['redact', 'my_text', 'my_signature', 'my_initials'].includes(field.type)"
+          v-if="isNameFocus && !['redact', 'my_text', 'my_signature', 'my_initials', 'my_date'].includes(field.type)"
           class="flex items-center relative"
         >
           <template v-if="field.type != 'phone'">
diff --git a/app/javascript/template_builder/field_submitter.vue b/app/javascript/template_builder/field_submitter.vue
index a22a3b1f..85412d96 100644
--- a/app/javascript/template_builder/field_submitter.vue
+++ b/app/javascript/template_builder/field_submitter.vue
@@ -126,7 +126,7 @@
             style="background-color: grey;"
             class="w-3 h-3 rounded-full"
           />
-          <div class="items-center space-x-2">show submitters fields</div>
+          <div class="items-center space-x-2">show submitter fields</div>
         </div>
       </label>
       <label
diff --git a/app/javascript/template_builder/field_type.vue b/app/javascript/template_builder/field_type.vue
index a0142717..63c6aeea 100644
--- a/app/javascript/template_builder/field_type.vue
+++ b/app/javascript/template_builder/field_type.vue
@@ -95,7 +95,8 @@ export default {
         redact: 'Redact',
         my_text: 'Text',
         my_signature: 'My Signature',
-        my_initials: 'My Initials'
+        my_initials: 'My Initials',
+        my_date: 'Date'
       }
     },
     fieldIcons () {
@@ -115,7 +116,8 @@ export default {
         redact: IconBarrierBlock,
         my_text: IconTextResize,
         my_signature: IconWritingSign,
-        my_initials: IconLetterCaseUpper
+        my_initials: IconLetterCaseUpper,
+        my_date: IconCalendarEvent
       }
     }
   },
diff --git a/app/javascript/template_builder/fields.vue b/app/javascript/template_builder/fields.vue
index 6ed0bea9..14a503fe 100644
--- a/app/javascript/template_builder/fields.vue
+++ b/app/javascript/template_builder/fields.vue
@@ -72,7 +72,7 @@
       :key="type"
     >
       <div
-        v-if="!['my_text', 'my_signature', 'my_initials'].includes(type)"
+        v-if="!['my_text', 'my_signature', 'my_initials', 'my_date'].includes(type)"
       >
         <button
           v-if="withPhone || type != 'phone'"
@@ -131,7 +131,7 @@
       :key="type"
     >
       <div
-        v-if="['my_text', 'my_signature', 'my_initials'].includes(type)"
+        v-if="['my_text', 'my_signature', 'my_initials', 'my_date'].includes(type)"
       >
         <button
           draggable="true"
diff --git a/app/javascript/template_builder/my_date.vue b/app/javascript/template_builder/my_date.vue
new file mode 100644
index 00000000..84d5ca25
--- /dev/null
+++ b/app/javascript/template_builder/my_date.vue
@@ -0,0 +1,74 @@
+<template>
+  <div>
+    <div
+      class="flex justify-between items-center w-full mb-2"
+    >
+      <label
+        :for="field.uuid"
+        class="label text-2xl"
+      >{{ field.name || t('date') }}
+      </label>
+      <button
+        class="btn btn-outline btn-sm !normal-case font-normal"
+        @click.prevent="setCurrentDate"
+      >
+        <IconCalendarCheck :width="16" />
+        {{ t('set_today') }}
+      </button>
+    </div>
+    <div class="text-center">
+      <input
+        ref="input"
+        v-model="value"
+        class="base-input !text-2xl text-center w-full"
+        :required="field.required"
+        type="date"
+        :name="`values[${field.uuid}]`"
+        @focus="$emit('focus')"
+      >
+    </div>
+  </div>
+</template>
+
+<script>
+import { IconCalendarCheck } from '@tabler/icons-vue'
+
+export default {
+  name: 'MyDate',
+  components: {
+    IconCalendarCheck
+  },
+  inject: ['t'],
+  props: {
+    field: {
+      type: Object,
+      required: true
+    },
+    modelValue: {
+      type: String,
+      required: false,
+      default: ''
+    }
+  },
+  emits: ['update:model-value', 'focus'],
+  computed: {
+    value: {
+      set (value) {
+        this.$emit('update:model-value', value)
+      },
+      get () {
+        return this.modelValue
+      }
+    }
+  },
+  methods: {
+    setCurrentDate () {
+      const inputEl = this.$refs.input
+
+      inputEl.valueAsDate = new Date(new Date().getTime() - new Date().getTimezoneOffset() * 60000)
+
+      inputEl.dispatchEvent(new Event('input', { bubbles: true }))
+    }
+  }
+}
+</script>