diff --git a/src/views/dashboard/configuration/Topology.vue b/src/views/dashboard/configuration/Topology.vue
index 5cb5ead9..cfd87a7a 100644
--- a/src/views/dashboard/configuration/Topology.vue
+++ b/src/views/dashboard/configuration/Topology.vue
@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License. -->
 <template>
   <WidgetOptions />
-  <TopologyOptions />
+  <StyleOptions />
   <div class="footer">
     <el-button size="small">
       {{ t("cancel") }}
@@ -26,8 +26,8 @@ limitations under the License. -->
 </template>
 <script lang="ts" setup>
 import { useI18n } from "vue-i18n";
-import WidgetOptions from "./WidgetOptions.vue";
-import TopologyOptions from "./graph-styles/TopologyItem.vue";
+import WidgetOptions from "./components/WidgetOptions.vue";
+import StyleOptions from "./topology/StyleOptions.vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const { t } = useI18n();
diff --git a/src/views/dashboard/configuration/Widget.vue b/src/views/dashboard/configuration/Widget.vue
index c2bbd49f..92e07792 100644
--- a/src/views/dashboard/configuration/Widget.vue
+++ b/src/views/dashboard/configuration/Widget.vue
@@ -77,9 +77,9 @@ import { useAppStoreWithOut } from "@/store/modules/app";
 import { Option } from "@/types/app";
 import graphs from "../graphs";
 import configs from "./graph-styles";
