diff --git a/projects/player/src/app/app.module.ts b/projects/player/src/app/app.module.ts
index 1b47a94a2c439aa2a2c27f102d4272306f12fb35..e6f583b0b88f298166d98b5b1343aac76b060806 100644
--- a/projects/player/src/app/app.module.ts
+++ b/projects/player/src/app/app.module.ts
@@ -4,7 +4,6 @@ import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { CommonModule } from '@angular/common';
 import { createCustomElement } from '@angular/elements';
 import { TranslateLoader, TranslateModule } from '@ngx-translate/core';
-import { OverlayModule } from '@angular/cdk/overlay';
 import { AppComponent } from './app.component';
 import { PageComponent } from './components/page/page.component';
 import { SectionComponent } from './components/section/section.component';
@@ -51,8 +50,7 @@ import { ElementComponent } from './components/element/element.component';
         provide: TranslateLoader,
         useClass: PlayerTranslateLoader
       }
-    }),
-    OverlayModule
+    })
   ],
   providers: []
 })
diff --git a/projects/player/src/app/components/layout/layout.component.css b/projects/player/src/app/components/layout/layout.component.css
index 565d80bc13200612d7a687cf5cfca4a1ada287c7..645f8d994274b196a297e664229272c101f1eb36 100644
--- a/projects/player/src/app/components/layout/layout.component.css
+++ b/projects/player/src/app/components/layout/layout.component.css
@@ -25,10 +25,17 @@
 
 .layout-flex-container{
   height: 100vh;
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+}
+
+.pages-container{
+  height: 100%;
+  overflow: auto;
 }
 
 .keyboard {
-  position: absolute;
-  bottom: 0;
-  width: 100vw;
+
+  width: 100%;
 }
diff --git a/projects/player/src/app/components/layout/layout.component.html b/projects/player/src/app/components/layout/layout.component.html
index 0401acd90ca2530a56df7ba586c0f83147d0c7f3..0dbb760f55e1297ed379ac532f61679417c3fad2 100644
--- a/projects/player/src/app/components/layout/layout.component.html
+++ b/projects/player/src/app/components/layout/layout.component.html
@@ -1,22 +1,16 @@
 <div class="layout-container">
-  <div class="layout-flex-container"
-       cdkOverlayOrigin #trigger="cdkOverlayOrigin"
-       [fxLayout]="layoutAlignment">
-    <ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'top' || alwaysVisiblePagePosition === 'left' ?
-      alwaysVisiblePageView :
-      scrollPagesView"></ng-container>
-    <ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'bottom' || alwaysVisiblePagePosition === 'right' ?
-      alwaysVisiblePageView :
-      scrollPagesView"></ng-container>
+  <div class="layout-flex-container">
+    <div class="pages-container"
+         [fxLayout]="layoutAlignment">
+      <ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'top' || alwaysVisiblePagePosition === 'left' ?
+        alwaysVisiblePageView :
+        scrollPagesView"></ng-container>
+      <ng-container *ngTemplateOutlet="alwaysVisiblePagePosition === 'bottom' || alwaysVisiblePagePosition === 'right' ?
+        alwaysVisiblePageView :
+        scrollPagesView"></ng-container>
+    </div>
+    <app-keyboard *ngIf="isKeyboardOpen" class="keyboard"></app-keyboard>
   </div>
-
-  <ng-template
-      cdk-connected-overlay
-      [cdkConnectedOverlayOrigin]="trigger"
-      [cdkConnectedOverlayOpen]="isKeyboardOpen"
-  >
-    <app-keyboard class="keyboard"></app-keyboard>
-  </ng-template>
 </div>
 
 <ng-template #alwaysVisiblePageView>
@@ -25,7 +19,7 @@
        [style.max-height.%]="aspectRatioColumn.alwaysVisiblePage"
        [style.max-width.%]="aspectRatioRow.alwaysVisiblePage">
     <div #alwaysVisiblePageContainer
-         [class.center-pages]="layoutAlignment === 'column'"
+         [class.center-pages]="layoutAlignment === 'column' || !hasScrollPages"
          [class.left-container]="alwaysVisiblePagePosition === 'left'"
          [style.max-width]="containerMaxWidth.alwaysVisiblePage">
       <div appHideFirstChild
@@ -52,7 +46,7 @@
          [style.max-width.%]="aspectRatioRow.scrollPages"
          [class.concat-scroll-snap]="scrollPageMode === 'concat-scroll-snap'">
       <div #pagesScrolledContainer
-           [class.center-pages]="layoutAlignment === 'column'"
+           [class.center-pages]="layoutAlignment === 'column' || !alwaysVisiblePage"
            [class.left-container]="alwaysVisiblePage && alwaysVisiblePagePosition === 'right'"
            [style.max-width]="containerMaxWidth.scrollPages">
         <ng-container
diff --git a/projects/player/src/app/components/layout/layout.component.ts b/projects/player/src/app/components/layout/layout.component.ts
index 41b6076a2ab07f61c766c496bf98aa5ceb79ac8e..2f08a4f2005aecd6bffdcac5c6c5565c76e054ba 100644
--- a/projects/player/src/app/components/layout/layout.component.ts
+++ b/projects/player/src/app/components/layout/layout.component.ts
@@ -72,7 +72,11 @@ export class LayoutComponent implements OnInit, OnDestroy {
       (scrollPage: UnitPage): number => this.pages.indexOf(scrollPage)
     );
     this.validPagesDetermined.emit(this.scrollPages.map((page: UnitPage, index: number): Record<string, string> => (
-      { [index.toString(10)]: `${this.translateService.instant('pageIndication', { index: index + 1 })}` })));
+      {
+        [index.toString(10)]: `${this.translateService.instant('pageIndication', {
+          index: index + 1
+        })}`
+      })));
   }
 
   private initLayout(): void {
@@ -88,9 +92,9 @@ export class LayoutComponent implements OnInit, OnDestroy {
     this.maxWidth.allPages = Math.max(this.maxWidth.alwaysVisiblePage, this.maxWidth.scrollPages);
 
     this.aspectRatioRow.alwaysVisiblePage = this.getAspectRatio('row', 0);
-    this.aspectRatioRow.scrollPages = this.getAspectRatio('row', -100);
+    this.aspectRatioRow.scrollPages = this.getAspectRatio('row', 100);
     this.aspectRatioColumn.alwaysVisiblePage = this.getAspectRatio('column', 0);
-    this.aspectRatioColumn.scrollPages = this.getAspectRatio('column', -100);
+    this.aspectRatioColumn.scrollPages = this.getAspectRatio('column', 100);
 
     this.containerMaxWidth.alwaysVisiblePage = this.getContainerMaxWidth(
       !(this.alwaysVisiblePage?.hasMaxWidth),
@@ -110,7 +114,7 @@ export class LayoutComponent implements OnInit, OnDestroy {
   }
 
   private getAspectRatio(alignment: string, offset: number) : number {
-    return this.alwaysVisiblePage && this.layoutAlignment === alignment ?
+    return this.alwaysVisiblePage && this.hasScrollPages && this.layoutAlignment === alignment ?
       Math.abs(this.alwaysVisiblePage.alwaysVisibleAspectRatio - offset) : 100;
   }