diff --git a/src/app/app.component.scss b/src/app/app.component.scss
index ac4ec09c5..4ccb5ec6e 100644
--- a/src/app/app.component.scss
+++ b/src/app/app.component.scss
@@ -44,9 +44,10 @@ height: calc( 100% - #{$header-height-mobile} )!important;
       }
 }
 
+/*TODO(mdc-migration): The following rule targets internal classes of tooltip that may no longer apply for the MDC version.*/
 ::ng-deep .mat-tooltip-hide { display: none!important; } // temporary fix (https://github.com/angular/components/issues/24614)
 
-::ng-deep .mat-form-field-suffix {
+::ng-deep .mat-mdc-form-field-icon-suffix {
   ::ng-deep mat-icon  {
     width: auto !important;
     height: -webkit-fill-available !important;
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 65d1ac192..feafaead6 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -34,9 +34,9 @@ import { FooterModule } from './pages/footer/footer.module';
 import { ServiceWorkerModule } from '@angular/service-worker';
 
 import {
-  MAT_LEGACY_TOOLTIP_DEFAULT_OPTIONS as MAT_TOOLTIP_DEFAULT_OPTIONS,
-  MatLegacyTooltipDefaultOptions as MatTooltipDefaultOptions
-} from '@angular/material/legacy-tooltip';
+  MAT_TOOLTIP_DEFAULT_OPTIONS,
+  MatTooltipDefaultOptions
+} from '@angular/material/tooltip';
 import { concatMap, first } from 'rxjs';
 
 export const defaultTooltipOptions: MatTooltipDefaultOptions = {
diff --git a/src/app/pages/portal/expansion-panel/expansion-panel.module.ts b/src/app/pages/portal/expansion-panel/expansion-panel.module.ts
index 017288552..35b1952db 100644
--- a/src/app/pages/portal/expansion-panel/expansion-panel.module.ts
+++ b/src/app/pages/portal/expansion-panel/expansion-panel.module.ts
@@ -1,18 +1,18 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyListModule as MatListModule } from '@angular/material/legacy-list';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacySelectModule as MatSelectModule } from '@angular/material/legacy-select';
+import { MatListModule } from '@angular/material/list';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatSelectModule } from '@angular/material/select';
 
 import { IgoLanguageModule } from '@igo2/core';
 import { IgoBackdropModule } from '@igo2/common';
 
 import { ExpansionPanelComponent } from './expansion-panel.component';
 import { ExpansionPanelHeaderComponent } from './expansion-panel-header.component';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 @NgModule({
   imports: [
diff --git a/src/app/pages/portal/portal.component.html b/src/app/pages/portal/portal.component.html
index 1a31accc7..bda419efa 100644
--- a/src/app/pages/portal/portal.component.html
+++ b/src/app/pages/portal/portal.component.html
@@ -1,19 +1,21 @@
 <mat-sidenav-container class="app-main-container">
   <mat-sidenav-content>
-
-    <igo-backdrop
-      [shown]="backdropShown"
-      (click)="onBackdropClick()">
+    <igo-backdrop [shown]="backdropShown" (click)="onBackdropClick()">
     </igo-backdrop>
 
     <div class="navbar-container">
-      <igo-menu-button *ngIf="showMenuButton"
+      <igo-menu-button
+        *ngIf="showMenuButton"
+        [class.mat-elevation-z2]="!sidenavOpened"
         [sidenavOpened]="sidenavOpened"
-        (openSidenav)="onToggleSidenavClick()">
+        (openSidenav)="onToggleSidenavClick()"
+      >
       </igo-menu-button>
 
-      <igo-search-bar *ngIf="showSearchBar"
+      <igo-search-bar
+        *ngIf="showSearchBar"
         #searchBar
+        [class.mat-elevation-z2]="!sidenavOpened"
         [term]="searchBarTerm"
         [termSplitter]="termSplitter"
         [minLength]="minSearchTermLength"
@@ -24,19 +26,25 @@
         [pointerSummaryEnabled]="igoSearchPointerSummaryEnabled"
         (pointerSummaryStatus)="onPointerSummaryStatusChange($event)"
         [searchResultsGeometryEnabled]="searchResultsGeometryEnabled"
-        (searchResultsGeometryStatus)="onSearchResultsGeometryStatusChange($event)"
+        (searchResultsGeometryStatus)="
+          onSearchResultsGeometryStatusChange($event)
+        "
         [reverseSearchCoordsFormatEnabled]="igoReverseSearchCoordsFormatEnabled"
-        (reverseSearchCoordsFormatStatus)="onReverseCoordsFormatStatusChange($event)"
+        (reverseSearchCoordsFormatStatus)="
+          onReverseCoordsFormatStatusChange($event)
+        "
         (search)="onSearch($event)"
         (clearFeature)="onClearSearch()"
-        (searchSettingsChange)="onSearchSettingsChange()">
+        (searchSettingsChange)="onSearchSettingsChange()"
+      >
       </igo-search-bar>
     </div>
 
     <app-sidenav
       [map]="map"
       [(opened)]="sidenavOpened"
-      (toolChange)="toolChanged($event)">
+      (toolChange)="toolChanged($event)"
+    >
     </app-sidenav>
 
     <igo-map-browser
@@ -61,58 +69,91 @@
       [contextUri]="contextUri"
       (query)="onMapQuery($event)"
       [map]="map"
-      [igoContextMenu]=contextMenu
+      [igoContextMenu]="contextMenu"
       (menuPosition)="onContextMenuOpen($event)"
-      [ngClass]="{'igo-attribution-offset': map.getBaseLayers().length > 1}"
+      [ngClass]="{ 'igo-attribution-offset': map.getBaseLayers().length > 1 }"
       [@mapStateX]="sidenavOpened ? 'right' : 'left'"
       (@mapStateX.start)="updateMapBrowserClass()"
       [@mapStateY]="getControlsOffsetY()"
-      (@mapStateY.start)="updateMapBrowserClass()">
-
-      <igo-zoom-button [map]="map" color="primary"
-        [@controlsOffsetY]="getControlsOffsetY()">
+      (@mapStateY.start)="updateMapBrowserClass()"
+    >
+      <igo-zoom-button
+        class="mat-elevation-z2"
+        [map]="map"
+        color="primary"
+        [@controlsOffsetY]="getControlsOffsetY()"
+      >
       </igo-zoom-button>
-      <igo-swipe-control [map]="map"></igo-swipe-control>
-      <igo-map-center [map]="map"></igo-map-center>
-      <igo-wake-lock-button *ngIf="showWakeLockButton"></igo-wake-lock-button>
-      <igo-offline-button [map]="map" color="primary"
+      <igo-swipe-control
+        class="mat-elevation-z2"
+        [map]="map"
+      ></igo-swipe-control>
+      <igo-map-center class="mat-elevation-z2" [map]="map"></igo-map-center>
+      <igo-wake-lock-button
+        *ngIf="showWakeLockButton"
+        class="mat-elevation-z2"
+      ></igo-wake-lock-button>
+      <igo-offline-button
+        [map]="map"
+        color="primary"
         *ngIf="showOfflineButton"
+        class="mat-elevation-z2"
         [@controlsOffsetY]="getControlsOffsetY()"
-        [@mobileOffsetY]="getToastPanelStatus()">
+        [@mobileOffsetY]="getToastPanelStatus()"
+      >
       </igo-offline-button>
       <igo-geolocate-button
         *ngIf="hasGeolocateButton"
-        [map]="map" color="primary"
+        class="mat-elevation-z2"
+        [map]="map"
+        color="primary"
         [@controlsOffsetY]="getControlsOffsetY()"
-        [@mobileOffsetY]="getToastPanelStatus()">
+        [@mobileOffsetY]="getToastPanelStatus()"
+      >
       </igo-geolocate-button>
-      <igo-rotation-button [showIfNoRotation]="showRotationButtonIfNoRotation" [map]="map" color="primary"></igo-rotation-button>
+      <igo-rotation-button
+        class="mat-elevation-z2"
+        [showIfNoRotation]="showRotationButtonIfNoRotation"
+        [map]="map"
+        color="primary"
+      ></igo-rotation-button>
       <igo-home-extent-button
         *ngIf="hasHomeExtentButton"
+        class="mat-elevation-z2"
         [map]="map"
         [extentOverride]="homeExtent"
         [centerOverride]="homeCenter"
         [zoomOverride]="homeZoom"
-        color="primary">
+        color="primary"
+      >
       </igo-home-extent-button>
       <igo-user-button
         *ngIf="auth.url"
-        [map]="map" color="primary"
+        class="mat-elevation-z2"
+        [map]="map"
+        color="primary"
         [@controlsOffsetY]="getControlsOffsetY()"
-        [@mobileOffsetY]="getToastPanelStatus()">
+        [@mobileOffsetY]="getToastPanelStatus()"
+      >
       </igo-user-button>
-      <igo-baselayers-switcher [map]="map"
+      <igo-baselayers-switcher
+        class="mat-elevation-z2"
+        [map]="map"
         [@controlsOffsetY]="getBaselayersSwitcherStatus()"
-        [useStaticIcon]="true">
+        [useStaticIcon]="true"
+      >
       </igo-baselayers-switcher>
     </igo-map-browser>
 
     <app-map-overlay
       [@controlStateY]="getControlsOffsetY()"
-      [@controlStateX]="(mediaService.media$ | async) !== 'mobile' &&
-                              sidenavOpened ? 'right' : 'left'">
+      [@controlStateX]="
+        (mediaService.media$ | async) !== 'mobile' && sidenavOpened
+          ? 'right'
+          : 'left'
+      "
+    >
     </app-map-overlay>
-
   </mat-sidenav-content>
 </mat-sidenav-container>
 
@@ -122,8 +163,15 @@
   [(expanded)]="expansionPanelExpanded"
   [maximized]="workspaceMaximize$ | async"
   [@expansionPanelSize]="getExpansionPanelStatus()"
-  [@toastOffsetY]="(isMobile() && !toastPanelOpened && queryState.store.entities$.value.length > 0 && !expansionPanelExpanded) ? 'true' : 'false'">
-
+  [@toastOffsetY]="
+    isMobile() &&
+    !toastPanelOpened &&
+    queryState.store.entities$.value.length > 0 &&
+    !expansionPanelExpanded
+      ? 'true'
+      : 'false'
+  "
+>
   <ng-container expansionPanelHeader>
     <igo-workspace-selector
       igoWorkspaceSelector
@@ -131,10 +179,13 @@
       (changeWorkspace)="workspaceState.setActiveWorkspaceByTitle($event)"
       (disableSwitch)="workspaceSwitchDisabled = $event"
       (relationLayers)="refreshRelationsWorkspace($event)"
-      (rowsInMapExtentCheckCondition)="workspaceState.rowsInMapExtentCheckCondition$.next($event)"
+      (rowsInMapExtentCheckCondition)="
+        workspaceState.rowsInMapExtentCheckCondition$.next($event)
+      "
       [store]="workspaceStore"
       [disabled]="workspaceSwitchDisabled"
-      [map]="map">
+      [map]="map"
+    >
     </igo-workspace-selector>
 
     <ng-container *ngIf="selectedWorkspace$ | async as workspace">
@@ -145,13 +196,19 @@
         collapsibleButton
         tooltip-position="below"
         matTooltipShowDelay="500"
-        [matTooltip]="workspace.layer.visible ?
-                      ('igo.geo.layer.hideLayer' | translate) :
-                      ('igo.geo.layer.showLayer' | translate)"
-        (click)="workspace.layer.visible = !workspace.layer.visible">
+        [matTooltip]="
+          workspace.layer.visible
+            ? ('igo.geo.layer.hideLayer' | translate)
+            : ('igo.geo.layer.showLayer' | translate)
+        "
+        (click)="workspace.layer.visible = !workspace.layer.visible"
+      >
         <mat-icon
-          [ngClass]="{disabled: (workspace.inResolutionRange$ | async)!==true}"
-          [svgIcon]="workspace.layer.visible ? 'eye' : 'eye-off'">
+          [ngClass]="{
+            disabled: (workspace.inResolutionRange$ | async) !== true
+          }"
+          [svgIcon]="workspace.layer.visible ? 'eye' : 'eye-off'"
+        >
         </mat-icon>
       </button>
       <button
@@ -162,12 +219,15 @@
         collapsibleButton
         tooltip-position="below"
         matTooltipShowDelay="500"
-        [disabled]="workspace.layer.options.sourceOptions.edition.addButton === false ? true : false"
-        [matTooltip]="('workspace.addFeature') | translate"
-        (click)="addFeature(workspace)">
-        <mat-icon
-          svgIcon="plus">
-        </mat-icon>
+        [disabled]="
+          workspace.layer.options.sourceOptions.edition.addButton === false
+            ? true
+            : false
+        "
+        [matTooltip]="'workspace.addFeature' | translate"
+        (click)="addFeature(workspace)"
+      >
+        <mat-icon svgIcon="plus"> </mat-icon>
       </button>
       <igo-actionbar
         class="actionbar-workspace"
@@ -180,21 +240,32 @@
         [iconColor]="'primary'"
         [color]="'primary'"
         [mode]="actionbarMode"
-        [overlayClass]="workspaceMenuClass">
+        [overlayClass]="workspaceMenuClass"
+      >
       </igo-actionbar>
       <button
         class="zoom-workspace"
         *ngIf="workspaceVisibility()"
-        [disabled]= "(workspaceState.workspaceSelection$ | async).length === 0 ? true : false"
+        [disabled]="
+          (workspaceState.workspaceSelection$ | async).length === 0
+            ? true
+            : false
+        "
         mat-icon-button
         color="primary"
         collapsibleButton
         tooltip-position="below"
         matTooltipShowDelay="500"
-        [matTooltip]="('toastPanel.zoomOnFeaturesTooltip') | translate"
-        (click)="zoomToSelectedFeatureWks()">
+        [matTooltip]="'toastPanel.zoomOnFeaturesTooltip' | translate"
+        (click)="zoomToSelectedFeatureWks()"
+      >
         <mat-icon
-        svgIcon="{{(workspaceState.workspaceSelection$ | async).length > 1 ?  'magnify-scan' : 'magnify-plus-outline'}}">
+          svgIcon="{{
+            (workspaceState.workspaceSelection$ | async).length > 1
+              ? 'magnify-scan'
+              : 'magnify-plus-outline'
+          }}"
+        >
         </mat-icon>
       </button>
       <div class="spacer"></div>
