diff --git a/src/modules/15_development/components/BasicInfo.vue b/src/modules/15_development/components/BasicInfo.vue
index 73d856f11..1a6ea723f 100644
--- a/src/modules/15_development/components/BasicInfo.vue
+++ b/src/modules/15_development/components/BasicInfo.vue
@@ -2,27 +2,32 @@
 import { onMounted, reactive, ref } from "vue";
 import { useQuasar } from "quasar";
 
+import type { FormBasicinfo } from "@/modules/15_development/interface/request/Main";
+
 import { useCounterMixin } from "@/stores/mixin";
 
 const $q = useQuasar();
 const { showLoader, hideLoader, dialogConfirm } = useCounterMixin();
 
-onMounted(() => {
-  console.log("ข้อมูลเบื้องต้น");
-});
-
-const formData = reactive<any>({
+const formData = reactive<FormBasicinfo>({
   year: new Date().getFullYear(),
-  org: "",
+  org: "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
   projectName: "",
   reason: "",
   objective: "",
 });
 
-const options = ref<any>(["Google", "Facebook", "Twitter", "Apple", "Oracle"]);
+const options = ref<any>([
+  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานครกองบริหารทั้วไป",
+  "สำนักงานคณะกรรมการข้าราชการกรุงเทพมหานคร",
+]);
 function onSubmit() {
   dialogConfirm($q, () => {});
 }
+
+onMounted(() => {
+  console.log("ข้อมูลเบื้องต้น");
+});
 </script>
 <template>
   <q-form greedy @submit.prevent @validation-success="onSubmit">
diff --git a/src/modules/15_development/components/MainTab.vue b/src/modules/15_development/components/MainTab.vue
index f486e3082..a1b7165f1 100644
--- a/src/modules/15_development/components/MainTab.vue
+++ b/src/modules/15_development/components/MainTab.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref } from "vue";
 import { useRouter, useRoute } from "vue-router";
 
 import BasicInfo from "@/modules/15_development/components/BasicInfo.vue";
diff --git a/src/modules/15_development/components/Table.vue b/src/modules/15_development/components/Table.vue
deleted file mode 100644
index 1d46c384a..000000000
--- a/src/modules/15_development/components/Table.vue
+++ /dev/null
@@ -1,5 +0,0 @@
-<script setup lang="ts"></script>
-
-<template></template>
-
-<style lang="scss" scoped></style>
diff --git a/src/modules/15_development/components/Target.vue b/src/modules/15_development/components/Target.vue
index 96797c035..eb8b87105 100644
--- a/src/modules/15_development/components/Target.vue
+++ b/src/modules/15_development/components/Target.vue
@@ -3,6 +3,10 @@ import { onMounted, ref, reactive } from "vue";
 import { useQuasar } from "quasar";
 
 import type { QTableProps } from "quasar";
+import type {
+  FormGroupTarget,
+  FormGroupRelate,
+} from "@/modules/15_development/interface/request/Main";
 
 import DialogHeader from "@/components/DialogHeader.vue";
 
@@ -80,12 +84,16 @@ const rows3 = ref<any>([
   },
 ]);
 const rows4 = ref<any>([{ related: "เจ้าหน้าที่", amount: 10 }]);
-const options = ref<any>(["Google", "Facebook", "Twitter", "Apple", "Oracle"]);
+const options = ref<any>([
+  "ข้าราชการกรุงเทพมหานคร",
+  "ข้าราชการกรุงเทพมหานครสามัญ",
+  "เจ้าหน้าที่ดำเนิดการ",
+]);
 
 const modalGroupTarget = ref<boolean>(false);
 const modalRelate = ref<boolean>(false);
 
-const formGroupTarget = reactive({
+const formGroupTarget = reactive<FormGroupTarget>({
   groupTarget: "",
   groupTargetSub: "",
   position: "",
@@ -95,7 +103,7 @@ const formGroupTarget = reactive({
   amount: null,
 });
 
-const formGroupRelate = reactive({
+const formGroupRelate = reactive<FormGroupRelate>({
   relate: "",
   amount: null,
 });
diff --git a/src/modules/15_development/interface/request/Main.ts b/src/modules/15_development/interface/request/Main.ts
new file mode 100644
index 000000000..d96762933
--- /dev/null
+++ b/src/modules/15_development/interface/request/Main.ts
@@ -0,0 +1,34 @@
+interface FormQueryProject {
+  year: number;
+  keyword: string;
+}
+
+interface FormBasicinfo {
+  year: number;
+  org: string;
+  projectName: string;
+  reason: string;
+  objective: string;
+}
+
+interface FormGroupTarget {
+  groupTarget: string;
+  groupTargetSub: string;
+  position: string;
+  posType: string;
+  level: string;
+  type: string;
+  amount: number | null;
+}
+
+interface FormGroupRelate {
+  relate: string;
+  amount: number | null;
+}
+
+export type {
+  FormQueryProject,
+  FormBasicinfo,
+  FormGroupTarget,
+  FormGroupRelate,
+};
diff --git a/src/modules/15_development/interface/response/Main.ts b/src/modules/15_development/interface/response/Main.ts
index a2567bc87..e69de29bb 100644
--- a/src/modules/15_development/interface/response/Main.ts
+++ b/src/modules/15_development/interface/response/Main.ts
@@ -1,6 +0,0 @@
-interface DataOption {
-  id: string;
-  name: string;
-}
-
-export type { DataOption };
diff --git a/src/modules/15_development/store/developmentStore.ts b/src/modules/15_development/store/developmentStore.ts
index 74daba4ef..bd4186d1b 100644
--- a/src/modules/15_development/store/developmentStore.ts
+++ b/src/modules/15_development/store/developmentStore.ts
@@ -1,11 +1,13 @@
 import { defineStore } from "pinia";
 import { reactive } from "vue";
 
+import type { FormQueryProject } from "@/modules/15_development/interface/request/Main";
+
 // store
 export const useDevelopmentDataStore = defineStore(
   "developmentDataStore",
   () => {
-    const formFilter = reactive({
+    const formFilter = reactive<FormQueryProject>({
       year: new Date().getFullYear(),
       keyword: "",
     });