diff --git a/pdb-js/src/app/app.module.ts b/pdb-js/src/app/app.module.ts
index c440096..48d8c27 100644
--- a/pdb-js/src/app/app.module.ts
+++ b/pdb-js/src/app/app.module.ts
@@ -11,17 +11,17 @@ import { HelpPageComponent } from './help-page/help-page.component';
 import { UploadPageComponent } from './upload-page/upload-page.component';
 import { VisualizationPageComponent } from './visualization-page/visualization-page.component';
 
-import {MatLegacyAutocompleteModule as MatAutocompleteModule} from '@angular/material/legacy-autocomplete';
-import {MatLegacyButtonModule as MatButtonModule} from '@angular/material/legacy-button';
-import {MatLegacyCheckboxModule as MatCheckboxModule} from '@angular/material/legacy-checkbox';
-import {MatLegacySelectModule as MatSelectModule} from '@angular/material/legacy-select';
-import { MatLegacyFormFieldModule as MatFormFieldModule } from '@angular/material/legacy-form-field';
-import { MatLegacyInputModule as MatInputModule } from '@angular/material/legacy-input';
-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 {MatLegacySnackBarModule as MatSnackBarModule} from '@angular/material/legacy-snack-bar';
-import {MatLegacyTooltipModule as MatTooltipModule} from '@angular/material/legacy-tooltip';
+import {MatAutocompleteModule} from '@angular/material/autocomplete';
+import {MatButtonModule} from '@angular/material/button';
+import {MatCheckboxModule} from '@angular/material/checkbox';
+import {MatSelectModule} from '@angular/material/select';
+import { MatFormFieldModule } from '@angular/material/form-field';
+import { MatInputModule } from '@angular/material/input';
+import {MatProgressBarModule} from '@angular/material/progress-bar';
+import {MatProgressSpinnerModule} from '@angular/material/progress-spinner';
+import {MatRadioModule} from '@angular/material/radio';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {MatTooltipModule} from '@angular/material/tooltip';
 import { YAxisDefinitionComponent } from './y-axis-definition/y-axis-definition.component';
 import { QueryAutocompleteComponent } from './query-autocomplete/query-autocomplete.component';
 import { LimitByComponent } from './limit-by/limit-by.component';
diff --git a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
index d55558b..e3f37f3 100644
--- a/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
+++ b/pdb-js/src/app/dashboard-page/dashboard/dashboard.component.ts
@@ -2,7 +2,7 @@ import { CdkDragDrop, moveItemInArray, transferArrayItem } from '@angular/cdk/dr
 import { HttpErrorResponse } from '@angular/common/http';
 import { Component, ElementRef, OnInit } from '@angular/core';
 import { MatDialog } from '@angular/material/dialog';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { ActivatedRoute } from '@angular/router';
 import { BaseWidget, Dashboard, DashboardService, PlotSize, PlotWidget, PlotWidgetRenderData, TextWidget } from 'src/app/dashboard.service';
 import { PlotConfig, PlotRequest, PlotResponse, PlotService, RenderOptions } from 'src/app/plot.service';
diff --git a/pdb-js/src/app/gallery-view/gallery-view.component.ts b/pdb-js/src/app/gallery-view/gallery-view.component.ts
index 311fb75..74d20fb 100644
--- a/pdb-js/src/app/gallery-view/gallery-view.component.ts
+++ b/pdb-js/src/app/gallery-view/gallery-view.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnInit, Input, Output, ViewChild, EventEmitter } from '@angular/core';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { PlotService, PlotRequest, PlotResponse, PlotResponseStats, DashTypeAndColor, RenderedImages  } from '../plot.service';
 import { UtilService } from '../utils.service';
 
diff --git a/pdb-js/src/app/limit-by/limit-by.component.html b/pdb-js/src/app/limit-by/limit-by.component.html
index 7cc5cc6..5ba3622 100644
--- a/pdb-js/src/app/limit-by/limit-by.component.html
+++ b/pdb-js/src/app/limit-by/limit-by.component.html
@@ -1,3 +1,9 @@
+<style>
+  :host {
+    display: flex;
+  }
+</style>
+
 <mat-form-field class="pdb-form-mid">
   <mat-label>Limit By:</mat-label>
   <mat-select [(value)]="limitBy">
