diff --git a/src/renderer/pages/preference.vue b/src/renderer/pages/preference.vue
index b20d0998..614c431f 100644
--- a/src/renderer/pages/preference.vue
+++ b/src/renderer/pages/preference.vue
@@ -59,7 +59,7 @@ export default {
 }
 </script>
 
-<style scoped>
+<style>
 .pref-container {
   --prefSideBarWidth: 320px;
 
@@ -72,6 +72,16 @@ export default {
   left: 0;
   display: flex;
   background: var(--editorBgColor);
+
+  & h4 {
+    margin: 0;
+    font-weight: normal;
+  }
+
+  & h5 {
+    font-weight: normal;
+  }
+
   & .pref-content {
     position: relative;
     flex: 1;
diff --git a/src/renderer/prefComponents/common/bool/index.vue b/src/renderer/prefComponents/common/bool/index.vue
index 2682c6e6..cfa85456 100644
--- a/src/renderer/prefComponents/common/bool/index.vue
+++ b/src/renderer/prefComponents/common/bool/index.vue
@@ -14,15 +14,14 @@
       >
         <i class="el-icon-info"></i>
       </el-tooltip>
+      <span v-if="notes" class="notes">
+        {{notes}}
+      </span>
     </div>
     <el-switch
       v-model="status"
       @change="handleSwitchChange">
     </el-switch>
-    <div v-if="notes" class="notes">
-      {{notes}}
-    </div>
-    </div>
   </section>
 </template>
 
@@ -73,12 +72,11 @@ export default {
     user-select: none;
     margin: 20px 0;
     color: var(--editorColor);
-    & .el-switch {
-      float: right;
-      clear: right;
-    }
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
     & .description {
-      margin-bottom: 10px;
       & i {
         cursor: pointer;
         opacity: .7;
@@ -88,26 +86,30 @@ export default {
         color: var(--themeColor);
       }
     }
+
     & .notes {
-      margin-top: 10px;
       font-style: italic;
       font-size: 12px;
     }
   }
+
   span.el-switch__core::after {
     top: 3px;
     left: 7px;
     width: 10px;
     height: 10px;
   }
+
   .el-switch .el-switch__core {
     border: 2px solid var(--iconColor);
     background: transparent;
     box-sizing: border-box;
   }
+
   span.el-switch__label {
     color: var(--editorColor50);
   }
+
   .el-switch:not(.is-checked) .el-switch__core::after {
     background: var(--iconColor);
   }
diff --git a/src/renderer/prefComponents/common/compound/index.vue b/src/renderer/prefComponents/common/compound/index.vue
index 315f534d..e730b5e6 100644
--- a/src/renderer/prefComponents/common/compound/index.vue
+++ b/src/renderer/prefComponents/common/compound/index.vue
@@ -28,12 +28,13 @@ export default {
     user-select: none;
     margin: 20px 0;
     color: var(--editorColor);
+
     & .pref-compound-body {
-      border: 1pt solid lightgray;
       padding: 8px 16px 8px 16px;
       margin-top: -12px;
       background: rgba(0, 0, 0, .04);
     }
+
     & .description {
       margin-bottom: 10px;
       & i {
@@ -45,6 +46,7 @@ export default {
         color: var(--themeColor);
       }
     }
+
     & .notes {
       margin-top: 10px;
       font-style: italic;
diff --git a/src/renderer/prefComponents/common/titlebar.vue b/src/renderer/prefComponents/common/titlebar.vue
index c0c48d20..15490be6 100644
--- a/src/renderer/prefComponents/common/titlebar.vue
+++ b/src/renderer/prefComponents/common/titlebar.vue
@@ -27,15 +27,6 @@ export default {
 }
 </script>
 
-<style>
-  h4 {
-    margin: 0;
-    font-weight: normal;
-  }
-  h5 {
-    font-weight: normal;
-  }
-</style>
 <style scoped>
   .title-bar {
     -webkit-app-region: drag;
@@ -62,6 +53,7 @@ export default {
     height: var(--titleBarHeight);
     -webkit-app-region: no-drag;
   }
+
   .frameless-titlebar-button > div {
     position: absolute;
     display: inline-flex;
@@ -69,12 +61,15 @@ export default {
     left: 50%;
     transform: translateX(-50%) translateY(-50%);
   }
+
   .frameless-titlebar-close:hover {
     background-color: rgb(228, 79, 79);
   }
+
   .frameless-titlebar-button svg {
     fill: #000000
   }
+
   .frameless-titlebar-close:hover svg {
     fill: #ffffff
   }