diff --git a/src/components/Workflow/DialogApprove.vue b/src/components/Workflow/DialogApprove.vue
new file mode 100644
index 0000000..f075cc4
--- /dev/null
+++ b/src/components/Workflow/DialogApprove.vue
@@ -0,0 +1,113 @@
+<script setup lang="ts">
+import { ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogHeader from "@/components/DialogHeader.vue";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+const modal = defineModel<boolean>("modal", { required: true });
+
+const isAcknowledge = ref<boolean>(false);
+const isConsider = ref<boolean>(true);
+const isComment = ref<boolean>(true);
+
+const acknowledge = ref<boolean>(false);
+const consider = ref<string>("");
+const comment = ref<string>("");
+
+function onSubmit() {
+  dialogConfirm($q, () => {});
+}
+
+function onCloseModal() {
+  modal.value = false;
+  acknowledge.value = false;
+  consider.value = "";
+  comment.value = "";
+}
+</script>
+
+<template>
+  <q-dialog v-model="modal" persistent>
+    <q-card style="min-width: 700px">
+      <q-form q-form greedy @submit.prevent @validation-success="onSubmit">
+        <DialogHeader
+          :tittle="`รับทราบ/พิจารณา/แสดงความเห็น`"
+          :close="onCloseModal"
+        />
+        <q-separator />
+
+        <q-card-section>
+          <div class="q-gutter-xs">
+            <div v-if="isAcknowledge">
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="acknowledge"
+                label="รับทราบ"
+              />
+            </div>
+            <div v-if="!isAcknowledge && isConsider">
+              <div class="text-weight-bold">พิจารณา (อนุมัติ/ไม่อนุมัติ)</div>
+              <div class="q-pa-sm q-gutter-sm">
+                <q-radio
+                  dense
+                  keep-color
+                  color="primary"
+                  v-model="consider"
+                  label="อนุมัติ"
+                  val="approve"
+                />
+                <q-radio
+                  dense
+                  keep-color
+                  color="primary"
+                  v-model="consider"
+                  label="ไม่อนุมัติ"
+                  val="reject"
+                />
+              </div>
+            </div>
+
+            <div v-if="!isAcknowledge && isComment">
+              <div class="text-weight-bold">แสดงความเห็นในเอกสาร</div>
+              <div class="q-pa-sm q-gutter-sm">
+                <div class="col-12">
+                  <q-input
+                    dense
+                    outlined
+                    label="ความเห็น"
+                    v-model="comment"
+                    type="textarea"
+                    lazy-rules
+                    :rules="[
+                      (val:string) => !!val || `${'กรุณากรอกความเห็น'}`,
+                    ]"
+                    hide-bottom-space
+                  />
+                </div>
+              </div>
+            </div>
+          </div>
+        </q-card-section>
+
+        <q-separator />
+
+        <q-card-actions align="right">
+          <q-btn
+            label="บันทึก"
+            color="public"
+            type="submit"
+            :disable="!isAcknowledge && !isConsider && !isComment"
+          >
+          </q-btn>
+        </q-card-actions>
+      </q-form>
+    </q-card>
+  </q-dialog>
+</template>
diff --git a/src/components/DialogWorkflow.vue b/src/components/Workflow/DialogSelectPerson.vue
similarity index 72%
rename from src/components/DialogWorkflow.vue
rename to src/components/Workflow/DialogSelectPerson.vue
index 28cbca1..d392c62 100644
--- a/src/components/DialogWorkflow.vue
+++ b/src/components/Workflow/DialogSelectPerson.vue
@@ -12,11 +12,9 @@ const $q = useQuasar();
 const { dialogConfirm } = useCounterMixin();
 
 const modal = defineModel<boolean>("modal", { required: true });
-const operator = defineModel<string>("operator", {
-  default: "officer",
-});
 
 /** table*/