@@ -203,7 +274,8 @@
         [store]="workspace.entityStore"
         [entitySortChange$]="workspaceEntitySortChange$"
         [paginatorOptions]="paginatorOptions"
-        (paginatorChange)="paginatorChange($event)">
+        (paginatorChange)="paginatorChange($event)"
+      >
       </igo-entity-table-paginator>
     </ng-container>
   </ng-container>
@@ -212,26 +284,34 @@
     <igo-entity-table
       [class]="isEditionWorkspace(workspace) ? 'edition-table' : ''"
       [paginator]="workspacePaginator"
-      *ngIf="workspace.entityStore && workspace.meta && workspace.meta.tableTemplate && workspaceVisibility()"
+      *ngIf="
+        workspace.entityStore &&
+        workspace.meta &&
+        workspace.meta.tableTemplate &&
+        workspaceVisibility()
+      "
       [store]="workspace.entityStore"
       (entitySortChange)="entitySortChange()"
       (entitySelectChange)="entitySelectChange($event)"
-      [template]="workspace.meta.tableTemplate">
+      [template]="workspace.meta.tableTemplate"
+    >
     </igo-entity-table>
-    <span class="mat-typography">{{workspaceNotAvailableMessage | translate}}</span>
+    <span class="mat-typography">{{
+      workspaceNotAvailableMessage | translate
+    }}</span>
   </ng-container>
