diff --git a/blocks/myoverview/templates/courses-view.mustache b/blocks/myoverview/templates/courses-view.mustache
index 38346598a45..5a5f69c0fa7 100644
--- a/blocks/myoverview/templates/courses-view.mustache
+++ b/blocks/myoverview/templates/courses-view.mustache
@@ -23,7 +23,7 @@
     {}
 }}
 <div id="courses-view-{{uniqid}}" data-region="courses-view">
-    <div class="row text-xs-center">
+    <div class="row text-xs-center text-center">
         <div class="btn-group m-y-2" role="group">
             <button type="button" class="btn btn-secondary active" data-action="view-in-progress">
                 {{#str}} inprogress, block_myoverview {{/str}}
diff --git a/blocks/myoverview/templates/event-list.mustache b/blocks/myoverview/templates/event-list.mustache
index 8e74213366b..28ba3091527 100644
--- a/blocks/myoverview/templates/event-list.mustache
+++ b/blocks/myoverview/templates/event-list.mustache
@@ -62,7 +62,7 @@
     <h5 id="event-list-title-{{uniqid}}">
         {{$title}}{{/title}} <span class="hidden" data-region="loading-icon-container">{{> core/loading }}</span>
     </h5>
-    <ul class="list-group" data-region="event-list" aria-describedby="event-list-title-{{uniqid}}">
+    <ul class="list-group unstyled" data-region="event-list" aria-describedby="event-list-title-{{uniqid}}">
         {{> block_myoverview/event-list-items }}
     </ul>
 </div>
diff --git a/blocks/myoverview/templates/timeline-view-dates.mustache b/blocks/myoverview/templates/timeline-view-dates.mustache
index ca0e158197c..adf82dc593c 100644
--- a/blocks/myoverview/templates/timeline-view-dates.mustache
+++ b/blocks/myoverview/templates/timeline-view-dates.mustache
@@ -42,7 +42,7 @@
                 {{$title}}{{#str}} next30days, block_myoverview {{/str}}{{/title}}
             {{/ block_myoverview/event-list }}
         </div>
-        <div class="text-xs-center m-y-2">
+        <div class="text-xs-center text-center m-y-2">
             <button type="button" class="btn btn-secondary" data-action="view-more">{{#str}} viewmore {{/str}}</button>
         </div>
     </div>
diff --git a/blocks/myoverview/templates/timeline-view.mustache b/blocks/myoverview/templates/timeline-view.mustache
index fd28fecbf89..9ed2eb8fd4c 100644
--- a/blocks/myoverview/templates/timeline-view.mustache
+++ b/blocks/myoverview/templates/timeline-view.mustache
@@ -23,7 +23,7 @@
     {}
 }}
 <div id="timeline-view-{{uniqid}}" data-region="timeline-view">
-    <div class="row text-xs-center">
+    <div class="row text-xs-center text-center">
         <div class="btn-group m-y-2" role="group" data-toggle="btns">
             <a class="btn btn-default active" href="#myoverview_timeline_dates" data-toggle="tab">
                 {{#str}} sortbydates, block_myoverview {{/str}}
diff --git a/theme/bootstrapbase/templates/block_myoverview/event-list-item.mustache b/theme/bootstrapbase/templates/block_myoverview/event-list-item.mustache
new file mode 100644
index 00000000000..6a8d3aee94b
--- /dev/null
+++ b/theme/bootstrapbase/templates/block_myoverview/event-list-item.mustache
@@ -0,0 +1,64 @@
+{{!
+    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 block_myoverview/event-list-item
+
+    This template renders an event list item for the myoverview block.
+
+    Example context (json):
+    {
+        "actionname": "Submit assignment",
+        "actionurl": "https://www.google.com",
+        "enddate": "Nov 4th, 10am",
+        "contextname": "Assignment due 1",
+        "contexturl": "https://www.google.com",
+        "coursename": "Course 1",
+        "itemcount": 1,
+        "icon": {
+            "key": "icon",
+            "component": "mod_assign",
+            "alttext": "Assignment icon"
+        }
+    }
+}}
+<li class="list-group-item" data-region="event-list-item">
+    <div class="container-fluid">
+        <div class="row-fluid">
+            {{#itemcount}}
+                <div class="pull-xs-right visible-desktop m-l-1">
+                    <span class="tag tag-pill tag-default">{{.}}</span>
+                </div>
+            {{/itemcount}}
+            <div class="d-inline-block pull-xs-right m-l-1"><a class="visible-desktop" href="{{{actionurl}}}">{{actionname}}</a></div>
+            <div class="d-inline-block pull-xs-right"><div class="visible-desktop">{{enddate}}</div></div>
+            <div class="d-inline-block">
+                {{#icon}}{{#pix}} {{key}}, {{component}}, {{alttext}} {{/pix}}{{/icon}}
+            </div>
+            <div class="d-inline-block m-l-1">
+                <div class="container-fluid">
+                    <div class="row-fluid">
+                        <a href="{{{contexturl}}}">{{contextname}}</a>
+                    </div>
+                    <div class="row-fluid text-muted">
+                        {{coursename}}
+                    </div>
+                </div>
+            </div>
+            <div class="text-xs-right text-right hidden-desktop">{{enddate}}</div>
+        </div>
+    </div>
+</li>
diff --git a/theme/bootstrapbase/templates/block_myoverview/main.mustache b/theme/bootstrapbase/templates/block_myoverview/main.mustache
new file mode 100644
index 00000000000..a393c8eba78
--- /dev/null
+++ b/theme/bootstrapbase/templates/block_myoverview/main.mustache
@@ -0,0 +1,50 @@
+{{!
+    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 block_myoverview/main
+
+    This template renders the main content area for the myoverview block.
+
+    Example context (json):
+    {}
+}}
+
+<div id="block-myoverview-{{uniqid}}" class="block-myoverview container-fluid" data-region="myoverview">
+    <div class="row">
+        <ul class="nav nav-tabs" role="tablist">
+            <li class="nav-item active">
+                <a class="nav-link" href="#myoverview_timeline_view" role="tab" data-toggle="tab">
+                    {{#str}} timeline, block_myoverview {{/str}}
+                </a>
+            </li>
+            <li class="nav-item">
+                <a class="nav-link" href="#myoverview_courses_view" role="tab" data-toggle="tab">
+                    {{#str}} courses {{/str}}
+                </a>
+            </li>
+        </ul>
+    </div>
+
+    <div class="tab-content">
+        <div role="tabpanel" class="tab-pane fade in active" id="myoverview_timeline_view">
+            {{> block_myoverview/timeline-view }}
+        </div>
+        <div role="tabpanel" class="tab-pane fade" id="myoverview_courses_view">
+            {{> block_myoverview/courses-view }}
+        </div>
+    </div>
+</div>