diff --git a/scripts/langindex.json b/scripts/langindex.json
index 1d6bf8eae..c87296df8 100644
--- a/scripts/langindex.json
+++ b/scripts/langindex.json
@@ -344,6 +344,7 @@
   "addon.mod_assign_submission_onlinetext.pluginname": "assignsubmission_onlinetext",
   "addon.mod_book.errorchapter": "book",
   "addon.mod_book.modulenameplural": "book",
+  "addon.mod_book.toc": "book",
   "addon.mod_chat.beep": "chat",
   "addon.mod_chat.chatreport": "chat",
   "addon.mod_chat.currentusers": "chat",
@@ -752,6 +753,7 @@
   "addon.mod_scorm.scormstatusnotdownloaded": "local_moodlemobileapp",
   "addon.mod_scorm.scormstatusoutdated": "local_moodlemobileapp",
   "addon.mod_scorm.suspended": "scorm",
+  "addon.mod_scorm.toc": "scorm",
   "addon.mod_scorm.warningofflinedatadeleted": "local_moodlemobileapp",
   "addon.mod_scorm.warningsynconlineincomplete": "local_moodlemobileapp",
   "addon.mod_survey.cannotsubmitsurvey": "local_moodlemobileapp",
diff --git a/src/addon/mod/book/components/components.module.ts b/src/addon/mod/book/components/components.module.ts
index b0ace2f26..54e83ef50 100644
--- a/src/addon/mod/book/components/components.module.ts
+++ b/src/addon/mod/book/components/components.module.ts
@@ -20,12 +20,10 @@ import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
 import { CoreCourseComponentsModule } from '@core/course/components/components.module';
 import { AddonModBookIndexComponent } from './index/index';
