diff --git a/.github/workflows/dispatch_preview_deploy_with_vercel.yml b/.github/workflows/dispatch_deploy_to_specific_vercel_project.yaml
similarity index 96%
rename from .github/workflows/dispatch_preview_deploy_with_vercel.yml
rename to .github/workflows/dispatch_deploy_to_specific_vercel_project.yaml
index dbf22912dd..df9a459c6a 100644
--- a/.github/workflows/dispatch_preview_deploy_with_vercel.yml
+++ b/.github/workflows/dispatch_deploy_to_specific_vercel_project.yaml
@@ -1,4 +1,4 @@
-name: "[Dispatch] Preview Deploy with Vercel"
+name: "[Dispatch] Deploy to specific vercel project"
 
 on:
   workflow_dispatch:
diff --git a/.github/workflows/check-pull-request.yml b/.github/workflows/pull_request_base_check.yaml
similarity index 88%
rename from .github/workflows/check-pull-request.yml
rename to .github/workflows/pull_request_base_check.yaml
index 401dc0aa87..128a41984c 100644
--- a/.github/workflows/check-pull-request.yml
+++ b/.github/workflows/pull_request_base_check.yaml
@@ -1,5 +1,4 @@
-# .github/workflows/check-pull-request.yml
-name: Check Pull Request
+name: "[Pull Request] Base Check"
 
 on:
   pull_request_target:
diff --git a/.github/workflows/pull_request_code_warning.yml b/.github/workflows/pull_request_code_warning.yaml
similarity index 99%
rename from .github/workflows/pull_request_code_warning.yml
rename to .github/workflows/pull_request_code_warning.yaml
index 388e6c6934..78bd928a71 100644
--- a/.github/workflows/pull_request_code_warning.yml
+++ b/.github/workflows/pull_request_code_warning.yaml
@@ -1,4 +1,4 @@
-name: "[PR] Code Warning"
+name: "[Pull Request] Code Warning"
 
 on:
   pull_request:
diff --git a/.github/workflows/pull_request_deploy_preview.yaml b/.github/workflows/pull_request_deploy_preview.yaml
index 5ab824419c..896a9a1160 100644
--- a/.github/workflows/pull_request_deploy_preview.yaml
+++ b/.github/workflows/pull_request_deploy_preview.yaml
@@ -1,4 +1,4 @@
-name: Deploy Vercel Preview on Comment
+name: "[Pull Request] Deploy Vercel Preview on Comment"
 
 on:
   issue_comment:
diff --git a/.github/workflows/pull_request_review.yml b/.github/workflows/pull_request_review.yaml
similarity index 98%
rename from .github/workflows/pull_request_review.yml
rename to .github/workflows/pull_request_review.yaml
index cb50077c47..ffa7a87a69 100644
--- a/.github/workflows/pull_request_review.yml
+++ b/.github/workflows/pull_request_review.yaml
@@ -1,4 +1,4 @@
-name: "[PR] Review"
+name: "[Pull Request] Review"
 
 on:
   pull_request:
diff --git a/apps/web/package.json b/apps/web/package.json
index 1c6813f0f9..af2ed36885 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -1,6 +1,6 @@
 {
   "name": "web",
-  "version": "2.0.0-dev256",
+  "version": "2.0.0-dev258",
   "private": true,
   "description": "Cloudforet Console Web Application",
   "author": "Cloudforet",
diff --git a/apps/web/src/assets b/apps/web/src/assets
index 8b38ada87a..0e0c045e4c 160000
--- a/apps/web/src/assets
+++ b/apps/web/src/assets
@@ -1 +1 @@
-Subproject commit 8b38ada87a6789f19367086370c32b60e3ccb1f0
+Subproject commit 0e0c045e4ca5a238ebfa3ecf6c7a4ecce4285e29
diff --git a/apps/web/src/common/components/select/DataSelector.vue b/apps/web/src/common/components/select/DataSelector.vue
new file mode 100644
index 0000000000..31a5387bb4
--- /dev/null
+++ b/apps/web/src/common/components/select/DataSelector.vue
@@ -0,0 +1,90 @@
+<script setup lang="ts">
+import {
+    ref, onMounted, toRef, watch,
+} from 'vue';
+
+import { debounce } from 'lodash';
+
+import { PFieldTitle, PContextMenu, useContextMenuItems } from '@cloudforet/mirinae';
+import type { MenuAttachHandler } from '@cloudforet/mirinae/types/hooks/use-context-menu-attach/use-context-menu-attach';
+
+import type { DataSelectorItem } from '@/common/components/select/type';
+
+const props = defineProps<{
+    label?: string;
+    menu?: DataSelectorItem[];
+    handler?: MenuAttachHandler<DataSelectorItem>;
+}>();
+const emit = defineEmits<{(e: 'update:selected', value: DataSelectorItem[]): void;
+}>();
+
+const searchText = ref('');
+const selected = ref<DataSelectorItem[]>([]);
+
+const {
+    refinedMenu,
+    loading,
+    initiateMenu,
+    showMoreMenu,
+    reloadMenu,
+} = useContextMenuItems<DataSelectorItem>({
+    menu: toRef(props, 'menu'),
+    handler: toRef(props, 'handler'),
+    selected,
+    useMenuFiltering: true,
+    searchText,
+    pageSize: 10,
+    hideHeaderWithoutItems: true,
+});
+const handleUpdateSearchText = debounce((text: string) => {
+    searchText.value = text;
+    reloadMenu();
+}, 200);
+
+const handleUpdateSelected = (items: DataSelectorItem[]) => {
+    selected.value = items;
+    emit('update:selected', selected.value);
+};
+
+onMounted(() => {
+    selected.value = [];
+    emit('update:selected', selected.value);
+    initiateMenu();
+});
+
+watch([() => props.menu, () => props.handler], () => {
+    selected.value = [];
+    emit('update:selected', selected.value);
+    initiateMenu();
+});
+</script>
+
+<template>
+    <div>
+        <div class="flex flex-col gap-2">
+            <p-field-title class="py-0 px-3"
+                           :label="props.label"
+                           required
+            />
+            <p-context-menu :menu="refinedMenu"
+                            class="data-selector-context-menu"
+                            :loading="loading"
+                            :search-text="searchText"
+                            searchable
+                            :selected="selected"
+                            @click-show-more="showMoreMenu()"
+                            @update:search-text="handleUpdateSearchText"
+                            @update:selected="handleUpdateSelected"
+            />
+        </div>
+    </div>
+</template>
+
+<style lang="postcss">
+.data-selector-context-menu {
+    border: none;
+    min-height: 16rem;
+    max-height: 360px;
+    overflow-y: auto;
+}
+</style>
diff --git a/apps/web/src/common/components/select/type.ts b/apps/web/src/common/components/select/type.ts
new file mode 100644
index 0000000000..474db0c252
--- /dev/null
+++ b/apps/web/src/common/components/select/type.ts
@@ -0,0 +1,6 @@
+import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
+
+export interface DataSelectorItem extends MenuItem {
+    name: string;
+    label: string;
+}
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormCostDataSourcePopper.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormCostDataSourcePopper.vue
index c2793bc758..f45a3fc994 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormCostDataSourcePopper.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormCostDataSourcePopper.vue
@@ -1,13 +1,8 @@
 <script lang="ts" setup>
 import {
-    computed, onMounted, reactive, toRef, watch,
+    computed, reactive, watch,
 } from 'vue';
 
-import { debounce } from 'lodash';
-
-import {
-    PFieldTitle, PContextMenu, useContextMenuController,
-} from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 import type { AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
@@ -24,6 +19,7 @@ import {
     getVariableModelMenuHandler,
 } from '@/lib/variable-models/variable-model-menu-handler';
 
+import DataSelector from '@/common/components/select/DataSelector.vue';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 
@@ -52,7 +48,6 @@ const state = reactive({
         };
         return getVariableModelMenuHandler([variableModelInfo]);
     }),
-    dataSourceSearchText: '',
     // data type
     dataTypeMenuItems: computed<MenuItem[]>(() => {
         if (!state.selectedDataSource.length) return [];
@@ -69,38 +64,17 @@ const state = reactive({
             { type: 'item', name: 'usage_quantity', label: 'Usage' },
             ...(additionalMenuItems || []),
         ];
-        return dataTypeItems.filter((d) => d.label.toLowerCase().includes(state.dataTypeSearchText.toLowerCase()));
+        return dataTypeItems;
     }),
-    dataTypeSearchText: '',
     selectedDataType: [] as MenuItem[],
 });
-const {
-    refinedMenu,
-    initiateMenu,
-    reloadMenu,
-} = useContextMenuController({
-    targetRef: toRef(state, 'targetRef'),
-    searchText: toRef(state, 'dataSourceSearchText'),
-    handler: toRef(state, 'dataSourceMenuHandler'),
-    selected: toRef(state, 'selectedDataSource'),
-    pageSize: 10,
-});
 
 /* Event */
