diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index 075e836d..8eb4e5d5 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -106,25 +106,7 @@ defineEmits<{
       class="col-9"
       :label="$t('serviceName')"
       v-model="serviceName"
-    >
-      <template #prepend>
-        <q-btn
-          v-if="!readonly"
-          dense
-          unelevated
-          round
-          padding="0"
-          style="background-color: var(--surface-tab)"
-          @click="$emit('serviceProperties')"
-        >
-          <Icon
-            icon="basil:settings-adjust-solid"
-            width="24px"
-            style="color: var(--stone-7)"
-          />
-        </q-btn>
-      </template>
-    </q-input>
+    />
     <div v-if="readonly && serviceAttributes" class="col-12 q-gutter-x-md">
       <span
         v-for="(p, index) in serviceAttributes.additional"
diff --git a/src/components/04_product-service/FormServiceProperties.vue b/src/components/04_product-service/FormServiceProperties.vue
new file mode 100644
index 00000000..f3e109d2
--- /dev/null
+++ b/src/components/04_product-service/FormServiceProperties.vue
@@ -0,0 +1,63 @@
+<script setup lang="ts">
+import useOptionStore from 'src/stores/options';
+import { Attributes } from 'src/stores/product-service/types';
+import { Icon } from '@iconify/vue';
+
+const optionStore = useOptionStore();
+
+defineProps<{
+  readonly?: boolean;
+}>();
+
+const serviceAttributes = defineModel<Attributes>('serviceAttributes', {
+  required: true,
+});
+
+defineEmits<{
+  (e: 'serviceProperties'): void;
+}>();
+</script>
+<template>
+  <div class="col-3 app-text-muted">
+    • {{ $t(`formDialogTitleInformation`) }}
+    <div>
+      <q-btn
+        :disable="readonly"
+        dense
+        unelevated
+        outline
+        class="q-mt-sm q-px-sm"
+        color="primary"
+        @click="$emit('serviceProperties')"
+      >
+        <Icon
+          icon="basil:settings-adjust-solid"
+          width="24px"
+          class="q-mr-sm"
+          style="color: var(--brand-1)"
+        />
+        {{ $t('properties') }}
+      </q-btn>
+    </div>
+  </div>
+
+  <div class="col-9 row">
+    <div
+      v-if="serviceAttributes.additional.length > 0"
+      class="col q-gutter-sm row items-center"
+    >
+      <div
+        v-for="(p, index) in serviceAttributes.additional"
+        :key="index"
+        class="bordered q-px-sm surface-3"
+        style="border-radius: 6px"
+      >
+        {{ optionStore.mapOption(p.fieldName ?? '') }}
+      </div>
+    </div>
+
+    <div v-else class="col flex items-center app-text-muted">
+      {{ $t('noProperties') }}
+    </div>
+  </div>
+</template>
diff --git a/src/components/04_product-service/FormServiceWork.vue b/src/components/04_product-service/FormServiceWork.vue
index 69d9d1c3..b2e916f9 100644
--- a/src/components/04_product-service/FormServiceWork.vue
+++ b/src/components/04_product-service/FormServiceWork.vue
@@ -50,7 +50,7 @@ function confirmDelete(items: unknown[], index: number) {
 
 <template>
   <div class="column col-12 full-height">
-    <div class="col-1 app-text-muted row items-start">
+    <div class="app-text-muted row items-start">
       • {{ $t(`workInformation`) }}
       <q-btn
         v-if="!readonly"
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index 726f879b..c8698fc3 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -21,7 +21,7 @@ defineProps<{
 }>();
 
 const workName = defineModel<string>('workName');
-const attributes = defineModel<Attributes>('attributes');
+const attributes = defineModel<Attributes>('attributes', { required: true });
 const productItems = defineModel<(ProductList & { nameEn: string })[]>(
   'productItems',
   {
@@ -85,22 +85,6 @@ defineEmits<{
               :style="`background-color:${readonly ? 'var(--surface-2)' : 'var(--surface-1); z-index: 2'}`"
               @click="() => (readonly ? '' : fetchListOfWork())"
             >
-              <q-btn
-                v-if="!readonly"
-                dense
-                unelevated
-                round
-                padding="0"
-                class="q-mr-sm"
-                style="background-color: var(--surface-tab)"
-                @click.stop="$emit('workProperties')"
-              >
-                <Icon
-                  icon="basil:settings-adjust-solid"
-                  width="24px"
-                  style="color: var(--stone-7)"
-                />
-              </q-btn>
               <span class="text-body2" style="color: var(--foreground)">
                 {{ $t('workNo') }} {{ index + 1 }} :
                 <span class="app-text-muted-2">
@@ -168,143 +152,186 @@ defineEmits<{
               <q-tooltip>{{ $t('delete') }}</q-tooltip>
             </q-btn>
           </div>
-
-          <div
-            v-if="readonly && attributes"
-            class="row q-pb-md q-px-md q-gutter-x-md"
-          >
-            <span
-              v-for="(p, index) in attributes.additional"
-              :key="index"
-              class="bordered q-px-sm surface-tab"
-              style="border-radius: 6px"
-            >
-              {{ optionStore.mapOption(p.fieldName ?? '') }}
-            </span>
-          </div>
         </div>
       </template>
       <div class="surface-2">
-        <div
-          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('productInWork') }} {{ workIndex + 1 }}</span>
-          <q-btn
-            v-if="!readonly"
-            id="btn-add-work-product"
-            flat
-            dense
-            icon="mdi-plus"
-            :label="$t('serviceAddProduct')"
-            padding="0"
-            style="color: hsl(var(--info-bg))"
-            @click.stop="$emit('addProduct')"
-          />
+        <!-- properties -->
+        <div class="bordered-t">
+          <div
+            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>
+            <q-btn
+              v-if="!readonly"
+              id="btn-add-work-product"
+              flat
+              dense
+              padding="0"
+              style="color: hsl(var(--info-bg))"
+              @click.stop="$emit('workProperties')"
+            >
+              <Icon
+                icon="basil:settings-adjust-solid"
+                width="24px"
+                class="q-mr-sm"
+                style="color: hsl(var(--info-bg))"
+              />
+              {{ $t('properties') }}
+            </q-btn>
+          </div>
+
+          <div class="q-py-md q-px-lg full-width">
+            <div
+              v-if="attributes.additional.length > 0"
+              class="row items-center full-width surface-1 q-py-md q-px-sm q-gutter-sm"
+            >
+              <div
+                v-for="(p, index) in attributes.additional"
+                :key="index"
+                class="bordered q-px-sm surface-3"
+                style="border-radius: 6px"
+              >
+                {{ optionStore.mapOption(p.fieldName ?? '') }}
+              </div>
+            </div>
+            <div v-else class="app-text-muted">
+              {{ $t('noProperties') }}
+            </div>
+          </div>
         </div>
 
-        <div class="q-py-md q-px-lg full-width q-gutter-y-sm">
+        <!-- product -->
+        <div class="bordered-t">
           <div
-            v-for="(product, index) in productItems"
-            :key="product.id"
-            class="full-width row items-center justify-between"
+            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('productInWork') }} {{ workIndex + 1 }}</span>
+            <q-btn
+              v-if="!readonly"
+              id="btn-add-work-product"
+              flat
+              dense
+              icon="mdi-plus"
+              :label="$t('serviceAddProduct')"
+              padding="0"
+              style="color: hsl(var(--info-bg))"
+              @click.stop="$emit('addProduct')"
+            />
+          </div>
+
+          <div
+            v-if="productItems.length > 0"
+            class="q-py-md q-px-lg full-width q-gutter-y-sm"
           >
             <div
-              class="row col items-center justify-between full-width surface-1 q-py-md q-px-sm"
+              v-for="(product, index) in productItems"
+              :key="product.id"
+              class="full-width row items-center justify-between"
             >
-              <div class="row items-center col-9 no-wrap" v-if="productItems">
-                <q-btn
-                  v-if="!readonly"
-                  id="btn-product-up"
-                  icon="mdi-arrow-up"
-                  dense
-                  flat
-                  round
-                  :disable="index === 0"
-                  style="color: hsl(var(--text-mute-2))"
-                  @click.stop="$emit('moveProductUp', productItems, index)"
-                />
-                <q-btn
-                  v-if="!readonly"
-                  id="btn-product-down"
-                  icon="mdi-arrow-down"
-                  dense
-                  flat
-                  round
-                  class="q-mx-sm"
-                  :disable="index === productItems.length - 1"
-                  style="color: hsl(var(--text-mute-2))"
-                  @click.stop="$emit('moveProductDown', productItems, index)"
-                />
+              <div
+                class="row col items-center justify-between full-width surface-1 q-py-md q-px-sm"
+              >
+                <div class="row items-center col-9 no-wrap" v-if="productItems">
+                  <q-btn
+                    v-if="!readonly"
+                    id="btn-product-up"
+                    icon="mdi-arrow-up"
+                    dense
+                    flat
+                    round
+                    :disable="index === 0"
+                    style="color: hsl(var(--text-mute-2))"
+                    @click.stop="$emit('moveProductUp', productItems, index)"
+                  />
+                  <q-btn
+                    v-if="!readonly"
+                    id="btn-product-down"
+                    icon="mdi-arrow-down"
+                    dense
+                    flat
+                    round
+                    class="q-mx-sm"
+                    :disable="index === productItems.length - 1"
+                    style="color: hsl(var(--text-mute-2))"
+                    @click.stop="$emit('moveProductDown', productItems, index)"
+                  />
 
-                <q-avatar
-                  size="md"
-                  class="q-mx-lg"
-                  style="background-color: var(--surface-tab)"
-                >
-                  {{ index + 1 }}
-                </q-avatar>
+                  <q-avatar
+                    size="md"
+                    class="q-mx-lg"
+                    style="background-color: var(--surface-tab)"
+                  >
+                    {{ index + 1 }}
+                  </q-avatar>
 
-                <div class="row no-wrap">
-                  <div class="bordered q-mx-md col-3 image-box">
-                    <q-img
-                      src="blank-image.png"
-                      style="object-fit: cover; width: 100%; height: 100%"
-                    ></q-img>
-                  </div>
-                  <div class="column col justify-between">
-                    <span
-                      class="text-weight-bold ellipsis-2-lines"
-                      :style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
-                    >
-                      {{
-                        $i18n.locale === 'en-US' ? product.nameEn : product.name
-                      }}
-                      <q-tooltip>
+                  <div class="row no-wrap">
+                    <div class="bordered q-mx-md col-3 image-box">
+                      <q-img
+                        src="blank-image.png"
+                        style="object-fit: cover; width: 100%; height: 100%"
+                      ></q-img>
+                    </div>
+                    <div class="column col justify-between">
+                      <span
+                        class="text-weight-bold ellipsis-2-lines"
+                        :style="`max-width: ${$q.screen.gt.sm ? '25vw' : '20vw'}`"
+                      >
                         {{
                           $i18n.locale === 'en-US'
                             ? product.nameEn
                             : product.name
                         }}
-                      </q-tooltip>
-                    </span>
-                    <div
-                      class="bordered q-px-sm"
-                      style="border-radius: 6px; max-width: 60px"
-                    >
-                      {{ product.code }}
+                        <q-tooltip>
+                          {{
+                            $i18n.locale === 'en-US'
+                              ? product.nameEn
+                              : product.name
+                          }}
+                        </q-tooltip>
+                      </span>
+                      <div
+                        class="bordered q-px-sm"
+                        style="border-radius: 6px; max-width: 60px"
+                      >
+                        {{ product.code }}
+                      </div>
                     </div>
                   </div>
                 </div>
+
+                <div class="row justify-end text-right col-3 q-pr-sm">
+                  <span
+                    class="col-12 text-weight-bold text-h6"
+                    style="color: var(--teal-9)"
+                  >
+                    ฿ {{ formatNumberDecimal(product.price, 2) }}
+                  </span>
+                  <span class="col-9 text-caption app-text-muted-2">
+                    {{ $t('processTime') }}
+                  </span>
+                  <span class="col-3 text-caption app-text-muted-2">
+                    {{ product.process }} {{ $t('day') }}
+                  </span>
+                </div>
               </div>
 
-              <div class="row justify-end text-right col-3 q-pr-sm">
-                <span
-                  class="col-12 text-weight-bold text-h6"
-                  style="color: var(--teal-9)"
-                >
-                  ฿ {{ formatNumberDecimal(product.price, 2) }}
-                </span>
-                <span class="col-9 text-caption app-text-muted-2">
-                  {{ $t('processTime') }}
-                </span>
-                <span class="col-3 text-caption app-text-muted-2">
-                  {{ product.process }} {{ $t('day') }}
-                </span>
-              </div>
+              <q-btn
+                v-if="!readonly"
+                id="btn-delete-work-product"
+                icon="mdi-trash-can-outline"
+                dense
+                flat
+                round
+                color="negative"
+                class="q-mx-sm"
+                @click.stop="$emit('deleteProduct', productItems, index)"
+              />
             </div>
-
-            <q-btn
-              v-if="!readonly"
-              id="btn-delete-work-product"
-              icon="mdi-trash-can-outline"
-              dense
-              flat
-              round
-              color="negative"
-              class="q-mx-sm"
-              @click.stop="$emit('deleteProduct', productItems, index)"
-            />
+          </div>
+          <div v-else class="app-text-muted q-py-md q-px-lg">
+            {{ $t('noProduct') }}
           </div>
         </div>
       </div>
diff --git a/src/i18n/en-US/product-service.ts b/src/i18n/en-US/product-service.ts
index fea3aaac..c1e34332 100644
--- a/src/i18n/en-US/product-service.ts
+++ b/src/i18n/en-US/product-service.ts
@@ -49,6 +49,10 @@ export default {
   addWork: 'Add work',
 
   properties: 'Properties',
+  noProperties: 'No Properties',
+  serviceProperties: 'Service Properties',
+  workProperties: 'Work Properties',
+  propertiesInWork: 'Properties in work',
   text: 'Text',
   number: 'Number',
   date: 'Date',
@@ -61,4 +65,6 @@ export default {
   telMaxLength: 'Max Length',
   addSelection: 'Add Selection',
   selectAll: 'Select All',
+
+  noProduct: 'No Product',
 };
diff --git a/src/i18n/th-th/product-service.ts b/src/i18n/th-th/product-service.ts
index 1575a436..a93917f2 100644
--- a/src/i18n/th-th/product-service.ts
+++ b/src/i18n/th-th/product-service.ts
@@ -49,6 +49,10 @@ export default {
   addWork: 'เพิ่มงานใหม่',
 
   properties: 'คุณสมบัติ',
+  noProperties: 'ยังไม่มีคุณสมบัติ',
+  serviceProperties: 'คุณสมบัติของบริการ',
+  workProperties: 'คุณสมบัติของงาน',
+  propertiesInWork: 'คุณสมบัติภายในงาน',
   text: 'ข้อความ',
   number: 'ตัวเลข',
   date: 'วันที่',
@@ -61,4 +65,6 @@ export default {
   telMaxLength: 'จำนวนหลัก',
   addSelection: 'เพิ่มตัวเลือก',
   selectAll: 'เลือกทั้งหมด',
+
+  noProduct: 'ยังไม่มีสินค้า',
 };
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index 1ab24b82..224976dc 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -18,6 +18,7 @@ import FormServiceWork from 'src/components/04_product-service/FormServiceWork.v
 import ServiceProperties from 'src/components/04_product-service/ServiceProperties.vue';
 import WorkNameManagement from 'src/components/04_product-service/WorkNameManagement.vue';
 import useOptionStore from 'src/stores/options';
+import FormServiceProperties from 'src/components/04_product-service/FormServiceProperties.vue';
 
 import { Status } from 'src/stores/types';
 import NoData from 'components/NoData.vue';
@@ -1789,6 +1790,7 @@ watch(currentStatus, async () => {
   <!-- add service -->
   <FormDialog
     no-address
+    no-app-box
     height="95vh"
     :title="$t('addService')"
     v-model:modal="dialogService"
@@ -1816,25 +1818,42 @@ watch(currentStatus, async () => {
       />
     </template>
 
-    <template #information>
-      <BasicInformation
-        v-if="currentServiceTab === 'serviceInformation'"
-        dense
-        service
-        @service-properties="
-          () => {
-            tempValueProperties = formDataProductService.attributes;
-            openPropertiesDialog('service');
-          }
-        "
-        v-model:service-code="formDataProductService.code"
-        v-model:service-description="formDataProductService.detail"
-        v-model:service-name-th="formDataProductService.name"
-        @input-file="inputFile.click()"
-      />
+    <div v-if="currentServiceTab === 'serviceInformation'" class="col-10">
+      <div class="surface-1 rounded bordered q-pa-lg full-width row">
+        <BasicInformation
+          dense
+          service
+          @service-properties="
+            () => {
+              tempValueProperties = formDataProductService.attributes;
+              openPropertiesDialog('service');
+            }
+          "
+          v-model:service-code="formDataProductService.code"
+          v-model:service-description="formDataProductService.detail"
+          v-model:service-name-th="formDataProductService.name"
+          @input-file="inputFile.click()"
+        />
+      </div>
+      <div class="surface-1 rounded bordered q-mt-md q-pa-lg row">
+        <FormServiceProperties
+          v-model:service-attributes="formDataProductService.attributes"
+          @service-properties="
+            () => {
+              tempValueProperties = formDataProductService.attributes;
+              openPropertiesDialog('service');
+            }
+          "
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="currentServiceTab === 'workInformation'"
+      class="surface-1 rounded bordered col-10 q-pa-lg"
+    >
       <FormServiceWork
         v-model:work-items="workItems"
-        v-if="currentServiceTab === 'workInformation'"
         dense
         @addProduct="
           async (index) => {
@@ -1856,7 +1875,7 @@ watch(currentStatus, async () => {
           }
         "
       />
-    </template>
+    </div>
   </FormDialog>
 
   <!-- service properties -->
@@ -1914,6 +1933,7 @@ watch(currentStatus, async () => {
   <!-- edit service -->
   <FormDialog
     no-address
+    no-app-box
     :edit="!(formDataProductService.status === 'INACTIVE')"
     height="95vh"
     :isEdit="infoServiceEdit"
@@ -1956,24 +1976,43 @@ watch(currentStatus, async () => {
       />
     </template>
 
-    <template #information>
-      <BasicInformation
-        :readonly="!infoServiceEdit"
-        v-if="currentServiceTab === 'serviceInformation'"
-        dense
-        service
-        @service-properties="
-          () => {
-            tempValueProperties = formDataProductService.attributes;
-            openPropertiesDialog('service');
-          }
-        "
-        v-model:service-attributes="formDataProductService.attributes"
-        v-model:service-code="formDataProductService.code"
-        v-model:service-description="formDataProductService.detail"
-        v-model:service-name-th="formDataProductService.name"
-        @input-file="inputFile.click()"
-      />
+    <div v-if="currentServiceTab === 'serviceInformation'" class="col-10">
+      <div class="surface-1 rounded bordered q-pa-lg full-width row">
+        <BasicInformation
+          :readonly="!infoServiceEdit"
+          v-if="currentServiceTab === 'serviceInformation'"
+          dense
+          service
+          @service-properties="
+            () => {
+              tempValueProperties = formDataProductService.attributes;
+              openPropertiesDialog('service');
+            }
+          "
+          v-model:service-code="formDataProductService.code"
+          v-model:service-description="formDataProductService.detail"
+          v-model:service-name-th="formDataProductService.name"
+          @input-file="inputFile.click()"
+        />
+      </div>
+      <div class="surface-1 rounded bordered q-mt-md q-pa-lg row">
+        <FormServiceProperties
+          :readonly="!infoServiceEdit"
+          v-model:service-attributes="formDataProductService.attributes"
+          @service-properties="
+            () => {
+              tempValueProperties = formDataProductService.attributes;
+              openPropertiesDialog('service');
+            }
+          "
+        />
+      </div>
+    </div>
+
+    <div
+      v-if="currentServiceTab === 'workInformation'"
+      class="surface-1 rounded bordered col-10 q-pa-lg"
+    >
       <FormServiceWork
         :readonly="!infoServiceEdit"
         v-model:work-items="workItems"
@@ -1995,7 +2034,7 @@ watch(currentStatus, async () => {
           }
         "
       />
-    </template>
+    </div>
   </FormDialog>
 </template>