diff --git a/src/components/05_quotation/MainDialog.vue b/src/components/05_quotation/MainDialog.vue
index fe59cc7c..1a960d4d 100644
--- a/src/components/05_quotation/MainDialog.vue
+++ b/src/components/05_quotation/MainDialog.vue
@@ -11,7 +11,7 @@ const dialogState = defineModel('state', { default: true });
 </script>
 
 <template>
-  <q-dialog v-model="dialogState">
+  <q-dialog v-model="dialogState" full-width full-height>
     <AppBox
       style="
         padding: 0;
@@ -19,10 +19,6 @@ const dialogState = defineModel('state', { default: true });
         max-height: 100%;
         flex-wrap: nowrap;
       "
-      :style="{
-        width: width ?? '100%',
-        maxWidth: maxWidth ?? '98%',
-      }"
       class="column"
     >
       <div class="row items-center q-py-sm q-px-md bordered-b">
@@ -43,9 +39,11 @@ const dialogState = defineModel('state', { default: true });
         class="dialog-body"
         style="
           flex: 1;
-          max-height: calc(100vh - 200px);
           overflow-y: auto;
           position: relative;
+          display: flex;
+          flex-direction: column;
+          height: 100%;
         "
       >
         <slot />
diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index 1e14b84c..d8f231cf 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -1,15 +1,9 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
 import QuotationForm from './QuotationForm.vue';
-import SideMenu from 'components/SideMenu.vue';
-import ImageUploadDialog from 'components/ImageUploadDialog.vue';
-import { watch } from 'vue';
 import TreeView from 'src/components/shared/TreeView.vue';
 
 const isOpen = ref(true);
-const imageUploadDialog = ref<InstanceType<typeof ImageUploadDialog>>();
-const file = ref<File | null>(null);
-
 const nodes = ref([
   {
     title: 'กลุ่มสินค้าและบริการที่ 1',
@@ -129,8 +123,8 @@ const nodes = ref([
     id="my-anchor"
   >
     My Menu
-  </div>
-  <QuatationForm v-model:dialog-state="isOpen" /> -->
+  </div> -->
+  <QuotationForm v-model:dialog-state="isOpen" readonly />
 </template>
 
 <style scoped></style>
diff --git a/src/pages/05_quotation/QuotationForm.vue b/src/pages/05_quotation/QuotationForm.vue
index aac01f86..95733208 100644
--- a/src/pages/05_quotation/QuotationForm.vue
+++ b/src/pages/05_quotation/QuotationForm.vue
@@ -1,16 +1,33 @@
 <script lang="ts" setup>
 import { ref } from 'vue';
-import { Icon } from '@iconify/vue';
+import { QSelect } from 'quasar';
 
+import AppBox from 'components/app/AppBox.vue';
 import MainDialog from 'components/05_quotation/MainDialog.vue';
 import WorkerItem from 'components/05_quotation/WorkerItem.vue';
-import AppBox from 'components/app/AppBox.vue';
+import QuotationFormInfo from './QuotationFormInfo.vue';
+import { AddButton, SaveButton } from 'components/button';
+
+defineProps<{
+  readonly?: boolean;
+}>();
 
 const dialogState = defineModel<boolean>({ default: true });
 
 const selectedBranchIssuer = ref('');
 const selectedCustomer = ref('');
 const toggleWorker = ref(true);
+
+const quotationNo = ref('');
+const actor = ref('');
+const workName = ref('');
+const contactor = ref('');
+const telephone = ref('');
+const documentReceivePoint = ref('');
+const dueDate = ref('');
+const payType = ref('');
+const paySplitCount = ref('');
+const payBank = ref('');
 </script>
 
 <template>
@@ -48,144 +65,81 @@ const toggleWorker = ref(true);
 
     <div
       class="surface-2 bordered-t row"
-      style="align-items: stretch; overflow-y: auto"
+      style="flex-grow: 1; overflow-y: hidden"
+      :style="{
+        overflowY: $q.screen.gt.sm ? 'hidden' : 'auto',
+      }"
     >
       <div
-        class="col-12 col-sm-9 row items-stretch"
-        style="padding: var(--size-3)"
+        class="col-12 col-sm-9 row"
+        style="padding: var(--size-3); overflow-y: auto"
+        :style="{
+          paddingRight: $q.screen.gt.sm ? 'var(--size-2)' : 'var(--size-3)',
+          maxHeight: $q.screen.gt.sm ? '100%' : undefined,
+        }"
       >
-        <AppBox
-          class="full-width"
-          bordered
-          style="
-            padding: var(--size-3);
-            max-height: calc(100vh - 300px - var(--size-3) * 2);
-            overflow-y: auto;
-          "
-        >
-          <div class="row items-center q-mb-sm">
-            <span style="flex: 1">
-              {{ $t('quotation.form.listWorker') }}
-              <q-toggle
-                v-model="toggleWorker"
-                id="toggle-status"
-                size="md"
-                padding="none"
-                class="q-ml-md"
-                dense
-              />
-            </span>
-            <button
-              id="add-btn-plus"
-              class="row items-center"
-              style="border: none; background: transparent"
-            >
-              <Icon
-                height="24"
-                icon="pixelarticons:plus"
-                class="app-text-info cursor-pointer"
-              />
-            </button>
-          </div>
+        <div class="col">
+          <AppBox bordered style="padding: var(--size-3)">
+            <div class="row items-center q-mb-sm">
+              <span style="flex: 1">
+                {{ $t('quotation.label.listWorker') }}
+                <q-toggle
+                  v-model="toggleWorker"
+                  id="toggle-status"
+                  size="md"
+                  padding="none"
+                  class="q-ml-md"
+                  dense
+                />
+              </span>
+              <AddButton icon-only />
+            </div>
 
-          <AppBox class="surface-2 worker-list" bordered>
-            <WorkerItem
-              :data="{
-                no: 1,
-                refNo: 'CC6613334',
-                nationality: 'Thai',
-                birthDate: '1 May 2001',
-                age: '23 Years',
-                fullName: 'Methapon Metanipat',
-                docExpireDate: '16 May 2025',
-              }"
-              color="male"
-            />
-            <WorkerItem
-              :data="{
-                no: 1,
-                refNo: 'CC6613334',
-                nationality: 'Thai',
-                birthDate: '1 May 2001',
-                age: '23 Years',
-                fullName: 'Methapon Metanipat',
-                docExpireDate: '16 May 2025',
-              }"
-              color="male"
-            />
-            <q-tabs
-              inline-label
-              mobile-arrows
-              dense
-              align="left"
-              class="full-width"
-              active-color="info"
-            >
-              <q-tab name="ALL">
-                <div class="row">{{ $t('all') }}</div>
-              </q-tab>
-              <q-tab name="USER">
-                <div class="row">
-                  {{ $t('USER') }}
-                </div>
-              </q-tab>
-              <q-tab name="MESSENGER">
-                <div class="row">
-                  {{ $t('MESSENGER') }}
-                </div>
-              </q-tab>
-              <q-tab name="DELEGATE">
-                <div class="row">
-                  {{ $t('DELEGATE') }}
-                </div>
-              </q-tab>
-              <q-tab name="AGENCY">
-                <div class="row">
-                  {{ $t('AGENCY') }}
-                </div>
-              </q-tab>
-            </q-tabs>
+            <AppBox class="surface-2 worker-list" v-if="toggleWorker" bordered>
+              <WorkerItem
+                v-for="_ in Array(20)"
+                :data="{
+                  no: 1,
+                  refNo: 'CC6613334',
+                  nationality: 'Thai',
+                  birthDate: '1 May 2001',
+                  age: '23 Years',
+                  fullName: 'Methapon Metanipat',
+                  docExpireDate: '16 May 2025',
+                }"
+                color="male"
+              />
+            </AppBox>
           </AppBox>
