diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
index 629eca906f..445cfc3958 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
@@ -3,8 +3,9 @@ import {
     computed, reactive, watch,
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
+import { useRoute } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import {
     PButton, PPopover, PSelectCard, PI, PDivider,
@@ -32,7 +33,8 @@ import WidgetFormAssetSecurityDataSourcePopper
 import WidgetFormCostDataSourcePopper from '@/common/modules/widgets/_components/WidgetFormCostDataSourcePopper.vue';
 import WidgetFormUnifiedCostDataSourcePopper
     from '@/common/modules/widgets/_components/WidgetFormUnifiedCostDataSourcePopper.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
+import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query';
 import {
     DATA_SOURCE_DOMAIN,
     DATA_TABLE_OPERATOR,
@@ -45,34 +47,44 @@ import type {
     DataTableDataType, DataTableSourceType, DataTableOperator, DataTableAddOptions, DataTableTransformOptions,
 } from '@/common/modules/widgets/types/widget-model';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query';
 
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 const allReferenceStore = useAllReferenceStore();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
 const userStore = useUserStore();
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 
 const emit = defineEmits<{(e: 'scroll'): void;}>();
 
 const { visibleContents } = useContentsAccessibility(MENU_ID.ASSET_INVENTORY);
 
 /* Query */
+const {
+    api: widgetApi,
+} = useWidgetQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
 const {
     dataTableList,
-    api,
-    keys: widgetQueryKeys,
-    queryClient,
-} = useWidgetFormQuery({
+    keys: dataTableKeys,
+    api: dataTableApi,
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
+const queryClient = useQueryClient();
+
 const {
     dashboard,
-    keys,
-} = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+} = useDashboardGetQuery({
+    dashboardId,
+});
+const {
+    keys: widgetKeys,
+} = useDashboardWidgetListQuery({
+    dashboardId,
 });
 
 
@@ -193,16 +205,16 @@ const state = reactive({
 
 /* Api */
 const widgetCreateFn = (params: WidgetCreateParams): Promise<WidgetModel> => {
-    if (dashboardDetailState.dashboardId?.startsWith('private')) {
-        return api.privateWidgetAPI.create(params);
+    if (dashboardId.value?.startsWith('private')) {
+        return widgetApi.privateWidgetAPI.create(params);
     }
-    return api.publicWidgetAPI.create(params);
+    return widgetApi.publicWidgetAPI.create(params);
 };
 const { mutateAsync: createWidget, isPending: widgetCreateLoading } = useMutation({
     mutationFn: widgetCreateFn,
     onSuccess: (data) => {
-        const _isPrivate = dashboardDetailState.dashboardId?.startsWith('private');
-        const widgetListQueryKey = _isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
+        const _isPrivate = dashboardId.value?.startsWith('private');
+        const widgetListQueryKey = _isPrivate ? widgetKeys.privateWidgetListQueryKey : widgetKeys.publicWidgetListQueryKey;
         queryClient.setQueryData(widgetListQueryKey.value, (oldData: ListResponse<WidgetModel>) => (oldData.results?.length ? {
             ...oldData, results: [...oldData.results, data],
         } : {
@@ -215,16 +227,16 @@ const { mutateAsync: createWidget, isPending: widgetCreateLoading } = useMutatio
     },
 });
 const dataTableAddFn = (params: DataTableAddParameters): Promise<DataTableModel> => {
-    if (dashboardDetailState.dashboardId?.startsWith('private')) {
-        return api.privateDataTableAPI.add(params);
+    if (dashboardId.value?.startsWith('private')) {
+        return dataTableApi.privateDataTableAPI.add(params);
     }
-    return api.publicDataTableAPI.add(params);
+    return dataTableApi.publicDataTableAPI.add(params);
 };
 const { mutateAsync: addDataTable, isPending: dataTableAddLoading } = useMutation({
     mutationFn: dataTableAddFn,
     onSuccess: (data) => {
         const _isPrivate = widgetGenerateState.widgetId?.startsWith('private');
-        const dataTableListQueryKey = _isPrivate ? widgetQueryKeys.privateDataTableListQueryKey : widgetQueryKeys.publicDataTableListQueryKey;
+        const dataTableListQueryKey = _isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey;
         queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<DataTableModel>) => (oldData.results?.length ? {
             ...oldData, results: [...oldData.results, data],
         } : {
@@ -269,7 +281,7 @@ const handleCreateUnsavedTransform = async (operator: DataTableOperator) => {
     } as Partial<DataTableModel>;
 
     const _isPrivate = widgetGenerateState.widgetId?.startsWith('private');
-    const dataTableListQueryKey = _isPrivate ? widgetQueryKeys.privateDataTableListQueryKey : widgetQueryKeys.publicDataTableListQueryKey;
+    const dataTableListQueryKey = _isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey;
     await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<DataTableModel>) => (oldData.results?.length ? {
         ...oldData, results: [...oldData.results, unsavedTransformData],
     } : {
@@ -288,7 +300,7 @@ const handleConfirmDataSource = async () => {
     // create widget
     if (widgetGenerateState.overlayType === 'ADD' && !widgetGenerateState.widgetId) {
         await createWidget({
-            dashboard_id: dashboardDetailState.dashboardId as string,
+            dashboard_id: dashboardId.value as string,
             tags: { created_by: userStore.state.userId },
             widget_type: 'table',
         });
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
index 8c86344cc9..9a4269820e 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardAddContents.vue
@@ -3,7 +3,7 @@ import {
     computed, defineExpose, onMounted, reactive, watch,
 } from 'vue';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import {
     cloneDeep, isArray, isEqual, uniq,
 } from 'lodash';
@@ -17,6 +17,7 @@ import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data
 import type { DataTableDeleteParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/delete';
 import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update';
 import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
@@ -38,7 +39,8 @@ import WidgetFormDataTableCardSourceForm
 import {
     useDataTableCascadeUpdate,
 } from '@/common/modules/widgets/_composables/use-data-table-cascade-update';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
+import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query';
 import {
     DATA_SOURCE_DOMAIN,
     DATA_TABLE_OPERATOR,
@@ -53,7 +55,6 @@ import type {
 } from '@/common/modules/widgets/types/widget-model';
 
 import { GROUP_BY } from '@/services/cost-explorer/constants/cost-explorer-constant';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 interface Props {
     selected: boolean;
@@ -68,20 +69,24 @@ const props = defineProps<Props>();
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 const allReferenceStore = useAllReferenceStore();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
 
 /* Query */
 const {
     widget,
+    keys: widgetKeys,
+    fetcher: widgetFetcher,
+} = useWidgetQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+const {
     dataTableList,
-    keys,
-    api,
-    fetcher,
-    queryClient,
-} = useWidgetFormQuery({
+    keys: dataTableKeys,
+    api: dataTableApi,
+    fetcher: dataTableFetcher,
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
+const queryClient = useQueryClient();
 const {
     cascadeUpdateDataTable,
 } = useDataTableCascadeUpdate({
@@ -230,33 +235,37 @@ const modalState = reactive({
     referenceDataTableName: '',
 });
 
+/* Query Keys */
+const { withSuffix: privateDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'private-data-table', 'get');
+const { withSuffix: publicDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'public-data-table', 'get');
+const { withSuffix: privateDataTableLoadQueryKey } = useServiceQueryKey('dashboard', 'private-data-table', 'load');
+const { withSuffix: publicDataTableLoadQueryKey } = useServiceQueryKey('dashboard', 'public-data-table', 'load');
+const { withSuffix: privateWidgetLoadQueryKey } = useServiceQueryKey('dashboard', 'private-widget', 'load');
+const { withSuffix: publicWidgetLoadQueryKey } = useServiceQueryKey('dashboard', 'public-widget', 'load');
+const { withSuffix: privateWidgetLoadSumQueryKey } = useServiceQueryKey('dashboard', 'private-widget', 'load-sum');
+const { withSuffix: publicWidgetLoadSumQueryKey } = useServiceQueryKey('dashboard', 'public-widget', 'load-sum');
+
 /* APIs */
 const invalidateLoadQueries = async (data: DataTableModel) => {
-    await queryClient.invalidateQueries({
-        queryKey: [
-            ...(state.isPrivate ? keys.privateDataTableLoadQueryKey.value : keys.publicDataTableLoadQueryKey.value),
-            data.data_table_id,
-        ],
-    });
-    await queryClient.invalidateQueries({
-        queryKey: [
-            ...(state.isPrivate ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-            dashboardDetailState.dashboardId,
-            widgetGenerateState.widgetId,
-        ],
-    });
-    await queryClient.invalidateQueries({
-        queryKey: [
-            ...(state.isPrivate ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value),
-            dashboardDetailState.dashboardId,
-            widgetGenerateState.widgetId,
-        ],
-    });
+    if (!widgetGenerateState.widgetId) return;
+    if (data.data_table_id.startsWith('private')) {
+        await Promise.all([
+            queryClient.invalidateQueries({ queryKey: privateDataTableLoadQueryKey(state.dataTableId) }),
+            queryClient.invalidateQueries({ queryKey: privateWidgetLoadQueryKey(widgetGenerateState.widgetId) }),
+            queryClient.invalidateQueries({ queryKey: privateWidgetLoadSumQueryKey(widgetGenerateState.widgetId) }),
+        ]);
+    } else {
+        await Promise.all([
+            queryClient.invalidateQueries({ queryKey: publicDataTableLoadQueryKey(state.dataTableId) }),
+            queryClient.invalidateQueries({ queryKey: publicWidgetLoadQueryKey(widgetGenerateState.widgetId) }),
+            queryClient.invalidateQueries({ queryKey: publicWidgetLoadSumQueryKey(widgetGenerateState.widgetId) }),
+        ]);
+    }
 };
 const { mutateAsync: updateDataTableMutation } = useMutation({
-    mutationFn: fetcher.updateDataTableFn,
+    mutationFn: dataTableFetcher.updateDataTableFn,
     onSuccess: async (data) => {
-        const dataTableListQueryKey = state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
+        const dataTableListQueryKey = state.isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey;
         await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
             if (oldData.results) {
                 return {
@@ -271,6 +280,7 @@ const { mutateAsync: updateDataTableMutation } = useMutation({
             }
             return oldData;
         });
+        await queryClient.invalidateQueries({ queryKey: state.isPrivate ? privateDataTableGetQueryKey(state.dataTableId) : publicDataTableGetQueryKey(state.dataTableId) });
         await invalidateLoadQueries(data);
 
         setInitialDataTableForm();
@@ -284,11 +294,11 @@ const { mutateAsync: updateDataTableMutation } = useMutation({
     },
 });
 const { mutateAsync: updateWidget } = useMutation({
-    mutationFn: fetcher.updateWidgetFn,
+    mutationFn: widgetFetcher.updateWidgetFn,
     onSuccess: (data) => {
         const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private')
-            ? keys.privateWidgetGetQueryKey
-            : keys.publicWidgetGetQueryKey;
+            ? widgetKeys.privateWidgetGetQueryKey
+            : widgetKeys.publicWidgetGetQueryKey;
         queryClient.setQueryData(widgetQueryKey.value, () => data);
     },
     onError: (e) => {
@@ -363,8 +373,8 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
 };
 const deleteDataTableFn = (params: DataTableDeleteParameters): Promise<void> => {
     if (params.data_table_id.startsWith('private')) {
-        return api.privateDataTableAPI.delete(params);
-    } return api.publicDataTableAPI.delete(params);
+        return dataTableApi.privateDataTableAPI.delete(params);
+    } return dataTableApi.publicDataTableAPI.delete(params);
 };
 const { mutateAsync: deleteDataTable } = useMutation({
     mutationFn: deleteDataTableFn,
@@ -376,7 +386,7 @@ const { mutateAsync: deleteDataTable } = useMutation({
         widgetGenerateStore.setAllDataTableInvalidMap(_allDataTableInvalidMap);
 
         const _isPrivate = widgetGenerateState.widgetId?.startsWith('private');
-        const dataTableListQueryKey = _isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
+        const dataTableListQueryKey = _isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey;
         await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
             if (oldData.results) {
                 return {
@@ -441,6 +451,9 @@ const handleCancelModal = () => {
     modalState.visible = false;
 };
 const handleUpdateDataTable = async () => {
+    if (!widgetGenerateState.widgetId) {
+        throw new Error('Widget ID is required');
+    }
     state.loading = true;
     const result = await updateDataTable();
     if (result) {
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue
index e5cd5a3d9f..1b95dc5731 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFilters.vue
@@ -40,7 +40,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardFiltersItem
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import {
     DATA_SOURCE_DOMAIN,
     DATA_TABLE_QUERY_OPERATOR,
@@ -89,7 +89,7 @@ const appContextStore = useAppContextStore();
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
index a1548c2c11..d95158238b 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
@@ -4,6 +4,7 @@ import { onClickOutside } from '@vueuse/core/index';
 import {
     computed, onMounted, reactive, ref,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 import { isArray } from 'lodash';
 
@@ -25,9 +26,8 @@ import type { DataTableQueryFilterForDropdown } from '@/common/modules/widgets/t
 
 import { blue, gray } from '@/styles/colors';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
 interface Props {
@@ -39,16 +39,15 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 const emit = defineEmits<{(e: 'delete'): void;
     (e: 'update:selected-filter', filter: DataTableQueryFilterForDropdown): void;
 }>();
 const operatorButtonRef = ref<HTMLElement | null>(null);
 
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 const state = reactive({
     visibleMenu: false,
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue
index 5fae855e2d..50e17a7d08 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue
@@ -2,7 +2,7 @@
 
 import { computed, reactive } from 'vue';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
 
 import {
@@ -17,7 +17,8 @@ import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
+import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query';
 import {
     DATA_TABLE_TYPE,
 } from '@/common/modules/widgets/_constants/data-table-constant';
@@ -47,13 +48,20 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     widget,
+    fetcher: widgetFetcher,
+    keys: widgetKeys,
+} = useWidgetQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+const {
     dataTableList,
-    fetcher,
-    keys,
-    queryClient,
-} = useWidgetFormQuery({
+    keys: dataTableKeys,
+    fetcher: dataTableFetcher,
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
+const queryClient = useQueryClient();
+
 
 const storeState = reactive({
     currentDataTable: computed(() => dataTableList.value.find((dataTable) => dataTable.data_table_id === props.dataTableId)),
@@ -79,7 +87,7 @@ const handleSelectDataTable = async (dataTableId: string) => {
     const _widgetOptions = cloneDeep(widget.value?.options);
     const sanitizedOptions = sanitizeWidgetOptions(_widgetOptions, widget.value?.widget_type, storeState.currentDataTable);
     await updateWidget({
-        widget_id: widgetGenerateState.widgetId,
+        widget_id: widgetGenerateState.widgetId as string,
         state: 'INACTIVE',
         options: sanitizedOptions,
     });
@@ -121,11 +129,11 @@ const handleClickNameConfirm = async () => {
 
 /* Api */
 const { mutateAsync: updateWidget } = useMutation({
-    mutationFn: fetcher.updateWidgetFn,
+    mutationFn: widgetFetcher.updateWidgetFn,
     onSuccess: (data) => {
         const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private')
-            ? keys.privateWidgetQueryKey
-            : keys.publicWidgetQueryKey;
+            ? widgetKeys.privateWidgetGetQueryKey
+            : widgetKeys.publicWidgetGetQueryKey;
         queryClient.setQueryData(widgetQueryKey.value, () => data);
     },
     onError: (e) => {
@@ -134,7 +142,7 @@ const { mutateAsync: updateWidget } = useMutation({
     },
 });
 const { mutate: updateDataTable } = useMutation({
-    mutationFn: fetcher.updateDataTableFn,
+    mutationFn: dataTableFetcher.updateDataTableFn,
     onSuccess: async (data) => {
         await syncDataTableList(data);
         showSuccessMessage(i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.DATA_TABLE_NAME_SUCCESS'), '');
@@ -147,7 +155,7 @@ const { mutate: updateDataTable } = useMutation({
 });
 const syncDataTableList = async (data: DataTableModel) => {
     const _isPrivate = widgetGenerateState.widgetId?.startsWith('private');
-    const dataTableListQueryKey = _isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
+    const dataTableListQueryKey = _isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey;
     await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
         if (oldData.results) {
             return {
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue
index 103f17b60a..1251b6c7da 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAddLabels.vue
@@ -11,24 +11,17 @@ import {
     PIconButton, PFieldGroup, PTextInput, PButton, PFieldTitle,
 } from '@cloudforet/mirinae';
 
-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 { i18n } from '@/translations';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { isFieldNameValid } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
-import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { TransformDataTableProps, TransformDataTableInfo } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { AddLabelsOptions } from '@/common/modules/widgets/types/widget-model';
 
-
-
-
-type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 interface AdditionalLabel {
     name: string;
     value: string;
@@ -41,18 +34,9 @@ const emit = defineEmits<{(e: 'update:operator-options', value: AddLabelsOptions
     (e: 'update:invalid', value: boolean): void;
 }>();
 
-const widgetGenerateStore = useWidgetGenerateStore();
-const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
-const {
-    dataTableList,
-} = useWidgetFormQuery({
-    widgetId: computed(() => widgetGenerateState.widgetId),
-});
+const currentDataTable = useWidgetDataTableQuery(computed(() => props.originData?.data_table_id));
 
-const storeState = reactive({
-    currentDataTable: computed<Partial<DataTableModel>|undefined>(() => dataTableList.value.find((d) => d.data_table_id === dataTableInfo.value.dataTableId)),
-});
 
 const dataTableInfo = ref<TransformDataTableInfo>({
     dataTableId: props.originData?.data_table_id,
@@ -68,7 +52,7 @@ const state = reactive({
         const fieldNames = state.refinedLabels.map((label) => label.name);
         if (fieldNames.includes(DATE_FIELD)) return true;
         if (fieldNames.length !== new Set(fieldNames).size) return true;
-        if (state.refinedLabels.some((d) => !isFieldNameValid(d.name, storeState.currentDataTable))) return true;
+        if (state.refinedLabels.some((d) => !isFieldNameValid(d.name, currentDataTable.data.value))) return true;
         return false;
     }),
 });
@@ -85,7 +69,7 @@ const getInvalidText = (idx: number): TranslateResult|undefined => {
     if (state.refinedLabels.some((label, lIdx) => lIdx !== idx && label.name === targetName)) {
         return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.ADD_LABELS.DUPLICATED_LABEL');
     }
-    if (!isFieldNameValid(targetName, storeState.currentDataTable)) {
+    if (!isFieldNameValid(targetName, currentDataTable.data.value)) {
         return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.DUPLICATED_FIELD_NAME');
     }
     return undefined;
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue
index b2bac9bb7a..5a3e440fae 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformAggregate.vue
@@ -18,7 +18,7 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import {
     DATA_TABLE_OPERATOR,
 } from '@/common/modules/widgets/_constants/data-table-constant';
@@ -40,7 +40,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
index 09826559f2..7b37cb4929 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
@@ -2,8 +2,9 @@
 import {
     computed, defineExpose, onMounted, reactive, watch,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import {
     cloneDeep, intersection, isEmpty, isEqual,
 } from 'lodash';
@@ -14,6 +15,7 @@ import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data
 import type { DataTableDeleteParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/delete';
 import type { DataTableTransformParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/transform';
 import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -43,9 +45,10 @@ import WidgetFormDataTableCardTransformValueMapping
 import {
     useDataTableCascadeUpdate,
 } from '@/common/modules/widgets/_composables/use-data-table-cascade-update';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
+import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query';
 import {
-    DATA_TABLE_TYPE, type DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
+    DATA_TABLE_TYPE, DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
 } from '@/common/modules/widgets/_constants/data-table-constant';
 import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-options-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
@@ -59,8 +62,7 @@ import type {
     JoinOptions, ValueMappingOptions, ConcatOptions, AggregateOptions, AggregateFunction,
 } from '@/common/modules/widgets/types/widget-model';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 
 
@@ -75,27 +77,35 @@ interface Props {
 type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 
 const props = defineProps<Props>();
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
 /* Querys */
 const {
     dashboard,
-} = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+} = useDashboardGetQuery({
+    dashboardId,
 });
 const {
     widget,
-    dataTableList,
+    keys: widgetKeys,
+    fetcher: widgetFetcher,
+} = useWidgetQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+const {
     api,
-    keys,
-    fetcher,
-    queryClient,
-} = useWidgetFormQuery({
+    keys: dataTableKeys,
+    fetcher: dataTableFetcher,
+    dataTableList,
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
+const queryClient = useQueryClient();
+
+
 const {
     cascadeUpdateDataTable,
 } = useDataTableCascadeUpdate({
@@ -191,9 +201,20 @@ const getAggregateFunctionMap = () => {
     }, {} as AggregateFunction);
 };
 
+
+/* Query Keys */
+const { withSuffix: privateDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'private-data-table', 'get');
+const { withSuffix: publicDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'public-data-table', 'get');
+const { withSuffix: privateDataTableLoadQueryKey } = useServiceQueryKey('dashboard', 'private-data-table', 'load');
+const { withSuffix: publicDataTableLoadQueryKey } = useServiceQueryKey('dashboard', 'public-data-table', 'load');
+const { withSuffix: privateWidgetLoadQueryKey } = useServiceQueryKey('dashboard', 'private-widget', 'load');
+const { withSuffix: publicWidgetLoadQueryKey } = useServiceQueryKey('dashboard', 'public-widget', 'load');
+const { withSuffix: privateWidgetLoadSumQueryKey } = useServiceQueryKey('dashboard', 'private-widget', 'load-sum');
+const { withSuffix: publicWidgetLoadSumQueryKey } = useServiceQueryKey('dashboard', 'public-widget', 'load-sum');
+
 /* APIs */
 const syncDataTableList = async (data: DataTableModel, unsavedId?: string) => {
-    const dataTableListQueryKey = state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
+    const dataTableListQueryKey = state.isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey;
     await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
         if (oldData.results) {
             return {
@@ -210,31 +231,26 @@ const syncDataTableList = async (data: DataTableModel, unsavedId?: string) => {
     });
 };
 const invalidateLoadQueries = async (data: DataTableModel) => {
-    await queryClient.invalidateQueries({
-        queryKey: [
-            ...(state.isPrivate ? keys.privateDataTableLoadQueryKey.value : keys.publicDataTableLoadQueryKey.value),
-            data.data_table_id,
-        ],
-    });
-    await queryClient.invalidateQueries({
-        queryKey: [
-            ...(state.isPrivate ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-            dashboardDetailState.dashboardId,
-            widgetGenerateState.widgetId,
-        ],
-    });
-    await queryClient.invalidateQueries({
-        queryKey: [
-            ...(state.isPrivate ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value),
-            dashboardDetailState.dashboardId,
-            widgetGenerateState.widgetId,
-        ],
-    });
+    if (!widgetGenerateState.widgetId) return;
+    if (data.data_table_id.startsWith('private')) {
+        await Promise.all([
+            queryClient.invalidateQueries({ queryKey: privateDataTableLoadQueryKey(state.dataTableId) }),
+            queryClient.invalidateQueries({ queryKey: privateWidgetLoadQueryKey(widgetGenerateState.widgetId) }),
+            queryClient.invalidateQueries({ queryKey: privateWidgetLoadSumQueryKey(widgetGenerateState.widgetId) }),
+        ]);
+    } else {
+        await Promise.all([
+            queryClient.invalidateQueries({ queryKey: publicDataTableLoadQueryKey(state.dataTableId) }),
+            queryClient.invalidateQueries({ queryKey: publicWidgetLoadQueryKey(widgetGenerateState.widgetId) }),
+            queryClient.invalidateQueries({ queryKey: publicWidgetLoadSumQueryKey(widgetGenerateState.widgetId) }),
+        ]);
+    }
 };
 const { mutateAsync: updateDataTableMutation } = useMutation({
-    mutationFn: fetcher.updateDataTableFn,
+    mutationFn: dataTableFetcher.updateDataTableFn,
     onSuccess: async (data) => {
         await syncDataTableList(data);
+        await queryClient.invalidateQueries({ queryKey: state.isPrivate ? privateDataTableGetQueryKey(data.data_table_id) : publicDataTableGetQueryKey(data.data_table_id) });
         await invalidateLoadQueries(data);
 
         setFailStatus(false);
@@ -246,11 +262,11 @@ const { mutateAsync: updateDataTableMutation } = useMutation({
     },
 });
 const { mutateAsync: updateWidget } = useMutation({
-    mutationFn: fetcher.updateWidgetFn,
+    mutationFn: widgetFetcher.updateWidgetFn,
     onSuccess: (data) => {
         const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private')
-            ? keys.privateWidgetGetQueryKey
-            : keys.publicWidgetGetQueryKey;
+            ? widgetKeys.privateWidgetGetQueryKey
+            : widgetKeys.publicWidgetGetQueryKey;
         queryClient.setQueryData(widgetQueryKey.value, () => data);
     },
     onError: (e) => {
@@ -421,6 +437,9 @@ const handleCancelModal = () => {
     modalState.visible = false;
 };
 const handleUpdateDataTable = async () => {
+    if (!widgetGenerateState.widgetId) {
+        throw new Error('Widget ID is required');
+    }
     state.loading = true;
     const result = await updateDataTable();
     if (result) {
@@ -448,7 +467,7 @@ const clearDataTableInvalidStatus = async (dataTableId: string) => {
     delete _allDataTableInvalidMap[dataTableId];
     widgetGenerateStore.setAllDataTableInvalidMap(_allDataTableInvalidMap);
 
-    const dataTableListQueryKey = state.isPrivate ? keys.privateDataTableListQueryKey : keys.publicDataTableListQueryKey;
+    const dataTableListQueryKey = state.isPrivate ? dataTableKeys.privateDataTableListQueryKey : dataTableKeys.publicDataTableListQueryKey;
     await queryClient.setQueryData(dataTableListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
         if (oldData.results) {
             return {
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue
index 4cff59106e..65569beee9 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformDataTableDropdown.vue
@@ -9,7 +9,7 @@ import { PI, PContextMenu, PFieldTitle } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { TransformDataTableInfo } from '@/common/modules/widgets/types/widget-data-table-type';
@@ -34,7 +34,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
index e942f3bbec..220c471d2e 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformEvaluate.vue
@@ -22,7 +22,7 @@ import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
 import WidgetFormDataTableGlobalVariableViewButton
     from '@/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { DATA_TABLE_FIELD_TYPE, DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { TransformDataTableInfo, TransformDataTableProps } from '@/common/modules/widgets/types/widget-data-table-type';
@@ -52,7 +52,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue
index 335ff707f2..65c94e75f3 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformJoin.vue
@@ -13,7 +13,7 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import {
     DATA_TABLE_OPERATOR, JOIN_TYPE,
 } from '@/common/modules/widgets/_constants/data-table-constant';
@@ -47,7 +47,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
index 7d4f8ee90e..cd5e50b501 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformPivotForm.vue
@@ -18,7 +18,7 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import {
     DATA_TABLE_OPERATOR, DEFAULT_TRANSFORM_DATA_TABLE_VALUE_MAP,
 } from '@/common/modules/widgets/_constants/data-table-constant';
@@ -39,7 +39,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 const {
     dataTableList,
     api,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
index 9ddd1aca9b..3aa564b6dc 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
@@ -19,7 +19,7 @@ import { i18n } from '@/translations';
 import { useProxyValue } from '@/common/composables/proxy-state';
 import WidgetFormDataTableCardTransformFormWrapper
     from '@/common/modules/widgets/_components/WidgetFormDataTableCardTransformFormWrapper.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import {
     DATA_TABLE_FIELD_TYPE,
     DATA_TABLE_OPERATOR,
@@ -46,7 +46,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue
index 92686f51fe..7092613f88 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue
@@ -1,21 +1,20 @@
 <script setup lang="ts">
 
 import { computed, reactive } from 'vue';
-
+import { useRoute } from 'vue-router/composables';
 
 import { PButton, PPopover, PCopyButton } from '@cloudforet/mirinae';
 
 import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 
 const state = reactive({
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
index 8ce39dc6ff..326fd1a81c 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
@@ -3,8 +3,9 @@ import {
     computed, onMounted, reactive, watch,
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
+import { useRoute } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
 
 import {
@@ -21,32 +22,37 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFormOverlayStep1 from '@/common/modules/widgets/_components/WidgetFormOverlayStep1.vue';
 import WidgetFormOverlayStep2 from '@/common/modules/widgets/_components/WidgetFormOverlayStep2.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
+import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query';
 import { UNSUPPORTED_CHARTS_IN_PIVOT } from '@/common/modules/widgets/_constants/widget-constant';
 import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-options-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
+
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateGetters = widgetGenerateStore.getters;
 const widgetGenerateState = widgetGenerateStore.state;
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 
 /* Query */
 const {
     widget,
-    dataTableList,
     api,
     keys,
     fetcher,
-    queryClient,
-} = useWidgetFormQuery({
+} = useWidgetQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+const {
+    dataTableList,
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
+const queryClient = useQueryClient();
 
 const state = reactive({
     selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value?.find((item) => item.data_table_id === widgetGenerateState.selectedDataTableId)),
@@ -95,7 +101,7 @@ const state = reactive({
 /* Api */
 const deleteWidget = async (widgetId: string) => {
     if (!widgetId) return;
-    const isPrivate = dashboardDetailState.dashboardId?.startsWith('private');
+    const isPrivate = dashboardId.value?.startsWith('private');
     const _fetcher = isPrivate
         ? api.privateWidgetAPI.delete
         : api.publicWidgetAPI.delete;
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
index c32d241f95..fcda190860 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
@@ -3,6 +3,7 @@
 import {
     computed, onUnmounted, reactive, watch,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 import { useQuery } from '@tanstack/vue-query';
 import bytes from 'bytes';
@@ -16,20 +17,20 @@ import { byteFormatter, numberFormatter } from '@cloudforet/utils';
 
 import type { Page } from '@/api-clients/_common/schema/type';
 import type { DataTableLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import { usePrivateDataTableApi } from '@/api-clients/dashboard/private-data-table/composables/use-private-data-table-api';
 import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+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 type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
 
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { REFERENCE_FIELD_MAP, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { DataInfo } from '@/common/modules/widgets/types/widget-model';
@@ -39,8 +40,7 @@ import { gray, white } from '@/styles/colors';
 import { SIZE_UNITS } from '@/services/asset-inventory/constants/asset-analysis-constant';
 import { GRANULARITY } from '@/services/cost-explorer/constants/cost-explorer-constant';
 import type { Granularity } from '@/services/cost-explorer/types/cost-explorer-query-type';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 
 
@@ -57,19 +57,23 @@ type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 const allReferenceStore = useAllReferenceStore();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
+const {
+    privateDataTableAPI,
+} = usePrivateDataTableApi();
+const {
+    publicDataTableAPI,
+} = usePublicDataTableApi();
 
 /* Query */
 const {
     dataTableList,
-    api,
-    keys,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 
 const storeState = reactive({
@@ -260,37 +264,39 @@ const getSortIcon = (field: PreviewTableField) => {
 //     return `( ${value} ${key} )`;
 // };
 
-const fetchWidgetData = async (params: DataTableLoadParameters): Promise<DataTableLoadResponse> => {
-    const defaultFetcher = state.isPrivate
-        ? api.privateDataTableAPI.load
-        : api.publicDataTableAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const queryKey = computed(() => [
-    ...(state.isPrivate ? keys.privateDataTableLoadQueryKey.value : keys.publicDataTableLoadQueryKey.value),
-    storeState.selectedDataTableId,
-    {
+const { key: privateDataTableLoadQueryKey, params: privateDataTableLoadParams } = useServiceQueryKey('dashboard', 'private-data-table', 'load', {
+    contextKey: computed(() => storeState.selectedDataTableId),
+    params: computed<DataTableLoadParameters>(() => ({
+        data_table_id: storeState.selectedDataTableId as string,
         granularity: state.selectedGranularity,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.selectedDataTable?.options),
-        // dataTables: normalizeAndSerializeDataTableOptions((dataTableList.value || []).map((d) => d?.options || {})),
-        sortBy: state.sortBy,
-        thisPage: state.thisPage,
-        pageSize: state.pageSize,
-        vars: normalizeAndSerializeVars(dashboard.value?.vars ?? {}),
-    },
-]);
+        sort: state.sortBy,
+        page: state.page,
+        vars: dashboard.value?.vars,
+    })),
+});
 
-const queryResult = useQuery({
-    queryKey,
-    queryFn: () => fetchWidgetData({
-        data_table_id: storeState.selectedDataTableId,
+const { key: publicDataTableLoadQueryKey, params: publicDataTableLoadParams } = useServiceQueryKey('dashboard', 'public-data-table', 'load', {
+    contextKey: computed(() => storeState.selectedDataTableId),
+    params: computed<DataTableLoadParameters>(() => ({
+        data_table_id: storeState.selectedDataTableId as string,
         granularity: state.selectedGranularity,
         sort: state.sortBy,
         page: state.page,
         vars: dashboard.value?.vars,
-    }),
+    })),
+});
+
+const queryResult = useQuery({
+    queryKey: state.isPrivate ? privateDataTableLoadQueryKey.value : publicDataTableLoadQueryKey.value,
+    queryFn: () => {
+        if (!storeState.selectedDataTableId) {
+            throw new Error('Selected data table id is undefined');
+        }
+        if (state.isPrivate) {
+            return privateDataTableAPI.load(privateDataTableLoadParams.value);
+        }
+        return publicDataTableAPI.load(publicDataTableLoadParams.value);
+    },
     enabled: computed(() => storeState.selectedDataTableId !== undefined && state.selectedDataTable !== undefined),
     staleTime: WIDGET_LOAD_STALE_TIME,
     retry: 2,
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue
index b5a5b2a111..54023d0a27 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep1.vue
@@ -19,7 +19,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFormDataSourcePopover from '@/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue';
 import WidgetFormDataTableCard from '@/common/modules/widgets/_components/WidgetFormDataTableCard.vue';
 import WidgetFormOverlayPreviewTable from '@/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import {
     createDataTableReferenceMap,
     getDataTableReferenceMapExecutionOrder,
@@ -40,7 +40,7 @@ const scrollContainerRef = ref<HTMLElement|null>(null);
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
index 31d14e6fbc..66977f6351 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
@@ -2,8 +2,9 @@
 import {
     computed, onBeforeMount, onUnmounted, reactive, ref, watch,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep, isEqual } from 'lodash';
 
 import {
@@ -22,8 +23,9 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFormOverlayStep2WidgetForm
     from '@/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { useWidgetOptionsComplexValidation } from '@/common/modules/widgets/_composables/use-widget-options-complex-validation';
+import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query';
 import { WIDGET_WIDTH_RANGE_LIST } from '@/common/modules/widgets/_constants/widget-display-constant';
 import { getWidgetComponent } from '@/common/modules/widgets/_helpers/widget-component-helper';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
@@ -35,7 +37,8 @@ import type { WidgetType } from '@/common/modules/widgets/types/widget-model';
 
 import DashboardToolsetDateDropdown from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue';
 import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import {
     useAllReferenceTypeInfoStore,
@@ -54,6 +57,8 @@ const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
 const appContextStore = useAppContextStore();
 
 const emit = defineEmits<{(event: 'watch-options-changed', value: boolean): void;}>();
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
@@ -62,20 +67,29 @@ const storeState = reactive({
 /* Query */
 const {
     dashboard,
+    keys: dashboardKeys,
+    fetcher: dashboardFetcher,
+} = useDashboardGetQuery({
+    dashboardId,
+});
+const {
     widgetList,
-    keys,
-    fetcher,
-    queryClient,
-} = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+} = useDashboardWidgetListQuery({
+    dashboardId,
 });
 const {
     widget,
-    dataTableList,
     keys: widgetKeys,
     fetcher: wigetFetcher,
     widgetLoading,
-} = useWidgetFormQuery({
+} = useWidgetQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+const queryClient = useQueryClient();
+
+const {
+    dataTableList,
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
@@ -192,7 +206,7 @@ const updateWidget = async () => {
             });
         }
         updateDashboard({
-            dashboard_id: dashboardDetailState.dashboardId,
+            dashboard_id: dashboardId.value,
             layouts: _layouts,
         });
     }
@@ -200,10 +214,9 @@ const updateWidget = async () => {
 
 const { mutate: updateDashboard } = useMutation(
     {
-        mutationFn: fetcher.updateDashboardFn,
+        mutationFn: dashboardFetcher.updateDashboardFn,
         onSuccess: (data) => {
-            const dashboardQueryKey = state.isPrivate ? keys.privateDashboardGetQueryKey : keys.publicDashboardGetQueryKey;
-            // queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+            const dashboardQueryKey = state.isPrivate ? dashboardKeys.privateDashboardGetQueryKey : dashboardKeys.publicDashboardGetQueryKey;
             queryClient.setQueryData(dashboardQueryKey.value, () => data);
         },
     },
@@ -240,22 +253,6 @@ const reset = () => {
     dashboardDetailStore.setVars(state.varsSnapshot);
     dashboardDetailStore.setOptions(state.dashboardOptionsSnapshot);
 };
-// const loadOverlayWidget = async () => {
-//     await queryClient.invalidateQueries({
-//         queryKey: [
-//             ...(state.isPrivate ? widgetKeys.privateWidgetLoadQueryKey.value : widgetKeys.publicWidgetLoadQueryKey.value),
-//             dashboardDetailState.dashboardId,
-//             widgetGenerateState.widgetId,
-//         ],
-//     });
-//     await queryClient.invalidateQueries({
-//         queryKey: [
-//             ...(state.isPrivate ? widgetKeys.privateWidgetLoadSumQueryKey.value : widgetKeys.publicWidgetLoadSumQueryKey.value),
-//             dashboardDetailState.dashboardId,
-//             widgetGenerateState.widgetId,
-//         ],
-//     });
-// };
 
 /* Event */
 const handleChangeWidgetSize = (widgetSize: string) => {
@@ -364,7 +361,7 @@ onUnmounted(() => {
                            :data-tables="dataTableList"
                            :dashboard-options="dashboardDetailState.options"
                            :dashboard-vars="dashboardDetailGetters.refinedVars"
-                           :dashboard-id="dashboardDetailState.dashboardId"
+                           :dashboard-id="dashboardId"
                            :all-reference-type-info="state.allReferenceTypeInfo"
                            disable-refresh-on-loading
                            mode="overlay"
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue
index 1c80078112..f0d9fa381d 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2WidgetForm.vue
@@ -4,7 +4,7 @@ import {
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep, sortBy } from 'lodash';
 
 import {
@@ -19,7 +19,8 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 
 import NewMark from '@/common/components/marks/NewMark.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
+import { useWidgetQuery } from '@/common/modules/widgets/_composables/use-widget-query';
 import { DATA_TABLE_OPERATOR, DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
 import { WIDGET_COMPONENT_ICON_MAP } from '@/common/modules/widgets/_constants/widget-components-constant';
 import { CONSOLE_WIDGET_CONFIG } from '@/common/modules/widgets/_constants/widget-config-list-constant';
@@ -61,13 +62,17 @@ const widgetGenerateState = widgetGenerateStore.state;
 
 /* Query */
 const {
-    dataTableList,
     fetcher,
     keys,
-    queryClient,
-} = useWidgetFormQuery({
+} = useWidgetQuery({
+    widgetId: computed(() => widgetGenerateState.widgetId),
+});
+const {
+    dataTableList,
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
+const queryClient = useQueryClient();
 
 const state = reactive({
     selectedDataTable: computed<DataTableModel|undefined>(() => dataTableList.value.find((d) => d.data_table_id === widgetGenerateState.selectedDataTableId)),
@@ -115,7 +120,7 @@ const { mutateAsync: updateWidget } = useMutation({
     onSuccess: (data) => {
         const widgetQueryKey = widgetGenerateState.widgetId?.startsWith('private')
             ? keys.privateWidgetGetQueryKey
-            : keys.publicWidgetGteQueryKey;
+            : keys.publicWidgetGetQueryKey;
         queryClient.setQueryData(widgetQueryKey.value, () => data);
     },
     onError: (e) => {
diff --git a/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts b/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts
index bfeac9b62f..3f307da111 100644
--- a/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts
+++ b/apps/web/src/common/modules/widgets/_composables/use-data-table-cascade-update.ts
@@ -3,15 +3,20 @@ import {
     computed, reactive,
 } from 'vue';
 
+import { useQueryClient } from '@tanstack/vue-query';
+
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { createDataTableReferenceMap } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { DataTableModel, DataTableReference } from '@/common/modules/widgets/types/widget-data-table-type';
 
 
+
+
 interface UseDataTableCascadeUpdateOptions {
     widgetId: ComputedRef<string|undefined>;
 }
@@ -26,25 +31,27 @@ export const useDataTableCascadeUpdate = ({ widgetId }: UseDataTableCascadeUpdat
 
     /* Query */
     const {
-        dataTableList,
-        fetcher,
         keys,
-        queryClient,
-    } = useWidgetFormQuery({
+        fetcher,
+        dataTableList,
+    } = useWidgetDataTableListQuery({
         widgetId: computed(() => widgetId.value),
     });
+    const queryClient = useQueryClient();
 
     const _state = reactive({
         isPrivate: computed(() => !!widgetId.value?.startsWith('private')),
         dataTableReferenceMap: computed<Record<string, DataTableReference>>(() => createDataTableReferenceMap(dataTableList.value)),
     });
 
+    const { withSuffix: privateDataTableLoadWithSuffix } = useServiceQueryKey('dashboard', 'private-data-table', 'load');
+    const { withSuffix: publicDataTableLoadWithSuffix } = useServiceQueryKey('dashboard', 'public-data-table', 'load');
+    const { withSuffix: privateDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'private-data-table', 'get');
+    const { withSuffix: publicDataTableGetQueryKey } = useServiceQueryKey('dashboard', 'public-data-table', 'get');
+
     const _invalidateLoadQueries = async (data: DataTableModel) => {
         await queryClient.invalidateQueries({
-            queryKey: [
-                ...(_state.isPrivate ? keys.privateDataTableLoadQueryKey.value : keys.publicDataTableLoadQueryKey.value),
-                data.data_table_id,
-            ],
+            queryKey: _state.isPrivate ? privateDataTableLoadWithSuffix(data.data_table_id) : publicDataTableLoadWithSuffix(data.data_table_id),
         });
     };
 
@@ -82,6 +89,7 @@ export const useDataTableCascadeUpdate = ({ widgetId }: UseDataTableCascadeUpdat
                     }
                     return oldData;
                 });
+                await queryClient.invalidateQueries({ queryKey: _state.isPrivate ? privateDataTableGetQueryKey(result.data_table_id) : publicDataTableGetQueryKey(result.data_table_id) });
 
                 await _invalidateLoadQueries(result);
                 await cascadeUpdateDataTable(childId);
diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-list-query.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-list-query.ts
new file mode 100644
index 0000000000..00e1c3ca4a
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-list-query.ts
@@ -0,0 +1,107 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
+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 { DataTableListParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/list';
+import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
+
+const DEFAULT_LIST_DATA = { results: [] };
+// const DEFAULT_LOAD_DATA = { results: {}, labels_info: {}, data_info: {} };
+const STALE_TIME = 1000 * 60 * 5;
+
+interface UseWidgetDataTableListQueryOptions {
+    widgetId: ComputedRef<string|undefined>;
+}
+
+interface UseWidgetDataTableListQueryReturn {
+    dataTableList: ComputedRef<DataTableModel[]>;
+    isLoading: ComputedRef<boolean>;
+    keys: {
+        publicDataTableListQueryKey: ComputedRef<QueryKey>;
+        privateDataTableListQueryKey: ComputedRef<QueryKey>;
+    };
+    api: {
+        publicDataTableAPI: ReturnType<typeof usePublicDataTableApi>['publicDataTableAPI'];
+        privateDataTableAPI: ReturnType<typeof usePrivateDataTableApi>['privateDataTableAPI'];
+    };
+    fetcher: {
+        updateDataTableFn: (params: DataTableUpdateParameters) => Promise<DataTableModel>;
+    };
+}
+
+export const useWidgetDataTableListQuery = ({
+    widgetId,
+}: UseWidgetDataTableListQueryOptions): UseWidgetDataTableListQueryReturn => {
+    const {
+        publicDataTableAPI,
+    } = usePublicDataTableApi();
+    const {
+        privateDataTableAPI,
+    } = usePrivateDataTableApi();
+
+    const isPrivate = computed(() => !!widgetId?.value?.startsWith('private'));
+
+    /* Query Keys */
+    const { key: publicDataTableListQueryKey, params: publicDataTableListParams } = useServiceQueryKey('dashboard', 'public-data-table', 'list', {
+        params: computed<DataTableListParameters>(() => ({
+            widget_id: widgetId.value as string,
+        })),
+    });
+    const { key: privateDataTableListQueryKey, params: privateDataTableListParams } = useServiceQueryKey('dashboard', 'private-data-table', 'list', {
+        params: computed<DataTableListParameters>(() => ({
+            widget_id: widgetId.value as string,
+        })),
+    });
+
+    /* Querys */
+    const publicDataTableListQuery = useScopedQuery({
+        queryKey: publicDataTableListQueryKey,
+        queryFn: () => publicDataTableAPI.list(publicDataTableListParams.value),
+        select: (data) => data?.results || [],
+        enabled: computed(() => !!widgetId?.value && !isPrivate.value),
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+    }, ['DOMAIN', 'WORKSPACE']);
+    const privateDataTableListQuery = useScopedQuery({
+        queryKey: privateDataTableListQueryKey,
+        queryFn: () => privateDataTableAPI.list(privateDataTableListParams.value),
+        select: (data) => data?.results || [],
+        enabled: computed(() => !!widgetId?.value && isPrivate.value),
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+    }, ['WORKSPACE']);
+
+    /* Fetchers */
+    const updateDataTableFn = (params: DataTableUpdateParameters): Promise<DataTableModel> => {
+        if (isPrivate.value) {
+            return privateDataTableAPI.update(params);
+        }
+        return publicDataTableAPI.update(params);
+    };
+
+
+    return {
+        dataTableList: computed(() => (isPrivate.value ? privateDataTableListQuery.data.value : publicDataTableListQuery.data.value) ?? []),
+        isLoading: computed(() => (isPrivate.value ? privateDataTableListQuery.isFetching.value : publicDataTableListQuery.isFetching.value)),
+        api: {
+            publicDataTableAPI,
+            privateDataTableAPI,
+        },
+        keys: {
+            publicDataTableListQueryKey,
+            privateDataTableListQueryKey,
+        },
+        fetcher: {
+            updateDataTableFn,
+        },
+    };
+};
diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-query.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-query.ts
new file mode 100644
index 0000000000..032d0fa9cb
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_composables/use-widget-data-table-query.ts
@@ -0,0 +1,63 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
+import { usePrivateDataTableApi } from '@/api-clients/dashboard/private-data-table/composables/use-private-data-table-api';
+import type { DataTableGetParameters } from '@/api-clients/dashboard/private-data-table/schema/api-verbs/get';
+import { usePublicDataTableApi } from '@/api-clients/dashboard/public-data-table/composables/use-public-data-table-api';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+
+const STALE_TIME = 1000 * 60 * 5; // 5 minutes
+const GC_TIME = 1000 * 60; // 1 minute
+
+export const useWidgetDataTableQuery = (dataTableId: ComputedRef<string|undefined>) => {
+    const { publicDataTableAPI } = usePublicDataTableApi();
+    const { privateDataTableAPI } = usePrivateDataTableApi();
+
+    const isPrivate = computed(() => {
+        if (!dataTableId.value) return false;
+        return dataTableId.value.startsWith('private');
+    });
+
+    const { key: publicKey, params: publicParams } = useServiceQueryKey('dashboard', 'public-data-table', 'get', {
+        contextKey: dataTableId,
+        params: {
+            data_table_id: dataTableId.value,
+        } as DataTableGetParameters,
+    });
+    const { key: privateKey, params: privateParams } = useServiceQueryKey('dashboard', 'private-data-table', 'get', {
+        contextKey: dataTableId,
+        params: {
+            data_table_id: dataTableId.value,
+        } as DataTableGetParameters,
+    });
+
+    const privateDataTableQuery = useScopedQuery({
+        queryKey: privateKey,
+        queryFn: () => {
+            if (!dataTableId.value) {
+                throw new Error('DataTable ID is required for fetching data');
+            }
+            return privateDataTableAPI.get(privateParams.value);
+        },
+        staleTime: STALE_TIME,
+        gcTime: GC_TIME,
+        enabled: computed(() => !!dataTableId.value && isPrivate.value),
+    }, ['WORKSPACE']);
+    const publicDataTableQuery = useScopedQuery({
+        queryKey: publicKey,
+        queryFn: () => {
+            if (!dataTableId.value) {
+                throw new Error('DataTable ID is required for fetching data');
+            }
+            return publicDataTableAPI.get(publicParams.value);
+        },
+        enabled: computed(() => !!dataTableId.value && !isPrivate.value),
+        staleTime: STALE_TIME,
+        gcTime: GC_TIME,
+    }, ['DOMAIN', 'WORKSPACE']);
+
+
+    return isPrivate.value ? privateDataTableQuery : publicDataTableQuery;
+};
diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts
deleted file mode 100644
index 4c5bac911e..0000000000
--- a/apps/web/src/common/modules/widgets/_composables/use-widget-form-query.ts
+++ /dev/null
@@ -1,195 +0,0 @@
-import type { ComputedRef } from 'vue';
-import { computed } from 'vue';
-
-import type { QueryClient, QueryKey } from '@tanstack/vue-query';
-import { useQueryClient } from '@tanstack/vue-query';
-
-import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
-import type { WidgetModel, WidgetUpdateParams } from '@/api-clients/dashboard/_types/widget-type';
-import { usePrivateDataTableApi } from '@/api-clients/dashboard/private-data-table/composables/use-private-data-table-api';
-import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
-import { usePublicDataTableApi } from '@/api-clients/dashboard/public-data-table/composables/use-public-data-table-api';
-import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update';
-import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
-
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
-
-const DEFAULT_LIST_DATA = { results: [] };
-// const DEFAULT_LOAD_DATA = { results: {}, labels_info: {}, data_info: {} };
-const STALE_TIME = 1000 * 60 * 5;
-
-interface UseWidgetFormQueryOptions {
-    widgetId?: ComputedRef<string|undefined>;
-    preventLoad?: boolean;
-}
-
-interface UseWidgetFormQueryReturn {
-    widget: ComputedRef<WidgetModel|undefined>;
-    dataTableList: ComputedRef<DataTableModel[]>;
-    dataTableListLoading: ComputedRef<boolean>;
-    widgetLoading: ComputedRef<boolean>;
-    keys: {
-        publicWidgetGetQueryKey: ComputedRef<QueryKey>;
-        privateWidgetGetQueryKey: ComputedRef<QueryKey>;
-        publicWidgetLoadQueryKey: ComputedRef<QueryKey>;
-        privateWidgetLoadQueryKey: ComputedRef<QueryKey>;
-        publicWidgetLoadSumQueryKey: ComputedRef<QueryKey>;
-        privateWidgetLoadSumQueryKey: ComputedRef<QueryKey>;
-        publicDataTableListQueryKey: ComputedRef<QueryKey>;
-        privateDataTableListQueryKey: ComputedRef<QueryKey>;
-        publicDataTableLoadQueryKey: ComputedRef<QueryKey>;
-        privateDataTableLoadQueryKey: ComputedRef<QueryKey>;
-    };
-    api: {
-        publicWidgetAPI: ReturnType<typeof usePublicWidgetApi>['publicWidgetAPI'];
-        privateWidgetAPI: ReturnType<typeof usePrivateWidgetApi>['privateWidgetAPI'];
-        publicDataTableAPI: ReturnType<typeof usePublicDataTableApi>['publicDataTableAPI'];
-        privateDataTableAPI: ReturnType<typeof usePrivateDataTableApi>['privateDataTableAPI'];
-    };
-    fetcher: {
-        updateDataTableFn: (params: DataTableUpdateParameters) => Promise<DataTableModel>;
-        updateWidgetFn: (params: WidgetUpdateParams) => Promise<WidgetModel>;
-    };
-    queryClient: QueryClient;
-}
-
-export const useWidgetFormQuery = ({
-    widgetId,
-    preventLoad = false,
-}: UseWidgetFormQueryOptions): UseWidgetFormQueryReturn => {
-    const {
-        publicWidgetAPI,
-        publicWidgetGetQueryKey,
-        publicWidgetLoadQueryKey,
-        publicWidgetLoadSumQueryKey,
-    } = usePublicWidgetApi();
-    const {
-        privateWidgetAPI,
-        privateWidgetGetQueryKey,
-        privateWidgetLoadQueryKey,
-        privateWidgetLoadSumQueryKey,
-    } = usePrivateWidgetApi();
-    const {
-        publicDataTableAPI,
-        publicDataTableListQueryKey,
-        publicDataTableLoadQueryKey,
-    } = usePublicDataTableApi();
-    const {
-        privateDataTableAPI,
-        privateDataTableListQueryKey,
-        privateDataTableLoadQueryKey,
-    } = usePrivateDataTableApi();
-    const queryClient = useQueryClient();
-
-    const isPrivate = computed(() => !!widgetId?.value?.startsWith('private'));
-
-    /* Query Keys */
-    const _publicWidgetGetQueryKey = computed(() => [
-        ...publicWidgetGetQueryKey.value,
-        widgetId?.value,
-    ]);
-    const _privateWidgetGetQueryKey = computed(() => [
-        ...privateWidgetGetQueryKey.value,
-        widgetId?.value,
-    ]);
-    const _publicDataTableListQueryKey = computed(() => [
-        ...publicDataTableListQueryKey.value,
-        widgetId?.value,
-    ]);
-    const _privateDataTableListQueryKey = computed(() => [
-        ...privateDataTableListQueryKey.value,
-        widgetId?.value,
-    ]);
-
-    /* Querys */
-    const publicWidgetQuery = useScopedQuery({
-        queryKey: _publicWidgetGetQueryKey,
-        queryFn: () => publicWidgetAPI.get({
-            widget_id: widgetId?.value as string,
-        }),
-        enabled: computed(() => !!widgetId?.value && !isPrivate.value && !preventLoad),
-        staleTime: STALE_TIME,
-    }, ['DOMAIN', 'WORKSPACE']);
-    const privateWidgetQuery = useScopedQuery({
-        queryKey: _privateWidgetGetQueryKey,
-        queryFn: () => privateWidgetAPI.get({
-            widget_id: widgetId?.value as string,
-        }),
-        enabled: computed(() => !!widgetId?.value && isPrivate.value && !preventLoad),
-        staleTime: STALE_TIME,
-    }, ['WORKSPACE']);
-    const publicDataTableListQuery = useScopedQuery({
-        queryKey: _publicDataTableListQueryKey,
-        queryFn: () => publicDataTableAPI.list({
-            widget_id: widgetId?.value as string,
-        }),
-        select: (data) => data?.results || [],
-        enabled: computed(() => !!widgetId?.value && !isPrivate.value && !preventLoad),
-        initialData: DEFAULT_LIST_DATA,
-        initialDataUpdatedAt: 0,
-        staleTime: STALE_TIME,
-    }, ['DOMAIN', 'WORKSPACE']);
-    const privateDataTableListQuery = useScopedQuery({
-        queryKey: _privateDataTableListQueryKey,
-        queryFn: () => privateDataTableAPI.list({
-            widget_id: widgetId?.value as string,
-        }),
-        select: (data) => data?.results || [],
-        enabled: computed(() => !!widgetId?.value && isPrivate.value && !preventLoad),
-        initialData: DEFAULT_LIST_DATA,
-        initialDataUpdatedAt: 0,
-        staleTime: STALE_TIME,
-    }, ['WORKSPACE']);
-
-    /* Fetchers */
-    const updateDataTableFn = (params: DataTableUpdateParameters): Promise<DataTableModel> => {
-        if (isPrivate.value) {
-            return privateDataTableAPI.update(params);
-        }
-        return publicDataTableAPI.update(params);
-    };
-    const updateWidgetFn = (params: WidgetUpdateParams): Promise<WidgetModel> => {
-        if (isPrivate.value) {
-            return privateWidgetAPI.update(params);
-        }
-        return publicWidgetAPI.update(params);
-    };
-
-    /* State */
-    const dataTableListLoading = computed<boolean>(() => (isPrivate.value
-        ? privateDataTableListQuery.isFetching.value
-        : publicDataTableListQuery.isFetching.value));
-    const widgetLoading = computed<boolean>(() => (isPrivate.value
-        ? privateWidgetQuery.isFetching.value
-        : publicWidgetQuery.isFetching.value));
-
-    return {
-        widget: computed(() => (isPrivate.value ? privateWidgetQuery.data.value : publicWidgetQuery.data.value)),
-        dataTableList: computed(() => (isPrivate.value ? privateDataTableListQuery.data.value : publicDataTableListQuery.data.value) ?? []),
-        dataTableListLoading,
-        widgetLoading,
-        api: {
-            publicWidgetAPI,
-            privateWidgetAPI,
-            publicDataTableAPI,
-            privateDataTableAPI,
-        },
-        keys: {
-            publicWidgetGetQueryKey: _publicWidgetGetQueryKey,
-            privateWidgetGetQueryKey: _privateWidgetGetQueryKey,
-            publicDataTableListQueryKey: _publicDataTableListQueryKey,
-            privateDataTableListQueryKey: _privateDataTableListQueryKey,
-            publicWidgetLoadQueryKey: computed(() => publicWidgetLoadQueryKey.value),
-            privateWidgetLoadQueryKey: computed(() => privateWidgetLoadQueryKey.value),
-            publicWidgetLoadSumQueryKey: computed(() => publicWidgetLoadSumQueryKey.value),
-            privateWidgetLoadSumQueryKey: computed(() => privateWidgetLoadSumQueryKey.value),
-            publicDataTableLoadQueryKey: computed(() => publicDataTableLoadQueryKey.value),
-            privateDataTableLoadQueryKey: computed(() => privateDataTableLoadQueryKey.value),
-        },
-        fetcher: {
-            updateDataTableFn,
-            updateWidgetFn,
-        },
-        queryClient,
-    };
-};
diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts
index 489004db5c..872bde8d3a 100644
--- a/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts
+++ b/apps/web/src/common/modules/widgets/_composables/use-widget-frame.ts
@@ -19,7 +19,7 @@ import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-worksp
 import { arrayToQueryString, objectToQueryString, primitiveToQueryString } from '@/lib/router-query-string';
 
 
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { DATA_SOURCE_DOMAIN, DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
 import type { DisplayAnnotationValue } from '@/common/modules/widgets/_widget-fields/display-annotation/type';
@@ -155,7 +155,7 @@ export const useWidgetFrame = (
     /* Query */
     const {
         dataTableList,
-    } = useWidgetFormQuery({
+    } = useWidgetDataTableListQuery({
         widgetId: computed(() => props.widgetId),
     });
     const appContextStore = useAppContextStore();
diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-load-query-context.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-load-query-context.ts
new file mode 100644
index 0000000000..6ec6838275
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_composables/use-widget-load-query-context.ts
@@ -0,0 +1,114 @@
+import { computed, type ComputedRef } from 'vue';
+
+import type { WidgetLoadParams, WidgetLoadResponse, WidgetLoadSumParams } from '@/api-clients/dashboard/_types/widget-type';
+import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
+import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
+import type { QueryKeyArray } from '@/query/query-key/_types/query-key-type';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+
+
+interface UseWidgetLoadQueryContextOptions {
+    widgetId: ComputedRef<string>;
+    params: ComputedRef<WidgetLoadParams>;
+    additionalDeps?: ComputedRef<object>;
+}
+
+interface UseWidgetLoadQueryContextResult {
+    fetcher: () => Promise<WidgetLoadResponse>;
+    key: ComputedRef<QueryKeyArray>;
+}
+
+
+export const useWidgetLoadQueryContext = ({
+    widgetId,
+    params,
+    additionalDeps,
+}: UseWidgetLoadQueryContextOptions): UseWidgetLoadQueryContextResult => {
+    const { publicWidgetAPI } = usePublicWidgetApi();
+    const { privateWidgetAPI } = usePrivateWidgetApi();
+
+    const isPrivate = computed(() => {
+        if (!widgetId.value) return false;
+        return widgetId.value.startsWith('private');
+    });
+
+    const { key: publicWidgetLoadQueryKey, params: publicWidgetLoadParams } = useServiceQueryKey('dashboard', 'public-widget', 'load', {
+        contextKey: [
+            widgetId.value,
+            ...(additionalDeps ? [additionalDeps.value] : []),
+        ],
+        params,
+    });
+
+    const { key: privateWidgetLoadQueryKey, params: privateWidgetLoadParams } = useServiceQueryKey('dashboard', 'private-widget', 'load', {
+        contextKey: widgetId,
+        params,
+    });
+
+    const fetcher = () => {
+        if (!params.value) {
+            throw new Error('Widget parameters are required');
+        }
+        return isPrivate.value
+            ? privateWidgetAPI.load(privateWidgetLoadParams.value)
+            : publicWidgetAPI.load(publicWidgetLoadParams.value);
+    };
+
+    return {
+        fetcher,
+        key: isPrivate.value ? privateWidgetLoadQueryKey : publicWidgetLoadQueryKey,
+    };
+};
+
+
+interface UseWidgetLoadSumQueryContextOptions {
+    widgetId: ComputedRef<string>;
+    params: ComputedRef<WidgetLoadSumParams>;
+    additionalDeps?: ComputedRef<object>;
+}
+interface UseWidgetLoadSumQueryContextResult {
+    fetcher: () => Promise<WidgetLoadResponse>;
+    key: ComputedRef<QueryKeyArray>;
+}
+
+export const useWidgetLoadSumQueryContext = ({
+    widgetId,
+    params,
+    additionalDeps,
+}: UseWidgetLoadSumQueryContextOptions): UseWidgetLoadSumQueryContextResult => {
+    const { publicWidgetAPI } = usePublicWidgetApi();
+    const { privateWidgetAPI } = usePrivateWidgetApi();
+
+    const isPrivate = computed(() => {
+        if (!widgetId.value) return false;
+        return widgetId.value.startsWith('private');
+    });
+
+    const { key: publicWidgetLoadSumQueryKey, params: publicWidgetLoadSumParams } = useServiceQueryKey('dashboard', 'public-widget', 'load-sum', {
+        contextKey: [
+            widgetId.value,
+            ...(additionalDeps ? [additionalDeps.value] : []),
+        ],
+        params,
+    });
+
+    const { key: privateWidgetLoadSumQueryKey, params: privateWidgetLoadSumParams } = useServiceQueryKey('dashboard', 'private-widget', 'load-sum', {
+        contextKey: widgetId,
+        params,
+    });
+
+    const fetcher = () => {
+        if (!params.value) {
+            throw new Error('Widget parameters are required');
+        }
+        return isPrivate.value
+            ? privateWidgetAPI.loadSum(privateWidgetLoadSumParams.value)
+            : publicWidgetAPI.loadSum(publicWidgetLoadSumParams.value);
+    };
+
+    return {
+        fetcher,
+        key: isPrivate.value ? privateWidgetLoadSumQueryKey : publicWidgetLoadSumQueryKey,
+    };
+};
diff --git a/apps/web/src/common/modules/widgets/_composables/use-widget-query.ts b/apps/web/src/common/modules/widgets/_composables/use-widget-query.ts
new file mode 100644
index 0000000000..6702f3d924
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_composables/use-widget-query.ts
@@ -0,0 +1,108 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
+import type { WidgetModel, WidgetUpdateParams } from '@/api-clients/dashboard/_types/widget-type';
+import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
+import type { PrivateWidgetGetParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/get';
+import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
+import type { PublicWidgetGetParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/get';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+
+const STALE_TIME = 1000 * 60 * 5;
+
+interface UseWidgetFormQueryOptions {
+    widgetId?: ComputedRef<string|undefined>;
+    preventLoad?: boolean;
+}
+
+interface UseWidgetFormQueryReturn {
+    widget: ComputedRef<WidgetModel|undefined>;
+    widgetLoading: ComputedRef<boolean>;
+    keys: {
+        publicWidgetGetQueryKey: ComputedRef<QueryKey>;
+        privateWidgetGetQueryKey: ComputedRef<QueryKey>;
+    };
+    api: {
+        publicWidgetAPI: ReturnType<typeof usePublicWidgetApi>['publicWidgetAPI'];
+        privateWidgetAPI: ReturnType<typeof usePrivateWidgetApi>['privateWidgetAPI'];
+    };
+    fetcher: {
+        updateWidgetFn: (params: WidgetUpdateParams) => Promise<WidgetModel>;
+    };
+}
+
+export const useWidgetQuery = ({
+    widgetId,
+    preventLoad = false,
+}: UseWidgetFormQueryOptions): UseWidgetFormQueryReturn => {
+    const {
+        publicWidgetAPI,
+    } = usePublicWidgetApi();
+    const {
+        privateWidgetAPI,
+    } = usePrivateWidgetApi();
+
+    const isPrivate = computed(() => !!widgetId?.value?.startsWith('private'));
+
+    /* Query Keys */
+    const { key: publicWidgetGetQueryKey, params: publicWidgetGetParams } = useServiceQueryKey('dashboard', 'public-widget', 'get', {
+        contextKey: widgetId,
+        params: computed<PublicWidgetGetParameters>(() => ({
+            widget_id: widgetId?.value as string,
+        })),
+    });
+    const { key: privateWidgetGetQueryKey, params: privateWidgetGetParams } = useServiceQueryKey('dashboard', 'private-widget', 'get', {
+        contextKey: widgetId,
+        params: computed<PrivateWidgetGetParameters>(() => ({
+            widget_id: widgetId?.value as string,
+        })),
+    });
+
+    /* Querys */
+    const publicWidgetQuery = useScopedQuery({
+        queryKey: publicWidgetGetQueryKey,
+        queryFn: () => publicWidgetAPI.get(publicWidgetGetParams.value),
+        enabled: computed(() => !!widgetId?.value && !isPrivate.value && !preventLoad),
+        staleTime: STALE_TIME,
+    }, ['DOMAIN', 'WORKSPACE']);
+    const privateWidgetQuery = useScopedQuery({
+        queryKey: privateWidgetGetQueryKey,
+        queryFn: () => privateWidgetAPI.get(privateWidgetGetParams.value),
+        enabled: computed(() => !!widgetId?.value && isPrivate.value && !preventLoad),
+        staleTime: STALE_TIME,
+    }, ['WORKSPACE']);
+
+
+    /* Fetchers */
+    const updateWidgetFn = (params: WidgetUpdateParams): Promise<WidgetModel> => {
+        if (isPrivate.value) {
+            return privateWidgetAPI.update(params);
+        }
+        return publicWidgetAPI.update(params);
+    };
+
+    /* State */
+    const widgetLoading = computed<boolean>(() => (isPrivate.value
+        ? privateWidgetQuery.isFetching.value
+        : publicWidgetQuery.isFetching.value));
+
+    return {
+        widget: computed(() => (isPrivate.value ? privateWidgetQuery.data.value : publicWidgetQuery.data.value)),
+        widgetLoading,
+        api: {
+            publicWidgetAPI,
+            privateWidgetAPI,
+        },
+        keys: {
+            publicWidgetGetQueryKey,
+            privateWidgetGetQueryKey,
+        },
+        fetcher: {
+            updateWidgetFn,
+        },
+    };
+};
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/category-by/WidgetFieldCategoryBy.vue b/apps/web/src/common/modules/widgets/_widget-fields/category-by/WidgetFieldCategoryBy.vue
index c7e70d314b..d5fb8f0e17 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/category-by/WidgetFieldCategoryBy.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/category-by/WidgetFieldCategoryBy.vue
@@ -7,7 +7,7 @@ import { PFieldGroup } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type {
@@ -27,7 +27,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/custom-table-column-width/WidgetFieldCustomTableColumnWidth.vue b/apps/web/src/common/modules/widgets/_widget-fields/custom-table-column-width/WidgetFieldCustomTableColumnWidth.vue
index 6fff3a6a09..134a1d8180 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/custom-table-column-width/WidgetFieldCustomTableColumnWidth.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/custom-table-column-width/WidgetFieldCustomTableColumnWidth.vue
@@ -16,7 +16,7 @@ import getRandomId from '@/lib/random-id-generator';
 
 import type {
 } from '@/common/modules/widgets/types/widget-field-value-type';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
@@ -43,7 +43,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/data-field-heatmap-color/WidgetFieldDataFieldHeatmapColor.vue b/apps/web/src/common/modules/widgets/_widget-fields/data-field-heatmap-color/WidgetFieldDataFieldHeatmapColor.vue
index aeefc4a5c0..e0566f96ae 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/data-field-heatmap-color/WidgetFieldDataFieldHeatmapColor.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/data-field-heatmap-color/WidgetFieldDataFieldHeatmapColor.vue
@@ -11,7 +11,7 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/
 
 import { i18n } from '@/translations';
 
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATA_FIELD_HEATMAP_COLOR } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
@@ -36,7 +36,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue b/apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue
index da1c28077c..9dc5d7193d 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/data-field/WidgetFieldDataField.vue
@@ -3,10 +3,11 @@ import {
     computed, reactive,
 } from 'vue';
 
+
 import { PSelectDropdown, PFieldGroup } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
@@ -30,7 +31,7 @@ const validator = widgetValidatorRegistry[FIELD_KEY];
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue b/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue
index 8bb93ebebd..b5c076365e 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/format-rules/WidgetFieldFormatRules.vue
@@ -11,7 +11,7 @@ import {
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import ColorInput from '@/common/components/inputs/ColorInput.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import {
     FORMAT_RULE_TYPE,
 } from '@/common/modules/widgets/_constants/widget-field-constant';
@@ -40,7 +40,7 @@ const validator = widgetValidatorRegistry[FIELD_KEY];
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue b/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue
index 6c35461472..93c7cf0a30 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/group-by/WidgetFieldGroupBy.vue
@@ -10,7 +10,7 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 
 import { i18n } from '@/translations';
 
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import {
@@ -38,7 +38,7 @@ const validator = widgetValidatorRegistry[FIELD_KEY];
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue b/apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue
index 64fa46d06f..ccaf3dc07b 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/number-format/WidgetFieldNumberFormat.vue
@@ -11,7 +11,7 @@ import { customNumberFormatter } from '@cloudforet/utils';
 
 import { i18n } from '@/translations';
 
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { NUMBER_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
@@ -42,7 +42,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/sankey-dimensions/WidgetFieldSankeyDimensions.vue b/apps/web/src/common/modules/widgets/_widget-fields/sankey-dimensions/WidgetFieldSankeyDimensions.vue
index 3efee950d2..699afcfe85 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/sankey-dimensions/WidgetFieldSankeyDimensions.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/sankey-dimensions/WidgetFieldSankeyDimensions.vue
@@ -14,7 +14,7 @@ import { i18n } from '@/translations';
 
 import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import {
@@ -41,7 +41,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/stack-by/WidgetFieldStackBy.vue b/apps/web/src/common/modules/widgets/_widget-fields/stack-by/WidgetFieldStackBy.vue
index 4e971dcdd3..60711fc3c0 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/stack-by/WidgetFieldStackBy.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/stack-by/WidgetFieldStackBy.vue
@@ -7,7 +7,7 @@ import { PFieldGroup } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { StackByOptions } from '@/common/modules/widgets/_widget-fields/stack-by/type';
@@ -26,7 +26,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue b/apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue
index 634e36632e..d06f48b25e 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/sub-total/WidgetFieldSubTotal.vue
@@ -5,7 +5,7 @@ import {
     PFieldTitle, PToggleButton, PI, PTooltip, PCheckbox,
 } from '@cloudforet/mirinae';
 
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { SubTotalOptions, SubTotalValue } from '@/common/modules/widgets/_widget-fields/sub-total/type';
@@ -25,7 +25,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue b/apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue
index 3ce07dfeb8..6ed29f4dd8 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/table-column-comparison/WidgetFieldTableColumnComparison.vue
@@ -14,7 +14,7 @@ import { i18n } from '@/translations';
 
 
 import ColorInput from '@/common/components/inputs/ColorInput.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import {
@@ -40,7 +40,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/x-axis/WidgetFieldXAxis.vue b/apps/web/src/common/modules/widgets/_widget-fields/x-axis/WidgetFieldXAxis.vue
index cd52890579..4eed195e12 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/x-axis/WidgetFieldXAxis.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/x-axis/WidgetFieldXAxis.vue
@@ -7,7 +7,7 @@ import { PFieldGroup } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { XAxisOptions } from '@/common/modules/widgets/_widget-fields/x-axis/type';
@@ -26,7 +26,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/y-axis/WidgetFieldYAxis.vue b/apps/web/src/common/modules/widgets/_widget-fields/y-axis/WidgetFieldYAxis.vue
index 51a70bf4a4..e4cf544b7e 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/y-axis/WidgetFieldYAxis.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/y-axis/WidgetFieldYAxis.vue
@@ -7,7 +7,7 @@ import { PFieldGroup } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
 import WidgetFieldDropdownAndMax from '@/common/modules/widgets/_components/WidgetFieldDropdownAndMax.vue';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
+import { useWidgetDataTableListQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-list-query';
 import { sortWidgetTableFields } from '@/common/modules/widgets/_helpers/widget-helper';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { YAxisOptions } from '@/common/modules/widgets/_widget-fields/y-axis/type';
@@ -26,7 +26,7 @@ const widgetGenerateState = widgetGenerateStore.state;
 /* Query */
 const {
     dataTableList,
-} = useWidgetFormQuery({
+} = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
 
diff --git a/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue b/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue
index 220c9e3afe..c85c658a34 100644
--- a/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/clustered-column-chart/ClusteredColumnChart.vue
@@ -17,20 +17,17 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields,
@@ -50,7 +47,6 @@ import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
 import type { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
@@ -64,10 +60,10 @@ import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
+const isPivotDataTable = computed<boolean>(() => dataTable.value?.operator === DATA_TABLE_OPERATOR.PIVOT);
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -77,8 +73,6 @@ const { dateRange } = useWidgetDateRange({
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
-    isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     unitMap: computed<Record<string, string>>(() => widgetFrameProps.value.unitMap || {}),
     data: computed<WidgetLoadResponse | null>(() => queryResult.data?.value ?? null),
@@ -128,8 +122,8 @@ const state = reactive({
                     const _seriesName = getReferenceLabel(props.allReferenceTypeInfo, state.dataField, p.seriesName);
                     let _value = numberFormatter(p.value) || '';
                     if (widgetOptionsState.tooltipNumberFormatInfo?.toggleValue) {
-                        const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
-                        const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
+                        const columnFieldForPivot = dataTable.value?.options.PIVOT?.fields?.column;
+                        const fieldName = (isPivotDataTable.value && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
                         const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
                         _value = getFormattedNumber(p.value, numberFormat, _unit);
                     }
@@ -167,7 +161,6 @@ const state = reactive({
         return { start: _start, end: _end };
     }),
     dateFormat: computed<string|undefined>(() => DATE_FORMAT?.[widgetOptionsState.dateFormatInfo?.format]?.[widgetOptionsState.granularityInfo?.granularity]),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -182,51 +175,34 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const queryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        groupBy: widgetOptionsState.xAxisInfo?.data,
-        count: widgetOptionsState.xAxisInfo?.count,
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
-
-const queryResult = useQuery({
-    queryKey,
-    queryFn: () => fetchWidgetData({
+const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.xAxisInfo?.data ? [widgetOptionsState.xAxisInfo?.data] : [],
-        sort: getWidgetLoadApiQuerySort(widgetOptionsState.xAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[], state.isPivotDataTable),
+        sort: getWidgetLoadApiQuerySort(widgetOptionsState.xAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[], isPivotDataTable.value),
         page: { start: 0, limit: widgetOptionsState.xAxisInfo?.count },
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
-    }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
+        dataTableId: props.dataTableId,
+    })),
+});
+
+const queryResult = useQuery({
+    queryKey,
+    queryFn,
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || state.dataTableLoading);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
 const errorMessage = computed<string|undefined>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
-    return queryResult.error?.value?.message;
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
+    return queryResult.error?.value?.message as string;
 });
 
 /* Util */
@@ -234,7 +210,7 @@ const getThreshold = (rawData: WidgetLoadResponse): number => {
     const maxNumber = rawData?.results?.reduce((max, obj) => {
         const values = Object.values(obj).filter((val) => typeof val === 'number');
         return Math.max(max, ...values);
-    }, 0);
+    }, 0) || 0;
     return maxNumber * 0.08;
 };
 const drawChart = (rawData: WidgetLoadResponse|null) => {
@@ -252,14 +228,14 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
             });
             return acc;
         }, Object.fromEntries((widgetOptionsState.dataFieldInfo?.data as string[])?.map((field) => [field, 0])));
-        if (Object.values(_etcData).some((v) => v > 0)) {
+        if ((Object.values(_etcData) as number[]).some((v) => v > 0)) {
             _refinedData.push({ [widgetOptionsState.xAxisInfo?.data as string]: 'etc', ..._etcData });
         }
     }
 
     const _seriesData: any[] = [];
     let _dataFields: string[] = widgetOptionsState.dataFieldInfo?.data as string[] || [];
-    if (state.isPivotDataTable) {
+    if (isPivotDataTable.value) {
         const _excludeFields = [...Object.keys(rawData?.labels_info ?? {}), SUB_TOTAL_NAME];
         _dataFields = rawData?.order?.filter((v) => !_excludeFields.includes(v)) || [];
     }
@@ -277,8 +253,8 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
                 fontSize: 10,
                 formatter: (p) => {
                     if (p.value < _threshold) return '';
-                    const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
-                    const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
+                    const columnFieldForPivot = dataTable.value?.options.PIVOT?.fields?.column;
+                    const fieldName = (isPivotDataTable.value && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
                     const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
                     return getFormattedNumber(p.value, numberFormat, _unit);
                 },
@@ -307,7 +283,7 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
     }
 });
 
-watch([() => state.data, () => props.widgetOptions, () => state.dataTable], ([newData,, _dataTable]) => {
+watch([() => state.data, () => props.widgetOptions, dataTable], ([newData,, _dataTable]) => {
     if (!_dataTable) return;
     drawChart(newData);
 }, { immediate: true });
@@ -317,20 +293,6 @@ useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
 
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResult.refetch();
diff --git a/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue b/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue
index e78a8b1ed5..f4bcc66a3f 100644
--- a/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/color-coded-heatmap/ColorCodedHeatmap.vue
@@ -11,19 +11,15 @@ import {
 } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetCustomLegend from '@/common/modules/widgets/_components/WidgetCustomLegend.vue';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import {
     getReferenceLabel,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
@@ -34,7 +30,6 @@ import type {
 } from '@/common/modules/widgets/_widget-fields/format-rules/type';
 import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { GroupByValue } from '@/common/modules/widgets/_widget-fields/group-by/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 import type { WidgetLegend } from '@/common/modules/widgets/types/widget-legend-typs';
 
@@ -45,10 +40,9 @@ const MAX_COUNT = 80;
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -57,7 +51,6 @@ const { dateRange } = useWidgetDateRange({
 });
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
     boxWidth: computed<number>(() => {
         if (!props.width) return BOX_MIN_WIDTH;
         const widgetContentWidth = props.width;
@@ -65,7 +58,6 @@ const state = reactive({
         return widgetContentWidth / 8 < BOX_MIN_WIDTH ? BOX_MIN_WIDTH : widgetContentWidth / 8;
     }),
     legendList: [] as WidgetLegend[],
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -76,37 +68,14 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const queryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options as DataTableOptions),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        groupBy: [widgetOptionsState.groupByInfo?.data as string, widgetOptionsState.formatRulesInfo?.field as string],
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
-
-const queryResult = useQuery({
-    queryKey,
-    queryFn: () => fetchWidgetData({
+const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        group_by: (widgetOptionsState.groupByInfo?.data && widgetOptionsState.formatRulesInfo?.field) ? [widgetOptionsState.groupByInfo?.data, widgetOptionsState.formatRulesInfo?.field] : [],
+        group_by: (widgetOptionsState.groupByInfo?.data && widgetOptionsState.formatRulesInfo?.field)
+            ? [widgetOptionsState.groupByInfo?.data as string, widgetOptionsState.formatRulesInfo?.field as string]
+            : [],
         start: dateRange.value.start,
         end: dateRange.value.end,
         vars: props.dashboardVars,
@@ -114,15 +83,24 @@ const queryResult = useQuery({
             start: 1,
             limit: MAX_COUNT,
         },
-    }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
+        dataTableId: props.dataTableId,
+    })),
+});
+
+const queryResult = useQuery({
+    queryKey,
+    queryFn,
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || state.dataTableLoading);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
 const errorMessage = computed<string|undefined>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
-    return queryResult.error?.value?.message;
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
+    return queryResult.error?.value?.message as string;
 });
 
 const refinedData = computed(() => {
@@ -160,7 +138,7 @@ const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emi
 /* Util */
 const getColor = (val: string, field: string): string => {
     const _label = getReferenceLabel(props.allReferenceTypeInfo, field, val);
-    return (widgetOptionsState.formatRulesInfo?.rules ?? []).find((d) => d.text === _label || _label.includes(d.text) || val.includes(d.text))?.color
+    return (widgetOptionsState.formatRulesInfo?.rules ?? []).find((d) => d.text && (d.text === _label || _label.includes(d.text) || val.includes(d.text)))?.color
         ?? widgetOptionsState.formatRulesInfo.baseColor as string;
 };
 
@@ -173,21 +151,6 @@ watch(() => widgetOptionsState.formatRulesInfo, async () => {
     }));
 }, { immediate: true });
 
-
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResult.refetch();
diff --git a/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue b/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue
index 011d429ad2..0996b2bebf 100644
--- a/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/color-coded-table-heatmap/ColorCodedTableHeatmap.vue
@@ -10,21 +10,18 @@ import { cloneDeep, throttle } from 'lodash';
 import { PTooltip } from '@cloudforet/mirinae';
 import { getContrastingColor, numberFormatter } from '@cloudforet/utils';
 
-import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetCustomLegend from '@/common/modules/widgets/_components/WidgetCustomLegend.vue';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields, getWidgetDateRange,
@@ -42,7 +39,6 @@ import type {
 import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 import type { WidgetLegend } from '@/common/modules/widgets/types/widget-legend-typs';
@@ -58,10 +54,11 @@ const BOX_MIN_WIDTH = 64;
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
+const isPivotDataTable = computed<boolean>(() => dataTable.value?.operator === DATA_TABLE_OPERATOR.PIVOT);
+
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -70,8 +67,6 @@ const { dateRange } = useWidgetDateRange({
 });
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
-    isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     data: computed<WidgetLoadResponse|undefined>(() => queryResult.data?.value),
     dataField: computed<string>(() => widgetOptionsState.dataFieldInfo?.data?.[0] || ''),
@@ -88,7 +83,7 @@ const state = reactive({
     }),
     yAxisData: computed<string[]>(() => {
         if (!state.data?.results?.length) return [];
-        if (state.isPivotDataTable) {
+        if (isPivotDataTable.value) {
             const _excludeFields = [...Object.keys(state.data?.labels_info ?? {}), SUB_TOTAL_NAME];
             return state.data.order?.filter((v) => !_excludeFields.includes(v)) || [];
         }
@@ -103,7 +98,6 @@ const state = reactive({
         }
         return { start: _start, end: _end };
     }),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -117,49 +111,33 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-const queryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        groupBy: widgetOptionsState.xAxisInfo?.data,
-        count: widgetOptionsState.xAxisInfo?.count,
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
-
-const queryResult = useQuery({
-    queryKey,
-    queryFn: () => fetchWidgetData({
+const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.xAxisInfo?.data ? [widgetOptionsState.xAxisInfo?.data as string] : [],
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
         ...(!isDateField(widgetOptionsState.xAxisInfo.data) && { page: { start: 1, limit: widgetOptionsState.xAxisInfo?.count } }),
         vars: props.dashboardVars,
-    }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
+        dataTableId: props.dataTableId,
+    })),
+});
+
+const queryResult = useQuery({
+    queryKey,
+    queryFn,
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || state.dataTableLoading);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
 const errorMessage = computed<string|undefined>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
-    return queryResult.error?.value?.message;
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
+    return queryResult.error?.value?.message as string;
 });
 
 /* Util */
@@ -173,8 +151,8 @@ const targetValue = (xField?: string, yField?: string, format?: 'table'|'tooltip
     if (!_targetVal) return format === 'table' ? '--' : '';
     if (!format) return _targetVal;
     if (format === 'table') {
-        const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
-        const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : _field;
+        const columnFieldForPivot = dataTable.value?.options.PIVOT?.fields?.column;
+        const fieldName = (isPivotDataTable.value && columnFieldForPivot) ? columnFieldForPivot : _field;
         const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
         const _formattedVal = getFormattedNumber(_targetVal, numberFormat);
         if ((_formattedVal.length * 6.5) > state.boxWidth) return '...';
@@ -239,21 +217,6 @@ watch(() => widgetOptionsState, () => {
 }, { deep: true });
 
 /* Lifecycle */
-
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResult.refetch();
diff --git a/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue b/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
index b81d93d694..6edf530f7e 100644
--- a/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
@@ -13,18 +13,15 @@ import { init } from 'echarts/core';
 import { isEmpty, orderBy, throttle } from 'lodash';
 
 
-import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
@@ -33,7 +30,6 @@ import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/g
 import type { MaxValue } from '@/common/modules/widgets/_widget-fields/max/type';
 import type { MinValue } from '@/common/modules/widgets/_widget-fields/min/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetProps, WidgetEmit,
     WidgetExpose,
@@ -46,11 +42,9 @@ const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
 const chartContext = ref<HTMLElement|null>(null);
-
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -59,7 +53,6 @@ const { dateRange } = useWidgetDateRange({
 });
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
 
     unit: computed<string|undefined>(() => {
         if (!widgetOptionsState.dataFieldInfo?.data) return undefined;
@@ -129,7 +122,6 @@ const state = reactive({
         });
         return _color;
     }),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -143,47 +135,32 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const queryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
+const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
+        widget_id: props.widgetId,
+        granularity: widgetOptionsState.granularityInfo?.granularity,
         start: dateRange.value.start,
         end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
+        vars: props.dashboardVars,
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
         dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
+    })),
+});
 
 const queryResult = useQuery({
     queryKey,
-    queryFn: () => fetchWidgetData({
-        widget_id: props.widgetId,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-        vars: props.dashboardVars,
-    }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
+    queryFn,
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || state.dataTableLoading);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
 const errorMessage = computed<string|undefined>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
-    return queryResult.error?.value?.message;
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
+    return queryResult.error?.value?.message as string;
 });
 
 /* Util */
@@ -205,24 +182,11 @@ watch([() => state.chartData, () => chartContext.value, () => props.widgetOption
         state.chart.setOption(state.chartOptions, true);
     }
 });
-watch([() => state.data, () => props.widgetOptions, () => state.dataTable], ([newData,, _dataTable]) => {
+watch([() => state.data, () => props.widgetOptions, dataTable], ([newData,, _dataTable]) => {
     if (!_dataTable) return;
     drawChart(newData);
 }, { immediate: true });
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
+
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResult.refetch();
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 50af4882f2..8bd5bbe456 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,26 +15,22 @@ import { throttle } from 'lodash';
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { RegionReferenceMap } from '@/store/reference/region-reference-store';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
 import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/date-range/type';
 import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { GroupByValue } from '@/common/modules/widgets/_widget-fields/group-by/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetProps, WidgetEmit,
     WidgetExpose,
@@ -48,11 +44,9 @@ import { coral, gray } from '@/styles/colors';
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 const REGION_FIELD = 'Region';
-
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -67,7 +61,6 @@ const storeState = reactive({
 const state = reactive({
     mapLoaded: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     chart: null as EChartsType | null,
@@ -108,7 +101,6 @@ const state = reactive({
             },
         ],
     })),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -118,48 +110,32 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const queryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        groupBy: widgetOptionsState.groupByInfo?.data,
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
-
-const queryResult = useQuery({
-    queryKey,
-    queryFn: () => fetchWidgetData({
+const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: !!widgetOptionsState.groupByInfo?.data && widgetOptionsState.groupByInfo?.data === 'Region' ? ['Region'] : [],
         vars: props.dashboardVars,
         start: dateRange.value.start,
         end: dateRange.value.end,
-    }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
+        dataTableId: props.dataTableId,
+    })),
+});
+
+const queryResult = useQuery({
+    queryKey,
+    queryFn,
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || state.dataTableLoading);
-const errorMessage = computed<string>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
+const errorMessage = computed<string|undefined>(() => {
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
     return queryResult.error?.value?.message;
 });
 
@@ -206,7 +182,7 @@ watch([() => state.chartData, () => chartContext.value, () => state.mapLoaded],
         state.chart.setOption(state.chartOptions, true);
     }
 });
-watch([() => state.data, () => props.widgetOptions, () => state.dataTable], async ([newData,, _dataTable]) => {
+watch([() => state.data, () => props.widgetOptions, dataTable], async ([newData,, _dataTable]) => {
     if (!_dataTable) return;
     await loadMap();
     await drawChart(newData);
@@ -216,20 +192,6 @@ useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
 
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResult.refetch();
diff --git a/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue b/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
index e4b278e138..e0d86cd826 100644
--- a/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
@@ -13,20 +13,17 @@ import { isEmpty, max, throttle } from 'lodash';
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields,
@@ -43,7 +40,6 @@ import type { DateRangeValue } from '@/common/modules/widgets/_widget-fields/dat
 import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend/type';
 import type { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 
@@ -53,10 +49,11 @@ import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/wid
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
+const isPivotDataTable = computed<boolean>(() => dataTable.value?.operator === DATA_TABLE_OPERATOR.PIVOT);
+
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -67,8 +64,6 @@ const chartContext = ref<HTMLElement|null>(null);
 
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
-    isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     data: computed<WidgetLoadResponse | null>(() => queryResult.data?.value ?? null),
     dataField: computed<string>(() => widgetOptionsState.dataFieldInfo?.data?.[0] || ''),
@@ -83,7 +78,7 @@ const state = reactive({
     }),
     yAxisData: computed<string[]>(() => {
         if (!state.data?.results?.length) return [];
-        if (state.isPivotDataTable) {
+        if (isPivotDataTable.value) {
             const _excludeFields = [...Object.keys(state.data?.labels_info ?? {}), SUB_TOTAL_NAME];
             return state.data.order?.filter((v) => !_excludeFields.includes(v)) || [];
         }
@@ -118,7 +113,7 @@ const state = reactive({
             },
             axisLabel: {
                 formatter: (val) => {
-                    if (state.isPivotDataTable) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
+                    if (isPivotDataTable.value) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
                     return val;
                 },
             },
@@ -169,7 +164,6 @@ const state = reactive({
         }
         return { start: _start, end: _end };
     }),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -182,49 +176,33 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-const queryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        groupBy: widgetOptionsState.xAxisInfo?.data,
-        count: widgetOptionsState.xAxisInfo?.count,
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
-
-const queryResult = useQuery({
-    queryKey,
-    queryFn: () => fetchWidgetData({
+const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.xAxisInfo?.data ? [widgetOptionsState.xAxisInfo?.data] : [],
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
         ...(!isDateField(widgetOptionsState.xAxisInfo.data) && { page: { start: 0, limit: widgetOptionsState.xAxisInfo?.count } }),
         vars: props.dashboardVars,
-    }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
+        dataTableId: props.dataTableId,
+    })),
+});
+
+const queryResult = useQuery({
+    queryKey,
+    queryFn,
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || state.dataTableLoading);
-const errorMessage = computed<string>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
-    return queryResult.error?.value?.message;
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
+const errorMessage = computed<string|undefined>(() => {
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
+    return queryResult.error?.value?.message as string;
 });
 
 
@@ -252,7 +230,7 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
     }
 });
 
-watch([() => state.data, () => props.widgetOptions, () => state.dataTable], ([newData,, _dataTable]) => {
+watch([() => state.data, () => props.widgetOptions, dataTable], ([newData,, _dataTable]) => {
     if (!_dataTable) return;
     drawChart(newData);
 }, { immediate: true });
@@ -268,20 +246,6 @@ useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
 
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResult.refetch();
diff --git a/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue b/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
index 8e7856cca8..9fcf4a42d3 100644
--- a/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/line-chart/LineChart.vue
@@ -17,20 +17,17 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import {
     getReferenceLabel, getWidgetDateFields, getWidgetDateRange,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
@@ -49,7 +46,6 @@ import type { MissingValueValue } from '@/common/modules/widgets/_widget-fields/
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
 import type { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
@@ -63,10 +59,11 @@ import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
+const isPivotDataTable = computed<boolean>(() => dataTable.value?.operator === DATA_TABLE_OPERATOR.PIVOT);
+
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -76,8 +73,6 @@ const { dateRange } = useWidgetDateRange({
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
-    isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     chart: null as EChartsType | null,
@@ -110,7 +105,7 @@ const state = reactive({
             itemWidth: 10,
             itemHeight: 10,
             formatter: (val) => {
-                if (state.isPivotDataTable) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
+                if (isPivotDataTable.value) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
                 return val;
             },
         },
@@ -130,8 +125,8 @@ const state = reactive({
                     if (!_value) return undefined;
                     if (_unit) _seriesName = `${_seriesName} (${_unit})`;
                     if (widgetOptionsState.tooltipNumberFormatInfo?.toggleValue) {
-                        const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
-                        const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
+                        const columnFieldForPivot = dataTable.value?.options.PIVOT?.fields?.column;
+                        const fieldName = (isPivotDataTable.value && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
                         const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
                         _value = getFormattedNumber(p.value, numberFormat, _unit);
                     }
@@ -169,7 +164,6 @@ const state = reactive({
         return { start: _start, end: _end };
     }),
     dateFormat: computed<string|undefined>(() => DATE_FORMAT?.[widgetOptionsState.dateFormatInfo?.format]?.[widgetOptionsState.granularityInfo?.granularity]),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -187,51 +181,35 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const queryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        groupBy: widgetOptionsState.xAxisInfo?.data,
-        count: widgetOptionsState.xAxisInfo?.count,
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
-
-const queryResult = useQuery({
-    queryKey,
-    queryFn: () => fetchWidgetData({
+const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.xAxisInfo?.data ? [widgetOptionsState.xAxisInfo?.data] : [],
-        sort: getWidgetLoadApiQuerySort(widgetOptionsState.xAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[], state.isPivotDataTable),
+        sort: getWidgetLoadApiQuerySort(widgetOptionsState.xAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[], isPivotDataTable.value),
         page: { start: 0, limit: widgetOptionsState.xAxisInfo?.count },
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
-    }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
+        dataTableId: props.dataTableId,
+    })),
+});
+
+
+const queryResult = useQuery({
+    queryKey,
+    queryFn,
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || state.dataTableLoading);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
 const errorMessage = computed<string|undefined>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
-    return queryResult.error?.value?.message;
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
+    return queryResult.error?.value?.message as string;
 });
 
 /* Util */
@@ -241,7 +219,7 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
     const _seriesData: any[] = [];
     const _defaultValue = widgetOptionsState.missingValueInfo?.type === 'lineToZero' ? 0 : undefined;
     let _dataFields: string[] = widgetOptionsState.dataFieldInfo?.data as string[] || [];
-    if (state.isPivotDataTable) {
+    if (isPivotDataTable.value) {
         const _excludeFields = [...Object.keys(rawData?.labels_info ?? {}), SUB_TOTAL_NAME];
         _dataFields = rawData?.order?.filter((v) => !_excludeFields.includes(v)) || [];
     }
@@ -263,8 +241,8 @@ const drawChart = (rawData: WidgetLoadResponse|null) => {
                 fontSize: 10,
                 formatter: (p) => {
                     if (!p.value) return '';
-                    const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
-                    const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : _dataField;
+                    const columnFieldForPivot = dataTable.value?.options.PIVOT?.fields?.column;
+                    const fieldName = (isPivotDataTable.value && columnFieldForPivot) ? columnFieldForPivot : _dataField;
                     const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
 
                     return getFormattedNumber(p.value, numberFormat, _unit);
@@ -290,7 +268,7 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
         state.chart.setOption(state.chartOptions, true);
     }
 });
-watch([() => state.data, () => props.widgetOptions, () => state.dataTable], ([newData,, _dataTable]) => {
+watch([() => state.data, () => props.widgetOptions, dataTable], ([newData,, _dataTable]) => {
     if (!_dataTable) return;
     drawChart(newData);
 }, { immediate: true });
@@ -300,20 +278,6 @@ useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
 
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResult.refetch();
diff --git a/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue b/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
index 3cfa14de6d..959d495bfb 100644
--- a/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/number-card/NumberCard.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { useElementSize, useResizeObserver } from '@vueuse/core';
 import {
-    computed, defineExpose, onMounted, reactive, ref, watch,
+    computed, defineExpose, onMounted, reactive, ref,
 } from 'vue';
 
 import { useQueries } from '@tanstack/vue-query';
@@ -12,20 +12,17 @@ import {
 } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { WidgetLoadResponse, WidgetLoadSumParams } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadSumQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import {
     getPreviousDateRange,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
@@ -37,7 +34,6 @@ import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/g
 import type { IconValue } from '@/common/modules/widgets/_widget-fields/icon/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { WidgetHeightValue } from '@/common/modules/widgets/_widget-fields/widget-height/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
@@ -52,10 +48,11 @@ const emit = defineEmits<WidgetEmit>();
 const topPartRef = ref<null | HTMLElement>(null);
 const valueTextRef = ref<null | HTMLElement>(null);
 
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
+const isPivotDataTable = computed<boolean>(() => dataTable.value?.operator === DATA_TABLE_OPERATOR.PIVOT);
+
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -64,19 +61,17 @@ const { dateRange } = useWidgetDateRange({
 });
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
     previousLoading: false,
-    isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     data: computed<WidgetLoadResponse | null>(() => queryResults.value?.[0].data || null),
     previousData: computed<WidgetLoadResponse | null>(() => queryResults.value?.[1]?.data || null),
     unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[widgetOptionsState.dataFieldInfo?.data as string]),
     previousValue: computed<number>(() => {
-        if (state.isPivotDataTable) return state.previousData?.results?.[0]?.[SUB_TOTAL_NAME] ?? 0;
+        if (isPivotDataTable.value) return state.previousData?.results?.[0]?.[SUB_TOTAL_NAME] ?? 0;
         return state.previousData?.results?.[0]?.[widgetOptionsState.dataFieldInfo?.data as string] ?? 0;
     }),
     currentValue: computed<number>(() => {
-        if (state.isPivotDataTable) return state.data?.results?.[0]?.[SUB_TOTAL_NAME] ?? 0;
+        if (isPivotDataTable.value) return state.data?.results?.[0]?.[SUB_TOTAL_NAME] ?? 0;
         return state.data?.results?.[0]?.[widgetOptionsState.dataFieldInfo?.data as string] ?? 0;
     }),
     valueText: computed<string|undefined>(() => getFormattedNumber(state.currentValue, widgetOptionsState.numberFormatInfo?.[widgetOptionsState.dataFieldInfo?.data as string], state.unit)),
@@ -128,7 +123,6 @@ const state = reactive({
         const _previousDateRange = getPreviousDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value);
         return _previousDateRange;
     }),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -157,80 +151,59 @@ const setValueTextFontSize = debounce(() => {
 }, 300);
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadSumParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.loadSum
-        : api.publicWidgetAPI.loadSum;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const baseQueryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
+const { fetcher: baseQueryFn, key: baseQueryKey } = useWidgetLoadSumQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
+        widget_id: props.widgetId,
+        granularity: widgetOptionsState.granularityInfo?.granularity,
         start: dateRange.value.start,
         end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
+        vars: props.dashboardVars,
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
         dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
+    })),
+});
+
 
-const comparisonQueryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
+const { fetcher: comparisonQueryFn, key: comparisonQueryKey } = useWidgetLoadSumQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
+        widget_id: props.widgetId,
+        granularity: widgetOptionsState.granularityInfo?.granularity,
         start: state.comparisonDateRange.start,
         end: state.comparisonDateRange.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
+        vars: props.dashboardVars,
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
         dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
+    })),
+});
 
 const queryResults = useQueries({
     queries: [
         {
             queryKey: baseQueryKey,
-            queryFn: () => fetchWidgetData({
-                widget_id: props.widgetId,
-                granularity: widgetOptionsState.granularityInfo?.granularity,
-                start: dateRange.value.start,
-                end: dateRange.value.end,
-                vars: props.dashboardVars,
-            }),
-            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
+            queryFn: baseQueryFn,
+            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
             staleTime: WIDGET_LOAD_STALE_TIME,
         },
         {
             queryKey: comparisonQueryKey,
-            queryFn: () => fetchWidgetData({
-                widget_id: props.widgetId,
-                granularity: widgetOptionsState.granularityInfo?.granularity,
-                start: state.comparisonDateRange.start,
-                end: state.comparisonDateRange.end,
-                vars: props.dashboardVars,
-            }),
-            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && widgetOptionsState.comparisonInfo?.toggleValue && !props.loadDisabled),
+            queryFn: comparisonQueryFn,
+            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && widgetOptionsState.comparisonInfo?.toggleValue && !props.loadDisabled),
             staleTime: WIDGET_LOAD_STALE_TIME,
         },
     ],
 });
 
-const widgetLoading = computed<boolean>(() => queryResults.value?.[0].isFetching || state.dataTableLoading);
-const previousLoading = computed<string>(() => queryResults.value?.[1].isFetching || state.dataTableLoading);
-const errorMessage = computed<string>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
-    return queryResults.value?.[0].error?.message;
+const widgetLoading = computed<boolean>(() => queryResults.value?.[0].isFetching || dataTableLoading.value);
+const previousLoading = computed<boolean>(() => queryResults.value?.[1].isFetching || dataTableLoading.value);
+const errorMessage = computed<string|undefined>(() => {
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
+    return queryResults.value?.[0].error?.message as string;
 });
 
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
@@ -244,20 +217,6 @@ useResizeObserver(valueTextRef, throttle(() => {
     setValueTextFontSize();
 }, 500));
 
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResults.value?.[0].refetch();
diff --git a/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue b/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue
index 58cc2d4eb0..9884540257 100644
--- a/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/pie-chart/PieChart.vue
@@ -5,7 +5,6 @@ import {
     reactive, ref, watch,
 } from 'vue';
 
-import type { QueryKey } from '@tanstack/vue-query';
 import { useQuery } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import type { PieSeriesOption } from 'echarts/charts';
@@ -20,19 +19,16 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import {
     getReferenceLabel,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
@@ -51,7 +47,6 @@ import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { PieChartTypeValue } from '@/common/modules/widgets/_widget-fields/pie-chart-type/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
 } from '@/common/modules/widgets/types/widget-display-type';
@@ -68,10 +63,9 @@ interface ChartData {
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -81,8 +75,6 @@ const { dateRange } = useWidgetDateRange({
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
-
     data: computed<WidgetLoadResponse | null>(() => queryResult.data?.value || null),
     chart: null as EChartsType | null,
     chartData: [] as ChartData[],
@@ -100,7 +92,7 @@ const state = reactive({
                 return getReferenceLabel(props.allReferenceTypeInfo, widgetOptionsState.groupByInfo?.data as string, val);
             },
         };
-        if (['left', 'right'].includes(widgetOptionsState.legendInfo?.position)) {
+        if (widgetOptionsState.legendInfo?.position && ['left', 'right'].includes(widgetOptionsState.legendInfo?.position)) {
             _option.orient = 'vertical';
             _option.top = 20;
             if (widgetOptionsState.legendInfo?.position === 'right') _option.right = 10;
@@ -120,13 +112,13 @@ const state = reactive({
         if (widgetOptionsState.pieChartTypeInfo?.type === 'donut') {
             _option.radius = ['30%', '70%'];
         }
-        if (['left', 'right'].includes(widgetOptionsState.legendInfo?.position)) {
+        if (widgetOptionsState.legendInfo?.position && ['left', 'right'].includes(widgetOptionsState.legendInfo?.position)) {
             if (props.size === 'full') {
                 if (widgetOptionsState.legendInfo?.position === 'right') _option.center = ['40%', '50%'];
                 else _option.center = ['60%', '50%'];
             } else _option.center = ['30%', '50%'];
         }
-        if (['top', 'bottom'].includes(widgetOptionsState.legendInfo?.position)) {
+        if (widgetOptionsState.legendInfo?.position && ['top', 'bottom'].includes(widgetOptionsState.legendInfo?.position)) {
             if (widgetOptionsState.legendInfo?.position === 'bottom') {
                 _option.center = ['50%', '45%'];
             } else {
@@ -181,7 +173,6 @@ const state = reactive({
         const _dateFormat = (props.widgetOptions?.dateFormat?.value as DateFormatValue)?.format || 'MMM DD, YYYY';
         return DATE_FORMAT?.[_dateFormat]?.[widgetOptionsState.granularityInfo?.granularity];
     }),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -199,35 +190,9 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const queryKey = computed<QueryKey>(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        groupBy: widgetOptionsState.groupByInfo?.data,
-        count: widgetOptionsState.groupByInfo?.count,
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
-
-const queryResult = useQuery({
-    queryKey,
-    queryFn: () => fetchWidgetData({
+const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.groupByInfo?.data ? [widgetOptionsState.groupByInfo?.data as string] : [],
@@ -235,14 +200,24 @@ const queryResult = useQuery({
         page: { start: 0, limit: widgetOptionsState.groupByInfo?.count ?? 0 },
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
-    }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
+        dataTableId: props.dataTableId,
+    })),
+});
+
+
+const queryResult = useQuery({
+    queryKey,
+    queryFn,
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || state.dataTableLoading);
-const errorMessage = computed<string>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
+const errorMessage = computed<string|undefined>(() => {
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
     return queryResult.error?.value?.message;
 });
 
@@ -286,27 +261,13 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
         state.chart.setOption(state.chartOptions, true);
     }
 });
-watch([() => state.data, () => props.widgetOptions, () => state.dataTable], ([newData,, _dataTable]) => {
+watch([() => state.data, () => props.widgetOptions, dataTable], ([newData,, _dataTable]) => {
     if (!_dataTable) return;
     drawChart(newData);
 }, { immediate: true });
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
 defineExpose<WidgetExpose>({
     loadWidget: async () => {
         queryResult.refetch();
diff --git a/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue b/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue
index ef4c7fed2d..00fb631682 100644
--- a/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/sankey-chart/SankeyChart.vue
@@ -19,19 +19,16 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import { getReferenceLabel } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
 import {
@@ -45,7 +42,6 @@ import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/g
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { SankeyDimensionsValue } from '@/common/modules/widgets/_widget-fields/sankey-dimensions/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
 } from '@/common/modules/widgets/types/widget-display-type';
@@ -57,10 +53,9 @@ import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -70,8 +65,6 @@ const { dateRange } = useWidgetDateRange({
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
-
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     chart: null as EChartsType | null,
     chartData: [] as SankeySeriesOption['data'],
@@ -124,7 +117,6 @@ const state = reactive({
         const _dateFormat = (props.widgetOptions?.dateFormat?.value as DateFormatValue)?.format || 'MMM DD, YYYY';
         return DATE_FORMAT?.[_dateFormat]?.[widgetOptionsState.granularityInfo?.granularity];
     }),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -140,35 +132,9 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const queryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        sankeyDimensions: widgetOptionsState.sankeyDimensionsInfo?.data,
-        count: widgetOptionsState.sankeyDimensionsInfo?.count,
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
-
-const queryResult = useQuery({
-    queryKey,
-    queryFn: () => fetchWidgetData({
+const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.sankeyDimensionsInfo?.data,
@@ -176,14 +142,23 @@ const queryResult = useQuery({
         page: { start: 0, limit: widgetOptionsState.sankeyDimensionsInfo?.count ?? 0 },
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
-    }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
+        dataTableId: props.dataTableId,
+    })),
+});
+
+const queryResult = useQuery({
+    queryKey,
+    queryFn,
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || state.dataTableLoading);
-const errorMessage = computed<string>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
+const errorMessage = computed<string|undefined>(() => {
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
     return queryResult.error?.value?.message;
 });
 
@@ -233,7 +208,7 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
         state.chart.setOption(state.chartOptions, true);
     }
 });
-watch([() => state.data, () => props.widgetOptions, () => state.dataTable], ([newData,, _dataTable]) => {
+watch([() => state.data, () => props.widgetOptions, dataTable], ([newData,, _dataTable]) => {
     if (!_dataTable) return;
     drawChart(newData);
 }, { immediate: true });
@@ -241,20 +216,7 @@ watch([() => state.data, () => props.widgetOptions, () => state.dataTable], ([ne
 useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
+
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResult.refetch();
diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue b/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue
index b20b35f15d..ae22ce526a 100644
--- a/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/stacked-column-chart/StackedColumnChart.vue
@@ -17,20 +17,17 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields,
@@ -51,7 +48,6 @@ import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
 import type { XAxisValue } from '@/common/modules/widgets/_widget-fields/x-axis/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 
@@ -59,14 +55,13 @@ import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 
 
 
-
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
+const isPivotDataTable = computed<boolean>(() => dataTable.value?.operator === DATA_TABLE_OPERATOR.PIVOT);
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -76,8 +71,6 @@ const { dateRange } = useWidgetDateRange({
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
-    isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     xAxisData: computed<string[]>(() => {
@@ -109,7 +102,7 @@ const state = reactive({
             itemWidth: 10,
             itemHeight: 10,
             formatter: (val) => {
-                if (state.isPivotDataTable) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
+                if (isPivotDataTable.value) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
                 return val;
             },
         },
@@ -121,8 +114,8 @@ const state = reactive({
                     let _seriesName = getReferenceLabel(props.allReferenceTypeInfo, state.dataField, p.seriesName);
                     let _value = numberFormatter(p.value) || '';
                     if (widgetOptionsState.tooltipNumberFormatInfo?.toggleValue) {
-                        const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
-                        const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
+                        const columnFieldForPivot = dataTable.value?.options.PIVOT?.fields?.column;
+                        const fieldName = (isPivotDataTable.value && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
                         const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
                         _value = getFormattedNumber(p.value, numberFormat, _unit);
                     }
@@ -164,7 +157,6 @@ const state = reactive({
         return { start: _start, end: _end };
     }),
     dateFormat: computed<string|undefined>(() => DATE_FORMAT?.[widgetOptionsState.dateFormatInfo?.format]?.[widgetOptionsState.granularityInfo?.granularity]),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -180,50 +172,33 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const queryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        groupBy: widgetOptionsState.xAxisInfo?.data,
-        count: widgetOptionsState.xAxisInfo?.count,
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
-
-const queryResult = useQuery({
-    queryKey,
-    queryFn: () => fetchWidgetData({
+const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.xAxisInfo?.data ? [widgetOptionsState.xAxisInfo?.data] : [],
-        sort: getWidgetLoadApiQuerySort(widgetOptionsState.xAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[], state.isPivotDataTable),
+        sort: getWidgetLoadApiQuerySort(widgetOptionsState.xAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[], isPivotDataTable.value),
         page: { start: 0, limit: widgetOptionsState.xAxisInfo?.count },
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
-    }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
+        dataTableId: props.dataTableId,
+    })),
+});
+
+const queryResult = useQuery({
+    queryKey,
+    queryFn,
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || state.dataTableLoading);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
 const errorMessage = computed<string|undefined>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
     return queryResult.error?.value?.message;
 });
 
@@ -234,7 +209,7 @@ const drawChart = (rawData?: WidgetLoadResponse|null) => {
 
     const _seriesData: any[] = [];
     let _dataFields: string[] = widgetOptionsState.dataFieldInfo?.data as string[] || [];
-    if (state.isPivotDataTable) {
+    if (isPivotDataTable.value) {
         const _excludeFields = [...Object.keys(rawData?.labels_info ?? {}), SUB_TOTAL_NAME];
         _dataFields = rawData?.order?.filter((v) => !_excludeFields.includes(v)) || [];
     }
@@ -246,7 +221,7 @@ const drawChart = (rawData?: WidgetLoadResponse|null) => {
             stack: true,
             barMaxWidth: 50,
             data: state.xAxisData.map((d) => {
-                const _data = rawData.results?.find((v) => v[widgetOptionsState.xAxisInfo?.data] === d);
+                const _data = rawData.results?.find((v) => v[widgetOptionsState.xAxisInfo?.data as string] === d);
                 return _data?.[_dataField] || 0;
             }),
             label: {
@@ -256,8 +231,8 @@ const drawChart = (rawData?: WidgetLoadResponse|null) => {
                 fontSize: 10,
                 formatter: (p) => {
                     if (!p.value) return '';
-                    const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
-                    const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : _dataField;
+                    const columnFieldForPivot = dataTable.value?.options.PIVOT?.fields?.column;
+                    const fieldName = (isPivotDataTable.value && columnFieldForPivot) ? columnFieldForPivot : _dataField;
                     const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
                     return getFormattedNumber(p.value, numberFormat, _unit);
                 },
@@ -281,7 +256,7 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
         state.chart.setOption(state.chartOptions, true);
     }
 });
-watch([() => state.data, () => props.widgetOptions, () => state.dataTable], ([newData,, _dataTable]) => {
+watch([() => state.data, () => props.widgetOptions, dataTable], ([newData,, _dataTable]) => {
     if (!_dataTable) return;
     drawChart(newData);
 }, { immediate: true });
@@ -290,20 +265,6 @@ useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
 
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResult.refetch();
diff --git a/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue b/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue
index ed45f3aeb3..5bec2d5232 100644
--- a/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/stacked-horizontal-bar-chart/StackedHorizontalBarChart.vue
@@ -15,20 +15,17 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import {
     getReferenceLabel,
     getWidgetDateFields,
@@ -48,7 +45,6 @@ import type { LegendValue } from '@/common/modules/widgets/_widget-fields/legend
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
 import type { YAxisValue } from '@/common/modules/widgets/_widget-fields/y-axis/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type { DateRange } from '@/common/modules/widgets/types/widget-data-type';
 import type { WidgetEmit, WidgetExpose, WidgetProps } from '@/common/modules/widgets/types/widget-display-type';
 
@@ -56,14 +52,14 @@ import { MASSIVE_CHART_COLORS } from '@/styles/colorsets';
 
 
 
-
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
+const isPivotDataTable = computed<boolean>(() => dataTable.value?.operator === DATA_TABLE_OPERATOR.PIVOT);
+
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -73,8 +69,6 @@ const { dateRange } = useWidgetDateRange({
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
-    isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     yAxisData: computed<string[]>(() => {
@@ -101,7 +95,7 @@ const state = reactive({
             itemWidth: 10,
             itemHeight: 10,
             formatter: (val) => {
-                if (state.isPivotDataTable) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
+                if (isPivotDataTable.value) return getReferenceLabel(props.allReferenceTypeInfo, state.dataField, val);
                 return val;
             },
         },
@@ -113,8 +107,8 @@ const state = reactive({
                     const _seriesName = getReferenceLabel(props.allReferenceTypeInfo, state.dataField, p.seriesName);
                     let _value = numberFormatter(p.value) || '';
                     if (widgetOptionsState.tooltipNumberFormatInfo?.toggleValue) {
-                        const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
-                        const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
+                        const columnFieldForPivot = dataTable.value?.options.PIVOT?.fields?.column;
+                        const fieldName = (isPivotDataTable.value && columnFieldForPivot) ? columnFieldForPivot : p.seriesName;
                         const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
                         _value = getFormattedNumber(p.value, numberFormat, _unit);
                     }
@@ -159,7 +153,6 @@ const state = reactive({
         const _dateFormat = (props.widgetOptions?.dateFormat?.value as DateFormatValue)?.format || 'MMM DD, YYYY';
         return DATE_FORMAT?.[_dateFormat]?.[widgetOptionsState.granularityInfo?.granularity];
     }),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -174,50 +167,33 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const queryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        groupBy: widgetOptionsState.yAxisInfo?.data,
-        count: widgetOptionsState.yAxisInfo?.count,
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
-
-const queryResult = useQuery({
-    queryKey,
-    queryFn: () => fetchWidgetData({
+const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.yAxisInfo?.data ? [widgetOptionsState.yAxisInfo?.data] : [],
-        sort: getWidgetLoadApiQuerySort(widgetOptionsState.yAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[], state.isPivotDataTable),
+        sort: getWidgetLoadApiQuerySort(widgetOptionsState.yAxisInfo?.data as string, widgetOptionsState.dataFieldInfo?.data as string[], isPivotDataTable.value),
         page: { start: 0, limit: widgetOptionsState.yAxisInfo?.count },
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
-    }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable && !props.loadDisabled),
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
+        dataTableId: props.dataTableId,
+    })),
+});
+
+const queryResult = useQuery({
+    queryKey,
+    queryFn,
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || state.dataTableLoading);
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
 const errorMessage = computed<string|undefined>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
     return queryResult.error?.value?.message;
 });
 
@@ -228,7 +204,7 @@ const drawChart = (rawData?: WidgetLoadResponse|null) => {
     const _seriesData: any[] = [];
     let _dataFields: string[] = widgetOptionsState.dataFieldInfo?.data as string[] || [];
 
-    if (state.isPivotDataTable) {
+    if (isPivotDataTable.value) {
         const _excludeFields = [...Object.keys(rawData?.labels_info ?? {}), SUB_TOTAL_NAME];
         _dataFields = rawData?.order?.filter((v) => !_excludeFields.includes(v)) || [];
     }
@@ -250,8 +226,8 @@ const drawChart = (rawData?: WidgetLoadResponse|null) => {
                 fontSize: 10,
                 formatter: (p) => {
                     if (!p.value) return '';
-                    const columnFieldForPivot = state.dataTable?.options.PIVOT?.fields?.column;
-                    const fieldName = (state.isPivotDataTable && columnFieldForPivot) ? columnFieldForPivot : _dataField;
+                    const columnFieldForPivot = dataTable.value?.options.PIVOT?.fields?.column;
+                    const fieldName = (isPivotDataTable.value && columnFieldForPivot) ? columnFieldForPivot : _dataField;
                     const numberFormat = widgetOptionsState.numberFormatInfo[fieldName];
                     return getFormattedNumber(p.value, numberFormat, _unit);
                 },
@@ -274,7 +250,7 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
         state.chart.setOption(state.chartOptions, true);
     }
 });
-watch([() => state.data, () => props.widgetOptions, () => state.dataTable], ([newData,, _dataTable]) => {
+watch([() => state.data, () => props.widgetOptions, dataTable], ([newData,, _dataTable]) => {
     if (!_dataTable) return;
     drawChart(newData);
 }, { immediate: true });
@@ -283,20 +259,6 @@ useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
 
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResult.refetch();
diff --git a/apps/web/src/common/modules/widgets/_widgets/table/Table.vue b/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
index ee9e672da8..5aaa0cd514 100644
--- a/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-    defineExpose, reactive, computed, watch, onMounted,
+    defineExpose, reactive, computed, onMounted,
 } from 'vue';
 
 import { useQueries } from '@tanstack/vue-query';
@@ -9,20 +9,16 @@ import { sortBy } from 'lodash';
 import type { Sort } from '@cloudforet/core-lib/space-connector/type';
 import { PPagination } from '@cloudforet/mirinae';
 
-import type { WidgetLoadParams, WidgetLoadResponse, WidgetLoadSumParams } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext, useWidgetLoadSumQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { DATA_TABLE_OPERATOR } from '@/common/modules/widgets/_constants/data-table-constant';
 import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import type { CustomTableColumnWidthValue } from '@/common/modules/widgets/_widget-fields/custom-table-column-width/type';
 import type { DataFieldHeatmapColorValue } from '@/common/modules/widgets/_widget-fields/data-field-heatmap-color/type';
 import type { DataFieldValue } from '@/common/modules/widgets/_widget-fields/data-field/type';
@@ -38,7 +34,7 @@ import type { TableColumnWidthValue } from '@/common/modules/widgets/_widget-fie
 import type { TextWrapValue } from '@/common/modules/widgets/_widget-fields/text-wrap/type';
 import type { TotalValue } from '@/common/modules/widgets/_widget-fields/total/type';
 import WidgetDataTable from '@/common/modules/widgets/_widgets/table/_component/WidgetDataTable.vue';
-import type { DataTableModel, TableWidgetField } from '@/common/modules/widgets/types/widget-data-table-type';
+import type { TableWidgetField } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     TableDataItem,
 } from '@/common/modules/widgets/types/widget-data-type';
@@ -47,16 +43,18 @@ import type {
 } from '@/common/modules/widgets/types/widget-display-type';
 import type { DataInfo } from '@/common/modules/widgets/types/widget-model';
 
+import { useWidgetDataTableQuery } from '../../_composables/use-widget-data-table-query';
 
 const REFERENCE_FIELDS = ['Project', 'Workspace', 'Region', 'Service Account'];
 
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
+const isPivotDataTable = computed<boolean>(() => dataTable.value?.operator === DATA_TABLE_OPERATOR.PIVOT);
+
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -69,17 +67,16 @@ const state = reactive({
     pageSize: computed<number>(() => (props.size === 'full' ? 30 : 10)),
     thisPage: 1 as number,
     sortBy: [] as Sort[],
-    dataTable: undefined as DataTableModel|undefined,
-    dataInfo: computed<DataInfo|undefined>(() => state.dataTable?.data_info),
+    dataInfo: computed<DataInfo|undefined>(() => dataTable.value?.data_info),
     tableFields: computed<TableWidgetField[]>(() => {
         const labelFields: TableWidgetField[] = (widgetOptionsState.groupByInfo?.data as string[] ?? []).map(
             (field) => ({ name: field, label: field, fieldInfo: { type: 'labelField', additionalType: field === 'Date' ? 'dateFormat' : undefined } }),
         ) ?? [];
         const dataFields: TableWidgetField[] = [];
-        if (state.isPivotDataTable && refinedData.value) {
+        if (isPivotDataTable.value && refinedData.value) {
             const headers = refinedData.value?.order ?? [];
             const _dataFields: string[] = Object.keys(refinedData.value.data_info ?? {});
-            const columnFieldName = state.dataTable?.options?.PIVOT?.fields?.column;
+            const columnFieldName = dataTable.value?.options?.PIVOT?.fields?.column;
             sortBy(_dataFields, (field) => {
                 const index = headers.indexOf(field);
                 return index === -1 ? Infinity : index;
@@ -115,15 +112,13 @@ const state = reactive({
         const basicFields = [...labelFields, ...dataFields];
         return basicFields;
     }),
-    isPivotDataTable: computed<boolean>(() => state.dataTable?.operator === DATA_TABLE_OPERATOR.PIVOT),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
     tableColumnComparisonInfo: computed<TableColumnComparisonValue>(() => props.widgetOptions?.tableColumnComparison?.value as TableColumnComparisonValue),
     totalInfo: computed<TotalValue>(() => props.widgetOptions?.total?.value as TotalValue),
     subTotalInfo: computed<SubTotalValue|undefined>(() => props.widgetOptions?.subTotal?.value as SubTotalValue),
-    needFullDataFetch: computed<boolean>(() => state.totalInfo?.toggleValue),
+    needFullDataFetch: computed<boolean>(() => widgetOptionsState.totalInfo?.toggleValue),
     granularityInfo: computed<GranularityValue>(() => props.widgetOptions?.granularity?.value as GranularityValue),
     groupByInfo: computed<GroupByValue>(() => props.widgetOptions?.groupBy?.value as GroupByValue),
     dataFieldInfo: computed<DataFieldValue>(() => props.widgetOptions?.dataField?.value as DataFieldValue),
@@ -138,100 +133,67 @@ const widgetOptionsState = reactive({
 
 const getTableDefaultSortBy = (_sortBy: Sort[]) => {
     if (!!_sortBy.length || !widgetOptionsState.dataFieldInfo?.data?.length) return _sortBy;
-    if (state.isPivotDataTable) return [{ key: 'Sub Total', desc: true }];
+    if (isPivotDataTable.value) return [{ key: 'Sub Total', desc: true }];
     const defaultSortBy = [{ key: (widgetOptionsState.dataFieldInfo?.data as string[])?.[0], desc: true }];
     return defaultSortBy;
 };
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
 
-const fetchWidgetSumData = async (params: WidgetLoadSumParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.loadSum
-        : api.publicWidgetAPI.loadSum;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const baseQueryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
+const { fetcher: loadFetcher, key: loadKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
+        widget_id: props.widgetId,
         start: dateRange.value.start,
         end: dateRange.value.end,
-        sort: state.sortBy,
-        page: state.thisPage,
-        pageSize: state.pageSize,
+        sort: getTableDefaultSortBy(state.sortBy),
+        page: {
+            start: (state.pageSize * (state.thisPage - 1)) + 1,
+            limit: state.pageSize,
+        },
+        group_by: (widgetOptionsState.groupByInfo?.data as string[]) ?? [],
+        vars: props.dashboardVars,
         granularity: widgetOptionsState.granularityInfo?.granularity,
-        groupBy: widgetOptionsState.groupByInfo?.data,
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
         dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
+    })),
+});
 
-const fullDataQueryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadSumQueryKey.value : keys.publicWidgetLoadSumQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
+const { fetcher: loadSumFetcher, key: loadSumKey } = useWidgetLoadSumQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
+        widget_id: props.widgetId,
         start: dateRange.value.start,
         end: dateRange.value.end,
+        vars: props.dashboardVars,
         granularity: widgetOptionsState.granularityInfo?.granularity,
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
         dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
         enabledTotal: !!widgetOptionsState.totalInfo?.toggleValue,
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
+    })),
+});
 
 const queryResults = useQueries({
     queries: [
         {
-            queryKey: baseQueryKey,
-            queryFn: () => fetchWidgetData({
-                widget_id: props.widgetId,
-                start: dateRange.value.start,
-                end: dateRange.value.end,
-                sort: getTableDefaultSortBy(state.sortBy),
-                page: {
-                    start: (state.pageSize * (state.thisPage - 1)) + 1,
-                    limit: state.pageSize,
-                },
-                group_by: (widgetOptionsState.groupByInfo?.data as string[]) ?? [],
-                vars: props.dashboardVars,
-                granularity: widgetOptionsState.granularityInfo?.granularity,
-            }),
+            queryKey: loadKey,
+            queryFn: loadFetcher,
             enabled: computed<boolean>(() => {
                 const widgetActive = props.widgetState !== 'INACTIVE';
-                const dataTableReady = !!state.dataTable;
+                const dataTableReady = !!dataTable.value;
                 const loadDisabled = props.loadDisabled;
                 return widgetActive && dataTableReady && !loadDisabled;
             }),
             staleTime: WIDGET_LOAD_STALE_TIME,
         },
         {
-            queryKey: fullDataQueryKey,
-            queryFn: () => fetchWidgetSumData({
-                widget_id: props.widgetId,
-                start: dateRange.value.start,
-                end: dateRange.value.end,
-                vars: props.dashboardVars,
-                granularity: widgetOptionsState.granularityInfo?.granularity,
-            }),
+            queryKey: loadSumKey,
+            queryFn: loadSumFetcher,
             enabled: computed<boolean>(() => {
                 const widgetActive = props.widgetState !== 'INACTIVE';
-                const dataTableReady = !!state.dataTable;
+                const dataTableReady = !!dataTable.value;
                 const totalEnabled = !!widgetOptionsState.totalInfo?.toggleValue;
                 const loadDisabled = props.loadDisabled;
 
@@ -242,9 +204,9 @@ const queryResults = useQueries({
     ],
 });
 
-const widgetLoading = computed<boolean>(() => queryResults.value?.[0].isFetching || queryResults.value?.[1].isFetching || state.dataTableLoading);
-const errorMessage = computed<string>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
+const widgetLoading = computed<boolean>(() => queryResults.value?.[0].isFetching || queryResults.value?.[1].isFetching || dataTableLoading.value);
+const errorMessage = computed<string|undefined>(() => {
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
     return queryResults.value?.[0].error?.message as string || queryResults.value?.[1].error?.message as string;
 });
 
@@ -256,7 +218,7 @@ const refinedData = computed<WidgetLoadResponse|null>(() => {
     if (!data) return null;
 
     let refinedResults: TableDataItem[] = [];
-    (data.results ?? []).forEach((d) => {
+    (data?.results ?? []).forEach((d) => {
         // Basic Data
         const dataItem = { ...d };
 
@@ -288,20 +250,6 @@ const handleUpdateThisPage = async (newPage: number) => {
     state.thisPage = newPage;
 };
 
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResults.value?.[0].refetch();
@@ -329,8 +277,8 @@ onMounted(() => {
                                    :sub-total-info="widgetOptionsState.subTotalInfo"
                                    :total-info="widgetOptionsState.totalInfo"
                                    :granularity="widgetOptionsState.granularityInfo?.granularity"
-                                   :is-pivot-data-table="state.isPivotDataTable"
-                                   :data-table="state.dataTable"
+                                   :is-pivot-data-table="isPivotDataTable"
+                                   :data-table="dataTable"
                                    :data-info="state.dataInfo"
                                    :date-format-info="widgetOptionsState.dateFormatInfo"
                                    :number-format-info="widgetOptionsState.numberFormatInfo"
diff --git a/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue b/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue
index 93e3b06ad3..d2abed421e 100644
--- a/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue
@@ -17,19 +17,16 @@ import {
 
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { WidgetLoadParams, WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadResponse } from '@/api-clients/dashboard/_types/widget-type';
 import { i18n } from '@/translations';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
+import { useWidgetDataTableQuery } from '@/common/modules/widgets/_composables/use-widget-data-table-query';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
-import { useWidgetFormQuery } from '@/common/modules/widgets/_composables/use-widget-form-query';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
+import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
 import { DATE_FIELD, WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
-import {
-    normalizeAndSerializeVars,
-} from '@/common/modules/widgets/_helpers/global-variable-helper';
 import {
     getReferenceLabel,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
@@ -44,7 +41,6 @@ import type { DisplaySeriesLabelValue } from '@/common/modules/widgets/_widget-f
 import type { GranularityValue } from '@/common/modules/widgets/_widget-fields/granularity/type';
 import type { NumberFormatValue } from '@/common/modules/widgets/_widget-fields/number-format/type';
 import type { TooltipNumberFormatValue } from '@/common/modules/widgets/_widget-fields/tooltip-number-format/type';
-import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     WidgetProps, WidgetEmit, WidgetExpose,
 } from '@/common/modules/widgets/types/widget-display-type';
@@ -61,10 +57,9 @@ interface ChartData {
 const props = defineProps<WidgetProps>();
 const emit = defineEmits<WidgetEmit>();
 
-const { keys, api } = useWidgetFormQuery({
-    widgetId: computed(() => props.widgetId),
-    preventLoad: true,
-});
+const { data: dataTable, isFetching: dataTableLoading } = useWidgetDataTableQuery(
+    computed(() => props.dataTableId),
+);
 
 const { dateRange } = useWidgetDateRange({
     dateRangeFieldValue: computed(() => (props.widgetOptions?.dateRange?.value as DateRangeValue)),
@@ -74,7 +69,6 @@ const { dateRange } = useWidgetDateRange({
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    dataTable: undefined as DataTableModel|undefined,
 
     data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
     chart: null as EChartsType | null,
@@ -126,7 +120,6 @@ const state = reactive({
         const _dateFormat = (props.widgetOptions?.dateFormat?.value as DateFormatValue)?.format || 'MMM DD, YYYY';
         return DATE_FORMAT?.[_dateFormat]?.[widgetOptionsState.granularityInfo?.granularity];
     }),
-    dataTableLoading: false,
 });
 
 const widgetOptionsState = reactive({
@@ -140,35 +133,9 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const fetchWidgetData = async (params: WidgetLoadParams): Promise<WidgetLoadResponse> => {
-    const defaultFetcher = state.isPrivateWidget
-        ? api.privateWidgetAPI.load
-        : api.publicWidgetAPI.load;
-    const res = await defaultFetcher(params);
-    return res;
-};
-
-const queryKey = computed(() => [
-    ...(state.isPrivateWidget ? keys.privateWidgetLoadQueryKey.value : keys.publicWidgetLoadQueryKey.value),
-    props.dashboardId,
-    props.widgetId,
-    props.widgetName,
-    {
-        start: dateRange.value.start,
-        end: dateRange.value.end,
-        granularity: widgetOptionsState.granularityInfo?.granularity,
-        dataTableId: props.dataTableId,
-        // dataTableOptions: normalizeAndSerializeDataTableOptions(state.dataTable?.options || {}),
-        // dataTables: normalizeAndSerializeDataTableOptions((props.dataTables || []).map((d) => d?.options || {})),
-        groupBy: widgetOptionsState.categoryByInfo?.data,
-        count: widgetOptionsState.categoryByInfo?.count,
-        vars: normalizeAndSerializeVars(props.dashboardVars),
-    },
-]);
-
-const queryResult = useQuery({
-    queryKey,
-    queryFn: () => fetchWidgetData({
+const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+    widgetId: computed(() => props.widgetId),
+    params: computed(() => ({
         widget_id: props.widgetId,
         granularity: widgetOptionsState.granularityInfo?.granularity,
         group_by: widgetOptionsState.categoryByInfo?.data ? [widgetOptionsState.categoryByInfo?.data as string] : [],
@@ -176,14 +143,23 @@ const queryResult = useQuery({
         page: { start: 0, limit: widgetOptionsState.categoryByInfo?.count ?? 0 },
         vars: props.dashboardVars,
         ...getWidgetLoadApiQueryDateRange(widgetOptionsState.granularityInfo?.granularity, dateRange.value),
-    }),
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!state.dataTable),
+    })),
+    additionalDeps: computed(() => ({
+        widgetName: props.widgetName,
+        dataTableId: props.dataTableId,
+    })),
+});
+
+const queryResult = useQuery({
+    queryKey,
+    queryFn,
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value),
     staleTime: WIDGET_LOAD_STALE_TIME,
 });
 
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || state.dataTableLoading);
-const errorMessage = computed<string>(() => {
-    if (!state.dataTable) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE');
+const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
+const errorMessage = computed<string|undefined>(() => {
+    if (!dataTable.value) return i18n.t('COMMON.WIDGETS.NO_DATA_TABLE_ERROR_MESSAGE') as string;
     return queryResult.error?.value?.message;
 });
 
@@ -235,7 +211,7 @@ watch([() => state.chartData, () => chartContext.value], ([, chartCtx]) => {
         state.chart.setOption(state.chartOptions, true);
     }
 });
-watch([() => state.data, () => props.widgetOptions, () => state.dataTable], ([newData,, _dataTable]) => {
+watch([() => state.data, () => props.widgetOptions, dataTable], ([newData,, _dataTable]) => {
     if (!_dataTable) return;
     drawChart(newData);
 }, { immediate: true });
@@ -244,20 +220,6 @@ useResizeObserver(chartContext, throttle(() => {
     state.chart?.resize();
 }, 500));
 
-watch(() => props.dataTableId, async (newDataTableId) => {
-    if (!newDataTableId) return;
-    state.dataTableLoading = true;
-    const fetcher = state.isPrivateWidget
-        ? api.privateDataTableAPI.get
-        : api.publicDataTableAPI.get;
-    try {
-        state.dataTable = await fetcher({ data_table_id: newDataTableId });
-    } catch (e) {
-        ErrorHandler.handleError(e);
-    } finally {
-        state.dataTableLoading = false;
-    }
-}, { immediate: true });
 defineExpose<WidgetExpose>({
     loadWidget: () => {
         queryResult.refetch();
diff --git a/apps/web/src/common/modules/widgets/types/widget-model.ts b/apps/web/src/common/modules/widgets/types/widget-model.ts
index 09ecb628ca..1b6b7f937f 100644
--- a/apps/web/src/common/modules/widgets/types/widget-model.ts
+++ b/apps/web/src/common/modules/widgets/types/widget-model.ts
@@ -10,7 +10,7 @@ export type DataTableState = 'AVAILABLE' | 'UNAVAILABLE';
 
 export type DataTableSourceType = typeof DATA_SOURCE_DOMAIN[keyof typeof DATA_SOURCE_DOMAIN];
 export type DataTableOperator = typeof DATA_TABLE_OPERATOR[keyof typeof DATA_TABLE_OPERATOR];
-export type DataTableDataType = keyof typeof DATA_TABLE_TYPE;
+export type DataTableDataType = typeof DATA_TABLE_TYPE[keyof typeof DATA_TABLE_TYPE];
 export type AdditionalLabels = Record<string, string>;
 export interface DataTableGroupByInfo {
     key:string;
diff --git a/apps/web/src/query/query-key/__tests__/use-service-query-key.test.ts b/apps/web/src/query/query-key/__tests__/use-service-query-key.test.ts
index a610828907..3bfba0d41b 100644
--- a/apps/web/src/query/query-key/__tests__/use-service-query-key.test.ts
+++ b/apps/web/src/query/query-key/__tests__/use-service-query-key.test.ts
@@ -4,7 +4,7 @@ import {
     describe, it, expect, vi,
 } from 'vitest';
 
-import { _useServiceQueryKey } from '../use-service-query-key';
+import { useServiceQueryKey } from '../use-service-query-key';
 
 // Mock useQueryKeyAppContext
 vi.mock('@/query/query-key/_composable/use-app-context-query-key', () => ({
@@ -13,9 +13,9 @@ vi.mock('@/query/query-key/_composable/use-app-context-query-key', () => ({
     }),
 }));
 
-describe('_useServiceQueryKey', () => {
+describe('useServiceQueryKey', () => {
     it('should generate correct query key structure for basic usage', () => {
-        const { key } = _useServiceQueryKey(
+        const { key } = useServiceQueryKey(
             'dashboard',
             'public-data-table',
             'list',
@@ -40,7 +40,7 @@ describe('_useServiceQueryKey', () => {
     });
 
     it('should generate correct query key structure with contextKey', () => {
-        const { key } = _useServiceQueryKey(
+        const { key } = useServiceQueryKey(
             'dashboard',
             'public-data-table',
             'get',
@@ -69,7 +69,7 @@ describe('_useServiceQueryKey', () => {
         const params = computed(() => ({ id: 'table-123' }));
         const contextKey = computed(() => 'table-123');
 
-        const { key } = _useServiceQueryKey(
+        const { key } = useServiceQueryKey(
             'dashboard',
             'public-data-table',
             'get',
@@ -95,7 +95,7 @@ describe('_useServiceQueryKey', () => {
     });
 
     it('should handle function getters correctly', () => {
-        const { key } = _useServiceQueryKey(
+        const { key } = useServiceQueryKey(
             'dashboard',
             'public-data-table',
             'get',
@@ -124,14 +124,14 @@ describe('_useServiceQueryKey', () => {
         const params = computed(() => ({ id: 'table-123' }));
         const contextKey = computed(() => 'table-123');
 
-        const { key: key1 } = _useServiceQueryKey(
+        const { key: key1 } = useServiceQueryKey(
             'dashboard',
             'public-data-table',
             'get',
             { contextKey, params },
         );
 
-        const { key: key2 } = _useServiceQueryKey(
+        const { key: key2 } = useServiceQueryKey(
             'dashboard',
             'public-data-table',
             'get',
@@ -155,7 +155,7 @@ describe('_useServiceQueryKey', () => {
     });
 
     it('should handle withSuffix correctly', () => {
-        const { withSuffix } = _useServiceQueryKey(
+        const { withSuffix } = useServiceQueryKey(
             'dashboard',
             'public-data-table',
             'load',
diff --git a/apps/web/src/query/query-key/use-service-query-key.md b/apps/web/src/query/query-key/use-service-query-key.md
index 4714b1e55e..8d28558cfa 100644
--- a/apps/web/src/query/query-key/use-service-query-key.md
+++ b/apps/web/src/query/query-key/use-service-query-key.md
@@ -34,7 +34,7 @@ This predictable structure allows for precise cache management and query invalid
 ```typescript
 interface UseServiceQueryKeyOptions<T extends object> {
   contextKey?: _MaybeRefOrGetter<ContextKeyType>;  // string | unknown[] | object
-  params?: ComputedRef<T>;
+  params?: _MaybeRefOrGetter<T>;
 }
 ```
 
@@ -43,7 +43,7 @@ interface UseServiceQueryKeyOptions<T extends object> {
 ```typescript
 interface UseServiceQueryKeyResult<T> {
   key: ComputedRef<QueryKeyArray>;    // full query key
-  params?: Readonly<T>;            // parameters
+  params: ComputedRef<T>;            // parameters
   withSuffix: (arg: ContextKeyType) => QueryKeyArray;  // dynamic namespace builder
 }
 ```
@@ -158,7 +158,7 @@ const { key, params } = useServiceQueryKey(
 // ✅ Use params from useServiceQueryKey
 const { data } = useQuery({
     queryKey: key,
-    queryFn: () => publicDataTableAPI.list(params)
+    queryFn: () => publicDataTableAPI.list(params.value)
 });
 
 // ❌ Not Recommended: Creating params separately
diff --git a/apps/web/src/query/query-key/use-service-query-key.ts b/apps/web/src/query/query-key/use-service-query-key.ts
index 90e8fcbce7..959900f30c 100644
--- a/apps/web/src/query/query-key/use-service-query-key.ts
+++ b/apps/web/src/query/query-key/use-service-query-key.ts
@@ -47,11 +47,11 @@ type ContextKeyType = string|unknown[]|object;
 
 type UseServiceQueryKeyResult<T extends object = object> = {
     key: ComputedRef<QueryKeyArray>;
-    params: T extends undefined ? undefined : Readonly<T>;
+    params: ComputedRef<T>;
     withSuffix: (arg: ContextKeyType) => QueryKeyArray;
 };
 
-export const _useServiceQueryKey = <S extends ServiceName, R extends ResourceName<S>, V extends Verb<S, R>, T extends object = object>(
+export const useServiceQueryKey = <S extends ServiceName, R extends ResourceName<S>, V extends Verb<S, R>, T extends object = object>(
     service: S,
     resource: R,
     verb: V,
@@ -83,7 +83,6 @@ export const _useServiceQueryKey = <S extends ServiceName, R extends ResourceNam
 
     const queryKey = computed(() => {
         const resolvedParams = toValue(params);
-
         return [
             ...queryKeyAppContext.value,
             service, resource, verb,
@@ -101,9 +100,10 @@ export const _useServiceQueryKey = <S extends ServiceName, R extends ResourceNam
     const suffixCache = new WeakMap<object, QueryKeyArray>();
     return {
         key: queryKey,
-        params: params
-            ? Object.freeze(toValue(params)) as Readonly<T>
-            : undefined,
+        params: computed(() => {
+            const resolvedParams = toValue(params);
+            return resolvedParams;
+        }),
         withSuffix: (arg) => {
             if (typeof arg === 'object' && arg !== null) {
                 const cached = suffixCache.get(arg);
diff --git a/apps/web/src/services/dashboards/DashboardsLSB.vue b/apps/web/src/services/dashboards/DashboardsLSB.vue
index be0ce60f91..5fa2365968 100644
--- a/apps/web/src/services/dashboards/DashboardsLSB.vue
+++ b/apps/web/src/services/dashboards/DashboardsLSB.vue
@@ -32,6 +32,7 @@ import { MENU_ITEM_TYPE } from '@/common/modules/navigations/lsb/type';
 import { gray } from '@/styles/colors';
 
 import DashboardLSBTree from '@/services/dashboards/components/dashboard-main/DashboardLSBTree.vue';
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
@@ -50,9 +51,11 @@ const route = useRoute();
 const {
     publicDashboardList,
     privateDashboardList,
+} = useDashboardQuery();
+const {
     publicFolderList,
     privateFolderList,
-} = useDashboardQuery();
+} = useDashboardFolderQuery();
 
 const storeState = reactive({
     isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
diff --git a/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue b/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue
index d91c83573e..da243f1dce 100644
--- a/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue
+++ b/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue
@@ -2,7 +2,7 @@
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import type { PrivateDashboardDeleteParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/delete';
 import type { PublicDashboardDeleteParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/delete';
@@ -45,8 +45,8 @@ const router = useRouter();
 const {
     api,
     keys,
-    queryClient,
 } = useDashboardQuery();
+const queryClient = useQueryClient();
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue b/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue
index 1fa3186799..97b8392b15 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue
@@ -4,6 +4,7 @@ import {
 } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
+import { useQueryClient } from '@tanstack/vue-query';
 import { isEmpty } from 'lodash';
 
 import {
@@ -54,8 +55,8 @@ const {
     privateDashboardList,
     keys,
     api,
-    queryClient,
 } = useDashboardQuery();
+const queryClient = useQueryClient();
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue b/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue
index f67c5ae38c..34c95473d3 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue
@@ -4,7 +4,7 @@ import {
 } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import {
     PI, PFieldGroup, PTextInput, PSelectDropdown,
@@ -29,6 +29,7 @@ import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 import DashboardCreateScopeForm from '@/services/dashboards/components/dashboard-create/DashboardCreateScopeForm.vue';
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import {
     DASHBOARD_VARS_SCHEMA_PRESET,
@@ -55,12 +56,14 @@ const userStore = useUserStore();
 const {
     publicDashboardList,
     privateDashboardList,
-    publicFolderList,
-    privateFolderList,
     keys,
     api,
-    queryClient,
 } = useDashboardQuery();
+const {
+    publicFolderList,
+    privateFolderList,
+} = useDashboardFolderQuery();
+const queryClient = useQueryClient();
 
 const getDashboardNameList = (dashboardType: DashboardType) => {
     if (dashboardType === 'PRIVATE') {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardCloneModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardCloneModal.vue
index c8cf623868..af97f93af3 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardCloneModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardCloneModal.vue
@@ -2,7 +2,7 @@
 import { computed, reactive, watch } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import {
     PButtonModal, PFieldGroup, PTextInput, PToggleButton,
@@ -56,8 +56,8 @@ const {
     privateDashboardList,
     keys,
     api,
-    queryClient,
 } = useDashboardQuery();
+const queryClient = useQueryClient();
 
 const router = useRouter();
 const appContextStore = useAppContextStore();
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
index 10dc60cb80..1fc3712ea1 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
@@ -19,10 +19,10 @@ import { gray } from '@/styles/colors';
 import DashboardControlButtons from '@/services/dashboards/components/dashboard-detail/DashboardControlButtons.vue';
 import DashboardLabelsButton from '@/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue';
 import { useDashboardControlMenuItems } from '@/services/dashboards/composables/use-dashboard-control-menu-items';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
 
@@ -32,8 +32,6 @@ interface Props {
     templateName?: string;
 }
 const props = defineProps<Props>();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
 const dashboardPageControlStore = useDashboardPageControlStore();
 const appContextStore = useAppContextStore();
 const userStore = useUserStore();
@@ -42,11 +40,14 @@ const userStore = useUserStore();
 const {
     publicDashboardList,
     privateDashboardList,
+} = useDashboardQuery();
+const {
     publicFolderList,
     privateFolderList,
-} = useDashboardQuery();
+} = useDashboardFolderQuery();
+
 
-const { dashboard } = useDashboardDetailQuery({
+const { dashboard } = useDashboardGetQuery({
     dashboardId: computed(() => props.dashboardId),
 });
 const { isManageable } = useDashboardManageable({
@@ -93,7 +94,7 @@ const state = reactive({
         return 'indigo100';
     }),
     badgeText: computed(() => {
-        if (dashboardDetailState.dashboardId?.startsWith('private')) return i18n.t('DASHBOARDS.ALL_DASHBOARDS.PRIVATE');
+        if (props.dashboardId?.startsWith('private')) return i18n.t('DASHBOARDS.ALL_DASHBOARDS.PRIVATE');
         if (state.isSharedDashboard) {
             if (storeState.isAdminMode) {
                 if (dashboard.value?.scope === 'PROJECT') {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardFolderSingleMoveModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardFolderSingleMoveModal.vue
index b619728e5e..be1ebd481e 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardFolderSingleMoveModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardFolderSingleMoveModal.vue
@@ -3,7 +3,7 @@ import {
     computed, reactive, watch,
 } from 'vue';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import {
     PButtonModal, PFieldGroup, PI, PSelectDropdown,
@@ -27,6 +27,7 @@ import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
@@ -48,13 +49,15 @@ const appContextStore = useAppContextStore();
 const dashboardPageControlStore = useDashboardPageControlStore();
 
 /* Query */
+const queryClient = useQueryClient();
 const {
-    publicFolderList,
-    privateFolderList,
     keys,
     api,
-    queryClient,
 } = useDashboardQuery();
+const {
+    publicFolderList,
+    privateFolderList,
+} = useDashboardFolderQuery();
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue
index be4116fbc2..a086f0d9c2 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue
@@ -2,6 +2,7 @@
 
 
 import { computed, reactive, watch } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 import {
     cloneDeep, flattenDeep, isEqual, xor,
@@ -20,8 +21,7 @@ import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-typ
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 
 interface Props {
@@ -32,11 +32,13 @@ interface Props {
 
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+
+
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 
 const state = reactive({
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue
index b81f7fea75..5eabc185cd 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue
@@ -4,6 +4,7 @@ import {
     computed, reactive, watch,
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
+import { useRoute } from 'vue-router/composables';
 
 import { cloneDeep, isEqual } from 'lodash';
 
@@ -21,8 +22,7 @@ import { i18n } from '@/translations';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 interface Props {
     variable: DashboardGlobalVariable;
@@ -32,10 +32,10 @@ interface Props {
 
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 
 const state = reactive({
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue
index a1b75dd76c..e66dbfc921 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue
@@ -3,6 +3,7 @@
 import {
     computed, reactive, watch,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 import { cloneDeep, debounce, isEqual } from 'lodash';
 
@@ -16,8 +17,7 @@ import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-typ
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 interface Props {
     variable: DashboardGlobalVariable;
@@ -27,10 +27,10 @@ interface Props {
 
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 
 const state = reactive({
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue
index 4f3b24cac9..7dad113689 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue
@@ -2,6 +2,7 @@
 
 
 import { computed, reactive, watch } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 import {
     cloneDeep, flattenDeep, isEqual, xor,
@@ -36,8 +37,7 @@ import { useProxyValue } from '@/common/composables/proxy-state';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
 import { getWorkspaceInfo } from '@/services/advanced/composables/refined-table-data';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 interface Props {
     variable: DashboardGlobalVariable;
@@ -49,10 +49,10 @@ const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
 const userWorkspaceStore = useUserWorkspaceStore();
 const workspaceStoreGetters = userWorkspaceStore.getters;
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 
 const storeState = reactive({
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue
index 13f938bba7..50e106b880 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue
@@ -3,6 +3,7 @@
 import {
     computed, reactive, watch,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 import { cloneDeep, isEqual } from 'lodash';
 
@@ -17,8 +18,7 @@ import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-typ
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 interface Props {
     variable: DashboardGlobalVariable;
@@ -28,10 +28,10 @@ interface Props {
 
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 const state = reactive({
     variable: computed(() => {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue
index 6d651cdbc1..c75bb12d9a 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue
@@ -5,6 +5,7 @@ import {
     computed,
     reactive, watch,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 import {
     PFieldGroup, PIconButton, PLabel, PTextInput,
@@ -14,8 +15,7 @@ import { i18n } from '@/translations';
 
 import { useFormValidator } from '@/common/composables/form-validator';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 
 interface Props {
@@ -41,11 +41,10 @@ const {
     },
 });
 
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
-
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 
 const state = reactive({
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue
index 3e0a637895..927dfabbe4 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue
@@ -2,7 +2,7 @@
 import { onClickOutside } from '@vueuse/core';
 import { computed, reactive, ref } from 'vue';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import { PButton, PBadge, PPopover } from '@cloudforet/mirinae';
 
@@ -12,9 +12,8 @@ import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashbo
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import DashboardLabels from '@/services/dashboards/components/dashboard-detail/DashboardLabels.vue';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
 
@@ -24,20 +23,18 @@ interface Props {
 const props = defineProps<Props>();
 
 const labelPopoverRef = ref<HTMLElement|null>(null);
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
 /* Query */
 const {
     dashboard,
     fetcher,
     keys,
-    queryClient,
-} = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+} = useDashboardGetQuery({
+    dashboardId: computed(() => props.dashboardId),
 });
 const { isManageable } = useDashboardManageable({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+    dashboardId: computed(() => props.dashboardId),
 });
+const queryClient = useQueryClient();
 const state = reactive({
     visible: false,
     dashboardLabels: computed<string[]>(() => dashboard.value?.labels || []),
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
index 015e796ff9..a1abf649b3 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
@@ -1,7 +1,8 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
 
 import {
@@ -24,37 +25,41 @@ import LSBCollapsibleMenuItem from '@/common/modules/navigations/lsb/modules/LSB
 
 import DashboardManageVariableImportModalTree
     from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
-
 
 
 interface Props {
     visible: boolean;
 }
 const appContextStore = useAppContextStore();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
 const userStore = useUserStore();
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:visible', value: boolean): void;}>();
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
+
+
 /* Query */
 const {
     publicDashboardList,
     privateDashboardList,
+} = useDashboardQuery();
+const {
     publicFolderList,
     privateFolderList,
-} = useDashboardQuery();
+} = useDashboardFolderQuery();
+
 const {
     dashboard,
     fetcher,
     keys,
-    queryClient,
-} = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+} = useDashboardGetQuery({
+    dashboardId,
 });
+const queryClient = useQueryClient();
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
@@ -62,7 +67,7 @@ const storeState = reactive({
 
 const state = reactive({
     proxyVisible: useProxyValue<boolean>('visible', props, emit),
-    currentDashboardId: computed<string>(() => dashboardDetailState.dashboardId || ''),
+    currentDashboardId: computed<string>(() => dashboardId.value || ''),
     currentDashboardVariables: computed<DashboardGlobalVariable[]>(() => Object.values(dashboard.value?.vars_schema?.properties ?? {})),
     keyword: '',
     selectedDashboardId: '' as string|undefined,
@@ -168,7 +173,7 @@ watch(() => state.selectedDashboardId, () => {
         <template #body>
             <div class="import-contents">
                 <div class="left-dashboard-variable-tree-contents">
-                    <l-s-b-collapsible-menu-item v-if="state.publicDashboardItems.length || publicFolderItems.length"
+                    <l-s-b-collapsible-menu-item v-if="state.publicDashboardItems.length || state.publicFolderItems.length"
                                                  class="category-menu-item mt-1"
                                                  :item="{
                                                      type: 'collapsible',
@@ -186,7 +191,7 @@ watch(() => state.selectedDashboardId, () => {
                             />
                         </template>
                     </l-s-b-collapsible-menu-item>
-                    <l-s-b-collapsible-menu-item v-if="state.privateDashboardItems.length || privateFolderItems.length"
+                    <l-s-b-collapsible-menu-item v-if="state.privateDashboardItems.length || state.privateFolderItems.length"
                                                  class="category-menu-item mt-1"
                                                  :item="{
                                                      type: 'collapsible',
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
index 5bcf99907c..bebb67c496 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
@@ -1,9 +1,9 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
-import { useRouter } from 'vue-router/composables';
+import { useRoute, useRouter } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
 
 import {
@@ -31,14 +31,13 @@ import DashboardManageVariableImportModal
     from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue';
 import DashboardVariablesFormModal
     from '@/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import {
     DASHBOARD_VARS_SCHEMA_PRESET,
 } from '@/services/dashboards/constants/dashboard-vars-schema-preset';
 import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
 
@@ -55,22 +54,22 @@ interface Props {
     visible: boolean;
 }
 const props = defineProps<Props>();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
 const userStore = useUserStore();
 const appContextStore = useAppContextStore();
 const router = useRouter();
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 
 /* Query */
 const {
     dashboard,
     keys,
     fetcher,
-    queryClient,
     isLoading,
-} = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+} = useDashboardGetQuery({
+    dashboardId,
 });
+const queryClient = useQueryClient();
 
 
 const state = reactive({
@@ -136,27 +135,27 @@ const isPresetVarsSchemaProperty = (key: string): boolean => {
 };
 
 /* Api */
-const deleteDashboardVarsSchema = async (dashboardId: string, variableKey: string) => {
+const deleteDashboardVarsSchema = async (_dashboardId: string, variableKey: string) => {
     const _varsSchemaProperties = cloneDeep(state.dashboardVarsSchemaProperties);
     delete _varsSchemaProperties[variableKey];
     const _vars = cloneDeep(dashboard.value?.vars || {});
     delete _vars[variableKey];
     mutate({
-        dashboard_id: dashboardId,
+        dashboard_id: _dashboardId,
         vars_schema: {
             properties: _varsSchemaProperties,
         },
         vars: _vars,
     });
 };
-const cloneDashboardVarsSchema = async (dashboardId: string, variableKey: string) => {
+const cloneDashboardVarsSchema = async (_dashboardId: string, variableKey: string) => {
     const _clonedProperty = cloneDeep(state.dashboardVarsSchemaProperties[variableKey]);
     const _varsNameList: string[] = Object.values(state.dashboardVarsSchemaProperties).map((d) => d.name);
     const _varsKeyList: string[] = Object.values(state.dashboardVarsSchemaProperties).map((d) => d.key);
     _clonedProperty.key = getClonedName(_varsKeyList, _clonedProperty.key, 'clone_');
     _clonedProperty.name = getClonedName(_varsNameList, _clonedProperty.name);
     mutate({
-        dashboard_id: dashboardId,
+        dashboard_id: _dashboardId,
         vars_schema: {
             properties: {
                 ...state.dashboardVarsSchemaProperties,
@@ -169,11 +168,11 @@ const cloneDashboardVarsSchema = async (dashboardId: string, variableKey: string
         },
     });
 };
-const updateUseDashboardVarsSchema = (dashboardId: string, variableKey: string, use: boolean) => {
+const updateUseDashboardVarsSchema = (_dashboardId: string, variableKey: string, use: boolean) => {
     const _vars = cloneDeep(dashboard.value?.vars || {});
     delete _vars[variableKey];
     mutate({
-        dashboard_id: dashboardId,
+        dashboard_id: _dashboardId,
         vars_schema: {
             properties: {
                 ...state.dashboardVarsSchemaProperties,
@@ -230,14 +229,14 @@ const handleClickEditButton = (variableKey: string) => {
     state.formModalVisible = true;
 };
 const handleClickCloneButton = (variableKey: string) => {
-    if (!dashboardDetailState.dashboardId) return;
+    if (!dashboardId.value) return;
     state.actionType = 'CLONE';
-    cloneDashboardVarsSchema(dashboardDetailState.dashboardId, variableKey);
+    cloneDashboardVarsSchema(dashboardId.value, variableKey);
 };
 const handleToggleUse = (variableKey: string, val: boolean) => {
-    if (!dashboardDetailState.dashboardId) return;
+    if (!dashboardId.value) return;
     state.actionType = 'UPDATE';
-    updateUseDashboardVarsSchema(dashboardDetailState.dashboardId, variableKey, val);
+    updateUseDashboardVarsSchema(dashboardId.value, variableKey, val);
 };
 const handleCloseOverlay = () => {
     const dashboardDetailRouteName = state.isAdminMode
@@ -245,13 +244,13 @@ const handleCloseOverlay = () => {
         : DASHBOARDS_ROUTE.DETAIL._NAME;
     router.replace({
         name: dashboardDetailRouteName,
-        params: { dashboardId: dashboardDetailState.dashboardId ?? '' },
+        params: { dashboardId: dashboardId.value ?? '' },
     }).catch(() => {});
 };
 const handleConfirmDelete = () => {
-    if (!dashboardDetailState.dashboardId || !state.selectedVariableKey) return;
+    if (!dashboardId.value || !state.selectedVariableKey) return;
     state.actionType = 'DELETE';
-    deleteDashboardVarsSchema(dashboardDetailState.dashboardId, state.selectedVariableKey);
+    deleteDashboardVarsSchema(dashboardId.value, state.selectedVariableKey);
 };
 </script>
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue
index 085f0e4e73..d209a3af19 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardNameEditModal.vue
@@ -4,7 +4,7 @@ import {
 } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
 
@@ -17,7 +17,7 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 
 
@@ -39,12 +39,12 @@ const {
     publicDashboardList,
     privateDashboardList,
     keys,
-    queryClient,
 } = useDashboardQuery();
+const queryClient = useQueryClient();
 const {
     fetcher,
     keys: dashboardDetailKeys,
-} = useDashboardDetailQuery({
+} = useDashboardGetQuery({
     dashboardId: computed(() => props.dashboardId),
 });
 const route = useRoute();
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue
index 6ae95754cb..078f7f4356 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue
@@ -5,7 +5,7 @@ import {
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import { PIconButton, PSelectDropdown } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
@@ -16,7 +16,7 @@ import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dash
 import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { i18n } from '@/translations';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
@@ -41,12 +41,13 @@ const dashboardDetailState = dashboardDetailStore.state;
 
 /* Query */
 const {
-    dashboard, keys, fetcher, queryClient,
-} = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+    dashboard, keys, fetcher,
+} = useDashboardGetQuery({
+    dashboardId: computed(() => props.dashboardId),
 });
+const queryClient = useQueryClient();
 const { isManageable } = useDashboardManageable({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+    dashboardId: computed(() => props.dashboardId),
 });
 
 const state = reactive({
@@ -105,7 +106,7 @@ const handleSelectRefreshIntervalOption = (option) => {
 
     if (isManageable.value) {
         mutate({
-            dashboard_id: dashboardDetailState.dashboardId,
+            dashboard_id: props.dashboardId,
             options: {
                 ...(dashboard.value?.options || {}),
                 refresh_interval_option: option,
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue
index b85dad62a9..e2c79f0ebf 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue
@@ -3,9 +3,10 @@ import {
     computed,
     onUnmounted, reactive, watch,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 import draggable from 'vuedraggable';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import {
     PI, PButton,
@@ -21,25 +22,28 @@ import { useDisplayStore } from '@/store/display/display-store';
 import { WIDGET_COMPONENT_ICON_MAP } from '@/common/modules/widgets/_constants/widget-components-constant';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
-
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query';
 
 type WidgetModel = PublicWidgetModel | PrivateWidgetModel;
 const displayStore = useDisplayStore();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 
 /* Query */
 const {
     dashboard,
-    widgetList,
     keys,
     fetcher,
-    queryClient,
-} = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+} = useDashboardGetQuery({
+    dashboardId,
+});
+const {
+    widgetList,
+} = useDashboardWidgetListQuery({
+    dashboardId,
 });
+const queryClient = useQueryClient();
 const state = reactive({
     widgetList: computed<WidgetModel[]>(() => {
         const results: WidgetModel[] = [];
@@ -61,7 +65,7 @@ const handleChangeWidgetOrder = () => {
     const _widgetIdList = state.widgetList.map((w) => w.widget_id);
     const _updatedLayouts = [{ widgets: _widgetIdList }];
     updateDashboard({
-        dashboard_id: dashboardDetailState.dashboardId || '',
+        dashboard_id: dashboardId.value || '',
         layouts: _updatedLayouts,
     });
 };
@@ -84,7 +88,7 @@ const { mutate: updateDashboard } = useMutation(
     },
 );
 
-watch(() => dashboardDetailState.dashboardId, (after, before) => {
+watch(() => dashboardId.value, (after, before) => {
     if (after !== before) {
         displayStore.setVisibleSidebar(false);
     }
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
index a76cba3710..92708e0b85 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
@@ -17,13 +17,14 @@ import { copyAnyData } from '@/lib/helper/copy-helper';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query';
 import { getSharedDashboardLayouts } from '@/services/dashboards/helpers/dashboard-share-helper';
 import type { SharedDashboardInfo } from '@/services/dashboards/types/shared-dashboard-type';
 
 
 
+
 type DataTableModel = PublicDataTableModel | PrivateDataTableModel;
 interface Props {
     visible: boolean;
@@ -47,7 +48,7 @@ const {
 } = useDashboardQuery();
 const {
     widgetList,
-} = useDashboardDetailQuery({
+} = useDashboardWidgetListQuery({
     dashboardId: computed(() => props.dashboardId),
 });
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue
index 4f01e9ae5e..bc61c8d69e 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue
@@ -2,8 +2,9 @@
 import {
     computed, reactive, watch,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import { cloneDeep, range } from 'lodash';
 
@@ -18,7 +19,7 @@ import { i18n } from '@/translations';
 import { useI18nDayjs } from '@/common/composables/i18n-dayjs';
 
 import DashboardToolsetDateCustomModal from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateCustomModal.vue';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
@@ -33,18 +34,20 @@ const props = withDefaults(defineProps<Props>(), {
 const { i18nDayjs } = useI18nDayjs();
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 
 /* Query */
 const {
     dashboard,
     fetcher,
     keys,
-    queryClient,
-} = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+} = useDashboardGetQuery({
+    dashboardId,
 });
+const queryClient = useQueryClient();
 const { isManageable } = useDashboardManageable({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+    dashboardId,
 });
 const state = reactive({
     monthMenuItems: computed<MenuItem[]>(() => {
@@ -114,7 +117,7 @@ const handleSelectMonthMenuItem = (selected: string) => {
 
     if (isManageable.value && !props.widgetMode) {
         mutate({
-            dashboard_id: dashboardDetailState.dashboardId,
+            dashboard_id: dashboardId.value,
             options: {
                 ...(dashboard.value?.options || {}),
                 date_range: state.selectedDateRange,
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
index 8185722b9a..ec22ea9c1b 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
@@ -1,7 +1,8 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep, isEmpty } from 'lodash';
 
 import {
@@ -26,8 +27,7 @@ import DashboardVariablesFormDynamic
     from '@/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue';
 import DashboardVariablesFormManual
     from '@/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 type ManualVariableData = Omit<ManualVariable, 'management'|'key'|'name'|'method'>;
 type DynamicVariableData = Omit<DashboardGlobalVariable, 'management'|'key'|'name'|'method'>;
@@ -49,18 +49,18 @@ const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
 }>();
 
 const userStore = useUserStore();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 
 /* Query */
 const {
     dashboard,
     fetcher,
     keys,
-    queryClient,
-} = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+} = useDashboardGetQuery({
+    dashboardId,
 });
+const queryClient = useQueryClient();
 
 const state = reactive({
     proxyVisible: useProxyValue('visible', props, emit),
@@ -175,9 +175,9 @@ const resetState = () => {
 };
 
 /* Api */
-const createDashboardVarsSchema = (dashboardId: string) => {
+const createDashboardVarsSchema = (_dashboardId: string) => {
     mutate({
-        dashboard_id: dashboardId,
+        dashboard_id: _dashboardId,
         vars_schema: {
             properties: {
                 ...state.dashboardVarsSchemaProperties,
@@ -190,7 +190,7 @@ const createDashboardVarsSchema = (dashboardId: string) => {
         },
     });
 };
-const updateDashboardVarsSchema = (dashboardId: string) => {
+const updateDashboardVarsSchema = (_dashboardId: string) => {
     const _originalKey = state.targetVariable?.key;
     if (!_originalKey) return;
     const _newVarsSchemaProperties = cloneDeep(state.dashboardVarsSchemaProperties);
@@ -203,7 +203,7 @@ const updateDashboardVarsSchema = (dashboardId: string) => {
     const _vars = cloneDeep(dashboard.value?.vars || {});
     delete _vars[_originalKey];
     mutate({
-        dashboard_id: dashboardId,
+        dashboard_id: _dashboardId,
         vars_schema: {
             properties: _newVarsSchemaProperties,
         },
@@ -238,11 +238,11 @@ const { mutate, isPending: loading } = useMutation(
 
 /* Event */
 const handleConfirm = async () => {
-    if (!dashboardDetailState.dashboardId) return;
+    if (!dashboardId.value) return;
     if (props.modalType === 'CREATE') {
-        createDashboardVarsSchema(dashboardDetailState.dashboardId);
+        createDashboardVarsSchema(dashboardId.value);
     } else {
-        updateDashboardVarsSchema(dashboardDetailState.dashboardId);
+        updateDashboardVarsSchema(dashboardId.value);
     }
 };
 const handleClickClose = () => {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
index 09396a8515..0b515eb8a8 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
@@ -4,9 +4,9 @@ import {
     computed,
     reactive, ref, toRef, toRefs, watch,
 } from 'vue';
-import { useRouter } from 'vue-router/composables';
+import { useRoute, useRouter } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import {
     cloneDeep, debounce,
 } from 'lodash';
@@ -27,12 +27,11 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { MANAGE_VARIABLES_HASH_NAME } from '@/services/dashboards/constants/manage-variable-overlay-constant';
 import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 interface VariableMenuItem extends MenuItem {
     use?: boolean;
@@ -44,21 +43,20 @@ interface Props {
 }
 
 const props = defineProps<Props>();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
 const appContextStore = useAppContextStore();
 const router = useRouter();
-
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 
 /* Query */
 const {
     dashboard,
     fetcher,
     keys,
-    queryClient,
-} = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+} = useDashboardGetQuery({
+    dashboardId,
 });
+const queryClient = useQueryClient();
 const state = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     targetRef: null as HTMLElement | null,
@@ -101,7 +99,7 @@ const containerRef = ref<HTMLElement|null>(null);
 onClickOutside(containerRef, hideContextMenu);
 
 /* Api */
-const toggleUseDashboardVarsSchema = debounce((dashboardId: string, variableKey: string) => {
+const toggleUseDashboardVarsSchema = debounce((_dashboardId: string, variableKey: string) => {
     const _dashboardVarsSchemaProperties: Record<string, DashboardGlobalVariable> = cloneDeep(state.dashboardVarsSchemaProperties);
     const _use = !_dashboardVarsSchemaProperties[variableKey].use;
     const _vars = cloneDeep(dashboard.value?.vars || {});
@@ -109,7 +107,7 @@ const toggleUseDashboardVarsSchema = debounce((dashboardId: string, variableKey:
         delete _vars[variableKey];
     }
     mutate({
-        dashboard_id: dashboardId,
+        dashboard_id: _dashboardId,
         vars_schema: {
             properties: {
                 ..._dashboardVarsSchemaProperties,
@@ -157,7 +155,7 @@ const handleOpenOverlay = () => {
         : DASHBOARDS_ROUTE.DETAIL._NAME;
     router.push({
         name: dashboardDetailRouteName,
-        params: { dashboardId: dashboardDetailState.dashboardId ?? '' },
+        params: { dashboardId: dashboardId.value ?? '' },
         hash: `#${MANAGE_VARIABLES_HASH_NAME}`,
     }).catch(() => {});
 };
@@ -166,8 +164,8 @@ const handleClickButton = () => {
     else focusOnContextMenu();
 };
 const handleSelectVariable = (item: VariableMenuItem) => { // idx, isSelected
-    if (!dashboardDetailState.dashboardId || !item.name || loading.value) return;
-    toggleUseDashboardVarsSchema(dashboardDetailState.dashboardId, item.name);
+    if (!dashboardId.value || !item.name || loading.value) return;
+    toggleUseDashboardVarsSchema(dashboardId.value, item.name);
 };
 const handleUpdateSearchText = debounce((text: string) => {
     state.searchText = text;
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue
index 88a58c3b21..18877eb198 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue
@@ -18,7 +18,7 @@ import DashboardGlobalVariableFilter
 import DashboardManageVariableOverlay from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue';
 import DashboardVariablesMoreButton
     from '@/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { MANAGE_VARIABLES_HASH_NAME } from '@/services/dashboards/constants/manage-variable-overlay-constant';
 import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
@@ -39,12 +39,14 @@ const emit = defineEmits<{(e: 'update', val: { vars?: DashboardVars }): void;
 }>();
 
 const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
+
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
 const appContextStore = useAppContextStore();
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue
index 982d2a3a03..2a5e91e841 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue
@@ -3,8 +3,9 @@ import type { ComponentPublicInstance, AsyncComponent } from 'vue';
 import {
     reactive, ref, watch, computed, onBeforeUnmount,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep, debounce, flattenDeep } from 'lodash';
 
 import {
@@ -49,7 +50,7 @@ import DashboardReorderSidebar from '@/services/dashboards/components/dashboard-
 import {
     useDashboardContainerWidth,
 } from '@/services/dashboards/composables/use-dashboard-container-width';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import {
@@ -58,6 +59,8 @@ import {
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 import type { SharedDataTableInfo } from '@/services/dashboards/types/shared-dashboard-type';
 
+import { useDashboardWidgetListQuery } from '../../composables/use-dashboard-widget-list-query';
+
 
 type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 type WidgetComponent = ComponentPublicInstance<WidgetProps, WidgetExpose>;
@@ -68,6 +71,9 @@ type RefinedWidgetInfo = WidgetModel & {
     component: AsyncComponent|null;
 };
 
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
+
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailGetters = dashboardDetailStore.getters;
 const dashboardDetailState = dashboardDetailStore.state;
@@ -82,17 +88,24 @@ const { privateDataTableAPI } = usePrivateDataTableApi();
 /* Query */
 const {
     dashboard,
-    widgetList,
-    keys,
-    api,
-    isLoading,
+    keys: dashboardKeys,
+    isLoading: dashboardLoading,
     fetcher,
-    queryClient,
-} = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+} = useDashboardGetQuery({
+    dashboardId,
+});
+const {
+    keys: widgetListKeys,
+    api: widgetApi,
+    fetcher: widgetFetcher,
+    isLoading: widgetLoading,
+    widgetList,
+} = useDashboardWidgetListQuery({
+    dashboardId,
 });
+const queryClient = useQueryClient();
 const { isManageable } = useDashboardManageable({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+    dashboardId,
 });
 
 /* State */
@@ -187,16 +200,16 @@ const { mutateAsync: updateDashboard } = useMutation(
         mutationFn: fetcher.updateDashboardFn,
         onSuccess: async (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
             const isPrivate = _dashboard.dashboard_id.startsWith('private');
-            const dashboardQueryKey = isPrivate ? keys.privateDashboardGetQueryKey : keys.publicDashboardGetQueryKey;
+            const dashboardQueryKey = isPrivate ? dashboardKeys.privateDashboardGetQueryKey : dashboardKeys.publicDashboardGetQueryKey;
             await queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
         },
     },
 );
 const deleteWidgetFn = (params: PrivateWidgetDeleteParameters|PublicWidgetDeleteParameters) => {
-    const isPrivate = dashboardDetailState.dashboardId?.startsWith('private');
+    const isPrivate = dashboardId.value?.startsWith('private');
     const _fetcher = isPrivate
-        ? api.privateWidgetAPI.delete
-        : api.publicWidgetAPI.delete;
+        ? widgetApi.privateWidgetAPI.delete
+        : widgetApi.publicWidgetAPI.delete;
     return _fetcher(params);
 };
 const { mutateAsync: deleteWidget } = useMutation(
@@ -208,7 +221,7 @@ const { mutateAsync: deleteWidget } = useMutation(
             state.mountedWidgetMap = { ...state.mountedWidgetMap };
 
             const isPrivate = variables.widget_id?.startsWith('private');
-            const widgetListQueryKey = isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
+            const widgetListQueryKey = isPrivate ? widgetListKeys.privateWidgetListQueryKey : widgetListKeys.publicWidgetListQueryKey;
             queryClient.invalidateQueries({ queryKey: widgetListQueryKey.value });
         },
         onError: (e) => {
@@ -223,10 +236,10 @@ const { mutateAsync: deleteWidget } = useMutation(
 );
 
 const { mutate: updateWidgetSize } = useMutation({
-    mutationFn: fetcher.updateWidgetFn,
+    mutationFn: widgetFetcher.updateWidgetFn,
     onSuccess: (_, variables) => {
-        const isPrivate = dashboardDetailState.dashboardId?.startsWith('private');
-        const widgetListQueryKey = isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
+        const isPrivate = dashboardId.value?.startsWith('private');
+        const widgetListQueryKey = isPrivate ? widgetListKeys.privateWidgetListQueryKey : widgetListKeys.publicWidgetListQueryKey;
         queryClient.setQueryData(widgetListQueryKey.value, (oldData: ListResponse<WidgetModel>) => {
             const _updatedWidgetList = (oldData.results ?? []).map((widget) => {
                 if (widget.widget_id === variables.widget_id) {
@@ -318,21 +331,21 @@ const handleOpenWidgetOverlay = (widget: RefinedWidgetInfo, overlayType: WidgetO
     widgetGenerateStore.setShowOverlay(true);
 };
 const handleCloneWidget = async (widget: RefinedWidgetInfo) => {
-    if (!dashboardDetailState.dashboardId) return;
+    if (!dashboardId.value) return;
     const isPrivate = widget.widget_id.startsWith('private');
     const widgetCreateFetcher = isPrivate
-        ? api.privateWidgetAPI.create
-        : api.publicWidgetAPI.create;
+        ? widgetApi.privateWidgetAPI.create
+        : widgetApi.publicWidgetAPI.create;
     const widgetUpdateFetcher = isPrivate
-        ? api.privateWidgetAPI.update
-        : api.publicWidgetAPI.update;
+        ? widgetApi.privateWidgetAPI.update
+        : widgetApi.publicWidgetAPI.update;
 
     const dataTableList = await listWidgetDataTables(widget.widget_id);
     const dataTableIndex = dataTableList.findIndex((d) => d.data_table_id === widget.data_table_id);
     const refinedDataTables = getRefinedDataTables(dataTableList);
     try {
         const createdWidget = await widgetCreateFetcher({
-            dashboard_id: dashboardDetailState.dashboardId,
+            dashboard_id: dashboardId.value,
             widget_type: widget.widget_type,
             size: widget.size,
             options: {
@@ -349,7 +362,7 @@ const handleCloneWidget = async (widget: RefinedWidgetInfo) => {
             widget_id: createdWidget.widget_id,
             state: 'ACTIVE',
         });
-        const widgetListQueryKey = isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
+        const widgetListQueryKey = isPrivate ? widgetListKeys.privateWidgetListQueryKey : widgetListKeys.publicWidgetListQueryKey;
         await queryClient.setQueryData(widgetListQueryKey.value, (oldData: ListResponse<WidgetModel>) => ({
             ...oldData,
             results: [...(oldData.results || []), completedWidget],
@@ -370,7 +383,7 @@ const handleCloneWidget = async (widget: RefinedWidgetInfo) => {
             });
         }
         await updateDashboard({
-            dashboard_id: dashboardDetailState.dashboardId || '',
+            dashboard_id: dashboardId.value || '',
             layouts: _layouts,
         });
 
@@ -406,7 +419,7 @@ const handleDeleteModalConfirm = async () => {
         : undefined;
 
     await updateDashboard({
-        dashboard_id: dashboardDetailState.dashboardId || '',
+        dashboard_id: dashboardId.value || '',
         layouts: changedLayouts,
     });
     // 2. delete widget
@@ -427,7 +440,7 @@ watch(() => widgetGenerateState.showOverlay, async (showOverlay) => {
 
         // fetch widget list
         const isPrivate = dashboard.value?.dashboard_id?.startsWith('private');
-        const widgetListQueryKey = isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
+        const widgetListQueryKey = isPrivate ? widgetListKeys.privateWidgetListQueryKey : widgetListKeys.publicWidgetListQueryKey;
         await queryClient.invalidateQueries({ queryKey: widgetListQueryKey.value });
 
         state.remountWidgetId = undefined;
@@ -510,7 +523,7 @@ onBeforeUnmount(() => {
     <div ref="containerRef"
          class="dashboard-widget-container"
     >
-        <p-data-loader :loading="isLoading"
+        <p-data-loader :loading="dashboardLoading || widgetLoading"
                        :data="state.refinedWidgetInfoList"
                        loader-backdrop-color="gray.100"
                        disable-empty-case
@@ -532,7 +545,7 @@ onBeforeUnmount(() => {
                                :loading="getWidgetLoading(widget.widget_id)"
                                :dashboard-options="dashboardDetailState.options"
                                :dashboard-vars="dashboardDetailGetters.refinedVars"
-                               :dashboard-id="dashboardDetailState.dashboardId"
+                               :dashboard-id="dashboardId"
                                :disable-refresh-on-variable-change="widgetGenerateState.showOverlay || dashboardDetailState.loadingDashboard"
                                :disable-manage-buttons="!isManageable"
                                :all-reference-type-info="state.allReferenceTypeInfo"
@@ -547,7 +560,7 @@ onBeforeUnmount(() => {
                 </template>
             </div>
         </p-data-loader>
-        <div v-if="!isLoading && !state.refinedWidgetInfoList?.length"
+        <div v-if="!(dashboardLoading || widgetLoading) && !state.refinedWidgetInfoList?.length"
              class="no-data-wrapper"
         >
             <p-empty show-image
diff --git a/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderFormModal.vue b/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderFormModal.vue
index 07d9a2c6e4..4bd411330e 100644
--- a/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderFormModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderFormModal.vue
@@ -3,7 +3,7 @@ import {
     computed, reactive, watch,
 } from 'vue';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import {
     PButtonModal, PFieldGroup, PTextInput, PToggleButton,
@@ -27,9 +27,10 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
+
 interface Props {
     visible: boolean;
     folderId?: string;
@@ -47,14 +48,14 @@ const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
 
 /* Query */
+const queryClient = useQueryClient();
 const {
     publicFolderList,
     privateFolderList,
     keys,
     api,
     fetcher,
-    queryClient,
-} = useDashboardQuery();
+} = useDashboardFolderQuery();
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleCloneModal.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleCloneModal.vue
index db94287b6a..8708e301c6 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleCloneModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleCloneModal.vue
@@ -2,6 +2,7 @@
 import { computed, reactive, watch } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
+import { useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
 
 import {
@@ -41,6 +42,7 @@ import { useProxyValue } from '@/common/composables/proxy-state';
 
 import { gray } from '@/styles/colors';
 
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { getSharedDashboardLayouts } from '@/services/dashboards/helpers/dashboard-share-helper';
 import { getSelectedDataTableItems } from '@/services/dashboards/helpers/dashboard-tree-data-helper';
@@ -92,12 +94,15 @@ const { publicWidgetAPI } = usePublicWidgetApi();
 const {
     publicDashboardList,
     privateDashboardList,
-    publicFolderList,
-    privateFolderList,
     api,
-    keys,
-    queryClient,
+    keys: dashboardKeys,
 } = useDashboardQuery();
+const {
+    publicFolderList,
+    privateFolderList,
+    keys: folderKeys,
+} = useDashboardFolderQuery();
+const queryClient = useQueryClient();
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
@@ -421,10 +426,10 @@ const handleCloneConfirm = async () => {
         const _failedCount = _results.filter((r) => r.status !== 'fulfilled').length;
         showErrorMessage(i18n.t('DASHBOARDS.ALL_DASHBOARDS.ALT_E_CLONE_DASHBOARD', { count: _failedCount }), '');
     }
-    await queryClient.invalidateQueries({ queryKey: keys.publicDashboardListQueryKey.value });
-    await queryClient.invalidateQueries({ queryKey: keys.privateDashboardListQueryKey.value });
-    await queryClient.invalidateQueries({ queryKey: keys.publicFolderListQueryKey.value });
-    await queryClient.invalidateQueries({ queryKey: keys.privateFolderListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: dashboardKeys.publicDashboardListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: dashboardKeys.privateDashboardListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: folderKeys.publicFolderListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: folderKeys.privateFolderListQueryKey.value });
     dashboardPageControlStore.reset();
     state.proxyVisible = false;
     state.loading = false;
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleDeleteModal.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleDeleteModal.vue
index 8979c83593..4263b0589e 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleDeleteModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleDeleteModal.vue
@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import { computed, reactive } from 'vue';
 
+import { useQueryClient } from '@tanstack/vue-query';
+
 import { PDataTable, PI } from '@cloudforet/mirinae';
 
 import { i18n } from '@/translations';
@@ -18,6 +20,7 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { gray } from '@/styles/colors';
 
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { getSelectedDataTableItems } from '@/services/dashboards/helpers/dashboard-tree-data-helper';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
@@ -58,12 +61,16 @@ const userWorkspaceStore = useUserWorkspaceStore();
 const {
     publicDashboardList,
     privateDashboardList,
+    api: dashboardApi,
+    keys: dashboardKeys,
+} = useDashboardQuery();
+const {
     publicFolderList,
     privateFolderList,
-    api,
-    keys,
-    queryClient,
-} = useDashboardQuery();
+    api: folderApi,
+    keys: folderKeys,
+} = useDashboardFolderQuery();
+const queryClient = useQueryClient();
 
 const queryState = reactive({
     publicDashboardItems: computed(() => {
@@ -108,8 +115,8 @@ const state = reactive({
 /* Api */
 const deleteFolder = async (folderId: string): Promise<boolean> => {
     const fetcher = folderId.startsWith('private')
-        ? api.privateFolderAPI.delete
-        : api.publicFolderAPI.delete;
+        ? folderApi.privateFolderAPI.delete
+        : folderApi.publicFolderAPI.delete;
     try {
         await fetcher({ folder_id: folderId });
         return true;
@@ -119,8 +126,8 @@ const deleteFolder = async (folderId: string): Promise<boolean> => {
 };
 const deleteDashboard = async (dashboardId: string): Promise<boolean> => {
     const fetcher = dashboardId.startsWith('private')
-        ? api.privateDashboardAPI.delete
-        : api.publicDashboardAPI.delete;
+        ? dashboardApi.privateDashboardAPI.delete
+        : dashboardApi.publicDashboardAPI.delete;
     try {
         await fetcher({ dashboard_id: dashboardId });
         const isFavoriteItem = favoriteGetters.dashboardItems.find((item) => item.itemId === dashboardId);
@@ -155,10 +162,10 @@ const handleDeleteConfirm = async () => {
     } else {
         ErrorHandler.handleRequestError(new Error('Delete failed'), i18n.t('DASHBOARDS.ALL_DASHBOARDS.ALT_E_DELETE_DASHBOARD'));
     }
-    await queryClient.invalidateQueries({ queryKey: keys.publicDashboardListQueryKey.value });
-    await queryClient.invalidateQueries({ queryKey: keys.privateDashboardListQueryKey.value });
-    await queryClient.invalidateQueries({ queryKey: keys.publicFolderListQueryKey.value });
-    await queryClient.invalidateQueries({ queryKey: keys.privateFolderListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: dashboardKeys.publicDashboardListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: dashboardKeys.privateDashboardListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: folderKeys.publicFolderListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: folderKeys.privateFolderListQueryKey.value });
     dashboardPageControlStore.reset();
     state.loading = false;
     state.proxyVisible = false;
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleMoveModal.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleMoveModal.vue
index a22a8ae6e8..cfc94483ce 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleMoveModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleMoveModal.vue
@@ -4,6 +4,8 @@ import {
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
+import { useQueryClient } from '@tanstack/vue-query';
+
 import {
     PButtonModal, PFieldGroup, PI, PSelectDropdown,
 } from '@cloudforet/mirinae';
@@ -20,6 +22,7 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 
@@ -39,12 +42,14 @@ const dashboardPageControlState = dashboardPageControlStore.state;
 
 /* Query */
 const {
-    publicFolderList,
-    privateFolderList,
     api,
     keys,
-    queryClient,
 } = useDashboardQuery();
+const {
+    publicFolderList,
+    privateFolderList,
+} = useDashboardFolderQuery();
+const queryClient = useQueryClient();
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleShareModal.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleShareModal.vue
index b1a4382b9e..cbe5dad421 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleShareModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleShareModal.vue
@@ -2,7 +2,7 @@
 import { computed, reactive, watch } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import {
     PDataTable, PI, PButtonModal, PRadioGroup, PRadio, PFieldGroup,
@@ -26,12 +26,14 @@ import { useProxyValue } from '@/common/composables/proxy-state';
 
 import { gray } from '@/styles/colors';
 
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardDataTableItem } from '@/services/dashboards/types/dashboard-folder-type';
 
 
 
+
 const TABLE_FIELDS = [
     { name: 'name', label: 'Name' },
     { name: 'location', label: 'Location' },
@@ -55,12 +57,16 @@ const dashboardPageControlStore = useDashboardPageControlStore();
 const {
     publicDashboardList,
     privateDashboardList,
+    api: dashboardApi,
+    keys: dashboardKeys,
+} = useDashboardQuery();
+const {
     publicFolderList,
     privateFolderList,
-    api,
-    keys,
-    queryClient,
-} = useDashboardQuery();
+    api: folderApi,
+    keys: folderKeys,
+} = useDashboardFolderQuery();
+const queryClient = useQueryClient();
 
 const queryState = reactive({
     publicDashboardItems: computed(() => {
@@ -184,21 +190,21 @@ const unshareDashboard = () => {
 };
 const folderSharefetcher = (params: PublicFolderShareParameters|PublicFolderUnshareParameters) => {
     if (!state.isShared) {
-        return api.publicFolderAPI.share(params as PublicFolderShareParameters);
+        return folderApi.publicFolderAPI.share(params as PublicFolderShareParameters);
     }
-    return api.publicFolderAPI.unshare(params as PublicFolderUnshareParameters);
+    return folderApi.publicFolderAPI.unshare(params as PublicFolderUnshareParameters);
 };
 const dashboardShareFetcher = (params: PublicDashboardShareParameters|PublicDashboardUnshareParameters) => {
     if (!state.isShared) {
-        return api.publicDashboardAPI.share(params as PublicDashboardShareParameters);
+        return dashboardApi.publicDashboardAPI.share(params as PublicDashboardShareParameters);
     }
-    return api.publicDashboardAPI.unshare(params as PublicDashboardUnshareParameters);
+    return dashboardApi.publicDashboardAPI.unshare(params as PublicDashboardUnshareParameters);
 };
 
 const { mutate: folderShareMutate, isPending: folderLoading } = useMutation({
     mutationFn: folderSharefetcher,
     onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: keys.publicFolderListQueryKey.value });
+        queryClient.invalidateQueries({ queryKey: folderKeys.publicFolderListQueryKey.value });
         if (state.isShared) showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_SHARE_DASHBOARD'), '');
         else showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_UNSHARE_DASHBOARD'), '');
     },
@@ -215,7 +221,7 @@ const { mutate: folderShareMutate, isPending: folderLoading } = useMutation({
 const { mutate: dashboardShareMutate, isPending: dashboardLoading } = useMutation({
     mutationFn: dashboardShareFetcher,
     onSuccess: () => {
-        queryClient.invalidateQueries({ queryKey: keys.publicDashboardListQueryKey.value });
+        queryClient.invalidateQueries({ queryKey: dashboardKeys.publicDashboardListQueryKey.value });
         if (state.isShared) showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_SHARE_DASHBOARD'), '');
         else showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_UNSHARE_DASHBOARD'), '');
     },
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue b/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue
index d1dd61aceb..77f082a337 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue
+++ b/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue
@@ -1,5 +1,6 @@
 <script lang="ts" setup>
 import { computed, reactive } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 import { isEqual, xor } from 'lodash';
 
@@ -10,7 +11,7 @@ import type { DashboardVariables, DashboardVariablesSchema } from '@/api-clients
 import ChangedMark from '@/common/components/marks/ChangedMark.vue';
 
 import DashboardVariableDropdown from '@/services/dashboards/components/legacy/DashboardVariableDropdown.vue';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
@@ -25,12 +26,14 @@ interface Props {
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update', val: { variables?: DashboardVariables, variables_schema?: DashboardVariablesSchema }): void;
 }>();
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
 
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
 const dashboardDetailGetters = dashboardDetailStore.getters;
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
 
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue b/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue
index 4838924189..ce66b7c0f2 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue
+++ b/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue
@@ -3,6 +3,7 @@ import type { ComponentPublicInstance } from 'vue';
 import {
     reactive, ref, watch, computed, onBeforeUnmount, nextTick,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 import { debounce } from 'lodash';
 
@@ -14,7 +15,7 @@ import WidgetFullModeModal from '@/services/dashboards/components/legacy/WidgetF
 import {
     useDashboardContainerWidth,
 } from '@/services/dashboards/composables/use-dashboard-container-width';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import type { ReformedWidgetInfo } from '@/services/dashboards/composables/use-reformed-widget-info-list';
 import {
     useReformedWidgetInfoList,
@@ -33,8 +34,10 @@ type WidgetComponent = ComponentPublicInstance<WidgetProps, WidgetExpose>;
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailGetters = dashboardDetailStore.getters;
 const dashboardDetailState = dashboardDetailStore.state;
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
diff --git a/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue b/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue
index 63456bb3bb..1bf3347ee2 100644
--- a/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue
+++ b/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue
@@ -3,6 +3,7 @@ import type { AsyncComponent, ComponentPublicInstance } from 'vue';
 import {
     computed, onBeforeMount, onBeforeUnmount, reactive, toRef,
 } from 'vue';
+import { useRoute } from 'vue-router/composables';
 
 import { cloneDeep } from 'lodash';
 
@@ -22,7 +23,7 @@ import { gray } from '@/styles/colors';
 
 import DashboardToolsetDateDropdown from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue';
 import DashboardVariables from '@/services/dashboards/components/legacy/DashboardVariables.vue';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { getDashboardWidgetInfoList } from '@/services/dashboards/helpers/dashboard-widget-info-helper';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
@@ -57,9 +58,10 @@ const dashboardDetailGetters = dashboardDetailStore.getters;
 const widgetFormStore = useWidgetFormStore();
 const widgetFormGetters = widgetFormStore.getters;
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
-
-const { dashboard } = useDashboardDetailQuery({
-    dashboardId: computed(() => dashboardDetailState.dashboardId),
+const route = useRoute();
+const dashboardId = computed(() => route.params.dashboardId);
+const { dashboard } = useDashboardGetQuery({
+    dashboardId,
 });
 
 const state = reactive({
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts b/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts
index 0b42263b9c..05b375b7e3 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts
@@ -10,6 +10,7 @@ import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 
 
@@ -31,9 +32,11 @@ export const useDashboardControlMenuItems = ({
     const {
         publicDashboardList,
         privateDashboardList,
+    } = useDashboardQuery();
+    const {
         publicFolderList,
         privateFolderList,
-    } = useDashboardQuery();
+    } = useDashboardFolderQuery();
 
     const queryState = reactive({
         publicDashboardItems: computed(() => {
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts
deleted file mode 100644
index 9049e25f79..0000000000
--- a/apps/web/src/services/dashboards/composables/use-dashboard-detail-query.ts
+++ /dev/null
@@ -1,170 +0,0 @@
-import type { ComputedRef } from 'vue';
-import { computed } from 'vue';
-
-import type { QueryClient, QueryKey } from '@tanstack/vue-query';
-import { useQueryClient } from '@tanstack/vue-query';
-
-import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
-import type { DashboardModel, DashboardUpdateParams } from '@/api-clients/dashboard/_types/dashboard-type';
-import type { WidgetModel, WidgetUpdateParams } from '@/api-clients/dashboard/_types/widget-type';
-import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
-import type { PrivateDashboardUpdateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/update';
-import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
-import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
-import type { PrivateWidgetUpdateParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/update';
-import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
-import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
-import type { PublicDashboardUpdateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/update';
-import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
-import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
-import type { PublicWidgetUpdateParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/update';
-import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
-
-const DEFAULT_LIST_DATA = { results: [] };
-const STALE_TIME = 1000 * 60 * 5;
-
-interface UseDashboardDetailQueryOptions {
-    dashboardId: ComputedRef<string|undefined>;
-}
-
-interface UseDashboardDetailQueryReturn {
-    dashboard: ComputedRef<PublicDashboardModel|PrivateDashboardModel|undefined>;
-    widgetList: ComputedRef<(PublicWidgetModel|PrivateWidgetModel)[]>;
-    isLoading: ComputedRef<boolean>;
-    isError: ComputedRef<boolean>;
-    keys: {
-        publicDashboardGetQueryKey: ComputedRef<QueryKey>;
-        privateDashboardGetQueryKey: ComputedRef<QueryKey>;
-        publicWidgetListQueryKey: ComputedRef<QueryKey>;
-        privateWidgetListQueryKey: ComputedRef<QueryKey>;
-    };
-    api: {
-        publicDashboardAPI: ReturnType<typeof usePublicDashboardApi>['publicDashboardAPI'];
-        privateDashboardAPI: ReturnType<typeof usePrivateDashboardApi>['privateDashboardAPI'];
-        publicWidgetAPI: ReturnType<typeof usePublicWidgetApi>['publicWidgetAPI'];
-        privateWidgetAPI: ReturnType<typeof usePrivateWidgetApi>['privateWidgetAPI'];
-    };
-    fetcher: {
-        updateDashboardFn: (args: DashboardUpdateParams) => Promise<DashboardModel>
-        updateWidgetFn: (args: WidgetUpdateParams) => Promise<WidgetModel>
-    };
-    queryClient: QueryClient;
-}
-
-export const useDashboardDetailQuery = ({
-    dashboardId,
-}: UseDashboardDetailQueryOptions): UseDashboardDetailQueryReturn => {
-    const { publicDashboardAPI, publicDashboardGetQueryKey } = usePublicDashboardApi();
-    const { privateDashboardAPI, privateDashboardGetQueryKey } = usePrivateDashboardApi();
-    const { publicWidgetAPI, publicWidgetListQueryKey } = usePublicWidgetApi();
-    const { privateWidgetAPI, privateWidgetListQueryKey } = usePrivateWidgetApi();
-    const queryClient = useQueryClient();
-
-    const isPrivate = computed(() => !!dashboardId.value?.startsWith('private'));
-
-    /* Query Keys */
-    const _publicDashboardGetQueryKey = computed(() => [
-        ...publicDashboardGetQueryKey.value,
-        dashboardId.value,
-    ]);
-    const _privateDashboardGetQueryKey = computed(() => [
-        ...privateDashboardGetQueryKey.value,
-        dashboardId.value,
-    ]);
-    const _publicWidgetListQueryKey = computed(() => [
-        ...publicWidgetListQueryKey.value,
-        dashboardId.value,
-    ]);
-    const _privateWidgetListQueryKey = computed(() => [
-        ...privateWidgetListQueryKey.value,
-        dashboardId.value,
-    ]);
-
-    /* Querys */
-    const publicDashboardQuery = useScopedQuery({
-        queryKey: _publicDashboardGetQueryKey,
-        queryFn: () => publicDashboardAPI.get({
-            dashboard_id: dashboardId.value as string,
-        }),
-        enabled: computed(() => !!dashboardId.value && !isPrivate.value),
-        staleTime: STALE_TIME,
-    }, ['DOMAIN', 'WORKSPACE']);
-    const privateDashboardQuery = useScopedQuery({
-        queryKey: _privateDashboardGetQueryKey,
-        queryFn: () => privateDashboardAPI.get({
-            dashboard_id: dashboardId.value as string,
-        }),
-        enabled: computed(() => !!dashboardId.value && isPrivate.value),
-        staleTime: STALE_TIME,
-    }, ['WORKSPACE']);
-    const publicWidgetListQuery = useScopedQuery({
-        queryKey: _publicWidgetListQueryKey,
-        queryFn: () => publicWidgetAPI.list({
-            dashboard_id: dashboardId.value as string,
-        }),
-        select: (data) => data?.results || [],
-        enabled: computed(() => !!dashboardId.value && publicDashboardQuery.isSuccess && !isPrivate.value),
-        initialData: DEFAULT_LIST_DATA,
-        initialDataUpdatedAt: 0,
-        staleTime: STALE_TIME,
-    }, ['DOMAIN', 'WORKSPACE']);
-    const privateWidgetListQuery = useScopedQuery({
-        queryKey: _privateWidgetListQueryKey,
-        queryFn: () => privateWidgetAPI.list({
-            dashboard_id: dashboardId.value as string,
-        }),
-        select: (data) => data?.results || [],
-        enabled: computed(() => !!dashboardId.value && privateDashboardQuery.isSuccess && isPrivate.value),
-        initialData: DEFAULT_LIST_DATA,
-        initialDataUpdatedAt: 0,
-        staleTime: STALE_TIME,
-    }, ['WORKSPACE']);
-
-    /* Functions */
-    const updateDashboardFn = (params: DashboardUpdateParams): Promise<DashboardModel> => {
-        const _isPrivate = params.dashboard_id.startsWith('private');
-        if (_isPrivate) {
-            return privateDashboardAPI.update(params as PrivateDashboardUpdateParameters);
-        }
-        return publicDashboardAPI.update(params as PublicDashboardUpdateParameters);
-    };
-    const updateWidgetFn = (params: WidgetUpdateParams): Promise<WidgetModel> => {
-        const _isPrivate = params.widget_id.startsWith('private');
-        if (_isPrivate) {
-            return privateWidgetAPI.update(params as PrivateWidgetUpdateParameters);
-        }
-        return publicWidgetAPI.update(params as PublicWidgetUpdateParameters);
-    };
-
-    /* State */
-    const isLoading = computed<boolean>(() => (isPrivate.value
-        ? (privateDashboardQuery.isFetching.value || privateWidgetListQuery.isFetching.value)
-        : (publicWidgetListQuery.isFetching.value || publicDashboardQuery.isFetching.value)));
-    const isError = computed<boolean>(() => (isPrivate.value
-        ? (privateDashboardQuery.isError.value || privateWidgetListQuery.isError.value)
-        : (publicDashboardQuery.isError.value || publicWidgetListQuery.isError.value)));
-
-    return {
-        dashboard: computed(() => (isPrivate.value ? privateDashboardQuery.data?.value : publicDashboardQuery.data?.value)),
-        widgetList: computed(() => (isPrivate.value ? privateWidgetListQuery.data?.value : publicWidgetListQuery.data?.value) ?? []),
-        isLoading,
-        isError,
-        api: {
-            publicDashboardAPI,
-            privateDashboardAPI,
-            publicWidgetAPI,
-            privateWidgetAPI,
-        },
-        keys: {
-            publicDashboardGetQueryKey: _publicDashboardGetQueryKey,
-            privateDashboardGetQueryKey: _privateDashboardGetQueryKey,
-            publicWidgetListQueryKey: _publicWidgetListQueryKey,
-            privateWidgetListQueryKey: _privateWidgetListQueryKey,
-        },
-        fetcher: {
-            updateDashboardFn,
-            updateWidgetFn,
-        },
-        queryClient,
-    };
-};
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-folder-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-folder-query.ts
new file mode 100644
index 0000000000..69d1d4bab3
--- /dev/null
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-folder-query.ts
@@ -0,0 +1,134 @@
+import type { Ref } from 'vue';
+import {
+    computed, type ComputedRef, reactive, watch,
+} from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+
+import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { FolderModel, FolderUpdateParams } from '@/api-clients/dashboard/_types/folder-type';
+import { usePrivateFolderApi } from '@/api-clients/dashboard/private-folder/composables/use-private-folder-api';
+import type { PrivateFolderUpdateParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/update';
+import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
+import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
+import type { PublicFolderUpdateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/update';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
+const DEFAULT_LIST_DATA = { results: [] };
+const STALE_TIME = 1000 * 60 * 5;
+
+interface UseDashboardFolderQueryReturn {
+    publicFolderList: Ref<PublicFolderModel[]>;
+    privateFolderList: Ref<PrivateFolderModel[]>;
+    isLoading: ComputedRef<boolean>;
+    keys: {
+        publicFolderListQueryKey: ComputedRef<QueryKey>;
+        privateFolderListQueryKey: ComputedRef<QueryKey>;
+    };
+    fetcher: {
+        updateFolderFn: (args: FolderUpdateParams) => Promise<FolderModel>
+    };
+    api: {
+        publicFolderAPI: ReturnType<typeof usePublicFolderApi>['publicFolderAPI'];
+        privateFolderAPI: ReturnType<typeof usePrivateFolderApi>['privateFolderAPI'];
+    };
+}
+
+export const useDashboardFolderQuery = (): UseDashboardFolderQueryReturn => {
+    const { publicFolderAPI } = usePublicFolderApi();
+    const { privateFolderAPI } = usePrivateFolderApi();
+
+
+    const appContextStore = useAppContextStore();
+    const publicFolderListApiQueryHelper = new ApiQueryHelper();
+
+    const _state = reactive({
+        // Store State
+        isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
+        // state
+        publicFolderListApiQuery: publicFolderListApiQueryHelper.data,
+        defaultListQuery: {
+            sort: [{ key: 'created_at', desc: true }],
+        },
+    });
+
+    /* Query Keys */
+    const { key: publicFolderListQueryKey, params: publicFolderListParams } = useServiceQueryKey('dashboard', 'public-folder', 'list', {
+        params: computed(() => ({
+            query: {
+                filter: _state.publicFolderListApiQuery.filter,
+                ..._state.defaultListQuery,
+            },
+        })),
+    });
+    const { key: privateFolderListQueryKey, params: privateFolderListParams } = useServiceQueryKey('dashboard', 'private-folder', 'list', {
+        params: computed(() => ({
+            query: _state.defaultListQuery,
+        })),
+    });
+
+    /* Querys */
+    const publicFolderListQuery = useScopedQuery<ListResponse<PublicFolderModel>, unknown, PublicFolderModel[]>({
+        queryKey: publicFolderListQueryKey,
+        queryFn: () => publicFolderAPI.list(publicFolderListParams.value),
+        select: (data) => data?.results || [],
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+        enabled: computed(() => !!_state.publicFolderListApiQuery?.filter),
+    }, ['DOMAIN', 'WORKSPACE']);
+    const privateFolderListQuery = useScopedQuery<ListResponse<PrivateFolderModel>, unknown, PrivateFolderModel[]>({
+        queryKey: privateFolderListQueryKey,
+        queryFn: () => privateFolderAPI.list(privateFolderListParams.value),
+        select: (data) => data?.results || [],
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+        enabled: computed(() => !_state.isAdminMode),
+    }, ['WORKSPACE']);
+
+    /* Fetchers */
+    const updateFolderFn = (params: FolderUpdateParams): Promise<FolderModel> => {
+        const _isPrivate = params.folder_id.startsWith('private');
+        if (_isPrivate) {
+            return privateFolderAPI.update(params as PrivateFolderUpdateParameters);
+        }
+        return publicFolderAPI.update(params as PublicFolderUpdateParameters);
+    };
+
+    watch(() => _state.isAdminMode, () => {
+        publicFolderListApiQueryHelper.setFilters([]);
+        if (_state.isAdminMode) {
+            publicFolderListApiQueryHelper.addFilter({ k: 'resource_group', v: 'DOMAIN', o: '=' });
+        } else {
+            publicFolderListApiQueryHelper.addFilter({ k: 'resource_group', v: ['WORKSPACE', 'DOMAIN'], o: '=' });
+        }
+        _state.publicFolderListApiQuery = publicFolderListApiQueryHelper.data;
+    }, { immediate: true });
+
+    const isLoading = computed<boolean>(() => publicFolderListQuery.isFetching.value || privateFolderListQuery.isFetching.value);
+
+    return {
+        publicFolderList: computed<PublicFolderModel[]>(() => publicFolderListQuery.data.value ?? []),
+        privateFolderList: computed<PrivateFolderModel[]>(() => privateFolderListQuery.data.value ?? []),
+        isLoading,
+        keys: {
+            publicFolderListQueryKey,
+            privateFolderListQueryKey,
+        },
+        fetcher: {
+            updateFolderFn,
+        },
+        api: {
+            publicFolderAPI,
+            privateFolderAPI,
+        },
+    };
+};
+
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-get-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-get-query.ts
new file mode 100644
index 0000000000..ac013223ad
--- /dev/null
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-get-query.ts
@@ -0,0 +1,111 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
+import type { DashboardModel, DashboardUpdateParams } from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import type { PrivateDashboardGetParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/get';
+import type { PrivateDashboardUpdateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/update';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import type { PublicDashboardGetParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/get';
+import type { PublicDashboardUpdateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/update';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+const STALE_TIME = 1000 * 60 * 5;
+
+interface UseDashboardGetQueryOptions {
+    dashboardId: ComputedRef<string|undefined>;
+}
+
+interface UseDashboardGetQueryReturn {
+    dashboard: ComputedRef<PublicDashboardModel|PrivateDashboardModel|undefined>;
+    isLoading: ComputedRef<boolean>;
+    isError: ComputedRef<boolean>;
+    keys: {
+        publicDashboardGetQueryKey: ComputedRef<QueryKey>;
+        privateDashboardGetQueryKey: ComputedRef<QueryKey>;
+    };
+    api: {
+        publicDashboardAPI: ReturnType<typeof usePublicDashboardApi>['publicDashboardAPI'];
+        privateDashboardAPI: ReturnType<typeof usePrivateDashboardApi>['privateDashboardAPI'];
+    };
+    fetcher: {
+        updateDashboardFn: (args: DashboardUpdateParams) => Promise<DashboardModel>
+    };
+}
+
+export const useDashboardGetQuery = ({
+    dashboardId,
+}: UseDashboardGetQueryOptions): UseDashboardGetQueryReturn => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
+
+    const isPrivate = computed(() => !!dashboardId.value?.startsWith('private'));
+
+
+    /* Query Keys */
+    const { key: publicDashboardGetQueryKey, params: publicDashboardGetParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'get', {
+        contextKey: computed(() => dashboardId.value),
+        params: computed<PublicDashboardGetParameters>(() => ({
+            dashboard_id: dashboardId.value as string,
+        })),
+    });
+    const { key: privateDashboardGetQueryKey, params: privateDashboardGetParams } = useServiceQueryKey('dashboard', 'private-dashboard', 'get', {
+        contextKey: computed(() => dashboardId.value),
+        params: computed<PrivateDashboardGetParameters>(() => ({
+            dashboard_id: dashboardId.value as string,
+        })),
+    });
+
+    /* Querys */
+    const publicDashboardQuery = useScopedQuery({
+        queryKey: publicDashboardGetQueryKey,
+        queryFn: () => publicDashboardAPI.get(publicDashboardGetParams.value),
+        enabled: computed(() => !!dashboardId.value && !isPrivate.value),
+        staleTime: STALE_TIME,
+    }, ['DOMAIN', 'WORKSPACE']);
+    const privateDashboardQuery = useScopedQuery({
+        queryKey: privateDashboardGetQueryKey,
+        queryFn: () => privateDashboardAPI.get(privateDashboardGetParams.value),
+        enabled: computed(() => !!dashboardId.value && isPrivate.value),
+        staleTime: STALE_TIME,
+    }, ['WORKSPACE']);
+
+    /* Functions */
+    const updateDashboardFn = (params: DashboardUpdateParams): Promise<DashboardModel> => {
+        const _isPrivate = params.dashboard_id.startsWith('private');
+        if (_isPrivate) {
+            return privateDashboardAPI.update(params as PrivateDashboardUpdateParameters);
+        }
+        return publicDashboardAPI.update(params as PublicDashboardUpdateParameters);
+    };
+
+    /* State */
+    const isLoading = computed<boolean>(() => (isPrivate.value
+        ? (privateDashboardQuery.isFetching.value)
+        : (publicDashboardQuery.isFetching.value)));
+    const isError = computed<boolean>(() => (isPrivate.value
+        ? (privateDashboardQuery.isError.value)
+        : (publicDashboardQuery.isError.value)));
+
+    return {
+        dashboard: computed(() => (isPrivate.value ? privateDashboardQuery.data?.value : publicDashboardQuery.data?.value)),
+        isLoading,
+        isError,
+        api: {
+            publicDashboardAPI,
+            privateDashboardAPI,
+        },
+        keys: {
+            publicDashboardGetQueryKey,
+            privateDashboardGetQueryKey,
+        },
+        fetcher: {
+            updateDashboardFn,
+        },
+    };
+};
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
index b2409932c9..b1573ac620 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
@@ -7,7 +7,7 @@ import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 interface UseDashboardManageableOptions {
     dashboardId: ComputedRef<string|undefined>;
@@ -26,7 +26,9 @@ export const useDashboardManageable = ({ dashboardId }: UseDashboardManageableOp
         isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
     });
 
-    const { dashboard } = useDashboardDetailQuery({ dashboardId });
+    const { dashboard } = useDashboardGetQuery({
+        dashboardId: computed(() => dashboardId.value),
+    });
 
     const isManageable = computed(() => {
         if (storeState.isAdminMode) return true;
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-query.ts
index cd1bf71229..ef6135ba60 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-query.ts
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-query.ts
@@ -4,29 +4,18 @@ import {
 } from 'vue';
 
 import type { QueryKey } from '@tanstack/vue-query';
-import { type QueryClient, useQueryClient } from '@tanstack/vue-query';
 
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 
 import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
-import type { FolderModel, FolderUpdateParams } from '@/api-clients/dashboard/_types/folder-type';
 import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
 import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
-import { usePrivateFolderApi } from '@/api-clients/dashboard/private-folder/composables/use-private-folder-api';
-import type { PrivateFolderUpdateParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/update';
-import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
 import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
 import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
-import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
-import type { PublicFolderUpdateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/update';
-import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-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';
 
 const DEFAULT_LIST_DATA = { results: [] };
 const STALE_TIME = 1000 * 60 * 5;
@@ -34,91 +23,53 @@ const STALE_TIME = 1000 * 60 * 5;
 interface UseDashboardQueryReturn {
     publicDashboardList: Ref<PublicDashboardModel[]>;
     privateDashboardList: Ref<PrivateDashboardModel[]>;
-    publicFolderList: Ref<PublicFolderModel[]>;
-    privateFolderList: Ref<PrivateFolderModel[]>;
     isLoading: ComputedRef<boolean>;
     keys: {
         publicDashboardListQueryKey: ComputedRef<QueryKey>;
         privateDashboardListQueryKey: ComputedRef<QueryKey>;
-        publicFolderListQueryKey: ComputedRef<QueryKey>;
-        privateFolderListQueryKey: ComputedRef<QueryKey>;
-    };
-    fetcher: {
-        updateFolderFn: (args: FolderUpdateParams) => Promise<FolderModel>
     };
     api: {
         publicDashboardAPI: ReturnType<typeof usePublicDashboardApi>['publicDashboardAPI'];
         privateDashboardAPI: ReturnType<typeof usePrivateDashboardApi>['privateDashboardAPI'];
-        publicFolderAPI: ReturnType<typeof usePublicFolderApi>['publicFolderAPI'];
-        privateFolderAPI: ReturnType<typeof usePrivateFolderApi>['privateFolderAPI'];
     };
-    queryClient: QueryClient;
 }
 
 export const useDashboardQuery = (): UseDashboardQueryReturn => {
-    const { publicDashboardAPI, publicDashboardListQueryKey } = usePublicDashboardApi();
-    const { privateDashboardAPI, privateDashboardListQueryKey } = usePrivateDashboardApi();
-    const { publicFolderAPI, publicFolderListQueryKey } = usePublicFolderApi();
-    const { privateFolderAPI, privateFolderListQueryKey } = usePrivateFolderApi();
-
-    const queryClient = useQueryClient();
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
 
     const appContextStore = useAppContextStore();
-    const userWorkspaceStore = useUserWorkspaceStore();
-    const allReferenceStore = useAllReferenceStore();
-    const userStore = useUserStore();
     const publicDashboardListApiQueryHelper = new ApiQueryHelper();
-    const publicFolderListApiQueryHelper = new ApiQueryHelper();
 
     const _state = reactive({
         // Store State
         isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
-        currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStore.getters.currentWorkspaceId),
-        costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
-        userId: computed<string|undefined>(() => userStore.state.userId),
         // state
         publicDashboardListApiQuery: publicDashboardListApiQueryHelper.data,
-        publicFolderListApiQuery: publicFolderListApiQueryHelper.data,
         defaultListQuery: {
-            query: {
-                sort: [{ key: 'created_at', desc: true }],
-            },
+            sort: [{ key: 'created_at', desc: true }],
         },
     });
 
     /* Query Keys */
-    const _publicDashboardListQueryKey = computed(() => [
-        ...publicDashboardListQueryKey.value,
-        _state.defaultListQuery,
-        _state.publicDashboardListApiQuery.filter,
-    ]);
-    const _privateDashboardListQueryKey = computed(() => [
-        ...privateDashboardListQueryKey.value,
-        _state.defaultListQuery,
-    ]);
-    const _publicFolderListQueryKey = computed(() => [
-        ...publicFolderListQueryKey.value,
-        _state.defaultListQuery,
-        _state.publicFolderListApiQuery.filter,
-    ]);
-    const _privateFolderListQueryKey = computed(() => [
-        ...privateFolderListQueryKey.value,
-        _state.defaultListQuery,
-    ]);
-
+    const { key: publicDashboardListQueryKey, params: publicDashboardListParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', {
+        params: computed(() => ({
+            query: {
+                filter: _state.publicDashboardListApiQuery.filter,
+                ..._state.defaultListQuery,
+            },
+        })),
+    });
+    const { key: privateDashboardListQueryKey, params: privateDashboardListParams } = useServiceQueryKey('dashboard', 'private-dashboard', 'list', {
+        params: computed(() => ({
+            query: _state.defaultListQuery,
+        })),
+    });
 
     /* Querys */
     const publicDashboardListQuery = useScopedQuery<ListResponse<PublicDashboardModel>, unknown, PublicDashboardModel[]>({
-        queryKey: _publicDashboardListQueryKey,
-        queryFn: () => publicDashboardAPI.list({
-            query: {
-                ..._state.publicDashboardListApiQuery,
-                sort: [{
-                    key: 'created_at',
-                    desc: true,
-                }],
-            },
-        }),
+        queryKey: publicDashboardListQueryKey,
+        queryFn: () => publicDashboardAPI.list(publicDashboardListParams.value),
         select: (data) => data?.results ?? [],
         initialData: DEFAULT_LIST_DATA,
         initialDataUpdatedAt: 0,
@@ -126,39 +77,8 @@ export const useDashboardQuery = (): UseDashboardQueryReturn => {
         enabled: computed(() => !!_state.publicDashboardListApiQuery?.filter),
     }, ['DOMAIN', 'WORKSPACE']);
     const privateDashboardListQuery = useScopedQuery<ListResponse<PrivateDashboardModel>, unknown, PrivateDashboardModel[]>({
-        queryKey: _privateDashboardListQueryKey,
-        queryFn: () => privateDashboardAPI.list({
-            query: {
-                sort: [{ key: 'created_at', desc: true }],
-            },
-        }),
-        select: (data) => data?.results || [],
-        initialData: DEFAULT_LIST_DATA,
-        initialDataUpdatedAt: 0,
-        staleTime: STALE_TIME,
-        enabled: computed(() => !_state.isAdminMode),
-    }, ['WORKSPACE']);
-    const publicFolderListQuery = useScopedQuery<ListResponse<PublicFolderModel>, unknown, PublicFolderModel[]>({
-        queryKey: _publicFolderListQueryKey,
-        queryFn: () => publicFolderAPI.list({
-            query: {
-                ..._state.publicFolderListApiQuery,
-                sort: [{ key: 'created_at', desc: true }],
-            },
-        }),
-        select: (data) => data?.results || [],
-        initialData: DEFAULT_LIST_DATA,
-        initialDataUpdatedAt: 0,
-        staleTime: STALE_TIME,
-        enabled: computed(() => !!_state.publicFolderListApiQuery?.filter),
-    }, ['DOMAIN', 'WORKSPACE']);
-    const privateFolderListQuery = useScopedQuery<ListResponse<PrivateFolderModel>, unknown, PrivateFolderModel[]>({
-        queryKey: _privateFolderListQueryKey,
-        queryFn: () => privateFolderAPI.list({
-            query: {
-                sort: [{ key: 'created_at', desc: true }],
-            },
-        }),
+        queryKey: privateDashboardListQueryKey,
+        queryFn: () => privateDashboardAPI.list(privateDashboardListParams.value),
         select: (data) => data?.results || [],
         initialData: DEFAULT_LIST_DATA,
         initialDataUpdatedAt: 0,
@@ -166,54 +86,30 @@ export const useDashboardQuery = (): UseDashboardQueryReturn => {
         enabled: computed(() => !_state.isAdminMode),
     }, ['WORKSPACE']);
 
-    /* Fetchers */
-    const updateFolderFn = (params: FolderUpdateParams): Promise<FolderModel> => {
-        const _isPrivate = params.folder_id.startsWith('private');
-        if (_isPrivate) {
-            return privateFolderAPI.update(params as PrivateFolderUpdateParameters);
-        }
-        return publicFolderAPI.update(params as PublicFolderUpdateParameters);
-    };
-
     watch(() => _state.isAdminMode, () => {
         publicDashboardListApiQueryHelper.setFilters([]);
-        publicFolderListApiQueryHelper.setFilters([]);
         if (_state.isAdminMode) {
             publicDashboardListApiQueryHelper.addFilter({ k: 'resource_group', v: 'DOMAIN', o: '=' });
-            publicFolderListApiQueryHelper.addFilter({ k: 'resource_group', v: 'DOMAIN', o: '=' });
         } else {
             publicDashboardListApiQueryHelper.addFilter({ k: 'resource_group', v: ['WORKSPACE', 'DOMAIN'], o: '=' });
-            publicFolderListApiQueryHelper.addFilter({ k: 'resource_group', v: ['WORKSPACE', 'DOMAIN'], o: '=' });
         }
         _state.publicDashboardListApiQuery = publicDashboardListApiQueryHelper.data;
-        _state.publicFolderListApiQuery = publicFolderListApiQueryHelper.data;
     }, { immediate: true });
 
-    const isLoading = computed<boolean>(() => publicDashboardListQuery.isFetching.value || privateDashboardListQuery.isFetching.value
-        || publicFolderListQuery.isFetching.value || privateFolderListQuery.isFetching.value);
+    const isLoading = computed<boolean>(() => publicDashboardListQuery.isFetching.value || privateDashboardListQuery.isFetching.value);
 
     return {
         publicDashboardList: computed<PublicDashboardModel[]>(() => publicDashboardListQuery.data.value ?? []),
         privateDashboardList: computed<PrivateDashboardModel[]>(() => privateDashboardListQuery.data.value ?? []),
-        publicFolderList: computed<PublicFolderModel[]>(() => publicFolderListQuery.data.value ?? []),
-        privateFolderList: computed<PrivateFolderModel[]>(() => privateFolderListQuery.data.value ?? []),
         isLoading,
         keys: {
-            publicDashboardListQueryKey: _publicDashboardListQueryKey,
-            privateDashboardListQueryKey: _privateDashboardListQueryKey,
-            publicFolderListQueryKey: _publicFolderListQueryKey,
-            privateFolderListQueryKey: _privateFolderListQueryKey,
-        },
-        fetcher: {
-            updateFolderFn,
+            publicDashboardListQueryKey,
+            privateDashboardListQueryKey,
         },
         api: {
             publicDashboardAPI,
             privateDashboardAPI,
-            publicFolderAPI,
-            privateFolderAPI,
         },
-        queryClient,
     };
 };
 
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts
new file mode 100644
index 0000000000..877f5ff1aa
--- /dev/null
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-search-query.ts
@@ -0,0 +1,107 @@
+import {
+    computed, type ComputedRef, reactive, watch, ref,
+} from 'vue';
+
+
+import { isEmpty } from 'lodash';
+
+import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+import type { Query } from '@cloudforet/core-lib/space-connector/type';
+
+import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+import { useUserStore } from '@/store/user/user-store';
+
+
+const DEFAULT_LIST_DATA = { results: [] };
+const STALE_TIME = 1000 * 60 * 5;
+
+interface UseDashboardSearchQueryOptions {
+    searchFilters: ComputedRef<ConsoleFilter[]>;
+}
+
+
+export const useDashboardSearchQuery = ({ searchFilters }: UseDashboardSearchQueryOptions) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
+
+    const appContextStore = useAppContextStore();
+    const userStore = useUserStore();
+    const searchApiQueryHelper = new ApiQueryHelper();
+
+    const _state = reactive({
+        isAdminMode: computed<boolean>(() => appContextStore.getters.isAdminMode),
+        isWorkspaceOwner: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
+    });
+    const searchQuery = ref<Query>({});
+
+    /* Query Keys */
+    const { key: publicDashboardListQueryKey, params: publicDashboardListParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', {
+        params: computed(() => ({
+            query: {
+                only: ['dashboard_id'],
+                ...searchQuery.value,
+            },
+        })),
+    });
+    const { key: privateDashboardListQueryKey, params: privateDashboardListParams } = useServiceQueryKey('dashboard', 'private-dashboard', 'list', {
+        params: computed(() => ({
+            query: {
+                only: ['dashboard_id'],
+                ...searchQuery.value,
+            },
+        })),
+    });
+
+    /* Querys */
+    const publicDashboardIdListQuery = useScopedQuery<ListResponse<PublicDashboardModel>, unknown, string[]>({
+        queryKey: publicDashboardListQueryKey,
+        queryFn: () => publicDashboardAPI.list(publicDashboardListParams.value),
+        select: (data) => data?.results?.map((item) => item.dashboard_id) ?? [],
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+        enabled: computed(() => !isEmpty(searchQuery.value) && (_state.isAdminMode || _state.isWorkspaceOwner)),
+    }, ['DOMAIN', 'WORKSPACE']);
+    const privateDashboardIdListQuery = useScopedQuery<ListResponse<PrivateDashboardModel>, unknown, string[]>({
+        queryKey: privateDashboardListQueryKey,
+        queryFn: () => privateDashboardAPI.list(privateDashboardListParams.value),
+        select: (data) => data?.results?.map((item) => item.dashboard_id) ?? [],
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+        enabled: computed(() => !isEmpty(searchQuery.value) && !_state.isAdminMode),
+    }, ['WORKSPACE']);
+
+    watch(searchFilters, (_searchFilters) => {
+        searchApiQueryHelper.setFilters(_searchFilters);
+        searchQuery.value = searchApiQueryHelper.data;
+    }, { immediate: true });
+
+
+    return {
+        dashboardIdList: computed<Set<string>>(() => {
+            const publicDashboardIdList = publicDashboardIdListQuery.data.value ?? [];
+            const privateDashboardIdList = privateDashboardIdListQuery.data.value ?? [];
+            if (_state.isAdminMode) {
+                return new Set(publicDashboardIdList);
+            }
+            if (_state.isWorkspaceOwner) {
+                return new Set([...publicDashboardIdList, ...privateDashboardIdList]);
+            }
+            return new Set(privateDashboardIdList);
+        }),
+        publicDashboardSearching: computed<boolean>(() => publicDashboardIdListQuery.isFetching.value),
+        privateDashboardSearching: computed<boolean>(() => privateDashboardIdListQuery.isFetching.value),
+    };
+};
+
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-widget-list-query.ts b/apps/web/src/services/dashboards/composables/use-dashboard-widget-list-query.ts
new file mode 100644
index 0000000000..683e6ec0b0
--- /dev/null
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-widget-list-query.ts
@@ -0,0 +1,116 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import type { QueryKey } from '@tanstack/vue-query';
+
+import { useScopedQuery } from '@/api-clients/_common/composables/use-scoped-query';
+import type { WidgetModel, WidgetUpdateParams } from '@/api-clients/dashboard/_types/widget-type';
+import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
+import type { PrivateWidgetListParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/list';
+import type { PrivateWidgetUpdateParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/update';
+import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
+import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
+import type { PublicWidgetListParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/list';
+import type { PublicWidgetUpdateParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/update';
+import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+const DEFAULT_LIST_DATA = { results: [] };
+const STALE_TIME = 1000 * 60 * 5;
+
+interface UseDashboardWidgetListQueryOptions {
+    dashboardId: ComputedRef<string|undefined>;
+}
+
+interface UseDashboardWidgetListQueryReturn {
+    widgetList: ComputedRef<(PublicWidgetModel|PrivateWidgetModel)[]>;
+    isLoading: ComputedRef<boolean>;
+    isError: ComputedRef<boolean>;
+    keys: {
+        publicWidgetListQueryKey: ComputedRef<QueryKey>;
+        privateWidgetListQueryKey: ComputedRef<QueryKey>;
+    };
+    api: {
+        publicWidgetAPI: ReturnType<typeof usePublicWidgetApi>['publicWidgetAPI'];
+        privateWidgetAPI: ReturnType<typeof usePrivateWidgetApi>['privateWidgetAPI'];
+    };
+    fetcher: {
+        updateWidgetFn: (args: WidgetUpdateParams) => Promise<WidgetModel>
+    };
+}
+
+export const useDashboardWidgetListQuery = ({
+    dashboardId,
+}: UseDashboardWidgetListQueryOptions): UseDashboardWidgetListQueryReturn => {
+    const { publicWidgetAPI } = usePublicWidgetApi();
+    const { privateWidgetAPI } = usePrivateWidgetApi();
+
+    const isPrivate = computed(() => !!dashboardId.value?.startsWith('private'));
+
+
+    /* Query Keys */
+    const { key: publicWidgetListQueryKey, params: publicWidgetListParams } = useServiceQueryKey('dashboard', 'public-widget', 'list', {
+        params: computed<PublicWidgetListParameters>(() => ({
+            dashboard_id: dashboardId.value as string,
+        })),
+    });
+    const { key: privateWidgetListQueryKey, params: privateWidgetListParams } = useServiceQueryKey('dashboard', 'private-widget', 'list', {
+        params: computed<PrivateWidgetListParameters>(() => ({
+            dashboard_id: dashboardId.value as string,
+        })),
+    });
+
+    /* Querys */
+    const publicWidgetListQuery = useScopedQuery({
+        queryKey: publicWidgetListQueryKey,
+        queryFn: () => publicWidgetAPI.list(publicWidgetListParams.value),
+        select: (data) => data?.results || [],
+        enabled: computed(() => !!dashboardId.value && !isPrivate.value),
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+    }, ['DOMAIN', 'WORKSPACE']);
+    const privateWidgetListQuery = useScopedQuery({
+        queryKey: privateWidgetListQueryKey,
+        queryFn: () => privateWidgetAPI.list(privateWidgetListParams.value),
+        select: (data) => data?.results || [],
+        enabled: computed(() => !!dashboardId.value && isPrivate.value),
+        initialData: DEFAULT_LIST_DATA,
+        initialDataUpdatedAt: 0,
+        staleTime: STALE_TIME,
+    }, ['WORKSPACE']);
+
+    /* Functions */
+    const updateWidgetFn = (params: WidgetUpdateParams): Promise<WidgetModel> => {
+        const _isPrivate = params.widget_id.startsWith('private');
+        if (_isPrivate) {
+            return privateWidgetAPI.update(params as PrivateWidgetUpdateParameters);
+        }
+        return publicWidgetAPI.update(params as PublicWidgetUpdateParameters);
+    };
+
+    /* State */
+    const isLoading = computed<boolean>(() => (isPrivate.value
+        ? privateWidgetListQuery.isFetching.value
+        : publicWidgetListQuery.isFetching.value));
+    const isError = computed<boolean>(() => (isPrivate.value
+        ? privateWidgetListQuery.isError.value
+        : publicWidgetListQuery.isError.value));
+
+    return {
+        widgetList: computed(() => (isPrivate.value ? privateWidgetListQuery.data?.value : publicWidgetListQuery.data?.value) ?? []),
+        isLoading,
+        isError,
+        api: {
+            publicWidgetAPI,
+            privateWidgetAPI,
+        },
+        keys: {
+            publicWidgetListQueryKey,
+            privateWidgetListQueryKey,
+        },
+        fetcher: {
+            updateWidgetFn,
+        },
+    };
+};
diff --git a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
index 882957efd2..461fbe6d7e 100644
--- a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
@@ -5,7 +5,7 @@ import {
 } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
-import { useMutation } from '@tanstack/vue-query';
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import {
     PDivider, PI,
@@ -33,8 +33,9 @@ import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-det
 import DashboardWidgetContainerV2 from '@/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue';
 import DashboardVariables from '@/services/dashboards/components/legacy/DashboardVariables.vue';
 import DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
+import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
@@ -57,15 +58,23 @@ const router = useRouter();
 /* Query */
 const {
     dashboard,
+    isError: dashboardError,
+    isLoading: dashboardLoading,
+    keys: dashboardKeys,
+    fetcher: dashboardFetcher,
+} = useDashboardGetQuery({
+    dashboardId: computed(() => props.dashboardId),
+});
+const {
     widgetList,
-    isError,
-    isLoading,
-    keys,
-    fetcher,
-    queryClient,
-} = useDashboardDetailQuery({
+    isLoading: widgetLoading,
+    isError: widgetError,
+    keys: widgetListKeys,
+} = useDashboardWidgetListQuery({
     dashboardId: computed(() => props.dashboardId),
 });
+
+const queryClient = useQueryClient();
 const { isManageable } = useDashboardManageable({
     dashboardId: computed(() => props.dashboardId),
 });
@@ -83,7 +92,7 @@ const state = reactive({
 const handleRefresh = async () => {
     if (dashboard.value?.version !== '1.0') {
         const isPrivate = props.dashboardId.startsWith('private');
-        const widgetListQueryKey = isPrivate ? keys.privateWidgetListQueryKey : keys.publicWidgetListQueryKey;
+        const widgetListQueryKey = isPrivate ? widgetListKeys.privateWidgetListQueryKey : widgetListKeys.publicWidgetListQueryKey;
         await queryClient.invalidateQueries({ queryKey: widgetListQueryKey.value });
     }
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
@@ -100,10 +109,10 @@ const handleUpdateDashboardVariables = (params) => {
 
 const { mutate: updateDashboard, isPending: dashboardUpdateLoading } = useMutation(
     {
-        mutationFn: fetcher.updateDashboardFn,
+        mutationFn: dashboardFetcher.updateDashboardFn,
         onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
             const isPrivate = _dashboard.dashboard_id.startsWith('private');
-            const dashboardQueryKey = isPrivate ? keys.privateDashboardGetQueryKey : keys.publicDashboardGetQueryKey;
+            const dashboardQueryKey = isPrivate ? dashboardKeys.privateDashboardGetQueryKey : dashboardKeys.publicDashboardGetQueryKey;
             queryClient.setQueryData(dashboardQueryKey.value, (oldDashboard) => {
                 if (!oldDashboard) return _dashboard;
                 return {
@@ -142,9 +151,9 @@ watch(widgetList, (_widgetList) => {
         dashboardDetailStore.setDashboardWidgets(_widgetList);
     }
 });
-watch(isError, (error) => {
-    if (error) {
-        ErrorHandler.handleError(error);
+watch([dashboardError, widgetError], ([_dashboardError, _widgetError]) => {
+    if (_dashboardError || _widgetError) {
+        ErrorHandler.handleError(_dashboardError || _widgetError);
         const dashboardRouteName = state.isAdminMode ? ADMIN_DASHBOARDS_ROUTE._NAME : DASHBOARDS_ROUTE._NAME;
         router.push({ name: dashboardRouteName });
     }
@@ -192,7 +201,7 @@ onUnmounted(() => {
                 </div>
                 <div class="right-part">
                     <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
-                                                :loading="isLoading || dashboardUpdateLoading"
+                                                :loading="dashboardLoading || widgetLoading || dashboardUpdateLoading"
                                                 @refresh="handleRefresh"
                     />
                 </div>
diff --git a/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue b/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue
index 1de6804016..9483be03f4 100644
--- a/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardsMainPage.vue
@@ -8,9 +8,6 @@ import { cloneDeep } from 'lodash';
 
 import { makeDistinctValueHandler } from '@cloudforet/core-lib/component-util/query-search';
 import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import { getCancellableFetcher } from '@cloudforet/core-lib/space-connector/cancellable-fetcher';
-import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
     PHeading, PDivider, PButton, PToolbox, PEmpty, PDataLoader, PHeadingLayout,
 } from '@cloudforet/mirinae';
@@ -21,8 +18,6 @@ import type {
 import type { ToolboxOptions } from '@cloudforet/mirinae/types/controls/toolbox/type';
 import type { TreeNode } from '@cloudforet/mirinae/types/data-display/tree/tree-view/type';
 
-import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
-import type { DashboardListParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
 import { SpaceRouter } from '@/router';
 
@@ -32,14 +27,15 @@ import { useUserStore } from '@/store/user/user-store';
 
 import { replaceUrlQuery } from '@/lib/router-query-string';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import { usePageEditableStatus } from '@/common/composables/page-editable-status';
 import { useQueryTags } from '@/common/composables/query-tags';
 
 import DashboardFolderTree from '@/services/dashboards/components/dashboard-folder/DashboardFolderTree.vue';
 import DashboardFolderTreeTitle from '@/services/dashboards/components/dashboard-folder/DashboardFolderTreeTitle.vue';
 import DashboardMainBoardList from '@/services/dashboards/components/dashboard-main/DashboardMainBoardList.vue';
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
+import { useDashboardSearchQuery } from '@/services/dashboards/composables/use-dashboard-search-query';
 import {
     getDashboardTreeData,
     isPublicControlButtonDisabled,
@@ -70,10 +66,13 @@ const queryTagsHelper = useQueryTags({
 const {
     publicDashboardList,
     privateDashboardList,
+    isLoading: isDashboardLoading,
+} = useDashboardQuery();
+const {
     publicFolderList,
     privateFolderList,
-    isLoading,
-} = useDashboardQuery();
+    isLoading: isFolderLoading,
+} = useDashboardFolderQuery();
 
 const storeState = reactive({
     isWorkspaceOwner: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
@@ -128,14 +127,14 @@ const state = reactive({
     }),
 
     refinedPublicTreeData: computed<TreeNode<DashboardTreeDataType>[]>(() => {
-        if (state.isSearching.PUBLIC) return [];
+        if (publicDashboardSearching.value) return [];
         if (!state.searchFilters.length) return state.publicDashboardTreeData;
-        return getSearchedTreeData(state.publicDashboardTreeData, state.searchedDashboardIdList);
+        return getSearchedTreeData(state.publicDashboardTreeData, dashboardIdList.value);
     }),
     refinedPrivateTreeData: computed<TreeNode<DashboardTreeDataType>[]>(() => {
-        if (state.isSearching.PRIVATE) return [];
+        if (privateDashboardSearching.value) return [];
         if (!state.searchFilters.length) return state.privateDashboardTreeData;
-        return getSearchedTreeData(state.privateDashboardTreeData, state.searchedDashboardIdList);
+        return getSearchedTreeData(state.privateDashboardTreeData, dashboardIdList.value);
     }),
     isDashboardExist: computed<boolean>(() => {
         if (state.isAdminMode) {
@@ -153,14 +152,7 @@ const state = reactive({
         public: false,
         private: false,
     } as Record<string, boolean>,
-
-    // search
-    isSearching: {
-        PUBLIC: false,
-        PRIVATE: false,
-    },
     searchFilters: [] as ConsoleFilter[],
-    searchedDashboardIdList: new Set<string>(),
 });
 
 const queryState = reactive({
@@ -198,42 +190,6 @@ const getSearchedTreeData = (treeData: TreeNode<DashboardTreeDataType>[], search
     });
     return _results;
 };
-const searchedDashboards = async () => {
-    if (storeState.isAdminMode) {
-        await fetchSearchedDashboard('PUBLIC');
-    } else if (storeState.isWorkspaceOwner) {
-        await fetchSearchedDashboard('PRIVATE');
-        await fetchSearchedDashboard('PUBLIC');
-    } else {
-        await fetchSearchedDashboard('PRIVATE');
-    }
-};
-
-/* Api */
-const searchApiQueryHelper = new ApiQueryHelper();
-const privateDashboardFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.privateDashboard.list);
-const publicDashboardFetcher = getCancellableFetcher(SpaceConnector.clientV2.dashboard.publicDashboard.list);
-const fetchSearchedDashboard = async (dashboardType: 'PUBLIC' | 'PRIVATE'): Promise<void> => {
-    try {
-        state.isSearching[dashboardType] = true;
-        state.searchedDashboardIdList.clear();
-        searchApiQueryHelper.setFilters(state.searchFilters);
-        const fetcher = dashboardType === 'PRIVATE' ? privateDashboardFetcher : publicDashboardFetcher;
-        const { status, response } = await fetcher<DashboardListParams, ListResponse<DashboardModel>>({
-            query: {
-                only: ['dashboard_id'],
-                ...searchApiQueryHelper.data,
-            },
-        });
-        if (status === 'succeed') {
-            response.results?.map((d) => d.dashboard_id).forEach((id) => state.searchedDashboardIdList.add(id));
-            state.isSearching[dashboardType] = false;
-        }
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        state.isSearching[dashboardType] = false;
-    }
-};
 
 /* Event */
 const handleCreateDashboard = () => {
@@ -304,22 +260,23 @@ const getDashboardValueHandler = (): ValueHandler | undefined => {
     await init();
 })();
 
+const {
+    dashboardIdList,
+    publicDashboardSearching,
+    privateDashboardSearching,
+} = useDashboardSearchQuery({
+    searchFilters: computed(() => state.searchFilters),
+});
+
 watch(() => dashboardPageControlState.searchQueryTags, async (queryTags: QueryTag[]) => {
     queryTagsHelper.setQueryTags(queryTags || []);
     dashboardPageControlStore.resetSelectedIdMap();
     state.searchFilters = queryTagsHelper.filters.value;
-    if (!state.searchFilters.length) {
-        state.searchedDashboardIdList.clear();
-        state.isSearching = false;
-        return;
-    }
-    await searchedDashboards();
 }, { immediate: true });
 
 onUnmounted(() => {
     if (urlQueryStringWatcherStop) urlQueryStringWatcherStop();
     state.searchFilters = [];
-    state.searchedDashboardIdList.clear();
 });
 </script>
 
@@ -357,7 +314,7 @@ onUnmounted(() => {
                    @change="handleQueryChange"
                    @refresh="handleQueryChange()"
         />
-        <p-data-loader :loading="isLoading"
+        <p-data-loader :loading="isDashboardLoading || isFolderLoading"
                        :data="state.isDashboardExist"
                        class="dashboard-list-wrapper"
         >
diff --git a/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue b/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue
index 2ae48b1e25..a08f99ecd7 100644
--- a/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue
+++ b/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue
@@ -6,6 +6,8 @@ import {
 } from 'vue';
 import { useRoute, useRouter } from 'vue-router/composables';
 
+import { useQueryClient } from '@tanstack/vue-query';
+
 import { PSkeleton } from '@cloudforet/mirinae';
 
 
@@ -19,7 +21,8 @@ import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-det
 import DashboardWidgetContainerV2
     from '@/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue';
 import type DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
-import { useDashboardDetailQuery } from '@/services/dashboards/composables/use-dashboard-detail-query';
+import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query';
 import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 import { PROJECT_ROUTE_V1 } from '@/services/project/v1/routes/route-constant';
 
@@ -40,17 +43,23 @@ const router = useRouter();
 /* Query */
 const {
     dashboard,
+    isError: dashboardError,
+    isLoading: dashboardLoading,
+} = useDashboardGetQuery({
+    dashboardId: computed(() => route.params.dashboardId),
+});
+const {
     widgetList,
-    isError,
-    isLoading,
-    keys,
-    queryClient,
-} = useDashboardDetailQuery({
+    isLoading: widgetLoading,
+    isError: widgetError,
+    keys: widgetListKeys,
+} = useDashboardWidgetListQuery({
     dashboardId: computed(() => route.params.dashboardId),
 });
+const queryClient = useQueryClient();
 
 const handleRefresh = async () => {
-    await queryClient.invalidateQueries({ queryKey: keys.publicWidgetListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: widgetListKeys.publicWidgetListQueryKey.value });
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
     if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget();
@@ -69,9 +78,9 @@ watch(widgetList, (_widgetList) => {
         dashboardDetailStore.setDashboardWidgets(_widgetList);
     }
 });
-watch(isError, (error) => {
-    if (error) {
-        ErrorHandler.handleError(error);
+watch([dashboardError, widgetError], ([_dashboardError, _widgetError]) => {
+    if (_dashboardError || _widgetError) {
+        ErrorHandler.handleError(_dashboardError || _widgetError);
         router.push({ name: PROJECT_ROUTE_V1.DETAIL._NAME });
     }
 });
@@ -105,18 +114,18 @@ onUnmounted(() => {
                 <div class="toolset">
                     <dashboard-toolset-date-dropdown :date-range="dashboardDetailState.options.date_range" />
                     <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
-                                                :loading="isLoading"
+                                                :loading="dashboardLoading || widgetLoading"
                                                 disable-interval
                                                 @refresh="handleRefresh"
                     />
                 </div>
-                <div v-if="!isLoading"
+                <div v-if="!dashboardLoading && !widgetLoading"
                      class="selectors"
                 >
                     <dashboard-variables-v2 class="variable-selector-wrapper"
                                             is-project-dashboard
                                             disable-save-button
-                                            :loading="isLoading"
+                                            :loading="dashboardLoading || widgetLoading"
                     />
                 </div>
                 <dashboard-widget-container-v2 ref="widgetContainerRef" />
diff --git a/apps/web/src/services/project/v1/pages/ProjectDetailTabPage.vue b/apps/web/src/services/project/v1/pages/ProjectDetailTabPage.vue
index c9fd3b2ceb..b0a1607593 100644
--- a/apps/web/src/services/project/v1/pages/ProjectDetailTabPage.vue
+++ b/apps/web/src/services/project/v1/pages/ProjectDetailTabPage.vue
@@ -32,6 +32,7 @@ import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 
 import { BACKGROUND_COLOR } from '@/styles/colorsets';
 
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import ProjectAlertTab from '@/services/project/v1/components/ProjectAlertTab.vue';
 import ProjectDetailTab from '@/services/project/v1/components/ProjectDetailTab.vue';
@@ -59,8 +60,10 @@ const { visibleContents } = useContentsAccessibility(MENU_ID.ALERT_MANAGER);
 /* Query */
 const {
     publicDashboardList,
-    publicFolderList,
 } = useDashboardQuery();
+const {
+    publicFolderList,
+} = useDashboardFolderQuery();
 
 const storeState = reactive({
     visibleAlertTab: computed<boolean>(() => visibleContents.value && projectDetailPageState.visibleAlertTab),
diff --git a/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue b/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue
index da91f08b6a..847cec57ff 100644
--- a/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectDetailPage.vue
@@ -29,6 +29,7 @@ import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
 
 import { BACKGROUND_COLOR } from '@/styles/colorsets';
 
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 import ProjectHeader from '@/services/project/v2/components/ProjectHeader.vue';
 import ProjectTabs from '@/services/project/v2/components/ProjectTabs.vue';
@@ -49,9 +50,10 @@ const userStore = useUserStore();
 /* Query */
 const {
     publicDashboardList,
-    publicFolderList,
 } = useDashboardQuery();
-
+const {
+    publicFolderList,
+} = useDashboardFolderQuery();
 
 const storeState = reactive({
     projectGroups: computed<ProjectGroupReferenceMap>(() => allReferenceStore.getters.projectGroup),