diff --git a/src/boot/i18n.ts b/src/boot/i18n.ts
index 888f2083..b2c5036c 100644
--- a/src/boot/i18n.ts
+++ b/src/boot/i18n.ts
@@ -4,8 +4,8 @@ import { createI18n } from 'vue-i18n';
 import messages from 'src/i18n';
 
 export type MessageLanguages = keyof typeof messages;
-// Type-define 'en-US' as the master schema for the resource
-export type MessageSchema = (typeof messages)['en-US'];
+// Type-define 'eng' as the master schema for the resource
+export type MessageSchema = (typeof messages)['eng'];
 
 // See https://vue-i18n.intlify.dev/guide/advanced/typescript.html#global-resource-schema-type-definition
 /* eslint-disable @typescript-eslint/no-empty-interface */
@@ -23,7 +23,7 @@ declare module 'vue-i18n' {
 
 export default boot(({ app }) => {
   const i18n = createI18n({
-    locale: 'th-th',
+    locale: 'tha',
     legacy: false,
     messages,
   });
diff --git a/src/components/01_branch-management/BranchCard.vue b/src/components/01_branch-management/BranchCard.vue
index b44c0a88..0351bad2 100644
--- a/src/components/01_branch-management/BranchCard.vue
+++ b/src/components/01_branch-management/BranchCard.vue
@@ -86,7 +86,7 @@ defineProps<{
       ]"
       class="branch-card__data"
     >
-      <div>{{ $t(key) }}</div>
+      <div>{{ $t(`branch.card.${key}`) }}</div>
       <div>{{ data[key as keyof typeof data] }}</div>
     </div>
   </div>
diff --git a/src/components/01_branch-management/FormBank.vue b/src/components/01_branch-management/FormBank.vue
index 21ec98ab..a88a4d67 100644
--- a/src/components/01_branch-management/FormBank.vue
+++ b/src/components/01_branch-management/FormBank.vue
@@ -110,10 +110,10 @@ watch(
         spaced="lg"
       />
       <span class="col-12 app-text-muted-2 flex justify-between items-center">
-        {{ `${$t('bankBookNo')} ${i + 1}` }}
+        {{ `${$t('branch.form.bankAccountNo')} ${i + 1}` }}
         <div class="row items-center">
           <div style="height: 30.8px" />
-          {{ $t('accountStatus') }}
+          {{ $t('branch.form.bankAccountStatus') }}
           <ToggleButton
             id="toggle-bank-status"
             :disable="readonly"
@@ -145,9 +145,10 @@ watch(
         input-debounce="0"
         option-label="label"
         lazy-rules="ondemand"
-        class="col-3"
+        class="col-12 col-md-4"
+        autocomplete="off"
         :dense="dense"
-        :label="$t('bankBook')"
+        :label="$t('branch.form.bank')"
         :options="bankBookOptions"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
@@ -195,7 +196,7 @@ watch(
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -203,51 +204,17 @@ watch(
       <q-input
         outlined
         for="input-bankbook"
-        class="col-3"
+        class="col-4"
         lazy-rules="ondemand"
         hide-bottom-space
         :dense="dense"
         :readonly="readonly"
-        :label="$t('accountNumber')"
-        :maxlength="13"
-        :rules="[
-          (val: string) =>
-            (val.length >= 7 && val.length <= 13) ||
-            $t('form.error.please', { msg: $t('accountNumber') }),
-        ]"
-        :model-value="readonly ? book.accountNumber || '-' : book.accountNumber"
-        @update:model-value="
-          (v) => (typeof v === 'string' ? (book.accountNumber = v) : '')
-        "
-      />
-      <q-input
-        outlined
-        for="input-bankbook"
-        class="col-3"
-        lazy-rules="ondemand"
-        hide-bottom-space
-        :dense="dense"
-        :readonly="readonly"
-        :label="$t('bankBranch')"
+        :label="$t('branch.form.bankBranch')"
         :model-value="readonly ? book.bankBranch || '-' : book.bankBranch"
         @update:model-value="
           (v) => (typeof v === 'string' ? (book.bankBranch = v) : '')
         "
       />
-      <q-input
-        outlined
-        for="input-bankbook"
-        class="col-3"
-        lazy-rules="ondemand"
-        hide-bottom-space
-        :dense="dense"
-        :readonly="readonly"
-        :label="$t('accountName')"
-        :model-value="readonly ? book.accountName || '-' : book.accountName"
-        @update:model-value="
-          (v) => (typeof v === 'string' ? (book.accountName = v) : '')
-        "
-      />
       <q-select
         outlined
         clearable
@@ -261,9 +228,10 @@ watch(
         input-debounce="0"
         option-label="label"
         lazy-rules="ondemand"
-        class="col-4"
+        class="col-12 col-md-4"
+        autocomplete="off"
         :dense="dense"
-        :label="$t('bankType')"
+        :label="$t('branch.form.bankAccountType')"
         :options="accountTypeOptions"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
@@ -278,11 +246,46 @@ watch(
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
       </q-select>
+      <q-input
+        outlined
+        for="input-bankbook"
+        class="col-12 col-md-4"
+        lazy-rules="ondemand"
+        hide-bottom-space
+        :dense="dense"
+        :readonly="readonly"
+        :label="$t('branch.form.bankAccountNumber')"
+        :maxlength="13"
+        :rules="[
+          (val: string) =>
+            (val.length >= 7 && val.length <= 13) ||
+            $t('form.error.please', { msg: $t('accountNumber') }),
+        ]"
+        :model-value="readonly ? book.accountNumber || '-' : book.accountNumber"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (book.accountNumber = v) : '')
+        "
+      />
+
+      <q-input
+        outlined
+        for="input-bankbook"
+        class="col-12 col-md-4"
+        lazy-rules="ondemand"
+        hide-bottom-space
+        :dense="dense"
+        :readonly="readonly"
+        :label="$t('branch.form.bankAccountName')"
+        :model-value="readonly ? book.accountName || '-' : book.accountName"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (book.accountName = v) : '')
+        "
+      />
     </div>
   </div>
 </template>
diff --git a/src/components/01_branch-management/FormBranchAdmin.vue b/src/components/01_branch-management/FormBranchAdmin.vue
index 940a13ae..6d1b7cc7 100644
--- a/src/components/01_branch-management/FormBranchAdmin.vue
+++ b/src/components/01_branch-management/FormBranchAdmin.vue
@@ -18,12 +18,12 @@ defineProps<{
         name="mdi-account-outline"
         style="background-color: var(--surface-3)"
       />
-      {{ $t(`branchAdminTitle`) }}
+      {{ $t(`branch.form.group.admin`) }}
     </div>
 
     <div class="col-12">
       <template v-if="!admin">
-        <span>{{ $t('branchAdminNone') }}</span>
+        <span>{{ $t('general.noData') }}</span>
       </template>
       <template v-else>
         <div class="row items-center">
@@ -47,9 +47,9 @@ defineProps<{
           <div class="col column q-pl-md">
             <span>
               {{
-                $i18n.locale === 'en-US'
-                  ? admin.firstNameEN + ' ' + admin.lastNameEN
-                  : admin.firstName + ' ' + admin.lastName
+                $i18n.locale === 'eng'
+                  ? admin.firstNameEN || '-' + ' ' + admin.lastNameEN
+                  : admin.firstName || '-' + ' ' + admin.lastName
               }}
             </span>
           </div>
diff --git a/src/components/01_branch-management/FormBranchContact.vue b/src/components/01_branch-management/FormBranchContact.vue
index abae5ed1..dcd72b9e 100644
--- a/src/components/01_branch-management/FormBranchContact.vue
+++ b/src/components/01_branch-management/FormBranchContact.vue
@@ -36,12 +36,8 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-3"
-        :label="
-          typeBranch === 'headOffice'
-            ? $t('formDialogInputEmailHq')
-            : $t('formDialogInputEmailSubBranch')
-        "
+        class="col-12 col-md-4"
+        :label="$t('form.email')"
         for="input-email"
         :model-value="readonly ? email || '-' : email"
         @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
@@ -62,12 +58,8 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-3"
-        :label="
-          typeBranch === 'headOffice'
-            ? $t('formDialogInputTelephoneHq')
-            : $t('formDialogInputTelephoneSubBranch')
-        "
+        class="col-12 col-md-4"
+        :label="$t('form.telephone')"
         for="input-telephone-no"
         :model-value="readonly ? telephoneNo || '-' : telephoneNo"
         @update:model-value="
@@ -90,53 +82,51 @@ defineProps<{
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-3"
+        class="col-12 col-md-4"
         label="Line ID"
         for="input-line-id"
         :model-value="readonly ? lineId || '-' : lineId"
         @update:model-value="(v) => (typeof v === 'string' ? (lineId = v) : '')"
       />
 
-      <div class="col-12 row q-col-gutter-sm">
-        <q-input
-          lazy-rules="ondemand"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-3"
-          :label="$t('formDialogInputContactName')"
-          for="input-contact-name"
-          :model-value="readonly ? contactName || '-' : contactName"
-          @update:model-value="
-            (v) => (typeof v === 'string' ? (contactName = v) : '')
-          "
-        />
+      <q-input
+        lazy-rules="ondemand"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-4"
+        :label="$t('branch.form.contactName')"
+        for="input-contact-name"
+        :model-value="readonly ? contactName || '-' : contactName"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (contactName = v) : '')
+        "
+      />
 
-        <q-input
-          lazy-rules="ondemand"
-          :dense="dense"
-          outlined
-          :readonly="readonly"
-          hide-bottom-space
-          class="col-3"
-          :label="$t('formDialogInputTelephoneContact')"
-          for="input-contact"
-          :model-value="readonly ? contact || '-' : contact"
-          @update:model-value="
-            (v) => (typeof v === 'string' ? (contact = v) : '')
-          "
-        >
-          <template #prepend>
-            <q-icon
-              color="primary"
-              name="mdi-phone-outline"
-              size="xs"
-              class="q-mr-xs"
-            />
-          </template>
-        </q-input>
-      </div>
+      <q-input
+        lazy-rules="ondemand"
+        :dense="dense"
+        outlined
+        :readonly="readonly"
+        hide-bottom-space
+        class="col-12 col-md-4"
+        :label="$t('branch.form.contactTelephone')"
+        for="input-contact"
+        :model-value="readonly ? contact || '-' : contact"
+        @update:model-value="
+          (v) => (typeof v === 'string' ? (contact = v) : '')
+        "
+      >
+        <template #prepend>
+          <q-icon
+            color="primary"
+            name="mdi-phone-outline"
+            size="xs"
+            class="q-mr-xs"
+          />
+        </template>
+      </q-input>
     </div>
   </div>
 </template>
diff --git a/src/components/01_branch-management/FormBranchInformation.vue b/src/components/01_branch-management/FormBranchInformation.vue
index 33003dce..0a2fd7e5 100644
--- a/src/components/01_branch-management/FormBranchInformation.vue
+++ b/src/components/01_branch-management/FormBranchInformation.vue
@@ -1,6 +1,4 @@
 <script setup lang="ts">
-import { onMounted } from 'vue';
-
 const code = defineModel<string>('code');
 const codeSubBranch = defineModel<string>('codeSubBranch');
 const taxNo = defineModel<string>('taxNo');
@@ -40,13 +38,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
     </div>
 
     <div class="col-12 row q-col-gutter-sm">
-      <div
-        class="col-6 row q-col-gutter-sm"
-        :class="{
-          'col-8': typeBranch !== 'headOffice',
-          'col-6': typeBranch === 'headOffice',
-        }"
-      >
+      <div class="col-12 row q-col-gutter-sm">
         <q-input
           lazy-rules="ondemand"
           :dense="dense"
@@ -55,13 +47,13 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           :readonly="readonly"
           hide-bottom-space
           class="col"
-          :label="$t('formDialogHqAbbreviation')"
+          :label="$t('branch.form.abbrev')"
           for="input-abbreviation"
           :model-value="view ? formatCode(abbreviation, 'code') : abbreviation"
           :rules="[
             (val) =>
-              (val && val.length > 0 && /[a-zA-Z]+/.test(val)) ||
-              $t('formDialogInputHqAbbreviation'),
+              (val && val.length > 0 && /^[a-zA-Z]+$/.test(val)) ||
+              $t('form.error.invalid'),
           ]"
           @update:model-value="(v) => (abbreviation = v as string)"
         />
@@ -73,7 +65,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           :disable="!readonly"
           hide-bottom-space
           class="col"
-          :label="$t('formDialogInputCode')"
+          :label="$t('branch.form.code')"
           for="input-code"
           :model-value="view ? formatCode(code, 'number') : code"
           @update:model-value="(v) => (code = v as string)"
@@ -87,7 +79,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           :readonly="readonly"
           hide-bottom-space
           class="col"
-          :label="$t('branchLabelCode')"
+          :label="$t('branch.form.codeBranch')"
           for="input-code-sub-branch"
           :model-value="
             view ? formatCode(codeSubBranch, 'number') : codeSubBranch
@@ -102,12 +94,13 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           :readonly="readonly"
           hide-bottom-space
           class="col-5"
-          :label="$t('formDialogInputTaxNo')"
+          :label="$t('branch.form.taxNo')"
           v-model="taxNo"
           :rules="[
+            (val) => (val && val.length > 0) || $t('form.error.required'),
             (val) =>
               (val && val.length === 13 && /[0-9]+/.test(val)) ||
-              $t('formDialogInputTaxNoValidate'),
+              $t('form.error.invalid'),
           ]"
           for="input-tax-no"
         />
@@ -123,16 +116,12 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           class="col-6"
           :label="
             typeBranch === 'headOffice'
-              ? $t('formDialogInputNameHq')
-              : $t('formDialogInputNameSubBranch')
+              ? $t('branch.form.headofficeName')
+              : $t('branch.form.branchName')
           "
           v-model="name"
           :rules="[(val) => val && val.length > 0]"
-          :error-message="
-            typeBranch === 'headOffice'
-              ? $t('formDialogInputNameHqValidate')
-              : $t('formDialogInputNameSubBranchValidate')
-          "
+          :error-message="$t('form.error.required')"
           for="input-name"
         />
         <q-input
@@ -145,15 +134,11 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
           v-model="nameEN"
           :label="
             typeBranch === 'headOffice'
-              ? $t('formDialogInputNameHqEn')
-              : $t('formDialogInputNameSubBranchEn')
+              ? $t('branch.form.headofficeNameEN')
+              : $t('branch.form.branchNameEN')
           "
           :rules="[(val) => val && val.length > 0]"
-          :error-message="
-            typeBranch === 'headOffice'
-              ? $t('formDialogInputNameHqEnValidate')
-              : $t('formDialogInputNameSubBranchEnValidate')
-          "
+          :error-message="$t('form.error.required')"
           for="input-name-en"
         />
       </div>
diff --git a/src/components/01_branch-management/FormLocation.vue b/src/components/01_branch-management/FormLocation.vue
index 3f38ead1..f4fb7368 100644
--- a/src/components/01_branch-management/FormLocation.vue
+++ b/src/components/01_branch-management/FormLocation.vue
@@ -64,7 +64,7 @@ defineProps<{
           "
           unelevated
           rounded
-          :label="$t('formDialogBtnLocation')"
+          :label="$t('branch.form.shareLocation')"
           @click="getLocation()"
           id="btn-get-location"
         />
diff --git a/src/components/01_branch-management/FormQr.vue b/src/components/01_branch-management/FormQr.vue
index ad7e604a..552f0a7e 100644
--- a/src/components/01_branch-management/FormQr.vue
+++ b/src/components/01_branch-management/FormQr.vue
@@ -73,7 +73,7 @@ defineEmits<{
           "
           unelevated
           rounded
-          :label="$t('formDialogUploadQrCode')"
+          :label="$t('general.upload')"
           @click="$emit('upload')"
           id="btn-upload-qr-code"
         />
diff --git a/src/components/02_personnel-management/FormByType.vue b/src/components/02_personnel-management/FormByType.vue
index d4211096..b207369b 100644
--- a/src/components/02_personnel-management/FormByType.vue
+++ b/src/components/02_personnel-management/FormByType.vue
@@ -137,7 +137,7 @@ watch(
         name="mdi-briefcase-outline"
         style="background-color: var(--surface-3)"
       />
-      {{ $t('formDialogTitleByType') }}
+      {{ $t('personnel.form.workInformation') }}
     </div>
     <div class="col-12 row q-col-gutter-sm">
       <div
@@ -151,7 +151,7 @@ watch(
           :dense="dense"
           outlined
           :readonly="readonly"
-          :label="$t('formDialogInputRegisNo')"
+          :label="$t('personnel.form.regisNo')"
           class="col-12"
           :model-value="readonly ? registrationNo || '-' : registrationNo"
           @update:model-value="
@@ -163,7 +163,7 @@ watch(
           class="col-6"
           id="input-start-date"
           :readonly="readonly"
-          :label="$t('formDialogInputStartDate')"
+          :label="$t('personnel.form.startDate')"
           v-model="startDate"
           clearable
         />
@@ -172,7 +172,7 @@ watch(
           class="col-6"
           id="input-retire-date"
           :readonly="readonly"
-          :label="$t('formDialogInputRetireDate')"
+          :label="$t('personnel.form.retireDate')"
           v-model="retireDate"
           clearable
         />
@@ -196,7 +196,7 @@ watch(
           :dense="dense"
           :readonly="readonly"
           :hide-dropdown-icon="readonly"
-          :label="$t('formDialogInputResponsibleArea')"
+          :label="$t('personnel.form.responsibleArea')"
           :options="responsibleAreaOptions"
           @filter="responsibleAreaFilter"
           :model-value="readonly ? responsibleArea || '-' : responsibleArea"
@@ -208,7 +208,7 @@ watch(
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey">
-                {{ $t('noResults') }}
+                {{ $t('general.noData') }}
               </q-item-section>
             </q-item>
           </template>
@@ -225,7 +225,7 @@ watch(
           :dense="dense"
           outlined
           :readonly="readonly"
-          :label="$t('formDialogInputDiscount')"
+          :label="$t('personnel.form.discount')"
           class="col-12"
           type="textarea"
           :model-value="readonly ? discountCondition || '-' : discountCondition"
@@ -258,7 +258,7 @@ watch(
           :dense="dense"
           :readonly="readonly"
           :hide-dropdown-icon="readonly"
-          :label="$t('formDialogInputSourceNationality')"
+          :label="$t('personnel.form.sourceNationality')"
           :options="nationalityOptions"
           @filter="nationalityFilter"
           :model-value="readonly ? sourceNationality || '-' : sourceNationality"
@@ -270,7 +270,7 @@ watch(
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey">
-                {{ $t('noResults') }}
+                {{ $t('general.noData') }}
               </q-item-section>
             </q-item>
           </template>
@@ -293,7 +293,7 @@ watch(
           :dense="dense"
           :readonly="readonly"
           :hide-dropdown-icon="readonly"
-          :label="$t('formDialogInputImportNationality')"
+          :label="$t('personnel.form.importNationality')"
           :options="nationalityOptions"
           @filter="nationalityFilter"
           :model-value="readonly ? importNationality || '-' : importNationality"
@@ -305,7 +305,7 @@ watch(
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey">
-                {{ $t('noResults') }}
+                {{ $t('general.noData') }}
               </q-item-section>
             </q-item>
           </template>
@@ -328,7 +328,7 @@ watch(
           :dense="dense"
           :readonly="readonly"
           :hide-dropdown-icon="readonly"
-          :label="$t('formDialogInputTrainingPlace')"
+          :label="$t('personnel.form.trainingPlace')"
           :options="trainingPlaceOptions"
           @filter="trainingPlaceFilter"
           :model-value="readonly ? trainingPlace || '-' : trainingPlace"
@@ -340,7 +340,7 @@ watch(
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey">
-                {{ $t('noResults') }}
+                {{ $t('general.noData') }}
               </q-item-section>
             </q-item>
           </template>
@@ -351,7 +351,7 @@ watch(
           :dense="dense"
           outlined
           :readonly="readonly"
-          :label="$t('formDialogInputCheckpoint')"
+          :label="$t('personnel.form.checkpoint')"
           class="col-6"
           :model-value="readonly ? checkpoint || '-' : checkpoint"
           @update:model-value="
@@ -365,7 +365,7 @@ watch(
           :dense="dense"
           outlined
           :readonly="readonly"
-          :label="$t('formDialogInputCheckpoint') + ' ENG'"
+          :label="$t('personnel.form.checkpointEN')"
           class="col-6"
           :model-value="readonly ? checkpointEN || '-' : checkpointEN"
           @update:model-value="
@@ -381,7 +381,7 @@ watch(
           :readonly="readonly"
           multiple
           append
-          :label="$t('formDialogAttachment')"
+          :label="$t('personnel.form.attachment')"
           class="col-12"
           v-model="agencyFile"
         >
diff --git a/src/components/02_personnel-management/FormInformation.vue b/src/components/02_personnel-management/FormInformation.vue
index 6e063be4..a3d566d6 100644
--- a/src/components/02_personnel-management/FormInformation.vue
+++ b/src/components/02_personnel-management/FormInformation.vue
@@ -51,7 +51,7 @@ const userTypeOptions = ref<Record<string, unknown>[]>([]);
 const userTypeFilter = selectFilterOptionRefMod(
   ref(
     userStore.userOption.userTypeOpts.map((v) => ({
-      label: t(v.label),
+      label: t(`personnel.${v.label}`),
       value: v.value,
     })),
   ),
@@ -101,20 +101,24 @@ onMounted(async () => {
         option-label="label"
         option-value="value"
         lazy-rules="ondemand"
-        class="col-2"
+        class="col-md-2 col-12"
         :dense="dense"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
-        :label="$t('formDialogInputCode')"
+        :label="$t('branch.form.code')"
         :options="hqOptions"
-        :rules="[(val: string) => !!val || $t('formDialogInputHqIdValidate')]"
+        :rules="[
+          (val: string) =>
+            !!val ||
+            $t('form.error.selectField', { field: $t('branch.form.code') }),
+        ]"
         @update:model-value="(val: string) => selectHq(val)"
         @filter="hqFilter"
       >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -133,11 +137,11 @@ onMounted(async () => {
         option-label="label"
         option-value="value"
         lazy-rules="ondemand"
-        class="col-2"
+        class="col-md-2 col-12"
         :dense="dense"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
-        :label="$t('formDialogInputBrId')"
+        :label="$t('branch.form.codeBranch')"
         :options="brOptions"
         @filter="brFilter"
         :model-value="readonly ? brId || '-' : brId"
@@ -147,7 +151,7 @@ onMounted(async () => {
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -162,13 +166,10 @@ onMounted(async () => {
         map-options
         options-dense
         hide-bottom-space
-        class="col"
-        :label="$t('formDialogInputUsername')"
+        class="col-md col-12"
+        :label="$t('personnel.form.username')"
         v-model="username"
-        :rules="[
-          (val: string) =>
-            val.length > 2 || $t('formDialogInputUsernameValidate'),
-        ]"
+        :rules="[(val: string) => val.length > 2 || $t('form.error.required')]"
       />
       <q-select
         outlined
@@ -189,17 +190,21 @@ onMounted(async () => {
         :dense="dense"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
-        :label="$t('formDialogInputUserType')"
+        :label="$t('personnel.form.userType')"
         :options="userTypeOptions"
         :rules="[
-          (val: string) => !!val || $t('formDialogInputUserTypeValidate'),
+          (val: string) =>
+            !!val ||
+            $t('form.error.selectField', {
+              field: $t('personnel.form.userType'),
+            }),
         ]"
         @filter="userTypeFilter"
       >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -223,17 +228,21 @@ onMounted(async () => {
         v-model="userRole"
         :readonly="readonly"
         :hide-dropdown-icon="readonly"
-        :label="$t('userRole')"
+        :label="$t('personnel.form.userRole')"
         :options="roleOptions"
         :rules="[
-          (val: string) => !!val || $t('formDialogInputUserRoleValidate'),
+          (val: string) =>
+            !!val ||
+            $t('form.error.selectField', {
+              field: $t('personnel.form.userRole'),
+            }),
         ]"
         @filter="roleFilter"
       >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
diff --git a/src/components/02_personnel-management/FormPerson.vue b/src/components/02_personnel-management/FormPerson.vue
index 537c1eb2..4d2d020c 100644
--- a/src/components/02_personnel-management/FormPerson.vue
+++ b/src/components/02_personnel-management/FormPerson.vue
@@ -2,21 +2,13 @@
 import { QSelect } from 'quasar';
 import useOptionStore from 'stores/options';
 import { selectFilterOptionRefMod } from 'stores/utils';
-import {
-  dateFormat,
-  calculateAge,
-  parseAndFormatDate,
-  disabledAfterToday,
-} from 'src/utils/datetime';
+import { calculateAge, disabledAfterToday } from 'src/utils/datetime';
 import { ref, onMounted, watch } from 'vue';
-import { useI18n } from 'vue-i18n';
 import { capitalize } from 'vue';
 import DatePicker from '../shared/DatePicker.vue';
 
-const { locale } = useI18n();
 const optionStore = useOptionStore();
 const prefixName = defineModel<string | null>('prefixName');
-const prefixNameEN = defineModel<string | null>('prefixNameEn');
 const firstName = defineModel<string>('firstName');
 const lastName = defineModel<string>('lastName');
 const firstNameEN = defineModel<string>('firstNameEn');
@@ -125,12 +117,12 @@ watch(
           option-value="value"
           lazy-rules="ondemand"
           hide-dropdown-icon
-          class="col-1"
+          class="col-md-1 col-6"
           :dense="dense"
           :readonly="readonly"
           :options="prefixNameOptions"
           :for="`${prefixId}-select-prefix-name`"
-          :label="$t('formDialogInputPrefixName')"
+          :label="$t('personnel.form.prefixName')"
           @filter="prefixNameFilter"
           :model-value="readonly ? prefixName || '-' : prefixName"
           @update:model-value="
@@ -141,7 +133,7 @@ watch(
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey">
-                {{ $t('noResults') }}
+                {{ $t('general.noData') }}
               </q-item-section>
             </q-item>
           </template>
@@ -155,11 +147,9 @@ watch(
           :readonly="readonly"
           hide-bottom-space
           class="col"
-          :label="$t('formDialogInputFirstName')"
+          :label="$t('personnel.form.firstName')"
           v-model="firstName"
-          :rules="[
-            (val: string) => !!val || $t('formDialogInputFirstNameValidate'),
-          ]"
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
         />
 
         <q-input
@@ -169,8 +159,8 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-3"
-          :label="$t('formDialogInputMidName')"
+          class="col-md-3 col-6"
+          :label="$t('personnel.form.middleName')"
           :model-value="readonly ? midName || '-' : midName"
           @update:model-value="
             (v) => (typeof v === 'string' ? (midName = v) : '')
@@ -186,11 +176,9 @@ watch(
           :readonly="readonly"
           hide-bottom-space
           class="col"
-          :label="$t('formDialogInputLastName')"
+          :label="$t('personnel.form.lastName')"
           v-model="lastName"
-          :rules="[
-            (val: string) => !!val || $t('formDialogInputLastNameValidate'),
-          ]"
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
         />
       </div>
 
@@ -203,8 +191,8 @@ watch(
           hide-bottom-space
           :readonly="readonly"
           :disable="!readonly"
-          class="col-1"
-          :label="$t('formDialogInputPrefixName')"
+          class="col-md-1 col-6"
+          :label="$t('personnel.form.prefixName')"
           :model-value="
             readonly
               ? capitalize(prefixName || '') || '-'
@@ -224,11 +212,9 @@ watch(
           :readonly="readonly"
           hide-bottom-space
           class="col"
-          :label="$t('formDialogInputFirstNameEN')"
+          :label="$t('personnel.form.firstNameEN')"
           v-model="firstNameEN"
-          :rules="[
-            (val: string) => !!val || $t('formDialogInputFirstNameENValidate'),
-          ]"
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
         />
 
         <q-input
@@ -238,8 +224,8 @@ watch(
           outlined
           :readonly="readonly"
           hide-bottom-space
-          class="col-3"
-          :label="$t('formDialogInputMidNameEN')"
+          class="col-md-3 col-6"
+          :label="$t('personnel.form.middleNameEN')"
           :model-value="readonly ? midNameEn || '-' : midNameEn"
           @update:model-value="
             (v) => (typeof v === 'string' ? (midNameEn = v) : '')
@@ -254,11 +240,9 @@ watch(
           :readonly="readonly"
           hide-bottom-space
           class="col"
-          :label="$t('formDialogInputLastNameEN')"
+          :label="$t('personnel.form.lastNameEN')"
           v-model="lastNameEN"
-          :rules="[
-            (val: string) => !!val || $t('formDialogInputLastNameENValidate'),
-          ]"
+          :rules="[(val: string) => !!val || $t('form.error.required')]"
         />
       </div>
 
@@ -269,8 +253,8 @@ watch(
         :dense="dense"
         outlined
         :readonly="readonly"
-        class="col-3"
-        :label="$t('formDialogInputTelephone')"
+        class="col-md-3 col-6"
+        :label="$t('form.telephone')"
         :mask="readonly ? '' : '##########'"
         :model-value="readonly ? telephoneNo || '-' : telephoneNo"
         @update:model-value="
@@ -285,8 +269,8 @@ watch(
         :dense="dense"
         outlined
         :readonly="readonly"
-        :label="$t('formDialogInputEmail')"
-        class="col-3"
+        :label="$t('form.email')"
+        class="col-md-3 col-6"
         :model-value="readonly ? email || '-' : email"
         @update:model-value="(v) => (typeof v === 'string' ? (email = v) : '')"
         @clear="email = ''"
@@ -305,13 +289,13 @@ watch(
         option-label="label"
         option-value="value"
         lazy-rules="ondemand"
-        class="col-2"
+        class="col-md-2 col-6"
         :dense="dense"
         :readonly="readonly"
         :options="genderOptions"
         :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-gender`"
-        :label="$t('formDialogInputGender')"
+        :label="$t('form.gender')"
         @filter="genderFilter"
         :model-value="readonly ? gender || '-' : gender"
         @update:model-value="(v) => (typeof v === 'string' ? (gender = v) : '')"
@@ -320,7 +304,7 @@ watch(
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -328,14 +312,15 @@ watch(
 
       <DatePicker
         v-model="birthDate"
-        class="col-2"
+        class="col-md-2 col-6"
         :id="`${prefixId}-input-birth-date`"
         :readonly="readonly"
-        :label="$t('formDialogInputBirthDate')"
+        :label="$t('form.birthDate')"
         :disabled-dates="disabledAfterToday"
         :rules="[
           (val: string) =>
-            !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
+            !!val ||
+            $t('form.error.selectField', { field: $t('form.birthDate') }),
         ]"
       />
 
@@ -346,8 +331,8 @@ watch(
         :dense="dense"
         outlined
         readonly
-        :label="$t('formDialogInputAge')"
-        class="col-2"
+        :label="$t('personnel.age')"
+        class="col-md-2 col-12"
         :model-value="
           birthDate?.toString() === 'Invalid Date' ||
           birthDate?.toString() === undefined
@@ -377,17 +362,14 @@ watch(
         :options="genderOptions"
         :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-gender`"
-        :label="$t('formDialogInputGender')"
-        :rules="[
-          (val: string) =>
-            !!val || $t('selectValidate') + $t('formDialogInputGender'),
-        ]"
+        :label="$t('form.gender')"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
         @filter="genderFilter"
       >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -413,17 +395,14 @@ watch(
         :options="nationalityOptions"
         :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-nationality`"
-        :label="$t('formDialogInputNationality')"
-        :rules="[
-          (val: string) =>
-            !!val || $t('selectValidate') + $t('formDialogInputNationality'),
-        ]"
+        :label="$t('general.nationality')"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
         @filter="nationalityFilter"
       >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
diff --git a/src/components/03_customer-management/FormEmployeeHealthCheck.vue b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
index 08c2f222..f847ba3f 100644
--- a/src/components/03_customer-management/FormEmployeeHealthCheck.vue
+++ b/src/components/03_customer-management/FormEmployeeHealthCheck.vue
@@ -158,7 +158,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         name="mdi-hospital-box-outline"
         style="background-color: var(--surface-3)"
       />
-      {{ $t(`formDialogTitleHealthCheck`) }}
+      {{ $t(`customerEmployee.formHealthCheck.title`) }}
       <AddButton
         v-if="!readonly"
         id="btn-add-bank"
@@ -184,7 +184,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         spaced="lg"
       />
       <span class="col-12 flex justify-between items-center">
-        {{ $t('customer.form.instance', { index: index + 1 }) }}
+        {{ $t('general.times', { number: index + 1 }) }}
         <div class="row items-center">
           <UndoButton
             v-if="!readonly && !!checkup.id && !checkup.statusSave"
@@ -228,7 +228,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         :readonly="readonly || checkup.statusSave"
         hide-bottom-space
         class="col-5"
-        :label="$t('formDialogInputCheckupRes')"
+        :label="$t('customerEmployee.formHealthCheck.result')"
         v-model="checkup.checkupResult"
       />
       <q-select
@@ -251,13 +251,13 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         :options="checkupTypeOptions"
         :hide-dropdown-icon="readonly || checkup.statusSave"
         :for="`${prefixId}-select-checkup-type`"
-        :label="$t('formDialogInputCheckupType')"
+        :label="$t('customerEmployee.formHealthCheck.checkupType')"
         @filter="checkupTypeFilter"
       >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -279,7 +279,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         v-model="checkup.provinceId"
         :dense="dense"
         :readonly="readonly || checkup.statusSave"
-        :label="$t('province')"
+        :label="$t('form.province')"
         :hide-dropdown-icon="readonly || checkup.statusSave"
         :for="`${prefixId}-select-province`"
         :options="provinceOptions"
@@ -288,7 +288,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -301,7 +301,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         :readonly="readonly || checkup.statusSave"
         hide-bottom-space
         class="col-5"
-        :label="$t('formDialogInputHospital')"
+        :label="$t('customerEmployee.formHealthCheck.hospital')"
         v-model="checkup.hospitalName"
         :for="`${prefixId}-input-hospital`"
       />
@@ -325,20 +325,20 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         :hide-dropdown-icon="readonly || checkup.statusSave"
         :options="medicalBenefitOptions"
         :for="`${prefixId}-select-province`"
-        :label="$t('formDialogInputMedicalBenefit')"
+        :label="$t('customerEmployee.formHealthCheck.medicalBenefit')"
         @filter="medicalBenefitFilter"
       >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
       </q-select>
       <q-input
         lazy-rules="ondemand"
-        :label="$t('formDialogInputRemark')"
+        :label="$t('general.remark')"
         :dense="dense"
         outlined
         :readonly="readonly || checkup.statusSave"
@@ -349,7 +349,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         :for="`${prefixId}-input-remark`"
       />
       <DatePicker
-        :label="$t('formDialogInputCoverageStartDate')"
+        :label="$t('customerEmployee.formHealthCheck.coverageStartDate')"
         v-model="checkup.coverageStartDate"
         class="col"
         :id="`${prefixId}-input-coverage-start-date`"
@@ -357,7 +357,7 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         clearable
       />
       <DatePicker
-        :label="$t('formDialogInputCoverageExpiretDate')"
+        :label="$t('customerEmployee.formHealthCheck.coverageExpireDate')"
         v-model="checkup.coverageExpireDate"
         class="col"
         :id="`${prefixId}-input-coverage-expire-date`"
@@ -385,13 +385,13 @@ const insuranceCompanyFilter = selectFilterOptionRefMod(
         :hide-dropdown-icon="readonly || checkup.statusSave"
         :options="insuranceCompanyOptions"
         :for="`${prefixId}-select-province`"
-        :label="$t('formDialogInputInsuranceCompany')"
+        :label="$t('customerEmployee.formHealthCheck.insuranceCompany')"
         @filter="insuranceCompanyFilter"
       >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
diff --git a/src/components/03_customer-management/FormEmployeeOther.vue b/src/components/03_customer-management/FormEmployeeOther.vue
index 14fb9aed..d4302b93 100644
--- a/src/components/03_customer-management/FormEmployeeOther.vue
+++ b/src/components/03_customer-management/FormEmployeeOther.vue
@@ -30,8 +30,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
         name="mdi-human-male-female-child"
         style="background-color: var(--surface-3)"
       />
-      {{ $t('formDialogTitleFamilyHistory') }}
-
+      {{ $t('customerEmployee.form.group.family') }}
       <div class="row q-ml-auto">
         <UndoButton
           v-if="!readonly && !!employeeOther.id && !employeeOther.statusSave"
@@ -73,14 +72,14 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           outlined
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
-          :label="$t('formDialogInputCitizenId')"
+          :label="$t('customerEmployee.formFamily.citizenId')"
           class="col"
           v-model="employeeOther.citizenId"
         />
       </div>
       <div class="col-12 app-text-muted-2">
         <q-icon size="xs" class="q-mr-xs" name="mdi-human-male" />
-        {{ $t('formDialogTitleFamilyHistoryDad') }}
+        {{ $t('customerEmployee.formFamily.father') }}
       </div>
       <div class="col-12 row q-col-gutter-sm">
         <q-input
@@ -91,7 +90,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('formDialogInputFirstName')"
+          :label="$t('form.firstName')"
           v-model="employeeOther.fatherFirstName"
         />
         <q-input
@@ -102,7 +101,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('formDialogInputLastName')"
+          :label="$t('form.lastName')"
           v-model="employeeOther.fatherLastName"
         />
         <q-input
@@ -113,7 +112,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('formDialogInputFirstNameEN')"
+          :label="$t('form.firstNameEN')"
           v-model="employeeOther.fatherFirstNameEN"
         />
         <q-input
@@ -124,7 +123,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('formDialogInputLastNameEN')"
+          :label="$t('form.lastNameEN')"
           v-model="employeeOther.fatherLastNameEN"
         />
         <q-input
@@ -135,14 +134,14 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-6"
-          :label="$t('formDialogInputFamilyBirthPlace')"
+          :label="$t('customerEmployee.formFamily.fatherBirthPlace')"
           v-model="employeeOther.fatherBirthPlace"
         />
       </div>
 
       <div class="col-12 app-text-muted-2">
         <q-icon size="xs" class="q-mr-xs" name="mdi-human-female" />
-        {{ $t('formDialogTitleFamilyHistoryMom') }}
+        {{ $t('customerEmployee.formFamily.mother') }}
       </div>
       <div class="col-12 row q-col-gutter-sm">
         <q-input
@@ -153,7 +152,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('formDialogInputFirstName')"
+          :label="$t('form.firstName')"
           v-model="employeeOther.motherFirstName"
         />
         <q-input
@@ -164,7 +163,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('formDialogInputLastName')"
+          :label="$t('form.lastName')"
           v-model="employeeOther.motherLastName"
         />
         <q-input
@@ -175,7 +174,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('formDialogInputFirstNameEN')"
+          :label="$t('form.firstNameEN')"
           v-model="employeeOther.motherFirstNameEN"
         />
         <q-input
@@ -186,7 +185,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-md-3 col-6"
-          :label="$t('formDialogInputLastNameEN')"
+          :label="$t('form.lastNameEN')"
           v-model="employeeOther.motherLastNameEN"
         />
         <q-input
@@ -197,7 +196,7 @@ const employeeOther = defineModel<EmployeeOtherCreate>('employeeOther');
           :readonly="readonly || employeeOther.statusSave"
           hide-bottom-space
           class="col-6"
-          :label="$t('formDialogInputFamilyBirthPlace')"
+          :label="$t('customerEmployee.formFamily.motherBirthPlace')"
           v-model="employeeOther.motherBirthPlace"
         />
       </div>
diff --git a/src/components/03_customer-management/FormEmployeePassport.vue b/src/components/03_customer-management/FormEmployeePassport.vue
index 9bb98187..e2a26004 100644
--- a/src/components/03_customer-management/FormEmployeePassport.vue
+++ b/src/components/03_customer-management/FormEmployeePassport.vue
@@ -115,7 +115,7 @@ watch(
         :hide-dropdown-icon="readonly"
         :options="passportTypeOptions"
         :for="`${prefixId}-select-passport-type`"
-        :label="$t('formDialogInputPassportType')"
+        :label="$t('customerEmployee.form.passportType')"
         :rules="[
           (val: string) =>
             !!val || $t('selectValidate') + $t('formDialogInputPassportType'),
@@ -125,7 +125,7 @@ watch(
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -138,7 +138,7 @@ watch(
         :readonly="readonly"
         hide-bottom-space
         class="col-md-3 col-6"
-        :label="$t('formDialogInputPassportNo')"
+        :label="$t('customerEmployee.form.passportNo')"
         v-model="passportNumber"
         :rules="[
           (val: string) =>
@@ -153,7 +153,7 @@ watch(
         :readonly="readonly"
         hide-bottom-space
         class="col-6"
-        :label="$t('formDialogInputPassportRef')"
+        :label="$t('customerEmployee.form.passportRef')"
         :model-value="
           readonly
             ? previousPassportReference || '-'
@@ -171,7 +171,7 @@ watch(
         :readonly="readonly"
         hide-bottom-space
         class="col-md-3 col-6"
-        :label="$t('formDialogInputWPassportPlace')"
+        :label="$t('customerEmployee.form.passportPlace')"
         v-model="passportIssuingPlace"
         :rules="[
           (val: string) =>
@@ -198,7 +198,7 @@ watch(
         :hide-dropdown-icon="readonly"
         :options="passportIssuingCountryOptions"
         :for="`${prefixId}-select-passport-country`"
-        :label="$t('formDialogInputPassportCountry')"
+        :label="$t('customerEmployee.form.passportIssuer')"
         :rules="[
           (val: string) =>
             !!val ||
@@ -209,14 +209,14 @@ watch(
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
       </q-select>
       <DatePicker
         :id="`${prefixId}-date-picker-passport-issueance`"
-        :label="$t('formDialogInputPassportIssuance')"
+        :label="$t('customerEmployee.form.passportIssueDate')"
         v-model="passportIssueDate"
         class="col-md-3 col-6"
         :readonly="readonly"
@@ -228,7 +228,7 @@ watch(
       />
       <DatePicker
         :id="`${prefixId}-date-picker-passport-expire`"
-        :label="$t('formDialogInputPassportExpire')"
+        :label="$t('customerEmployee.form.passportExpireDate')"
         v-model="passportExpiryDate"
         class="col-md-3 col-6"
         :readonly="readonly"
diff --git a/src/components/03_customer-management/FormEmployeeVisa.vue b/src/components/03_customer-management/FormEmployeeVisa.vue
index eec8a70d..fadbc9db 100644
--- a/src/components/03_customer-management/FormEmployeeVisa.vue
+++ b/src/components/03_customer-management/FormEmployeeVisa.vue
@@ -117,7 +117,7 @@ watch(
         :options="visaTypeOptions"
         :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-visa-type`"
-        :label="$t('formDialogInputVisaType')"
+        :label="$t('customerEmployee.form.visaType')"
         @filter="visaTypeFilter"
         :model-value="readonly ? visaType || '-' : visaType"
         @update:model-value="
@@ -128,7 +128,7 @@ watch(
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -145,7 +145,7 @@ watch(
         :readonly="readonly"
         hide-bottom-space
         class="col-4"
-        :label="$t('formDialogInputVisaNo')"
+        :label="$t('customerEmployee.form.visaNo')"
         :model-value="readonly ? visaNumber || '-' : visaNumber"
         @update:model-value="
           (v) => (typeof v === 'string' ? (visaNumber = v) : '')
@@ -159,7 +159,7 @@ watch(
         class="col-2"
         :id="`${prefixId}-date-picker-visa-issuance`"
         :readonly="readonly"
-        :label="$t('formDialogInputVisaIssuance')"
+        :label="$t('customerEmployee.form.visaIssuance')"
         v-model="visaIssueDate"
         clearable
       />
@@ -167,7 +167,7 @@ watch(
         class="col-2"
         :id="`${prefixId}-date-picker-visa-expire`"
         :readonly="readonly"
-        :label="$t('formDialogInputVisaExpire')"
+        :label="$t('customerEmployee.form.visaExpire')"
         v-model="visaExpiryDate"
         clearable
       />
@@ -180,7 +180,7 @@ watch(
         :readonly="readonly"
         hide-bottom-space
         class="col-5"
-        :label="$t('formDialogInputVisaPlace')"
+        :label="$t('customerEmployee.form.visaPlace')"
         :model-value="readonly ? visaIssuingPlace || '-' : visaIssuingPlace"
         @update:model-value="
           (v) => (typeof v === 'string' ? (visaIssuingPlace = v) : '')
@@ -194,7 +194,7 @@ watch(
         class="col-4"
         :id="`${prefixId}-date-picker-visa-until`"
         :readonly="readonly"
-        :label="$t('formDialogInputVisaStayUntil')"
+        :label="$t('customerEmployee.form.visaStayUntil')"
         v-model="visaStayUntilDate"
         clearable
       />
@@ -207,7 +207,7 @@ watch(
         :readonly="readonly"
         hide-bottom-space
         class="col-5"
-        :label="$t('formDialogInputVisaTM6')"
+        :label="$t('customerEmployee.form.visaTM6')"
         :model-value="readonly ? tm6Number || '-' : tm6Number"
         @update:model-value="
           (v) => (typeof v === 'string' ? (tm6Number = v) : '')
@@ -222,7 +222,7 @@ watch(
         class="col-4"
         :id="`${prefixId}-date-picker-visa-enter`"
         :readonly="readonly"
-        :label="$t('formDialogInputVisaEnter')"
+        :label="$t('customerEmployee.form.visaEnter')"
         v-model="entryDate"
         clearable
       />
diff --git a/src/components/03_customer-management/FormEmployeeWorkHistory.vue b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
index c16906f9..e035d018 100644
--- a/src/components/03_customer-management/FormEmployeeWorkHistory.vue
+++ b/src/components/03_customer-management/FormEmployeeWorkHistory.vue
@@ -114,7 +114,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         name="mdi-briefcase-outline"
         style="background-color: var(--surface-3)"
       />
-      {{ $t(`workHistory`) }}
+      {{ $t(`customerEmployee.formWorkHistory.title`) }}
       <AddButton
         v-if="!readonly"
         id="btn-add-bank"
@@ -140,7 +140,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         spaced="lg"
       />
       <span class="col-12 flex justify-between items-center">
-        {{ $t('customer.form.instance', { index: index + 1 }) }}
+        {{ $t('general.times', { number: index + 1 }) }}
 
         <div class="row items-center">
           <UndoButton
@@ -196,13 +196,13 @@ const workplaceFilter = selectFilterOptionRefMod(
         :options="jobTypeOptions"
         :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-job-type`"
-        :label="$t('formDialogInputJobType')"
+        :label="$t('customerEmployee.formWorkHistory.jobType')"
         @filter="jobTypeFilter"
       >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -227,13 +227,13 @@ const workplaceFilter = selectFilterOptionRefMod(
         :options="workplaceOptions"
         :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-province`"
-        :label="$t('formDialogInputWorkPlace')"
+        :label="$t('customerEmployee.formWorkHistory.workplace')"
         @filter="workplaceFilter"
       >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -241,7 +241,7 @@ const workplaceFilter = selectFilterOptionRefMod(
       <q-input
         lazy-rules="ondemand"
         :for="`${prefixId}-input-work-end-date`"
-        :label="$t('formDialogInputRemark')"
+        :label="$t('general.remark')"
         :dense="dense"
         outlined
         :readonly="readonly || work.statusSave"
@@ -251,7 +251,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         type="textarea"
       />
       <DatePicker
-        :label="$t('formDialogInputWorkUntil')"
+        :label="$t('customerEmployee.formWorkHistory.workUntil')"
         v-model="work.workEndDate"
         class="col-3"
         :id="`${prefixId}-input-work-until-date`"
@@ -267,11 +267,11 @@ const workplaceFilter = selectFilterOptionRefMod(
         :readonly="readonly || work.statusSave"
         hide-bottom-space
         class="col-6"
-        :label="$t('formDialogInputWorkPermitNo')"
+        :label="$t('customerEmployee.formWorkHistory.permitNo')"
         v-model="work.workPermitNo"
       />
       <DatePicker
-        :label="$t('formDialogInputWorkPermitIssueDate')"
+        :label="$t('customerEmployee.formWorkHistory.permitIssueDate')"
         v-model="work.workPermitIssuDate"
         class="col-3"
         :id="`${prefixId}-date-picker-work-permit-issue-date`"
@@ -279,7 +279,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         clearable
       />
       <DatePicker
-        :label="$t('formDialogInputWorkPermitExpireDate')"
+        :label="$t('customerEmployee.formWorkHistory.permitExpireDate')"
         v-model="work.workPermitExpireDate"
         class="col-3"
         :id="`${prefixId}-date-picker-work-permit-expire-date`"
@@ -295,7 +295,7 @@ const workplaceFilter = selectFilterOptionRefMod(
         :readonly="readonly || work.statusSave"
         hide-bottom-space
         class="col-5"
-        :label="$t('formDialogInputOwnerName')"
+        :label="$t('customerEmployee.formWorkHistory.employerName')"
         v-model="work.ownerName"
       />
       <q-select
@@ -318,13 +318,13 @@ const workplaceFilter = selectFilterOptionRefMod(
         :options="positionNameOptions"
         :hide-dropdown-icon="readonly || work.statusSave"
         :for="`${prefixId}-select-position-name`"
-        :label="$t('formDialogInputJobPosition')"
+        :label="$t('customerEmployee.formWorkHistory.jobPosition')"
         @filter="positionNameFilter"
       >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
diff --git a/src/components/03_customer-management/HistoryEditComponent.vue b/src/components/03_customer-management/HistoryEditComponent.vue
index 124a3210..dd1184b5 100644
--- a/src/components/03_customer-management/HistoryEditComponent.vue
+++ b/src/components/03_customer-management/HistoryEditComponent.vue
@@ -67,35 +67,35 @@ const fieldName = [
   {
     name: 'nrcNo',
     title: 'formDialogTitleInformation',
-    i18n: 'formDialogEmployeeNRCNo',
+    i18n: 'customerEmployee.form.nrcNo',
   },
 
   {
     name: 'firstName',
     title: 'personalInfo',
-    i18n: 'formDialogInputFirstName',
+    i18n: 'form.firstName',
   },
   {
     name: 'firstNameEN',
     title: 'personalInfo',
-    i18n: 'formDialogInputFirstNameEN',
+    i18n: 'form.firstNameEN',
   },
   { name: 'lastName', title: 'personalInfo', i18n: 'formDialogInputLastName' },
   {
     name: 'lastNameEN',
     title: 'personalInfo',
-    i18n: 'formDialogInputLastNameEN',
+    i18n: 'form.lastNameEN',
   },
   {
     name: 'dateOfBirth',
     title: 'personalInfo',
-    i18n: 'formDialogInputBirthDate',
+    i18n: 'form.birthDate',
   },
   { name: 'gender', title: 'personalInfo', i18n: 'formDialogInputGender' },
   {
     name: 'nationality',
     title: 'personalInfo',
-    i18n: 'formDialogInputNationality',
+    i18n: 'general.nationality',
   },
 
   {
@@ -339,14 +339,14 @@ watch(
           autoApply
           :teleport="true"
           v-model="currentDate"
-          :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+          :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
           :enableTimePicker="false"
         >
           <template #year="{ value }">
-            {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+            {{ $i18n.locale === 'tha' ? value + 543 : value }}
           </template>
           <template #year-overlay-value="{ value }">
-            {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+            {{ $i18n.locale === 'tha' ? value + 543 : value }}
           </template>
           <template #trigger>
             <span class="text-weight-medium q-px-xl">
@@ -394,7 +394,7 @@ watch(
                 <div class="column q-pl-md items-start">
                   <span class="text-weight-bold">
                     {{
-                      $i18n.locale === 'en-US'
+                      $i18n.locale === 'eng'
                         ? `${props.row.updatedBy.firstNameEN} ${props.row.updatedBy.lastNameEN}`
                         : (`${props.row.updatedBy.firstName} ${props.row.updatedBy.lastName}` ??
                           '-')
diff --git a/src/components/03_customer-management/TableEmpoloyee.vue b/src/components/03_customer-management/TableEmpoloyee.vue
index c9889551..0f64a317 100644
--- a/src/components/03_customer-management/TableEmpoloyee.vue
+++ b/src/components/03_customer-management/TableEmpoloyee.vue
@@ -20,7 +20,7 @@ const prop = withDefaults(
     fieldSelected: () => [
       'orderNumber',
       'firstName',
-      'formDialogInputAge',
+      'general.age',
       'formDialogInputNationality',
       'formDialogInputPassportNo',
       'passportExpiryDate',
@@ -167,7 +167,7 @@ const prop = withDefaults(
           </div>
         </q-td>
 
-        <q-td v-if="fieldSelected.includes('formDialogInputAge')">
+        <q-td v-if="fieldSelected.includes('general.age')">
           {{ calculateAge(props.row.dateOfBirth) || '-' }}
         </q-td>
 
@@ -195,9 +195,9 @@ const prop = withDefaults(
               </div>
               <div class="col app-text-muted">
                 {{
-                  $i18n.locale === 'en-US'
-                    ? `${props.row.customerBranch.nameEN}`
-                    : `${props.row.customerBranch.name}`
+                  $i18n.locale === 'eng'
+                    ? `${props.row.customerBranch.registerNameEN}`
+                    : `${props.row.customerBranch.registerName}`
                 }}
               </div>
             </div>
@@ -242,7 +242,7 @@ const prop = withDefaults(
                     style="color: hsl(var(--green-6-hsl))"
                   />
                   <span class="col-9 q-px-md flex items-center">
-                    {{ $t('viewDetail') }}
+                    {{ $t('general.viewDetail') }}
                   </span>
                 </q-item>
 
@@ -261,7 +261,7 @@ const prop = withDefaults(
                     style="color: hsl(var(--cyan-6-hsl))"
                   />
                   <span class="col-9 q-px-md flex items-center">
-                    {{ $t('edit') }}
+                    {{ $t('general.edit') }}
                   </span>
                 </q-item>
                 <q-item
@@ -285,7 +285,7 @@ const prop = withDefaults(
                     }"
                   />
                   <span class="col-9 q-px-md flex items-center">
-                    {{ $t('delete') }}
+                    {{ $t('general.delete') }}
                   </span>
                 </q-item>
 
@@ -325,7 +325,7 @@ const prop = withDefaults(
           :data="{
             code: props.row.code,
             name:
-              $i18n.locale === 'en-US'
+              $i18n.locale === 'eng'
                 ? `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim()
                 : `${props.row.firstName} ${props.row.lastName} `.trim(),
             img: props.row.profileImageUrl || '/images/employee-avatar.png',
@@ -348,7 +348,7 @@ const prop = withDefaults(
           :tag="[
             {
               color: 'pink',
-              value: $t('EMPLOYEE'),
+              value: $t('customer.employee'),
             },
           ]"
           :disabled="props.row.status === 'INACTIVE'"
diff --git a/src/components/03_customer-management/employee/BasicInformation.vue b/src/components/03_customer-management/employee/BasicInformation.vue
index 2f7f1853..782a82a0 100644
--- a/src/components/03_customer-management/employee/BasicInformation.vue
+++ b/src/components/03_customer-management/employee/BasicInformation.vue
@@ -135,7 +135,7 @@ onMounted(() => {
         :readonly="readonly"
         hide-bottom-space
         class="col-12"
-        :label="$t('formDialogEmployerBranchCode')"
+        :label="$t('customer.form.branchCode')"
         v-model="customerBranch"
         :option-value="
           (v) => ({
@@ -154,7 +154,10 @@ onMounted(() => {
         @filter="(val, update) => $emit('filterOwnerBranch', val, update)"
         :rules="[
           (val: string) =>
-            !!val || $t('selectValidate') + $t('formDialogEmployerBranchCode'),
+            !!val ||
+            $t('form.error.selectField', {
+              field: $t('customer.form.employerBranch'),
+            }),
         ]"
       >
         <template v-slot:option="scope">
@@ -168,58 +171,57 @@ onMounted(() => {
             </div>
             <div class="q-mt-sm">
               <div>
-                {{ scope.opt.code }} {{ $t('branchName') }}:
-                {{
-                  $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name
-                }}
+                {{ scope.opt.code }} {{ $t('general.name') }}:
+
+                <template v-if="scope.opt.customer.customerType === 'CORP'">
+                  {{
+                    $i18n.locale === 'eng'
+                      ? scope.opt.registerName
+                      : scope.opt.registerNameEN
+                  }}
+                </template>
+                <template v-else>
+                  {{
+                    $i18n.locale === 'eng'
+                      ? scope.opt.customer.firstNameEN ||
+                        '-' + ' ' + scope.opt.customer.lastNameEN ||
+                        ''
+                      : scope.opt.customer.firstName ||
+                        '-' + ' ' + scope.opt.customer.lastName ||
+                        ''
+                  }}
+                </template>
               </div>
 
               <div class="text-caption app-text-muted-2 q-mb-xs">
                 <div v-if="scope.opt.customer" class="col column">
                   <span>
-                    {{ $t('customerBranchName') }}:
+                    {{ $t('customerEmployee.form.employerSelect.branchName') }}:
                     {{
-                      $i18n.locale === 'en-US'
-                        ? scope.opt.customer.customerNameEN
-                        : scope.opt.customer.customerName
+                      $i18n.locale === 'eng'
+                        ? scope.opt.registerNameEN
+                        : scope.opt.registerName
                     }}
                   </span>
                   <span>
+                    {{ $t('customerEmployee.form.employerSelect.branchName') }}:
                     {{
-                      scope.opt.customer.customerType === 'PERS'
-                        ? $t('formDialogCustomerName')
-                        : $t('companyOwnerName')
-                    }}:
-                    {{
-                      $i18n.locale === 'en-US'
-                        ? scope.opt.customer.personName
-                        : scope.opt.customer.personName
+                      $i18n.locale === 'eng'
+                        ? scope.opt.customer.firstNameEN ||
+                          '-' + ' ' + scope.opt.customer.lastNameEN
+                        : scope.opt.customer.firstName ||
+                          '-' + ' ' + scope.opt.customer.lastName
                     }}
                   </span>
                 </div>
                 <div v-if="scope.opt.province" class="col">
-                  {{ $t('address') }}
+                  {{ $t('general.address') }}
                   {{
-                    $i18n.locale === 'en-US'
-                      ? scope.opt.addressEN
-                      : scope.opt.address
+                    $i18n.locale === 'eng'
+                      ? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`
+                      : `${scope.opt.address || ''} ${scope.opt.subDistrict.name || ''} ${scope.opt.district.name || ''} ${scope.opt.province.name || ''}`
                   }}
-                  {{
-                    $i18n.locale === 'en-US'
-                      ? scope.opt.subDistrict.nameEN
-                      : scope.opt.subDistrict.name
-                  }}
-                  {{
-                    $i18n.locale === 'en-US'
-                      ? scope.opt.district.nameEN
-                      : scope.opt.district.name
-                  }}
-                  {{
-                    $i18n.locale === 'en-US'
-                      ? scope.opt.province.nameEN
-                      : scope.opt.province.name
-                  }}
-                  {{ scope.opt.zipCode }}
+                  {{ scope.opt.subDistrict?.zipCode || '' }}
                 </div>
               </div>
             </div>
@@ -235,90 +237,50 @@ onMounted(() => {
           >
             <div class="q-mr-sm">
               {{ scope.opt.code }}
-              {{ $t('branchName') }}:
-              {{ $i18n.locale === 'en-US' ? scope.opt.nameEN : scope.opt.name }}
+              {{ $t('customerEmployee.form.employerSelect.branchName') }}:
+              {{
+                $i18n.locale === 'eng'
+                  ? scope.opt.registerNameEN
+                  : scope.opt.registerName
+              }}
             </div>
             <div
               class="text-caption app-text-muted-2"
               v-if="scope.opt.customer && scope.opt.province"
             >
-              {{ $t('customerBranchName') }}:
+              {{ $t('customerEmployee.form.employerSelect.branchName') }}:
               {{
-                $i18n.locale === 'en-US'
-                  ? scope.opt.customer.customerNameEN
-                  : scope.opt.customer.customerName
+                $i18n.locale === 'eng'
+                  ? scope.opt.customer.firstNameEN ||
+                    '-' + ' ' + scope.opt.customer.lastNameEN
+                  : scope.opt.customer.firstName ||
+                    '-' + ' ' + scope.opt.customer.lastName
               }}
+
+              {{ $t('general.address') }}
               {{
-                scope.opt.customer.customerType === 'PERS'
-                  ? $t('formDialogCustomerName')
-                  : $t('companyOwnerName')
-              }}:
-              {{
-                $i18n.locale === 'en-US'
-                  ? scope.opt.customer.personName
-                  : scope.opt.customer.personName
+                $i18n.locale === 'eng'
+                  ? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`
+                  : `${scope.opt.address || ''} ${scope.opt.subDistrict.name || ''} ${scope.opt.district.name || ''} ${scope.opt.province.name || ''}`
               }}
-              {{ $t('address') }}
-              {{
-                $i18n.locale === 'en-US'
-                  ? scope.opt.addressEN
-                  : scope.opt.address
-              }}
-              {{
-                $i18n.locale === 'en-US'
-                  ? scope.opt.subDistrict.nameEN
-                  : scope.opt.subDistrict.name
-              }}
-              {{
-                $i18n.locale === 'en-US'
-                  ? scope.opt.district.nameEN
-                  : scope.opt.district.name
-              }}
-              {{
-                $i18n.locale === 'en-US'
-                  ? scope.opt.province.nameEN
-                  : scope.opt.province.name
-              }}
-              {{ scope.opt.zipCode }}
+              {{ scope.opt.subDistrict?.zipCode || '' }}
               <q-tooltip v-if="scope.opt.customer && scope.opt.province">
-                {{ $t('customerBranchName') }}:
+                {{ $t('customerEmployee.form.employerSelect.branchName') }}:
                 {{
-                  $i18n.locale === 'en-US'
-                    ? scope.opt.customer.customerNameEN
-                    : scope.opt.customer.customerName
-                }}
-                {{
-                  scope.opt.customer.customerType === 'PERS'
-                    ? $t('formDialogCustomerName')
-                    : $t('companyOwnerName')
-                }}:
-                {{
-                  $i18n.locale === 'en-US'
-                    ? scope.opt.customer.personName
-                    : scope.opt.customer.personName
+                  $i18n.locale === 'eng'
+                    ? scope.opt.customer.firstNameEN ||
+                      '-' + ' ' + scope.opt.customer.lastNameEN
+                    : scope.opt.customer.firstName ||
+                      '-' + ' ' + scope.opt.customer.lastName
                 }}
+
                 {{ $t('address') }}
                 {{
-                  $i18n.locale === 'en-US'
-                    ? scope.opt.addressEN
-                    : scope.opt.address
+                  $i18n.locale === 'eng'
+                    ? `${scope.opt.addressEN || ''} ${scope.opt.subDistrict.nameEN || ''} ${scope.opt.district.nameEN || ''} ${scope.opt.province.nameEN || ''}`
+                    : `${scope.opt.address || ''} ${scope.opt.subDistrict.name || ''} ${scope.opt.district.name || ''} ${scope.opt.province.name || ''}`
                 }}
-                {{
-                  $i18n.locale === 'en-US'
-                    ? scope.opt.subDistrict.nameEN
-                    : scope.opt.subDistrict.name
-                }}
-                {{
-                  $i18n.locale === 'en-US'
-                    ? scope.opt.district.nameEN
-                    : scope.opt.district.name
-                }}
-                {{
-                  $i18n.locale === 'en-US'
-                    ? scope.opt.province.nameEN
-                    : scope.opt.province.name
-                }}
-                {{ scope.opt.zipCode }}
+                {{ scope.opt.zipCode || '' }}
               </q-tooltip>
             </div>
           </div>
@@ -343,7 +305,7 @@ onMounted(() => {
         :readonly="readonly"
         :disable="!readonly"
         class="col-3"
-        :label="$t('formDialogEmployeeID')"
+        :label="$t('customerEmployee.form.employeeCode')"
         v-model="code"
       />
 
@@ -356,7 +318,7 @@ onMounted(() => {
         hide-bottom-space
         :readonly="readonly"
         class="col-6"
-        :label="$t('formDialogEmployeeNRCNo')"
+        :label="$t('customerEmployee.form.nrcNo')"
         :model-value="readonly ? nrcNo || '-' : nrcNo"
         @update:model-value="(v) => (typeof v === 'string' ? (nrcNo = v) : '')"
       />
diff --git a/src/components/04_product-service/BasicInfoProduct.vue b/src/components/04_product-service/BasicInfoProduct.vue
index 2185ed38..3a06fe06 100644
--- a/src/components/04_product-service/BasicInfoProduct.vue
+++ b/src/components/04_product-service/BasicInfoProduct.vue
@@ -31,10 +31,10 @@ onMounted(async () => {
   const resultOption = await fetch('/option/option.json');
   const option = await resultOption.json();
 
-  if (locale.value === 'en-US') {
+  if (locale.value === 'eng') {
     codeOption.value = option.eng.typeProduct;
   }
-  if (locale.value === 'th-th') {
+  if (locale.value === 'tha') {
     codeOption.value = option.tha.typeProduct;
   }
 });
@@ -61,7 +61,7 @@ const branchFilter = selectFilterOptionRefMod(
         name="mdi-office-building-outline"
         style="background-color: var(--surface-3)"
       />
-      {{ $t(`formDialogTitleInformation`) }}
+      {{ $t(`form.field.basicInformation`) }}
     </div>
 
     <div class="col-12 row q-col-gutter-sm">
@@ -76,7 +76,7 @@ const branchFilter = selectFilterOptionRefMod(
         hide-bottom-space
         input-debounce="0"
         :disable="!readonly && disableCode"
-        class="col-3"
+        class="col-md-3 col-6"
         v-model="code"
         id="select-br-id"
         option-label="label"
@@ -85,15 +85,15 @@ const branchFilter = selectFilterOptionRefMod(
         :dense="dense"
         :readonly="readonly"
         :options="codeOptions"
-        :label="$t('productCode')"
+        :label="$t('productService.product.code')"
         :hide-dropdown-icon="readonly || disableCode"
-        :rules="[(val: string) => !!val]"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
         @filter="codeFilter"
       >
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -108,7 +108,7 @@ const branchFilter = selectFilterOptionRefMod(
         hide-selected
         hide-bottom-space
         input-debounce="0"
-        class="col-3"
+        class="col-md-3 col-6"
         option-value="id"
         option-label="name"
         lazy-rules="ondemand"
@@ -118,14 +118,20 @@ const branchFilter = selectFilterOptionRefMod(
         :readonly="readonly"
         :options="branchOptions"
         :hide-dropdown-icon="readonly"
-        :label="$t('registeredBranch')"
+        :label="$t('productService.product.registeredBranch')"
         :rules="[
           (val) => {
             const roles = getRole() || [];
             const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
               (role) => roles.includes(role),
             );
-            return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
+            return (
+              isSpecialRole ||
+              !!val ||
+              $t('form.error.selectField', {
+                field: $t('productService.product.registeredBranch'),
+              })
+            );
           },
         ]"
         @filter="branchFilter"
@@ -133,7 +139,7 @@ const branchFilter = selectFilterOptionRefMod(
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -148,9 +154,9 @@ const branchFilter = selectFilterOptionRefMod(
         :borderless="readonly"
         hide-bottom-space
         class="col-6"
-        :label="$t('productName')"
+        :label="$t('productService.product.name')"
         v-model="name"
-        :rules="[(val: string) => !!val]"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
       />
       <q-input
         lazy-rules="ondemand"
@@ -160,8 +166,8 @@ const branchFilter = selectFilterOptionRefMod(
         :readonly="readonly"
         :borderless="readonly"
         hide-bottom-space
-        class="col-3"
-        :label="$t('productProcessingTime')"
+        class="col-md-3 col-6"
+        :label="$t('productService.product.processingTime')"
         v-model="process"
         type="number"
       />
@@ -185,7 +191,7 @@ const branchFilter = selectFilterOptionRefMod(
           outlined
           :readonly="readonly"
           :borderless="readonly"
-          :label="$t('detail')"
+          :label="$t('general.detail')"
           stack-label
           dense
         >
@@ -196,7 +202,7 @@ const branchFilter = selectFilterOptionRefMod(
               (v) => (typeof v === 'string' ? (detail = v) : '')
             "
             min-height="5rem"
-            class="full-width q-mt-sm q-mb-xs"
+            class="q-mt-sm q-mb-xs"
             :flat="!readonly"
             :readonly="readonly"
             :toolbar-color="
@@ -208,6 +214,7 @@ const branchFilter = selectFilterOptionRefMod(
               color: var(--foreground);
               border-color: var(--surface-3);
             "
+            :style="`width: ${$q.screen.gt.xs ? '100%' : '63vw'}`"
           />
         </q-field>
       </div>
@@ -221,7 +228,7 @@ const branchFilter = selectFilterOptionRefMod(
         hide-bottom-space
         type="textarea"
         class="col-12"
-        :label="$t('formDialogInputRemark')"
+        :label="$t('general.remark')"
         :model-value="readonly ? remark || '-' : remark"
         @update:model-value="(v) => (typeof v === 'string' ? (remark = v) : '')"
       />
diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index a2ce2959..ff35d989 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -57,7 +57,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         name="mdi-office-building-outline"
         style="background-color: var(--surface-3)"
       />
-      {{ $t(`formDialogTitleInformation`) }}
+      {{ $t(`form.field.basicInformation`) }}
     </div>
     <div v-if="!service" class="col-12 row q-col-gutter-sm">
       <q-input
@@ -69,9 +69,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         hide-bottom-space
         class="col-6"
         :label="
-          $t(
-            isType ? 'productAndServiceTypeCode' : 'productAndServiceGroupCode',
-          )
+          $t(isType ? 'productService.type.code' : 'productService.group.code')
         "
         v-model="code"
       />
@@ -83,12 +81,10 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         hide-bottom-space
         class="col-6"
         :label="
-          $t(
-            isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName',
-          )
+          $t(isType ? 'productService.type.name' : 'productService.group.name')
         "
         v-model="name"
-        :rules="[(val: string) => !!val || $t('pleaseInformation')]"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
       />
       <q-input
         lazy-rules="ondemand"
@@ -98,7 +94,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         hide-bottom-space
         type="textarea"
         class="col-12"
-        :label="$t('detail')"
+        :label="$t('general.detail')"
         :model-value="readonly ? detail || '-' : detail"
         @update:model-value="(v) => (typeof v === 'string' ? (detail = v) : '')"
         :for="`input-detail`"
@@ -111,7 +107,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         hide-bottom-space
         type="textarea"
         class="col-12"
-        :label="$t('formDialogInputRemark')"
+        :label="$t('general.remark')"
         :model-value="readonly ? remark || '-' : remark"
         @update:model-value="(v) => (typeof v === 'string' ? (remark = v) : '')"
         :for="`input-remark`"
@@ -147,7 +143,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -161,10 +157,10 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-3"
-        :label="$t('serviceCode')"
+        class="col-md-3 col-4"
+        :label="$t('productService.service.code')"
         v-model="serviceCode"
-        :rules="[(val: string) => !!val || $t('pleaseInformation')]"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
       />
 
       <q-select
@@ -176,7 +172,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         map-options
         hide-selected
         hide-bottom-space
-        class="col-3"
+        class="col-md-3 col-8"
         option-value="id"
         option-label="name"
         lazy-rules="ondemand"
@@ -187,14 +183,20 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         :readonly="readonly"
         :options="branchOptions"
         :hide-dropdown-icon="readonly"
-        :label="$t('registeredBranch')"
+        :label="$t('productService.service.registeredBranch')"
         :rules="[
           (val) => {
             const roles = getRole() || [];
             const isSpecialRole = ['admin', 'system', 'head_of_admin'].some(
               (role) => roles.includes(role),
             );
-            return isSpecialRole || !!val || 'กรุณากรอกข้อมูล';
+            return (
+              isSpecialRole ||
+              !!val ||
+              $t('form.error.selectField', {
+                field: $t('productService.service.registeredBranch'),
+              })
+            );
           },
         ]"
         @filter="branchFilter"
@@ -202,7 +204,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -216,10 +218,10 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         outlined
         :readonly="readonly"
         hide-bottom-space
-        class="col-6"
-        :label="$t('serviceName')"
+        class="col-md-6 col"
+        :label="$t('productService.service.name')"
         v-model="serviceName"
-        :rules="[(val: string) => !!val || $t('pleaseInformation')]"
+        :rules="[(val: string) => !!val || $t('form.error.required')]"
       />
       <q-input
         lazy-rules="ondemand"
@@ -231,7 +233,7 @@ const serviceCodeFilter = selectFilterOptionRefMod(
         hide-bottom-space
         type="textarea"
         class="col-12"
-        :label="$t('detail')"
+        :label="$t('general.detail')"
         :model-value="readonly ? serviceDescription || '-' : serviceDescription"
         @update:model-value="
           (v) => (typeof v === 'string' ? (serviceDescription = v) : '')
diff --git a/src/components/04_product-service/FormServiceProperties.vue b/src/components/04_product-service/FormServiceProperties.vue
index 1839d033..78e28ca0 100644
--- a/src/components/04_product-service/FormServiceProperties.vue
+++ b/src/components/04_product-service/FormServiceProperties.vue
@@ -23,7 +23,7 @@ defineEmits<{
       class="text-weight-bold text-body1 flex items-center justify-between q-px-md q-py-sm"
       style="background: hsla(var(--info-bg) / 0.1); min-height: 50px"
     >
-      {{ $t(`serviceProperties`) }}
+      {{ $t(`productService.service.serviceProperties`) }}
 
       <q-btn
         v-if="!readonly"
@@ -31,7 +31,7 @@ defineEmits<{
         dense
         flat
         unelevated
-        class="q-px-sm"
+        class="q-px-sm text-capitalize"
         color="info"
         @click="$emit('serviceProperties')"
       >
@@ -41,7 +41,9 @@ defineEmits<{
           class="q-mr-sm"
           style="color: hsl(var(--info-bg))"
         />
-        {{ $t('serviceProperties') }}
+        <span v-if="$q.screen.gt.xs">
+          {{ $t('productService.service.serviceProperties') }}
+        </span>
       </q-btn>
     </div>
 
@@ -61,7 +63,7 @@ defineEmits<{
       </div>
 
       <div v-else class="col flex items-center app-text-muted">
-        {{ $t('noProperties') }}
+        {{ $t('productService.service.noProperties') }}
       </div>
     </div>
   </div>
diff --git a/src/components/04_product-service/FormServiceWork.vue b/src/components/04_product-service/FormServiceWork.vue
index 58933a05..77b58c25 100644
--- a/src/components/04_product-service/FormServiceWork.vue
+++ b/src/components/04_product-service/FormServiceWork.vue
@@ -43,9 +43,9 @@ function confirmDelete(items: unknown[], index: number) {
   dialog({
     color: 'negative',
     icon: 'mdi-alert',
-    title: t('deleteConfirmTitle'),
-    actionText: t('delete'),
-    message: t('deleteConfirmMessage'),
+    title: t('dialog.title.confirmDelete'),
+    actionText: t('general.delete'),
+    message: t('dialog.message.confirmDelete'),
     action: async () => {
       deleteItem(items, index);
     },
@@ -65,7 +65,7 @@ function confirmDelete(items: unknown[], index: number) {
         name="mdi-briefcase-outline"
         style="background-color: var(--surface-3)"
       />
-      {{ $t(`workInformation`) }}
+      {{ $t(`productService.service.workInformation`) }}
       <AddButton
         v-if="!readonly"
         id="btn-add-work"
diff --git a/src/components/04_product-service/PriceDataComponent.vue b/src/components/04_product-service/PriceDataComponent.vue
index ad98891e..4032fa9d 100644
--- a/src/components/04_product-service/PriceDataComponent.vue
+++ b/src/components/04_product-service/PriceDataComponent.vue
@@ -37,7 +37,7 @@ withDefaults(
         name="mdi-cash"
         style="background-color: var(--surface-3)"
       />
-      {{ $t('priceInformation') }}
+      {{ $t('productService.product.priceInformation') }}
     </div>
     <div class="col-12 row q-col-gutter-sm">
       <q-input
@@ -50,7 +50,7 @@ withDefaults(
         hide-bottom-space
         class="col-4"
         type="number"
-        :label="$t('salePrice')"
+        :label="$t('productService.product.salePrice')"
         v-model="price"
       />
 
@@ -64,7 +64,7 @@ withDefaults(
         hide-bottom-space
         class="col-4"
         type="number"
-        :label="$t('agentPrice')"
+        :label="$t('productService.product.agentPrice')"
         v-model="agentPrice"
       />
 
@@ -78,7 +78,7 @@ withDefaults(
         hide-bottom-space
         class="col-4"
         type="number"
-        :label="$t('processingPrice')"
+        :label="$t('productService.product.processingPrice')"
         v-model="serviceCharge"
       />
     </div>
diff --git a/src/components/04_product-service/ProductCardComponent.vue b/src/components/04_product-service/ProductCardComponent.vue
index 317a285d..8c54308b 100644
--- a/src/components/04_product-service/ProductCardComponent.vue
+++ b/src/components/04_product-service/ProductCardComponent.vue
@@ -83,7 +83,7 @@ withDefaults(
                   style="color: hsl(var(--green-6-hsl))"
                 />
                 <span class="col-9 q-px-md flex items-center">
-                  {{ $t('viewDetail') }}
+                  {{ $t('general.viewDetail') }}
                 </span>
               </q-item>
               <q-item
@@ -106,7 +106,7 @@ withDefaults(
                   style="color: hsl(var(--cyan-6-hsl))"
                 />
                 <span class="col-9 q-px-md flex items-center">
-                  {{ $t('edit') }}
+                  {{ $t('general.edit') }}
                 </span>
               </q-item>
               <q-item
@@ -126,7 +126,7 @@ withDefaults(
                   class="col-3 app-text-negative"
                 />
                 <span class="col-9 q-px-md flex items-center">
-                  {{ $t('delete') }}
+                  {{ $t('general.delete') }}
                 </span>
               </q-item>
               <q-item dense>
@@ -139,7 +139,7 @@ withDefaults(
                     />
                     <span class="q-pl-md">
                       {{
-                        !isDisabled ? $t('switchOnLabel') : $t('switchOffLabel')
+                        !isDisabled ? $t('general.open') : $t('general.close')
                       }}
                     </span>
                   </div>
@@ -199,8 +199,8 @@ withDefaults(
           }
         "
         unelevated
-        class="q-px-sm"
-        :label="$t('detail')"
+        class="q-px-sm text-capitalize"
+        :label="$t('general.detail')"
         style="
           background-color: hsla(var(--blue-5-hsl) / 0.1);
           color: var(--blue-5);
diff --git a/src/components/04_product-service/ServiceProperties.vue b/src/components/04_product-service/ServiceProperties.vue
index 205e5009..f43cdc7d 100644
--- a/src/components/04_product-service/ServiceProperties.vue
+++ b/src/components/04_product-service/ServiceProperties.vue
@@ -209,9 +209,9 @@ function confirmDelete(items: unknown[], index: number) {
   dialog({
     color: 'negative',
     icon: 'mdi-alert',
-    title: t('deleteConfirmTitle'),
-    actionText: t('delete'),
-    message: t('deleteConfirmMessage'),
+    title: t('dialog.title.confirmDelete'),
+    actionText: t('general.delete'),
+    message: t('dialog.message.confirmDelete'),
     action: async () => {
       deleteItem(items, index);
     },
@@ -227,8 +227,8 @@ function confirmDelete(items: unknown[], index: number) {
         dense
         unelevated
         color="primary"
-        :label="$t('properties')"
-        class="q-px-sm q-mb-lg"
+        :label="$t('productService.service.properties')"
+        class="q-px-sm q-mb-lg text-capitalize"
         menu-anchor="bottom end"
       >
         <q-list dense v-if="formServiceProperties && propertiesOption">
@@ -251,7 +251,7 @@ function confirmDelete(items: unknown[], index: number) {
                 class="q-mr-sm"
                 style="color: hsl(var(--text-mute))"
               />
-              {{ $t('selectAll') }}
+              {{ $t('general.selectAll') }}
             </div>
           </q-item>
           <q-separator />
@@ -310,7 +310,7 @@ function confirmDelete(items: unknown[], index: number) {
           index === formServiceProperties.additional.length - 1 && 'q-mb-lg'
         "
       >
-        <div class="col row items-center">
+        <div class="col-md col-12 row items-center">
           <q-btn
             id="btn-move-up-product"
             icon="mdi-arrow-up"
@@ -318,6 +318,7 @@ function confirmDelete(items: unknown[], index: number) {
             flat
             round
             :disable="index === 0"
+            :size="$q.screen.xs ? 'xs' : ''"
             style="color: hsl(var(--text-mute-2))"
             @click="moveItemUp(formServiceProperties.additional, index)"
           />
@@ -327,13 +328,14 @@ function confirmDelete(items: unknown[], index: number) {
             dense
             flat
             round
+            :size="$q.screen.xs ? 'xs' : ''"
             :disable="index === formServiceProperties.additional.length - 1"
             style="color: hsl(var(--text-mute-2))"
             @click="moveItemDown(formServiceProperties.additional, index)"
           />
 
           <q-avatar
-            size="md"
+            :size="$q.screen.xs ? 'sm' : 'md'"
             class="q-mx-lg"
             style="background-color: var(--surface-3)"
           >
@@ -348,8 +350,9 @@ function confirmDelete(items: unknown[], index: number) {
             emit-value
             map-options
             hide-bottom-space
-            class="col q-mr-md"
-            :label="$t('propertiesName')"
+            class="col-md col-12 q-mr-md"
+            :class="{ 'q-my-sm': $q.screen.lt.md }"
+            :label="$t('productService.service.propertiesName')"
             option-label="label"
             option-value="value"
             :options="propertiesOption"
@@ -369,7 +372,7 @@ function confirmDelete(items: unknown[], index: number) {
         </div>
 
         <!-- type -->
-        <div class="col">
+        <div class="col-md col-12">
           <q-select
             lazy-rules="ondemand"
             dense
@@ -377,7 +380,7 @@ function confirmDelete(items: unknown[], index: number) {
             emit-value
             map-options
             hide-bottom-space
-            :label="$t('type')"
+            :label="$t('general.type')"
             option-value="value"
             @update:model-value="
               (t: 'string' | 'number' | 'date' | 'array') => {
@@ -461,8 +464,13 @@ function confirmDelete(items: unknown[], index: number) {
 
           <div v-if="p.type !== 'date' && p.type">
             <q-item class="no-padding" style="font-size: 11px">
-              <q-item-section class="column q-py-sm" style="padding-left: 12px">
-                <span class="app-text-muted-2">{{ $t('additional') }}</span>
+              <q-item-section
+                class="column q-py-sm"
+                :style="{ 'padding-left: 12px': $q.screen.gt.xs }"
+              >
+                <span class="app-text-muted-2">
+                  {{ $t('general.additional') }}
+                </span>
 
                 <div v-if="p.type === 'string'" class="q-gutter-y-sm">
                   <div class="row items-center">
@@ -472,7 +480,7 @@ function confirmDelete(items: unknown[], index: number) {
                         v-model="p.isPhoneNumber"
                         size="xs"
                       />
-                      {{ $t('telephone') }}
+                      {{ $t('general.telephone') }}
                     </div>
                     <q-input
                       lazy-rules="ondemand"
@@ -482,7 +490,7 @@ function confirmDelete(items: unknown[], index: number) {
                       class="col additional-label"
                       dense
                       outlined
-                      :label="$t('telMaxLength')"
+                      :label="$t('form.maxLength')"
                     />
                   </div>
                 </div>
@@ -491,7 +499,7 @@ function confirmDelete(items: unknown[], index: number) {
                   <div class="row items-center">
                     <div class="col-md-4 col-12 surface-3 rounded">
                       <q-checkbox v-model="p.comma" size="xs" class="q-py-xs" />
-                      {{ $t('useComma') }}
+                      {{ $t('form.useComma') }}
                     </div>
                     <div
                       class="col-md-4 col-7 surface-3 rounded"
@@ -505,7 +513,7 @@ function confirmDelete(items: unknown[], index: number) {
                         size="xs"
                         class="q-py-xs"
                       />
-                      {{ $t('decimal') }}
+                      {{ $t('form.decimal') }}
                     </div>
                     <q-input
                       lazy-rules="ondemand"
@@ -515,7 +523,7 @@ function confirmDelete(items: unknown[], index: number) {
                       input-class="text-caption"
                       dense
                       outlined
-                      :label="$t('decimalPlace')"
+                      :label="$t('form.decimalPlace')"
                     />
                   </div>
                 </div>
@@ -534,8 +542,8 @@ function confirmDelete(items: unknown[], index: number) {
                         dense
                         outlined
                         input-class="text-caption"
-                        :label="$t('selection')"
-                        :rules="[(val) => !!val || $t('pleaseInformation')]"
+                        :label="$t('form.selection')"
+                        :rules="[(val) => !!val || $t('form.error.required')]"
                         hide-bottom-space
                       />
                     </div>
diff --git a/src/components/04_product-service/TotalProductCardComponent.vue b/src/components/04_product-service/TotalProductCardComponent.vue
index 7f7a7443..e06a6c16 100644
--- a/src/components/04_product-service/TotalProductCardComponent.vue
+++ b/src/components/04_product-service/TotalProductCardComponent.vue
@@ -92,7 +92,7 @@ withDefaults(
                   style="color: hsl(var(--green-6-hsl))"
                 />
                 <span class="col-9 q-px-md flex items-center">
-                  {{ $t('viewDetail') }}
+                  {{ $t('general.viewDetail') }}
                 </span>
               </q-item>
 
@@ -112,7 +112,7 @@ withDefaults(
                   style="color: hsl(var(--cyan-6-hsl))"
                 />
                 <span class="col-9 q-px-md flex items-center">
-                  {{ $t('edit') }}
+                  {{ $t('general.edit') }}
                 </span>
               </q-item>
 
@@ -126,7 +126,7 @@ withDefaults(
                     />
                     <span class="q-pl-md">
                       {{
-                        !isDisabled ? $t('switchOnLabel') : $t('switchOffLabel')
+                        !isDisabled ? $t('general.open') : $t('general.close')
                       }}
                     </span>
                   </div>
@@ -155,7 +155,9 @@ withDefaults(
           class="bordered q-pa-xs row surface-0"
           style="font-size: 12px; border-radius: 5px; width: 80px"
         >
-          <div class="col ellipsis-2-lines">งาน</div>
+          <div class="col ellipsis-2-lines">
+            {{ $t('productService.service.work') }}
+          </div>
           <q-space />
           <div class="col text-center">{{ data?.work.length }}</div>
         </div>
@@ -166,10 +168,14 @@ withDefaults(
           class="row full-width text-right"
           style="font-size: 10px; color: hsl(var(--stone-4-hsl))"
         >
-          <div class="col" v-if="priceDisplay?.price">ราคาขาย</div>
-          <div class="col" v-if="priceDisplay?.agentPrice">ราคาตัวแทน</div>
+          <div class="col" v-if="priceDisplay?.price">
+            {{ $t('productService.product.salePrice') }}
+          </div>
+          <div class="col" v-if="priceDisplay?.agentPrice">
+            {{ $t('productService.product.agentPrice') }}
+          </div>
           <div class="col" v-if="priceDisplay?.serviceCharge">
-            ราคาดำเนินการ
+            {{ $t('productService.product.processingPrice') }}
           </div>
         </div>
 
@@ -249,7 +255,7 @@ withDefaults(
             class="surface-0 rounded q-pa-xs app-text-muted"
             size="20px"
           />
-          {{ data?.process }} วัน
+          {{ data?.process }} {{ $t('general.day') }}
         </div>
       </div>
     </div>
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index dfaa2693..cfe57ad4 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -102,20 +102,22 @@ defineEmits<{
               @click="() => (readonly ? '' : fetchListOfWork())"
             >
               <span class="text-body2" style="color: var(--foreground)">
-                {{ $t('workNo') }} {{ index + 1 }} :
+                {{ $t('productService.service.work') }} {{ index + 1 }} :
                 <span class="app-text-muted-2">
-                  {{ workName ? workName : $t('workName') }}
+                  {{
+                    workName ? workName : $t('productService.service.workName')
+                  }}
                 </span>
               </span>
 
               <q-menu v-if="!readonly" fit anchor="bottom left" self="top left">
                 <q-item>
                   <div class="full-width flex items-center justify-between">
-                    {{ $t('workName') }}
+                    {{ $t('productService.service.workName') }}
                     <q-btn
                       dense
                       unelevated
-                      class="bordered q-px-sm"
+                      class="bordered q-px-sm text-capitalize"
                       style="
                         border-radius: var(--radius-2);
                         color: hsl(var(--info-bg));
@@ -165,7 +167,7 @@ defineEmits<{
               color="negative"
               @click.stop="$emit('deleteWork')"
             >
-              <q-tooltip>{{ $t('delete') }}</q-tooltip>
+              <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
             </q-btn>
           </div>
         </div>
@@ -178,10 +180,14 @@ defineEmits<{
             class="q-py-xs text-weight-medium row justify-between items-center q-px-md"
             style="background-color: hsla(var(--info-bg) / 0.1)"
           >
-            <span>{{ $t('propertiesInWork') }} {{ workIndex + 1 }}</span>
+            <span>
+              {{ $t('productService.service.propertiesInWork') }}
+              {{ workIndex + 1 }}
+            </span>
             <q-btn
               v-if="!readonly"
               id="btn-add-work-product"
+              class="text-capitalize"
               flat
               dense
               padding="0"
@@ -194,14 +200,17 @@ defineEmits<{
                 class="q-mr-sm"
                 style="color: hsl(var(--info-bg))"
               />
-              {{ $t('properties') }}
+              <span v-if="$q.screen.gt.xs">
+                {{ $t('productService.service.properties') }}
+              </span>
             </q-btn>
           </div>
 
           <div class="q-py-md q-px-md full-width">
             <div
               v-if="attributes.additional.length > 0"
-              class="row items-center full-width surface-1 q-pb-md q-pt-sm q-px-sm q-gutter-sm"
+              class="row items-center full-width surface-1 q-pb-md q-pt-sm q-px-sm q-gutter-sm scroll"
+              :style="$q.screen.xs ? 'max-height: 100px' : ''"
             >
               <div
                 v-for="(p, index) in attributes.additional"
@@ -213,7 +222,7 @@ defineEmits<{
               </div>
             </div>
             <div v-else class="app-text-muted">
-              {{ $t('noProperties') }}
+              {{ $t('productService.service.noProperties') }}
             </div>
           </div>
         </div>
@@ -225,11 +234,12 @@ defineEmits<{
             style="background-color: hsla(var(--info-bg) / 0.1)"
           >
             <span>
-              {{ $t('productInWork') }} {{ workIndex + 1 }}
+              {{ $t('productService.service.productInWork') }}
+              {{ workIndex + 1 }}
 
               <q-checkbox
                 size="xs"
-                class="q-pl-lg"
+                :class="$q.screen.gt.xs ? 'q-pl-lg' : 'q-pl-sm'"
                 v-model="attributes.showTotalPrice"
                 :label="$t('productService.service.showTotalPrice')"
                 style="color: hsl(var(--text-mute-2))"
@@ -242,7 +252,10 @@ defineEmits<{
               flat
               dense
               icon="mdi-plus"
-              :label="$t('serviceAddProduct')"
+              class="text-capitalize"
+              :label="
+                $q.screen.gt.xs ? $t('productService.product.addTitle') : ''
+              "
               padding="0"
               style="color: hsl(var(--info-bg))"
               @click.stop="$emit('addProduct')"
@@ -261,9 +274,12 @@ defineEmits<{
               <div
                 class="row col items-center justify-between full-width surface-1 q-py-md q-px-sm"
               >
-                <div class="row items-center col no-wrap" v-if="productItems">
+                <div
+                  class="row items-center col-md col-12 no-wrap"
+                  v-if="productItems"
+                >
                   <q-btn
-                    v-if="!readonly"
+                    v-if="!readonly && $q.screen.gt.xs"
                     id="btn-product-up"
                     icon="mdi-arrow-up"
                     dense
@@ -274,7 +290,7 @@ defineEmits<{
                     @click.stop="$emit('moveProductUp', productItems, index)"
                   />
                   <q-btn
-                    v-if="!readonly"
+                    v-if="!readonly && $q.screen.gt.xs"
                     id="btn-product-down"
                     icon="mdi-arrow-down"
                     dense
@@ -295,7 +311,10 @@ defineEmits<{
                   </q-avatar>
 
                   <div class="row no-wrap">
-                    <div class="bordered q-mx-md col-3 image-box">
+                    <div
+                      v-if="$q.screen.gt.xs"
+                      class="bordered q-mx-md col-3 image-box"
+                    >
                       <q-img
                         :src="`${baseUrl}/product/${product?.id}/image`"
                         style="object-fit: cover; width: 100%; height: 100%"
@@ -314,17 +333,9 @@ defineEmits<{
                         class="text-weight-bold ellipsis-2-lines"
                         :style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
                       >
-                        {{
-                          $i18n.locale === 'en-US'
-                            ? product.nameEn
-                            : product.name
-                        }}
+                        {{ product.name }}
                         <q-tooltip>
-                          {{
-                            $i18n.locale === 'en-US'
-                              ? product.nameEn
-                              : product.name
-                          }}
+                          {{ product.name }}
                         </q-tooltip>
                       </span>
                       <div
@@ -337,7 +348,7 @@ defineEmits<{
                   </div>
                 </div>
 
-                <div class="row justify-end text-right col-5 q-pr-sm">
+                <div class="row justify-end text-right col-md-6 col-12 q-pr-sm">
                   <span
                     class="col-12 q-col-gutter-md row"
                     style="color: var(--teal-9)"
@@ -347,7 +358,7 @@ defineEmits<{
                       class="col ellipsis price-orange text-weight-bold"
                     >
                       <div class="text-caption app-text-muted-2">
-                        {{ $t('salePrice') }}
+                        {{ $t('productService.product.salePrice') }}
                       </div>
                       ฿{{ formatNumberDecimal(product.price, 2) }}
                       <q-tooltip
@@ -363,7 +374,7 @@ defineEmits<{
                       class="col ellipsis price-purple text-weight-bold"
                     >
                       <div class="text-caption app-text-muted-2">
-                        {{ $t('agentPrice') }}
+                        {{ $t('productService.product.agentPrice') }}
                       </div>
                       ฿{{ formatNumberDecimal(product.agentPrice, 2) }}
                       <q-tooltip
@@ -379,7 +390,7 @@ defineEmits<{
                       class="col ellipsis price-pink column"
                     >
                       <div class="text-caption app-text-muted-2">
-                        {{ $t('processingPrice') }}
+                        {{ $t('productService.product.processingPrice') }}
                       </div>
                       ฿{{ formatNumberDecimal(product.serviceCharge, 2) }}
                       <q-tooltip
@@ -393,10 +404,10 @@ defineEmits<{
                   </span>
 
                   <span class="col-9 q-mt-sm text-caption app-text-muted-2">
-                    {{ $t('processTime') }}
+                    {{ $t('productService.product.processingTime') }}
                   </span>
                   <span class="col-3 q-mt-sm text-caption app-text-muted-2">
-                    {{ product.process }} {{ $t('day') }}
+                    {{ product.process }} {{ $t('general.day') }}
                   </span>
                 </div>
               </div>
@@ -413,24 +424,26 @@ defineEmits<{
                 color="negative"
                 @click.stop="$emit('deleteProduct', productItems, index)"
               >
-                <q-tooltip>{{ $t('delete') }}</q-tooltip>
+                <q-tooltip>{{ $t('general.delete') }}</q-tooltip>
               </q-btn>
             </div>
           </div>
           <div v-else class="app-text-muted q-py-md q-px-lg">
-            {{ $t('noProduct') }}
+            {{ $t('productService.product.noProduct') }}
           </div>
         </div>
       </div>
     </q-expansion-item>
     <div class="q-py-sm q-px-md bordered-t row items-center justify-between">
       <div>
-        {{ $t('totalProductWork') }}
+        {{ $t('productService.service.totalProductWork') }}
         <span class="app-text-muted-2">
           {{ workName }}
         </span>
       </div>
-      <div>{{ productItems?.length ?? 0 }} {{ $t('list') }}</div>
+      <div>
+        {{ productItems?.length ?? 0 }} {{ $t('productService.service.list') }}
+      </div>
     </div>
   </div>
 </template>
diff --git a/src/components/04_product-service/WorkNameManagement.vue b/src/components/04_product-service/WorkNameManagement.vue
index eb41e833..f761a9ac 100644
--- a/src/components/04_product-service/WorkNameManagement.vue
+++ b/src/components/04_product-service/WorkNameManagement.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { onMounted, ref, watch } from 'vue';
+import { DeleteButton, EditButton, SaveButton, UndoButton } from '../button';
 // import { useI18n } from 'vue-i18n';
 // import { storeToRefs } from 'pinia';
 
@@ -72,63 +73,37 @@ watch(
             :readonly="!item.isEdit"
             :outlined="item.isEdit"
           ></q-input>
-          <q-btn
+          <EditButton
             v-if="!item.isEdit"
+            icon-only
             id="btn-edit-work-name"
-            icon="mdi-pencil-outline"
-            :disable="isWorkNameEdit()"
-            dense
-            flat
-            round
-            color="primary"
+            :disabled="isWorkNameEdit()"
             @click="item.isEdit = true"
-          >
-            <q-tooltip>{{ $t('edit') }}</q-tooltip>
-          </q-btn>
-          <q-btn
+          />
+          <SaveButton
             v-else
-            id="btn-edit-work-name"
-            icon="mdi-check"
-            dense
-            flat
-            round
-            color="primary"
+            icon-only
+            id="btn-save-work-name"
             @click="
               () => {
                 $emit('edit', item.id, { name: item.name }),
                   (item.isEdit = false);
               }
             "
-          >
-            <q-tooltip>{{ $t('save') }}</q-tooltip>
-          </q-btn>
-          <q-btn
+          />
+          <DeleteButton
             v-if="!item.isEdit"
+            icon-only
             id="btn-delete-work-name"
-            :disable="isWorkNameEdit()"
-            icon="mdi-trash-can-outline"
-            dense
-            flat
-            round
-            class="q-ml-md"
-            color="negative"
+            :disabled="isWorkNameEdit()"
             @click="$emit('delete', item.id)"
-          >
-            <q-tooltip>{{ $t('delete') }}</q-tooltip>
-          </q-btn>
-          <q-btn
+          />
+          <UndoButton
             v-else
-            id="btn-edit-work-name"
-            icon="mdi-undo"
-            dense
-            flat
-            round
-            class="q-ml-md"
-            color="negative"
+            icon-only
+            id="btn-undo-work-name"
             @click="assignClone"
-          >
-            <q-tooltip>{{ $t('cancel') }}</q-tooltip>
-          </q-btn>
+          />
         </q-item>
       </q-list>
       <div v-else class="flex col justify-center items-center">
@@ -148,7 +123,7 @@ watch(
         >
           <span class="q-px-lg flex items-center app-text-muted-2">
             <q-icon name="mdi-plus" class="q-mr-md" />
-            {{ $t('addWork') }}
+            {{ $t('productService.service.addWork') }}
           </span>
         </q-item>
       </div>
diff --git a/src/components/AddButton.vue b/src/components/AddButton.vue
index 676cb577..cc58b9d2 100644
--- a/src/components/AddButton.vue
+++ b/src/components/AddButton.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 defineProps<{
   label?: string;
+  i18nArgs?: Record<string, unknown>;
 }>();
 </script>
 
@@ -17,7 +18,9 @@ defineProps<{
         round
       />
     </div>
-    <div class="row q-mt-sm color-text" v-if="label">{{ $t(label) }}</div>
+    <div class="row q-mt-sm color-text" v-if="label">
+      {{ $t(label, { ...i18nArgs }) }}
+    </div>
   </div>
 </template>
 
diff --git a/src/components/DialogForm.vue b/src/components/DialogForm.vue
index 6f415533..4199b6a4 100644
--- a/src/components/DialogForm.vue
+++ b/src/components/DialogForm.vue
@@ -21,6 +21,7 @@ defineProps<{
   edit?: boolean;
 
   saveAmount?: number;
+  submitLabel?: string;
 
   isEdit?: boolean;
   tabsList?: { name: string; label: string }[];
@@ -216,6 +217,7 @@ const currentTab = defineModel<string>('currentTab');
               id="btn-form-submit"
               type="submit"
               solid
+              :label="submitLabel"
               :amount="saveAmount"
             />
           </div>
diff --git a/src/components/DrawerInfo.vue b/src/components/DrawerInfo.vue
index 124f47f7..621ffc47 100644
--- a/src/components/DrawerInfo.vue
+++ b/src/components/DrawerInfo.vue
@@ -109,8 +109,8 @@ function reset() {
             >
               {{
                 statusBranch === 'INACTIVE'
-                  ? $t('statusINACTIVE')
-                  : $t('statusACTIVE')
+                  ? $t('status.INACTIVE')
+                  : $t('status.ACTIVE')
               }}
             </text>
           </div>
diff --git a/src/components/GlobalDialog.vue b/src/components/GlobalDialog.vue
index ca4e7f05..c02f59cc 100644
--- a/src/components/GlobalDialog.vue
+++ b/src/components/GlobalDialog.vue
@@ -72,7 +72,7 @@ defineProps<{
           "
           :class="{ 'full-width': !action }"
           @click="cancel"
-          :label="cancelText || $t('cancel')"
+          :label="cancelText || $t('general.cancel')"
           v-close-popup
         />
 
@@ -83,7 +83,7 @@ defineProps<{
           :class="{ 'full-width': !cancel }"
           v-if="action"
           @click="action"
-          :label="actionText || $t('agree')"
+          :label="actionText || $t('general.ok')"
           :color="color || 'primary'"
           v-close-popup
         />
diff --git a/src/components/GlobalLoading.vue b/src/components/GlobalLoading.vue
index 7da9b628..cfdf287d 100644
--- a/src/components/GlobalLoading.vue
+++ b/src/components/GlobalLoading.vue
@@ -8,7 +8,7 @@ defineProps<{
   <q-inner-loading :showing="visibility" class="loader q-gutter-y-xl">
     <q-spinner size="80px" color="primary" />
     <span class="text-h5 text-weight-bold text-primary">
-      {{ $t('loading') }}
+      {{ $t('general.loading') }}
     </span>
   </q-inner-loading>
 </template>
diff --git a/src/components/NoData.vue b/src/components/NoData.vue
index 91666481..84bec850 100644
--- a/src/components/NoData.vue
+++ b/src/components/NoData.vue
@@ -20,10 +20,10 @@ defineProps<{
         text
           ? text
           : notFound
-            ? $t('notFound')
+            ? $t('general.notFound')
             : useField
-              ? $t('noField')
-              : $t('noData')
+              ? $t('general.noField')
+              : $t('general.noData')
       }}
     </div>
   </div>
diff --git a/src/components/ProfileBanner.vue b/src/components/ProfileBanner.vue
index a3dc214d..487fe934 100644
--- a/src/components/ProfileBanner.vue
+++ b/src/components/ProfileBanner.vue
@@ -21,7 +21,7 @@ defineProps<{
   useToggle?: boolean;
 
   menu?: { icon: string; color: string; bgColor: string }[];
-  tabsList?: { name: string; label: string }[];
+  tabsList?: { name: string | number; label: string }[];
 }>();
 
 defineEmits<{
@@ -40,7 +40,7 @@ const toggleStatus = defineModel<string>('toggleStatus', {
   default: 'CREATED',
 });
 
-const currentTab = defineModel<string>('currentTab');
+const currentTab = defineModel<string | number>('currentTab');
 
 const showOverlay = ref(false);
 </script>
@@ -161,7 +161,7 @@ const showOverlay = ref(false);
                   class="upload-overlay absolute-bottom flex items-center justify-center"
                   @click.stop="$emit('edit')"
                 >
-                  {{ $t('editImage') }}
+                  {{ $t('general.editImage') }}
                 </div>
               </div>
             </Transition>
@@ -192,7 +192,11 @@ const showOverlay = ref(false);
           </div>
 
           <!-- icon -->
-          <div class="row items-center q-pr-lg" style="z-index: 1">
+          <div
+            v-if="$q.screen.gt.xs"
+            class="row items-center q-pr-lg"
+            style="z-index: 1"
+          >
             <span
               v-if="useToggle && toggleTitle"
               class="q-mr-md app-text-muted-2"
diff --git a/src/components/TreeComponent.vue b/src/components/TreeComponent.vue
index ce462fb9..d25ed3b5 100644
--- a/src/components/TreeComponent.vue
+++ b/src/components/TreeComponent.vue
@@ -152,7 +152,7 @@ defineEmits<{
                       style="color: hsl(var(--green-6-hsl))"
                     />
                     <span class="col-9 q-px-md flex items-center">
-                      {{ $t('viewDetail') }}
+                      {{ $t('general.viewDetail') }}
                     </span>
                   </q-item>
 
@@ -173,7 +173,7 @@ defineEmits<{
                       style="color: hsl(var(--cyan-6-hsl))"
                     />
                     <span class="col-9 q-px-md flex items-center">
-                      {{ $t('edit') }}
+                      {{ $t('general.edit') }}
                     </span>
                   </q-item>
                   <q-item
@@ -198,7 +198,7 @@ defineEmits<{
                       }"
                     />
                     <span class="col-9 q-px-md flex items-center">
-                      {{ $t('delete') }}
+                      {{ $t('general.delete') }}
                     </span>
                   </q-item>
 
@@ -214,8 +214,8 @@ defineEmits<{
                         <span class="q-pl-md">
                           {{
                             node.status !== 'INACTIVE'
-                              ? $t('switchOnLabel')
-                              : $t('switchOffLabel')
+                              ? $t('general.open')
+                              : $t('general.close')
                           }}
                         </span>
                       </div>
diff --git a/src/components/button/AddButton.vue b/src/components/button/AddButton.vue
index e683e2b9..4a694a75 100644
--- a/src/components/button/AddButton.vue
+++ b/src/components/button/AddButton.vue
@@ -19,8 +19,8 @@ defineProps<{
     v-bind="{ ...$props, ...$attrs }"
     icon="mdi-plus"
     color="var(--info-bg)"
-    :title="iconOnly ? $t('add') : undefined"
+    :title="iconOnly ? $t('general.add') : undefined"
   >
-    {{ $t('add') }}
+    {{ $t('general.add') }}
   </MainButton>
 </template>
diff --git a/src/components/button/BackButton.vue b/src/components/button/BackButton.vue
index c99c36e4..e82dbcfb 100644
--- a/src/components/button/BackButton.vue
+++ b/src/components/button/BackButton.vue
@@ -19,8 +19,8 @@ defineProps<{
     v-bind="{ ...$props, ...$attrs }"
     icon="mdi-arrow-left"
     color="var(--info-bg)"
-    :title="iconOnly ? $t('back') : undefined"
+    :title="iconOnly ? $t('general.back') : undefined"
   >
-    {{ $t('back') }}
+    {{ $t('general.back') }}
   </MainButton>
 </template>
diff --git a/src/components/button/CancelButton.vue b/src/components/button/CancelButton.vue
index 3ba79db1..b9982fff 100644
--- a/src/components/button/CancelButton.vue
+++ b/src/components/button/CancelButton.vue
@@ -19,8 +19,8 @@ defineProps<{
     v-bind="{ ...$props, ...$attrs }"
     icon="mdi-close"
     color="var(--negative-bg)"
-    :title="iconOnly ? $t('cancel') : undefined"
+    :title="iconOnly ? $t('general.cancel') : undefined"
   >
-    {{ $t('cancel') }}
+    {{ $t('general.cancel') }}
   </MainButton>
 </template>
diff --git a/src/components/button/DeleteButton.vue b/src/components/button/DeleteButton.vue
index 80cfdb99..2792959b 100644
--- a/src/components/button/DeleteButton.vue
+++ b/src/components/button/DeleteButton.vue
@@ -19,8 +19,8 @@ defineProps<{
     v-bind="{ ...$props, ...$attrs }"
     icon="mdi-trash-can-outline"
     color="var(--negative-bg)"
-    :title="iconOnly ? $t('delete') : undefined"
+    :title="iconOnly ? $t('general.delete') : undefined"
   >
-    {{ $t('delete') }}
+    {{ $t('general.delete') }}
   </MainButton>
 </template>
diff --git a/src/components/button/EditButton.vue b/src/components/button/EditButton.vue
index ca249bcb..fb1df5af 100644
--- a/src/components/button/EditButton.vue
+++ b/src/components/button/EditButton.vue
@@ -19,8 +19,8 @@ defineProps<{
     v-bind="{ ...$props, ...$attrs }"
     icon="mdi-pencil-outline"
     color="var(--cyan-6-hsl)"
-    :title="iconOnly ? $t('edit') : undefined"
+    :title="iconOnly ? $t('general.edit') : undefined"
   >
-    {{ $t('edit') }}
+    {{ $t('general.edit') }}
   </MainButton>
 </template>
diff --git a/src/components/button/SaveButton.vue b/src/components/button/SaveButton.vue
index a36ae6ac..09e0e4d9 100644
--- a/src/components/button/SaveButton.vue
+++ b/src/components/button/SaveButton.vue
@@ -11,6 +11,8 @@ defineProps<{
   disabled?: boolean;
   dark?: boolean;
 
+  label?: string;
+
   amount?: number;
 }>();
 </script>
@@ -21,8 +23,9 @@ defineProps<{
     v-bind="{ ...$props, ...$attrs }"
     icon="mdi-content-save-outline"
     color="207 96% 32%"
-    :title="iconOnly ? $t('save') : undefined"
+    :title="iconOnly ? $t('general.save') : undefined"
   >
-    {{ $t('save') }} {{ amount && amount > 0 ? `(${amount})` : '' }}
+    {{ label || $t('general.save') }}
+    {{ amount && amount > 0 ? `(${amount})` : '' }}
   </MainButton>
 </template>
diff --git a/src/components/button/UndoButton.vue b/src/components/button/UndoButton.vue
index 66da0ed0..b9b18245 100644
--- a/src/components/button/UndoButton.vue
+++ b/src/components/button/UndoButton.vue
@@ -19,8 +19,8 @@ defineProps<{
     v-bind="{ ...$props, ...$attrs }"
     icon="mdi-arrow-left"
     color="var(--gray-8-hsl)"
-    :title="iconOnly ? $t('undo') : undefined"
+    :title="iconOnly ? $t('general.undo') : undefined"
   >
-    {{ $t('undo') }}
+    {{ $t('general.undo') }}
   </MainButton>
 </template>
diff --git a/src/components/form/AddressForm.vue b/src/components/form/AddressForm.vue
index 735b9415..62869818 100644
--- a/src/components/form/AddressForm.vue
+++ b/src/components/form/AddressForm.vue
@@ -164,7 +164,7 @@ watch(districtId, fetchSubDistrict);
         style="background-color: var(--surface-3)"
       />
 
-      {{ title || $t('formDialogTitlePersonnelAddress') }}
+      {{ (title && $t(title)) || $t('form.field.address') }}
 
       <div
         v-if="employee"
@@ -181,7 +181,7 @@ watch(districtId, fetchSubDistrict);
           }"
           @click="readonly ? '' : (sameWithEmployer = true)"
         >
-          {{ $t('formDialogToggleSameAddress') }}
+          {{ $t('customerEmployee.form.addressSame') }}
         </span>
         <span
           :id="`${prefixId}-custom`"
@@ -193,7 +193,7 @@ watch(districtId, fetchSubDistrict);
           }"
           @click="readonly ? '' : (sameWithEmployer = false)"
         >
-          {{ $t('formDialogToggleCustomAddress') }}
+          {{ $t('customerEmployee.form.addressCustom') }}
         </span>
       </div>
     </div>
@@ -201,7 +201,7 @@ watch(districtId, fetchSubDistrict);
     <div class="col-12 row q-col-gutter-y-md">
       <div class="col-12 app-text-muted-2">
         <q-icon size="xs" class="q-mr-xs" name="mdi-map-marker-outline" />
-        {{ addressTitle || $t('formDialogTitleAddressPure') }}
+        {{ addressTitle || $t('form.address') }}
       </div>
       <div class="col-12 row q-col-gutter-sm">
         <div class="row col-12" v-if="useWorkPlace">
@@ -220,8 +220,7 @@ watch(districtId, fetchSubDistrict);
                 ? []
                 : [
                     (val) =>
-                      (val && val.length > 0) ||
-                      $t('formDialogInputAddressValidate'),
+                      (val && val.length > 0) || $t('form.error.required'),
                   ]
             "
           />
@@ -234,17 +233,13 @@ watch(districtId, fetchSubDistrict);
           v-model="address"
           lazy-rules="ondemand"
           :dense="dense"
-          :label="$t('address')"
+          :label="$t('form.address')"
           :readonly="readonly || sameWithEmployer"
           :for="`${prefixId}-${indexId !== undefined ? `input-address-${indexId}` : 'input-address'}`"
           :rules="
             disabledRule
               ? []
-              : [
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputAddressValidate'),
-                ]
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
           "
         />
         <q-select
@@ -264,7 +259,7 @@ watch(districtId, fetchSubDistrict);
           lazy-rules="ondemand"
           class="col-md-3 col-6"
           :dense="dense"
-          :label="$t('province')"
+          :label="$t('form.province')"
           :options="provinceOptions"
           :readonly="readonly || sameWithEmployer"
           :hide-dropdown-icon="readonly || sameWithEmployer"
@@ -275,7 +270,9 @@ watch(districtId, fetchSubDistrict);
               : [
                   (val) =>
                     (val && val.length > 0) ||
-                    $t('formDialogInputProvinceValidate'),
+                    $t('form.error.selectField', {
+                      field: $t('form.province'),
+                    }),
                 ]
           "
           @filter="provinceFilter"
@@ -284,7 +281,7 @@ watch(districtId, fetchSubDistrict);
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey">
-                {{ $t('noResults') }}
+                {{ $t('general.noData') }}
               </q-item-section>
             </q-item>
           </template>
@@ -307,7 +304,7 @@ watch(districtId, fetchSubDistrict);
           lazy-rules="ondemand"
           class="col-md-3 col-6"
           :dense="dense"
-          :label="$t('district')"
+          :label="$t('form.district')"
           :options="districtOptions"
           :readonly="readonly || sameWithEmployer"
           :hide-dropdown-icon="readonly || sameWithEmployer"
@@ -318,7 +315,9 @@ watch(districtId, fetchSubDistrict);
               : [
                   (val) =>
                     (val && val.length > 0) ||
-                    $t('formDialogInputDistrictValidate'),
+                    $t('form.error.selectField', {
+                      field: $t('form.district'),
+                    }),
                 ]
           "
           @filter="districtFilter"
@@ -327,7 +326,7 @@ watch(districtId, fetchSubDistrict);
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey">
-                {{ $t('noResults') }}
+                {{ $t('general.noData') }}
               </q-item-section>
             </q-item>
           </template>
@@ -349,7 +348,7 @@ watch(districtId, fetchSubDistrict);
           class="col-md-3 col-6"
           v-model="subDistrictId"
           :dense="dense"
-          :label="$t('subDistrict')"
+          :label="$t('form.subDistrict')"
           :options="subDistrictOptions"
           :readonly="readonly || sameWithEmployer"
           :hide-dropdown-icon="readonly || sameWithEmployer"
@@ -360,7 +359,9 @@ watch(districtId, fetchSubDistrict);
               : [
                   (val) =>
                     (val && val.length > 0) ||
-                    $t('formDialogInputSubDistrictValidate'),
+                    $t('form.error.selectField', {
+                      field: $t('form.subDistrict'),
+                    }),
                 ]
           "
           @update:model-value="(v: string) => selectSubDistrict(v)"
@@ -369,7 +370,7 @@ watch(districtId, fetchSubDistrict);
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey">
-                {{ $t('noResults') }}
+                {{ $t('general.noData') }}
               </q-item-section>
             </q-item>
           </template>
@@ -381,7 +382,7 @@ watch(districtId, fetchSubDistrict);
           outlined
           :disable="!readonly"
           readonly
-          :label="$t('zipCode')"
+          :label="$t('form.zipCode')"
           class="col-md-2 col-6"
           :model-value="
             addrOptions.subDistrictOps
@@ -393,7 +394,7 @@ watch(districtId, fetchSubDistrict);
 
       <div class="col-12 app-text-muted-2">
         <q-icon size="xs" class="q-mr-xs" name="mdi-map-marker-outline" />
-        {{ addressTitleEN || $t('formDialogTitleAddressPureEN') }}
+        {{ addressTitleEN || $t('form.address', { suffix: '(EN)' }) }}
       </div>
       <div class="col-12 row q-col-gutter-sm">
         <div class="row col-12" v-if="useWorkPlace">
@@ -412,8 +413,7 @@ watch(districtId, fetchSubDistrict);
                 ? []
                 : [
                     (val) =>
-                      (val && val.length > 0) ||
-                      $t('formDialogInputAddressValidate'),
+                      (val && val.length > 0) || $t('form.error.required'),
                   ]
             "
           />
@@ -426,17 +426,13 @@ watch(districtId, fetchSubDistrict);
           :readonly="readonly || sameWithEmployer"
           outlined
           hide-bottom-space
-          :label="$t('address')"
+          :label="$t('form.address', { suffix: '(EN)' })"
           class="col-12"
           v-model="addressEN"
           :rules="
             disabledRule
               ? []
-              : [
-                  (val) =>
-                    (val && val.length > 0) ||
-                    $t('formDialogInputAddressValidate'),
-                ]
+              : [(val) => (val && val.length > 0) || $t('form.error.required')]
           "
         />
         <q-select
@@ -456,7 +452,7 @@ watch(districtId, fetchSubDistrict);
           option-label="nameEN"
           class="col-md-3 col-6"
           :dense="dense"
-          :label="$t('province')"
+          :label="$t('form.province')"
           :options="provinceOptions"
           :readonly="readonly || sameWithEmployer"
           :hide-dropdown-icon="readonly || sameWithEmployer"
@@ -467,7 +463,9 @@ watch(districtId, fetchSubDistrict);
               : [
                   (val) =>
                     (val && val.length > 0) ||
-                    $t('formDialogInputProvinceValidate'),
+                    $t('form.error.selectField', {
+                      field: $t('form.province'),
+                    }),
                 ]
           "
           @update:model-value="districtId = subDistrictId = zipCode = null"
@@ -476,7 +474,7 @@ watch(districtId, fetchSubDistrict);
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey">
-                {{ $t('noResults') }}
+                {{ $t('general.noData') }}
               </q-item-section>
             </q-item>
           </template>
@@ -498,7 +496,7 @@ watch(districtId, fetchSubDistrict);
           option-label="nameEN"
           class="col-md-3 col-6"
           :dense="dense"
-          :label="$t('district')"
+          :label="$t('form.district')"
           :options="districtOptions"
           :readonly="readonly || sameWithEmployer"
           :hide-dropdown-icon="readonly || sameWithEmployer"
@@ -509,7 +507,9 @@ watch(districtId, fetchSubDistrict);
               : [
                   (val) =>
                     (val && val.length > 0) ||
-                    $t('formDialogInputDistrictValidate'),
+                    $t('form.error.selectField', {
+                      field: $t('form.district'),
+                    }),
                 ]
           "
           @update:model-value="subDistrictId = zipCode = null"
@@ -518,7 +518,7 @@ watch(districtId, fetchSubDistrict);
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey">
-                {{ $t('noResults') }}
+                {{ $t('general.noData') }}
               </q-item-section>
             </q-item>
           </template>
@@ -540,7 +540,7 @@ watch(districtId, fetchSubDistrict);
           class="col-md-3 col-6"
           v-model="subDistrictId"
           :dense="dense"
-          :label="$t('subDistrict')"
+          :label="$t('form.subDistrict')"
           :options="subDistrictOptions"
           :readonly="readonly || sameWithEmployer"
           :hide-dropdown-icon="readonly || sameWithEmployer"
@@ -551,7 +551,9 @@ watch(districtId, fetchSubDistrict);
               : [
                   (val) =>
                     (val && val.length > 0) ||
-                    $t('formDialogInputSubDistrictValidate'),
+                    $t('form.error.selectField', {
+                      field: $t('form.subDistrict'),
+                    }),
                 ]
           "
           @update:model-value="(v: string) => selectSubDistrict(v)"
@@ -560,7 +562,7 @@ watch(districtId, fetchSubDistrict);
           <template v-slot:no-option>
             <q-item>
               <q-item-section class="text-grey">
-                {{ $t('noResults') }}
+                {{ $t('general.noData') }}
               </q-item-section>
             </q-item>
           </template>
@@ -574,7 +576,7 @@ watch(districtId, fetchSubDistrict);
           readonly
           :disable="!readonly"
           zip="zip-en"
-          :label="$t('zipCode')"
+          :label="$t('form.zipCode')"
           class="col-md-2 col-6"
           :model-value="
             addrOptions.subDistrictOps
diff --git a/src/components/shared/DatePicker.vue b/src/components/shared/DatePicker.vue
index 3c3d6dfd..2c03a712 100644
--- a/src/components/shared/DatePicker.vue
+++ b/src/components/shared/DatePicker.vue
@@ -62,16 +62,16 @@ function valueUpdate(value: string) {
     :disabled-dates="disabledDates"
     :teleport="true"
     :dark="$q.dark.isActive"
-    :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+    :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
     :enableTimePicker="false"
     v-model="model"
     class="col-2"
   >
     <template #year="{ value }">
-      {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+      {{ $i18n.locale === 'tha' ? value + 543 : value }}
     </template>
     <template #year-overlay-value="{ value }">
-      {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+      {{ $i18n.locale === 'tha' ? value + 543 : value }}
     </template>
     <template #trigger>
       <q-input
diff --git a/src/components/shared/PersonCard.vue b/src/components/shared/PersonCard.vue
index 5ccda543..10dc67c7 100644
--- a/src/components/shared/PersonCard.vue
+++ b/src/components/shared/PersonCard.vue
@@ -106,7 +106,7 @@ defineEmits<{
                   style="color: hsl(var(--green-6-hsl))"
                 />
                 <span class="col-9 q-px-md flex items-center">
-                  {{ $t('viewDetail') }}
+                  {{ $t('general.viewDetail') }}
                 </span>
               </q-item>
               <q-item
@@ -124,7 +124,7 @@ defineEmits<{
                   style="color: hsl(var(--cyan-6-hsl))"
                 />
                 <span class="col-9 q-px-md flex items-center">
-                  {{ $t('edit') }}
+                  {{ $t('general.edit') }}
                 </span>
               </q-item>
               <q-item
@@ -139,7 +139,7 @@ defineEmits<{
                   class="col-3 app-text-negative"
                 />
                 <span class="col-9 q-px-md flex items-center">
-                  {{ $t('delete') }}
+                  {{ $t('general.delete') }}
                 </span>
               </q-item>
               <q-item dense>
@@ -151,9 +151,7 @@ defineEmits<{
                       @click="$emit('toggleStatus', disabled === false)"
                     />
                     <span class="q-pl-md">
-                      {{
-                        !disabled ? $t('switchOnLabel') : $t('switchOffLabel')
-                      }}
+                      {{ !disabled ? $t('general.open') : $t('general.close') }}
                     </span>
                   </div>
                 </q-item-section>
diff --git a/src/i18n/en-US/address.ts b/src/i18n/en-US/address.ts
deleted file mode 100644
index 2f531b9c..00000000
--- a/src/i18n/en-US/address.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
-  address: 'Address',
-  province: 'Province',
-  district: 'District',
-  subDistrict: 'Sub-district',
-  zipCode: 'Zip Code',
-};
diff --git a/src/i18n/en-US/alert-dialog.ts b/src/i18n/en-US/alert-dialog.ts
deleted file mode 100644
index 43f189f6..00000000
--- a/src/i18n/en-US/alert-dialog.ts
+++ /dev/null
@@ -1,89 +0,0 @@
-export default {
-  warning: 'Warning',
-  warningForgetInput: 'You have incomplete information.',
-  warningClose:
-    "You haven't saved your data. Do you want to close this window?",
-
-  errorOccurred: 'An error occurred.',
-
-  confirmLogoutTitle: 'Confirm Logout',
-  confirmLogoutMessage: 'Do you want to log out?',
-
-  confirmChangeStatusTitle: 'Confirm Status Change',
-  confirmChangeStatusOnMessage: 'Do you want to open?',
-  confirmChangeStatusOffMessage: 'Do you want to close?',
-
-  // Backend
-  productGroupNotFound: 'Product group cannot be found.',
-  productGroupInUsed: 'Product group is in used.',
-
-  productNotFound: 'Product cannot be found.',
-  productInUsed: 'Product is in used.',
-
-  productTypeNotFound: 'Product type cannot be found.',
-  productGroupAssociatedBadReq: 'Product group associated cannot be found.',
-  productTypeInUsed: 'Product type is in used.',
-  productGroupBadReq: 'Product group cannot be found.',
-
-  serviceNotFound: 'Service cannot be found.',
-  someProductBadReq: 'Some product not found.',
-  serviceInUsed: 'Service is in used.',
-
-  workNotFound: 'Work cannot be found.',
-  workInUsed: 'Work is in used.',
-
-  branchContactNotFound: 'Branch contact cannot be found.',
-  branchBadReq: 'Branch cannot be found.',
-  branchNotFound: 'Branch cannot be found.',
-
-  cantMakeHQAndBranchSameTime:
-    'Cannot make this as headquaters and branch at the same time.',
-  branchInUsed: 'Branch is in used.',
-  oneOrMoreUserBadReq: 'One or more user cannot be found.',
-  oneOrMoreBranchBadReq: 'One or more branch cannot be found.',
-
-  customerBranchNotFound: 'Customer branch cannot be found.',
-  customerBranchInUsed: 'Customer branch is in used.',
-
-  customerNotFound: 'Customer cannot be found.',
-  customerInUsed: 'Customer is in used.',
-  oneOrMoreBranchMissing: 'One or more branch cannot be delete and is missing.',
-
-  employeeCheckupNotFound: 'Employee checkup cannot be found.',
-  provinceNotFound: 'Province cannot be found.',
-  employeeNotFound: 'Employee cannot be found.',
-  employeeBadReq: 'Employee cannot be found.',
-  employeeInUsed: 'Employee is in used.',
-
-  someProvinceNotFound: 'Some province cannot be found.',
-  employeeOtherNotFound: 'Employee other info cannot be found.',
-
-  employeeWorkNotFound: 'Employee work cannot be found.',
-
-  parentMenuBadReq: 'Parent menu not found.',
-  menuNotFound: 'Menu cannot be found.',
-  menuBadReq: 'Menu cannot be found.',
-  menuComponentNotFound: 'Menu component cannot be found.',
-  roleMenuNotFound: 'Role menu cannot be found.',
-
-  userNotFound: 'User cannot be found.',
-  userInUsed: 'User is in used.',
-
-  unknowHowToVerify: 'Unknown how to verify identity.',
-  noPermission:
-    'You do not have permission to access or perform with this resource.',
-  noPermissionToAccess:
-    'You do not have permission to access or perform with this resource.',
-
-  relationProvinceNotFound: 'Province cannot be found.',
-  relationDistrictNotFound: 'District cannot be found.',
-  relationSubDistrictNotFound: 'Sub-district cannot be found.',
-
-  relationHQNotFound: 'Headquarters cannot be found.',
-
-  relationCustomerNotFound: 'Customer cannot be found.',
-
-  relationCustomerBranchNotFound: 'Customer Branch cannot be found.',
-
-  sameBranchCodeExists: 'This Head Office Abbreviation is already in use.',
-};
diff --git a/src/i18n/en-US/bank.ts b/src/i18n/en-US/bank.ts
deleted file mode 100644
index b2d2d1ac..00000000
--- a/src/i18n/en-US/bank.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  accountNumber: 'Account Number',
-  bankBranch: 'Bank Branch',
-  accountName: 'Account Name',
-  bankType: 'Bank Type',
-  accountStatus: 'Account Status ',
-  bankBookNo: 'Bank Book',
-};
diff --git a/src/i18n/en-US/branch.ts b/src/i18n/en-US/branch.ts
deleted file mode 100644
index 599e4e1c..00000000
--- a/src/i18n/en-US/branch.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export default {
-  branchManagementCaption: 'Manage All Branch',
-  branchInHQ: 'Branch within the main office',
-
-  office: 'Office',
-  branchLabel: 'Branch',
-  branchHQLabel: 'Headquarters',
-  branchName: 'Branch Name',
-  branchAdd: 'Add Branch / Head Office',
-  branchManagement: 'Branch Management',
-  branchNoMainOfficeYet: 'No head office yet?',
-  branchClickToCreateMainOffice: 'Click "+" to create head office.',
-
-  totalEmployee: 'Total Employee',
-
-  branchLabelCode: 'Branch Code',
-  branchLabelName: 'Branch Name',
-  branchLabelTel: 'Branch Telephone No',
-  branchLabelAddress: 'Branch Address',
-  branchLabelType: 'Branch Type',
-  branchLabelStatus: 'Branch Status',
-
-  registeredBranch: 'Registered Branch',
-
-  branchStatTitle: 'Summary data of branch',
-
-  branchAdminTitle: 'Branch Admin',
-  branchAdminNone: 'No admin found',
-};
diff --git a/src/i18n/en-US/customer-main-page.ts b/src/i18n/en-US/customer-main-page.ts
deleted file mode 100644
index 864536e8..00000000
--- a/src/i18n/en-US/customer-main-page.ts
+++ /dev/null
@@ -1,62 +0,0 @@
-export default {
-  customerManagement: 'Customers Management',
-  customerManagementCaption: 'Manage All Customer',
-
-  customerEmployerTooltipTitle: 'No employer data yet',
-  customerEmployeeTooltipTitle: 'No employee data yet',
-  customerEmployerTooltipCaption: 'Click + to add an employer',
-  customerEmployeeTooltipCaption: 'Click + to add an employee',
-  customerEmployerAdd: 'Add employer',
-  customerEmployeeAdd: 'Add employee',
-
-  nameEmployee: 'Employee',
-
-  EMPLOYER: 'Employer',
-  EMPLOYEE: 'Employee',
-  customerEmployerStatTitle: 'Employer data summary',
-  customerEmployeeStatTitle: 'Employee data summary',
-
-  customerCardUserType: 'Employer type',
-  customerLegalEntity: 'Legal entity',
-  customerNaturalPerson: 'Natural person',
-  businessInformation: 'Business information',
-  inputCustomerAddress: 'Employment office location (within the area)',
-  businessType: 'Business type in Thai',
-  businessTypeEN: 'Business type in English',
-  businessTypePure: 'Business Type',
-
-  jobPosition: 'Job position in Thai',
-  jobPositionEN: 'Job position in English',
-  jobDescription: 'Job description',
-  payDay: 'Payday',
-  payRate: 'Daily wage rate',
-  salesPerson: 'Salesperson',
-
-  // เกี่ยวกับ About
-  about: 'About',
-  branchCode: 'Branch Code',
-  legalEntityCode: 'Legal Entity Code',
-  taxNo: 'Tax Identification Number',
-  customerName: 'Customer Thai Name',
-  customerEnglishName: 'Customer English Name',
-  registerDate: 'Register Date',
-  authorizedCapital: 'Registered Capital',
-  registerName: 'RegisterName',
-
-  customerBranchFormTab: 'Branch ',
-
-  customerNameTh: 'Company/Legal Entity Name in Thai',
-  customerNameEn: 'Company/Legal Entity Name in English',
-  customerBranchName: 'Company/Legal Entity Name',
-
-  allEmployee: 'All Employee',
-
-  editHistory: 'Edit History',
-  time: 'Time',
-  editBy: 'Edit by',
-  valueBefore: 'Before',
-  valueAfter: 'After',
-
-  serviceWorkTotal: 'Service Work Total',
-  priceInformation: 'Price Information',
-};
diff --git a/src/i18n/en-US/drawer-component.ts b/src/i18n/en-US/drawer-component.ts
deleted file mode 100644
index b511b0ed..00000000
--- a/src/i18n/en-US/drawer-component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  drawerDashboard: 'Dashboard',
-  drawerBranchManagement: 'Branch Management',
-  drawerPersonnelManagement: 'Personnel Management',
-  drawerCustomerManagement: 'Customer Management',
-  drawerProductsAndServices: 'Products and Services',
-  drawerQuotation: 'Quotation',
-  drawerRequestList: 'Request List',
-  drawerWorkOrder: 'Work Order',
-  drawerInvoice: 'Invoice',
-  drawerAccountingLedger: 'Accounting Ledger',
-  drawerReport: 'Report',
-};
diff --git a/src/i18n/en-US/employer-dialog.ts b/src/i18n/en-US/employer-dialog.ts
deleted file mode 100644
index 3a618ea9..00000000
--- a/src/i18n/en-US/employer-dialog.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-  corporationThaiName: 'Corporation ThaiName',
-  corporationEnglishName: 'Corporation EnglishName',
-
-  corporationThai: 'Company name in Thai',
-  corporationEnglish: 'English company name',
-
-  companyOwnerName: 'Company Owner Name',
-
-  corporation: 'Corporation',
-};
diff --git a/src/i18n/en-US/form-dialog.ts b/src/i18n/en-US/form-dialog.ts
deleted file mode 100644
index 7b5fefa2..00000000
--- a/src/i18n/en-US/form-dialog.ts
+++ /dev/null
@@ -1,203 +0,0 @@
-export default {
-  inputValidate: 'Please enter ',
-  selectValidate: 'Please select ',
-
-  // Branch & HQ
-  formDialogHqAbbreviation: 'Head Office Abbreviation',
-  formDialogInputHqAbbreviation: 'Please enter Head Office Abbreviation',
-
-  formDialogTitleImg: 'Office Image',
-  formDialogBtnImg: 'Add Office Image',
-
-  formDialogTitleViewHeadOffice: 'Head Office',
-  formDialogTitleViewSubBranch: 'Branch',
-
-  formDialogTitleCreateHeadOffice: 'Add Headquarters',
-  formDialogTitleEditHeadOffice: 'Edit Headquarters',
-  formDialogTitleCreateSubBranch: ' Add Sub-branch',
-  formDialogTitleEditSubBranch: 'Edit Sub-branch',
-
-  formDialogTitleAddress: ' Head office address information',
-
-  formDialogTitleLocation: 'Head Office Location',
-  formDialogTitleInformation: 'Basic Information',
-  formDialogTitleContact: 'Contact Information',
-  formDialogTitlePersonal: 'Personal Information',
-
-  formDialogTitleProductStatus: 'Product Status',
-
-  formDialogInputCode: 'Head Office Code',
-  formDialogInputTaxNo: 'Tax Identification Number',
-  formDialogInputTaxNoValidate: 'Please enter the Tax Identification Number',
-
-  formDialogInputNameHq: 'Head Office Name',
-  formDialogInputNameSubBranch: 'Branch Name',
-  formDialogInputNameHqValidate: 'Please enter the Head Office Name',
-  formDialogInputNameSubBranchValidate: 'Please enter the Branch Name',
-
-  formDialogInputNameHqEn: 'Head Office Name (English)',
-  formDialogInputNameSubBranchEn: 'Branch Name (English)',
-  formDialogInputNameHqEnValidate:
-    'Please enter the Head Office Name (English)',
-  formDialogInputNameSubBranchEnValidate:
-    'Please enter the Branch Name (English)',
-
-  formDialogInputTelephoneContact: 'Contact Telephone Number',
-  formDialogUploadQrCode: 'Upload QR Code',
-
-  formDialogInputTelephoneHq: 'Head Office Telephone Number',
-  formDialogInputTelephoneSubBranch: 'Branch Telephone Number',
-  formDialogInputEmailHq: 'Head Office Contact Email',
-  formDialogInputEmailSubBranch: 'Branch Contact Email',
-
-  formDialogInputContactName: 'Contact',
-
-  formDialogInputOperatingHours: 'Operating Hours',
-
-  formDialogInputAddressValidate: 'Please enter the address',
-  formDialogInputProvinceValidate: 'Please enter the province',
-
-  formDialogInputDistrictValidate: 'Please enter the district',
-  formDialogInputSubDistrictValidate: 'Please enter the sub-district',
-
-  formDialogBtnLocation: 'Start sharing location',
-
-  // Personnel
-  formDialogTitleAddressPersonnel: 'Personnel Address',
-
-  formDialogBtnEditProfile: 'Edit Profile',
-  formDialogBtnUploadProfile: 'Upload Image',
-  formDialogTitleUserStatus: 'User Status',
-
-  formDialogInputHqIdValidate: 'Please select head office',
-  formDialogInputBrId: 'Branch Code',
-  formDialogInputUserType: 'User Type',
-  formDialogInputUserTypeValidate: 'Please select user type',
-  formDialogInputUserRole: 'User Role',
-  formDialogInputUserRoleValidate: 'Please select user role',
-  formDialogInputUsername: 'Username',
-  formDialogInputUsernameValidate: 'Please enter username',
-  formDialogInputUserCode: 'Personnel Code',
-
-  formDialogInputPrefixName: 'Prefix',
-  formDialogInputPrefixNameValidate: 'Please select prefix',
-  formDialogPrefixName: 'prefix',
-  formDialogTitlePersonnel: 'Personnel Information',
-  formDialogInputFirstName: 'First Name',
-  formDialogInputMidName: 'Middle Name',
-  formDialogInputFirstNameValidate: 'Please enter first name',
-  formDialogInputLastName: 'Last Name',
-  formDialogInputLastNameValidate: 'Please enter last name',
-  formDialogInputFirstNameEN: 'First Name (EN)',
-  formDialogInputMidNameEN: 'Middle Name (EN)',
-  formDialogInputFirstNameENValidate: 'Please enter first name',
-  formDialogInputLastNameEN: 'Last Name (EN)',
-  formDialogInputLastNameENValidate: 'Please enter last name',
-  formDialogInputTelephone: 'Telephone Number',
-  formDialogInputEmail: 'Email',
-  formDialogInputGender: 'Gender',
-  formDialogInputBirthDate: 'Birth Date',
-  formDialogInputAge: 'Age',
-  formDialogInputNationality: 'Nationality',
-
-  formDialogTitlePersonnelAddress: 'Personnel Address',
-  formDialogTitleEmployerAddress: 'Employer Address',
-  formDialogTitleAddressPure: 'Address',
-  formDialogTitleAddressPureEN: 'Address in English',
-
-  formDialogTitleByType: 'Job Information',
-  formDialogInputRegisNo: 'Registration Number',
-  formDialogInputStartDate: 'Start Date',
-  formDialogInputRetireDate: 'Retire Date',
-  formDialogInputResponsibleArea: 'Responsible Area',
-  formDialogInputDiscount: 'Discount Condition',
-  formDialogInputSourceNationality: 'Source Nationality',
-  formDialogInputImportNationality: 'Import Nationality',
-  formDialogInputTrainingPlace: 'Training Place',
-  formDialogInputCheckpoint: 'Checkpoint',
-  formDialogAttachment: 'Attachment Document',
-
-  formDialogCustomerBranch: 'Branch Information',
-
-  formDialogAddress: 'Address in Thai',
-  formDialogAddressEN: 'Address in English',
-
-  // Customer
-  formDialogCustomerName: 'Customer Name',
-  formDialogEmployerID: 'Employer ID',
-  formDialogEmployerBranchCode: 'Employer code',
-
-  formDialogEmployeeID: 'Employee ID',
-  formDialogEmployeeNRCNo: 'Non-Thai Identification Number (N.R.C. No.)',
-
-  formDialogToggleSameAddress: "Employer's Address",
-  formDialogToggleCustomAddress: 'Custom',
-
-  formDialogTitleHealthCheck: 'Health Checkup Results',
-  formDialogInputCheckupRes: 'Health Checkup Results',
-  formDialogInputCheckupType: 'Type of Checkup Results',
-  formDialogInputHospital: 'Hospital',
-  formDialogInputRemark: 'Remark',
-  formDialogInputMedicalBenefit: 'Type of Medical Benefits',
-  formDialogInputInsuranceCompany: 'Insurance Company',
-  formDialogInputCoverageStartDate: 'Insurance Purchase Date',
-  formDialogInputCoverageExpiretDate: 'Expiration Date',
-  personalInfo: 'Personal Information',
-  healthCheck: 'Health Checkup Results and Health Insurance',
-  workHistory: 'Work History',
-  other: 'Other',
-
-  formDialogInputCheckupResValidate: 'Please Enter Health Checkup Results',
-
-  formDialogInputOwnerName: 'Employer Name',
-  formDialogInputJobPosition: 'Job Position',
-  formDialogInputJobType: 'Job Type',
-  formDialogInputWorkPlace: 'Work Place',
-  formDialogInputWorkUntil: 'Permission to work until',
-  formDialogInputWorkPermitNo: 'Work Permit Number',
-  formDialogInputWorkPermitIssueDate: 'Work Permit Issuance Date',
-  formDialogInputWorkPermitExpireDate: 'Work Permit Expiration Date',
-
-  formDialogTitleFamilyHistory: 'Family History',
-  formDialogTitleFamilyHistoryDad: 'Father',
-  formDialogTitleFamilyHistoryMom: 'Mother',
-  formDialogInputCitizenId:
-    "Worker's National Identification Number (National ID Number from Country of Origin)",
-  formDialogInputFamilyBirthPlace: 'Place of Birth',
-
-  formDialogTitlePassport: 'Passport Information OCR',
-  formDialogInputPassportType: 'Passport Type',
-  formDialogInputPassportNo: 'Passport Number',
-  formDialogInputPassportRef:
-    'Previous Passport Reference Number (in case of passport change)',
-  formDialogInputWPassportPlace: 'Passport Issuance Place',
-  formDialogInputPassportCountry: 'Issuing Country',
-  formDialogInputPassportIssuance: 'Passport Issuance Date',
-  formDialogInputPassportExpire: 'Passport Expiration Date',
-
-  formDialogTitleVisa: 'Visa Information OCR',
-  formDialogInputVisaType: 'Visa Type',
-  formDialogInputVisaNo: 'Visa Number',
-  formDialogInputVisaIssuance: 'Issuance Date',
-  formDialogInputVisaExpire: 'Valid Until',
-  formDialogInputVisaPlace: 'Visa Issuance Place',
-  formDialogInputVisaStayUntil: 'Permitted to Stay Until',
-  formDialogInputVisaTM6: 'TM.6 Number (Arrival)',
-  formDialogInputVisaEnter: 'Date of Entry into the Country',
-
-  formDialogTabCheckup: 'Checkup ',
-  formDialogTabWork: 'Work  ',
-
-  formDialogEmployerRanchCode: 'Branch Code',
-
-  formTitleCustomer: 'Company {msg}',
-  formTitleCustomerNaturalPerson: 'Name {msg}',
-  formTitleBranch: 'Branch {msg}',
-
-  passportExpire: 'Passport Expiration Date',
-
-  pleaseInformation: 'Please enter information',
-
-  // product
-  formDialogTitleUseStatus: 'Status',
-};
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
deleted file mode 100644
index 6b254d39..00000000
--- a/src/i18n/en-US/index.ts
+++ /dev/null
@@ -1,247 +0,0 @@
-import main from './main';
-import drawerComponent from './drawer-component';
-import personnelMainPage from './personnel-main-page';
-import address from './address';
-import branch from './branch';
-import user from './user';
-import formDialog from './form-dialog';
-import status from './status';
-import customerMainPage from './customer-main-page';
-import employerDialog from './employer-dialog';
-import otherDocument from './other-document';
-import productService from './product-service';
-import alertDialog from './alert-dialog';
-import bank from './bank';
-
-export default {
-  ok: 'Confirm',
-  agree: 'Ok',
-  cancel: 'Cancel',
-  failed: 'Failed',
-  close: 'close',
-  success: 'Success',
-  search: 'Search',
-  back: 'Back',
-  undo: 'Undo',
-  loading: 'Loading',
-  download: 'Download',
-  save: 'Save',
-  edit: 'Edit',
-  delete: 'Delete',
-  telephone: 'Telephone',
-  viewDetail: 'View Detail',
-  noData: 'No Data',
-  notFound: 'Data Not Found',
-  code: 'Code',
-  status: 'Status',
-  type: 'Type',
-  switchOnLabel: 'Open',
-  switchOffLabel: 'Close',
-  language: 'Language',
-  languageName: 'English',
-  select: 'Select',
-  all: 'All',
-  displayField: 'Display Fields',
-  deleteConfirmTitle: 'Comfirm Deletion',
-  deleteConfirmMessage: 'Do you want to delete this item?',
-  headquartersNotEstablished:
-    'You have not yet established the headquarters. You need to establish the headquarters before you can create personnel.',
-
-  changePassword: 'Change Password',
-  signature: 'Signature',
-  addSignature: 'Add Signature',
-  clear: 'Clear',
-  detail: 'Detail',
-  add: 'Add',
-  name: 'Name',
-  editPersonalInfo: 'Edit personal infomation',
-  logout: 'Logout',
-  list: 'Item',
-  manage: 'Manage',
-  mode: 'Mode',
-  theme: 'Theme',
-  light: 'Light',
-  dark: 'Dark',
-  uploadFile: 'Upload File',
-  newUpload: 'New Upload',
-  baseOnDevice: 'Base on Device',
-  person: 'Person',
-  recordsPage: 'Showing {resultcurrentPage} out of {total} records',
-  showing: 'Showing',
-  dataSum: 'Data Summaries',
-  createdAt: 'Created At',
-  noResults: 'No Data',
-  notRecorded: 'You have not yet saved.',
-  editImage: 'Edit Image',
-  bankBook: 'Bank Book',
-  use: 'In Use',
-  notUse: 'Not Use',
-  orderNumber: 'Order Number',
-  saveSuccessful: 'Save Successful',
-  ...status,
-  ...main,
-  ...address,
-  ...branch,
-  ...user,
-  ...drawerComponent,
-  ...personnelMainPage,
-  ...formDialog,
-  ...customerMainPage,
-  ...employerDialog,
-  ...otherDocument,
-  ...productService,
-  ...alertDialog,
-  ...bank,
-
-  menu: {
-    dms: 'Document Management',
-  },
-  form: {
-    title: {
-      info: '{name}',
-      create: 'Create {name}',
-      edit: 'Edit {name}',
-    },
-    address: 'Address {suffix}',
-    error: {
-      required: 'This field is required.',
-      please: 'Please enter {msg} correct information.',
-      invalid: 'Invalid value.',
-      invalidCustomeMessage: 'Invalid value. {msg}',
-    },
-    warning: {
-      title: 'Warning {msg}',
-      unsave:
-        'You have unsaved changes. Are you sure you want to close this window?',
-    },
-    info: {
-      cantChange:
-        'The {field} cannot be changed later. Do you want to use "{name}"',
-    },
-  },
-  customer: {
-    employer: 'Employer',
-    employee: 'Employee',
-    form: {
-      selectType: 'Select Customer Type',
-      group: {
-        basicInfo: 'Basic Information',
-        branch: 'Branch',
-      },
-
-      instance: '{index} instance',
-
-      prefix: {
-        mr: 'Mr.',
-        mrs: 'Mrs.',
-        miss: 'Miss.',
-      },
-
-      firstName: 'First Name in Thai',
-      lastName: 'Last Name in Thai',
-      firstNameEN: 'First Name in English',
-      lastNameEN: 'Last Name in English',
-
-      cardNumber: 'ID Card Number',
-
-      prefixName: 'Prefix',
-      legalPersonNo: 'Legal Entity Registration Number',
-      registerName: 'Company Name',
-      registerNameEN: 'Company Name (EN)',
-      registerDate: 'Registered On',
-      registerCompanyName: 'Registered Name',
-      authorizedCapital: 'Authorized Capital',
-
-      workplace: 'Workplace',
-      workplaceEN: 'Workplace (EN)',
-      address: 'Address',
-      addressEN: 'Address (EN)',
-      branchCode: 'Branch Code',
-      customerCode: 'Employer Code',
-      legalPersonCode: 'Legal Entity Code',
-
-      codeAbbrev: 'Company Abbreviation',
-      codeNumber: 'Company Number',
-      registeredBranch: 'Registered Branch',
-      customerName: 'Company Name',
-      customerNameEN: 'Company Name (EN)',
-      personName: 'Customer Name',
-      taxIdentificationNumber: 'Tax Identification Number',
-      branch: {
-        title: 'Branch {name}',
-      },
-      headQuarters: {
-        title: 'สำนักงานใหญ่',
-      },
-    },
-
-    table: {
-      orderNumber: 'No.',
-      fullname: 'Full Name',
-      businessTypePure: 'Business Type',
-      address: 'Address',
-      workPlace: 'Workplace',
-      contactName: 'Contact Name',
-      contactPhone: 'Contact Phone',
-    },
-  },
-  customerBranch: {
-    tab: {
-      main: 'About',
-      address: 'Address',
-      business: 'Business',
-      contact: 'Contact',
-      attachment: 'Attachment',
-    },
-    form: {
-      title: 'Branch',
-      no: 'Branch No.',
-      code: 'Branch Code',
-      taxNo: 'Tax Identification Number',
-      name: 'Branch Name',
-      nameEN: 'Branch Name (EN)',
-      authorizedCapital: 'Authorized Capital',
-      registerName: 'Registered Name',
-      registerDate: 'Registered Date',
-      telephone: 'Telephone No.',
-      attachment: 'Attachment',
-    },
-  },
-  productService: {
-    group: {
-      addTitle: 'Add Product and Service Group',
-    },
-    type: {
-      addTitle: 'Add Product and Service Type',
-    },
-    service: {
-      title: 'Service',
-      showTotalPrice: 'Show Total Price',
-    },
-    product: {
-      noProduct: 'No Product',
-      allProduct: 'All Product',
-    },
-  },
-
-  backend: {
-    sameBranchCodeExists: 'This Head Office Abbreviation is already in use.',
-  },
-
-  dialog: {
-    title: {
-      incompleteDataEntry: 'Incomplete Data Entry',
-    },
-    message: {
-      incompleteDataEntry: 'Incomplete data entry on {tap} page',
-    },
-    action: {
-      ok: 'OK',
-      save: 'Save',
-      saveAndClose: 'Save and Close',
-      close: 'Close',
-      delete: 'Delete',
-      cancel: 'Cancel',
-    },
-  },
-};
diff --git a/src/i18n/en-US/main.ts b/src/i18n/en-US/main.ts
deleted file mode 100644
index 1ca94e00..00000000
--- a/src/i18n/en-US/main.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export default {
-  mainBranchTitle: 'Branch Management',
-  mainBranchCaption: 'Manage branches within the organization.',
-
-  mainPersonnelTitle: 'Personnel Management',
-  mainPersonnelCaption: 'Manage personnel within the organization.',
-
-  mainCustomerTitle: 'Customer Management',
-  mainCustomerCaption: 'Manage customer within the organization.',
-
-  mainProductTitle: 'Products & Services',
-  mainProductCaption: 'List of products and services.',
-
-  mainQuotationTitle: 'Quotation',
-  mainQuotationCaption: 'List of quotations.',
-
-  mainRequestTitle: 'Purchase Order',
-  mainRequestCaption: 'List of purchase order.',
-
-  mainOrderTitle: 'Request',
-  mainOrderCaption: 'List of requests.',
-
-  mainReceiptTitle: 'Bill of Lading',
-  mainReceiptCaption: 'Bill of lading list.',
-
-  mainFinanceTitle: 'Financial Management',
-  mainFinanceCaption: 'List of all accounts.',
-
-  mainDashboardTitle: 'Dashboard',
-  mainDashboardCaption: 'Statistical information.',
-
-  mainReportTitle: 'Report',
-  mainReportCaption: 'List of report.',
-};
diff --git a/src/i18n/en-US/object.ts b/src/i18n/en-US/object.ts
deleted file mode 100644
index b01a3a62..00000000
--- a/src/i18n/en-US/object.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-export default {
-  branchManagement: {
-    label: {
-      branchManagementCaption: 'Manage All Branch',
-      branchLabel: 'Branch',
-      branchHQLabel: 'Headquarters',
-    },
-
-    table: {
-      title: {
-        office: 'Office',
-        ddress: 'Address',
-        //   formDialogInputTelephone: 'Telephone Number',
-        telephone: 'Telephone Number',
-        type: 'Type',
-      },
-    },
-
-    input: {
-      label: {
-        search: 'Search',
-      },
-    },
-
-    manu: {
-      branchName: 'Branch Name',
-      branchLabelTel: 'Branch Telephone No',
-      branchLabelAddress: 'Branch Address',
-      branchLabelType: 'Branch Type',
-      viewDetail: 'View Detail',
-      edit: 'Edit',
-      delete: 'Delete',
-      switchOnLabel: 'Open',
-      switchOffLabel: 'Close',
-    },
-  },
-
-  formDialog: {
-    section: {
-      formDialogTitleInformation: 'Basic Information',
-      formDialogTitleContact: 'Contact Information',
-      formDialogTitleAddress: ' Head office address information',
-      formDialogTitleLocation: 'Head Office Location',
-      formDialogTitleImg: 'Office Image',
-      subtopic: {
-        formDialogAddress: 'Address in Thai',
-        formDialogAddressEN: 'Address in English',
-      },
-    },
-    input: {
-      formDialogInputCode: 'Head Office Code',
-      formDialogInputBrId: 'Branch Code',
-      formDialogInputTaxNo: 'Tax Identification Number',
-      formDialogInputNameSubBranch: 'Branch Name',
-      formDialogInputNameSubBranchEn: 'Branch Name (English)',
-      formDialogInputEmailSubBranch: 'Branch Contact Email',
-      formDialogInputTelephoneSubBranch: 'Branch Telephone Number',
-      formDialogInputContactName: 'Contact',
-      formDialogInputTelephoneContact: 'Contact Telephone Number',
-      address: 'Address',
-      province: 'Province',
-      district: 'District',
-      subDistrict: 'Sub-district',
-      zipCode: 'Zip Code',
-    },
-
-    button: {
-      formDialogUploadQrCode: 'Upload QR Code',
-      formDialogBtnLocation: 'Start sharing location',
-      formDialogBtnImg: 'Add Office Image',
-      agree: 'Ok',
-      cancel: 'Cancel',
-    },
-  },
-};
diff --git a/src/i18n/en-US/other-document.ts b/src/i18n/en-US/other-document.ts
deleted file mode 100644
index 55acbe1d..00000000
--- a/src/i18n/en-US/other-document.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
-  otherDocument: 'Other Document',
-  additionalEmployerDocument: 'Additional Employer Documents',
-};
diff --git a/src/i18n/en-US/personnel-main-page.ts b/src/i18n/en-US/personnel-main-page.ts
deleted file mode 100644
index af903d4b..00000000
--- a/src/i18n/en-US/personnel-main-page.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export default {
-  personnelTitle: 'Personnel',
-  personnelManagement: 'Personnel Management',
-  personnelManagementCaption: 'Manage All Personnel',
-
-  personnelTooltipTitle: 'No personnel yet?',
-  personnelTooltipCaption: 'Click + to add a personnel',
-  personnelAdd: 'Add personnel',
-
-  USER: 'Employee',
-  MESSENGER: 'Courier',
-  DELEGATE: 'Delegate',
-  AGENCY: 'Agency',
-
-  personnelStatTitle: 'Summary data',
-
-  personnelCardUserType: 'Type',
-  personnelCardTelephone: 'Telephone',
-  personnelCardAge: 'Age',
-  personnelCardNationality: 'Nationality',
-};
diff --git a/src/i18n/en-US/product-service.ts b/src/i18n/en-US/product-service.ts
deleted file mode 100644
index ef3ebe5d..00000000
--- a/src/i18n/en-US/product-service.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-export default {
-  productAndService: 'Product and Service Groups',
-  productAndServiceAll: 'All Product and Service Groups',
-  productAndServiceType: 'Product and Service Type',
-  productAndServiceGroupCode: 'Product and Service Group Code',
-  productAndServiceGroupName: 'Product and Service Group Name',
-  productAndServiceTypeCode: 'Product and Service Type Code',
-  productAndServiceTypeName: 'Product and Service Type Name',
-
-  service: 'Service',
-  product: 'Product',
-  productGroup: 'Product Group: {name}',
-  productType: 'Product Type: {name}',
-
-  messageTooltipNoProduct: 'No Product and Service Groups',
-  messageTooltipProductCreate: 'Click + for product and service groups.',
-
-  productCreate: 'Create Product and Service Group',
-
-  addProduct: 'Add Product and Service Group',
-
-  productCode: 'Product Code',
-  productName: 'Product Name',
-  productDetail: 'Product Detail',
-  productProcessingTime: 'Processing Time (Day)',
-  priceInformation: 'Price Information',
-  salePrice: 'Sale Price',
-  agentPrice: 'Agent Price',
-  processingPrice: 'Processing Price',
-
-  editService: 'Edit Service',
-  addService: 'Add Service',
-  buttonAddProduct: 'Add Product',
-  editProduct: 'Edit Product',
-
-  serviceInformation: 'Service Information',
-  workInformation: 'Work Information',
-  workName: 'Work Name',
-  serviceCode: 'Work Code',
-  serviceName: 'Service Name',
-  serviceDetail: 'Service Detail',
-  productInWork: 'Products in work',
-  serviceAddProduct: 'Add Product',
-  processTime: 'Processing Time',
-  day: 'Days',
-
-  noField: 'No Field',
-
-  totalProductWork: 'Total product of work',
-  workNo: 'Work',
-
-  addWork: 'Add work',
-
-  properties: 'Properties',
-  noProperties: 'No Properties',
-  serviceProperties: 'Service Properties',
-  workProperties: 'Work Properties',
-  propertiesInWork: 'Properties in work',
-  text: 'Text',
-  number: 'Number',
-  date: 'Date',
-  selection: 'Selection',
-  propertiesName: 'Properties Name',
-  decimal: 'Decimal',
-  decimalPlace: 'Decimal Place',
-  useComma: 'use comma',
-  additional: 'Additional',
-  telMaxLength: 'Max Length',
-  addSelection: 'Add Selection',
-  selectAll: 'Select All',
-
-  noProduct: 'No Product',
-};
diff --git a/src/i18n/en-US/quotation.ts b/src/i18n/en-US/quotation.ts
deleted file mode 100644
index 24c4ee00..00000000
--- a/src/i18n/en-US/quotation.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-export default {
-  quotation: {
-    form: {
-      createTitle: 'Create New Quotation',
-
-      customerBranchSelect: 'Select Customer Branch',
-      customerSelect: 'Customer Select',
-
-      listWorker: 'List Worker',
-      listProduct: 'List Product',
-
-      labelNo: 'No',
-      labelDate: 'Date',
-      labelTime: 'Time',
-      labelProcesser: 'Processer',
-
-      buttonSave: 'Save Quotation',
-    },
-  },
-};
diff --git a/src/i18n/en-US/status.ts b/src/i18n/en-US/status.ts
deleted file mode 100644
index fe6f57e2..00000000
--- a/src/i18n/en-US/status.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  statusCREATED: 'Active',
-  statusACTIVE: 'Active',
-  statusINACTIVE: 'Inactive',
-};
diff --git a/src/i18n/en-US/user.ts b/src/i18n/en-US/user.ts
deleted file mode 100644
index 7ae894b5..00000000
--- a/src/i18n/en-US/user.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  firstname: 'First Name',
-  lastname: 'Last Name',
-  fullname: 'Full Name',
-  userType: 'User Type',
-  userRole: 'User Role',
-  userCode: 'User Id',
-};
diff --git a/src/i18n/eng/index.ts b/src/i18n/eng/index.ts
new file mode 100644
index 00000000..ab05fbe5
--- /dev/null
+++ b/src/i18n/eng/index.ts
@@ -0,0 +1,483 @@
+export default {
+  general: {
+    ok: 'OK',
+    save: 'Save',
+    open: 'Open',
+    close: 'Close',
+    edit: 'Edit',
+    cancel: 'Cancel',
+    back: 'Back',
+    undo: 'Undo',
+    search: 'Search',
+    download: 'Download',
+    delete: 'Delete',
+    clear: 'Clear',
+    all: 'All',
+    address: 'Address',
+    add: 'Add {text}',
+    telephone: 'Telephone',
+    loading: 'Loading',
+    confirm: 'Confirm',
+    login: 'Login',
+    logout: 'Logout',
+    manage: 'Manage',
+    theme: 'Theme',
+    light: 'Light',
+    dark: 'Dark',
+    mode: 'Mode',
+    dataSum: 'Data Summaries',
+    active: 'Active',
+    inactive: 'Inactive',
+    displayField: 'Display Fields',
+    order: 'Order',
+    name: 'Name',
+    fullName: 'Full Name',
+    detail: 'Detail',
+    remark: 'Remark',
+    createdAt: 'Created at',
+    noData: 'No Data',
+    noField: 'No Field',
+    notFound: 'Not Found',
+    viewDetail: 'View Detail',
+    type: 'Type',
+    orderNumber: 'No.',
+    recordPerPage: 'Records per page',
+    recordsPage: 'Showing {resultcurrentPage} out of {total} records',
+    day: 'Days',
+    select: 'Select',
+    selectAll: 'Select All',
+    additional: 'Additional',
+    editImage: 'Edit Image',
+    upload: 'Upload',
+    baseOnDevice: 'Base on Device',
+    clickToCreate: 'Click to create',
+    age: 'Age',
+    nationality: 'Nationalality',
+    times: 'No. {number}',
+  },
+  menu: {
+    dashboard: 'Dashboard',
+    dashboardCaption: 'Statistical information.',
+
+    branch: 'Branch Management',
+    branchCaption: 'Manage Branches within the organization.',
+
+    user: 'Personnel Management',
+    userCaption: 'Manage personnel within the organization.',
+
+    customer: 'Customer Management',
+    customerCaption: 'Manage customer within the organization.',
+
+    product: 'Product & Service',
+    productCaption: 'List of products and services.',
+
+    dms: 'Document Management',
+
+    quotation: 'Quotation',
+    quotationCaption: 'List of quotations.',
+
+    requestList: 'Request List',
+    requestListCaption: 'List of purchase request.',
+
+    workOrder: 'Work Order',
+    workOrderCaption: 'List of purchase order.',
+
+    invoice: 'Invoice',
+    invoiceCaption: 'Invoice.',
+
+    accountingLedger: 'Accounting Ledger',
+    accountingLedgerCaption: 'Accounting Ledger.',
+
+    report: 'Report',
+    reportCaption: 'List of report.',
+
+    profile: {
+      editPersonalInfo: 'Edit Personal Information',
+      signature: 'Signature',
+      mode: 'Mode',
+      addSignature: 'Add Signature',
+    },
+  },
+  form: {
+    title: {
+      info: '{name}',
+      create: 'Create {name}',
+      edit: 'Edit {name}',
+    },
+    field: {
+      basicInformation: 'Basic Information',
+      address: 'Address',
+    },
+    birthDate: 'Birth Date',
+    email: 'Email',
+    telephone: 'Telephone',
+    gender: 'Gender',
+    address: 'Address {suffix}',
+    province: 'Province',
+    district: 'District',
+    subDistrict: 'Sub-district',
+    zipCode: 'Zip Code',
+    prefixName: 'Prefix',
+    firstName: 'First Name',
+    firstNameEN: 'First Name (EN)',
+    lastName: 'Last Name',
+    lastNameEN: 'Last Name (EN)',
+    middleName: 'Middle Name',
+    middleNameEN: 'Middle Name (EN)',
+    error: {
+      required: 'This field is required.',
+      select: 'Please select.',
+      selectField: 'Please select {field}.',
+      please: 'Please enter {msg} correct information.',
+      invalid: 'Invalid value.',
+      invalidCustomeMessage: 'Invalid value. {msg}',
+    },
+    warning: {
+      title: 'Warning {msg}',
+      unsave:
+        'You have unsaved changes. Are you sure you want to close this window?',
+    },
+    info: {
+      cantChange:
+        'The {field} cannot be changed later. Do you want to use "{name}"',
+    },
+    maxLength: 'Max Length',
+    useComma: 'Use Comma',
+    decimal: 'Decimal',
+    decimalPlace: 'Decimal Place',
+    selection: 'Selection',
+  },
+  status: {
+    title: 'Status',
+    CREATED: 'Active', // NOTE: Treated as active
+    ACTIVE: 'Active',
+    INACTIVE: 'Inactive',
+  },
+  branch: {
+    office: 'Office',
+    card: {
+      orderNumber: 'No.',
+      branchLabelName: 'Name',
+      branchLabelAddress: 'Address',
+      branchLabelTel: 'Telephone',
+      branchLabelType: 'Type',
+      branchLabel: 'Branch',
+      branchHQLabel: 'Headoffice',
+    },
+    page: {
+      captionManage: 'Manage',
+    },
+    form: {
+      title: {
+        branchLabel: 'Branch',
+        branchHQLabel: 'Headoffice',
+      },
+      group: {
+        contact: 'Contact',
+        location: 'Location',
+        bankAccount: 'Bank Account',
+        admin: 'Branch Admin',
+      },
+      shareLocation: 'Share location',
+      abbrev: 'Abbreviation Name',
+      code: 'Headoffice Code',
+      codeBranch: 'Branch Code',
+      taxNo: 'Tax Identification Number',
+      contactName: 'Contact Name',
+      contactTelephone: 'Contact Telephone',
+      branchName: 'Branch Name',
+      branchNameEN: 'Branch Name (EN)',
+      headofficeName: 'Headoffice Name',
+      headofficeNameEN: 'Headoffice Name (EN)',
+      bankAccountNo: 'Bank Account {no}',
+      bankAccountStatus: 'Bank Account Status',
+      bank: 'Bank',
+      bankBranch: 'Bank Branch',
+      bankAccountNumber: 'Bank Account Number',
+      bankAccountName: 'Bank Account Name',
+      bankAccountType: 'Bank Account Type',
+    },
+  },
+  personnel: {
+    title: 'Personnel Management',
+    caption: 'Manage All Personnel',
+    personnel: 'Personnel',
+    age: 'Age',
+    USER: 'Employee',
+    MESSENGER: 'Courier',
+    DELEGATE: 'Delegate',
+    AGENCY: 'Agency',
+    addTitle: 'Add Personnel',
+    tooltipTitle: 'No personnel yet?',
+    tooltipCaption: 'Click + to add a personnel',
+    form: {
+      personalInformation: 'Personal Information',
+      addressInformation: 'Personnel Address',
+      workInformation: 'Job Information',
+      username: 'Username',
+      userType: 'User Type',
+      userRole: 'User Role',
+      prefixName: 'Prefix',
+      firstName: 'First Name',
+      lastName: 'Last Name',
+      firstNameEN: 'First Name (EN)',
+      lastNameEN: 'Last Name (EN)',
+      middleName: 'Middle Name',
+      middleNameEN: 'Middle Name (EN)',
+      regisNo: 'Registration Number',
+      startDate: 'Start Date',
+      retireDate: 'Retire Date',
+      responsibleArea: 'Responsibel Area',
+      discount: 'Discount Condition',
+      sourceNationality: 'Source Nationality',
+      importNationality: 'import Nationality',
+      trainingPlace: 'Training Place',
+      checkpoint: 'Checkpoint',
+      checkpointEN: 'Checkpoint (EN)',
+      attachment: 'Attachment Document',
+    },
+  },
+  customer: {
+    employer: 'Employer',
+    employerLegalEntity: 'Legal Entity',
+    employerNaturalPerson: 'Natrual Person',
+    employerType: 'Employer Type',
+    employee: 'Employee',
+    form: {
+      selectType: 'Select Customer Type',
+      group: {
+        branch: 'Branch',
+      },
+
+      prefix: {
+        mr: 'Mr.',
+        mrs: 'Mrs.',
+        miss: 'Miss.',
+      },
+
+      firstName: 'First Name in Thai',
+      lastName: 'Last Name in Thai',
+      firstNameEN: 'First Name in English',
+      lastNameEN: 'Last Name in English',
+
+      cardNumber: 'ID Card Number',
+
+      prefixName: 'Prefix',
+      legalPersonNo: 'Legal Entity Registration Number',
+      registerName: 'Company Name',
+      registerNameEN: 'Company Name (EN)',
+      registerDate: 'Registered On',
+      registerCompanyName: 'Registered Name',
+      authorizedCapital: 'Authorized Capital',
+
+      workplace: 'Workplace',
+      workplaceEN: 'Workplace (EN)',
+      address: 'Address',
+      addressEN: 'Address (EN)',
+      branchCode: 'Branch Code',
+      customerCode: 'Employer Code',
+      legalPersonCode: 'Legal Entity Code',
+
+      codeAbbrev: 'Company Abbreviation',
+      codeNumber: 'Company Number',
+      registeredBranch: 'Registered Branch',
+      customerName: 'Company Name',
+      customerNameEN: 'Company Name (EN)',
+      personName: 'Customer Name',
+      taxIdentificationNumber: 'Tax Identification Number',
+      branch: {
+        title: 'Branch {name}',
+      },
+      headQuarters: {
+        title: 'Headoffice',
+      },
+    },
+
+    table: {
+      orderNumber: 'No.',
+      fullname: 'Full Name',
+      businessTypePure: 'Business Type',
+      address: 'Address',
+      workPlace: 'Workplace',
+      contactName: 'Contact Name',
+      contactPhone: 'Contact Phone',
+    },
+  },
+  customerEmployee: {
+    branch: 'Branch',
+    form: {
+      group: {
+        personalInfo: 'Personal Information',
+        passport: 'Passport',
+        visa: 'VISA',
+        healthCheck: 'Health Check',
+        workHistory: 'Work History',
+        other: 'Other',
+        family: 'Family',
+      },
+      employerBranch: 'Employer Branch',
+      employeeCode: 'Employee Code',
+      nrcNo: 'Non-Thai Identification Number (N.R.C No.)',
+
+      passportNo: 'Passport No.',
+      passportRef:
+        'Previous Passport Reference Number (In case of passport changed)',
+      passportType: 'Passport Type',
+      passportPlace: 'Passport Issuance Place',
+      passportIssuer: 'Passport Issuing Country',
+      passportIssueDate: 'Passport Issuance Date',
+      passportExpireDate: 'Passport Expiry Date',
+
+      addressSame: 'Use Employer Address',
+      addressCustom: 'Custom Address',
+
+      visaType: 'Visa Type',
+      visaNo: 'Visa Number',
+      visaIssuance: 'Issuance Date',
+      visaExpire: 'Valid Until',
+      visaPlace: 'Visa Issuance Place',
+      visaStayUntil: 'Permitted to Stay Until',
+      visaTM6: 'TM.6 Number (Arrival)',
+      visaEnter: 'Date of Entry into the Country',
+
+      employerSelect: {
+        branchName: 'Branch Name',
+        customerName: 'Employer Name',
+      },
+    },
+    formHealthCheck: {
+      title: 'Health Check',
+
+      result: 'Result',
+      checkupType: 'Type',
+      hospital: 'Hospital',
+      medicalBenefit: 'Type of Medical Benefits',
+      coverageStartDate: 'Insurance Purchase Date',
+      coverageExpireDate: 'Insurance Expiration Date',
+      insuranceCompany: 'Insurance Company',
+    },
+    formWorkHistory: {
+      title: 'Work History',
+
+      employerName: 'Employer Name',
+      jobType: 'Job Type',
+      jobPosition: 'Job Position',
+      workplace: 'Work Place',
+      workUntil: 'Permission to work until',
+      permitNo: 'Work Permit Number',
+      permitIssueDate: 'Work Permit Issuance Date',
+      permitExpireDate: 'Work Permit Expiration Date',
+    },
+    formFamily: {
+      citizenId:
+        "Worker's National Identification Number (National ID Number from Country of Origin)",
+      father: 'Father',
+      fatherBirthPlace: 'Father Birth Place',
+      mother: 'Mother',
+      motherBirthPlace: 'Mother Birth Place',
+    },
+  },
+  customerBranch: {
+    tab: {
+      main: 'About',
+      address: 'Address',
+      business: 'Business',
+      contact: 'Contact',
+      attachment: 'Attachment',
+    },
+    form: {
+      title: 'Branch',
+      no: 'Branch No.',
+      code: 'Branch Code',
+      taxNo: 'Tax Identification Number',
+      name: 'Branch Name',
+      nameEN: 'Branch Name (EN)',
+      authorizedCapital: 'Authorized Capital',
+      registerName: 'Registered Name',
+      registerDate: 'Registered Date',
+      telephone: 'Telephone No.',
+      attachment: 'Attachment',
+    },
+  },
+  productService: {
+    title: 'Products and Services',
+    caption: 'Manage All Products and Services',
+    group: {
+      title: 'Products and Services Group',
+      withName: 'Group of {name}',
+      addTitle: 'Add Products and Services Group',
+      code: 'Products and Services Group Code',
+      name: 'Products and Services Group Name',
+    },
+    type: {
+      title: 'Products and Services Types',
+      withName: 'Types of {name}',
+      addTitle: 'Add Products and Services Types',
+      code: 'Products and Services Types Code',
+      name: 'Products and Services Types Name',
+    },
+    service: {
+      title: 'Services',
+      totalWork: 'Total Work',
+      code: 'Services Code',
+      name: 'Services Name',
+      work: 'Work',
+      workName: 'Work Name',
+      showTotalPrice: 'Show Total Price',
+      addTitle: 'Add Services',
+      registeredBranch: 'Registered Branch',
+      information: 'Services Information',
+      workInformation: 'Work Information',
+      serviceProperties: 'Services Properties',
+      propertiesName: 'Properties Name',
+      properties: 'Properties',
+      noProperties: 'No Properties',
+      propertiesInWork: 'Properties in work',
+      productInWork: 'Products in work',
+      totalProductWork: 'Total products of work',
+      list: 'Item',
+      addWork: 'Add Work',
+    },
+    product: {
+      title: 'Products',
+      code: 'Products Code',
+      name: 'Products Name',
+      registeredBranch: 'Registered Branch',
+      noProduct: 'No Products',
+      allProduct: 'All Products',
+      addTitle: 'Add Products',
+      processingTime: 'Processing Time',
+      processingTimeDay: 'Processing Time (Days)',
+      priceInformation: 'Price Information',
+      salePrice: 'Sale Price',
+      agentPrice: 'Agent Price',
+      processingPrice: 'Processing Price',
+    },
+  },
+
+  backend: {
+    sameBranchCodeExists: 'This Head Office Abbreviation is already in use.',
+  },
+
+  dialog: {
+    title: {
+      incompleteDataEntry: 'Incomplete Data Entry',
+      confirmChangeStatus: 'Confirm Status Change',
+      confirmDelete: 'Confirm Deletion',
+    },
+    message: {
+      incompleteDataEntry: 'Incomplete data entry on {tap} page',
+      confirmChangeStatusOn: 'Do you want to open?',
+      confirmChangeStatusOff: 'Do you want to close?',
+      confirmDelete: 'Do you want to delete this item?',
+    },
+    action: {
+      ok: 'OK',
+      save: 'Save',
+      saveAndClose: 'Save and Close',
+      close: 'Close',
+      delete: 'Delete',
+      cancel: 'Cancel',
+    },
+  },
+};
diff --git a/src/i18n/index.ts b/src/i18n/index.ts
index e4553602..bba1bb34 100644
--- a/src/i18n/index.ts
+++ b/src/i18n/index.ts
@@ -1,7 +1,7 @@
-import enUS from './en-US';
-import th from './th-th';
+import eng from './eng';
+import tha from './tha';
 
 export default {
-  'en-US': enUS,
-  'th-th': th,
+  eng,
+  tha,
 };
diff --git a/src/i18n/th-th/address.ts b/src/i18n/th-th/address.ts
deleted file mode 100644
index bde15a68..00000000
--- a/src/i18n/th-th/address.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export default {
-  address: 'ที่อยู่',
-  province: 'จังหวัด',
-  district: 'อำเภอ',
-  subDistrict: 'ตำบล',
-  zipCode: 'รหัสไปรษณีย์',
-};
diff --git a/src/i18n/th-th/alert-dialog.ts b/src/i18n/th-th/alert-dialog.ts
deleted file mode 100644
index 035e5166..00000000
--- a/src/i18n/th-th/alert-dialog.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-export default {
-  warning: 'เตือน',
-  warningForgetInput: 'คุณกรอกข้อมูลไม่ครบ',
-  warningClose: 'คุณยังไม่ได้บันทึกการแก้ไข ยืนยันที่จะปิดใช่หรือไม่',
-
-  errorOccurred: 'เกิดข้อผิดพลาด.',
-
-  confirmLogoutTitle: 'ยืนยันการออกจากระบบ',
-  confirmLogoutMessage: 'คุณต้องการออกจากระบบ ใช่หรือไม่',
-
-  confirmChangeStatusTitle: 'ยืนยันการเปลี่ยนสถานะ',
-  confirmChangeStatusOnMessage: 'คุณต้องการเปิดใช่หรือไม่',
-  confirmChangeStatusOffMessage: 'คุณต้องการปิดใช่หรือไม่',
-
-  // Backend
-  productGroupNotFound: 'ไม่พบกลุ่มสินค้า',
-  productGroupInUsed: 'กลุ่มสินค้าที่ใช้งานอยู่',
-
-  productNotFound: 'ไม่พบสินค้า',
-  productInUsed: 'สินค้าใช้งานอยู่',
-
-  productTypeNotFound: 'ไม่พบประเภทสินค้า',
-  productGroupAssociatedBadReq: 'ไม่พบกลุ่มสินค้าที่เกี่ยวข้อง',
-  productTypeInUsed: 'ประเภทสินค้าใช้งานอยู่',
-  productGroupBadReq: 'ไม่พบกลุ่มสินค้า',
-
-  serviceNotFound: 'ไม่พบบริการ',
-  someProductBadReq: 'ไม่พบสินค้าบางส่วน',
-  serviceInUsed: 'บริการใช้งานอยู่',
-
-  workNotFound: 'ไม่พบงาน',
-  workInUsed: 'งานที่ใช้งานอยู่',
-
-  branchContactNotFound: 'ไม่พบผู้ติดต่อสาขา',
-  branchBadReq: 'ไม่พบสาขา',
-  branchNotFound: 'ไม่พบสาขา',
-
-  cantMakeHQAndBranchSameTime:
-    'ไม่สามารถทำให้เป็นสำนักงานใหญ่และสาขาพร้อมกันได้',
-  branchInUsed: 'สาขาใช้งานอยู่',
-  oneOrMoreUserBadReq: 'ไม่พบผู้ใช้หนึ่งคนหรือมากกว่า',
-  oneOrMoreBranchBadReq: 'ไม่พบสาขาหนึ่งสาขาหรือมากกว่า',
-
-  customerBranchNotFound: 'ไม่พบสาขาลูกค้า',
-  customerBranchInUsed: 'สาขาลูกค้าที่ใช้งานอยู่',
-
-  customerNotFound: 'ไม่พบลูกค้า',
-  customerInUsed: 'ลูกค้าใช้งานอยู่',
-  oneOrMoreBranchMissing: 'ไม่สามารถลบสาขาหนึ่งหรือมากกว่าได้และสูญหาย',
-
-  employeeCheckupNotFound: 'ไม่พบการตรวจสอบพนักงาน',
-  provinceNotFound: 'ไม่พบจังหวัด',
-  employeeNotFound: 'ไม่พบพนักงาน',
-  employeeBadReq: 'ไม่พบพนักงาน',
-  employeeInUsed: 'พนักงานใช้งานอยู่',
-
-  someProvinceNotFound: 'ไม่พบจังหวัดบางส่วน',
-  employeeOtherNotFound: 'ไม่พบข้อมูลอื่นของพนักงาน',
-
-  employeeWorkNotFound: 'ไม่พบงานของพนักงาน',
-
-  parentMenuBadReq: 'ไม่พบเมนูหลัก',
-  menuNotFound: 'ไม่พบเมนู',
-  menuBadReq: 'ไม่พบเมนู',
-  menuComponentNotFound: 'ไม่พบส่วนประกอบเมนู',
-  roleMenuNotFound: 'ไม่พบเมนูบทบาท',
-
-  userNotFound: 'ไม่พบผู้ใช้',
-  userInUsed: 'ผู้ใช้ใช้งานอยู่',
-
-  unknowHowToVerify: 'ไม่ทราบวิธียืนยันตัวตน',
-  noPermission: 'คุณไม่มีสิทธิในการเข้าถึงหรือดำเนินการใดๆ กับข้อมูลนี้',
-  noPermissionToAccess: 'คุณไม่มีสิทธิในการเข้าถึงข้อมูลนี้',
-
-  relationProvinceNotFound: 'ไม่พบจังหวัด',
-  relationDistrictNotFound: 'ไม่พบอำเภอ',
-  relationSubDistrictNotFound: 'ไม่พบตำบล',
-
-  relationHQNotFound: 'ไม่พบสำนักงานใหญ่',
-
-  relationCustomerNotFound: 'ไม่พบลูกค้า',
-
-  relationCustomerBranchNotFound: 'ไม่พบสาขาลูกค้า',
-
-  sameBranchCodeExists: 'ตัวย่อสำนักงานใหญ่นี้ถูกใช้แล้ว',
-};
diff --git a/src/i18n/th-th/bank.ts b/src/i18n/th-th/bank.ts
deleted file mode 100644
index b568fd8a..00000000
--- a/src/i18n/th-th/bank.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  accountNumber: 'เลขที่บัญชี',
-  bankBranch: 'สาขาธนาคาร',
-  accountName: 'ชื่อบัญชี',
-  bankType: 'ประเภทของธนาคาร',
-  accountStatus: 'สถานะการใช้งาน ',
-  bankBookNo: 'ช่องทางที่',
-};
diff --git a/src/i18n/th-th/branch-main-page.ts b/src/i18n/th-th/branch-main-page.ts
deleted file mode 100644
index 1ddb2eb7..00000000
--- a/src/i18n/th-th/branch-main-page.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  branchManagement: 'จัดการสาขา',
-  branchNoMainOfficeYet: 'ยังไม่มีสำนักงานใหญ่',
-  branchClickToCreateMainOffice: 'คลิก + เพื่อสร้างสำนักงานใหญ่', // Click to create a main office.
-  closedStatus: 'ปิด',
-  btnCreate: 'สร้างสาขาใหญ่',
-  headQuarters: 'สำนักงานใหญ่ ',
-};
diff --git a/src/i18n/th-th/branch.ts b/src/i18n/th-th/branch.ts
deleted file mode 100644
index e9b9bf8c..00000000
--- a/src/i18n/th-th/branch.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-export default {
-  branchManagementCaption: 'จัดการสาขาทั้งหมด',
-  branchInHQ: 'สาขาภายในสำนักงานใหญ่',
-
-  office: 'สำนักงาน',
-  branchLabel: 'สาขา',
-  branchHQLabel: 'สำนักงานใหญ่',
-  branchName: 'ชื่อสาขา',
-  branchAdd: 'สร้างสำนักงานใหญ่',
-  branchManagement: 'จัดการสาขา',
-  branchNoMainOfficeYet: 'ยังไม่มีสำนักงานใหญ่?',
-  branchClickToCreateMainOffice: 'คลิก + เพื่อสร้างสำนักงานใหญ่',
-
-  totalEmployee: 'ลูกจ้างทั้งหมด',
-
-  branchLabelCode: 'รหัสสาขา',
-  branchLabelName: 'ชื่อสาขา',
-  branchLabelTel: 'เบอร์โทรศัพท์สาขา',
-  branchLabelAddress: 'ที่อยู่สาขา',
-  branchLabelType: 'ประเภทสาขา',
-  branchLabelStatus: 'สถานะสาขา',
-
-  registeredBranch: 'สาขาที่ลงทะเบียน',
-
-  branchStatTitle: 'สรุปจัดการสาขา',
-
-  branchAdminTitle: 'ผู้จัดการสาขา',
-  branchAdminNone: 'ไม่พบผู้จัดการสาขา',
-};
diff --git a/src/i18n/th-th/customer-main-page.ts b/src/i18n/th-th/customer-main-page.ts
deleted file mode 100644
index 1165c883..00000000
--- a/src/i18n/th-th/customer-main-page.ts
+++ /dev/null
@@ -1,70 +0,0 @@
-export default {
-  customerManagement: 'จัดการลูกค้า',
-  customerManagementCaption: 'จัดการลูกค้าทั้งหมด',
-
-  customerEmployerTooltipTitle: 'ยังไม่มีข้อมูลนายจ้าง',
-  customerEmployeeTooltipTitle: 'ยังไม่มีข้อมูลลูกจ้าง',
-  customerEmployerTooltipCaption: 'คลิก + เพื่อเพิ่มนายจ้าง',
-  customerEmployeeTooltipCaption: 'คลิก + เพื่อเพิ่มลูกจ้าง',
-  customerEmployerAdd: 'เพิ่มนายจ้าง',
-  customerEmployeeAdd: 'เพิ่มลูกจ้าง',
-
-  nameEmployee: 'คนงาน',
-
-  EMPLOYER: 'นายจ้าง',
-  EMPLOYEE: 'ลูกจ้าง',
-  customerEmployerStatTitle: 'สรุปจำนวนข้อมูลนายจ้าง',
-  customerEmployeeStatTitle: 'สรุปจำนวนข้อมูลลูกจ้าง',
-
-  customerCardUserType: 'ประเภทนายจ้าง',
-
-  customerLegalEntity: 'นิติบุคคล',
-  customerNaturalPerson: 'บุคคลธรรมดา',
-
-  businessInformation: 'ข้อมูลกิจการ',
-  inputCustomerAddress: 'สำนักงานจัดหางาน (อยู่ในเขต พื้นที่)',
-
-  businessType: 'ประเภทกิจการ ภาษาไทย',
-  businessTypeEN: 'ประเภทกิจการ ภาษาอังกฤษ',
-  businessTypePure: 'ประเภทกิจการ',
-
-  jobPosition: 'ตําแหน่งงาน ภาษาไทย',
-  jobPositionEN: 'ตําแหน่งงาน ภาษาอังกฤษ',
-
-  jobDescription: 'ลักษณะงาน',
-
-  payDay: 'วันที่จ่ายค่าแรง',
-  payRate: 'อัตราค่าจ้าง/วัน',
-
-  salesPerson: 'พนักงานขาย',
-
-  // เกี่ยวกับ
-  about: 'เกี่ยวกับ',
-  branchCode: 'รหัสสาขา',
-  legalEntityCode: 'รหัสนิติบุคคล',
-  taxNo: 'เลขทะเบียนนิติบุคคล',
-  customerName: 'ชื่อสาขา ภาษาไทย',
-  customerEnglishName: 'ชื่อสาขา ภาษาอังกฤษ',
-  registerDate: 'จดทะเบียนเมื่อ',
-  authorizedCapital: 'ทุนจดทะเบียน',
-  registerName: 'จดทะเบียนชื่อ',
-
-  customerBranchFormTab: 'สาขาที่',
-
-  customerNameTh: 'ชื่อบริษัท/นิติบุคคล (ไทย)',
-  customerNameEn: 'ชื่อบริษัท/นิติบุคคล (อังกฤษ)',
-  customerBranchName: 'ชื่อบริษัท/นิติบุคคล',
-
-  officeType: '',
-
-  allEmployee: 'ลูกจ้างทั้งหมด',
-
-  editHistory: 'ประวัติการแก้ไข',
-  time: 'เวลา',
-  editBy: 'แก้ไขโดย',
-  valueBefore: 'แก้ไขใหม่',
-  valueAfter: 'ค่าเดิม',
-
-  serviceWorkTotal: 'จำนวนงานทั้งหมด',
-  priceInformation: 'ข้อมูลราคา',
-};
diff --git a/src/i18n/th-th/drawer-component.ts b/src/i18n/th-th/drawer-component.ts
deleted file mode 100644
index c1d1d9a3..00000000
--- a/src/i18n/th-th/drawer-component.ts
+++ /dev/null
@@ -1,13 +0,0 @@
-export default {
-  drawerDashboard: 'Dashboard',
-  drawerBranchManagement: 'จัดการสาขา',
-  drawerPersonnelManagement: 'จัดการบุคลากร',
-  drawerCustomerManagement: 'จัดการลูกค้า',
-  drawerProductsAndServices: 'สินค้าและบริการ',
-  drawerQuotation: 'ใบเสนอราคา',
-  drawerRequestList: 'รายการคําขอ',
-  drawerWorkOrder: 'ใบสั่งงาน',
-  drawerInvoice: 'ใบรับสินค้า',
-  drawerAccountingLedger: 'รายการทางบัญชี',
-  drawerReport: 'รายงาน',
-};
diff --git a/src/i18n/th-th/employer-dialog.ts b/src/i18n/th-th/employer-dialog.ts
deleted file mode 100644
index 927d9eaa..00000000
--- a/src/i18n/th-th/employer-dialog.ts
+++ /dev/null
@@ -1,11 +0,0 @@
-export default {
-  corporationThaiName: 'ชื่อ บริษัท/นิติบุคคล ภาษาไทย',
-  corporationEnglishName: 'ชื่อ บริษัท/นิติบุคคล ภาษาอังกฤษ',
-
-  corporationThai: 'ชื่อ บริษัท ภาษาไทย',
-  corporationEnglish: 'ชื่อ บริษัท ภาษาอังกฤษ',
-
-  companyOwnerName: 'ชื่อเจ้าของบริษัท',
-
-  corporation: 'ชื่อ บริษัท/นิติบุคคล',
-};
diff --git a/src/i18n/th-th/form-dialog.ts b/src/i18n/th-th/form-dialog.ts
deleted file mode 100644
index e55c5269..00000000
--- a/src/i18n/th-th/form-dialog.ts
+++ /dev/null
@@ -1,202 +0,0 @@
-export default {
-  inputValidate: 'กรุณากรอก',
-  selectValidate: 'กรุณาเลือก',
-
-  // Branch & HQ
-  formDialogHqAbbreviation: 'ตัวย่อสำนักงานใหญ่',
-  formDialogInputHqAbbreviation: 'โปรดระบุตัวย่อสำนักงานใหญ่',
-
-  formDialogTitleImg: 'ภาพสำนักงาน',
-  formDialogBtnImg: 'เพิ่มรูปสำนักงาน',
-
-  formDialogTitleViewHeadOffice: 'สำนักงานใหญ่',
-  formDialogTitleViewSubBranch: 'สาขา',
-
-  formDialogTitleCreateHeadOffice: 'เพิ่มสำนักงานใหญ่',
-  formDialogTitleEditHeadOffice: 'แก้ไขสำนักงานใหญ่',
-
-  formDialogTitleCreateSubBranch: 'เพิ่มสาขา',
-  formDialogTitleEditSubBranch: 'แก้ไขสาขา',
-
-  formDialogTitleAddress: 'ข้อมูลที่อยู่สำนักงานใหญ่',
-
-  formDialogTitleLocation: 'สถานที่ตั้งสำนักงานใหญ่',
-  formDialogTitleInformation: 'ข้อมูลพื้นฐาน',
-  formDialogTitleContact: 'ข้อมูลติดต่อ',
-  formDialogTitlePersonal: 'ข้อมูลบุคคล',
-
-  formDialogInputCode: 'รหัสสำนักงานใหญ่',
-  formDialogInputTaxNo: 'เลขทะเบียนนิติบุคคล',
-  formDialogInputTaxNoValidate: 'โปรดระบุเลขทะเบียนนิติบุคคล',
-
-  formDialogInputNameHq: 'ชื่อสำนักงานใหญ่',
-  formDialogInputNameSubBranch: 'ชื่อสาขา',
-  formDialogInputNameHqValidate: 'โปรดระบุชื่อสำนักงานใหญ่',
-  formDialogInputNameSubBranchValidate: 'โปรดระบุชื่อสาขา',
-
-  formDialogInputNameHqEn: 'ชื่อสำนักงานใหญ่ (ภาษาอังกฤษ)',
-  formDialogInputNameSubBranchEn: 'ชื่อสาขา (ภาษาอังกฤษ)',
-  formDialogInputNameHqEnValidate: 'โปรดระบุชื่อสำนักงานใหญ่ (ภาษาอังกฤษ)',
-  formDialogInputNameSubBranchEnValidate: 'โปรดระบุชื่อสาขา (ภาษาอังกฤษ)',
-
-  formDialogInputTelephoneContact: 'เบอร์โทรศัพท์ติดต่อ',
-  formDialogUploadQrCode: 'อัปโหลด QR Code',
-
-  formDialogInputTelephoneHq: 'เบอร์โทรศัพท์สำนักงานใหญ่',
-  formDialogInputTelephoneSubBranch: 'เบอร์โทรศัพท์สาขา',
-  formDialogInputEmailHq: 'อีเมลติดต่อสำนักงานใหญ่',
-  formDialogInputEmailSubBranch: 'อีเมลติดต่อสาขา',
-
-  formDialogInputContactName: 'ติดต่อ',
-
-  formDialogInputOperatingHours: 'เวลาทําการ',
-
-  formDialogInputAddressValidate: 'โปรดระบุที่อยู่',
-  formDialogInputProvinceValidate: 'โปรดระบุจังหวัด',
-
-  formDialogInputDistrictValidate: 'โปรดระบุอำเภอ',
-  formDialogInputSubDistrictValidate: 'โปรดระบุตำบล',
-
-  formDialogBtnLocation: 'เริ่มแชร์โลเคชั่น',
-
-  // Personnel
-  formDialogTitleAddressPersonnel: 'ที่อยู่พนักงาน',
-
-  formDialogBtnEditProfile: 'แก้ไขโปรไฟล์',
-  formDialogBtnUploadProfile: 'อัปโหลดรูปภาพ',
-  formDialogTitleUserStatus: 'สถานะผู้ใช้งาน',
-  formDialogTitleProductStatus: 'สถานะสินค้า',
-
-  formDialogInputHqIdValidate: 'กรุณาเลือกสำนักงานใหญ่',
-  formDialogInputBrId: 'รหัสสาขา',
-  formDialogInputUserType: 'ประเภทผู้ใช้งาน',
-  formDialogInputUserTypeValidate: 'กรุณาเลือกประเภทผู้ใช้งาน',
-  formDialogInputUserRole: 'สิทธิ์ผู้ใช้งาน',
-  formDialogInputUserRoleValidate: 'กรุณาเลือกสิทธิ์ผู้ใช้งาน',
-  formDialogInputPrefixNameValidate: 'กรุณาเลือกคำนำหน้า',
-  formDialogInputUsername: 'ชื่อผู้ใช้งาน (Username)',
-  formDialogInputUsernameValidate: 'กรุณากรอกชื่อผู้ใช้งาน',
-  formDialogInputUserCode: 'รหัสพนักงาน',
-
-  formDialogInputPrefixName: 'คำนำหน้า',
-
-  formDialogTitlePersonnel: 'ข้อมูลบุคลากร',
-  formDialogInputFirstName: 'ชื่อ',
-  formDialogInputMidName: 'ชื่อกลาง',
-  formDialogInputFirstNameValidate: 'กรุณากรอกชื่อ',
-  formDialogInputLastName: 'นามสกุล',
-  formDialogInputLastNameValidate: 'กรุณากรอกนามสกุล',
-  formDialogInputFirstNameEN: 'ชื่อ ภาษาอังกฤษ',
-  formDialogInputMidNameEN: 'ชื่อกลาง ภาษาอังกฤษ',
-  formDialogInputFirstNameENValidate: 'กรุณากรอกชื่อ ภาษาอังกฤษ',
-  formDialogInputLastNameEN: 'นามสกุล ภาษาอังกฤษ',
-  formDialogInputLastNameENValidate: 'กรุณากรอกนามสกุล ภาษาอังกฤษ',
-  formDialogInputTelephone: 'เบอร์โทร',
-  formDialogInputEmail: 'อีเมล',
-  formDialogInputGender: 'เพศ',
-  formDialogInputBirthDate: 'วันเดือนปีเกิด',
-  formDialogInputAge: 'อายุ',
-  formDialogInputNationality: 'สัญชาติ',
-
-  formDialogTitlePersonnelAddress: 'ข้อมูลที่อยู่พนักงาน',
-  formDialogTitleEmployerAddress: 'ข้อมูลที่อยู่นายจ้าง',
-  formDialogTitleAddressPure: 'ที่อยู่',
-  formDialogTitleAddressPureEN: 'ที่อยู่ภาษาอังกฤษ',
-
-  formDialogTitleByType: 'ข้อมูลการทำงาน',
-  formDialogInputRegisNo: 'เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)',
-  formDialogInputStartDate: 'วันที่เริ่มงาน',
-  formDialogInputRetireDate: 'วันที่พ้นสภาพพนักงาน',
-  formDialogInputResponsibleArea: 'พื้นที่ ที่รับผิดชอบในการส่งเอกสาร',
-  formDialogInputDiscount: 'เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน',
-  formDialogInputSourceNationality: 'สัญชาติต้นทาง',
-  formDialogInputImportNationality: 'นำเข้าสัญชาติ',
-  formDialogInputTrainingPlace: 'สถานที่อบรม',
-  formDialogInputCheckpoint: 'ด่าน',
-  formDialogAttachment: 'แบบเอกสารประจำตัว',
-  formDialogPrefixName: 'คํานําหน้า',
-  formDialogCustomerBranch: 'ข้อมูลสาขา',
-
-  formDialogAddress: 'ที่อยู่ ภาษาไทย',
-  formDialogAddressEN: 'ที่อยู่ ภาษาอังกฤษ',
-
-  // Customer
-  formDialogCustomerName: 'ชื่อนายจ้าง',
-
-  formDialogEmployerID: 'รหัสนายจ้าง',
-  formDialogEmployerBranchCode: 'รหัสนายจ้าง',
-
-  formDialogEmployeeID: 'รหัสลูกจ้าง',
-  formDialogEmployeeNRCNo: 'เลขบัตรประจำตัวคนซึ่งไม่มีสัญชาติไทย (N.R.C. No.)',
-
-  formDialogToggleSameAddress: 'เลือกที่อยู่ตามนายจ้าง',
-  formDialogToggleCustomAddress: 'กำหนดเอง',
-
-  formDialogTitleHealthCheck: 'ข้อมูลผลตรวจสุขภาพ',
-  formDialogInputCheckupRes: 'ผลการตรวจสุขภาพ',
-  formDialogInputCheckupType: 'ประเภทผลการตรวจ',
-  formDialogInputHospital: 'โรงพยาบาล',
-  formDialogInputRemark: 'หมายเหตุ',
-  formDialogInputMedicalBenefit: 'ประเภทสิทธิการรักษา',
-  formDialogInputInsuranceCompany: 'บริษัทประกัน',
-  formDialogInputCoverageStartDate: 'วันที่ซื้อประกัน',
-  formDialogInputCoverageExpiretDate: 'วันที่หมดอายุ',
-  personalInfo: 'ข้อมูลส่วนตัว',
-  healthCheck: 'ผลการตรวจสุขภาพและประกันสุขภาพ',
-  workHistory: 'ประวัติการทำงาน',
-  other: 'อื่นๆ',
-
-  formDialogInputCheckupResValidate: 'กรุณากรอกผลการตรวจสุขภาพ',
-
-  formDialogInputOwnerName: 'ชื่อนายจ้าง',
-  formDialogInputJobPosition: 'ตำแหน่งงาน',
-  formDialogInputJobType: 'ลักษณะงาน',
-  formDialogInputWorkPlace: 'สถานที่ทำงาน',
-  formDialogInputWorkUntil: 'ได้รับอนุญาตให้ทำงานถึงวันที่',
-  formDialogInputWorkPermitNo: 'เลขที่ใบอนุญาตทำงาน',
-  formDialogInputWorkPermitIssueDate: 'วันออกใบอนุญาตทำงาน',
-  formDialogInputWorkPermitExpireDate: 'วันหมดอายุใบอนุญาตทำงาน',
-
-  formDialogTitleFamilyHistory: 'ประวัติครอบครัว',
-  formDialogTitleFamilyHistoryDad: 'บิดา',
-  formDialogTitleFamilyHistoryMom: 'มารดา',
-  formDialogInputCitizenId:
-    'เลขประจำตัวประชาชนของคนงาน (เลขประจำตัวจากประเทศต้นทาง)',
-  formDialogInputFamilyBirthPlace: 'สถานที่เกิด',
-
-  formDialogTitlePassport: 'ข้อมูลหนังสือเดินทาง OCR',
-  formDialogInputPassportType: 'ประเภทหนังสือเดินทาง',
-  formDialogInputPassportNo: 'เลขที่หนังสือเดินทาง',
-  formDialogInputPassportRef:
-    'เลขอ้างอิงเลขที่หนังสือเดินทางเดิม (กรณีเปลี่ยนหนังสือเดินทาง)',
-  formDialogInputWPassportPlace: 'สถานที่ออกหนังสือเดินทาง',
-  formDialogInputPassportCountry: 'ประเทศที่ออก',
-  formDialogInputPassportIssuance: 'วันที่ออกหนังสือเดินทาง',
-  formDialogInputPassportExpire: 'วันหมดอายุหนังสือเดินทาง',
-
-  formDialogTitleVisa: 'ข้อมูลการตรวจลงตรา (VISA) OCR',
-  formDialogInputVisaType: 'ประเภทการตรวจลงตรา',
-  formDialogInputVisaNo: 'เลขที่ตรวจลงตรา',
-  formDialogInputVisaIssuance: 'ออกให้วันที่',
-  formDialogInputVisaExpire: 'ใช้ได้ถึงวันที่',
-  formDialogInputVisaPlace: 'ออกให้ที่',
-  formDialogInputVisaStayUntil: 'ให้อยู่ในราชอาณาจักรถึงวันที่',
-  formDialogInputVisaTM6: 'เลขที่ใบ ตม.6 (ใบขาเข้า)',
-  formDialogInputVisaEnter: 'วันที่เดินทางเข้ามาในประเทศ',
-
-  formDialogTabCheckup: 'ครั้งที่ ',
-  formDialogTabWork: 'ครั้งที่ ',
-
-  formDialogEmployerRanchCode: 'รหัสสาขา',
-
-  formTitleCustomer: 'บริษัท {msg}',
-  formTitleCustomerNaturalPerson: 'ชื่อ {msg}',
-  formTitleBranch: 'สาขา {msg}',
-
-  passportExpire: 'วันหมดอายุของเอกสาร(visa ,passport)',
-
-  pleaseInformation: 'โปรดกรอกข้อมูล',
-
-  // product
-  formDialogTitleUseStatus: 'สถานะการใช้งาน',
-};
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
deleted file mode 100644
index e19e207e..00000000
--- a/src/i18n/th-th/index.ts
+++ /dev/null
@@ -1,244 +0,0 @@
-import main from './main';
-import drawerComponent from './drawer-component';
-import personnelMainPage from './personnel-main-page';
-import customerMainPage from './customer-main-page';
-import address from './address';
-import branch from './branch';
-import user from './user';
-import formDialog from './form-dialog';
-import status from './status';
-import employerDialog from './employer-dialog';
-import otherDocument from './other-document';
-import productService from './product-service';
-import alertDialog from './alert-dialog';
-import bank from './bank';
-export default {
-  ok: 'ยืนยัน',
-  agree: 'ตกลง',
-  cancel: 'ยกเลิก',
-  failed: 'เกิดข้อผิดพลาด',
-  success: 'สำเร็จ',
-  close: 'ปิด',
-  search: 'ค้นหา',
-  loading: 'กำลังโหลด',
-  download: 'ดาวน์โหลด',
-  back: 'กลับ',
-  undo: 'เลิกทำ',
-  save: 'บันทึก',
-  edit: 'แก้ไข',
-  delete: 'ลบ',
-  telephone: 'เบอร์โทรศัพท์',
-  viewDetail: 'ดูรายละเอียด',
-  noData: 'ยังไม่มีข้อมูล',
-  notFound: 'ไม่พบข้อมูล',
-  code: 'รหัส',
-  type: 'ประเภท',
-  status: 'สถานะ',
-  language: 'ภาษา',
-  languageName: 'ไทย',
-  select: 'เลือก',
-  all: 'ทั้งหมด',
-  switchOnLabel: 'เปิด',
-  switchOffLabel: 'ปิด',
-  displayField: 'ข้อมูลที่แสดง',
-  deleteConfirmTitle: 'ยืนยันการลบข้อมูล',
-  deleteConfirmMessage: 'คุณต้องการลบข้อมูลใช่หรือไม่',
-
-  saveConfirmTitle: 'ยืนยันการบันทึกข้อมูล',
-  saveConfirmMessage: 'คุณต้องการบันทึกข้อมูลใช่หรือไม่',
-
-  headquartersNotEstablished:
-    'ท่านยังไม่ได้สร้างสำนักงานใหญ่ ต้องสร้างสำนักงานใหญ่ก่อนจึงจะสร้าง บุคลากรได้',
-  changePassword: 'เปลี่ยนรหัสผ่าน',
-  signature: 'ลายเซ็น',
-  addSignature: 'เพิ่มลายเซ็น',
-  clear: 'ล้าง',
-  detail: 'รายละเอียด',
-  add: 'เพิ่ม',
-  name: 'ชื่อ',
-  editPersonalInfo: 'แก้ไขข้อมูลส่วนตัว',
-  logout: 'ออกจากระบบ',
-  list: 'รายการ',
-  manage: 'จัดการ',
-  mode: 'โหมด',
-  theme: 'ธีม',
-  light: 'สว่าง',
-  dark: 'มืด',
-  uploadFile: 'อัปโหลดไฟล์',
-  newUpload: 'อัปโหลดใหม่',
-  baseOnDevice: 'สีตามอุปกรณ์',
-  person: 'คน',
-  recordsPage: 'แสดง {resultcurrentPage} รายการจาก {total} รายการ',
-  showing: 'แสดงทีละ',
-  dataSum: 'สรุปจำนวนข้อมูล',
-  createdAt: 'สร้างเมื่อ',
-  noResults: 'ไม่มีข้อมูล',
-  notRecorded: 'คุณยังไม่ได้บันทึก',
-  editImage: 'แก้ไขรูป',
-  bankBook: 'บัญชีธนาคาร',
-  use: 'ใช้งาน',
-  notUse: 'ไม่ใช้งาน',
-  orderNumber: 'ลําดับ',
-  saveSuccessful: 'บันทึกข้อมูลสำเร็จ',
-  ...status,
-  ...main,
-  ...address,
-  ...branch,
-  ...user,
-  ...drawerComponent,
-  ...personnelMainPage,
-  ...formDialog,
-  ...customerMainPage,
-  ...employerDialog,
-  ...otherDocument,
-  ...productService,
-  ...alertDialog,
-  ...bank,
-  menu: {
-    dms: 'จัดการเอกสาร',
-  },
-  form: {
-    title: {
-      info: '{name}',
-      create: 'สร้าง {name}',
-      edit: 'แก้ไข {name}',
-    },
-    address: 'ที่อยู่ {suffix}',
-    error: {
-      required: 'จำเป็นต้องกรอกข้อมูลนี้',
-      please: 'โปรดใส่ข้อมูล{msg}ให้ถูกต้อง',
-      invalid: 'ค่าที่ไม่ถูกต้อง',
-      invalidCustomeMessage: 'ค่าที่ไม่ถูกต้อง {msg}',
-    },
-    warning: {
-      title: 'แจ้งเตือน {msg}',
-      unsave:
-        'คุณมีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก คุณต้องการปิดหน้าต่างนี้หรือไม่',
-    },
-    info: {
-      cantChange:
-        '{field} ไม่สามารถแก้ไขภายหลังได้ คุณต้องการใช้ "{name}" ใช่หรือไม่',
-    },
-  },
-  customer: {
-    employer: 'นายจ้าง',
-    employee: 'ลูกจ้าง',
-
-    form: {
-      selectType: 'เลือกประเภท',
-      group: {
-        basicInfo: 'ข้อมูลพื้นฐาน',
-        branch: 'ข้อมูลสาขา',
-      },
-
-      prefix: {
-        mr: 'Mr.',
-        mrs: 'Mrs.',
-        miss: 'Miss.',
-      },
-
-      firstName: 'ชื่อ ภาษาไทย',
-      lastName: 'นามสกุล ภาษาไทย',
-      firstNameEN: 'ชื่อ ภาษาอังกฤษ',
-      lastNameEN: 'นามสกุล ภาษาอังกฤษ',
-
-      cardNumber: 'บัตรประชาชนเลขที่',
-
-      prefixName: 'คํานําหน้า',
-      instance: 'ครั้งที่ {index}',
-      legalPersonNo: 'ทะเบียนนิติบุคคลเลขที่',
-      registerName: 'ชื่อบริษัท',
-      registerNameEN: 'ชื่อบริษัท (EN)',
-      registerDate: 'จดทะเบียนเมื่อ',
-      registerCompanyName: 'จดทะเบียนชื่อ',
-      authorizedCapital: 'ทุนที่จดทะเบียน',
-      workplace: 'สถานที่ทํางาน',
-      workplaceEN: 'สถานที่ทํางาน (EN)',
-      address: 'ที่อยู่',
-      addressEN: 'ที่อยู่ (EN)',
-      branchCode: 'รหัสสาขา',
-      customerCode: 'รหัสนายจ้าง',
-      legalPersonCode: 'รหัสนิติบุคคล',
-      codeAbbrev: 'ชื่อย่อบริษัท',
-      codeNumber: 'เลขประจำตัวบริษัท',
-      registeredBranch: 'สาขาที่ลงทะเบียน',
-      customerName: 'ชื่อบริษัท',
-      customerNameEN: 'ชื่อบริษัท (EN)',
-      personName: 'ชื่อลูกค้า',
-      taxIdentificationNumber: 'หมายเลขทะเบียนนิติบุคคล',
-      branch: {
-        title: 'สาขาที่ {name}',
-      },
-      headQuarters: {
-        title: 'สำนักงานใหญ่',
-      },
-    },
-
-    table: {
-      orderNumber: 'ลําดับ',
-      fullname: 'ชื่อ-นามสกุล',
-      businessTypePure: 'ประเภทกิจการ',
-      address: 'ที่อยู่',
-      workPlace: 'สถานที่ทํางาน',
-      contactName: 'ชื่อผู้ติดต่อ',
-      contactPhone: 'โทรศัพท์ผู้ติดต่อ',
-    },
-  },
-  customerBranch: {
-    tab: {
-      main: 'เกี่ยวกับ',
-      address: 'ที่อยู่',
-      business: 'ธุรกิจ',
-      contact: 'ติดต่อ',
-      attachment: 'เอกสารเพิ่มเติม',
-    },
-    form: {
-      title: 'สาขา',
-      no: 'เลขที่สาขา',
-      code: 'รหัสสาขา',
-      taxNo: 'เลขทะเบียนนิติบุคคล',
-      name: 'ชื่อสาขา',
-      nameEN: 'ชื่อสาขา (ภาษาอังกฤษ)',
-      authorizedCapital: 'ทุนจดทะเบียน',
-      registerName: 'ชื่อที่จดทะเบียน',
-      registerDate: 'วันที่จดทะเบียน',
-      attachment: 'เอกสารเพิ่มเติม',
-    },
-  },
-  productService: {
-    group: {
-      addTitle: 'เพิ่มกลุ่มสินค้าและบริการ',
-    },
-    type: {
-      addTitle: 'เพิ่มประเภทสินค้าและบริการ',
-    },
-    service: {
-      title: 'บริการ',
-      showTotalPrice: 'แสดงราคารวม',
-    },
-    product: {
-      noProduct: 'ยังไม่มีสินค้า',
-      allProduct: 'สินค้าทั้งหมด',
-    },
-  },
-
-  backend: {
-    sameBranchCodeExists: 'ตัวย่อสำนักงานใหญ่นี้ถูกใช้แล้ว',
-  },
-  dialog: {
-    title: {
-      incompleteDataEntry: 'กรอกข้อมูลไม่ครบ',
-    },
-    message: {
-      incompleteDataEntry: 'กรอกข้อมูลไม่ครบในหน้า {tap}',
-    },
-    action: {
-      ok: 'ยืนยัน',
-      save: 'บันทึก',
-      saveAndClose: 'บันทึกและปิดหน้าต่าง',
-      close: 'ปิดหน้าต่าง',
-      delete: 'ลบ',
-      cancel: 'ยกเลิก',
-    },
-  },
-};
diff --git a/src/i18n/th-th/main.ts b/src/i18n/th-th/main.ts
deleted file mode 100644
index ea26c3f7..00000000
--- a/src/i18n/th-th/main.ts
+++ /dev/null
@@ -1,34 +0,0 @@
-export default {
-  mainBranchTitle: 'จัดการสาขา',
-  mainBranchCaption: 'จัดการสาขาภายในองค์กร',
-
-  mainPersonnelTitle: 'จัดการบุคลากร',
-  mainPersonnelCaption: 'จัดการคนภายในองค์กร',
-
-  mainCustomerTitle: 'จัดการลูกค้า',
-  mainCustomerCaption: 'จัดการคนภายในองค์กร',
-
-  mainProductTitle: 'สินค้าและบริการ',
-  mainProductCaption: 'ประเภทสินค้าและบริการ',
-
-  mainQuotationTitle: 'ใบเสนอราคา',
-  mainQuotationCaption: 'รายการใบเสนอราคา',
-
-  mainRequestTitle: 'รายการคำขอ',
-  mainRequestCaption: 'แสดงรายการคำขอ',
-
-  mainOrderTitle: 'ใบสั่งซื้อ',
-  mainOrderCaption: 'รายการใบสั่งซื้อ',
-
-  mainReceiptTitle: 'ใบรับสินค้า',
-  mainReceiptCaption: 'รายการใบรับสินค้า',
-
-  mainFinanceTitle: 'การจัดการการเงิน',
-  mainFinanceCaption: 'รายการบัญชีทั้งหมด',
-
-  mainDashboardTitle: 'Dashboard',
-  mainDashboardCaption: 'แสดงข้อมูลสถิติ',
-
-  mainReportTitle: 'รายงาน',
-  mainReportCaption: 'แสดงรายงาน',
-};
diff --git a/src/i18n/th-th/object.ts b/src/i18n/th-th/object.ts
deleted file mode 100644
index c66d37f1..00000000
--- a/src/i18n/th-th/object.ts
+++ /dev/null
@@ -1,75 +0,0 @@
-export default {
-  branchManagement: {
-    label: {
-      branchManagementCaption: 'จัดการทุกสาขา',
-      branchLabel: 'สาขา',
-      branchHQLabel: 'สำนักงานใหญ่',
-    },
-
-    table: {
-      title: {
-        office: 'สำนักงาน',
-        address: 'ที่อยู่',
-        //   formDialogInputTelephone: 'เบอร์โทรศัพท์',
-        telephone: 'เบอร์โทรศัพท์',
-        type: 'ประเภท',
-      },
-    },
-
-    input: {
-      label: {
-        search: 'ค้นหา',
-      },
-    },
-
-    manu: {
-      branchName: 'ชื่อสาขา',
-      branchLabelTel: 'เบอร์โทรศัพท์สาขา',
-      branchLabelAddress: 'ที่อยู่สาขา',
-      branchLabelType: 'ประเภทสาขา',
-      viewDetail: 'ดูรายละเอียด',
-      edit: 'แก้ไข',
-      delete: 'ลบ',
-      switchOnLabel: 'เปิด',
-      switchOffLabel: 'ปิด',
-    },
-  },
-
-  formDialog: {
-    section: {
-      formDialogTitleInformation: 'ข้อมูลพื้นฐาน',
-      formDialogTitleContact: 'ข้อมูลติดต่อ',
-      formDialogTitleAddress: 'ข้อมูลที่อยู่สำนักงานใหญ่',
-      formDialogTitleLocation: 'ตำแหน่งที่ตั้งสำนักงานใหญ่',
-      formDialogTitleImg: 'ภาพสำนักงาน',
-      subtopic: {
-        formDialogAddress: 'ที่อยู่ภาษาไทย',
-        formDialogAddressEN: 'ที่อยู่ภาษาอังกฤษ',
-      },
-    },
-    input: {
-      formDialogInputCode: 'รหัสสำนักงานใหญ่',
-      formDialogInputBrId: 'รหัสสาขา',
-      formDialogInputTaxNo: 'เลขทะเบียนนิติบุคคล',
-      formDialogInputNameSubBranch: 'ชื่อสาขา',
-      formDialogInputNameSubBranchEn: 'ชื่อสาขา (ภาษาอังกฤษ)',
-      formDialogInputEmailSubBranch: 'อีเมลติดต่อสาขา',
-      formDialogInputTelephoneSubBranch: 'เบอร์โทรศัพท์สาขา',
-      formDialogInputContactName: 'ชื่อผู้ติดต่อ',
-      formDialogInputTelephoneContact: 'เบอร์โทรศัพท์ผู้ติดต่อ',
-      address: 'ที่อยู่',
-      province: 'จังหวัด',
-      district: 'อำเภอ',
-      subDistrict: 'ตำบล',
-      zipCode: 'รหัสไปรษณีย์',
-    },
-
-    button: {
-      formDialogUploadQrCode: 'อัปโหลด QR Code',
-      formDialogBtnLocation: 'เริ่มแชร์ตำแหน่งที่ตั้ง',
-      formDialogBtnImg: 'เพิ่มภาพสำนักงาน',
-      agree: 'ตกลง',
-      cancel: 'ยกเลิก',
-    },
-  },
-};
diff --git a/src/i18n/th-th/other-document.ts b/src/i18n/th-th/other-document.ts
deleted file mode 100644
index 611a4ad1..00000000
--- a/src/i18n/th-th/other-document.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-export default {
-  otherDocument: 'เอกสารอื่นๆ',
-  additionalEmployerDocument: 'เอกสารนายจ้างเพิ่มเติม',
-};
diff --git a/src/i18n/th-th/personnel-main-page.ts b/src/i18n/th-th/personnel-main-page.ts
deleted file mode 100644
index f9b72d95..00000000
--- a/src/i18n/th-th/personnel-main-page.ts
+++ /dev/null
@@ -1,21 +0,0 @@
-export default {
-  personnelTitle: 'บุคลากร',
-  personnelManagement: 'จัดการบุคลากร',
-  personnelManagementCaption: 'จัดการบุคลากรทั้งหมด',
-
-  personnelTooltipTitle: 'ยังไม่มีข้อมูลบุคลากร',
-  personnelTooltipCaption: 'คลิก + เพื่อเพิ่มบุคลากร',
-  personnelAdd: 'เพิ่มบุคลากร',
-
-  USER: 'พนักงาน',
-  MESSENGER: 'พนักงานส่งเอกสาร',
-  DELEGATE: 'ตัวแทน',
-  AGENCY: 'เอเจนซี่',
-
-  personnelStatTitle: 'สรุปจำนวนข้อมูล',
-
-  personnelCardUserType: 'ประเภท',
-  personnelCardTelephone: 'โทรศัพท์',
-  personnelCardAge: 'อายุ',
-  personnelCardNationality: 'สัญชาติ',
-};
diff --git a/src/i18n/th-th/product-service.ts b/src/i18n/th-th/product-service.ts
deleted file mode 100644
index f3e33d54..00000000
--- a/src/i18n/th-th/product-service.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-export default {
-  productAndService: 'กลุ่มสินค้าและบริการ',
-  productAndServiceAll: 'กลุ่มสินค้าและบริการทั้งหมด',
-  productAndServiceType: 'ประเภทสินค้าและบริการ',
-  productAndServiceGroupCode: 'รหัสกลุ่มสินค้าและบริการ',
-  productAndServiceGroupName: 'ชื่อกลุ่มสินค้าและบริการ',
-  productAndServiceTypeCode: 'รหัสประเภทสินค้าและบริการ',
-  productAndServiceTypeName: 'ชื่อประเภทสินค้าและบริการ',
-
-  service: 'บริการ {msg}',
-  product: 'สินค้า',
-  productGroup: 'กลุ่มสินค้า {name}',
-  productType: 'ประเภทสินค้า {name}',
-
-  messageTooltipNoProduct: 'ยังไม่มีกลุ่มสินค้าและบริการ',
-  messageTooltipProductCreate: 'คลิก + เพื่อกลุ่มสินค้าและบริการ',
-
-  addProduct: 'เพิ่มกลุ่มสินค้าและบริการ',
-
-  productCreate: 'สร้างกลุ่มสินค้าและบริการ',
-
-  productCode: 'รหัสสินค้า',
-  productName: 'ชื่อสินค้า',
-  productDetail: 'รายละเอียดสินค้า',
-  productProcessingTime: 'ระยะเวลาดำเนินการ (วัน)',
-  priceeInformation: 'ข้อมูลราคา',
-  salePrice: 'ราคาขาย',
-  agentPrice: 'ราคาตัวแทน',
-  processingPrice: 'ราคาดำเนินการ',
-
-  editService: 'แก้ไขบริการ',
-  addService: 'เพิ่มบริการ',
-  buttonAddProduct: 'เพิ่มสินค้า',
-
-  editProduct: 'แก้ไขสินค้า',
-  serviceInformation: 'ข้อมูลบริการ',
-  workInformation: 'ข้อมูลงาน',
-  workName: 'ชื่องาน',
-  serviceCode: 'รหัสบริการ',
-  serviceName: 'ชื่อบริการ',
-  serviceDetail: 'รายละเอียดบริการ',
-  productInWork: 'สินค้าภายในงาน',
-  serviceAddProduct: 'เพิ่มสินค้า',
-  processTime: 'ระยะเวลาดำเนินการ',
-  day: 'วัน',
-
-  noField: 'ยังไมมีฟิลด์',
-
-  totalProductWork: 'รวมสินค้างาน',
-  workNo: 'งานที่',
-
-  addWork: 'เพิ่มงานใหม่',
-
-  properties: 'คุณสมบัติ',
-  noProperties: 'ยังไม่มีคุณสมบัติ',
-  serviceProperties: 'คุณสมบัติของบริการ',
-  workProperties: 'คุณสมบัติของงาน',
-  propertiesInWork: 'คุณสมบัติภายในงาน',
-  text: 'ข้อความ',
-  number: 'ตัวเลข',
-  date: 'วันที่',
-  selection: 'ตัวเลือก',
-  propertiesName: 'ชื่อคุณสมบัติ',
-  decimal: 'ทศนิยม',
-  decimalPlace: 'ตำแหน่ง',
-  useComma: 'ใส่ comma',
-  additional: 'เพิ่มเติม',
-  telMaxLength: 'จำนวนหลัก',
-  addSelection: 'เพิ่มตัวเลือก',
-  selectAll: 'เลือกทั้งหมด',
-
-  noProduct: 'ยังไม่มีสินค้า',
-};
diff --git a/src/i18n/th-th/status.ts b/src/i18n/th-th/status.ts
deleted file mode 100644
index 9c737811..00000000
--- a/src/i18n/th-th/status.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-export default {
-  statusCREATED: 'ดำเนินการอยู่',
-  statusACTIVE: 'ดำเนินการอยู่',
-  statusINACTIVE: 'ปิดดำเนินการ',
-};
diff --git a/src/i18n/th-th/user.ts b/src/i18n/th-th/user.ts
deleted file mode 100644
index 23499a75..00000000
--- a/src/i18n/th-th/user.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-export default {
-  firstname: 'ชื่อ',
-  lastname: 'นามสกุล',
-  fullname: 'ชื่อ-นามสกุล {msg}',
-  userType: 'ประเภทผู้ใช้งาน',
-  userRole: 'สิทธิ์ผู้ใช้งาน',
-  userCode: 'รหัสพนักงาน',
-};
diff --git a/src/i18n/tha/index.ts b/src/i18n/tha/index.ts
new file mode 100644
index 00000000..14bb00f9
--- /dev/null
+++ b/src/i18n/tha/index.ts
@@ -0,0 +1,483 @@
+export default {
+  general: {
+    ok: 'ตกลง',
+    save: 'บันทึก',
+    open: 'เปิด',
+    close: 'ปิด',
+    edit: 'แก้ไข',
+    cancel: 'ยกเลิก',
+    back: 'ย้อนกลับ',
+    undo: 'ย้อนกลับ',
+    search: 'ค้นหา',
+    download: 'ดาวน์โหลด',
+    delete: 'ลบ',
+    clear: 'ล้าง',
+    all: 'ทั้งหมด',
+    address: 'ที่อยู่',
+    add: 'เพิ่ม{text}',
+    telephone: 'เบอร์โทรศัพท์',
+    loading: 'กำลังโหลด',
+    confirm: 'ยืนยัน',
+    login: 'เข้าสู่ระบบ',
+    logout: 'ออกจากระบบ',
+    manage: 'จัดการ',
+    theme: 'ธีม',
+    light: 'สว่าง',
+    dark: 'มืด',
+    mode: 'โหมด',
+    dataSum: 'สรุปข้อมูล',
+    active: 'ใช้งาน',
+    inactive: 'ไม่ใช้งาน',
+    displayField: 'ฟิลด์แสดงผล',
+    order: 'ลำดับ',
+    name: 'ชื่อ',
+    fullName: 'ชื่อ-สกุล',
+    detail: 'รายละเอียด',
+    remark: 'หมายเหตุ',
+    createdAt: 'สร้างเมื่อ',
+    noData: 'ไม่มีข้อมูล',
+    noField: 'ไม่มีฟิลด์',
+    notFound: 'ไม่พบ',
+    viewDetail: 'ดูรายละเอียด',
+    type: 'ประเภท',
+    orderNumber: 'ลำดับที่',
+    recordPerPage: 'แสดงทีละ',
+    recordsPage: 'แสดง {resultcurrentPage} รายการจาก {total} รายการ',
+    day: 'วัน',
+    select: 'เลือก',
+    selectAll: 'เลือกทั้งหมด',
+    additional: 'เพิ่มเติม',
+    editImage: 'แก้ไขรูป',
+    upload: 'อัปโหลด',
+    baseOnDevice: 'สีตามอุปกรณ์',
+    clickToCreate: 'กดเพื่อสร้าง',
+    age: 'อายุ',
+    nationality: 'สัญชาติ',
+    times: 'ครั้งที่ {number}',
+  },
+  menu: {
+    dashboard: 'แดชบอร์ด',
+    dashboardCaption: 'แสดงข้อมูลสถิติ',
+
+    branch: 'จัดการสาขา',
+    branchCaption: 'จัดการสาขาภายในองค์กร',
+
+    user: 'จัดการบุคลากร',
+    userCaption: 'จัดการบุคลากรภายในองค์กร',
+
+    customer: 'จัดการลูกค้า',
+    customerCaption: 'จัดารลูกค้าภายในองค์กร',
+
+    product: 'สินค้าและบริการ',
+    productCaption: 'สินค้าและบริการ',
+
+    dms: 'จัดการเอกสาร',
+
+    quotation: 'ใบเสนอราคา',
+    quotationCaption: 'รายการใบเสนอราคา',
+
+    requestList: 'รายการคำขอ',
+    requestListCaption: 'แสดงรายการคำขอ',
+
+    workOrder: 'ใบสั่งงาน',
+    workOrderCaption: 'รายการใบสั่งงาน',
+
+    invoice: 'ใบรับสินค้า',
+    invoiceCaption: 'รายการใบรับสินค้า',
+
+    accountingLedger: 'รายการทางบัญชี',
+    accountingLedgerCaption: 'รายการบัญชีทั้งหมด',
+
+    report: 'รายงาน',
+    reportCaption: 'แสดงรายงาน',
+
+    profile: {
+      editPersonalInfo: 'แก้ไขข้อมูลส่วนตัว',
+      signature: 'ลายเซ็น',
+      mode: 'โหมด',
+      addSignature: 'เพิ่มลายเซ็น',
+    },
+  },
+  form: {
+    title: {
+      info: '{name}',
+      create: 'สร้าง {name}',
+      edit: 'แก้ไข {name}',
+    },
+    field: {
+      basicInformation: 'ข้อมูลพื้นฐาน',
+      address: 'ข้อมูลที่อยู่',
+    },
+    birthDate: 'วันเดือนปีเกิด',
+    email: 'อีเมล',
+    gender: 'เพศ',
+    telephone: 'เบอร์โทรศัพท์',
+    address: 'ที่อยู่ {suffix}',
+    province: 'จังหวัด',
+    district: 'อำเภอ',
+    subDistrict: 'ตำบล',
+    zipCode: 'รหัสไปรษณีย์',
+    prefixName: 'คํานําหน้า',
+    firstName: 'ชื่อ ภาษาไทย',
+    firstNameEN: 'ชื่อ ภาษาอังกฤษ',
+    lastName: 'นามสกุล ภาษาไทย',
+    lastNameEN: 'นามสกุล ภาษาอังกฤษ',
+    middleName: 'ชื่อกลาง',
+    middleNameEN: 'ชื่อกลาง ภาษาอังกฤษ',
+    error: {
+      required: 'จำเป็นต้องกรอกข้อมูลนี้',
+      select: 'โปรดเลือก',
+      selectField: 'โปรดเลือก{field}',
+      please: 'โปรดใส่ข้อมูล{msg}ให้ถูกต้อง',
+      invalid: 'ข้อมูลไม่ถูกต้อง',
+      invalidCustomeMessage: 'ข้อมูลไม่ถูกต้อง {msg}',
+    },
+    warning: {
+      title: 'แจ้งเตือน {msg}',
+      unsave:
+        'คุณมีการเปลี่ยนแปลงที่ยังไม่ได้บันทึก คุณต้องการปิดหน้าต่างนี้หรือไม่',
+    },
+    info: {
+      cantChange:
+        '{field} ไม่สามารถแก้ไขภายหลังได้ คุณต้องการใช้ "{name}" ใช่หรือไม่',
+    },
+    maxLength: 'จำนวนหลัก',
+    useComma: 'ใส่ Comma',
+    decimal: 'ทศนิยม',
+    decimalPlace: 'ตำแหน่ง',
+    selection: 'ตัวเลือก',
+  },
+  status: {
+    title: 'สถานะการใช้งาน',
+    CREATED: 'ใช้งานอยู่', // NOTE: Treated as active
+    ACTIVE: 'ใช้งานอยู่',
+    INACTIVE: 'ไม่ใช้งาน',
+  },
+  branch: {
+    office: 'สำนักงาน',
+    card: {
+      orderNumber: 'เลขที่',
+      branchLabelName: 'ชื่อ',
+      branchLabelAddress: 'ที่อยู่',
+      branchLabelTel: 'เบอร์โทรศัพท์',
+      branchLabelType: 'ประเภท',
+      branchLabel: 'สาขา',
+      branchHQLabel: 'สำนักงานใหญ่',
+    },
+    page: {
+      captionManage: 'จัดการ',
+    },
+    form: {
+      title: {
+        branchLabel: 'สาขา',
+        branchHQLabel: 'สำนักงานใหญ่',
+      },
+      group: {
+        contact: 'ติดต่อ',
+        location: 'ที่ตั้ง',
+        bankAccount: 'บัญชีธนาคาร',
+        admin: 'ผู้ดูแล',
+      },
+      shareLocation: 'แชร์ตำแหน่ง',
+      abbrev: 'ชื่อย่อ',
+      code: 'รหัสสำนักงานใหญ่',
+      codeBranch: 'รหัสสาขา',
+      taxNo: 'เลขประจำตัวผู้เสียภาษี',
+      contactName: 'ชื่อผู้ติดต่อ',
+      contactTelephone: 'เบอร์ผู้ติดต่อ',
+      branchName: 'ชื่อสาขา',
+      branchNameEN: 'ชื่อสาขา (EN)',
+      headofficeName: 'ชื่อสำนักงานใหญ่',
+      headofficeNameEN: 'ชื่อสำนักงานใหญ่ (EN)',
+      bankAccountNo: 'บัญชีที่ {no}',
+      bankAccountStatus: 'สถานะบัญชี',
+      bank: 'ธนาคาร',
+      bankBranch: 'สาขาธนาคาร',
+      bankAccountNumber: 'เลขบัญชี',
+      bankAccountName: 'ชื่อบัญชี',
+      bankAccountType: 'ประเภทบัญชี',
+    },
+  },
+  personnel: {
+    title: 'จัดการบุคลากร',
+    caption: 'จัดการบุคลากรทั้งหมด',
+    personnel: 'บุคลากร',
+    age: 'อายุ',
+    USER: 'พนักงาน',
+    MESSENGER: 'พนักงานส่งเอกสาร',
+    DELEGATE: 'ตัวแทน',
+    AGENCY: 'เอเจนซี่',
+    addTitle: 'เพิ่มบุคลากร',
+    tooltipTitle: 'ยังไม่มีข้อมูลบุคลากร',
+    tooltipCaption: 'คลิก + เพื่อเพิ่มบุคลากร',
+    form: {
+      personalInformation: 'ข้อมูลบุคคล',
+      addressInformation: 'ข้อมูลที่อยู่พนักงาน',
+      workInformation: 'ข้อมูลการทำงาน',
+      username: 'ชื่อผู้ใช้งาน',
+      userType: 'ประเภทผู้ใช้งาน',
+      userRole: 'สิทธิ์ผู้ใช้งาน',
+      prefixName: 'คํานําหน้า',
+      firstName: 'ชื่อ ภาษาไทย',
+      lastName: 'นามสกุล ภาษาไทย',
+      firstNameEN: 'ชื่อ ภาษาอังกฤษ',
+      lastNameEN: 'นามสกุล ภาษาอังกฤษ',
+      middleName: 'ชื่อกลาง',
+      middleNameEN: 'ชื่อกลาง ภาษาอังกฤษ',
+      regisNo: 'เลขประจำตัว นจ. 16 (เลขที่ขึ้นทะเบียน)',
+      startDate: 'วันที่เริ่มงาน',
+      retireDate: 'วันที่พ้นสภาพพนักงาน',
+      responsibleArea: 'พื้นที่ ที่รับผิดชอบในการส่งเอกสาร',
+      discount: 'เงื่อนไขส่วนลดบริการต่างๆ ของตัวแทน',
+      sourceNationality: 'สัญชาติต้นทาง',
+      importNationality: 'นำเข้าสัญชาติ',
+      trainingPlace: 'สถานที่อบรม',
+      checkpoint: 'ด่าน',
+      checkpointEN: 'ด่าน ภาษาอังกฤษ',
+      attachment: 'แบบเอกสารประจำตัว',
+    },
+  },
+  customer: {
+    employer: 'นายจ้าง',
+    employee: 'ลูกจ้าง',
+    employerLegalEntity: 'นิติบุคคล',
+    employerNaturalPerson: 'บุคคลธรรมดา',
+    employerType: 'ประเภทนายจ้าง',
+    form: {
+      selectType: 'เลือกประเภท',
+      group: {
+        branch: 'ข้อมูลสาขา',
+      },
+
+      prefix: {
+        mr: 'Mr.',
+        mrs: 'Mrs.',
+        miss: 'Miss.',
+      },
+
+      firstName: 'ชื่อ ภาษาไทย',
+      lastName: 'นามสกุล ภาษาไทย',
+      firstNameEN: 'ชื่อ ภาษาอังกฤษ',
+      lastNameEN: 'นามสกุล ภาษาอังกฤษ',
+
+      cardNumber: 'บัตรประชาชนเลขที่',
+
+      prefixName: 'คํานําหน้า',
+      legalPersonNo: 'ทะเบียนนิติบุคคลเลขที่',
+      registerName: 'ชื่อบริษัท',
+      registerNameEN: 'ชื่อบริษัท (EN)',
+      registerDate: 'จดทะเบียนเมื่อ',
+      registerCompanyName: 'จดทะเบียนชื่อ',
+      authorizedCapital: 'ทุนที่จดทะเบียน',
+
+      workplace: 'สถานที่ทํางาน',
+      workplaceEN: 'สถานที่ทํางาน (EN)',
+      address: 'ที่อยู่',
+      addressEN: 'ที่อยู่ (EN)',
+      branchCode: 'รหัสสาขา',
+      customerCode: 'รหัสนายจ้าง',
+      legalPersonCode: 'รหัสนิติบุคคล',
+
+      codeAbbrev: 'ชื่อย่อบริษัท',
+      codeNumber: 'เลขประจำตัวบริษัท',
+      registeredBranch: 'สาขาที่ลงทะเบียน',
+      customerName: 'ชื่อบริษัท',
+      customerNameEN: 'ชื่อบริษัท (EN)',
+      personName: 'ชื่อลูกค้า',
+      taxIdentificationNumber: 'หมายเลขทะเบียนนิติบุคคล',
+      branch: {
+        title: 'สาขาที่ {name}',
+      },
+      headQuarters: {
+        title: 'สำนักงานใหญ่',
+      },
+    },
+
+    table: {
+      orderNumber: 'ลําดับ',
+      fullname: 'ชื่อ-นามสกุล',
+      businessTypePure: 'ประเภทกิจการ',
+      address: 'ที่อยู่',
+      workPlace: 'สถานที่ทํางาน',
+      contactName: 'ชื่อผู้ติดต่อ',
+      contactPhone: 'โทรศัพท์ผู้ติดต่อ',
+    },
+  },
+  customerEmployee: {
+    branch: 'สาขา',
+    form: {
+      group: {
+        personalInfo: 'ข้อมูลส่วนตัว',
+        passport: 'หนังสือเดินทาง',
+        visa: 'วีซ่า',
+        healthCheck: 'ตรวจสุขภาพ',
+        workHistory: 'ประวัติการทำง่าน',
+        other: 'อื่นๆ',
+        family: 'ครอบครัว',
+      },
+      employerBranch: 'สาขานายจ้าง',
+      employeeCode: 'รหัสลูกจ้าง',
+      nrcNo: 'เลขบัตรประจำตัวคนซึ่งไม่มีสัญชาติไทย (N.R.C No.)',
+
+      passportNo: 'หมายเลขหนังสือเดินทาง',
+      passportRef:
+        'เลขอ้างอิงเลขที่หนังสือเดินทางเดิม (กรณีเปลี่ยนหนังสือเดินทาง)',
+      passportType: 'ประเภทหนังสือเดินทาง',
+      passportPlace: 'สถานที่ออกหนังสือเดินทาง',
+      passportIssuer: 'ประเทศที่ออกหนังสือเดินทาง',
+      passportIssueDate: 'วันออกอายุหนังสือเดินทาง',
+      passportExpireDate: 'วันหมดอายุหนังสือเดินทาง',
+
+      addressSame: 'ใช้ที่อยู่เดียวกับนายจ้าง',
+      addressCustom: 'กำหนดที่อยู่เอง',
+
+      visaType: 'ประเภทการตรวจลงตรา',
+      visaNo: 'เลขที่ตรวจลงตรา',
+      visaIssuance: 'ออกให้วันที่',
+      visaExpire: 'ใช้ได้ถึงวันที่',
+      visaPlace: 'ออกให้ที่',
+      visaStayUntil: 'ให้อยู่ในราชอาณาจักรถึงวันที่',
+      visaTM6: 'เลขที่ใบ ตม.6 (ใบขาเข้า)',
+      visaEnter: 'วันที่เดินทางเข้ามาในประเทศ',
+
+      employerSelect: {
+        branchName: 'ชื่อสาขา',
+        customerName: 'ชื่อนายจ้าง',
+      },
+    },
+    formHealthCheck: {
+      title: 'ตรวจสุขภาพ',
+
+      result: 'ผลการตรวจ',
+      checkupType: 'ประเภทการตรวจ',
+      hospital: 'โรงพยาบาล',
+      medicalBenefit: 'ประเภทสิทธิประโยชน์ทางการแพทย์',
+      coverageStartDate: 'วันที่เริ่มคุ้มครอง',
+      coverageExpireDate: 'วันที่สิ้นสุดการคุ้มครอง',
+      insuranceCompany: 'บริษัทประกัน',
+    },
+    formWorkHistory: {
+      title: 'ประวัติการทำงาน',
+
+      employerName: 'ชื่อนายจ้าง',
+      jobType: 'ประเภทงาน',
+      jobPosition: 'ตำแหน่งงาน',
+      workplace: 'สถานที่ทำงาน',
+      workUntil: 'อนุญาตทำงานจนถึง',
+      permitNo: 'เลขที่ใบอนุญาตทำงาน',
+      permitIssueDate: 'วันที่ออกใบอนุญาตทำงาน',
+      permitExpireDate: 'วันที่หมดอายุใบอนุญาตทำงาน',
+    },
+    formFamily: {
+      citizenId:
+        'เลขประจำตัวประชาชนของผู้ทำงาน (เลขประจำตัวประชาชนจากประเทศต้นกำเนิด)',
+      father: 'บิดา',
+      fatherBirthPlace: 'สถานที่เกิดของบิดา',
+      mother: 'มารดา',
+      motherBirthPlace: 'สถานที่เกิดของมารดา',
+    },
+  },
+  customerBranch: {
+    tab: {
+      main: 'เกี่ยวกับ',
+      address: 'ที่อยู่',
+      business: 'ธุรกิจ',
+      contact: 'ติดต่อ',
+      attachment: 'เอกสารเพิ่มเติม',
+    },
+    form: {
+      title: 'สาขา',
+      no: 'เลขที่สาขา',
+      code: 'รหัสสาขา',
+      taxNo: 'เลขทะเบียนนิติบุคคล',
+      name: 'ชื่อสาขา',
+      nameEN: 'ชื่อสาขา (ภาษาอังกฤษ)',
+      authorizedCapital: 'ทุนจดทะเบียน',
+      registerName: 'ชื่อที่จดทะเบียน',
+      registerDate: 'วันที่จดทะเบียน',
+      telephone: 'โทรศัพท์',
+      attachment: 'เอกสารเพิ่มเติม',
+    },
+  },
+  productService: {
+    title: 'สินค้าและบริการ',
+    caption: 'จัดการสินค้าและบริการทั้งหมด',
+    group: {
+      title: 'กลุ่มสินค้าและบริการ',
+      withName: 'กลุ่ม {name}',
+      addTitle: 'เพิ่มกลุ่มสินค้าและบริการ',
+      code: 'รหัสสินค้าและบริการ',
+      name: 'ชื่อสินค้าและบริการ',
+    },
+    type: {
+      title: 'ปรเภทสินค้าและบริการ',
+      withName: 'ประเภท {name}',
+      addTitle: 'เพิ่มประเภทสินค้าและบริการ',
+      code: 'รหัสสินค้าและบริการ',
+      name: 'ชื่อสินค้าและบริการ',
+    },
+    service: {
+      title: 'บริการ',
+      totalWork: 'งานทั้งหมด',
+      code: 'รหัสบริการ',
+      name: 'ชื่อบริการ',
+      work: 'งาน',
+      workName: 'ชื่องาน',
+      showTotalPrice: 'แสดงราคารวม',
+      addTitle: 'เพิ่มบริการ',
+      registeredBranch: 'สาขาที่ลงทะเบียน',
+      information: 'ข้อมูลบริการ',
+      workInformation: 'ข้อมูลงาน',
+      serviceProperties: 'คุณสมบัติของบริการ',
+      propertiesName: 'ชื่อคุณสมบัติ',
+      properties: 'คุณสมบัติ',
+      noProperties: 'ยังไม่มีคุณสมบัติ',
+      propertiesInWork: 'คุณสมบัติภายในงาน',
+      productInWork: 'สินค้าภายในงาน',
+      totalProductWork: 'รวมสินค้างาน',
+      list: 'รายการ',
+      addWork: 'เพิ่มงาน',
+    },
+    product: {
+      title: 'สินค้า',
+      code: 'รหัสสินค้า',
+      name: 'ชื่อสินค้า',
+      registeredBranch: 'สาขาที่ลงทะเบียน',
+      noProduct: 'ยังไม่มีสินค้า',
+      allProduct: 'สินค้าทั้งหมด',
+      addTitle: 'เพิ่มสินค้า',
+      processingTime: 'ระยะเวลาดำเนินการ',
+      processingTimeDay: 'ระยะเวลาดำเนินการ (วัน)',
+      priceInformation: 'ข้อมูลราคา',
+      salePrice: 'ราคาขาย',
+      agentPrice: 'ราคาตัวแทน',
+      processingPrice: 'ราคาดำเนินการ',
+    },
+  },
+
+  backend: {
+    sameBranchCodeExists: 'ตัวย่อสำนักงานใหญ่นี้ถูกใช้แล้ว',
+  },
+
+  dialog: {
+    title: {
+      incompleteDataEntry: 'กรอกข้อมูลไม่ครบ',
+      confirmChangeStatus: 'ยืนยันการเปลี่ยนสถานะ',
+      confirmDelete: 'ยืนยันการลบ',
+    },
+    message: {
+      incompleteDataEntry: 'กรอกข้อมูลไม่ครบในหน้า {tap}',
+      confirmChangeStatusOn: 'คุณต้องการเปิดใช่หรือไม่',
+      confirmChangeStatusOff: 'คุณต้องการปิดใช่หรือไม่',
+      confirmDelete: 'คุณต้องการลบรายการนี้ใช่หรือไม่',
+    },
+    action: {
+      ok: 'ยืนยัน',
+      save: 'บันทึก',
+      saveAndClose: 'บันทึกและปิดหน้าต่าง',
+      close: 'ปิดหน้าต่าง',
+      delete: 'ลบ',
+      cancel: 'ยกเลิก',
+    },
+  },
+};
diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index eb92e04a..4a2e677d 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -27,14 +27,14 @@ onMounted(async () => {
 
   labelMenu.value = [
     {
-      label: 'drawerDashboard',
+      label: 'menu.dashboard',
       icon: 'isax-element-35',
       route: '',
       isax: true,
       disabled: true,
     },
     {
-      label: 'drawerBranchManagement',
+      label: 'menu.branch',
       icon: 'mdi-chart-donut',
       route: '/branch-management',
       hidden:
@@ -47,7 +47,7 @@ onMounted(async () => {
           : true,
     },
     {
-      label: 'drawerPersonnelManagement',
+      label: 'menu.user',
       icon: 'fa6-solid:building-user',
       route: '/personnel-management',
       hidden:
@@ -60,13 +60,13 @@ onMounted(async () => {
           : true,
     },
     {
-      label: 'drawerCustomerManagement',
+      label: 'menu.customer',
       icon: 'isax-frame5',
       route: '/customer-management',
       isax: true,
     },
     {
-      label: 'drawerProductsAndServices',
+      label: 'menu.product',
       icon: 'heroicons-truck-solid',
       route: '/product-service',
     },
@@ -76,40 +76,40 @@ onMounted(async () => {
       route: '/document-management',
     },
     {
-      label: 'drawerQuotation',
+      label: 'menu.quotation',
       icon: 'mdi-file-document',
       route: '',
       disabled: true,
     },
     {
-      label: 'drawerRequestList',
+      label: 'menu.requestList',
       icon: 'isax-device-message5',
       route: '',
       disabled: true,
       isax: true,
     },
     {
-      label: 'drawerWorkOrder',
+      label: 'menu.workOrder',
       icon: 'isax-receipt-2-15',
       route: '',
       disabled: true,
       isax: true,
     },
     {
-      label: 'drawerInvoice',
+      label: 'menu.invoice',
       icon: 'material-symbols:box',
       route: '',
       disabled: true,
     },
     {
-      label: 'drawerAccountingLedger',
+      label: 'menu.accountingLedger',
       icon: 'isax-dollar-circle4',
       route: '',
       isax: true,
       disabled: true,
     },
     {
-      label: 'drawerReport',
+      label: 'menu.report',
       icon: 'mdi-file-document',
       route: '',
       disabled: true,
@@ -237,13 +237,13 @@ function branchSetting() {}
       >
         <span class="text-weight-bold ellipsis full-width">
           {{
-            ($i18n.locale === 'en-US'
+            ($i18n.locale === 'eng'
               ? currentMyBranch?.nameEN
               : currentMyBranch?.name) ?? '-'
           }}
           <q-tooltip>
             {{
-              ($i18n.locale === 'en-US'
+              ($i18n.locale === 'eng'
                 ? currentMyBranch?.nameEN
                 : currentMyBranch?.name) ?? '-'
             }}
diff --git a/src/layouts/MainLayout.vue b/src/layouts/MainLayout.vue
index ac7250b0..21823ee3 100644
--- a/src/layouts/MainLayout.vue
+++ b/src/layouts/MainLayout.vue
@@ -62,8 +62,8 @@ const language: {
   icon: string;
   date: string;
 }[] = [
-  { value: 'th-th', label: 'ไทย', icon: 'th', date: 'th' },
-  { value: 'en-US', label: 'English', icon: 'us', date: 'en-gb' },
+  { value: 'tha', label: 'ไทย', icon: 'th', date: 'th' },
+  { value: 'eng', label: 'English', icon: 'us', date: 'en-gb' },
 ];
 
 const notiOpen = ref(false);
@@ -134,9 +134,9 @@ watch(
   () => {
     localStorage.setItem('currentLanguage', currentLanguage.value);
     if (rawOption.value) {
-      if (locale.value === 'en-US')
+      if (locale.value === 'eng')
         optionStore.globalOption = rawOption.value.eng;
-      if (locale.value === 'th-th')
+      if (locale.value === 'tha')
         optionStore.globalOption = rawOption.value.tha;
     }
   },
@@ -149,18 +149,18 @@ onMounted(async () => {
   const getCurLang = localStorage.getItem('currentLanguage');
   if (getCurLang) currentLanguage.value = getCurLang;
   if (currentLanguage.value === 'English') {
-    locale.value = 'en-US';
+    locale.value = 'eng';
     setLocale('en-gb');
   }
   if (currentLanguage.value === 'ไทย') {
-    locale.value = 'th-th';
+    locale.value = 'tha';
     setLocale('th');
   }
 
   const resultOption = await fetch('/option/option.json');
   rawOption.value = await resultOption.json();
-  if (locale.value === 'en-US') optionStore.globalOption = rawOption.value.eng;
-  if (locale.value === 'th-th') optionStore.globalOption = rawOption.value.tha;
+  if (locale.value === 'eng') optionStore.globalOption = rawOption.value.eng;
+  if (locale.value === 'tha') optionStore.globalOption = rawOption.value.tha;
 
   const user = getUsername();
   const uid = getUserId();
@@ -254,7 +254,7 @@ onMounted(async () => {
               }
             "
           />
-          <div class="column">
+          <div class="column col">
             <span
               class="title-gradient text-weight-bold"
               :class="{ 'text-h6': $q.screen.gt.xs }"
@@ -478,7 +478,7 @@ onMounted(async () => {
       height="550px"
       v-model:modal="canvasModal"
       no-app-box
-      :title="$t('addSignature')"
+      :title="$t('menu.profile.addSignature')"
       :close="() => (canvasModal = false)"
     >
       <CanvasComponent ref="canvasRef" v-model:modal="canvasModal" />
diff --git a/src/layouts/ProfileMenu.vue b/src/layouts/ProfileMenu.vue
index 7e8802e1..cb595caa 100644
--- a/src/layouts/ProfileMenu.vue
+++ b/src/layouts/ProfileMenu.vue
@@ -24,19 +24,19 @@ const currentTheme = ref();
 const options = ref([
   {
     icon: 'mdi-account',
-    label: 'editPersonalInfo',
+    label: 'menu.profile.editPersonalInfo',
     value: 'op1',
     color: 'grey',
   },
   {
     icon: 'mdi-signature-freehand',
-    label: 'signature',
+    label: 'menu.profile.signature',
     value: 'op2',
     color: 'grey',
   },
   {
     icon: 'mdi-brightness-6',
-    label: 'mode',
+    label: 'menu.profile.mode',
     value: 'op3',
     color: 'grey',
   },
@@ -334,7 +334,7 @@ onMounted(async () => {
             <div class="column justify-center">
               <q-list :dense="true" v-for="op in options" :key="op.label">
                 <q-item
-                  v-if="op.label !== 'mode'"
+                  v-if="op.label !== 'menu.profile.mode'"
                   clickable
                   :id="`btn-${op.label}`"
                   @click="$emit(op.label)"
@@ -347,9 +347,9 @@ onMounted(async () => {
                   </q-item-section>
                 </q-item>
 
-                <q-separator v-if="op.label === 'mode'" />
+                <q-separator v-if="op.label === 'menu.profile.mode'" />
                 <q-item
-                  v-if="op.label === 'mode'"
+                  v-if="op.label === 'menu.profile.mode'"
                   clickable
                   :id="`btn-${op.label}`"
                   @click="$emit(op.label)"
@@ -363,7 +363,7 @@ onMounted(async () => {
                         {{ $t(op.label) }}
                       </span>
                       <span class="app-text-muted-2">
-                        {{ $t(currentTheme) }}
+                        {{ $t(`general.${currentTheme}`) }}
                         <q-icon name="mdi-chevron-right" />
                       </span>
                     </div>
@@ -389,7 +389,7 @@ onMounted(async () => {
                         <q-item-section>
                           <div class="row justify-between">
                             <span>
-                              {{ $t(mode.label) }}
+                              {{ $t(`general.${mode.label}`) }}
                             </span>
                             <q-icon v-if="mode.isActive" name="mdi-check" />
                           </div>
@@ -408,7 +408,7 @@ onMounted(async () => {
               unelevated
               class="q-ma-md app-text-negative"
               :class="{ dark: $q.dark.isActive }"
-              :label="$t('logout')"
+              :label="$t('general.logout')"
               @click="$emit('logout')"
               id="btn-logout"
               style="background-color: hsla(var(--negative-bg) / 0.1)"
@@ -421,7 +421,7 @@ onMounted(async () => {
               color="primary"
               unelevated
               class="q-ma-md app-text-negative"
-              :label="$t('login')"
+              :label="$t('general.login')"
               @click="$emit('login')"
               id="btn-login"
               v-close-popup
diff --git a/src/pages/01_branch-management/MainPage.vue b/src/pages/01_branch-management/MainPage.vue
index df584464..993718ab 100644
--- a/src/pages/01_branch-management/MainPage.vue
+++ b/src/pages/01_branch-management/MainPage.vue
@@ -54,34 +54,34 @@ const columns = [
   {
     name: 'orderNumber',
     align: 'center',
-    label: 'orderNumber',
+    label: 'general.orderNumber',
     field: 'branchNo',
   },
 
   {
     name: 'branchLabelName',
     align: 'left',
-    label: 'office',
+    label: 'branch.office',
     field: 'name',
     sortable: true,
   },
   {
     name: 'branchLabelAddress',
     align: 'left',
-    label: 'address',
+    label: 'general.address',
     field: 'address',
     sortable: true,
   },
   {
     name: 'branchLabelTel',
     align: 'left',
-    label: 'formDialogInputTelephone',
+    label: 'general.telephone',
     field: 'telephoneNo',
   },
   {
     name: 'branchLabelType',
     align: 'left',
-    label: 'type',
+    label: 'general.type',
     field: 'isHeadOffice',
   },
 ] satisfies QTableProps['columns'];
@@ -182,13 +182,13 @@ async function calculateStats() {
       {
         icon: 'mdi-office-building-outline',
         count: _stats.hq,
-        label: 'branchHQLabel',
+        label: 'branch.card.branchHQLabel',
         color: 'pink',
       },
       {
         icon: 'mdi-home-group',
         count: _stats.br,
-        label: 'branchLabel',
+        label: 'branch.card.branchLabel',
         color: 'purple',
       },
     ];
@@ -196,10 +196,10 @@ async function calculateStats() {
 }
 
 onMounted(async () => {
-  utilsStore.currentTitle.title = 'branchManagement';
+  utilsStore.currentTitle.title = 'menu.branch';
   utilsStore.currentTitle.path = [
     {
-      text: 'branchManagementCaption',
+      text: 'branch.page.captionManage',
       i18n: true,
       handler: () => {
         fieldSelectedBranch.value.value = 'branchHQLabel';
@@ -257,7 +257,7 @@ const fieldSelectedBranch = ref<{
   label: string;
   value: string;
 }>({
-  label: t('branchHQLabel'),
+  label: t('branch.form.title.branchHQLabel'),
   value: 'branchHQLabel',
 });
 
@@ -516,13 +516,13 @@ async function triggerChangeStatus(
       color: status !== 'INACTIVE' ? 'warning' : 'info',
       icon:
         status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-message-processing-outline',
-      title: t('confirmChangeStatusTitle'),
+      title: t('dialog.title.confirmChangeStatus'),
       actionText:
-        status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
+        status !== 'INACTIVE' ? t('general.close') : t('general.open'),
       message:
         status !== 'INACTIVE'
-          ? t('confirmChangeStatusOffMessage')
-          : t('confirmChangeStatusOnMessage'),
+          ? t('dialog.message.confirmChangeStatusOff')
+          : t('dialog.message.confirmChangeStatusOn'),
       action: async () => {
         const res = await branchStore.editById(id, {
           status: status !== 'INACTIVE' ? 'INACTIVE' : 'ACTIVE',
@@ -623,21 +623,16 @@ function changeTitle(
   formType: 'edit' | 'create' | 'delete' | 'view',
   typeBranch: 'headOffice' | 'subBranch',
 ) {
-  if (typeBranch === 'headOffice') {
-    return formType === 'create'
-      ? t('formDialogTitleCreateHeadOffice')
-      : formType === 'view'
-        ? t('formDialogTitleViewHeadOffice')
-        : t('formDialogTitleEditHeadOffice');
-  }
-  if (typeBranch === 'subBranch') {
-    return formType === 'create'
-      ? t('formDialogTitleCreateSubBranch')
-      : formType === 'view'
-        ? t('formDialogTitleViewSubBranch')
-        : t('formDialogTitleEditSubBranch');
-  }
-  return '';
+  const _type =
+    typeBranch === 'headOffice'
+      ? 'branch.card.branchHQLabel'
+      : 'branch.card.branchHQLabel';
+
+  return formType === 'create'
+    ? t('form.title.create', { name: t(_type) })
+    : formType === 'view'
+      ? t(_type)
+      : t('general.edit');
 }
 
 function handleHold(node: BranchWithChildren) {
@@ -672,7 +667,7 @@ watch(
 watch(currentHq, () => {
   const tmp: typeof utilsStore.currentTitle.path = [
     {
-      text: 'branchManagementCaption',
+      text: 'branch.page.captionManage',
       i18n: true,
       handler: () => {
         expandedTree.value = expandedTree.value.filter(
@@ -701,7 +696,7 @@ watch(currentHq, () => {
 <template>
   <div class="column full-height no-wrap">
     <div class="text-body-2 q-mb-xs flex items-center">
-      {{ $t('branchStatTitle') }}
+      {{ $t('general.dataSum') }}
       <q-btn
         class="q-ml-xs"
         icon="mdi-pin-outline"
@@ -745,15 +740,16 @@ watch(currentHq, () => {
           <div class="self-end q-ma-md">
             <TooltipComponent
               class="self-end"
-              title="branchNoMainOfficeYet"
-              caption="branchClickToCreateMainOffice"
+              title="general.noData"
+              caption="general.clickToCreate"
               imgSrc="personnel-table-"
             />
           </div>
 
           <div class="col flex items-center justify-center">
             <EmptyAddButton
-              label="branchAdd"
+              label="general.add"
+              :i18nArgs="{ text: $t('branch.form.title.branchLabel') }"
               @trigger="() => triggerCreate('headOffice')"
             />
           </div>
@@ -901,7 +897,7 @@ watch(currentHq, () => {
                     for="input-search"
                     outlined
                     dense
-                    :label="$t('search')"
+                    :label="$t('general.search')"
                     class="q-mr-md col-12 col-md-4"
                     :bg-color="$q.dark.isActive ? 'dark' : 'white'"
                     v-model="inputSearch"
@@ -929,10 +925,10 @@ watch(currentHq, () => {
                       :for="'field-select-status'"
                       emit-value
                       :options="[
-                        { label: $t('all'), value: 'all' },
-                        { label: $t('statusACTIVE'), value: 'statusACTIVE' },
+                        { label: $t('general.all'), value: 'all' },
+                        { label: $t('status.ACTIVE'), value: 'statusACTIVE' },
                         {
-                          label: $t('statusINACTIVE'),
+                          label: $t('status.INACTIVE'),
                           value: 'statusINACTIVE',
                         },
                       ]"
@@ -943,9 +939,12 @@ watch(currentHq, () => {
                       id="select-field"
                       for="select-field"
                       :options="
-                        fieldDisplay.map((v) => ({ label: $t(v), value: v }))
+                        fieldDisplay.map((v) => ({
+                          label: $t(`branch.card.${v}`),
+                          value: v,
+                        }))
                       "
-                      :display-value="$t('displayField')"
+                      :display-value="$t('general.displayField')"
                       :hide-dropdown-icon="$q.screen.lt.sm"
                       class="col q-mx-sm"
                       v-model="fieldSelected"
@@ -1018,7 +1017,7 @@ watch(currentHq, () => {
                         .filter((v) => {
                           if (
                             statusFilter === 'statusACTIVE' &&
-                            v.status === 'INACTIVE'
+                            v.status !== 'ACTIVE'
                           ) {
                             return false;
                           }
@@ -1029,7 +1028,7 @@ watch(currentHq, () => {
                             return false;
                           }
 
-                          const terms = `${v.code} ${$i18n.locale === 'en-US' ? v.nameEN : v.name} ${v.telephoneNo}`;
+                          const terms = `${v.code} ${$i18n.locale === 'eng' ? v.nameEN : v.name} ${v.telephoneNo}`;
                           if (inputSearch && !terms.includes(inputSearch)) {
                             return false;
                           }
@@ -1185,8 +1184,8 @@ watch(currentHq, () => {
                         <q-td v-if="fieldSelected.includes('branchLabelType')">
                           {{
                             props.row.isHeadOffice
-                              ? $t('branchHQLabel')
-                              : $t('branchLabel')
+                              ? $t('branch.card.branchHQLabel')
+                              : $t('branch.card.branchLabel')
                           }}
                         </q-td>
                         <q-td>
@@ -1232,7 +1231,7 @@ watch(currentHq, () => {
                                     style="color: hsl(var(--green-6-hsl))"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('viewDetail') }}
+                                    {{ $t('general.viewDetail') }}
                                   </span>
                                 </q-item>
 
@@ -1270,7 +1269,7 @@ watch(currentHq, () => {
                                     style="color: hsl(var(--cyan-6-hsl))"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('edit') }}
+                                    {{ $t('general.edit') }}
                                   </span>
                                 </q-item>
                                 <q-item
@@ -1297,7 +1296,7 @@ watch(currentHq, () => {
                                     }"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('delete') }}
+                                    {{ $t('general.delete') }}
                                   </span>
                                 </q-item>
 
@@ -1329,8 +1328,8 @@ watch(currentHq, () => {
                                       <span class="q-pl-md">
                                         {{
                                           props.row.status !== 'INACTIVE'
-                                            ? $t('switchOnLabel')
-                                            : $t('switchOffLabel')
+                                            ? $t('general.open')
+                                            : $t('general.close')
                                         }}
                                       </span>
                                     </div>
@@ -1378,20 +1377,20 @@ watch(currentHq, () => {
                           :data="{
                             branchLabelCode: props.row.code,
                             branchLabelName:
-                              $i18n.locale === 'en-US'
+                              $i18n.locale === 'eng'
                                 ? props.row.nameEN
                                 : props.row.name,
                             branchLabelTel: props.row.contact
                               .map((c: BranchContact) => c.telephoneNo)
                               .join(','),
                             branchLabelAddress:
-                              $i18n.locale === 'en-US'
+                              $i18n.locale === 'eng'
                                 ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                                 : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
                             branchLabelType: $t(
                               props.row.isHeadOffice
-                                ? 'branchHQLabel'
-                                : 'branchLabel',
+                                ? 'branch.branchHQLabel'
+                                : 'branch.branchLabel',
                             ),
                             branchImgUrl: `/branch/${props.row.id}/branch-image`,
                           }"
@@ -1443,7 +1442,7 @@ watch(currentHq, () => {
                                     style="color: hsl(var(--green-6-hsl))"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('viewDetail') }}
+                                    {{ $t('general.viewDetail') }}
                                   </span>
                                 </q-item>
 
@@ -1481,7 +1480,7 @@ watch(currentHq, () => {
                                     style="color: hsl(var(--cyan-6-hsl))"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('edit') }}
+                                    {{ $t('general.edit') }}
                                   </span>
                                 </q-item>
                                 <q-item
@@ -1508,7 +1507,7 @@ watch(currentHq, () => {
                                     }"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('delete') }}
+                                    {{ $t('generaldelete') }}
                                   </span>
                                 </q-item>
 
@@ -1540,8 +1539,8 @@ watch(currentHq, () => {
                                       <span class="q-pl-md">
                                         {{
                                           props.row.status !== 'INACTIVE'
-                                            ? $t('switchOnLabel')
-                                            : $t('switchOffLabel')
+                                            ? $t('general.open')
+                                            : $t('general.close')
                                         }}
                                       </span>
                                     </div>
@@ -1628,19 +1627,19 @@ watch(currentHq, () => {
           <SideMenu
             :menu="[
               {
-                name: $t('formDialogTitleInformation'),
+                name: $t('form.field.basicInformation'),
                 anchor: 'form-information',
               },
               {
-                name: $t('formDialogTitleContact'),
+                name: $t('branch.form.group.contact'),
                 anchor: 'form-contact',
               },
               {
-                name: $t('formDialogTitleAddress'),
+                name: $t('form.address'),
                 anchor: 'form-address',
               },
               {
-                name: $t('formDialogTitleLocation'),
+                name: $t('branch.form.group.location'),
                 anchor: 'form-location',
               },
               {
@@ -1648,7 +1647,7 @@ watch(currentHq, () => {
                 anchor: 'form-qr',
               },
               {
-                name: $t('bankBook'),
+                name: $t('branch.form.group.bankAccount'),
                 anchor: 'form-bank',
               },
             ]"
@@ -1676,7 +1675,7 @@ watch(currentHq, () => {
           :outlined="true"
           :readonly="formType === 'view'"
           :view="isSubCreate"
-          title="formDialogTitleInformation"
+          title="form.field.basicInformation"
         />
         <FormBranchContact
           id="form-contact"
@@ -1687,7 +1686,7 @@ watch(currentHq, () => {
           v-model:contact-name="formData.contactName"
           v-model:line-id="formData.lineId"
           :separator="true"
-          title="formDialogTitleContact"
+          title="branch.form.group.contact"
           :dense="true"
           :outlined="true"
         />
@@ -1698,11 +1697,7 @@ watch(currentHq, () => {
           outlined
           separator
           prefix-id="default"
-          :title="
-            $t(
-              `${!formData.codeHeadOffice ? 'formDialogTitleAddress' : 'branchLabelAddress'}`,
-            )
-          "
+          :title="$t('form.address')"
           v-model:address="formData.address"
           v-model:addressEN="formData.addressEN"
           v-model:province-id="formData.provinceId"
@@ -1716,7 +1711,7 @@ watch(currentHq, () => {
           :separator="true"
           v-model:latitude="formData.latitude"
           v-model:longitude="formData.longitude"
-          title="formDialogTitleLocation"
+          title="branch.form.group.location"
         />
         <FormQr
           id="form-qr"
@@ -1732,7 +1727,7 @@ watch(currentHq, () => {
         />
         <FormBank
           id="form-bank"
-          title="bankBook"
+          title="branch.form.group.bankAccount"
           dense
           v-model:bank-book-list="formBankBook"
         />
@@ -1754,8 +1749,7 @@ watch(currentHq, () => {
     ref="formDialogRef"
     v-model:drawerOpen="modalDrawer"
     :category="changeTitle(formType, formTypeBranch)"
-    :title="$i18n.locale === 'en-US' ? formData.nameEN : formData.name"
-    :titleFormAddress="$t('formDialogTitleAddress')"
+    :title="$i18n.locale === 'eng' ? formData.nameEN : formData.name"
     :addressSeparator="true"
     :undo="() => undo()"
     :isEdit="formType === 'edit'"
@@ -1853,19 +1847,19 @@ watch(currentHq, () => {
             <SideMenu
               :menu="[
                 {
-                  name: $t('formDialogTitleInformation'),
+                  name: $t('form.field.basicInformation'),
                   anchor: 'info-information',
                 },
                 {
-                  name: $t('formDialogTitleContact'),
+                  name: $t('branch.form.group.contact'),
                   anchor: 'info-contact',
                 },
                 {
-                  name: $t('formDialogTitleAddress'),
+                  name: $t('form.address'),
                   anchor: 'info-address',
                 },
                 {
-                  name: $t('formDialogTitleLocation'),
+                  name: $t('branch.form.group.location'),
                   anchor: 'info-location',
                 },
                 {
@@ -1873,7 +1867,7 @@ watch(currentHq, () => {
                   anchor: 'info-qr',
                 },
                 {
-                  name: $t('bankBook'),
+                  name: $t('branch.form.group.bankAccount'),
                   anchor: 'info-bank',
                 },
               ]"
@@ -1904,12 +1898,12 @@ watch(currentHq, () => {
               :outlined="true"
               :readonly="formType === 'view'"
               view
-              title="formDialogTitleInformation"
+              title="form.field.basicInformation"
               class="q-mb-xl"
             />
             <FormBranchContact
               id="info-contact"
-              title="formDialogTitleContact"
+              title="branch.form.group.contact"
               v-model:telephone-no="formData.telephoneNo"
               v-model:contact="formData.contact"
               v-model:email="formData.email"
@@ -1928,11 +1922,7 @@ watch(currentHq, () => {
               outlined
               separator
               prefix-id="default"
-              :title="
-                $t(
-                  `${!formData.headOfficeId ? 'formDialogTitleAddress' : 'branchLabelAddress'}`,
-                )
-              "
+              :title="$t('form.address')"
               :readonly="formType === 'view'"
               v-model:address="formData.address"
               v-model:addressEN="formData.addressEN"
@@ -1944,7 +1934,7 @@ watch(currentHq, () => {
             />
             <FormLocation
               id="info-location"
-              title="formDialogTitleLocation"
+              title="branch.form.group.location"
               v-model:latitude="formData.latitude"
               v-model:longitude="formData.longitude"
               :readonly="formType === 'view'"
@@ -1966,7 +1956,7 @@ watch(currentHq, () => {
             <FormBank
               id="info-bank"
               :readonly="formType === 'view'"
-              title="bankBook"
+              title="branch.form.group.bankAccount"
               dense
               v-model:bank-book-list="formBankBook"
               class="q-mb-xl"
@@ -2103,8 +2093,8 @@ watch(currentHq, () => {
           <q-item-section>
             {{
               currentNode.status !== 'INACTIVE'
-                ? $t('switchOnLabel')
-                : $t('switchOffLabel')
+                ? $t('general.open')
+                : $t('general.close')
             }}
           </q-item-section>
         </q-item>
diff --git a/src/pages/02_personnel-management/MainPage.vue b/src/pages/02_personnel-management/MainPage.vue
index 9f850b03..e2e76d66 100644
--- a/src/pages/02_personnel-management/MainPage.vue
+++ b/src/pages/02_personnel-management/MainPage.vue
@@ -96,32 +96,32 @@ const modeView = ref(false);
 
 const fieldSelectedOption = ref<{ label: string; value: string }[]>([
   {
-    label: 'orderNumber',
+    label: 'general.order',
     value: 'orderNumber',
   },
 
   {
-    label: 'fullname',
+    label: 'general.fullName',
     value: 'name',
   },
   {
-    label: 'type',
+    label: 'general.type',
     value: 'type',
   },
   {
-    label: 'telephone',
+    label: 'general.telephone',
     value: 'telephoneNo',
   },
   {
-    label: 'personnelCardAge',
+    label: 'personnel.age',
     value: 'birthDate',
   },
   {
-    label: 'formDialogInputEmail',
+    label: 'form.email',
     value: 'email',
   },
   {
-    label: 'userRole',
+    label: 'personnel.form.userRole',
     value: 'userRole',
   },
 ]);
@@ -247,45 +247,45 @@ const columns = [
   {
     name: 'orderNumber',
     align: 'center',
-    label: 'orderNumber',
+    label: 'general.order',
     field: 'branchNo',
   },
 
   {
     name: 'name',
     align: 'left',
-    label: 'fullname',
+    label: 'general.fullName',
     field: 'firstName',
   },
   {
     name: 'type',
     align: 'left',
-    label: 'type',
+    label: 'general.type',
     field: 'type',
   },
   {
     name: 'telephoneNo',
     align: 'left',
-    label: 'telephone',
+    label: 'general.telephone',
     field: 'telephoneNo',
   },
   {
     name: 'birthDate',
     align: 'left',
-    label: 'personnelCardAge',
+    label: 'personnel.age',
     field: 'birthDate',
   },
   {
     name: 'email',
     align: 'left',
-    label: 'formDialogInputEmail',
+    label: 'form.email',
     field: 'email',
   },
 
   {
     name: 'userRole',
     align: 'left',
-    label: 'userRole',
+    label: 'personnel.form.userRole',
     field: 'userRole',
   },
 ] satisfies QTableProps['columns'];
@@ -367,7 +367,7 @@ async function openDialog(
             id: user.id,
             img: `${user.profileImageUrl}`,
             name:
-              locale.value === 'en-US'
+              locale.value === 'eng'
                 ? `${user.firstNameEN} ${user.lastNameEN}`
                 : `${user.firstName} ${user.lastName}`,
             male: user.gender === 'male',
@@ -542,13 +542,13 @@ async function triggerChangeStatus(id: string, status: string) {
       color: status !== 'INACTIVE' ? 'warning' : 'info',
       icon:
         status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-message-processing-outline',
-      title: t('confirmChangeStatusTitle'),
+      title: t('dialog.title.confirmChangeStatus'),
       actionText:
-        status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
+        status !== 'INACTIVE' ? t('general.close') : t('general.open'),
       message:
         status !== 'INACTIVE'
-          ? t('confirmChangeStatusOffMessage')
-          : t('confirmChangeStatusOnMessage'),
+          ? t('dialog.message.confirmChangeStatusOff')
+          : t('dialog.message.confirmChangeStatusOn'),
       action: async () => {
         await toggleStatus(id).then(resolve).catch(reject);
       },
@@ -563,8 +563,10 @@ async function assignFormData(idEdit: string) {
 
   if (foundUser) {
     currentUser.value = foundUser;
-    infoPersonId.value = currentUser.value.id;
-    imageUrl.value = currentUser.value.profileImageUrl;
+    if (currentUser.value) {
+      infoPersonId.value = currentUser.value.id;
+      imageUrl.value = currentUser.value.profileImageUrl;
+    }
     formData.value = {
       branchId: foundUser.branch[0]?.id,
       provinceId: foundUser.provinceId,
@@ -645,10 +647,8 @@ function openImageDialog() {
 }
 
 onMounted(async () => {
-  utilsStore.currentTitle.title = 'personnelManagement';
-  utilsStore.currentTitle.path = [
-    { text: 'personnelManagementCaption', i18n: true },
-  ];
+  utilsStore.currentTitle.title = 'personnel.title';
+  utilsStore.currentTitle.path = [{ text: 'personnel.caption', i18n: true }];
   modeView.value = $q.screen.lt.md ? true : false;
 
   await fetchUserList();
@@ -747,7 +747,7 @@ watch(
   <ButtonAddComponent style="z-index: 999">
     <q-fab-action
       id="btn-add-personne"
-      :label="$t('personnelAdd')"
+      :label="$t('personnel.addTitle')"
       external-label
       label-position="left"
       @click="openDialog('FORM')"
@@ -760,7 +760,7 @@ watch(
   <!-- stat -->
   <div class="column full-height no-wrap">
     <div class="text-body-2 q-mb-xs flex items-center">
-      {{ $t('personnelStatTitle') }}
+      {{ $t('general.dataSum') }}
       <q-badge
         v-if="typeStats"
         rounded
@@ -800,7 +800,7 @@ watch(
               selectorLabel === 'ALL'
                 ? Object.entries(typeStats).map(([key, val]) => ({
                     count: val,
-                    label: key,
+                    label: `personnel.${key}`,
                     icon: 'mdi-account-outline',
                     color:
                       (
@@ -814,7 +814,7 @@ watch(
                   }))
                 : [
                     {
-                      label: selectorLabel,
+                      label: `personnel.${selectorLabel}`,
                       count: typeStats[selectorLabel],
                       icon: 'mdi-account-outline',
                       color:
@@ -850,7 +850,7 @@ watch(
               for="input-search"
               outlined
               dense
-              :label="$t('search')"
+              :label="$t('general.search')"
               class="q-mr-md col-12 col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearch"
@@ -880,9 +880,9 @@ watch(
                 :for="'field-select-status'"
                 :hide-dropdown-icon="$q.screen.lt.sm"
                 :options="[
-                  { label: $t('all'), value: 'all' },
-                  { label: $t('statusACTIVE'), value: 'statusACTIVE' },
-                  { label: $t('statusINACTIVE'), value: 'statusINACTIVE' },
+                  { label: $t('general.all'), value: 'all' },
+                  { label: $t('general.active'), value: 'statusACTIVE' },
+                  { label: $t('general.inactive'), value: 'statusINACTIVE' },
                 ]"
               ></q-select>
 
@@ -898,7 +898,7 @@ watch(
                     label: $t(v.label),
                   }))
                 "
-                :display-value="$t('displayField')"
+                :display-value="$t('general.displayField')"
                 :hide-dropdown-icon="$q.screen.lt.sm"
                 v-model="fieldSelected"
                 option-label="label"
@@ -982,12 +982,12 @@ watch(
               "
             >
               <div
-                class="row"
+                class="row text-capitalize"
                 :class="
                   selectorLabel === 'ALL' ? 'text-bold' : 'app-text-muted'
                 "
               >
-                {{ $t('all') }}
+                {{ $t('general.all') }}
               </div>
             </q-tab>
             <q-tab
@@ -1003,12 +1003,12 @@ watch(
               "
             >
               <div
-                class="row"
+                class="row text-capitalize"
                 :class="
                   selectorLabel === 'USER' ? 'text-bold' : 'app-text-muted'
                 "
               >
-                {{ $t('USER') }}
+                {{ $t('personnel.USER') }}
               </div>
             </q-tab>
             <q-tab
@@ -1024,12 +1024,12 @@ watch(
               "
             >
               <div
-                class="row"
+                class="row text-capitalize"
                 :class="
                   selectorLabel === 'MESSENGER' ? 'text-bold' : 'app-text-muted'
                 "
               >
-                {{ $t('MESSENGER') }}
+                {{ $t('personnel.MESSENGER') }}
               </div>
             </q-tab>
             <q-tab
@@ -1045,12 +1045,12 @@ watch(
               "
             >
               <div
-                class="row"
+                class="row text-capitalize"
                 :class="
                   selectorLabel === 'DELEGATE' ? 'text-bold' : 'app-text-muted'
                 "
               >
-                {{ $t('DELEGATE') }}
+                {{ $t('personnel.DELEGATE') }}
               </div>
             </q-tab>
             <q-tab
@@ -1066,12 +1066,12 @@ watch(
               "
             >
               <div
-                class="row"
+                class="row text-capitalize"
                 :class="
                   selectorLabel === 'AGENCY' ? 'text-bold' : 'app-text-muted'
                 "
               >
-                {{ $t('AGENCY') }}
+                {{ $t('personnel.AGENCY') }}
               </div>
             </q-tab>
           </q-tabs>
@@ -1180,7 +1180,7 @@ watch(
                     <div class="column">
                       <div class="col ellipsis" style="max-width: 20vw">
                         {{
-                          $i18n.locale === 'en-US'
+                          $i18n.locale === 'eng'
                             ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
                             : `${props.row.firstName} ${props.row.lastName}`.trim()
                         }}
@@ -1190,7 +1190,7 @@ watch(
                           :delay="300"
                         >
                           {{
-                            $i18n.locale === 'en-US'
+                            $i18n.locale === 'eng'
                               ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
                               : `${props.row.firstName} ${props.row.lastName}`.trim()
                           }}
@@ -1231,12 +1231,14 @@ watch(
                   >
                     {{
                       $t(
-                        {
-                          USER: 'USER',
-                          MESSENGER: 'MESSENGER',
-                          DELEGATE: 'DELEGATE',
-                          AGENCY: 'AGENCY',
-                        }[props.row.userType as string] || 'USER',
+                        `personnel.${
+                          {
+                            USER: 'USER',
+                            MESSENGER: 'MESSENGER',
+                            DELEGATE: 'DELEGATE',
+                            AGENCY: 'AGENCY',
+                          }[props.row.userType as string] || 'USER'
+                        }`,
                       )
                     }}
                   </span>
@@ -1307,7 +1309,7 @@ watch(
                             style="color: hsl(var(--green-6-hsl))"
                           />
                           <span class="col-9 q-px-md flex items-center">
-                            {{ $t('viewDetail') }}
+                            {{ $t('general.viewDetail') }}
                           </span>
                         </q-item>
 
@@ -1331,7 +1333,7 @@ watch(
                             style="color: hsl(var(--cyan-6-hsl))"
                           />
                           <span class="col-9 q-px-md flex items-center">
-                            {{ $t('edit') }}
+                            {{ $t('general.edit') }}
                           </span>
                         </q-item>
                         <q-item
@@ -1357,7 +1359,7 @@ watch(
                             }"
                           />
                           <span class="col-9 q-px-md flex items-center">
-                            {{ $t('delete') }}
+                            {{ $t('general.delete') }}
                           </span>
                         </q-item>
 
@@ -1382,8 +1384,8 @@ watch(
                               <span class="q-pl-md">
                                 {{
                                   props.row.status !== 'INACTIVE'
-                                    ? $t('switchOnLabel')
-                                    : $t('switchOffLabel')
+                                    ? $t('general.open')
+                                    : $t('general.close')
                                 }}
                               </span>
                             </div>
@@ -1404,7 +1406,7 @@ watch(
                     code: props.row.code,
 
                     name:
-                      $i18n.locale === 'en-US'
+                      $i18n.locale === 'eng'
                         ? `${props.row.firstNameEN} ${props.row.lastNameEN}`.trim()
                         : `${props.row.firstName} ${props.row.lastName}`.trim(),
                     img: props.row.profileImageUrl
@@ -1439,7 +1441,7 @@ watch(
                           DELEGATE: 'red',
                           AGENCY: 'magenta',
                         }[props.row.userType as string] || 'pink',
-                      value: $t(props.row.userType),
+                      value: $t(`personnel.${props.row.userType}`),
                     },
                   ]"
                   :disabled="props.row.status === 'INACTIVE'"
@@ -1503,15 +1505,15 @@ watch(
         >
           <div class="flex justify-end">
             <TooltipComponent
-              title="personnelTooltipTitle"
-              caption="personnelTooltipCaption"
+              title="personnel.tooltipTitle"
+              caption="personnel.tooltipCaption"
               imgSrc="personnel-table-"
             />
           </div>
 
           <div class="col items-center flex justify-center">
             <AddButton
-              :label="'personnelAdd'"
+              :label="'personnel.addTitle'"
               :cyanOn="true"
               @trigger="openDialog('FORM')"
             />
@@ -1533,12 +1535,8 @@ watch(
       >
         <div class="col-4">
           <div class="row items-center no-wrap">
-            <div
-              class="app-text-muted"
-              style="width: 80px"
-              v-if="$q.screen.gt.sm"
-            >
-              {{ $t('showing') }}
+            <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
+              {{ $t('general.recordPerPage') }}
             </div>
             <div>
               <q-btn-dropdown
@@ -1572,7 +1570,7 @@ watch(
 
         <div class="col-4 row justify-center app-text-muted">
           {{
-            $t('recordsPage', {
+            $t('general.recordsPage', {
               resultcurrentPage: userData?.result.length,
               total: userData?.total,
             })
@@ -1591,12 +1589,12 @@ watch(
 
   <DrawerInfo
     v-if="currentUser"
-    :category="$t('personnelTitle')"
+    :category="$t('personnel.personnel')"
     bg-on
     hide-action
     :isEdit="infoDrawerEdit"
     :title="
-      $i18n.locale === 'en-US'
+      $i18n.locale === 'eng'
         ? `${currentUser.firstNameEN} ${currentUser.lastNameEN}`
         : `${currentUser.firstName} ${currentUser.lastName}`
     "
@@ -1620,8 +1618,8 @@ watch(
           hideFade
           :menu="formMenuIcon"
           :readonly="!infoDrawerEdit"
-          :toggleTitle="$t('formDialogTitleUserStatus')"
-          :title="`${$i18n.locale === 'en-US' ? `${formData.firstNameEN} ${formData.lastNameEN}` : `${formData.firstName} ${formData.lastName}`}`"
+          :toggleTitle="$t('status.title')"
+          :title="`${$i18n.locale === 'eng' ? `${formData.firstNameEN} ${formData.lastNameEN}` : `${formData.firstName} ${formData.lastName}`}`"
           :caption="userCode"
           :img="
             urlProfile ||
@@ -1706,22 +1704,22 @@ watch(
                 :menu="
                   [
                     {
-                      name: $t('formDialogTitleInformation'),
+                      name: $t('form.field.basicInformation'),
                       anchor: 'info-information',
                     },
                     {
-                      name: $t('formDialogTitlePersonal'),
+                      name: $t('personnel.form.personalInformation'),
                       anchor: 'info-personal',
                     },
                     {
-                      name: $t('formDialogTitleAddressPersonnel'),
+                      name: $t('personnel.form.addressInformation'),
                       anchor: 'info-address',
                     },
                   ].concat(
                     !!formData.userType
                       ? [
                           {
-                            name: $t('formDialogTitleByType'),
+                            name: $t('personnel.form.workInformation'),
                             anchor: 'info-work',
                           },
                         ]
@@ -1754,7 +1752,7 @@ watch(
               dense
               outlined
               separator
-              :title="'formDialogTitleInformation'"
+              :title="'form.field.basicInformation'"
               :readonly="!infoDrawerEdit"
               :usernameReadonly="isEdit"
               class="q-mb-xl"
@@ -1774,7 +1772,7 @@ watch(
               v-model:email="formData.email"
               v-model:gender="formData.gender"
               v-model:birth-date="formData.birthDate"
-              :title="'formDialogTitlePersonal'"
+              :title="'personnel.form.personalInformation'"
               prefix-id="drawer-info-personnel"
               dense
               outlined
@@ -1793,6 +1791,7 @@ watch(
               v-model:zipCode="formData.zipCode"
               :readonly="!infoDrawerEdit"
               prefix-id="drawer-info-personnel"
+              :title="'personnel.form.addressInformation'"
               dense
               class="q-mb-xl"
             />
@@ -1831,7 +1830,7 @@ watch(
     ref="formDialogRef"
     :badgeClass="formData.gender === 'male' ? 'app-bg-male' : 'app-bg-female'"
     :badgeLabel="userCode"
-    :title="$t('personnelAdd')"
+    :title="$t('personnel.addTitle')"
     v-model:modal="modal"
     :addressSeparator="formData.userType !== ''"
     :submit="() => onSubmit()"
@@ -1855,8 +1854,8 @@ watch(
             female: '/no-img-female.png',
           }[formData.gender]
         "
-        :toggleTitle="$t('formDialogTitleUserStatus')"
-        :title="`${$i18n.locale === 'en-US' ? `${formData.firstNameEN} ${formData.lastNameEN}` : `${formData.firstName} ${formData.lastName}`}`"
+        :toggleTitle="$t('status.title')"
+        :title="`${$i18n.locale === 'eng' ? `${formData.firstNameEN} ${formData.lastNameEN}` : `${formData.firstName} ${formData.lastName}`}`"
         :fallbackImg="
           {
             male: '/no-img-man.png',
@@ -1885,28 +1884,28 @@ watch(
       >
         <SaveButton id="btn-info-basic-save" icon-only type="submit" />
       </div>
-      <div class="col full-height scroll">
+      <div class="col full-height scroll" v-if="$q.screen.gt.sm">
         <div style="position: sticky; top: 0" class="q-pa-sm">
           <SideMenu
             :menu="
               [
                 {
-                  name: $t('formDialogTitleInformation'),
+                  name: $t('form.field.basicInformation'),
                   anchor: 'dialog-form-information',
                 },
                 {
-                  name: $t('formDialogTitlePersonal'),
+                  name: $t('personnel.form.personalInformation'),
                   anchor: 'dialog-form-personal',
                 },
                 {
-                  name: $t('formDialogTitleAddressPersonnel'),
+                  name: $t('personnel.form.addressInformation'),
                   anchor: 'dialog-form-address',
                 },
               ].concat(
                 !!formData.userType
                   ? [
                       {
-                        name: $t('formDialogTitleByType'),
+                        name: $t('personnel.form.workInformation'),
                         anchor: 'dialog-info-work',
                       },
                     ]
@@ -1922,13 +1921,13 @@ watch(
           />
         </div>
       </div>
-      <div class="col-10 q-pa-md full-height scroll">
+      <div class="col-md-10 col-12 q-pa-md full-height scroll">
         <FormInformation
           id="dialog-form-information"
           dense
           outlined
           separator
-          :title="'formDialogTitleInformation'"
+          :title="'form.field.basicInformation'"
           :usernameReadonly="isEdit"
           v-model:hqId="hqId"
           v-model:brId="brId"
@@ -1944,7 +1943,7 @@ watch(
           dense
           outlined
           separator
-          :title="'formDialogTitlePersonal'"
+          :title="'personnel.form.personalInformation'"
           v-model:first-name="formData.firstName"
           v-model:last-name="formData.lastName"
           v-model:mid-name="formData.middleName"
diff --git a/src/pages/03_customer-management/BranchPage.vue b/src/pages/03_customer-management/BranchPage.vue
index 0d12db4f..ea0477d8 100644
--- a/src/pages/03_customer-management/BranchPage.vue
+++ b/src/pages/03_customer-management/BranchPage.vue
@@ -275,7 +275,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
         outlined
         dense
         class="col-6"
-        :label="$t('search')"
+        :label="$t('general.search')"
         :bg-color="$q.dark.isActive ? 'dark' : 'white'"
         v-model="inputSearch"
         debounce="500"
@@ -299,9 +299,9 @@ watch([customerId, inputSearch, currentStatus], async () => {
         emit-value
         :hide-dropdown-icon="$q.screen.lt.sm"
         :options="[
-          { label: $t('all'), value: 'All' },
-          { label: $t('statusACTIVE'), value: 'ACTIVE' },
-          { label: $t('statusINACTIVE'), value: 'INACTIVE' },
+          { label: $t('general.all'), value: 'All' },
+          { label: $t('status.ACTIVE'), value: 'ACTIVE' },
+          { label: $t('status.INACTIVE'), value: 'INACTIVE' },
         ]"
       ></q-select>
 
@@ -423,9 +423,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
                 <div class="col" style="min-width: fit-content">
                   <div class="col">
                     {{
-                      $i18n.locale === 'en-US'
-                        ? props.row.nameEN
-                        : props.row.name
+                      $i18n.locale === 'eng' ? props.row.nameEN : props.row.name
                     }}
                   </div>
                   <div class="col app-text-muted">
@@ -445,7 +443,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
               class="text-center"
             >
               {{
-                $i18n.locale === 'en-US'
+                $i18n.locale === 'eng'
                   ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                   : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`
               }}
@@ -531,7 +529,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
                   :field-selected="[
                     'orderNumber',
                     'firstName',
-                    'formDialogInputAge',
+                    'general.age',
                     'formDialogInputNationality',
                     'formDialogInputPassportNo',
                     'passportExpiryDate',
@@ -562,7 +560,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
                 customerBranchFormTab: props.row.branchNo,
                 branchName: props.row.name,
                 address:
-                  $i18n.locale === 'en-US'
+                  $i18n.locale === 'eng'
                     ? `${props.row.addressEN || ''} ${props.row.subDistrict?.nameEN || ''} ${props.row.district?.nameEN || ''} ${props.row.province?.nameEN || ''}`
                     : `${props.row.address || ''} ${props.row.subDistrict?.name || ''} ${props.row.district?.name || ''} ${props.row.province?.name || ''}`,
                 telephone: props.row.telephoneNo,
@@ -584,7 +582,7 @@ watch([customerId, inputSearch, currentStatus], async () => {
     <div class="col"></div>
     <div class="app-text-muted col text-center">
       {{
-        $t('recordsPage', {
+        $t('general.recordsPage', {
           resultcurrentPage: branch?.length,
           total: totalBranch,
         })
diff --git a/src/pages/03_customer-management/MainPage.vue b/src/pages/03_customer-management/MainPage.vue
index f90f9d0f..a7a4b77f 100644
--- a/src/pages/03_customer-management/MainPage.vue
+++ b/src/pages/03_customer-management/MainPage.vue
@@ -89,10 +89,10 @@ const { state: employeeFormState, currentFromDataEmployee } =
   storeToRefs(employeeFormStore);
 
 async function init() {
-  utilsStore.currentTitle.title = 'customerManagement';
+  utilsStore.currentTitle.title = 'menu.customer';
   utilsStore.currentTitle.path = [
     {
-      text: 'customerManagementCaption',
+      text: 'menu.customerCaption',
       i18n: true,
       handler: () => router.push('/customer-management'),
     },
@@ -111,7 +111,7 @@ async function init() {
     if (_data) {
       currentCustomer.value = _data;
       utilsStore.currentTitle.path.push({
-        text: `${currentCustomer.value.firstName} ${currentCustomer.value.lastName}`,
+        text: `${currentCustomer.value.firstName || '-'} ${currentCustomer.value.lastName || ''}`,
         i18n: false,
       });
     } else {
@@ -141,7 +141,7 @@ const customerTypeSelected = ref<{
   label: string;
   value: 'all' | 'customerLegalEntity' | 'customerNaturalPerson';
 }>({
-  label: t('all'),
+  label: t('general.all'),
   value: 'all',
 });
 
@@ -602,14 +602,14 @@ const emptyCreateDialog = ref(false);
       @click="createCustomerForm('CORP')"
       padding="xs"
       icon="mdi-office-building-outline"
-      :label="$t('add') + ' ' + $t('customerLegalEntity')"
+      :label="$t('general.add') + ' ' + $t('customer.employerLegalEntity')"
       external-label
       label-position="left"
     />
     <q-fab-action
       v-if="currentTab === 'employer'"
       id="add-customer-natural-person"
-      :label="$t('add') + ' ' + $t('customerNaturalPerson')"
+      :label="$t('general.add') + ' ' + $t('customer.employerNaturalPerson')"
       external-label
       label-position="left"
       @click="createCustomerForm('PERS')"
@@ -619,7 +619,7 @@ const emptyCreateDialog = ref(false);
     />
     <q-fab-action
       v-if="currentTab === 'employee'"
-      :label="$t('add') + ' ' + $t('EMPLOYEE')"
+      :label="$t('general.add') + ' ' + $t('customer.employee')"
       external-label
       id="add-employee"
       label-position="left"
@@ -633,7 +633,7 @@ const emptyCreateDialog = ref(false);
   <div class="column full-height no-wrap">
     <div v-if="$route.name === 'CustomerManagement'" class="column full-height">
       <div class="text-body-2 text-weight-medium q-mb-xs flex items-center">
-        {{ $t('dataSum') }}
+        {{ $t('general.dataSum') }}
         <q-badge
           v-if="listCustomer"
           rounded
@@ -681,8 +681,8 @@ const emptyCreateDialog = ref(false);
                             : (statsCustomerType?.PERS ?? 0),
                         label:
                           v.name === 'CORP'
-                            ? 'customerLegalEntity'
-                            : 'customerNaturalPerson',
+                            ? 'customer.employerLegalEntity'
+                            : 'customer.employerNaturalPerson',
                         icon:
                           v.name === 'CORP'
                             ? 'mdi-office-building-outline'
@@ -691,7 +691,7 @@ const emptyCreateDialog = ref(false);
                       }))
                     : [
                         {
-                          label: 'EMPLOYEE',
+                          label: 'customer.employee',
                           count: employeeStats,
                           icon: 'mdi-account-outline',
                           color: 'pink',
@@ -720,7 +720,7 @@ const emptyCreateDialog = ref(false);
               for="input-search"
               outlined
               dense
-              :label="$t('search')"
+              :label="$t('general.search')"
               class="col-12 col-md-3"
               :bg-color="$q.dark.isActive ? 'dark' : 'white'"
               v-model="inputSearch"
@@ -751,9 +751,9 @@ const emptyCreateDialog = ref(false);
                 emit-value
                 :hide-dropdown-icon="$q.screen.lt.sm"
                 :options="[
-                  { label: $t('all'), value: 'All' },
-                  { label: $t('statusACTIVE'), value: 'ACTIVE' },
-                  { label: $t('statusINACTIVE'), value: 'INACTIVE' },
+                  { label: $t('general.all'), value: 'All' },
+                  { label: $t('status.ACTIVE'), value: 'ACTIVE' },
+                  { label: $t('status.INACTIVE'), value: 'INACTIVE' },
                 ]"
               ></q-select>
               <q-select
@@ -767,7 +767,7 @@ const emptyCreateDialog = ref(false);
                     ? fieldDisplayCustomer
                     : fieldDisplayEmployee
                 "
-                :display-value="$t('displayField')"
+                :display-value="$t('general.displayField')"
                 :hide-dropdown-icon="$q.screen.lt.sm"
                 v-model="fieldSelected"
                 :option-label="(l) => $t(l.label)"
@@ -855,7 +855,7 @@ const emptyCreateDialog = ref(false);
                     currentTab === 'employer' ? 'text-bold' : 'app-text-muted'
                   "
                 >
-                  {{ $t('EMPLOYER') }}
+                  {{ $t('customer.employer') }}
                 </div>
               </q-tab>
               <q-tab
@@ -876,7 +876,7 @@ const emptyCreateDialog = ref(false);
                     currentTab === 'employee' ? 'text-bold' : 'app-text-muted'
                   "
                 >
-                  {{ $t('EMPLOYEE') }}
+                  {{ $t('customer.employee') }}
                 </div>
               </q-tab>
             </q-tabs>
@@ -910,7 +910,16 @@ const emptyCreateDialog = ref(false);
                   @click="customerTypeSelected = { label: v, value: v }"
                 >
                   <span class="q-px-md ellipsis">
-                    {{ $t(v) }}
+                    {{
+                      $t(
+                        {
+                          all: 'general.all',
+                          customerLegalEntity: 'customer.employerLegalEntity',
+                          customerNaturalPerson:
+                            'customer.employerNaturalPerson',
+                        }[v],
+                      )
+                    }}
                   </span>
                 </q-item>
               </template>
@@ -924,7 +933,7 @@ const emptyCreateDialog = ref(false);
                   clickable
                 >
                   <span class="q-px-md ellipsis">
-                    {{ $t('totalEmployee') }}
+                    {{ $t('general.all') }}
                   </span>
                 </q-item>
               </template>
@@ -1192,7 +1201,7 @@ const emptyCreateDialog = ref(false);
                                     style="color: hsl(var(--green-6-hsl))"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('viewDetail') }}
+                                    {{ $t('general.viewDetail') }}
                                   </span>
                                 </q-item>
 
@@ -1218,7 +1227,7 @@ const emptyCreateDialog = ref(false);
                                     style="color: hsl(var(--cyan-6-hsl))"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('edit') }}
+                                    {{ $t('general.edit') }}
                                   </span>
                                 </q-item>
                                 <q-item
@@ -1245,7 +1254,7 @@ const emptyCreateDialog = ref(false);
                                     }"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('delete') }}
+                                    {{ $t('general.delete') }}
                                   </span>
                                 </q-item>
 
@@ -1272,8 +1281,8 @@ const emptyCreateDialog = ref(false);
                                       <span class="q-pl-md">
                                         {{
                                           props.row.status !== 'INACTIVE'
-                                            ? $t('switchOnLabel')
-                                            : $t('switchOffLabel')
+                                            ? $t('general.open')
+                                            : $t('general.close')
                                         }}
                                       </span>
                                     </div>
@@ -1321,12 +1330,12 @@ const emptyCreateDialog = ref(false);
                           separateEnter
                           history
                           :prefix-id="
-                            props.row.customerNameEN ?? props.rowIndex
+                            props.row.customerNameEN ?? String(props.rowIndex)
                           "
                           :data="{
                             code: props.row.code,
                             name:
-                              $i18n.locale === 'en-US'
+                              $i18n.locale === 'eng'
                                 ? `${props.row.firstName} ${props.row.lastName} `.trim()
                                 : `${props.row.firstNameEN} ${props.row.lastNameEN} `.trim(),
                             img:
@@ -1356,8 +1365,8 @@ const emptyCreateDialog = ref(false);
                                 }[props.row.customerType as string] || 'CORP',
                               value: $t(
                                 props.row.customerType === 'CORP'
-                                  ? 'customerLegalEntity'
-                                  : 'customerNaturalPerson',
+                                  ? 'customer.employerLegalEntity'
+                                  : 'customer.employerNaturalPerson',
                               ),
                             },
                           ]"
@@ -1402,7 +1411,7 @@ const emptyCreateDialog = ref(false);
                       style="width: 80px"
                       v-if="$q.screen.gt.sm"
                     >
-                      {{ $t('showing') }}
+                      {{ $t('general.recordPerPage') }}
                     </div>
                     <div>
                       <q-btn-dropdown
@@ -1436,7 +1445,7 @@ const emptyCreateDialog = ref(false);
 
                   <div class="col-4 flex justify-center app-text-muted">
                     {{
-                      $t('recordsPage', {
+                      $t('general.recordsPage', {
                         resultcurrentPage: listCustomer.length,
                         total: statsCustomerType.PERS + statsCustomerType.CORP,
                       })
@@ -1512,7 +1521,7 @@ const emptyCreateDialog = ref(false);
                       style="width: 80px"
                       v-if="$q.screen.gt.sm"
                     >
-                      {{ $t('showing') }}
+                      {{ $t('general.recordPerPage') }}
                     </div>
                     <div>
                       <q-btn-dropdown
@@ -1546,7 +1555,7 @@ const emptyCreateDialog = ref(false);
 
                   <div class="col-4 flex justify-center app-text-muted">
                     {{
-                      $t('recordsPage', {
+                      $t('general.recordsPage', {
                         resultcurrentPage: listEmployee.length,
                         total: employeeStats,
                       })
@@ -1577,16 +1586,8 @@ const emptyCreateDialog = ref(false);
               >
                 <TooltipComponent
                   class="self-end q-ma-md"
-                  :title="
-                    currentTab === 'employer'
-                      ? 'customerEmployerTooltipTitle'
-                      : 'customerEmployeeTooltipTitle'
-                  "
-                  :caption="
-                    currentTab === 'employer'
-                      ? 'customerEmployerTooltipCaption'
-                      : 'customerEmployeeTooltipCaption'
-                  "
+                  :title="'general.noData'"
+                  :caption="'general.clickToCreate'"
                   imgSrc="personnel-table-"
                 />
 
@@ -1595,11 +1596,10 @@ const emptyCreateDialog = ref(false);
                   style="flex-grow: 1"
                 >
                   <EmptyAddButton
-                    :label="
-                      currentTab === 'employer'
-                        ? 'customerEmployerAdd'
-                        : 'customerEmployeeAdd'
-                    "
+                    :label="'general.add'"
+                    :i18n-args="{
+                      text: $t(`customer.${currentTab}`),
+                    }"
                     @trigger="
                       () => {
                         if (currentTab === 'employer') {
@@ -1638,7 +1638,7 @@ const emptyCreateDialog = ref(false);
 
   <DialogForm
     v-model:modal="emptyCreateDialog"
-    :title="$t('customerCardUserType')"
+    :title="$t('customer.employerType')"
     hide-footer
     no-app-box
     width="60vw"
@@ -1725,7 +1725,7 @@ const emptyCreateDialog = ref(false);
             <SideMenu
               :menu="[
                 {
-                  name: $t('customer.form.group.basicInfo'),
+                  name: $t('form.field.basicInformation'),
                   anchor: 'form-basic-info-customer',
                 },
                 {
@@ -1995,10 +1995,19 @@ const emptyCreateDialog = ref(false);
         :img="employeeFormState.profileUrl || `/images/employee-avatar.png`"
         :tabs-list="
           [
-            { name: 'personalInfo', label: 'personalInfo' },
-            { name: 'healthCheck', label: 'healthCheck' },
-            { name: 'workHistory', label: 'workHistory' },
-            { name: 'other', label: 'other' },
+            {
+              name: 'personalInfo',
+              label: 'customerEmployee.form.group.personalInfo',
+            },
+            {
+              name: 'healthCheck',
+              label: 'customerEmployee.form.group.healthCheck',
+            },
+            {
+              name: 'workHistory',
+              label: 'customerEmployee.form.group.workHistory',
+            },
+            { name: 'other', label: 'customerEmployee.form.group.other' },
           ].filter((v) => {
             if (!employeeFormState.statusSavePersonal) {
               return v.name === 'personalInfo';
@@ -2008,7 +2017,7 @@ const emptyCreateDialog = ref(false);
           })
         "
         :menu="formMenuIconEmployee"
-        :toggleTitle="$t('formDialogTitleUserStatus')"
+        :toggleTitle="$t('status.title')"
         :hideFade="
           employeeFormState.profileUrl === '' ||
           employeeFormState.profileUrl === undefined
@@ -2042,44 +2051,44 @@ const emptyCreateDialog = ref(false);
               :menu="
                 [
                   {
-                    name: $t('formDialogTitleInformation'),
+                    name: $t('form.field.basicInformation'),
                     anchor: 'form-information',
                     tab: 'personalInfo',
                   },
                   {
-                    name: $t('formDialogTitlePersonal'),
+                    name: $t('customerEmployee.form.group.personalInfo'),
                     anchor: 'form-personal',
                     tab: 'personalInfo',
                   },
                   {
-                    name: $t('formDialogTitlePersonnelAddress'),
+                    name: $t('general.address'),
                     anchor: 'form-personal-address',
                     tab: 'personalInfo',
                   },
                   {
-                    name: $t('formDialogTitlePassport'),
+                    name: $t('customerEmployee.form.group.passport'),
                     anchor: 'form-passport',
                     tab: 'personalInfo',
                   },
                   {
-                    name: $t('formDialogTitleVisa'),
+                    name: $t('customerEmployee.form.group.visa'),
                     anchor: 'form-visa',
                     tab: 'personalInfo',
                   },
                   ...(currentFromDataEmployee.employeeCheckup?.map((v, i) => ({
-                    name: $t('customer.form.instance', { index: i + 1 }),
+                    name: $t('general.times', { number: i + 1 }),
                     anchor: `form-employee-checkup-${i}`,
                     tab: 'healthCheck',
                   })) || []),
 
                   ...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
-                    name: $t('customer.form.instance', { index: i + 1 }),
+                    name: $t('general.times', { number: i + 1 }),
                     anchor: `form-employee-work-history-${i}`,
                     tab: 'workHistory',
                   })) || []),
 
                   {
-                    name: $t('formDialogTitleFamilyHistory'),
+                    name: $t('customerEmployee.form.group.family'),
                     anchor: 'form-employee-other',
                     tab: 'other',
                   },
@@ -2159,7 +2168,7 @@ const emptyCreateDialog = ref(false);
               dense
               outlined
               separator
-              :title="$t('formDialogTitleInformation')"
+              title="form.field.basicInformation"
               :readonly="!employeeFormState.isEmployeeEdit"
               :employee-owner-option="employeeStore.ownerOption"
               v-model:customer-branch="employeeFormState.formDataEmployeeOwner"
@@ -2176,7 +2185,7 @@ const emptyCreateDialog = ref(false);
               outlined
               employee
               separator
-              :title="$t('personalInfo')"
+              title="customerEmployee.form.group.personalInfo"
               v-model:open="employeeFormState.dialogModal"
               v-model:firstName="currentFromDataEmployee.firstName"
               v-model:lastName="currentFromDataEmployee.lastName"
@@ -2210,7 +2219,7 @@ const emptyCreateDialog = ref(false);
               dense
               outlined
               separator
-              :title="$t('formDialogTitlePassport')"
+              :title="$t('customerEmployee.form.group.passport')"
               v-model:passport-type="currentFromDataEmployee.passportType"
               v-model:passport-number="currentFromDataEmployee.passportNumber"
               v-model:passport-issue-date="
@@ -2236,7 +2245,7 @@ const emptyCreateDialog = ref(false);
               id="form-visa"
               dense
               outlined
-              :title="$t(`formDialogTitleVisa`)"
+              title="customerEmployee.form.group.visa"
               v-model:visa-type="currentFromDataEmployee.visaType"
               v-model:visa-number="currentFromDataEmployee.visaNumber"
               v-model:visa-issue-date="currentFromDataEmployee.visaIssueDate"
@@ -2520,7 +2529,7 @@ const emptyCreateDialog = ref(false);
               <SideMenu
                 :menu="[
                   {
-                    name: $t('customer.form.group.basicInfo'),
+                    name: $t('form.field.basicInformation'),
                     anchor: 'form-basic-info-customer',
                   },
                   {
@@ -2727,7 +2736,7 @@ const emptyCreateDialog = ref(false);
     v-model:drawer-open="employeeFormState.drawerModal"
     :title="
       employeeFormState.currentEmployee
-        ? $i18n.locale === 'en-US'
+        ? $i18n.locale === 'eng'
           ? `${employeeFormState.currentEmployee.firstNameEN} ${employeeFormState.currentEmployee.lastNameEN}`
           : `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
         : '-'
@@ -2802,7 +2811,7 @@ const emptyCreateDialog = ref(false);
           fallback-cover="/images/employee-banner.png"
           :title="
             employeeFormState.currentEmployee
-              ? $i18n.locale === 'en-US'
+              ? $i18n.locale === 'eng'
                 ? `${employeeFormState.currentEmployee.firstNameEN} ${employeeFormState.currentEmployee.lastNameEN}`
                 : `${employeeFormState.currentEmployee.firstName} ${employeeFormState.currentEmployee.lastName}`
               : '-'
@@ -2810,13 +2819,22 @@ const emptyCreateDialog = ref(false);
           :caption="currentFromDataEmployee.code"
           :img="employeeFormState.profileUrl || '/images/employee-avatar.png'"
           :tabs-list="[
-            { name: 'personalInfo', label: 'personalInfo' },
-            { name: 'healthCheck', label: 'healthCheck' },
-            { name: 'workHistory', label: 'workHistory' },
-            { name: 'other', label: 'other' },
+            {
+              name: 'personalInfo',
+              label: 'customerEmployee.form.group.personalInfo',
+            },
+            {
+              name: 'healthCheck',
+              label: 'customerEmployee.form.group.healthCheck',
+            },
+            {
+              name: 'workHistory',
+              label: 'customerEmployee.form.group.workHistory',
+            },
+            { name: 'other', label: 'customerEmployee.form.group.other' },
           ]"
           :menu="formMenuIconEmployee"
-          :toggle-title="$t('formDialogTitleUserStatus')"
+          :toggle-title="$t('status.title')"
           :hide-fade="
             employeeFormState.profileUrl === '' ||
             employeeFormState.profileUrl === undefined
@@ -2835,44 +2853,44 @@ const emptyCreateDialog = ref(false);
                 :menu="
                   [
                     {
-                      name: $t('formDialogTitleInformation'),
+                      name: $t('form.field.basicInformation'),
                       anchor: 'drawer-form-information',
                       tab: 'personalInfo',
                     },
                     {
-                      name: $t('formDialogTitlePersonal'),
+                      name: $t('customerEmployee.form.group.personalInfo'),
                       anchor: 'drawer-form-personal',
                       tab: 'personalInfo',
                     },
                     {
-                      name: $t('formDialogTitlePersonnelAddress'),
+                      name: $t('form.address'),
                       anchor: 'drawer-form-personal-address',
                       tab: 'personalInfo',
                     },
                     {
-                      name: $t('formDialogTitlePassport'),
+                      name: $t('customerEmployee.form.group.passport'),
                       anchor: 'drawer-form-passport',
                       tab: 'personalInfo',
                     },
                     {
-                      name: $t('formDialogTitleVisa'),
+                      name: $t('customerEmployee.form.group.visa'),
                       anchor: 'drawer-form-visa',
                       tab: 'personalInfo',
                     },
                     ...(currentFromDataEmployee.employeeCheckup?.map(
                       (v, i) => ({
-                        name: $t('customer.form.instance', { index: i + 1 }),
+                        name: $t('general.times', { number: i + 1 }),
                         anchor: `drawer-employee-checkup-${i}`,
                         tab: 'healthCheck',
                       }),
                     ) || []),
                     ...(currentFromDataEmployee.employeeWork?.map((v, i) => ({
-                      name: $t('customer.form.instance', { index: i + 1 }),
+                      name: $t('general.times', { number: i + 1 }),
                       anchor: `drawer-employee-work-history-${i}`,
                       tab: 'workHistory',
                     })) || []),
                     {
-                      name: $t('formDialogTitleFamilyHistory'),
+                      name: $t('customerEmployee.form.group.family'),
                       anchor: 'drawer-other',
                       tab: 'other',
                     },
@@ -2944,7 +2962,7 @@ const emptyCreateDialog = ref(false);
                 prefix-id="drawer-info-employee"
                 dense
                 outlined
-                :title="'formDialogTitleInformation'"
+                title="form.field.basicInformation"
                 :readonly="!employeeFormState.isEmployeeEdit"
                 :employee-owner-option="employeeStore.ownerOption"
                 v-model:customer-branch="
@@ -2965,7 +2983,7 @@ const emptyCreateDialog = ref(false);
                 outlined
                 employee
                 separator
-                :title="'personalInfo'"
+                title="customerEmployee.form.group.personalInfo"
                 :readonly="!employeeFormState.isEmployeeEdit"
                 v-model:firstName="currentFromDataEmployee.firstName"
                 v-model:lastName="currentFromDataEmployee.lastName"
@@ -2996,7 +3014,7 @@ const emptyCreateDialog = ref(false);
                 dense
                 outlined
                 separator
-                :title="'formDialogTitlePassport'"
+                :title="'customerEmployee.form.group.passport'"
                 :readonly="!employeeFormState.isEmployeeEdit"
                 v-model:passport-type="currentFromDataEmployee.passportType"
                 v-model:passport-number="currentFromDataEmployee.passportNumber"
@@ -3022,7 +3040,7 @@ const emptyCreateDialog = ref(false);
                 id="drawer-form-visa"
                 dense
                 outlined
-                :title="`formDialogTitleVisa`"
+                title="customerEmployee.form.group.visa"
                 :readonly="!employeeFormState.isEmployeeEdit"
                 v-model:visa-type="currentFromDataEmployee.visaType"
                 v-model:visa-number="currentFromDataEmployee.visaNumber"
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
index 9760e5c7..face0557 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBasicInfo.vue
@@ -145,7 +145,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         name="mdi-office-building-outline"
         style="background-color: var(--surface-3)"
       />
-      <span>{{ $t('customer.form.group.basicInfo') }}</span>
+      <span>{{ $t('form.field.basicInformation') }}</span>
       <EditButton
         icon-only
         v-if="readonly && !create"
@@ -199,7 +199,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         :readonly="readonly"
         :options="filteredBranchOptions"
         :hide-dropdown-icon="readonly"
-        :label="$t('registeredBranch')"
+        :label="$t('customer.form.registeredBranch')"
         :for="`${prefixId}-input-source-nationality`"
         :rules="[
           (val) => {
@@ -218,7 +218,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -244,7 +244,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         :readonly="readonly"
         :options="prefixNameOptions"
         :for="`${prefixId}-select-prefix-name`"
-        :label="$t('formDialogInputPrefixName')"
+        :label="$t('form.prefixName')"
         @filter="prefixNameFilter"
         :model-value="readonly ? namePrefix || '-' : namePrefix"
         @update:model-value="
@@ -263,7 +263,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -364,7 +364,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         :options="genderOptions"
         :hide-dropdown-icon="readonly"
         :for="`${prefixId}-select-gender`"
-        :label="$t('formDialogInputGender')"
+        :label="$t('form.gender')"
         @filter="genderFilter"
         :model-value="readonly ? gender || '-' : gender"
         @update:model-value="(v) => (typeof v === 'string' ? (gender = v) : '')"
@@ -379,7 +379,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         <template v-slot:no-option>
           <q-item>
             <q-item-section class="text-grey">
-              {{ $t('noResults') }}
+              {{ $t('general.noData') }}
             </q-item-section>
           </q-item>
         </template>
@@ -394,16 +394,16 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         :disabled-dates="disabledAfterToday"
         :teleport="true"
         :dark="$q.dark.isActive"
-        :locale="$i18n.locale === 'th-th' ? 'th' : 'en'"
+        :locale="$i18n.locale === 'tha' ? 'th' : 'en'"
         :enableTimePicker="false"
         :disabled="readonly"
         class="col-12 col-md-3"
       >
         <template #year="{ value }">
-          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+          {{ $i18n.locale === 'tha' ? value + 543 : value }}
         </template>
         <template #year-overlay-value="{ value }">
-          {{ $i18n.locale === 'th-th' ? value + 543 : value }}
+          {{ $i18n.locale === 'tha' ? value + 543 : value }}
         </template>
         <template #trigger>
           <q-input
@@ -411,13 +411,13 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
             :for="`${prefixId}-input-birth-date`"
             hide-bottom-space
             placeholder="DD/MM/YYYY"
-            :label="$t('formDialogInputBirthDate')"
+            :label="$t('form.birthDate')"
             dense
             outlined
             :readonly="readonly"
             :rules="[
               (val: string) =>
-                !!val || $t('selectValidate') + $t('formDialogInputBirthDate'),
+                !!val || $t('selectValidate') + $t('form.birthDate'),
             ]"
             :mask="readonly ? '' : '##/##/####'"
             :model-value="
@@ -454,7 +454,7 @@ function formatCode(input: string | undefined, type: 'code' | 'number') {
         dense
         outlined
         :readonly="readonly"
-        :label="$t('formDialogInputAge')"
+        :label="$t('general.age')"
         class="col-12 col-md-2"
         :model-value="
           birthDate?.toString() === 'Invalid Date' ||
diff --git a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
index dfb4cc9c..eb96b447 100644
--- a/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
+++ b/src/pages/03_customer-management/components/employer/EmployerFormBusiness.vue
@@ -39,11 +39,11 @@ onMounted(async () => {
   const resultOption = await fetch('/option/option.json');
   rawOption.value = await resultOption.json();
 
-  if (locale.value === 'en-US') {
+  if (locale.value === 'eng') {
     typeBusinessOption.value = rawOption.value.eng.businessType;
     jobPositionOption.value = rawOption.value.eng.position;
   }
-  if (locale.value === 'th-th') {
+  if (locale.value === 'tha') {
     typeBusinessOption.value = rawOption.value.tha.businessType;
     jobPositionOption.value = rawOption.value.tha.position;
   }
@@ -118,7 +118,7 @@ let jobPositionFilter = selectFilterOptionRefMod(
       <template v-slot:no-option>
         <q-item>
           <q-item-section class="text-grey">
-            {{ $t('noResults') }}
+            {{ $t('general.noData') }}
           </q-item-section>
         </q-item>
       </template>
@@ -162,7 +162,7 @@ let jobPositionFilter = selectFilterOptionRefMod(
       <template v-slot:no-option>
         <q-item>
           <q-item-section class="text-grey">
-            {{ $t('noResults') }}
+            {{ $t('general.noData') }}
           </q-item-section>
         </q-item>
       </template>
diff --git a/src/pages/03_customer-management/constant.ts b/src/pages/03_customer-management/constant.ts
index fcc90430..bbb62ac1 100644
--- a/src/pages/03_customer-management/constant.ts
+++ b/src/pages/03_customer-management/constant.ts
@@ -17,56 +17,56 @@ export const columnsEmployee = [
   {
     name: 'orderNumber',
     align: 'center',
-    label: 'orderNumber',
+    label: 'general.orderNumber',
     field: 'branchNo',
   },
 
   {
     name: 'firstName',
     align: 'left',
-    label: 'nameEmployee',
+    label: 'general.name',
     field: 'firstName',
   },
 
   {
-    name: 'formDialogInputAge',
+    name: 'general.age',
     align: 'left',
-    label: 'formDialogInputAge',
+    label: 'general.age',
     field: 'dateOfBirth',
   },
 
   {
     name: 'formDialogInputNationality',
     align: 'left',
-    label: 'formDialogInputNationality',
+    label: 'general.nationality',
     field: 'nationality',
   },
 
   {
     name: 'formDialogInputPassportNo',
     align: 'left',
-    label: 'formDialogInputPassportNo',
+    label: 'customerEmployee.form.passportNo',
     field: 'passportNumber',
   },
 
   {
     name: 'passportExpiryDate',
     align: 'left',
-    label: 'passportExpire',
+    label: 'customerEmployee.form.passportExpireDate',
     field: 'passportExpiryDate',
   },
 
   {
     name: 'formDialogEmployeeNRCNo',
     align: 'left',
-    label: 'formDialogEmployeeNRCNo',
+    label: 'customerEmployee.form.nrcNo',
     field: 'nrcNo',
   },
 
   {
     name: 'branchLabel',
     align: 'left',
-    label: 'branchLabel',
+    label: 'customerEmployee.branch',
     field: 'customerBranch',
   },
 
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 048798f2..c372c9c4 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, watch, reactive, handleError } from 'vue';
+import { ref, watch, reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { onMounted } from 'vue';
 import { getUserId, getRole } from 'src/services/keycloak';
@@ -114,14 +114,14 @@ const stat = ref<
   {
     icon: 'mdi-folder-outline',
     count: 0,
-    label: 'productAndService',
+    label: 'productService.group.title',
     mode: 'group',
     color: 'pink',
   },
   {
     icon: 'mdi-folder-table-outline',
     count: 0,
-    label: 'productAndServiceType',
+    label: 'productService.type.title',
     mode: 'type',
     color: 'purple',
   },
@@ -135,7 +135,7 @@ const stat = ref<
   {
     icon: 'mdi-shopping-outline',
     count: 0,
-    label: 'product',
+    label: 'productService.product.title',
     mode: 'product',
     color: 'green',
   },
@@ -284,31 +284,31 @@ const tbColumn = {
     {
       name: 'branchLabelNo',
       align: 'center',
-      label: 'orderNumber',
+      label: 'general.order',
       field: 'branchNo',
     },
     {
       name: 'name',
       align: 'left',
-      label: 'name',
+      label: 'general.name',
       field: 'name',
     },
     {
       name: 'detail',
       align: 'left',
-      label: 'detail',
+      label: 'general.detail',
       field: 'detail',
     },
     {
       name: 'formDialogInputRemark',
       align: 'left',
-      label: 'formDialogInputRemark',
+      label: 'general.remark',
       field: 'remark',
     },
     {
       name: 'createdAt',
       align: 'left',
-      label: 'createdAt',
+      label: 'general.createdAt',
       field: 'createdAt',
     },
   ],
@@ -317,26 +317,31 @@ const tbColumn = {
     {
       name: 'branchLabelNo',
       align: 'center',
-      label: 'orderNumber',
+      label: 'general.order',
       field: 'branchNo',
     },
-    { name: 'productName', align: 'left', label: 'productName', field: 'name' },
+    {
+      name: 'productName',
+      align: 'left',
+      label: 'general.name',
+      field: 'name',
+    },
     {
       name: 'productDetail',
       align: 'left',
-      label: 'productDetail',
+      label: 'general.detail',
       field: 'detail',
     },
     {
       name: 'productProcessingTime',
       align: 'left',
-      label: 'productProcessingTime',
+      label: 'productService.product.processingTimeDay',
       field: 'process',
     },
     {
       name: 'priceInformation',
       align: 'center',
-      label: 'priceInformation',
+      label: 'productService.product.priceInformation',
       field: 'name',
     },
   ],
@@ -344,26 +349,31 @@ const tbColumn = {
     {
       name: 'branchLabelNo',
       align: 'center',
-      label: 'orderNumber',
+      label: 'general.order',
       field: 'branchNo',
     },
-    { name: 'serviceName', align: 'left', label: 'serviceName', field: 'name' },
+    {
+      name: 'serviceName',
+      align: 'left',
+      label: 'general.name',
+      field: 'name',
+    },
     {
       name: 'serviceDetail',
       align: 'left',
-      label: 'serviceDetail',
+      label: 'general.detail',
       field: 'detail',
     },
     {
       name: 'serviceWorkTotal',
       align: 'left',
-      label: 'serviceWorkTotal',
+      label: 'productService.service.totalWork',
       field: (v) => v.work.length,
     },
     {
       name: 'createdAt',
       align: 'left',
-      label: 'createdAt',
+      label: 'general.createdAt',
       field: 'createdAt',
     },
   ],
@@ -376,11 +386,11 @@ const tbColumn = {
 const tbControl = reactive({
   groupAndType: {
     fieldDisplay: [
-      { value: 'branchLabelNo', label: 'orderNumber' },
-      { value: 'name', label: 'name' },
-      { value: 'detail', label: 'detail' },
-      { value: 'formDialogInputRemark', label: 'formDialogInputRemark' },
-      { value: 'createdAt', label: 'createdAt' },
+      { value: 'branchLabelNo', label: 'general.order' },
+      { value: 'name', label: 'general.name' },
+      { value: 'detail', label: 'general.detail' },
+      { value: 'formDialogInputRemark', label: 'general.remark' },
+      { value: 'createdAt', label: 'general.createdAt' },
     ],
     fieldSelected: [
       'branchLabelNo',
@@ -392,11 +402,17 @@ const tbControl = reactive({
   },
   product: {
     fieldDisplay: [
-      { value: 'branchLabelNo', label: 'orderNumber' },
-      { value: 'productName', label: 'productName' },
-      { value: 'productDetail', label: 'productDetail' },
-      { value: 'productProcessingTime', label: 'productProcessingTime' },
-      { value: 'priceInformation', label: 'priceInformation' },
+      { value: 'branchLabelNo', label: 'general.order' },
+      { value: 'productName', label: 'general.name' },
+      { value: 'productDetail', label: 'general.detail' },
+      {
+        value: 'productProcessingTime',
+        label: 'productService.product.processingTimeDay',
+      },
+      {
+        value: 'priceInformation',
+        label: 'productService.product.priceInformation',
+      },
     ],
     fieldSelected: [
       'branchLabelNo',
@@ -408,11 +424,11 @@ const tbControl = reactive({
   },
   service: {
     fieldDisplay: [
-      { value: 'branchLabelNo', label: 'orderNumber' },
-      { value: 'serviceName', label: 'serviceName' },
-      { value: 'serviceDetail', label: 'serviceDetail' },
-      { value: 'serviceWorkTotal', label: 'serviceWorkTotal' },
-      { value: 'createdAt', label: 'createdAt' },
+      { value: 'branchLabelNo', label: 'general.order' },
+      { value: 'serviceName', label: 'general.name' },
+      { value: 'serviceDetail', label: 'general.detail' },
+      { value: 'serviceWorkTotal', label: 'productService.service.totalWork' },
+      { value: 'createdAt', label: 'general.createdAt' },
     ],
     fieldSelected: [
       'branchLabelNo',
@@ -726,13 +742,13 @@ async function triggerChangeStatus(
       color: status !== 'INACTIVE' ? 'warning' : 'info',
       icon:
         status !== 'INACTIVE' ? 'mdi-alert' : 'mdi-message-processing-outline',
-      title: t('confirmChangeStatusTitle'),
+      title: t('dialog.title.confirmChangeStatus'),
       actionText:
-        status !== 'INACTIVE' ? t('switchOffLabel') : t('switchOnLabel'),
+        status !== 'INACTIVE' ? t('general.close') : t('general.open'),
       message:
         status !== 'INACTIVE'
-          ? t('confirmChangeStatusOffMessage')
-          : t('confirmChangeStatusOnMessage'),
+          ? t('dialog.message.confirmChangeStatusOff')
+          : t('dialog.message.confirmChangeStatusOn'),
       action: async () => {
         if (type === 'group' || productMode.value === 'group') {
           const res = await toggleStatusGroup(id, status as Status)
@@ -763,10 +779,10 @@ async function deleteServiceConfirm(serviceId?: string) {
   dialog({
     color: 'negative',
     icon: 'mdi-alert',
-    title: t('deleteConfirmTitle'),
-    actionText: t('ok'),
+    title: t('dialog.title.confirmDelete'),
+    actionText: t('general.delete'),
     persistent: true,
-    message: t('deleteConfirmMessage'),
+    message: t('dialog.message.confirmDelete'),
     action: async () => {
       const res = await deleteService(serviceId ?? currentIdService.value);
 
@@ -790,10 +806,10 @@ async function deleteProductConfirm(id?: string) {
   dialog({
     color: 'negative',
     icon: 'mdi-alert',
-    title: t('deleteConfirmTitle'),
-    actionText: t('ok'),
+    title: t('dialog.title.confirmDelete'),
+    actionText: t('general.delete'),
     persistent: true,
-    message: t('deleteConfirmMessage'),
+    message: t('dialog.message.confirmDelete'),
     action: async () => {
       const res = await deleteProduct(id ?? currentIdProduct.value);
 
@@ -823,10 +839,10 @@ async function deleteProductById(productId?: string) {
   dialog({
     color: 'negative',
     icon: 'mdi-alert',
-    title: t('deleteConfirmTitle'),
-    actionText: t('ok'),
+    title: t('dialog.title.confirmDelete'),
+    actionText: t('general.delete'),
     persistent: true,
-    message: t('deleteConfirmMessage'),
+    message: t('dialog.message.confirmDelete'),
     action: async () => {
       if (editByTree.value !== undefined) {
         if (editByTree.value === 'type') {
@@ -1180,9 +1196,9 @@ function confirmDeleteWork(id: string) {
   dialog({
     color: 'negative',
     icon: 'mdi-alert',
-    title: t('deleteConfirmTitle'),
-    actionText: t('delete'),
-    message: t('deleteConfirmMessage'),
+    title: t('dialog.title.confirmDelete'),
+    actionText: t('general.delete'),
+    message: t('dialog.message.confirmDelete'),
     action: async () => {
       deleteWork(id);
       flowStore.rotate();
@@ -1329,19 +1345,20 @@ function handleStatus() {
   return tempValue;
 }
 
-// function handleHold(node: ProductGroup & { type: string}) {
-//   if ($q.screen.gt.xs) return;
-//   return function (props: unknown) {
-//     holdDialog.value = true;
-//     currentNode.value = node;
-//   };
-// }
+function handleHold(node: ProductGroup & { type: string }) {
+  if ($q.screen.gt.xs) return;
+  console.log('asd');
+  holdDialog.value = true;
+  currentNode.value = node;
+  // return function (props: unknown) {
+  // };
+}
 
 onMounted(async () => {
-  utilsStore.currentTitle.title = 'mainProductTitle';
+  utilsStore.currentTitle.title = 'productService.title';
   utilsStore.currentTitle.path = [
     {
-      text: 'manage',
+      text: 'productService.caption',
       i18n: true,
       handler: () => {
         expandedTree.value = [];
@@ -1366,7 +1383,7 @@ watch(
 
     let tmp: typeof utilsStore.currentTitle.path = [
       {
-        text: 'manage',
+        text: 'productService.caption',
         i18n: true,
         handler: () => {
           productMode.value = 'group';
@@ -1385,7 +1402,7 @@ watch(
       productMode.value === 'service'
     ) {
       tmp.push({
-        text: 'productGroup',
+        text: 'productService.group.withName',
         i18n: true,
         argsi18n: { name: pathGroupName.value },
         handler: () => {
@@ -1404,13 +1421,15 @@ watch(
         },
       });
       if (expandedTree.value.length === 0) {
-        utilsStore.currentTitle.path = [{ text: 'manage', i18n: true }];
+        utilsStore.currentTitle.path = [
+          { text: 'productService.caption', i18n: true },
+        ];
         return;
       }
     }
     if (productMode.value === 'service') {
       tmp.push({
-        text: 'productType',
+        text: 'productService.type.withName',
         i18n: true,
         argsi18n: { name: pathTypeName.value },
       });
@@ -1469,7 +1488,7 @@ watch([currentStatusList, productMode], () => {
       style="color: white; background-color: hsla(var(--pink-6-hsl))"
       padding="xs"
       icon="mdi-folder-multiple-plus-outline"
-      :label="$t('productAndService')"
+      :label="$t('productService.group.addTitle')"
       external-label
       label-position="left"
       @click="
@@ -1482,7 +1501,7 @@ watch([currentStatusList, productMode], () => {
     <q-fab-action
       v-if="productMode === 'type'"
       id="btn-add-product-type"
-      :label="$t('productAndServiceType')"
+      :label="$t('productService.type.addTitle')"
       external-label
       label-position="left"
       style="color: white; background-color: hsla(var(--purple-11-hsl))"
@@ -1497,7 +1516,7 @@ watch([currentStatusList, productMode], () => {
     ></q-fab-action>
     <q-fab-action
       v-if="productMode === 'service'"
-      :label="$t('buttonAddProduct')"
+      :label="$t('productService.product.addTitle')"
       external-label
       label-position="left"
       style="color: white; background-color: hsla(var(--green-11-hsl))"
@@ -1514,7 +1533,7 @@ watch([currentStatusList, productMode], () => {
     ></q-fab-action>
     <q-fab-action
       v-if="productMode === 'service'"
-      :label="$t('addService')"
+      :label="$t('productService.service.addTitle')"
       external-label
       label-position="left"
       style="color: white; background-color: hsla(var(--orange-6-hsl))"
@@ -1535,7 +1554,7 @@ watch([currentStatusList, productMode], () => {
 
   <div class="full-height column no-wrap">
     <div class="text-body-2 q-mb-xs flex items-center">
-      {{ $t('dataSum') }}
+      {{ $t('general.dataSum') }}
       <q-btn
         class="q-ml-xs"
         icon="mdi-pin-outline"
@@ -1580,7 +1599,9 @@ watch([currentStatusList, productMode], () => {
               class="row no-wrap full-width bordered-b text-weight-bold surface-3 items-center q-px-md q-py-sm"
               :style="`min-height: ${$q.screen.gt.sm ? '57px' : '100.8px'}`"
             >
-              <div class="col ellipsis-2-lines">จัดการสาขาทั้งหมด</div>
+              <div class="col ellipsis-2-lines">
+                {{ $t('productService.caption') }}
+              </div>
             </div>
 
             <div class="col full-width scroll">
@@ -1712,6 +1733,7 @@ watch([currentStatusList, productMode], () => {
                       }
                     }
                   "
+                  @handle-hold="handleHold"
                 />
               </div>
             </div>
@@ -1735,7 +1757,7 @@ watch([currentStatusList, productMode], () => {
                   outlined
                   :class="{ 'col-12': $q.screen.lt.md }"
                   dense
-                  :label="$t('search')"
+                  :label="$t('general.search')"
                   class=""
                   :bg-color="$q.dark.isActive ? 'dark' : 'white'"
                   v-model="inputSearch"
@@ -1765,10 +1787,10 @@ watch([currentStatusList, productMode], () => {
                     emit-value
                     :hide-dropdown-icon="$q.screen.lt.sm"
                     :options="[
-                      { label: $t('all'), value: 'All' },
-                      { label: $t('statusACTIVE'), value: 'ACTIVE' },
+                      { label: $t('general.all'), value: 'All' },
+                      { label: $t('general.active'), value: 'ACTIVE' },
                       {
-                        label: $t('statusINACTIVE'),
+                        label: $t('general.inactive'),
                         value: 'INACTIVE',
                       },
                     ]"
@@ -1786,7 +1808,7 @@ watch([currentStatusList, productMode], () => {
                       }))
                     "
                     :hide-dropdown-icon="$q.screen.lt.sm"
-                    :display-value="$t('displayField')"
+                    :display-value="$t('general.displayField')"
                     v-model="tbControl.groupAndType.fieldSelected"
                     class="col q-ml-sm"
                     option-label="label"
@@ -2105,7 +2127,7 @@ watch([currentStatusList, productMode], () => {
                                     style="color: hsl(var(--green-6-hsl))"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('viewDetail') }}
+                                    {{ $t('general.viewDetail') }}
                                   </span>
                                 </q-item>
 
@@ -2149,7 +2171,7 @@ watch([currentStatusList, productMode], () => {
                                     style="color: hsl(var(--cyan-6-hsl))"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('edit') }}
+                                    {{ $t('general.edit') }}
                                   </span>
                                 </q-item>
 
@@ -2191,7 +2213,7 @@ watch([currentStatusList, productMode], () => {
                                     }"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('delete') }}
+                                    {{ $t('general.delete') }}
                                   </span>
                                 </q-item>
 
@@ -2218,8 +2240,8 @@ watch([currentStatusList, productMode], () => {
                                       <span class="q-pl-md">
                                         {{
                                           props.row.status !== 'INACTIVE'
-                                            ? $t('switchOnLabel')
-                                            : $t('switchOffLabel')
+                                            ? $t('general.open')
+                                            : $t('general.close')
                                         }}
                                       </span>
                                     </div>
@@ -2344,11 +2366,10 @@ watch([currentStatusList, productMode], () => {
                   <div class="col-4">
                     <div class="row items-center">
                       <div
-                        class="app-text-muted"
-                        style="width: 80px"
+                        class="app-text-muted q-mr-sm"
                         v-if="$q.screen.gt.sm"
                       >
-                        {{ $t('showing') }}
+                        {{ $t('general.recordPerPage') }}
                       </div>
                       <div>
                         <q-btn-dropdown
@@ -2382,7 +2403,7 @@ watch([currentStatusList, productMode], () => {
 
                   <div class="col-4 row justify-center app-text-muted">
                     {{
-                      $t('recordsPage', {
+                      $t('general.recordsPage', {
                         resultcurrentPage: productGroup?.length,
                         total: totalGroup,
                       })
@@ -2410,11 +2431,10 @@ watch([currentStatusList, productMode], () => {
                   <div class="col-4">
                     <div class="row items-center">
                       <div
-                        class="app-text-muted"
-                        style="width: 80px"
+                        class="app-text-muted q-mr-sm"
                         v-if="$q.screen.gt.sm"
                       >
-                        {{ $t('showing') }}
+                        {{ $t('general.recordPerPage') }}
                       </div>
                       <div>
                         <q-btn-dropdown
@@ -2448,7 +2468,7 @@ watch([currentStatusList, productMode], () => {
 
                   <div class="col-4 row justify-center app-text-muted">
                     {{
-                      $t('recordsPage', {
+                      $t('general.recordsPage', {
                         resultcurrentPage: productType?.length,
                         total: totalType,
                       })
@@ -2485,7 +2505,7 @@ watch([currentStatusList, productMode], () => {
                   outlined
                   dense
                   unelavated
-                  :label="$t('search')"
+                  :label="$t('general.search')"
                   :bg-color="$q.dark.isActive ? 'dark' : 'white'"
                   v-model="inputSearchProductAndService"
                   debounce="250"
@@ -2514,10 +2534,10 @@ watch([currentStatusList, productMode], () => {
                     map-options
                     emit-value
                     :options="[
-                      { label: $t('all'), value: 'All' },
-                      { label: $t('statusACTIVE'), value: 'ACTIVE' },
+                      { label: $t('general.all'), value: 'All' },
+                      { label: $t('general.active'), value: 'ACTIVE' },
                       {
-                        label: $t('statusINACTIVE'),
+                        label: $t('general.inactive'),
                         value: 'INACTIVE',
                       },
                     ]"
@@ -2540,7 +2560,7 @@ watch([currentStatusList, productMode], () => {
                         value: x.value,
                       }))
                     "
-                    :display-value="$t('displayField')"
+                    :display-value="$t('general.displayField')"
                     :model-value="
                       {
                         product: tbControl.product.fieldSelected,
@@ -2618,6 +2638,7 @@ watch([currentStatusList, productMode], () => {
                   <q-tab
                     id="tab-service"
                     name="service"
+                    class="text-capitalize"
                     @click="
                       async () => {
                         currentPageServiceAndProduct = 1;
@@ -2642,6 +2663,7 @@ watch([currentStatusList, productMode], () => {
                   <q-tab
                     id="tab-product"
                     name="product"
+                    class="text-capitalize"
                     @click="
                       async () => {
                         currentPageServiceAndProduct = 1;
@@ -2660,7 +2682,7 @@ watch([currentStatusList, productMode], () => {
                           : 'app-text-muted'
                       "
                     >
-                      {{ $t('product') }}
+                      {{ $t('productService.product.title') }}
                     </div>
                   </q-tab>
                 </q-tabs>
@@ -2889,7 +2911,7 @@ watch([currentStatusList, productMode], () => {
                               v-if="priceDisplay.price"
                             >
                               <div class="col app-text-muted-2 text-caption">
-                                {{ $t('salePrice') }}
+                                {{ $t('productService.product.salePrice') }}
                               </div>
                               <div class="col text-weight-bold">
                                 ฿{{
@@ -2906,7 +2928,7 @@ watch([currentStatusList, productMode], () => {
                               v-if="priceDisplay.agentPrice"
                             >
                               <div class="col app-text-muted-2 text-caption">
-                                {{ $t('agentPrice') }}
+                                {{ $t('productService.product.agentPrice') }}
                               </div>
                               <div class="col text-weight-bold">
                                 ฿{{
@@ -2926,7 +2948,9 @@ watch([currentStatusList, productMode], () => {
                               v-if="priceDisplay.serviceCharge"
                             >
                               <div class="col app-text-muted-2 text-caption">
-                                {{ $t('processingPrice') }}
+                                {{
+                                  $t('productService.product.processingPrice')
+                                }}
                               </div>
                               <div class="col">
                                 ฿{{
@@ -3021,7 +3045,7 @@ watch([currentStatusList, productMode], () => {
                                     style="color: hsl(var(--green-6-hsl))"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('viewDetail') }}
+                                    {{ $t('general.viewDetail') }}
                                   </span>
                                 </q-item>
 
@@ -3059,7 +3083,7 @@ watch([currentStatusList, productMode], () => {
                                     style="color: hsl(var(--cyan-6-hsl))"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('edit') }}
+                                    {{ $t('general.edit') }}
                                   </span>
                                 </q-item>
                                 <q-item
@@ -3095,7 +3119,7 @@ watch([currentStatusList, productMode], () => {
                                     }"
                                   />
                                   <span class="col-9 q-px-md flex items-center">
-                                    {{ $t('delete') }}
+                                    {{ $t('general.delete') }}
                                   </span>
                                 </q-item>
 
@@ -3124,8 +3148,8 @@ watch([currentStatusList, productMode], () => {
                                       <span class="q-pl-md">
                                         {{
                                           props.row.status !== 'INACTIVE'
-                                            ? $t('switchOnLabel')
-                                            : $t('switchOffLabel')
+                                            ? $t('general.open')
+                                            : $t('general.close')
                                         }}
                                       </span>
                                     </div>
@@ -3197,12 +3221,8 @@ watch([currentStatusList, productMode], () => {
               >
                 <div class="col-4">
                   <div class="row items-center">
-                    <div
-                      class="app-text-muted"
-                      style="width: 80px"
-                      v-if="$q.screen.gt.sm"
-                    >
-                      {{ $t('showing') }}
+                    <div class="app-text-muted q-mr-sm" v-if="$q.screen.gt.sm">
+                      {{ $t('general.recordPerPage') }}
                     </div>
                     <div>
                       <q-btn-dropdown
@@ -3242,7 +3262,7 @@ watch([currentStatusList, productMode], () => {
 
                 <div class="col-4 row justify-center app-text-muted">
                   {{
-                    $t('recordsPage', {
+                    $t('general.recordsPage', {
                       resultcurrentPage:
                         productAndServiceTab === 'product'
                           ? product?.length
@@ -3288,7 +3308,7 @@ watch([currentStatusList, productMode], () => {
         hideActive
         useToggle
         :img="`/images/product-service-${productMode}-avatar-add${productMode === 'type' ? ($q.dark.isActive ? '-d' : '-l') : ''}.png`"
-        :toggleTitle="$t('formDialogTitleUseStatus')"
+        :toggleTitle="$t('status.title')"
         :icon="
           productMode === 'group'
             ? 'mdi-folder-plus-outline'
@@ -3340,7 +3360,7 @@ watch([currentStatusList, productMode], () => {
           <SideMenu
             :menu="[
               {
-                name: $t('formDialogTitleInformation'),
+                name: $t('form.field.basicInformation'),
                 anchor: 'form-group',
               },
             ]"
@@ -3377,12 +3397,12 @@ watch([currentStatusList, productMode], () => {
     :title="
       $t(
         editByTree === 'group'
-          ? 'productGroup'
+          ? 'productService.group.withName'
           : editByTree === 'type'
-            ? 'productType'
+            ? 'productService.type.withName'
             : productMode === 'group'
-              ? 'productGroup'
-              : 'productType',
+              ? 'productService.group.withName'
+              : 'productService.type.withName',
         {
           name: formDataGroup.code,
         },
@@ -3448,7 +3468,7 @@ watch([currentStatusList, productMode], () => {
           }-hsl)/0.1)`"
           :title="formDataGroup.name"
           :caption="formDataGroup.code"
-          :toggleTitle="$t('formDialogTitleUserStatus')"
+          :toggleTitle="$t('status.title')"
           :menu="[
             {
               icon: 'mdi-office-building-outline',
@@ -3507,12 +3527,13 @@ watch([currentStatusList, productMode], () => {
             </div>
           </div>
           <div
+            v-if="$q.screen.gt.sm"
             class="col full-height rounded scroll row q-py-md q-pl-md q-pr-sm"
           >
             <SideMenu
               :menu="[
                 {
-                  name: $t('formDialogTitleInformation'),
+                  name: $t('form.field.basicInformation'),
                   anchor: 'info-group',
                 },
               ]"
@@ -3548,6 +3569,7 @@ watch([currentStatusList, productMode], () => {
   <!-- work product, product work -->
   <DialogForm
     v-model:modal="dialogTotalProduct"
+    :submitLabel="$t('general.select')"
     noAddress
     noAppBox
     :title="$t('productService.product.allProduct')"
@@ -3596,7 +3618,7 @@ watch([currentStatusList, productMode], () => {
         v-if="productIsAdd?.length !== 0"
       >
         <q-checkbox
-          :label="$t('selectAll')"
+          :label="$t('general.selectAll')"
           :model-value="
             !!inputSearchProductAndService
               ? selectProduct.length ===
@@ -3646,9 +3668,8 @@ watch([currentStatusList, productMode], () => {
           lazy-rules="ondemand"
           id="input-search-add-product"
           outlined
-          style="width: 250px"
           dense
-          :label="$t('search')"
+          :label="$t('general.search')"
           :bg-color="$q.dark.isActive ? 'dark' : 'white'"
           v-model="inputSearchProductAndService"
           debounce="500"
@@ -3673,7 +3694,7 @@ watch([currentStatusList, productMode], () => {
           "
         />
       </div>
-      <div v-else class="row q-col-gutter-md">
+      <div v-else class="row q-col-gutter-md full-width">
         <div
           class="col-md-3 col-sm-6 col-12"
           v-for="i in (!!inputSearchProductAndService
@@ -3739,7 +3760,7 @@ watch([currentStatusList, productMode], () => {
   <!-- Add Product -->
   <DialogForm
     v-model:modal="dialogProduct"
-    :title="$t('buttonAddProduct')"
+    :title="$t('productService.product.addTitle')"
     :submit="
       () => {
         submitProduct();
@@ -3757,7 +3778,7 @@ watch([currentStatusList, productMode], () => {
         hideFade
         useToggle
         hideActive
-        :toggleTitle="$t('formDialogTitleUseStatus')"
+        :toggleTitle="$t('status.title')"
         :img="profileUrl || '/images/product-avatar-add.png'"
         fallbackCover="/images/product-banner.png"
         :bgColor="`hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
@@ -3777,12 +3798,27 @@ watch([currentStatusList, productMode], () => {
               formDataProduct.status === 'CREATED' ? 'INACTIVE' : 'CREATED';
           }
         "
+        :tabsList="
+          $q.screen.gt.sm
+            ? []
+            : [
+                {
+                  name: 1,
+                  label: $t(`form.field.basicInformation`),
+                },
+                {
+                  name: 2,
+                  label: $t('productService.product.priceInformation'),
+                },
+              ]
+        "
+        v-model:currentTab="productTab"
       />
     </div>
 
     <div
       class="col surface-1 q-ma-lg rounded bordered scroll row relative-position"
-      id="group-form"
+      id="product-form"
     >
       <div
         class="col"
@@ -3804,8 +3840,8 @@ watch([currentStatusList, productMode], () => {
             <span class="full-width q-py-sm" style="padding-inline: 20px">
               {{
                 v === 1
-                  ? $t('formDialogTitleInformation')
-                  : $t('priceInformation')
+                  ? $t('form.field.basicInformation')
+                  : $t('productService.product.priceInformation')
               }}
             </span>
           </q-item>
@@ -3844,7 +3880,7 @@ watch([currentStatusList, productMode], () => {
   <DialogForm
     v-model:modal="dialogProductEdit"
     noAddress
-    :title="$t('editProduct')"
+    :title="$t('productService.product.title')"
     :editData="() => (infoProductEdit = true)"
     :undo="
       () => {
@@ -3875,7 +3911,7 @@ watch([currentStatusList, productMode], () => {
         fallbackImg="/images/product-avatar.png"
         color="var(--teal-10)"
         :readonly="!infoProductEdit"
-        :toggleTitle="$t('formDialogTitleUseStatus')"
+        :toggleTitle="$t('status.title')"
         :img="profileUrl || '/images/product-avatar.png'"
         fallbackCover="/images/product-banner.png"
         :bgColor="`hsla(var(--teal-${$q.dark.isActive ? '8' : '10'}-hsl)/0.15)`"
@@ -3899,6 +3935,21 @@ watch([currentStatusList, productMode], () => {
               );
           }
         "
+        :tabsList="
+          $q.screen.gt.sm
+            ? []
+            : [
+                {
+                  name: 1,
+                  label: $t(`form.field.basicInformation`),
+                },
+                {
+                  name: 2,
+                  label: $t('productService.product.priceInformation'),
+                },
+              ]
+        "
+        v-model:currentTab="productTab"
       />
     </div>
 
@@ -3964,8 +4015,8 @@ watch([currentStatusList, productMode], () => {
             <span class="full-width q-py-sm" style="padding-inline: 20px">
               {{
                 v === 1
-                  ? $t('formDialogTitleInformation')
-                  : $t('priceInformation')
+                  ? $t('form.field.basicInformation')
+                  : $t('productService.product.priceInformation')
               }}
             </span>
           </q-item>
@@ -4008,7 +4059,7 @@ watch([currentStatusList, productMode], () => {
     no-address
     no-app-box
     height="95vh"
-    :title="$t('addService')"
+    :title="$t('productService.service.addTitle')"
     v-model:modal="dialogService"
     :submit="
       () => {
@@ -4028,7 +4079,7 @@ watch([currentStatusList, productMode], () => {
         hideFade
         useToggle
         hideActive
-        :toggleTitle="$t('formDialogTitleUseStatus')"
+        :toggleTitle="$t('status.title')"
         :img="profileUrl || '/images/service-avatar-add.png'"
         fallbackCover="/images/service-banner.png"
         :bgColor="`hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`"
@@ -4055,12 +4106,27 @@ watch([currentStatusList, productMode], () => {
                 : 'CREATED';
           }
         "
+        :tabsList="
+          $q.screen.gt.sm
+            ? []
+            : [
+                {
+                  name: 1,
+                  label: $t('productService.service.information'),
+                },
+                {
+                  name: 2,
+                  label: $t('productService.service.workInformation'),
+                },
+              ]
+        "
+        v-model:currentTab="serviceTab"
       />
     </div>
 
     <div
       class="col surface-1 q-mx-lg q-mt-lg q-mb-md rounded bordered scroll row relative-position"
-      id="group-form"
+      id="service-form"
     >
       <div
         class="col"
@@ -4080,7 +4146,11 @@ watch([currentStatusList, productMode], () => {
             @click="serviceTab = v"
           >
             <span class="full-width q-py-sm" style="padding-inline: 20px">
-              {{ v === 1 ? $t('serviceInformation') : $t('workInformation') }}
+              {{
+                v === 1
+                  ? $t('productService.service.information')
+                  : $t('productService.service.workInformation')
+              }}
             </span>
           </q-item>
         </div>
@@ -4155,7 +4225,7 @@ watch([currentStatusList, productMode], () => {
     no-app-box
     height="75vh"
     width="75%"
-    :title="$t('properties')"
+    :title="$t('productService.service.properties')"
     v-model:modal="propertiesDialog"
     :submit="
       () => {
@@ -4175,7 +4245,7 @@ watch([currentStatusList, productMode], () => {
       }
     "
   >
-    <div class="q-pa-lg full-height">
+    <div class="q-pa-lg full-width full-height">
       <ServiceProperties
         v-model:properties-option="propertiesOption"
         v-model:form-service-properties="tempValueProperties"
@@ -4189,7 +4259,7 @@ watch([currentStatusList, productMode], () => {
     height="65vh"
     width="65%"
     v-model:modal="manageWorkNameDialog"
-    :title="$t('manage')"
+    :title="$t('general.manage')"
     :close="triggerConfirmCloseWork"
   >
     <div class="q-pa-lg full-height">
@@ -4246,7 +4316,7 @@ watch([currentStatusList, productMode], () => {
         :caption="formDataProductService.code"
         :active="formDataProductService.status !== 'INACTIVE'"
         :readonly="!infoServiceEdit"
-        :toggleTitle="$t('formDialogTitleUseStatus')"
+        :toggleTitle="$t('status.title')"
         :img="profileUrl || '/images/service-avatar.png'"
         fallbackCover="/images/service-banner.png"
         :bgColor="`hsla(var(--orange-${$q.dark.isActive ? '6' : '5'}-hsl)/0.15)`"
@@ -4275,6 +4345,21 @@ watch([currentStatusList, productMode], () => {
               );
           }
         "
+        :tabsList="
+          $q.screen.gt.sm
+            ? []
+            : [
+                {
+                  name: 1,
+                  label: $t('productService.service.information'),
+                },
+                {
+                  name: 2,
+                  label: $t('productService.service.workInformation'),
+                },
+              ]
+        "
+        v-model:currentTab="serviceTab"
       />
     </div>
 
@@ -4340,7 +4425,11 @@ watch([currentStatusList, productMode], () => {
             @click="serviceTab = v"
           >
             <span class="full-width q-py-sm" style="padding-inline: 20px">
-              {{ v === 1 ? $t('serviceInformation') : $t('workInformation') }}
+              {{
+                v === 1
+                  ? $t('productService.service.information')
+                  : $t('productService.service.workInformation')
+              }}
             </span>
           </q-item>
         </div>
@@ -4464,7 +4553,7 @@ watch([currentStatusList, productMode], () => {
               style="color: hsl(var(--green-6-hsl))"
             />
           </q-item-section>
-          <q-item-section>{{ $t('viewDetail') }}</q-item-section>
+          <q-item-section>{{ $t('general.viewDetail') }}</q-item-section>
         </q-item>
 
         <q-item
@@ -4499,7 +4588,7 @@ watch([currentStatusList, productMode], () => {
               style="color: hsl(var(--cyan-6-hsl))"
             />
           </q-item-section>
-          <q-item-section>{{ $t('edit') }}</q-item-section>
+          <q-item-section>{{ $t('general.edit') }}</q-item-section>
         </q-item>
 
         <q-item
@@ -4523,7 +4612,7 @@ watch([currentStatusList, productMode], () => {
           <q-item-section avatar>
             <q-icon name="mdi-trash-can-outline" class="app-text-negative" />
           </q-item-section>
-          <q-item-section>{{ $t('delete') }}</q-item-section>
+          <q-item-section>{{ $t('general.delete') }}</q-item-section>
         </q-item>
 
         <q-item clickable v-ripple>
@@ -4562,8 +4651,8 @@ watch([currentStatusList, productMode], () => {
           <q-item-section>
             {{
               currentNode.status !== 'INACTIVE'
-                ? $t('switchOnLabel')
-                : $t('switchOffLabel')
+                ? $t('general.open')
+                : $t('general.close')
             }}
           </q-item-section>
         </q-item>
diff --git a/src/pages/06_edm/MainPage.vue b/src/pages/06_edm/MainPage.vue
index 84a80d80..2fa805d1 100644
--- a/src/pages/06_edm/MainPage.vue
+++ b/src/pages/06_edm/MainPage.vue
@@ -10,7 +10,7 @@ const at = ref(kc.token);
 const rt = ref(kc.refreshToken);
 
 onMounted(() => {
-  utilsStore.currentTitle.title = 'Document Management';
+  utilsStore.currentTitle.title = 'menu.dms';
   utilsStore.currentTitle.path = [
     {
       text: '',
diff --git a/src/pages/MainPage.vue b/src/pages/MainPage.vue
index d8189ea7..95663311 100644
--- a/src/pages/MainPage.vue
+++ b/src/pages/MainPage.vue
@@ -18,8 +18,8 @@ onMounted(() => {
       value: 'branch-management',
       icon: 'mdi-chart-donut',
       color: 'green',
-      title: 'mainBranchTitle',
-      caption: 'mainBranchCaption',
+      title: 'menu.branch',
+      caption: 'menu.branchCaption',
       hidden:
         role.value.includes('admin') ||
         role.value.includes('branch_admin') ||
@@ -33,8 +33,8 @@ onMounted(() => {
       value: 'personnel-management',
       icon: 'fa6-solid:building-user',
       color: 'cyan',
-      title: 'mainPersonnelTitle',
-      caption: 'mainPersonnelCaption',
+      title: 'menu.user',
+      caption: 'menu.userCaption',
       hidden:
         role.value.includes('admin') ||
         role.value.includes('branch_admin') ||
@@ -48,31 +48,31 @@ onMounted(() => {
       value: 'customer-management',
       icon: 'isax-frame5',
       color: 'cyan',
-      title: 'mainCustomerTitle',
-      caption: 'mainCustomerCaption',
+      title: 'menu.customer',
+      caption: 'menu.customerCaption',
       isax: true,
     },
     {
       value: 'product-service',
       icon: 'heroicons-truck-solid',
       color: 'orange',
-      title: 'mainProductTitle',
-      caption: 'mainProductCaption',
+      title: 'menu.product',
+      caption: 'menu.productCaption',
     },
     {
       value: '',
       icon: 'mdi-file-document',
       color: 'violet',
-      title: 'mainQuotationTitle',
-      caption: 'mainQuotationCaption',
+      title: 'menu.quotation',
+      caption: 'menu.quotationCaption',
       disabled: true,
     },
     {
       value: '',
       icon: 'isax-device-message5',
       color: 'purple',
-      title: 'mainRequestTitle',
-      caption: 'mainRequestCaption',
+      title: 'menu.requestList',
+      caption: 'menu.requestListCaption',
       isax: true,
       disabled: true,
     },
@@ -80,8 +80,8 @@ onMounted(() => {
       value: '',
       icon: 'isax-receipt-2-15',
       color: 'red',
-      title: 'mainOrderTitle',
-      caption: 'mainOrderCaption',
+      title: 'menu.workOrder',
+      caption: 'menu.workOrderCaption',
       isax: true,
       disabled: true,
     },
@@ -89,16 +89,16 @@ onMounted(() => {
       value: '',
       icon: 'material-symbols:box',
       color: 'camo',
-      title: 'mainReceiptTitle',
-      caption: 'mainReceiptCaption',
+      title: 'menu.invoice',
+      caption: 'menu.invoiceCaption',
       disabled: true,
     },
     {
       value: '',
       icon: 'isax-dollar-circle4',
       color: 'lime',
-      title: 'mainFinanceTitle',
-      caption: 'mainFinanceCaption',
+      title: 'menu.accountingLedger',
+      caption: 'menu.accountingLedgerCaption',
       isax: true,
       disabled: true,
     },
@@ -106,8 +106,8 @@ onMounted(() => {
       value: '',
       icon: 'isax-element-35',
       color: 'cyan',
-      title: 'mainDashboardTitle',
-      caption: 'mainDashboardCaption',
+      title: 'menu.dashboard',
+      caption: 'menu.dashboardCaption',
       isax: true,
       disabled: true,
     },
@@ -115,8 +115,8 @@ onMounted(() => {
       value: '',
       icon: 'mdi-file-document',
       color: 'indigo',
-      title: 'mainReportTitle',
-      caption: 'mainReportCaption',
+      title: 'menu.report',
+      caption: 'menu.reportCaption',
       disabled: true,
     },
   ];
diff --git a/src/stores/utils/index.ts b/src/stores/utils/index.ts
index 3b39f872..a7f51259 100644
--- a/src/stores/utils/index.ts
+++ b/src/stores/utils/index.ts
@@ -101,7 +101,7 @@ export function deleteItem(items: unknown[], index: number) {
 }
 
 export function formatNumberDecimal(num: number, point: number): string {
-  return num.toLocaleString('en-US', {
+  return num.toLocaleString('eng', {
     minimumFractionDigits: point,
     maximumFractionDigits: point,
   });
diff --git a/src/utils/datetime.ts b/src/utils/datetime.ts
index 6190abcb..8f0d01c1 100644
--- a/src/utils/datetime.ts
+++ b/src/utils/datetime.ts
@@ -91,7 +91,7 @@ export function calculateAge(birthDate: Date | null | string) {
   const months = ageDate.getUTCMonth();
   const days = ageDate.getUTCDate() - 1;
 
-  if (locale.value === 'th-th') {
+  if (locale.value === 'tha') {
     return `${years} ปี ${months !== 0 ? months + ' เดือน' : ''}  ${days !== 0 ? days + ' วัน' : ''} `;
   } else {
     return `${years} years ${months !== 0 ? months + ' months' : ''}  ${days !== 0 ? days + ' days' : ''} `;
@@ -113,7 +113,7 @@ export function parseAndFormatDate(
   if (value && value.toString().length === 10) {
     const [date, month, year] = value.toString().split('/');
 
-    if (locale === 'th-th') {
+    if (locale === 'tha') {
       const adjustedYear = Number(year) - 543;
       return new Date(`${month}/${date}/${adjustedYear}T00:00.000Z`);
     } else {