-import { AddonModBookTocPopoverComponent } from './toc-popover/toc-popover';
 
 @NgModule({
     declarations: [
-        AddonModBookIndexComponent,
-        AddonModBookTocPopoverComponent
+        AddonModBookIndexComponent
     ],
     imports: [
         CommonModule,
@@ -38,12 +36,10 @@ import { AddonModBookTocPopoverComponent } from './toc-popover/toc-popover';
     providers: [
     ],
     exports: [
-        AddonModBookIndexComponent,
-        AddonModBookTocPopoverComponent
+        AddonModBookIndexComponent
     ],
     entryComponents: [
-        AddonModBookIndexComponent,
-        AddonModBookTocPopoverComponent
+        AddonModBookIndexComponent
     ]
 })
 export class AddonModBookComponentsModule {}
diff --git a/src/addon/mod/book/components/index/addon-mod-book-index.html b/src/addon/mod/book/components/index/addon-mod-book-index.html
index 51fa95154..5d872fd78 100644
--- a/src/addon/mod/book/components/index/addon-mod-book-index.html
+++ b/src/addon/mod/book/components/index/addon-mod-book-index.html
@@ -1,6 +1,6 @@
 <!-- Buttons to add to the header. -->
 <core-navbar-buttons end>
-    <button ion-button icon-only (click)="showToc($event)">
+    <button ion-button icon-only (click)="showToc($event)" [attr.aria-label]="'addon.mod_book.toc' | translate" aria-haspopup="true">
         <ion-icon name="bookmark"></ion-icon>
     </button>
     <core-context-menu>
diff --git a/src/addon/mod/book/components/index/index.ts b/src/addon/mod/book/components/index/index.ts
index bcb78e821..75ad3beb1 100644
--- a/src/addon/mod/book/components/index/index.ts
+++ b/src/addon/mod/book/components/index/index.ts
@@ -13,13 +13,12 @@
 // limitations under the License.
 
 import { Component, Optional, Injector, Input } from '@angular/core';
-import { Content, PopoverController } from 'ionic-angular';
+import { Content, ModalController } from 'ionic-angular';
 import { CoreAppProvider } from '@providers/app';
 import { CoreCourseProvider } from '@core/course/providers/course';
 import { CoreCourseModuleMainResourceComponent } from '@core/course/classes/main-resource-component';
 import { AddonModBookProvider, AddonModBookContentsMap, AddonModBookTocChapter } from '../../providers/book';
 import { AddonModBookPrefetchHandler } from '../../providers/prefetch-handler';
-import { AddonModBookTocPopoverComponent } from '../../components/toc-popover/toc-popover';
 
 /**
  * Component that displays a book.
@@ -42,7 +41,7 @@ export class AddonModBookIndexComponent extends CoreCourseModuleMainResourceComp
 
     constructor(injector: Injector, private bookProvider: AddonModBookProvider, private courseProvider: CoreCourseProvider,
             private appProvider: CoreAppProvider, private prefetchDelegate: AddonModBookPrefetchHandler,
-            private popoverCtrl: PopoverController, @Optional() private content: Content) {
+            private modalCtrl: ModalController, @Optional() private content: Content) {
         super(injector);
     }
 
@@ -61,15 +60,23 @@ export class AddonModBookIndexComponent extends CoreCourseModuleMainResourceComp
      * @param {MouseEvent} event Event.
      */
     showToc(event: MouseEvent): void {
-        const popover = this.popoverCtrl.create(AddonModBookTocPopoverComponent, {
-            chapters: this.chapters
+        // Create the toc modal.
+        const modal =  this.modalCtrl.create('AddonModBookTocPage', {
+            chapters: this.chapters,
+            selected: this.currentChapter
+        }, { cssClass: 'core-modal-lateral',
+            showBackdrop: true,
+            enableBackdropDismiss: true,
+            enterAnimation: 'core-modal-lateral-transition',
+            leaveAnimation: 'core-modal-lateral-transition' });
+
+        modal.onDidDismiss((chapterId) => {
+            if (chapterId) {
+                this.changeChapter(chapterId);
+            }
         });
 
-        popover.onDidDismiss((chapterId) => {
-            this.changeChapter(chapterId);
-        });
-
-        popover.present({
+        modal.present({
             ev: event
         });
     }
diff --git a/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html b/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html
deleted file mode 100644
index 6d3dca6f0..000000000
--- a/src/addon/mod/book/components/toc-popover/addon-mod-assign-submission-toc-popover.html
+++ /dev/null
@@ -1,5 +0,0 @@
-<ion-list>
-    <a ion-item text-wrap *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)" detail-none>
-        <p [attr.padding-left]="chapter.level == 1 ? true : null">{{chapter.title}}</p>
-    </a>
-</ion-list>
diff --git a/src/addon/mod/book/lang/en.json b/src/addon/mod/book/lang/en.json
index bf58bf921..7d1140fe4 100644
--- a/src/addon/mod/book/lang/en.json
+++ b/src/addon/mod/book/lang/en.json
@@ -1,4 +1,5 @@
 {
     "errorchapter": "Error reading chapter of book.",
-    "modulenameplural": "Books"
+    "modulenameplural": "Books",
+    "toc": "Table of contents"
 }
\ No newline at end of file
diff --git a/src/addon/mod/book/pages/toc/toc.html b/src/addon/mod/book/pages/toc/toc.html
new file mode 100644
index 000000000..30e22bea0
--- /dev/null
+++ b/src/addon/mod/book/pages/toc/toc.html
@@ -0,0 +1,19 @@
+<ion-header>
+    <ion-navbar core-back-button>
+        <ion-title>{{ 'addon.mod_book.toc' | translate }}</ion-title>
+        <ion-buttons end>
+            <button ion-button icon-only (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon name="close"></ion-icon>
+            </button>
+        </ion-buttons>
+    </ion-navbar>
+</ion-header>
+<ion-content>
+    <nav>
+        <ion-list>
+            <a ion-item text-wrap *ngFor="let chapter of chapters" (click)="loadChapter(chapter.id)" [class.core-nav-item-selected]="selected == chapter.id">
+                <p [attr.padding-left]="chapter.level == 1 ? true : null">{{chapter.title}}</p>
+            </a>
+        </ion-list>
+    </nav>
+</ion-content>
diff --git a/src/addon/mod/book/pages/toc/toc.module.ts b/src/addon/mod/book/pages/toc/toc.module.ts
new file mode 100644
index 000000000..88e436a25
--- /dev/null
+++ b/src/addon/mod/book/pages/toc/toc.module.ts
@@ -0,0 +1,31 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { TranslateModule } from '@ngx-translate/core';
+import { CoreDirectivesModule } from '@directives/directives.module';
+import { AddonModBookTocPage } from './toc';
+
+@NgModule({
+    declarations: [
+        AddonModBookTocPage,
+    ],
+    imports: [
+        CoreDirectivesModule,
+        IonicPageModule.forChild(AddonModBookTocPage),
+        TranslateModule.forChild()
+    ],
+})
+export class AddonModBookTocPageModule {}
diff --git a/src/addon/mod/book/components/toc-popover/toc-popover.ts b/src/addon/mod/book/pages/toc/toc.ts
similarity index 71%
rename from src/addon/mod/book/components/toc-popover/toc-popover.ts
rename to src/addon/mod/book/pages/toc/toc.ts
index 416044a3f..8048eacb8 100644
--- a/src/addon/mod/book/components/toc-popover/toc-popover.ts
+++ b/src/addon/mod/book/pages/toc/toc.ts
@@ -13,21 +13,24 @@
 // limitations under the License.
 
 import { Component } from '@angular/core';
-import { NavParams, ViewController } from 'ionic-angular';
+import { IonicPage, NavParams, ViewController } from 'ionic-angular';
 import { AddonModBookTocChapter } from '../../providers/book';
 
 /**
- * Component to display the TOC of a book.
+ * Modal to display the TOC of a book.
  */
+@IonicPage({ segment: 'addon-mod-book-toc-modal' })
 @Component({
-    selector: 'addon-mod-book-toc-popover',
-    templateUrl: 'addon-mod-assign-submission-toc-popover.html'
+    selector: 'page-addon-mod-book-toc',
+    templateUrl: 'toc.html'
 })
-export class AddonModBookTocPopoverComponent {
+export class AddonModBookTocPage {
     chapters: AddonModBookTocChapter[];
+    selected: number;
 
     constructor(navParams: NavParams, private viewCtrl: ViewController) {
         this.chapters = navParams.get('chapters') || [];
+        this.selected = navParams.get('selected');
     }
 
     /**
@@ -38,4 +41,11 @@ export class AddonModBookTocPopoverComponent {
     loadChapter(id: string): void {
         this.viewCtrl.dismiss(id);
     }
+
+    /**
+     * Close modal.
+     */
+    closeModal(): void {
+        this.viewCtrl.dismiss();
+    }
 }
diff --git a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.html b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.html
index a68cdaa43..9398439f7 100644
--- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.html
+++ b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.html
@@ -21,7 +21,7 @@
                 <span *ngIf="!pageInstance.showAll">{{ 'addon.mod_quiz.showall' | translate }}</span>
                 <span *ngIf="pageInstance.showAll">{{ 'addon.mod_quiz.showeachpage' | translate }}</span>
             </a>
-            <a ion-item text-wrap *ngFor="let question of pageInstance.navigation" class="{{question.stateClass}}" [ngClass]='{"addon-mod_quiz-selected": !pageInstance.showSummary && pageInstance.attempt.currentpage == question.page}' (click)="loadPage(question.page, question.slot)">
+            <a ion-item text-wrap *ngFor="let question of pageInstance.navigation" class="{{question.stateClass}}" [ngClass]='{"core-nav-item-selected": !pageInstance.showSummary && pageInstance.attempt.currentpage == question.page}' (click)="loadPage(question.page, question.slot)">
                 <span *ngIf="question.number">{{ 'core.question.questionno' | translate:{$a: question.number} }}</span>
                 <span *ngIf="!question.number">{{ 'core.question.information' | translate }}</span>
                 <core-icon item-content *ngIf="!question.number" name="information-circle" color="info"></core-icon>
diff --git a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
index 5b3b72890..6576971e0 100644
--- a/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
+++ b/src/addon/mod/quiz/pages/navigation-modal/navigation-modal.scss
@@ -1,19 +1,4 @@
 ion-app.app-root page-addon-mod-quiz-navigation-modal {
-    .addon-mod_quiz-selected, .item.addon-mod_quiz-selected {
-        @include border-start(5px, solid, $core-splitview-selected);
-        font-weight: bold;
-
-        &.item-md {
-            @include padding(null, null, null, $item-md-padding-start - 5px);
-        }
-        &.item-ios {
-            @include padding(null, null, null, $item-ios-padding-start - 5px);
-        }
-        &.item-wp {
-            @include padding(null, null, null, $item-wp-padding-start - 5px);
-        }
-    }
-
     .item.core-question-correct,
     .item.core-question-incorrect,
     .item.core-question-notanswered,
diff --git a/src/addon/mod/quiz/pages/player/player.ts b/src/addon/mod/quiz/pages/player/player.ts
index 456908e60..12bf38f2b 100644
--- a/src/addon/mod/quiz/pages/player/player.ts
+++ b/src/addon/mod/quiz/pages/player/player.ts
@@ -96,7 +96,11 @@ export class AddonModQuizPlayerPage implements OnInit, OnDestroy {
         // Create the navigation modal.
         this.navigationModal = modalCtrl.create('AddonModQuizNavigationModalPage', {
             page: this
-        }, { cssClass: 'core-modal-lateral' });
+        }, { cssClass: 'core-modal-lateral',
+            showBackdrop: true,
+            enableBackdropDismiss: true,
+            enterAnimation: 'core-modal-lateral-transition',
+            leaveAnimation: 'core-modal-lateral-transition' });
     }
 
     /**
diff --git a/src/addon/mod/quiz/pages/review/review.ts b/src/addon/mod/quiz/pages/review/review.ts
index bd5825901..6d1bc331d 100644
--- a/src/addon/mod/quiz/pages/review/review.ts
+++ b/src/addon/mod/quiz/pages/review/review.ts
@@ -69,7 +69,11 @@ export class AddonModQuizReviewPage implements OnInit {
         this.navigationModal = modalCtrl.create('AddonModQuizNavigationModalPage', {
             isReview: true,
             page: this
-        }, { cssClass: 'core-modal-lateral' });
+        }, { cssClass: 'core-modal-lateral',
+            showBackdrop: true,
+            enableBackdropDismiss: true,
+            enterAnimation: 'core-modal-lateral-transition',
+            leaveAnimation: 'core-modal-lateral-transition' });
     }
 
     /**
diff --git a/src/addon/mod/scorm/components/components.module.ts b/src/addon/mod/scorm/components/components.module.ts
index 197d63ad1..2a9c6569b 100644
--- a/src/addon/mod/scorm/components/components.module.ts
+++ b/src/addon/mod/scorm/components/components.module.ts
@@ -20,12 +20,10 @@ import { CoreComponentsModule } from '@components/components.module';
 import { CoreDirectivesModule } from '@directives/directives.module';
 import { CoreCourseComponentsModule } from '@core/course/components/components.module';
 import { AddonModScormIndexComponent } from './index/index';
-import { AddonModScormTocPopoverComponent } from './toc-popover/toc-popover';
 
 @NgModule({
     declarations: [
-        AddonModScormIndexComponent,
-        AddonModScormTocPopoverComponent
+        AddonModScormIndexComponent
     ],
     imports: [
         CommonModule,
@@ -38,12 +36,10 @@ import { AddonModScormTocPopoverComponent } from './toc-popover/toc-popover';
     providers: [
     ],
     exports: [
-        AddonModScormIndexComponent,
-        AddonModScormTocPopoverComponent
+        AddonModScormIndexComponent
     ],
     entryComponents: [
-        AddonModScormIndexComponent,
-        AddonModScormTocPopoverComponent
+        AddonModScormIndexComponent
     ]
 })
 export class AddonModScormComponentsModule {}
diff --git a/src/addon/mod/scorm/components/toc-popover/addon-mod-scorm-toc-popover.html b/src/addon/mod/scorm/components/toc-popover/addon-mod-scorm-toc-popover.html
deleted file mode 100644
index 8b4dffff1..000000000
--- a/src/addon/mod/scorm/components/toc-popover/addon-mod-scorm-toc-popover.html
+++ /dev/null
@@ -1,19 +0,0 @@
-<ion-list>
-    <ion-item text-wrap *ngIf="attemptToContinue">
-        <p>{{ 'addon.mod_scorm.dataattemptshown' | translate:{number: attemptToContinue} }}</p>
-    </ion-item>
-    <ion-item text-center *ngIf="isBrowse">
-        <p>{{ 'addon.mod_scorm.browsemode' | translate }}</p>
-    </ion-item>
-    <ion-item text-center *ngIf="isReview">
-        <p>{{ 'addon.mod_scorm.reviewmode' | translate }}</p>
-    </ion-item>
-
-    <!-- List of SCOs. -->
-    <ng-container *ngFor="let sco of toc">
-        <a *ngIf="sco.isvisible" ion-item text-wrap [ngClass]="['core-padding-' + sco.level]" (click)="loadSco(sco)" [attr.disabled]="!sco.prereq || !sco.launch ? true : null" detail-none>
-            <img [src]="sco.image.url" [alt]="sco.image.description" />
-            <span>{{ sco.title }}</span>
-        </a>
-    </ng-container>
-</ion-list>
diff --git a/src/addon/mod/scorm/lang/en.json b/src/addon/mod/scorm/lang/en.json
index cef1c9efe..c5b06c51a 100644
--- a/src/addon/mod/scorm/lang/en.json
+++ b/src/addon/mod/scorm/lang/en.json
@@ -47,6 +47,7 @@
     "scormstatusnotdownloaded": "This SCORM package is not downloaded. It will be automatically downloaded when you open it.",
     "scormstatusoutdated": "This SCORM package has been modified since the last download. It will be automatically downloaded when you open it.",
     "suspended": "Suspended",
+    "toc": "TOC",
     "warningofflinedatadeleted": "Some offline data from attempt {{number}} has been discarded because it couldn't be counted as a new attempt.",
     "warningsynconlineincomplete": "Some attempts couldn't be synchronised with the site because the last online attempt is not yet finished. Please finish the online attempt first."
 }
\ No newline at end of file
diff --git a/src/addon/mod/scorm/pages/player/player.html b/src/addon/mod/scorm/pages/player/player.html
index 0fca7e9e9..bdf47bd53 100644
--- a/src/addon/mod/scorm/pages/player/player.html
+++ b/src/addon/mod/scorm/pages/player/player.html
@@ -3,7 +3,7 @@
         <ion-title><core-format-text [text]="title"></core-format-text></ion-title>
 
         <ion-buttons end>
-            <button *ngIf="showToc && !loadingToc && toc && toc.length" ion-button icon-only (click)="openToc($event)">
+            <button *ngIf="showToc && !loadingToc && toc && toc.length" ion-button icon-only (click)="openToc($event)"[attr.aria-label]="'addon.mod_scorm.toc' | translate" aria-haspopup="true">
                 <ion-icon name="bookmark"></ion-icon>
             </button>
             <ion-spinner *ngIf="showToc && loadingToc"></ion-spinner>
diff --git a/src/addon/mod/scorm/pages/player/player.ts b/src/addon/mod/scorm/pages/player/player.ts
index bbe6b5314..49f2cd000 100644
--- a/src/addon/mod/scorm/pages/player/player.ts
+++ b/src/addon/mod/scorm/pages/player/player.ts
@@ -13,7 +13,7 @@
 // limitations under the License.
 
 import { Component, OnInit, OnDestroy } from '@angular/core';
-import { IonicPage, NavParams, PopoverController } from 'ionic-angular';
+import { IonicPage, NavParams, ModalController } from 'ionic-angular';
 import { CoreEventsProvider } from '@providers/events';
 import { CoreSitesProvider } from '@providers/sites';
 import { CoreSyncProvider } from '@providers/sync';
@@ -24,7 +24,6 @@ import { AddonModScormProvider, AddonModScormAttemptCountResult } from '../../pr
 import { AddonModScormHelperProvider } from '../../providers/helper';
 import { AddonModScormSyncProvider } from '../../providers/scorm-sync';
 import { AddonModScormDataModel12 } from '../../classes/data-model-12';
-import { AddonModScormTocPopoverComponent } from '../../components/toc-popover/toc-popover';
 
 /**
  * Page that allows playing a SCORM.
@@ -65,7 +64,7 @@ export class AddonModScormPlayerPage implements OnInit, OnDestroy {
     protected launchPrevObserver: any;
     protected goOfflineObserver: any;
 
-    constructor(navParams: NavParams, protected popoverCtrl: PopoverController, protected eventsProvider: CoreEventsProvider,
+    constructor(navParams: NavParams, protected modalCtrl: ModalController, protected eventsProvider: CoreEventsProvider,
             protected sitesProvider: CoreSitesProvider, protected syncProvider: CoreSyncProvider,
             protected domUtils: CoreDomUtilsProvider, protected timeUtils: CoreTimeUtilsProvider,
             protected scormProvider: AddonModScormProvider, protected scormHelper: AddonModScormHelperProvider,
@@ -382,20 +381,25 @@ export class AddonModScormPlayerPage implements OnInit, OnDestroy {
      * @param {MouseEvent} event Event.
      */
     openToc(event: MouseEvent): void {
-        const popover = this.popoverCtrl.create(AddonModScormTocPopoverComponent, {
+        const modal = this.modalCtrl.create('AddonModScormTocPage', {
             toc: this.toc,
             attemptToContinue: this.attemptToContinue,
-            mode: this.mode
-        });
+            mode: this.mode,
+            selected: this.currentSco && this.currentSco.id
+        }, { cssClass: 'core-modal-lateral',
+            showBackdrop: true,
+            enableBackdropDismiss: true,
+            enterAnimation: 'core-modal-lateral-transition',
+            leaveAnimation: 'core-modal-lateral-transition' });
 
-        // If the popover sends back a SCO, load it.
-        popover.onDidDismiss((sco) => {
+        // If the modal sends back a SCO, load it.
+        modal.onDidDismiss((sco) => {
             if (sco) {
                 this.loadSco(sco);
             }
         });
 
-        popover.present({
+        modal.present({
             ev: event
         });
     }
diff --git a/src/addon/mod/scorm/pages/toc/toc.html b/src/addon/mod/scorm/pages/toc/toc.html
new file mode 100644
index 000000000..c9a0c71c4
--- /dev/null
+++ b/src/addon/mod/scorm/pages/toc/toc.html
@@ -0,0 +1,33 @@
+<ion-header>
+    <ion-navbar core-back-button>
+        <ion-title>{{ 'addon.mod_scorm.toc' | translate }}</ion-title>
+        <ion-buttons end>
+            <button ion-button icon-only (click)="closeModal()" [attr.aria-label]="'core.close' | translate">
+                <ion-icon name="close"></ion-icon>
+            </button>
+        </ion-buttons>
+    </ion-navbar>
+</ion-header>
+<ion-content>
+    <nav>
+        <ion-list>
+            <ion-item text-wrap *ngIf="attemptToContinue">
+                <p>{{ 'addon.mod_scorm.dataattemptshown' | translate:{number: attemptToContinue} }}</p>
+            </ion-item>
+            <ion-item text-center *ngIf="isBrowse">
+                <p>{{ 'addon.mod_scorm.browsemode' | translate }}</p>
+            </ion-item>
+            <ion-item text-center *ngIf="isReview">
+                <p>{{ 'addon.mod_scorm.reviewmode' | translate }}</p>
+            </ion-item>
+
+            <!-- List of SCOs. -->
+            <ng-container *ngFor="let sco of toc">
+                <a *ngIf="sco.isvisible" ion-item text-wrap [ngClass]="'core-padding-' + sco.level" [class.core-nav-item-selected]="selected == sco.id" (click)="loadSco(sco)" [attr.disabled]="!sco.prereq || !sco.launch ? true : null" [attr.detail-none]="!sco.prereq || !sco.launch ? true : null">
+                    <img [src]="sco.image.url" [alt]="sco.image.description" />
+                    <span>{{ sco.title }}</span>
+                </a>
+            </ng-container>
+        </ion-list>
+    </nav>
+</ion-content>
diff --git a/src/addon/mod/scorm/pages/toc/toc.module.ts b/src/addon/mod/scorm/pages/toc/toc.module.ts
new file mode 100644
index 000000000..4f7684d1a
--- /dev/null
+++ b/src/addon/mod/scorm/pages/toc/toc.module.ts
@@ -0,0 +1,31 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { NgModule } from '@angular/core';
+import { IonicPageModule } from 'ionic-angular';
+import { TranslateModule } from '@ngx-translate/core';
+import { CoreDirectivesModule } from '@directives/directives.module';
+import { AddonModScormTocPage } from './toc';
+
+@NgModule({
+    declarations: [
+        AddonModScormTocPage,
+    ],
+    imports: [
+        CoreDirectivesModule,
+        IonicPageModule.forChild(AddonModScormTocPage),
+        TranslateModule.forChild()
+    ],
+})
+export class AddonModScormTocPageModule {}
diff --git a/src/addon/mod/scorm/components/toc-popover/toc-popover.ts b/src/addon/mod/scorm/pages/toc/toc.ts
similarity index 76%
rename from src/addon/mod/scorm/components/toc-popover/toc-popover.ts
rename to src/addon/mod/scorm/pages/toc/toc.ts
index 7a8b51fb1..036196b6c 100644
--- a/src/addon/mod/scorm/components/toc-popover/toc-popover.ts
+++ b/src/addon/mod/scorm/pages/toc/toc.ts
@@ -13,27 +13,30 @@
 // limitations under the License.
 
 import { Component } from '@angular/core';
-import { NavParams, ViewController } from 'ionic-angular';
+import { IonicPage, NavParams, ViewController } from 'ionic-angular';
 import { AddonModScormProvider } from '../../providers/scorm';
 
 /**
- * Component to display the TOC of a SCORM.
+ * Modal to display the TOC of a SCORM.
  */
+@IonicPage({ segment: 'addon-mod-scorm-toc-modal' })
 @Component({
-    selector: 'addon-mod-scorm-toc-popover',
-    templateUrl: 'addon-mod-scorm-toc-popover.html'
+    selector: 'page-addon-mod-scorm-toc',
+    templateUrl: 'toc.html'
 })
-export class AddonModScormTocPopoverComponent {
+export class AddonModScormTocPage {
     toc: any[];
     isBrowse: boolean;
     isReview: boolean;
     attemptToContinue: number;
+    selected: number;
 
     constructor(navParams: NavParams, private viewCtrl: ViewController) {
         this.toc = navParams.get('toc') || [];
         this.attemptToContinue = navParams.get('attemptToContinue');
 
         const mode = navParams.get('mode');
+        this.selected = navParams.get('selected');
 
         this.isBrowse = mode === AddonModScormProvider.MODEBROWSE;
         this.isReview = mode === AddonModScormProvider.MODEREVIEW;
@@ -51,4 +54,11 @@ export class AddonModScormTocPopoverComponent {
 
         this.viewCtrl.dismiss(sco);
     }
+
+    /**
+     * Close modal.
+     */
+    closeModal(): void {
+        this.viewCtrl.dismiss();
+    }
 }
diff --git a/src/addon/mod/workshop/pages/phase/phase.scss b/src/addon/mod/workshop/pages/phase/phase.scss
index 6b909c4ea..f30416066 100644
--- a/src/addon/mod/workshop/pages/phase/phase.scss
+++ b/src/addon/mod/workshop/pages/phase/phase.scss
@@ -1,15 +1,6 @@
 ion-app.app-root page-addon-mod-workshop-phase-info {
     .core-workshop-phase-selected {
         background-color: $white;
-        @include border-start(5px, solid, $core-splitview-selected);
-        &.item-md {
-            @include padding(null, null, null, $item-md-padding-start - 5px);
-        }
-        &.item-ios {
-            @include padding(null, null, null, $item-ios-padding-start - 5px);
-        }
-        &.item-wp {
-            @include padding(null, null, null, $item-wp-padding-start - 5px);
-        }
+        @include core-selected-item($core-splitview-selected);
     }
 }
\ No newline at end of file
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 95751524c..fbcdc4cb5 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -31,6 +31,7 @@ import { ScreenOrientation } from '@ionic-native/screen-orientation';
 import { MoodleMobileApp } from './app.component';
 import { CoreInterceptor } from '@classes/interceptor';
 import { CorePageTransition } from '@classes/page-transition';
+import { CoreModalLateralTransition } from '@classes/modal-lateral-transition';
 import { CoreLoggerProvider } from '@providers/logger';
 import { CoreDbProvider } from '@providers/db';
 import { CoreAppProvider } from '@providers/app';
@@ -323,6 +324,7 @@ export class AppModule {
 
         // Set transition animation.
         config.setTransition('core-page-transition', CorePageTransition);
+        config.setTransition('core-modal-lateral-transition', CoreModalLateralTransition);
 
         // Decorate ion-content.
         this.decorateIonContent();
diff --git a/src/app/app.scss b/src/app/app.scss
index 679a902f5..f9c07d4f9 100644
--- a/src/app/app.scss
+++ b/src/app/app.scss
@@ -103,6 +103,10 @@ ion-app.app-root {
     border: 0;
   }
 
+  .core-nav-item-selected, .item.core-nav-item-selected {
+    @include core-selected-item($core-splitview-selected);
+  }
+
   // Recover borders on items inside cards.
   .card.with-borders .core-as-item,
   .core-as-item {
@@ -745,15 +749,21 @@ ion-app.app-root {
     height: 100% !important;
   }
 
-  @media only screen and (min-height: 600px) and (min-width: 768px) {
-      .core-modal-lateral  .modal-wrapper {
-        position: absolute;
-        @include position(0 !important, 0 !important, 0 !important, auto);
-        display: block;
-        height: 100% !important;
-        width: auto;
-        min-width: 400px;
-    }
+  @media only screen and (min-height: 400px) and (min-width: 300px) {
+      .core-modal-lateral {
+        .modal-wrapper {
+          position: absolute;
+          @include position(0 !important, 0 !important, 0 !important, auto);
+          display: block;
+          height: 100% !important;
+          width: auto;
+          min-width: 300px;
+          box-shadow: 0 28px 48px rgba(0, 0, 0, 0.4);
+        }
+        ion-backdrop {
+          visibility: visible;
+        }
+      }
   }
 
   .has-fab .scroll-content{
diff --git a/src/assets/lang/en.json b/src/assets/lang/en.json
index c883b3e34..80ea77457 100644
--- a/src/assets/lang/en.json
+++ b/src/assets/lang/en.json
@@ -344,6 +344,7 @@
     "addon.mod_assign_submission_onlinetext.pluginname": "Online text submissions",
     "addon.mod_book.errorchapter": "Error reading chapter of book.",
     "addon.mod_book.modulenameplural": "Books",
+    "addon.mod_book.toc": "Table of contents",
     "addon.mod_chat.beep": "Beep",
     "addon.mod_chat.chatreport": "Chat sessions",
     "addon.mod_chat.currentusers": "Current users",
@@ -752,6 +753,7 @@
     "addon.mod_scorm.scormstatusnotdownloaded": "This SCORM package is not downloaded. It will be automatically downloaded when you open it.",
     "addon.mod_scorm.scormstatusoutdated": "This SCORM package has been modified since the last download. It will be automatically downloaded when you open it.",
     "addon.mod_scorm.suspended": "Suspended",
+    "addon.mod_scorm.toc": "TOC",
     "addon.mod_scorm.warningofflinedatadeleted": "Some offline data from attempt {{number}} has been discarded because it couldn't be counted as a new attempt.",
     "addon.mod_scorm.warningsynconlineincomplete": "Some attempts couldn't be synchronised with the site because the last online attempt is not yet finished. Please finish the online attempt first.",
     "addon.mod_survey.cannotsubmitsurvey": "Sorry, there was a problem submitting your survey. Please try again.",
diff --git a/src/classes/modal-lateral-transition.ts b/src/classes/modal-lateral-transition.ts
new file mode 100644
index 000000000..69d4db3c0
--- /dev/null
+++ b/src/classes/modal-lateral-transition.ts
@@ -0,0 +1,72 @@
+// (C) Copyright 2015 Martin Dougiamas
+//
+// Licensed under the Apache License, Version 2.0 (the "License");
+// you may not use this file except in compliance with the License.
+// You may obtain a copy of the License at
+//
+//     http://www.apache.org/licenses/LICENSE-2.0
+//
+// Unless required by applicable law or agreed to in writing, software
+// distributed under the License is distributed on an "AS IS" BASIS,
+// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+// See the License for the specific language governing permissions and
+// limitations under the License.
+
+import { Animation } from 'ionic-angular/animations/animation';
+import { PageTransition } from 'ionic-angular/transitions/page-transition';
+
+/**
+ * Sliding transition for lateral modals.
+ */
+export class CoreModalLateralTransition extends PageTransition {
+    /**
+     * Animation.
+     */
+    init(): void {
+        const enteringView = this.enteringView;
+        const leavingView = this.leavingView;
+
+        const plt = this.plt;
+        const OFF_RIGHT = plt.isRTL ? '-100%' : '100%';
+
+        if (enteringView && enteringView.pageRef()) {
+            const ele = enteringView.pageRef().nativeElement;
+            const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
+            const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
+
+            wrapper.beforeStyles({ transform: 'translateX(' + OFF_RIGHT + ')', opacity: 0.8 });
+            wrapper.fromTo('transform', 'translateX(' + OFF_RIGHT + ')', 'translateX(0)');
+            wrapper.fromTo('opacity', 0.8, 1);
+            backdrop.fromTo('opacity', 0.01, 0.4);
+
+            this
+                .element(enteringView.pageRef())
+                .duration(300)
+                .easing('cubic-bezier(0.36,0.66,0.04,1)')
+                .add(wrapper)
+                .add(backdrop);
+        }
+
+        if (leavingView && leavingView.pageRef()) {
+            const ele = this.leavingView.pageRef().nativeElement;
+            const wrapper = new Animation(this.plt, ele.querySelector('.modal-wrapper'));
+            const contentWrapper = new Animation(this.plt, ele.querySelector('.wrapper'));
+            const backdrop = new Animation(this.plt, ele.querySelector('ion-backdrop'));
+
+            wrapper.beforeStyles({ transform: 'translateX(0)', opacity: 1 });
+            wrapper.fromTo('transform', 'translateX(0)', 'translateX(' + OFF_RIGHT + ')');
+            wrapper.fromTo('opacity', 1, 0.8);
+            contentWrapper.fromTo('opacity', 1, 0);
+            backdrop.fromTo('opacity', 0.4, 0);
+
+            this
+                .element(leavingView.pageRef())
+                .duration(300)
+                .easing('cubic-bezier(0.36,0.66,0.04,1)')
+                .add(contentWrapper)
+                .add(wrapper)
+                .add(backdrop);
+
+        }
+    }
+}
diff --git a/src/components/split-view/split-view.scss b/src/components/split-view/split-view.scss
index 893e7708c..5c399b5e5 100644
--- a/src/components/split-view/split-view.scss
+++ b/src/components/split-view/split-view.scss
@@ -21,17 +21,7 @@ ion-app.app-root core-split-view {
 
         .split-pane-side .core-split-item-selected {
             background-color: $gray-lighter;
-            @include safe-area-border-start(5px, solid, $core-splitview-selected);
-
-            &.item-md {
-                @include padding(null, null, null, $item-md-padding-start - 5px);
-            }
-            &.item-ios {
-                @include padding(null, null, null, $item-ios-padding-start - 5px);
-            }
-            &.item-wp {
-                @include padding(null, null, null, $item-wp-padding-start - 5px);
-            }
+            @include core-selected-item($core-splitview-selected);
         }
 
         .item-ios[detail-push] .item-inner,
diff --git a/src/theme/variables.scss b/src/theme/variables.scss
index da912fa66..80a7b6d61 100644
--- a/src/theme/variables.scss
+++ b/src/theme/variables.scss
@@ -473,6 +473,20 @@ $core-dd-question-colors: $white, $blue-light, #DCDCDC, #D8BFD8, #87CEFA, #DAA52
   }
 }
 
+@mixin core-selected-item($selected-color) {
+  @include border-start(5px, solid, $selected-color);
+
+  &.item-md {
+      @include padding(null, null, null, $item-md-padding-start - 5px);
+  }
+  &.item-ios {
+      @include padding(null, null, null, $item-ios-padding-start - 5px);
+  }
+  &.item-wp {
+      @include padding(null, null, null, $item-wp-padding-start - 5px);
+  }
+}
+
 // Font Awesome
 $fa-font-path: $font-path;
 @import "font-awesome";