diff --git a/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue
index e7927f45..356fddb0 100644
--- a/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/enterprise/src/layouts/MenusLayout.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { MenusLayout } from '@cskefu/shared-ui'
-import { MenuOption, NMenu } from 'naive-ui'
+import { MenuOption } from 'naive-ui'
 
 import routes from '../routes'
 import { routesToMenus } from '@cskefu/shared-utils'
+import { Menu } from '@cskefu/shared-ui'
 
 const menuOptions: MenuOption[] = routesToMenus(routes)
 </script>
 <template>
   <MenusLayout>
-    <n-menu :options="menuOptions" />
+    <Menu :options="menuOptions" />
   </MenusLayout>
 </template>
diff --git a/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue
index a0c59d60..b6c27e8c 100644
--- a/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/organization/src/layouts/MenusLayout.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
 import { MenusLayout } from '@cskefu/shared-ui'
-import { MenuOption, NMenu } from 'naive-ui'
+import { MenuOption } from 'naive-ui'
+
+import { Menu } from '@cskefu/shared-ui'
 
 const menuOptions: MenuOption[] = []
 </script>
 <template>
   <MenusLayout>
-    <n-menu :options="menuOptions" />
+    <Menu :options="menuOptions" />
   </MenusLayout>
 </template>
diff --git a/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue
index e7927f45..356fddb0 100644
--- a/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/seats/src/layouts/MenusLayout.vue
@@ -1,14 +1,15 @@
 <script setup lang="ts">
 import { MenusLayout } from '@cskefu/shared-ui'
-import { MenuOption, NMenu } from 'naive-ui'
+import { MenuOption } from 'naive-ui'
 
 import routes from '../routes'
 import { routesToMenus } from '@cskefu/shared-utils'
+import { Menu } from '@cskefu/shared-ui'
 
 const menuOptions: MenuOption[] = routesToMenus(routes)
 </script>
 <template>
   <MenusLayout>
-    <n-menu :options="menuOptions" />
+    <Menu :options="menuOptions" />
   </MenusLayout>
 </template>
diff --git a/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue
index a0c59d60..610d8ac3 100644
--- a/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/setting/src/layouts/MenusLayout.vue
@@ -1,11 +1,12 @@
 <script setup lang="ts">
 import { MenusLayout } from '@cskefu/shared-ui'
-import { MenuOption, NMenu } from 'naive-ui'
+import { MenuOption } from 'naive-ui'
+import { Menu } from '@cskefu/shared-ui'
 
 const menuOptions: MenuOption[] = []
 </script>
 <template>
   <MenusLayout>
-    <n-menu :options="menuOptions" />
+    <Menu :options="menuOptions" />
   </MenusLayout>
 </template>
diff --git a/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue b/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue
index c05cafcd..4b3a5504 100644
--- a/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue
+++ b/contact-frontend/packages/modules/services/system/src/layouts/MenusLayout.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { MenusLayout } from '@cskefu/shared-ui'
-import { MenuOption, NMenu } from 'naive-ui'
+import { MenuOption } from 'naive-ui'
+import { Menu } from '@cskefu/shared-ui'
 
 import routes from '../routes'
 
@@ -10,6 +11,6 @@ const menuOptions: MenuOption[] = routesToMenus(routes)
 </script>
 <template>
   <MenusLayout>
-    <n-menu :options="menuOptions" />
+    <Menu :options="menuOptions" />
   </MenusLayout>
 </template>
diff --git a/contact-frontend/packages/shared/ui/src/components/Menus.vue b/contact-frontend/packages/shared/ui/src/components/Menus.vue
index e69de29b..a620e97e 100644
--- a/contact-frontend/packages/shared/ui/src/components/Menus.vue
+++ b/contact-frontend/packages/shared/ui/src/components/Menus.vue
@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import { NMenu } from 'naive-ui'
+import { NBadge, MenuOption } from 'naive-ui'
+import { h } from 'vue'
+
+function renderMenuLabel(option: MenuOption) {
+  if (option.comingSoon) {
+    return h(NBadge, { value: 'coming soon', offset: [50, 10] }, () => [
+      h('slot', { class: 'text-gray-900' }, option.label as string),
+    ])
+  }
+  return option.label as string
+}
+</script>
+<template>
+  <n-menu :render-label="renderMenuLabel" />
+</template>
diff --git a/contact-frontend/packages/shared/ui/src/index.ts b/contact-frontend/packages/shared/ui/src/index.ts
index c25c535f..f16d5257 100644
--- a/contact-frontend/packages/shared/ui/src/index.ts
+++ b/contact-frontend/packages/shared/ui/src/index.ts
@@ -1,5 +1,7 @@
 import IndexLayout from './layouts/IndexLayout.vue'
 import MenusLayout from './layouts/MenusLayout.vue'
-import Nav from './components/Nav.vue'
 
-export { IndexLayout, MenusLayout, Nav }
+import Nav from './components/Nav.vue'
+import Menu from './components/Menus.vue'
+
+export { IndexLayout, MenusLayout, Nav, Menu }