diff --git a/frontend/src/assets/svg/icon_new-chat_outlined.svg b/frontend/src/assets/svg/icon_new-chat_outlined.svg
new file mode 100644
index 00000000..2b98e01b
--- /dev/null
+++ b/frontend/src/assets/svg/icon_new-chat_outlined.svg
@@ -0,0 +1,4 @@
+<svg width="17" height="16" viewBox="0 0 17 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M8.66663 1C12.5326 1 15.6666 4.13401 15.6666 8C15.6666 11.866 12.5326 15 8.66663 15H2.33329C1.9651 15 1.66663 14.7015 1.66663 14.3333V8C1.66663 4.13401 4.80063 1 8.66663 1ZM2.99996 13.6667H8.66663C11.7962 13.6667 14.3333 11.1296 14.3333 7.99998C14.3333 4.87037 11.7962 2.33332 8.66663 2.33332C5.53701 2.33332 2.99996 4.87037 2.99996 7.99998V13.6667Z" fill="white"/>
+<path d="M8.33329 5C8.1492 5 7.99996 5.14924 7.99996 5.33333V7.33333H5.99996C5.81586 7.33333 5.66663 7.48257 5.66663 7.66667V8.33333C5.66663 8.51743 5.81586 8.66667 5.99996 8.66667H7.99996V10.6667C7.99996 10.8508 8.1492 11 8.33329 11H8.99996C9.18405 11 9.33329 10.8508 9.33329 10.6667V8.66667H11.3333C11.5174 8.66667 11.6666 8.51743 11.6666 8.33333V7.66667C11.6666 7.48257 11.5174 7.33333 11.3333 7.33333H9.33329V5.33333C9.33329 5.14924 9.18405 5 8.99996 5H8.33329Z"/>
+</svg>
diff --git a/frontend/src/style.less b/frontend/src/style.less
index 50d4058b..5d738679 100644
--- a/frontend/src/style.less
+++ b/frontend/src/style.less
@@ -26,6 +26,8 @@
   --ed-border-radius-base: 6px !important;
   --ed-border-color: #d9dcdf !important;
   --ed-color-primary-light-7: #d2f1e9 !important;
