diff --git a/theme/boost/scss/moodle/courseindex.scss b/theme/boost/scss/moodle/courseindex.scss
index 418fae3bd14..35d587c533a 100644
--- a/theme/boost/scss/moodle/courseindex.scss
+++ b/theme/boost/scss/moodle/courseindex.scss
@@ -1,11 +1,12 @@
 $courseindex-link-color: $list-group-action-color !default;
+$courseindex-link-color-selected: color-yiq($primary) !default;
 $courseindex-link-dimmed-color: $gray-600 !default;
 $courseindex-link-hover-color: black !default;
 $courseindex-item-dragging-bg: theme-color-level('info', -11) !default;
 $courseindex-item-dragging-border: theme-color-level('info', -9) !default;
 $courseindex-item-active-border: $gray-300 !default;
 $courseindex-item-active-bg: $gray-100 !default;
-$courseindex-item-page-bg: $gray-200 !default;
+$courseindex-item-page-bg: $primary !default;
 $courseindex-item-padding-y: 0.5rem;
 $courseindex-item-padding-x: 0.5rem;
 $courseindex-item-radius: $border-radius !default;
@@ -97,13 +98,21 @@ $courseindex-item-current: $primary !default;
         // Current page item.
         &.pageitem {
             background-color: $courseindex-item-page-bg;
-            color: $courseindex-link-hover-color;
+            color: $courseindex-link-color-selected;
             scroll-margin: 6rem;
             a {
-                color: $courseindex-link-hover-color;
+                color: $courseindex-link-color-selected;
             }
             .courseindex-link {
-                text-shadow: 0 1px 0 rgba($courseindex-link-hover-color, .3);
+                text-shadow: 0 1px 0 rgba($courseindex-link-color-selected, .3);
+            }
+
+            @include hover-focus() {
+                background-color: darken($courseindex-item-page-bg, 7.5%);
+                color: darken($courseindex-link-color-selected, 10%);
+                .courseindex-link {
+                    color: darken($courseindex-link-color-selected, 10%);
+                }
             }
         }
 
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 5175bf2766c..2eafe95e737 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -21377,13 +21377,18 @@ div.editor_atto_toolbar button .icon {
   .courseindex .courseindex-item.rectrictions .courseindex-locked {
     display: block; }
   .courseindex .courseindex-item.pageitem {
-    background-color: #e9ecef;
-    color: black;
+    background-color: #0f6cbf;
+    color: #fff;
     scroll-margin: 6rem; }
     .courseindex .courseindex-item.pageitem a {
-      color: black; }
+      color: #fff; }
     .courseindex .courseindex-item.pageitem .courseindex-link {
-      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
+      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); }
+    .courseindex .courseindex-item.pageitem:hover, .courseindex .courseindex-item.pageitem:focus {
+      background-color: #0c589c;
+      color: #e6e5e5; }
+      .courseindex .courseindex-item.pageitem:hover .courseindex-link, .courseindex .courseindex-item.pageitem:focus .courseindex-link {
+        color: #e6e5e5; }
   .courseindex .courseindex-item .completioninfo {
     min-width: 24px; }
     .courseindex .courseindex-item .completioninfo.completion_complete {
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 4e88f2c7a38..0e4e6811ba1 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -21323,13 +21323,18 @@ div.editor_atto_toolbar button .icon {
   .courseindex .courseindex-item.rectrictions .courseindex-locked {
     display: block; }
   .courseindex .courseindex-item.pageitem {
-    background-color: #e9ecef;
-    color: black;
+    background-color: #0f6cbf;
+    color: #fff;
     scroll-margin: 6rem; }
     .courseindex .courseindex-item.pageitem a {
-      color: black; }
+      color: #fff; }
     .courseindex .courseindex-item.pageitem .courseindex-link {
-      text-shadow: 0 1px 0 rgba(0, 0, 0, 0.3); }
+      text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3); }
+    .courseindex .courseindex-item.pageitem:hover, .courseindex .courseindex-item.pageitem:focus {
+      background-color: #0c589c;
+      color: #e6e5e5; }
+      .courseindex .courseindex-item.pageitem:hover .courseindex-link, .courseindex .courseindex-item.pageitem:focus .courseindex-link {
+        color: #e6e5e5; }
   .courseindex .courseindex-item .completioninfo {
     min-width: 24px; }
     .courseindex .courseindex-item .completioninfo.completion_complete {