diff --git a/pdb-js/package-lock.json b/pdb-js/package-lock.json
index 6e0af5d..907d1cc 100644
--- a/pdb-js/package-lock.json
+++ b/pdb-js/package-lock.json
@@ -248,12 +248,12 @@
       }
     },
     "@angular/cdk": {
-      "version": "11.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.10.tgz",
-      "integrity": "sha512-Cq1dTQDGcqfB2ks8q3q4HPf7kEXU3FCB/OC5XYGMhs8tUyFTabhmXAcfkiBA4YO8YPWRc8FKrJsE1q4nV8vPKQ==",
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.1.1.tgz",
+      "integrity": "sha512-MJENa8qmfLAr6t59u1+mEC2YPbCn4n3vsY6k8fKyf+ILXwwGHWNZlYblaRMBjrF/crSx1Kd5vb30RCqIcNTGsA==",
       "requires": {
         "parse5": "^5.0.0",
-        "tslib": "^2.0.0"
+        "tslib": "^2.2.0"
       },
       "dependencies": {
         "parse5": {
@@ -499,11 +499,11 @@
       "dev": true
     },
     "@angular/material": {
-      "version": "11.2.10",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.10.tgz",
-      "integrity": "sha512-itylLtTloyCrmtotccVzplso7DGoiFdN91ud2sopGacTpfKVkw4tO5nIWRGWDmuu3dvHCqGo3h6EoZN0l9G+Wg==",
+      "version": "12.1.1",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.1.1.tgz",
+      "integrity": "sha512-q2vhbVQfjr+88beqCotCVlaPRyy9y2O2asiR3+0BU9OJ1DjTo1QpBmMpck5InP7Es49t9RTk9RzzC0t18p45yA==",
       "requires": {
-        "tslib": "^2.0.0"
+        "tslib": "^2.2.0"
       }
     },
     "@angular/platform-browser": {
diff --git a/pdb-js/package.json b/pdb-js/package.json
index ee95e39..01f1f78 100644
--- a/pdb-js/package.json
+++ b/pdb-js/package.json
@@ -13,12 +13,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^12.1.1",
-    "@angular/cdk": "^11.2.10",
+    "@angular/cdk": "^12.1.1",
     "@angular/common": "^12.1.1",
     "@angular/compiler": "^12.1.1",
     "@angular/core": "^12.1.1",
     "@angular/forms": "^12.1.1",
-    "@angular/material": "^11.2.10",
+    "@angular/material": "^12.1.1",
     "@angular/platform-browser": "^12.1.1",
     "@angular/platform-browser-dynamic": "^12.1.1",
     "@angular/router": "^12.1.1",
diff --git a/pdb-js/src/custom-theme.scss b/pdb-js/src/custom-theme.scss
index f897e6c..7052f45 100644
--- a/pdb-js/src/custom-theme.scss
+++ b/pdb-js/src/custom-theme.scss
@@ -1,24 +1,24 @@
-@import '~@angular/material/theming';
+@use '~@angular/material' as mat;
 // Plus imports for other components in your app.
 
 // Include the common styles for Angular Material. We include this here so that you only
 // have to load a single css file for Angular Material in your app.
 // Be sure that you only ever include this mixin once!
-@include mat-core();
+@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$candy-app-primary: mat-palette($mat-blue);
-$candy-app-accent:  mat-palette($mat-blue, A200, A100, A400);
+$candy-app-primary: mat.define-palette(mat.$blue-palette);
+$candy-app-accent:  mat.define-palette(mat.$blue-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$candy-app-warn:    mat-palette($mat-red);
+$candy-app-warn:    mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$candy-app-theme: mat-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
+$candy-app-theme: mat.define-light-theme($candy-app-primary, $candy-app-accent, $candy-app-warn);
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
-@include angular-material-theme($candy-app-theme);
\ No newline at end of file
+@include mat.all-component-themes($candy-app-theme);
\ No newline at end of file
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index bdd0409..b109ced 100644
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -1,4 +1,5 @@
 /* You can add global styles to this file, and also import other style files */
+@use '~@angular/material' as mat;
 /*
 blue
 #CBD7F4
@@ -145,7 +146,7 @@ mat-form-field.pdb-form-wide {
 
 .errorPanel {
   padding: 1ex;
-  background-color: map-get($mat-red, 100);
+  background-color: map-get(mat.$red-palette, 100);
   border-radius: 5px;
 }