diff --git a/frontend/src/assets/img/none-dashboard.svg b/frontend/src/assets/img/none-dashboard.svg
new file mode 100644
index 00000000..01b130d5
--- /dev/null
+++ b/frontend/src/assets/img/none-dashboard.svg
@@ -0,0 +1,67 @@
+<svg width="136" height="125" viewBox="0 0 136 125" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g filter="url(#filter0_d_4613_31856)">
+<rect x="13" y="25" width="115" height="75" rx="2" fill="white" fill-opacity="0.8" shape-rendering="crispEdges"/>
+</g>
+<g filter="url(#filter1_d_4613_31856)">
+<rect x="8" y="20" width="115" height="75" rx="2" fill="white"/>
+</g>
+<rect x="41" y="32" width="78" height="58" rx="1" fill="#F5F6F7"/>
+<path d="M77.8198 60.7428H53.8831C53.5517 60.7428 53.2235 60.8081 52.9173 60.9349C52.6111 61.0618 52.3329 61.2477 52.0986 61.482C51.8642 61.7164 51.6783 61.9946 51.5515 62.3008C51.4247 62.607 51.3594 62.9352 51.3594 63.2666V74.762C51.3594 75.4313 51.6253 76.0732 52.0986 76.5465C52.5719 77.0198 53.2138 77.2857 53.8831 77.2857H77.8198C78.4891 77.2857 79.131 77.0198 79.6043 76.5465C80.0776 76.0732 80.3435 75.4313 80.3435 74.762V63.2666C80.3435 62.9352 80.2783 62.607 80.1514 62.3008C80.0246 61.9946 79.8387 61.7164 79.6043 61.482C79.37 61.2477 79.0918 61.0618 78.7856 60.9349C78.4794 60.8081 78.1512 60.7428 77.8198 60.7428Z" class="icon-primary"/>
+<path d="M51 44C51 43.4477 51.4477 43 52 43H108.877C109.429 43 109.877 43.4477 109.877 44V44.563C109.877 45.1153 109.429 45.563 108.877 45.563H52C51.4477 45.563 51 45.1153 51 44.563V44Z" class="icon-primary_15_d"/>
+<path d="M51 49.1429C51 48.5906 51.4477 48.1429 52 48.1429H108.877C109.429 48.1429 109.877 48.5906 109.877 49.1429V49.7059C109.877 50.2582 109.429 50.7059 108.877 50.7059H52C51.4477 50.7059 51 50.2582 51 49.7059V49.1429Z" class="icon-primary_15_d"/>
+<path d="M51 54.2857C51 53.7334 51.4477 53.2857 52 53.2857H77.4286C77.9809 53.2857 78.4286 53.7334 78.4286 54.2857V54.8571C78.4286 55.4094 77.9809 55.8571 77.4286 55.8571H52C51.4477 55.8571 51 55.4094 51 54.8571V54.2857Z" class="icon-primary_60"/>
+<path d="M62.7535 65.4558H55.1326C54.8177 65.4558 54.5156 65.581 54.2929 65.8037C54.0702 66.0264 53.9451 66.3284 53.9451 66.6434V73.0891C53.9451 73.4041 54.0702 73.7061 54.2929 73.9288C54.5156 74.1515 54.8177 74.2767 55.1326 74.2767H62.7535C63.0684 74.2767 63.3705 74.1515 63.5932 73.9288C63.8159 73.7061 63.941 73.4041 63.941 73.0891V66.6434C63.941 66.3284 63.8159 66.0264 63.5932 65.8037C63.3705 65.581 63.0684 65.4558 62.7535 65.4558Z" fill="white"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M64.0837 68.8593L59.3932 72.8776L56.9251 71.7629L55.1508 74.3399L54.6848 74.019L56.7272 71.0528L59.2983 72.214L63.7157 68.4297L64.0837 68.8593Z" class="icon-primary"/>
+<path d="M78.6398 66.0918H67.1155V65.5261H78.6398V66.0918Z" fill="white"/>
+<path d="M72.2911 68.4441H67.1155V67.8784H72.2911V68.4441Z" fill="white"/>
+<path d="M78.6398 70.9142H67.1155V70.3485H78.6398V70.9142Z" fill="white"/>
+<path d="M76.5249 73.0311H67.1155V72.4654H76.5249V73.0311Z" fill="white"/>
+<path d="M58.8976 69.5636C59.2049 69.5636 59.4996 69.4416 59.7169 69.2243C59.9342 69.007 60.0563 68.7123 60.0563 68.405C60.0563 68.0977 59.9342 67.803 59.7169 67.5858C59.4996 67.3685 59.2049 67.2464 58.8976 67.2464C58.5903 67.2464 58.2956 67.3685 58.0784 67.5858C57.8611 67.803 57.739 68.0977 57.739 68.405C57.739 68.7123 57.8611 69.007 58.0784 69.2243C58.2956 69.4416 58.5903 69.5636 58.8976 69.5636Z" class="icon-primary"/>
+<path d="M98.71 76.9977C102.96 76.9977 106.436 73.6832 106.695 69.4978C106.712 69.2222 106.486 68.9977 106.21 68.9977C103.71 68.9977 101.21 68.9977 98.71 68.9977C98.71 66.0429 98.71 63.5427 98.71 61.4974C98.71 61.2212 98.4855 60.9961 98.2099 61.0131C94.0245 61.2713 90.71 64.7474 90.71 68.9977C90.71 73.416 94.2917 76.9977 98.71 76.9977Z" class="icon-primary"/>
+<path d="M101.19 67.2829C100.767 67.2829 100.424 66.9399 100.424 66.5168V60.9936C100.424 60.6895 100.687 60.4504 100.987 60.5027C104.153 61.0565 106.65 63.554 107.204 66.7201C107.257 67.0196 107.017 67.2829 106.713 67.2829H101.19Z" fill="#00D6B9"/>
+<path d="M41 26C41 25.4477 41.4477 25 42 25H94C94.5523 25 95 25.4477 95 26V29C95 29.5523 94.5523 30 94 30H42C41.4477 30 41 29.5523 41 29V26Z" fill="#E0E4E8"/>
+<path d="M109 26C109 25.4477 109.448 25 110 25H118C118.552 25 119 25.4477 119 26V29C119 29.5523 118.552 30 118 30H110C109.448 30 109 29.5523 109 29V26Z" fill="#E0E4E8"/>
+<path d="M97 26C97 25.4477 97.4477 25 98 25H106C106.552 25 107 25.4477 107 26V29C107 29.5523 106.552 30 106 30H98C97.4477 30 97 29.5523 97 29V26Z" fill="#E0E4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 47.5H37C37.5523 47.5 38 47.8731 38 48.3333V51.6667C38 52.1269 37.5523 52.5 37 52.5H14C13.4477 52.5 13 52.1269 13 51.6667V48.3333C13 47.8731 13.4477 47.5 14 47.5Z" fill="#E0E4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 40H37C37.5523 40 38 40.3731 38 40.8333V44.1667C38 44.6269 37.5523 45 37 45H14C13.4477 45 13 44.6269 13 44.1667V40.8333C13 40.3731 13.4477 40 14 40Z" fill="#E0E4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 55H37C37.5523 55 38 55.3731 38 55.8333V59.1667C38 59.6269 37.5523 60 37 60H14C13.4477 60 13 59.6269 13 59.1667V55.8333C13 55.3731 13.4477 55 14 55Z" fill="#E0E4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 62.5H37C37.5523 62.5 38 62.8731 38 63.3333V66.6667C38 67.1269 37.5523 67.5 37 67.5H14C13.4477 67.5 13 67.1269 13 66.6667V63.3333C13 62.8731 13.4477 62.5 14 62.5Z" class="icon-primary"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 70H37C37.5523 70 38 70.3731 38 70.8333V74.1667C38 74.6269 37.5523 75 37 75H14C13.4477 75 13 74.6269 13 74.1667V70.8333C13 70.3731 13.4477 70 14 70Z" fill="#E0E4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 77.5H37C37.5523 77.5 38 77.8731 38 78.3333V81.6667C38 82.1269 37.5523 82.5 37 82.5H14C13.4477 82.5 13 82.1269 13 81.6667V78.3333C13 77.8731 13.4477 77.5 14 77.5Z" fill="#E0E4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 85H37C37.5523 85 38 85.3731 38 85.8333V89.1667C38 89.6269 37.5523 90 37 90H14C13.4477 90 13 89.6269 13 89.1667V85.8333C13 85.3731 13.4477 85 14 85Z" fill="#E0E4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 32.5H37C37.5523 32.5 38 32.8731 38 33.3333V36.6667C38 37.1269 37.5523 37.5 37 37.5H14C13.4477 37.5 13 37.1269 13 36.6667V33.3333C13 32.8731 13.4477 32.5 14 32.5Z" fill="#E0E4E8"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M14 25H36.75C37.3023 25 37.75 25.3731 37.75 25.8333V29.1667C37.75 29.6269 37.3023 30 36.75 30H14C13.4477 30 13 29.6269 13 29.1667V25.8333C13 25.3731 13.4477 25 14 25Z" fill="#E0E4E8"/>
+<g filter="url(#filter2_d_4613_31856)">
+</g>
+<defs>
+<filter id="filter0_d_4613_31856" x="5" y="21" width="131" height="91" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.160784 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4613_31856"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4613_31856" result="shape"/>
+</filter>
+<filter id="filter1_d_4613_31856" x="0" y="16" width="131" height="91" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="4"/>
+<feGaussianBlur stdDeviation="4"/>
+<feComposite in2="hardAlpha" operator="out"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0.121569 0 0 0 0 0.137255 0 0 0 0 0.160784 0 0 0 0.1 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4613_31856"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4613_31856" result="shape"/>
+</filter>
+<filter id="filter2_d_4613_31856" x="25.937" y="61.7496" width="21.1448" height="22.7092" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+<feFlood flood-opacity="0" result="BackgroundImageFix"/>
+<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+<feOffset dy="1"/>
+<feGaussianBlur stdDeviation="1.5"/>
+<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/>
+<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_4613_31856"/>
+<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_4613_31856" result="shape"/>
+</filter>
+</defs>
+</svg>
diff --git a/frontend/src/assets/permission/icon_custom-tools_colorful.png b/frontend/src/assets/permission/icon_custom-tools_colorful.png
deleted file mode 100644
index 41b09345..00000000
Binary files a/frontend/src/assets/permission/icon_custom-tools_colorful.png and /dev/null differ
diff --git a/frontend/src/assets/permission/icon_custom-tools_colorful.svg b/frontend/src/assets/permission/icon_custom-tools_colorful.svg
new file mode 100644
index 00000000..affb781a
--- /dev/null
+++ b/frontend/src/assets/permission/icon_custom-tools_colorful.svg
@@ -0,0 +1,11 @@
+<svg width="33" height="32" viewBox="0 0 33 32" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_4611_10636)">
+<path d="M0.333374 16C0.333374 8.45753 0.333374 4.68629 2.67652 2.34315C5.01967 0 8.7909 0 16.3334 0C23.8758 0 27.6471 0 29.9902 2.34315C32.3334 4.68629 32.3334 8.45753 32.3334 16C32.3334 23.5425 32.3334 27.3137 29.9902 29.6569C27.6471 32 23.8758 32 16.3334 32C8.7909 32 5.01967 32 2.67652 29.6569C0.333374 27.3137 0.333374 23.5425 0.333374 16Z"/>
+<path d="M16.3334 7.66699C18.8646 7.66699 20.9164 9.71667 20.9164 12.25V12.667H23.8334C24.2938 12.667 24.6664 13.0417 24.6664 13.5V23.5C24.6664 23.9583 24.2938 24.333 23.8334 24.333H8.83337C8.37296 24.333 8.00037 23.9583 8.00037 23.5V13.5C8.00037 13.0417 8.37296 12.667 8.83337 12.667H11.7504V12.25C11.7504 9.71667 13.8021 7.66699 16.3334 7.66699ZM16.3334 16.5C14.9527 16.5 13.8334 17.6193 13.8334 19C13.8334 20.3807 14.9527 21.5 16.3334 21.5C17.7141 21.5 18.8334 20.3807 18.8334 19C18.8334 17.6193 17.7141 16.5 16.3334 16.5ZM16.3334 9.33301C14.7225 9.33301 13.4164 10.6375 13.4164 12.25V12.667H19.2504V12.25C19.2504 10.6375 17.9442 9.33301 16.3334 9.33301Z" fill="white"/>
+</g>
+<defs>
+<clipPath id="clip0_4611_10636">
+<rect width="32" height="32" fill="white" transform="translate(0.333374)"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/frontend/src/assets/permission/icon_dashboard.svg b/frontend/src/assets/permission/icon_dashboard.svg
new file mode 100644
index 00000000..11f5dbb5
--- /dev/null
+++ b/frontend/src/assets/permission/icon_dashboard.svg
@@ -0,0 +1,6 @@
+<svg width="18" height="18" viewBox="0 0 18 18" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 15.375C1.5 15.1679 1.66789 15 1.875 15H16.125C16.3321 15 16.5 15.1679 16.5 15.375V16.125C16.5 16.3321 16.3321 16.5 16.125 16.5H1.875C1.66789 16.5 1.5 16.3321 1.5 16.125V15.375Z" />
+<path d="M2.25 8.625C2.25 8.41789 2.41789 8.25 2.625 8.25H4.875C5.08211 8.25 5.25 8.41789 5.25 8.625V13.125C5.25 13.3321 5.08211 13.5 4.875 13.5H2.625C2.41789 13.5 2.25 13.3321 2.25 13.125V8.625Z" />
+<path d="M7.5 2.625C7.5 2.41789 7.66789 2.25 7.875 2.25H10.125C10.3321 2.25 10.5 2.41789 10.5 2.625V13.125C10.5 13.3321 10.3321 13.5 10.125 13.5H7.875C7.66789 13.5 7.5 13.3321 7.5 13.125V2.625Z" />
+<path d="M12.75 6.375C12.75 6.16789 12.9179 6 13.125 6H15.375C15.5821 6 15.75 6.16789 15.75 6.375V13.125C15.75 13.3321 15.5821 13.5 15.375 13.5H13.125C12.9179 13.5 12.75 13.3321 12.75 13.125V6.375Z" />
+</svg>
diff --git a/frontend/src/components/layout/Menu.vue b/frontend/src/components/layout/Menu.vue
index 8d0107df..00f8c3bf 100644
--- a/frontend/src/components/layout/Menu.vue
+++ b/frontend/src/components/layout/Menu.vue
@@ -45,6 +45,7 @@ const routerList = computed(() => {
   const list = router.getRoutes().filter((route) => {
     return (
       !route.path.includes('assistant') &&
+      !route.path.includes('embeddedPage') &&
       !route.path.includes('canvas') &&
       !route.path.includes('member') &&
       !route.path.includes('permission') &&
diff --git a/frontend/src/style.less b/frontend/src/style.less
index 8de643f2..a1db0c73 100644
--- a/frontend/src/style.less
+++ b/frontend/src/style.less
@@ -331,3 +331,23 @@ strong {
 .ed-popper[data-popper-placement^='right'] > .ed-popper__arrow {
   left: -5px !important;
 }
+
+.ed-form.last {
+  .ed-form-item {
+    &:last-child {
+      margin-bottom: 0;
+    }
+  }
+}
+
+.icon-primary.icon-primary {
+  color: var(--ed-color-primary);
+}
+
+.icon-primary_15_d.icon-primary_15_d {
+  color: var(--ed-color-primary-15-d);
+}
+
+.icon-primary_60.icon-primary_60 {
+  color: var(--ed-color-primary-60);
+}
diff --git a/frontend/src/utils/utils.ts b/frontend/src/utils/utils.ts
index 6c17941e..3ac0c5a0 100644
--- a/frontend/src/utils/utils.ts
+++ b/frontend/src/utils/utils.ts
@@ -136,6 +136,13 @@ export const setCurrentColor = (currentColor: any) => {
       .mix(new colorTree('ffffff'), new colorTree(currentColor.substr(1)), { value: 80 })
       .toRGB()
   )
+
+  document.documentElement.style.setProperty(
+    '--ed-color-primary-15-d',
+    colorFunctions
+      .mix(new colorTree('000000'), new colorTree(currentColor.substr(1)), { value: 15 })
+      .toRGB()
+  )
   document.documentElement.style.setProperty('--ed-color-primary-1a', `${currentColor}1a`)
   document.documentElement.style.setProperty('--ed-color-primary-14', `${currentColor}14`)
   document.documentElement.style.setProperty('--ed-color-primary-33', `${currentColor}33`)
diff --git a/frontend/src/views/dashboard/common/EmptyBackgroundSvg.vue b/frontend/src/views/dashboard/common/EmptyBackgroundSvg.vue
new file mode 100644
index 00000000..b5499e99
--- /dev/null
+++ b/frontend/src/views/dashboard/common/EmptyBackgroundSvg.vue
@@ -0,0 +1,43 @@
+<script lang="ts" setup>
+import nothingSelectDashboard from '@/assets/img/none-dashboard.svg'
+defineProps({
+  imageSize: {
+    type: Number,
+    default: 125,
+  },
+  description: {
+    type: String,
+    default: '',
+  },
+})
+</script>
+
+<template>
+  <div class="ed-empty empty-info">
+    <div class="ed-empty__image" style="width: 125px">
+      <el-icon size="125" class="icon-primary">
+        <nothingSelectDashboard></nothingSelectDashboard>
+      </el-icon>
+    </div>
+    <div class="ed-empty__description">
+      <p>{{ description }}</p>
+    </div>
+  </div>
+</template>
+
+<style lang="less" scoped>
+.empty-info {
+  height: 90%;
+  padding-top: 0;
+}
+:deep(.ed-empty__description) {
+  margin-top: 8px;
+
+  color: var(--N600, #646a73);
+  text-align: center;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 22px;
+}
+</style>
diff --git a/frontend/src/views/dashboard/common/ResourceGroupOpt.vue b/frontend/src/views/dashboard/common/ResourceGroupOpt.vue
index bc1cdeeb..ed5faa7b 100644
--- a/frontend/src/views/dashboard/common/ResourceGroupOpt.vue
+++ b/frontend/src/views/dashboard/common/ResourceGroupOpt.vue
@@ -175,6 +175,7 @@ defineExpose({
       require-asterisk-position="right"
       :model="resourceForm"
       :rules="resourceFormRules"
+      class="last"
       @submit.prevent
     >
       <el-form-item :label="state.resourceFormNameLabel" prop="name">
diff --git a/frontend/src/views/dashboard/common/ResourceTree.vue b/frontend/src/views/dashboard/common/ResourceTree.vue
index 2f9104c1..e0b15bb0 100644
--- a/frontend/src/views/dashboard/common/ResourceTree.vue
+++ b/frontend/src/views/dashboard/common/ResourceTree.vue
@@ -4,7 +4,7 @@ import { treeDraggableChart } from '@/views/dashboard/utils/treeDraggableChart'
 import icon_searchOutline_outlined from '@/assets/svg/icon_search-outline_outlined.svg'
 import icon_folder from '@/assets/svg/icon_folder.svg'
 import ope_add from '@/assets/svg/operate/ope-add.svg'
-import icon_dashboard from '@/assets/svg/icon_dashboard.svg'
+import icon_dashboard from '@/assets/permission/icon_dashboard.svg'
 import icon_edit_outlined from '@/assets/svg/icon_edit_outlined.svg'
 import icon_rename from '@/assets/svg/icon_rename.svg'
 import icon_delete from '@/assets/svg/icon_delete.svg'
@@ -422,7 +422,7 @@ defineExpose({
             <el-icon v-if="data.node_type !== 'leaf'" style="font-size: 18px">
               <Icon name="icon_folder"><icon_folder class="svg-icon" /></Icon>
             </el-icon>
-            <el-icon v-else style="font-size: 18px">
+            <el-icon v-else class="icon-primary" style="font-size: 18px">
               <Icon name="icon_dashboard"><icon_dashboard class="svg-icon" /></Icon>
             </el-icon>
             <span :title="node.label" class="label-tooltip">
diff --git a/frontend/src/views/dashboard/preview/SQPreviewShow.vue b/frontend/src/views/dashboard/preview/SQPreviewShow.vue
index 84bb5e81..d20495a9 100644
--- a/frontend/src/views/dashboard/preview/SQPreviewShow.vue
+++ b/frontend/src/views/dashboard/preview/SQPreviewShow.vue
@@ -7,6 +7,7 @@ import ResourceTree from '@/views/dashboard/common/ResourceTree.vue'
 import SQPreview from '@/views/dashboard/preview/SQPreview.vue'
 import SQPreviewHead from '@/views/dashboard/preview/SQPreviewHead.vue'
 import EmptyBackground from '@/views/dashboard/common/EmptyBackground.vue'
+import EmptyBackgroundSvg from '@/views/dashboard/common/EmptyBackgroundSvg.vue'
 import { dashboardStoreWithOut } from '@/stores/dashboard/dashboard.ts'
 import { useI18n } from 'vue-i18n'
 const { t } = useI18n()
@@ -130,10 +131,7 @@ defineExpose({
         </div>
       </template>
       <template v-else-if="hasTreeData && mounted">
-        <EmptyBackground
-          :description="t('dashboard.select_dashboard_tips')"
-          img-type="selectDashboard"
-        />
+        <EmptyBackgroundSvg :description="t('dashboard.select_dashboard_tips')" />
       </template>
       <template v-else-if="mounted">
         <EmptyBackground :description="t('dashboard.no_dashboard_info')" img-type="none">
diff --git a/frontend/src/views/system/appearance/index.vue b/frontend/src/views/system/appearance/index.vue
index 42f2872e..0ff0c5d3 100644
--- a/frontend/src/views/system/appearance/index.vue
+++ b/frontend/src/views/system/appearance/index.vue
@@ -751,6 +751,7 @@ onUnmounted(() => {
 
           .is-active {
             background: var(--ed-color-primary-1a, #1cba901a);
+            font-weight: 500;
           }
 
           .ed-button:not(.is-active) {
diff --git a/frontend/src/views/system/permission/Card.vue b/frontend/src/views/system/permission/Card.vue
index 81d602d2..478dbacd 100644
--- a/frontend/src/views/system/permission/Card.vue
+++ b/frontend/src/views/system/permission/Card.vue
@@ -2,7 +2,7 @@
 import delIcon from '@/assets/svg/icon_delete.svg'
 import icon_key_outlined from '@/assets/svg/icon-key_outlined.svg'
 import icon_member_outlined from '@/assets/svg/icon_member_outlined.svg'
-import Lock from '@/assets/permission/icon_custom-tools_colorful.png'
+import Lock from '@/assets/permission/icon_custom-tools_colorful.svg'
 withDefaults(
   defineProps<{
     name: string
@@ -40,7 +40,9 @@ const setUser = () => {
 <template>
   <div class="card">
     <div class="name-icon">
-      <img :src="Lock" width="32px" height="32px" />
+      <el-icon class="icon-primary" size="32">
+        <Lock></Lock>
+      </el-icon>
       <span class="name ellipsis" :title="name">{{ name }}</span>
     </div>
     <div class="type-value">
@@ -92,6 +94,7 @@ const setUser = () => {
     display: flex;
     align-items: center;
     margin-bottom: 12px;
+
     .name {
       margin-left: 12px;
       font-weight: 500;