diff --git a/src/components/04_product-service/FormServiceWork.vue b/src/components/04_product-service/FormServiceWork.vue
index b5e284ca..ca9fb965 100644
--- a/src/components/04_product-service/FormServiceWork.vue
+++ b/src/components/04_product-service/FormServiceWork.vue
@@ -12,6 +12,7 @@ const workItems = ref([
       {
         id: '1',
         label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
+        labelEn: '2 year work permit fee',
         code: 'AC101',
         price: '1,200.00',
         time: '14',
@@ -24,6 +25,7 @@ const workItems = ref([
       {
         id: '1',
         label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
+        labelEn: '2 year work permit fee',
         code: 'AC101',
         price: '1,200.00',
         time: '14',
@@ -32,6 +34,8 @@ const workItems = ref([
         id: '1',
         label:
           'ค่าบริการและค่าดำเนินงานยื่นคำร้องขอใบอนุญาตทำงานแทน คนงานต่างด้าว MOU',
+        labelEn:
+          'Service and processing fees for submitting a work permit application on behalf of an MOU foreign worker',
         code: 'AC102',
         price: '1,200.00',
         time: '14',
@@ -77,8 +81,10 @@ defineEmits<{
       <WorkManagementComponent
         v-for="(work, index) in workItems"
         :key="work.id"
-        v-model:product-items="work.product"
+        :index="index"
+        :length="workItems.length"
         :workIndex="index"
+        v-model:product-items="work.product"
         @addProduct="$emit('addProduct')"
       ></WorkManagementComponent>
     </div>
diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index d2c33fc8..8743083d 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -1,16 +1,18 @@
 <script lang="ts" setup>
 import { Icon } from '@iconify/vue';
 
-const serviceName = defineModel<string>('serviceName');
-
 defineProps<{
   workIndex: number;
+  length: number;
+  index: number;
 }>();
 
+const workName = defineModel<string>('workName');
 const productItems = defineModel<
   {
     id: string;
     label: string;
+    labelEn: string;
     code: string;
     price: string;
     time: string;
@@ -24,151 +26,207 @@ defineEmits<{
 }>();
 </script>
 <template>
-  <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
-        round
-        padding="0"
-        color="info"
-        class="q-ml-sm"
-      />
-      <q-btn
-        id="btn-delete-work"
-        icon="mdi-trash-can-outline"
-        dense
-        flat
-        round
-        padding="0"
-        color="negative"
-        class="q-ml-sm"
-        @click="$emit('deleteWork')"
-      />
-
-      <q-input
-        for="input-work-name"
-        dense
-        outlined
-        borderless
-        class="col"
-        hide-bottom-space
-        label="ชื่องาน"
-        v-model="serviceName"
-        style="background-color: var(--surface-1)"
-      >
-        <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>
-    </div>
-
-    <div
-      class="full-width q-py-xs text-weight-medium row justify-between items-center q-px-lg"
-      style="background-color: hsla(var(--info-bg) / 0.1)"
+  <div class="bordered rounded">
+    <q-expansion-item
+      dense
+      switch-toggle-side
+      default-opened
+      expand-icon="mdi-chevron-down-circle"
     >
-      <span>{{ $t('productInWork') }} {{ workIndex + 1 }}</span>
-      <q-btn
-        id="btn-add-work-product"
-        flat
-        dense
-        icon="mdi-plus"
-        :label="$t('serviceAddProduct')"
-        padding="0"
-        style="color: hsl(var(--info-bg))"
-        @click="$emit('addProduct')"
-      />
-    </div>
-
-    <div class="q-py-md q-px-lg full-width">
-      <div
-        v-for="(product, index) in productItems"
-        :key="product.id"
-        class="full-width q-py-md q-px-sm row items-center justify-between"
-        style="background-color: var(--surface-1)"
-      >
-        <div class="row items-center col-9 no-wrap">
+      <template v-slot:header>
+        <div class="row items-center q-py-sm full-width">
           <q-btn
             id="btn-swap-work-product"
-            icon="mdi-swap-vertical"
+            icon="mdi-arrow-up"
             dense
             flat
             round
-            color="info"
+            :disable="index === 0"
+            style="color: hsl(var(--text-mute-2))"
           />
           <q-btn
-            id="btn-delete-work-product"
+            id="btn-swap-work-product"
+            icon="mdi-arrow-down"
+            dense
+            flat
+            round
+            class="q-mx-sm"
+            :disable="index === length - 1"
+            style="color: hsl(var(--text-mute-2))"
+          />
+          <q-input
+            for="input-work-name"
+            dense
+            outlined
+            borderless
+            class="col"
+            hide-bottom-space
+            :placeholder="$t('workName')"
+            v-model="workName"
+            :input-style="'color: hsl(var(--text-mute-2))'"
+            style="background-color: var(--surface-1)"
+          >
+            <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>
+              <span class="text-body2 q-pl-sm" style="color: var(--foreground)">
+                {{ $t('workNo') }} {{ index + 1 }} :
+              </span>
+            </template>
+          </q-input>
+          <q-btn
+            id="btn-delete-work"
             icon="mdi-trash-can-outline"
             dense
             flat
             round
+            padding="0"
             color="negative"
-            class="q-mx-sm"
-            @click="$emit('deleteProduct')"
+            class="q-ml-sm"
+            @click="$emit('deleteWork')"
           />
+        </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
+            id="btn-add-work-product"
+            flat
+            dense
+            icon="mdi-plus"
+            :label="$t('serviceAddProduct')"
+            padding="0"
+            style="color: hsl(var(--info-bg))"
+            @click="$emit('addProduct')"
+          />
+        </div>
 
-          <q-avatar
-            size="md"
-            class="text-white q-mx-lg"
-            style="background-color: var(--teal-9)"
+        <div class="q-py-md q-px-lg full-width q-gutter-y-sm">
+          <div
+            v-for="(product, index) in productItems"
+            :key="product.id"
+            class="full-width row items-center justify-between"
           >
-            {{ index + 1 }}
-          </q-avatar>
+            <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
+                  id="btn-swap-work-product"
+                  icon="mdi-arrow-up"
+                  dense
+                  flat
+                  round
+                  :disable="index === 0"
+                  style="color: hsl(var(--text-mute-2))"
+                />
+                <q-btn
+                  id="btn-swap-work-product"
+                  icon="mdi-arrow-down"
+                  dense
+                  flat
+                  round
+                  class="q-mx-sm"
+                  :disable="index === productItems.length - 1"
+                  style="color: hsl(var(--text-mute-2))"
+                />
 
-          <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'}`"
-              >
-                {{ product.label }}
-                <q-tooltip>{{ product.label }}</q-tooltip>
-              </span>
-              <div
-                class="bordered q-px-sm"
-                style="border-radius: 6px; max-width: 60px"
-              >
-                {{ product.code }}
+                <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.labelEn
+                          : product.label
+                      }}
+                      <q-tooltip>
+                        {{
+                          $i18n.locale === 'en-US'
+                            ? product.labelEn
+                            : product.label
+                        }}
+                      </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">
+                <span
+                  class="col-12 text-weight-bold text-h6"
+                  style="color: var(--teal-9)"
+                >
+                  ฿ {{ product.price }}
+                </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.time }} {{ $t('day') }}
+                </span>
               </div>
             </div>
+
+            <q-btn
+              id="btn-delete-work-product"
+              icon="mdi-trash-can-outline"
+              dense
+              flat
+              round
+              color="negative"
+              class="q-mx-sm"
+              @click="$emit('deleteProduct')"
+            />
           </div>
         </div>
-
-        <div class="row justify-end text-right col-3">
-          <span
-            class="col-12 text-weight-bold text-h6"
-            style="color: var(--teal-9)"
-          >
-            ฿ {{ product.price }}
-          </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.time }} {{ $t('day') }}
-          </span>
-        </div>
       </div>
+    </q-expansion-item>
+    <div class="q-py-sm q-px-md bordered-t row items-center justify-between">
+      <div>
+        {{ $t('totalProductWork') }}
+        <span class="app-text-muted-2">
+          {{ workName }}
+        </span>
+      </div>
+      <div>{{ productItems?.length ?? 0 }} {{ $t('list') }}</div>
     </div>
   </div>
 </template>
@@ -181,4 +239,15 @@ defineEmits<{
   border-radius: 10px;
   background-color: var(--surface-3);
 }
+
+:deep(i.q-icon.mdi.mdi-chevron-down-circle.q-expansion-item__toggle-icon) {
+  color: var(--brand-1);
+}
+
+:deep(
+    .q-item__section.column.q-item__section--side.justify-center.q-item__section--avatar.q-focusable.relative-position.cursor-pointer
+  ) {
+  padding-right: 8px !important;
+  min-width: 0px;
+}
 </style>