diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
index 6d025ef7d..9bf37ab4d 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/chartRightBox/chartRightBox.scss
@@ -357,3 +357,20 @@
     line-height: 20px;
   }
 }
+
+.chart-ghost{
+  background: #FF8C0E !important;
+  opacity: 0.13 !important;
+  color: transparent !important;
+  *{
+    visibility: hidden !important;
+  }
+}
+.fallback-class{
+  opacity: 1 !important;
+  cursor: grab !important;
+  background-color: $--background-color-empty;
+  .drag-sort .nz-icon-sort{
+    color: #FF8C0E;
+  }
+}
\ No newline at end of file
diff --git a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
index fc6477b53..483b27ae9 100644
--- a/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
+++ b/nezha-fronted/src/assets/css/components/common/rightBox/panelBox.scss
@@ -169,7 +169,6 @@
       padding-left: 5px;
       line-height: 30px;
       justify-content: space-between;
-      margin-bottom: 10px;
       box-sizing: border-box;
       height: 32px;
       .variable-title-left{
@@ -198,10 +197,6 @@
         font-size: 17px;
       }
     } 
-    .variable-title{
-      margin-bottom: 0;
-      margin-top: 10px;
-    }
     .add-variable{
       border: 1px solid $--border-color-light;
       border-radius: 2px;
diff --git a/nezha-fronted/src/components/chart/chart/grid/GridItem.vue b/nezha-fronted/src/components/chart/chart/grid/GridItem.vue
index 8a7598335..8b15dca54 100644
--- a/nezha-fronted/src/components/chart/chart/grid/GridItem.vue
+++ b/nezha-fronted/src/components/chart/chart/grid/GridItem.vue
@@ -43,8 +43,8 @@
     }
 
     .vue-grid-item.vue-grid-placeholder {
-        background: red;
-        opacity: 0.2;
+        background: #FF8C0E;
+        opacity: 0.13;
         transition-duration: 100ms;
         z-index: 2;
         -webkit-user-select: none;
diff --git a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
index 845ebc9a2..aa94d4e62 100644
--- a/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
+++ b/nezha-fronted/src/components/common/rightBox/chart/chartConfig.vue
@@ -30,10 +30,10 @@
             handle: '.drag-sort'
           }">
         <el-row
-          :key="index"
           class="element-item form-row-item thresholds-from-item"
-          style=""
+          style="margin-bottom: 10px !important"
           v-for="index of chartConfig.elements.length"
+          :key="index"
         >
           <div class="chart-title chart-title-config">
             <span class="chart-title-content el-form-item" :class="{
@@ -75,7 +75,7 @@
             </span>
           </div>
           <transition name="el-zoom-in-top">
-            <el-row v-show="expressionsShow[index-1].show" style="margin-bottom: 10px">
+            <el-row v-show="expressionsShow[index-1].show">
               <el-form-item :prop="'elements.' + (index -1) + '.expression'" :rules="{ required: true, message: $t('validate.required'), trigger: 'blur'}">
                 <promql-input
                   :from-father-data="true"
diff --git a/nezha-fronted/src/components/common/rightBox/panelBox.vue b/nezha-fronted/src/components/common/rightBox/panelBox.vue
index 307fec824..ba6b17c9c 100644
--- a/nezha-fronted/src/components/common/rightBox/panelBox.vue
+++ b/nezha-fronted/src/components/common/rightBox/panelBox.vue
@@ -65,6 +65,7 @@
               <el-row
                 v-for="(item,index) of editPanel.param.variables"
                 :key="item.uid"
+                style="margin-top: 10px"
               >
                 <div class="variable-title">
                   <span class="variable-title-left">