diff --git a/package.json b/package.json
index 82e72b44e9..aa57d79bbd 100644
--- a/package.json
+++ b/package.json
@@ -21,12 +21,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.0.0",
-    "@angular/cdk": "^17.2.0",
+    "@angular/cdk": "^18.0.0",
     "@angular/common": "^18.0.0",
     "@angular/compiler": "^18.0.0",
     "@angular/core": "^18.0.0",
     "@angular/forms": "^18.0.0",
-    "@angular/material": "^17.2.0",
+    "@angular/material": "^18.0.0",
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/platform-server": "^18.0.0",
@@ -79,4 +79,4 @@
     "ts-node": "^10.2.1",
     "typescript": "~5.4.5"
   }
-}
+}
\ No newline at end of file
diff --git a/src/styles.scss b/src/styles.scss
index 078d3e2647..b4dbba644a 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -21,15 +21,15 @@
 // 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/
-$blog-primary: mat.define-palette(mat.$indigo-palette);
-$blog-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$blog-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+$blog-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$blog-warn: mat.define-palette(mat.$red-palette);
+$blog-warn: mat.m2-define-palette(mat.$m2-red-palette);
 
 // Create the theme object. A theme consists of configurations for individual
 // theming systems such as "color" or "typography".
-$blog-theme: mat.define-light-theme((
+$blog-theme: mat.m2-define-light-theme((
   color: (
     primary: $blog-primary,
     accent: $blog-accent,
@@ -42,7 +42,7 @@ $blog-theme: mat.define-light-theme((
 // that you are using.
 @include mat.all-component-themes($blog-theme);
 
-$blog-dark-theme: mat.define-dark-theme((
+$blog-dark-theme: mat.m2-define-dark-theme((
   color: (
     primary: $blog-primary,
     accent: $blog-accent,
diff --git a/src/variables.scss b/src/variables.scss
index c4eb0197e9..a5da03121d 100644
--- a/src/variables.scss
+++ b/src/variables.scss
@@ -2,12 +2,12 @@
 
 :root {
   $background-color: #ffffff;
-  $primary-color: map-get(mat.$indigo-palette, 500);
-  $primary-text-color: map-get(mat.$gray-palette, 900);
-  $secondary-text-color: map-get(mat.$gray-palette, 500);
-  $default-link-color: map-get(mat.$indigo-palette, 400);
-  $default-link-hover-color: map-get(mat.$indigo-palette, 600);
-  $sidebar-text-color: map-get(mat.$gray-palette, 600);
+  $primary-color: map-get(mat.$m2-indigo-palette, 500);
+  $primary-text-color: map-get(mat.$m2-gray-palette, 900);
+  $secondary-text-color: map-get(mat.$m2-gray-palette, 500);
+  $default-link-color: map-get(mat.$m2-indigo-palette, 400);
+  $default-link-hover-color: map-get(mat.$m2-indigo-palette, 600);
+  $sidebar-text-color: map-get(mat.$m2-gray-palette, 600);
 
   --background-color:#{$background-color};
   --primary-color: #{$primary-color};
@@ -40,26 +40,26 @@
   // page note
   --note-background-color: transparent;
   --note-border-color: rgba(0, 0, 0, 0.2);
-  --note-info-indicator-color: #{map-get(mat.$indigo-palette, 500)};
-  --note-warning-indicator-color: #{map-get(mat.$orange-palette, 500)};
-  --note-danger-indicator-color: #{map-get(mat.$pink-palette, 500)};
+  --note-info-indicator-color: #{map-get(mat.$m2-indigo-palette, 500)};
+  --note-warning-indicator-color: #{map-get(mat.$m2-orange-palette, 500)};
+  --note-danger-indicator-color: #{map-get(mat.$m2-pink-palette, 500)};
 
   // toc
   --toc-header-color: #{$primary-text-color};
-  --toc-indicator-color: #{map-get(mat.$gray-palette, 500)};
+  --toc-indicator-color: #{map-get(mat.$m2-gray-palette, 500)};
   --toc-indicator-focus-color: #{$primary-color};
 
   // code
   --code-text-color: #{$primary-color};
-  --code-background-color: #{map-get(mat.$gray-palette, 200)};
+  --code-background-color: #{map-get(mat.$m2-gray-palette, 200)};
 
   // dark theme
   .dark-theme {
     $background-color: #424242;
-    $primary-color: map-get(mat.$indigo-palette, 200);
-    $primary-text-color: map-get(mat.$gray-palette, 100);
-    $secondary-text-color: map-get(mat.$gray-palette, 400);
-    $sidebar-text-color: map-get(mat.$gray-palette, 400);
+    $primary-color: map-get(mat.$m2-indigo-palette, 200);
+    $primary-text-color: map-get(mat.$m2-gray-palette, 100);
+    $secondary-text-color: map-get(mat.$m2-gray-palette, 400);
+    $sidebar-text-color: map-get(mat.$m2-gray-palette, 400);
     $default-link-color: #D4DAED;
     $default-link-hover-color: lighten($default-link-color, 15%);
 
@@ -101,17 +101,17 @@
     // page note
     --note-background-color: transparent;
     --note-border-color: rgba(255, 255, 255, 0.3);
-    --note-info-indicator-color: #{map-get(mat.$indigo-palette, 500)};
-    --note-warning-indicator-color: #{map-get(mat.$orange-palette, 500)};
-    --note-danger-indicator-color: #{map-get(mat.$pink-palette, 500)};
+    --note-info-indicator-color: #{map-get(mat.$m2-indigo-palette, 500)};
+    --note-warning-indicator-color: #{map-get(mat.$m2-orange-palette, 500)};
+    --note-danger-indicator-color: #{map-get(mat.$m2-pink-palette, 500)};
 
     // toc
     --toc-header-color: #{$primary-text-color};
-    --toc-indicator-color: #{map-get(mat.$gray-palette, 500)};
+    --toc-indicator-color: #{map-get(mat.$m2-gray-palette, 500)};
     --toc-indicator-focus-color: #{$primary-color};
 
     // code
     --code-text-color: #D4DAED;
-    --code-background-color: #{map-get(mat.$gray-palette, 800)};
+    --code-background-color: #{map-get(mat.$m2-gray-palette, 800)};
   }
 }