diff --git a/src/components/04_product-service/BasicInformation.vue b/src/components/04_product-service/BasicInformation.vue
index ab9b4788..9e97cb23 100644
--- a/src/components/04_product-service/BasicInformation.vue
+++ b/src/components/04_product-service/BasicInformation.vue
@@ -4,72 +4,108 @@ const detail = defineModel<string>('detail');
 const name = defineModel<string>('name');
 const code = defineModel<string>('code');
 
+const serviceCode = defineModel<string>('serviceCode');
+const serviceName = defineModel<string>('serviceName');
+const serviceDescription = defineModel<string>('serviceDescription');
+
 defineProps<{
   dense?: boolean;
   outlined?: boolean;
   readonly?: boolean;
   separator?: boolean;
   isType?: boolean;
+  service?: boolean;
 }>();
 </script>
 
 <template>
-  <div class="row">
-    <div class="col-4 app-text-muted">
-      • {{ $t(`formDialogTitleInformation`) }}
-    </div>
-    <div class="col-8 row q-col-gutter-md">
-      <q-input
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        class="col-6"
-        :label="
-          $t(
-            isType ? 'productAndServiceTypeCode' : 'productAndServiceGroupCode',
-          )
-        "
-        v-model="code"
-      />
-      <q-input
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        class="col-6"
-        :label="
-          $t(
-            isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName',
-          )
-        "
-        v-model="name"
-      />
-      <q-input
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        type="textarea"
-        class="col-12"
-        :label="$t('detail')"
-        v-model="detail"
-      />
-      <q-input
-        :dense="dense"
-        :outlined="!readonly"
-        :readonly="readonly"
-        :borderless="readonly"
-        hide-bottom-space
-        type="textarea"
-        class="col-12"
-        :label="$t('formDialogInputRemark')"
-        v-model="remark"
-      />
-    </div>
+  <div class="col-3 app-text-muted">
+    • {{ $t(`formDialogTitleInformation`) }}
+  </div>
+  <div v-if="!service" class="col-9 row q-col-gutter-md">
+    <q-input
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-6"
+      :label="
+        $t(isType ? 'productAndServiceTypeCode' : 'productAndServiceGroupCode')
+      "
+      v-model="code"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-6"
+      :label="
+        $t(isType ? 'productAndServiceTypeName' : 'productAndServiceGroupName')
+      "
+      v-model="name"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      type="textarea"
+      class="col-12"
+      :label="$t('detail')"
+      v-model="detail"
+    />
+    <q-input
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      type="textarea"
+      class="col-12"
+      :label="$t('formDialogInputRemark')"
+      v-model="remark"
+    />
+  </div>
+
+  <div v-if="service" class="col-9 row q-col-gutter-md">
+    <q-input
+      for="input-service-code"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-3"
+      :label="$t('serviceCode')"
+      v-model="serviceCode"
+    />
+    <q-input
+      for="input-service-name"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      class="col-9"
+      :label="$t('serviceName')"
+      v-model="serviceName"
+    />
+    <q-input
+      for="input-service-description"
+      :dense="dense"
+      :outlined="!readonly"
+      :readonly="readonly"
+      :borderless="readonly"
+      hide-bottom-space
+      type="textarea"
+      class="col-12"
+      :label="$t('serviceDetail')"
+      v-model="serviceDescription"
+    />
   </div>
 </template>
 
