diff --git a/frontend/app/common/angular/BUILD b/frontend/app/common/angular/BUILD
index 7ee3b073..94f467f0 100644
--- a/frontend/app/common/angular/BUILD
+++ b/frontend/app/common/angular/BUILD
@@ -131,7 +131,7 @@ ts_library(
 )
 
 ts_library(
-    name = "angular_material_legacy_card",
+    name = "angular_material_card",
     srcs = [],
     deps = [
         "@npm//@angular/material",
diff --git a/frontend/app/components/capture_profile/BUILD b/frontend/app/components/capture_profile/BUILD
index b5aedb77..45d0cde2 100644
--- a/frontend/app/components/capture_profile/BUILD
+++ b/frontend/app/components/capture_profile/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
diff --git a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
index 51597532..84d09e68 100644
--- a/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
+++ b/frontend/app/components/capture_profile/capture_profile_dialog/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
diff --git a/frontend/app/components/diagnostics_view/BUILD b/frontend/app/components/diagnostics_view/BUILD
index 6525ad0e..1a1503c6 100644
--- a/frontend/app/components/diagnostics_view/BUILD
+++ b/frontend/app/components/diagnostics_view/BUILD
@@ -15,7 +15,6 @@ xprof_ng_module(
     ],
     deps = [
         "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )
diff --git a/frontend/app/components/memory_profile/memory_profile_summary/BUILD b/frontend/app/components/memory_profile/memory_profile_summary/BUILD
index 6568796b..f87f52b4 100644
--- a/frontend/app/components/memory_profile/memory_profile_summary/BUILD
+++ b/frontend/app/components/memory_profile/memory_profile_summary/BUILD
@@ -15,7 +15,7 @@ xprof_ng_module(
     ],
     deps = [
         "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
diff --git a/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts b/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts
index c1af1159..54865bcb 100644
--- a/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts
+++ b/frontend/app/components/memory_profile/memory_profile_summary/memory_profile_summary_module.ts
@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 
 import {MemoryProfileSummary} from './memory_profile_summary';
@@ -9,7 +9,7 @@ import {MemoryProfileSummary} from './memory_profile_summary';
   declarations: [MemoryProfileSummary],
   imports: [
     CommonModule,
-    MatLegacyCardModule,
+    MatCardModule,
     MatLegacyTooltipModule,
   ],
   exports: [MemoryProfileSummary]
diff --git a/frontend/app/components/memory_profile/memory_timeline_graph/BUILD b/frontend/app/components/memory_profile/memory_timeline_graph/BUILD
index f419515e..a892502e 100644
--- a/frontend/app/components/memory_profile/memory_timeline_graph/BUILD
+++ b/frontend/app/components/memory_profile/memory_timeline_graph/BUILD
@@ -16,7 +16,7 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
     ],
diff --git a/frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module.ts b/frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module.ts
index 005f3be7..b7d8ad90 100644
--- a/frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module.ts
+++ b/frontend/app/components/memory_profile/memory_timeline_graph/memory_timeline_graph_module.ts
@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {MemoryTimelineGraph} from './memory_timeline_graph';
 
 @NgModule({
   declarations: [MemoryTimelineGraph],
-  imports: [MatLegacyCardModule],
+  imports: [MatCardModule],
   exports: [MemoryTimelineGraph]
 })
 export class MemoryTimelineGraphModule {
diff --git a/frontend/app/components/memory_viewer/buffer_details/BUILD b/frontend/app/components/memory_viewer/buffer_details/BUILD
index 3766a9e2..44aaef21 100644
--- a/frontend/app/components/memory_viewer/buffer_details/BUILD
+++ b/frontend/app/components/memory_viewer/buffer_details/BUILD
@@ -17,7 +17,7 @@ xprof_ng_module(
         "@npm//@angular/core",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
         "@org_xprof//frontend/app/store",
diff --git a/frontend/app/components/memory_viewer/buffer_details/buffer_details_module.ts b/frontend/app/components/memory_viewer/buffer_details/buffer_details_module.ts
index 0cce9dd6..55f6d2d3 100644
--- a/frontend/app/components/memory_viewer/buffer_details/buffer_details_module.ts
+++ b/frontend/app/components/memory_viewer/buffer_details/buffer_details_module.ts
@@ -1,12 +1,12 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {BufferDetails} from './buffer_details';
 
 /** A buffer details view module. */
 @NgModule({
   declarations: [BufferDetails],
-  imports: [MatLegacyCardModule],
+  imports: [MatCardModule],
   exports: [BufferDetails]
 })
 export class BufferDetailsModule {
diff --git a/frontend/app/components/op_profile/op_details/BUILD b/frontend/app/components/op_profile/op_details/BUILD
index 38dc5a17..66fbc49a 100644
--- a/frontend/app/components/op_profile/op_details/BUILD
+++ b/frontend/app/components/op_profile/op_details/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
@@ -19,8 +19,8 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//rxjs",
         "@org_xprof//frontend/app/common/angular:angular_material_button",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces:op_metrics_proto_defs",
         "@org_xprof//frontend/app/common/interfaces:op_profile_proto_defs",
         "@org_xprof//frontend/app/common/utils",
diff --git a/frontend/app/components/op_profile/op_details/op_details.scss b/frontend/app/components/op_profile/op_details/op_details.scss
index f6f683ec..500945b3 100644
--- a/frontend/app/components/op_profile/op_details/op_details.scss
+++ b/frontend/app/components/op_profile/op_details/op_details.scss
@@ -70,6 +70,7 @@ mat-card {
 .bar {
   height: 24px;
   line-height: 24px;
+  max-width: 100%;
 }
 
 .expression {
diff --git a/frontend/app/components/op_profile/op_details/op_details_module.ts b/frontend/app/components/op_profile/op_details/op_details_module.ts
index ffcec6a4..6d79e230 100644
--- a/frontend/app/components/op_profile/op_details/op_details_module.ts
+++ b/frontend/app/components/op_profile/op_details/op_details_module.ts
@@ -2,7 +2,7 @@ import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
 import {MatButtonModule} from '@angular/material/button';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {OpDetails} from './op_details';
 
@@ -10,7 +10,7 @@ import {OpDetails} from './op_details';
 @NgModule({
   declarations: [OpDetails],
   imports:
-      [CommonModule, MatLegacyCardModule, MatIconModule, MatButtonModule],
+      [CommonModule, MatCardModule, MatIconModule, MatButtonModule],
   exports: [OpDetails]
 })
 export class OpDetailsModule {
diff --git a/frontend/app/components/overview/BUILD b/frontend/app/components/overview/BUILD
index ba5ae8ee..a9502607 100644
--- a/frontend/app/components/overview/BUILD
+++ b/frontend/app/components/overview/BUILD
@@ -21,7 +21,6 @@ xprof_ng_module(
         "@npm//@ngrx/store",
         "@npm//@types/google.visualization",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
         "@org_xprof//frontend/app/components/diagnostics_view",
diff --git a/frontend/app/components/overview/performance_summary/BUILD b/frontend/app/components/overview/performance_summary/BUILD
index 4f0c31a5..a060da08 100644
--- a/frontend/app/components/overview/performance_summary/BUILD
+++ b/frontend/app/components/overview/performance_summary/BUILD
@@ -16,8 +16,8 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/common",
         "@npm//@angular/core",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/angular:angular_material_icon",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/angular:angular_material_legacy_tooltip",
         "@org_xprof//frontend/app/common/interfaces",
     ],
diff --git a/frontend/app/components/overview/performance_summary/performance_summary_module.ts b/frontend/app/components/overview/performance_summary/performance_summary_module.ts
index a64c670e..b7d2a782 100644
--- a/frontend/app/components/overview/performance_summary/performance_summary_module.ts
+++ b/frontend/app/components/overview/performance_summary/performance_summary_module.ts
@@ -1,7 +1,7 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 import {MatLegacyTooltipModule} from '@angular/material/legacy-tooltip';
 
 import {PerformanceSummary} from './performance_summary';
@@ -10,7 +10,7 @@ import {PerformanceSummary} from './performance_summary';
   declarations: [PerformanceSummary],
   imports: [
     CommonModule,
-    MatLegacyCardModule,
+    MatCardModule,
     MatIconModule,
     MatLegacyTooltipModule,
   ],
diff --git a/frontend/app/components/overview/recommendation_result_view/BUILD b/frontend/app/components/overview/recommendation_result_view/BUILD
index b3bbbc2c..91175116 100644
--- a/frontend/app/components/overview/recommendation_result_view/BUILD
+++ b/frontend/app/components/overview/recommendation_result_view/BUILD
@@ -20,7 +20,7 @@ xprof_ng_module(
         "@npm//@angular/common",
         "@npm//@angular/core",
         "@npm//@ngrx/store",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
         "@org_xprof//frontend/app/store",
diff --git a/frontend/app/components/overview/recommendation_result_view/recommendation_result_view_module.ts b/frontend/app/components/overview/recommendation_result_view/recommendation_result_view_module.ts
index 6192aaa2..d2ec01f5 100644
--- a/frontend/app/components/overview/recommendation_result_view/recommendation_result_view_module.ts
+++ b/frontend/app/components/overview/recommendation_result_view/recommendation_result_view_module.ts
@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {RecommendationResultView} from './recommendation_result_view';
 
@@ -8,7 +8,7 @@ import {RecommendationResultView} from './recommendation_result_view';
   declarations: [RecommendationResultView],
   imports: [
     CommonModule,
-    MatLegacyCardModule,
+    MatCardModule,
   ],
   exports: [RecommendationResultView]
 })
diff --git a/frontend/app/components/overview/run_environment_view/BUILD b/frontend/app/components/overview/run_environment_view/BUILD
index e476abe6..106fd508 100644
--- a/frontend/app/components/overview/run_environment_view/BUILD
+++ b/frontend/app/components/overview/run_environment_view/BUILD
@@ -15,7 +15,7 @@ xprof_ng_module(
     ],
     deps = [
         "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )
diff --git a/frontend/app/components/overview/run_environment_view/run_environment_view_module.ts b/frontend/app/components/overview/run_environment_view/run_environment_view_module.ts
index 492e3b08..8fa8491a 100644
--- a/frontend/app/components/overview/run_environment_view/run_environment_view_module.ts
+++ b/frontend/app/components/overview/run_environment_view/run_environment_view_module.ts
@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {RunEnvironmentView} from './run_environment_view';
 
 @NgModule({
   declarations: [RunEnvironmentView],
-  imports: [MatLegacyCardModule],
+  imports: [MatCardModule],
   exports: [RunEnvironmentView]
 })
 export class RunEnvironmentViewModule {
diff --git a/frontend/app/components/overview/step_time_graph/BUILD b/frontend/app/components/overview/step_time_graph/BUILD
index c02c7b2f..cb0e0090 100644
--- a/frontend/app/components/overview/step_time_graph/BUILD
+++ b/frontend/app/components/overview/step_time_graph/BUILD
@@ -16,7 +16,7 @@ xprof_ng_module(
     deps = [
         "@npm//@angular/core",
         "@npm//@types/google.visualization",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/interfaces",
     ],
 )
diff --git a/frontend/app/components/overview/step_time_graph/step_time_graph_module.ts b/frontend/app/components/overview/step_time_graph/step_time_graph_module.ts
index fa04e45f..f0357086 100644
--- a/frontend/app/components/overview/step_time_graph/step_time_graph_module.ts
+++ b/frontend/app/components/overview/step_time_graph/step_time_graph_module.ts
@@ -1,11 +1,11 @@
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {StepTimeGraph} from './step_time_graph';
 
 @NgModule({
   declarations: [StepTimeGraph],
-  imports: [MatLegacyCardModule],
+  imports: [MatCardModule],
   exports: [StepTimeGraph]
 })
 export class StepTimeGraphModule {
diff --git a/frontend/app/components/pod_viewer/pod_viewer_details/BUILD b/frontend/app/components/pod_viewer/pod_viewer_details/BUILD
index ad90db57..ef0714af 100644
--- a/frontend/app/components/pod_viewer/pod_viewer_details/BUILD
+++ b/frontend/app/components/pod_viewer/pod_viewer_details/BUILD
@@ -18,7 +18,7 @@ xprof_ng_module(
         "@npm//@angular/core",
         "@npm//@ngrx/store",
         "@npm//rxjs",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
+        "@org_xprof//frontend/app/common/angular:angular_material_card",
         "@org_xprof//frontend/app/common/constants",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/utils",
diff --git a/frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details_module.ts b/frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details_module.ts
index f099d7ea..4f8ce5f3 100644
--- a/frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details_module.ts
+++ b/frontend/app/components/pod_viewer/pod_viewer_details/pod_viewer_details_module.ts
@@ -1,6 +1,6 @@
 import {CommonModule} from '@angular/common';
 import {NgModule} from '@angular/core';
-import {MatLegacyCardModule} from '@angular/material/legacy-card';
+import {MatCardModule} from '@angular/material/card';
 
 import {PodViewerDetails} from './pod_viewer_details';
 
@@ -9,7 +9,7 @@ import {PodViewerDetails} from './pod_viewer_details';
   declarations: [PodViewerDetails],
   imports: [
     CommonModule,
-    MatLegacyCardModule,
+    MatCardModule,
   ],
   exports: [PodViewerDetails]
 })
diff --git a/frontend/app/components/tensorflow_stats/BUILD b/frontend/app/components/tensorflow_stats/BUILD
index 876679fb..293d3fb2 100644
--- a/frontend/app/components/tensorflow_stats/BUILD
+++ b/frontend/app/components/tensorflow_stats/BUILD
@@ -1,5 +1,5 @@
-load("//defs:defs.bzl", "xprof_ng_module")
 load("@io_bazel_rules_sass//:defs.bzl", "sass_binary")
+load("//defs:defs.bzl", "xprof_ng_module")
 
 package(default_visibility = ["//frontend:internal"])
 
diff --git a/frontend/app/components/tensorflow_stats/flop_rate_chart/BUILD b/frontend/app/components/tensorflow_stats/flop_rate_chart/BUILD
index 03ba5fe5..503ea752 100644
--- a/frontend/app/components/tensorflow_stats/flop_rate_chart/BUILD
+++ b/frontend/app/components/tensorflow_stats/flop_rate_chart/BUILD
@@ -15,7 +15,6 @@ xprof_ng_module(
     ],
     deps = [
         "@npm//@angular/core",
-        "@org_xprof//frontend/app/common/angular:angular_material_legacy_card",
         "@org_xprof//frontend/app/common/interfaces",
         "@org_xprof//frontend/app/common/interfaces:chart",
         "@org_xprof//frontend/app/components/chart",
diff --git a/frontend/styles.scss b/frontend/styles.scss
index 42be730f..234b9bbb 100644
--- a/frontend/styles.scss
+++ b/frontend/styles.scss
@@ -28,6 +28,7 @@ $theme: mat.define-light-theme(
 @include mat.fab-theme($theme);
 @include mat.button-theme($theme);
 @include mat.icon-button-theme($theme);
+@include mat.card-theme($theme);
 
 html, body {
   height: 100%;