diff --git a/src/modules/05_placement/components/Main.vue b/src/modules/05_placement/components/Main.vue
index b01465ec0..a0af21bff 100644
--- a/src/modules/05_placement/components/Main.vue
+++ b/src/modules/05_placement/components/Main.vue
@@ -115,7 +115,7 @@ const rows = ref<FormPlacementMainData[]>([
     examOrder: 0,
     fiscalYear: 0,
     numberOfCandidates: 0,
-    examTypeValue:"",
+    examTypeValue: "",
     examTypeName: "",
     accountStartDate: "",
     accountExpirationDate: "",
@@ -126,23 +126,21 @@ let OriginalData = ref<FormPlacementMainData[]>([]);
 let UpdataData = ref<FormPlacementMainData[]>([]);
 
 const OriginalDataFetch = async (year: number) => {
-  await http
-    .get(config.API.MainDetail(year)) // ส่งปีที่เลือกมาเป็นอาร์กิวเมนต์ในการเรียก API
-    .then(async (res: any) => {
-      console.log("🚀 ~ file: Main.vue:160 ~ .then ~ res:", res.data.result);
-      await DataStore.DataMain(res.data.result);
-      OriginalData.value = await DataStore.DataMainOrig;
-      UpdataData.value = OriginalData.value;
-    })
-    .catch((e: any) => {
-      messageError($q, e);
-    })
-    .finally(async () => {});
+  try {
+    const response = await http.get(config.API.MainDetail(year));
+    const apiData = response.data.result;
+    console.log("🚀 ~ file: Main.vue:160 ~ .then ~ res:", apiData);
+    await DataStore.DataMain(apiData);
+    OriginalData.value = await DataStore.DataMainOrig;
+    UpdataData.value = OriginalData.value;
+  } catch (error) {
+    messageError($q, error);
+  }
 };
 
 onMounted(async () => {
-  await fiscalYearFilter(); // เรียกใช้ await เพื่อรอให้ fiscalYearFilter() เสร็จสิ้น
-  await OriginalDataFetch(fiscalyear.value); // ส่งค่าปีที่เลือกจาก fiscalyear เป็นอาร์กิวเมนต์ให้กับ OriginalDataFetch()
+  await fiscalYearFilter();
+  await OriginalDataFetch(fiscalyear.value);
   examTimeFilter();
   await examTypeFilter();
   expiredAccountFilter();
@@ -151,13 +149,12 @@ onMounted(async () => {
 
 // ดูรายการสอบแข่งขัน หน้าต่อไป
 const redirectToPage = (examId?: number) => {
-  // router.push({ name: 'placementDetail'});
   router.push(`/placement/pass/${examId}`);
 };
 
-// เลือกปีงบประมาณ
+//-------------------|เลือกปีงบประมาณ|-----------------------//
 const fiscalyear = ref<number>(0);
-const fiscalyearOP = reactive<DataOption[]>([{ id: "", name: "ทั้งหมด" }]);
+const fiscalyearOP = reactive<DataOption[]>([{ id: null, name: "ทั้งหมด" }]);
 const addedfiscalYearValues: number[] = [];
 const fiscalYearFilter = async () => {
   let maxYear = 0; // เพิ่มตัวแปร maxYear
@@ -182,22 +179,19 @@ const fiscalYearFilter = async () => {
     });
 };
 
-// เลือกปีงบประมาณตาม API
+//-------------------|เลือกปีงบประมาณตาม API|--------------------//
 const searchfiscalyear = async () => {
-  console.log("Input value changed:", fiscalyear.value);
   // API
   await http
     .get(config.API.yearOptions())
-    .then((res: any) => {
-      console.log("🚀date", res);
-    })
+    .then((res: any) => {})
     .catch((e: any) => {
       messageError($q, e);
     })
     .finally(async () => {});
 };
 
-// ค้นหาในตาราง
+//-------------------|ค้นหาในตาราง|-----------------//
 const filterKeyword = ref<string>("");
 const filterRef = ref<any>(null);
 const resetFilter = () => {
@@ -216,37 +210,40 @@ const visibleColumns = ref<any[]>([
   "examTypeName",
   "accountStartDate",
   "accountExpirationDate",
-]); //ค้นหา คอลัมน์ คอลัมน์ที่แสดง
+]);
+
+//-------------------|ครั้งที่สอบ|------------------------------//
+const examTime = ref<number | string>("all");
+const examTimeOP = reactive<DataOption[]>([]);
+const addedExamTimeValues: Set<number> = new Set();
 
-// ครั้งที่สอบ
-const examTime = ref<number | null>(null);
-const examTimeOP = ref<number[]>([]);
 const examTimeFilter = async () => {
-  for (let data of OriginalData.value) {
-    if (!examTimeOP.value.includes(data.examOrder)) {
-      examTimeOP.value.push(data.examOrder);
+  examTimeOP.push({ id: "all", name: "ทั้งหมด" });
+
+  for (const data of OriginalData.value) {
+    const examOrder = data.examOrder;
+    if (examOrder !== null && !addedExamTimeValues.has(examOrder)) {
+      examTimeOP.push({ id: examOrder.toString(), name: examOrder.toString() });
+      addedExamTimeValues.add(examOrder);
     }
   }
-  examTimeOP.value.sort((a, b) => a - b); // เรียงลำดับ
+  examTimeOP.sort((a, b) => {
+    if (a.id === "all") return -1; // ให้ตัวเลือก "ทั้งหมด" อยู่ด้านหน้า
+    if (b.id === "all") return 1;
+    return Number(a.id) - Number(b.id);
+  }); // เรียงลำดับตาม id ที่แปลงเป็นตัวเลข
 };
 
 // ประเภทการสอบ
-
-const examType = ref<string | null>("");
-const examTypeOP = reactive<DataOption[]>([
-  { id: "", name: "ทั้งหมด" },
-]);
+const examType = ref<string | null>("all");
+const examTypeOP = ref<DataOption[]>([{ id: "all", name: "ทั้งหมด" }]);
 const addedExamTypeValues: Set<string> = new Set();
-  const examTypeFilter = async () => {
+const examTypeFilter = () => {
   for (const data of OriginalData.value) {
     const examTypeName = data.examTypeName;
     const examTypeValue = data.examTypeValue;
-
-    if (
-      examTypeName &&
-      !addedExamTypeValues.has(examTypeName)
-    ) {
-      examTypeOP.push({
+    if (examTypeName && !addedExamTypeValues.has(examTypeName)) {
+      examTypeOP.value.push({
         id: examTypeValue,
         name: examTypeName,
       });
@@ -254,8 +251,7 @@ const addedExamTypeValues: Set<string> = new Set();
     }
   }
 };
-
-
+//--------------|ฟิลเตอร์|--------------------------------------//
 const searchFilterTable = async () => {
   if (examType.value !== undefined && examType.value !== null) {
     await DataStore.DataUpdateMain(
@@ -267,7 +263,7 @@ const searchFilterTable = async () => {
   }
 };
 
-// บัญชีหมดอายุ
+//----------------|บัญชีหมดอายุ|-----------------------------//
 const expiredAccount = ref<boolean>(false);
 const expiredAccountFilter = async () => {
   const currentDate = new Date();
@@ -382,9 +378,9 @@ const paginationLabel = (start: string, end: string, total: string) => {
               dense
               emit-value
               map-options
-              option-label="examTypeName"
+              option-label="name"
               :options="examTypeOP"
-              option-value="examTypeValue"
+              option-value="id"
               lazy-rules
               hide-bottom-space
               :readonly="false"
diff --git a/src/modules/05_placement/store.ts b/src/modules/05_placement/store.ts
index cc7bd90b5..3f51227be 100644
--- a/src/modules/05_placement/store.ts
+++ b/src/modules/05_placement/store.ts
@@ -104,33 +104,33 @@ export const usePlacementDataStore = defineStore("placement", () => {
     (DataMainYear.value = val);
   const DataMain = (val: FormPlacementMainData[]) => (DataMainOrig.value = val);
   const DataUpdateMain = (
-    filter_1: number | null,
+    filter_1: number | string,
     filter_2: string | null,
     filter_3: boolean
   ) => {
     DataMainUpdate.value = [];
-    if (filter_1 === null && filter_2 === "" && filter_3 === false) {
+    if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 1');
       // return DataMainUpdate.value = DataMainOrig.value; อันเก่า
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === "" && filter_3 === false) {
+    } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 1.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === "" && filter_3 === false) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder === filter_1 && item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === "" && filter_3 === false) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === false) {
       // console.log('case 2.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder === filter_1 && item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 !== "" && filter_3 === false) {
+    } else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === false) {
       // console.log('case 2.2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) =>
@@ -138,32 +138,32 @@ export const usePlacementDataStore = defineStore("placement", () => {
           item.examTypeValue === filter_2 &&
           item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 !== "" && filter_3 === false) {
+    } else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === false) {
       // console.log('case 3');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examTypeValue === filter_2 && item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === "" && filter_3 === true) {
+    } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.1');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 === null && filter_2 === "" && filter_3 === true) {
+    } else if (filter_1 === "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.2');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.isExpired === filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === "" && filter_3 === true) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.3');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder == filter_1 && item.isExpired == filter_3
       ));
-    } else if (filter_1 !== null && filter_2 === "" && filter_3 === true) {
+    } else if (filter_1 !== "all" && filter_2 === "all" && filter_3 === true) {
       // console.log('case 3.4');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examOrder == filter_1 && item.isExpired == filter_3
       ));
-    } else if (filter_1 !== null && filter_2 !== "" && filter_3 === true) {
+    } else if (filter_1 !== "all" && filter_2 !== "all" && filter_3 === true) {
       // console.log('case 3.5');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) =>
@@ -171,7 +171,7 @@ export const usePlacementDataStore = defineStore("placement", () => {
           item.examTypeValue == filter_2 &&
           item.isExpired == filter_3
       ));
-    } else if (filter_1 === null && filter_2 !== "" && filter_3 === true) {
+    } else if (filter_1 === "all" && filter_2 !== "all" && filter_3 === true) {
       // console.log('case 3.6');
       return (DataMainUpdate.value = DataMainOrig.value.filter(
         (item) => item.examTypeValue == filter_2 && item.isExpired == filter_3