diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 24f19ee9..d35ab235 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -4,7 +4,7 @@ export default {
     save: 'Save',
     open: 'Open',
     close: 'Close',
-    edit: 'Edit',
+    edit: 'Edit{text}',
     cancel: 'Cancel',
     back: 'Back',
     undo: 'Undo',
@@ -31,6 +31,7 @@ export default {
     displayField: 'Display Fields',
     order: 'Order',
     name: '{msg} Name',
+    nameEN: 'Name (English)',
     fullName: 'Full Name',
     detail: '{msg} Detail',
     remark: '{msg} Remark',
@@ -209,6 +210,7 @@ export default {
       customer: 'Customer',
       mainData: 'Main Data',
       agencies: 'Agencies',
+      businessType: 'Business Type',
     },
 
     sales: {
@@ -1510,4 +1512,11 @@ export default {
     last90Days: 'Last 90 Days',
     customDateRange: 'Custom Date Range',
   },
+
+  businessType: {
+    title: 'Business Type',
+    caption: 'Manage Business Type',
+    name: 'Business Type Name',
+    nameEn: 'Business Type Name (English)',
+  },
 };
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index e8109479..57337ad1 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -4,7 +4,7 @@ export default {
     save: 'บันทึก',
     open: 'เปิด',
     close: 'ปิด',
-    edit: 'แก้ไข',
+    edit: 'แก้ไข{text}',
     cancel: 'ยกเลิก',
     back: 'ย้อนกลับ',
     undo: 'ย้อนกลับ',
@@ -31,6 +31,7 @@ export default {
     displayField: 'ฟิลด์แสดงผล',
     order: 'ลำดับ',
     name: 'ชื่อ{msg}',
+    nameEN: 'ชื่อ (ภาษาอังกฤษ)',
     fullName: 'ชื่อ-สกุล',
     detail: 'รายละเอียด{msg}',
     remark: 'หมายเหตุ{msg}',
@@ -209,6 +210,7 @@ export default {
       customer: 'ลูกค้า',
       mainData: 'ข้อมูลหลัก',
       agencies: 'หน่วยงาน',
+      businessType: 'ประเภทกิจการ',
     },
 
     sales: {
@@ -1498,4 +1500,11 @@ export default {
     last90Days: '90 วันที่ผ่านมา',
     customDateRange: 'กำหนดช่วงวันที่เอง',
   },
+
+  businessType: {
+    title: 'ประเภทกิจการ',
+    caption: 'จัดการประเภทกิจการ',
+    name: 'ชื่อประเภทกิจการ',
+    nameEn: 'ชื่อประเภทกิจการ (ภาษาอังกฤษ)',
+  },
 };
diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index 4d7ea910..3de9b21a 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -106,6 +106,10 @@ function initMenu() {
           label: 'agencies',
           route: '/agencies-management',
         },
+        {
+          label: 'businessType',
+          route: '/business-type',
+        },
       ],
     },
     {
diff --git a/src/pages/16_ิbusiness-type-management/AgenciesDialog.vue b/src/pages/16_ิbusiness-type-management/AgenciesDialog.vue
deleted file mode 100644
index e1597b03..00000000
--- a/src/pages/16_ิbusiness-type-management/AgenciesDialog.vue
+++ /dev/null
@@ -1,658 +0,0 @@
-<script setup lang="ts">
-import { reactive, ref, watch } from 'vue';
-import { InstitutionPayload } from 'src/stores/institution/types';
-import { Icon } from '@iconify/vue/dist/iconify.js';
-
-import { useInstitution } from 'src/stores/institution';
-import { baseUrl } from 'src/stores/utils';
-
-import DrawerInfo from 'src/components/DrawerInfo.vue';
-import DialogForm from 'src/components/DialogForm.vue';
-import ProfileBanner from 'src/components/ProfileBanner.vue';
-import SideMenu from 'src/components/SideMenu.vue';
-import FormBank from 'src/components/01_branch-management/FormBank.vue';
-import FormBasicInfoAgencies from 'src/components/07_agencies-management/FormBasicInfoAgencies.vue';
-import {
-  UndoButton,
-  SaveButton,
-  EditButton,
-  DeleteButton,
-} from 'src/components/button';
-import AddressForm from 'src/components/form/AddressForm.vue';
-import ImageUploadDialog from 'src/components/ImageUploadDialog.vue';
-import { BankBook } from 'src/stores/branch/types';
-import QrCodeUploadDialog from 'src/components/QrCodeUploadDialog.vue';
-
-const institutionStore = useInstitution();
-
-const model = defineModel<boolean>({ required: true, default: false });
-const drawerModel = defineModel<boolean>('drawerModel', {
-  required: true,
-  default: false,
-});
-const imageListOnCreate = defineModel<{
-  selectedImage: string;
-  list: { url: string; imgFile: File | null; name: string }[];
-}>('imageListOnCreate', { default: { selectedImage: '', list: [] } });
-const deletesStatusQrCodeBankImag = defineModel<number[]>(
-  'deletesStatusQrCodeBankImag',
-  { default: [] },
-);
-
-const imageState = reactive({
-  imageDialog: false,
-  isImageEdit: false,
-  refreshImageState: false,
-
-  imageUrl: '',
-});
-
-const imageFile = ref<File | null>(null);
-const imageList = ref<{ selectedImage: string; list: string[] }>();
-
-const qrCodeDialog = ref(false);
-const qrCodeImageUrl = ref<string>('');
-const currentIndexQrCodeBank = ref<number>(-1);
-const statusQrCodeFile = ref<File | undefined>(undefined);
-const refQrCodeUpload = ref();
-const statusQrCodeUrl = ref<string>('');
-const statusDeletesQrCode = ref<boolean>(false);
-
-const props = withDefaults(
-  defineProps<{
-    readonly?: boolean;
-    isEdit?: boolean;
-    hideAction?: boolean;
-    hideDelete?: boolean;
-
-    dataId?: string;
-  }>(),
-  { readonly: false, isEdit: false, dataId: '' },
-);
-
-defineExpose({ clearImageState });
-
-const emit = defineEmits<{
-  (e: 'submit'): void;
-  (e: 'close'): void;
-  (e: 'changeStatus'): void;
-  (e: 'drawerUndo'): void;
-  (e: 'drawerEdit'): void;
-  (e: 'drawerDelete'): void;
-  (e: 'addImage'): void;
-  (e: 'removeImage'): void;
-  (e: 'submitImage', name: string): void;
-}>();
-
-const data = defineModel<InstitutionPayload>('data', {
-  required: true,
-  default: {
-    group: '',
-    name: '',
-    nameEN: '',
-    contactName: '',
-    contactEmail: '',
-    contactTel: '',
-    code: '',
-    addressEN: '',
-    address: '',
-    soi: '',
-    soiEN: '',
-    moo: '',
-    mooEN: '',
-    street: '',
-    streetEN: '',
-    subDistrictId: '',
-    districtId: '',
-    provinceId: '',
-    selectedImage: '',
-  },
-});
-const formBankBook = defineModel<BankBook[]>('formBankBook', {
-  default: [
-    {
-      bankName: '',
-      accountNumber: '',
-      bankBranch: '',
-      accountName: '',
-      accountType: '',
-      currentlyUse: true,
-      bankUrl: '',
-    },
-  ],
-});
-
-function viewImage() {
-  imageState.imageDialog = true;
-  imageState.isImageEdit = false;
-}
-
-function editImage() {
-  imageState.imageDialog = imageState.isImageEdit = true;
-}
-
-async function fetchImageList(id: string, selectedName: string) {
-  const res = await institutionStore.fetchImageListById(id);
-  imageList.value = {
-    selectedImage: selectedName,
-    list: res.map((n: string) => `institution/${id}/image/${n}`),
-  };
-  return res;
-}
-
-async function addImage(file: File | null) {
-  if (!file) return;
-  if (!props.dataId) return;
-
-  await institutionStore.addImageList(
-    file,
-    props.dataId,
-    Date.now().toString(),
-  );
-  await fetchImageList(props.dataId, data.value.selectedImage || '');
-}
-
-async function removeImage(name: string) {
-  if (!name) return;
-  if (!props.dataId) return;
-
-  const targetName = name.split('/').pop() || '';
-  await institutionStore.deleteImageByName(props.dataId, targetName);
-  await fetchImageList(props.dataId, data.value.selectedImage || '');
-}
-
-async function submitImage(name: string) {
-  if (model.value) {
-    imageState.imageUrl = name;
-    imageState.imageDialog = false;
-  } else {
-    imageState.refreshImageState = true;
-    emit('submitImage', name);
-  }
-}
-
-function clearImageState() {
-  imageState.imageDialog = false;
-  imageFile.value = null;
-  imageListOnCreate.value = { selectedImage: '', list: [] };
-  imageState.refreshImageState = false;
-}
-
-function triggerEditQrCodeBank(opts?: { save?: boolean }) {
-  if (opts?.save === undefined) {
-    qrCodeDialog.value = true;
-    statusDeletesQrCode.value = false;
-    statusQrCodeUrl.value =
-      formBankBook.value[currentIndexQrCodeBank.value].bankUrl || '';
-    statusDeletesQrCode.value = false;
-  } else {
-    formBankBook.value[currentIndexQrCodeBank.value].bankUrl =
-      statusQrCodeUrl.value;
-
-    formBankBook.value[currentIndexQrCodeBank.value].bankQr =
-      statusQrCodeFile.value;
-
-    if (statusDeletesQrCode.value === true) {
-      deletesStatusQrCodeBankImag.value.push(currentIndexQrCodeBank.value);
-    }
-    if (statusDeletesQrCode.value === false) {
-      deletesStatusQrCodeBankImag.value =
-        deletesStatusQrCodeBankImag.value.filter(
-          (item) => item !== currentIndexQrCodeBank.value,
-        );
-    }
-
-    currentIndexQrCodeBank.value = -1;
-    statusDeletesQrCode.value = false;
-  }
-}
-
-watch(
-  () => imageFile.value,
-  () => {
-    if (imageFile.value !== null) imageState.isImageEdit = true;
-  },
-);
-
-watch(
-  () => data.value.selectedImage,
-  () => {
-    imageState.imageUrl = `${baseUrl}/institution/${props.dataId}/image/${data.value.selectedImage}`;
-    imageList.value
-      ? (imageList.value.selectedImage = data.value.selectedImage || '')
-      : '';
-    imageState.refreshImageState = false;
-  },
-);
-
-watch(
-  () => drawerModel.value,
-  async () => {
-    if (drawerModel.value) {
-      await fetchImageList(props.dataId, data.value.selectedImage || '');
-      imageState.imageUrl = `${baseUrl}/institution/${props.dataId}/image/${data.value.selectedImage}`;
-    } else {
-      imageList.value = { selectedImage: '', list: [] };
-    }
-  },
-);
-</script>
-<template>
-  <DialogForm
-    hide-footer
-    :title="$t('general.add', { text: $t('agencies.title') })"
-    v-model:modal="model"
-    :submit="() => $emit('submit')"
-    :close="
-      () => {
-        imageState.imageUrl = '';
-        clearImageState();
-        $emit('close');
-      }
-    "
-  >
-    <div
-      :class="{
-        'q-mx-lg q-my-md': $q.screen.gt.sm,
-        'q-mx-md q-my-sm': !$q.screen.gt.sm,
-      }"
-    >
-      <ProfileBanner
-        prefix="dialog"
-        active
-        use-toggle
-        hide-fade
-        :toggle-title="$t('status.title')"
-        :icon="'ph-building-office'"
-        :img="imageState.imageUrl || null"
-        :title="data.name"
-        :caption="data.code"
-        :color="`hsla(var(--green-8-hsl)/1)`"
-        :bg-color="`hsla(var(--green-8-hsl)/0.1)`"
-        v-model:toggle-status="data.status"
-        @view="viewImage"
-        @edit="editImage"
-        @update:toggle-status="
-          () => {
-            data.status = data.status === 'CREATED' ? 'INACTIVE' : 'CREATED';
-          }
-        "
-      />
-    </div>
-
-    <div
-      class="col surface-1 rounded bordered scroll row relative-position"
-      :class="{
-        'q-mb-lg q-mx-lg ': $q.screen.gt.sm,
-        'q-mb-sm q-mx-md': !$q.screen.gt.sm,
-      }"
-      id="group-form"
-    >
-      <div
-        class="col"
-        style="height: 100%; max-height: 100; overflow-y: auto"
-        v-if="$q.screen.gt.sm"
-      >
-        <div class="q-py-md q-pl-md q-pr-sm">
-          <SideMenu
-            :menu="[
-              {
-                name: $t('form.field.basicInformation'),
-                anchor: 'agencies-form-basic-info',
-              },
-              {
-                name: $t('general.address'),
-                anchor: 'agencies-form-address-info',
-              },
-              {
-                name: $t('agencies.bankInfo'),
-                anchor: 'agencies-form-bank-info',
-              },
-            ]"
-            background="transparent"
-            :active="{
-              background: 'hsla(var(--blue-6-hsl) / .2)',
-              foreground: 'var(--blue-6)',
-            }"
-            scroll-element="#agencies-form-content"
-          />
-        </div>
-      </div>
-      <div
-        class="col-12 col-md-10"
-        id="agencies-form-content"
-        :class="{
-          'q-py-md q-pr-md ': $q.screen.gt.sm,
-          'q-pa-sm': !$q.screen.gt.sm,
-        }"
-        style="height: 100%; max-height: 100%; overflow-y: auto"
-      >
-        <div
-          class="rounded"
-          :class="{
-            'q-py-md q-px-lg': $q.screen.gt.sm,
-            'q-pa-sm': !$q.screen.gt.sm,
-          }"
-          style="position: absolute; z-index: 99999; top: 0; right: 0"
-        >
-          <div class="surface-1 row rounded">
-            <SaveButton id="btn-info-basic-save" icon-only type="submit" />
-          </div>
-        </div>
-        <FormBasicInfoAgencies
-          id="agencies-form-basic-info"
-          class="q-mb-xl"
-          v-model:group="data.group"
-          v-model:name="data.name"
-          v-model:name-en="data.nameEN"
-          v-model:contact-name="data.contactName"
-          v-model:email="data.contactEmail"
-          v-model:contact-tel="data.contactTel"
-        />
-        <AddressForm
-          id="agencies-form-address-info"
-          dense
-          :prefix-id="''"
-          v-model:address="data.address"
-          v-model:address-en="data.addressEN"
-          v-model:moo="data.moo"
-          v-model:moo-en="data.mooEN"
-          v-model:soi="data.soi"
-          v-model:soi-en="data.soiEN"
-          v-model:street="data.street"
-          v-model:street-en="data.streetEN"
-          v-model:province-id="data.provinceId"
-          v-model:district-id="data.districtId"
-          v-model:sub-district-id="data.subDistrictId"
-        />
-        <FormBank
-          id="agencies-form-bank-info"
-          title="agencies.bankInfo"
-          class="q-pt-xl"
-          dense
-          v-model:bank-book-list="formBankBook"
-          @view-qr="
-            (i) => {
-              currentIndexQrCodeBank = i;
-              triggerEditQrCodeBank();
-            }
-          "
-          @edit-qr="
-            (i) => {
-              currentIndexQrCodeBank = i;
-              refQrCodeUpload && refQrCodeUpload.browse();
-            }
-          "
-        />
-      </div>
-    </div>
-  </DialogForm>
-
-  <DrawerInfo
-    bg-on
-    hide-action
-    :is-edit="isEdit"
-    :title="data.name"
-    v-model:drawerOpen="drawerModel"
-    :submit="() => $emit('submit')"
-    :close="
-      () => {
-        clearImageState();
-        $emit('close');
-      }
-    "
-  >
-    <div class="col column full-height">
-      <div
-        :class="{
-          'q-mx-lg q-my-md': $q.screen.gt.sm,
-          'q-mx-md q-my-sm': !$q.screen.gt.sm,
-        }"
-      >
-        <ProfileBanner
-          :prefix="data.name"
-          hide-fade
-          use-toggle
-          :readonly="hideAction"
-          :active="data.status !== 'INACTIVE'"
-          :toggle-title="$t('status.title')"
-          :icon="'ph-building-office'"
-          :title="data.name"
-          :caption="data.code"
-          :color="`hsla(var(${'--green-8'}-hsl)/1)`"
-          :bg-color="`hsla(var(${'--green-8'}-hsl)/0.1)`"
-          :img="
-            `${baseUrl}/institution/${dataId}/image/${data.selectedImage}`.concat(
-              imageState.refreshImageState ? `?ts=${Date.now()}` : '',
-            ) || null
-          "
-          v-model:toggle-status="data.status"
-          @view="viewImage"
-          @edit="editImage"
-          @update:toggle-status="$emit('changeStatus')"
-        />
-      </div>
-
-      <div
-        style="flex: 1; width: 100%; overflow-y: auto"
-        id="drawer-user-form"
-        :class="{
-          'q-px-lg q-pb-lg': $q.screen.gt.sm,
-          'q-px-md q-pb-sm': !$q.screen.gt.sm,
-        }"
-      >
-        <div
-          class="col surface-1 full-height rounded bordered scroll row relative-position"
-        >
-          <div
-            class="rounded row"
-            :class="{
-              'q-py-md q-px-lg': $q.screen.gt.sm,
-              'q-pa-sm': !$q.screen.gt.sm,
-            }"
-            style="position: absolute; z-index: 999; top: 0; right: 0"
-          >
-            <div
-              v-if="data.status !== 'INACTIVE' && !hideAction"
-              class="surface-1 row rounded"
-            >
-              <UndoButton
-                v-if="isEdit"
-                id="btn-info-basic-undo"
-                icon-only
-                @click="
-                  () => {
-                    $emit('drawerUndo');
-                  }
-                "
-                type="button"
-              />
-              <SaveButton
-                v-if="isEdit"
-                id="btn-info-basic-save"
-                icon-only
-                type="submit"
-              />
-              <EditButton
-                v-if="!isEdit"
-                id="btn-info-basic-edit"
-                icon-only
-                @click="
-                  () => {
-                    $emit('drawerEdit');
-                    // infoDrawerEdit = true;
-                    // isImageEdit = true;
-                  }
-                "
-                type="button"
-              />
-              <DeleteButton
-                v-if="!isEdit && !hideDelete"
-                id="btn-info-basic-delete"
-                icon-only
-                @click="
-                  () => {
-                    $emit('drawerDelete');
-                  }
-                "
-                type="button"
-              />
-            </div>
-          </div>
-          <div
-            class="col"
-            style="height: 100%; overflow-y: auto"
-            v-if="$q.screen.gt.sm"
-          >
-            <div class="q-py-md q-pl-md q-pr-sm">
-              <SideMenu
-                :menu="[
-                  {
-                    name: $t('form.field.basicInformation'),
-                    anchor: 'agencies-basic-info',
-                  },
-                  {
-                    name: $t('general.address'),
-                    anchor: 'agencies-address-info',
-                  },
-                  {
-                    name: $t('agencies.bankInfo'),
-                    anchor: 'agencies-bank-info',
-                  },
-                ]"
-                background="transparent"
-                :active="{
-                  background: 'hsla(var(--blue-6-hsl) / .2)',
-                  foreground: 'var(--blue-6)',
-                }"
-                scroll-element="#agencies-view-content"
-              />
-            </div>
-          </div>
-
-          <div
-            class="col-12 col-md-10 relative-position"
-            :class="{
-              'q-py-md q-pr-md ': $q.screen.gt.sm,
-              'q-pa-sm': !$q.screen.gt.sm,
-            }"
-            id="agencies-view-content"
-            style="height: 100%; max-height: 100; overflow-y: auto"
-          >
-            <FormBasicInfoAgencies
-              id="agencies-basic-info"
-              :readonly
-              onDrawer
-              class="q-mb-xl"
-              v-model:group="data.group"
-              v-model:name="data.name"
-              v-model:name-en="data.nameEN"
-              v-model:contact-name="data.contactName"
-              v-model:email="data.contactEmail"
-              v-model:contact-tel="data.contactTel"
-            />
-            <AddressForm
-              id="agencies-address-info"
-              dense
-              :readonly
-              :prefix-id="data.code ? data.code : ''"
-              v-model:address="data.address"
-              v-model:address-en="data.addressEN"
-              v-model:moo="data.moo"
-              v-model:moo-en="data.mooEN"
-              v-model:soi="data.soi"
-              v-model:soi-en="data.soiEN"
-              v-model:street="data.street"
-              v-model:street-en="data.streetEN"
-              v-model:province-id="data.provinceId"
-              v-model:district-id="data.districtId"
-              v-model:sub-district-id="data.subDistrictId"
-            />
-            <FormBank
-              id="agencies-bank-info"
-              title="agencies.bankInfo"
-              class="q-pt-xl"
-              dense
-              :readonly
-              v-model:bank-book-list="formBankBook"
-              @view-qr="
-                (i) => {
-                  currentIndexQrCodeBank = i;
-                  triggerEditQrCodeBank();
-                }
-              "
-              @edit-qr="
-                (i) => {
-                  currentIndexQrCodeBank = i;
-                  refQrCodeUpload && refQrCodeUpload.browse();
-                }
-              "
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  </DrawerInfo>
-
-  <ImageUploadDialog
-    v-model:dialog-state="imageState.imageDialog"
-    v-model:file="imageFile"
-    v-model:on-create-data-list="imageListOnCreate"
-    v-model:image-url="imageState.imageUrl"
-    v-model:data-list="imageList"
-    :changeDisabled="hideAction"
-    :on-create="model"
-    :hiddenFooter="!imageState.isImageEdit"
-    @add-image="addImage"
-    @remove-image="removeImage"
-    @submit="submitImage"
-  >
-    <template #title>
-      <span v-if="!model" class="justify-center flex text-bold">
-        {{ $t('general.image') }}
-        {{ $i18n.locale === 'eng' ? data.nameEN : data.name }}
-      </span>
-    </template>
-
-    <template #error>
-      <div class="full-height full-width" style="background: white">
-        <div
-          class="full-height full-width flex justify-center items-center"
-          style="
-            background: hsla(var(--green-8-hsl) / 0.1);
-            color: hsla(var(--green-8-hsl) / 1);
-          "
-        >
-          <Icon width="3rem" icon="ph-building-office" />
-        </div>
-      </div>
-    </template>
-  </ImageUploadDialog>
-
-  <QrCodeUploadDialog
-    ref="refQrCodeUpload"
-    v-model:dialog-state="qrCodeDialog"
-    v-model:file="statusQrCodeFile as File"
-    v-model:image-url="statusQrCodeUrl"
-    @save="
-      (_file) => {
-        qrCodeDialog = false;
-        if (currentIndexQrCodeBank !== -1) {
-          triggerEditQrCodeBank({ save: true });
-        }
-      }
-    "
-    @clear="statusDeletesQrCode = true"
-    clearButton
-  >
-    <template #error>
-      <div
-        class="full-width full-height flex items-center justify-center"
-        style="color: gray"
-      >
-        <q-icon size="15rem" name="mdi-qrcode" />
-      </div>
-    </template>
-  </QrCodeUploadDialog>
-</template>
-<style scoped></style>
diff --git a/src/pages/16_ิbusiness-type-management/BusinessTypeDialog.vue b/src/pages/16_ิbusiness-type-management/BusinessTypeDialog.vue
new file mode 100644
index 00000000..f0a6f0ff
--- /dev/null
+++ b/src/pages/16_ิbusiness-type-management/BusinessTypeDialog.vue
@@ -0,0 +1,84 @@
+<script setup lang="ts">
+import { BusinessTypePayLoad } from 'src/stores/business-type/types';
+
+import { useInstitution } from 'src/stores/institution';
+
+import DialogForm from 'src/components/DialogForm.vue';
+
+const model = defineModel<boolean>({ required: true, default: false });
+
+const props = withDefaults(
+  defineProps<{
+    readonly?: boolean;
+    isEdit?: boolean;
+    hideAction?: boolean;
+    hideDelete?: boolean;
+
+    dataId?: string;
+  }>(),
+  { readonly: false, isEdit: false, dataId: '' },
+);
+
+const emit = defineEmits<{
+  (e: 'submit'): void;
+  (e: 'close'): void;
+}>();
+
+const data = defineModel<BusinessTypePayLoad>('data', {
+  required: true,
+  default: {
+    name: '',
+    nameEN: '',
+  },
+});
+</script>
+<template>
+  <DialogForm
+    :title="
+      $t(`general.${data.id ? 'edit' : 'add'}`, {
+        text: $t('businessType.title'),
+      })
+    "
+    :height="'50'"
+    :maxWidth="'60'"
+    v-model:modal="model"
+    :submit="() => $emit('submit')"
+    :close="
+      () => {
+        $emit('close');
+      }
+    "
+  >
+    <div class="scroll q-pa-md q-gutter-sm">
+      <q-input
+        for="input-agencies-name"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col"
+        :label="$t('businessType.name')"
+        v-model="data.name"
+        :rules="[
+          (val) => !!val || $t('form.error.required'),
+          (val) =>
+            /^[A-Za-z0-9ก-๙\s&.,'-]+$/.test(val) ||
+            $t('form.error.branchNameField'),
+        ]"
+      />
+
+      <q-input
+        for="input-agencies-name"
+        dense
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col"
+        :label="$t('businessType.nameEn')"
+        v-model="data.nameEN"
+        :rules="[(val) => !!val || $t('form.error.required')]"
+      />
+    </div>
+  </DialogForm>
+</template>
+<style scoped></style>
diff --git a/src/pages/16_ิbusiness-type-management/MainPage.vue b/src/pages/16_ิbusiness-type-management/MainPage.vue
index 6b97e47f..486164c8 100644
--- a/src/pages/16_ิbusiness-type-management/MainPage.vue
+++ b/src/pages/16_ิbusiness-type-management/MainPage.vue
@@ -26,7 +26,7 @@ import StatCardComponent from 'src/components/StatCardComponent.vue';
 import FloatingActionButton from 'src/components/FloatingActionButton.vue';
 import CreateButton from 'src/components/AddButton.vue';
 import NoData from 'src/components/NoData.vue';
