diff --git a/src/pages/05_quotation/QuotationFormInfo.vue b/src/pages/05_quotation/QuotationFormInfo.vue
new file mode 100644
index 00000000..131eb4c9
--- /dev/null
+++ b/src/pages/05_quotation/QuotationFormInfo.vue
@@ -0,0 +1,323 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+import { QSelect } from 'quasar';
+import { selectFilterOptionRefMod } from 'src/stores/utils';
+import { onMounted, ref, watch } from 'vue';
+
+import AppBox from 'components/app/AppBox.vue';
+
+import useOptionStore from 'src/stores/options';
+
+defineProps<{
+  readonly?: boolean;
+  data?: {
+    total: number;
+    discount: number;
+    totalVatExcluded: number;
+    totalVatIncluded: number;
+    totalAfterDiscount: number;
+  };
+}>();
+
+const quotationNo = defineModel<string>('quotationNo', { required: true });
+const actor = defineModel<string>('actor', { required: true });
+const workName = defineModel<string>('workName', { required: true });
+const contactor = defineModel<string>('contactor', { required: true });
+const telephone = defineModel<string>('telephone', { required: true });
+const documentReceivePoint = defineModel<string>('documentReceivePoint', {
+  required: true,
+});
+const dueDate = defineModel<string>('dueDate', { required: true });
+const payType = defineModel<string>('payType', { required: true });
+const paySplitCount = defineModel<string>('paySplitCount', { required: true });
+const payBank = defineModel<string>('payBank', { required: true });
+
+const optionStore = useOptionStore();
+
+const bankBookOptions = ref<Record<string, unknown>[]>([]);
+let bankBoookFilter: (
+  value: string,
+  update: (callbackFn: () => void, afterFn?: (ref: QSelect) => void) => void,
+) => void;
+
+onMounted(() => {
+  if (optionStore.globalOption) {
+    bankBoookFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.bankBook),
+      bankBookOptions,
+      'label',
+    );
+  }
+});
+
+watch(
+  () => optionStore.globalOption,
+  () => {
+    bankBoookFilter = selectFilterOptionRefMod(
+      ref(optionStore.globalOption.bankBook),
+      bankBookOptions,
+      'label',
+    );
+  },
+);
+</script>
+
+<template>
+  <AppBox no-padding bordered class="column">
+    <div
+      class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
+    >
+      <div class="icon-wrapper bg-color-orange q-mr-sm">
+        <q-icon name="mdi-file-outline" />
+      </div>
+      <span class="text-weight-bold">
+        {{ $t('quotation.label.infoDocument') }}
+      </span>
+    </div>
+
+    <div class="q-pa-sm">
+      <div class="row q-col-gutter-sm">
+        <q-input
+          :label="$t('quotation.label.quotationNo')"
+          :readonly="readonly"
+          v-model="quotationNo"
+          class="col-6"
+          dense
+          outlined
+        />
+        <q-input
+          :label="$t('quotation.label.actor')"
+          :readonly="readonly"
+          v-model="actor"
+          class="col-6"
+          dense
+          outlined
+        />
+        <q-input
+          :label="$t('quotation.label.workName')"
+          :readonly="readonly"
+          v-model="workName"
+          class="col-12"
+          dense
+          outlined
+        />
+        <q-input
+          :label="$t('quotation.label.contactor')"
+          :readonly="readonly"
+          v-model="contactor"
+          class="col-6"
+          dense
+          outlined
+        />
+        <q-input
+          :label="$t('quotation.label.telephone')"
+          :readonly="readonly"
+          v-model="telephone"
+          class="col-6"
+          dense
+          outlined
+        />
+        <q-input
+          :label="$t('quotation.label.documentReceivePoint')"
+          :readonly="readonly"
+          v-model="documentReceivePoint"
+          class="col-6"
+          dense
+          outlined
+        />
+        <q-input
+          :label="$t('quotation.label.dueDate')"
+          :readonly="readonly"
+          v-model="dueDate"
+          class="col-6"
+          dense
+          outlined
+        />
+      </div>
+    </div>
+    <div
+      class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
+    >
+      <div class="icon-wrapper bg-color-orange q-mr-sm">
+        <q-icon name="mdi-bank-outline" />
+      </div>
+      <span class="text-weight-bold">
+        {{ $t('quotation.label.infoPayment') }}
+      </span>
+    </div>
+    <div class="q-pa-sm">
+      <div class="row q-col-gutter-sm">
+        <q-select
+          outlined
+          clearable
+          use-input
+          emit-value
+          map-options
+          hide-bottom-space
+          input-debounce="0"
+          option-value="value"
+          option-label="label"
+          class="col-6"
+          autocomplete="off"
+          for="select-payType"
+          dense
+          :label="$t('quotation.label.payType')"
+          :options="[]"
+          :readonly="readonly"
+          :hide-dropdown-icon="readonly"
+          v-model="payType"
+        ></q-select>
+        <div class="col-4 column">
+          <span>{{ $t('quotation.label.paySplitCount') }}</span>
+          <span class="app-text-muted">
+            ({{ $t('quotation.label.payTotal') }})
+          </span>
+        </div>
+        <div class="col-2">
+          <q-input
+            v-model="paySplitCount"
+            class="col-6"
+            type="number"
+            dense
+            outlined
+          />
+        </div>
+        <q-select
+          outlined
+          clearable
+          use-input
+          emit-value
+          fill-input
+          map-options
+          hide-bottom-space
+          option-value="value"
+          input-debounce="0"
+          option-label="label"
+          class="col-12"
+          autocomplete="off"
+          for="select-bankbook"
+          dense
+          :label="$t('quotation.label.bank')"
+          :options="bankBookOptions"
+          :readonly="readonly"
+          :hide-dropdown-icon="readonly"
+          v-model="payBank"
+          @filter="bankBoookFilter"
+        >
+          <template v-slot:option="scope">
+            <q-item
+              v-if="scope.opt"
+              v-bind="scope.itemProps"
+              class="row items-center"
+            >
+              <q-item-section avatar>
+                <q-img
+                  :src="`/img/bank/${scope.opt.value}.png`"
+                  class="bordered"
+                  style="
+                    border-radius: 50%;
+                    aspect-ratio: 1;
+                    height: 2rem;
+                    width: 2rem;
+                  "
+                />
+              </q-item-section>
+              <q-item-section>
+                {{ scope.opt.label }}
+              </q-item-section>
+            </q-item>
+          </template>
+
+          <template v-slot:selected-item="scope">
+            <q-item-section
+              v-if="scope.opt && !!payBank"
+              avatar
+              class="q-py-sm row"
+            >
+              <q-img
+                :src="`/img/bank/${scope.opt.value}.png`"
+                class="bordered"
+                style="
+                  border-radius: 50%;
+                  aspect-ratio: 1;
+                  height: 2rem;
+                  width: 2rem;
+                "
+              />
+            </q-item-section>
+          </template>
+
+          <template v-slot:no-option>
+            <q-item>
+              <q-item-section class="text-grey">
+                {{ $t('general.noData') }}
+              </q-item-section>
+            </q-item>
+          </template>
+        </q-select>
+      </div>
+    </div>
+    <div
+      class="bordered-b q-px-md q-py-sm row bg-color-orange-light items-center"
+    >
+      <div class="icon-wrapper bg-color-orange q-mr-sm">
+        <Icon icon="iconoir:coins" />
+      </div>
+      <span class="text-weight-bold">
+        {{ $t('quotation.label.infoSummary') }}
+      </span>
+    </div>
+    <div class="q-pa-sm">
+      <div class="row">
+        {{ $t('general.total') }}
+        <span class="q-ml-auto">{{ data?.total || 0 }} ฿</span>
+      </div>
+      <div class="row">
+        {{ $t('general.discount') }}
+        <span class="q-ml-auto">{{ data?.discount || 0 }} ฿</span>
+      </div>
+      <div class="row">
+        {{ $t('general.totalAfterDiscount') }}
+        <span class="q-ml-auto">{{ data?.totalAfterDiscount || 0 }} ฿</span>
+      </div>
+      <div class="row">
+        {{ $t('general.totalVatExcluded') }}
+        <span class="q-ml-auto">{{ data?.totalVatExcluded || 0 }} ฿</span>
+      </div>
+      <div class="row">
+        {{ $t('general.totalVatIncluded') }}
+        <span class="q-ml-auto">{{ data?.totalVatIncluded || 0 }} ฿</span>
+      </div>
+    </div>
+  </AppBox>
+</template>
+
+<style scoped>
+.icon-wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: 1/1;
+  font-size: 1.5rem;
+  padding: var(--size-1);
+  border-radius: var(--radius-2);
+}
+
+.bg-color-orange {
+  --_color: var(--yellow-7-hsl);
+  color: white;
+  background: hsla(var(--_color));
+}
+
+.dark .bg-color-orange {
+  --_color: var(--orange-6-hsl);
+}
+
+.bg-color-orange-light {
+  --_color: var(--yellow-7-hsl);
+  background: hsla(var(--_color) / 0.2);
+}
+.dark .bg-color-orange {
+  --_color: var(--orange-6-hsl / 0.2);
+}
+</style>
diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index 3dafe67c..d5027c32 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -239,7 +239,7 @@ export function manageAttachment(api: AxiosInstance, base: string) {
   return {
     listAttachment: async (opts: { parentId: string }) => {
       const res = await api.get<string[]>(
-        `${base}/${opts.parentId}/attachment`,
+        `/${base}/${opts.parentId}/attachment`,
       );
       if (res.status >= 400) return false;
       return res.data;
@@ -249,7 +249,7 @@ export function manageAttachment(api: AxiosInstance, base: string) {
       name: string;
       download?: boolean;
     }) => {
-      const url = `${base}/${opts.parentId}/attachment/${opts.name}`;
+      const url = `/${base}/${opts.parentId}/attachment/${opts.name}`;
       const res = await api.get<string>(url);
       if (opts.download) {
         fetch(res.data)
@@ -270,7 +270,7 @@ export function manageAttachment(api: AxiosInstance, base: string) {
       file: File;
     }) => {
       const res = await api.put(
-        `${base}/${opts.parentId}/attachment/${opts.name}`,
+        `/${base}/${opts.parentId}/attachment/${opts.name}`,
         opts.file,
         {
           headers: { 'Content-Type': opts.file.type },
@@ -282,7 +282,7 @@ export function manageAttachment(api: AxiosInstance, base: string) {
     },
     delAttachment: async (opts: { parentId: string; name: string }) => {
       const res = await api.delete(
-        `${base}/${opts.parentId}/attachment/${opts.name}`,
+        `/${base}/${opts.parentId}/attachment/${opts.name}`,
       );
       if (res.status < 400) return true;
       return false;
@@ -294,7 +294,7 @@ export function manageFile<T extends string>(api: AxiosInstance, base: string) {
   return {
     listFile: async (opts: { group: T; parentId: string }) => {
       const res = await api.get<string[]>(
-        `${base}/${opts.parentId}/file-${opts.group}`,
+        `/${base}/${opts.parentId}/file-${opts.group}`,
       );
       if (res.status >= 400) return false;
       return res.data;
@@ -305,7 +305,7 @@ export function manageFile<T extends string>(api: AxiosInstance, base: string) {
       fileId: string;
       download?: boolean;
     }) => {
-      const url = `${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`;
+      const url = `/${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`;
       const res = await api.get<string>(url);
       if (opts.download) {
         fetch(res.data)
@@ -327,7 +327,7 @@ export function manageFile<T extends string>(api: AxiosInstance, base: string) {
       file: File;
     }) => {
       const res = await api.put(
-        `${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`,
+        `/${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`,
         opts.file,
         {
           headers: { 'Content-Type': opts.file.type },
@@ -339,7 +339,7 @@ export function manageFile<T extends string>(api: AxiosInstance, base: string) {
     },
     delFile: async (opts: { group: T; parentId: string; fileId: string }) => {
       const res = await api.delete(
-        `${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`,
+        `/${base}/${opts.parentId}/file-${opts.group}/${opts.fileId}`,
       );
       if (res.status < 400) return true;
       return false;