diff --git a/pdb-js/src/app/plot-view/plot-view.component.ts b/pdb-js/src/app/plot-view/plot-view.component.ts
index 230a906..3998fe2 100644
--- a/pdb-js/src/app/plot-view/plot-view.component.ts
+++ b/pdb-js/src/app/plot-view/plot-view.component.ts
@@ -1,6 +1,6 @@
 import { Component, OnInit, Output, EventEmitter } from '@angular/core';
 import { DataType, AxesTypes, PlotResponseStats, PlotConfig, PlotService, PlotResponse, PlotRequest, RenderOptions  } from '../plot.service';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import * as moment from 'moment';
 import { WidgetDimensions } from '../dashboard.service';
 
diff --git a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.scss b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.scss
index 379d31f..49db944 100644
--- a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.scss
+++ b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.scss
@@ -4,5 +4,6 @@
   border-radius: 5px;
   box-sizing: border-box;
   padding: 5px;
+  width: 100%;
 }
 
diff --git a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts
index 240e478..69a8e4a 100644
--- a/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts
+++ b/pdb-js/src/app/query-autocomplete/query-autocomplete.component.ts
@@ -2,7 +2,7 @@ import { Component, OnInit, Input, ViewChild } from '@angular/core';
 import {UntypedFormControl} from '@angular/forms';
 import {Observable} from 'rxjs';
 import {startWith, map} from 'rxjs/operators';
-import {MatLegacyAutocompleteTrigger as MatAutocompleteTrigger } from '@angular/material/legacy-autocomplete';
+import {MatAutocompleteTrigger } from '@angular/material/autocomplete';
 import { PlotService, PlotType, AutocompleteResult, Suggestion, ResultMode } from '../plot.service';
 
 @Component({
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.html b/pdb-js/src/app/visualization-page/visualization-page.component.html
index 1e99ce4..91c9c30 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.html
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.html
@@ -4,7 +4,7 @@
   </div>
   
   <div id="date-box">
-    <mat-form-field>
+    <mat-form-field class="pdb-form-full-width">
         <mat-label>Date Range:</mat-label>
         <input matInput id="search-date-range" value="dateRange" name="dates" />
       </mat-form-field>
@@ -14,16 +14,16 @@
     <div id="filterpanel">
       
 
-      <mat-form-field>
+      <mat-form-field class="pdb-form-full-width">
         <mat-label>Type:</mat-label>
-        <mat-select multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)">
+        <mat-select  multiple [(ngModel)]="selectedPlotType" (ngModelChange)="changePlotType($event)">
           <mat-option *ngFor="let plotType of plotTypes" [value]="plotType" [disabled]="!plotType.active">
             <img src="assets/img/{{plotType.icon}}.svg" class="icon-select" /> {{plotType.name}}
           </mat-option>
         </mat-select>
       </mat-form-field>
     
-      <mat-form-field>
+      <mat-form-field class="pdb-form-full-width">
         <mat-label>Group By:</mat-label>
         <mat-select multiple [(value)]="groupBy">
           <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
@@ -54,7 +54,7 @@
      
      <mat-checkbox [(ngModel)]="enableGallery">Gallery</mat-checkbox>
      
-     <mat-form-field *ngIf="enableGallery">
+     <mat-form-field *ngIf="enableGallery" class="pdb-form-full-width">
         <mat-label>Split By:</mat-label>
         <mat-select [(value)]="splitBy">
           <mat-option *ngFor="let tagField of tagFields" [value]="tagField">{{tagField.name}}</mat-option>
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.scss b/pdb-js/src/app/visualization-page/visualization-page.component.scss
index 6a1192a..7bda29b 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.scss
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.scss
@@ -15,7 +15,7 @@
     grid:
       "query-box query-box date-box" auto 
       "filters results results" 1fr
-      / 17.7em 3fr 21em;
+      / 25.5em 3fr 24em;
   }
 }
 
@@ -43,9 +43,12 @@
 
 #date-box{
   grid-area: date-box;
-  margin-right: 1em;
 }
 
+
+
+
+
 #filters {
   grid-area: filters;
   overflow: auto;
