diff --git a/scenes/src/app/scenes/autocomplete/autocomplete-scene.html b/scenes/src/app/scenes/autocomplete/autocomplete-scene.html
index 408cc170..3b934f39 100644
--- a/scenes/src/app/scenes/autocomplete/autocomplete-scene.html
+++ b/scenes/src/app/scenes/autocomplete/autocomplete-scene.html
@@ -6,10 +6,10 @@
            matInput
            [formControl]="myControl"
            [matAutocomplete]="auto">
-    <mat-autocomplete #auto="matAutocomplete">
-      <mat-option *ngFor="let option of options" [value]="option">
-        {{option}}
-      </mat-option>
+    <mat-autocomplete autoActiveFirstOption #auto="matAutocomplete">
+      @for (option of options; track option) {
+        <mat-option [value]="option">{{option}}</mat-option>
+      }
     </mat-autocomplete>
   </mat-form-field>
 </form>
diff --git a/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.html b/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.html
index ec762633..56cd1e43 100644
--- a/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.html
+++ b/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.html
@@ -1,10 +1,10 @@
 <mat-list>
   <mat-list-item>
-    <mat-icon>favorite</mat-icon>
-    Favorite
+    <mat-icon matListItemIcon>favorite</mat-icon>
+    <div matListItemTitle>Favorite</div>
   </mat-list-item>
   <mat-list-item>
-    <mat-icon>share</mat-icon>
-    Share
+    <mat-icon matListItemIcon>share</mat-icon>
+    <div matListItemTitle>Share</div>
   </mat-list-item>
 </mat-list>
diff --git a/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.scss b/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.scss
index 9113312b..a1cc8d26 100644
--- a/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.scss
+++ b/scenes/src/app/scenes/bottom-sheet/bottom-sheet-scene.scss
@@ -1,12 +1,6 @@
 .mat-bottom-sheet-container {
   min-width: 0 !important;
   width: 250px;
-}
-
-.mat-icon {
-  margin-right: 24px;
-}
-
-.cdk-overlay-backdrop {
-  opacity: 0 !important;
+  border-top-left-radius: var(--mat-bottom-sheet-container-shape);
+  border-top-right-radius: var(--mat-bottom-sheet-container-shape);
 }
diff --git a/scenes/src/app/scenes/button-toggle/button-toggle-scene.html b/scenes/src/app/scenes/button-toggle/button-toggle-scene.html
index 5fb53117..4e0865ae 100644
--- a/scenes/src/app/scenes/button-toggle/button-toggle-scene.html
+++ b/scenes/src/app/scenes/button-toggle/button-toggle-scene.html
@@ -1,11 +1,11 @@
-<mat-button-toggle-group class="scene-button-toggle" name="fontStyle" aria-label="Font Style">
-  <mat-button-toggle value="bold" class="scene-button-toggle-bold">
+<mat-button-toggle-group class="scene-button-toggle" aria-label="Font Style">
+  <mat-button-toggle value="bold">
     <mat-icon>format_align_left</mat-icon>
   </mat-button-toggle>
-  <mat-button-toggle value="italic" class="scene-button-toggle-italic">
+  <mat-button-toggle value="italic">
     <mat-icon>format_align_justify</mat-icon>
   </mat-button-toggle>
-  <mat-button-toggle value="underline" class="scene-button-toggle-underline" [checked]="true">
+  <mat-button-toggle value="underline" [checked]="true">
     <mat-icon>format_align_right</mat-icon>
   </mat-button-toggle>
 </mat-button-toggle-group>
diff --git a/scenes/src/app/scenes/button-toggle/button-toggle-scene.scss b/scenes/src/app/scenes/button-toggle/button-toggle-scene.scss
new file mode 100644
index 00000000..2bf5ee2c
--- /dev/null
+++ b/scenes/src/app/scenes/button-toggle/button-toggle-scene.scss
@@ -0,0 +1,3 @@
+.scene-button-toggle {
+  --mat-standard-button-toggle-selected-state-text-color: var(--mat-icon-color);
+}
diff --git a/scenes/src/app/scenes/button-toggle/button-toggle-scene.ts b/scenes/src/app/scenes/button-toggle/button-toggle-scene.ts
index 3068136b..76ea2609 100644
--- a/scenes/src/app/scenes/button-toggle/button-toggle-scene.ts
+++ b/scenes/src/app/scenes/button-toggle/button-toggle-scene.ts
@@ -6,6 +6,7 @@ import {MatIconModule} from '@angular/material/icon';
   encapsulation: ViewEncapsulation.None,
   selector: 'app-button-toggle-scene',
   templateUrl: './button-toggle-scene.html',
+  styleUrls: ['./button-toggle-scene.scss'],
   standalone: true,
   imports: [MatButtonToggleModule, MatIconModule],
 })
diff --git a/scenes/src/app/scenes/card/card-scene.html b/scenes/src/app/scenes/card/card-scene.html
index af3b45e7..c8ffdcbe 100644
--- a/scenes/src/app/scenes/card/card-scene.html
+++ b/scenes/src/app/scenes/card/card-scene.html
@@ -1,9 +1,11 @@
 <div class="scene-card">
   <mat-card appearance="outlined">
-    <mat-card-title class="docs-scene-card-title">
-    </mat-card-title>
+    <mat-card-header>
+      <div class="docs-scene-card-title"></div>
+    </mat-card-header>
 
-    <mat-card-content class="scene-content">
+    <mat-card-content>
+      <div class="scene-content"></div>
     </mat-card-content>
   </mat-card>
 </div>
