diff --git a/index.js b/index.js
index 59372717d..de73f9231 100644
--- a/index.js
+++ b/index.js
@@ -58,6 +58,7 @@ import Time from './packages/common/Time'
 import LoadingBar from './packages/common/LoadingBar'
 import Slider from './packages/common/Slider'
 import Tree from './packages/common/Tree'
+import Grid from './packages/common/Grid'
 
 function install (Vue) {
   Card.install(Vue)
@@ -120,6 +121,7 @@ function install (Vue) {
   Time.install(Vue)
   Slider.install(Vue)
   Tree.install(Vue)
+  Grid.install(Vue)
 }
 
 export default {
diff --git a/styles/index.scss b/styles/index.scss
index f498821e3..034f38bfd 100644
--- a/styles/index.scss
+++ b/styles/index.scss
@@ -48,6 +48,7 @@
 @import './LoadingBar.scss';
 @import './Slider.scss';
 @import './Tree.scss';
+@import './Grid.scss';
 
 @import "./NimbusServiceLayout.scss";
 @import "./Popover.scss";
diff --git a/styles/themes/default.scss b/styles/themes/default.scss
index 2f9079701..7d3394245 100644
--- a/styles/themes/default.scss
+++ b/styles/themes/default.scss
@@ -3,7 +3,10 @@
 @mixin setup-default-theme () {
   @include setup-dark-colors();
   $n-color: $neutral-2 !global;
+  $secondary-color: $neutral-3 !global;
   $n-divider-color: $neutral-5 !global;
+  $n-border-color: $neutral-5 !global;
+  $n-primary-color: $primary-6 !global;
   /**
    * service layout
    */
@@ -12,6 +15,15 @@
   $service-layout-nav-background-color: $neutral-7 !global;
   $service-layout-color: $n-color !global;
   $service-layout-border-color: $neutral-5 !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;
+  /**
+   * scrollbar
+   */
+  $scrollbar-color: (
+    "default": rgba(255,255,255,0.2),
+    "hover": rgba(255,255,255,0.3)
+  ) !global;
   /**
    * Divider
    */
diff --git a/styles/themes/light.scss b/styles/themes/light.scss
index b60724d33..42c5a9182 100644
--- a/styles/themes/light.scss
+++ b/styles/themes/light.scss
@@ -3,9 +3,11 @@
 @mixin setup-light-theme () {
   @include setup-light-colors();
   $n-color: $neutral-2 !global;
+  $n-selected-color: $neutral-7 !global;
   $secondary-color: $neutral-3 !global;
   $n-divider-color: $neutral-6 !global;
-  $border-color: $neutral-5 !global;
+  $n-border-color: $neutral-5 !global;
+  $n-primary-color: $primary-6 !global;
   /**
    * service layout
    */
@@ -14,10 +16,19 @@
   $service-layout-nav-background-color: $neutral-10 !global;
   $service-layout-color: $n-color !global ;
   $service-layout-border-color: $n-divider-color !global;
+  $service-layout-toggle-button-color: rgba(0, 0, 0, .15)!global;
+  $service-layout-item-background-image: linear-gradient(47deg, $neutral-7, $neutral-7) !global;
   /**
+   * scrollbar
+   */
+  $scrollbar-color: (
+    "default": rgba(0,0,0,0.25),
+    "hover": rgba(0,0,0,0.40)
+  ) !global;
+  /*
    * Divider
    */
-   $divider-color: $n-divider-color !global;
+  $divider-color: $n-divider-color !global;
   /**
    * button
    */
@@ -54,7 +65,7 @@
     "large": 20px
   ) !global;
   $button-border-color: (
-    "default":  $border-color,
+    "default":  $n-border-color,
     "primary": $primary-6,
     "info": $info-6,
     "success": $success-6,
@@ -100,15 +111,15 @@
   $button-ghost-hover-alpha: .1;
   $button-ghost-active-alpha: .15;
   $button-ghost-focus-alpha: .1;
-  $button-ghost-weight: percentage(red($border-color) / (255 - red($border-color)) * $button-ghost-alpha);
-  $button-ghost-hover-weight: percentage(red($border-color) / (255 - red($border-color)) * $button-ghost-hover-alpha);
-  $button-ghost-active-weight: percentage(red($border-color) / (255 - red($border-color)) * $button-ghost-active-alpha);
-  $button-ghost-focus-weight: percentage(red($border-color) / (255 - red($border-color)) * $button-ghost-focus-alpha);
+  $button-ghost-weight: percentage(red($n-border-color) / (255 - red($n-border-color)) * $button-ghost-alpha);
+  $button-ghost-hover-weight: percentage(red($n-border-color) / (255 - red($n-border-color)) * $button-ghost-hover-alpha);
+  $button-ghost-active-weight: percentage(red($n-border-color) / (255 - red($n-border-color)) * $button-ghost-active-alpha);
+  $button-ghost-focus-weight: percentage(red($n-border-color) / (255 - red($n-border-color)) * $button-ghost-focus-alpha);
   $button-background-color: (
-    "default": mix($border-color, white, $button-ghost-weight),
-    "default-focus": mix($border-color, white, $button-ghost-focus-weight),
-    "default-hover": mix($border-color, white, $button-ghost-hover-weight),
-    "default-active": mix($border-color, white, $button-ghost-active-weight),
+    "default": mix($n-border-color, white, $button-ghost-weight),
+    "default-focus": mix($n-border-color, white, $button-ghost-focus-weight),
+    "default-hover": mix($n-border-color, white, $button-ghost-hover-weight),
+    "default-active": mix($n-border-color, white, $button-ghost-active-weight),
     "primary": $primary-6,
     "primary-focus": $primary-5,
     "primary-hover": $primary-5,
diff --git a/styles/themes/lightColors.scss b/styles/themes/lightColors.scss
index cd4c16069..d550bafac 100644
--- a/styles/themes/lightColors.scss
+++ b/styles/themes/lightColors.scss
@@ -19,46 +19,47 @@
   $neutral-8: rgb(244, 244, 244) !global;
   $neutral-9: rgb(250, 250, 250) !global;
   $neutral-10: rgb(255, 255, 255) !global;
-  $primary-1: #e6ffee !global;
-  $primary-2: #9bf2bb !global;
-  $primary-3: #6ee69e !global;
-  $primary-4: #45d985 !global;
-  $primary-5: #21cc71 !global;
-  $primary-6: #00c060 !global;
-  $primary-7: #009952 !global;
-  $primary-8: #007341 !global;
-  $primary-9: #004d2e !global;
-  $primary-10: #002618 !global;
-  $success-1: #e6ffee !global;
-  $success-2: #9bf2bb !global;
-  $success-3: #6ee69e !global;
-  $success-4: #45d985 !global;
-  $success-5: #21cc71 !global;
-  $success-6: #00c060 !global;
-  $success-7: #009952 !global;
-  $success-8: #007341 !global;
-  $success-9: #004d2e !global;
-  $success-10: #002618 !global;
+
+  $primary-1: #d3e0d7 !global;
+  $primary-2: #a7d4b6 !global;
+  $primary-3: #7dc798 !global;
+  $primary-4: #57ba7f !global;
+  $primary-5: #36ad6a !global;
+  $primary-6: #18a058 !global;
+  $primary-7: #0c7a43 !global;
+  $primary-8: #04542f !global;
+  $primary-9: #002e1a !global;
+  $primary-10: #000805 !global;
+  $success-1: #d3e0d7 !global;
+  $success-2: #a7d4b6 !global;
+  $success-3: #7dc798 !global;
+  $success-4: #57ba7f !global;
+  $success-5: #36b46a !global;
+  $success-6: #18a058 !global;
+  $success-7: #0c7a43 !global;
+  $success-8: #04542f !global;
+  $success-9: #002e1a !global;
+  $success-10: #000805 !global;
   $info-1: #edfaff !global;
-  $info-2: #c4ebff !global;
-  $info-3: #9cdbff !global;
-  $info-4: #73c7ff !global;
-  $info-5: #49affc !global;
-  $info-6: #2090f0 !global;
-  $info-7: #106dc9 !global;
-  $info-8: #054fa3 !global;
-  $info-9: #00367d !global;
-  $info-10: #002357 !global;
-  $warning-1: #fff8f0 !global;
-  $warning-2: #ffead4 !global;
-  $warning-3: #ffd4ab !global;
-  $warning-4: #ffba82 !global;
-  $warning-5: #ff9e59 !global;
-  $warning-6: #ff8030 !global;
-  $warning-7: #d9601e !global;
-  $warning-8: #b34410 !global;
-  $warning-9: #8c2c06 !global;
-  $warning-10: #661c03 !global;
+  $info-2: #c4e8ff !global;
+  $info-3: #9cd4ff !global;
+  $info-4: #73beff !global;
+  $info-5: #4098fc !global;
+  $info-6: #2080f0 !global;
+  $info-7: #1060c9 !global;
+  $info-8: #0544a3 !global;
+  $info-9: #002e7d !global;
+  $info-10: #001d57 !global;
+  $warning-1: #fffbed !global;
+  $warning-2: #fff0c4 !global;
+  $warning-3: #ffe39c !global;
+  $warning-4: #ffd373 !global;
+  $warning-5: #fcb040 !global;
+  $warning-6: #f0a020 !global;
+  $warning-7: #c97c10 !global;
+  $warning-8: #a35c05 !global;
+  $warning-9: #7d4100 !global;
+  $warning-10: #572a00 !global;
   $error-1: #fff0f0 !global;
   $error-2: #ffdee0 !global;
   $error-3: #f7b0b7 !global;
diff --git a/styles/themes/vars.scss b/styles/themes/vars.scss
index 3a5b7819b..b4077ef09 100644
--- a/styles/themes/vars.scss
+++ b/styles/themes/vars.scss
@@ -188,8 +188,8 @@ $default-text-gradient-danger: linear-gradient(214deg, rgba(224,32,32,1) 0%, rgb
 
 $default-cubic-bezier: cubic-bezier(.4, 0, .2, 1);
 
-$scrollbar-color: rgba(255,255,255,0.2);
-$scrollbar-color--hover: rgba(255,255,255,0.3);
+// $scrollbar-color: rgba(255,255,255,0.2);
+// $scrollbar-color--hover: rgba(255,255,255,0.3);
 
 @mixin scrollbar {
   &::-webkit-scrollbar {