From 006a492834526c4915335fb455e7902d54abf58c Mon Sep 17 00:00:00 2001
From: "STW_TTTY\\stwtt" <trx.setthawut@gmail.com>
Date: Thu, 1 Aug 2024 15:38:46 +0700
Subject: [PATCH] =?UTF-8?q?=E0=B8=AA=E0=B8=B4=E0=B8=97=E0=B8=98=E0=B8=B4?=
 =?UTF-8?q?=E0=B9=8C=20/=20rating=20=E0=B9=80=E0=B8=9B=E0=B8=A5=E0=B8=B5?=
 =?UTF-8?q?=E0=B9=88=E0=B8=A2=E0=B8=99=E0=B9=80=E0=B8=9B=E0=B9=87=E0=B8=99?=
 =?UTF-8?q?=20btn=20group?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../competency/01ListCompetency.vue           |   18 +
 .../competency/02ListLinkPosition.vue         |   14 +-
 .../components/competency/03ListLinkGroup.vue |   17 +-
 .../components/competency/04ListCriteria.vue  |    5 +-
 .../components/competency/AddPage.vue         |   10 +-
 .../components/competency/Forms/Main.vue      |   15 +-
 src/modules/01_masterdata/router.ts           |   12 +
 .../01_masterdata/views/Assignment.vue        |    7 +-
 src/modules/01_masterdata/views/Strategic.vue |   98 +-
 .../01_masterdata/views/indicatorByPlan.vue   |    6 +-
 .../01_masterdata/views/indicatorByRole.vue   |    5 +
 .../components/Other/Criterion.vue            |   94 +-
 .../probation/FormEvaluation/FormEvaluate.vue | 1091 ++++++++---------
 .../FormEvaluation/FormEvaluateAdd.vue        |  496 +++-----
 .../FormEvaluation/FormEvaluateScore.vue      |  381 +++---
 .../FormEvaluation/FormEvaluateScoreAdd.vue   |  383 +++---
 .../FormEvaluation/FormSaveResult.vue         |  533 ++++----
 .../FormEvaluation/FormSaveResultAdd.vue      |  581 ++++-----
 .../FormSaveResultAddCommander.vue            |  584 ++++-----
 .../FormEvaluation/FormSaveResultCommader.vue |  534 ++++----
 .../components/probation/SummarySurvey.vue    |   74 +-
 .../05_placement/interface/index/Main.ts      |    8 +-
 22 files changed, 2248 insertions(+), 2718 deletions(-)

diff --git a/src/modules/01_masterdata/components/competency/01ListCompetency.vue b/src/modules/01_masterdata/components/competency/01ListCompetency.vue
index 96db2a744..baf4ec8b0 100644
--- a/src/modules/01_masterdata/components/competency/01ListCompetency.vue
+++ b/src/modules/01_masterdata/components/competency/01ListCompetency.vue
@@ -95,6 +95,10 @@ async function onViewDetail(id: string) {
   router.push(`/masterdata/competency/${id}`);
 }
 
