diff --git a/apps/web/src/api-clients/inventory/region/composables/use-region-api.ts b/apps/web/src/api-clients/inventory/region/composables/use-region-api.ts
index 8c90161b66..7c7d65f738 100644
--- a/apps/web/src/api-clients/inventory/region/composables/use-region-api.ts
+++ b/apps/web/src/api-clients/inventory/region/composables/use-region-api.ts
@@ -2,6 +2,7 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { StatResponse } from '@/api-clients/_common/schema/api-verbs/stat';
+import type { RegionGetParameters } from '@/api-clients/inventory/region/schema/api-verbs/get';
 import type { RegionListParameters } from '@/api-clients/inventory/region/schema/api-verbs/list';
 import type { RegionStatParameters } from '@/api-clients/inventory/region/schema/api-verbs/stat';
 import type { RegionModel } from '@/api-clients/inventory/region/schema/model';
@@ -10,6 +11,7 @@ export const useRegionApi = () => {
     const actions = {
         list: SpaceConnector.clientV2.inventory.region.list<RegionListParameters, ListResponse<RegionModel>>,
         stat: SpaceConnector.clientV2.inventory.region.stat<RegionStatParameters, StatResponse>,
+        get: SpaceConnector.clientV2.inventory.region.get<RegionGetParameters, RegionModel>,
     };
 
     return {
diff --git a/apps/web/src/api-clients/inventory/region/schema/api-verbs/get.ts b/apps/web/src/api-clients/inventory/region/schema/api-verbs/get.ts
new file mode 100644
index 0000000000..3d2373903a
--- /dev/null
+++ b/apps/web/src/api-clients/inventory/region/schema/api-verbs/get.ts
@@ -0,0 +1,3 @@
+export interface RegionGetParameters {
+    region_id: string;
+}
diff --git a/apps/web/src/common/components/select/DataSelector.vue b/apps/web/src/common/components/select/DataSelector.vue
index 83b6dfb817..45d16f08a3 100644
--- a/apps/web/src/common/components/select/DataSelector.vue
+++ b/apps/web/src/common/components/select/DataSelector.vue
@@ -11,17 +11,22 @@ import type { MenuAttachHandler } from '@cloudforet/mirinae/types/hooks/use-cont
 
 import type { DataSelectorItem } from '@/common/components/select/type';
 
-const props = defineProps<{
+interface Props {
     label?: string;
     menu?: DataSelectorItem[];
     handler?: MenuAttachHandler<DataSelectorItem>;
     showSelectMarker?: boolean;
     multiSelectable?: boolean;
     selected?: DataSelectorItem[];
-}>();
-const emit = defineEmits<{(e: 'update:selected', value: DataSelectorItem[]): void;
+}
+interface Emits {
+    (e: 'update:selected', value: DataSelectorItem[]): void;
     (e: 'update:search-text', value: string): void;
-}>();
+}
+
+const props = defineProps<Props>();
+
+const emit = defineEmits<Emits>();
 
 const slots = useSlots();
 
@@ -71,39 +76,37 @@ watch([() => props.menu, () => props.handler, () => props.selected], () => {
 </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"
-                            :show-select-marker="props.showSelectMarker"
-                            :multi-selectable="props.multiSelectable"
-                            @click-show-more="showMoreMenu()"
-                            @update:search-text="handleUpdateSearchText"
-                            @update:selected="handleUpdateSelected"
+    <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"
+                        :show-select-marker="props.showSelectMarker"
+                        :multi-selectable="props.multiSelectable"
+                        @click-show-more="showMoreMenu()"
+                        @update:search-text="handleUpdateSearchText"
+                        @update:selected="handleUpdateSelected"
+        >
+            <template #header>
+                <slot name="context-menu-header" />
+            </template>
+            <template #no-data-format>
+                <slot name="no-data-area" />
+            </template>
+            <template v-for="(_, slot) of menuSlots"
+                      #[slot]="scope"
             >
-                <template #header>
-                    <slot name="context-menu-header" />
-                </template>
-                <template #no-data-format>
-                    <slot name="no-data-area" />
-                </template>
-                <template v-for="(_, slot) of menuSlots"
-                          #[slot]="scope"
-                >
-                    <slot :name="`menu-${slot}`"
-                          v-bind="scope"
-                    />
-                </template>
-            </p-context-menu>
-        </div>
+                <slot :name="`menu-${slot}`"
+                      v-bind="scope"
+                />
+            </template>
+        </p-context-menu>
     </div>
 </template>
 
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/use-cost-data-source-map.ts b/apps/web/src/common/composables/data-source/use-cost-data-source-map.ts
similarity index 100%
rename from apps/web/src/services/_shared/dashboard/core/composables/use-cost-data-source-map.ts
rename to apps/web/src/common/composables/data-source/use-cost-data-source-map.ts
diff --git a/apps/web/src/common/modules/custom-table/custom-field-modal/composables/use-provider-list.ts b/apps/web/src/common/modules/custom-table/custom-field-modal/composables/use-provider-list.ts
new file mode 100644
index 0000000000..f330220575
--- /dev/null
+++ b/apps/web/src/common/modules/custom-table/custom-field-modal/composables/use-provider-list.ts
@@ -0,0 +1,34 @@
+import { computed } from 'vue';
+
+import { useProviderApi } from '@/api-clients/identity/provider/composables/use-provider-api';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+export const useProviderList = () => {
+    const { providerAPI } = useProviderApi();
+    const { key, params } = useServiceQueryKey('identity', 'provider', 'list', {
+        params: {
+            query: {
+                only: ['provider', 'name', 'icon'],
+            },
+        },
+    });
+
+    const { data, isFetching } = useScopedQuery({
+        queryKey: key,
+        queryFn: () => providerAPI.list(params.value),
+        select: (response) => (response.results ?? []).map((provider) => ({
+            label: provider.alias || provider.name,
+            name: provider.provider,
+            image: provider.icon,
+        })),
+        staleTime: 1000 * 60 * 3,
+        gcTime: 1000 * 60 * 30,
+    }, ['WORKSPACE', 'DOMAIN']);
+
+
+    return {
+        providerList: computed(() => data.value ?? []),
+        loading: isFetching,
+    };
+};
diff --git a/apps/web/src/common/modules/custom-table/custom-field-modal/modules/SelectCloudServiceTagColumns.vue b/apps/web/src/common/modules/custom-table/custom-field-modal/modules/SelectCloudServiceTagColumns.vue
index 2adb914822..200dacba95 100644
--- a/apps/web/src/common/modules/custom-table/custom-field-modal/modules/SelectCloudServiceTagColumns.vue
+++ b/apps/web/src/common/modules/custom-table/custom-field-modal/modules/SelectCloudServiceTagColumns.vue
@@ -29,15 +29,20 @@ import type {
     QueryItem, ValueHandlerMap, ValueHandler, KeyItemSet,
 } from '@cloudforet/mirinae/types/controls/search/query-search/type';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProviderItem, ProviderReferenceMap } from '@/store/reference/provider-reference-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useProviderList } from '@/common/modules/custom-table/custom-field-modal/composables/use-provider-list';
 import { TAGS_PREFIX } from '@/common/modules/custom-table/custom-field-modal/config';
 
-const allReferenceStore = useAllReferenceStore();
 
-const props = withDefaults(defineProps<{
+type Provider = {
+    label: string;
+    key: string;
+    imageUrl?: string;
+    icon?: string;
+};
+
+interface Props {
     selectedTagKeys?: string[];
     options?: {
         provider?: string;
@@ -45,44 +50,48 @@ const props = withDefaults(defineProps<{
         cloudServiceType?: string;
     };
     isServerPage?: boolean;
-}>(), {
+}
+
+interface Emits {
+    (e: 'update:selected-tag-keys', tagKeys: string[]): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
     selectedTagKeys: () => [],
     options: () => ({}),
     isServerPage: false,
 });
 
-const emit = defineEmits<{(e: 'update:selected-tag-keys', tagKeys: string[]): void}>();
+const emit = defineEmits<Emits>();
+
 
 /* providers */
-const providersMap = computed<ProviderReferenceMap>(() => ({
-    ...allReferenceStore.getters.provider,
-    custom: {
-        label: 'Custom',
-        key: 'custom',
-        icon: 'ic_cloud-filled',
-    },
+const { providerList } = useProviderList();
+const providersMap = computed<Record<string, Provider>>(() => ({
+    ...providerList.value.reduce((acc, provider) => {
+        acc[provider.name] = provider;
+        return acc;
+    }, {
+        custom: {
+            label: 'Custom',
+            key: 'custom',
+            icon: 'ic_cloud-filled',
+        },
+    }),
 }));
-const providers = computed<ProviderItem[]>(() => Object.values(providersMap.value));
-const providerKeys = computed<string[]>(() => providers.value.map((provider) => provider.key));
+const providerKeys = computed<string[]>(() => providerList.value.map((provider) => provider.name));
 
 /* key items */
 const keyItemSets = computed<KeyItemSet[]>(() => [{
     title: 'Provider',
-    items: [
-        ...providers.value.map((provider) => ({
-            label: provider.label,
-            name: provider.key,
-            imageUrl: provider.key !== 'custom' ? provider.icon : undefined,
-            icon: provider.key === 'custom' ? provider.icon : undefined,
-        })),
-    ],
+    items: providerList.value,
 }]);
 
 /* value handler */
 const valueHandlerMap = computed<ValueHandlerMap>(() => {
     const result = { custom: getTags };
-    providers.value.forEach((provider) => {
-        result[provider.key] = getTags;
+    providerList.value.forEach((provider) => {
+        result[provider.name] = getTags;
     });
     return result;
 });
@@ -127,7 +136,7 @@ const getQueryItemsFromTagKeys = (tagKeys: string[]): QueryItem[] => tagKeys.map
     const value = query.slice(dotPosition + 1);
     return {
         key: {
-            label: providersMap.value[key].label,
+            label: providersMap.value[key]?.label,
             name: key,
         },
         value: {
diff --git a/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue b/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue
index 16e010e23b..0d71efb4e9 100644
--- a/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue
+++ b/apps/web/src/common/modules/navigations/gnb/GNBNavigationRail.vue
@@ -12,11 +12,11 @@ import {
 } from '@cloudforet/mirinae';
 import type { ContextMenuType } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
+import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
+
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 import type { DisplayMenu } from '@/store/menu/type';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 
 import type { MenuId } from '@/lib/menu/config';
 import { MENU_ID } from '@/lib/menu/config';
@@ -26,6 +26,7 @@ import BetaMark from '@/common/components/marks/BetaMark.vue';
 import NewMark from '@/common/components/marks/NewMark.vue';
 import UpdateMark from '@/common/components/marks/UpdateMark.vue';
 import { useCurrentMenuId } from '@/common/composables/current-menu-id';
+import { useCostDataSourceMap } from '@/common/composables/data-source/use-cost-data-source-map';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 
 import { ADMIN_COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/admin/route-constant';
@@ -37,14 +38,14 @@ interface GNBMenuType extends DisplayMenu {
     disabled?: boolean;
 }
 
-const allReferenceStore = useAllReferenceStore();
-const allReferenceGetters = allReferenceStore.getters;
 const appContextStore = useAppContextStore();
 const gnbStore = useGnbStore();
 const gnbGetters = gnbStore.getters;
 const userWorkspaceStore = useUserWorkspaceStore();
 const userWorkspaceGetters = userWorkspaceStore.getters;
 const { getAllMenuList } = useAllMenuList();
+const { getCostDataSourceMap } = useCostDataSourceMap();
+
 
 const route = useRoute();
 const router = useRouter();
@@ -57,13 +58,13 @@ const storeState = reactive({
     isHideNavRail: computed(() => gnbGetters.isHideNavRail),
     isMinimizeNavRail: computed(() => gnbGetters.isMinimizeNavRail),
     currentWorkspaceId: computed(() => userWorkspaceGetters.currentWorkspaceId),
-    costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceGetters.costDataSource),
 });
 
 const noParentsMenuList:MenuId[] = [MENU_ID.WORKSPACE_HOME, MENU_ID.DASHBOARDS, MENU_ID.PROJECT, MENU_ID.SERVICE_ACCOUNT];
 
 const state = reactive({
     isInit: false as boolean|undefined,
+    costDataSourceMap: undefined as Record<string, CostDataSourceModel> | undefined,
     isHovered: false,
     isMobileSize: computed<boolean>(() => width.value < screens.mobile.max),
     isMenuDescription: undefined as boolean | undefined,
@@ -71,7 +72,7 @@ const state = reactive({
         let results = [] as GNBMenuType[];
         const allMenuList = getAllMenuList(route, router);
         const menuList = allMenuList.filter((d) => !d.hideOnGNB);
-        if (state.isInit && isEmpty(storeState.costDataSource)) {
+        if (state.isInit && isEmpty(state.costDataSourceMap ?? {})) {
             results = removeCostExplorerFromMenuList(menuList);
         } else results = menuList;
         return results;
@@ -144,6 +145,8 @@ const removeCostExplorerFromMenuList = (list: GNBMenuType[]) => {
 
 onMounted(async () => {
     state.isInit = true;
+    const costDataSourceMap = await getCostDataSourceMap();
+    state.costDataSourceMap = costDataSourceMap;
 });
 </script>
 
diff --git a/apps/web/src/common/modules/navigations/gnb/GNBToolbox.vue b/apps/web/src/common/modules/navigations/gnb/GNBToolbox.vue
index 3928815f55..f46ba26f18 100644
--- a/apps/web/src/common/modules/navigations/gnb/GNBToolbox.vue
+++ b/apps/web/src/common/modules/navigations/gnb/GNBToolbox.vue
@@ -108,14 +108,8 @@ const handleClickBreadcrumbsDropdownItem = (item: MenuItem) => {
     }
 };
 
-watch(() => state.selectedMenuId, async (selectedMenuId) => {
+watch(() => state.selectedMenuId, async () => {
     await gnbStore.initState();
-
-    if (selectedMenuId === MENU_ID.COST_ANALYSIS) {
-        await gnbStore.fetchCostQuerySet();
-    } else if (state.selectedMenuId === MENU_ID.METRIC_EXPLORER) {
-        await gnbStore.fetchMetricExample();
-    }
 }, { immediate: true });
 watch(() => state.currentMenuId, async () => {
     if (state.selectedMenuId === MENU_ID.SECURITY || state.selectedMenuId === MENU_ID.COST_ANALYSIS) return;
diff --git a/apps/web/src/common/modules/navigations/stores/gnb-store.ts b/apps/web/src/common/modules/navigations/stores/gnb-store.ts
index 907d91401d..487f9d64c3 100644
--- a/apps/web/src/common/modules/navigations/stores/gnb-store.ts
+++ b/apps/web/src/common/modules/navigations/stores/gnb-store.ts
@@ -7,15 +7,6 @@ import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserConfigListParameters } from '@/api-clients/config/user-config/schema/api-verbs/list';
 import type { UserConfigModel } from '@/api-clients/config/user-config/schema/model';
-import type { CostQuerySetListParameters } from '@/api-clients/cost-analysis/cost-query-set/schema/api-verbs/list';
-import type { CostQuerySetModel } from '@/api-clients/cost-analysis/cost-query-set/schema/model';
-import type { MetricExampleListParameters } from '@/api-clients/inventory/metric-example/schema/api-verbs/list';
-import type { MetricExampleModel } from '@/api-clients/inventory/metric-example/schema/model';
-
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
-import { useUserStore } from '@/store/user/user-store';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import type { Breadcrumb } from '@/common/modules/page-layouts/type';
@@ -28,28 +19,14 @@ interface GnbStoreState {
     favoriteItem?: FavoriteOptions;
     isHideNavRail?: boolean;
     isMinimizeNavRail?: boolean;
-    metricExamples: MetricExampleModel[];
-    costQuerySets: CostQuerySetModel[];
 }
 
 export const useGnbStore = defineStore('gnb', () => {
-    const allReferenceStore = useAllReferenceStore();
-    const userWorkspaceStore = useUserWorkspaceStore();
-    const userStore = useUserStore();
-
-    const _getters = reactive({
-        userId: computed<string|undefined>(() => userStore.state.userId),
-        costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
-        currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId as string),
-    });
-
     const state = reactive<GnbStoreState>({
         breadcrumbs: [],
         selectedItem: {} as Breadcrumb,
         id: '',
         favoriteItem: {} as FavoriteOptions,
-        metricExamples: [] as MetricExampleModel[],
-        costQuerySets: [] as CostQuerySetModel[],
         isHideNavRail: false,
         isMinimizeNavRail: false,
     });
@@ -59,8 +36,6 @@ export const useGnbStore = defineStore('gnb', () => {
         selectedItem: computed<Breadcrumb>(() => state.selectedItem),
         id: computed<string|undefined>(() => state.id),
         favoriteItem: computed<FavoriteOptions|undefined>(() => state.favoriteItem),
-        metricExamples: computed<MetricExampleModel[]>(() => state.metricExamples),
-        costQuerySets: computed<CostQuerySetModel[]>(() => state.costQuerySets),
         isHideNavRail: computed<boolean|undefined>(() => state.isHideNavRail),
         isMinimizeNavRail: computed<boolean|undefined>(() => state.isMinimizeNavRail),
     });
@@ -128,46 +103,6 @@ export const useGnbStore = defineStore('gnb', () => {
                 ErrorHandler.handleError(e);
             }
         },
-        fetchMetricExample: async () => {
-            try {
-                const res = await SpaceConnector.clientV2.inventory.metricExample.list<MetricExampleListParameters, ListResponse<MetricExampleModel>>();
-                state.metricExamples = res.results ?? [];
-            } catch (e) {
-                ErrorHandler.handleError(e);
-                state.metricExamples = [];
-            }
-        },
-        fetchCostQuerySet: async () => {
-            const costQuerySetPromiseResults = await Promise.allSettled(
-                Object.keys(_getters.costDataSource).map(async (dataSourceId) => {
-                    try {
-                        const res = await SpaceConnector.clientV2.costAnalysis.costQuerySet.list<CostQuerySetListParameters, ListResponse<CostQuerySetModel>>({
-                            data_source_id: dataSourceId,
-                            query: {
-                                filter: [
-                                    { k: 'user_id', v: _getters.userId, o: 'eq' },
-                                    { k: 'workspace_id', v: _getters.currentWorkspaceId, o: 'eq' },
-                                ],
-                                only: ['cost_query_set_id', 'data_source_id', 'name'],
-                            },
-                        });
-                        return res.results ?? [];
-                    } catch (e) {
-                        ErrorHandler.handleError(e);
-                        return [];
-                    }
-                }),
-            );
-            const costQuerySets: CostQuerySetModel[] = [];
-            costQuerySetPromiseResults.forEach((res) => {
-                if (res.status === 'fulfilled' && res.value.length) {
-                    res.value.forEach((item) => {
-                        costQuerySets.push(item);
-                    });
-                }
-            });
-            state.costQuerySets = costQuerySets;
-        },
         initState: () => {
             state.breadcrumbs = [];
             state.selectedItem = {} as Breadcrumb;
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/SearchTabContent.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/SearchTabContent.vue
index 33c8464491..cbbcd66762 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/SearchTabContent.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/SearchTabContent.vue
@@ -70,7 +70,6 @@ const state = reactive({
     }),
     serviceMenuCount: computed(() => state.searchMenuList?.length ?? 0),
     currentWorkspaceId: computed(() => workspaceStoreGetter.currentWorkspaceId),
-    stagedWorkspaces: computed(() => topBarSearchStore.state.stagedWorkspaces),
     recentMode: computed(() => state.inputText.length === 0),
     // focus
     proxyFocusingDirection: useProxyValue('focusingDirection', props, emit),
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchRecentListItem.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchRecentListItem.vue
index 7466e9391b..fdf387d9c9 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchRecentListItem.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchRecentListItem.vue
@@ -7,9 +7,10 @@ import {
     PI, PIconButton, PLazyImg, PTooltip,
 } from '@cloudforet/mirinae';
 
-import { useReferenceRouter } from '@/router/composables/use-reference-router';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import { useReferenceRouter } from '@/router/composables/use-reference-router';
 
 import { SEARCH_TAB } from '@/common/modules/navigations/top-bar/modules/top-bar-search/config';
 import { topBarSearchReferenceRouter } from '@/common/modules/navigations/top-bar/modules/top-bar-search/helper';
@@ -17,6 +18,8 @@ import { useTopBarSearchStore } from '@/common/modules/navigations/top-bar/modul
 import type { SearchTab } from '@/common/modules/navigations/top-bar/modules/top-bar-search/type';
 import type { RecentItem } from '@/common/modules/navigations/type';
 import { useRecentDelete } from '@/common/modules/user-config/recent/use-recent-delete';
+import { useCloudServiceTypeMap } from '@/common/modules/user-config/shared/_internal/use-cloud-service-type-map';
+import { useDashboardMap } from '@/common/modules/user-config/shared/_internal/use-dashboard-map';
 
 interface Props {
     recentItem?: RecentItem;
@@ -26,21 +29,22 @@ const props = withDefaults(defineProps<Props>(), {
     recentItem: undefined,
 });
 const topBarSearchStore = useTopBarSearchStore();
-const allReferenceStore = useAllReferenceStore();
 const router = useRouter();
 
 const { getReferenceLocation } = useReferenceRouter();
+const referenceMap = useAllReferenceDataModel();
+const serviceAccountMap = referenceMap.serviceAccount;
+const projectMap = referenceMap.project;
+
 
 /* Recent */
 const { mutateAsync: deleteRecent } = useRecentDelete();
+const { map: cloudServiceTypeMap } = useCloudServiceTypeMap();
+const { map: dashboardMap } = useDashboardMap();
 
 const storeState = reactive({
     currentWorkspaceId: computed(() => topBarSearchStore.storeState.currentWorkspaceId),
     activeTab: computed(() => topBarSearchStore.state.activeTab),
-    serviceAccountMap: computed(() => allReferenceStore.getters.serviceAccount),
-    projectMap: computed(() => allReferenceStore.getters.project),
-    cloudServiceTypeMap: computed(() => allReferenceStore.getters.cloudServiceType),
-    publicDashboardMap: computed(() => allReferenceStore.getters.publicDashboard),
 });
 
 const splitCloudServiceInfo = (id:string): {provider:string; group:string; name: string} => {
@@ -61,15 +65,17 @@ const state = reactive({
             return state.resourceId;
         }
         const { provider, group, name } = splitCloudServiceInfo(state.resourceId);
-        return Object.values(storeState.cloudServiceTypeMap).filter((item) => item?.data?.provider === provider && item?.data?.group === group && item.name === name)[0]?.key;
+        const cloudServiceTypeList = Array.from(cloudServiceTypeMap.value.values());
+        const cloudServiceType = cloudServiceTypeList.find((item) => item?.provider === provider && item?.group === group && item.name === name);
+        return cloudServiceType?.cloud_service_type_id;
     }),
     isDeleted: computed(() => {
         if (storeState.activeTab === SEARCH_TAB.SERVICE_ACCOUNT) {
-            return !storeState.serviceAccountMap[state.resourceId];
+            return !serviceAccountMap[state.resourceId];
         } if (storeState.activeTab === SEARCH_TAB.PROJECT) {
-            return !storeState.projectMap[state.resourceId];
+            return !projectMap[state.resourceId];
         } if (storeState.activeTab === SEARCH_TAB.DASHBOARD) {
-            return !storeState.publicDashboardMap[state.resourceId];
+            return !dashboardMap.value.get(state.resourceId);
         } if (storeState.activeTab === SEARCH_TAB.CLOUD_SERVICE) {
             return !props.recentItem?.data?.resource_id;
         }
@@ -92,9 +98,10 @@ const state = reactive({
     cloudServiceIconName: computed(() => props.recentItem?.tags?.icon),
     description: computed(() => {
         if (storeState.activeTab === SEARCH_TAB.DASHBOARD) {
-            if (storeState.publicDashboardMap[state.convertResourceId]?.data?.resourceGroup === 'PROJECT') {
-                const projectId = storeState.publicDashboardMap[state.convertResourceId]?.data?.projectId;
-                return `Single Project (${storeState.projectMap[projectId]?.label})`;
+            const dashboard = dashboardMap.value.get(state.convertResourceId) as PublicDashboardModel | undefined;
+            if (dashboard?.resource_group === 'PROJECT') {
+                const projectId = dashboard?.project_id;
+                return `Single Project (${projectMap[projectId]?.label || projectId})`;
             }
             return 'Workspace';
         } if (storeState.activeTab === SEARCH_TAB.CLOUD_SERVICE) {
@@ -110,20 +117,20 @@ const state = reactive({
 
 const getLabelByResourceId = (resourceId: string, activeTab: SearchTab) => {
     if (activeTab === SEARCH_TAB.SERVICE_ACCOUNT) {
-        const provider = storeState.serviceAccountMap[resourceId]?.provider;
+        const provider = serviceAccountMap[resourceId]?.provider;
         let accountId;
         if (provider === 'aws') {
-            accountId = storeState.serviceAccountMap[resourceId]?.data?.account_id;
+            accountId = serviceAccountMap[resourceId]?.data?.data?.account_id;
         } else if (provider === 'google_cloud') {
-            accountId = storeState.serviceAccountMap[resourceId]?.data?.project_id;
+            accountId = serviceAccountMap[resourceId]?.data?.data?.project_id;
         } else if (provider === 'azure') {
-            accountId = storeState.serviceAccountMap[resourceId]?.data?.subscription_id;
+            accountId = serviceAccountMap[resourceId]?.data?.data?.subscription_id;
         }
-        return `${storeState.serviceAccountMap[resourceId]?.label} (${accountId ?? resourceId})`;
+        return `${serviceAccountMap[resourceId]?.label || resourceId} (${accountId ?? resourceId})`;
     } if (activeTab === SEARCH_TAB.PROJECT) {
-        return storeState.projectMap[resourceId]?.label;
+        return projectMap[resourceId]?.label || resourceId;
     } if (activeTab === SEARCH_TAB.DASHBOARD) {
-        return storeState.publicDashboardMap[resourceId]?.label;
+        return dashboardMap.value.get(resourceId)?.name || resourceId;
     } if (activeTab === SEARCH_TAB.CLOUD_SERVICE) {
         return props.recentItem?.data?.label ?? '';
     }
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchWorkspaceFilter.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchWorkspaceFilter.vue
index d8f9aa0c1d..5e12e755ed 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchWorkspaceFilter.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/modules/top-bar-search-contents/modules/TopBarSearchWorkspaceFilter.vue
@@ -22,8 +22,7 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 import { useResourceApi } from '@/api-clients/search/resource/composables/use-resource-api';
 import type { ResourceModel } from '@/api-clients/search/resource/schema/model';
 import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
@@ -32,12 +31,11 @@ import {
 } from '@/common/modules/navigations/top-bar/modules/top-bar-search/store';
 import type { StageWorkspace } from '@/common/modules/navigations/top-bar/modules/top-bar-search/type';
 
-const allReferenceStore = useAllReferenceStore();
-const allReferenceGetters = allReferenceStore.getters;
 const topBarSearchStore = useTopBarSearchStore();
+const referenceMap = useAllReferenceDataModel();
+const workspaceMap = referenceMap.workspace;
 
 const storeState = reactive({
-    workspaceMap: computed(() => allReferenceGetters.workspace),
     stagedWorkspaces: computed(() => topBarSearchStore.state.stagedWorkspaces),
     selectedWorkspaces: computed(() => topBarSearchStore.getters.selectedWorkspaces),
     isAllSelected: computed(() => topBarSearchStore.state.allWorkspacesChecked),
@@ -134,7 +132,6 @@ const handleSelectItem = (item:MenuItem) => {
         topBarSearchStore.addStagedWorkspace({
             workspaceId: item.name,
             label: item.label,
-            theme: storeState.workspaceMap[item.name]?.data?.tags?.theme,
             isSelected: false,
         });
     }
@@ -202,7 +199,7 @@ watch(() => state.searchText, (val) => {
                         <div class="workspace-item-wrapper">
                             <span class="workspace-item">
                                 <workspace-logo-icon :text="workspace.label"
-                                                     :theme="workspace.theme"
+                                                     :theme="workspaceMap[workspace.workspaceId]?.data?.tags?.theme"
                                                      size="xs"
                                                      :class="{'opacity-70': storeState.isAllSelected}"
                                 /> <span class="label">{{ workspace.label }}</span>
@@ -238,7 +235,7 @@ watch(() => state.searchText, (val) => {
                 <template #item--format="{ item }">
                     <span class="search-workspace-item">
                         <workspace-logo-icon :text="item.label"
-                                             :theme="storeState.workspaceMap[item?.name]?.data?.tags?.theme"
+                                             :theme="workspaceMap[item?.name]?.data?.tags?.theme"
                                              size="xs"
                         /> <span class="label">{{ item.label }}</span>
                     </span>
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/store.ts b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/store.ts
index 3343a5135c..73e7e9b652 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/store.ts
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/store.ts
@@ -91,7 +91,6 @@ export const useTopBarSearchStore = defineStore('top-bar-search', () => {
             state.stagedWorkspaces = orderedWorkspaceList.slice(0, 3).map((workspace) => ({
                 workspaceId: workspace.value,
                 label: workspace.label,
-                theme: workspace.tags?.theme,
                 isSelected: workspace.value === storeState.currentWorkspaceId,
             }));
         },
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/type.ts b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/type.ts
index c4cc7a1d61..40ab52198f 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/type.ts
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-search/type.ts
@@ -12,7 +12,6 @@ export type FocusingDirection = typeof focusingDirection[number];
 export interface StageWorkspace {
     workspaceId: string,
     label: string,
-    theme?: string,
     isSelected: boolean
 }
 
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/TopBarFavorite.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/TopBarFavorite.vue
index 6c14b99aa2..ada8dd3208 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/TopBarFavorite.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/TopBarFavorite.vue
@@ -5,7 +5,6 @@ import {
     PI, PTooltip,
 } from '@cloudforet/mirinae';
 
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 import TopBarFavoriteContextMenu
     from '@/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue';
 
@@ -17,15 +16,9 @@ const props = withDefaults(defineProps<Props>(), {
     visible: false,
 });
 
-const gnbStore = useGnbStore();
-
 const emit = defineEmits<{(e: 'update:visible', visible: boolean): void}>();
 
 const setVisible = (visible: boolean) => {
-    if (visible) {
-        gnbStore.fetchMetricExample();
-        gnbStore.fetchCostQuerySet();
-    }
     emit('update:visible', visible);
 };
 const hideRecentFavoriteMenu = () => {
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/composables/use-metric-example-favorite-map.ts b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/composables/use-metric-example-favorite-map.ts
new file mode 100644
index 0000000000..ed5138dbbe
--- /dev/null
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/composables/use-metric-example-favorite-map.ts
@@ -0,0 +1,36 @@
+import { computed } from 'vue';
+
+import { useMetricExampleApi } from '@/api-clients/inventory/metric-example/composables/use-metric-example-api';
+import type { MetricExampleModel } from '@/api-clients/inventory/metric-example/schema/model';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+export const useMetricExampleFavoriteMap = () => {
+    const { metricExampleAPI } = useMetricExampleApi();
+
+    const { key, params: queryParams } = useServiceQueryKey('inventory', 'metric-example', 'list', {
+        params: {
+            query: {
+                only: ['example_id', 'name', 'metric_id'],
+            },
+        },
+    });
+    const { data: metricExampleList, isFetching: isFetchingMetricExampleList } = useScopedQuery({
+        queryKey: key,
+        queryFn: () => metricExampleAPI.list(queryParams.value),
+        select: (data) => data.results ?? [],
+        staleTime: 1000 * 60 * 5,
+        gcTime: 1000 * 60 * 10,
+    }, ['WORKSPACE']);
+
+    return {
+        map: computed<Map<string, MetricExampleModel>>(() => {
+            const metricExampleMap = new Map<string, MetricExampleModel>();
+            metricExampleList.value?.forEach((item) => {
+                metricExampleMap.set(item.example_id, item);
+            });
+            return metricExampleMap;
+        }),
+        loading: isFetchingMetricExampleList,
+    };
+};
diff --git a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue
index 8d8bdf79ec..31a3bba019 100644
--- a/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue
+++ b/apps/web/src/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/modules/TopBarFavoriteContextMenu.vue
@@ -12,7 +12,6 @@ import {
 } from '@cloudforet/mirinae';
 import type { ContextMenuType, MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { MetricExampleModel } from '@/api-clients/inventory/metric-example/schema/model';
 import { i18n } from '@/translations';
 
 import { useReferenceRouter } from '@/router/composables/use-reference-router';
@@ -27,7 +26,7 @@ import type { MenuId, MenuInfo } from '@/lib/menu/config';
 import { MENU_ID } from '@/lib/menu/config';
 import { MENU_INFO_MAP } from '@/lib/menu/menu-info';
 
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
+import { useMetricExampleFavoriteMap } from '@/common/modules/navigations/top-bar/modules/top-bar-toolset/modules/top-bar-favorite/composables/use-metric-example-favorite-map';
 import TopBarSuggestionList from '@/common/modules/navigations/top-bar/modules/TopBarSuggestionList.vue';
 import { useFavoriteDeleteMutation } from '@/common/modules/user-config/favorite/core/use-favorite-delete-mutation';
 import { useFavoriteList } from '@/common/modules/user-config/favorite/core/use-favorite-list';
@@ -58,8 +57,6 @@ const emit = defineEmits<{(e: 'close'): void;
 }>();
 
 const userWorkspaceStore = useUserWorkspaceStore();
-const gnbStore = useGnbStore();
-const gnbStoreGetters = gnbStore.getters;
 const authorizationStore = useAuthorizationStore();
 const { getReferenceLocation } = useReferenceRouter();
 
@@ -78,12 +75,13 @@ const { loading: isLoadingConvertedConfigData, ...convertedConfigMap } = useConv
     cloudServiceConfigList: favoriteConfigData.cloudServiceTypeItems,
 });
 const { mutateAsync: deleteFavorite, isPending: isDeletingFavorite } = useFavoriteDeleteMutation();
+const { map: metricExampleMap } = useMetricExampleFavoriteMap();
+
 
 const router = useRouter();
 
 const storeState = reactive({
     currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
-    metricExamples: computed<MetricExampleModel[]>(() => gnbStoreGetters.metricExamples),
     pageAccessPermissionList: computed<MenuId[]>(() => authorizationStore.getters.pageAccessPermissionList),
 });
 const state = reactive({
@@ -261,13 +259,14 @@ const handleSelect = (item: FavoriteMenuItem) => {
             },
         }).catch(() => {});
     } else if (item.itemType === FAVORITE_TYPE.METRIC_EXAMPLE) {
-        const metricId = storeState.metricExamples.find((example) => example.example_id === item.name)?.metric_id;
-        if (!metricId) return;
+        const exampleId = item.name || '';
+        const relatedMetric = metricExampleMap.value.get(exampleId);
+        if (!relatedMetric) return;
         router.push({
             name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL.EXAMPLE._NAME,
             params: {
-                metricId,
-                metricExampleId: item.name || '',
+                metricId: relatedMetric.metric_id,
+                metricExampleId: exampleId,
             },
         }).catch(() => {});
     } else if (item.itemType === FAVORITE_TYPE.COST_ANALYSIS) {
diff --git a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
index 266f1163e5..42a20d04a2 100644
--- a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
+++ b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
@@ -56,6 +56,12 @@ interface Props {
     showDropdownLeftArea?: boolean;
 }
 
+interface Emits {
+    (e: 'select', value: ProjectTreeNodeData[]): void;
+    (e: 'close'): void;
+    (e: 'update:selected-project-ids', value: string[]): void;
+}
+
 const props = withDefaults(defineProps<Props>(), {
     multiSelectable: false,
     projectSelectable: true,
@@ -77,10 +83,7 @@ const props = withDefaults(defineProps<Props>(), {
     showDropdownLeftArea: false,
 });
 
-const emit = defineEmits<{(e: 'select', value: ProjectTreeNodeData[]): void;
-    (e: 'close'): void;
-    (e: 'update:selected-project-ids', value: string[]): void;
-}>();
+const emit = defineEmits<Emits>();
 
 const allReferenceStore = useAllReferenceStore();
 
diff --git a/apps/web/src/common/modules/user/UserSelectDropdown.vue b/apps/web/src/common/modules/user/UserSelectDropdown.vue
index c29c68ea74..d320f687fb 100644
--- a/apps/web/src/common/modules/user/UserSelectDropdown.vue
+++ b/apps/web/src/common/modules/user/UserSelectDropdown.vue
@@ -33,8 +33,8 @@ type DropdownCategoriesType = {
     title: string;
 };
 
-const props = withDefaults(defineProps<{
-     selectedId?: string;
+interface Props {
+    selectedId?: string;
      selectedIds?: string[];
      selectionType?: 'single'|'multiple';
      appearanceType?: 'badge'|'stack';
@@ -55,7 +55,15 @@ const props = withDefaults(defineProps<{
      size?: 'sm'|'md';
      pageSize?: number;
      showDeleteAllButton?: boolean;
-}>(), {
+}
+
+interface Emits {
+    (event: 'update:selected-id', value?: string): void;
+    (event: 'update:selected-ids', value: string[]): void;
+    (event: 'formatted-selected-ids', value: Record<MembersType, string[]>): void;
+}
+
+const props = withDefaults(defineProps<Props>(), {
     selectedId: undefined,
     selectedIds: undefined,
     selectionType: 'single',
@@ -79,10 +87,7 @@ const props = withDefaults(defineProps<{
     showDeleteAllButton: true,
 });
 
-const emit = defineEmits<{(event: 'update:selected-id', value?: string): void;
-    (event: 'update:selected-ids', value: string[]): void;
-    (event: 'formatted-selected-ids', value: Record<MembersType, string[]>): void;
-}>();
+const emit = defineEmits<Emits>();
 
 const allReferenceStore = useAllReferenceStore();
 const allReferenceGetters = allReferenceStore.getters;
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
index 5a58ef5473..23b94659c0 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
@@ -19,12 +19,12 @@ import type { DataTableLoadResponse } from '@/api-clients/dashboard/_types/widge
 import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
 import type { DataTableLoadParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/load';
 import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
+import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model';
 import { i18n } from '@/translations';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
 
-import { useDataTableLoadQuery } from '@/common/modules/widgets/_composables/data-table/use-data-table-load-query';
+import { usePrivateDataTableLoadQuery } from '@/common/modules/widgets/_composables/data-table/use-private-data-table-load-query';
+import { usePublicDataTableLoadQuery } from '@/common/modules/widgets/_composables/data-table/use-public-data-table-load-query';
 import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/data-table/use-widget-data-table-list-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { REFERENCE_FIELD_MAP } from '@/common/modules/widgets/_constants/widget-constant';
@@ -54,7 +54,19 @@ type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
-const allReferenceStore = useAllReferenceStore();
+const referenceMap = useAllReferenceDataModel();
+const projectMap = referenceMap.project;
+const workspaceMap = referenceMap.workspace;
+const regionMap = referenceMap.region;
+const serviceAccountMap = referenceMap.serviceAccount;
+
+const ReferenceValueMap = {
+    project: projectMap,
+    workspace: workspaceMap,
+    region: regionMap,
+    serviceAccount: serviceAccountMap,
+};
+
 const route = useRoute();
 const dashboardId = computed(() => route.params.dashboardId);
 const { refinedVars } = useDashboardRefinedVars(dashboardId);
@@ -69,17 +81,12 @@ const {
 const storeState = reactive({
     selectedDataTableId: computed<string|undefined>(() => widgetGenerateState.selectedDataTableId),
     dataTableLoadFailed: computed(() => widgetGenerateState.dataTableLoadFailed),
-    // reference
-    project: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    workspace: computed(() => allReferenceStore.getters.workspace),
-    region: computed(() => allReferenceStore.getters.region),
-    serviceAccount: computed(() => allReferenceStore.getters.serviceAccount),
 });
 
 const state = reactive({
     isPrivate: computed(() => storeState.selectedDataTableId?.startsWith('private')),
     selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === storeState.selectedDataTableId)),
-    data: computed<DataTableLoadResponse | null>(() => queryResult?.data?.value || null),
+    data: computed<DataTableLoadResponse | null>(() => ((state.isPrivate ? privateQueryResult?.data?.value : publicQueryResult?.data?.value) || null)),
     labelFields: computed<string[]>(() => (dataTableLoading.value === true ? [] : sortWidgetTableFields(Object.keys(state.selectedDataTable?.labels_info ?? {})))),
     dataFields: computed<string[]>(() => (dataTableLoading.value === true ? [] : sortWidgetTableFields(Object.keys(state.selectedDataTable?.data_info ?? {})))),
     dataInfo: computed<DataInfo|undefined>(() => state.selectedDataTable?.data_info),
@@ -218,7 +225,7 @@ const getValue = (item, field: PreviewTableField) => {
     if (field.type === 'LABEL' && Object.keys(REFERENCE_FIELD_MAP).includes(field.name)) {
         const referenceKey = REFERENCE_FIELD_MAP[field.name];
         const referenceValueKey = item[field.name];
-        const referenceItem = storeState[referenceKey]?.[referenceValueKey];
+        const referenceItem = ReferenceValueMap[referenceKey]?.[referenceValueKey];
         return referenceItem?.label || referenceItem?.name || referenceValueKey || '-';
     }
     if (field.type === 'DATA') {
@@ -230,7 +237,7 @@ const getValue = (item, field: PreviewTableField) => {
 const getFieldName = (field: PreviewTableField) => {
     if (field.type === 'DATA' && !!field.reference && Object.keys(REFERENCE_FIELD_MAP).includes(field.reference)) {
         const referenceKey = REFERENCE_FIELD_MAP[field.reference];
-        const refernceItem = storeState[referenceKey]?.[field.name];
+        const refernceItem = ReferenceValueMap[referenceKey]?.[field.name];
         return refernceItem?.label || refernceItem?.name || field.name;
     }
     return field.name;
@@ -246,7 +253,17 @@ const getSortIcon = (field: PreviewTableField) => {
     // return '';
 };
 
-const queryResult = useDataTableLoadQuery({
+const privateQueryResult = usePrivateDataTableLoadQuery({
+    dataTableId: computed(() => storeState.selectedDataTableId),
+    params: computed<DataTableLoadParameters>(() => ({
+        data_table_id: storeState.selectedDataTableId as string,
+        granularity: state.selectedGranularity,
+        sort: state.sortBy,
+        page: state.page,
+        vars: refinedVars.value,
+    })),
+});
+const publicQueryResult = usePublicDataTableLoadQuery({
     dataTableId: computed(() => storeState.selectedDataTableId),
     params: computed<DataTableLoadParameters>(() => ({
         data_table_id: storeState.selectedDataTableId as string,
@@ -256,9 +273,9 @@ const queryResult = useDataTableLoadQuery({
         vars: refinedVars.value,
     })),
 });
-const dataTableLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isFetching.value);
-const isError = computed<boolean>(() => queryResult.isError.value);
-const errorMessage = computed<string>(() => queryResult.error?.value?.message);
+const dataTableLoading = computed<boolean>(() => privateQueryResult.isLoading.value || privateQueryResult.isFetching.value || publicQueryResult.isLoading.value || publicQueryResult.isFetching.value);
+const isError = computed<boolean>(() => privateQueryResult.isError.value || publicQueryResult.isError.value);
+const errorMessage = computed<string>(() => privateQueryResult.error?.value?.message || publicQueryResult.error?.value?.message || '');
 
 
 watch([() => storeState.selectedDataTableId, () => state.selectedDataTable], async ([dataTableId]) => {
diff --git a/apps/web/src/common/modules/widgets/_components/data-source-popover/WidgetFormCostDataSourcePopper.vue b/apps/web/src/common/modules/widgets/_components/data-source-popover/WidgetFormCostDataSourcePopper.vue
index ab63ad876d..d70f279ac8 100644
--- a/apps/web/src/common/modules/widgets/_components/data-source-popover/WidgetFormCostDataSourcePopper.vue
+++ b/apps/web/src/common/modules/widgets/_components/data-source-popover/WidgetFormCostDataSourcePopper.vue
@@ -18,10 +18,13 @@ interface Props {
     selectedCostDataSourceId?: string;
     selectedCostDataType?: string;
 }
-const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:selected-cost-data-source-id', costDataSourceId: string): void;
+interface Emits {
+    (e: 'update:selected-cost-data-source-id', costDataSourceId: string): void;
     (e: 'update:selected-cost-data-type', costDataType: string): void;
-}>();
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
 
 
 const referenceMap = useAllReferenceDataModel();
diff --git a/apps/web/src/common/modules/widgets/_components/data-table/WidgetFormDataTableCardAddForm.vue b/apps/web/src/common/modules/widgets/_components/data-table/WidgetFormDataTableCardAddForm.vue
index 6300624c2e..3216a091f0 100644
--- a/apps/web/src/common/modules/widgets/_components/data-table/WidgetFormDataTableCardAddForm.vue
+++ b/apps/web/src/common/modules/widgets/_components/data-table/WidgetFormDataTableCardAddForm.vue
@@ -15,12 +15,10 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 import type { SelectDropdownMenuItem, AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
+import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
-import type { MetricReferenceMap } from '@/store/reference/metric-reference-store';
 
 import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 import {
@@ -63,9 +61,9 @@ interface Props {
     /* Validation */
     formInvalid: boolean;
 }
-const MAX_GROUP_BY_COUNT = 5;
-const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:filter', value: Record<string, string[]>): void;
+
+interface Emits {
+    (e: 'update:filter', value: Record<string, string[]>): void;
     (e: 'update:selected-group-by-items', value: any[]): void;
     (e: 'update:selected-group-by-tags-map', value: Record<string, string[]>): void;
     (e: 'update:data-field-name', value: string): void;
@@ -74,19 +72,22 @@ const emit = defineEmits<{(e: 'update:filter', value: Record<string, string[]>):
     (e: 'update:selected-time-diff-date', value: string): void;
     (e: 'update:time-diff-data-name', value: string): void;
     (e: 'update:form-invalid', value: boolean): void;
-}>();
+}
+
+const MAX_GROUP_BY_COUNT = 5;
+const props = defineProps<Props>();
+const emit = defineEmits<Emits>();
 
-const allReferenceStore = useAllReferenceStore();
 const appContextStore = useAppContextStore();
+const referenceMap = useAllReferenceDataModel();
+const metricMap = referenceMap.metric;
+const costDataSourceMap = referenceMap.costDataSource;
 
-const storeState = reactive({
-    isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
-    metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
-    costDataSources: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
-});
+
+const isAdminMode = computed<boolean>(() => appContextStore.getters.isAdminMode);
 const { allItems: costDataSourceMenuItems } = useCostDataSourceFilterMenuItems({
-    isAdminMode: computed(() => storeState.isAdminMode),
-    costDataSource: computed(() => storeState.costDataSources[props.sourceId ?? '']),
+    isAdminMode,
+    costDataSource: computed(() => costDataSourceMap[props.sourceId ?? '']),
 });
 
 const state = reactive({
@@ -150,7 +151,7 @@ const groupByState = reactive({
         }
         if (props.sourceType === DATA_SOURCE_DOMAIN.UNIFIED_COST) {
             const groupByItemValueList = Object.values(GROUP_BY_ITEM_MAP);
-            if (!storeState.isAdminMode) return groupByItemValueList.filter((d) => d.name !== 'workspace_id').map((d) => ({ name: d.name, label: d.label }));
+            if (!isAdminMode.value) return groupByItemValueList.filter((d) => d.name !== 'workspace_id').map((d) => ({ name: d.name, label: d.label }));
             return groupByItemValueList.map((d) => ({ name: d.name, label: d.label }));
         }
         return [...assetFilterState.metricItems];
@@ -194,9 +195,9 @@ const groupByTagsState = reactive({
 
 const assetFilterState = reactive({
     refinedLabelKeys: computed(() => {
-        const metricLabelsInfo = storeState.metrics[props.sourceId ?? '']?.data?.labels_info;
+        const metricLabelsInfo = metricMap[props.sourceId ?? '']?.data?.labels_info;
         return metricLabelsInfo ? metricLabelsInfo.filter((labelInfo) => {
-            if (storeState.isAdminMode) return true;
+            if (isAdminMode.value) return true;
             return labelInfo.key !== 'workspace_id';
         }) : [];
     }),
diff --git a/apps/web/src/common/modules/widgets/_components/data-table/WidgetFormDataTableCardFilters.vue b/apps/web/src/common/modules/widgets/_components/data-table/WidgetFormDataTableCardFilters.vue
index c5459f99bb..ce8d105908 100644
--- a/apps/web/src/common/modules/widgets/_components/data-table/WidgetFormDataTableCardFilters.vue
+++ b/apps/web/src/common/modules/widgets/_components/data-table/WidgetFormDataTableCardFilters.vue
@@ -18,11 +18,9 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 import type { AutocompleteHandler } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import type { MetricLabelKey } from '@/api-clients/inventory/metric/schema/type';
+import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
-import type { MetricReferenceMap } from '@/store/reference/metric-reference-store';
 
 import { VariableModelFactory } from '@/lib/variable-models';
 import type {
@@ -81,11 +79,13 @@ interface Props {
 
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:filter', value: Record<string, string[]>): void;}>();
-const allReferenceStore = useAllReferenceStore();
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 const appContextStore = useAppContextStore();
 
+const referenceMap = useAllReferenceDataModel();
+const metricMap = referenceMap.metric;
+
 /* Query */
 const {
     dataTableList,
@@ -95,8 +95,6 @@ const {
 
 const storeState = reactive({
     isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
-    metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
-    costDataSources: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
     dataTable: computed(() => dataTableList.value.find((d) => d.data_table_id === props.dataTableId)),
 });
 
@@ -129,7 +127,7 @@ const state = reactive({
 });
 const assetFilterState = reactive({
     refinedLabelKeys: computed(() => {
-        const metricLabelsInfo = storeState.metrics[props.sourceId ?? ''].data.labels_info;
+        const metricLabelsInfo = metricMap[props.sourceId ?? '']?.data?.labels_info;
         const _refinedLabelKeys = cloneDeep(metricLabelsInfo || []);
         const projectLabelInfoIndex = _refinedLabelKeys.findIndex((d) => d.key === 'project_id');
         if (projectLabelInfoIndex > -1) {
@@ -289,7 +287,7 @@ const getCostMenuHandler = (
 };
 const getAssetMenuHandler = (labelKey: MetricLabelKey): AutocompleteHandler => {
     try {
-        let variableModelInfo: VariableModelMenuHandlerInfo;
+        let variableModelInfo: VariableModelMenuHandlerInfo|undefined;
         let queryOptions: Record<string, any> = {};
         if (isEmpty(labelKey.reference)) {
             const MetricVariableModel = new VariableModelFactory(
diff --git a/apps/web/src/common/modules/widgets/_composables/data-table/use-data-table-load-query.ts b/apps/web/src/common/modules/widgets/_composables/data-table/use-private-data-table-load-query.ts
similarity index 55%
rename from apps/web/src/common/modules/widgets/_composables/data-table/use-data-table-load-query.ts
rename to apps/web/src/common/modules/widgets/_composables/data-table/use-private-data-table-load-query.ts
index 57baafce2a..869d6a5bc8 100644
--- a/apps/web/src/common/modules/widgets/_composables/data-table/use-data-table-load-query.ts
+++ b/apps/web/src/common/modules/widgets/_composables/data-table/use-private-data-table-load-query.ts
@@ -2,53 +2,43 @@ import type { ComputedRef } from 'vue';
 import { computed } from 'vue';
 
 import { usePrivateDataTableApi } from '@/api-clients/dashboard/private-data-table/composables/use-private-data-table-api';
-import { usePublicDataTableApi } from '@/api-clients/dashboard/public-data-table/composables/use-public-data-table-api';
 import type { DataTableLoadParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/load';
 import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
 import { useScopedQuery } from '@/query/service-query/use-scoped-query';
 
-import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
+import { WIDGET_LOAD_GC_TIME, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 
-interface UseDataTableLoadQueryOptions {
+interface UsePrivateDataTableLoadQueryOptions {
     dataTableId: ComputedRef<string|undefined>;
     params: ComputedRef<DataTableLoadParameters>;
 }
 
-export const useDataTableLoadQuery = (options: UseDataTableLoadQueryOptions) => {
+export const usePrivateDataTableLoadQuery = (options: UsePrivateDataTableLoadQueryOptions) => {
     const {
         dataTableId,
         params,
     } = options;
 
-    const { publicDataTableAPI } = usePublicDataTableApi();
     const { privateDataTableAPI } = usePrivateDataTableApi();
 
     const isPrivate = computed(() => !!dataTableId?.value?.startsWith('private'));
 
     const { key: privateDataTableLoadQueryKey, params: privateDataTableLoadParams } = useServiceQueryKey('dashboard', 'private-data-table', 'load', {
-        contextKey: dataTableId,
+        contextKey: computed(() => dataTableId.value),
         params,
     });
 
-    const { key: publicDataTableLoadQueryKey, params: publicDataTableLoadParams } = useServiceQueryKey('dashboard', 'public-data-table', 'load', {
-        contextKey: dataTableId,
-        params,
-    });
-
-
     return useScopedQuery({
-        queryKey: isPrivate.value ? privateDataTableLoadQueryKey : publicDataTableLoadQueryKey,
+        queryKey: privateDataTableLoadQueryKey,
         queryFn: () => {
             if (!dataTableId.value) {
                 throw new Error('Selected data table id is undefined');
             }
-            if (isPrivate.value) {
-                return privateDataTableAPI.load(privateDataTableLoadParams.value);
-            }
-            return publicDataTableAPI.load(publicDataTableLoadParams.value);
+            return privateDataTableAPI.load(privateDataTableLoadParams.value);
         },
-        enabled: computed(() => dataTableId.value !== undefined),
+        enabled: computed(() => dataTableId.value !== undefined && isPrivate.value),
         staleTime: WIDGET_LOAD_STALE_TIME,
+        gcTime: WIDGET_LOAD_GC_TIME,
         retry: 2,
     }, ['WORKSPACE', 'DOMAIN']);
 };
diff --git a/apps/web/src/common/modules/widgets/_composables/data-table/use-public-data-table-load-query.ts b/apps/web/src/common/modules/widgets/_composables/data-table/use-public-data-table-load-query.ts
new file mode 100644
index 0000000000..6e5dda3885
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_composables/data-table/use-public-data-table-load-query.ts
@@ -0,0 +1,42 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import { usePublicDataTableApi } from '@/api-clients/dashboard/public-data-table/composables/use-public-data-table-api';
+import type { DataTableLoadParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/load';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+import { WIDGET_LOAD_GC_TIME, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
+
+interface UsePublicDataTableLoadQueryOptions {
+    dataTableId: ComputedRef<string|undefined>;
+    params: ComputedRef<DataTableLoadParameters>;
+}
+
+export const usePublicDataTableLoadQuery = (options: UsePublicDataTableLoadQueryOptions) => {
+    const {
+        dataTableId,
+        params,
+    } = options;
+
+    const { publicDataTableAPI } = usePublicDataTableApi();
+
+    const { key: publicDataTableLoadQueryKey, params: publicDataTableLoadParams } = useServiceQueryKey('dashboard', 'public-data-table', 'load', {
+        contextKey: computed(() => dataTableId.value),
+        params,
+    });
+
+    return useScopedQuery({
+        queryKey: publicDataTableLoadQueryKey,
+        queryFn: () => {
+            if (!dataTableId.value) {
+                throw new Error('Selected data table id is undefined');
+            }
+            return publicDataTableAPI.load(publicDataTableLoadParams.value);
+        },
+        enabled: computed(() => dataTableId.value !== undefined && !dataTableId.value.startsWith('private')),
+        staleTime: WIDGET_LOAD_STALE_TIME,
+        gcTime: WIDGET_LOAD_GC_TIME,
+        retry: 2,
+    }, ['WORKSPACE', 'DOMAIN']);
+};
diff --git a/apps/web/src/common/modules/widgets/_constants/widget-constant.ts b/apps/web/src/common/modules/widgets/_constants/widget-constant.ts
index ec4aed8fd8..7c3d9d94d9 100644
--- a/apps/web/src/common/modules/widgets/_constants/widget-constant.ts
+++ b/apps/web/src/common/modules/widgets/_constants/widget-constant.ts
@@ -13,5 +13,6 @@ export const REFERENCE_FIELD_MAP = {
 } as const;
 
 export const WIDGET_LOAD_STALE_TIME = 1000 * 60 * 5;
+export const WIDGET_LOAD_GC_TIME = 1000 * 60 * 10;
 
 export const UNSUPPORTED_CHARTS_IN_PIVOT = ['gauge', 'geoMap', 'treemap', 'pieChart', 'colorCodedHeatmap', 'sankeyChart'];
diff --git a/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue b/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue
index 55a5a3949f..ef8e5b8847 100644
--- a/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/geo-map/GeoMap.vue
@@ -15,11 +15,9 @@ import { throttle } from 'lodash';
 import { numberFormatter } from '@cloudforet/utils';
 
 import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model';
 import { i18n } from '@/translations';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { RegionReferenceMap } from '@/store/reference/region-reference-store';
-
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/data-table/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/data-table/use-widget-date-range';
@@ -36,9 +34,6 @@ import type {
 
 import { coral, gray } from '@/styles/colors';
 
-
-
-
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 const REGION_FIELD = 'Region';
@@ -52,17 +47,34 @@ const { dateRange } = useWidgetDateRange({
     granularity: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
 });
 const chartContext = ref<HTMLElement|null>(null);
-const allReferenceStore = useAllReferenceStore();
-const storeState = reactive({
-    regions: computed<RegionReferenceMap>(() => allReferenceStore.getters.region),
-});
+const referenceMap = useAllReferenceDataModel();
+const regionMap = referenceMap.region;
+
 const state = reactive({
     mapLoaded: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
 
     data: computed<WidgetLoadResponse | null>(() => loadQuery.data?.value || null),
+    chartData: computed<any[]>(() => {
+        if (!state.data) return [];
+        return state.data?.results?.map((result) => {
+            const _targetRegion = regionMap[result[REGION_FIELD]];
+            return {
+                name: _targetRegion?.label || result[REGION_FIELD],
+                value: [
+                    _targetRegion?.continent?.longitude ?? 0,
+                    _targetRegion?.continent?.latitude ?? 0,
+                    result[widgetOptionsState.dataFieldInfo?.data as string] ?? 0,
+                ],
+                itemStyle: {
+                    normal: {
+                        color: coral[400],
+                    },
+                },
+            };
+        });
+    }),
     chart: null as EChartsType | null,
-    chartData: [],
     unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[widgetOptionsState.dataFieldInfo?.data as string]),
     chartOptions: computed<MapSeriesOption>(() => ({
         map: 'world',
@@ -138,28 +150,6 @@ const loadMap = async () => {
     registerMap('world', geoJson);
     state.mapLoaded = true;
 };
-const drawChart = async (rawData: WidgetLoadResponse|null) => {
-    if (!rawData) return;
-    const _seriesData: any[] = [];
-    rawData.results?.forEach((result) => {
-        const _targetRegion = storeState.regions[result[REGION_FIELD]];
-        _seriesData.push({
-            name: _targetRegion?.label || result[REGION_FIELD],
-            value: [
-                _targetRegion?.continent.longitude,
-                _targetRegion?.continent.latitude,
-                result[widgetOptionsState.dataFieldInfo?.data as string],
-            ],
-            itemStyle: {
-                normal: {
-                    color: coral[400],
-                },
-            },
-        });
-    });
-
-    state.chartData = _seriesData;
-};
 
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
     dateRange,
@@ -174,10 +164,9 @@ watch([() => state.chartData, () => chartContext.value, () => state.mapLoaded],
         state.chart.setOption(state.chartOptions, true);
     }
 });
-watch([() => state.data, () => props.widgetOptions, dataTable], async ([newData,, _dataTable]) => {
+watch([() => state.convertedChartData, () => props.widgetOptions, dataTable], async ([,, _dataTable]) => {
     if (!_dataTable) return;
     await loadMap();
-    await drawChart(newData);
 }, { immediate: true });
 
 useResizeObserver(chartContext, throttle(() => {
diff --git a/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue b/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue
index aa0ef4e1f0..deebc609d7 100644
--- a/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue
@@ -9,10 +9,9 @@ import { numberFormatter } from '@cloudforet/utils';
 
 import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
 import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
+import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model';
 
 import type { Currency } from '@/store/display/type';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
 
 import { hexToRgba } from '@/lib/helper/color-convert-helper';
 
@@ -44,6 +43,7 @@ import type { TableDataItem } from '@/common/modules/widgets/types/widget-data-t
 import type { WidgetSize } from '@/common/modules/widgets/types/widget-display-type';
 import type { DataInfo } from '@/common/modules/widgets/types/widget-model';
 
+
 import {
     blue, green, red, yellow,
 } from '@/styles/colors';
@@ -83,19 +83,25 @@ interface Props {
   textWrapInfo?: TextWrapValue;
   missingValueInfo?: MissingValueValue;
 }
+interface Emits {
+    (e: 'update:sort-by', value: Query['sort']): void;
+    (e: 'update:this-page', value: number): void;
+}
+
+
 const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:sort-by', value: Query['sort']): void;
-  (e: 'update:this-page', value: number): void;
-}>();
-const allReferenceStore = useAllReferenceStore();
-
-const storeState = reactive({
-    project: computed<ProjectReferenceMap>(() => allReferenceStore.getters.project),
-    workspace: computed(() => allReferenceStore.getters.workspace),
-    region: computed(() => allReferenceStore.getters.region),
-    serviceAccount: computed(() => allReferenceStore.getters.serviceAccount),
-});
+const emit = defineEmits<Emits>();
+
+/* Reference Data */
+const referenceMap = useAllReferenceDataModel();
+const referenceValueMap = {
+    project: referenceMap.project,
+    workspace: referenceMap.workspace,
+    region: referenceMap.region,
+    serviceAccount: referenceMap.serviceAccount,
+};
 
+/* State */
 const state = reactive({
     proxySortBy: useProxyValue('sortBy', props, emit),
     proxyThisPage: useProxyValue('thisPage', props, emit),
@@ -133,7 +139,7 @@ const getComparisonInfo = (fieldName: string) => `${fieldName} Compared to ${pro
 const getField = (field: TableWidgetField): string => {
     if (field.fieldInfo?.type === 'dataField' && field.fieldInfo?.reference) {
         const referenceKey = REFERENCE_FIELD_MAP[field.fieldInfo?.reference];
-        return storeState?.[referenceKey]?.[field.label]?.name || field.label || field.name;
+        return referenceValueMap?.[referenceKey]?.[field.label]?.name || field.label || field.name;
     }
     if (field.fieldInfo?.type === 'dataField' && field.fieldInfo?.additionalType === 'dateFormat' && !!state.refinedDateFormat) {
         return getFormattedDate(field.name, state.refinedDateFormat);
@@ -161,7 +167,7 @@ const getValue = (item: TableDataItem, field: TableWidgetField) => {
         if (Object.keys(REFERENCE_FIELD_MAP).includes(field.name)) {
             const referenceKey = REFERENCE_FIELD_MAP[field.name];
             const referenceValueKey = item[field.name];
-            return storeState[referenceKey][referenceValueKey]?.label || storeState[referenceKey][referenceValueKey]?.name || referenceValueKey || '-';
+            return referenceValueMap?.[referenceKey]?.[referenceValueKey]?.label || referenceValueMap?.[referenceKey]?.[referenceValueKey]?.name || referenceValueKey || '-';
         }
         if (field.fieldInfo?.additionalType === 'dateFormat' && !!state.refinedDateFormat && item[props.fields[0].name] !== 'Total') {
             return getFormattedDate(item[field.name], state.refinedDateFormat);
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/use-dashboard-layout-schema.ts b/apps/web/src/services/_shared/dashboard/core/composables/use-dashboard-layout-schema.ts
index 1a211cf3f7..9af7a7582e 100644
--- a/apps/web/src/services/_shared/dashboard/core/composables/use-dashboard-layout-schema.ts
+++ b/apps/web/src/services/_shared/dashboard/core/composables/use-dashboard-layout-schema.ts
@@ -7,6 +7,7 @@ import type { WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
 import type { DataTableListParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/list';
 
 
+import { useCostDataSourceMap } from '@/common/composables/data-source/use-cost-data-source-map';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
 import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
@@ -16,7 +17,6 @@ import type {
     ConcatOptions, CostOptions, DataTableTransformOptions, EvalOptions, JoinOptions, PivotOptions, QueryOptions, ValueMappingOptions,
 } from '@/common/modules/widgets/types/widget-model';
 
-import { useCostDataSourceMap } from '@/services/_shared/dashboard/core/composables/use-cost-data-source-map';
 import { useDataTableListQueryFetcher } from '@/services/_shared/dashboard/core/composables/use-data-table-list-query-fetcher';
 import type { SharedDashboardLayout, SharedDataTableInfo, SharedWidgetInfo } from '@/services/dashboards/types/shared-dashboard-type';
 
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep1SearchFilter.vue b/apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep1SearchFilter.vue
index c0d198eacd..c48a0eb670 100644
--- a/apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep1SearchFilter.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep1SearchFilter.vue
@@ -7,35 +7,26 @@ import {
     PFieldTitle, PCheckboxGroup, PCheckbox, PLazyImg, PSelectDropdown,
 } from '@cloudforet/mirinae';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProviderReferenceMap, PluginItem } from '@/store/reference/provider-reference-store';
 
+import { useProviderList } from '@/services/_shared/dashboard/dashboard-create/composables/use-provider-list';
 import { DASHBOARD_LABELS } from '@/services/_shared/dashboard/dashboard-create/constants/dashboard-labels';
+import type { FilterLabelItem } from '@/services/_shared/dashboard/dashboard-create/types/dashboard-create-filter-type';
 
-export interface FilterLabelItem {
-    label: string;
-    name: string;
-    image?: string;
-}
 interface Props {
     labels: string[];
 }
 
+interface Emits {
+    (e:'select-label', labels: FilterLabelItem[]):void;
+    (e:'select-provider', providers: FilterLabelItem[]):void;
+}
+
 const props = defineProps<Props>();
-const emit = defineEmits<{(e:'select-label', labels: FilterLabelItem[]):void;
-    (e:'select-provider', plugins: FilterLabelItem[]):void;
-    (e:'select-plugin', plugins: PluginItem[]):void;
-}>();
+const emit = defineEmits<Emits>();
 
-const allReferenceStore = useAllReferenceStore();
+const { providerList, loading } = useProviderList();
 
 const state = reactive({
-    providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
-    providerList: computed(() => (Object.values(state.providers) as PluginItem[]).map((provider) => ({
-        label: provider.name,
-        name: provider.key,
-        image: provider.icon,
-    }))),
     labels: computed(() => Object.values(DASHBOARD_LABELS)),
     labelList: computed(() => uniq([...state.labels, ...props.labels]).map((label) => ({
         label,
@@ -59,12 +50,14 @@ const handleChangeProviderFilter = (selected: FilterLabelItem[]) => {
 <template>
     <div class="dashboard-create-step-1-search-filter">
         <div class="label-container">
-            <div class="label">
+            <div v-if="!loading"
+                 class="label"
+            >
                 <p-field-title class="title">
                     {{ $t('DASHBOARDS.CREATE.TEMPLATE.FILTER_PROVIDER') }}
                 </p-field-title>
                 <p-checkbox-group direction="vertical">
-                    <p-checkbox v-for="provider in state.providerList"
+                    <p-checkbox v-for="provider in providerList"
                                 :key="provider.name"
                                 class="label-item"
                                 :selected="state.selectedProviders"
@@ -108,8 +101,9 @@ const handleChangeProviderFilter = (selected: FilterLabelItem[]) => {
                                appearance-type="badge"
                                selection-label="Provider"
                                show-select-marker
+                               :loading="loading"
                                :show-delete-all-button="false"
-                               :menu="state.providerList"
+                               :menu="providerList"
                                :selected="state.selectedProviders"
                                @update:selected="handleChangeProviderFilter"
             >
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-create/composables/use-provider-list.ts b/apps/web/src/services/_shared/dashboard/dashboard-create/composables/use-provider-list.ts
new file mode 100644
index 0000000000..3232ca6e3a
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/composables/use-provider-list.ts
@@ -0,0 +1,35 @@
+import { computed } from 'vue';
+
+import { useProviderApi } from '@/api-clients/identity/provider/composables/use-provider-api';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+export const useProviderList = () => {
+    const { providerAPI } = useProviderApi();
+    const { key, params } = useServiceQueryKey('identity', 'provider', 'list', {
+        params: {
+            query: {
+                only: ['provider', 'name', 'icon'],
+            },
+        },
+    });
+
+    const { data, isFetching } = useScopedQuery({
+        queryKey: key,
+        queryFn: () => providerAPI.list(params.value),
+        select: (response) => (response.results ?? []).map((provider) => ({
+            label: provider.alias || provider.name,
+            name: provider.provider,
+            imageUrl: provider.icon,
+            icon: provider.icon,
+        })),
+        staleTime: 1000 * 60 * 3,
+        gcTime: 1000 * 60 * 30,
+    }, ['WORKSPACE', 'DOMAIN']);
+
+
+    return {
+        providerList: computed(() => data.value ?? []),
+        loading: isFetching,
+    };
+};
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep1.vue b/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep1.vue
index cb0069931e..cdafcd306c 100644
--- a/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep1.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep1.vue
@@ -14,13 +14,12 @@ import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-ty
 import type { DashboardTemplateModel } from '@/api-clients/repository/dashboard-template/schema/model';
 import { i18n } from '@/translations';
 
-
 import { useDashboardSharedContext } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context';
 import DashboardCreateBlankBoardItem from '@/services/_shared/dashboard/dashboard-create/components/DashboardCreateBlankBoardItem.vue';
-import type { FilterLabelItem } from '@/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep1SearchFilter.vue';
 import DashboardCreateStep1SearchFilter from '@/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep1SearchFilter.vue';
 import { useDashboardTemplateQuery } from '@/services/_shared/dashboard/dashboard-create/composables/use-dashboard-template-query';
 import { useDashboardCreatePageStore } from '@/services/_shared/dashboard/dashboard-create/stores/dashboard-create-page-store';
+import type { FilterLabelItem } from '@/services/_shared/dashboard/dashboard-create/types/dashboard-create-filter-type';
 import DashboardFolderTree from '@/services/dashboards/components/dashboard-folder/DashboardFolderTree.vue';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-create/types/dashboard-create-filter-type.ts b/apps/web/src/services/_shared/dashboard/dashboard-create/types/dashboard-create-filter-type.ts
new file mode 100644
index 0000000000..842055e249
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/types/dashboard-create-filter-type.ts
@@ -0,0 +1,5 @@
+export interface FilterLabelItem {
+    label: string;
+    name: string;
+    image?: string;
+}
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormDynamic.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormDynamic.vue
index 0d20560370..470a8bc7e0 100644
--- a/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormDynamic.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormDynamic.vue
@@ -1,28 +1,26 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
 
-import { sortBy } from 'lodash';
+import { startCase, toLower } from 'lodash';
 
 import {
-    PContextMenu, PDivider, PFieldGroup, PFieldTitle, PRadio, PRadioGroup, PSelectDropdown,
+    PDivider, PFieldGroup, PRadio, PRadioGroup, PSelectDropdown, PLazyImg,
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model';
+import { useResourceMenuHandlerMap } from '@/query/resource-query/resource-menu-handler';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
-import type { MetricReferenceMap } from '@/store/reference/metric-reference-store';
-import type { NamespaceReferenceMap } from '@/store/reference/namespace-reference-store';
-import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
+
 
 import { MENU_ID } from '@/lib/menu/config';
 import CostVariableModel from '@/lib/variable-models/managed-model/resource-model/cost-variable-model';
 import MetricDataVariableModel from '@/lib/variable-models/managed-model/resource-model/metric-data-variable-model';
 
+import DataSelector from '@/common/components/select/DataSelector.vue';
 import { useContentsAccessibility } from '@/common/composables/contents-accessibility';
 import {
     useCostDataSourceFilterMenuItems,
@@ -44,25 +42,56 @@ interface Props {
     originalData?: DashboardGlobalVariable;
     data: DynamicVariableData;
 }
+interface Emits {
+    (e: 'update:is-valid', isValid: boolean): void;
+    (e: 'update:data', data: DynamicVariableData): void;
+}
 const props = withDefaults(defineProps<Props>(), {
     isValid: false,
     originalData: undefined,
 });
-const emit = defineEmits<{(e: 'update:is-valid', isValid: boolean): void;
-    (e: 'update:data', data: DynamicVariableData): void;
-}>();
+const emit = defineEmits<Emits>();
 
-const allReferenceStore = useAllReferenceStore();
 const appContextStore = useAppContextStore();
 const { visibleContents } = useContentsAccessibility(MENU_ID.ASSET_INVENTORY);
 
 const referenceMap = useAllReferenceDataModel();
-const storeState = reactive({
-    namespaces: computed<NamespaceReferenceMap>(() => allReferenceStore.getters.namespace),
-    providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
-    metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
-    costDataSources: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
+const costDataSourceMap = referenceMap.costDataSource;
+const metricMap = referenceMap.metric;
+const providerMap = referenceMap.provider;
+const namespaceMap = referenceMap.namespace;
+
+const resourceMenuHandlerMap = useResourceMenuHandlerMap();
+
+
+const menuHandlerState = reactive({
+    dataSourceMenuHandler: resourceMenuHandlerMap.costDataSource(),
+    categoryMenuHandler: computed(() => resourceMenuHandlerMap.namespace({
+        dataKey: 'group',
+        menuFilters: [{
+            k: 'category',
+            v: 'ASSET',
+            o: '=',
+        }],
+    })),
+    namespaceMenuHandler: computed(() => (state.selectedCategory ? resourceMenuHandlerMap.namespace({
+        menuFilters: [{
+            k: 'group',
+            v: state.selectedCategory,
+            o: '=',
+        }],
+    }) : undefined)),
+    metricMenuHandler: computed(() => (state.selectedNamespaceId ? resourceMenuHandlerMap.metric({
+        menuFilters: [{
+            k: 'namespace_id',
+            v: state.selectedNamespaceId,
+            o: '=',
+        }],
+    }) : undefined)),
 });
+const customSnakeToTitleCase = (title: string) => startCase(toLower(title.replace(/_/g, ' ')));
+
+
 const state = reactive({
     proxyIsValid: useProxyValue<boolean>('isValid', props, emit),
     isAllValid: computed<boolean>(() => {
@@ -109,7 +138,7 @@ const state = reactive({
     }),
     valuesFromMenuItems: computed<MenuItem[]>(() => {
         if (state.selectedSourceFrom === 'asset') {
-            const _labelsInfo = referenceMap.metric[state.selectedMetricId]?.data?.labels_info || [];
+            const _labelsInfo = metricMap[state.selectedMetricId]?.data?.labels_info || [];
             return _labelsInfo.map((d) => ({ name: d.key, label: d.name }));
         }
         return costDataSourceFilterMenuItems.value;
@@ -125,84 +154,22 @@ const state = reactive({
     }),
     /* Asset */
     // category
-    categoryMenuItems: computed<MenuItem[]>(() => {
-        const groups = Object.values(storeState.namespaces).map((d) => d.data.group);
-        const _groupMenuItems: MenuItem[] = [];
-        const _uniqueGroups = Array.from(new Set(groups));
-        sortBy(_uniqueGroups, (group) => group !== 'common').forEach((group) => {
-            if (!group) return;
-            if (group === 'common') {
-                _groupMenuItems.push({
-                    type: 'item',
-                    name: group,
-                    label: i18n.t('DASHBOARDS.WIDGET.OVERLAY.STEP_1.COMMON'),
-                });
-            } else {
-                // provider case
-                const providerData = referenceMap.provider[group];
-                if (providerData) {
-                    _groupMenuItems.push({
-                        type: 'item',
-                        name: providerData.key,
-                        label: providerData.label,
-                        imageUrl: providerData.data?.icon,
-                    });
-                }
-            }
-        });
-        return _groupMenuItems.filter((d) => d.label?.toString().toLowerCase().includes(state.categorySearchText.toLowerCase()));
-    }),
     categorySearchText: '',
     selectedCategory: undefined as undefined|string,
-    selectedCategoryMenuItem: computed<MenuItem[]>(() => state.categoryMenuItems.filter((d) => d.name === state.selectedCategory)),
     // namespace
-    namespaceMenuItems: computed<MenuItem[]>(() => {
-        if (!state.selectedCategory) return [];
-        return Object.values(storeState.namespaces)
-            .filter((d) => d.data.group === state.selectedCategory)
-            .filter((d) => d.label.toLowerCase().includes(state.namespaceSearchText.toLowerCase()))
-            .map((namespace) => ({
-                type: 'item',
-                name: namespace.key,
-                label: namespace.label,
-                imageUrl: namespace.data?.icon,
-            }));
-    }),
     namespaceSearchText: '',
     selectedNamespaceId: undefined as undefined|string,
-    selectedNamespaceMenuItem: computed<MenuItem[]>(() => state.namespaceMenuItems.filter((d) => d.name === state.selectedNamespaceId)),
     // metric
-    metricMenuItems: computed<MenuItem[]>(() => {
-        if (!state.selectedNamespaceId) return [];
-        const _metrics = Object.values(storeState.metrics)
-            .filter((d) => d.data.namespace_id === state.selectedNamespaceId)
-            .filter((d) => d.label.toLowerCase().includes(state.metricSearchText.toLowerCase()));
-        return _metrics.map((d) => ({
-            type: 'item',
-            name: d.key,
-            label: d.label,
-        }));
-    }),
     metricSearchText: '',
     selectedMetricId: undefined as undefined|string,
-    selectedMetricMenuItem: computed<MenuItem[]>(() => state.metricMenuItems.filter((d) => d.name === state.selectedMetricId)),
     /* Cost */
-    costDataSourceMenuItems: computed<MenuItem[]>(() => {
-        const _filteredCostDataSources = Object.values(storeState.costDataSources)
-            .filter((d) => d.label.toLowerCase().includes(state.costDataSourceSearchText.toLowerCase()));
-        return _filteredCostDataSources.map((d) => ({
-            type: 'item',
-            name: d.key,
-            label: d.label,
-        }));
-    }),
     costDataSourceSearchText: '',
     selectedCostDataSourceId: undefined as string|undefined,
-    selectedCostDataSourceMenuItem: computed<MenuItem[]>(() => state.costDataSourceMenuItems.filter((d) => d.name === state.selectedCostDataSourceId)),
 });
+
 const { allItems: costDataSourceFilterMenuItems } = useCostDataSourceFilterMenuItems({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-    costDataSource: computed(() => storeState.costDataSources[state.selectedCostDataSourceId]),
+    costDataSource: computed(() => costDataSourceMap[state.selectedCostDataSourceId]),
 });
 
 /* Util */
@@ -212,9 +179,9 @@ const initExistingVariable = (originalData: DashboardGlobalVariable) => {
     if (_reference.resourceType === MetricDataVariableModel.meta.resourceType) {
         state.selectedSourceFrom = 'asset';
         state.selectedMetricId = _reference.dataSourceId || '';
-        const _targetMetric = storeState.metrics[state.selectedMetricId];
-        state.selectedNamespaceId = _targetMetric?.data.namespace_id || '';
-        state.selectedCategory = storeState.namespaces[state.selectedNamespaceId]?.data.group;
+        const _targetMetric = metricMap[state.selectedMetricId];
+        state.selectedNamespaceId = _targetMetric?.data?.namespace_id || '';
+        state.selectedCategory = namespaceMap[state.selectedNamespaceId]?.data?.group || '';
         state.selectedValuesFrom = _reference.dataKey;
     } else if (_reference.resourceType === CostVariableModel.meta.resourceType) {
         state.selectedSourceFrom = 'cost';
@@ -236,27 +203,27 @@ const handleChangeSourceFrom = (sourceFrom: string) => {
     state.selectedCostDataSourceId = undefined;
     state.selectedValuesFrom = undefined;
 };
-const handleSelectCategory = (item: MenuItem) => {
-    if (state.selectedCategory === item.name) return;
-    state.selectedCategory = item.name;
+const handleSelectCategory = (item: MenuItem[]) => {
+    if (state.selectedCategory === item?.[0]?.name) return;
+    state.selectedCategory = item?.[0]?.name;
     state.selectedNamespaceId = undefined;
     state.selectedMetricId = undefined;
     state.selectedValuesFrom = undefined;
 };
-const handleSelectNamespace = (item: MenuItem) => {
-    if (state.selectedNamespaceId === item.name) return;
-    state.selectedNamespaceId = item.name;
+const handleSelectNamespace = (item: MenuItem[]) => {
+    if (state.selectedNamespaceId === item?.[0]?.name) return;
+    state.selectedNamespaceId = item?.[0]?.name;
     state.selectedMetricId = undefined;
     state.selectedValuesFrom = undefined;
 };
-const handleSelectMetric = (item: MenuItem) => {
-    if (state.selectedMetricId === item.name) return;
-    state.selectedMetricId = item.name;
+const handleSelectMetric = (item: MenuItem[]) => {
+    if (state.selectedMetricId === item?.[0]?.name) return;
+    state.selectedMetricId = item?.[0]?.name;
     state.selectedValuesFrom = undefined;
 };
-const handleSelectCostDataSource = (item: MenuItem) => {
-    if (state.selectedCostDataSourceId === item.name) return;
-    state.selectedCostDataSourceId = item.name;
+const handleSelectCostDataSource = (item: MenuItem[]) => {
+    if (state.selectedCostDataSourceId === item?.[0]?.name) return;
+    state.selectedCostDataSourceId = item?.[0]?.name;
     state.selectedValuesFrom = undefined;
 };
 const handleChangeValuesFrom = (valuesFrom: string) => {
@@ -303,51 +270,67 @@ watch(() => visibleContents.value, (value) => {
             <!-- Asset Data Source -->
             <template v-if="state.selectedSourceFrom === 'asset'">
                 <div class="data-source-select-col">
-                    <p-field-title class="field-title"
+                    <data-selector class="h-full"
                                    :label="i18n.t('DASHBOARDS.DETAIL.VARIABLES.CATEGORY')"
-                                   required
-                    />
-                    <p-context-menu :menu="state.categoryMenuItems"
-                                    :search-text.sync="state.categorySearchText"
-                                    searchable
-                                    :selected="state.selectedCategoryMenuItem"
-                                    @select="handleSelectCategory"
+                                   :handler="menuHandlerState.categoryMenuHandler"
+                                   @update:selected="handleSelectCategory"
                     >
-                        <template #item--format="{ item }">
+                        <template #menu-item--format="{item}">
                             <div v-if="item.name === 'common'"
                                  class="flex gap-1"
                             >
                                 <img src="@/assets/images/img_common-asset@2x.png"
                                      alt="common-namespace-image"
-                                     class="common-category-image"
+                                     class="category-image"
                                 >
-                                {{ item.label }}
+                                {{ $t('DASHBOARDS.WIDGET.OVERLAY.STEP_1.COMMON') }}
+                            </div>
+                            <div v-else
+                                 class="inline-flex gap-1"
+                            >
+                                <p-lazy-img :src="providerMap[item.name]?.data?.icon"
+                                            :alt="item.label"
+                                            width="1rem"
+                                            height="1rem"
+                                            class="category-image"
+                                />
+                                {{ providerMap[item.name]?.label || customSnakeToTitleCase(item.name) }}
                             </div>
                         </template>
-                    </p-context-menu>
+                    </data-selector>
                 </div>
                 <div class="data-source-select-col">
-                    <p-field-title class="field-title"
+                    <data-selector :key="state.selectedCategory"
+                                   class="h-full"
                                    :label="i18n.t('DASHBOARDS.DETAIL.VARIABLES.NAMESPACE')"
-                                   required
-                    />
-                    <p-context-menu :menu="state.namespaceMenuItems"
-                                    :search-text.sync="state.namespaceSearchText"
-                                    searchable
-                                    :selected="state.selectedNamespaceMenuItem"
-                                    @select="handleSelectNamespace"
-                    />
+                                   :handler="menuHandlerState.namespaceMenuHandler"
+                                   @update:selected="handleSelectNamespace"
+                    >
+                        <template #menu-item--format="{item}">
+                            <div class="inline-flex gap-1">
+                                <img v-if="item.data.group === 'common'"
+                                     src="@/assets/images/img_common-asset@2x.png"
+                                     alt="common-namespace-image"
+                                     class="category-image"
+                                >
+                                <p-lazy-img v-else
+                                            :src="item.data?.icon"
+                                            :alt="item.label"
+                                            width="1rem"
+                                            height="1rem"
+                                            class="category-image"
+                                />
+                                {{ item.label }}
+                            </div>
+                        </template>
+                    </data-selector>
                 </div>
                 <div class="data-source-select-col">
-                    <p-field-title class="field-title"
+                    <data-selector :key="state.selectedNamespaceId"
+                                   class="h-full"
                                    :label="i18n.t('DASHBOARDS.DETAIL.VARIABLES.METRIC')"
-                                   required
-                    />
-                    <p-context-menu :menu="state.metricMenuItems"
-                                    :search-text.sync="state.metricSearchText"
-                                    searchable
-                                    :selected="state.selectedMetricMenuItem"
-                                    @select="handleSelectMetric"
+                                   :handler="menuHandlerState.metricMenuHandler"
+                                   @update:selected="handleSelectMetric"
                     />
                 </div>
             </template>
@@ -355,15 +338,10 @@ watch(() => visibleContents.value, (value) => {
             <div v-else-if="state.selectedSourceFrom === 'cost'"
                  class="data-source-select-col cost-data-source"
             >
-                <p-field-title class="field-title"
+                <data-selector class="h-full"
                                :label="i18n.t('DASHBOARDS.DETAIL.VARIABLES.DATA_SOURCE')"
-                               required
-                />
-                <p-context-menu :menu="state.costDataSourceMenuItems"
-                                :search-text.sync="state.costDataSourceSearchText"
-                                :selected="state.selectedCostDataSourceMenuItem"
-                                searchable
-                                @select="handleSelectCostDataSource"
+                               :handler="menuHandlerState.dataSourceMenuHandler"
+                               @update:selected="handleSelectCostDataSource"
                 />
             </div>
         </div>
@@ -416,17 +394,15 @@ watch(() => visibleContents.value, (value) => {
 .data-source-wrapper {
     @apply bg-white rounded-md border border-gray-200 grid grid-cols-12;
     width: 100%;
-    height: 22.5rem;
+    height: 24rem;
     margin-bottom: 1rem;
     .data-source-select-col {
         @apply border-r border-gray-200 col-span-4;
         display: flex;
         flex-direction: column;
-        height: inherit;
+        height: 24rem;
+        overflow-y: hidden;
         padding: 0.75rem 0;
-        .field-title {
-            padding: 0 0.75rem 0.25rem 0.75rem;
-        }
         &:last-child {
             @apply border-r-0;
         }
@@ -438,11 +414,10 @@ watch(() => visibleContents.value, (value) => {
             @apply col-span-12;
         }
     }
+}
 
-    /* custom design-system component - p-context-menu */
-    :deep(.p-context-menu) {
-        border: none;
-        overflow-y: auto;
-    }
+.category-image {
+    width: 1rem;
+    height: 1rem;
 }
 </style>
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardWidgetContainerV2.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardWidgetContainerV2.vue
index 5a7aa62952..b3c80957f2 100644
--- a/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardWidgetContainerV2.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardWidgetContainerV2.vue
@@ -27,12 +27,11 @@ import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/sc
 import { i18n } from '@/translations';
 
 import { useDisplayStore } from '@/store/display/display-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
+import { useCostDataSourceMap } from '@/common/composables/data-source/use-cost-data-source-map';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
 import { getWidgetComponent } from '@/common/modules/widgets/_helpers/widget-component-helper';
@@ -83,7 +82,6 @@ const dashboardDetailState = dashboardDetailStore.state;
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
-const allReferenceStore = useAllReferenceStore();
 const displayStore = useDisplayStore();
 const { publicDataTableAPI } = usePublicDataTableApi();
 const { privateDataTableAPI } = usePrivateDataTableApi();
@@ -110,19 +108,17 @@ const {
 const queryClient = useQueryClient();
 const { getDashboardManageable } = useDashboardManageable();
 const dashboardManageable = computed(() => getDashboardManageable(dashboard.value));
+const { getCostDataSourceMap } = useCostDataSourceMap();
 
 /* State */
 const containerRef = ref<HTMLElement|null>(null);
 const widgetRef = ref<Array<WidgetComponent|null>>([]);
-const storeState = reactive({
-    costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
-});
 const state = reactive({
     allReferenceTypeInfo: computed<AllReferenceTypeInfo>(() => allReferenceTypeInfoStore.getters.allReferenceTypeInfo),
     mountedWidgetMap: {} as Record<string, boolean>,
     intersectedWidgetMap: {} as Record<string, boolean>,
     isAllWidgetsMounted: computed<boolean>(() => Object.values(state.mountedWidgetMap).every((d) => d)),
-    refinedWidgetInfoList: computed<RefinedWidgetInfo[]>(() => getRefinedWidgetInfoList(widgetList.value, containerWidth.value)),
+    refinedWidgetInfoList: computed<RefinedWidgetInfo[]>(() => getRefinedWidgetInfoList(widgetList.value)),
     overlayType: 'EDIT' as 'EDIT' | 'EXPAND',
     showExpandOverlay: false,
     remountWidgetId: undefined as string|undefined,
@@ -269,12 +265,16 @@ const listWidgetDataTables = async (widgetId: string) => {
     try {
         const { results } = await _fetcher({ widget_id: widgetId });
         if (!results) return [];
+        const costDataSourceMap = await getCostDataSourceMap();
         const _refinedResults = cloneDeep(results);
         results.forEach((r, idx) => {
             if (r.data_type === DATA_TABLE_TYPE.ADDED && r.source_type === 'COST') {
                 const _dataSourceId = r.options.COST?.data_source_id;
-                _refinedResults[idx].options.COST.plugin_id = storeState.costDataSource[_dataSourceId]?.data?.plugin_info?.plugin_id;
-                _refinedResults[idx].options.COST.data_source_id = undefined;
+                const dataSource = costDataSourceMap[_dataSourceId ?? ''];
+                if (dataSource) {
+                    _refinedResults[idx].options.COST.plugin_id = dataSource.plugin_info?.plugin_id;
+                    _refinedResults[idx].options.COST.data_source_id = undefined;
+                }
             }
         });
         return _refinedResults ?? [];
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
index 89e5c43ed1..e68fab1e62 100644
--- a/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
@@ -16,10 +16,7 @@ import { PDataLoader } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
 import { COST_DATA_FIELD_MAP } from '@/api-clients/dashboard/_constants/widget-constant';
-
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
-import type { RegionReferenceMap } from '@/store/reference/region-reference-store';
+import { useAllReferenceDataModel } from '@/query/resource-query/reference-data-model';
 
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 import ErrorHandler from '@/common/composables/error/errorHandler';
@@ -52,7 +49,10 @@ const emit = defineEmits<WidgetEmit>();
 
 const { widgetState, widgetFrameProps, widgetFrameEventHandlers } = useWidget(props, emit);
 
-const allReferenceStore = useAllReferenceStore();
+const referenceMap = useAllReferenceDataModel();
+const providerMap = referenceMap.provider;
+const regionMap = referenceMap.region;
+
 const state = reactive({
     loading: true,
     data: null as FullData | null,
@@ -69,15 +69,31 @@ const state = reactive({
     ]),
     legends: computed<Legend[]>(() => getXYChartLegends(state.data?.results, COST_DATA_FIELD_MAP.PROVIDER.name, props.allReferenceTypeInfo)),
     chartLegends: computed(() => uniqWith(state.legends, isEqual)),
-    chartData: computed<MapChartData[]>(() => getRefinedMapChartData(state.data?.results, storeState.regions, storeState.providers)),
+    chartData: computed<MapChartData[]>(() => {
+        const referencedData = (state.data?.results ?? []).map((d) => ({
+            ...d,
+            continent_code: regionMap[d.region_code]?.continent?.continent_code,
+        }));
+        const refinedChartData = getRefinedMapChartData(referencedData);
+
+        return refinedChartData.map((d) => ({
+            ...d,
+            pieChartData: Object.entries(d._unrefinedChartData).map(([provider, cost]) => ({
+                category: providerMap[provider]?.label || provider,
+                color: providerMap[provider]?.color || '',
+                provider,
+                value: cost as number,
+                pieSettings: {
+                    fill: providerMap[provider]?.color || '',
+                    stroke: providerMap[provider]?.color || '',
+                },
+            })),
+        }));
+    }),
 });
 
 const { pageSize, thisPage } = useWidgetPagination(widgetState);
 
-const storeState = reactive({
-    providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
-    regions: computed<RegionReferenceMap>(() => allReferenceStore.getters.region),
-});
 
 const chartContext = ref<HTMLElement|null>(null);
 const chartHelper = useAmcharts5(chartContext);
@@ -232,8 +248,8 @@ defineExpose<WidgetExpose<FullData>>({
                     >
                         <span v-if="legend.name"
                               class="circle"
-                              :style="{background: storeState.providers[legend.name]?.color}"
-                        /><span class="label">{{ storeState.providers[legend.name]?.label }}</span>
+                              :style="{background: providerMap[legend.name]?.color}"
+                        /><span class="label">{{ providerMap[legend.name]?.label || legend.name }}</span>
                     </span>
                 </div>
             </p-data-loader>
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts
index d431f0efc3..9d311d27a9 100644
--- a/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts
@@ -1,9 +1,6 @@
 import { groupBy, sum } from 'lodash';
 
 
-import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
-import type { RegionReferenceMap } from '@/store/reference/region-reference-store';
-
 
 interface ContinentInfo {
     continent_code: string;
@@ -58,35 +55,33 @@ export interface Data {
     [dataField: string]: any;
 }
 
-export const getRefinedMapChartData = (results: Data[]|null, regions: RegionReferenceMap, providers: ProviderReferenceMap): MapChartData[] => {
+export const getRefinedMapChartData = (results: Data[]|null): MapChartData[] => {
     if (!results) return [];
-    const costDataByProvider = getCostDataByProvider(results, regions);
-    return Object.keys(costDataByProvider).map((continent) => ({
+    const costDataByProvider = getCostDataByProvider(results);
+    return Object.entries(costDataByProvider).map(([continent, costData]) => ({
         title: CONTINENT_INFO[continent]?.continent_label,
         continent_code: CONTINENT_INFO[continent]?.continent_code,
         latitude: CONTINENT_INFO[continent]?.latitude,
         longitude: CONTINENT_INFO[continent]?.longitude,
         width: 48,
         height: 48,
-        pieChartData: Object.entries(costDataByProvider[continent]).map(([provider, cost]) => ({
-            category: providers[provider]?.label || provider,
-            color: providers[provider]?.color || '',
-            provider,
-            value: cost as number,
-            pieSettings: {
-                fill: providers[provider]?.color || '',
-                stroke: providers[provider]?.color || '',
-            },
-        })),
+        pieChartData: [],
+        _unrefinedChartData: costData,
+        // pieChartData: Object.entries(costDataByProvider[continent]).map(([provider, cost]) => ({
+        //     category: providers[provider]?.label || provider,
+        //     color: providers[provider]?.color || '',
+        //     provider,
+        //     value: cost as number,
+        //     pieSettings: {
+        //         fill: providers[provider]?.color || '',
+        //         stroke: providers[provider]?.color || '',
+        //     },
+        // })),
     }));
 };
 
-const getCostDataByProvider = (results: Data[], regions: RegionReferenceMap): CostDataByProvider => {
-    const data = results.map((d) => ({
-        ...d,
-        continent_code: regions[d.region_code]?.continent?.continent_code,
-    }));
-    const continentGroupBy = groupBy(data, 'continent_code');
+const getCostDataByProvider = (results: Data[]): CostDataByProvider => {
+    const continentGroupBy = groupBy(results, 'continent_code');
     const result = {};
     Object.entries(continentGroupBy).forEach(([continent, cItem]) => {
         const providerGroupBy = groupBy(cItem, 'provider');
@@ -124,4 +119,7 @@ export interface MapChartData {
     height: number;
     width: number;
     pieChartData: PieChartData[];
+    _unrefinedChartData: {
+        [provider: string]: number;
+    }
 }
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerNameFormModal.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerNameFormModal.vue
index 1eb42040de..661b14907c 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerNameFormModal.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerNameFormModal.vue
@@ -13,6 +13,7 @@ import {
 
 import { useMetricExampleApi } from '@/api-clients/inventory/metric-example/composables/use-metric-example-api';
 import { useMetricApi } from '@/api-clients/inventory/metric/composables/use-metric-api';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -20,7 +21,6 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
-import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 
 import { useMetricExampleGetQuery } from '@/services/asset-inventory/composables/use-metric-example-get-query';
 import { useMetricExampleListQuery } from '@/services/asset-inventory/composables/use-metric-example-list-query';
@@ -35,18 +35,20 @@ interface Props {
     visible: boolean;
     type?: string;
 }
+interface Emits {
+    (e: 'update:visible', visible: boolean): void;
+    (e: 'save-as', name?: string): void;
+}
+
 const props = withDefaults(defineProps<Props>(), {
     visible: false,
     type: NAME_FORM_MODAL_TYPE.EDIT_NAME,
 });
-const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
-    (e: 'save-as', name?: string): void;
-}>();
+const emit = defineEmits<Emits>();
 
 const router = useRouter();
 const route = useRoute();
 
-const gnbStore = useGnbStore();
 const metricExplorerPageStore = useMetricExplorerPageStore();
 const metricExplorerPageState = metricExplorerPageStore.state;
 const state = reactive({
@@ -102,7 +104,7 @@ const { data: currentMetric, metricGetQueryKey } = useMetricGetQuery({
 const { data: currentMetricExample, metricExampleGetQueryKey } = useMetricExampleGetQuery({
     metricExampleId: computed(() => route.params.metricExampleId),
 });
-const { data: namespaceMetricExamples, metricExampleListQueryKey } = useMetricExampleListQuery({
+const { data: namespaceMetricExamples } = useMetricExampleListQuery({
     params: computed(() => ({
         namespace_id: metricExplorerPageState.selectedNamespaceId,
     })),
@@ -114,16 +116,17 @@ const { data: currentNamespaceMetrics, metricListQueryKey } = useMetricListQuery
 });
 
 /* Mutations */
+const { key: metricExampleListBaseQueryKey } = useServiceQueryKey('inventory', 'metric-example', 'list');
 const { metricAPI } = useMetricApi();
 const { metricExampleAPI } = useMetricExampleApi();
 const queryClient = useQueryClient();
 const { mutate: createMetricExample, isPending: isCreateMetricExamplePending } = useMutation({
     mutationFn: metricExampleAPI.create,
     onSuccess: async (data) => {
-        queryClient.invalidateQueries({ queryKey: metricExampleListQueryKey.value });
+        // NOTE: This invalidateQueries is for both of the metric-example and metric-example-favorite
+        queryClient.invalidateQueries({ queryKey: metricExampleListBaseQueryKey.value });
         showSuccessMessage(i18n.t('INVENTORY.METRIC_EXPLORER.ALT_S_ADD_METRIC_EXAMPLE'), '');
         state.proxyVisible = false;
-        await gnbStore.fetchMetricExample();
         await router.replace({
             name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL.EXAMPLE._NAME,
             params: {
@@ -139,10 +142,10 @@ const { mutate: createMetricExample, isPending: isCreateMetricExamplePending } =
 const { mutate: updateMetricExampleName, isPending: isUpdateMetricExampleNamePending } = useMutation({
     mutationFn: metricExampleAPI.update,
     onSuccess: async () => {
-        queryClient.invalidateQueries({ queryKey: metricExampleListQueryKey.value });
+        // NOTE: This invalidateQueries is for both of the metric-example and metric-example-favorite
+        queryClient.invalidateQueries({ queryKey: metricExampleListBaseQueryKey.value });
         queryClient.invalidateQueries({ queryKey: metricExampleGetQueryKey.value });
         state.proxyVisible = false;
-        await gnbStore.fetchMetricExample();
         showSuccessMessage(i18n.t('INVENTORY.METRIC_EXPLORER.ALT_S_UPDATE_METRIC_NAME'), '');
     },
     onError: async (e) => {
diff --git a/apps/web/src/services/iam/components/UserGroupManagementTabNotificationChannel.vue b/apps/web/src/services/iam/components/UserGroupManagementTabNotificationChannel.vue
index beff3b70f1..5e536b1129 100644
--- a/apps/web/src/services/iam/components/UserGroupManagementTabNotificationChannel.vue
+++ b/apps/web/src/services/iam/components/UserGroupManagementTabNotificationChannel.vue
@@ -23,14 +23,12 @@ import { useScopedPaginationQuery } from '@/query/service-query/pagination/use-s
 import { useScopedQuery } from '@/query/service-query/use-scoped-query';
 import { i18n } from '@/translations';
 
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { PluginReferenceMap } from '@/store/reference/plugin-reference-store';
-
 import { assetUrlConverter } from '@/lib/helper/asset-helper';
 
 import type { DayType } from '@/common/components/schedule-setting-form/schedule-setting-form';
 import { useQueryTags } from '@/common/composables/query-tags';
 
+import { usePluginMap } from '@/services/iam/composables/use-plugin-map';
 import { useUserGroupChannelGetQuery } from '@/services/iam/composables/use-user-group-channel-get-query';
 import {
     USER_GROUP_CHANNELS_SEARCH_HANDLERS,
@@ -41,6 +39,7 @@ import { useUserGroupPageStore } from '@/services/iam/store/user-group-page-stor
 
 
 
+
 interface Props {
   hasReadWriteAccess: boolean;
 }
@@ -50,8 +49,6 @@ const props = defineProps<Props>();
 const userGroupPageStore = useUserGroupPageStore();
 const userGroupPageState = userGroupPageStore.state;
 const userGroupPageGetters = userGroupPageStore.getters;
-const allReferenceStore = useAllReferenceStore();
-const allReferenceGetters = allReferenceStore.getters;
 
 const notificationChannelCreateFormStore = useNotificationChannelCreateFormStore();
 
@@ -108,9 +105,7 @@ const { data: userGroupChannelListData, totalCount: userGroupChannelListTotalCou
     verb: 'list',
 }, ['DOMAIN', 'WORKSPACE']);
 
-const storeState = reactive({
-    plugins: computed<PluginReferenceMap>(() => allReferenceGetters.plugin),
-});
+const { pluginMap } = usePluginMap();
 
 const tableState = reactive({
     fields: computed(() => [
@@ -169,13 +164,17 @@ const { key: notificationProtocolListQueryKey } = useServiceQueryKey('alert-mana
 const { data: notificationProtocolListData } = useScopedQuery({
     queryKey: notificationProtocolListQueryKey,
     queryFn: async () => notificationProtocolAPI.list(),
-    select: (data) => data.results?.map((i) => ({
-        plugin_info: i.plugin_info,
-        name: i.name,
-        protocol_id: i.protocol_id,
-        icon: storeState.plugins[i.plugin_info.plugin_id]?.icon || '',
-    })),
-    enabled: computed(() => Object.keys(storeState.plugins).length > 0),
+    select: (data) => data.results?.map((i) => {
+        const plugin = pluginMap.value?.[i.plugin_info.plugin_id];
+        const pluginIcon = plugin?.tags?.icon ? assetUrlConverter(plugin.tags.icon) : '';
+        return {
+            plugin_info: i.plugin_info,
+            name: i.name,
+            protocol_id: i.protocol_id,
+            icon: pluginIcon,
+        };
+    }),
+    enabled: computed(() => pluginMap.value && Object.keys(pluginMap.value).length > 0),
     gcTime: 1000 * 60 * 2,
     staleTime: 1000 * 30,
 }, ['DOMAIN', 'WORKSPACE']);
@@ -216,10 +215,12 @@ const handleUpdateModal = async (modalType: string) => {
             if (protocol_id) {
                 const protocolResult = notificationProtocolListData.value?.find((protocol) => protocol.protocol_id === protocol_id);
 
-                if (protocolResult && storeState.plugins[protocolResult?.plugin_info.plugin_id] !== undefined) {
+                const plugin = pluginMap.value?.[protocolResult?.plugin_info.plugin_id ?? ''];
+                if (protocolResult && plugin) {
+                    const pluginIcon = plugin?.tags?.icon ? assetUrlConverter(plugin.tags.icon) : '';
                     notificationChannelCreateFormStore.$patch((_state) => {
                         _state.state.selectedProtocol.protocol_id = protocol_id;
-                        _state.state.selectedProtocol.icon = storeState.plugins[protocolResult?.plugin_info.plugin_id]?.icon || '';
+                        _state.state.selectedProtocol.icon = pluginIcon;
                         _state.state.selectedProtocol.name = protocolResult?.name as string;
                         _state.state.channelName = name;
                         _state.state.scheduleInfo = {
diff --git a/apps/web/src/services/iam/composables/use-plugin-map.ts b/apps/web/src/services/iam/composables/use-plugin-map.ts
new file mode 100644
index 0000000000..13db96a63d
--- /dev/null
+++ b/apps/web/src/services/iam/composables/use-plugin-map.ts
@@ -0,0 +1,33 @@
+import { computed } from 'vue';
+
+import { usePluginApi } from '@/api-clients/repository/plugin/composables/use-plugin-api';
+import type { PluginModel } from '@/api-clients/repository/plugin/schema/model';
+import { useServiceQueryKey } from '@/query/core/query-key/use-service-query-key';
+import { useScopedQuery } from '@/query/service-query/use-scoped-query';
+
+export const usePluginMap = () => {
+    const { pluginAPI } = usePluginApi();
+
+    const { key: pluginListQueryKey } = useServiceQueryKey('repository', 'plugin', 'list', {
+        params: {
+            only: ['plugin_id', 'name', 'tags'],
+        },
+    });
+
+    const { data: pluginList } = useScopedQuery({
+        queryKey: pluginListQueryKey,
+        queryFn: () => pluginAPI.list(),
+        select: (data) => data.results || [],
+        staleTime: 1000 * 60 * 2,
+        gcTime: 1000 * 60 * 3,
+    }, ['DOMAIN', 'WORKSPACE']);
+
+    const pluginMap = computed(() => pluginList.value?.reduce((acc, curr) => {
+        acc[curr.plugin_id] = curr;
+        return acc;
+    }, {} as Record<string, PluginModel>));
+
+    return {
+        pluginMap,
+    };
+};