diff --git a/package-lock.json b/package-lock.json
index 3ec4952..6c041e0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -425,12 +425,12 @@
       }
     },
     "@angular/cdk": {
-      "version": "11.1.2",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.1.2.tgz",
-      "integrity": "sha512-RnKvMWAIcWbWoUdBfAoOs4pQl6t5O+1OuPlBNK5aL2FYqoLv5U0fP88Rf7OhjPlD0ASsPGLG45t+dA5sUVZ46Q==",
+      "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"
       },
       "dependencies": {
         "parse5": {
@@ -438,6 +438,11 @@
           "resolved": "https://registry.npmjs.org/parse5/-/parse5-5.1.1.tgz",
           "integrity": "sha512-ugq4DFI0Ptb+WWjAdOK16+u/nHfiIrcE+sh8kZMaM0WllQKLI9rOUq6c2b7cwPkXdzfQESqvoqK6ug7U/Yyzug==",
           "optional": true
+        },
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
         }
       }
     },
@@ -680,11 +685,18 @@
       }
     },
     "@angular/material": {
-      "version": "11.1.2",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.1.2.tgz",
-      "integrity": "sha512-Fyjk6LUrJ+mJmRMrnM2L4Q9pijuhLa8q1G50mUYa81OJPWnhMRlzoM2dDHpS/ibIARpBc3QA8PmF3hUgyLxgMg==",
+      "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"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "2.3.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-2.3.1.tgz",
+          "integrity": "sha512-77EbyPPpMz+FRFRuAFlWMtmgUWGe9UOG2Z25NqCwiIjRhOf5iKGuzSe5P2w1laq+FkRy4p+PCuVkJSGkzTEKVw=="
+        }
       }
     },
     "@angular/platform-browser": {
diff --git a/package.json b/package.json
index 4e5244e..09c91ae 100644
--- a/package.json
+++ b/package.json
@@ -14,12 +14,12 @@
   "dependencies": {
     "@angular-material-components/datetime-picker": "^5.0.3",
     "@angular/animations": "~12.2.12",
-    "@angular/cdk": "^11.1.2",
+    "@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.1.2",
+    "@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/src/app/app.theme.scss b/src/app/app.theme.scss
index e86ed69..a6b1111 100644
--- a/src/app/app.theme.scss
+++ b/src/app/app.theme.scss
@@ -1,4 +1,5 @@
 // -----------------------------------------------------------------------------------------------------
+@use '~@angular/material' as mat;
 // @ Custom color maps
 // -----------------------------------------------------------------------------------------------------
 $navy-app-theme: (
@@ -72,19 +73,19 @@ $apside-primary-app-theme: (
 // -----------------------------------------------------------------------------------------------------
 
 // Define the primary, accent and warn palettes
-$default-primary-palette: mat-palette($navy-app-theme);
-$default-accent-palette: mat-palette($mat-light-blue, 600, 400, 700);
-$default-warn-palette: mat-palette($mat-red);
+$default-primary-palette: mat.define-palette($navy-app-theme);
+$default-accent-palette: mat.define-palette(mat.$light-blue-palette, 600, 400, 700);
+$default-warn-palette: mat.define-palette(mat.$red-palette);
 
 // Create the Material theme object
-$theme: mat-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
+$theme: mat.define-light-theme($default-primary-palette, $default-accent-palette, $default-warn-palette);
 
 // Add ".theme-default" class to the body to activate this theme.
 // Class name must start with "theme-" !!!
 .theme-default {
 
     // Create an Angular Material theme from the $theme map
-    @include angular-material-theme($theme);
+    @include mat.all-component-themes($theme);
 }
 
 // -----------------------------------------------------------------------------------------------------
@@ -92,19 +93,19 @@ $theme: mat-light-theme($default-primary-palette, $default-accent-palette, $defa
 // -----------------------------------------------------------------------------------------------------
 
 // Define the primary, accent and warn palettes
-$blue-gray-dark-theme-primary-palette: mat-palette($navy-app-theme);
-$blue-gray-dark-theme-accent-palette: mat-palette($mat-blue-gray);
-$blue-gray-dark-theme-warn-palette: mat-palette($mat-red);
+$blue-gray-dark-theme-primary-palette: mat.define-palette($navy-app-theme);
+$blue-gray-dark-theme-accent-palette: mat.define-palette(mat.$blue-gray-palette);
+$blue-gray-dark-theme-warn-palette: mat.define-palette(mat.$red-palette);
 
 // Create the Material theme object
-$blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
+$blue-gray-dark-theme: mat.define-dark-theme($blue-gray-dark-theme-primary-palette, $blue-gray-dark-theme-accent-palette, $blue-gray-dark-theme-warn-palette);
 
 // Add ".theme-blue-gray-dark" class to the body to activate this theme.
 // Class name must start with "theme-" !!!
 .theme-blue-gray-dark {
 
     // Generate the Angular Material theme
-    @include angular-material-theme($blue-gray-dark-theme);
+    @include mat.all-component-themes($blue-gray-dark-theme);
 }
 
 
@@ -113,13 +114,13 @@ $blue-gray-dark-theme: mat-dark-theme($blue-gray-dark-theme-primary-palette, $bl
 // -----------------------------------------------------------------------------------------------------
 
 // Angular Material typography
-$typography: mat-typography-config(
+$typography: mat.define-typography-config(
     $font-family: 'Muli, Helvetica Neue, Arial, sans-serif',
-    $title: mat-typography-level(20px, 32px, 600),
-    $body-2: mat-typography-level(14px, 24px, 600),
-    $button: mat-typography-level(14px, 14px, 600),
-    $input: mat-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
+    $title: mat.define-typography-level(20px, 32px, 600),
+    $body-2: mat.define-typography-level(14px, 24px, 600),
+    $button: mat.define-typography-level(14px, 14px, 600),
+    $input: mat.define-typography-level(16px, 1.125, 400) // line-height must be unitless !!!
 );
 
 // Setup the typography
-@include angular-material-typography($typography);
\ No newline at end of file
+@include mat.all-component-typographies($typography);
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index e7c56bd..865bf5c 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,5 +1,5 @@
-@import '~@angular/material/theming';
-@include mat-core();
+@use '~@angular/material' as mat;
+@include mat.core();
 
 // Import app.theme.scss
 @import "app/app.theme";