diff --git a/scss/_bootstrap-overrides.scss b/scss/_bootstrap-overrides.scss
index 4c8c9af..e048cb9 100644
--- a/scss/_bootstrap-overrides.scss
+++ b/scss/_bootstrap-overrides.scss
@@ -1,18 +1,103 @@
 $enable-bootstrap-overrides: true !default;
-// $theme-colors: () !default;
+$theme-colors: () !default;
 
-@if $enable-bootstrap-overrides {
-    // $theme-colors: map-merge((
-    //     secondary: #dee2e6,
-    // ), $theme-colors);
-    $theme-colors: (
-        primary: $blue,
-        secondary: #e4e7eb,
+// @if $enable-bootstrap-overrides {
+
+    $white:    #ffffff !default;
+    $gray-100: #f8f9fa !default;
+    $gray-200: #e9ecef !default;
+    $gray-300: #dee2e6 !default;
+    $gray-400: #ced4da !default;
+    $gray-500: #adb5bd !default;
+    $gray-600: #868e96 !default;
+    $gray-700: #495057 !default;
+    $gray-800: #343a40 !default;
+    $gray-900: #212529 !default;
+    $black:    #000000 !default;
+
+    $blue:     #007bff !default;
+    $indigo:   #6610f2 !default;
+    $purple:   #6f42c1 !default;
+    $pink:     #e83e8c !default;
+    $red:      #dc3545 !default;
+    $orange:   #fd7e14 !default;
+    $yellow:   #ffc107 !default;
+    $green:    #28a745 !default;
+    $teal:     #20c997 !default;
+    $cyan:     #17a2b8 !default;
+
+    $accent: $blue !default;
+    $secondary: #e4e7eb !default;
+    $info: $cyan !default;
+    $warning: $yellow !default;
+    $error: $red !default;
+
+    $theme-colors: map-merge((
+        primary: $accent,
+        secondary: $secondary,
         success: $green,
-        info: $cyan,
-        warning: $yellow,
-        danger: $red,
+        info: $info,
+        warning: $warning,
+        danger: $error,
         light: $gray-100,
         dark: $gray-800
-    );
-}
\ No newline at end of file
+    ), $theme-colors);
+
+    $body-bg: $white !default;
+    $body-color: contrast-yiq($body-bg, $gray-900) !default;
+
+    $component-bg: $body-bg !default;
+    $component-color: contrast-yiq($component-bg, $gray-900) !default;
+    $component-border-color: rgba(contrast-yiq($component-bg, $gray-900), .125) !default;
+    $component-active-bg: theme-color("primary") !default;
+    $component-active-color: contrast-yiq($component-active-bg);
+
+    $card-bg: $component-bg !default;
+    $card-color: $component-color !default;
+    $card-border-color: rgba(contrast-yiq($card-bg, $gray-900), .125) !default;
+    $card-cap-bg: $gray-100 !default;
+    $card-cap-color: $card-color !default;
+    $card-cap-border-color: rgba(contrast-yiq($card-bg, $gray-900), .125) !default;
+
+    $input-bg: $component-bg !default;
+    $input-color: $component-color !default;
+    $input-border-color: rgba(contrast-yiq($input-bg, $gray-900), .15) !default;
+
+    $dropdown-bg: $component-bg !default;
+    $dropdown-color: $component-color !default;
+    $dropdown-border-color: rgba(contrast-yiq($dropdown-bg, $gray-900), .15) !default;
+
+    $dropdown-link-color: contrast-yiq($dropdown-bg, $gray-900) !default;
+    $dropdown-link-hover-color: darken($dropdown-link-color, 5%) !default;
+
+    $nav-tabs-border-color: $component-border-color !default;
+    $nav-tabs-link-active-bg: $component-bg !default;
+    $nav-tabs-link-active-color: $component-color !default;
+    $nav-tabs-link-active-border-color: $component-border-color !default;
+
+    $pagination-bg: $body-bg !default;
+    $pagination-active-color: $component-active-color !default;
+    $pagination-active-bg: $component-active-bg !default;
+    $pagination-active-border-color: $pagination-active-bg !default;
+
+    $pagination-disabled-bg: $pagination-bg !default;
+    $pagination-disabled-color: contrast-yiq($pagination-disabled-bg, $gray-600) !default;
+
+    $table-bg: $component-bg !default;
+    $table-color: $component-color !default;
+    $table-border-color: rgba(contrast-yiq($table-bg, $gray-900), .125) !default;
+
+    $modal-content-bg: $component-bg !default;
+    $modal-content-color: $component-color !default;
+    $modal-content-border-color: $component-border-color !default;
+    $modal-header-bg: $modal-content-bg !default;
+    $modal-header-color: $modal-content-color !default;
+    $modal-header-border-color: $component-border-color !default;
+
+    $custom-control-indicator-bg: try-lighten( $input-border-color, 6.7 ) !default;
+
+    $progress-bg: $gray-200 !default;
+    $progress-color: contrast-yiq($progress-bg, $gray-900) !default;
+    $progress-bar-bg: theme-color("primary") !default;
+    $progress-bar-color: contrast-yiq($progress-bar-bg, $gray-900) !default;
+// }
\ No newline at end of file
diff --git a/scss/_variables.scss b/scss/_variables.scss
index 6dd778d..f7c8b8b 100644
--- a/scss/_variables.scss
+++ b/scss/_variables.scss
@@ -1,7 +1,7 @@
 @import "~@progress/kendo-theme-default/scss/mixins/colors";
 @import "~bootstrap/scss/functions";
