diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index 4ea677b6..dabe88dd 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -4,6 +4,7 @@ import { storeToRefs } from 'pinia';
 import { useQuasar } from 'quasar';
 import { computed, nextTick, onMounted, reactive, ref, watch } from 'vue';
 import {
+  baseUrl,
   dialogCheckData,
   dialogWarningClose,
   formatNumberDecimal,
@@ -985,6 +986,16 @@ onMounted(async () => {
   localStorage.removeItem('new-quotation');
   const payload = sessionStorage.getItem('new-quotation');
 
+  const { data: docTemplate, status } =
+    await api.get<string[]>('/doc-template');
+
+  if (status < 400) {
+    templateFormOption.value = docTemplate.map((v) => ({
+      label: v,
+      value: v,
+    }));
+  }
+
   if (!!payload) {
     const parsed = JSON.parse(payload);
     date.value = Date.now();
@@ -1235,6 +1246,24 @@ watch(
     fetchRequest();
   },
 );
+
+async function formDownload() {
+  if (!quotationFormData.value.id) return;
+
+  const res = await fetch(
+    baseUrl +
+      '/doc-template/' +
+      templateForm.value +
+      `?data=quotation&dataId=${quotationFormData.value.id}`,
+  );
+  const blob = await res.blob();
+
+  const a = document.createElement('a');
+  a.download = templateForm.value;
+  a.href = window.URL.createObjectURL(blob);
+  a.click();
+  a.remove();
+}
 </script>
 
 <template>
@@ -1698,21 +1727,20 @@ watch(
                   id="quotation-branch"
                   :option="templateFormOption"
                   :label="$t('quotation.templateForm')"
-                  :option-label="locale === 'eng' ? 'labelEN' : 'label'"
                 />
-                <MainButton
+                <!-- <MainButton
                   outlined
                   icon="mdi-play-box-outline"
                   color="207 96% 32%"
                   @click="() => {}"
                 >
                   {{ $t('general.view', { msg: $t('general.example') }) }}
-                </MainButton>
+                </MainButton> -->
                 <MainButton
                   solid
                   icon="mdi-pencil-outline"
                   color="207 96% 32%"
-                  @click="() => {}"
+                  @click="formDownload"
                 >
                   {{ $t('general.designForm') }}
                 </MainButton>
@@ -2034,7 +2062,12 @@ watch(
             </q-expansion-item>
           </template>
 
-          <template v-if="view === View.Quotation || view === View.Payment">
+          <template
+            v-if="
+              (view === View.Quotation || view === View.Payment) &&
+              quotationFormData.id
+            "
+          >
             <q-expansion-item
               for="item-up"
               id="item-up"
@@ -2079,7 +2112,7 @@ watch(
                   solid
                   icon="mdi-pencil-outline"
                   color="207 96% 32%"
-                  @click="storeDataLocal"
+                  @click="formDownload"
                 >
                   {{ $t('general.designForm') }}
                 </MainButton>