+const selected = ref<any[]>([]);
 const rows = ref<any[]>([
   {
     fullName: "นายศรัณย์ ศิลาดี",
@@ -25,7 +23,6 @@ const rows = ref<any[]>([
     organization: "",
   },
 ]);
-const selected = ref<any[]>([]);
 const columns = ref<QTableProps["columns"]>([
   {
     name: "fullName",
@@ -65,25 +62,16 @@ const columns = ref<QTableProps["columns"]>([
   },
 ]);
 
+const isAcknowledge = ref<boolean>(false);
+const isConsider = ref<boolean>(false);
+const isComment = ref<boolean>(false);
+
 function fetchLists() {}
 
 function onSubmit() {
   dialogConfirm($q, () => {});
 }
 
-function convertLabelBtn(name: string) {
-  switch (name) {
-    case "officer":
-      return "การเจ้าหน้าที่";
-    case "personnelOfficer":
-      return "สำนักงานการเจ้าหน้าที่";
-    case "commander":
-      return "ผู้บังคับบัญชา";
-    case "authority":
-      return "ผู้มีอำนาจ";
-  }
-}
-
 function onCloseModal() {
   modal.value = false;
   selected.value = [];
@@ -115,7 +103,6 @@ watch(modal, (val) => {
             :paging="true"
             dense
             :rows-per-page-options="[10, 25, 50, 100]"
-            class="tableTb"
             selection="single"
             v-model:selected="selected"
           >
@@ -152,19 +139,51 @@ watch(modal, (val) => {
                 </q-td>
               </q-tr>
             </template>
-          </d-table></q-card-section
-        >
+          </d-table>
+          <div class="q-gutter-xs q-pt-sm">
+            <div>
+              <q-checkbox
+                keep-color
+                color="primary"
+                dense
+                v-model="isAcknowledge"
+                label="ให้เลือกรับทราบ"
+                @update:model-value="(isConsider = false), (isComment = false)"
+              />
+            </div>
+            <div v-if="!isAcknowledge">
+              <q-checkbox
+                dense
+                keep-color
+                color="primary"
+                v-model="isConsider"
+                label="ให้เลือกพิจารณา (อนุมัติ/ไม่อนุมัติ)"
+              />
+            </div>
+            <div v-if="!isAcknowledge">
+              <q-checkbox
+                dense
+                keep-color
+                color="primary"
+                v-model="isComment"
+                label="ให้แสดงความเห็นในเอกสาร"
+              />
+            </div>
+          </div>
+        </q-card-section>
 
         <q-separator />
 
         <q-card-actions align="right">
           <q-btn
-            :label="convertLabelBtn(operator)"
+            label="ส่งไปยังผู้บังคับบัญชา/ผู้มีอำนาจ"
             color="public"
             type="submit"
-            :disable="selected.length === 0"
+            :disable="
+              selected.length === 0 ||
+              (!isAcknowledge && !isConsider && !isComment)
+            "
           >
-            <q-tooltip>{{ convertLabelBtn(operator) }}</q-tooltip>
           </q-btn>
         </q-card-actions>
       </q-form>
diff --git a/src/components/Workflow/Main.vue b/src/components/Workflow/Main.vue
new file mode 100644
index 0000000..3451940
--- /dev/null
+++ b/src/components/Workflow/Main.vue
@@ -0,0 +1,172 @@
+<script setup lang="ts">
+import { onMounted, ref } from "vue";
+import { useQuasar } from "quasar";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+import DialogSelectPerson from "@/components/Workflow/DialogSelectPerson.vue";
+import DialogApprove from "@/components/Workflow/DialogApprove.vue";
+
+const $q = useQuasar();
+const { dialogConfirm } = useCounterMixin();
+
+const { id, sysName } = defineProps({
+  id: { type: String, require: true },
+  sysName: { type: String, require: true },
+});
+
+const state = ref<number>(1);
+const isChangeState = ref<boolean>(false);
+const isOperate = ref<boolean>(false);
+
+const rowsOperate = ref<any[]>([
+  {
+    fullName: "ชื่อนาม - สกุล",
+    comment: "ความเห็น",
+    position: " บริหาร - ต้น ",
+    status: "อนุมัติ",
+  },
+]);
+const modalSelectPerson = ref<boolean>(false);
+const modalApprove = ref<boolean>(false);
+
+const itemState = ref<any[]>([
+  {
+    stateNo: 1,
+    stateName: "Darft",
+  },
+  {
+    stateNo: 2,
+    stateName: "Operate",
+  },
+  {
+    stateNo: 3,
+    stateName: "Finish",
+  },
+]);
+
+function fetchData() {
+  console.log(id, sysName);
+  const data = {
+    stateNo: 1,
+    step: 1,
+    can_view: true,
+    can_update: true,
+    can_operate: true,
+    can_change_state: true,
+    can_delete: false,
+    can_cancel: false,
+  };
+
+  state.value = data.stateNo;
+  isChangeState.value = data.can_change_state;
+  isOperate.value = data.can_operate;
+}
+
+function onConfirmDraft() {
+  dialogConfirm($q, () => {
+    state.value++;
+  });
+}
+
+onMounted(() => {
+  fetchData();
+});
+</script>
+
+<template>
+  <q-card bordered class="row col-12">
+    <div class="bg-grey-1 q-pa-sm col-12 row items-center">
+      <div class="q-pl-sm text-weight-bold text-dark">Workflow</div>
+      <q-space />
+      <!-- <q-btn
+        @click.prevent="modalApprove = true"
+        label="DialogApprove"
+        color="public"
+      /> -->
+    </div>
+    <div class="col-12"><q-separator /></div>
+    <q-card-section>
+      <div class="q-px-lg q-py-md">
+        <q-timeline color="primary">
+          <q-timeline-entry
+            v-for="(step, index) in itemState"
+            :key="index"
+            :title="step.stateName"
+            :icon="
+              state === index + 1
+                ? 'mdi-pencil'
+                : state > index + 1
+                ? 'done'
+                : `mdi-numeric-${index + 1}`
+            "
+            :color="state < index + 1 ? 'grey-4' : ''"
+          >
+            <!-- Darft -->
+            <div
+              class="row q-col-gutter-sm"
+              v-if="step.stateName === 'Darft' && state === 1"
+            >
+              <div>
+                <q-btn
+                  v-if="isChangeState"
+                  @click.prevent="onConfirmDraft"
+                  label="Next Step"
+                  color="primary"
+                />
+              </div>
+            </div>
+
+            <!-- Operate -->
+            <div
+              class="q-col-gutter-sm"
+              v-if="step.stateName === 'Operate' && state > 1"
+            >
+              <div>
+                <q-list bordered separator style="min-width: 20vw">
+                  <q-item v-for="(item, index) in rowsOperate" :key="index">
+                    <q-item-section>
+                      <q-item-label
+                        >{{ item.fullName }}
+                        {{ `(${item.position})` }}</q-item-label
+                      >
+                      <q-item-label caption lines="2">{{
+                        item.comment
+                      }}</q-item-label>
+                    </q-item-section>
+
+                    <q-item-section side top>
+                      <q-item-label class="text-green">
+                        {{ item.status }}</q-item-label
+                      >
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </div>
+
+              <div v-if="isOperate && state === 2">
+                <q-btn
+                  @click.prevent="modalSelectPerson = true"
+                  label="ส่งไปผู้บังคับบัญชา/ผู้มีอำนาจ"
+                  color="public"
+                />
+              </div>
+
+              <div v-if="isChangeState && state === 2">
+                <q-btn
+                  @click.prevent="onConfirmDraft"
+                  label="Next Step"
+                  color="primary"
+                />
+              </div>
+            </div>
+          </q-timeline-entry>
+        </q-timeline>
+      </div>
+    </q-card-section>
+  </q-card>
+
+  <DialogSelectPerson v-model:modal="modalSelectPerson" />
+
+  <DialogApprove v-model:modal="modalApprove" />
+</template>
diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index 55f63d8..134edd8 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -9,13 +9,15 @@ import { useCounterMixin } from "@/stores/mixin";
 
 import type { QForm } from "quasar";
 
+import Workflow from "@/components/Workflow/Main.vue";
+
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
 const mixin = useCounterMixin();
 const { success, messageError, showLoader, hideLoader, dialogConfirm } = mixin;
 
-const id = ref<string>(""); //id path
+const id = ref<string>(route.params.id.toString()); //id path
 const files = ref<any>(); //ไฟล์
 const tranferOrg = ref<string>(""); //ชื่อหน่วยงานที่ขอโอนไป
 const noteReason = ref<string>(""); //เหตุผล
@@ -89,7 +91,6 @@ function fileOpen(url: string) {
  */
 onMounted(() => {
   if (route.params.id !== undefined) {
-    id.value = route.params.id.toString();
     fecthDataTransfer(id.value);
   }
 });
@@ -119,9 +120,9 @@ onMounted(() => {
         @validation-success="saveData"
       >
         <q-card bordered>
-          <div class="col-12 row q-col-gutter-md q-pa-md">
-            <div class="col-xs-12 col-sm-12">
-              <div class="col-12 row q-pa-sm q-col-gutter-sm">
+          <q-card-section>
+            <div class="row">
+              <div class="col-12 row q-col-gutter-sm">
                 <q-input
                   :class="
                     routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
@@ -134,6 +135,7 @@ onMounted(() => {
                   :readonly="routeName != 'addTransfer'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกหน่วยงานที่ขอโอนไป'}`]"
                 />
+
                 <q-input
                   :class="
                     routeName != 'addTransfer' ? 'col-12' : 'col-12 inputgreen'
@@ -147,6 +149,7 @@ onMounted(() => {
                   :readonly="routeName != 'addTransfer'"
                   :rules="[(val:string) => !!val || `${'กรุณากรอกเหตุผล'}`]"
                 />
+
                 <div class="col-12 row" v-if="routeName == 'addTransfer'">
                   <q-file
                     v-model="files"
@@ -163,6 +166,7 @@ onMounted(() => {
                       <q-icon name="attach_file" /> </template
                   ></q-file>
                 </div>
+
                 <div class="col-12 row" v-if="routeName != 'addTransfer'">
                   <q-card bordered flat class="full-width">
                     <div
@@ -191,23 +195,18 @@ onMounted(() => {
                     </q-list>
                   </q-card>
                 </div>
+
+                <!-- Workflow -->
+                <div class="col-12">
+                  <Workflow :id="id" :sys-name="`transfer`" />
+                </div>
               </div>
             </div>
-          </div>
+          </q-card-section>
+
           <q-separator v-if="routeName == 'addTransfer'" />
-          <q-card-actions
-            align="right"
-            class="row col-12"
-            v-if="routeName == 'addTransfer'"
-          >
-            <q-space />
-            <q-btn
-              unelevated
-              class="q-px-md items-center"
-              color="primary"
-              label="ยื่นเรื่องขอโอน"
-              type="onsubmit"
-            />
+          <q-card-actions align="right" v-if="routeName == 'addTransfer'">
+            <q-btn color="primary" label="ยื่นเรื่องขอโอน" type="onsubmit" />
           </q-card-actions>
         </q-card>
       </q-form>