diff --git a/src/modules/02_transfer/views/AddTransfer.vue b/src/modules/02_transfer/views/AddTransfer.vue
index f7c6d8e..4b1feb0 100644
--- a/src/modules/02_transfer/views/AddTransfer.vue
+++ b/src/modules/02_transfer/views/AddTransfer.vue
@@ -1,87 +1,297 @@
+<template>
+	<div class="col-12 row justify-center">
+		<div class="col-xs-12 col-sm-12 col-md-11">
+			<div class="toptitle text-white col-12 row items-center">
+				<q-btn icon="mdi-arrow-left" unelevated round dense flat color="primary" class="q-mr-sm" @click="router.go(-1)" />
+				<div v-if="routeName == 'addTransfer'">เพิ่มเรื่องขอโอน</div>
+				<div v-else>รายละเอียดเรื่องขอโอน</div>
+			</div>
+			<div class="col-12">
+				<q-card bordered>
+					<div class="col-12 row q-col-gutter-md q-pa-md">
+						<div class="col-xs-12 col-sm-8 row">
+							<q-card bordered flat>
+								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ข้อมูลบุคคล</div>
+								<q-separator />
+								<div class="col-12 row q-pa-sm q-col-gutter-sm">
+									<q-input class="col-12" dense outlined v-model="prefix" label="คำนำหน้านาม" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12" dense outlined v-model="name" label="ชื่อ - นามสกุล" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-xs-12 col-sm-6" dense outlined v-model="brithdate" label="วัน เดือน ปีเกิด" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-xs-12 col-sm-6" dense outlined v-model="address" label="ภูมิลําเนา (จังหวัดจากข้อมูลทะเบียนบ้าน)" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-xs-12 col-sm-6" dense outlined v-model="homeAddress" label="ที่อยู่ที่ติดต่อได้" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-xs-12 col-sm-6" dense outlined v-model="phone" label="หมายเลขโทรศัพท์ที่ติดต่อได้" :readonly="routeName != 'addTransfer'" />
+								</div>
+							</q-card>
+						</div>
+						<div class="col-xs-12 col-sm-4 row">
+							<q-card bordered flat>
+								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ข้อมูลการศึกษา</div>
+								<q-separator />
+								<div class="col-12 row q-pa-sm q-col-gutter-sm">
+									<q-input class="col-12" dense outlined v-model="edu" label="คุณวุฒิทางการศึกษา" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12" dense outlined v-model="highEdu" label="คุณวุฒิทางการศึกษาสูงสุด" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12" dense outlined v-model="eduEtc" label="คุณวุฒิทางการศึกษาอื่นๆหรือประกาศนียบัตรอื่นๆ" :readonly="routeName != 'addTransfer'" />
+								</div>
+							</q-card>
+						</div>
+					</div>
+					<div class="col-12 row q-col-gutter-md q-pa-md">
+						<div class="col-xs-12 col-sm-8 row">
+							<q-card bordered flat>
+								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ข้อมูลการดํารงตําแหน่ง</div>
+								<q-separator />
+								<div class="col-12 row q-pa-sm q-col-gutter-sm">
+									<q-input class="col-12" dense outlined v-model="typeServant" label="ประเภทข้าราชการ(สามัญ/ครู)" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12 col-sm-6" dense outlined v-model="position" label="ตําแหน่ง" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12 col-sm-6" dense outlined v-model="level" label="ระดับ" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12 col-sm-6" dense outlined v-model="positionNum" label="ตําแหน่งเลขที่" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12 col-sm-6" dense outlined v-model="groupOrga" label="ฝ่าย/กลุ่มงานที่สังกัด" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12 col-sm-6" dense outlined v-model="affiliation" label="ส่วนที่สังกัด (ถ้ามี)" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12 col-sm-6" dense outlined v-model="groupOrga" label="ส่วนราชการที่สังกัด" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12 col-sm-6" dense outlined v-model="groupOrga" label="หน่วยงานที่สังกัด" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12 col-sm-6" dense outlined v-model="groupOrga" label="อายุราชการ" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12 col-sm-6" dense outlined v-model="affiliation" label="อัตราเงินเดือน" :readonly="routeName != 'addTransfer'" />
+									<q-input class="col-12 col-sm-6" dense outlined v-model="groupOrga" label="เงินเพิ่มพิเศษ" :readonly="routeName != 'addTransfer'" />
+									<q-input
+										class="col-12"
+										dense
+										outlined
+										v-model="groupOrga"
+										label="ประวัติการดํารงตําแหน่ง (ดึงข้อมูลจากระบบทะเบียนประวัติในส่วนของการแต่งตั้งย้ายเลื่อน)"
+										:readonly="routeName != 'addTransfer'"
+									/>
+									<q-input class="col-12" dense outlined v-model="transfer" label=" ประวัติเกี่ยวกับวินัย" type="textarea" :readonly="routeName != 'addTransfer'" />
+								</div>
+								<div class="col-xs-6 col-sm-6 row">
+									<q-card bordered flat>
+										<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ตําแหน่ง ระดับ เลขที่ตําแหน่ง และสังกัดที่ขอโอน</div>
+										<q-separator />
+										<div class="col-12 row q-pa-sm q-col-gutter-sm">
+											<q-input class="col-xs-12 col-sm-6" dense outlined v-model="positionNew" label="ตำแหน่ง" :readonly="routeName != 'addTransfer'" />
+											<q-input class="col-xs-12 col-sm-6" dense outlined v-model="salaryNew" label="ระดับ" :readonly="routeName != 'addTransfer'" />
+											<q-input class="col-12 col-sm-6" dense outlined v-model="transfer" label="เลขที่ตําแหน่ง" :readonly="routeName != 'addTransfer'" />
+											<q-input class="col-12 col-sm-6" dense outlined v-model="note" label="สังกัดที่ขอโอน" :readonly="routeName != 'addTransfer'" />
+											<q-input class="col-12" dense outlined v-model="note" label="เหตุผลที่ขอโอน" type="textarea" :readonly="routeName != 'addTransfer'" />
+										</div>
+									</q-card>
+								</div>
+							</q-card>
+						</div>
+						<div class="col-xs-12 col-sm-4 row">
+							<q-card bordered flat>
+								<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">เอกสารหลักฐานที่แนบ</div>
+								<q-separator />
+								<div class="col-12 row q-pa-sm q-col-gutter-sm">
+									<q-file
+										class="col-xs-12 col-sm-12"
+										outlined
+										dense
+										v-model="fileEdu"
+										label="สําเนาหลักฐานการศึกษา (ปริญญาบัตรประกาศนียบัตร)"
+										hide-bottom-space
+										lazy-rules
+										:rules="[val => val || 'กรุณาเลือกไฟล์สําเนาหลักฐานการศึกษา (ปริญญาบัตรประกาศนียบัตร)']"
+									>
+										<template v-slot:prepend>
+											<q-icon name="attach_file" />
+										</template>
+									</q-file>
+									<q-file
+										class="col-xs-12 col-sm-12"
+										outlined
+										dense
+										v-model="fileKorkor1"
+										label="สําเนาประวัติราชการ (ก.ก.1)"
+										hide-bottom-space
+										lazy-rules
+										:rules="[val => val || 'กรุณาเลือกไฟล์สําเนาประวัติราชการ (ก.ก.1)']"
+									>
+										<template v-slot:prepend>
+											<q-icon name="attach_file" />
+										</template>
+									</q-file>
+									<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="สําเนาเอกสารหลักฐานอื่นๆ" hide-bottom-space lazy-rules>
+										<template v-slot:prepend>
+											<q-icon name="attach_file" />
+										</template>
+									</q-file>
+								</div>
+							</q-card>
+							<div class="col-xs-12 col-sm-12 row">
+								<q-card bordered flat>
+									<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">ความเห็น</div>
+									<q-separator />
+									<div class="col-12 row q-pa-sm q-col-gutter-sm">
+										<q-input
+											class="col-12 col-sm-12"
+											dense
+											outlined
+											v-model="note"
+											label="ความเห็นผู้บังคับบัญชาชั้นต้น (หัวหน้าฝ่าย/กลุ่มงาน)"
+											type="textarea"
+											:readonly="routeName != 'addTransfer'"
+										/>
+										<q-input
+											class="col-12 col-sm-12"
+											dense
+											outlined
+											v-model="note"
+											label="ความเห็นผู้บังคับบัญชาเหนือขึ้นไป (ผู้อํานวยการส่วน) (ถ้ามี)"
+											type="textarea"
+											:readonly="routeName != 'addTransfer'"
+										/>
+										<q-input
+											class="col-12 col-sm-12"
+											dense
+											outlined
+											v-model="note"
+											label="ความเห็นหัวหน้าส่วนราชการผู้ขอโอน (ผอ. กอง)"
+											type="textarea"
+											:readonly="routeName != 'addTransfer'"
+										/>
+									</div>
+								</q-card>
+							</div>
+						</div>
+					</div>
+					<q-separator />
+					<div class="col-xs-12 col-sm-12 row">
+						<q-card bordered flat>
+							<div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">เอกสารหลักฐาน</div>
+							<q-separator />
+							<div class="col-12 row q-pa-sm q-col-gutter-sm">
+								<q-file
+									class="col-xs-12 col-sm-12"
+									outlined
+									dense
+									v-model="fileEdu"
+									label="หนังสือถึงหน่วยงานที่รับโอน"
+									hide-bottom-space
+									lazy-rules
+									:rules="[val => val || 'กรุณาเลือกไฟล์หนังสือถึงหน่วยงานที่รับโอน']"
+								>
+									<template v-slot:prepend>
+										<q-icon name="attach_file" />
+									</template>
+								</q-file>
+								<q-file
+									class="col-xs-12 col-sm-12"
+									outlined
+									dense
+									v-model="fileKorkor1"
+									label="หนังสือถึงสกจ. เพื่อตรวจสอบพฤติการณ์ทางวินัยและภาระหนี้สิน (เงินกู้สวัสดิการข้าราชการ) ของข้าราชการ"
+									hide-bottom-space
+									lazy-rules
+									:rules="[val => val || 'กรุณาเลือกไฟล์หนังสือถึงสกจ. เพื่อตรวจสอบพฤติการณ์ทางวินัยและภาระหนี้สิน (เงินกู้สวัสดิการข้าราชการ) ของข้าราชการ']"
+								>
+									<template v-slot:prepend>
+										<q-icon name="attach_file" />
+									</template>
+								</q-file>
+								<q-file
+									class="col-xs-12 col-sm-12"
+									outlined
+									dense
+									v-model="fileEtc"
+									label="หนังสือถึงสพท. เพื่อตรวจสอบภาระผูกพันกับกรุงเทพมหานครเกี่ยวกับการลาศึกษาอบรมของข้าราชการ"
+									hide-bottom-space
+									lazy-rules
+								>
+									<template v-slot:prepend>
+										<q-icon name="attach_file" />
+									</template>
+								</q-file>
+								<q-file
+									class="col-xs-12 col-sm-12"
+									outlined
+									dense
+									v-model="fileEtc"
+									label="หนังสือถึงผู้จัดการสหกรณ์ออมทรัพย์กทม. เพื่อตรวจสอบหนี้สินและภาระผูกพันของข้าราชการ"
+									hide-bottom-space
+									lazy-rules
+								>
+									<template v-slot:prepend>
+										<q-icon name="attach_file" />
+									</template>
+								</q-file>
+								<q-file
+									class="col-xs-12 col-sm-12"
+									outlined
+									dense
+									v-model="fileEtc"
+									label="หนังสือสําคัญการโอนอัตราและจ่ายเงินเดือนสําหรับรับรองการจ่ายเงินเดือนครั้งสุดท้ายและโอนอัตราเงินเดือนตามตัวไปตั้งจ่าย"
+									hide-bottom-space
+									lazy-rules
+								>
+									<template v-slot:prepend>
+										<q-icon name="attach_file" />
+									</template>
+								</q-file>
+								<q-file
+									class="col-xs-12 col-sm-12"
+									outlined
+									dense
+									v-model="fileEtc"
+									label="แบบประเมินประสิทธิภาพและประสิทธิผลการปฏิบัติงานของข้าราชการพลเรือนสามัญ"
+									hide-bottom-space
+									lazy-rules
+								>
+									<template v-slot:prepend>
+										<q-icon name="attach_file" />
+									</template>
+								</q-file>
+								<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="หนังสือรับรองวันลา" hide-bottom-space lazy-rules>
+									<template v-slot:prepend>
+										<q-icon name="attach_file" />
+									</template>
+								</q-file>
+								<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="หนังสือขอโอนจากกทม. ถึงหน่วยงานที่ประสงค์จะโอน" hide-bottom-space lazy-rules>
+									<template v-slot:prepend>
+										<q-icon name="attach_file" />
+									</template>
+								</q-file>
+								<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="หนังสือตอบรับการโอนจากหน่วยงานที่ประสงค์จะโอน" hide-bottom-space lazy-rules>
+									<template v-slot:prepend>
+										<q-icon name="attach_file" />
+									</template>
+								</q-file>
+								<q-file class="col-xs-12 col-sm-12" outlined dense v-model="fileEtc" label="คําสั่งรับโอนจากหน่วยงานที่ประสงค์จะโอน" hide-bottom-space lazy-rules>
+									<template v-slot:prepend>
+										<q-icon name="attach_file" />
+									</template>
+								</q-file>
+							</div>
+						</q-card>
+					</div>
+					<q-separator />
+					<div class="row col-12 q-pa-sm" v-if="routeName == 'addTransfer'">
+						<q-space />
+						<q-btn unelevated dense class="q-px-md items-center" color="primary" label="ยื่นเรื่องขอโอน" @click="router.go(-1)" />
+					</div>
+				</q-card>
+			</div>
+		</div>
+	</div>
+</template>
 <script setup lang="ts">