diff --git a/pdb-js/src/app/visualization-page/visualization-page.component.ts b/pdb-js/src/app/visualization-page/visualization-page.component.ts
index c5d259d..b47b543 100644
--- a/pdb-js/src/app/visualization-page/visualization-page.component.ts
+++ b/pdb-js/src/app/visualization-page/visualization-page.component.ts
@@ -1,7 +1,7 @@
 import { Component, OnInit, ViewChild } from '@angular/core';
 import { PlotService, PlotType, PlotRequest, PlotResponse, TagField, FilterDefaults, DataType, YAxisDefinition, AxesTypes, PlotConfig, RenderOptions, RenderOptionsMap  } from '../plot.service';
 import { UntypedFormControl, Validators } from '@angular/forms';
-import { MatLegacySnackBar as MatSnackBar } from '@angular/material/legacy-snack-bar';
+import { MatSnackBar } from '@angular/material/snack-bar';
 import { LimitByComponent } from '../limit-by/limit-by.component';
 import { YAxisDefinitionComponent } from '../y-axis-definition/y-axis-definition.component';
 import { QueryAutocompleteComponent } from '../query-autocomplete/query-autocomplete.component';
diff --git a/pdb-js/src/app/y-axis-definition/y-axis-definition.component.html b/pdb-js/src/app/y-axis-definition/y-axis-definition.component.html
index 4dad18b..406b51c 100644
--- a/pdb-js/src/app/y-axis-definition/y-axis-definition.component.html
+++ b/pdb-js/src/app/y-axis-definition/y-axis-definition.component.html
@@ -1,5 +1,5 @@
 <div>
-    <mat-form-field>
+    <mat-form-field >
       <mat-label>Y{{yIndex}}-Axis Scale:</mat-label>
       <mat-select [(value)]="yAxisScale">
         <mat-option value="LOG10">Logarithm</mat-option>
@@ -7,27 +7,31 @@
       </mat-select>
     </mat-form-field>
 
-   <mat-form-field class="pdb-form-mid">
-    <mat-label>Y{{yIndex}}-Axis Unit:</mat-label>
-    <mat-select [(value)]="yAxisUnit">
-      <mat-optgroup label="⸺numbers⸺">
-        <mat-option value="AUTOMATIC_NUMBER">auto (number)</mat-option>
-        <mat-option value="NO_UNIT">no unit</mat-option>
-      </mat-optgroup>
-      <mat-optgroup label="⸺time⸺">
-        <mat-option value="AUTOMATIC_TIME">auto (time)</mat-option>
-        <mat-option value="MILLISECONDS">millis</mat-option>
-        <mat-option value="SECONDS">seconds</mat-option>
-        <mat-option value="MINUTES">minutes</mat-option>
-        <mat-option value="HOURS">hours</mat-option>
-        <mat-option value="DAYS">days</mat-option>
-      </mat-optgroup>
-    </mat-select>
-  </mat-form-field>
-  <mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC_TIME' && yAxisUnit !== 'AUTOMATIC_NUMBER'" class="pdb-form-number">
-    <input matInput type="number" placeholder="Min" min="0" [(ngModel)]="minYValue">
-  </mat-form-field>
-  <mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC_TIME' && yAxisUnit !== 'AUTOMATIC_NUMBER'" class="pdb-form-number">
-    <input matInput type="number" placeholder="Max" min="0" [(ngModel)]="maxYValue">
-  </mat-form-field>
+    <div>
+      <mat-form-field class="pdb-form-mid">
+        <mat-label>Y{{yIndex}}-Axis Unit:</mat-label>
+        <mat-select [(value)]="yAxisUnit">
+          <mat-optgroup label="⸺numbers⸺">
+            <mat-option value="AUTOMATIC_NUMBER">auto (number)</mat-option>
+            <mat-option value="NO_UNIT">no unit</mat-option>
+          </mat-optgroup>
+          <mat-optgroup label="⸺time⸺">
+            <mat-option value="AUTOMATIC_TIME">auto (time)</mat-option>
+            <mat-option value="MILLISECONDS">millis</mat-option>
+            <mat-option value="SECONDS">seconds</mat-option>
+            <mat-option value="MINUTES">minutes</mat-option>
+            <mat-option value="HOURS">hours</mat-option>
+            <mat-option value="DAYS">days</mat-option>
+          </mat-optgroup>
+        </mat-select>
+      </mat-form-field>
+      <mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC_TIME' && yAxisUnit !== 'AUTOMATIC_NUMBER'" class="pdb-form-number">
+        <mat-label>Min:</mat-label>
+        <input matInput type="number" placeholder="Min" min="0" [(ngModel)]="minYValue">
+      </mat-form-field>
+      <mat-form-field *ngIf="yAxisUnit !== 'AUTOMATIC_TIME' && yAxisUnit !== 'AUTOMATIC_NUMBER'" class="pdb-form-number">
+        <mat-label>Max:</mat-label>
+        <input matInput type="number" placeholder="Max" min="0" [(ngModel)]="maxYValue">
+      </mat-form-field>
+    </div>
 </div>
