diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index 40f52442..087dd7a4 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -216,7 +216,7 @@ defineEmits<{
                 size="xs"
                 class="q-pl-lg"
                 v-model="attributes.showTotalPrice"
-                :label="$t('service.showTotalPrice')"
+                :label="$t('productService.service.showTotalPrice')"
                 style="color: hsl(var(--text-mute-2))"
                 :disable="readonly"
               />
diff --git a/src/i18n/en-US/index.ts b/src/i18n/en-US/index.ts
index a93f2a04..70ad28de 100644
--- a/src/i18n/en-US/index.ts
+++ b/src/i18n/en-US/index.ts
@@ -159,10 +159,19 @@ export default {
       attachment: 'Attachment',
     },
   },
-  service: {
-    title: 'Service',
-    showTotalPrice: 'Show Total Price',
+  productService: {
+    group: {
+      addTitle: 'Add Product and Service Group',
+    },
+    type: {
+      addTitle: 'Add Product and Service Type',
+    },
+    service: {
+      title: 'Service',
+      showTotalPrice: 'Show Total Price',
+    },
   },
+
   backend: {
     sameBranchCodeExists: 'This Head Office Abbreviation is already in use.',
   },
diff --git a/src/i18n/th-th/index.ts b/src/i18n/th-th/index.ts
index b8abe5c1..5254c33f 100644
--- a/src/i18n/th-th/index.ts
+++ b/src/i18n/th-th/index.ts
@@ -163,10 +163,19 @@ export default {
       attachment: 'เอกสารเพิ่มเติม',
     },
   },
-  service: {
-    title: 'บริการ',
-    showTotalPrice: 'แสดงราคารวม',
+  productService: {
+    group: {
+      addTitle: 'เพิ่มกลุ่มสินค้าและบริการ',
+    },
+    type: {
+      addTitle: 'เพิ่มประเภทสินค้าและบริการ',
+    },
+    service: {
+      title: 'บริการ',
+      showTotalPrice: 'แสดงราคารวม',
+    },
   },
+
   backend: {
     sameBranchCodeExists: 'ตัวย่อสำนักงานใหญ่นี้ถูกใช้แล้ว',
   },
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 7f410fe4..91c24771 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -123,7 +123,7 @@ const stat = ref<
   {
     icon: 'mdi-server-network',
     count: 0,
-    label: 'service.title',
+    label: 'productService.service.title',
     mode: 'service',
     color: 'orange',
   },
@@ -976,7 +976,7 @@ function assignFormDataProduct(data: ProductList) {
     agentPrice: data.agentPrice,
     price: data.price,
     process: data.process,
-    detail: data.detail === '' ? '-' : data.detail,
+    detail: data.detail,
     name: data.name,
     code: data.code,
     image: undefined,
@@ -2811,7 +2811,7 @@ watch(
                           : 'app-text-muted'
                       "
                     >
-                      {{ $t('service.title') }}
+                      {{ $t('productService.service.title') }}
                     </div>
                   </q-tab>
                   <q-tab
@@ -2988,7 +2988,12 @@ watch(
                               </div>
                             </div>
                             <div class="col">
-                              <div class="col">{{ props.row.name }}</div>
+                              <div class="col ellipsis" style="max-width: 20vw">
+                                {{ props.row.name }}
+                                <q-tooltip>
+                                  {{ props.row.name }}
+                                </q-tooltip>
+                              </div>
                               <div class="col app-text-muted">
                                 {{ props.row.code }}
                               </div>
@@ -3008,7 +3013,7 @@ watch(
                             )
                           "
                         >
-                          {{ props.row.detail }}
+                          {{ props.row.detail || '-' }}
                         </q-td>
                         <q-td
                           v-if="
@@ -3044,35 +3049,35 @@ watch(
                           "
                         >
                           <div
-                            class="row q-gutter-x-md no-wrap items-center text-right"
+                            class="row full-width q-gutter-x-md no-wrap items-center text-right"
                           >
                             <div
-                              class="tags tags-color-orange col-3 column ellipsis-2-lines"
+                              class="tags tags-color-orange col column ellipsis-2-lines"
                               :class="{
                                 disable: props.row.status === 'INACTIVE',
                               }"
                               style="min-width: 50px"
                             >
-                              <div class="col-4 app-text-muted-2">
+                              <div class="col app-text-muted-2 text-caption">
                                 {{ $t('salePrice') }}
                               </div>
-                              <div class="col-4 text-weight-bold">
+                              <div class="col text-weight-bold">
                                 ฿{{
                                   formatNumberDecimal(props.row.price || 0, 2)
                                 }}
                               </div>
                             </div>
                             <div
-                              class="tags tags-color-purple col-3 column ellipsis-2-lines"
+                              class="tags tags-color-purple col column ellipsis-2-lines"
                               :class="{
                                 disable: props.row.status === 'INACTIVE',
                               }"
                               style="min-width: 50px"
                             >
-                              <div class="col-4 app-text-muted-2">
+                              <div class="col app-text-muted-2 text-caption">
                                 {{ $t('agentPrice') }}
                               </div>
-                              <div class="col-4 text-weight-bold">
+                              <div class="col text-weight-bold">
                                 ฿{{
                                   formatNumberDecimal(
                                     props.row.agentPrice || 0,
@@ -3082,16 +3087,16 @@ watch(
                               </div>
                             </div>
                             <div
-                              class="tags tags-color-pink col-3 column ellipsis-2-lines"
+                              class="tags tags-color-pink col-4 column ellipsis-2-lines"
                               :class="{
                                 disable: props.row.status === 'INACTIVE',
                               }"
                               style="min-width: 50px"
                             >
-                              <div class="col-4 app-text-muted-2">
+                              <div class="col app-text-muted-2 text-caption">
                                 {{ $t('processingPrice') }}
                               </div>
-                              <div class="col-4">
+                              <div class="col">
                                 ฿{{
                                   formatNumberDecimal(
                                     props.row.serviceCharge || 0,
@@ -3431,10 +3436,11 @@ watch(
     </div>
   </div>
 
+  <!-- add group, add type -->
   <DialogForm
     v-model:modal="dialogInputForm"
     noAddress
-    :title="$t('addProduct')"
+    :title="$t(`productService.${productMode}.addTitle`)"
     :submit="() => (productMode === 'type' ? submitType() : submitGroup())"
     :close="clearFormGroup"
   >
@@ -4292,7 +4298,7 @@ watch(
     no-address
     height="95vh"
     :isEdit="infoServiceEdit"
-    :title="$t('service.title')"
+    :title="$t('productService.service.title')"
     v-model:modal="dialogServiceEdit"
     :submit="
       () => {