diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
new file mode 100644
index 00000000..9e811bab
--- /dev/null
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -0,0 +1,172 @@
+<script lang="ts" setup>
+import { Icon } from '@iconify/vue';
+
+const serviceName = defineModel<string>('serviceName');
+
+defineProps<{
+  workIndex: number;
+}>();
+
+const productItems = defineModel<
+  {
+    id: string;
+    label: string;
+    code: string;
+    price: string;
+    time: string;
+  }[]
+>('productItems');
+
+defineEmits<{
+  (e: 'addProduct'): void;
+  (e: 'deleteWork'): void;
+  (e: 'deleteProduct'): void;
+}>();
+</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
+        icon="mdi-swap-vertical"
+        dense
+        flat
+        round
+        padding="0"
+        color="info"
+        class="q-ml-sm"
+      />
+      <q-btn
+        icon="mdi-trash-can-outline"
+        dense
+        flat
+        round
+        padding="0"
+        color="negative"
+        class="q-ml-sm"
+        @click="$emit('deleteWork')"
+      />
+
+      <q-input
+        dense
+        outlined
+        borderless
+        class="col"
+        hide-bottom-space
+        label="ชื่องาน"
+        bg-white
+        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>
+    </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)"
+    >
+      <span>{{ $t('productInWork') }} {{ workIndex + 1 }}</span>
+      <q-btn
+        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">
+          <q-btn icon="mdi-swap-vertical" dense flat round color="info" />
+          <q-btn
+            icon="mdi-trash-can-outline"
+            dense
+            flat
+            round
+            color="negative"
+            class="q-mx-sm"
+            @click="$emit('deleteProduct')"
+          />
+
+          <q-avatar
+            size="md"
+            class="text-white q-mx-lg"
+            style="background-color: var(--teal-9)"
+          >
+            {{ 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'}`"
+              >
+                {{ product.label }}
+                <q-tooltip>{{ 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>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.image-box {
+  height: 70px;
+  width: 70px;
+  border-color: var(--teal-9);
+  border-radius: 10px;
+  background-color: var(--surface-3);
+}
+</style>