diff --git a/ogWebconsole/package-lock.json b/ogWebconsole/package-lock.json
index be1384a..131a30c 100644
--- a/ogWebconsole/package-lock.json
+++ b/ogWebconsole/package-lock.json
@@ -9,12 +9,12 @@
       "version": "0.0.0",
       "dependencies": {
         "@angular/animations": "^18.0.0",
-        "@angular/cdk": "~17.3.9",
+        "@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.3.9",
+        "@angular/material": "~18.0.0",
         "@angular/platform-browser": "^18.0.0",
         "@angular/platform-browser-dynamic": "^18.0.0",
         "@angular/router": "^18.0.0",
@@ -472,9 +472,9 @@
       }
     },
     "node_modules/@angular/cdk": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-17.3.10.tgz",
-      "integrity": "sha512-b1qktT2c1TTTe5nTji/kFAVW92fULK0YhYAvJ+BjZTPKu2FniZNe8o4qqQ0pUuvtMu+ZQxp/QqFYoidIVCjScg==",
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@angular/cdk/-/cdk-18.0.0.tgz",
+      "integrity": "sha512-V0i1SAiT2PTNyugBW0E4fev8G/4XP5FdyX2YD6oc5sNyt3GFcoDNHcz+oEne8+aYVnQ3Ax9Zutq/SQincDHIbw==",
       "dependencies": {
         "tslib": "^2.3.0"
       },
@@ -482,8 +482,8 @@
         "parse5": "^7.1.2"
       },
       "peerDependencies": {
-        "@angular/common": "^17.0.0 || ^18.0.0",
-        "@angular/core": "^17.0.0 || ^18.0.0",
+        "@angular/common": "^18.0.0 || ^19.0.0",
+        "@angular/core": "^18.0.0 || ^19.0.0",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
@@ -627,9 +627,9 @@
       }
     },
     "node_modules/@angular/material": {
-      "version": "17.3.10",
-      "resolved": "https://registry.npmjs.org/@angular/material/-/material-17.3.10.tgz",
-      "integrity": "sha512-hHMQES0tQPH5JW33W+mpBPuM8ybsloDTqFPuRV8cboDjosAWfJhzAKF3ozICpNlUrs62La/2Wu/756GcQrxebg==",
+      "version": "18.0.0",
+      "resolved": "https://registry.npmjs.org/@angular/material/-/material-18.0.0.tgz",
+      "integrity": "sha512-4WfMcr4cX3cF7dKz+cXf9YIvhWOJGTP24rbMF5C6eC5K20IK6zgA//Qn0VSTwZkm54Tu9C7kF+CfNLeLy6i5uQ==",
       "dependencies": {
         "@material/animation": "15.0.0-canary.7f224ddd4.0",
         "@material/auto-init": "15.0.0-canary.7f224ddd4.0",
@@ -674,6 +674,7 @@
         "@material/tab-scroller": "15.0.0-canary.7f224ddd4.0",
         "@material/textfield": "15.0.0-canary.7f224ddd4.0",
         "@material/theme": "15.0.0-canary.7f224ddd4.0",
+        "@material/tokens": "15.0.0-canary.7f224ddd4.0",
         "@material/tooltip": "15.0.0-canary.7f224ddd4.0",
         "@material/top-app-bar": "15.0.0-canary.7f224ddd4.0",
         "@material/touch-target": "15.0.0-canary.7f224ddd4.0",
@@ -681,12 +682,12 @@
         "tslib": "^2.3.0"
       },
       "peerDependencies": {
-        "@angular/animations": "^17.0.0 || ^18.0.0",
-        "@angular/cdk": "17.3.10",
-        "@angular/common": "^17.0.0 || ^18.0.0",
-        "@angular/core": "^17.0.0 || ^18.0.0",
-        "@angular/forms": "^17.0.0 || ^18.0.0",
-        "@angular/platform-browser": "^17.0.0 || ^18.0.0",
+        "@angular/animations": "^18.0.0 || ^19.0.0",
+        "@angular/cdk": "18.0.0",
+        "@angular/common": "^18.0.0 || ^19.0.0",
+        "@angular/core": "^18.0.0 || ^19.0.0",
+        "@angular/forms": "^18.0.0 || ^19.0.0",
+        "@angular/platform-browser": "^18.0.0 || ^19.0.0",
         "rxjs": "^6.5.3 || ^7.4.0"
       }
     },
diff --git a/ogWebconsole/package.json b/ogWebconsole/package.json
index 2658919..0221eaa 100644
--- a/ogWebconsole/package.json
+++ b/ogWebconsole/package.json
@@ -11,12 +11,12 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^18.0.0",
-    "@angular/cdk": "~17.3.9",
+    "@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.3.9",
+    "@angular/material": "~18.0.0",
     "@angular/platform-browser": "^18.0.0",
     "@angular/platform-browser-dynamic": "^18.0.0",
     "@angular/router": "^18.0.0",
diff --git a/ogWebconsole/src/custom-theme.scss b/ogWebconsole/src/custom-theme.scss
index 0bfb747..8a43809 100644
--- a/ogWebconsole/src/custom-theme.scss
+++ b/ogWebconsole/src/custom-theme.scss
@@ -12,21 +12,21 @@
 // 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/
-$ogWebconsole-primary: mat.define-palette(mat.$indigo-palette);
-$ogWebconsole-accent: mat.define-palette(mat.$pink-palette, A200, A100, A400);
+$ogWebconsole-primary: mat.m2-define-palette(mat.$m2-indigo-palette);
+$ogWebconsole-accent: mat.m2-define-palette(mat.$m2-pink-palette, A200, A100, A400);
 
 // The warn palette is optional (defaults to red).
-$ogWebconsole-warn: mat.define-palette(mat.$red-palette);
+$ogWebconsole-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".
-$ogWebconsole-theme: mat.define-light-theme((
+$ogWebconsole-theme: mat.m2-define-light-theme((
   color: (
     primary: $ogWebconsole-primary,
     accent: $ogWebconsole-accent,
     warn: $ogWebconsole-warn,
   ),
-  typography: mat.define-typography-config(),
+  typography: mat.m2-define-typography-config(),
   density: 0
 ));