diff --git a/src/i18n/eng.ts b/src/i18n/eng.ts
index 321e60e3..4e3da82e 100644
--- a/src/i18n/eng.ts
+++ b/src/i18n/eng.ts
@@ -202,6 +202,7 @@ export default {
       title: 'Manage',
       branch: 'Branch',
       personnel: 'Personnel',
+      group: 'group',
       productService: 'Product and Service',
       workflow: 'Workflow',
       property: 'Property',
diff --git a/src/i18n/tha.ts b/src/i18n/tha.ts
index cbe18525..57eeb57d 100644
--- a/src/i18n/tha.ts
+++ b/src/i18n/tha.ts
@@ -202,6 +202,7 @@ export default {
       title: 'จัดการ',
       branch: 'สาขา',
       personnel: 'บุคลากร',
+      group: 'กลุ่ม',
       productService: 'สินค้าและบริการ',
       workflow: 'ขั้นตอนการทำงาน',
       property: 'คุณสมบัติ',
diff --git a/src/layouts/DrawerComponent.vue b/src/layouts/DrawerComponent.vue
index 7305e85f..4d7ea910 100644
--- a/src/layouts/DrawerComponent.vue
+++ b/src/layouts/DrawerComponent.vue
@@ -78,6 +78,11 @@ function initMenu() {
           route: '/personnel-management',
           hidden: !canAccess('personnel'),
         },
+        {
+          label: 'group',
+          route: '/group-management',
+          hidden: !canAccess('personnel'),
+        },
         {
           label: 'workflow',
           route: '/workflow',
diff --git a/src/pages/02_group-management/MainPage.vue b/src/pages/02_group-management/MainPage.vue
new file mode 100644
index 00000000..f185a6d1
--- /dev/null
+++ b/src/pages/02_group-management/MainPage.vue
@@ -0,0 +1,67 @@
+<script setup lang="ts">
+import { onMounted, ref, watch } from 'vue';
+import { getInstance } from 'src/services/keycloak';
+import { useNavigator } from 'src/stores/navigator';
+import { useI18n } from 'vue-i18n';
+import { useQuasar } from 'quasar';
+import { initLang } from 'src/utils/ui';
+
+const $q = useQuasar();
+const { locale } = useI18n();
+const navigatorStore = useNavigator();
+const EDM_SERVICE = import.meta.env.VITE_EDM_MICRO_FRONTEND_URL;
+const kc = getInstance();
+const at = ref(kc.token);
+const rt = ref(kc.refreshToken);
+const iframe = ref<InstanceType<typeof HTMLIFrameElement>>();
+
+function sendMessage() {
+  iframe?.value?.contentWindow?.postMessage(
+    {
+      i18n: locale.value,
+      darkMode: $q.dark.isActive,
+    },
+    '*',
+  );
+}
+
+onMounted(() => {
+  initLang();
+  currentLocale.value = locale.value;
+  navigatorStore.current.title = 'menu.dms';
+  navigatorStore.current.path = [
+    {
+      text: '',
+      i18n: true,
+      handler: () => {},
+    },
+  ];
+  sendMessage();
+});
+
+watch(
+  () => kc.token,
+  () => {
+    at.value = kc.token;
+    rt.value = kc.refreshToken;
+  },
+);
+
+watch([locale, $q.dark], () => {
+  sendMessage();
+});
+
+const currentLocale = ref(locale.value);
+</script>
+
+<template>
+  <iframe
+    ref="iframe"
+    :src="`${EDM_SERVICE}/?at=${at}&rt=${rt}&lang=${currentLocale}/user`"
+    frameborder="0"
+    class="full-width full-height rounded"
+    allowtransparency="true"
+  ></iframe>
+</template>
+
+<style scoped></style>
diff --git a/src/router/routes.ts b/src/router/routes.ts
index 86a7fa2a..d878ff0c 100644
--- a/src/router/routes.ts
+++ b/src/router/routes.ts
@@ -90,6 +90,11 @@ const routes: RouteRecordRaw[] = [
         name: 'document-management',
         component: () => import('pages/06_edm/MainPage.vue'),
       },
+      {
+        path: '/group-management',
+        name: '/group-management',
+        component: () => import('pages/02_group-management/MainPage.vue'),
+      },
       {
         path: '/agencies-management',
         name: 'agencies-management',