diff --git a/.cursor/rules/generate-new-api-clients.mdc b/.cursor/rules/generate-new-api-clients.mdc
new file mode 100644
index 0000000000..7c96c427ac
--- /dev/null
+++ b/.cursor/rules/generate-new-api-clients.mdc
@@ -0,0 +1,140 @@
+---
+description: 
+globs: 
+alwaysApply: false
+---
+
+
+## Directory Structure
+```
+api-clients/
+├── _common/
+│   ├── composables/
+│   │   └── use-api-query-key.ts
+│   └── schema/
+│       ├── api-verbs/
+│       └── model.ts
+└── {service-name}/
+    ├── {resource}/
+    │   ├── composables/
+    │   │   └── use-{resource}-api.ts
+    │   └── schema/
+    │       ├── api-verbs/
+    │       │   ├── {verb}.ts
+    │       └── model.ts
+    └── index.ts
+```
+
+## API Client Composable Template
+```typescript
+// use-{resource}-api.ts template
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import { useAPIQueryKey } from '@/api-clients/_common/composables/use-api-query-key';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { {Resource}CreateParameters } from '@/api-clients/{service}/{resource}/schema/api-verbs/create';
+import type { {Resource}Model } from '@/api-clients/{service}/{resource}/schema/model';
+
+export const use{Resource}Api = () => {
+    // Define API actions
+    const actions = {
+        create: SpaceConnector.clientV2.{service}.{resource}.create<{Resource}CreateParameters, {Resource}Model>,
+        list: SpaceConnector.clientV2.{service}.{resource}.list<{Resource}ListParameters, ListResponse<{Resource}Model>>,
+        // ... other actions
+    };
+
+    return {
+        {resource}QueryKey,
+        {resource}ListQueryKey,
+        {resource}API: actions,
+    };
+};
+```
+
+## Schema Templates
+
+### Model Definition
+```typescript
+// model.ts template
+export interface {Resource}Model {
+    // Define resource properties
+    resource_id: string;
+    name: string;
+    // ... other properties
+}
+```
+
+### API Verb Parameters
+```typescript
+// create.ts template
+export interface {Resource}CreateParameters {
+    // Define create operation parameters
+    name: string;
+    // ... other parameters
+}
+
+// list.ts template
+export interface {Resource}ListParameters {
+    query?: {
+        filter?: Array<{
+            k: string;
+            v: any;
+            o: string;
+        }>;
+        // ... other query parameters
+    };
+}
+```
+
+## Usage Rules
+
+1. **Naming Conventions**
+   - Use PascalCase for interface names: `{Resource}Model`, `{Resource}{Verb}Parameters`
+   - Use camelCase for variables and functions: `use{Resource}Api`
+   - Follow existing naming patterns in the codebase
+
+2. **Type Safety**
+   - Always define proper TypeScript interfaces for all parameters and responses
+   - Use generics with SpaceConnector client methods
+   - Define all possible API parameters in schema files
+
+3. **Query Key Management**
+   - Use `useAPIQueryKey` for generating consistent query keys
+   - Create separate query keys for different operations
+   - Include contextual information in query keys when needed
+
+4. **Code Organization**
+   - Keep schema definitions separate from API logic
+   - Group related files in appropriate directories
+   - Follow the established directory structure
+
+5. **Documentation**
+   - Add JSDoc comments for public interfaces and functions
+   - Document any special behaviors or requirements
+   - Include examples for complex parameter structures
+
+## Example Usage in Components
+```typescript
+const { {resource}API } = use{Resource}Api();
+
+const { key, params } = useServiceKey(service, resource, verb, {
+  params: ...
+})
+
+// In composables
+const query = useScopedQuery({
+    queryKey: {resource}QueryKey.value,
+    queryFn: () => {resource}API.{verb}(params.value),
+    // ... other options
+}, ['WORKSPACE', 'ADMIN']);
+```
+
+## Notes
+- Always check existing API clients for consistent patterns
+- Consider reusability and maintainability
+- Follow the service's API documentation for accurate parameter definitions
+- Use appropriate error handling and loading states
+- Consider implementing proper caching strategies 
+- Add comments only when it is really complex. (English only)
+
+
diff --git a/.gitignore b/.gitignore
index 49eba67df9..66fa09c87b 100755
--- a/.gitignore
+++ b/.gitignore
@@ -13,6 +13,10 @@ node_modules.nosync/
 *.swp
 *.bak
 
+## Cursor rules : Ignore all files in .cursor directory except specific file (rules)
+.cursor/*
+!.cursor/generate-new-api-clients.mdc
+
 # Turborepo
 .turbo
 out/
diff --git a/apps/web/src/api-clients/_common/constants/api-doc-constant.ts b/apps/web/src/api-clients/_common/constants/api-doc-constant.ts
index 91b5b092a1..503f2701bc 100644
--- a/apps/web/src/api-clients/_common/constants/api-doc-constant.ts
+++ b/apps/web/src/api-clients/_common/constants/api-doc-constant.ts
@@ -376,6 +376,11 @@ export const API_DOC = {
             'list',
         ],
     },
+    inventory: {
+        'metric-data': [
+            'analyze',
+        ],
+    },
     opsflow: {
         comment: [
             'create',
diff --git a/apps/web/src/api-clients/cost-analysis/cost-report-config/composables/use-cost-report-config-api.ts b/apps/web/src/api-clients/cost-analysis/cost-report-config/composables/use-cost-report-config-api.ts
index e69de29bb2..8f4839086a 100644
--- a/apps/web/src/api-clients/cost-analysis/cost-report-config/composables/use-cost-report-config-api.ts
+++ b/apps/web/src/api-clients/cost-analysis/cost-report-config/composables/use-cost-report-config-api.ts
@@ -0,0 +1,29 @@
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostReportConfigListParameters } from '@/api-clients/cost-analysis/cost-report-config/schema/api-verbs/list';
+import type { CostReportConfigUpdateParameters } from '@/api-clients/cost-analysis/cost-report-config/schema/api-verbs/update';
+import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
+
+
+interface UseCostReportConfigApiReturn {
+    costReportConfigAPI: {
+        update: (params: CostReportConfigUpdateParameters) => Promise<CostReportConfigModel>;
+        list: (params: CostReportConfigListParameters) => Promise<ListResponse<CostReportConfigModel>>;
+    }
+}
+
+export const useCostReportConfigApi = (): UseCostReportConfigApiReturn => {
+    const actions = {
+        async update(params: CostReportConfigUpdateParameters) {
+            return SpaceConnector.clientV2.costAnalysis.costReportConfig.update<CostReportConfigUpdateParameters, CostReportConfigModel>(params);
+        },
+        async list(params: CostReportConfigListParameters) {
+            return SpaceConnector.clientV2.costAnalysis.costReportConfig.list<CostReportConfigListParameters, ListResponse<CostReportConfigModel>>(params);
+        },
+    };
+
+    return {
+        costReportConfigAPI: actions,
+    };
+};
diff --git a/apps/web/src/api-clients/cost-analysis/data-source/composables/use-data-source-api.ts b/apps/web/src/api-clients/cost-analysis/data-source/composables/use-data-source-api.ts
index e69de29bb2..94eff42640 100644
--- a/apps/web/src/api-clients/cost-analysis/data-source/composables/use-data-source-api.ts
+++ b/apps/web/src/api-clients/cost-analysis/data-source/composables/use-data-source-api.ts
@@ -0,0 +1,38 @@
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { CostDataSourceGetParameters } from '@/api-clients/cost-analysis/data-source/schema/api-verbs/get';
+import type { CostDataSourceListParameters } from '@/api-clients/cost-analysis/data-source/schema/api-verbs/list';
+import type { CostDataSourceSyncParameters } from '@/api-clients/cost-analysis/data-source/schema/api-verbs/sync';
+import type { CostDataSourceUpdatePermissionsParameters } from '@/api-clients/cost-analysis/data-source/schema/api-verbs/update-permissions';
+import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
+
+interface UseDataSourceApiReturn {
+    dataSourceAPI: {
+        get: (params: CostDataSourceGetParameters) => Promise<CostDataSourceModel>;
+        list: (params: CostDataSourceListParameters) => Promise<ListResponse<CostDataSourceModel>>;
+        sync: (params: CostDataSourceSyncParameters) => Promise<void>;
+        updatePermissions: (params: CostDataSourceUpdatePermissionsParameters) => Promise<CostDataSourceModel>;
+    }
+}
+
+export const useDataSourceApi = (): UseDataSourceApiReturn => {
+    const actions = {
+        async get(params: CostDataSourceGetParameters) {
+            return SpaceConnector.clientV2.costAnalysis.dataSource.get<CostDataSourceGetParameters, CostDataSourceModel>(params);
+        },
+        async list(params: CostDataSourceListParameters) {
+            return SpaceConnector.clientV2.costAnalysis.dataSource.list<CostDataSourceListParameters, ListResponse<CostDataSourceModel>>(params);
+        },
+        async sync(params: CostDataSourceSyncParameters) {
+            return SpaceConnector.clientV2.costAnalysis.dataSource.sync<CostDataSourceSyncParameters>(params);
+        },
+        async updatePermissions(params: CostDataSourceUpdatePermissionsParameters) {
+            return SpaceConnector.clientV2.costAnalysis.dataSource.updatePermissions<CostDataSourceUpdatePermissionsParameters, CostDataSourceModel>(params);
+        },
+    };
+
+    return {
+        dataSourceAPI: actions,
+    };
+};
diff --git a/apps/web/src/api-clients/cost-analysis/unified-cost/composables/use-unified-cost-api.ts b/apps/web/src/api-clients/cost-analysis/unified-cost/composables/use-unified-cost-api.ts
index e69de29bb2..289e9d7da3 100644
--- a/apps/web/src/api-clients/cost-analysis/unified-cost/composables/use-unified-cost-api.ts
+++ b/apps/web/src/api-clients/cost-analysis/unified-cost/composables/use-unified-cost-api.ts
@@ -0,0 +1,20 @@
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { UnifiedCostAnalyzeParameters } from '@/api-clients/cost-analysis/unified-cost/schema/api-verbs/analyze';
+import type { UnifiedCostListParameters } from '@/api-clients/cost-analysis/unified-cost/schema/api-verbs/list';
+import type { UnifiedCostStatParameters } from '@/api-clients/cost-analysis/unified-cost/schema/api-verbs/stat';
+import type { UnifiedCostModel } from '@/api-clients/cost-analysis/unified-cost/schema/model';
+
+export const useUnifiedCostApi = () => {
+    const actions = {
+        analyze: SpaceConnector.clientV2.costAnalysis.unifiedCost.analyze<UnifiedCostAnalyzeParameters, AnalyzeResponse<any>>,
+        list: SpaceConnector.clientV2.costAnalysis.unifiedCost.list<UnifiedCostListParameters, ListResponse<UnifiedCostModel>>,
+        stat: SpaceConnector.clientV2.costAnalysis.unifiedCost.stat<UnifiedCostStatParameters, any>,
+    };
+
+    return {
+        unifiedCostAPI: actions,
+    };
+};
diff --git a/apps/web/src/api-clients/dashboard/_types/dashboard-global-variable-type.ts b/apps/web/src/api-clients/dashboard/_types/dashboard-global-variable-type.ts
index ca49e1e6bd..5716aa7e17 100644
--- a/apps/web/src/api-clients/dashboard/_types/dashboard-global-variable-type.ts
+++ b/apps/web/src/api-clients/dashboard/_types/dashboard-global-variable-type.ts
@@ -1,6 +1,4 @@
 // Base Model
-import type { GLOBAL_VARIABLE_FILTER_TYPE_MAP } from '@/services/dashboards/constants/dashboard-global-variable';
-
 interface DashboardGlobalVariableBase {
     key: string; // new_variable
     name: string; // New Variable
@@ -79,4 +77,3 @@ export type DashboardGlobalVariable =
 
 
 
-export type GlobalVariableFilterType = keyof typeof GLOBAL_VARIABLE_FILTER_TYPE_MAP;
diff --git a/apps/web/src/api-clients/dashboard/_types/dashboard-type.ts b/apps/web/src/api-clients/dashboard/_types/dashboard-type.ts
index c3f990a0f2..2bef51f950 100644
--- a/apps/web/src/api-clients/dashboard/_types/dashboard-type.ts
+++ b/apps/web/src/api-clients/dashboard/_types/dashboard-type.ts
@@ -13,6 +13,7 @@ import type { PrivateDashboardGetParameters } from '@/api-clients/dashboard/priv
 import type { PrivateDashboardListParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/list';
 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 type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
 import type { PublicDashboardChangeFolderParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/change-folder';
 import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
 import type { PublicDashboardDeleteParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/delete';
@@ -20,16 +21,19 @@ import type { PublicDashboardGetParameters } from '@/api-clients/dashboard/publi
 import type { PublicDashboardListParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/list';
 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 type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
 
 import type { VariableModelType } from '@/lib/variable-models';
 import type { Value } from '@/lib/variable-models/_base/types';
 
+
 export type DashboardType = typeof DASHBOARD_TYPE[keyof typeof DASHBOARD_TYPE];
 export type DashboardFolderType = 'PUBLIC'|'PRIVATE';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
 export type DashboardModel = PublicDashboardModel | PrivateDashboardModel;
+export type DashboardFolderModel = PublicFolderModel | PrivateFolderModel;
 export type DashboardCreateParams = PublicDashboardCreateParameters | PrivateDashboardCreateParameters;
 export type DashboardChangeFolderParams = PublicDashboardChangeFolderParameters | PrivateDashboardChangeFolderParameters;
 export type DashboardListParams = PublicDashboardListParameters | PrivateDashboardListParameters;
diff --git a/apps/web/src/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api.ts b/apps/web/src/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api.ts
index a924164b67..1fbd09dea9 100644
--- a/apps/web/src/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api.ts
+++ b/apps/web/src/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api.ts
@@ -9,37 +9,15 @@ import type { PrivateDashboardListParameters } from '@/api-clients/dashboard/pri
 import type { PrivateDashboardUpdateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/update';
 import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
 
-interface UsePrivateDashboardApiReturn {
-    privateDashboardAPI: {
-        create: (params: PrivateDashboardCreateParameters) => Promise<PrivateDashboardModel>;
-        update: (params: PrivateDashboardUpdateParameters) => Promise<PrivateDashboardModel>;
-        changeFolder: (params: PrivateDashboardChangeFolderParameters) => Promise<PrivateDashboardModel>;
-        delete: (params: PrivateDashboardDeleteParameters) => Promise<void>;
-        get: (params: PrivateDashboardGetParameters) => Promise<PrivateDashboardModel>;
-        list: (params: PrivateDashboardListParameters) => Promise<ListResponse<PrivateDashboardModel>>;
-    }
-}
 
-export const usePrivateDashboardApi = (): UsePrivateDashboardApiReturn => {
+export const usePrivateDashboardApi = () => {
     const actions = {
-        async create(params: PrivateDashboardCreateParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDashboard.create<PrivateDashboardCreateParameters, PrivateDashboardModel>(params);
-        },
-        async update(params: PrivateDashboardUpdateParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDashboard.update<PrivateDashboardUpdateParameters, PrivateDashboardModel>(params);
-        },
-        async changeFolder(params: PrivateDashboardChangeFolderParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDashboard.changeFolder<PrivateDashboardChangeFolderParameters, PrivateDashboardModel>(params);
-        },
-        async delete(params: PrivateDashboardDeleteParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDashboard.delete<PrivateDashboardDeleteParameters>(params);
-        },
-        async get(params: PrivateDashboardGetParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDashboard.get<PrivateDashboardGetParameters, PrivateDashboardModel>(params);
-        },
-        async list(params: PrivateDashboardListParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDashboard.list<PrivateDashboardListParameters, ListResponse<PrivateDashboardModel>>(params);
-        },
+        create: SpaceConnector.clientV2.dashboard.privateDashboard.create<PrivateDashboardCreateParameters, PrivateDashboardModel>,
+        update: SpaceConnector.clientV2.dashboard.privateDashboard.update<PrivateDashboardUpdateParameters, PrivateDashboardModel>,
+        changeFolder: SpaceConnector.clientV2.dashboard.privateDashboard.changeFolder<PrivateDashboardChangeFolderParameters, PrivateDashboardModel>,
+        delete: SpaceConnector.clientV2.dashboard.privateDashboard.delete<PrivateDashboardDeleteParameters>,
+        get: SpaceConnector.clientV2.dashboard.privateDashboard.get<PrivateDashboardGetParameters, PrivateDashboardModel>,
+        list: SpaceConnector.clientV2.dashboard.privateDashboard.list<PrivateDashboardListParameters, ListResponse<PrivateDashboardModel>>,
     };
 
     return {
diff --git a/apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/list.ts b/apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/list.ts
index 2656ae2b91..ab0ab87fd6 100644
--- a/apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/list.ts
+++ b/apps/web/src/api-clients/dashboard/private-dashboard/schema/api-verbs/list.ts
@@ -5,4 +5,5 @@ export interface PrivateDashboardListParameters {
     query?: Query;
     dashboard_id?: string;
     name?: string;
+    folder_id?: string;
 }
diff --git a/apps/web/src/api-clients/dashboard/private-data-table/composables/use-private-data-table-api.ts b/apps/web/src/api-clients/dashboard/private-data-table/composables/use-private-data-table-api.ts
index e6ecac6eb5..7cb4d1b861 100644
--- a/apps/web/src/api-clients/dashboard/private-data-table/composables/use-private-data-table-api.ts
+++ b/apps/web/src/api-clients/dashboard/private-data-table/composables/use-private-data-table-api.ts
@@ -11,41 +11,15 @@ import type { DataTableLoadParameters } from '@/api-clients/dashboard/public-dat
 import type { DataTableTransformParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/transform';
 import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/update';
 
-interface UsePrivateDataTableApiReturn {
-    privateDataTableAPI: {
-        add: (params: DataTableAddParameters) => Promise<PrivateDataTableModel>;
-        transform: (params: DataTableTransformParameters) => Promise<PrivateDataTableModel>;
-        update: (params: DataTableUpdateParameters) => Promise<PrivateDataTableModel>;
-        delete: (params: DataTableDeleteParameters) => Promise<void>;
-        load: (params: DataTableLoadParameters) => Promise<DataTableLoadResponse>;
-        get: (params: DataTableGetParameters) => Promise<PrivateDataTableModel>;
-        list: (params: DataTableListParameters) => Promise<ListResponse<PrivateDataTableModel>>;
-    }
-}
-
-export const usePrivateDataTableApi = (): UsePrivateDataTableApiReturn => {
+export const usePrivateDataTableApi = () => {
     const action = {
-        async add(params: DataTableAddParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDataTable.add<DataTableAddParameters, PrivateDataTableModel>(params);
-        },
-        async transform(params: DataTableTransformParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDataTable.transform<DataTableTransformParameters, PrivateDataTableModel>(params);
-        },
-        async update(params: DataTableUpdateParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDataTable.update<DataTableUpdateParameters, PrivateDataTableModel>(params);
-        },
-        async delete(params: DataTableDeleteParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDataTable.delete<DataTableDeleteParameters>(params);
-        },
-        async load(params: DataTableLoadParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDataTable.load<DataTableLoadParameters, DataTableLoadResponse>(params);
-        },
-        async get(params: DataTableGetParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDataTable.get<DataTableGetParameters, PrivateDataTableModel>(params);
-        },
-        async list(params: DataTableListParameters) {
-            return SpaceConnector.clientV2.dashboard.privateDataTable.list<DataTableListParameters, ListResponse<PrivateDataTableModel>>(params);
-        },
+        add: SpaceConnector.clientV2.dashboard.privateDataTable.add<DataTableAddParameters, PrivateDataTableModel>,
+        transform: SpaceConnector.clientV2.dashboard.privateDataTable.transform<DataTableTransformParameters, PrivateDataTableModel>,
+        update: SpaceConnector.clientV2.dashboard.privateDataTable.update<DataTableUpdateParameters, PrivateDataTableModel>,
+        delete: SpaceConnector.clientV2.dashboard.privateDataTable.delete<DataTableDeleteParameters>,
+        load: SpaceConnector.clientV2.dashboard.privateDataTable.load<DataTableLoadParameters, DataTableLoadResponse>,
+        get: SpaceConnector.clientV2.dashboard.privateDataTable.get<DataTableGetParameters, PrivateDataTableModel>,
+        list: SpaceConnector.clientV2.dashboard.privateDataTable.list<DataTableListParameters, ListResponse<PrivateDataTableModel>>,
     };
 
     return {
diff --git a/apps/web/src/api-clients/dashboard/private-folder/composables/use-private-folder-api.ts b/apps/web/src/api-clients/dashboard/private-folder/composables/use-private-folder-api.ts
index 8dd0ac5f62..b4ec08100a 100644
--- a/apps/web/src/api-clients/dashboard/private-folder/composables/use-private-folder-api.ts
+++ b/apps/web/src/api-clients/dashboard/private-folder/composables/use-private-folder-api.ts
@@ -8,33 +8,14 @@ import type { PrivateFolderListParameters } from '@/api-clients/dashboard/privat
 import type { PrivateFolderUpdateParameters } from '@/api-clients/dashboard/private-folder/schema/api-verbs/update';
 import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
 
-interface UsePrivateFolderApiReturn {
-    privateFolderAPI: {
-        create: (params: PrivateFolderCreateParameters) => Promise<PrivateFolderModel>;
-        update: (params: PrivateFolderUpdateParameters) => Promise<PrivateFolderModel>;
-        delete: (params: PrivateFolderDeleteParameters) => Promise<void>;
-        get: (params: PrivateFolderGetParameters) => Promise<PrivateFolderModel>;
-        list: (params: PrivateFolderListParameters) => Promise<ListResponse<PrivateFolderModel>>;
-    };
-}
 
-export const usePrivateFolderApi = (): UsePrivateFolderApiReturn => {
+export const usePrivateFolderApi = () => {
     const action = {
-        async create(params: PrivateFolderCreateParameters) {
-            return SpaceConnector.clientV2.dashboard.privateFolder.create<PrivateFolderCreateParameters, PrivateFolderModel>(params);
-        },
-        async update(params: PrivateFolderUpdateParameters) {
-            return SpaceConnector.clientV2.dashboard.privateFolder.update<PrivateFolderUpdateParameters, PrivateFolderModel>(params);
-        },
-        async delete(params: PrivateFolderDeleteParameters) {
-            return SpaceConnector.clientV2.dashboard.privateFolder.delete<PrivateFolderDeleteParameters>(params);
-        },
-        async get(params: PrivateFolderGetParameters) {
-            return SpaceConnector.clientV2.dashboard.privateFolder.get<PrivateFolderGetParameters, PrivateFolderModel>(params);
-        },
-        async list(params: PrivateFolderListParameters) {
-            return SpaceConnector.clientV2.dashboard.privateFolder.list<PrivateFolderListParameters, ListResponse<PrivateFolderModel>>(params);
-        },
+        create: SpaceConnector.clientV2.dashboard.privateFolder.create<PrivateFolderCreateParameters, PrivateFolderModel>,
+        update: SpaceConnector.clientV2.dashboard.privateFolder.update<PrivateFolderUpdateParameters, PrivateFolderModel>,
+        delete: SpaceConnector.clientV2.dashboard.privateFolder.delete<PrivateFolderDeleteParameters>,
+        get: SpaceConnector.clientV2.dashboard.privateFolder.get<PrivateFolderGetParameters, PrivateFolderModel>,
+        list: SpaceConnector.clientV2.dashboard.privateFolder.list<PrivateFolderListParameters, ListResponse<PrivateFolderModel>>,
     };
 
     return {
diff --git a/apps/web/src/api-clients/dashboard/private-widget/composables/use-private-widget-api.ts b/apps/web/src/api-clients/dashboard/private-widget/composables/use-private-widget-api.ts
index 6b49c0b001..7889de09e7 100644
--- a/apps/web/src/api-clients/dashboard/private-widget/composables/use-private-widget-api.ts
+++ b/apps/web/src/api-clients/dashboard/private-widget/composables/use-private-widget-api.ts
@@ -11,41 +11,15 @@ import type { PrivateWidgetLoadSumParameters } from '@/api-clients/dashboard/pri
 import type { PrivateWidgetUpdateParameters } from '@/api-clients/dashboard/private-widget/schema/api-verbs/update';
 import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
 
-interface UsePrivateWidgetApiReturn {
-    privateWidgetAPI: {
-        create: (params: PrivateWidgetCreateParameters) => Promise<PrivateWidgetModel>;
-        update: (params: PrivateWidgetUpdateParameters) => Promise<PrivateWidgetModel>;
-        delete: (params: PrivateWidgetDeleteParameters) => Promise<void>;
-        load: (params: PrivateWidgetLoadParameters) => Promise<WidgetLoadResponse>;
-        loadSum: (params: PrivateWidgetLoadSumParameters) => Promise<WidgetLoadResponse>;
-        get: (params: PrivateWidgetGetParameters) => Promise<PrivateWidgetModel>;
-        list: (params: PrivateWidgetListParameters) => Promise<ListResponse<PrivateWidgetModel>>;
-    }
-}
-
-export const usePrivateWidgetApi = (): UsePrivateWidgetApiReturn => {
+export const usePrivateWidgetApi = () => {
     const action = {
-        async create(params: PrivateWidgetCreateParameters) {
-            return SpaceConnector.clientV2.dashboard.privateWidget.create<PrivateWidgetCreateParameters, PrivateWidgetModel>(params);
-        },
-        async update(params: PrivateWidgetUpdateParameters) {
-            return SpaceConnector.clientV2.dashboard.privateWidget.update<PrivateWidgetUpdateParameters, PrivateWidgetModel>(params);
-        },
-        async delete(params: PrivateWidgetDeleteParameters) {
-            return SpaceConnector.clientV2.dashboard.privateWidget.delete<PrivateWidgetDeleteParameters>(params);
-        },
-        async load(params: PrivateWidgetLoadParameters) {
-            return SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>(params);
-        },
-        async loadSum(params: PrivateWidgetLoadSumParameters) {
-            return SpaceConnector.clientV2.dashboard.privateWidget.loadSum<PrivateWidgetLoadSumParameters, WidgetLoadResponse>(params);
-        },
-        async get(params: PrivateWidgetGetParameters) {
-            return SpaceConnector.clientV2.dashboard.privateWidget.get<PrivateWidgetGetParameters, PrivateWidgetModel>(params);
-        },
-        async list(params: PrivateWidgetListParameters) {
-            return SpaceConnector.clientV2.dashboard.privateWidget.list<PrivateWidgetListParameters, ListResponse<PrivateWidgetModel>>(params);
-        },
+        create: SpaceConnector.clientV2.dashboard.privateWidget.create<PrivateWidgetCreateParameters, PrivateWidgetModel>,
+        update: SpaceConnector.clientV2.dashboard.privateWidget.update<PrivateWidgetUpdateParameters, PrivateWidgetModel>,
+        delete: SpaceConnector.clientV2.dashboard.privateWidget.delete<PrivateWidgetDeleteParameters>,
+        load: SpaceConnector.clientV2.dashboard.privateWidget.load<PrivateWidgetLoadParameters, WidgetLoadResponse>,
+        loadSum: SpaceConnector.clientV2.dashboard.privateWidget.loadSum<PrivateWidgetLoadSumParameters, WidgetLoadResponse>,
+        get: SpaceConnector.clientV2.dashboard.privateWidget.get<PrivateWidgetGetParameters, PrivateWidgetModel>,
+        list: SpaceConnector.clientV2.dashboard.privateWidget.list<PrivateWidgetListParameters, ListResponse<PrivateWidgetModel>>,
     };
 
     return {
diff --git a/apps/web/src/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api.ts b/apps/web/src/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api.ts
index 5523e97dd7..ed1d5e728e 100644
--- a/apps/web/src/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api.ts
+++ b/apps/web/src/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api.ts
@@ -11,45 +11,17 @@ import type { PublicDashboardUnshareParameters } from '@/api-clients/dashboard/p
 import type { PublicDashboardUpdateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/update';
 import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 
-interface UsePublicDashboardApiReturn {
-    publicDashboardAPI: {
-        create: (params: PublicDashboardCreateParameters) => Promise<PublicDashboardModel>;
-        update: (params: PublicDashboardUpdateParameters) => Promise<PublicDashboardModel>;
-        changeFolder: (params: PublicDashboardChangeFolderParameters) => Promise<PublicDashboardModel>;
-        share: (params: PublicDashboardShareParameters) => Promise<PublicDashboardModel>;
-        unshare: (params: PublicDashboardUnshareParameters) => Promise<PublicDashboardModel>;
-        delete: (params: PublicDashboardDeleteParameters) => Promise<void>;
-        get: (params: PublicDashboardGetParameters) => Promise<PublicDashboardModel>;
-        list: (params: PublicDashboardListParameters) => Promise<ListResponse<PublicDashboardModel>>;
-    }
-}
 
-export const usePublicDashboardApi = (): UsePublicDashboardApiReturn => {
+export const usePublicDashboardApi = () => {
     const actions = {
-        async create(params: PublicDashboardCreateParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDashboard.create<PublicDashboardCreateParameters, PublicDashboardModel>(params);
-        },
-        async update(params: PublicDashboardUpdateParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDashboard.update<PublicDashboardUpdateParameters, PublicDashboardModel>(params);
-        },
-        async changeFolder(params: PublicDashboardChangeFolderParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDashboard.changeFolder<PublicDashboardChangeFolderParameters, PublicDashboardModel>(params);
-        },
-        async share(params: PublicDashboardShareParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDashboard.share<PublicDashboardShareParameters, PublicDashboardModel>(params);
-        },
-        async unshare(params: PublicDashboardUnshareParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDashboard.unshare<PublicDashboardUnshareParameters, PublicDashboardModel>(params);
-        },
-        async delete(params: PublicDashboardDeleteParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDashboard.delete<PublicDashboardUnshareParameters>(params);
-        },
-        async get(params: PublicDashboardGetParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDashboard.get<PublicDashboardGetParameters, PublicDashboardModel>(params);
-        },
-        async list(params: PublicDashboardListParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDashboard.list<PublicDashboardListParameters, ListResponse<PublicDashboardModel>>(params);
-        },
+        create: SpaceConnector.clientV2.dashboard.publicDashboard.create<PublicDashboardCreateParameters, PublicDashboardModel>,
+        update: SpaceConnector.clientV2.dashboard.publicDashboard.update<PublicDashboardUpdateParameters, PublicDashboardModel>,
+        changeFolder: SpaceConnector.clientV2.dashboard.publicDashboard.changeFolder<PublicDashboardChangeFolderParameters, PublicDashboardModel>,
+        share: SpaceConnector.clientV2.dashboard.publicDashboard.share<PublicDashboardShareParameters, PublicDashboardModel>,
+        unshare: SpaceConnector.clientV2.dashboard.publicDashboard.unshare<PublicDashboardUnshareParameters, PublicDashboardModel>,
+        delete: SpaceConnector.clientV2.dashboard.publicDashboard.delete<PublicDashboardDeleteParameters>,
+        get: SpaceConnector.clientV2.dashboard.publicDashboard.get<PublicDashboardGetParameters, PublicDashboardModel>,
+        list: SpaceConnector.clientV2.dashboard.publicDashboard.list<PublicDashboardListParameters, ListResponse<PublicDashboardModel>>,
     };
 
     return {
diff --git a/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/create.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/create.ts
index fe5c4718e0..d615baf0a9 100644
--- a/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/create.ts
+++ b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/create.ts
@@ -24,4 +24,5 @@ export interface PublicDashboardCreateParameters {
     workspace_id?: string;
     resource_group: Extract<ResourceGroupType, 'DOMAIN'|'WORKSPACE'|'PROJECT'>;
     project_id?: string;
+    project_group_id?: string;
 }
diff --git a/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/list.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/list.ts
index 02105bb824..8fe6638e86 100644
--- a/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/list.ts
+++ b/apps/web/src/api-clients/dashboard/public-dashboard/schema/api-verbs/list.ts
@@ -7,4 +7,6 @@ export interface PublicDashboardListParameters {
     name?: string;
     workspace_id?: string;
     project_id?: string;
+    project_group_id?: string;
+    folder_id?: string;
 }
diff --git a/apps/web/src/api-clients/dashboard/public-dashboard/schema/model.ts b/apps/web/src/api-clients/dashboard/public-dashboard/schema/model.ts
index 5ae600ff6d..dc48203ef7 100644
--- a/apps/web/src/api-clients/dashboard/public-dashboard/schema/model.ts
+++ b/apps/web/src/api-clients/dashboard/public-dashboard/schema/model.ts
@@ -30,6 +30,7 @@ export interface PublicDashboardModel {
     folder_id: string;
     resource_group: Extract<ResourceGroupType, 'DOMAIN'|'WORKSPACE'|'PROJECT'>;
     project_id: string;
+    project_group_id: string;
     workspace_id: string;
     domain_id: string;
     created_at: string;
diff --git a/apps/web/src/api-clients/dashboard/public-data-table/composables/use-public-data-table-api.ts b/apps/web/src/api-clients/dashboard/public-data-table/composables/use-public-data-table-api.ts
index adbd15e3dc..7f513c9625 100644
--- a/apps/web/src/api-clients/dashboard/public-data-table/composables/use-public-data-table-api.ts
+++ b/apps/web/src/api-clients/dashboard/public-data-table/composables/use-public-data-table-api.ts
@@ -12,41 +12,15 @@ import type { DataTableUpdateParameters } from '@/api-clients/dashboard/public-d
 import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
 
 
-interface UsePublicDataTableApiReturn {
-    publicDataTableAPI: {
-        add: (params: DataTableAddParameters) => Promise<PublicDataTableModel>;
-        transform: (params: DataTableTransformParameters) => Promise<PublicDataTableModel>;
-        update: (params: DataTableUpdateParameters) => Promise<PublicDataTableModel>;
-        delete: (params: DataTableDeleteParameters) => Promise<void>;
-        load: (params: DataTableLoadParameters) => Promise<DataTableLoadResponse>;
-        get: (params: DataTableGetParameters) => Promise<PublicDataTableModel>;
-        list: (params: DataTableListParameters) => Promise<ListResponse<PublicDataTableModel>>;
-    }
-}
-
-export const usePublicDataTableApi = (): UsePublicDataTableApiReturn => {
+export const usePublicDataTableApi = () => {
     const action = {
-        async add(params: DataTableAddParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDataTable.add<DataTableAddParameters, PublicDataTableModel>(params);
-        },
-        async transform(params: DataTableTransformParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDataTable.transform<DataTableTransformParameters, PublicDataTableModel>(params);
-        },
-        async update(params: DataTableUpdateParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDataTable.update<DataTableUpdateParameters, PublicDataTableModel>(params);
-        },
-        async delete(params: DataTableDeleteParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDataTable.delete<DataTableDeleteParameters>(params);
-        },
-        async load(params: DataTableLoadParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDataTable.load<DataTableLoadParameters, DataTableLoadResponse>(params);
-        },
-        async get(params: DataTableGetParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDataTable.get<DataTableGetParameters, PublicDataTableModel>(params);
-        },
-        async list(params: DataTableListParameters) {
-            return SpaceConnector.clientV2.dashboard.publicDataTable.list<DataTableListParameters, ListResponse<PublicDataTableModel>>(params);
-        },
+        add: SpaceConnector.clientV2.dashboard.publicDataTable.add<DataTableAddParameters, PublicDataTableModel>,
+        transform: SpaceConnector.clientV2.dashboard.publicDataTable.transform<DataTableTransformParameters, PublicDataTableModel>,
+        update: SpaceConnector.clientV2.dashboard.publicDataTable.update<DataTableUpdateParameters, PublicDataTableModel>,
+        delete: SpaceConnector.clientV2.dashboard.publicDataTable.delete<DataTableDeleteParameters>,
+        load: SpaceConnector.clientV2.dashboard.publicDataTable.load<DataTableLoadParameters, DataTableLoadResponse>,
+        get: SpaceConnector.clientV2.dashboard.publicDataTable.get<DataTableGetParameters, PublicDataTableModel>,
+        list: SpaceConnector.clientV2.dashboard.publicDataTable.list<DataTableListParameters, ListResponse<PublicDataTableModel>>,
     };
 
     return {
diff --git a/apps/web/src/api-clients/dashboard/public-folder/composables/use-public-folder-api.ts b/apps/web/src/api-clients/dashboard/public-folder/composables/use-public-folder-api.ts
index 1fbd43ec39..5ff1607081 100644
--- a/apps/web/src/api-clients/dashboard/public-folder/composables/use-public-folder-api.ts
+++ b/apps/web/src/api-clients/dashboard/public-folder/composables/use-public-folder-api.ts
@@ -10,41 +10,15 @@ import type { PublicFolderUnshareParameters } from '@/api-clients/dashboard/publ
 import type { PublicFolderUpdateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/update';
 import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
 
-interface UsePublicFolderApiReturn {
-    publicFolderAPI: {
-        create: (params: PublicFolderCreateParameters) => Promise<PublicFolderModel>;
-        update: (params: PublicFolderUpdateParameters) => Promise<PublicFolderModel>;
-        share: (params: PublicFolderShareParameters) => Promise<PublicFolderModel>;
-        unshare: (params: PublicFolderUnshareParameters) => Promise<PublicFolderModel>;
-        delete: (params: PublicFolderDeleteParameters) => Promise<void>;
-        get: (params: PublicFolderGetParameters) => Promise<PublicFolderModel>;
-        list: (params: PublicFolderListParameters) => Promise<ListResponse<PublicFolderModel>>;
-    }
-}
-
-export const usePublicFolderApi = (): UsePublicFolderApiReturn => {
+export const usePublicFolderApi = () => {
     const action = {
-        async create(params: PublicFolderCreateParameters) {
-            return SpaceConnector.clientV2.dashboard.publicFolder.create<PublicFolderCreateParameters, PublicFolderModel>(params);
-        },
-        async update(params: PublicFolderUpdateParameters) {
-            return SpaceConnector.clientV2.dashboard.publicFolder.update<PublicFolderUpdateParameters, PublicFolderModel>(params);
-        },
-        async share(params: PublicFolderShareParameters) {
-            return SpaceConnector.clientV2.dashboard.publicFolder.share<PublicFolderShareParameters, PublicFolderModel>(params);
-        },
-        async unshare(params: PublicFolderUnshareParameters) {
-            return SpaceConnector.clientV2.dashboard.publicFolder.unshare<PublicFolderUnshareParameters, PublicFolderModel>(params);
-        },
-        async delete(params: PublicFolderDeleteParameters) {
-            return SpaceConnector.clientV2.dashboard.publicFolder.delete<PublicFolderDeleteParameters>(params);
-        },
-        async get(params: PublicFolderGetParameters) {
-            return SpaceConnector.clientV2.dashboard.publicFolder.get<PublicFolderGetParameters, PublicFolderModel>(params);
-        },
-        async list(params: PublicFolderListParameters) {
-            return SpaceConnector.clientV2.dashboard.publicFolder.list<PublicFolderListParameters, ListResponse<PublicFolderModel>>(params);
-        },
+        create: SpaceConnector.clientV2.dashboard.publicFolder.create<PublicFolderCreateParameters, PublicFolderModel>,
+        update: SpaceConnector.clientV2.dashboard.publicFolder.update<PublicFolderUpdateParameters, PublicFolderModel>,
+        share: SpaceConnector.clientV2.dashboard.publicFolder.share<PublicFolderShareParameters, PublicFolderModel>,
+        unshare: SpaceConnector.clientV2.dashboard.publicFolder.unshare<PublicFolderUnshareParameters, PublicFolderModel>,
+        delete: SpaceConnector.clientV2.dashboard.publicFolder.delete<PublicFolderDeleteParameters>,
+        get: SpaceConnector.clientV2.dashboard.publicFolder.get<PublicFolderGetParameters, PublicFolderModel>,
+        list: SpaceConnector.clientV2.dashboard.publicFolder.list<PublicFolderListParameters, ListResponse<PublicFolderModel>>,
     };
 
     return {
diff --git a/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/create.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/create.ts
index 76d46dcf06..65848de62e 100644
--- a/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/create.ts
+++ b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/create.ts
@@ -9,4 +9,5 @@ export interface PublicFolderCreateParameters {
     dashboards?: string[];
     workspace_id?: string;
     project_id?: string;
+    project_group_id?: string;
 }
diff --git a/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/list.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/list.ts
index 5e48ae7302..69bf18aae1 100644
--- a/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/list.ts
+++ b/apps/web/src/api-clients/dashboard/public-folder/schema/api-verbs/list.ts
@@ -7,4 +7,5 @@ export interface PublicFolderListParameters {
     name?: string;
     workspace_id?: string;
     project_id?: string;
+    project_group_id?: string;
 }
diff --git a/apps/web/src/api-clients/dashboard/public-folder/schema/model.ts b/apps/web/src/api-clients/dashboard/public-folder/schema/model.ts
index 424b1471ea..97a58f9209 100644
--- a/apps/web/src/api-clients/dashboard/public-folder/schema/model.ts
+++ b/apps/web/src/api-clients/dashboard/public-folder/schema/model.ts
@@ -10,6 +10,7 @@ export interface PublicFolderModel {
     tags: Tags;
     resource_group: Extract<ResourceGroupType, 'DOMAIN'|'WORKSPACE'|'PROJECT'>;
     project_id: string;
+    project_group_id: string;
     workspace_id: string;
     domain_id: string;
     created_at: string;
diff --git a/apps/web/src/api-clients/dashboard/public-widget/composables/use-public-widget-api.ts b/apps/web/src/api-clients/dashboard/public-widget/composables/use-public-widget-api.ts
index 41640cb487..655cc8d533 100644
--- a/apps/web/src/api-clients/dashboard/public-widget/composables/use-public-widget-api.ts
+++ b/apps/web/src/api-clients/dashboard/public-widget/composables/use-public-widget-api.ts
@@ -11,41 +11,15 @@ import type { PublicWidgetLoadSumParameters } from '@/api-clients/dashboard/publ
 import type { PublicWidgetUpdateParameters } from '@/api-clients/dashboard/public-widget/schema/api-verbs/update';
 import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
 
-interface UsePublicWidgetApiReturn {
-    publicWidgetAPI: {
-        create: (params: PublicWidgetCreateParameters) => Promise<PublicWidgetModel>;
-        update: (params: PublicWidgetUpdateParameters) => Promise<PublicWidgetModel>;
-        delete: (params: PublicWidgetDeleteParameters) => Promise<void>;
-        load: (params: PublicWidgetLoadParameters) => Promise<WidgetLoadResponse>;
-        loadSum: (params: PublicWidgetLoadSumParameters) => Promise<WidgetLoadResponse>;
-        get: (params: PublicWidgetGetParameters) => Promise<PublicWidgetModel>;
-        list: (params: PublicWidgetListParameters) => Promise<ListResponse<PublicWidgetModel>>;
-    }
-}
-
-export const usePublicWidgetApi = (): UsePublicWidgetApiReturn => {
+export const usePublicWidgetApi = () => {
     const action = {
-        async create(params: PublicWidgetCreateParameters) {
-            return SpaceConnector.clientV2.dashboard.publicWidget.create<PublicWidgetCreateParameters, PublicWidgetModel>(params);
-        },
-        async update(params: PublicWidgetUpdateParameters) {
-            return SpaceConnector.clientV2.dashboard.publicWidget.update<PublicWidgetUpdateParameters, PublicWidgetModel>(params);
-        },
-        async delete(params: PublicWidgetDeleteParameters) {
-            return SpaceConnector.clientV2.dashboard.publicWidget.delete<PublicWidgetDeleteParameters>(params);
-        },
-        async load(params: PublicWidgetLoadParameters) {
-            return SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>(params);
-        },
-        async loadSum(params: PublicWidgetLoadSumParameters) {
-            return SpaceConnector.clientV2.dashboard.publicWidget.loadSum<PublicWidgetLoadSumParameters, WidgetLoadResponse>(params);
-        },
-        async get(params: PublicWidgetGetParameters) {
-            return SpaceConnector.clientV2.dashboard.publicWidget.get<PublicWidgetGetParameters, PublicWidgetModel>(params);
-        },
-        async list(params: PublicWidgetListParameters) {
-            return SpaceConnector.clientV2.dashboard.publicWidget.list<PublicWidgetListParameters, ListResponse<PublicWidgetModel>>(params);
-        },
+        create: SpaceConnector.clientV2.dashboard.publicWidget.create<PublicWidgetCreateParameters, PublicWidgetModel>,
+        update: SpaceConnector.clientV2.dashboard.publicWidget.update<PublicWidgetUpdateParameters, PublicWidgetModel>,
+        delete: SpaceConnector.clientV2.dashboard.publicWidget.delete<PublicWidgetDeleteParameters>,
+        load: SpaceConnector.clientV2.dashboard.publicWidget.load<PublicWidgetLoadParameters, WidgetLoadResponse>,
+        loadSum: SpaceConnector.clientV2.dashboard.publicWidget.loadSum<PublicWidgetLoadSumParameters, WidgetLoadResponse>,
+        get: SpaceConnector.clientV2.dashboard.publicWidget.get<PublicWidgetGetParameters, PublicWidgetModel>,
+        list: SpaceConnector.clientV2.dashboard.publicWidget.list<PublicWidgetListParameters, ListResponse<PublicWidgetModel>>,
     };
 
     return {
diff --git a/apps/web/src/api-clients/inventory/metric-data/composables/use-metric-data-api.ts b/apps/web/src/api-clients/inventory/metric-data/composables/use-metric-data-api.ts
new file mode 100644
index 0000000000..d23b8633d9
--- /dev/null
+++ b/apps/web/src/api-clients/inventory/metric-data/composables/use-metric-data-api.ts
@@ -0,0 +1,25 @@
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { MetricDataAnalyzeParameters } from '@/api-clients/inventory/metric-data/schema/api-verbs/analyze';
+import type { MetricDataListParameters } from '@/schema/inventory/metric-data/api-verbs/list';
+import type { MetricDataModel } from '@/schema/inventory/metric-data/model';
+
+
+
+
+export const useMetricDataApi = () => {
+    const actions = {
+        async list(params: MetricDataListParameters) {
+            return SpaceConnector.clientV2.inventory.metricData.list<MetricDataListParameters, ListResponse<MetricDataModel>>(params);
+        },
+        async analyze<T = any>(params: MetricDataAnalyzeParameters) {
+            return SpaceConnector.clientV2.inventory.metricData.analyze<MetricDataAnalyzeParameters, AnalyzeResponse<T>>(params);
+        },
+    };
+
+    return {
+        metricDataAPI: actions,
+    };
+};
diff --git a/apps/web/src/schema/inventory/metric-data/api-verbs/analyze.ts b/apps/web/src/api-clients/inventory/metric-data/schema/api-verbs/analyze.ts
similarity index 100%
rename from apps/web/src/schema/inventory/metric-data/api-verbs/analyze.ts
rename to apps/web/src/api-clients/inventory/metric-data/schema/api-verbs/analyze.ts
diff --git a/apps/web/src/common/composables/go-back/index.ts b/apps/web/src/common/composables/go-back/index.ts
index 896c21213f..04f0455fa4 100644
--- a/apps/web/src/common/composables/go-back/index.ts
+++ b/apps/web/src/common/composables/go-back/index.ts
@@ -4,13 +4,17 @@ import type { Location } from 'vue-router';
 // CAUTION: Do not change to useRouter() because useRouter is only available in script setup
 import { SpaceRouter } from '@/router';
 
-export const useGoBack = (mainRoute: Location) => {
+export const useGoBack = (mainRoute?: Location) => {
     const pathFrom = ref<Location|undefined>();
     const setPathFrom = (path: Location) => {
         pathFrom.value = path;
     };
 
     const handleClickBackButton = () => {
+        if (!mainRoute) {
+            console.error('mainRoute is not provided');
+            return;
+        }
         if (!pathFrom.value?.name) { // in case of direct access from the other site, go to the main page
             SpaceRouter.router.push(mainRoute).catch(() => {});
         } else if (pathFrom.value.name === mainRoute.name) { // in case of access from the service main page in the same site, go to the previous page
diff --git a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
index f0d5e3d4d8..920c16b11a 100644
--- a/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
+++ b/apps/web/src/common/modules/project/ProjectSelectDropdown.vue
@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
+import type { TranslateResult } from 'vue-i18n';
 
 import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
 import {
@@ -45,7 +46,7 @@ interface Props {
     useFixedMenuStyle?: boolean;
     projectGroupSelectOptions?: ProjectGroupSelectOptions;
     position?: 'left' | 'right';
-    selectionLabel?: string;
+    selectionLabel?: TranslateResult;
     hideCreateButton?: boolean;
     workspaceId?: string;
     isInitSelectedItem?: boolean;
diff --git a/apps/web/src/common/modules/widgets/WidgetFormOverlayLayout.vue b/apps/web/src/common/modules/widgets/WidgetFormOverlayLayout.vue
new file mode 100644
index 0000000000..e9f464aaae
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/WidgetFormOverlayLayout.vue
@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { watch } from 'vue';
+
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+
+import WidgetFormOverlay from '@/common/modules/widgets/_components/WidgetFormOverlay.vue';
+import { useWidgetContextStore } from '@/common/modules/widgets/_store/widget-context-store';
+
+interface Props {
+    dashboard?: DashboardModel;
+}
+
+const props = defineProps<Props>();
+
+const widgetContextStore = useWidgetContextStore();
+
+
+watch(() => props.dashboard, (dashboard) => {
+    widgetContextStore.setDashboard(dashboard);
+}, { immediate: true, deep: true });
+
+</script>
+
+<template>
+    <widget-form-overlay />
+</template>
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
index 445cfc3958..c6d897c2c9 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataSourcePopover.vue
@@ -3,7 +3,6 @@ import {
     computed, reactive, watch,
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
-import { useRoute } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
@@ -13,6 +12,7 @@ import {
 
 import type { WidgetCreateParams, WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
 import type { DataTableAddParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/add';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
@@ -41,21 +41,22 @@ import {
     DATA_TABLE_TYPE, TRANSFORM_DATA_TABLE_DEFAULT_OPTIONS,
 } from '@/common/modules/widgets/_constants/data-table-constant';
 import { getDuplicatedDataTableName } from '@/common/modules/widgets/_helpers/widget-data-table-helper';
+import { useWidgetContextStore } from '@/common/modules/widgets/_store/widget-context-store';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 import type {
     DataTableDataType, DataTableSourceType, DataTableOperator, DataTableAddOptions, DataTableTransformOptions,
 } from '@/common/modules/widgets/types/widget-model';
 
-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 widgetContextStore = useWidgetContextStore();
+const widgetContextState = widgetContextStore.state;
+const widgetContextGetters = widgetContextStore.getters;
 const userStore = useUserStore();
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const dashboardId = computed(() => widgetContextGetters.dashboardId);
 
 const emit = defineEmits<{(e: 'scroll'): void;}>();
 
@@ -76,18 +77,6 @@ const {
 });
 const queryClient = useQueryClient();
 
-const {
-    dashboard,
-} = useDashboardGetQuery({
-    dashboardId,
-});
-const {
-    keys: widgetKeys,
-} = useDashboardWidgetListQuery({
-    dashboardId,
-});
-
-
 const storeState = reactive({
     metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
     costDataSources: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
@@ -204,22 +193,25 @@ const state = reactive({
 });
 
 /* Api */
+const { withSuffix: privateWidgetListWithSuffix } = useServiceQueryKey('dashboard', 'private-widget', 'list');
+const { withSuffix: publicWidgetListWithSuffix } = useServiceQueryKey('dashboard', 'public-widget', 'list');
+
 const widgetCreateFn = (params: WidgetCreateParams): Promise<WidgetModel> => {
-    if (dashboardId.value?.startsWith('private')) {
+    if (!params.dashboard_id) {
+        throw new Error('dashboardId is undefined');
+    }
+
+    if (params.dashboard_id.startsWith('private')) {
         return widgetApi.privateWidgetAPI.create(params);
     }
     return widgetApi.publicWidgetAPI.create(params);
 };
 const { mutateAsync: createWidget, isPending: widgetCreateLoading } = useMutation({
     mutationFn: widgetCreateFn,
-    onSuccess: (data) => {
-        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],
-        } : {
-            ...oldData, results: [data],
-        }));
+    onSuccess: (data, variables) => {
+        const _isPrivate = variables.dashboard_id.startsWith('private');
+        const widgetListQueryKey = _isPrivate ? privateWidgetListWithSuffix(variables.dashboard_id) : publicWidgetListWithSuffix(variables.dashboard_id);
+        queryClient.invalidateQueries({ queryKey: widgetListQueryKey });
         widgetGenerateStore.setWidgetFormInfo(data);
     },
     onError: (e) => {
@@ -227,7 +219,7 @@ const { mutateAsync: createWidget, isPending: widgetCreateLoading } = useMutatio
     },
 });
 const dataTableAddFn = (params: DataTableAddParameters): Promise<DataTableModel> => {
-    if (dashboardId.value?.startsWith('private')) {
+    if (params.widget_id.startsWith('private')) {
         return dataTableApi.privateDataTableAPI.add(params);
     }
     return dataTableApi.publicDataTableAPI.add(params);
@@ -297,10 +289,13 @@ const handleSelectPopperCondition = (condition: DataTableDataType) => {
     state.selectedPopperCondition = condition;
 };
 const handleConfirmDataSource = async () => {
+    if (!dashboardId.value) {
+        throw new Error('dashboardId is undefined');
+    }
     // create widget
     if (widgetGenerateState.overlayType === 'ADD' && !widgetGenerateState.widgetId) {
         await createWidget({
-            dashboard_id: dashboardId.value as string,
+            dashboard_id: dashboardId.value,
             tags: { created_by: userStore.state.userId },
             widget_type: 'table',
         });
@@ -355,7 +350,7 @@ const handleConfirmDataSource = async () => {
 
         const mergedParams = {
             ...addParameters,
-            vars: dashboard.value?.vars || {},
+            vars: widgetContextState.dashboard?.vars || {},
         };
         if (state.selectedDataSourceDomain === DATA_SOURCE_DOMAIN.COST) {
             mergedParams.options = costOptions;
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
index d95158238b..cd116532d6 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardFiltersItem.vue
@@ -4,7 +4,6 @@ import { onClickOutside } from '@vueuse/core/index';
 import {
     computed, onMounted, reactive, ref,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
 import { isArray } from 'lodash';
 
@@ -22,12 +21,12 @@ import {
     KEYWORD_FILTER_DISABLED_KEYS,
 } from '@/common/modules/widgets/_constants/data-table-constant';
 import { isGlobalVariableFormat } from '@/common/modules/widgets/_helpers/global-variable-helper';
+import { useWidgetContextStore } from '@/common/modules/widgets/_store/widget-context-store';
 import type { DataTableQueryFilterForDropdown } from '@/common/modules/widgets/types/widget-data-table-type';
 
 import { blue, gray } from '@/styles/colors';
 
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
-import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
+import { getOrderedGlobalVariables } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper';
 
 
 interface Props {
@@ -39,16 +38,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 widgetContextStore = useWidgetContextStore();
+const widgetContextState = widgetContextStore.state;
+
 const operatorButtonRef = ref<HTMLElement | null>(null);
 
-const { dashboard } = useDashboardGetQuery({
-    dashboardId,
-});
 const state = reactive({
     visibleMenu: false,
     operatorMenu: computed<MenuItem[]>(() => {
@@ -102,7 +100,7 @@ const state = reactive({
     selectedOperator: [] as MenuItem[],
     proxySelectedFilter: useProxyValue<DataTableQueryFilterForDropdown>('selectedFilter', props, emit),
     globalVariableItems: computed<MenuItem[]>(() => {
-        const _refinedProperties: DashboardGlobalVariable[] = Object.values(dashboard.value?.vars_schema?.properties ?? {});
+        const _refinedProperties: DashboardGlobalVariable[] = Object.values(widgetContextState.dashboard?.vars_schema?.properties ?? {});
         const _orderedVariables = getOrderedGlobalVariables(_refinedProperties);
         return _orderedVariables.map((variable) => ({
             name: `{{ global.${variable.key} }}`,
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue
index 50e17a7d08..08d4537ac0 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardHeaderTitle.vue
@@ -214,10 +214,10 @@ const syncDataTableList = async (data: DataTableModel) => {
                  height="1.25rem"
             />
             <p-tooltip class="data-table-name"
-                       :contents="storeState.currentDataTable.name"
+                       :contents="storeState.currentDataTable?.name"
             >
                 <p>
-                    {{ storeState.currentDataTable.name }}
+                    {{ storeState.currentDataTable?.name }}
                 </p>
             </p-tooltip>
             <p-icon-button class="edit-button"
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
index 7b37cb4929..1f4f445748 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformContents.vue
@@ -2,7 +2,6 @@
 import {
     computed, defineExpose, onMounted, reactive, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import {
@@ -51,6 +50,7 @@ import {
     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 { useWidgetContextStore } from '@/common/modules/widgets/_store/widget-context-store';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type {
     DataTableAlertModalMode, TransformDataTableInfo,
@@ -62,10 +62,6 @@ import type {
     JoinOptions, ValueMappingOptions, ConcatOptions, AggregateOptions, AggregateFunction,
 } from '@/common/modules/widgets/types/widget-model';
 
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
-
-
-
 
 
 
@@ -77,17 +73,12 @@ interface Props {
 type DataTableModel = PublicDataTableModel|PrivateDataTableModel;
 
 const props = defineProps<Props>();
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const widgetContextStore = useWidgetContextStore();
+const widgetContextState = widgetContextStore.state;
 
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
 /* Querys */
-const {
-    dashboard,
-} = useDashboardGetQuery({
-    dashboardId,
-});
 const {
     widget,
     keys: widgetKeys,
@@ -359,11 +350,14 @@ const updateDataTable = async (): Promise<DataTableModel|undefined> => {
         }
     };
     if (firstUpdating) {
+        if (!widgetGenerateState.widgetId) {
+            throw new Error('Widget ID is required');
+        }
         const createParams = {
             name: state.dataTableName,
             widget_id: widgetGenerateState.widgetId,
             operator: state.operator,
-            vars: dashboard.value?.vars || {},
+            vars: widgetContextState.dashboard?.vars || {},
             options: { [state.operator]: options() },
         };
         const dataTable = await transformDataTableFn(createParams);
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
index 3aa564b6dc..ec768d3f77 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableCardTransformValueMapping.vue
@@ -119,7 +119,7 @@ const getInvalidFieldNameText = (fieldName?: string): TranslateResult|undefined
     if (!isFieldNameValid(fieldName, storeState.currentDataTable)) return i18n.t('COMMON.WIDGETS.DATA_TABLE.FORM.DUPLICATED_FIELD_NAME');
     return undefined;
 };
-const isFieldNameValid = (fieldName: string, dataTable?: PublicDataTableModel|PrivateDataTableModel): boolean => {
+const isFieldNameValid = (fieldName: string, dataTable?: Partial<PublicDataTableModel|PrivateDataTableModel>): boolean => {
     if (!dataTable) return true;
     const _dataInfoKeys = Object.keys(dataTable.data_info || {});
     return !_dataInfoKeys.includes(fieldName);
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue
index 7092613f88..5ba2d6f6aa 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormDataTableGlobalVariableViewButton.vue
@@ -1,26 +1,22 @@
 <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 { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
-import { getOrderedGlobalVariables } from '@/services/dashboards/helpers/dashboard-global-variables-helper';
+import { useWidgetContextStore } from '@/common/modules/widgets/_store/widget-context-store';
 
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+import { getOrderedGlobalVariables } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper';
 
-const { dashboard } = useDashboardGetQuery({
-    dashboardId,
-});
+const widgetContextStore = useWidgetContextStore();
+const widgetContextState = widgetContextStore.state;
 
 const state = reactive({
     popperVisible: false,
     variableItems: computed<DashboardGlobalVariable[]>(() => {
-        const _refinedProperties: DashboardGlobalVariable[] = Object.values(dashboard.value?.vars_schema?.properties || {})
+        const _refinedProperties: DashboardGlobalVariable[] = Object.values(widgetContextState.dashboard?.vars_schema?.properties || {})
             .map((property) => ({
                 key: property.key,
                 name: property.name,
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
index 326fd1a81c..485cd42d4b 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlay.vue
@@ -3,7 +3,6 @@ import {
     computed, onMounted, reactive, watch,
 } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
-import { useRoute } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
@@ -29,14 +28,9 @@ import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 
-
-
-
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateGetters = widgetGenerateStore.getters;
 const widgetGenerateState = widgetGenerateStore.state;
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
 
 /* Query */
 const {
@@ -101,7 +95,7 @@ const state = reactive({
 /* Api */
 const deleteWidget = async (widgetId: string) => {
     if (!widgetId) return;
-    const isPrivate = dashboardId.value?.startsWith('private');
+    const isPrivate = widgetId?.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 fcda190860..59a24181c5 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayPreviewTable.vue
@@ -5,7 +5,6 @@ import {
 } from 'vue';
 import { useRoute } from 'vue-router/composables';
 
-import { useQuery } from '@tanstack/vue-query';
 import bytes from 'bytes';
 import { sortBy } from 'lodash';
 
@@ -22,6 +21,7 @@ import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data
 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 { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
@@ -37,10 +37,10 @@ import type { DataInfo } from '@/common/modules/widgets/types/widget-model';
 
 import { gray, white } from '@/styles/colors';
 
+import { useDashboardRefinedVars } from '@/services/_shared/dashboard/dashboard-detail/contextual-composables/use-dashboard-refined-vars';
 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 { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 
 
@@ -59,6 +59,8 @@ const widgetGenerateState = widgetGenerateStore.state;
 const allReferenceStore = useAllReferenceStore();
 const route = useRoute();
 const dashboardId = computed(() => route.params.dashboardId);
+const { refinedVars } = useDashboardRefinedVars(dashboardId);
+
 const {
     privateDataTableAPI,
 } = usePrivateDataTableApi();
@@ -72,9 +74,6 @@ const {
 } = useWidgetDataTableListQuery({
     widgetId: computed(() => widgetGenerateState.widgetId),
 });
-const { dashboard } = useDashboardGetQuery({
-    dashboardId,
-});
 
 const storeState = reactive({
     selectedDataTableId: computed<string|undefined>(() => widgetGenerateState.selectedDataTableId),
@@ -256,14 +255,6 @@ const getSortIcon = (field: PreviewTableField) => {
     // return '';
 };
 
-// const getTimeDiffSubText = (field: PreviewTableField): string => {
-//     if (!state.dataInfo?.[field.name]) return '';
-//     const { timediff } = state.dataInfo[field.name];
-//     if (!timediff || !Object.entries(timediff ?? {}).length) return '';
-//     const [key, value] = Object.entries(timediff)[0];
-//     return `( ${value} ${key} )`;
-// };
-
 const { key: privateDataTableLoadQueryKey, params: privateDataTableLoadParams } = useServiceQueryKey('dashboard', 'private-data-table', 'load', {
     contextKey: computed(() => storeState.selectedDataTableId),
     params: computed<DataTableLoadParameters>(() => ({
@@ -271,7 +262,7 @@ const { key: privateDataTableLoadQueryKey, params: privateDataTableLoadParams }
         granularity: state.selectedGranularity,
         sort: state.sortBy,
         page: state.page,
-        vars: dashboard.value?.vars,
+        vars: refinedVars.value,
     })),
 });
 
@@ -282,11 +273,11 @@ const { key: publicDataTableLoadQueryKey, params: publicDataTableLoadParams } =
         granularity: state.selectedGranularity,
         sort: state.sortBy,
         page: state.page,
-        vars: dashboard.value?.vars,
+        vars: refinedVars.value,
     })),
 });
 
-const queryResult = useQuery({
+const queryResult = useScopedQuery({
     queryKey: state.isPrivate ? privateDataTableLoadQueryKey.value : publicDataTableLoadQueryKey.value,
     queryFn: () => {
         if (!storeState.selectedDataTableId) {
@@ -300,7 +291,7 @@ const queryResult = useQuery({
     enabled: computed(() => storeState.selectedDataTableId !== undefined && state.selectedDataTable !== undefined),
     staleTime: WIDGET_LOAD_STALE_TIME,
     retry: 2,
-});
+}, ['WORKSPACE', 'DOMAIN']);
 
 const dataTableLoading = computed<boolean>(() => queryResult.isLoading.value || queryResult.isFetching.value);
 const isError = computed<boolean>(() => queryResult.isError.value);
diff --git a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
index 66977f6351..d8df4af368 100644
--- a/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
+++ b/apps/web/src/common/modules/widgets/_components/WidgetFormOverlayStep2.vue
@@ -2,7 +2,6 @@
 import {
     computed, onBeforeMount, onUnmounted, reactive, ref, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep, isEqual } from 'lodash';
@@ -12,8 +11,12 @@ import {
 } from '@cloudforet/mirinae';
 
 import type {
-    DashboardOptions, DashboardVars,
+    DashboardModel,
+    DashboardOptions, DashboardUpdateParams, DashboardVars,
 } from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
@@ -30,48 +33,51 @@ import { WIDGET_WIDTH_RANGE_LIST } from '@/common/modules/widgets/_constants/wid
 import { getWidgetComponent } from '@/common/modules/widgets/_helpers/widget-component-helper';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
 import { sanitizeWidgetOptions } from '@/common/modules/widgets/_helpers/widget-options-helper';
+import { useWidgetContextStore } from '@/common/modules/widgets/_store/widget-context-store';
 import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 import WidgetFieldValueManager from '@/common/modules/widgets/_widget-field-value-manager';
 import type { DataTableModel } from '@/common/modules/widgets/types/widget-data-table-type';
 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 { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
-import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query';
+import DashboardToolsetDateDropdown from '@/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetDateDropdown.vue';
+import { useDashboardWidgetListQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-widget-list-query';
+import DashboardVariablesV2 from '@/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardVariablesV2.vue';
+import { useDashboardRefinedVars } from '@/services/_shared/dashboard/dashboard-detail/contextual-composables/use-dashboard-refined-vars';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
+import { useDashboardVarsStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-vars-store';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import {
     useAllReferenceTypeInfoStore,
 } from '@/services/dashboards/stores/all-reference-type-info-store';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
-
-
 
 const overlayWidgetRef = ref<HTMLElement|null>(null);
 const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
-const dashboardDetailGetters = dashboardDetailStore.getters;
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
+const dashboardVarsStore = useDashboardVarsStore();
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
 const appContextStore = useAppContextStore();
+const widgetContextStore = useWidgetContextStore();
+const widgetContextGetters = widgetContextStore.getters;
+const widgetContextState = widgetContextStore.state;
+const {
+    publicDashboardAPI,
+} = usePublicDashboardApi();
+const {
+    privateDashboardAPI,
+} = usePrivateDashboardApi();
+
 
 const emit = defineEmits<{(event: 'watch-options-changed', value: boolean): void;}>();
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const dashboard = computed<DashboardModel|undefined>(() => widgetContextState.dashboard);
+const dashboardId = computed(() => widgetContextGetters.dashboardId);
+const { refinedVars } = useDashboardRefinedVars(dashboardId);
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
 
 /* Query */
-const {
-    dashboard,
-    keys: dashboardKeys,
-    fetcher: dashboardFetcher,
-} = useDashboardGetQuery({
-    dashboardId,
-});
 const {
     widgetList,
 } = useDashboardWidgetListQuery({
@@ -189,6 +195,10 @@ const updateWidget = async () => {
     }
 
     if (_isCreating || state.isDashboardLayoutChanged) {
+        if (!dashboardId.value) {
+            console.error('dashboard is not found');
+            return;
+        }
         const _layouts = cloneDeep(dashboard.value?.layouts || []);
         if (_layouts.length) {
             const _targetLayout = _layouts[0];
@@ -212,12 +222,17 @@ const updateWidget = async () => {
     }
 };
 
+const { withSuffix: publicDashboardGetQueryKeyWithSuffix } = useServiceQueryKey('dashboard', 'public-dashboard', 'get');
+const { withSuffix: privateDashboardGetQueryKeyWithSuffix } = useServiceQueryKey('dashboard', 'private-dashboard', 'get');
+const updateDashboardFn = (params: DashboardUpdateParams): Promise<DashboardModel> => (state.isPrivate ? privateDashboardAPI.update(params) : publicDashboardAPI.update(params));
 const { mutate: updateDashboard } = useMutation(
     {
-        mutationFn: dashboardFetcher.updateDashboardFn,
-        onSuccess: (data) => {
-            const dashboardQueryKey = state.isPrivate ? dashboardKeys.privateDashboardGetQueryKey : dashboardKeys.publicDashboardGetQueryKey;
-            queryClient.setQueryData(dashboardQueryKey.value, () => data);
+        mutationFn: updateDashboardFn,
+        onSuccess: (_, variables) => {
+            const dashboardQueryKey = state.isPrivate
+                ? privateDashboardGetQueryKeyWithSuffix(variables.dashboard_id)
+                : publicDashboardGetQueryKeyWithSuffix(variables.dashboard_id);
+            queryClient.invalidateQueries({ queryKey: dashboardQueryKey });
         },
     },
 );
@@ -247,10 +262,10 @@ const sanitizeAndSortWidgets = (_layoutWidgets: string[] = [], _widgetList: stri
 
 const initSnapshot = () => {
     state.varsSnapshot = cloneDeep(dashboard.value?.vars || {});
-    state.dashboardOptionsSnapshot = cloneDeep(dashboardDetailState.options);
+    state.dashboardOptionsSnapshot = cloneDeep(dashboard.value?.options || {});
 };
 const reset = () => {
-    dashboardDetailStore.setVars(state.varsSnapshot);
+    dashboardVarsStore.setVars(state.varsSnapshot);
     dashboardDetailStore.setOptions(state.dashboardOptionsSnapshot);
 };
 
@@ -318,6 +333,7 @@ onUnmounted(() => {
                         />
                         <dashboard-variables-v2 disable-save-button
                                                 widget-mode
+                                                :dashboard-id="dashboardId"
                                                 :is-project-dashboard="!!dashboard?.project_id"
                         />
                     </div>
@@ -359,8 +375,8 @@ onUnmounted(() => {
                            :width="state.widgetWidth"
                            :widget-options="widget?.options"
                            :data-tables="dataTableList"
-                           :dashboard-options="dashboardDetailState.options"
-                           :dashboard-vars="dashboardDetailGetters.refinedVars"
+                           :dashboard-options="dashboard?.options"
+                           :dashboard-vars="refinedVars"
                            :dashboard-id="dashboardId"
                            :all-reference-type-info="state.allReferenceTypeInfo"
                            disable-refresh-on-loading
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
index e3f64b72f7..1e1da9e641 100644
--- 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
@@ -50,11 +50,13 @@ export const useWidgetDataTableListQuery = ({
 
     /* Query Keys */
     const { key: publicDataTableListQueryKey, params: publicDataTableListParams } = useServiceQueryKey('dashboard', 'public-data-table', 'list', {
+        contextKey: widgetId.value,
         params: computed<DataTableListParameters>(() => ({
             widget_id: widgetId.value as string,
         })),
     });
     const { key: privateDataTableListQueryKey, params: privateDataTableListParams } = useServiceQueryKey('dashboard', 'private-data-table', 'list', {
+        contextKey: widgetId.value,
         params: computed<DataTableListParameters>(() => ({
             widget_id: widgetId.value as string,
         })),
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
index da12af8543..959b66eaa7 100644
--- 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
@@ -2,7 +2,6 @@ import type { ComputedRef } from 'vue';
 import { computed } from 'vue';
 
 import { usePrivateDataTableApi } from '@/api-clients/dashboard/private-data-table/composables/use-private-data-table-api';
-import 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 { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
@@ -15,28 +14,25 @@ export const useWidgetDataTableQuery = (dataTableId: ComputedRef<string|undefine
     const { publicDataTableAPI } = usePublicDataTableApi();
     const { privateDataTableAPI } = usePrivateDataTableApi();
 
-    const isPrivate = computed(() => {
-        if (!dataTableId.value) return false;
-        return dataTableId.value.startsWith('private');
-    });
+    const isPrivate = computed(() => 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,
+        params: computed(() => ({
+            data_table_id: dataTableId.value as string,
+        })),
     });
     const { key: privateKey, params: privateParams } = useServiceQueryKey('dashboard', 'private-data-table', 'get', {
         contextKey: dataTableId,
-        params: {
-            data_table_id: dataTableId.value,
-        } as DataTableGetParameters,
+        params: computed(() => ({
+            data_table_id: dataTableId.value as string,
+        })),
     });
 
     const privateDataTableQuery = useScopedQuery({
         queryKey: privateKey,
         queryFn: () => {
-            if (!dataTableId.value) {
+            if (!privateParams.value.data_table_id) {
                 throw new Error('DataTable ID is required for fetching data');
             }
             return privateDataTableAPI.get(privateParams.value);
@@ -48,7 +44,7 @@ export const useWidgetDataTableQuery = (dataTableId: ComputedRef<string|undefine
     const publicDataTableQuery = useScopedQuery({
         queryKey: publicKey,
         queryFn: () => {
-            if (!dataTableId.value) {
+            if (!publicParams.value.data_table_id) {
                 throw new Error('DataTable ID is required for fetching data');
             }
             return publicDataTableAPI.get(publicParams.value);
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.ts
similarity index 51%
rename from apps/web/src/common/modules/widgets/_composables/use-widget-load-query-context.ts
rename to apps/web/src/common/modules/widgets/_composables/use-widget-load-query.ts
index 6ec6838275..6505b30313 100644
--- 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.ts
@@ -1,30 +1,29 @@
 import { computed, type ComputedRef } from 'vue';
 
-import type { WidgetLoadParams, WidgetLoadResponse, WidgetLoadSumParams } from '@/api-clients/dashboard/_types/widget-type';
+import type { WidgetLoadParams, 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 { useScopedQuery } from '@/query/composables/use-scoped-query';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
+import { WIDGET_LOAD_STALE_TIME } from '@/common/modules/widgets/_constants/widget-constant';
 
 
-interface UseWidgetLoadQueryContextOptions {
+
+interface UseWidgetLoadQueryOptions {
     widgetId: ComputedRef<string>;
     params: ComputedRef<WidgetLoadParams>;
     additionalDeps?: ComputedRef<object>;
-}
-
-interface UseWidgetLoadQueryContextResult {
-    fetcher: () => Promise<WidgetLoadResponse>;
-    key: ComputedRef<QueryKeyArray>;
+    enabled?: ComputedRef<boolean>;
 }
 
 
-export const useWidgetLoadQueryContext = ({
+export const useWidgetLoadQuery = ({
     widgetId,
     params,
     additionalDeps,
-}: UseWidgetLoadQueryContextOptions): UseWidgetLoadQueryContextResult => {
+    enabled,
+}: UseWidgetLoadQueryOptions) => {
     const { publicWidgetAPI } = usePublicWidgetApi();
     const { privateWidgetAPI } = usePrivateWidgetApi();
 
@@ -46,37 +45,39 @@ export const useWidgetLoadQueryContext = ({
         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,
-    };
+    return useScopedQuery({
+        queryKey: isPrivate.value ? privateWidgetLoadQueryKey : publicWidgetLoadQueryKey,
+        queryFn: () => {
+            if (isPrivate.value) {
+                if (!privateWidgetLoadParams.value) {
+                    throw new Error('Widget parameters are required');
+                }
+                return privateWidgetAPI.load(privateWidgetLoadParams.value);
+            }
+            if (!publicWidgetLoadParams.value) {
+                throw new Error('Widget parameters are required');
+            }
+            return publicWidgetAPI.load(publicWidgetLoadParams.value);
+        },
+        enabled,
+        staleTime: WIDGET_LOAD_STALE_TIME,
+    }, ['DOMAIN', 'WORKSPACE']);
 };
 
 
-interface UseWidgetLoadSumQueryContextOptions {
+interface UseWidgetLoadSumQueryOptions {
     widgetId: ComputedRef<string>;
     params: ComputedRef<WidgetLoadSumParams>;
     additionalDeps?: ComputedRef<object>;
-}
-interface UseWidgetLoadSumQueryContextResult {
-    fetcher: () => Promise<WidgetLoadResponse>;
-    key: ComputedRef<QueryKeyArray>;
+    enabled?: ComputedRef<boolean>;
 }
 
-export const useWidgetLoadSumQueryContext = ({
+export const useWidgetLoadSumQuery = ({
     widgetId,
     params,
     additionalDeps,
-}: UseWidgetLoadSumQueryContextOptions): UseWidgetLoadSumQueryContextResult => {
+    enabled,
+}: UseWidgetLoadSumQueryOptions) => {
     const { publicWidgetAPI } = usePublicWidgetApi();
     const { privateWidgetAPI } = usePrivateWidgetApi();
 
@@ -98,17 +99,21 @@ export const useWidgetLoadSumQueryContext = ({
         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,
-    };
+    return useScopedQuery({
+        queryKey: isPrivate.value ? privateWidgetLoadSumQueryKey : publicWidgetLoadSumQueryKey,
+        queryFn: () => {
+            if (isPrivate.value) {
+                if (!privateWidgetLoadSumParams.value) {
+                    throw new Error('Widget parameters are required');
+                }
+                return privateWidgetAPI.loadSum(privateWidgetLoadSumParams.value);
+            }
+            if (!publicWidgetLoadSumParams.value) {
+                throw new Error('Widget parameters are required');
+            }
+            return publicWidgetAPI.loadSum(publicWidgetLoadSumParams.value);
+        },
+        enabled,
+        staleTime: WIDGET_LOAD_STALE_TIME,
+    }, ['DOMAIN', 'WORKSPACE']);
 };
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
index 9619e60bc5..51fa69001f 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
@@ -1,7 +1,7 @@
 import { range } from 'lodash';
 import { describe, it, expect } from 'vitest';
 
-import { getRefinedXYChartData } from '@/services/dashboards/widgets/_helpers/widget-chart-data-helper';
+import { getRefinedXYChartData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper';
 
 interface SubData {
     date: string;
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
index b7f20f2a23..7d33b784d3 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
@@ -7,7 +7,7 @@ import type { InheritOptions, WidgetConfig, WidgetOptionsSchema } from '@/api-cl
 import {
     getInheritingOptionKeys,
     getInitialWidgetInheritOptions,
-} from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper';
 
 
 
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
index 61d4f9a8a7..268f259ed6 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
@@ -1,6 +1,6 @@
 import type { WidgetFilterKey, WidgetFiltersMap } from '@/api-clients/dashboard/_types/widget-type';
 
-import { setFilterAndGetWidgetFiltersMap } from '@/services/dashboards/widgets/_helpers/widget-options-filters-helper';
+import { setFilterAndGetWidgetFiltersMap } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-filters-helper';
 
 
 describe('[Widget Options Filters Helper] setFilterAndGetWidgetFiltersMap', () => {
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-schema-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-schema-helper.test.ts
index 611ed71954..3ae48a18fc 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-schema-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-schema-helper.test.ts
@@ -6,7 +6,7 @@ import type { InheritOptions, WidgetConfig, WidgetOptions } from '@/api-clients/
 import {
     getInitialSchemaProperties, getNonInheritedWidgetOptionNamesAmongUsedVariables,
     getRefinedSchemaProperties, getWidgetOptionKeyByVariableKey,
-} from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
 
 const DEFAULT_WIDGET_CONFIG = {
     widget_config_id: 'test',
diff --git a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-value-label-helper.test.ts b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
index 2f2235dbac..75a8942bab 100644
--- a/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
+++ b/apps/web/src/common/modules/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
@@ -1,7 +1,7 @@
 import { describe } from 'vitest';
 
+import { getWidgetValueLabel } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
-import { getWidgetValueLabel } from '@/services/dashboards/widgets/_helpers/widget-value-label-helper';
 
 const mockAllReferenceTypeInfo: AllReferenceTypeInfo = {
     provider: {
diff --git a/apps/web/src/common/modules/widgets/_store/widget-context-store.ts b/apps/web/src/common/modules/widgets/_store/widget-context-store.ts
new file mode 100644
index 0000000000..bafe716292
--- /dev/null
+++ b/apps/web/src/common/modules/widgets/_store/widget-context-store.ts
@@ -0,0 +1,32 @@
+import { computed, reactive } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import type { DashboardModel, DashboardOptions } from '@/api-clients/dashboard/_types/dashboard-type';
+
+export const useWidgetContextStore = defineStore('widget-context', () => {
+    const state = reactive({
+        dashboard: undefined as DashboardModel | undefined,
+    });
+
+
+    const getters = {
+        dashboardId: computed<string | undefined>(() => state.dashboard?.dashboard_id),
+        options: computed<DashboardOptions>(() => state.dashboard?.options || {}),
+    };
+
+    const setDashboard = (dashboard?: DashboardModel) => {
+        state.dashboard = dashboard;
+    };
+
+
+    const mutations = {
+        setDashboard,
+    };
+
+    return {
+        state,
+        getters,
+        ...mutations,
+    };
+});
diff --git a/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue b/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue
index 2116a352f8..4ded536921 100644
--- a/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue
+++ b/apps/web/src/common/modules/widgets/_widget-fields/date-range/WidgetFieldDateRange.vue
@@ -13,6 +13,7 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
+import { useWidgetContextStore } from '@/common/modules/widgets/_store/widget-context-store';
 import {
     DAILY_ENABLED_VALUES,
     DATE_RANGE_ADVANCED_OPERATOR_MAP,
@@ -34,7 +35,6 @@ import type {
     WidgetFieldComponentProps,
 } from '@/common/modules/widgets/types/widget-field-type';
 
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 const GRANULARITY_UNIT_MAP = {
     MONTHLY: { singular: 'Month', plural: 'Months' },
@@ -51,13 +51,12 @@ const getCommonDateRangeValueLabel = (value: string): string => {
 const FIELD_KEY = 'dateRange';
 
 const props = defineProps<WidgetFieldComponentProps<DateRangeOptions>>();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
-
+const widgetContextStore = useWidgetContextStore();
+const widgetContextState = widgetContextStore.state;
 const state = reactive({
     fieldValue: computed<DateRangeValue>(() => props.fieldManager.data[FIELD_KEY].value),
     granularity: computed<GranularityValue['granularity']>(() => (props.fieldManager.data.granularity?.value?.granularity || 'MONTHLY')),
-    baseDateRange: computed<DateRange|undefined>(() => dashboardDetailState.options.date_range),
+    baseDateRange: computed<DateRange|undefined>(() => widgetContextState.dashboard?.options?.date_range),
     valueMenuItems: computed<MenuItem[]>(() => {
         if (state.granularity === 'MONTHLY') return MONTHLY_ENABLED_VALUES.map((value) => ({ label: DATE_RANGE_MONTHLY_VALUE_MAP[value] || getCommonDateRangeValueLabel(value), name: value }));
         if (state.granularity === 'DAILY') return DAILY_ENABLED_VALUES.map((value) => ({ label: DATE_RANGE_DAILY_VALUE_MAP[value] || getCommonDateRangeValueLabel(value), name: value }));
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 c85c658a34..3f38a00046 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
@@ -4,7 +4,6 @@ import {
     computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import type { BarSeriesOption } from 'echarts/charts';
 import { init } from 'echarts/core';
@@ -24,9 +23,9 @@ 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 { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
+import { useWidgetLoadQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
 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_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     getReferenceLabel,
@@ -75,7 +74,7 @@ const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
 
     unitMap: computed<Record<string, string>>(() => widgetFrameProps.value.unitMap || {}),
-    data: computed<WidgetLoadResponse | null>(() => queryResult.data?.value ?? null),
+    data: computed<WidgetLoadResponse | null>(() => loadQuery.data?.value ?? null),
     chart: null as EChartsType | null,
     dataField: computed<string>(() => widgetOptionsState.dataFieldInfo?.data?.[0] || ''),
     xAxisData: computed<string[]>(() => {
@@ -175,7 +174,7 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -190,19 +189,13 @@ const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
         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 || dataTableLoading.value);
+const widgetLoading = computed<boolean>(() => loadQuery.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;
+    return loadQuery.error?.value?.message as string;
 });
 
 /* Util */
@@ -295,7 +288,7 @@ useResizeObserver(chartContext, throttle(() => {
 
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResult.refetch();
+        loadQuery.refetch();
     },
 });
 onMounted(() => {
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 f4bcc66a3f..c2d47f3a69 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
@@ -3,7 +3,6 @@ import {
     computed, defineExpose, onMounted, reactive, watch,
 } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
 import { orderBy } from 'lodash';
 
 import {
@@ -18,8 +17,7 @@ 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 { 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 { useWidgetLoadQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
 import {
     getReferenceLabel,
 } from '@/common/modules/widgets/_helpers/widget-date-helper';
@@ -68,7 +66,7 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -88,23 +86,18 @@ const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
         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 || dataTableLoading.value);
+
+const widgetLoading = computed<boolean>(() => loadQuery.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;
+    return loadQuery.error?.value?.message as string;
 });
 
 const refinedData = computed(() => {
-    const data = queryResult.data?.value;
+    const data = loadQuery.data?.value;
     if (!data?.results || !widgetOptionsState.groupByInfo?.data || !widgetOptionsState.formatRulesInfo?.field) return [];
     const groupByField = widgetOptionsState.groupByInfo.data as string;
     const formatRulesField = widgetOptionsState.formatRulesInfo.field as string;
@@ -153,7 +146,7 @@ watch(() => widgetOptionsState.formatRulesInfo, async () => {
 
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResult.refetch();
+        loadQuery.refetch();
     },
 });
 onMounted(() => {
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 0996b2bebf..49110e10ca 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
@@ -4,7 +4,6 @@ import {
     computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
 import { cloneDeep, throttle } from 'lodash';
 
 import { PTooltip } from '@cloudforet/mirinae';
@@ -18,9 +17,9 @@ 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 { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
+import { useWidgetLoadQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
 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_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     getReferenceLabel,
@@ -68,7 +67,7 @@ const { dateRange } = useWidgetDateRange({
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
 
-    data: computed<WidgetLoadResponse|undefined>(() => queryResult.data?.value),
+    data: computed<WidgetLoadResponse|undefined>(() => loadQuery.data?.value),
     dataField: computed<string>(() => widgetOptionsState.dataFieldInfo?.data?.[0] || ''),
     // unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[state.dataField]),
     boxWidth: BOX_MIN_WIDTH,
@@ -111,7 +110,7 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -125,19 +124,14 @@ const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
         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 || dataTableLoading.value);
+
+const widgetLoading = computed<boolean>(() => loadQuery.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;
+    return loadQuery.error?.value?.message as string;
 });
 
 /* Util */
@@ -219,7 +213,7 @@ watch(() => widgetOptionsState, () => {
 /* Lifecycle */
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResult.refetch();
+        loadQuery.refetch();
     },
 });
 onMounted(() => {
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 6edf530f7e..ab94c99bba 100644
--- a/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/gauge/Gauge.vue
@@ -4,7 +4,6 @@ import {
     computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
 import type { GaugeSeriesOption } from 'echarts/charts';
 import type {
     EChartsType,
@@ -20,8 +19,7 @@ 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 { 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 { useWidgetLoadQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
 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';
@@ -58,7 +56,7 @@ const state = reactive({
         if (!widgetOptionsState.dataFieldInfo?.data) return undefined;
         return widgetFrameProps.value.unitMap?.[widgetOptionsState.dataFieldInfo.data as string];
     }),
-    data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
+    data: computed<WidgetLoadResponse | null>(() => loadQuery.data?.value || null),
     chart: null as EChartsType | null,
     chartData: undefined as undefined|number,
     chartOptions: computed<{series: GaugeSeriesOption[]}>(() => ({
@@ -135,7 +133,7 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -148,19 +146,13 @@ const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
         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 || dataTableLoading.value);
+const widgetLoading = computed<boolean>(() => loadQuery.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;
+    return loadQuery.error?.value?.message as string;
 });
 
 /* Util */
@@ -189,7 +181,7 @@ watch([() => state.data, () => props.widgetOptions, dataTable], ([newData,, _dat
 
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResult.refetch();
+        loadQuery.refetch();
     },
 });
 onMounted(() => {
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 8bd5bbe456..32e2c3d410 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
@@ -4,7 +4,6 @@ import {
     computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
 import axios from 'axios';
 import type { MapSeriesOption } from 'echarts/charts';
 import { init, registerMap } from 'echarts/core';
@@ -25,8 +24,7 @@ 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 { 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 { useWidgetLoadQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
 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';
@@ -62,7 +60,7 @@ const state = reactive({
     mapLoaded: false,
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
 
-    data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
+    data: computed<WidgetLoadResponse | null>(() => loadQuery.data?.value || null),
     chart: null as EChartsType | null,
     chartData: [],
     unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[widgetOptionsState.dataFieldInfo?.data as string]),
@@ -110,7 +108,7 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -124,19 +122,13 @@ const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
         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 || dataTableLoading.value);
+const widgetLoading = computed<boolean>(() => loadQuery.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;
+    return loadQuery.error?.value?.message;
 });
 
 /* Util */
@@ -194,7 +186,7 @@ useResizeObserver(chartContext, throttle(() => {
 
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResult.refetch();
+        loadQuery.refetch();
     },
 });
 onMounted(() => {
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 e0d86cd826..751f417581 100644
--- a/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/heatmap/Heatmap.vue
@@ -4,7 +4,6 @@ import {
     computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import type { HeatmapSeriesOption } from 'echarts/charts';
 import type { EChartsType } from 'echarts/core';
@@ -20,9 +19,9 @@ 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 { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
+import { useWidgetLoadQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
 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_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
 import { SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     getReferenceLabel,
@@ -65,7 +64,7 @@ const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
 
-    data: computed<WidgetLoadResponse | null>(() => queryResult.data?.value ?? null),
+    data: computed<WidgetLoadResponse | null>(() => loadQuery.data?.value ?? null),
     dataField: computed<string>(() => widgetOptionsState.dataFieldInfo?.data?.[0] || ''),
     chart: null as EChartsType | null,
     xAxisData: computed<string[]>(() => {
@@ -176,7 +175,7 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -190,19 +189,13 @@ const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
         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 || dataTableLoading.value);
+const widgetLoading = computed<boolean>(() => loadQuery.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;
+    return loadQuery.error?.value?.message as string;
 });
 
 
@@ -248,7 +241,7 @@ useResizeObserver(chartContext, throttle(() => {
 
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResult.refetch();
+        loadQuery.refetch();
     },
 });
 onMounted(() => {
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 9fcf4a42d3..2b51a5851a 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
@@ -4,7 +4,6 @@ import {
     computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import type { LineSeriesOption } from 'echarts/charts';
 import { init } from 'echarts/core';
@@ -24,9 +23,9 @@ 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 { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
+import { useWidgetLoadQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
 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_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     getReferenceLabel, getWidgetDateFields, getWidgetDateRange,
@@ -74,7 +73,7 @@ const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
 
-    data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
+    data: computed<WidgetLoadResponse | null>(() => loadQuery.data?.value || null),
     chart: null as EChartsType | null,
     dataField: computed<string>(() => widgetOptionsState.dataFieldInfo?.data?.[0] || ''),
     xAxisData: computed<string[]>(() => {
@@ -181,7 +180,7 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -196,20 +195,14 @@ const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
         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 || dataTableLoading.value);
+
+const widgetLoading = computed<boolean>(() => loadQuery.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;
+    return loadQuery.error?.value?.message as string;
 });
 
 /* Util */
@@ -280,7 +273,7 @@ useResizeObserver(chartContext, throttle(() => {
 
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResult.refetch();
+        loadQuery.refetch();
     },
 });
 onMounted(() => {
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 959d495bfb..357f36f0aa 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
@@ -4,7 +4,6 @@ import {
     computed, defineExpose, onMounted, reactive, ref,
 } from 'vue';
 
-import { useQueries } from '@tanstack/vue-query';
 import { debounce, throttle } from 'lodash';
 
 import {
@@ -19,9 +18,8 @@ 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 { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetLoadSumQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
+import { useWidgetLoadSumQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
 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 {
     getPreviousDateRange,
@@ -63,8 +61,8 @@ const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
     previousLoading: false,
 
-    data: computed<WidgetLoadResponse | null>(() => queryResults.value?.[0].data || null),
-    previousData: computed<WidgetLoadResponse | null>(() => queryResults.value?.[1]?.data || null),
+    data: computed<WidgetLoadResponse | null>(() => loadQuery.data?.value || null),
+    previousData: computed<WidgetLoadResponse | null>(() => comparisonQuery.data?.value || null),
     unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[widgetOptionsState.dataFieldInfo?.data as string]),
     previousValue: computed<number>(() => {
         if (isPivotDataTable.value) return state.previousData?.results?.[0]?.[SUB_TOTAL_NAME] ?? 0;
@@ -151,7 +149,7 @@ const setValueTextFontSize = debounce(() => {
 }, 300);
 
 /* Api */
-const { fetcher: baseQueryFn, key: baseQueryKey } = useWidgetLoadSumQueryContext({
+const loadQuery = useWidgetLoadSumQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -164,10 +162,11 @@ const { fetcher: baseQueryFn, key: baseQueryKey } = useWidgetLoadSumQueryContext
         widgetName: props.widgetName,
         dataTableId: props.dataTableId,
     })),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
 });
 
 
-const { fetcher: comparisonQueryFn, key: comparisonQueryKey } = useWidgetLoadSumQueryContext({
+const comparisonQuery = useWidgetLoadSumQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -180,30 +179,15 @@ const { fetcher: comparisonQueryFn, key: comparisonQueryKey } = useWidgetLoadSum
         widgetName: props.widgetName,
         dataTableId: props.dataTableId,
     })),
+    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && widgetOptionsState.comparisonInfo?.toggleValue && !props.loadDisabled),
 });
 
-const queryResults = useQueries({
-    queries: [
-        {
-            queryKey: baseQueryKey,
-            queryFn: baseQueryFn,
-            enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
-            staleTime: WIDGET_LOAD_STALE_TIME,
-        },
-        {
-            queryKey: comparisonQueryKey,
-            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 || dataTableLoading.value);
-const previousLoading = computed<boolean>(() => queryResults.value?.[1].isFetching || dataTableLoading.value);
+const widgetLoading = computed<boolean>(() => loadQuery.isFetching.value || dataTableLoading.value);
+const previousLoading = computed<boolean>(() => comparisonQuery.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 queryResults.value?.[0].error?.message as string;
+    return loadQuery.error?.value?.message as string;
 });
 
 const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emit, {
@@ -219,8 +203,8 @@ useResizeObserver(valueTextRef, throttle(() => {
 
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResults.value?.[0].refetch();
-        queryResults.value?.[1].refetch();
+        loadQuery.refetch();
+        comparisonQuery.refetch();
     },
 });
 onMounted(() => {
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 9884540257..187016e3e2 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 { useQuery } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import type { PieSeriesOption } from 'echarts/charts';
 import { init } from 'echarts/core';
@@ -26,8 +25,8 @@ 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 { 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 { useWidgetLoadQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
+import { DATE_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     getReferenceLabel,
@@ -75,7 +74,7 @@ const { dateRange } = useWidgetDateRange({
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    data: computed<WidgetLoadResponse | null>(() => queryResult.data?.value || null),
+    data: computed<WidgetLoadResponse | null>(() => loadQuery.data?.value || null),
     chart: null as EChartsType | null,
     chartData: [] as ChartData[],
     unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[widgetOptionsState.dataFieldInfo?.data as string]),
@@ -190,7 +189,7 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -205,20 +204,14 @@ const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
         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 || dataTableLoading.value);
+
+const widgetLoading = computed<boolean>(() => loadQuery.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;
+    return loadQuery.error?.value?.message as string;
 });
 
 const drawChart = (rawData: WidgetLoadResponse|null) => {
@@ -270,7 +263,7 @@ useResizeObserver(chartContext, throttle(() => {
 }, 500));
 defineExpose<WidgetExpose>({
     loadWidget: async () => {
-        queryResult.refetch();
+        loadQuery.refetch();
     },
 });
 onMounted(() => {
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 00fb631682..6360c52a5d 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
@@ -5,7 +5,6 @@ import {
     reactive, ref, watch,
 } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import type { SankeySeriesOption } from 'echarts';
 import { init } from 'echarts/core';
@@ -26,8 +25,8 @@ 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 { 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 { useWidgetLoadQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
+import { DATE_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
 import { getReferenceLabel } from '@/common/modules/widgets/_helpers/widget-date-helper';
 import { getFormattedNumber } from '@/common/modules/widgets/_helpers/widget-helper';
@@ -65,7 +64,7 @@ const { dateRange } = useWidgetDateRange({
 const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
-    data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
+    data: computed<WidgetLoadResponse | null>(() => loadQuery.data?.value || null),
     chart: null as EChartsType | null,
     chartData: [] as SankeySeriesOption['data'],
     links: [] as SankeySeriesOption['links'],
@@ -132,7 +131,7 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -147,19 +146,14 @@ const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
         widgetName: props.widgetName,
         dataTableId: props.dataTableId,
     })),
+    enabled: computed<boolean>(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
 });
 
-const queryResult = useQuery({
-    queryKey,
-    queryFn,
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
-    staleTime: WIDGET_LOAD_STALE_TIME,
-});
+const widgetLoading = computed<boolean>(() => loadQuery.isFetching.value || dataTableLoading.value);
 
-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;
+    return loadQuery.error?.value?.message as string;
 });
 
 const drawChart = (rawData: WidgetLoadResponse|null) => {
@@ -219,7 +213,7 @@ useResizeObserver(chartContext, throttle(() => {
 
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResult.refetch();
+        loadQuery.refetch();
     },
 });
 onMounted(() => {
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 ae22ce526a..c396d061c4 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
@@ -4,7 +4,6 @@ import {
     computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import type { BarSeriesOption } from 'echarts/charts';
 import { init } from 'echarts/core';
@@ -24,9 +23,9 @@ 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 { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
+import { useWidgetLoadQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
 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_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     getReferenceLabel,
@@ -72,7 +71,7 @@ const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
 
-    data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
+    data: computed<WidgetLoadResponse | null>(() => loadQuery.data?.value || null),
     xAxisData: computed<string[]>(() => {
         if (!state.data?.results?.length) return [];
         if (isDateField(widgetOptionsState.xAxisInfo?.data)) {
@@ -172,7 +171,7 @@ const widgetOptionsState = reactive({
 
 
 /* Api */
-const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -187,19 +186,14 @@ const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
         widgetName: props.widgetName,
         dataTableId: props.dataTableId,
     })),
+    enabled: computed<boolean>(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
 });
 
-const queryResult = useQuery({
-    queryKey,
-    queryFn,
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
-    staleTime: WIDGET_LOAD_STALE_TIME,
-});
+const widgetLoading = computed<boolean>(() => loadQuery.isFetching.value || dataTableLoading.value);
 
-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;
+    return loadQuery.error?.value?.message as string;
 });
 
 
@@ -267,7 +261,7 @@ useResizeObserver(chartContext, throttle(() => {
 
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResult.refetch();
+        loadQuery.refetch();
     },
 });
 onMounted(() => {
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 5bec2d5232..cf4120c30b 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
@@ -4,7 +4,6 @@ import {
     computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import type { BarSeriesOption } from 'echarts/charts';
 import type { EChartsType } from 'echarts/core';
@@ -22,9 +21,9 @@ 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 { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetLoadQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
+import { useWidgetLoadQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
 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_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT, SUB_TOTAL_NAME } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     getReferenceLabel,
@@ -70,7 +69,7 @@ const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
 
-    data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
+    data: computed<WidgetLoadResponse | null>(() => loadQuery.data?.value || null),
     yAxisData: computed<string[]>(() => {
         if (!state.data?.results?.length) return [];
         if (isDateField(widgetOptionsState.yAxisInfo?.data)) {
@@ -167,7 +166,7 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -182,19 +181,13 @@ const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
         widgetName: props.widgetName,
         dataTableId: props.dataTableId,
     })),
+    enabled: computed<boolean>(() => props.widgetState !== 'INACTIVE' && !!dataTable.value && !props.loadDisabled),
 });
 
-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 || dataTableLoading.value);
+const widgetLoading = computed<boolean>(() => loadQuery.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;
+    return loadQuery.error?.value?.message as string;
 });
 
 /* Util */
@@ -261,7 +254,7 @@ useResizeObserver(chartContext, throttle(() => {
 
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResult.refetch();
+        loadQuery.refetch();
     },
 });
 onMounted(() => {
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 5aaa0cd514..7f93bc1b3b 100644
--- a/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/table/Table.vue
@@ -3,7 +3,6 @@ import {
     defineExpose, reactive, computed, onMounted,
 } from 'vue';
 
-import { useQueries } from '@tanstack/vue-query';
 import { sortBy } from 'lodash';
 
 import type { Sort } from '@cloudforet/core-lib/space-connector/type';
@@ -15,9 +14,8 @@ import { i18n } from '@/translations';
 import WidgetFrame from '@/common/modules/widgets/_components/WidgetFrame.vue';
 import { useWidgetDateRange } from '@/common/modules/widgets/_composables/use-widget-date-range';
 import { useWidgetFrame } from '@/common/modules/widgets/_composables/use-widget-frame';
-import { useWidgetLoadQueryContext, useWidgetLoadSumQueryContext } from '@/common/modules/widgets/_composables/use-widget-load-query-context';
+import { useWidgetLoadQuery, useWidgetLoadSumQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
 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 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';
@@ -138,7 +136,7 @@ const getTableDefaultSortBy = (_sortBy: Sort[]) => {
     return defaultSortBy;
 };
 
-const { fetcher: loadFetcher, key: loadKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -157,9 +155,15 @@ const { fetcher: loadFetcher, key: loadKey } = useWidgetLoadQueryContext({
         widgetName: props.widgetName,
         dataTableId: props.dataTableId,
     })),
+    enabled: computed(() => {
+        const widgetActive = props.widgetState !== 'INACTIVE';
+        const dataTableReady = !!dataTable.value;
+        const loadDisabled = props.loadDisabled;
+        return widgetActive && dataTableReady && !loadDisabled;
+    }),
 });
 
-const { fetcher: loadSumFetcher, key: loadSumKey } = useWidgetLoadSumQueryContext({
+const loadSumQuery = useWidgetLoadSumQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -173,47 +177,25 @@ const { fetcher: loadSumFetcher, key: loadSumKey } = useWidgetLoadSumQueryContex
         dataTableId: props.dataTableId,
         enabledTotal: !!widgetOptionsState.totalInfo?.toggleValue,
     })),
+    enabled: computed(() => {
+        const widgetActive = props.widgetState !== 'INACTIVE';
+        const dataTableReady = !!dataTable.value;
+        const totalEnabled = !!widgetOptionsState.totalInfo?.toggleValue;
+        const loadDisabled = props.loadDisabled;
+        return widgetActive && dataTableReady && totalEnabled && !loadDisabled;
+    }),
 });
 
-const queryResults = useQueries({
-    queries: [
-        {
-            queryKey: loadKey,
-            queryFn: loadFetcher,
-            enabled: computed<boolean>(() => {
-                const widgetActive = props.widgetState !== 'INACTIVE';
-                const dataTableReady = !!dataTable.value;
-                const loadDisabled = props.loadDisabled;
-                return widgetActive && dataTableReady && !loadDisabled;
-            }),
-            staleTime: WIDGET_LOAD_STALE_TIME,
-        },
-        {
-            queryKey: loadSumKey,
-            queryFn: loadSumFetcher,
-            enabled: computed<boolean>(() => {
-                const widgetActive = props.widgetState !== 'INACTIVE';
-                const dataTableReady = !!dataTable.value;
-                const totalEnabled = !!widgetOptionsState.totalInfo?.toggleValue;
-                const loadDisabled = props.loadDisabled;
-
-                return widgetActive && dataTableReady && totalEnabled && !loadDisabled;
-            }),
-            staleTime: WIDGET_LOAD_STALE_TIME,
-        },
-    ],
-});
-
-const widgetLoading = computed<boolean>(() => queryResults.value?.[0].isFetching || queryResults.value?.[1].isFetching || dataTableLoading.value);
+const widgetLoading = computed<boolean>(() => loadQuery.isFetching.value || loadSumQuery.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 queryResults.value?.[0].error?.message as string || queryResults.value?.[1].error?.message as string;
+    return loadQuery.error?.value?.message as string || loadSumQuery.error?.value?.message as string;
 });
 
 
 const refinedData = computed<WidgetLoadResponse|null>(() => {
-    const data = queryResults.value?.[0].data;
-    const totalData = queryResults.value?.[1].data;
+    const data = loadQuery.data?.value;
+    const totalData = loadSumQuery.data?.value;
 
     if (!data) return null;
 
@@ -243,7 +225,7 @@ const { widgetFrameProps, widgetFrameEventHandlers } = useWidgetFrame(props, emi
     dateRange,
     errorMessage,
     widgetLoading,
-    noData: computed(() => (queryResults.value?.[0].data ? !(queryResults.value?.[0].data?.results?.length) : false)),
+    noData: computed(() => (loadQuery.data?.value ? !(loadQuery.data?.value?.results?.length) : false)),
 });
 
 const handleUpdateThisPage = async (newPage: number) => {
@@ -252,8 +234,8 @@ const handleUpdateThisPage = async (newPage: number) => {
 
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResults.value?.[0].refetch();
-        queryResults.value?.[1].refetch();
+        loadQuery.refetch();
+        loadSumQuery.refetch();
     },
 });
 onMounted(() => {
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 d2abed421e..21846787b7 100644
--- a/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue
+++ b/apps/web/src/common/modules/widgets/_widgets/treemap/Treemap.vue
@@ -4,7 +4,6 @@ import {
     computed, defineExpose, onMounted, reactive, ref, watch,
 } from 'vue';
 
-import { useQuery } from '@tanstack/vue-query';
 import dayjs from 'dayjs';
 import type { TreemapSeriesOption } from 'echarts/charts';
 import { init } from 'echarts/core';
@@ -24,8 +23,8 @@ 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 { 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 { useWidgetLoadQuery } from '@/common/modules/widgets/_composables/use-widget-load-query';
+import { DATE_FIELD } from '@/common/modules/widgets/_constants/widget-constant';
 import { DATE_FORMAT } from '@/common/modules/widgets/_constants/widget-field-constant';
 import {
     getReferenceLabel,
@@ -70,7 +69,7 @@ const chartContext = ref<HTMLElement|null>(null);
 const state = reactive({
     isPrivateWidget: computed<boolean>(() => props.widgetId.startsWith('private')),
 
-    data: computed<WidgetLoadResponse | null>(() => queryResult?.data?.value || null),
+    data: computed<WidgetLoadResponse | null>(() => loadQuery.data?.value || null),
     chart: null as EChartsType | null,
     chartData: [] as ChartData[],
     unit: computed<string|undefined>(() => widgetFrameProps.value.unitMap?.[widgetOptionsState.dataFieldInfo?.data as string]),
@@ -133,7 +132,7 @@ const widgetOptionsState = reactive({
 });
 
 /* Api */
-const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
+const loadQuery = useWidgetLoadQuery({
     widgetId: computed(() => props.widgetId),
     params: computed(() => ({
         widget_id: props.widgetId,
@@ -148,19 +147,13 @@ const { fetcher: queryFn, key: queryKey } = useWidgetLoadQueryContext({
         widgetName: props.widgetName,
         dataTableId: props.dataTableId,
     })),
+    enabled: computed<boolean>(() => props.widgetState !== 'INACTIVE' && !!dataTable.value),
 });
 
-const queryResult = useQuery({
-    queryKey,
-    queryFn,
-    enabled: computed(() => props.widgetState !== 'INACTIVE' && !!dataTable.value),
-    staleTime: WIDGET_LOAD_STALE_TIME,
-});
-
-const widgetLoading = computed<boolean>(() => queryResult.isFetching.value || dataTableLoading.value);
+const widgetLoading = computed<boolean>(() => loadQuery.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;
+    return loadQuery.error?.value?.message as string;
 });
 
 const drawChart = (rawData: WidgetLoadResponse|null) => {
@@ -222,7 +215,7 @@ useResizeObserver(chartContext, throttle(() => {
 
 defineExpose<WidgetExpose>({
     loadWidget: () => {
-        queryResult.refetch();
+        loadQuery.refetch();
     },
 });
 onMounted(() => {
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 959900f30c..92796230dc 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
@@ -57,20 +57,21 @@ export const useServiceQueryKey = <S extends ServiceName, R extends ResourceName
     verb: V,
     options: UseServiceQueryKeyOptions<T> = {},
 ): UseServiceQueryKeyResult<T> => {
+    const { params, contextKey } = options;
+
     // Runtime validation for development environment
     if (import.meta.env.DEV) {
         if (!service || !resource || !verb) {
             console.warn('Required parameters (service, resource, verb) must be provided');
         }
-        if (options.params) {
-            const rawParams = toValue(options.params);
+        if (params) {
+            const rawParams = toValue(params);
             if (rawParams === null || typeof rawParams !== 'object') {
                 console.warn('params must be a non-null object');
             }
         }
     }
 
-    const { params, contextKey } = options;
     const queryKeyAppContext = useQueryKeyAppContext();
 
 
@@ -102,7 +103,7 @@ export const useServiceQueryKey = <S extends ServiceName, R extends ResourceName
         key: queryKey,
         params: computed(() => {
             const resolvedParams = toValue(params);
-            return resolvedParams;
+            return createImmutableObjectKeyItem(resolvedParams);
         }),
         withSuffix: (arg) => {
             if (typeof arg === 'object' && arg !== null) {
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/_internal/dashboard-shared-entry-context.ts b/apps/web/src/services/_shared/dashboard/core/composables/_internal/dashboard-shared-entry-context.ts
new file mode 100644
index 0000000000..fddf3506be
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/composables/_internal/dashboard-shared-entry-context.ts
@@ -0,0 +1,16 @@
+import {
+    inject, provide, computed, type ComputedRef,
+} from 'vue';
+
+import { DASHBOARD_SHARED_ENTRY_POINT } from '@/services/_shared/dashboard/core/constants/dashboard-shared-constant';
+import type { DashboardSharedEntryPoint } from '@/services/_shared/dashboard/core/types/dashboard-shared-type';
+
+
+const DASHBOARD_ENTRY_POINT_KEY = Symbol('DashboardEntryPoint');
+const DEFAULT_ENTRY_POINT = computed(() => DASHBOARD_SHARED_ENTRY_POINT.NONE_ENTRY_POINT);
+
+export const provideDashboardEntryPoint = (entryPoint: ComputedRef<DashboardSharedEntryPoint>) => {
+    provide(DASHBOARD_ENTRY_POINT_KEY, entryPoint);
+};
+
+export const useDashboardEntryPoint = (): ComputedRef<DashboardSharedEntryPoint> => inject(DASHBOARD_ENTRY_POINT_KEY, DEFAULT_ENTRY_POINT);
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/_internal/use-dashboard-manageable.ts b/apps/web/src/services/_shared/dashboard/core/composables/_internal/use-dashboard-manageable.ts
new file mode 100644
index 0000000000..cd0822d317
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/composables/_internal/use-dashboard-manageable.ts
@@ -0,0 +1,71 @@
+import { computed, reactive } from 'vue';
+
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
+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 { useDashboardSharedContext } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context';
+
+
+interface UseDashboardManageableReturn {
+    getDashboardManageable: (_dashboard?: DashboardModel) => boolean;
+    getFolderManageable: (_folder?: FolderModel) => boolean;
+}
+
+export const useDashboardManageable = (): UseDashboardManageableReturn => {
+    const userStore = useUserStore();
+    const appContextStore = useAppContextStore();
+    const { entryPoint } = useDashboardSharedContext();
+    const isAdminMode = computed(() => appContextStore.getters.isAdminMode);
+
+    const storeState = reactive({
+        isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
+    });
+
+    const _isManageable = (isPrivate: boolean, isShared: boolean, resourceGroup: string | undefined): boolean => {
+        if (isAdminMode.value) return true;
+        if (entryPoint.value === 'DASHBOARDS') {
+            if (isPrivate) return true;
+            if (isShared && resourceGroup === RESOURCE_GROUP.DOMAIN) return false;
+            if (storeState.isWorkspaceOwner) return true;
+            return false;
+        }
+        if (entryPoint.value === 'PROJECT') {
+            return !isShared;
+        }
+        return false;
+    };
+
+
+
+    const getDashboardManageable = (_dashboard?: DashboardModel): boolean => {
+        if (!_dashboard) return false;
+        const publicDashboard = _dashboard as PublicDashboardModel;
+        return _isManageable(
+            _dashboard.dashboard_id?.startsWith('private') || false,
+            publicDashboard?.shared || false,
+            publicDashboard?.resource_group,
+        );
+    };
+
+    const getFolderManageable = (_folder?: FolderModel): boolean => {
+        if (!_folder) return false;
+        const publicFolder = _folder as PublicFolderModel;
+        return _isManageable(
+            _folder.folder_id?.startsWith('private') || false,
+            publicFolder?.shared || false,
+            publicFolder?.resource_group,
+        );
+    };
+
+    return {
+        getDashboardManageable,
+        getFolderManageable,
+    };
+};
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context.ts b/apps/web/src/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context.ts
new file mode 100644
index 0000000000..42e2938942
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context.ts
@@ -0,0 +1,46 @@
+import { computed } from 'vue';
+import { useRoute } from 'vue-router/composables';
+
+import { useAppContextStore } from '@/store/app-context/app-context-store';
+
+import { useDashboardEntryPoint } from '@/services/_shared/dashboard/core/composables/_internal/dashboard-shared-entry-context';
+
+type ProjectContextType = 'PROJECT' | 'PROJECT_GROUP' | undefined;
+
+/**
+ * Provides contextual information about the current dashboard route.
+ *
+ * - `entryPoint` tells where this dashboard page is accessed from.
+ * - If `entryPoint === 'PROJECT'`, then `projectGroupOrProjectId` and `projectContextType` will be available.
+ *   (Business logic guarantees this, though they are optional in the type system.)
+ * - Use `entryPoint === 'PROJECT'` check before using project-specific fields.
+ */
+export const useDashboardSharedContext = () => {
+    const route = useRoute();
+    const appContextStore = useAppContextStore();
+
+    const isAdminMode = computed(() => appContextStore.getters.isAdminMode);
+    const entryPoint = useDashboardEntryPoint();
+
+    /* Project Context */
+    const projectGroupOrProjectId = computed(() => {
+        if (entryPoint.value !== 'PROJECT') return undefined;
+        const id = route.params.projectGroupOrProjectId;
+        return typeof id === 'string' ? id : undefined;
+    });
+
+    const projectContextType = computed<ProjectContextType>(() => {
+        const id = route.params.projectGroupOrProjectId;
+        if (!id) return undefined;
+        if (id.startsWith('pg-')) return 'PROJECT_GROUP';
+        if (id.startsWith('project-')) return 'PROJECT';
+        return undefined;
+    });
+
+    return {
+        entryPoint,
+        isAdminMode,
+        projectGroupOrProjectId,
+        projectContextType,
+    };
+};
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashbaord-create-mutation.ts b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashbaord-create-mutation.ts
new file mode 100644
index 0000000000..8a1d395ed5
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashbaord-create-mutation.ts
@@ -0,0 +1,45 @@
+import type { ComputedRef } from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+
+import type { DashboardCreateParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import type { PrivateDashboardCreateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/create';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
+
+interface UseDashboardCreateMutationOptions {
+    isPrivate?: ComputedRef<boolean>;
+    onSuccess?: (data: DashboardModel, variables: DashboardCreateParams) => void|Promise<void>;
+    onError?: (error: Error, variables: DashboardCreateParams) => void|Promise<void>;
+    onSettled?: (data: DashboardModel|undefined, error: Error|null, variables: DashboardCreateParams) => void|Promise<void>;
+}
+
+export const useDashboardCreateMutation = (options: UseDashboardCreateMutationOptions) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
+
+    const {
+        isPrivate, onSuccess, onError, onSettled,
+    } = options;
+
+    const createDashboardFn = async (params: DashboardCreateParams): Promise<DashboardModel> => {
+        if (isPrivate?.value) {
+            return privateDashboardAPI.create(params as PrivateDashboardCreateParameters);
+        }
+        return publicDashboardAPI.create(params as PublicDashboardCreateParameters);
+    };
+
+    return useMutation({
+        mutationFn: createDashboardFn,
+        onSuccess: async (data, variables) => {
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: async (error, variables) => {
+            if (onError) await onError(error, variables);
+        },
+        onSettled: async (data, error, variables) => {
+            if (onSettled) await onSettled(data, error, variables);
+        },
+    });
+};
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-change-folder-mutation.ts b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-change-folder-mutation.ts
new file mode 100644
index 0000000000..b2e2cb191e
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-change-folder-mutation.ts
@@ -0,0 +1,50 @@
+import {
+    useMutation, useQueryClient,
+} from '@tanstack/vue-query';
+
+import type { DashboardChangeFolderParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+interface UseDashboardChangeFolderMutationOptions {
+    onSuccess?: (data: DashboardModel, variables: DashboardChangeFolderParams) => void|Promise<void>;
+    onError?: (error: Error, variables: DashboardChangeFolderParams) => void|Promise<void>;
+    onSettled?: (data: DashboardModel|undefined, error: Error|null, variables: DashboardChangeFolderParams) => void|Promise<void>;
+}
+
+export const useDashboardChangeFolderMutation = (options: UseDashboardChangeFolderMutationOptions) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
+    const queryClient = useQueryClient();
+    const { withSuffix: publicDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'get');
+    const { withSuffix: privateDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'private-dashboard', 'get');
+
+    const {
+        onSuccess, onError, onSettled,
+    } = options;
+
+    const changeFolderFn = (params: DashboardChangeFolderParams): Promise<DashboardModel> => {
+        if (!params.dashboard_id) throw new Error('Dashboard ID is not provided');
+        const _isPrivate = params.dashboard_id.startsWith('private');
+        const fetcher = _isPrivate ? privateDashboardAPI.changeFolder : publicDashboardAPI.changeFolder;
+        return fetcher(params);
+    };
+
+    return useMutation({
+        mutationFn: changeFolderFn,
+        onSuccess: async (data, variables) => {
+            const _dashboardId = variables.dashboard_id;
+            const _isPrivate = _dashboardId.startsWith('private');
+            const dashboardListQueryKey = _isPrivate ? privateDashboardGetQueryKey(_dashboardId) : publicDashboardGetQueryKey(_dashboardId);
+            queryClient.invalidateQueries({ queryKey: dashboardListQueryKey });
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: (error, variables) => {
+            if (onError) onError(error, variables);
+        },
+        onSettled: (data, error, variables) => {
+            if (onSettled) onSettled(data, error, variables);
+        },
+    });
+};
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-clone-mutation.ts b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-clone-mutation.ts
new file mode 100644
index 0000000000..866c749323
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-clone-mutation.ts
@@ -0,0 +1,105 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { DashboardCreateParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
+
+import { useAllReferenceStore } from '@/store/reference/all-reference-store';
+import { useUserStore } from '@/store/user/user-store';
+
+import { useDashboardCreateMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashbaord-create-mutation';
+import { getSharedDashboardLayouts } from '@/services/_shared/dashboard/core/helpers/dashboard-layout-template-helper';
+
+interface UseDashboardCloneMutationOptions {
+    isPrivate?: ComputedRef<boolean>;
+    onSuccess?: (data: DashboardModel, variables: DashboardCreateParams) => void|Promise<void>;
+    onError?: (error: Error, variables: DashboardCreateParams) => void|Promise<void>;
+    onSettled?: (data: DashboardModel|undefined, error: Error|null, variables: DashboardCreateParams) => void|Promise<void>;
+}
+
+export const useDashboardCloneMutation = (options: UseDashboardCloneMutationOptions) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
+    const { privateWidgetAPI } = usePrivateWidgetApi();
+    const { publicWidgetAPI } = usePublicWidgetApi();
+    const allReferenceStore = useAllReferenceStore();
+    const userStore = useUserStore();
+
+    const {
+        isPrivate, onSuccess, onError, onSettled,
+    } = options;
+
+
+    const dashboardCreateMutation = useDashboardCreateMutation({
+        isPrivate,
+        onSuccess: async (data, variables) => {
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: async (error, variables) => {
+            if (onError) await onError(error, variables);
+        },
+        onSettled: async (data, error, variables) => {
+            if (onSettled) await onSettled(data, error, variables);
+        },
+    });
+
+
+    const _getDashboardFn = async (dashboardId: string): Promise<DashboardModel> => {
+        if (!dashboardId) throw new Error('Dashboard id not found');
+        try {
+            if (dashboardId.startsWith('private')) {
+                return privateDashboardAPI.get({ dashboard_id: dashboardId });
+            }
+            return publicDashboardAPI.get({ dashboard_id: dashboardId });
+        } catch (error) {
+            throw new Error('Dashboard not found');
+        }
+    };
+
+    const _listWidgetFn = async (dashboardId: string): Promise<ListResponse<WidgetModel>> => {
+        if (!dashboardId) throw new Error('Dashboard id not found');
+        try {
+            if (dashboardId.startsWith('private')) {
+                return privateWidgetAPI.list({ dashboard_id: dashboardId });
+            }
+            return publicWidgetAPI.list({ dashboard_id: dashboardId });
+        } catch (error) {
+            throw new Error('Widget list not found');
+        }
+    };
+
+
+    const cloneDashboardFn = async (params: DashboardCreateParams, dashboardId?: string): Promise<DashboardModel> => {
+        if (!dashboardId) throw new Error('Dashboard id not found');
+
+        const dashboard = await _getDashboardFn(dashboardId);
+        const widgetList = await _listWidgetFn(dashboardId);
+
+        const _sharedLayouts = await getSharedDashboardLayouts(dashboard.layouts, widgetList.results || [], allReferenceStore.getters.costDataSource);
+
+        const _sharedDashboard: DashboardCreateParams = {
+            ...params,
+            layouts: _sharedLayouts,
+            options: dashboard.options || {},
+            labels: dashboard.labels || [],
+            tags: { created_by: userStore.state.userId },
+            vars: dashboard.vars,
+            vars_schema: dashboard.vars_schema,
+        };
+
+        if (isPrivate?.value) {
+            return dashboardCreateMutation.mutateAsync(_sharedDashboard);
+        }
+        return dashboardCreateMutation.mutateAsync(_sharedDashboard);
+    };
+
+    return {
+        mutate: cloneDashboardFn,
+        isPending: computed(() => dashboardCreateMutation.isPending.value),
+    };
+};
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-delete-mutation.ts b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-delete-mutation.ts
new file mode 100644
index 0000000000..0d511adfe7
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-delete-mutation.ts
@@ -0,0 +1,51 @@
+
+import {
+    useMutation, useQueryClient,
+} from '@tanstack/vue-query';
+
+import type { DashboardDeleteParams } from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+interface UseDashboardDeleteMutationOptions {
+    onSuccess?: (data: unknown, variables: DashboardDeleteParams) => void|Promise<void>;
+    onError?: (error: Error, variables: DashboardDeleteParams) => void|Promise<void>;
+    onSettled?: (data: unknown|undefined, error: Error|null, variables: DashboardDeleteParams) => void|Promise<void>;
+}
+
+export const useDashboardDeleteMutation = (options: UseDashboardDeleteMutationOptions) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
+    const queryClient = useQueryClient();
+    const { withSuffix: publicDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'get');
+    const { withSuffix: privateDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'private-dashboard', 'get');
+
+    const {
+        onSuccess, onError, onSettled,
+    } = options;
+
+    const deleteDashboardFn = (params: DashboardDeleteParams) => {
+        if (!params.dashboard_id) throw new Error('Dashboard ID is not provided');
+        const _isPrivate = params.dashboard_id.startsWith('private');
+        const fetcher = _isPrivate ? privateDashboardAPI.delete : publicDashboardAPI.delete;
+        return fetcher(params);
+    };
+
+    return useMutation({
+        mutationFn: deleteDashboardFn,
+        onSuccess: async (data, variables) => {
+            const _dashboardId = variables.dashboard_id;
+            const _isPrivate = _dashboardId.startsWith('private');
+            const dashboardGetQueryKey = _isPrivate ? privateDashboardGetQueryKey(_dashboardId) : publicDashboardGetQueryKey(_dashboardId);
+            queryClient.invalidateQueries({ queryKey: dashboardGetQueryKey });
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: (error, variables) => {
+            if (onError) onError(error, variables);
+        },
+        onSettled: (data, error, variables) => {
+            if (onSettled) onSettled(data, error, variables);
+        },
+    });
+};
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-folder-delete-mutation.ts b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-folder-delete-mutation.ts
new file mode 100644
index 0000000000..d9e636d7dc
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-folder-delete-mutation.ts
@@ -0,0 +1,50 @@
+import {
+    useMutation, useQueryClient,
+} from '@tanstack/vue-query';
+
+import type { FolderDeleteParams } from '@/api-clients/dashboard/_types/folder-type';
+import { usePrivateFolderApi } from '@/api-clients/dashboard/private-folder/composables/use-private-folder-api';
+import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+interface UseDashboardFolderDeleteMutationOptions {
+    onSuccess?: (data: unknown, variables: FolderDeleteParams) => void|Promise<void>;
+    onError?: (error: Error, variables: FolderDeleteParams) => void|Promise<void>;
+    onSettled?: (data: unknown|undefined, error: Error|null, variables: FolderDeleteParams) => void|Promise<void>;
+}
+
+export const useDashboardFolderDeleteMutation = (options: UseDashboardFolderDeleteMutationOptions) => {
+    const { publicFolderAPI } = usePublicFolderApi();
+    const { privateFolderAPI } = usePrivateFolderApi();
+    const queryClient = useQueryClient();
+    const { withSuffix: publicFolderGetQueryKey } = useServiceQueryKey('dashboard', 'public-folder', 'get');
+    const { withSuffix: privateFolderGetQueryKey } = useServiceQueryKey('dashboard', 'private-folder', 'get');
+
+    const {
+        onSuccess, onError, onSettled,
+    } = options;
+
+    const deleteFolderFn = (params: FolderDeleteParams) => {
+        if (!params.folder_id) throw new Error('Folder ID is not provided');
+        const _isPrivate = params.folder_id.startsWith('private');
+        const fetcher = _isPrivate ? privateFolderAPI.delete : publicFolderAPI.delete;
+        return fetcher(params);
+    };
+
+    return useMutation({
+        mutationFn: deleteFolderFn,
+        onSuccess: async (data, variables) => {
+            const _folderId = variables.folder_id;
+            const _isPrivate = _folderId.startsWith('private');
+            const folderListQueryKey = _isPrivate ? privateFolderGetQueryKey(_folderId) : publicFolderGetQueryKey(_folderId);
+            queryClient.invalidateQueries({ queryKey: folderListQueryKey });
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: (error, variables) => {
+            if (onError) onError(error, variables);
+        },
+        onSettled: (data, error, variables) => {
+            if (onSettled) onSettled(data, error, variables);
+        },
+    });
+};
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-folder-share-mutation.ts b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-folder-share-mutation.ts
new file mode 100644
index 0000000000..757f333d31
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-folder-share-mutation.ts
@@ -0,0 +1,76 @@
+import type { ComputedRef } from 'vue';
+
+import {
+    useMutation, useQueryClient,
+} from '@tanstack/vue-query';
+
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
+import type { PublicFolderShareParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/share';
+import type { PublicFolderUnshareParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/unshare';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+interface UseDashboardFolderShareMutationOptions {
+    isShared: ComputedRef<boolean>;
+    onSuccess?: (data: PublicFolderModel, variables: PublicFolderShareParameters|PublicFolderUnshareParameters) => void|Promise<void>;
+    onError?: (error: Error, variables: PublicFolderShareParameters|PublicFolderUnshareParameters) => void|Promise<void>;
+    onSettled?: (data: PublicFolderModel|undefined, error: Error|null, variables: PublicFolderShareParameters|PublicFolderUnshareParameters) => void|Promise<void>;
+}
+
+export const useDashboardFolderShareMutation = (options: UseDashboardFolderShareMutationOptions) => {
+    const { publicFolderAPI } = usePublicFolderApi();
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const queryClient = useQueryClient();
+    const { withSuffix: publicFolderGetQueryKey } = useServiceQueryKey('dashboard', 'public-folder', 'get');
+    const { withSuffix: publicDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'get');
+    const {
+        isShared, onSuccess, onError, onSettled,
+    } = options;
+
+
+    const listPublicDashboard = async (folderId: string) => {
+        if (!folderId) throw new Error('Folder ID is not provided');
+        try {
+            const _dashboardList = await publicDashboardAPI.list({
+                folder_id: folderId,
+            });
+            return _dashboardList;
+        } catch (error) {
+            console.error(error);
+            return {
+                results: [],
+            };
+        }
+    };
+
+    const shareFolderFn = async (params: PublicFolderShareParameters|PublicFolderUnshareParameters): Promise<PublicFolderModel> => {
+        if (!params.folder_id) throw new Error('Folder ID is not provided');
+        if (isShared.value) return publicFolderAPI.unshare(params as PublicFolderUnshareParameters);
+        return publicFolderAPI.share(params as PublicFolderShareParameters);
+    };
+
+    return useMutation({
+        mutationFn: shareFolderFn,
+        onSuccess: async (data, variables) => {
+            const _folderId = variables.folder_id;
+            queryClient.invalidateQueries({ queryKey: publicFolderGetQueryKey(_folderId) });
+            if (!isShared.value) {
+                const _dashboardList = await listPublicDashboard(_folderId);
+                const _dashboardIds = _dashboardList.results?.map((dashboard) => dashboard.dashboard_id);
+                if (_dashboardIds) {
+                    await Promise.all(
+                        _dashboardIds.map((dashboardId) => queryClient.invalidateQueries({ queryKey: publicDashboardGetQueryKey(dashboardId) })),
+                    );
+                }
+            }
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: (error, variables) => {
+            if (onError) onError(error, variables);
+        },
+        onSettled: (data, error, variables) => {
+            if (onSettled) onSettled(data, error, variables);
+        },
+    });
+};
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-share-mutation.ts b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-share-mutation.ts
new file mode 100644
index 0000000000..4a7a16305f
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-share-mutation.ts
@@ -0,0 +1,49 @@
+import type { ComputedRef } from 'vue';
+
+import {
+    useMutation, useQueryClient,
+} from '@tanstack/vue-query';
+
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import type { PublicDashboardShareParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/share';
+import type { PublicDashboardUnshareParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/unshare';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+interface UseDashboardShareMutationOptions {
+    isShared: ComputedRef<boolean>;
+    onSuccess?: (data: DashboardModel, variables: PublicDashboardShareParameters|PublicDashboardUnshareParameters) => void|Promise<void>;
+    onError?: (error: Error, variables: PublicDashboardShareParameters|PublicDashboardUnshareParameters) => void|Promise<void>;
+    onSettled?: (data: DashboardModel|undefined, error: Error|null, variables: PublicDashboardShareParameters|PublicDashboardUnshareParameters) => void|Promise<void>;
+}
+
+export const useDashboardShareMutation = (options: UseDashboardShareMutationOptions) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const queryClient = useQueryClient();
+    const { withSuffix: publicDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'get');
+
+    const {
+        isShared, onSuccess, onError, onSettled,
+    } = options;
+
+    const shareDashboardFn = (params: PublicDashboardShareParameters|PublicDashboardUnshareParameters): Promise<DashboardModel> => {
+        if (!params.dashboard_id) throw new Error('Dashboard ID is not provided');
+        if (isShared.value) return publicDashboardAPI.unshare(params as PublicDashboardUnshareParameters);
+        return publicDashboardAPI.share(params as PublicDashboardShareParameters);
+    };
+
+    return useMutation({
+        mutationFn: shareDashboardFn,
+        onSuccess: async (data, variables) => {
+            const _dashboardId = variables.dashboard_id;
+            queryClient.invalidateQueries({ queryKey: publicDashboardGetQueryKey(_dashboardId) });
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: (error, variables) => {
+            if (onError) onError(error, variables);
+        },
+        onSettled: (data, error, variables) => {
+            if (onSettled) onSettled(data, error, variables);
+        },
+    });
+};
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-update-mutation.ts b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-update-mutation.ts
new file mode 100644
index 0000000000..ae289013d0
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/composables/mutations/use-dashboard-update-mutation.ts
@@ -0,0 +1,50 @@
+import {
+    useMutation, useQueryClient,
+} from '@tanstack/vue-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 { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+interface UseDashboardUpdateMutationOptions {
+    onSuccess?: (data: DashboardModel, variables: DashboardUpdateParams) => void|Promise<void>;
+    onError?: (error: Error, variables: DashboardUpdateParams) => void|Promise<void>;
+    onSettled?: (data: DashboardModel|undefined, error: Error|null, variables: DashboardUpdateParams) => void|Promise<void>;
+}
+
+export const useDashboardUpdateMutation = (options: UseDashboardUpdateMutationOptions) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const { privateDashboardAPI } = usePrivateDashboardApi();
+    const queryClient = useQueryClient();
+    const { withSuffix: publicDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'get');
+    const { withSuffix: privateDashboardGetQueryKey } = useServiceQueryKey('dashboard', 'private-dashboard', 'get');
+
+    const {
+        onSuccess, onError, onSettled,
+    } = options;
+
+    const updateDashboardFn = (params: DashboardUpdateParams): Promise<DashboardModel> => {
+        if (!params.dashboard_id) throw new Error('Dashboard ID is not provided');
+        const _isPrivate = params.dashboard_id.startsWith('private');
+        const fetcher = _isPrivate ? privateDashboardAPI.update : publicDashboardAPI.update;
+        return fetcher(params);
+    };
+
+    return useMutation({
+        mutationFn: updateDashboardFn,
+        onSuccess: async (data, variables) => {
+            const _dashboardId = variables.dashboard_id;
+            const _isPrivate = _dashboardId.startsWith('private');
+            const dashboardListQueryKey = _isPrivate ? privateDashboardGetQueryKey(_dashboardId) : publicDashboardGetQueryKey(_dashboardId);
+            queryClient.invalidateQueries({ queryKey: dashboardListQueryKey });
+            if (onSuccess) await onSuccess(data, variables);
+        },
+        onError: (error, variables) => {
+            if (onError) onError(error, variables);
+        },
+        onSettled: (data, error, variables) => {
+            if (onSettled) onSettled(data, error, variables);
+        },
+    });
+};
diff --git a/apps/web/src/services/_shared/dashboard/core/composables/use-dashboard-control-menu-helper.ts b/apps/web/src/services/_shared/dashboard/core/composables/use-dashboard-control-menu-helper.ts
new file mode 100644
index 0000000000..a94893e9e1
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/composables/use-dashboard-control-menu-helper.ts
@@ -0,0 +1,105 @@
+import { computed } from 'vue';
+
+import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
+
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
+import { i18n } from '@/translations';
+
+export const useDashboardControlMenuHelper = () => {
+    const CLONE_MENU_ITEM = computed<MenuItem>(() => ({
+        type: 'item',
+        name: 'clone',
+        label: i18n.t('DASHBOARDS.DETAIL.CLONE'),
+        icon: 'ic_clone',
+    }));
+
+    const DELETE_MENU_ITEM = computed<MenuItem>(() => ({
+        type: 'item',
+        name: 'delete',
+        label: i18n.t('DASHBOARDS.ALL_DASHBOARDS.DELETE'),
+        icon: 'ic_delete',
+    }));
+
+    const getShareMenuItems = (isShared: boolean): MenuItem[] => [
+        {
+            type: 'item',
+            name: 'share',
+            label: isShared ? i18n.t('DASHBOARDS.ALL_DASHBOARDS.UNSHARE') : i18n.t('DASHBOARDS.ALL_DASHBOARDS.SHARE'),
+            icon: 'ic_share',
+        },
+    ];
+
+    const getControlDashboardMenuItems = (
+        dashboardId: string,
+        manageable: boolean,
+        dashboard: DashboardModel,
+        isProject = false,
+    ): MenuItem[] => {
+        const isPrivate = dashboardId.startsWith('private');
+        const isDeprecated = dashboard.version === '1.0';
+        const isShared = !!(dashboard as PublicDashboardModel)?.shared;
+
+        if (!manageable) return isDeprecated ? [] : [CLONE_MENU_ITEM.value];
+        if (isDeprecated) return [DELETE_MENU_ITEM.value];
+
+        const shareContextMenuItems: MenuItem[] = [
+            {
+                type: 'item',
+                name: 'shareWithCode',
+                label: i18n.t('DASHBOARDS.DETAIL.SHARE_WITH_CODE'),
+                icon: 'ic_share-code',
+            },
+            ...(!isPrivate ? getShareMenuItems(isShared) : []),
+            { type: 'divider', name: 'divider' },
+        ];
+
+        return [
+            {
+                type: 'item',
+                name: 'edit',
+                label: i18n.t('DASHBOARDS.ALL_DASHBOARDS.EDIT_NAME'),
+                icon: 'ic_edit-text',
+            },
+            CLONE_MENU_ITEM.value,
+            {
+                type: 'item',
+                name: 'move',
+                label: i18n.t('DASHBOARDS.DETAIL.MOVE'),
+                icon: 'ic_move',
+            },
+            { type: 'divider', name: 'divider' },
+            ...(!isProject ? shareContextMenuItems : []),
+            DELETE_MENU_ITEM.value,
+        ];
+    };
+
+    const getControlFolderMenuItems = (folderId: string, manageable: boolean, folder: FolderModel): MenuItem[] => {
+        const isPrivate = folderId.startsWith('private');
+        const isShared = !!(folder as PublicFolderModel)?.shared;
+
+        if (!manageable) return [CLONE_MENU_ITEM.value];
+
+        return [
+            {
+                type: 'item',
+                name: 'edit',
+                label: i18n.t('DASHBOARDS.ALL_DASHBOARDS.EDIT_NAME'),
+                icon: 'ic_edit-text',
+            },
+            CLONE_MENU_ITEM.value,
+            { type: 'divider', name: 'divider' },
+            ...(!isPrivate ? getShareMenuItems(isShared) : []),
+            { type: 'divider', name: 'divider' },
+            DELETE_MENU_ITEM.value,
+        ];
+    };
+
+    return {
+        getControlDashboardMenuItems,
+        getControlFolderMenuItems,
+    };
+};
+
diff --git a/apps/web/src/services/_shared/dashboard/core/constants/dashboard-shared-constant.ts b/apps/web/src/services/_shared/dashboard/core/constants/dashboard-shared-constant.ts
new file mode 100644
index 0000000000..f8fef5d1d6
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/constants/dashboard-shared-constant.ts
@@ -0,0 +1,5 @@
+export const DASHBOARD_SHARED_ENTRY_POINT = {
+    PROJECT: 'PROJECT',
+    DASHBOARDS: 'DASHBOARDS',
+    NONE_ENTRY_POINT: 'NONE_ENTRY_POINT',
+} as const;
diff --git a/apps/web/src/services/_shared/dashboard/core/helpers/dashboard-layout-template-helper.ts b/apps/web/src/services/_shared/dashboard/core/helpers/dashboard-layout-template-helper.ts
new file mode 100644
index 0000000000..a60fcc0a4d
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/helpers/dashboard-layout-template-helper.ts
@@ -0,0 +1,117 @@
+// eslint-disable-next-line @typescript-eslint/ban-ts-comment
+// @ts-nocheck
+import { cloneDeep, flattenDeep } from 'lodash';
+
+import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
+
+import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import type { DashboardLayout } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
+import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
+import type { DataTableListParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/list';
+import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
+import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
+
+import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
+
+import type {
+    SharedDashboardLayout, SharedDataTableInfo, SharedWidgetInfo,
+} from '@/services/dashboards/types/shared-dashboard-type';
+
+
+type DataTableModel = PublicDataTableModel | PrivateDataTableModel;
+type WidgetModel = PublicWidgetModel | PrivateWidgetModel;
+
+const _fetchWidgetDataTables = async (widgetId: string, costDataSource: CostDataSourceReferenceMap): Promise<[string, DataTableModel[]]|undefined> => {
+    if (!widgetId) return undefined;
+    const isPrivate = widgetId.startsWith('private');
+    const fetcher = isPrivate
+        ? SpaceConnector.clientV2.dashboard.privateDataTable.list<DataTableListParameters, ListResponse<DataTableModel>>
+        : SpaceConnector.clientV2.dashboard.publicDataTable.list<DataTableListParameters, ListResponse<DataTableModel>>;
+    try {
+        const { results } = await fetcher({ widget_id: widgetId });
+        if (!results) return undefined;
+        const refinedResults = cloneDeep(results);
+        results.forEach((r, idx) => {
+            if (r.data_type === DATA_TABLE_TYPE.ADDED && r.source_type === 'COST') {
+                const dataSourceId = r.options.COST?.data_source_id || '';
+                refinedResults[idx].options.COST.plugin_id = costDataSource[dataSourceId]?.data?.plugin_info?.plugin_id;
+                refinedResults[idx].options.COST.data_source_id = undefined;
+            }
+        });
+        return [widgetId, refinedResults || []];
+    } catch (e) {
+        ErrorHandler.handleError(e);
+        return undefined;
+    }
+};
+
+const _getWidgetDataTablesMap = async (dashboardLayouts: DashboardLayout[], costDataSource: CostDataSourceReferenceMap): Promise<Record<string, DataTableModel[]>> => {
+    const dashboardWidgetIdList = flattenDeep(dashboardLayouts?.map((layout) => layout.widgets) || []);
+    const results = await Promise.allSettled(dashboardWidgetIdList.map((widgetId) => _fetchWidgetDataTables(widgetId, costDataSource)));
+    return results.reduce((acc, r) => {
+        if (r.status === 'fulfilled' && r.value) {
+            const [widgetId, dataTables] = r.value;
+            if (widgetId && dataTables) {
+                acc[widgetId] = dataTables;
+            }
+        }
+        return acc;
+    }, {} as Record<string, DataTableModel[]>);
+};
+
+const _getSharedDataTableInfoList = (widgetDataTablesMap: Record<string, DataTableModel[]>, widgetId: string, dataTableId?: string): [SharedDataTableInfo[], number] => {
+    const dataTables = widgetDataTablesMap[widgetId] || [];
+    const dataTableIndex = dataTables.findIndex((d) => d.data_table_id === dataTableId);
+    const sharedDataTables = dataTables.map((dt) => {
+        const sharedDataTable: SharedDataTableInfo = {
+            name: dt.name,
+            data_type: dt.data_type,
+            source_type: dt.source_type,
+            operator: dt.operator,
+            options: dt.options,
+        };
+        if (dt.data_type === DATA_TABLE_TYPE.TRANSFORMED) {
+            const operatorOptions = dt.options[dt.operator];
+            if (dt.operator === 'JOIN' || dt.operator === 'CONCAT') {
+                const dataTableIds = operatorOptions?.data_tables;
+                const dataTableIndices = dataTableIds?.map((dtId) => dataTables.findIndex((d) => d.data_table_id === dtId));
+                sharedDataTable.options = { [dt.operator]: { ...operatorOptions, data_tables: dataTableIndices } };
+            } else {
+                const operatorDataTableId = operatorOptions?.data_table_id;
+                const dataTableIdx = dataTables.findIndex((d) => d.data_table_id === operatorDataTableId);
+                sharedDataTable.options = { [dt.operator]: { ...operatorOptions, data_table_id: dataTableIdx } };
+            }
+        }
+        return sharedDataTable;
+    });
+    return [sharedDataTables, dataTableIndex];
+};
+
+export const getSharedDashboardLayouts = async (
+    dashboardLayouts: DashboardLayout[],
+    dashboardWidgets: WidgetModel[],
+    costDataSource: CostDataSourceReferenceMap,
+): Promise<SharedDashboardLayout[]> => {
+    const widgetDataTablesMap = await _getWidgetDataTablesMap(dashboardLayouts, costDataSource);
+    return dashboardLayouts.map((layout) => {
+        const sharedWidgets = layout.widgets?.map((widgetId) => {
+            const widget = dashboardWidgets.find((w) => w.widget_id === widgetId);
+            if (widget) {
+                const [dataTables, dataTableIndex] = _getSharedDataTableInfoList(widgetDataTablesMap, widget.widget_id, widget.data_table_id);
+                return {
+                    widget_type: widget.widget_type,
+                    size: widget.size,
+                    options: widget.options,
+                    data_tables: dataTables,
+                    data_table_id: dataTableIndex > -1 ? dataTableIndex : 0,
+                };
+            }
+            return null;
+        }).filter(Boolean) as SharedWidgetInfo[];
+        return { widgets: sharedWidgets };
+    });
+};
diff --git a/apps/web/src/services/_shared/dashboard/core/types/dashboard-shared-type.ts b/apps/web/src/services/_shared/dashboard/core/types/dashboard-shared-type.ts
new file mode 100644
index 0000000000..98e96c38e0
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/core/types/dashboard-shared-type.ts
@@ -0,0 +1,3 @@
+import type { DASHBOARD_SHARED_ENTRY_POINT } from '@/services/_shared/dashboard/core/constants/dashboard-shared-constant';
+
+export type DashboardSharedEntryPoint = typeof DASHBOARD_SHARED_ENTRY_POINT[keyof typeof DASHBOARD_SHARED_ENTRY_POINT];
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-create/DashboardCreateLayout.vue b/apps/web/src/services/_shared/dashboard/dashboard-create/DashboardCreateLayout.vue
new file mode 100644
index 0000000000..a7c9a63897
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/DashboardCreateLayout.vue
@@ -0,0 +1,31 @@
+<script setup lang="ts">
+
+import { computed } from 'vue';
+
+import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+
+import { provideDashboardEntryPoint } from '@/services/_shared/dashboard/core/composables/_internal/dashboard-shared-entry-context';
+import type { DashboardSharedEntryPoint } from '@/services/_shared/dashboard/core/types/dashboard-shared-type';
+import DashboardCreateBody from '@/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateBody.vue';
+
+
+interface Props {
+    dashboardItems: Array<DashboardModel>;
+    folderItems: Array<DashboardFolderModel>;
+    entryPoint: DashboardSharedEntryPoint;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{(e: 'select-toolset', toolsetId: string|undefined): void;
+}>();
+/* Provide Dashboard Entry Point */
+provideDashboardEntryPoint(computed(() => props.entryPoint));
+
+</script>
+
+<template>
+    <dashboard-create-body :dashboard-items="props.dashboardItems"
+                           :folder-items="props.folderItems"
+                           @select-toolset="emit('select-toolset', $event)"
+    />
+</template>
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateBlankBoardItem.vue b/apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateBlankBoardItem.vue
similarity index 94%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateBlankBoardItem.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateBlankBoardItem.vue
index f6754aded9..900fb43cce 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateBlankBoardItem.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateBlankBoardItem.vue
@@ -4,8 +4,7 @@ import {
 } from '@cloudforet/mirinae';
 import type { BoardSet } from '@cloudforet/mirinae/types/data-display/board/type';
 
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
-
+import { useDashboardCreatePageStore } from '@/services/_shared/dashboard/dashboard-create/stores/dashboard-create-page-store';
 
 interface Props {
     templateSets: BoardSet[];
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1SearchFilter.vue b/apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep1SearchFilter.vue
similarity index 96%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1SearchFilter.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep1SearchFilter.vue
index acb1d5021b..c0d198eacd 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1SearchFilter.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep1SearchFilter.vue
@@ -8,11 +8,9 @@ import {
 } from '@cloudforet/mirinae';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { PluginItem } from '@/store/reference/plugin-reference-store';
-import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
-
-import { DASHBOARD_LABELS } from '@/services/dashboards/constants/dashboard-labels';
+import type { ProviderReferenceMap, PluginItem } from '@/store/reference/provider-reference-store';
 
+import { DASHBOARD_LABELS } from '@/services/_shared/dashboard/dashboard-create/constants/dashboard-labels';
 
 export interface FilterLabelItem {
     label: string;
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2.vue b/apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep2.vue
similarity index 75%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep2.vue
index 675ed5ebf6..a68af94764 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep2.vue
@@ -5,26 +5,29 @@ import {
 
 import { PButton } from '@cloudforet/mirinae';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
+import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import DashboardCreateStep2BundleCase
-    from '@/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue';
+    from '@/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep2BundleCase.vue';
 import DashboardCreateStep2SingleCase
-    from '@/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue';
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
+    from '@/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep2SingleCase.vue';
+import { useDashboardCreatePageStore } from '@/services/_shared/dashboard/dashboard-create/stores/dashboard-create-page-store';
 
+interface Props {
+    dashboardItems: Array<DashboardModel>;
+    folderItems: Array<DashboardFolderModel>;
+}
 
+const props = defineProps<Props>();
 
 const singleCaseRef = ref<HTMLElement|null>(null);
 const bundleCaseRef = ref<HTMLElement|null>(null);
 
-const appContextStore = useAppContextStore();
 const dashboardCreatePageStore = useDashboardCreatePageStore();
 const dashboardCreatePageState = dashboardCreatePageStore.state;
 const dashboardCreatePageGetters = dashboardCreatePageStore.getters;
 const state = reactive({
     isSingleCreateValid: false,
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     disableCreateButton: computed<boolean>(() => {
         if (dashboardCreatePageState.createType === 'SINGLE') {
             return !state.isSingleCreateValid;
@@ -52,9 +55,12 @@ const handleCreateDashboard = async () => {
         <dashboard-create-step2-single-case v-if="dashboardCreatePageState.createType === 'SINGLE'"
                                             ref="singleCaseRef"
                                             :is-valid.sync="state.isSingleCreateValid"
+                                            :dashboard-items="props.dashboardItems"
+                                            :folder-items="props.folderItems"
         />
         <dashboard-create-step2-bundle-case v-else
                                             ref="bundleCaseRef"
+                                            :dashboard-items="props.dashboardItems"
         />
         <div class="button-area">
             <p-button style-type="transparent"
diff --git a/apps/web/src/services/dashboards/constants/dashboard-labels.ts b/apps/web/src/services/_shared/dashboard/dashboard-create/constants/dashboard-labels.ts
similarity index 100%
rename from apps/web/src/services/dashboards/constants/dashboard-labels.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-create/constants/dashboard-labels.ts
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateBody.vue b/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateBody.vue
new file mode 100644
index 0000000000..92bd3c4c1e
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateBody.vue
@@ -0,0 +1,154 @@
+<script lang="ts">
+// eslint-disable-next-line import/order,import/no-duplicates
+import { defineComponent, type ComponentPublicInstance } from 'vue';
+
+interface IInstance extends ComponentPublicInstance {
+    setPathFrom(from: any): void
+}
+
+export default defineComponent({
+    beforeRouteEnter(to, from, next) {
+        next((vm) => {
+            const instance = vm as unknown as IInstance;
+            instance.setPathFrom(from);
+        });
+    },
+});
+</script>
+
+<script setup lang="ts">
+/* eslint-disable import/first */
+import {
+    computed, defineExpose, onUnmounted, reactive,
+// eslint-disable-next-line import/no-duplicates
+} from 'vue';
+import type { TranslateResult } from 'vue-i18n';
+import type { Location } from 'vue-router';
+
+import {
+    PCenteredLayoutHeader,
+} from '@cloudforet/mirinae';
+
+import type { DashboardModel, DashboardFolderModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { i18n } from '@/translations';
+
+
+import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
+import { useGoBack } from '@/common/composables/go-back';
+
+import { useDashboardSharedContext } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context';
+import DashboardCreateStep2 from '@/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep2.vue';
+import DashboardCreateStep1 from '@/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep1.vue';
+import { useDashboardCreatePageStore } from '@/services/_shared/dashboard/dashboard-create/stores/dashboard-create-page-store';
+import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
+import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+
+interface Step {
+    step: number;
+    description?: TranslateResult;
+}
+
+interface Props {
+    dashboardItems: Array<DashboardModel>;
+    folderItems: Array<DashboardFolderModel>;
+}
+
+const props = defineProps<Props>();
+
+const { isAdminMode, entryPoint, projectGroupOrProjectId } = useDashboardSharedContext();
+
+const dashboardCreatePageStore = useDashboardCreatePageStore();
+const dashboardCreatePageState = dashboardCreatePageStore.state;
+
+
+const state = reactive({
+    loading: false,
+    steps: computed<Step[]>(() => [
+        {
+            step: 1,
+            description: isAdminMode.value ? '' : i18n.t('DASHBOARDS.CREATE.STEP1_DESC'),
+        },
+        {
+            step: 2,
+            description: isAdminMode.value ? i18n.t('DASHBOARDS.CREATE.STEP2_DESC_FOR_ADMIN') : i18n.t('DASHBOARDS.CREATE.STEP2_DESC'),
+        },
+    ]),
+    closeConfirmModalVisible: false,
+});
+
+const goBackRoute = computed<Location|undefined>(() => {
+    if (entryPoint.value === 'DASHBOARDS') {
+        if (isAdminMode.value) {
+            return {
+                name: ADMIN_DASHBOARDS_ROUTE._NAME,
+            };
+        }
+        return {
+            name: DASHBOARDS_ROUTE._NAME,
+        };
+    }
+    if (entryPoint.value === 'PROJECT') {
+        return {
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: projectGroupOrProjectId.value as string,
+            },
+        };
+    }
+    return undefined;
+});
+
+/* Event */
+const handleClickClose = () => {
+    state.closeConfirmModalVisible = true;
+};
+const { setPathFrom, handleClickBackButton } = useGoBack(goBackRoute.value);
+const handleClickNext = () => {
+    dashboardCreatePageStore.setCreateType('BUNDLE');
+    dashboardCreatePageStore.setCurrentStep(2);
+};
+defineExpose({ setPathFrom });
+onUnmounted(() => {
+    dashboardCreatePageStore.reset();
+});
+</script>
+
+<template>
+    <div class="dashboard-create-body"
+         :class="[`step-${dashboardCreatePageState.currentStep}`]"
+    >
+        <p-centered-layout-header :title="$t('DASHBOARDS.CREATE.TITLE')"
+                                  :description="state.steps?.[dashboardCreatePageState.currentStep - 1]?.description"
+                                  :total-steps="state.steps.length"
+                                  :current-step="dashboardCreatePageState.currentStep"
+                                  show-step
+                                  show-close-button
+                                  @close="handleClickClose"
+        />
+        <dashboard-create-step1 v-if="dashboardCreatePageState.currentStep === 1"
+                                :dashboard-items="props.dashboardItems"
+                                @click-next="handleClickNext"
+        />
+        <template v-else-if="dashboardCreatePageState.currentStep === 2">
+            <dashboard-create-step2 :dashboard-items="props.dashboardItems"
+                                    :folder-items="props.folderItems"
+            />
+        </template>
+        <confirm-back-modal :visible.sync="state.closeConfirmModalVisible"
+                            @confirm="handleClickBackButton"
+        />
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.dashboard-create-body {
+    margin: 0 auto;
+    &.step-1 {
+        width: 60rem;
+    }
+    &.step-2 {
+        width: 45rem;
+    }
+}
+</style>
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateScopeForm.vue b/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateScopeForm.vue
similarity index 86%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateScopeForm.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateScopeForm.vue
index c1d2b7a9ed..3b9d62f57d 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateScopeForm.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateScopeForm.vue
@@ -18,8 +18,8 @@ import { useUserStore } from '@/store/user/user-store';
 
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
-
+import { useDashboardSharedContext } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context';
+import { useDashboardCreatePageStore } from '@/services/_shared/dashboard/dashboard-create/stores/dashboard-create-page-store';
 
 
 interface BoardSet {
@@ -39,6 +39,12 @@ const storeState = reactive({
     isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
     selectedWorkspace: computed<WorkspaceModel|undefined>(() => userWorkspaceState.getters.currentWorkspace),
 });
+
+const {
+    isAdminMode,
+    entryPoint,
+} = useDashboardSharedContext();
+
 const state = reactive({
     dashboardScopeBoardSets: computed(() => {
         const boardSets: BoardSet[] = [
@@ -79,7 +85,9 @@ onMounted(() => {
             <p-field-title class="field-title">
                 {{ $t('DASHBOARDS.CREATE.DASHBOARD_SCOPE') }}
             </p-field-title>
-            <div class="grid gap-2">
+            <div v-if="!isAdminMode && entryPoint !== 'PROJECT'"
+                 class="grid gap-2"
+            >
                 <p-board-item v-for="dashboardScopeItem in state.dashboardScopeBoardSets"
                               :key="`dashboard-scope-${dashboardScopeItem.value}`"
                               class="dashboard-scope-board-item"
@@ -119,17 +127,28 @@ onMounted(() => {
                     </template>
                 </p-board-item>
             </div>
+            <div v-else
+                 class="flex items-center gap-1 pt-1"
+            >
+                <p-i name="ic_info-circle"
+                     width="0.875rem"
+                     height="0.875rem"
+                />
+                <span class="text-paragraph-sm text-gray-700">
+                    <strong>Only Public</strong>
+                    {{ $t('(Everyone in this workspace)') }}
+                </span>
+            </div>
         </div>
     </section>
 </template>
 
 <style lang="postcss" scoped>
-.field-title {
-    padding-bottom: 0.75rem;
-}
 .dashboard-scope-board-item {
     height: 4.375rem;
     cursor: pointer;
+    padding-top: 0.75rem;
+
     &.selected {
         .dashboard-scope-title {
             font-weight: 700;
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1.vue b/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep1.vue
similarity index 67%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep1.vue
index 1d981d2c5d..8d4cff7c00 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep1.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep1.vue
@@ -14,49 +14,31 @@ import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-ty
 import type { DashboardTemplateModel } from '@/schema/repository/dashboard-template/model';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 
-
-import DashboardCreateBlankBoardItem from '@/services/dashboards/components/dashboard-create/DashboardCreateBlankBoardItem.vue';
-import type { FilterLabelItem } from '@/services/dashboards/components/dashboard-create/DashboardCreateStep1SearchFilter.vue';
-import DashboardCreateStep1SearchFilter from '@/services/dashboards/components/dashboard-create/DashboardCreateStep1SearchFilter.vue';
+import { useDashboardSharedContext } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context';
+import DashboardCreateBlankBoardItem from '@/services/_shared/dashboard/dashboard-create/components/DashboardCreateBlankBoardItem.vue';
+import type { FilterLabelItem } from '@/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep1SearchFilter.vue';
+import DashboardCreateStep1SearchFilter from '@/services/_shared/dashboard/dashboard-create/components/DashboardCreateStep1SearchFilter.vue';
+import { useDashboardCreatePageStore } from '@/services/_shared/dashboard/dashboard-create/stores/dashboard-create-page-store';
 import DashboardFolderTree from '@/services/dashboards/components/dashboard-folder/DashboardFolderTree.vue';
-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';
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
 import type { DashboardTreeDataType } from '@/services/dashboards/types/dashboard-folder-type';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
+interface Props {
+    dashboardItems: Array<DashboardModel>;
+}
 
-
+const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'click-next'): void }>();
 const router = useRouter();
 
 
-const appContextStore = useAppContextStore();
 const dashboardCreatePageStore = useDashboardCreatePageStore();
 const dashboardCreatePageState = dashboardCreatePageStore.state;
 const dashboardCreatePageGetters = dashboardCreatePageStore.getters;
-
-/* Query */
-const {
-    publicDashboardList,
-    privateDashboardList,
-} = useDashboardQuery();
-
-const queryState = reactive({
-    publicDashboardItems: computed(() => {
-        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
-        if (storeState.isAdminMode) return _v2DashboardItems;
-        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-    }),
-    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
-    allDashboardItems: computed(() => [...queryState.publicDashboardItems, ...queryState.privateDashboardItems]),
-});
-
-const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-});
+const { isAdminMode, entryPoint, projectGroupOrProjectId } = useDashboardSharedContext();
 
 const state = reactive({
     templates: [] as DashboardTemplateModel[],
@@ -83,7 +65,7 @@ const state = reactive({
     }),
     allExistingLabels: computed<string[]>(() => {
         const _ootbTemplates = getFilteredTemplates(dashboardCreatePageState.dashboardTemplates, '', [], []);
-        const _existingTemplates = getFilteredTemplates(queryState.allDashboardItems, '', [], []);
+        const _existingTemplates = getFilteredTemplates(props.dashboardItems, '', [], []);
 
         const _ootbLabels = flatMapDeep(_ootbTemplates.map((d) => d.labels ?? []));
         const _existingLabels = flatMapDeep(_existingTemplates.map((d) => d.labels ?? []));
@@ -121,10 +103,26 @@ const handleSelectProvider = (providers: FilterLabelItem[]) => {
     filterState.selectedProviders = providers.map((d) => d.label.toLowerCase());
 };
 const handleClickCancel = () => {
-    const dashboardRouteName = storeState.isAdminMode
-        ? ADMIN_DASHBOARDS_ROUTE._NAME
-        : DASHBOARDS_ROUTE._NAME;
-    router.push({ name: dashboardRouteName }).catch(() => {});
+    if (entryPoint.value === 'DASHBOARDS') {
+        if (isAdminMode.value) {
+            router.push({ name: ADMIN_DASHBOARDS_ROUTE._NAME }).catch(() => {});
+        } else {
+            router.push({ name: DASHBOARDS_ROUTE._NAME }).catch(() => {});
+        }
+    } else if (entryPoint.value === 'PROJECT') {
+        if (!projectGroupOrProjectId.value) {
+            console.error('projectGroupOrProjectId is not provided');
+            return;
+        }
+        router.push({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: projectGroupOrProjectId.value,
+            },
+        }).catch(() => {});
+    } else {
+        console.error('Invalid entry point');
+    }
 };
 
 onMounted(() => {
@@ -134,33 +132,6 @@ onMounted(() => {
 
 <template>
     <div class="dashboard-create-step-1">
-        <!--        <div v-if="storeState.isAdminMode"-->
-        <!--             class="dashboard-type-wrapper"-->
-        <!--        >-->
-        <!--            <p-field-title size="lg"-->
-        <!--                           :label="$t('DASHBOARDS.CREATE.DASHBOARD_TYPE')"-->
-        <!--                           :description="$t('DASHBOARDS.CREATE.DASHBOARD_TYPE_DESC')"-->
-        <!--            />-->
-        <!--            <div class="dashboard-type-select-card-wrapper">-->
-        <!--                <p-select-card class="col-span-6"-->
-        <!--                               :label="i18n.t('DASHBOARDS.CREATE.WORKSPACE_DASHBOARD')"-->
-        <!--                               icon="ic_service_workspaces"-->
-        <!--                               :selected="dashboardCreatePageState.adminDashboardType === 'WORKSPACE'"-->
-        <!--                               @click="dashboardCreatePageStore.setAdminDashboardType('WORKSPACE')"-->
-        <!--                />-->
-        <!--                <p-select-card class="col-span-6"-->
-        <!--                               :label="i18n.t('DASHBOARDS.CREATE.ADMIN_DASHBOARD')"-->
-        <!--                               icon="ic_admin-icon"-->
-        <!--                               :selected="dashboardCreatePageState.adminDashboardType === 'ADMIN'"-->
-        <!--                               @click="dashboardCreatePageStore.setAdminDashboardType('ADMIN')"-->
-        <!--                />-->
-        <!--            </div>-->
-        <!--            <p-divider class="divider" />-->
-        <!--            <p-field-title size="lg"-->
-        <!--                           :label="$t('DASHBOARDS.CREATE.DASHBOARD_TEMPLATE')"-->
-        <!--                           :description="$t('DASHBOARDS.CREATE.DASHBOARD_TEMPLATE_DESC')"-->
-        <!--            />-->
-        <!--        </div>-->
         <div class="contents-container">
             <dashboard-create-step1-search-filter :labels="state.allExistingLabels"
                                                   @select-label="handleSelectLabels"
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue b/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep2BundleCase.vue
similarity index 65%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep2BundleCase.vue
index 5a9e5725aa..9370b305ff 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2BundleCase.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep2BundleCase.vue
@@ -14,11 +14,13 @@ import { getClonedName } from '@cloudforet/utils';
 
 import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { DashboardCreateParams, DashboardModel, DashboardType } from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
 import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
 import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -26,57 +28,53 @@ import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-
 
 import { gray } from '@/styles/colors';
 
-import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
+import { useDashboardSharedContext } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context';
+import { useDashboardCreatePageStore } from '@/services/_shared/dashboard/dashboard-create/stores/dashboard-create-page-store';
 import {
     DASHBOARD_VARS_SCHEMA_PRESET,
-} from '@/services/dashboards/constants/dashboard-vars-schema-preset';
+} from '@/services/_shared/dashboard/dashboard-detail/constants/dashboard-vars-schema-preset';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardDataTableItem } from '@/services/dashboards/types/dashboard-folder-type';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
+interface Props {
+    dashboardItems: Array<DashboardModel>;
+}
 
+const props = defineProps<Props>();
 
 const TABLE_FIELDS = [
     { name: 'name', label: 'Name' },
     { name: 'private', label: 'Make Private' },
 ];
-const appContextStore = useAppContextStore();
 const dashboardCreatePageStore = useDashboardCreatePageStore();
 const dashboardCreatePageState = dashboardCreatePageStore.state;
 const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
 const userStore = useUserStore();
 const router = useRouter();
-/* Query */
 const {
-    publicDashboardList,
-    privateDashboardList,
-    keys,
-    api,
-} = useDashboardQuery();
-const queryClient = useQueryClient();
+    isAdminMode, entryPoint, projectContextType, projectGroupOrProjectId,
+} = useDashboardSharedContext();
 
 const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     isWorkspaceMember: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
 });
 const state = reactive({
     loading: false,
-    publicDashboardItems: computed(() => {
-        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
-        if (storeState.isAdminMode) return _v2DashboardItems;
-        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-    }),
-    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
+    publicDashboardItems: computed(() => props.dashboardItems.filter((d) => d.dashboard_id.startsWith('public'))),
+    privateDashboardItems: computed(() => props.dashboardItems.filter((d) => d.dashboard_id.startsWith('private'))),
     bundleCaseType: computed(() => {
         if (!isEmpty(dashboardCreatePageState.selectedOotbIdMap)) return 'TEMPLATE';
         return 'EXISTING';
     }),
     privateMap: {} as Record<string, boolean>,
     tableFields: computed(() => {
-        if (storeState.isAdminMode || storeState.isWorkspaceMember) return TABLE_FIELDS.filter((f) => f.name !== 'private');
+        if (isAdminMode.value
+            || entryPoint.value === 'PROJECT'
+            || (entryPoint.value === 'DASHBOARDS' && storeState.isWorkspaceMember)) return TABLE_FIELDS.filter((f) => f.name !== 'private');
         if (state.bundleCaseType === 'TEMPLATE') return TABLE_FIELDS.filter((f) => f.name !== 'location');
         return TABLE_FIELDS;
     }),
@@ -102,6 +100,12 @@ const addToNewIdList = (id: string) => {
 };
 
 /* Api */
+const queryClient = useQueryClient();
+const { publicDashboardAPI } = usePublicDashboardApi();
+const { privateDashboardAPI } = usePrivateDashboardApi();
+const { key: publicDashboardListQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'list');
+const { key: privateDashboardListQueryKey } = useServiceQueryKey('dashboard', 'private-dashboard', 'list');
+
 const createBundleOotb = async () => {
     const _promises: Promise<DashboardModel>[] = [];
     const _selectedOotbList = dashboardCreatePageState.dashboardTemplates.filter((d) => dashboardCreatePageState.selectedOotbIdMap[d.template_id]);
@@ -117,18 +121,26 @@ const createBundleOotb = async () => {
             tags: { created_by: userStore.state.userId },
             vars_schema: DASHBOARD_VARS_SCHEMA_PRESET,
         };
-        if (storeState.isAdminMode) {
-            (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
-        } else if (!storeState.isWorkspaceMember && !_isPrivate) {
+        if (entryPoint.value === 'DASHBOARDS') {
+            if (isAdminMode.value) {
+                (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
+            } else if (!storeState.isWorkspaceMember && !_isPrivate) {
+                (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.WORKSPACE;
+            }
+        } else if (entryPoint.value === 'PROJECT' && projectContextType.value === 'PROJECT') {
+            (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.PROJECT;
+            (_dashboardParams as PublicDashboardCreateParameters).project_id = projectGroupOrProjectId.value;
+        } else if (entryPoint.value === 'PROJECT' && projectContextType.value === 'PROJECT_GROUP') {
             (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.WORKSPACE;
+            (_dashboardParams as PublicDashboardCreateParameters).project_group_id = projectGroupOrProjectId.value;
         }
         let _createType: DashboardType = _isPrivate ? 'PRIVATE' : 'PUBLIC';
         if (storeState.isWorkspaceMember) {
             _createType = 'PRIVATE';
         }
         const fetcher = _createType === 'PRIVATE'
-            ? api.privateDashboardAPI.create
-            : api.publicDashboardAPI.create;
+            ? privateDashboardAPI.create
+            : publicDashboardAPI.create;
         _promises.push(fetcher(_dashboardParams));
     }));
     const _results = await Promise.allSettled(_promises);
@@ -152,14 +164,29 @@ const handleChangePrivate = (id: string, value: boolean) => {
 const handleConfirm = async () => {
     dashboardCreatePageStore.setLoading(true);
     await createBundleOotb();
-    await queryClient.invalidateQueries({ queryKey: keys.publicDashboardListQueryKey.value });
-    await queryClient.invalidateQueries({ queryKey: keys.privateDashboardListQueryKey.value });
-    const dashboardRouteName = storeState.isAdminMode
-        ? ADMIN_DASHBOARDS_ROUTE._NAME
-        : DASHBOARDS_ROUTE._NAME;
-    await router.push({
-        name: dashboardRouteName,
-    }).catch(() => {});
+    await queryClient.invalidateQueries({ queryKey: publicDashboardListQueryKey.value });
+    await queryClient.invalidateQueries({ queryKey: privateDashboardListQueryKey.value });
+
+    if (entryPoint.value === 'DASHBOARDS') {
+        if (isAdminMode.value) {
+            router.push({ name: ADMIN_DASHBOARDS_ROUTE._NAME }).catch(() => {});
+        } else {
+            router.push({ name: DASHBOARDS_ROUTE._NAME }).catch(() => {});
+        }
+    } else if (entryPoint.value === 'PROJECT') {
+        if (!projectGroupOrProjectId.value) {
+            console.error('projectGroupOrProjectId is not provided');
+            return;
+        }
+        router.push({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: projectGroupOrProjectId.value,
+            },
+        }).catch(() => {});
+    } else {
+        console.error('Invalid entry point');
+    }
 };
 
 /* Expose */
diff --git a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue b/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep2SingleCase.vue
similarity index 59%
rename from apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep2SingleCase.vue
index 376595d5fb..b478fc6570 100644
--- a/apps/web/src/services/dashboards/components/dashboard-create/DashboardCreateStep2SingleCase.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateStep2SingleCase.vue
@@ -13,14 +13,18 @@ import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/
 import type { InputItem } from '@cloudforet/mirinae/types/controls/input/text-input/type';
 
 import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
-import type { DashboardCreateParams, DashboardModel, DashboardType } from '@/api-clients/dashboard/_types/dashboard-type';
+import type {
+    DashboardCreateParams, DashboardFolderModel, DashboardModel, DashboardType,
+} from '@/api-clients/dashboard/_types/dashboard-type';
+import { usePrivateDashboardApi } from '@/api-clients/dashboard/private-dashboard/composables/use-private-dashboard-api';
 import type {
     PrivateDashboardCreateParameters,
 } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/create';
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
 import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
@@ -28,60 +32,45 @@ import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 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 { useDashboardSharedContext } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context';
+import DashboardCreateScopeForm from '@/services/_shared/dashboard/dashboard-create/contextual-components/DashboardCreateScopeForm.vue';
+import { useDashboardCreatePageStore } from '@/services/_shared/dashboard/dashboard-create/stores/dashboard-create-page-store';
 import {
     DASHBOARD_VARS_SCHEMA_PRESET,
-} from '@/services/dashboards/constants/dashboard-vars-schema-preset';
+} from '@/services/_shared/dashboard/dashboard-detail/constants/dashboard-vars-schema-preset';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 
 interface Props {
     isValid: boolean;
+    dashboardItems: Array<DashboardModel>;
+    folderItems: Array<DashboardFolderModel>;
 }
 const props = defineProps<Props>();
 const emit = defineEmits<{(e: 'update:is-valid', value: boolean): void
 }>();
 
 const router = useRouter();
-const appContextStore = useAppContextStore();
 const dashboardCreatePageStore = useDashboardCreatePageStore();
 const dashboardCreatePageState = dashboardCreatePageStore.state;
 const dashboardCreatePageGetters = dashboardCreatePageStore.getters;
 const userStore = useUserStore();
-
-/* Query */
-const {
-    publicDashboardList,
-    privateDashboardList,
-    keys,
-    api,
-} = useDashboardQuery();
 const {
-    publicFolderList,
-    privateFolderList,
-} = useDashboardFolderQuery();
-const queryClient = useQueryClient();
+    isAdminMode, entryPoint, projectGroupOrProjectId, projectContextType,
+} = useDashboardSharedContext();
 
 const getDashboardNameList = (dashboardType: DashboardType) => {
     if (dashboardType === 'PRIVATE') {
-        return (privateDashboardList.value.filter((i) => i.version !== '1.0')).map((item) => item.name);
+        return props.dashboardItems.filter((i) => i.dashboard_id.startsWith('private')).map((item) => item.name);
     }
-    return publicDashboardList.value.filter((i) => i.version !== '1.0').map((item) => item.name);
+    return props.dashboardItems.filter((i) => i.dashboard_id.startsWith('public')).map((item) => item.name);
 };
 
-const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-});
 const state = reactive({
     proxyIsValid: useProxyValue('isValid', props, emit),
-    publicFolderItems: computed(() => {
-        if (storeState.isAdminMode) return publicFolderList.value;
-        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-    }),
-    privateFolderItems: computed(() => privateFolderList.value),
+    publicFolderItems: computed(() => props.folderItems.filter((i) => i.folder_id.startsWith('public'))),
+    privateFolderItems: computed(() => props.folderItems.filter((i) => i.folder_id.startsWith('private'))),
     dashboardNameList: computed<string[]>(() => getDashboardNameList(dashboardCreatePageGetters.dashboardType)),
     labels: [] as InputItem[],
     folderMenuItems: computed<SelectDropdownMenuItem[]>(() => {
@@ -98,6 +87,23 @@ const state = reactive({
                 })),
             ];
         }
+        if (entryPoint.value === 'PROJECT') {
+            return [
+                defaultItem,
+                ...state.publicFolderItems.filter((folder) => {
+                    if (projectContextType.value === 'PROJECT') {
+                        return folder.project_id === projectGroupOrProjectId.value;
+                    }
+                    if (projectContextType.value === 'PROJECT_GROUP') {
+                        return folder.project_group_id === projectGroupOrProjectId.value;
+                    }
+                    return false;
+                }).map((folder) => ({
+                    label: folder.name,
+                    name: folder.folder_id,
+                })),
+            ];
+        }
         return [
             defaultItem,
             ...state.publicFolderItems.map((folder) => ({
@@ -129,11 +135,17 @@ const {
 });
 
 /* Api */
+const queryClient = useQueryClient();
+const { publicDashboardAPI } = usePublicDashboardApi();
+const { privateDashboardAPI } = usePrivateDashboardApi();
+const { key: publicDashboardListQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'list');
+const { key: privateDashboardListQueryKey } = useServiceQueryKey('dashboard', 'private-dashboard', 'list');
+
 const createDashboardFn = (params: DashboardCreateParams): Promise<DashboardModel> => {
     if (dashboardCreatePageState.dashboardScope === 'PRIVATE') {
-        return api.privateDashboardAPI.create(params as PrivateDashboardCreateParameters);
+        return privateDashboardAPI.create(params as PrivateDashboardCreateParameters);
     }
-    return api.publicDashboardAPI.create(params as PublicDashboardCreateParameters);
+    return publicDashboardAPI.create(params as PublicDashboardCreateParameters);
 };
 
 const { mutate: createDashboard } = useMutation(
@@ -142,7 +154,7 @@ const { mutate: createDashboard } = useMutation(
         onSuccess: (dashboard: DashboardModel) => {
             dashboardCreatePageStore.setDashboardCreated(true);
             const isPrivate = dashboard.dashboard_id.startsWith('private');
-            const dashboardListQueryKey = isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
+            const dashboardListQueryKey = isPrivate ? privateDashboardListQueryKey : publicDashboardListQueryKey;
             queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
         },
         onError: (e) => {
@@ -150,13 +162,33 @@ const { mutate: createDashboard } = useMutation(
         },
         onSettled(data) {
             if (data?.dashboard_id) {
-                const dashboardDetailRouteName = storeState.isAdminMode
-                    ? ADMIN_DASHBOARDS_ROUTE.DETAIL._NAME
-                    : DASHBOARDS_ROUTE.DETAIL._NAME;
-                router.push({
-                    name: dashboardDetailRouteName,
-                    params: { dashboardId: data.dashboard_id },
-                }).catch(() => {});
+                if (entryPoint.value === 'DASHBOARDS') {
+                    if (isAdminMode.value) {
+                        router.push({
+                            name: ADMIN_DASHBOARDS_ROUTE._NAME,
+                            params: { dashboardId: data.dashboard_id },
+                        }).catch(() => {});
+                    } else {
+                        router.push({
+                            name: DASHBOARDS_ROUTE._NAME,
+                            params: { dashboardId: data.dashboard_id },
+                        }).catch(() => {});
+                    }
+                } else if (entryPoint.value === 'PROJECT') {
+                    if (!projectGroupOrProjectId.value) {
+                        console.error('projectGroupOrProjectId is not provided');
+                        return;
+                    }
+                    router.push({
+                        name: PROJECT_ROUTE_V2._NAME,
+                        params: {
+                            projectGroupOrProjectId: projectGroupOrProjectId.value,
+                            dashboardId: data.dashboard_id,
+                        },
+                    }).catch(() => {});
+                } else {
+                    console.error('Invalid entry point');
+                }
             }
         },
     },
@@ -172,11 +204,21 @@ const handleConfirm = async () => {
         folder_id: state.selectedFolderId,
         vars_schema: DASHBOARD_VARS_SCHEMA_PRESET,
     };
-    if (storeState.isAdminMode) {
-        (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
-    } else if (dashboardCreatePageState.dashboardScope !== 'PRIVATE') {
-        (_dashboardParams as PublicDashboardCreateParameters).resource_group = dashboardCreatePageState.dashboardScope || RESOURCE_GROUP.WORKSPACE;
+
+    if (entryPoint.value === 'DASHBOARDS') {
+        if (isAdminMode.value) {
+            (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
+        } else if (dashboardCreatePageState.dashboardScope !== 'PRIVATE') {
+            (_dashboardParams as PublicDashboardCreateParameters).resource_group = dashboardCreatePageState.dashboardScope || RESOURCE_GROUP.WORKSPACE;
+        }
+    } else if (entryPoint.value === 'PROJECT' && projectContextType.value === 'PROJECT') {
+        (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.PROJECT;
+        (_dashboardParams as PublicDashboardCreateParameters).project_id = projectGroupOrProjectId.value;
+    } else if (entryPoint.value === 'PROJECT' && projectContextType.value === 'PROJECT_GROUP') {
+        (_dashboardParams as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.WORKSPACE;
+        (_dashboardParams as PublicDashboardCreateParameters).project_group_id = projectGroupOrProjectId.value;
     }
+
     createDashboard(_dashboardParams as DashboardCreateParams);
 };
 
@@ -225,7 +267,7 @@ defineExpose({
                               block
                 />
             </p-field-group>
-            <dashboard-create-scope-form v-if="!storeState.isAdminMode" />
+            <dashboard-create-scope-form />
             <p-field-group :label="$t('DASHBOARDS.ALL_DASHBOARDS.LOCATION')"
                            required
                            class="mt-4"
diff --git a/apps/web/src/services/dashboards/stores/dashboard-create-page-store.ts b/apps/web/src/services/_shared/dashboard/dashboard-create/stores/dashboard-create-page-store.ts
similarity index 100%
rename from apps/web/src/services/dashboards/stores/dashboard-create-page-store.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-create/stores/dashboard-create-page-store.ts
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/DashboardDetailLayout.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/DashboardDetailLayout.vue
new file mode 100644
index 0000000000..4a4efa2b13
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/DashboardDetailLayout.vue
@@ -0,0 +1,32 @@
+<script setup lang="ts">
+
+import { computed } from 'vue';
+
+import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+
+import { provideDashboardEntryPoint } from '@/services/_shared/dashboard/core/composables/_internal/dashboard-shared-entry-context';
+import type { DashboardSharedEntryPoint } from '@/services/_shared/dashboard/core/types/dashboard-shared-type';
+import DashboardDetailBody from '@/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardDetailBody.vue';
+
+interface Props {
+    dashboardId: string;
+    dashboardItems?: Array<DashboardModel>;
+    folderItems: Array<DashboardFolderModel>;
+    entryPoint: DashboardSharedEntryPoint;
+}
+
+const props = defineProps<Props>();
+const emit = defineEmits<{(e: 'select-toolset', toolsetId: string|undefined): void;
+}>();
+/* Provide Dashboard Entry Point */
+provideDashboardEntryPoint(computed(() => props.entryPoint));
+
+</script>
+
+<template>
+    <dashboard-detail-body :dashboard-id="props.dashboardId"
+                           :dashboard-items="props.dashboardItems"
+                           :folder-items="props.folderItems"
+                           @select-toolset="emit('select-toolset', $event)"
+    />
+</template>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardControlButtons.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardControlButtons.vue
similarity index 100%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardControlButtons.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardControlButtons.vue
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilter.vue
similarity index 56%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilter.vue
index 23617b461e..b566babc1b 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilter.vue
@@ -3,28 +3,27 @@ import {
     computed, reactive, defineAsyncComponent,
 } from 'vue';
 
-import type { DashboardGlobalVariable, GlobalVariableFilterType } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
-import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+
+import type { GLOBAL_VARIABLE_FILTER_TYPE_MAP } from '@/services/_shared/dashboard/dashboard-detail/constants/dashboard-global-variable';
+
+type GlobalVariableFilterType = keyof typeof GLOBAL_VARIABLE_FILTER_TYPE_MAP;
 
-import { useProxyValue } from '@/common/composables/proxy-state';
 
 const FILTER_COMPONENT_MAP: Record<GlobalVariableFilterType, ReturnType<typeof defineAsyncComponent>> = {
-    ENUM: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue')),
-    REFERENCE: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue')),
-    TEXT_INPUT: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue')),
-    NUMBER_INPUT: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue')),
-    NUMBER_SLIDER: defineAsyncComponent(() => import('@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue')),
+    ENUM: defineAsyncComponent(() => import('@/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterEnum.vue')),
+    REFERENCE: defineAsyncComponent(() => import('@/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterReference.vue')),
+    TEXT_INPUT: defineAsyncComponent(() => import('@/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterTextInput.vue')),
+    NUMBER_INPUT: defineAsyncComponent(() => import('@/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterNumberInput.vue')),
+    NUMBER_SLIDER: defineAsyncComponent(() => import('@/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterNumberSlider.vue')),
 };
 
 
 interface Props {
     variable: DashboardGlobalVariable;
-    vars?: DashboardVars;
 }
 
 const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void;
-}>();
 
 const state = reactive({
     variableMethod: computed<DashboardGlobalVariable['method']>(() => props.variable.method),
@@ -36,7 +35,6 @@ const state = reactive({
         if (props.variable.options.inputType === 'input') return 'NUMBER_INPUT'; // input - number
         return 'NUMBER_SLIDER'; // slider - number
     }),
-    proxyVars: useProxyValue<DashboardVars|undefined>('vars', props, emit),
 });
 
 </script>
@@ -45,7 +43,6 @@ const state = reactive({
     <div class="dashboard-global-variable-filter">
         <component :is="FILTER_COMPONENT_MAP[state.variableFilterType]"
                    :variable="props.variable"
-                   :vars.sync="state.proxyVars"
         />
     </div>
 </template>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterEnum.vue
similarity index 84%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterEnum.vue
index a086f0d9c2..09ae69db38 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterEnum.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterEnum.vue
@@ -17,24 +17,21 @@ import type {
     NumberEnumVariable,
     TextEnumVariable,
 } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
-import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardVarsStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-vars-store';
 
 
 interface Props {
     variable: DashboardGlobalVariable;
-    vars?: DashboardVars;
 }
 
 
 const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
 const route = useRoute();
 const dashboardId = computed(() => route.params.dashboardId);
-
+const dashboardVarsStore = useDashboardVarsStore();
+const dashboardVarsState = dashboardVarsStore.state;
 
 
 const { dashboard } = useDashboardGetQuery({
@@ -47,7 +44,6 @@ const state = reactive({
     menuItems: computed<SelectDropdownMenuItem[]>(() => state.variable.values.map((value) => ({ label: value.label, name: value.key }))),
     selected: [] as SelectDropdownMenuItem[],
     isNumber: computed<boolean>(() => state.variable.type === 'number'),
-    proxyVars: useProxyValue<DashboardVars|undefined>('vars', props, emit),
 });
 
 
@@ -57,7 +53,7 @@ const handleSelectOption = () => {
 
 const changeVariables = (changedSelected: MenuItem[]) => {
     const _key = state.variable.key;
-    const vars = cloneDeep(props.vars ?? {});
+    const vars = cloneDeep(dashboardVarsState.vars ?? {});
     const selectedValues: string[] = changedSelected.map((d) => d.name) as string[];
     if (selectedValues.length === 0) {
         delete vars[_key];
@@ -69,7 +65,7 @@ const changeVariables = (changedSelected: MenuItem[]) => {
         }
         vars[_key] = _vars;
     }
-    state.proxyVars = vars;
+    dashboardVarsStore.setVars(vars);
 };
 
 const initSelected = (value: any) => {
@@ -77,15 +73,7 @@ const initSelected = (value: any) => {
     const selectedValues = flattenDeep([value ?? []]);
     const refinedValues = selectedValues.map((d) => d.toString());
     const selectedItems = state.menuItems.filter((item) => refinedValues.includes(item.name));
-    if (selectedItems.length) {
-        state.selected = selectedItems;
-    } else {
-        const found = state.menuItems[0];
-        if (found) {
-            state.selected = [found];
-            changeVariables([found]);
-        }
-    }
+    state.selected = selectedItems;
 };
 
 watch(() => dashboard.value?.vars_schema?.properties, async (varsSchema, prevVarsSchema) => {
@@ -102,7 +90,7 @@ watch(() => dashboard.value?.vars_schema?.properties, async (varsSchema, prevVar
 }, { immediate: true });
 
 // for reset
-watch(() => props.vars, (_vars) => {
+watch(() => dashboardVarsState.vars, (_vars) => {
     const selectedValues = state.selected.map((d) => d.name);
     const _variable = props.variable as TextEnumVariable|NumberEnumVariable;
     const tempVarsValue = flattenDeep([(_vars?.[_variable.key] as string|string[]|undefined) ?? []]);
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterNumberInput.vue
similarity index 93%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterNumberInput.vue
index 5eabc185cd..1c786520a9 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberInput.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterNumberInput.vue
@@ -20,20 +20,21 @@ import type {
 import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
-import { useProxyValue } from '@/common/composables/proxy-state';
 
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardVarsStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-vars-store';
 
 interface Props {
     variable: DashboardGlobalVariable;
-    vars?: DashboardVars;
 }
 
 
 const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
 const route = useRoute();
 const dashboardId = computed(() => route.params.dashboardId);
+const dashboardVarsStore = useDashboardVarsStore();
+const dashboardVarsState = dashboardVarsStore.state;
+
 const { dashboard } = useDashboardGetQuery({
     dashboardId,
 });
@@ -51,7 +52,6 @@ const state = reactive({
     value: undefined as number|undefined,
     editMode: false,
     keyword: undefined as number|undefined,
-    proxyVars: useProxyValue<DashboardVars|undefined>('vars', props, emit),
 });
 
 const handleUpdateKeyword = (value: string) => {
@@ -144,13 +144,13 @@ const isValidNumberInfo = (value: string, min: number, max: number, step?: strin
 
 const changeVariables = (changedSelected?: number) => {
     const _key = state.variable.key;
-    const vars = cloneDeep(props.vars ?? {}) as DashboardVars;
+    const vars = cloneDeep(dashboardVarsState.vars ?? {}) as DashboardVars;
     if (changedSelected !== undefined) {
         vars[_key] = changedSelected;
     } else {
         delete vars[_key];
     }
-    state.proxyVars = vars;
+    dashboardVarsStore.setVars(vars);
 };
 
 watch(() => dashboard.value?.vars_schema?.properties, (varsSchema, prevVarsSchema) => {
@@ -165,11 +165,14 @@ watch(() => dashboard.value?.vars_schema?.properties, (varsSchema, prevVarsSchem
 }, { immediate: true });
 
 // for reset
-watch(() => props.vars, (_vars) => {
+watch(() => dashboardVarsState.vars, (_vars) => {
     const _variable = props.variable as NumberAnyVariable;
     const tempVarsValue = _vars?.[_variable.key] as number|undefined;
-    if (state.value !== parseFloat(tempVarsValue)) {
-        state.value = parseFloat(tempVarsValue);
+    if (tempVarsValue === undefined) {
+        state.value = _variable.options.min;
+        changeVariables(state.value);
+    } else if (state.value !== tempVarsValue) {
+        state.value = tempVarsValue;
     }
 });
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterNumberSlider.vue
similarity index 83%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterNumberSlider.vue
index e66dbfc921..5b64c10ac4 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterNumberSlider.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterNumberSlider.vue
@@ -13,22 +13,21 @@ import type {
     DashboardGlobalVariable,
     NumberAnyVariable,
 } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
-import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
-import { useProxyValue } from '@/common/composables/proxy-state';
-
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardVarsStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-vars-store';
 
 interface Props {
     variable: DashboardGlobalVariable;
-    vars?: DashboardVars;
 }
 
 
 const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
 const route = useRoute();
 const dashboardId = computed(() => route.params.dashboardId);
+const dashboardVarsStore = useDashboardVarsStore();
+const dashboardVarsState = dashboardVarsStore.state;
+
 const { dashboard } = useDashboardGetQuery({
     dashboardId,
 });
@@ -42,7 +41,6 @@ const state = reactive({
     min: computed<number>(() => parseFloat(state.variable.options.min)),
     max: computed<number>(() => parseFloat(state.variable.options.max)),
     value: undefined as number|undefined,
-    proxyVars: useProxyValue<DashboardVars|undefined>('vars', props, emit),
 });
 
 const handleUpdateSliderValue = debounce((value: string) => {
@@ -53,13 +51,13 @@ const handleUpdateSliderValue = debounce((value: string) => {
 
 const changeVariables = (changedSelected?: number) => {
     const _key = state.variable.key;
-    const vars = cloneDeep(props.vars ?? {});
+    const vars = cloneDeep(dashboardVarsState.vars ?? {});
     if (changedSelected !== undefined) {
         vars[_key] = changedSelected;
     } else {
         delete vars[_key];
     }
-    state.proxyVars = vars;
+    dashboardVarsStore.setVars(vars);
 };
 
 watch(() => dashboard.value?.vars_schema?.properties, (varsSchema, prevVarsSchema) => {
@@ -72,11 +70,14 @@ watch(() => dashboard.value?.vars_schema?.properties, (varsSchema, prevVarsSchem
 }, { immediate: true });
 
 // for reset
-watch(() => props.vars, (_vars) => {
+watch(() => dashboardVarsState.vars, (_vars) => {
     const _variable = props.variable as NumberAnyVariable;
     const tempVarsValue = _vars?.[_variable.key] as number|undefined;
-    if (state.value !== parseFloat(tempVarsValue)) {
-        state.value = parseFloat(tempVarsValue);
+    if (tempVarsValue === undefined) {
+        state.value = _variable.options.min;
+        changeVariables(state.value);
+    } else if (state.value !== tempVarsValue) {
+        state.value = tempVarsValue;
     }
 });
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterReference.vue
similarity index 90%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterReference.vue
index 7dad113689..e4fc082e93 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterReference.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterReference.vue
@@ -16,7 +16,6 @@ import type {
     DashboardGlobalVariable,
     ReferenceVariable,
 } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
-import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { WorkspaceModel } from '@/api-clients/identity/workspace/schema/model';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
@@ -33,22 +32,22 @@ import {
     getVariableModelMenuHandler,
 } from '@/lib/variable-models/variable-model-menu-handler';
 
-import { useProxyValue } from '@/common/composables/proxy-state';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardVarsStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-vars-store';
 import { getWorkspaceInfo } from '@/services/advanced/composables/refined-table-data';
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 interface Props {
     variable: DashboardGlobalVariable;
-    vars?: DashboardVars;
 }
 
 
 const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
 const userWorkspaceStore = useUserWorkspaceStore();
 const workspaceStoreGetters = userWorkspaceStore.getters;
+const dashboardVarsStore = useDashboardVarsStore();
+const dashboardVarsState = dashboardVarsStore.state;
 const route = useRoute();
 const dashboardId = computed(() => route.params.dashboardId);
 const { dashboard } = useDashboardGetQuery({
@@ -91,7 +90,6 @@ const state = reactive({
         return getVariableModelMenuHandler([variableModelInfo], listQueryOptions);
     }),
     selected: [] as MenuItem[],
-    proxyVars: useProxyValue<DashboardVars|undefined>('vars', props, emit),
 });
 
 // event
@@ -102,7 +100,7 @@ const handleSelectOption = () => {
 // helper
 const changeVariables = (changedSelected: MenuItem[]) => {
     const _key = state.variable.key;
-    const vars = cloneDeep(props.vars ?? {});
+    const vars = cloneDeep(dashboardVarsState.vars ?? {});
     const reconvertedSelected = changedSelected.map((d) => d.name) as string[];
     if (reconvertedSelected.length === 0) {
         delete vars[_key];
@@ -111,7 +109,7 @@ const changeVariables = (changedSelected: MenuItem[]) => {
     } else {
         vars[_key] = reconvertedSelected[0];
     }
-    state.proxyVars = vars;
+    dashboardVarsStore.setVars(vars);
 };
 
 const loadOptionItems = async (selectedValues?: string[]): Promise<MenuItem[]> => {
@@ -126,24 +124,13 @@ const loadOptionItems = async (selectedValues?: string[]): Promise<MenuItem[]> =
     foundItems = foundItems.concat(results);
     return foundItems;
 };
-const initVariableAndSelected = (items: MenuItem[]) => {
-    const found = items[0];
-    if (found) {
-        state.selected = [found];
-        changeVariables([found]);
-    }
-};
 
 const initSelected = async (value: any) => {
     // Selected options data from backend can be undefined or string not string[]. Convert them to Array.
     const selectedValues = flattenDeep([value ?? []]);
     const items = await loadOptionItems(selectedValues);
     const selectedItems = items.filter((item) => selectedValues.includes(item.name));
-    if (selectedItems.length) {
-        state.selected = selectedItems;
-    } else {
-        initVariableAndSelected(items);
-    }
+    state.selected = selectedItems;
 };
 
 watch(() => dashboard.value?.vars_schema?.properties, async (varsSchema, prevVarsSchema) => {
@@ -161,7 +148,7 @@ watch(() => dashboard.value?.vars_schema?.properties, async (varsSchema, prevVar
 
 
 // for reset
-watch(() => props.vars, (_vars) => {
+watch(() => dashboardVarsState.vars, (_vars) => {
     const selectedValues = state.selected.map((d) => d.name);
     const _variable = props.variable as ReferenceVariable;
     const tempVarsValue = flattenDeep([(_vars?.[_variable.key] as string|string[]|undefined) ?? []]);
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterTextInput.vue
similarity index 89%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterTextInput.vue
index 50e106b880..9181a0ce69 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilterTextInput.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilterTextInput.vue
@@ -14,22 +14,23 @@ import type {
     DashboardGlobalVariable,
     TextAnyVariable,
 } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
-import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
 
-import { useProxyValue } from '@/common/composables/proxy-state';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardVarsStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-vars-store';
 
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
 
 interface Props {
     variable: DashboardGlobalVariable;
-    vars?: DashboardVars;
 }
 
 
 const props = defineProps<Props>();
-const emit = defineEmits<{(e: 'update:vars', val: DashboardVars): void}>();
 const route = useRoute();
 const dashboardId = computed(() => route.params.dashboardId);
+const dashboardVarsStore = useDashboardVarsStore();
+const dashboardVarsState = dashboardVarsStore.state;
+
+
 const { dashboard } = useDashboardGetQuery({
     dashboardId,
 });
@@ -41,7 +42,6 @@ const state = reactive({
     value: undefined as string|undefined,
     editMode: false,
     keyword: '',
-    proxyVars: useProxyValue<DashboardVars|undefined>('vars', props, emit),
 });
 
 const handleDeleteTextValue = () => {
@@ -66,13 +66,13 @@ const handleClickDoneButton = () => {
 
 const changeVariables = (changedSelected?: string) => {
     const _key = state.variable.key;
-    const vars = cloneDeep(props.vars ?? {});
+    const vars = cloneDeep(dashboardVarsState.vars ?? {});
     if (changedSelected) {
         vars[_key] = changedSelected;
     } else {
         delete vars[_key];
     }
-    state.proxyVars = vars;
+    dashboardVarsStore.setVars(vars);
 };
 
 // set default value
@@ -85,7 +85,7 @@ watch(() => dashboard.value?.vars_schema?.properties, (varsSchema, prevVarsSchem
 }, { immediate: true });
 
 // for reset
-watch(() => props.vars, (_vars) => {
+watch(() => dashboardVarsState.vars, (_vars) => {
     const _variable = props.variable as TextAnyVariable;
     const tempVarsValue = _vars?.[_variable.key] as string|undefined;
     if (state.value !== tempVarsValue) {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardLabels.vue
similarity index 95%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardLabels.vue
index c75bb12d9a..58c7d5a611 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabels.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardLabels.vue
@@ -5,7 +5,6 @@ import {
     computed,
     reactive, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
 import {
     PFieldGroup, PIconButton, PLabel, PTextInput,
@@ -15,11 +14,12 @@ import { i18n } from '@/translations';
 
 import { useFormValidator } from '@/common/composables/form-validator';
 
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
 
 
 interface Props {
     editable?: boolean;
+    dashboardId: string;
 }
 const props = defineProps<Props>();
 const emit = defineEmits(['update-labels']);
@@ -41,10 +41,8 @@ const {
     },
 });
 
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
 const { dashboard } = useDashboardGetQuery({
-    dashboardId,
+    dashboardId: computed(() => props.dashboardId),
 });
 
 const state = reactive({
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardLabelsButton.vue
similarity index 72%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardLabelsButton.vue
index 927dfabbe4..b6d6ce97c9 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardLabelsButton.vue
@@ -2,18 +2,15 @@
 import { onClickOutside } from '@vueuse/core';
 import { computed, reactive, ref } from 'vue';
 
-import { useMutation, useQueryClient } from '@tanstack/vue-query';
-
 import { PButton, PBadge, PPopover } from '@cloudforet/mirinae';
 
-import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
-import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import DashboardLabels from '@/services/dashboards/components/dashboard-detail/DashboardLabels.vue';
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
-import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
+import { useDashboardManageable } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-manageable';
+import { useDashboardUpdateMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-update-mutation';
+import DashboardLabels from '@/services/_shared/dashboard/dashboard-detail/components/DashboardLabels.vue';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
 
 
 
@@ -26,15 +23,12 @@ const labelPopoverRef = ref<HTMLElement|null>(null);
 /* Query */
 const {
     dashboard,
-    fetcher,
-    keys,
 } = useDashboardGetQuery({
     dashboardId: computed(() => props.dashboardId),
 });
-const { isManageable } = useDashboardManageable({
-    dashboardId: computed(() => props.dashboardId),
-});
-const queryClient = useQueryClient();
+const { getDashboardManageable } = useDashboardManageable();
+const dashboardManageable = computed(() => getDashboardManageable(dashboard.value));
+
 const state = reactive({
     visible: false,
     dashboardLabels: computed<string[]>(() => dashboard.value?.labels || []),
@@ -42,20 +36,14 @@ const state = reactive({
 });
 
 const handleUpdateLabels = async (labels: string[]) => {
-    mutate({
+    updateDashboard({
         dashboard_id: props.dashboardId,
         labels,
     });
 };
 
-const { mutate } = useMutation(
+const { mutate: updateDashboard } = useDashboardUpdateMutation(
     {
-        mutationFn: fetcher.updateDashboardFn,
-        onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
-            const isPrivate = _dashboard.dashboard_id.startsWith('private');
-            const dashboardQueryKey = isPrivate ? keys.privateDashboardGetQueryKey : keys.publicDashboardGetQueryKey;
-            queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
-        },
         onError: (e) => {
             ErrorHandler.handleError(e);
         },
@@ -89,7 +77,8 @@ onClickOutside(labelPopoverRef, () => { state.visible = false; });
             </p-button>
             <template #content>
                 <div class="content-wrapper">
-                    <dashboard-labels :editable="!state.isDeprecatedDashboard && isManageable"
+                    <dashboard-labels :editable="!state.isDeprecatedDashboard && dashboardManageable"
+                                      :dashboard-id="props.dashboardId"
                                       @update-labels="handleUpdateLabels"
                     />
                 </div>
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariableImportModal.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariableImportModal.vue
new file mode 100644
index 0000000000..d04b6a0553
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariableImportModal.vue
@@ -0,0 +1,292 @@
+<script setup lang="ts">
+import { computed, reactive, watch } from 'vue';
+
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import { cloneDeep } from 'lodash';
+
+import {
+    PButton, PButtonModal, PCheckbox, PSearch, PScopedNotification,
+} from '@cloudforet/mirinae';
+
+import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import { i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import LSBCollapsibleMenuItem from '@/common/modules/navigations/lsb/modules/LSBCollapsibleMenuItem.vue';
+
+import DashboardManageVariableImportModalTree
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariableImportModalTree.vue';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { getOrderedGlobalVariables } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
+
+
+interface Props {
+    dashboardId: string;
+    dashboardItems?: Array<DashboardModel>;
+    folderItems?: Array<DashboardFolderModel>;
+}
+const userStore = useUserStore();
+const props = withDefaults(defineProps<Props>(), {
+    dashboardItems: () => [],
+    folderItems: () => [],
+});
+const dashboardDetailStore = useDashboardDetailInfoStore();
+const dashboardDetailState = dashboardDetailStore.state;
+const dashboardId = computed(() => props.dashboardId);
+
+const {
+    dashboard,
+    fetcher,
+    keys,
+} = useDashboardGetQuery({
+    dashboardId,
+});
+const queryClient = useQueryClient();
+
+const state = reactive({
+    currentDashboardId: computed<string>(() => dashboardId.value || ''),
+    currentDashboardVariables: computed<DashboardGlobalVariable[]>(() => Object.values(dashboard.value?.vars_schema?.properties ?? {})),
+    keyword: '',
+    selectedDashboardId: '' as string|undefined,
+    publicDashboardItems: computed<PublicDashboardModel[]>(() => props.dashboardItems.filter((d) => d.dashboard_id.startsWith('public') && d.dashboard_id !== state.currentDashboardId)),
+    privateDashboardItems: computed<PrivateDashboardModel[]>(() => props.dashboardItems.filter((d) => d.dashboard_id.startsWith('private') && d.dashboard_id !== state.currentDashboardId)),
+    publicFolderItems: computed<DashboardFolderModel[]>(() => props.folderItems.filter((d) => d.folder_id.startsWith('public'))),
+    privateFolderItems: computed<DashboardFolderModel[]>(() => props.folderItems.filter((d) => d.folder_id.startsWith('private'))),
+    allDashboardItems: computed<PrivateDashboardModel[]>(() => [...state.publicDashboardItems, ...state.privateDashboardItems]),
+    selectedDashboardVariables: computed<DashboardGlobalVariable[]>(() => {
+        const selectedDashboard = state.allDashboardItems.find((item) => item.dashboard_id === state.selectedDashboardId);
+        if (!selectedDashboard) return [];
+        const _varsSchemaProperties: DashboardGlobalVariable[] = Object.values(selectedDashboard?.vars_schema?.properties || {});
+        return getOrderedGlobalVariables(_varsSchemaProperties);
+    }),
+    searchedDashboardVariables: computed<DashboardGlobalVariable[]>(() => state.selectedDashboardVariables.filter((variable) => variable?.name?.toLowerCase()?.includes(state.keyword.toLowerCase()))),
+    selectedVariableKeys: [] as string[],
+    isAllSelected: computed<boolean>(() => {
+        if (state.selectedVariableKeys.length === 0) return false;
+        return state.selectedVariableKeys.length === state.selectedDashboardVariables.filter((variable) => !isDuplicatedVariableName(variable)).length;
+    }),
+    notiBannerVisible: true,
+});
+
+
+/* Api */
+const { mutate } = useMutation(
+    {
+        mutationFn: fetcher.updateDashboardFn,
+        onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? keys.privateDashboardGetQueryKey : keys.publicDashboardGetQueryKey;
+            queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
+            showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_S_UPDATE_DASHBOARD_VARS_SCHEMA'), '');
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_UPDATE_DASHBOARD_VARS_SCHEMA'));
+        },
+        onSettled() {
+            dashboardDetailStore.setVariableImportModalVisible(false);
+        },
+    },
+);
+
+/* Event */
+const handleChangeSelectedVariableKeys = (selected: string[]) => {
+    state.selectedVariableKeys = selected;
+};
+const handleChangeAllSelectedVariables = (selected: boolean) => {
+    state.selectedVariableKeys = selected ? state.selectedDashboardVariables.filter((variable) => !isDuplicatedVariableName(variable)).map((variable) => variable.key) : [];
+};
+const handleClickClearAll = () => {
+    state.selectedVariableKeys = [];
+};
+const handleConfirmImportVariables = () => {
+    const _dashboardVarsSchemaProperties = cloneDeep(dashboard.value?.vars_schema?.properties ?? {});
+    state.selectedDashboardVariables
+        .filter((variable) => state.selectedVariableKeys.includes(variable.key))
+        .forEach((variable) => {
+            _dashboardVarsSchemaProperties[variable.key] = {
+                ...variable,
+                use: false,
+                created_by: userStore.state.userId,
+            };
+        });
+    mutate({
+        dashboard_id: state.currentDashboardId,
+        vars_schema: {
+            properties: _dashboardVarsSchemaProperties,
+        },
+    });
+};
+const handleUpdateVariableImportModalVisible = (visible: boolean) => {
+    dashboardDetailStore.setVariableImportModalVisible(visible);
+};
+
+const isDuplicatedVariableName = (variable: DashboardGlobalVariable): boolean => state.currentDashboardVariables.some((currentVariable) => currentVariable.name === variable.name
+    || currentVariable.key === variable.key);
+
+const getIndeterminate = (): boolean => {
+    const availableVariableCount = state.selectedDashboardVariables.filter((variable) => !isDuplicatedVariableName(variable)).length;
+    return state.selectedVariableKeys.length > 0 && state.selectedVariableKeys.length < availableVariableCount;
+};
+
+watch(() => state.selectedDashboardVariables, (selectedDashboardVariables) => {
+    state.notiBannerVisible = selectedDashboardVariables.some((variable) => isDuplicatedVariableName(variable));
+}, { immediate: true });
+watch(() => state.selectedDashboardId, () => {
+    state.selectedVariableKeys = [];
+}, { immediate: true });
+</script>
+
+<template>
+    <p-button-modal class="dashboard-manage-variable-import-modal"
+                    :header-title="$t('DASHBOARDS.DETAIL.VARIABLES.IMPORT_MODAL_HEADER')"
+                    :visible="dashboardDetailState.variableImportModalVisible"
+                    :disabled="!state.selectedVariableKeys.length"
+                    @update:visible="handleUpdateVariableImportModalVisible"
+                    @confirm="handleConfirmImportVariables"
+    >
+        <template #body>
+            <div class="import-contents">
+                <div class="left-dashboard-variable-tree-contents">
+                    <l-s-b-collapsible-menu-item v-if="state.publicDashboardItems.length || state.publicFolderItems.length"
+                                                 class="category-menu-item mt-1"
+                                                 :item="{
+                                                     type: 'collapsible',
+                                                     label: $t('DASHBOARDS.LNB.SHARED'),
+                                                     subItems: state.publicDashboardItems,
+                                                 }"
+                                                 is-sub-item
+                                                 show-sub-item-count
+                    >
+                        <template #collapsible-contents>
+                            <dashboard-manage-variable-import-modal-tree type="PUBLIC"
+                                                                         :dashboards="state.publicDashboardItems"
+                                                                         :folders="state.publicFolderItems"
+                                                                         :selected.sync="state.selectedDashboardId"
+                            />
+                        </template>
+                    </l-s-b-collapsible-menu-item>
+                    <l-s-b-collapsible-menu-item v-if="state.privateDashboardItems.length || state.privateFolderItems.length"
+                                                 class="category-menu-item mt-1"
+                                                 :item="{
+                                                     type: 'collapsible',
+                                                     label: $t('DASHBOARDS.LNB.PRIVATE'),
+                                                     subItems: state.privateDashboardItems,
+                                                 }"
+                                                 is-sub-item
+                                                 show-sub-item-count
+                    >
+                        <template #collapsible-contents>
+                            <dashboard-manage-variable-import-modal-tree type="PRIVATE"
+                                                                         :dashboards="state.privateDashboardItems"
+                                                                         :folders="state.privateFolderItems"
+                                                                         :selected.sync="state.selectedDashboardId"
+                            />
+                        </template>
+                    </l-s-b-collapsible-menu-item>
+                </div>
+                <div class="left-dashboard-variable-contents">
+                    <p-search v-model="state.keyword" />
+                    <div class="variable-list-wrapper">
+                        <div class="variable-list-header">
+                            <div class="header">
+                                <p-checkbox :selected="state.isAllSelected"
+                                            :indeterminate="getIndeterminate()"
+                                            @change="handleChangeAllSelectedVariables"
+                                />
+                                <span>{{ $t('DASHBOARDS.DETAIL.VARIABLES.NAME') }}</span>
+                            </div>
+                            <p-button size="sm"
+                                      style-type="tertiary"
+                                      @click="handleClickClearAll"
+                            >
+                                {{ $t('DASHBOARDS.DETAIL.VARIABLES.CLEAR_ALL') }}
+                            </p-button>
+                        </div>
+                        <div class="variable-list">
+                            <p-scoped-notification v-if="state.notiBannerVisible"
+                                                   type="warning"
+                                                   icon="ic_warning-filled"
+                                                   layout="in-section"
+                                                   :visible.sync="state.notiBannerVisible"
+                                                   show-close-button
+                            >
+                                {{ $t('DASHBOARDS.DETAIL.VARIABLES.DUPLICATED_NAME_WARNING') }}
+                            </p-scoped-notification>
+                            <div v-for="(variable) in state.searchedDashboardVariables"
+                                 :key="variable.key"
+                                 class="variable"
+                            >
+                                <p-checkbox :selected="state.selectedVariableKeys"
+                                            :value="variable.key"
+                                            :disabled="isDuplicatedVariableName(variable)"
+                                            @change="handleChangeSelectedVariableKeys"
+                                >
+                                    <span class="variable-text">{{ variable.name }}</span>
+                                </p-checkbox>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </template>
+    </p-button-modal>
+</template>
+
+<style scoped lang="postcss">
+.dashboard-manage-variable-import-modal {
+    .import-contents {
+        @apply bg-gray-100 flex;
+        height: 36.6875rem;
+
+        .left-dashboard-variable-tree-contents {
+            width: 14.625rem;
+            padding-right: 1rem;
+            height: 100%;
+            overflow: auto;
+        }
+        .left-dashboard-variable-contents {
+            @apply flex-1 flex flex-col gap-2;
+            padding: 0.5rem;
+
+            .variable-list-wrapper {
+                @apply bg-white border border-gray-150 rounded-lg;
+                height: 100%;
+                overflow: auto;
+
+                .variable-list-header {
+                    @apply border-b-2 border-gray-200 flex items-center justify-between;
+                    padding: 0.5rem;
+                    height: 2.5rem;
+                    .header {
+                        @apply flex items-center gap-1 text-label-md font-bold text-gray-900;
+                    }
+                }
+
+                .variable-list {
+                    height: calc(100% - 2.5rem);
+                    overflow: auto;
+
+                    .variable {
+                        @apply flex items-center;
+                        padding: 0.5rem;
+                        height: 2.25rem;
+                        .variable-text {
+                            @apply text-label-md text-gray-900;
+                            padding-left: 0.25rem;
+                            line-height: 1.5;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariableImportModalTree.vue
similarity index 100%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariableImportModalTree.vue
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariableOverlay.vue
similarity index 90%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariableOverlay.vue
index bebb67c496..9a3f18bbed 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariableOverlay.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
-import { useRoute, useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
@@ -19,7 +19,6 @@ import type {
 } from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
@@ -27,19 +26,14 @@ import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import DashboardManageVariableImportModal
-    from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue';
 import DashboardVariablesFormModal
-    from '@/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue';
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormModal.vue';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/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';
-
-
+} from '@/services/_shared/dashboard/dashboard-detail/constants/dashboard-vars-schema-preset';
+import { getOrderedGlobalVariables } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
 
 
 interface GlobalVariableTableItem {
@@ -52,13 +46,13 @@ interface GlobalVariableTableItem {
 }
 interface Props {
     visible: boolean;
+    dashboardId: string;
 }
 const props = defineProps<Props>();
 const userStore = useUserStore();
-const appContextStore = useAppContextStore();
+const dashboardDetailInfoStore = useDashboardDetailInfoStore();
 const router = useRouter();
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const dashboardId = computed(() => props.dashboardId);
 
 /* Query */
 const {
@@ -73,7 +67,6 @@ const queryClient = useQueryClient();
 
 
 const state = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     selectedVariableKey: undefined as string|undefined,
     modalType: 'CREATE' as 'CREATE'|'UPDATE',
     formModalVisible: false,
@@ -217,7 +210,7 @@ const handleClickCreateButton = () => {
     state.formModalVisible = true;
 };
 const handleClickImportButton = () => {
-    state.importModalVisible = true;
+    dashboardDetailInfoStore.setVariableImportModalVisible(true);
 };
 const handleClickDeleteButton = (variableKey: string) => {
     state.selectedVariableKey = variableKey;
@@ -239,12 +232,14 @@ const handleToggleUse = (variableKey: string, val: boolean) => {
     updateUseDashboardVarsSchema(dashboardId.value, variableKey, val);
 };
 const handleCloseOverlay = () => {
-    const dashboardDetailRouteName = state.isAdminMode
-        ? ADMIN_DASHBOARDS_ROUTE.DETAIL._NAME
-        : DASHBOARDS_ROUTE.DETAIL._NAME;
+    const _currentRoute = router.currentRoute;
+    if (!_currentRoute.name) {
+        console.error('currentRoute is not provided');
+        return;
+    }
     router.replace({
-        name: dashboardDetailRouteName,
-        params: { dashboardId: dashboardId.value ?? '' },
+        name: _currentRoute.name,
+        params: _currentRoute.params,
     }).catch(() => {});
 };
 const handleConfirmDelete = () => {
@@ -327,6 +322,7 @@ const handleConfirmDelete = () => {
         <dashboard-variables-form-modal :modal-type="state.modalType"
                                         :variable-key="state.selectedVariableKey"
                                         :visible.sync="state.formModalVisible"
+                                        :dashboard-id="dashboardId"
         />
         <delete-modal :header-title="$t('DASHBOARDS.DETAIL.VARIABLES.DELETE_MODAL_TITLE')"
                       :visible.sync="state.deleteModalVisible"
@@ -344,7 +340,6 @@ const handleConfirmDelete = () => {
                 </p-scoped-notification>
             </template>
         </delete-modal>
-        <dashboard-manage-variable-import-modal :visible.sync="state.importModalVisible" />
     </p-overlay-layout>
 </template>
 
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariablePortalTargets.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariablePortalTargets.vue
new file mode 100644
index 0000000000..e5c9469320
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariablePortalTargets.vue
@@ -0,0 +1,8 @@
+<script setup lang="ts"></script>
+
+<template>
+    <div class="dashboard-manage-variable-portal-targets">
+        <portal-target name="dashboard-manage-variable-overlay" />
+        <portal-target name="dashboard-manage-variable-import-modal" />
+    </div>
+</template>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardRefreshDropdown.vue
similarity index 92%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardRefreshDropdown.vue
index 078f7f4356..2c8284948c 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardRefreshDropdown.vue
@@ -16,9 +16,9 @@ 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 { 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';
+import { useDashboardManageable } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-manageable';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
 
 
 const REFRESH_INTERVAL_OPTIONS = Object.keys(REFRESH_INTERVAL_OPTIONS_MAP);
@@ -46,9 +46,8 @@ const {
     dashboardId: computed(() => props.dashboardId),
 });
 const queryClient = useQueryClient();
-const { isManageable } = useDashboardManageable({
-    dashboardId: computed(() => props.dashboardId),
-});
+const { getDashboardManageable } = useDashboardManageable();
+const dashboardManageable = computed(() => getDashboardManageable(dashboard.value));
 
 const state = reactive({
     intervalOptionList: computed<{label: TranslateResult; value: RefreshIntervalOption}[]>(() => [
@@ -104,7 +103,7 @@ const handleSelectRefreshIntervalOption = (option) => {
     clearRefreshInterval();
     executeRefreshInterval();
 
-    if (isManageable.value) {
+    if (dashboardManageable.value) {
         mutate({
             dashboard_id: props.dashboardId,
             options: {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardReorderSidebar.vue
similarity index 94%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardReorderSidebar.vue
index e2c79f0ebf..e6b0dff036 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardReorderSidebar.vue
@@ -3,7 +3,6 @@ import {
     computed,
     onUnmounted, reactive, watch,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 import draggable from 'vuedraggable';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
@@ -22,13 +21,19 @@ 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 { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
-import { useDashboardWidgetListQuery } from '@/services/dashboards/composables/use-dashboard-widget-list-query';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-widget-list-query';
+
+
 
 type WidgetModel = PublicWidgetModel | PrivateWidgetModel;
+
+const props = defineProps<{
+    dashboardId: string;
+}>();
+
 const displayStore = useDisplayStore();
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const dashboardId = computed(() => props.dashboardId);
 
 /* Query */
 const {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateCustomModal.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetDateCustomModal.vue
similarity index 100%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateCustomModal.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetDateCustomModal.vue
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetDateDropdown.vue
similarity index 91%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetDateDropdown.vue
index bc61c8d69e..01e5afe2c5 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetDateDropdown.vue
@@ -18,10 +18,11 @@ import { i18n } from '@/translations';
 
 import { useI18nDayjs } from '@/common/composables/i18n-dayjs';
 
-import DashboardToolsetDateCustomModal from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateCustomModal.vue';
-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';
+import { useDashboardManageable } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-manageable';
+import DashboardToolsetDateCustomModal
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetDateCustomModal.vue';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
 
 interface Props {
     dateRange?: DateRange;
@@ -46,9 +47,8 @@ const {
     dashboardId,
 });
 const queryClient = useQueryClient();
-const { isManageable } = useDashboardManageable({
-    dashboardId,
-});
+const { getDashboardManageable } = useDashboardManageable();
+const dashboardManageable = computed(() => getDashboardManageable(dashboard.value));
 const state = reactive({
     monthMenuItems: computed<MenuItem[]>(() => {
         const monthData: MenuItem[] = [];
@@ -115,7 +115,7 @@ const handleSelectMonthMenuItem = (selected: string) => {
         updateDashboardDateRange(state.selectedDateRange);
     }
 
-    if (isManageable.value && !props.widgetMode) {
+    if (dashboardManageable.value && !props.widgetMode) {
         mutate({
             dashboard_id: dashboardId.value,
             options: {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetScope.vue
similarity index 98%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetScope.vue
index 457dbb192e..59fedf905c 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetScope.vue
@@ -19,9 +19,9 @@ import type { WorkspaceReferenceMap } from '@/store/reference/workspace-referenc
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
 import { workspaceStateFormatter } from '@/services/advanced/composables/refined-table-data';
 import { WORKSPACE_STATE } from '@/services/advanced/constants/workspace-constant';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormDynamic.vue
similarity index 99%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormDynamic.vue
index da21e38ba0..a3a4cd5a3a 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormDynamic.vue
@@ -30,7 +30,7 @@ import { useProxyValue } from '@/common/composables/proxy-state';
 
 import {
     DASHBOARD_GLOBAL_VARIABLES_PRESET_LIST,
-} from '@/services/dashboards/constants/dashboard-global-variable-preset';
+} from '@/services/_shared/dashboard/dashboard-detail/constants/dashboard-global-variable-preset';
 
 const SELECTION_TYPE = {
     MULTI_SELECT: 'multi',
@@ -51,13 +51,11 @@ const emit = defineEmits<{(e: 'update:is-valid', isValid: boolean): void;
     (e: 'update:data', data: DynamicVariableData): void;
 }>();
 
-const appContextStore = useAppContextStore();
 const allReferenceStore = useAllReferenceStore();
-
+const appContextStore = useAppContextStore();
 const { visibleContents } = useContentsAccessibility(MENU_ID.ASSET_INVENTORY);
 
 const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     namespaces: computed<NamespaceReferenceMap>(() => allReferenceStore.getters.namespace),
     providers: computed<ProviderReferenceMap>(() => allReferenceStore.getters.provider),
     metrics: computed<MetricReferenceMap>(() => allReferenceStore.getters.metric),
@@ -201,7 +199,7 @@ const state = reactive({
     selectedCostDataSourceMenuItem: computed<MenuItem[]>(() => state.costDataSourceMenuItems.filter((d) => d.name === state.selectedCostDataSourceId)),
 });
 const { allItems: costDataSourceFilterMenuItems } = useCostDataSourceFilterMenuItems({
-    isAdminMode: computed(() => storeState.isAdminMode),
+    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     costDataSource: computed(() => storeState.costDataSources[state.selectedCostDataSourceId]),
 });
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormManual.vue
similarity index 100%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormManual.vue
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormModal.vue
similarity index 97%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormModal.vue
index ec22ea9c1b..6ee6d79d5c 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesFormModal.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormModal.vue
@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import { computed, reactive, watch } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep, isEmpty } from 'lodash';
@@ -24,10 +23,10 @@ import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
 import DashboardVariablesFormDynamic
-    from '@/services/dashboards/components/dashboard-detail/DashboardVariablesFormDynamic.vue';
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormDynamic.vue';
 import DashboardVariablesFormManual
-    from '@/services/dashboards/components/dashboard-detail/DashboardVariablesFormManual.vue';
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesFormManual.vue';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
 
 type ManualVariableData = Omit<ManualVariable, 'management'|'key'|'name'|'method'>;
 type DynamicVariableData = Omit<DashboardGlobalVariable, 'management'|'key'|'name'|'method'>;
@@ -40,6 +39,7 @@ interface Props {
     visible: boolean;
     modalType: 'CREATE'|'UPDATE';
     variableKey?: string;
+    dashboardId: string;
 }
 const props = withDefaults(defineProps<Props>(), {
     visible: false,
@@ -47,10 +47,9 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const emit = defineEmits<{(e: 'update:visible', visible: boolean): void;
 }>();
+const dashboardId = computed(() => props.dashboardId);
 
 const userStore = useUserStore();
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
 
 /* Query */
 const {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesMoreButton.vue
similarity index 87%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesMoreButton.vue
index 0b515eb8a8..e1dc5ac324 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesMoreButton.vue
@@ -4,7 +4,7 @@ import {
     computed,
     reactive, ref, toRef, toRefs, watch,
 } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
+import { useRouter } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import {
@@ -21,32 +21,27 @@ import type {
 } from '@/api-clients/dashboard/_types/dashboard-type';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
-
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-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 { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { MANAGE_VARIABLES_HASH_NAME } from '@/services/_shared/dashboard/dashboard-detail/constants/manage-variable-overlay-constant';
+import { getOrderedGlobalVariables } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper';
 
 interface VariableMenuItem extends MenuItem {
     use?: boolean;
 }
 interface Props {
+    dashboardId: string;
     isManageable?: boolean;
     disabled?: boolean;
     widgetMode?: boolean;
 }
 
 const props = defineProps<Props>();
-const appContextStore = useAppContextStore();
 const router = useRouter();
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const dashboardId = computed(() => props.dashboardId);
 
 /* Query */
 const {
@@ -58,7 +53,6 @@ const {
 });
 const queryClient = useQueryClient();
 const state = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     targetRef: null as HTMLElement | null,
     contextMenuRef: null as any | null,
     searchText: '',
@@ -150,12 +144,14 @@ const { mutate, isPending: loading } = useMutation(
 /* Event */
 const handleOpenOverlay = () => {
     hideContextMenu();
-    const dashboardDetailRouteName = state.isAdminMode
-        ? ADMIN_DASHBOARDS_ROUTE.DETAIL._NAME
-        : DASHBOARDS_ROUTE.DETAIL._NAME;
+    const _currentRoute = router.currentRoute;
+    if (!_currentRoute.name) {
+        console.error('currentRoute is not provided');
+        return;
+    }
     router.push({
-        name: dashboardDetailRouteName,
-        params: { dashboardId: dashboardId.value ?? '' },
+        name: _currentRoute.name,
+        params: _currentRoute.params,
         hash: `#${MANAGE_VARIABLES_HASH_NAME}`,
     }).catch(() => {});
 };
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardWidgetContainerV2.vue
similarity index 93%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardWidgetContainerV2.vue
index 2a5e91e841..437d504195 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/components/DashboardWidgetContainerV2.vue
@@ -3,7 +3,6 @@ import type { ComponentPublicInstance, AsyncComponent } from 'vue';
 import {
     reactive, ref, watch, computed, onBeforeUnmount,
 } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep, debounce, flattenDeep } from 'lodash';
@@ -35,7 +34,6 @@ import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-
 
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import WidgetFormOverlay from '@/common/modules/widgets/_components/WidgetFormOverlay.vue';
 import { DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
 import { getWidgetComponent } from '@/common/modules/widgets/_helpers/widget-component-helper';
 import { getWidgetConfig } from '@/common/modules/widgets/_helpers/widget-config-helper';
@@ -45,22 +43,24 @@ import type { WidgetHeaderValue } from '@/common/modules/widgets/_widget-fields/
 import type {
     WidgetExpose, WidgetProps, WidgetSize, WidgetOverlayType,
 } from '@/common/modules/widgets/types/widget-display-type';
+import WidgetFormOverlayLayout from '@/common/modules/widgets/WidgetFormOverlayLayout.vue';
 
-import DashboardReorderSidebar from '@/services/dashboards/components/dashboard-detail/DashboardReorderSidebar.vue';
+import { useDashboardManageable } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-manageable';
+import DashboardReorderSidebar
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardReorderSidebar.vue';
 import {
     useDashboardContainerWidth,
-} from '@/services/dashboards/composables/use-dashboard-container-width';
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
-import { useDashboardManageable } from '@/services/dashboards/composables/use-dashboard-manageable';
+} from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-container-width';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-widget-list-query';
+import { useDashboardRefinedVars } from '@/services/_shared/dashboard/dashboard-detail/contextual-composables/use-dashboard-refined-vars';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import {
     useAllReferenceTypeInfoStore,
 } from '@/services/dashboards/stores/all-reference-type-info-store';
-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>;
@@ -71,11 +71,14 @@ type RefinedWidgetInfo = WidgetModel & {
     component: AsyncComponent|null;
 };
 
-const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const props = defineProps<{
+    dashboardId: string;
+}>();
+
+
+const dashboardId = computed(() => props.dashboardId);
 
 const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailGetters = dashboardDetailStore.getters;
 const dashboardDetailState = dashboardDetailStore.state;
 const widgetGenerateStore = useWidgetGenerateStore();
 const widgetGenerateState = widgetGenerateStore.state;
@@ -84,6 +87,7 @@ const allReferenceStore = useAllReferenceStore();
 const displayStore = useDisplayStore();
 const { publicDataTableAPI } = usePublicDataTableApi();
 const { privateDataTableAPI } = usePrivateDataTableApi();
+const { refinedVars } = useDashboardRefinedVars(dashboardId);
 
 /* Query */
 const {
@@ -104,9 +108,8 @@ const {
     dashboardId,
 });
 const queryClient = useQueryClient();
-const { isManageable } = useDashboardManageable({
-    dashboardId,
-});
+const { getDashboardManageable } = useDashboardManageable();
+const dashboardManageable = computed(() => getDashboardManageable(dashboard.value));
 
 /* State */
 const containerRef = ref<HTMLElement|null>(null);
@@ -544,10 +547,10 @@ onBeforeUnmount(() => {
                                :mode="displayStore.state.visibleSidebar ? 'edit-layout' : 'view'"
                                :loading="getWidgetLoading(widget.widget_id)"
                                :dashboard-options="dashboardDetailState.options"
-                               :dashboard-vars="dashboardDetailGetters.refinedVars"
+                               :dashboard-vars="refinedVars"
                                :dashboard-id="dashboardId"
                                :disable-refresh-on-variable-change="widgetGenerateState.showOverlay || dashboardDetailState.loadingDashboard"
-                               :disable-manage-buttons="!isManageable"
+                               :disable-manage-buttons="!dashboardManageable"
                                :all-reference-type-info="state.allReferenceTypeInfo"
                                :load-disabled="widgetGenerateState.showOverlay || getWidgetLoading(widget.widget_id)"
                                @mounted="handleWidgetMounted(widget.widget_id)"
@@ -566,7 +569,7 @@ onBeforeUnmount(() => {
             <p-empty show-image
                      image-size="sm"
                      class="empty-wrapper"
-                     :show-button="isManageable"
+                     :show-button="dashboardManageable"
             >
                 {{ $t('DASHBOARDS.DETAIL.NO_WIDGET_TEXT') }}
                 <template #button>
@@ -586,9 +589,9 @@ onBeforeUnmount(() => {
                       @update:visible="widgetDeleteState.visibleModal = $event"
                       @confirm="handleDeleteModalConfirm"
         />
-        <widget-form-overlay />
-        <dashboard-reorder-sidebar
-            :widget-info-list="state.refinedWidgetInfoList ?? []"
+        <widget-form-overlay-layout :dashboard="dashboard" />
+        <dashboard-reorder-sidebar :dashboard-id="dashboardId"
+                                   :widget-info-list="state.refinedWidgetInfoList ?? []"
         />
     </div>
 </template>
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-container-width.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-container-width.ts
similarity index 95%
rename from apps/web/src/services/dashboards/composables/use-dashboard-container-width.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-container-width.ts
index 2c14ad42b5..58924df509 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-container-width.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-container-width.ts
@@ -4,7 +4,7 @@ import { onBeforeUnmount, onMounted, ref } from 'vue';
 import {
     WIDGET_CONTAINER_MAX_WIDTH,
     WIDGET_CONTAINER_MIN_WIDTH, WIDGET_WIDTH_CRITERIA,
-} from '@/services/dashboards/constants/widget-container-config';
+} from '@/services/_shared/dashboard/dashboard-detail/constants/widget-container-config';
 
 interface UseContainerResizerOptions {
     observeResize: boolean;
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-get-query.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query.ts
similarity index 77%
rename from apps/web/src/services/dashboards/composables/use-dashboard-get-query.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query.ts
index 5b2c3d5706..33596ac86e 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-get-query.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query.ts
@@ -1,8 +1,8 @@
+
+
 import type { ComputedRef } from 'vue';
 import { computed } from 'vue';
 
-import type { QueryKey } from '@tanstack/vue-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';
@@ -13,12 +13,13 @@ import type { PublicDashboardGetParameters } from '@/api-clients/dashboard/publi
 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 { useScopedQuery } from '@/query/composables/use-scoped-query';
+import type { QueryKeyArray } from '@/query/query-key/_types/query-key-type';
 import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 
 const STALE_TIME = 1000 * 60 * 5;
 
 interface UseDashboardGetQueryOptions {
-    dashboardId: ComputedRef<string|undefined>;
+    dashboardId?: ComputedRef<string|undefined>;
 }
 
 interface UseDashboardGetQueryReturn {
@@ -26,8 +27,8 @@ interface UseDashboardGetQueryReturn {
     isLoading: ComputedRef<boolean>;
     isError: ComputedRef<boolean>;
     keys: {
-        publicDashboardGetQueryKey: ComputedRef<QueryKey>;
-        privateDashboardGetQueryKey: ComputedRef<QueryKey>;
+        publicDashboardGetQueryKey: ComputedRef<QueryKeyArray>;
+        privateDashboardGetQueryKey: ComputedRef<QueryKeyArray>;
     };
     api: {
         publicDashboardAPI: ReturnType<typeof usePublicDashboardApi>['publicDashboardAPI'];
@@ -44,34 +45,44 @@ export const useDashboardGetQuery = ({
     const { publicDashboardAPI } = usePublicDashboardApi();
     const { privateDashboardAPI } = usePrivateDashboardApi();
 
-    const isPrivate = computed(() => !!dashboardId.value?.startsWith('private'));
+    const isPrivate = computed(() => !!dashboardId?.value?.startsWith('private'));
 
 
     /* Query Keys */
     const { key: publicDashboardGetQueryKey, params: publicDashboardGetParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'get', {
-        contextKey: computed(() => dashboardId.value),
+        contextKey: computed(() => dashboardId?.value),
         params: computed<PublicDashboardGetParameters>(() => ({
-            dashboard_id: dashboardId.value as string,
+            dashboard_id: dashboardId?.value as string,
         })),
     });
     const { key: privateDashboardGetQueryKey, params: privateDashboardGetParams } = useServiceQueryKey('dashboard', 'private-dashboard', 'get', {
-        contextKey: computed(() => dashboardId.value),
+        contextKey: computed(() => dashboardId?.value),
         params: computed<PrivateDashboardGetParameters>(() => ({
-            dashboard_id: dashboardId.value as string,
+            dashboard_id: dashboardId?.value as string,
         })),
     });
 
     /* Querys */
     const publicDashboardQuery = useScopedQuery({
         queryKey: publicDashboardGetQueryKey,
-        queryFn: () => publicDashboardAPI.get(publicDashboardGetParams.value),
-        enabled: computed(() => !!dashboardId.value && !isPrivate.value),
+        queryFn: () => {
+            if (!publicDashboardGetParams.value.dashboard_id) {
+                throw new Error('dashboard_id is required');
+            }
+            return 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),
+        queryFn: () => {
+            if (!privateDashboardGetParams.value.dashboard_id) {
+                throw new Error('dashboard_id is required');
+            }
+            return privateDashboardAPI.get(privateDashboardGetParams.value);
+        },
+        enabled: computed(() => !!dashboardId?.value && isPrivate.value),
         staleTime: STALE_TIME,
     }, ['WORKSPACE']);
 
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-widget-list-query.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-widget-list-query.ts
similarity index 98%
rename from apps/web/src/services/dashboards/composables/use-dashboard-widget-list-query.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-widget-list-query.ts
index 58f964b851..7b16f0867e 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-widget-list-query.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-widget-list-query.ts
@@ -50,11 +50,13 @@ export const useDashboardWidgetListQuery = ({
 
     /* Query Keys */
     const { key: publicWidgetListQueryKey, params: publicWidgetListParams } = useServiceQueryKey('dashboard', 'public-widget', 'list', {
+        contextKey: dashboardId.value,
         params: computed<PublicWidgetListParameters>(() => ({
             dashboard_id: dashboardId.value as string,
         })),
     });
     const { key: privateWidgetListQueryKey, params: privateWidgetListParams } = useServiceQueryKey('dashboard', 'private-widget', 'list', {
+        contextKey: dashboardId.value,
         params: computed<PrivateWidgetListParameters>(() => ({
             dashboard_id: dashboardId.value as string,
         })),
diff --git a/apps/web/src/services/dashboards/composables/use-reformed-widget-info-list.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-reformed-widget-info-list.ts
similarity index 84%
rename from apps/web/src/services/dashboards/composables/use-reformed-widget-info-list.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-reformed-widget-info-list.ts
index 5926f71e76..adc709cd2e 100644
--- a/apps/web/src/services/dashboards/composables/use-reformed-widget-info-list.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/composables/use-reformed-widget-info-list.ts
@@ -8,13 +8,13 @@ import type { WidgetConfig, WidgetSize } from '@/api-clients/dashboard/_types/wi
 
 import {
     widgetThemeAssigner,
-} from '@/services/dashboards/helpers/widget-theme-helper';
+} from '@/services/_shared/dashboard/dashboard-detail/helpers/widget-theme-helper';
 import {
     widgetWidthAssigner,
-} from '@/services/dashboards/helpers/widget-width-helper';
-import { getWidgetComponent } from '@/services/dashboards/widgets/_helpers/widget-component-helper';
-import { getWidgetConfig } from '@/services/dashboards/widgets/_helpers/widget-config-helper';
-import type { WidgetTheme } from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/helpers/widget-width-helper';
+import { getWidgetComponent } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-component-helper';
+import { getWidgetConfig } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-config-helper';
+import type { WidgetTheme } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 interface UseWidgetReformerOptions {
     dashboardWidgetInfoList: Ref<DashboardLayoutWidgetInfo[]>;
diff --git a/apps/web/src/services/dashboards/constants/dashboard-global-variable-preset.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/constants/dashboard-global-variable-preset.ts
similarity index 100%
rename from apps/web/src/services/dashboards/constants/dashboard-global-variable-preset.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/constants/dashboard-global-variable-preset.ts
diff --git a/apps/web/src/services/dashboards/constants/dashboard-global-variable.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/constants/dashboard-global-variable.ts
similarity index 100%
rename from apps/web/src/services/dashboards/constants/dashboard-global-variable.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/constants/dashboard-global-variable.ts
diff --git a/apps/web/src/services/dashboards/constants/dashboard-managed-variables-schema.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/constants/dashboard-managed-variables-schema.ts
similarity index 100%
rename from apps/web/src/services/dashboards/constants/dashboard-managed-variables-schema.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/constants/dashboard-managed-variables-schema.ts
diff --git a/apps/web/src/services/dashboards/constants/dashboard-vars-schema-preset.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/constants/dashboard-vars-schema-preset.ts
similarity index 100%
rename from apps/web/src/services/dashboards/constants/dashboard-vars-schema-preset.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/constants/dashboard-vars-schema-preset.ts
diff --git a/apps/web/src/services/dashboards/constants/manage-variable-overlay-constant.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/constants/manage-variable-overlay-constant.ts
similarity index 100%
rename from apps/web/src/services/dashboards/constants/manage-variable-overlay-constant.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/constants/manage-variable-overlay-constant.ts
diff --git a/apps/web/src/services/dashboards/constants/widget-container-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/constants/widget-container-config.ts
similarity index 86%
rename from apps/web/src/services/dashboards/constants/widget-container-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/constants/widget-container-config.ts
index ff9613bc5e..b1c0e9a4a9 100644
--- a/apps/web/src/services/dashboards/constants/widget-container-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/constants/widget-container-config.ts
@@ -1,6 +1,6 @@
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import type { WidgetTheme } from '@/services/dashboards/widgets/_types/widget-type';
+import type { WidgetTheme } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 export const WIDGET_WIDTH_CRITERIA = 16;
 
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardDetailBody.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardDetailBody.vue
new file mode 100644
index 0000000000..2f98da18ac
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardDetailBody.vue
@@ -0,0 +1,321 @@
+<script lang="ts" setup>
+import {
+    computed, ref, watch, onUnmounted,
+} from 'vue';
+import { useRouter } from 'vue-router/composables';
+
+import { useMutation, useQueryClient } from '@tanstack/vue-query';
+
+import { PDivider, PSkeleton } from '@cloudforet/mirinae';
+
+import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
+
+import { useDashboardManageable } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-manageable';
+import { useDashboardSharedContext } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context';
+import DashboardManageVariablePortalTargets from '@/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariablePortalTargets.vue';
+import DashboardRefreshDropdown
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardRefreshDropdown.vue';
+import DashboardToolsetDateDropdown
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetDateDropdown.vue';
+import DashboardToolsetScope
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetScope.vue';
+import DashboardWidgetContainerV2
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardWidgetContainerV2.vue';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-widget-list-query';
+import DashboardDetailHeader from '@/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardDetailHeader.vue';
+import DashboardVariablesV2
+    from '@/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardVariablesV2.vue';
+import DashboardVariables from '@/services/_shared/dashboard/dashboard-detail/legacy/DashboardVariables.vue';
+import DashboardWidgetContainer from '@/services/_shared/dashboard/dashboard-detail/legacy/DashboardWidgetContainer.vue';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
+import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
+import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+
+interface Props {
+    dashboardId: string;
+    dashboardItems?: Array<DashboardModel>;
+    folderItems: Array<DashboardFolderModel>;
+}
+
+const props = withDefaults(defineProps<Props>(), {
+    dashboardItems: () => [],
+    folderItems: () => [],
+});
+
+
+const emit = defineEmits<{(e: 'select-toolset', toolsetId: string|undefined): void;
+}>();
+const dashboardId = computed(() => props.dashboardId);
+const router = useRouter();
+const dashboardDetailStore = useDashboardDetailInfoStore();
+const dashboardDetailState = dashboardDetailStore.state;
+const widgetGenerateStore = useWidgetGenerateStore();
+const widgetContainerRef = ref<typeof DashboardWidgetContainer|typeof DashboardWidgetContainerV2|null>(null);
+
+const { getDashboardManageable } = useDashboardManageable();
+const {
+    isAdminMode, entryPoint, projectGroupOrProjectId, projectContextType,
+} = useDashboardSharedContext();
+
+/* Query */
+const queryClient = useQueryClient();
+const {
+    dashboard,
+    isError: dashboardError,
+    isLoading: dashboardLoading,
+    keys: dashboardKeys,
+    fetcher: dashboardFetcher,
+} = useDashboardGetQuery({
+    dashboardId,
+});
+const {
+    widgetList,
+    isLoading: widgetLoading,
+    isError: widgetError,
+    keys: widgetListKeys,
+} = useDashboardWidgetListQuery({
+    dashboardId,
+});
+
+const isDeprecatedDashboard = computed(() => dashboard.value?.version === '1.0');
+const dashboardItemsV2 = computed(() => props.dashboardItems?.filter((d) => d.version !== '1.0'));
+
+const handleRefresh = async () => {
+    if (dashboard.value?.version !== '1.0') {
+        const isPrivate = props.dashboardId.startsWith('private');
+        const widgetListQueryKey = isPrivate ? widgetListKeys.privateWidgetListQueryKey : widgetListKeys.publicWidgetListQueryKey;
+        await queryClient.invalidateQueries({ queryKey: widgetListQueryKey.value });
+    }
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget();
+};
+const handleUpdateDashboardVariables = (params) => {
+    updateDashboard({
+        dashboard_id: props.dashboardId,
+        ...params,
+    });
+};
+const handleSelectToolset = (toolsetId: string|undefined) => {
+    emit('select-toolset', toolsetId);
+};
+
+
+const { mutate: updateDashboard, isPending: dashboardUpdateLoading } = useMutation(
+    {
+        mutationFn: dashboardFetcher.updateDashboardFn,
+        onSuccess: (_dashboard: PublicDashboardModel | PrivateDashboardModel) => {
+            const isPrivate = _dashboard.dashboard_id.startsWith('private');
+            const dashboardQueryKey = isPrivate ? dashboardKeys.privateDashboardGetQueryKey : dashboardKeys.publicDashboardGetQueryKey;
+            queryClient.setQueryData(dashboardQueryKey.value, (oldDashboard) => {
+                if (!oldDashboard) return _dashboard;
+                return {
+                    ...oldDashboard,
+                    vars: { ..._dashboard.vars },
+                };
+            });
+        },
+        onError: (e) => {
+            showErrorMessage(e.message, e);
+            ErrorHandler.handleError(e);
+        },
+    },
+);
+
+
+watch(dashboard, (_dashboard) => {
+    if (_dashboard) {
+        dashboardDetailStore.reset();
+        if (isDeprecatedDashboard.value) {
+            dashboardDetailStore.setDashboardInfoStoreState(_dashboard);
+        } else if (entryPoint.value === 'PROJECT' && projectGroupOrProjectId.value) {
+            if (projectContextType.value === 'PROJECT') {
+                dashboardDetailStore.setDashboardInfoStoreStateV2({
+                    ..._dashboard,
+                    project_id: projectGroupOrProjectId.value,
+                });
+            } else if (projectContextType.value === 'PROJECT_GROUP') {
+                dashboardDetailStore.setDashboardInfoStoreStateV2({
+                    ..._dashboard,
+                    project_group_id: projectGroupOrProjectId.value,
+                });
+            }
+        } else {
+            dashboardDetailStore.setDashboardInfoStoreStateV2(_dashboard);
+        }
+    }
+}, { immediate: true });
+watch(widgetList, (_widgetList) => {
+    if (_widgetList.length) {
+        dashboardDetailStore.setDashboardWidgets(_widgetList);
+    }
+});
+watch([dashboardError, widgetError], ([_dashboardError, _widgetError]) => {
+    if (_dashboardError || _widgetError) {
+        ErrorHandler.handleError(_dashboardError || _widgetError);
+        if (entryPoint.value === 'PROJECT') {
+            if (!projectGroupOrProjectId.value) {
+                console.error('projectGroupOrProjectId is not provided');
+                return;
+            }
+            router.push({
+                name: PROJECT_ROUTE_V2._NAME,
+                params: {
+                    projectGroupOrProjectId: projectGroupOrProjectId.value,
+                },
+            });
+        } else if (entryPoint.value === 'DASHBOARDS') {
+            if (isAdminMode.value) {
+                router.push({
+                    name: ADMIN_DASHBOARDS_ROUTE._NAME,
+                });
+            } else {
+                router.push({
+                    name: DASHBOARDS_ROUTE._NAME,
+                });
+            }
+        } else {
+            console.error('Invalid entry point');
+        }
+    }
+});
+
+
+onUnmounted(() => {
+    // gnbStore.setBreadcrumbs([]);
+    // Reset Dashboard Detail Custom breadcrumbs
+    dashboardDetailStore.reset();
+    widgetGenerateStore.reset();
+});
+</script>
+
+<template>
+    <div class="dashboard-detail-body">
+        <dashboard-detail-header :dashboard-id="props.dashboardId"
+                                 :folder-items="props.folderItems"
+                                 @select-toolset="handleSelectToolset"
+        />
+        <p-divider v-if="entryPoint !== 'PROJECT'"
+                   class="divider"
+        />
+        <div class="dashboard-detail-content"
+             :class="{ 'project-dashboard': entryPoint === 'PROJECT' }"
+        >
+            <div class="fixed-header">
+                <div class="filter-box">
+                    <div class="left-part">
+                        <dashboard-toolset-date-dropdown :date-range="dashboardDetailState.options.date_range" />
+                        <dashboard-toolset-scope v-if="entryPoint === 'DASHBOARDS' && isAdminMode" />
+                    </div>
+                    <div class="right-part">
+                        <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
+                                                    :loading="dashboardLoading || widgetLoading || dashboardUpdateLoading"
+                                                    @refresh="handleRefresh"
+                        />
+                    </div>
+                </div>
+
+                <div class="dashboard-selectors">
+                    <p-skeleton v-if="dashboardUpdateLoading || dashboardLoading"
+                                width="100%"
+                                height="2rem"
+                    />
+                    <template v-else>
+                        <dashboard-variables v-if="isDeprecatedDashboard"
+                                             class="variable-selector-wrapper"
+                                             :loading="dashboardUpdateLoading"
+                                             @update="handleUpdateDashboardVariables"
+                        />
+                        <dashboard-variables-v2 v-else
+                                                class="variable-selector-wrapper"
+                                                :disable-save-button="!getDashboardManageable(dashboard)"
+                                                :loading="dashboardUpdateLoading"
+                                                :dashboard-id="props.dashboardId"
+                                                :dashboard-items="dashboardItemsV2"
+                                                :folder-items="folderItems"
+                                                @update="handleUpdateDashboardVariables"
+                        />
+                    </template>
+                </div>
+            </div>
+
+            <div class="widget-container-body">
+                <dashboard-widget-container v-if="isDeprecatedDashboard"
+                                            ref="widgetContainerRef"
+                />
+                <dashboard-widget-container-v2 v-else
+                                               ref="widgetContainerRef"
+                                               :dashboard-id="props.dashboardId"
+                />
+            </div>
+            <dashboard-manage-variable-portal-targets />
+        </div>
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.dashboard-detail-body {
+    .divider {
+        @apply mb-4;
+    }
+    .dashboard-detail-content {
+        &.project-dashboard {
+            @apply bg-gray-100 rounded-lg px-2 pb-2 mx-4;
+
+            .fixed-header {
+                position: unset;
+            }
+        }
+
+        .fixed-header {
+            @apply sticky bg-gray-100;
+            z-index: 20;
+            top: 0;
+            padding-top: 1rem;
+
+            .filter-box {
+                @apply flex justify-between items-start mb-4;
+                flex-wrap: wrap;
+                row-gap: 0.25rem;
+
+                .left-part {
+                    display: flex;
+                    align-items: center;
+                    flex-wrap: wrap;
+                    column-gap: 1rem;
+                }
+
+                .right-part {
+                    display: flex;
+                    flex-wrap: wrap;
+                    flex-shrink: 0;
+                }
+            }
+
+            .dashboard-selectors {
+                padding-bottom: 0.75rem;
+
+                .variable-selector-wrapper {
+                    @apply relative flex items-center flex-wrap;
+                    gap: 0.5rem;
+                    padding-right: 1rem;
+                }
+            }
+        }
+
+        .widget-container-body {
+            padding-top: 0.75rem;
+        }
+    }
+}
+
+</style>
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardDetailHeader.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardDetailHeader.vue
new file mode 100644
index 0000000000..5f0d75d962
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardDetailHeader.vue
@@ -0,0 +1,193 @@
+<script lang="ts" setup>
+import { computed, reactive } from 'vue';
+
+import {
+    PHeading, PSkeleton, PSelectDropdown, PI, PBadge, PHeadingLayout,
+} from '@cloudforet/mirinae';
+import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
+import type { BadgeStyleType, BadgeType } from '@cloudforet/mirinae/types/data-display/badge/type';
+
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
+import { i18n } from '@/translations';
+
+
+import { gray } from '@/styles/colors';
+
+import { useDashboardManageable } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-manageable';
+import { useDashboardSharedContext } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context';
+import { useDashboardControlMenuHelper } from '@/services/_shared/dashboard/core/composables/use-dashboard-control-menu-helper';
+import DashboardControlButtons from '@/services/_shared/dashboard/dashboard-detail/components/DashboardControlButtons.vue';
+import DashboardLabelsButton from '@/services/_shared/dashboard/dashboard-detail/components/DashboardLabelsButton.vue';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+
+interface Props {
+    dashboardId: string;
+    folderItems: Array<FolderModel>;
+}
+const props = withDefaults(defineProps<Props>(), {
+    folderItems: () => [],
+});
+const emit = defineEmits<{(e: 'select-toolset', toolsetId: string|undefined): void;}>();
+const { isAdminMode, entryPoint } = useDashboardSharedContext();
+
+const { dashboard } = useDashboardGetQuery({
+    dashboardId: computed(() => props.dashboardId),
+});
+const { getDashboardManageable } = useDashboardManageable();
+const dashboardManageable = computed(() => getDashboardManageable(dashboard.value));
+
+const { getControlDashboardMenuItems } = useDashboardControlMenuHelper();
+const controlMenuItems = computed<MenuItem[]>(() => {
+    if (!dashboard.value) return [];
+    return getControlDashboardMenuItems(props.dashboardId, dashboardManageable.value, dashboard.value, entryPoint.value === 'PROJECT');
+});
+
+const state = reactive({
+    isPrivate: computed<boolean>(() => !!dashboard.value?.dashboard_id.startsWith('private')),
+    isSharedDashboard: computed<boolean>(() => !!dashboard.value?.shared),
+    showBadge: computed<boolean>(() => {
+        if (dashboard.value?.user_id) return true;
+        return state.isSharedDashboard;
+    }),
+    badgeType: computed<BadgeType>(() => 'subtle'),
+    badgeStyleType: computed<BadgeStyleType>(() => {
+        if (state.isPrivate) return 'gray150';
+        return 'indigo100';
+    }),
+    badgeText: computed(() => {
+        if (props.dashboardId?.startsWith('private')) return i18n.t('DASHBOARDS.ALL_DASHBOARDS.PRIVATE');
+        if (state.isSharedDashboard) {
+            if (entryPoint.value === 'DASHBOARDS') {
+                if (isAdminMode.value) {
+                    if (dashboard.value?.scope === 'PROJECT') {
+                        return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_ALL_PROJECTS');
+                    }
+                    return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_WORKSPACES');
+                }
+                return i18n.t('DASHBOARDS.DETAIL.SHARED_BY_ADMIN');
+            }
+            if (entryPoint.value === 'PROJECT') {
+                if (dashboard.value?.resource_group === RESOURCE_GROUP.DOMAIN) return i18n.t('DASHBOARDS.DETAIL.SHARED_BY_ADMIN');
+                return i18n.t('DASHBOARDS.DETAIL.SHARED_BY_WORKSPACE');
+            }
+        }
+        return '';
+    }),
+    folderName: computed<string|undefined>(() => {
+        if (props.folderItems.length > 0) {
+            const currentFolder = props.folderItems.find((d) => d.folder_id === dashboard.value?.folder_id);
+            return currentFolder?.name;
+        }
+        return undefined;
+    }),
+});
+
+/* Event */
+const handleSelectItem = (item: MenuItem) => {
+    emit('select-toolset', item.name);
+};
+</script>
+
+<template>
+    <div class="dashboard-detail-header"
+         :class="{ 'project-dashboard': entryPoint === 'PROJECT' }"
+    >
+        <div v-if="state.folderName"
+             class="folder-name-wrapper"
+        >
+            <p-i name="ic_folder"
+                 width="1rem"
+                 height="1rem"
+                 :color="gray[600]"
+            />
+            <span class="folder-name">{{ state.folderName }}</span>
+        </div>
+        <p-heading-layout class="detail-heading-layout">
+            <template #heading>
+                <p-heading :title="dashboard?.name">
+                    <p-skeleton v-if="!dashboard?.name"
+                                width="20rem"
+                                height="1.5rem"
+                    />
+                    <template #title-right-extra>
+                        <p-badge v-if="state.showBadge"
+                                 :badge-type="state.badgeType"
+                                 :style-type="state.badgeStyleType"
+                                 class="mr-2"
+                        >
+                            <p-i v-if="state.isPrivate"
+                                 name="ic_lock-filled"
+                                 width="0.75rem"
+                                 height="0.75rem"
+                                 color="gray900"
+                                 class="mr-1"
+                            />
+                            {{ state.badgeText }}
+                        </p-badge>
+                        <p-select-dropdown class="dashboard-setting-dropdown"
+                                           style-type="tertiary-icon-button"
+                                           button-icon="ic_ellipsis-horizontal"
+                                           size="sm"
+                                           :menu="controlMenuItems"
+                                           :selected="[]"
+                                           use-fixed-menu-style
+                                           reset-selection-on-menu-close
+                                           @select="handleSelectItem"
+                        />
+                        <dashboard-labels-button class="label-button"
+                                                 :dashboard-id="props.dashboardId"
+                        />
+                    </template>
+                </p-heading>
+            </template>
+            <template v-if="dashboard?.version !== '1.0'"
+                      #extra
+            >
+                <dashboard-control-buttons v-if="dashboardManageable"
+                                           :dashboard-id="props.dashboardId"
+                                           :name="dashboard?.name"
+                />
+            </template>
+        </p-heading-layout>
+    </div>
+</template>
+
+<style lang="postcss" scoped>
+.dashboard-detail-header {
+    &.project-dashboard {
+        padding: 2rem 1.5rem 0;
+        .detail-heading-layout {
+            @apply mb-0;
+        }
+    }
+    margin-bottom: 0.75rem;
+
+    .detail-heading-layout {
+        @apply mb-6;
+    }
+    .folder-name-wrapper {
+        display: flex;
+        align-items: center;
+        .folder-name {
+            @apply text-paragraph-sm text-gray-600;
+            margin-left: 0.125rem;
+        }
+    }
+    .template-name {
+        @apply text-paragraph-sm text-gray-500;
+        margin-left: 2.5rem;
+    }
+    .label-button {
+        display: inline-flex;
+        margin-left: 0.5rem;
+    }
+}
+.select-card-wrapper {
+    @apply grid grid-cols-12;
+    gap: 0.5rem;
+    .p-select-card {
+        @apply col-span-6;
+    }
+}
+</style>
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardVariablesV2.vue
similarity index 59%
rename from apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardVariablesV2.vue
index 18877eb198..215622031a 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardVariablesV2.vue
@@ -1,5 +1,7 @@
 <script lang="ts" setup>
-import { computed, reactive, watch } from 'vue';
+import {
+    computed, reactive, watch, onUnmounted,
+} from 'vue';
 import { useRoute } from 'vue-router/composables';
 
 import { isEqual } from 'lodash';
@@ -7,31 +9,38 @@ import { isEqual } from 'lodash';
 import { PI, PTextButton, PDivider } from '@cloudforet/mirinae';
 
 import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
-import type { DashboardGlobalVariableSchemaProperties, DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
+import type {
+    DashboardFolderModel, DashboardGlobalVariableSchemaProperties, DashboardModel, DashboardVars,
+} from '@/api-clients/dashboard/_types/dashboard-type';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 
 import ChangedMark from '@/common/components/marks/ChangedMark.vue';
 
+import { useDashboardManageable } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-manageable';
+import { useDashboardSharedContext } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context';
 import DashboardGlobalVariableFilter
-    from '@/services/dashboards/components/dashboard-detail/DashboardGlobalVariableFilter.vue';
-import DashboardManageVariableOverlay from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableOverlay.vue';
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardGlobalVariableFilter.vue';
+import DashboardManageVariableImportModal
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariableImportModal.vue';
+import DashboardManageVariableOverlay
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariableOverlay.vue';
 import DashboardVariablesMoreButton
-    from '@/services/dashboards/components/dashboard-detail/DashboardVariablesMoreButton.vue';
-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';
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardVariablesMoreButton.vue';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { MANAGE_VARIABLES_HASH_NAME } from '@/services/_shared/dashboard/dashboard-detail/constants/manage-variable-overlay-constant';
+import { getOrderedGlobalVariables } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
+import { useDashboardVarsStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-vars-store';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
-
-
 
 interface Props {
-    isProjectDashboard?: boolean;
     loading?: boolean;
     disableSaveButton?: boolean;
     originVars?: DashboardVars;
     widgetMode?: boolean; // NOTE: this for widget mode (temporary)
+    dashboardId: string;
+    dashboardItems?: Array<DashboardModel>;
+    folderItems?: Array<DashboardFolderModel>;
 }
 
 const props = defineProps<Props>();
@@ -39,28 +48,32 @@ const emit = defineEmits<{(e: 'update', val: { vars?: DashboardVars }): void;
 }>();
 
 const route = useRoute();
-const dashboardId = computed(() => route.params.dashboardId);
+const dashboardId = computed(() => props.dashboardId);
 
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailState = dashboardDetailStore.state;
+const dashboardVarsStore = useDashboardVarsStore();
+const dashboardVarsState = dashboardVarsStore.state;
 const allReferenceTypeInfoStore = useAllReferenceTypeInfoStore();
-const appContextStore = useAppContextStore();
 const { dashboard } = useDashboardGetQuery({
     dashboardId,
 });
-const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-});
+
+const {
+    entryPoint,
+} = useDashboardSharedContext();
+
+const { getDashboardManageable } = useDashboardManageable();
+
 const state = reactive({
     showOverlay: computed(() => route.hash === `#${MANAGE_VARIABLES_HASH_NAME}`),
     dashboardVarsSchemaProperties: computed<DashboardGlobalVariableSchemaProperties>(() => dashboard.value?.vars_schema?.properties ?? {}),
     dashboardVars: computed<DashboardVars>(() => dashboard.value?.vars ?? {}),
-    tempVars: undefined as DashboardVars|undefined,
     globalVariables: computed<DashboardGlobalVariable[]>(() => {
         const properties = state.dashboardVarsSchemaProperties as Record<string, DashboardGlobalVariable>;
         const _usedProperties: DashboardGlobalVariable[] = Object.values(properties).filter((d) => d.use);
-        if (props.isProjectDashboard) {
-            const _usedPropertiesWithoutProject = getOrderedGlobalVariables(_usedProperties).filter((d) => d.key !== 'project_id');
+        if (entryPoint.value === 'PROJECT') {
+            const _usedPropertiesWithoutProject = getOrderedGlobalVariables(_usedProperties).filter((d) => d.key !== 'project_id' && d.key !== 'project_group_id');
             return getOrderedGlobalVariables(_usedPropertiesWithoutProject);
         }
         return getOrderedGlobalVariables(_usedProperties);
@@ -69,7 +82,7 @@ const state = reactive({
     modifiedVariablesSchemaProperties: computed<string[]>(() => {
         const results: string[] = [];
         state.globalVariables.forEach((_var) => {
-            if (!isEqual(state.dashboardVars?.[_var.key], state.tempVars?.[_var.key])) {
+            if (!isEqual(state.dashboardVars?.[_var.key], dashboardVarsState.vars?.[_var.key])) {
                 results.push(_var.key);
             }
         });
@@ -77,25 +90,24 @@ const state = reactive({
     }),
     showSaveButton: computed<boolean>(() => !props.disableSaveButton && state.modifiedVariablesSchemaProperties.length > 0),
     notChanged: computed(() => state.modifiedVariablesSchemaProperties.length === 0),
-    isSharedDashboard: computed<boolean>(() => !!dashboard.value?.shared && !storeState.isAdminMode),
 });
 
 const handleClickSaveButton = () => {
-    emit('update', { vars: state.tempVars });
+    emit('update', { vars: dashboardVarsState.vars });
 };
 const handleResetVariables = () => {
-    const _originVars = state.dashboardVars;
-    state.tempVars = { ..._originVars };
-    dashboardDetailStore.setVars(_originVars);
+    dashboardVarsStore.setVars(dashboard.value?.vars);
 };
 
 watch(() => dashboard.value?.vars, (_vars) => {
-    state.tempVars = { ..._vars };
-}, { immediate: true });
+    dashboardVarsStore.setVars(_vars);
+}, { immediate: true, deep: true });
+
+
+onUnmounted(() => {
+    dashboardVarsStore.reset();
+});
 
-watch([() => state.tempVars, dashboard], ([_tempVars]) => {
-    dashboardDetailStore.setVars(_tempVars);
-}, { deep: true });
 </script>
 
 <template>
@@ -104,9 +116,7 @@ watch([() => state.tempVars, dashboard], ([_tempVars]) => {
     >
         <template v-for="(property, idx) in state.globalVariables">
             <div :key="`${property.name}-${idx}`">
-                <dashboard-global-variable-filter :variable="property"
-                                                  :vars.sync="state.tempVars"
-                />
+                <dashboard-global-variable-filter :variable="property" />
                 <changed-mark v-if="state.modifiedVariablesSchemaProperties.includes(property.key)" />
             </div>
         </template>
@@ -133,11 +143,20 @@ watch([() => state.tempVars, dashboard], ([_tempVars]) => {
         >
             {{ $t('DASHBOARDS.CUSTOMIZE.SAVE') }}
         </p-text-button>
-        <dashboard-variables-more-button v-if="!state.isSharedDashboard"
+        <dashboard-variables-more-button v-if="getDashboardManageable(dashboard)"
                                          :widget-mode="props.widgetMode"
+                                         :dashboard-id="dashboardId"
         />
-        <portal to="dashboard-detail-page">
-            <dashboard-manage-variable-overlay :visible="state.showOverlay" />
+        <portal to="dashboard-manage-variable-overlay">
+            <dashboard-manage-variable-overlay :visible="state.showOverlay"
+                                               :dashboard-id="dashboardId"
+            />
+        </portal>
+        <portal to="dashboard-manage-variable-import-modal">
+            <dashboard-manage-variable-import-modal :dashboard-id="dashboardId"
+                                                    :dashboard-items="props.dashboardItems"
+                                                    :folder-items="props.folderItems"
+            />
         </portal>
     </div>
 </template>
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/contextual-composables/use-dashboard-refined-vars.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/contextual-composables/use-dashboard-refined-vars.ts
new file mode 100644
index 0000000000..48eb20c59b
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/contextual-composables/use-dashboard-refined-vars.ts
@@ -0,0 +1,51 @@
+import type { ComputedRef } from 'vue';
+import { computed } from 'vue';
+
+import { cloneDeep, isEmpty } from 'lodash';
+
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
+
+import WorkspaceVariableModel from '@/lib/variable-models/managed-model/resource-model/workspace-variable-model';
+
+import { useDashboardSharedContext } from '@/services/_shared/dashboard/core/composables/_internal/use-dashboard-shared-context';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
+import { useDashboardVarsStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-vars-store';
+
+export const useDashboardRefinedVars = (dashboardId: ComputedRef<string|undefined>) => {
+    const dashboardVarsStore = useDashboardVarsStore();
+    const dashboardVarsState = dashboardVarsStore.state;
+    const dashboardDetailStore = useDashboardDetailInfoStore();
+    const dashboardDetailState = dashboardDetailStore.state;
+
+    const { dashboard } = useDashboardGetQuery({
+        dashboardId,
+    });
+    const { projectContextType, projectGroupOrProjectId, isAdminMode } = useDashboardSharedContext();
+
+    const refinedVars = computed<DashboardVars>(() => {
+        let _vars: DashboardVars = cloneDeep(dashboard.value?.vars ?? {});
+        const tempVars: DashboardVars = cloneDeep(dashboardVarsState.vars ?? {});
+        if (!isEmpty(tempVars)) _vars = tempVars;
+        if (projectGroupOrProjectId.value) {
+            if (projectContextType.value === 'PROJECT') {
+                _vars.project_id = [projectGroupOrProjectId.value];
+            } else if (projectContextType.value === 'PROJECT_GROUP') {
+                _vars.project_group_id = [projectGroupOrProjectId.value];
+            }
+        }
+
+        const selectedWorkspaceId = dashboardDetailState.selectedWorkspaceId;
+        if (isAdminMode.value) {
+            if (selectedWorkspaceId && selectedWorkspaceId !== 'all') {
+                _vars[WorkspaceVariableModel.meta.idKey] = [selectedWorkspaceId];
+            } else {
+                delete _vars[WorkspaceVariableModel.meta.idKey];
+            }
+        } else {
+            delete _vars[WorkspaceVariableModel.meta.idKey];
+        }
+        return _vars;
+    });
+    return { refinedVars };
+};
diff --git a/apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.md b/apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/__tests__/widget-width-helper.md
similarity index 100%
rename from apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.md
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/__tests__/widget-width-helper.md
diff --git a/apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.test.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/__tests__/widget-width-helper.test.ts
similarity index 95%
rename from apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.test.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/__tests__/widget-width-helper.test.ts
index 10d587673e..84db9f26c7 100644
--- a/apps/web/src/services/dashboards/helpers/__tests__/widget-width-helper.test.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/__tests__/widget-width-helper.test.ts
@@ -5,8 +5,8 @@ import type { WidgetSize } from '@/api-clients/dashboard/_types/widget-type';
 import {
     WIDGET_CONTAINER_MAX_WIDTH,
     WIDGET_CONTAINER_MIN_WIDTH,
-} from '@/services/dashboards/constants/widget-container-config';
-import { widgetWidthAssigner } from '@/services/dashboards/helpers/widget-width-helper';
+} from '@/services/_shared/dashboard/dashboard-detail/constants/widget-container-config';
+import { widgetWidthAssigner } from '@/services/_shared/dashboard/dashboard-detail/helpers/widget-width-helper';
 
 
 /**
diff --git a/apps/web/src/services/dashboards/helpers/dashboard-global-variables-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper.ts
similarity index 82%
rename from apps/web/src/services/dashboards/helpers/dashboard-global-variables-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper.ts
index d0464b125a..f97cec240a 100644
--- a/apps/web/src/services/dashboards/helpers/dashboard-global-variables-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper.ts
@@ -2,7 +2,7 @@ import { orderBy } from 'lodash';
 
 import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
 
-import { DASHBOARD_VARS_SCHEMA_PRESET } from '@/services/dashboards/constants/dashboard-vars-schema-preset';
+import { DASHBOARD_VARS_SCHEMA_PRESET } from '@/services/_shared/dashboard/dashboard-detail/constants/dashboard-vars-schema-preset';
 
 export const getOrderedGlobalVariables = (variables: DashboardGlobalVariable[]): DashboardGlobalVariable[] => {
     const _presetKeys: string[] = Object.keys(DASHBOARD_VARS_SCHEMA_PRESET.properties);
diff --git a/apps/web/src/services/dashboards/helpers/dashboard-widget-info-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/dashboard-widget-info-helper.ts
similarity index 89%
rename from apps/web/src/services/dashboards/helpers/dashboard-widget-info-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/dashboard-widget-info-helper.ts
index a3a89fb5f3..3e4eb3378c 100644
--- a/apps/web/src/services/dashboards/helpers/dashboard-widget-info-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/dashboard-widget-info-helper.ts
@@ -11,9 +11,9 @@ import type {
 
 import getRandomId from '@/lib/random-id-generator';
 
-import { getInheritingOptionKeys } from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
-import { getWidgetOptionKeyByVariableKey } from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
-import type { UpdatableWidgetInfo } from '@/services/dashboards/widgets/_types/widget-type';
+import { getInheritingOptionKeys } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper';
+import { getWidgetOptionKeyByVariableKey } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
+import type { UpdatableWidgetInfo } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 /**
  * @description get updated widget info. if the property is not changed, it will be declared as undefined.
diff --git a/apps/web/src/services/dashboards/helpers/widget-theme-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/widget-theme-helper.ts
similarity index 84%
rename from apps/web/src/services/dashboards/helpers/widget-theme-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/widget-theme-helper.ts
index f842fa52e9..868dcf95eb 100644
--- a/apps/web/src/services/dashboards/helpers/widget-theme-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/widget-theme-helper.ts
@@ -1,5 +1,5 @@
-import type { WidgetThemeOption, WidgetThemeAssignedList } from '@/services/dashboards/constants/widget-container-config';
-import { WIDGET_THEMES } from '@/services/dashboards/widgets/_types/widget-type';
+import type { WidgetThemeOption, WidgetThemeAssignedList } from '@/services/_shared/dashboard/dashboard-detail/constants/widget-container-config';
+import { WIDGET_THEMES } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 const WIDGET_THEME_LEN = WIDGET_THEMES.length;
 
diff --git a/apps/web/src/services/dashboards/helpers/widget-width-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/widget-width-helper.ts
similarity index 96%
rename from apps/web/src/services/dashboards/helpers/widget-width-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/widget-width-helper.ts
index 5a2e6a3bf3..a6ec224dc4 100644
--- a/apps/web/src/services/dashboards/helpers/widget-width-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/helpers/widget-width-helper.ts
@@ -7,7 +7,7 @@ import {
     WIDGET_WIDTH_RANGE_LIST,
     WIDGET_GAP,
     WIDGET_WIDTH_CRITERIA,
-} from '@/services/dashboards/constants/widget-container-config';
+} from '@/services/_shared/dashboard/dashboard-detail/constants/widget-container-config';
 
 
 const isEveryWidthMax = (sizeRow: string[], widthRow: number[]): boolean => sizeRow.every((size, idx) => {
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardManageVariableForm.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardManageVariableForm.vue
similarity index 97%
rename from apps/web/src/services/dashboards/components/legacy/DashboardManageVariableForm.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardManageVariableForm.vue
index acd9bc3b1b..377bb8250a 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardManageVariableForm.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardManageVariableForm.vue
@@ -15,11 +15,11 @@ import getRandomId from '@/lib/random-id-generator';
 import { useFormValidator } from '@/common/composables/form-validator';
 
 import DashboardManageVariableOptionsField
-    from '@/services/dashboards/components/legacy/DashboardManageVariableOptionsField.vue';
+    from '@/services/_shared/dashboard/dashboard-detail/legacy/DashboardManageVariableOptionsField.vue';
 import type {
     ManageVariableFormOption,
     ManageVariableOverlayStatus,
-} from '@/services/dashboards/types/manage-variable-type';
+} from '@/services/_shared/dashboard/dashboard-detail/types/manage-variable-type';
 
 const CLONE_PREFIX = 'Copy - ';
 
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardManageVariableOptionsField.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardManageVariableOptionsField.vue
similarity index 100%
rename from apps/web/src/services/dashboards/components/legacy/DashboardManageVariableOptionsField.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardManageVariableOptionsField.vue
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardVariableDropdown.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardVariableDropdown.vue
similarity index 98%
rename from apps/web/src/services/dashboards/components/legacy/DashboardVariableDropdown.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardVariableDropdown.vue
index e9d6446a08..0f365f0863 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardVariableDropdown.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardVariableDropdown.vue
@@ -27,8 +27,8 @@ import { getVariableModelMenuHandler } from '@/lib/variable-models/variable-mode
 
 import WorkspaceLogoIcon from '@/common/modules/navigations/top-bar/modules/top-bar-header/WorkspaceLogoIcon.vue';
 
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
 import { getWorkspaceInfo } from '@/services/advanced/composables/refined-table-data';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
 interface Props {
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardVariables.vue
similarity index 93%
rename from apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardVariables.vue
index 77f082a337..f430aeb83a 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardVariables.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardVariables.vue
@@ -10,10 +10,10 @@ 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 { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import DashboardVariableDropdown from '@/services/_shared/dashboard/dashboard-detail/legacy/DashboardVariableDropdown.vue';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 
 
 interface Props {
diff --git a/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardWidgetContainer.vue
similarity index 88%
rename from apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardWidgetContainer.vue
index ce66b7c0f2..e140f27c97 100644
--- a/apps/web/src/services/dashboards/components/legacy/DashboardWidgetContainer.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/DashboardWidgetContainer.vue
@@ -11,25 +11,20 @@ import { PDataLoader } from '@cloudforet/mirinae';
 
 import type { DashboardLayoutWidgetInfo } from '@/api-clients/dashboard/_types/dashboard-type';
 
-import WidgetFullModeModal from '@/services/dashboards/components/legacy/WidgetFullModeModal.vue';
-import {
-    useDashboardContainerWidth,
-} from '@/services/dashboards/composables/use-dashboard-container-width';
-import { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
-import type { ReformedWidgetInfo } from '@/services/dashboards/composables/use-reformed-widget-info-list';
-import {
-    useReformedWidgetInfoList,
-} from '@/services/dashboards/composables/use-reformed-widget-info-list';
-import { getDashboardWidgetInfoList } from '@/services/dashboards/helpers/dashboard-widget-info-helper';
+import { useDashboardContainerWidth } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-container-width';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import type { ReformedWidgetInfo } from '@/services/_shared/dashboard/dashboard-detail/composables/use-reformed-widget-info-list';
+import { useReformedWidgetInfoList } from '@/services/_shared/dashboard/dashboard-detail/composables/use-reformed-widget-info-list';
+import { getDashboardWidgetInfoList } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-widget-info-helper';
+import type { WidgetFrameProps } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import type { WidgetExpose } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
-import type {
-    WidgetExpose, WidgetProps,
-} from '@/services/dashboards/widgets/_types/widget-type';
 
 
-type WidgetComponent = ComponentPublicInstance<WidgetProps, WidgetExpose>;
+
+type WidgetComponent = ComponentPublicInstance<WidgetFrameProps, WidgetExpose>;
 
 const dashboardDetailStore = useDashboardDetailInfoStore();
 const dashboardDetailGetters = dashboardDetailStore.getters;
diff --git a/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/WidgetFullModeModal.vue
similarity index 90%
rename from apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/WidgetFullModeModal.vue
index 1bf3347ee2..d54a4981e2 100644
--- a/apps/web/src/services/dashboards/components/legacy/WidgetFullModeModal.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/WidgetFullModeModal.vue
@@ -21,18 +21,18 @@ import type { WidgetSize } from '@/api-clients/dashboard/_types/widget-type';
 
 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 { 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';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
-import { useWidgetFormStore } from '@/services/dashboards/stores/widget-form-store';
-import { getWidgetComponent } from '@/services/dashboards/widgets/_helpers/widget-component-helper';
+import DashboardToolsetDateDropdown from '@/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetDateDropdown.vue';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { getDashboardWidgetInfoList } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-widget-info-helper';
+import DashboardVariables from '@/services/_shared/dashboard/dashboard-detail/legacy/DashboardVariables.vue';
+import { getWidgetComponent } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-component-helper';
 import type {
     WidgetExpose, WidgetProps, WidgetTheme,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
+import { useWidgetFormStore } from '@/services/_shared/dashboard/dashboard-detail/stores/widget-form-store';
+import { useAllReferenceTypeInfoStore } from '@/services/dashboards/stores/all-reference-type-info-store';
+import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 
 
 interface WidgetFullModeModalProps {
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
index 0efb27f99f..7cbbc25ae4 100644
--- a/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue
@@ -22,17 +22,17 @@ import { useAmcharts5 } from '@/common/composables/amcharts5';
 import { setXYSharedTooltipTextWithRate } from '@/common/composables/amcharts5/xy-chart-helper';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetChartNoDataOverlay from '@/services/dashboards/widgets/_components/WidgetChartNoDataOverlay.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { COMPLIANCE_STATUS_MAP } from '@/services/dashboards/widgets/_constants/compliance-constant';
+import WidgetChartNoDataOverlay from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetChartNoDataOverlay.vue';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { COMPLIANCE_STATUS_MAP } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/compliance-constant';
 import type {
     WidgetEmit, WidgetExpose, WidgetProps, Legend,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 import countOfPassAndFailFindingsWidgetConfig
-    from '@/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config';
+    from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config';
 
 
 interface Data {
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/widget-config.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_base-widgets/base-count-of-findings/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/widget-config.ts
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/BasePieWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-pie/BasePieWidget.vue
similarity index 85%
rename from apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/BasePieWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-pie/BasePieWidget.vue
index be8fca16f8..f9aceffbe2 100644
--- a/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/BasePieWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-pie/BasePieWidget.vue
@@ -22,23 +22,23 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { gray } from '@/styles/colors';
 
-import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getRefinedPieChartData } from '@/services/dashboards/widgets/_helpers/widget-chart-data-helper';
+import WidgetDataTable from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getRefinedPieChartData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper';
 import {
     getPieChartLegends,
-} from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import { getWidgetDataTableRowLocation } from '@/services/dashboards/widgets/_helpers/widget-location-helper';
-import { getReferenceTypeOfDataField } from '@/services/dashboards/widgets/_helpers/widget-table-helper';
-import type { Field, WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import { getWidgetDataTableRowLocation } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-location-helper';
+import { getReferenceTypeOfDataField } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-table-helper';
+import type { Field, WidgetTableData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetExpose, WidgetProps, WidgetEmit, Legend, CostAnalyzeResponse,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { ReferenceType } from '@/services/_shared/dashboard/dashboard-detail/stores/all-reference-type-info-store';
 
 
 interface SubData {
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-pie/widget-config.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_base-widgets/base-pie/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-pie/widget-config.ts
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/BaseTrendWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
index b503e4e5a5..12479cff5b 100644
--- a/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-trend/BaseTrendWidget.vue
@@ -32,33 +32,33 @@ import { useAmcharts5 } from '@/common/composables/amcharts5';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProperRouteLocation } from '@/common/composables/proper-route-location';
 
-import { DYNAMIC_COST_QUERY_SET_PARAMS } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getRefinedXYChartData } from '@/services/dashboards/widgets/_helpers/widget-chart-data-helper';
+import WidgetDataTable from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getRefinedXYChartData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper';
 import {
     getDateAxisSettings,
     getXYChartLegends,
-} from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
 import {
     getWidgetDataTableRowLocation,
     getWidgetLocationFilters,
-} from '@/services/dashboards/widgets/_helpers/widget-location-helper';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-location-helper';
 import {
     getRefinedDateTableData, getWidgetTableDateFields,
-} from '@/services/dashboards/widgets/_helpers/widget-table-helper';
-import { getWidgetValueLabel } from '@/services/dashboards/widgets/_helpers/widget-value-label-helper';
-import type { Field, WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-table-helper';
+import { getWidgetValueLabel } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper';
+import type { Field, WidgetTableData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetExpose, WidgetProps,
     WidgetEmit,
     CostAnalyzeResponse, Legend,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
+import { DYNAMIC_COST_QUERY_SET_PARAMS } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
+import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
 
 
 interface SubData { date: string; value: number }
diff --git a/apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-trend/widget-config.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_base-widgets/base-trend/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-trend/widget-config.ts
diff --git a/apps/web/src/services/dashboards/widgets/_components/WidgetChartNoDataOverlay.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetChartNoDataOverlay.vue
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_components/WidgetChartNoDataOverlay.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetChartNoDataOverlay.vue
diff --git a/apps/web/src/services/dashboards/widgets/_components/WidgetDataTable.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue
similarity index 98%
rename from apps/web/src/services/dashboards/widgets/_components/WidgetDataTable.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue
index b34f409e5e..2c7e285eb1 100644
--- a/apps/web/src/services/dashboards/widgets/_components/WidgetDataTable.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue
@@ -24,11 +24,11 @@ import { useTextOverflowState } from '@/common/composables/text-overflow-state';
 import { gray } from '@/styles/colors';
 import { MASSIVE_CHART_COLORS, DISABLED_LEGEND_COLOR } from '@/styles/colorsets';
 
-import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import type {
     Field, WidgetTableData,
-} from '@/services/dashboards/widgets/_types/widget-data-table-type';
-import type { Legend } from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
+import type { Legend } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { AllReferenceTypeInfo } from '@/services/_shared/dashboard/dashboard-detail/stores/all-reference-type-info-store';
 
 type TableSize = 'sm' | 'md';
 
diff --git a/apps/web/src/services/dashboards/widgets/_components/WidgetFrame.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue
similarity index 99%
rename from apps/web/src/services/dashboards/widgets/_components/WidgetFrame.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue
index 4fb9a9ff1d..cc16b98745 100644
--- a/apps/web/src/services/dashboards/widgets/_components/WidgetFrame.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue
@@ -26,7 +26,7 @@ import { useI18nDayjs } from '@/common/composables/i18n-dayjs';
 
 import { red } from '@/styles/colors';
 
-import type { WidgetTheme } from '@/services/dashboards/widgets/_types/widget-type';
+import type { WidgetTheme } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 export interface WidgetFrameProps {
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget-color-set.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-color-set.ts
similarity index 88%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget-color-set.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-color-set.ts
index 059ae02a65..79de19a0ba 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget-color-set.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-color-set.ts
@@ -3,8 +3,8 @@ import { computed, reactive } from 'vue';
 
 import { palette } from '@/styles/colors';
 
-import type { WidgetColorSetType, WidgetTheme } from '@/services/dashboards/widgets/_types/widget-type';
-import { WIDGET_THEMES } from '@/services/dashboards/widgets/_types/widget-type';
+import type { WidgetColorSetType, WidgetTheme } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
+import { WIDGET_THEMES } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 const getColorSet = (theme: WidgetTheme, colorSetType: WidgetColorSetType = 'basic'): string[] => {
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget-lifecycle.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle.ts
similarity index 94%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget-lifecycle.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle.ts
index c42d1335ae..e5d3055da3 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget-lifecycle.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle.ts
@@ -19,13 +19,13 @@ import type { Currency } from '@/store/display/type';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import type { WidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
+import type { WidgetState } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
 import {
     validateWidgetByVariablesSchemaUpdate,
-} from '@/services/dashboards/widgets/_helpers/widget-validation-helper';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-validation-helper';
 import type {
     WidgetProps, WidgetEmit,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface UseWidgetLifecycleOptions<Data> {
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget-pagination.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-pagination.ts
similarity index 74%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget-pagination.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-pagination.ts
index 99aa78ccfa..c031dfcfac 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget-pagination.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-pagination.ts
@@ -1,7 +1,7 @@
 import type { UnwrapRef } from 'vue';
 import { computed, ref } from 'vue';
 
-import type { MergedBaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state';
+import type { MergedBaseWidgetState } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state';
 
 export const useWidgetPagination = (mergedState: UnwrapRef<MergedBaseWidgetState>) => {
     const thisPage = ref(1);
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state.ts
similarity index 87%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state.ts
index d1ed9ca7ba..b311e9d7d0 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state.ts
@@ -10,15 +10,15 @@ import type {
 } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { InheritOptions, WidgetConfig, WidgetOptions } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetConfig } from '@/services/dashboards/widgets/_helpers/widget-config-helper';
-import { getInitialWidgetInheritOptions } from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
+import { getWidgetConfig } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-config-helper';
+import { getInitialWidgetInheritOptions } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper';
 import {
     getRefinedWidgetOptions,
-} from '@/services/dashboards/widgets/_helpers/widget-options-helper';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-helper';
 import {
     getInitialSchemaProperties, getRefinedSchemaProperties,
-} from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
-import { getWidgetInheritOptionsErrorMap } from '@/services/dashboards/widgets/_helpers/widget-validation-helper';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
+import { getWidgetInheritOptionsErrorMap } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-validation-helper';
 
 
 export interface MergedBaseWidgetState {
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-base-widget-state.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state.ts
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/use-base-widget-state.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state.ts
index aea1a05272..fb00c0a436 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-base-widget-state.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state.ts
@@ -10,13 +10,13 @@ import type {
 import { CURRENCY } from '@/store/display/constant';
 import type { Currency } from '@/store/display/type';
 
-import type { MergedBaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state';
+import type { MergedBaseWidgetState } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state';
 import {
     mergeBaseWidgetState,
-} from '@/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state';
 import type {
     WidgetProps,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 /**
  * @description It returns states which is among the data generated by widget info and widget config through combination,
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-console-filters.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-console-filters.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-console-filters.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-console-filters.ts
index 51ada452c9..7872022b72 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-console-filters.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-console-filters.ts
@@ -8,9 +8,9 @@ import type { ConsoleFilter } from '@cloudforet/core-lib/query/type';
 
 import type { WidgetFiltersMap } from '@/api-clients/dashboard/_types/widget-type';
 
-import type { BaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-base-widget-state';
-import type { OverridableWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import type { WidgetProps } from '@/services/dashboards/widgets/_types/widget-type';
+import type { BaseWidgetState } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state';
+import type { OverridableWidgetState } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import type { WidgetProps } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 export const useWidgetConsoleFilters = (props: WidgetProps, widgetState: UnwrapRef<BaseWidgetState>, overrides: OverridableWidgetState = {}): ComputedRef<ConsoleFilter[]> => {
     const queryHelper = new QueryHelper();
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-date-range.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-date-range.ts
similarity index 71%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-date-range.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-date-range.ts
index bfbf55324a..3079de6aed 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-date-range.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-date-range.ts
@@ -7,9 +7,9 @@ import dayjs from 'dayjs';
 import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
-import type { BaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-base-widget-state';
-import type { OverridableWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import type { WidgetProps } from '@/services/dashboards/widgets/_types/widget-type';
+import type { BaseWidgetState } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state';
+import type { OverridableWidgetState } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import type { WidgetProps } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 export const useWidgetDateRange = (props: WidgetProps, widgetState: UnwrapRef<BaseWidgetState>, overrides: OverridableWidgetState = {}): ComputedRef<DateRange> => {
     if (isRef(overrides.dateRange)) return overrides.dateRange;
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-frame.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-frame.ts
similarity index 86%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-frame.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-frame.ts
index ce84abae61..2b8376a45a 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-frame.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-frame.ts
@@ -10,10 +10,10 @@ import type { Currency } from '@/store/display/type';
 
 // eslint-disable-next-line @typescript-eslint/ban-ts-comment
 // @ts-ignore
-import type { WidgetFrameProps } from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import type { WidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getNonInheritedWidgetOptionNamesAmongUsedVariables } from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
-import type { WidgetEmit, WidgetProps } from '@/services/dashboards/widgets/_types/widget-type';
+import type { WidgetFrameProps } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import type { WidgetState } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getNonInheritedWidgetOptionNamesAmongUsedVariables } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
+import type { WidgetEmit, WidgetProps } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 export interface WidgetFrameOptions {
     dateRange?: DateRange|ComputedRef<DateRange>;
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-location.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-location.ts
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-location.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-location.ts
index 20b7b9d67b..90ecc3fb39 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget-location.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-location.ts
@@ -13,16 +13,16 @@ import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { arrayToQueryString, objectToQueryString, primitiveToQueryString } from '@/lib/router-query-string';
 
 
+import type { BaseWidgetState } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state';
+import type { OverridableWidgetState } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getWidgetLocationFilters } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-location-helper';
+import type { WidgetProps } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 import { ADMIN_ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/admin/route-constant';
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import type { CloudServiceDetailPageUrlQuery } from '@/services/asset-inventory/types/cloud-service-page-type';
 import { DYNAMIC_COST_QUERY_SET_PARAMS } from '@/services/cost-explorer/constants/managed-cost-analysis-query-sets';
 import { ADMIN_COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/admin/route-constant';
 import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-import type { BaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-base-widget-state';
-import type { OverridableWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getWidgetLocationFilters } from '@/services/dashboards/widgets/_helpers/widget-location-helper';
-import type { WidgetProps } from '@/services/dashboards/widgets/_types/widget-type';
 
 
 export const useWidgetLocation = (props: WidgetProps, baseState: UnwrapRef<BaseWidgetState>, dateRange: ComputedRef<DateRange>, overrides: OverridableWidgetState = {}) => {
diff --git a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget.ts
similarity index 76%
rename from apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget.ts
index 1f054f6266..5357099eb5 100644
--- a/apps/web/src/services/dashboards/widgets/_composables/use-widget/use-widget.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget.ts
@@ -14,13 +14,13 @@ import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import type {
     BaseWidgetState,
-} from '@/services/dashboards/widgets/_composables/use-widget/use-base-widget-state';
-import { useBaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/use-base-widget-state';
-import { useWidgetConsoleFilters } from '@/services/dashboards/widgets/_composables/use-widget/use-widget-console-filters';
-import { useWidgetDateRange } from '@/services/dashboards/widgets/_composables/use-widget/use-widget-date-range';
-import { useWidgetFrame } from '@/services/dashboards/widgets/_composables/use-widget/use-widget-frame';
-import { useWidgetLocation } from '@/services/dashboards/widgets/_composables/use-widget/use-widget-location';
-import type { WidgetEmit, WidgetProps } from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state';
+import { useBaseWidgetState } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-base-widget-state';
+import { useWidgetConsoleFilters } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-console-filters';
+import { useWidgetDateRange } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-date-range';
+import { useWidgetFrame } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-frame';
+import { useWidgetLocation } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget-location';
+import type { WidgetEmit, WidgetProps } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 export interface OverridableWidgetState {
     dateRange?: DateRange|ComputedRef<DateRange>; // overrides dateRange
diff --git a/apps/web/src/services/dashboards/widgets/_constants/compliance-constant.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/compliance-constant.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_constants/compliance-constant.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/compliance-constant.ts
diff --git a/apps/web/src/services/dashboards/widgets/_constants/managed-widget-options-schema.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/managed-widget-options-schema.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_constants/managed-widget-options-schema.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/managed-widget-options-schema.ts
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/widget-components-constant.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/widget-components-constant.ts
new file mode 100644
index 0000000000..3ac9252563
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/widget-components-constant.ts
@@ -0,0 +1,63 @@
+import type { AsyncComponent } from 'vue';
+
+import type { BaseWidgetConfigKey, WidgetConfigKey } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-list-type';
+
+const BASE_WIDGET_COMPONENTS: Record<BaseWidgetConfigKey, AsyncComponent> = {
+    baseTrend: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-trend/BaseTrendWidget.vue'),
+    }),
+    basePie: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-pie/BasePieWidget.vue'),
+    }),
+    baseCountOfFindings: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue'),
+    }),
+};
+
+export const WIDGET_COMPONENTS: Record<WidgetConfigKey, AsyncComponent> = {
+    monthlyCost: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue'),
+    }),
+    budgetUsageSummary: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue'),
+    }),
+    costMap: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/CostMapWidget.vue'),
+    }),
+    costTrend: BASE_WIDGET_COMPONENTS.baseTrend,
+    costTrendStacked: BASE_WIDGET_COMPONENTS.baseTrend,
+    costSummaryMultiFields: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue'),
+    }),
+    costPie: BASE_WIDGET_COMPONENTS.basePie,
+    costDonut: BASE_WIDGET_COMPONENTS.basePie,
+    costByRegion: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue'),
+    }),
+    costByRegionMultiFields: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue'),
+    }),
+    budgetStatus: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue'),
+    }),
+    budgetUsageByTarget: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue'),
+    }),
+    severityStatusByService: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue'),
+    }),
+    countOfFailFindings: BASE_WIDGET_COMPONENTS.baseCountOfFindings,
+    countOfPassAndFailFindings: BASE_WIDGET_COMPONENTS.baseCountOfFindings,
+    trendOfPassAndFailFindings: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue'),
+    }),
+    totalFailFindingsStatus: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue'),
+    }),
+    totalFailFindingsHistory: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue'),
+    }),
+    complianceStatus: () => ({
+        component: import('@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue'),
+    }),
+};
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/widget-config-list-constant.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/widget-config-list-constant.ts
new file mode 100644
index 0000000000..36a1ff81b0
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/widget-config-list-constant.ts
@@ -0,0 +1,87 @@
+/* eslint-disable import/order */
+// base widgets
+import baseCountOfFindings from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-count-of-findings/widget-config';
+import basePie from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-pie/widget-config';
+import baseTrend from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_base-widgets/base-trend/widget-config';
+
+// console widgets
+import complianceStatus from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/widget-config';
+import countOfFailFindings from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/count-of-fail-findings/widget-config';
+import countOfPassAndFailFindings from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config';
+import severityStatusByService from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/widget-config';
+import totalFailFindingsHistory from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/widget-config';
+import totalFailFindingsStatus from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/widget-config';
+import trendOfPassAndFailFindings from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config';
+import budgetStatus from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-status/widget-config';
+import budgetUsageByTarget from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/widget-config';
+import budgetUsageSummary from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/widget-config';
+import costByRegionMultiFields from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/widget-config';
+import costByRegion from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/widget-config';
+import costDonut from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-donut/widget-config';
+import costMap from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/widget-config';
+import costPie from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-pie/widget-config';
+import costSummaryMultiFields from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/widget-config';
+import costTrendStacked from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-trend-stacked/widget-config';
+import costTrend from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-trend/widget-config';
+import monthlyCost from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/widget-config';
+
+import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
+import type { BaseWidgetConfigKey, WidgetConfigKey } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-list-type';
+
+export const BASE_WIDGET_CONFIG_KEYS = [
+    'baseTrend',
+    'basePie',
+    'baseCountOfFindings',
+] as const;
+export const CONSOLE_WIDGET_CONFIG_KEYS = [
+    'monthlyCost',
+    'budgetUsageSummary',
+    'costMap',
+    'costTrend',
+    'costTrendStacked',
+    'costSummaryMultiFields',
+    'costPie',
+    'costDonut',
+    'costByRegion',
+    'costByRegionMultiFields',
+    'budgetStatus',
+    'budgetUsageByTarget',
+    'severityStatusByService',
+    'countOfFailFindings',
+    'countOfPassAndFailFindings',
+    'trendOfPassAndFailFindings',
+    'totalFailFindingsStatus',
+    'totalFailFindingsHistory',
+    'complianceStatus',
+] as const;
+
+
+export const CONSOLE_WIDGET_CONFIGS: Record<WidgetConfigKey, Partial<WidgetConfig>> = {
+    // Cost Widgets
+    monthlyCost,
+    budgetUsageSummary,
+    costMap,
+    costTrend,
+    costTrendStacked,
+    costSummaryMultiFields,
+    costPie,
+    costDonut,
+    costByRegion,
+    costByRegionMultiFields,
+    budgetStatus,
+    budgetUsageByTarget,
+    // Asset Widgets
+    severityStatusByService,
+    countOfFailFindings,
+    countOfPassAndFailFindings,
+    trendOfPassAndFailFindings,
+    totalFailFindingsStatus,
+    totalFailFindingsHistory,
+    complianceStatus,
+};
+
+export const BASE_WIDGET_CONFIGS: Record<BaseWidgetConfigKey, Partial<WidgetConfig>> = {
+    baseTrend,
+    basePie,
+    baseCountOfFindings,
+};
diff --git a/apps/web/src/services/dashboards/widgets/_constants/widget-constant.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/widget-constant.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_constants/widget-constant.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/widget-constant.ts
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
similarity index 97%
rename from apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
index 9619e60bc5..51fa69001f 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-chart-data-helper.test.ts
@@ -1,7 +1,7 @@
 import { range } from 'lodash';
 import { describe, it, expect } from 'vitest';
 
-import { getRefinedXYChartData } from '@/services/dashboards/widgets/_helpers/widget-chart-data-helper';
+import { getRefinedXYChartData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper';
 
 interface SubData {
     date: string;
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-config-helper.test.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-config-helper.test.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-config-helper.test.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-config-helper.test.ts
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
similarity index 99%
rename from apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
index b7f20f2a23..7d33b784d3 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-inherit-options-helper.test.ts
@@ -7,7 +7,7 @@ import type { InheritOptions, WidgetConfig, WidgetOptionsSchema } from '@/api-cl
 import {
     getInheritingOptionKeys,
     getInitialWidgetInheritOptions,
-} from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper';
 
 
 
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
similarity index 93%
rename from apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
index 61d4f9a8a7..268f259ed6 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-options-filters-helper.test.ts
@@ -1,6 +1,6 @@
 import type { WidgetFilterKey, WidgetFiltersMap } from '@/api-clients/dashboard/_types/widget-type';
 
-import { setFilterAndGetWidgetFiltersMap } from '@/services/dashboards/widgets/_helpers/widget-options-filters-helper';
+import { setFilterAndGetWidgetFiltersMap } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-filters-helper';
 
 
 describe('[Widget Options Filters Helper] setFilterAndGetWidgetFiltersMap', () => {
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-schema-helper.test.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-schema-helper.test.ts
similarity index 99%
rename from apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-schema-helper.test.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-schema-helper.test.ts
index 611ed71954..3ae48a18fc 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-schema-helper.test.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-schema-helper.test.ts
@@ -6,7 +6,7 @@ import type { InheritOptions, WidgetConfig, WidgetOptions } from '@/api-clients/
 import {
     getInitialSchemaProperties, getNonInheritedWidgetOptionNamesAmongUsedVariables,
     getRefinedSchemaProperties, getWidgetOptionKeyByVariableKey,
-} from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
 
 const DEFAULT_WIDGET_CONFIG = {
     widget_config_id: 'test',
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-value-label-helper.test.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
similarity index 96%
rename from apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
index 2f2235dbac..75a8942bab 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/__tests__/widget-value-label-helper.test.ts
@@ -1,7 +1,7 @@
 import { describe } from 'vitest';
 
+import { getWidgetValueLabel } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
-import { getWidgetValueLabel } from '@/services/dashboards/widgets/_helpers/widget-value-label-helper';
 
 const mockAllReferenceTypeInfo: AllReferenceTypeInfo = {
     provider: {
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-chart-data-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-chart-data-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper.ts
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-chart-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper.ts
similarity index 96%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-chart-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper.ts
index 56b8c76c55..08c9729f96 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-chart-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper.ts
@@ -6,10 +6,10 @@ import { COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_const
 import type { DateRange } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { Granularity } from '@/api-clients/dashboard/_types/widget-type';
 
-import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 import type {
     Legend,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
 
 
 interface RawData {
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-component-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-component-helper.ts
similarity index 66%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-component-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-component-helper.ts
index 6b2d7c6b44..513e7339d2 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-component-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-component-helper.ts
@@ -1,7 +1,7 @@
 import type { AsyncComponent } from 'vue';
 
-import { WIDGET_COMPONENTS } from '@/services/dashboards/widgets/_constants/widget-components-constant';
-import { getWidgetConfig } from '@/services/dashboards/widgets/_helpers/widget-config-helper';
+import { WIDGET_COMPONENTS } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/widget-components-constant';
+import { getWidgetConfig } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-config-helper';
 
 export const getWidgetComponent = (widgetConfigId: string): AsyncComponent => {
     const config = getWidgetConfig(widgetConfigId);
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-config-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-config-helper.ts
similarity index 95%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-config-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-config-helper.ts
index 95382780f0..dba1a6129f 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-config-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-config-helper.ts
@@ -2,7 +2,7 @@ import { mergeWith } from 'lodash';
 
 import type { WidgetConfig, BaseConfigInfo } from '@/api-clients/dashboard/_types/widget-type';
 
-import { BASE_WIDGET_CONFIGS, CONSOLE_WIDGET_CONFIGS } from '@/services/dashboards/widgets/_constants/widget-config-list-constant';
+import { BASE_WIDGET_CONFIGS, CONSOLE_WIDGET_CONFIGS } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/widget-config-list-constant';
 
 const _mergeCustomizer = (val1, val2) => {
     if (Array.isArray(val1)) return [...new Set(val1.concat(val2))];
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-inherit-options-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-inherit-options-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper.ts
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-location-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-location-helper.ts
similarity index 92%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-location-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-location-helper.ts
index 33f483d994..57b1348ba0 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-location-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-location-helper.ts
@@ -8,7 +8,7 @@ import type { WidgetFiltersMap } from '@/api-clients/dashboard/_types/widget-typ
 
 import { arrayToQueryString, queryStringToArray } from '@/lib/router-query-string';
 
-import type { WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+import type { WidgetTableData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 
 
 
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-filters-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-filters-helper.ts
similarity index 94%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-options-filters-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-filters-helper.ts
index 7b3afd3aa5..7ba91a2460 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-filters-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-filters-helper.ts
@@ -6,7 +6,7 @@ import type { WidgetFiltersMap, WidgetFilterKey } from '@/api-clients/dashboard/
 
 import { MANAGED_VARIABLE_MODELS } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
-import { MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES } from '@/services/dashboards/widgets/_constants/managed-widget-options-schema';
+import { MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/managed-widget-options-schema';
 
 
 /**
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-helper.ts
similarity index 93%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-options-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-helper.ts
index 693c64929f..fde6e150dd 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-helper.ts
@@ -5,7 +5,7 @@ import type {
     InheritOptions, WidgetConfig, WidgetOptions, WidgetFilterKey,
 } from '@/api-clients/dashboard/_types/widget-type';
 
-import { setFilterAndGetWidgetFiltersMap } from '@/services/dashboards/widgets/_helpers/widget-options-filters-helper';
+import { setFilterAndGetWidgetFiltersMap } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-filters-helper';
 
 
 export const getRefinedWidgetOptions = (
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-schema-generator.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator.ts
similarity index 94%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-options-schema-generator.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator.ts
index 23bcb62a2d..33bd34f39c 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-options-schema-generator.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator.ts
@@ -3,7 +3,7 @@ import type { WidgetOptionKey, WidgetOptionsSchema, WidgetOptionsSchemaProperty
 import {
     MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES,
     MANAGED_WIDGET_OPTIONS_SCHEMA_PROPERTIES,
-} from '@/services/dashboards/widgets/_constants/managed-widget-options-schema';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/managed-widget-options-schema';
 
 type CustomOptionTuple = [WidgetOptionKey, Partial<WidgetOptionsSchemaProperty>];
 export const getWidgetOptionsSchema = (options: (WidgetOptionKey|CustomOptionTuple)[]): WidgetOptionsSchema => {
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-schema-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper.ts
similarity index 95%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-schema-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper.ts
index 72b4dad4b8..23d8c54af9 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-schema-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper.ts
@@ -5,7 +5,10 @@ import type {
     InheritOptions, WidgetConfig, WidgetFilterOptionKey, WidgetOptions, WidgetOptionsSchema,
 } from '@/api-clients/dashboard/_types/widget-type';
 
-import { MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES, MANAGED_WIDGET_OPTIONS_SCHEMA_PROPERTIES } from '@/services/dashboards/widgets/_constants/managed-widget-options-schema';
+import {
+    MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES,
+    MANAGED_WIDGET_OPTIONS_SCHEMA_PROPERTIES,
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/managed-widget-options-schema';
 
 const VAR_KEY_TO_OPTION_KEY_MAP = {};
 Object.entries(MANAGED_WIDGET_FILTERS_SCHEMA_PROPERTIES).forEach(([optionKey, property]) => {
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-table-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-table-helper.ts
similarity index 96%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-table-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-table-helper.ts
index 52a580f5bd..f2c2407042 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-table-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-table-helper.ts
@@ -8,8 +8,8 @@ import type { Granularity } from '@/api-clients/dashboard/_types/widget-type';
 
 import type { ManagedVariableModelKey } from '@/lib/variable-models/managed-model-config/base-managed-model-config';
 
+import type { Field } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type { AllReferenceTypeInfo } from '@/services/dashboards/stores/all-reference-type-info-store';
-import type { Field } from '@/services/dashboards/widgets/_types/widget-data-table-type';
 
 /**
  * @name getWidgetTableDateFields
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-validation-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-validation-helper.ts
similarity index 95%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-validation-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-validation-helper.ts
index 75898b3090..409c752a09 100644
--- a/apps/web/src/services/dashboards/widgets/_helpers/widget-validation-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-validation-helper.ts
@@ -10,12 +10,12 @@ import type {
     WidgetOptionsSchema,
 } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getUpdatedWidgetInfo } from '@/services/dashboards/helpers/dashboard-widget-info-helper';
-import { getInheritingOptionKeys } from '@/services/dashboards/widgets/_helpers/widget-inherit-options-helper';
+import { getUpdatedWidgetInfo } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-widget-info-helper';
+import { getInheritingOptionKeys } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-inherit-options-helper';
 import {
     getWidgetOptionKeyByVariableKey,
-} from '@/services/dashboards/widgets/_helpers/widget-schema-helper';
-import type { UpdatableWidgetInfo } from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-schema-helper';
+import type { UpdatableWidgetInfo } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 export const getWidgetInheritOptionsErrorMap = (
diff --git a/apps/web/src/services/dashboards/widgets/_helpers/widget-value-label-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_helpers/widget-value-label-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper.ts
diff --git a/apps/web/src/services/dashboards/widgets/_types/compliance-type.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/compliance-type.ts
similarity index 66%
rename from apps/web/src/services/dashboards/widgets/_types/compliance-type.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/compliance-type.ts
index 481ca5530f..079f547a2c 100644
--- a/apps/web/src/services/dashboards/widgets/_types/compliance-type.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/compliance-type.ts
@@ -1,4 +1,4 @@
-import type { SEVERITY_STATUS_MAP, COMPLIANCE_STATUS_MAP } from '@/services/dashboards/widgets/_constants/compliance-constant';
+import type { SEVERITY_STATUS_MAP, COMPLIANCE_STATUS_MAP } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/compliance-constant';
 
 export type Severity = keyof typeof SEVERITY_STATUS_MAP;
 export type ComplianceStatus = keyof typeof COMPLIANCE_STATUS_MAP;
diff --git a/apps/web/src/services/dashboards/widgets/_types/widget-data-table-type.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-data-table-type.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_types/widget-data-table-type.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-data-table-type.ts
diff --git a/apps/web/src/services/dashboards/widgets/_types/widget-list-type.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-list-type.ts
similarity index 66%
rename from apps/web/src/services/dashboards/widgets/_types/widget-list-type.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-list-type.ts
index a6c62b1fb7..428969f66f 100644
--- a/apps/web/src/services/dashboards/widgets/_types/widget-list-type.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-list-type.ts
@@ -1,7 +1,7 @@
 import type {
     BASE_WIDGET_CONFIG_KEYS,
     CONSOLE_WIDGET_CONFIG_KEYS,
-} from '@/services/dashboards/widgets/_constants/widget-config-list-constant';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/widget-config-list-constant';
 
 export type WidgetConfigKey = typeof CONSOLE_WIDGET_CONFIG_KEYS[number];
 export type BaseWidgetConfigKey = typeof BASE_WIDGET_CONFIG_KEYS[number];
diff --git a/apps/web/src/services/dashboards/widgets/_types/widget-type.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/_types/widget-type.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type.ts
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue
similarity index 95%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue
index 794e2785e6..b0c3a59845 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue
@@ -19,14 +19,14 @@ import { i18n } from '@/translations';
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
 import {
     COMPLIANCE_STATUS_MAP, SEVERITY_STATUS_MAP,
-} from '@/services/dashboards/widgets/_constants/compliance-constant';
-import type { Severity } from '@/services/dashboards/widgets/_types/compliance-type';
-import type { WidgetExpose, WidgetProps, WidgetEmit } from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/compliance-constant';
+import type { Severity } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/compliance-type';
+import type { WidgetExpose, WidgetProps, WidgetEmit } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface SubData {
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/widget-config.ts
similarity index 86%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/widget-config.ts
index 4ef09eecb0..487e2db243 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/compliance-status/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/compliance-status/widget-config.ts
@@ -1,6 +1,6 @@
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const complianceStatusWidgetConfig: WidgetConfig = {
     widget_config_id: 'complianceStatus',
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-fail-findings/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
index 8a7ff243ff..0905aff62e 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/count-of-fail-findings/widget-config.ts
@@ -1,7 +1,7 @@
 import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const countOfFailFindingsWidgetConfig: WidgetConfig = {
     widget_config_id: 'countOfFailFindings',
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
index 64ee6aaa85..c5b9d7b2e0 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config.ts
@@ -1,7 +1,7 @@
 import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const countOfPassAndFailFindingsWidgetConfig: WidgetConfig = {
     widget_config_id: 'countOfPassAndFailFindings',
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue
index 0b6184c8f7..0dc993125e 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue
@@ -14,12 +14,12 @@ import type { CloudServiceAnalyzeParameters } from '@/schema/inventory/cloud-ser
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { SEVERITY_STATUS_MAP } from '@/services/dashboards/widgets/_constants/compliance-constant';
-import type { ComplianceStatus, Severity } from '@/services/dashboards/widgets/_types/compliance-type';
-import type { WidgetExpose, WidgetProps, WidgetEmit } from '@/services/dashboards/widgets/_types/widget-type';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { SEVERITY_STATUS_MAP } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/compliance-constant';
+import type { ComplianceStatus, Severity } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/compliance-type';
+import type { WidgetExpose, WidgetProps, WidgetEmit } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface Data {
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/widget-config.ts
similarity index 86%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/widget-config.ts
index 1906823970..4899639c69 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/severity-status-by-service/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/severity-status-by-service/widget-config.ts
@@ -1,6 +1,6 @@
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const severityStatusByServiceWidgetConfig: WidgetConfig = {
     widget_config_id: 'severityStatusByService',
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
similarity index 93%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
index 33f235ab7f..45be6fb71e 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue
@@ -25,14 +25,14 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { red, green } from '@/styles/colors';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { SEVERITY_STATUS_MAP } from '@/services/dashboards/widgets/_constants/compliance-constant';
-import { getDateAxisSettings } from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import type { Severity } from '@/services/dashboards/widgets/_types/compliance-type';
-import type { WidgetProps, WidgetExpose, WidgetEmit } from '@/services/dashboards/widgets/_types/widget-type';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { SEVERITY_STATUS_MAP } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/compliance-constant';
+import { getDateAxisSettings } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import type { Severity } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/compliance-type';
+import type { WidgetProps, WidgetExpose, WidgetEmit } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 interface XYChartData {
     date?: string;
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
similarity index 88%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
index 7002896ba8..1388986dc6 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-history/widget-config.ts
@@ -1,7 +1,7 @@
 import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const totalFailFindingsHistoryWidgetConfig: WidgetConfig = {
     widget_config_id: 'totalFailFindingsHistory',
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue
index 6efc9cb833..772a9fba8d 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue
@@ -17,13 +17,13 @@ import type { CloudServiceAnalyzeParameters } from '@/schema/inventory/cloud-ser
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { SEVERITY_STATUS_MAP } from '@/services/dashboards/widgets/_constants/compliance-constant';
-import type { Severity } from '@/services/dashboards/widgets/_types/compliance-type';
-import type { WidgetProps, WidgetExpose, WidgetEmit } from '@/services/dashboards/widgets/_types/widget-type';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { SEVERITY_STATUS_MAP } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/compliance-constant';
+import type { Severity } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/compliance-type';
+import type { WidgetProps, WidgetExpose, WidgetEmit } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface SubData {
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
similarity index 87%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
index ec0db72670..39c92e5951 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/total-fail-findings-status/widget-config.ts
@@ -1,6 +1,6 @@
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const totalFailFindingsStatusWidgetConfig: WidgetConfig = {
     widget_config_id: 'totalFailFindingsStatus',
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
index cc7307a094..6ab85a3cc6 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue
@@ -19,27 +19,28 @@ import { useAmcharts5 } from '@/common/composables/amcharts5';
 import { setXYSharedTooltipTextWithRate } from '@/common/composables/amcharts5/xy-chart-helper';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
-import WidgetChartNoDataOverlay from '@/services/dashboards/widgets/_components/WidgetChartNoDataOverlay.vue';
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { COMPLIANCE_STATUS_MAP } from '@/services/dashboards/widgets/_constants/compliance-constant';
+import WidgetChartNoDataOverlay from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetChartNoDataOverlay.vue';
+import WidgetDataTable from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { COMPLIANCE_STATUS_MAP } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_constants/compliance-constant';
 import {
     getDateAxisSettings,
-} from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
 import {
     getReferenceTypeOfDataField, getRefinedDateTableData, getWidgetTableDateFields,
-} from '@/services/dashboards/widgets/_helpers/widget-table-helper';
-import type { Field } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-table-helper';
+import type { Field } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetExpose, WidgetProps,
     WidgetEmit,
     Legend,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
+
 
 
 interface ChartDataResult {
diff --git a/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
similarity index 89%
rename from apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
index 2a34f114b7..2d5c3eed1c 100644
--- a/apps/web/src/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config.ts
@@ -1,7 +1,7 @@
 import { ASSET_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const trendOfPassAndFailFindingsWidgetConfig: WidgetConfig = {
     widget_config_id: 'trendOfPassAndFailFindings',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue
similarity index 94%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue
index 1f21e5d04d..208df6eab9 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue
@@ -16,12 +16,12 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { indigo, red, yellow } from '@/styles/colors';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
 import type {
     WidgetEmit, WidgetExpose, WidgetProps, Legend, BudgetUsageAnalyzeResponse,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface Data {
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-status/widget-config.ts
similarity index 87%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-status/widget-config.ts
index c188ba39d5..0de95d66ba 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-status/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-status/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 
 const budgetStatusWidgetConfig: WidgetConfig = {
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
similarity index 88%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
index d473990261..c23dcec496 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue
@@ -16,15 +16,15 @@ import { COST_DATA_FIELD_MAP } from '@/api-clients/dashboard/_constants/widget-c
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import type { Field, WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+import WidgetDataTable from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import type { Field, WidgetTableData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetExpose, WidgetProps, WidgetEmit, BudgetUsageAnalyzeResponse,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface Data {
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
index 379de2dc4c..5a8abe1ee8 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-by-target/widget-config.ts
@@ -1,7 +1,7 @@
 import { COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const budgetUsageByTargetWidgetConfig: WidgetConfig = {
     widget_config_id: 'budgetUsageByTarget',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
similarity index 96%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
index a7d330bfac..11ed4159a4 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue
@@ -25,11 +25,11 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { indigo, red, gray } from '@/styles/colors';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getDateAxisSettings } from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import type { WidgetExpose, WidgetProps, WidgetEmit } from '@/services/dashboards/widgets/_types/widget-type';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getDateAxisSettings } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import type { WidgetExpose, WidgetProps, WidgetEmit } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 interface Data {
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/widget-config.ts
similarity index 87%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/widget-config.ts
index 4ebab30add..a0f598a776 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/budget-usage-summary/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/budget-usage-summary/widget-config.ts
@@ -1,7 +1,7 @@
 import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const budgetUsageSummaryConfig: WidgetConfig = {
     widget_config_id: 'budgetUsageSummary',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
similarity index 89%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
index 4df3c8e510..ca49ae6c8c 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue
@@ -21,22 +21,23 @@ import type { RegionReferenceMap } from '@/store/reference/region-reference-stor
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getPieChartLegends } from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import { getWidgetDataTableRowLocation } from '@/services/dashboards/widgets/_helpers/widget-location-helper';
-import { getReferenceTypeOfDataField } from '@/services/dashboards/widgets/_helpers/widget-table-helper';
-import { getWidgetValueLabel } from '@/services/dashboards/widgets/_helpers/widget-value-label-helper';
-import type { Field, WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+import WidgetDataTable from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getPieChartLegends } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import { getWidgetDataTableRowLocation } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-location-helper';
+import { getReferenceTypeOfDataField } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-table-helper';
+import { getWidgetValueLabel } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper';
+import type { Field, WidgetTableData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetExpose, WidgetProps, WidgetEmit,
     Legend, CostAnalyzeResponse,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
+
 
 
 interface SubData {
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
similarity index 92%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
index fb1343ae4d..4066348f2e 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region-multi-fields/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costByRegionMultiFieldsWidgetConfig: WidgetConfig = {
     widget_config_id: 'costByRegionMultiFields',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
similarity index 88%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
index d4befb7752..89e5c43ed1 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue
@@ -24,24 +24,24 @@ import type { RegionReferenceMap } from '@/store/reference/region-reference-stor
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getXYChartLegends } from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import { getWidgetDataTableRowLocation } from '@/services/dashboards/widgets/_helpers/widget-location-helper';
-import type { Field, WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+import WidgetDataTable from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getXYChartLegends } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import { getWidgetDataTableRowLocation } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-location-helper';
+import type { Field, WidgetTableData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetExpose, WidgetProps, WidgetEmit, Legend, CostAnalyzeResponse,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 import type {
     Data,
     MapChartData,
-} from '@/services/dashboards/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper';
 import {
     getRefinedMapChartData,
-} from '@/services/dashboards/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper';
 
 
 type FullData = CostAnalyzeResponse<Data>;
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/cost-by-region-data-hleper.ts
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/widget-config.ts
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/widget-config.ts
index d367986be0..6f67ca28f2 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-by-region/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-by-region/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costByRegionWidgetConfig: WidgetConfig = {
     widget_config_id: 'costByRegion',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-donut/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-donut/widget-config.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-donut/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-donut/widget-config.ts
index b655413936..50c34f5467 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-donut/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-donut/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costDonutWidgetConfig: Partial<WidgetConfig> = {
     widget_config_id: 'costDonut',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/CostMapWidget.vue
similarity index 92%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/CostMapWidget.vue
index 93e7831d79..ec6d379b3b 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/CostMapWidget.vue
@@ -17,12 +17,12 @@ import type { CostDataField } from '@/api-clients/dashboard/_types/widget-type';
 import { useAmcharts5 } from '@/common/composables/amcharts5';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
 import type {
     WidgetExpose, WidgetProps, WidgetEmit,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 import type {
     AnalyzeRawData, TreemapChartData,
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts
similarity index 100%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/costmap-chart-data-helper.ts
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts
similarity index 85%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts
index 708871b383..c5ff1f0ca5 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/costmap-draw-chart-helper.ts
@@ -2,8 +2,8 @@ import {
     gray, palette, transparent, white,
 } from '@/styles/colors';
 
-import type { WidgetTheme } from '@/services/dashboards/widgets/_types/widget-type';
-import type { TreemapChartData } from '@/services/dashboards/widgets/cost-widgets/cost-map/costmap-chart-data-helper';
+import type { WidgetTheme } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { TreemapChartData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/costmap-chart-data-helper';
 
 export const setThemeColorsToTreemapData = (treemapData: TreemapChartData['children'], theme?: WidgetTheme): TreemapChartData['children'] => {
     const themeColorName: WidgetTheme = theme || 'violet';
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/widget-config.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/widget-config.ts
index fb0c097418..e98321ec43 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-map/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-map/widget-config.ts
@@ -1,7 +1,7 @@
 import { COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costMapWidgetConfig: WidgetConfig = {
     widget_config_id: 'costMap',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-pie/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-pie/widget-config.ts
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-pie/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-pie/widget-config.ts
index f1f9c85423..e256d05a78 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-pie/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-pie/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costPieWidgetConfig: Partial<WidgetConfig> = {
     widget_config_id: 'costPie',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
similarity index 90%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
index e8a1f56e76..1b49123feb 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue
@@ -25,23 +25,23 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { gray } from '@/styles/colors';
 
-import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
-import WidgetDataTable from '@/services/dashboards/widgets/_components/WidgetDataTable.vue';
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidgetPagination } from '@/services/dashboards/widgets/_composables/use-widget-pagination';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getRefinedXYChartData } from '@/services/dashboards/widgets/_helpers/widget-chart-data-helper';
-import { getXYChartLegends } from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import { getWidgetDataTableRowLocation } from '@/services/dashboards/widgets/_helpers/widget-location-helper';
-import { getReferenceTypeOfDataField } from '@/services/dashboards/widgets/_helpers/widget-table-helper';
-import { getWidgetValueLabel } from '@/services/dashboards/widgets/_helpers/widget-value-label-helper';
-import type { Field, WidgetTableData } from '@/services/dashboards/widgets/_types/widget-data-table-type';
+import WidgetDataTable from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetDataTable.vue';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidgetPagination } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-pagination';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getRefinedXYChartData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper';
+import { getXYChartLegends } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import { getWidgetDataTableRowLocation } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-location-helper';
+import { getReferenceTypeOfDataField } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-table-helper';
+import { getWidgetValueLabel } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-value-label-helper';
+import type { Field, WidgetTableData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-data-table-type';
 import type {
     WidgetEmit, WidgetExpose, WidgetProps,
     CostAnalyzeResponse, Legend,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
+import type { ReferenceType } from '@/services/dashboards/stores/all-reference-type-info-store';
 
 
 interface SubData {
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
similarity index 93%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
index d5e77a4697..e65330d3ec 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-summary-multi-fields/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costSummaryMultiFieldsWidgetConfig: WidgetConfig = {
     widget_config_id: 'costSummaryMultiFields',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend-stacked/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
index 3706a2a329..15fb5737f9 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-trend-stacked/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costTrendStackedWidgetConfig: Partial<WidgetConfig> = {
     widget_config_id: 'costTrendStacked',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-trend/widget-config.ts
similarity index 91%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-trend/widget-config.ts
index 8ad71ca15f..3c38ed67dd 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/cost-trend/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/cost-trend/widget-config.ts
@@ -1,7 +1,7 @@
 import { CHART_TYPE, COST_DATA_FIELD_MAP, GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 const costTrendWidgetConfig: Partial<WidgetConfig> = {
     widget_config_id: 'costTrend',
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
similarity index 94%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
index e08395e3f7..fc90d2fc82 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue
@@ -27,16 +27,16 @@ import ErrorHandler from '@/common/composables/error/errorHandler';
 
 import { green, red, gray } from '@/styles/colors';
 
-import WidgetFrame from '@/services/dashboards/widgets/_components/WidgetFrame.vue';
-import { useWidgetColorSet } from '@/services/dashboards/widgets/_composables/use-widget-color-set';
-import { useWidgetLifecycle } from '@/services/dashboards/widgets/_composables/use-widget-lifecycle';
-import { useWidget } from '@/services/dashboards/widgets/_composables/use-widget/use-widget';
-import { getRefinedXYChartData } from '@/services/dashboards/widgets/_helpers/widget-chart-data-helper';
-import { getDateAxisSettings } from '@/services/dashboards/widgets/_helpers/widget-chart-helper';
-import { getRefinedDateTableData } from '@/services/dashboards/widgets/_helpers/widget-table-helper';
+import WidgetFrame from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_components/WidgetFrame.vue';
+import { useWidgetColorSet } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-color-set';
+import { useWidgetLifecycle } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget-lifecycle';
+import { useWidget } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/use-widget';
+import { getRefinedXYChartData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-data-helper';
+import { getDateAxisSettings } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-chart-helper';
+import { getRefinedDateTableData } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-table-helper';
 import type {
     WidgetExpose, WidgetProps, WidgetEmit, CostAnalyzeResponse,
-} from '@/services/dashboards/widgets/_types/widget-type';
+} from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
 
 
 const chartContext = ref<HTMLElement | null>(null);
diff --git a/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/widget-config.ts
similarity index 89%
rename from apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/widget-config.ts
index fcc061cc82..15f3c614f5 100644
--- a/apps/web/src/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/legacy/widgets/cost-widgets/monthly-cost/widget-config.ts
@@ -1,7 +1,7 @@
 import { GRANULARITY } from '@/api-clients/dashboard/_constants/widget-constant';
 import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
 
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
 
 
 const monthlyCostWidgetConfig: WidgetConfig = {
diff --git a/apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store.ts
similarity index 85%
rename from apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store.ts
index c02185ba05..9d4adc57c2 100644
--- a/apps/web/src/services/dashboards/stores/dashboard-detail-info-store.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store.ts
@@ -12,22 +12,16 @@ import type {
     DashboardVariables,
     DashboardVariableSchemaProperty,
     DashboardVariablesSchema,
-    DashboardVars,
     DashboardGlobalVariablesSchema,
 } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
 import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
 import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
-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 getRandomId from '@/lib/random-id-generator';
-import WorkspaceVariableModel from '@/lib/variable-models/managed-model/resource-model/workspace-variable-model';
 
-import { MANAGED_DASHBOARD_VARIABLES_SCHEMA } from '@/services/dashboards/constants/dashboard-managed-variables-schema';
+import { MANAGED_DASHBOARD_VARIABLES_SCHEMA } from '@/services/_shared/dashboard/dashboard-detail/constants/dashboard-managed-variables-schema';
 
 // const DEFAULT_REFRESH_INTERVAL = '5m';
 const DEFAULT_REFRESH_INTERVAL = 'off';
@@ -72,19 +66,14 @@ const refineProjectDashboardVariables = (variables: DashboardVariables, projectI
 };
 
 export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info', () => {
-    const appContextStore = useAppContextStore();
-    const userStore = useUserStore();
-    const storeState = reactive({
-        isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-        isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
-    });
     const state = reactive({
         loadingDashboard: false,
         dashboardId: '' as string | undefined,
         dashboard: undefined as PublicDashboardModel|PrivateDashboardModel|undefined,
         projectId: undefined as string | undefined,
+        projectGroupId: undefined as string | undefined,
         options: DASHBOARD_DEFAULT.options as DashboardOptions,
-        vars: {} as DashboardVars,
+
         variables: {} as DashboardVariables,
         variablesSchema: {
             properties: {},
@@ -95,6 +84,7 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
         } as DashboardGlobalVariablesSchema,
         variablesInitMap: {} as Record<string, boolean>,
         showDateRangeNotification: true,
+        variableImportModalVisible: false,
         // only for admin
         selectedWorkspaceId: undefined as string | undefined,
         // widget info states
@@ -103,24 +93,6 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
     });
 
     const getters = reactive({
-        refinedVars: computed<DashboardVars>(() => {
-            const isProjectSharedDashboard = !!state.projectId;
-            const _vars: DashboardVars = cloneDeep(state.vars);
-            if (isProjectSharedDashboard && !!state.projectId) {
-                _vars.project = [state.projectId];
-            }
-            if (storeState.isAdminMode) {
-                if (state.selectedWorkspaceId && state.selectedWorkspaceId !== 'all') {
-                    _vars[WorkspaceVariableModel.meta.idKey] = [state.selectedWorkspaceId];
-                } else {
-                    delete _vars[WorkspaceVariableModel.meta.idKey];
-                }
-            } else {
-                delete _vars[WorkspaceVariableModel.meta.idKey];
-            }
-            return _vars;
-        }),
-
         // only for 1.0 legacy dashboard
         isAllVariablesInitialized: computed(() => Object.values(state.variablesInitMap).every((d) => d === true)),
         refinedVariablesSchema: computed<DashboardVariablesSchema>(() => {
@@ -159,26 +131,27 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
 
     /* Mutations */
     const setOptions = (options: DashboardOptions) => { state.options = options; };
-    const setVars = (vars: DashboardVars) => { state.vars = vars; };
     const setVariablesSchema = (variablesSchema: DashboardVariablesSchema) => { state.variablesSchema = variablesSchema; };
     const setVariables = (variables: DashboardVariables) => { state.variables = variables; };
     const setVariablesInitMap = (variablesInitMap: Record<string, boolean>) => { state.variablesInitMap = variablesInitMap; };
     const setDashboardWidgets = (dashboardWidgets: Array<PublicWidgetModel|PrivateWidgetModel>) => { state.dashboardWidgets = dashboardWidgets; };
     const setLoadingWidgets = (loading: boolean) => { state.loadingWidgets = loading; };
     const setProjectId = (projectId?: string) => { state.projectId = projectId; };
+    const setProjectGroupId = (projectGroupId?: string) => { state.projectGroupId = projectGroupId; };
     const setShowDateRangeNotification = (visible: boolean) => { state.showDateRangeNotification = visible; };
     const setSelectedWorkspaceId = (workspaceId?: string) => { state.selectedWorkspaceId = workspaceId; };
+    const setVariableImportModalVisible = (visible: boolean) => { state.variableImportModalVisible = visible; };
     /* Actions */
     const reset = () => {
         // set default value of all state
         state.loadingDashboard = false;
         state.dashboardId = undefined;
         setProjectId('');
+        setProjectGroupId('');
         setOptions(DASHBOARD_DEFAULT.options);
         setVariables({});
         setVariablesSchema({ properties: {}, order: [] });
         setVariablesInitMap({});
-        setVars({});
         setLoadingWidgets(false);
         state.showDateRangeNotification = true;
         state.selectedWorkspaceId = undefined;
@@ -188,10 +161,8 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
             console.error('setDashboardInfo failed', dashboardInfo);
             return;
         }
-        if (!!dashboardInfo.project_id && dashboardInfo.project_id !== '*' && dashboardInfo.project_id !== '-') {
-            state.projectId = dashboardInfo.project_id;
-        }
-        state.vars = dashboardInfo.vars ?? {};
+        state.projectId = dashboardInfo.project_id;
+        state.projectGroupId = dashboardInfo.project_group_id;
         state.dashboard = dashboardInfo;
         const _dashboardInfo = cloneDeep(dashboardInfo);
         state.dashboardId = _dashboardInfo.dashboard_id;
@@ -273,15 +244,16 @@ export const useDashboardDetailInfoStore = defineStore('dashboard-detail-info',
 
     const mutations = {
         setOptions,
-        setVars,
         setVariablesSchema,
         setVariables,
         setVariablesInitMap,
         setDashboardWidgets,
         setLoadingWidgets,
         setProjectId,
+        setProjectGroupId,
         setShowDateRangeNotification,
         setSelectedWorkspaceId,
+        setVariableImportModalVisible,
     };
     const actions = {
         reset,
diff --git a/apps/web/src/services/_shared/dashboard/dashboard-detail/stores/dashboard-vars-store.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/stores/dashboard-vars-store.ts
new file mode 100644
index 0000000000..86927fba6b
--- /dev/null
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/stores/dashboard-vars-store.ts
@@ -0,0 +1,32 @@
+import { reactive } from 'vue';
+
+import { defineStore } from 'pinia';
+
+import type { DashboardVars } from '@/api-clients/dashboard/_types/dashboard-type';
+
+export const useDashboardVarsStore = defineStore('dashboard-vars', () => {
+    const state = reactive({
+        vars: {} as DashboardVars|undefined,
+    });
+
+    const setVars = (vars?: DashboardVars) => {
+        state.vars = vars;
+    };
+    const reset = () => {
+        setVars();
+    };
+
+    const actions = {
+        reset,
+    };
+    const mutations = {
+        setVars,
+    };
+
+    return {
+        state,
+        ...mutations,
+        ...actions,
+    };
+});
+
diff --git a/apps/web/src/services/dashboards/stores/widget-form-store.ts b/apps/web/src/services/_shared/dashboard/dashboard-detail/stores/widget-form-store.ts
similarity index 90%
rename from apps/web/src/services/dashboards/stores/widget-form-store.ts
rename to apps/web/src/services/_shared/dashboard/dashboard-detail/stores/widget-form-store.ts
index 171c49616c..1493417979 100644
--- a/apps/web/src/services/dashboards/stores/widget-form-store.ts
+++ b/apps/web/src/services/_shared/dashboard/dashboard-detail/stores/widget-form-store.ts
@@ -13,13 +13,13 @@ import type {
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
+import { getUpdatedWidgetInfo } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-widget-info-helper';
+import { mergeBaseWidgetState } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_composables/use-widget/merge-base-widget-state';
+import { getWidgetOptionsSchema } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_helpers/widget-options-schema-generator';
+import type { UpdatableWidgetInfo } from '@/services/_shared/dashboard/dashboard-detail/legacy/widgets/_types/widget-type';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
 import { useWidgetTitleInput } from '@/services/dashboards/composables/use-widget-title-input';
-import { getUpdatedWidgetInfo } from '@/services/dashboards/helpers/dashboard-widget-info-helper';
-import { useDashboardDetailInfoStore } from '@/services/dashboards/stores/dashboard-detail-info-store';
 import type { MergedBaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state';
-import { mergeBaseWidgetState } from '@/services/dashboards/widgets/_composables/use-widget/merge-base-widget-state';
-import { getWidgetOptionsSchema } from '@/services/dashboards/widgets/_helpers/widget-options-schema-generator';
-import type { UpdatableWidgetInfo } from '@/services/dashboards/widgets/_types/widget-type';
 
 
 /* Description
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerChart.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerChart.vue
index 842510cbdd..87783c7327 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerChart.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerChart.vue
@@ -14,7 +14,7 @@ import {
 } from '@cloudforet/mirinae';
 
 import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
-import type { MetricDataAnalyzeParameters } from '@/schema/inventory/metric-data/api-verbs/analyze';
+import type { MetricDataAnalyzeParameters } from '@/api-clients/inventory/metric-data/schema/api-verbs/analyze';
 
 import MetricExplorerDonutChart from '@/services/asset-inventory/components/MetricExplorerDonutChart.vue';
 import MetricExplorerHorizontalColumnChart
diff --git a/apps/web/src/services/asset-inventory/components/MetricExplorerDataTable.vue b/apps/web/src/services/asset-inventory/components/MetricExplorerDataTable.vue
index 9e6d17ad5d..08f523721c 100644
--- a/apps/web/src/services/asset-inventory/components/MetricExplorerDataTable.vue
+++ b/apps/web/src/services/asset-inventory/components/MetricExplorerDataTable.vue
@@ -19,7 +19,7 @@ import type { DataTableFieldType } from '@cloudforet/mirinae/types/data-display/
 import { byteFormatter, numberFormatter } from '@cloudforet/utils';
 
 import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
-import type { MetricDataAnalyzeParameters } from '@/schema/inventory/metric-data/api-verbs/analyze';
+import type { MetricDataAnalyzeParameters } from '@/api-clients/inventory/metric-data/schema/api-verbs/analyze';
 import type { MetricLabelKey } from '@/schema/inventory/metric/type';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
diff --git a/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue b/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue
index da243f1dce..6a1fe619ab 100644
--- a/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue
+++ b/apps/web/src/services/dashboards/components/DashboardDeleteModal.vue
@@ -2,10 +2,8 @@
 import { computed, reactive } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
-import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import { 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';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
@@ -19,6 +17,7 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useRecentStore } from '@/common/modules/navigations/stores/recent-store';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
 
+import { useDashboardDeleteMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-delete-mutation';
 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';
@@ -43,7 +42,6 @@ const appContextStore = useAppContextStore();
 const router = useRouter();
 /* Query */
 const {
-    api,
     keys,
 } = useDashboardQuery();
 const queryClient = useQueryClient();
@@ -68,44 +66,33 @@ const handleDeleteDashboardConfirm = async () => {
 };
 
 /* Api */
-const deleteDashboardFn = (params: PublicDashboardDeleteParameters|PrivateDashboardDeleteParameters): Promise<void> => {
-    const _isPrivate = params.dashboard_id.startsWith('private');
-    if (_isPrivate) {
-        return api.privateDashboardAPI.delete(params as PrivateDashboardDeleteParameters);
-    }
-    return api.publicDashboardAPI.delete(params as PublicDashboardDeleteParameters);
-};
-
-const { mutate: deleteDashboard, isPending: loading } = useMutation(
-    {
-        mutationFn: deleteDashboardFn,
-        onSuccess: async (_, params) => {
-            const _isPrivate = params.dashboard_id.startsWith('private');
-            const dashboardListQueryKey = _isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
-            await queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
-            await recentStore.deleteRecent({
-                type: RECENT_TYPE.DASHBOARD,
-                itemId: props.dashboardId,
+const { mutate: deleteDashboard, isPending: loading } = useDashboardDeleteMutation({
+    onSuccess: async (_, params) => {
+        const _isPrivate = params.dashboard_id.startsWith('private');
+        const dashboardListQueryKey = _isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
+        await queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
+        await recentStore.deleteRecent({
+            type: RECENT_TYPE.DASHBOARD,
+            itemId: props.dashboardId,
+        });
+        const isFavoriteItem = favoriteGetters.dashboardItems.find((item) => item.itemId === params.dashboard_id);
+        if (isFavoriteItem) {
+            await favoriteStore.deleteFavorite({
+                itemType: FAVORITE_TYPE.DASHBOARD,
+                workspaceId: storeState.currentWorkspaceId || '',
+                itemId: params.dashboard_id,
             });
-            const isFavoriteItem = favoriteGetters.dashboardItems.find((item) => item.itemId === params.dashboard_id);
-            if (isFavoriteItem) {
-                await favoriteStore.deleteFavorite({
-                    itemType: FAVORITE_TYPE.DASHBOARD,
-                    workspaceId: storeState.currentWorkspaceId || '',
-                    itemId: params.dashboard_id,
-                });
-            }
-            state.proxyVisible = false;
-            const dashboardRouteName = storeState.isAdminMode
-                ? ADMIN_DASHBOARDS_ROUTE._NAME
-                : DASHBOARDS_ROUTE._NAME;
-            await router.replace({ name: dashboardRouteName }).catch(() => {});
-        },
-        onError(error) {
-            ErrorHandler.handleRequestError(error, i18n.t('DASHBOARDS.FORM.ALT_E_DELETE_DASHBOARD'));
-        },
+        }
+        state.proxyVisible = false;
+        const dashboardRouteName = storeState.isAdminMode
+            ? ADMIN_DASHBOARDS_ROUTE._NAME
+            : DASHBOARDS_ROUTE._NAME;
+        await router.replace({ name: dashboardRouteName }).catch(() => {});
     },
-);
+    onError: (error) => {
+        ErrorHandler.handleRequestError(error, i18n.t('DASHBOARDS.FORM.ALT_E_DELETE_DASHBOARD'));
+    },
+});
 
 </script>
 
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 af97f93af3..481d787e72 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, useQueryClient } from '@tanstack/vue-query';
+import { useQueryClient } from '@tanstack/vue-query';
 
 import {
     PButtonModal, PFieldGroup, PTextInput, PToggleButton,
@@ -11,27 +11,20 @@ import { getClonedName } from '@cloudforet/utils';
 
 import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
 import type { DashboardCreateParams, DashboardModel, DashboardType } from '@/api-clients/dashboard/_types/dashboard-type';
-import type { WidgetModel } from '@/api-clients/dashboard/_types/widget-type';
-import type { PrivateDashboardCreateParameters } from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/create';
-import { usePrivateWidgetApi } from '@/api-clients/dashboard/private-widget/composables/use-private-widget-api';
 import type { PublicDashboardCreateParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/create';
-import { usePublicWidgetApi } from '@/api-clients/dashboard/public-widget/composables/use-public-widget-api';
 import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useFormValidator } from '@/common/composables/form-validator';
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useDashboardCloneMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-clone-mutation';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
-import { getSharedDashboardLayouts } from '@/services/dashboards/helpers/dashboard-share-helper';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 
@@ -47,21 +40,17 @@ const props = withDefaults(defineProps<Props>(), {
 });
 const emit = defineEmits<{(e: 'update:visible', value: boolean): void;
 }>();
-const { privateWidgetAPI } = usePrivateWidgetApi();
-const { publicWidgetAPI } = usePublicWidgetApi();
 
 /* Query */
 const {
     publicDashboardList,
     privateDashboardList,
     keys,
-    api,
 } = useDashboardQuery();
 const queryClient = useQueryClient();
 
 const router = useRouter();
 const appContextStore = useAppContextStore();
-const allReferenceStore = useAllReferenceStore();
 const userStore = useUserStore();
 const {
     forms: {
@@ -87,7 +76,6 @@ const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     isWorkspaceOwner: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
     isWorkspaceMember: computed<boolean>(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
-    costDataSource: computed<CostDataSourceReferenceMap>(() => allReferenceStore.getters.costDataSource),
 });
 const state = reactive({
     proxyVisible: useProxyValue('visible', props, emit),
@@ -111,22 +99,6 @@ const state = reactive({
     }),
 });
 
-/* Api */
-const listDashboardWidgets = async (dashboardId: string): Promise<WidgetModel[]> => {
-    try {
-        const isPrivate = dashboardId.startsWith('private');
-        const fetcher = isPrivate
-            ? privateWidgetAPI.list
-            : publicWidgetAPI.list;
-        const res = await fetcher({
-            dashboard_id: dashboardId,
-        });
-        return res.results || [];
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        return [];
-    }
-};
 
 const handleUpdateVisible = (visible) => {
     state.proxyVisible = visible;
@@ -138,62 +110,50 @@ const handleChangePrivate = (val: boolean) => {
 };
 const handleConfirm = async () => {
     if (!isAllValid) return;
-    const _dashboardWidgets = await listDashboardWidgets(props.dashboardId);
 
-    const _sharedLayouts = await getSharedDashboardLayouts(state.targetDashboard.layouts, _dashboardWidgets, storeState.costDataSource);
     const _sharedDashboard: DashboardCreateParams = {
         name: name.value,
-        layouts: _sharedLayouts,
-        options: state.targetDashboard.options || {},
-        labels: state.targetDashboard.labels || [],
-        tags: { created_by: userStore.state.userId },
-        vars: state.targetDashboard.vars,
-        vars_schema: state.targetDashboard.vars_schema,
     };
     if (storeState.isWorkspaceMember) {
         state.isPrivate = true;
     } else if (storeState.isAdminMode) {
         state.isPrivate = false;
-        (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
-    } else if (!state.isPrivate) {
-        (_sharedDashboard as PublicDashboardCreateParameters).resource_group = state.targetDashboard?.resource_group || RESOURCE_GROUP.WORKSPACE;
     }
 
-    mutate(_sharedDashboard as PrivateDashboardCreateParameters);
-};
-
-const createDashboard = (params: DashboardCreateParams): Promise<DashboardModel> => {
-    if (state.isPrivate) {
-        return api.privateDashboardAPI.create(params as PrivateDashboardCreateParameters);
+    if (!state.isPrivate) {
+        if (storeState.isAdminMode) {
+            (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.DOMAIN;
+        } else {
+            (_sharedDashboard as PublicDashboardCreateParameters).resource_group = RESOURCE_GROUP.WORKSPACE;
+        }
     }
-    return api.publicDashboardAPI.create(params as PublicDashboardCreateParameters);
+
+    cloneDashboard(_sharedDashboard as DashboardCreateParams, props.dashboardId);
 };
 
-const { mutate, isPending: dashboardCloneLoading } = useMutation(
-    {
-        mutationFn: createDashboard,
-        onSuccess: (dashboard: DashboardModel) => {
-            const isPrivate = dashboard.dashboard_id.startsWith('private');
-            const dashboardListQueryKey = isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
-            queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
-        },
-        onError: (e) => {
-            showErrorMessage(i18n.t('DASHBOARDS.FORM.ALT_E_CLONE_DASHBOARD'), e);
-        },
-        onSettled(data) {
-            state.proxyVisible = false;
-            if (data?.dashboard_id) {
-                const dashboardDetailRouteName = storeState.isAdminMode
-                    ? ADMIN_DASHBOARDS_ROUTE.DETAIL._NAME
-                    : DASHBOARDS_ROUTE.DETAIL._NAME;
-                router.push({
-                    name: dashboardDetailRouteName,
-                    params: { dashboardId: data.dashboard_id },
-                }).catch(() => {});
-            }
-        },
+const { mutate: cloneDashboard, isPending: dashboardCloneLoading } = useDashboardCloneMutation({
+    isPrivate: computed(() => state.isPrivate),
+    onSuccess: (dashboard: DashboardModel) => {
+        const isPrivate = dashboard.dashboard_id.startsWith('private');
+        const dashboardListQueryKey = isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
+        queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
+    },
+    onError: (e) => {
+        showErrorMessage(i18n.t('DASHBOARDS.FORM.ALT_E_CLONE_DASHBOARD'), e);
     },
-);
+    onSettled(data) {
+        state.proxyVisible = false;
+        if (data?.dashboard_id) {
+            const dashboardDetailRouteName = storeState.isAdminMode
+                ? ADMIN_DASHBOARDS_ROUTE.DETAIL._NAME
+                : DASHBOARDS_ROUTE.DETAIL._NAME;
+            router.push({
+                name: dashboardDetailRouteName,
+                params: { dashboardId: data.dashboard_id },
+            }).catch(() => {});
+        }
+    },
+});
 
 watch(() => props.visible, (visible) => {
     if (visible) {
diff --git a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
deleted file mode 100644
index 1fc3712ea1..0000000000
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue
+++ /dev/null
@@ -1,222 +0,0 @@
-<script lang="ts" setup>
-import { computed, reactive } from 'vue';
-
-import {
-    PHeading, PSkeleton, PSelectDropdown, PI, PBadge, PHeadingLayout,
-} from '@cloudforet/mirinae';
-import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
-import type { BadgeStyleType, BadgeType } from '@cloudforet/mirinae/types/data-display/badge/type';
-
-import type { DashboardScope } from '@/api-clients/dashboard/_types/dashboard-type';
-import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
-import { i18n } from '@/translations';
-
-import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useUserStore } from '@/store/user/user-store';
-
-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 { 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 { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
-
-
-
-interface Props {
-    dashboardId: string;
-    templateName?: string;
-}
-const props = defineProps<Props>();
-const dashboardPageControlStore = useDashboardPageControlStore();
-const appContextStore = useAppContextStore();
-const userStore = useUserStore();
-
-/* Query */
-const {
-    publicDashboardList,
-    privateDashboardList,
-} = useDashboardQuery();
-const {
-    publicFolderList,
-    privateFolderList,
-} = useDashboardFolderQuery();
-
-
-const { dashboard } = useDashboardGetQuery({
-    dashboardId: computed(() => props.dashboardId),
-});
-const { isManageable } = useDashboardManageable({
-    dashboardId: computed(() => props.dashboardId),
-});
-
-const queryState = reactive({
-    publicDashboardItems: computed(() => {
-        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
-        if (storeState.isAdminMode) return _v2DashboardItems;
-        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-    }),
-    privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
-    allDashboardItems: computed(() => [...queryState.publicDashboardItems, ...queryState.privateDashboardItems]),
-    publicFolderItems: computed(() => {
-        if (storeState.isAdminMode) return publicFolderList.value;
-        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-    }),
-    privateFolderItems: computed(() => privateFolderList.value),
-    allFolderItems: computed(() => [...queryState.publicFolderItems, ...queryState.privateFolderItems]),
-});
-
-const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-    isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
-});
-const { getControlMenuItems } = useDashboardControlMenuItems({
-    isAdminMode: computed(() => storeState.isAdminMode),
-    isWorkspaceOwner: computed(() => storeState.isWorkspaceOwner),
-});
-const state = reactive({
-    isPrivate: computed<boolean>(() => !!dashboard.value?.dashboard_id.startsWith('private')),
-    isSharedDashboard: computed<boolean>(() => !!dashboard.value?.shared),
-    sharedScope: computed<DashboardScope|undefined>(() => dashboard.value?.scope),
-    selectedSharedScope: 'WORKSPACE' as DashboardScope,
-    showBadge: computed<boolean>(() => {
-        if (dashboard.value?.user_id) return true;
-        return state.isSharedDashboard;
-    }),
-    badgeType: computed<BadgeType>(() => 'subtle'),
-    badgeStyleType: computed<BadgeStyleType>(() => {
-        if (state.isPrivate) return 'gray150';
-        if (state.sharedScope === 'PROJECT') return 'primary3';
-        return 'indigo100';
-    }),
-    badgeText: computed(() => {
-        if (props.dashboardId?.startsWith('private')) return i18n.t('DASHBOARDS.ALL_DASHBOARDS.PRIVATE');
-        if (state.isSharedDashboard) {
-            if (storeState.isAdminMode) {
-                if (dashboard.value?.scope === 'PROJECT') {
-                    return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_ALL_PROJECTS');
-                }
-                return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_WORKSPACES');
-            }
-            if (state.sharedScope === 'PROJECT') return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_ALL_PROJECTS');
-            return i18n.t('DASHBOARDS.DETAIL.SHARED_BY_ADMIN');
-        }
-        return '';
-    }),
-    folderName: computed<string|undefined>(() => {
-        const _folderId = queryState.allDashboardItems.find((d) => d.dashboard_id === props.dashboardId)?.folder_id;
-        const folder = queryState.allFolderItems.find((d) => d.folder_id === _folderId);
-        return folder?.name;
-    }),
-});
-
-/* Event */
-const handleSelectItem = (item: MenuItem) => {
-    if (item.name === 'edit') dashboardPageControlStore.openEditNameModal(props.dashboardId);
-    if (item.name === 'clone') dashboardPageControlStore.openCloneModal(props.dashboardId);
-    if (item.name === 'move') dashboardPageControlStore.openMoveModal(props.dashboardId);
-    if (item.name === 'share') dashboardPageControlStore.openShareModal(props.dashboardId);
-    if (item.name === 'shareWithCode') dashboardPageControlStore.openShareWithCodeModal(props.dashboardId);
-    if (item.name === 'delete') dashboardPageControlStore.openDeleteModal(props.dashboardId);
-};
-</script>
-
-<template>
-    <div class="dashboard-detail-header">
-        <div v-if="state.folderName"
-             class="folder-name-wrapper"
-        >
-            <p-i name="ic_folder"
-                 width="1rem"
-                 height="1rem"
-                 :color="gray[600]"
-            />
-            <span class="folder-name">{{ state.folderName }}</span>
-        </div>
-        <p-heading-layout class="mb-6">
-            <template #heading>
-                <p-heading :title="dashboard?.name">
-                    <p-skeleton v-if="!dashboard?.name"
-                                width="20rem"
-                                height="1.5rem"
-                    />
-                    <template #title-right-extra>
-                        <p-badge v-if="state.showBadge"
-                                 :badge-type="state.badgeType"
-                                 :style-type="state.badgeStyleType"
-                                 class="mr-2"
-                        >
-                            <p-i v-if="state.isPrivate"
-                                 name="ic_lock-filled"
-                                 width="0.75rem"
-                                 height="0.75rem"
-                                 color="gray900"
-                                 class="mr-1"
-                            />
-                            {{ state.badgeText }}
-                        </p-badge>
-                        <p-select-dropdown class="dashboard-setting-dropdown"
-                                           style-type="tertiary-icon-button"
-                                           button-icon="ic_ellipsis-horizontal"
-                                           size="sm"
-                                           :menu="getControlMenuItems(props.dashboardId)"
-                                           :selected="[]"
-                                           use-fixed-menu-style
-                                           reset-selection-on-menu-close
-                                           @select="handleSelectItem"
-                        />
-                        <dashboard-labels-button class="label-button"
-                                                 :dashboard-id="props.dashboardId"
-                        />
-                    </template>
-                </p-heading>
-            </template>
-            <template v-if="dashboard?.version !== '1.0'"
-                      #extra
-            >
-                <dashboard-control-buttons v-if="isManageable"
-                                           :dashboard-id="props.dashboardId"
-                                           :name="dashboard?.name"
-                />
-            </template>
-        </p-heading-layout>
-        <p v-if="props.templateName"
-           class="template-name"
-        >
-            {{ props.templateName }}
-        </p>
-    </div>
-</template>
-
-<style lang="postcss" scoped>
-.dashboard-detail-header {
-    margin-bottom: 0.75rem;
-    .folder-name-wrapper {
-        display: flex;
-        align-items: center;
-        .folder-name {
-            @apply text-paragraph-sm text-gray-600;
-            margin-left: 0.125rem;
-        }
-    }
-    .template-name {
-        @apply text-paragraph-sm text-gray-500;
-        margin-left: 2.5rem;
-    }
-    .label-button {
-        display: inline-flex;
-        margin-left: 0.5rem;
-    }
-}
-.select-card-wrapper {
-    @apply grid grid-cols-12;
-    gap: 0.5rem;
-    .p-select-card {
-        @apply col-span-6;
-    }
-}
-</style>
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 be1ebd481e..cd4d44671e 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, useQueryClient } from '@tanstack/vue-query';
+import { useQueryClient } from '@tanstack/vue-query';
 
 import {
     PButtonModal, PFieldGroup, PI, PSelectDropdown,
@@ -11,14 +11,6 @@ import {
 import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 
 import type { DashboardChangeFolderParams } from '@/api-clients/dashboard/_types/dashboard-type';
-import type {
-    PrivateDashboardChangeFolderParameters,
-} from '@/api-clients/dashboard/private-dashboard/schema/api-verbs/change-folder';
-import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
-import type {
-    PublicDashboardChangeFolderParameters,
-} from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/change-folder';
-import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
 import { i18n } from '@/translations';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
@@ -27,14 +19,12 @@ import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { useDashboardChangeFolderMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-change-folder-mutation';
 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';
 
 
-
-
-type DashboardModel = PrivateFolderModel | PublicFolderModel;
 interface Props {
     visible: boolean;
     dashboardId: string;
@@ -52,7 +42,6 @@ const dashboardPageControlStore = useDashboardPageControlStore();
 const queryClient = useQueryClient();
 const {
     keys,
-    api,
 } = useDashboardQuery();
 const {
     publicFolderList,
@@ -95,30 +84,20 @@ const state = reactive({
 });
 
 /* Api */
-const changeFolderFn = (params: PrivateDashboardChangeFolderParameters | PublicDashboardChangeFolderParameters): Promise<DashboardModel> => {
-    const _isPrivate = props.dashboardId.startsWith('private');
-    if (_isPrivate) {
-        return api.privateDashboardAPI.changeFolder(params as PrivateDashboardChangeFolderParameters);
-    }
-    return api.publicDashboardAPI.changeFolder(params as PublicDashboardChangeFolderParameters);
-};
-const { mutate: changeFolder } = useMutation(
-    {
-        mutationFn: changeFolderFn,
-        onSuccess: () => {
-            showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_MOVE_DASHBOARD'), '');
-            const isPrivate = props.dashboardId.startsWith('private');
-            const dashboardListQueryKey = isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
-            queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
-        },
-        onError: (e) => {
-            showErrorMessage(i18n.t('DASHBOARDS.DETAIL.ALT_E_MOVE_DASHBOARD'), e);
-        },
-        onSettled: () => {
-            state.proxyVisible = false;
-        },
+const { mutate: changeFolder } = useDashboardChangeFolderMutation({
+    onSuccess: () => {
+        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_MOVE_DASHBOARD'), '');
+        const isPrivate = props.dashboardId.startsWith('private');
+        const dashboardListQueryKey = isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
+        queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
     },
-);
+    onError: (e) => {
+        showErrorMessage(i18n.t('DASHBOARDS.DETAIL.ALT_E_MOVE_DASHBOARD'), e);
+    },
+    onSettled: () => {
+        state.proxyVisible = false;
+    },
+});
 
 /* Event */
 const handleFormConfirm = async () => {
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 a1abf649b3..d04b6a0553 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModal.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, reactive, watch } from 'vue';
-import { useRoute } from 'vue-router/composables';
 
 import { useMutation, useQueryClient } from '@tanstack/vue-query';
 import { cloneDeep } from 'lodash';
@@ -10,47 +9,38 @@ import {
 } from '@cloudforet/mirinae';
 
 import type { DashboardGlobalVariable } from '@/api-clients/dashboard/_types/dashboard-global-variable-type';
+import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
 import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
 import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
 import { i18n } from '@/translations';
 
-import { useAppContextStore } from '@/store/app-context/app-context-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
-import { useProxyValue } from '@/common/composables/proxy-state';
 import LSBCollapsibleMenuItem from '@/common/modules/navigations/lsb/modules/LSBCollapsibleMenuItem.vue';
 
 import DashboardManageVariableImportModalTree
-    from '@/services/dashboards/components/dashboard-detail/DashboardManageVariableImportModalTree.vue';
-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';
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardManageVariableImportModalTree.vue';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { getOrderedGlobalVariables } from '@/services/_shared/dashboard/dashboard-detail/helpers/dashboard-global-variables-helper';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
 
 
 interface Props {
-    visible: boolean;
+    dashboardId: string;
+    dashboardItems?: Array<DashboardModel>;
+    folderItems?: Array<DashboardFolderModel>;
 }
-const appContextStore = useAppContextStore();
 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,
-} = useDashboardFolderQuery();
+const props = withDefaults(defineProps<Props>(), {
+    dashboardItems: () => [],
+    folderItems: () => [],
+});
+const dashboardDetailStore = useDashboardDetailInfoStore();
+const dashboardDetailState = dashboardDetailStore.state;
+const dashboardId = computed(() => props.dashboardId);
 
 const {
     dashboard,
@@ -61,27 +51,15 @@ const {
 });
 const queryClient = useQueryClient();
 
-const storeState = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-});
-
 const state = reactive({
-    proxyVisible: useProxyValue<boolean>('visible', props, emit),
     currentDashboardId: computed<string>(() => dashboardId.value || ''),
     currentDashboardVariables: computed<DashboardGlobalVariable[]>(() => Object.values(dashboard.value?.vars_schema?.properties ?? {})),
     keyword: '',
     selectedDashboardId: '' as string|undefined,
-    publicDashboardItems: computed<PublicDashboardModel[]>(() => {
-        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0' && d.dashboard_id !== state.currentDashboardId);
-        if (storeState.isAdminMode) return _v2DashboardItems;
-        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-    }),
-    privateDashboardItems: computed<PrivateDashboardModel[]>(() => privateDashboardList.value.filter((d) => d.version !== '1.0' && d.dashboard_id !== state.currentDashboardId)),
-    publicFolderItems: computed(() => {
-        if (storeState.isAdminMode) return publicFolderList.value;
-        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-    }),
-    privateFolderItems: computed(() => privateFolderList.value),
+    publicDashboardItems: computed<PublicDashboardModel[]>(() => props.dashboardItems.filter((d) => d.dashboard_id.startsWith('public') && d.dashboard_id !== state.currentDashboardId)),
+    privateDashboardItems: computed<PrivateDashboardModel[]>(() => props.dashboardItems.filter((d) => d.dashboard_id.startsWith('private') && d.dashboard_id !== state.currentDashboardId)),
+    publicFolderItems: computed<DashboardFolderModel[]>(() => props.folderItems.filter((d) => d.folder_id.startsWith('public'))),
+    privateFolderItems: computed<DashboardFolderModel[]>(() => props.folderItems.filter((d) => d.folder_id.startsWith('private'))),
     allDashboardItems: computed<PrivateDashboardModel[]>(() => [...state.publicDashboardItems, ...state.privateDashboardItems]),
     selectedDashboardVariables: computed<DashboardGlobalVariable[]>(() => {
         const selectedDashboard = state.allDashboardItems.find((item) => item.dashboard_id === state.selectedDashboardId);
@@ -113,7 +91,7 @@ const { mutate } = useMutation(
             ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.DETAIL.VARIABLES.ALT_E_UPDATE_DASHBOARD_VARS_SCHEMA'));
         },
         onSettled() {
-            state.proxyVisible = false;
+            dashboardDetailStore.setVariableImportModalVisible(false);
         },
     },
 );
@@ -146,6 +124,9 @@ const handleConfirmImportVariables = () => {
         },
     });
 };
+const handleUpdateVariableImportModalVisible = (visible: boolean) => {
+    dashboardDetailStore.setVariableImportModalVisible(visible);
+};
 
 const isDuplicatedVariableName = (variable: DashboardGlobalVariable): boolean => state.currentDashboardVariables.some((currentVariable) => currentVariable.name === variable.name
     || currentVariable.key === variable.key);
@@ -166,8 +147,9 @@ watch(() => state.selectedDashboardId, () => {
 <template>
     <p-button-modal class="dashboard-manage-variable-import-modal"
                     :header-title="$t('DASHBOARDS.DETAIL.VARIABLES.IMPORT_MODAL_HEADER')"
-                    :visible.sync="state.proxyVisible"
+                    :visible="dashboardDetailState.variableImportModalVisible"
                     :disabled="!state.selectedVariableKeys.length"
+                    @update:visible="handleUpdateVariableImportModalVisible"
                     @confirm="handleConfirmImportVariables"
     >
         <template #body>
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 d209a3af19..ca1f3ec1f3 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, useQueryClient } from '@tanstack/vue-query';
+import { 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 { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
+import { useDashboardUpdateMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-update-mutation';
 import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 
 
@@ -41,12 +41,6 @@ const {
     keys,
 } = useDashboardQuery();
 const queryClient = useQueryClient();
-const {
-    fetcher,
-    keys: dashboardDetailKeys,
-} = useDashboardGetQuery({
-    dashboardId: computed(() => props.dashboardId),
-});
 const route = useRoute();
 
 const appContextStore = useAppContextStore();
@@ -92,29 +86,22 @@ const state = reactive({
     isDetailPage: computed(() => route.params.dashboardId !== undefined),
 });
 
-const { mutate, isPending: loading } = useMutation(
-    {
-        mutationFn: fetcher.updateDashboardFn,
-        onSuccess: (_dashboard: DashboardModel) => {
-            const isPrivate = _dashboard.dashboard_id.startsWith('private');
-            const dashboardListQueryKey = isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
-            queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
-            if (state.isDetailPage) {
-                const dashboardQueryKey = isPrivate ? dashboardDetailKeys.privateDashboardGetQueryKey : dashboardDetailKeys.publicDashboardGetQueryKey;
-                queryClient.invalidateQueries({ queryKey: dashboardQueryKey.value });
-            }
-        },
-        onError: (e) => {
-            ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.FORM.ALT_E_EDIT_NAME'));
-        },
-        onSettled() {
-            state.proxyVisible = false;
-        },
+const { mutate: updateDashboard, isPending: loading } = useDashboardUpdateMutation({
+    onSuccess: (_dashboard: DashboardModel) => {
+        const isPrivate = _dashboard.dashboard_id.startsWith('private');
+        const dashboardListQueryKey = isPrivate ? keys.privateDashboardListQueryKey : keys.publicDashboardListQueryKey;
+        queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.FORM.ALT_E_EDIT_NAME'));
     },
-);
+    onSettled() {
+        state.proxyVisible = false;
+    },
+});
 
 const handleConfirm = async () => {
-    mutate({
+    updateDashboard({
         dashboard_id: props.dashboardId,
         name: _name.value,
     });
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 92708e0b85..324dccbecd 100644
--- a/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-detail/DashboardShareWithCodeModal.vue
@@ -17,9 +17,9 @@ import { copyAnyData } from '@/lib/helper/copy-helper';
 
 import { useProxyValue } from '@/common/composables/proxy-state';
 
+import { getSharedDashboardLayouts } from '@/services/_shared/dashboard/core/helpers/dashboard-layout-template-helper';
+import { useDashboardWidgetListQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-widget-list-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';
 
 
diff --git a/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTree.vue b/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTree.vue
index aaa345db76..c7519136f1 100644
--- a/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTree.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTree.vue
@@ -120,13 +120,13 @@ const handleSelectTreeItem = (node: TreeNode<DashboardTreeDataType>, value: [boo
                 state.proxySelectedIdMap[child.id] = _isSelected;
             });
         }
-    } else if (node.data.folderId) {
+    } else if (node.data.folder_id) {
         if (_isSelected) {
-            state.proxySelectedIdMap[node.data.folderId] = true;
+            state.proxySelectedIdMap[node.data.folder_id] = true;
         } else {
-            const _folderNode = props.dashboardTreeData.find((n) => n.data.id === node.data.folderId);
+            const _folderNode = props.dashboardTreeData.find((n) => n.data.id === node.data.folder_id);
             if (_folderNode?.children?.every((child) => !state.proxySelectedIdMap[child.id])) {
-                state.proxySelectedIdMap[node.data.folderId] = false;
+                state.proxySelectedIdMap[node.data.folder_id] = false;
             }
         }
     }
diff --git a/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTreeItem.vue b/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTreeItem.vue
index 7448012044..ddc61189e8 100644
--- a/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTreeItem.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-folder/DashboardFolderTreeItem.vue
@@ -10,6 +10,8 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 import type { QueryTag } from '@cloudforet/mirinae/types/controls/search/query-search-tags/type';
 import type { TreeNode } from '@cloudforet/mirinae/types/data-display/tree/tree-view/type';
 
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
 import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
 import { i18n } from '@/translations';
 
@@ -23,13 +25,13 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { gray, indigo, violet } from '@/styles/colors';
 
-import { useDashboardControlMenuItems } from '@/services/dashboards/composables/use-dashboard-control-menu-items';
+import { useDashboardControlMenuHelper } from '@/services/_shared/dashboard/core/composables/use-dashboard-control-menu-helper';
+import { isDashboardOrFolderManageable } from '@/services/dashboards/helpers/dashboard-manageable-helper';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardTreeDataType } from '@/services/dashboards/types/dashboard-folder-type';
 
-
 interface Props {
     treeData: TreeNode<DashboardTreeDataType>;
     // for dashboard create page
@@ -48,10 +50,7 @@ const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
 const userStore = useUserStore();
 
-const { getControlMenuItems } = useDashboardControlMenuItems({
-    isAdminMode: computed(() => storeState.isAdminMode),
-    isWorkspaceOwner: computed(() => storeState.isWorkspaceOwner),
-});
+const { getControlDashboardMenuItems, getControlFolderMenuItems } = useDashboardControlMenuHelper();
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
@@ -67,24 +66,52 @@ const state = reactive({
 
 /* Util */
 const getSharedColor = (node: TreeNode<DashboardTreeDataType>): string|undefined => {
-    if (node.data.shared) {
-        if (node.data.scope === 'PROJECT') return violet[500];
+    if (node.data?.shared) {
+        if (node.data?.scope === 'PROJECT') return violet[500];
         return indigo[500];
     }
     return undefined;
 };
 const getSharedText = (node: TreeNode<DashboardTreeDataType>): TranslateResult|undefined => {
-    if (node.data.shared) {
+    if (node.data?.shared) {
         if (storeState.isAdminMode) {
-            if (node.data.scope === 'PROJECT') return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_ALL_PROJECTS');
+            if (node.data?.scope === 'PROJECT') return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_ALL_PROJECTS');
             return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_WORKSPACES');
         }
-        if (node.data.scope === 'PROJECT') return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_ALL_PROJECTS');
+        if (node.data?.scope === 'PROJECT') return i18n.t('DASHBOARDS.DETAIL.SHARED_TO_ALL_PROJECTS');
         return i18n.t('DASHBOARDS.DETAIL.SHARED_BY_ADMIN');
     }
     return undefined;
 };
 
+const getControlMenuItems = (node: TreeNode<DashboardTreeDataType>): MenuItem[] => {
+    if (node.data.type === 'DASHBOARD') {
+        const _dashboard = node.data as DashboardModel;
+        const _isPrivate = _dashboard.dashboard_id?.startsWith('private') || false;
+        const _manageable = isDashboardOrFolderManageable(
+            storeState.isAdminMode,
+            storeState.isWorkspaceOwner,
+            _isPrivate,
+            _dashboard?.shared,
+            _dashboard?.resource_group,
+        );
+        return getControlDashboardMenuItems(node.data.id, _manageable, _dashboard);
+    }
+    if (node.data.type === 'FOLDER') {
+        const _folder = node.data as FolderModel;
+        const _isPrivate = _folder.folder_id?.startsWith('private') || false;
+        const _manageable = isDashboardOrFolderManageable(
+            storeState.isAdminMode,
+            storeState.isWorkspaceOwner,
+            _isPrivate,
+            _folder?.shared,
+            _folder?.resource_group,
+        );
+        return getControlFolderMenuItems(node.data.id, _manageable, _folder);
+    }
+    return [];
+};
+
 /* Event */
 const handleClickTreeItem = (): void => {
     if (props.treeData.data.type === 'FOLDER') {
@@ -165,7 +192,7 @@ const handleSelectControlButton = (id: string, item: MenuItem) => {
                         >
                             <p-select-dropdown style-type="tertiary-icon-button"
                                                button-icon="ic_ellipsis-horizontal"
-                                               :menu="getControlMenuItems(node.data.id)"
+                                               :menu="getControlMenuItems(node)"
                                                :selected="[]"
                                                size="sm"
                                                menu-position="left"
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 8708e301c6..b037ca6ec6 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleCloneModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleCloneModal.vue
@@ -42,9 +42,9 @@ import { useProxyValue } from '@/common/composables/proxy-state';
 
 import { gray } from '@/styles/colors';
 
+import { getSharedDashboardLayouts } from '@/services/_shared/dashboard/core/helpers/dashboard-layout-template-helper';
 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';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardDataTableItem } from '@/services/dashboards/types/dashboard-folder-type';
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 4263b0589e..2caecea85c 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleDeleteModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleDeleteModal.vue
@@ -1,22 +1,17 @@
 <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';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 
 import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
 
 import DeleteModal from '@/common/components/modals/DeleteModal.vue';
 import ErrorHandler from '@/common/composables/error/errorHandler';
 import { useProxyValue } from '@/common/composables/proxy-state';
-import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
-import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { gray } from '@/styles/colors';
 
@@ -26,9 +21,7 @@ import { getSelectedDataTableItems } from '@/services/dashboards/helpers/dashboa
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardDataTableItem } from '@/services/dashboards/types/dashboard-folder-type';
 
-
-
-
+import { useDashboardBundleDeleteWorkflow } from '../../composables/use-dashboard-bundle-delete-workflow';
 
 
 /* Cases
@@ -53,24 +46,16 @@ const emit = defineEmits<{(e: 'update:visible', visible: boolean): void,
 const appContextStore = useAppContextStore();
 const dashboardPageControlStore = useDashboardPageControlStore();
 const dashboardPageControlState = dashboardPageControlStore.state;
-const favoriteStore = useFavoriteStore();
-const favoriteGetters = favoriteStore.getters;
-const userWorkspaceStore = useUserWorkspaceStore();
 
 /* Query */
 const {
     publicDashboardList,
     privateDashboardList,
-    api: dashboardApi,
-    keys: dashboardKeys,
 } = useDashboardQuery();
 const {
     publicFolderList,
     privateFolderList,
-    api: folderApi,
-    keys: folderKeys,
 } = useDashboardFolderQuery();
-const queryClient = useQueryClient();
 
 const queryState = reactive({
     publicDashboardItems: computed(() => {
@@ -90,11 +75,9 @@ const queryState = reactive({
 
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-    currentWorkspaceId: computed(() => userWorkspaceStore.getters.currentWorkspaceId),
 });
 
 const state = reactive({
-    loading: false,
     proxyVisible: useProxyValue<boolean>('visible', props, emit),
     modalTableItems: computed<DashboardDataTableItem[]>(() => {
         let _selectedIdMap = dashboardPageControlState.selectedPublicIdMap;
@@ -113,61 +96,21 @@ const state = reactive({
 });
 
 /* Api */
-const deleteFolder = async (folderId: string): Promise<boolean> => {
-    const fetcher = folderId.startsWith('private')
-        ? folderApi.privateFolderAPI.delete
-        : folderApi.publicFolderAPI.delete;
-    try {
-        await fetcher({ folder_id: folderId });
-        return true;
-    } catch (e) {
-        return false;
-    }
-};
-const deleteDashboard = async (dashboardId: string): Promise<boolean> => {
-    const fetcher = dashboardId.startsWith('private')
-        ? dashboardApi.privateDashboardAPI.delete
-        : dashboardApi.publicDashboardAPI.delete;
-    try {
-        await fetcher({ dashboard_id: dashboardId });
-        const isFavoriteItem = favoriteGetters.dashboardItems.find((item) => item.itemId === dashboardId);
-        if (isFavoriteItem) {
-            await favoriteStore.deleteFavorite({
-                itemType: FAVORITE_TYPE.DASHBOARD,
-                workspaceId: storeState.currentWorkspaceId || '',
-                itemId: dashboardId,
-            });
-        }
-        return true;
-    } catch (e) {
-        return false;
-    }
-};
+const { mutate: deleteBundleFolderOrDashboard, isPending: bundleLoading } = useDashboardBundleDeleteWorkflow();
 
 /* Event */
 const handleDeleteConfirm = async () => {
-    state.loading = true;
-    const _deletePromises: Promise<boolean>[] = [];
-    state.modalTableItems.forEach((item) => {
-        if (!item.id) return;
-        if (item.type === 'DASHBOARD') {
-            _deletePromises.push(deleteDashboard(item.id));
-        } else {
-            _deletePromises.push(deleteFolder(item.id));
-        }
-    });
-    const _results = await Promise.all(_deletePromises);
-    if (_results.every((r) => r)) {
+    const bundleItems = state.modalTableItems.map((item) => ({
+        id: item.id,
+        type: item.type,
+    }));
+    const _results = await deleteBundleFolderOrDashboard(bundleItems);
+    if (_results) {
         showSuccessMessage(i18n.t('DASHBOARDS.ALL_DASHBOARDS.ALT_S_DELETE_DASHBOARD'), '');
     } else {
         ErrorHandler.handleRequestError(new Error('Delete failed'), i18n.t('DASHBOARDS.ALL_DASHBOARDS.ALT_E_DELETE_DASHBOARD'));
     }
-    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;
 };
 </script>
@@ -176,8 +119,8 @@ const handleDeleteConfirm = async () => {
     <delete-modal :visible.sync="state.proxyVisible"
                   size="md"
                   :header-title="$t('DASHBOARDS.ALL_DASHBOARDS.DELETE_DASHBOARD')"
-                  :loading="state.loading"
-                  :disabled="state.loading"
+                  :loading="bundleLoading"
+                  :disabled="bundleLoading"
                   :enable-scroll="true"
                   class="dashboard-folder-delete-modal"
                   @confirm="handleDeleteConfirm"
@@ -185,7 +128,7 @@ const handleDeleteConfirm = async () => {
         <template #delete-modal-body>
             <p-data-table :items="state.modalTableItems"
                           :fields="DELETE_TABLE_FIELDS"
-                          :loading="state.loading"
+                          :loading="bundleLoading"
             >
                 <template #col-name-format="{item}">
                     <div class="table-column">
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 cbe5dad421..4e3c26608b 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleShareModal.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardBundleShareModal.vue
@@ -2,18 +2,14 @@
 import { computed, reactive, watch } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import { useMutation, useQueryClient } from '@tanstack/vue-query';
+import { useQueryClient } from '@tanstack/vue-query';
 
 import {
     PDataTable, PI, PButtonModal, PRadioGroup, PRadio, PFieldGroup,
 } from '@cloudforet/mirinae';
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { PublicDashboardShareParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/share';
-import type { PublicDashboardUnshareParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/unshare';
 import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
-import type { PublicFolderShareParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/share';
-import type { PublicFolderUnshareParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/unshare';
 import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
 import { i18n } from '@/translations';
 
@@ -26,6 +22,8 @@ import { useProxyValue } from '@/common/composables/proxy-state';
 
 import { gray } from '@/styles/colors';
 
+import { useDashboardFolderShareMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-folder-share-mutation';
+import { useDashboardShareMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-share-mutation';
 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';
@@ -33,7 +31,6 @@ import type { DashboardDataTableItem } from '@/services/dashboards/types/dashboa
 
 
 
-
 const TABLE_FIELDS = [
     { name: 'name', label: 'Name' },
     { name: 'location', label: 'Location' },
@@ -57,13 +54,11 @@ const dashboardPageControlStore = useDashboardPageControlStore();
 const {
     publicDashboardList,
     privateDashboardList,
-    api: dashboardApi,
     keys: dashboardKeys,
 } = useDashboardQuery();
 const {
     publicFolderList,
     privateFolderList,
-    api: folderApi,
     keys: folderKeys,
 } = useDashboardFolderQuery();
 const queryClient = useQueryClient();
@@ -188,23 +183,12 @@ const unshareDashboard = () => {
         dashboard_id: props.dashboardId || '',
     });
 };
-const folderSharefetcher = (params: PublicFolderShareParameters|PublicFolderUnshareParameters) => {
-    if (!state.isShared) {
-        return folderApi.publicFolderAPI.share(params as PublicFolderShareParameters);
-    }
-    return folderApi.publicFolderAPI.unshare(params as PublicFolderUnshareParameters);
-};
-const dashboardShareFetcher = (params: PublicDashboardShareParameters|PublicDashboardUnshareParameters) => {
-    if (!state.isShared) {
-        return dashboardApi.publicDashboardAPI.share(params as PublicDashboardShareParameters);
-    }
-    return dashboardApi.publicDashboardAPI.unshare(params as PublicDashboardUnshareParameters);
-};
 
-const { mutate: folderShareMutate, isPending: folderLoading } = useMutation({
-    mutationFn: folderSharefetcher,
+const { mutate: folderShareMutate, isPending: folderLoading } = useDashboardFolderShareMutation({
+    isShared: computed(() => state.isShared),
     onSuccess: () => {
         queryClient.invalidateQueries({ queryKey: folderKeys.publicFolderListQueryKey.value });
+        queryClient.invalidateQueries({ queryKey: dashboardKeys.privateDashboardListQueryKey.value });
         if (state.isShared) showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_SHARE_DASHBOARD'), '');
         else showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_UNSHARE_DASHBOARD'), '');
     },
@@ -218,8 +202,9 @@ const { mutate: folderShareMutate, isPending: folderLoading } = useMutation({
     },
 });
 
-const { mutate: dashboardShareMutate, isPending: dashboardLoading } = useMutation({
-    mutationFn: dashboardShareFetcher,
+
+const { mutate: dashboardShareMutate, isPending: dashboardLoading } = useDashboardShareMutation({
+    isShared: computed(() => state.isShared),
     onSuccess: () => {
         queryClient.invalidateQueries({ queryKey: dashboardKeys.publicDashboardListQueryKey.value });
         if (state.isShared) showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_SHARE_DASHBOARD'), '');
diff --git a/apps/web/src/services/dashboards/components/dashboard-main/DashboardLSBTree.vue b/apps/web/src/services/dashboards/components/dashboard-main/DashboardLSBTree.vue
index 8de6e6ff66..705a089852 100644
--- a/apps/web/src/services/dashboards/components/dashboard-main/DashboardLSBTree.vue
+++ b/apps/web/src/services/dashboards/components/dashboard-main/DashboardLSBTree.vue
@@ -9,6 +9,7 @@ import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/t
 import type { TreeNode, TreeDisplayMap } from '@cloudforet/mirinae/types/data-display/tree/tree-view/type';
 
 import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
 import type { PrivateFolderModel } from '@/api-clients/dashboard/private-folder/schema/model';
 import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
 import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
@@ -21,15 +22,14 @@ import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 
 import { gray } from '@/styles/colors';
 
-import { useDashboardControlMenuItems } from '@/services/dashboards/composables/use-dashboard-control-menu-items';
+import { useDashboardControlMenuHelper } from '@/services/_shared/dashboard/core/composables/use-dashboard-control-menu-helper';
+import { isDashboardOrFolderManageable } from '@/services/dashboards/helpers/dashboard-manageable-helper';
 import { getDashboardTreeData } from '@/services/dashboards/helpers/dashboard-tree-data-helper';
 import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
 import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
 import { useDashboardPageControlStore } from '@/services/dashboards/stores/dashboard-page-control-store';
 import type { DashboardTreeDataType } from '@/services/dashboards/types/dashboard-folder-type';
 
-
-
 interface Props {
     dashboards: DashboardModel[];
     folders: (PrivateFolderModel|PublicFolderModel)[];
@@ -49,10 +49,9 @@ const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
     isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
 });
-const { getControlMenuItems } = useDashboardControlMenuItems({
-    isAdminMode: computed(() => storeState.isAdminMode),
-    isWorkspaceOwner: computed(() => storeState.isWorkspaceOwner),
-});
+
+const { getControlDashboardMenuItems, getControlFolderMenuItems } = useDashboardControlMenuHelper();
+
 const state = reactive({
     currentParentPathIds: [] as string[],
     currentFolderId: undefined as string|undefined,
@@ -79,6 +78,36 @@ const init = (dashboardId?: string, _onMounted?: boolean) => {
     }
 };
 
+const getControlMenuItems = (node: TreeNode<DashboardTreeDataType>): MenuItem[] => {
+    if (node.data.type === 'DASHBOARD') {
+        const _dashboard = node.data as DashboardModel;
+        const _isPrivate = _dashboard.dashboard_id?.startsWith('private') || false;
+        const _manageable = isDashboardOrFolderManageable(
+            storeState.isAdminMode,
+            storeState.isWorkspaceOwner,
+            _isPrivate,
+            _dashboard?.shared,
+            _dashboard?.resource_group,
+        );
+        return getControlDashboardMenuItems(node.data.id, _manageable, _dashboard);
+    }
+    if (node.data.type === 'FOLDER') {
+        const _folder = node.data as FolderModel;
+        const _isPrivate = _folder.folder_id?.startsWith('private') || false;
+        const _manageable = isDashboardOrFolderManageable(
+            storeState.isAdminMode,
+            storeState.isWorkspaceOwner,
+            _isPrivate,
+            _folder?.shared,
+            _folder?.resource_group,
+        );
+        return getControlFolderMenuItems(node.data.id, _manageable, _folder);
+    }
+    return [];
+};
+
+
+
 /* Event */
 const handleClickTreeItem = (node: TreeNode<DashboardTreeDataType>) => {
     if (node.data.type === 'FOLDER') {
@@ -140,7 +169,7 @@ onMounted(() => {
                     <div class="hover-contents-wrapper">
                         <p-select-dropdown style-type="tertiary-icon-button"
                                            button-icon="ic_ellipsis-horizontal"
-                                           :menu="getControlMenuItems(node.data.id)"
+                                           :menu="getControlMenuItems(node)"
                                            :selected="[]"
                                            size="sm"
                                            menu-position="left"
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-bundle-delete-workflow.ts b/apps/web/src/services/dashboards/composables/use-dashboard-bundle-delete-workflow.ts
new file mode 100644
index 0000000000..5f3cb0c73a
--- /dev/null
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-bundle-delete-workflow.ts
@@ -0,0 +1,86 @@
+import { computed } from 'vue';
+
+import { useQueryClient } from '@tanstack/vue-query';
+
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
+
+import { useFavoriteStore } from '@/common/modules/favorites/favorite-button/store/favorite-store';
+import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
+
+import { useDashboardDeleteMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-delete-mutation';
+import { useDashboardFolderDeleteMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-folder-delete-mutation';
+
+export const useDashboardBundleDeleteWorkflow = () => {
+    const queryClient = useQueryClient();
+    const favoriteStore = useFavoriteStore();
+    const favoriteGetters = favoriteStore.getters;
+    const userWorkspaceStore = useUserWorkspaceStore();
+
+    const currentWorkspaceId = computed(() => userWorkspaceStore.getters.currentWorkspaceId);
+
+
+    const { key: publicDashboardListQueryKey } = useServiceQueryKey('dashboard', 'public-dashboard', 'list');
+    const { key: privateDashboardListQueryKey } = useServiceQueryKey('dashboard', 'private-dashboard', 'list');
+    const { key: publicFolderListQueryKey } = useServiceQueryKey('dashboard', 'public-folder', 'list');
+    const { key: privateFolderListQueryKey } = useServiceQueryKey('dashboard', 'private-folder', 'list');
+
+    const { mutateAsync: deleteDashboard, isPending: dashboardLoading } = useDashboardDeleteMutation({
+        onSuccess: async (_, variables) => {
+            const isFavoriteItem = favoriteGetters.dashboardItems.find((item) => item.itemId === variables.dashboard_id);
+            if (isFavoriteItem) {
+                await favoriteStore.deleteFavorite({
+                    itemType: FAVORITE_TYPE.DASHBOARD,
+                    workspaceId: currentWorkspaceId.value || '',
+                    itemId: variables.dashboard_id,
+                });
+            }
+        },
+    });
+    const { mutateAsync: deleteFolder, isPending: folderLoading } = useDashboardFolderDeleteMutation({});
+
+    const deleteBundleFolderOrDashboard = async (bundleItems: {
+        id: string;
+        type: 'DASHBOARD' | 'FOLDER';
+    }[]) => {
+        const dashboardItems = bundleItems.filter((item) => item.type === 'DASHBOARD');
+        const folderItems = bundleItems.filter((item) => item.type === 'FOLDER');
+        const isPrivateFolderInclude = folderItems.some((item) => item.id.startsWith('private'));
+        const isPublicFolderInclude = folderItems.some((item) => !item.id.startsWith('private'));
+        const isPrivateDashboardInclude = dashboardItems.some((item) => item.id.startsWith('private'));
+        const isPublicDashboardInclude = dashboardItems.some((item) => !item.id.startsWith('private'));
+
+        const dashboardResults = await Promise.allSettled(
+            dashboardItems.map((item) => deleteDashboard({ dashboard_id: item.id })),
+        );
+
+        const dashboardFailed = dashboardResults.filter((r) => r.status === 'rejected');
+        const isDashboardDeleteAllSuccess = dashboardFailed.length === 0;
+
+        if (isPrivateDashboardInclude) queryClient.invalidateQueries({ queryKey: privateDashboardListQueryKey.value });
+        if (isPublicDashboardInclude) queryClient.invalidateQueries({ queryKey: publicDashboardListQueryKey.value });
+        if (!isDashboardDeleteAllSuccess) {
+            throw new Error('Dashboard delete failed');
+        }
+
+        const folderResults = await Promise.allSettled(
+            folderItems.map((item) => deleteFolder({ folder_id: item.id })),
+        );
+        const folderFailed = folderResults.filter((r) => r.status === 'rejected');
+        const isFolderDeleteAllSuccess = folderFailed.length === 0;
+
+        if (isPrivateFolderInclude) queryClient.invalidateQueries({ queryKey: privateFolderListQueryKey.value });
+        if (isPublicFolderInclude) queryClient.invalidateQueries({ queryKey: publicFolderListQueryKey.value });
+        if (!isFolderDeleteAllSuccess) {
+            throw new Error('Folder delete failed');
+        }
+
+        return true;
+    };
+
+    return {
+        mutate: deleteBundleFolderOrDashboard,
+        isPending: computed(() => dashboardLoading.value || folderLoading.value),
+    };
+};
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
deleted file mode 100644
index 05b375b7e3..0000000000
--- a/apps/web/src/services/dashboards/composables/use-dashboard-control-menu-items.ts
+++ /dev/null
@@ -1,174 +0,0 @@
-import { toValue } from '@vueuse/core';
-import type { ComputedRef } from 'vue';
-import { reactive, computed } from 'vue';
-
-import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
-
-import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
-import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
-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';
-
-
-
-interface UseDashboardControlMenuItems {
-    isAdminMode: ComputedRef<boolean>;
-    isWorkspaceOwner: ComputedRef<boolean>;
-}
-interface UseDashboardControlMenuItemsReturn {
-    getControlMenuItems: (id: string) => ComputedRef<MenuItem[]>|MenuItem[];
-}
-
-export const useDashboardControlMenuItems = ({
-    isAdminMode, isWorkspaceOwner,
-}: UseDashboardControlMenuItems): UseDashboardControlMenuItemsReturn => {
-    const appContextStore = useAppContextStore();
-
-    /* Query */
-    const {
-        publicDashboardList,
-        privateDashboardList,
-    } = useDashboardQuery();
-    const {
-        publicFolderList,
-        privateFolderList,
-    } = useDashboardFolderQuery();
-
-    const queryState = reactive({
-        publicDashboardItems: computed(() => {
-            const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
-            if (appContextStore.getters.isAdminMode) return _v2DashboardItems;
-            return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-        }),
-        privateDashboardItems: computed(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
-        dashboardList: computed(() => [...queryState.publicDashboardItems, ...queryState.privateDashboardItems]),
-        publicFolderItems: computed(() => {
-            if (appContextStore.getters.isAdminMode) return publicFolderList.value;
-            return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
-        }),
-        privateFolderItems: computed(() => privateFolderList.value),
-        folderList: computed(() => [...queryState.publicFolderItems, ...queryState.privateFolderItems]),
-    });
-
-    const _getDashboardManageable = (dashboard: DashboardModel): boolean => {
-        if (dashboard.dashboard_id.startsWith('private')) return true;
-        if (isAdminMode.value) return true;
-        if (isWorkspaceOwner.value) {
-            return dashboard?.workspace_id !== '*';
-        }
-        return false;
-    };
-    const _getFolderManageable = (folder: FolderModel): boolean => {
-        if (folder.folder_id.startsWith('private')) return true;
-        if (isAdminMode.value) return true;
-        if (isWorkspaceOwner.value) {
-            return folder?.workspace_id !== '*';
-        }
-        return false;
-    };
-    const _getDashboardControlMenuItems = (dashboardId: string): ComputedRef<MenuItem[]>|MenuItem[] => {
-        const _isPrivate = dashboardId.startsWith('private');
-        const _dashboard = queryState.dashboardList.find((item) => item.dashboard_id === dashboardId);
-        if (!_dashboard) return [];
-
-        const _isDeprecated = _dashboard.version === '1.0';
-        const _isDashboardManageable = _getDashboardManageable(_dashboard);
-
-        if (!_isDashboardManageable) {
-            if (_isDeprecated) return [];
-            return computed(() => ([
-                {
-                    type: 'item', name: 'clone', label: i18n.t('DASHBOARDS.DETAIL.CLONE'), icon: 'ic_clone',
-                },
-            ]));
-        }
-        if (_isDeprecated) {
-            return computed(() => ([{
-                type: 'item', name: 'delete', label: i18n.t('DASHBOARDS.ALL_DASHBOARDS.DELETE'), icon: 'ic_delete',
-            }]));
-        }
-
-        const _isShared = !!_dashboard.shared;
-        const _shareMenuItems: MenuItem[] = [
-            {
-                type: 'item',
-                name: 'share',
-                label: _isShared ? i18n.t('DASHBOARDS.ALL_DASHBOARDS.UNSHARE_DASHBOARD') : i18n.t('DASHBOARDS.ALL_DASHBOARDS.SHARE_DASHBOARD'),
-                icon: 'ic_share',
-            },
-        ];
-        return computed(() => ([
-            {
-                type: 'item',
-                name: 'edit',
-                label: i18n.t('DASHBOARDS.ALL_DASHBOARDS.EDIT_NAME'),
-                icon: 'ic_edit-text',
-            },
-            {
-                type: 'item', name: 'clone', label: i18n.t('DASHBOARDS.DETAIL.CLONE'), icon: 'ic_clone',
-            },
-            {
-                type: 'item', name: 'move', label: i18n.t('DASHBOARDS.DETAIL.MOVE'), icon: 'ic_move',
-            },
-            { type: 'divider', name: 'divider' },
-            {
-                type: 'item', name: 'shareWithCode', label: i18n.t('DASHBOARDS.DETAIL.SHARE_WITH_CODE'), icon: 'ic_share-code',
-            },
-            ...(_isPrivate ? [] : _shareMenuItems),
-            { type: 'divider', name: 'divider' },
-            {
-                type: 'item', name: 'delete', label: i18n.t('DASHBOARDS.ALL_DASHBOARDS.DELETE'), icon: 'ic_delete',
-            },
-        ]));
-    };
-    const _getFolderControlMenuItems = (folderId: string): ComputedRef<MenuItem[]>|MenuItem[] => {
-        const _isPrivate = folderId.startsWith('private');
-        const _folder = queryState.folderList.find((item) => item.folder_id === folderId);
-        if (!_folder) return [];
-
-        const _isFolderManageable = _getFolderManageable(_folder);
-        if (!_isFolderManageable) {
-            return computed(() => ([
-                {
-                    type: 'item', name: 'clone', label: i18n.t('DASHBOARDS.DETAIL.CLONE'), icon: 'ic_clone',
-                },
-            ]));
-        }
-
-        const _isShared = !!_folder?.shared;
-        const _shareMenuItems: MenuItem[] = [
-            {
-                type: 'item',
-                name: 'share',
-                label: _isShared ? i18n.t('DASHBOARDS.ALL_DASHBOARDS.UNSHARE') : i18n.t('DASHBOARDS.ALL_DASHBOARDS.SHARE'),
-                icon: 'ic_share',
-            },
-        ];
-        return computed(() => ([
-            {
-                type: 'item', name: 'edit', label: i18n.t('DASHBOARDS.ALL_DASHBOARDS.EDIT_NAME'), icon: 'ic_edit-text',
-            },
-            {
-                type: 'item', name: 'clone', label: i18n.t('DASHBOARDS.DETAIL.CLONE'), icon: 'ic_clone',
-            },
-            { type: 'divider', name: 'divider' },
-            ...(_isPrivate ? [] : _shareMenuItems),
-            { type: 'divider', name: 'divider' },
-            {
-                type: 'item', name: 'delete', label: i18n.t('DASHBOARDS.ALL_DASHBOARDS.DELETE'), icon: 'ic_delete',
-            },
-        ]));
-    };
-    const getControlMenuItems = (id: string): ComputedRef<MenuItem[]>|MenuItem[] => {
-        if (id.includes('folder')) return toValue(_getFolderControlMenuItems(id));
-        return toValue(_getDashboardControlMenuItems(id));
-    };
-
-    return {
-        getControlMenuItems,
-    };
-};
diff --git a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts b/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
deleted file mode 100644
index b1573ac620..0000000000
--- a/apps/web/src/services/dashboards/composables/use-dashboard-manageable.ts
+++ /dev/null
@@ -1,45 +0,0 @@
-import type { ComputedRef } from 'vue';
-import { computed, reactive } from 'vue';
-import { useRoute } from 'vue-router/composables';
-
-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 { useDashboardGetQuery } from '@/services/dashboards/composables/use-dashboard-get-query';
-
-interface UseDashboardManageableOptions {
-    dashboardId: ComputedRef<string|undefined>;
-}
-
-interface UseDashboardManageableReturn {
-    isManageable: ComputedRef<boolean>;
-}
-
-export const useDashboardManageable = ({ dashboardId }: UseDashboardManageableOptions): UseDashboardManageableReturn => {
-    const appContextStore = useAppContextStore();
-    const userStore = useUserStore();
-    const route = useRoute();
-    const storeState = reactive({
-        isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-        isWorkspaceOwner: computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_OWNER),
-    });
-
-    const { dashboard } = useDashboardGetQuery({
-        dashboardId: computed(() => dashboardId.value),
-    });
-
-    const isManageable = computed(() => {
-        if (storeState.isAdminMode) return true;
-        if (dashboard.value?.dashboard_id.startsWith('private')) return true;
-        // TODO: implement this condition after project dashboard is implemented
-        if (!!route.params.id && !!route.params.dashboardId) return false;
-        if (storeState.isWorkspaceOwner) return true;
-        return false;
-    });
-
-    return {
-        isManageable,
-    };
-};
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 dab1ca745c..efd084819e 100644
--- a/apps/web/src/services/dashboards/composables/use-dashboard-query.ts
+++ b/apps/web/src/services/dashboards/composables/use-dashboard-query.ts
@@ -91,7 +91,7 @@ export const useDashboardQuery = (): UseDashboardQueryReturn => {
         if (_state.isAdminMode) {
             publicDashboardListApiQueryHelper.addFilter({ k: 'resource_group', v: 'DOMAIN', o: '=' });
         } else {
-            publicDashboardListApiQueryHelper.addFilter({ k: 'resource_group', v: ['WORKSPACE', 'DOMAIN'], o: '=' });
+            publicDashboardListApiQueryHelper.addFilter({ k: 'resource_group', v: ['WORKSPACE', 'DOMAIN'], o: '' });
         }
         _state.publicDashboardListApiQuery = publicDashboardListApiQueryHelper.data;
     }, { immediate: true });
diff --git a/apps/web/src/services/dashboards/helpers/dashboard-manageable-helper.ts b/apps/web/src/services/dashboards/helpers/dashboard-manageable-helper.ts
new file mode 100644
index 0000000000..9ccf376026
--- /dev/null
+++ b/apps/web/src/services/dashboards/helpers/dashboard-manageable-helper.ts
@@ -0,0 +1,16 @@
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { ResourceGroupType } from '@/api-clients/_common/schema/type';
+
+export const isDashboardOrFolderManageable = (
+    isAdminMode: boolean,
+    isWorkspaceOwner: boolean,
+    isPrivate: boolean,
+    isShared?: boolean,
+    resourceGroup?: ResourceGroupType,
+): boolean => {
+    if (isAdminMode) return true;
+    if (isPrivate) return true;
+    if (isShared && resourceGroup === RESOURCE_GROUP.DOMAIN) return false;
+    if (isWorkspaceOwner) return true;
+    return false;
+};
diff --git a/apps/web/src/services/dashboards/helpers/dashboard-share-helper.ts b/apps/web/src/services/dashboards/helpers/dashboard-share-helper.ts
deleted file mode 100644
index 1aa8a5ecee..0000000000
--- a/apps/web/src/services/dashboards/helpers/dashboard-share-helper.ts
+++ /dev/null
@@ -1,135 +0,0 @@
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-nocheck
-import { cloneDeep, flattenDeep } from 'lodash';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-
-import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
-import type { DashboardLayout } from '@/api-clients/dashboard/_types/dashboard-type';
-import type { PrivateDataTableModel } from '@/api-clients/dashboard/private-data-table/schema/model';
-import type { PrivateWidgetModel } from '@/api-clients/dashboard/private-widget/schema/model';
-import type { DataTableListParameters } from '@/api-clients/dashboard/public-data-table/schema/api-verbs/list';
-import type { PublicDataTableModel } from '@/api-clients/dashboard/public-data-table/schema/model';
-import type { PublicWidgetModel } from '@/api-clients/dashboard/public-widget/schema/model';
-
-import type { CostDataSourceReferenceMap } from '@/store/reference/cost-data-source-reference-store';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import { DATA_TABLE_TYPE } from '@/common/modules/widgets/_constants/data-table-constant';
-
-import type {
-    SharedDashboardInfo, SharedDashboardLayout, SharedDataTableInfo, SharedWidgetInfo,
-} from '@/services/dashboards/types/shared-dashboard-type';
-
-
-type DataTableModel = PublicDataTableModel | PrivateDataTableModel;
-type WidgetModel = PublicWidgetModel | PrivateWidgetModel;
-
-const _listWidgetDataTables = async (widgetId: string, costDataSource: CostDataSourceReferenceMap): Promise<[string, DataTableModel[]]|undefined> => {
-    if (!widgetId) return undefined;
-    const _isPrivate = widgetId.startsWith('private');
-    const _fetcher = _isPrivate
-        ? SpaceConnector.clientV2.dashboard.privateDataTable.list<DataTableListParameters, ListResponse<DataTableModel>>
-        : SpaceConnector.clientV2.dashboard.publicDataTable.list<DataTableListParameters, ListResponse<DataTableModel>>;
-    try {
-        const { results } = await _fetcher({
-            widget_id: widgetId,
-        });
-        if (!results) return undefined;
-        const _refinedResults = cloneDeep(results);
-        results.forEach((r, idx) => {
-            if (r.data_type === DATA_TABLE_TYPE.ADDED && r.source_type === 'COST') {
-                const _dataSourceId = r.options.COST?.data_source_id || '';
-                _refinedResults[idx].options.COST.plugin_id = costDataSource[_dataSourceId]?.data?.plugin_info?.plugin_id;
-                _refinedResults[idx].options.COST.data_source_id = undefined;
-            }
-        });
-        return [widgetId, _refinedResults || []];
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        return undefined;
-    }
-};
-const _getWidgetDataTablesMap = async (dashboardLayouts: DashboardLayout[], costDataSource: CostDataSourceReferenceMap): Promise<Record<string, DataTableModel[]>> => {
-    const _dashboardWidgetIdList = flattenDeep(dashboardLayouts?.map((layout) => layout.widgets?.map((w) => w)) || []);
-    const results = await Promise.allSettled(_dashboardWidgetIdList.map((widgetId) => _listWidgetDataTables(widgetId, costDataSource)));
-    const _widgetDataTablesMap: Record<string, DataTableModel[]> = {};
-    results.forEach((r) => {
-        if (r.status === 'fulfilled') {
-            if (!r.value) return;
-            const [widgetId, dataTables] = r.value;
-            if (widgetId && dataTables) {
-                _widgetDataTablesMap[widgetId] = dataTables;
-            }
-        }
-    });
-    return _widgetDataTablesMap;
-};
-
-const _getSharedDataTableInfoList = (widgetDataTablesMap: Record<string, DataTableModel[]>, widgetId: string, dataTableId?: string): [SharedDataTableInfo[], number] => {
-    const _dataTables = widgetDataTablesMap[widgetId] || [];
-    const _dataTableIndex = _dataTables.findIndex((d) => d.data_table_id === dataTableId);
-    const _sharedDataTables: SharedDataTableInfo[] = [];
-    _dataTables.forEach((dt) => {
-        const _sharedDataTable = {
-            name: dt.name,
-            data_type: dt.data_type,
-            source_type: dt.source_type,
-            operator: dt.operator,
-            options: dt.options,
-        };
-        if (dt.data_type === DATA_TABLE_TYPE.TRANSFORMED) {
-            if (dt.operator === 'JOIN' || dt.operator === 'CONCAT') {
-                const _dataTableIds = dt.options[dt.operator]?.data_tables;
-                const _dataTableIndices = _dataTableIds?.map((dtId) => _dataTables.findIndex((d) => d.data_table_id === dtId));
-                _sharedDataTable.options = {
-                    [dt.operator]: {
-                        ...dt.options[dt.operator],
-                        data_tables: _dataTableIndices,
-                    },
-                };
-            } else {
-                const _dataTableId = dt.options[dt.operator]?.data_table_id;
-                const _dataTableIdx = _dataTables.findIndex((d) => d.data_table_id === _dataTableId);
-                _sharedDataTable.options = {
-                    [dt.operator]: {
-                        ...dt.options[dt.operator],
-                        data_table_id: _dataTableIdx,
-                    },
-                };
-            }
-        }
-        _sharedDataTables.push(_sharedDataTable);
-    });
-    return [_sharedDataTables, _dataTableIndex];
-};
-export const getSharedDashboardLayouts = async (
-    dashboardLayouts: DashboardLayout[],
-    dashboardWidgets: WidgetModel[],
-    costDataSource: CostDataSourceReferenceMap,
-): Promise<SharedDashboardLayout[]> => {
-    const _widgetDataTablesMap = await _getWidgetDataTablesMap(dashboardLayouts, costDataSource);
-    const _sharedLayouts: SharedDashboardInfo['layouts'] = [];
-    dashboardLayouts?.forEach((layout) => {
-        const _sharedWidgets: SharedWidgetInfo[] = [];
-        layout.widgets?.forEach((widgetId) => {
-            const _widget = dashboardWidgets.find((w) => w.widget_id === widgetId);
-            if (_widget) {
-                const _dataTableId = _widget.data_table_id;
-                const [_dataTables, _dataTableIndex] = _getSharedDataTableInfoList(_widgetDataTablesMap, _widget.widget_id, _dataTableId);
-                const _sharedWidgetInfo: SharedWidgetInfo = {
-                    widget_type: _widget.widget_type,
-                    size: _widget.size,
-                    options: _widget.options,
-                    data_tables: _dataTables,
-                    data_table_id: _dataTableIndex > -1 ? _dataTableIndex : 0,
-                };
-                _sharedWidgets.push(_sharedWidgetInfo);
-            }
-        });
-        _sharedLayouts.push({
-            widgets: _sharedWidgets,
-        });
-    });
-    return _sharedLayouts;
-};
diff --git a/apps/web/src/services/dashboards/helpers/dashboard-tree-data-helper.ts b/apps/web/src/services/dashboards/helpers/dashboard-tree-data-helper.ts
index 342af2ee72..ab978a4592 100644
--- a/apps/web/src/services/dashboards/helpers/dashboard-tree-data-helper.ts
+++ b/apps/web/src/services/dashboards/helpers/dashboard-tree-data-helper.ts
@@ -8,73 +8,58 @@ import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
 import type { DashboardTreeDataType, DashboardDataTableItem } from '@/services/dashboards/types/dashboard-folder-type';
 
 
-export const getDashboardTreeData = (folderList: FolderModel[], dashboardList: DashboardModel[], newIdList?: string[]): TreeNode<DashboardTreeDataType>[] => {
-    const nodes: Record<string, TreeNode<DashboardTreeDataType>> = {};
-    folderList.forEach((d) => {
-        nodes[d.folder_id] = {
-            id: d.folder_id,
+export const getDashboardTreeData = (
+    folderList: FolderModel[],
+    dashboardList: DashboardModel[],
+    newIdList?: string[],
+): TreeNode<DashboardTreeDataType>[] => {
+    const folderNodeMap: Record<string, TreeNode<DashboardTreeDataType>> = {};
+    const rootNodes: TreeNode<DashboardTreeDataType>[] = [];
+
+    folderList.forEach((folder) => {
+        const folderNode: TreeNode<DashboardTreeDataType> = {
+            id: folder.folder_id,
             depth: 0,
             data: {
-                name: d.name,
+                id: folder.folder_id,
+                name: folder.name,
                 type: 'FOLDER',
-                id: d.folder_id,
-                shared: d?.shared,
-                scope: d?.scope,
-                projectId: d?.project_id,
-                workspaceId: d?.workspace_id,
-                createdBy: d.tags?.created_by,
-                isNew: newIdList?.includes(d.folder_id),
+                createdBy: folder.tags?.created_by,
+                isNew: newIdList?.includes(folder.folder_id),
+                ...folder,
             },
             children: [],
         };
+        folderNodeMap[folder.folder_id] = folderNode;
+        rootNodes.push(folderNode);
     });
-    dashboardList.forEach((d) => {
-        nodes[d.dashboard_id] = {
-            id: d.dashboard_id,
+
+    dashboardList.forEach((dashboard) => {
+        const dashboardNode: TreeNode<DashboardTreeDataType> = {
+            id: dashboard.dashboard_id,
             depth: 0,
             data: {
-                name: d.name,
-                id: d.dashboard_id,
+                id: dashboard.dashboard_id,
+                name: dashboard.name,
                 type: 'DASHBOARD',
-                folderId: d.folder_id,
-                shared: d?.shared,
-                scope: d?.scope,
-                projectId: d?.project_id,
-                workspaceId: d?.workspace_id,
-                userId: d?.user_id,
-                createdBy: d.tags?.created_by,
-                isNew: newIdList?.includes(d.dashboard_id),
-                labels: d?.labels,
+                createdBy: dashboard.tags?.created_by,
+                isNew: newIdList?.includes(dashboard.dashboard_id),
+                ...dashboard,
             },
         };
-    });
 
-    const rootNodes: TreeNode<DashboardTreeDataType>[] = [];
-    const setDepth = (node, depth) => {
-        node.depth = depth;
-        if (!node.children) return;
-        node.children.forEach((child) => {
-            setDepth(child, depth + 1);
-        });
-    };
-    Object.values(nodes).forEach((node) => {
-        const folderId = node.data?.folderId;
-        if (!folderId) {
-            rootNodes.push(node);
-            setDepth(node, 0);
+        const folderNode = dashboard.folder_id ? folderNodeMap[dashboard.folder_id] : undefined;
+
+        if (folderNode) {
+            dashboardNode.depth = 1;
+            folderNode.children.push(dashboardNode);
         } else {
-            const parentNode = nodes[folderId];
-            if (parentNode) {
-                parentNode.children = parentNode.children || [];
-                parentNode.children.push(node);
-                setDepth(node, parentNode.depth + 1);
-            }
+            rootNodes.push(dashboardNode);
         }
     });
 
     return rootNodes;
 };
-
 export const getSelectedDataTableItems = (folderItems: FolderModel[], dashboardItems: DashboardModel[], selectedIdMap: Record<string, boolean>): DashboardDataTableItem[] => {
     const _results: DashboardDataTableItem[] = [];
     const _selectedIdList: string[] = Object.keys(selectedIdMap).filter((key) => selectedIdMap[key]);
diff --git a/apps/web/src/services/dashboards/helpers/widget-migration-helper.ts b/apps/web/src/services/dashboards/helpers/widget-migration-helper.ts
deleted file mode 100644
index ee03f42b14..0000000000
--- a/apps/web/src/services/dashboards/helpers/widget-migration-helper.ts
+++ /dev/null
@@ -1,313 +0,0 @@
-// import { cloneDeep } from 'lodash';
-//
-//
-// import type { PrivateWidgetModel } from '@/schema/dashboard/private-widget/model';
-// import type { PublicWidgetModel } from '@/schema/dashboard/public-widget/model';
-//
-// import type { ComparisonValue } from '@/common/modules/widgets/_widget-fields/comparison/type';
-// import type { WidgetHeaderValue } from '@/common/modules/widgets/_widget-fields/header/type';
-// import type {
-//     TableDataFieldValueNoVersion,
-//     TableDataFieldValueV1,
-// } from '@/common/modules/widgets/_widget-fields/table-data-field/type';
-// import { LATEST_TABLE_DATA_FIELD_VERSION } from '@/common/modules/widgets/_widget-fields/table-data-field/type';
-// import type { WidgetFieldName } from '@/common/modules/widgets/types/widget-field-type';
-// import type { WidgetFieldValues } from '@/common/modules/widgets/types/widget-field-value-type';
-//
-//
-// type WidgetOptions = Record<WidgetFieldName, WidgetFieldValues>;
-//
-// /**
-//  * XY Chart (Line Chart, Area Chart, Column Chart)
-//  * Data Field & Group by -> Table Data Field V1
-//  * Table Data Field No Version -> Table Data Field V1
-//  * Legend: value type is changed
-//  */
-// const _migrateXYChart = (widget: PublicWidgetModel|PrivateWidgetModel, groupByField: string): PublicWidgetModel|PrivateWidgetModel => {
-//     let _options = cloneDeep(widget.options);
-//
-//     const _dataFieldToTableDataFieldV1 = () => {
-//         if (_options?.[groupByField]?.value) {
-//             _options = {
-//                 ..._options,
-//                 tableDataField: {
-//                     fieldType: 'dynamicField',
-//                     dynamicFieldInfo: {
-//                         criteria: _options.dataField,
-//                         fieldValue: _options[groupByField].value,
-//                         valueType: 'auto',
-//                         count: _options?.[groupByField]?.count || 5,
-//                     },
-//                     version: 'v1',
-//                 } as TableDataFieldValueV1,
-//             };
-//         } else {
-//             _options = {
-//                 ..._options,
-//                 tableDataField: {
-//                     fieldType: 'staticField',
-//                     staticFieldInfo: {
-//                         fieldValue: [_options.dataField],
-//                     },
-//                     version: 'v1',
-//                 } as TableDataFieldValueV1,
-//             };
-//         }
-//         delete _options?.dataField;
-//         delete _options?.[groupByField];
-//     };
-//     const _tableDataFieldNoVersionToTableDataFieldV1 = () => {
-//         _options = {
-//             ..._options,
-//             tableDataField: migrateTableDataField(_options.tableDataField),
-//         };
-//     };
-//     if ('dataField' in _options) {
-//         _dataFieldToTableDataFieldV1();
-//     } else if (_options?.tableDataField
-//         && (!('version' in _options.tableDataField) || _options.tableDataField.version !== LATEST_TABLE_DATA_FIELD_VERSION)) {
-//         _tableDataFieldNoVersionToTableDataFieldV1();
-//     }
-//
-//     // Legend version migration
-//     // no version
-//     if (_options?.legend && !_options.legend?.toggleValue) {
-//         _options = {
-//             ..._options,
-//             legend: {
-//                 toggleValue: true,
-//             },
-//         };
-//     }
-//     return {
-//         ...widget,
-//         options: _options,
-//     };
-// };
-//
-// /**
-//  * Clustered Column Chart
-//  * Data Field -> Table Data Field V1
-//  * Table Data Field No Version -> Table Data Field V1
-//  */
-// const _migrateClusteredColumnChart = (widget: PublicWidgetModel|PrivateWidgetModel): PublicWidgetModel|PrivateWidgetModel => {
-//     let _options: WidgetOptions = cloneDeep(widget.options);
-//
-//     const _dataFieldToTableDataFieldV1 = () => {
-//         _options = {
-//             ..._options,
-//             tableDataField: {
-//                 fieldType: 'staticField',
-//                 staticFieldInfo: {
-//                     fieldValue: _options.dataField,
-//                 },
-//                 version: 'v1',
-//             },
-//         };
-//         delete _options?.dataField;
-//     };
-//     const _tableDataFieldNoVersionToTableDataFieldV1 = () => {
-//         _options = {
-//             ..._options,
-//             tableDataField: migrateTableDataField(_options.tableDataField),
-//         };
-//     };
-//     if ('dataField' in _options) {
-//         _dataFieldToTableDataFieldV1();
-//     } else if ('tableDataField' in _options
-//         && (!('version' in _options.tableDataField) || _options.tableDataField.version !== LATEST_TABLE_DATA_FIELD_VERSION)) {
-//         _tableDataFieldNoVersionToTableDataFieldV1();
-//     }
-//     return {
-//         ...widget,
-//         options: _options,
-//     };
-// };
-//
-// /**
-//  * Heatmap
-//  * Data Field & YAxis -> Table Data Field V1
-//  */
-// const _migrateHeatmap = (widget: PublicWidgetModel|PrivateWidgetModel): PublicWidgetModel|PrivateWidgetModel => {
-//     let _options: WidgetOptions = cloneDeep(widget.options);
-//
-//     const _dataFieldToTableDataFieldV1 = () => {
-//         _options = {
-//             ..._options,
-//             tableDataField: {
-//                 fieldType: 'dynamicField',
-//                 dynamicFieldInfo: {
-//                     criteria: _options.dataField,
-//                     fieldValue: _options.yAxis?.value,
-//                     valueType: 'auto',
-//                     count: _options.yAxis?.count || 7,
-//                 },
-//                 version: 'v1',
-//             } as TableDataFieldValueV1,
-//         };
-//         delete _options?.dataField;
-//         delete _options?.yAxis;
-//     };
-//
-//     if ('dataField' in _options) {
-//         _dataFieldToTableDataFieldV1();
-//     }
-//     return {
-//         ...widget,
-//         options: _options,
-//     };
-// };
-//
-// /**
-//  * Table
-//  * Table Data Field No Version -> Table Data Field V1
-//  */
-// const migrateTable = (widget: PublicWidgetModel|PrivateWidgetModel): PublicWidgetModel|PrivateWidgetModel => {
-//     let _options: WidgetOptions = cloneDeep(widget.options);
-//     // Table Data Field version migration
-//     if (_options?.tableDataField
-//         && (!('version' in _options.tableDataField) || _options.tableDataField.version !== LATEST_TABLE_DATA_FIELD_VERSION)) {
-//         _options = {
-//             ..._options,
-//             tableDataField: migrateTableDataField(_options.tableDataField),
-//         };
-//     }
-//     // Comparison version migration
-//     _options = {
-//         ..._options,
-//         comparison: migrateComparison(_options?.comparison),
-//     };
-//     return {
-//         ...widget,
-//         options: _options,
-//     };
-// };
-//
-// /**
-//  * NumberCard
-//  * Change Comparison Value Type (ComparisonValue[] -> ComparisonValue)
-//  */
-// const migrateNumberCard = (widget: PublicWidgetModel|PrivateWidgetModel): PublicWidgetModel|PrivateWidgetModel => {
-//     let _options: WidgetOptions = cloneDeep(widget.options);
-//     // Comparison version migration
-//     _options = {
-//         ..._options,
-//         comparison: migrateComparison(_options.comparison),
-//     };
-//     return {
-//         ...widget,
-//         options: _options,
-//     };
-// };
-//
-// /*
-// * All Widgets
-// * Widget Header: set toggleValue to true if widgetHeader exists but toggleValue is missing
-// */
-// const migrateAllWidgets = (dashboardWidgets: Array<PublicWidgetModel|PrivateWidgetModel>): Array<PublicWidgetModel|PrivateWidgetModel> => {
-//     const _migratedWidgets: Array<PublicWidgetModel|PrivateWidgetModel> = cloneDeep(dashboardWidgets);
-//     _migratedWidgets.forEach((widget) => {
-//         // Widget Header
-//         const _widgetOptions: WidgetOptions = cloneDeep(widget?.options);
-//         const _widgetHeaderOption = cloneDeep(widget?.options?.widgetHeader) as WidgetHeaderValue;
-//         if (_widgetHeaderOption && (_widgetHeaderOption?.toggleValue === undefined)) {
-//             widget.options = {
-//                 ..._widgetOptions,
-//                 widgetHeader: {
-//                     ..._widgetHeaderOption,
-//                     toggleValue: true,
-//                 },
-//             };
-//         }
-//     });
-//     return _migratedWidgets;
-// };
-//
-//
-// export const migrateLegacyWidgetOptions = (dashboardWidgets: Array<PublicWidgetModel|PrivateWidgetModel>): Array<PublicWidgetModel|PrivateWidgetModel> => {
-//     // let isMigrated = false;
-//     let migratedWidgets = dashboardWidgets.map((widget) => {
-//         if (widget.widget_type === 'lineChart' || widget.widget_type === 'stackedAreaChart') {
-//             return _migrateXYChart(widget, 'lineBy');
-//         }
-//         if (widget.widget_type === 'stackedColumnChart' || widget.widget_type === 'stackedHorizontalBarChart') {
-//             return _migrateXYChart(widget, 'stackBy');
-//         }
-//         if (widget.widget_type === 'clusteredColumnChart') {
-//             return _migrateClusteredColumnChart(widget);
-//         }
-//         if (widget.widget_type === 'heatmap') {
-//             return _migrateHeatmap(widget);
-//         }
-//         if (widget.widget_type === 'table') {
-//             return migrateTable(widget);
-//         }
-//         if (widget.widget_type === 'numberCard') {
-//             return migrateNumberCard(widget);
-//         }
-//         return widget;
-//     });
-//     migratedWidgets = migrateAllWidgets(migratedWidgets);
-//     return migratedWidgets;
-// };
-//
-// /** Option Migration Helper */
-//
-// /** Table Data Field Migration
-//  * Widgets: [Table, Line Chart, Clustered Column Chart]
-//  * Latest Version: v1
-//  */
-// type LegacyTableDataFieldValue = TableDataFieldValueNoVersion | any;
-// type LatestTableDataFieldValue = TableDataFieldValueV1;
-// const migrateTableDataField = (tableDataField: LegacyTableDataFieldValue): LatestTableDataFieldValue => {
-//     switch (tableDataField.version) {
-//     case undefined: { // no-version -> v1
-//         const legacyTableDataField = tableDataField as TableDataFieldValueNoVersion;
-//         if (legacyTableDataField.fieldType === 'staticField') {
-//             const _fieldValue = legacyTableDataField.value as string[] | undefined;
-//             return {
-//                 fieldType: 'staticField',
-//                 staticFieldInfo: {
-//                     fieldValue: _fieldValue,
-//                 },
-//                 version: 'v1',
-//             };
-//         }
-//         const _criteria = legacyTableDataField.criteria as string;
-//         const _fieldValue = legacyTableDataField.value as string | undefined;
-//         const _dynamicFieldValue = legacyTableDataField.dynamicFieldValue as string[] | undefined;
-//         return {
-//             fieldType: 'dynamicField',
-//             dynamicFieldInfo: {
-//                 criteria: _criteria,
-//                 fieldValue: _fieldValue,
-//                 valueType: 'fixed', // no-version's default
-//                 fixedValue: _dynamicFieldValue,
-//             },
-//             version: 'v1',
-//         };
-//     }
-//     default:
-//         return tableDataField as LatestTableDataFieldValue;
-//     }
-// };
-// /**
-//  * Comparison Migration
-//  * Widgets: [Table, Number Card]
-//  * Change Comparison Value Type (ComparisonValue[] -> ComparisonValue)
-//  */
-// const migrateComparison = (comparison?: ComparisonValue|ComparisonValue[]): ComparisonValue => {
-//     if (comparison) {
-//         if (Array.isArray(comparison)) {
-//             const _comparisonValue: ComparisonValue = comparison[0];
-//             return {
-//                 ..._comparisonValue,
-//                 toggleValue: true,
-//             };
-//         }
-//         return comparison;
-//     }
-//     return {
-//         toggleValue: false,
-//     };
-// };
diff --git a/apps/web/src/services/dashboards/pages/DashboardCreatePage.vue b/apps/web/src/services/dashboards/pages/DashboardCreatePage.vue
index beb5c8a418..83340e7e87 100644
--- a/apps/web/src/services/dashboards/pages/DashboardCreatePage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardCreatePage.vue
@@ -1,123 +1,55 @@
-<script lang="ts">
-// eslint-disable-next-line import/order,import/no-duplicates
-import { defineComponent, type ComponentPublicInstance } from 'vue';
-
-interface IInstance extends ComponentPublicInstance {
-    setPathFrom(from: any): void
-}
-
-export default defineComponent({
-    beforeRouteEnter(to, from, next) {
-        next((vm) => {
-            const instance = vm as unknown as IInstance;
-            instance.setPathFrom(from);
-        });
-    },
-});
-</script>
-
 <script setup lang="ts">
-/* eslint-disable import/first */
 import {
-    computed, defineExpose, onUnmounted, reactive,
-// eslint-disable-next-line import/no-duplicates
+    computed, reactive,
 } from 'vue';
-import type { TranslateResult } from 'vue-i18n';
-
-import {
-    PCenteredLayoutHeader,
-} from '@cloudforet/mirinae';
 
-import { i18n } from '@/translations';
+import type { DashboardModel, DashboardFolderModel } from '@/api-clients/dashboard/_types/dashboard-type';
 
 import { useAppContextStore } from '@/store/app-context/app-context-store';
 
-import ConfirmBackModal from '@/common/components/modals/ConfirmBackModal.vue';
-import { useGoBack } from '@/common/composables/go-back';
+import { DASHBOARD_SHARED_ENTRY_POINT } from '@/services/_shared/dashboard/core/constants/dashboard-shared-constant';
+import DashboardCreateLayout from '@/services/_shared/dashboard/dashboard-create/DashboardCreateLayout.vue';
+import { useDashboardFolderQuery } from '@/services/dashboards/composables/use-dashboard-folder-query';
+import { useDashboardQuery } from '@/services/dashboards/composables/use-dashboard-query';
 
-import DashboardCreateStep1 from '@/services/dashboards/components/dashboard-create/DashboardCreateStep1.vue';
-import DashboardCreateStep2 from '@/services/dashboards/components/dashboard-create/DashboardCreateStep2.vue';
-import { ADMIN_DASHBOARDS_ROUTE } from '@/services/dashboards/routes/admin/route-constant';
-import { DASHBOARDS_ROUTE } from '@/services/dashboards/routes/route-constant';
-import { useDashboardCreatePageStore } from '@/services/dashboards/stores/dashboard-create-page-store';
-
-
-interface Step {
-    step: number;
-    description?: TranslateResult;
-}
 const appContextStore = useAppContextStore();
-const dashboardCreatePageStore = useDashboardCreatePageStore();
-const dashboardCreatePageState = dashboardCreatePageStore.state;
 const storeState = reactive({
     isAdminMode: computed(() => appContextStore.getters.isAdminMode),
 });
-const state = reactive({
-    loading: false,
-    steps: computed<Step[]>(() => [
-        {
-            step: 1,
-            description: storeState.isAdminMode ? '' : i18n.t('DASHBOARDS.CREATE.STEP1_DESC'),
-        },
-        {
-            step: 2,
-            description: storeState.isAdminMode ? i18n.t('DASHBOARDS.CREATE.STEP2_DESC_FOR_ADMIN') : i18n.t('DASHBOARDS.CREATE.STEP2_DESC'),
-        },
-    ]),
-    closeConfirmModalVisible: false,
-});
 
-/* Event */
-const handleClickClose = () => {
-    state.closeConfirmModalVisible = true;
-};
-const { setPathFrom, handleClickBackButton } = useGoBack({
-    name: storeState.isAdminMode ? ADMIN_DASHBOARDS_ROUTE._NAME : DASHBOARDS_ROUTE._NAME,
+/* Query */
+const {
+    publicDashboardList,
+    privateDashboardList,
+} = useDashboardQuery();
+const {
+    publicFolderList,
+    privateFolderList,
+} = useDashboardFolderQuery();
+
+
+const dashboardState = reactive({
+    publicDashboardItems: computed<Array<DashboardModel>>(() => {
+        const _v2DashboardItems = publicDashboardList.value.filter((d) => d.version !== '1.0');
+        if (storeState.isAdminMode) return _v2DashboardItems;
+        return _v2DashboardItems.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateDashboardItems: computed<Array<DashboardModel>>(() => privateDashboardList.value.filter((d) => d.version !== '1.0')),
+    allDashboardItems: computed<Array<DashboardModel>>(() => [...dashboardState.publicDashboardItems, ...dashboardState.privateDashboardItems]),
+    publicFolderItems: computed<Array<DashboardFolderModel>>(() => {
+        if (storeState.isAdminMode) return publicFolderList.value;
+        return publicFolderList.value.filter((d) => !(d.resource_group === 'DOMAIN' && !!d.shared && d.scope === 'PROJECT'));
+    }),
+    privateFolderItems: computed<Array<DashboardFolderModel>>(() => privateFolderList.value),
+    allDashboardFolderItems: computed<Array<DashboardFolderModel>>(() => [...dashboardState.publicFolderItems, ...dashboardState.privateFolderItems]),
 });
-const handleClickNext = () => {
-    dashboardCreatePageStore.setCreateType('BUNDLE');
-    dashboardCreatePageStore.setCurrentStep(2);
-};
 
-defineExpose({ setPathFrom });
-
-onUnmounted(() => {
-    dashboardCreatePageStore.reset();
-});
 </script>
 
 <template>
-    <div class="dashboard-create-page"
-         :class="[`step-${dashboardCreatePageState.currentStep}`]"
-    >
-        <p-centered-layout-header :title="$t('DASHBOARDS.CREATE.TITLE')"
-                                  :description="state.steps?.[dashboardCreatePageState.currentStep - 1]?.description"
-                                  :total-steps="state.steps.length"
-                                  :current-step="dashboardCreatePageState.currentStep"
-                                  show-step
-                                  show-close-button
-                                  @close="handleClickClose"
-        />
-        <dashboard-create-step1 v-if="dashboardCreatePageState.currentStep === 1"
-                                @click-next="handleClickNext"
-        />
-        <template v-else-if="dashboardCreatePageState.currentStep === 2">
-            <dashboard-create-step2 />
-        </template>
-        <confirm-back-modal :visible.sync="state.closeConfirmModalVisible"
-                            @confirm="handleClickBackButton"
-        />
-    </div>
+    <dashboard-create-layout class="dashboard-create-page"
+                             :entry-point="DASHBOARD_SHARED_ENTRY_POINT.DASHBOARDS"
+                             :dashboard-items="dashboardState.allDashboardItems"
+                             :folder-items="dashboardState.allDashboardFolderItems"
+    />
 </template>
-
-<style lang="postcss" scoped>
-.dashboard-create-page {
-    margin: 0 auto;
-    &.step-1 {
-        width: 60rem;
-    }
-    &.step-2 {
-        width: 45rem;
-    }
-}
-</style>
diff --git a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
index 461fbe6d7e..46a69d52f5 100644
--- a/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
+++ b/apps/web/src/services/dashboards/pages/DashboardDetailPage.vue
@@ -1,44 +1,23 @@
 <script setup lang="ts">
 import {
     computed,
-    onUnmounted, reactive, ref, watch,
+    onUnmounted, watch,
 } from 'vue';
-import { useRouter } from 'vue-router/composables';
-
-import { useMutation, useQueryClient } from '@tanstack/vue-query';
 
 import {
-    PDivider, PI,
+    PI,
 } from '@cloudforet/mirinae';
 
-import type { PrivateDashboardModel } from '@/api-clients/dashboard/private-dashboard/schema/model';
-import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
-
-import { useAppContextStore } from '@/store/app-context/app-context-store';
-
-import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
-
 import { useBreadcrumbs } from '@/common/composables/breadcrumbs';
-import ErrorHandler from '@/common/composables/error/errorHandler';
 import type { FavoriteOptions } from '@/common/modules/favorites/favorite-button/type';
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { useGnbStore } from '@/common/modules/navigations/stores/gnb-store';
-import { useWidgetGenerateStore } from '@/common/modules/widgets/_store/widget-generate-store';
 
-import DashboardDetailHeader from '@/services/dashboards/components/dashboard-detail/DashboardDetailHeader.vue';
-import DashboardRefreshDropdown from '@/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue';
-import DashboardToolsetDateDropdown from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue';
-import DashboardToolsetScope from '@/services/dashboards/components/dashboard-detail/DashboardToolsetScope.vue';
-import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue';
-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 { 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';
+import { DASHBOARD_SHARED_ENTRY_POINT } from '@/services/_shared/dashboard/core/constants/dashboard-shared-constant';
+import DashboardDetailLayout from '@/services/_shared/dashboard/dashboard-detail/DashboardDetailLayout.vue';
+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';
 
 interface Props {
     dashboardId: string;
@@ -46,88 +25,25 @@ interface Props {
 const props = defineProps<Props>();
 
 const gnbStore = useGnbStore();
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
-const widgetGenerateStore = useWidgetGenerateStore();
 const { breadcrumbs } = useBreadcrumbs();
-
-const appContextStore = useAppContextStore();
-const widgetContainerRef = ref<typeof DashboardWidgetContainer|null>(null);
-const router = useRouter();
-
+const dashboardPageControlStore = useDashboardPageControlStore();
 /* Query */
 const {
-    dashboard,
-    isError: dashboardError,
-    isLoading: dashboardLoading,
-    keys: dashboardKeys,
-    fetcher: dashboardFetcher,
-} = useDashboardGetQuery({
-    dashboardId: computed(() => props.dashboardId),
-});
+    publicDashboardList,
+    privateDashboardList,
+} = useDashboardQuery();
 const {
-    widgetList,
-    isLoading: widgetLoading,
-    isError: widgetError,
-    keys: widgetListKeys,
-} = useDashboardWidgetListQuery({
-    dashboardId: computed(() => props.dashboardId),
-});
-
-const queryClient = useQueryClient();
-const { isManageable } = useDashboardManageable({
-    dashboardId: computed(() => props.dashboardId),
-});
-
-const state = reactive({
-    isAdminMode: computed(() => appContextStore.getters.isAdminMode),
-    favoriteOptions: computed<FavoriteOptions>(() => ({
-        type: FAVORITE_TYPE.DASHBOARD,
-        id: props.dashboardId,
-    })),
-    isDeprecatedDashboard: computed(() => dashboard.value?.version === '1.0'),
-});
-
-/* Event */
-const handleRefresh = async () => {
-    if (dashboard.value?.version !== '1.0') {
-        const isPrivate = props.dashboardId.startsWith('private');
-        const widgetListQueryKey = isPrivate ? widgetListKeys.privateWidgetListQueryKey : widgetListKeys.publicWidgetListQueryKey;
-        await queryClient.invalidateQueries({ queryKey: widgetListQueryKey.value });
-    }
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget();
-};
-const handleUpdateDashboardVariables = (params) => {
-    updateDashboard({
-        dashboard_id: props.dashboardId,
-        ...params,
-    });
-};
-
-
-const { mutate: updateDashboard, isPending: dashboardUpdateLoading } = useMutation(
-    {
-        mutationFn: dashboardFetcher.updateDashboardFn,
-        onSuccess: (_dashboard: PublicDashboardModel|PrivateDashboardModel) => {
-            const isPrivate = _dashboard.dashboard_id.startsWith('private');
-            const dashboardQueryKey = isPrivate ? dashboardKeys.privateDashboardGetQueryKey : dashboardKeys.publicDashboardGetQueryKey;
-            queryClient.setQueryData(dashboardQueryKey.value, (oldDashboard) => {
-                if (!oldDashboard) return _dashboard;
-                return {
-                    ...oldDashboard,
-                    vars: { ..._dashboard.vars },
-                };
-            });
-        },
-        onError: (e) => {
-            showErrorMessage(e.message, e);
-            ErrorHandler.handleError(e);
-        },
-    },
-);
-
+    publicFolderList,
+    privateFolderList,
+} = useDashboardFolderQuery();
+
+const dashboardItems = computed(() => [...publicDashboardList.value, ...privateDashboardList.value]);
+const folderItems = computed(() => [...publicFolderList.value, ...privateFolderList.value]);
+const isDeprecatedDashboard = computed<boolean>(() => dashboardItems.value.find((d) => d.dashboard_id === props.dashboardId)?.version === '1.0');
+const favoriteOptions = computed<FavoriteOptions>(() => ({
+    type: FAVORITE_TYPE.DASHBOARD,
+    id: props.dashboardId,
+}));
 
 watch(() => props.dashboardId, async (dashboardId) => {
     // Set Dashboard Detail Custom breadcrumbs
@@ -136,45 +52,27 @@ watch(() => props.dashboardId, async (dashboardId) => {
     }
 }, { immediate: true });
 
-watch(dashboard, (_dashboard) => {
-    if (_dashboard) {
-        dashboardDetailStore.reset();
-        if (state.isDeprecatedDashboard) {
-            dashboardDetailStore.setDashboardInfoStoreState(_dashboard);
-        } else {
-            dashboardDetailStore.setDashboardInfoStoreStateV2(_dashboard);
-        }
-    }
-}, { immediate: true });
-watch(widgetList, (_widgetList) => {
-    if (_widgetList.length) {
-        dashboardDetailStore.setDashboardWidgets(_widgetList);
-    }
-});
-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 });
-    }
-});
-
-watch(() => state.favoriteOptions, (favoriteOptions) => {
-    gnbStore.setFavoriteItemId(favoriteOptions);
+watch(favoriteOptions, (_favoriteOptions) => {
+    gnbStore.setFavoriteItemId(_favoriteOptions);
 }, { immediate: true });
 
 onUnmounted(() => {
     gnbStore.setBreadcrumbs([]);
-    // Reset Dashboard Detail Custom breadcrumbs
-    dashboardDetailStore.reset();
-    widgetGenerateStore.reset();
 });
+
+const handleSelectToolset = (toolsetId: string|undefined) => {
+    if (toolsetId === 'edit') dashboardPageControlStore.openEditNameModal(props.dashboardId);
+    if (toolsetId === 'clone') dashboardPageControlStore.openCloneModal(props.dashboardId);
+    if (toolsetId === 'move') dashboardPageControlStore.openMoveModal(props.dashboardId);
+    if (toolsetId === 'share') dashboardPageControlStore.openShareModal(props.dashboardId);
+    if (toolsetId === 'shareWithCode') dashboardPageControlStore.openShareWithCodeModal(props.dashboardId);
+    if (toolsetId === 'delete') dashboardPageControlStore.openDeleteModal(props.dashboardId);
+};
 </script>
 
 <template>
     <div class="dashboard-detail-page">
-        <portal-target name="dashboard-detail-page" />
-        <div v-if="state.isDeprecatedDashboard"
+        <div v-if="isDeprecatedDashboard"
              class="deprecated-banner"
         >
             <p-i name="ic_limit-filled"
@@ -191,47 +89,12 @@ onUnmounted(() => {
                 </p>
             </div>
         </div>
-        <dashboard-detail-header :dashboard-id="props.dashboardId" />
-        <p-divider class="divider" />
-        <div class="fixed-header">
-            <div class="filter-box">
-                <div class="left-part">
-                    <dashboard-toolset-date-dropdown :date-range="dashboardDetailState.options.date_range" />
-                    <dashboard-toolset-scope v-if="state.isAdminMode" />
-                </div>
-                <div class="right-part">
-                    <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
-                                                :loading="dashboardLoading || widgetLoading || dashboardUpdateLoading"
-                                                @refresh="handleRefresh"
-                    />
-                </div>
-            </div>
-            <div v-if="!dashboardUpdateLoading"
-                 class="dashboard-selectors"
-            >
-                <dashboard-variables v-if="state.isDeprecatedDashboard"
-                                     class="variable-selector-wrapper"
-                                     :loading="dashboardUpdateLoading"
-                                     @update="handleUpdateDashboardVariables"
-                />
-                <dashboard-variables-v2 v-else
-                                        class="variable-selector-wrapper"
-                                        :disable-save-button="!isManageable"
-                                        :loading="dashboardUpdateLoading"
-                                        @update="handleUpdateDashboardVariables"
-                />
-            </div>
-        </div>
-        <div />
-
-        <div class="widget-container-body">
-            <dashboard-widget-container v-if="state.isDeprecatedDashboard"
-                                        ref="widgetContainerRef"
-            />
-            <dashboard-widget-container-v2 v-else
-                                           ref="widgetContainerRef"
-            />
-        </div>
+        <dashboard-detail-layout :dashboard-id="props.dashboardId"
+                                 :dashboard-items="dashboardItems"
+                                 :folder-items="folderItems"
+                                 :entry-point="DASHBOARD_SHARED_ENTRY_POINT.DASHBOARDS"
+                                 @select-toolset="handleSelectToolset"
+        />
     </div>
 </template>
 
@@ -258,46 +121,5 @@ onUnmounted(() => {
             }
         }
     }
-    .divider {
-        @apply mb-4;
-    }
-    .fixed-header {
-        @apply sticky bg-gray-100;
-        z-index: 20;
-        top: 0;
-        padding-top: 1rem;
-
-        .filter-box {
-            @apply flex justify-between items-start mb-4;
-            flex-wrap: wrap;
-            row-gap: 0.25rem;
-
-            .left-part {
-                display: flex;
-                align-items: center;
-                flex-wrap: wrap;
-                column-gap: 1rem;
-            }
-
-            .right-part {
-                display: flex;
-                flex-wrap: wrap;
-                flex-shrink: 0;
-            }
-        }
-
-        .dashboard-selectors {
-            padding-bottom: 0.75rem;
-
-            .variable-selector-wrapper {
-                @apply relative flex items-center flex-wrap;
-                gap: 0.5rem;
-                padding-right: 1rem;
-            }
-        }
-    }
-    .widget-container-body {
-        padding-top: 0.75rem;
-    }
 }
 </style>
diff --git a/apps/web/src/services/dashboards/types/dashboard-folder-type.ts b/apps/web/src/services/dashboards/types/dashboard-folder-type.ts
index 0cda85e08e..81024dd7ab 100644
--- a/apps/web/src/services/dashboards/types/dashboard-folder-type.ts
+++ b/apps/web/src/services/dashboards/types/dashboard-folder-type.ts
@@ -1,16 +1,22 @@
 import type { TreeData } from '@cloudforet/mirinae/types/data-display/tree/tree-view/type';
 
+import type { DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { FolderModel } from '@/api-clients/dashboard/_types/folder-type';
 
-export interface DashboardTreeDataType extends TreeData {
+
+export type DashboardTreeDataType = TreeDataDashboard | TreeDataFolder;
+
+
+type TreeDataDashboard = TreeDataBase & DashboardModel & {
+    type: 'DASHBOARD';
+};
+type TreeDataFolder = TreeDataBase & FolderModel & {
+    type: 'FOLDER';
+};
+export interface TreeDataBase extends TreeData {
     name: string;
     type: 'FOLDER'| 'DASHBOARD';
     id: string;
-    folderId?: string;
-    shared?: boolean;
-    scope?: string;
-    projectId?: string;
-    workspaceId?: string;
-    userId?: string;
     createdBy?: string;
     isNew?: boolean;
     labels?: string[];
diff --git a/apps/web/src/services/dashboards/widgets/_constants/widget-components-constant.ts b/apps/web/src/services/dashboards/widgets/_constants/widget-components-constant.ts
deleted file mode 100644
index 2e4eb03c2e..0000000000
--- a/apps/web/src/services/dashboards/widgets/_constants/widget-components-constant.ts
+++ /dev/null
@@ -1,63 +0,0 @@
-import type { AsyncComponent } from 'vue';
-
-import type { BaseWidgetConfigKey, WidgetConfigKey } from '@/services/dashboards/widgets/_types/widget-list-type';
-
-const BASE_WIDGET_COMPONENTS: Record<BaseWidgetConfigKey, AsyncComponent> = {
-    baseTrend: () => ({
-        component: import('@/services/dashboards/widgets/_base-widgets/base-trend/BaseTrendWidget.vue'),
-    }),
-    basePie: () => ({
-        component: import('@/services/dashboards/widgets/_base-widgets/base-pie/BasePieWidget.vue'),
-    }),
-    baseCountOfFindings: () => ({
-        component: import('@/services/dashboards/widgets/_base-widgets/base-count-of-findings/BaseCountOfFindingsWidget.vue'),
-    }),
-};
-
-export const WIDGET_COMPONENTS: Record<WidgetConfigKey, AsyncComponent> = {
-    monthlyCost: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/monthly-cost/MonthlyCostWidget.vue'),
-    }),
-    budgetUsageSummary: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/budget-usage-summary/BudgetUsageSummaryWidget.vue'),
-    }),
-    costMap: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/cost-map/CostMapWidget.vue'),
-    }),
-    costTrend: BASE_WIDGET_COMPONENTS.baseTrend,
-    costTrendStacked: BASE_WIDGET_COMPONENTS.baseTrend,
-    costSummaryMultiFields: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/CostSummaryMultiFieldsWidget.vue'),
-    }),
-    costPie: BASE_WIDGET_COMPONENTS.basePie,
-    costDonut: BASE_WIDGET_COMPONENTS.basePie,
-    costByRegion: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/cost-by-region/CostByRegionWidget.vue'),
-    }),
-    costByRegionMultiFields: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/CostByRegionMultiFieldsWidget.vue'),
-    }),
-    budgetStatus: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/budget-status/BudgetStatusWidget.vue'),
-    }),
-    budgetUsageByTarget: () => ({
-        component: import('@/services/dashboards/widgets/cost-widgets/budget-usage-by-target/BudgetUsageByTargetWidget.vue'),
-    }),
-    severityStatusByService: () => ({
-        component: import('@/services/dashboards/widgets/asset-widgets/severity-status-by-service/SeverityStatusByServiceWidget.vue'),
-    }),
-    countOfFailFindings: BASE_WIDGET_COMPONENTS.baseCountOfFindings,
-    countOfPassAndFailFindings: BASE_WIDGET_COMPONENTS.baseCountOfFindings,
-    trendOfPassAndFailFindings: () => ({
-        component: import('@/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/TrendOfPassAndFailFindingsWidget.vue'),
-    }),
-    totalFailFindingsStatus: () => ({
-        component: import('@/services/dashboards/widgets/asset-widgets/total-fail-findings-status/TotalFailFindingsStatusWidget.vue'),
-    }),
-    totalFailFindingsHistory: () => ({
-        component: import('@/services/dashboards/widgets/asset-widgets/total-fail-findings-history/TotalFailFindingsHistoryWidget.vue'),
-    }),
-    complianceStatus: () => ({
-        component: import('@/services/dashboards/widgets/asset-widgets/compliance-status/ComplianceStatusWidget.vue'),
-    }),
-};
diff --git a/apps/web/src/services/dashboards/widgets/_constants/widget-config-list-constant.ts b/apps/web/src/services/dashboards/widgets/_constants/widget-config-list-constant.ts
deleted file mode 100644
index 8a45742bfe..0000000000
--- a/apps/web/src/services/dashboards/widgets/_constants/widget-config-list-constant.ts
+++ /dev/null
@@ -1,87 +0,0 @@
-/* eslint-disable import/order */
-// base widgets
-import baseCountOfFindings from '@/services/dashboards/widgets/_base-widgets/base-count-of-findings/widget-config';
-import basePie from '@/services/dashboards/widgets/_base-widgets/base-pie/widget-config';
-import baseTrend from '@/services/dashboards/widgets/_base-widgets/base-trend/widget-config';
-
-// console widgets
-import complianceStatus from '@/services/dashboards/widgets/asset-widgets/compliance-status/widget-config';
-import countOfFailFindings from '@/services/dashboards/widgets/asset-widgets/count-of-fail-findings/widget-config';
-import countOfPassAndFailFindings from '@/services/dashboards/widgets/asset-widgets/count-of-pass-and-fail-findings/widget-config';
-import severityStatusByService from '@/services/dashboards/widgets/asset-widgets/severity-status-by-service/widget-config';
-import totalFailFindingsHistory from '@/services/dashboards/widgets/asset-widgets/total-fail-findings-history/widget-config';
-import totalFailFindingsStatus from '@/services/dashboards/widgets/asset-widgets/total-fail-findings-status/widget-config';
-import trendOfPassAndFailFindings from '@/services/dashboards/widgets/asset-widgets/trend-of-pass-and-fail-findings/widget-config';
-import budgetStatus from '@/services/dashboards/widgets/cost-widgets/budget-status/widget-config';
-import budgetUsageByTarget from '@/services/dashboards/widgets/cost-widgets/budget-usage-by-target/widget-config';
-import budgetUsageSummary from '@/services/dashboards/widgets/cost-widgets/budget-usage-summary/widget-config';
-import costByRegionMultiFields from '@/services/dashboards/widgets/cost-widgets/cost-by-region-multi-fields/widget-config';
-import costByRegion from '@/services/dashboards/widgets/cost-widgets/cost-by-region/widget-config';
-import costDonut from '@/services/dashboards/widgets/cost-widgets/cost-donut/widget-config';
-import costMap from '@/services/dashboards/widgets/cost-widgets/cost-map/widget-config';
-import costPie from '@/services/dashboards/widgets/cost-widgets/cost-pie/widget-config';
-import costSummaryMultiFields from '@/services/dashboards/widgets/cost-widgets/cost-summary-multi-fields/widget-config';
-import costTrendStacked from '@/services/dashboards/widgets/cost-widgets/cost-trend-stacked/widget-config';
-import costTrend from '@/services/dashboards/widgets/cost-widgets/cost-trend/widget-config';
-import monthlyCost from '@/services/dashboards/widgets/cost-widgets/monthly-cost/widget-config';
-
-import type { WidgetConfig } from '@/api-clients/dashboard/_types/widget-type';
-import type { BaseWidgetConfigKey, WidgetConfigKey } from '@/services/dashboards/widgets/_types/widget-list-type';
-
-export const BASE_WIDGET_CONFIG_KEYS = [
-    'baseTrend',
-    'basePie',
-    'baseCountOfFindings',
-] as const;
-export const CONSOLE_WIDGET_CONFIG_KEYS = [
-    'monthlyCost',
-    'budgetUsageSummary',
-    'costMap',
-    'costTrend',
-    'costTrendStacked',
-    'costSummaryMultiFields',
-    'costPie',
-    'costDonut',
-    'costByRegion',
-    'costByRegionMultiFields',
-    'budgetStatus',
-    'budgetUsageByTarget',
-    'severityStatusByService',
-    'countOfFailFindings',
-    'countOfPassAndFailFindings',
-    'trendOfPassAndFailFindings',
-    'totalFailFindingsStatus',
-    'totalFailFindingsHistory',
-    'complianceStatus',
-] as const;
-
-
-export const CONSOLE_WIDGET_CONFIGS: Record<WidgetConfigKey, Partial<WidgetConfig>> = {
-    // Cost Widgets
-    monthlyCost,
-    budgetUsageSummary,
-    costMap,
-    costTrend,
-    costTrendStacked,
-    costSummaryMultiFields,
-    costPie,
-    costDonut,
-    costByRegion,
-    costByRegionMultiFields,
-    budgetStatus,
-    budgetUsageByTarget,
-    // Asset Widgets
-    severityStatusByService,
-    countOfFailFindings,
-    countOfPassAndFailFindings,
-    trendOfPassAndFailFindings,
-    totalFailFindingsStatus,
-    totalFailFindingsHistory,
-    complianceStatus,
-};
-
-export const BASE_WIDGET_CONFIGS: Record<BaseWidgetConfigKey, Partial<WidgetConfig>> = {
-    baseTrend,
-    basePie,
-    baseCountOfFindings,
-};
diff --git a/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue b/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue
index a08f99ecd7..4f6d98e00b 100644
--- a/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue
+++ b/apps/web/src/services/project/v1/pages/ProjectDashboardPage.vue
@@ -13,17 +13,18 @@ import { PSkeleton } from '@cloudforet/mirinae';
 
 import ErrorHandler from '@/common/composables/error/errorHandler';
 
-import DashboardLabelsButton from '@/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue';
-import DashboardRefreshDropdown from '@/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue';
+import DashboardLabelsButton from '@/services/_shared/dashboard/dashboard-detail/components/DashboardLabelsButton.vue';
+import DashboardRefreshDropdown from '@/services/_shared/dashboard/dashboard-detail/components/DashboardRefreshDropdown.vue';
 import DashboardToolsetDateDropdown
-    from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue';
-import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue';
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardToolsetDateDropdown.vue';
 import DashboardWidgetContainerV2
-    from '@/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue';
+    from '@/services/_shared/dashboard/dashboard-detail/components/DashboardWidgetContainerV2.vue';
+import { useDashboardGetQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-get-query';
+import { useDashboardWidgetListQuery } from '@/services/_shared/dashboard/dashboard-detail/composables/use-dashboard-widget-list-query';
+import DashboardVariablesV2
+    from '@/services/_shared/dashboard/dashboard-detail/contextual-components/DashboardVariablesV2.vue';
+import { useDashboardDetailInfoStore } from '@/services/_shared/dashboard/dashboard-detail/stores/dashboard-detail-info-store';
 import type DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
-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';
 
 
@@ -126,9 +127,12 @@ onUnmounted(() => {
                                             is-project-dashboard
                                             disable-save-button
                                             :loading="dashboardLoading || widgetLoading"
+                                            :dashboard-id="props.dashboardId"
                     />
                 </div>
-                <dashboard-widget-container-v2 ref="widgetContainerRef" />
+                <dashboard-widget-container-v2 ref="widgetContainerRef"
+                                               :dashboard-id="props.dashboardId"
+                />
             </div>
         </div>
     </div>
diff --git a/apps/web/src/services/project/v2/components/ProjectDashboard.vue b/apps/web/src/services/project/v2/components/ProjectDashboard.vue
index 694697630c..3be1f0da30 100644
--- a/apps/web/src/services/project/v2/components/ProjectDashboard.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDashboard.vue
@@ -1,183 +1,63 @@
 <script lang="ts" setup>
 import {
     computed,
-    onUnmounted,
-    ref, watch,
 } from 'vue';
-import { useRoute, useRouter } from 'vue-router/composables';
 
-import { useQueryClient } from '@tanstack/vue-query';
 
-import { PSkeleton } from '@cloudforet/mirinae';
+import type { DashboardModel, DashboardFolderModel } from '@/api-clients/dashboard/_types/dashboard-type';
 
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
-import DashboardLabelsButton from '@/services/dashboards/components/dashboard-detail/DashboardLabelsButton.vue';
-import DashboardRefreshDropdown from '@/services/dashboards/components/dashboard-detail/DashboardRefreshDropdown.vue';
-import DashboardToolsetDateDropdown
-    from '@/services/dashboards/components/dashboard-detail/DashboardToolsetDateDropdown.vue';
-import DashboardVariablesV2 from '@/services/dashboards/components/dashboard-detail/DashboardVariablesV2.vue';
-import DashboardWidgetContainerV2
-    from '@/services/dashboards/components/dashboard-detail/DashboardWidgetContainerV2.vue';
-import type DashboardWidgetContainer from '@/services/dashboards/components/legacy/DashboardWidgetContainer.vue';
-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_V2 } from '@/services/project/v2/routes/route-constant';
-
 
+import { DASHBOARD_SHARED_ENTRY_POINT } from '@/services/_shared/dashboard/core/constants/dashboard-shared-constant';
+import DashboardDetailLayout from '@/services/_shared/dashboard/dashboard-detail/DashboardDetailLayout.vue';
+import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 interface Props {
-    id: string;
+    projectId?: string;
+    projectGroupId?: string;
     dashboardId: string;
 }
 const props = defineProps<Props>();
 
-const dashboardDetailStore = useDashboardDetailInfoStore();
-const dashboardDetailState = dashboardDetailStore.state;
-const widgetContainerRef = ref<typeof DashboardWidgetContainer|null>(null);
-const route = useRoute();
-const router = useRouter();
-
+const projectPageModalStore = useProjectPageModalStore();
 /* Query */
 const {
-    dashboard,
-    isError: dashboardError,
-    isLoading: dashboardLoading,
-} = useDashboardGetQuery({
-    dashboardId: computed(() => route.params.dashboardId),
+    dashboardList,
+    dashboardSharedList,
+} = useProjectDashboardQuery({
+    projectGroupId: computed(() => props.projectGroupId),
+    projectId: computed(() => props.projectId),
 });
 const {
-    widgetList,
-    isLoading: widgetLoading,
-    isError: widgetError,
-    keys: widgetListKeys,
-} = useDashboardWidgetListQuery({
-    dashboardId: computed(() => route.params.dashboardId),
+    dashboardFolderList,
+    dashboardFolderSharedList,
+} = useProjectDashboardFolderQuery({
+    projectGroupId: computed(() => props.projectGroupId),
+    projectId: computed(() => props.projectId),
 });
-const queryClient = useQueryClient();
 
-const handleRefresh = async () => {
-    await queryClient.invalidateQueries({ queryKey: widgetListKeys.publicWidgetListQueryKey.value });
-    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-    // @ts-ignore
-    if (widgetContainerRef.value) widgetContainerRef.value.refreshAllWidget();
-};
-watch([dashboard, () => route.params], ([_dashboard]) => {
-    if (_dashboard) {
-        dashboardDetailStore.reset();
-        dashboardDetailStore.setDashboardInfoStoreStateV2({
-            ..._dashboard,
-            project_id: route.params.id,
-        });
-    }
-}, { immediate: true });
-watch(widgetList, (_widgetList) => {
-    if (_widgetList.length) {
-        dashboardDetailStore.setDashboardWidgets(_widgetList);
-    }
-});
-watch([dashboardError, widgetError], ([_dashboardError, _widgetError]) => {
-    if (_dashboardError || _widgetError) {
-        ErrorHandler.handleError(_dashboardError || _widgetError);
-        router.push({ name: PROJECT_ROUTE_V2._NAME });
-    }
-});
 
-onUnmounted(() => {
-    dashboardDetailStore.reset();
-});
+const dashboardItems = computed<Array<DashboardModel>>(() => [...dashboardSharedList.value, ...dashboardList.value]);
+const dashboardFolderItems = computed<Array<DashboardFolderModel>>(() => [...dashboardFolderSharedList.value, ...dashboardFolderList.value]);
+
+const handleSelectToolset = (toolsetId: string|undefined) => {
+    if (toolsetId === 'edit') projectPageModalStore.openDashboardNameEditModal(props.dashboardId);
+    if (toolsetId === 'move') projectPageModalStore.openDashboardChangeFolderModal(props.dashboardId);
+    if (toolsetId === 'delete') projectPageModalStore.openDashboardDeleteModal(props.dashboardId);
+    if (toolsetId === 'clone') projectPageModalStore.openDashboardCloneModal(props.dashboardId);
+};
 </script>
 
 <template>
-    <div class="project-dashboard-page">
-        <div class="dashboard-wrapper">
-            <div class="title-wrapper">
-                <p-skeleton v-if="!dashboard?.name"
-                            width="20rem"
-                            height="1.5rem"
-                />
-                <div v-else
-                     class="dashboard-title"
-                >
-                    <p class="title">
-                        {{ dashboard?.name }}
-                    </p>
-                    <span class="beta-mark">beta</span>
-                </div>
-                <dashboard-labels-button class="ml-4"
-                                         dashboard-id="props.dashboardId"
-                />
-            </div>
-            <div class="contents-wrapper">
-                <div class="toolset">
-                    <dashboard-toolset-date-dropdown :date-range="dashboardDetailState.options.date_range" />
-                    <dashboard-refresh-dropdown :dashboard-id="props.dashboardId"
-                                                :loading="dashboardLoading || widgetLoading"
-                                                disable-interval
-                                                @refresh="handleRefresh"
-                    />
-                </div>
-                <div v-if="!dashboardLoading && !widgetLoading"
-                     class="selectors"
-                >
-                    <dashboard-variables-v2 class="variable-selector-wrapper"
-                                            is-project-dashboard
-                                            disable-save-button
-                                            :loading="dashboardLoading || widgetLoading"
-                    />
-                </div>
-                <dashboard-widget-container-v2 ref="widgetContainerRef" />
-            </div>
-        </div>
+    <div class="project-dashboard">
+        <dashboard-detail-layout :dashboard-id="props.dashboardId"
+                                 :dashboard-items="dashboardItems"
+                                 :folder-items="dashboardFolderItems"
+                                 :entry-point="DASHBOARD_SHARED_ENTRY_POINT.PROJECT"
+                                 @select-toolset="handleSelectToolset"
+        />
     </div>
 </template>
 
-<style lang="postcss" scoped>
-.project-dashboard-page {
-    .dashboard-wrapper {
-        .title-wrapper {
-            @apply flex items-center;
-            padding: 1.5rem 1rem;
-            .dashboard-title {
-                @apply flex;
-                .title {
-                    @apply text-label-xl font-bold text-gray-800;
-                }
-                .beta-mark {
-                    @apply text-coral-default;
-                    font-size: 0.625rem;
-                    cursor: default;
-                    margin-left: 0.125rem;
-                    height: 1.5rem;
-                }
-            }
-        }
-
-        .contents-wrapper {
-            @apply bg-gray-100 rounded-lg;
-            padding: 1rem 0.5rem 0.5rem;
-            margin: 0 1rem;
-            .toolset {
-                @apply flex justify-between items-center;
-            }
-            .selectors {
-                .variable-selector-wrapper {
-                    @apply flex flex-wrap gap-2;
-                    padding: 1rem 0 1.5rem;
-                    background-color: unset;
-                }
-            }
-        }
-    }
-
-    /* custom design-system component - p-heading */
-    :deep(.p-heading) {
-        .heading-wrapper {
-            line-height: unset;
-        }
-    }
-}
-</style>
-
diff --git a/apps/web/src/services/project/v2/components/ProjectDashboardChangeFolderModal.vue b/apps/web/src/services/project/v2/components/ProjectDashboardChangeFolderModal.vue
new file mode 100644
index 0000000000..e8e1ead73f
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDashboardChangeFolderModal.vue
@@ -0,0 +1,155 @@
+<script lang="ts" setup>
+import {
+    computed, reactive, watch,
+} from 'vue';
+
+
+import {
+    PButtonModal, PFieldGroup, PI, PSelectDropdown,
+} from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
+
+import type { DashboardChangeFolderParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { i18n } from '@/translations';
+
+import { showErrorMessage, showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import { useDashboardChangeFolderMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-change-folder-mutation';
+import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+interface Props {
+    projectGroupOrProjectId?: string;
+}
+const props = defineProps<Props>();
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.dashboardChangeFolderModalVisible);
+const dashboardId = computed(() => projectPageModalStore.state.targetId);
+const projectGroupOrProjectId = computed(() => props.projectGroupOrProjectId);
+const { projectGroupId, projectId } = useProjectOrGroupId(projectGroupOrProjectId);
+
+
+/* Query */
+const {
+    dashboardFolderList,
+    invalidateAllQueries: invalidateDashboardFolderList,
+} = useProjectDashboardFolderQuery({
+    projectId,
+    projectGroupId,
+});
+const {
+    dashboardList,
+} = useProjectDashboardQuery({
+    projectId,
+    projectGroupId,
+});
+
+const currentDashboard = computed<DashboardModel|undefined>(() => dashboardList.value.find((d) => d.dashboard_id === dashboardId.value));
+
+
+const state = reactive({
+    menuItems: computed<SelectDropdownMenuItem[]>(() => {
+        const defaultItem = {
+            label: i18n.t('DASHBOARDS.ALL_DASHBOARDS.NO_PARENT_FOLDER'),
+            name: '',
+        };
+        return [
+            defaultItem,
+            ...dashboardFolderList.value.map((folder) => ({
+                label: folder.name,
+                name: folder.folder_id,
+            })),
+        ];
+    }),
+    selectedFolderId: '' as string,
+});
+
+/* Api */
+const { mutate: changeFolder } = useDashboardChangeFolderMutation({
+    onSuccess: () => {
+        showSuccessMessage(i18n.t('DASHBOARDS.DETAIL.ALT_S_MOVE_DASHBOARD'), '');
+        invalidateDashboardFolderList();
+    },
+    onError: (e) => {
+        showErrorMessage(i18n.t('DASHBOARDS.DETAIL.ALT_E_MOVE_DASHBOARD'), e);
+    },
+    onSettled: () => {
+        projectPageModalStore.closeDashboardChangeFolderModal();
+    },
+});
+
+/* Event */
+const handleFormConfirm = async () => {
+    if (!dashboardId.value) {
+        console.error('dashboardId is required');
+        return;
+    }
+    if (state.selectedFolderId === currentDashboard.value?.folder_id) {
+        projectPageModalStore.closeDashboardChangeFolderModal();
+        return;
+    }
+    const params: DashboardChangeFolderParams = {
+        dashboard_id: dashboardId.value,
+    };
+    if (state.selectedFolderId) {
+        params.folder_id = state.selectedFolderId;
+    }
+    changeFolder(params);
+};
+
+/* Watcher */
+watch(visible, (_visible) => {
+    if (!_visible) {
+        state.selectedFolderId = '';
+        projectPageModalStore.resetTarget();
+    } else {
+        const _folderId = dashboardFolderList.value.find((d) => d.folder_id === currentDashboard.value?.folder_id)?.folder_id;
+        if (_folderId) state.selectedFolderId = _folderId;
+    }
+}, { immediate: true });
+</script>
+
+<template>
+    <p-button-modal
+        :header-title="$t('DASHBOARDS.DETAIL.MOVE_DASHBOARDS')"
+        size="sm"
+        fade
+        backdrop
+        :visible="visible"
+        @confirm="handleFormConfirm"
+        @closed="projectPageModalStore.resetTarget"
+        @cancel="projectPageModalStore.closeDashboardChangeFolderModal"
+        @close="projectPageModalStore.closeDashboardChangeFolderModal"
+    >
+        <template #body>
+            <p-field-group :label="$t('DASHBOARDS.ALL_DASHBOARDS.LOCATION')"
+                           required
+            >
+                <p-select-dropdown :selected.sync="state.selectedFolderId"
+                                   :menu="state.menuItems"
+                                   block
+                                   show-select-marker
+                                   use-fixed-menu-style
+                                   class="location-dropdown"
+                >
+                    <template #menu-item--format="{item}">
+                        <p-i v-if="item.name"
+                             name="ic_folder"
+                             width="1rem"
+                             height="1rem"
+                        />
+                        {{ item.label }}
+                    </template>
+                </p-select-dropdown>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.location-dropdown {
+    width: 100%;
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectDashboardCloneModal.vue b/apps/web/src/services/project/v2/components/ProjectDashboardCloneModal.vue
new file mode 100644
index 0000000000..76b0b465ee
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDashboardCloneModal.vue
@@ -0,0 +1,154 @@
+<script lang="ts" setup>
+import { computed, watch } from 'vue';
+import { useRouter } from 'vue-router/composables';
+
+import {
+    PButtonModal, PFieldGroup, PTextInput,
+} from '@cloudforet/mirinae';
+import { getClonedName } from '@cloudforet/utils';
+
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { DashboardCreateParams, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import { i18n } from '@/translations';
+
+import { showErrorMessage } from '@/lib/helper/notice-alert-helper';
+
+import { useFormValidator } from '@/common/composables/form-validator';
+
+
+import { useDashboardCloneMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-clone-mutation';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { useProjectPageContext } from '@/services/project/v2/composables/use-proejct-page-context';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+interface Props {
+    projectGroupOrProjectId: string;
+}
+const props = defineProps<Props>();
+const router = useRouter();
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.dashboardCloneModalVisible);
+const dashboardId = computed(() => projectPageModalStore.state.targetId);
+const projectGroupOrProjectId = computed(() => props.projectGroupOrProjectId);
+const { projectGroupId, projectId } = useProjectOrGroupId(projectGroupOrProjectId);
+
+/* Query */
+const {
+    dashboardList,
+    dashboardSharedList,
+    setQueryData,
+} = useProjectDashboardQuery({
+    projectId,
+    projectGroupId,
+});
+
+const projectPageContext = useProjectPageContext({
+    projectGroupId,
+    projectId,
+});
+const existingNameList = computed<string[]>(() => dashboardList.value.map((d) => d.name));
+const currentDashboard = computed<DashboardModel|undefined>(() => [...dashboardList.value, ...dashboardSharedList.value].find((d) => d.dashboard_id === dashboardId.value));
+
+const {
+    forms: {
+        name,
+    },
+    setForm,
+    invalidState,
+    invalidTexts,
+    isAllValid,
+} = useFormValidator({
+    name: '',
+}, {
+    name(value: string) {
+        if (value.length > 100) return i18n.t('DASHBOARDS.FORM.VALIDATION_DASHBOARD_NAME_LENGTH');
+        if (!value.trim().length) return i18n.t('DASHBOARDS.FORM.VALIDATION_DASHBOARD_NAME_INPUT');
+        if (existingNameList.value.find((d) => d === value)) {
+            return i18n.t('DASHBOARDS.FORM.VALIDATION_DASHBOARD_NAME_UNIQUE');
+        }
+        return '';
+    },
+});
+
+/* Event */
+const handleConfirm = async () => {
+    if (!isAllValid) return;
+
+    const _sharedDashboard: DashboardCreateParams = {
+        name: name.value,
+        resource_group: projectPageContext.value === 'PROJECT_GROUP' ? RESOURCE_GROUP.WORKSPACE : RESOURCE_GROUP.PROJECT,
+    };
+
+    if (projectPageContext.value === 'PROJECT_GROUP') {
+        _sharedDashboard.project_group_id = projectGroupId.value;
+    } else if (projectPageContext.value === 'PROJECT') {
+        _sharedDashboard.project_id = projectId.value;
+    }
+
+    cloneDashboard(_sharedDashboard as DashboardCreateParams, dashboardId.value);
+};
+
+const { mutate: cloneDashboard, isPending: dashboardCloneLoading } = useDashboardCloneMutation({
+    onSuccess: async (data: DashboardModel) => {
+        setQueryData([data as PublicDashboardModel]);
+        projectPageModalStore.closeDashboardCloneModal();
+        await router.replace({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: projectGroupOrProjectId.value,
+                dashboardId: data.dashboard_id,
+            },
+        }).catch(() => {});
+    },
+    onError: (e) => {
+        showErrorMessage(i18n.t('DASHBOARDS.FORM.ALT_E_CLONE_DASHBOARD'), e);
+    },
+});
+
+watch(visible, (_visible) => {
+    if (_visible) {
+        const _clonedName = getClonedName(existingNameList.value, currentDashboard.value?.name ?? '');
+        setForm('name', _clonedName);
+    }
+}, { immediate: true });
+</script>
+
+<template>
+    <p-button-modal :visible="visible"
+                    :header-title="$t('DASHBOARDS.FORM.CLONE_TITLE')"
+                    size="sm"
+                    :disabled="!isAllValid"
+                    :loading="dashboardCloneLoading"
+                    class="dashboard-clone-modal"
+                    @confirm="handleConfirm"
+                    @close="projectPageModalStore.closeDashboardCloneModal"
+                    @cancel="projectPageModalStore.closeDashboardCloneModal"
+                    @closed="projectPageModalStore.resetTarget"
+    >
+        <template #body>
+            <p-field-group :label="$t('DASHBOARDS.FORM.LABEL_DASHBOARD_NAME')"
+                           :invalid="invalidState.name"
+                           :invalid-text="invalidTexts.name"
+                           required
+            >
+                <template #default="{ invalid }">
+                    <p-text-input :value="name"
+                                  :invalid="invalid"
+                                  @update:value="setForm('name', $event)"
+                    />
+                </template>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.dashboard-clone-modal {
+    .p-text-input {
+        @apply w-full;
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectDashboardDeleteModal.vue b/apps/web/src/services/project/v2/components/ProjectDashboardDeleteModal.vue
new file mode 100644
index 0000000000..909a861022
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDashboardDeleteModal.vue
@@ -0,0 +1,74 @@
+<script lang="ts" setup>
+import { computed } from 'vue';
+import { useRouter } from 'vue-router/composables';
+
+
+import { i18n } from '@/translations';
+
+
+import DeleteModal from '@/common/components/modals/DeleteModal.vue';
+import ErrorHandler from '@/common/composables/error/errorHandler';
+
+import { useDashboardDeleteMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-delete-mutation';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+import { PROJECT_ROUTE_V2 } from '../routes/route-constant';
+
+interface Props {
+    projectGroupOrProjectId: string;
+}
+const props = defineProps<Props>();
+const router = useRouter();
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.dashboardDeleteModalVisible);
+const dashboardId = computed(() => projectPageModalStore.state.targetId);
+const projectGroupOrProjectId = computed(() => props.projectGroupOrProjectId);
+const { projectGroupId, projectId } = useProjectOrGroupId(projectGroupOrProjectId);
+/* Query */
+const {
+    invalidateAllQueries: invalidateDashboardList,
+} = useProjectDashboardQuery({
+    projectId,
+    projectGroupId,
+});
+
+const handleDeleteDashboardConfirm = async () => {
+    if (!dashboardId.value) {
+        throw new Error('Dashboard ID is not provided');
+    }
+    deleteDashboard({
+        dashboard_id: dashboardId.value,
+    });
+};
+
+/* Api */
+const { mutate: deleteDashboard, isPending: loading } = useDashboardDeleteMutation({
+    onSuccess: async () => {
+        invalidateDashboardList();
+        projectPageModalStore.closeDashboardDeleteModal();
+        await router.replace({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: projectGroupOrProjectId.value,
+            },
+        }).catch(() => {});
+    },
+    onError: (error) => {
+        ErrorHandler.handleRequestError(error, i18n.t('DASHBOARDS.FORM.ALT_E_DELETE_DASHBOARD'));
+    },
+});
+
+</script>
+
+<template>
+    <delete-modal :header-title="$t('DASHBOARDS.FORM.DELETE_TITLE')"
+                  :visible="visible"
+                  :loading="loading"
+                  @confirm="handleDeleteDashboardConfirm"
+                  @closed="projectPageModalStore.resetTarget"
+                  @cancel="projectPageModalStore.closeDashboardDeleteModal"
+                  @close="projectPageModalStore.closeDashboardDeleteModal"
+    />
+</template>
diff --git a/apps/web/src/services/project/v2/components/ProjectDashboardFolderFormModal.vue b/apps/web/src/services/project/v2/components/ProjectDashboardFolderFormModal.vue
new file mode 100644
index 0000000000..3539af959d
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDashboardFolderFormModal.vue
@@ -0,0 +1,187 @@
+<script lang="ts" setup>
+import {
+    computed, watch,
+} from 'vue';
+
+import { useMutation } from '@tanstack/vue-query';
+
+import {
+    PButtonModal, PFieldGroup, PTextInput,
+} from '@cloudforet/mirinae';
+
+import { RESOURCE_GROUP } from '@/api-clients/_common/schema/constant';
+import type { FolderCreateParams, FolderUpdateParams } from '@/api-clients/dashboard/_types/folder-type';
+import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
+import type { PublicFolderCreateParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/create';
+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 { i18n } from '@/translations';
+
+import { useUserStore } from '@/store/user/user-store';
+
+import { showSuccessMessage } from '@/lib/helper/notice-alert-helper';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
+import { useProjectPageContext } from '@/services/project/v2/composables/use-proejct-page-context';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+interface Props {
+    projectGroupOrProjectId?: string;
+}
+const props = defineProps<Props>();
+
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.folderFormModalVisible);
+const targetFolderId = computed(() => projectPageModalStore.state.targetId);
+const projectGroupOrProjectId = computed(() => props.projectGroupOrProjectId);
+const { projectGroupId, projectId } = useProjectOrGroupId(projectGroupOrProjectId);
+const userStore = useUserStore();
+const { publicFolderAPI } = usePublicFolderApi();
+
+/* Query */
+const {
+    dashboardFolderList,
+    setQueryData,
+    invalidateAllQueries,
+} = useProjectDashboardFolderQuery({
+    projectId,
+    projectGroupId,
+});
+
+const projectPageContext = useProjectPageContext({
+    projectGroupId,
+    projectId,
+});
+
+const existingNameList = computed<string[]>(() => dashboardFolderList.value.map((d) => d.name));
+const headerTitle = computed(() => {
+    if (targetFolderId.value) return i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.EDIT_FOLDER_NAME');
+    return i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.CREATE_FOLDER');
+});
+const {
+    forms: { name },
+    setForm,
+    invalidState,
+    invalidTexts,
+    isAllValid,
+    initForm,
+} = useFormValidator({
+    name: undefined as string|undefined,
+}, {
+    name(value) {
+        if (!value) return i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.NAME_REQUIRED');
+        if (existingNameList.value.find((d) => d === value)) return i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.NAME_DUPLICATED');
+        return true;
+    },
+});
+
+/* Event */
+const handleFormConfirm = async () => {
+    if (!isAllValid) return;
+    if (targetFolderId.value) {
+        const params: FolderUpdateParams = {
+            folder_id: targetFolderId.value,
+            name: name.value as string,
+        };
+        updateFolder(params);
+    } else {
+        const params: FolderCreateParams = {
+            name: name.value as string,
+            tags: { created_by: userStore.state.userId },
+            resource_group: projectPageContext.value === 'PROJECT_GROUP' ? RESOURCE_GROUP.WORKSPACE : RESOURCE_GROUP.PROJECT,
+        };
+        if (projectPageContext.value === 'PROJECT_GROUP') {
+            params.project_group_id = projectGroupId.value;
+        } else {
+            params.project_id = projectId.value;
+        }
+        createFolder(params);
+    }
+};
+
+const { mutate: createFolder } = useMutation(
+    {
+        mutationFn: (params: PublicFolderCreateParameters) => publicFolderAPI.create(params as PublicFolderCreateParameters),
+        onSuccess: (folder: PublicFolderModel) => {
+            showSuccessMessage(i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_S_CREATE_FOLDER'), '');
+            projectPageModalStore.closeFolderFormModal();
+            setQueryData([folder]);
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_E_CREATE_FOLDER'));
+        },
+    },
+);
+
+const { mutate: updateFolder } = useMutation(
+    {
+        mutationFn: (params: PublicFolderUpdateParameters) => publicFolderAPI.update(params as PublicFolderUpdateParameters),
+        onSuccess: () => {
+            showSuccessMessage(i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_S_UPDATE_FOLDER'), '');
+            projectPageModalStore.closeFolderFormModal();
+            invalidateAllQueries();
+        },
+        onError: (e) => {
+            ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.ALT_E_UPDATE_FOLDER'));
+        },
+    },
+);
+
+/* Watcher */
+watch(visible, (_visible) => {
+    if (!_visible) return;
+    if (!targetFolderId.value) {
+        initForm();
+
+        return;
+    }
+    const folder = dashboardFolderList.value.find((d) => d.folder_id === targetFolderId.value);
+    if (folder) {
+        setForm('name', folder.name);
+    }
+});
+
+</script>
+
+<template>
+    <p-button-modal
+        :header-title="headerTitle"
+        size="sm"
+        fade
+        backdrop
+        :visible.sync="visible"
+        :disabled="!isAllValid"
+        @confirm="handleFormConfirm"
+        @closed="projectPageModalStore.resetTarget"
+        @cancel="projectPageModalStore.closeFolderFormModal"
+        @close="projectPageModalStore.closeFolderFormModal"
+    >
+        <template #body>
+            <p-field-group class="folder-name-input-wrapper"
+                           :label="$t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.NAME')"
+                           :invalid="invalidState.name"
+                           :invalid-text="invalidTexts.name"
+                           required
+            >
+                <template #default="{invalid}">
+                    <p-text-input :value="name"
+                                  class="block w-full"
+                                  :placeholder="$t('DASHBOARDS.ALL_DASHBOARDS.FOLDER.NAME')"
+                                  :invalid="invalid"
+                                  @update:value="setForm('name', $event)"
+                    />
+                </template>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.folder-name-input-wrapper {
+    margin-bottom: 2rem;
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectDashboardNameEditModal.vue b/apps/web/src/services/project/v2/components/ProjectDashboardNameEditModal.vue
new file mode 100644
index 0000000000..2fb40b1607
--- /dev/null
+++ b/apps/web/src/services/project/v2/components/ProjectDashboardNameEditModal.vue
@@ -0,0 +1,127 @@
+<script lang="ts" setup>
+import {
+    computed, watch,
+} from 'vue';
+
+import { PButtonModal, PFieldGroup, PTextInput } from '@cloudforet/mirinae';
+
+import { i18n } from '@/translations';
+
+import ErrorHandler from '@/common/composables/error/errorHandler';
+import { useFormValidator } from '@/common/composables/form-validator';
+
+import { useDashboardUpdateMutation } from '@/services/_shared/dashboard/core/composables/mutations/use-dashboard-update-mutation';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
+
+interface Props {
+    projectGroupOrProjectId?: string;
+}
+const props = defineProps<Props>();
+const projectPageModalStore = useProjectPageModalStore();
+const visible = computed(() => projectPageModalStore.state.dashboardNameEditModalVisible);
+const dashboardId = computed(() => projectPageModalStore.state.targetId);
+const projectGroupOrProjectId = computed(() => props.projectGroupOrProjectId);
+const { projectGroupId, projectId } = useProjectOrGroupId(projectGroupOrProjectId);
+
+/* Query */
+const {
+    dashboardList,
+    invalidateAllQueries: invalidateDashboardList,
+} = useProjectDashboardQuery({
+    projectId,
+    projectGroupId,
+});
+const existingNameList = computed<string[]>(() => dashboardList.value.map((d) => d.name));
+const originName = computed<string>(() => {
+    const dashboard = dashboardList.value.find((d) => d.dashboard_id === dashboardId.value);
+    return dashboard?.name || '';
+});
+
+const {
+    forms: {
+        name,
+    },
+    setForm,
+    invalidState,
+    invalidTexts,
+    isAllValid,
+} = useFormValidator({
+    name: '',
+}, {
+    name(value: string) {
+        if (loading.value) return '';
+        if (value === originName.value) return '';
+        if (value.length > 100) return i18n.t('DASHBOARDS.FORM.VALIDATION_DASHBOARD_NAME_LENGTH');
+        if (!value.trim().length) return i18n.t('DASHBOARDS.FORM.VALIDATION_DASHBOARD_NAME_INPUT');
+        if (existingNameList.value.find((d) => d === value)) return i18n.t('DASHBOARDS.FORM.VALIDATION_DASHBOARD_NAME_UNIQUE');
+        return '';
+    },
+});
+
+const { mutate: updateDashboard, isPending: loading } = useDashboardUpdateMutation({
+    onSuccess: () => {
+        invalidateDashboardList();
+    },
+    onError: (e) => {
+        ErrorHandler.handleRequestError(e, i18n.t('DASHBOARDS.FORM.ALT_E_EDIT_NAME'));
+    },
+    onSettled() {
+        projectPageModalStore.closeDashboardNameEditModal();
+    },
+});
+
+const handleConfirm = async () => {
+    if (!dashboardId.value) {
+        console.error('dashboardId is required');
+        return;
+    }
+    updateDashboard({
+        dashboard_id: dashboardId.value,
+        name: name.value,
+    });
+};
+
+/* Watcher */
+watch(visible, (_visible) => {
+    if (!_visible) return;
+    setForm('name', originName.value || '');
+}, { immediate: true });
+</script>
+
+<template>
+    <p-button-modal :visible="visible"
+                    :header-title="$t('DASHBOARDS.FORM.UPDATE_TITLE')"
+                    :disabled="!isAllValid"
+                    size="sm"
+                    class="dashboard-name-edit-modal"
+                    @confirm="handleConfirm"
+                    @closed="projectPageModalStore.resetTarget"
+                    @cancel="projectPageModalStore.closeDashboardNameEditModal"
+                    @close="projectPageModalStore.closeDashboardNameEditModal"
+    >
+        <template #body>
+            <p-field-group :label="$t('DASHBOARDS.FORM.LABEL_DASHBOARD_NAME')"
+                           :invalid="!loading && invalidState.name"
+                           :invalid-text="loading ? '' : invalidTexts.name"
+                           required
+            >
+                <template #default="{invalid}">
+                    <p-text-input :value="name"
+                                  :invalid="invalid"
+                                  @update:value="setForm('name', $event)"
+                    />
+                </template>
+            </p-field-group>
+        </template>
+    </p-button-modal>
+</template>
+
+<style lang="postcss" scoped>
+.dashboard-name-edit-modal {
+    .p-text-input {
+        @apply w-full;
+    }
+}
+</style>
diff --git a/apps/web/src/services/project/v2/components/ProjectDetailTab.vue b/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
index 0dd147982f..f0678a0241 100644
--- a/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
+++ b/apps/web/src/services/project/v2/components/ProjectDetailTab.vue
@@ -1,25 +1,31 @@
 <script setup lang="ts">
-import { computed, ref, watch } from 'vue';
+import {
+    computed, nextTick, onBeforeUnmount, onMounted, ref, watch,
+} from 'vue';
+import { useRouter } from 'vue-router/composables';
 
-import { PTab } from '@cloudforet/mirinae';
+import { PTab, PSelectDropdown } from '@cloudforet/mirinae';
+import type { SelectDropdownMenuItem } from '@cloudforet/mirinae/types/controls/dropdown/select-dropdown/type';
 import type { TabItem } from '@cloudforet/mirinae/types/navigation/tabs/tab/type';
 
-import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
-import type { PublicDashboardListParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/list';
-import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
-import type { PublicFolderListParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/list';
-import { useScopedQuery } from '@/query/composables/use-scoped-query';
-import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+import type { DashboardFolderModel, DashboardModel } from '@/api-clients/dashboard/_types/dashboard-type';
+import { i18n } from '@/translations';
 
 import ProjectDashboard from '@/services/project/v2/components/ProjectDashboard.vue';
-
+import ProjectOverview from '@/services/project/v2/components/ProjectOverview.vue';
+import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
+import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
 const props = defineProps<{
-    projectId: string,
+    projectId?: string,
+    projectGroupId?: string,
     dashboardId?: string,
 }>();
 const emit = defineEmits<{(e: 'update:dashboard-id', value?: string): void;}>();
-
+const router = useRouter();
+const projectPageModalStore = useProjectPageModalStore();
 
 const activeTab = ref('overview');
 watch(() => props.dashboardId, (did) => {
@@ -29,95 +35,133 @@ watch(() => props.projectId, () => {
     activeTab.value = 'overview';
 });
 
-/* dashboard tabs */
-const { publicDashboardAPI } = usePublicDashboardApi();
-const { publicFolderAPI } = usePublicFolderApi();
-const { key: dashboardListQueryKey, params: dashboardListParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', {
-    params: computed<PublicDashboardListParameters>(() => ({
-        // project_id: props.id,
-        query: {
-            filter: [
-                { k: 'shared', v: true, o: 'eq' },
-                { k: 'version', v: '1.0', o: 'not' },
-                { k: 'scope', v: 'PROJECT', o: 'eq' },
-            ],
-        },
-    })),
+/* mounted */
+const mounted = ref(false);
+onMounted(() => {
+    nextTick(() => {
+        mounted.value = true;
+    });
 });
-const { data: dashboardList } = useScopedQuery({
-    queryKey: dashboardListQueryKey,
-    queryFn: () => publicDashboardAPI.list(dashboardListParams.value),
-    select: (data) => data?.results ?? [],
-    staleTime: 1000 * 60 * 5, // 5 minutes
-    gcTime: 1000 * 60 * 5, // 5 minutes
+onBeforeUnmount(() => {
+    mounted.value = false;
 });
-const { key: dashboardFolderListQueryKey, params: dashboardFolderListParams } = useServiceQueryKey('dashboard', 'public-folder', 'list', {
-    params: computed<PublicFolderListParameters>(() => ({
-        // project_id: props.id,
-        query: {
-            filter: [
-                { k: 'shared', v: true, o: 'eq' },
-                { k: 'scope', v: 'PROJECT', o: 'eq' },
-            ],
-        },
-    })),
+
+/* Query */
+const {
+    dashboardList,
+    dashboardSharedList,
+} = useProjectDashboardQuery({
+    projectGroupId: computed(() => props.projectGroupId),
+    projectId: computed(() => props.projectId),
 });
-const { data: dashboardFolderList } = useScopedQuery({
-    queryKey: dashboardFolderListQueryKey,
-    queryFn: () => publicFolderAPI.list(dashboardFolderListParams.value),
-    select: (data) => data?.results || [],
-    staleTime: 1000 * 60 * 5, // 5 minutes
-    gcTime: 1000 * 60 * 5, // 5 minutes
+const {
+    dashboardFolderList,
+    dashboardFolderSharedList,
+} = useProjectDashboardFolderQuery({
+    projectGroupId: computed(() => props.projectGroupId),
+    projectId: computed(() => props.projectId),
 });
 
+const dashboardItems = computed<Array<DashboardModel>>(() => [...dashboardSharedList.value, ...dashboardList.value]);
+const dashboardFolderItems = computed<Array<DashboardFolderModel>>(() => [...dashboardFolderSharedList.value, ...dashboardFolderList.value]);
+
 const tabs = computed<TabItem[]>(() => {
-    const folderTabs = dashboardFolderList.value?.map((folder) => ({
+    const folderTabs = dashboardFolderItems.value?.map((folder) => ({
         name: folder.folder_id,
         label: folder.name,
         tabType: 'folder',
         icon: 'ic_folder',
-        subItems: dashboardList.value?.filter((dashboard) => dashboard.folder_id === folder.folder_id).map((dashboard) => ({
+        subItems: dashboardItems.value?.filter((dashboard) => dashboard.folder_id === folder.folder_id).map((dashboard) => ({
             name: dashboard.dashboard_id,
             label: dashboard.name,
             icon: 'ic_service_dashboard',
         })),
     })) ?? [];
-    const dashboardTabs = dashboardList.value?.filter((dashboard) => !dashboard.folder_id).map((dashboard) => ({
+    const dashboardTabs = dashboardItems.value?.filter((dashboard) => !dashboard.folder_id).map((dashboard) => ({
         name: dashboard.dashboard_id,
         label: dashboard.name,
         icon: 'ic_service_dashboard',
     })) ?? [];
     return [
-        { name: 'overview', label: 'Overview' }, // TODO: i18n
+        { name: 'overview', label: i18n.t('PROJECT.LANDING.OVERVIEW') },
         ...folderTabs,
         ...dashboardTabs,
     ];
 });
+// HACK: To trigger render tab on mounted, to trigger render on i18n change
+const tabNamesKey = computed(() => tabs.value.map((tab) => tab.label).join(','));
 
-const onChangeTab = (tab: string) => {
+const handleUpdateActiveTab = (tab: string) => {
     activeTab.value = tab;
     emit('update:dashboard-id', tab === 'overview' ? undefined : tab);
 };
+
+const projectDashboardCreateMenuItems = computed(() => [
+    {
+        label: i18n.t('PROJECT.DASHBOARD.CREATE.CREATE_DASHBOARD'),
+        name: 'dashboard',
+        icon: 'ic_plus',
+    },
+    {
+        label: i18n.t('PROJECT.DASHBOARD.CREATE.CREATE_FOLDER'),
+        name: 'folder',
+        icon: 'ic_plus',
+    },
+]);
+
+const handleCreateProjectDashboard = (item: string|number|SelectDropdownMenuItem) => {
+    const projectGroupOrProjectId = props.projectGroupId ?? props.projectId;
+    if (!projectGroupOrProjectId) {
+        console.warn('projectGroupId or projectId is not selected');
+        return;
+    }
+    if (item === 'dashboard') {
+        router.push({
+            name: PROJECT_ROUTE_V2.DASHBOARD_CREATE._NAME,
+            params: {
+                projectGroupOrProjectId,
+            },
+        }).catch(() => {});
+    } else if (item === 'folder') {
+        projectPageModalStore.openCreateFolderFormModal();
+    }
+};
+
 </script>
 
 <template>
     <div>
-        <p-tab :tabs="tabs"
+        <p-tab :key="`${props.projectId}-${tabNamesKey}`"
+               :tabs="tabs"
                :active-tab="activeTab"
-               @change="onChangeTab"
+               @update:active-tab="handleUpdateActiveTab"
         >
-            <template #default="tab">
-                <keep-alive v-if="tab.name === 'overview'">
-                    <div v-if="activeTab === 'overview'">
-                        Overview will be implemented later.
-                    </div>
-                </keep-alive>
-                <keep-alive v-else-if="tab.name">
-                    <project-dashboard :id="props.projectId"
-                                       :key="`${tab.name}-${props.projectId}`"
-                                       :dashboard-id="tab.name"
-                    />
-                </keep-alive>
+            <template #default>
+                <div>
+                    <keep-alive>
+                        <project-overview v-if="activeTab === 'overview'"
+                                          :project-group-id="props.projectGroupId"
+                                          :project-id="props.projectId"
+                        />
+                        <project-dashboard v-else
+                                           :key="`${props.projectId}-${activeTab}`"
+                                           :project-id="props.projectId"
+                                           :project-group-id="props.projectGroupId"
+                                           :dashboard-id="activeTab"
+                        />
+                    </keep-alive>
+                </div>
+            </template>
+            <template v-if="props.projectId || props.projectGroupId"
+                      #header-right-contents
+            >
+                <p-select-dropdown style-type="tertiary-icon-button"
+                                   button-icon="ic_plus"
+                                   size="sm"
+                                   menu-position="right"
+                                   :menu="projectDashboardCreateMenuItems"
+                                   @select="handleCreateProjectDashboard"
+                />
             </template>
         </p-tab>
     </div>
diff --git a/apps/web/src/services/project/v2/components/ProjectOverview.vue b/apps/web/src/services/project/v2/components/ProjectOverview.vue
index 323d467a48..6e0c7c34d8 100644
--- a/apps/web/src/services/project/v2/components/ProjectOverview.vue
+++ b/apps/web/src/services/project/v2/components/ProjectOverview.vue
@@ -1,7 +1,51 @@
 <script setup lang="ts">
+import { computed, toRef } from 'vue';
 
+import { MENU_ID } from '@/lib/menu/config';
+
+import { useContentsAccessibility } from '@/common/composables/contents-accessibility';
+
+import AccountSummary from '@/services/workspace-home/shared/components/AccountSummary.vue';
+import AssetSummary from '@/services/workspace-home/shared/components/AssetSummary.vue';
+import CostSummary from '@/services/workspace-home/shared/components/CostSummary.vue';
+import { useProjectIdsFromGroup } from '@/services/workspace-home/shared/composables/use-project-ids-from-group';
+
+const { visibleContents } = useContentsAccessibility(MENU_ID.ASSET_INVENTORY);
+
+const props = defineProps<{
+    projectGroupId?: string;
+    projectId?: string;
+}>();
+const childProjectIds = useProjectIdsFromGroup(toRef(props, 'projectGroupId'));
+const projectIds = computed(() => {
+    if (props.projectId) {
+        return [props.projectId];
+    }
+    if (props.projectGroupId) {
+        return childProjectIds.value;
+    }
+    return [];
+});
 </script>
 
 <template>
-    <div>overview</div>
+    <div>
+        <div class="bg-gray-100 py-1 border-gray-100 border-x overflow-hidden">
+            <div class="flex space-x-1 tablet:flex-wrap">
+                <asset-summary v-if="visibleContents"
+                               mode="project"
+                               :project-ids="projectIds"
+                               class="w-1/2 tablet:w-full bg-white rounded-lg"
+                />
+                <account-summary mode="project"
+                                 :project-ids="projectIds"
+                                 class="w-1/2 tablet:w-full bg-white rounded-lg"
+                />
+            </div>
+        </div>
+        <cost-summary mode="project"
+                      :project-ids="projectIds"
+                      class="bg-white rounded-lg"
+        />
+    </div>
 </template>
diff --git a/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts
new file mode 100644
index 0000000000..e286e3e7f3
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-folder-query.ts
@@ -0,0 +1,100 @@
+import {
+    computed, type ComputedRef,
+} from 'vue';
+
+import { useQueryClient } from '@tanstack/vue-query';
+
+import { usePublicFolderApi } from '@/api-clients/dashboard/public-folder/composables/use-public-folder-api';
+import type { PublicFolderListParameters } from '@/api-clients/dashboard/public-folder/schema/api-verbs/list';
+import type { PublicFolderModel } from '@/api-clients/dashboard/public-folder/schema/model';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import { useProjectPageContext } from '@/services/project/v2/composables/use-proejct-page-context';
+
+const STALE_TIME = 1000 * 60 * 5;
+const GC_TIME = 1000 * 60 * 5;
+
+
+
+
+export const useProjectDashboardFolderQuery = (options: {
+    projectId?: ComputedRef<string|undefined>,
+    projectGroupId?: ComputedRef<string|undefined>,
+}) => {
+    const { publicFolderAPI } = usePublicFolderApi();
+    const queryClient = useQueryClient();
+
+    const projectPageContext = useProjectPageContext({
+        projectGroupId: options.projectGroupId,
+        projectId: options.projectId,
+    });
+
+    /* Query Keys */
+    const { key: dashboardFolderSharedListQueryKey, params: dashboardFolderSharedListParams } = useServiceQueryKey('dashboard', 'public-folder', 'list', {
+        contextKey: projectPageContext.value,
+        params: computed<PublicFolderListParameters>(() => ({
+            project_id: '*',
+            // project_group_id: '*',
+            query: {
+                filter: [
+                    { k: 'scope', v: 'PROJECT', o: 'eq' },
+                    { k: 'shared', v: true, o: 'eq' },
+                ],
+            },
+        })),
+    });
+    const { key: dashboardFolderListQueryKey, params: dashboardFolderListParams } = useServiceQueryKey('dashboard', 'public-folder', 'list', {
+        contextKey: projectPageContext.value,
+        params: computed<PublicFolderListParameters>(() => ({
+            project_id: options.projectId?.value,
+            project_group_id: options.projectGroupId?.value,
+            query: {
+                filter: [
+                    { k: 'resource_group', v: 'PROJECT', o: 'eq' },
+                ],
+            },
+        })),
+    });
+
+    /* Querys */
+    const dashboardFolderSharedListQuery = useScopedQuery({
+        queryKey: dashboardFolderSharedListQueryKey,
+        queryFn: () => publicFolderAPI.list(dashboardFolderSharedListParams.value),
+        select: (data) => data?.results ?? [],
+        enabled: computed(() => !!projectPageContext.value),
+        staleTime: STALE_TIME,
+        gcTime: GC_TIME,
+    }, ['WORKSPACE']);
+
+
+    const dashboardFolderListQuery = useScopedQuery({
+        queryKey: dashboardFolderListQueryKey,
+        queryFn: () => publicFolderAPI.list(dashboardFolderListParams.value),
+        select: (data) => data?.results ?? [],
+        enabled: computed(() => !!projectPageContext.value),
+        staleTime: STALE_TIME,
+        gcTime: GC_TIME,
+    }, ['WORKSPACE']);
+
+    const isLoading = computed<boolean>(() => dashboardFolderSharedListQuery.isFetching.value || dashboardFolderListQuery.isFetching.value);
+
+    const setQueryData = (newData: PublicFolderModel[]) => {
+        queryClient.setQueryData(dashboardFolderListQueryKey.value, {
+            results: [...(dashboardFolderListQuery.data.value ?? []), ...newData],
+        });
+    };
+
+    const invalidateAllQueries = () => {
+        queryClient.invalidateQueries({ queryKey: dashboardFolderListQueryKey.value });
+    };
+
+    return {
+        dashboardFolderSharedList: computed<PublicFolderModel[]>(() => dashboardFolderSharedListQuery.data.value ?? []),
+        dashboardFolderList: computed<PublicFolderModel[]>(() => dashboardFolderListQuery.data.value ?? []),
+        isLoading,
+        setQueryData,
+        invalidateAllQueries,
+    };
+};
+
diff --git a/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts
new file mode 100644
index 0000000000..af73ceeb9f
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/queries/use-project-dashboard-query.ts
@@ -0,0 +1,103 @@
+import {
+    computed, type ComputedRef,
+} from 'vue';
+
+import { useQueryClient } from '@tanstack/vue-query';
+
+import { usePublicDashboardApi } from '@/api-clients/dashboard/public-dashboard/composables/use-public-dashboard-api';
+import type { PublicDashboardListParameters } from '@/api-clients/dashboard/public-dashboard/schema/api-verbs/list';
+import type { PublicDashboardModel } from '@/api-clients/dashboard/public-dashboard/schema/model';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import { useProjectPageContext } from '@/services/project/v2/composables/use-proejct-page-context';
+
+const STALE_TIME = 1000 * 60 * 5;
+const GC_TIME = 1000 * 60 * 5;
+
+
+
+
+export const useProjectDashboardQuery = (options: {
+    projectId: ComputedRef<string|undefined>,
+    projectGroupId?: ComputedRef<string|undefined>,
+}) => {
+    const { publicDashboardAPI } = usePublicDashboardApi();
+    const queryClient = useQueryClient();
+
+    const projectPageContext = useProjectPageContext({
+        projectGroupId: options.projectGroupId,
+        projectId: options.projectId,
+    });
+
+    /* Query Keys */
+    const { key: dashboardSharedListQueryKey, params: dashboardSharedListParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', {
+        contextKey: projectPageContext.value,
+        params: computed<PublicDashboardListParameters>(() => ({
+            project_id: '*',
+            // project_group_id: '*',
+            query: {
+                filter: [
+                    { k: 'version', v: '1.0', o: 'not' },
+                    { k: 'scope', v: 'PROJECT', o: 'eq' },
+                    { k: 'shared', v: true, o: 'eq' },
+                ],
+                sort: [{ key: 'created_at', desc: false }],
+            },
+        })),
+    });
+    const { key: dashboardListQueryKey, params: dashboardListParams } = useServiceQueryKey('dashboard', 'public-dashboard', 'list', {
+        contextKey: projectPageContext.value,
+        params: computed<PublicDashboardListParameters>(() => ({
+            project_id: options.projectId?.value,
+            project_group_id: options.projectGroupId?.value,
+            query: {
+                filter: [
+                    { k: 'version', v: '1.0', o: 'not' },
+                ],
+                sort: [{ key: 'created_at', desc: false }],
+            },
+        })),
+    });
+
+    /* Querys */
+    const dashboardSharedListQuery = useScopedQuery({
+        queryKey: dashboardSharedListQueryKey,
+        queryFn: () => publicDashboardAPI.list(dashboardSharedListParams.value),
+        select: (data) => data?.results ?? [],
+        enabled: computed(() => !!projectPageContext.value),
+        staleTime: STALE_TIME,
+        gcTime: GC_TIME,
+    }, ['WORKSPACE']);
+
+
+    const dashboardListQuery = useScopedQuery({
+        queryKey: dashboardListQueryKey,
+        queryFn: () => publicDashboardAPI.list(dashboardListParams.value),
+        select: (data) => data?.results ?? [],
+        enabled: computed(() => !!projectPageContext.value),
+        staleTime: STALE_TIME,
+        gcTime: GC_TIME,
+    }, ['WORKSPACE']);
+
+    const isLoading = computed<boolean>(() => dashboardSharedListQuery.isFetching.value || dashboardListQuery.isFetching.value);
+
+    const setQueryData = (newData: PublicDashboardModel[]) => {
+        queryClient.setQueryData(dashboardListQueryKey.value, {
+            results: [...(dashboardListQuery.data.value ?? []), ...newData],
+        });
+    };
+
+    const invalidateAllQueries = () => {
+        queryClient.invalidateQueries({ queryKey: dashboardListQueryKey.value });
+    };
+
+    return {
+        dashboardSharedList: computed<PublicDashboardModel[]>(() => dashboardSharedListQuery.data.value ?? []),
+        dashboardList: computed<PublicDashboardModel[]>(() => dashboardListQuery.data.value ?? []),
+        isLoading,
+        setQueryData,
+        invalidateAllQueries,
+    };
+};
+
diff --git a/apps/web/src/services/project/v2/composables/use-proejct-page-context.ts b/apps/web/src/services/project/v2/composables/use-proejct-page-context.ts
new file mode 100644
index 0000000000..08f20d3292
--- /dev/null
+++ b/apps/web/src/services/project/v2/composables/use-proejct-page-context.ts
@@ -0,0 +1,16 @@
+import { computed, type ComputedRef } from 'vue';
+
+import type { ProjectPageContextType } from '@/services/project/v2/types/project-page-context-type';
+
+export const useProjectPageContext = (options: {
+    projectGroupId?: ComputedRef<string|undefined>,
+    projectId?: ComputedRef<string|undefined>,
+}) => computed<ProjectPageContextType>(() => {
+    if (options.projectGroupId?.value) {
+        return 'PROJECT_GROUP';
+    }
+    if (options.projectId?.value) {
+        return 'PROJECT';
+    }
+    return undefined;
+});
diff --git a/apps/web/src/services/project/v2/pages/ProjectDashboardCreatePage.vue b/apps/web/src/services/project/v2/pages/ProjectDashboardCreatePage.vue
new file mode 100644
index 0000000000..2720969791
--- /dev/null
+++ b/apps/web/src/services/project/v2/pages/ProjectDashboardCreatePage.vue
@@ -0,0 +1,50 @@
+<script setup lang="ts">
+import {
+    computed, toRef,
+} from 'vue';
+
+import type { DashboardModel, DashboardFolderModel } from '@/api-clients/dashboard/_types/dashboard-type';
+
+
+
+import { DASHBOARD_SHARED_ENTRY_POINT } from '@/services/_shared/dashboard/core/constants/dashboard-shared-constant';
+import DashboardCreateLayout from '@/services/_shared/dashboard/dashboard-create/DashboardCreateLayout.vue';
+import { useProjectDashboardFolderQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-folder-query';
+import { useProjectDashboardQuery } from '@/services/project/v2/composables/queries/use-project-dashboard-query';
+import { useProjectOrGroupId } from '@/services/project/v2/composables/use-project-or-group-id';
+
+const props = defineProps<{
+    projectGroupOrProjectId: string;
+}>();
+
+const { projectGroupId, projectId } = useProjectOrGroupId(toRef(props, 'projectGroupOrProjectId'));
+
+/* Query */
+const {
+    dashboardList,
+    dashboardSharedList,
+} = useProjectDashboardQuery({
+    projectGroupId,
+    projectId,
+});
+const {
+    dashboardFolderList,
+    dashboardFolderSharedList,
+} = useProjectDashboardFolderQuery({
+    projectGroupId,
+    projectId,
+});
+
+const dashboardItems = computed<Array<DashboardModel>>(() => [...dashboardSharedList.value, ...dashboardList.value]);
+const dashboardFolderItems = computed<Array<DashboardFolderModel>>(() => [...dashboardFolderSharedList.value, ...dashboardFolderList.value]);
+
+</script>
+
+<template>
+    <dashboard-create-layout class="project-dashboard-create-page"
+                             :entry-point="DASHBOARD_SHARED_ENTRY_POINT.PROJECT"
+                             :dashboard-items="dashboardItems"
+                             :folder-items="dashboardFolderItems"
+    />
+</template>
+
diff --git a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
index 3108da0033..d2d813a33a 100644
--- a/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
+++ b/apps/web/src/services/project/v2/pages/ProjectMainPage.vue
@@ -4,11 +4,10 @@ import {
     toRef,
     onMounted,
     ref,
+    nextTick,
 } from 'vue';
 import { useRouter } from 'vue-router/composables';
 
-import { nextTick } from 'process';
-
 import { useProjectGroupQuery } from '@/services/project/v-shared/composables/queries/use-project-group-query';
 import ProjectAndGroupListPanel from '@/services/project/v2/components/ProjectAndGroupListPanel.vue';
 import ProjectHeader from '@/services/project/v2/components/ProjectHeader.vue';
@@ -17,12 +16,7 @@ import { useProjectOrGroupId } from '@/services/project/v2/composables/use-proje
 import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 import { useProjectPageModalStore } from '@/services/project/v2/stores/project-page-modal-store';
 
-
 /* modals */
-const isModalLoadReady = ref(false);
-onMounted(() => {
-    isModalLoadReady.value = true;
-});
 const ProjectDetailTab = () => import('@/services/project/v2/components/ProjectDetailTab.vue');
 const ProjectGroupMemberManagementModal = () => import('@/services/project/v2/components/ProjectGroupMemberManagementModal.vue');
 const ProjectMemberManagementModal = () => import('@/services/project/v2/components/ProjectMemberManagementModal.vue');
@@ -32,7 +26,11 @@ const ProjectMemberInviteModal = () => import('@/services/project/v2/components/
 const ProjectTagsModal = () => import('@/services/project/v2/components/ProjectTagsModal.vue');
 const ProjectFormModal = () => import('@/services/project/v2/components/ProjectFormModal.vue');
 const ProjectGroupFormModal = () => import('@/services/project/v2/components/ProjectGroupFormModal.vue');
-
+const ProjectDashboardFolderFormModal = () => import('@/services/project/v2/components/ProjectDashboardFolderFormModal.vue');
+const ProjectDashboardNameEditModal = () => import('@/services/project/v2/components/ProjectDashboardNameEditModal.vue');
+const ProjectDashboardChangeFolderModal = () => import('@/services/project/v2/components/ProjectDashboardChangeFolderModal.vue');
+const ProjectDashboardDeleteModal = () => import('@/services/project/v2/components/ProjectDashboardDeleteModal.vue');
+const ProjectDashboardCloneModal = () => import('@/services/project/v2/components/ProjectDashboardCloneModal.vue');
 const props = defineProps<{
     projectGroupOrProjectId?: string;
     dashboardId?: string;
@@ -89,6 +87,27 @@ onMounted(() => {
     });
 });
 
+/* dashboard tab */
+const handleUpdateDashboardId = (id?: string) => {
+    if (!props.projectGroupOrProjectId) return;
+    if (!id) {
+        router.replace({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: props.projectGroupOrProjectId,
+            },
+        }).catch(() => {});
+    } else {
+        router.replace({
+            name: PROJECT_ROUTE_V2._NAME,
+            params: {
+                projectGroupOrProjectId: props.projectGroupOrProjectId,
+                dashboardId: id,
+            },
+        }).catch(() => {});
+    }
+};
+
 </script>
 
 <template>
@@ -104,13 +123,15 @@ onMounted(() => {
                                           :target-type="props.projectGroupOrProjectId ? (projectId ? 'project' : 'projectGroup') : undefined"
             />
         </keep-alive>
-        <project-detail-tab v-if="mounted && props.projectGroupOrProjectId"
+        <project-detail-tab v-if="mounted"
                             class="mt-6"
-                            :project-id="props.projectGroupOrProjectId"
+                            :project-id="projectId"
+                            :project-group-id="projectGroupId"
                             :dashboard-id="props.dashboardId"
+                            @update:dashboard-id="handleUpdateDashboardId"
         />
 
-        <template v-if="isModalLoadReady">
+        <template v-if="mounted">
             <project-group-member-management-modal v-if="projectPageModelStore.state.manageMemberModalVisible && projectPageModelStore.state.targetType === 'projectGroup'" />
             <project-member-management-modal v-if="projectPageModelStore.state.manageMemberModalVisible && projectPageModelStore.state.targetType === 'project'" />
             <project-delete-modal v-if="projectPageModelStore.state.deleteModalVisible"
@@ -127,6 +148,21 @@ onMounted(() => {
                                       :target-parent-group-id="targetParentGroupId"
                                       @created="handleCreated"
             />
+            <project-dashboard-folder-form-modal v-if="projectPageModelStore.state.folderFormModalVisible"
+                                                 :project-group-or-project-id="props.projectGroupOrProjectId"
+            />
+            <project-dashboard-name-edit-modal v-if="projectPageModelStore.state.dashboardNameEditModalVisible"
+                                               :project-group-or-project-id="props.projectGroupOrProjectId"
+            />
+            <project-dashboard-change-folder-modal v-if="projectPageModelStore.state.dashboardChangeFolderModalVisible"
+                                                   :project-group-or-project-id="props.projectGroupOrProjectId"
+            />
+            <project-dashboard-delete-modal v-if="projectPageModelStore.state.dashboardDeleteModalVisible"
+                                            :project-group-or-project-id="props.projectGroupOrProjectId"
+            />
+            <project-dashboard-clone-modal v-if="projectPageModelStore.state.dashboardCloneModalVisible"
+                                           :project-group-or-project-id="props.projectGroupOrProjectId"
+            />
         </template>
     </div>
 </template>
diff --git a/apps/web/src/services/project/v2/routes/route-constant.ts b/apps/web/src/services/project/v2/routes/route-constant.ts
index e8d42084bb..2a34ef051e 100644
--- a/apps/web/src/services/project/v2/routes/route-constant.ts
+++ b/apps/web/src/services/project/v2/routes/route-constant.ts
@@ -2,5 +2,5 @@ import { MENU_ID } from '@/lib/menu/config';
 
 export const PROJECT_ROUTE_V2 = Object.freeze({
     _NAME: MENU_ID.PROJECT,
-    DETAIL: `${MENU_ID.PROJECT}-detail`,
+    DASHBOARD_CREATE: { _NAME: `${MENU_ID.PROJECT}.dashboard-create` },
 });
diff --git a/apps/web/src/services/project/v2/routes/routes.ts b/apps/web/src/services/project/v2/routes/routes.ts
index 096122f53c..a2c26058e9 100644
--- a/apps/web/src/services/project/v2/routes/routes.ts
+++ b/apps/web/src/services/project/v2/routes/routes.ts
@@ -8,7 +8,7 @@ import { PROJECT_ROUTE_V2 } from '@/services/project/v2/routes/route-constant';
 const ProjectContainer = () => import('@/services/project/v2/ProjectContainer.vue');
 
 const ProjectMainPage = () => import('@/services/project/v2/pages/ProjectMainPage.vue');
-
+const ProjectDashboardCreatePage = () => import('@/services/project/v2/pages/ProjectDashboardCreatePage.vue');
 
 const projectRoutes: RouteConfig = {
     path: 'project',
@@ -18,6 +18,15 @@ const projectRoutes: RouteConfig = {
     },
     component: ProjectContainer,
     children: [
+        {
+            path: ':projectGroupOrProjectId/dashboard-create',
+            name: PROJECT_ROUTE_V2.DASHBOARD_CREATE._NAME,
+            meta: {
+                menuId: MENU_ID.PROJECT,
+            },
+            props: true,
+            component: ProjectDashboardCreatePage,
+        },
         {
             path: ':projectGroupOrProjectId?/:dashboardId?',
             name: PROJECT_ROUTE_V2._NAME,
diff --git a/apps/web/src/services/project/v2/stores/project-page-modal-store.ts b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
index 278cce665d..77a951105f 100644
--- a/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
+++ b/apps/web/src/services/project/v2/stores/project-page-modal-store.ts
@@ -4,14 +4,21 @@ import { defineStore } from 'pinia';
 
 export const useProjectPageModalStore = defineStore('project-page-modal', () => {
     const state = reactive({
+        targetId: '' as string|undefined,
+        targetType: undefined as 'project'|'projectGroup'|undefined,
+
         manageMemberModalVisible: false,
         deleteModalVisible: false,
         moveModalVisible: false,
         inviteMemberModalVisible: false,
         manageTagsModalVisible: false,
         projectFormModalVisible: false,
-        targetId: '' as string|undefined,
-        targetType: undefined as 'project'|'projectGroup'|undefined,
+
+        folderFormModalVisible: false,
+        dashboardNameEditModalVisible: false,
+        dashboardChangeFolderModalVisible: false,
+        dashboardDeleteModalVisible: false,
+        dashboardCloneModalVisible: false,
     });
 
     const actions = {
@@ -109,7 +116,45 @@ export const useProjectPageModalStore = defineStore('project-page-modal', () =>
         closeFormModal() {
             state.projectFormModalVisible = false;
         },
-        // overal
+        openCreateFolderFormModal() {
+            state.targetId = undefined;
+            state.folderFormModalVisible = true;
+        },
+        openEditFolderFormModal(targetFolderId: string) {
+            state.targetId = targetFolderId;
+            state.folderFormModalVisible = true;
+        },
+        closeFolderFormModal() {
+            state.folderFormModalVisible = false;
+        },
+        openDashboardNameEditModal(targetDashboardId: string) {
+            state.targetId = targetDashboardId;
+            state.dashboardNameEditModalVisible = true;
+        },
+        closeDashboardNameEditModal() {
+            state.dashboardNameEditModalVisible = false;
+        },
+        openDashboardChangeFolderModal(targetDashboardId: string) {
+            state.targetId = targetDashboardId;
+            state.dashboardChangeFolderModalVisible = true;
+        },
+        closeDashboardChangeFolderModal() {
+            state.dashboardChangeFolderModalVisible = false;
+        },
+        openDashboardDeleteModal(targetDashboardId: string) {
+            state.targetId = targetDashboardId;
+            state.dashboardDeleteModalVisible = true;
+        },
+        closeDashboardDeleteModal() {
+            state.dashboardDeleteModalVisible = false;
+        },
+        openDashboardCloneModal(targetDashboardId: string) {
+            state.targetId = targetDashboardId;
+            state.dashboardCloneModalVisible = true;
+        },
+        closeDashboardCloneModal() {
+            state.dashboardCloneModalVisible = false;
+        },
         resetTarget() {
             state.targetId = undefined;
             state.targetType = undefined;
diff --git a/apps/web/src/services/project/v2/types/project-page-context-type.ts b/apps/web/src/services/project/v2/types/project-page-context-type.ts
new file mode 100644
index 0000000000..1f1671b501
--- /dev/null
+++ b/apps/web/src/services/project/v2/types/project-page-context-type.ts
@@ -0,0 +1 @@
+export type ProjectPageContextType = 'PROJECT' | 'PROJECT_GROUP' | undefined;
diff --git a/apps/web/src/services/workspace-home/components/CostSummary.vue b/apps/web/src/services/workspace-home/components/CostSummary.vue
deleted file mode 100644
index 722595191d..0000000000
--- a/apps/web/src/services/workspace-home/components/CostSummary.vue
+++ /dev/null
@@ -1,361 +0,0 @@
-<script setup lang="ts">
-import { useWindowSize } from '@vueuse/core';
-import { computed, reactive, watch } from 'vue';
-
-import dayjs from 'dayjs';
-import { isEmpty, sortBy } from 'lodash';
-
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
-import {
-    PDivider, PFieldTitle, PLink, PSpinner, PStatus, screens,
-} from '@cloudforet/mirinae';
-
-import type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
-import type { UserConfigModel } from '@/api-clients/config/user-config/schema/model';
-import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
-import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
-import type { UnifiedCostAnalyzeParameters } from '@/api-clients/cost-analysis/unified-cost/schema/api-verbs/analyze';
-import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
-import { i18n } from '@/translations';
-
-import { CURRENCY, CURRENCY_SYMBOL } from '@/store/display/constant';
-import type { Currency } from '@/store/display/type';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
-import type { ProjectReferenceMap } from '@/store/reference/project-reference-store';
-import type { RoleInfo } from '@/store/user/type';
-import { useUserStore } from '@/store/user/user-store';
-
-import type { PageAccessMap } from '@/lib/access-control/config';
-import { currencyMoneyFormatter } from '@/lib/helper/currency-helper';
-import { MENU_ID } from '@/lib/menu/config';
-
-import ErrorHandler from '@/common/composables/error/errorHandler';
-import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
-
-import { GRANULARITY } from '@/services/cost-explorer/constants/cost-explorer-constant';
-import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
-import type { CostXYChartData } from '@/services/cost-explorer/types/cost-explorer-chart-type';
-import type { UnifiedCostAnalyzeResult } from '@/services/cost-explorer/types/unified-cost-type';
-import CostSummaryChart from '@/services/workspace-home/components/CostSummaryChart.vue';
-import EmptySummaryData from '@/services/workspace-home/components/EmptySummaryData.vue';
-import { costStateSummaryFormatter } from '@/services/workspace-home/composables/use-workspace-home';
-import { COST_SUMMARY_STATE_TYPE, SUMMARY_DATA_TYPE } from '@/services/workspace-home/constants/workspace-home-constant';
-import { useWorkspaceHomePageStore } from '@/services/workspace-home/store/workspace-home-page-store';
-import type { EmptyData } from '@/services/workspace-home/types/workspace-home-type';
-
-
-const workspaceHomePageStore = useWorkspaceHomePageStore();
-const workspaceHomePageState = workspaceHomePageStore.state;
-const allReferenceStore = useAllReferenceStore();
-const allReferenceGetters = allReferenceStore.getters;
-const userStore = useUserStore();
-
-const { width } = useWindowSize();
-
-const storeState = reactive({
-    costReportConfig: computed<CostReportConfigModel|null|undefined>(() => workspaceHomePageState.costReportConfig),
-    recentList: computed<UserConfigModel[]>(() => workspaceHomePageState.recentList),
-    dataSource: computed<CostDataSourceModel[]>(() => workspaceHomePageState.dataSource),
-    getCurrentRoleInfo: computed<RoleInfo|undefined>(() => userStore.state.currentRoleInfo),
-    projects: computed<ProjectReferenceMap>(() => allReferenceGetters.project),
-    pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
-});
-const state = reactive({
-    loading: true,
-    accessLink: computed<boolean>(() => !isEmpty(storeState.pageAccessPermissionMap[MENU_ID.COST_REPORT])),
-    isDesktopSize: computed(() => width.value > screens.laptop.max),
-    currency: computed<Currency|undefined>(() => storeState.costReportConfig?.currency || CURRENCY.USD),
-    isWorkspaceMember: computed(() => storeState.getCurrentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER),
-    chartData: undefined as CostXYChartData[]|undefined,
-    emptyData: computed<EmptyData>(() => {
-        let result = {} as EmptyData;
-        if (storeState.dataSource.length === 0) {
-            result = {
-                to: { name: COST_EXPLORER_ROUTE.LANDING._NAME },
-                title: i18n.t('HOME.ACTIVATION_REQUIRED'),
-                desc: i18n.t('HOME.ACTIVATION_REQUIRED_DESC'),
-                buttonText: i18n.t('HOME.LEARN_MORE'),
-            };
-        } else if (state.isWorkspaceMember && isEmpty(storeState.projects)) {
-            result = {
-                title: i18n.t('HOME.PROJECT_REQUIRED'),
-                desc: i18n.t('HOME.PROJECT_REQUIRED_DESC'),
-            };
-        } else {
-            result = {
-                to: { name: COST_EXPLORER_ROUTE.COST_REPORT._NAME },
-                title: i18n.t('HOME.NO_COST_DATA'),
-                desc: i18n.t('HOME.NO_COST_DATA_DESC'),
-                buttonText: i18n.t('HOME.COST_SUMMARY_GO_TO_REPORT'),
-            };
-        }
-        return result;
-    }),
-    selectedProjects: [] as Array<string>,
-
-    period: computed(() => {
-        const reportMonth = dayjs().utc();
-        const reportMonthPeriod = state.isDesktopSize ? 12 : 6;
-        const start = dayjs(reportMonth).utc().subtract(reportMonthPeriod, 'month').format('YYYY-MM');
-        const end = reportMonth.format('YYYY-MM');
-        return { start, end };
-    }),
-    recentMonthValue: computed<CostXYChartData|undefined>(() => state.chartData[state.chartData.length - 2]),
-    currentMonthValue: computed<CostXYChartData|undefined>(() => state.chartData[state.chartData.length - 1]),
-    recentDateRangeText: computed<string>(() => {
-        const lastMonth = dayjs().utc().subtract(1, 'month');
-        return `${lastMonth.startOf('month').format('YYYY-MM-DD')} ~ ${lastMonth.endOf('month').format('YYYY-MM-DD')}`;
-    }),
-    currentDateRangeText: computed<string>(() => {
-        const currentMonth = dayjs().utc();
-        return `${currentMonth.startOf('month').format('YYYY-MM-DD')} ~ ${currentMonth.format('YYYY-MM-DD')}`;
-    }),
-});
-
-const handleSelectedProject = async (selectedProject: string[]) => {
-    state.selectedProjects = selectedProject;
-    await analyzeCostReportData();
-};
-const fillMissingMonths = (dataList: CostXYChartData[]): CostXYChartData[] => {
-    const result: CostXYChartData[] = [];
-    const today = dayjs().utc();
-    if (dataList.length === 0) return result;
-
-    dataList.sort((a, b) => dayjs(a.date).utc().diff(dayjs(b.date).utc()));
-
-    const startDate = dayjs(dataList[0]?.date).utc();
-    let currentDate = startDate;
-
-    while (currentDate.isBefore(today, 'month')) {
-        const dateToCheck = currentDate.clone();
-        const data = dataList.find((item) => dayjs(item.date).utc().isSame(dateToCheck, 'month'));
-        result.push(
-            data || { date: dateToCheck.add(1, 'month').format('YYYY-MM'), value: 0, is_confirmed: true },
-        );
-        currentDate = currentDate.add(1, 'month');
-    }
-    return result;
-};
-
-
-const analyzeCostReportData = async () => {
-    state.loading = true;
-    try {
-        const { results } = await SpaceConnector.clientV2.costAnalysis.unifiedCost.analyze<UnifiedCostAnalyzeParameters, AnalyzeResponse<UnifiedCostAnalyzeResult>>({
-            query: {
-                start: state.period.start,
-                end: state.period.end,
-                group_by: state.isWorkspaceMember ? ['project_id', 'is_confirmed'] : ['is_confirmed'],
-                fields: {
-                    value_sum: {
-                        key: `cost.${state.currency}`,
-                        operator: 'sum',
-                    },
-                },
-                granularity: GRANULARITY.MONTHLY,
-                field_group: ['date'],
-                filter: state.isWorkspaceMember ? [
-                    { k: 'project_id', v: state.selectedProjects[0], o: 'eq' },
-                ] : undefined,
-            },
-        });
-        if (!results) return;
-        const _chartData = (results || []).flatMap((item) => ((item.value_sum ?? [])).map((valueSum) => ({
-            ...valueSum,
-            is_confirmed: item.is_confirmed,
-        })));
-        state.chartData = sortBy(fillMissingMonths(_chartData), 'date');
-    } catch (e) {
-        state.chartData = undefined;
-        ErrorHandler.handleError(e);
-    } finally {
-        state.loading = false;
-    }
-};
-
-watch(() => state.isDesktopSize, async () => {
-    await analyzeCostReportData();
-});
-watch(() => storeState.projects, async (projects) => {
-    if (!state.isWorkspaceMember) return;
-    const project = Object.keys(projects)[0];
-    state.selectedProjects = [project];
-    await analyzeCostReportData();
-}, { immediate: true });
-watch(() => storeState.costReportConfig, async (costReportConfig) => {
-    if (!costReportConfig) return;
-    await analyzeCostReportData();
-}, { immediate: true });
-</script>
-
-<template>
-    <div class="cost-summary">
-        <div class="heading-wrapper">
-            <p-field-title :label="$t('HOME.COST_SUMMARY_TITLE')"
-                           size="lg"
-                           class="main-title"
-            />
-            <project-select-dropdown
-                v-if="state.isWorkspaceMember && !isEmpty(storeState.projects)"
-                class="project-select-dropdown"
-                :selected-project-ids="state.selectedProjects"
-                :use-fixed-menu-style="false"
-                project-selectable
-                position="right"
-                hide-create-button
-                :selection-label="$t('HOME.COST_SUMMARY_BY_PROJECT')"
-                :project-group-selectable="false"
-                @update:selected-project-ids="handleSelectedProject"
-            />
-        </div>
-        <div v-if="state.loading"
-             class="loading"
-        >
-            <p-spinner size="lg" />
-        </div>
-        <div v-else>
-            <div v-if="state.chartData?.length > 0">
-                <div class="content-wrapper">
-                    <div class="price-wrapper">
-                        <div class="price-view">
-                            <p>{{ $t('HOME.COST_SUMMARY_LAST_MONT_TOTAL_COST') }}</p>
-                            <p class="price">
-                                <span class="unit">{{ CURRENCY_SYMBOL?.[state.currency] }}</span>
-                                <span>{{ currencyMoneyFormatter(state.recentMonthValue?.value, { currency: state.currency, style: 'decimal' }) }}</span>
-                                <p-status v-bind="costStateSummaryFormatter(state.recentMonthValue?.is_confirmed ? COST_SUMMARY_STATE_TYPE.CONFIRM : COST_SUMMARY_STATE_TYPE.ESTIMATED)"
-                                          :text="state.recentMonthValue?.is_confirmed ? $t('HOME.CONFIRM') : $t('HOME.ESTIMATED')"
-                                          class="capitalize state"
-                                />
-                            </p>
-                            <p class="date">
-                                {{ state.recentDateRangeText }}
-                            </p>
-                        </div>
-                        <p-divider class="divider"
-                                   vertical
-                        />
-                        <div class="price-view">
-                            <p>{{ $t('HOME.COST_SUMMARY_CURRENT_TOTAL_COST') }}</p>
-                            <p class="price">
-                                <span class="unit">{{ CURRENCY_SYMBOL?.[state.currency] }}</span>
-                                <span>{{ currencyMoneyFormatter(state.currentMonthValue?.value, { currency: state.currency, style: 'decimal' }) }}</span>
-                                <p-status v-bind="costStateSummaryFormatter(COST_SUMMARY_STATE_TYPE.AGGREGATING)"
-                                          :text="$t('HOME.AGGREGATING')"
-                                          class="capitalize state"
-                                />
-                            </p>
-                            <p class="date">
-                                {{ state.currentDateRangeText }}
-                            </p>
-                        </div>
-                    </div>
-                    <span class="chart-description">{{ $t('HOME.COST_SUMMARY_DESC') }}</span>
-                    <cost-summary-chart :period="state.period"
-                                        :currency="state.currency"
-                                        :data="state.chartData"
-                    />
-                </div>
-                <div v-if="!state.isWorkspaceMember && state.accessLink">
-                    <p-divider class="divider" />
-                    <div class="link-footer">
-                        <p-link highlight
-                                :to="{ name: COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME }"
-                                action-icon="internal-link"
-                                class="link"
-                        >
-                            {{ $t('HOME.COST_SUMMARY_GO_TO_COST_ANALYSIS') }}
-                        </p-link>
-                        <div class="vertical-divider">
-                            <p-divider style="height: 14px;"
-                                       vertical
-                            />
-                        </div>
-                        <p-link highlight
-                                :to="{ name: COST_EXPLORER_ROUTE.COST_REPORT._NAME }"
-                                action-icon="internal-link"
-                                class="link"
-                        >
-                            {{ $t('HOME.COST_SUMMARY_GO_TO_REPORT') }}
-                        </p-link>
-                    </div>
-                </div>
-            </div>
-            <empty-summary-data v-else
-                                :image-url="require('/images/home/img_workspace-home_cost-summary_empty-state-background-min.png')"
-                                :empty-data="state.emptyData"
-                                :type="SUMMARY_DATA_TYPE.COST"
-            />
-        </div>
-    </div>
-</template>
-
-<style scoped lang="postcss">
-.cost-summary {
-    min-height: 30.5rem;
-    .heading-wrapper {
-        @apply flex;
-        .project-select-dropdown {
-            margin-right: 1rem;
-            margin-left: auto;
-        }
-    }
-    .loading {
-        @apply flex items-center justify-center;
-        min-height: 27.5rem;
-    }
-    .main-title {
-        padding-left: 1rem;
-    }
-    .content-wrapper {
-        @apply flex flex-col;
-        padding: 1.375rem 1.5rem 2rem;
-        .price-wrapper {
-            @apply flex text-label-md border border-gray-200;
-            padding-top: 1rem;
-            padding-bottom: 1rem;
-            border-radius: 0.375rem;
-            .price-view {
-                @apply flex flex-col;
-                flex: 1;
-                padding-right: 1rem;
-                padding-left: 1rem;
-                .price {
-                    @apply flex items-center text-display-md;
-                    margin-top: 0.25rem;
-                    .unit {
-                        @apply text-display-sm text-gray-600;
-                    }
-                    .state {
-                        @apply text-label-sm;
-                        margin-left: 0.5rem;
-                    }
-                }
-                .date {
-                    @apply text-label-sm text-gray-500;
-                    margin-top: 0.5rem;
-                }
-            }
-        }
-        .chart-description {
-            @apply text-paragraph-sm text-gray-700;
-            margin-top: 0.5rem;
-            margin-bottom: 1rem;
-        }
-    }
-    .divider {
-        @apply bg-gray-150;
-    }
-    .link-footer {
-        @apply flex justify-center items-center gap-4;
-
-        .vertical-divider {
-            @apply flex items-center h-full;
-        }
-        .link {
-            @apply inline-flex items-center justify-center text-label-md;
-            padding-top: 0.625rem;
-            padding-bottom: 0.75rem;
-        }
-    }
-}
-</style>
diff --git a/apps/web/src/services/workspace-home/components/Summaries.vue b/apps/web/src/services/workspace-home/components/Summaries.vue
index 329fab3a5d..7ffa11574e 100644
--- a/apps/web/src/services/workspace-home/components/Summaries.vue
+++ b/apps/web/src/services/workspace-home/components/Summaries.vue
@@ -3,9 +3,9 @@ import { MENU_ID } from '@/lib/menu/config';
 
 import { useContentsAccessibility } from '@/common/composables/contents-accessibility';
 
-import AccountSummary from '@/services/workspace-home/components/AccountSummary.vue';
-import AssetSummary from '@/services/workspace-home/components/AssetSummary.vue';
-import CostSummary from '@/services/workspace-home/components/CostSummary.vue';
+import AccountSummary from '@/services/workspace-home/shared/components/AccountSummary.vue';
+import AssetSummary from '@/services/workspace-home/shared/components/AssetSummary.vue';
+import CostSummary from '@/services/workspace-home/shared/components/CostSummary.vue';
 
 const { visibleContents } = useContentsAccessibility(MENU_ID.ASSET_INVENTORY);
 </script>
@@ -35,7 +35,6 @@ const { visibleContents } = useContentsAccessibility(MENU_ID.ASSET_INVENTORY);
         @apply bg-white border border-gray-200 text-label-md;
         width: calc(50% - 0.5rem);
         max-width: 43rem;
-        padding-top: 1.375rem;
         border-radius: 0.375rem;
         flex: 1;
         &.cost {
diff --git a/apps/web/src/services/workspace-home/constants/workspace-home-constant.ts b/apps/web/src/services/workspace-home/constants/workspace-home-constant.ts
index c7dc27d53b..a0651d72d7 100644
--- a/apps/web/src/services/workspace-home/constants/workspace-home-constant.ts
+++ b/apps/web/src/services/workspace-home/constants/workspace-home-constant.ts
@@ -55,16 +55,6 @@ export const WORKSPACE_HOME_DATA_TYPE = {
     BILLING: 'Billing',
 } as const;
 
-export const SUMMARY_DATA_TYPE = {
-    ASSET: 'Asset',
-    COST: 'Cost',
-    ACCOUNT: 'Account',
-} as const;
-export const COST_SUMMARY_STATE_TYPE = {
-    AGGREGATING: 'AGGREGATING',
-    CONFIRM: 'CONFIRM',
-    ESTIMATED: 'ESTIMATED',
-} as const;
 export const SERVICE_ACCOUNT_SUMMARY_STATE_COLOR = {
     ACTIVE: {
         iconColor: styles.green[600],
diff --git a/apps/web/src/services/workspace-home/pages/WorkspaceHomePage.vue b/apps/web/src/services/workspace-home/pages/WorkspaceHomePage.vue
index 36ed19a5af..543033ad4a 100644
--- a/apps/web/src/services/workspace-home/pages/WorkspaceHomePage.vue
+++ b/apps/web/src/services/workspace-home/pages/WorkspaceHomePage.vue
@@ -6,7 +6,6 @@ import {
 import { isEmpty } from 'lodash';
 
 import type { UserConfigModel } from '@/api-clients/config/user-config/schema/model';
-import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
 import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
@@ -26,6 +25,7 @@ import Summaries from '@/services/workspace-home/components/Summaries.vue';
 import UserConfigs from '@/services/workspace-home/components/UserConfigs.vue';
 import Welcome from '@/services/workspace-home/components/Welcome.vue';
 import WorkspaceInfo from '@/services/workspace-home/components/WorkspaceInfo.vue';
+import { useCostDataSourceQuery } from '@/services/workspace-home/shared/composables/use-cost-data-source-query';
 import { useWorkspaceHomePageStore } from '@/services/workspace-home/store/workspace-home-page-store';
 
 const userWorkspaceStore = useUserWorkspaceStore();
@@ -36,11 +36,14 @@ const allReferenceStore = useAllReferenceStore();
 const allReferenceGetters = allReferenceStore.getters;
 const userStore = useUserStore();
 
+const { dataSource } = useCostDataSourceQuery({
+    enabled: computed(() => !!userWorkspaceGetters.currentWorkspaceId),
+});
+
 const storeState = reactive({
     getCurrentRoleInfo: computed<RoleInfo|undefined>(() => userStore.state.currentRoleInfo),
     currentWorkspaceId: computed<string|undefined>(() => userWorkspaceGetters.currentWorkspaceId),
     recentList: computed<UserConfigModel[]>(() => workspaceHomePageState.recentList),
-    dataSource: computed<CostDataSourceModel[]>(() => workspaceHomePageState.dataSource),
     collectors: computed<CollectorReferenceMap>(() => allReferenceGetters.collector),
     serviceAccounts: computed<ServiceAccountReferenceMap>(() => allReferenceGetters.serviceAccount),
     pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
@@ -63,7 +66,6 @@ watch(() => storeState.currentWorkspaceId, async (currentWorkspaceId) => {
     try {
         // base API
         await workspaceHomePageStore.fetchRecentList(currentWorkspaceId);
-        await workspaceHomePageStore.fetchDataSource();
     } finally {
         state.loading = false;
     }
@@ -80,10 +82,6 @@ watch(() => storeState.currentWorkspaceId, async (currentWorkspaceId) => {
     await workspaceHomePageStore.fetchBookmarkList();
     // configs
     await workspaceHomePageStore.fetchFavoriteList();
-    // summaries
-    if (!state.isWorkspaceMember) {
-        await workspaceHomePageStore.fetchCostReportConfig();
-    }
 }, { immediate: true });
 </script>
 
@@ -98,7 +96,7 @@ watch(() => storeState.currentWorkspaceId, async (currentWorkspaceId) => {
             />
             <welcome
                 v-if="!state.loading
-                    && (state.isNoCollectors || state.isNoServiceAccounts || storeState.dataSource.length === 0)"
+                    && (state.isNoCollectors || state.isNoServiceAccounts || (dataSource && dataSource.length === 0))"
             />
             <bookmark />
             <user-configs v-if="storeState.recentList.length !== 0"
diff --git a/apps/web/src/services/workspace-home/components/AccountSummary.vue b/apps/web/src/services/workspace-home/shared/components/AccountSummary.vue
similarity index 83%
rename from apps/web/src/services/workspace-home/components/AccountSummary.vue
rename to apps/web/src/services/workspace-home/shared/components/AccountSummary.vue
index 25e9dea982..f0267c1321 100644
--- a/apps/web/src/services/workspace-home/components/AccountSummary.vue
+++ b/apps/web/src/services/workspace-home/shared/components/AccountSummary.vue
@@ -8,34 +8,42 @@ import type { EChartsType } from 'echarts/core';
 import { init } from 'echarts/core';
 import { countBy, isEmpty, map } from 'lodash';
 
-import { SpaceConnector } from '@cloudforet/core-lib/space-connector';
 import {
     PStatus, PFieldTitle, PLazyImg, PDivider, PLink, PSpinner, PProgressBar,
 } from '@cloudforet/mirinae';
 import { numberFormatter } from '@cloudforet/utils';
 
-import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
+import { useServiceAccountApi } from '@/api-clients/identity/service-account/composables/use-service-account-api';
 import type { ServiceAccountListParameters } from '@/api-clients/identity/service-account/schema/api-verbs/list';
 import type { ServiceAccountModel } from '@/api-clients/identity/service-account/schema/model';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
 import { i18n } from '@/translations';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { ProviderReferenceMap } from '@/store/reference/provider-reference-store';
-import type { ServiceAccountReferenceMap } from '@/store/reference/service-account-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import type { PageAccessMap } from '@/lib/access-control/config';
 import { assetUrlConverter } from '@/lib/helper/asset-helper';
 import { MENU_ID } from '@/lib/menu/config';
 
-import ErrorHandler from '@/common/composables/error/errorHandler';
-
 import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
-import EmptySummaryData from '@/services/workspace-home/components/EmptySummaryData.vue';
 import { serviceAccountStateSummaryFormatter } from '@/services/workspace-home/composables/use-workspace-home';
-import { SUMMARY_DATA_TYPE } from '@/services/workspace-home/constants/workspace-home-constant';
-import type { EmptyData } from '@/services/workspace-home/types/workspace-home-type';
+import EmptySummaryData from '@/services/workspace-home/shared/components/EmptySummaryData.vue';
+import { SUMMARY_DATA_TYPE } from '@/services/workspace-home/shared/constants/summary-type-constant';
+import type { EmptyData } from '@/services/workspace-home/shared/types/empty-data-type';
+import type { WidgetMode } from '@/services/workspace-home/shared/types/widget-mode-type';
+
+const props = withDefaults(defineProps<{
+    projectIds?: string[];
+    mode?: WidgetMode;
+}>(), {
+    projectIds: undefined,
+    mode: 'workspace',
+});
+
 
 const allReferenceStore = useAllReferenceStore();
 const allReferenceGetters = allReferenceStore.getters;
@@ -48,19 +56,44 @@ const providerChartContext = ref<HTMLElement|null>(null);
 
 const storeState = reactive({
     currentWorkspaceId: computed<string|undefined>(() => userWorkspaceGetters.currentWorkspaceId),
-    serviceAccount: computed<ServiceAccountReferenceMap>(() => allReferenceGetters.serviceAccount),
     provider: computed<ProviderReferenceMap>(() => allReferenceGetters.provider),
     pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
+
+const { serviceAccountAPI } = useServiceAccountApi();
+const { key: serviceAccountQueryKey, params } = useServiceQueryKey('identity', 'service-account', 'list', {
+    params: computed<ServiceAccountListParameters>(() => ({
+        query: {
+            filter: props.projectIds?.length ? [{
+                k: 'project_id',
+                v: props.projectIds,
+                o: 'in',
+            }] : undefined,
+        },
+    })),
+});
+
+const enabled = computed(() => {
+    if (props.mode === 'workspace') return true;
+    return props.projectIds && props.projectIds.length > 0;
+});
+
+const { data: serviceAccountData, isLoading: isLoadingServiceAccount } = useScopedQuery({
+    queryKey: serviceAccountQueryKey,
+    enabled,
+    queryFn: () => serviceAccountAPI.list(params.value),
+    staleTime: 1000 * 60 * 5, // 5 minutes
+    gcTime: 1000 * 60 * 30, // 30 minutes
+}, ['WORKSPACE']);
+
 const state = reactive({
-    loading: true,
     accessLink: computed<boolean>(() => !isEmpty(storeState.pageAccessPermissionMap[MENU_ID.SERVICE_ACCOUNT])),
     writableServiceAccount: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[MENU_ID.SERVICE_ACCOUNT].write),
-    emptyData: computed<EmptyData>(() => {
-        let result;
-        if (isEmpty(storeState.serviceAccount)) {
+    emptyData: computed<EmptyData|undefined>(() => {
+        let result: EmptyData|undefined;
+        if (isEmpty(serviceAccountData.value?.results)) {
             result = {
-                to: state.writableServiceAccount ? { name: SERVICE_ACCOUNT_ROUTE._NAME } : {},
+                to: state.writableServiceAccount ? { name: SERVICE_ACCOUNT_ROUTE._NAME } : undefined,
                 title: i18n.t('HOME.NO_ACCOUNT'),
                 desc: i18n.t('HOME.NO_ACCOUNT_DESC'),
                 buttonText: state.writableServiceAccount ? i18n.t('HOME.NO_ACCOUNT_ADD_NEW') : undefined,
@@ -68,8 +101,8 @@ const state = reactive({
         }
         return result;
     }),
-    items: [] as ServiceAccountModel[],
-    itemsTotalCount: 0,
+    items: computed<ServiceAccountModel[]>(() => serviceAccountData.value?.results || []),
+    itemsTotalCount: computed<number>(() => serviceAccountData.value?.total_count || 0),
     itemsByState: computed(() => {
         const stateCounts = countBy(state.items, 'state');
         return map(stateCounts, (count, i) => ({
@@ -124,11 +157,11 @@ const state = reactive({
         tooltip: {
             trigger: 'item',
             position: 'right',
-            formatter: (params) => {
-                const _name = storeState.provider[params.name].label;
-                const _value = numberFormatter(params.value) || '';
-                const percent = getPercent(params.value, state.itemsTotalCount);
-                return `${params.marker} ${_name}: <b>${_value}</b> (${percent}%)`;
+            formatter: (p) => {
+                const _name = storeState.provider[p.name].label;
+                const _value = numberFormatter(p.value) || '';
+                const percent = getPercent(p.value, state.itemsTotalCount);
+                return `${p.marker} ${_name}: <b>${_value}</b> (${percent}%)`;
             },
         },
         series: [
@@ -152,20 +185,6 @@ const getPercent = (value: number, total: number) => {
     const roundedValue = Math.ceil(_value * 100) / 100;
     return parseFloat(roundedValue.toFixed(2));
 };
-const fetchServiceAccountList = async () => {
-    state.loading = true;
-    try {
-        const { results, total_count } = await SpaceConnector.clientV2.identity.serviceAccount.list<ServiceAccountListParameters, ListResponse<ServiceAccountModel>>();
-        state.items = results || [];
-        state.itemsTotalCount = total_count;
-    } catch (e) {
-        ErrorHandler.handleError(e);
-        state.items = [];
-        state.itemsTotalCount = 0;
-    } finally {
-        state.loading = false;
-    }
-};
 
 watch([() => state.totalChartData, () => totalChartContext.value], ([, chartCtx]) => {
     if (chartCtx) {
@@ -180,10 +199,6 @@ watch([() => state.providerChartData, () => providerChartContext.value], ([, cha
     }
 }, { immediate: true });
 
-watch([() => storeState.currentWorkspaceId, () => storeState.provider], async ([currentWorkspaceId]) => {
-    if (!currentWorkspaceId) return;
-    await fetchServiceAccountList();
-}, { immediate: true });
 </script>
 
 <template>
@@ -192,13 +207,13 @@ watch([() => storeState.currentWorkspaceId, () => storeState.provider], async ([
                        size="lg"
                        class="main-title"
         />
-        <div v-if="state.loading"
+        <div v-if="isLoadingServiceAccount"
              class="loading"
         >
             <p-spinner size="lg" />
         </div>
         <div v-else>
-            <div v-if="!isEmpty(storeState.serviceAccount)"
+            <div v-if="!state.emptyData"
                  class="content-container"
             >
                 <div class="content-wrapper">
@@ -226,7 +241,10 @@ watch([() => storeState.currentWorkspaceId, () => storeState.provider], async ([
                         </div>
                     </div>
                     <div class="main-content">
-                        <strong class="title">{{ $t('HOME.ACCOUNT_SUMMARY_BY_PROVIDER') }}</strong>
+                        <p-field-title :label="$t('HOME.ACCOUNT_SUMMARY_BY_PROVIDER')"
+                                       size="md"
+                                       class="title"
+                        />
                         <div class="content">
                             <div ref="providerChartContext"
                                  class="chart"
@@ -288,10 +306,10 @@ watch([() => storeState.currentWorkspaceId, () => storeState.provider], async ([
 
 <style scoped lang="postcss">
 .account-summary {
-    @apply flex flex-col;
+    @apply flex flex-col rounded-lg bg-white;
     min-height: 30.5rem;
     .main-title {
-        padding-left: 1rem;
+        @apply pt-6 px-6;
     }
     .loading {
         @apply flex items-center justify-center;
diff --git a/apps/web/src/services/workspace-home/components/AssetSummary.vue b/apps/web/src/services/workspace-home/shared/components/AssetSummary.vue
similarity index 58%
rename from apps/web/src/services/workspace-home/components/AssetSummary.vue
rename to apps/web/src/services/workspace-home/shared/components/AssetSummary.vue
index 51b617e73b..7e259fa2dc 100644
--- a/apps/web/src/services/workspace-home/components/AssetSummary.vue
+++ b/apps/web/src/services/workspace-home/shared/components/AssetSummary.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, reactive, watch } from 'vue';
+import { computed, reactive } from 'vue';
 
 import { isEmpty } from 'lodash';
 
@@ -9,7 +9,6 @@ import {
 
 import { i18n } from '@/translations';
 
-import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CollectorReferenceMap } from '@/store/reference/collector-reference-store';
 import type { ServiceAccountReferenceMap } from '@/store/reference/service-account-reference-store';
@@ -20,34 +19,35 @@ import { MENU_ID } from '@/lib/menu/config';
 
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
 import { SERVICE_ACCOUNT_ROUTE } from '@/services/service-account/routes/route-constant';
-import AssetSummaryDailyUpdates from '@/services/workspace-home/components/AssetSummaryDailyUpdates.vue';
-import AssetSummaryProvider from '@/services/workspace-home/components/AssetSummaryProvider.vue';
-import EmptySummaryData from '@/services/workspace-home/components/EmptySummaryData.vue';
-import { SUMMARY_DATA_TYPE } from '@/services/workspace-home/constants/workspace-home-constant';
-import { useWorkspaceHomePageStore } from '@/services/workspace-home/store/workspace-home-page-store';
-import type {
-    EmptyData,
-    ProviderReferenceDataMap,
-} from '@/services/workspace-home/types/workspace-home-type';
+import AssetSummaryDailyUpdates from '@/services/workspace-home/shared/components/AssetSummaryDailyUpdates.vue';
+import AssetSummaryProvider from '@/services/workspace-home/shared/components/AssetSummaryProvider.vue';
+import EmptySummaryData from '@/services/workspace-home/shared/components/EmptySummaryData.vue';
+import { useAssetDailyUpdates } from '@/services/workspace-home/shared/composables/use-asset-daily-updates';
+import { useAssetSummaryProviders } from '@/services/workspace-home/shared/composables/use-asset-summary-providers';
+import { SUMMARY_DATA_TYPE } from '@/services/workspace-home/shared/constants/summary-type-constant';
+import type { EmptyData } from '@/services/workspace-home/shared/types/empty-data-type';
+import type { WidgetMode } from '@/services/workspace-home/shared/types/widget-mode-type';
 
 const METRIC_MANAGED_CREATED_COUNT = 'metric-managed-created-count';
 
+const props = withDefaults(defineProps<{
+    projectIds?: string[];
+    mode?: WidgetMode;
+}>(), {
+    projectIds: undefined,
+    mode: 'workspace',
+});
+
 const allReferenceStore = useAllReferenceStore();
 const allReferenceGetters = allReferenceStore.getters;
-const userWorkspaceStore = useUserWorkspaceStore();
-const userWorkspaceGetters = userWorkspaceStore.getters;
-const workspaceHomePageStore = useWorkspaceHomePageStore();
 const userStore = useUserStore();
 
 const storeState = reactive({
-    currentWorkspaceId: computed<string|undefined>(() => userWorkspaceGetters.currentWorkspaceId),
-    providerMap: computed<ProviderReferenceDataMap>(() => allReferenceGetters.provider),
     serviceAccounts: computed<ServiceAccountReferenceMap>(() => allReferenceGetters.serviceAccount),
     collectors: computed<CollectorReferenceMap>(() => allReferenceGetters.collector),
     pageAccessPermissionMap: computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap),
 });
 const state = reactive({
-    loading: true,
     isNoCollectors: computed<boolean>(() => !Object.keys(storeState.collectors).length),
     isNoServiceAccounts: computed<boolean>(() => !Object.keys(storeState.serviceAccounts).length),
     writableServiceAccount: computed<boolean|undefined>(() => storeState.pageAccessPermissionMap[MENU_ID.SERVICE_ACCOUNT].write),
@@ -74,13 +74,16 @@ const state = reactive({
     accessLink: computed<boolean>(() => !isEmpty(storeState.pageAccessPermissionMap[MENU_ID.METRIC_EXPLORER])),
 });
 
-watch([() => storeState.currentWorkspaceId, () => storeState.providerMap], async ([currentWorkspaceId]) => {
-    if (!currentWorkspaceId) return;
-    state.loading = true;
-    await workspaceHomePageStore.fetchCloudServiceResources();
-    await workspaceHomePageStore.fetchDailyUpdatesList();
-    state.loading = false;
-}, { immediate: true });
+const projectIds = computed(() => props.projectIds ?? []);
+const enabled = computed(() => {
+    if (props.mode === 'workspace') {
+        return !state.isNoCollectors && !state.isNoServiceAccounts;
+    }
+    return !state.isNoCollectors && !state.isNoServiceAccounts && projectIds.value.length > 0;
+});
+const { isLoadingDailyUpdates, dailyUpdates } = useAssetDailyUpdates({ projectIds, enabled });
+const { isLoadingProviders, providers } = useAssetSummaryProviders({ projectIds, enabled });
+
 </script>
 
 <template>
@@ -89,45 +92,44 @@ watch([() => storeState.currentWorkspaceId, () => storeState.providerMap], async
                        size="lg"
                        class="main-title"
         />
-        <div v-if="state.loading"
+        <div v-if="isLoadingProviders || isLoadingDailyUpdates"
              class="loading-wrapper"
         >
             <p-spinner size="lg" />
         </div>
-        <div v-else>
-            <div v-if="!state.isNoCollectors && !state.isNoServiceAccounts">
-                <div class="content-wrapper">
-                    <asset-summary-provider />
-                    <asset-summary-daily-updates />
-                </div>
-                <p-divider v-if="state.accessLink"
-                           class="divider"
-                />
-                <p-link v-if="state.accessLink"
-                        highlight
-                        :to="{
-                            name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME,
-                            params: { metricId: METRIC_MANAGED_CREATED_COUNT},
-                        }"
-                        action-icon="internal-link"
-                        class="link"
-                >
-                    <span>{{ $t('HOME.ASSET_SUMMARY_SHOW_MORE_DAILY_UPDATE') }}</span>
-                </p-link>
+        <div v-else-if="!state.isNoCollectors && !state.isNoServiceAccounts">
+            <div class="content-wrapper">
+                <asset-summary-provider :providers="providers" />
+                <asset-summary-daily-updates :daily-updates="dailyUpdates" />
             </div>
-            <empty-summary-data v-else
-                                :image-url="require('/images/home/img_workspace-home_asset-summary_empty-state-background-min.png')"
-                                :empty-data="state.emptyData"
-                                :type="SUMMARY_DATA_TYPE.ASSET"
+            <p-divider v-if="state.accessLink"
+                       class="divider"
             />
+            <p-link v-if="state.accessLink"
+                    highlight
+                    :to="{
+                        name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME,
+                        params: { metricId: METRIC_MANAGED_CREATED_COUNT },
+                    }"
+                    action-icon="internal-link"
+                    class="link"
+            >
+                <span>{{ $t('HOME.ASSET_SUMMARY_SHOW_MORE_DAILY_UPDATE') }}</span>
+            </p-link>
         </div>
+        <empty-summary-data v-else
+                            :image-url="require('/images/home/img_workspace-home_asset-summary_empty-state-background-min.png')"
+                            :empty-data="state.emptyData"
+                            :type="SUMMARY_DATA_TYPE.ASSET"
+        />
     </div>
 </template>
 
 <style scoped lang="postcss">
 .asset-summary {
+    @apply rounded-lg bg-white;
     .main-title {
-        padding-left: 1rem;
+        @apply pt-6 px-6;
     }
     .loading-wrapper {
         @apply flex items-center justify-center;
diff --git a/apps/web/src/services/workspace-home/components/AssetSummaryDailyUpdateItem.vue b/apps/web/src/services/workspace-home/shared/components/AssetSummaryDailyUpdateItem.vue
similarity index 54%
rename from apps/web/src/services/workspace-home/components/AssetSummaryDailyUpdateItem.vue
rename to apps/web/src/services/workspace-home/shared/components/AssetSummaryDailyUpdateItem.vue
index 4328173c8d..3b6e9108e5 100644
--- a/apps/web/src/services/workspace-home/components/AssetSummaryDailyUpdateItem.vue
+++ b/apps/web/src/services/workspace-home/shared/components/AssetSummaryDailyUpdateItem.vue
@@ -1,6 +1,5 @@
 <script setup lang="ts">
 import { computed, reactive } from 'vue';
-import type { Location } from 'vue-router';
 
 import { isEmpty } from 'lodash';
 
@@ -13,29 +12,16 @@ import { assetUrlConverter } from '@/lib/helper/asset-helper';
 import { MENU_ID } from '@/lib/menu/config';
 
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
-import type { CloudServiceData } from '@/services/workspace-home/types/workspace-home-type';
+import type { DailyUpdateItem } from '@/services/workspace-home/shared/types/asset-daily-updates-type';
 
 
-interface CloudServiceItem {
-    cloudServiceGroup: string;
-    cloudServiceType: string;
-    icon?: string;
+
+interface Props extends DailyUpdateItem {
     isCreateWarning?: boolean;
     isDeleteWarning?: boolean;
-    totalCount: number;
-    createdCount: number;
-    deletedCount: number;
-    createdHref?: Location;
-    deletedHref?: Location;
-}
-
-interface Props {
-    item: CloudServiceData;
 }
 
-const props = withDefaults(defineProps<Props>(), {
-    item: () => ({} as CloudServiceData),
-});
+const props = defineProps<Props>();
 
 const userStore = useUserStore();
 
@@ -44,82 +30,82 @@ const storeState = reactive({
 });
 const state = reactive({
     accessLink: computed<boolean>(() => !isEmpty(storeState.pageAccessPermissionMap[MENU_ID.METRIC_EXPLORER])),
-    dailyUpdateItem: computed<CloudServiceItem>(() => ({
-        cloudServiceGroup: props.item.cloud_service_group,
-        cloudServiceType: props.item.cloud_service_type,
-        icon: props.item.icon,
-        isCreateWarning: props.item.create_warning,
-        isDeleteWarning: props.item.delete_warning,
-        totalCount: props.item.total_count,
-        createdCount: props.item.created_count,
-        deletedCount: props.item.deleted_count,
-        createdHref: {
-            name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME,
-            params: {
-                metricId: 'metric-managed-created-count',
-                groupBy: props.item.provider,
-                group: props.item.cloud_service_group,
-                type: props.item.cloud_service_type,
-            },
-        },
-        deletedHref: {
-            name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME,
-            params: {
-                metricId: 'metric-managed-deleted-count',
-                groupBy: props.item.provider,
-                group: props.item.cloud_service_group,
-                type: props.item.cloud_service_type,
-            },
-        },
-    })),
+    // dailyUpdateItem: computed<CloudServiceItem>(() => ({
+    //     cloudServiceGroup: props.item.cloudServiceGroup,
+    //     cloudServiceType: props.item.cloudServiceType,
+    //     icon: props.item.icon,
+    //     isCreateWarning: props.item.create_warning,
+    //     isDeleteWarning: props.item.delete_warning,
+    //     totalCount: props.item.totalCount,
+    //     createdCount: props.item.createdCount,
+    //     deletedCount: props.item.deletedCount,
+    // })),
 });
 </script>
 
 <template>
     <div class="asset-summary-daily-update-item"
-         :class="{'is-warning': state.dailyUpdateItem.isCreateWarning || state.dailyUpdateItem.isDeleteWarning}"
+         :class="{'is-warning': props.isCreateWarning || props.isDeleteWarning}"
     >
         <p-lazy-img
-            v-if="state.dailyUpdateItem.icon"
-            :src="assetUrlConverter(state.dailyUpdateItem.icon)"
+            v-if="props.icon"
+            :src="assetUrlConverter(props.icon)"
             width="1.25rem"
             height="1.25rem"
             class="icon"
         />
-        <span class="title">{{ state.dailyUpdateItem.cloudServiceGroup }}/{{ state.dailyUpdateItem.cloudServiceType }}
-            <span class="total-count">({{ state.dailyUpdateItem.totalCount }})</span>
+        <span class="title">{{ props.cloudServiceGroup }}/{{ props.cloudServiceType }}
+            <span class="total-count">({{ props.totalCount }})</span>
         </span>
-        <div v-if="state.dailyUpdateItem.createdCount"
+        <div v-if="props.createdCount"
              class="data-row created"
         >
             <span class="text-wrapper"
                   :class="{'no-access': !state.accessLink}"
             >
-                <p-i v-if="state.dailyUpdateItem.isCreateWarning"
+                <p-i v-if="props.isCreateWarning"
                      name="ic_warning-filled"
                      width="0.75rem"
                      height="0.75rem"
                      class="warning-icon"
                 />
-                <router-link :to="state.accessLink ? state.dailyUpdateItem.createdHref : undefined">
-                    <span class="label">{{ $t('HOME.ASSET_SUMMARY_CREATED', { count: state.dailyUpdateItem.createdCount }) }}</span>
+                <router-link :to="state.accessLink ? {
+                    name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME,
+                    params: {
+                        metricId: 'metric-managed-created-count',
+                        groupBy: props.provider,
+                        group: props.cloudServiceGroup,
+                        type: props.cloudServiceType,
+                    },
+                } : {}"
+                >
+                    <span class="label">{{ $t('HOME.ASSET_SUMMARY_CREATED', { count: props.createdCount }) }}</span>
                 </router-link>
             </span>
         </div>
-        <div v-if="state.dailyUpdateItem.deletedCount"
+        <div v-if="props.deletedCount"
              class="data-row deleted"
         >
             <span class="text-wrapper"
                   :class="{'no-access': !state.accessLink}"
             >
-                <p-i v-if="state.dailyUpdateItem.isDeleteWarning"
+                <p-i v-if="props.isDeleteWarning"
                      name="ic_warning-filled"
                      width="0.75rem"
                      height="0.75rem"
                      class="warning-icon"
                 />
-                <router-link :to="state.accessLink ? state.dailyUpdateItem.deletedHref : undefined">
-                    <span class="label">{{ $t('HOME.ASSET_SUMMARY_DELETED', { count: state.dailyUpdateItem.deletedCount }) }}</span>
+                <router-link :to="state.accessLink ? {
+                    name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME,
+                    params: {
+                        metricId: 'metric-managed-deleted-count',
+                        groupBy: props.provider,
+                        group: props.cloudServiceGroup,
+                        type: props.cloudServiceType,
+                    },
+                } : {}"
+                >
+                    <span class="label">{{ $t('HOME.ASSET_SUMMARY_DELETED', { count: props.deletedCount }) }}</span>
                 </router-link>
             </span>
         </div>
diff --git a/apps/web/src/services/workspace-home/components/AssetSummaryDailyUpdates.vue b/apps/web/src/services/workspace-home/shared/components/AssetSummaryDailyUpdates.vue
similarity index 73%
rename from apps/web/src/services/workspace-home/components/AssetSummaryDailyUpdates.vue
rename to apps/web/src/services/workspace-home/shared/components/AssetSummaryDailyUpdates.vue
index 8ae81a3a37..15f786388a 100644
--- a/apps/web/src/services/workspace-home/components/AssetSummaryDailyUpdates.vue
+++ b/apps/web/src/services/workspace-home/shared/components/AssetSummaryDailyUpdates.vue
@@ -5,58 +5,43 @@ import {
 } from 'vue';
 
 import {
-    groupBy, map, sumBy,
-} from 'lodash';
-
-import { PFieldTitle, PIconButton, PEmpty } from '@cloudforet/mirinae';
+    PFieldTitle, PIconButton, PEmpty,
+} from '@cloudforet/mirinae';
 
 import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import type { CloudServiceTypeReferenceMap, CloudServiceTypeItem } from '@/store/reference/cloud-service-type-reference-store';
 
-import AssetSummaryDailyUpdateItem from '@/services/workspace-home/components/AssetSummaryDailyUpdateItem.vue';
-import { useWorkspaceHomePageStore } from '@/services/workspace-home/store/workspace-home-page-store';
-import { DEFAULT_PADDING } from '@/services/workspace-home/types/workspace-home-type';
-import type { CloudServiceData, DailyUpdatesListItem } from '@/services/workspace-home/types/workspace-home-type';
+import AssetSummaryDailyUpdateItem from '@/services/workspace-home/shared/components/AssetSummaryDailyUpdateItem.vue';
+import type { DailyUpdateItem } from '@/services/workspace-home/shared/types/asset-daily-updates-type';
+
 
+const DEFAULT_PADDING = 24;
 const DAILY_UPDATE__DEFAULT_WIDTH = 136 + 8;
 
 const rowItemsWrapperRef = ref<null | HTMLElement>(null);
 const dailyUpdateEl = ref<null | HTMLElement>(null);
 
+const props = withDefaults(defineProps<{
+    dailyUpdates?: DailyUpdateItem[];
+}>(), {
+    dailyUpdates: () => [],
+});
+
 const allReferenceStore = useAllReferenceStore();
 const allReferenceGetters = allReferenceStore.getters;
-const workspaceHomePageStore = useWorkspaceHomePageStore();
-const workspaceHomePageState = workspaceHomePageStore.state;
 
 const { width: rowItemsWrapperWidth } = useElementSize(rowItemsWrapperRef);
 
+
 const storeState = reactive({
     cloudServiceTypeMap: computed<CloudServiceTypeReferenceMap>(() => allReferenceGetters.cloud_service_type),
-    dailyUpdatesListItems: computed<DailyUpdatesListItem>(() => workspaceHomePageState.dailyUpdatesListItems),
 });
+
 const state = reactive({
     cloudServiceTypeList: computed<CloudServiceTypeItem[]>(() => Object.values(storeState.cloudServiceTypeMap)),
-    dailyUpdatesList: computed<CloudServiceData[]>(() => {
-        const mergedArray = [...storeState.dailyUpdatesListItems.created, ...storeState.dailyUpdatesListItems.deleted];
-
-        const grouped = groupBy(mergedArray, (item) => `${item.cloud_service_group}-${item.cloud_service_type}-${item.provider}`);
-
-        return map(grouped, (group) => {
-            const cloudServiceType = state.cloudServiceTypeList.find((i) => i.data.cloud_service_type_key === `${group[0].provider}.${group[0].cloud_service_group}.${group[0].cloud_service_type}`);
-            return {
-                cloud_service_group: cloudServiceType?.data.group,
-                cloud_service_type: cloudServiceType?.name,
-                total_count: sumBy(group, 'total_count') || 0,
-                provider: cloudServiceType?.data.provider,
-                icon: cloudServiceType?.icon,
-                created_count: sumBy(group, 'created_count') || 0,
-                deleted_count: sumBy(group, 'deleted_count') || 0,
-            };
-        });
-    }),
     pageStart: 0,
     visibleCount: computed<number>(() => Math.floor((rowItemsWrapperWidth.value - DEFAULT_PADDING) / DAILY_UPDATE__DEFAULT_WIDTH)),
-    pageMax: computed<number>(() => Math.max(state.dailyUpdatesList.length - state.visibleCount, 0)),
+    pageMax: computed<number>(() => Math.max(props.dailyUpdates.length - state.visibleCount, 0)),
 });
 
 const handleClickArrowButton = (increment: number) => {
@@ -82,16 +67,16 @@ const handleClickArrowButton = (increment: number) => {
                 <span class="desc">{{ $t('HOME.ASSET_SUMMARY_DAILY_UPDATE_DESC') }}</span>
             </template>
         </p-field-title>
-        <div v-if="state.dailyUpdatesList.length > 0"
+        <div v-if="props.dailyUpdates.length > 0"
              ref="rowItemsWrapperRef"
              class="row-items-wrapper"
         >
             <div ref="dailyUpdateEl"
                  class="row-items-container"
             >
-                <asset-summary-daily-update-item v-for="(item, idx) in state.dailyUpdatesList"
+                <asset-summary-daily-update-item v-for="(item, idx) in props.dailyUpdates"
                                                  :key="`asset-summary-daily-update-item-${idx}`"
-                                                 :item="item"
+                                                 v-bind="item"
                 />
             </div>
             <p-icon-button v-if="state.pageStart !== 0"
diff --git a/apps/web/src/services/workspace-home/components/AssetSummaryProvider.vue b/apps/web/src/services/workspace-home/shared/components/AssetSummaryProvider.vue
similarity index 75%
rename from apps/web/src/services/workspace-home/components/AssetSummaryProvider.vue
rename to apps/web/src/services/workspace-home/shared/components/AssetSummaryProvider.vue
index 3fe85f8e81..822234973f 100644
--- a/apps/web/src/services/workspace-home/components/AssetSummaryProvider.vue
+++ b/apps/web/src/services/workspace-home/shared/components/AssetSummaryProvider.vue
@@ -8,33 +8,28 @@ import { sortBy } from 'lodash';
 
 import { PIconButton } from '@cloudforet/mirinae';
 
-import AssetSummaryProviderItem from '@/services/workspace-home/components/AssetSummaryProviderItem.vue';
-import { useWorkspaceHomePageStore } from '@/services/workspace-home/store/workspace-home-page-store';
-import {
-    DEFAULT_PADDING,
-} from '@/services/workspace-home/types/workspace-home-type';
-import type {
-    ProviderResourceDataItem,
-} from '@/services/workspace-home/types/workspace-home-type';
+import AssetSummaryProviderItem from '@/services/workspace-home/shared/components/AssetSummaryProviderItem.vue';
+import type { AssetProviderItem } from '@/services/workspace-home/shared/types/asset-provider-type';
 
+const DEFAULT_PADDING = 24;
 const PROVIDER_DEFAULT_WIDTH = 184 + 8;
 
+const props = withDefaults(defineProps<{
+    providers?: AssetProviderItem[];
+}>(), {
+    providers: () => [],
+});
+
 const rowItemsWrapperRef = ref<null | HTMLElement>(null);
 const providerEl = ref<null | HTMLElement>(null);
 
-const workspaceHomePageStore = useWorkspaceHomePageStore();
-const workspaceHomePageState = workspaceHomePageStore.state;
-
 const { width: rowItemsWrapperWidth } = useElementSize(rowItemsWrapperRef);
 
-const storeState = reactive({
-    providers: computed<ProviderResourceDataItem[]>(() => workspaceHomePageState.providers),
-});
 const state = reactive({
     visibleCount: computed<number>(() => Math.floor((rowItemsWrapperWidth.value - DEFAULT_PADDING) / PROVIDER_DEFAULT_WIDTH)),
     pageStart: 0,
-    pageMax: computed<number>(() => Math.max(storeState.providers.length - state.visibleCount, 0)),
-    providerList: computed<ProviderResourceDataItem[]>(() => sortBy(storeState.providers, (i) => i.data.order) as ProviderResourceDataItem[]),
+    pageMax: computed<number>(() => Math.max(props.providers.length - state.visibleCount, 0)),
+    providerList: computed<AssetProviderItem[]>(() => sortBy(props.providers, (i) => i.order)),
 });
 
 const handleClickArrowButton = (increment: number) => {
@@ -58,9 +53,9 @@ const handleClickArrowButton = (increment: number) => {
         <div ref="providerEl"
              class="row-items-container"
         >
-            <asset-summary-provider-item v-for="(item, idx) in state.providerList"
-                                         :key="`asset-summary-item-${idx}`"
-                                         :item="item"
+            <asset-summary-provider-item v-for="(item) in state.providerList"
+                                         :key="item.provider"
+                                         v-bind="item"
             />
         </div>
         <p-icon-button v-if="state.pageStart !== 0"
diff --git a/apps/web/src/services/workspace-home/components/AssetSummaryProviderItem.vue b/apps/web/src/services/workspace-home/shared/components/AssetSummaryProviderItem.vue
similarity index 84%
rename from apps/web/src/services/workspace-home/components/AssetSummaryProviderItem.vue
rename to apps/web/src/services/workspace-home/shared/components/AssetSummaryProviderItem.vue
index 3c42040a7a..d8b4cba1b8 100644
--- a/apps/web/src/services/workspace-home/components/AssetSummaryProviderItem.vue
+++ b/apps/web/src/services/workspace-home/shared/components/AssetSummaryProviderItem.vue
@@ -14,11 +14,8 @@ import { assetUrlConverter } from '@/lib/helper/asset-helper';
 import { MENU_ID } from '@/lib/menu/config';
 
 import { ASSET_INVENTORY_ROUTE } from '@/services/asset-inventory/routes/route-constant';
-import type { ProviderResourceDataItem } from '@/services/workspace-home/types/workspace-home-type';
+import type { AssetProviderItem } from '@/services/workspace-home/shared/types/asset-provider-type';
 
-interface Props {
-    item?: ProviderResourceDataItem;
-}
 
 const MANAGED_TARGET_TYPE = {
     SERVER: 'server',
@@ -26,9 +23,7 @@ const MANAGED_TARGET_TYPE = {
     STORAGE: 'storage',
 } as const;
 
-const props = withDefaults(defineProps<Props>(), {
-    item: undefined,
-});
+const props = defineProps<AssetProviderItem>();
 
 const router = useRouter();
 
@@ -41,14 +36,14 @@ const state = reactive({
 });
 const handleClickButton = (type: string) => {
     if (!state.accessLink) return;
-    if (!props.item) return;
+    if (!props.provider) return;
     let target = '';
     if (type === MANAGED_TARGET_TYPE.STORAGE) target = `metric-managed-${type}-size`;
     else target = `metric-managed-${type}-count`;
 
     router.push({
         name: ASSET_INVENTORY_ROUTE.METRIC_EXPLORER.DETAIL._NAME,
-        params: { metricId: target, groupBy: props.item.key },
+        params: { metricId: target, groupBy: props.provider },
     });
 };
 </script>
@@ -57,13 +52,13 @@ const handleClickButton = (type: string) => {
     <div class="asset-summary-provider-item">
         <div class="title-wrapper">
             <p-lazy-img
-                v-if="props.item.icon"
-                :src="assetUrlConverter(props.item.icon)"
+                v-if="props.icon"
+                :src="assetUrlConverter(props.icon)"
                 width="1.25rem"
                 height="1.25rem"
                 class="icon"
             />
-            <span>{{ props.item.name }}</span>
+            <span>{{ props.name }}</span>
         </div>
         <div class="data-wrapper">
             <p-text-button class="data-row"
@@ -73,7 +68,7 @@ const handleClickButton = (type: string) => {
                            @click="handleClickButton(MANAGED_TARGET_TYPE.SERVER)"
             >
                 <span class="label">{{ $t('HOME.ASSET_SUMMARY_SERVER') }}</span>
-                <span>{{ numberFormatter(props.item.server) || 0 }}</span>
+                <span>{{ numberFormatter(props.server) || 0 }}</span>
             </p-text-button>
             <p-text-button class="data-row"
                            :class="{ 'no-access': !state.accessLink }"
@@ -82,7 +77,7 @@ const handleClickButton = (type: string) => {
                            @click="handleClickButton(MANAGED_TARGET_TYPE.DATABASE)"
             >
                 <span class="label">{{ $t('HOME.ASSET_SUMMARY_DATABASE') }}</span>
-                <span>{{ numberFormatter(props.item.database) || 0 }}</span>
+                <span>{{ numberFormatter(props.database) || 0 }}</span>
             </p-text-button>
             <p-text-button class="data-row"
                            :class="{ 'no-access': !state.accessLink }"
@@ -91,7 +86,7 @@ const handleClickButton = (type: string) => {
                            @click="handleClickButton(MANAGED_TARGET_TYPE.STORAGE)"
             >
                 <span class="label">{{ $t('HOME.ASSET_SUMMARY_STORAGE') }}</span>
-                <span>{{ byteFormatter(props.item.storage) || 0 }}</span>
+                <span>{{ byteFormatter(props.storage) || 0 }}</span>
             </p-text-button>
         </div>
     </div>
diff --git a/apps/web/src/services/workspace-home/shared/components/CostSummary.vue b/apps/web/src/services/workspace-home/shared/components/CostSummary.vue
new file mode 100644
index 0000000000..fe7382e43e
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/components/CostSummary.vue
@@ -0,0 +1,345 @@
+<script setup lang="ts">
+import { useWindowSize } from '@vueuse/core';
+import {
+    computed, onMounted, onUnmounted, ref, watch,
+} from 'vue';
+
+import dayjs from 'dayjs';
+import { isEmpty } from 'lodash';
+
+import {
+    PDivider, PFieldTitle, PLink, PSpinner, PStatus, screens,
+} from '@cloudforet/mirinae';
+
+import { ROLE_TYPE } from '@/api-clients/identity/role/constant';
+import { i18n } from '@/translations';
+
+import { CURRENCY, CURRENCY_SYMBOL } from '@/store/display/constant';
+import type { Currency } from '@/store/display/type';
+import { useProjectReferenceStore, type ProjectReferenceMap } from '@/store/reference/project-reference-store';
+import { useUserStore } from '@/store/user/user-store';
+
+import type { PageAccessMap } from '@/lib/access-control/config';
+import { currencyMoneyFormatter } from '@/lib/helper/currency-helper';
+import { MENU_ID } from '@/lib/menu/config';
+
+import ProjectSelectDropdown from '@/common/modules/project/ProjectSelectDropdown.vue';
+
+import { COST_EXPLORER_ROUTE } from '@/services/cost-explorer/routes/route-constant';
+import type { Period } from '@/services/cost-explorer/types/cost-explorer-query-type';
+import { costStateSummaryFormatter } from '@/services/workspace-home/composables/use-workspace-home';
+import CostSummaryChart from '@/services/workspace-home/shared/components/CostSummaryChart.vue';
+import EmptySummaryData from '@/services/workspace-home/shared/components/EmptySummaryData.vue';
+import type { CostChartData } from '@/services/workspace-home/shared/composables/use-cost-chart-data';
+import { useCostChartData } from '@/services/workspace-home/shared/composables/use-cost-chart-data';
+import { useCostDataSourceQuery } from '@/services/workspace-home/shared/composables/use-cost-data-source-query';
+import { useCostReportConfigQuery } from '@/services/workspace-home/shared/composables/use-cost-report-config-query';
+import { COST_SUMMARY_STATE_TYPE } from '@/services/workspace-home/shared/constants/cost-summary-constant';
+import { SUMMARY_DATA_TYPE } from '@/services/workspace-home/shared/constants/summary-type-constant';
+import type { EmptyData } from '@/services/workspace-home/shared/types/empty-data-type';
+import type { WidgetMode } from '@/services/workspace-home/shared/types/widget-mode-type';
+
+const props = withDefaults(defineProps<{
+    projectIds?: string[];
+    mode?: WidgetMode;
+}>(), {
+    projectIds: undefined,
+    mode: 'workspace',
+});
+
+
+/* period */
+const { width } = useWindowSize();
+const isDesktopSize = computed(() => width.value > screens.laptop.max);
+const period = computed<Period>(() => {
+    const reportMonth = dayjs().utc();
+    const reportMonthPeriod = isDesktopSize.value ? 12 : 6;
+    const start = dayjs(reportMonth).utc().subtract(reportMonthPeriod, 'month').format('YYYY-MM');
+    const end = reportMonth.format('YYYY-MM');
+    return { start, end };
+});
+
+/* permission */
+const userStore = useUserStore();
+const isWorkspaceMember = computed(() => userStore.state.currentRoleInfo?.roleType === ROLE_TYPE.WORKSPACE_MEMBER);
+const pageAccessPermissionMap = computed<PageAccessMap>(() => userStore.getters.pageAccessPermissionMap);
+
+/* project select dropdown */
+const showProjectSelectDropdown = computed(() => {
+    if (props.mode === 'workspace') return isWorkspaceMember.value;
+    return false;
+});
+const selectedProjects = ref<string[]>([]);
+const projectReferenceStore = useProjectReferenceStore();
+const projects = computed<ProjectReferenceMap>(() => projectReferenceStore.getters.projectItems);
+const handleSelectedProject = (selectedProject: string[]) => {
+    selectedProjects.value = selectedProject;
+};
+watch(projects, (prjs) => {
+    if (!showProjectSelectDropdown.value) return;
+    const project = Object.keys(prjs)[0];
+    selectedProjects.value = [project];
+}, { immediate: true });
+
+/* data source */
+const { dataSource } = useCostDataSourceQuery();
+
+/* access link */
+const accessLink = computed<boolean>(() => !isEmpty(pageAccessPermissionMap.value[MENU_ID.COST_REPORT]));
+
+/* cost report config */
+const { costReportConfig } = useCostReportConfigQuery({
+    enabled: computed(() => {
+        if (props.mode === 'workspace') return !isWorkspaceMember.value;
+        return false;
+    }),
+});
+
+/* currency */
+const currency = computed<Currency>(() => costReportConfig.value?.currency || CURRENCY.USD);
+
+/* chart data */
+const mounted = ref(false);
+onMounted(() => {
+    mounted.value = true;
+});
+onUnmounted(() => {
+    mounted.value = false;
+});
+const { chartData, isLoading } = useCostChartData({
+    enabled: computed(() => {
+        if (props.mode === 'workspace') {
+            if (!isWorkspaceMember.value) {
+                return !!costReportConfig.value && mounted.value;
+            }
+            return mounted.value;
+        }
+        // project mode
+        return !!props.projectIds && props.projectIds.length > 0 && mounted.value;
+    }),
+    period,
+    currency,
+    projectIds: computed(() => {
+        if (props.mode === 'workspace') {
+            if (isWorkspaceMember.value) {
+                return selectedProjects.value;
+            }
+            return undefined;
+        }
+        return props.projectIds;
+    }),
+});
+
+/* empty data */
+const emptyData = computed<EmptyData>(() => {
+    let result = {} as EmptyData;
+    if (dataSource.value?.length === 0) {
+        result = {
+            to: { name: COST_EXPLORER_ROUTE.LANDING._NAME },
+            title: i18n.t('HOME.ACTIVATION_REQUIRED'),
+            desc: i18n.t('HOME.ACTIVATION_REQUIRED_DESC'),
+            buttonText: i18n.t('HOME.LEARN_MORE'),
+        };
+    } else if (isWorkspaceMember.value && isEmpty(projects.value)) {
+        result = {
+            title: i18n.t('HOME.PROJECT_REQUIRED'),
+            desc: i18n.t('HOME.PROJECT_REQUIRED_DESC'),
+        };
+    } else {
+        result = {
+            to: { name: COST_EXPLORER_ROUTE.COST_REPORT._NAME },
+            title: i18n.t('HOME.NO_COST_DATA'),
+            desc: i18n.t('HOME.NO_COST_DATA_DESC'),
+            buttonText: i18n.t('HOME.COST_SUMMARY_GO_TO_REPORT'),
+        };
+    }
+    return result;
+});
+
+/* monthly cost */
+const recentMonthValue = computed<CostChartData|undefined>(() => chartData.value?.[chartData.value.length - 2]);
+const currentMonthValue = computed<CostChartData|undefined>(() => chartData.value?.[chartData.value.length - 1]);
+
+/* date range */
+const recentDateRangeText = computed<string>(() => {
+    const lastMonth = dayjs().utc().subtract(1, 'month');
+    return `${lastMonth.startOf('month').format('YYYY-MM-DD')} ~ ${lastMonth.endOf('month').format('YYYY-MM-DD')}`;
+});
+const currentDateRangeText = computed<string>(() => {
+    const currentMonth = dayjs().utc();
+    return `${currentMonth.startOf('month').format('YYYY-MM-DD')} ~ ${currentMonth.format('YYYY-MM-DD')}`;
+});
+
+</script>
+
+<template>
+    <div class="cost-summary">
+        <div class="heading-wrapper">
+            <p-field-title :label="$t('HOME.COST_SUMMARY_TITLE')"
+                           size="lg"
+                           class="main-title"
+            />
+            <project-select-dropdown
+                v-if="showProjectSelectDropdown && !isEmpty(projects)"
+                class="project-select-dropdown"
+                :selected-project-ids="selectedProjects"
+                :use-fixed-menu-style="false"
+                project-selectable
+                position="right"
+                hide-create-button
+                :selection-label="$t('HOME.COST_SUMMARY_BY_PROJECT')"
+                :project-group-selectable="false"
+                @update:selected-project-ids="handleSelectedProject"
+            />
+        </div>
+        <div v-if="isLoading"
+             class="loading"
+        >
+            <p-spinner size="lg" />
+        </div>
+        <div v-else>
+            <div v-if="chartData && chartData.length > 0">
+                <div class="content-wrapper">
+                    <div class="price-wrapper">
+                        <div class="price-view">
+                            <p>{{ $t('HOME.COST_SUMMARY_LAST_MONT_TOTAL_COST') }}</p>
+                            <p class="price">
+                                <span class="unit">{{ CURRENCY_SYMBOL?.[currency] }}</span>
+                                <span>{{ currencyMoneyFormatter(recentMonthValue?.value, { currency, style: 'decimal' }) }}</span>
+                                <p-status v-bind="costStateSummaryFormatter(recentMonthValue?.is_confirmed ? COST_SUMMARY_STATE_TYPE.CONFIRM : COST_SUMMARY_STATE_TYPE.ESTIMATED)"
+                                          :text="recentMonthValue?.is_confirmed ? $t('HOME.CONFIRM') : $t('HOME.ESTIMATED')"
+                                          class="capitalize state"
+                                />
+                            </p>
+                            <p class="date">
+                                {{ recentDateRangeText }}
+                            </p>
+                        </div>
+                        <p-divider class="divider"
+                                   vertical
+                        />
+                        <div class="price-view">
+                            <p>{{ $t('HOME.COST_SUMMARY_CURRENT_TOTAL_COST') }}</p>
+                            <p class="price">
+                                <span class="unit">{{ CURRENCY_SYMBOL?.[currency] }}</span>
+                                <span>{{ currencyMoneyFormatter(currentMonthValue?.value, { currency, style: 'decimal' }) }}</span>
+                                <p-status v-bind="costStateSummaryFormatter(COST_SUMMARY_STATE_TYPE.AGGREGATING)"
+                                          :text="$t('HOME.AGGREGATING')"
+                                          class="capitalize state"
+                                />
+                            </p>
+                            <p class="date">
+                                {{ currentDateRangeText }}
+                            </p>
+                        </div>
+                    </div>
+                    <span class="chart-description">{{ $t('HOME.COST_SUMMARY_DESC') }}</span>
+                    <cost-summary-chart :currency="currency"
+                                        :data="chartData"
+                    />
+                </div>
+                <div v-if="!isWorkspaceMember && accessLink">
+                    <p-divider class="divider" />
+                    <div class="link-footer">
+                        <p-link highlight
+                                :to="{ name: COST_EXPLORER_ROUTE.COST_ANALYSIS._NAME }"
+                                action-icon="internal-link"
+                                class="link"
+                        >
+                            {{ $t('HOME.COST_SUMMARY_GO_TO_COST_ANALYSIS') }}
+                        </p-link>
+                        <div class="vertical-divider">
+                            <p-divider style="height: 14px;"
+                                       vertical
+                            />
+                        </div>
+                        <p-link highlight
+                                :to="{ name: COST_EXPLORER_ROUTE.COST_REPORT._NAME }"
+                                action-icon="internal-link"
+                                class="link"
+                        >
+                            {{ $t('HOME.COST_SUMMARY_GO_TO_REPORT') }}
+                        </p-link>
+                    </div>
+                </div>
+            </div>
+            <empty-summary-data v-else
+                                :image-url="require('/images/home/img_workspace-home_cost-summary_empty-state-background-min.png')"
+                                :empty-data="emptyData"
+                                :type="SUMMARY_DATA_TYPE.COST"
+            />
+        </div>
+    </div>
+</template>
+
+<style scoped lang="postcss">
+.cost-summary {
+    @apply rounded-lg bg-white;
+    min-height: 30.5rem;
+    .heading-wrapper {
+        @apply flex;
+        .project-select-dropdown {
+            margin-right: 1rem;
+            margin-left: auto;
+        }
+    }
+    .loading {
+        @apply flex items-center justify-center;
+        min-height: 27.5rem;
+    }
+    .main-title {
+        @apply pt-6 px-6;
+    }
+    .content-wrapper {
+        @apply flex flex-col;
+        padding: 1.375rem 1.5rem 2rem;
+        .price-wrapper {
+            @apply flex text-label-md border border-gray-200;
+            padding-top: 1rem;
+            padding-bottom: 1rem;
+            border-radius: 0.375rem;
+            .price-view {
+                @apply flex flex-col;
+                flex: 1;
+                padding-right: 1rem;
+                padding-left: 1rem;
+                .price {
+                    @apply flex items-center text-display-md;
+                    margin-top: 0.25rem;
+                    .unit {
+                        @apply text-display-sm text-gray-600;
+                    }
+                    .state {
+                        @apply text-label-sm;
+                        margin-left: 0.5rem;
+                    }
+                }
+                .date {
+                    @apply text-label-sm text-gray-500;
+                    margin-top: 0.5rem;
+                }
+            }
+        }
+        .chart-description {
+            @apply text-paragraph-sm text-gray-700;
+            margin-top: 0.5rem;
+            margin-bottom: 1rem;
+        }
+    }
+    .divider {
+        @apply bg-gray-150;
+    }
+    .link-footer {
+        @apply flex justify-center items-center gap-4;
+
+        .vertical-divider {
+            @apply flex items-center h-full;
+        }
+        .link {
+            @apply inline-flex items-center justify-center text-label-md;
+            padding-top: 0.625rem;
+            padding-bottom: 0.75rem;
+        }
+    }
+}
+</style>
diff --git a/apps/web/src/services/workspace-home/components/CostSummaryChart.vue b/apps/web/src/services/workspace-home/shared/components/CostSummaryChart.vue
similarity index 94%
rename from apps/web/src/services/workspace-home/components/CostSummaryChart.vue
rename to apps/web/src/services/workspace-home/shared/components/CostSummaryChart.vue
index 26904538ca..ffce38475a 100644
--- a/apps/web/src/services/workspace-home/components/CostSummaryChart.vue
+++ b/apps/web/src/services/workspace-home/shared/components/CostSummaryChart.vue
@@ -17,11 +17,10 @@ import type { Currency } from '@/store/display/type';
 
 import { green, blue, coral } from '@/styles/colors';
 
-import type { CostXYChartData } from '@/services/cost-explorer/types/cost-explorer-chart-type';
+import type { CostChartData } from '@/services/workspace-home/shared/composables/use-cost-chart-data';
 
 interface Props {
-    period: { start: string; end: string };
-    data: CostXYChartData[];
+    data: CostChartData[];
     currency: Currency|undefined;
 }
 const props = withDefaults(defineProps<Props>(), {
@@ -32,7 +31,7 @@ const chartContext = ref<HTMLElement|null>(null);
 
 const state = reactive({
     chart: null as EChartsType | null,
-    chartData: computed<CostXYChartData[]>(() => {
+    chartData: computed<CostChartData[]>(() => {
         const data = props.data ?? [];
         if (!data) return [];
         return data;
diff --git a/apps/web/src/services/workspace-home/components/EmptySummaryData.vue b/apps/web/src/services/workspace-home/shared/components/EmptySummaryData.vue
similarity index 85%
rename from apps/web/src/services/workspace-home/components/EmptySummaryData.vue
rename to apps/web/src/services/workspace-home/shared/components/EmptySummaryData.vue
index 533cdfe83e..34cc551984 100644
--- a/apps/web/src/services/workspace-home/components/EmptySummaryData.vue
+++ b/apps/web/src/services/workspace-home/shared/components/EmptySummaryData.vue
@@ -17,8 +17,9 @@ import {
     green, indigo, peacock, violet,
 } from '@/styles/colors';
 
-import { SUMMARY_DATA_TYPE } from '@/services/workspace-home/constants/workspace-home-constant';
-import type { EmptyData, SummaryDataType } from '@/services/workspace-home/types/workspace-home-type';
+import { SUMMARY_DATA_TYPE } from '@/services/workspace-home/shared/constants/summary-type-constant';
+import type { EmptyData } from '@/services/workspace-home/shared/types/empty-data-type';
+import type { SummaryDataType } from '@/services/workspace-home/shared/types/summary-type';
 
 type IconInfo = {
     name: string,
@@ -73,12 +74,22 @@ const state = reactive({
         };
     }),
 });
+
+const handleClickButton = () => {
+    if (props.emptyData?.to) {
+        router.push(props.emptyData.to);
+    }
+};
 </script>
 
 <template>
-    <div class="empty-summary-data"
+    <div v-if="props.emptyData"
+         class="empty-summary-data"
          :style="{ backgroundImage: `url(${props.imageUrl})` }"
-         :class="{[props.type.toLowerCase()]: true, 'no-project-data': state.isWorkspaceMember && isEmpty(storeState.projects)}"
+         :class="{
+             [props.type ? props.type.toLowerCase() : '']: true,
+             'no-project-data': state.isWorkspaceMember && isEmpty(storeState.projects)
+         }"
     >
         <div class="icon-wrapper">
             <p-i class="menu-icon"
@@ -92,7 +103,7 @@ const state = reactive({
         <span class="desc">{{ props.emptyData.desc }}</span>
         <p-text-button v-if="!state.isWorkspaceMember && props.emptyData?.buttonText"
                        style-type="highlight"
-                       @click="router.push(props.emptyData.to)"
+                       @click="handleClickButton"
         >
             <span>{{ props.emptyData.buttonText }}</span>
         </p-text-button>
diff --git a/apps/web/src/services/workspace-home/shared/composables/use-asset-daily-updates.ts b/apps/web/src/services/workspace-home/shared/composables/use-asset-daily-updates.ts
new file mode 100644
index 0000000000..36968afee7
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/composables/use-asset-daily-updates.ts
@@ -0,0 +1,131 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+import dayjs from 'dayjs';
+import {
+    groupBy, map, sumBy,
+} from 'lodash';
+
+import { useMetricDataApi } from '@/api-clients/inventory/metric-data/composables/use-metric-data-api';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import type { CloudServiceTypeItem } from '@/store/reference/cloud-service-type-reference-store';
+import { useCloudServiceTypeReferenceStore } from '@/store/reference/cloud-service-type-reference-store';
+
+import type { DailyUpdateItem } from '@/services/workspace-home/shared/types/asset-daily-updates-type';
+
+export type UpdateLabel = 'created' | 'deleted';
+
+
+interface AnalyzeResult {
+    'Cloud Service Group': string; // group by
+    'Cloud Service Type': string; // group by
+    'Provider': string; // group by
+    _total_count?: number;
+    count?: { value: number; date: string; }[];
+}
+interface SelectResult extends Omit<DailyUpdateItem, 'createdCount' | 'deletedCount'> {
+    createdCount?: number;
+    deletedCount?: number;
+}
+
+const useDailyUpdateAnalyzeQuery = (label: UpdateLabel, opts?: {
+    enabled?: Ref<boolean>;
+    projectIds?: Ref<string[]>;
+}) => {
+    const { enabled, projectIds } = opts ?? {};
+    const { metricDataAPI } = useMetricDataApi();
+    const metricId = `metric-managed-${label}-count`;
+
+    const { key, params } = useServiceQueryKey('inventory', 'metric-data', 'analyze', {
+        params: computed(() => {
+            const today = dayjs.utc().format('YYYY-MM-DD');
+            const filter = projectIds?.value?.length ? [{
+                k: 'project_id', v: projectIds.value, o: 'in',
+            }] : undefined;
+
+            return {
+                metric_id: metricId,
+                query: {
+                    granularity: 'DAILY',
+                    group_by: ['labels.Provider', 'labels.Cloud Service Group', 'labels.Cloud Service Type'],
+                    start: today,
+                    end: today,
+                    fields: {
+                        count: {
+                            key: 'value',
+                            operator: 'sum',
+                        },
+                    },
+                    sort: [{ key: '_total_count', desc: true }],
+                    field_group: ['date'],
+                    filter,
+                },
+            };
+        }),
+        contextKey: metricId,
+    });
+
+
+    const { data, isLoading } = useScopedQuery({
+        queryKey: key,
+        queryFn: () => metricDataAPI.analyze<AnalyzeResult>(params.value),
+        select: (response): SelectResult[] => {
+            const results = response.results ?? [];
+            return results.map((i) => ({
+                cloudServiceGroup: i['Cloud Service Group'],
+                cloudServiceType: i['Cloud Service Type'],
+                provider: i.Provider,
+                totalCount: i._total_count ?? 0,
+                [`${label}Count`]: i.count?.[0]?.value || 0,
+            }));
+        },
+        enabled,
+        staleTime: 1000 * 60, // 1 minute
+        gcTime: 1000 * 60, // 1 minute
+    }, ['WORKSPACE']);
+
+    return {
+        data,
+        isLoading,
+    };
+};
+
+export const useAssetDailyUpdates = (ops?: {
+    enabled?: Ref<boolean>;
+    projectIds?: Ref<string[]>;
+}) => {
+    const { enabled, projectIds } = ops ?? {};
+
+    const created = useDailyUpdateAnalyzeQuery('created', { enabled, projectIds });
+    const deleted = useDailyUpdateAnalyzeQuery('deleted', { enabled, projectIds });
+
+    const cloudServiceTypeReferenceStore = useCloudServiceTypeReferenceStore();
+    const cloudServiceTypeList = computed<CloudServiceTypeItem[]>(() => Object.values(cloudServiceTypeReferenceStore.getters.cloudServiceTypeItems));
+
+    const dailyUpdates = computed<DailyUpdateItem[]>(() => {
+        const merged = [...created.data.value ?? [], ...deleted.data.value ?? []];
+        const grouped = groupBy(merged, (item) => `${item.cloudServiceGroup}-${item.cloudServiceType}-${item.provider}`);
+
+        return map(grouped, (group) => {
+            const cloudServiceType = cloudServiceTypeList.value.find((i) => i.data.cloud_service_type_key === `${group[0].provider}.${group[0].cloudServiceGroup}.${group[0].cloudServiceType}`);
+            return {
+                cloudServiceGroup: cloudServiceType?.data.group ?? '',
+                cloudServiceType: cloudServiceType?.name ?? '',
+                totalCount: sumBy(group, 'totalCount') || 0,
+                provider: cloudServiceType?.data.provider ?? '',
+                icon: cloudServiceType?.icon ?? '',
+                createdCount: sumBy(group, 'createdCount') || 0,
+                deletedCount: sumBy(group, 'deletedCount') || 0,
+            };
+        });
+    });
+
+    const isLoading = computed(() => created.isLoading.value || deleted.isLoading.value);
+
+    return {
+        dailyUpdates,
+        isLoadingDailyUpdates: isLoading,
+    };
+};
diff --git a/apps/web/src/services/workspace-home/shared/composables/use-asset-summary-providers.ts b/apps/web/src/services/workspace-home/shared/composables/use-asset-summary-providers.ts
new file mode 100644
index 0000000000..b9f5bf7eba
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/composables/use-asset-summary-providers.ts
@@ -0,0 +1,136 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+import dayjs from 'dayjs';
+
+import { useMetricDataApi } from '@/api-clients/inventory/metric-data/composables/use-metric-data-api';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import type { ProviderItem } from '@/store/reference/provider-reference-store';
+import { useProviderReferenceStore } from '@/store/reference/provider-reference-store';
+
+import type { AssetProviderItem } from '@/services/workspace-home/shared/types/asset-provider-type';
+
+type ResourceLabel = 'server' | 'database' | 'storage';
+
+
+interface ProviderResourceMetricsResult {
+    Provider: string;
+    _total_count: number;
+    [key: string]: any;
+}
+
+const useResourceMetricQuery = (resourceType: ResourceLabel, opts?: {
+    enabled?: Ref<boolean>;
+    projectIds?: Ref<string[]>;
+}) => {
+    const { enabled, projectIds } = opts ?? {};
+    const { metricDataAPI } = useMetricDataApi();
+
+    const metricType = resourceType === 'storage' ? 'size' : 'count';
+    const metricId = `metric-managed-${resourceType}-${metricType}`;
+
+    const { key, params } = useServiceQueryKey('inventory', 'metric-data', 'analyze', {
+        params: computed(() => {
+            const today = dayjs.utc().format('YYYY-MM-DD');
+            const filter = projectIds?.value?.length ? [{
+                k: 'project_id', v: projectIds.value, o: 'in',
+            }] : undefined;
+
+            return {
+                metric_id: metricId,
+                query: {
+                    granularity: 'DAILY',
+                    group_by: ['labels.Provider'],
+                    start: today,
+                    end: today,
+                    fields: {
+                        count: {
+                            key: 'value',
+                            operator: 'sum',
+                        },
+                    },
+                    sort: [{ key: '_total_count', desc: true }],
+                    field_group: ['date'],
+                    filter,
+                },
+            };
+        }),
+        contextKey: metricId,
+    });
+
+    return useScopedQuery({
+        queryKey: key,
+        queryFn: () => metricDataAPI.analyze(params.value),
+        select: (response): ProviderResourceMetricsResult[] => response.results ?? [],
+        enabled,
+        staleTime: 1000 * 60, // 1 minute
+        gcTime: 1000 * 60, // 1 minute
+    }, ['WORKSPACE']);
+};
+
+export const useAssetSummaryProviders = (opts?: {
+    enabled?: Ref<boolean>;
+    projectIds?: Ref<string[]>;
+}) => {
+    const { enabled, projectIds } = opts ?? {};
+    const providerReferenceStore = useProviderReferenceStore();
+    const providerMap = computed<Record<string, AssetProviderItem>>(() => {
+        const map: Record<string, AssetProviderItem> = {};
+        (Object.entries(providerReferenceStore.getters.providerItems) as [string, ProviderItem][])
+            .forEach(([key, provider]) => {
+                map[key] = {
+                    provider: key,
+                    name: provider.name,
+                    icon: provider.icon,
+                    order: provider.data?.order,
+                    server: 0,
+                    database: 0,
+                    storage: 0,
+                };
+            });
+        return map;
+    });
+
+    const serverQuery = useResourceMetricQuery('server', { enabled, projectIds });
+    const databaseQuery = useResourceMetricQuery('database', { enabled, projectIds });
+    const storageQuery = useResourceMetricQuery('storage', { enabled, projectIds });
+
+    const providers = computed((): AssetProviderItem[] => {
+        if (serverQuery.data.value) {
+            serverQuery.data.value.forEach((result) => {
+                if (providerMap.value[result.Provider]) {
+                    providerMap.value[result.Provider].server = result._total_count;
+                }
+            });
+        }
+
+        if (databaseQuery.data.value) {
+            databaseQuery.data.value.forEach((result) => {
+                if (providerMap.value[result.Provider]) {
+                    providerMap.value[result.Provider].database = result._total_count;
+                }
+            });
+        }
+
+        if (storageQuery.data.value) {
+            storageQuery.data.value.forEach((result) => {
+                if (providerMap.value[result.Provider]) {
+                    providerMap.value[result.Provider].storage = result._total_count;
+                }
+            });
+        }
+
+        return Object.values(providerMap.value);
+    });
+
+    const isLoading = computed(() => serverQuery.isLoading.value
+        || databaseQuery.isLoading.value
+        || storageQuery.isLoading.value);
+
+    return {
+        providers,
+        isLoadingProviders: isLoading,
+    };
+};
diff --git a/apps/web/src/services/workspace-home/shared/composables/use-cost-chart-data.ts b/apps/web/src/services/workspace-home/shared/composables/use-cost-chart-data.ts
new file mode 100644
index 0000000000..0ba5c0ba0e
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/composables/use-cost-chart-data.ts
@@ -0,0 +1,110 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+import dayjs from 'dayjs';
+import { sortBy } from 'lodash';
+
+import { useUnifiedCostApi } from '@/api-clients/cost-analysis/unified-cost/composables/use-unified-cost-api';
+import type { UnifiedCostAnalyzeParameters } from '@/api-clients/cost-analysis/unified-cost/schema/api-verbs/analyze';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+import type { Currency } from '@/store/display/type';
+
+import { GRANULARITY } from '@/services/cost-explorer/constants/cost-explorer-constant';
+import type { Period } from '@/services/cost-explorer/types/cost-explorer-query-type';
+
+export interface CostChartData {
+  is_confirmed: boolean;
+  date?: string;
+  value?: number;
+  _total_value_sum?: number;
+}
+
+const fillMissingMonths = (dataList: CostChartData[]): CostChartData[] => {
+    const result: CostChartData[] = [];
+    const today = dayjs().utc();
+    if (dataList.length === 0) return result;
+
+    dataList.sort((a, b) => dayjs(a.date).utc().diff(dayjs(b.date).utc()));
+
+    const startDate = dayjs(dataList[0]?.date).utc();
+    let currentDate = startDate;
+
+    while (currentDate.isBefore(today, 'month')) {
+        const dateToCheck = currentDate.clone();
+        const data = dataList.find((item) => dayjs(item.date).utc().isSame(dateToCheck, 'month'));
+        result.push(
+            data || { date: dateToCheck.add(1, 'month').format('YYYY-MM'), value: 0, is_confirmed: true },
+        );
+        currentDate = currentDate.add(1, 'month');
+    }
+    return result;
+};
+
+export const useCostChartData = ({
+    enabled,
+    currency,
+    period,
+    projectIds,
+}: {
+    enabled: Ref<boolean>;
+    currency: Ref<Currency>;
+    period: Ref<Period>;
+    projectIds: Ref<string[]|undefined>;
+}) => {
+    // Use unified cost API and queryKey
+    const { unifiedCostAPI } = useUnifiedCostApi();
+
+    // Use service query key for analyze
+    const { key, params } = useServiceQueryKey('cost-analysis', 'unified-cost', 'analyze', {
+        params: computed<UnifiedCostAnalyzeParameters>(() => ({
+            query: {
+                start: period.value.start,
+                end: period.value.end,
+                group_by: projectIds.value ? ['project_id', 'is_confirmed'] : ['is_confirmed'],
+                fields: {
+                    value_sum: {
+                        key: `cost.${currency.value}`,
+                        operator: 'sum',
+                    },
+                },
+                granularity: GRANULARITY.MONTHLY,
+                field_group: ['date'],
+                filter: (projectIds.value?.length) ? [
+                    { k: 'project_id', v: projectIds.value, o: 'in' },
+                ] : undefined,
+            },
+        })),
+    });
+
+    const {
+        data, isLoading, isError, refetch,
+    } = useScopedQuery({
+        queryKey: key,
+        queryFn: () => unifiedCostAPI.analyze(params.value),
+        select: (response) => {
+            if (!response.results) return [];
+
+            const _chartData: CostChartData[] = (response.results || [])
+                .flatMap((item) => ((item.value_sum ?? []))
+                    .map((valueSum) => ({
+                        ...valueSum,
+                        is_confirmed: item.is_confirmed,
+                    })));
+
+            // Sort and fill missing months
+            return sortBy(fillMissingMonths(_chartData), 'date');
+        },
+        enabled: computed(() => enabled.value && !!currency),
+        staleTime: 1000 * 60 * 5, // 5 minutes
+        gcTime: 1000 * 60 * 10, // 10 minutes
+    }, ['WORKSPACE']);
+
+    return {
+        isLoading,
+        isError,
+        chartData: data,
+        refetch,
+    };
+};
diff --git a/apps/web/src/services/workspace-home/shared/composables/use-cost-data-source-query.ts b/apps/web/src/services/workspace-home/shared/composables/use-cost-data-source-query.ts
new file mode 100644
index 0000000000..a167c06d5c
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/composables/use-cost-data-source-query.ts
@@ -0,0 +1,34 @@
+import type { Ref } from 'vue';
+
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+
+import { useDataSourceApi } from '@/api-clients/cost-analysis/data-source/composables/use-data-source-api';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+const dataSourceApiHelper = new ApiQueryHelper().setSort('workspace_id', false);
+
+export const useCostDataSourceQuery = (ops?: {
+    enabled?: Ref<boolean>;
+}) => {
+    const { enabled } = ops ?? {};
+    const { dataSourceAPI } = useDataSourceApi();
+    const { key, params } = useServiceQueryKey('cost-analysis', 'data-source', 'list', {
+        params: {
+            query: dataSourceApiHelper.data,
+        },
+    });
+    const { data, isLoading } = useScopedQuery({
+        queryKey: key,
+        queryFn: () => dataSourceAPI.list(params.value),
+        select: (d) => d.results ?? [],
+        enabled,
+        staleTime: 1000 * 60 * 60, // 1 hour
+        gcTime: 1000 * 60 * 60 * 24, // 1 day
+    }, ['WORKSPACE']);
+
+    return {
+        dataSource: data,
+        loadingDataSource: isLoading,
+    };
+};
diff --git a/apps/web/src/services/workspace-home/shared/composables/use-cost-report-config-query.ts b/apps/web/src/services/workspace-home/shared/composables/use-cost-report-config-query.ts
new file mode 100644
index 0000000000..417f9a4464
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/composables/use-cost-report-config-query.ts
@@ -0,0 +1,34 @@
+import type { Ref } from 'vue';
+
+import { ApiQueryHelper } from '@cloudforet/core-lib/space-connector/helper';
+
+import { useCostReportConfigApi } from '@/api-clients/cost-analysis/cost-report-config/composables/use-cost-report-config-api';
+import { useScopedQuery } from '@/query/composables/use-scoped-query';
+import { useServiceQueryKey } from '@/query/query-key/use-service-query-key';
+
+
+const costReportConfigApiHelper = new ApiQueryHelper().setSort('created_at', true);
+export const useCostReportConfigQuery = ({
+    enabled,
+}: {
+    enabled: Ref<boolean>;
+}) => {
+    const { costReportConfigAPI } = useCostReportConfigApi();
+    const { key, params } = useServiceQueryKey('cost-analysis', 'cost-report-config', 'list', {
+        params: {
+            query: costReportConfigApiHelper.data,
+        },
+    });
+    const { data } = useScopedQuery({
+        queryKey: key,
+        queryFn: () => costReportConfigAPI.list(params.value),
+        select: (d) => d.results?.[0],
+        enabled,
+        staleTime: 1000 * 60 * 60, // 1 hour
+        gcTime: 1000 * 60 * 60 * 24, // 1 day
+    }, ['WORKSPACE']);
+
+    return {
+        costReportConfig: data,
+    };
+};
diff --git a/apps/web/src/services/workspace-home/shared/composables/use-project-ids-from-group.ts b/apps/web/src/services/workspace-home/shared/composables/use-project-ids-from-group.ts
new file mode 100644
index 0000000000..9514b9d893
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/composables/use-project-ids-from-group.ts
@@ -0,0 +1,17 @@
+import type { Ref } from 'vue';
+import { computed } from 'vue';
+
+import type { ProjectReferenceItem } from '@/store/reference/project-reference-store';
+import { useProjectReferenceStore } from '@/store/reference/project-reference-store';
+
+export const useProjectIdsFromGroup = (groupId: Ref<string|undefined>) => {
+    const projectReferenceStore = useProjectReferenceStore();
+    const projects = computed<ProjectReferenceItem[]>(() => Object.values(projectReferenceStore.getters.projectItems));
+    const projectIds = computed(() => {
+        if (groupId.value === undefined) return [];
+        return projects.value.filter((p) => p.data.groupInfo?.id === groupId.value)
+            .map(((p) => p.key));
+    });
+
+    return projectIds;
+};
diff --git a/apps/web/src/services/workspace-home/shared/constants/cost-summary-constant.ts b/apps/web/src/services/workspace-home/shared/constants/cost-summary-constant.ts
new file mode 100644
index 0000000000..6b7522bb33
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/constants/cost-summary-constant.ts
@@ -0,0 +1,5 @@
+export const COST_SUMMARY_STATE_TYPE = {
+    AGGREGATING: 'AGGREGATING',
+    CONFIRM: 'CONFIRM',
+    ESTIMATED: 'ESTIMATED',
+} as const;
diff --git a/apps/web/src/services/workspace-home/shared/constants/summary-type-constant.ts b/apps/web/src/services/workspace-home/shared/constants/summary-type-constant.ts
new file mode 100644
index 0000000000..d3a212252f
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/constants/summary-type-constant.ts
@@ -0,0 +1,5 @@
+export const SUMMARY_DATA_TYPE = {
+    ASSET: 'Asset',
+    COST: 'Cost',
+    ACCOUNT: 'Account',
+} as const;
diff --git a/apps/web/src/services/workspace-home/shared/types/asset-daily-updates-type.ts b/apps/web/src/services/workspace-home/shared/types/asset-daily-updates-type.ts
new file mode 100644
index 0000000000..c9353049e6
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/types/asset-daily-updates-type.ts
@@ -0,0 +1,12 @@
+export interface DailyUpdateItem {
+  provider: string;
+  display_name?: string;
+  //
+  cloudServiceGroup: string;
+  cloudServiceType: string;
+  icon?: string;
+  totalCount: number;
+  createdCount: number;
+  deletedCount: number;
+}
+
diff --git a/apps/web/src/services/workspace-home/shared/types/asset-provider-type.ts b/apps/web/src/services/workspace-home/shared/types/asset-provider-type.ts
new file mode 100644
index 0000000000..980bbaeb84
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/types/asset-provider-type.ts
@@ -0,0 +1,9 @@
+export interface AssetProviderItem {
+  provider: string;
+  name: string;
+  order?: number;
+  icon?: string;
+  server?: number;
+  database?: number;
+  storage?: number;
+}
diff --git a/apps/web/src/services/workspace-home/shared/types/empty-data-type.ts b/apps/web/src/services/workspace-home/shared/types/empty-data-type.ts
new file mode 100644
index 0000000000..7ad9b0eb06
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/types/empty-data-type.ts
@@ -0,0 +1,8 @@
+import type { TranslateResult } from 'vue-i18n';
+
+export interface EmptyData {
+  to?: { name: string };
+  title: string | TranslateResult;
+  buttonText?: string | TranslateResult;
+  desc: string | TranslateResult;
+}
diff --git a/apps/web/src/services/workspace-home/shared/types/summary-type.ts b/apps/web/src/services/workspace-home/shared/types/summary-type.ts
new file mode 100644
index 0000000000..401b40dd9a
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/types/summary-type.ts
@@ -0,0 +1,3 @@
+import type { SUMMARY_DATA_TYPE } from '@/services/workspace-home/shared/constants/summary-type-constant';
+
+export type SummaryDataType = typeof SUMMARY_DATA_TYPE[keyof typeof SUMMARY_DATA_TYPE];
diff --git a/apps/web/src/services/workspace-home/shared/types/widget-mode-type.ts b/apps/web/src/services/workspace-home/shared/types/widget-mode-type.ts
new file mode 100644
index 0000000000..43abffb10f
--- /dev/null
+++ b/apps/web/src/services/workspace-home/shared/types/widget-mode-type.ts
@@ -0,0 +1 @@
+export type WidgetMode = 'workspace'|'project';
diff --git a/apps/web/src/services/workspace-home/store/workspace-home-page-store.ts b/apps/web/src/services/workspace-home/store/workspace-home-page-store.ts
index 0a3a2bb9ee..d50bddc4ae 100644
--- a/apps/web/src/services/workspace-home/store/workspace-home-page-store.ts
+++ b/apps/web/src/services/workspace-home/store/workspace-home-page-store.ts
@@ -1,7 +1,6 @@
 import { computed, reactive } from 'vue';
 import type { TranslateResult } from 'vue-i18n';
 
-import dayjs from 'dayjs';
 import { sortBy } from 'lodash';
 import { defineStore } from 'pinia';
 
@@ -9,21 +8,15 @@ 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 type { AnalyzeResponse } from '@/api-clients/_common/schema/api-verbs/analyze';
 import type { ListResponse } from '@/api-clients/_common/schema/api-verbs/list';
 import type { UserConfigListParameters } from '@/api-clients/config/user-config/schema/api-verbs/list';
 import type { UserConfigModel } from '@/api-clients/config/user-config/schema/model';
-import type { CostReportConfigListParameters } from '@/api-clients/cost-analysis/cost-report-config/schema/api-verbs/list';
-import type { CostReportConfigModel } from '@/api-clients/cost-analysis/cost-report-config/schema/model';
-import type { CostDataSourceModel } from '@/api-clients/cost-analysis/data-source/schema/model';
 import type { AppListParameters } from '@/api-clients/identity/app/schema/api-verbs/list';
 import type { AppModel } from '@/api-clients/identity/app/schema/model';
 import type { WorkspaceUserListParameters } from '@/api-clients/identity/workspace-user/schema/api-verbs/list';
 import type { WorkspaceUserModel } from '@/api-clients/identity/workspace-user/schema/model';
-import type { MetricDataAnalyzeParameters } from '@/schema/inventory/metric-data/api-verbs/analyze';
 
 import { useUserWorkspaceStore } from '@/store/app-context/workspace/user-workspace-store';
-import { useAllReferenceStore } from '@/store/reference/all-reference-store';
 import { useUserStore } from '@/store/user/user-store';
 
 import { MENU_ID } from '@/lib/menu/config';
@@ -36,11 +29,8 @@ import type { FavoriteItem } from '@/common/modules/favorites/favorite-button/ty
 import { FAVORITE_TYPE } from '@/common/modules/favorites/favorite-button/type';
 import { RECENT_TYPE } from '@/common/modules/navigations/type';
 
-import type { MetricDataAnalyzeResult } from '@/services/asset-inventory/types/asset-analysis-type';
-import { convertFormKeys } from '@/services/workspace-home/composables/use-workspace-home';
 import { BOOKMARK_TYPE } from '@/services/workspace-home/constants/workspace-home-constant';
 import type {
-    ProviderReferenceDataMap, ProviderResourceDataItem, DailyUpdatesListItem,
     BookmarkType,
 } from '@/services/workspace-home/types/workspace-home-type';
 
@@ -57,18 +47,11 @@ interface WorkspaceHomeState {
     // user config
     recentList: UserConfigModel[];
     favoriteMenuList: FavoriteItem[];
-    // summary
-    costReportConfig: CostReportConfigModel|null|undefined;
-    dataSource: CostDataSourceModel[];
-    providers: ProviderResourceDataItem[];
-    dailyUpdatesListItems: DailyUpdatesListItem;
 }
 
 export const useWorkspaceHomePageStore = defineStore('page-workspace-home', () => {
     const userWorkspaceStore = useUserWorkspaceStore();
     const userWorkspaceStoreGetters = userWorkspaceStore.getters;
-    const allReferenceStore = useAllReferenceStore();
-    const allReferenceGetters = allReferenceStore.getters;
     const bookmarkStore = useBookmarkStore();
     const bookmarkState = bookmarkStore.state;
     const userStore = useUserStore();
@@ -85,19 +68,11 @@ export const useWorkspaceHomePageStore = defineStore('page-workspace-home', () =
         recentList: [],
         favoriteMenuList: [],
 
-        costReportConfig: null,
-        dataSource: [],
-        providers: [],
-        dailyUpdatesListItems: {
-            created: [],
-            deleted: [],
-        },
     });
 
     const _getters = reactive({
         userId: computed<string|undefined>(() => userStore.state.userId),
         currentWorkspaceId: computed<string|undefined>(() => userWorkspaceStoreGetters.currentWorkspaceId),
-        providerMap: computed<ProviderReferenceDataMap>(() => allReferenceGetters.provider),
         bookmarkType: computed<BookmarkType|undefined>(() => bookmarkState.bookmarkType),
         filterByFolder: computed<TranslateResult|undefined>(() => bookmarkState.filterByFolder),
     });
@@ -137,7 +112,6 @@ export const useWorkspaceHomePageStore = defineStore('page-workspace-home', () =
 
     const recentListApiQuery = new ApiQueryHelper().setSort('updated_at', true);
     const favoriteListApiQuery = new ApiQueryHelper().setSort('updated_at', true);
-    const costReportConfigApiHelper = new ApiQueryHelper().setSort('created_at', true);
     const listCountQueryHelper = new ApiQueryHelper().setCountOnly();
 
     const actions = {
@@ -150,13 +124,6 @@ export const useWorkspaceHomePageStore = defineStore('page-workspace-home', () =
             state.isFileFullMode = false;
             state.recentList = [];
             state.favoriteMenuList = [];
-            state.costReportConfig = null;
-            state.dataSource = [];
-            state.providers = [];
-            state.dailyUpdatesListItems = {
-                created: [],
-                deleted: [],
-            };
         },
         fetchBookmarkFolderList: async () => {
             const bookmarkListApiQuery = new ApiQueryHelper()
@@ -298,109 +265,6 @@ export const useWorkspaceHomePageStore = defineStore('page-workspace-home', () =
                 ErrorHandler.handleError(e);
             }
         },
-        fetchCostReportConfig: async () => {
-            if (state.costReportConfig !== null) return;
-            try {
-                const { results } = await SpaceConnector.clientV2.costAnalysis.costReportConfig.list<CostReportConfigListParameters, ListResponse<CostReportConfigModel>>({
-                    query: costReportConfigApiHelper.data,
-                });
-                state.costReportConfig = results?.[0];
-            } catch (e) {
-                ErrorHandler.handleError(e);
-                state.costReportConfig = undefined;
-            }
-        },
-        fetchDataSource: async () => {
-            try {
-                const response = await SpaceConnector.clientV2.costAnalysis.dataSource.list({
-                    query: {
-                        sort: [{ key: 'workspace_id', desc: false }],
-                    },
-                });
-                state.dataSource = response?.results || [];
-            } catch (e) {
-                ErrorHandler.handleError(e);
-                state.dataSource = [];
-            }
-        },
-        fetchCloudServiceResources: async () => {
-            const labels = ['Server', 'Database', 'Storage'];
-
-            try {
-                await Promise.all(labels.map(async (label) => {
-                    const metricId = `metric-managed-${label.toLowerCase()}-${label !== 'Storage' ? 'count' : 'size'}`;
-                    const fetcher = getCancellableFetcher<MetricDataAnalyzeParameters, AnalyzeResponse<MetricDataAnalyzeResult>>(SpaceConnector.clientV2.inventory.metricData.analyze);
-                    const { status, response } = await fetcher({
-                        metric_id: metricId,
-                        query: {
-                            granularity: 'DAILY',
-                            group_by: ['labels.Provider'],
-                            start: dayjs.utc().format('YYYY-MM-DD'),
-                            end: dayjs.utc().format('YYYY-MM-DD'),
-                            fields: {
-                                count: {
-                                    key: 'value',
-                                    operator: 'sum',
-                                },
-                            },
-                            sort: [{ key: '_total_count', desc: true }],
-                            field_group: ['date'],
-                        },
-                    });
-
-                    if (status === 'succeed') {
-                        (response?.results || []).forEach((i) => {
-                            _getters.providerMap[i.Provider][label.toLowerCase()] = i._total_count;
-                        });
-                    }
-                }));
-                state.providers = Object.keys(_getters.providerMap).map((key) => _getters.providerMap[key]);
-            } catch (e) {
-                ErrorHandler.handleError(e);
-                state.providers = [];
-            }
-        },
-        fetchDailyUpdatesList: async (): Promise<void> => {
-            const labels = ['created', 'deleted'];
-
-            try {
-                await Promise.all(labels.map(async (label) => {
-                    const metricId = `metric-managed-${label.toLowerCase()}-count`;
-                    const fetcher = getCancellableFetcher<MetricDataAnalyzeParameters, AnalyzeResponse<MetricDataAnalyzeResult>>(SpaceConnector.clientV2.inventory.metricData.analyze);
-                    const { status, response } = await fetcher({
-                        metric_id: metricId,
-                        query: {
-                            granularity: 'DAILY',
-                            group_by: ['labels.Provider', 'labels.Cloud Service Group', 'labels.Cloud Service Type'],
-                            start: dayjs.utc().format('YYYY-MM-DD'),
-                            end: dayjs.utc().format('YYYY-MM-DD'),
-                            fields: {
-                                count: {
-                                    key: 'value',
-                                    operator: 'sum',
-                                },
-                            },
-                            sort: [{ key: '_total_count', desc: true }],
-                            field_group: ['date'],
-                        },
-                    });
-
-                    if (status === 'succeed') {
-                        const results = convertFormKeys(response.results || []);
-                        state.dailyUpdatesListItems[label] = results.map((i) => ({
-                            cloud_service_group: i.cloud_service_group,
-                            cloud_service_type: i.cloud_service_type,
-                            total_count: i._total_count,
-                            provider: i.provider,
-                            [`${label}_count`]: i.count[0].value,
-                        }));
-                    }
-                }));
-            } catch (e) {
-                ErrorHandler.handleError(e);
-                state.dailyUpdatesListItems = { created: state.dailyUpdatesListItems.created || [], deleted: state.dailyUpdatesListItems.deleted || [] };
-            }
-        },
     };
 
     return {
diff --git a/apps/web/src/services/workspace-home/types/workspace-home-type.ts b/apps/web/src/services/workspace-home/types/workspace-home-type.ts
index b3162a5ace..0c65b02ec7 100644
--- a/apps/web/src/services/workspace-home/types/workspace-home-type.ts
+++ b/apps/web/src/services/workspace-home/types/workspace-home-type.ts
@@ -2,45 +2,10 @@ import type { TranslateResult } from 'vue-i18n';
 
 import type { MenuItem } from '@cloudforet/mirinae/types/controls/context-menu/type';
 
-import type { ProviderItem } from '@/store/reference/provider-reference-store';
-import type { ReferenceMap } from '@/store/reference/type';
+import type { BOOKMARK_TYPE } from '@/services/workspace-home/constants/workspace-home-constant';
 
-import type { SUMMARY_DATA_TYPE, BOOKMARK_TYPE } from '@/services/workspace-home/constants/workspace-home-constant';
-
-// summary
-
-export const DEFAULT_PADDING = 24;
-export interface CloudServiceData {
-    cloud_service_group: string;
-    cloud_service_type: string;
-    total_count: number;
-    icon?: string;
-    provider: string;
-    created_count: number;
-    deleted_count: number;
-    create_warning?: boolean;
-    delete_warning?: boolean;
-    display_name?: string;
-}
-export type DailyUpdatesListItem = {
-    created: CloudServiceData[],
-    deleted: CloudServiceData[],
-};
-export type ProviderResourceDataItem = ProviderItem & {
-    server?: number;
-    database?: number;
-    storage?: number;
-};
-export type ProviderReferenceDataMap = ReferenceMap<ProviderResourceDataItem>;
-export type SummaryDataType = typeof SUMMARY_DATA_TYPE[keyof typeof SUMMARY_DATA_TYPE];
 
 // bookmark
-export interface EmptyData {
-    to?: { name: string };
-    title: string | TranslateResult;
-    buttonText?: string | TranslateResult;
-    desc: string | TranslateResult;
-}
 export interface MoreMenuItem extends MenuItem {
     workspaceId?: string;
 }
diff --git a/packages/language-pack/console-translation-2.8.babel b/packages/language-pack/console-translation-2.8.babel
index dfdfd2d6a2..37ad6f770d 100644
--- a/packages/language-pack/console-translation-2.8.babel
+++ b/packages/language-pack/console-translation-2.8.babel
@@ -41845,6 +41845,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>SHARED_BY_WORKSPACE</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>SHARED_TO_ALL_PROJECTS</name>
                                 <definition_loaded>false</definition_loaded>
@@ -93773,6 +93794,79 @@
             <folder_node>
                 <name>PROJECT</name>
                 <children>
+                    <folder_node>
+                        <name>DASHBOARD</name>
+                        <children>
+                            <folder_node>
+                                <name>CREATE</name>
+                                <children>
+                                    <concept_node>
+                                        <name>CREATE_DASHBOARD</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description/>
+                                        <comment/>
+                                        <default_text/>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ja-JP</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ko-KR</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>CREATE_FOLDER</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description/>
+                                        <comment/>
+                                        <default_text/>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ja-JP</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ko-KR</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                    <concept_node>
+                                        <name>TITLE</name>
+                                        <definition_loaded>false</definition_loaded>
+                                        <description/>
+                                        <comment/>
+                                        <default_text/>
+                                        <translations>
+                                            <translation>
+                                                <language>en-US</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ja-JP</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                            <translation>
+                                                <language>ko-KR</language>
+                                                <approved>false</approved>
+                                            </translation>
+                                        </translations>
+                                    </concept_node>
+                                </children>
+                            </folder_node>
+                        </children>
+                    </folder_node>
                     <folder_node>
                         <name>DETAIL</name>
                         <children>
@@ -100624,6 +100718,27 @@
                                     </translation>
                                 </translations>
                             </concept_node>
+                            <concept_node>
+                                <name>OVERVIEW</name>
+                                <definition_loaded>false</definition_loaded>
+                                <description/>
+                                <comment/>
+                                <default_text/>
+                                <translations>
+                                    <translation>
+                                        <language>en-US</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ja-JP</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                    <translation>
+                                        <language>ko-KR</language>
+                                        <approved>false</approved>
+                                    </translation>
+                                </translations>
+                            </concept_node>
                             <concept_node>
                                 <name>PLACE_HOLDER_EXAMPLE</name>
                                 <definition_loaded>false</definition_loaded>
diff --git a/packages/language-pack/en.json b/packages/language-pack/en.json
index 4ee694bb69..a77b857c17 100644
--- a/packages/language-pack/en.json
+++ b/packages/language-pack/en.json
@@ -2278,6 +2278,7 @@
 			"SET_HOME": "Set as Home Dashboard",
 			"SHARE": "Share",
 			"SHARED_BY_ADMIN": "Shared by Admin",
+			"SHARED_BY_WORKSPACE": "Shared by Workspace",
 			"SHARED_TO_ALL_PROJECTS": "Shared to All Projects",
 			"SHARED_TO_WORKSPACES": "Shared to Workspaces",
 			"SHARE_DASHBOARD": "Share Dashboard",
@@ -5097,6 +5098,13 @@
 		}
 	},
 	"PROJECT": {
+		"DASHBOARD": {
+			"CREATE": {
+				"CREATE_DASHBOARD": "Create Dashboard",
+				"CREATE_FOLDER": "Create Folder",
+				"TITLE": "Create New Dashboard"
+			}
+		},
 		"DETAIL": {
 			"ACCESS": "Access",
 			"ADD": "Add",
@@ -5447,6 +5455,7 @@
 			"NO_GROUP_MEMBER": "No Group Member",
 			"NO_PROJECT_GROUP_MSG": "There's no project or project group created in this workspace yet.",
 			"ONLY_PEOPLE_INVITED": "Only people invited",
+			"OVERVIEW": "Overview",
 			"PLACE_HOLDER_EXAMPLE": "e.g. project/project group",
 			"PLACE_HOLDER_PROJECT": "Project",
 			"PLACE_HOLDER_SHOW_MORE": "more",
diff --git a/packages/language-pack/ja.json b/packages/language-pack/ja.json
index e9a9585d91..11651681b3 100644
--- a/packages/language-pack/ja.json
+++ b/packages/language-pack/ja.json
@@ -2127,7 +2127,7 @@
 				"FILTER_PROVIDER": "プロバイダー"
 			},
 			"TEMPLATES": "テンプレート",
-			"TITLE": "新規ダッシュボード作成",
+			"TITLE": "新規プロジェクトダッシュボード作成",
 			"VALIDATION_PROJECT": "プロジェクトを選択してください。",
 			"VALIDATION_TEMPLATE": "テンプレートを選択してください",
 			"VIEW": "ビュー",
@@ -2278,6 +2278,7 @@
 			"SET_HOME": "ホームダッシュボードとして設定",
 			"SHARE": "共有",
 			"SHARED_BY_ADMIN": "Adminにより共有",
+			"SHARED_BY_WORKSPACE": "Workspaceにより共有",
 			"SHARED_TO_ALL_PROJECTS": "すべてのプロジェクトに共有",
 			"SHARED_TO_WORKSPACES": "ワークスペースに共有",
 			"SHARE_DASHBOARD": "ダッシュボードを共有",
@@ -5097,6 +5098,13 @@
 		}
 	},
 	"PROJECT": {
+		"DASHBOARD": {
+			"CREATE": {
+				"CREATE_DASHBOARD": "ダッシュボード作成",
+				"CREATE_FOLDER": "フォルダ作成",
+				"TITLE": "新規ダッシュボード作成"
+			}
+		},
 		"DETAIL": {
 			"ACCESS": "アクセス",
 			"ADD": "追加",
@@ -5447,6 +5455,7 @@
 			"NO_GROUP_MEMBER": "グループメンバーなし",
 			"NO_PROJECT_GROUP_MSG": "このワークスペースにはまだプロジェクトまたはプロジェクトグループが作成されていません。",
 			"ONLY_PEOPLE_INVITED": "招待された人だけ",
+			"OVERVIEW": "",
 			"PLACE_HOLDER_EXAMPLE": "例）プロジェクト/プロジェクトグループ",
 			"PLACE_HOLDER_PROJECT": "プロジェクト",
 			"PLACE_HOLDER_SHOW_MORE": "もっと見る",
diff --git a/packages/language-pack/ko.json b/packages/language-pack/ko.json
index 00231ab893..5c2783bc6b 100644
--- a/packages/language-pack/ko.json
+++ b/packages/language-pack/ko.json
@@ -2278,6 +2278,7 @@
 			"SET_HOME": "홈 대시보드로 설정",
 			"SHARE": "공유",
 			"SHARED_BY_ADMIN": "Admin에 의해 공유됨",
+			"SHARED_BY_WORKSPACE": "Workspace에 의해 공유됨",
 			"SHARED_TO_ALL_PROJECTS": "전체 프로젝트에 공유됨",
 			"SHARED_TO_WORKSPACES": "워크스페이스에 공유됨",
 			"SHARE_DASHBOARD": "대시보드 공유",
@@ -5097,6 +5098,13 @@
 		}
 	},
 	"PROJECT": {
+		"DASHBOARD": {
+			"CREATE": {
+				"CREATE_DASHBOARD": "대시보드 생성",
+				"CREATE_FOLDER": "폴더 생성",
+				"TITLE": "프로젝트 대시보드 생성"
+			}
+		},
 		"DETAIL": {
 			"ACCESS": "접근",
 			"ADD": "추가 ",
@@ -5447,6 +5455,7 @@
 			"NO_GROUP_MEMBER": "프로젝트 그룹 멤버 없음",
 			"NO_PROJECT_GROUP_MSG": "이 워크스페이스에는 아직 생성된 프로젝트 또는 프로젝트 그룹이 없습니다.",
 			"ONLY_PEOPLE_INVITED": "초대된 사용자만",
+			"OVERVIEW": "홈",
 			"PLACE_HOLDER_EXAMPLE": "예) 프로젝트/프로젝트 그룹",
 			"PLACE_HOLDER_PROJECT": "프로젝트 ",
 			"PLACE_HOLDER_SHOW_MORE": "더보기",
diff --git a/packages/mirinae/src/navigation/link/PLink.vue b/packages/mirinae/src/navigation/link/PLink.vue
index fec618e78b..cd4495d5e4 100644
--- a/packages/mirinae/src/navigation/link/PLink.vue
+++ b/packages/mirinae/src/navigation/link/PLink.vue
@@ -44,6 +44,8 @@
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
 
+import type { Location } from 'vue-router';
+
 import PI from '@/foundation/icons/PI.vue';
 import { ACTION_ICON, LinkSize } from '@/navigation/link/type';
 import type { ActionIcon } from '@/navigation/link/type';
diff --git a/packages/mirinae/src/navigation/link/type.ts b/packages/mirinae/src/navigation/link/type.ts
index 7902e48a29..ce22bbbacc 100644
--- a/packages/mirinae/src/navigation/link/type.ts
+++ b/packages/mirinae/src/navigation/link/type.ts
@@ -1,3 +1,5 @@
+import type { Location } from 'vue-router';
+
 export const LinkSize = {
     sm: 'sm',
     md: 'md',
diff --git a/packages/mirinae/src/navigation/tabs/tab/PTab.vue b/packages/mirinae/src/navigation/tabs/tab/PTab.vue
index 5093b7bc64..c4b0c4802c 100644
--- a/packages/mirinae/src/navigation/tabs/tab/PTab.vue
+++ b/packages/mirinae/src/navigation/tabs/tab/PTab.vue
@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import {
-    computed, nextTick, reactive, ref,
+    computed, nextTick, reactive, ref, watch,
 } from 'vue';
 
 import { onClickOutside, useResizeObserver } from '@vueuse/core';
@@ -172,6 +172,8 @@ const calculateWidths = () => {
     state.hiddenTabItems = hiddenTabs.filter((tab) => tab.tabType !== 'divider');
     state.firstRenderDone = true; // This is to prevent the tabs from being hidden on the first render
 };
+
+// Calculate the widths of the tabs when tab size is changed
 useResizeObserver(tabContainerRef, throttle(() => {
     state.firstRenderDone = false;
     nextTick(() => {
@@ -179,6 +181,14 @@ useResizeObserver(tabContainerRef, throttle(() => {
     });
 }, 500));
 
+// Calculate the widths of the tabs when the tabs are updated
+watch(() => props.tabs, () => {
+    state.firstRenderDone = false;
+    nextTick(() => {
+        calculateWidths();
+    });
+});
+
 onClickOutside(hiddenTabsMenuRef, hideHiddenTabs);
 
 </script>
@@ -219,6 +229,13 @@ onClickOutside(hiddenTabsMenuRef, hideHiddenTabs);
                         @click="handleSelectTab(tab, idx)"
                     >
                         <div class="content-wrapper">
+                            <p-i v-if="tab.icon"
+                                 class="tab-icon"
+                                 :name="tab.icon"
+                                 color="inherit"
+                                 width="0.875rem"
+                                 height="0.875rem"
+                            />
                             <span class="label">
                                 {{ tab.label }}
                             </span>
@@ -321,7 +338,7 @@ onClickOutside(hiddenTabsMenuRef, hideHiddenTabs);
         width: 100%;
         flex: 1;
         li {
-            @apply relative text-gray-400 cursor-pointer;
+            @apply relative text-gray-600 cursor-pointer;
             height: 2.5rem;
             min-height: 2.5rem;
             max-width: 10rem;
@@ -343,6 +360,10 @@ onClickOutside(hiddenTabsMenuRef, hideHiddenTabs);
             }
             .content-wrapper {
                 @apply flex items-center justify-center w-full h-full;
+                .tab-icon {
+                    min-width: 0.875rem;
+                    margin-right: 0.25rem;
+                }
                 .label {
                     @apply w-full text-label-md block truncate;
                 }
diff --git a/packages/mirinae/src/navigation/tabs/tab/components/FolderTab.vue b/packages/mirinae/src/navigation/tabs/tab/components/FolderTab.vue
index 453df24766..0c6618d24b 100644
--- a/packages/mirinae/src/navigation/tabs/tab/components/FolderTab.vue
+++ b/packages/mirinae/src/navigation/tabs/tab/components/FolderTab.vue
@@ -52,9 +52,9 @@ const handleSelectTab = () => {
     emit('select-tab');
 };
 
-const handleSelectTabMenu = (menu: MenuItem) => {
+const handleSelectTabMenu = (menu: MenuItem, index: number) => {
     state.visible = false;
-    emit('select-tab-menu', menu);
+    emit('select-tab-menu', menu, index);
 };
 
 const {
@@ -84,6 +84,13 @@ onClickOutside(folderTabRef, () => {
         @click="handleSelectTab"
     >
         <div class="content-wrapper">
+            <p-i v-if="props.tab.icon"
+                 class="folder-tab-icon"
+                 :name="props.tab.icon"
+                 width="0.875rem"
+                 height="0.875rem"
+                 color="gray-600"
+            />
             <span class="label">
                 {{ tab.label }}
             </span>
@@ -91,7 +98,7 @@ onClickOutside(folderTabRef, () => {
                  :name="state.visible ? 'ic_chevron-up' : 'ic_chevron-down'"
                  width="1.25rem"
                  height="1.25rem"
-                 color="inherit"
+                 color="gray-600"
             />
         </div>
         <p-context-menu v-if="state.visible"
@@ -112,6 +119,10 @@ onClickOutside(folderTabRef, () => {
     }
     .content-wrapper {
         @apply flex items-center justify-center w-full h-full;
+        .folder-tab-icon {
+            min-width: 0.875rem;
+            margin-right: 0.25rem;
+        }
         .label {
             @apply w-full text-label-md block truncate;
         }