diff --git a/CHANGELOG.md b/CHANGELOG.md
index 7c680a04..2289ae28 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,3 +1,26 @@
+## 1.6.0 (27.12.2021)
+
+### Dependencies:
+
+- Updated Bootstrap to 5.1.3 version.
+
+### Fixes and improvements:
+
+- Charts - resolved problem with `chartjs-plugin-datalabels` configuration,
+- Carousel - component should now work correctly inside components with `OnPush` change detection strategy,
+- Table - updated `dataSource` type to resolve problem with asynchronous data and async pipe,
+- File upload plugin - resolved problem with extensions handled by the `acceptedExtensions` input,
+- Popconfirm - target element will be now optional in modal display mode,
+- Sidenav - resolved problem with `child.querySelector is not a function` error when using `ngFor` directive to render sidenav items,
+- Popover - `mdbPopover` input will now correctly accept value with `TemplateRef` type.
+
+### New:
+
+- Dropdown - added new `closeOnOutsideClick`, `closeOnItemClick`, `closeOnEsc` inputs that allow to configure menu closing actions,
+- File upload plugin - added a new `reset` method that allow to reset component state to default settings.
+
+---
+
 ## 1.5.1 (22.11.2021)
 
 ### Fixes and improvements
diff --git a/README.txt b/README.txt
index bbfc4fba..6675a49e 100644
--- a/README.txt
+++ b/README.txt
@@ -1,6 +1,6 @@
 MDB 5 Angular
 
-Version: FREE 1.5.0
+Version: FREE 1.6.0
 
 Documentation:
 https://mdbootstrap.com/docs/b5/angular/
diff --git a/package-lock.json b/package-lock.json
index e8006c64..e25788c6 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "mdb-angular-ui-kit-free",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/package.json b/package.json
index 1ede843f..3525331d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "mdb-angular-ui-kit-free",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
diff --git a/projects/mdb-angular-ui-kit/CHANGELOG.md b/projects/mdb-angular-ui-kit/CHANGELOG.md
index 7c680a04..2289ae28 100644
--- a/projects/mdb-angular-ui-kit/CHANGELOG.md
+++ b/projects/mdb-angular-ui-kit/CHANGELOG.md
@@ -1,3 +1,26 @@
+## 1.6.0 (27.12.2021)
+
+### Dependencies:
+
+- Updated Bootstrap to 5.1.3 version.
+
+### Fixes and improvements:
+
+- Charts - resolved problem with `chartjs-plugin-datalabels` configuration,
+- Carousel - component should now work correctly inside components with `OnPush` change detection strategy,
+- Table - updated `dataSource` type to resolve problem with asynchronous data and async pipe,
+- File upload plugin - resolved problem with extensions handled by the `acceptedExtensions` input,
+- Popconfirm - target element will be now optional in modal display mode,
+- Sidenav - resolved problem with `child.querySelector is not a function` error when using `ngFor` directive to render sidenav items,
+- Popover - `mdbPopover` input will now correctly accept value with `TemplateRef` type.
+
+### New:
+
+- Dropdown - added new `closeOnOutsideClick`, `closeOnItemClick`, `closeOnEsc` inputs that allow to configure menu closing actions,
+- File upload plugin - added a new `reset` method that allow to reset component state to default settings.
+
+---
+
 ## 1.5.1 (22.11.2021)
 
 ### Fixes and improvements
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_card.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_card.scss
index ede83f95..530228bc 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_card.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_card.scss
@@ -13,6 +13,7 @@
   background-clip: border-box;
   border: $card-border-width solid $card-border-color;
   @include border-radius($card-border-radius);
+  @include box-shadow($card-box-shadow);
 
   > hr {
     margin-right: 0;
@@ -55,7 +56,7 @@
 }
 
 .card-subtitle {
-  margin-top: -$card-title-spacer-y / 2;
+  margin-top: -$card-title-spacer-y * 0.5;
   margin-bottom: 0;
 }
 
@@ -65,7 +66,7 @@
 
 .card-link {
   &:hover {
-    text-decoration: none;
+    text-decoration: if($link-hover-decoration == underline, none, null);
   }
 
   + .card-link {
@@ -105,9 +106,9 @@
 //
 
 .card-header-tabs {
-  margin-right: -$card-cap-padding-x / 2;
+  margin-right: -$card-cap-padding-x * 0.5;
   margin-bottom: -$card-cap-padding-y;
-  margin-left: -$card-cap-padding-x / 2;
+  margin-left: -$card-cap-padding-x * 0.5;
   border-bottom: 0;
 
   @if $nav-tabs-link-active-bg != $card-bg {
@@ -119,8 +120,8 @@
 }
 
 .card-header-pills {
-  margin-right: -$card-cap-padding-x / 2;
-  margin-left: -$card-cap-padding-x / 2;
+  margin-right: -$card-cap-padding-x * 0.5;
+  margin-left: -$card-cap-padding-x * 0.5;
 }
 
 // Card image
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_carousel.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_carousel.scss
index 3ab85bbd..6ea3d65e 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_carousel.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_carousel.scss
@@ -207,9 +207,9 @@
 
 .carousel-caption {
   position: absolute;
-  right: (100% - $carousel-caption-width) / 2;
+  right: (100% - $carousel-caption-width) * 0.5;
   bottom: $carousel-caption-spacer;
-  left: (100% - $carousel-caption-width) / 2;
+  left: (100% - $carousel-caption-width) * 0.5;
   padding-top: $carousel-caption-padding-y;
   padding-bottom: $carousel-caption-padding-y;
   color: $carousel-caption-color;
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_dropdown.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_dropdown.scss
index 68152d7f..d3fbf680 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_dropdown.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_dropdown.scss
@@ -50,8 +50,8 @@
       --bs-position: start;
 
       &[data-bs-popper] {
-        right: auto #{'/* rtl:ignore */'};
-        left: 0 #{'/* rtl:ignore */'};
+        right: auto;
+        left: 0;
       }
     }
 
@@ -59,8 +59,8 @@
       --bs-position: end;
 
       &[data-bs-popper] {
-        right: 0 #{'/* rtl:ignore */'};
-        left: auto #{'/* rtl:ignore */'};
+        right: 0;
+        left: auto;
       }
     }
   }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss
index 6db94644..e011dbeb 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_functions.scss
@@ -32,6 +32,62 @@
   }
 }
 
