diff --git a/package.json b/package.json
index 9da37bc..4d880a8 100644
--- a/package.json
+++ b/package.json
@@ -12,27 +12,27 @@
     "url": "git@github.com:mrholek/CoreUI-React.git"
   },
   "dependencies": {
-    "@coreui/coreui": "^2.0.0-beta.6",
+    "@coreui/coreui": "^2.0.0-beta.8",
     "@coreui/react": "^2.0.0-beta",
-    "babel-jest": "^22.4.3",
-    "bootstrap": "4.0.0",
+    "bootstrap": "^4.1.0",
     "chart.js": "^2.7.2",
-    "classnames": "^2.2.3",
+    "classnames": "^2.2.5",
     "flag-icon-css": "^3.0.0",
     "font-awesome": "^4.7.0",
-    "node-sass-chokidar": "^1.2.2",
     "prop-types": "^15.6.1",
-    "react": "^16.3.1",
+    "react": "^16.3.2",
     "react-chartjs-2": "^2.7.0",
-    "react-dom": "^16.3.1",
+    "react-dom": "^16.3.2",
     "react-router-config": "^1.0.0-beta.4",
     "react-router-dom": "^4.2.2",
-    "react-scripts": "^1.1.4",
     "reactstrap": "^5.0.0",
     "simple-line-icons": "^2.4.1"
   },
   "devDependencies": {
-    "npm-run-all": "^4.1.2"
+    "babel-jest": "^22.4.3",
+    "node-sass-chokidar": "^1.2.2",
+    "npm-run-all": "^4.1.2",
+    "react-scripts": "^1.1.4"
   },
   "scripts": {
     "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules src/ -o src/",
diff --git a/src/scss/style.css b/src/scss/style.css
index bbd02fe..627135b 100644
--- a/src/scss/style.css
+++ b/src/scss/style.css
@@ -1,13 +1,13 @@
 @charset "UTF-8";
 /*!
  * CoreUI - Open Source Dashboard UI Kit
- * @version v2.0.0-beta.6
+ * @version v2.0.0-beta.8
  * @link https://coreui.io
  * Copyright (c) 2018 creativeLabs Łukasz Holeczek
  * Licensed under MIT (https://coreui.io/license)
  */
 /*!
- * Bootstrap v4.0.0 (https://getbootstrap.com)
+ * Bootstrap v4.1.0 (https://getbootstrap.com/)
  * Copyright 2011-2018 The Bootstrap Authors
  * Copyright 2011-2018 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/master/LICENSE)
@@ -210,7 +210,7 @@ th {
 
 label {
   display: inline-block;
-  margin-bottom: .5rem; }
+  margin-bottom: 0.5rem; }
 
 button {
   border-radius: 0; }
@@ -1087,6 +1087,12 @@ pre {
   .table-bordered thead td {
     border-bottom-width: 2px; }
 
+.table-borderless th,
+.table-borderless td,
+.table-borderless thead th,
+.table-borderless tbody + tbody {
+  border: 0; }
+
 .table-striped tbody tr:nth-of-type(odd) {
   background-color: rgba(0, 0, 0, 0.05); }
 
@@ -1277,6 +1283,9 @@ pre {
   border: 1px solid #e4e7ea;
   border-radius: 0.25rem;
   transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .form-control {
+      transition: none; } }
   .form-control::-ms-expand {
     background-color: transparent;
     border: 0; }
@@ -1331,6 +1340,7 @@ select.form-control:focus::-ms-value {
   padding-bottom: 0.375rem;
   margin-bottom: 0;
   line-height: 1.5;
+  color: #23282c;
   background-color: transparent;
   border: solid transparent;
   border-width: 1px 0; }
@@ -1601,7 +1611,8 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
       vertical-align: middle; }
     .form-inline .form-control-plaintext {
       display: inline-block; }
-    .form-inline .input-group {
+    .form-inline .input-group,
+    .form-inline .custom-select {
       width: auto; }
     .form-inline .form-check {
       display: flex;
@@ -1633,6 +1644,9 @@ select.form-control-lg:not([size]):not([multiple]), .input-group-lg > select.for
   line-height: 1.5;
   border-radius: 0.25rem;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .btn {
+      transition: none; } }
   .btn:hover, .btn:focus {
     text-decoration: none; }
   .btn:focus, .btn.focus {
@@ -2031,7 +2045,8 @@ fieldset:disabled a.btn {
     border-color: transparent;
     box-shadow: none; }
   .btn-link:disabled, .btn-link.disabled {
-    color: #73818f; }
+    color: #73818f;
+    pointer-events: none; }
 
 .btn-lg, .btn-group-lg > .btn {
   padding: 0.5rem 1rem;
@@ -2057,30 +2072,29 @@ input[type="button"].btn-block {
   width: 100%; }
 
 .fade {
-  opacity: 0;
   transition: opacity 0.15s linear; }
-  .fade.show {
-    opacity: 1; }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .fade {
+      transition: none; } }
+  .fade:not(.show) {
+    opacity: 0; }
 
-.collapse {
+.collapse:not(.show) {
   display: none; }
-  .collapse.show {
-    display: block; }
-
-tr.collapse.show {
-  display: table-row; }
-
-tbody.collapse.show {
-  display: table-row-group; }
 
 .collapsing {
   position: relative;
   height: 0;
   overflow: hidden;
   transition: height 0.35s ease; }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .collapsing {
+      transition: none; } }
 
 .dropup,
-.dropdown {
+.dropright,
+.dropdown,
+.dropleft {
   position: relative; }
 
 .dropdown-toggle::after {
@@ -2117,7 +2131,13 @@ tbody.collapse.show {
   border: 1px solid #c8ced3;
   border-radius: 0.25rem; }
 
+.dropdown-menu-right {
+  right: 0;
+  left: auto; }
+
 .dropup .dropdown-menu {
+  top: auto;
+  bottom: 100%;
   margin-top: 0;
   margin-bottom: 0.125rem; }
 
@@ -2137,6 +2157,9 @@ tbody.collapse.show {
   margin-left: 0; }
 
 .dropright .dropdown-menu {
+  top: 0;
+  right: auto;
+  left: 100%;
   margin-top: 0;
   margin-left: 0.125rem; }
 
@@ -2148,6 +2171,7 @@ tbody.collapse.show {
   vertical-align: 0.255em;
   content: "";
   border-top: 0.3em solid transparent;
+  border-right: 0;
   border-bottom: 0.3em solid transparent;
   border-left: 0.3em solid; }
 
@@ -2158,6 +2182,9 @@ tbody.collapse.show {
   vertical-align: 0; }
 
 .dropleft .dropdown-menu {
+  top: 0;
+  right: 100%;
+  left: auto;
   margin-top: 0;
   margin-right: 0.125rem; }
 
@@ -2189,6 +2216,10 @@ tbody.collapse.show {
 .dropleft .dropdown-toggle::before {
   vertical-align: 0; }
 
+.dropdown-menu[x-placement^="top"], .dropdown-menu[x-placement^="right"], .dropdown-menu[x-placement^="bottom"], .dropdown-menu[x-placement^="left"] {
+  right: auto;
+  bottom: auto; }
+
 .dropdown-divider {
   height: 0;
   margin: 0.5rem 0;
@@ -2229,6 +2260,11 @@ tbody.collapse.show {
   color: #73818f;
   white-space: nowrap; }
 
+.dropdown-item-text {
+  display: block;
+  padding: 0.25rem 1.5rem;
+  color: #23282c; }
+
 .btn-group,
 .btn-group-vertical {
   position: relative;
@@ -2279,8 +2315,12 @@ tbody.collapse.show {
 .dropdown-toggle-split {
   padding-right: 0.5625rem;
   padding-left: 0.5625rem; }
-  .dropdown-toggle-split::after {
+  .dropdown-toggle-split::after,
+  .dropup .dropdown-toggle-split::after,
+  .dropright .dropdown-toggle-split::after {
     margin-left: 0; }
+  .dropleft .dropdown-toggle-split::before {
+    margin-right: 0; }
 
 .btn-sm + .dropdown-toggle-split, .btn-group-sm > .btn + .dropdown-toggle-split {
   padding-right: 0.375rem;
@@ -2362,11 +2402,11 @@ tbody.collapse.show {
     display: flex;
     align-items: center; }
     .input-group > .custom-file:not(:last-child) .custom-file-label,
-    .input-group > .custom-file:not(:last-child) .custom-file-label::before {
+    .input-group > .custom-file:not(:last-child) .custom-file-label::after {
       border-top-right-radius: 0;
       border-bottom-right-radius: 0; }
     .input-group > .custom-file:not(:first-child) .custom-file-label,
-    .input-group > .custom-file:not(:first-child) .custom-file-label::before {
+    .input-group > .custom-file:not(:first-child) .custom-file-label::after {
       border-top-left-radius: 0;
       border-bottom-left-radius: 0; }
 
@@ -2570,10 +2610,10 @@ tbody.collapse.show {
   height: calc(2.0625rem + 2px);
   margin: 0;
   opacity: 0; }
-  .custom-file-input:focus ~ .custom-file-control {
+  .custom-file-input:focus ~ .custom-file-label {
     border-color: #8ad4ee;
     box-shadow: 0 0 0 0.2rem rgba(32, 168, 216, 0.25); }
-    .custom-file-input:focus ~ .custom-file-control::before {
+    .custom-file-input:focus ~ .custom-file-label::after {
       border-color: #8ad4ee; }
   .custom-file-input:lang(en) ~ .custom-file-label::after {
     content: "Browse"; }
@@ -2607,6 +2647,84 @@ tbody.collapse.show {
     border-left: 1px solid #e4e7ea;
     border-radius: 0 0.25rem 0.25rem 0; }
 
+.custom-range {
+  width: 100%;
+  padding-left: 0;
+  background-color: transparent;
+  appearance: none; }
+  .custom-range:focus {
+    outline: none; }
+  .custom-range::-moz-focus-outer {
+    border: 0; }
+  .custom-range::-webkit-slider-thumb {
+    width: 1rem;
+    height: 1rem;
+    margin-top: -0.25rem;
+    background-color: #20a8d8;
+    border: 0;
+    border-radius: 1rem;
+    appearance: none; }
+    .custom-range::-webkit-slider-thumb:focus {
+      outline: none;
+      box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgba(32, 168, 216, 0.25); }
+    .custom-range::-webkit-slider-thumb:active {
+      background-color: #b6e4f4; }
+  .custom-range::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 0.5rem;
+    color: transparent;
+    cursor: pointer;
+    background-color: #c8ced3;
+    border-color: transparent;
+    border-radius: 1rem; }
+  .custom-range::-moz-range-thumb {
+    width: 1rem;
+    height: 1rem;
+    background-color: #20a8d8;
+    border: 0;
+    border-radius: 1rem;
+    appearance: none; }
+    .custom-range::-moz-range-thumb:focus {
+      outline: none;
+      box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgba(32, 168, 216, 0.25); }
+    .custom-range::-moz-range-thumb:active {
+      background-color: #b6e4f4; }
+  .custom-range::-moz-range-track {
+    width: 100%;
+    height: 0.5rem;
+    color: transparent;
+    cursor: pointer;
+    background-color: #c8ced3;
+    border-color: transparent;
+    border-radius: 1rem; }
+  .custom-range::-ms-thumb {
+    width: 1rem;
+    height: 1rem;
+    background-color: #20a8d8;
+    border: 0;
+    border-radius: 1rem;
+    appearance: none; }
+    .custom-range::-ms-thumb:focus {
+      outline: none;
+      box-shadow: 0 0 0 1px #e4e5e6, 0 0 0 0.2rem rgba(32, 168, 216, 0.25); }
+    .custom-range::-ms-thumb:active {
+      background-color: #b6e4f4; }
+  .custom-range::-ms-track {
+    width: 100%;
+    height: 0.5rem;
+    color: transparent;
+    cursor: pointer;
+    background-color: transparent;
+    border-color: transparent;
+    border-width: 0.5rem; }
+  .custom-range::-ms-fill-lower {
+    background-color: #c8ced3;
+    border-radius: 1rem; }
+  .custom-range::-ms-fill-upper {
+    margin-right: 15px;
+    background-color: #c8ced3;
+    border-radius: 1rem; }
+
 .nav {
   display: flex;
   flex-wrap: wrap;
@@ -2752,9 +2870,6 @@ tbody.collapse.show {
       flex-direction: row; }
       .navbar-expand-sm .navbar-nav .dropdown-menu {
         position: absolute; }
-      .navbar-expand-sm .navbar-nav .dropdown-menu-right {
-        right: 0;
-        left: auto; }
       .navbar-expand-sm .navbar-nav .nav-link {
         padding-right: 0.5rem;
         padding-left: 0.5rem; }
@@ -2765,10 +2880,7 @@ tbody.collapse.show {
       display: flex !important;
       flex-basis: auto; }
     .navbar-expand-sm .navbar-toggler {
-      display: none; }
-    .navbar-expand-sm .dropup .dropdown-menu {
-      top: auto;
-      bottom: 100%; } }
+      display: none; } }
 
 @media (max-width: 767.98px) {
   .navbar-expand-md > .container,
@@ -2784,9 +2896,6 @@ tbody.collapse.show {
       flex-direction: row; }
       .navbar-expand-md .navbar-nav .dropdown-menu {
         position: absolute; }
-      .navbar-expand-md .navbar-nav .dropdown-menu-right {
-        right: 0;
-        left: auto; }
       .navbar-expand-md .navbar-nav .nav-link {
         padding-right: 0.5rem;
         padding-left: 0.5rem; }
@@ -2797,10 +2906,7 @@ tbody.collapse.show {
       display: flex !important;
       flex-basis: auto; }
     .navbar-expand-md .navbar-toggler {
-      display: none; }
-    .navbar-expand-md .dropup .dropdown-menu {
-      top: auto;
-      bottom: 100%; } }
+      display: none; } }
 
 @media (max-width: 991.98px) {
   .navbar-expand-lg > .container,
@@ -2816,9 +2922,6 @@ tbody.collapse.show {
       flex-direction: row; }
       .navbar-expand-lg .navbar-nav .dropdown-menu {
         position: absolute; }
-      .navbar-expand-lg .navbar-nav .dropdown-menu-right {
-        right: 0;
-        left: auto; }
       .navbar-expand-lg .navbar-nav .nav-link {
         padding-right: 0.5rem;
         padding-left: 0.5rem; }
@@ -2829,10 +2932,7 @@ tbody.collapse.show {
       display: flex !important;
       flex-basis: auto; }
     .navbar-expand-lg .navbar-toggler {
-      display: none; }
-    .navbar-expand-lg .dropup .dropdown-menu {
-      top: auto;
-      bottom: 100%; } }
+      display: none; } }
 
 @media (max-width: 1199.98px) {
   .navbar-expand-xl > .container,
@@ -2848,9 +2948,6 @@ tbody.collapse.show {
       flex-direction: row; }
       .navbar-expand-xl .navbar-nav .dropdown-menu {
         position: absolute; }
-      .navbar-expand-xl .navbar-nav .dropdown-menu-right {
-        right: 0;
-        left: auto; }
       .navbar-expand-xl .navbar-nav .nav-link {
         padding-right: 0.5rem;
         padding-left: 0.5rem; }
@@ -2861,10 +2958,7 @@ tbody.collapse.show {
       display: flex !important;
       flex-basis: auto; }
     .navbar-expand-xl .navbar-toggler {
-      display: none; }
-    .navbar-expand-xl .dropup .dropdown-menu {
-      top: auto;
-      bottom: 100%; } }
+      display: none; } }
 
 .navbar-expand {
   flex-flow: row nowrap;
@@ -2877,9 +2971,6 @@ tbody.collapse.show {
     flex-direction: row; }
     .navbar-expand .navbar-nav .dropdown-menu {
       position: absolute; }
-    .navbar-expand .navbar-nav .dropdown-menu-right {
-      right: 0;
-      left: auto; }
     .navbar-expand .navbar-nav .nav-link {
       padding-right: 0.5rem;
       padding-left: 0.5rem; }
@@ -2891,9 +2982,6 @@ tbody.collapse.show {
     flex-basis: auto; }
   .navbar-expand .navbar-toggler {
     display: none; }
-  .navbar-expand .dropup .dropdown-menu {
-    top: auto;
-    bottom: 100%; }
 
 .navbar-light .navbar-brand {
   color: rgba(0, 0, 0, 0.9); }
@@ -3122,11 +3210,29 @@ tbody.collapse.show {
 @media (min-width: 576px) {
   .card-columns {
     column-count: 3;
-    column-gap: 1.25rem; }
+    column-gap: 1.25rem;
+    orphans: 1;
+    widows: 1; }
     .card-columns .card {
       display: inline-block;
       width: 100%; } }
 
+.accordion .card:not(:first-of-type):not(:last-of-type) {
+  border-bottom: 0;
+  border-radius: 0; }
+
+.accordion .card:not(:first-of-type) .card-header:first-child {
+  border-radius: 0; }
+
+.accordion .card:first-of-type {
+  border-bottom: 0;
+  border-bottom-right-radius: 0;
+  border-bottom-left-radius: 0; }
+
+.accordion .card:last-of-type {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0; }
+
 .breadcrumb {
   display: flex;
   flex-wrap: wrap;
@@ -3134,14 +3240,15 @@ tbody.collapse.show {
   margin-bottom: 1.5rem;
   list-style: none;
   background-color: #fff;
-  border-radius: 0.25rem; }
+  border-radius: 0; }
 
-.breadcrumb-item + .breadcrumb-item::before {
-  display: inline-block;
-  padding-right: 0.5rem;
-  padding-left: 0.5rem;
-  color: #73818f;
-  content: "/"; }
+.breadcrumb-item + .breadcrumb-item {
+  padding-left: 0.5rem; }
+  .breadcrumb-item + .breadcrumb-item::before {
+    display: inline-block;
+    padding-right: 0.5rem;
+    color: #73818f;
+    content: "/"; }
 
 .breadcrumb-item + .breadcrumb-item:hover::before {
   text-decoration: underline; }
@@ -3168,6 +3275,7 @@ tbody.collapse.show {
   background-color: #fff;
   border: 1px solid #c8ced3; }
   .page-link:hover {
+    z-index: 2;
     color: #167495;
     text-decoration: none;
     background-color: #e4e7ea;
@@ -3441,8 +3549,12 @@ tbody.collapse.show {
   justify-content: center;
   color: #fff;
   text-align: center;
+  white-space: nowrap;
   background-color: #20a8d8;
   transition: width 0.6s ease; }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .progress-bar {
+      transition: none; } }
 
 .progress-bar-striped {
   background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.15) 75%, transparent 75%, transparent);
@@ -3647,6 +3759,9 @@ button.close {
   .modal.fade .modal-dialog {
     transition: transform 0.3s ease-out;
     transform: translate(0, -25%); }
+    @media screen and (prefers-reduced-motion: reduce) {
+      .modal.fade .modal-dialog {
+        transition: none; } }
   .modal.show .modal-dialog {
     transform: translate(0, 0); }
 
@@ -3970,6 +4085,9 @@ button.close {
   transition: transform 0.6s ease;
   backface-visibility: hidden;
   perspective: 1000px; }
+  @media screen and (prefers-reduced-motion: reduce) {
+    .carousel-item {
+      transition: none; } }
 
 .carousel-item.active,
 .carousel-item-next,
@@ -4005,6 +4123,34 @@ button.close {
     .active.carousel-item-left {
       transform: translate3d(-100%, 0, 0); } }
 
+.carousel-fade .carousel-item {
+  opacity: 0;
+  transition-duration: .6s;
+  transition-property: opacity; }
+
+.carousel-fade .carousel-item.active,
+.carousel-fade .carousel-item-next.carousel-item-left,
+.carousel-fade .carousel-item-prev.carousel-item-right {
+  opacity: 1; }
+
+.carousel-fade .active.carousel-item-left,
+.carousel-fade .active.carousel-item-right {
+  opacity: 0; }
+
+.carousel-fade .carousel-item-next,
+.carousel-fade .carousel-item-prev,
+.carousel-fade .carousel-item.active,
+.carousel-fade .active.carousel-item-left,
+.carousel-fade .active.carousel-item-prev {
+  transform: translateX(0); }
+  @supports (transform-style: preserve-3d) {
+    .carousel-fade .carousel-item-next,
+    .carousel-fade .carousel-item-prev,
+    .carousel-fade .carousel-item.active,
+    .carousel-fade .active.carousel-item-left,
+    .carousel-fade .active.carousel-item-prev {
+      transform: translate3d(0, 0, 0); } }
+
 .carousel-control-prev,
 .carousel-control-next {
   position: absolute;
@@ -4453,6 +4599,21 @@ button.bg-dark:focus {
 .flex-wrap-reverse {
   flex-wrap: wrap-reverse !important; }
 
+.flex-fill {
+  flex: 1 1 auto !important; }
+
+.flex-grow-0 {
+  flex-grow: 0 !important; }
+
+.flex-grow-1 {
+  flex-grow: 1 !important; }
+
+.flex-shrink-0 {
+  flex-shrink: 0 !important; }
+
+.flex-shrink-1 {
+  flex-shrink: 1 !important; }
+
 .justify-content-start {
   justify-content: flex-start !important; }
 
@@ -4534,6 +4695,16 @@ button.bg-dark:focus {
     flex-wrap: nowrap !important; }
   .flex-sm-wrap-reverse {
     flex-wrap: wrap-reverse !important; }
+  .flex-sm-fill {
+    flex: 1 1 auto !important; }
+  .flex-sm-grow-0 {
+    flex-grow: 0 !important; }
+  .flex-sm-grow-1 {
+    flex-grow: 1 !important; }
+  .flex-sm-shrink-0 {
+    flex-shrink: 0 !important; }
+  .flex-sm-shrink-1 {
+    flex-shrink: 1 !important; }
   .justify-content-sm-start {
     justify-content: flex-start !important; }
   .justify-content-sm-end {
@@ -4594,6 +4765,16 @@ button.bg-dark:focus {
     flex-wrap: nowrap !important; }
   .flex-md-wrap-reverse {
     flex-wrap: wrap-reverse !important; }
+  .flex-md-fill {
+    flex: 1 1 auto !important; }
+  .flex-md-grow-0 {
+    flex-grow: 0 !important; }
+  .flex-md-grow-1 {
+    flex-grow: 1 !important; }
+  .flex-md-shrink-0 {
+    flex-shrink: 0 !important; }
+  .flex-md-shrink-1 {
+    flex-shrink: 1 !important; }
   .justify-content-md-start {
     justify-content: flex-start !important; }
   .justify-content-md-end {
@@ -4654,6 +4835,16 @@ button.bg-dark:focus {
     flex-wrap: nowrap !important; }
   .flex-lg-wrap-reverse {
     flex-wrap: wrap-reverse !important; }
+  .flex-lg-fill {
+    flex: 1 1 auto !important; }
+  .flex-lg-grow-0 {
+    flex-grow: 0 !important; }
+  .flex-lg-grow-1 {
+    flex-grow: 1 !important; }
+  .flex-lg-shrink-0 {
+    flex-shrink: 0 !important; }
+  .flex-lg-shrink-1 {
+    flex-shrink: 1 !important; }
   .justify-content-lg-start {
     justify-content: flex-start !important; }
   .justify-content-lg-end {
@@ -4714,6 +4905,16 @@ button.bg-dark:focus {
     flex-wrap: nowrap !important; }
   .flex-xl-wrap-reverse {
     flex-wrap: wrap-reverse !important; }
+  .flex-xl-fill {
+    flex: 1 1 auto !important; }
+  .flex-xl-grow-0 {
+    flex-grow: 0 !important; }
+  .flex-xl-grow-1 {
+    flex-grow: 1 !important; }
+  .flex-xl-shrink-0 {
+    flex-shrink: 0 !important; }
+  .flex-xl-shrink-1 {
+    flex-shrink: 1 !important; }
   .justify-content-xl-start {
     justify-content: flex-start !important; }
   .justify-content-xl-end {
@@ -4843,7 +5044,6 @@ button.bg-dark:focus {
   overflow: hidden;
   clip: rect(0, 0, 0, 0);
   white-space: nowrap;
-  clip-path: inset(50%);
   border: 0; }
 
 .sr-only-focusable:active, .sr-only-focusable:focus {
@@ -4852,8 +5052,19 @@ button.bg-dark:focus {
   height: auto;
   overflow: visible;
   clip: auto;
-  white-space: normal;
-  clip-path: none; }
+  white-space: normal; }
+
+.shadow-sm {
+  box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075) !important; }
+
+.shadow {
+  box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15) !important; }
+
+.shadow-lg {
+  box-shadow: 0 1rem 3rem rgba(0, 0, 0, 0.175) !important; }
+
+.shadow-none {
+  box-shadow: none !important; }
 
 .w-25 {
   width: 25% !important; }
@@ -4867,6 +5078,9 @@ button.bg-dark:focus {
 .w-100 {
   width: 100% !important; }
 
+.w-auto {
+  width: auto !important; }
+
 .h-25 {
   height: 25% !important; }
 
@@ -4879,6 +5093,9 @@ button.bg-dark:focus {
 .h-100 {
   height: 100% !important; }
 
+.h-auto {
+  height: auto !important; }
+
 .mw-100 {
   max-width: 100% !important; }
 
@@ -5868,6 +6085,9 @@ button.bg-dark:focus {
   .mx-xl-auto {
     margin-left: auto !important; } }
 
+.text-monospace {
+  font-family: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; }
+
 .text-justify {
   text-align: justify !important; }
 
@@ -5992,9 +6212,18 @@ a.text-light:hover, a.text-light:focus {
 a.text-dark:hover, a.text-dark:focus {
   color: #181b1e !important; }
 
+.text-body {
+  color: #23282c !important; }
+
 .text-muted {
   color: #73818f !important; }
 
+.text-black-50 {
+  color: rgba(0, 0, 0, 0.5) !important; }
+
+.text-white-50 {
+  color: rgba(255, 255, 255, 0.5) !important; }
+
 .text-hide {
   font: 0/0 a;
   color: transparent;
@@ -6022,7 +6251,7 @@ a.text-dark:hover, a.text-dark:focus {
     white-space: pre-wrap !important; }
   pre,
   blockquote {
-    border: 1px solid #999;
+    border: 1px solid #8f9ba6;
     page-break-inside: avoid; }
   thead {
     display: table-header-group; }
@@ -6054,7 +6283,7 @@ a.text-dark:hover, a.text-dark:focus {
       background-color: #fff !important; }
   .table-bordered th,
   .table-bordered td {
-    border: 1px solid #ddd !important; } }
+    border: 1px solid #c8ced3 !important; } }
 
 .animated {
   animation-duration: 1s; }
@@ -6198,16 +6427,11 @@ a.text-dark:hover, a.text-dark:focus {
     .aside-menu .tab-content .tab-pane {
       padding: 0; }
 
-.img-avatar {
-  border-radius: 50em; }
-
 .avatar {
   position: relative;
   display: inline-block;
-  width: 36px; }
-  .avatar .img-avatar {
-    width: 36px;
-    height: 36px; }
+  width: 36px;
+  height: 36px; }
   .avatar .avatar-status {
     position: absolute;
     right: 0;
@@ -6217,49 +6441,15 @@ a.text-dark:hover, a.text-dark:focus {
     height: 10px;
     border: 1px solid #fff;
     border-radius: 50em; }
+  .avatar > img {
+    vertical-align: initial; }
 
-.avatar.avatar-xs {
+.avatar-lg {
   position: relative;
   display: inline-block;
-  width: 20px; }
-  .avatar.avatar-xs .img-avatar {
-    width: 20px;
-    height: 20px; }
-  .avatar.avatar-xs .avatar-status {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    display: block;
-    width: 8px;
-    height: 8px;
-    border: 1px solid #fff;
-    border-radius: 50em; }
-
-.avatar.avatar-sm {
-  position: relative;
-  display: inline-block;
-  width: 24px; }
-  .avatar.avatar-sm .img-avatar {
-    width: 24px;
-    height: 24px; }
-  .avatar.avatar-sm .avatar-status {
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    display: block;
-    width: 8px;
-    height: 8px;
-    border: 1px solid #fff;
-    border-radius: 50em; }
-
-.avatar.avatar-lg {
-  position: relative;
-  display: inline-block;
-  width: 72px; }
-  .avatar.avatar-lg .img-avatar {
-    width: 72px;
-    height: 72px; }
-  .avatar.avatar-lg .avatar-status {
+  width: 72px;
+  height: 72px; }
+  .avatar-lg .avatar-status {
     position: absolute;
     right: 0;
     bottom: 0;
@@ -6269,15 +6459,51 @@ a.text-dark:hover, a.text-dark:focus {
     border: 1px solid #fff;
     border-radius: 50em; }
 
-.avatars-stack .avatar.avatar-xs {
-  margin-right: -10px; }
+.avatar-sm {
+  position: relative;
+  display: inline-block;
+  width: 24px;
+  height: 24px; }
+  .avatar-sm .avatar-status {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: block;
+    width: 8px;
+    height: 8px;
+    border: 1px solid #fff;
+    border-radius: 50em; }
+
+.avatar-xs {
+  position: relative;
+  display: inline-block;
+  width: 20px;
+  height: 20px; }
+  .avatar-xs .avatar-status {
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    display: block;
+    width: 8px;
+    height: 8px;
+    border: 1px solid #fff;
+    border-radius: 50em; }
 
 .avatars-stack .avatar {
-  margin-right: -15px;
-  transition: margin-left 0.25s, margin-right 0.25s; }
+  margin-right: -18px;
+  transition: margin-right 0.25s; }
   .avatars-stack .avatar:hover {
     margin-right: 0; }
 
+.avatars-stack .avatar-lg {
+  margin-right: -36px; }
+
+.avatars-stack .avatar-sm {
+  margin-right: -12px; }
+
+.avatars-stack .avatar-xs {
+  margin-right: -10px; }
+
 .badge-pill {
   border-radius: 10rem; }
 
@@ -7503,6 +7729,12 @@ canvas {
   white-space: nowrap;
   vertical-align: middle; }
 
+.img-avatar, .avatar > img,
+.img-circle {
+  max-width: 100%;
+  height: auto;
+  border-radius: 50em; }
+
 #loading-bar,
 #loading-bar-spinner {
   -webkit-pointer-events: none;
@@ -7817,7 +8049,7 @@ canvas {
         left: 50%;
         margin-top: -16px;
         margin-left: 0; }
-      .app-header .nav-item .nav-link > .img-avatar {
+      .app-header .nav-item .nav-link > .img-avatar, .app-header .nav-item .avatar.nav-link > img {
         height: 35px;
         margin: 0 10px; }
   .app-header .dropdown-menu {
@@ -8240,7 +8472,7 @@ canvas {
   right: 50px;
   left: 0; }
 
-.switch-default {
+.switch {
   position: relative;
   display: inline-block;
   width: 40px;
@@ -8248,95 +8480,25 @@ canvas {
   vertical-align: top;
   cursor: pointer;
   background-color: transparent; }
-  .switch-default .switch-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0; }
-  .switch-default .switch-label {
-    position: relative;
-    display: block;
-    height: inherit;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    background-color: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 2px;
-    transition: opacity background .15s ease-out; }
-  .switch-default .switch-input:checked ~ .switch-label::before {
-    opacity: 0; }
-  .switch-default .switch-input:checked ~ .switch-label::after {
-    opacity: 1; }
-  .switch-default .switch-handle {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 20px;
-    height: 20px;
-    background: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 1px;
-    transition: left .15s ease-out; }
-  .switch-default .switch-input:checked ~ .switch-handle {
-    left: 18px; }
-  .switch-default.switch-lg {
-    width: 48px;
-    height: 28px; }
-    .switch-default.switch-lg .switch-label {
-      font-size: 12px; }
-    .switch-default.switch-lg .switch-handle {
-      width: 24px;
-      height: 24px; }
-    .switch-default.switch-lg .switch-input:checked ~ .switch-handle {
-      left: 22px; }
-  .switch-default.switch-sm {
-    width: 32px;
-    height: 20px; }
-    .switch-default.switch-sm .switch-label {
-      font-size: 8px; }
-    .switch-default.switch-sm .switch-handle {
-      width: 16px;
-      height: 16px; }
-    .switch-default.switch-sm .switch-input:checked ~ .switch-handle {
-      left: 14px; }
-  .switch-default.switch-xs {
-    width: 24px;
-    height: 16px; }
-    .switch-default.switch-xs .switch-label {
-      font-size: 7px; }
-    .switch-default.switch-xs .switch-handle {
-      width: 12px;
-      height: 12px; }
-    .switch-default.switch-xs .switch-input:checked ~ .switch-handle {
-      left: 10px; }
 
-.switch-text {
+.switch-input {
+  position: absolute;
+  top: 0;
+  left: 0;
+  opacity: 0; }
+
+.switch-label {
   position: relative;
-  display: inline-block;
-  width: 48px;
-  height: 24px;
-  vertical-align: top;
-  cursor: pointer;
-  background-color: transparent; }
-  .switch-text .switch-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0; }
-  .switch-text .switch-label {
-    position: relative;
-    display: block;
-    height: inherit;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    background-color: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 2px;
-    transition: opacity background .15s ease-out; }
-  .switch-text .switch-label::before,
-  .switch-text .switch-label::after {
+  display: block;
+  height: inherit;
+  font-size: 10px;
+  font-weight: 600;
+  text-transform: uppercase;
+  background-color: #fff;
+  border: 1px solid #c8ced3;
+  border-radius: 2px;
+  transition: opacity background .15s ease-out; }
+  .switch-label::before, .switch-label::after {
     position: absolute;
     top: 50%;
     width: 50%;
@@ -8344,224 +8506,35 @@ canvas {
     line-height: 1;
     text-align: center;
     transition: inherit; }
-  .switch-text .switch-label::before {
+  .switch-label::before {
     right: 1px;
     color: #e4e7ea;
     content: attr(data-off); }
-  .switch-text .switch-label::after {
+  .switch-label::after {
     left: 1px;
     color: #fff;
     content: attr(data-on);
     opacity: 0; }
-  .switch-text .switch-input:checked ~ .switch-label::before {
-    opacity: 0; }
-  .switch-text .switch-input:checked ~ .switch-label::after {
-    opacity: 1; }
-  .switch-text .switch-handle {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 20px;
-    height: 20px;
-    background: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 1px;
-    transition: left .15s ease-out; }
-  .switch-text .switch-input:checked ~ .switch-handle {
-    left: 26px; }
-  .switch-text.switch-lg {
-    width: 56px;
-    height: 28px; }
-    .switch-text.switch-lg .switch-label {
-      font-size: 12px; }
-    .switch-text.switch-lg .switch-handle {
-      width: 24px;
-      height: 24px; }
-    .switch-text.switch-lg .switch-input:checked ~ .switch-handle {
-      left: 30px; }
-  .switch-text.switch-sm {
-    width: 40px;
-    height: 20px; }
-    .switch-text.switch-sm .switch-label {
-      font-size: 8px; }
-    .switch-text.switch-sm .switch-handle {
-      width: 16px;
-      height: 16px; }
-    .switch-text.switch-sm .switch-input:checked ~ .switch-handle {
-      left: 22px; }
-  .switch-text.switch-xs {
-    width: 32px;
-    height: 16px; }
-    .switch-text.switch-xs .switch-label {
-      font-size: 7px; }
-    .switch-text.switch-xs .switch-handle {
-      width: 12px;
-      height: 12px; }
-    .switch-text.switch-xs .switch-input:checked ~ .switch-handle {
-      left: 18px; }
 
-.switch-icon {
-  position: relative;
-  display: inline-block;
-  width: 48px;
-  height: 24px;
-  vertical-align: top;
-  cursor: pointer;
-  background-color: transparent; }
-  .switch-icon .switch-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0; }
-  .switch-icon .switch-label {
-    position: relative;
-    display: block;
-    height: inherit;
-    font-family: FontAwesome;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    background-color: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 2px;
-    transition: opacity background .15s ease-out; }
-  .switch-icon .switch-label::before,
-  .switch-icon .switch-label::after {
-    position: absolute;
-    top: 50%;
-    width: 50%;
-    margin-top: -.5em;
-    line-height: 1;
-    text-align: center;
-    transition: inherit; }
-  .switch-icon .switch-label::before {
-    right: 1px;
-    color: #e4e7ea;
-    content: attr(data-off); }
-  .switch-icon .switch-label::after {
-    left: 1px;
-    color: #fff;
-    content: attr(data-on);
-    opacity: 0; }
-  .switch-icon .switch-input:checked ~ .switch-label::before {
-    opacity: 0; }
-  .switch-icon .switch-input:checked ~ .switch-label::after {
-    opacity: 1; }
-  .switch-icon .switch-handle {
-    position: absolute;
-    top: 2px;
-    left: 2px;
-    width: 20px;
-    height: 20px;
-    background: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 1px;
-    transition: left .15s ease-out; }
-  .switch-icon .switch-input:checked ~ .switch-handle {
-    left: 26px; }
-  .switch-icon.switch-lg {
-    width: 56px;
-    height: 28px; }
-    .switch-icon.switch-lg .switch-label {
-      font-size: 12px; }
-    .switch-icon.switch-lg .switch-handle {
-      width: 24px;
-      height: 24px; }
-    .switch-icon.switch-lg .switch-input:checked ~ .switch-handle {
-      left: 30px; }
-  .switch-icon.switch-sm {
-    width: 40px;
-    height: 20px; }
-    .switch-icon.switch-sm .switch-label {
-      font-size: 8px; }
-    .switch-icon.switch-sm .switch-handle {
-      width: 16px;
-      height: 16px; }
-    .switch-icon.switch-sm .switch-input:checked ~ .switch-handle {
-      left: 22px; }
-  .switch-icon.switch-xs {
-    width: 32px;
-    height: 16px; }
-    .switch-icon.switch-xs .switch-label {
-      font-size: 7px; }
-    .switch-icon.switch-xs .switch-handle {
-      width: 12px;
-      height: 12px; }
-    .switch-icon.switch-xs .switch-input:checked ~ .switch-handle {
-      left: 18px; }
+.switch-handle {
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 20px;
+  height: 20px;
+  background: #fff;
+  border: 1px solid #c8ced3;
+  border-radius: 1px;
+  transition: left .15s ease-out; }
 
-.switch-3d {
-  position: relative;
-  display: inline-block;
-  width: 40px;
-  height: 24px;
-  vertical-align: top;
-  cursor: pointer;
-  background-color: transparent; }
-  .switch-3d .switch-input {
-    position: absolute;
-    top: 0;
-    left: 0;
-    opacity: 0; }
-  .switch-3d .switch-label {
-    position: relative;
-    display: block;
-    height: inherit;
-    font-size: 10px;
-    font-weight: 600;
-    text-transform: uppercase;
-    background-color: #f0f3f5;
-    border: 1px solid #c8ced3;
-    border-radius: 2px;
-    transition: opacity background .15s ease-out; }
-  .switch-3d .switch-input:checked ~ .switch-label::before {
-    opacity: 0; }
-  .switch-3d .switch-input:checked ~ .switch-label::after {
-    opacity: 1; }
-  .switch-3d .switch-handle {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 24px;
-    height: 24px;
-    background: #fff;
-    border: 1px solid #c8ced3;
-    border-radius: 1px;
-    transition: left .15s ease-out;
-    border: 0;
-    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
-  .switch-3d .switch-input:checked ~ .switch-handle {
-    left: 16px; }
-  .switch-3d.switch-lg {
-    width: 48px;
-    height: 28px; }
-    .switch-3d.switch-lg .switch-label {
-      font-size: 12px; }
-    .switch-3d.switch-lg .switch-handle {
-      width: 28px;
-      height: 28px; }
-    .switch-3d.switch-lg .switch-input:checked ~ .switch-handle {
-      left: 20px; }
-  .switch-3d.switch-sm {
-    width: 32px;
-    height: 20px; }
-    .switch-3d.switch-sm .switch-label {
-      font-size: 8px; }
-    .switch-3d.switch-sm .switch-handle {
-      width: 20px;
-      height: 20px; }
-    .switch-3d.switch-sm .switch-input:checked ~ .switch-handle {
-      left: 12px; }
-  .switch-3d.switch-xs {
-    width: 24px;
-    height: 16px; }
-    .switch-3d.switch-xs .switch-label {
-      font-size: 7px; }
-    .switch-3d.switch-xs .switch-handle {
-      width: 16px;
-      height: 16px; }
-    .switch-3d.switch-xs .switch-input:checked ~ .switch-handle {
-      left: 8px; }
+.switch-input:checked ~ .switch-label::before {
+  opacity: 0; }
+
+.switch-input:checked ~ .switch-label::after {
+  opacity: 1; }
+
+.switch-input:checked ~ .switch-handle {
+  left: 18px; }
 
 .switch-primary > .switch-input:checked ~ .switch-label {
   background: #20a8d8;
@@ -8771,15 +8744,102 @@ canvas {
   background: #2f353a;
   border-color: #2f353a; }
 
-.switch-pill .switch-label, .switch-3d .switch-label,
-.switch-pill .switch-handle,
-.switch-3d .switch-handle {
+.switch-lg {
+  width: 48px;
+  height: 28px; }
+  .switch-lg .switch-label {
+    font-size: 12px; }
+  .switch-lg .switch-handle {
+    width: 24px;
+    height: 24px; }
+  .switch-lg .switch-input:checked ~ .switch-handle {
+    left: 22px; }
+
+.switch-sm {
+  width: 32px;
+  height: 20px; }
+  .switch-sm .switch-label {
+    font-size: 8px; }
+  .switch-sm .switch-handle {
+    width: 16px;
+    height: 16px; }
+  .switch-sm .switch-input:checked ~ .switch-handle {
+    left: 14px; }
+
+.switch-text {
+  width: 48px;
+  height: 24px; }
+  .switch-text .switch-label {
+    font-size: 10px; }
+  .switch-text .switch-handle {
+    width: 20px;
+    height: 20px; }
+  .switch-text .switch-input:checked ~ .switch-handle {
+    left: 26px; }
+  .switch-text.switch-lg {
+    width: 56px;
+    height: 28px; }
+    .switch-text.switch-lg .switch-label {
+      font-size: 12px; }
+    .switch-text.switch-lg .switch-handle {
+      width: 24px;
+      height: 24px; }
+    .switch-text.switch-lg .switch-input:checked ~ .switch-handle {
+      left: 30px; }
+  .switch-text.switch-sm {
+    width: 40px;
+    height: 20px; }
+    .switch-text.switch-sm .switch-label {
+      font-size: 8px; }
+    .switch-text.switch-sm .switch-handle {
+      width: 16px;
+      height: 16px; }
+    .switch-text.switch-sm .switch-input:checked ~ .switch-handle {
+      left: 22px; }
+
+.switch-3d .switch-label {
+  background-color: #f0f3f5;
   border-radius: 50em; }
 
-.switch-pill .switch-label::before, .switch-3d .switch-label::before {
+.switch-3d .switch-handle {
+  top: 0;
+  left: 0;
+  width: 24px;
+  height: 24px;
+  border: 0;
+  border-radius: 50em;
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.3); }
+
+.switch-3d.switch-lg {
+  width: 56px;
+  height: 28px; }
+  .switch-3d.switch-lg .switch-label {
+    font-size: 12px; }
+  .switch-3d.switch-lg .switch-handle {
+    width: 28px;
+    height: 28px; }
+  .switch-3d.switch-lg .switch-input:checked ~ .switch-handle {
+    left: 28px; }
+
+.switch-3d.switch-sm {
+  width: 40px;
+  height: 20px; }
+  .switch-3d.switch-sm .switch-label {
+    font-size: 8px; }
+  .switch-3d.switch-sm .switch-handle {
+    width: 20px;
+    height: 20px; }
+  .switch-3d.switch-sm .switch-input:checked ~ .switch-handle {
+    left: 20px; }
+
+.switch-pill .switch-label,
+.switch-pill .switch-handle {
+  border-radius: 50em; }
+
+.switch-pill .switch-label::before {
   right: 2px; }
 
-.switch-pill .switch-label::after, .switch-3d .switch-label::after {
+.switch-pill .switch-label::after {
   left: 2px; }
 
 .table-outline {
diff --git a/src/views/Base/Forms/Forms.js b/src/views/Base/Forms/Forms.js
index 50cdc1b..16e0a88 100644
--- a/src/views/Base/Forms/Forms.js
+++ b/src/views/Base/Forms/Forms.js
@@ -1,5 +1,6 @@
 import React, { Component } from 'react';
 import {
+  Badge,
   Button,
   ButtonDropdown,
   Card,
@@ -195,7 +196,7 @@ class Forms extends Component {
                   </FormGroup>
                   <FormGroup row>
                     <Col md="3">
-                      <Label htmlFor="date-input">Date Input</Label>
+                      <Label htmlFor="date-input">Date Input <Badge>NEW</Badge></Label>
                     </Col>
                     <Col xs="12" md="9">
                       <Input type="date" id="date-input" name="date-input" placeholder="date" />
diff --git a/src/views/Base/Switches/Switches.js b/src/views/Base/Switches/Switches.js
index 7c60e8c..4e3dc73 100644
--- a/src/views/Base/Switches/Switches.js
+++ b/src/views/Base/Switches/Switches.js
@@ -594,276 +594,6 @@ class Switches extends Component {
             </Card>
           </Col>
 
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                Switch with icon
-              </CardHeader>
-              <CardBody>
-                <Label className="switch switch-icon switch-primary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf164'} data-off={'\uf165'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-secondary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf087'} data-off={'\uf088'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf028'} data-off={'\uf026'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-              </CardBody>
-            </Card>
-          </Col>
-
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                Switch with icon - pills
-              </CardHeader>
-              <CardBody>
-                <Label className="switch switch-icon switch-pill switch-primary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-secondary">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-success">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-warning">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-info">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-danger">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-              </CardBody>
-            </Card>
-          </Col>
-
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                Switch with icon outline
-              </CardHeader>
-              <CardBody>
-                <Label className="switch switch-icon switch-primary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-secondary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-success-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-warning-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-info-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-danger-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-              </CardBody>
-            </Card>
-          </Col>
-
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                Switch with icon outline - pills
-              </CardHeader>
-              <CardBody>
-                <Label className="switch switch-icon switch-pill switch-primary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-secondary-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-success-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-warning-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-info-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-danger-outline">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-              </CardBody>
-            </Card>
-          </Col>
-
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                Switch with icon outline alternative
-              </CardHeader>
-              <CardBody>
-                <Label className="switch switch-icon switch-primary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-secondary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-success-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-warning-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-info-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-danger-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-              </CardBody>
-            </Card>
-          </Col>
-
-          <Col xs="12" md="6">
-            <Card>
-              <CardHeader>
-                Switch with icon outline alternative - pills
-              </CardHeader>
-              <CardBody>
-                <Label className="switch switch-icon switch-pill switch-primary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-secondary-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-success-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-warning-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-info-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-                &nbsp;&nbsp;&nbsp;
-                <Label className="switch switch-icon switch-pill switch-danger-outline-alt">
-                  <Input type="checkbox" className="switch-input" defaultChecked />
-                  <span className="switch-label" data-on={'\uf00c'} data-off={'\uf00d'}></span>
-                  <span className="switch-handle"></span>
-                </Label>
-              </CardBody>
-            </Card>
-          </Col>
-
           <Col xs="12">
             <Card>
               <CardHeader>
@@ -924,21 +654,6 @@ class Switches extends Component {
                       Add following class <code>.switch-sm</code>
                     </td>
                   </tr>
-                  <tr>
-                    <td>
-                      Extra small
-                    </td>
-                    <td>
-                      <Label className="switch switch-xs switch-3d switch-primary">
-                        <Input type="checkbox" className="switch-input" defaultChecked />
-                        <span className="switch-label"></span>
-                        <span className="switch-handle"></span>
-                      </Label>
-                    </td>
-                    <td>
-                      Add following class <code>.switch-xs</code>
-                    </td>
-                  </tr>
                   </tbody>
                 </Table>
               </CardBody>