-        </AppBox>
+        </div>
       </div>
       <div
         class="col-12 col-sm-3"
-        style="
-          padding: var(--size-3);
-          padding-left: 0;
-          overflow-y: auto;
-          max-height: calc(100vh - 300px);
-        "
+        style="padding: var(--size-3); overflow-y: auto"
+        :style="{
+          paddingLeft: $q.screen.gt.sm ? 'var(--size-1)' : 'var(--size-3)',
+          maxHeight: $q.screen.gt.sm ? '100%' : undefined,
+        }"
       >
-        <AppBox bordered class="column" style="gap: var(--size-3)">
-          <div class="rounded bordered q-px-md q-py-sm row">
-            <div class="col-4">{{ $t('quotation.form.labelNo') }}</div>
-          </div>
-
-          <div class="rounded bordered q-px-md q-py-sm row">
-            <div class="col-4">{{ $t('quotation.form.labelDate') }}</div>
-          </div>
-
-          <div class="rounded bordered q-px-md q-py-sm row">
-            <div class="col-4">{{ $t('quotation.form.labelTime') }}</div>
-          </div>
-
-          <div class="rounded bordered q-px-md q-py-sm row">
-            <div class="col-4">{{ $t('quotation.form.labelProcesser') }}</div>
-          </div>
-        </AppBox>
+        <QuotationFormInfo
+          v-model:quotation-no="quotationNo"
+          v-model:actor="actor"
+          v-model:work-name="workName"
+          v-model:contactor="contactor"
+          v-model:telephone="telephone"
+          v-model:document-receive-point="documentReceivePoint"
+          v-model:due-date="dueDate"
+          v-model:pay-type="payType"
+          v-model:pay-bank="payBank"
+          v-model:pay-split-count="paySplitCount"
+          :readonly
+        />
       </div>
     </div>
 
     <template #footer>
       <div class="row justify-end full-width">
-        <q-btn
-          color="primary"
-          dense
-          no-caps
-          :label="$t('quotation.form.buttonSave')"
-          class="q-px-md"
-        />
+        <SaveButton />
       </div>
     </template>
   </MainDialog>
@@ -195,4 +149,32 @@ const toggleWorker = ref(true);
 .worker-list > :deep(*:not(:last-child)) {
   margin-bottom: var(--size-2);
 }
+
+.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>