+// Colors
+@function to-rgb($value) {
+  @return red($value), green($value), blue($value);
+}
+
+// stylelint-disable scss/dollar-variable-pattern
+@function rgba-css-var($identifier, $target) {
+  @if $identifier == 'body' and $target == 'bg' {
+    @return rgba(
+      var(--#{$variable-prefix}#{$identifier}-bg-rgb),
+      var(--#{$variable-prefix}#{$target}-opacity)
+    );
+  }
+  @if $identifier == 'body' and $target == 'text' {
+    @return rgba(
+      var(--#{$variable-prefix}#{$identifier}-color-rgb),
+      var(--#{$variable-prefix}#{$target}-opacity)
+    );
+  } @else {
+    @return rgba(
+      var(--#{$variable-prefix}#{$identifier}-rgb),
+      var(--#{$variable-prefix}#{$target}-opacity)
+    );
+  }
+}
+
+@function map-loop($map, $func, $args...) {
+  $_map: ();
+
+  @each $key, $value in $map {
+    // allow to pass the $key and $value of the map as an function argument
+    $_args: ();
+    @each $arg in $args {
+      $_args: append($_args, if($arg == '$key', $key, if($arg == '$value', $value, $arg)));
+    }
+
+    $_map: map-merge(
+      $_map,
+      (
+        $key: call(get-function($func), $_args...),
+      )
+    );
+  }
+
+  @return $_map;
+}
+// stylelint-enable scss/dollar-variable-pattern
+
+@function varify($list) {
+  $result: null;
+  @each $entry in $list {
+    $result: append($result, var(--#{$variable-prefix}#{$entry}), space);
+  }
+  @return $result;
+}
+
 // Internal Bootstrap function to turn maps into its negative variant.
 // It prefixes the keys with `n` and makes the value negative.
 @function negativify-map($map) {
@@ -60,6 +116,16 @@
   @return $result;
 }
 
+// Merge multiple maps
+@function map-merge-multiple($maps...) {
+  $merged-maps: ();
+
+  @each $map in $maps {
+    $merged-maps: map-merge($merged-maps, $map);
+  }
+  @return $merged-maps;
+}
+
 // Replace `$search` with `$replace` in `$string`
 // Used on our SVG icon backgrounds for custom forms.
 //
@@ -101,7 +167,7 @@
 // Color contrast
 // See https://github.com/twbs/bootstrap/pull/30168
 
-// A list of pre-calculated numbers of pow(($value / 255 + .055) / 1.055, 2.4). (from 0 to 255)
+// A list of pre-calculated numbers of pow(divide((divide($value, 255) + .055), 1.055), 2.4). (from 0 to 255)
 // stylelint-disable-next-line scss/dollar-variable-default, scss/dollar-variable-pattern
 $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0.0027 0.003 0.0033
   0.0037 0.004 0.0044 0.0048 0.0052 0.0056 0.006 0.0065 0.007 0.0075 0.008 0.0086 0.0091 0.0097
@@ -152,7 +218,7 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
   $l1: luminance($background);
   $l2: luminance(opaque($background, $foreground));
 
-  @return if($l1 > $l2, ($l1 + 0.05) / ($l2 + 0.05), ($l2 + 0.05) / ($l1 + 0.05));
+  @return if($l1 > $l2, divide($l1 + 0.05, $l2 + 0.05), divide($l2 + 0.05, $l1 + 0.05));
 }
 
 // Return WCAG2.0 relative luminance
@@ -166,7 +232,11 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
   );
 
   @each $name, $value in $rgb {
-    $value: if($value / 255 < 0.03928, $value / 255 / 12.92, nth($_luminance-list, $value + 1));
+    $value: if(
+      divide($value, 255) < 0.03928,
+      divide(divide($value, 255), 12.92),
+      nth($_luminance-list, $value + 1)
+    );
     $rgb: map-merge(
       $rgb,
       (
@@ -240,9 +310,55 @@ $_luminance-list: 0.0008 0.001 0.0011 0.0013 0.0015 0.0017 0.002 0.0022 0.0025 0
     @return $value1 - $value2;
   }
 
+  @if type-of($value2) != number {
+    $value2: unquote('(') + $value2 + unquote(')');
+  }
+
   @return if(
     $return-calc == true,
     calc(#{$value1} - #{$value2}),
     $value1 + unquote(' - ') + $value2
   );
 }
+
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+    $result: $result * 10 + $quotient;
+    $factor: $factor * 0.1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+  }
+  $result: $result * $factor * $sign;
+  $dividend-unit: unit($dividend);
+  $divisor-unit: unit($divisor);
+  $unit-map: (
+    'px': 1px,
+    'rem': 1rem,
+    'em': 1em,
+    '%': 1%,
+  );
+  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+    $result: $result * map-get($unit-map, $dividend-unit);
+  }
+  @return $result;
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_grid.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_grid.scss
index e5253d32..57b5d7a1 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_grid.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_grid.scss
@@ -12,6 +12,17 @@
   }
 }
 
+@if $enable-cssgrid {
+  .grid {
+    display: grid;
+    grid-template-rows: repeat(var(--#{$variable-prefix}rows, 1), 1fr);
+    grid-template-columns: repeat(var(--#{$variable-prefix}columns, #{$grid-columns}), 1fr);
+    gap: var(--#{$variable-prefix}gap, #{$grid-gutter-width});
+
+    @include make-cssgrid();
+  }
+}
+
 // Columns
 //
 // Common styles for small and large grid columns
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_helpers.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_helpers.scss
index 646bcbbf..e5104743 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_helpers.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_helpers.scss
@@ -2,6 +2,8 @@
 @import 'helpers/colored-links';
 @import 'helpers/ratio';
 @import 'helpers/position';
+@import 'helpers/stacks';
 @import 'helpers/visually-hidden';
 @import 'helpers/stretched-link';
 @import 'helpers/text-truncation';
+@import 'helpers/vr';
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_images.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_images.scss
index d6c7f076..61677acd 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_images.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_images.scss
@@ -31,7 +31,7 @@
 }
 
 .figure-img {
-  margin-bottom: $spacer / 2;
+  margin-bottom: $spacer * 0.5;
   line-height: 1;
 }
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_mixins.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_mixins.scss
index 1422a5ae..e517d199 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_mixins.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_mixins.scss
@@ -22,6 +22,7 @@
 
 // Components
 @import 'mixins/alert';
+@import 'mixins/backdrop';
 @import 'mixins/buttons';
 @import 'mixins/caret';
 @import 'mixins/pagination';
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_modal.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_modal.scss
index acd22c11..2d9d2747 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_modal.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_modal.scss
@@ -84,21 +84,7 @@
 
 // Modal background
 .modal-backdrop {
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: $zindex-modal-backdrop;
-  width: 100vw;
-  height: 100vh;
-  background-color: $modal-backdrop-bg;
-
-  // Fade for backdrop
-  &.fade {
-    opacity: 0;
-  }
-  &.show {
-    opacity: $modal-backdrop-opacity;
-  }
+  @include overlay-backdrop($zindex-modal-backdrop, $modal-backdrop-bg, $modal-backdrop-opacity);
 }
 
 // Modal header
@@ -113,9 +99,9 @@
   @include border-top-radius($modal-content-inner-border-radius);
 
   .btn-close {
-    padding: ($modal-header-padding-y / 2) ($modal-header-padding-x / 2);
-    margin: ($modal-header-padding-y / -2) ($modal-header-padding-x / -2)
-      ($modal-header-padding-y / -2) auto;
+    padding: ($modal-header-padding-y * 0.5) ($modal-header-padding-x * 0.5);
+    margin: ($modal-header-padding-y * -0.5) ($modal-header-padding-x * -0.5)
+      ($modal-header-padding-y * -0.5) auto;
   }
 }
 
@@ -142,7 +128,7 @@
   flex-shrink: 0;
   align-items: center; // vertically center
   justify-content: flex-end; // Right align buttons with flex property because text-align doesn't work on flex items
-  padding: $modal-inner-padding - $modal-footer-margin-between / 2;
+  padding: $modal-inner-padding - $modal-footer-margin-between * 0.5;
   border-top: $modal-footer-border-width solid $modal-footer-border-color;
   @include border-bottom-radius($modal-content-inner-border-radius);
 
@@ -150,7 +136,7 @@
   // This solution is far from ideal because of the universal selector usage,
   // but is needed to fix https://github.com/twbs/bootstrap/issues/24800
   > * {
-    margin: $modal-footer-margin-between / 2;
+    margin: $modal-footer-margin-between * 0.5;
   }
 }
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_navbar.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_navbar.scss
index cdce5154..103995d8 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_navbar.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_navbar.scss
@@ -188,6 +188,36 @@
         .navbar-toggler {
           display: none;
         }
+
+        .offcanvas-header {
+          display: none;
+        }
+
+        .offcanvas {
+          position: inherit;
+          bottom: 0;
+          z-index: 1000;
+          flex-grow: 1;
+          visibility: visible !important; // stylelint-disable-line declaration-no-important
+          background-color: transparent;
+          border-right: 0;
+          border-left: 0;
+          @include transition(none);
+          transform: none;
+        }
+        .offcanvas-top,
+        .offcanvas-bottom {
+          height: auto;
+          border-top: 0;
+          border-bottom: 0;
+        }
+
+        .offcanvas-body {
+          display: flex;
+          flex-grow: 0;
+          padding: 0;
+          overflow-y: visible;
+        }
       }
     }
   }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_offcanvas.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_offcanvas.scss
index f1d99456..5ee101b6 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_offcanvas.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_offcanvas.scss
@@ -14,6 +14,14 @@
   @include transition(transform $offcanvas-transition-duration ease-in-out);
 }
 
+.offcanvas-backdrop {
+  @include overlay-backdrop(
+    $zindex-offcanvas-backdrop,
+    $offcanvas-backdrop-bg,
+    $offcanvas-backdrop-opacity
+  );
+}
+
 .offcanvas-header {
   display: flex;
   align-items: center;
@@ -21,8 +29,10 @@
   padding: $offcanvas-padding-y $offcanvas-padding-x;
 
   .btn-close {
-    padding: ($offcanvas-padding-y / 2) ($offcanvas-padding-x / 2);
-    margin: ($offcanvas-padding-y / -2) ($offcanvas-padding-x / -2) ($offcanvas-padding-y / -2) auto;
+    padding: ($offcanvas-padding-y * 0.5) ($offcanvas-padding-x * 0.5);
+    margin-top: $offcanvas-padding-y * -0.5;
+    margin-right: $offcanvas-padding-x * -0.5;
+    margin-bottom: $offcanvas-padding-y * -0.5;
   }
 }
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_placeholders.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_placeholders.scss
new file mode 100644
index 00000000..050454f9
--- /dev/null
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_placeholders.scss
@@ -0,0 +1,56 @@
+.placeholder {
+  display: inline-block;
+  min-height: 1em;
+  vertical-align: middle;
+  cursor: wait;
+  background-color: currentColor;
+  opacity: $placeholder-opacity-max;
+
+  &.btn::before {
+    display: inline-block;
+    content: '';
+  }
+}
+
+// Sizing
+.placeholder-xs {
+  min-height: 0.6em;
+}
+
+.placeholder-sm {
+  min-height: 0.8em;
+}
+
+.placeholder-lg {
+  min-height: 1.2em;
+}
+
+// Animation
+.placeholder-glow {
+  .placeholder {
+    animation: placeholder-glow 2s ease-in-out infinite;
+  }
+}
+
+@keyframes placeholder-glow {
+  50% {
+    opacity: $placeholder-opacity-min;
+  }
+}
+
+.placeholder-wave {
+  mask-image: linear-gradient(
+    130deg,
+    $black 55%,
+    rgba(0, 0, 0, (1 - $placeholder-opacity-min)) 75%,
+    $black 95%
+  );
+  mask-size: 200% 100%;
+  animation: placeholder-wave 2s linear infinite;
+}
+
+@keyframes placeholder-wave {
+  100% {
+    mask-position: -200% 0%;
+  }
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_popover.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_popover.scss
index 6d4bbc3a..1c096138 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_popover.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_popover.scss
@@ -40,13 +40,13 @@
 
     &::before {
       bottom: 0;
-      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
       border-top-color: $popover-arrow-outer-color;
     }
 
     &::after {
       bottom: $popover-border-width;
-      border-width: $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-width: $popover-arrow-height ($popover-arrow-width * 0.5) 0;
       border-top-color: $popover-arrow-color;
     }
   }
@@ -60,13 +60,15 @@
 
     &::before {
       left: 0;
-      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-width: ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5)
+        0;
       border-right-color: $popover-arrow-outer-color;
     }
 
     &::after {
       left: $popover-border-width;
-      border-width: ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2) 0;
+      border-width: ($popover-arrow-width * 0.5) $popover-arrow-height ($popover-arrow-width * 0.5)
+        0;
       border-right-color: $popover-arrow-color;
     }
   }
@@ -78,13 +80,15 @@
 
     &::before {
       top: 0;
-      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+      border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
+        ($popover-arrow-width * 0.5);
       border-bottom-color: $popover-arrow-outer-color;
     }
 
     &::after {
       top: $popover-border-width;
-      border-width: 0 ($popover-arrow-width / 2) $popover-arrow-height ($popover-arrow-width / 2);
+      border-width: 0 ($popover-arrow-width * 0.5) $popover-arrow-height
+        ($popover-arrow-width * 0.5);
       border-bottom-color: $popover-arrow-color;
     }
   }
@@ -96,7 +100,7 @@
     left: 50%;
     display: block;
     width: $popover-arrow-width;
-    margin-left: -$popover-arrow-width / 2;
+    margin-left: -$popover-arrow-width * 0.5;
     content: '';
     border-bottom: $popover-border-width solid $popover-header-bg;
   }
@@ -110,13 +114,15 @@
 
     &::before {
       right: 0;
-      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+      border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5)
+        $popover-arrow-height;
       border-left-color: $popover-arrow-outer-color;
     }
 
     &::after {
       right: $popover-border-width;
-      border-width: ($popover-arrow-width / 2) 0 ($popover-arrow-width / 2) $popover-arrow-height;
+      border-width: ($popover-arrow-width * 0.5) 0 ($popover-arrow-width * 0.5)
+        $popover-arrow-height;
       border-left-color: $popover-arrow-color;
     }
   }
@@ -144,7 +150,7 @@
   @include font-size($font-size-base);
   color: $popover-header-color;
   background-color: $popover-header-bg;
