diff --git a/src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.ts b/src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.ts
index aaf49f9..afdddf2 100644
--- a/src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.ts
+++ b/src/app/components/competency-assessment/competency-management/group-competencies/edit-group-competencies/edit-group-competencies.component.ts
@@ -68,15 +68,7 @@ export class EditGruopCompetenciesComponent {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    console.log('เพิ่มผู้ใช้งาน');
-  }
-
-  deleteUser() {
-    console.log('ลบผู้ใช้งาน');
-  }
 
-  editUser() {
-    console.log('แก้ไขผู้ใช้งาน');
   }
   
   currentModal = "";
diff --git a/src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.ts b/src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.ts
index 26d2141..c440bea 100644
--- a/src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.ts
+++ b/src/app/components/competency-assessment/competency-management/indicators-and-curriculum/edit-group-indicators/edit-group-indicators.ts
@@ -33,7 +33,6 @@ export class EditGroupIndicators implements OnInit {
   // ฟังก์ชันในการบันทึกข้อมูลที่แก้ไข
   saveData(event: any, id: any): void {
     const updatedText = event.target.innerText;  // ข้อความที่พิมพ์เข้าไป
-    console.log('บันทึกข้อมูล:', id, updatedText);
 
     // เก็บข้อมูลใน localStorage
     localStorage.setItem(`item-${id}`, updatedText);
@@ -93,16 +92,9 @@ export class EditGroupIndicators implements OnInit {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    console.log('เพิ่มผู้ใช้งาน');
+    
   }
 
-  deleteUser() {
-    console.log('ลบผู้ใช้งาน');
-  }
-
-  editUser() {
-    console.log('แก้ไขผู้ใช้งาน');
-  }
 
   currentModal = "";
 
diff --git a/src/app/components/competency-assessment/course-registration/development-course/development-course.component.ts b/src/app/components/competency-assessment/course-registration/development-course/development-course.component.ts
index 86981c2..6058838 100644
--- a/src/app/components/competency-assessment/course-registration/development-course/development-course.component.ts
+++ b/src/app/components/competency-assessment/course-registration/development-course/development-course.component.ts
@@ -65,15 +65,7 @@ export class DevelopmentCourseComponent {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    console.log('เพิ่มผู้ใช้งาน');
-  }
-
-  deleteUser() {
-    console.log('ลบผู้ใช้งาน');
-  }
-
-  editUser() {
-    console.log('แก้ไขผู้ใช้งาน');
+   
   }
   
   currentModal = "";
diff --git a/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.html b/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.html
index 7a64048..a8aaeb2 100644
--- a/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.html
+++ b/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.html
@@ -573,7 +573,7 @@
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-                        data-hs-overlay="#set-idp-development-plan-alert-add-modal" (click)="addUser();showSuccess()">
+                        data-hs-overlay="#set-idp-development-plan-alert-add-modal" (click)="showSuccess()">
                         บันทึกข้อมูล
                     </a>
                 </div>
@@ -609,7 +609,7 @@
                         ย้อนกลับ
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
-                        data-hs-overlay="#set-idp-development-plan-alert-edit-modal" (click)="addUser();showSuccessEdit()">
+                        data-hs-overlay="#set-idp-development-plan-alert-edit-modal" (click)="showSuccessEdit()">
                         บันทึกข้อมูล
                     </a>
                 </div>
@@ -645,7 +645,7 @@
                     </button>
                     <a class="ti-btn ti-btn-success" href="javascript:void(0);"
                         data-hs-overlay="#set-idp-development-plan-alert-delete-modal"
-                        (click)="addUser();showSuccessDelete()">
+                        (click)="showSuccessDelete()">
                         ลบข้อมูล
                     </a>
                 </div>
diff --git a/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.ts b/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.ts
index d13a3ef..425d1a2 100644
--- a/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.ts
+++ b/src/app/components/competency-assessment/idp-development-plan/set-idp-development-plan/set-idp-development-plan.component.ts
@@ -62,19 +62,6 @@ export class SetIdpDevelopmentPlanComponent {
   toggleCheckbox() {
     this.isChecked = !this.isChecked; // สลับสถานะ
   }
-
-  // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
-  addUser() {
-    console.log('เพิ่มผู้ใช้งาน');
-  }
-
-  deleteUser() {
-    console.log('ลบผู้ใช้งาน');
-  }
-
-  editUser() {
-    console.log('แก้ไขผู้ใช้งาน');
-  }
   
   currentModal = "";
   
diff --git a/src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts b/src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts
index 406405f..2526a73 100644
--- a/src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts
+++ b/src/app/components/competency-assessment/name-registration/competency-topic/competency-topic.component.ts
@@ -65,16 +65,9 @@ export class CompetencyTopic {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    console.log('เพิ่มผู้ใช้งาน');
+    
   }
 
-  deleteUser() {
-    console.log('ลบผู้ใช้งาน');
-  }
-
-  editUser() {
-    console.log('แก้ไขผู้ใช้งาน');
-  }
   
   currentModal = "";
   
diff --git a/src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts b/src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts
index a4084f1..6419f86 100644
--- a/src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts
+++ b/src/app/components/competency-assessment/name-registration/type-registration/type-registration.component.ts
@@ -63,18 +63,7 @@ export class TypeRegistration {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    // ฟังก์ชันสำหรับการเพิ่มผู้ใช้งาน
-    console.log('เพิ่มผู้ใช้งาน');
-  }
-
-  deleteUser() {
-    // ฟังก์ชันสำหรับการลบผู้ใช้งาน
-    console.log('ลบผู้ใช้งาน');
-  }
 
-  editUser() {
-    // ฟังก์ชันสำหรับการแก้ไขผู้ใช้งาน
-    console.log('แก้ไขผู้ใช้งาน');
   }
   currentModal = ""
   constructor(private toastr: ToastrService) { }
diff --git a/src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts b/src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts
index ae2dedd..9d633bf 100644
--- a/src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts
+++ b/src/app/components/competency-assessment/setting-competency/competency-configuration/competency-configuration.component.ts
@@ -63,19 +63,9 @@ export class CompetencyConfigurationComponent {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    // ฟังก์ชันสำหรับการเพิ่มผู้ใช้งาน
-    console.log('เพิ่มผู้ใช้งาน');
+    
   }
 
-  deleteUser() {
-    // ฟังก์ชันสำหรับการลบผู้ใช้งาน
-    console.log('ลบผู้ใช้งาน');
-  }
-
-  editUser() {
-    // ฟังก์ชันสำหรับการแก้ไขผู้ใช้งาน
-    console.log('แก้ไขผู้ใช้งาน');
-  }
   currentModal = ""
   constructor(private toastr: ToastrService) { }
   showSuccess() {
diff --git a/src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.ts b/src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.ts
index 9b29b74..41b0edf 100644
--- a/src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.ts
+++ b/src/app/components/competency-assessment/tool-register/assessment-tool/assessment-tool.component.ts
@@ -63,19 +63,9 @@ export class AssessmentToolComponent {
 
   // ฟังก์ชันสำหรับการเพิ่ม ลบ หรือแก้ไข ข้อมูล
   addUser() {
-    // ฟังก์ชันสำหรับการเพิ่มผู้ใช้งาน
-    console.log('เพิ่มผู้ใช้งาน');
+    
   }
 
-  deleteUser() {
-    // ฟังก์ชันสำหรับการลบผู้ใช้งาน
-    console.log('ลบผู้ใช้งาน');
-  }
-
-  editUser() {
-    // ฟังก์ชันสำหรับการแก้ไขผู้ใช้งาน
-    console.log('แก้ไขผู้ใช้งาน');
-  }
   currentModal = ""
   constructor(private toastr: ToastrService) { }
   showSuccess() {
diff --git a/src/app/components/dashboard/dashboard-routing.module.ts b/src/app/components/dashboard/dashboard-routing.module.ts
index 0fc21d8..b174ef9 100644
--- a/src/app/components/dashboard/dashboard-routing.module.ts
+++ b/src/app/components/dashboard/dashboard-routing.module.ts
@@ -31,6 +31,7 @@ import { JobQualificationsComponent } from '../job-detail-components/job-qualifi
 import { JobDetailComponent } from '../job-detail-components/job-detail/job-detail.component';
 import { CommandStructureComponent } from '../job-detail-components/command-structure/command-structure.component';
 import { AssessmentManagementComponent } from '../performance-management-evaluation/assessment-management/assessment-management.component';
+import { JobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/job-position-indicators.component';
 
 
 
@@ -69,6 +70,7 @@ const routes: Routes = [
       { path: "job-detail",title: 'รายละเอียดของงาน', component: JobDetailComponent },
       { path: "command-structure",title: 'โครงสร้างสายการบังคับบัญชา', component: CommandStructureComponent },
       { path: "assessment-management",title: 'การจัดการการประเมิณ', component: AssessmentManagementComponent },
+      { path: "job-position-indicators",title: 'ตัวชี้วัดของตำแหน่งงาน', component: JobPositionIndicatorsComponent },
     ]
   }
 ];
diff --git a/src/app/components/dashboard/dashboard.module.ts b/src/app/components/dashboard/dashboard.module.ts
index e19c7ce..ad30ac8 100644
--- a/src/app/components/dashboard/dashboard.module.ts
+++ b/src/app/components/dashboard/dashboard.module.ts
@@ -81,6 +81,9 @@ import { SubCommandStructureComponent } from '../job-detail-components/command-s
 import { CommandStructureComponent } from '../job-detail-components/command-structure/command-structure.component';
 import { AssessmentManagementComponent } from '../performance-management-evaluation/assessment-management/assessment-management.component';
 import { AssigningApproversComponent } from '../performance-management-evaluation/assessment-management/assigning-approvers/assigning-approvers.component';
+import { SubJobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component';
+import { JobPositionIndicatorsComponent } from '../job-detail-components/job-position-indicators/job-position-indicators.component';
+
 
 
 @NgModule({
@@ -146,6 +149,8 @@ import { AssigningApproversComponent } from '../performance-management-evaluatio
     SubCommandStructureComponent,
     AssessmentManagementComponent,
     AssigningApproversComponent,
+    JobPositionIndicatorsComponent,
+    SubJobPositionIndicatorsComponent,
   ],
   imports: [
     CommonModule,
diff --git a/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.html b/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.html
new file mode 100644
index 0000000..997f29d
--- /dev/null
+++ b/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.html
@@ -0,0 +1,25 @@
+<app-page-header [pathTitle]="pathTitle"></app-page-header>
+<div class="bg-card-white">
+</div>
+<div class="block-main-content">
+    <div class="font-size-18px font-weight-700 pt-1.5rem text-primary px-2rem">
+        ตัวชี้วัดของตำแหน่งงาน
+    </div>
+    <div class="page pt-0.75rem">
+        <div class="border-b border-gray-200 dark:border-white/10 px-2rem">
+            <nav class="-mb-0.5 flex space-x-6 rtl:space-x-reverse">
+                <a class="font-size-16px font-weight-500  hs-tab-active:font-weight-700 hs-tab-active:border-secondary  hs-tab-active:text-secondary pb-3 inline-flex items-center gap-2 border-b-[3px] border-transparent whitespace-nowrap text-gray-500  hover:text-secondary active"
+                    href="javascript:void(0);" id="underline-item-1" data-hs-tab="#underline-1"
+                    aria-controls="underline-1"
+                    (click)="pathTitle = ['การจัดการรายละเอียดงาน','ตัวชี้วัดของตำแหน่งงานd']">
+                    ตัวชี้วัดของตำแหน่งงาน
+                </a>
+            </nav>
+        </div>
+        <div class="mt-3 px-2rem">
+            <div id="underline-1" role="tabpanel" aria-labelledby="underline-item-1">
+                <app-sub-job-position-indicators></app-sub-job-position-indicators>
+            </div>
+        </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.scss b/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.scss
new file mode 100644
index 0000000..e69de29
--- /dev/null
+++ b/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.scss
diff --git a/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.ts b/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.ts
new file mode 100644
index 0000000..e5fedcf
--- /dev/null
+++ b/src/app/components/job-detail-components/job-position-indicators/job-position-indicators.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-job-position-Indicators',
+  templateUrl: './job-position-Indicators.component.html',
+  styleUrls: ['./job-position-Indicators.component.scss']
+})
+export class JobPositionIndicatorsComponent {
+  pathTitle = ['การจัดการรายละเอียดงาน', 'ตัวชี้วัดของตำแหน่งงาน']
+}
diff --git a/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.html b/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.html
new file mode 100644
index 0000000..bd3481f
--- /dev/null
+++ b/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.html
@@ -0,0 +1,358 @@
+<div class="text-lg font-sm pt-2rem pb-1rem text-primary">
+    <!-- รายละเอียดสาขาและหน่วยธุรกิจ -->
+</div>
+<div class="page">
+
+    <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
+        <div class="w-full min-height-50px mb-10px justify-between items-center">
+            <div class="flex justify-between">
+                <div class="flex pr-2">
+                    <!-- Content ของ div แรก -->
+                    <div class="px-1">
+                        <button type="button" class="ti-btn ti-btn-soft-secondary h-20px m-0 shadow-md">
+                            <i class="ri-add-line"></i>
+                            นำเข้าข้อมูล
+                        </button>
+
+                        <a class="mx-2 justify-center  -mb-px  inline-flex items-center gap-2 font-weight-500 font-size-12px text-center text-secondary border-secondary border-b-2 align-items-end"
+                            href="javascript:void(0);">
+                            ดาวโหลดตัวอย่างไฟล์
+                        </a>
+                    </div>
+                </div>
+                <div class="flex justify-end">
+                    <div class="px-1">
+                        <div class="relative shadow-md">
+                            <input type="text" id="hs-leading-icon" name="hs-leading-icon"
+                                class="ti-form-input ltr:pl-11 rtl:pr-11 focus:z-10 "
+                                placeholder="Search by No. or Name" [(ngModel)]="search"
+                                (ngModelChange)="searchChange()">
+
+                            <div
+                                class="absolute inset-y-0 ltr:left-0 rtl:right-0 flex items-center pointer-events-none z-20 ltr:pl-4 rtl:pr-4">
+                                <i class="ri-search-line text-gray"></i>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="px-1">
+                        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-danger h-45px m-0 shadow-md"
+                            data-hs-overlay="#sub-job-position-indicators-alert-delete-modal">
+                            <i class="ri-delete-bin-6-line"></i>
+                            Delete
+                        </button>
+                    </div>
+                    <div class="px-1">
+                        <button href="javascript:void(0);" class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                            <i class="ti ti-book fs-l"></i>
+                            Help
+                        </button>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div class="page px-rem">
+            <div class="overflow-auto table-bordered rounded-t-md">
+                <div id="card-type-1" role="tabpanel" aria-labelledby="card-type-item-1">
+                    <div class="overflow-auto shadow-md">
+                        <table class="ti-custom-table ti-custom-table-head ti-custom-table-hover">
+                            <thead>
+                                <tr>
+                                    <ng-container
+                                        *ngFor="let item of ['ลำดับ','รหัสงาน','ชื่อลักษณะงาน (ไทย)','ชื่อลักษณะงาน (อังกฤษ)','การจัดการ']; let f = first; let l = last">
+                                        <th scope="col" class="relative px-10px py-10px bg-soft-secondary text-primary"
+                                            [class.!text-center]="f||l">
+                                            <span class="!text-sm">{{ item }}</span>
+                                            <div class="absolute top-1/2 transform -translate-y-1/2 right-0" *ngIf="!l">
+                                                <i class="ti ti-dots-vertical fs-l"></i>
+                                            </div>
+                                        </th>
+                                    </ng-container>
+                                </tr>
+                            </thead>
+                            <tbody>
+                                <tr *ngFor="let item of[
+                                ['01','001', 'Department Manager 1','Department Manager 1'],
+                                ['02','002', 'Department Manager 2','Department Manager 2'],
+                                ['03','003', 'Department 1-HRD','Department 1-HRD'],
+                                ['04','004', 'Department Manager 3','Department Manager 3'],
+                                ['05','005', 'Department Manager 4','Department Manager 4']];let i = index">
+                                    <td class="flex justify-center">
+                                        {{item[0]}}
+                                    </td>
+                                    <td>{{item[1]}}</td>
+                                    <td>{{item[2]}}</td>
+                                    <td>{{item[3]}}</td>
+                                    <td class="flex justify-center">
+                                        <i class="ti ti-edit cursor-pointer i-gray fs-l px-1"
+                                            data-hs-overlay="#sub-job-position-indicators-modal-edit"></i>
+                                        <i class="ti ti-trash cursor-pointer i-gray fs-l px-1"
+                                            data-hs-overlay="#sub-job-position-indicators-alert-delete-modal"></i>
+                                    </td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                </div>
+            </div>
+            <nav class="pagination-style-3 overflow-auto my-5" *ngIf="page.length">
+                <ul class="ti-pagination">
+                    <li>
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"
+                            (click)="currentPage = (currentPage-1 || 1)">
+                            <i class="ri-arrow-left-s-line align-middle rtl:rotate-180"></i>
+                        </a>
+                    </li>
+                    <li *ngFor="let item of page;let f = first;let l = last">
+                        <ng-container *ngIf="item==3&&currentPage!=1&&currentPage!=2&&currentPage!=3">
+                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
+                                    class="ri-more-line"></i>
+                            </a>
+                        </ng-container>
+                        <ng-container *ngIf="(f||l)||(item==currentPage-1||item==currentPage||item==currentPage+1)">
+                            <a class="page-link" href="javascript:void(0);" [class.active]="item==currentPage"
+                                (click)="currentPage=item">{{item}}
+                            </a>
+                        </ng-container>
+                        <ng-container
+                            *ngIf="item==page.length-2&&currentPage!=page.length&&currentPage!=page.length-1&&currentPage!=page.length-2">
+                            <a aria-label="anchor" class="page-link" href="javascript:void(0);"><i
+                                    class="ri-more-line"></i>
+                            </a>
+                        </ng-container>
+                    </li>
+                    <li>
+                        <a aria-label="anchor" class="page-link" href="javascript:void(0);"
+                            (click)="currentPage = (currentPage > page.length-1 ? currentPage: currentPage+1 )">
+                            <i class="ri-arrow-right-s-line align-middle rtl:rotate-180"></i>
+                        </a>
+                    </li>
+                </ul>
+            </nav>
+        </div>
+
+
+        <div id="sub-job-position-indicators-modal-add" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+                <div class="max-h-full overflow-hidden ti-modal-content">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            เพิ่มข้อมูลรายละเอียดของงาน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#sub-job-position-indicators-modal-add">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-center">
+                        <div class="flex justify-end" style="padding-right: 1rem;">
+                            <div class="px-1">
+                                <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
+                                    <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
+                                        xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA"
+                                        stroke-width="3.84" transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
+                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
+                                        </g>
+                                        <g id="SVGRepo_iconCarrier">
+                                            <path d="M15 49A24 24 0 0 1 32 8"></path>
+                                            <path d="M49 15a24 24 0 0 1-17 41"></path>
+                                            <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
+                                            <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
+                                        </g>
+                                    </svg>
+                                    Clear
+                                </button>
+                            </div>
+                            <div class="px-1">
+                                <button href="javascript:void(0);"
+                                    class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                                    <i class="ti ti-book fs-l"></i>
+                                    Help
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body mt-1">
+                        <label for="input-label" class="ti-form-label">รหัสงาน</label>
+                        <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (ไทย)*</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (อังกฤษ)</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
+                        <label for="detail_eng" class="ti-form-label mt-2rem">ตัวชี้วัดของตำแหน่งงาน (Key Performance Indicators: KPIs)</label>
+                        <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="5" cols="50">
+1.
+2.
+3.
+4.
+5.
+                        </textarea>
+                        <div class="flex justify-end mt-3rem mb-1rem space-x-4">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#sub-job-position-indicators-alert-add-modal">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#sub-job-position-indicators-alert-add-modal">
+                                บันทึกข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="sub-job-position-indicators-modal-edit" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)]">
+                <div class="max-h-full overflow-hidden ti-modal-content">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            แก้ไขข้อมูลรายละเอียดของงาน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#sub-job-position-indicators-modal-edit">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-center">
+                        <div class="flex justify-end" style="padding-right: 1rem;">
+                            <div class="px-1">
+                                <button type="button" class="ti-btn ti-btn-soft-indigo h-45px m-0 shadow-md">
+                                    <svg class="svg-indigo" width="16" height="16" viewBox="0 0 64.00 64.00"
+                                        xmlns="http://www.w3.org/2000/svg" fill="none" stroke="#595BEA"
+                                        stroke-width="3.84" transform="rotate(45)matrix(-1, 0, 0, 1, 0, 0)">
+                                        <g id="SVGRepo_bgCarrier" stroke-width="0"></g>
+                                        <g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round">
+                                        </g>
+                                        <g id="SVGRepo_iconCarrier">
+                                            <path d="M15 49A24 24 0 0 1 32 8"></path>
+                                            <path d="M49 15a24 24 0 0 1-17 41"></path>
+                                            <polyline points="15.03 40 15.03 48.97 8 48.97"></polyline>
+                                            <polyline points="48.97 24 48.97 15.03 56 15.03"></polyline>
+                                        </g>
+                                    </svg>
+                                    Clear
+                                </button>
+                            </div>
+                            <div class="px-1">
+                                <button href="javascript:void(0);"
+                                    class="ti-btn ti-btn-soft-warning h-45px m-0 shadow-md">
+                                    <i class="ti ti-book fs-l"></i>
+                                    Help
+                                </button>
+                            </div>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body mt-1">
+                        <label for="input-label" class="ti-form-label">รหัสงาน</label>
+                        <input type="text" id="input-label" class="ti-form-input w-1/2 bg-input-readonly" readonly value="001">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (ไทย)*</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
+                        <label for="input-label" class="ti-form-label mt-2rem">ชื่อลักษณะงาน (อังกฤษ)</label>
+                        <input type="text" id="input-label" class="ti-form-input h-10 bg-input-readonly" readonly value="Department Manager 1">
+                        <label for="detail_eng" class="ti-form-label mt-2rem">ตัวชี้วัดของตำแหน่งงาน (Key Performance Indicators: KPIs)</label>
+                        <textarea type="text" id="detail_eng" class="ti-form-input font-bold" rows="5" cols="50">
+1.
+2.
+3.
+4.
+5.
+                        </textarea>
+                        <div class="flex justify-end mt-3rem mb-1rem space-x-4">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#sub-job-position-indicators-modal-edit">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#sub-job-position-indicators-alert-add-modal">
+                                บันทึกข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+        <div id="sub-job-position-indicators-alert-add-modal" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+                <div class="max-h-full overflow-hidden ti-modal-content w-full">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            แจ้งเตือน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#sub-job-position-indicators-alert-add-modal">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body ">
+                        <p class="mt-1 text-gray-800 dark:text-white/70">
+                            ยืนยันการบันทึกข้อมูลหรือไม่
+                        </p>
+
+                        <div class="flex justify-end mt-2rem mb-1rem">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#sub-job-position-indicators-modal-edit">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#sub-job-position-indicators-alert-add-modal" (click)="addBu1();showSuccessAdd()">
+                                บันทึกข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div id="sub-job-position-indicators-alert-delete-modal" class="hs-overlay hidden ti-modal">
+            <div class="hs-overlay-open:mt-7 ti-modal-box mt-0 ease-out h-[calc(100%-3.5rem)] flex items-center">
+                <div class="max-h-full overflow-hidden ti-modal-content w-full">
+                    <div class="ti-modal-header">
+                        <h3 class="text-xxl font-bold text-primary">
+                            แจ้งเตือน
+                        </h3>
+                        <div class="flex justify-end">
+                            <button type="button" class="hs-dropdown-toggle ti-modal-clode-btn text-danger"
+                                data-hs-overlay="#sub-job-position-indicators-alert-delete-modal">
+                                <span class="sr-only">Close</span>
+                                <i class="ti ti-circle-x fs-xxl"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="ti-modal-body ">
+                        <p class="mt-1 text-gray-800 dark:text-white/70">
+                            ยืนยันการลบข้อมูลหรือไม่!
+                        </p>
+
+                        <div class="flex justify-end mt-2rem mb-1rem">
+                            <button type="button"
+                                class="hs-dropdown-toggle ti-btn ti-border font-medium bg-white text-gray-700 shadow-sm align-middle hover:bg-gray-50 focus:ring-offset-white focus:ring-primary dark:bg-bgdark dark:hover:bg-black/20 dark:border-white/10 dark:text-white/70 dark:hover:text-white dark:focus:ring-offset-white/10"
+                                data-hs-overlay="#sub-job-position-indicators-alert-delete-modal">
+                                ย้อนกลับ
+                            </button>
+                            <a class="ti-btn ti-btn-success" href="javascript:void(0);"
+                                data-hs-overlay="#sub-job-position-indicators-alert-delete-modal"
+                                (click)="addBu1();showSuccessDelete()">
+                                ลบข้อมูล
+                            </a>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+
+    </div>
+</div>
\ No newline at end of file
diff --git a/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.scss b/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.scss
new file mode 100644
index 0000000..f929cb7
--- /dev/null
+++ b/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.scss
@@ -0,0 +1,150 @@
+.button-clear {
+  position: absolute;
+  top: 96px;
+  z-index: 1;
+  right: 41vw;
+}
+.button-help {
+  position: absolute;
+  top: 0px;
+  z-index: 1;
+  right: 0vw;
+  margin: 4.2rem;
+  margin-right: 10px; /* เพิ่มใหม่ 12/16*/
+}
+
+table.ti-custom-table th {
+  height: 60px;
+}
+
+table.ti-custom-table thead {
+  height: 50px;
+}
+table.ti-custom-table thead th span {
+  font-size: 12px;
+  font-weight: bold;
+}
+a.custom-link {
+  padding: 10px 40px; /* ปรับ padding ให้เพิ่มขนาด */
+}
+/* สไตล์ของแถบเมนู */
+.nav-tabs {
+  display: flex;
+  width: 100%;
+  cursor: pointer;
+  margin-bottom: 10px;
+  height: 20%;
+}
+
+.nav-item {
+  list-style: none;
+  margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+}
+
+.nav-link {
+  text-decoration: none;
+  padding: 10px 20px;
+  display: inline-block;
+  font-size: large;
+  border-width: 2px 2px 0px 2px;
+  border-style: solid;
+  border-color: #ccc;
+  border-radius: 5px 5px 0px 0px;
+}
+
+.nav-link:hover {
+  background-color: #f0f0f0; /* เปลี่ยนสีเมื่อ hover */
+}
+
+.nav-link.active {
+  color: #ffffff; /* สีตัวอักษรในสถานะ active */
+  font-size: large;
+  border-bottom: 3.5px solid rgb(var(--color-primary)); /* เส้นใต้ */
+  background-color: rgb(var(--color-primary));
+  border-width: 2px 2px 0px 2px;
+  border-style: solid;
+  border-color: rgb(var(--color-primary));
+  border-radius: 5px 5px 0px 0px;
+}
+
+.tab-content {
+  margin-top: 20px;
+}
+
+.tab-pane.active {
+  display: block;
+}
+
+.nav-item-text {
+  list-style: none;
+  margin-right: 10px; /* ช่องว่างระหว่างเมนู */
+}
+.nav-link-text {
+  text-decoration: none;
+  display: inline-block;
+  font-size: large;
+  color: #569bf5;
+  border-bottom: 2px solid #569bf5;
+  line-height: 0.8;
+}
+.ti-pagination .page-link.active {
+  background-color: #569bf5;
+  color: white;
+  border-radius: 50%;
+  padding: 8px 12px;
+}
+.box-body{
+  padding: 0rem;
+}
+.page{
+  min-height: 0vh;
+}
+
+.ti-modal {
+  overflow: hidden;
+}
+.header-title-type {
+  width: 100%;
+  min-height: 50px; /* ใช้ min-height เพื่อให้มีความยืดหยุ่น */
+  // margin-top: 50px;
+  // margin-bottom: 16px;
+  justify-content: space-between; /* จัดเรียงองค์ประกอบภายใน */
+  align-items: center; /* จัดกลางแนวตั้ง */
+  padding-top: 50px;
+  padding-bottom: 1rem;
+}
+// .icon-container {
+//   display: inline-flex;
+//   align-items: center;
+//   justify-content: center;
+//   width: 20px; /* ปรับขนาดตามต้องการ */
+//   height: 20px; /* ปรับขนาดตามต้องการ */
+//   border: 2px solid #2196F3; /* กรอบสีน้ำเงิน */
+//   border-radius: 5px; /* มุมโค้งมนเล็กน้อย */
+//   background-color: #E3F2FD; /* พื้นหลังสีฟ้าอ่อน */
+//   margin-bottom: 10px; /* เว้นระยะห่างจาก textarea */
+// }
+
+// .icon-container i {
+//   font-size: 10px; /* ขนาดไอคอน */
+//   color: #2196F3; /* สีไอคอน */
+// }
+
+.icon-container {
+  display: flex;
+  gap: 1px; /* ระยะห่างระหว่างไอคอน */
+}
+
+.icon-container i {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 20px; /* ขนาดกรอบ */
+  height: 20px;
+  border: 2px solid #2196F3; /* สีกรอบ */
+  border-radius: 4px; /* มุมโค้งมน */
+  background-color: #E3F2FD; /* พื้นหลังสีฟ้าอ่อน */
+  color: #2196F3; /* สีไอคอน */
+  font-size: 10px; /* ขนาดไอคอน */
+}
+
diff --git a/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.ts b/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.ts
new file mode 100644
index 0000000..12c0edc
--- /dev/null
+++ b/src/app/components/job-detail-components/job-position-indicators/sub-job-position-indicators/sub-job-position-indicators.component.ts
@@ -0,0 +1,73 @@
+import { Component, EventEmitter, Input, Output } from '@angular/core';
+import { ToastrService } from 'ngx-toastr';
+import { JobModel, MyJobModel } from 'src/app/shared/model/job.model';
+
+
+@Component({
+  selector: 'app-sub-job-position-indicators',
+  templateUrl: './sub-job-position-indicators.component.html',
+  styleUrls: ['./sub-job-position-indicators.component.scss']
+})
+export class SubJobPositionIndicatorsComponent {
+  currentPage = 1
+    page = Array.from({ length: 1 }, (_, i) => i + 1);
+    jobList: JobModel[] = []
+    job: JobModel = new MyJobModel({})
+    search = ""
+    constructor(
+      private toastr: ToastrService
+    ) { }
+    ngOnInit(): void {
+    }
+    
+    searchChange() {
+      this.currentPage = 1
+      this.page = Array.from({ length: Math.ceil(this.jobListFilter().length / 10) }, (_, i) => i + 1);
+    }
+    jobListFilter() {
+      return this.jobList.filter(x => x.jobid.toLowerCase().includes(this.search) ||
+        x.tdesc.toLowerCase().includes(this.search) ||
+        x.edesc.toLowerCase().includes(this.search))
+    }
+    selectJob(job: JobModel) {
+      // this.showSuccess()
+      this.job = new MyJobModel(job)
+    }
+  
+    showSuccessAdd() {
+      this.toastr.success('บันทึกข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+  
+    showSuccessEdit() {
+      this.toastr.success('เเก้ไขข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+  
+    showSuccessDelete() {
+      this.toastr.success('ลบข้อมูลสำเร็จ', 'เเจ้งเตือน', {
+        timeOut: 3000,
+        positionClass: 'toast-top-right',
+      });
+    }
+    addBu1() {
+      // this.bu1Service.post(this.bu1).subscribe((response:any) => {
+      //   if (response.success) {
+      //     this.getBu1List()
+      //   }
+      // })
+    }
+    deleteJob(job: JobModel) {
+      // this.bu1Service.delete(new MyBu1Model(bu1)).subscribe((response:any) => {
+      //   if (response.success) {
+      //     this.getBu1List()
+      //   }
+      // })
+    }
+  
+  }
+  
\ No newline at end of file
diff --git a/src/app/shared/services/navservice.ts b/src/app/shared/services/navservice.ts
index 45b783e..e36a55f 100644
--- a/src/app/shared/services/navservice.ts
+++ b/src/app/shared/services/navservice.ts
@@ -108,6 +108,7 @@ export class NavService implements OnDestroy {
         { path: '/job-detail', title: 'รายละเอียดของงาน', type: 'link' },
         { path: '/job-qualifications', title: 'คุณสมบัติที่จำเป็นต่อการปฏิบัติหน้าที่', type: 'link' },
         { path: '/job-competency', title: 'ความรู้ ทักษะ ความสามารถในตำเเหน่งงาน', type: 'link' },
+        { path: '/job-position-indicators', title: 'ตัวชี้วัดของตำแหน่งงาน', type: 'link' },
       ],
     },