diff --git a/theme/bootstrapbase/less/moodle/message.less b/theme/bootstrapbase/less/moodle/message.less
index 1e500b71d88..fb52a7ece27 100644
--- a/theme/bootstrapbase/less/moodle/message.less
+++ b/theme/bootstrapbase/less/moodle/message.less
@@ -1289,20 +1289,20 @@
         font-weight: normal;
     }
 
-    .overview-section-toggle {
+    .accordion-group {
         .collapsed-icon-container {
-            display: none;
-        }
-        .expanded-icon-container {
             display: inline-block;
         }
+        .expanded-icon-container {
+            display: none;
+        }
 
-        &.collapsed {
+        &.expanded {
             .collapsed-icon-container {
-                display: inline-block;
+                display: none;
             }
             .expanded-icon-container {
-                display: none;
+                display: inline-block;
             }
         }
     }
@@ -1317,6 +1317,11 @@
             }
         }
     }
+    .onepix {
+        height: 1px;
+        width: 1px;
+        position: absolute;
+    }
 
     .view-conversation {
         .content-message-container {
diff --git a/theme/bootstrapbase/style/moodle.css b/theme/bootstrapbase/style/moodle.css
index c2724a4779e..b8fd9aacdd2 100644
--- a/theme/bootstrapbase/style/moodle.css
+++ b/theme/bootstrapbase/style/moodle.css
@@ -9190,18 +9190,18 @@ a.ygtvspacer:hover {
   font-size: 14px;
   font-weight: normal;
 }
-.message-drawer .overview-section-toggle .collapsed-icon-container {
-  display: none;
-}
-.message-drawer .overview-section-toggle .expanded-icon-container {
+.message-drawer .accordion-group .collapsed-icon-container {
   display: inline-block;
 }
-.message-drawer .overview-section-toggle.collapsed .collapsed-icon-container {
-  display: inline-block;
-}
-.message-drawer .overview-section-toggle.collapsed .expanded-icon-container {
+.message-drawer .accordion-group .expanded-icon-container {
   display: none;
 }
+.message-drawer .accordion-group.expanded .collapsed-icon-container {
+  display: none;
+}
+.message-drawer .accordion-group.expanded .expanded-icon-container {
+  display: inline-block;
+}
 .message-drawer .view-overview-body .section {
   display: block;
 }
@@ -9209,6 +9209,11 @@ a.ygtvspacer:hover {
   display: flex;
   flex-direction: column;
 }
+.message-drawer .onepix {
+  height: 1px;
+  width: 1px;
+  position: absolute;
+}
 .message-drawer .view-conversation .content-message-container img {
   max-width: 100%;
 }
diff --git a/theme/bootstrapbase/templates/core_message/message_drawer_lazy_load_list.mustache b/theme/bootstrapbase/templates/core_message/message_drawer_lazy_load_list.mustache
new file mode 100644
index 00000000000..46b3b3ee6e2
--- /dev/null
+++ b/theme/bootstrapbase/templates/core_message/message_drawer_lazy_load_list.mustache
@@ -0,0 +1,63 @@
+{{!
+    This file is part of Moodle - http://moodle.org/
+
+    Moodle is free software: you can redistribute it and/or modify
+    it under the terms of the GNU General Public License as published by
+    the Free Software Foundation, either version 3 of the License, or
+    (at your option) any later version.
+
+    Moodle is distributed in the hope that it will be useful,
+    but WITHOUT ANY WARRANTY; without even the implied warranty of
+    MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+    GNU General Public License for more details.
+
+    You should have received a copy of the GNU General Public License
+    along with Moodle.  If not, see <http://www.gnu.org/licenses/>.
+}}
+{{!
+    @template core_message/message_drawer_lazy_load_list
+
+    This template will render a lazy loaded list for the message drawer.
+
+    Classes required for JS:
+    * none
+
+    Data attributes required for JS:
+    * All data attributes are required
+
+    Context variables required for this template:
+    * userid The logged in user id
+    * urls The URLs for the popover
+
+    This is an overridden template
+    adding "div.onpix" to ensure content has a 1 px height for Bootstrap 2 JS to work.
+
+    Example context (json):
+    {}
+
+}}
+<div
+    class="{{$rootclasses}}{{/rootclasses}}"
+    style="overflow-y: auto"
+    aria-live="polite"
+    data-region="lazy-load-list"
+    data-user-id="{{loggedinuser.id}}"
+    {{$rootattributes}}{{/rootattributes}}
+>
+    <div class="onepix">
+    </div>
+    <div class="hidden text-center p-2" data-region="empty-message-container">
+        <p class="text-muted mt-2">
+            {{$emptymessage}}{{/emptymessage}}
+        </p>
+    </div>
+    <div class="hidden list-group" data-region="content-container">
+        {{$content}}{{/content}}
+    </div>
+    <div class="list-group" data-region="placeholder-container">
+        {{$placeholder}}{{/placeholder}}
+    </div>
+    <div class="w-100 text-center p-3 hidden" data-region="loading-icon-container" >
+        {{> core/loading }}
+    </div>
+</div>
diff --git a/theme/bootstrapbase/templates/core_message/message_drawer_view_overview_section.mustache b/theme/bootstrapbase/templates/core_message/message_drawer_view_overview_section.mustache
index 060d2878bfd..b4798a15e1a 100644
--- a/theme/bootstrapbase/templates/core_message/message_drawer_view_overview_section.mustache
+++ b/theme/bootstrapbase/templates/core_message/message_drawer_view_overview_section.mustache
@@ -33,19 +33,22 @@
     This is an overridden template
     changing icon "t/collapsedcaret" to "t/collapsed"
     adding ".in" to ".show"
+    adding .accordion-group to the main container div
+    adding expanded to the .accordion-group if required for toggle icons to work.
 
     Example context (json):
     {}
 
 }}
 <div
-    class="accordion-group section border-0"
+    class="accordion-group section border-0 {{#expanded}}expanded{{/expanded}}"
     data-region="{{$region}}{{/region}}"
 >
-    <div id="{{$region}}{{/region}}-toggle" class="card-header p-0" data-region="toggle">
+    <div id="{{$region}}{{/region}}-toggle" class="accordion-heading" data-region="toggle">
         <button
             class="btn btn-link w-100 text-left p-2 m-0 d-flex align-items-center overview-section-toggle {{^expanded}}collapsed{{/expanded}}"
             data-toggle="collapse"
+            data-parent="#message-drawer-view-overview-container"
             data-target="#{{$region}}{{/region}}-target"
             aria-expanded="{{#expanded}}true{{/expanded}}{{^expanded}}false{{/expanded}}"
             aria-controls="{{$region}}{{/region}}-target"
@@ -66,7 +69,7 @@
         </button>
     </div>
     {{< core_message/message_drawer_lazy_load_list }}
-        {{$rootclasses}}collapse border-bottom {{#expanded}}show in{{/expanded}}{{/rootclasses}}
+        {{$rootclasses}} accordion-body collapse border-bottom {{#expanded}}show in{{/expanded}}{{/rootclasses}}
         {{$rootattributes}}
             id="{{$region}}{{/region}}-target"
             aria-labelledby="{{$region}}{{/region}}-toggle"