diff --git a/src/addon/mod/book/components/components.module.ts b/src/addon/mod/book/components/components.module.ts
index b3db11442..b0ace2f26 100644
--- a/src/addon/mod/book/components/components.module.ts
+++ b/src/addon/mod/book/components/components.module.ts
@@ -21,13 +21,11 @@ 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';
-import { AddonModBookNavigationArrowsComponent } from './navigation-arrows/navigation-arrows';
 
 @NgModule({
     declarations: [
         AddonModBookIndexComponent,
-        AddonModBookTocPopoverComponent,
-        AddonModBookNavigationArrowsComponent
+        AddonModBookTocPopoverComponent
     ],
     imports: [
         CommonModule,
@@ -41,8 +39,7 @@ import { AddonModBookNavigationArrowsComponent } from './navigation-arrows/navig
     ],
     exports: [
         AddonModBookIndexComponent,
-        AddonModBookTocPopoverComponent,
-        AddonModBookNavigationArrowsComponent
+        AddonModBookTocPopoverComponent
     ],
     entryComponents: [
         AddonModBookIndexComponent,
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 0f9b9a735..32c49d009 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
@@ -18,9 +18,9 @@
     <core-course-module-description [description]="description" [component]="component" [componentId]="componentId"></core-course-module-description>
 
     <div padding>
-        <addon-mod-book-navigation-arrows [previous]="previousChapter" [next]="nextChapter" (action)="changeChapter($event)"></addon-mod-book-navigation-arrows>
+        <core-navigation-bar [previous]="previousChapter > 0 && previousChapter" [next]="nextChapter > 0 && nextChapter" (action)="changeChapter($event)"></core-navigation-bar>
         <core-format-text [component]="component" [componentId]="componentId" [text]="chapterContent"></core-format-text>
-        <addon-mod-book-navigation-arrows [previous]="previousChapter" [next]="nextChapter" (action)="changeChapter($event)"></addon-mod-book-navigation-arrows>
+        <core-navigation-bar [previous]="previousChapter > 0 && previousChapter" [next]="nextChapter > 0 && nextChapter" (action)="changeChapter($event)"></core-navigation-bar>
     </div>
 
 </core-loading>
diff --git a/src/addon/mod/book/components/navigation-arrows/addon-mod-assign-submission-navigation-arrows.html b/src/addon/mod/book/components/navigation-arrows/addon-mod-assign-submission-navigation-arrows.html
deleted file mode 100644
index 44e6a24d4..000000000
--- a/src/addon/mod/book/components/navigation-arrows/addon-mod-assign-submission-navigation-arrows.html
+++ /dev/null
@@ -1,14 +0,0 @@
-<ion-grid>
-    <ion-row>
-        <ion-col>
-            <a ion-button icon-only clear *ngIf="previous > 0" (click)="action.emit(previous)" title="{{ 'core.previous' | translate }}">
-                <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
-            </a>
-        </ion-col>
-        <ion-col text-right>
-            <a ion-button icon-only clear *ngIf="next > 0" (click)="action.emit(next)" title="{{ 'core.next' | translate }}">
-                <ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
-            </a>
-        </ion-col>
-    </ion-row>
-</ion-grid>
diff --git a/src/addon/mod/book/components/navigation-arrows/navigation-arrows.ts b/src/addon/mod/book/components/navigation-arrows/navigation-arrows.ts
deleted file mode 100644
index 64a103f84..000000000
--- a/src/addon/mod/book/components/navigation-arrows/navigation-arrows.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-// (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 { Component, Input, Output, EventEmitter } from '@angular/core';
-
-/**
- * Component to navigate to previous or next chapter in a book.
- */
-@Component({
-    selector: 'addon-mod-book-navigation-arrows',
-    templateUrl: 'addon-mod-assign-submission-navigation-arrows.html'
-})
-export class AddonModBookNavigationArrowsComponent {
-    @Input() previous?: string; // Previous chapter ID.
-    @Input() next?: string; // Next chapter ID.
-    @Output() action?: EventEmitter<string>; // Will emit an event when the item clicked.
-
-    constructor() {
-        this.action = new EventEmitter();
-    }
-}
diff --git a/src/components/navigation-bar/core-navigation-bar.html b/src/components/navigation-bar/core-navigation-bar.html
index 07d9810ac..4a7c211d3 100644
--- a/src/components/navigation-bar/core-navigation-bar.html
+++ b/src/components/navigation-bar/core-navigation-bar.html
@@ -1,18 +1,18 @@
-<ion-grid no-padding  *ngIf="previous || info || next">
+<ion-grid no-padding *ngIf="previous || info || next">
     <ion-row>
-        <ion-col text-left>
-            <a ion-button icon-only clear color="info" *ngIf="previous" (click)="action.emit(previous)" [title]="'core.previous' | translate">
-                <ion-icon name="arrow-dropleft-circle"></ion-icon>
+        <ion-col text-start>
+            <a ion-button icon-only clear *ngIf="previous" (click)="action.emit(previous)" [title]="'core.previous' | translate">
+                <ion-icon name="arrow-back" md="ios-arrow-back"></ion-icon>
             </a>
         </ion-col>
         <ion-col text-center>
-            <a ion-button icon-only clear color="info" *ngIf="info" (click)="showInfo()" [title]="title">
+            <a ion-button icon-only clear *ngIf="info" (click)="showInfo()" [title]="title">
                 <ion-icon name="information-circle"></ion-icon>
             </a>
         </ion-col>
-        <ion-col text-right>
-            <a ion-button icon-only clear color="info" *ngIf="next" (click)="action.emit(next)" [title]="'core.next' | translate">
-                <ion-icon name="arrow-dropright-circle"></ion-icon>
+        <ion-col text-end>
+            <a ion-button icon-only clear *ngIf="next" (click)="action.emit(next)" [title]="'core.next' | translate">
+                <ion-icon name="arrow-forward" md="ios-arrow-forward"></ion-icon>
             </a>
         </ion-col>
     </ion-row>