diff --git a/package.json b/package.json
index 914f96d2..ba76acae 100644
--- a/package.json
+++ b/package.json
@@ -37,13 +37,13 @@
   "private": false,
   "dependencies": {
     "@angular/animations": "^12.2.17",
-    "@angular/cdk": "^11.2.13",
+    "@angular/cdk": "^12.2.13",
     "@angular/common": "^12.2.17",
     "@angular/compiler": "^12.2.17",
     "@angular/core": "^12.2.17",
     "@angular/forms": "^12.2.17",
     "@angular/localize": "^12.2.17",
-    "@angular/material": "^11.2.13",
+    "@angular/material": "^12.2.13",
     "@angular/platform-browser": "^12.2.17",
     "@angular/platform-browser-dynamic": "^12.2.17",
     "@angular/router": "^12.2.17",
diff --git a/src/styles.scss b/src/styles.scss
index ed2e4f51..5b188c74 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -1,12 +1,12 @@
 // Custom Theming for Angular Material
+@use '~@angular/material' as mat;
 // For more information: https://material.angular.io/guide/theming
-@import '~@angular/material/theming';
 // 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();
 
 // import your custom themes
 @import 'theme-light.scss';
@@ -14,13 +14,13 @@
 @import 'theme-contrast.scss';
 
 .theme-light {
-	@include angular-material-theme($theme-light);
+	@include mat.all-component-themes($theme-light);
 }
 .theme-dark {
-	@include angular-material-theme($theme-dark);
+	@include mat.all-component-themes($theme-dark);
 }
 .theme-contrast {
-	@include angular-material-theme($theme-contrast);
+	@include mat.all-component-themes($theme-contrast);
 }
 
 /*
diff --git a/src/styles/themes/_high-contrast.scss b/src/styles/themes/_high-contrast.scss
index 6a3ecd69..727faceb 100644
--- a/src/styles/themes/_high-contrast.scss
+++ b/src/styles/themes/_high-contrast.scss
@@ -1,6 +1,4 @@
-///**
-//aimed for visual impaired people
-// */
+//__<<ngThemingMigrationEscapedComment0>>__
 //$main-theme-color: #00003b;
 //#big_container {
 //	&.theme-high-contrast {
diff --git a/src/theme-contrast.scss b/src/theme-contrast.scss
index 250726d3..70a0828f 100644
--- a/src/theme-contrast.scss
+++ b/src/theme-contrast.scss
@@ -1,16 +1,17 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
+@use '~@angular/material' as mat;
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$theme-contrast-primary: mat-palette($mat-indigo);
-$theme-contrast-accent: mat-palette($mat-pink, A200, A100, A400);
+$theme-contrast-primary: mat.define-palette(mat.$indigo-palette);
+$theme-contrast-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$theme-contrast-warn: mat-palette($mat-red);
+$theme-contrast-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme-contrast: mat-light-theme($theme-contrast-primary, $theme-contrast-accent, $theme-contrast-warn);
+$theme-contrast: mat.define-light-theme($theme-contrast-primary, $theme-contrast-accent, $theme-contrast-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($theme-contrast);
+@include mat.all-component-themes($theme-contrast);
diff --git a/src/theme-dark.scss b/src/theme-dark.scss
index de80b1fc..835ee73e 100644
--- a/src/theme-dark.scss
+++ b/src/theme-dark.scss
@@ -1,16 +1,17 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
+@use '~@angular/material' as mat;
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$theme-dark-primary: mat-palette($mat-indigo);
-$theme-dark-accent: mat-palette($mat-pink, A200, A100, A400);
+$theme-dark-primary: mat.define-palette(mat.$indigo-palette);
+$theme-dark-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$theme-dark-warn: mat-palette($mat-red);
+$theme-dark-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme-dark: mat-dark-theme($theme-dark-primary, $theme-dark-accent, $theme-dark-warn);
+$theme-dark: mat.define-dark-theme($theme-dark-primary, $theme-dark-accent, $theme-dark-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($theme-dark);
+@include mat.all-component-themes($theme-dark);
diff --git a/src/theme-light.scss b/src/theme-light.scss
index 830c374f..593cd6ed 100644
--- a/src/theme-light.scss
+++ b/src/theme-light.scss
@@ -1,16 +1,17 @@
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
+@use '~@angular/material' as mat;
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
 // hue. Available color palettes: https://material.io/design/color/
-$theme-light-primary: mat-palette($mat-indigo);
-$theme-light-accent: mat-palette($mat-pink, A200, A100, A400);
+$theme-light-primary: mat.define-palette(mat.$indigo-palette);
+$theme-light-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$theme-light-warn: mat-palette($mat-red);
+$theme-light-warn: mat.define-palette(mat.$red-palette);
 
 // Create the theme object (a Sass map containing all of the palettes).
-$theme-light: mat-light-theme($theme-light-primary, $theme-light-accent, $theme-light-warn);
+$theme-light: mat.define-light-theme($theme-light-primary, $theme-light-accent, $theme-light-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($theme-light);
+@include mat.all-component-themes($theme-light);
diff --git a/yarn.lock b/yarn.lock
index d8b1ed0a..3c0f3605 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -205,12 +205,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"
 
@@ -301,12 +301,12 @@
     glob "7.1.7"
     yargs "^17.0.0"
 
-"@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.17":
   version "12.2.17"