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/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;
 };