-
 </app-expansion-panel>
 
 <app-toast-panel-for-expansion
   [withHeader]="false"
-  [(opened)]="toastPanelForExpansionOpened">
-
+  [(opened)]="toastPanelForExpansionOpened"
+>
   <div class="toast-panel-for-expansion-close-button-container">
     <button
       mat-icon-button
       color="warn"
-      (click)="toastPanelForExpansionOpened = false">
+      (click)="toastPanelForExpansionOpened = false"
+    >
       <mat-icon svgIcon="close"></mat-icon>
     </button>
   </div>
@@ -239,22 +319,27 @@
   <igo-workspace-widget-outlet
     *ngIf="selectedWorkspace$ | async as workspace"
     [workspace]="workspace"
-    (deactivateWidget)="onDeactivateWorkspaceWidget()">
+    (deactivateWidget)="onDeactivateWorkspaceWidget()"
+  >
   </igo-workspace-widget-outlet>
+</app-toast-panel-for-expansion>
 
-</app-toast-panel-for-expansion >
-
-<app-toast-panel *ngIf="(queryStore.empty$ | async)!==true"
+<app-toast-panel
+  *ngIf="(queryStore.empty$ | async) !== true"
   [map]="map"
   [store]="queryStore"
   [hasFeatureEmphasisOnSelection]="hasFeatureEmphasisOnSelection"
   [@toastPanelOffsetX]="toastPanelOffsetX$ | async"
   [@toastPanelOffsetY]="getToastPanelOffsetY()"
