diff --git a/apps/web/package.json b/apps/web/package.json
index 8b3c297869..126128091e 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -46,6 +46,7 @@
     "@vueuse/core": "^10.7.2",
     "@vueuse/integrations": "^11.1.0",
     "@vvo/tzdb": "^6.4.1",
+    "console-vue-query-devtools-sdk": "^0.0.16",
     "animated-number-vue": "^1.0.0",
     "axios": "^1.8.2",
     "axios-auth-refresh": "^3.2.2",
diff --git a/apps/web/src/App.vue b/apps/web/src/App.vue
index 9402e35ede..37a8ac669e 100755
--- a/apps/web/src/App.vue
+++ b/apps/web/src/App.vue
@@ -7,6 +7,7 @@ import type { Location } from 'vue-router';
 import { useRoute, useRouter } from 'vue-router/composables';
 
 import { useQueryClient } from '@tanstack/vue-query';
+import { ConsoleVueQueryDevtools } from 'console-vue-query-devtools-sdk';
 
 import { LocalStorageAccessor } from '@cloudforet/core-lib/local-storage-accessor';
 import {
@@ -40,8 +41,6 @@ import MobileGuideModal from '@/services/auth/components/MobileGuideModal.vue';
 import { AUTH_ROUTE } from '@/services/auth/routes/route-constant';
 import { LANDING_ROUTE } from '@/services/landing/routes/route-constant';
 
-
-
 if (import.meta.env.DEV) {
     const queryClient = useQueryClient();
     import('@/_dev-tools/vue-query-console-debug').then((mod) => mod.initVueQueryConsoleDebug(queryClient))
@@ -51,7 +50,6 @@ if (import.meta.env.DEV) {
         });
 }
 
-
 const router = useRouter();
 const route = useRoute();
 
@@ -120,6 +118,7 @@ watch(() => state.userId, (userId) => {
     <div v-cloak
          id="app"
     >
+        <console-vue-query-devtools />
         <template v-if="displayStore.state.isInitialized">
             <p-notice-alert group="noticeTopLeft" />
             <p-notice-alert group="noticeTopRight" />
diff --git a/package-lock.json b/package-lock.json
index ef00fa0568..f7d4105e58 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -149,6 +149,7 @@
         "bytes": "^3.1.2",
         "cashify": "^2.5.0",
         "color": "^3.1.2",
+        "console-vue-query-devtools-sdk": "^0.0.16",
         "currency.js": "^2.0.4",
         "dayjs": "^1.11.7",
         "diff-match-patch": "^1.0.5",
@@ -12845,6 +12846,15 @@
         "node": "^14.18.0 || >=16.10.0"
       }
     },
+    "node_modules/console-vue-query-devtools-sdk": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/console-vue-query-devtools-sdk/-/console-vue-query-devtools-sdk-0.0.16.tgz",
+      "integrity": "sha512-vxwoYCkQGxHy7xrQcIyaV6c6N50c9dNhXyBnXUojg3V+JrFMC1NIjvw+eMMJFR2IpH3py1dSJTfGk21g8YpsjQ==",
+      "peerDependencies": {
+        "@tanstack/vue-query": "^5.0.0",
+        "vue": ">=2.7.0 <3.0.0"
+      }
+    },
     "node_modules/constantinople": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
@@ -44342,6 +44352,12 @@
       "integrity": "sha512-I5qxpzLv+sJhTVEoLYNcTW+bThDCPsit0vLNKShZx6rLtpilNpmmeTPaeqJb9ZE9dV3DGaeby6Vuhrw38WjeyQ==",
       "dev": true
     },
+    "console-vue-query-devtools-sdk": {
+      "version": "0.0.16",
+      "resolved": "https://registry.npmjs.org/console-vue-query-devtools-sdk/-/console-vue-query-devtools-sdk-0.0.16.tgz",
+      "integrity": "sha512-vxwoYCkQGxHy7xrQcIyaV6c6N50c9dNhXyBnXUojg3V+JrFMC1NIjvw+eMMJFR2IpH3py1dSJTfGk21g8YpsjQ==",
+      "requires": {}
+    },
     "constantinople": {
       "version": "4.0.1",
       "resolved": "https://registry.npmjs.org/constantinople/-/constantinople-4.0.1.tgz",
@@ -60350,6 +60366,7 @@
         "bytes": "^3.1.2",
         "cashify": "^2.5.0",
         "color": "^3.1.2",
+        "console-vue-query-devtools-sdk": "^0.0.16",
         "currency.js": "^2.0.4",
         "dayjs": "^1.11.7",
         "diff-match-patch": "^1.0.5",