diff --git a/src/components/04_product-service/FormServiceWork.vue b/src/components/04_product-service/FormServiceWork.vue
index dcae360a..0df814f1 100644
--- a/src/components/04_product-service/FormServiceWork.vue
+++ b/src/components/04_product-service/FormServiceWork.vue
@@ -75,6 +75,7 @@ async function addWork() {
     id: '',
     name: '',
     attributes: {
+      workflowName: '',
       additional: [],
       showTotalPrice: false,
       stepProperties: [],
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index 8c627c6e..9489fab8 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -580,75 +580,97 @@ watch(
             >
               {{ $t('flow.noProcessStep') }}
             </span>
-            <span
-              v-else
+
+            <template
               v-for="(step, stepIndex) in attributes.stepProperties"
               :key="step.id"
             >
-              <q-icon name="mdi-circle-medium" />
-              {{ $t('flow.stepNo', { msg: stepIndex + 1 }) }}:
-              {{ mapStepName(step.id) }}
-
-              <!-- step att -->
-              <section
-                class="col scroll q-pa-sm flex items-center surface-1 rounded"
+              <span
+                v-if="
+                  attributes.stepProperties?.length > 0 &&
+                  step.attributes.length > 0
+                "
               >
-                <div
-                  v-if="
-                    attributes.stepProperties[stepIndex].attributes.length > 0
-                  "
-                  class="row q-gutter-sm"
+                <q-icon name="mdi-circle-medium" />
+                {{ $t('flow.stepNo', { msg: stepIndex + 1 }) }}:
+                {{ mapStepName(step.id) }}
+
+                <!-- step att -->
+                <section
+                  class="col scroll q-pa-sm flex items-center surface-1 rounded"
                 >
-                  <span
-                    v-for="(att, i) in step.attributes"
-                    :key="i"
-                    class="surface-2 bordered rounded q-px-xs"
+                  <div
+                    v-if="
+                      attributes.stepProperties[stepIndex].attributes.length > 0
+                    "
+                    class="row q-gutter-sm"
                   >
-                    {{ optionStore.mapOption(att.fieldName ?? '') }}
-                  </span>
-                </div>
-                <div v-else class="app-text-muted-2">
-                  {{ $t('productService.service.noProperties') }}
-                </div>
-              </section>
-
-              <!-- step product -->
-              <section
-                class="q-pt-sm q-pl-lg column"
-                :class="{
-                  'q-pb-sm': stepIndex !== attributes.stepProperties.length - 1,
-                }"
-              >
-                <span class="app-text-muted-2 text-caption">
-                  {{
-                    $t('general.select', {
-                      msg: $t('productService.product.title'),
-                    })
-                  }}
-                </span>
-
-                <div
-                  v-if="productItems.length > 0"
-                  class="surface-1 rounded q-pa-xs"
-                >
-                  <div v-for="product in productItems" :key="product.id">
-                    <q-checkbox
-                      :disable="readonly"
-                      :model-value="
-                        attributes.stepProperties[
-                          stepIndex
-                        ].productsId.includes(product.id)
-                      "
-                      @click="toggleCheckProductInStep(product.id, stepIndex)"
-                      size="xs"
-                    />
-                    {{ product.name }}
+                    <span
+                      v-for="(att, i) in step.attributes"
+                      :key="i"
+                      class="surface-2 bordered rounded q-px-xs"
+                    >
+                      {{ optionStore.mapOption(att.fieldName ?? '') }}
+                    </span>
                   </div>
-                </div>
-                <span v-else class="app-text-muted-2 surface-1 rounded q-pa-xs">
-                  {{ $t('productService.product.noProduct') }}
-                </span>
-              </section>
+                  <div v-else class="app-text-muted-2">
+                    {{ $t('productService.service.noProperties') }}
+                  </div>
+                </section>
+
+                <!-- step product -->
+                <section
+                  class="q-pt-sm q-pl-lg column"
+                  :class="{
+                    'q-pb-sm':
+                      stepIndex !== attributes.stepProperties.length - 1,
+                  }"
+                >
+                  <span class="app-text-muted-2 text-caption">
+                    {{
+                      $t('general.select', {
+                        msg: $t('productService.product.title'),
+                      })
+                    }}
+                  </span>
+
+                  <div
+                    v-if="productItems.length > 0"
+                    class="surface-1 rounded q-pa-xs"
+                  >
+                    <div v-for="product in productItems" :key="product.id">
+                      <q-checkbox
+                        :disable="readonly"
+                        :model-value="
+                          attributes.stepProperties[
+                            stepIndex
+                          ].productsId.includes(product.id)
+                        "
+                        @click="toggleCheckProductInStep(product.id, stepIndex)"
+                        size="xs"
+                      />
+                      {{ product.name }}
+                    </div>
+                  </div>
+                  <span
+                    v-else
+                    class="app-text-muted-2 surface-1 rounded q-pa-xs"
+                  >
+                    {{ $t('productService.product.noProduct') }}
+                  </span>
+                </section>
+              </span>
+            </template>
+
+            <span
+              v-if="
+                attributes.stepProperties.every(
+                  (s) => s.attributes.length === 0,
+                )
+              "
+              class="app-text-muted"
+            >
+              {{ $t('productService.service.noPropertiesYet') }}
             </span>
           </div>
 
diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 4e7f2e47..fcb66c54 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -653,6 +653,7 @@ export default {
       addWork: 'Add Work',
       workAlreadyExist: 'Work already exist',
       splitPay: 'Split Payment',
+      noPropertiesYet: 'No properties have been selected yet',
     },
     product: {
       title: 'Products and Services',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index 941d3ed8..46d1f729 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -649,6 +649,7 @@ export default {
       addWork: 'เพิ่มงาน',
       workAlreadyExist: 'งานนี้มีอยู่แล้ว',
       splitPay: 'แบ่งจ่าย',
+      noPropertiesYet: 'ยังไม่ได้เลือกคุณสมบัติต่องาน',
     },
     product: {
       title: 'สินค้าและบริการ',
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index f857509b..32ce4028 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -273,6 +273,7 @@ const formDataProductService = ref<ServiceCreate>({
     showTotalPrice: false,
     additional: [],
     workflowId: '',
+    workflowName: '',
     stepProperties: [],
   },
   detail: '',
@@ -899,6 +900,7 @@ const prevService = ref<ServiceCreate>({
   work: [],
   attributes: {
     showTotalPrice: false,
+    workflowName: '',
     workflowId: '',
     stepProperties: [],
     additional: [],
@@ -1057,6 +1059,7 @@ function clearFormService() {
     name: '',
     detail: '',
     attributes: {
+      workflowName: '',
       workflowId: '',
       stepProperties: [],
       additional: [],
@@ -1285,6 +1288,7 @@ function triggerConfirmCloseWork() {
 
 const tempValueProperties = ref<Attributes>({
   showTotalPrice: false,
+  workflowName: '',
   workflowId: '',
   stepProperties: [],
   additional: [],