diff --git a/ui-ngx/package.json b/ui-ngx/package.json
index 09daa6bc04..44cfd99ff5 100644
--- a/ui-ngx/package.json
+++ b/ui-ngx/package.json
@@ -14,13 +14,13 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^12.2.13",
-    "@angular/cdk": "^11.2.13",
+    "@angular/cdk": "^12.2.13",
     "@angular/common": "^12.2.13",
     "@angular/compiler": "^12.2.13",
     "@angular/core": "^12.2.13",
     "@angular/flex-layout": "^12.0.0-beta.35",
     "@angular/forms": "^12.2.13",
-    "@angular/material": "^11.2.13",
+    "@angular/material": "^12.2.13",
     "@angular/platform-browser": "^12.2.13",
     "@angular/platform-browser-dynamic": "^12.2.13",
     "@angular/router": "^12.2.13",
@@ -148,4 +148,4 @@
   "resolutions": {
     "lodash": "~4.17.21"
   }
-}
+}
\ No newline at end of file
diff --git a/ui-ngx/src/theme.scss b/ui-ngx/src/theme.scss
index 25e1131e63..fdad632bee 100644
--- a/ui-ngx/src/theme.scss
+++ b/ui-ngx/src/theme.scss
@@ -13,11 +13,11 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 @import '~@mat-datetimepicker/core/datetimepicker/datetimepicker-theme.scss';
 @import './scss/constants';
 
-@include mat-core();
+@include mat.core();
 
 $tb-primary-color: #305680;
 $tb-secondary-color: #527dad;
@@ -41,39 +41,39 @@ $tb-mat-indigo: (
   A400: #3d5afe,
   A700: #304ffe,
   contrast: (
-    50: $dark-primary-text,
-    100: $dark-primary-text,
-    200: $dark-primary-text,
-    300: $light-primary-text,
-    400: $light-primary-text,
-    500: $light-primary-text,
-    600: $light-primary-text,
-    700: $light-primary-text,
-    800: $light-primary-text,
-    900: $light-primary-text,
-    A100: $dark-primary-text,
-    A200: $light-primary-text,
-    A400: $light-primary-text,
-    A700: $light-primary-text,
+    50: rgba(black, 0.87),
+    100: rgba(black, 0.87),
+    200: rgba(black, 0.87),
+    300: white,
+    400: white,
+    500: white,
+    600: white,
+    700: white,
+    800: white,
+    900: white,
+    A100: rgba(black, 0.87),
+    A200: white,
+    A400: white,
+    A700: white,
   )
 );
 
-$tb-primary: mat-palette($tb-mat-indigo);
-$tb-accent: mat-palette($mat-deep-orange);
+$tb-primary: mat.define-palette($tb-mat-indigo);
+$tb-accent: mat.define-palette(mat.$deep-orange-palette);
 
-$background: (background: map_get($mat-grey, 200));
+$background: (background: map_get(mat.$grey-palette, 200));
 
-$tb-theme-background: map_merge($mat-light-theme-background, $background);
+$tb-theme-background: map_merge(mat.$light-theme-background-palette, $background);
 
