diff --git a/app/src/asset/anno.ts b/app/src/asset/anno.ts
index f5817fa7f..e06af11ed 100644
--- a/app/src/asset/anno.ts
+++ b/app/src/asset/anno.ts
@@ -125,7 +125,7 @@ export const initAnno = (file: string, element: HTMLElement, annoId: string, pdf
         let target = event.target as HTMLElement;
         while (target && !target.classList.contains("pdf__outer")) {
             const type = target.getAttribute("data-type");
-            if (target.classList.contains("b3-color__square")) {
+            if (target.classList.contains("color__square")) {
                 const color = target.style.backgroundColor;
                 if (rectElement) {
                     const config = getConfig(pdf);
diff --git a/app/src/asset/index.ts b/app/src/asset/index.ts
index e6faf92ec..6df1d2a56 100644
--- a/app/src/asset/index.ts
+++ b/app/src/asset/index.ts
@@ -396,13 +396,13 @@ export class Asset extends Model {
       </div>
       <div class="pdf__util b3-menu fn__none pdf__util--hide">
         <div class="fn__flex" style="padding: 0 4px">
-            <button class="b3-color__square" style="background-color:var(--b3-pdf-background1)"></button>
-            <button class="b3-color__square" style="background-color:var(--b3-pdf-background2)"></button>
-            <button class="b3-color__square" style="background-color:var(--b3-pdf-background3)"></button>
-            <button class="b3-color__square" style="background-color:var(--b3-pdf-background4)"></button>
-            <button class="b3-color__square" style="background-color:var(--b3-pdf-background5)"></button>
-            <button class="b3-color__square" style="background-color:var(--b3-pdf-background6)"></button>
-            <button class="b3-color__square" style="background-color:var(--b3-pdf-background7)"></button>
+            <button class="color__square" style="background-color:var(--b3-pdf-background1)"></button>
+            <button class="color__square" style="background-color:var(--b3-pdf-background2)"></button>
+            <button class="color__square" style="background-color:var(--b3-pdf-background3)"></button>
+            <button class="color__square" style="background-color:var(--b3-pdf-background4)"></button>
+            <button class="color__square" style="background-color:var(--b3-pdf-background5)"></button>
+            <button class="color__square" style="background-color:var(--b3-pdf-background6)"></button>
+            <button class="color__square" style="background-color:var(--b3-pdf-background7)"></button>
         </div>
         <div class="b3-menu__separator pdf__util__hide" style="margin-top: 8px"></div>
         <button class="b3-menu__item pdf__util__hide" data-type="toggle">
diff --git a/app/src/assets/scss/_color.scss b/app/src/assets/scss/_color.scss
deleted file mode 100644
index b828b755f..000000000
--- a/app/src/assets/scss/_color.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-.b3-color {
-  &__square {
-    height: 16px;
-    margin-right: 4px;
-    width: 16px;
-    border: 0;
-    transition: var(--b3-transition);
-    box-shadow: 0 0 0 2px var(--b3-theme-surface-lighter) inset;
-    display: flex;
-    align-items: center;
-    flex-direction: column;
-    justify-content: center;
-    background-color: var(--b3-theme-background);
-
-    &:last-child {
-      margin-right: 0;
-    }
-
-    &:hover {
-      box-shadow: 0 0 0 1px var(--b3-theme-on-background) inset, 0 0 0 2px var(--b3-theme-background) inset;
-    }
-  }
-}
diff --git a/app/src/assets/scss/_tab.scss b/app/src/assets/scss/_tab.scss
deleted file mode 100644
index 78d8c8d9b..000000000
--- a/app/src/assets/scss/_tab.scss
+++ /dev/null
@@ -1,11 +0,0 @@
-.b3-tab-container {
-    overflow: auto;
-    box-sizing: border-box;
-    flex: 1;
-    background-color: var(--b3-theme-background);
-
-  .b3-label {
-    padding: 16px 0;
-    margin: 0 24px;
-  }
-}
diff --git a/app/src/assets/scss/base.scss b/app/src/assets/scss/base.scss
index e80b95756..79df8d1bc 100644
--- a/app/src/assets/scss/base.scss
+++ b/app/src/assets/scss/base.scss
@@ -1,32 +1,34 @@
-@import "keyframes";
-@import "mixin";
-@import "function";
-@import "chip";
-@import "slider";
-@import "switch";
-@import "scroll";
-@import "tooltips";
-@import "dialog";
-@import "button";
-@import "snackbar";
-@import "form";
+@import "util/keyframes";
+@import "util/mixin";
+@import "util/function";
+@import "business/history";
+@import "component/chip";
+@import "component/slider";
+@import "component/switch";
+@import "util/scroll";
+@import "component/tooltips";
+@import "component/dialog";
+@import "component/button";
+@import "component/snackbar";
+@import "component/form";
 @import "node_modules/@simonwep/pickr/src/scss/themes/nano.scss";
-@import "text-field";
-@import "select";
-@import "list";
-@import "tab";
-@import "graph";
-@import "layout";
-@import "block";
-@import "reset";
-@import "card";
-@import "menu";
-@import "color";
-// un refactor
-@import "protyle";
-@import "typography";
+@import "component/text-field";
+@import "component/select";
+@import "component/list";
+@import "business/graph";
+@import "business/layout";
+@import "business/block";
+@import "util/reset";
+@import "component/card";
+@import "component/menu";
+@import "business/color";
+@import "protyle/protyle";
+@import "component/typography";
 @import "pdf/pdf";
-@import "viewer";
+@import "business/config";
+@import "business/search";
+@import "pickr/pcr";
+@import "viewerjs/viewer";
 
 /*
 .status: 3
@@ -143,26 +145,6 @@ html {
   }
 }
 
-.pcr-app {
-  box-shadow: var(--b3-dialog-shadow);
-  border: 1px solid var(--b3-theme-surface-lighter);
-  border-radius: 4px;
-
-  .pcr-interaction .pcr-result {
-    @extend .b3-text-field;
-    background: transparent;
-    font-size: 12px;
-  }
-
-  .pcr-selection .pcr-picker {
-    height: 16px;
-    width: 16px;
-    border: 1px solid var(--b3-theme-surface-lighter);
-    box-shadow: var(--b3-point-shadow);
-    transition: transform 100ms ease-out;
-  }
-}
-
 .svg {
   fill: currentColor;
   display: inline-block;
@@ -355,216 +337,6 @@ html {
   }
 }
 
-.config {
-  &__panel {
-    & > .b3-tab-bar {
-      user-select: none;
-      width: 180px;
-      overflow: auto;
-      padding: 8px 0;
-      box-sizing: border-box
-    }
-  }
-
-  &-query {
-    display: flex;
-    flex-wrap: wrap;
-
-    label {
-      width: 16%;
-      margin: 8px 17% 0 0;
-      color: var(--b3-theme-on-surface);
-      align-items: center;
-    }
-  }
-
-  &-repos__sync {
-    margin: 0 0 -16px 16px;
-    overflow: hidden;
-    max-height: 180px;
-    display: flex;
-    flex-direction: column;
-    padding-bottom: 16px;
-  }
-
-  &-account {
-    height: 100%;
-
-    &__center {
-      flex-direction: column;
-      justify-content: center;
-      flex: 1;
-      display: flex;
-      min-width: 1px;
-      align-items: center;
-
-      &--text {
-        background-color: var(--b3-theme-surface);
-        padding: 16px 24px;
-
-        .b3-button--outline {
-          white-space: normal;
-        }
-      }
-    }
-
-    &__form {
-      max-width: 298px;
-      width: 100%;
-    }
-
-    &__bg {
-      position: relative;
-      margin-bottom: 82px;
-      width: 100%;
-      flex: 1;
-      min-height: 128px;
-    }
-
-    &__info {
-      width: 100%;
-      box-sizing: border-box;
-      padding: 16px 24px;
-    }
-
-    &__cover {
-      position: absolute;
-      top: 0;
-      width: 100%;
-      height: 100%;
-      background-size: cover;
-      background-position: center center;
-    }
-
-    &__avatar {
-      position: absolute;
-      bottom: 24px;
-      width: 128px;
-      height: 128px;
-      left: 50%;
-      margin-left: -64px;
-      background-repeat: no-repeat;
-      background-position: 50%;
-      background-size: cover;
-      border-radius: 90px;
-      background-color: rgba(255, 255, 255, 0.8);
-      box-shadow: var(--b3-point-shadow);
-      border: 1px solid var(--b3-theme-surface-lighter);
-    }
-
-    &__name {
-      bottom: -58px;
-      position: absolute;
-      width: 100%;
-      text-align: center;
-    }
-  }
-
-  &-about__logo {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    img {
-      height: 24px;
-      width: 24px;
-      margin-right: 8px;
-    }
-  }
-
-  &-assets {
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    box-sizing: border-box;
-
-    #assetsList {
-      overflow: auto;
-      flex: 1;
-    }
-
-    &__preview {
-      display: flex;
-      flex-direction: row;
-      align-items: center;
-      justify-content: center;
-      overflow: auto;
-      flex: 1;
-      margin-top: 8px;
-    }
-  }
-
-  &-keymap li .b3-text-field {
-    width: 124px;
-    text-align: center;
-  }
-
-  &-bazaar__readme {
-    position: absolute;
-    transition: var(--b3-transition);
-    right: -100%;
-    top: 0;
-    width: 100%;
-    height: 100%;
-    background-color: var(--b3-theme-background);
-    display: flex;
-    padding: 16px;
-    box-sizing: border-box;
-
-    .item {
-      &__side {
-        text-align: center;
-        width: 260px;
-        display: flex;
-        flex-direction: column;
-        height: 100%;
-      }
-
-      &__main {
-        flex: 1;
-        margin-left: 16px;
-        overflow: auto;
-      }
-
-      &__title {
-        font-size: 30px;
-        word-break: break-all;
-        color: var(--b3-theme-on-background);
-      }
-
-      &__nav {
-        text-align: center;
-        flex: 1;
-        line-height: 26px;
-        font-size: 16px;
-        color: var(--b3-theme-on-surface);
-      }
-
-      &__preview {
-        width: 100%;
-        height: 50%;
-        background-position: center center;
-        background-repeat: no-repeat;
-        background-size: cover;
-        border-radius: 4px;
-        margin-bottom: 16px;
-        cursor: pointer;
-        left: 0;
-        top: 0;
-        transition: var(--b3-transition);
-
-        &--fullscreen {
-          position: absolute;
-          z-index: 1;
-          height: 100%;
-          background-size: contain;
-          background-color: var(--b3-mask-background);
-        }
-      }
-    }
-  }
-}
-
 .asset {
   overflow: auto;
   box-sizing: border-box;
@@ -646,4 +418,4 @@ html {
 }
 
 // 需放置最后，否则 https://github.com/siyuan-note/siyuan/issues/7056
-@import "responsive";
+@import "util/responsive";
diff --git a/app/src/assets/scss/_block.scss b/app/src/assets/scss/business/_block.scss
similarity index 100%
rename from app/src/assets/scss/_block.scss
rename to app/src/assets/scss/business/_block.scss
diff --git a/app/src/assets/scss/business/_color.scss b/app/src/assets/scss/business/_color.scss
new file mode 100644
index 000000000..ef4f45222
--- /dev/null
+++ b/app/src/assets/scss/business/_color.scss
@@ -0,0 +1,21 @@
+.color__square {
+  height: 16px;
+  margin-right: 4px;
+  width: 16px;
+  border: 0;
+  transition: var(--b3-transition);
+  box-shadow: 0 0 0 2px var(--b3-theme-surface-lighter) inset;
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  justify-content: center;
+  background-color: var(--b3-theme-background);
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:hover {
+    box-shadow: 0 0 0 1px var(--b3-theme-on-background) inset, 0 0 0 2px var(--b3-theme-background) inset;
+  }
+}
diff --git a/app/src/assets/scss/business/_config.scss b/app/src/assets/scss/business/_config.scss
new file mode 100644
index 000000000..d60f8300b
--- /dev/null
+++ b/app/src/assets/scss/business/_config.scss
@@ -0,0 +1,220 @@
+.config {
+  &__tab-container {
+    overflow: auto;
+    box-sizing: border-box;
+    flex: 1;
+    background-color: var(--b3-theme-background);
+
+    .b3-label {
+      padding: 16px 0;
+      margin: 0 24px;
+    }
+  }
+  &__panel {
+    & > .b3-tab-bar {
+      user-select: none;
+      width: 180px;
+      overflow: auto;
+      padding: 8px 0;
+      box-sizing: border-box
+    }
+  }
+
+  &-query {
+    display: flex;
+    flex-wrap: wrap;
+
+    label {
+      width: 16%;
+      margin: 8px 17% 0 0;
+      color: var(--b3-theme-on-surface);
+      align-items: center;
+    }
+  }
+
+  &-repos__sync {
+    margin: 0 0 -16px 16px;
+    overflow: hidden;
+    max-height: 180px;
+    display: flex;
+    flex-direction: column;
+    padding-bottom: 16px;
+  }
+
+  &-account {
+    height: 100%;
+
+    &__center {
+      flex-direction: column;
+      justify-content: center;
+      flex: 1;
+      display: flex;
+      min-width: 1px;
+      align-items: center;
+
+      &--text {
+        background-color: var(--b3-theme-surface);
+        padding: 16px 24px;
+
+        .b3-button--outline {
+          white-space: normal;
+        }
+      }
+    }
+
+    &__form {
+      max-width: 298px;
+      width: 100%;
+    }
+
+    &__bg {
+      position: relative;
+      margin-bottom: 82px;
+      width: 100%;
+      flex: 1;
+      min-height: 128px;
+    }
+
+    &__info {
+      width: 100%;
+      box-sizing: border-box;
+      padding: 16px 24px;
+    }
+
+    &__cover {
+      position: absolute;
+      top: 0;
+      width: 100%;
+      height: 100%;
+      background-size: cover;
+      background-position: center center;
+    }
+
+    &__avatar {
+      position: absolute;
+      bottom: 24px;
+      width: 128px;
+      height: 128px;
+      left: 50%;
+      margin-left: -64px;
+      background-repeat: no-repeat;
+      background-position: 50%;
+      background-size: cover;
+      border-radius: 90px;
+      background-color: rgba(255, 255, 255, 0.8);
+      box-shadow: var(--b3-point-shadow);
+      border: 1px solid var(--b3-theme-surface-lighter);
+    }
+
+    &__name {
+      bottom: -58px;
+      position: absolute;
+      width: 100%;
+      text-align: center;
+    }
+  }
+
+  &-about__logo {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+
+    img {
+      height: 24px;
+      width: 24px;
+      margin-right: 8px;
+    }
+  }
+
+  &-assets {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-sizing: border-box;
+
+    #assetsList {
+      overflow: auto;
+      flex: 1;
+    }
+
+    &__preview {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+      justify-content: center;
+      overflow: auto;
+      flex: 1;
+      margin-top: 8px;
+    }
+  }
+
+  &-keymap li .b3-text-field {
+    width: 124px;
+    text-align: center;
+  }
+
+  &-bazaar__readme {
+    position: absolute;
+    transition: var(--b3-transition);
+    right: -100%;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    background-color: var(--b3-theme-background);
+    display: flex;
+    padding: 16px;
+    box-sizing: border-box;
+
+    .item {
+      &__side {
+        text-align: center;
+        width: 260px;
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+      }
+
+      &__main {
+        flex: 1;
+        margin-left: 16px;
+        overflow: auto;
+      }
+
+      &__title {
+        font-size: 30px;
+        word-break: break-all;
+        color: var(--b3-theme-on-background);
+      }
+
+      &__nav {
+        text-align: center;
+        flex: 1;
+        line-height: 26px;
+        font-size: 16px;
+        color: var(--b3-theme-on-surface);
+      }
+
+      &__preview {
+        width: 100%;
+        height: 50%;
+        background-position: center center;
+        background-repeat: no-repeat;
+        background-size: cover;
+        border-radius: 4px;
+        margin-bottom: 16px;
+        cursor: pointer;
+        left: 0;
+        top: 0;
+        transition: var(--b3-transition);
+
+        &--fullscreen {
+          position: absolute;
+          z-index: 1;
+          height: 100%;
+          background-size: contain;
+          background-color: var(--b3-mask-background);
+        }
+      }
+    }
+  }
+}
diff --git a/app/src/assets/scss/_graph.scss b/app/src/assets/scss/business/_graph.scss
similarity index 100%
rename from app/src/assets/scss/_graph.scss
rename to app/src/assets/scss/business/_graph.scss
diff --git a/app/src/assets/scss/business/_history.scss b/app/src/assets/scss/business/_history.scss
new file mode 100644
index 000000000..b16809a2f
--- /dev/null
+++ b/app/src/assets/scss/business/_history.scss
@@ -0,0 +1,45 @@
+.history {
+  &__text {
+    background-color: var(--b3-theme-background);
+    padding: 16px;
+    box-sizing: border-box;
+    border: 0;
+    border-radius: 0 0 4px 0;
+    resize: none;
+    color: var(--b3-theme-on-background);
+  }
+
+  &__repo {
+    background-color: var(--b3-theme-background);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: 0 0 4px 4px;
+    overflow: hidden;
+
+    .b3-chip--secondary {
+      padding: 0 8px;
+      font-size: 12px;
+      line-height: 16px;
+      margin-right: 8px;
+    }
+  }
+
+  &__repoheader {
+    padding: 8px 16px;
+    flex-wrap: wrap;
+
+    .block__icon {
+      opacity: 1;
+      z-index: 1;
+    }
+  }
+
+  &__date {
+    text-align: center;
+    line-height: 20px;
+    color: var(--b3-theme-on-surface);
+    background: var(--b3-theme-background);
+  }
+}
diff --git a/app/src/assets/scss/_layout.scss b/app/src/assets/scss/business/_layout.scss
similarity index 100%
rename from app/src/assets/scss/_layout.scss
rename to app/src/assets/scss/business/_layout.scss
diff --git a/app/src/assets/scss/_search.scss b/app/src/assets/scss/business/_search.scss
similarity index 100%
rename from app/src/assets/scss/_search.scss
rename to app/src/assets/scss/business/_search.scss
diff --git a/app/src/assets/scss/_button.scss b/app/src/assets/scss/component/_button.scss
similarity index 100%
rename from app/src/assets/scss/_button.scss
rename to app/src/assets/scss/component/_button.scss
diff --git a/app/src/assets/scss/_card.scss b/app/src/assets/scss/component/_card.scss
similarity index 100%
rename from app/src/assets/scss/_card.scss
rename to app/src/assets/scss/component/_card.scss
diff --git a/app/src/assets/scss/_chip.scss b/app/src/assets/scss/component/_chip.scss
similarity index 100%
rename from app/src/assets/scss/_chip.scss
rename to app/src/assets/scss/component/_chip.scss
diff --git a/app/src/assets/scss/_dialog.scss b/app/src/assets/scss/component/_dialog.scss
similarity index 100%
rename from app/src/assets/scss/_dialog.scss
rename to app/src/assets/scss/component/_dialog.scss
diff --git a/app/src/assets/scss/_form.scss b/app/src/assets/scss/component/_form.scss
similarity index 100%
rename from app/src/assets/scss/_form.scss
rename to app/src/assets/scss/component/_form.scss
diff --git a/app/src/assets/scss/_list.scss b/app/src/assets/scss/component/_list.scss
similarity index 100%
rename from app/src/assets/scss/_list.scss
rename to app/src/assets/scss/component/_list.scss
diff --git a/app/src/assets/scss/_menu.scss b/app/src/assets/scss/component/_menu.scss
similarity index 100%
rename from app/src/assets/scss/_menu.scss
rename to app/src/assets/scss/component/_menu.scss
diff --git a/app/src/assets/scss/_select.scss b/app/src/assets/scss/component/_select.scss
similarity index 100%
rename from app/src/assets/scss/_select.scss
rename to app/src/assets/scss/component/_select.scss
diff --git a/app/src/assets/scss/_slider.scss b/app/src/assets/scss/component/_slider.scss
similarity index 100%
rename from app/src/assets/scss/_slider.scss
rename to app/src/assets/scss/component/_slider.scss
diff --git a/app/src/assets/scss/_snackbar.scss b/app/src/assets/scss/component/_snackbar.scss
similarity index 100%
rename from app/src/assets/scss/_snackbar.scss
rename to app/src/assets/scss/component/_snackbar.scss
diff --git a/app/src/assets/scss/_switch.scss b/app/src/assets/scss/component/_switch.scss
similarity index 100%
rename from app/src/assets/scss/_switch.scss
rename to app/src/assets/scss/component/_switch.scss
diff --git a/app/src/assets/scss/_text-field.scss b/app/src/assets/scss/component/_text-field.scss
similarity index 100%
rename from app/src/assets/scss/_text-field.scss
rename to app/src/assets/scss/component/_text-field.scss
diff --git a/app/src/assets/scss/_tooltips.scss b/app/src/assets/scss/component/_tooltips.scss
similarity index 100%
rename from app/src/assets/scss/_tooltips.scss
rename to app/src/assets/scss/component/_tooltips.scss
diff --git a/app/src/assets/scss/_typography.scss b/app/src/assets/scss/component/_typography.scss
similarity index 100%
rename from app/src/assets/scss/_typography.scss
rename to app/src/assets/scss/component/_typography.scss
diff --git a/app/src/assets/scss/export.scss b/app/src/assets/scss/export.scss
index e60908901..4c55e0758 100644
--- a/app/src/assets/scss/export.scss
+++ b/app/src/assets/scss/export.scss
@@ -1,12 +1,13 @@
-@import "mixin";
-@import "tooltips";
-@import "typography";
-@import "wysiwyg";
-@import "function";
-@import "button";
-@import "select";
-@import "switch";
-@import "slider";
+@import "util/mixin";
+@import "component/tooltips";
+@import "component/typography";
+@import "protyle/wysiwyg";
+@import "util/function";
+@import "business/history";
+@import "component/button";
+@import "component/select";
+@import "component/switch";
+@import "component/slider";
 
 .protyle-wysiwyg {
   font-family: var(--b3-font-family);
diff --git a/app/src/assets/scss/mobile.scss b/app/src/assets/scss/mobile.scss
index 3ad59a297..7e540102f 100644
--- a/app/src/assets/scss/mobile.scss
+++ b/app/src/assets/scss/mobile.scss
@@ -1,27 +1,26 @@
-@import "keyframes";
-@import "mixin";
-@import "chip";
-@import "slider";
-@import "switch";
-@import "dialog";
-@import "button";
-@import "menu";
-@import "snackbar";
-@import "form";
-@import "text-field";
-@import "select";
-@import "list";
-@import "tab";
-@import "graph";
-@import "layout";
-@import "block";
-@import "reset";
-@import "function";
-@import "color";
-// un refactor
-@import "protyle";
-@import "typography";
-@import "viewer";
+@import "util/keyframes";
+@import "util/mixin";
+@import "component/chip";
+@import "component/slider";
+@import "component/switch";
+@import "component/dialog";
+@import "component/button";
+@import "component/menu";
+@import "component/snackbar";
+@import "component/form";
+@import "component/text-field";
+@import "component/select";
+@import "component/list";
+@import "business/graph";
+@import "business/layout";
+@import "business/block";
+@import "util/reset";
+@import "util/function";
+@import "business/history";
+@import "business/color";
+@import "protyle/protyle";
+@import "component/typography";
+@import "viewerjs/viewer";
 
 .block__popover {
   width: 80vw;
@@ -331,4 +330,4 @@
   }
 }
 
-@import "responsive";
+@import "util/responsive";
diff --git a/app/src/assets/scss/pickr/pcr.scss b/app/src/assets/scss/pickr/pcr.scss
new file mode 100644
index 000000000..503815eaf
--- /dev/null
+++ b/app/src/assets/scss/pickr/pcr.scss
@@ -0,0 +1,19 @@
+.pcr-app {
+  box-shadow: var(--b3-dialog-shadow);
+  border: 1px solid var(--b3-theme-surface-lighter);
+  border-radius: 4px;
+
+  .pcr-interaction .pcr-result {
+    @extend .b3-text-field;
+    background: transparent;
+    font-size: 12px;
+  }
+
+  .pcr-selection .pcr-picker {
+    height: 16px;
+    width: 16px;
+    border: 1px solid var(--b3-theme-surface-lighter);
+    box-shadow: var(--b3-point-shadow);
+    transition: transform 100ms ease-out;
+  }
+}
diff --git a/app/src/assets/scss/_content.scss b/app/src/assets/scss/protyle/_content.scss
similarity index 100%
rename from app/src/assets/scss/_content.scss
rename to app/src/assets/scss/protyle/_content.scss
diff --git a/app/src/assets/scss/_protyle.scss b/app/src/assets/scss/protyle/_protyle.scss
similarity index 99%
rename from app/src/assets/scss/_protyle.scss
rename to app/src/assets/scss/protyle/_protyle.scss
index bf3eae29a..b7d846ef9 100644
--- a/app/src/assets/scss/_protyle.scss
+++ b/app/src/assets/scss/protyle/_protyle.scss
@@ -1,7 +1,6 @@
 @import "content";
 @import "toolbar";
 @import "wysiwyg";
-@import "search";
 
 .protyle-scroll {
   --b3-dynamicscroll-width: 200px;
diff --git a/app/src/assets/scss/_toolbar.scss b/app/src/assets/scss/protyle/_toolbar.scss
similarity index 100%
rename from app/src/assets/scss/_toolbar.scss
rename to app/src/assets/scss/protyle/_toolbar.scss
diff --git a/app/src/assets/scss/_wysiwyg.scss b/app/src/assets/scss/protyle/_wysiwyg.scss
similarity index 100%
rename from app/src/assets/scss/_wysiwyg.scss
rename to app/src/assets/scss/protyle/_wysiwyg.scss
diff --git a/app/src/assets/scss/_function.scss b/app/src/assets/scss/util/_function.scss
similarity index 73%
rename from app/src/assets/scss/_function.scss
rename to app/src/assets/scss/util/_function.scss
index 99e806dc6..bc410f810 100644
--- a/app/src/assets/scss/_function.scss
+++ b/app/src/assets/scss/util/_function.scss
@@ -164,49 +164,3 @@
     color: var(--b3-theme-secondary);
   }
 }
-
-.history {
-  &__text {
-    background-color: var(--b3-theme-background);
-    padding: 16px;
-    box-sizing: border-box;
-    border: 0;
-    border-radius: 0 0 4px 0;
-    resize: none;
-    color: var(--b3-theme-on-background);
-  }
-
-  &__repo {
-    background-color: var(--b3-theme-background);
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    box-sizing: border-box;
-    border-radius: 0 0 4px 4px;
-    overflow: hidden;
-
-    .b3-chip--secondary {
-      padding: 0 8px;
-      font-size: 12px;
-      line-height: 16px;
-      margin-right: 8px;
-    }
-  }
-
-  &__repoheader {
-    padding: 8px 16px;
-    flex-wrap: wrap;
-
-    .block__icon {
-      opacity: 1;
-      z-index: 1;
-    }
-  }
-
-  &__date {
-    text-align: center;
-    line-height: 20px;
-    color: var(--b3-theme-on-surface);
-    background: var(--b3-theme-background);
-  }
-}
diff --git a/app/src/assets/scss/_keyframes.scss b/app/src/assets/scss/util/_keyframes.scss
similarity index 100%
rename from app/src/assets/scss/_keyframes.scss
rename to app/src/assets/scss/util/_keyframes.scss
diff --git a/app/src/assets/scss/_mixin.scss b/app/src/assets/scss/util/_mixin.scss
similarity index 100%
rename from app/src/assets/scss/_mixin.scss
rename to app/src/assets/scss/util/_mixin.scss
diff --git a/app/src/assets/scss/_reset.scss b/app/src/assets/scss/util/_reset.scss
similarity index 100%
rename from app/src/assets/scss/_reset.scss
rename to app/src/assets/scss/util/_reset.scss
diff --git a/app/src/assets/scss/_responsive.scss b/app/src/assets/scss/util/_responsive.scss
similarity index 100%
rename from app/src/assets/scss/_responsive.scss
rename to app/src/assets/scss/util/_responsive.scss
diff --git a/app/src/assets/scss/_scroll.scss b/app/src/assets/scss/util/_scroll.scss
similarity index 100%
rename from app/src/assets/scss/_scroll.scss
rename to app/src/assets/scss/util/_scroll.scss
diff --git a/app/src/assets/scss/_viewer.scss b/app/src/assets/scss/viewerjs/_viewer.scss
similarity index 100%
rename from app/src/assets/scss/_viewer.scss
rename to app/src/assets/scss/viewerjs/_viewer.scss
diff --git a/app/src/card/openCard.ts b/app/src/card/openCard.ts
index 8078de6bc..11be56753 100644
--- a/app/src/card/openCard.ts
+++ b/app/src/card/openCard.ts
@@ -61,7 +61,10 @@ export const openCardByData = (cardsData: ICard[], html = "") => {
     <div class="fn__flex b3-dialog__cardaction fn__none">
         <div>
             <span></span>
-            <button data-type="0" aria-label="1 / j" class="b3-button b3-button--error b3-tooltips__s b3-tooltips">Again</button>
+            <button data-type="0" aria-label="1 / j" class="b3-button b3-button--error b3-tooltips__s b3-tooltips">
+                <span class="">❌</span>
+                Again
+            </button>
         </div>
         <span class="fn__flex-1"></span>
         <div>
diff --git a/app/src/config/index.ts b/app/src/config/index.ts
index ef6d999cf..7f3e3876c 100644
--- a/app/src/config/index.ts
+++ b/app/src/config/index.ts
@@ -14,7 +14,7 @@ import {Dialog} from "../dialog";
 
 export const openSetting = () => {
     const exitDialog = window.siyuan.dialogs.find((item) => {
-        if (item.element.querySelector(".b3-tab-container")) {
+        if (item.element.querySelector(".config__tab-container")) {
             item.destroy();
             return true;
         }
@@ -40,17 +40,17 @@ export const openSetting = () => {
     <li data-name="repos" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconCloud"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.cloud}</span></li>
     <li data-name="about" class="b3-list-item b3-list-item--big"><svg class="b3-list-item__graphic"><use xlink:href="#iconInfo"></use></svg><span class="b3-list-item__text">${window.siyuan.languages.about}</span></li>
   </ul>
-  <div class="b3-tab-container" style="height:${height}px" data-name="editor">${editor.genHTML()}</div>
-  <div class="b3-tab-container fn__none" style="height:${height}px" data-name="filetree"></div>
-  <div class="b3-tab-container fn__none" style="height:${height}px" data-name="image"></div>
-  <div class="b3-tab-container fn__none" style="height:${height}px" data-name="export"></div>
-  <div class="b3-tab-container fn__none" style="height:${height}px" data-name="appearance"></div>
-  <div class="b3-tab-container fn__none" style="height:${height}px" data-name="bazaar"></div>
-  <div class="b3-tab-container fn__none" style="height:${height}px" data-name="search"></div>
-  <div class="b3-tab-container fn__none" style="height:${height}px;overflow: scroll" data-name="keymap"></div>
-  <div class="b3-tab-container fn__none" style="height:${height}px" data-name="account"></div>
-  <div class="b3-tab-container fn__none" style="height:${height}px" data-name="repos"></div>
-  <div class="b3-tab-container fn__none" style="height:${height}px" data-name="about"></div>
+  <div class="config__tab-container" style="height:${height}px" data-name="editor">${editor.genHTML()}</div>
+  <div class="config__tab-container fn__none" style="height:${height}px" data-name="filetree"></div>
+  <div class="config__tab-container fn__none" style="height:${height}px" data-name="image"></div>
+  <div class="config__tab-container fn__none" style="height:${height}px" data-name="export"></div>
+  <div class="config__tab-container fn__none" style="height:${height}px" data-name="appearance"></div>
+  <div class="config__tab-container fn__none" style="height:${height}px" data-name="bazaar"></div>
+  <div class="config__tab-container fn__none" style="height:${height}px" data-name="search"></div>
+  <div class="config__tab-container fn__none" style="height:${height}px;overflow: scroll" data-name="keymap"></div>
+  <div class="config__tab-container fn__none" style="height:${height}px" data-name="account"></div>
+  <div class="config__tab-container fn__none" style="height:${height}px" data-name="repos"></div>
+  <div class="config__tab-container fn__none" style="height:${height}px" data-name="about"></div>
 </div>
 </div>`,
         width: "90vw",
@@ -61,8 +61,8 @@ export const openSetting = () => {
     dialog.element.querySelectorAll(".b3-tab-bar .b3-list-item").forEach(item => {
         item.addEventListener("click", () => {
             const type = item.getAttribute("data-name");
-            const containerElement = dialog.element.querySelector(`.b3-tab-container[data-name="${type}"]`);
-            dialog.element.querySelectorAll(".b3-tab-container").forEach((container) => {
+            const containerElement = dialog.element.querySelector(`.config__tab-container[data-name="${type}"]`);
+            dialog.element.querySelectorAll(".config__tab-container").forEach((container) => {
                 container.classList.add("fn__none");
             });
             dialog.element.querySelector(".b3-tab-bar .b3-list-item.b3-list-item--focus").classList.remove("b3-list-item--focus");
@@ -72,52 +72,52 @@ export const openSetting = () => {
                 switch (type) {
                     case "filetree":
                         containerElement.innerHTML = fileTree.genHTML();
-                        fileTree.element = dialog.element.querySelector('.b3-tab-container[data-name="filetree"]');
+                        fileTree.element = dialog.element.querySelector('.config__tab-container[data-name="filetree"]');
                         fileTree.bindEvent();
                         break;
                     case "image":
                         containerElement.innerHTML = image.genHTML();
-                        image.element = dialog.element.querySelector('.b3-tab-container[data-name="image"]');
+                        image.element = dialog.element.querySelector('.config__tab-container[data-name="image"]');
                         image.bindEvent();
                         break;
                     case "export":
                         containerElement.innerHTML = exportConfig.genHTML();
-                        exportConfig.element = dialog.element.querySelector('.b3-tab-container[data-name="export"]');
+                        exportConfig.element = dialog.element.querySelector('.config__tab-container[data-name="export"]');
                         exportConfig.bindEvent();
                         break;
                     case "appearance":
                         containerElement.innerHTML = appearance.genHTML();
-                        appearance.element = dialog.element.querySelector('.b3-tab-container[data-name="appearance"]');
+                        appearance.element = dialog.element.querySelector('.config__tab-container[data-name="appearance"]');
                         appearance.bindEvent();
                         break;
                     case "keymap":
                         containerElement.innerHTML = keymap.genHTML();
-                        keymap.element = dialog.element.querySelector('.b3-tab-container[data-name="keymap"]');
+                        keymap.element = dialog.element.querySelector('.config__tab-container[data-name="keymap"]');
                         keymap.bindEvent();
                         break;
                     case "bazaar":
-                        bazaar.element = dialog.element.querySelector('.b3-tab-container[data-name="bazaar"]');
+                        bazaar.element = dialog.element.querySelector('.config__tab-container[data-name="bazaar"]');
                         containerElement.innerHTML = bazaar.genHTML();
                         bazaar.bindEvent();
                         break;
                     case "account":
                         containerElement.innerHTML = account.genHTML();
-                        account.element = dialog.element.querySelector('.b3-tab-container[data-name="account"]');
+                        account.element = dialog.element.querySelector('.config__tab-container[data-name="account"]');
                         account.bindEvent(account.element);
                         break;
                     case "repos":
                         containerElement.innerHTML = repos.genHTML();
-                        repos.element = dialog.element.querySelector('.b3-tab-container[data-name="repos"]');
+                        repos.element = dialog.element.querySelector('.config__tab-container[data-name="repos"]');
                         repos.bindEvent();
                         break;
                     case "about":
                         containerElement.innerHTML = about.genHTML();
-                        about.element = dialog.element.querySelector('.b3-tab-container[data-name="about"]');
+                        about.element = dialog.element.querySelector('.config__tab-container[data-name="about"]');
                         about.bindEvent();
                         break;
                     case "search":
                         containerElement.innerHTML = query.genHTML();
-                        query.element = dialog.element.querySelector('.b3-tab-container[data-name="search"]');
+                        query.element = dialog.element.querySelector('.config__tab-container[data-name="search"]');
                         query.bindEvent();
                         break;
                     default:
@@ -126,7 +126,7 @@ export const openSetting = () => {
             }
         });
     });
-    editor.element = dialog.element.querySelector('.b3-tab-container[data-name="editor"]');
+    editor.element = dialog.element.querySelector('.config__tab-container[data-name="editor"]');
     editor.bindEvent();
     return dialog;
 };
diff --git a/app/src/config/search.ts b/app/src/config/search.ts
index 4811f02eb..5c1b414ff 100644
--- a/app/src/config/search.ts
+++ b/app/src/config/search.ts
@@ -107,7 +107,7 @@ export const initConfigSearch = (element: HTMLElement) => {
             }
         });
 
-        const tabPanelElements = element.querySelectorAll(".b3-tab-container");
+        const tabPanelElements = element.querySelectorAll(".config__tab-container");
         if (currentTabElement) {
             currentTabElement.click();
         } else {
diff --git a/app/src/protyle/gutter/index.ts b/app/src/protyle/gutter/index.ts
index 22ba309ba..f60873df9 100644
--- a/app/src/protyle/gutter/index.ts
+++ b/app/src/protyle/gutter/index.ts
@@ -1575,7 +1575,7 @@ export class Gutter {
             "var(--b3-font-background13)"].forEach((item, index) => {
             styles.push({
                 label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.colorPrimary} ${index + 1}">
-    <span style="background-color:${item};" class="b3-color__square fn__flex-center"></span>
+    <span style="background-color:${item};" class="color__square fn__flex-center"></span>
 </div>`,
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
@@ -1589,7 +1589,7 @@ export class Gutter {
         });
         styles.push({
             label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.clearFontStyle}">
-    <span class="b3-color__square fn__flex-center">A</span>
+    <span class="color__square fn__flex-center">A</span>
 </div>`,
             click: () => {
                 this.genClick(nodeElements, protyle, (e: HTMLElement) => {
@@ -1690,7 +1690,7 @@ export class Gutter {
             "var(--b3-font-color13)"].forEach((item, index) => {
             styles.push({
                 label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.colorFont} ${index + 1}">
-    <span style="color:${item};" class="b3-color__square fn__flex-center">A</span>
+    <span style="color:${item};" class="color__square fn__flex-center">A</span>
 </div>`,
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
@@ -1710,7 +1710,7 @@ export class Gutter {
         ["error", "warning", "info", "success"].forEach((item) => {
             styles.push({
                 label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages[item + "Style"]}">
-    <span style="color: var(--b3-card-${item}-color);background-color: var(--b3-card-${item}-background);" class="b3-color__square fn__flex-center">A</span>    
+    <span style="color: var(--b3-card-${item}-color);background-color: var(--b3-card-${item}-background);" class="color__square fn__flex-center">A</span>    
 </div>`,
                 click: () => {
                     this.genClick(nodeElements, protyle, (e: HTMLElement) => {
@@ -1725,7 +1725,7 @@ export class Gutter {
         });
         return styles.concat([{
             label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.hollow}">
-    <span style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;" class="b3-color__square fn__flex-center">A</span>
+    <span style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;" class="color__square fn__flex-center">A</span>
 </div>`,
             click: () => {
                 this.genClick(nodeElements, protyle, (e: HTMLElement) => {
@@ -1735,7 +1735,7 @@ export class Gutter {
             }
         }, {
             label: `<div class="fn__flex" data-type="a" aria-label="${window.siyuan.languages.shadow}">
-    <span style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)" class="b3-color__square fn__flex-center">A</span>
+    <span style="text-shadow: 1px 1px var(--b3-theme-surface-lighter), 2px 2px var(--b3-theme-surface-lighter), 3px 3px var(--b3-theme-surface-lighter), 4px 4px var(--b3-theme-surface-lighter)" class="color__square fn__flex-center">A</span>
 </div>`,
             click: () => {
                 this.genClick(nodeElements, protyle, (e: HTMLElement) => {
diff --git a/app/src/protyle/hint/extend.ts b/app/src/protyle/hint/extend.ts
index 94af63825..b3fce4fdf 100644
--- a/app/src/protyle/hint/extend.ts
+++ b/app/src/protyle/hint/extend.ts
@@ -215,23 +215,23 @@ export const hintSlash = (key: string, protyle: IProtyle) => {
     }, {
         filter: ["信息样式", "xinxiyangshi", "xxys", "info style"],
         value: `style${Constants.ZWSP}color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);`,
-        html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);" class="b3-color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.infoStyle}</span></div>`,
+        html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-info-color);background-color: var(--b3-card-info-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.infoStyle}</span></div>`,
     }, {
         filter: ["成功样式", "chenggongyangshi", "cgys", "success style"],
         value: `style${Constants.ZWSP}color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);`,
-        html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);" class="b3-color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.successStyle}</span></div>`,
+        html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-success-color);background-color: var(--b3-card-success-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.successStyle}</span></div>`,
     }, {
         filter: ["警告样式", "jinggaoyangshi", "jgys", "warning style"],
         value: `style${Constants.ZWSP}color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);`,
-        html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);" class="b3-color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.warningStyle}</span></div>`,
+        html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-warning-color);background-color: var(--b3-card-warning-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.warningStyle}</span></div>`,
     }, {
         filter: ["错误样式", "cuowuyangshi", "cwys", "error style"],
         value: `style${Constants.ZWSP}color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);`,
-        html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);" class="b3-color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.errorStyle}</span></div>`,
+        html: `<div class="b3-list-item__first"><div style="color: var(--b3-card-error-color);background-color: var(--b3-card-error-background);" class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.errorStyle}</span></div>`,
     }, {
         filter: ["移除样式", "yichuyangshi", "ycys", "remove style"],
         value: `style${Constants.ZWSP}`,
-        html: `<div class="b3-list-item__first"><div class="b3-color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.clearFontStyle}</span></div>`,
+        html: `<div class="b3-list-item__first"><div class="color__square">A</div><span class="b3-list-item__text">${window.siyuan.languages.clearFontStyle}</span></div>`,
     }];
     allList.splice(1, 0, {
         filter: ["挂件", "widget", "gj", "guajian"],
diff --git a/app/src/protyle/toolbar/Font.ts b/app/src/protyle/toolbar/Font.ts
index fd1b4aa0d..2e040f498 100644
--- a/app/src/protyle/toolbar/Font.ts
+++ b/app/src/protyle/toolbar/Font.ts
@@ -34,14 +34,14 @@ const fontMenu = (protyle: IProtyle) => {
         "var(--b3-font-color5)", "var(--b3-font-color6)", "var(--b3-font-color7)", "var(--b3-font-color8)",
         "var(--b3-font-color9)", "var(--b3-font-color10)", "var(--b3-font-color11)", "var(--b3-font-color12)",
         "var(--b3-font-color13)"].forEach((item) => {
-        colorHTML += `<button class="b3-color__square" data-type="color" style="color:${item}">A</button>`;
+        colorHTML += `<button class="color__square" data-type="color" style="color:${item}">A</button>`;
     });
     let bgHTML = "";
     ["var(--b3-font-background1)", "var(--b3-font-background2)", "var(--b3-font-background3)", "var(--b3-font-background4)",
         "var(--b3-font-background5)", "var(--b3-font-background6)", "var(--b3-font-background7)", "var(--b3-font-background8)",
         "var(--b3-font-background9)", "var(--b3-font-background10)", "var(--b3-font-background11)", "var(--b3-font-background12)",
         "var(--b3-font-background13)"].forEach((item) => {
-        bgHTML += `<button class="b3-color__square" data-type="backgroundColor" style="background-color:${item}"></button>`;
+        bgHTML += `<button class="color__square" data-type="backgroundColor" style="background-color:${item}"></button>`;
     });
 
     const element = document.createElement("div");
@@ -57,10 +57,10 @@ const fontMenu = (protyle: IProtyle) => {
             const lastFontStatus = item.split(Constants.ZWSP);
             switch (lastFontStatus[0]) {
                 case "color":
-                    lastColorHTML += `<button class="b3-color__square" data-type="${lastFontStatus[0]}" style="color:${lastFontStatus[1]}">A</button>`;
+                    lastColorHTML += `<button class="color__square" data-type="${lastFontStatus[0]}" style="color:${lastFontStatus[1]}">A</button>`;
                     break;
                 case "backgroundColor":
-                    lastColorHTML += `<button class="b3-color__square" data-type="${lastFontStatus[0]}" style="background-color:${lastFontStatus[1]}"></button>`;
+                    lastColorHTML += `<button class="color__square" data-type="${lastFontStatus[0]}" style="background-color:${lastFontStatus[1]}"></button>`;
                     break;
                 case "style2":
                     lastColorHTML += `<button data-type="${lastFontStatus[0]}" class="protyle-font__style" style="-webkit-text-stroke: 0.2px var(--b3-theme-on-background);-webkit-text-fill-color : transparent;">${window.siyuan.languages.hollow}</button>`;