diff --git a/src/pages/05_quotation/MainPage.vue b/src/pages/05_quotation/MainPage.vue
index e1552682..d3bb3c75 100644
--- a/src/pages/05_quotation/MainPage.vue
+++ b/src/pages/05_quotation/MainPage.vue
@@ -1,22 +1,72 @@
 <script lang="ts" setup>
 import { onMounted, ref } from 'vue';
-
+import { storeToRefs } from 'pinia';
 import { productTreeDecoration } from './constants';
 import useProductServiceStore from 'src/stores/product-service';
-
 import {
   ProductGroup,
   ProductList,
   Service,
 } from 'src/stores/product-service/types';
+import {
+  EditButton,
+  DeleteButton,
+  SaveButton,
+  UndoButton,
+} from 'components/button';
 
+import BasicInformation from 'components/03_customer-management/employee/BasicInformation.vue';
+import FormPerson from 'components/02_personnel-management/FormPerson.vue';
+import { DialogContainer, DialogHeader } from 'components/dialog';
+import ProfileBanner from 'components/ProfileBanner.vue';
+import { AddressForm } from 'components/form';
+import {
+  EmployerFormBasicInfo,
+  EmployerFormBusiness,
+  EmployerFormContact,
+  EmployerFormAbout,
+} from 'src/pages/03_customer-management/components';
+
+import { CustomerBranchCreate } from 'stores/customer/types';
+import DialogForm from 'components/DialogForm.vue';
 import QuotationForm from './QuotationForm.vue';
 import TreeView from 'src/components/shared/TreeView.vue';
 import { AddButton } from 'src/components/button';
 import MainButton from 'src/components/button/MainButton.vue';
 
-const dialog = ref(true);
+import {
+  useCustomerForm,
+  useEmployeeForm,
+} from 'src/pages/03_customer-management/form';
+import useCustomerStore from 'stores/customer';
 
