diff --git a/frontend/src/hooks/useModal.ts b/frontend/src/hooks/useModal.ts
new file mode 100644
index 0000000000..85198454ed
--- /dev/null
+++ b/frontend/src/hooks/useModal.ts
@@ -0,0 +1,25 @@
+import { Modal } from '@arco-design/web-vue';
+import type { ModalConfig } from '@arco-design/web-vue';
+
+export type ModalType = 'info' | 'success' | 'warning' | 'error';
+
+export type ModalSize = 'small' | 'medium' | 'large' | 'full';
+
+export type ModalMode = 'default' | 'weak';
+
+export interface ModalOptions extends ModalConfig {
+  mode?: ModalMode;
+  type: ModalType;
+  size?: ModalSize;
+}
+
+export default function useModal() {
+  return {
+    openModal: (options: ModalOptions) =>
+      Modal[options.type]({
+        ...options,
+        titleAlign: 'start',
+        modalClass: `ms-modal-${options.mode || 'default'} ms-modal-${options.size || 'medium'}`,
+      }),
+  };
+}
diff --git a/frontend/src/locale/en-US/index.ts b/frontend/src/locale/en-US/index.ts
index ce6b29535c..4d3e3e48cd 100644
--- a/frontend/src/locale/en-US/index.ts
+++ b/frontend/src/locale/en-US/index.ts
@@ -10,6 +10,9 @@ import localeApiTest from '@/views/api-test/locale/en-US';
 export default {
   message: {
     'menu.apiTest': 'Api Test',
+    'menu.settings': 'System Settings',
+    'menu.settings.user': 'User',
+    'menu.settings.organization': 'Organization',
     'navbar.action.locale': 'Switch to English',
     ...sys,
     ...localeSettings,
diff --git a/frontend/src/locale/en-US/system.ts b/frontend/src/locale/en-US/system.ts
new file mode 100644
index 0000000000..ff8b4c5632
--- /dev/null
+++ b/frontend/src/locale/en-US/system.ts
@@ -0,0 +1 @@
+export default {};
diff --git a/frontend/src/locale/zh-CN/index.ts b/frontend/src/locale/zh-CN/index.ts
index 4604f2522d..09c701d88d 100644
--- a/frontend/src/locale/zh-CN/index.ts
+++ b/frontend/src/locale/zh-CN/index.ts
@@ -9,20 +9,9 @@ import localeApiTest from '@/views/api-test/locale/zh-CN';
 
 export default {
   message: {
-    'menu.component': '组件库',
-    'menu.component.demo': '组件示例',
-    'menu.apitest': '接口测试',
-    'menu.dashboard': '仪表盘',
-    'menu.minder': '脑图',
-    'menu.server.dashboard': '仪表盘-服务端',
-    'menu.server.workplace': '工作台-服务端',
-    'menu.server.monitor': '实时监控-服务端',
-    'menu.list': '列表页',
-    'menu.result': '结果页',
-    'menu.exception': '异常页',
-    'menu.form': '表单页',
-    'menu.profile': '详情页',
-    'menu.visualization': '数据可视化',
+    'menu.settings': '系统设置',
+    'menu.settings.user': '用户',
+    'menu.settings.organization': '组织',
     'menu.user': '个人中心',
     'navbar.action.locale': '切换为中文',
     ...sys,
diff --git a/frontend/src/locale/zh-CN/system.ts b/frontend/src/locale/zh-CN/system.ts
new file mode 100644
index 0000000000..ff8b4c5632
--- /dev/null
+++ b/frontend/src/locale/zh-CN/system.ts
@@ -0,0 +1 @@
+export default {};
diff --git a/frontend/src/mock/user.ts b/frontend/src/mock/user.ts
index 8f733b7f84..9c9ca1721c 100644
--- a/frontend/src/mock/user.ts
+++ b/frontend/src/mock/user.ts
@@ -76,7 +76,6 @@ setupMock({
             {
               path: 'list',
               name: 'apiTest',
-              component: () => import('@/views/api-test/index.vue'),
               meta: {
                 locale: 'menu.apiTest',
                 roles: ['*'],
@@ -85,6 +84,26 @@ setupMock({
             },
           ],
         },
+        {
+          path: '/system',
+          name: 'system',
+          meta: {
+            locale: 'menu.settings',
+            icon: 'icon-dashboard',
+            order: 0,
+          },
+          children: [
+            {
+              path: 'user',
+              name: 'user',
+              meta: {
+                locale: 'menu.settings.user',
+                roles: ['*'],
+                icon: 'icon-computer',
+              },
+            },
+          ],
+        },
       ];
       return successResponseWrap(menuList);
     });
diff --git a/frontend/src/router/routes/modules/system.ts b/frontend/src/router/routes/modules/system.ts
new file mode 100644
index 0000000000..5b36635645
--- /dev/null
+++ b/frontend/src/router/routes/modules/system.ts
@@ -0,0 +1,27 @@
+import { DEFAULT_LAYOUT } from '../base';
+import { AppRouteRecordRaw } from '../types';
+
+const ApiTest: AppRouteRecordRaw = {
+  path: '/system',
+  name: 'system',
+  component: DEFAULT_LAYOUT,
+  meta: {
+    locale: 'menu.settings',
+    icon: 'icon-dashboard',
+    order: 0,
+  },
+  children: [
+    {
+      path: 'user',
+      name: 'user',
+      component: () => import('@/views/system/user/index.vue'),
+      meta: {
+        locale: 'menu.settings.user',
+        roles: ['*'],
+        icon: 'icon-computer',
+      },
+    },
+  ],
+};
+
+export default ApiTest;
diff --git a/frontend/src/views/system/user/index.vue b/frontend/src/views/system/user/index.vue
new file mode 100644
index 0000000000..b117b2e0eb
--- /dev/null
+++ b/frontend/src/views/system/user/index.vue
@@ -0,0 +1,21 @@
+<template>
+  <div>
+    <a-button @click="open">Modal</a-button>
+  </div>
+</template>
+
+<script setup lang="ts">
+  import useModal from '@/hooks/useModal';
+
+  const { openModal } = useModal();
+
+  function open() {
+    openModal({
+      mode: 'weak',
+      type: 'info',
+      content: '这是一个弱提示',
+    });
+  }
+</script>
+
+<style lang="less" scoped></style>