diff --git a/src/api/scholarship/api.scholarship.ts b/src/api/scholarship/api.scholarship.ts
new file mode 100644
index 0000000..c921010
--- /dev/null
+++ b/src/api/scholarship/api.scholarship.ts
@@ -0,0 +1,9 @@
+import env from "../index";
+
+const development = `${env.API_URI}/development`;
+
+
+export default {
+  developmentScholarship: `${development}/scholarship`,
+
+};
diff --git a/src/app.config.ts b/src/app.config.ts
index 20be1e7..4d711c9 100644
--- a/src/app.config.ts
+++ b/src/app.config.ts
@@ -9,6 +9,7 @@ import message from "./api/api.message";
 import evaluate from "./api/evaluate/api.evaluate";
 import support from "./api/support/api.support";
 import org from "./api/org/api.org";
+import scholarship from "./api/scholarship/api.scholarship";
 
 const API = {
   ...testtest,
@@ -19,6 +20,7 @@ const API = {
   ...appeal,
   ...support,
   ...org,
+  ...scholarship,
 };
 
 export default {
diff --git a/src/modules/09_scholarship/router.ts b/src/modules/09_scholarship/router.ts
index 2beac10..ca4af1c 100644
--- a/src/modules/09_scholarship/router.ts
+++ b/src/modules/09_scholarship/router.ts
@@ -3,7 +3,7 @@
  */
 
 const scholarshipPage = () => import("@/modules/09_scholarship/views/main.vue");
-
+const scholarshipDetail = () => import('@/modules/09_scholarship/views/detail.vue')
 export default [
   {
     path: "/scholarship",
@@ -14,4 +14,13 @@ export default [
       Key: [9],
     },
   },
+  {
+    path: "/scholarship/:id",
+    name: "scholarshipDetail",
+    component: scholarshipDetail,
+    meta: {
+      Auth: true,
+      Key: [9],
+    },
+  },
 ];
diff --git a/src/modules/09_scholarship/views/detail.vue b/src/modules/09_scholarship/views/detail.vue
new file mode 100644
index 0000000..50206c1
--- /dev/null
+++ b/src/modules/09_scholarship/views/detail.vue
@@ -0,0 +1,393 @@
+<script setup lang="ts">
+import { onMounted, reactive, ref } from "vue";
+import { useRoute, useRouter } from "vue-router";
+
+import { useCounterMixin } from "@/stores/mixin";
+import { useQuasar } from "quasar";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import type { DataOptions } from '@/modules/09_scholarship/interface/index/Main'
+const route = useRoute();
+const $q = useQuasar();
+const mixin = useCounterMixin();
+const { showLoader, hideLoader, messageError ,date2Thai} = mixin;
+const router = useRouter();
+
+const id = ref<string>(route.params.id.toLocaleString());
+const budgetSourceOp = ref<DataOptions[]>([
+  { id: "BKK", name: "งบประมาณ กทม." },
+  { id: "HOSPITAL", name: "เงินบำรุงโรงพยาบาล" },
+  { id: "FUND", name: "เงินกองทุน" },
+  { id: "SUBSIDY", name: "เงินอุดหนุน" },
+  { id: "OTHER", name: "เงินอื่น ๆ" },
+]);
+const dataPerson = reactive({
+  id: "",
+  citizenId: "",
+  name: "",
+  position: "",
+  type: "",
+  level: "",
+  positionSide: "",
+  org: "-",
+
+  planType: "",
+
+  scholarshipYear: null,
+  budgetSource: "",
+  budgetApprove: null,
+  isNoUseBudget: false,
+  bookNo: "",
+  bookNoDate: null,
+  bookApproveDate: null,
+  useOfficialTime: false,
+  changeDetail: "",
+});
+
+function getDetail() {
+  showLoader();
+  http
+    .get(config.API.developmentScholarship + `/${id.value}`)
+    .then((res) => {
+      const data = res.data.result;
+      dataPerson.citizenId = data.citizenId;
+      dataPerson.name = `${data.prefix}${data.firstName} ${data.lastName}`;
+      dataPerson.position = data.position;
+      dataPerson.type = data.posTypeName;
+      dataPerson.level = data.posLevelName;
+      dataPerson.positionSide = data.posExecutive;
+      dataPerson.org = data.org; // รอ API
+      dataPerson.planType = data.planType;
+
+      dataPerson.scholarshipYear = data.scholarshipYear 
+      dataPerson.budgetSource = data.budgetSource 
+      dataPerson.budgetApprove = data.budgetApprove 
+      dataPerson.isNoUseBudget = data.isNoUseBudget 
+      dataPerson.bookNo = data.bookNo 
+      dataPerson.bookNoDate = data.bookNoDate 
+      dataPerson.bookApproveDate = data.bookApproveDate 
+      dataPerson.useOfficialTime = data.useOfficialTime 
+      dataPerson.changeDetail = data.changeDetail 
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+onMounted(() => {
+  getDetail();
+});
+</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.push(`/scholarship`)"
+        />
+        รายละเอียดทุนการศึกษา/ฝึกอบรม
+      </div>
+      <div class="col-12">
+        <q-card bordered class="q-pa-md">
+          <q-card flat style="border-radius: 5px; border: 1px solid #d6dee1">
+            <div class="bg-grey-2 q-pa-md text-body2 text-weight-bold">
+              ข้อมูลราชการ
+            </div>
+            <q-separator />
+            <q-card-section>
+              <div class="row">
+                <div class="col">
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-4 text-grey">เลขประจำตัวประชาชน</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.citizenId ? dataPerson.citizenId : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">ชื่อ-นามสกุล</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.name ? dataPerson.name : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">ตำแหน่ง</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.position ? dataPerson.position : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">ประเภท</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.type ? dataPerson.type : "-" }}
+                    </div>
+                  </div>
+                </div>
+                <div class="col">
+                  <div class="row q-col-gutter-sm">
+                    <div class="col-4 text-grey">ระดับตำแหน่ง</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.level ? dataPerson.citizenId : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">ตำแหน่งทางการบริหาร</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.positionSide ? dataPerson.name : "-" }}
+                    </div>
+                    <div class="col-4 text-grey">หน่วยงานที่สังกัด</div>
+                    <div class="col-8 text-weight-medium">
+                      {{ dataPerson.org ? dataPerson.org : "-" }}
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </q-card-section>
+          </q-card>
+          <div class="row q-col-gutter-sm q-mt-md">
+            <div class="col-12">
+              <q-radio
+                v-model="dataPerson.planType"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="INPLAN"
+                label="ในแผนฯ"
+                dense
+                disable
+              />
+              <q-radio
+                v-model="dataPerson.planType"
+                checked-icon="task_alt"
+                unchecked-icon="panorama_fish_eye"
+                val="OUTPLAN"
+                label="นอกแผนฯ"
+                dense
+                disable
+                class="q-pl-sm"
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.scholarshipYear"
+                :locale="'th'"
+                autoApply
+                year-picker
+                :enableTimePicker="false"
+                readonly
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    readonly
+                    outlined
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.scholarshipYear
+                        ? Number(dataPerson.scholarshipYear) + 543
+                        : null
+                    "
+                    :label="`${'ปีงบประมาณที่ได้รับทุน'}`"
+                    hide-bottom-space
+                    :rules="[
+                  (val: string) => !!val || `${'กรุณาเลือกปีงบประมาณที่ได้รับทุน'}`,
+                ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <q-select
+                dense
+                readonly
+                outlined
+                class="inputgreen"
+                label="แหล่งงบประมาณ"
+                hide-bottom-space
+                v-model="dataPerson.budgetSource"
+                :options="budgetSourceOp"
+                option-label="name"
+                option-value="id"
+                emit-value
+                map-options
+                :rules="[
+              (val: string) =>
+                !!val || `${'กรุณาเลือกแหล่งงบประมาณ'}`,
+            ]"
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+              readonly
+                dense
+                outlined
+                hide-bottom-space
+                class="inputgreen"
+                v-model="dataPerson.budgetApprove"
+                label="งบประมาณที่ได้รับอนุมัติตลอดหลักสูตร"
+                mask="###,###,###,###,###,###"
+                reverse-fill-mask
+                :rules="[
+              (val: string) =>
+                !!val || `${'กรุณากรอกงบประมาณที่ได้รับอนุมัติตลอดหลักสูตร'}`,
+            ]"
+              />
+            </div>
+            <div class="col-3">
+              <q-checkbox
+                keep-color
+                color="primary"
+                disable
+                v-model="dataPerson.isNoUseBudget"
+                label="ไม่ใช้งบประมาณ"
+              />
+            </div>
+            <div class="col-3">
+              <q-input
+                dense
+                outlined
+                readonly
+                class="inputgreen"
+                v-model="dataPerson.bookNo"
+                label="เลขที่หนังสิออนุมัติ"
+                hide-bottom-space
+                :rules="[
+              (val: string) =>
+                !!val || `${'กรุณากรอกเลขที่หนังสิออนุมัติ'}`,
+            ]"
+              />
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.bookNoDate"
+                :locale="'th'"
+                autoApply
+                readonly
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    readonly
+                    class="inputgreen"
+                    :model-value="
+                      dataPerson.bookNoDate
+                        ? date2Thai(dataPerson.bookNoDate)
+                        : null
+                    "
+                    :label="`${'ลงวันที่'}`"
+                    hide-bottom-space
+                    :rules="[
+                  (val: string) =>
+                    !!val || `${'กรุณาเลือกวันที่'}`,
+                ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <datepicker
+                menu-class-name="modalfix"
+                v-model="dataPerson.bookApproveDate"
+                :locale="'th'"
+                readonly
+                autoApply
+                :enableTimePicker="false"
+              >
+                <template #year="{ year }">{{ year + 543 }}</template>
+                <template #year-overlay-value="{ value }">{{
+                  parseInt(value + 543)
+                }}</template>
+                <template #trigger>
+                  <q-input
+                    dense
+                    outlined
+                    class="inputgreen"
+                    readonly
+                    :model-value="
+                      dataPerson.bookApproveDate
+                        ? date2Thai(dataPerson.bookApproveDate)
+                        : null
+                    "
+                    :label="`${'หนังสืออนุมัติเมื่อวันที่'}`"
+                    hide-bottom-space
+                    :rules="[
+                  (val: string) =>
+                    !!val || `${'กรุณาเลือกวันที่หนังสืออนุมัติเมื่อวันที่'}`,
+                ]"
+                  >
+                    <template v-slot:prepend>
+                      <q-icon
+                        name="event"
+                        class="cursor-pointer"
+                        style="color: var(--q-primary)"
+                      >
+                      </q-icon>
+                    </template>
+                  </q-input>
+                </template>
+              </datepicker>
+            </div>
+            <div class="col-3">
+              <q-checkbox
+                keep-color
+                disable
+                color="primary"
+                v-model="dataPerson.useOfficialTime"
+                label="ใช้เวลาราชการ"
+              />
+            </div>
+            <div class="col-12">
+              <q-input
+                outlined
+                dense
+                class="inputgreen"
+                readonly
+                v-model="dataPerson.changeDetail"
+                label="เปลี่ยนแปลงรายละเอียด"
+                rows="3"
+                hide-bottom-space
+                type="textarea"
+                :rules="[
+              (val: string) =>
+                !!val || `${'กรุณากรอกเปลี่ยนแปลงรายละเอียด'}`,
+            ]"
+              />
+            </div>
+          </div>
+        </q-card>
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/src/modules/09_scholarship/views/main.vue b/src/modules/09_scholarship/views/main.vue
index bc9a495..9ddc4cc 100644
--- a/src/modules/09_scholarship/views/main.vue
+++ b/src/modules/09_scholarship/views/main.vue
@@ -1,17 +1,22 @@
 <script setup lang="ts">