-@import "~bootstrap/scss/variables";
 @import "bootstrap-overrides";
+@import "~bootstrap/scss/variables";
 
 
 // Options
@@ -131,7 +131,7 @@ $base-text: $body-color !default;
 /// The border color of the components' chrome area.
 $base-border: darken( $base-bg, 3% ) !default;
 /// The gradient background of the components' chrome area.
-$base-gradient: none !default;
+$base-gradient: false !default;
 
 /// The background of hovered items.
 $hovered-bg: darken( $base-bg, 3% ) !default;
@@ -140,7 +140,7 @@ $hovered-text: $base-text !default;
 /// The border color of hovered items.
 $hovered-border: darken( $base-border, 12% ) !default;
 /// The gradient background of hovered items.
-$hovered-gradient: none !default;
+$hovered-gradient: false !default;
 
 /// The background of selected items.
 $selected-bg: $accent !default;
@@ -149,7 +149,7 @@ $selected-text: contrast-wcag( $selected-bg ) !default;
 /// The border color of selected items.
 $selected-border: darken( $selected-bg, 12% ) !default;
 /// The gradient background of selected items.
-$selected-gradient: none !default;
+$selected-gradient: false !default;
 
 $transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease !default;
 
@@ -174,14 +174,20 @@ $gradient-rainbow: #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000
 
 
 
+// Component
+$componet-bg: $component-bg !default;
+$componet-text: $component-color !default;
+$componet-border: $component-border-color !default;
+
+
 // Widget
-$widget-text: $text-color !default;
-$widget-bg: $bg-color !default;
-$widget-border: $border-color !default;
+$widget-bg: $component-bg !default;
+$widget-text: $component-color !default;
+$widget-border: $component-border-color !default;
 
 
 // Panel
-$panel-text: $body-color !default;
+$panel-text: $card-color !default;
 $panel-bg: $card-bg !default;
 $panel-border: $card-border-color !default;
 
@@ -193,20 +199,20 @@ $popup-border: $dropdown-border-color !default;
 
 
 // Header
-$header-text: $base-text !default;
-$header-bg: $gray-100 !default;
-$header-border: darken( $header-bg, 9 ) !default;
-$header-gradient: none !default;
+$header-text: $card-cap-color !default;
+$header-bg: $card-cap-bg !default;
+$header-border: try-darken( $header-bg, 9 ) !default;
+$header-gradient: false !default;
 
 $header-hovered-text: $header-text !default;
-$header-hovered-bg: darken( $header-bg, 3 ) !default;
+$header-hovered-bg: try-darken( $header-bg, 3 ) !default;
 $header-hovered-border: $header-border !default;
-$header-hovered-gradient: none !default;
+$header-hovered-gradient: false !default;
 
 $header-selected-text: $selected-text !default;
 $header-selected-bg: $selected-bg !default;
 $header-selected-border: $selected-border !default;
-$header-selected-gradient: none !default;
+$header-selected-gradient: false !default;
 
 
 // Button
@@ -225,8 +231,8 @@ $button-border: $button-bg !default;
 
 /// The background gradient of the buttons.
 /// @group buttons
-$button-gradient: none !default;
-$button-shadow: none !default;
+$button-gradient: false !default;
+$button-shadow: false !default;
 
 /// The background of hovered buttons.
 /// @group buttons
@@ -242,8 +248,8 @@ $button-hovered-border: darken( $button-border, 10% ) !default;
 
 /// The background gradient of hovered buttons.
 /// @group buttons
-$button-hovered-gradient: none !default;
-$button-hovered-shadow: none !default;
+$button-hovered-gradient: false !default;
+$button-hovered-shadow: false !default;
 
 /// The background color of pressed buttons.
 /// @group buttons
@@ -259,8 +265,8 @@ $button-pressed-border: $button-hovered-border !default;
 
 /// The background gradient of pressed buttons.
 /// @group buttons
