diff --git a/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue b/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
new file mode 100644
index 000000000..1ff6f96ed
--- /dev/null
+++ b/src/modules/14_KPI/components/indicatorByPlan/DetailView.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+  calculateDurationYmd,
+} = useCounterMixin();
+const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
+
+onMounted(() => {});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      flat
+      round
+      dense
+      class="q-mr-sm"
+      icon="mdi-arrow-left"
+      color="primary"
+      @click="router.go(-1)"
+    />
+    {{ `${title}คัวชี้วัดตามแผนปฏิบัติราชการประจำปี` }}
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/14_KPI/components/indicatorByRole/DetailView.vue b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
new file mode 100644
index 000000000..80b8efaa2
--- /dev/null
+++ b/src/modules/14_KPI/components/indicatorByRole/DetailView.vue
@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref, reactive, onMounted } from "vue";
+import { useQuasar } from "quasar";
+import { useRouter, useRoute } from "vue-router";
+import http from "@/plugins/http";
+import config from "@/app.config";
+
+import { useCounterMixin } from "@/stores/mixin";
+
+const $q = useQuasar();
+const router = useRouter();
+const route = useRoute();
+const {
+  dialogConfirm,
+  showLoader,
+  hideLoader,
+  messageError,
+  success,
+  date2Thai,
+  calculateDurationYmd,
+} = useCounterMixin();
+const title = ref<string>(route.params.id ? "แก้ไข" : "เพิ่ม");
+
+onMounted(() => {});
+</script>
+<template>
+  <div class="toptitle text-dark col-12 row items-center">
+    <q-btn
+      flat
+      round
+      dense
+      class="q-mr-sm"
+      icon="mdi-arrow-left"
+      color="primary"
+      @click="router.go(-1)"
+    />
+    {{ `${title}คัวชี้วัดตามหน้าที่ความรับผิดชอบ` }}
+  </div>
+</template>
+
+<style scoped></style>
diff --git a/src/modules/14_KPI/router.ts b/src/modules/14_KPI/router.ts
index a4bf5872d..20f02de45 100644
--- a/src/modules/14_KPI/router.ts
+++ b/src/modules/14_KPI/router.ts
@@ -1,10 +1,15 @@
 const roundPage = () => import("@/modules/14_KPI/views/round.vue");
 const IndicatorByPlan = () =>
   import("@/modules/14_KPI/views/indicatorByPlan.vue");
+const IndicatorByPlanDetail = () =>
+  import("@/modules/14_KPI/components/indicatorByPlan/DetailView.vue");
 const IndicatorByRole = () =>
   import("@/modules/14_KPI/views/indicatorByRole.vue");
+const IndicatorByRoleDetail = () =>
+  import("@/modules/14_KPI/components/indicatorByRole/DetailView.vue");
 const competencyPage = () => import("@/modules/14_KPI/views/competency.vue");
-const competencyAddPage = () => import("@/modules/14_KPI/components/competency/AddPage.vue");
+const competencyAddPage = () =>
+  import("@/modules/14_KPI/components/competency/AddPage.vue");
 
 export default [
   {
@@ -27,6 +32,26 @@ export default [
       Role: "evaluateKPI",
     },
   },
+  {
+    path: "/KPI-indicator-plan/add",
+    name: "KPIIndicatorByPlan/Add",
+    component: IndicatorByPlanDetail,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
+  {
+    path: "/KPI-indicator-plan/:id",
+    name: "KPIIndicatorByPlanByid",
+    component: IndicatorByPlanDetail,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
   {
     path: "/KPI-indicator-role",
     name: "KPIIndicatorByRole",
@@ -37,6 +62,26 @@ export default [
       Role: "evaluateKPI",
     },
   },
+  {
+    path: "/KPI-indicator-role/add",
+    name: "KPIIndicatorByRoleAdd",
+    component: IndicatorByRoleDetail,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
+  {
+    path: "/KPI-indicator-role/:id",
+    name: "KPIIndicatorByRoleByid",
+    component: IndicatorByRoleDetail,
+    meta: {
+      Auth: true,
+      Key: [1.1],
+      Role: "evaluateKPI",
+    },
+  },
   {
     path: "/KPI-competency",
     name: "KPICompetency",
diff --git a/src/modules/14_KPI/views/indicatorByPlan.vue b/src/modules/14_KPI/views/indicatorByPlan.vue
index 3e30b7bdb..287b0ba3e 100644
--- a/src/modules/14_KPI/views/indicatorByPlan.vue
+++ b/src/modules/14_KPI/views/indicatorByPlan.vue
@@ -89,9 +89,9 @@ function fetchList() {
 }
 
 function onClickAddOrView(status: boolean = false, id: string = "") {
-  //   status
-  //     ? router.push(`/development/scholarship/${id}`)
-  //     : router.push("/development/scholarship/add");
+  status
+    ? router.push(`/KPI-indicator-plan/${id}`)
+    : router.push("/KPI-indicator-plan/add");
 }
 
 function onClickDelete(id: number) {
diff --git a/src/modules/14_KPI/views/indicatorByRole.vue b/src/modules/14_KPI/views/indicatorByRole.vue
index 5e5878e30..1e7d13264 100644
--- a/src/modules/14_KPI/views/indicatorByRole.vue
+++ b/src/modules/14_KPI/views/indicatorByRole.vue
@@ -89,9 +89,9 @@ function fetchList() {
 }
 
 function onClickAddOrView(status: boolean = false, id: string = "") {
-  //   status
-  //     ? router.push(`/development/scholarship/${id}`)
-  //     : router.push("/development/scholarship/add");
+  status
+    ? router.push(`/KPI-indicator-role/${id}`)
+    : router.push("/KPI-indicator-role/add");
 }
 
 function onClickDelete(id: number) {