-const handleUpdateCostDataSourceSearchText = debounce((text: string) => {
-    state.dataSourceSearchText = text;
-    reloadMenu();
-}, 200);
-const handleSelectDataSource = () => {
+const handleSelectDataSource = (items: MenuItem[]) => {
+    state.selectedDataSource = items;
     state.selectedDataType = [];
 };
 
-onMounted(() => {
-    state.selectedDataSource = [];
-    state.selectedDataType = [];
-    initiateMenu();
-});
-
 /* Watcher */
 watch(() => state.selectedDataSource, (val) => {
     state.proxySelectedCostDataSourceId = val[0]?.name;
@@ -113,27 +87,15 @@ watch(() => state.selectedDataType, (val) => {
 <template>
     <div class="widget-form-cost-data-source-popper">
         <div class="data-source-select-col">
-            <p-field-title class="field-title"
-                           :label="i18n.t('Data Source')"
-                           required
-            />
-            <p-context-menu :menu="refinedMenu"
-                            :search-text="state.dataSourceSearchText"
-                            searchable
-                            :selected.sync="state.selectedDataSource"
-                            @update:search-text="handleUpdateCostDataSourceSearchText"
-                            @select="handleSelectDataSource"
+            <data-selector :label="i18n.t('Data Source')"
+                           :handler="state.dataSourceMenuHandler"
+                           @update:selected="handleSelectDataSource"
             />
         </div>
         <div class="data-source-select-col">
-            <p-field-title class="field-title"
-                           :label="i18n.t('Data Type')"
-                           required
-            />
-            <p-context-menu :menu="state.dataTypeMenuItems"
-                            :search-text.sync="state.dataTypeSearchText"
-                            searchable
-                            :selected.sync="state.selectedDataType"
+            <data-selector :label="i18n.t('Data Type')"
+                           :menu="state.dataTypeMenuItems"
+                           @update:selected="state.selectedDataType = $event"
             />
         </div>
     </div>
@@ -151,17 +113,9 @@ watch(() => state.selectedDataType, (val) => {
         gap: 0.5rem;
         width: 16rem;
         padding: 0.75rem 0;
-        .field-title {
-            padding: 0 0.75rem;
-        }
         &:last-child {
             @apply border-r-0;
         }
     }
 }
-
-/* custom design-system component - p-context-menu */
-:deep(.p-context-menu) {
-    border: none;
-}
 </style>
diff --git a/apps/web/src/lib/variable-models/variable-model-menu-handler.ts b/apps/web/src/lib/variable-models/variable-model-menu-handler.ts
index 4d292d0117..1a65d36334 100644
--- a/apps/web/src/lib/variable-models/variable-model-menu-handler.ts
+++ b/apps/web/src/lib/variable-models/variable-model-menu-handler.ts
@@ -1,3 +1,6 @@
+import type { Ref } from 'vue';
+import { isRef } from 'vue';
+
 import type { AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import type { VariableModel } from '@/lib/variable-models/_base/types';
@@ -15,7 +18,8 @@ const _getTitle = (modelInfo: VariableModelMenuHandlerInfo) => {
     return _dataKey ? modelInfo.variableModel[_dataKey].name : modelInfo.variableModel._meta?.name;
 };
 
-export const getVariableModelMenuHandler = (variableModelInfoList: VariableModelMenuHandlerInfo[], options: Record<string, any> = {}): AutocompleteHandler => {
+type Options = Record<string, any>;
+export const getVariableModelMenuHandler = (variableModelInfoList: VariableModelMenuHandlerInfo[], options: Options|Ref<Options> = {}): AutocompleteHandler => {
     const _variableModelInfoList = variableModelInfoList;
     return async (inputText: string, pageStart, pageLimit, filters, resultIndex) => {
         const _query = {
@@ -23,7 +27,7 @@ export const getVariableModelMenuHandler = (variableModelInfoList: VariableModel
             limit: pageLimit ?? 10,
             search: inputText,
             filters: filters?.length ? filters.map((f) => f.name as string) : undefined,
-            options,
+            options: isRef<Options>(options) ? options.value : options,
         };
 
         // if resultIndex is empty, it means that the handler is called for the first time. so, we need to call all variableModels' list().
diff --git a/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue b/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
index 69a181ac4e..7c2d066974 100644
--- a/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
+++ b/apps/web/src/services/cost-explorer/components/CostAnalysisHeader.vue
@@ -192,7 +192,7 @@ watch(() => state.favoriteOptions, async (favoriteOptions) => {
                                icon="ic_info-circle"
                                layout="in-section"
         >
-            {{ $t('COST_EXPLORER.COST_ANALYSIS.UNIFIED_COST_DESC') }}
+            {{ storeState.isAdminMode ? $t('COST_EXPLORER.COST_ANALYSIS.UNIFIED_COST_ADMIN_DESC') : $t('COST_EXPLORER.COST_ANALYSIS.UNIFIED_COST_DESC') }}
         </p-scoped-notification>
         <p-divider class="heading-divider" />
         <cost-analysis-query-form-modal :visible.sync="state.queryFormModalVisible"
diff --git a/apps/web/src/services/dashboards/DashboardsLSB.vue b/apps/web/src/services/dashboards/DashboardsLSB.vue
index 137cbdd77a..4131d19c15 100644
--- a/apps/web/src/services/dashboards/DashboardsLSB.vue
+++ b/apps/web/src/services/dashboards/DashboardsLSB.vue
@@ -229,7 +229,7 @@ callApiWithGrantGuard();
         <template v-if="!storeState.isAdminMode"
                   #slot-shared
         >
-            <l-s-b-collapsible-menu-item v-if="dashboardPageControlGetters.publicDashboardItems.length"
+            <l-s-b-collapsible-menu-item v-if="dashboardPageControlGetters.publicFolderItems.length || dashboardPageControlGetters.publicDashboardItems.length"
                                          class="category-menu-item mt-1"
                                          :item="{
                                              type: 'collapsible',
@@ -246,7 +246,7 @@ callApiWithGrantGuard();
             </l-s-b-collapsible-menu-item>
         </template>
         <template #slot-private>
-            <l-s-b-collapsible-menu-item v-if="dashboardPageControlGetters.privateFolderItems.length"
+            <l-s-b-collapsible-menu-item v-if="dashboardPageControlGetters.privateFolderItems.length || dashboardPageControlGetters.privateDashboardItems.length"
                                          class="category-menu-item mt-1"
                                          :item="{
                                              type: 'collapsible',
diff --git a/apps/web/src/services/project/components/ProjectDetailTabHeader.vue b/apps/web/src/services/project/components/ProjectDetailTabHeader.vue
index b1a70a82de..040e313e89 100644
--- a/apps/web/src/services/project/components/ProjectDetailTabHeader.vue
+++ b/apps/web/src/services/project/components/ProjectDetailTabHeader.vue
@@ -67,9 +67,11 @@ interface ViewInItem {
     to: Location;
 }
 interface Props {
-    id: string;
+    id?: string;
 }
-const props = defineProps<Props>();
+const props = withDefaults(defineProps<Props>(), {
+    id: '',
+});
 // const route = useRoute();
 const router = useRouter();
 const { getProperRouteLocation } = useProperRouteLocation();
@@ -301,7 +303,7 @@ watch(() => projectDetailPageGetters.projectType, async () => {
     await Promise.allSettled([
         fetchUserList(),
     ]);
-});
+}, { immediate: true });
 
 watch(() => projectDetailPageState.projectId, async (projectId) => {
     if (projectId) {
@@ -310,7 +312,7 @@ watch(() => projectDetailPageState.projectId, async (projectId) => {
             projectDetailPageStore.getAlertCounts(projectId),
         ]);
     }
-});
+}, { immediate: true });
 
 
 watch([
@@ -404,7 +406,7 @@ watch(() => projectDetailPageState.projectId, (projectId) => {
                                          height="0.75rem"
                                          color="inherit"
                                     />
-                                    <span>{{ memberState.totalCount }}{{ $t('PROJECT.DETAIL.MEMBERS') }}</span>
+                                    <span>{{ memberState.totalCount }} {{ $t('PROJECT.DETAIL.MEMBERS') }}</span>
                                 </template>
                             </div>
                             <p-i name="ic_dot"
diff --git a/apps/web/src/services/project/pages/ProjectDetailTabPage.vue b/apps/web/src/services/project/pages/ProjectDetailTabPage.vue
index 510b47f347..5cec41f51b 100644
--- a/apps/web/src/services/project/pages/ProjectDetailTabPage.vue
+++ b/apps/web/src/services/project/pages/ProjectDetailTabPage.vue
@@ -183,7 +183,9 @@ onUnmounted(() => {
 
 <template>
     <div class="project-detail-tab-page">
-        <project-detail-tab-header :id="props.id" />
+        <project-detail-tab-header :id="props.id"
+                                   :key="`project-detail-tab-header-${props.id}`"
+        />
         <p-data-loader class="detail-tab-content"
                        :loading="projectDetailPageState.loading"
                        :loader-backdrop-color="BACKGROUND_COLOR"
diff --git a/package-lock.json b/package-lock.json
index db2d70f0d0..cffed442e4 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "cloudforet-console",
-  "version": "2.0.0-dev256",
+  "version": "2.0.0-dev258",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "cloudforet-console",
-      "version": "2.0.0-dev256",
+      "version": "2.0.0-dev258",
       "workspaces": [
         "apps/*",
         "packages/*"
@@ -166,7 +166,7 @@
       }
     },
     "apps/web": {
-      "version": "2.0.0-dev256",
+      "version": "2.0.0-dev258",
       "license": "Apache-2.0",
       "dependencies": {
         "@amcharts/amcharts5": "^5.4.7",
diff --git a/package.json b/package.json
index 06e4ec12dd..56a32ed533 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "cloudforet-console",
-  "version": "2.0.0-dev256",
+  "version": "2.0.0-dev258",
   "private": true,
   "workspaces": [
     "apps/*",
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index 4e89d97664..975916433c 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -32724,6 +32724,27 @@
                     <folder_node>
                         <name>COST_ANALYSIS</name>
                         <children>
+                            <concept_node>
+                                <name>UNIFIED_COST_ADMIN_DESC</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>UNIFIED_COST_DESC</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index a582b25110..523c25c4a7 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -1819,14 +1819,15 @@
 		"ANOMALY_DETECTION_CONFIGURATION": "Anomaly Detection Configuration",
 		"COST_ADVANCED_SETTINGS": "Advanced Settings",
 		"COST_ANALYSIS": {
-			"UNIFIED_COST_DESC": "Unified Cost enables consolidated cost management across multiple data sources."
+			"UNIFIED_COST_ADMIN_DESC": "Unified Cost enables consolidated cost management across multiple data sources. The currency for Unified Cost can be configured on the [Advanced Settings] > [Currency Converter] page.",
+			"UNIFIED_COST_DESC": "Unified Cost enables consolidated cost management across multiple data sources. The currency for each Unified Cost is reflected as configured by admin."
 		},
 		"CURRENCY_CONVERTER": "Currency Converter",
 		"CURRENCY_CONVERTER_PAGE": {
 			"AGGREGATION_DATE": "Aggregation Date",
 			"EXCHANGE_RATE_SOURCE": "Exchange Rate Source",
 			"LAST_DAY_OF_THE_MONTH": "Last day of the month",
-			"NOTIFICATION": "Once aggregated, date changes will take effect starting next month.",
+			"NOTIFICATION": "The currency for Unified Cost can be set on the Cost Analysis page. Once aggregated, date changes will take effect starting next month.",
 			"UPDATE_SUCCESS_ALT": "Currency Settings successfully updated"
 		}
 	},
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index a459f1beb4..7caa4e47b1 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -1819,14 +1819,15 @@
 		"ANOMALY_DETECTION_CONFIGURATION": "異常コスト検知設定",
 		"COST_ADVANCED_SETTINGS": "詳細設定",
 		"COST_ANALYSIS": {
-			"UNIFIED_COST_DESC": "複数のデータソースのコストを一元管理できるようにサポートします。"
+			"UNIFIED_COST_ADMIN_DESC": "複数のデータソースのコストを一元管理できるようにサポートします。Unified Costの通貨は、[詳細設定] > [為替レート設定] ページで設定できます。",
+			"UNIFIED_COST_DESC": "複数のデータソースのコストを一元管理できるようにサポートします。Unified Costの通貨は、管理者が設定した基準に従って反映されます。"
 		},
 		"CURRENCY_CONVERTER": "為替レート設定",
 		"CURRENCY_CONVERTER_PAGE": {
 			"AGGREGATION_DATE": "集計日",
 			"EXCHANGE_RATE_SOURCE": "為替基準",
 			"LAST_DAY_OF_THE_MONTH": "月末",
-			"NOTIFICATION": "集計が完了すると、日付の変更は翌月から適用されます。",
+			"NOTIFICATION": "データソースページで、Unified Costの為替レートを設定できます。費用集計が完了すると、日付の変更は翌月から適用されます。",
 			"UPDATE_SUCCESS_ALT": "通貨設定が正常に更新されました"
 		}
 	},
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 4ff0b64f40..a44a3a6a00 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -1819,14 +1819,15 @@
 		"ANOMALY_DETECTION_CONFIGURATION": "이상 비용 탐지 설정",
 		"COST_ADVANCED_SETTINGS": "고급 설정",
 		"COST_ANALYSIS": {
-			"UNIFIED_COST_DESC": "모든 데이터 소스의 비용을 한 곳에서 통합하여 관리할 수 있도록 지원합니다."
+			"UNIFIED_COST_ADMIN_DESC": "모든 데이터 소스의 비용을 한 곳에서 통합하여 관리할 수 있도록 지원합니다. Unified Cost의 통화는 [고급 설정] > [환율 설정] 페이지에서 설정 가능합니다.",
+			"UNIFIED_COST_DESC": "모든 데이터 소스의 비용을 한 곳에서 통합하여 관리할 수 있도록 지원합니다. Unified Cost의 통화는 관리자가 설정한 기준에 따라 반영됩니다."
 		},
 		"CURRENCY_CONVERTER": "환율 설정",
 		"CURRENCY_CONVERTER_PAGE": {
 			"AGGREGATION_DATE": "집계 날짜",
 			"EXCHANGE_RATE_SOURCE": "환율 기준",
 			"LAST_DAY_OF_THE_MONTH": "매월 마지막일 ",
-			"NOTIFICATION": "집계가 완료되면, 날짜 변경은 다음 달부터 적용됩니다.",
+			"NOTIFICATION": "비용 분석 페이지에서 Unified Cost에 대한 환율을 설정할 수 있습니다. 비용 집계가 완료되면, 날짜 변경은 다음 달부터 적용됩니다.",
 			"UPDATE_SUCCESS_ALT": "환율 설정 업데이트 완료"
 		}
 	},
diff --git a/packages/mirinae/src/controls/dropdown/select-dropdown/type.ts b/packages/mirinae/src/controls/dropdown/select-dropdown/type.ts
index a7c6de4cc0..aef2a8c0bb 100644
--- a/packages/mirinae/src/controls/dropdown/select-dropdown/type.ts
+++ b/packages/mirinae/src/controls/dropdown/select-dropdown/type.ts
@@ -1,5 +1,5 @@
 import type { MenuItem } from '@/controls/context-menu/type';
-import type { MenuAttachHandler, MenuAttachHandlerRes } from '@/hooks/use-context-menu-controller/use-context-menu-attach';
+import type { MenuAttachHandler, MenuAttachHandlerRes } from '@/hooks/use-context-menu-attach/use-context-menu-attach';
 
 export interface SelectDropdownMenuItem extends MenuItem {
     name: string;
diff --git a/packages/mirinae/src/hooks/index.ts b/packages/mirinae/src/hooks/index.ts
index ce8e0aa542..c23b0982b6 100644
--- a/packages/mirinae/src/hooks/index.ts
+++ b/packages/mirinae/src/hooks/index.ts
@@ -1,4 +1,6 @@
 export * from './use-context-menu-controller/use-context-menu-controller';
+export * from './use-context-menu-attach/use-context-menu-attach';
+export * from './use-context-menu-items/use-context-menu-items';
 export * from './use-context-menu-style/use-context-menu-style';
 export * from './use-query-search/use-query-search';
 export * from './use-ignore-window-arrow-keydown-events/use-ignore-window-arrow-keydown-events';
diff --git a/packages/mirinae/src/hooks/use-context-menu-attach/UseContextMenuAttach.mdx b/packages/mirinae/src/hooks/use-context-menu-attach/UseContextMenuAttach.mdx
new file mode 100644
index 0000000000..5299161018
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-attach/UseContextMenuAttach.mdx
@@ -0,0 +1,44 @@
+{/* useContextMenuAttach.mdx */}
+
+import {Canvas, Meta, Controls} from '@storybook/blocks';
+
+import * as useContextMenuAttachStories from './use-context-menu-attach.stories';
+
+<Meta of={useContextMenuAttachStories}/>
+
+
+# useContextMenuAttach
+
+Handles attaching context menus to DOM elements dynamically based on interactions.
+
+## Type Declarations
+
+```typescript
+interface UseContextMenuAttachOptions<Item extends MenuItem = MenuItem> {
+    attachHandler?: Ref<MenuAttachHandler<Item>|undefined>; // custom handler
+    menu?: Ref<Item[]>; // required when to use default attach handler. one of menu or attachHandler is required.
+    searchText?: Ref<string>; // it will be passed to the attach handler as the argument, so the handler can filter the items based on this text.
+    pageSize?: Ref<number|undefined>|number; // required when to use show more button to attach items
+    filterItems?: Ref<Item[]>; // items to be filtered out from the attached menu
+}
+
+interface UseContextMenuAttachReturns<Item> {
+    attachedMenu: Ref<Item[]>;
+    attachLoading: Ref<boolean>;
+    resetMenuAndPagination: () => void;
+    attachMenuItems: (resultIndex?: number) => Promise<void>;
+}
+```
+
+## Usage
+<br/>
+
+### Basic
+<Canvas of={useContextMenuAttachStories.Basic}/>
+
+### Playground
+<Canvas of={useContextMenuAttachStories.Playground}/>
+<Controls of={useContextMenuAttachStories.Playground}/>
+
+<br/>
+<br/>
diff --git a/packages/mirinae/src/hooks/use-context-menu-attach/story-helper.ts b/packages/mirinae/src/hooks/use-context-menu-attach/story-helper.ts
new file mode 100644
index 0000000000..65c7ca9529
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-attach/story-helper.ts
@@ -0,0 +1,95 @@
+import type { ArgTypes, Parameters, Args } from '@storybook/vue';
+
+import { getContextMenuItems } from '@/controls/context-menu/mock';
+
+import type { UseContextMenuAttachOptions } from './use-context-menu-attach';
+
+export const getUseContextMenuAttachArgs = (): Args => ({
+    attachHandler: undefined,
+    menu: getContextMenuItems(),
+    searchText: '',
+    pageSize: 3,
+    filterItems: [],
+});
+
+export const getUseContextMenuAttachParameters = (): Parameters => ({});
+
+export const getUseContextMenuAttachArgTypes = (): ArgTypes<UseContextMenuAttachOptions> => ({
+    attachHandler: {
+        name: 'attachHandler',
+        type: { name: 'other', value: 'function' },
+        description: 'The handler function for attaching items. If not provided, the default handler will be used which works with the `menu` prop.',
+        table: {
+            type: {
+                summary: 'function',
+            },
+            category: 'options',
+            defaultValue: {
+                summary: 'undefined',
+            },
+        },
+        control: 'object',
+    },
+    menu: {
+        name: 'menu',
+        type: { name: 'other', value: 'array' },
+        description: 'Full menu items. This is used as the basis for the default attach handler.',
+        table: {
+            type: {
+                summary: 'array',
+            },
+            category: 'options',
+            defaultValue: {
+                summary: '[]',
+            },
+        },
+        control: 'object',
+    },
+    searchText: {
+        name: 'searchText',
+        type: { name: 'string' },
+        description: 'The search text to filter the menu items by handler. It will be passed to the attach handler as the argument, so the handler can filter the items based on this text.',
+        table: {
+            type: {
+                summary: 'string',
+            },
+            category: 'options',
+            defaultValue: {
+                summary: '',
+            },
+        },
+        control: 'text',
+    },
+    pageSize: {
+        name: 'pageSize',
+        type: { name: 'number' },
+        description: 'The number of items to attach at once.',
+        table: {
+            type: {
+                summary: 'number',
+            },
+            category: 'options',
+            defaultValue: {
+                summary: '10',
+            },
+        },
+        control: 'number',
+    },
+    filterItems: {
+        name: 'filterItems',
+        type: { name: 'other', value: 'array' },
+        description: 'The items to filter the menu items. This is used for filtering the result. '
+            + 'It will be passed to the attach handler as the argument, so the handler can filter the items based on it. '
+            + 'In case of using the `menu` prop, result items will be filtered by this prop automatically.',
+        table: {
+            type: {
+                summary: 'array',
+            },
+            category: 'options',
+            defaultValue: {
+                summary: 'undefined',
+            },
+        },
+        control: 'object',
+    },
+});
diff --git a/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.stories.ts b/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.stories.ts
new file mode 100644
index 0000000000..f6557e4f23
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.stories.ts
@@ -0,0 +1,96 @@
+import { ref, computed } from 'vue';
+
+import type { Meta, StoryObj } from '@storybook/vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+import PButton from '@/controls/buttons/button/PButton.vue';
+import { getContextMenuItems } from '@/controls/context-menu/mock';
+import PContextMenu from '@/controls/context-menu/PContextMenu.vue';
+
+import {
+    getUseContextMenuAttachArgs, getUseContextMenuAttachArgTypes, getUseContextMenuAttachParameters,
+} from './story-helper';
+import type { UseContextMenuAttachOptions } from './use-context-menu-attach';
+import { useContextMenuAttach } from './use-context-menu-attach';
+
+type UseContextMenuAttachPropsAndCustomArgs = ComponentProps<UseContextMenuAttachOptions>;
+
+const meta: Meta<UseContextMenuAttachPropsAndCustomArgs> = {
+    title: 'Hooks/useContextMenuAttach',
+    argTypes: {
+        ...getUseContextMenuAttachArgTypes(),
+    },
+    parameters: {
+        ...getUseContextMenuAttachParameters(),
+    },
+    args: {
+        ...getUseContextMenuAttachArgs(),
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+const Template: Story = {
+    render: (args, { argTypes }) => ({
+        props: Object.keys(argTypes),
+        components: { PContextMenu, PButton },
+        template: `
+            <div>
+                 <div style="margin-bottom: 1rem;">
+                    <p-button @click="attachMenuItems()">Attach</p-button>
+                    <p-button @click="resetMenuAndPagination()">Reset Menu & Pagination</p-button>
+                 </div>
+                <p-context-menu :loading="attachLoading"
+                            :menu="attachedMenu" />
+            </div>
+        `,
+        setup(props) {
+            const {
+                attachedMenu, attachLoading, resetMenuAndPagination, attachMenuItems,
+            } = useContextMenuAttach({
+                menu: computed(() => props.menu),
+                searchText: computed(() => props.searchText),
+                pageSize: computed(() => props.pageSize),
+                filterItems: computed(() => props.filterItems),
+            });
+            return {
+                attachedMenu, attachLoading, resetMenuAndPagination, attachMenuItems,
+            };
+        },
+    }),
+};
+
+export const Basic: Story = {
+    render: () => ({
+        components: { PContextMenu, PButton },
+        template: `
+            <div>
+                <div style="margin-bottom: 1rem;">
+                    <p-button @click="attachMenuItems()">Attach</p-button>
+                    <p-button @click="resetMenuAndPagination()">Reset Menu & Pagination</p-button>
+                </div>
+                <p-context-menu :loading="attachLoading"
+                            :menu="attachedMenu" />
+            </div>
+        `,
+        setup() {
+            const menu = ref(getContextMenuItems());
+            const {
+                attachedMenu, attachLoading, resetMenuAndPagination, attachMenuItems,
+            } = useContextMenuAttach({
+                menu,
+                pageSize: 3,
+            });
+            return {
+                attachedMenu, attachLoading, resetMenuAndPagination, attachMenuItems,
+            };
+        },
+    }),
+};
+
+
+export const Playground: Story = {
+    ...Template,
+};
diff --git a/packages/mirinae/src/hooks/use-context-menu-controller/use-context-menu-attach.ts b/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.ts
similarity index 77%
rename from packages/mirinae/src/hooks/use-context-menu-controller/use-context-menu-attach.ts
rename to packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.ts
index 33c175c3b6..f7e10e38b0 100644
--- a/packages/mirinae/src/hooks/use-context-menu-controller/use-context-menu-attach.ts
+++ b/packages/mirinae/src/hooks/use-context-menu-attach/use-context-menu-attach.ts
@@ -2,6 +2,7 @@ import type { Ref, UnwrapRef } from 'vue';
 import { computed, isRef, ref } from 'vue';
 
 import type { MenuItem } from '@/controls/context-menu/type';
+import { getTextHighlightRegex } from '@/utils';
 
 export interface MenuAttachHandlerRes<Item extends MenuItem = MenuItem> {
     results: Item[];
@@ -16,29 +17,43 @@ export interface MenuAttachHandler<Item extends MenuItem = MenuItem> {
         MenuAttachHandlerRes<Item>|MenuAttachHandlerRes<Item>[];
 }
 
-interface UseContextMenuAttachOptions<Item extends MenuItem = MenuItem> {
+export interface UseContextMenuAttachOptions<Item extends MenuItem = MenuItem> {
     attachHandler?: Ref<MenuAttachHandler<Item>|undefined>; // custom handler
-    menu?: Ref<Item[]>;
-    searchText?: Ref<string>;
-    pageSize?: Ref<number|undefined>|number;
-    filterItems?: Ref<Item[]>;
+    menu?: Ref<Item[]|undefined>; // required when to use default attach handler. one of menu or attachHandler is required.
+    searchText?: Ref<string>; // it will be passed to the attach handler as the argument, so the handler can filter the items based on this text.
+    pageSize?: Ref<number|undefined>|number; // required when to use show more button to attach items
+    filterItems?: Ref<Item[]>; // items to be filtered out from the attached menu
+}
+
+interface UseContextMenuAttachReturns<Item> {
+    attachedMenu: Ref<Item[]>; // the attached menu items.
+    attachLoading: Ref<boolean>;
+    resetMenuAndPagination: () => void;
+    attachMenuItems: (resultIndex?: number) => Promise<void>;
 }
 
 export const useContextMenuAttach = <Item extends MenuItem = MenuItem>({
     attachHandler: _attachHandler, menu, searchText, pageSize: _pageSize, filterItems,
-}: UseContextMenuAttachOptions<Item>) => {
+}: UseContextMenuAttachOptions<Item>): UseContextMenuAttachReturns<Item> => {
     const defaultAttachHandler: MenuAttachHandler<Item> = (inputText, _pageStart, _pageLimit) => {
         const allItems = menu?.value ?? [];
+        const filtered = allItems.filter((item) => getTextHighlightRegex(inputText).test(item.label as string|undefined ?? item.name ?? ''));
         if (_pageStart === undefined || _pageLimit === undefined) { // do not need to slice items
             return {
                 results: allItems,
                 more: false,
             };
         }
+        const _totalCount = _pageStart - 1 + Number(_pageLimit);
+        const _slicedResults = filtered.slice(_pageStart - 1, _totalCount);
         return {
-            results: allItems.slice(_pageStart - 1, _pageStart * _pageLimit),
-            more: _pageStart * _pageLimit < allItems.length + 1,
+            results: _slicedResults,
+            more: _totalCount < filtered.length,
         };
+        // return {
+        //     results: allItems.slice(_pageStart - 1, _pageStart * _pageLimit),
+        //     more: _pageStart * _pageLimit < allItems.length + 1,
+        // };
     };
     const attachHandler = computed<MenuAttachHandler<Item>>(() => {
         if (!_attachHandler?.value) return defaultAttachHandler;
diff --git a/packages/mirinae/src/hooks/use-context-menu-controller/UseContextMenuController.mdx b/packages/mirinae/src/hooks/use-context-menu-controller/UseContextMenuController.mdx
new file mode 100644
index 0000000000..4a26474fa5
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-controller/UseContextMenuController.mdx
@@ -0,0 +1,54 @@
+{/* useContextMenuController.mdx */}
+
+import {Canvas, Meta, Controls} from '@storybook/blocks';
+
+import * as useContextMenuControllerStories from './use-context-menu-controller.stories';
+
+<Meta of={useContextMenuControllerStories}/>
+
+
+# useContextMenuController
+
+The main hook controlling the context menu, integrating item management and style.
+
+## Type Declarations
+
+```typescript
+interface UseContextMenuControllerOptions<Item extends MenuItem = MenuItem> extends
+    Omit<UseContextMenuStyleOptions, 'visibleMenu'|'menuRef'|'useFixedMenuStyle'>,
+    UseContextMenuItemsOptions<Item> {
+    visibleMenu?: Ref<boolean>|boolean; // used for visibility control. related to fixed style feature and focusing feature. give this option or use returned value.
+    contextMenuRef: UseContextMenuStyleOptions['menuRef'];
+    useFixedStyle?: UseContextMenuStyleOptions['useFixedMenuStyle'];
+}
+
+interface UseContextMenuControllerReturns {
+    visibleMenu: Ref<boolean>;
+    refinedMenu: ReturnType<typeof useContextMenuItems>['refinedMenu'];
+    contextMenuStyle: ReturnType<typeof useContextMenuStyle>['contextMenuStyle'];
+    loading: ReturnType<typeof useContextMenuItems>['loading'];
+    showContextMenu: () => void;
+    hideContextMenu: () => void;
+    toggleContextMenu: () => void;
+    focusOnContextMenu: FocusOnContextMenu;
+    initiateMenu: ReturnType<typeof useContextMenuItems>['initiateMenu'];
+    reloadMenu: ReturnType<typeof useContextMenuItems>['reloadMenu'];
+    showMoreMenu: ReturnType<typeof useContextMenuItems>['showMoreMenu'];
+}
+```
+
+## Usage
+<br/>
+
+### Basic
+<Canvas of={useContextMenuControllerStories.Basic}/>
+
+### Reorder by Selection
+<Canvas of={useContextMenuControllerStories.ReorderBySelection}/>
+
+### Playground
+<Canvas of={useContextMenuControllerStories.Playground}/>
+<Controls of={useContextMenuControllerStories.Playground}/>
+
+<br/>
+<br/>
diff --git a/packages/mirinae/src/hooks/use-context-menu-controller/story-helper.ts b/packages/mirinae/src/hooks/use-context-menu-controller/story-helper.ts
new file mode 100644
index 0000000000..23d3e58f7c
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-controller/story-helper.ts
@@ -0,0 +1,48 @@
+import type { ArgTypes, Parameters, Args } from '@storybook/vue';
+
+import { getUseContextMenuItemsArgs, getUseContextMenuItemsArgTypes } from '@/hooks/use-context-menu-items/story-helper';
+import { getUseContextMenuStyleArgs, getUseContextMenuStyleArgTypes } from '@/hooks/use-context-menu-style/story-helper';
+
+import type { UseContextMenuControllerOptions } from './use-context-menu-controller';
+
+export const getUseContextMenuControllerArgs = (): Args => {
+    const useContextMenuStyleArgs = getUseContextMenuStyleArgs();
+    const useContextMenuItemsArgs = getUseContextMenuItemsArgs();
+
+    useContextMenuStyleArgs.contextMenuRef = useContextMenuStyleArgs.menuRef;
+    delete useContextMenuStyleArgs.menuRef;
+
+    useContextMenuItemsArgs.useFixedStyle = useContextMenuStyleArgs.useFixedMenuStyle;
+    delete useContextMenuStyleArgs.useFixedMenuStyle;
+
+    const args: Args = {
+        ...useContextMenuStyleArgs,
+        ...useContextMenuItemsArgs,
+    };
+
+    return args;
+};
+
+export const getUseContextMenuControllerParameters = (): Parameters => ({});
+
+export const getUseContextMenuControllerArgTypes = (): ArgTypes<UseContextMenuControllerOptions> => {
+    const useContextMenuStyleArgTypes: any = getUseContextMenuStyleArgTypes();
+    const useContextMenuItemsArgTypes = getUseContextMenuItemsArgTypes();
+
+    const contextMenuRefArgType = { ...useContextMenuStyleArgTypes.menuRef };
+    contextMenuRefArgType.name = 'contextMenuRef';
+    delete useContextMenuStyleArgTypes.menuRef;
+
+    const useFixedStyleArgType = { ...useContextMenuStyleArgTypes.useFixedMenuStyle };
+    useFixedStyleArgType.name = 'useFixedStyle';
+    delete useContextMenuStyleArgTypes.useFixedMenuStyle;
+
+    const argTypes: ArgTypes<UseContextMenuControllerOptions> = {
+        ...useContextMenuStyleArgTypes,
+        ...useContextMenuItemsArgTypes,
+        contextMenuRef: contextMenuRefArgType,
+        useFixedStyle: useFixedStyleArgType,
+    };
+
+    return argTypes;
+};
diff --git a/packages/mirinae/src/hooks/use-context-menu-controller/use-context-menu-controller.stories.ts b/packages/mirinae/src/hooks/use-context-menu-controller/use-context-menu-controller.stories.ts
new file mode 100644
index 0000000000..3568cb1b54
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-controller/use-context-menu-controller.stories.ts
@@ -0,0 +1,232 @@
+import { computed, ref } from 'vue';
+
+import type { Meta, StoryObj } from '@storybook/vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+import PButton from '@/controls/buttons/button/PButton.vue';
+import { getContextMenuItems } from '@/controls/context-menu/mock';
+import PContextMenu from '@/controls/context-menu/PContextMenu.vue';
+import type { MenuItem } from '@/controls/context-menu/type';
+
+import {
+    getUseContextMenuControllerArgs, getUseContextMenuControllerArgTypes, getUseContextMenuControllerParameters,
+} from './story-helper';
+import type { UseContextMenuControllerOptions } from './use-context-menu-controller';
+import { useContextMenuController } from './use-context-menu-controller';
+
+
+type UseContextMenuControllerPropsAndCustomArgs = ComponentProps<UseContextMenuControllerOptions>;
+
+const meta: Meta<UseContextMenuControllerPropsAndCustomArgs> = {
+    title: 'Hooks/useContextMenuController',
+    argTypes: {
+        ...getUseContextMenuControllerArgTypes(),
+    },
+    parameters: {
+        ...getUseContextMenuControllerParameters(),
+    },
+    args: {
+        ...getUseContextMenuControllerArgs(),
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+const Template: Story = {
+    render: (args, { argTypes }) => ({
+        props: Object.keys(argTypes),
+        components: { PContextMenu, PButton },
+        template: `
+            <div>
+                <div style="margin-bottom: 1rem">
+                    <p-button @click="showContextMenu()">Show Menu</p-button>
+                    <p-button @click="hideContextMenu()">Hide Menu</p-button>
+                    <p-button @click="toggleContextMenu()">Toggle Menu</p-button>
+                    <p-button @click="initiateMenu()">Initiate</p-button>
+                    <p-button @click="reloadMenu()">Reload</p-button>
+                </div>
+                <div>
+                    <div ref="targetRef" style="position: relative">Target</div>
+                    <p-context-menu ref="menuRef"
+                                    v-if="visibleMenu"
+                                    :loading="loading"
+                                    :selected="selected"
+                                    :menu="refinedMenu"
+                                    @click-show-more="showMoreMenu()"
+                    />
+                </div>
+            </div>
+        `,
+        setup(props) {
+            const targetRef = ref(null);
+            const menuRef = ref(null);
+            const visibleMenu = ref(false);
+            const selected = computed(() => props.selected ?? []);
+            const {
+                refinedMenu, loading, initiateMenu, reloadMenu, showMoreMenu, showContextMenu, hideContextMenu, toggleContextMenu,
+            } = useContextMenuController({
+                targetRef,
+                contextMenuRef: menuRef,
+                visibleMenu,
+                selected,
+                useFixedStyle: computed(() => props.useFixedStyle),
+                position: computed(() => props.position),
+                menuWidth: computed(() => props.menuWidth),
+                useReorderBySelection: props.useReorderBySelection,
+                useMenuFiltering: props.useMenuFiltering,
+                hideHeaderWithoutItems: props.hideHeaderWithoutItems,
+                menu: computed(() => props.menu),
+                searchText: computed(() => props.searchText),
+                pageSize: computed(() => props.pageSize),
+            });
+            return {
+                selected, targetRef, menuRef, visibleMenu, refinedMenu, loading, initiateMenu, reloadMenu, showMoreMenu, showContextMenu, hideContextMenu, toggleContextMenu,
+            };
+        },
+    }),
+    decorators: [() => ({
+        template: '<story style="height: 500px;" />',
+    })],
+};
+
+export const Basic: Story = {
+    render: () => ({
+        components: { PContextMenu, PButton },
+        template: `
+            <div>
+                <div style="margin-bottom: 1rem">
+                    <p-button @click="showContextMenu()">Show Menu</p-button>
+                    <p-button @click="hideContextMenu()">Hide Menu</p-button>
+                    <p-button @click="toggleContextMenu()">Toggle Menu</p-button>
+                    <p-button @click="initiateMenu()">Initiate</p-button>
+                    <p-button @click="reloadMenu()">Reload</p-button>
+                    <p-button @click="focusOnContextMenu()">Focus on Menu</p-button>
+                </div>
+                <div>
+                    <div ref="targetRef" style="position: relative">Target</div>
+                    <p-context-menu ref="menuRef"
+                                    v-if="visibleMenu"
+                                    :selected="selected"
+                                    :loading="loading"
+                                    :menu="refinedMenu"
+                                    @click-show-more="showMoreMenu()"
+                                    @select="handleSelect"
+                    />
+                </div>
+            </div>
+        `,
+        setup() {
+            const targetRef = ref(null);
+            const menuRef = ref(null);
+            const visibleMenu = ref(false);
+            const menu = ref(getContextMenuItems());
+            const selected = ref<MenuItem[]>([]);
+            const {
+                refinedMenu, loading, initiateMenu, reloadMenu, showMoreMenu, showContextMenu, hideContextMenu, toggleContextMenu, focusOnContextMenu,
+            } = useContextMenuController({
+                targetRef,
+                contextMenuRef: menuRef,
+                visibleMenu,
+                menu,
+                pageSize: 3,
+                selected,
+            });
+            const handleSelect = (item: MenuItem) => {
+                selected.value = [...selected.value, item];
+            };
+            return {
+                selected,
+                targetRef,
+                menuRef,
+                visibleMenu,
+                refinedMenu,
+                loading,
+                initiateMenu,
+                reloadMenu,
+                showMoreMenu,
+                showContextMenu,
+                hideContextMenu,
+                toggleContextMenu,
+                focusOnContextMenu,
+                handleSelect,
+            };
+        },
+    }),
+    decorators: [() => ({
+        template: '<story style="height: 500px;" />',
+    })],
+};
+
+export const ReorderBySelection: Story = {
+    render: () => ({
+        components: { PContextMenu, PButton },
+        template: `
+            <div>
+                <div style="margin-bottom: 1rem">
+                    <p-button @click="showAndInitiate">Show Menu & Initiate & Reorder</p-button>
+                    <p-button @click="hideContextMenu">Hide Menu</p-button>
+                    <p-button @click="selected = []">Reset Selection</p-button>
+                </div>
+                <div>
+                    <div ref="targetRef" style="position: relative">Target</div>
+                    <p-context-menu ref="menuRef"
+                                    v-if="visibleMenu"
+                                    :selected="selected"
+                                    :loading="loading"
+                                    :menu="refinedMenu"
+                                    @click-show-more="showMoreMenu()"
+                                    @select="handleSelect"
+                    />
+                </div>
+            </div>
+        `,
+        setup() {
+            const targetRef = ref(null);
+            const menuRef = ref(null);
+            const visibleMenu = ref(false);
+            const menu = ref(getContextMenuItems());
+            const selected = ref<MenuItem[]>([]);
+            const {
+                refinedMenu, loading, initiateMenu, showMoreMenu, showContextMenu, hideContextMenu,
+            } = useContextMenuController({
+                targetRef,
+                contextMenuRef: menuRef,
+                visibleMenu,
+                menu,
+                pageSize: 3,
+                selected,
+                useReorderBySelection: true,
+            });
+            const handleSelect = (item: MenuItem) => {
+                selected.value = [...selected.value, item];
+            };
+            const showAndInitiate = () => {
+                showContextMenu();
+                initiateMenu();
+            };
+            return {
+                selected,
+                targetRef,
+                menuRef,
+                visibleMenu,
+                refinedMenu,
+                loading,
+                initiateMenu,
+                showMoreMenu,
+                showContextMenu,
+                hideContextMenu,
+                handleSelect,
+                showAndInitiate,
+            };
+        },
+    }),
+    decorators: [() => ({
+        template: '<story style="height: 500px;" />',
+    })],
+};
+
+export const Playground: Story = {
+    ...Template,
+};
diff --git a/packages/mirinae/src/hooks/use-context-menu-controller/use-context-menu-controller.ts b/packages/mirinae/src/hooks/use-context-menu-controller/use-context-menu-controller.ts
index 7c45c9668f..8ba9cc98a2 100644
--- a/packages/mirinae/src/hooks/use-context-menu-controller/use-context-menu-controller.ts
+++ b/packages/mirinae/src/hooks/use-context-menu-controller/use-context-menu-controller.ts
@@ -1,202 +1,75 @@
-import type { ComputedRef, Ref, UnwrapRef } from 'vue';
-import type Vue from 'vue';
-import {
-    computed, isRef, reactive, ref, toRef,
-} from 'vue';
-
-import { isEmpty } from 'lodash';
+import type { Ref } from 'vue';
+import { reactive, toRef } from 'vue';
 
 import type { MenuItem } from '@/controls/context-menu/type';
-import type { MenuAttachHandler } from '@/hooks/use-context-menu-controller/use-context-menu-attach';
-import { useContextMenuAttach } from '@/hooks/use-context-menu-controller/use-context-menu-attach';
+import type {
+    UseContextMenuItemsOptions,
+} from '@/hooks/use-context-menu-items/use-context-menu-items';
+import {
+    useContextMenuItems,
+} from '@/hooks/use-context-menu-items/use-context-menu-items';
+import type { UseContextMenuStyleOptions } from '@/hooks/use-context-menu-style/use-context-menu-style';
 import { useContextMenuStyle } from '@/hooks/use-context-menu-style/use-context-menu-style';
-import { getTextHighlightRegex } from '@/utils/helpers';
 
-export interface UseContextMenuControllerOptions<Item extends MenuItem = MenuItem> {
-    targetRef: Ref<HTMLElement|Vue|null>; // required for style
-
-    contextMenuRef: Ref<HTMLElement|any|null>; // required when using focusing feature by focusOnContextMenu()
-    /*
-    Useful when used inside an element whose css position attribute value is fixed.
-    It automatically check targetRef's position and adjust the context menu's position.
-     */
-    useFixedStyle?: Ref<boolean|undefined>|boolean;
 
+export interface UseContextMenuControllerOptions<Item extends MenuItem = MenuItem> extends
+    Omit<UseContextMenuStyleOptions, 'visibleMenu'|'menuRef'|'useFixedMenuStyle'>,
+    UseContextMenuItemsOptions<Item> {
     visibleMenu?: Ref<boolean>|boolean; // used for visibility control. related to fixed style feature and focusing feature. give this option or use returned value.
-
-    /* Whether to automatically reorder on initiateMenu(). */
-    useReorderBySelection?: boolean;
-    /* Required values when using the reorder by selection feature: menu or handler, selected */
-    menu?: Ref<Item[]>|Item[]; // The original menu that serves as the basis for order when reordering menus
-    handler?: Ref<MenuAttachHandler<Item>|undefined>;
-    selected?: Ref<Item[]>|ComputedRef<Item[]>|Item[]; // Items to be displayed at the top of the menu
-
-    /* Whether to automatically filtering menu by searchText  */
-    useMenuFiltering?: boolean;
-    /* Required values when using the reorder by selection feature: menu or handler, searchText */
-    searchText?: Ref<string>;
-
-    /* Required when to use show more button to attach items  */
-    pageSize?: Ref<number|undefined>|number;
-
-    /* Required for context menu style */
-    position?: Ref<'left'|'right'|undefined>|'left'|'right';
-    menuWidth?: Ref<'target-width'|string|undefined>|'target-width'|string|undefined;
-    boundary?: Ref<string|undefined>|string;
-
-    /* Whether to hide the header when there are no items in the header */
-    hideHeaderWithoutItems?: Ref<boolean|undefined>|boolean;
+    contextMenuRef?: UseContextMenuStyleOptions['menuRef'];
+    useFixedStyle?: UseContextMenuStyleOptions['useFixedMenuStyle'];
 }
 
+interface UseContextMenuControllerReturns {
+    visibleMenu: Ref<boolean>;
+    refinedMenu: ReturnType<typeof useContextMenuItems>['refinedMenu'];
+    contextMenuStyle: ReturnType<typeof useContextMenuStyle>['contextMenuStyle'];
+    loading: ReturnType<typeof useContextMenuItems>['loading'];
+    showContextMenu: () => void;
+    hideContextMenu: () => void;
+    toggleContextMenu: () => void;
+    focusOnContextMenu: FocusOnContextMenu;
+    initiateMenu: ReturnType<typeof useContextMenuItems>['initiateMenu'];
+    reloadMenu: ReturnType<typeof useContextMenuItems>['reloadMenu'];
+    showMoreMenu: ReturnType<typeof useContextMenuItems>['showMoreMenu'];
+}
 
 interface FocusOnContextMenu { (position?: number): void }
 
 export const useContextMenuController = <Item extends MenuItem = MenuItem>({
     useFixedStyle, targetRef, contextMenuRef, visibleMenu, useReorderBySelection, menu, selected,
     useMenuFiltering, searchText, handler, pageSize, position, hideHeaderWithoutItems, menuWidth, boundary,
-}: UseContextMenuControllerOptions<Item>) => {
-    if (!targetRef) throw new Error('\'targetRef\' option must be given.');
-    if (useReorderBySelection) {
-        if (!menu && (!handler || (isRef(handler) && !handler.value))) {
-            throw new Error('If \'useReorderBySelection\' is \'true\', \'menu\' or \'handler\' option must be given.');
-        }
-        if (!selected) {
-            throw new Error('If \'useReorderBySelection\' is \'true\', \'selected\' option must be given.');
-        }
-    }
-    if (useMenuFiltering) {
-        if (!menu && (!handler || (isRef(handler) && !handler.value))) {
-            throw new Error('If \'useMenuFiltering\' is \'true\', \'menu\' or \'handler\' option must be given.');
-        }
-        if (!searchText) {
-            throw new Error('If \'useMenuFiltering\' is \'true\', \'searchText\' option must be given.');
-        }
-    }
-
+}: UseContextMenuControllerOptions<Item>): UseContextMenuControllerReturns => {
     const state = reactive({
-        contextMenuRef,
-        useFixedStyle: useFixedStyle ?? false,
+        contextMenuRef: contextMenuRef ?? null,
         visibleMenu: visibleMenu ?? false,
-        menu: menu ?? [] as Item[],
-        selected: selected ?? [] as Item[],
-        pageSize,
-        searchText: searchText ?? '',
-        position: position ?? 'left',
-        hideHeaderWithoutItems,
     });
 
-    /* fixed style */
+    /* menu style */
     const {
         contextMenuStyle,
     } = useContextMenuStyle({
-        useFixedMenuStyle: toRef(state, 'useFixedStyle'),
+        useFixedMenuStyle: useFixedStyle,
         visibleMenu: toRef(state, 'visibleMenu'),
         targetRef,
-        position: toRef(state, 'position'),
-        menuRef: contextMenuRef,
+        position,
+        menuRef: toRef(state, 'contextMenuRef'),
         menuWidth,
         boundary,
     });
 
-    // menu filtering
-    const filterItemsBySearchText = (text: string, items: Item[]) => {
-        let results: Item[];
-        const trimmed = text.trim();
-        if (trimmed) {
-            const regex = getTextHighlightRegex(trimmed);
-            results = items.filter((d) => {
-                if (d.type === undefined || d.type === 'item') return regex.test(d.label as string);
-                return true;
-            });
-        } else {
-            results = [...items];
-        }
-
-        return results;
-    };
-
-    /* menu capturing */
-    const selectedSnapshot = ref<Item[]>([]);
-    const capture = () => {
-        selectedSnapshot.value = [...state.selected] as UnwrapRef<Item[]>;
-    };
-
-    /* menu attaching */
-    const defaultMenu = useMenuFiltering ? computed<Item[]>(() => filterItemsBySearchText(state.searchText, state.menu as Item[])) : toRef(state, 'menu');
+    /* menu items */
     const {
-        attachedMenu,
-        attachLoading,
-        resetMenuAndPagination: resetAttachedMenuAndPagination,
-        attachMenuItems,
-    } = useContextMenuAttach<Item>({
-        attachHandler: handler,
-        menu: defaultMenu as Ref<Item[]>,
-        searchText,
-        pageSize: toRef(state, 'pageSize'),
-        filterItems: useReorderBySelection ? selectedSnapshot as Ref<Item[]> : undefined,
-    });
-
-    /* menu refining */
-    const SELECTION_DIVIDER_KEY = 'selection-divider';
-    const topItems = computed<Item[]>(() => {
-        const filtered = filterItemsBySearchText(state.searchText, selectedSnapshot.value as Item[]);
-
-        // group by headerName
-        const headerNameItemsMap = getHeaderNameItemsMap<Item>(filtered, attachedMenu.value);
-        if (isEmpty(headerNameItemsMap)) return filtered;
-
-        // reorder items by headerName and add divider
-        let reordered: Item[] = [];
-        const entries = Object.entries<HeaderIndicesTuple<Item>>(headerNameItemsMap);
-        const allIndices: number[] = [];
-        entries.forEach(([, [header, indices]], i) => {
-            reordered.push(header);
-            indices.forEach((idx) => {
-                reordered.push(filtered[idx]);
-                allIndices.push(idx);
-            });
-            if (i < entries.length - 1) {
-                reordered.push({ type: 'divider', name: `selection-${header.name}-divider` } as Item);
-            }
-        });
-        const restItems = filtered.filter((_, idx) => !allIndices.includes(idx));
-        if (restItems.length) {
-            reordered.push({ type: 'divider', name: 'selection-rest-divider' } as Item);
-            reordered = reordered.concat(restItems);
-        }
-        reordered = reordered.concat();
-        return reordered;
-    });
-    const refinedMenu = computed(() => {
-        if (!useReorderBySelection) return attachedMenu.value;
-
-        let newItems: Item[] = [];
-        if (topItems.value.length) {
-            newItems = newItems.concat(topItems.value);
-            newItems.push({ type: 'divider', name: SELECTION_DIVIDER_KEY } as Item);
-
-            let restItems: Item[];
-            if (state.hideHeaderWithoutItems) {
-                restItems = [];
-                const headerNameItemsMap = getHeaderNameItemsMap<Item>(attachedMenu.value, attachedMenu.value);
-                restItems = attachedMenu.value.filter((d) => {
-                    if (d.type === 'header') {
-                        return !!headerNameItemsMap[d.name as string]?.[1]?.length;
-                    }
-                    return true;
-                });
-            } else {
-                restItems = attachedMenu.value;
-            }
-
-            newItems = newItems.concat(restItems);
-        } else {
-            newItems = attachedMenu.value;
-        }
-        return newItems;
+        refinedMenu,
+        loading,
+        initiateMenu,
+        reloadMenu,
+        showMoreMenu,
+    } = useContextMenuItems({
+        useReorderBySelection, menu, selected, useMenuFiltering, searchText, handler, pageSize, hideHeaderWithoutItems,
     });
 
-    /* menu visibility, focusing, refining */
+    /* menu visibility, focusing */
     const showContextMenu = () => {
         if (!state.visibleMenu) {
             state.visibleMenu = true;
@@ -215,43 +88,18 @@ export const useContextMenuController = <Item extends MenuItem = MenuItem>({
             state.contextMenuRef.focus(focusPosition); // contextMenu component has focus method
         }
     };
-    const initiateMenu = async () => {
-        resetAttachedMenuAndPagination();
-        capture();
-        await attachMenuItems();
-    };
-    const reloadMenu = async () => {
-        resetAttachedMenuAndPagination();
-        await attachMenuItems();
-    };
 
     return {
         visibleMenu: toRef(state, 'visibleMenu'),
         refinedMenu,
         contextMenuStyle,
-        loading: attachLoading,
+        loading,
         showContextMenu,
         hideContextMenu,
         toggleContextMenu,
         focusOnContextMenu,
         initiateMenu,
         reloadMenu,
-        showMoreMenu: attachMenuItems,
+        showMoreMenu,
     };
 };
-
-type HeaderIndicesTuple<Item> = [header: Item, itemIndices: number[]];
-const getHeaderNameItemsMap = <Item extends MenuItem>(targetItems: Item[], allItems: Item[]): Record<string, HeaderIndicesTuple<Item>> => {
-    const headerNameItemsMap: Record<string, HeaderIndicesTuple<Item>> = {};
-    targetItems.forEach((item, index) => {
-        if (!item.headerName) return;
-        if (headerNameItemsMap[item.headerName]) {
-            headerNameItemsMap[item.headerName][1].push(index);
-        } else {
-            const header = allItems.find((d) => d.type === 'header' && d.name === item.headerName);
-            if (!header) return;
-            headerNameItemsMap[item.headerName] = [header, [index]];
-        }
-    });
-    return headerNameItemsMap;
-};
diff --git a/packages/mirinae/src/hooks/use-context-menu-items/UseContextMenuItems.mdx b/packages/mirinae/src/hooks/use-context-menu-items/UseContextMenuItems.mdx
new file mode 100644
index 0000000000..1fceac80ef
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-items/UseContextMenuItems.mdx
@@ -0,0 +1,48 @@
+{/* useContextMenuItems.mdx */}
+
+import {Canvas, Meta, Controls} from '@storybook/blocks';
+
+import * as useContextMenuItemsStories from './use-context-menu-items.stories';
+
+<Meta of={useContextMenuItemsStories}/>
+
+
+# useContextMenuItems
+
+Manages context menu items, providing reactive state and helpers for menu interaction.
+
+## Type Declarations
+
+```typescript
+interface UseContextMenuItemsOptions<Item extends MenuItem = MenuItem> extends
+    Omit<UseContextMenuAttachOptions<Item>, 'attachHandler'> {
+    useReorderBySelection?: boolean; // Whether to automatically reorder on initiateMenu().
+    selected?: Ref<Item[]>|ComputedRef<Item[]>|Item[]; // Items to be displayed at the top of the menu for emphasize or quick access of selected items.
+    useMenuFiltering?: boolean; // Whether to automatically filtering menu by searchText. works only with menu, not with handler.
+    hideHeaderWithoutItems?: Ref<boolean|undefined>|boolean;
+    handler?: UseContextMenuAttachOptions<Item>['attachHandler']; // See UseContextMenuAttachOptions.
+}
+
+interface UseContextMenuItemsReturns<Item extends MenuItem = MenuItem> {
+    refinedMenu: ComputedRef<Item[]>;
+    loading: Ref<boolean>;
+    initiateMenu: () => Promise<void>; // reset pagination, capture current items, and reattach menu items.
+    reloadMenu: () => Promise<void>; // reset pagination and reattach menu items.
+    showMoreMenu: () => Promise<void>; // attach more menu items.
+}
+```
+## Usage
+<br/>
+
+## Basic
+<Canvas of={useContextMenuItemsStories.Basic}/>
+
+## Reorder by Selection
+<Canvas of={useContextMenuItemsStories.ReorderBySelection}/>
+
+## Playground
+<Canvas of={useContextMenuItemsStories.Playground}/>
+<Controls of={useContextMenuItemsStories.Playground}/>
+
+<br/>
+<br/>
diff --git a/packages/mirinae/src/hooks/use-context-menu-items/story-helper.ts b/packages/mirinae/src/hooks/use-context-menu-items/story-helper.ts
new file mode 100644
index 0000000000..9a13a28feb
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-items/story-helper.ts
@@ -0,0 +1,107 @@
+import type { ArgTypes, Parameters, Args } from '@storybook/vue';
+
+import {
+    getUseContextMenuAttachArgs,
+    getUseContextMenuAttachArgTypes,
+} from '@/hooks/use-context-menu-attach/story-helper';
+
+import type { UseContextMenuItemsOptions } from './use-context-menu-items';
+
+export const getUseContextMenuItemsArgs = (): Args => {
+    const useContextMenuAttachArgs = getUseContextMenuAttachArgs();
+
+    // rename attachHandler to handler
+    const handler = useContextMenuAttachArgs.attachHandler;
+    delete useContextMenuAttachArgs.attachHandler;
+    useContextMenuAttachArgs.handler = handler;
+
+    // remove filterItems
+    delete useContextMenuAttachArgs.filterItems;
+
+    return {
+        ...useContextMenuAttachArgs,
+        useReorderBySelection: false,
+        selected: [],
+        useMenuFiltering: false,
+        hideHeaderWithoutItems: false,
+    };
+};
+
+export const getUseContextMenuItemsParameters = (): Parameters => ({});
+
+export const getUseContextMenuItemsArgTypes = (): ArgTypes<UseContextMenuItemsOptions> => {
+    const useContextMenuAttachArgTypes: any = getUseContextMenuAttachArgTypes();
+    const handlerArgType = { ...useContextMenuAttachArgTypes.attachHandler };
+
+    // rename attachHandler to handler
+    handlerArgType.name = 'handler';
+    delete useContextMenuAttachArgTypes.attachHandler;
+    useContextMenuAttachArgTypes.handler = handlerArgType;
+
+    // remove filterItems
+    delete useContextMenuAttachArgTypes.filterItems;
+
+    return {
+        ...useContextMenuAttachArgTypes,
+        useReorderBySelection: {
+            name: 'useReorderBySelection',
+            type: { name: 'boolean' },
+            description: 'Whether to automatically reorder on initiateMenu().',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                category: 'options',
+                defaultValue: {
+                    summary: false,
+                },
+            },
+            control: 'boolean',
+        },
+        selected: {
+            name: 'selected',
+            type: { name: 'other', value: 'array' },
+            description: 'Items to be displayed at the top of the menu for emphasize or quick access of selected items.',
+            table: {
+                type: {
+                    summary: 'array',
+                },
+                category: 'options',
+                defaultValue: {
+                    summary: '[]',
+                },
+            },
+            control: 'object',
+        },
+        useMenuFiltering: {
+            name: 'useMenuFiltering',
+            type: { name: 'boolean' },
+            description: 'Whether to automatically filtering menu by searchText. works only with menu, not with handler.',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                category: 'options',
+                defaultValue: {
+                    summary: false,
+                },
+            },
+            control: 'boolean',
+        },
+        hideHeaderWithoutItems: {
+            name: 'hideHeaderWithoutItems',
+            type: { name: 'boolean' },
+            description: 'Whether to hide the header when there are no items.',
+            table: {
+                type: {
+                    summary: 'boolean',
+                },
+                category: 'options',
+                defaultValue: {
+                    summary: false,
+                },
+            },
+            control: 'boolean',
+        },
+    };
+};
diff --git a/packages/mirinae/src/hooks/use-context-menu-items/use-context-menu-items.stories.ts b/packages/mirinae/src/hooks/use-context-menu-items/use-context-menu-items.stories.ts
new file mode 100644
index 0000000000..b0690c413d
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-items/use-context-menu-items.stories.ts
@@ -0,0 +1,151 @@
+import { computed, ref } from 'vue';
+
+import type { Meta, StoryObj } from '@storybook/vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+import PButton from '@/controls/buttons/button/PButton.vue';
+import { getContextMenuItems } from '@/controls/context-menu/mock';
+import PContextMenu from '@/controls/context-menu/PContextMenu.vue';
+import type { MenuItem } from '@/controls/context-menu/type';
+
+import {
+    getUseContextMenuItemsArgs, getUseContextMenuItemsArgTypes, getUseContextMenuItemsParameters,
+} from './story-helper';
+import type { UseContextMenuItemsOptions } from './use-context-menu-items';
+import { useContextMenuItems } from './use-context-menu-items';
+
+
+type UseContextMenuItemsPropsAndCustomArgs = ComponentProps<UseContextMenuItemsOptions>;
+
+const meta: Meta<UseContextMenuItemsPropsAndCustomArgs> = {
+    title: 'Hooks/useContextMenuItems',
+    argTypes: {
+        ...getUseContextMenuItemsArgTypes(),
+    },
+    parameters: {
+        ...getUseContextMenuItemsParameters(),
+    },
+    args: {
+        ...getUseContextMenuItemsArgs(),
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+const Template: Story = {
+    render: (args, { argTypes }) => ({
+        props: Object.keys(argTypes),
+        components: { PContextMenu, PButton },
+        template: `
+            <div>
+                <div style="margin-bottom: 1rem">
+                    <p-button @click="initiateMenu()">Initiate</p-button>
+                    <p-button @click="reloadMenu()">Reload</p-button>
+                </div>
+                <p-context-menu :loading="loading"
+                                :selected="selected"
+                                :menu="refinedMenu"
+                                @click-show-more="showMoreMenu()"
+                />
+            </div>
+        `,
+        setup(props) {
+            const selected = computed(() => props.selected);
+            const {
+                refinedMenu, loading, initiateMenu, reloadMenu, showMoreMenu,
+            } = useContextMenuItems({
+                selected,
+                useReorderBySelection: props.useReorderBySelection,
+                useMenuFiltering: props.useMenuFiltering,
+                hideHeaderWithoutItems: props.hideHeaderWithoutItems,
+                menu: computed(() => props.menu),
+                searchText: computed(() => props.searchText),
+                pageSize: computed(() => props.pageSize),
+            });
+            return {
+                selected, refinedMenu, loading, initiateMenu, reloadMenu, showMoreMenu,
+            };
+        },
+    }),
+};
+
+export const Basic: Story = {
+    render: () => ({
+        components: { PContextMenu, PButton },
+        template: `
+            <div>
+                <div style="margin-bottom: 1rem">
+                    <p-button @click="initiateMenu()">Initiate</p-button>
+                    <p-button @click="reloadMenu()">Reload</p-button>
+                </div>
+                <p-context-menu :loading="loading"
+                                :selected="selected"
+                                :menu="refinedMenu"
+                                @select="handleSelect"
+                                @click-show-more="showMoreMenu()"
+                />
+            </div>
+        `,
+        setup() {
+            const menu = ref(getContextMenuItems());
+            const selected = ref<MenuItem[]>([]);
+            const {
+                refinedMenu, loading, initiateMenu, reloadMenu, showMoreMenu,
+            } = useContextMenuItems({
+                menu,
+                pageSize: 3,
+                selected,
+            });
+            const handleSelect = (item: MenuItem) => {
+                selected.value = [...selected.value, item];
+            };
+            return {
+                selected, refinedMenu, loading, initiateMenu, reloadMenu, showMoreMenu, handleSelect,
+            };
+        },
+    }),
+};
+
+export const ReorderBySelection: Story = {
+    render: () => ({
+        components: { PContextMenu, PButton },
+        template: `
+            <div>
+                <div style="margin-bottom: 1rem">
+                    <p-button @click="initiateMenu()">Initiate & Reorder</p-button>
+                    <p-button @click="selected = []">Reset Selection</p-button>
+                </div>
+                <p-context-menu :loading="loading"
+                                :selected="selected"
+                                :menu="refinedMenu"
+                                @select="handleSelect"
+                                @click-show-more="showMoreMenu()"
+                />
+            </div>
+        `,
+        setup() {
+            const menu = ref(getContextMenuItems());
+            const selected = ref<MenuItem[]>([]);
+            const {
+                refinedMenu, loading, initiateMenu, reloadMenu, showMoreMenu,
+            } = useContextMenuItems({
+                menu,
+                pageSize: 3,
+                selected,
+                useReorderBySelection: true,
+            });
+            const handleSelect = (item: MenuItem) => {
+                selected.value = [...selected.value, item];
+            };
+            return {
+                selected, refinedMenu, loading, initiateMenu, reloadMenu, showMoreMenu, handleSelect,
+            };
+        },
+    }),
+};
+
+export const Playground: Story = {
+    ...Template,
+};
diff --git a/packages/mirinae/src/hooks/use-context-menu-items/use-context-menu-items.ts b/packages/mirinae/src/hooks/use-context-menu-items/use-context-menu-items.ts
new file mode 100644
index 0000000000..173ad0a9d5
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-items/use-context-menu-items.ts
@@ -0,0 +1,195 @@
+import type { ComputedRef, Ref, UnwrapRef } from 'vue';
+import {
+    computed, isRef, reactive, ref, toRef,
+} from 'vue';
+
+import { isEmpty } from 'lodash';
+
+import type { MenuItem } from '@/controls/context-menu/type';
+import { getTextHighlightRegex } from '@/utils/helpers';
+
+import type { UseContextMenuAttachOptions } from '../use-context-menu-attach/use-context-menu-attach';
+import { useContextMenuAttach } from '../use-context-menu-attach/use-context-menu-attach';
+
+export interface UseContextMenuItemsOptions<Item extends MenuItem = MenuItem> extends
+    Omit<UseContextMenuAttachOptions<Item>, 'attachHandler'|'filterItems'> {
+    useReorderBySelection?: boolean; // Whether to automatically reorder on initiateMenu().
+    selected?: Ref<Item[]>|ComputedRef<Item[]>|Item[]; // Items to be displayed at the top of the menu for emphasize or quick access of selected items.
+    useMenuFiltering?: boolean; // Whether to automatically filtering menu by searchText. works only with menu, not with handler.
+    hideHeaderWithoutItems?: Ref<boolean|undefined>|boolean;
+    handler?: UseContextMenuAttachOptions<Item>['attachHandler'];
+}
+
+interface UseContextMenuItemsReturns<Item extends MenuItem = MenuItem> {
+    refinedMenu: ComputedRef<Item[]>;
+    loading: Ref<boolean>;
+    initiateMenu: () => Promise<void>; // reset pagination, capture current items, and reattach menu items.
+    reloadMenu: () => Promise<void>; // reset pagination and reattach menu items.
+    showMoreMenu: () => Promise<void>; // attach more menu items.
+}
+
+
+export const useContextMenuItems = <Item extends MenuItem = MenuItem>({
+    useReorderBySelection, menu, selected,
+    useMenuFiltering, searchText, handler, pageSize, hideHeaderWithoutItems,
+}: UseContextMenuItemsOptions<Item>): UseContextMenuItemsReturns<Item> => {
+    /* options validation */
+    if (useReorderBySelection) {
+        if (!menu && (!handler || (isRef(handler) && !handler.value))) {
+            throw new Error('If \'useReorderBySelection\' is \'true\', \'menu\' or \'handler\' option must be given.');
+        }
+        if (!selected) {
+            throw new Error('If \'useReorderBySelection\' is \'true\', \'selected\' option must be given.');
+        }
+    }
+    if (useMenuFiltering) {
+        if (!menu && (!handler || (isRef(handler) && !handler.value))) {
+            throw new Error('If \'useMenuFiltering\' is \'true\', \'menu\' or \'handler\' option must be given.');
+        }
+        if (!searchText) {
+            throw new Error('If \'useMenuFiltering\' is \'true\', \'searchText\' option must be given.');
+        }
+    }
+
+    const state = reactive({
+        menu: menu ?? [] as Item[],
+        selected: selected ?? [] as Item[],
+        pageSize,
+        searchText: searchText ?? '',
+        hideHeaderWithoutItems,
+    });
+
+
+    // menu filtering
+    const filterItemsBySearchText = (text: string, items: Item[]) => {
+        let results: Item[];
+        const trimmed = text.trim();
+        if (trimmed) {
+            const regex = getTextHighlightRegex(trimmed);
+            results = items.filter((d) => {
+                if (d.type === undefined || d.type === 'item') return regex.test(d.label as string);
+                return true;
+            });
+        } else {
+            results = [...items];
+        }
+
+        return results;
+    };
+
+    /* menu capturing */
+    const selectedSnapshot = ref<Item[]>([]);
+    const capture = () => {
+        selectedSnapshot.value = [...state.selected] as UnwrapRef<Item[]>;
+    };
+
+    /* menu attaching */
+    const defaultMenu = useMenuFiltering ? computed<Item[]>(() => filterItemsBySearchText(state.searchText, state.menu as Item[])) : toRef(state, 'menu');
+    const {
+        attachedMenu,
+        attachLoading,
+        resetMenuAndPagination: resetAttachedMenuAndPagination,
+        attachMenuItems,
+    } = useContextMenuAttach<Item>({
+        attachHandler: handler,
+        menu: defaultMenu as Ref<Item[]>,
+        searchText,
+        pageSize: toRef(state, 'pageSize'),
+        filterItems: useReorderBySelection ? selectedSnapshot as Ref<Item[]> : undefined,
+    });
+
+    /* menu refining */
+    const SELECTION_DIVIDER_KEY = 'selection-divider';
+    const topItems = computed<Item[]>(() => {
+        const filtered = filterItemsBySearchText(state.searchText, selectedSnapshot.value as Item[]);
+
+        // group by headerName
+        const headerNameItemsMap = getHeaderNameItemsMap<Item>(filtered, attachedMenu.value);
+        if (isEmpty(headerNameItemsMap)) return filtered;
+
+        // reorder items by headerName and add divider
+        let reordered: Item[] = [];
+        const entries = Object.entries<HeaderIndicesTuple<Item>>(headerNameItemsMap);
+        const allIndices: number[] = [];
+        entries.forEach(([, [header, indices]], i) => {
+            reordered.push(header);
+            indices.forEach((idx) => {
+                reordered.push(filtered[idx]);
+                allIndices.push(idx);
+            });
+            if (i < entries.length - 1) {
+                reordered.push({ type: 'divider', name: `selection-${header.name}-divider` } as Item);
+            }
+        });
+        const restItems = filtered.filter((_, idx) => !allIndices.includes(idx));
+        if (restItems.length) {
+            reordered.push({ type: 'divider', name: 'selection-rest-divider' } as Item);
+            reordered = reordered.concat(restItems);
+        }
+        reordered = reordered.concat();
+        return reordered;
+    });
+    const refinedMenu = computed(() => {
+        if (!useReorderBySelection) return attachedMenu.value;
+
+        let newItems: Item[] = [];
+        if (topItems.value.length) {
+            newItems = newItems.concat(topItems.value);
+            newItems.push({ type: 'divider', name: SELECTION_DIVIDER_KEY } as Item);
+
+            let restItems: Item[];
+            if (state.hideHeaderWithoutItems) {
+                restItems = [];
+                const headerNameItemsMap = getHeaderNameItemsMap<Item>(attachedMenu.value, attachedMenu.value);
+                restItems = attachedMenu.value.filter((d) => {
+                    if (d.type === 'header') {
+                        return !!headerNameItemsMap[d.name as string]?.[1]?.length;
+                    }
+                    return true;
+                });
+            } else {
+                restItems = attachedMenu.value;
+            }
+
+            newItems = newItems.concat(restItems);
+        } else {
+            newItems = attachedMenu.value;
+        }
+        return newItems;
+    });
+
+    /* initiate or reload menu */
+    const initiateMenu = async () => {
+        resetAttachedMenuAndPagination();
+        capture();
+        await attachMenuItems();
+    };
+    const reloadMenu = async () => {
+        resetAttachedMenuAndPagination();
+        await attachMenuItems();
+    };
+
+    return {
+        refinedMenu,
+        loading: attachLoading,
+        initiateMenu,
+        reloadMenu,
+        showMoreMenu: attachMenuItems,
+    };
+};
+
+type HeaderIndicesTuple<Item> = [header: Item, itemIndices: number[]];
+const getHeaderNameItemsMap = <Item extends MenuItem>(targetItems: Item[], allItems: Item[]): Record<string, HeaderIndicesTuple<Item>> => {
+    const headerNameItemsMap: Record<string, HeaderIndicesTuple<Item>> = {};
+    targetItems.forEach((item, index) => {
+        if (!item.headerName) return;
+        if (headerNameItemsMap[item.headerName]) {
+            headerNameItemsMap[item.headerName][1].push(index);
+        } else {
+            const header = allItems.find((d) => d.type === 'header' && d.name === item.headerName);
+            if (!header) return;
+            headerNameItemsMap[item.headerName] = [header, [index]];
+        }
+    });
+    return headerNameItemsMap;
+};
diff --git a/packages/mirinae/src/hooks/use-context-menu-style/UseContextMenuStyle.mdx b/packages/mirinae/src/hooks/use-context-menu-style/UseContextMenuStyle.mdx
new file mode 100644
index 0000000000..7543c26589
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-style/UseContextMenuStyle.mdx
@@ -0,0 +1,54 @@
+{/* useContextMenuStyle.mdx */}
+
+import {Canvas, Meta, Controls} from '@storybook/blocks';
+
+import * as useContextMenuStyleStories from './use-context-menu-style.stories';
+
+<Meta of={useContextMenuStyleStories}/>
+
+
+# useContextMenuStyle
+
+Manages styling for the context menu, supporting dynamic positioning and responsiveness.
+
+## Type Declarations
+
+```typescript
+interface UseContextMenuStyleOptions {
+    /*
+    Useful when used inside an element whose css position attribute value is fixed.
+    It automatically check targetRef's position and adjust the context menu's position.
+     */
+    useFixedMenuStyle?: Ref<boolean|undefined> | boolean;
+
+    visibleMenu?: Ref<boolean|undefined>;
+    targetRef: Ref<Vue|HTMLElement|null>;
+    menuRef: Ref<Vue|HTMLElement|null>;
+
+     /* Required for context menu style */
+    position?: Ref<'left'|'right'|undefined>|'left'|'right';
+    menuWidth?: Ref<'target-width'|string|undefined>|'target-width'|string|undefined; // default is 'auto'.
+    boundary?: Ref<string|undefined>|string; // it's not developed yet. if you want to use it, you can develop it with detectOverflow middleware.
+}
+
+interface UseContextMenuStyleReturns {
+    targetRef: Ref<Vue|HTMLElement|null>;
+    targetElement: ComputedRef<Element|null>;
+    menuRef: Ref<Vue|HTMLElement|null>;
+    menuElement: ComputedRef<Element|null>;
+    contextMenuStyle: Ref<Partial<CSSStyleDeclaration>>;
+}
+```
+
+## Usage
+<br/>
+
+### Basic
+<Canvas of={useContextMenuStyleStories.Basic}/>
+
+### Playground
+<Canvas of={useContextMenuStyleStories.Playground}/>
+<Controls of={useContextMenuStyleStories.Playground}/>
+
+<br/>
+<br/>
diff --git a/packages/mirinae/src/hooks/use-context-menu-style/story-helper.ts b/packages/mirinae/src/hooks/use-context-menu-style/story-helper.ts
new file mode 100644
index 0000000000..1281088282
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-style/story-helper.ts
@@ -0,0 +1,108 @@
+import type { ArgTypes, Parameters, Args } from '@storybook/vue';
+
+import type { UseContextMenuStyleOptions } from './use-context-menu-style';
+
+export const getUseContextMenuStyleArgs = (): Args => ({
+    useFixedMenuStyle: false,
+    visibleMenu: false,
+    targetRef: undefined,
+    menuRef: undefined,
+    position: 'left',
+    menuWidth: 'auto',
+});
+
+export const getUseContextMenuStyleParameters = (): Parameters => ({});
+
+export const getUseContextMenuStyleArgTypes = (): ArgTypes<UseContextMenuStyleOptions> => ({
+    useFixedMenuStyle: {
+        name: 'useFixedMenuStyle',
+        type: { name: 'boolean' },
+        description: 'Whether to use fixed menu style or not.',
+        table: {
+            type: {
+                summary: 'boolean',
+            },
+            category: 'options',
+            defaultValue: {
+                summary: false,
+            },
+        },
+        control: 'boolean',
+    },
+    visibleMenu: {
+        name: 'visibleMenu',
+        type: { name: 'boolean' },
+        description: 'Whether the menu is visible or not.',
+        table: {
+            type: {
+                summary: 'boolean',
+            },
+            category: 'options',
+            defaultValue: {
+                summary: false,
+            },
+        },
+        control: 'boolean',
+    },
+    targetRef: {
+        name: 'targetRef',
+        type: { name: 'other', value: 'HTMLElement' },
+        description: 'The target element of the context menu.',
+        table: {
+            type: {
+                summary: 'HTMLElement',
+            },
+            category: 'options',
+            defaultValue: {
+                summary: 'null',
+            },
+        },
+        control: 'object',
+    },
+    menuRef: {
+        name: 'menuRef',
+        type: { name: 'other', value: 'PContextMenu' },
+        description: 'The menu element of the context menu.',
+        table: {
+            type: {
+                summary: 'PContextMenu',
+            },
+            category: 'options',
+            defaultValue: {
+                summary: 'null',
+            },
+        },
+        control: 'object',
+    },
+    position: {
+        name: 'position',
+        type: { name: 'string' },
+        description: 'The position where the context menu will be displayed.',
+        table: {
+            type: {
+                summary: 'string',
+            },
+            category: 'options',
+            defaultValue: {
+                summary: 'left',
+            },
+        },
+        control: 'select',
+        options: ['left', 'right'],
+    },
+    menuWidth: {
+        name: 'menuWidth',
+        type: { name: 'string' },
+        description: 'The width of the context menu.',
+        table: {
+            type: {
+                summary: 'string',
+            },
+            category: 'options',
+            defaultValue: {
+                summary: 'auto',
+            },
+        },
+        control: 'text',
+    },
+});
diff --git a/packages/mirinae/src/hooks/use-context-menu-style/use-context-menu-style.stories.ts b/packages/mirinae/src/hooks/use-context-menu-style/use-context-menu-style.stories.ts
new file mode 100644
index 0000000000..c87ab720a3
--- /dev/null
+++ b/packages/mirinae/src/hooks/use-context-menu-style/use-context-menu-style.stories.ts
@@ -0,0 +1,102 @@
+import { ref, computed } from 'vue';
+
+import type { Meta, StoryObj } from '@storybook/vue';
+import type { ComponentProps } from 'vue-component-type-helpers';
+
+import { getContextMenuItems } from '@/controls/context-menu/mock';
+import PContextMenu from '@/controls/context-menu/PContextMenu.vue';
+
+import {
+    getUseContextMenuStyleArgs, getUseContextMenuStyleArgTypes, getUseContextMenuStyleParameters,
+} from './story-helper';
+import type { UseContextMenuStyleOptions } from './use-context-menu-style';
+import { useContextMenuStyle } from './use-context-menu-style';
+
+
+type UseContextMenuStylePropsAndCustomArgs = ComponentProps<UseContextMenuStyleOptions>;
+
+const meta : Meta<UseContextMenuStylePropsAndCustomArgs> = {
+    title: 'Hooks/useContextMenuStyle',
+    argTypes: {
+        ...getUseContextMenuStyleArgTypes(),
+    },
+    parameters: {
+        ...getUseContextMenuStyleParameters(),
+    },
+    args: {
+        ...getUseContextMenuStyleArgs(),
+    },
+};
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+
+const Template: Story = {
+    render: (args, { argTypes }) => ({
+        props: Object.keys(argTypes),
+        components: { PContextMenu },
+        template: `
+            <div>
+                <div ref="targetRef" style="position: relative">Target</div>
+                <p-context-menu ref="menuRef" 
+                                v-if="visibleMenu"
+                                :menu="menu" />
+            </div>
+        `,
+        setup(props) {
+            const targetRef = ref(null);
+            const menuRef = ref(null);
+            const menu = getContextMenuItems();
+            useContextMenuStyle({
+                targetRef,
+                menuRef,
+                useFixedMenuStyle: computed(() => props.useFixedMenuStyle),
+                visibleMenu: computed(() => props.visibleMenu),
+                position: computed(() => props.position),
+                menuWidth: computed(() => props.menuWidth),
+            });
+            return {
+                targetRef, menuRef, menu,
+            };
+        },
+    }),
+    decorators: [() => ({
+        template: '<story style="height: 500px;" />',
+    })],
+};
+
+export const Basic: Story = {
+    render: () => ({
+        components: { PContextMenu },
+        template: `
+            <div>
+                <div ref="targetRef" style="position: relative">Target</div>
+                <p-context-menu ref="menuRef" 
+                                v-if="visibleMenu"
+                                :menu="menu" />
+            </div>
+        `,
+        setup() {
+            const targetRef = ref(null);
+            const menuRef = ref(null);
+            const visibleMenu = ref(true);
+            const menu = getContextMenuItems();
+            useContextMenuStyle({
+                targetRef,
+                menuRef,
+                visibleMenu,
+            });
+            return {
+                targetRef, menuRef, visibleMenu, menu,
+            };
+        },
+    }),
+    decorators: [() => ({
+        template: '<story style="height: 500px;" />',
+    })],
+};
+
+export const Playground: Story = {
+    ...Template,
+};
diff --git a/packages/mirinae/src/hooks/use-context-menu-style/use-context-menu-style.ts b/packages/mirinae/src/hooks/use-context-menu-style/use-context-menu-style.ts
index 1522a636c3..99693e16b9 100644
--- a/packages/mirinae/src/hooks/use-context-menu-style/use-context-menu-style.ts
+++ b/packages/mirinae/src/hooks/use-context-menu-style/use-context-menu-style.ts
@@ -1,7 +1,7 @@
 import {
     computed, onUnmounted, reactive, toRefs, watch,
 } from 'vue';
-import type { Ref } from 'vue';
+import type { Ref, ComputedRef } from 'vue';
 import type Vue from 'vue';
 
 import {
@@ -9,23 +9,45 @@ import {
 } from '@floating-ui/dom';
 import { throttle } from 'lodash';
 
-interface UseContextMenuStyleOptions {
+// HACK: This is the type definition of the context menu. Only defined exposed methods. This is to prevent type error due to vue2-vue3 incompatibility.
+interface ContextMenu {
+    focus: (position?: number) => void;
+}
+export interface UseContextMenuStyleOptions {
+    /*
+    Useful when used inside an element whose css position attribute value is fixed.
+    It automatically check targetRef's position and adjust the context menu's position.
+     */
     useFixedMenuStyle?: Ref<boolean|undefined> | boolean;
+
     visibleMenu?: Ref<boolean|undefined>;
     targetRef: Ref<Vue|HTMLElement|null>;
-    menuRef: Ref<Vue|HTMLElement|null>;
+    menuRef: Ref<ContextMenu|HTMLElement|null>;
+
+     /* Required for context menu style */
     position?: Ref<'left'|'right'|undefined>|'left'|'right';
     menuWidth?: Ref<'target-width'|string|undefined>|'target-width'|string|undefined; // default is 'auto'.
     boundary?: Ref<string|undefined>|string; // it's not developed yet. if you want to use it, you can develop it with detectOverflow middleware.
 }
 
+interface UseContextMenuStyleReturns {
+    targetRef: Ref<Vue|HTMLElement|null>;
+    targetElement: ComputedRef<Element|null>;
+    menuRef: Ref<Vue|HTMLElement|null>;
+    menuElement: ComputedRef<Element|null>;
+    contextMenuStyle: Ref<Partial<CSSStyleDeclaration>>;
+}
+
 export const useContextMenuStyle = ({
     useFixedMenuStyle, visibleMenu, targetRef, menuRef, position, boundary, menuWidth,
-}: UseContextMenuStyleOptions) => {
+}: UseContextMenuStyleOptions): UseContextMenuStyleReturns => {
+    if (!targetRef) throw new Error('\'targetRef\' option must be given.');
+    if (!menuRef) throw new Error('\'menuRef\' option must be given.');
+
     const state = reactive({
         useFixedMenuStyle: useFixedMenuStyle ?? false,
-        visibleMenu,
-        position,
+        visibleMenu: visibleMenu ?? false,
+        position: position ?? 'left',
         menuWidth,
         boundary: boundary ?? undefined,
     });
@@ -163,5 +185,5 @@ export const useContextMenuStyle = ({
 
     return {
         ...toRefs(contextMenuFixedStyleState),
-    };
+    } as unknown as UseContextMenuStyleReturns;
 };