diff --git a/projects/demo-app/src/app/splitter/splitter-demo.component.html b/projects/demo-app/src/app/splitter/splitter-demo.component.html
index f96da3b..ec3071b 100644
--- a/projects/demo-app/src/app/splitter/splitter-demo.component.html
+++ b/projects/demo-app/src/app/splitter/splitter-demo.component.html
@@ -1,4 +1,4 @@
-<mat-tab-group [selectedIndex]="2">
+<mat-tab-group mat-stretch-tabs="false" [selectedIndex]="2">
     <mat-tab label="API REFERENCE">
         <mat-card class="demo-card demo-basic">
             <!-- <markdown [url]="'https://raw.githubusercontent.com/DSI-HUG/dejajs-components/develop/projects/deja-js/component/splitter/readme.md'"></markdown> -->
diff --git a/projects/demo-app/src/app/splitter/splitter-demo.component.scss b/projects/demo-app/src/app/splitter/splitter-demo.component.scss
index ea9d791..9cc3257 100644
--- a/projects/demo-app/src/app/splitter/splitter-demo.component.scss
+++ b/projects/demo-app/src/app/splitter/splitter-demo.component.scss
@@ -10,19 +10,19 @@ app-splitter-demo {
         }
     }
 
-    .mat-tab-group {
+    .mat-mdc-tab-group {
         display: flex;
         height: 100%;
 
-        .mat-tab-body-wrapper {
+        .mat-mdc-tab-body-wrapper {
             flex: 1;
 
-            .mat-tab-body {
-                .mat-tab-body-content {
+            .mat-mdc-tab-body {
+                .mat-mdc-tab-body-content {
                     display: flex;
                     flex-direction: column;
 
-                    .mat-card {
+                    .mat-mdc-card {
                         flex: 1 1 100%;
                         overflow: hidden;
                         min-height: 300px;
@@ -32,16 +32,16 @@ app-splitter-demo {
                 &.fixed-height {
                     overflow: hidden;
 
-                    .mat-tab-body-content {
+                    .mat-mdc-tab-body-content {
                         overflow: hidden;
 
-                        .mat-card {
+                        .mat-mdc-card {
                             height: calc(100% - 10px);
                             margin: 0;
                             display: flex;
                             flex-direction: column;
 
-                            .mat-card-content {
+                            .mat-mdc-card-content {
                                 flex: 1;
 
                                 ngx-splitter {
diff --git a/projects/demo-app/src/app/splitter/splitter-demo.component.ts b/projects/demo-app/src/app/splitter/splitter-demo.component.ts
index 987f810..459587b 100644
--- a/projects/demo-app/src/app/splitter/splitter-demo.component.ts
+++ b/projects/demo-app/src/app/splitter/splitter-demo.component.ts
@@ -1,6 +1,6 @@
 import { ChangeDetectionStrategy, Component, ViewEncapsulation } from '@angular/core';
-import { MatLegacyCardModule as MatCardModule } from '@angular/material/legacy-card';
-import { MatLegacyTabsModule as MatTabsModule } from '@angular/material/legacy-tabs';
+import { MatCardModule } from '@angular/material/card';
+import { MatTabsModule } from '@angular/material/tabs';
 import { MatToolbarModule } from '@angular/material/toolbar';
 import { NgxSplitAreaDirective, NgxSplitterComponent } from '@hug/ngx-splitter';