diff --git a/src/views/dashboard/configuration/graph-styles/TopologyItem.vue b/src/views/dashboard/configuration/graph-styles/TopologyItem.vue
index fa0305d2..9764b90b 100644
--- a/src/views/dashboard/configuration/graph-styles/TopologyItem.vue
+++ b/src/views/dashboard/configuration/graph-styles/TopologyItem.vue
@@ -69,7 +69,8 @@ limitations under the License. -->
   <div class="item">
     <span class="label">{{ t("defaultDepth") }}</span>
     <Selector
-      class="inputs"
+      class="input"
+      size="small"
       :value="depth"
       :options="DepthList"
       @change="changeDepth($event)"
diff --git a/src/views/dashboard/related/topology/components/PodTopology.vue b/src/views/dashboard/related/topology/components/PodTopology.vue
index 2b9fb6a7..66073168 100644
--- a/src/views/dashboard/related/topology/components/PodTopology.vue
+++ b/src/views/dashboard/related/topology/components/PodTopology.vue
@@ -87,9 +87,9 @@ const loading = ref<boolean>(false);
 const height = ref<number>(document.body.clientHeight - 150);
 const width = ref<number>(document.body.clientWidth - 40);
 const showSettings = ref<boolean>(false);
-const depth = ref<string>("2");
 const settings = ref<any>({});
 const operationsPos = reactive<{ x: number; y: number }>({ x: NaN, y: NaN });
+const depth = ref<string>(topologyStore.defaultDepth);
 const items = [
   { id: "inspect", title: "Inspect", func: inspect },
   { id: "dashboard", title: "View Dashboard", func: goDashboard },