diff --git a/demo/documentation/components/modal/enUS/basic.md b/demo/documentation/components/modal/enUS/basic.md
index b33e55db8..e8eeb12b6 100644
--- a/demo/documentation/components/modal/enUS/basic.md
+++ b/demo/documentation/components/modal/enUS/basic.md
@@ -7,7 +7,7 @@
   Start Me up
 </n-button>
 <n-modal v-model="isActive">
-  <div style="background: hsl(226, 21%, 33%); padding: 24px; border-radius: 8px; color: white;">
+  <div style="background: rgb(46, 52, 68); padding: 24px; border-radius: 8px; color: white;">
     <div>If you start me up, If you start me up, I'll never stop.</div>
     <n-input v-model="inputValue" />
     inputValue: {{ inputValue }}<br>
diff --git a/demo/styles/ComponentDemo.scss b/demo/styles/ComponentDemo.scss
index 72c408d82..8fec60e4e 100644
--- a/demo/styles/ComponentDemo.scss
+++ b/demo/styles/ComponentDemo.scss
@@ -3,9 +3,9 @@
 
 @include themes-mixin {
   @include b(code-box) {
-    background-color: $service-layout-drawer-background-color;
-    border-color: $service-layout-border-color;
-    box-shadow: inset 0 0 0 1px $--n-divider-color;
+    background-color: $--n-card-color;
+    border: 1px solid $--n-divider-color;
+    background-clip: padding-box;
     @include e(code) {
       border-top: 1px solid $--n-divider-color;
       code {
diff --git a/demo/styles/markdown.scss b/demo/styles/markdown.scss
index 7c59bdb66..44362e8d9 100644
--- a/demo/styles/markdown.scss
+++ b/demo/styles/markdown.scss
@@ -1,72 +1,85 @@
-.n-app--light-theme .markdown {
-  code {
-    background-color: rgb(244, 244, 244);
-    border: 1px solid rgb(230, 230, 230);
-  }
-  table {
-    border: 1px solid rgba(34,36,38,.15);
-    th {
-      background: rgb(250, 250, 250);      
-    }
-    td {
-      background-color: white;
-    }
-  }
-}
+@import '../../styles/mixins/config.scss';
+@import '../../styles/mixins/mixins.scss';
 
-.markdown {
-  h1, h2, h3, h4, h5, h6 {
-    margin: 0;
-  }
-  h1 {
-    font-size: 24px;
-    margin-bottom: 12px;
-  }
-  h2 {
-    font-size: 20px;
-    margin-top: 24px;
-    margin-bottom: 12px;
-  }
-  p {
-    margin: 0 0 16px 0;
-    font-size: 14px;
-    line-height: 2;
-  }
-  code {
-    box-sizing: border-box;
-    border-radius: 3px;
-    background-color: rgba(255, 255, 255, .09);
-    padding: .2em .4em;
-    font-size: 14px;
-    font-family: 'Lato';
-  }
-  table {
-    font-size: 14px;
-    width: 100%;
-    border: 1px solid #40465b;
-    border-radius: 6px;
-    text-align: left;
-    border-collapse: separate;
-    border-spacing: 0;
-    overflow: hidden;
-    th {
-      background-color: hsl(226, 27%, 25%);
-      text-align: inherit;
-      padding: 14px 12px;
-      vertical-align: inherit;
-      font-style: none;
-      font-weight: 400;
-      text-transform: none;
-      border-bottom: 1px solid rgba(34,36,38,.1);
-      border-left: none;
-      font-weight: bold;
+@include themes-mixin {
+  @if $theme == 'dark' {
+    .markdown {
+      h1, h2, h3, h4, h5, h6 {
+        margin: 0;
+      }
+      h1 {
+        font-size: 24px;
+        margin-bottom: 12px;
+      }
+      h2 {
+        font-size: 20px;
+        margin-top: 24px;
+        margin-bottom: 12px;
+      }
+      p {
+        margin: 0 0 16px 0;
+        font-size: 14px;
+        line-height: 2;
+      }
+      code {
+        box-sizing: border-box;
+        border-radius: 3px;
+        background-color: $--n-alpha-table-header-color;
+        padding: .2em .4em;
+        font-size: 14px;
+        font-family: 'Lato';
+      }
+      table {
+        font-size: 14px;
+        width: 100%;
+        border: 1px solid $--n-alpha-divider-color;
+        border-radius: 6px;
+        text-align: left;
+        border-collapse: separate;
+        border-spacing: 0;
+        overflow: hidden;
+        // background-color: $--n-alpha-table-body-color;
+        th {
+          background-color: $--n-alpha-table-header-color;
+          background-clip: padding-box;
+          text-align: inherit;
+          padding: 14px 12px;
+          vertical-align: inherit;
+          font-style: none;
+          font-weight: 400;
+          text-transform: none;
+          border-left: none;
+          font-weight: bold;
+          border-bottom: 1px solid $--n-alpha-divider-color;
+          &:not(:last-child) {
+            border-right: 1px solid $--n-alpha-table-header-color;
+          }
+        }
+        td {
+          background-color: $--n-alpha-table-body-color;
+          background-clip: padding-box;
+          padding: 12px;
+        }
+      }
+      &.footer-part {
+        margin-top: 16px;
+      }
     }
-    td {
-      padding: 12px;
-      background-color: #1F263E;
+  } @else {
+    .n-app--light-theme .markdown {
+      code {
+        background-color: rgb(244, 244, 244);
+        border: 1px solid rgb(230, 230, 230);
+      }
+      table {
+        border: 1px solid rgba(34,36,38,.15);
+        th {
+          background: rgb(250, 250, 250);      
+        }
+        td {
+          background-color: white;
+        }
+      }
     }
   }
-  &.footer-part {
-    margin-top: 16px;
-  }
 }
\ No newline at end of file
diff --git a/demo/utils/ComponentDemo.vue b/demo/utils/ComponentDemo.vue
index 2602d403f..0ef2e36df 100644
--- a/demo/utils/ComponentDemo.vue
+++ b/demo/utils/ComponentDemo.vue
@@ -1,3 +1,16 @@
+<i18n>
+{
+  "zh-cn": {
+    "show": "显示代码",
+    "hide": "收起代码"
+  },
+  "en-us": {
+    "show": "Show Code",
+    "hide": "Hide Code"
+  }
+}
+</i18n>
+
 <template>
   <div
     class="n-code-box"
@@ -23,7 +36,7 @@
             @click="toggleCodeDisplay"
           />
         </template>
-        Show Code
+        {{ !showCode ? $t('show') : $t('hide') }}
       </n-tooltip>
     </div>
     <div class="n-code-box__content markdown">
diff --git a/packages/common/TimePicker/src/main.vue b/packages/common/TimePicker/src/main.vue
index 08dda5577..53422bb5a 100644
--- a/packages/common/TimePicker/src/main.vue
+++ b/packages/common/TimePicker/src/main.vue
@@ -45,6 +45,11 @@
                   >
                     {{ hour }}
                   </div>
+                  <div
+                    v-for="i in [1, 2, 3, 4, 5, 6]"
+                    :key="i"
+                    style="height: 35px;"
+                  />
                 </n-scrollbar>
               </div>
               <div
@@ -63,6 +68,11 @@
                   >
                     {{ minute }}
                   </div>
+                  <div
+                    v-for="i in [1, 2, 3, 4, 5, 6]"
+                    :key="i"
+                    style="height: 35px;"
+                  />
                 </n-scrollbar>
               </div>
               <div
@@ -84,6 +94,11 @@
                   >
                     {{ second }}
                   </div>
+                  <div
+                    v-for="i in [1, 2, 3, 4, 5, 6]"
+                    :key="i"
+                    style="height: 35px;"
+                  />
                 </n-scrollbar>
               </div>
             </div>
diff --git a/packages/nimbus/ServiceLayout/src/main.vue b/packages/nimbus/ServiceLayout/src/main.vue
index fee7828bf..453c1e35f 100644
--- a/packages/nimbus/ServiceLayout/src/main.vue
+++ b/packages/nimbus/ServiceLayout/src/main.vue
@@ -49,7 +49,10 @@
               {{ name }}
             </div>
           </div>
-          <div class="n-nimbus-service-layout-drawer-divider" />
+          <div
+            v-if="name"
+            class="n-nimbus-service-layout-drawer-divider"
+          />
           <div
             v-for="item in itemsWithCollapseStatus"
             :key="item.name"
diff --git a/styles/Input.scss b/styles/Input.scss
index cdb502ba0..5dc34168e 100644
--- a/styles/Input.scss
+++ b/styles/Input.scss
@@ -67,7 +67,6 @@
   @include m(small-size) {
     font-size: $small-input-font-size;
     $height: round($small-input-font-size * 1.5);
-    height: $small-height;
     line-height: $small-height;
     @include e(input) {
       height: $small-height;
@@ -82,7 +81,6 @@
   @include m(medium-size) {
     font-size: $medium-input-font-size;
     $height: round($medium-input-font-size * 1.5);
-    height: $medium-height;
     line-height: $medium-height;
     @include e(input) {
       height: $medium-height;
@@ -97,7 +95,6 @@
   @include m(large-size) {
     font-size: $large-input-font-size;
     $height: round($large-input-font-size * 1.5);
-    height: $large-height;
     line-height: $large-height;
     @include e(input) {
       height: $large-height;
diff --git a/styles/NimbusServiceLayout.scss b/styles/NimbusServiceLayout.scss
index 6f5cdb073..c40d489d0 100644
--- a/styles/NimbusServiceLayout.scss
+++ b/styles/NimbusServiceLayout.scss
@@ -18,7 +18,7 @@ $layout-nav-height: 64px;
       right: 0;
       top: 0;
       background-color: $service-layout-nav-background-color;
-      box-shadow: border-box;
+      box-sizing: border-box;
       border-bottom: 1px solid $service-layout-border-color;
       // box-shadow: 0px 2px 6px 1px rgba(0,0,0,0.1),0px 1px 3px 0px rgba(0,0,0,0.17);
       height: $layout-nav-height;
diff --git a/styles/TimePicker.scss b/styles/TimePicker.scss
index 1bc1cc1a3..a7b54b4f3 100644
--- a/styles/TimePicker.scss
+++ b/styles/TimePicker.scss
@@ -41,7 +41,7 @@
     // margin will boom! I don't know why
     padding: 10px 15px;
     display: flex;
-    justify-content: space-between;
+    justify-content: space-around;
     .n-button {
       margin: 0;
     }
diff --git a/styles/mixins/color.scss b/styles/mixins/color.scss
new file mode 100644
index 000000000..e69de29bb
diff --git a/styles/themes/dark/components/BasePicker.scss b/styles/themes/dark/components/BasePicker.scss
index c4414a464..88de8b087 100644
--- a/styles/themes/dark/components/BasePicker.scss
+++ b/styles/themes/dark/components/BasePicker.scss
@@ -1,8 +1,8 @@
 @mixin setup-dark-base-picker {
   $--base-picker-color: $--n-secondary-text-color !global;
   $--base-picker-background-color: (
-    "default": rgba(255, 255, 255, .12),
-    "disabled": rgba(255, 255, 255, .08),
+    "default": rgba(255, 255, 255, .1),
+    "disabled": rgba(255, 255, 255, .06),
     "active": change-color($primary-6, $alpha: 0.1)
   ) !global;
   $--base-picker-placeholder-color: (
diff --git a/styles/themes/dark/components/BaseSelectMenu.scss b/styles/themes/dark/components/BaseSelectMenu.scss
index 7c2488d78..64c21b640 100644
--- a/styles/themes/dark/components/BaseSelectMenu.scss
+++ b/styles/themes/dark/components/BaseSelectMenu.scss
@@ -4,7 +4,7 @@
     "selected": $--n-primary-color,
     "disabled": $--n-disabled-text-color
   ) !global;
-  $--base-select-menu-background-color: $neutral-5 !global;
+  $--base-select-menu-background-color: $--n-popover-color !global;
   $--base-select-menu-box-shadow: none !global;
   $--base-select-menu-light-bar-background-color: change-color($primary-6, $alpha: .3) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Confirm.scss b/styles/themes/dark/components/Confirm.scss
index 4d52d928f..0b371df5f 100644
--- a/styles/themes/dark/components/Confirm.scss
+++ b/styles/themes/dark/components/Confirm.scss
@@ -1,6 +1,6 @@
 @mixin setup-dark-confirm {
   $--confirm-title-color: $--n-text-color !global;
   $--confirm-color: $--n-secondary-text-color !global;
-  $--confirm-background-color: $neutral-6 !global;
+  $--confirm-background-color: $--n-dialog-color !global;
   $--confirm-border-color: $--n-divider-color !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/NimbusServiceLayout.scss b/styles/themes/dark/components/NimbusServiceLayout.scss
index b7c956e57..769a72aa3 100644
--- a/styles/themes/dark/components/NimbusServiceLayout.scss
+++ b/styles/themes/dark/components/NimbusServiceLayout.scss
@@ -1,8 +1,8 @@
 @mixin setup-dark-nimbus-service-layout {
-  $service-layout-drawer-background-color: $neutral-8 !global;
-  $service-layout-body-background-color: $neutral-9 !global;
-  $service-layout-nav-background-color: $neutral-8 !global;
-  $service-layout-color: $--n-text-color !global;
+  $service-layout-drawer-background-color: $--n-card-color !global;
+  $service-layout-body-background-color: $--n-background-color !global;
+  $service-layout-nav-background-color: $--n-card-color !global;
+  $service-layout-color: $--n-secondary-text-color !global;
   $service-layout-border-color: $--n-divider-color !global;
   $service-layout-toggle-button-color: rgba(255, 255, 255, .3)!global;
   $service-layout-item-background-image: linear-gradient(47deg,rgba(232,232,235,.4) 0%,rgba(31,38,62,.4) 100%) !global;
diff --git a/styles/themes/dark/components/Popover.scss b/styles/themes/dark/components/Popover.scss
index 85318526f..02c474d2a 100644
--- a/styles/themes/dark/components/Popover.scss
+++ b/styles/themes/dark/components/Popover.scss
@@ -1,4 +1,4 @@
 @mixin setup-dark-popover {
-  $--popover-background-color: $neutral-6 !global;
+  $--popover-background-color: $--n-popover-color !global;
   $--popover-color: $--n-secondary-text-color !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/components/Tooltip.scss b/styles/themes/dark/components/Tooltip.scss
index 08c26fc6d..a673309e7 100644
--- a/styles/themes/dark/components/Tooltip.scss
+++ b/styles/themes/dark/components/Tooltip.scss
@@ -1,5 +1,5 @@
 @mixin setup-dark-tooltip {
-  $--tooltip-background-color: $neutral-6 !global;
-  $--tooltip-color: $--n-text-color !global;
+  $--tooltip-background-color: $--n-popover-color !global;
+  $--tooltip-color: $--n-secondary-text-color !global;
   $--tooltip-box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.08) !global;
 }
\ No newline at end of file
diff --git a/styles/themes/dark/darkColors.hs.scss b/styles/themes/dark/darkColors.hs.scss
index fdea91224..64d5e5ff6 100644
--- a/styles/themes/dark/darkColors.hs.scss
+++ b/styles/themes/dark/darkColors.hs.scss
@@ -1,14 +1,14 @@
 @mixin setup-dark-colors {
-  $neutral-1: rgb(255, 255, 255) !global;
-  $neutral-2: rgba(255, 255, 255, .85) !global;
-  $neutral-3: rgba(255, 255, 255, .65) !global;
-  $neutral-4: rgba(255, 255, 255, .45) !global;
-  $neutral-5: #40465b !global;
-  $neutral-6: #272F46 !global;
-  $neutral-7: #1F263E !global;
-  $neutral-8: #171D33 !global;
-  $neutral-9: #10142C !global;
-  $neutral-10: rgb(0, 0, 0) !global;
+  $--neutral-1: rgb(255, 255, 255) !global;
+  $--neutral-2: rgba(255, 255, 255, .85) !global;
+  $--neutral-3: rgba(255, 255, 255, .65) !global;
+  $--neutral-4: rgba(255, 255, 255, .45) !global;
+  $--neutral-5: #40465b !global;
+  $--neutral-6: #272F46 !global;
+  $--neutral-7: #1F263E !global;
+  $--neutral-8: #171D33 !global;
+  $--neutral-9: #10142C !global;
+  $--neutral-10: rgb(0, 0, 0) !global;
   $primary-1: #e6ffee !global;
   $primary-2: #9bf2bb !global;
   $primary-3: #6ee69e !global;
diff --git a/styles/themes/dark/darkColors.ls.scss b/styles/themes/dark/darkColors.ls.scss
index 9e3ef4567..5c50e40cc 100644
--- a/styles/themes/dark/darkColors.ls.scss
+++ b/styles/themes/dark/darkColors.ls.scss
@@ -1,14 +1,14 @@
 @mixin setup-dark-colors {
-  $neutral-1: rgb(255, 255, 255) !global;
-  $neutral-2: rgba(255, 255, 255, .85) !global;
-  $neutral-3: rgba(255, 255, 255, .65) !global;
-  $neutral-4: rgba(255, 255, 255, .45) !global;
-  $neutral-5: #40465b !global;
-  $neutral-6: #272F46 !global;
-  $neutral-7: #1F263E !global;
-  $neutral-8: #171D33 !global;
-  $neutral-9: #10142C !global;
-  $neutral-10: rgb(0, 0, 0) !global;
+  $--neutral-1: rgb(255, 255, 255) !global;
+  $--neutral-2: rgba(255, 255, 255, .85) !global;
+  $--neutral-3: rgba(255, 255, 255, .65) !global;
+  $--neutral-4: rgba(255, 255, 255, .45) !global;
+  $--neutral-5: #40465b !global;
+  $--neutral-6: #272F46 !global;
+  $--neutral-7: #1F263E !global;
+  $--neutral-8: #171D33 !global;
+  $--neutral-9: #10142C !global;
+  $--neutral-10: rgb(0, 0, 0) !global;
   $primary-1: #e6ffee !global;
   $primary-2: #9bf2bb !global;
   $primary-3: #6ee69e !global;
diff --git a/styles/themes/dark/darkColors.scss b/styles/themes/dark/darkColors.scss
index 73830d20d..381d65694 100644
--- a/styles/themes/dark/darkColors.scss
+++ b/styles/themes/dark/darkColors.scss
@@ -1,14 +1,26 @@
 @mixin setup-dark-colors {
-  $neutral-1: rgb(255, 255, 255) !global;
-  $neutral-2: rgba(255, 255, 255, .90) !global;
-  $neutral-3: rgba(255, 255, 255, .80) !global;
-  $neutral-4: rgba(255, 255, 255, .70) !global;
-  $neutral-5: hsl(227, 15%, 42%) !global; // popover border
-  $neutral-6: hsl(226, 21%, 33%) !global; // modal divider
-  $neutral-7: hsl(226, 27%, 25%) !global;
-  $neutral-8: hsl(226, 33%, 18%) !global; // drawer & card & table header
-  $neutral-9: hsl(226, 39%, 12%) !global; // bg
-  $neutral-10: hsl(226, 46%, 7%) !global;
+  $--text-1: rgba(255, 255, 255, .9) !global;
+  $--text-2: rgba(255, 255, 255, .75) !global;
+  $--overlay-1: rgba(255, 255, 255, 0.3) !global; // popover
+  $--overlay-2: rgba(255, 255, 255, 0.26) !global; //
+  $--overlay-3: rgba(255, 255, 255, 0.22) !global; // dialog
+  $--overlay-4: rgba(255, 255, 255, 0.2) !global; //
+  $--overlay-5: rgba(255, 255, 255, 0.16) !global; //
+  $--overlay-6: rgba(255, 255, 255, 0.14) !global; // divider
+  $--overlay-7: rgba(255, 255, 255, 0.12) !global; // border
+  $--overlay-8: rgba(255, 255, 255, 0.09) !global; // table-header
+  $--overlay-9: rgba(255, 255, 255, 0.05) !global; // card & table-body
+  $--overlay-10: rgba(255, 255, 255, 0) !global; // background
+  $--neutral-1: rgb(89, 93, 119) !global; // popover
+  $--neutral-2: rgb(80, 84, 109) !global; //
+  $--neutral-3: rgb(70, 75, 99) !global; // dialog
+  $--neutral-4: rgb(65, 70, 94) !global; //
+  $--neutral-5: rgb(56, 61, 83) !global; //
+  $--neutral-6: rgb(51, 56, 78) !global; // divider
+  $--neutral-7: rgb(46, 52, 73) !global; // border
+  $--neutral-8: rgb(39, 45, 65) !global; // table-header
+  $--neutral-9: rgb(30, 36, 55) !global; // card & table-body
+  $--neutral-10: rgb(18, 24, 42) !global; // background
   $primary-1: #f0fcf8 !global;
   $primary-2: #d4f7eb !global;
   $primary-3: #b8f1de !global;
diff --git a/styles/themes/dark/index.scss b/styles/themes/dark/index.scss
index dbf35f99e..baa7e5bee 100644
--- a/styles/themes/dark/index.scss
+++ b/styles/themes/dark/index.scss
@@ -25,12 +25,21 @@
   $--n-warning-color: $warning-6 !global;
   $--n-error-color: $error-6 !global;
 
-  $--n-text-color: $neutral-2 !global;
-  $--n-divider-color: $neutral-7 !global;
-  $--n-border-color: $neutral-7 !global;
-  $--n-secondary-text-color: $neutral-2 !global;
-  $--n-table-header-color: mix($neutral-8, $neutral-9) !global;
+  $--n-text-color: $--text-1 !global;
+  $--n-popover-color: $--neutral-1 !global;
+  $--n-divider-color: $--neutral-6 !global;
+  $--n-alpha-divider-color: $--overlay-6 !global;
+  $--n-border-color: $--neutral-7 !global;
+  $--n-alpha-border-color: $--overlay-7 !global;
+  $--n-secondary-text-color: $--text-2 !global;
+  $--n-table-header-color: $--neutral-8 !global;
+  $--n-alpha-table-header-color: $--overlay-8 !global;
+  $--n-table-body-color: $--neutral-9 !global;
+  $--n-alpha-table-body-color: $--overlay-9 !global;
+  $--n-card-color: $--neutral-9 !global;
   $--n-disabled-text-color: rgba(255, 255, 255, .3) !global;
+  $--n-dialog-color: $--neutral-3 !global;
+  $--n-background-color: $--neutral-10 !global;
   @include setup-dark-nimbus-service-layout;
   @include setup-dark-divider;
   @include setup-dark-scrollbar;
diff --git a/styles/themes/light/index.scss b/styles/themes/light/index.scss
index 5c9adbb3c..67e2ebc71 100644
--- a/styles/themes/light/index.scss
+++ b/styles/themes/light/index.scss
@@ -34,6 +34,9 @@
   $--n-secondary-text-color: $neutral-3 !global;
   $--n-text-color: $neutral-2 !global;
   $--n-disabled-text-color: $neutral-5 !global;
+  $--n-card-color: $neutral-10 !global;
+  $--n-dialog-color: $neutral-10 !global;
+  $--n-background-color: $neutral-10 !global;
  
   @include setup-light-nimbus-service-layout;
   @include setup-light-divider;