diff --git a/scenes/src/app/scenes/card/card-scene.scss b/scenes/src/app/scenes/card/card-scene.scss
index ed05013a..45268854 100644
--- a/scenes/src/app/scenes/card/card-scene.scss
+++ b/scenes/src/app/scenes/card/card-scene.scss
@@ -4,14 +4,15 @@
 
 .scene-content {
   background: rgba(red, 0.3);
-  border-radius: 4px;
+  border-radius: 12px;
   height: 70px;
   width: 100%;
+  margin-top: 8px;
 }
 
 .docs-scene-card-title {
   background: rgba(red, 0.5);
-  border-radius: 4px;
+  border-radius: 12px;
   height: 30px;
   width: 70%;
 }
diff --git a/scenes/src/app/scenes/checkbox/checkbox-scene.html b/scenes/src/app/scenes/checkbox/checkbox-scene.html
index 27a0d75a..3e982173 100755
--- a/scenes/src/app/scenes/checkbox/checkbox-scene.html
+++ b/scenes/src/app/scenes/checkbox/checkbox-scene.html
@@ -1,5 +1,7 @@
 <div class="scene-checkboxes">
-  <mat-checkbox class="scene-checkbox-all" [indeterminate]="true">All</mat-checkbox>
+  <div>
+    <mat-checkbox class="scene-checkbox-all" [indeterminate]="true">All</mat-checkbox>
+  </div>
   <mat-checkbox [checked]="true">Draft</mat-checkbox>
   <mat-checkbox [checked]="true">In Progress</mat-checkbox>
   <mat-checkbox>Submitted</mat-checkbox>
diff --git a/scenes/src/app/scenes/checkbox/checkbox-scene.scss b/scenes/src/app/scenes/checkbox/checkbox-scene.scss
index 801c9d25..52007867 100755
--- a/scenes/src/app/scenes/checkbox/checkbox-scene.scss
+++ b/scenes/src/app/scenes/checkbox/checkbox-scene.scss
@@ -1,17 +1,7 @@
 .scene-checkboxes {
-  width: 80px;
+  width: 120px;
 }
 
 .scene-checkbox-all {
   margin-left: -20px;
 }
-
-/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-.mat-checkbox-layout {
-  padding: 5px 0;
-}
-
-/* TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version. */
-.mat-checkbox-label {
-  font-size: 20px;
-}
diff --git a/scenes/src/app/scenes/chips/chips-scene.html b/scenes/src/app/scenes/chips/chips-scene.html
index 250092f9..590bc2dd 100644
--- a/scenes/src/app/scenes/chips/chips-scene.html
+++ b/scenes/src/app/scenes/chips/chips-scene.html
@@ -4,7 +4,6 @@ <h2>Amenities</h2>
   <mat-chip-option selected="true">Washer/Dryer</mat-chip-option>
   <mat-chip-option>Dogs ok</mat-chip-option>
   <mat-chip-option selected="true">Cats ok</mat-chip-option>
-  <mat-chip-option>Kitchen</mat-chip-option>
   <mat-chip-option>Fireplace</mat-chip-option>
   <mat-chip-option>Wheelchair accessible</mat-chip-option>
   <mat-chip-option>Elevator</mat-chip-option>
diff --git a/scenes/src/app/scenes/chips/chips-scene.scss b/scenes/src/app/scenes/chips/chips-scene.scss
index a0a60307..9caeda5b 100644
--- a/scenes/src/app/scenes/chips/chips-scene.scss
+++ b/scenes/src/app/scenes/chips/chips-scene.scss
@@ -3,7 +3,3 @@
   margin-top: -30px;
   width: 380px;
 }
-
-div.scene-chips-wrapper .mat-mdc-chip.mat-mdc-standard-chip {
-  background-color: pink;
-}
diff --git a/scenes/src/app/scenes/datepicker/datepicker-scene.html b/scenes/src/app/scenes/datepicker/datepicker-scene.html
index dbe5c20b..d8e863c5 100644
--- a/scenes/src/app/scenes/datepicker/datepicker-scene.html
+++ b/scenes/src/app/scenes/datepicker/datepicker-scene.html
@@ -1,2 +1,9 @@
-<mat-calendar class="scene-datepicker-left"></mat-calendar>
-<mat-calendar class="scene-datepicker-right"></mat-calendar>
+<div class="calendar-wrapper">
+  <mat-calendar
+    class="calendar"
+    [minDate]="minDate"
+    [maxDate]="maxDate"
+    [selected]="selectedDate"
+  >
+  </mat-calendar>
+</div>
diff --git a/scenes/src/app/scenes/datepicker/datepicker-scene.scss b/scenes/src/app/scenes/datepicker/datepicker-scene.scss
index 16928587..0d8f7c7c 100644
--- a/scenes/src/app/scenes/datepicker/datepicker-scene.scss
+++ b/scenes/src/app/scenes/datepicker/datepicker-scene.scss
@@ -1,15 +1,13 @@
-.scene-datepicker-left {
-  top: -220px;
-  left: -240px;
-}
-
-.scene-datepicker-right {
-  top: -80px;
+.calendar {
+  margin-top: 140px;
   background: rgba(white, 0.8);
 }
 
-mat-calendar {
-  position: absolute;
-  border: 1px solid;
-  border-radius: 4px;
+.calendar-wrapper {
+  display: flex;
+
+  mat-calendar {
+    width: 300px;
+    border-radius: 16px;
+  }
 }
diff --git a/scenes/src/app/scenes/datepicker/datepicker-scene.ts b/scenes/src/app/scenes/datepicker/datepicker-scene.ts
index e0023cf8..5b8a63fc 100644
--- a/scenes/src/app/scenes/datepicker/datepicker-scene.ts
+++ b/scenes/src/app/scenes/datepicker/datepicker-scene.ts
@@ -10,4 +10,8 @@ import {MatDatepickerModule} from '@angular/material/datepicker';
   standalone: true,
   imports: [MatDatepickerModule]
 })