+async function onViewDetailPage(id: string) {
+  router.push(`/masterdata/competency-detail/${id}`);
+}
+
 function deleteData(id: string) {
   dialogRemove($q, () => {
     http
@@ -229,6 +233,20 @@ onMounted(() => {
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
+          <q-btn
+            v-if="checkPermission($route)?.attrIsGet"
+            color="info"
+            flat
+            dense
+            round
+            size="12px"
+            icon="mdi-eye"
+            clickable
+            @click.stop="onViewDetailPage(props.row.id)"
+            v-close-popup
+          >
+            <q-tooltip>รายละเอียด</q-tooltip>
+          </q-btn>
           <q-btn
             v-if="checkPermission($route)?.attrIsUpdate"
             color="edit"
diff --git a/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue b/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
index a07dce629..b0630dece 100644
--- a/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
+++ b/src/modules/01_masterdata/components/competency/02ListLinkPosition.vue
@@ -13,6 +13,8 @@ import type {
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import { checkPermission } from "@/utils/permissions";
+
 const total = ref<number>();
 const modal = ref<boolean>(false);
 const rows = ref<any[]>([]);
@@ -204,7 +206,14 @@ onMounted(async () => {
 
 <template>
   <q-toolbar style="padding: 0">
-    <q-btn flat round color="primary" icon="add" @click="onAdd()">
+    <q-btn
+      v-if="checkPermission($route)?.attrIsCreate"
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click="onAdd()"
+    >
       <q-tooltip> เพิ่มข้อมูล </q-tooltip>
     </q-btn>
     <q-space />
@@ -268,6 +277,7 @@ onMounted(async () => {
       <q-tr :props="props" class="cursor-pointer">
         <q-td auto-width>
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             color="edit"
             flat
             dense
@@ -281,6 +291,7 @@ onMounted(async () => {
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
           <q-btn
+            v-if="checkPermission($route)?.attrIsDelete"
             color="red"
             flat
             dense
@@ -299,7 +310,6 @@ onMounted(async () => {
         <q-td v-for="col in props.cols" :key="col.id">
           {{ col.value }}
         </q-td>
-
       </q-tr>
     </template>
     <template v-slot:pagination="scope">
diff --git a/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue b/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
index 26cd8a994..d12b5d0a3 100644
--- a/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
+++ b/src/modules/01_masterdata/components/competency/03ListLinkGroup.vue
@@ -14,6 +14,8 @@ import type {
 import http from "@/plugins/http";
 import config from "@/app.config";
 
+import { checkPermission } from "@/utils/permissions";
+
 const total = ref<number>();
 const id = ref<string>("");
 const modal = ref<boolean>(false);
@@ -343,7 +345,14 @@ onMounted(async () => {
 
 <template>
   <q-toolbar style="padding: 0">
-    <q-btn flat round color="primary" icon="add" @click="onAdd()">
+    <q-btn
+      v-if="checkPermission($route)?.attrIsCreate"
+      flat
+      round
+      color="primary"
+      icon="add"
+      @click="onAdd()"
+    >
       <q-tooltip> เพิ่มข้อมูล </q-tooltip>
     </q-btn>
     <q-space />
@@ -398,7 +407,7 @@ onMounted(async () => {
   >
     <template v-slot:header="props">
       <q-tr :props="props">
-        <q-th auto-width />
+        <q-th auto-width v-if="checkPermission($route)?.attrIsUpdate || checkPermission($route)?.attrIsDelete "/>
         <q-th v-for="col in props.cols" :key="col.name" :props="props">
           <span class="text-weight-medium">{{ col.label }}</span>
         </q-th>
@@ -406,8 +415,9 @@ onMounted(async () => {
     </template>
     <template v-slot:body="props">
       <q-tr :props="props" class="cursor-pointer">
-        <q-td auto-width>
+        <q-td auto-width v-if="checkPermission($route)?.attrIsUpdate || checkPermission($route)?.attrIsDelete ">
           <q-btn
+            v-if="checkPermission($route)?.attrIsUpdate"
             color="edit"
             flat
             dense
@@ -421,6 +431,7 @@ onMounted(async () => {
             <q-tooltip>แก้ไขข้อมูล</q-tooltip>
           </q-btn>
           <q-btn
+            v-if="checkPermission($route)?.attrIsDelete"
             color="red"
             flat
             dense
diff --git a/src/modules/01_masterdata/components/competency/04ListCriteria.vue b/src/modules/01_masterdata/components/competency/04ListCriteria.vue
index 0ec81be57..31b719199 100644
--- a/src/modules/01_masterdata/components/competency/04ListCriteria.vue
+++ b/src/modules/01_masterdata/components/competency/04ListCriteria.vue
@@ -6,6 +6,8 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import { useQuasar } from "quasar";
 
+import { checkPermission } from "@/utils/permissions";
+
 const $q = useQuasar();
 const dataLevel = ref<any>();
 const { showLoader, hideLoader, success } = useCounterMixin();
@@ -92,6 +94,7 @@ onMounted(() => {
                   >
                     <template #control>
                       <q-editor
+                        :readonly="checkPermission($route)?.attrIsUpdate == false"
                         class="full-width"
                         v-model="field.description"
                         :dense="$q.screen.lt.md"
@@ -151,7 +154,7 @@ onMounted(() => {
       <q-separator />
 
       <q-card-actions align="right">
-        <q-btn label="บันทึก" color="secondary" type="submit"
+        <q-btn v-if="checkPermission($route)?.attrIsUpdate" label="บันทึก" color="secondary" type="submit"
           ><q-tooltip>บันทึกข้อมูล</q-tooltip></q-btn
         >
       </q-card-actions>
diff --git a/src/modules/01_masterdata/components/competency/AddPage.vue b/src/modules/01_masterdata/components/competency/AddPage.vue
index ac5d44b7a..188bbc3fc 100644
--- a/src/modules/01_masterdata/components/competency/AddPage.vue
+++ b/src/modules/01_masterdata/components/competency/AddPage.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import { ref, reactive } from "vue";
-import { useRouter } from "vue-router";
+import { useRoute, useRouter } from "vue-router";
 
 import Main from "@/modules/01_masterdata/components/competency/Forms/Main.vue";
 
@@ -10,8 +10,10 @@ import type { DataOption } from "@/modules/01_masterdata/interface/index/Main";
 import type { FormCompetency } from "@/modules/01_masterdata/interface/request/Main";
 
 const router = useRouter();
+const route = useRoute();
 const store = useKPIDataStore();
 
+const checkRoute = ref<boolean>(route.name == "KPICompetencyDetailByid");
 const formData = reactive<FormCompetency>({
   competencyType: "",
   competencyName: "",
@@ -82,13 +84,17 @@ function onSubmit() {
       class="q-mr-sm"
       @click="router.go(-1)"
     />
-    <span class="toptitle text-dark">เพิ่ม/แก้ไขสมรรถนะ</span>
+
+    <span class="toptitle text-dark">{{
+      checkRoute ? "รายละเอียดสมรรถนะ" : "เพิ่ม/แก้ไขสมรรถนะ"
+    }}</span>
   </div>
   <q-card>
     <q-card-section>
       <div class="row">
         <div class="col-12">
           <q-select
+            :readonly="checkRoute"
             v-model="store.competencyTypeVal"
             outlined
             label="เลือกประเภทสมรรถนะ"
diff --git a/src/modules/01_masterdata/components/competency/Forms/Main.vue b/src/modules/01_masterdata/components/competency/Forms/Main.vue
index 7b5a4756b..778cc5158 100644
--- a/src/modules/01_masterdata/components/competency/Forms/Main.vue
+++ b/src/modules/01_masterdata/components/competency/Forms/Main.vue
@@ -17,6 +17,7 @@ const router = useRouter();
 const route = useRoute();
 const store = useKPIDataStore();
 
+const checkRoute = ref<boolean>(route.name == "KPICompetencyDetailByid");
 const competencyId = ref<string>(
   route.params.id ? route.params.id.toString() : ""
 );
@@ -110,6 +111,7 @@ onMounted(() => {
       <div class="row q-col-gutter-sm">
         <div class="col-12">
           <q-input
+            :readonly="checkRoute"
             v-model="formData.competencyName"
             dense
             outlined
@@ -132,6 +134,7 @@ onMounted(() => {
           >
             <template #control>
               <q-editor
+                :readonly="checkRoute"
                 class="full-width"
                 v-model="formData.definition"
                 :dense="$q.screen.lt.md"
@@ -174,6 +177,7 @@ onMounted(() => {
                   <div class="row items-center">
                     <div class="col-1">
                       <q-btn
+                        v-if="!checkRoute"
                         dense
                         flat
                         round
@@ -230,6 +234,7 @@ onMounted(() => {
                       >
                         <template #control>
                           <q-editor
+                            :readonly="checkRoute"
                             class="full-width"
                             v-model="formData.levels[index].description"
                             :dense="$q.screen.lt.md"
@@ -258,7 +263,7 @@ onMounted(() => {
                         color="red"
                         icon="delete"
                         @click="onDeleteLevels(index)"
-                        v-if="
+                        v-if="!checkRoute &&
                           (store.competencyTypeVal === 'HEAD' && index > 4) ||
                           (store.competencyTypeVal === 'GROUP' && index > 4) ||
                           ((store.competencyTypeVal === 'EXECUTIVE' ||
@@ -282,7 +287,13 @@ onMounted(() => {
     <div class="col-12"><q-separator /></div>
 
     <q-card-actions align="right">
-      <q-btn label="บันทึก" color="public" class="q-px-md" type="submit">
+      <q-btn
+        v-if="!checkRoute"
+        label="บันทึก"
+        color="public"
+        class="q-px-md"
+        type="submit"
+      >
         <q-tooltip>บันทึกข้อมูล</q-tooltip>
       </q-btn>
     </q-card-actions>
diff --git a/src/modules/01_masterdata/router.ts b/src/modules/01_masterdata/router.ts
index 6117a2665..ee09ee181 100644
--- a/src/modules/01_masterdata/router.ts
+++ b/src/modules/01_masterdata/router.ts
@@ -14,6 +14,8 @@ const competencyPage = () =>
   import("@/modules/01_masterdata/views/competency.vue");
 const competencyAddPage = () =>
   import("@/modules/01_masterdata/components/competency/AddPage.vue");
+const competencyDetailPage = () =>
+  import("@/modules/01_masterdata/components/competency/AddPage.vue");
 const StrategicView = () =>
   import("@/modules/01_masterdata/views/Strategic.vue");
 const AssignmentView = () =>
@@ -115,6 +117,16 @@ export default [
       Role: "STAFF",
     },
   },
+  {
+    path: "/masterdata/competency-detail/:id",
+    name: "KPICompetencyDetailByid",
+    component: competencyDetailPage,
+    meta: {
+      Auth: true,
+      Key: "SYS_EVA_COMPETENCY",
+      Role: "STAFF",
+    },
+  },
 
   {
     path: "/masterdata/strategic",
diff --git a/src/modules/01_masterdata/views/Assignment.vue b/src/modules/01_masterdata/views/Assignment.vue
index c7849ed64..48bad150d 100644
--- a/src/modules/01_masterdata/views/Assignment.vue
+++ b/src/modules/01_masterdata/views/Assignment.vue
@@ -16,6 +16,7 @@ import type { ResAssignment } from "@/modules/01_masterdata/interface/response/M
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 
 const $q = useQuasar();
 const router = useRouter();
@@ -256,7 +257,7 @@ onMounted(() => {
       >
         <template v-slot:header="props">
           <q-tr :props="props">
-            <q-th auto-width />
+            <q-th auto-width v-if="checkPermission($route)?.attrIsGet || checkPermission($route)?.attrIsDelete"/>
             <q-th v-for="col in props.cols" :key="col.name" :props="props">
               <span class="text-weight-medium">{{ col.label }}</span>
             </q-th>
@@ -264,8 +265,9 @@ onMounted(() => {
         </template>
         <template v-slot:body="props">
           <q-tr :props="props" class="cursor-pointer">
-            <q-td auto-width>
+            <q-td auto-width v-if="checkPermission($route)?.attrIsGet || checkPermission($route)?.attrIsDelete">
               <q-btn
+                v-if="checkPermission($route)?.attrIsGet"
                 flat
                 round
                 color="primary"
@@ -276,6 +278,7 @@ onMounted(() => {
                 <q-tooltip>ดูข้อมูล</q-tooltip>
               </q-btn>
               <q-btn
+                v-if="checkPermission($route)?.attrIsDelete"
                 flat
                 round
                 color="red"
diff --git a/src/modules/01_masterdata/views/Strategic.vue b/src/modules/01_masterdata/views/Strategic.vue
index bd855a4bf..f562726d8 100644
--- a/src/modules/01_masterdata/views/Strategic.vue
+++ b/src/modules/01_masterdata/views/Strategic.vue
@@ -10,7 +10,7 @@ import type { DataStrategic } from "@/modules/01_masterdata/interface/response/S
 import DialogHeader from "@/components/DialogHeader.vue";
 
 import { useCounterMixin } from "@/stores/mixin";
-
+import { checkPermission } from "@/utils/permissions";
 const $q = useQuasar();
 const {
   showLoader,
@@ -198,6 +198,7 @@ onMounted(() => {
     <div class="row q-col-gutter-sm q-pl-sm">
       <q-toolbar class="text-primary">
         <q-btn
+          v-if="checkPermission($route)?.attrIsCreate"
           dense
           flat
           round
@@ -256,57 +257,64 @@ onMounted(() => {
               round
             >
               <q-menu>
-                <q-list
-                  dense
-                  v-for="(item, index) in prop.node.level !== 4
-                    ? ListMenu
-                    : ListMenu.slice(1, 4)"
-                  :key="index"
-                  style="min-width: 100px"
-                >
+                <q-list dense style="min-width: 100px">
                   <q-item
+                    v-if="
+                      prop.node.level !== 4 &&
+                      checkPermission($route)?.attrIsCreate
+                    "
                     clickable
                     v-close-popup
-                    @click.stop="onClickAction(item.value, prop.node)"
+                    @click.stop="onClickAction('ADD', prop.node)"
                   >
                     <q-item-section avatar style="min-width: 20px">
-                      <q-icon
-                        size="17px"
-                        :color="item.color"
-                        :name="item.icon"
-                      />
+                      <q-icon size="17px" :color="'primary'" :name="'add'" />
                     </q-item-section>
 
-                    <div v-if="item.value === 'ADD'">
-                      <q-item-section v-if="prop.node.level === 1">
-                        {{ `${item.label}ยุทธศาสตร์ที่ 1` }}
-                      </q-item-section>
-                      <q-item-section v-if="prop.node.level === 2">
-                        {{ `${item.label}ยุทธศาสตร์ย่อย` }}
-                      </q-item-section>
-                      <q-item-section v-if="prop.node.level === 3">
-                        {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
-                      </q-item-section>
-                    </div>
-
-                    <div v-else-if="item.value === 'EDIT'">
-                      <q-item-section v-if="prop.node.level === 1">
-                        {{ `${item.label}ยุทธศาสตร์/แผน` }}
-                      </q-item-section>
-                      <q-item-section v-if="prop.node.level === 2">
-                        {{ `${item.label}ยุทธศาสตร์ที่` }}
-                      </q-item-section>
-                      <q-item-section v-if="prop.node.level === 3">
-                        {{ `${item.label}ยุทธศาสตร์ย่อย` }}
-                      </q-item-section>
-                      <q-item-section v-if="prop.node.level === 4">
-                        {{ `${item.label}กลยุทธ์ที่/เป้าประสงค์` }}
-                      </q-item-section>
-                    </div>
-
-                    <div v-else>
-                      <q-item-section>{{ item.label }}</q-item-section>
-                    </div>
+                    <q-item-section v-if="prop.node.level === 1">
+                      {{ `เพิ่มยุทธศาสตร์ที่ 1` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === 2">
+                      {{ `เพิ่มยุทธศาสตร์ย่อย` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === 3">
+                      {{ `เพิ่มกลยุทธ์ที่/เป้าประสงค์` }}
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="checkPermission($route)?.attrIsUpdate"
+                    clickable
+                    v-close-popup
+                    @click.stop="onClickAction('EDIT', prop.node)"
+                  >
+                    <q-item-section avatar style="min-width: 20px">
+                      <q-icon size="17px" :color="'edit'" :name="'edit'" />
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === 1">
+                      {{ `แก้ไขยุทธศาสตร์/แผน` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === 2">
+                      {{ `แก้ไขยุทธศาสตร์ที่ 1` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === 3">
+                      {{ `แก้ไขยุทธศาสตร์ย่อย` }}
+                    </q-item-section>
+                    <q-item-section v-if="prop.node.level === 4">
+                      {{ `แก้ไขกลยุทธ์ที่/เป้าประสงค์` }}
+                    </q-item-section>
+                  </q-item>
+                  <q-item
+                    v-if="checkPermission($route)?.attrIsDelete"
+                    clickable
+                    v-close-popup
+                    @click.stop="onClickAction('DEL', prop.node)"
+                  >
+                    <q-item-section avatar style="min-width: 20px">
+                      <q-icon size="17px" :color="'red'" :name="'delete'" />
+                    </q-item-section>
+                    <q-item-section>
+                      {{ `ลบข้อมูล` }}
+                    </q-item-section>
                   </q-item>
                 </q-list>
               </q-menu>
diff --git a/src/modules/01_masterdata/views/indicatorByPlan.vue b/src/modules/01_masterdata/views/indicatorByPlan.vue
index 78714507b..b3408c407 100644
--- a/src/modules/01_masterdata/views/indicatorByPlan.vue
+++ b/src/modules/01_masterdata/views/indicatorByPlan.vue
@@ -11,7 +11,7 @@ import DialogHistory from "@/modules/01_masterdata/components/Indicators/DialogH
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
-
+import { checkPermission } from "@/utils/permissions";
 /** use*/
 const dataHistory = ref<any[]>([]);
 const modalHistory = ref<boolean>(false);
@@ -329,6 +329,7 @@ onMounted(() => {
           </q-select>
 
           <q-btn
+            v-if="checkPermission($route)?.attrIsCreate"
             flat
             round
             dense
@@ -424,6 +425,7 @@ onMounted(() => {
                     <q-menu>
                       <q-list style="min-width: 180px">
                         <q-item
+                        v-if="checkPermission($route)?.attrIsUpdate"
                           clickable
                           v-close-popup
                           @click="onClickAddOrView(true, props.row.id)"
@@ -443,6 +445,7 @@ onMounted(() => {
                           <q-item-section>แก้ไขข้อมูล</q-item-section>
                         </q-item>
                         <q-item
+                        v-if="checkPermission($route)?.attrIsUpdate"
                           clickable
                           v-close-popup
                           @click="onClickHistory(props.row.id)"
@@ -458,6 +461,7 @@ onMounted(() => {
                           <q-item-section>ประวัติการแก้ไข</q-item-section>
                         </q-item>
                         <q-item
+                        v-if="checkPermission($route)?.attrIsDelete"
                           clickable
                           v-close-popup
                           @click.stop.pervent="deleteData(props.row.id)"
diff --git a/src/modules/01_masterdata/views/indicatorByRole.vue b/src/modules/01_masterdata/views/indicatorByRole.vue
index 171a968b9..d8acda9b0 100644
--- a/src/modules/01_masterdata/views/indicatorByRole.vue
+++ b/src/modules/01_masterdata/views/indicatorByRole.vue
@@ -15,6 +15,7 @@ import DialogHistory from "@/modules/01_masterdata/components/Indicators/DialogH
 
 /** importStore*/
 import { useCounterMixin } from "@/stores/mixin";
+import { checkPermission } from "@/utils/permissions";
 
 /** use*/
 const dataHistory = ref<any[]>([]);
@@ -330,6 +331,7 @@ onMounted(async () => {
       </q-select>
 
       <q-btn
+      v-if="checkPermission($route)?.attrIsCreate"
         flat
         round
         dense
@@ -429,6 +431,7 @@ onMounted(async () => {
                 <q-menu>
                   <q-list style="min-width: 180px">
                     <q-item
+                      v-if="checkPermission($route)?.attrIsUpdate"
                       clickable
                       v-close-popup
                       @click.stop.pervent="onClickAddOrView(true, props.row.id)"
@@ -448,6 +451,7 @@ onMounted(async () => {
                       <q-item-section>แก้ไขข้อมูล</q-item-section>
                     </q-item>
                     <q-item
+                    v-if="checkPermission($route)?.attrIsUpdate"
                       clickable
                       v-close-popup
                       @click="onClickHistory(props.row.id)"
@@ -463,6 +467,7 @@ onMounted(async () => {
                       <q-item-section>ประวัติการแก้ไข</q-item-section>
                     </q-item>
                     <q-item
+                    v-if="checkPermission($route)?.attrIsDelete"
                       clickable
                       v-close-popup
                       @click.stop.pervent="onClickDelete(props.row.id)"
diff --git a/src/modules/05_placement/components/Other/Criterion.vue b/src/modules/05_placement/components/Other/Criterion.vue
index e21d339c4..ed672b300 100644
--- a/src/modules/05_placement/components/Other/Criterion.vue
+++ b/src/modules/05_placement/components/Other/Criterion.vue
@@ -1,56 +1,46 @@
 <template>
-    <div class="col-12 row q-pb-sm">
-        <div class="col-12 text-top0 items-center q-pa-md">
-        เกณฑ์การประเมินความคาดหวัง
-        </div>
-        <div class="q-gutter-sm row">
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
-            </div>
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังค่อนข้างมาก</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
-            </div>
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
-            </div>
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">สูงว่าความคาดหวังค่อนข้างมาก</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
-            </div>
-            <div class="col-12 row">
-                <div class="col-2 row justify-center">
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-3" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-light-blue-6" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-9" aria-hidden="true" role="presentation">grade</i>
-                <i class="q-icon notranslate material-icons q-rating__icon q-rating__icon--active text-blue-10" aria-hidden="true" role="presentation">grade</i>
-                </div>
-                <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
-                <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
-            </div>
-        </div>
+  <div class="col-12 row q-pb-sm">
+    <div class="col-12 text-top0 items-center q-pa-md">
+      เกณฑ์การประเมินความคาดหวัง
     </div>
+    <div class="q-gutter-sm row">
+      <div class="col-12 row items-center">
+        <div class="col-2 row justify-center">
+            <q-btn outline color="grey-6" :label="'1'"> </q-btn>
+        </div>
+        <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังมาก</div>
+        <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 1</div>
+      </div>
+      <div class="col-12 row items-center">
+        <div class="col-2 row justify-center">
+            <q-btn outline color="grey-6" :label="'2'"> </q-btn>
+        </div>
+        <div class="q-pl-md col-3">ต่ำกว่าความคาดหวังค่อนข้างมาก</div>
+        <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 2</div>
+      </div>
+      <div class="col-12 row items-center">
+        <div class="col-2 row justify-center">
+            <q-btn outline color="grey-6" :label="'3'"> </q-btn>
+        </div>
+        <div class="q-pl-md col-3">เป็นไปตามความคาดหวัง</div>
+        <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 3</div>
+      </div>
+      <div class="col-12 row items-center">
+        <div class="col-2 row justify-center">
+            <q-btn outline color="grey-6" :label="'4'"> </q-btn>
+        </div>
+        <div class="q-pl-md col-3">สูงว่าความคาดหวังค่อนข้างมาก</div>
+        <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 4</div>
+      </div>
+      <div class="col-12 row items-center">
+        <div class="col-2 row justify-center">
+            <q-btn outline color="grey-6" :label="'5'"> </q-btn>
+        </div>
+        <div class="q-pl-md col-3">สูงกว่าความคาดหวังมาก</div>
+        <div class="q-pl-md">หมายถึง มีคะแนนเฉลี่ยที่ระดับ 5</div>
+      </div>
+    </div>
+  </div>
 </template>
 <style lang="scss" scoped>
 .text-top0 {
@@ -58,4 +48,4 @@
   padding-bottom: 8px;
   color: rgb(70, 68, 68);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
index 6317bbe60..064f39ab4 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluate.vue
@@ -7,7 +7,7 @@ import { useRouter, useRoute } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
-
+import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 const router = useRouter();
 const routeName = router.currentRoute.value.name;
 
@@ -92,6 +92,14 @@ const list2_1 = probationStore.behavior_no1;
 const list2_2 = probationStore.behavior_no2;
 const list2_3 = probationStore.behavior_no3;
 
+const optionText = ref<ListDataText[]>([
+  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
+  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
+  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
+  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
+  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
+]);
+
 /** get ข้อมูลมอบหมายงาน */
 async function fecthAssign() {
   showLoader();
@@ -382,592 +390,526 @@ onMounted(async () => {
       </div>
 
       <div class="col-12 row no-margin">
-        <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
-          <q-list dense>
-            <q-item dense tag="label" v-ripple>
-              <q-item-section>
-                <q-item-label>
-                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.1. ความรู้ความสามารถ</q-item-label
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
                 >
-              </q-item-section>
-              <q-item-section side>
-                <q-rating
-                  v-model="knowledge_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-card>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.1. ความรู้ความสามารถ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :disable="!status"
+                        :class="knowledge_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="knowledge_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
 
-        <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
-          <q-list dense>
-            <q-item dense tag="label" v-ripple>
-              <q-item-section>
-                <q-item-label>
-                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.2. ทักษะ</q-item-label
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
                 >
-              </q-item-section>
-              <q-item-section side>
-                <q-rating
-                  v-model="skill_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-card>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.2. ทักษะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :disable="!status"
+                        :class="skill_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="skill_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
 
-        <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
-          <q-list dense>
-            <q-item dense tag="label" v-ripple>
-              <q-item-section>
-                <q-item-label>
-                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.3. สมมรถนะ</q-item-label
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
                 >
-              </q-item-section>
-              <q-item-section side>
-                <q-rating
-                  v-model="competency_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-card>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.3. สมมรถนะ</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :disable="!status"
+                        :class="competency_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="competency_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
 
-        <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
-          <q-list dense>
-            <q-item dense tag="label" v-ripple>
-              <q-item-section>
-                <q-item-label>
-                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.4. ความสามารถในการเรียนรู้งาน</q-item-label
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
                 >
-              </q-item-section>
-              <q-item-section side>
-                <q-rating
-                  v-model="learn_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-card>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.4. ความสามารถในการเรียนรู้งาน</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :disable="!status"
+                        :class="learn_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="learn_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
 
-        <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
-          <q-list dense>
-            <q-item dense tag="label" v-ripple>
-              <q-item-section>
-                <q-item-label>
-                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.5.
-                  ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
                 >
-              </q-item-section>
-              <q-item-section side>
-                <q-rating
-                  v-model="apply_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-card>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.5.
+                      ความสามารถในการปรับใช้ความรู้กับงานในหน้าที่</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :disable="!status"
+                        :class="apply_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="apply_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
 
-        <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
-          <q-list dense>
-            <q-item dense tag="label" v-ripple>
-              <q-item-section>
-                <q-item-label>
-                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
+              <q-list dense>
+                <q-item
+                  dense
+                  tag="label"
+                  v-ripple
                 >
-              </q-item-section>
-              <q-item-section side>
-                <q-rating
-                  v-model="success_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-card>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.6. ความสำเร็จของงานที่ได้รับมอบหมาย</q-item-label
+                    >
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :disable="!status"
+                        :class="success_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="success_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
 
-        <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
-          <q-list dense>
-            <q-item dense tag="label" v-ripple>
-              <q-item-section>
-                <q-item-label>
-                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-                  1.7 อื่นๆ
-                  <q-checkbox
-                    class="q-ml-sm"
-                    :disable="!status"
-                    dense
-                    v-model="etc"
-                    @click="
-                      (achievement_other.text = ''),
-                        (achievement_other.level = 0)
-                    "
-                /></q-item-label>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-card>
+            <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg">
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section>
+                    <q-item-label>
+                      <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                      1.7 อื่นๆ
+                      <q-checkbox
+                        :disable="!status"
+                        class="q-ml-sm"
+                        dense
+                        v-model="etc"
+                        @click="
+                          (achievement_other.text = ''),
+                            (achievement_other.level = 0)
+                        "
+                    /></q-item-label>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
 
-        <q-card
-          v-if="etc"
-          class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg"
-        >
-          <q-list dense>
-            <q-item dense tag="label" v-ripple>
-              <q-item-section class="q-ml-md">
-                <q-item-label>
-                  <q-input
-                    v-model="achievement_other.text"
-                    label="กรอกอื่นๆ"
-                    dense
-                    :disable="!status"
-                    lazy-rules
-                    autogrow
-                    hide-bottom-space
-                    outlined
-                    class="bg-white"
-                    :rules="[
-                      (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                    ]"
-                  />
-                </q-item-label>
-              </q-item-section>
-              <q-item-section side>
-                <q-rating
-                  v-model="achievement_other.level"
-                  max="5"
-                  size="sm"
-                  :disable="!status"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
-              </q-item-section>
-            </q-item>
-          </q-list>
-        </q-card>
-      </div>
+            <q-card
+              v-if="etc"
+              class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-lg"
+            >
+              <q-list dense>
+                <q-item dense tag="label" v-ripple>
+                  <q-item-section class="q-ml-md">
+                    <q-item-label>
+                      <q-input
+                        :disable="!status"
+                        v-model="achievement_other.text"
+                        label="กรอกอื่นๆ"
+                        dense
+                        lazy-rules
+                        autogrow
+                        hide-bottom-space
+                        outlined
+                        class="bg-white"
+                        :rules="[
+                          (val) =>
+                            (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                        ]"
+                      />
+                    </q-item-label>
+                  </q-item-section>
+                  <q-item-section side>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :disable="!status"
+                        :class="achievement_other.level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="achievement_other.level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
+                </q-item>
+              </q-list>
+            </q-card>
+          </div>
 
       <!-- Part 2 -->
       <!-- <Part2 /> -->
       <div class="row col-12 q-gutter-lg no-margin">
-        <div class="col-12 row">
-          <div class="col-12 text-top0 items-center">
-            <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
-            พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
-          </div>
-          <div class="col-12 text-top0 row items-center q-pl-lg">
-            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-            2.1 ความประพฤติ
-          </div>
-          <q-card
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-          >
-            <q-list dense v-for="(list, i) in list2_1" :key="i">
-              <q-item dense tag="label" v-ripple>
-                <q-item-section>
-                  <q-item-label>{{ list.label }}</q-item-label>
-                </q-item-section>
-                <q-item-section side>
-                  <q-rating
-                    v-model="conduct_level[i]"
-                    :val="list.id"
-                    max="5"
-                    :disable="!status"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                  >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
-                </q-item-section>
-              </q-item>
-              <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
-            </q-list>
-          </q-card>
-        </div>
-
-        <div class="col-12 row">
-          <div class="col-12 text-top0 row items-center q-pl-lg">
-            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-            2.2 ความมีคุณธรรมจริยธรรม
-          </div>
-          <q-card
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-          >
-            <q-list dense v-for="(list, i) in list2_2" :key="i">
-              <q-item dense tag="label" v-ripple>
-                <q-item-section>
-                  <q-item-label>{{ list.label }}</q-item-label>
-                </q-item-section>
-                <q-item-section side>
-                  <q-rating
-                    v-model="moral_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    :disable="!status"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                  >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
-                </q-item-section>
-              </q-item>
-              <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
-            </q-list>
-          </q-card>
-        </div>
-
-        <div class="col-12 row">
-          <div class="col-12 text-top0 row items-center q-pl-lg">
-            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-            2.3 การรักษาวินัย
-          </div>
-          <q-card
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-          >
-            <q-list dense v-for="(list, i) in list2_3" :key="i">
-              <q-item dense tag="label" v-ripple>
-                <q-item-section>
-                  <q-item-label>{{ list.label }}</q-item-label>
-                </q-item-section>
-                <q-item-section side>
-                  <q-rating
-                    v-model="discipline_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    :disable="!status"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                  >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
-                </q-item-section>
-              </q-item>
-              <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
-            </q-list>
-          </q-card>
-        </div>
-
-        <div class="col-12 row">
-          <div class="col-12 text-top0 row items-center q-pl-lg">
-            <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-            2.4 อื่นๆ
-            <q-checkbox
-              class="q-ml-sm"
-              dense
-              v-model="etc2"
-              :disable="!status"
-              @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
-            />
-          </div>
-          <q-card
-            v-if="etc2"
-            flat
-            bordered
-            class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
-          >
-            <q-list dense>
-              <q-item dense tag="label" v-ripple>
-                <q-item-section>
-                  <q-item-label>
-                    <q-input
-                      v-model="behavio_orther.text"
-                      label="กรอกอื่นๆ"
-                      dense
-                      :disable="!status"
-                      lazy-rules
-                      autogrow
-                      hide-bottom-space
-                      outlined
-                      class="bg-white"
-                      :rules="[
-                        (val) => (val && val.length > 0) || 'กรุณากรอกข้อความ',
-                      ]"
-                    />
-                  </q-item-label>
-                </q-item-section>
-                <q-item-section side>
-                  <q-rating
-                    v-model="behavio_orther.level"
-                    max="5"
-                    size="sm"
-                    :disable="!status"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                  >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
-                </q-item-section>
-              </q-item>
-            </q-list>
-          </q-card>
-        </div>
-        <!-- <FormComment /> -->
-
-        <div class="row col-12 q-gutter-lg no-margin">
-          <div class="col-12 row">
-            <div class="col-12 text-top0 row items-center q-pl-lg">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              จุดเด่น (ไม่เกิน 5 บรรทัด)
+            <div class="col-12 row">
+              <div class="col-12 text-top0 items-center">
+                <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
+                พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
+              </div>
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.1 ความประพฤติ
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_1" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :disable="!status"
+                          :class="conduct_level[i] == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="conduct_level[i] = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
+                </q-list>
+              </q-card>
             </div>
-            <q-input
-              outlined
-              dense
-              v-model="behavio_strength_desc"
-              class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-              lazy-rules
-              type="textarea"
-              :disable="!status"
-              label="กรอกจุดเด่น"
-              hide-bottom-space
-              :row="5"
-              :rules="behavio_strengthRules"
-              ref="behavio_strengthRef"
-            />
-          </div>
-          <div class="col-12 row">
-            <div class="col-12 text-top0 row items-center q-pl-lg">
-              <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
-              สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.2 ความมีคุณธรรมจริยธรรม
+              </div>
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_2" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :disable="!status"
+                          :class="moral_level[i] == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="moral_level[i] = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.3 การรักษาวินัย
+              </div>
+
+              <q-card
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense v-for="(list, i) in list2_3" :key="i">
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>{{ list.label }}</q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :disable="!status"
+                          :class="discipline_level[i] == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="discipline_level[i] = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
+                    </q-item-section>
+                  </q-item>
+                  <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
+                </q-list>
+              </q-card>
+            </div>
+            <div class="col-12 row">
+              <div class="col-12 text-top0 row items-center q-pl-lg">
+                <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                2.4 อื่นๆ
+                <q-checkbox
+                  :disable="!status"
+                  class="q-ml-sm"
+                  dense
+                  v-model="etc2"
+                  @click="
+                    (behavio_orther.text = ''), (behavio_orther.level = 0)
+                  "
+                />
+              </div>
+              <q-card
+                v-if="etc2"
+                flat
+                bordered
+                class="col-xs-12 col-sm-11 col-md-10 offset-md-1 q-pa-sm bg-grey-1"
+              >
+                <q-list dense>
+                  <q-item dense tag="label" v-ripple>
+                    <q-item-section>
+                      <q-item-label>
+                        <q-input
+                          :disable="!status"
+                          v-model="behavio_orther.text"
+                          label="กรอกอื่นๆ"
+                          dense
+                          lazy-rules
+                          autogrow
+                          hide-bottom-space
+                          outlined
+                          class="bg-white"
+                          :rules="[
+                            (val) =>
+                              (val && val.length > 0) || 'กรุณากรอกข้อความ',
+                          ]"
+                        />
+                      </q-item-label>
+                    </q-item-section>
+                    <q-item-section side>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :disable="!status"
+                          :class="behavio_orther.level == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="behavio_orther.level = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
+                    </q-item-section>
+                  </q-item>
+                </q-list>
+              </q-card>
+            </div>
+            <!-- <FormComment /> -->
+            <div class="row col-12 q-gutter-lg no-margin">
+              <div class="col-12 row">
+                <div class="col-12 text-top0 row items-center q-pl-lg">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  จุดเด่น (ไม่เกิน 5 บรรทัด)
+                </div>
+                <q-input
+                  :disable="!status"
+                  outlined
+                  dense
+                  v-model="behavio_strength_desc"
+                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                  lazy-rules
+                  type="textarea"
+                  label="กรอกจุดเด่น"
+                  hide-bottom-space
+                  :row="5"
+                  :rules="behavio_strengthRules"
+                  ref="behavio_strengthRef"
+                />
+              </div>
+              <div class="col-12 row">
+                <div class="col-12 text-top0 row items-center q-pl-lg">
+                  <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
+                  สิ่งที่ควรปรับปรุง (ไม่เกิน 5 บรรทัด)
+                </div>
+                <q-input
+                  :disable="!status"
+                  outlined
+                  dense
+                  v-model="behavior_improve_desc"
+                  class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
+                  lazy-rules
+                  type="textarea"
+                  hide-bottom-space
+                  label="กรอกสิ่งที่ควรปรับปรุง"
+                  :row="5"
+                  ref="behavio_inproveRef"
+                />
+              </div>
             </div>
-            <q-input
-              outlined
-              dense
-              v-model="behavior_improve_desc"
-              class="col-xs-12 col-sm-11 col-md-10 offset-md-1"
-              lazy-rules
-              type="textarea"
-              hide-bottom-space
-              label="กรอกสิ่งที่ควรปรับปรุง"
-              :disable="!status"
-              :row="5"
-              ref="behavio_inproveRef"
-            />
           </div>
-        </div>
-      </div>
 
       <!-- Part 3 -->
       <!-- <Part3 /> -->
@@ -1183,4 +1125,19 @@ onMounted(async () => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
index bbd3eef27..17920836c 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateAdd.vue
@@ -7,6 +7,7 @@ import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
+import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
@@ -65,6 +66,14 @@ const props = defineProps({
   tab: String,
 });
 
+const optionText = ref<ListDataText[]>([
+  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
+  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
+  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
+  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
+  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
+]);
+
 const list2_1 = probationStore.behavior_no1;
 const list2_2 = probationStore.behavior_no2;
 const list2_3 = probationStore.behavior_no3;
@@ -467,32 +476,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      :disable="!status"
-                      v-model="knowledge_level"
-                      max="5"
-                      size="sm"
-                      :rules="knowledge_levelRules"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="knowledge_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="knowledge_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -513,31 +512,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      :disable="!status"
-                      v-model="skill_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="skill_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="skill_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -558,31 +548,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      :disable="!status"
-                      v-model="competency_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="competency_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="competency_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -603,31 +584,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      :disable="!status"
-                      v-model="learn_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="learn_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="learn_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -649,31 +621,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      :disable="!status"
-                      v-model="apply_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="apply_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="apply_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -694,31 +657,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      :disable="!status"
-                      v-model="success_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="success_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="success_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -772,31 +726,22 @@ onMounted(async () => {
                     </q-item-label>
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      :disable="!status"
-                      v-model="achievement_other.level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="achievement_other.level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="achievement_other.level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -827,36 +772,22 @@ onMounted(async () => {
                       <q-item-label>{{ list.label }}</q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        :disable="!status"
-                        v-model="conduct_level[i]"
-                        :val="list.id"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
-                      >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="conduct_level[i] == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="conduct_level[i] = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
                     </q-item-section>
                   </q-item>
                   <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
@@ -880,36 +811,22 @@ onMounted(async () => {
                       <q-item-label>{{ list.label }}</q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        :disable="!status"
-                        v-model="moral_level[i]"
-                        :val="list.id"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
-                      >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="moral_level[i] == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="moral_level[i] = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
                     </q-item-section>
                   </q-item>
                   <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
@@ -934,36 +851,22 @@ onMounted(async () => {
                       <q-item-label>{{ list.label }}</q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        :disable="!status"
-                        v-model="discipline_level[i]"
-                        :val="list.id"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
-                      >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="discipline_level[i] == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="discipline_level[i] = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
                     </q-item-section>
                   </q-item>
                   <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
@@ -1012,35 +915,22 @@ onMounted(async () => {
                       </q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        :disable="!status"
-                        v-model="behavio_orther.level"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
-                      >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="behavio_orther.level == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="behavio_orther.level = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
                     </q-item-section>
                   </q-item>
                 </q-list>
@@ -1339,4 +1229,20 @@ onMounted(async () => {
   border-radius: 5px;
   // color: #c10015;
 }
+
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
index f5b8bf69c..25def53be 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScore.vue
@@ -8,6 +8,15 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
 
+import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
+
+const optionText = ref<ListDataText[]>([
+  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
+  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
+  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
+  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
+  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
+]);
 const router = useRouter();
 const routeName = router.currentRoute.value.name;
 const $q = useQuasar();
@@ -522,31 +531,23 @@ onMounted(async () => {
                   >
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="learn_level"
-                    max="5"
-                    size="sm"
-                    :disable="!status"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                  >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
+                  <q-btn-group outline>
+                    <q-btn
+                      v-for="(item, index) in 5"
+                      :disable="!status"
+                      :class="learn_level == item && 'active'"
+                      outline
+                      color="grey-6"
+                      :label="item"
+                      @click="learn_level = item"
+                    >
+                      <q-tooltip>
+                        <div class="text-body2">
+                          <span>{{ optionText[index].label }}</span>
+                        </div>
+                      </q-tooltip>
+                    </q-btn>
+                  </q-btn-group>
                 </q-item-section>
               </q-item>
             </q-list>
@@ -563,31 +564,23 @@ onMounted(async () => {
                   >
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="apply_level"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :disable="!status"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                  >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
+                  <q-btn-group outline>
+                    <q-btn
+                      v-for="(item, index) in 5"
+                      :disable="!status"
+                      :class="apply_level == item && 'active'"
+                      outline
+                      color="grey-6"
+                      :label="item"
+                      @click="apply_level = item"
+                    >
+                      <q-tooltip>
+                        <div class="text-body2">
+                          <span>{{ optionText[index].label }}</span>
+                        </div>
+                      </q-tooltip>
+                    </q-btn>
+                  </q-btn-group>
                 </q-item-section>
               </q-item>
             </q-list>
@@ -603,31 +596,23 @@ onMounted(async () => {
                   >
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="success_level"
-                    max="5"
-                    :disable="!status"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                  >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
+                  <q-btn-group outline>
+                    <q-btn
+                      v-for="(item, index) in 5"
+                      :disable="!status"
+                      :class="success_level == item && 'active'"
+                      outline
+                      color="grey-6"
+                      :label="item"
+                      @click="success_level = item"
+                    >
+                      <q-tooltip>
+                        <div class="text-body2">
+                          <span>{{ optionText[index].label }}</span>
+                        </div>
+                      </q-tooltip>
+                    </q-btn>
+                  </q-btn-group>
                 </q-item-section>
               </q-item>
             </q-list>
@@ -680,31 +665,23 @@ onMounted(async () => {
                   </q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="achievement_other.level"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :disable="!status"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                  >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
+                  <q-btn-group outline>
+                    <q-btn
+                      v-for="(item, index) in 5"
+                      :disable="!status"
+                      :class="achievement_other.level == item && 'active'"
+                      outline
+                      color="grey-6"
+                      :label="item"
+                      @click="achievement_other.level = item"
+                    >
+                      <q-tooltip>
+                        <div class="text-body2">
+                          <span>{{ optionText[index].label }}</span>
+                        </div>
+                      </q-tooltip>
+                    </q-btn>
+                  </q-btn-group>
                 </q-item-section>
               </q-item>
             </q-list>
@@ -725,7 +702,7 @@ onMounted(async () => {
               <q-avatar class="bg-grey-2 q-mr-sm" size="28px">2</q-avatar>
               พฤติกรรมของผู้ทดลองปฏิบัติบัติหน้าที่ราชการ
             </div>
-            <div class="col-12 text-top0 row items-center q-pl-md">
+            <div class="col-12 text-top0 row items-center q-pl-lg">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
               2.1 ความประพฤติ
             </div>
@@ -740,41 +717,31 @@ onMounted(async () => {
                     <q-item-label>{{ list.label }}</q-item-label>
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="conduct_level[i]"
-                      :val="list.id"
-                      max="5"
-                      size="sm"
-                      :disable="!status"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :disable="!status"
+                        :class="conduct_level[i] == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="conduct_level[i] = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
                 <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
               </q-list>
             </q-card>
           </div>
-
           <div class="col-12 row">
-            <div class="col-12 text-top0 row items-center q-pl-md">
+            <div class="col-12 text-top0 row items-center q-pl-lg">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
               2.2 ความมีคุณธรรมจริยธรรม
             </div>
@@ -789,41 +756,31 @@ onMounted(async () => {
                     <q-item-label>{{ list.label }}</q-item-label>
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="moral_level[i]"
-                      :val="list.id"
-                      :disable="!status"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :disable="!status"
+                        :class="moral_level[i] == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="moral_level[i] = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
                 <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
               </q-list>
             </q-card>
           </div>
-
           <div class="col-12 row">
-            <div class="col-12 text-top0 row items-center q-pl-md">
+            <div class="col-12 text-top0 row items-center q-pl-lg">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
               2.3 การรักษาวินัย
             </div>
@@ -838,48 +795,38 @@ onMounted(async () => {
                     <q-item-label>{{ list.label }}</q-item-label>
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="discipline_level[i]"
-                      :val="list.id"
-                      :disable="!status"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :disable="!status"
+                        :class="discipline_level[i] == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="discipline_level[i] = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
                 <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
               </q-list>
             </q-card>
           </div>
-
           <div class="col-12 row">
-            <div class="col-12 text-top0 row items-center q-pl-md">
+            <div class="col-12 text-top0 row items-center q-pl-lg">
               <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
               2.4 อื่นๆ
               <q-checkbox
+                :disable="!status"
                 class="q-ml-sm"
                 dense
                 v-model="etc2"
-                :disable="!status"
                 @click="(behavio_orther.text = ''), (behavio_orther.level = 0)"
               />
             </div>
@@ -894,11 +841,11 @@ onMounted(async () => {
                   <q-item-section>
                     <q-item-label>
                       <q-input
+                        :disable="!status"
                         v-model="behavio_orther.text"
                         label="กรอกอื่นๆ"
                         dense
                         lazy-rules
-                        :disable="!status"
                         autogrow
                         hide-bottom-space
                         outlined
@@ -911,40 +858,31 @@ onMounted(async () => {
                     </q-item-label>
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="behavio_orther.level"
-                      max="5"
-                      size="sm"
-                      :disable="!status"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :disable="!status"
+                        :class="behavio_orther.level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="behavio_orther.level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
             </q-card>
           </div>
-
           <div class="text-top0 col-xs-12 col-sm-11 q-pt-sm q-px-md q-my-none">
             <div class="row col-12 justify-between q-py-sm">
-              <div class="text-black">คะแนนรวมพฤติกรรมการปฏิบัติราชการ</div>
+              <div class="text-black">คะแนนรวมพฤติกรรมการปฎิบัติราชการ</div>
               <div class="text-weight-bold text-black">{{ score2 }}</div>
             </div>
           </div>
@@ -1454,4 +1392,19 @@ onMounted(async () => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
index 543dabf1a..c93a357d7 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormEvaluateScoreAdd.vue
@@ -8,6 +8,15 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
 
+import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
+
+const optionText = ref<ListDataText[]>([
+  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
+  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
+  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
+  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
+  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
+]);
 const $q = useQuasar();
 const probationStore = useProbationDataStore();
 const { ratingColors } = probationStore;
@@ -583,34 +592,22 @@ watch(lengthdiscipline_level, (newLength) => {
                       >
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        v-model="learn_level"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
-                      >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="learn_level == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="learn_level = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
                     </q-item-section>
                   </q-item>
                 </q-list>
@@ -636,34 +633,22 @@ watch(lengthdiscipline_level, (newLength) => {
                       >
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        v-model="apply_level"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
-                      >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="apply_level == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="apply_level = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
                     </q-item-section>
                   </q-item>
                 </q-list>
@@ -688,35 +673,24 @@ watch(lengthdiscipline_level, (newLength) => {
                       >
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        v-model="success_level"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
-                      >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="success_level == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="success_level = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
                     </q-item-section>
+
                   </q-item>
                 </q-list>
               </q-card>
@@ -770,34 +744,22 @@ watch(lengthdiscipline_level, (newLength) => {
                       </q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        v-model="achievement_other.level"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
-                      >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="achievement_other.level == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="achievement_other.level = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
                     </q-item-section>
                   </q-item>
                 </q-list>
@@ -835,36 +797,23 @@ watch(lengthdiscipline_level, (newLength) => {
                         <q-item-label>{{ list.label }}</q-item-label>
                       </q-item-section>
                       <q-item-section side>
-                        <q-rating
-                          v-model="conduct_level[i]"
-                          :val="list.id"
-                          max="5"
-                          size="sm"
-                          color="grey"
-                          :color-selected="ratingColors"
-                          label="ระดับการประเมินพฤติกรรม"
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="conduct_level[i] == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="conduct_level[i] = item"
                         >
-                          <template v-slot:tip-1>
-                            <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                          </template>
-                          <template v-slot:tip-2>
-                            <q-tooltip
-                              >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                            >
-                          </template>
-                          <template v-slot:tip-3>
-                            <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                          </template>
-                          <template v-slot:tip-4>
-                            <q-tooltip
-                              >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                            >
-                          </template>
-                          <template v-slot:tip-5>
-                            <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                          </template>
-                        </q-rating>
-                      </q-item-section>
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
+                    </q-item-section>
                     </q-item>
                     <q-separator
                       class="q-my-xs"
@@ -890,36 +839,23 @@ watch(lengthdiscipline_level, (newLength) => {
                         <q-item-label>{{ list.label }}</q-item-label>
                       </q-item-section>
                       <q-item-section side>
-                        <q-rating
-                          v-model="moral_level[i]"
-                          :val="list.id"
-                          max="5"
-                          size="sm"
-                          color="grey"
-                          :color-selected="ratingColors"
-                          label="ระดับการประเมินพฤติกรรม"
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="moral_level[i] == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="moral_level[i] = item"
                         >
-                          <template v-slot:tip-1>
-                            <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                          </template>
-                          <template v-slot:tip-2>
-                            <q-tooltip
-                              >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                            >
-                          </template>
-                          <template v-slot:tip-3>
-                            <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                          </template>
-                          <template v-slot:tip-4>
-                            <q-tooltip
-                              >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                            >
-                          </template>
-                          <template v-slot:tip-5>
-                            <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                          </template>
-                        </q-rating>
-                      </q-item-section>
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
+                    </q-item-section>
                     </q-item>
                     <q-separator
                       class="q-my-xs"
@@ -945,36 +881,23 @@ watch(lengthdiscipline_level, (newLength) => {
                         <q-item-label>{{ list.label }}</q-item-label>
                       </q-item-section>
                       <q-item-section side>
-                        <q-rating
-                          v-model="discipline_level[i]"
-                          :val="list.id"
-                          max="5"
-                          size="sm"
-                          color="grey"
-                          :color-selected="ratingColors"
-                          label="ระดับการประเมินพฤติกรรม"
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="discipline_level[i] == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="discipline_level[i] = item"
                         >
-                          <template v-slot:tip-1>
-                            <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                          </template>
-                          <template v-slot:tip-2>
-                            <q-tooltip
-                              >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                            >
-                          </template>
-                          <template v-slot:tip-3>
-                            <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                          </template>
-                          <template v-slot:tip-4>
-                            <q-tooltip
-                              >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                            >
-                          </template>
-                          <template v-slot:tip-5>
-                            <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                          </template>
-                        </q-rating>
-                      </q-item-section>
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
+                    </q-item-section>
                     </q-item>
                     <q-separator
                       class="q-my-xs"
@@ -1023,35 +946,23 @@ watch(lengthdiscipline_level, (newLength) => {
                         </q-item-label>
                       </q-item-section>
                       <q-item-section side>
-                        <q-rating
-                          v-model="behavio_orther.level"
-                          max="5"
-                          size="sm"
-                          color="grey"
-                          :color-selected="ratingColors"
-                          label="ระดับการประเมินพฤติกรรม"
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="behavio_orther.level == item && 'active'"
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="behavio_orther.level = item"
                         >
-                          <template v-slot:tip-1>
-                            <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                          </template>
-                          <template v-slot:tip-2>
-                            <q-tooltip
-                              >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                            >
-                          </template>
-                          <template v-slot:tip-3>
-                            <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                          </template>
-                          <template v-slot:tip-4>
-                            <q-tooltip
-                              >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                            >
-                          </template>
-                          <template v-slot:tip-5>
-                            <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                          </template>
-                        </q-rating>
-                      </q-item-section>
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
+                    </q-item-section>
                     </q-item>
                   </q-list>
                 </q-card>
@@ -1401,7 +1312,6 @@ watch(lengthdiscipline_level, (newLength) => {
                         <q-input
                           outlined
                           dense
-                          :disable="!status"
                           class="full-width datepicker col-3"
                           :model-value="
                             dateAutherise != null
@@ -1462,7 +1372,6 @@ watch(lengthdiscipline_level, (newLength) => {
                         <q-input
                           outlined
                           dense
-                          :disable="!status"
                           class="full-width datepicker col-3"
                           :model-value="
                             director1_dated != null
@@ -1523,7 +1432,6 @@ watch(lengthdiscipline_level, (newLength) => {
                         <q-input
                           outlined
                           dense
-                          :disable="!status"
                           class="full-width datepicker col-3"
                           :model-value="
                             director2_dated != null
@@ -1601,4 +1509,19 @@ watch(lengthdiscipline_level, (newLength) => {
   border-radius: 5px;
   // color: #c10015;
 }
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
index d6ab2ed90..f53f23213 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResult.vue
@@ -9,6 +9,7 @@ import http from "@/plugins/http";
 import config from "@/app.config";
 
 import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
+import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 
 const router = useRouter();
 const routeName = router.currentRoute.value.name;
@@ -39,11 +40,9 @@ const evaluate_no = ref<number>(1);
 const dataArr = ref<any>();
 
 const checkArray = ref<number>(0);
-const list1_1 = ref<any>([]);
+const list1_1 = ref<any[]>([]);
 const option = ref<any>([]);
-const evaluate_expenct_level = ref<any>([
-  { id: "1", label: "ผลผลิตของงานที่คาดหวัง 1", level: 0 },
-]);
+const evaluate_expenct_level = ref<any[]>([]);
 const evaluate_ouptut = ref<any>([{ level: 0, text: "" }]);
 const knowledge_level = ref<number>(0);
 const skill_level = ref<number>(0);
@@ -79,6 +78,14 @@ const props = defineProps({
   fecthAssign: Function,
 });
 
+const optionText = ref<ListDataText[]>([
+  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
+  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
+  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
+  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
+  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
+]);
+
 function edit() {
   status.value = true;
 }
@@ -343,6 +350,7 @@ onMounted(async () => {
   if (props.tab && props.action == "edit") {
     evaluate_no.value = Number(props.tab.charAt(4));
     dataArr.value = await props.data;
+    console.log("🚀 ~ onMounted ~ props.data:", props.data);
     fecthFormdata();
   }
 });
@@ -465,32 +473,26 @@ onMounted(async () => {
                 <q-item-label>{{ list.output_desc }}</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="evaluate_expenct_level[i].level"
-                  :val="list.id"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                <q-btn-group outline>
+                  <q-btn
+                    :disable="!status"
+                    v-for="(item, index) in 5"
+                    :class="
+                      evaluate_expenct_level[i]?.level == item.toString() &&
+                      'active'
+                    "
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="evaluate_expenct_level[i].level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
             <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
@@ -523,32 +525,25 @@ onMounted(async () => {
                 />
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="evaluate_ouptut[i].level"
-                  :val="list.id"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
+                <q-btn-group outline>
+                  <q-btn
                   :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                    v-for="(item, index) in 5"
+                    :class="
+                      evaluate_ouptut[i]?.level == item.toString() && 'active'
+                    "
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="evaluate_ouptut[i].level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -566,31 +561,23 @@ onMounted(async () => {
                 >
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="knowledge_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
+                <q-btn-group outline>
+                  <q-btn
                   :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                    v-for="(item, index) in 5"
+                    :class="knowledge_level == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="knowledge_level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -606,31 +593,23 @@ onMounted(async () => {
                 >
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="skill_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
+                <q-btn-group outline>
+                  <q-btn
                   :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                    v-for="(item, index) in 5"
+                    :class="skill_level == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="skill_level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -646,31 +625,23 @@ onMounted(async () => {
                 >
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="competency_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
+                <q-btn-group outline>
+                  <q-btn
                   :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                    v-for="(item, index) in 5"
+                    :class="competency_level == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="competency_level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -686,31 +657,23 @@ onMounted(async () => {
                 >
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="learn_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
+                <q-btn-group outline>
+                  <q-btn
                   :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                    v-for="(item, index) in 5"
+                    :class="learn_level == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="learn_level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -727,31 +690,23 @@ onMounted(async () => {
                 >
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="apply_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
+                <q-btn-group outline>
+                  <q-btn
                   :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                    v-for="(item, index) in 5"
+                    :class="apply_level == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="apply_level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -803,31 +758,23 @@ onMounted(async () => {
                 </q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="achievement_other.level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
+                    :class="achievement_other.level == item && 'active'"
+                    outline
+                    :disable="!status"
+                    color="grey-6"
+                    :label="item"
+                    @click="achievement_other.level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -897,32 +844,23 @@ onMounted(async () => {
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="conduct_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                    :disable="!status"
-                  >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
+                  <q-btn-group outline>
+                    <q-btn
+                      v-for="(item, index) in 5"
+                      :disable="!status"
+                      :class="conduct_level[i] == item && 'active'"
+                      outline
+                      color="grey-6"
+                      :label="item"
+                      @click="conduct_level[i] = item"
+                    >
+                      <q-tooltip>
+                        <div class="text-body2">
+                          <span>{{ optionText[index].label }}</span>
+                        </div>
+                      </q-tooltip>
+                    </q-btn>
+                  </q-btn-group>
                 </q-item-section>
               </q-item>
               <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
@@ -946,32 +884,23 @@ onMounted(async () => {
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="moral_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                    :disable="!status"
-                  >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
+                  <q-btn-group outline>
+                    <q-btn
+                      v-for="(item, index) in 5"
+                      :disable="!status"
+                      :class="moral_level[i] == item && 'active'"
+                      outline
+                      color="grey-6"
+                      :label="item"
+                      @click="moral_level[i] = item"
+                    >
+                      <q-tooltip>
+                        <div class="text-body2">
+                          <span>{{ optionText[index].label }}</span>
+                        </div>
+                      </q-tooltip>
+                    </q-btn>
+                  </q-btn-group>
                 </q-item-section>
               </q-item>
               <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
@@ -995,32 +924,23 @@ onMounted(async () => {
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="discipline_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                    :disable="!status"
-                  >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
+                  <q-btn-group outline>
+                    <q-btn
+                      v-for="(item, index) in 5"
+                      :disable="!status"
+                      :class="discipline_level[i] == item && 'active'"
+                      outline
+                      color="grey-6"
+                      :label="item"
+                      @click="discipline_level[i] = item"
+                    >
+                      <q-tooltip>
+                        <div class="text-body2">
+                          <span>{{ optionText[index].label }}</span>
+                        </div>
+                      </q-tooltip>
+                    </q-btn>
+                  </q-btn-group>
                 </q-item-section>
               </q-item>
               <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
@@ -1067,31 +987,23 @@ onMounted(async () => {
                   </q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="behavio_orther.level"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
-                    :disable="!status"
-                  >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
+                  <q-btn-group outline>
+                    <q-btn
+                      v-for="(item, index) in 5"
+                      :disable="!status"
+                      :class="behavio_orther.level == item && 'active'"
+                      outline
+                      color="grey-6"
+                      :label="item"
+                      @click="behavio_orther.level = item"
+                    >
+                      <q-tooltip>
+                        <div class="text-body2">
+                          <span>{{ optionText[index].label }}</span>
+                        </div>
+                      </q-tooltip>
+                    </q-btn>
+                  </q-btn-group>
                 </q-item-section>
               </q-item>
             </q-list>
@@ -1354,4 +1266,19 @@ onMounted(async () => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
index 3091f0caf..835b13c8d 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAdd.vue
@@ -5,6 +5,7 @@ import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
 import { useCounterMixin } from "@/stores/mixin";
 // import { formatDate } from "@fullcalendar/core";
 
+import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
 import { useRoute, useRouter } from "vue-router";
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -16,6 +17,7 @@ const route = useRoute();
 const router = useRouter();
 const probationStore = useProbationDataStore();
 const mixin = useCounterMixin();
+
 const {
   date2Thai,
   success,
@@ -123,6 +125,13 @@ const variablesToWatch = [
 ];
 const ArrayCountbotton = [orientation, self_learning, training_seminar];
 
+const optionText = ref<ListDataText[]>([
+  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
+  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
+  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
+  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
+  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
+]);
 /**
  * get ข้อมูล ลง ตัวแปร
  * @param id personal id
@@ -537,31 +546,25 @@ onMounted(async () => {
                     <q-item-label>{{ list.output_desc }}</q-item-label>
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="evaluate_expenct_level[i].level"
-                      :val="list.id"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="
+                          evaluate_expenct_level[i].level == item.toString() &&
+                          'active'
+                        "
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="evaluate_expenct_level[i].level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
                 <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
@@ -598,31 +601,25 @@ onMounted(async () => {
                     />
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="evaluate_ouptut[i].level"
-                      :val="list.id"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="
+                          evaluate_ouptut[i].level == item.toString() &&
+                          'active'
+                        "
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="evaluate_ouptut[i].level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
                 <!-- <q-separator class="q-my-xs" v-if="i + 1 < list1_2.length" /> -->
@@ -646,30 +643,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="knowledge_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="knowledge_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="knowledge_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -690,30 +679,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="skill_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="skill_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="skill_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -734,30 +715,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="competency_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="competency_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="competency_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -778,30 +751,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="learn_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="learn_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="learn_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -823,30 +788,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="apply_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="apply_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="apply_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -867,30 +824,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="success_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="success_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="success_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -942,30 +891,22 @@ onMounted(async () => {
                     </q-item-label>
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="achievement_other.level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="achievement_other.level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="achievement_other.level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -1037,35 +978,24 @@ onMounted(async () => {
                       <q-item-label>{{ list.label }}</q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        v-model="conduct_level[i]"
-                        :val="list.id"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
-                      >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="
+                            conduct_level[i] == item.toString() && 'active'
+                          "
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="conduct_level[i] = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
                     </q-item-section>
                   </q-item>
                   <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
@@ -1092,36 +1022,26 @@ onMounted(async () => {
                       <q-item-label>{{ list.label }}</q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        v-model="moral_level[i]"
-                        :val="list.id"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="
+                          moral_level[i] == item.toString() &&
+                          'active'
+                        "
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="moral_level[i] = item"
                       >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
-                    </q-item-section>
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
                   </q-item>
                   <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
                 </q-list>
@@ -1147,36 +1067,27 @@ onMounted(async () => {
                       <q-item-label>{{ list.label }}</q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        v-model="discipline_level[i]"
-                        :val="list.id"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="
+                          discipline_level[i] == item.toString() &&
+                          'active'
+                        "
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="discipline_level[i] = item"
                       >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
-                    </q-item-section>
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
+
                   </q-item>
                   <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
                 </q-list>
@@ -1223,35 +1134,23 @@ onMounted(async () => {
                       </q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        v-model="behavio_orther.level"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="behavio_orther.level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="behavio_orther.level = item"
                       >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
-                    </q-item-section>
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
                   </q-item>
                 </q-list>
               </q-card>
@@ -1534,4 +1433,20 @@ onMounted(async () => {
   border: 2px solid #c10015;
   border-radius: 5px;
 }
+
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
index a39f0b494..9d8b56235 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultAddCommander.vue
@@ -10,6 +10,8 @@ import config from "@/app.config";
 
 import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
 
+import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
+
 const $q = useQuasar();
 const route = useRoute();
 const router = useRouter();
@@ -136,6 +138,14 @@ const variablesToWatch = [
 ];
 const ArrayCountbotton = [orientation, self_learning, training_seminar];
 
+const optionText = ref<ListDataText[]>([
+  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
+  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
+  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
+  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
+  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
+]);
+
 /** เช็คข้อมูลก่อน save */
 function savaForm() {
   achievement_strengthRef.value.validate();
@@ -548,31 +558,25 @@ onMounted(async () => {
                     <q-item-label>{{ list.output_desc }}</q-item-label>
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="evaluate_expenct_level[i].level"
-                      :val="list.id"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="
+                          evaluate_expenct_level[i].level == item.toString() &&
+                          'active'
+                        "
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="evaluate_expenct_level[i].level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
                 <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
@@ -608,31 +612,25 @@ onMounted(async () => {
                     />
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="evaluate_ouptut[i].level"
-                      :val="list.id"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="
+                          evaluate_ouptut[i].level == item.toString() &&
+                          'active'
+                        "
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="evaluate_ouptut[i].level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -655,30 +653,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="knowledge_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="knowledge_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="knowledge_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -699,30 +689,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="skill_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="skill_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="skill_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -743,30 +725,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="competency_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="competency_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="competency_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -787,30 +761,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="learn_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="learn_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="learn_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -832,30 +798,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="apply_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="apply_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="apply_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -876,30 +834,22 @@ onMounted(async () => {
                     >
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="success_level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="success_level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="success_level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -951,30 +901,22 @@ onMounted(async () => {
                     </q-item-label>
                   </q-item-section>
                   <q-item-section side>
-                    <q-rating
-                      v-model="achievement_other.level"
-                      max="5"
-                      size="sm"
-                      color="grey"
-                      :color-selected="ratingColors"
-                      label="ระดับการประเมินพฤติกรรม"
-                    >
-                      <template v-slot:tip-1>
-                        <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-2>
-                        <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-3>
-                        <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-4>
-                        <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                      </template>
-                      <template v-slot:tip-5>
-                        <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                      </template>
-                    </q-rating>
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="achievement_other.level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="achievement_other.level = item"
+                      >
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
                   </q-item-section>
                 </q-item>
               </q-list>
@@ -1046,35 +988,24 @@ onMounted(async () => {
                       <q-item-label>{{ list.label }}</q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        v-model="conduct_level[i]"
-                        :val="list.id"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
-                      >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
+                      <q-btn-group outline>
+                        <q-btn
+                          v-for="(item, index) in 5"
+                          :class="
+                            conduct_level[i] == item.toString() && 'active'
+                          "
+                          outline
+                          color="grey-6"
+                          :label="item"
+                          @click="conduct_level[i] = item"
+                        >
+                          <q-tooltip>
+                            <div class="text-body2">
+                              <span>{{ optionText[index].label }}</span>
+                            </div>
+                          </q-tooltip>
+                        </q-btn>
+                      </q-btn-group>
                     </q-item-section>
                   </q-item>
                   <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
@@ -1101,36 +1032,26 @@ onMounted(async () => {
                       <q-item-label>{{ list.label }}</q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        v-model="moral_level[i]"
-                        :val="list.id"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="
+                          moral_level[i] == item.toString() &&
+                          'active'
+                        "
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="moral_level[i] = item"
                       >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
-                    </q-item-section>
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
                   </q-item>
                   <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
                 </q-list>
@@ -1156,36 +1077,27 @@ onMounted(async () => {
                       <q-item-label>{{ list.label }}</q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        v-model="discipline_level[i]"
-                        :val="list.id"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="
+                          discipline_level[i] == item.toString() &&
+                          'active'
+                        "
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="discipline_level[i] = item"
                       >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
-                    </q-item-section>
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
+
                   </q-item>
                   <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
                 </q-list>
@@ -1232,41 +1144,29 @@ onMounted(async () => {
                       </q-item-label>
                     </q-item-section>
                     <q-item-section side>
-                      <q-rating
-                        v-model="behavio_orther.level"
-                        max="5"
-                        size="sm"
-                        color="grey"
-                        :color-selected="ratingColors"
-                        label="ระดับการประเมินพฤติกรรม"
+                    <q-btn-group outline>
+                      <q-btn
+                        v-for="(item, index) in 5"
+                        :class="behavio_orther.level == item && 'active'"
+                        outline
+                        color="grey-6"
+                        :label="item"
+                        @click="behavio_orther.level = item"
                       >
-                        <template v-slot:tip-1>
-                          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-2>
-                          <q-tooltip
-                            >ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-3>
-                          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                        </template>
-                        <template v-slot:tip-4>
-                          <q-tooltip
-                            >สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip
-                          >
-                        </template>
-                        <template v-slot:tip-5>
-                          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                        </template>
-                      </q-rating>
-                    </q-item-section>
+                        <q-tooltip>
+                          <div class="text-body2">
+                            <span>{{ optionText[index].label }}</span>
+                          </div>
+                        </q-tooltip>
+                      </q-btn>
+                    </q-btn-group>
+                  </q-item-section>
                   </q-item>
                 </q-list>
               </q-card>
             </div>
-
             <!-- <FormComment /> -->
+
             <div class="row col-12 q-gutter-lg no-margin">
               <div class="col-12 row">
                 <div class="col-12 text-top0 row items-center q-pl-lg">
@@ -1539,4 +1439,20 @@ onMounted(async () => {
   border-radius: 5px;
   // color: #c10015;
 }
+
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
index def14c6bd..940597580 100644
--- a/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
+++ b/src/modules/05_placement/components/probation/FormEvaluation/FormSaveResultCommader.vue
@@ -11,6 +11,8 @@ import config from "@/app.config";
 
 import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
 
+import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
+
 const router = useRouter();
 const routeName = router.currentRoute.value.name;
 const $q = useQuasar();
@@ -117,6 +119,14 @@ const props = defineProps({
   fecthAssign: Function,
 });
 
+const optionText = ref<ListDataText[]>([
+  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
+  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
+  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
+  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
+  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
+]);
+
 /** ให้ status true */
 function edit() {
   status.value = true;
@@ -470,32 +480,26 @@ onMounted(async () => {
                 <q-item-label>{{ list.output_desc }}</q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="evaluate_expenct_level[i].level"
-                  :val="list.id"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
+                    :disable="!status"
+                    :class="
+                      evaluate_expenct_level[i]?.level == item.toString() &&
+                      'active'
+                    "
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="evaluate_expenct_level[i].level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
             <q-separator class="q-my-xs" v-if="i + 1 < list1_1.length" />
@@ -528,32 +532,25 @@ onMounted(async () => {
                 />
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="evaluate_ouptut[i].level"
-                  :val="list.id"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
+                    :disable="!status"
+                    :class="
+                      evaluate_ouptut[i]?.level == item.toString() && 'active'
+                    "
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="evaluate_ouptut[i].level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -571,31 +568,23 @@ onMounted(async () => {
                 >
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="knowledge_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
+                    :disable="!status"
+                    :class="knowledge_level == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="knowledge_level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -611,31 +600,23 @@ onMounted(async () => {
                 >
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="skill_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
+                    :class="skill_level == item && 'active'"
+                    outline
+                    :disable="!status"
+                    color="grey-6"
+                    :label="item"
+                    @click="skill_level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -651,31 +632,23 @@ onMounted(async () => {
                 >
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="competency_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
+                    :disable="!status"
+                    :class="competency_level == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="competency_level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -691,31 +664,23 @@ onMounted(async () => {
                 >
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="learn_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
+                    :disable="!status"
+                    :class="learn_level == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="learn_level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -732,36 +697,27 @@ onMounted(async () => {
                 >
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="apply_level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
+                    :disable="!status"
+                    :class="apply_level == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="apply_level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
         </q-card>
-
         <q-card class="text-top0 col-xs-12 col-sm-11 q-pa-xs q-pl-sm">
           <q-list dense>
             <q-item dense tag="label" v-ripple>
@@ -809,31 +765,23 @@ onMounted(async () => {
                 </q-item-label>
               </q-item-section>
               <q-item-section side>
-                <q-rating
-                  v-model="achievement_other.level"
-                  max="5"
-                  size="sm"
-                  color="grey"
-                  :color-selected="ratingColors"
-                  label="ระดับการประเมินพฤติกรรม"
-                  :disable="!status"
-                >
-                  <template v-slot:tip-1>
-                    <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-2>
-                    <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-3>
-                    <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-4>
-                    <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                  </template>
-                  <template v-slot:tip-5>
-                    <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                  </template>
-                </q-rating>
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
+                    :disable="!status"
+                    :class="achievement_other.level == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="achievement_other.level = item"
+                  >
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
               </q-item-section>
             </q-item>
           </q-list>
@@ -894,6 +842,7 @@ onMounted(async () => {
             <q-icon name="mdi-label" color="grey-4" class="q-pr-sm" />
             2.1 ความประพฤติ
           </div>
+
           <q-card
             flat
             bordered
@@ -905,33 +854,24 @@ onMounted(async () => {
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="conduct_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
                     :disable="!status"
+                    :class="conduct_level[i] == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="conduct_level[i] = item"
                   >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
-                </q-item-section>
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
+              </q-item-section>
               </q-item>
               <q-separator class="q-my-xs" v-if="i + 1 < list2_1.length" />
             </q-list>
@@ -954,33 +894,24 @@ onMounted(async () => {
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="moral_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
                     :disable="!status"
+                    :class="moral_level[i] == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="moral_level[i] = item"
                   >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
-                </q-item-section>
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
+              </q-item-section>
               </q-item>
               <q-separator class="q-my-xs" v-if="i + 1 < list2_2.length" />
             </q-list>
@@ -1003,33 +934,24 @@ onMounted(async () => {
                   <q-item-label>{{ list.label }}</q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="discipline_level[i]"
-                    :val="list.id"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
                     :disable="!status"
+                    :class="discipline_level[i] == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="discipline_level[i] = item"
                   >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
-                </q-item-section>
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
+              </q-item-section>
               </q-item>
               <q-separator class="q-my-xs" v-if="i + 1 < list2_3.length" />
             </q-list>
@@ -1075,38 +997,29 @@ onMounted(async () => {
                   </q-item-label>
                 </q-item-section>
                 <q-item-section side>
-                  <q-rating
-                    v-model="behavio_orther.level"
-                    max="5"
-                    size="sm"
-                    color="grey"
-                    :color-selected="ratingColors"
-                    label="ระดับการประเมินพฤติกรรม"
+                <q-btn-group outline>
+                  <q-btn
+                    v-for="(item, index) in 5"
                     :disable="!status"
+                    :class="behavio_orther.level == item && 'active'"
+                    outline
+                    color="grey-6"
+                    :label="item"
+                    @click="behavio_orther.level = item"
                   >
-                    <template v-slot:tip-1>
-                      <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-2>
-                      <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-3>
-                      <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-4>
-                      <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-                    </template>
-                    <template v-slot:tip-5>
-                      <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-                    </template>
-                  </q-rating>
-                </q-item-section>
+                    <q-tooltip>
+                      <div class="text-body2">
+                        <span>{{ optionText[index].label }}</span>
+                      </div>
+                    </q-tooltip>
+                  </q-btn>
+                </q-btn-group>
+              </q-item-section>
               </q-item>
             </q-list>
           </q-card>
         </div>
 
-        <!-- <FormComment /> -->
         <div class="row col-12 q-gutter-lg no-margin">
           <div class="col-12 row">
             <div class="col-12 text-top0 row items-center q-pl-lg">
@@ -1371,4 +1284,19 @@ onMounted(async () => {
 .q-card {
   box-shadow: 0px 0px 0px 0px !important;
 }
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/05_placement/components/probation/SummarySurvey.vue b/src/modules/05_placement/components/probation/SummarySurvey.vue
index 7d8cae806..519635cd6 100644
--- a/src/modules/05_placement/components/probation/SummarySurvey.vue
+++ b/src/modules/05_placement/components/probation/SummarySurvey.vue
@@ -7,6 +7,15 @@ import { useProbationDataStore } from "@/modules/05_placement/storeProbation";
 import http from "@/plugins/http";
 import config from "@/app.config";
 import criterion from "@/modules/05_placement/components/Other/Criterion.vue";
+import type { ListDataText } from "@/modules/05_placement/interface/index/Main";
+
+const optionText = ref<ListDataText[]>([
+  { value: "1", label: "ต่ำกว่าความคาดหวังมาก (1)" },
+  { value: "2", label: "ต่ำกว่าความคาดหวังค่อนข้างมาก (2)" },
+  { value: "3", label: "เป็นไปตามความคาดหวัง (3)" },
+  { value: "4", label: "สูงว่าความคาดหวังค่อนข้างมาก (4)" },
+  { value: "5", label: "สูงกว่าความคาดหวังมาก (5)" },
+]);
 const probationStore = useProbationDataStore();
 const { ratingColors } = probationStore;
 const $q = useQuasar();
@@ -66,7 +75,7 @@ async function getSurveyData() {
 }
 
 /** save ข้อมูล */
-async function save(){
+async function save() {
   await myForm.value!.validate().then((result: boolean) => {
     if (result && answer3.value !== 0) {
       const data = {
@@ -91,7 +100,7 @@ async function save(){
       classBordered.value = "border_custom";
     }
   });
-};
+}
 /** ถ้าเป็น 0 ใส่ class */
 watch(answer3, () => {
   if (answer3.value == 0) {
@@ -156,32 +165,26 @@ onMounted(() => {
         ความพึงพอใจกับการทดลองปฏิบัติหน้าที่ราชการของคุณอยู่ในระดับใด
       </div>
       <q-space />
-      
-      <q-rating
-        :disable="!status"
-        v-model="answer3"
-        max="5"
-        size="sm"
-        color="grey"
-        :color-selected="ratingColors"
-        label="ระดับการประเมินพฤติกรรม"
-      >
-        <template v-slot:tip-1>
-          <q-tooltip>ต่ำกว่าความคาดหวังมาก (1)</q-tooltip>
-        </template>
-        <template v-slot:tip-2>
-          <q-tooltip>ต่ำกว่าความคาดหวังค่อนข้างมาก (2)</q-tooltip>
-        </template>
-        <template v-slot:tip-3>
-          <q-tooltip>เป็นไปตามความคาดหวัง (3)</q-tooltip>
-        </template>
-        <template v-slot:tip-4>
-          <q-tooltip>สูงว่าความคาดหวังค่อนข้างมาก (4)</q-tooltip>
-        </template>
-        <template v-slot:tip-5>
-          <q-tooltip>สูงกว่าความคาดหวังมาก (5)</q-tooltip>
-        </template>
-      </q-rating>
+        <q-btn-group outline>
+          <q-btn
+            v-for="(item, index) in 5"
+            :disable="!status"
+            :class="
+              answer3 == item && 'active'
+            "
+            outline
+            color="grey-6"
+            :label="item"
+            @click="answer3 = item"
+          >
+            <q-tooltip>
+              <div class="text-body2">
+                <span>{{ optionText[index].label }}</span>
+              </div>
+            </q-tooltip>
+          </q-btn>
+        </q-btn-group>
+
     </div>
     <div class="col-12 q-mt-md">
       <q-separator size="3px" color="grey-2" />
@@ -222,4 +225,19 @@ onMounted(() => {
   color: #c10015;
   padding: 10px;
 }
+.q-btn-group--outline > .q-btn-item:not(:last-child):before {
+  border-right: 1px solid #c4c4c4;
+}
+.q-btn-group--outline > .q-btn-item.active {
+  color: #2196f3 !important;
+  background-color: #cde6fb !important;
+}
+.q-btn-group--outline > .q-btn-item + .q-btn-item.active:before {
+  border-left: 1px solid #2196f3 !important;
+  background-color: #cde6fb;
+}
+.q-btn-group--outline > .q-btn-item.active:not(:last-child):before {
+  border: 1px solid #2196f3;
+  background-color: #cde6fb;
+}
 </style>
diff --git a/src/modules/05_placement/interface/index/Main.ts b/src/modules/05_placement/interface/index/Main.ts
index 954625192..022bade04 100644
--- a/src/modules/05_placement/interface/index/Main.ts
+++ b/src/modules/05_placement/interface/index/Main.ts
@@ -4,6 +4,11 @@ interface DataOption {
   name: string;
   disable?: boolean;
 }
+interface ListDataText {
+  value:string
+  label:string
+}
+
 interface DataOption1 {
   id: string | null;
   name: string | null;
@@ -292,7 +297,8 @@ export type {
   Assign,
   AddressData,
   DataProfile,
-  tableType
+  tableType,
+  ListDataText
 };
 
 export { AddressDataDefualt, FamilyDataDefualt };