-  [@toastPanelMobileSidenav]="(isMobile() && sidenavOpened) || (isTablet() && isPortrait() && sidenavOpened)"
+  [@toastPanelMobileSidenav]="
+    (isMobile() && sidenavOpened) ||
+    (isTablet() && isPortrait() && sidenavOpened)
+  "
   [opened]="toastPanelOpened"
   (openedChange)="toastOpenedChange($event)"
   (fullExtentEvent)="fullExtent = $event"
-  (windowHtmlDisplayEvent)="setToastPanelHtmlDisplay($event)">
+  (windowHtmlDisplayEvent)="setToastPanelHtmlDisplay($event)"
+>
 </app-toast-panel>
 
 <ng-template #contextMenu>
@@ -262,6 +347,7 @@
     [store]="contextMenuStore"
     [withIcon]="false"
     [horizontal]="true"
-    mode="context">
+    mode="context"
+  >
   </igo-actionbar>
 </ng-template>
diff --git a/src/app/pages/portal/portal.component.scss b/src/app/pages/portal/portal.component.scss
index cf8b7d40c..14541fe8f 100644
--- a/src/app/pages/portal/portal.component.scss
+++ b/src/app/pages/portal/portal.component.scss
@@ -11,17 +11,18 @@
     top: 5px;
     display: flex;
     width: $search-bar-width;
+    z-index: 4;
+    
+    @include mobile {
+      width: $search-bar-width-mobile;
+      max-width: 350px;
+    }
 
     igo-search-bar {
+      flex: 1;
       background-color: $app-background-color;
       font-size: 16px;
-      z-index: 4;
       margin: 0 $igo-margin;
-  
-      @include mobile {
-        width: $search-bar-width-mobile;
-        max-width: 350px;
-      }
     }
   }
 
@@ -176,7 +177,7 @@ igo-entity-table-paginator {
     margin-left: -30px;
   }
 }
