diff --git a/src/layout/components/NavBar.vue b/src/layout/components/NavBar.vue
index f7f253e0..51c7e96d 100644
--- a/src/layout/components/NavBar.vue
+++ b/src/layout/components/NavBar.vue
@@ -93,7 +93,8 @@ limitations under the License. -->
   const savedTheme = window.localStorage.getItem("theme-is-dark");
   if (savedTheme === "false") {
     theme.value = false;
-  } else if (savedTheme === "") {
+  }
+  if (savedTheme === "") {
     // read the theme preference from system setting if there is no user setting
     theme.value = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)").matches;
   }
diff --git a/src/views/dashboard/configuration/Tab.vue b/src/views/dashboard/configuration/Tab.vue
index 4e1c8f09..2d81a363 100644
--- a/src/views/dashboard/configuration/Tab.vue
+++ b/src/views/dashboard/configuration/Tab.vue
@@ -13,11 +13,7 @@ limitations under the License. -->
 <template>
   <div class="item">
     <span class="label">{{ t("expressions") }}</span>
-    <div v-for="(exp, index) in expressions" :key="index" class="mb-10">
-      <div class="expression-param" contenteditable="true" @blur="changeExpression($event, index)">
-        {{ exp }}
-      </div>
-    </div>
+    <el-input class="input" v-model="expressions" size="small" @change="changeConfig" />
   </div>
   <div class="footer">
     <el-button size="small" @click="cancelConfig">
@@ -35,23 +31,12 @@ limitations under the License. -->
   const { t } = useI18n();
   const dashboardStore = useDashboardStore();
   const originConfig = dashboardStore.selectedGrid;
-  const expressions = ref<string[]>(originConfig.expressions || []);
-  console.log(expressions);
-  async function changeExpression(event: any, index: number) {
-    const params = (event.target.textContent || "").replace(/\s+/g, "");
+  const expressions = ref<string>(originConfig.expressions);
 
-    expressions.value[index] = params;
-    dashboardStore.selectWidget({
-      ...dashboardStore.selectedGrid,
-      expressions: expressions.value,
-    });
-  }
-  function changeConfig(param: { [key: string]: unknown }) {
+  function changeConfig() {
     const { selectedGrid } = dashboardStore;
-    dashboardStore.selectWidget({
-      ...selectedGrid,
-      ...param,
-    });
+
+    dashboardStore.selectWidget({ ...selectedGrid, expressions: expressions.value });
   }
   function applyConfig() {
     dashboardStore.setConfigPanel(false);
@@ -64,22 +49,6 @@ limitations under the License. -->
   }
 </script>
 <style lang="scss" scoped>
-  .expression-param {
-    display: inline-block;
-    width: 400px;
-    border: 1px solid $border-color;
-    cursor: text;
-    padding: 0 5px;
-    border-radius: 3px;
-    outline: none;
-    margin-right: 5px;
-    min-height: 26px;
-
-    &:focus {
-      border-color: $active-color;
-    }
-  }
-
   .label {
     font-size: 13px;
     font-weight: 500;
@@ -91,6 +60,10 @@ limitations under the License. -->
     margin-bottom: 10px;
   }
 
+  .input {
+    width: 500px;
+  }
+
   .footer {
     position: fixed;
     bottom: 0;