diff --git a/public/shop-add-image.png b/public/shop-add-image.png
new file mode 100644
index 00000000..5fee166f
Binary files /dev/null and b/public/shop-add-image.png differ
diff --git a/src/components/04_product-service/PriceDataComponent.vue b/src/components/04_product-service/PriceDataComponent.vue
new file mode 100644
index 00000000..8ebd4e4c
--- /dev/null
+++ b/src/components/04_product-service/PriceDataComponent.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+const remark = defineModel<string>('remark');
+const detail = defineModel<string>('detail');
+const name = defineModel<string>('name');
+const code = defineModel<string>('code');
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+  isType?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="row">
+    <div class="col-4 app-text-muted">• {{ $t(`ข้อมูลราคา`) }}</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-4"
+        label="ราคาขาย"
+        v-model="code"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-4"
+        label="ราคาตัวแทน"
+        v-model="name"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-4"
+        label="ราคาค่าดำเนินการ"
+        v-model="detail"
+      />
+    </div>
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/components/04_product-service/ฺBasicInfoProduct.vue b/src/components/04_product-service/ฺBasicInfoProduct.vue
new file mode 100644
index 00000000..35b62717
--- /dev/null
+++ b/src/components/04_product-service/ฺBasicInfoProduct.vue
@@ -0,0 +1,94 @@
+<script setup lang="ts">
+const remark = defineModel<string>('remark');
+const detail = defineModel<string>('detail');
+const name = defineModel<string>('name');
+const code = defineModel<string>('code');
+
+defineProps<{
+  dense?: boolean;
+  outlined?: boolean;
+  readonly?: boolean;
+  separator?: boolean;
+  isType?: boolean;
+}>();
+</script>
+
+<template>
+  <div class="row col-10">
+    <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-3"
+        label="รหัสสินค้า"
+        v-model="code"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-9"
+        label="ชื่อสินค้า"
+        v-model="name"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        type="textarea"
+        class="col-12"
+        label="รายละเอียดบริการ"
+        v-model="detail"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        type="textarea"
+        class="col-12"
+        :label="$t('detail')"
+        v-model="remark"
+      />
+      <q-input
+        :dense="dense"
+        :outlined="!readonly"
+        :readonly="readonly"
+        :borderless="readonly"
+        hide-bottom-space
+        class="col-4"
+        label="ระยะเวลาในการดำเนินการ"
+        v-model="remark"
+      />
+      <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>
+  <q-separator
+    v-if="separator"
+    class="col-12 q-mt-xl q-mb-md"
+    style="padding-block: 0.5px"
+  />
+</template>
+
+<style scoped></style>
diff --git a/src/components/ProfileUpload.vue b/src/components/ProfileUpload.vue
index 1f0aa0bf..b96234a7 100644
--- a/src/components/ProfileUpload.vue
+++ b/src/components/ProfileUpload.vue
@@ -5,6 +5,10 @@ const urlProfile = defineModel('urlProfile', {
 const profileSubmit = defineModel('profileSubmit');
 const statusToggle = defineModel('statusToggle');
 
+defineProps<{
+  isProduct?: boolean;
+}>();
+
 defineEmits<{
   (e: 'inputFile'): void;
 }>();
@@ -18,6 +22,11 @@ defineEmits<{
         :src="urlProfile"
         style="object-fit: cover; width: 100%; height: 100%"
       />
+      <q-img
+        v-else-if="isProduct"
+        src="shop-add-image.png"
+        style="object-fit: cover; width: 100%; height: 100%"
+      />
       <q-icon
         v-else
         name="mdi-account full-height"
diff --git a/src/pages/04_product-service/MainPage.vue b/src/pages/04_product-service/MainPage.vue
index ab7a8eb2..dce5dc57 100644
--- a/src/pages/04_product-service/MainPage.vue
+++ b/src/pages/04_product-service/MainPage.vue
@@ -10,6 +10,9 @@ import BasicInformation from 'src/components/04_product-service/BasicInformation
 import FormDialog from 'src/components/FormDialog.vue';
 import TooltipComponent from 'components/TooltipComponent.vue';
 import ButtonAddComponent from 'src/components/ButtonAddCompoent.vue';
+import BasicInfoProduct from 'src/components/04_product-service/ฺBasicInfoProduct.vue';
+import PriceDataComponent from 'src/components/04_product-service/PriceDataComponent.vue';
+import ProfileUpload from 'src/components/ProfileUpload.vue';
 
 import { Status } from 'src/stores/types';
 import NoData from 'components/NoData.vue';
@@ -59,6 +62,11 @@ const inputSearch = ref<string>('');
 const drawerInfo = ref<boolean>(false);
 const isEdit = ref<boolean>(false);
 const dialogInputForm = ref<boolean>(false);
+const dialogProduct = ref<boolean>(false);
+const statusToggle = ref<boolean>(false);
+const profileSubmit = ref<boolean>(false);
+const profileFile = ref<File | undefined>(undefined);
+const profileUrl = ref<string | null>('');
 
 const groupName = ref<string>('งาน MOU');
 const dialogProductServiceType = ref<boolean>(false);
@@ -83,6 +91,26 @@ const resultSearchType = ref<(Product & { productGroupId: string })[]>();
 
 const currentStatus = ref<Status | 'All'>('All');
 
+const inputFile = (() => {
+  const element = document.createElement('input');
+  element.type = 'file';
+  element.accept = 'image/*';
+
+  const reader = new FileReader();
+  reader.addEventListener('load', () => {
+    if (typeof reader.result === 'string') profileUrl.value = reader.result;
+  });
+
+  element.addEventListener('change', () => {
+    profileFile.value = element.files?.[0];
+    if (profileFile.value) {
+      reader.readAsDataURL(profileFile.value);
+    }
+  });
+
+  return element;
+})();
+
 async function searchGroup() {
   const resultList = await fetchListProductService({
     query: inputSearch.value,
@@ -273,6 +301,35 @@ watch(currentStatus, async () => {
         }
       "
     ></q-fab-action>
+    <q-fab-action
+      v-if="productMode === 'service'"
+      label="เพิ่มสินค้า"
+      external-label
+      label-position="left"
+      style="color: white; background-color: hsla(var(--green-11-hsl))"
+      padding="xs"
+      icon="mdi-folder-multiple-plus"
+      @click="
+        () => {
+          dialogProduct = true;
+        }
+      "
+    ></q-fab-action>
+    <q-fab-action
+      v-if="productMode === 'service'"
+      label="เพิ่มบริการ"
+      external-label
+      label-position="left"
+      style="color: white; background-color: hsla(var(--blue-11-hsl))"
+      padding="xs"
+      icon="mdi-folder-multiple-plus"
+      @click="
+        () => {
+          clearForm();
+          dialogInputForm = true;
+        }
+      "
+    ></q-fab-action>
   </ButtonAddComponent>
 
   <div class="column q-pb-lg">
@@ -734,6 +791,38 @@ watch(currentStatus, async () => {
     </template>
     <TotalProductComponent />
   </FormDialog>
+
+  <FormDialog
+    v-model:modal="dialogProduct"
+    noAddress
+    noAppBox
+    title="เพิ่มสินค้า"
+    :submit="
+      () => {
+        console.log('submit');
+      }
+    "
+    :close="
+      () => {
+        dialogProduct = false;
+      }
+    "
+  >
+    <template #prepend>
+      <ProfileUpload
+        isProduct
+        v-model:url-profile="profileUrl"
+        v-model:status-toggle="statusToggle"
+        v-model:profile-submit="profileSubmit"
+        @input-file="inputFile.click()"
+      />
+    </template>
+
+    <AppBox class="col-10" bordered>
+      <BasicInfoProduct dense separator />
+      <PriceDataComponent dense />
+    </AppBox>
+  </FormDialog>
 </template>
 
 <style scoped>