diff --git a/pdb-js/src/styles.scss b/pdb-js/src/styles.scss
index ddda4ea..e29cb08 100644
--- a/pdb-js/src/styles.scss
+++ b/pdb-js/src/styles.scss
@@ -13,9 +13,13 @@
 //  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.all-component-typographies();
+/* TODO(mdc-migration): Remove legacy-core once all legacy components are migrated*/
 @include mat.legacy-core();
+@include mat.core();
 
 // Define the palettes for your theme using the Material Design palettes available in palette.scss
 // (imported above). For each palette, you can optionally specify a default, lighter, and darker
@@ -33,13 +37,17 @@ $candy-app-theme: mat.define-light-theme((
     primary: $candy-app-primary,
     accent: $candy-app-accent,
     warn: $candy-app-warn,
-  )
+  ),
+  //typography: mat.define-typography-config(),
+  density: -1,
 ));
 
 // Include theme styles for core and each component used in your app.
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
+/* TODO(mdc-migration): Remove all-legacy-component-themes once all legacy components are migrated*/
 @include mat.all-legacy-component-themes($candy-app-theme);
+@include mat.all-component-themes($candy-app-theme);
 
 
 
@@ -63,6 +71,14 @@ grey
 */
 $background-color: #CBD7F4;
 
+.mat-mdc-option span.mdc-list-item__primary-text,
+.mdc-list-item__primary-text {
+  font-size: 1rem;
+}
+mat-form-field .mat-mdc-option span.mdc-list-item__primary-text{
+  --mdc-typography-subtitle1-font-size: 14px;
+}
+
 *, body {
   font-family: Arial;
   font-size: 14px;
@@ -86,9 +102,6 @@ h2 {
   height: 1em;
   vertical-align: text-bottom;
 }
-.mat-button .mat-button-wrapper .icon-inline {
-  vertical-align: text-top;
-}
 
 button[disabled] .icon-inline {
   opacity: 0.5;
@@ -128,18 +141,8 @@ button[disabled] .icon-inline {
   height: 1.5em;
   vertical-align: text-bottom;
 }
-.mat-option-disabled .icon-select {
-  opacity: 0.25;
-}
 
-mat-option.mat-option {
-  height: 2em;
-  line-height: 2em;
-}
 
-mat-option.mat-option.mat-active {
-  background-color: #ccc; 
-}
 
 a ,a:visited {
   color: blue;
@@ -169,34 +172,24 @@ a.external-link:after {
   right: 0;
 }
 
-body .mat-select-panel, body .mat-autocomplete-panel {
-  max-height: 300px;
-}
-
-mat-form-field {
+mat-form-field.pdb-form-full-width {
   width: 100%;
-  margin-right: 1ex;
-}
-mat-form-field:last-child {
-  margin-right: 0ex;
 }
 mat-form-field.pdb-form-number {
-  width: 3.5em;
+  width: 5.5em;
 }
 mat-form-field.pdb-form-number-long {
   width: 7em;
 }
-.pdb-form-icon-small {
-  display: inline-block;
-  width: 2em;
-  vertical-align: middle;
-}
 mat-form-field.pdb-form-mid {
-  width: 7.5em;
+  width: 9.5em;
 }
 mat-form-field.pdb-form-wide {
   width: 10em;
 }
+.mat-mdc-form-field-subscript-wrapper  {
+  display: none;
+}
 
 .errorPanel {
   padding: 1ex;