diff --git a/src/api/02_organizational/api.organization.ts b/src/api/02_organizational/api.organization.ts
index b07565b76..e90248dfa 100644
--- a/src/api/02_organizational/api.organization.ts
+++ b/src/api/02_organizational/api.organization.ts
@@ -112,4 +112,10 @@ export default {
    * รายการคำร้องขอแก้ไขทะเบียนประวัติ
    */
   requestEdit: `${orgProfile}/edit/`,
+
+  /**
+   * รายการเมนู
+   */
+  orgPermissions: `${organization}/permission/menu`,
+  
 };
diff --git a/src/interface/response/main.ts b/src/interface/response/main.ts
new file mode 100644
index 000000000..f866af099
--- /dev/null
+++ b/src/interface/response/main.ts
@@ -0,0 +1,21 @@
+interface ListMenu {
+  id: string;
+  icon: string;
+  order: number;
+  parentId?: string | null;
+  path: string;
+  sysDescription: string;
+  sysName: string;
+  children?: ListMenu[];
+}
+
+interface ChildConfig {
+  sysName?: string;
+  path: string;
+}
+
+interface ChildLevelTree {
+  [key: string]: ChildConfig[];
+}
+
+export type { ListMenu, ChildLevelTree, ChildConfig };
diff --git a/src/stores/menuList.ts b/src/stores/menuList.ts
new file mode 100644
index 000000000..b532a9d7b
--- /dev/null
+++ b/src/stores/menuList.ts
@@ -0,0 +1,115 @@
+import { defineStore } from "pinia";
+import { ref } from "vue";
+
+import type {
+  ListMenu,
+  ChildLevelTree,
+  ChildConfig,
+} from "@/interface/response/main";
+
+export const useMenuDataStore = defineStore("menuUse", () => {
+  const menuList = ref<ListMenu[]>([
+    {
+      id: "dashboard",
+      order: 0,
+      icon: "mdi-home-variant-outline",
+      sysName: "หน้าแรก",
+      sysDescription: "หน้าแรก",
+      path: "dashboard",
+      parentId: null,
+      children: [],
+    },
+  ]);
+
+  const childLevelTree = ref<ChildLevelTree>({
+    SYS_EVA_INDICATOR: [
+      {
+        sysName: "ตามแผน",
+        path: "KPIIndicatorByPlan",
+      },
+      {
+        sysName: "ตามตำแหน่ง",
+        path: "KPIIndicatorByRole",
+      },
+      {
+        sysName: "งานที่ได้รับมอบหมาย",
+        path: "KPIAssignment",
+      },
+    ],
+    SYS_EXAM_CONTEST: [
+      {
+        sysName: "จัดการรอบสอบแข่งขัน",
+        path: "competePeriod",
+      },
+      {
+        sysName: "สถิติสมัครสอบแข่งขัน",
+        path: "competePeriodStat",
+      },
+    ],
+    SYS_EXAM_SELECT: [
+      {
+        sysName: "จัดการรอบคัดเลือก",
+        path: "qualifyPeriod",
+      },
+      {
+        sysName: "จัดการรอบคัดเลือกคนพิการ",
+        path: "disablePeriod",
+      },
+      {
+        sysName: "จัดการรายชื่อคัดเลือก",
+        path: "manage",
+      },
+      {
+        sysName: "สถิติสมัครคัดเลือก",
+        path: "qualifyPeriodStat",
+      },
+      {
+        sysName: "สถิติสมัครคัดเลือกคนพิการ",
+        path: "qualifyPeriodStatDisable",
+      },
+    ],
+    SYS_DISCIPLINE_INFO: [
+      {
+        sysName: "กรรมการ",
+        path: "disciplineDirector",
+      },
+      {
+        sysName: "ช่องทางการร้องเรียน",
+        path: "disciplineChannel",
+      },
+    ],
+    SYS_EVA_INFO: [
+      {
+        sysName: "กรรมการ",
+        path: "evaluateDirector",
+      },
+      {
+        sysName: "การประชุม",
+        path: "evaluateMeeting",
+      },
+    ],
+  });
+
+  function fetchListMenu(data: ListMenu[]) {
+    data.forEach((item) => {
+      if (item.children && item.children.length !== 0) {
+        item.children.forEach((q: ListMenu) => {
+          const config: any = childLevelTree.value[q.id];
+          if (config) {
+            if (!q.children) {
+              q.children = [];
+            }
+            // เพิ้ม ข้อมูลเลเวล 3
+            q.children.push(...config);
+          }
+        });
+      }
+    });
+    menuList.value.push(...data);
+  }
+
+  return {
+    fetchListMenu,
+    menuList,
+  };
+});
diff --git a/src/views/MainLayout.vue b/src/views/MainLayout.vue
index 169a4c631..7480bb0bc 100644
--- a/src/views/MainLayout.vue
+++ b/src/views/MainLayout.vue
@@ -6,6 +6,7 @@ import { useDataStore } from "@/stores/data";
 import { storeToRefs } from "pinia";
 import { scroll, useQuasar } from "quasar";
 import { useCounterMixin } from "@/stores/mixin";
