diff --git a/src/views/dashboard/configuration/WidgetConfig.vue b/src/views/dashboard/configuration/WidgetConfig.vue
index a90605c6..ecb4c5ff 100644
--- a/src/views/dashboard/configuration/WidgetConfig.vue
+++ b/src/views/dashboard/configuration/WidgetConfig.vue
@@ -87,11 +87,12 @@ import { ElMessage, ElButton } from "element-plus";
 import { ValuesTypes, MetricQueryTypes, ChartTypes } from "../data";
 import { Option } from "@/types/app";
 import Loading from "@/utils/loading";
-import charts from "../graphs";
+import graphs from "../graphs";
+import controls from "../controls";
 
 export default defineComponent({
   name: "WidgetConfig",
-  components: { ...charts, ElButton },
+  components: { ...graphs, ...controls, ElButton },
   setup() {
     const states = reactive<{
       metrics: string;
diff --git a/src/views/dashboard/controls/Tabs.vue b/src/views/dashboard/controls/Tabs.vue
index 66be368a..7ccd35ed 100644
--- a/src/views/dashboard/controls/Tabs.vue
+++ b/src/views/dashboard/controls/Tabs.vue
@@ -40,7 +40,7 @@ limitations under the License. -->
 <script lang="ts" setup>
 import { defineProps, reactive } from "vue";
 import type { PropType } from "vue";
-import Widget from "./Widget.vue";
+import Widget from "../panel/Widget.vue";
 import { LayoutConfig } from "@/types/dashboard";
 
 defineProps({
diff --git a/src/views/dashboard/controls/index.ts b/src/views/dashboard/controls/index.ts
new file mode 100644
index 00000000..7fea9a78
--- /dev/null
+++ b/src/views/dashboard/controls/index.ts
@@ -0,0 +1,24 @@
+/**
+ * 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 Image from "./Image.vue";
+import Tabs from "./Tabs.vue";
+
+export default {
+  Image,
+  Tabs,
+};
diff --git a/src/views/dashboard/data.ts b/src/views/dashboard/data.ts
index e97865bf..7c637137 100644
--- a/src/views/dashboard/data.ts
+++ b/src/views/dashboard/data.ts
@@ -15,18 +15,18 @@
  * limitations under the License.
  */
 export const ChartTypes = [
-  { label: "Bar", value: "bar" },
-  { label: "Line", value: "line" },
-  { label: "Area", value: "area" },
-  { label: "Heatmap", value: "heatmap" },
-  { label: "Pie", value: "pie" },
-  { label: "Card", value: "card" },
-  { label: "Progress Bar", value: "progressBar" },
-  { label: "Table", value: "table" },
-  { label: "Endpoint List", value: "endpointList" },
-  { label: "Instance List", value: "instanceList" },
-  { label: "Image", value: "image" },
-  { label: "Tab", value: "tab" },
+  { label: "Bar", value: "Bar" },
+  { label: "Line", value: "Line" },
+  { label: "Area", value: "Area" },
+  { label: "Heatmap", value: "Heatmap" },
+  { label: "Pie", value: "Pie" },
+  { label: "Card", value: "Card" },
+  { label: "Progress Bar", value: "ProgressBar" },
+  { label: "Table", value: "Table" },
+  { label: "Endpoint List", value: "EndpointList" },
+  { label: "Instance List", value: "InstanceList" },
+  { label: "Image", value: "Image" },
+  { label: "Tab", value: "Tabs" },
 ];
 export enum MetricQueryTypes {
   ReadMetricsValue = "readMetricsValue",
diff --git a/src/views/dashboard/graphs/index.ts b/src/views/dashboard/graphs/index.ts
index c02686c4..d073fa81 100644
--- a/src/views/dashboard/graphs/index.ts
+++ b/src/views/dashboard/graphs/index.ts
@@ -19,7 +19,7 @@ import Area from "./Area.vue";
 import Line from "./Line.vue";
 import Bar from "./Bar.vue";
 import Heatmap from "./Heatmap.vue";
-// import ProgressBar from "./ProgressBar.vue";
+import ProgressBar from "./ProgressBar.vue";
 import Table from "./Table.vue";
 import Pie from "./Pie.vue";
 import Card from "./Card.vue";
@@ -28,7 +28,7 @@ export default {
   Line,
   Bar,
   Heatmap,
-  // ProgressBar,
+  ProgressBar,
   Area,
   Table,
   Pie,