+const tabFieldRequired = ref<{ [key: string]: (keyof CustomerBranchCreate)[] }>(
+  {
+    main: [],
+    business: ['businessType', 'jobPosition'],
+    address: [
+      'homeCode',
+      'address',
+      'addressEN',
+      'provinceId',
+      'districtId',
+      'subDistrictId',
+    ],
+    contact: [],
+  },
+);
+
+const customerFormStore = useCustomerForm();
+const employeeFormStore = useEmployeeForm();
+const customerStore = useCustomerStore();
+
+const { state: customerFormState, currentFormData: customerFormData } =
+  storeToRefs(customerFormStore);
+const { state: employeeFormState, currentFromDataEmployee } =
+  storeToRefs(employeeFormStore);
+
+const test = ref(true);
+const dialog = ref(true);
 const nodes = ref([
   {
     title: 'กลุ่มสินค้าและบริการที่ 1',
@@ -246,6 +296,269 @@ function convertToTree() {
     My Menu
   </div> -->
   <QuotationForm v-model:dialog-state="dialog" readonly />
+
+  <DialogContainer
+    :model-value="test"
+    :on-open="async () => {}"
+    :on-close="() => {}"
+  >
+    <template #header>
+      <DialogHeader
+        :title="
+          customerFormState.dialogType === 'create'
+            ? $t(`general.add`, {
+                text: `${$t('customer.employer')} `,
+              })
+            : `${$t('customer.employer')} `
+        "
+      >
+        <template #title-after>
+          <span
+            :style="`color: hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+          >
+            :
+            {{
+              customerFormData.customerType === 'CORP'
+                ? $t('customer.employerLegalEntity')
+                : $t('customer.employerNaturalPerson')
+            }}
+          </span>
+        </template>
+      </DialogHeader>
+    </template>
+
+    <div class="q-px-lg q-pt-lg surface-2">
+      <ProfileBanner
+        v-if="customerFormData.customerBranch !== undefined"
+        active
+        hide-fade
+        :fallback-cover="`/images/customer-${customerFormData.customerType}-banner-bg.jpg`"
+        :img="
+          customerFormState.customerImageUrl ||
+          `/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`
+        "
+        :fallbackImg="`/images/customer-${customerFormData.customerType}-avartar-${customerFormData.customerType === 'PERS' ? customerFormData.customerBranch[0]?.gender : 'male'}.png`"
+        :color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/1)`"
+        :bg-color="`hsla(var(--${customerFormData.customerType === 'PERS' ? 'teal-10-hsl' : 'violet-11-hsl'})/0.1)`"
+        :icon="
+          customerFormData.customerType === 'PERS'
+            ? 'mdi-account-plus-outline'
+            : 'mdi-office-building-outline'
+        "
+        :title="
+          customerFormData.customerType === 'PERS'
+            ? `${customerFormData.customerBranch[0]?.firstName} ${customerFormData.customerBranch[0]?.lastName}`
+            : customerFormData.customerBranch[0]?.registerName
+        "
+        :caption="
+          customerFormData.customerType === 'PERS'
+            ? `${customerFormData.customerBranch[0]?.firstNameEN} ${customerFormData.customerBranch[0]?.lastNameEN}`
+            : customerFormData.customerBranch[0]?.registerNameEN
+        "
+        @view="
+          () => {
+            customerFormState.imageDialog = true;
+            customerFormState.isImageEdit = false;
+          }
+        "
+        @edit="
+          customerFormState.imageDialog = customerFormState.isImageEdit = true
+        "
+      />
+    </div>
+    <div
+      style="flex: 1; width: 100%; overflow-y: auto"
+      class="surface-2 q-pa-lg"
+      id="customer-form"
+    >
+      <div class="col surface-1 full-height rounded bordered scroll row">
+        <div
+          class="col-12 q-py-md q-pr-md q-pl-sm"
+          id="customer-form-content"
+          style="height: 100%; max-height: 100%; overflow-y: auto"
+        >
+          <div class="row" id="form-branch-customer-branch">
+            <!-- v-if="customerFormData.customerBranch" -->
+            <q-form
+              class="full-width q-col-gutter-sm"
+              greedy
+              @submit.prevent="async () => {}"
+            >
+              <!-- v-if="!!customerFormState.editCustomerId" -->
+              <div class="col-12 text-weight-bold text-body1 row items-center">
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-briefcase-outline"
+                  style="background-color: var(--surface-3)"
+                />
+                <span>{{ $t('customer.form.group.branch') }}</span>
+              </div>
+
+              <EmployerFormAbout :index="(0).toString()" customerType="CORP" />
+
+              <div class="col-12 text-weight-bold text-body1 row items-center">
+                <q-icon
+                  flat
+                  size="xs"
+                  class="q-pa-sm rounded q-mr-xs"
+                  color="info"
+                  name="mdi-briefcase-outline"
+                  style="background-color: var(--surface-3)"
+                />
+                <span>{{ $t('customerBranch.tab.business') }}</span>
+              </div>
+
+              <EmployerFormBusiness prefixId="dialog" dense outlined />
+
+              <AddressForm
+                prefix-id="employer"
+                hide-title
+                dense
+                outlined
+                use-employment
+                :title="$t('form.address')"
+                :addressTitle="$t('form.address')"
+                :addressTitleEN="$t('form.address', { suffix: '(EN)' })"
+              />
+            </q-form>
+          </div>
+        </div>
+      </div>
+    </div>
+  </DialogContainer>
+
+  <DialogForm
+    hideFooter
+    :title="$t('form.title.create', { name: $t('customer.employee') })"
+    v-model:modal="test"
+    :undo="() => {}"
+    :submit="async () => {}"
+    :show="() => {}"
+  >
+    <div class="q-px-lg q-pt-lg surface-2">
+      <ProfileBanner
+        active
+        useToggle
+        color="white"
+        icon="mdi-account-plus-outline"
+        :bg-color="
+          employeeFormState.profileUrl
+            ? 'white'
+            : 'linear-gradient(135deg, rgba(43,137,223,1) 0%, rgba(230,51,81,1) 100%)'
+        "
+        v-model:current-tab="employeeFormState.currentTab"
+        v-model:toggle-status="currentFromDataEmployee.status"
+        fallbackCover="/images/employee-banner.png"
+        :img="employeeFormState.profileUrl || `/images/employee-avatar.png`"
+        :toggleTitle="$t('status.title')"
+        hideFade
+        @view="
+          () => {
+            employeeFormState.imageDialog = true;
+            employeeFormState.isImageEdit = false;
+          }
+        "
+        @edit="
+          employeeFormState.imageDialog = employeeFormState.isImageEdit = true
+        "
+        @update:toggle-status="
+          () => {
+            currentFromDataEmployee.status =
+              currentFromDataEmployee.status === 'CREATED'
+                ? 'INACTIVE'
+                : 'CREATED';
+          }
+        "
+      />
+    </div>
+
+    <div
+      style="flex: 1; width: 100%; overflow-y: auto"
+      class="surface-2 q-pa-lg"
+      id="drawer-employee-form"
+    >
+      <div class="col surface-1 full-height rounded bordered scroll row">
+        <div
+          class="col-12 full-width col-md-10 q-py-md q-pr-md q-pl-sm"
+          id="employee-form-content"
+          style="height: 100%; max-height: 100; overflow-y: auto"
+        >
+          <template v-if="employeeFormState.currentTab === 'personalInfo'">
+            <div
+              class="surface-1 rounded q-pt-sm row"
+              style="position: absolute; z-index: 999; right: 4%"
+            >
+              <UndoButton
+                v-if="
+                  employeeFormState.isEmployeeEdit &&
+                  employeeFormState.dialogType !== 'create'
+                "
+                id="btn-info-basic-undo"
+                icon-only
+                @click="
+                  () => {
+                    employeeFormStore.resetFormDataEmployee();
+                    employeeFormState.isEmployeeEdit = false;
+                    employeeFormState.dialogType = 'info';
+                  }
+                "
+                type="button"
+              />
+              <SaveButton
+                v-if="employeeFormState.isEmployeeEdit"
+                id="btn-info-basic-save"
+                icon-only
+                type="submit"
+              />
+              <EditButton
+                v-if="!employeeFormState.isEmployeeEdit"
+                id="btn-info-basic-edit"
+                icon-only
+                @click="
+                  () => {
+                    employeeFormState.isEmployeeEdit = true;
+                    employeeFormState.dialogType = 'edit';
+                  }
+                "
+                type="button"
+              />
+              <DeleteButton
+                v-if="!employeeFormState.isEmployeeEdit"
+                id="btn-info-basic-delete"
+                icon-only
+              />
+            </div>
+
+            <BasicInformation
+              no-action
+              id="form-information"
+              prefix-id="form-employee"
+              :show-btn-save="employeeFormState.dialogType === 'create'"
+              employee
+              dense
+              outlined
+              separator
+              title="form.field.basicInformation"
+              class="q-mb-xl"
+            />
+            <FormPerson
+              id="form-personal"
+              prefix-id="form-employee"
+              dense
+              outlined
+              employee
+              separator
+              title="customerEmployee.form.group.personalInfo"
+              class="q-mb-xl"
+            />
+          </template>
+        </div>
+      </div>
+    </div>
+  </DialogForm>
 </template>
 
 <style scoped></style>