diff --git a/src/pages/08_request-list/FormExpansion.vue b/src/pages/08_request-list/FormExpansion.vue
index cce0db43..5aa75f31 100644
--- a/src/pages/08_request-list/FormExpansion.vue
+++ b/src/pages/08_request-list/FormExpansion.vue
@@ -11,6 +11,7 @@ import { useRequestList } from 'src/stores/request-list';
 const props = defineProps<{
   readonly?: boolean;
   step: Step;
+  requestWorkId: string;
 }>();
 
 const requestListStore = useRequestList();
@@ -116,7 +117,7 @@ function assignToForm() {
         <FormGroupHead>
           {{ $t('quotation.templateForm') }}
         </FormGroupHead>
-        <FormIssue :readonly="!state.isEdit" />
+        <FormIssue :request-work-id="requestWorkId" :readonly="!state.isEdit" />
       </section>
     </main>
   </q-expansion-item>
diff --git a/src/pages/08_request-list/FormIssue.vue b/src/pages/08_request-list/FormIssue.vue
index f13ee3ac..e455b481 100644
--- a/src/pages/08_request-list/FormIssue.vue
+++ b/src/pages/08_request-list/FormIssue.vue
@@ -2,14 +2,49 @@
 import { ref } from 'vue';
 import { MainButton } from 'components/button';
 import SelectInput from 'src/components/shared/SelectInput.vue';
+import { onMounted } from 'vue';
+import { api } from 'src/boot/axios';
+import { baseUrl } from 'src/stores/utils';
 
-defineProps<{
+const prop = defineProps<{
   readonly?: boolean;
+  requestWorkId: string;
 }>();
 const templateForm = defineModel<string>();
 const templateFormOption = ref<
   { label: string; labelEN: string; value: string }[]
 >([]);
+
+onMounted(async () => {
+  const { data: docTemplate, status } = await api.get<string[]>(
+    '/doc-template',
+    { params: { templateGroup: 'Request' } },
+  );
+
+  if (status < 400) {
+    templateFormOption.value = docTemplate.map((v) => ({
+      label: v,
+      labelEN: v,
+      value: v,
+    }));
+  }
+});
+
+async function formDownload() {
+  const res = await fetch(
+    baseUrl +
+      '/doc-template/' +
+      templateForm.value +
+      `?templateGroup=Request&data=request-work&dataId=${prop.requestWorkId}`,
+  );
+  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>
@@ -24,7 +59,6 @@ const templateFormOption = ref<
     <SelectInput
       id="quotation-branch"
       style="grid-column: span 2"
-      incremental
       v-model="templateForm"
       class="full-width"
       :readonly
@@ -32,21 +66,13 @@ const templateFormOption = ref<
       :label="$t('quotation.templateForm')"
       :option-label="$i18n.locale === 'eng' ? 'labelEN' : 'label'"
     />
-    <MainButton
-      outlined
-      icon="mdi-play-box-outline"
-      color="207 96% 32%"
-      class="full-width"
-      style="grid-column: span 1"
-    >
-      {{ $t('general.view', { msg: $t('general.example') }) }}
-    </MainButton>
     <MainButton
       solid
       icon="mdi-pencil-outline"
       color="207 96% 32%"
       class="full-width"
       style="grid-column: span 1"
+      @click="formDownload"
     >
       {{ $t('general.designForm') }}
     </MainButton>
diff --git a/src/pages/08_request-list/RequestListView.vue b/src/pages/08_request-list/RequestListView.vue
index a78c9323..a908e4d5 100644
--- a/src/pages/08_request-list/RequestListView.vue
+++ b/src/pages/08_request-list/RequestListView.vue
@@ -906,6 +906,7 @@ async function submitRejectCancel() {
                   />
                   <FormExpansion
                     v-if="value._formExpansion"
+                    :request-work-id="value.id"
                     :readonly="
                       data.requestDataStatus === RequestDataStatus.Canceled
                     "