diff --git a/src/components/04_product-service/FormServiceWork.vue b/src/components/04_product-service/FormServiceWork.vue
new file mode 100644
index 00000000..b5e284ca
--- /dev/null
+++ b/src/components/04_product-service/FormServiceWork.vue
@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import NoData from 'src/components/NoData.vue';
+import WorkManagementComponent from './WorkManagementComponent.vue';
+import { ref } from 'vue';
+
+const serviceName = defineModel<string>('serviceName');
+
+const workItems = ref([
+  {
+    id: '1',
+    product: [
+      {
+        id: '1',
+        label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
+        code: 'AC101',
+        price: '1,200.00',
+        time: '14',
+      },
+    ],
+  },
+  {
+    id: '2',
+    product: [
+      {
+        id: '1',
+        label: 'ค่าธรรมเนียมใบอนุญาตทำงาน 2 ปี',
+        code: 'AC101',
+        price: '1,200.00',
+        time: '14',
+      },
+      {
+        id: '1',
+        label:
+          'ค่าบริการและค่าดำเนินงานยื่นคำร้องขอใบอนุญาตทำงานแทน คนงานต่างด้าว MOU',
+        code: 'AC102',
+        price: '1,200.00',
+        time: '14',
+      },
+    ],
+  },
+]);
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+}>();
+
+defineEmits<{
+  (e: 'addProduct'): void;
+  (e: 'deleteWork'): void;
+  (e: 'deleteProduct'): void;
+}>();
+</script>
+
+<template>
+  <div class="column col-12 full-height">
+    <div class="col-1 app-text-muted row items-start">
+      • {{ $t(`workInformation`) }}
+      <q-btn
+        icon="mdi-plus"
+        dense
+        flat
+        round
+        padding="0"
+        color="primary"
+        class="q-ml-sm"
+      />
+    </div>
+
+    <!-- <div class="col row rounded bordered surface-2 justify-center items-center">
+      <NoData />
+    </div> -->
+
+    <div class="col q-gutter-y-md">
+      <WorkManagementComponent
+        v-for="(work, index) in workItems"
+        :key="work.id"
+        v-model:product-items="work.product"
+        :workIndex="index"
+        @addProduct="$emit('addProduct')"
+      ></WorkManagementComponent>
+    </div>
+  </div>
+</template>
+
+<style scoped lang="scss"></style>
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index e19e55b0..bb33eaee 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -14,6 +14,7 @@ import BasicInfoProduct from 'src/components/04_product-service/ฺBasicInfoProd
 import PriceDataComponent from 'src/components/04_product-service/PriceDataComponent.vue';
 import ProfileUpload from 'src/components/ProfileUpload.vue';
 import TotalProductCardComponent from 'components/04_product-service/TotalProductCardComponent.vue';
+import FormServiceWork from 'src/components/04_product-service/FormServiceWork.vue';
 
 import { Status } from 'src/stores/types';
 import NoData from 'components/NoData.vue';
@@ -73,6 +74,7 @@ const drawerInfo = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
 const dialogInputForm = ref<boolean>(false);
 const dialogProduct = ref<boolean>(false);
+const dialogService = ref<boolean>(false);
 const statusToggle = ref<boolean>(false);
 const profileSubmit = ref<boolean>(false);
 const profileFile = ref<File | undefined>(undefined);
@@ -109,6 +111,18 @@ const formDataProduct = ref<ProductCreate>({
   code: '',
 });
 
+const serviceTab = [
+  {
+    name: 'serviceInformation',
+    label: 'serviceInformation',
+  },
+  {
+    name: 'workInformation',
+    label: 'workInformation',
+  },
+];
+const currentServiceTab = ref('serviceInformation');
+
 const currentId = ref<string>('');
 const currentIdType = ref<string>('');
 const resultSearchGroup = ref<ProductGroup[]>();
@@ -417,7 +431,7 @@ watch(currentStatus, async () => {
     ></q-fab-action>
     <q-fab-action
       v-if="productMode === 'service'"
-      label="เพิ่มบริการ"
+      :label="$t('addService')"
       external-label
       label-position="left"
       style="color: white; background-color: hsla(var(--blue-11-hsl))"
@@ -426,7 +440,8 @@ watch(currentStatus, async () => {
       @click="
         () => {
           clearFormGroup();
-          dialogInputForm = true;
+          currentServiceTab = 'serviceInformation';
+          dialogService = true;
         }
       "
     ></q-fab-action>
@@ -1047,6 +1062,36 @@ watch(currentStatus, async () => {
       />
     </AppBox>
   </FormDialog>
+
+  <FormDialog
+    no-address
+    :title="$t('addService')"
+    v-model:modal="dialogService"
+    v-model:tabs-list="serviceTab"
+    v-model:current-tab="currentServiceTab"
+  >
+    <template #prepend>
+      <ProfileUpload
+        v-model:url-profile="profileUrl"
+        v-model:status-toggle="statusToggle"
+        v-model:profile-submit="profileSubmit"
+        @input-file="inputFile.click()"
+      />
+    </template>
+
+    <template #information>
+      <BasicInformation
+        v-if="currentServiceTab === 'serviceInformation'"
+        dense
+        service
+      />
+      <FormServiceWork
+        v-if="currentServiceTab === 'workInformation'"
+        dense
+        @addProduct="dialogTotalProduct = true"
+      />
+    </template>
+  </FormDialog>
 </template>
 
 <style scoped>