-import AgenciesDialog from './AgenciesDialog.vue';
+import BusinessTypeDialog from './BusinessTypeDialog.vue';
 import AdvanceSearch from 'src/components/shared/AdvanceSearch.vue';
 
 const { t } = useI18n();
@@ -34,14 +34,13 @@ const $q = useQuasar();
 
 const useBusinessType = useBusinessTypeStore();
 const navigatorStore = useNavigator();
-const institutionStore = useInstitution();
 
-const { data, page, pageMax, pageSize } = storeToRefs(institutionStore);
+const { data, page, pageMax, pageSize } = storeToRefs(useBusinessType);
 
-const fieldSelected = ref<('no' | 'name' | 'nameEn')[]>([
+const fieldSelected = ref<('no' | 'name' | 'nameEN')[]>([
   'no',
   'name',
-  'nameEn',
+  'nameEN',
 ]);
 const fieldSelectedOption = ref<{ label: string; value: string }[]>([
   {
@@ -53,9 +52,10 @@ const fieldSelectedOption = ref<{ label: string; value: string }[]>([
     label: 'general.name',
     value: 'name',
   },
+
   {
-    label: 'general.nameEn',
-    value: 'nameEn',
+    label: 'general.nameEN',
+    value: 'nameEN',
   },
 ]);
 const columns = [
@@ -65,6 +65,7 @@ const columns = [
     label: 'general.order',
     field: 'no',
   },
+  ,
   {
     name: 'name',
     align: 'left',
@@ -72,10 +73,10 @@ const columns = [
     field: 'name',
   },
   {
-    name: 'nameEn',
-    align: 'center',
-    label: 'general.nameEn',
-    field: 'nameEn',
+    name: 'nameEN',
+    align: 'left',
+    label: 'general.nameEN',
+    field: 'nameEN',
   },
 ] satisfies QTableProps['columns'];
 const pageState = reactive({
@@ -84,12 +85,11 @@ const pageState = reactive({
   gridView: false,
   total: 0,
 
-  addModal: false,
+  businessTypeDialog: false,
   viewDrawer: false,
   isDrawerEdit: true,
   searchDate: [],
 });
-const deletesStatusQrCodeBankImag = ref<number[]>([]);
 
 const blankFormData: BusinessTypePayLoad = {
   name: '',
@@ -97,71 +97,51 @@ const blankFormData: BusinessTypePayLoad = {
 };
 
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
-const refAgenciesDialog = ref();
 const formData = ref<BusinessTypePayLoad | undefined>(
   structuredClone(blankFormData),
 );
 const currBusinessType = ref<BusinessType>();
 
-const imageListOnCreate = ref<{
-  selectedImage: string;
-  list: { url: string; imgFile: File | null; name: string }[];
-}>({ selectedImage: '', list: [] });
-
-function triggerDialog(type: 'add' | 'edit' | 'view') {
+function triggerDialog(type: 'add' | 'edit') {
   if (type === 'add') {
     formData.value = structuredClone(blankFormData);
-    pageState.addModal = true;
-    pageState.isDrawerEdit = true;
-  }
-  if (type === 'view') {
-    pageState.viewDrawer = true;
-    pageState.isDrawerEdit = false;
+    pageState.businessTypeDialog = true;
   }
+
   if (type === 'edit') {
-    pageState.viewDrawer = true;
-    pageState.isDrawerEdit = true;
+    pageState.businessTypeDialog = true;
   }
 }
 
 function resetForm() {
-  pageState.isDrawerEdit = true;
-  pageState.addModal = false;
-  pageState.viewDrawer = false;
+  pageState.businessTypeDialog = false;
   currBusinessType.value = undefined;
   formData.value = structuredClone(blankFormData);
 }
 
-function undo() {
-  if (!currBusinessType.value) return;
-  assignFormData(currBusinessType.value);
-  pageState.isDrawerEdit = false;
-}
-
 function assignFormData(data: BusinessType) {
   currBusinessType.value = data;
   formData.value = { id: data.id, name: data.name, nameEN: data.nameEN };
 }
 
-async function submit(opt?: { selectedImage: string }) {
+async function submit() {
   const payload = {
     id: formData.value.id,
     name: formData.value.name,
     nameEN: formData.value.nameEN,
   };
-  if (pageState.isDrawerEdit && currBusinessType.value?.id) {
+  if (currBusinessType.value?.id) {
     const ret = await useBusinessType.editById(payload);
 
     if (ret) {
-      pageState.isDrawerEdit = false;
       await fetchData($q.screen.xs);
+      pageState.businessTypeDialog = false;
       return;
     }
   } else {
     await useBusinessType.create(payload);
-
     await fetchData($q.screen.xs);
-    pageState.addModal = false;
+    pageState.businessTypeDialog = false;
     return;
   }
 }
@@ -204,8 +184,8 @@ async function fetchData(mobileFetch?: boolean) {
 }
 
 onMounted(async () => {
-  navigatorStore.current.title = 'agencies.title';
-  navigatorStore.current.path = [{ text: 'agencies.caption', i18n: true }];
+  navigatorStore.current.title = 'businessType.title';
+  navigatorStore.current.path = [{ text: 'businessType.caption', i18n: true }];
   pageState.gridView = $q.screen.lt.md ? true : false;
 
   await fetchData();
@@ -265,7 +245,7 @@ watch(
               {
                 icon: 'ph-building-office',
                 count: pageState.total,
-                label: 'agencies.title',
+                label: 'businessType.title',
                 color: 'light-green',
               },
             ]"
@@ -498,10 +478,7 @@ watch(
                       : ''
                   "
                 >
-                  <q-td
-                    class="text-center"
-                    v-if="fieldSelected.includes('orderNumber')"
-                  >
+                  <q-td class="text-center" v-if="fieldSelected.includes('no')">
                     {{
                       $q.screen.xs
                         ? props.rowIndex + 1
@@ -555,67 +532,22 @@ watch(
                       </span>
                     </section>
                   </q-td>
-                  <q-td v-if="fieldSelected.includes('address')">
-                    {{
-                      formatAddress({
-                        address: props.row.address,
-                        addressEN: props.row.addressEN,
-                        moo: props.row.moo,
-                        mooEN: props.row.mooEN,
-                        soi: props.row.soi,
-                        soiEN: props.row.soiEN,
-                        street: props.row.street,
-                        streetEN: props.row.streetEN,
-                        province: props.row.province,
-                        district: props.row.district,
-                        subDistrict: props.row.subDistrict,
-                        en: $i18n.locale === 'eng',
-                      })
-                    }}
-                    <q-tooltip>
-                      {{
-                        formatAddress({
-                          address: props.row.address,
-                          addressEN: props.row.addressEN,
-                          moo: props.row.moo,
-                          mooEN: props.row.mooEN,
-                          soi: props.row.soi,
-                          soiEN: props.row.soiEN,
-                          street: props.row.street,
-                          streetEN: props.row.streetEN,
-                          province: props.row.province,
-                          district: props.row.district,
-                          subDistrict: props.row.subDistrict,
-                          en: $i18n.locale === 'eng',
-                        })
-                      }}
-                    </q-tooltip>
+
+                  <q-td v-if="fieldSelected.includes('nameEN')">
+                    <span class="col row items-center no-wrap">
+                      <div>
+                        {{ props.row.nameEN }}
+                      </div>
+                    </span>
                   </q-td>
+
                   <q-td>
-                    <q-btn
-                      icon="mdi-eye-outline"
-                      :id="`btn-eye-${props.row.name}`"
-                      size="sm"
-                      dense
-                      round
-                      flat
-                      @click.stop="
-                        () => {
-                          assignFormData(props.row);
-                          triggerDialog('view');
-                        }
-                      "
-                    />
                     <KebabAction
                       v-if="canAccess('agencies', 'edit')"
+                      hide-toggle
+                      hide-view
                       :id-name="props.row.name"
                       :status="props.row.status"
-                      @view="
-                        () => {
-                          assignFormData(props.row);
-                          triggerDialog('view');
-                        }
-                      "
                       @edit="
                         () => {
                           assignFormData(props.row);
@@ -623,7 +555,6 @@ watch(
                         }
                       "
                       @delete="() => triggerDelete(props.row.id)"
-                      @change-status="() => triggerChangeStatus(props.row)"
                     />
                   </q-td>
                 </q-tr>
@@ -665,41 +596,21 @@ watch(
                         ></q-badge>
                       </q-avatar>
                       <span class="text-weight-bold column q-pl-md">
-                        {{
-                          $i18n.locale === 'eng'
-                            ? props.row.nameEN
-                            : props.row.name
-                        }}
+                        {{ props.row.name }}
+
                         <span class="text-caption app-text-muted-2">
-                          {{ props.row.code }}
+                          {{ props.row.nameEN }}
                         </span>
                       </span>
                       <nav
                         class="row q-ml-auto items-center justify-end no-wrap"
                       >
-                        <q-btn
-                          icon="mdi-eye-outline"
-                          size="sm"
-                          dense
-                          round
-                          flat
-                          @click.stop="
-                            () => {
-                              assignFormData(props.row);
-                              triggerDialog('view');
-                            }
-                          "
-                        />
                         <KebabAction
                           v-if="canAccess('agencies', 'edit')"
+                          hide-toggle
+                          hide-view
                           :id-name="props.row.id"
                           :status="props.row.status"
-                          @view="
-                            () => {
-                              assignFormData(props.row);
-                              triggerDialog('view');
-                            }
-                          "
                           @edit="
                             () => {
                               assignFormData(props.row);
@@ -707,52 +618,9 @@ watch(
                             }
                           "
                           @delete="() => triggerDelete(props.row.id)"
-                          @change-status="() => triggerChangeStatus(props.row)"
                         />
                       </nav>
                     </header>
-                    <q-separator spaced="lg" />
-                    <div class="row full-width">
-                      <span class="col-2 app-text-muted">
-                        {{ $t('general.address') }}
-                      </span>
-                      <span class="col">
-                        {{
-                          formatAddress({
-                            address: props.row.address,
-                            addressEN: props.row.addressEN,
-                            moo: props.row.moo,
-                            mooEN: props.row.mooEN,
-                            soi: props.row.soi,
-                            soiEN: props.row.soiEN,
-                            street: props.row.street,
-                            streetEN: props.row.streetEN,
-                            province: props.row.province,
-                            district: props.row.district,
-                            subDistrict: props.row.subDistrict,
-                            en: $i18n.locale === 'eng',
-                          })
-                        }}
-                        <q-tooltip>
-                          {{
-                            formatAddress({
-                              address: props.row.address,
-                              addressEN: props.row.addressEN,
-                              moo: props.row.moo,
-                              mooEN: props.row.mooEN,
-                              soi: props.row.soi,
-                              soiEN: props.row.soiEN,
-                              street: props.row.street,
-                              streetEN: props.row.streetEN,
-                              province: props.row.province,
-                              district: props.row.district,
-                              subDistrict: props.row.subDistrict,
-                              en: $i18n.locale === 'eng',
-                            })
-                          }}
-                        </q-tooltip>
-                      </span>
-                    </div>
                   </div>
                 </section>
               </template>
@@ -812,33 +680,13 @@ watch(
     </section>
   </div>
 
-  <AgenciesDialog
-    ref="refAgenciesDialog"
+  <BusinessTypeDialog
+    ref="refBusinessTypeDialog"
     :data-id="currBusinessType && currBusinessType.id"
-    @drawer-delete="
-      () => {
-        if (currBusinessType) triggerDelete(currBusinessType.id);
-      }
-    "
-    @drawer-edit="pageState.isDrawerEdit = true"
-    @drawer-undo="undo"
     @close="resetForm"
     @submit="submit"
-    @submit-image="
-      async (v) => {
-        if (v) await submit({ selectedImage: v });
-      }
-    "
-    @change-status="triggerChangeStatus"
-    :readonly="!pageState.isDrawerEdit"
-    :isEdit="pageState.isDrawerEdit"
-    :hide-action="!canAccess('agencies', 'edit')"
-    v-model="pageState.addModal"
-    v-model:drawer-model="pageState.viewDrawer"
+    v-model="pageState.businessTypeDialog"
     v-model:data="formData"
-    v-model:form-bank-book="formData.bank"
-    v-model:image-list-on-create="imageListOnCreate"
-    v-model:deletes-status-qr-code-bank-imag="deletesStatusQrCodeBankImag"
   />
 </template>
 <style scoped>
diff --git a/src/stores/business-type/index.ts b/src/stores/business-type/index.ts
index a9ed029b..443852e0 100644
--- a/src/stores/business-type/index.ts
+++ b/src/stores/business-type/index.ts
@@ -7,7 +7,10 @@ import { BusinessType, BusinessTypePayLoad } from './types';
 import axios from 'axios';
 
 const useBusinessTypeStore = defineStore('business-type-store', () => {
-  const data = ref<Pagination<BusinessType[]>>();
+  const data = ref<BusinessType[]>([]);
+  const page = ref<number>(1);
+  const pageMax = ref<number>(1);
+  const pageSize = ref<number>(30);
 
   async function fetchList(opts?: {
     page?: number;
@@ -68,6 +71,9 @@ const useBusinessTypeStore = defineStore('business-type-store', () => {
 
   return {
     data,
+    page,
+    pageMax,
+    pageSize,
 
     fetchList,
     fetchById,