diff --git a/message/output/popup/templates/notification_area_content_area_header.mustache b/message/output/popup/templates/notification_area_content_area_header.mustache
index 6d7047baf5a..db8e0f4856f 100644
--- a/message/output/popup/templates/notification_area_content_area_header.mustache
+++ b/message/output/popup/templates/notification_area_content_area_header.mustache
@@ -36,6 +36,6 @@
     }
 
 }}
-<div class="image-container"><img src="{{{iconurl}}}" alt="{{#str}}notificationimage, message{{/str}}"/></div>
+<div class="image-container">{{#pix}} e/text_highlight, core, {{#str}} notificationimage, message {{/str}} {{/pix}}</div>
 <div class="subject-container">{{subject}}</div>
 <div class="timestamp">{{timecreatedpretty}}</div>
diff --git a/message/output/popup/templates/notification_content_item.mustache b/message/output/popup/templates/notification_content_item.mustache
index 6da6648a1d9..9bd76bfc9bc 100644
--- a/message/output/popup/templates/notification_content_item.mustache
+++ b/message/output/popup/templates/notification_content_item.mustache
@@ -65,7 +65,7 @@
 
         <div class="content-item-body">
             <div class="notification-image">
-                <img src="{{{iconurl}}}" alt="{{#str}}notificationimage, message{{/str}}"/>
+                {{#pix}} e/text_highlight, core, {{#str}} notificationimage, message {{/str}} {{/pix}}
             </div>
             <div class="notification-message">{{shortenedsubject}}</div>
         </div>
diff --git a/theme/boost/scss/moodle/popover-region.scss b/theme/boost/scss/moodle/popover-region.scss
index e8e22b615fa..f45474fb33d 100644
--- a/theme/boost/scss/moodle/popover-region.scss
+++ b/theme/boost/scss/moodle/popover-region.scss
@@ -5,8 +5,8 @@ $region-container-z-index: 1;
 $region-header-height: 25px;
 $region-footer-height: 30px;
 $content-item-hover-colour-bg: $primary;
-$content-item-hover-colour-text: #fff;
-$content-item-selected-colour-bg: #4f94cd;
+$content-item-hover-colour-text: $white;
+$content-item-selected-colour-bg: #3279b3;
 $content-item-unread-colour: #f4f4f4;
 $content-header-footer-height: $region-header-height + $region-footer-height;
 
@@ -178,6 +178,11 @@ $content-header-footer-height: $region-header-height + $region-footer-height;
         .icon {
             font-weight: bolder;
         }
+        .notification-image {
+            .icon {
+                font-weight: 400;
+            }
+        }
     }
 }
 
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index bc8b96cd1de..6fd0fd05f1d 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -35667,6 +35667,9 @@ body {
 .navbar-nav .popover-region .icon {
   font-weight: bolder;
 }
+.navbar-nav .popover-region .notification-image .icon {
+  font-weight: 400;
+}
 
 .navbar .popover-region.collapsed .popover-region-container {
   opacity: 0;
@@ -35766,9 +35769,9 @@ body {
   width: calc(100% - 24px);
 }
 .content-item-container.selected {
-  background-color: #4f94cd;
+  background-color: #3279b3;
   color: #fff;
-  border-color: #4f94cd;
+  border-color: #3279b3;
 }
 .content-item-container.selected .content-item-footer .timestamp {
   color: #fff;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index 9423f50b9ae..cb53a58adda 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -35601,6 +35601,9 @@ body {
 .navbar-nav .popover-region .icon {
   font-weight: bolder;
 }
+.navbar-nav .popover-region .notification-image .icon {
+  font-weight: 400;
+}
 
 .navbar .popover-region.collapsed .popover-region-container {
   opacity: 0;
@@ -35700,9 +35703,9 @@ body {
   width: calc(100% - 24px);
 }
 .content-item-container.selected {
-  background-color: #4f94cd;
+  background-color: #3279b3;
   color: #fff;
-  border-color: #4f94cd;
+  border-color: #3279b3;
 }
 .content-item-container.selected .content-item-footer .timestamp {
   color: #fff;