diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index c726c565..152a73b0 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -122,6 +122,7 @@ const { t, locale } = useI18n();
 const ocrStore = useOcrStore();
 const $q = useQuasar();
 const openQuotation = ref<boolean>(false);
+const formMetadata = ref();
 
 const rowsRequestList = ref<RequestData[]>([]);
 
@@ -1433,33 +1434,42 @@ watch(
             </template>
 
             <div class="surface-1 q-pa-md full-width">
-              <QuotationFormMetadata
-                class="q-mb-md"
-                :readonly
-                :actor="quotationFormState.createdBy?.($i18n.locale) || ''"
-                :quotation-no="(quotationFull && quotationFull.code) || ''"
-                :quotation-status="
-                  quotationFormState.source?.quotationStatus === 'Expired'
+              <q-form
+                ref="formMetadata"
+                @submit="
+                  () => {
+                    convertDataToFormSubmit();
+                  }
                 "
-                v-model:urgent="quotationFormData.urgent"
-                v-model:work-name="quotationFormData.workName"
-                v-model:contactor="quotationFormData.contactName"
-                v-model:telephone="quotationFormData.contactTel"
-                v-model:due-date="quotationFormData.dueDate"
               >
-                <template #issue-info>
-                  <FormAbout
-                    hide-add
-                    class="col-12 col-md-8"
-                    input-only
-                    v-model:branch-id="quotationFormData.registeredBranchId"
-                    v-model:customer-branch-id="
-                      quotationFormData.customerBranchId
-                    "
-                    :readonly="readonly"
-                  />
-                </template>
-              </QuotationFormMetadata>
+                <QuotationFormMetadata
+                  class="q-mb-md"
+                  :readonly
+                  :actor="quotationFormState.createdBy?.($i18n.locale) || ''"
+                  :quotation-no="(quotationFull && quotationFull.code) || ''"
+                  :quotation-status="
+                    quotationFormState.source?.quotationStatus === 'Expired'
+                  "
+                  v-model:urgent="quotationFormData.urgent"
+                  v-model:work-name="quotationFormData.workName"
+                  v-model:contactor="quotationFormData.contactName"
+                  v-model:telephone="quotationFormData.contactTel"
+                  v-model:due-date="quotationFormData.dueDate"
+                >
+                  <template #issue-info>
+                    <FormAbout
+                      hide-add
+                      class="col-12 col-md-8"
+                      input-only
+                      v-model:branch-id="quotationFormData.registeredBranchId"
+                      v-model:customer-branch-id="
+                        quotationFormData.customerBranchId
+                      "
+                      :readonly="readonly"
+                    />
+                  </template>
+                </QuotationFormMetadata>
+              </q-form>
             </div>
           </q-expansion-item>
 
@@ -2240,16 +2250,13 @@ watch(
             v-if="quotationFormState.mode === 'info' && closeAble()"
           />
           <SaveButton
+            type="submit"
             v-if="
               quotationFormState.mode === 'create' ||
               quotationFormState.mode === 'edit'
             "
-            @click="
-              () => {
-                convertDataToFormSubmit();
-              }
-            "
             solid
+            @click="() => formMetadata.submit()"
           />
           <EditButton
             v-else