diff --git a/src/app/courses/add-courses/courses-step.component.html b/src/app/courses/add-courses/courses-step.component.html
index 67efb0ce76..00910085b7 100644
--- a/src/app/courses/add-courses/courses-step.component.html
+++ b/src/app/courses/add-courses/courses-step.component.html
@@ -15,7 +15,7 @@
       <mat-form-field class="full-width">
         <input matInput i18n-placeholder placeholder="Step title" maxlength="200" formControlName="stepTitle">
       </mat-form-field>
-      <mat-form-field class="full-width mat-form-field-type-no-underline">
+      <mat-form-field class="full-width mat-form-field-type-no-underline" appearance="outline">
         <planet-markdown-textbox class="full-width" i18n-placeholder placeholder="Description" [formControl]="stepForm.controls.description" imageGroup="community"></planet-markdown-textbox>
         <mat-error><planet-form-error-messages [control]="stepForm.controls.description"></planet-form-error-messages></mat-error>
       </mat-form-field>
diff --git a/src/app/courses/search-courses/courses-search.scss b/src/app/courses/search-courses/courses-search.scss
index 52367bb5a0..e971f0903b 100644
--- a/src/app/courses/search-courses/courses-search.scss
+++ b/src/app/courses/search-courses/courses-search.scss
@@ -15,7 +15,7 @@ planet-courses-search {
     display: grid;
     grid-template-rows: $label-height calc(#{$toolbar-height} - #{$label-height});
 
-    .mat-selection-list {
+    .mat-mdc-selection-list {
       height: calc(#{$toolbar-height} - #{$label-height});
       padding: 0;
       overflow-y: auto;
diff --git a/src/app/dashboard/dashboard-tile.component.ts b/src/app/dashboard/dashboard-tile.component.ts
index fc1b424a20..5be5c8ce34 100644
--- a/src/app/dashboard/dashboard-tile.component.ts
+++ b/src/app/dashboard/dashboard-tile.component.ts
@@ -169,9 +169,9 @@ export class DashboardTileComponent implements AfterViewChecked, OnInit {
 
 @Component({
   selector: 'planet-dashboard-tile-title',
-  template: `
-    <mat-icon svgIcon={{cardType}}></mat-icon>
-    <span>{{cardTitle}}</span>
+  template: `
+    <mat-icon svgIcon={{cardType}}></mat-icon>
+    <span>{{cardTitle}}</span>
   `,
   styleUrls: [ './dashboard-tile-title.scss' ]
 })
diff --git a/src/app/dashboard/dashboard.component.html b/src/app/dashboard/dashboard.component.html
index d103b66276..7130081deb 100644
--- a/src/app/dashboard/dashboard.component.html
+++ b/src/app/dashboard/dashboard.component.html
@@ -11,10 +11,10 @@
     </a>
     <div class="dashboard-name" style="margin-left: 16px;">
       <a [routerLink]="['/users/profile', user.name]" class="profile-link">
-        <h1 class="mat-title">{{displayName | truncateText:(isMobile ? 20 : 40)}} <span *ngIf="!isLoading">({{visits | number}})</span></h1>
+        <h1 class="mat-headline-6">{{displayName | truncateText:(isMobile ? 20 : 40)}} <span *ngIf="!isLoading">({{visits | number}})</span></h1>
       </a>
-      <h1 class="mat-title">
-        <span class="mat-subheading-2">
+      <h1 class="mat-headline-6">
+        <span class="mat-subtitle-1">
           <ng-container *ngFor="let role of roles; last as last">
             <planet-role [role]="role"></planet-role><span *ngIf="!last">, </span>
           </ng-container>
diff --git a/src/app/dashboard/dashboard.scss b/src/app/dashboard/dashboard.scss
index 99896477d5..68f42b477f 100644
--- a/src/app/dashboard/dashboard.scss
+++ b/src/app/dashboard/dashboard.scss
@@ -50,7 +50,7 @@ $top-row-height: calc(#{$dashboard-tile-width} + 0.5rem);
         display: flex;
         align-items: center;
       }
-      .mat-subheading-2 {
+      .mat-subtitle-1 {
         margin: 0;
       }
       span {
diff --git a/src/app/health/health-update.component.html b/src/app/health/health-update.component.html
index c17ffd1a06..95fdb63117 100644
--- a/src/app/health/health-update.component.html
+++ b/src/app/health/health-update.component.html
@@ -45,7 +45,7 @@
         </mat-form-field>
       </form>
       <form class="form-spacing" [formGroup]="healthForm">
-        <span class="full-width primary-text-color mat-body-2" i18n>Emergency Contact</span>
+        <span class="full-width primary-text-color mat-subtitle-2" i18n>Emergency Contact</span>
         <mat-form-field>
           <input matInput i18n-placeholder placeholder="Name" formControlName="emergencyContactName">
         </mat-form-field>
diff --git a/src/app/manager-dashboard/reports/myplanet/myplanet.scss b/src/app/manager-dashboard/reports/myplanet/myplanet.scss
index 7a0c9a9a74..b248d5fa19 100644
--- a/src/app/manager-dashboard/reports/myplanet/myplanet.scss
+++ b/src/app/manager-dashboard/reports/myplanet/myplanet.scss
@@ -12,7 +12,7 @@ button {
 }
 
 @media(max-width: #{$screen-md}) {
-  .mat-form-field {
+  .mat-mdc-form-field {
     width: 100%;
   }
 
@@ -20,7 +20,7 @@ button {
     form {
       width: 100%;
 
-      .mat-form-field {
+      .mat-mdc-form-field {
         width: 100%;
       }
     }
diff --git a/src/app/manager-dashboard/reports/reports-detail.component.html b/src/app/manager-dashboard/reports/reports-detail.component.html
index ed253e6ffd..c4f4c6ce47 100644
--- a/src/app/manager-dashboard/reports/reports-detail.component.html
+++ b/src/app/manager-dashboard/reports/reports-detail.component.html
@@ -135,7 +135,7 @@
         <canvas id="voicesCreatedChart"></canvas>
         <div class="reports-table-container">
           <div>
-            <h1 class="mat-title" i18n>Members</h1>
+            <h1 class="mat-headline-6" i18n>Members</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Members</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalUsers}}</mat-grid-tile>
@@ -171,7 +171,7 @@ <h1 class="mat-title" i18n>Members</h1>
             </mat-grid-list>
           </div>
           <div>
-            <h1 class="mat-title" i18n>Resources</h1>
+            <h1 class="mat-headline-6" i18n>Resources</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Resources</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalResources}}</mat-grid-tile>
@@ -204,7 +204,7 @@ <h1 class="mat-title" i18n>Resources</h1>
             </mat-grid-list>
           </div>
           <div>
-            <h1 class="mat-title" i18n>Courses</h1>
+            <h1 class="mat-headline-6" i18n>Courses</h1>
             <mat-grid-list cols="2" rowHeight="2rem">
               <mat-grid-tile class="subheading label" i18n>Total Courses</mat-grid-tile>
               <mat-grid-tile>{{reports?.totalCourses}}</mat-grid-tile>
diff --git a/src/app/manager-dashboard/reports/reports-detail.scss b/src/app/manager-dashboard/reports/reports-detail.scss
index 75133d45f0..f990f3d451 100644
--- a/src/app/manager-dashboard/reports/reports-detail.scss
+++ b/src/app/manager-dashboard/reports/reports-detail.scss
@@ -75,7 +75,7 @@ mat-toolbar mat-form-field {
 }
 
 @media(max-width: #{$screen-md}) {
-  .mat-form-field {
+  .mat-mdc-form-field {
     width: 100%;
   }
 
diff --git a/src/app/manager-dashboard/reports/reports-health.component.html b/src/app/manager-dashboard/reports/reports-health.component.html
index b97a3250d1..1f981d60fe 100644
--- a/src/app/manager-dashboard/reports/reports-health.component.html
+++ b/src/app/manager-dashboard/reports/reports-health.component.html
@@ -5,13 +5,13 @@
   <div>
     <span><b i18n>Patients Seen:</b> {{headlineData?.unique.length}}</span>
   </div>
-  <h1 class="mat-title" i18n>Diagnoses</h1>
+  <h1 class="mat-headline-6" i18n>Diagnoses</h1>
   <div>
     <span *ngFor="let condition of conditions">
       <planet-label [label]="condition"></planet-label>: {{headlineData?.conditions[condition]}}
     </span>
   </div>
-  <h1 class="mat-title" i18n>Diagnosis Trend</h1>
+  <h1 class="mat-headline-6" i18n>Diagnosis Trend</h1>
   <div class="trend-filters">
     <span i18n>Select diagnosis to view trend:</span>
     <mat-form-field>
@@ -25,7 +25,7 @@ <h1 class="mat-title" i18n>Diagnosis Trend</h1>
   <div *ngIf="showChart" class="chart-container">
     <canvas id="diagnosesTrend" #diagnosesChart></canvas>
   </div>
-  <h1 class="mat-title" i18n>Weekly Data</h1>
+  <h1 class="mat-headline-6" i18n>Weekly Data</h1>
   <planet-reports-detail-activities
     [activitiesByDoc]="weeklyHealthData"
     activityType="health"
diff --git a/src/app/manager-dashboard/reports/reports.component.ts b/src/app/manager-dashboard/reports/reports.component.ts
index a3dc0bf236..2453c0473d 100644
--- a/src/app/manager-dashboard/reports/reports.component.ts
+++ b/src/app/manager-dashboard/reports/reports.component.ts
@@ -12,10 +12,10 @@ import { trackById } from '../../shared/table-helpers';
 
 @Component({
   templateUrl: './reports.component.html',
-  styles: [ `
-    mat-panel-title {
-      align-items: center;
-    }
+  styles: [ `
+    mat-panel-title {
+      align-items: center;
+    }
   ` ],
   styleUrls: [ './reports.components.scss' ]
 })
diff --git a/src/app/meetups/add-meetups/meetups-add.component.ts b/src/app/meetups/add-meetups/meetups-add.component.ts
index ba8e24a652..cbd1e4c446 100644
--- a/src/app/meetups/add-meetups/meetups-add.component.ts
+++ b/src/app/meetups/add-meetups/meetups-add.component.ts
@@ -24,14 +24,14 @@ import { debounce } from 'rxjs/operators';
 @Component({
   selector: 'planet-meetups-add',
   templateUrl: './meetups-add.component.html',
-  styles: [ `
-    form.form-spacing {
-      width: inherit;
-    }
-    .view-container form {
-      min-width: 385px;
-      max-width: 750px;
-    }
+  styles: [ `
+    form.form-spacing {
+      width: inherit;
+    }
+    .view-container form {
+      min-width: 385px;
+      max-width: 750px;
+    }
   ` ]
 })
 export class MeetupsAddComponent implements OnInit, CanComponentDeactivate {
diff --git a/src/app/meetups/meetups.component.ts b/src/app/meetups/meetups.component.ts
index 33bff97bdb..8cdf121d4d 100644
--- a/src/app/meetups/meetups.component.ts
+++ b/src/app/meetups/meetups.component.ts
@@ -17,15 +17,15 @@ import { findByIdInArray } from '../shared/utils';
 
 @Component({
   templateUrl: './meetups.component.html',
-  styles: [ `
-    /* Column Widths */
-    .mat-column-select {
-      max-width: 44px;
-    }
-    .mat-column-info {
-      max-width: 500px;
-      align-self: flex-start;
-    }
+  styles: [ `
+    /* Column Widths */
+    .mat-column-select {
+      max-width: 44px;
+    }
+    .mat-column-info {
+      max-width: 500px;
+      align-self: flex-start;
+    }
   ` ]
 })
 export class MeetupsComponent implements OnInit, AfterViewInit, OnDestroy {
diff --git a/src/app/page-not-found/page-not-found.component.ts b/src/app/page-not-found/page-not-found.component.ts
index 086051f0c4..ba53b900c4 100644
--- a/src/app/page-not-found/page-not-found.component.ts
+++ b/src/app/page-not-found/page-not-found.component.ts
@@ -3,13 +3,13 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'planet-page-not-found',
   templateUrl: './page-not-found.component.html',
-  styles: [ `
-    :host {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      padding-top: 10vh;
-    }
+  styles: [ `
+    :host {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      padding-top: 10vh;
+    }
   ` ]
 })
 export class PageNotFoundComponent {
diff --git a/src/app/resources/resources-add.component.html b/src/app/resources/resources-add.component.html
index f2c2fce391..822f3ec28d 100644
--- a/src/app/resources/resources-add.component.html
+++ b/src/app/resources/resources-add.component.html
@@ -9,76 +9,91 @@
     <div>
       <form class="form-spacing" [formGroup]="resourceForm" novalidate>
         <mat-form-field>
-          <input matInput i18n-placeholder placeholder="Title" formControlName="title" required>
+          <mat-label i18n>Title</mat-label>
+          <input matInput formControlName="title" required>
           <mat-error><planet-form-error-messages [control]="resourceForm.controls.title"></planet-form-error-messages></mat-error>
         </mat-form-field>
         <mat-form-field>
-          <input matInput  i18n-placeholder placeholder="Author" formControlName="author">
+          <mat-label i18n>Author</mat-label>
+          <input matInput   formControlName="author">
         </mat-form-field>
         <mat-form-field>
-          <input matInput  i18n-placeholder placeholder="Year" formControlName="year">
+          <mat-label i18n>Year</mat-label>
+          <input matInput   formControlName="year">
         </mat-form-field>
         <mat-form-field class="full-width mat-form-field-type-no-underline">
-          <planet-markdown-textbox class="full-width" required="true" i18n-placeholder placeholder="Description" [formControl]="resourceForm.controls.description"></planet-markdown-textbox>
+          <mat-label i18n>Description</mat-label>
+          <planet-markdown-textbox class="full-width" required="true" [formControl]="resourceForm.controls.description"></planet-markdown-textbox>
           <mat-error><planet-form-error-messages [control]="resourceForm.controls.description"></planet-form-error-messages></mat-error>
         </mat-form-field>
         <mat-form-field class="full-width mat-form-field-type-no-underline">
           <planet-tag-input [formControl]="tags" [db]="dbName" i18n-placeholder placeholder="Labels" mode="add"></planet-tag-input>
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Language" formControlName="language">
+          <mat-label i18n>Language</mat-label>
+          <mat-select formControlName="language">
             <mat-option *ngFor="let lang of languages" [value]="lang.name">{{lang.name}}</mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field>
-          <input matInput i18n-placeholder placeholder="Publisher/Attribution" formControlName="publisher">
+          <mat-label i18n>Publisher/Attribution</mat-label>
+          <input matInput formControlName="publisher">
         </mat-form-field>
         <mat-form-field>
-          <input matInput i18n-placeholder placeholder="Link to License" formControlName="linkToLicense">
+          <mat-label i18n>Link to License</mat-label>
+          <input matInput formControlName="linkToLicense">
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Subject(s)" formControlName="subject" multiple required>
+          <mat-label i18n>Subject(s)</mat-label>
+          <mat-select formControlName="subject" multiple required>
             <mat-option *ngFor="let subject of constants.subjectList" [value]="subject.value">{{subject.label}}</mat-option>
           </mat-select>
           <mat-error><planet-form-error-messages [control]="resourceForm.controls.subject"></planet-form-error-messages></mat-error>
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Level(s)" formControlName="level" multiple required>
+          <mat-label i18n>Level(s)</mat-label>
+          <mat-select formControlName="level" multiple required>
             <mat-option *ngFor="let level of constants.levelList" [value]="level.value">{{level.label}}</mat-option>
           </mat-select>
           <mat-error><planet-form-error-messages [control]="resourceForm.controls.level"></planet-form-error-messages></mat-error>
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Open" formControlName="openWith">
+          <mat-label i18n>Open</mat-label>
+          <mat-select formControlName="openWith">
             <mat-option *ngFor="let open of constants.openWith" [value]="open.value">
             {{ open.label }}
             </mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Resource For" formControlName="resourceFor" multiple>
+          <mat-label i18n>Resource For</mat-label>
+          <mat-select formControlName="resourceFor" multiple>
             <mat-option *ngFor="let role of constants.resourceFor" [value]="role.value">{{role.label}}</mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Media" formControlName="medium">
+          <mat-label i18n>Media</mat-label>
+          <mat-select formControlName="medium">
             <mat-option *ngFor="let medium of constants.media" [value]="medium.value">
             {{ medium.label }}
             </mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field>
-          <mat-select i18n-placeholder placeholder="Resource Type" formControlName="resourceType">
+          <mat-label i18n>Resource Type</mat-label>
+          <mat-select formControlName="resourceType">
             <mat-option *ngFor="let type of constants.resourceType" [value]="type.value">
             {{ type.label}}
             </mat-option>
           </mat-select>
         </mat-form-field>
         <mat-form-field>
-          <input matInput i18n-placeholder placeholder="Added By" formControlName="addedBy" readonly>
+          <mat-label i18n>Added By</mat-label>
+          <input matInput formControlName="addedBy" readonly>
         </mat-form-field>
         <mat-form-field>
-          <input type="text" i18n-placeholder placeholder="Open Which File" matInput formControlName="openWhichFile" [matAutocomplete]="auto">
+          <mat-label i18n>Open Which File</mat-label>
+          <input type="text" matInput formControlName="openWhichFile" [matAutocomplete]="auto">
           <mat-autocomplete #auto="matAutocomplete">
             <mat-option *ngFor="let file of filteredZipFiles | async" [value]="file">
               {{file}}
diff --git a/src/app/resources/search-resources/resources-search.scss b/src/app/resources/search-resources/resources-search.scss
index 994ff21c2e..2b6a974b6e 100644
--- a/src/app/resources/search-resources/resources-search.scss
+++ b/src/app/resources/search-resources/resources-search.scss
@@ -15,7 +15,7 @@ planet-resources-search {
     display: grid;
     grid-template-rows: $label-height calc(#{$toolbar-height} - #{$label-height});
 
-    .mat-selection-list {
+    .mat-mdc-selection-list {
       height: calc(#{$toolbar-height} - #{$label-height});
       padding: 0;
       overflow-y: auto;
diff --git a/src/app/shared/dialogs/dialogs-form.component.html b/src/app/shared/dialogs/dialogs-form.component.html
index 9012bf336e..1902aa2989 100644
--- a/src/app/shared/dialogs/dialogs-form.component.html
+++ b/src/app/shared/dialogs/dialogs-form.component.html
@@ -56,7 +56,7 @@ <h1 mat-dialog-title><span><mat-icon>create</mat-icon>{{title}}</span></h1>
       </mat-form-field>
 
       <!-- Textarea -->
-      <mat-form-field *ngIf="field.type === 'markdown'" class="full-width mat-form-field-type-no-underline">
+      <mat-form-field *ngIf="field.type === 'markdown'" class="full-width mat-form-field-type-no-underline" appearance="">
         <planet-markdown-textbox matInput placeholder="{{field.placeholder}}" formControlName="{{field.name}}" [required]="field.required" [imageGroup]="field.imageGroup"></planet-markdown-textbox>
         <mat-error><planet-form-error-messages [control]="modalForm.controls[field.name]"></planet-form-error-messages></mat-error>
       </mat-form-field>
diff --git a/src/app/shared/dialogs/dialogs-submissions.component.ts b/src/app/shared/dialogs/dialogs-submissions.component.ts
index 41a1bf708b..2f8e4eee46 100644
--- a/src/app/shared/dialogs/dialogs-submissions.component.ts
+++ b/src/app/shared/dialogs/dialogs-submissions.component.ts
@@ -3,7 +3,7 @@ import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/leg
 
 @Component({
   template: `
-    <h3 mat-dialog-title i18n class="mat-subheading-2">Review Previous Test Attempts</h3>
+    <h3 mat-dialog-title i18n class="mat-subtitle-1">Review Previous Test Attempts</h3>
     <mat-dialog-content>
       <planet-submissions *ngIf="view==='list'" [isDialog]="true" [parentId]="data.parentId"
         [displayedColumns]="[ 'lastUpdateTime', 'gradeTime', 'grade', 'status' ]" (submissionClick)="showSubmission($event)">
diff --git a/src/app/shared/forms/planet-markdown-textbox.component.ts b/src/app/shared/forms/planet-markdown-textbox.component.ts
index 8a8e2d323e..82eefbea4d 100644
--- a/src/app/shared/forms/planet-markdown-textbox.component.ts
+++ b/src/app/shared/forms/planet-markdown-textbox.component.ts
@@ -3,7 +3,7 @@ import {
 } from '@angular/core';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field';
+import { MatFormFieldControl } from '@angular/material/form-field';
 import { Subject } from 'rxjs';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { DialogsImagesComponent } from '../dialogs/dialogs-images.component';
diff --git a/src/app/shared/forms/planet-rating-stars.component.ts b/src/app/shared/forms/planet-rating-stars.component.ts
index 657f13d293..8a741ab903 100644
--- a/src/app/shared/forms/planet-rating-stars.component.ts
+++ b/src/app/shared/forms/planet-rating-stars.component.ts
@@ -1,6 +1,6 @@
 import { Component, HostBinding, Input, OnDestroy, Optional, Self } from '@angular/core';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
-import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field';
+import { MatFormFieldControl } from '@angular/material/form-field';
 import { Subject } from 'rxjs';
 import { ControlValueAccessor, NgControl } from '@angular/forms';
 import { UserService } from '../user.service';
@@ -8,13 +8,13 @@ import { UserService } from '../user.service';
 @Component({
   selector: 'planet-rating-stars',
   templateUrl: './planet-rating-stars.component.html',
-  styles: [ `
-    .stars mat-icon {
-      cursor: default;
-    }
-    .stars.stars-enabled mat-icon {
-      cursor: pointer;
-    }
+  styles: [ `
+    .stars mat-icon {
+      cursor: default;
+    }
+    .stars.stars-enabled mat-icon {
+      cursor: pointer;
+    }
   ` ],
   providers: [
     { provide: MatFormFieldControl, useExisting: PlanetRatingStarsComponent }
diff --git a/src/app/shared/forms/planet-tag-input-dialog.component.html b/src/app/shared/forms/planet-tag-input-dialog.component.html
index 0f72c8b71b..3977920cd1 100644
--- a/src/app/shared/forms/planet-tag-input-dialog.component.html
+++ b/src/app/shared/forms/planet-tag-input-dialog.component.html
@@ -19,7 +19,7 @@
         <mat-select i18n-placeholder placeholder="Subcollection of..." formControlName="attachedTo">
           <mat-option i18n>None</mat-option>
           <mat-option *ngFor="let tag of tags" [value]="tag._id || tag.name">
-            <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+            <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
             <span class="count">({{ tag.count || 0 }})</span>
           </mat-option>
         </mat-select>
@@ -32,7 +32,7 @@
       <mat-list-item (click)="tag.subTags.length === 0 ? tagChange(tag._id || tag.name) : toggleSubcollection($event, tag._id)" class="cursor-pointer list-item-spacing">
         <planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)" class="icon-spacing"></planet-tag-input-toggle-icon>
         <mat-checkbox *ngIf="tag.subTags.length === 0" (change)="checkboxChange($event, tag._id || tag.name)" [checked]="isInMap(tag._id || tag.name, selected)" [indeterminate]="isInMap(tag._id || tag.name, indeterminate)" class="checkbox-spacing"></mat-checkbox>
-        <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+        <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
         <span class="count">({{ tag.count || 0 }})</span>
         <span class="toolbar-fill"></span>
         <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event, tag)" i18n class="button-spacing">Edit</button>
@@ -44,7 +44,7 @@
         <mat-list-item *ngFor="let subTag of tag.subTags" (click)="tagChange(subTag._id || subTag.name, { parentTag: tag })" class="cursor-pointer list-item-spacing">
           <mat-icon mat-list-icon class="icon-spacing">subdirectory_arrow_right</mat-icon>
           <mat-checkbox (change)="checkboxChange($event, subTag._id || subTag.name)" [checked]="isInMap(subTag._id || subTag.name, selected)" [indeterminate]="isInMap(subTag._id || subTag.name, indeterminate)" class="checkbox-spacing"></mat-checkbox>
-          <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+          <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
           <span class="count">({{ tag.count || 0 }})</span>
           <span class="toolbar-fill"></span>
           <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event, subTag)" i18n class="button-spacing">Edit</button>
@@ -58,7 +58,7 @@
     <mat-list-item (click)="selectOne('')" i18n>All</mat-list-item>
     <ng-container *ngFor="let tag of tags">
       <mat-list-item class="tag-text" (click)="tag.subTags.length === 0 ? selectOne(tag._id || tag.name) : toggleSubcollection($event, tag._id)" [ngClass]="{ 'mat-body-2': tag.subTags.length > 0 }">
-        <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+        <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
         <span class="count">({{ tag.count || 0 }})</span>
         <planet-tag-input-toggle-icon *ngIf="tag.subTags.length > 0" [isOpen]="subcollectionIsOpen.get(tag._id)"></planet-tag-input-toggle-icon>
         <span class="toolbar-fill"></span>
@@ -70,7 +70,7 @@
       <ng-container *ngIf="subcollectionIsOpen.get(tag._id)">
         <mat-list-item *ngFor="let subTag of tag.subTags" (click)="selectOne(subTag._id || subTag.name)">
           <mat-icon>subdirectory_arrow_right</mat-icon>
-          <span class="ellipsis-text mat-body-2">{{ tag.name }}</span>
+          <span class="ellipsis-text mat-subtitle-2">{{ tag.name }}</span>
           <span class="count">({{ tag.count || 0 }})</span>
           <span class="toolbar-fill"></span>
           <button mat-stroked-button *ngIf="isUserAdmin" (click)="editTagClick($event,subTag)" i18n>Edit</button>
diff --git a/src/app/shared/forms/planet-tag-input.component.ts b/src/app/shared/forms/planet-tag-input.component.ts
index c4fc0ec9cd..862bfeafd5 100644
--- a/src/app/shared/forms/planet-tag-input.component.ts
+++ b/src/app/shared/forms/planet-tag-input.component.ts
@@ -4,7 +4,7 @@ import {
 import { Router, ActivatedRoute } from '@angular/router';
 import { ControlValueAccessor, NgControl, UntypedFormControl } from '@angular/forms';
 import { MatLegacyDialog as MatDialog, MatLegacyDialogRef as MatDialogRef } from '@angular/material/legacy-dialog';
-import { MatLegacyFormFieldControl as MatFormFieldControl } from '@angular/material/legacy-form-field';
+import { MatFormFieldControl } from '@angular/material/form-field';
 import { FocusMonitor } from '@angular/cdk/a11y';
 import { coerceBooleanProperty } from '@angular/cdk/coercion';
 import { Subject } from 'rxjs';
diff --git a/src/app/shared/material.module.ts b/src/app/shared/material.module.ts
index bb0a060e61..74ad7ffd03 100644
--- a/src/app/shared/material.module.ts
+++ b/src/app/shared/material.module.ts
@@ -1,6 +1,6 @@
 import { NgModule, Injectable } from '@angular/core';
 import { DragDropModule } from '@angular/cdk/drag-drop';
-import { MatLegacyAutocompleteModule as MatAutocompleteModule } from '@angular/material/legacy-autocomplete';
+import { MatAutocompleteModule } from '@angular/material/autocomplete';
 import { MatBadgeModule } from '@angular/material/badge';
 import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
 import { MatButtonToggleModule } from '@angular/material/button-toggle';
@@ -10,17 +10,17 @@ import { MatLegacyChipsModule as MatChipsModule } from '@angular/material/legacy
 import { MatNativeDateModule, DateAdapter, NativeDateAdapter } from '@angular/material/core';
 import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
 import { MatExpansionModule } from '@angular/material/expansion';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
+import { MatFormFieldModule } from '@angular/material/form-field';
 import { MatGridListModule } from '@angular/material/grid-list';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
+import { MatInputModule } from '@angular/material/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 { MatSelectModule } from '@angular/material/select';
 import { MatSidenavModule } from '@angular/material/sidenav';
 import { MatLegacySlideToggleModule as MatSlideToggleModule } from '@angular/material/legacy-slide-toggle';
 import { MatLegacySnackBarModule as MatSnackBarModule } from '@angular/material/legacy-snack-bar';
diff --git a/src/app/shared/planet-filtered-amount.component.ts b/src/app/shared/planet-filtered-amount.component.ts
index dccd0fb130..7abdb28bb0 100644
--- a/src/app/shared/planet-filtered-amount.component.ts
+++ b/src/app/shared/planet-filtered-amount.component.ts
@@ -3,13 +3,13 @@ import { MatLegacyTableDataSource as MatTableDataSource } from '@angular/materia
 
 @Component({
   template:  `
-    <span class="margin-lr-5"><ng-container i18n>Showing {{table.filteredData.length}} of {{table.data.length}} </ng-container>
-      <ng-container i18n>{labelFor, select,
-        resources {{table.data.length, plural, =0 {resources} =1 {resource} other {resources}}}
-        courses {{table.data.length, plural, =0 {courses} =1 {course} other {courses}}}
-      }</ng-container>
-    </span>
-  `,
+     <span class="margin-lr-5"><ng-container i18n>Showing {{table.filteredData.length}} of {{table.data.length}} </ng-container>
+       <ng-container i18n>{labelFor, select,
+         resources {{table.data.length, plural, =0 {resources} =1 {resource} other {resources}}}
+         courses {{table.data.length, plural, =0 {courses} =1 {course} other {courses}}}
+       }</ng-container>
+     </span>
+   `,
   selector: 'planet-filtered-amount'
 })
 export class FilteredAmountComponent {
diff --git a/src/app/teams/teams-reports-dialog.component.html b/src/app/teams/teams-reports-dialog.component.html
index e2d00fd271..10a0180374 100644
--- a/src/app/teams/teams-reports-dialog.component.html
+++ b/src/app/teams/teams-reports-dialog.component.html
@@ -1,6 +1,6 @@
 <div mat-dialog-header>
   <h3>{{teamName}} <ng-container i18n>Financial Report</ng-container></h3>
-  <p class="mat-subheading-1">{{ report.startDate | date : 'mediumDate' : '+0000' }} - {{ report.endDate | date : 'mediumDate' : '+0000' }}</p>
+  <p class="mat-body-1">{{ report.startDate | date : 'mediumDate' : '+0000' }} - {{ report.endDate | date : 'mediumDate' : '+0000' }}</p>
 </div>
 <mat-dialog-content>
   <planet-teams-reports-detail [report]="report" [showSummary]="true"></planet-teams-reports-detail>
diff --git a/src/app/teams/teams-reports-dialog.component.ts b/src/app/teams/teams-reports-dialog.component.ts
index 5ea3b617a1..2e1a8bf4bc 100644
--- a/src/app/teams/teams-reports-dialog.component.ts
+++ b/src/app/teams/teams-reports-dialog.component.ts
@@ -7,7 +7,7 @@ import { MAT_LEGACY_DIALOG_DATA as MAT_DIALOG_DATA } from '@angular/material/leg
     h3 {
       margin-bottom: 0;
     }
-    .mat-subheading-1 {
+    .mat-body-1 {
       margin-top: 0;
     }
   ` ]
diff --git a/src/app/teams/teams-view.component.html b/src/app/teams/teams-view.component.html
index 26d490641f..86522827f2 100644
--- a/src/app/teams/teams-view.component.html
+++ b/src/app/teams/teams-view.component.html
@@ -78,11 +78,11 @@ <h3 *ngIf="mode==='services'" class="margin-lr-3 ellipsis-title">{{configuration
           { mode, select, team {Plan} enterprise {Mission & Services} services {Services} }
         </ng-template>
         <ng-container *ngIf="(team?.description || team?.services || team?.rules); else emptyText">
-          <div class="mat-title" *ngIf="team?.description && mode === 'enterprise'" i18n>What is your enterprise's Mission?</div>
+          <div class="mat-headline-6" *ngIf="team?.description && mode === 'enterprise'" i18n>What is your enterprise's Mission?</div>
           <td-markdown [content]="team.description"></td-markdown>
-          <div class="mat-title" *ngIf="team?.services" i18n>What are the Services your enterprise provides?</div>
+          <div class="mat-headline-6" *ngIf="team?.services" i18n>What are the Services your enterprise provides?</div>
           <td-markdown [content]="team.services"></td-markdown>
-          <div class="mat-title" *ngIf="team?.rules" i18n>What are the Rules of your enterprise?</div>
+          <div class="mat-headline-6" *ngIf="team?.rules" i18n>What are the Rules of your enterprise?</div>
           <td-markdown [content]="team.rules"></td-markdown>
         </ng-container>
         <ng-template #emptyText>
@@ -179,7 +179,7 @@ <h4 i18n>Members ({{members.length}})</h4>
           <ng-template #resourceList>
             <div class="card-grid">
               <mat-card *ngFor="let resource of resources" (click)="resource.resource._attachments ? openResource(resource.resource._id) : false" i18n-matTooltip matTooltip="There is no content for this resource" [matTooltipDisabled]="resource.resource._attachments" [ngClass]="{'cursor-pointer': resource.resource._attachments}">
-                <div class="mat-subheading-2">
+                <div class="mat-subtitle-1">
                   <span *ngIf="resource.resource!==undefined">
                     <b>{{resource.resource.title | truncateText:75}}</b>
                   </span>
@@ -216,7 +216,7 @@ <h4 i18n>Members ({{members.length}})</h4>
           <ng-template #courseList>
             <div class="card-grid">
               <mat-card *ngFor="let course of team?.courses" (click)="openCourseView(course._id)" class="cursor-pointer">
-                <div class="mat-subheading-2">
+                <div class="mat-subtitle-1">
                   <b>{{course.courseTitle | truncateText:75}}</b>
                 </div>
                 <mat-card-content>
diff --git a/src/app/teams/teams-view.scss b/src/app/teams/teams-view.scss
index 7d30ba08f9..c452279d6f 100644
--- a/src/app/teams/teams-view.scss
+++ b/src/app/teams/teams-view.scss
@@ -43,7 +43,7 @@
     margin: 0;
   }
 
-  .mat-subheading-2 b {
+  .mat-subtitle-1 b {
     display: inline-block;
     max-width: 100%;
     white-space: nowrap;
diff --git a/src/app/users/users.component.ts b/src/app/users/users.component.ts
index 50548fb4e3..909b9d21f1 100644
--- a/src/app/users/users.component.ts
+++ b/src/app/users/users.component.ts
@@ -15,15 +15,15 @@ import { DeviceInfoService, DeviceType } from '../shared/device-info.service';
 @Component({
   selector: 'planet-users',
   templateUrl: './users.component.html',
-  styles: [ `
-    /* Column Widths */
-    .mat-column-select {
-      max-width: 44px;
-    }
-
-    .mat-column-profile {
-      max-width: 100px;
-    }
+  styles: [ `
+    /* Column Widths */
+    .mat-column-select {
+      max-width: 44px;
+    }
+
+    .mat-column-profile {
+      max-width: 100px;
+    }
   ` ]
 })
 export class UsersComponent implements OnInit, OnDestroy {
diff --git a/src/planet-mat-theme.scss b/src/planet-mat-theme.scss
index f38398d6cd..95b8e1b6a5 100644
--- a/src/planet-mat-theme.scss
+++ b/src/planet-mat-theme.scss
@@ -12,13 +12,20 @@
 //  If you specify typography styles for the components you use elsewhere, you should delete this line.
 //  If you don't need the default component typographies but still want the hierarchy styles,
 //  you can delete this line and instead use:
-//    `@include mat.legacy-typography-hierarchy(mat.define-legacy-typography-config());`
+//    `@include mat.legacy-typography-hierarchy(mat.define-typography-config());`
+/* TODO(mdc-migration): Remove all-legacy-component-typographies once all legacy components are migrated*/
 @include mat.all-legacy-component-typographies();
-@include mat.legacy-core();
+@include mat.all-component-typographies();
+/* TODO(mdc-migration): Remove legacy-core once all legacy components are migrated*/
+@include mat.legacy-core();
+@include mat.core();
 @import './app/_variables';
 
+/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
 @include mat.all-legacy-component-themes($planet-app-theme);
 
+@include mat.all-component-themes($planet-app-theme);
+
 // Create sub-themes for the different sections which change the accent color.
 $accent-map: (
   library: mat.define-palette(mat.$pink-palette, $accent-hue),
@@ -30,8 +37,10 @@ $accent-map: (
 @each $section in library, courses, meetups, teams {
   $accent-palette: map-get($accent-map, #{$section});
   $theme: mat.define-light-theme($planet-app-primary, $accent-palette, $planet-app-warn);
-  .planet-#{$section}-theme {
+  .planet-#{$section}-theme {
+    /* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
     @include mat.all-legacy-component-themes($theme);
+    @include mat.all-component-themes($theme);
 
     .accent-color {
       background-color: mat.get-color-from-palette($accent-palette, $accent-hue);
diff --git a/src/styles.scss b/src/styles.scss
index 75c573c212..30270b06ea 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -348,11 +348,12 @@ body {
     margin: 10px;
   }
 
-  // Remove the underline from mat-form-field for custom fields
+  // Remove the underline from mat-form-field for custom fields
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
   .mat-form-field-type-no-underline .mat-form-field-underline {
     display: none;
-  }
-
+  }
+  /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
   .mat-form-field-dynamic-width .mat-form-field-infix {
     width: auto;
   }
@@ -439,7 +440,7 @@ body {
 
   mat-toolbar:first-child > mat-form-field,
   mat-toolbar:first-child > planet-selector,
-  .mat-toolbar form .mat-form-field,
+  .mat-toolbar form .mat-mdc-form-field,
   .input-icon {
     margin-top: 10px;
     &.mat-form-field-type-no-underline {
@@ -471,10 +472,12 @@ body {
     }
   }
 
-  .collections-search {
+  .collections-search {
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
     .mat-form-field-wrapper {
       padding: 0;
-    }
+    }
+    /* TODO(mdc-migration): The following rule targets internal classes of form-field that may no longer apply for the MDC version.*/
     .mat-form-field-infix {
       border: 0;
     }
@@ -521,7 +524,7 @@ body {
     }
   }
 
-  .mat-input-element[readonly]{
+  .mat-mdc-input-element[readonly]{
     color: $grey;
   }