-export class DatepickerScene {}
+export class DatepickerScene {
+  minDate = new Date(2024, 3, 2);
+  selectedDate = new Date(2024, 3, 3);
+  maxDate = new Date(2024, 3, 5);
+}
diff --git a/scenes/src/app/scenes/dialog/dialog-scene.ts b/scenes/src/app/scenes/dialog/dialog-scene.ts
index f365a8a1..b27fe412 100644
--- a/scenes/src/app/scenes/dialog/dialog-scene.ts
+++ b/scenes/src/app/scenes/dialog/dialog-scene.ts
@@ -14,9 +14,7 @@ export class DialogScene {
   }
 
   openDialog() {
-    this.dialog.open(DialogSceneExampleDialog, {
-      hasBackdrop: false
-    });
+    this.dialog.open(DialogSceneExampleDialog);
   }
 }
 
diff --git a/scenes/src/app/scenes/divider/divider-scene.html b/scenes/src/app/scenes/divider/divider-scene.html
index f9c9d549..1ba03fac 100644
--- a/scenes/src/app/scenes/divider/divider-scene.html
+++ b/scenes/src/app/scenes/divider/divider-scene.html
@@ -1,7 +1,16 @@
 <mat-list>
-  <mat-list-item><mat-icon>account_circle</mat-icon>Contact 1</mat-list-item>
+  <mat-list-item>
+    <mat-icon matListItemIcon>account_circle</mat-icon>
+    <div matListItemTitle>Contact 1</div>
+  </mat-list-item>
   <mat-divider></mat-divider>
-  <mat-list-item><mat-icon>account_circle</mat-icon>Contact 2</mat-list-item>
+  <mat-list-item>
+    <mat-icon matListItemIcon>account_circle</mat-icon>
+    <div matListItemTitle>Contact 2</div>
+  </mat-list-item>
   <mat-divider></mat-divider>
-  <mat-list-item><mat-icon>account_circle</mat-icon>Contact 3</mat-list-item>
+  <mat-list-item>
+    <mat-icon matListItemIcon>account_circle</mat-icon>
+    <div matListItemTitle>Contact 3</div>
+  </mat-list-item>
 </mat-list>
diff --git a/scenes/src/app/scenes/divider/divider-scene.scss b/scenes/src/app/scenes/divider/divider-scene.scss
index 4915ee91..af5dd754 100644
--- a/scenes/src/app/scenes/divider/divider-scene.scss
+++ b/scenes/src/app/scenes/divider/divider-scene.scss
@@ -1,7 +1,3 @@
 mat-divider {
   width: 180px;
 }
-
-app-divider-scene .mat-icon {
-  margin-right: 8px;
-}
diff --git a/scenes/src/app/scenes/expansion/expansion-scene.scss b/scenes/src/app/scenes/expansion/expansion-scene.scss
index 19ab32fe..6d44ca9a 100644
--- a/scenes/src/app/scenes/expansion/expansion-scene.scss
+++ b/scenes/src/app/scenes/expansion/expansion-scene.scss
@@ -8,3 +8,7 @@ mat-panel-description,
 .docs-expansion-scene-content mat-icon {
   margin-right: 5px;
 }
+
+mat-accordion mat-expansion-panel {
+  width: 300px;
+}
diff --git a/scenes/src/app/scenes/list/list-scene.html b/scenes/src/app/scenes/list/list-scene.html
index 9da29889..c4048f4b 100644
--- a/scenes/src/app/scenes/list/list-scene.html
+++ b/scenes/src/app/scenes/list/list-scene.html
@@ -1,13 +1,13 @@
 <mat-list>
   <div mat-subheader>Folders</div>
   <mat-list-item>
-    <mat-icon mat-list-icon>folder</mat-icon>
-    <div mat-line>Photos</div>
-    <div mat-line>Jun 8, 2020</div>
+    <mat-icon matListItemIcon>folder</mat-icon>
+    <div matListItemTitle>Photos</div>
+    <div matListItemLine>February 14, 2024</div>
   </mat-list-item>
   <mat-list-item>
-    <mat-icon mat-list-icon>folder</mat-icon>
-    <div mat-line>Recipes</div>
-    <div mat-line>Jul 2, 2020</div>
+    <mat-icon matListItemIcon>folder</mat-icon>
+    <div matListItemTitle>Recipes</div>
+    <div matListItemLine>May 22, 2024</div>
   </mat-list-item>
 </mat-list>
diff --git a/scenes/src/app/scenes/paginator/paginator-scene.scss b/scenes/src/app/scenes/paginator/paginator-scene.scss
index b44fa345..c5f7d4c3 100644
--- a/scenes/src/app/scenes/paginator/paginator-scene.scss
+++ b/scenes/src/app/scenes/paginator/paginator-scene.scss
@@ -1,4 +1,4 @@
 .scene-paginator.mat-mdc-paginator {
-  margin-right: 80px;
+  margin-right: 70px;
   background: transparent;
 }
diff --git a/scenes/src/app/scenes/radio/radio-scene.scss b/scenes/src/app/scenes/radio/radio-scene.scss
index f8729d15..a246ef2f 100644
--- a/scenes/src/app/scenes/radio/radio-scene.scss
+++ b/scenes/src/app/scenes/radio/radio-scene.scss
@@ -1,8 +1,5 @@
 .scene-radio-group {
   display: flex;
   flex-direction: column;
-}
-
-.scene-radio-button {
-  margin: 8px;
+  padding-right: 8px;
 }