-import type { QTableProps } from "quasar";
-import { ref } from "vue";
-import { useQuasar } from "quasar";
-import { useRouter } from "vue-router";
+import type { QTableProps } from "quasar"
+import { ref } from "vue"
+import { useQuasar } from "quasar"
+import { useRouter } from "vue-router"
 
-const router = useRouter();
-const $q = useQuasar();
+const router = useRouter()
+const $q = useQuasar()
 
-const edu = ref('');
-const academy = ref('');
-const position = ref('');
-const noPos = ref('');
-const level = ref('');
-const salary = ref('');
-const positionNew = ref('');
-const salaryNew = ref('');
-const transfer = ref('');
-const note = ref('');
+const edu = ref("")
+const academy = ref("")
+const position = ref("")
+const noPos = ref("")
+const level = ref("")
+const salary = ref("")
+const positionNew = ref("")
+const salaryNew = ref("")
+const transfer = ref("")
+const note = ref("")
 
 const routeName = router.currentRoute.value.name
 </script>
-<template>
-    <div class="col-12 row justify-center" >
-        <div class="col-xs-12 col-sm-12 col-md-11">
-            <div class="toptitle text-white col-12 row items-center">
-                <q-btn
-                icon="mdi-arrow-left"
-                unelevated
-                round
-                dense
-                flat
-                color="primary"
-                class="q-mr-sm"
-                @click="router.go(-1)"
-                />
-                <div v-if="routeName == 'addTransfer'">
-                    เพิ่มเรื่องขอโอน
-                </div>
-                <div v-else>
-                    รายละเอียดเรื่องขอโอน
-                </div>
-            </div>
-            <div class="col-12">
-                <q-card bordered>
-                    <div class="col-12 row q-col-gutter-md q-pa-md">
-                        <div class="col-xs-12 col-sm-6 row">
-                            <q-card bordered flat>
-                                <div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">
-                                    ข้อมูลเดิม
-                                </div>
-                                <q-separator />
-                                <div class="col-12 row q-pa-sm q-col-gutter-sm">
-                                    <q-input class="col-12" dense outlined v-model="edu" label="วุฒิการศึกษา" :readonly="routeName != 'addTransfer'" />
-                                    <q-input class="col-12" dense outlined v-model="academy" label="สถานศึกษา" :readonly="routeName != 'addTransfer'"/>
-                                    <q-input class="col-xs-12 col-sm-6" dense outlined v-model="position" label="ตำแหน่ง" :readonly="routeName != 'addTransfer'"/>
-                                    <q-input class="col-xs-12 col-sm-6" dense outlined v-model="noPos" label="ตำแหน่งเลขที่" :readonly="routeName != 'addTransfer'"/>
-                                    <q-input class="col-xs-12 col-sm-6" dense outlined v-model="level" label="อันดับ/ระดับ" :readonly="routeName != 'addTransfer'" />
-                                    <q-input class="col-xs-12 col-sm-6" dense outlined v-model="salary" label="เงินเดือน" :readonly="routeName != 'addTransfer'" />
-                                </div>
-                            </q-card>
-                        </div>
-                        <div class="col-xs-12 col-sm-6 row">
-                            <q-card bordered flat>
-                                <div class="q-pa-xs bg-grey-2 row items-center q-py-sm q-px-md justify-center text-bold">
-                                    ข้อมูลใหม่
-                                </div>
-                                <q-separator />
-                                <div class="col-12 row q-pa-sm q-col-gutter-sm">
-                                    <q-input class="col-xs-12 col-sm-6" dense outlined v-model="positionNew" label="ตำแหน่ง" :readonly="routeName != 'addTransfer'"/>
-                                    <q-input class="col-xs-12 col-sm-6" dense outlined v-model="salaryNew" label="เงินเดือน" :readonly="routeName != 'addTransfer'" />
-                                    <q-input class="col-12" dense outlined v-model="transfer" label="โอนไปสังกัด" type="textarea" :readonly="routeName != 'addTransfer'" />
-                                    <q-input class="col-12" dense outlined v-model="note" label="หมายเหตุ" :readonly="routeName != 'addTransfer'" />
-                                </div>
-                            </q-card>
-                        </div>
-                    </div>
-                    <q-separator/>
-                    <div class="row col-12 q-pa-sm"  v-if="routeName == 'addTransfer'">
-                        <q-space />
-                        <q-btn unelevated dense class="q-px-md" color="primary" label="ยื่นเรื่องขอโอน" @click="router.go(-1)"/>
-                    </div>
-                </q-card>
-            </div>
-        </div>
-    </div>
-</template>
\ No newline at end of file