diff --git a/message/templates/message_drawer_conversations_list.mustache b/message/templates/message_drawer_conversations_list.mustache
index 0b9f0fcfe6e..27cab59c795 100644
--- a/message/templates/message_drawer_conversations_list.mustache
+++ b/message/templates/message_drawer_conversations_list.mustache
@@ -45,7 +45,7 @@
     >
         {{#imageurl}}
             <img
-                class="rounded-circle"
+                class="rounded-circle align-self-start"
                 src="{{{.}}}"
                 alt="{{name}}"
                 aria-hidden="true"
diff --git a/theme/bootstrapbase/less/moodle/bs4-compat.less b/theme/bootstrapbase/less/moodle/bs4-compat.less
index 612420d38b4..2936d935195 100644
--- a/theme/bootstrapbase/less/moodle/bs4-compat.less
+++ b/theme/bootstrapbase/less/moodle/bs4-compat.less
@@ -562,6 +562,9 @@
 .position-relative {
     position: relative !important;
 }
+.align-self-start {
+    align-self: flex-start !important;
+}
 .align-self-center {
     align-self: center !important;
 }
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index 5e8cdf6205c..7d95adddb04 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -22281,6 +22281,9 @@ ul.indented-list {
 .position-relative {
   position: relative !important;
 }
+.align-self-start {
+  align-self: flex-start !important;
+}
 .align-self-center {
   align-self: center !important;
 }