diff --git a/mod/book/styles.css b/mod/book/styles.css
index 2d3982ecb95..bff952db56c 100644
--- a/mod/book/styles.css
+++ b/mod/book/styles.css
@@ -98,11 +98,21 @@
 @media (max-width: 768px) {
     .path-mod-book #mod_book-chaptersnavigation {
         top: calc(100% - 250px);
-        margin: 0;
+        margin: 0 -0.5rem;
+        z-index: 1;
+    }
+
+    .path-mod-book .btn-previous,
+    .path-mod-book .btn-next {
+        opacity: 0.85;
+        border-radius: 25px;
+        padding: 10px;
+        width: 45px;
+        height: 45px;
     }
 
     .path-mod-book .book_content {
-        margin-left: 35px;
-        margin-right: 35px;
+        margin-left: -5px;
+        margin-right: -5px;
     }
 }
diff --git a/theme/classic/scss/moodle.scss b/theme/classic/scss/moodle.scss
index 705f0c08e55..a8509493020 100644
--- a/theme/classic/scss/moodle.scss
+++ b/theme/classic/scss/moodle.scss
@@ -20,16 +20,22 @@ img.userpicture {
 
 .path-mod-book {
     #mod_book-chaptersnavigation {
-        margin-left: -5px;
-        margin-right: -5px;
+        margin: 0 -0.75rem;
 
-        @include media-breakpoint-down(md) {
+        @include media-breakpoint-down(sm) {
             top: calc(100% - 150px);
+            z-index: 1;
         }
     }
 
     .book_content {
         margin: 0 30px;
+
+        @include media-breakpoint-down(sm) {
+            margin-left: -10px;
+            margin-right: -10px;
+            padding: 0 5px;
+        }
     }
 }