diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index 9e97cb23..688a8700 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -1,4 +1,6 @@
 <script setup lang="ts">
+import { Icon } from '@iconify/vue';
+
 const remark = defineModel<string>('remark');
 const detail = defineModel<string>('detail');
 const name = defineModel<string>('name');
@@ -73,6 +75,7 @@ defineProps<{
 
   <div v-if="service" class="col-9 row q-col-gutter-md">
     <q-input
+      id="input-service-code"
       for="input-service-code"
       :dense="dense"
       :outlined="!readonly"
@@ -84,6 +87,7 @@ defineProps<{
       v-model="serviceCode"
     />
     <q-input
+      id="input-service-name"
       for="input-service-name"
       :dense="dense"
       :outlined="!readonly"
@@ -93,8 +97,25 @@ defineProps<{
       class="col-9"
       :label="$t('serviceName')"
       v-model="serviceName"
-    />
+    >
+      <template #prepend>
+        <q-btn
+          dense
+          unelevated
+          round
+          padding="0"
+          style="background-color: var(--surface-tab)"
+        >
+          <Icon
+            icon="basil:settings-adjust-solid"
+            width="24px"
+            style="color: var(--stone-7)"
+          />
+        </q-btn>
+      </template>
+    </q-input>
     <q-input
+      id="input-service-description"
       for="input-service-description"
       :dense="dense"
       :outlined="!readonly"
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index 9e811bab..d2c33fc8 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -27,6 +27,7 @@ defineEmits<{
   <div class="column rounded bordered surface-2 items-start">
     <div class="row items-center full-width q-gutter-x-md q-py-sm q-px-md">
       <q-btn
+        id="btn-swap-work"
         icon="mdi-swap-vertical"
         dense
         flat
@@ -36,6 +37,7 @@ defineEmits<{
         class="q-ml-sm"
       />
       <q-btn
+        id="btn-delete-work"
         icon="mdi-trash-can-outline"
         dense
         flat
@@ -47,14 +49,15 @@ defineEmits<{
       />
 
       <q-input
+        for="input-work-name"
         dense
         outlined
         borderless
         class="col"
         hide-bottom-space
         label="ชื่องาน"
-        bg-white
         v-model="serviceName"
+        style="background-color: var(--surface-1)"
       >
         <template #prepend>
           <q-btn
@@ -80,6 +83,7 @@ defineEmits<{
     >
       <span>{{ $t('productInWork') }} {{ workIndex + 1 }}</span>
       <q-btn
+        id="btn-add-work-product"
         flat
         dense
         icon="mdi-plus"
@@ -98,8 +102,16 @@ defineEmits<{
         style="background-color: var(--surface-1)"
       >
         <div class="row items-center col-9 no-wrap">
-          <q-btn icon="mdi-swap-vertical" dense flat round color="info" />
           <q-btn
+            id="btn-swap-work-product"
+            icon="mdi-swap-vertical"
+            dense
+            flat
+            round
+            color="info"
+          />
+          <q-btn
+            id="btn-delete-work-product"
             icon="mdi-trash-can-outline"
             dense
             flat