diff --git a/scenes/src/app/scenes/sidenav/sidenav-scene.html b/scenes/src/app/scenes/sidenav/sidenav-scene.html
index 9005898b..5986d399 100644
--- a/scenes/src/app/scenes/sidenav/sidenav-scene.html
+++ b/scenes/src/app/scenes/sidenav/sidenav-scene.html
@@ -1,10 +1,22 @@
-<mat-drawer-container class="docs-sidenav-container">
-  <mat-drawer class="docs-sidenav-drawer mat-elevation-z6" mode="side" opened>
+<mat-sidenav-container class="docs-sidenav-container">
+  <mat-sidenav class="docs-sidenav" mode="side" opened>
     <mat-list role="list">
-      <mat-list-item role="listitem"><mat-icon>inbox</mat-icon>Inbox</mat-list-item>
-      <mat-list-item role="listitem"><mat-icon>star</mat-icon>Starred</mat-list-item>
-      <mat-list-item role="listitem"><mat-icon>watch_later</mat-icon>Snoozed</mat-list-item>
-      <mat-list-item role="listitem"><mat-icon>send</mat-icon>Sent</mat-list-item>
+      <mat-list-item role="listitem">
+        <mat-icon matListItemIcon>inbox</mat-icon>
+        <div matListItemTitle>Inbox</div>
+      </mat-list-item>
+      <mat-list-item role="listitem">
+        <mat-icon matListItemIcon>star</mat-icon>
+        <div matListItemTitle>Starred</div>
+      </mat-list-item>
+      <mat-list-item role="listitem">
+        <mat-icon matListItemIcon>watch_later</mat-icon>
+        <div matListItemTitle>Snoozed</div>
+      </mat-list-item>
+      <mat-list-item role="listitem">
+        <mat-icon matListItemIcon>send</mat-icon>
+        <div matListItemTitle>Sent</div>
+      </mat-list-item>
     </mat-list>
-  </mat-drawer>
-</mat-drawer-container>
+  </mat-sidenav>
+</mat-sidenav-container>
diff --git a/scenes/src/app/scenes/sidenav/sidenav-scene.scss b/scenes/src/app/scenes/sidenav/sidenav-scene.scss
index 9af8b695..31be5d12 100644
--- a/scenes/src/app/scenes/sidenav/sidenav-scene.scss
+++ b/scenes/src/app/scenes/sidenav/sidenav-scene.scss
@@ -1,13 +1,6 @@
 .docs-sidenav-container {
+  height: 210px;
   width: 360px;
-  height: 200px;
-}
-
-.docs-sidenav-drawer {
-  padding-right: 50px;
-  border-right: none;
-
-  mat-icon {
-    margin-right: 10px;
-  }
+  --mat-sidenav-container-width: 200px;
+  --mat-sidenav-container-background-color: #f9f0f9;
 }
diff --git a/scenes/src/app/scenes/slide-toggle/slide-toggle-scene.html b/scenes/src/app/scenes/slide-toggle/slide-toggle-scene.html
index a1aef4c3..7ad30987 100644
--- a/scenes/src/app/scenes/slide-toggle/slide-toggle-scene.html
+++ b/scenes/src/app/scenes/slide-toggle/slide-toggle-scene.html
@@ -1,14 +1,9 @@
-<div class="scene-slide-toggle scene-slide-toggle-notifications">
-  <mat-icon>notifications_off</mat-icon>
-  NOTIFICATIONS  <mat-slide-toggle></mat-slide-toggle>
+<div class="scene-slide-toggle">
+  <mat-slide-toggle>Notifications</mat-slide-toggle>
 </div>
-
-<div class="scene-slide-toggle scene-slide-toggle-dark">
-  <mat-icon>nights_stay</mat-icon>
-  DARK MODE  <mat-slide-toggle checked="true"></mat-slide-toggle>
+<div class="scene-slide-toggle">
+  <mat-slide-toggle checked="true">Dark Mode</mat-slide-toggle>
 </div>
-
-<div class="scene-slide-toggle scene-slide-toggle-dark">
-  <mat-icon>wifi_off</mat-icon>
-  WiFi  <mat-slide-toggle></mat-slide-toggle>
+<div class="scene-slide-toggle">
+  <mat-slide-toggle>WiFi</mat-slide-toggle>
 </div>
diff --git a/scenes/src/app/scenes/slide-toggle/slide-toggle-scene.scss b/scenes/src/app/scenes/slide-toggle/slide-toggle-scene.scss
index 3cd0ee0f..a86995fd 100644
--- a/scenes/src/app/scenes/slide-toggle/slide-toggle-scene.scss
+++ b/scenes/src/app/scenes/slide-toggle/slide-toggle-scene.scss
@@ -1,15 +1,4 @@
 .scene-slide-toggle {
   margin: 15px;
-  width: 250px;
   display: flex;
 }
-
-/* TODO(mdc-migration): The following rule targets internal classes of slide-toggle that may no longer apply for the MDC version. */
-mat-slide-toggle {
-  margin-left: auto;
-}
-
-mat-icon {
-  vertical-align: middle;
-  padding-right: 5px;
-}
diff --git a/scenes/src/app/scenes/slider/slider-scene.html b/scenes/src/app/scenes/slider/slider-scene.html
index f9403dc9..fb271394 100644
--- a/scenes/src/app/scenes/slider/slider-scene.html
+++ b/scenes/src/app/scenes/slider/slider-scene.html
@@ -1,20 +1,12 @@
-<div class="scene-sliders">
-<div>
+<div class="slider-row">
   <mat-icon>volume_up</mat-icon>