-igo-entity-table-paginator ::ng-deep .mat-paginator-range-label {
+igo-entity-table-paginator ::ng-deep .mat-mdc-paginator-range-label {
   @include mobile {
     margin: 10px 1px 0px 20px;
   }
@@ -355,7 +356,7 @@ toast-panel-for-expansion.toast-panel-for-expansion-opened {
   }
 }
 
-.mat-table thead mat-header-row .mat-table-sticky {
+.mat-mdc-table thead mat-header-row .mat-mdc-table-sticky {
   background: none;
 }
 
@@ -388,8 +389,8 @@ app-toast-panel-for-expansion .toast-panel-for-expansion-close-button-container
 
 ::ng-deep div.workspace-menu {
   max-width: fit-content !important;
-
-  div.mat-menu-content ::ng-deep span.mat-checkbox-label, div.mat-menu-content ::ng-deep div.mat-list-text {
+  /*TODO(mdc-migration): The following rule targets internal classes of checkbox that may no longer apply for the MDC version.*/
+  div.mat-mdc-menu-content ::ng-deep span.mat-checkbox-label, div.mat-mdc-menu-content ::ng-deep div.mdc-list-item__primary-text {
     font-size: 12px;
   }
 }
diff --git a/src/app/pages/portal/portal.component.ts b/src/app/pages/portal/portal.component.ts
index 68ef9781c..56da009a4 100644
--- a/src/app/pages/portal/portal.component.ts
+++ b/src/app/pages/portal/portal.component.ts
@@ -10,10 +10,10 @@ import { ActivatedRoute, Params } from '@angular/router';
 import { Subscription, of, BehaviorSubject, combineLatest } from 'rxjs';
 import { debounceTime, take, pairwise, skipWhile, first } from 'rxjs/operators';
 import {
-  MatLegacyDialog as MatDialog,
-  MatLegacyDialogConfig as MatDialogConfig,
-  MatLegacyDialogRef as MatDialogRef
-} from '@angular/material/legacy-dialog';
+  MatDialog,
+  MatDialogConfig,
+  MatDialogRef
+} from '@angular/material/dialog';
 import MapBrowserEvent from 'ol/MapBrowserEvent';
 import * as olProj from 'ol/proj';
 import olFeature from 'ol/Feature';
@@ -102,7 +102,7 @@ import { HttpClient, HttpParams } from '@angular/common/http';
 
 import { WelcomeWindowComponent } from './welcome-window/welcome-window.component';
 import { WelcomeWindowService } from './welcome-window/welcome-window.service';
-import { MatLegacyPaginator as MatPaginator } from '@angular/material/legacy-paginator';
+import { MatPaginator } from '@angular/material/paginator';
 import { ObjectUtils } from '@igo2/utils';
 import olFormatGeoJSON from 'ol/format/GeoJSON';
 
diff --git a/src/app/pages/portal/portal.module.ts b/src/app/pages/portal/portal.module.ts
index de68c70a3..58d18e081 100644
--- a/src/app/pages/portal/portal.module.ts
+++ b/src/app/pages/portal/portal.module.ts
@@ -1,11 +1,11 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDialogModule } from '@angular/material/dialog';
 
 import { IgoCoreModule } from '@igo2/core';
 import {
diff --git a/src/app/pages/portal/portal.variables.scss b/src/app/pages/portal/portal.variables.scss
index 89fdd474c..71216739b 100644
--- a/src/app/pages/portal/portal.variables.scss
+++ b/src/app/pages/portal/portal.variables.scss
@@ -33,14 +33,14 @@ $app-toast-panel-html-height: 32vh;
 
 $app-toast-panel-html-large-height: 55vh;
 
-$app-sidenav-margin-top: 50px;
+$app-sidenav-margin-top: 48px + 5px; // Search bar height + margin-top
 $app-sidenav-height: calc(100% - #{$app-sidenav-margin-top});
 $app-sidenav-width: 400px;
 $app-sidenav-width-mobile: calc(100% - #{$app-mobile-min-space-right} - #{$igo-margin});
 
 $search-bar-left: $igo-icon-size + $igo-margin;
 $search-bar-width: calc(#{$app-sidenav-width} - (2 * #{$igo-margin}));
-$search-bar-width-mobile: calc(100% - #{$app-mobile-min-space-right} - #{$search-bar-left} - (3 * #{$igo-margin}));
+$search-bar-width-mobile: calc(100% - #{$app-mobile-min-space-right} - (2 * #{$igo-margin}));
 
 $app-footer-height: 49px;
 $toast-panel-for-expansion-collapsed-height: 48px;
diff --git a/src/app/pages/portal/sidenav/sidenav.component.html b/src/app/pages/portal/sidenav/sidenav.component.html
index 51bc2d5b6..7383b980d 100644
--- a/src/app/pages/portal/sidenav/sidenav.component.html
+++ b/src/app/pages/portal/sidenav/sidenav.component.html
@@ -28,16 +28,6 @@
             styleButton = 'icon'>
           </igo-interactive-tour>
 
-          <!-- <button *ngIf="toolbox.activeTool$ | async"
-            mat-icon-button
-            panelRightButton
-            tooltip-position="below"
-            matTooltipShowDelay="500"
-            [matTooltip]="'igo.context.sidenav.mainMenu' | translate"
-            (click)="onUnselectButtonClick()">
-            <mat-icon svgIcon="close"></mat-icon>
-          </button> -->
-
           <igo-toolbox
             class="igo-toolbox"
             color="primary"
diff --git a/src/app/pages/portal/sidenav/sidenav.component.scss b/src/app/pages/portal/sidenav/sidenav.component.scss
index 3444532da..fc915f436 100644
--- a/src/app/pages/portal/sidenav/sidenav.component.scss
+++ b/src/app/pages/portal/sidenav/sidenav.component.scss
@@ -2,53 +2,64 @@
 
 :host {
   background-color: rgb(255, 255, 255);
-}
-
-// This is needed because whe using the
-// sidenav "side" mode, the z-index is 1
-// and the sidenav appears below our backdrop.
-// The "side" mode is required to prevent
-// the sidenav from focusing a random button on open.
-:host ::ng-deep mat-sidenav {
-  z-index: 3 !important;
-}
 
-mat-sidenav {
-  @extend %box-shadowed-bottom-right;
+  
 
-  height: 100%;
-  width: $app-sidenav-width;
-
-  @include mobile {
-    width: $app-sidenav-width-mobile;
-    max-width: 400px;
+  ::ng-deep {
+    .igo-panel-header {
+      position: relative;
+    }
   }
-}
+  
+  mat-sidenav {
+    // This is needed because whe using the
+    // sidenav "side" mode, the z-index is 1
+    // and the sidenav appears below our backdrop.
+    // The "side" mode is required to prevent
+    // the sidenav from focusing a random button on open.
+    z-index: 3 !important;
 
-.app-content, igo-panel {
+    @extend %box-shadowed-bottom-right;
+  
     height: 100%;
-}
-
-.app-sidenav-content {
-  margin-top: $app-sidenav-margin-top;
-  height: $app-sidenav-height;
-  @include mobile {
-    height: calc(100% - #{$app-sidenav-margin-top});
+    width: $app-sidenav-width;
+  
+    @include mobile {
+      width: $app-sidenav-width-mobile;
+      max-width: 400px;
+    }
   }
-}
-
-igo-panel ::ng-deep .igo-panel-content {
-  position: relative;
-}
-
 
-div.toolActivated > igo-panel ::ng-deep > div.igo-panel-header {
-  margin-left: 50px;
-  position: relative;
-}
-
-igo-toolbox {
-  @include mobile {
-    overflow: auto;
+  igo-home-button {
+    position: absolute;
+    top: 53px;
+  }
+  
+  .app-content, igo-panel {
+      height: 100%;
+  }
+  
+  .app-sidenav-content {
+    margin-top: $app-sidenav-margin-top;
+    height: $app-sidenav-height;
+    @include mobile {
+      height: calc(100% - #{$app-sidenav-margin-top});
+    }
+  }
+  
+  igo-panel ::ng-deep .igo-panel-content {
+    position: relative;
+  }
+  
+  
+  div.toolActivated > igo-panel ::ng-deep > div.igo-panel-header {
+    margin-left: 50px;
+    position: relative;
+  }
+  
+  igo-toolbox {
+    @include mobile {
+      overflow: auto;
+    }
   }
 }
diff --git a/src/app/pages/portal/sidenav/sidenav.module.ts b/src/app/pages/portal/sidenav/sidenav.module.ts
index 55281fc18..a87c5fe9a 100644
--- a/src/app/pages/portal/sidenav/sidenav.module.ts
+++ b/src/app/pages/portal/sidenav/sidenav.module.ts
@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatSidenavModule } from '@angular/material/sidenav';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { IgoLanguageModule } from '@igo2/core';
 import {
diff --git a/src/app/pages/portal/toast-panel-for-expansion/toast-panel-for-expansion.module.ts b/src/app/pages/portal/toast-panel-for-expansion/toast-panel-for-expansion.module.ts
index 1898f7705..5d7d37dcf 100644
--- a/src/app/pages/portal/toast-panel-for-expansion/toast-panel-for-expansion.module.ts
+++ b/src/app/pages/portal/toast-panel-for-expansion/toast-panel-for-expansion.module.ts
@@ -1,6 +1,6 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 
 import { IgoPanelModule, IgoStopPropagationModule } from '@igo2/common';
diff --git a/src/app/pages/portal/toast-panel/toast-panel.module.ts b/src/app/pages/portal/toast-panel/toast-panel.module.ts
index 2d5a7d4cd..b8d605848 100644
--- a/src/app/pages/portal/toast-panel/toast-panel.module.ts
+++ b/src/app/pages/portal/toast-panel/toast-panel.module.ts
@@ -1,9 +1,9 @@
 import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
-import { MatLegacyMenuModule as MatMenuModule } from '@angular/material/legacy-menu';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
+import { MatMenuModule } from '@angular/material/menu';
+import { MatTooltipModule } from '@angular/material/tooltip';
 
 import { IgoPanelModule, IgoStopPropagationModule, IgoActionModule } from '@igo2/common';
 import { IgoLanguageModule } from '@igo2/core';
diff --git a/src/app/pages/portal/welcome-window/welcome-window.component.html b/src/app/pages/portal/welcome-window/welcome-window.component.html
index b21958239..3e15dd2e3 100644
--- a/src/app/pages/portal/welcome-window/welcome-window.component.html
+++ b/src/app/pages/portal/welcome-window/welcome-window.component.html
@@ -1,10 +1,10 @@
 <div class="welcome-window"  *ngIf="html$ | async">
 
   <mat-toolbar color="primary">
-    <h2>{{'welcomeWindow.title' | translate}}</h2>
+    <h4>{{'welcomeWindow.title' | translate}}</h4>
     <span class="spacer"></span>
 
-    <label>
+    <label class="mat-body-1">
       <input id="doNotShowCheck" type="checkbox" [(ngModel)]="showAgain" (click)="setShowAgain()">
       {{'welcomeWindow.notShowCheck' | translate}}
     </label>
diff --git a/src/app/pages/portal/welcome-window/welcome-window.component.scss b/src/app/pages/portal/welcome-window/welcome-window.component.scss
index 7dc335b9e..5e10fde90 100644
--- a/src/app/pages/portal/welcome-window/welcome-window.component.scss
+++ b/src/app/pages/portal/welcome-window/welcome-window.component.scss
@@ -1,22 +1,35 @@
-.spacer {
-  flex: 1 1 auto;
-}
+:host {
+  display: block;
+  padding: 16px;
 
-.button-container {
-  display: flex;
-  justify-content: space-around;
-}
+  .spacer {
+    flex: 1 1 auto;
+  }
+  
+  .button-container {
+    display: flex;
+    justify-content: space-around;
+  }
+  
+  #doNotShowCheck {
+    margin-right: 5px;
+  }
+  
+  mat-toolbar h2 {
+    margin: revert;
+  }
 
-#doNotShowCheck {
-  margin-right: 5px;
-}
+  label {
+    margin-bottom: 0;
+  }
+  
+  .mat-mdc-dialog-container {
+    z-index: 1000;
+    box-shadow: 0 0 0 1000em rgba(0, 0, 0, 0.6);
+    transform: translate(-50%, 0);
+  }
 
-mat-toolbar h2 {
-  margin: revert;
-}
-
-.mat-dialog-container {
-  z-index: 1000;
-  box-shadow: 0 0 0 1000em rgba(0, 0, 0, 0.6);
-  transform: translate(-50%, 0);
+  ::ng-deep .custom-html {
+    padding: 0 !important;
+  }
 }
\ No newline at end of file
diff --git a/src/app/pages/portal/welcome-window/welcome-window.component.ts b/src/app/pages/portal/welcome-window/welcome-window.component.ts
index 891edb5a9..ab9bb0289 100644
--- a/src/app/pages/portal/welcome-window/welcome-window.component.ts
+++ b/src/app/pages/portal/welcome-window/welcome-window.component.ts
@@ -1,5 +1,5 @@
 import { Component, OnDestroy, OnInit } from '@angular/core';
-import { MatLegacyDialog as MatDialog } from '@angular/material/legacy-dialog';
+import { MatDialog } from '@angular/material/dialog';
 import { ConfigService, LanguageService } from '@igo2/core';
 import { BehaviorSubject, Observable, of, Subscription } from 'rxjs';
 import { map } from 'rxjs/operators';
diff --git a/src/app/pages/portal/welcome-window/welcome-window.module.ts b/src/app/pages/portal/welcome-window/welcome-window.module.ts
index 3d979dcee..98df12f48 100644
--- a/src/app/pages/portal/welcome-window/welcome-window.module.ts
+++ b/src/app/pages/portal/welcome-window/welcome-window.module.ts
@@ -2,11 +2,11 @@ import { NgModule } from '@angular/core';
 import { CommonModule } from '@angular/common';
 import { FormsModule } from '@angular/forms';
 
-import { MatLegacyButtonModule as MatButtonModule } from '@angular/material/legacy-button';
+import { MatButtonModule } from '@angular/material/button';
 import { MatIconModule } from '@angular/material/icon';
 import { MatToolbarModule } from '@angular/material/toolbar';
-import { MatLegacyTooltipModule as MatTooltipModule } from '@angular/material/legacy-tooltip';
-import { MatLegacyDialogModule as MatDialogModule } from '@angular/material/legacy-dialog';
+import { MatTooltipModule } from '@angular/material/tooltip';
+import { MatDialogModule } from '@angular/material/dialog';
 
 import { WelcomeWindowComponent } from './welcome-window.component';
 import { IgoLanguageModule } from '@igo2/core';
diff --git a/src/app/pages/portal/welcome-window/welcome-window.service.ts b/src/app/pages/portal/welcome-window/welcome-window.service.ts
index 733b47b34..f5b26ff97 100644
--- a/src/app/pages/portal/welcome-window/welcome-window.service.ts
+++ b/src/app/pages/portal/welcome-window/welcome-window.service.ts
@@ -1,7 +1,7 @@
 import { Injectable } from '@angular/core';
 
 import { ConfigService, StorageService } from '@igo2/core';
-import { MatLegacyDialogConfig as MatDialogConfig } from '@angular/material/legacy-dialog';
+import { MatDialogConfig } from '@angular/material/dialog';
 
 @Injectable({
   providedIn: 'root'
diff --git a/src/index.html b/src/index.html
index 8ec359711..88403820c 100644
--- a/src/index.html
+++ b/src/index.html
@@ -77,7 +77,7 @@
     <link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500&display=swap" rel="stylesheet">
     <meta name="theme-color" content="#1976d2" />
   </head>
-  <body>
+  <body class="mat-typography">
     <app-root>
       <div class="app-loading">
         Loading...
diff --git a/src/locale/fr.json b/src/locale/fr.json
index 9eb603ac0..e4b3ceb8f 100644
--- a/src/locale/fr.json
+++ b/src/locale/fr.json
@@ -57,7 +57,7 @@
   "googleMap": "Afficher dans Google Maps",
   "googleStreetView": "Afficher dans Google Street View",
   "welcomeWindow": {
-    "html": "<h1>Bienvenue dans {{title}}, l'application cartographique du gouvernement du Québec</h1><h2>Débutez en sélectionnant un contexte &#x2605;</h2><h2>Version {{version}}, en date du {{releaseDate}}</h2>",
+    "html": "<h2>Bienvenue dans {{title}}, l'application cartographique du gouvernement du Québec</h2><h3>Débutez en sélectionnant un contexte &#x2605;</h3><h3>Version {{version}}, en date du {{releaseDate}}</h3>",
     "title": "Fenêtre d'accueil",
     "closeButton": "Fermer",
     "notShowCheck": "Ne plus afficher"
diff --git a/src/qcca-theme/qcca-theme.scss b/src/qcca-theme/qcca-theme.scss
index 9879b8733..23117f3ab 100644
--- a/src/qcca-theme/qcca-theme.scss
+++ b/src/qcca-theme/qcca-theme.scss
@@ -163,8 +163,7 @@ box-shadow: 0 1px 4px rgb(34 54 84 / 24%);
 
 // FONTS
 
-::ng-deep .qcca-theme .mat-toolbar.mat-primary h2, ::ng-deep .igo-panel-title, ::ng-deep .igo-panel-header h3, ::ng-deep .qcca-theme igo-panel > div.igo-panel-header, ::ng-deep .qcca-theme igo-panel > div.igo-panel-header h3,
-.igo-panel-title[_ngcontent-eeh-c247], ::ng-deep .igo-panel-title[_ngcontent-eeh-c247]{
+::ng-deep .qcca-theme .mat-toolbar.mat-primary h2, ::ng-deep .igo-panel-title, ::ng-deep .igo-panel-header h3, ::ng-deep .qcca-theme igo-panel > div.igo-panel-header, ::ng-deep .qcca-theme igo-panel > div.igo-panel-header h3 {
     color: white!important;
 }
 
@@ -176,11 +175,11 @@ p {
     margin-bottom: 24px;
 }
 
-h1, h2, h4, h5, h6, .mat-dialog-title { //h3 a été retiré car en conflit avec igo-panel-title
+h1, h2, h4, h5, h6, .mat-mdc-dialog-title { //h3 a été retiré car en conflit avec igo-panel-title
   font-family: 'Roboto', sans-serif!important;
   font-weight: 600;
   color: #223654;
-  }
+}
   
 h1 {
   font-size: 2rem;
@@ -197,7 +196,7 @@ h1:after {
   padding-top: 0.4rem;
   border-bottom: 4px solid #f09686;
   margin-bottom: 1rem;
-  }
+}
 
 @media (max-width: 1200px) {
     h1 {
@@ -279,7 +278,7 @@ span.surtitre {
     margin-bottom: 0px;
 }
 
-  .mat-dialog-title:after {
+  .mat-mdc-dialog-title:after {
       content: "";
       display: block;
       margin: 0;
@@ -294,16 +293,21 @@ span.surtitre {
 
 // ANGULAR MATERIAL
 
-::ng-deep .mat-stroked-button {
+::ng-deep .mat-mdc-outlined-button {
     border: 2px solid currentColor;
 }
 
-::ng-deep .mat-button, ::ng-deep .mat-icon-button, ::ng-deep .mat-stroked-button, ::ng-deep .mat-flat-button, ::ng-deep .mat-form-field-outline-start, ::ng-deep .mat-form-field-outline-end {
-    border-radius: 0!important;
+::ng-deep {
+    .mat-mdc-button, 
+    .mat-mdc-icon-button, 
+    .mat-mdc-outlined-button, 
+    .mat-mdc-unelevated-button {
+        border-radius: 0!important;
+    }
 }
 
-::ng-deep .mat-flat-button, ::ng-deep button, ::ng-deep .mat-raised-button, ::ng-deep .mat-raised-button,
-::ng-deep button, button, .mat-flat-button, ::ng-deep .mat-raised-button, ::ng-deep .mat-fab, ::ng-deep .mat-mini-fab, ::ng-deep .mat-fab, ::ng-deep .mat-mini-fab, ::ng-deep .blue-theme .mat-flat-button, 
+::ng-deep .mat-mdc-unelevated-button, ::ng-deep button, ::ng-deep .mat-mdc-raised-button, ::ng-deep .mat-raised-button,
+::ng-deep button, button, .mat-flat-button, ::ng-deep .mat-raised-button, ::ng-deep .mat-mdc-fab, ::ng-deep .mat-mdc-mini-fab, ::ng-deep .mat-fab, ::ng-deep .mat-mini-fab, ::ng-deep .blue-theme .mat-flat-button, 
 ::ng-deep .mat-raised-button, ::ng-deep .mat-fab, ::ng-deep .mat-mini-fab, ::ng-deep span.mat-button-wrapper, 
 ::ng-deep .mat-icon-no-color .ng-star-inserted svg {
     color: #095797!important;
@@ -313,16 +317,23 @@ span.surtitre {
     border-radius: 0 !important;
 }
 
-::ng-deep .qcca-theme .mat-button-toggle-checked, ::ng-deep .igo-list-item-selected, ::ng-deep .mat-focus-indicator .mat-line, ::ng-deep .ng-star-inserted,
-::ng-deep .mat-selected, ::ng-deep .select div:hover, ::ng-deep .qcca-theme .mat-focus-indicator {
-    color: #f2f1f1!important;
+/* TODO(mdc-migration): The following rule targets internal classes of button that may no longer apply for the MDC version.*/
+::ng-deep {
+    .qcca-theme .mat-button-toggle-checked, 
+    .igo-list-item-selected, 
+    .mat-focus-indicator .mat-line, 
+    .ng-star-inserted,
+    .select div:hover, 
+    .qcca-theme .mat-focus-indicator {
+        color: #f2f1f1!important;
+    }
 }
 
-.mat-list-item:hover {
+.mat-mdc-list-item:hover {
     background: #dae6f0!important;
 }
 
-.mat-list-item, .mat-list-item-content, .mat-list-item-content:hover, .qcca-theme, .qcca-theme .mat-list-base, .qcca-theme igo-toolbox.color-primary > igo-actionbar:not(.with-title) .mat-icon svg:hover, .qcca-theme igo-toolbox.color-primary > igo-actionbar:not(.with-title).selected .mat-icon svg,
+.mat-mdc-list-item, .mat-list-item-content, .mat-list-item-content:hover, .qcca-theme, .qcca-theme .mat-mdc-list-base, .qcca-theme igo-toolbox.color-primary > igo-actionbar:not(.with-title) .mat-icon svg:hover, .qcca-theme igo-toolbox.color-primary > igo-actionbar:not(.with-title).selected .mat-icon svg,
 ::ng-deep igo-actionbar-item .mat-focus-indicator .mat-icon svg, body > app-root > app-portal > mat-sidenav-container > mat-sidenav-content > app-sidenav > mat-sidenav > div > div > div > igo-panel > div.igo-panel-content > igo-toolbox > igo-actionbar > mat-list > igo-actionbar-item button.mat-focus-indicator .mat-icon svg{
     color: #223654!important;
 }
diff --git a/src/styles.scss b/src/styles.scss
index f33334217..25584bc36 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -8,7 +8,7 @@
   pointer-events: initial;
 }
 
-.mat-tooltip-trigger {
+.mat-mdc-tooltip-trigger {
   touch-action: auto !important;
 }
 .toast-title-red {