+  --ed-border-color: #d9dcdf !important;
+  --ed-border-radius-base: 6px !important;
 }
 
 a {
diff --git a/frontend/src/views/ds/Card.vue b/frontend/src/views/ds/Card.vue
index 98bbdabf..5d033c28 100644
--- a/frontend/src/views/ds/Card.vue
+++ b/frontend/src/views/ds/Card.vue
@@ -2,7 +2,7 @@
 import delIcon from '@/assets/svg/icon_delete.svg'
 import icon_more_outlined from '@/assets/svg/icon_more_outlined.svg'
 import icon_form_outlined from '@/assets/svg/icon_form_outlined.svg'
-import icon_chat_outlined from '@/assets/svg/icon_chat_outlined.svg'
+import icon_chat_outlined from '@/assets/svg/icon_new-chat_outlined.svg'
 import { computed, ref, unref } from 'vue'
 import { ClickOutside as vClickOutside } from 'element-plus-secondary'
 import { dsTypeWithImg } from './js/ds-type'
@@ -93,7 +93,7 @@ const onClickOutside = () => {
       <div click.stop class="methods">
         <el-button v-if="false" @click="runSQL">test</el-button>
         <el-button type="primary" style="margin-right: 8px" @click.stop="handleQuestion">
-          <el-icon style="margin-right: 2px" size="12">
+          <el-icon style="margin-right: 4px" size="16">
             <icon_chat_outlined></icon_chat_outlined>
           </el-icon>
           {{ $t('datasource.open_query') }}
diff --git a/frontend/src/views/system/appearance/LoginPreview.vue b/frontend/src/views/system/appearance/LoginPreview.vue
index e5c42dcf..94d2ec4e 100644
--- a/frontend/src/views/system/appearance/LoginPreview.vue
+++ b/frontend/src/views/system/appearance/LoginPreview.vue
@@ -288,7 +288,7 @@ onMounted(() => {
           padding-top: 12px;
           box-shadow: 0px 4px 15px rgba(31, 35, 41, 0.08);
           border: 1px solid #dee0e3;
-          border-radius: 2px;
+          border-radius: 12px;
 
           .login-form-item {
             margin-top: 15px;
diff --git a/frontend/src/views/system/appearance/Person.vue b/frontend/src/views/system/appearance/Person.vue
index 1b9fc946..0354eb5b 100644
--- a/frontend/src/views/system/appearance/Person.vue
+++ b/frontend/src/views/system/appearance/Person.vue
@@ -129,6 +129,7 @@ const account = computed(() => userStore.getAccount)
   position: absolute;
   bottom: 44px;
   pointer-events: none;
+  border-radius: 6px;
 
   &::after {
     content: '';
diff --git a/frontend/src/views/system/appearance/index.vue b/frontend/src/views/system/appearance/index.vue
index 77cf8691..b45adb92 100644
--- a/frontend/src/views/system/appearance/index.vue
+++ b/frontend/src/views/system/appearance/index.vue
@@ -766,7 +766,7 @@ onUnmounted(() => {
           align-items: center;
           justify-content: center;
           background: #ffffff;
-          border: 1px solid #bbbfc4;
+          border: 1px solid var(--ed-border-color);
           border-radius: 6px;
 
           .is-active {
diff --git a/frontend/src/views/system/permission/SelectPermission.vue b/frontend/src/views/system/permission/SelectPermission.vue
index 9417d33c..cf777bd7 100644
--- a/frontend/src/views/system/permission/SelectPermission.vue
+++ b/frontend/src/views/system/permission/SelectPermission.vue
@@ -7,7 +7,7 @@
           v-model="search"
           :validate-event="false"
           :placeholder="$t('datasource.search')"
-          style="width: 364px"
+          style="width: 364px; margin-left: 16px"
           clearable
         >
           <template #prefix>
@@ -20,6 +20,7 @@
           <el-checkbox
             v-model="checkAll"
             class="mb-8"
+            style="margin-left: 16px"
             :indeterminate="isIndeterminate"
             @change="handleCheckAllChange"
           >
@@ -35,6 +36,7 @@
               :key="space.id"
               :label="space.name"
               :value="space"
+              class="hover-bg"
             >
               <div class="flex">
                 <el-icon size="28">
@@ -52,7 +54,7 @@
         </div>
       </div>
       <div class="p-16 w-full">
-        <div class="flex-between mb-16">
+        <div class="flex-between mb-16" style="margin: 0 16px">
           <span class="lighter">
             {{ $t('workspace.selected_2_people', { msg: checkTableList.length }) }}
           </span>
@@ -61,7 +63,12 @@
             {{ $t('workspace.clear') }}
           </el-button>
         </div>
-        <div v-for="ele in checkTableList" :key="ele.name" class="flex-between">
+        <div
+          v-for="ele in checkTableList"
+          :key="ele.name"
+          style="margin: 0 16px; position: relative"
+          class="flex-between align-center hover-bg_select"
+        >
           <div class="flex align-center ellipsis" style="width: 100%">
             <el-icon size="28">
               <avatar_personal></avatar_personal>
@@ -176,16 +183,54 @@ defineExpose({
 </script>
 <style lang="less">
 .select-user_permission {
+  .lighter-bold {
+    margin-bottom: 16px;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 24px;
+  }
+
   .mb-8 {
     margin-bottom: 8px;
   }
 
+  .ed-checkbox {
+    margin-right: 0;
+    position: relative;
+  }
+
+  .hover-bg,
+  .hover-bg_select {
+    &:hover {
+      &::after {
+        content: '';
+        height: 44px;
+        width: calc(100% + 34px);
+        background: #1f23291a;
+        position: absolute;
+        border-radius: 6px;
+        top: 50%;
+        transform: translateY(-50%);
+        left: -8px;
+        z-index: 1;
+      }
+    }
+  }
+
+  .hover-bg_select {
+    &:hover {
+      &::after {
+        width: calc(100% + 16px);
+      }
+    }
+  }
+
   .mt-16 {
     margin-top: 16px;
   }
 
   .p-16 {
-    padding: 16px;
+    padding: 16px 0;
   }
 
   .lighter {
@@ -194,11 +239,8 @@ defineExpose({
     line-height: 22px;
   }
 
-  .lighter-bold {
-    font-weight: 500;
-    font-size: 16px;
-    line-height: 24px;
-    margin-bottom: 16px;
+  .checkbox-group-block {
+    margin: 0 16px;
   }
 
   .checkbox-group-block {
@@ -217,12 +259,25 @@ defineExpose({
     }
   }
 
+  .close-btn {
+    position: relative;
+    z-index: 10;
+    height: 24px;
+    line-height: 24px;
+    &:hover,
+    &:active,
+    &:focus {
+      background: #1f23291a !important;
+    }
+  }
+
   .border {
     border: 1px solid #dee0e3;
   }
 
   .w-full {
-    width: 100%;
+    height: 100%;
+    width: 50%;
     overflow-y: auto;
 
     .flex-between {
@@ -230,14 +285,6 @@ defineExpose({
     }
   }
 
-  .close-btn {
-    &:hover,
-    &:active,
-    &:focus {
-      background: #1f23291a !important;
-    }
-  }
-
   .mt-8 {
     margin-top: 8px;
   }
@@ -263,13 +310,11 @@ defineExpose({
   .flex {
     display: flex;
   }
-  .ed-checkbox {
-    margin-right: 0 !important;
-  }
 
   .border-r {
     border-right: 1px solid #dee0e3;
     width: 50%;
+    overflow: hidden;
   }
 }
 </style>
diff --git a/frontend/src/views/system/workspace/AuthorizedWorkspaceDialog.vue b/frontend/src/views/system/workspace/AuthorizedWorkspaceDialog.vue
index b2920cf1..1d0d8303 100644
--- a/frontend/src/views/system/workspace/AuthorizedWorkspaceDialog.vue
+++ b/frontend/src/views/system/workspace/AuthorizedWorkspaceDialog.vue
@@ -17,7 +17,7 @@
           v-model="search"
           :validate-event="false"
           :placeholder="$t('datasource.search')"
-          style="width: 364px"
+          style="width: 364px; margin-left: 16px"
           clearable
         >
           <template #prefix>
@@ -30,6 +30,7 @@
           <el-checkbox
             v-model="checkAll"
             class="mb-8"
+            style="margin-left: 16px"
             :indeterminate="isIndeterminate"
             @change="handleCheckAllChange"
           >
@@ -45,6 +46,7 @@
               :key="space.id"
               :label="space.name"
               :value="space"
+              class="hover-bg"
             >
               <div class="flex">
                 <el-icon size="28">
@@ -62,7 +64,7 @@
         </div>
       </div>
       <div class="p-16 w-full">
-        <div class="flex-between mb-16">
+        <div class="flex-between mb-16" style="margin: 0 16px">
           <span class="lighter">
             {{ $t('workspace.selected_2_people', { msg: checkTableList.length }) }}
           </span>
@@ -71,7 +73,12 @@
             {{ $t('workspace.clear') }}
           </el-button>
         </div>
-        <div v-for="ele in checkTableList" :key="ele.name" class="flex-between align-center">
+        <div
+          v-for="ele in checkTableList"
+          :key="ele.name"
+          style="margin: 0 16px; position: relative"
+          class="flex-between align-center hover-bg_select"
+        >
           <div
             :title="`${ele.name}(${ele.account})`"
             class="flex align-center ellipsis"
@@ -214,6 +221,33 @@ defineExpose({
 
   .ed-checkbox {
     margin-right: 0;
+    position: relative;
+  }
+
+  .hover-bg,
+  .hover-bg_select {
+    &:hover {
+      &::after {
+        content: '';
+        height: 44px;
+        width: calc(100% + 34px);
+        background: #1f23291a;
+        position: absolute;
+        border-radius: 6px;
+        top: 50%;
+        transform: translateY(-50%);
+        left: -8px;
+        z-index: 1;
+      }
+    }
+  }
+
+  .hover-bg_select {
+    &:hover {
+      &::after {
+        width: calc(100% + 16px);
+      }
+    }
   }
 
   .mt-16 {
@@ -221,7 +255,7 @@ defineExpose({
   }
 
   .p-16 {
-    padding: 16px;
+    padding: 16px 0;
   }
 
   .lighter {
@@ -230,6 +264,10 @@ defineExpose({
     line-height: 22px;
   }
 
+  .checkbox-group-block {
+    margin: 0 16px;
+  }
+
   .checkbox-group-block {
     .ed-checkbox,
     .ed-checkbox__label,
@@ -247,6 +285,10 @@ defineExpose({
   }
 
   .close-btn {
+    position: relative;
+    z-index: 10;
+    height: 24px;
+    line-height: 24px;
     &:hover,
     &:active,
     &:focus {