-  border-bottom: $popover-border-width solid shade-color($popover-header-bg, 10%);
+  border-bottom: $popover-border-width solid $popover-border-color;
   @include border-top-radius($popover-inner-border-radius);
 
   &:empty {
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_reboot.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_reboot.scss
index 8829d56f..e78f881b 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_reboot.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_reboot.scss
@@ -23,7 +23,9 @@
 // null by default, thus nothing is generated.
 
 :root {
-  font-size: $font-size-root;
+  @if $font-size-root != null {
+    font-size: var(--#{$variable-prefix}root-font-size);
+  }
 
   @if $enable-smooth-scroll {
     @media (prefers-reduced-motion: no-preference) {
@@ -39,18 +41,20 @@
 // 3. Prevent adjustments of font size after orientation changes in iOS.
 // 4. Change the default tap highlight to be completely transparent in iOS.
 
+// scss-docs-start reboot-body-rules
 body {
   margin: 0; // 1
-  font-family: $font-family-base;
-  @include font-size($font-size-base);
-  font-weight: $font-weight-base;
-  line-height: $line-height-base;
-  color: $body-color;
-  text-align: $body-text-align;
-  background-color: $body-bg; // 2
+  font-family: var(--#{$variable-prefix}body-font-family);
+  @include font-size(var(--#{$variable-prefix}body-font-size));
+  font-weight: var(--#{$variable-prefix}body-font-weight);
+  line-height: var(--#{$variable-prefix}body-line-height);
+  color: var(--#{$variable-prefix}body-color);
+  text-align: var(--#{$variable-prefix}body-text-align);
+  background-color: var(--#{$variable-prefix}body-bg); // 2
   -webkit-text-size-adjust: 100%; // 3
   -webkit-tap-highlight-color: rgba($black, 0); // 4
 }
+// scss-docs-end reboot-body-rules
 
 // Content grouping
 //
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_root.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_root.scss
index 768d6343..5e138e97 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_root.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_root.scss
@@ -1,16 +1,54 @@
 :root {
-  // Custom variable values only support SassScript inside `#{}`.
+  // Note: Custom variable values only support SassScript inside `#{}`.
+
+  // Colors
+  //
+  // Generate palettes for full colors, grays, and theme colors.
+
   @each $color, $value in $colors {
     --#{$variable-prefix}#{$color}: #{$value};
   }
 
+  @each $color, $value in $grays {
+    --#{$variable-prefix}gray-#{$color}: #{$value};
+  }
+
   @each $color, $value in $theme-colors {
     --#{$variable-prefix}#{$color}: #{$value};
   }
 
-  // Use `inspect` for lists so that quoted items keep the quotes.
+  @each $color, $value in $theme-colors-rgb {
+    --#{$variable-prefix}#{$color}-rgb: #{$value};
+  }
+
+  --#{$variable-prefix}white-rgb: #{to-rgb($white)};
+  --#{$variable-prefix}black-rgb: #{to-rgb($black)};
+  --#{$variable-prefix}body-color-rgb: #{to-rgb($body-color)};
+  --#{$variable-prefix}body-bg-rgb: #{to-rgb($body-bg)};
+
+  // Fonts
+
+  // Note: Use `inspect` for lists so that quoted items keep the quotes.
   // See https://github.com/sass/sass/issues/2383#issuecomment-336349172
   --#{$variable-prefix}font-sans-serif: #{inspect($font-family-sans-serif)};
   --#{$variable-prefix}font-monospace: #{inspect($font-family-monospace)};
   --#{$variable-prefix}gradient: #{$gradient};
+
+  // Root and body
+  // stylelint-disable custom-property-empty-line-before
+  // scss-docs-start root-body-variables
+  @if $font-size-root != null {
+    --#{$variable-prefix}root-font-size: #{$font-size-root};
+  }
+  --#{$variable-prefix}body-font-family: #{$font-family-base};
+  --#{$variable-prefix}body-font-size: #{$font-size-base};
+  --#{$variable-prefix}body-font-weight: #{$font-weight-base};
+  --#{$variable-prefix}body-line-height: #{$line-height-base};
+  --#{$variable-prefix}body-color: #{$body-color};
+  @if $body-text-align != null {
+    --#{$variable-prefix}body-text-align: #{$body-text-align};
+  }
+  --#{$variable-prefix}body-bg: #{$body-bg};
+  // scss-docs-end root-body-variables
+  // stylelint-enable custom-property-empty-line-before
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tables.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tables.scss
index 9a1707e9..1736fbca 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tables.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tables.scss
@@ -4,7 +4,7 @@
 
 .table {
   --#{$variable-prefix}table-bg: #{$table-bg};
-  --#{$variable-prefix}table-accent-bg: #{$table-bg};
+  --#{$variable-prefix}table-accent-bg: #{$table-accent-bg};
   --#{$variable-prefix}table-striped-color: #{$table-striped-color};
   --#{$variable-prefix}table-striped-bg: #{$table-striped-bg};
   --#{$variable-prefix}table-active-color: #{$table-active-color};
@@ -39,8 +39,8 @@
   }
 
   // Highlight border color between thead, tbody and tfoot.
-  > :not(:last-child) > :last-child > * {
-    border-bottom-color: $table-group-separator-color;
+  > :not(:first-child) {
+    border-top: (2 * $table-border-width) solid $table-group-separator-color;
   }
 }
 
@@ -88,6 +88,10 @@
   > :not(caption) > * > * {
     border-bottom-width: 0;
   }
+
+  > :not(:first-child) {
+    border-top-width: 0;
+  }
 }
 
 // Zebra-striping
@@ -95,7 +99,7 @@
 // Default zebra-stripe styles (alternating gray and transparent backgrounds)
 
 .table-striped {
-  > tbody > tr:nth-of-type(#{$table-striped-order}) {
+  > tbody > tr:nth-of-type(#{$table-striped-order}) > * {
     --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-striped-bg);
     color: var(--#{$variable-prefix}table-striped-color);
   }
@@ -115,7 +119,7 @@
 // Placed here since it has to come after the potential zebra striping
 
 .table-hover {
-  > tbody > tr:hover {
+  > tbody > tr:hover > * {
     --#{$variable-prefix}table-accent-bg: var(--#{$variable-prefix}table-hover-bg);
     color: var(--#{$variable-prefix}table-hover-color);
   }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_toasts.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_toasts.scss
index 5c533d7f..46ecde0c 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_toasts.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_toasts.scss
@@ -10,11 +10,11 @@
   box-shadow: $toast-box-shadow;
   @include border-radius($toast-border-radius);
 
-  &:not(.showing):not(.show) {
+  &.showing {
     opacity: 0;
   }
 
-  &.hide {
+  &:not(.show) {
     display: none;
   }
 }
@@ -40,7 +40,7 @@
   @include border-top-radius(subtract($toast-border-radius, $toast-border-width));
 
   .btn-close {
-    margin-right: $toast-padding-x / -2;
+    margin-right: $toast-padding-x * -0.5;
     margin-left: $toast-padding-x;
   }
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tooltip.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tooltip.scss
index a8fac839..0ba320b4 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tooltip.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_tooltip.scss
@@ -39,7 +39,7 @@
 
     &::before {
       top: -1px;
-      border-width: $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+      border-width: $tooltip-arrow-height ($tooltip-arrow-width * 0.5) 0;
       border-top-color: $tooltip-arrow-color;
     }
   }
@@ -55,7 +55,8 @@
 
     &::before {
       right: -1px;
-      border-width: ($tooltip-arrow-width / 2) $tooltip-arrow-height ($tooltip-arrow-width / 2) 0;
+      border-width: ($tooltip-arrow-width * 0.5) $tooltip-arrow-height ($tooltip-arrow-width * 0.5)
+        0;
       border-right-color: $tooltip-arrow-color;
     }
   }
@@ -69,7 +70,7 @@
 
     &::before {
       bottom: -1px;
-      border-width: 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+      border-width: 0 ($tooltip-arrow-width * 0.5) $tooltip-arrow-height;
       border-bottom-color: $tooltip-arrow-color;
     }
   }
@@ -85,7 +86,8 @@
 
     &::before {
       left: -1px;
-      border-width: ($tooltip-arrow-width / 2) 0 ($tooltip-arrow-width / 2) $tooltip-arrow-height;
+      border-width: ($tooltip-arrow-width * 0.5) 0 ($tooltip-arrow-width * 0.5)
+        $tooltip-arrow-height;
       border-left-color: $tooltip-arrow-color;
     }
   }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_transitions.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_transitions.scss
index 2905df45..bfb26aa8 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_transitions.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_transitions.scss
@@ -17,5 +17,11 @@
   height: 0;
   overflow: hidden;
   @include transition($transition-collapse);
+
+  &.collapse-horizontal {
+    width: 0;
+    height: auto;
+    @include transition($transition-collapse-width);
+  }
 }
 // scss-docs-end collapse-classes
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_utilities.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_utilities.scss
index 1190ee04..42167c03 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_utilities.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_utilities.scss
@@ -26,6 +26,20 @@ $utilities: map-merge(
         ),
       ),
     // scss-docs-end utils-float
+    // Opacity utilities
+    // scss-docs-start utils-opacity
+    'opacity':
+      (
+        property: opacity,
+        values: (
+          0: 0,
+          25: 0.25,
+          50: 0.5,
+          75: 0.75,
+          100: 1,
+        ),
+      ),
+    // scss-docs-end utils-opacity
     // scss-docs-start utils-overflow
     'overflow':
       (
@@ -581,35 +595,60 @@ $utilities: map-merge(
       (
         property: color,
         class: text,
+        local-vars: (
+          'text-opacity': 1,
+        ),
         values:
           map-merge(
-            $theme-colors,
+            $utilities-text-colors,
             (
-              'white': $white,
-              'body': $body-color,
               'muted': $text-muted,
               'black-50': rgba($black, 0.5),
+              // deprecated
               'white-50': rgba($white, 0.5),
+              // deprecated
               'reset': inherit,
             )
           ),
       ),
+    'text-opacity': (
+      css-var: true,
+      class: text-opacity,
+      values: (
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    ),
     // scss-docs-end utils-color
     // scss-docs-start utils-bg-color
     'background-color':
       (
         property: background-color,
         class: bg,
+        local-vars: (
+          'bg-opacity': 1,
+        ),
         values:
           map-merge(
-            $theme-colors,
+            $utilities-bg-colors,
             (
-              'body': $body-bg,
-              'white': $white,
               'transparent': transparent,
             )
           ),
       ),
+    'bg-opacity': (
+      css-var: true,
+      class: bg-opacity,
+      values: (
+        10: 0.1,
+        25: 0.25,
+        50: 0.5,
+        75: 0.75,
+        100: 1,
+      ),
+    ),
     // scss-docs-end utils-bg-color
     'gradient':
       (
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_variables.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_variables.scss
index 20742814..6cc91fa7 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_variables.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/_variables.scss
@@ -90,6 +90,10 @@ $theme-colors: (
 ) !default;
 // scss-docs-end theme-colors-map
 
+// scss-docs-start theme-colors-rgb
+$theme-colors-rgb: map-loop($theme-colors, to-rgb, '$value') !default;
+// scss-docs-end theme-colors-rgb
+
 // The contrast ratio to reach against white, to determine if color changes from "light" to "dark". Acceptable values for WCAG 2.0 are 3, 4.5 and 7.
 // See https://www.w3.org/TR/WCAG20/#visual-audio-contrast-contrast
 $min-contrast-ratio: 4.5 !default;
@@ -198,6 +202,126 @@ $cyan-600: shade-color($cyan, 20%) !default;
 $cyan-700: shade-color($cyan, 40%) !default;
 $cyan-800: shade-color($cyan, 60%) !default;
 $cyan-900: shade-color($cyan, 80%) !default;
+
+$blues: (
+  'blue-100': $blue-100,
+  'blue-200': $blue-200,
+  'blue-300': $blue-300,
+  'blue-400': $blue-400,
+  'blue-500': $blue-500,
+  'blue-600': $blue-600,
+  'blue-700': $blue-700,
+  'blue-800': $blue-800,
+  'blue-900': $blue-900,
+) !default;
+
+$indigos: (
+  'indigo-100': $indigo-100,
+  'indigo-200': $indigo-200,
+  'indigo-300': $indigo-300,
+  'indigo-400': $indigo-400,
+  'indigo-500': $indigo-500,
+  'indigo-600': $indigo-600,
+  'indigo-700': $indigo-700,
+  'indigo-800': $indigo-800,
+  'indigo-900': $indigo-900,
+) !default;
+
+$purples: (
+  'purple-100': $purple-200,
+  'purple-200': $purple-100,
+  'purple-300': $purple-300,
+  'purple-400': $purple-400,
+  'purple-500': $purple-500,
+  'purple-600': $purple-600,
+  'purple-700': $purple-700,
+  'purple-800': $purple-800,
+  'purple-900': $purple-900,
+) !default;
+
+$pinks: (
+  'pink-100': $pink-100,
+  'pink-200': $pink-200,
+  'pink-300': $pink-300,
+  'pink-400': $pink-400,
+  'pink-500': $pink-500,
+  'pink-600': $pink-600,
+  'pink-700': $pink-700,
+  'pink-800': $pink-800,
+  'pink-900': $pink-900,
+) !default;
+
+$reds: (
+  'red-100': $red-100,
+  'red-200': $red-200,
+  'red-300': $red-300,
+  'red-400': $red-400,
+  'red-500': $red-500,
+  'red-600': $red-600,
+  'red-700': $red-700,
+  'red-800': $red-800,
+  'red-900': $red-900,
+) !default;
+
+$oranges: (
+  'orange-100': $orange-100,
+  'orange-200': $orange-200,
+  'orange-300': $orange-300,
+  'orange-400': $orange-400,
+  'orange-500': $orange-500,
+  'orange-600': $orange-600,
+  'orange-700': $orange-700,
+  'orange-800': $orange-800,
+  'orange-900': $orange-900,
+) !default;
+
+$yellows: (
+  'yellow-100': $yellow-100,
+  'yellow-200': $yellow-200,
+  'yellow-300': $yellow-300,
+  'yellow-400': $yellow-400,
+  'yellow-500': $yellow-500,
+  'yellow-600': $yellow-600,
+  'yellow-700': $yellow-700,
+  'yellow-800': $yellow-800,
+  'yellow-900': $yellow-900,
+) !default;
+
+$greens: (
+  'green-100': $green-100,
+  'green-200': $green-200,
+  'green-300': $green-300,
+  'green-400': $green-400,
+  'green-500': $green-500,
+  'green-600': $green-600,
+  'green-700': $green-700,
+  'green-800': $green-800,
+  'green-900': $green-900,
+) !default;
+
+$teals: (
+  'teal-100': $teal-100,
+  'teal-200': $teal-200,
+  'teal-300': $teal-300,
+  'teal-400': $teal-400,
+  'teal-500': $teal-500,
+  'teal-600': $teal-600,
+  'teal-700': $teal-700,
+  'teal-800': $teal-800,
+  'teal-900': $teal-900,
+) !default;
+
+$cyans: (
+  'cyan-100': $cyan-100,
+  'cyan-200': $cyan-200,
+  'cyan-300': $cyan-300,
+  'cyan-400': $cyan-400,
+  'cyan-500': $cyan-500,
+  'cyan-600': $cyan-600,
+  'cyan-700': $cyan-700,
+  'cyan-800': $cyan-800,
+  'cyan-900': $cyan-900,
+) !default;
 // fusv-enable
 
 // Characters which are escaped by the escape-svg function
@@ -221,6 +345,7 @@ $enable-transitions: true !default;
 $enable-reduced-motion: true !default;
 $enable-smooth-scroll: true !default;
 $enable-grid-classes: true !default;
+$enable-cssgrid: false !default;
 $enable-button-pointers: true !default;
 $enable-rfs: true !default;
 $enable-validation-icons: true !default;
@@ -250,8 +375,8 @@ $gradient: linear-gradient(180deg, rgba($white, 0.15), rgba($white, 0)) !default
 $spacer: 1rem !default;
 $spacers: (
   0: 0,
-  1: $spacer / 4,
-  2: $spacer / 2,
+  1: $spacer * 0.25,
+  2: $spacer * 0.5,
   3: $spacer,
   4: $spacer * 1.5,
   5: $spacer * 3,
@@ -280,6 +405,39 @@ $body-bg: $white !default;
 $body-color: $gray-900 !default;
 $body-text-align: null !default;
 
+// Utilities maps
+//
+// Extends the default `$theme-colors` maps to help create our utilities.
+
+// Come v6, we'll de-dupe these variables. Until then, for backward compatibility, we keep them to reassign.
+// scss-docs-start utilities-colors
+$utilities-colors: $theme-colors-rgb !default;
+// scss-docs-end utilities-colors
+
+// scss-docs-start utilities-text-colors
+$utilities-text: map-merge(
+  $utilities-colors,
+  (
+    'black': to-rgb($black),
+    'white': to-rgb($white),
+    'body': to-rgb($body-color),
+  )
+) !default;
+$utilities-text-colors: map-loop($utilities-text, rgba-css-var, '$key', 'text') !default;
+// scss-docs-end utilities-text-colors
+
+// scss-docs-start utilities-bg-colors
+$utilities-bg: map-merge(
+  $utilities-colors,
+  (
+    'black': to-rgb($black),
+    'white': to-rgb($white),
+    'body': to-rgb($body-bg),
+  )
+) !default;
+$utilities-bg-colors: map-loop($utilities-bg, rgba-css-var, '$key', 'bg') !default;
+// scss-docs-end utilities-bg-colors
+
 // Links
 //
 // Style anchor elements.
@@ -346,7 +504,7 @@ $gutters: $spacers !default;
 
 // Container padding
 
-$container-padding-x: $grid-gutter-width / 2 !default;
+$container-padding-x: $grid-gutter-width * 0.5 !default;
 
 // Components
 //
@@ -392,6 +550,7 @@ $transition-base: all 0.2s ease-in-out !default;
 $transition-fade: opacity 0.15s linear !default;
 // scss-docs-start collapse-transition
 $transition-collapse: height 0.35s ease !default;
+$transition-collapse-width: width 0.35s ease !default;
 // scss-docs-end collapse-transition
 
 // stylelint-disable function-disallowed-list
@@ -420,8 +579,8 @@ $font-family-monospace: SFMono-Regular, Menlo, Monaco, Consolas, 'Liberation Mon
 $font-family-base: var(--#{$variable-prefix}font-sans-serif) !default;
 $font-family-code: var(--#{$variable-prefix}font-monospace) !default;
 
-// $font-size-root effects the value of `rem`, which is used for as well font sizes, paddings and margins
-// $font-size-base effects the font size of the body text
+// $font-size-root affects the value of `rem`, which is used for as well font sizes, paddings, and margins
+// $font-size-base affects the font size of the body text
 $font-size-root: null !default;
 $font-size-base: 1rem !default; // Assumes the browser default, typically `16px`
 $font-size-sm: $font-size-base * 0.875 !default;
@@ -459,7 +618,7 @@ $font-sizes: (
 // scss-docs-end font-sizes
 
 // scss-docs-start headings-variables
-$headings-margin-bottom: $spacer / 2 !default;
+$headings-margin-bottom: $spacer * 0.5 !default;
 $headings-font-family: null !default;
 $headings-font-style: null !default;
 $headings-font-weight: 500 !default;
@@ -532,6 +691,7 @@ $table-cell-vertical-align: top !default;
 
 $table-color: $body-color !default;
 $table-bg: transparent !default;
+$table-accent-bg: transparent !default;
 
 $table-th-font-weight: null !default;
 
@@ -686,7 +846,7 @@ $input-padding-y-lg: $input-btn-padding-y-lg !default;
 $input-padding-x-lg: $input-btn-padding-x-lg !default;
 $input-font-size-lg: $input-btn-font-size-lg !default;
 
-$input-bg: $white !default;
+$input-bg: $body-bg !default;
 $input-disabled-bg: $gray-200 !default;
 $input-disabled-border-color: null !default;
 
@@ -712,7 +872,7 @@ $input-height-border: $input-border-width * 2 !default;
 
 $input-height-inner: add($input-line-height * 1em, $input-padding-y * 2) !default;
 $input-height-inner-half: add($input-line-height * 0.5em, $input-padding-y) !default;
-$input-height-inner-quarter: add($input-line-height * 0.25em, $input-padding-y / 2) !default;
+$input-height-inner-quarter: add($input-line-height * 0.25em, $input-padding-y * 0.5) !default;
 
 $input-height: add(
   $input-line-height * 1em,
@@ -728,6 +888,8 @@ $input-height-lg: add(
 ) !default;
 
 $input-transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out !default;
+
+$form-color-width: 3rem !default;
 // scss-docs-end form-input-variables
 
 // scss-docs-start form-check-variables
@@ -767,7 +929,7 @@ $form-check-inline-margin-end: 1rem !default;
 // scss-docs-end form-check-variables
 
 // scss-docs-start form-switch-variables
-$form-switch-color: rgba(0, 0, 0, 0.25) !default;
+$form-switch-color: rgba($black, 0.25) !default;
 $form-switch-width: 2em !default;
 $form-switch-padding-start: $form-switch-width + 0.5em !default;
 $form-switch-bg-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'><circle r='3' fill='#{$form-switch-color}'/></svg>") !default;
@@ -816,7 +978,7 @@ $form-select-feedback-icon-size: $input-height-inner-half $input-height-inner-ha
 
 $form-select-border-width: $input-border-width !default;
 $form-select-border-color: $input-border-color !default;
-$form-select-border-radius: $border-radius !default;
+$form-select-border-radius: $input-border-radius !default;
 $form-select-box-shadow: $box-shadow-inset !default;
 
 $form-select-focus-border-color: $input-focus-border-color !default;
@@ -826,10 +988,14 @@ $form-select-focus-box-shadow: 0 0 0 $form-select-focus-width $input-btn-focus-c
 $form-select-padding-y-sm: $input-padding-y-sm !default;
 $form-select-padding-x-sm: $input-padding-x-sm !default;
 $form-select-font-size-sm: $input-font-size-sm !default;
+$form-select-border-radius-sm: $input-border-radius-sm !default;
 
 $form-select-padding-y-lg: $input-padding-y-lg !default;
 $form-select-padding-x-lg: $input-padding-x-lg !default;
 $form-select-font-size-lg: $input-font-size-lg !default;
+$form-select-border-radius-lg: $input-border-radius-lg !default;
+
+$form-select-transition: $input-transition !default;
 // scss-docs-end form-select-variables
 
 // scss-docs-start form-range-variables
@@ -862,6 +1028,7 @@ $form-file-button-hover-bg: shade-color($form-file-button-bg, 5%) !default;
 
 // scss-docs-start form-floating-variables
 $form-floating-height: add(3.5rem, $input-height-border) !default;
+$form-floating-line-height: 1.25 !default;
 $form-floating-padding-x: $input-padding-x !default;
 $form-floating-padding-y: 1rem !default;
 $form-floating-input-padding-t: 1.625rem !default;
@@ -908,9 +1075,10 @@ $form-validation-states: (
 $zindex-dropdown: 1000 !default;
 $zindex-sticky: 1020 !default;
 $zindex-fixed: 1030 !default;
-$zindex-modal-backdrop: 1040 !default;
-$zindex-offcanvas: 1050 !default;
-$zindex-modal: 1060 !default;
+$zindex-offcanvas-backdrop: 1040 !default;
+$zindex-offcanvas: 1045 !default;
+$zindex-modal-backdrop: 1050 !default;
+$zindex-modal: 1055 !default;
 $zindex-popover: 1070 !default;
 $zindex-tooltip: 1080 !default;
 // scss-docs-end zindex-stack
@@ -944,7 +1112,7 @@ $nav-pills-link-active-bg: $component-active-bg !default;
 // Navbar
 
 // scss-docs-start navbar-variables
-$navbar-padding-y: $spacer / 2 !default;
+$navbar-padding-y: $spacer * 0.5 !default;
 $navbar-padding-x: null !default;
 
 $navbar-nav-link-padding-x: 0.5rem !default;
@@ -953,7 +1121,7 @@ $navbar-brand-font-size: $font-size-lg !default;
 // Compute the navbar-brand padding-y so the navbar-brand will have the same height as navbar-text and nav-link
 $nav-link-height: $font-size-base * $line-height-base + $nav-link-padding-y * 2 !default;
 $navbar-brand-height: $navbar-brand-font-size * $line-height-base !default;
-$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) / 2 !default;
+$navbar-brand-padding-y: ($nav-link-height - $navbar-brand-height) * 0.5 !default;
 $navbar-brand-margin-end: 1rem !default;
 
 $navbar-toggler-padding-y: 0.25rem !default;
@@ -1002,11 +1170,11 @@ $dropdown-border-radius: $border-radius !default;
 $dropdown-border-width: $border-width !default;
 $dropdown-inner-border-radius: subtract($dropdown-border-radius, $dropdown-border-width) !default;
 $dropdown-divider-bg: $dropdown-border-color !default;
-$dropdown-divider-margin-y: $spacer / 2 !default;
+$dropdown-divider-margin-y: $spacer * 0.5 !default;
 $dropdown-box-shadow: $box-shadow !default;
 
 $dropdown-link-color: $gray-900 !default;
-$dropdown-link-hover-color: shade-color($gray-900, 10%) !default;
+$dropdown-link-hover-color: shade-color($dropdown-link-color, 10%) !default;
 $dropdown-link-hover-bg: $gray-200 !default;
 
 $dropdown-link-active-color: $component-active-color !default;
@@ -1014,7 +1182,7 @@ $dropdown-link-active-bg: $component-active-bg !default;
 
 $dropdown-link-disabled-color: $gray-500 !default;
 
-$dropdown-item-padding-y: $spacer / 4 !default;
+$dropdown-item-padding-y: $spacer * 0.25 !default;
 $dropdown-item-padding-x: $spacer !default;
 
 $dropdown-header-color: $gray-600 !default;
@@ -1077,17 +1245,25 @@ $pagination-border-radius-sm: $border-radius-sm !default;
 $pagination-border-radius-lg: $border-radius-lg !default;
 // scss-docs-end pagination-variables
 
+// Placeholders
+
+// scss-docs-start placeholders
+$placeholder-opacity-max: 0.5 !default;
+$placeholder-opacity-min: 0.2 !default;
+// scss-docs-end placeholders
+
 // Cards
 
 // scss-docs-start card-variables
 $card-spacer-y: $spacer !default;
 $card-spacer-x: $spacer !default;
-$card-title-spacer-y: $spacer / 2 !default;
+$card-title-spacer-y: $spacer * 0.5 !default;
 $card-border-width: $border-width !default;
-$card-border-radius: $border-radius !default;
 $card-border-color: rgba($black, 0.125) !default;
+$card-border-radius: $border-radius !default;
+$card-box-shadow: null !default;
 $card-inner-border-radius: subtract($card-border-radius, $card-border-width) !default;
-$card-cap-padding-y: $card-spacer-y / 2 !default;
+$card-cap-padding-y: $card-spacer-y * 0.5 !default;
 $card-cap-padding-x: $card-spacer-x !default;
 $card-cap-bg: rgba($black, 0.03) !default;
 $card-cap-color: null !default;
@@ -1095,7 +1271,7 @@ $card-height: null !default;
 $card-color: null !default;
 $card-bg: $white !default;
 $card-img-overlay-padding: $spacer !default;
-$card-group-margin: $grid-gutter-width / 2 !default;
+$card-group-margin: $grid-gutter-width * 0.5 !default;
 // scss-docs-end card-variables
 
 // Accordion
@@ -1128,7 +1304,7 @@ $accordion-button-focus-border-color: $input-focus-border-color !default;
 $accordion-button-focus-box-shadow: $btn-focus-box-shadow !default;
 
 $accordion-icon-width: 1.25rem !default;
-$accordion-icon-color: $accordion-color !default;
+$accordion-icon-color: $accordion-button-color !default;
 $accordion-icon-active-color: $accordion-button-active-color !default;
 $accordion-icon-transition: transform 0.2s ease-in-out !default;
 $accordion-icon-transform: rotate(-180deg) !default;
@@ -1146,8 +1322,8 @@ $tooltip-color: $white !default;
 $tooltip-bg: $black !default;
 $tooltip-border-radius: $border-radius !default;
 $tooltip-opacity: 0.9 !default;
-$tooltip-padding-y: $spacer / 4 !default;
-$tooltip-padding-x: $spacer / 2 !default;
+$tooltip-padding-y: $spacer * 0.25 !default;
+$tooltip-padding-x: $spacer * 0.5 !default;
 $tooltip-margin: 0 !default;
 
 $tooltip-arrow-width: 0.8rem !default;
@@ -1163,7 +1339,7 @@ $form-feedback-tooltip-font-size: $tooltip-font-size !default;
 $form-feedback-tooltip-line-height: null !default;
 $form-feedback-tooltip-opacity: $tooltip-opacity !default;
 $form-feedback-tooltip-border-radius: $tooltip-border-radius !default;
-// scss-docs-start tooltip-feedback-variables
+// scss-docs-end tooltip-feedback-variables
 
 // Popovers
 
@@ -1203,14 +1379,14 @@ $toast-font-size: 0.875rem !default;
 $toast-color: null !default;
 $toast-background-color: rgba($white, 0.85) !default;
 $toast-border-width: 1px !default;
-$toast-border-color: rgba(0, 0, 0, 0.1) !default;
+$toast-border-color: rgba($black, 0.1) !default;
 $toast-border-radius: $border-radius !default;
 $toast-box-shadow: $box-shadow !default;
 $toast-spacing: $container-padding-x !default;
 
 $toast-header-color: $gray-600 !default;
 $toast-header-background-color: rgba($white, 0.85) !default;
-$toast-header-border-color: rgba(0, 0, 0, 0.05) !default;
+$toast-header-border-color: rgba($black, 0.05) !default;
 // scss-docs-end toast-variables
 
 // Badges
@@ -1309,7 +1485,7 @@ $list-group-border-color: rgba($black, 0.125) !default;
 $list-group-border-width: $border-width !default;
 $list-group-border-radius: $border-radius !default;
 
-$list-group-item-padding-y: $spacer / 2 !default;
+$list-group-item-padding-y: $spacer * 0.5 !default;
 $list-group-item-padding-x: $spacer !default;
 $list-group-item-bg-scale: -80% !default;
 $list-group-item-color-scale: 40% !default;
@@ -1444,6 +1620,8 @@ $offcanvas-title-line-height: $modal-title-line-height !default;
 $offcanvas-bg-color: $modal-content-bg !default;
 $offcanvas-color: $modal-content-color !default;
 $offcanvas-box-shadow: $modal-content-box-shadow-xs !default;
+$offcanvas-backdrop-bg: $modal-backdrop-bg !default;
+$offcanvas-backdrop-opacity: $modal-backdrop-opacity !default;
 // scss-docs-end offcanvas-variables
 
 // Code
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-grid.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-grid.scss
index c7953668..d070a622 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-grid.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-grid.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Grid v5.0.1 (https://getbootstrap.com/)
+ * Bootstrap Grid v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -18,6 +18,8 @@ $include-column-box-sizing: true !default;
 
 @import 'vendor/rfs';
 
+@import 'root';
+
 @import 'containers';
 @import 'grid';
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-reboot.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-reboot.scss
index ce7d9705..90913b75 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-reboot.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-reboot.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Reboot v5.0.1 (https://getbootstrap.com/)
+ * Bootstrap Reboot v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -8,8 +8,6 @@
 
 @import 'functions';
 @import 'variables';
-// Prevent the usage of custom properties since we don't add them to `:root` in reboot
-$font-family-base: $font-family-sans-serif; // stylelint-disable-line scss/dollar-variable-default
-$font-family-code: $font-family-monospace; // stylelint-disable-line scss/dollar-variable-default
 @import 'mixins';
+@import 'root';
 @import 'reboot';
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-utilities.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-utilities.scss
index d388b69d..0e4445eb 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-utilities.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap-utilities.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap Utilities v5.0.1 (https://getbootstrap.com/)
+ * Bootstrap Utilities v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap.scss
index 598d581f..309af453 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/bootstrap.scss
@@ -1,5 +1,5 @@
 /*!
- * Bootstrap v5.0.1 (https://getbootstrap.com/)
+ * Bootstrap v5.1.3 (https://getbootstrap.com/)
  * Copyright 2011-2021 The Bootstrap Authors
  * Copyright 2011-2021 Twitter, Inc.
  * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
@@ -43,6 +43,7 @@
 @import 'carousel';
 @import 'spinners';
 @import 'offcanvas';
+@import 'placeholders';
 
 // Helpers
 @import 'helpers';
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_floating-labels.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_floating-labels.scss
index 8b2e2b8e..2f429548 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_floating-labels.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_floating-labels.scss
@@ -4,7 +4,7 @@
   > .form-control,
   > .form-select {
     height: $form-floating-height;
-    padding: $form-floating-padding-y $form-floating-padding-x;
+    line-height: $form-floating-line-height;
   }
 
   > label {
@@ -21,6 +21,8 @@
 
   // stylelint-disable no-duplicate-selectors
   > .form-control {
+    padding: $form-floating-padding-y $form-floating-padding-x;
+
     &::placeholder {
       color: transparent;
     }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss
index b3aa61ee..bc6378d1 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-check.scss
@@ -17,7 +17,7 @@
 .form-check-input {
   width: $form-check-input-width;
   height: $form-check-input-width;
-  margin-top: ($line-height-base - $form-check-input-width) / 2; // line-height minus check height
+  margin-top: ($line-height-base - $form-check-input-width) * 0.5; // line-height minus check height
   vertical-align: top;
   background-color: $form-check-input-bg;
   background-repeat: no-repeat;
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-control.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-control.scss
index 3a75d8b9..56100e7c 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-control.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-control.scss
@@ -199,7 +199,7 @@ textarea {
 // stylelint-enable selector-no-qualifying-type
 
 .form-control-color {
-  max-width: 3rem;
+  width: $form-color-width;
   height: auto; // Override fixed browser height
   padding: $input-padding-y;
 
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-range.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-range.scss
index fd73e0ed..3ea55744 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-range.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-range.scss
@@ -31,7 +31,7 @@
   &::-webkit-slider-thumb {
     width: $form-range-thumb-width;
     height: $form-range-thumb-height;
-    margin-top: ($form-range-track-height - $form-range-thumb-height) / 2; // Webkit specific
+    margin-top: ($form-range-track-height - $form-range-thumb-height) * 0.5; // Webkit specific
     @include gradient-bg($form-range-thumb-bg);
     border: $form-range-thumb-border;
     @include border-radius($form-range-thumb-border-radius);
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-select.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-select.scss
index 4b1d07d2..b357ecbf 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-select.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/forms/_form-select.scss
@@ -8,6 +8,11 @@
   width: 100%;
   padding: $form-select-padding-y $form-select-indicator-padding $form-select-padding-y
     $form-select-padding-x;
+  // stylelint-disable-next-line property-no-vendor-prefix
+  -moz-padding-start: subtract(
+    $form-select-padding-x,
+    3px
+  ); // See https://github.com/twbs/bootstrap/issues/32636
   font-family: $form-select-font-family;
   @include font-size($form-select-font-size);
   font-weight: $form-select-font-weight;
@@ -21,6 +26,7 @@
   border: $form-select-border-width solid $form-select-border-color;
   @include border-radius($form-select-border-radius, 0);
   @include box-shadow($form-select-box-shadow);
+  @include transition($form-select-transition);
   appearance: none;
 
   &:focus {
@@ -58,6 +64,7 @@
   padding-bottom: $form-select-padding-y-sm;
   padding-left: $form-select-padding-x-sm;
   @include font-size($form-select-font-size-sm);
+  @include border-radius($form-select-border-radius-sm);
 }
 
 .form-select-lg {
@@ -65,4 +72,5 @@
   padding-bottom: $form-select-padding-y-lg;
   padding-left: $form-select-padding-x-lg;
   @include font-size($form-select-font-size-lg);
+  @include border-radius($form-select-border-radius-lg);
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_stacks.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_stacks.scss
new file mode 100644
index 00000000..6cd237ae
--- /dev/null
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_stacks.scss
@@ -0,0 +1,15 @@
+// scss-docs-start stacks
+.hstack {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  align-self: stretch;
+}
+
+.vstack {
+  display: flex;
+  flex: 1 1 auto;
+  flex-direction: column;
+  align-self: stretch;
+}
+// scss-docs-end stacks
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_stretched-link.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_stretched-link.scss
index 2e938236..71a1c755 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_stretched-link.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_stretched-link.scss
@@ -10,6 +10,6 @@
     bottom: 0;
     left: 0;
     z-index: $stretched-link-z-index;
-    content: '';
+    content: "";
   }
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_vr.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_vr.scss
new file mode 100644
index 00000000..37f86477
--- /dev/null
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/helpers/_vr.scss
@@ -0,0 +1,8 @@
+.vr {
+  display: inline-block;
+  align-self: stretch;
+  width: 1px;
+  min-height: 1em;
+  background-color: currentColor;
+  opacity: $hr-opacity;
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_backdrop.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_backdrop.scss
new file mode 100644
index 00000000..a29b0871
--- /dev/null
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_backdrop.scss
@@ -0,0 +1,18 @@
+// Shared between modals and offcanvases
+@mixin overlay-backdrop($zindex, $backdrop-bg, $backdrop-opacity) {
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: $zindex;
+  width: 100vw;
+  height: 100vh;
+  background-color: $backdrop-bg;
+
+  // Fade for backdrop
+  &.fade {
+    opacity: 0;
+  }
+  &.show {
+    opacity: $backdrop-opacity;
+  }
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_clearfix.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_clearfix.scss
index b18b8c21..ffc62bb2 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_clearfix.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_clearfix.scss
@@ -3,7 +3,7 @@
   &::after {
     display: block;
     clear: both;
-    content: '';
+    content: "";
   }
 }
 // scss-docs-end clearfix
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_grid.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_grid.scss
index 58715738..9bb013c6 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_grid.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_grid.scss
@@ -1,4 +1,4 @@
-/// Grid system
+// Grid system
 //
 // Generate semantic grid columns with these mixins.
 
@@ -7,14 +7,15 @@
   --#{$variable-prefix}gutter-y: 0;
   display: flex;
   flex-wrap: wrap;
+  // TODO: Revisit calc order after https://github.com/react-bootstrap/react-bootstrap/issues/6039 is fixed
   margin-top: calc(
-    var(--#{$variable-prefix}gutter-y) * -1
+    -1 * var(--#{$variable-prefix}gutter-y)
   ); // stylelint-disable-line function-disallowed-list
   margin-right: calc(
-    var(--#{$variable-prefix}gutter-x) / -2
+    -0.5 * var(--#{$variable-prefix}gutter-x)
   ); // stylelint-disable-line function-disallowed-list
   margin-left: calc(
-    var(--#{$variable-prefix}gutter-x) / -2
+    -0.5 * var(--#{$variable-prefix}gutter-x)
   ); // stylelint-disable-line function-disallowed-list
 }
 
@@ -32,10 +33,10 @@
   width: 100%;
   max-width: 100%; // Prevent `.col-auto`, `.col` (& responsive variants) from breaking out the grid
   padding-right: calc(
-    var(--#{$variable-prefix}gutter-x) / 2
+    var(--#{$variable-prefix}gutter-x) * 0.5
   ); // stylelint-disable-line function-disallowed-list
   padding-left: calc(
-    var(--#{$variable-prefix}gutter-x) / 2
+    var(--#{$variable-prefix}gutter-x) * 0.5
   ); // stylelint-disable-line function-disallowed-list
   margin-top: var(--#{$variable-prefix}gutter-y);
 }
@@ -43,7 +44,7 @@
 @mixin make-col($size: false, $columns: $grid-columns) {
   @if $size {
     flex: 0 0 auto;
-    width: percentage($size / $columns);
+    width: percentage(divide($size, $columns));
   } @else {
     flex: 1 1 0;
     max-width: 100%;
@@ -56,7 +57,7 @@
 }
 
 @mixin make-col-offset($size, $columns: $grid-columns) {
-  $num: $size / $columns;
+  $num: divide($size, $columns);
   margin-left: if($num == 0, 0, percentage($num));
 }
 
@@ -68,7 +69,7 @@
 @mixin row-cols($count) {
   > * {
     flex: 0 0 auto;
-    width: 100% / $count;
+    width: divide(100%, $count);
   }
 }
 
@@ -142,3 +143,27 @@
     }
   }
 }
+
+@mixin make-cssgrid($columns: $grid-columns, $breakpoints: $grid-breakpoints) {
+  @each $breakpoint in map-keys($breakpoints) {
+    $infix: breakpoint-infix($breakpoint, $breakpoints);
+
+    @include media-breakpoint-up($breakpoint, $breakpoints) {
+      @if $columns > 0 {
+        @for $i from 1 through $columns {
+          .g-col#{$infix}-#{$i} {
+            grid-column: auto / span $i;
+          }
+        }
+
+        // Start with `1` because `0` is and invalid value.
+        // Ends with `$columns - 1` because offsetting by the width of an entire row isn't possible.
+        @for $i from 1 through ($columns - 1) {
+          .g-start#{$infix}-#{$i} {
+            grid-column-start: $i;
+          }
+        }
+      }
+    }
+  }
+}
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_image.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_image.scss
index 95206cf8..e1df779f 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_image.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_image.scss
@@ -2,6 +2,7 @@
 // - Responsive image
 // - Retina image
 
+
 // Responsive image
 //
 // Keep images from scaling beyond the width of their parents.
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_utilities.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_utilities.scss
index 4f81668f..7e8ba4cc 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_utilities.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_utilities.scss
@@ -52,25 +52,46 @@
       }
     }
 
+    $is-css-var: map-get($utility, css-var);
+    $is-local-vars: map-get($utility, local-vars);
     $is-rtl: map-get($utility, rtl);
 
     @if $value != null {
       @if $is-rtl == false {
         /* rtl:begin:remove */
       }
-      .#{$property-class + $infix + $property-class-modifier} {
-        @each $property in $properties {
-          #{$property}: $value if($enable-important-utilities, !important, null);
+
+      @if $is-css-var {
+        .#{$property-class + $infix + $property-class-modifier} {
+          --#{$variable-prefix}#{$property-class}: #{$value};
         }
-      }
 
-      @each $pseudo in $state {
-        .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            --#{$variable-prefix}#{$property-class}: #{$value};
+          }
+        }
+      } @else {
+        .#{$property-class + $infix + $property-class-modifier} {
           @each $property in $properties {
+            @if $is-local-vars {
+              @each $local-var, $value in $is-local-vars {
+                --#{$variable-prefix}#{$local-var}: #{$value};
+              }
+            }
             #{$property}: $value if($enable-important-utilities, !important, null);
           }
         }
+
+        @each $pseudo in $state {
+          .#{$property-class + $infix + $property-class-modifier}-#{$pseudo}:#{$pseudo} {
+            @each $property in $properties {
+              #{$property}: $value if($enable-important-utilities, !important, null);
+            }
+          }
+        }
       }
+
       @if $is-rtl == false {
         /* rtl:end:remove */
       }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_visually-hidden.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_visually-hidden.scss
index ed7bc9c1..4fc7f49d 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_visually-hidden.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/mixins/_visually-hidden.scss
@@ -3,7 +3,7 @@
 // Hide content visually while keeping it accessible to assistive technologies
 //
 // See: https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/
-// See: https://hugogiraudel.com/2016/10/13/css-hide-and-seek/
+// See: https://kittygiraudel.com/2016/10/13/css-hide-and-seek/
 
 @mixin visually-hidden() {
   position: absolute !important;
diff --git a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss
index f4a7cf2b..80fa6260 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/bootstrap/vendor/_rfs.scss
@@ -4,7 +4,7 @@
 //
 // Automated responsive values for font sizes, paddings, margins and much more
 //
-// Licensed under MIT (https://github.com/twbs/rfs/blob/master/LICENSE)
+// Licensed under MIT (https://github.com/twbs/rfs/blob/main/LICENSE)
 
 // Configuration
 
@@ -52,11 +52,53 @@ $enable-rfs: true !default;
 // Cache $rfs-base-value unit
 $rfs-base-value-unit: unit($rfs-base-value);
 
+@function divide($dividend, $divisor, $precision: 10) {
+  $sign: if($dividend > 0 and $divisor > 0 or $dividend < 0 and $divisor < 0, 1, -1);
+  $dividend: abs($dividend);
+  $divisor: abs($divisor);
+  @if $dividend == 0 {
+    @return 0;
+  }
+  @if $divisor == 0 {
+    @error "Cannot divide by 0";
+  }
+  $remainder: $dividend;
+  $result: 0;
+  $factor: 10;
+  @while ($remainder > 0 and $precision >= 0) {
+    $quotient: 0;
+    @while ($remainder >= $divisor) {
+      $remainder: $remainder - $divisor;
+      $quotient: $quotient + 1;
+    }
+    $result: $result * 10 + $quotient;
+    $factor: $factor * 0.1;
+    $remainder: $remainder * 10;
+    $precision: $precision - 1;
+    @if ($precision < 0 and $remainder >= $divisor * 5) {
+      $result: $result + 1;
+    }
+  }
+  $result: $result * $factor * $sign;
+  $dividend-unit: unit($dividend);
+  $divisor-unit: unit($divisor);
+  $unit-map: (
+    'px': 1px,
+    'rem': 1rem,
+    'em': 1em,
+    '%': 1%,
+  );
+  @if ($dividend-unit != $divisor-unit and map-has-key($unit-map, $dividend-unit)) {
+    $result: $result * map-get($unit-map, $dividend-unit);
+  }
+  @return $result;
+}
+
 // Remove px-unit from $rfs-base-value for calculations
 @if $rfs-base-value-unit == px {
-  $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1);
+  $rfs-base-value: divide($rfs-base-value, $rfs-base-value * 0 + 1);
 } @else if $rfs-base-value-unit == rem {
-  $rfs-base-value: $rfs-base-value / ($rfs-base-value * 0 + 1 / $rfs-rem-value);
+  $rfs-base-value: divide($rfs-base-value, divide($rfs-base-value * 0 + 1, $rfs-rem-value));
 }
 
 // Cache $rfs-breakpoint unit to prevent multiple calls
@@ -64,16 +106,16 @@ $rfs-breakpoint-unit-cache: unit($rfs-breakpoint);
 
 // Remove unit from $rfs-breakpoint for calculations
 @if $rfs-breakpoint-unit-cache == px {
-  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1);
+  $rfs-breakpoint: divide($rfs-breakpoint, $rfs-breakpoint * 0 + 1);
 } @else if $rfs-breakpoint-unit-cache == rem or $rfs-breakpoint-unit-cache == 'em' {
-  $rfs-breakpoint: $rfs-breakpoint / ($rfs-breakpoint * 0 + 1 / $rfs-rem-value);
+  $rfs-breakpoint: divide($rfs-breakpoint, divide($rfs-breakpoint * 0 + 1, $rfs-rem-value));
 }
 
 // Calculate the media query value
 $rfs-mq-value: if(
   $rfs-breakpoint-unit == px,
   #{$rfs-breakpoint}px,
-  #{$rfs-breakpoint / $rfs-rem-value}#{$rfs-breakpoint-unit}
+  #{divide($rfs-breakpoint, $rfs-rem-value)}#{$rfs-breakpoint-unit}
 );
 $rfs-mq-property-width: if($rfs-mode == max-media-query, max-width, min-width);
 $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height);
@@ -161,12 +203,12 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
         // Convert to rem if needed
         $val: $val +
           ' ' +
-          if($rfs-unit == rem, #{$value / ($value * 0 + $rfs-rem-value)}rem, $value);
+          if($rfs-unit == rem, #{divide($value, $value * 0 + $rfs-rem-value)}rem, $value);
       } @else if $unit == rem {
         // Convert to px if needed
         $val: $val +
           ' ' +
-          if($rfs-unit == px, #{$value / ($value * 0 + 1) * $rfs-rem-value}px, $value);
+          if($rfs-unit == px, #{divide($value, $value * 0 + 1) * $rfs-rem-value}px, $value);
       } @else {
         // If $value isn't a number (like inherit) or $value has a unit (not px or rem, like 1.5em) or $ is 0, just print the value
         $val: $val + ' ' + $value;
@@ -198,20 +240,26 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
         $val: $val + ' ' + $value;
       } @else {
         // Remove unit from $value for calculations
-        $value: $value / ($value * 0 + if($unit == px, 1, 1 / $rfs-rem-value));
+        $value: divide($value, $value * 0 + if($unit == px, 1, divide(1, $rfs-rem-value)));
 
         // Only add the media query if the value is greater than the minimum value
         @if abs($value) <= $rfs-base-value or not $enable-rfs {
-          $val: $val + ' ' + if($rfs-unit == rem, #{$value / $rfs-rem-value}rem, #{$value}px);
+          $val: $val +
+            ' ' +
+            if($rfs-unit == rem, #{divide($value, $rfs-rem-value)}rem, #{$value}px);
         } @else {
           // Calculate the minimum value
-          $value-min: $rfs-base-value + (abs($value) - $rfs-base-value) / $rfs-factor;
+          $value-min: $rfs-base-value + divide(abs($value) - $rfs-base-value, $rfs-factor);
 
           // Calculate difference between $value and the minimum value
           $value-diff: abs($value) - $value-min;
 
           // Base value formatting
-          $min-width: if($rfs-unit == rem, #{$value-min / $rfs-rem-value}rem, #{$value-min}px);
+          $min-width: if(
+            $rfs-unit == rem,
+            #{divide($value-min, $rfs-rem-value)}rem,
+            #{$value-min}px
+          );
 
           // Use negative value if needed
           $min-width: if($value < 0, -$min-width, $min-width);
@@ -220,7 +268,7 @@ $rfs-mq-property-height: if($rfs-mode == max-media-query, max-height, min-height
           $variable-unit: if($rfs-two-dimensional, vmin, vw);
 
           // Calculate the variable width between 0 and $rfs-breakpoint
-          $variable-width: #{$value-diff * 100 / $rfs-breakpoint}#{$variable-unit};
+          $variable-width: #{divide($value-diff * 100, $rfs-breakpoint)}#{$variable-unit};
 
           // Return the calculated value
           $val: $val + ' calc(' + $min-width + if($value < 0, ' - ', ' + ') + $variable-width + ')';
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_colors.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_colors.scss
index e9ad0126..3443acc5 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_colors.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_colors.scss
@@ -2,6 +2,6 @@
 
 @each $color, $value in $theme-colors {
   .bg-#{$color} {
-    background-color: $value !important;
+    background-color: rgba($value, var(--mdb-bg-opacity)) !important;
   }
 }
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss
index 2e3cc5bc..4a287257 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_toasts.scss
@@ -9,6 +9,10 @@
   .btn-close {
     width: 1.3em;
   }
+
+  &:not(.show) {
+    display: block;
+  }
 }
 
 .toast-header {
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_utilities.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_utilities.scss
index 41f0505e..fa9a3997 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_utilities.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_utilities.scss
@@ -58,13 +58,21 @@ $utilities: map-merge(
         0: 0,
         5: 0.05,
         10: 0.1,
+        15: 0.15,
         20: 0.2,
+        25: 0.25,
         30: 0.3,
+        35: 0.35,
         40: 0.4,
+        45: 0.45,
         50: 0.5,
+        55: 0.55,
         60: 0.6,
+        65: 0.65,
         70: 0.7,
+        75: 0.75,
         80: 0.8,
+        85: 0.85,
         90: 0.9,
         95: 0.95,
         100: 1,
diff --git a/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss b/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss
index d5df2622..a9ffa534 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/free/_variables.scss
@@ -404,6 +404,11 @@ $body-color: $gray-800 !default;
 $border-radius-xl: 0.5rem !default;
 
 // Components
+
+// Placeholders
+$placeholder-opacity-max: 0.5 !default;
+$placeholder-opacity-min: 0.2 !default;
+//
 //
 // Shadows offset, blur, spread and color
 
@@ -618,6 +623,8 @@ $form-white-label-color: $gray-50 !default;
 $form-white-notch-div-border-color: $gray-50 !default;
 $form-white-input-focus-label-color: $white !default;
 $form-white-input-focus-border-color: $white !default;
+$form-white-placeholder-color: rgba(255, 255, 255, 0.7) !default;
+$form-white-disabled-bgc: rgba(255, 255, 255, 0.45) !default;
 
 $form-check-input-margin-left: 1.79rem !default;
 $form-check-input-radio-margin-left: 1.85rem !default;
@@ -1023,3 +1030,8 @@ $table-cell-padding-x: 1.4rem !default;
 $table-cell-padding-y-sm: 0.5rem !default;
 $table-cell-padding-x-sm: $table-cell-padding-x !default;
 $table-hover-bg: rgba(0, 0, 0, 0.075) !default;
+
+// Select
+$form-select-transition: all 0.2s linear;
+$form-select-focus-border-color: #1266f1;
+$form-select-focus-border-box-shadow: inset 0px 0px 0px 1px #1266f1;
diff --git a/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss b/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss
index 8c53f82b..1aedddf7 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/mdb.free.scss
@@ -33,6 +33,7 @@
 @import './bootstrap/badge';
 @import './bootstrap/alert';
 @import './bootstrap/progress';
+@import './bootstrap/placeholders';
 @import './bootstrap/list-group';
 @import './bootstrap/close';
 @import './bootstrap/toasts';
@@ -41,6 +42,7 @@
 @import './bootstrap/popover';
 @import './bootstrap/carousel';
 @import './bootstrap/spinners';
+@import './bootstrap/offcanvas';
 @import './bootstrap/tooltip';
 
 // Helpers
diff --git a/projects/mdb-angular-ui-kit/assets/scss/mdb.scss b/projects/mdb-angular-ui-kit/assets/scss/mdb.scss
index 86d099b5..0aaed794 100644
--- a/projects/mdb-angular-ui-kit/assets/scss/mdb.scss
+++ b/projects/mdb-angular-ui-kit/assets/scss/mdb.scss
@@ -19,7 +19,6 @@
 @import './bootstrap/grid';
 
 // BOOTSTRAP COMPONENTS
-@import './bootstrap/accordion';
 @import './bootstrap/tables';
 @import './bootstrap/forms';
 @import './bootstrap/buttons';
@@ -34,6 +33,7 @@
 @import './bootstrap/badge';
 @import './bootstrap/alert';
 @import './bootstrap/progress';
+@import './bootstrap/placeholders';
 @import './bootstrap/list-group';
 @import './bootstrap/close';
 @import './bootstrap/toasts';
@@ -42,6 +42,7 @@
 @import './bootstrap/popover';
 @import './bootstrap/carousel';
 @import './bootstrap/spinners';
+@import './bootstrap/offcanvas';
 @import './bootstrap/tooltip';
 
 // Helpers
diff --git a/projects/mdb-angular-ui-kit/carousel/carousel.component.ts b/projects/mdb-angular-ui-kit/carousel/carousel.component.ts
index 22f266f5..4de45dbd 100644
--- a/projects/mdb-angular-ui-kit/carousel/carousel.component.ts
+++ b/projects/mdb-angular-ui-kit/carousel/carousel.component.ts
@@ -133,6 +133,7 @@ export class MdbCarouselComponent implements AfterViewInit, OnDestroy {
       if (this.interval > 0 && this.ride) {
         this.play();
       }
+      this._cdRef.markForCheck();
     });
 
     if (this.keyboard) {
@@ -215,24 +216,18 @@ export class MdbCarouselComponent implements AfterViewInit, OnDestroy {
 
     this._animateSlides(direction, this.activeSlide, index);
     this.activeSlide = index;
-
-    this._cdRef.markForCheck();
   }
 
   next(): void {
     if (!this._isSliding) {
       this._slide(Direction.NEXT);
     }
-
-    this._cdRef.markForCheck();
   }
 
   prev(): void {
     if (!this._isSliding) {
       this._slide(Direction.PREV);
     }
-
-    this._cdRef.markForCheck();
   }
 
   private _slide(direction: Direction): void {
@@ -272,6 +267,7 @@ export class MdbCarouselComponent implements AfterViewInit, OnDestroy {
         this._reflow(nextEl);
         currentItem.start = true;
         nextItem.start = true;
+        this._cdRef.markForCheck();
       }, 0);
 
       const transitionDuration = 600;
@@ -299,6 +295,7 @@ export class MdbCarouselComponent implements AfterViewInit, OnDestroy {
         this._reflow(nextEl);
         currentItem.end = true;
         nextItem.end = true;
+        this._cdRef.markForCheck();
       }, 0);
 
       const transitionDuration = 600;
diff --git a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts b/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts
index 61700081..f4d25439 100644
--- a/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts
+++ b/projects/mdb-angular-ui-kit/dropdown/dropdown.directive.ts
@@ -5,6 +5,7 @@ import {
   Component,
   ElementRef,
   EventEmitter,
+  HostListener,
   Input,
   OnDestroy,
   Output,
@@ -60,6 +61,9 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
   private _animation = true;
 
   @Input() offset = 0;
+  @Input() closeOnOutsideClick = true;
+  @Input() closeOnItemClick = true;
+  @Input() closeOnEsc = true;
 
   @Output() dropdownShow: EventEmitter<MdbDropdownDirective> = new EventEmitter();
   @Output() dropdownShown: EventEmitter<MdbDropdownDirective> = new EventEmitter();
@@ -232,10 +236,14 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
     return position;
   }
 
-  private _listenToOutSideCick(
-    overlayRef: OverlayRef,
-    origin: HTMLElement
-  ): Observable<MouseEvent> {
+  private _listenToEscKeyup(overlayRef: OverlayRef): Observable<KeyboardEvent> {
+    return fromEvent(document, 'keyup').pipe(
+      filter((event: KeyboardEvent) => event.key === 'Escape'),
+      takeUntil(overlayRef.detachments())
+    );
+  }
+
+  private _listenToClick(overlayRef: OverlayRef, origin: HTMLElement): Observable<MouseEvent> {
     return fromEvent(document, 'click').pipe(
       filter((event: MouseEvent) => {
         const target = event.target as HTMLElement;
@@ -311,9 +319,25 @@ export class MdbDropdownDirective implements OnDestroy, AfterContentInit {
     this._open = true;
     this._overlayRef.attach(this._portal);
 
-    this._listenToOutSideCick(this._overlayRef, this._dropdownToggle.nativeElement).subscribe(() =>
-      this.hide()
-    );
+    this._listenToEscKeyup(this._overlayRef).subscribe((isEsc) => {
+      if (isEsc && this.closeOnEsc) {
+        this.hide();
+      }
+    });
+
+    this._listenToClick(this._overlayRef, this._dropdownToggle.nativeElement).subscribe((event) => {
+      const target = event.target as HTMLElement;
+      const isDropdownItem = target.classList && target.classList.contains('dropdown-item');
+
+      if (this.closeOnItemClick && isDropdownItem) {
+        this.hide();
+        return;
+      }
+      if (this.closeOnOutsideClick && !isDropdownItem) {
+        this.hide();
+        return;
+      }
+    });
 
     this._animationState = 'visible';
   }
diff --git a/projects/mdb-angular-ui-kit/package.json b/projects/mdb-angular-ui-kit/package.json
index 558f5ad1..a5eb4eb7 100644
--- a/projects/mdb-angular-ui-kit/package.json
+++ b/projects/mdb-angular-ui-kit/package.json
@@ -3,7 +3,7 @@
   "repository": "https://github.com/mdbootstrap/mdb-angular-ui-kit",
   "author": "MDBootstrap",
   "license": "MIT",
-  "version": "1.5.1",
+  "version": "1.6.0",
   "peerDependencies": {
     "@angular/common": "^12.0.0",
     "@angular/core": "^12.0.0",
diff --git a/projects/mdb-angular-ui-kit/popover/popover.directive.ts b/projects/mdb-angular-ui-kit/popover/popover.directive.ts
index 58983804..e6a50f93 100644
--- a/projects/mdb-angular-ui-kit/popover/popover.directive.ts
+++ b/projects/mdb-angular-ui-kit/popover/popover.directive.ts
@@ -30,7 +30,7 @@ import { BooleanInput, coerceBooleanProperty } from '@angular/cdk/coercion';
 })
 // eslint-disable-next-line @angular-eslint/component-class-suffix
 export class MdbPopoverDirective implements OnInit, OnDestroy {
-  @Input() mdbPopover = '';
+  @Input() mdbPopover: TemplateRef<any> | string = '';
   @Input() mdbPopoverTitle = '';
 
   @Input()
diff --git a/src/app/app.component.html b/src/app/app.component.html
index 9760b0e7..1a660c28 100644
--- a/src/app/app.component.html
+++ b/src/app/app.component.html
@@ -1,23 +1,56 @@
-<div class="container">
-  <div class="d-flex justify-content-center align-items-center" style="height: 100vh;">
-    <div class="text-center">
-      <img
-        class="mb-2"
-        src="https://bf-sale.mdbgo.io/bf.png"
-        width="800"
-        height="450"
-      />
-      <h2 class="fw-bold">Black Friday Sale</h2>
-      <h5 class="mb-3">Get MDB Pro with discounts <span class="text-danger">up to 95%</span>.</h5>
-      <p class="mb-3 fw-bold"> Hurry up the offer is limited!</p>
+<div class="container pt-5">
+  <div class="d-flex justify-content-center align-items-center pt-5">
+    <div class="">
+      <div class="text-center">
+        <img
+          class="mb-4"
+          src="https://mdbootstrap.com/img/logo/mdb-transparent-250px.png"
+          style="width: 180px"
+        />
+      </div>
+      <h5 class="mb-3">This is MDB Free</h5>
 
+      <p>
+        We hope it exceeds your expectations.<br />
+        1. Please report all bugs on our
+        <a href="https://mdbootstrap.com/support/cat/angular/">support forum</a
+        ><br />
+        2. Help us improve with a
+        <a href="https://forms.gle/RDgpTr9z5SAx2Y5w9"
+          >4 minute feedback survey</a
+        ><br />
+        3. Access MDB GO for
+        <a href="https://mdbootstrap.com/docs/standard/cli/"
+          >free hosting & deployment</a
+        ><br />
+      </p>
+      <p>
+        Keep coding,<br />
+        MDB Team
+      </p>
+      <hr />
       <a
-        class="btn btn-black btn-lg mt-2"
-        href="https://mdbootstrap.com/bf/sale/"
+        class="btn btn-primary btn-lg btn-block"
+        href="https://mdbootstrap.com/docs/standard/getting-started/"
         target="_blank"
         role="button"
-        > <i class="fas fa-shopping-cart"></i> Get the offer</a
+        >Start with MDB tutorials</a
+      >
+      <a
+        class="btn btn-primary btn-lg btn-block"
+        href="https://mdbootstrap.com/docs/standard/cli/"
+        target="_blank"
+        role="button"
+        >Start with backend template</a
+      >
+      <p class="mt-3 text-center mb-0">PS. Free users get PRO cheaper</p>
+      <a
+        class="btn btn-danger btn-lg btn-block"
+        href="https://mdbootstrap.com/sale/unique/"
+        target="_blank"
+        role="button"
+        >UPGRADE WITH DISCOUNT</a
       >
     </div>
   </div>
-</div>
\ No newline at end of file
+</div>