diff --git a/src/components/04_flow-management/FormFlow.vue b/src/components/04_flow-management/FormFlow.vue
index b23c4ac7..6ba0ecf0 100644
--- a/src/components/04_flow-management/FormFlow.vue
+++ b/src/components/04_flow-management/FormFlow.vue
@@ -1,12 +1,23 @@
 <script lang="ts" setup>
-import { ref } from 'vue';
+import { onMounted, ref, watch } from 'vue';
 import { QTableProps } from 'quasar';
 import { moveItemUp, moveItemDown, deleteItem } from 'src/stores/utils';
 
+import useUserStore from 'src/stores/user';
+import useOptionStore from 'src/stores/options';
+import { baseUrl } from 'stores/utils';
+import { getRole } from 'src/services/keycloak';
+import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
+import { User } from 'src/stores/user/types';
+
+import SelectInput from '../shared/SelectInput.vue';
 import ToggleButton from 'src/components/button/ToggleButton.vue';
 import { DeleteButton } from '../button';
-import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
 
+const userStore = useUserStore();
+const optionStore = useOptionStore();
+
+const registerBranchId = defineModel('registerBranchId', { default: '' });
 const flowData = defineModel<WorkflowTemplatePayload>('flowData', {
   required: true,
   default: {
@@ -15,6 +26,9 @@ const flowData = defineModel<WorkflowTemplatePayload>('flowData', {
   },
 });
 
+const role = ref<string[]>([]);
+const userList = ref<User[]>([]);
+const userInTable = ref<User[]>([]);
 const responsiblePersonSearch = ref('');
 const columns = [
   {
@@ -37,10 +51,48 @@ const columns = [
   },
 ] satisfies QTableProps['columns'];
 
+async function getUserList(opts?: { query: string }) {
+  const resUser = await userStore.fetchList({
+    query: !!opts?.query ? opts.query : undefined,
+  });
+  if (resUser) userList.value = resUser.result;
+}
+
+async function getUserById(responsiblePersonId: string) {
+  const resUser = await userStore.fetchById(responsiblePersonId);
+  if (resUser) userInTable.value.push(resUser);
+}
+
+function selectResponiblePerson(stepIndex: number, responsiblePerson: User) {
+  const currStep = flowData.value.step[stepIndex];
+  const existPersonIndex = currStep.responsiblePersonId?.findIndex(
+    (p) => p === responsiblePerson.id,
+  );
+
+  if (existPersonIndex === -1) {
+    currStep.responsiblePersonId?.push(responsiblePerson.id);
+    userInTable.value.push(responsiblePerson);
+  } else {
+    currStep.responsiblePersonId?.splice(Number(existPersonIndex), 1);
+    userInTable.value.splice(Number(existPersonIndex), 1);
+  }
+}
+
 defineEmits<{
   (e: 'moveUp'): void;
   (e: 'moveDown'): void;
 }>();
+
+watch(
+  responsiblePersonSearch,
+  async () => await getUserList({ query: responsiblePersonSearch.value }),
+);
+
+onMounted(async () => {
+  role.value = getRole() || [];
+  await userStore.fetchHqOption();
+  getUserList();
+});
 </script>
 
 <template>
@@ -57,23 +109,30 @@ defineEmits<{
         style="background-color: var(--surface-3)"
       />
       {{ $t(`general.name`, { msg: $t('flow.title') }) }}
-      <span class="row items-center q-ml-auto text-weight-regular">
+      <span class="row items-center q-ml-auto text-weight-regular text-body2">
         {{ $t('status.title') }}
         <ToggleButton class="q-ml-md" />
       </span>
     </section>
 
     <section id="form-flow-template" class="col-12 row">
+      <SelectInput
+        v-model="registerBranchId"
+        v-if="role.includes('system')"
+        class="col-12 q-pb-sm"
+        :option="userStore.userOption.hqOpts"
+        :label="$t('branch.form.code')"
+      />
       <q-input
         outlined
         dense
-        class="col"
+        class="col-12"
         id="input-flow-template-name"
         v-model="flowData.name"
         hide-bottom-space
         :label="$t(`general.name`, { msg: $t('flow.step') })"
         :rules="[(val: string) => !!val || $t('form.error.required')]"
-      ></q-input>
+      />
     </section>
 
     <section
@@ -166,11 +225,74 @@ defineEmits<{
 
             <q-td>
               <q-field @click.stop dense outlined>
-                <span class="app-text-muted row items-center col">
+                <span
+                  v-if="props.row.responsiblePersonId.length === 0"
+                  class="app-text-muted row items-center col"
+                >
                   {{ $t('general.no', { msg: $t('flow.responsiblePerson') }) }}
                   <q-icon name="mdi-chevron-down" class="q-ml-auto" />
                 </span>
-                <q-menu style="width: 18rem" :offset="[0, 4]">
+                <div v-else>
+                  <div class="row items-center no-wrap">
+                    <q-avatar class="q-ml-sm" size="md">
+                      <q-img
+                        class="text-center"
+                        :ratio="1"
+                        :src="`${baseUrl}/user/${userInTable[props.rowIndex].id}/profile-image/${userInTable[props.rowIndex].selectedImage}`"
+                      >
+                        <template #error>
+                          <div
+                            class="no-padding full-width full-height flex items-center justify-center"
+                            :style="`${userInTable[props.rowIndex].gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
+                          >
+                            <q-img
+                              v-if="userInTable[props.rowIndex].gender"
+                              :src="
+                                userInTable[props.rowIndex].gender === 'male'
+                                  ? '/no-img-man.png'
+                                  : '/no-img-female.png'
+                              "
+                            />
+                            <q-icon
+                              v-else
+                              size="sm"
+                              name="mdi-account-outline"
+                              style="color: white"
+                            />
+                          </div>
+                        </template>
+                      </q-img>
+                    </q-avatar>
+                    <div
+                      class="column q-pl-md"
+                      style="color: var(--foreground)"
+                    >
+                      <span>
+                        {{
+                          `${optionStore.mapOption(userInTable[props.rowIndex].namePrefix || '')} ${
+                            $i18n.locale === 'eng'
+                              ? userInTable[props.rowIndex].firstNameEN
+                              : userInTable[props.rowIndex].firstName
+                          } ${
+                            $i18n.locale === 'eng'
+                              ? userInTable[props.rowIndex].lastNameEN
+                              : userInTable[props.rowIndex].lastName
+                          }`
+                        }}
+                      </span>
+                      <span class="text-caption app-text-muted">
+                        {{ userInTable[props.rowIndex].code }}
+                      </span>
+                    </div>
+                    <span
+                      class="q-pl-md"
+                      v-if="props.row.responsiblePersonId.length > 1"
+                    >
+                      ({{ props.row.responsiblePersonId.length }})
+                    </span>
+                  </div>
+                </div>
+                <q-menu :offset="[0, 4]">
                   <q-list>
                     <q-item>
                       <q-input
@@ -189,24 +311,80 @@ defineEmits<{
                       </q-input>
                     </q-item>
                     <span class="text-caption app-text-muted-2 q-px-md">
-                      ผู้คน
+                      {{ $t('general.people') }}
                     </span>
 
-                    <q-item clickable class="column">
-                      <div class="row items-center">
-                        <q-checkbox :model-value="false" size="xs"></q-checkbox>
+                    <q-item
+                      v-for="(person, i) in userList"
+                      :key="i"
+                      clickable
+                      class="column"
+                      @click.stop="
+                        selectResponiblePerson(props.rowIndex, person)
+                      "
+                    >
+                      <div class="row items-center no-wrap">
+                        <q-checkbox
+                          size="xs"
+                          :model-value="
+                            props.row.responsiblePersonId.includes(person.id)
+                          "
+                          @click.stop="
+                            selectResponiblePerson(props.rowIndex, person)
+                          "
+                        />
                         <q-avatar class="q-ml-sm" size="md">
-                          <q-img :src="`/images/employee-avatar.png`" />
+                          <q-img
+                            class="text-center"
+                            :ratio="1"
+                            :src="`${baseUrl}/user/${person.id}/profile-image/${person.selectedImage}`"
+                          >
+                            <template #error>
+                              <div
+                                class="no-padding full-width full-height flex items-center justify-center"
+                                :style="`${person.gender ? 'background: white' : 'background: linear-gradient(135deg,rgba(43, 137, 223, 1) 0%, rgba(230, 51, 81, 1) 100%);'}`"
+                              >
+                                <q-img
+                                  v-if="person.gender"
+                                  :src="
+                                    person.gender === 'male'
+                                      ? '/no-img-man.png'
+                                      : '/no-img-female.png'
+                                  "
+                                />
+                                <q-icon
+                                  v-else
+                                  size="sm"
+                                  name="mdi-account-outline"
+                                  style="color: white"
+                                />
+                              </div>
+                            </template>
+                          </q-img>
                         </q-avatar>
                         <div class="column q-pl-md">
-                          <span>นาย กอไก่ ขอไข่</span>
-                          <span class="text-caption app-text-muted">10002</span>
+                          <span>
+                            {{
+                              `${optionStore.mapOption(person.namePrefix || '')} ${
+                                $i18n.locale === 'eng'
+                                  ? person.firstNameEN
+                                  : person.firstName
+                              } ${
+                                $i18n.locale === 'eng'
+                                  ? person.lastNameEN
+                                  : person.lastName
+                              }`
+                            }}
+                          </span>
+                          <span class="text-caption app-text-muted">
+                            {{ person.code }}
+                          </span>
                         </div>
                       </div>
                     </q-item>
 
                     <span class="text-caption app-text-muted-2 q-px-md">
-                      กลุ่ม
+                      {{ $t('general.group') }}
                     </span>
                     <q-item clickable class="column">
                       <div class="row items-center">
@@ -215,7 +393,7 @@ defineEmits<{
                           <q-img :src="`/images/employee-avatar.png`" />
                         </q-avatar>
                         <div class="column q-pl-md">
-                          <span>กลุ่มคาโมมายด์</span>
+                          <span>กลุ่มคาโมมายด์ (Mocking)</span>
                         </div>
                       </div>
                     </q-item>
diff --git a/src/components/05_quotation/QuotationCard.vue b/src/components/05_quotation/QuotationCard.vue
index f53e1009..b622ead3 100644
--- a/src/components/05_quotation/QuotationCard.vue
+++ b/src/components/05_quotation/QuotationCard.vue
@@ -74,7 +74,6 @@ defineEmits<{
           :idName="code"
           status="ACTIVE"
           hide-toggle
-          use-link
           use-upload
           @view="$emit('view')"
           @edit="$emit('edit')"
diff --git a/src/pages/04_flow-managment/MainPage.vue b/src/pages/04_flow-managment/MainPage.vue
index 37b29bba..51d64285 100644
--- a/src/pages/04_flow-managment/MainPage.vue
+++ b/src/pages/04_flow-managment/MainPage.vue
@@ -1,34 +1,104 @@
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
+import { onMounted, reactive, ref } from 'vue';
 
+import {
+  WorkflowTemplate,
+  WorkflowTemplatePayload,
+} from 'src/stores/workflow-template/types';
+import { useWorkflowTemplate } from 'src/stores/workflow-template';
+
+import ButtonAddComponent from 'components/ButtonAddCompoent.vue';
 import StatCardComponent from 'src/components/StatCardComponent.vue';
 import CreateButton from 'src/components/AddButton.vue';
 import PaginationComponent from 'src/components/PaginationComponent.vue';
 import FlowDialog from '../04_product-service/FlowDialog.vue';
-import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
+import NoData from 'src/components/NoData.vue';
+import { QTableProps } from 'quasar';
+
+const workflowStore = useWorkflowTemplate();
 
 const pageState = reactive({
   hideStat: false,
   inputSearch: '',
   fieldSelected: [],
-  gridView: true,
+  gridView: false,
   total: 0,
 
   addModal: false,
 });
 
-const formFlowData = ref<WorkflowTemplatePayload>({
+const workflowList = ref<WorkflowTemplate[]>([]);
+const formDataWorkflow = ref<WorkflowTemplatePayload>({
   name: '',
   step: [],
 });
-
+const registeredBranchId = ref('');
 const statusFilter = ref<'all' | 'statusACTIVE' | 'statusINACTIVE'>('all');
+const columns = [
+  {
+    name: 'order',
+    align: 'center',
+    label: 'general.order',
+    field: 'order',
+  },
+  {
+    name: 'name',
+    align: 'center',
+    label: 'general.name',
+    field: 'name',
+  },
+  {
+    name: 'step',
+    align: 'center',
+    label: 'general.numberOf',
+    field: 'step',
+  },
+  {
+    name: 'action',
+    align: 'center',
+    label: '',
+    field: 'action',
+  },
+] satisfies QTableProps['columns'];
 
 function triggerAddDialog() {
   pageState.addModal = true;
 }
+
+async function submitAdd() {
+  const res = await workflowStore.creatWorkflowTemplate({
+    registeredBranchId: registeredBranchId.value,
+    ...formDataWorkflow.value,
+  });
+  if (res) {
+    pageState.addModal = false;
+    await fetchWorkflowList();
+  }
+}
+
+function resetForm() {
+  formDataWorkflow.value = {
+    name: '',
+    step: [],
+  };
+}
+
+async function fetchWorkflowList() {
+  const res = await workflowStore.getWorkflowTemplateList();
+  if (res) workflowList.value = res.result;
+}
+
+onMounted(async () => {
+  await fetchWorkflowList();
+});
 </script>
 <template>
+  <ButtonAddComponent
+    style="z-index: 999"
+    hide-icon
+    @click="triggerAddDialog"
+  ></ButtonAddComponent>
+
   <div class="column full-height no-wrap">
     <!-- SEC: stat -->
     <section class="text-body-2 q-mb-xs flex items-center">
@@ -100,7 +170,6 @@ function triggerAddDialog() {
             </q-input>
 
             <div
-              v-if="true"
               class="row col-12 col-md-4 justify-end"
               :class="{ 'q-pt-xs': $q.screen.lt.md }"
               style="white-space: nowrap"
@@ -142,6 +211,7 @@ function triggerAddDialog() {
               />
 
               <q-btn-toggle
+                v-if="false"
                 id="btn-mode"
                 v-model="pageState.gridView"
                 dense
@@ -192,7 +262,7 @@ function triggerAddDialog() {
 
         <!-- SEC: body content -->
         <article
-          v-if="true"
+          v-if="workflowList.length === 0 && !pageState.inputSearch"
           class="col surface-2 flex items-center justify-center"
         >
           <NoData
@@ -207,7 +277,58 @@ function triggerAddDialog() {
             :i18n-args="{ text: $t('flow.title') }"
           />
         </article>
-        <article v-else class="col q-pa-md surface-2 scroll"></article>
+        <article v-else class="col q-pa-md surface-2 scroll">
+          <q-table
+            flat
+            bordered
+            hide-pagination
+            :columns="columns"
+            :rows="workflowList"
+          >
+            <template #header="{ cols }">
+              <q-tr style="background-color: hsla(var(--info-bg) / 0.07)">
+                <q-th
+                  v-for="v in cols"
+                  :key="v"
+                  :class="{
+                    'text-left': v.name === 'name',
+                    'text-right': v.name === 'step',
+                  }"
+                >
+                  {{
+                    v.label &&
+                    $t(v.label, {
+                      msg:
+                        v.name === 'step'
+                          ? $t('flow.step')
+                          : v.name === 'name'
+                            ? $t('flow.title')
+                            : '',
+                    })
+                  }}
+                </q-th>
+              </q-tr>
+            </template>
+
+            <template #body="props">
+              <q-tr>
+                <q-td class="text-center">{{ props.rowIndex + 1 }}</q-td>
+                <q-td>{{ props.row.name }}</q-td>
+                <q-td class="text-right">{{ props.row.step.length }}</q-td>
+                <q-td class="text-right">
+                  <q-btn
+                    icon="mdi-eye-outline"
+                    size="sm"
+                    dense
+                    round
+                    flat
+                    @click.stop="$emit('view', props.rowIndex)"
+                  />
+                </q-td>
+              </q-tr>
+            </template>
+          </q-table>
+        </article>
 
         <!-- SEC: footer content -->
         <!-- <footer
@@ -265,5 +386,11 @@ function triggerAddDialog() {
     </section>
   </div>
 
-  <FlowDialog v-model="pageState.addModal" v-model:flow-data="formFlowData" />
+  <FlowDialog
+    @close="resetForm"
+    @submit="submitAdd"
+    v-model="pageState.addModal"
+    v-model:flow-data="formDataWorkflow"
+    v-model:register-branch-id="registeredBranchId"
+  />
 </template>
diff --git a/src/pages/04_product-service/FlowDialog.vue b/src/pages/04_product-service/FlowDialog.vue
index 9a38d489..6971a243 100644
--- a/src/pages/04_product-service/FlowDialog.vue
+++ b/src/pages/04_product-service/FlowDialog.vue
@@ -5,6 +5,7 @@ import FormFlow from 'src/components/04_flow-management/FormFlow.vue';
 import { WorkflowTemplatePayload } from 'src/stores/workflow-template/types';
 import { nextTick } from 'vue';
 
+const registerBranchId = defineModel('registerBranchId', { default: '' });
 const model = defineModel<boolean>({ required: true, default: false });
 const flowData = defineModel<WorkflowTemplatePayload>('flowData', {
   required: true,
@@ -21,10 +22,15 @@ withDefaults(
   { readonly: false },
 );
 
+defineEmits<{
+  (e: 'submit'): void;
+  (e: 'close'): void;
+}>();
+
 async function addStep() {
   flowData.value.step.push({
-    responsiblePersonId: [''],
-    value: [''],
+    responsiblePersonId: [],
+    value: [],
     name: '',
   });
 
@@ -37,7 +43,12 @@ async function addStep() {
 }
 </script>
 <template>
-  <DialogForm :title="$t('flow.title')" v-model:modal="model">
+  <DialogForm
+    :title="$t('flow.title')"
+    v-model:modal="model"
+    :submit="() => $emit('submit')"
+    :close="() => $emit('close')"
+  >
     <div
       class="col surface-1 rounded bordered scroll row relative-position"
       :class="{
@@ -97,7 +108,10 @@ async function addStep() {
         style="height: 100%; max-height: 100%; overflow-y: auto"
         id="flow-form"
       >
-        <FormFlow v-model:flow-data="flowData" />
+        <FormFlow
+          v-model:flow-data="flowData"
+          v-model:register-branch-id="registerBranchId"
+        />
       </section>
     </div>
   </DialogForm>