diff --git a/package-lock.json b/package-lock.json
index 3661c495bd492da9151332238eb3c9e0416574c1..d0a9998f4d06b1fae122cc214140fc083a65b7fa 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,12 +10,12 @@
       "hasInstallScript": true,
       "dependencies": {
         "@angular/animations": "^12.2.12",
-        "@angular/cdk": "^11.2.7",
+        "@angular/cdk": "^12.2.12",
         "@angular/common": "^12.2.12",
         "@angular/compiler": "^12.2.12",
         "@angular/core": "^12.2.12",
         "@angular/forms": "^12.2.12",
-        "@angular/material": "^11.2.7",
+        "@angular/material": "^12.2.12",
         "@angular/platform-browser": "^12.2.12",
         "@angular/platform-browser-dynamic": "^12.2.12",
         "@angular/router": "^12.2.12",
@@ -1967,18 +1967,19 @@
       }
     },
     "node_modules/@angular/cdk": {
-      "version": "11.2.13",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.13.tgz",
-      "integrity": "sha512-FkE4iCwoLbQxLDUOjV1I7M/6hmpyb7erAjEdWgch7nGRNxF1hqX5Bqf1lvLFKPNCbx5NRI5K7YVAdIUQUR8vug==",
+      "version": "12.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.12.tgz",
+      "integrity": "sha512-AK+74JZP95BDj9OJ1YUaRqPXkgs+oadTk7z+8omu1RcvDoUivouKxgODCQX5jI7rZeQIlnV49hEgBne07hYk4A==",
       "dependencies": {
-        "tslib": "^2.0.0"
+        "tslib": "^2.2.0"
       },
       "optionalDependencies": {
         "parse5": "^5.0.0"
       },
       "peerDependencies": {
-        "@angular/common": "^11.0.0 || ^12.0.0-0",
-        "@angular/core": "^11.0.0 || ^12.0.0-0"
+        "@angular/common": "^12.0.0 || ^13.0.0-0",
+        "@angular/core": "^12.0.0 || ^13.0.0-0",
+        "rxjs": "^6.5.3 || ^7.0.0"
       }
     },
     "node_modules/@angular/cli": {
@@ -2239,18 +2240,19 @@
       }
     },
     "node_modules/@angular/material": {
-      "version": "11.2.13",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.13.tgz",
-      "integrity": "sha512-FqFdGSkOtqsmeLyTSousodDGUy2NqbtxCIKv2rwbsIRwHNKB0KpR/UQhA2gMRuGa5hxhMJ0DW0Tf9neMRuLCTg==",
+      "version": "12.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.12.tgz",
+      "integrity": "sha512-Fgpffplmd3KfoK9Ms34jYXRaqFYLbgXdGl250Acg7fV16LN1KTOyYm2Qs+FQuqyhuXfhePPt6Srh7VcGTLT4+g==",
       "dependencies": {
-        "tslib": "^2.0.0"
+        "tslib": "^2.2.0"
       },
       "peerDependencies": {
-        "@angular/animations": "^11.0.0 || ^12.0.0-0",
-        "@angular/cdk": "11.2.13",
-        "@angular/common": "^11.0.0 || ^12.0.0-0",
-        "@angular/core": "^11.0.0 || ^12.0.0-0",
-        "@angular/forms": "^11.0.0 || ^12.0.0-0"
+        "@angular/animations": "^12.0.0 || ^13.0.0-0",
+        "@angular/cdk": "12.2.12",
+        "@angular/common": "^12.0.0 || ^13.0.0-0",
+        "@angular/core": "^12.0.0 || ^13.0.0-0",
+        "@angular/forms": "^12.0.0 || ^13.0.0-0",
+        "rxjs": "^6.5.3 || ^7.0.0"
       }
     },
     "node_modules/@angular/platform-browser": {
@@ -34660,12 +34662,12 @@
       }
     },
     "@angular/cdk": {
-      "version": "11.2.13",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.13.tgz",
-      "integrity": "sha512-FkE4iCwoLbQxLDUOjV1I7M/6hmpyb7erAjEdWgch7nGRNxF1hqX5Bqf1lvLFKPNCbx5NRI5K7YVAdIUQUR8vug==",
+      "version": "12.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.2.12.tgz",
+      "integrity": "sha512-AK+74JZP95BDj9OJ1YUaRqPXkgs+oadTk7z+8omu1RcvDoUivouKxgODCQX5jI7rZeQIlnV49hEgBne07hYk4A==",
       "requires": {
         "parse5": "^5.0.0",
-        "tslib": "^2.0.0"
+        "tslib": "^2.2.0"
       }
     },
     "@angular/cli": {
@@ -34852,11 +34854,11 @@
       "dev": true
     },
     "@angular/material": {
-      "version": "11.2.13",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.13.tgz",
-      "integrity": "sha512-FqFdGSkOtqsmeLyTSousodDGUy2NqbtxCIKv2rwbsIRwHNKB0KpR/UQhA2gMRuGa5hxhMJ0DW0Tf9neMRuLCTg==",
+      "version": "12.2.12",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.2.12.tgz",
+      "integrity": "sha512-Fgpffplmd3KfoK9Ms34jYXRaqFYLbgXdGl250Acg7fV16LN1KTOyYm2Qs+FQuqyhuXfhePPt6Srh7VcGTLT4+g==",
       "requires": {
-        "tslib": "^2.0.0"
+        "tslib": "^2.2.0"
       }
     },
     "@angular/platform-browser": {
diff --git a/package.json b/package.json
index 317c4549c5e67956f731c58b9d19f8c79c4665f3..f31d672a8d548b8f25d032d2f9fff6823bf8c294 100644
--- a/package.json
+++ b/package.json
@@ -20,12 +20,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^12.2.12",
-    "@angular/cdk": "^11.2.7",
+    "@angular/cdk": "^12.2.12",
     "@angular/common": "^12.2.12",
     "@angular/compiler": "^12.2.12",
     "@angular/core": "^12.2.12",
     "@angular/forms": "^12.2.12",
-    "@angular/material": "^11.2.7",
+    "@angular/material": "^12.2.12",
     "@angular/platform-browser": "^12.2.12",
     "@angular/platform-browser-dynamic": "^12.2.12",
     "@angular/router": "^12.2.12",
diff --git a/projects/nshmp-lib/src/lib/components/error/error.component.scss b/projects/nshmp-lib/src/lib/components/error/error.component.scss
index 32cf3fe01314b79975489e2b614a12ba416f7e19..9d46071c029212ad8895e5e918c5f7f54b15c4b9 100644
--- a/projects/nshmp-lib/src/lib/components/error/error.component.scss
+++ b/projects/nshmp-lib/src/lib/components/error/error.component.scss
@@ -1,10 +1,11 @@
+@use '~@angular/material' as mat;
 @import '~@ghsc/nshmp-template/styles/material-theme';
 
 mat-card {
   padding: 0;
 
   mat-card-header {
-    background-color: mat-color($nshmp-warn, 300);
+    background-color: mat.get-color-from-palette($nshmp-warn, 300);
   }
 
   mat-card-title {