+import { useMenuDataStore } from "@/stores/menuList";
 
 import http from "@/plugins/http";
 import config from "@/app.config";
@@ -28,6 +29,7 @@ const route = useRoute();
 const router = useRouter();
 const link = ref<string>("");
 const mixin = useCounterMixin(); //เรียกฟังก์ชันกลาง
+const storeMenu = useMenuDataStore();
 const {
   showLoader,
   hideLoader,
@@ -230,10 +232,13 @@ const activeBtn = () => {
  * ยังจับ boolean ผิด จึงต้อง set
  */
 onMounted(async () => {
+  await fetchSys();
+
   if (keycloak.tokenParsed) {
     await fetchroleUser(keycloak.tokenParsed.role);
   }
   await fetchmsgNoread();
+
   // await getDataNotification(1, "NOMAL");
   myEventHandler(null, false);
   window.addEventListener("resize", (e: any) => {
@@ -499,6 +504,20 @@ const handleButtonClick = () => {
     console.log("No manual available for this page:", currentPath);
   }
 };
+
+/**
+ * function fetch รายการเมนูทั้งหมด
+ */
+function fetchSys() {
+  http
+    .get(config.API.orgPermissions)
+    .then((res) => {
+      storeMenu.fetchListMenu(res.data.result);
+    })
+    .catch((err) => {
+      messageError($q, err);
+    });
+}
 </script>
 
 <!-- โครงเว็บ -->
@@ -762,28 +781,15 @@ const handleButtonClick = () => {
           <q-separator color="grey-9" />
           <!-- เมนูย่อย ตอนย่อ -->
           <q-list padding>
-            <div v-for="(menuItem, index) in menuList" :key="index">
-              <div v-if="role.includes(menuItem.role)">
+            <div v-for="(menuItem, index) in storeMenu.menuList" :key="index">
+              <div>
                 <q-item
                   clickable
                   v-ripple
-                  :active="link === menuItem.label"
-                  @click="link = menuItem.label"
+                  :active="link === menuItem.sysName"
+                  @click="link = menuItem.sysName"
                   active-class="text-primary menuActiveMini text-weight-medium"
-                  v-if="
-                    menuItem.key == 2 ||
-                    menuItem.key == 0 ||
-                    menuItem.key == 7 ||
-                    menuItem.key == 8 ||
-                    menuItem.key == 9 ||
-                    menuItem.key == 10 ||
-                    menuItem.key == 11 ||
-                    menuItem.key == 12 ||
-                    menuItem.key == 13 ||
-                    menuItem.key == 14 ||
-                    menuItem.key == 15 ||
-                    menuItem.key == 16
-                  "
+                  v-if="menuItem.children && menuItem.children.length !== 0"
                 >
                   <div class="row items-center no-wrap">
                     <q-icon :name="menuItem.icon" size="20px" class="q-ml-md" />
@@ -798,7 +804,7 @@ const handleButtonClick = () => {
                     self="center left"
                     :offset="[10, 10]"
                   >
-                    {{ menuItem.label }}
+                    {{ menuItem.sysName }}
                   </q-tooltip>
                   <q-menu
                     anchor="top right"
@@ -815,24 +821,25 @@ const handleButtonClick = () => {
                         <!-- เมนูย่อย 2 ชั้น -->
                         <div
                           v-if="
-                            menuItem.key == 2 ||
-                            menuItem.key == 7 ||
-                            menuItem.key == 12 ||
-                            menuItem.key == 13
+                            menuItem.id == 'SYS_EVA_METADATA' ||
+                            menuItem.id == 'SYS_EXAM' ||
+                            menuItem.id == 'SYS_DISCIPLINE' ||
+                            menuItem.id == 'SYS_EVA'
                           "
                         >
                           <q-item
                             dense
                             clickable
                             v-if="
-                              subMenu.key !== 2.0 &&
-                              subMenu.key !== 7.1 &&
-                              subMenu.key !== 12.0 &&
-                              subMenu.key !== 13.0
+                              subMenu.id == 'SYS_EVA_INDICATOR' ||
+                              subMenu.id == 'SYS_EXAM_CONTEST' ||
+                              subMenu.id == 'SYS_EXAM_SELECT' ||
+                              subMenu.id == 'SYS_DISCIPLINE_INFO' ||
+                              subMenu.id == 'SYS_EVA_INFO'
                             "
                           >
                             <q-item-section
-                              >{{ subMenu.label }}
+                              >{{ subMenu.sysName }}
                             </q-item-section>
                             <q-item-section side>
                               <q-icon name="keyboard_arrow_right" />
@@ -847,7 +854,7 @@ const handleButtonClick = () => {
                               <q-list class="text-white q-py-sm">
                                 <q-item
                                   v-for="subMenu2 in subMenu.children"
-                                  :key="subMenu2.label"
+                                  :key="subMenu2.sysName"
                                   :to="{ name: `${subMenu2.path}` }"
                                   dense
                                   class="q-pl-md text-body2"
@@ -856,7 +863,7 @@ const handleButtonClick = () => {
                                 >
                                   <q-item-section>
                                     <q-item-label>{{
-                                      subMenu2.label
+                                      subMenu2.sysName
                                     }}</q-item-label>
                                   </q-item-section>
                                 </q-item>
@@ -873,7 +880,7 @@ const handleButtonClick = () => {
                             :to="{ name: `${subMenu.path}` }"
                           >
                             <q-item-section>
-                              <q-item-label>{{ subMenu.label }}</q-item-label>
+                              <q-item-label>{{ subMenu.sysName }}</q-item-label>
                             </q-item-section>
                           </q-item>
                         </div>
@@ -887,7 +894,7 @@ const handleButtonClick = () => {
                             :to="{ name: `${subMenu.path}` }"
                           >
                             <q-item-section>
-                              <q-item-label>{{ subMenu.label }}</q-item-label>
+                              <q-item-label>{{ subMenu.sysName }}</q-item-label>
                             </q-item-section>
                           </q-item>
                         </div>
@@ -899,8 +906,8 @@ const handleButtonClick = () => {
                   clickable
                   v-ripple
                   :to="{ name: `${menuItem.path}` }"
-                  :active="link === menuItem.label"
-                  @click="link = menuItem.label"
+                  :active="link === menuItem.sysName"
+                  @click="link = menuItem.sysName"
                   active-class="text-primary menuActiveMini"
                   v-else
                 >
@@ -914,7 +921,7 @@ const handleButtonClick = () => {
                     self="center left"
                     :offset="[10, 10]"
                   >
-                    {{ menuItem.label }}
+                    {{ menuItem.sysName }}
                   </q-tooltip>
                 </q-item>
               </div>
@@ -946,28 +953,15 @@ const handleButtonClick = () => {
         </q-toolbar>
         <q-separator inset color="grey-9" />
         <q-list padding>
-          <div v-for="(menuItem, index) in menuList" :key="index">
+          <div v-for="(menuItem, index) in storeMenu.menuList" :key="index">
             <!-- เมนูย่อย -->
-            <div v-if="role.includes(menuItem.role)">
+            <div>
               <q-expansion-item
                 group="somegroup"
                 class="menuSub"
                 expand-icon="mdi-chevron-down"
                 expanded-icon="mdi-chevron-up"
-                v-if="
-                  menuItem.key == 2 ||
-                  menuItem.key == 0 ||
-                  menuItem.key == 7 ||
-                  menuItem.key == 8 ||
-                  menuItem.key == 9 ||
-                  menuItem.key == 10 ||
-                  menuItem.key == 11 ||
-                  menuItem.key == 12 ||
-                  menuItem.key == 13 ||
-                  menuItem.key == 14 ||
-                  menuItem.key == 15 ||
-                  menuItem.key == 16
-                "
+                v-if="menuItem.children && menuItem.children.length !== 0"
               >
                 <template v-slot:header>
                   <q-item-section avatar>
@@ -977,28 +971,29 @@ const handleButtonClick = () => {
                       font-size="20px"
                     />
                   </q-item-section>
-                  <q-item-section>{{ menuItem.label }}</q-item-section>
+                  <q-item-section>{{ menuItem.sysName }}</q-item-section>
                 </template>
 
                 <!-- เมนูย่อย 2 ชั้น (สรรหา) -->
                 <div
                   v-if="
-                    menuItem.key == 2 ||
-                    menuItem.key == 7 ||
-                    menuItem.key == 12 ||
-                    menuItem.key == 13
+                    menuItem.id == 'SYS_EVA_METADATA' ||
+                    menuItem.id == 'SYS_EXAM' ||
+                    menuItem.id == 'SYS_DISCIPLINE' ||
+                    menuItem.id == 'SYS_EVA'
                   "
                 >
                   <div v-for="(subMenu, i) in menuItem.children" :key="i">
                     <q-expansion-item
                       switch-toggle-side
                       dense-toggle
-                      :label="subMenu.label"
+                      :label="subMenu.sysName"
                       v-if="
-                        subMenu.key !== 2.0 &&
-                        subMenu.key !== 7.1 &&
-                        subMenu.key !== 12.0 &&
-                        subMenu.key !== 13.0
+                        subMenu.id == 'SYS_EVA_INDICATOR' ||
+                        subMenu.id == 'SYS_EXAM_CONTEST' ||
+                        subMenu.id == 'SYS_EXAM_SELECT' ||
+                        subMenu.id == 'SYS_DISCIPLINE_INFO' ||
+                        subMenu.id == 'SYS_EVA_INFO'
                       "
                       class="expan2"
                       dense
@@ -1009,12 +1004,12 @@ const handleButtonClick = () => {
                         active-class="text-primary active-item text-weight-bold menuSubAct"
                         clickable
                         v-for="subMenu2 in subMenu.children"
-                        :key="subMenu2.key"
+                        :key="subMenu2.id"
                         :to="{ name: `${subMenu2.path}` }"
                       >
                         <q-item-section>
                           <q-item-label class="font-400 subLabel"
-                            >{{ subMenu2.label }}
+                            >{{ subMenu2.sysName }}
                           </q-item-label>
                         </q-item-section>
                       </q-item>
@@ -1028,7 +1023,7 @@ const handleButtonClick = () => {
                       :to="{ name: `${subMenu.path}` }"
                     >
                       <q-item-section>
-                        <q-item-label>{{ subMenu.label }} </q-item-label>
+                        <q-item-label>{{ subMenu.sysName }} </q-item-label>
                       </q-item-section>
                     </q-item>
                   </div>
@@ -1046,7 +1041,7 @@ const handleButtonClick = () => {
                 >
                   <q-item-section>
                     <q-item-label class="font-400">{{
-                      subMenu.label
+                      subMenu.sysName
                     }}</q-item-label>
                   </q-item-section>
                 </q-item>
@@ -1066,18 +1061,12 @@ const handleButtonClick = () => {
               >
                 <q-item-section avatar>
                   <q-avatar size="md" font-size="20px">
-                    <q-icon
-                      :name="
-                        menuItem.key === active
-                          ? menuItem.activeIcon
-                          : menuItem.icon
-                      "
-                    />
+                    <q-icon :name="menuItem.icon" />
                   </q-avatar>
                 </q-item-section>
 
                 <q-item-section>
-                  <q-item-label>{{ menuItem.label }}</q-item-label>
+                  <q-item-label>{{ menuItem.sysName }}</q-item-label>
                 </q-item-section>
               </q-item>
             </div>