diff --git a/package-lock.json b/package-lock.json
index 1b109ffc..1fabf851 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -361,12 +361,12 @@
             }
         },
         "@angular/cdk": {
-            "version": "11.2.11",
-            "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-11.2.11.tgz",
-            "integrity": "sha512-INDyO6Vh4WjsWkYAeZN39B4wTs+VqoAcTGdVBA39uij6wdu00ufr7pPRHtjAoNgrOWjEd/SCgDaUMcFEZ2+lcg==",
+            "version": "12.0.0",
+            "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-12.0.0.tgz",
+            "integrity": "sha512-Ij1wNlufbwH2R3zVwkiJgrI0Oc4+yuveEFWMnckcZ7t6E3drmeS1/YeHSbYlWau+fglWs7LtJWC4dEIpGymvzg==",
             "requires": {
                 "parse5": "^5.0.0",
-                "tslib": "^2.0.0"
+                "tslib": "^2.1.0"
             }
         },
         "@angular/cli": {
@@ -547,19 +547,19 @@
             "dev": true
         },
         "@angular/material": {
-            "version": "11.2.11",
-            "resolved": "https://registry.npmjs.org/@angular/material/-/material-11.2.11.tgz",
-            "integrity": "sha512-B9uehF/TCaH6+nCY3+S8GxSHzFbk1OD4djzyBcSNsLnwtY3UYSCT9j/J05cAahpCSUPxCWkj4MfgnhtduLmMgA==",
+            "version": "12.0.0",
+            "resolved": "https://registry.npmjs.org/@angular/material/-/material-12.0.0.tgz",
+            "integrity": "sha512-ToWfr4ge2ZINLBtUQOseGm7mzscLMsrKLWYM0HzfVL9lkm6EtfTlReZV84DEzDf6/htky41t9nY5SBPWs2dtug==",
             "requires": {
-                "tslib": "^2.0.0"
+                "tslib": "^2.1.0"
             }
         },
         "@angular/material-moment-adapter": {
-            "version": "11.2.11",
-            "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-11.2.11.tgz",
-            "integrity": "sha512-0dz7Mgiel6ZWBkGUXtF/OBZqJgmuCSlCJXXNU7ntgqx+IGnMeM7q+yVf86ybvj+q92FdjYW35ALRq+YftpqlSw==",
+            "version": "12.0.0",
+            "resolved": "https://registry.npmjs.org/@angular/material-moment-adapter/-/material-moment-adapter-12.0.0.tgz",
+            "integrity": "sha512-KHj28LoEp+LAhu8ohm4RO4ox7yYSO2e3eMYHF2IlX1lZ9k/g62tMbB01QffqroZuHelNdja3aGH0mnwrXUiH4g==",
             "requires": {
-                "tslib": "^2.0.0"
+                "tslib": "^2.1.0"
             }
         },
         "@angular/platform-browser": {
diff --git a/package.json b/package.json
index 2ad5b53f..17e3d21e 100644
--- a/package.json
+++ b/package.json
@@ -13,13 +13,13 @@
     },
     "dependencies": {
         "@angular/animations": "12.0.0",
-        "@angular/cdk": "11.2.11",
+        "@angular/cdk": "12.0.0",
         "@angular/common": "12.0.0",
         "@angular/compiler": "12.0.0",
         "@angular/core": "12.0.0",
         "@angular/forms": "12.0.0",
-        "@angular/material": "11.2.11",
-        "@angular/material-moment-adapter": "11.2.11",
+        "@angular/material": "12.0.0",
+        "@angular/material-moment-adapter": "12.0.0",
         "@angular/platform-browser": "12.0.0",
         "@angular/platform-browser-dynamic": "12.0.0",
         "@angular/router": "12.0.0",
diff --git a/src/@fuse/styles/themes.scss b/src/@fuse/styles/themes.scss
index 2ccd61c9..b2d65ed9 100644
--- a/src/@fuse/styles/themes.scss
+++ b/src/@fuse/styles/themes.scss
@@ -1,23 +1,20 @@
+@use '~@angular/material' as mat;
 @use "sass:map";
-@import '~@angular/material/theming';
 
 /** Include the core Angular Material styles */
-@include mat-core();
+@include mat.core();
 
 /** Configure the Angular Material typography */
-@include angular-material-typography(
-        mat-typography-config(
+@include mat.all-component-typographies(
+        mat.define-typography-config(
             $font-family: theme('fontFamily.sans'),
-            $title: mat-typography-level(1.25rem, 2rem, 600),
-            $body-2: mat-typography-level(0.875rem, 1.5rem, 600),
-            $button: mat-typography-level(0.875rem, 0.875rem, 500),
-            $input: mat-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px
+            $title: mat.define-typography-level(1.25rem, 2rem, 600),
+            $body-2: mat.define-typography-level(0.875rem, 1.5rem, 600),
+            $button: mat.define-typography-level(0.875rem, 0.875rem, 500),
+            $input: mat.define-typography-level(0.875rem, 1.2857142857, 400) // line-height: 20px
         )
 );
 
-/** Configure the Angular Material density **/
-@include angular-material-density(-2);
-
 /** Prepare the Background and Foreground maps */
 $background-light: (
     status-bar: #CBD5E1, /* blueGray.300 */
@@ -135,7 +132,7 @@ $palettes: ();
     CSS Custom Properties to dynamically switch the colors. */
 body.light,
 body .light {
-    $base-light-theme: mat-light-theme((
+    $base-light-theme: mat.define-light-theme((
         color: ($palettes)
     ));
 
@@ -148,22 +145,15 @@ body .light {
             foreground: $foreground-light,
             background: $background-light
         ),
-        typography: null,
-        density: null,
-        primary: map.get(map.get($base-light-theme, color), primary),
-        accent: map.get(map.get($base-light-theme, color), accent),
-        warn: map.get(map.get($base-light-theme, color), warn),
-        is-dark: map.get(map.get($base-light-theme, color), is-dark),
-        foreground: $foreground-light,
-        background: $background-light
+        density: -2
     );
 
-    @include angular-material-theme($light-theme);
+    @include mat.all-component-themes($light-theme);
 }
 
 body.dark,
 body .dark {
-    $base-dark-theme: mat-dark-theme((
+    $base-dark-theme: mat.define-dark-theme((
         color: ($palettes)
     ));
 
@@ -176,15 +166,8 @@ body .dark {
             foreground: $foreground-dark,
             background: $background-dark
         ),
-        typography: null,
-        density: null,
-        primary: map.get(map.get($base-dark-theme, color), primary),
-        accent: map.get(map.get($base-dark-theme, color), accent),
-        warn: map.get(map.get($base-dark-theme, color), warn),
-        is-dark: map.get(map.get($base-dark-theme, color), is-dark),
-        foreground: $foreground-dark,
-        background: $background-dark
+        density: -2
     );
 
-    @include angular-material-theme($dark-theme);
+    @include mat.all-component-colors($dark-theme);
 }