-  <mat-slider
-    thumbLabel="true"
-    value="65"
-    min="1"
-    max="100"
-    #volume></mat-slider>
+  <mat-slider min="0" max="100" discrete>
+    <input value="65" matSliderThumb>
+  </mat-slider>
 </div>
-
-<div>
+<div class="slider-row">
   <mat-icon>brightness_low</mat-icon>
-  <mat-slider
-    thumbLabel
-    value="40"
-    min="1"
-    max="100"></mat-slider>
-</div>
+  <mat-slider min="0" max="100" discrete>
+    <input value="40" matSliderThumb>
+  </mat-slider>
 </div>
diff --git a/scenes/src/app/scenes/slider/slider-scene.scss b/scenes/src/app/scenes/slider/slider-scene.scss
index 0e0741b4..304c22a0 100644
--- a/scenes/src/app/scenes/slider/slider-scene.scss
+++ b/scenes/src/app/scenes/slider/slider-scene.scss
@@ -1,10 +1,4 @@
-
-/* TODO(mdc-migration): The following rule targets internal classes of slider that may no longer apply for the MDC version. */
-mat-slider {
-  width: 200px;
-  margin: 5px;
-}
-
-mat-icon {
-  vertical-align: middle;
+.slider-row {
+  display: flex;
+  align-items: center;
 }
diff --git a/scenes/src/app/scenes/slider/slider-scene.ts b/scenes/src/app/scenes/slider/slider-scene.ts
index 2986a233..a822962b 100644
--- a/scenes/src/app/scenes/slider/slider-scene.ts
+++ b/scenes/src/app/scenes/slider/slider-scene.ts
@@ -1,6 +1,6 @@
-import {AfterViewInit, Component, ViewChild, ViewEncapsulation} from '@angular/core';
+import {AfterViewInit, Component, ViewEncapsulation} from '@angular/core';
 import {MatIconModule} from '@angular/material/icon';
-import {MatSlider, MatSliderModule} from '@angular/material/slider';
+import {MatSliderModule} from '@angular/material/slider';
 
 
 @Component({
@@ -12,10 +12,9 @@ import {MatSlider, MatSliderModule} from '@angular/material/slider';
   imports: [MatIconModule, MatSliderModule]
 })
 export class SliderScene implements AfterViewInit {
-  @ViewChild('volume') volume!: MatSlider;
 
   ngAfterViewInit() {
-    // TODO: update to new API in Angular v15
-    (this.volume as any).focus();
+    const volume = document.querySelector('mat-slider input');
+    (volume as any).focus();
   }
 }
diff --git a/scenes/src/app/scenes/snack-bar/snack-bar-scene.scss b/scenes/src/app/scenes/snack-bar/snack-bar-scene.scss
index 385503d3..be8cf221 100644
--- a/scenes/src/app/scenes/snack-bar/snack-bar-scene.scss
+++ b/scenes/src/app/scenes/snack-bar/snack-bar-scene.scss
@@ -2,7 +2,7 @@
 // within the scene bounds.
 .mat-mdc-snack-bar-container {
   margin: 8px !important;
-  background: red !important;
+  --mdc-snackbar-container-color: red;
   color: rgba(white, 0.87) !important;
 
   button {
diff --git a/scenes/src/app/scenes/stepper/stepper-scene.scss b/scenes/src/app/scenes/stepper/stepper-scene.scss
index 991958eb..6f696f30 100644
--- a/scenes/src/app/scenes/stepper/stepper-scene.scss
+++ b/scenes/src/app/scenes/stepper/stepper-scene.scss
@@ -1,7 +1,7 @@
 .scene-stepper {
-  background: transparent;
-  margin-left: 80px;
-  margin-top: 80px;
+  --mat-stepper-container-color: transparent;
+  margin-left: 64px;
+  margin-top: 44px;
 }
 
 .scene-stepper-input {
diff --git a/scenes/src/app/scenes/table/table-scene.html b/scenes/src/app/scenes/table/table-scene.html
index c6c7bd15..36e30861 100644
--- a/scenes/src/app/scenes/table/table-scene.html
+++ b/scenes/src/app/scenes/table/table-scene.html
@@ -1,29 +1,33 @@
-<table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
+<mat-card>
+  <mat-card-content>
+    <table mat-table [dataSource]="dataSource" class="mat-elevation-z8">
 
-  <!-- Position Column -->
-  <ng-container matColumnDef="position">
-    <th mat-header-cell *matHeaderCellDef> No. </th>
-    <td mat-cell *matCellDef="let element"> {{element.position}} </td>
-  </ng-container>
+      <!-- Position Column -->
+      <ng-container matColumnDef="position">
+        <th mat-header-cell *matHeaderCellDef> No. </th>
+        <td mat-cell *matCellDef="let element"> {{element.position}} </td>
+      </ng-container>
 
-  <!-- Name Column -->
-  <ng-container matColumnDef="name">
-    <th mat-header-cell *matHeaderCellDef> Name </th>
-    <td mat-cell *matCellDef="let element"> {{element.name}} </td>
-  </ng-container>
+      <!-- Name Column -->
+      <ng-container matColumnDef="name">
+        <th mat-header-cell *matHeaderCellDef> Name </th>
+        <td mat-cell *matCellDef="let element"> {{element.name}} </td>
+      </ng-container>
 
-  <!-- Weight Column -->
-  <ng-container matColumnDef="weight">
-    <th mat-header-cell *matHeaderCellDef> Weight </th>
-    <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
-  </ng-container>
+      <!-- Weight Column -->
+      <ng-container matColumnDef="weight">
+        <th mat-header-cell *matHeaderCellDef> Weight </th>
+        <td mat-cell *matCellDef="let element"> {{element.weight}} </td>
+      </ng-container>
 
-  <!-- Symbol Column -->
-  <ng-container matColumnDef="symbol">
-    <th mat-header-cell *matHeaderCellDef> Symbol </th>
-    <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
-  </ng-container>
+      <!-- Symbol Column -->
+      <ng-container matColumnDef="symbol">
+        <th mat-header-cell *matHeaderCellDef> Symbol </th>
+        <td mat-cell *matCellDef="let element"> {{element.symbol}} </td>
+      </ng-container>
 
-  <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
-  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
-</table>
+      <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
+      <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+    </table>
+  </mat-card-content>
+</mat-card>
diff --git a/scenes/src/app/scenes/table/table-scene.scss b/scenes/src/app/scenes/table/table-scene.scss
index ca02b0b7..2473c4b2 100644
--- a/scenes/src/app/scenes/table/table-scene.scss
+++ b/scenes/src/app/scenes/table/table-scene.scss
@@ -3,10 +3,5 @@
   top: 0;
   left: 0;
   right: 0;
-  margin: 24px;
+  margin: 12px;
 }
-
-table {
-  width: 100%;
-}
-
diff --git a/scenes/src/app/scenes/table/table-scene.ts b/scenes/src/app/scenes/table/table-scene.ts
index 3509adab..7ff9392d 100644
--- a/scenes/src/app/scenes/table/table-scene.ts
+++ b/scenes/src/app/scenes/table/table-scene.ts
@@ -1,4 +1,5 @@
 import {Component} from '@angular/core';
+import {MatCardModule} from '@angular/material/card';
 import {MatTableModule} from '@angular/material/table';
 
 export interface PeriodicElement {
@@ -20,7 +21,7 @@ const ELEMENT_DATA: PeriodicElement[] = [
   templateUrl: './table-scene.html',
   styleUrls: ['./table-scene.scss'],
   standalone: true,
-  imports: [MatTableModule]
+  imports: [MatCardModule, MatTableModule]
 })
 export class TableScene {
   displayedColumns: string[] = ['position', 'name', 'weight', 'symbol'];
diff --git a/scenes/src/app/scenes/tabs/tabs-scene.scss b/scenes/src/app/scenes/tabs/tabs-scene.scss
index 9427fa26..8b74c151 100644
--- a/scenes/src/app/scenes/tabs/tabs-scene.scss
+++ b/scenes/src/app/scenes/tabs/tabs-scene.scss
@@ -1,24 +1,7 @@
-:host {
-  position: absolute;
-  left: 0;
-  top: 0;
-  margin: 32px;
-}
-
-:host ::ng-deep mat-tab-body {
-  width: 100px;
-  padding: 24px;
-}
-
 .docs-scene-tab-content {
   border-radius: 4px;
   width: 100%;
   height: 100px;
   background: pink;
-}
-
-/* TODO(mdc-migration): The following rule targets internal classes of tabs that may no longer apply for the MDC version. */
-:host ::ng-deep .mat-tab-label {
-  font-size: 18px;
-  min-width: 132px;
+  margin-top: 8px;
 }
diff --git a/scenes/src/app/scenes/tooltip/tooltip-scene.scss b/scenes/src/app/scenes/tooltip/tooltip-scene.scss
index ff68faec..c01f40dd 100644
--- a/scenes/src/app/scenes/tooltip/tooltip-scene.scss
+++ b/scenes/src/app/scenes/tooltip/tooltip-scene.scss
@@ -5,4 +5,5 @@
 
 .tooltip-popup {
   font-size: 18px;
+  margin-left: -8px;
 }
diff --git a/scenes/src/main.ts b/scenes/src/main.ts
index d680c9e7..c7fe4aa2 100644
--- a/scenes/src/main.ts
+++ b/scenes/src/main.ts
@@ -2,7 +2,7 @@ import {importProvidersFrom} from '@angular/core';
 
 import {AppComponent} from './app/app.component';
 import {MatNativeDateModule} from '@angular/material/core';
-import {provideAnimations} from '@angular/platform-browser/animations';
+import {NoopAnimationsModule} from '@angular/platform-browser/animations';
 import {routes} from './app/app-routes';
 import {BrowserModule, bootstrapApplication} from '@angular/platform-browser';
 import {DOCUMENT} from '@angular/common';
@@ -15,14 +15,14 @@ bootstrapApplication(AppComponent, {
   providers: [
     importProvidersFrom(
       BrowserModule,
-      MatNativeDateModule
+      MatNativeDateModule,
+      NoopAnimationsModule,
     ),
     {
       provide: OverlayContainer,
       useFactory: (doc: any, platform: Platform) => new SceneOverlayContainer(doc, platform),
       deps: [DOCUMENT, Platform]
     },
-    provideAnimations(),
     provideRouter(routes),
   ]
 }).catch(err => console.error(err));
diff --git a/scenes/src/styles.scss b/scenes/src/styles.scss
index 70e9f64b..573cd656 100644
--- a/scenes/src/styles.scss
+++ b/scenes/src/styles.scss
@@ -1,40 +1,21 @@
 @use 'sass:map';
 @use '@angular/material' as mat;
+@use '@angular//material-experimental' as matx;
 
-@include mat.all-component-typographies();
 @include mat.core();
 
-$_primary: mat.define-palette(mat.$red-palette, 500, 200, 900);
-$_accent: mat.define-palette(mat.$red-palette, 500, 200, 700);
-$_warn: mat.define-palette(mat.$red-palette);
-
-$_theme: mat.define-light-theme($_primary, $_accent, $_warn);
-$_background-color: #fff2f4;
-
-$_background: map.get($_theme, background);
-$_background: map.merge($_background, (
-  background: $_background-color,
-  disabled-button: rgba(red, 0.5),
-  selected-button: rgba(red, 0.23)));
-$_theme: map.merge($_theme, (background: $_background));
-
-$_secondary-text-color: map_get(mat.$red-palette, 600);
-
-$_foreground: map.get($_theme, foreground);
-$_foreground: map.merge($_foreground, (
-  disabled-button: rgba(red, 0.45),
-  text: $_secondary-text-color,
-  divider: $_secondary-text-color,
-  secondary-text: $_secondary-text-color,
-  dsiabled-text: $_secondary-text-color,
-  hint-text: $_secondary-text-color,
-  icon: $_secondary-text-color));
-$_theme: map.merge($_theme, (foreground: $_foreground));
-
-@include mat.all-component-themes($_theme);
-
-body {
-  margin: 0;
-  color: red;
-  font-family: Roboto, Arial, sans-serif;
+$theme: matx.define-theme((
+  color: (
+    theme-type: light,
+    primary: matx.$m3-red-palette,
+  ),
+  typography: (
+    brand-family: 'Roboto',
+  ),
+));
+
+html {
+  font-family: 'Roboto';
+  @include mat.all-component-themes($theme);
+  @include mat.icon-color($theme, $color-variant: primary);
 }
diff --git a/src/assets/screenshots/autocomplete.scene.png b/src/assets/screenshots/autocomplete.scene.png
index de997b1f..ee07b285 100644
Binary files a/src/assets/screenshots/autocomplete.scene.png and b/src/assets/screenshots/autocomplete.scene.png differ
diff --git a/src/assets/screenshots/badge.scene.png b/src/assets/screenshots/badge.scene.png
index e9a79dbe..b7cfa435 100644
Binary files a/src/assets/screenshots/badge.scene.png and b/src/assets/screenshots/badge.scene.png differ
diff --git a/src/assets/screenshots/bottom-sheet.scene.png b/src/assets/screenshots/bottom-sheet.scene.png
index f23e8644..d438ed53 100644
Binary files a/src/assets/screenshots/bottom-sheet.scene.png and b/src/assets/screenshots/bottom-sheet.scene.png differ
diff --git a/src/assets/screenshots/button-toggle.scene.png b/src/assets/screenshots/button-toggle.scene.png
index 5a227fda..203b51d5 100644
Binary files a/src/assets/screenshots/button-toggle.scene.png and b/src/assets/screenshots/button-toggle.scene.png differ
diff --git a/src/assets/screenshots/button.scene.png b/src/assets/screenshots/button.scene.png
index 74448b3d..5ad7f0da 100644
Binary files a/src/assets/screenshots/button.scene.png and b/src/assets/screenshots/button.scene.png differ
diff --git a/src/assets/screenshots/card.scene.png b/src/assets/screenshots/card.scene.png
index 4f6cac99..8440baaf 100644
Binary files a/src/assets/screenshots/card.scene.png and b/src/assets/screenshots/card.scene.png differ
diff --git a/src/assets/screenshots/checkbox.scene.png b/src/assets/screenshots/checkbox.scene.png
index 7b0327a7..fdbeec8f 100644
Binary files a/src/assets/screenshots/checkbox.scene.png and b/src/assets/screenshots/checkbox.scene.png differ
diff --git a/src/assets/screenshots/chips.scene.png b/src/assets/screenshots/chips.scene.png
index 40f6085b..1156dc97 100644
Binary files a/src/assets/screenshots/chips.scene.png and b/src/assets/screenshots/chips.scene.png differ
diff --git a/src/assets/screenshots/core.scene.png b/src/assets/screenshots/core.scene.png
index 9f70df7d..fe25d87d 100644
Binary files a/src/assets/screenshots/core.scene.png and b/src/assets/screenshots/core.scene.png differ
diff --git a/src/assets/screenshots/datepicker.scene.png b/src/assets/screenshots/datepicker.scene.png
index 8bfbd872..057af048 100644
Binary files a/src/assets/screenshots/datepicker.scene.png and b/src/assets/screenshots/datepicker.scene.png differ
diff --git a/src/assets/screenshots/dialog.scene.png b/src/assets/screenshots/dialog.scene.png
index ff3c3528..38a75831 100644
Binary files a/src/assets/screenshots/dialog.scene.png and b/src/assets/screenshots/dialog.scene.png differ
diff --git a/src/assets/screenshots/divider.scene.png b/src/assets/screenshots/divider.scene.png
index ac7749fb..31f7a6f8 100644
Binary files a/src/assets/screenshots/divider.scene.png and b/src/assets/screenshots/divider.scene.png differ
diff --git a/src/assets/screenshots/expansion.scene.png b/src/assets/screenshots/expansion.scene.png
index c95ce30f..0e140d5a 100644
Binary files a/src/assets/screenshots/expansion.scene.png and b/src/assets/screenshots/expansion.scene.png differ
diff --git a/src/assets/screenshots/form-field.scene.png b/src/assets/screenshots/form-field.scene.png
index 868454db..9992c3e2 100644
Binary files a/src/assets/screenshots/form-field.scene.png and b/src/assets/screenshots/form-field.scene.png differ
diff --git a/src/assets/screenshots/icon.scene.png b/src/assets/screenshots/icon.scene.png
index 0e94810d..9bba3b00 100644
Binary files a/src/assets/screenshots/icon.scene.png and b/src/assets/screenshots/icon.scene.png differ
diff --git a/src/assets/screenshots/input.scene.png b/src/assets/screenshots/input.scene.png
index 653478fa..89413421 100644
Binary files a/src/assets/screenshots/input.scene.png and b/src/assets/screenshots/input.scene.png differ
diff --git a/src/assets/screenshots/list.scene.png b/src/assets/screenshots/list.scene.png
index 575c4fc4..1e3f1388 100644
Binary files a/src/assets/screenshots/list.scene.png and b/src/assets/screenshots/list.scene.png differ
diff --git a/src/assets/screenshots/menu.scene.png b/src/assets/screenshots/menu.scene.png
index e9ec270d..d7c91000 100644
Binary files a/src/assets/screenshots/menu.scene.png and b/src/assets/screenshots/menu.scene.png differ
diff --git a/src/assets/screenshots/paginator.scene.png b/src/assets/screenshots/paginator.scene.png
index 8c393575..6f9f504e 100644
Binary files a/src/assets/screenshots/paginator.scene.png and b/src/assets/screenshots/paginator.scene.png differ
diff --git a/src/assets/screenshots/progress-bar.scene.png b/src/assets/screenshots/progress-bar.scene.png
index 296e9dce..55ff43ef 100644
Binary files a/src/assets/screenshots/progress-bar.scene.png and b/src/assets/screenshots/progress-bar.scene.png differ
diff --git a/src/assets/screenshots/progress-spinner.scene.png b/src/assets/screenshots/progress-spinner.scene.png
index 869917c6..74732ff9 100644
Binary files a/src/assets/screenshots/progress-spinner.scene.png and b/src/assets/screenshots/progress-spinner.scene.png differ
diff --git a/src/assets/screenshots/radio.scene.png b/src/assets/screenshots/radio.scene.png
index ecac3b10..f8c46562 100644
Binary files a/src/assets/screenshots/radio.scene.png and b/src/assets/screenshots/radio.scene.png differ
diff --git a/src/assets/screenshots/ripple.scene.png b/src/assets/screenshots/ripple.scene.png
index 9d9c93dd..462d0dfb 100644
Binary files a/src/assets/screenshots/ripple.scene.png and b/src/assets/screenshots/ripple.scene.png differ
diff --git a/src/assets/screenshots/select.scene.png b/src/assets/screenshots/select.scene.png
index 90b44cc1..e0863f9a 100644
Binary files a/src/assets/screenshots/select.scene.png and b/src/assets/screenshots/select.scene.png differ
diff --git a/src/assets/screenshots/sidenav.scene.png b/src/assets/screenshots/sidenav.scene.png
index 18ceeac0..2b220ec1 100644
Binary files a/src/assets/screenshots/sidenav.scene.png and b/src/assets/screenshots/sidenav.scene.png differ
diff --git a/src/assets/screenshots/slide-toggle.scene.png b/src/assets/screenshots/slide-toggle.scene.png
index e7c199fe..5c6a9fc1 100644
Binary files a/src/assets/screenshots/slide-toggle.scene.png and b/src/assets/screenshots/slide-toggle.scene.png differ
diff --git a/src/assets/screenshots/slider.scene.png b/src/assets/screenshots/slider.scene.png
index 8bae38c2..6d2dea70 100644
Binary files a/src/assets/screenshots/slider.scene.png and b/src/assets/screenshots/slider.scene.png differ
diff --git a/src/assets/screenshots/snack-bar.scene.png b/src/assets/screenshots/snack-bar.scene.png
index d327b5d0..2b9c90bf 100644
Binary files a/src/assets/screenshots/snack-bar.scene.png and b/src/assets/screenshots/snack-bar.scene.png differ
diff --git a/src/assets/screenshots/sort.scene.png b/src/assets/screenshots/sort.scene.png
index 8055fe0a..d24cc6cf 100644
Binary files a/src/assets/screenshots/sort.scene.png and b/src/assets/screenshots/sort.scene.png differ
diff --git a/src/assets/screenshots/stepper.scene.png b/src/assets/screenshots/stepper.scene.png
index 031aadea..7119389d 100644
Binary files a/src/assets/screenshots/stepper.scene.png and b/src/assets/screenshots/stepper.scene.png differ
diff --git a/src/assets/screenshots/table.scene.png b/src/assets/screenshots/table.scene.png
index 749a16ae..6769c5e2 100644
Binary files a/src/assets/screenshots/table.scene.png and b/src/assets/screenshots/table.scene.png differ
diff --git a/src/assets/screenshots/tabs.scene.png b/src/assets/screenshots/tabs.scene.png
index 22d9d20a..16974105 100644
Binary files a/src/assets/screenshots/tabs.scene.png and b/src/assets/screenshots/tabs.scene.png differ
diff --git a/src/assets/screenshots/toolbar.scene.png b/src/assets/screenshots/toolbar.scene.png
index 1cf42685..8e931b67 100644
Binary files a/src/assets/screenshots/toolbar.scene.png and b/src/assets/screenshots/toolbar.scene.png differ
diff --git a/src/assets/screenshots/tooltip.scene.png b/src/assets/screenshots/tooltip.scene.png
index 6d032805..aa84e324 100644
Binary files a/src/assets/screenshots/tooltip.scene.png and b/src/assets/screenshots/tooltip.scene.png differ
diff --git a/src/assets/screenshots/tree.scene.png b/src/assets/screenshots/tree.scene.png
index d8aec40a..50610aeb 100644
Binary files a/src/assets/screenshots/tree.scene.png and b/src/assets/screenshots/tree.scene.png differ