diff --git a/cc-inspector/src/views/devtools/index.vue b/cc-inspector/src/views/devtools/index.vue
index ed91b6b..8f1d7a5 100644
--- a/cc-inspector/src/views/devtools/index.vue
+++ b/cc-inspector/src/views/devtools/index.vue
@@ -51,7 +51,7 @@
       </div>
       <CCDivider></CCDivider>
       <div class="right">
-        <properties v-if="treeItemData" :data="treeItemData"></properties>
+        <Properties v-if="treeItemData" :data="treeItemData"></Properties>
       </div>
     </div>
     <div v-show="!isShowDebug" class="no-find">
@@ -79,7 +79,7 @@ import { connectBackground } from "./connectBackground";
 import { EngineData, FrameDetails, Info, NodeInfoData, ObjectData, ObjectItemRequestData, TreeData } from "./data";
 import { appStore, RefreshType } from "./store";
 import Test from "./test/test.vue";
-import properties from "./ui/propertys.vue";
+import Properties from "./ui/propertys.vue";
 import SettingsVue from "./ui/settings.vue";
 ccui.components.CCAd;
 const { CCTree, CCFootBar, CCDialog, CCInput, CCButton, CCInputNumber, CCSelect, CCButtonGroup, CCCheckBox, CCColor, CCDivider } = ccui.components;
@@ -89,7 +89,7 @@ interface FrameInfo {
 }
 
 export default defineComponent({
-  components: { Test, CCFootBar, CCDialog, CCTree, CCDivider, CCButtonGroup, properties, SettingsVue, CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor },
+  components: { Test, CCFootBar, CCDialog, CCTree, CCDivider, CCButtonGroup, Properties, SettingsVue, CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor },
   name: "devtools",
   props: {},
   setup(props, ctx) {
@@ -333,6 +333,9 @@ export default defineComponent({
       requestList.push({ id: data.id, cb });
       connectBackground.sendMsgToContentScript(Msg.GetObjectItemData, data);
     });
+    Bus.on(BusMsg.UpdateSettings, () => {
+      syncSettings();
+    });
     Bus.on(BusMsg.LogData, (data: string[]) => {
       connectBackground.sendMsgToContentScript(Msg.LogData, data);
     });
@@ -496,7 +499,8 @@ export default defineComponent({
   width: 100%;
   height: 100%;
   overflow: hidden;
-
+  background-color: #5c5c5c;
+  color: white;
   .head {
     display: flex;
     flex-direction: row;
diff --git a/cc-inspector/src/views/devtools/ui/property-group.vue b/cc-inspector/src/views/devtools/ui/property-group.vue
index 05ecbc5..14455b0 100644
--- a/cc-inspector/src/views/devtools/ui/property-group.vue
+++ b/cc-inspector/src/views/devtools/ui/property-group.vue
@@ -1,20 +1,14 @@
 <template>
   <div class="property-group">
-    <div class="header" @click="onClickHeader" @mouseenter="showLogBtn = true" @mouseleave="showLogBtn = false">
-      <div style="margin: 0 5px">
-        <i v-if="fold" class="iconfont icon_arrow_right"></i>
-        <i v-if="!fold" class="iconfont icon_arrow_down"></i>
+    <CCSection :expand="!fold" :name="group.name" :expand-by-full-header="true" :auto-slot-header="true">
+      <template v-slot:header>
+        <div style="flex: 1"></div>
+        <i style="" @click.stop="onLog" class="print iconfont icon_print"></i>
+      </template>
+      <div>
+        <UiProp v-for="(item, index) in group.data" :key="index" :name="item.name" :value="item.value"> </UiProp>
       </div>
-      <div style="flex: 1">
-        {{ group.name }}
-      </div>
-      <CCButton style="margin-right: 10px" v-show="showLogBtn" type="success" @click.stop="onLog">
-        <i class="iconfont icon_print"></i>
-      </CCButton>
-    </div>
-    <div class="content" v-show="!fold">
-      <ui-prop v-for="(item, index) in group.data" :key="index" :name="item.name" :value="item.value"> </ui-prop>
-    </div>
+    </CCSection>
   </div>
 </template>
 
@@ -24,11 +18,12 @@ import { defineComponent, PropType, ref } from "vue";
 import Bus, { BusMsg } from "../bus";
 import { Group } from "../data";
 import UiProp from "./ui-prop.vue";
-const { CCInput, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
+const { CCInput, CCSection, CCButton, CCInputNumber, CCSelect, CCCheckBox, CCColor } = ccui.components;
 export default defineComponent({
   name: "property-group",
   components: {
     UiProp,
+    CCSection,
     CCInput,
     CCButton,
     CCInputNumber,
@@ -49,17 +44,11 @@ export default defineComponent({
       fold.value = b;
     });
     const fold = ref(false);
-    const showLogBtn = ref(false);
     return {
-      showLogBtn,
       fold,
       onLog() {
         Bus.emit(BusMsg.LogData, [props.group.id]);
       },
-
-      onClickHeader() {
-        fold.value = !fold.value;
-      },
     };
   },
 });
@@ -67,23 +56,14 @@ export default defineComponent({
 
 <style scoped lang="less">
 .property-group {
-  .header {
-    height: 40px;
-    display: flex;
-    flex-direction: row;
-    align-items: center;
-    user-select: none;
-    cursor: pointer;
-    border-bottom: 1px #6d6d6d solid;
-    background-color: #1da1f7;
-  }
-
-  .header:hover {
-    color: #6d6d6d;
-  }
-
-  .content {
-    padding: 0 5px;
+  .print {
+    margin-right: 10px;
+    &:hover {
+      color: #ffffff;
+    }
+    &:active {
+      color: #ffaa00;
+    }
   }
 }
 </style>