diff --git a/frontend/src/styles/index.scss b/frontend/src/styles/index.scss
index 44ea9d2e00..5f4cf7b031 100644
--- a/frontend/src/styles/index.scss
+++ b/frontend/src/styles/index.scss
@@ -90,11 +90,15 @@ div:focus {
     width: 50% !important;
 
     .el-dialog__header{
-        background-color: #f4f4f5;
+        // background-color: #f4f4f5;
         padding: 10px 20px !important;
+
+        .el-dialog__headerbtn {
+            top: 15px !important;
+        }
     }
     .el-dialog__body{
-        padding: 1px 20px !important;
+        padding: 1px 15px !important;
 
     }
 }
diff --git a/frontend/src/views/panel/edit/index.vue b/frontend/src/views/panel/edit/index.vue
index 41277a5ad9..31ffdab3af 100644
--- a/frontend/src/views/panel/edit/index.vue
+++ b/frontend/src/views/panel/edit/index.vue
@@ -127,7 +127,7 @@
           :in-draw="false"
         />
       </filter-dialog>
-      <div style="text-align: end !important;margin: 0 15px !important;">
+      <div style="text-align: end !important;margin: 0 15px 10px !important;">
         <span slot="footer">
           <el-button size="mini" @click="cancelFilter">{{ $t('commons.cancel') }}</el-button>
           <el-button :disabled="!currentFilterCom.options.attrs.fieldId" type="primary" size="mini" @click="sureFilter">{{ $t('commons.confirm') }}</el-button>
diff --git a/frontend/src/views/panel/filter/filterDialog.vue b/frontend/src/views/panel/filter/filterDialog.vue
index 72caacdb66..bf47ec0b71 100644
--- a/frontend/src/views/panel/filter/filterDialog.vue
+++ b/frontend/src/views/panel/filter/filterDialog.vue
@@ -521,7 +521,7 @@ export default {
   .ms-main-container {
     height: 100%;
     min-height: 400px;
-
+    padding: 5px 10px;
   }
 
   .filter-field {
@@ -588,13 +588,14 @@ export default {
   }
 
   .filter-content {
-      height: calc(50vh - 130px);
+      height: calc(50vh - 120px);
       top: 160px;
 
   }
 
   .filter-dialog-tabs {
       border: 1px solid #E6E6E6;
+      padding: 10px;
       height: 100%;
       >>> div.el-tabs__content {
           height: calc(100% - 55px);
@@ -602,12 +603,12 @@ export default {
   }
 
   .filter-common {
-      margin: 10px 10px;
+      margin: 10px 5px;
 
   }
 
   .component-header {
-      margin: 20px 10px !important;
+      margin: 5px 5px 15px;
   }
 
   .component-result-content {