-import WidgetOptions from "./WidgetOptions.vue";
-import StandardOptions from "./StandardOptions.vue";
-import MetricOptions from "./MetricOptions.vue";
+import WidgetOptions from "./components/WidgetOptions.vue";
+import StandardOptions from "./widget/StandardOptions.vue";
+import MetricOptions from "./widget/MetricOptions.vue";
 
 export default defineComponent({
   name: "ConfigEdit",
diff --git a/src/views/dashboard/configuration/WidgetOptions.vue b/src/views/dashboard/configuration/components/WidgetOptions.vue
similarity index 100%
rename from src/views/dashboard/configuration/WidgetOptions.vue
rename to src/views/dashboard/configuration/components/WidgetOptions.vue
diff --git a/src/views/dashboard/configuration/graph-styles/TopologyItem.vue b/src/views/dashboard/configuration/topology/StyleOptions.vue
similarity index 100%
rename from src/views/dashboard/configuration/graph-styles/TopologyItem.vue
rename to src/views/dashboard/configuration/topology/StyleOptions.vue
diff --git a/src/views/dashboard/configuration/MetricOptions.vue b/src/views/dashboard/configuration/widget/MetricOptions.vue
similarity index 99%
rename from src/views/dashboard/configuration/MetricOptions.vue
rename to src/views/dashboard/configuration/widget/MetricOptions.vue
index 88c0beb1..3e9ef323 100644
--- a/src/views/dashboard/configuration/MetricOptions.vue
+++ b/src/views/dashboard/configuration/widget/MetricOptions.vue
@@ -95,7 +95,7 @@ import {
   ChartTypes,
   PodsChartTypes,
   TableEntity,
-} from "../data";
+} from "../../data";
 import { ElMessage } from "element-plus";
 import Icon from "@/components/Icon.vue";
 import { useQueryProcessor, useSourceProcessor } from "@/hooks/useProcessor";
diff --git a/src/views/dashboard/configuration/StandardOptions.vue b/src/views/dashboard/configuration/widget/StandardOptions.vue
similarity index 99%
rename from src/views/dashboard/configuration/StandardOptions.vue
rename to src/views/dashboard/configuration/widget/StandardOptions.vue
index 02226b95..6b4c3029 100644
--- a/src/views/dashboard/configuration/StandardOptions.vue
+++ b/src/views/dashboard/configuration/widget/StandardOptions.vue
@@ -118,7 +118,7 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { reactive } from "vue";
 import { useI18n } from "vue-i18n";
-import { SortOrder } from "../data";
+import { SortOrder } from "../../data";
 import { useDashboardStore } from "@/store/modules/dashboard";
 
 const dashboardStore = useDashboardStore();
diff --git a/src/views/dashboard/configuration/graph-styles/Area.vue b/src/views/dashboard/configuration/widget/graph-styles/Area.vue
similarity index 100%
rename from src/views/dashboard/configuration/graph-styles/Area.vue
rename to src/views/dashboard/configuration/widget/graph-styles/Area.vue
diff --git a/src/views/dashboard/configuration/graph-styles/Bar.vue b/src/views/dashboard/configuration/widget/graph-styles/Bar.vue
similarity index 100%
rename from src/views/dashboard/configuration/graph-styles/Bar.vue
rename to src/views/dashboard/configuration/widget/graph-styles/Bar.vue
diff --git a/src/views/dashboard/configuration/graph-styles/Card.vue b/src/views/dashboard/configuration/widget/graph-styles/Card.vue
similarity index 100%
rename from src/views/dashboard/configuration/graph-styles/Card.vue
rename to src/views/dashboard/configuration/widget/graph-styles/Card.vue
diff --git a/src/views/dashboard/configuration/graph-styles/EndpointList.vue b/src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue
similarity index 100%
rename from src/views/dashboard/configuration/graph-styles/EndpointList.vue
rename to src/views/dashboard/configuration/widget/graph-styles/EndpointList.vue
diff --git a/src/views/dashboard/configuration/graph-styles/HeatMap.vue b/src/views/dashboard/configuration/widget/graph-styles/HeatMap.vue
similarity index 100%
rename from src/views/dashboard/configuration/graph-styles/HeatMap.vue
rename to src/views/dashboard/configuration/widget/graph-styles/HeatMap.vue
diff --git a/src/views/dashboard/configuration/graph-styles/InstanceList.vue b/src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue
similarity index 100%
rename from src/views/dashboard/configuration/graph-styles/InstanceList.vue
rename to src/views/dashboard/configuration/widget/graph-styles/InstanceList.vue
diff --git a/src/views/dashboard/configuration/graph-styles/Line.vue b/src/views/dashboard/configuration/widget/graph-styles/Line.vue
similarity index 100%
rename from src/views/dashboard/configuration/graph-styles/Line.vue
rename to src/views/dashboard/configuration/widget/graph-styles/Line.vue
diff --git a/src/views/dashboard/configuration/graph-styles/ServiceList.vue b/src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
similarity index 100%
rename from src/views/dashboard/configuration/graph-styles/ServiceList.vue
rename to src/views/dashboard/configuration/widget/graph-styles/ServiceList.vue
diff --git a/src/views/dashboard/configuration/graph-styles/Table.vue b/src/views/dashboard/configuration/widget/graph-styles/Table.vue
similarity index 100%
rename from src/views/dashboard/configuration/graph-styles/Table.vue
rename to src/views/dashboard/configuration/widget/graph-styles/Table.vue
diff --git a/src/views/dashboard/configuration/graph-styles/TopList.vue b/src/views/dashboard/configuration/widget/graph-styles/TopList.vue
similarity index 100%
rename from src/views/dashboard/configuration/graph-styles/TopList.vue
rename to src/views/dashboard/configuration/widget/graph-styles/TopList.vue
diff --git a/src/views/dashboard/configuration/graph-styles/index.ts b/src/views/dashboard/configuration/widget/graph-styles/index.ts
similarity index 100%
rename from src/views/dashboard/configuration/graph-styles/index.ts
rename to src/views/dashboard/configuration/widget/graph-styles/index.ts
diff --git a/src/views/dashboard/controls/Trace.vue b/src/views/dashboard/controls/Trace.vue
index e69de29b..be4dacc2 100644
--- a/src/views/dashboard/controls/Trace.vue
+++ b/src/views/dashboard/controls/Trace.vue
@@ -0,0 +1,18 @@
+<!-- Licensed to the Apache Software Foundation (ASF) under one or more
+contributor license agreements.  See the NOTICE file distributed with
+this work for additional information regarding copyright ownership.
+The ASF licenses this file to You under the Apache License, Version 2.0
+(the "License"); you may not use this file except in compliance with
+the License.  You may obtain a copy of the License at
+
+  http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License. -->
+<template>
+  <div class="header">trace</div>
+  <div class="content">content</div>
+</template>
diff --git a/src/views/dashboard/controls/index.ts b/src/views/dashboard/controls/index.ts
new file mode 100644
index 00000000..d4f2656c
--- /dev/null
+++ b/src/views/dashboard/controls/index.ts
@@ -0,0 +1,22 @@
+/**
+ * Licensed to the Apache Software Foundation (ASF) under one or more
+ * contributor license agreements.  See the NOTICE file distributed with
+ * this work for additional information regarding copyright ownership.
+ * The ASF licenses this file to You under the Apache License, Version 2.0
+ * (the "License"); you may not use this file except in compliance with
+ * the License.  You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import Topology from "./Topology.vue";
+import Tab from "./Tab.vue";
+import Widget from "./Widget.vue";
+import Trace from "./Trace.vue";
+
+export default { Tab, Widget, Trace, Topology };
diff --git a/src/views/dashboard/panel/Layout.vue b/src/views/dashboard/panel/Layout.vue
index 9c3b6e78..f80c05c6 100644
--- a/src/views/dashboard/panel/Layout.vue
+++ b/src/views/dashboard/panel/Layout.vue
@@ -40,13 +40,11 @@ limitations under the License. -->
 import { defineComponent } from "vue";
 import { useDashboardStore } from "@/store/modules/dashboard";
 import { LayoutConfig } from "@/types/dashboard";
-import Widget from "../controls/Widget.vue";
-import Tab from "../controls/Tab.vue";
-import Topology from "../controls/Topology.vue";
+import controls from "../controls/index";
 
 export default defineComponent({
   name: "Layout",
-  components: { Widget, Tab, Topology },
+  components: { ...controls },
   setup() {
     const dashboardStore = useDashboardStore();
     function layoutUpdatedEvent(newLayout: LayoutConfig[]) {
diff --git a/src/views/dashboard/related/trace/Content.vue b/src/views/dashboard/related/trace/Content.vue
new file mode 100644
index 00000000..e69de29b
diff --git a/src/views/dashboard/related/trace/Header.vue b/src/views/dashboard/related/trace/Header.vue
new file mode 100644
index 00000000..e69de29b