diff --git a/src/components/04_product-service/WorkManagementComponent.vue b/src/components/04_product-service/WorkManagementComponent.vue
index 573beda4..b2e44386 100644
--- a/src/components/04_product-service/WorkManagementComponent.vue
+++ b/src/components/04_product-service/WorkManagementComponent.vue
@@ -2,7 +2,14 @@
 import { Icon } from '@iconify/vue';
 import { formatNumberDecimal } from 'src/stores/utils';
 
+import useProductServiceStore from 'src/stores/product-service';
 import { ProductList } from 'src/stores/product-service/types';
+import { storeToRefs } from 'pinia';
+
+const productServiceStore = useProductServiceStore();
+
+const { fetchListOfWork } = productServiceStore;
+const { workNameItems } = storeToRefs(productServiceStore);
 
 defineProps<{
   workIndex: number;
@@ -18,14 +25,6 @@ const productItems = defineModel<(ProductList & { nameEn: string })[]>(
   },
 );
 
-const testName = [
-  'ทดสอบการขาย 1',
-  'ทดสอบการขาย 2',
-  'ทดสอบการขาย 3',
-  'ทดสอบการขาย 4',
-  'ทดสอบการขาย 5',
-];
-
 defineEmits<{
   (e: 'moveWorkUp'): void;
   (e: 'moveWorkDown'): void;
@@ -76,6 +75,7 @@ defineEmits<{
             :placeholder="$t('workName')"
             :input-style="'color: hsl(var(--text-mute-2))'"
             style="background-color: var(--surface-1); z-index: 2"
+            @click="fetchListOfWork()"
           >
             <q-btn
               dense
@@ -120,7 +120,7 @@ defineEmits<{
               <q-item
                 @click="workName = item"
                 clickable
-                v-for="item in testName"
+                v-for="item in workNameItems"
                 :key="item"
               >
                 <div class="full-width flex items-center">