-import { ref, onMounted,watch } from "vue";
+import { ref, onMounted, watch } from "vue";
 import { useRouter } from "vue-router";
-import type { QTableProps } from "quasar";
+import { useQuasar, type QTableProps } from "quasar";
 
 import { useCounterMixin } from "@/stores/mixin";
 
 import type { DataOptions } from "@/modules/09_scholarship/interface/index/Main";
+
+import http from "@/plugins/http";
+import config from "@/app.config";
 const mixin = useCounterMixin();
-const { date2Thai } = mixin;
+const { date2Thai, showLoader, hideLoader, messageError } = mixin;
 const router = useRouter();
 
+const $q = useQuasar();
 const filterKeyword = ref<string>("");
 
+const profilId = ref<string>('')
 const currentPage = ref<number>(1);
 const maxPage = ref<number>(1);
 const page = ref<number>(1);
@@ -51,126 +56,43 @@ const pagination = ref({
 
 const columns = ref<QTableProps["columns"]>([
   {
-    name: "citizenId",
+    name: "scholarshipYear",
     align: "left",
-    label: "เลขประจำตัวประชาชน ",
+    label: "ปีงบประมาณที่ได้รับทุน ",
     sortable: true,
-    field: "citizenId",
-    headerStyle: "font-size: 14px",
+    field: "scholarshipYear",
+    headerStyle: "font-size: 14px ;width:20%",
     style: "font-size: 14px",
   },
   {
-    name: "fullName",
+    name: "scholarshipType",
     align: "left",
-    label: "ชื่อ-นามสกุล",
+    label: "ประเภททุน",
     sortable: true,
-    field: "fullName",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-
-  {
-    name: "position",
-    align: "left",
-    label: "ตำแหน่ง",
-    sortable: true,
-    field: "position",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posType",
-    align: "left",
-    label: "ประเภทตำแหน่ง",
-    sortable: true,
-    field: "posType",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posLevel",
-    align: "left",
-    label: "ระดับตำแหน่ง",
-    sortable: true,
-    field: "posLevel",
-    headerStyle: "font-size: 14px",
-    style: "font-size: 14px",
-  },
-  {
-    name: "posExecutive",
-    align: "left",
-    label: "ตำแหน่งทางการบริหาร",
-    sortable: true,
-    field: "posExecutive",
+    field: "scholarshipType",
     headerStyle: "font-size: 14px",
     style: "font-size: 14px",
   },
 ]);
-const visibleColumns = ref<string[]>([
-  "citizenId",
-  "fullName",
-  "position",
-  "posType",
-  "posLevel",
-  "posExecutive",
-]);
+const visibleColumns = ref<string[]>(["scholarshipYear", "scholarshipType"]);
 
 /** ดึงข้อมูล */
 function getData() {
-  const data = [
-    {
-      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d1",
-      citizenId: "5555512312321",
-      fullName: "นายณัฐพงศ์ ดิษยบุตร",
-      position: null,
-      posType: null,
-      posLevel: null,
-      posExecutive: null,
-    },
-    {
-      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d2",
-      citizenId: "0000000000021",
-      fullName: "นางสาวชญาน์นันท์ วรดรเกรียรติวรา",
-      position: "นักจัดการงานทั่วไป",
-      posType: "ทั่วไป",
-      posLevel: "ชำนาญงาน",
-      posExecutive: "ผู้ช่วยหัวหน้าสำนักงาน",
-    },
-    {
-      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d3",
-      citizenId: "0000000000010",
-      fullName: "นางจิตรา ทันนิเทศ",
-      position: "เจ้าพนักงานธุรการ",
-      posType: "ทั่วไป",
-      posLevel: "ปฏิบัติงาน",
-      posExecutive: "นักการช่าง",
-    },
-    {
-      id: "e81c39e3-c6d7-4761-8807-a0f1cfe4d4d9",
-      citizenId: "0000000000016",
-      fullName: "นางสาวปุณณภาภัค เจรจาปรีดี",
-      position: "นักจัดการทั่วไป",
-      posType: "ทั่วไป",
-      posLevel: "ชำนาญงาน",
-      posExecutive: null,
-    },
-  ];
-  rows.value = data;
-  // showLoader();
-  // await http
-  //   .get(config.API.orgPrefix)
-  //   .then(async (res) => {
-  //   })
-  //   .catch((err) => {
-  //     messageError($q, err);
-  //   })
-  //   .finally(() => {
-  //     hideLoader();
-  //   });
+  http
+  .get(config.API.developmentScholarship+`/user/${profilId.value}`)
+  .then((res)=>{
+    rows.value = res.data.result
+  }).catch((e)=>{
+    messageError($q,e)
+  }).finally(()=>{
+
+  })
+
+
 }
 
 function onEdit(id: string) {
-  router.push(`/KPI/${id}`);
+  router.push(`/scholarship/${id}`);
 }
 
 watch(
@@ -190,8 +112,37 @@ watch(
   }
 );
 
+function getProfileId() {
+  showLoader();
+  http
+    .get(config.API.profilePosition())
+    .then((res) => {
+      profilId.value = res.data.result.profileId
+      getData()
+    })
+    .catch((e) => {
+      messageError($q, e);
+    })
+    .finally(() => {
+      hideLoader();
+    });
+}
+
+function convertType(val: string) {
+    switch (val) {
+      case "DOMESTICE":
+        return "การศึกษาในประเทศ";
+      case "NOABROAD":
+        return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่ไม่มีการไปต่างประเทศ)";
+      case "ABROAD":
+        return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรที่มีการไปต่างประเทศ)";
+      case "EXECUTIVE":
+        return "ฝึกอบรมในประเทศที่ส่งไปพัฒนากับหน่วยวงานภายนอก (หลักสูตรประเภทนักบริหาร)";
+    }
+  }
+
 onMounted(async () => {
-  getData();
+  getProfileId();
 });
 </script>
 
@@ -335,7 +286,6 @@ onMounted(async () => {
                 <q-th v-for="col in props.cols" :key="col.name" :props="props">
                   <span class="text-weight-medium">{{ col.label }}</span>
                 </q-th>
-                <q-th auto-width />
               </q-tr>
             </template>
             <template v-slot:body="props">
@@ -345,8 +295,11 @@ onMounted(async () => {
                   :key="col.id"
                   @click="onEdit(props.row.id)"
                 >
-                  <div v-if="col.name == 'createDate'">
-                    {{ col.value ? date2Thai(col.value) : "-" }}
+                  <div v-if="col.name == 'scholarshipYear'">
+                    {{ col.value ? col.value + 543 : "-" }}
+                  </div>
+                  <div v-else-if="col.name == 'scholarshipType'">
+                    {{ col.value ? convertType(col.value): "-" }}
                   </div>
                   <div v-else>
                     {{ col.value ? col.value : "-" }}