diff --git a/projects/player/modules/key-input/components/keyboard/keyboard.component.html b/projects/player/modules/key-input/components/keyboard/keyboard.component.html
index 5b3e168d844fb7e18c575aa7ed99d6743b8bd42b..208a57d4ece931a258d995ec61eb174803e785dd 100644
--- a/projects/player/modules/key-input/components/keyboard/keyboard.component.html
+++ b/projects/player/modules/key-input/components/keyboard/keyboard.component.html
@@ -1,9 +1,7 @@
 <div class="keyboard-container"
      (mousedown)="$event.preventDefault(); $event.stopPropagation()">
   <div *ngIf="showFrenchCharacters"
-       fxLayout="row wrap"
-       fxLayoutAlign="space-between center"
-       class="specialCharacters">
+       class="specialCharacters fx-space-between-center-wrap">
     <aspect-keyboard-key *ngFor="let key of frenchRow; let i = index"
                   class="key"
                   [key]="key"
diff --git a/projects/player/modules/key-input/components/keyboard/keyboard.component.scss b/projects/player/modules/key-input/components/keyboard/keyboard.component.scss
index d4f61bb3eaa1143949fcffeaae49245c99acc554..b7c3606e7323b7d974d32ca28c09606fbc56bcae 100644
--- a/projects/player/modules/key-input/components/keyboard/keyboard.component.scss
+++ b/projects/player/modules/key-input/components/keyboard/keyboard.component.scss
@@ -10,6 +10,15 @@
   background-color: grey;
 }
 
+.fx-space-between-center-wrap {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+  flex-wrap: wrap;
+}
+
 .key {
   margin: 4px;
   min-height: 50px;
diff --git a/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.html b/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.html
index d7fd4ecbb4fdaf5106e6f8dd1fba1e4217b9f6d5..d5acb457686ba6f89ea8d58fb5d3f97f8ef41a94 100644
--- a/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.html
+++ b/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.html
@@ -1,6 +1,7 @@
 <div class="pages-container"
      cdkScrollable
-     [fxLayout]="layoutAlignment">
+     [class.fx-column-start-stretch]="layoutAlignment === 'column'"
+     [class.fx-row-start-stretch]="layoutAlignment === 'row'">
   <ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'top' || alwaysVisiblePagePosition === 'left' ?
     alwaysVisiblePageView :
     scrollPagesView"></ng-container>
diff --git a/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.css b/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.scss
similarity index 52%
rename from projects/player/src/app/components/layouts/pages-layout/pages-layout.component.css
rename to projects/player/src/app/components/layouts/pages-layout/pages-layout.component.scss
index f711044e92da311fed65016c8edc0583c449d118..16518f1edf8b00bf32a1a877c574e97e9393e094 100644
--- a/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.css
+++ b/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.scss
@@ -2,6 +2,22 @@
   scroll-snap-align: start;
 }
 
+.fx-column-start-stretch {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  align-items: stretch;
+}
+
+.fx-row-start-stretch {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  justify-content: start;
+  align-items: stretch;
+}
+
 .concat-scroll-snap {
   scroll-snap-type: y mandatory;
   scroll-padding: 0;
diff --git a/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.ts b/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.ts
index cf2ae2f82cf88f34c1a44e3a2126cb69af13d89c..034459b49f5f0064a20316260bfc29945c4482d3 100644
--- a/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.ts
+++ b/projects/player/src/app/components/layouts/pages-layout/pages-layout.component.ts
@@ -13,7 +13,7 @@ import { NativeEventService } from '../../../services/native-event.service';
 @Component({
   selector: 'aspect-pages-layout',
   templateUrl: './pages-layout.component.html',
-  styleUrls: ['./pages-layout.component.css']
+  styleUrls: ['./pages-layout.component.scss']
 })
 
 export class PagesLayoutComponent implements OnInit, AfterViewInit, OnDestroy {
diff --git a/projects/player/src/app/components/page-scroll-button/page-scroll-button.component.html b/projects/player/src/app/components/page-scroll-button/page-scroll-button.component.html
index 88def98ddac31c2f4b340aca63bf8678c6470d4f..f7f5360f8cb9e8b22b8759d284b30f64bb761a6b 100644
--- a/projects/player/src/app/components/page-scroll-button/page-scroll-button.component.html
+++ b/projects/player/src/app/components/page-scroll-button/page-scroll-button.component.html
@@ -1,6 +1,5 @@
 <ng-content></ng-content>
-<div fxLayout="column" fxLayoutAlign="center center"
-     class="scroll-button-container">
+<div class="fx-column-center-center scroll-button-container">
   <button *ngIf="isVisible.value"
           mat-fab
           class="scroll-button"
diff --git a/projects/player/src/app/components/page-scroll-button/page-scroll-button.component.scss b/projects/player/src/app/components/page-scroll-button/page-scroll-button.component.scss
index c394acefdc4ccf894b0294baae46c65c4bc86f57..ef0c7a25d30e4422948a0ea2dac03cca996f7720 100644
--- a/projects/player/src/app/components/page-scroll-button/page-scroll-button.component.scss
+++ b/projects/player/src/app/components/page-scroll-button/page-scroll-button.component.scss
@@ -16,3 +16,11 @@
   pointer-events: none;
   z-index: 100;
 }
+
+.fx-column-center-center {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}