diff --git a/message/templates/message_drawer_contacts_list.mustache b/message/templates/message_drawer_contacts_list.mustache
index b2b210badd7..0b0424922ee 100644
--- a/message/templates/message_drawer_contacts_list.mustache
+++ b/message/templates/message_drawer_contacts_list.mustache
@@ -65,7 +65,9 @@
             style="height: 38px"
         >
         {{#showonlinestatus}}
-            <span class="contact-status {{#isonline}}online{{/isonline}}"></span>
+            <span class="contact-status icon-size-2 {{#isonline}}online{{/isonline}}">
+                {{#isonline}} {{#pix}} t/online, core, {{#str}} online, core_message {{/str}} {{/pix}} {{/isonline}}
+            </span>
         {{/showonlinestatus}}
         <h6 class="ml-2 font-weight-bold">{{#highlight}}{{{highlight}}}{{/highlight}}{{^highlight}}{{fullname}}{{/highlight}}</h6>
         <div
diff --git a/message/templates/message_drawer_conversations_list.mustache b/message/templates/message_drawer_conversations_list.mustache
index 2997d848bb8..d21b20f26be 100644
--- a/message/templates/message_drawer_conversations_list.mustache
+++ b/message/templates/message_drawer_conversations_list.mustache
@@ -54,7 +54,9 @@
             >
         {{/imageurl}}
         {{#showonlinestatus}}
-            <span class="contact-status {{#isonline}}online{{/isonline}}"></span>
+            <span class="contact-status icon-size-2 {{#isonline}}online{{/isonline}}">
+                {{#isonline}} {{#pix}} t/online, core, {{#str}} online, core_message {{/str}} {{/pix}} {{/isonline}}
+            </span>
         {{/showonlinestatus}}
         <div class="w-100 text-truncate ml-2 my-2">
             <div class="d-flex">
diff --git a/message/templates/message_drawer_messages_list.mustache b/message/templates/message_drawer_messages_list.mustache
index cf25888cd8a..1c82db731dd 100644
--- a/message/templates/message_drawer_messages_list.mustache
+++ b/message/templates/message_drawer_messages_list.mustache
@@ -64,7 +64,9 @@
             style="height: 38px"
         >
         {{#showonlinestatus}}
-            <span class="contact-status {{#isonline}}online{{/isonline}}"></span>
+            <span class="contact-status icon-size-2 {{#isonline}}online{{/isonline}}">
+                {{#isonline}} {{#pix}} t/online, core, {{#str}} online, core_message {{/str}} {{/pix}} {{/isonline}}
+            </span>
         {{/showonlinestatus}}
         <div class="w-100 text-truncate ml-2">
             <div class="d-flex">
diff --git a/message/templates/message_drawer_view_group_info_participants_list.mustache b/message/templates/message_drawer_view_group_info_participants_list.mustache
index ef4a8487434..dd5be7e96fe 100644
--- a/message/templates/message_drawer_view_group_info_participants_list.mustache
+++ b/message/templates/message_drawer_view_group_info_participants_list.mustache
@@ -59,7 +59,9 @@
             style="height: 38px"
         >
         {{#showonlinestatus}}
-            <span class="contact-status {{#isonline}}online{{/isonline}}"></span>
+            <span class="contact-status icon-size-2 {{#isonline}}online{{/isonline}}">
+                {{#isonline}} {{#pix}} t/online, core, {{#str}} online, core_message {{/str}} {{/pix}} {{/isonline}}
+            </span>
         {{/showonlinestatus}}
         <h6 class="ml-2">{{fullname}}</h6>
         <div
diff --git a/theme/boost/scss/moodle/message.scss b/theme/boost/scss/moodle/message.scss
index 9ae0cb31d7f..7d0faab8d77 100644
--- a/theme/boost/scss/moodle/message.scss
+++ b/theme/boost/scss/moodle/message.scss
@@ -442,13 +442,11 @@ $message-day-color: color-yiq($message-app-bg) !default;
     .contact-status {
         position: absolute;
         left: 39px;
-        top: 39px;
-        width: 10px;
-        height: 10px;
-        border-radius: 50%;
+        top: 34px;
         &.online {
-            border: 1px solid $body-bg;
-            background-color: $green;
+            .icon {
+                color: $green;
+            }
         }
     }
 
diff --git a/theme/boost/style/moodle.css b/theme/boost/style/moodle.css
index 6d0c3d0f82a..4c2225ec840 100644
--- a/theme/boost/style/moodle.css
+++ b/theme/boost/style/moodle.css
@@ -31565,14 +31565,10 @@ a.ygtvspacer:hover {
 .message-app .contact-status {
   position: absolute;
   left: 39px;
-  top: 39px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
+  top: 34px;
 }
-.message-app .contact-status.online {
-  border: 1px solid #fff;
-  background-color: #357a32;
+.message-app .contact-status.online .icon {
+  color: #357a32;
 }
 .message-app .message p {
   margin: 0;
diff --git a/theme/classic/style/moodle.css b/theme/classic/style/moodle.css
index b14164ed5de..7318ebca35f 100644
--- a/theme/classic/style/moodle.css
+++ b/theme/classic/style/moodle.css
@@ -31565,14 +31565,10 @@ a.ygtvspacer:hover {
 .message-app .contact-status {
   position: absolute;
   left: 39px;
-  top: 39px;
-  width: 10px;
-  height: 10px;
-  border-radius: 50%;
+  top: 34px;
 }
-.message-app .contact-status.online {
-  border: 1px solid #fff;
-  background-color: #357a32;
+.message-app .contact-status.online .icon {
+  color: #357a32;
 }
 .message-app .message p {
   margin: 0;