-$button-pressed-gradient: none !default;
-$button-pressed-shadow: none !default;
+$button-pressed-gradient: false !default;
+$button-pressed-shadow: false !default;
 
 /// The shadow of focused buttons.
 /// @group buttons
@@ -271,17 +277,17 @@ $button-focused-shadow: 0 0 0 3px rgba($button-border, .5) !default;
 $primary-button-bg: $accent !default;
 $primary-button-text: contrast-wcag( $primary-button-bg ) !default;
 $primary-button-border: $primary-button-bg !default;
-$primary-button-gradient: none !default;
+$primary-button-gradient: false !default;
 
 $primary-button-hovered-bg: darken( $primary-button-bg, 7.5% ) !default;
 $primary-button-hovered-text: contrast-wcag( $primary-button-hovered-bg ) !default;
 $primary-button-hovered-border: darken( $primary-button-border, 10% ) !default;
-$primary-button-hovered-gradient: none !default;
+$primary-button-hovered-gradient: false !default;
 
 $primary-button-pressed-bg: $primary-button-hovered-bg !default;
 $primary-button-pressed-text: $primary-button-hovered-text !default;
 $primary-button-pressed-border: $primary-button-hovered-border !default;
-$primary-button-pressed-gradient: none !default;
+$primary-button-pressed-gradient: false !default;
 
 $primary-button-focused-shadow: 0 0 0 3px rgba($primary-button-border, .5);
 
@@ -290,7 +296,7 @@ $primary-button-focused-shadow: 0 0 0 3px rgba($primary-button-border, .5);
 $toolbar-text: $header-text !default;
 $toolbar-bg: $header-bg !default;
 $toolbar-border: $header-border !default;
-$toolbar-gradient: none !default;
+$toolbar-gradient: false !default;
 
 
 // Input
@@ -319,17 +325,17 @@ $link-hover-text: $link-hover-color !default;
 $node-text: $base-text !default;
 $node-bg: $base-bg !default;
 $node-border: $base-border !default;
-$node-gradient: none !default;
+$node-gradient: false !default;
 
 $node-hovered-text: $list-group-action-hover-color !default;
 $node-hovered-bg: $list-group-hover-bg !default;
 $node-hovered-border: $node-hovered-bg !default;
-$node-hovered-gradient: none !default;
+$node-hovered-gradient: false !default;
 
 $node-selected-text: $selected-text !default;
 $node-selected-bg: $selected-bg !default;
 $node-selected-border: $selected-border !default;
-$node-selected-gradient: none !default;
+$node-selected-gradient: false !default;
 
 
 // List item
@@ -360,8 +366,8 @@ $tab-item-selected-border: $nav-tabs-link-active-border-color !default;
 
 
 // Grid
-$grid-bg: $panel-bg !default;
-$grid-text: contrast-wcag( $grid-bg, $gray-900 ) !default;
+$grid-bg: $table-bg !default;
+$grid-text: $table-color !default;
 $grid-border: $table-border-color !default;
 
 $grid-alt-text: $grid-text !default;
@@ -372,6 +378,11 @@ $grid-hovered-text: $grid-text !default;
 $grid-hovered-bg: rgba( $grid-hovered-text, .065) !default;
 $grid-hovered-border: $grid-border !default;
 
+$grid-header-bg: $header-bg !default;
+$grid-header-text: $header-text !default;
+$grid-header-border: $header-border !default;
+
+
 //Pager
 $pager-text: $pagination-color !default;
 $pager-bg: $pagination-bg !default;
@@ -401,25 +412,25 @@ $notification-error-border: theme-color-level("danger", -9) !default;
 
 
 // Window
-$window-text: $body-color !default;
+$window-text: $modal-content-color !default;
 $window-bg: $modal-content-bg !default;
 $window-border: $modal-content-border-color !default;
 
-$window-titlebar-text: $window-text !default;
-$window-titlebar-bg: $window-bg !default;
+$window-titlebar-text: $modal-header-color !default;
+$window-titlebar-bg: $modal-header-bg !default;
 $window-titlebar-border: $modal-header-border-color !default;
 
 
 // Progress
-$progress-text: $body-color !default;
 $progress-bg: $progress-bg !default;
+$progress-text: $progress-color !default;
 $progress-border: transparent !default;
-$progress-gradient: none !default;
+$progress-gradient: false !default;
 
-$progress-fill-text: $progress-bar-color !default;
 $progress-fill-bg:  $progress-bar-bg !default;
+$progress-fill-text: $progress-bar-color !default;
 $progress-fill-border: transparent !default;
-$progress-fill-gradient: none !default;
+$progress-fill-gradient: false !default;
 
 
 // Chart