diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index 9b571dcf..499c39d4 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -66,7 +66,7 @@ const theme = ref<string>("light");
 getVersion();
 const setConfig = (value: string) => {
   pageName.value = value || "";
-  theme.value = route.path.includes("/infrastructure/") ? "dark" : "light";
+  // theme.value = route.path.includes("/infrastructure/") ? "dark" : "light";
 };
 const time = computed(() => [
   appStore.durationRow.start,
diff --git a/src/views/dashboard/graphs/EndpointList.vue b/src/views/dashboard/graphs/EndpointList.vue
index 52924694..838a1d9a 100644
--- a/src/views/dashboard/graphs/EndpointList.vue
+++ b/src/views/dashboard/graphs/EndpointList.vue
@@ -203,8 +203,11 @@ function getLabel(metric: string, index: number) {
   return encodeURIComponent(metric);
 }
 watch(
-  () => [props.config.metricTypes, props.config.metrics],
-  async () => {
+  () => [...(props.config.metricTypes || []), ...(props.config.metrics || [])],
+  (data, old) => {
+    if (JSON.stringify(data) === JSON.stringify(old)) {
+      return;
+    }
     queryEndpointMetrics(endpoints.value);
   }
 );
@@ -214,6 +217,15 @@ watch(
     queryEndpoints();
   }
 );
+watch(
+  () => [...(props.config.metricConfig || [])],
+  (data, old) => {
+    if (JSON.stringify(data) === JSON.stringify(old)) {
+      return;
+    }
+    queryEndpointMetrics(endpoints.value);
+  }
+);
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";
diff --git a/src/views/dashboard/graphs/InstanceList.vue b/src/views/dashboard/graphs/InstanceList.vue
index ee52ffb5..e3641668 100644
--- a/src/views/dashboard/graphs/InstanceList.vue
+++ b/src/views/dashboard/graphs/InstanceList.vue
@@ -257,8 +257,11 @@ function getLabel(metric: string, index: number) {
 }
 
 watch(
-  () => [props.config.metricTypes, props.config.metrics],
-  () => {
+  () => [...(props.config.metricTypes || []), ...(props.config.metrics || [])],
+  (data, old) => {
+    if (JSON.stringify(data) === JSON.stringify(old)) {
+      return;
+    }
     queryInstanceMetrics(instances.value);
   }
 );
@@ -268,6 +271,15 @@ watch(
     queryInstance();
   }
 );
+watch(
+  () => [...(props.config.metricConfig || [])],
+  (data, old) => {
+    if (JSON.stringify(data) === JSON.stringify(old)) {
+      return;
+    }
+    queryInstanceMetrics(instances.value);
+  }
+);
 </script>
 <style lang="scss" scoped>
 @import "./style.scss";
diff --git a/src/views/dashboard/graphs/ServiceList.vue b/src/views/dashboard/graphs/ServiceList.vue
index 00f6fd68..5d9b148b 100644
--- a/src/views/dashboard/graphs/ServiceList.vue
+++ b/src/views/dashboard/graphs/ServiceList.vue
@@ -143,7 +143,6 @@ const sortServices = ref<(Service & { merge: boolean })[]>([]);
 const colMetrics = computed(() =>
   props.config.metrics.filter((d: string) => d)
 );
-
 queryServices();
 
 async function queryServices() {
@@ -296,9 +295,22 @@ function getLabel(metric: string, index: number) {
   }
   return encodeURIComponent(metric);
 }
+
 watch(
-  () => [props.config.metricTypes, props.config.metrics],
-  () => {
+  () => [...(props.config.metricTypes || []), ...(props.config.metrics || [])],
+  (data, old) => {
+    if (JSON.stringify(data) === JSON.stringify(old)) {
+      return;
+    }
+    queryServiceMetrics(services.value);
+  }
+);
+watch(
+  () => [...(props.config.metricConfig || [])],
+  (data, old) => {
+    if (JSON.stringify(data) === JSON.stringify(old)) {
+      return;
+    }
     queryServiceMetrics(services.value);
   }
 );