diff --git a/modules/web/package.json b/modules/web/package.json
index 806a87290d15..4c1bf37174bc 100644
--- a/modules/web/package.json
+++ b/modules/web/package.json
@@ -43,18 +43,18 @@
     "src/**/*.html": []
   },
   "dependencies": {
-    "@angular/animations": "14.2.2",
-    "@angular/cdk": "14.2.2",
-    "@angular/common": "16.2.1",
-    "@angular/compiler": "16.2.1",
-    "@angular/core": "16.2.1",
+    "@angular/animations": "16.2.8",
+    "@angular/cdk": "15.2.9",
+    "@angular/common": "16.2.8",
+    "@angular/compiler": "16.2.8",
+    "@angular/core": "16.2.8",
     "@angular/flex-layout": "15.0.0-beta.42",
-    "@angular/forms": "16.2.1",
-    "@angular/localize": "16.2.1",
-    "@angular/material": "14.2.2",
-    "@angular/platform-browser": "16.2.1",
-    "@angular/platform-browser-dynamic": "16.2.1",
-    "@angular/router": "16.2.1",
+    "@angular/forms": "16.2.8",
+    "@angular/localize": "16.2.8",
+    "@angular/material": "15.2.9",
+    "@angular/platform-browser": "16.2.8",
+    "@angular/platform-browser-dynamic": "16.2.8",
+    "@angular/router": "16.2.8",
     "@swimlane/ngx-charts": "20.4.1",
     "ace-builds": "1.28.0",
     "core-js": "3.33.0",
@@ -84,8 +84,8 @@
   "devDependencies": {
     "@angular-devkit/build-angular": "16.2.0",
     "@angular/cli": "16.2.0",
-    "@angular/compiler-cli": "16.2.1",
-    "@angular/language-service": "16.2.1",
+    "@angular/compiler-cli": "16.2.8",
+    "@angular/language-service": "16.2.8",
     "@babel/core": "7.23.0",
     "@babel/preset-env": "7.22.20",
     "@babel/register": "7.22.15",
diff --git a/modules/web/src/chrome/userpanel/component.ts b/modules/web/src/chrome/userpanel/component.ts
index 0dec45ba8697..e89291940733 100644
--- a/modules/web/src/chrome/userpanel/component.ts
+++ b/modules/web/src/chrome/userpanel/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject, OnInit, ViewChild} from '@angular/core';
-import {MatMenuTrigger} from '@angular/material/menu';
+import {MatLegacyMenuTrigger as MatMenuTrigger} from '@angular/material/legacy-menu';
 import {LoginStatus} from '@api/root.api';
 import {IConfig} from '@api/root.ui';
 import {AuthService} from '@common/services/global/authentication';
diff --git a/modules/web/src/common/components/card/component.spec.ts b/modules/web/src/common/components/card/component.spec.ts
index 8012b37d072e..d58e8b069a86 100644
--- a/modules/web/src/common/components/card/component.spec.ts
+++ b/modules/web/src/common/components/card/component.spec.ts
@@ -14,10 +14,10 @@
 
 import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {MESSAGES, MESSAGES_DI_TOKEN} from '../../../index.messages';
diff --git a/modules/web/src/common/components/chips/chipdialog/dialog.ts b/modules/web/src/common/components/chips/chipdialog/dialog.ts
index 265d37590744..768812671f31 100644
--- a/modules/web/src/common/components/chips/chipdialog/dialog.ts
+++ b/modules/web/src/common/components/chips/chipdialog/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {Chip} from '../component';
 
 @Component({
diff --git a/modules/web/src/common/components/chips/component.ts b/modules/web/src/common/components/chips/component.ts
index 63bd029971fd..36811017c009 100644
--- a/modules/web/src/common/components/chips/component.ts
+++ b/modules/web/src/common/components/chips/component.ts
@@ -21,7 +21,7 @@ import {
   OnInit,
   SimpleChanges,
 } from '@angular/core';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig} from '@angular/material/legacy-dialog';
 import {StringMap} from '@api/root.shared';
 // @ts-ignore
 import cropUrl from 'crop-url';
diff --git a/modules/web/src/common/components/condition/component.ts b/modules/web/src/common/components/condition/component.ts
index de94302ece77..30ecc06dcf43 100644
--- a/modules/web/src/common/components/condition/component.ts
+++ b/modules/web/src/common/components/condition/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input, OnInit} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {Condition} from 'typings/root.api';
 
 @Component({
diff --git a/modules/web/src/common/components/endpoint/cardlist/component.ts b/modules/web/src/common/components/endpoint/cardlist/component.ts
index 4525a5a7cc2e..b7f31d8234cd 100644
--- a/modules/web/src/common/components/endpoint/cardlist/component.ts
+++ b/modules/web/src/common/components/endpoint/cardlist/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {Endpoint} from '@api/root.api';
 
 @Component({
diff --git a/modules/web/src/common/components/ingressrulelist/component.ts b/modules/web/src/common/components/ingressrulelist/component.ts
index 1552487418a9..8703ecbf5be2 100644
--- a/modules/web/src/common/components/ingressrulelist/component.ts
+++ b/modules/web/src/common/components/ingressrulelist/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input, OnChanges, OnInit, SimpleChange} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {IngressSpecRule, IngressSpecRuleHttpPath, IngressSpecTLS} from '@api/root.api';
 import {SupportedResources} from '@api/root.shared';
 import isArray from 'lodash-es/isArray';
diff --git a/modules/web/src/common/components/limits/component.ts b/modules/web/src/common/components/limits/component.ts
index 48e8ba413282..b96ea011cefe 100644
--- a/modules/web/src/common/components/limits/component.ts
+++ b/modules/web/src/common/components/limits/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {LimitRange} from 'typings/root.api';
 
 @Component({
diff --git a/modules/web/src/common/components/module.ts b/modules/web/src/common/components/module.ts
index df9485e2fb21..3be022baa0b5 100644
--- a/modules/web/src/common/components/module.ts
+++ b/modules/web/src/common/components/module.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {NgModule} from '@angular/core';
-import {MatTableModule} from '@angular/material/table';
+import {MatLegacyTableModule as MatTableModule} from '@angular/material/legacy-table';
 
 import {SharedModule} from '../../shared.module';
 import {DirectivesModule} from '../directives/module';
diff --git a/modules/web/src/common/components/namespace/changedialog/dialog.ts b/modules/web/src/common/components/namespace/changedialog/dialog.ts
index c292cca3298b..ec8e49d1649d 100644
--- a/modules/web/src/common/components/namespace/changedialog/dialog.ts
+++ b/modules/web/src/common/components/namespace/changedialog/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 
 @Component({
   selector: 'kd-namespace-change-dialog',
diff --git a/modules/web/src/common/components/namespace/component.ts b/modules/web/src/common/components/namespace/component.ts
index ccba3057813d..5f5dc2ef7d39 100644
--- a/modules/web/src/common/components/namespace/component.ts
+++ b/modules/web/src/common/components/namespace/component.ts
@@ -13,8 +13,8 @@
 // limitations under the License.
 
 import {Component, ElementRef, Inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
-import {MatSelect} from '@angular/material/select';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
+import {MatLegacySelect as MatSelect} from '@angular/material/legacy-select';
 import {ActivatedRoute, NavigationEnd, Router} from '@angular/router';
 import {NamespaceList} from '@api/root.api';
 import {IConfig} from '@api/root.ui';
diff --git a/modules/web/src/common/components/objectmeta/component.spec.ts b/modules/web/src/common/components/objectmeta/component.spec.ts
index ae9d94507ff2..8fad3f275ba6 100644
--- a/modules/web/src/common/components/objectmeta/component.spec.ts
+++ b/modules/web/src/common/components/objectmeta/component.spec.ts
@@ -15,12 +15,12 @@
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {waitForAsync, TestBed} from '@angular/core/testing';
-import {MatCardModule} from '@angular/material/card';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatDialogModule} from '@angular/material/dialog';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
+import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips';
+import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
diff --git a/modules/web/src/common/components/policyrule/component.ts b/modules/web/src/common/components/policyrule/component.ts
index b42cbf1682c2..3a7304d34afe 100644
--- a/modules/web/src/common/components/policyrule/component.ts
+++ b/modules/web/src/common/components/policyrule/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input, OnInit} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {PolicyRule} from 'typings/root.api';
 
 @Component({
diff --git a/modules/web/src/common/components/quotas/component.ts b/modules/web/src/common/components/quotas/component.ts
index 0dabd5daf886..b86da71deb3e 100644
--- a/modules/web/src/common/components/quotas/component.ts
+++ b/modules/web/src/common/components/quotas/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {ResourceQuotaDetail} from 'typings/root.api';
 
 @Component({
diff --git a/modules/web/src/common/components/resourcelist/crdversion/component.ts b/modules/web/src/common/components/resourcelist/crdversion/component.ts
index 788f3071ca42..28c36f3c0d90 100644
--- a/modules/web/src/common/components/resourcelist/crdversion/component.ts
+++ b/modules/web/src/common/components/resourcelist/crdversion/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {CRDVersion} from '@api/root.api';
 
 @Component({
diff --git a/modules/web/src/common/components/subject/component.ts b/modules/web/src/common/components/subject/component.ts
index bbbb34093a54..8e04702c702e 100644
--- a/modules/web/src/common/components/subject/component.ts
+++ b/modules/web/src/common/components/subject/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {Subject} from 'typings/root.api';
 import {KdStateService} from '../../services/global/state';
 import {Resource} from '../../services/resource/endpoint';
diff --git a/modules/web/src/common/components/uploadfile/component.ts b/modules/web/src/common/components/uploadfile/component.ts
index e86f845636d4..90081a001a11 100644
--- a/modules/web/src/common/components/uploadfile/component.ts
+++ b/modules/web/src/common/components/uploadfile/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, EventEmitter, Input, Output} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 import {HTMLInputEvent, KdFile} from '@api/root.ui';
 import {AlertDialog, AlertDialogConfig} from 'common/dialogs/alert/dialog';
 
diff --git a/modules/web/src/common/components/volumemount/component.ts b/modules/web/src/common/components/volumemount/component.ts
index e957243d8a30..12055ec525fe 100644
--- a/modules/web/src/common/components/volumemount/component.ts
+++ b/modules/web/src/common/components/volumemount/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {VolumeMounts} from '@api/root.api';
 import {SupportedResources} from '@api/root.shared';
 import {PersistentVolumeSource} from '@api/volume.api';
diff --git a/modules/web/src/common/components/workloadstatus/component.spec.ts b/modules/web/src/common/components/workloadstatus/component.spec.ts
index 27948d11bf8d..f5dc2a24cb66 100644
--- a/modules/web/src/common/components/workloadstatus/component.spec.ts
+++ b/modules/web/src/common/components/workloadstatus/component.spec.ts
@@ -16,10 +16,10 @@ import {HttpClientTestingModule, HttpTestingController} from '@angular/common/ht
 import {CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {FlexLayoutModule} from '@angular/flex-layout';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {AppConfig} from '@api/root.api';
diff --git a/modules/web/src/common/dialogs/alert/dialog.ts b/modules/web/src/common/dialogs/alert/dialog.ts
index 92fdccb58328..460a8ecaf923 100644
--- a/modules/web/src/common/dialogs/alert/dialog.ts
+++ b/modules/web/src/common/dialogs/alert/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 
 export interface AlertDialogConfig {
   title: string;
diff --git a/modules/web/src/common/dialogs/config/dialog.ts b/modules/web/src/common/dialogs/config/dialog.ts
index c0f1f565853f..1a3accb9c8ee 100644
--- a/modules/web/src/common/dialogs/config/dialog.ts
+++ b/modules/web/src/common/dialogs/config/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA} from '@angular/material/legacy-dialog';
 
 export interface ConfirmDialogConfig {
   title: string;
diff --git a/modules/web/src/common/dialogs/deleteresource/dialog.ts b/modules/web/src/common/dialogs/deleteresource/dialog.ts
index 49e9d6a1349f..4a5bc256f300 100644
--- a/modules/web/src/common/dialogs/deleteresource/dialog.ts
+++ b/modules/web/src/common/dialogs/deleteresource/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {ResourceMeta} from '../../services/global/actionbar';
 
 @Component({
diff --git a/modules/web/src/common/dialogs/download/dialog.ts b/modules/web/src/common/dialogs/download/dialog.ts
index 86463848e586..e56e94fe92b8 100644
--- a/modules/web/src/common/dialogs/download/dialog.ts
+++ b/modules/web/src/common/dialogs/download/dialog.ts
@@ -14,7 +14,7 @@
 
 import {HttpClient, HttpEventType, HttpParams, HttpRequest, HttpResponse} from '@angular/common/http';
 import {Component, Inject, OnDestroy} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {LogOptions} from '@api/root.api';
 import {saveAs} from 'file-saver';
 import {Subject} from 'rxjs';
diff --git a/modules/web/src/common/dialogs/editresource/dialog.ts b/modules/web/src/common/dialogs/editresource/dialog.ts
index b56903dcb9e6..49cd7186209e 100644
--- a/modules/web/src/common/dialogs/editresource/dialog.ts
+++ b/modules/web/src/common/dialogs/editresource/dialog.ts
@@ -15,7 +15,7 @@
 import {HttpClient} from '@angular/common/http';
 import {Component, Inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {MatButtonToggleGroup} from '@angular/material/button-toggle';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {dump as toYaml, load as fromYaml} from 'js-yaml';
 import {EditorMode} from '../../components/textinput/component';
 
diff --git a/modules/web/src/common/dialogs/previewdeployment/dialog.ts b/modules/web/src/common/dialogs/previewdeployment/dialog.ts
index 7616b72e01ef..3fb44d06fba2 100644
--- a/modules/web/src/common/dialogs/previewdeployment/dialog.ts
+++ b/modules/web/src/common/dialogs/previewdeployment/dialog.ts
@@ -14,7 +14,7 @@
 
 import {Component, Inject, OnDestroy, OnInit, ViewChild} from '@angular/core';
 import {MatButtonToggleGroup} from '@angular/material/button-toggle';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {dump as toYaml, load as fromYaml} from 'js-yaml';
 import {EditorMode} from '@common/components/textinput/component';
 import {AppDeploymentSpec} from '@api/root.api';
diff --git a/modules/web/src/common/dialogs/restartresource/dialog.ts b/modules/web/src/common/dialogs/restartresource/dialog.ts
index 623652e94ea6..99ff75aa568d 100644
--- a/modules/web/src/common/dialogs/restartresource/dialog.ts
+++ b/modules/web/src/common/dialogs/restartresource/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA} from '@angular/material/legacy-dialog';
 import {ResourceMeta} from '../../services/global/actionbar';
 
 @Component({
diff --git a/modules/web/src/common/dialogs/scaleresource/dialog.ts b/modules/web/src/common/dialogs/scaleresource/dialog.ts
index 7dcece12d381..a7cef909eb90 100644
--- a/modules/web/src/common/dialogs/scaleresource/dialog.ts
+++ b/modules/web/src/common/dialogs/scaleresource/dialog.ts
@@ -14,7 +14,7 @@
 
 import {HttpClient} from '@angular/common/http';
 import {Component, Inject, OnInit} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {ReplicaCounts} from '@api/root.api';
 
 import {ResourceMeta} from '../../services/global/actionbar';
diff --git a/modules/web/src/common/dialogs/triggerresource/dialog.ts b/modules/web/src/common/dialogs/triggerresource/dialog.ts
index 13502dfdbfd9..d68e1a631917 100644
--- a/modules/web/src/common/dialogs/triggerresource/dialog.ts
+++ b/modules/web/src/common/dialogs/triggerresource/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {ResourceMeta} from '../../services/global/actionbar';
 
 @Component({
diff --git a/modules/web/src/common/resources/list.ts b/modules/web/src/common/resources/list.ts
index 45e3b0dc0bf8..39939f79c0e4 100644
--- a/modules/web/src/common/resources/list.ts
+++ b/modules/web/src/common/resources/list.ts
@@ -25,9 +25,9 @@ import {
   Type,
   ViewChild,
 } from '@angular/core';
-import {MatPaginator} from '@angular/material/paginator';
+import {MatLegacyPaginator as MatPaginator} from '@angular/material/legacy-paginator';
 import {MatSort} from '@angular/material/sort';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {Router} from '@angular/router';
 import {Event as KdEvent, Resource, ResourceList} from '@api/root.api';
 import {ActionColumn, ActionColumnDef, ColumnWhenCallback, ColumnWhenCondition, OnListChangeEvent} from '@api/root.ui';
diff --git a/modules/web/src/common/services/create/service.ts b/modules/web/src/common/services/create/service.ts
index 2d7354df284f..f32613fa63c1 100644
--- a/modules/web/src/common/services/create/service.ts
+++ b/modules/web/src/common/services/create/service.ts
@@ -14,7 +14,7 @@
 
 import {HttpClient, HttpErrorResponse} from '@angular/common/http';
 import {Inject, Injectable} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 import {Router} from '@angular/router';
 import {AppDeploymentContentResponse, AppDeploymentContentSpec, AppDeploymentSpec} from '@api/root.api';
 import {IConfig} from '@api/root.ui';
diff --git a/modules/web/src/common/services/global/pinner.ts b/modules/web/src/common/services/global/pinner.ts
index 131a4acab5e0..351a6aa70700 100644
--- a/modules/web/src/common/services/global/pinner.ts
+++ b/modules/web/src/common/services/global/pinner.ts
@@ -16,7 +16,7 @@ import {Injectable} from '@angular/core';
 import {PinnedResource} from '@api/root.api';
 import {HttpClient, HttpErrorResponse} from '@angular/common/http';
 import {Subject} from 'rxjs';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig} from '@angular/material/legacy-dialog';
 import {AlertDialog, AlertDialogConfig} from '../../dialogs/alert/dialog';
 import {VerberService} from './verber';
 
diff --git a/modules/web/src/common/services/global/verber.ts b/modules/web/src/common/services/global/verber.ts
index a0ff1aa0509f..062d64b55071 100644
--- a/modules/web/src/common/services/global/verber.ts
+++ b/modules/web/src/common/services/global/verber.ts
@@ -14,7 +14,7 @@
 
 import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http';
 import {EventEmitter, Injectable} from '@angular/core';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig} from '@angular/material/legacy-dialog';
 import {ObjectMeta, TypeMeta} from '@api/root.api';
 import {filter, switchMap} from 'rxjs/operators';
 
diff --git a/modules/web/src/common/services/guard/candeactivate.ts b/modules/web/src/common/services/guard/candeactivate.ts
index 9a2ac9ab7bd6..0094cae9e52d 100644
--- a/modules/web/src/common/services/guard/candeactivate.ts
+++ b/modules/web/src/common/services/guard/candeactivate.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Injectable} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 
 import {ConfirmDialog, ConfirmDialogConfig} from '@common/dialogs/config/dialog';
 import {ICanDeactivate} from '@common/interfaces/candeactivate';
diff --git a/modules/web/src/create/from/form/component.ts b/modules/web/src/create/from/form/component.ts
index 76399c812765..9d714348847e 100644
--- a/modules/web/src/create/from/form/component.ts
+++ b/modules/web/src/create/from/form/component.ts
@@ -15,7 +15,7 @@
 import {HttpClient} from '@angular/common/http';
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {AbstractControl, UntypedFormArray, UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 import {ActivatedRoute, Router} from '@angular/router';
 import {
   AppDeploymentSpec,
diff --git a/modules/web/src/create/from/form/createnamespace/dialog.ts b/modules/web/src/create/from/form/createnamespace/dialog.ts
index bf0f4434985f..5d1f51a137a0 100644
--- a/modules/web/src/create/from/form/createnamespace/dialog.ts
+++ b/modules/web/src/create/from/form/createnamespace/dialog.ts
@@ -15,7 +15,7 @@
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {Component, Inject, OnInit} from '@angular/core';
 import {AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {IConfig} from '@api/root.ui';
 import {switchMap} from 'rxjs/operators';
 import {AlertDialog, AlertDialogConfig} from '@common/dialogs/alert/dialog';
diff --git a/modules/web/src/create/from/form/createsecret/dialog.ts b/modules/web/src/create/from/form/createsecret/dialog.ts
index 795cf4b678a1..f82d15be7931 100644
--- a/modules/web/src/create/from/form/createsecret/dialog.ts
+++ b/modules/web/src/create/from/form/createsecret/dialog.ts
@@ -15,7 +15,7 @@
 import {HttpClient, HttpHeaders} from '@angular/common/http';
 import {Component, Inject, OnInit} from '@angular/core';
 import {AbstractControl, UntypedFormBuilder, UntypedFormGroup, Validators} from '@angular/forms';
-import {MAT_DIALOG_DATA, MatDialog, MatDialogRef} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA, MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 import {IConfig} from '@api/root.ui';
 import {switchMap} from 'rxjs/operators';
 import {AlertDialog, AlertDialogConfig} from '@common/dialogs/alert/dialog';
diff --git a/modules/web/src/index.config.ts b/modules/web/src/index.config.ts
index a47afbfe43b7..2d8d5781419d 100644
--- a/modules/web/src/index.config.ts
+++ b/modules/web/src/index.config.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {InjectionToken} from '@angular/core';
-import {MatTooltipDefaultOptions} from '@angular/material/tooltip';
+import {MatLegacyTooltipDefaultOptions as MatTooltipDefaultOptions} from '@angular/material/legacy-tooltip';
 import {IConfig, LanguageConfig} from '@api/root.ui';
 
 const supportedLanguages: LanguageConfig[] = [
diff --git a/modules/web/src/login/component.spec.ts b/modules/web/src/login/component.spec.ts
index 8c36c555751b..f43c442363fc 100644
--- a/modules/web/src/login/component.spec.ts
+++ b/modules/web/src/login/component.spec.ts
@@ -16,8 +16,8 @@ import {HttpClientTestingModule, HttpTestingController} from '@angular/common/ht
 import {CUSTOM_ELEMENTS_SCHEMA, InjectionToken} from '@angular/core';
 import {ComponentFixture, TestBed, waitForAsync} from '@angular/core/testing';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatButtonModule} from '@angular/material/button';
-import {MatRadioModule} from '@angular/material/radio';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
+import {MatLegacyRadioModule as MatRadioModule} from '@angular/material/legacy-radio';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {ActivatedRoute, Router, convertToParamMap} from '@angular/router';
diff --git a/modules/web/src/logs/component.ts b/modules/web/src/logs/component.ts
index 4b97b7888e67..98dfdc9a42e9 100644
--- a/modules/web/src/logs/component.ts
+++ b/modules/web/src/logs/component.ts
@@ -14,7 +14,7 @@
 
 import {HttpParams} from '@angular/common/http';
 import {Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 import {ActivatedRoute, Router} from '@angular/router';
 import {LogControl, LogDetails, LogLine, LogSelection, LogSources} from '@api/root.api';
 
diff --git a/modules/web/src/overview/component.spec.ts b/modules/web/src/overview/component.spec.ts
index b114d3ddc504..6d6f602f3fb9 100644
--- a/modules/web/src/overview/component.spec.ts
+++ b/modules/web/src/overview/component.spec.ts
@@ -16,10 +16,10 @@ import {HttpClientTestingModule, HttpTestingController} from '@angular/common/ht
 import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {waitForAsync, ComponentFixture, TestBed} from '@angular/core/testing';
 import {FlexLayoutModule} from '@angular/flex-layout';
-import {MatCardModule} from '@angular/material/card';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {AppConfig, CronJobList, DaemonSetList, PodList} from '@api/root.api';
 
diff --git a/modules/web/src/resource/cluster/persistentvolume/detail/component.ts b/modules/web/src/resource/cluster/persistentvolume/detail/component.ts
index 6066bb990474..c4974a95b6f2 100644
--- a/modules/web/src/resource/cluster/persistentvolume/detail/component.ts
+++ b/modules/web/src/resource/cluster/persistentvolume/detail/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, OnDestroy, OnInit} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {ActivatedRoute} from '@angular/router';
 import {CapacityItem, PersistentVolumeDetail} from '@api/root.api';
 import {Subject} from 'rxjs';
diff --git a/modules/web/src/resource/cluster/persistentvolume/detail/source/component.ts b/modules/web/src/resource/cluster/persistentvolume/detail/source/component.ts
index e9ae9fe6f94c..f605604e7e12 100644
--- a/modules/web/src/resource/cluster/persistentvolume/detail/source/component.ts
+++ b/modules/web/src/resource/cluster/persistentvolume/detail/source/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Input} from '@angular/core';
-import {MatTableDataSource} from '@angular/material/table';
+import {MatLegacyTableDataSource as MatTableDataSource} from '@angular/material/legacy-table';
 import {PersistentVolumeSource} from '@api/volume.api';
 import {StringMap} from '@api/root.shared';
 
diff --git a/modules/web/src/resource/config/secret/detail/edit/component.ts b/modules/web/src/resource/config/secret/detail/edit/component.ts
index 9305ca91e4f8..67917b74fded 100644
--- a/modules/web/src/resource/config/secret/detail/edit/component.ts
+++ b/modules/web/src/resource/config/secret/detail/edit/component.ts
@@ -18,7 +18,7 @@ import {DecoderService} from '@common/services/global/decoder';
 import {RawResource} from 'common/resources/rawresource';
 import {HttpClient, HttpErrorResponse, HttpHeaders} from '@angular/common/http';
 import {AlertDialogConfig, AlertDialog} from 'common/dialogs/alert/dialog';
-import {MatDialogConfig, MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialogConfig as MatDialogConfig, MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 import {encode} from 'js-base64';
 
 @Component({
diff --git a/modules/web/src/resource/discovery/ingress/detail/component.spec.ts b/modules/web/src/resource/discovery/ingress/detail/component.spec.ts
index b1fd39f355e5..ff6abf1bfaab 100644
--- a/modules/web/src/resource/discovery/ingress/detail/component.spec.ts
+++ b/modules/web/src/resource/discovery/ingress/detail/component.spec.ts
@@ -15,12 +15,12 @@
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {TestBed, waitForAsync} from '@angular/core/testing';
-import {MatCardModule} from '@angular/material/card';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatDialogModule} from '@angular/material/dialog';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
+import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips';
+import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
diff --git a/modules/web/src/resource/discovery/service/detail/component.spec.ts b/modules/web/src/resource/discovery/service/detail/component.spec.ts
index 830cb9df2630..1d438142b9b1 100644
--- a/modules/web/src/resource/discovery/service/detail/component.spec.ts
+++ b/modules/web/src/resource/discovery/service/detail/component.spec.ts
@@ -15,12 +15,12 @@
 import {HttpClientTestingModule, HttpTestingController} from '@angular/common/http/testing';
 import {Component, CUSTOM_ELEMENTS_SCHEMA} from '@angular/core';
 import {TestBed, waitForAsync} from '@angular/core/testing';
-import {MatCardModule} from '@angular/material/card';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatDialogModule} from '@angular/material/dialog';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
+import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips';
+import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
 import {MatDividerModule} from '@angular/material/divider';
 import {MatIconModule} from '@angular/material/icon';
-import {MatTooltipModule} from '@angular/material/tooltip';
+import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {By} from '@angular/platform-browser';
 import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {RouterModule} from '@angular/router';
diff --git a/modules/web/src/settings/global/component.ts b/modules/web/src/settings/global/component.ts
index 8924b93b2d19..a2e0010f886b 100644
--- a/modules/web/src/settings/global/component.ts
+++ b/modules/web/src/settings/global/component.ts
@@ -15,7 +15,7 @@
 import {HttpErrorResponse} from '@angular/common/http';
 import {Component, OnDestroy, OnInit} from '@angular/core';
 import {UntypedFormBuilder, UntypedFormGroup} from '@angular/forms';
-import {MatDialog} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog} from '@angular/material/legacy-dialog';
 import {GlobalSettings, NamespaceList} from '@api/root.api';
 import isEqual from 'lodash-es/isEqual';
 import {Observable, of, Subject} from 'rxjs';
diff --git a/modules/web/src/settings/global/namespace/adddialog/dialog.ts b/modules/web/src/settings/global/namespace/adddialog/dialog.ts
index e71aac6037a3..5f5a01ee6801 100644
--- a/modules/web/src/settings/global/namespace/adddialog/dialog.ts
+++ b/modules/web/src/settings/global/namespace/adddialog/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA} from '@angular/material/legacy-dialog';
 
 export interface AddFallbackNamespaceDialogData {
   namespaces: string[];
diff --git a/modules/web/src/settings/global/namespace/component.ts b/modules/web/src/settings/global/namespace/component.ts
index 8869c335697b..e0d31c2af086 100644
--- a/modules/web/src/settings/global/namespace/component.ts
+++ b/modules/web/src/settings/global/namespace/component.ts
@@ -21,7 +21,7 @@ import {
   UntypedFormGroup,
   NG_VALUE_ACCESSOR,
 } from '@angular/forms';
-import {MatDialog, MatDialogConfig} from '@angular/material/dialog';
+import {MatLegacyDialog as MatDialog, MatLegacyDialogConfig as MatDialogConfig} from '@angular/material/legacy-dialog';
 import {GlobalSettings, NamespaceList} from '@api/root.api';
 import {Subject} from 'rxjs';
 import {map, take, takeUntil} from 'rxjs/operators';
diff --git a/modules/web/src/settings/global/namespace/editdialog/dialog.ts b/modules/web/src/settings/global/namespace/editdialog/dialog.ts
index 76d23027bf4a..088c70cb817d 100644
--- a/modules/web/src/settings/global/namespace/editdialog/dialog.ts
+++ b/modules/web/src/settings/global/namespace/editdialog/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component, Inject} from '@angular/core';
-import {MAT_DIALOG_DATA} from '@angular/material/dialog';
+import {MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA} from '@angular/material/legacy-dialog';
 
 export interface EditFallbackNamespaceDialogData {
   namespaces: string[];
diff --git a/modules/web/src/settings/global/saveanywaysdialog/dialog.ts b/modules/web/src/settings/global/saveanywaysdialog/dialog.ts
index 8dc4dcf5675d..af3581683860 100644
--- a/modules/web/src/settings/global/saveanywaysdialog/dialog.ts
+++ b/modules/web/src/settings/global/saveanywaysdialog/dialog.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {Component} from '@angular/core';
-import {MatDialogRef} from '@angular/material/dialog';
+import {MatLegacyDialogRef as MatDialogRef} from '@angular/material/legacy-dialog';
 
 @Component({
   selector: 'kd-settings-save-anyway-dialog',
diff --git a/modules/web/src/settings/local/component.ts b/modules/web/src/settings/local/component.ts
index 3857998d8c58..01dc355375da 100644
--- a/modules/web/src/settings/local/component.ts
+++ b/modules/web/src/settings/local/component.ts
@@ -14,7 +14,7 @@
 
 import {DOCUMENT} from '@angular/common';
 import {Component, Inject, OnInit, ViewChild} from '@angular/core';
-import {MatSelect} from '@angular/material/select';
+import {MatLegacySelect as MatSelect} from '@angular/material/legacy-select';
 import {LocalSettings, Theme} from '@api/root.api';
 import {IConfig, LanguageConfig} from '@api/root.ui';
 import {LocalSettingsService} from '@common/services/global/localsettings';
diff --git a/modules/web/src/shared.module.ts b/modules/web/src/shared.module.ts
index 3d0b65baae0f..cddef5e12d0f 100644
--- a/modules/web/src/shared.module.ts
+++ b/modules/web/src/shared.module.ts
@@ -16,34 +16,34 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {FlexLayoutModule} from '@angular/flex-layout';
 import {FormsModule, ReactiveFormsModule} from '@angular/forms';
-import {MatAutocompleteModule} from '@angular/material/autocomplete';
-import {MatButtonModule} from '@angular/material/button';
+import {MatLegacyAutocompleteModule as MatAutocompleteModule} from '@angular/material/legacy-autocomplete';
+import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
 import {MatButtonToggleModule} from '@angular/material/button-toggle';
-import {MatCardModule} from '@angular/material/card';
-import {MatCheckboxModule} from '@angular/material/checkbox';
-import {MatChipsModule} from '@angular/material/chips';
-import {MatDialogModule} from '@angular/material/dialog';
+import {MatLegacyCardModule as MatCardModule} from '@angular/material/legacy-card';
+import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox';
+import {MatLegacyChipsModule as MatChipsModule} from '@angular/material/legacy-chips';
+import {MatLegacyDialogModule as MatDialogModule} from '@angular/material/legacy-dialog';
 import {MatDividerModule} from '@angular/material/divider';
-import {MatFormFieldModule} from '@angular/material/form-field';
+import {MatLegacyFormFieldModule as MatFormFieldModule} from '@angular/material/legacy-form-field';
 import {MatGridListModule} from '@angular/material/grid-list';
 import {MatIconModule} from '@angular/material/icon';
-import {MatInputModule} from '@angular/material/input';
-import {MatListModule} from '@angular/material/list';
-import {MatMenuModule} from '@angular/material/menu';
-import {MatPaginatorModule} from '@angular/material/paginator';
-import {MatProgressBarModule} from '@angular/material/progress-bar';
-import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
-import {MatRadioModule} from '@angular/material/radio';
-import {MatSelectModule} from '@angular/material/select';
+import {MatLegacyInputModule as MatInputModule} from '@angular/material/legacy-input';
+import {MatLegacyListModule as MatListModule} from '@angular/material/legacy-list';
+import {MatLegacyMenuModule as MatMenuModule} from '@angular/material/legacy-menu';
+import {MatLegacyPaginatorModule as MatPaginatorModule} from '@angular/material/legacy-paginator';
+import {MatLegacyProgressBarModule as MatProgressBarModule} from '@angular/material/legacy-progress-bar';
+import {MatLegacyProgressSpinnerModule as MatProgressSpinnerModule} from '@angular/material/legacy-progress-spinner';
+import {MatLegacyRadioModule as MatRadioModule} from '@angular/material/legacy-radio';
+import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
 import {MatSidenavModule} from '@angular/material/sidenav';
-import {MatSlideToggleModule} from '@angular/material/slide-toggle';
-import {MatSliderModule} from '@angular/material/slider';
-import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatLegacySlideToggleModule as MatSlideToggleModule} from '@angular/material/legacy-slide-toggle';
+import {MatLegacySliderModule as MatSliderModule} from '@angular/material/legacy-slider';
+import {MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/legacy-snack-bar';
 import {MatSortModule} from '@angular/material/sort';
-import {MatTableModule} from '@angular/material/table';
-import {MatTabsModule} from '@angular/material/tabs';
+import {MatLegacyTableModule as MatTableModule} from '@angular/material/legacy-table';
+import {MatLegacyTabsModule as MatTabsModule} from '@angular/material/legacy-tabs';
 import {MatToolbarModule} from '@angular/material/toolbar';
-import {MAT_TOOLTIP_DEFAULT_OPTIONS, MatTooltipModule} from '@angular/material/tooltip';
+import {MAT_LEGACY_TOOLTIP_DEFAULT_OPTIONS as MAT_TOOLTIP_DEFAULT_OPTIONS, MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
 import {RouterModule} from '@angular/router';
 import {NgxChartsModule} from '@swimlane/ngx-charts';
 import {NgPipesModule} from 'ngx-pipes';
diff --git a/modules/web/src/shell/component.ts b/modules/web/src/shell/component.ts
index 49a525f717a1..b0f0af05160b 100644
--- a/modules/web/src/shell/component.ts
+++ b/modules/web/src/shell/component.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import {AfterViewInit, ChangeDetectorRef, Component, ElementRef, OnDestroy, ViewChild} from '@angular/core';
-import {MatSnackBar} from '@angular/material/snack-bar';
+import {MatLegacySnackBar as MatSnackBar} from '@angular/material/legacy-snack-bar';
 import {ActivatedRoute, Router} from '@angular/router';
 import {PodContainerList, ShellFrame, SJSCloseEvent, SJSMessageEvent, TerminalResponse} from '@api/root.api';
 import debounce from 'lodash-es/debounce';