-$tb-mat-theme: mat-light-theme(
+$tb-mat-theme: mat.define-light-theme(
     $tb-primary,
     $tb-accent
 );
 
 $tb-theme: map_merge($tb-mat-theme, (background: $tb-theme-background));
 
-$primary: mat-color($tb-primary);
-$accent: mat-color($tb-accent);
+$primary: mat.get-color-from-palette($tb-primary);
+$accent: mat.get-color-from-palette($tb-accent);
 
 $tb-dark-mat-indigo: (
   50: #e8eaf6,
@@ -91,24 +91,24 @@ $tb-dark-mat-indigo: (
   A400: #3d5afe,
   A700: #304ffe,
   contrast: (
-    50: $dark-primary-text,
-    100: $dark-primary-text,
-    200: $dark-primary-text,
-    300: $dark-primary-text,
-    400: $dark-primary-text,
+    50: rgba(black, 0.87),
+    100: rgba(black, 0.87),
+    200: rgba(black, 0.87),
+    300: rgba(black, 0.87),
+    400: rgba(black, 0.87),
     500: map_get($tb-mat-indigo, 900),
-    600: $light-primary-text,
-    700: $light-primary-text,
-    800: $light-primary-text,
-    900: $light-primary-text,
-    A100: $dark-primary-text,
-    A200: $dark-primary-text,
-    A400: $dark-primary-text,
-    A700: $dark-primary-text,
+    600: white,
+    700: white,
+    800: white,
+    900: white,
+    A100: rgba(black, 0.87),
+    A200: rgba(black, 0.87),
+    A400: rgba(black, 0.87),
+    A700: rgba(black, 0.87),
   )
 );
 
-$tb-dark-primary: mat-palette($tb-dark-mat-indigo);
+$tb-dark-primary: mat.define-palette($tb-dark-mat-indigo);
 
 $tb-dark-theme-background: (
   status-bar: black,
@@ -119,22 +119,22 @@ $tb-dark-theme-background: (
   dialog:     map_get($tb-dark-mat-indigo, 800),
   disabled-button: rgba(white, 0.12),
   raised-button: map-get($tb-dark-mat-indigo, 50),
-  focused-button: $light-focused,
+  focused-button: rgba(white, 0.12),
   selected-button: map_get($tb-dark-mat-indigo, 900),
   selected-disabled-button: map_get($tb-dark-mat-indigo, 800),
   disabled-button-toggle: black,
   unselected-chip: map_get($tb-dark-mat-indigo, 700),
   disabled-list-option: black,
-  tooltip: map_get($mat-grey, 700),
+  tooltip: map_get(mat.$grey-palette, 700),
 );
 
-@function get-tb-dark-theme($primary, $accent, $warn: mat-palette($mat-red)) {
+@function get-tb-dark-theme($primary, $accent, $warn: mat.define-palette(mat.$red-palette)) {
   @return (
     primary: $primary,
     accent: $accent,
     warn: $warn,
     is-dark: true,
-    foreground: $mat-dark-theme-foreground,
+    foreground: mat.$dark-theme-foreground-palette,
     background: $tb-dark-theme-background,
   );
 }
@@ -153,8 +153,8 @@ $tb-dark-theme: get-tb-dark-theme(
 
   mat-fab-toolbar {
     .mat-fab-toolbar-background {
-      background: mat-color($background, app-bar);
-      color: mat-color($foreground, text);
+      background: mat.get-color-from-palette($background, app-bar);
+      color: mat.get-color-from-palette($foreground, text);
     }
     &.mat-primary {
       .mat-fab-toolbar-background {
@@ -175,8 +175,8 @@ $tb-dark-theme: get-tb-dark-theme(
 }
 
 @mixin _mat-toolbar-inverse-color($palette) {
-  background: mat-color($palette, default-contrast);
-  color: $dark-primary-text;
+  background: mat.get-color-from-palette($palette, default-contrast);
+  color: rgba(black, 0.87);
 }
 
 @mixin mat-fab-toolbar-inverse-theme($theme) {
@@ -188,8 +188,8 @@ $tb-dark-theme: get-tb-dark-theme(
 
   mat-fab-toolbar {
     .mat-fab-toolbar-background {
-      background: mat-color($background, app-bar);
-      color: mat-color($foreground, text);
+      background: mat.get-color-from-palette($background, app-bar);
+      color: mat.get-color-from-palette($foreground, text);
     }
     &.mat-primary {
       .mat-fab-toolbar-background {
@@ -201,15 +201,15 @@ $tb-dark-theme: get-tb-dark-theme(
         @include _mat-toolbar-inverse-color($primary);
         button.mat-icon-button {
           mat-icon {
-            color: mat-color($primary);
+            color: mat.get-color-from-palette($primary);
           }
         }
       }
     }
     .mat-fab {
       &.mat-primary {
-        background: mat-color($primary, default-contrast);
-        color: mat-color($primary);
+        background: mat.get-color-from-palette($primary, default-contrast);
+        color: mat.get-color-from-palette($primary);
       }
     }
   }
@@ -221,7 +221,7 @@ $tb-dark-theme: get-tb-dark-theme(
 
   mat-toolbar{
     &.mat-hue-3 {
-      background-color: mat-color($primary, 'A100');
+      background-color: mat.get-color-from-palette($primary, 'A100');
     }
   }
 
@@ -233,12 +233,12 @@ $tb-dark-theme: get-tb-dark-theme(
 }
 
 .tb-default {
-  @include angular-material-theme($tb-theme);
+  @include mat.all-component-themes($tb-theme);
   @include mat-datetimepicker-theme($tb-theme);
   @include tb-components-theme($tb-theme);
 }
 
 .tb-dark {
-  @include angular-material-theme($tb-dark-theme);
+  @include mat.all-component-themes($tb-dark-theme);
 }
 
diff --git a/ui-ngx/yarn.lock b/ui-ngx/yarn.lock
index 3b3bb0d055..9aae7fabc0 100644
--- a/ui-ngx/yarn.lock
+++ b/ui-ngx/yarn.lock
@@ -271,12 +271,12 @@
   dependencies:
     tslib "^2.2.0"
 
-"@angular/cdk@^11.2.13":
-  version "11.2.13"
-  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-11.2.13.tgz#d54c9187e3b8cf3f8ba190b1edddc08ed2b740de"
-  integrity sha512-FkE4iCwoLbQxLDUOjV1I7M/6hmpyb7erAjEdWgch7nGRNxF1hqX5Bqf1lvLFKPNCbx5NRI5K7YVAdIUQUR8vug==
+"@angular/cdk@^12.2.13":
+  version "12.2.13"
+  resolved "https://registry.yarnpkg.com/@angular/cdk/-/cdk-12.2.13.tgz#1fdbe814adfd6b4ff906c6d9c4c6df07b83f09d8"
+  integrity sha512-zSKRhECyFqhingIeyRInIyTvYErt4gWo+x5DQr0b7YLUbU8DZSwWnG4w76Ke2s4U8T7ry1jpJBHoX/e8YBpGMg==
   dependencies:
-    tslib "^2.0.0"
+    tslib "^2.2.0"
   optionalDependencies:
     parse5 "^5.0.0"
 
@@ -375,12 +375,12 @@
   resolved "https://registry.yarnpkg.com/@angular/language-service/-/language-service-12.2.13.tgz#326045a328f8a962287037d7a85be8120074421c"
   integrity sha512-jb9s3IJuWNKTRcM90NOwvMfiy85nnKfTxxLVn8/QFMO6+Ps/hsVZNp+W/TmAEDvCkon+9q0O4hwa4MY1m/Dlkw==
 
-"@angular/material@^11.2.13":
-  version "11.2.13"
-  resolved "https://registry.yarnpkg.com/@angular/material/-/material-11.2.13.tgz#99960316d3ce58aac7497d7bb8b0c05468f502b9"
-  integrity sha512-FqFdGSkOtqsmeLyTSousodDGUy2NqbtxCIKv2rwbsIRwHNKB0KpR/UQhA2gMRuGa5hxhMJ0DW0Tf9neMRuLCTg==
+"@angular/material@^12.2.13":
+  version "12.2.13"
+  resolved "https://registry.yarnpkg.com/@angular/material/-/material-12.2.13.tgz#7f92f95002a2abaa8bb115ca8f0809bdc3f7d3fc"
+  integrity sha512-6g2GyN4qp2D+DqY2AwrQuPB3cd9gybvQVXvNRbTPXEulHr+LgGei00ySdFHFp6RvdGSMZ4i3LM1Fq3VkFxhCfQ==
   dependencies:
-    tslib "^2.0.0"
+    tslib "^2.2.0"
 
 "@angular/platform-browser-dynamic@^12.2.13":
   version "12.2.13"